\n O desconto será aplicado na próxima renovação do seu Plano de Hospedagem.\n {' '}\n \n Você gostaria de renovar agora ou deixar para depois (ao final do ciclo atual)?\n \n
),\n beforeRenewal: 'Renovar depois',\n paymentNow: 'Pagar agora mesmo',\n renewalNow: 'Renovar agora mesmo',\n },\n manageSubscriptionBenefit: {\n benefitTitle: 'Considere esse benefício antes de cancelar!',\n benefitDescriptionMonth: (\n <>\n \n El descuento se aplicará en la próxima renovación de su Plan de Hosting.\n {' '}\n \n ¿Le gustaría renovar ahora o dejarlo para después (al final del ciclo actual)?\n \n
),\n beforeRenewal: 'Renovar después',\n paymentNow: 'Pagar ahora',\n renewalNow: 'Renovar ahora',\n },\n manageSubscriptionBenefit: {\n benefitTitle: '¡Considere este beneficio antes de cancelar!',\n benefitDescriptionMonth: (\n <>\n handleOnClick({ href, event })}\n target={target}\n title={text}\n variant={variant}\n inlineLink={inlineLink}\n >\n {text}\n {iconRight && (\n \n {iconRight}\n \n )}\n \n );\n};\n\nexport default Link;\n","import { SITE_HG } from '@/config';\nimport { isBRServer } from '@/utils/Validators/validation';\n\nconst REGISTER_DOMAIN_URL_BY_BRAND = {\n br: `${SITE_HG}/registro-de-dominio`,\n es: `${SITE_HG}/dominios`,\n};\n\nconst SUPPORT_DOMAINS_URL_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/categories/115000074153',\n es: 'https://soporte.hostgator.mx/hc/es-419/categories/28437884275987',\n};\n\nconst SUPPORT_SECURITY_URL_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/sections/360007329973-SiteLock',\n es: '',\n};\n\nconst SUPPORT_HOST_AND_SERVERS_URL_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/categories/115000074014',\n es: 'https://soporte.hostgator.mx/hc/es-419/categories/28437884383123',\n};\n\nconst TRANSFER_DOMAIN_REQUIREMENTS_URL_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115001894134',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/217312747--C%C3%B3mo-transferir-un-dominio-a-HostGator-',\n};\n\nconst TRANSFER_DOMAIN_TO_HG_URL_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115001894134',\n es: `${SITE_HG}/dominios`,\n};\n\nconst TRANSFER_ES_DOMAIN_URL_BY_BRAND = {\n cl: `${SITE_HG}/transferir-dominios`,\n es: `${SITE_HG}/transferir-dominios`,\n};\n\nconst DNS_WIZARD_HELP_URL_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000497973#Opcao1',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/217236957#opcion-1',\n};\n\nconst DNS_WIZARD_PROPAGATION_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000451693',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360024988331',\n};\n\nconst DNS_WIZARD_HOW_TO_VERIFY_PROPAGATION_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000451693#verificar',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360024988331#propagado',\n};\n\nconst DNS_WIZARD_HOW_TO_CONFIG_ALTER_PLATFORM_SITE = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000497973#Opcao1',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/217236957#opcion-1',\n};\n\nconst DNS_WIZARD_EMAIL_HELP_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360041621714',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/115001162711',\n};\n\nconst DNS_WIZARD_EMAIL_HOW_CONFIGURE_MAIL_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360002631274',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/216721368',\n};\n\nconst EPP_KEY_HOW_TO_ORDER_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000389394#solicitar',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360038889171',\n};\n\nconst HOW_TO_TRANSFER_A_DOMAIN_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115001894134-Como-transferir-um-dom%C3%ADnio-para-a-HostGator-',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/217312747-C%C3%B3mo-transferir-la-administraci%C3%B3n-de-un-dominio-a-HostGator',\n};\n\nconst HOW_TO_CREATE_OR_ALTER_DNS_REGISTER_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000389554-Como-criar-ou-alterar-um-registro-A-MX-TXT-CNAME-e-outros-na-Zona-DNS',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/217312747-C%C3%B3mo-transferir-la-administraci%C3%B3n-de-un-dominio-a-HostGator',\n};\n\nexport const REGISTER_DOMAIN_URL = REGISTER_DOMAIN_URL_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_DOMAINS_URL = SUPPORT_DOMAINS_URL_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_HOST_AND_SERVERS_URL = SUPPORT_HOST_AND_SERVERS_URL_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const TRANSFER_DOMAIN_REQUIREMENTS_URL = TRANSFER_DOMAIN_REQUIREMENTS_URL_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const TRANSFER_DOMAIN_TO_HG_URL = TRANSFER_DOMAIN_TO_HG_URL_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const TRANSFER_ES_DOMAIN_URL = TRANSFER_ES_DOMAIN_URL_BY_BRAND[isBRServer ? 'br' : 'es'];\n\nexport const SUPPORT_SECURITY_URL = SUPPORT_SECURITY_URL_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const DNS_WIZARD_HELP_URL = DNS_WIZARD_HELP_URL_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const DNS_WIZARD_PROPAGATION = DNS_WIZARD_PROPAGATION_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const DNS_WIZARD_HOW_TO_VERIFY_PROPAGATION = DNS_WIZARD_HOW_TO_VERIFY_PROPAGATION_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const DNS_WIZARD_HOW_TO_CONFIG_ALTER_PLATFORM = DNS_WIZARD_HOW_TO_CONFIG_ALTER_PLATFORM_SITE[isBRServer ? 'br' : 'es'];\nexport const DNS_WIZARD_EMAIL_HELP = DNS_WIZARD_EMAIL_HELP_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const DNS_WIZARD_EMAIL_HOW_CONFIGURE_MAIL = DNS_WIZARD_EMAIL_HOW_CONFIGURE_MAIL_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const EPP_KEY_HOW_TO_ORDER = EPP_KEY_HOW_TO_ORDER_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const HOW_TO_TRANSFER_A_DOMAIN = HOW_TO_TRANSFER_A_DOMAIN_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const HOW_TO_CREATE_OR_ALTER_DNS_REGISTER = HOW_TO_CREATE_OR_ALTER_DNS_REGISTER_BY_BRAND[isBRServer ? 'br' : 'es'];\n","export const RECORD_TYPES = {\n A: 'A',\n AAAA: 'AAAA',\n CAA: 'CAA',\n CNAME: 'CNAME',\n MX: 'MX',\n NS: 'NS',\n PTR: 'PTR',\n SOA: 'SOA',\n SRV: 'SRV',\n TXT: 'TXT',\n};\n\nexport const RECORD_CLASSES = {\n IN: 'IN', // Internet\n CH: 'CH', // Chaosnet\n HS: 'HS', // Hesiod\n};\n\nexport const EMAIL_PLATFORMS = {\n CPANEL: 'cpanel', // Cpanel\n TITAN: 'titan', // Titan\n};\n\nexport const BRANDS_ENUM = {\n BR: 'BR',\n MX: 'MX',\n CL: 'CL',\n CO: 'CO',\n};\n\nexport const HOSTING_PLATFORM_TYPES = {\n CUSTOM: 'custom',\n EXTERNAL: 'external',\n HOSTGATOR: 'hostgator',\n CUSTOM_DNS_ZONE: 'custom_dns_zone',\n LOJA_INTEGRADA: 'loja_integrada',\n NUVEMSHOP: 'nuvemshop',\n SHOPIFY: 'shopify',\n TIENDANUBE: 'tiendanube',\n RESERVED: 'reserved',\n UNDEFINED: 'undefined',\n MAIL: 'mail',\n CUSTOM_MAIL: 'custom_mail',\n DLOJA: 'dloja',\n};\n\nexport const EMAIL_PLATFORM_NAMES = {\n CUSTOM: 'Custom',\n GMAIL: 'Gmail',\n TITAN: 'Titan',\n CPANEL: 'cPanel',\n HOSTGATOR: 'Hostgator',\n RESERVED: 'Reserved',\n};\n\nexport const PLAN_TYPES = {\n DEDICATED: 'server',\n RESALE: 'reselleraccount',\n PLAN: 'hostingaccount',\n};\n\nexport const RESERVED_NAME_SERVERS = {\n MASTER: 'dns1.hostgator.com.br',\n SLAVE: 'dns2.hostgator.com.br',\n};\n\nexport const ERROR_MESSAGES = {\n DEFAULT: 'default',\n INVALID_SERVER: 'invalid_server',\n INVALID_IP: 'invalid_ip',\n REQUIRED: 'required',\n};\n\nexport const PLATFORM_NAMES = {\n godaddy: 'Godaddy',\n hostgator: 'Hostgator',\n kinghost: 'Kinghost',\n locaweb: 'Locaweb',\n loja_integrada: 'Loja Integrada',\n nuvemshop: 'Nuvemshop',\n tiendanube: 'Tiendanube',\n uolhost: 'Uolhost',\n shopify: 'Shopify',\n registro_br: 'Registro.br',\n dloja: 'Loja HostGator',\n};\n\nexport const CUSTOM_DNS_ZONE_PLATFORMS_URL = {\n loja_integrada: 'https://lojaintegrada.com.br/',\n nuvemshop: 'https://www.nuvemshop.com.br/',\n shopify: 'https://www.shopify.com/br',\n tiendanube: 'https://www.tiendanube.com/',\n shopify_br: 'https://www.shopify.com/br',\n shopify_mx: 'https://www.shopify.com/mx',\n shopify_co: 'https://www.shopify.com/co',\n shopify_cl: 'https://www.shopify.com/es',\n shopify_ar: 'https://www.shopify.com/es',\n shopify_pe: 'https://www.shopify.com/es',\n shopify_bo: 'https://www.shopify.com/es',\n shopify_cr: 'https://www.shopify.com/es',\n shopify_do: 'https://www.shopify.com/es',\n shopify_ec: 'https://www.shopify.com/es',\n shopify_sv: 'https://www.shopify.com/es',\n shopify_pa: 'https://www.shopify.com/es',\n shopify_py: 'https://www.shopify.com/es',\n shopify_uy: 'https://www.shopify.com/es',\n dloja: 'https://dlojavirtual.com/',\n};\n","import { isBRServer } from '@/utils/Validators/validation';\nimport { COUNTRY } from '..';\n\nconst SUPPORT_URLS_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br',\n es: 'https://soporte.hostgator.mx/hc/es-419',\n};\n\nconst SUPPORT_ARTICLES_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/',\n};\n\nconst SUPPORT_ARTICLE_ZONEMANAGER_CPANEL_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000389554',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/216721158',\n};\n\nconst SUPPORT_ARTICLE_ZONEMANAGER_WHM_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360054179034',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360049678232',\n};\n\nconst SUPPORT_ARTICLE_DNS_THROUGH_WHM_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360056256934',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360052091152',\n};\n\nconst SUPPORT_ARTICLE_DNS_REGISTROBR_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360056449953',\n es: '',\n};\n\nconst SUPPORT_ARTICLE_DNS_UOLHOST_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360054626714',\n es: '',\n};\n\nconst SUPPORT_ARTICLE_DNS_GODADDY_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360056450093',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360049858232',\n};\n\nconst SUPPORT_ARTICLE_DNS_LOCAWEB_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360056450213',\n es: '',\n};\n\nconst SUPPORT_ARTICLE_DNS_KINGHOST_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360054626834',\n es: '',\n};\n\nconst SUPPORT_ARTICLE_DNS_WEBEMPRESA_BY_BRAND = {\n br: '',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360049858332',\n};\n\nconst SUPPORT_ARTICLE_DNS_COLOMBIAHOSTING_BY_BRAND = {\n br: '',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360050315211',\n};\n\nconst SUPPORT_ARTICLE_DNS_NEUBOX_BY_BRAND = {\n br: '',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360049858512',\n};\n\nconst SUPPORT_ARTICLE_KNOW_MORE_DNS_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360019596774',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360049678152',\n};\n\nconst SUPPORT_ARTICLE_KNOW_MORE_DNS_POINTER_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360054298934',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360049748272',\n};\n\nconst RESELLER_PRICE_UPDATE_EXPLANATION_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/1260800338969',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360053346131',\n};\n\nconst GET_A_NEW_PLAN_BY_BRAND = {\n br: 'http://hostgator.com.br/email-profissional',\n es: `http://hostgator.${COUNTRY.toLowerCase()}/correo-profesional`,\n};\n\nconst TITAN_FAQ_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/categories/1260801368689',\n es: 'https://soporte.hostgator.mx/hc/es-419/categories/28437884383123',\n};\n\nconst CHAT_SUPPORT_URL_BY_BRAND = {\n br: 'https://financeiro.hostgator.com.br/chat/?country=br&department=technical#',\n es: `https://billing.hostgator.${COUNTRY.toLowerCase()}/chat/?country=mx&department=technical#`,\n};\n\nconst GET_A_NEW_DOMAIN_BY_BRAND = {\n br: 'https://www.hostgator.com.br/registro-de-dominio',\n es: `https://www.hostgator.${COUNTRY.toLowerCase()}/dominios`,\n};\n\nconst SERVICE_TERMS_BY_BRAND = {\n br: 'https://www.hostgator.com.br/termos-de-servico',\n es: `https://www.hostgator.${COUNTRY.toLowerCase()}/terminos`,\n};\n\nconst GET_ANALYZER_LINK_BY_BRAND = {\n br: 'analise@hostgator.com.br',\n es: 'https://soporte-latam.hostgator.com',\n};\n\nconst CHANGE_REGISTROBR_DNS = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000389114',\n es: '',\n};\n\nconst CHANGE_GODADDY_DNS = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360037642314',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360037746791',\n};\n\nconst CHANGE_LOCAWEB_DNS = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360037640614',\n es: '',\n};\n\nconst CHANGE_UOLHOST_DNS = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360037642134',\n es: '',\n};\n\nconst CHANGE_KINGHOST_DNS = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360037644234',\n es: '',\n};\n\nconst CHANGE_OTHERS_DNS = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000497973#registrado-em-outro-provedor',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/217236957-C%C3%B3mo',\n};\n\nconst CHANGE_WEBEMPRESA_DNS = {\n br: '',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360037758891',\n};\n\nconst CHANGE_COLOMBIAHOSTING_DNS = {\n br: '',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360037389492',\n};\n\nconst CHANGE_NEUBOX_DNS = {\n br: '',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360037755071',\n};\n\nconst GODADDY_PAGE = {\n br: 'https://www.godaddy.com/',\n es: 'https://www.godaddy.com/',\n};\n\nconst REGISTROBR_PAGE = {\n br: 'https://registro.br/',\n es: '',\n};\n\nconst LOCAWEB_PAGE = {\n br: 'https://www.locaweb.com.br/',\n es: '',\n};\n\nconst UOLHOST_PAGE = {\n br: 'https://uolhost.uol.com.br/',\n es: '',\n};\n\nconst KINGHOST_PAGE = {\n br: 'https://king.host/',\n es: '',\n};\n\nconst WEBEMPRESA_PAGE = {\n br: '',\n es: 'https://www.webempresa.com/',\n};\n\nconst COLOMBIAHOSTING_PAGE = {\n br: '',\n es: 'https://www.colombiahosting.com.co/',\n};\n\nconst NEUBOX_PAGE = {\n br: '',\n es: 'https://neubox.com/',\n};\n\n\nconst EXTERNAL_PLATFORM_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/7499808508699',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/7527058595995',\n};\n\nconst PERSONAL_DNS_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000389294',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/7511270022939',\n};\n\nconst DEFAULT_SERVER_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/7498793589147',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/7513054970395',\n};\n\nconst BACKUP_INFO_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000385173-Como-fazer-um-backup-completo',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/115000322691',\n};\n\nconst WOOCOMMERCE_ARTICLE_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/6405989020571-O-que-%C3%A9-WooCommerce-',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/7067232595995',\n};\n\nconst GMAIL_CREATE_ACCOUNT_BY_BRAND = {\n br: 'https://support.google.com/mail/answer/56256?hl=pt-BR',\n es: 'https://support.google.com/mail/answer/56256?hl=es',\n};\n\nconst FIRST_STEP_ASAAS = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/10091634807323',\n es: '',\n};\n\nconst ASAAS_INTEGRATION = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/10091716998171',\n es: '',\n};\n\nconst HOW_ACCESS_ASAAS = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/10091679825563',\n es: '',\n};\n\nconst ASAAS_TAX = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/10091657649947',\n es: '',\n};\n\nconst ASAAS_HELP_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/10091680144283-O-que-%C3%A9-Asaas-',\n es: '',\n};\n\nconst QUESTIONS_ABOUT_ASAAS = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/10091660667163',\n es: '',\n};\n\nconst MORE_CONTENT_ASAAS = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/sections/10091537440667',\n es: '',\n};\n\nconst ASAAS_LOGIN = {\n br: 'https://www.asaas.com/login/',\n es: '',\n};\n\nconst DNS_PROPAGATION = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000451693-O-que-%C3%A9-propaga%C3%A7%C3%A3o-#propaga%C3%A7%C3%A3o',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360024988331',\n};\n\nconst FIND_PLAN_DNS = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115004894674',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360024790012',\n};\n\nconst CLIENT_AREA_FEATURES = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360015388394',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360025090791',\n};\n\nconst CONFIGURE_DOMAIN_DNS = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000497973',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/217236957--C%C3%B3mo-cambiar-el-DNS-',\n};\n\nconst ADD_DOMAIN_TO_HOST = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000389314',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/217618308',\n};\n\nconst CREATE_WORDPRESS_SITE = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115001935813',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/217577968-Softaculous-C%C3%B3mo-instalar-WordPress-',\n};\n\nconst ACCESS_CPANEL = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000181933',\n es: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360021861252--C%C3%B3mo-acceder-al-cPanel-',\n};\n\nconst BLOG = {\n br: 'https://www.hostgator.com.br/blog/',\n es: 'https://www.hostgator.mx/blog/',\n};\n\nconst YOUTUBE = {\n br: 'https://www.youtube.com/HostGatorBRTV',\n es: 'https://www.youtube.com/@HostGatorMexico',\n};\n\nconst HELP_CENTER = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br',\n es: 'https://soporte.hostgator.mx/hc/es-419',\n};\n\n\nconst DO_YOUR_ON_BACKUP_BY_BRAND = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/1260804497929',\n es: '',\n};\n\nexport const DO_YOUR_ON_BACKUP = DO_YOUR_ON_BACKUP_BY_BRAND[isBRServer ? 'br' : 'es'];\n\nexport const GMAIL_CREATE_ACCOUNT = GMAIL_CREATE_ACCOUNT_BY_BRAND[isBRServer ? 'br' : 'es'];\n\nexport const SUPPORT_URL = SUPPORT_URLS_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLES = SUPPORT_ARTICLES_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_ZONEMANAGER_CPANEL = SUPPORT_ARTICLE_ZONEMANAGER_CPANEL_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_ZONEMANAGER_WHM = SUPPORT_ARTICLE_ZONEMANAGER_WHM_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_DNS_THROUGH_WHM = SUPPORT_ARTICLE_DNS_THROUGH_WHM_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const CHAT_SUPPORT_URL = CHAT_SUPPORT_URL_BY_BRAND[isBRServer ? 'br' : 'es'];\n\nexport const EXTERNAL_PLATFORM = EXTERNAL_PLATFORM_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const PERSONAL_DNS = PERSONAL_DNS_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const DEFAULT_SERVER = DEFAULT_SERVER_BY_BRAND[isBRServer ? 'br' : 'es'];\n\nexport const SUPPORT_ARTICLE_DNS_REGISTROBR = SUPPORT_ARTICLE_DNS_REGISTROBR_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_DNS_UOLHOST = SUPPORT_ARTICLE_DNS_UOLHOST_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_DNS_GODADDY = SUPPORT_ARTICLE_DNS_GODADDY_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_DNS_LOCAWEB = SUPPORT_ARTICLE_DNS_LOCAWEB_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_DNS_KINGHOST = SUPPORT_ARTICLE_DNS_KINGHOST_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_DNS_WEBEMPRESA = SUPPORT_ARTICLE_DNS_WEBEMPRESA_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_DNS_COLOMBIAHOSTING = SUPPORT_ARTICLE_DNS_COLOMBIAHOSTING_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_DNS_NEUBOX = SUPPORT_ARTICLE_DNS_NEUBOX_BY_BRAND[isBRServer ? 'br' : 'es'];\n\nexport const SUPPORT_ARTICLE_KNOW_MORE_DNS = SUPPORT_ARTICLE_KNOW_MORE_DNS_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_KNOW_MORE_DNS_POINTER = SUPPORT_ARTICLE_KNOW_MORE_DNS_POINTER_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const RESELLER_PRICE_UPDATE_EXPLANATION = RESELLER_PRICE_UPDATE_EXPLANATION_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const GET_A_NEW_PLAN = GET_A_NEW_PLAN_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const TITAN_FAQ = TITAN_FAQ_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const GET_A_NEW_DOMAIN = GET_A_NEW_DOMAIN_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const GET_ANALYZER_LINK = GET_ANALYZER_LINK_BY_BRAND[isBRServer ? 'br' : 'es'];\n\nexport const SERVICE_TERMS = SERVICE_TERMS_BY_BRAND[isBRServer ? 'br' : 'es'];\n\nexport const SUPPORT_ARTICLE_CHANGE_DNS_REGISTROBR = CHANGE_REGISTROBR_DNS[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_CHANGE_DNS_GODADDY = CHANGE_GODADDY_DNS[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_CHANGE_DNS_LOCAWEB = CHANGE_LOCAWEB_DNS[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_CHANGE_DNS_UOLHOST = CHANGE_UOLHOST_DNS[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_CHANGE_DNS_KINGHOST = CHANGE_KINGHOST_DNS[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_CHANGE_DNS_OTHERS = CHANGE_OTHERS_DNS[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_CHANGE_DNS_WEBEMPRESA = CHANGE_WEBEMPRESA_DNS[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_CHANGE_DNS_COLOMBIAHOSTING = CHANGE_COLOMBIAHOSTING_DNS[isBRServer ? 'br' : 'es'];\nexport const SUPPORT_ARTICLE_CHANGE_DNS_NEUBOX = CHANGE_NEUBOX_DNS[isBRServer ? 'br' : 'es'];\nexport const GODADDY_HOMEPAGE = GODADDY_PAGE[isBRServer ? 'br' : 'es'];\nexport const REGISTROBR_HOMEPAGE = REGISTROBR_PAGE[isBRServer ? 'br' : 'es'];\nexport const LOCAWEB_HOMEPAGE = LOCAWEB_PAGE[isBRServer ? 'br' : 'es'];\nexport const UOLHOST_HOMEPAGE = UOLHOST_PAGE[isBRServer ? 'br' : 'es'];\nexport const KINGHOST_HOMEPAGE = KINGHOST_PAGE[isBRServer ? 'br' : 'es'];\nexport const WEBEMPRESA_HOMEPAGE = WEBEMPRESA_PAGE[isBRServer ? 'br' : 'es'];\nexport const COLOMBIAHOSTING_HOMEPAGE = COLOMBIAHOSTING_PAGE[isBRServer ? 'br' : 'es'];\nexport const NEUBOX_HOMEPAGE = NEUBOX_PAGE[isBRServer ? 'br' : 'es'];\n\nexport const BACKUP_INFO = BACKUP_INFO_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const WOOCOMMERCE_ARTICLE = WOOCOMMERCE_ARTICLE_BY_BRAND[isBRServer ? 'br' : 'es'];\nexport const ASAAS_INTEGRATION_ARTICLE = ASAAS_INTEGRATION[isBRServer ? 'br' : 'es'];\nexport const HOW_ACCESS_ASAAS_ARTICLE = HOW_ACCESS_ASAAS[isBRServer ? 'br' : 'es'];\nexport const FIRST_STEP_ASAAS_ARTICLE = FIRST_STEP_ASAAS[isBRServer ? 'br' : 'es'];\nexport const ASAAS_TAX_ARTICLE = ASAAS_TAX[isBRServer ? 'br' : 'es'];\nexport const QUESTIONS_ABOUT_ASAAS_ARTICLE = QUESTIONS_ABOUT_ASAAS[isBRServer ? 'br' : 'es'];\nexport const MORE_CONTENT_ASAAS_ARTICLE = MORE_CONTENT_ASAAS[isBRServer ? 'br' : 'es'];\nexport const ASAAS_LOGIN_LINK = ASAAS_LOGIN[isBRServer ? 'br' : 'es'];\nexport const ASAAS_HELP = ASAAS_HELP_BY_BRAND[isBRServer ? 'br' : 'es'];\n\nexport const DNS_PROPAGATION_ARTICLE = DNS_PROPAGATION[isBRServer ? 'br' : 'es'];\nexport const FIND_PLAN_DNS_ARTICLE = FIND_PLAN_DNS[isBRServer ? 'br' : 'es'];\nexport const CLIENT_AREA_FEATURES_ARTICLE = CLIENT_AREA_FEATURES[isBRServer ? 'br' : 'es'];\nexport const CONFIGURE_DOMAIN_DNS_ARTICLE = CONFIGURE_DOMAIN_DNS[isBRServer ? 'br' : 'es'];\nexport const ADD_DOMAIN_TO_HOST_ARTICLE = ADD_DOMAIN_TO_HOST[isBRServer ? 'br' : 'es'];\nexport const CREATE_WORDPRESS_SITE_ARTICLE = CREATE_WORDPRESS_SITE[isBRServer ? 'br' : 'es'];\nexport const ACCESS_CPANEL_ARTICLE = ACCESS_CPANEL[isBRServer ? 'br' : 'es'];\n\nexport const BLOG_URL = BLOG[isBRServer ? 'br' : 'es'];\nexport const YOUTUBE_URL = YOUTUBE[isBRServer ? 'br' : 'es'];\nexport const HELP_CENTER_URL = HELP_CENTER[isBRServer ? 'br' : 'es'];\n","export const DOMAIN_STATUS = {\n REGISTERED_DEFAULT: 'registered_default',\n EXPIRING_AUTO_RENEWAL_ENABLED: 'expiring_auto_renewal_enabled',\n EXPIRING_AUTO_RENEWAL_DISABLED: 'expiring_auto_renewal_disabled',\n OVERDUE_AUTO_RENEWAL_DISABLED: 'overdue_auto_renewal_disabled',\n OVERDUE_AUTO_RENEWAL_ENABLED: 'overdue_auto_renewal_enabled',\n EXPIRED_AUTO_RENEWAL_DISABLED: 'expired_auto_renewal_disabled',\n EXPIRED_AUTO_RENEWAL_ENABLED: 'expired_auto_renewal_enabled',\n EXPIRED_GRACE_PERIOD_OVERDUE: 'expired_grace_period_overdue',\n CANCELED_RECOVERABLE: 'canceled_recoverable',\n CANCELED_UNRECOVERABLE: 'canceled_unrecoverable',\n CANCELED_BY_TOS_ABUSE: 'canceled_by_tos_abuse',\n};\n\nexport const INITIAL_VISIBLE_DOMAINS = 5;\n\nexport const INVOICE_TYPE = {\n REGISTRATION: 'registration',\n RENEWAL: 'renewal',\n RECOVERY: 'recovery',\n};\n\nexport const INVOICE_STATUS = {\n CANCELLED: 'Cancelled',\n PAID: 'Paid',\n UNPAID: 'Unpaid',\n};\n\nexport const PROPAGATION_STATUS = {\n FAIL_TO_CHECK: 'fail_to_check',\n IN_PROGRESS: 'in_progress',\n NOT_PROPAGATED: 'not_propagated',\n PROPAGATED: 'propagated',\n NOT_CONTRACTED: 'not_contracted',\n OUT_OF_RANGE: 'out_of_range',\n NOT_CONFIGURED: 'not_configured',\n};\n\nexport const DOMAIN_NOT_CONFIGURED_STEPS = {\n SELECT_DOMAIN: 1,\n SELECT_PROVIDER: 2,\n CONFIGURATION: 3,\n STATUS: 4,\n};\n","import {\n config,\n IS_PROD,\n} from '@/config/index';\n\nimport { pushGaDataForMsw } from '@/utils/storybook/pushGaDataForMsw';\n\nconst { GTM } = config || { GTM: '' };\n\nconst IS_STORYBOOK = process.env.STORYBOOK_IS_SB === '1';\n\nexport function push(data, debug = false) {\n if (IS_PROD) {\n window.dataLayer.push(data);\n }\n\n if (IS_STORYBOOK) {\n pushGaDataForMsw(data);\n }\n // eslint-disable-next-line no-console\n debug && console.table(data);\n}\n\nexport function onLoadSurveyHotjar(label) {\n push({\n event: 'survey',\n product: label,\n });\n}\n\nexport function onLoadHotjar(summary) {\n push({\n event: 'user-id',\n id: summary.id,\n 'sign-up': summary.signUp,\n 'last-login': summary.lastLogin,\n });\n}\n\nexport function loadGoogleTagManagerScripts() {\n if (IS_PROD) {\n const gtmTag = document.createElement('script');\n gtmTag.innerHTML = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','${GTM}')`;\n document.head.appendChild(gtmTag);\n }\n}\n\nexport function onLoadEventTagManager() {\n push({\n event: 'onLoad',\n });\n}\n\nexport function onChangeRouteEventTagManager() {\n push({\n event: 'onRoute',\n });\n}\n\nexport function chipLinkOfProductTagManager(label) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'atalho',\n gaEventAction: 'click',\n gaEventLabel: label,\n });\n}\n\nexport function feedbackScoreTagManager(score) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'feedback',\n gaEventAction: 'conclusao',\n gaEventLabel: score,\n });\n}\n\nexport function actionsAppBarTagManager() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'feedback',\n gaEventAction: 'inicio',\n gaEventLabel: '',\n });\n}\n\nexport function faqTagManager(question) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'faq',\n gaEventAction: 'click',\n gaEventLabel: question,\n });\n}\n\nexport function invoiceCardTagManager() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'faturas',\n gaEventAction: 'mostrar detalhes',\n gaEventLabel: '',\n });\n}\n\nexport function invoiceUnpaidCardTagManager(paymentMethod) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'faturas',\n gaEventAction: 'pagar fatura',\n gaEventLabel: paymentMethod,\n });\n}\n\nexport function outGoingTagManager() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Outgoing link',\n gaEventAction: 'click',\n gaEventLabel: '',\n });\n}\n\nexport function mySitesTagManager() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'meus sites',\n gaEventAction: 'click',\n gaEventLabel: 'gerenciar site',\n });\n}\n\nexport function domainsTagManager() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'dominios',\n gaEventAction: 'click',\n gaEventLabel: 'gerenciar dominio',\n });\n}\n\nexport function emailsTagManager() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'e-mails',\n gaEventAction: 'click',\n gaEventLabel: 'gerenciar e-mail',\n });\n}\n\nexport function emailVerifySkipFlowTagManager() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'e-mail',\n gaEventAction: 'click',\n gaEventLabel: 'fechar_validacao_email',\n });\n}\n\nexport function emailVerifyResendLinkTagManager() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'e-mail',\n gaEventAction: 'click',\n gaEventLabel: 'reenviar_confirmacao_email',\n });\n}\n\nexport function changeEmailTagManager() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'e-mail',\n gaEventAction: 'click',\n gaEventLabel: 'alterar_email',\n });\n}\n\nexport function freePlanNoRegistredTagManager() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'e-mail',\n gaEventAction: 'click',\n gaEventLabel: 'Redirecionado Site HG Pg de Compra de Dominio',\n });\n}\n\nfunction getNamePlan(planId) {\n if (planId === 421) {\n return 'Pedido Gerado Titan Essential';\n } if (planId === 424) {\n return 'Pedido Gerado Titan Premium';\n } if (planId === 198810) {\n return 'Cpanel Webmail';\n }\n return 'Free reativado';\n}\n\nexport function reativateWithHostingPlanTagManager(planId, eventAction) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'e-mail',\n gaEventAction: `Com_host_${eventAction}`,\n gaEventLabel: `${getNamePlan(planId)}`,\n });\n}\n\nexport function reativateWithoutHostingPlanTagManager(planId, eventAction) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'e-mail',\n gaEventAction: `Sem_host_Oferta${eventAction}`,\n gaEventLabel: `${getNamePlan(planId)}`,\n });\n}\n\nexport function offerPlanWithDomainNoRegisteredTagManager() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'e-mail',\n gaEventAction: 'Com_host_Oferta de Planos Titan Pagos/Reativação de Plano Free Domínio Não registrado',\n gaEventLabel: 'Redirecionado Site HG Pg de Compra de Dominio',\n });\n}\n\nexport function cPanelWebmailTagManager(planId) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'e-mail',\n gaEventAction: 'Setup de plataforma de e-mail grátis da hospedagem',\n gaEventLabel: `${getNamePlan(planId)}`,\n });\n}\n\nexport function executeWithParams(event, gaEventCategory, gaEventAction, gaEventLabel) {\n push({\n event: `${event}`,\n gaEventCategory: `${gaEventCategory}`,\n gaEventAction: `${gaEventAction}`,\n gaEventLabel: `${gaEventLabel}`,\n });\n}\n\nexport function executeUniqueEvent(event) {\n push({\n event: `${event}`,\n });\n}\n\nexport function domainWithoutHostingPlanTagManager(planId) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'e-mail',\n gaEventAction: 'click',\n gaEventLabel: `Domain_Without_Plan_${getNamePlan(planId)}`,\n });\n}\n\nexport function phoneNumberVerifySkipFlowTagManager() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'telefone',\n gaEventAction: 'click',\n gaEventLabel: 'fechar_validacao_telefone',\n });\n}\n\nexport function changePhoneNumberTagManager() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'telefone',\n gaEventAction: 'click',\n gaEventLabel: 'alterar_telefone',\n });\n}\n\nexport function phoneNumberSendVerificationCodeTagManager() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'telefone',\n gaEventAction: 'click',\n gaEventLabel: 'enviar_codigo_telefone',\n });\n}\n\nexport function phoneNumberCodeValidTagManager() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'telefone',\n gaEventAction: 'click',\n gaEventLabel: 'validar_codigo_telefone',\n });\n}\n\nexport function zoneManagerDomainChoice(value) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'dropdown_choose_your_domain',\n gaEventAction: 'change_domain',\n gaEventLabel: value,\n });\n}\n\nexport function zoneManagerChangeDns(value) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'name_server',\n gaEventAction: 'save_name_server',\n gaEventLabel: value,\n });\n}\n\nexport function mktPlaceAcquireButton({ name, menu }) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Marketplace',\n gaEventAction: menu ? 'Menu' : 'CTA cards',\n gaEventLabel: menu ? `Page ${name}` : `Button ${name}`,\n });\n}\n\nexport function zendeskChatTag() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'zendesk',\n gaEventAction: 'click_zendesk_chat',\n gaEventLabel: 'Open zendesk chat',\n });\n}\n\nexport function visualizeNFSeTagManager(isJuridicPerson) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'faturas',\n gaEventAction: 'visualizar_nfse',\n gaEventLabel: isJuridicPerson ? 'Juridica' : 'Fisica',\n });\n}\n\nexport function sitelockMenuButton() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Seguranca_portalcliente',\n gaEventAction: 'click',\n gaEventLabel: 'palavra_seguranca_menu',\n });\n}\n\nexport function sitelockProductButtonGerenciar(value) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Seguranca_portalcliente',\n gaEventAction: 'clique_botao_gerenciar',\n gaEventLabel: value,\n });\n}\n\nexport function sitelockButtonBuy() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Seguranca_portalcliente',\n gaEventAction: 'click',\n gaEventLabel: 'botao_compras_sitelock_LP_portal',\n });\n}\n\nexport function codeguardButtonBuy() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Seguranca_portalcliente',\n gaEventAction: 'click',\n gaEventLabel: 'botao_compra_codeguard',\n });\n}\n\nexport function doSweepSitelock(event) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Seguranca_portalcliente',\n gaEventAction: 'click_varredura',\n gaEventLabel: event,\n });\n}\n\nexport function detailsSweepSitelock(event) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Seguranca_portalcliente',\n gaEventAction: 'click_detalhes_varredura',\n gaEventLabel: event,\n });\n}\n\nexport function downloadSweepSitelock(event) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Seguranca_portalcliente',\n gaEventAction: 'click_sitelock_download_seguranca',\n gaEventLabel: event,\n });\n}\n\nexport function menuHgAcademyClick() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Academy_Portal',\n gaEventAction: 'click',\n gaEventLabel: 'click_academy_menu',\n });\n}\n\nexport function menuAsaasClick(label) {\n const cleanLabel = label.toLowerCase().replace(/ /g, '_');\n push({\n event: 'gaEvent',\n gaEventCategory: cleanLabel,\n gaEventAction: 'click',\n gaEventLabel: `click_${cleanLabel}_menu`,\n });\n}\n\nexport function bannerHgAcademyClick() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Academy_Portal',\n gaEventAction: 'click',\n gaEventLabel: 'click_academy_banner',\n });\n}\n\nexport function hgAcademyListLoad() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Academy_Portal',\n gaEventAction: 'pageview',\n gaEventLabel: 'lista_academy_cursos',\n });\n}\n\nexport function watchHgAcademyClick(courseName) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Academy_Portal',\n gaEventAction: 'lista_de_curso',\n gaEventLabel: courseName,\n });\n}\n\nexport function getHgAcademyClick(courseName) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Academy_Portal',\n gaEventAction: 'obter_academy_pass',\n gaEventLabel: courseName,\n });\n}\n\nexport function cancelBuyPayPalByPortalClick() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Academy_Portal',\n gaEventAction: 'click_modal_assinatura',\n gaEventLabel: 'click_cancelar_compra',\n });\n}\n\nexport function cancelBuyCCByPortalClick() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Academy_Portal',\n gaEventAction: 'click_modal_assinatura',\n gaEventLabel: 'click_limpar_dados_cc',\n });\n}\n\nexport function keepWatchingCourseClick(courseName) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Academy_Portal',\n gaEventAction: 'continuar_assistindo',\n gaEventLabel: courseName,\n });\n}\n\n\nexport function watchAgainCourseClick(courseName) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Academy_Portal',\n gaEventAction: 'assistir_novamente',\n gaEventLabel: courseName,\n });\n}\n\nexport function paymentMethodChangeEvent(paymentMethod) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Academy_Portal',\n gaEventAction: 'assinar',\n gaEventLabel: paymentMethod,\n });\n}\n\nexport function subscribeAcademyClick() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Academy_Portal',\n gaEventAction: 'click',\n gaEventLabel: 'click_adquirir_topo',\n });\n}\n\nexport function subscribeAcademyFooterClick() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Academy_Portal',\n gaEventAction: 'click',\n gaEventLabel: 'click_adquirir_rodape',\n });\n}\n\nexport function academyPassVideoPlayClick() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Academy_Portal',\n gaEventAction: 'click',\n gaEventLabel: 'click_video_academy_oferta',\n });\n}\n\nexport function subscribeAcademyPassLpLoad() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Academy_Portal',\n gaEventAction: 'pageview',\n gaEventLabel: 'lp_oferta_academy',\n });\n}\n\nexport function cardCobreFacilClickButton() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Marketplace',\n gaEventAction: 'click',\n gaEventLabel: 'Button Cobrefacil',\n });\n}\n\nexport function cardTraktoClickButton() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Marketplace',\n gaEventAction: 'click',\n gaEventLabel: 'Button Trakto',\n });\n}\n\nexport function cardCreditasClickButton() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Marketplace',\n gaEventAction: 'CTA cards',\n gaEventLabel: 'Button Creditas',\n });\n}\n\nexport function buttonFooterLPSitelock() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Seguranca_portalcliente',\n gaEventAction: 'click',\n gaEventLabel: 'sitelock_compre_agora_LP_bottom',\n });\n}\n\nexport function cobreFacilTopBanner() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Topbanner',\n gaEventAction: 'click',\n gaEventLabel: 'Cobrefácil',\n });\n}\n\nexport function traktoTopBanner() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Topbanner',\n gaEventAction: 'click',\n gaEventLabel: 'Trakto',\n });\n}\n\n\nexport function siteLockCycleType(cycleType) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Seguranca_portalcliente',\n gaEventAction: 'click',\n gaEventLabel: `sitelock_${cycleType}`,\n });\n}\n\nexport function siteLockPaymentMethod(paymentMethod) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Seguranca_portalcliente',\n gaEventAction: 'click',\n gaEventLabel: `sitelock_${paymentMethod}`,\n });\n}\n\nexport function siteLockBuyButton() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Seguranca_portalcliente',\n gaEventAction: 'click',\n gaEventLabel: 'sitelock_compre_agora_LP_topo',\n });\n}\n\nexport function siteLockGetButton() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Seguranca_portalcliente',\n gaEventAction: 'click',\n gaEventLabel: 'sitelock_compre_agora_LP_bottom',\n });\n}\n\nexport function sitelockSelectHostedDomain() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Seguranca_portalcliente',\n gaEventAction: 'click',\n gaEventLabel: 'sitelock_seletor_dominios_LP',\n });\n}\n\nexport function sitelockSelectExternalDomain() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Seguranca_portalcliente',\n gaEventAction: 'click',\n gaEventLabel: 'sitelock_digitar_dominios_LP',\n });\n}\n\nexport function bottomBannerPartnersClick(eventLabel) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Bottombanner',\n gaEventAction: 'click',\n gaEventLabel: eventLabel,\n });\n}\n\nexport function menuMktPlaceVersion(version) {\n let gaVersion = '';\n switch (version) {\n case 'TS_v1':\n gaVersion = 'menuv1';\n break;\n case 'TS_v2':\n gaVersion = 'menuv2';\n break;\n case 'TS_v3':\n gaVersion = 'menuv3';\n break;\n case 'TS_v4':\n gaVersion = 'menuv4';\n break;\n case 'off':\n gaVersion = 'menuv4';\n break;\n default:\n gaVersion = 'menuUnknowVersion';\n }\n\n push({\n event: 'gaEvent',\n gaEventCategory: 'Marketplace',\n gaEventAction: 'click',\n gaEventLabel: gaVersion,\n });\n}\n\nexport function codeguardPaymentMethodLP(paymentMethod) {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Seguranca_portalcliente',\n gaEventAction: 'click',\n gaEventLabel: `codeguard_${paymentMethod}`,\n });\n}\n\nexport function codeguardButtonBuyLP() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Seguranca_portalcliente',\n gaEventAction: 'click',\n gaEventLabel: 'codeguard_compre_agora_LP_topo',\n });\n}\n\nexport function codeGuardButtonFooter() {\n push({\n event: 'gaEvent',\n gaEventCategory: 'Seguranca_portalcliente',\n gaEventAction: 'click',\n gaEventLabel: 'codeguard_compre_agora_LP_bottom',\n });\n}\n\nexport const executeGADomainSelectionActiveTrial = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner trial de Titan - lista de e-mail sem domínios',\n 'Seleção de domínio',\n );\n};\n\nexport const executeGAInitTrial = (quantity = 1) => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner trial de Titan - lista de e-mail sem domínios',\n `Ativar trial - ${quantity} ${quantity > 1 ? 'caixas' : 'caixa'}`,\n );\n};\n\nexport const executeGATermsActiveTrial = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner trial de Titan - lista de e-mail sem domínios',\n 'Termos e Condições',\n );\n};\n\nexport const executeGADisplayKeyPasswordActiveTrial = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner trial de Titan - lista de e-mail sem domínios',\n 'Visualização de senha',\n );\n};\n\nexport const executeGADomainSelectionActiveTrialWithDomain = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner trial de Titan - lista de e-mail com domínios',\n 'Seleção de domínio',\n );\n};\n\nexport const executeGAInitTrialWithDomain = (quantity = 1) => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner trial de Titan - lista de e-mail com domínios',\n `Ativar trial - ${quantity} ${quantity > 1 ? 'caixas' : 'caixa'}`,\n );\n};\n\nexport const executeGATermsActiveTrialWithDomain = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner trial de Titan - lista de e-mail com domínios',\n 'Termos e Condições',\n );\n};\n\nexport const executeGADisplayBannerWithDomains = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner trial de Titan - lista de e-mail com domínios',\n 'Exibição banner menor',\n );\n};\n\nexport const executeGADisplayKeyPasswordActiveTrialWithDomain = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner trial de Titan - lista de e-mail com domínios',\n 'Visualização de senha',\n );\n};\n\nexport const executeGADisplayBannerWithoutDomains = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner trial de Titan - lista de e-mail sem domínios',\n 'Exibição banner maior',\n );\n};\n\nexport const executeGAToastTitanToastDisplay = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Toast - ativação Titan em Meus Sites',\n 'Exibição toast',\n );\n};\n\nexport const executeGAToastCloseToastClick = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Toast - ativação Titan em Meus Sites',\n 'Fechar toast',\n );\n};\n\nexport const executeGAToastTitanDisplayPlans = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Toast - ativação Titan em Meus Sites',\n 'Ver planos disponíveis',\n );\n};\n\nexport const executeGABottomBannerDarkTitanBannerDisplay = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner Dark - ativação Titan em Meus Sites',\n 'Exibição banner dark',\n );\n};\n\nexport const executeGABottomBannerDarkTitanBannerDisplayPlans = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner Light - ativação Titan em Meus Sites',\n 'Ver planos disponíveis',\n );\n};\n\nexport const executeGABottomBannerLightTitanBannerDisplay = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner Light - ativação Titan em Meus Sites',\n 'Exibição banner light',\n );\n};\n\nexport const executeGABottomBannerLightTitanBannerDisplayPlans = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner Light - ativação Titan em Meus Sites',\n 'Ver planos disponíveis',\n );\n};\n\n\nexport const executeGADisplayBannerTrialInSites = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner trial de Titan - Sites',\n 'Exibição banner',\n );\n};\n\n\nexport const sitesHandlerGa = ({\n gaEventAction,\n gaEventLabel,\n}) => {\n push({\n event: 'gaEvent',\n gaEventCategory: 'sites',\n gaEventAction,\n gaEventLabel,\n });\n};\n\nexport const executeGADomainSelectionActiveTrialInSites = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner trial de Titan - Sites',\n 'Selecionar domínio',\n );\n};\n\nexport const executeGATermsActiveTrialInSites = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner trial de Titan - Sites',\n 'Termos e Condições',\n );\n};\n\nexport const executeGADisplayKeyPasswordActiveTrialInSites = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner trial de Titan - Sites',\n 'Visualização da senha',\n );\n};\n\nexport const executeGADisplayKeyPasswordActiveTrialInDomains = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner trial de Titan - aba de Domínios',\n 'Visualização da senha - banner Domínios',\n );\n};\n\nexport const executeGADisplayModalTrialInHirePlan = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Setup de plataforma de e-mail com Trial de Titan',\n 'Exibição modal de trial - Setup de plataforma com Trial',\n );\n};\n\nexport const executeGACloseInModalHirePlan = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Setup de plataforma de e-mail com Trial de Titan',\n 'Fechar modal - Setup de plataforma com Trial',\n );\n};\n\nexport const executeGATermsActiveTrialInModalHirePlan = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Setup de plataforma de e-mail com Trial de Titan',\n 'Termos e Condições - Setup de plataforma com Trial',\n );\n};\n\nexport const executeGADisplayKeyPasswordActiveTrialInModalHirePlan = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Setup de plataforma de e-mail com Trial de Titan',\n 'Visualização da senha modal - Setup de plataforma com Trial',\n );\n};\n\nexport const executeGACheckBoxInModalHirePlan = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Setup de plataforma de e-mail com Trial de Titan',\n 'Check Modal - Setup de plataforma com Trial',\n );\n};\n\nexport const renderEmailPlatformSelectionPageWithTitanTrial = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Setup de plataforma de e-mail com Trial de Titan',\n 'Exibição tela Setup de plataforma com Trial',\n );\n};\n\nexport const hireTitanFreeWithTitanTrial = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Setup de plataforma de e-mail com Trial de Titan',\n 'Titan Free',\n );\n};\n\nexport const hireTitanEssentialsTrialWithTitanTrial = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Setup de plataforma de e-mail com Trial de Titan',\n 'Titan Essentials Trial',\n );\n};\n\nexport const hireTitanPremiumWithTitanTrial = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Setup de plataforma de e-mail com Trial de Titan',\n 'Titan Essentials Trial',\n );\n};\n\nexport const hireTitanCPanelWebmailWithTitanTrial = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Setup de plataforma de e-mail com Trial de Titan',\n 'Cpanel Webmail',\n );\n};\n\nexport const executeGADisplayBannerFromDomains = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner trial de Titan - aba de Domínios',\n 'Exibição banner',\n );\n};\n\nexport const executeGAContractNewPlanInListEmails = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Listagem de e-mail',\n 'Contratar novo plano',\n );\n};\n\nexport const executeGAInitTrialInLocation = (location, quantity = 1) => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n `Modal de ativação de múltiplas caixas de trial - banner em ${location}`,\n `Ativar trial - ${quantity} ${quantity > 1 ? 'caixas' : 'caixa'}`,\n );\n};\n\nexport const executeGAAddMoreTitanBoxes = (location, quantity) => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n `Modal de ativação de múltiplas caixas de trial - ${location}`,\n `Adicionar caixa ${quantity}`,\n );\n};\n\nexport const executeGAExcludeTitanBoxes = (location, quantity) => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n `Modal de ativação de múltiplas caixas de trial - ${location}`,\n `Excluir caixa ${quantity}`,\n );\n};\n\nexport const generateInvoiceTitanPremium = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Setup de plataforma de e-mail com Trial de Titan',\n 'Titan Premium',\n );\n};\n\nexport const executeGAHireTitanTrial = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Setup de plataforma de e-mail com Trial de Titan',\n 'Iniciar trial modal - Setup de plataforma com Trial',\n );\n};\n","export function pushGaDataForMsw(data) {\n const xhr = new XMLHttpRequest();\n xhr.open('POST', '/storybook-ga-tags', true);\n xhr.setRequestHeader('Content-Type', 'application/json');\n xhr.send(JSON.stringify({\n data,\n }));\n}\n","import { collect } from '@/analytics';\n\nconst EVENTS = {\n NAME: 'gaEvent',\n CATEGORIES: {\n CHANGE_PAYMENT_METHOD: 'alterar_pagamento',\n CHANGE_PLAN: 'alterar_plano',\n CANCEL_SUBSCRIPTION: 'cancelar_assinatura',\n EXECUTE_PAYMENT_IN_MANAGE_SUBSCRIPTIONS: 'pague_agora',\n EXECUTE_PAYMENT_IN_MANAGE_INVOICES: 'pagar_fatura',\n MANAGE_SUBSCRIPTIONS: 'portal_cliente_assinaturas',\n CANCEL_RETENTION: 'Retenção_no_fluxo_de_cancelamento',\n EXECUTE_PAYMENT_IN_LIST_SUBSCRIPTIONS: 'pagar_fatura_lista',\n EXECUTE_CREDIT_CARD_FLOW: 'Incentivo_CC_Portal',\n },\n ACTIONS: {\n CLICK: 'click',\n CLICK_FILTRO: 'click_filtro',\n PAGEVIEW: 'pageview',\n FEEDBACK: 'feedback',\n RETENTION: 'Tela_argumentos_de_retenção',\n BENEFIT: 'Tela_oferta_de_desconto',\n BENEFIT_MONTH: 'Tela_oferta_de_desconto_mensal',\n CHANGE_PAYMENT_SUCCESS_CC_REGISTER: 'Modal_Incentivo_CC',\n CHANGE_PAYMENT_SELECT_PRODUCTS: 'Modal_Seleção_Planos',\n },\n DISCOUNT_BANNER: {\n ACTION_LABEL: {\n DISPLAY: ' - Exibir banner de desconto',\n LINK_CLICK: ' - Link Oba quero desconto',\n CLOSE: ' - Botao fechar',\n },\n ORIGINS: {\n SITES: 'Sites',\n SUBSCRIPTION_LIST: 'Lista assinaturas',\n SUBSCRIPTION: 'Gerenciamento de assinatura',\n },\n EVENT_LABELS: {\n DISPLAY: 'Ação: Exibir banner',\n LINK_CLICK: 'Ação: Link Oba quero desconto',\n CLOSE: 'Ação: Fechar banner',\n },\n },\n SAVERS_BANNER: {\n ACTION_LABEL: {\n LINK_CLICK: 'Sites - Savers Banner - Link Pagar fatura com desconto',\n CLOSE: 'Sites - Savers Banner - Botao fechar',\n },\n EVENT_LABELS: {\n LINK_CLICK: 'Ação: Pagar fatura com desconto',\n CLOSE: 'Ação: Fechar banner',\n },\n },\n RENEWAL_MODAL: {\n CATEGORIES: {\n DISPLAY: 'Modal Renovação - Exibir',\n DISPLAY_BY_URL: 'Modal Renovação - Exibir via URL',\n DISPLAY_DISCOUNT_BLOCK: 'Ação: Exibir desconto',\n CLICK_BUTTON: 'Modal Renovação - Confirmar Ativação',\n CLOSE: 'Modal Renovação - Botao fechar',\n },\n EVENT_LABELS: {\n DISPLAY: 'Ação: Exibir modal',\n DISPLAY_BY_URL: 'Ação: Exibir modal via URL',\n DISPLAY_DISCOUNT_BLOCK: 'Ação: Exibir desconto',\n CLICK_BUTTON: 'Ação: Confirmar Ativação',\n CLOSE: 'Ação: Fechar modal',\n },\n },\n ACCEPT_OFFER_SUCCESS_MODAL: {\n CATEGORIES: {\n DISPLAY: 'Modal Oferta Renovação Aceita - Exibir sem rascunho',\n DISPLAY_WITH_DRAFT: 'Modal Oferta Renovação Aceita - Exibir com rascunho',\n CLICK_BUTTON_RENEWAL_AFTER: 'Modal Oferta Renovação Aceita - Renova depois',\n CLICK_BUTTON_RENEWAL_NOW: 'Modal Oferta Renovação Aceita - Renovar agora mesmo',\n CLICK_BUTTON_PAY_NOW: 'Modal Oferta Renovação Aceita - Pagar agora mesmo',\n CLOSE: 'Modal Oferta Renovação Aceita - Botao fechar',\n },\n EVENT_LABELS: {\n DISPLAY: 'Ação: Exibir modal com rascunho',\n DISPLAY_WITH_DRAFT: 'Ação: Exibir modal sem rascunho',\n CLICK_BUTTON_RENEWAL_AFTER: 'Ação: Renova depois',\n CLICK_BUTTON_RENEWAL_NOW: 'Ação: Renovar agora mesmo',\n CLICK_BUTTON_PAY_NOW: 'Ação: Pagar agora mesmo',\n CLOSE: 'Ação: Fechar modal',\n },\n },\n CHANGE_PAYMENT_METHOD_MODAL: {\n SUCCESS_REGISTER_NO_THANKS: 'Não_Obrigado',\n SUCCESS_REGISTER_CHANGE_TO_CC: 'Alterar_para_CC',\n SUCCESS_REGISTER_CLOSE_MODAL: 'Fechar_Modal',\n SELECT_PRODUCTS_CANCEL: 'Cancelar',\n SELECT_PRODUCTS_CHANGE_TO_CC: 'Alterar_Para_CC',\n SELECT_PRODUCTS_CLOSE_MODAL: 'Fechar_Modal',\n },\n};\n\nconst subscriptionsMenuClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.MANAGE_SUBSCRIPTIONS,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: 'clique_acessar_assinaturas',\n});\n\nconst activeRenewalModalClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: `${EVENTS.RENEWAL_MODAL.CATEGORIES.CLICK_BUTTON}`,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: EVENTS.RENEWAL_MODAL.EVENT_LABELS.CLICK_BUTTON,\n});\n\nconst activeRenewalModalDisplay = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: `${EVENTS.RENEWAL_MODAL.CATEGORIES.DISPLAY}`,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: EVENTS.RENEWAL_MODAL.EVENT_LABELS.DISPLAY,\n});\n\nconst activeRenewalModalDisplayByURL = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: `${EVENTS.RENEWAL_MODAL.CATEGORIES.DISPLAY_BY_URL}`,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: EVENTS.RENEWAL_MODAL.EVENT_LABELS.DISPLAY_BY_URL,\n});\n\nconst activeRenewalModalDisplayDiscountBlock = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: `${EVENTS.RENEWAL_MODAL.CATEGORIES.DISPLAY_DISCOUNT_BLOCK}`,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: EVENTS.RENEWAL_MODAL.EVENT_LABELS.DISPLAY_DISCOUNT_BLOCK,\n});\n\nconst activeRenewalModalClose = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: `${EVENTS.RENEWAL_MODAL.CATEGORIES.CLOSE}`,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: EVENTS.RENEWAL_MODAL.EVENT_LABELS.CLOSE,\n});\n\nconst bannerDiscountClick = origin => collect({\n event: EVENTS.NAME,\n gaEventCategory: `${EVENTS.DISCOUNT_BANNER.ORIGINS[origin]}${EVENTS.DISCOUNT_BANNER.ACTION_LABEL.LINK_CLICK}`,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: EVENTS.DISCOUNT_BANNER.EVENT_LABELS.LINK_CLICK,\n});\n\nconst bannerDiscountDisplay = origin => collect({\n event: EVENTS.NAME,\n gaEventCategory: `${EVENTS.DISCOUNT_BANNER.ORIGINS[origin]}${EVENTS.DISCOUNT_BANNER.ACTION_LABEL.DISPLAY}`,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: EVENTS.DISCOUNT_BANNER.EVENT_LABELS.DISPLAY,\n});\n\nconst bannerDiscountClose = origin => collect({\n event: EVENTS.NAME,\n gaEventCategory: `${EVENTS.DISCOUNT_BANNER.ORIGINS[origin]}${EVENTS.DISCOUNT_BANNER.ACTION_LABEL.CLOSE}`,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: EVENTS.DISCOUNT_BANNER.EVENT_LABELS.CLOSE,\n});\n\nconst bannerSaversClose = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.SAVERS_BANNER.ACTION_LABEL.CLOSE,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: EVENTS.SAVERS_BANNER.EVENT_LABELS.CLOSE,\n});\n\nconst bannerSaversClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.SAVERS_BANNER.ACTION_LABEL.LINK_CLICK,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: EVENTS.SAVERS_BANNER.EVENT_LABELS.LINK_CLICK,\n});\n\nconst subscriptionsPageView = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.MANAGE_SUBSCRIPTIONS,\n gaEventAction: EVENTS.ACTIONS.PAGEVIEW,\n gaEventLabel: 'acessar_assinaturas',\n});\n\nconst subscriptionsFilterClick = (filterOptions) => {\n const filtername = filterOptions\n .reduce((filters, filter) => (filter.checked\n ? `${filters},${filter.label.toLowerCase()}`\n : filters), '')\n .replace(/^,/, '');\n\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.MANAGE_SUBSCRIPTIONS,\n gaEventAction: EVENTS.ACTIONS.CLICK_FILTRO,\n gaEventLabel: `clique_filtro_[${filtername}]`,\n });\n};\n\nconst manageSubscriptionClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.MANAGE_SUBSCRIPTIONS,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: 'clique_acessar_gerenciar_assinaturas',\n});\n\nconst cancelRenewalClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.MANAGE_SUBSCRIPTIONS,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: 'clique_acessar_cancelar_renovação',\n});\n\nconst cancelRenewalPageView = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.MANAGE_SUBSCRIPTIONS,\n gaEventAction: EVENTS.ACTIONS.PAGEVIEW,\n gaEventLabel: 'acessar_cancelar_renovação',\n});\n\nconst cancelRenewalReasonFeedback = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.MANAGE_SUBSCRIPTIONS,\n gaEventAction: EVENTS.ACTIONS.FEEDBACK,\n gaEventLabel: 'preencher_campo_motivo',\n});\n\nconst cancelRenewalConfirmationClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.MANAGE_SUBSCRIPTIONS,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: 'clique_confirmar_cancelamento_renovação',\n});\n\nconst activeRenewalClick = (way) => {\n const gaEventLabel = {\n modal: 'desistiu_cancelar_depois_da_pesquisa',\n lista: 'desistiu_cancelar_depois_visualizar_lista',\n resumo_assinaturas: 'desistiu_cancelar_indo_resumo_assinaturas',\n }[way];\n\n return collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.MANAGE_SUBSCRIPTIONS,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel,\n });\n};\n\nconst cancelSubscriptionClick = gaEventLabel => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.CANCEL_SUBSCRIPTION,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel,\n});\n\nconst cancelSubscriptionPageView = gaEventLabel => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.CANCEL_SUBSCRIPTION,\n gaEventAction: EVENTS.ACTIONS.PAGEVIEW,\n gaEventLabel,\n});\n\nconst cancelSubscriptionModalPageView = gaEventLabel => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.MANAGE_SUBSCRIPTIONS,\n gaEventAction: EVENTS.ACTIONS.PAGEVIEW,\n gaEventLabel,\n});\n\nconst changePaymentMethodClick = gaEventLabel => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.CHANGE_PAYMENT_METHOD,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel,\n});\n\nconst executePaymentClick = gaEventLabel => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.EXECUTE_PAYMENT_IN_MANAGE_SUBSCRIPTIONS,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel,\n});\n\nconst executePaymentInSubscriptionsListClick = gaEventLabel => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.EXECUTE_PAYMENT_IN_LIST_SUBSCRIPTIONS,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel,\n});\n\nconst executePaymentInvoiceManagerClick = gaEventLabel => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.EXECUTE_PAYMENT_IN_MANAGE_INVOICES,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel,\n});\n\nconst changePlanClick = gaEventLabel => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.CHANGE_PLAN,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel,\n});\n\nconst retentionAccessEmails = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.CANCEL_RETENTION,\n gaEventAction: EVENTS.ACTIONS.RETENTION,\n gaEventLabel: 'Acessar_meus_e-mails',\n});\n\nconst retentionCancelSignature = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.CANCEL_RETENTION,\n gaEventAction: EVENTS.ACTIONS.RETENTION,\n gaEventLabel: 'Cancelar_assinatura',\n});\n\nconst getBenefitAction = (cycle, isNewPage) => {\n if (isNewPage) {\n return 'Tela_oferta_de_desconto_new';\n }\n return ({\n Monthly: 'Tela_oferta_de_desconto_mensal',\n })[cycle] || 'Tela_oferta_de_desconto';\n};\n\nconst benefitAccept = (retentionCycle, isNewPage = false) => {\n const benefitAcceptLabel = cycle => ({\n Quarterly: 'Aceitar_oferta_de_desconto_trimestral',\n 'Semi-Annually': 'Aceitar_oferta_de_desconto_semestral',\n Annually: 'Aceitar_oferta_de_desconto_anual',\n Biennially: 'Aceitar_oferta_de_desconto_bienal',\n Triennially: 'Aceitar_oferta_de_desconto_trienal',\n })[cycle] || 'Aceitar_oferta_de_desconto';\n\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.CANCEL_RETENTION,\n gaEventAction: getBenefitAction(retentionCycle, isNewPage),\n gaEventLabel: benefitAcceptLabel(retentionCycle),\n });\n};\n\nconst benefitDecline = (retentionCycle, isNewPage = false) => {\n const benefitDeclineLabel = cycle => ({\n Quarterly: 'Cancelar_assinatura_trimestral',\n 'Semi-Annually': 'Cancelar_assinatura_semestral',\n Annually: 'Cancelar_assinatura_anual',\n Biennially: 'Cancelar_assinatura_bienal',\n Triennially: 'Cancelar_assinatura_trienal',\n })[cycle] || 'Cancelar_assinatura';\n\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.CANCEL_RETENTION,\n gaEventAction: getBenefitAction(retentionCycle, isNewPage),\n gaEventLabel: benefitDeclineLabel(retentionCycle),\n });\n};\n\nconst benefitAccess = (retentionCycle) => {\n const benefitAccessAction = cycle => ({\n Monthly: 'Tela_oferta_de_desconto_mensal',\n })[cycle] || 'Tela_oferta_de_desconto';\n\n const benefitAccessLabel = cycle => ({\n Quarterly: 'Page_view_trimestral',\n 'Semi-Annually': 'Page_view_semestral',\n Annually: 'Page_view_anual',\n Biennially: 'Page_view_bienal',\n Triennially: 'Page_view_trienal',\n })[cycle] || 'Page_view';\n\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.CANCEL_RETENTION,\n gaEventAction: benefitAccessAction(retentionCycle),\n gaEventLabel: benefitAccessLabel(retentionCycle),\n });\n};\n\nconst invoicesAlertDisplayed = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Banner portal do cliente faturas',\n gaEventAction: 'Solução - Banner portal do cliente faturas - Alerta faturas apresentado com sucesso',\n gaEventLabel: 'Solução - Banner portal do cliente faturas - Alerta faturas apresentado com sucesso',\n});\n\nconst invoicesAlertClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Banner portal do cliente faturas',\n gaEventAction: 'Solução - Banner portal do cliente faturas - Alerta faturas apresentado com sucesso',\n gaEventLabel: 'Solução - Banner portal do cliente faturas - clique no banner faturas',\n});\n\nconst acceptedOfferSuccessModalPayNowOption = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.ACCEPT_OFFER_SUCCESS_MODAL.CATEGORIES.CLICK_BUTTON_PAY_NOW,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: EVENTS.ACCEPT_OFFER_SUCCESS_MODAL.EVENT_LABELS.CLICK_BUTTON_PAY_NOW,\n});\n\nconst acceptedOfferSuccessModalRenewalNowOption = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.ACCEPT_OFFER_SUCCESS_MODAL.CATEGORIES.CLICK_BUTTON_RENEWAL_NOW,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: EVENTS.ACCEPT_OFFER_SUCCESS_MODAL.EVENT_LABELS.CLICK_BUTTON_RENEWAL_NOW,\n});\n\nconst acceptedOfferSuccessModalRenewalAfterOption = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.ACCEPT_OFFER_SUCCESS_MODAL.CATEGORIES.CLICK_BUTTON_RENEWAL_AFTER,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: EVENTS.ACCEPT_OFFER_SUCCESS_MODAL.EVENT_LABELS.CLICK_BUTTON_RENEWAL_AFTER,\n});\n\nconst acceptedOfferSuccessModalDisplay = ({ hasDraft }) => collect({\n event: EVENTS.NAME,\n gaEventCategory: hasDraft ? EVENTS.ACCEPT_OFFER_SUCCESS_MODAL.CATEGORIES.DISPLAY_WITH_DRAFT : EVENTS.ACCEPT_OFFER_SUCCESS_MODAL.CATEGORIES.DISPLAY,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: EVENTS.ACCEPT_OFFER_SUCCESS_MODAL.EVENT_LABELS.CLOSE,\n});\n\nconst acceptedOfferSuccessModalClose = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.ACCEPT_OFFER_SUCCESS_MODAL.CATEGORIES.CLOSE,\n gaEventAction: EVENTS.ACTIONS.CLICK,\n gaEventLabel: EVENTS.ACCEPT_OFFER_SUCCESS_MODAL.EVENT_LABELS.CLOSE,\n});\n\nconst successCcRegisterCtaNoThanks = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.EXECUTE_CREDIT_CARD_FLOW,\n gaEventAction: EVENTS.ACTIONS.CHANGE_PAYMENT_SUCCESS_CC_REGISTER,\n gaEventLabel: EVENTS.CHANGE_PAYMENT_METHOD_MODAL.SUCCESS_REGISTER_NO_THANKS,\n});\n\nconst successCcRegisterCtaChangeToCc = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.EXECUTE_CREDIT_CARD_FLOW,\n gaEventAction: EVENTS.ACTIONS.CHANGE_PAYMENT_SUCCESS_CC_REGISTER,\n gaEventLabel: EVENTS.CHANGE_PAYMENT_METHOD_MODAL.SUCCESS_REGISTER_CHANGE_TO_CC,\n});\n\nconst successCcRegisterCloseModal = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.EXECUTE_CREDIT_CARD_FLOW,\n gaEventAction: EVENTS.ACTIONS.CHANGE_PAYMENT_SUCCESS_CC_REGISTER,\n gaEventLabel: EVENTS.CHANGE_PAYMENT_METHOD_MODAL.SUCCESS_REGISTER_CLOSE_MODAL,\n});\n\nconst selectProductsCtaChangeToCc = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.EXECUTE_CREDIT_CARD_FLOW,\n gaEventAction: EVENTS.ACTIONS.CHANGE_PAYMENT_SELECT_PRODUCTS,\n gaEventLabel: EVENTS.CHANGE_PAYMENT_METHOD_MODAL.SELECT_PRODUCTS_CHANGE_TO_CC,\n});\n\nconst selectProductsCtaCancel = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.EXECUTE_CREDIT_CARD_FLOW,\n gaEventAction: EVENTS.ACTIONS.CHANGE_PAYMENT_SELECT_PRODUCTS,\n gaEventLabel: EVENTS.CHANGE_PAYMENT_METHOD_MODAL.SELECT_PRODUCTS_CANCEL,\n});\n\nconst selectProductsCloseModal = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.EXECUTE_CREDIT_CARD_FLOW,\n gaEventAction: EVENTS.ACTIONS.CHANGE_PAYMENT_SELECT_PRODUCTS,\n gaEventLabel: EVENTS.CHANGE_PAYMENT_METHOD_MODAL.SELECT_PRODUCTS_CLOSE_MODAL,\n});\n\nconst analytics = {\n subscriptions: {\n activeRenewalModalDisplay,\n activeRenewalModalClick,\n activeRenewalModalClose,\n activeRenewalModalDisplayDiscountBlock,\n activeRenewalModalDisplayByURL,\n bannerDiscountDisplay,\n bannerDiscountClick,\n bannerDiscountClose,\n bannerSaversClick,\n bannerSaversClose,\n subscriptionsMenuClick,\n subscriptionsPageView,\n subscriptionsFilterClick,\n manageSubscriptionClick,\n cancelRenewalClick,\n cancelRenewalPageView,\n cancelRenewalReasonFeedback,\n cancelRenewalConfirmationClick,\n activeRenewalClick,\n cancelSubscriptionClick,\n cancelSubscriptionPageView,\n cancelSubscriptionModalPageView,\n changePaymentMethodClick,\n executePaymentClick,\n executePaymentInSubscriptionsListClick,\n executePaymentInvoiceManagerClick,\n changePlanClick,\n retentionAccessEmails,\n retentionCancelSignature,\n benefitAccept,\n benefitDecline,\n benefitAccess,\n acceptedOfferSuccessModalClose,\n acceptedOfferSuccessModalDisplay,\n acceptedOfferSuccessModalRenewalAfterOption,\n acceptedOfferSuccessModalRenewalNowOption,\n acceptedOfferSuccessModalPayNowOption,\n },\n changePaymentModal: {\n successCcRegisterCtaNoThanks,\n successCcRegisterCtaChangeToCc,\n successCcRegisterCloseModal,\n selectProductsCtaChangeToCc,\n selectProductsCtaCancel,\n selectProductsCloseModal,\n },\n invoicesAlertDisplayed,\n invoicesAlertClick,\n};\n\nexport default analytics;\n","import { collect } from '@/analytics';\n\nconst NEWEVENTS = {\n NAME: 'gaEvent',\n CATEGORY: {\n STEP_1: 'Etapa 1 - Configurações iniciais',\n STEP_2: 'Etapa 2 - Sobre o site',\n STEP_3: 'Etapa 3 - Definir ferramenta de criação',\n STEP_4: 'Etapa 4 - Dicas para começar',\n },\n ACTION: {\n CONFIGURATIONS: {\n SELECTDOMAIN: 'Seleção de domínio para criação do site',\n MODALOTHERDOMAIN: 'Modal: Definição de novo domínio',\n MODALDOMAINREGISTERED: 'Modal: Domínio já registrado',\n MODALNOTDOMAINREGISTERED: 'Modal: Domínio não registrado',\n MODALSITEALREADYREGISTERED: 'Alerta site existente para o domínio - document root desabilitada',\n MODALSITEALREADYREGISTEREDENABLE: 'Alerta site existente para o domínio - document root habilitada',\n MODALUPGRADEPLAN: 'Modal: Escolha de plano para upgrade',\n MODALSELECTPLAN: 'Modal: Escolha do plano para criação do site',\n MODALDNSINPROGRESS: 'Modal: Alteração de DNS automática',\n MODALDNSMANUALFIRSTSTEP: 'Modal: Seleção de provedor para configuração de DNS',\n MODALDNSMANUALSECONDSTEP: 'Modal: Configuração de DNS para provedores externos',\n UPGRADEPLAN: 'Tela: Necessidade de upgrade/compra de plano',\n SELECTPLAN: 'Seleção de plano para criação do site',\n MOVETOSECONDSTEP: 'Avançar para etapa 2 - Sobre o site',\n CONTINUE_TO_OVERWRITE: 'Modal: Site já criado',\n },\n ABOUT: {\n SITETYPE: 'Tipo do site',\n SITEOBJECTIVE: 'Finalidade do site',\n OTHERSITETYPEMODAL: 'Modal: Outro tipo do site',\n OTHERSITEOBJECTIVEMODAL: 'Modal: Outro objetivo do site',\n MOVETOTHIRDSTEP: 'Avançar para etapa 3 - Definir ferramenta de criação',\n },\n TOOLS: {\n CHOOSETOOL: 'Escolha da ferramenta para criação do site',\n WORDPRESSINSTALL: 'Instalação do',\n WORDPRESSINSTALLMODAL: 'Modal de visualização do tema -',\n },\n TIPS: {\n TIPSTOSTART: 'Dicas para começar -',\n },\n },\n};\n\n// NEW GA - STEP CONFIGURATIONS\n\n// ACCESS SITEBUILDER\n\nconst getToolGaName = (tool) => {\n switch (tool) {\n case 'sitebuilder':\n return 'Criador de Sites';\n case 'wordpress':\n return 'WordPress';\n case 'wordpress-woocommerce':\n return 'WordPress + Woocommerce';\n case 'softaculous':\n return 'Outras ferramentas';\n case 'wordpress-woocommerce-trial':\n return 'Oferta E-commerce Plus';\n case 'wordpress-woocommerce-plus':\n return 'E-commerce Plus';\n default: break;\n }\n};\n\nconst getOfferLabel = userSawEcommercePlusOffer => (userSawEcommercePlusOffer ? ' - oferta' : '');\n\nexport const accessFirstStepSiteBuilder = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: 'Acessos a etapa 1 - Configurações iniciais',\n gaEventLabel: 'Total de acessos a etapa 1',\n});\n\n// SELECT DOMAIN\n\nexport const selectListedDomain = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.SELECTDOMAIN,\n gaEventLabel: 'Ação: Seleção de domínio já listado',\n});\n\nexport const selectUnlistedDomain = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.SELECTDOMAIN,\n gaEventLabel: 'Ação: Utilizar domínio não listado',\n});\n\n// OTHER DOMAIN MODAL\n\nexport const otherDomainModalValidateDomain = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALOTHERDOMAIN,\n gaEventLabel: 'Ação: Validação de domínio',\n});\n\nexport const otherDomainModalCloseModal = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALOTHERDOMAIN,\n gaEventLabel: 'Ação: Fechar modal',\n});\n\nexport const otherDomainModalSelectTLD = tld => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALOTHERDOMAIN,\n gaEventLabel: `Ação: ${tld}`,\n});\n\n// REGISTERED DOMAIN MODAL\n\nexport const domainRegisteredModalContinue = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALDOMAINREGISTERED,\n gaEventLabel: 'Ação: Continuar criando site',\n});\n\nexport const domainRegisteredModalCloseModal = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALDOMAINREGISTERED,\n gaEventLabel: 'Ação: Fechar modal',\n});\n\n// NOT REGISTERED DOMAIN MODAL\n\nexport const domainNotRegisteredModalContinue = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALNOTDOMAINREGISTERED,\n gaEventLabel: 'Ação: Continuar criando site',\n});\n\nexport const domainNotRegisteredModalCloseModal = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALNOTDOMAINREGISTERED,\n gaEventLabel: 'Ação: Fechar modal',\n});\n\nexport const domainNotRegisteredModalRegisterDomain = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALNOTDOMAINREGISTERED,\n gaEventLabel: 'Ação: Registrar domínio',\n});\n\n// UPGRADE PLAN MODAL\n\nexport const upgradePlanModalButton = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALUPGRADEPLAN,\n gaEventLabel: 'Ação: Upgrade do plano',\n});\n\nexport const upgradePlanModalCloseModal = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALUPGRADEPLAN,\n gaEventLabel: 'Ação: Fechar modal',\n});\n\nexport const upgradePlanStepBack = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.UPGRADEPLAN,\n gaEventLabel: 'Ação: Voltar',\n});\n\n// SELECT PLAN MODAL\n\nexport const selectOtherPlanModalSelectPlan = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALSELECTPLAN,\n gaEventLabel: 'Ação: Escolher plano',\n});\n\nexport const selectOtherPlanModalCloseModal = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALSELECTPLAN,\n gaEventLabel: 'Ação: Fechar modal',\n});\n\n// DNS AUTOMATIC MODAL\n\nexport const DNSAutomaticModalAccessSupportMaterial = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALDNSINPROGRESS,\n gaEventLabel: 'Ação: Material sobre processo de propagação',\n});\n\nexport const DNSAutomaticModalContinue = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALDNSINPROGRESS,\n gaEventLabel: 'Ação: Continuar criando site',\n});\n\n// MANUAL DNS MODAL STEP 1\n\nexport const DNSManualModalCloseModal = action => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALDNSMANUALFIRSTSTEP,\n gaEventLabel: action === 'back' ? 'Ação: Voltar' : 'Ação: Fechar modal',\n});\n\nexport const DNSManualModalSelectProvider = provider => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALDNSMANUALFIRSTSTEP,\n gaEventLabel: `Ação: Provedor ${provider}`,\n});\n\nexport const DNSManualModalContinue = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALDNSMANUALFIRSTSTEP,\n gaEventLabel: 'Ação: Ver configurações para provedor escolhido',\n});\n\n// MANUAL DNS MODAL STEP 2\n\nexport const DNSManualModalSecondStepBack = action => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALDNSMANUALSECONDSTEP,\n gaEventLabel: action === 'back' ? 'Ação: Voltar' : 'Ação: Fechar modal',\n});\n\nexport const DNSManualModalSecondStepHelp = material => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALDNSMANUALSECONDSTEP,\n gaEventLabel: `Ação: Material central de ajuda - ${material}`,\n});\n\nexport const DNSManualModalSecondStepRedirect = material => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALDNSMANUALSECONDSTEP,\n gaEventLabel: `Ação: Redirecionamento para - ${material}`,\n});\n\nexport const DNSManualModalSecondStepCopy = server => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALDNSMANUALSECONDSTEP,\n gaEventLabel: `Ação: Copiar Servidor ${server} (DNS)`,\n});\n\nexport const DNSManualModalSecondStepContinue = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MODALDNSMANUALSECONDSTEP,\n gaEventLabel: 'Ação: Continuar criando site',\n});\n\n// BACK TO ANOTHER DOMAIN MODAL\n\nexport const backToAnotherDomainModal = (modal) => {\n let action = '';\n switch (modal) {\n case 'domain-registered':\n action = NEWEVENTS.ACTION.CONFIGURATIONS.MODALDOMAINREGISTERED;\n break;\n case 'domain-not-registered':\n action = NEWEVENTS.ACTION.CONFIGURATIONS.MODALNOTDOMAINREGISTERED;\n break;\n case 'upgrade-plan':\n action = NEWEVENTS.ACTION.CONFIGURATIONS.MODALUPGRADEPLAN;\n break;\n default: break;\n }\n return collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: action,\n gaEventLabel: 'Ação: Voltar',\n });\n};\n\n// UPGRADE PLAN\n\nexport const accessUpgradePlanPage = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.UPGRADEPLAN,\n gaEventLabel: 'Total de acessos a tela de upgrade/compra de plano',\n});\n\nexport const upgradePlanButtonClick = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.UPGRADEPLAN,\n gaEventLabel: 'Ação: Upgrade de plano',\n});\n\nexport const upgradePlanBuyNewPlan = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.UPGRADEPLAN,\n gaEventLabel: 'Ação: Comprar novo plano',\n});\n\n// SELECT PLAN\n\nexport const selectOtherPlan = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.SELECTPLAN,\n gaEventLabel: 'Ação: Alterar plano',\n});\n\n// WIZARD GO TO SECOND STEP\n\nexport const continueToSecondStep = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.ACTION.CONFIGURATIONS.MOVETOSECONDSTEP,\n gaEventLabel: 'Ação: Continuar',\n});\n\n// NEW GA - STEP ABOUT\n\n// ACCESS SECOND STEP\n\nexport const accessSecondStepSiteBuilder = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_2,\n gaEventAction: 'Acessos a etapa 2 - Sobre o site',\n gaEventLabel: 'Total de acessos a etapa 2',\n});\n\nexport const moveBackFirstStepSiteBuilder = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_2,\n gaEventAction: 'Voltar para etapa 1 - Configurações iniciais',\n gaEventLabel: '',\n});\n\n// SITE TYPE\n\nexport const chooseSiteType = type => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_2,\n gaEventAction: NEWEVENTS.ACTION.ABOUT.SITETYPE,\n gaEventLabel: type,\n});\n\n// SITE OBJECTIVE\n\nexport const chooseSiteObjective = objective => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_2,\n gaEventAction: NEWEVENTS.ACTION.ABOUT.SITEOBJECTIVE,\n gaEventLabel: objective,\n});\n\n// OTHER SITE TYPE MODAL\n\nexport const otherSiteTypeModalClose = action => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_2,\n gaEventAction: NEWEVENTS.ACTION.ABOUT.OTHERSITETYPEMODAL,\n gaEventLabel: action === 'back' ? 'Ação: Voltar' : 'Ação: Fechar modal',\n});\n\nexport const otherSiteTypeModalSave = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_2,\n gaEventAction: NEWEVENTS.ACTION.ABOUT.OTHERSITETYPEMODAL,\n gaEventLabel: 'Ação: Salvar',\n});\n\n// OTHER SITE OBJECTIVE MODAL\n\nexport const otherSiteObjectiveModalClose = action => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_2,\n gaEventAction: NEWEVENTS.ACTION.ABOUT.OTHERSITEOBJECTIVEMODAL,\n gaEventLabel: action === 'back' ? 'Ação: Voltar' : 'Ação: Fechar modal',\n});\n\nexport const otherSiteObjectiveModalSave = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_2,\n gaEventAction: NEWEVENTS.ACTION.ABOUT.OTHERSITEOBJECTIVEMODAL,\n gaEventLabel: 'Ação: Salvar',\n});\n\n// WIZARD GO TO THIRD STEP\n\nexport const continueToThirdStep = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_2,\n gaEventAction: NEWEVENTS.ACTION.ABOUT.MOVETOTHIRDSTEP,\n gaEventLabel: 'Ação: Continuar',\n});\n\n// NEW GA - STEP TOOLS\n\n// ACCESS THIRD STEP\n\nexport const accessThirdStepSiteBuilder = (type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: 'Acessos a etapa 3 - Definir ferramenta de criação',\n gaEventLabel: 'Total de acessos a etapa 3',\n});\n\nexport const moveBackSecondStepSiteBuilder = (type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: 'Voltar para etapa 2 - Sobre o site',\n gaEventLabel: '',\n});\n\n// CHOOSE TOOL\n\nexport const chooseTool = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: NEWEVENTS.ACTION.TOOLS.CHOOSETOOL,\n gaEventLabel: tool,\n});\n\nexport const accessWoocommerceHelpMaterial = (type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: NEWEVENTS.ACTION.TOOLS.CHOOSETOOL,\n gaEventLabel: 'Acesso ao material sobre Woocommerce',\n});\n\n// WORDPRESS OR WORDPRESS + WOOCOMMERCE INSTALL\n\n// ACCESS WORDPRESS INSTALL\n\nexport const accessWordPressInstall = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: `Total de acessos a instalação do ${getToolGaName(tool)}`,\n});\n\nexport const backWordPressInstall = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: 'Voltar para etapa 3 - Definir ferramenta de criação',\n});\n\n// FILL FORM INPUTS\n\nexport const fillFormInputs = (inputName, tool, type, userSawEcommercePlusOffer) => {\n let label = '';\n switch (inputName) {\n case 'name':\n label = 'Informações úteis: Preenchimento do nome do site';\n break;\n case 'description':\n label = 'Informações úteis: Preenchimento da descrição do site';\n break;\n case 'email':\n label = 'Informações úteis: Preenchimento do e-mail do WordPress';\n break;\n case 'user':\n label = 'Informações úteis: Preenchimento do usuário do WordPress';\n break;\n case 'password':\n label = 'Informações úteis: Preenchimento da senha do WordPress';\n break;\n case 'confirmPassword':\n label = 'Informações úteis: Preenchimento da confirmação da senha do WordPress';\n break;\n default: break;\n }\n return collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: label,\n });\n};\n\n// ACCESS WORDPRESS INSTALL THEME\n\nexport const continueToChooseTheme = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: 'Informações úteis: Avanço para escolha do tema',\n});\n\nexport const backToWordPressConfig = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: 'Voltar para etapa anterior - Informações úteis',\n});\n\n// WORDPRESS INSTALL THEME\n\nexport const chooseTheme = (tool, theme, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: `Escolha do tema: Usar tema ${theme}`,\n});\n\nexport const visualizeTheme = (tool, theme, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: `Escolha do tema: Visualizar tema ${theme}`,\n});\n\n// WORDPRESS THEME MODAL\n\nexport const closeWordPressThemeModal = (tool, theme, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALLMODAL} ${getToolGaName(tool)}`,\n gaEventLabel: `Ação: Fechar modal do tema ${theme}`,\n});\n\nexport const chooseThemeWordPressThemeModal = (tool, theme, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALLMODAL} ${getToolGaName(tool)}`,\n gaEventLabel: `Ação: Usar tema ${theme}`,\n});\n\n// ACCESS WORDPRESS INSTALL PLUGIN\n\nexport const continueToChoosePlugin = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: 'Escolha do tema: Avanço para escolha do plugin',\n});\n\nexport const backToWordPressTheme = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: 'Voltar para etapa anterior - Escolha do tema',\n});\n\n// CHOOSE PLUGIN\n\nexport const choosePlugin = (tool, plugin, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: `Escolha do plugin: ${plugin}`,\n});\n\n// CHOOSE FINISH INSTALL\n\nexport const finishWordPressInstall = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: 'Ação: Finalizar e instalar o WordPress',\n});\n\n// MODAL VERIFIED OVERWRITE SITE\n\nexport const showVerifiedOverwriteSiteModal = sharedDocumentRoot => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: sharedDocumentRoot ? NEWEVENTS.ACTION.CONFIGURATIONS.MODALSITEALREADYREGISTEREDENABLE : NEWEVENTS.ACTION.CONFIGURATIONS.MODALSITEALREADYREGISTERED,\n gaEventLabel: 'Ação: exibição modal',\n});\n\nexport const securityCopyVerifiedOverwriteModal = sharedDocumentRoot => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: sharedDocumentRoot ? NEWEVENTS.ACTION.CONFIGURATIONS.MODALSITEALREADYREGISTEREDENABLE : NEWEVENTS.ACTION.CONFIGURATIONS.MODALSITEALREADYREGISTERED,\n gaEventLabel: 'Ação: Click conteúdo sobre backup',\n});\n\nexport const continueToVerifiedOverwrite = sharedDocumentRoot => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: sharedDocumentRoot ? NEWEVENTS.ACTION.CONFIGURATIONS.MODALSITEALREADYREGISTEREDENABLE : NEWEVENTS.ACTION.CONFIGURATIONS.MODALSITEALREADYREGISTERED,\n gaEventLabel: 'Ação: Continuar criando site',\n});\n\n// MODAL OVERWRITE SITE\n\nexport const continueToOverwrite = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.CONTINUE_TO_OVERWRITE,\n gaEventLabel: 'Ação: Continuar criando site',\n});\n\nexport const closeOverwrite = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.CONTINUE_TO_OVERWRITE,\n gaEventLabel: 'Ação: Fechar modal',\n});\n\nexport const goBackOverwrite = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.CONTINUE_TO_OVERWRITE,\n gaEventLabel: 'Ação: Voltar',\n});\n\nexport const checkboxOverwrite = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.CONTINUE_TO_OVERWRITE,\n gaEventLabel: 'Ação: Checkbox',\n});\n\nexport const materialOverwrite = () => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: NEWEVENTS.CATEGORY.STEP_1,\n gaEventAction: NEWEVENTS.CONTINUE_TO_OVERWRITE,\n gaEventLabel: 'Ação: Material sobre backup',\n});\n\n// NEW GA - STEP TIPS\n\n// ACCESS FOURTH STEP\n\nexport const accessFourthStepSiteBuilder = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_4} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TIPS.TIPSTOSTART} ${getToolGaName(tool)}`,\n gaEventLabel: `Total de acessos a etapa 4 - ${getToolGaName(tool)}`,\n});\n\n// ACCESS TOOL BUTTON\n\nexport const accessBuilderTool = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_4} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TIPS.TIPSTOSTART} ${getToolGaName(tool)}`,\n gaEventLabel: 'Ação: Acessar Criador de Sites',\n});\n\nexport const accessToolWordPress = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_4} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TIPS.TIPSTOSTART} ${getToolGaName(tool)}`,\n gaEventLabel: 'Ação: Acessar WordPress',\n});\n\n// BACK TO SITES BUTTON\n\nexport const goToSites = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_4} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TIPS.TIPSTOSTART} ${getToolGaName(tool)}`,\n gaEventLabel: 'Ação: Ir para tela \"Sites\"',\n});\n\n// ASAAS BANNER\n\nexport const asaasBannerClick = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_4} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TIPS.TIPSTOSTART} ${getToolGaName(tool)}`,\n gaEventLabel: 'Ação: Asaas',\n});\n\n// SHOW MORE MATERIALS\n\nexport const showMoreMaterials = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_4} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TIPS.TIPSTOSTART} ${getToolGaName(tool)}`,\n gaEventLabel: 'Ação: Ver mais materiais da central de ajuda',\n});\n\n// ACCESS MATERIAL\n\nexport const accessMaterial = (tool, number, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_4} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TIPS.TIPSTOSTART} ${getToolGaName(tool)}`,\n gaEventLabel: `Ação: Acessou material ${number}`,\n});\n\n\nexport const nextToAsaasStep = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: 'Escolha do plugin: Avanço para instalação Asaas',\n});\n\nexport const nextToAsaasStepWithWondersuite = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: 'Informações úteis: Avanço para instalação Asaas',\n});\n\nexport const backFromAsaasToPluginStep = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: 'Voltar para etapa anterior - Escolha do plugin',\n});\n\nexport const accessAsaasHelpCenter = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: 'Ação: Central de ajuda',\n});\n\nexport const asaasDontWantAsaas = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: 'Ação: Não quero criar conta agora (instalação WP sem Asaas)',\n});\n\nexport const asaasFormNextToStep2 = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: 'Asaas: avanço para etapa 2 do formulário',\n});\n\nexport const asaasFormNextToStep3 = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: 'Asaas: avanço para etapa 3 do formulário',\n});\n\nexport const asaasAccountCreated = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: 'Asaas: Conta criada',\n});\n\nexport const asaasAlreadyExists = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: 'Asaas: Conta existente',\n});\n\nexport const finishAndInstallWithAsaas = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: 'Ação: Finalizar e instalar WordPress (instalação WP com Asaas)',\n});\n\nexport const remakeAsaasForm = (tool, type, userSawEcommercePlusOffer) => collect({\n event: NEWEVENTS.NAME,\n gaEventCategory: `${NEWEVENTS.CATEGORY.STEP_3} - ${type}${getOfferLabel(userSawEcommercePlusOffer)}`,\n gaEventAction: `${NEWEVENTS.ACTION.TOOLS.WORDPRESSINSTALL} ${getToolGaName(tool)}`,\n gaEventLabel: 'Ação: Refazer cadastro',\n});\n\n\nconst newGa = {\n sitesBuilderConfigurations: {\n accessFirstStepSiteBuilder,\n selectListedDomain,\n selectUnlistedDomain,\n otherDomainModalValidateDomain,\n otherDomainModalCloseModal,\n otherDomainModalSelectTLD,\n domainRegisteredModalContinue,\n domainRegisteredModalCloseModal,\n backToAnotherDomainModal,\n domainNotRegisteredModalContinue,\n domainNotRegisteredModalCloseModal,\n domainNotRegisteredModalRegisterDomain,\n accessUpgradePlanPage,\n upgradePlanButtonClick,\n upgradePlanBuyNewPlan,\n upgradePlanStepBack,\n upgradePlanModalButton,\n upgradePlanModalCloseModal,\n selectOtherPlan,\n selectOtherPlanModalSelectPlan,\n selectOtherPlanModalCloseModal,\n continueToSecondStep,\n DNSAutomaticModalAccessSupportMaterial,\n DNSAutomaticModalContinue,\n DNSManualModalCloseModal,\n DNSManualModalSelectProvider,\n DNSManualModalContinue,\n DNSManualModalSecondStepBack,\n DNSManualModalSecondStepHelp,\n DNSManualModalSecondStepRedirect,\n DNSManualModalSecondStepCopy,\n DNSManualModalSecondStepContinue,\n continueToOverwrite,\n closeOverwrite,\n goBackOverwrite,\n checkboxOverwrite,\n materialOverwrite,\n showVerifiedOverwriteSiteModal,\n securityCopyVerifiedOverwriteModal,\n continueToVerifiedOverwrite,\n },\n sitesBuilderAbout: {\n accessSecondStepSiteBuilder,\n moveBackFirstStepSiteBuilder,\n chooseSiteType,\n otherSiteTypeModalClose,\n otherSiteTypeModalSave,\n otherSiteObjectiveModalClose,\n otherSiteObjectiveModalSave,\n chooseSiteObjective,\n continueToThirdStep,\n },\n sitesBuilderTools: {\n accessThirdStepSiteBuilder,\n moveBackSecondStepSiteBuilder,\n chooseTool,\n accessWoocommerceHelpMaterial,\n accessWordPressInstall,\n backWordPressInstall,\n fillFormInputs,\n continueToChooseTheme,\n continueToChoosePlugin,\n backToWordPressConfig,\n chooseTheme,\n visualizeTheme,\n closeWordPressThemeModal,\n chooseThemeWordPressThemeModal,\n backToWordPressTheme,\n choosePlugin,\n finishWordPressInstall,\n nextToAsaasStep,\n nextToAsaasStepWithWondersuite,\n backFromAsaasToPluginStep,\n accessAsaasHelpCenter,\n asaasDontWantAsaas,\n asaasFormNextToStep2,\n asaasFormNextToStep3,\n asaasAccountCreated,\n asaasAlreadyExists,\n finishAndInstallWithAsaas,\n remakeAsaasForm,\n },\n sitesBuilderTips: {\n accessFourthStepSiteBuilder,\n accessBuilderTool,\n accessToolWordPress,\n goToSites,\n showMoreMaterials,\n accessMaterial,\n asaasBannerClick,\n },\n};\n\nconst analytics = {\n newGa,\n};\n\nexport default analytics;\n","export const ALERT_TYPES = {\n INVOICES: 'invoices',\n DOMAIN_NOT_CONTRACTED: 'domain_not_contracted',\n DOMAIN_NOT_PROPAGATED: 'domain_not_propagated',\n DOMAIN_NOT_CONFIGURED: 'domain_not_configured',\n DOMAIN_FOR_POINTING: 'domains_for_pointing',\n DOMAIN_IN_PROGRESS: 'domain_in_progress',\n SUSBCRIPTION_OVERDUE: 'subscriptions_overdue',\n REFUND: 'refund',\n TOS: 'tos',\n TICKET_OPEN: 'ticket_open',\n TICKET_NEW: 'ticket_new',\n TICKET_PENDING: 'ticket_pending',\n TICKET_SOLVED: 'ticket_solved',\n BACKUP: 'backup',\n DUPLICATE_ORDERS: 'duplicate_orders',\n PENDING_ORDER: 'pending_order',\n SSL: 'ssl_status',\n CLOUDFLARE_FEATURE: 'cloudflare_feature',\n CLOUDFLARE_DELAYED: 'cloudflare_delayed',\n ALERT_CREDIT_REFUND: 'alert_credit_refund',\n};\n\nexport const BACKUP_STATUS = {\n RESTORED: 'restoration',\n REQUESTED: 'request',\n};\n\nexport const BACKUP_GA = {\n SUCCESS: 'backup-success',\n WITHOUT: 'backup-without',\n SEVEN_DAYS: 'backup-7daysOrMore',\n FIFTEEN_DAYS: 'backup-15daysOrMore',\n THIRTY_DAYS: 'backup-30daysOrMore',\n};\n\nexport const SSL_STATUS = {\n ACTIVE: 'active',\n ACTIVATION_FAILED: 'activation_failed',\n IN_PROGRESS: 'in_progress',\n VIEW_PENDING: 'view_pending',\n AUTO_SSL: 'auto_ssl',\n};\n\nexport const SSL_GA = {\n ACTIVE: 'ssl_active',\n ACTIVATION_FAILED: 'ssl_activation_failed',\n IN_PROGRESS: 'ssl_in_progress',\n AUTO_SSL: 'auto_ssl',\n VIEW_PENDING: 'view_pending',\n REGISTER_DOMAIN: 'register_domain',\n ACTIVATION_ERROR: 'activation_error',\n MODAL_TO_OTHER: 'modal_to_other',\n};\n\nexport const PENDING_ORDER_GA = {\n CANCELLED: 'cancelled',\n PENDING_ANALYSIS: 'pending_analysis',\n};\n\nexport const ANALYSIS_STATUS = {\n PENDING_PAYMENT: 'pending_payment',\n PENDING_ANALYSIS: 'pending_analysis',\n CANCELLED: 'cancelled',\n};\n\nexport default ALERT_TYPES;\n","export const STATUS_TYPE = {\n SUSPENDED: 'isSuspended',\n OVERDUE: 'isOverDue',\n TODUE: 'isToDue',\n ANALYSIS: 'isInAnalysis',\n PENDING: 'isPending',\n ACTIVE: 'active',\n};\n\nexport const PROPAGATION_STATUS_TYPE = {\n EXTERNAL_NOT_CONFIGURED: 'isExternalNotConfigured',\n INTERNAL_NOT_CONFIGURED: 'isInternalNotConfigured',\n IN_PROPAGATION: 'isInPropagation',\n PROPAGATED: 'isPropagated',\n};\n\nexport const SSL_STATUS = {\n NOT_ACTIVE: 'NOT_ACTIVE',\n ACTIVE: 'ACTIVE',\n IN_PROGRESS: 'IN_PROGRESS',\n ACTIVATION_FAILED: 'ACTIVATION_FAILED',\n};\n\nexport const SITELOCK_STATUS = {\n NOT_ACTIVE: 'not_active',\n ACTIVE: 'active',\n};\n\nexport const AUTO_SSL_STATUS = {\n START_SUCCESS: 'START_SUCCESS',\n START_FAILURE: 'START_FAILURE',\n PROGRESS_FAILURE: 'PROGRESS_FAILURE',\n CHECK_SUCCESS: 'CHECK_SUCCESS',\n CHECK_FAILURE: 'CHECK_FAILURE',\n REGISTERED: 'registered',\n NOT_REGISTERED: 'not_registered',\n CAN_INSTALL_SSL: 'can_install_ssl',\n EXTERNAL_NS: 'external_ns',\n CAN_CHANGE_A_RECORD: 'can_change_a_record',\n};\n\nexport const STATUS_ALERTS_VARIANTS = {\n financial: {\n [STATUS_TYPE.PENDING]: 'timed',\n [STATUS_TYPE.ANALYSIS]: 'timed',\n [STATUS_TYPE.TODUE]: 'warning',\n [STATUS_TYPE.OVERDUE]: 'error',\n [STATUS_TYPE.SUSPENDED]: 'error',\n },\n propagation: {\n [PROPAGATION_STATUS_TYPE.EXTERNAL_NOT_CONFIGURED]: 'warning',\n [PROPAGATION_STATUS_TYPE.INTERNAL_NOT_CONFIGURED]: 'warning',\n [PROPAGATION_STATUS_TYPE.IN_PROPAGATION]: 'timed',\n [PROPAGATION_STATUS_TYPE.PROPAGATED]: 'success',\n },\n ssl: {\n [SSL_STATUS.ACTIVATION_FAILED]: 'error',\n [SSL_STATUS.ACTIVE]: 'success',\n [SSL_STATUS.IN_PROGRESS]: 'timed',\n [SSL_STATUS.NOT_ACTIVE]: 'warning',\n },\n sitelock: {\n [SITELOCK_STATUS.ACTIVE]: 'success',\n [SITELOCK_STATUS.NOT_ACTIVE]: 'info',\n },\n};\n","export const MODAL_TYPE = {\n PLANCANCELED: 'plan',\n DOMAINCANCELED: 'domain',\n ECOMMERCEPLUS: 'ecommercePlus',\n NEWSITE: 'newSite',\n SPECIALIST: 'specialist',\n};\n","export const modalCloseAction = {\n createSite: 'createSite',\n createWithSpecialist: 'createWithSpecialist',\n close: 'close',\n understand: 'understand',\n};\n\nexport const steps = {\n finishStep: '99',\n};\n\nexport const checklistProgressStatus = {\n noStarted: 0,\n completed: 4,\n};\n","import { collect } from '@/analytics';\nimport { SSL_GA, SSL_STATUS } from '@/components/Layout/Menu/MyAlerts/MyAlerts.types';\nimport { STATUS_TYPE } from '@/enums/sites/status.enum';\nimport { MODAL_TYPE } from '@/hooks/sites/sitesList/useMountNotificationModal/useMountNotificationModal.enum';\nimport { modalCloseAction } from '@/pages/sites/SitesHandler/SitesHandler.enum';\n\nconst EVENTS = {\n NAME: 'gaEvent',\n CATEGORY: {\n MODALCANCELDOMAIN: 'Modal cancelamento domínio',\n MODALCANCELPLAN: 'Modal cancelamento plano',\n MODALCREATESITE: 'Modal novo site',\n BANNERNEWSITE: 'Banner novo site',\n ASAASBANNER: 'Sites Banner Asaas',\n TAG_SSL: 'Tag SSL',\n MODALECOMMERCEPLUS: 'Criar Site',\n WELCOMECHECK_LIST_BANNER: 'Sites - WelcomeChecklist Banner',\n },\n ACTION: {\n UNDERSTAND: 'Entendido',\n CLOSE: 'Fechar modal',\n MODAL_ECOMMERCE_PLUS_CLOSE: 'Modal Fechado',\n MODAL_ECOMMERCE_PLUS_SHOW: 'Modal exibido',\n MODAL_ECOMMERCE_PLUS_CONTINUE: 'Clique em criar loja online',\n CREATE: 'Criar site',\n CREATE_SPECIALIST: 'Criar site com especialista',\n KNOWMORE: 'Saber mais',\n VIEW_SSL_IN_PROGRESS: 'Visualização SSL em processo de ativação',\n SSL_CLICK_AUTO: 'SSL em processo de ativação - clique no Auto SSL',\n VIEW_SSL_FAILED: 'Visualização Pendência SSL',\n SSL_FAILED_CLICK: 'Pendência SSL - Clique Auto SSL',\n VIW_SSL_ACTIVE: 'Visualização SSL Ativo',\n VIEW_MODAL_SSL_REGISTER_DOMAIN: 'Visualização - Modal Registrar domínio',\n VIEW_ACTIVATION_ERROR: 'Visualização - Modal Erro na ativação (Auto SSL liberado)',\n ACTIVATION_ERROR_CLICK: 'Modal Erro na ativação (Clique no Auto SSL)',\n VIEW_SSL_MODAL_TO_OTHER: 'Visualização - Modal domínio não configurado para a HostGator',\n SSL_MODAL_TO_OTHER_CLICK: 'Clique- Modal domínio não configurado para a HostGator',\n },\n LABEL: {\n MODAL_ECOMMERCE_PLUS: 'Modal de Criar Loja na seção /Site',\n },\n};\n\nconst modalWarningClick = (modalWarningType, action) => {\n let categoryGa = '';\n let actionGa = '';\n const isEcommercePlusModal = modalWarningType === MODAL_TYPE.ECOMMERCEPLUS;\n switch (modalWarningType) {\n case MODAL_TYPE.PLANCANCELED:\n categoryGa = EVENTS.CATEGORY.MODALCANCELPLAN;\n break;\n case MODAL_TYPE.DOMAINCANCELED:\n categoryGa = EVENTS.CATEGORY.MODALCANCELDOMAIN;\n break;\n case MODAL_TYPE.NEWSITE:\n categoryGa = EVENTS.CATEGORY.MODALCREATESITE;\n break;\n case MODAL_TYPE.ECOMMERCEPLUS:\n categoryGa = EVENTS.CATEGORY.MODALECOMMERCEPLUS;\n break;\n default:\n break;\n }\n switch (action) {\n case modalCloseAction.understand:\n actionGa = EVENTS.ACTION.UNDERSTAND;\n break;\n case modalCloseAction.close:\n actionGa = !isEcommercePlusModal ? EVENTS.ACTION.CLOSE : EVENTS.ACTION.MODAL_ECOMMERCE_PLUS_CLOSE;\n break;\n case modalCloseAction.createSite:\n actionGa = !isEcommercePlusModal ? EVENTS.ACTION.CREATE : EVENTS.ACTION.MODAL_ECOMMERCE_PLUS_CONTINUE;\n break;\n default:\n break;\n }\n\n if (categoryGa) {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: categoryGa,\n gaEventAction: actionGa,\n gaEventLabel: !isEcommercePlusModal ? '' : EVENTS.LABEL.MODAL_ECOMMERCE_PLUS,\n });\n }\n};\n\nconst handlePay = (status) => {\n let label = '';\n switch (status) {\n case STATUS_TYPE.TODUE:\n label = 'A vencer';\n break;\n case STATUS_TYPE.OVERDUE:\n label = 'Vencido';\n break;\n case STATUS_TYPE.SUSPENDED:\n label = 'Suspenso';\n break;\n default:\n case STATUS_TYPE.PENDING:\n label = 'Pendente';\n break;\n }\n\n collect({\n gaEventAction: 'Pagar fatura',\n gaEventLabel: label,\n });\n};\n\nconst createNewSiteClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.BANNERNEWSITE,\n gaEventAction: EVENTS.ACTION.CREATE,\n gaEventLabel: '',\n});\n\nconst asaasShowMore = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.ASAASBANNER,\n gaEventAction: EVENTS.ACTION.KNOWMORE,\n gaEventLabel: '',\n});\n\nconst sslTags = ({ status, clicked }) => {\n let action;\n let label;\n\n if (clicked) {\n if (clicked.toLocaleLowerCase() === SSL_STATUS.AUTO_SSL.toLocaleLowerCase()) {\n action = EVENTS.ACTION.SSL_CLICK_AUTO;\n label = 'SSL em processo de ativação - Clique no Auto SSL';\n }\n if (clicked.toLocaleLowerCase() === SSL_STATUS.VIEW_PENDING.toLocaleLowerCase()) {\n action = EVENTS.ACTION.SSL_FAILED_CLICK;\n label = 'Pendência SSL Clique Auto SSL';\n }\n }\n\n if (!clicked) {\n if (status.toLocaleLowerCase() === SSL_STATUS.IN_PROGRESS.toLocaleLowerCase()) {\n action = EVENTS.ACTION.VIEW_SSL_IN_PROGRESS;\n label = 'Visualização SSL em processo de ativação';\n }\n\n if (status.toLocaleLowerCase() === SSL_STATUS.ACTIVATION_FAILED.toLocaleLowerCase()) {\n action = EVENTS.ACTION.VIEW_SSL_FAILED;\n label = 'Visualização Pendência SSL';\n }\n\n if (status.toLocaleLowerCase() === SSL_STATUS.ACTIVE.toLocaleLowerCase()) {\n action = EVENTS.ACTION.VIW_SSL_ACTIVE;\n label = 'Visualização SSL Ativo';\n }\n }\n\n return collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.TAG_SSL,\n gaEventAction: action,\n gaEventLabel: label,\n });\n};\n\nconst sslModal = ({ view, click }) => {\n let action;\n let label;\n\n if (click) {\n if (click === SSL_GA.REGISTER_DOMAIN) {\n action = EVENTS.ACTION.VIEW_MODAL_SSL_REGISTER_DOMAIN;\n label = 'Clique - Registrar domínio';\n }\n if (click === SSL_GA.ACTIVATION_ERROR) {\n action = EVENTS.ACTION.ACTIVATION_ERROR_CLICK;\n label = 'Clique - Modal Erro na ativação';\n }\n if (click === SSL_GA.MODAL_TO_OTHER) {\n action = EVENTS.ACTION.SSL_MODAL_TO_OTHER_CLICK;\n label = 'Clique - Modal domínio não configurado para a HostGator';\n }\n }\n\n if (!click) {\n if (view === SSL_GA.REGISTER_DOMAIN) {\n action = EVENTS.ACTION.VIEW_MODAL_SSL_REGISTER_DOMAIN;\n label = 'Visualização - Modal Registrar domínio';\n }\n if (view === SSL_GA.ACTIVATION_ERROR) {\n action = EVENTS.ACTION.VIEW_ACTIVATION_ERROR;\n label = 'Visualização - Modal Erro na ativação (Auto SSL liberado)';\n }\n if (view === SSL_GA.MODAL_TO_OTHER) {\n action = EVENTS.ACTION.VIEW_SSL_MODAL_TO_OTHER;\n label = 'Visualização - Modal domínio não configurado para a HostGator';\n }\n }\n\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.TAG_SSL,\n gaEventAction: action,\n gaEventLabel: label,\n });\n};\n\nconst ecommercePlusModalOpen = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.MODALECOMMERCEPLUS,\n gaEventAction: EVENTS.ACTION.MODAL_ECOMMERCE_PLUS_SHOW,\n gaEventLabel: EVENTS.LABEL.MODAL_ECOMMERCE_PLUS,\n});\n\nconst welcomeChecklistBanner = (action, label) => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.WELCOMECHECK_LIST_BANNER,\n gaEventAction: action,\n gaEventLabel: label,\n });\n};\n\nconst checkStep1 = () => welcomeChecklistBanner('Check - Passo dominio-dn', 'Ação: Checar passo dominio-dns');\nconst checkStep2 = () => welcomeChecklistBanner('Check - Passo criar e-mail', 'Ação: Checar passo criar e-mail');\nconst checkStep3 = () => welcomeChecklistBanner('Check - Passo site profissional', 'Ação: Checar passo site profissional');\nconst clickCreateEmail = () => welcomeChecklistBanner('Click - Criar conta de e-mail', 'Ação: Abrir criador de e-mail');\nconst clickCreateStore = () => welcomeChecklistBanner('Click - Criar site ou Loja Virtual', 'Ação: Abrir criador de site');\nconst clickVerifyDNS = () => welcomeChecklistBanner('Click - Verificar configuração DNS', 'Ação: Abrir configuração de DNS');\nconst clickConfigHostgatorDomain = () => welcomeChecklistBanner('click - Configurar dominio Hostgator', 'Ação: Abrir configuração dominio hostgator');\nconst clickConfigExternalDomain = () => welcomeChecklistBanner('Click - Configurar dominio externo', 'Ação: Abrir configuração dominio externo');\nconst clickEmailConfig = () => welcomeChecklistBanner('Click - Como configurar o e-mail', 'Ação: Abri configuração de email');\nconst clickWordpress = () => welcomeChecklistBanner('Click - Como criar um site no WordPress', 'Ação: Abrir como criar site no wordpress');\nconst clickVerifySSL = () => welcomeChecklistBanner('Click - Verificar (SSL)', 'Ação: Abrir link certificado de segurança');\nconst clickLinkLadingPage = () => welcomeChecklistBanner('Click - Dicas para uma Landing Page', 'Ação: Abrir link dicas landing page');\nconst noShowBanner = () => welcomeChecklistBanner('Click - Não quero ver este painel', 'Ação: Fechar banner');\nconst hideChecklist = () => welcomeChecklistBanner('Click - Ocultar checklist', 'Ação: Ocultar checklist');\nconst showChecklist = () => welcomeChecklistBanner('Click - Mostra checklist', 'Ação: Mostrar checklist');\nconst showWelcomeCheckListBanner = () => welcomeChecklistBanner('Visualização - Banner', 'Ação: Exibir banner');\n\nconst analytics = {\n sitesWarningModal: {\n modalWarningClick,\n },\n sitesPaymentWarnings: {\n handlePay,\n },\n bannerNewSite: {\n createNewSiteClick,\n },\n asaasBanner: {\n asaasShowMore,\n },\n ssl: {\n sslTags,\n sslModal,\n },\n ecommercePlusModal: {\n ecommercePlusModalOpen,\n },\n welcomeChecklistBanner: {\n checkStep1,\n checkStep2,\n checkStep3,\n clickCreateEmail,\n clickCreateStore,\n clickVerifyDNS,\n clickConfigHostgatorDomain,\n clickConfigExternalDomain,\n clickEmailConfig,\n clickWordpress,\n clickVerifySSL,\n clickLinkLadingPage,\n noShowBanner,\n hideChecklist,\n showChecklist,\n showWelcomeCheckListBanner,\n },\n};\n\nexport default analytics;\n","import { collect } from '@/analytics';\n\nconst EVENTS = {\n NAME: 'gaEvent',\n CATEGORY: 'Pesquisa em Sites',\n};\n\nconst surveyStart = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: 'Iniciar pesquisa',\n gaEventLabel: '',\n});\n\nconst surveyClose = (step) => {\n let eventAction = '';\n switch (step) {\n case 'start':\n eventAction = 'Botão \"X\" (início)';\n break;\n case 'end':\n eventAction = 'Botão \"X\" (final)';\n break;\n default:\n eventAction = `Botão \"X\" (pergunta ${step})`;\n break;\n }\n\n return collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: eventAction,\n gaEventLabel: '',\n });\n};\n\nconst surveyFinish = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: 'Botão \"Fechar\"',\n gaEventLabel: '',\n});\n\nconst surveyQuestionSend = question => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: `Enviar (pergunta ${question})`,\n gaEventLabel: '',\n});\n\nconst surveyQuestionJump = question => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: `Pular (pergunta ${question})`,\n gaEventLabel: '',\n});\n\nconst analytics = {\n surveyStart,\n surveyClose,\n surveyQuestionSend,\n surveyQuestionJump,\n surveyFinish,\n};\n\nexport default analytics;\n","import { collect } from '@/analytics';\n\nconst EVENT = {\n NAME: 'gaEvent',\n CATEGORY: {\n BACKUP_BUTTON: 'Solução - Portal do Cliente fluxo de backup - Botão Fazer Backup',\n MODAL_CPANEL_BACKUP_BUTTON: 'Solução - Portal do Cliente fluxo de backup - Exibição da modal',\n GENERAL_VISION: 'Solução - Portal do Cliente fluxo de backup - Clique na visão geral',\n ACCORDION_FAQ: 'Solução - Portal do Cliente fluxo de backup - duvidas e respostas',\n BACKUP_TAB: 'Solução - Portal do Cliente fluxo de backup - Exibição aba fazer backup',\n BACKUP_GENERATION_TAB: 'Solução - Portal do Cliente fluxo de backup - Aba fazer backup',\n RESTORE_TAB: 'Solução - Portal do Cliente fluxo de backup - Exibição aba restaurar backup',\n RESTORE: 'Solução - Portal do Cliente fluxo de backup - Fazer upload',\n LOG_TAB: 'Solução - Portal do Cliente fluxo de backup - Exibição aba últimos backups',\n CPANEL_TAB: 'Solução - Portal do Cliente fluxo de backup - Clique na aba backup pelo cpanel',\n BACKUP_BUTTON_PRODUCT_LIST: 'Solução - Portal do Cliente fluxo de backup - Botão Backup',\n INITIAL_BUTTON: 'Botão Inicial',\n RESTORATION_FLOW: 'Fluxo de Restauração',\n GENERATE_FLOW: 'Fluxo gerar um backup',\n },\n ACTION: {\n BACKUP_BUTTON_CLICK: 'Solução - Clique no botão - Clique no botão Fazer backup',\n MODAL_SHOW: 'Solução - Exibição da modal - Exibição da modal fazer backup',\n GENERAL_VISION: 'Solução - Visão geral de backup - Exibição da visão geral',\n ACCORDION_HOW_TO_DO: 'Solução - duvidas e respostas - Clique no acordeão como fazer um backup',\n ACCORDION_HOW_TO_RESTORE: 'Solução - duvidas e respostas - Clique no acordeão como restaurar um backup',\n ACCORDION_UPDATED_BACKUP: 'Solução - duvidas e respostas - Clique no acordeão por que é importante manter meu backup atualizado',\n ACCORDION_MAX_SIZE: 'Solução - duvidas e respostas - Clique no acordeão qual tamanho máximo do meu armazenamento',\n ACCORDION_BACKUP_TYPES: 'Solução - duvidas e respostas - Clique no acordeão quais são os tipos de backups',\n BACKUP_TAB: 'Solução - fazer backup - Clique na aba fazer backup',\n BACKUP_BUTTON_ON_TAB_BACKUP: 'Solução - Aba fazer backup - Clique no botão fazer backup',\n BACKUP_GENERATION_SUCCESS: 'Solução - Aba fazer backup - Feedback backup gerado exibido em tela',\n BACKUP_GENERATION_ERROR: 'Solução - Aba fazer backup - Feedback erro ao fazer backup exibido em tela',\n RESTORE_TAB: 'Solução - restaurar backup - Clique na aba restaurar backup',\n RESTORE: 'Solução - Fazer upload - Clique no cta fazer upload',\n LOG_TAB: 'Solução - últimos backups - Clique na aba últimos backups',\n CPANEL_TAB: 'Solução - backup pelo cpanel - Clique na aba backup pelo cpanel',\n BACKUP_BUTTON_PRODUCT_LIST: 'Solução - Clique no botão - Clique no botão backup',\n BACKUP_ASSIST_FIRST_STEPS: 'Assistente de Backup, Primeiros Passos',\n FIRST_STEPS: 'Primeiros Passos',\n CTA_ASK_RESTORATION: 'CTA Solicitar restauração',\n CTA_CONTINUE: 'CTA Continuar',\n CTA_BACKUP_BY_CPANEL: 'CTA Fazer backup via cpanel',\n CTA_GENERATE_BACKUP: 'CTA Fazer backup',\n },\n};\n\nconst generateBackup = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.INITIAL_BUTTON,\n gaEventAction: EVENT.ACTION.BACKUP_ASSIST_FIRST_STEPS,\n gaEventLabel: 'Gerar um Backup',\n});\n\nconst restoreBackup = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.INITIAL_BUTTON,\n gaEventAction: EVENT.ACTION.BACKUP_ASSIST_FIRST_STEPS,\n gaEventLabel: 'Restaurar um Backup',\n});\n\nconst haveFileClick = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.RESTORATION_FLOW,\n gaEventAction: EVENT.ACTION.FIRST_STEPS,\n gaEventLabel: 'Botão: Sim, tenho o arquivo',\n});\n\nconst hgFileClick = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.RESTORATION_FLOW,\n gaEventAction: EVENT.ACTION.FIRST_STEPS,\n gaEventLabel: 'Botão: Não, quero usar um arquivo da Hostgator',\n});\n\nconst fullHgFileBackupClick = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.RESTORATION_FLOW,\n gaEventAction: EVENT.ACTION.CTA_ASK_RESTORATION,\n gaEventLabel: 'Backup completo - Cliente quer usar arquivo Hostgator',\n});\n\nconst rootHgFileBackupClick = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.RESTORATION_FLOW,\n gaEventAction: EVENT.ACTION.CTA_ASK_RESTORATION,\n gaEventLabel: 'Backup do diretório inicial - Cliente quer usar arquivo Hostgator',\n});\n\nconst databaseHgFileBackupClick = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.RESTORATION_FLOW,\n gaEventAction: EVENT.ACTION.CTA_ASK_RESTORATION,\n gaEventLabel: 'Backup do Banco de dados - Cliente quer usar arquivo Hostgator',\n});\n\nconst fullCustomerFileBackupClick = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.RESTORATION_FLOW,\n gaEventAction: EVENT.ACTION.CTA_ASK_RESTORATION,\n gaEventLabel: 'Backup completo - Sim tenho o arquivo',\n});\n\nconst rootCustomerFileBackupClick = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.RESTORATION_FLOW,\n gaEventAction: EVENT.ACTION.CTA_CONTINUE,\n gaEventLabel: 'Backup do diretório inicial - Sim tenho o arquivo',\n});\n\nconst databaseCustomerFileBackupClick = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.RESTORATION_FLOW,\n gaEventAction: EVENT.ACTION.CTA_CONTINUE,\n gaEventLabel: 'Backup do Banco de dados - Sim tenho o arquivo',\n});\n\nconst generateCompleteBackupClick = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.GENERATE_FLOW,\n gaEventAction: EVENT.ACTION.CTA_BACKUP_BY_CPANEL,\n gaEventLabel: 'Gerar um backup completo',\n});\n\nconst generateRootBackupClick = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.GENERATE_FLOW,\n gaEventAction: EVENT.ACTION.CTA_GENERATE_BACKUP,\n gaEventLabel: 'Gerar um backup do diretório inicial',\n});\n\nconst generateDatabaseBackupClick = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.GENERATE_FLOW,\n gaEventAction: EVENT.ACTION.CTA_BACKUP_BY_CPANEL,\n gaEventLabel: 'Gerar um backup do banco de dados',\n});\n\nconst backupButtonClick = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.BACKUP_BUTTON,\n gaEventAction: EVENT.ACTION.BACKUP_BUTTON_CLICK,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Clique no botão Fazer backup',\n});\n\nconst modalGoToCpanel = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.MODAL_CPANEL_BACKUP_BUTTON,\n gaEventAction: EVENT.ACTION.MODAL_SHOW,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Clique no botão backup avançado cPanel',\n});\n\nconst modalGoToBackup = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.MODAL_CPANEL_BACKUP_BUTTON,\n gaEventAction: EVENT.ACTION.MODAL_SHOW,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Clique no botão backup portal do cliente',\n});\n\nconst generalVision = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.GENERAL_VISION,\n gaEventAction: EVENT.ACTION.GENERAL_VISION,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Clique na visão geral',\n});\n\nconst accordionHowToDo = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.ACCORDION_FAQ,\n gaEventAction: EVENT.ACTION.ACCORDION_HOW_TO_DO,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Clique no acordeão como fazer um backup',\n});\n\nconst accordionHowToRestore = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.ACCORDION_FAQ,\n gaEventAction: EVENT.ACTION.ACCORDION_HOW_TO_RESTORE,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Clique no acordeão como restaurar um backup',\n});\n\nconst accordionUpdatedBackup = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.ACCORDION_FAQ,\n gaEventAction: EVENT.ACTION.ACCORDION_UPDATED_BACKUP,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Clique no acordeão por que é importante manter meu backup atualizado',\n});\n\nconst accordionMaxSize = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.ACCORDION_FAQ,\n gaEventAction: EVENT.ACTION.ACCORDION_MAX_SIZE,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Clique no acordeão qual tamanho máximo do meu armazenamento',\n});\n\nconst accordionBackupTypes = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.ACCORDION_FAQ,\n gaEventAction: EVENT.ACTION.ACCORDION_BACKUP_TYPES,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Clique no acordeão quais são os tipos de backups',\n});\n\nconst clickOnDoBackupTab = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.BACKUP_TAB,\n gaEventAction: EVENT.ACTION.BACKUP_TAB,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Clique na aba fazer backup',\n});\n\nconst backupButtonOnTabBackupClick = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.BACKUP_GENERATION_TAB,\n gaEventAction: EVENT.ACTION.BACKUP_BUTTON_ON_TAB_BACKUP,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Clique no botão fazer backup',\n});\n\nconst backupGenerationSuccess = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.BACKUP_GENERATION_TAB,\n gaEventAction: EVENT.ACTION.BACKUP_GENERATION_SUCCESS,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Feedback backup gerado exibido em tela',\n});\n\nconst backupGenerationError = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.BACKUP_GENERATION_TAB,\n gaEventAction: EVENT.ACTION.BACKUP_GENERATION_ERROR,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Feedback erro ao fazer backup exibido em tela',\n});\n\nconst clickRestoreTab = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.RESTORE_TAB,\n gaEventAction: EVENT.ACTION.RESTORE_TAB,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Clique na aba restaurar backup',\n});\n\nconst clickRestore = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.RESTORE_TAB,\n gaEventAction: EVENT.ACTION.RESTORE_TAB,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Clique no cta fazer upload',\n});\n\nconst clickLogTab = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LOG_TAB,\n gaEventAction: EVENT.ACTION.LOG_TAB,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Clique na aba últimos backups',\n});\n\nconst clickCPanelTab = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CPANEL_TAB,\n gaEventAction: EVENT.ACTION.CPANEL_TAB,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Clique na aba backup pelo cpanel',\n});\n\nconst clickBackupButtonProductsList = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.BACKUP_BUTTON_PRODUCT_LIST,\n gaEventAction: EVENT.ACTION.BACKUP_BUTTON_PRODUCT_LIST,\n gaEventLabel: 'Solução - Portal do Cliente fluxo de backup - Clique no botão backup',\n});\n\nconst analytics = {\n backupButtonClick,\n modalGoToCpanel,\n modalGoToBackup,\n generalVision,\n accordionHowToDo,\n accordionHowToRestore,\n accordionUpdatedBackup,\n accordionMaxSize,\n accordionBackupTypes,\n clickOnDoBackupTab,\n backupButtonOnTabBackupClick,\n backupGenerationSuccess,\n backupGenerationError,\n clickRestoreTab,\n clickRestore,\n clickLogTab,\n clickCPanelTab,\n clickBackupButtonProductsList,\n generateBackup,\n restoreBackup,\n haveFileClick,\n hgFileClick,\n fullHgFileBackupClick,\n rootHgFileBackupClick,\n databaseHgFileBackupClick,\n fullCustomerFileBackupClick,\n rootCustomerFileBackupClick,\n databaseCustomerFileBackupClick,\n generateCompleteBackupClick,\n generateRootBackupClick,\n generateDatabaseBackupClick,\n};\n\nexport default analytics;\n","import { collect } from '@/analytics';\n\nconst EVENT = {\n NAME: 'gaEvent',\n CATEGORY: {\n DUPLICATE_ORDER_MODAL_SHOW: 'Solução - Diagnóstico Pedidos duplicados - Exibição da modal',\n DUPLICATE_ORDER_FEEDBACK_MODAL_SHOW: 'Solução - Diagnóstico Pedidos duplicados - Modal de feedback',\n DUPLICATE_ORDER_CTA_CLICK: 'Solução - Diagnóstico Pedidos duplicados - Clique no cta',\n },\n ACTION: {\n DUPLICATE_ORDER_MODAL_SHOW: 'Solução - Modal apresentada com sucesso - Modal Exibida',\n DUPLICATE_ORDER_MODAL_SEE_ORDER: 'Solução - Modal apresentada com sucesso - Cta ver fatura',\n DUPLICATE_ORDER_MODAL_CANCEL_ORDER: 'Solução - Modal apresentada com sucesso - Cta cancelar pedido',\n DUPLICATE_ORDER_FEEDBACK_MODAL_SHOW: 'Solução - Modal de feedback - Modal de sucesso apresentada',\n DUPLICATE_ORDER_FEEDBACK_MODAL_OK_CLICK: 'Solução - Modal de feedback - Cta ok, entendi',\n DUPLICATE_ORDER_FEEDBACK_MODAL_SEE_ORDER: 'Solução - Modal de feedback - Cta ver fatura',\n DUPLICATE_ORDER_FAIL_FEEDBACK_MODAL_SHOW: 'Solução - Modal de feedback - Modal de falha apresentada',\n DUPLICATE_ORDER_FAIL_FEEDBACK_TRY_AGAIN: 'Solução - Modal de feedback - Cta tentar novamente',\n },\n LABEL: {\n DUPLICATE_ORDER_MODAL_SHOW: 'Solução - Diagnóstico Pedidos duplicados - Modal Exibida',\n DUPLICATE_ORDER_MODAL_SEE_ORDER: 'Solução - Diagnóstico Pedidos duplicados - Clique no cta ver fatura',\n DUPLICATE_ORDER_MODAL_CANCEL_ORDER: 'Solução - Diagnóstico Pedidos duplicados - Clique no cta cancelar pedido',\n DUPLICATE_ORDER_FEEDBACK_MODAL_SHOW: 'Solução - Diagnóstico Pedidos duplicados - Exibição da modal de sucesso apresentada',\n DUPLICATE_ORDER_FEEDBACK_MODAL_OK_CLICK: 'Solução - Diagnóstico Pedidos duplicados - Clique no cta ok, entendi',\n DUPLICATE_ORDER_FAIL_FEEDBACK_MODAL_SHOW: 'Solução - Diagnóstico Pedidos duplicados - Exibição da modal de falha apresentada',\n DUPLICATE_ORDER_FAIL_FEEDBACK_TRY_AGAIN: 'Solução - Diagnóstico Pedidos duplicados - Clique no cta tentar novamente',\n },\n};\n\nconst duplicateOrderModalShow = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.DUPLICATE_ORDER_MODAL_SHOW,\n gaEventAction: EVENT.ACTION.DUPLICATE_ORDER_MODAL_SHOW,\n gaEventLabel: EVENT.LABEL.DUPLICATE_ORDER_MODAL_SHOW,\n});\n\nconst duplicateOrderSeeOrder = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.DUPLICATE_ORDER_CTA_CLICK,\n gaEventAction: EVENT.ACTION.DUPLICATE_ORDER_MODAL_SEE_ORDER,\n gaEventLabel: EVENT.LABEL.DUPLICATE_ORDER_MODAL_SEE_ORDER,\n});\n\nconst duplicateOrderCancelOrder = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.DUPLICATE_ORDER_MODAL_SHOW,\n gaEventAction: EVENT.ACTION.DUPLICATE_ORDER_MODAL_CANCEL_ORDER,\n gaEventLabel: EVENT.LABEL.DUPLICATE_ORDER_MODAL_CANCEL_ORDER,\n});\n\nconst duplicateOrderPositiveFeedback = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.DUPLICATE_ORDER_FEEDBACK_MODAL_SHOW,\n gaEventAction: EVENT.ACTION.DUPLICATE_ORDER_FEEDBACK_MODAL_SHOW,\n gaEventLabel: EVENT.LABEL.DUPLICATE_ORDER_FEEDBACK_MODAL_SHOW,\n});\n\nconst duplicateOrderFailFeedback = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.DUPLICATE_ORDER_FEEDBACK_MODAL_SHOW,\n gaEventAction: EVENT.ACTION.DUPLICATE_ORDER_FAIL_FEEDBACK_MODAL_SHOW,\n gaEventLabel: EVENT.LABEL.DUPLICATE_ORDER_FAIL_FEEDBACK_MODAL_SHOW,\n});\n\nconst duplicateOrderClickOkUnderstand = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.DUPLICATE_ORDER_FEEDBACK_MODAL_SHOW,\n gaEventAction: EVENT.ACTION.DUPLICATE_ORDER_FEEDBACK_MODAL_OK_CLICK,\n gaEventLabel: EVENT.LABEL.DUPLICATE_ORDER_FEEDBACK_MODAL_OK_CLICK,\n});\n\nconst duplicateOrderModalSeeOrder = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.DUPLICATE_ORDER_FEEDBACK_MODAL_SHOW,\n gaEventAction: EVENT.ACTION.DUPLICATE_ORDER_MODAL_SEE_ORDER,\n gaEventLabel: EVENT.LABEL.DUPLICATE_ORDER_MODAL_SEE_ORDER,\n});\n\nconst duplicateOrderModalTryAgain = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.DUPLICATE_ORDER_FEEDBACK_MODAL_SHOW,\n gaEventAction: EVENT.ACTION.DUPLICATE_ORDER_FAIL_FEEDBACK_TRY_AGAIN,\n gaEventLabel: EVENT.LABEL.DUPLICATE_ORDER_FAIL_FEEDBACK_TRY_AGAIN,\n});\n\nconst analytics = {\n duplicateOrderModalShow,\n duplicateOrderSeeOrder,\n duplicateOrderCancelOrder,\n duplicateOrderPositiveFeedback,\n duplicateOrderClickOkUnderstand,\n duplicateOrderModalSeeOrder,\n duplicateOrderFailFeedback,\n duplicateOrderModalTryAgain,\n};\n\nexport default analytics;\n","import { collect } from '@/analytics';\n\nconst EVENTS = {\n NAME: 'gaEvent',\n CATEGORIES: {\n SUPPORT_CTA_DISPLAYED: 'Solução - Suporte Chamados - CTA exibido',\n SUPPORT_CTA_CLICK: 'Solução - Suporte Chamados - Clique no CTA',\n },\n ACTIONS: {\n SHOW_TICKETS_DISPLAYED: 'Solução - CTA exibido - Ver chamado',\n SHOW_TICKETS_CTA_CLICK: 'Solução - Clique no CTA - Ver chamado',\n },\n LABELS: {\n SHOW_TICKETS_DISPLAYED: 'Solução - Suporte Chamados - CTA ver chamado exibido com sucesso',\n SHOW_TICKETS_CTA_CLICK: 'Solução - Suporte Chamados - Clique no CTA Ver chamado',\n },\n};\n\nconst showTicketsDisplayed = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.SUPPORT_CTA_DISPLAYED,\n gaEventAction: EVENTS.ACTIONS.SHOW_TICKETS_DISPLAYED,\n gaEventLabel: EVENTS.LABELS.SHOW_TICKETS_DISPLAYED,\n });\n};\n\nconst showTicketsCtaClick = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.SUPPORT_CTA_CLICK,\n gaEventAction: EVENTS.ACTIONS.SHOW_TICKETS_CTA_CLICK,\n gaEventLabel: EVENTS.LABELS.SHOW_TICKETS_CTA_CLICK,\n });\n};\n\nconst analytics = {\n showTicketsDisplayed,\n showTicketsCtaClick,\n};\n\nexport default analytics;\n","import { COUNTRY } from '@/config';\n\nexport const BASIC_PLAN = 1988108;\nexport const ESSENTIALS_PLAN = COUNTRY === 'br' ? 421 : 242;\nexport const PREMIUM_PLAN = COUNTRY === 'br' ? 424 : 243;\nexport const TRIAL_PLAN = COUNTRY === 'br' ? 430 : 244;\nexport const ULTRA_PLAN = COUNTRY === 'br' ? 443 : 245;\nexport const FREE_PLAN = COUNTRY === 'br' ? 418 : 241;\n\nexport const TITAN_PRODUCTS_NAMES = {\n PREMIUM: 'PREMIUM',\n ESSENTIALS: 'ESSENTIALS',\n ESSENTIALS_TRIAL: 'ESSENTIALS_TRIAL',\n ULTRA: 'ULTRA',\n};\n\nexport const getTitanNameById = {\n [ESSENTIALS_PLAN]: TITAN_PRODUCTS_NAMES.ESSENTIALS,\n [PREMIUM_PLAN]: TITAN_PRODUCTS_NAMES.PREMIUM,\n [ULTRA_PLAN]: TITAN_PRODUCTS_NAMES.ULTRA,\n [TRIAL_PLAN]: TITAN_PRODUCTS_NAMES.ESSENTIALS_TRIAL,\n};\n","import { collect } from '@/analytics';\nimport { TITAN_PRODUCTS_NAMES } from '@/components/Email/TitanUpgrade/TitanUpgradePlanItem/TitanPlans';\n\nconst EVENTS = {\n NAME: 'gaEvent',\n CATEGORY: 'e-mail',\n ACTION: {\n ENTER_PAGE: 'Exibição_Tela',\n SELECT_ESSENTIALS: 'Titan_Essentials',\n SELECT_PREMIUM: 'Titan_Premium',\n SELECT_ULTRA: 'Titan_Ultra',\n },\n LABEL: 'Titan_Upgrade_Page',\n};\n\nconst enterTitanUpgradePage = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTION.ENTER_PAGE,\n gaEventLabel: EVENTS.LABEL,\n});\n\nconst confirmUpgrade = (upgradeTo) => {\n let action = '';\n switch (upgradeTo) {\n case TITAN_PRODUCTS_NAMES.PREMIUM:\n action = EVENTS.ACTION.SELECT_PREMIUM;\n break;\n case TITAN_PRODUCTS_NAMES.ESSENTIALS:\n action = EVENTS.ACTION.SELECT_ESSENTIALS;\n break;\n case TITAN_PRODUCTS_NAMES.ULTRA:\n action = EVENTS.ACTION.SELECT_ULTRA;\n break;\n default:\n }\n return collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: action,\n gaEventLabel: EVENTS.LABEL,\n });\n};\n\nconst analytics = {\n enterTitanUpgradePage,\n confirmUpgrade,\n};\n\nexport default analytics;\n","import { push } from '@/utils/ThirdParties/tagManager';\n\nexport { billingAnalytics } from './billing';\nexport { domainsAnalytics } from './domains';\nexport { sitesBuilderAnalytics } from './sitesBuilder';\nexport { sitesAnalytics } from './sites';\nexport { costumerPortalSurveyAnalytics } from './costumerPortalSurvey';\nexport { backupAnalytics } from './backup';\nexport { invoicesAnalytics } from './invoices';\nexport { supportAnalytics } from './support';\nexport { upgradeTitanAnalytics } from './upgradeTitan';\n\nexport const collect = data => push(data, false);\n","import { collect } from '@/analytics';\n\nimport { HOSTING_PLATFORM_TYPES } from '@/enums/domains/dns.enum';\n\nconst EVENTS = {\n NAME: 'gaEvent',\n CATEGORY: 'Wizard de DNS',\n ACTIONS: {\n PLAN_SELECTION_MODAL: 'Modal de seleção de plano',\n EXTERNAL_PLATFORM_MODAL: platformName => `Modal de configuração para ${platformName} (automático)`,\n OTHER_PLATFORM_MODAL: 'Modal de configuração para outro provedor',\n ALTER_HOSTING_PLATFORM_MODAL: 'Modal de edição de plataforma',\n DOMAIN_CONFIGURED: 'Tela final com domínio configurado',\n DOMAIN_LIST: 'Listagem de domínios',\n PLATFORM_DEFINITION: 'Definição de plataforma',\n ALTER_EMAIL_PLATFORM_MODAL: 'Modal alteração plataforma de e-mail',\n EMAIL_PLATFORM_MODAL: platformName => `Modal alterar e-mail para ${platformName}`,\n CUSTOM_EMAIL_PLATFORM: 'Modal configurar para outra plataforma de e-mail',\n CUSTOM_DNS_ZONE: (type) => {\n switch (type) {\n case HOSTING_PLATFORM_TYPES.LOJA_INTEGRADA:\n return 'Modal de configuração para Loja Integrada';\n case HOSTING_PLATFORM_TYPES.NUVEMSHOP:\n return 'Modal de configuração para Nuvemshop';\n default:\n return `Modal de configuração para ${type}`;\n }\n },\n },\n};\n\nconst dnsWizardButtonClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.DOMAIN_LIST,\n gaEventLabel: 'Botão Configurar Domínio na listagem',\n});\n\nconst dnsWizardManageScreenButtonClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.DOMAIN_LIST,\n gaEventLabel: 'Botão Configurar Domínio em gerenciar',\n});\n\nconst dnsWizardPlatformDefinitionHelpMaterialClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLATFORM_DEFINITION,\n gaEventLabel: 'Material de ajuda',\n});\n\nconst dnsWizardHostingPlatformsView = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLATFORM_DEFINITION,\n gaEventLabel: 'Exibição tela Definição de plataforma',\n});\n\nconst dnsWizardHostGatorCardClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLATFORM_DEFINITION,\n gaEventLabel: 'Card HG',\n});\n\nconst dnsWizardLojaIntegradaCardClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLATFORM_DEFINITION,\n gaEventLabel: 'Card Loja Integrada',\n});\n\nconst dnsWizardNuvemshopCardClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLATFORM_DEFINITION,\n gaEventLabel: 'Card Nuvemshop',\n});\n\nconst dnsWizardShopifyCardClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLATFORM_DEFINITION,\n gaEventLabel: 'Card Shopify',\n});\n\nconst dnsWizardDLojaCardClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLATFORM_DEFINITION,\n gaEventLabel: 'Card DLoja',\n});\n\nconst dnsWizardExternalCardClick = platformName => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLATFORM_DEFINITION,\n gaEventLabel: `Card ${platformName}`,\n});\n\nconst dnsWizardSkipWizardClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLATFORM_DEFINITION,\n gaEventLabel: 'Ir para configuração avançada (Zona de DNS)',\n});\n\nconst dnsWizardPlanSelectClick = planName => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLAN_SELECTION_MODAL,\n gaEventLabel: planName,\n});\n\nconst dnsWizardPlanSelectionCheckboxClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLAN_SELECTION_MODAL,\n gaEventLabel: 'Checkbox \"ir para zona de DNS\"',\n});\n\nconst dnsWizardClosePlanSelectionModal = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLAN_SELECTION_MODAL,\n gaEventLabel: 'Fechar modal de plano',\n});\n\nconst dnsWizardConfirmPlanSelection = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLAN_SELECTION_MODAL,\n gaEventLabel: 'Confirmar configuração',\n});\n\nconst dnsWizardHelpMaterialPlanSelection = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLAN_SELECTION_MODAL,\n gaEventLabel: 'Material de ajuda o que é propagação',\n});\n\nconst dnsWizardAlterPlatformClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.DOMAIN_CONFIGURED,\n gaEventLabel: 'Alterar plataforma de hospedagem',\n});\n\nconst dnsWizardAlterHostingPlanClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.DOMAIN_CONFIGURED,\n gaEventLabel: 'Edição de plano HG',\n});\n\nconst dnsWizardShowDnsStatsClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.DOMAIN_CONFIGURED,\n gaEventLabel: 'Botão mostrar zona de DNS',\n});\n\nconst dnsWizardCopyDnsZoneStatsClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.DOMAIN_CONFIGURED,\n gaEventLabel: 'Copiar zona de DNS',\n});\n\nconst dnsWizardHelpMaterialDnsZoneStatsClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.DOMAIN_CONFIGURED,\n gaEventLabel: 'Material de ajuda propagação concluída',\n});\n\nconst dnsWizardCustomConfigurationClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLATFORM_DEFINITION,\n gaEventLabel: 'Card outro provedor',\n});\n\nconst dnsWizardCloseCustomConfigurationClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.OTHER_PLATFORM_MODAL,\n gaEventLabel: 'Fechar modal de plano',\n});\n\nconst dnsWizardConfirmCustomConfigurationClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.OTHER_PLATFORM_MODAL,\n gaEventLabel: 'Confirmar configuração',\n});\n\nconst dnsWizardHelpMaterialCustomConfigurationClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.OTHER_PLATFORM_MODAL,\n gaEventLabel: 'Clique material de ajuda propagação',\n});\n\nconst dnsWizardDeleteAdditionalNameServerClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.OTHER_PLATFORM_MODAL,\n gaEventLabel: 'Botão excluir servidor',\n});\n\nconst dnsWizardHostGatorEditPlatformCardClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.ALTER_HOSTING_PLATFORM_MODAL,\n gaEventLabel: 'Card HG',\n});\n\nconst dnsWizardEditPlatformContinueClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.ALTER_HOSTING_PLATFORM_MODAL,\n gaEventLabel: 'Continuar',\n});\n\nconst dnsWizardCloseEditPlatformModal = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.ALTER_HOSTING_PLATFORM_MODAL,\n gaEventLabel: 'Fechar modal',\n});\n\nconst dnsWizardCustomEditPlatformCardClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.ALTER_HOSTING_PLATFORM_MODAL,\n gaEventLabel: 'Card outro provedor',\n});\n\nconst dnsWizardExternalEditPlatformCardClick = platformName => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.ALTER_HOSTING_PLATFORM_MODAL,\n gaEventLabel: `Card ${platformName}`,\n});\n\nconst dnsWizardCustomDnsZoneCloseClick = type => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.CUSTOM_DNS_ZONE(type),\n gaEventLabel: 'Fechar modal de plano',\n});\n\n// CUSTOM DNS ZONE\nconst dnsWizardCustomDnsZoneConfigureButtonClick = type => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.CUSTOM_DNS_ZONE(type),\n gaEventLabel: 'Confirmar configuração',\n});\n\nconst dnsWizardCustomDnsZonePropagationHelpClick = type => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.CUSTOM_DNS_ZONE(type),\n gaEventLabel: 'Clique material de ajuda propagação',\n});\n\nconst dnsWizardCustomDnsZoneShowRecordsClick = type => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.CUSTOM_DNS_ZONE(type),\n gaEventLabel: 'Clique botão mostrar registros padrões',\n});\n\nconst dnsWizardCustomDnsZoneHideRecordsClick = type => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.CUSTOM_DNS_ZONE(type),\n gaEventLabel: 'Clique botão fechar registros padrões',\n});\n\nconst dnsWizardExternalPlatformModalCloseButtonClick = platformName => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.EXTERNAL_PLATFORM_MODAL(platformName),\n gaEventLabel: 'Fechar modal de plano',\n});\n\nconst dnsWizardExternalPlatformModalConfirmButtonClick = platformName => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.EXTERNAL_PLATFORM_MODAL(platformName),\n gaEventLabel: 'Confirmar configuração',\n});\n\nconst dnsWizardExternalPlatformModalEditNameServerButtonClick = (platformName, serverNumber) => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.EXTERNAL_PLATFORM_MODAL(platformName),\n gaEventLabel: `Edição servidor ${serverNumber}`,\n});\n\nconst dnsWizardExternalPlatformModalHelpLinkClick = platformName => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.EXTERNAL_PLATFORM_MODAL(platformName),\n gaEventLabel: 'Clique material de ajuda propagação',\n});\n\nconst dnsWizardBannerNewPlanClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLATFORM_DEFINITION,\n gaEventLabel: 'Botão comprar plano HG',\n});\n\nconst dnsWizardBannerUpgradePlanClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLATFORM_DEFINITION,\n gaEventLabel: 'Botão upgrade de plano',\n});\n\nconst dnsWizardEmailPlatformCpanelTitanCardClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.DOMAIN_CONFIGURED,\n gaEventLabel: 'plataforma de e-mail HG - cPanel e Titan',\n});\n\nconst dnsWizardEmailPlatformGmailCardClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.DOMAIN_CONFIGURED,\n gaEventLabel: 'Card Gmail',\n});\n\nconst dnsWizardEmailPlatformCustomCardClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.DOMAIN_CONFIGURED,\n gaEventLabel: 'Card Outra plataforma de e-mail',\n});\n\nconst dnsWizardBannerSeePlansClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.PLATFORM_DEFINITION,\n gaEventLabel: 'Botão ver planos HG',\n});\n\nconst dnsWizardEmailPlatformTitanCardClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.DOMAIN_CONFIGURED,\n gaEventLabel: 'Card convite definição Titan',\n});\n\nconst dnsWizardEmailPlatformCpanelCardClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.DOMAIN_CONFIGURED,\n gaEventLabel: 'Plataforma de e-mail cpanel',\n});\n\nconst dnsWizardEmailModalHideRecords = platformName => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.EMAIL_PLATFORM_MODAL(platformName),\n gaEventLabel: 'Botão fechar registros',\n});\n\nconst dnsWizardEmailModalShowRecords = platformName => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.EMAIL_PLATFORM_MODAL(platformName),\n gaEventLabel: 'Botão mostrar registros',\n});\n\nconst dnsWizardEmailModalClose = platformName => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.EMAIL_PLATFORM_MODAL(platformName),\n gaEventLabel: 'Fechar modal',\n});\n\nconst dnsWizardEmailModalCheckbox = platformName => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.EMAIL_PLATFORM_MODAL(platformName),\n gaEventLabel: 'Checkbox',\n});\n\nconst dnsWizardEmailModalHelp = platformName => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.EMAIL_PLATFORM_MODAL(platformName),\n gaEventLabel: 'Cliques material de ajuda',\n});\n\nconst dnsWizardEmailModalConfigure = platformName => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.EMAIL_PLATFORM_MODAL(platformName),\n gaEventLabel: 'Botão alterar e-mail',\n});\n\nconst dnsWizardAlterEmailPlatformCardClick = platformName => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.ALTER_EMAIL_PLATFORM_MODAL,\n gaEventLabel: `Card ${platformName}`,\n});\n\nconst dnsWizardAlterEmailClose = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.ALTER_EMAIL_PLATFORM_MODAL,\n gaEventLabel: 'Fechar modal',\n});\n\nconst dnsWizardAlterEmailContinueButton = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.ALTER_EMAIL_PLATFORM_MODAL,\n gaEventLabel: 'Botão continuar',\n});\n\nconst dnsWizardAlterEmailCustomCloseClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.CUSTOM_EMAIL_PLATFORM,\n gaEventLabel: 'Fechar modal',\n});\n\nconst dnsWizardAlterEmailCustomCheckbox = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.CUSTOM_EMAIL_PLATFORM,\n gaEventLabel: 'Checkbox',\n});\n\nconst dnsWizardAlterEmailCustomHelpLink = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.CUSTOM_EMAIL_PLATFORM,\n gaEventLabel: 'Material de ajuda',\n});\n\nconst dnsWizardAlterEmailCustomConfigureButton = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.CUSTOM_EMAIL_PLATFORM,\n gaEventLabel: 'Botão ir para zona de DNS',\n});\n\nconst dnsWizardAlterPlatformEmailButton = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.DOMAIN_CONFIGURED,\n gaEventLabel: 'Alterar plataforma de e-mail',\n});\n\nconst dnsWizardEmailPlatformCpanelAndTitanCardClick = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTIONS.DOMAIN_CONFIGURED,\n gaEventLabel: 'Card convite definição cPanel e Titan',\n });\n};\n\nconst dnsWizardEditDnsZone = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Portal do Cliente Zona de DNS - Clique no cta',\n gaEventAction: 'Solução - Portal do Cliente Zona de DNS - Cta Editar zona avançada de DNS',\n gaEventLabel: 'Solução - Portal do Cliente Zona de DNS - Clique no cta Editar zona avançada de DNS',\n });\n};\n\nconst dnsWizardContinueToEditDnsZone = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Portal do Cliente Zona de DNS - Clique no cta',\n gaEventAction: 'Solução - Portal do Cliente Zona de DNS - Cta Ok, continuar para a zona de dns',\n gaEventLabel: 'Solução - Portal do Cliente Zona de DNS - Cta Ok, continuar para a zona de dns',\n });\n};\n\nconst dnsWizardShowDnsZoneSettings = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Portal do Cliente Zona de DNS - Clique no cta',\n gaEventAction: 'Solução - Portal do Cliente Zona de DNS - Cta Mostrar configuração manual da zona de dns',\n gaEventLabel: 'Solução - Portal do Cliente Zona de DNS - Cta Mostrar configuração manual da zona de dns',\n });\n};\n\nconst dnsPropagationUnderstandTerm = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - banner de propagação de dns',\n gaEventAction: 'Solução - banner de propagação de dns',\n gaEventLabel: 'propagation_understandtheterm',\n});\n\nconst dnsUnpointedDomain = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - banner de propagação de dns',\n gaEventAction: 'Solução - banner de propagação de dns',\n gaEventLabel: 'unpointeddomain_configurenow',\n});\n\nconst dnsUnpointedDomainConfigureDomain = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - banner de propagação de dns',\n gaEventAction: 'Solução - banner de propagação de dns',\n gaEventLabel: 'unpointeddomain_configurenow_configuredomain',\n});\n\nconst domainNotContracted = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - banner de propagação de dns',\n gaEventAction: 'Solução - banner de propagação de dns',\n gaEventLabel: 'tooltip_domainnotcontracted',\n});\n\nconst bannerDomainNotContracted = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - banner de propagação de dns',\n gaEventAction: 'Solução - banner de propagação de dns',\n gaEventLabel: 'banneralert_domainnotcontracted',\n});\n\nconst buttonRegisterDomainNotContracted = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - banner de propagação de dns',\n gaEventAction: 'Solução - banner de propagação de dns',\n gaEventLabel: 'button_register_domainnotcontracted',\n});\n\nconst buttonCloseDomainNotContracted = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - banner de propagação de dns',\n gaEventAction: 'Solução - banner de propagação de dns',\n gaEventLabel: 'close_button_domainnotcontracted',\n});\n\nconst buttonHowToConfigure = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - banner de propagação de dns',\n gaEventAction: 'Solução - banner de propagação de dns',\n gaEventLabel: 'button_how_to_configure',\n});\n\nconst buttonGoToAnotherProvider = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - banner de propagação de dns',\n gaEventAction: 'Solução - banner de propagação de dns',\n gaEventLabel: 'button_gotoanotherprovider',\n});\n\nconst buttonAlreadyMadeChanges = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - banner de propagação de dns',\n gaEventAction: 'Solução - banner de propagação de dns',\n gaEventLabel: 'button_already_made_all_the_changes',\n});\n\nconst buttonCheckDomain = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - banner de propagação de dns',\n gaEventAction: 'Solução - banner de propagação de dns',\n gaEventLabel: 'button_check_domain',\n});\n\nconst buttonBackInstructions = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - banner de propagação de dns',\n gaEventAction: 'Solução - banner de propagação de dns',\n gaEventLabel: 'button_backto_instructions',\n});\n\nconst eppKeyButtonDisplayed = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Portal do Cliente Chave EPP - Botão apresentado com sucesso',\n gaEventAction: 'Solução - Portal do Cliente Chave EPP - apresentado com sucesso',\n gaEventLabel: 'Solução - Portal do Cliente Chave EPP- Botão de Chave EPP apresentado com sucesso',\n});\n\nconst eppKeyButtonDisabled = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Portal do Cliente Chave EPP - Botão apresentado desabilitado',\n gaEventAction: 'Solução - Portal do Cliente Chave EPP - Botão desabilitado',\n gaEventLabel: 'Solução - Portal do Cliente Chave EPP- Botão apresentado desabilitado',\n});\n\nconst eppKeyButtonClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Portal do Cliente Chave EPP - Clique no botão',\n gaEventAction: 'Solução - Portal do Cliente Chave EPP - Clique no botão',\n gaEventLabel: 'Solução - Portal do Cliente Chave EPP- Clique no botão Gerar Chave EPP',\n});\n\nconst eppKeyFirstModalButtonClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Portal do Cliente Chave EPP - Modal 1',\n gaEventAction: 'Solução - Portal do Cliente Chave EPP - Clique no botão',\n gaEventLabel: 'Solução - Portal do Cliente Chave EPP- Modal 1 Clique no botão Gerar Chave EPP',\n});\n\nconst eppKeySecondtModalButtonClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Portal do Cliente Chave EPP - Modal 2',\n gaEventAction: 'Solução - Portal do Cliente Chave EPP - Clique no botão',\n gaEventLabel: 'Solução - Portal do Cliente Chave EPP- Modal 2 Clique no botão Gerar Chave EPP',\n});\n\nconst eppKeySecondtModalCancelClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Portal do Cliente Chave EPP - Modal 2',\n gaEventAction: 'Solução - Portal do Cliente Chave EPP - Clique no botão Cancelar',\n gaEventLabel: 'Solução - Portal do Cliente Chave EPP- Modal 2 Clique no cancelar',\n});\n\nconst eppKeyThirdModalCopyCode = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Portal do Cliente Chave EPP - Modal 3',\n gaEventAction: 'Solução - Portal do Cliente Chave EPP - Clique no botão copiar código',\n gaEventLabel: 'Solução - Portal do Cliente Chave EPP- Modal 3 clique no botão copiar código',\n});\n\nconst eppKeyThirdModalOk = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Portal do Cliente Chave EPP - Modal 3',\n gaEventAction: 'Solução - Portal do Cliente Chave EPP - Clique no botão Ok, entendi',\n gaEventLabel: 'Solução - Portal do Cliente Chave EPP- Modal 3 clique no botão Ok, entendi',\n});\n\nconst eppKeyFourthModalOpenTicket = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Portal do Cliente Chave EPP - Modal 4',\n gaEventAction: 'Solução - Portal do Cliente Chave EPP - Clique no botão Abrir um chamado',\n gaEventLabel: 'Solução - Portal do Cliente Chave EPP- Modal 4 clique no botão Abrir um chamado',\n});\n\nconst eppKeyFourthModalReturn = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Portal do Cliente Chave EPP - Modal 4',\n gaEventAction: 'Solução - Portal do Cliente Chave EPP - Clique no botão Voltar para gerenciar domínios',\n gaEventLabel: 'Solução - Portal do Cliente Chave EPP- Modal 4 clique no botão Voltar para gerenciar domínios',\n});\n\nconst changePlatformCtaClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Wizard de dns - Clique no cta',\n gaEventAction: 'Solução - Wizard de dns - Cta alterar plataforma',\n gaEventLabel: 'Solução - Wizard de dns - Clique no cta alterar plataforma',\n});\n\nconst onlyDnsZoneCtaClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Wizard de dns - Clique no cta',\n gaEventAction: 'Solução - Wizard de dns - Cta sem hospedagem apenas zona de dns',\n gaEventLabel: 'Solução - Wizard de dns - Clique no cta sem hospedagem apenas zona de dns',\n});\n\nconst continueCtaClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Wizard de dns - Clique no cta',\n gaEventAction: 'Solução - Wizard de dns - Cta continuar',\n gaEventLabel: 'Solução - Wizard de dns - Clique no cta continuar',\n});\n\nconst configureCtaClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Wizard de dns - Clique no cta',\n gaEventAction: 'Solução - Wizard de dns - Cta configurar',\n gaEventLabel: 'Solução - Wizard de dns - Clique no cta configurar',\n});\n\nconst keepConfigurationsCtaClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: 'Solução - Wizard de dns - Clique no cta',\n gaEventAction: 'Solução - Wizard de dns - Cta mater configuração',\n gaEventLabel: 'Solução - Wizard de dns - Clique no cta manter configuração',\n});\n\nconst analytics = {\n dnsWizard: {\n dnsWizardButtonClick,\n dnsWizardHostingPlatformsView,\n dnsWizardHostGatorCardClick,\n dnsWizardSkipWizardClick,\n dnsWizardPlanSelectClick,\n dnsWizardPlanSelectionCheckboxClick,\n dnsWizardClosePlanSelectionModal,\n dnsWizardConfirmPlanSelection,\n dnsWizardAlterPlatformClick,\n dnsWizardAlterHostingPlanClick,\n dnsWizardShowDnsStatsClick,\n dnsWizardCopyDnsZoneStatsClick,\n dnsWizardCustomConfigurationClick,\n dnsWizardCloseCustomConfigurationClick,\n dnsWizardConfirmCustomConfigurationClick,\n dnsWizardHelpMaterialCustomConfigurationClick,\n dnsWizardManageScreenButtonClick,\n dnsWizardPlatformDefinitionHelpMaterialClick,\n dnsWizardDeleteAdditionalNameServerClick,\n dnsWizardHostGatorEditPlatformCardClick,\n dnsWizardCloseEditPlatformModal,\n dnsWizardEditPlatformContinueClick,\n dnsWizardCustomEditPlatformCardClick,\n dnsWizardExternalEditPlatformCardClick,\n dnsWizardHelpMaterialPlanSelection,\n dnsWizardHelpMaterialDnsZoneStatsClick,\n dnsWizardCustomDnsZoneCloseClick,\n dnsWizardLojaIntegradaCardClick,\n dnsWizardNuvemshopCardClick,\n dnsWizardShopifyCardClick,\n dnsWizardDLojaCardClick,\n dnsWizardExternalCardClick,\n dnsWizardCustomDnsZoneConfigureButtonClick,\n dnsWizardCustomDnsZonePropagationHelpClick,\n dnsWizardCustomDnsZoneShowRecordsClick,\n dnsWizardCustomDnsZoneHideRecordsClick,\n dnsWizardExternalPlatformModalCloseButtonClick,\n dnsWizardExternalPlatformModalConfirmButtonClick,\n dnsWizardExternalPlatformModalEditNameServerButtonClick,\n dnsWizardExternalPlatformModalHelpLinkClick,\n dnsWizardBannerNewPlanClick,\n dnsWizardBannerUpgradePlanClick,\n dnsWizardBannerSeePlansClick,\n dnsWizardEmailPlatformCpanelTitanCardClick,\n dnsWizardEmailPlatformGmailCardClick,\n dnsWizardEmailPlatformCustomCardClick,\n dnsWizardEmailPlatformTitanCardClick,\n dnsWizardEmailPlatformCpanelCardClick,\n dnsWizardEmailModalHideRecords,\n dnsWizardEmailModalShowRecords,\n dnsWizardEmailModalClose,\n dnsWizardEmailModalCheckbox,\n dnsWizardEmailModalHelp,\n dnsWizardEmailModalConfigure,\n dnsWizardAlterEmailPlatformCardClick,\n dnsWizardAlterEmailClose,\n dnsWizardAlterEmailContinueButton,\n dnsWizardAlterEmailCustomCloseClick,\n dnsWizardAlterEmailCustomCheckbox,\n dnsWizardAlterEmailCustomHelpLink,\n dnsWizardAlterEmailCustomConfigureButton,\n dnsWizardAlterPlatformEmailButton,\n dnsWizardEmailPlatformCpanelAndTitanCardClick,\n dnsWizardEditDnsZone,\n dnsWizardContinueToEditDnsZone,\n dnsWizardShowDnsZoneSettings,\n dnsPropagationUnderstandTerm,\n dnsUnpointedDomain,\n dnsUnpointedDomainConfigureDomain,\n domainNotContracted,\n bannerDomainNotContracted,\n buttonRegisterDomainNotContracted,\n buttonCloseDomainNotContracted,\n buttonHowToConfigure,\n buttonGoToAnotherProvider,\n buttonAlreadyMadeChanges,\n buttonCheckDomain,\n buttonBackInstructions,\n changePlatformCtaClick,\n onlyDnsZoneCtaClick,\n continueCtaClick,\n configureCtaClick,\n keepConfigurationsCtaClick,\n },\n eppKey: {\n eppKeyButtonDisplayed,\n eppKeyButtonDisabled,\n eppKeyButtonClick,\n eppKeyFirstModalButtonClick,\n eppKeySecondtModalButtonClick,\n eppKeySecondtModalCancelClick,\n eppKeyThirdModalCopyCode,\n eppKeyThirdModalOk,\n eppKeyFourthModalOpenTicket,\n eppKeyFourthModalReturn,\n },\n};\n\nexport default analytics;\n","import React from 'react';\nimport Link from '@/pages/common/Link/Link';\nimport { Button, Link as NewLink } from 'gatorcomponents';\nimport {\n DNS_WIZARD_HELP_URL,\n DNS_WIZARD_PROPAGATION,\n DNS_WIZARD_HOW_TO_VERIFY_PROPAGATION,\n DNS_WIZARD_HOW_TO_CONFIG_ALTER_PLATFORM,\n DNS_WIZARD_EMAIL_HELP,\n DNS_WIZARD_EMAIL_HOW_CONFIGURE_MAIL,\n HOW_TO_TRANSFER_A_DOMAIN,\n HOW_TO_CREATE_OR_ALTER_DNS_REGISTER,\n REGISTER_DOMAIN_URL,\n} from '@/config/urls/domainsUrls';\nimport { ERROR_MESSAGES, PLATFORM_NAMES, EMAIL_PLATFORM_NAMES } from '@/enums/domains/dns.enum';\nimport {\n CONFIGURE_DOMAIN_DNS_ARTICLE,\n DEFAULT_SERVER, DNS_PROPAGATION_ARTICLE, EXTERNAL_PLATFORM, GMAIL_CREATE_ACCOUNT, PERSONAL_DNS,\n} from '@/config/urls/supportUrls';\nimport { PROPAGATION_STATUS } from '@/enums/domains/domains.enum';\nimport analytics from '@/analytics/domains/domains.analytics';\n\nexport default {\n // TODO: Review all the links below and refactor them into JSX and the new locale styles\n domainStatusTitle: 'Status do Domínio',\n domainExpirationDate: 'Data de Suspensão',\n emailConfirmation: 'Confirmar E-mail',\n domainModalSubtitle: '<0>Você possui alguns sites suspensos ou prestes a serem suspensos por estarem com a confirmação de e-mail pendente. Confirme-os abaixo para reativar ou evitar que sejam suspensos.',\n verificationStatusPending: 'Aguardando Confirmação',\n verificationStatusSuspended: 'Suspenso Temporariamente',\n notifications: {\n activateRenewal: {\n success: {\n 0: 'A renovação do domínio ',\n 1: ' foi ativada',\n },\n failure: {\n 0: 'O cancelamento da renovação do domínio ',\n 1: ' não pôde ser concluído. Por favor, tente novamente mais tarde.',\n },\n },\n generateNewInvoice: {\n failure: {\n 0: 'Não foi possível gerar uma fatura neste momento. Aguarde uns instantes e tente novamente.',\n },\n },\n },\n\n // New Locales\n dnsWizard: {\n reinforcment: {\n noHostGatorPlan: {\n title: 'Nenhum plano de hospedagem com espaço foi encontrado',\n },\n aditionalPlanOffer: {\n title: 'Você ainda não possui um plano de hospedagem da HostGator',\n },\n dLojaExplanation: {\n title: 'Você está iniciando a configuração de DNS para a Loja HostGator.',\n description: (\n <>\n Anteriormente conhecida como DLoja Virtual \n {' , a Loja HostGator é a plataforma de e-commerce da HostGator, contando com tudo que você precisa para criar sua loja e vender muito.'}\n Lembrando \n {': As configurações de DNS da Loja HostGator são diferentes do seu plano de hospedagem da HostGator. Depois de confirmada a alteração, a criação de site deverá ser feita na '}\n propagadas \n , portanto só será possível utilizar o e-mail após esse período e se houver uma conta de e-mail criada.\n \n ),\n emailZoneTitleTooltip: 'Aqui você realiza apenas a configuração de e-mail do domínio (apontamento de DNS), para que ele funcione você precisa ter um conta de e-mail criada na plataforma escolhida.',\n emailZoneSubtitle: 'Você pode configurar para as plataformas de e-mail da HostGator, Gmail ou outra que desejar.',\n changePlatformText: 'Alterar plataforma',\n planStatusCancelled: 'Seu domínio está configurado para um plano de hospedagem cancelado. Configure agora mesmo seu domínio para um plano ou plataforma de hospedagem clicando em \"Alterar Plataforma\".',\n customEmailPlatformName: 'Outra Plataforma de e-mail',\n emailZoneContentText: (platformType) => {\n if (platformType === EMAIL_PLATFORM_NAMES.HOSTGATOR) {\n return (\n <>\n Plataformas de e-mail\n HostGator \n \n );\n }\n if (platformType === EMAIL_PLATFORM_NAMES.GMAIL) {\n return 'Gmail';\n }\n if (platformType === EMAIL_PLATFORM_NAMES.CUSTOM) {\n return 'Outra Plataforma de e-mail';\n }\n },\n },\n dnsZoneTitle:\n <>\n {'Agora '}\n você já pode fazer os registros de Zona de DNS \n {' no fim da página!'}\n ,\n dnsZoneAlertTitle: 'Configuração do domínio realizada com sucesso',\n dnsZoneAlertDescription: 'Agora você pode seguir com as instruções abaixo.',\n successTitle: (domainName, domainElipsis) => (\n <>\n {'Seu domínio '}\n {domainName} \n {domainElipsis} \n {' foi configurado com sucesso!'}\n \n ),\n successMessage: 'Aguarde o período de propagação de até 24 horas para que seu site possa estar no ar.',\n configCardAttentionMessage: (helpClickGa = () => { }) => (\n <>\n Pode levar até 24 horas para o domínio estar na nova plataforma (período de propagação do DNS). Seu site poderá ficar online após esse período.\n \n \n {'Importante: '} \n Utilize o painel WHM para gerenciar a revenda, e o painel cPanel para gerenciar as contas dos clientes.\n \n
,\n otherPlatformAttentionMessage:\n <>\n \n \n Importante\n \n :\n A criação de site, registros na Zona de DNS, apontamentos de e-mail e outras configurações, deverão ser feitas no outro provedor. Caso o domínio tenha sido configurado para um servidor da HostGator, como VPS e servidor dedicado, os registros de Zona de DNS devem ser gerenciado pelo painel Plesk (VPS ou servidor dedicado Windows) ou painel WHM (servidor dedicado Linux).\n \n ,\n externalPlatformAttentionMessage: platformName => (\n <>\n \n \n Importante:\n \n {` A criação de site, registros na Zona de DNS, apontamentos de e-mail e outras configurações, deverão ser feitas na ${platformName}.`}\n \n \n ),\n otherPlatformCardTitle: 'Outra plataforma de hospedagem',\n changePlatformText: 'Alterar plataforma',\n editAdvancedDNSZone: 'Editar Zona Avançada de DNS',\n noPlanSelectedMessage: 'Servidores de DNS (Name Servers)',\n principalDomainMessage: domainSelected => (\n <>\n {domainSelected ? `Domínio principal: ${domainSelected}` : ''}\n \n ),\n chooseYourPlatformText: (helpClickGa = () => { }) => (\n <>\n Selecione uma das plataforma abaixo para configurar automaticamente o domínio (alterar DNS).
\n \n Caso não seja cliente de nenhuma delas, configure manualmente na opção outra plataforma de hospedagem ou faça uma configuração avançada. Se necessário,\n {' '}\n
\n \n ),\n advancedConfiguration:\n <>\n Ir para configuração avançada \n {' '}\n (Zona de DNS) \n ,\n otherPlatformCardText: (\n <>\n Outra plataforma de\n ainda não está configurado \n {' '}\n para um plano de hospedagem.\n \n Após configurar, pode levar até 24 horas para que as informações sejam\n {' '}\n
\n ),\n },\n custom_dns_zone: {\n title: type => `Configurar para ${PLATFORM_NAMES[type]}`,\n subtitle: type => `Não se preocupe, faremos toda a configuração para você. Serão apontados os registros padrões da ${PLATFORM_NAMES[type]} na Zona de DNS do domínio. Caso deseje, confira abaixo.`,\n configureButtonLabel: 'Configurar',\n showButtonLabel: 'Mostrar registros padrões',\n hideButtonLabel: 'Fechar registros padrões',\n tableHeaders: {\n type: 'Tipo',\n value: 'Valor',\n name: 'Nome',\n },\n checkboxText: 'Estou ciente que as atuais configurações do domínio serão perdidas ao alterar a plataforma de site do domínio.',\n alertMessage: (platformName = '', helpClickGa = () => {}) => (\n \n {'Após configurar, pode levar até 24 horas para que as informações sejam '}\n \n Importante: \n {` Depois de confirmada essa ação, a criação de site deverá ser feita na ${platformName}. Registros na Zona de DNS, apontamento de e-mail e outras configurações serão feitas na HostGator.`}\n \n
\n ),\n },\n custom: {\n title: 'Outra plataforma de hospedagem',\n serverWithNumber: ({ serverNumber = 0, required = false }) => (`Servidor ${serverNumber}${required ? '*' : ''}:`),\n nsWithNumber: number => (`ns${number}.seuservidor.com`),\n ipWithNumber: number => (\n <>\n {'Endereço IP* '}\n {`(servidor ${number}):`} \n \n ),\n ipPlaceholder: 'digite endereço IP',\n addServer: 'Adicionar mais um servidor',\n button: 'Configurar',\n subtitle: 'Indique abaixo os servidores padrões ou personalizados (Name server/DNS) da plataforma ou provedor onde deseja configurar o domínio.',\n needHelp: () => (\n \n {'Precisa de ajuda? Entenda melhor '}\n
\n\n ),\n alertMessage: (helpClickGa = () => { }) => (\n \n {'Após configurar, pode levar até 24 horas para que as informações sejam '}\n \n Importante: \n {' Caso a configuração seja feita para um servidor fora da HostGator, a criação de site, registros na Zona de DNS, apontamentos de e-mail e outras configurações, deverão ser feitas no outro provedor.'}\n \n
\n ),\n },\n external: {\n title: platformName => `Configurar para ${platformName}`,\n subtitle: 'Não se preocupe, faremos toda a configuração para você. Ao confirmar, os servidores (Name server/DNS) do seu domínio serão:',\n configureButtonLabel: 'Configurar',\n serverLabel: 'Servidor',\n checkboxText: 'Estou ciente que as atuais configurações do domínio serão perdidas ao alterar a plataforma de site do domínio.',\n alertMessage: (platformName = '', helpClickGa = () => { }) => (\n \n {'Após configurar, pode levar até 24 horas para que as informações sejam '}\n \n Importante: \n {` Depois de confirmada essa ação, a criação de site, registros na Zona de DNS, apontamentos de e-mail e outras configurações, deverão ser feitas na ${platformName}.`}\n \n
\n ),\n },\n alterPlatform: {\n title: 'Alterar plataforma de site',\n checkboxText: 'Estou ciente que as atuais configurações do domínio serão perdidas ao alterar a plataforma de site do domínio.',\n subtitle:\n \n Selecione uma das plataforma abaixo para configurar automaticamente o domínio (alterar DNS).\n \n {'Caso não seja cliente de nenhuma delas, configure manualmente na opção outra plataforma de hospedagem ou faça uma configuração avançada. Se necessário, '}\n \n
,\n button: 'Continuar',\n tooltip: 'Plataforma de site é o local onde o site ficará hospedado e/ou será criado.',\n },\n mail: {\n title: platformName => `Configurar para ${platformName}`,\n subtitle: (platformName, domainName, helpClickGa) => (\n <>\n {`Aqui vamos apenas realizar os apontados dos registros padrões da ${platformName} na Zona de DNS do domínio, mas para que o e-mail funcione você precisa ter uma conta \"`}\n \n {`@${domainName}`}\n \n {`\" na ${platformName}. Se precisar `}\n \n {`@${domainName}`}\n \n {`\" no ${platformName}. Se precisar `}\n \n Estou ciente que ao clicar no botão abaixo, a atual configuração de plataforma de e-mail será excluída e que por isso\n não será mais possivel usá-la, \n podendo apenas visualizar os e-mails existentes.\n
\n \n ),\n alertMessage: (helpClickGa = () => {}) => (\n \n {'Após configurar, pode levar até 24 horas para que as informações sejam '}\n
\n ),\n },\n custom_mail: {\n title: 'Configurar para outra plataforma de e-mail',\n button: 'Ir para zona de DNS',\n checkbox:\n <>\n {'Estou ciente que ao clicar no botão abaixo, a atual configuração de plataforma de e-mail será excluída e que por isso '}\n \n não será mais possivel usá-la\n \n , podendo apenas visualizar os e-mails existentes.\n ,\n moreInfo: (analyticsClick = () => {}) => Vamos direcionar você para a Zona de DNS, onde será necessário inserir manualmente os registros padrões da plataforma de e-mail desejada.
\n \n Você consegue obter essas informações entrando em contato diretamente com a empresa que irá utilizar. Lembre-se de criar a conta de e-mail "\n \n @\n {domain}\n \n " por lá.\n
\n \n ),\n alertMessage: (helpClickGa = () => { }) => (\n \n {'Após configurar, pode levar até 24 horas para que as informações sejam '}\n
\n ),\n },\n alterEmailPlatform: {\n title: 'Alterar plataforma de e-mail',\n subtitle: 'Você pode alterar para a plataforma de e-mail Titan, cPanel, Gmail ou outra que desejar.',\n continueLabel: 'Continuar',\n },\n advancedDnsZone: {\n title: 'Atenção',\n description: () => (\n <>\n Essa é uma Zona de configuração avançada de DNS. A configuração incorreta poderá deixar o seu site ou serviço\n {' '}\n fora do ar \n .\n \n "\n {plan.name}\n "\n \n {' '}\n -\n {' '}\n {plan.domain}\n \n ),\n description: ns => (\n <>\n Identificamos que o seu domínio está apontado para uma hospedagem. Ao continuar, você perderá essa configuração atual.\n A sua configuração atual é: \n Servidor 1: \n {' '}\n {ns && ns[0]}\n Servidor 2: \n {' '}\n {ns && ns[1]}\n {ns && ns[2] && (\n <>\n Servidor 2: \n {' '}\n {ns[2]}\n \n )}\n {ns && ns[3] && (\n <>\n Servidor 2: \n {' '}\n {ns[3]}\n \n )}\n configuração de Zona de DNS \n {' '}\n antes de continuar.\n \n ),\n keepConfigurations: 'Manter configuração',\n configure: 'Configurar',\n },\n },\n errors: {\n default: 'Não foi possível configurar seu domínio no momento. Tente mais tarde ou entre em contato com nosso suporte via chat.',\n getMessage: (errorType) => {\n switch (errorType) {\n case ERROR_MESSAGES.DEFAULT:\n return 'Não foi possível configurar seu domínio no momento. Tente mais tarde ou entre em contato com nosso suporte via chat.';\n case ERROR_MESSAGES.REQUIRED:\n return 'Preencha o campo para continuar.';\n case ERROR_MESSAGES.INVALID_SERVER:\n return 'Servidor inválido! Não pode conter caracteres especiais (exceto hífen), iniciar e finalizar com hífen ou conter apenas números.';\n case ERROR_MESSAGES.INVALID_IP:\n return 'Endereço IP inválido! Deve conter apenas números e ponto. Os números permitidos vão de 0 a 255.';\n default:\n break;\n }\n },\n },\n hostgatorMailPlatform: (\n <>\n Plataformas de e-mail\n HostGator \n \n ),\n },\n dnsStatus: (status, url) => ({\n [PROPAGATION_STATUS.IN_PROGRESS]: {\n labelText: 'Domínio em propagação',\n labelTooltip: (\n \n Domínio em período de propagação: \n {' pode levar até 24 horas para seu domínio ficar online.'}\n \n ),\n labelDomainsDetails: (\n \n Em período de propagação: pode levar até 24 horas para seu domínio ficar online.\n \n ),\n },\n [PROPAGATION_STATUS.NOT_PROPAGATED]: {\n labelText: 'Domínio não propagado',\n labelTooltip: (\n \n Domínio não propagado: \n {' seu site ainda não está disponível na internet, pois está em processo de atualização. Aguarde algumas horas para que ele esteja disponível'}\n \n ),\n labelDomainsDetails: (\n \n Domínio não apontado: seu site está fora do ar por falta de configuração do domínio (DNS).\n \n ),\n },\n [PROPAGATION_STATUS.NOT_CONTRACTED]: {\n labelText: 'Domínio não contratado',\n labelTooltip: (\n \n Domínio não contratado: \n {' você tem um ou mais domínios que ainda não foram adquiridos.'}\n \n ),\n labelDomainsDetails: (\n \n Domínio não contratado: você tem um ou mais domínios que ainda não foram adquiridos.\n {\n analytics.dnsWizard.bannerDomainNotContracted();\n }}\n />\n \n ),\n },\n [PROPAGATION_STATUS.NOT_CONFIGURED]: {\n labelText: 'Configuração de domínio pendente',\n labelTooltip: (\n \n Configuração de domínio pendente: \n {' você tem um ou mais sites com configuração do domínio (alteração de DNS) pendente.'}\n \n ),\n labelDomainsDetails: (\n \n Configuração de domínio pendente: você tem um ou mais sites com configuração do domínio (alteração de DNS) pendente.\n {\n analytics.dnsWizard.buttonHowToConfigure();\n }}\n />\n \n ),\n },\n })[status],\n register: {\n modal: {\n title: 'Registro de domínio',\n singleDomain: ({ domain }) => (\n \n O domínio "\n \n {domain}\n \n " ainda não está registrado, por isso ele está fora do ar.\n \n ),\n multipleDomains: 'Você tem mais de um domínio não registrado. Para qual você gostaria de continuar com o registro agora?',\n registerDomain: 'Registrar domínio',\n },\n },\n modalEppKey: {\n defaultTitle: 'Solicitar chave EPP',\n successTitle: 'Chave EPP gerada com sucesso',\n failureTitle: 'Erro ao gerar chave EPP',\n orderEppKeyAdvice: (\n \n Selecione o domínio abaixo para gerar a chave.\n
\n ),\n selectDomainForEppLabel: 'Para qual domínio deseja solicitar a chave EPP?',\n selectDomainForEppPlaceholder: 'Selecione o domínio',\n generateEppKey: 'Gerar chave EPP',\n confirmOrderAdvice: (\n <>\n \n Para evitar a perda por transferências realizadas fora do prazo é aconselhável que o seu domínio tenha sido registrado\n {' por mais de 60 dias, não esteja expirado e tenha, pelo menos, 30 dias restantes antes de expirar.'} \n
\n \n Ao gerar a chave, você está ciente que:\n
\n \n ),\n effectsOnGenerateKey: (\n \n \n Transferências realizadas fora do prazo informado podem gerar a\n {' perda do domínio '} \n durante o processo;\n \n \n O domínio será desbloqueado para transferência;\n \n \n Desabilitaremos a renovação automática em seu portal e, se houver uma fatura em aberto, ela será cancelada.\n \n \n ),\n cancel: 'Cancelar',\n keyGenerated: (domain, key) => (\n <>\n \n Sua chave EPP para o domínio\n {` ${domain} `} \n é:\n
\n {key} \n \n ),\n successInfo: (\n <>\n \n Essa chave deve ser enviada para seu novo provedor e tem a validade de 7 dias. Após o envio para o novo provedor, o prazo é de 5 a 15 dias para concluir a transferência.\n
\n \n Leia mais no nosso material de apoio:\n
\n \n Tivemos um problema ao\n {' gerar a chave EPP '} \n para o domínio\n \n {` ${domain}`}\n \n .\n
\n \n Fale com um especialista via chamado ou volte para a tela de gerenciar domínios.\n
\n \n ),\n openTicket: 'Abrir um chamado',\n backToDomains: 'Voltar para gerenciar domínios',\n copyKeyTooltip: 'Copiar chave',\n copiedKeyTooltip: 'Copiado!',\n copyCodeLabel: 'Copiar código',\n },\n manageDomainHandler: {\n tags: {\n pending: 'Pendente',\n active: 'Registrado',\n cancelled: 'Cancelado',\n pendingTransfer: 'Em Transferência',\n registerError: 'Falha no registro',\n expired: 'Expirado',\n nextDueDate: 'À Vencer',\n overDueDate: 'Vencido',\n in_progress: 'Em propagação',\n },\n alert: {\n overDueDate: ({\n expiryDate,\n }) => (\n <>\n {`Seu domínio venceu e irá expirar dia ${expiryDate}. Renove agora mesmo para não correr o risco de perdê-lo.`}\n \n ),\n nextDueDate: () => (\n <>\n {'A assinatura vencerá em breve. Recomendamos que você utilize um método de pagamento com '}\n compensação imediata, \n { ' como '}\n Pix, Cartão de Crédito ou PayPal. \n \n ),\n goToPayment: 'Ir para pagamento',\n },\n domainData: {\n registerDate: 'Data de Registro',\n nextDueDate: 'Data do Vencimento',\n cycle: 'Ciclo',\n manageSubscription: 'Gerenciar Assinatura',\n },\n cardOptions: {\n dns: {\n title: 'Servidores DNS',\n tooltip: 'Os servidores DNS traduzem nomes de domínio em endereços IP. As informações de DNS são importantes para configurar domínios, e-mails, gerenciar subdomínios e garantir que o site e e-mails fiquem online e funcionais. ',\n cta: 'Configurar domínio',\n alert: {\n in_progress: (\n <>\n Em período de propagação: pode levar até 24 horas para seu domínio ficar online.\n porém ele ainda não está configurado \n {' para um plano de hospedagem.'}\n {date} \n {'. '}\n Domínio pendente: \n {' Efetue o pagamento da fatura em aberto. '}\n {date} \n {'. '}\n {`vence dia ${date}`} \n {' e você será cobrado automaticamente via Cartão de Crédito.'}\n \n ),\n next_due_date_paypal: date => (\n <>\n {'Sua fatura '}\n {`vence dia ${date}`} \n {' e você será cobrado automaticamente via PayPal.'}\n \n ),\n due_date_disabled_auto_renovation: (date, onClick, loading) => (\n <>\n {'Seu domínio '}\n {`vence dia ${date}. `} \n {date} \n {' e seu domínio será expirado em '}\n {days === 1 ? `${days} dia. ` : `${days} dias. `} \n {`expirar dia ${date}. `} \n {`venceu dia ${date}. `} \n {'e seu domínio será cancelado em breve. '}\n {`venceu dia ${date}`} \n . Para maiores informações entre em contato com o suporte.\n \n ),\n expired_on_grace_period: onClick => (\n <>\n {'Seu domínio '}\n expirou \n {' e esta é a última chance de renová-lo. '}\n domínio foi cancelado \n {'. Entre em contato com '}\n analise@hostgator.com.br \n {' para mais informações.'}\n \n ),\n cancelled_unrecoverable: (date, url) => (\n <>\n {'Seu '}\n {`domínio foi cancelado dia ${date}. `} \n {`domínio foi cancelado dia ${date}`} \n {' por falta de pagamento. '}\n Anteriormente conhecida como DLoja Virtual \n {`, a Loja HostGator é a plataforma de e-commerce da HostGator, contando com tudo que você precisa para criar sua loja e vender muito.\nNa Loja HostGator você irá administrar a sua loja online, cadastrar produtos e categorias, acompanhar pedidos e estoque, gerar relatórios, entre outros gerenciamentos.`}\n \n ),\n alert: (\n <>\n Lembrando \n {': As configurações de DNS da Loja HostGator são diferentes do seu plano de hospedagem da HostGator. Depois de confirmada a alteração, a criação de site deverá ser feita na '}\n propagadas \n , por esto, solo puede usar el correo electrónico después de ese período y si hay una cuenta de correo electrónico creada.\n \n ),\n emailZoneTitleTooltip: 'Aquí usted realiza solo la configuración de correo electrónico del dominio (apuntamiento de DNS), para que este funcione necesita tener una cuenta de correo electrónico creada en la plataforma elegida.',\n emailZoneSubtitle: 'Usted puede configurar para las plataformas de correo electrónico de Hostgator, Gmail o otra que desee.',\n changePlatformText: 'Cambiar plataforma',\n planStatusCancelled: 'Su dominio está configurado para un plan de hosting cancelado. Configure su dominio ahora mismo para un plan o plataforma de hosting haciendo clic en \"Cambiar plataforma\".',\n customEmailPlatformName: 'Otra plataforma de correo',\n emailZoneContentText: (platformType) => {\n if (platformType === EMAIL_PLATFORM_NAMES.HOSTGATOR) {\n return (\n <>\n Plataformas de correo\n HostGator \n \n );\n } if (platformType === EMAIL_PLATFORM_NAMES.GMAIL) {\n return 'Gmail';\n } if (platformType === EMAIL_PLATFORM_NAMES.CUSTOM) {\n return 'Otra plataforma de correo';\n }\n },\n },\n dnsZoneTitle:\n <>\n {'¡Ahora '}\n puede hacer los registros de Zona DNS \n {' al final de la página!'}\n ,\n dnsZoneAlertTitle: 'Configuración de dominio realizada con éxito',\n dnsZoneAlertDescription: 'Ahora puede seguir con las instrucciones a continuación.',\n successTitle: (domainName, domainElipsis) => (\n <>\n {'¡Su dominio '}\n {domainName} \n {domainElipsis} \n {' fue configurado con éxito!'}\n \n ),\n successMessage: 'Espere el período de propagación de hasta 24 horas para que su sitio esté online.',\n configCardAttentionMessage: (helpClickGa = () => {}) => (\n <>\n Puede tomar hasta 24 horas para que el dominio esté en la nueva plataforma (período de propagación de DNS). Su sitio podrá estar online después de este período.\n \n \n {'Importante: '} \n Utilice el panel de WHM para administrar el Reseller y el panel de cPanel para administrar las cuentas de los clientes\n \n
,\n otherPlatformAttentionMessage:\n <>\n \n \n Importante\n \n {' '}\n :\n La creación del sitio, los registros de zona DNS, los apuntamentos de correo electrónico y otras configuraciones deben realizarse en el otro proveedor. Si el dominio se ha configurado para un servidor HostGator, como el servidor VPS y Dedicado, los registros de zona DNS deben ser administrados por el panel WHM (VPS y servidor Dedicado Linux ) o el panel Plesk (Servidor Dedicado Windows).\n \n ,\n externalPlatformAttentionMessage: platformName => (\n <>\n \n \n Importante:\n \n {` La creación del sitio, los registros de zona DNS, los apuntamentos de correo electrónico y otras configuraciones deben realizarse en ${platformName}.`}\n \n \n ),\n otherPlatformCardTitle: 'Otra plataforma de alojamiento',\n changePlatformText: 'Cambiar plataforma',\n editAdvancedDNSZone: 'Editar Zona avanzada de DNS',\n noPlanSelectedMessage: 'Servidores de DNS (Name Servers)',\n principalDomainMessage: domainSelected => (\n <>\n {domainSelected ? `Dominio principal: ${domainSelected}` : ''}\n \n ),\n chooseYourPlatformText: (helpClickGa = () => {}) => (\n <>\n Seleccione una de las plataformas abajo para configurar automáticamente el dominio (cambiar DNS).
\n \n Si no es cliente de ninguna de ellas, configure manualmente la opción para otra plataforma de alojamiento o haga una configuración avanzada. Si es necesario,\n {' '}\n
\n \n ),\n advancedConfiguration:\n <>\n Ir para configuración avanzada \n {' '}\n (Zona de DNS) \n ,\n otherPlatformCardText: (\n <>\n Otra plataforma de\n aún no está configurado \n {' '}\n para un plan de alojamiento.\n \n Después de la configuración, puede tardar hasta 24 horas para que las informaciones se\n {' '}\n
\n ),\n },\n custom_dns_zone: {\n title: type => `Configuración para ${PLATFORM_NAMES[type]}`,\n subtitle: type => `No se preocupe, haremos toda la configuración por usted. Serán apuntados los registros predeterminados de la ${PLATFORM_NAMES[type]} en la Zona DNS del dominio. Si lo desea, consulte a continuación.`,\n configureButtonLabel: 'Configurar',\n showButtonLabel: 'Mostrar registros predeterminados',\n hideButtonLabel: 'Cerrar registros predeterminados',\n tableHeaders: {\n type: 'Tipo de apuntamiento',\n value: 'Destino',\n name: 'Nombre',\n },\n checkboxText: 'Estoy consciente de que las actuales configuraciones de dominio se perderán al cambiar el lugar de alojamiento del dominio.',\n alertMessage: (platformName = '', helpClickGa = () => {}) => (\n \n {'Después de la configuración, puede tardar hasta 24 horas para que las informaciones se '}\n \n Importante: \n {` Después de confirmar esta acción, la creación del sitio debe realizarse en la ${platformName}. Los registros de zona DNS, el apuntamiento de correo electrónico y otras configuraciones se realizarán en HostGator.`}\n \n
\n ),\n },\n custom: {\n title: 'Otra plataforma de alojamiento',\n serverWithNumber: ({ serverNumber = 0, required = false }) => (`Servidor ${serverNumber}${required ? '*' : ''}:`),\n nsWithNumber: number => (`ns${number}.seuservidor.com`),\n ipWithNumber: number => (\n <>\n {'Dirección IP* '}\n {`(servidor ${number}):`} \n \n ),\n ipPlaceholder: 'Digite la dirección IP',\n addServer: 'Añadir un servidor más',\n button: 'Configurar',\n subtitle: 'Indique a continuación los servidores de la plataforma (name server) donde desea configurar su dominio o el servidor de su alojamiento personalizado.',\n needHelp: () => (\n \n {'¿necesita ayuda? '}\n
\n ),\n alertMessage: (helpClickGa = () => {}) => (\n \n {'Después de la configuración, puede tardar hasta 24 horas para que las informaciones se '}\n \n Importante: \n {' Si la configuración se realiza para un servidor fuera del alojamiento, la creación del sitio, los registros en la zona DNS, los apuntamientos de correo electrónico y otras configuraciones deberán realizarse en el otro proveedor.'}\n \n
\n ),\n },\n external: {\n title: platformName => `Configuración para ${platformName}`,\n subtitle: 'No se preocupe, haremos toda la configuración por usted. Cuando confirme, los servidores (Name server/ DNS) de su dominio serán:',\n configureButtonLabel: 'Configurar',\n serverLabel: 'Servidor',\n checkboxText: 'Estoy consciente de que las actuales configuraciones de dominio se perderán al cambiar el lugar de alojamiento del dominio.',\n alertMessage: (platformName, helpClickGa = () => {}) => (\n \n {'Después de la configuración, puede tardar hasta 24 horas para que las informaciones se '}\n \n Importante: \n {` Después de confirmar esta acción, la creación del sitio, los registros de zona DNS, el apuntamiento de correo electrónico y otras configuraciones se realizarán en ${platformName}.`}\n \n
\n ),\n },\n alterPlatform: {\n title: 'Cambiar la plataforma del sitio',\n checkboxText: 'Estoy consciente de que las actuales configuraciones de dominio se perderán al cambiar el lugar de alojamiento del dominio.',\n subtitle:\n \n Seleccione una de las plataformas abajo para configurar automáticamente el dominio (cambiar DNS).\n \n {'Si no es cliente de ninguna de esas plataformas, configure manualmente en la opción otra plataforma de alojamiento o realice una configuración avanzada. Si es necesario, '}\n \n
,\n button: 'Continuar',\n tooltip: 'La plataforma del sitio es el lugar donde se alojará y/o se creará el sitio.',\n },\n mail: {\n title: platformName => `Configuración para ${platformName}`,\n subtitle: (platformName, domainName, helpClickGa) => (\n <>\n {`Aquí solo realizaremos el apuntamiento de los registros estándar de ${platformName} en la zona DNS del dominio, pero para que el correo electrónico funcione, debe tener una cuenta de correo electrónico \"`}\n \n {`@${domainName}`}\n \n {`\" en ${platformName}. Si es necesario `}\n \n {`@${domainName}`}\n \n {`\" en ${platformName}, `}\n \n Soy consciente de que al hacer clic en el botón a continuación, la configuración actual de la plataforma de correo electrónico se eliminará y que\n ya no será posible usarlo, \n pudiendo ver solo los correos electrónicos existentes.\n
\n \n ),\n alertMessage: (helpClickGa = () => {}) => (\n \n {'Después de la configuración, puede tardar hasta 24 horas para que las informaciones se '}\n
\n ),\n },\n custom_mail: {\n title: 'Cambiar para otra plataforma de correo',\n button: 'Ir para la zona de DNS',\n checkbox:\n <>\n {'Soy consciente de que al hacer clic en el botón de abajo, se eliminará la configuración actual de la plataforma de correo electrónico y que, por lo tanto, '}\n \n no será más posible usarla\n \n , pudiendo ver solo los correos electrónicos existentes.\n ,\n moreInfo: (analyticsClick = () => {}) => Vamos a dirigirlo para la Zona DNS, donde será necesario ingresar manualmente los registros estándar de la plataforma de correo electrónico deseada.
\n \n Puede obtener estas informaciones poniéndose en contacto directamente con la empresa que utilizará. Recuerde crear la cuenta de correo electrónico "\n \n @\n {domain}\n \n " allí.\n
\n \n ),\n alertMessage: (helpClickGa = () => { }) => (\n \n {' Después de la configuración, puede tardar hasta 24 horas para que las informaciones sean '}\n
\n ),\n },\n advancedDnsZone: {\n title: 'Atención',\n description: () => (\n <>\n Esta es una Zona de configuración avanzada de DNS. Una configuración incorrecta puede dejar su sitio o servicio\n {' '}\n sin funcionar \n .\n \n "\n {plan.name}\n "\n \n {' '}\n -\n {' '}\n {plan.domain}\n \n ),\n description: ns => (\n <>\n Identificamos que su dominio apunta para un alojamiento. Al continuar, perderá esta configuración actual.\n Su configuración actual es: \n Servidor 1: \n {' '}\n {ns && ns[0]}\n Servidor 2: \n {' '}\n {ns && ns[1]}\n {ns && ns[2] && (\n <>\n Servidor 2: \n {' '}\n {ns[2]}\n \n )}\n {ns && ns[3] && (\n <>\n Servidor 2: \n {' '}\n {ns[3]}\n \n )}\n las configuraciones de la Zona de DNS \n {' '}\n antes de continuar.\n \n ),\n keepConfigurations: 'Mantener configuración',\n configure: 'Configurar',\n },\n },\n errors: {\n default: 'No fue posible configurar el dominio en este momento. Inténtelo más tarde o póngase en contacto con nuestro soporte a través del chat',\n getMessage: (errorType) => {\n switch (errorType) {\n case ERROR_MESSAGES.DEFAULT:\n return 'No pudimos configurar su dominio en este momento. Inténtelo más tarde o comuníquese con nuestro soporte a través del chat.';\n case ERROR_MESSAGES.REQUIRED:\n return 'Rellene el campo para continuar.';\n case ERROR_MESSAGES.INVALID_SERVER:\n return '¡Servidor no válido! No puede contener caracteres especiales (excepto guión), comenzar y terminar con guión, o contener sólo números.';\n case ERROR_MESSAGES.INVALID_IP:\n return '¡Dirección IP no válida! Debe contener solo números y puntos. Los números permitidos van del 0 al 255.';\n default:\n break;\n }\n },\n },\n hostgatorMailPlatform: (\n <>\n Plataformas de correo\n HostGator \n \n ),\n },\n dnsStatus: (status, url) => ({\n [PROPAGATION_STATUS.IN_PROGRESS]: {\n labelText: 'Dominio en propagación',\n labelTooltip: (\n \n Dominio en periodo de propagación: \n {' puede tardar hasta 24 horas para que su dominio este online.'}\n \n ),\n labelDomainsDetails: (\n \n En periodo de propagación: puede tardar hasta 24 horas para que su dominio este online.\n \n ),\n },\n [PROPAGATION_STATUS.NOT_PROPAGATED]: {\n labelText: 'Dominio no propagado',\n labelTooltip: (\n \n Dominio no propagado: \n {' su sitio web todavía no está disponible en internet porque está en proceso de actualización. Espere algunas horas para que esté disponible.'}\n \n ),\n labelDomainsDetails: (\n \n Dominio no apuntado: su sitio esta offline por falta de la configuración de dominio (DNS).\n \n ),\n },\n [PROPAGATION_STATUS.NOT_CONTRACTED]: {\n labelText: 'Dominio no contratado',\n labelTooltip: (\n \n Dominio no contratado: \n {' usted tiene uno o más dominios que aún no fueron adquiridos.'}\n \n ),\n labelDomainsDetails: (\n \n Dominio no contratado: usted tiene uno o más dominios que aún no fueron adquiridos.\n {\n analytics.dnsWizard.bannerDomainNotContracted();\n }}\n />\n \n ),\n },\n [PROPAGATION_STATUS.NOT_CONFIGURED]: {\n labelText: 'Configuración de dominio pendiente',\n labelTooltip: (\n \n Configuración de dominio pendiente: \n {' usted tiene uno o más sitios web con configuración de dominio (cambio de DNS) pendiente.'}\n \n ),\n labelDomainsDetails: (\n \n Configuración de dominio pendiente: usted tiene uno o más sitios web con configuración de dominio (cambio de DNS) pendiente.\n {\n analytics.dnsWizard.buttonHowToConfigure();\n }}\n />\n \n ),\n },\n })[status],\n register: {\n modal: {\n title: 'Registro de dominio',\n singleDomain: ({ domain }) => (\n \n El dominio "\n \n {domain}\n \n " aún no está registrado, por esto está offline.\n \n ),\n multipleDomains: 'Tiene más de un dominio no registrado. ¿Cuál le gustaría continuar registrando ahora?',\n registerDomain: 'Registrar dominio',\n },\n },\n modalEppKey: {\n defaultTitle: 'Solicitar clave EPP',\n successTitle: 'Clave EPP generada correctamente',\n failureTitle: 'Error al generar la clave EPP',\n orderEppKeyAdvice: (\n \n Seleccione el dominio abajo para generar la clave.\n
\n ),\n selectDomainForEppLabel: '¿Para cuál dominio desea solicitar la clave EPP?',\n selectDomainForEppPlaceholder: 'Seleccione el dominio',\n generateEppKey: 'Generar clave EPP',\n confirmOrderAdvice: (\n <>\n \n Para evitar pérdidas por transferencias realizadas fuera del plazo, es recomendable que su dominio haya sido registrado\n {' durante más de 60 días, no esté expirado y tenga al menos 30 días restantes antes de expirar.'} \n
\n \n Al generar la clave, usted es consciente de que:\n
\n \n ),\n effectsOnGenerateKey: (\n \n \n Las transferencias realizadas fuera del plazo informado pueden generar la\n {' pérdida del dominio '} \n durante el proceso;\n \n \n El dominio se desbloqueará para la transferencia;\n \n \n Deshabilitaremos la renovación automática en su portal y, si hay una factura pendiente, se cancelará.\n \n \n ),\n cancel: 'Cancelar',\n keyGenerated: (domain, key) => (\n <>\n \n La clave EPP para el dominio\n {` ${domain} `} \n es:\n
\n {key} \n \n ),\n successInfo: (\n <>\n \n Esta clave debe enviarse a su nuevo proveedor y es válida por 7 días. Después de enviar para el nuevo proveedor, el plazo es de 5 a 15 días para completar la transferencia.\n
\n \n Lea más en nuestro material de apoyo:\n
\n \n Tuvimos un problema al\n {' generar la clave EPP '} \n para el dominio\n \n {` ${domain}`}\n \n .\n
\n \n Hable con un especialista en un ticket o vuelva a la pantalla de administración de dominios.\n
\n \n ),\n openTicket: 'Abrir un ticket',\n backToDomains: 'Volver a administrar dominios',\n copyKeyTooltip: 'Copiar clave',\n copiedKeyTooltip: 'Copiado!',\n copyCodeLabel: 'Copiar código',\n },\n manageDomainHandler: {\n tags: {\n pending: 'Abierto',\n active: 'Registrado',\n cancelled: 'Cancelado',\n pendingTransfer: 'En Transferencia',\n registerError: 'Registro Fallido',\n expired: 'Caducado',\n nextDueDate: 'Por vencer',\n overDueDate: 'Vencido',\n in_progress: 'En propagación',\n },\n alert: {\n overDueDate: ({\n expiryDate,\n }) => (\n <>\n {`Su dominio venció y expirará el ${expiryDate}. Renueve ahora mismo para no correr el riesgo de perderlo.`}\n \n ),\n nextDueDate: () => (\n <>\n {'La suscripción vencerá pronto. Le recomendamos que utilice un método de pago con '}\n compensación inmediata, \n {' como '}\n Tarjeta de crédito. \n \n ),\n goToPayment: 'Ir para el pago',\n },\n domainData: {\n registerDate: 'Fecha de registro',\n nextDueDate: 'Fecha de vencimiento',\n cycle: 'Ciclo de pago',\n manageSubscription: 'Administrar suscripción',\n },\n cardOptions: {\n dns: {\n title: 'Servidores DNS',\n tooltip: 'Los servidores DNS traducen los nombres de dominio en direcciones IP. La información de DNS es importante para configurar dominios, correos electrónicos, administrar subdominios y garantizar que los sitios web y los correos electrónicos estén online y funcionen.',\n cta: 'Configurar dominio',\n alert: {\n in_progress: (\n <>\n En período de propagación: su dominio puede tardar hasta 24 horas para estar online.\n pero aún no está configurado \n {' para un plan de hosting.'}\n {date} \n {'. '}\n Dominio pendiente: \n {' Realiza el pago de la factura abierta. '}\n {date} \n {'. '}\n {`vence el dia ${date}`} \n {' y se le cobrará automáticamente a través de Tarjeta de Crédito.'}\n \n ),\n next_due_date_paypal: date => (\n <>\n {'Su factura '}\n {`vence el dia ${date}`} \n {' y se le cobrará automáticamente a través de PayPal.'}\n \n ),\n due_date_disabled_auto_renovation: (date, onClick, loading) => (\n <>\n {'Su dominio '}\n {`vence el ${date}`} \n {date} \n {'y su dominio caducará en '}\n {days === 1 ? `${days} dia. ` : `${days} dias. `} \n {`expirará el ${date}. `} \n {`venció el día ${date}. `} \n {' y su dominio será cancelado en breve.'}\n {`venció el ${date}`} \n . Para más informaciones, comuníquese con soporte.\n \n ),\n expired_on_grace_period: onClick => (\n <>\n {'El dominio ha '}\n caducado \n {' y esta es la última oportunidad para renovarlo. '}\n dominio fue cancelado \n {'. Para más informaciónes ingrese a nuestra '}\n {`dominio fue cancelado el dia ${date}. `} \n {`dominio fue cancelado el dia ${date}. `} \n {' por falta de pago. '}\n compensación inmediata, \n {' como '}\n Tarjeta de crédito o PayPal. \n \n ),\n },\n },\n};\n","import domainsBR from './domains.br';\nimport domainsCL from './domains.cl';\nimport domainsCO from './domains.co';\nimport domainsMX from './domains.mx';\n\nconst locales = {\n BR: domainsBR,\n CL: domainsCL,\n CO: domainsCO,\n MX: domainsMX,\n};\n\nexport default locales;\n","import routesBR from './routes.br';\nimport routesCL from './routes.cl';\nimport routesCO from './routes.co';\nimport routesMX from './routes.mx';\n\nconst locales = {\n BR: routesBR,\n CL: routesCL,\n CO: routesCO,\n MX: routesMX,\n};\n\nexport default locales;\n","export default {\n billing: '/faturas',\n byHost: '/by-host',\n cancelled: '/canceladas',\n cancelRenewal: '/cancelar-renovacao',\n cancelSubscription: '/cancelar-assinatura',\n changePassword: '/alterar-senha',\n accountSecurity: '/seguranca-da-conta',\n checkDomainAvailability: '/check-domain-availability',\n codeguard: '/codeguard',\n courses: '/cursos',\n coursesCta: '/cursos-cta',\n createEmail: '/criar-conta-de-e-mail',\n createFirstEmailsTitan: '/criar-primeira-conta-e-mail',\n creditcard: '/gerenciar-cartao-credito',\n dns: '/alterar-dns',\n domainConfig: '/configurar-dominio',\n domaindetail: '/gerenciar-dominio',\n domainRegister: '/registro-de-dominio',\n domains: '/dominios',\n emails: '/e-mails',\n emailsList: '/emails-list',\n emailsTitan: '/gerenciar',\n emailVerify: '/validar-email',\n feedbackSite: '/feedback-site',\n filteredEmails: '/filtro-e-mails',\n goalsObjectives: '/metas-e-objetivos',\n help: '/suporte',\n helpRedirect: '/ajuda',\n home: '/',\n homeRedirect: '/inicio',\n hosting: '/hospedagem-de-sites',\n invoices: '/faturas',\n manageSubscription: '/gerenciar-assinatura',\n mktPlace: '/potencialize-seu-negocio',\n myData: '/meus-dados',\n newSite: '/criar-site',\n onboarding: '/onboarding',\n paid: '/pagas',\n persona: '/nivel-de-conhecimento',\n phoneVerify: '/validar-celular',\n productdetail: '/gerenciar-produto',\n products: '/produtos',\n retentionSubscriptionConfirm: '/confirmar-cancelamento',\n retentionSubscriptionOffer: '/ofertar-beneficios',\n retentionSubscriptionOfferAfterQuestions: '/ofertar-vantagens',\n retentionSubscription: '/assinatura',\n retentionRenew: '/renovacao',\n retentionBenefit: '/beneficio',\n security: '/seguranca',\n siteBuilder: 'criador-de-sites',\n siteBuilderRedirectAccess: '/sso-site-builder',\n sitelock: '/sitelock',\n sites: '/meus-sites',\n sitesCreate: '/criar-site',\n sitesPage: '/sites',\n sitesPlans: '/sites-e-planos',\n subscriptions: '/assinaturas',\n supportforms: '/abrir-chamado',\n createTicket: '/criar-ticket',\n ticket: '/suporte/chamado',\n titanHire: '/titan-hire-plan',\n titanHireFreePlan: '/titan-hire-free-plan',\n titanHirePlan: '/titan-hire-free-plan',\n titanHirePlanActiveCPanel: '/titan-hire-plan-active-cpanel',\n titanInboxUpgrade: '/titan-inbox-upgrade',\n titanUpgrade: '/titan-upgrade',\n unpaid: '/pendentes',\n upgrade: '/upgrade',\n whmRedirectAccess: '/sso-whm-access',\n coursesTrial: '/cursos-trial',\n dnsWizard: '/dns-wizard',\n asaas: '/asaas',\n backup: '/backup',\n linkNaBio: '/link-na-bio',\n logoBuilder: '/logo-builder',\n wizard: 'wizard',\n dataAnalysis: 'analise-de-dados',\n cloudflare: '/cloudflare',\n};\n","export default {\n billing: '/facturas',\n byHost: '/by-host',\n cancelled: '/anuladas',\n cancelRenewal: '/cancelar-renovacion',\n cancelSubscription: '/cancelar-suscripcion',\n changePassword: '/cambiar-contrasena',\n accountSecurity: '/seguridad-de-cuenta',\n checkDomainAvailability: '/check-domain-availability',\n courses: '/cursos',\n createEmail: '/crear-cuenta-de-correo',\n creditcard: '/gestionar-tarjeta-credito',\n dns: '/cambiar-dns',\n domainConfig: 'configuracion-de-dominio',\n domaindetail: '/gestionar-dominio',\n domainRegister: '/dominios',\n domains: '/dominios',\n emails: '/e-mails',\n emailsList: '/emails-list',\n emailsTitan: '/administrar',\n emailVerify: '/confirmar-correo-electronico',\n feedbackSite: '/feedback-sitio-web',\n filteredEmails: '/filtro-e-mails',\n goalsObjectives: '/metas-y-objetivos',\n help: '/soporte',\n helpRedirect: '/ayuda',\n home: '/',\n homeRedirect: '/inicio',\n hosting: '/web-hosting',\n invoices: '/facturas',\n manageSubscription: '/administar-suscripciones',\n myData: '/mis-datos',\n newSite: '/crear-sitio-web',\n onboarding: '/onboarding',\n paid: '/pagadas',\n persona: '/nivel-de-conocimiento',\n phoneVerify: '/confirmar-celular',\n productdetail: '/gestionar-producto',\n products: '/productos',\n retentionSubscriptionConfirm: '/confirmar-cancelacion',\n retentionSubscriptionOffer: '/ofrecer-beneficios',\n retentionSubscriptionOfferAfterQuestions: '/ofrecer-ventajas',\n retentionSubscription: '/suscripcion',\n retentionRenew: '/renovacion',\n retentionBenefit: '/beneficio',\n siteBuilder: 'creador-de-sitios',\n siteBuilderRedirectAccess: '/sso-site-builder',\n sites: '/mis-sitios-web',\n sitesCreate: '/crear-sitio-web',\n sitesPage: '/sitios-web',\n sitesPlans: '/sitios-web-y-planes',\n subscriptions: '/suscripciones',\n supportforms: '/abrir-ticket',\n createTicket: '/crear-ticket',\n ticket: '/soporte/ticket',\n titanHire: '/titan-hire-plan',\n titanHireFreePlan: '/titan-hire-free-plan',\n titanHirePlan: '/titan-hire-free-plan',\n titanHirePlanActiveCPanel: '/titan-hire-plan-active-cpanel',\n titanInboxUpgrade: '/titan-inbox-upgrade',\n titanUpgrade: '/titan-upgrade',\n unpaid: '/pendientes',\n upgrade: '/upgrade',\n whmRedirectAccess: '/sso-whm-access',\n dnsWizard: '/dns-wizard',\n backup: '/backup',\n linkNaBio: '/enlace-en-la-bio',\n wizard: 'wizard',\n dataAnalysis: 'analisis-de-datos',\n cloudflare: '/cloudflare',\n};\n","export default {\n billing: '/facturas',\n byHost: '/by-host',\n cancelled: '/anuladas',\n cancelRenewal: '/cancelar-renovacion',\n cancelSubscription: '/cancelar-suscripcion',\n changePassword: '/cambiar-contrasena',\n accountSecurity: '/seguridad-de-cuenta',\n checkDomainAvailability: '/check-domain-availability',\n courses: '/cursos',\n createEmail: '/crear-cuenta-de-correo',\n creditcard: '/gestionar-tarjeta-credito',\n dns: '/cambiar-dns',\n domainConfig: 'configuracion-de-dominio',\n domaindetail: '/gestionar-dominio',\n domainRegister: '/dominios',\n domains: '/dominios',\n emails: '/e-mails',\n emailsList: '/emails-list',\n emailsTitan: '/administrar',\n emailVerify: '/confirmar-correo-electronico',\n feedbackSite: '/feedback-sitio-web',\n filteredEmails: '/filtro-e-mails',\n goalsObjectives: '/metas-y-objetivos',\n help: '/soporte',\n helpRedirect: '/ayuda',\n home: '/',\n homeRedirect: '/inicio',\n hosting: '/web-hosting',\n invoices: '/facturas',\n manageSubscription: '/administar-suscripciones',\n myData: '/mis-datos',\n newSite: '/crear-sitio-web',\n onboarding: '/onboarding',\n paid: '/pagadas',\n persona: '/nivel-de-conocimiento',\n phoneVerify: '/confirmar-celular',\n productdetail: '/gestionar-producto',\n products: '/productos',\n retentionSubscriptionConfirm: '/confirmar-cancelacion',\n retentionSubscriptionOffer: '/ofrecer-beneficios',\n retentionSubscriptionOfferAfterQuestions: '/ofrecer-ventajas',\n retentionSubscription: '/suscripcion',\n retentionRenew: '/renovacion',\n retentionBenefit: '/beneficio',\n siteBuilder: 'creador-de-sitios',\n siteBuilderRedirectAccess: '/sso-site-builder',\n sites: '/mis-sitios-web',\n sitesCreate: '/crear-sitio-web',\n sitesPage: '/sitios-web',\n sitesPlans: '/sitios-web-y-planes',\n subscriptions: '/suscripciones',\n supportforms: '/abrir-ticket',\n createTicket: '/crear-ticket',\n ticket: '/soporte/ticket',\n titanHire: '/titan-hire-plan',\n titanHireFreePlan: '/titan-hire-free-plan',\n titanHirePlan: '/titan-hire-free-plan',\n titanHirePlanActiveCPanel: '/titan-hire-plan-active-cpanel',\n titanInboxUpgrade: '/titan-inbox-upgrade',\n titanUpgrade: '/titan-upgrade',\n unpaid: '/pendientes',\n upgrade: '/upgrade',\n whmRedirectAccess: '/sso-whm-access',\n dnsWizard: '/dns-wizard',\n backup: '/backup',\n linkNaBio: '/enlace-en-la-bio',\n wizard: 'wizard',\n dataAnalysis: 'analisis-de-datos',\n cloudflare: '/cloudflare',\n};\n","export default {\n billing: '/facturas',\n byHost: '/by-host',\n cancelled: '/anuladas',\n cancelRenewal: '/cancelar-renovacion',\n cancelSubscription: '/cancelar-suscripcion',\n changePassword: '/cambiar-contrasena',\n accountSecurity: '/seguridad-de-cuenta',\n checkDomainAvailability: '/check-domain-availability',\n courses: '/cursos',\n createEmail: '/crear-cuenta-de-correo',\n creditcard: '/gestionar-tarjeta-credito',\n dns: '/cambiar-dns',\n domainConfig: 'configuracion-de-dominio',\n domaindetail: '/gestionar-dominio',\n domainRegister: '/dominios',\n domains: '/dominios',\n emails: '/e-mails',\n emailsList: '/emails-list',\n emailsTitan: '/administrar',\n emailVerify: '/confirmar-correo-electronico',\n feedbackSite: '/feedback-sitio-web',\n filteredEmails: '/filtro-e-mails',\n goalsObjectives: '/metas-y-objetivos',\n help: '/soporte',\n helpRedirect: '/ayuda',\n home: '/',\n homeRedirect: '/inicio',\n hosting: '/web-hosting',\n invoices: '/facturas',\n manageSubscription: '/administar-suscripciones',\n myData: '/mis-datos',\n newSite: '/crear-sitio-web',\n onboarding: '/onboarding',\n paid: '/pagadas',\n persona: '/nivel-de-conocimiento',\n phoneVerify: '/confirmar-celular',\n productdetail: '/gestionar-producto',\n products: '/productos',\n retentionSubscriptionConfirm: '/confirmar-cancelacion',\n retentionSubscriptionOffer: '/ofrecer-beneficios',\n retentionSubscriptionOfferAfterQuestions: '/ofrecer-ventajas',\n retentionSubscription: '/suscripcion',\n retentionRenew: '/renovacion',\n retentionBenefit: '/beneficio',\n siteBuilder: 'creador-de-sitios',\n siteBuilderRedirectAccess: '/sso-site-builder',\n sites: '/mis-sitios-web',\n sitesCreate: '/crear-sitio-web',\n sitesPage: '/sitios-web',\n sitesPlans: '/sitios-web-y-planes',\n subscriptions: '/suscripciones',\n supportforms: '/abrir-ticket',\n createTicket: '/crear-ticket',\n ticket: '/soporte/ticket',\n titanHire: '/titan-hire-plan',\n titanHireFreePlan: '/titan-hire-free-plan',\n titanHirePlan: '/titan-hire-free-plan',\n titanHirePlanActiveCPanel: '/titan-hire-plan-active-cpanel',\n titanInboxUpgrade: '/titan-inbox-upgrade',\n titanUpgrade: '/titan-upgrade',\n unpaid: '/pendientes',\n upgrade: '/upgrade',\n whmRedirectAccess: '/sso-whm-access',\n dnsWizard: '/dns-wizard',\n backup: '/backup',\n linkNaBio: '/enlace-en-la-bio',\n wizard: 'wizard',\n dataAnalysis: 'analisis-de-datos',\n cloudflare: '/cloudflare',\n};\n","/* eslint-disable react/jsx-curly-brace-presence */\nimport React from 'react';\nimport {\n BACKUP_INFO, WOOCOMMERCE_ARTICLE, DNS_PROPAGATION_ARTICLE, FIND_PLAN_DNS_ARTICLE, GET_A_NEW_DOMAIN,\n} from '@/config/urls/supportUrls';\nimport { PROPAGATION_STATUS } from '@/enums/domains/domains.enum';\nimport { PLATFORM_NAMES } from '@/enums/domains/dns.enum';\nimport {\n Link, IconCheck, IconClock, IconDanger, Button,\n} from 'gatorcomponents';\n\nexport default {\n wizard: {\n isActivated: 'Você já possui um Criador de Sites ativo para este domínio. Selecione a opção abaixo para acessar o gerenciamento do seu Criador de Sites',\n access: 'Acessar criador de sites',\n domains: 'Domínios',\n activate: {\n title: 'Criador Sites',\n description: 'Ative a ferramenta Criador de Sites para seus domínios gratuitamente!',\n selectField: 'Selecione um domínio e clique em Ativar Criador de Sites',\n placeholder: 'dominio.com.br',\n manage: 'Gerenciar Criador de Sites',\n suspended: 'O plano de hospedagem não está ativo. Regularize seu plano para que possa ativar o Criador de Sites para novos domínios.',\n ready: 'Pronto, você já pode acessar seu criador de sites',\n },\n modalRemoveSite: {\n title: 'Excluir Site',\n message: 'Você tem certeza que deseja excluir o site <1>{{productName}} criado na ferramenta Criador de Sites?',\n warning: 'irá apagar tudo o que você já criou!',\n buttonConfirmation: 'SIM, QUERO EXCLUIR',\n },\n steps: {\n configurations: 'Configurações iniciais',\n about: 'Sobre o site',\n tools: 'Definir ferramenta de criação',\n tips: 'Dicas para começar',\n },\n about: {\n title: {\n 0: 'É hora de ',\n 1: 'definir o tipo e objetivo do seu site!',\n },\n subtitle: 'Com base em suas respostas vamos indicar a melhor ferramenta de criação :)',\n question: 'Qual tipo de site você deseja iniciar criando?',\n questionTooltip: 'Escolha o tipo mais próximo da sua necessidade e não se preocupe, depois você poderá criar outros tipos se desejar.',\n institucional: {\n title: 'Site institucional',\n subtitle: '(de uma empresa)',\n },\n personal: {\n title: 'Site pessoal ou portfólio',\n },\n blog: {\n title: 'Blog',\n },\n ecommerce: {\n title: 'Loja virtual',\n subtitle: '(e-commerce)',\n },\n landing: {\n title: 'Página de captação de clientes',\n subtitle: '(landing page)',\n },\n other: {\n title: 'Outro tipo de site',\n },\n objectives: {\n question: 'Selecione o objetivo principal que pretende alcançar com seu site:',\n tooltip: 'Mesmo que você tenha mais de um objetivo, escolha aquele que mais deseja alcançar no momento.',\n placeholder: 'Selecionar objetivo',\n defaultObjectives: {\n goodSite: 'Ter um bom site (bonito, rápido e seguro)',\n visibility: 'Visibilidade e divulgação da minha marca',\n access: 'Alto número de acessos no site',\n prospection: 'Prospecção e captação de clientes',\n results: 'Resultados financeiros',\n satisfaction: 'Satisfação dos meus clientes',\n other: 'Outro objetivo',\n },\n },\n othersSitesModal: {\n title: 'Qual outro tipo de site pretende criar?',\n placeholder: 'digitar tipo do site',\n back: 'Voltar',\n save: 'Salvar',\n },\n othersObjectivesModal: {\n title: 'Qual outro objetivo pretende alcançar com o site?',\n placeholder: 'digitar objetivo',\n back: 'Voltar',\n save: 'Salvar',\n },\n },\n tips: {\n createSites: {\n title: 'Tudo pronto para iniciar o site agora mesmo!',\n buttonLabel: 'Acessar Criador de Sites',\n altSubtitle: {\n 0: 'Abrimos o Criador de Sites em uma nova aba do seu navegador. Caso queira acessar novamente, utilize o atalho na página ',\n 1: 'Sites',\n 2: ' :)',\n },\n subtitleOne: 'Veja abaixo algumas ',\n subtitleTwo: 'dicas para você trabalhar o visual e o conteúdo do site!',\n hiddenInfo: 'Para uma melhor experiência crie o seu site em um computador.',\n },\n wordpress: {\n title: 'WordPress instalado com sucesso!',\n buttonLabel: 'Acessar WordPress',\n subtitle: 'Também encaminhamos para o e-mail de cadastro os dados de acesso a ferramenta :)',\n subtitleOne: 'Veja abaixo algumas ',\n subtitleTwo: 'dicas para você trabalhar o visual e o conteúdo do site!',\n hiddenInfo: 'Para uma melhor experiência crie o seu site em um computador.',\n },\n softaculous: {\n title: 'Parabéns, você já pode criar seu site usando o Softaculous!',\n subtitleOne: 'Veja abaixo algumas ',\n subtitleTwo: 'dicas para você trabalhar o visual e o conteúdo do site!',\n hiddenInfo: 'Para uma melhor experiência crie o seu site em um computador.',\n },\n asaasLoginBanner: {\n title: 'Acesse sua conta Asaas',\n description: 'Faça login direto na plataforma Asaas com o usuário e senha que enviamos para o seu e-mail de cadastro na plataforma.',\n button: 'Acessar minha conta Asaas',\n },\n dnsInProgressModal: {\n title: 'Seu domínio ainda está propagando',\n description: 'Seu domínio ainda está em período de propagação. Geralmente a propagação é rápida, mas pode ser que leve até 24 horas para que você possa usar a plataforma.',\n backButton: 'Voltar',\n continueButton: 'Tentar acessar mesmo assim',\n },\n },\n wordPressInstall: {\n defaultWordpressValue: 'Meu site',\n title: {\n 0: 'Antes de continuar, ',\n actionWoocommerce: 'precisamos instalar o WordPress e Woocommerce!',\n actionWordPress: 'precisamos instalar o WordPress!',\n },\n subtitle: 'Preencha os campos e grupos abaixo para então ter acesso a ferramenta e criar o site :)',\n info: {\n title: 'Informações úteis',\n description: 'Descreva o site e defina os dados de acesso ao painel do WordPress.',\n questions: {\n name: {\n label: 'Nome do site',\n placeholder: 'Nome da marca',\n tooltip: 'Informe o nome que você usará em seu site.',\n errorMessage: 'O campo deve ter no mínimo 3 caracteres.',\n },\n description: {\n label: 'Descrição do site',\n placeholder: 'Diga sobre o que é o site ou negócio',\n tooltip: 'Faça uma pequena descrição sobre o seu site, pode ser uma explicação sobre o que ele aborda, por exemplo.',\n },\n email: {\n label: 'E-mail',\n placeholder: 'E-mail de acesso ao WordPress',\n errorMessage: 'O e-mail digitado é inválido.',\n },\n user: {\n label: 'Usuário',\n placeholder: 'Usuário de acesso ao WordPress',\n },\n password: {\n label: 'Senha',\n placeholder: 'Crie uma senha',\n },\n confirmPassword: {\n label: 'Confirmar senha',\n placeholder: 'Confirme a senha',\n },\n },\n passwordChecklistTexts: {\n description: 'A senha deve ter:',\n hasLowerAndUpperCase: 'Incluir caracteres maiúsculos e minúsculos',\n hasNumber: 'Incluir pelo menos 1 número',\n hasSymbol: 'Incluir pelo menos 1 símbolo',\n hasAtLeastEight: 'Ter pelo menos 8 caracteres',\n matchConfirmation: 'Ser a mesma em ambos os campos',\n },\n userChecklistTexts: {\n description: 'O usuário deve:',\n hasAtLeastEight: 'Ter pelo menos 8 caracteres',\n hasAtLeastFour: 'Ter pelo menos 4 caracteres',\n notHaveSymbol: 'Não conter nenhum símbolo (exemplo: !#$%&)',\n },\n nextStepButton: 'Ver abaixo as opções para o tema do site',\n },\n theme: {\n title: 'Escolher tema do site',\n description: 'Veja alguns temas ideais para o site e escolha o que possui a composição que mais lhe agrada.',\n tooltip: 'Você pode alterar imagens, cores e textos dos temas, para combinar com o assunto do seu negócio.',\n see: 'Visualizar tema',\n use: 'Usar tema',\n selected: 'Selecionado',\n nextStepButton: 'Ver abaixo as opções de plugins para adicionar ao site',\n },\n plugin: {\n title: 'Escolher plugins',\n optional: ' (Opcional)',\n description: 'Separamos alguns plugins populares para você. Selecione todos os que desejar usar junto com o WordPress.',\n tooltip: 'Plugins servem para melhorar o site e possibilitam aplicar diferentes funcionalidades a ele. Dentro da ferramenta será possível instalar estes e vários outros.',\n use: 'Usar plugin',\n selected: 'Selecionado',\n nextStepButton: 'Finalizar e instalar WordPress',\n nextStepButtonWithAsaas: 'Ver abaixo opção de adicionar gerenciador de pagamentos',\n descriptions: {\n elementor: 'Com esse plugin é possível criar de maneira fácil e rápida, arrastando e soltando os componentes que desejar para construir o seu site.',\n contactForm: 'Facilite a comunicação do cliente com a sua marca por meio de formulários de contato personalizados.',\n jivoChat: 'Converse e monitore visitantes em tempo real por chat online, Facebook Messenger, telefone e e-mail.',\n googleKit: 'Use um kit com a melhores ferramentas do Google para capitar informações e insights sobre o seu site de maneira centralizada. Você terá acesso ao Analytics, Adsense, dentre outros.',\n yoast: 'Facilite o cliente encontrar o seu site na internet. Use esse plugin para melhorar o ranqueamento nas ferramentas de busca como o Google.',\n },\n },\n asaas: {\n title: 'Receber por Pix, cartões e boleto',\n optional: ' (Opcional)',\n description: 'Instale um gerenciador de pagamentos para receber dos seus clientes, com as menores taxas do mercado.',\n },\n installModal: 'Estamos instalando o WordPress...',\n errorToast: 'Ocorreu um erro inesperado, tente novamente mais tarde',\n },\n wondersuite: {\n features: {\n items: {\n 0: {\n icon: 'myAccount',\n title: 'Página Minha Conta',\n description: 'Crie experiências personalizadas para seus clientes',\n },\n 1: {\n icon: 'cart',\n title: 'Carrinho customizado',\n description: 'Ofereça ofertas customizadas no checkout da sua loja, com soluções como “compre junto”',\n },\n 2: {\n icon: 'filters',\n title: 'Filtros personalizados',\n description: 'Permita que seus clientes selecionem produtos por cor, tamanho, preço, categoria e mais',\n },\n 3: {\n icon: 'wishlist',\n title: 'Lista de Desejos',\n description: 'Acompanhe o interesse dos seus clientes e faça as melhores ofertas',\n },\n 4: {\n icon: 'giftCertificate',\n title: 'Vale presentes',\n description: 'Aumente sua receita e conquiste novos clientes',\n },\n 5: {\n icon: 'schedules',\n title: 'Reservas e agendamentos',\n description: 'Gerencie aluguéis, reservas de viagem, estadias, locações e agendamentos de serviços',\n },\n },\n },\n tools: {\n title: 'Outras opções de ferramentas',\n toolsCards: {\n woocommerce: {\n title: 'E-commerce Padrão',\n description: () => 'Crie sua loja virtual utilizando a instalação padrão de WordPress + plugin WooCommerce',\n action: 'Experiência padrão WordPress',\n items: {\n 0: () => 'Assistente de configuração que permite que você crie uma loja customizada em poucos passos',\n 1: () => 'Pacote de plugins pré-instalados, com foco em fazer você ter sucesso online',\n 2: () => 'Temas personalizados e responsivos, para que você ofereça a melhor experiência para seus clientes',\n 3: () => 'Fácil integração com meios de pagamento e entrega',\n 4: () => 'Gerenciamento fácil de produtos e estoque via WooCommerce (plugin de loja online)',\n 5: () => 'Pacote de plugins de SEO, newsletter e comunicação pré-instalados e prontos para usar',\n },\n warning: 'A instalação padrão do WordPress + WooCommerce requer um pouco de conhecimento para um melhor uso. Mas não se preocupe, vamos conteúdos que podem te ajudar neste processo',\n },\n otherSite: {\n title: 'Outras ferramentas',\n description: () => (\n 'Esta e outras ferramentas você encontra no Softaculous (gerenciador de aplicativos da hospedagem). Nele você encontra mais informações sobre cada ferramenta'\n ),\n action: 'Ver ferramentas',\n items: {\n 0: () => (\n <>\n Indicado para soluções mais\n complexas \n \n ),\n 1: () => (\n <>\n Ideal para quem deseja criar\n um site personalizado \n \n ),\n },\n warning: 'As ferramentas exigem um pouco de conhecimento técnico para seu uso',\n },\n ecommercePlus: {\n title: 'E-commerce Plus',\n subtitle: 'Sua Loja Online absoluta para WooCommerce',\n tag: 'Produto adquirido',\n preList: 'Todos os recursos da versão padrão +',\n titleText: 'E-commerce Plus',\n description: () => (\n <>\n Configure sua loja online para o\n {' '}\n sucesso com a combinação perfeita de ferramentas WooCommerce, plugins YITH e orientação profissional. \n \n ),\n action: 'Utilizar E-commerce Plus',\n items: {\n 0: () => 'Plugins YITH premium para loja online, que vão transformar sua loja em uma máquina de vendas',\n 1: () => 'Personalização total da página Minha Conta, permitindo que você crie experiências únicas para seus clientes',\n 2: () => 'Criação de lista de desejos, para que você acompanhe o interesse dos seus clientes e faça as melhores ofertas',\n 3: () => 'Inserção de filtros personalizados, para que seus clientes possam selecionar seus produtos por cor, tamanho, preço, categoria e muito mais',\n 4: () => 'Criação de vales presente para aumentar a receita e conquistar novos clientes',\n 5: () => 'Criação de um sistema de reversas, locação ou agendamentos',\n },\n warning: 'Os plugins incluídos neste pacote possuem o selo de qualidade YITH, empresa especializada em soluções para personalizar o WooCommerce e permitir a criação de lojas de sucesso :)',\n },\n },\n },\n wondersuiteHeroBanner: {\n title: {\n 0: 'Indicamos o ',\n 1: 'E-commerce Plus ',\n 2: 'para você começar sua loja WooCommerce com confiança',\n },\n description: 'Construa, promova e comece a vender agora! Configure sua loja para o sucesso com a combinação perfeita de ferramentas WooCommerce, plugins profissionais YITH e criação de loja guiada.',\n tagLabel: 'TESTE GRÁTIS POR 14 DIAS',\n btnLabel: 'Experimente Grátis',\n btnGA: 'Oferta E-commerce Plus',\n assignValue: {\n 0: 'Após o período de teste de 14 dias, o valor da assinatura é de ',\n 1: 'R$ 24,99 ',\n 2: 'por mês',\n },\n wordpressExperience: 'Toda a experiência WordPress + WooCommerce + Yith',\n },\n },\n tools: {\n title: {\n 0: 'Indicamos a ferramenta ',\n ecommerce: ' para criar a loja virtual.',\n ecommercePlus: ' para criar sua loja online',\n institucional: ' para criar o site desejado.',\n personal: ' para criar o site desejado.',\n blog: ' para criar o site desejado.',\n landing: ' para criar o site desejado.',\n other: ' para criar o site desejado.',\n },\n subtitle: {\n ecommerce: 'Essa é a melhor opção para quem deseja criar uma loja online, mas você também pode escolher uma outra ferramenta.',\n ecommercePlus: 'Você já adquiriu o WooPremium para criar sua loja. Para iniciar, basta clicar no botão \"Ativar WooPremium\"',\n institucional: 'Se preferir, escolha outra opção apresentada abaixo :)',\n personal: 'Se preferir, escolha outra opção apresentada abaixo :)',\n blog: 'Se preferir, escolha outra opção apresentada abaixo :)',\n landing: 'Se preferir, escolha outra opção apresentada abaixo :)',\n other: 'Se preferir, escolha outra opção apresentada abaixo :)',\n },\n woocommerce: {\n title: 'WordPress + criar loja virtual ',\n 1: 'Milhares de plugins para customizar a loja online',\n 2: 'Diversos temas prontos e responsivos para diferentes tipos de negócios',\n 3: 'Solução ideal para integrar diversos sistemas de envio e de pagamento ',\n 4: onWoocommerceHelpMaterialClick => (\n <>\n Cadastre produtos e gerencie a loja com o \n \n onWoocommerceHelpMaterialClick()} target=\"_blank\" rel=\"noreferrer\">\n Woocommerce\n \n \n {' (plugin para venda online)'}\n \n ),\n 5: 'Ideal para quem deseja criar um site personalizado ',\n },\n warning: 'Essas ferramentas requerem um pouco de conhecimento para um melhor uso. Temos conteúdos que podem ajudar nesse processo :)',\n action: 'Escolher WordPress',\n },\n wordpress: {\n title: 'WordPress',\n titleText: 'WordPress',\n description: () => (\n <>\n Crie sua loja virtual utilizando a instalação padrão de WordPress + plugin WooCommerce\n \n ),\n items: {\n 0: () => (\n <>\n Indicado para\n {' '}\n soluções mais complexas \n \n ),\n 1: () => (\n <>\n Tempo de criação variável \n {' '}\n conforme nível de conhecimento e objetivo do site\n \n ),\n 2: () => (\n <>\n Milhares de temas prontos e responsivos \n {' '}\n para diferentes tipos de negócios\n \n ),\n 3: () => (\n <>\n Ideal para quem deseja\n {' '}\n criar um site personalizado \n \n ),\n 4: () => (\n <>\n Centenas de plugins \n {' '}\n para customizar o site\n \n ),\n },\n warning: 'Essa ferramenta requer um pouco de conhecimento para um melhor uso.',\n action: 'Escolher WordPress',\n },\n sitebuilder: {\n title: 'Criador de sites',\n titleText: 'Criador de sites',\n description: () => 'Crie um site em minutos, mesmo sem ter conhecimento técnico. É fácil e rápido.',\n items: {\n 0: () => (\n <>\n Indicado para\n {' '}\n soluções simples \n \n ),\n 1: () => (\n <>\n Crie seu site rapidamente \n \n ),\n 2: () => (\n <>\n Centenas de temas prontos e responsivos \n {' '}\n para diferentes tipos de negócios\n \n ),\n 3: () => (\n <>\n Fácil de usar, \n {' '}\n possui um guia para criar o site sem nenhum código\n \n ),\n 4: () => (\n <>\n Banco de imagem \n {' '}\n , repleto de fotos para tornar o site mais atrativo\n \n ),\n },\n action: 'Escolher Criador de sites',\n },\n otherCommerce: {\n title: 'Outras ferramentas',\n titleText: 'Outras ferramentas',\n description: 'Essas e outras ferramentas você encontra no Softaculous (gerenciador de aplicativos da hospedagem). Nele você encontra mais informações sobre cada ferramenta.',\n items: {\n 0: 'Indicado para soluções mais complexas ',\n 1: 'Ideal para quem deseja criar um site personalizado ',\n },\n otherIconLabel: 'Outros',\n warning: 'Essas ferramentas requerem um pouco de conhecimento para um melhor uso.',\n action: 'Ver ferramentas',\n },\n otherSite: {\n title: 'Outras ferramentas',\n titleText: 'Outras ferramentas',\n description: () => (\n <>\n Essas e outras ferramentas você encontra no Softaculous \n {' '}\n (gerenciador de aplicativos da hospedagem). Nele você encontra mais informações sobre cada ferramenta.\n \n ),\n items: {\n 0: () => (\n <>\n Indicado para\n {' '}\n soluções mais complexas \n \n ),\n 1: () => (\n <>\n Ideal para quem deseja criar\n {' '}\n um site personalizado \n \n ),\n },\n otherIconLabel: 'Outros',\n warning: 'Essas ferramentas requerem um pouco de conhecimento para um melhor uso.',\n action: 'Ver ferramentas',\n },\n icons: {\n other: 'Outros',\n },\n },\n actions: {\n continue: 'Continuar',\n backButton: 'Voltar',\n backHome: 'Ir para tela principal de Sites',\n showMore: 'Ver benefícios',\n showLess: 'Ver menos',\n },\n altSnappy: 'logotipo',\n altColorLine: 'linha colorida',\n configurationStep: {\n cloudflareAlert: 'Seu domínio estará protegido e guardado pela Cloudflare grátis no seu plano de hospedagem.',\n cloudflareTooltip: 'Ter o site na Cloudflare aumenta a velocidade de carregamento da página, o site fica protegido contra ataques e tem menor risco de ficar offline. Tudo isso gratuito no seu plano de hospedagem. Você pode desativar esta funcionalidade na página de \"Desempenho de Sites\".',\n title: 'Pronto para alcançar o ',\n titleStrong: 'sucesso online?',\n text: 'Inicie a criação do site agora mesmo!',\n selectText: 'Qual será o endereço do site?',\n selectPlaceholder: 'selecionar domínio ou subdomínio',\n wishOtherDomain: 'Quero usar outro domínio ou subdomínio',\n selectedPlan: 'Veja em qual plano de hospedagem o site ficará:',\n choosePlan: 'Escolher plano',\n mainDomain: 'Domínio principal: ',\n continue: 'Continuar',\n tooltipReplace: 'Caso você já tenha um site criado para esse domínio ao continuar ele será substituído.',\n tooltipSinglePlan: 'Seu site ficará hospedado no plano abaixo por ele ser seu único plano disponível ou por seu domínio já estar adicionado à ele.',\n hirePlanTitle: 'Você não tem um plano de hospedagem contratado e ativo.',\n hirePlanSubtitle: 'Para criar um novo site, clique no botão abaixo para contratar um plano agora mesmo!',\n hirePlanCta: 'Contratar hospedagem',\n registerDomainTitle: domain => `O domínio “${domain}” ainda não está registrado.`,\n registerDomainSubtitle: 'Para criar um novo site o domínio precisa estar registrado e ativo. Clique no botão abaixo para registrá-lo agora mesmo!',\n registerDomainCta: 'Registrar domínio',\n },\n useAnotherDomain: {\n title: 'Qual endereço deseja utilizar para o site?',\n subtitle: 'Digite abaixo, selecione a extensão e veja se está pronto para uso.',\n placeholder: 'Digite seu domínio ou subdomínio (ex: meudominio.com.br).',\n buttonLabel: 'Validar domínio',\n messageErrorBr: 'Domínio inválido! Não pode conter caracteres especiais (exceto hífen), iniciar e finalizar com hífen, conter apenas números ou ter mais de 26 caracteres.',\n messageError: 'Domínio inválido! Não pode conter caracteres especiais (exceto hífen), iniciar e finalizar com hífen, conter apenas números ou ter mais de 63 caracteres.',\n tldMessageError: 'Não foi possível adicionar o domínio informado ao seu plano. Tente novamente mais tarde, ou entre em contato com o suporte.',\n selectText: 'Qual será o endereço do site?',\n },\n modalNotRegistered: {\n title: 'Validação de domínio',\n domain: 'O domínio ',\n noRegister: ' ainda não está registrado.',\n registerNow: 'Aproveite e registre agora mesmo',\n otherDomain: 'ou volte e indique outro domínio.',\n wishKeep: 'Se desejar, continue com a criação do site sem registrar o domínio, ',\n notAvailable: 'mas ao publicá-lo ele não estará disponível para acesso online.',\n backButton: 'Voltar',\n continueButton: 'Continuar criando o site',\n },\n modalRegistered: {\n title: 'Validação de domínio',\n domain: 'O domínio ',\n registered: ' já está registrado em outro provedor.',\n isCorrect: 'O endereço está correto?',\n continue: ' Se sim, continue criando o novo site :)',\n incorrect: 'Caso não seja seu ou esteja incorreto, volte e indique outro domínio.',\n backButton: 'Voltar',\n continueButton: 'Continuar criando o site',\n },\n planLimit: {\n title: 'Seu plano de hospedagem atual já chegou no limite de sites!',\n text: 'Para criar um novo site você precisa mudar para um plano maior ou comprar outro.',\n changePlan: 'Alterar plano de hospedagem',\n buyOtherPlan: 'Comprar outro plano',\n },\n modalUpgradePlan: {\n title: 'Qual plano de hospedagem você deseja alterar?',\n subtitle: 'Selecione em qual plano você gostaria de criar mais sites e veja as opções disponíveis.',\n buttonLabel: 'Ver planos disponíveis',\n domainDirector: 'Domínio principal: ',\n },\n modalChangePlan: {\n title: 'Em qual plano você deseja que o site fique?',\n subtitle: 'Selecione abaixo em qual plano de hospedagem o site ficará hospedado.',\n tooltip: 'Todo site precisa ficar hospedado em um plano. Na dúvida, selecione qualquer um abaixo. Listamos apenas os que estão ativos e aptos para criar novos sites.',\n mainDomain: 'Domínio principal: ',\n otherDomains: 'Outros domínios: ',\n noOtherDomains: 'Ainda não há outros domínios adicionados ao plano.',\n domains: ' domínios',\n domain: ' domínio',\n choosePlan: 'Escolher plano',\n },\n modalSelectDnsManual: {\n title: 'Agora falta você configurar o domínio',\n descriptionOne: 'Como o domínio ',\n descriptionTwo: ' não foi registrado aqui na HostGator, você precisa ir no outro provedor e apontar o DNS desse domínio para o seu plano de hospedagem daqui.',\n question: 'Onde o domínio foi registrado?',\n placeholder: 'selecionar provedor',\n labelButtonBack: 'Voltar',\n labelButtonKeep: 'Ver como configurar',\n },\n modalSelectDnsManualStep2: {\n title: 'Veja como configurar o domínio no outro provedor',\n description: 'Use as informações abaixo para configurar seu domínio (alterar DNS) no outro provedor e se necessário ',\n tutorialLink: 'veja como fazer essa configuração passo a passo:',\n replace: 'Substitua as informações de DNS atuais do outro provedor pelas da HostGator:',\n actualDns: 'DNS atual na ',\n hgDns: 'DNS da HostGator',\n server1: 'Servidor 1 (DNS):',\n server2: 'Servidor 2 (DNS):',\n goToHost: 'Ir para o outro provedor fazer a alteração de DNS',\n waitTime: 'Após a configuração acima, ',\n waitTimeStrong: 'a propagação de DNS do seu domínio pode levar até 24h.',\n warning: 'Se desejar, continue criando o site, mas saiba que ele não ficará online até que esta configuração esteja finalizada e propagada.',\n labelButtonBack: 'Voltar',\n labelButtonContinue: 'Continuar criando o site',\n copied: 'Copiado',\n },\n modalVerifyingSiteExist: {\n message: 'Estamos verificando se está tudo certo para você continuar...',\n },\n modalOverwrite: {\n title: 'Você já possui um site criado?',\n warningDomain: domain => (\n <>\n Caso você tenha um site criado para o domínio\n "\n {domain} \n ",\n ao avançar, você perderá todo o conteúdo publicado!\n \n ),\n warningLink: handleClickMaterials => (\n <>\n {'Você pode fazer uma '}\n cópia (backup) de segurança \n {' da sua hospedagem, ou avançar com a criação do seu novo site.'}\n \n ),\n checkboxLabel: 'Estou ciente e desejo continuar mesmo assim.',\n continueButtonLabel: 'Continuar criando o site',\n backButtonLabel: 'Voltar',\n },\n modalVerifiedOverwrite: {\n title: 'Você já possui um site criado para esse domínio',\n error: 'Ocorreu um erro inesperado, tente novamente mais tarde',\n warningDomain: domain => (\n <>\n Você já tem um site criado no domínio\n "\n {domain} \n ".\n Ao avançar para a criação de um novo site, você perderá todo o conteúdo já publicado! \n \n ),\n warningDomainWithDns: domain => (\n <>\n Você já tem um site criado no domínio\n "\n {domain} \n ".\n \n ),\n warningAboutDns: () => (\n <>\n Ao avançar para a criação de um novo site,\n {' '}\n você perderá todo o conteúdo já publicado e ainda vamos precisar atualizar a configuração desse domínio (registros de DNS). \n \n ),\n warningLink: handleClickMaterials => (\n <>\n Se desejar, faça antes uma\n cópia de segurança (backup) \n da sua hospedagem.\n \n ),\n checkboxLabel: 'Estou ciente da exclusão do conteúdo e desejo continuar mesmo assim.',\n continueButtonLabel: 'Continuar criando o site',\n backButtonLabel: 'Cancelar',\n },\n asaasBanner: {\n title: 'CRIE SUA CONTA DIGITAL COMPLETA COM ASAAS',\n chip: 'NOVO',\n description: {\n 0: 'Cobre por',\n 1: ' Pix, boleto, cartões ',\n 2: 'e gerencie tudo da sua loja online em um só lugar. Tenha as melhores taxas do mercado com a parceria Hostgator e Asaas.',\n },\n buttonLabel: 'Quero saber mais',\n },\n },\n configuration: {\n modal: {\n stepOne: {\n title: 'Configurar a DNS do domínio para a HostGator',\n description: ({ domain }) => (\n <>\n {'Como o domínio '}\n \n "\n {domain}\n "\n \n {' não foi registrado aqui na HostGator, você precisa ir no outro provedor e apontar o DNS desse domínio para o seu plano de hospedagem daqui.'}\n \n ),\n question: 'Onde o domínio foi registrado?',\n placeholder: 'selecionar provedor',\n labelButtonBack: 'Voltar',\n labelButtonKeep: 'Ver como configurar',\n },\n stepTwo: {\n title: 'Veja como configurar o domínio no outro provedor',\n description: 'Use as informações abaixo para configurar seu domínio (alterar DNS) no outro provedor e se necessário ',\n tutorialLink: 'veja como fazer essa configuração passo a passo:',\n replace: 'Substitua as informações de DNS atuais do outro provedor pelas da HostGator:',\n actualDns: 'DNS atual na ',\n hgDns: 'DNS da HostGator',\n server1: 'Servidor 1 (DNS):',\n server2: 'Servidor 2 (DNS):',\n goToHost: ({ provider }) => (`Ir para a ${provider}`),\n waitTime: () => (\n <>\n {'Após a configuração acima, a propagação de DNS do seu domínio pode levar até '}\n \n 24\n \n {' horas. '}\n Ler mais. \n \n ),\n otherProvider: {\n firstLine: () => (\n <>\n \n 1.\n \n {' Acesse o '}\n \n painel do seu outro provedor\n \n {' de hospedagem;'}\n \n ),\n secondLine: () => (\n <>\n \n 2.\n \n {' No domínio que deseja configurar (alterar DNS) para o seu plano aqui da HostGator, busque por “ '}\n \n Alterar DNS\n \n {' ou '}\n \n Alterar Servidores\n \n ” - se não achar, contate o suporte desse provedor;\n \n ),\n thirdLine: () => (\n <>\n \n 3.\n \n {' Na parte onde pede que você altere os “DNS / Servidores”, coloque os '}\n \n DNS do seu plano de hospedagem aqui da HostGator\n \n {' - Se necessário, '}\n veja como localizar \n .\n \n ),\n },\n labelButtonBack: 'Voltar para instruções',\n copied: 'Copiado',\n changesDone: 'Já fiz as alterações',\n failureDomainDns: link => (\n <>\n {'Tivemos um problema ao encontrar as '}\n informações de DNS do seu provedor atual. \n clique aqui e veja como fazer o passo a passo. \n \n ),\n failurePlanDns: link => (\n <>\n {'Tivemos um problema ao encontrar as '}\n informações de DNS da HostGator. \n clique aqui e veja como fazer o passo a passo. \n \n ),\n },\n stepThree: {\n title: 'Finalizando a configuração de domínio',\n description: 'Após realizar todas as alterações, acompanhe aqui o status de seu domínio.',\n },\n configuredDomainStatusTexts: {\n title: 'Alterações que você realizou:',\n description: externalDns => ({\n [PLATFORM_NAMES.registro_br]: 'DNS atual na Registro.br para DNS da Hostgator',\n [PLATFORM_NAMES.godaddy]: 'DNS atual na Godaddy para DNS da Hostgator',\n [PLATFORM_NAMES.locaweb]: 'DNS atual na Locaweb para DNS da Hostgator',\n [PLATFORM_NAMES.uolhost]: 'DNS atual na Uol Host para DNS da Hostgator',\n [PLATFORM_NAMES.kinghost]: 'DNS atual na Kinghost para DNS da Hostgator',\n })[externalDns] || 'DNS atual em outro provedor para DNS da Hostgator',\n buttonLabel: 'Verificar status do domínio',\n result: status => ({\n [PROPAGATION_STATUS.PROPAGATED]: (\n <>\n \n Propagado: \n {' A configuração do domínio aconteceu corretamente.'}\n
\n \n ),\n [PROPAGATION_STATUS.IN_PROGRESS]: (\n <>\n \n Em propagação: \n {' A configuração do domínio ainda está acontecendo e pode levar até '}\n 24 horas. \n
\n \n ),\n [PROPAGATION_STATUS.NOT_PROPAGATED]: (\n <>\n \n
\n Não propagado: \n {' A configuração do domínio ainda não foi encontrada. Mas fique tranquilo: pode levar algumas horas para a atualização na rede acontecer.'}\n
\n
\n {'Se já faz mais de 24 horas, verifique com seu provedor se a configuração foi feita corretamente. '}\n
\n
\n
\n Não propagado: \n {' A configuração do domínio ainda não foi encontrada. Mas fique tranquilo: pode levar algumas horas para a atualização na rede acontecer.'}\n
\n
\n {'Se já faz mais de 24 horas, verifique com seu provedor se a configuração foi feita corretamente. '}\n
\n
Sites: \n {` ${amount}`}\n \n );\n }\n },\n empty: 'Adquira uma hospedagem e domínio e dê o primeiro passo para criar seu site!',\n title: 'Listagem de sites',\n description: 'Veja os seus sites hospedados aqui na HostGator :)',\n createNewSiteButton: 'Criar site ou Loja virtual',\n seeMoreButton: 'Carregar mais sites',\n emptyState: 'Não encontramos nenhum site que corresponda aos filtros aplicados.',\n alerts: {\n financial: {\n isPending: {\n label: () => (\n \n Aguardando a compensação de pagamento das assinaturas \n
\n ),\n button: ({ handleClick, invoiceId }) => (\n handleClick(invoiceId)} testId=\"isPendingCta\" />\n ),\n },\n isInAnalysis: {\n label: () => (\n <>\n Estamos realizando a análise de segurança das assinaturas \n \n ),\n },\n isToDue: {\n label: () => (\n <>\n A fatura de renovação de Domínio e/ou Plano de Hospedagem já está disponível para pagamento \n \n ),\n button: ({ handleClick, invoiceId }) => (\n handleClick(invoiceId)} testId=\"isToDueCta\" />\n ),\n },\n isOverDue: {\n label: ({ daysForPayment }) => (\n <>\n {'Pendência financeira: '} \n {daysForPayment === 1 ? ` ${daysForPayment} dia para o site ficar fora do ar` : ` ${daysForPayment} dias para o site ficar fora do ar`}\n \n ),\n button: ({ handleClick, invoiceId }) => (\n handleClick(invoiceId)} testId=\"isOverDueCta\" />\n ),\n },\n isSuspended: {\n label: ({ daysForPayment }) => (\n <>\n {'Pendência financeira: '} \n {daysForPayment === 1 ? ` ${daysForPayment} dia para o site ser cancelado e ter seus arquivos excluídos` : ` ${daysForPayment} dias para o site ser cancelado e ter seus arquivos excluídos`}\n \n ),\n button: ({ handleClick, invoiceId }) => (\n handleClick(invoiceId)}\n testId=\"isSuspendedCta\"\n />\n ),\n subLabel: 'SITE FORA DO AR',\n },\n },\n propagation: {\n isExternalNotConfigured: {\n label: () => (\n <>\n {'Domínio ainda não configurado (alterado DNS): '} \n configure na empresa onde tem o domínio registrado e ativo\n \n ),\n button: () => (\n Domínio ainda não configurado (alterado DNS) \n \n ),\n button: ({ handleClick }) => (\n {'Domínio em propagação: '} \n Aguarde até 24h para a propagação do seu domínio\n \n ),\n },\n isPropagated: {\n label: () => (\n <>\n Domínio propagado \n \n ),\n },\n },\n ssl: {\n NOT_ACTIVE: {\n label: () => (\n <>\n {'SSL ainda não ativado: '} \n Configure o domínio primeiro e aguarde até 24h após a propagação para o SSL ficar ativo\n \n ),\n },\n IN_PROGRESS: {\n label: () => (\n <>\n {'SSL em processo de ativação: '} \n Ele será instalado automaticamente em até 24h após a propagação do domínio\n \n ),\n button: ({ handleClick }) => (\n SSL ativo \n \n ),\n },\n ACTIVATION_FAILED: {\n label: () => (\n <>\n {'Pendência SSL: '} \n Você precisa tomar alguma ação para que o SSL seja ativado\n \n ),\n button: ({ handleClick }) => (\n Seu site ainda não está monitorado com o SiteLock \n \n ),\n button: ({ handleClick }) => (\n Site monitorado com SiteLock \n \n ),\n },\n },\n },\n tags: {\n is_main_domain: 'Domínio principal',\n site_offline: 'Site fora do ar',\n },\n groupedPage: {\n alerts: {\n suspended: ({ history, invoicesUrl }) => (\n (\n <>\n {'Você possui um ou mais domínios expirados. Renove agora mesmo para que seus sites e e-mails não fiquem fora do ar. '}\n {groupMainDomain} \n .\n {' '}\n Caso já tenha pago, por favor aguarde.\n {' '}\n \n ),\n button: ({ handleClick }) => (\n {groupMainDomain} \n {` foi suspenso e os sites vinculados a ele estão fora do ar. Em ${daysForPayment} dias ele será cancelado e seus arquivos serão excluídos.`}\n \n ),\n button: ({ handleClick }) => (\n Domínio não registrado \n {': Este domínio ainda não foi adquirido. '}\n Domínio em propagação \n {': Aguarde até 24h para a propagação do seu domínio'}\n \n ),\n },\n },\n tagNew: 'Novo',\n },\n sslModal: {\n loading: 'Aguarde enquanto tentamos ativar o Certificado SSL. Este processo pode levar alguns minutos...',\n verifyPendencyLoading: 'Estamos verificando qual a pendência da ativação do Certificado SSL...',\n backButtonLabel: 'Voltar',\n\n domainNotRegistered: {\n domainNotRegisteredTitle: 'Domínio ainda não registrado',\n domainNotRegisteredDescription: ({ domain }) => (\n <>\n {'O domínio \"'}\n {domain} \n {'\" ainda não está registrado. '}\n Clique no botão abaixo para registrá-lo \n {', e depois que ele estiver ativo e propagado, o Certificado SSL será automaticamente ativado em até 24h.'}\n \n ),\n registerDomainButtonLabel: 'Registrar domínio',\n },\n externalDomainNotPointed: {\n externalDomainNotPointedTitle: 'O domínio não está configurado para a HostGator',\n externalDomainNotPointedDescription: ({ domain }) => (\n <>\n {'Vimos que o domínio \"'}\n {domain} \n {'\" está configurado para um provedor diferente da HostGator.'}\n {domain} \n {'\" não está configurado (DNS apontado) para o Plano de Hospedagem da HostGator.'}\n {domain} \n {'\" e por conta disso passará por um novo período de '}\n Certificado SSL será ativado automaticamente \n {' em até 24h.'}\n \n ),\n agreeButtonLabel: 'Estou ciente e concordo',\n pointingDnsLoading: 'Aguarde enquanto realizamos os ajustes...',\n\n keepInHgSuccessTitle: 'Ajustes realizados na Zona DNS',\n keepInHgSuccessDescription: ({ domain }) => (\n <>\n {'Os ajustes na Zona DNS do domínio \"'}\n {domain} \n {'\" foram realizados! Aguarde os prazos de propagação do domínio e de ativação do Certificado SSL.'}\n \n ),\n closeButton: 'Fechar',\n\n keepInHgErrorTitle: 'Não foi possível fazer os ajustes na Zona DNS',\n keepInHgErrorDescription: ({ domain }) => (\n <>\n {'Não foi possível realizar os ajustes na Zona DNS do domínio \"'}\n {domain} \n {'\". Clique no botão abaixo para abrir um chat com nossa equipe de Suporte para que possam verificar.'}\n \n ),\n cancelButtonLabel: 'Cancelar',\n openChatButtonLabel: 'Abrir chat',\n },\n keepInOtherHost: {\n keepInOtherHostTitle: 'Manter site e SSL em outro provedor',\n keepInOtherHostDescription: ({ domain }) => (\n <>\n {'Como você optou por manter o site e SSL do domínio \"'}\n {domain} \n {'\" configurados para outro provedor, a ativação do Certificado SSL através da HostGator não é possível. Sugerimos que você entre em contato com o Suporte dessa outra empresa.'}\n \n ),\n understoodButtonLabel: 'Entendi',\n },\n },\n\n autoSSL: {\n error: {\n title: 'Houve algum erro na ativação do SSL',\n description: domain => (\n <>\n Não foi possível ativar o Certificado SSL do domínio\n {' '}\n \n "\n {domain}\n "\n \n . Clique no botão abaixo para tentarmos ativar novamente.\n \n ),\n button: 'Tentar ativar novamente',\n },\n active: {\n title: 'Certificado SSL ativado com sucesso',\n description: domain => (\n <>\n O Certificado SSL do domínio\n {' '}\n \n "\n {domain}\n "\n \n {' '}\n foi ativado com sucesso!\n \n ),\n button: 'Fechar',\n },\n activation_error: {\n title: 'Não foi possível ativar o SSL',\n description: domain => (\n <>\n Não foi possível concluir a ativação do Certificado SSL do domínio\n {' '}\n \n "\n {domain}\n "\n \n ! Clique no botão abaixo para abrir um chat com nossa equipe de Suporte para que possam verificar.\n \n ),\n button: 'Abrir chat',\n cancel: 'Cancelar',\n },\n },\n },\n welcomeChecklistBanner: {\n header: {\n titleStart: userName => (`Olá, ${userName}! Vamos começar? 👋`),\n titleContinue: userName => (`Olá, ${userName}! Os seus projetos estão te aguardando! 😊`),\n titleFinish: 'Retorne ao checklist do seu projeto quando quiser 🐊✨',\n showChecklist: 'Mostrar checklist',\n hideChecklist: 'Ocultar checklist',\n dontShowThisBanner: 'Não quero mais ver este painel',\n descriptions: {\n start: 'Preparamos este guia para te auxiliar nos primeiros passos dos seus projetos.',\n continue: 'Nossos materiais foram selecionados para te ajudar a tirar a sua ideia do papel.',\n finish: 'Nosso guia estará sempre aqui para te auxiliar em todas as etapas do seu projeto.',\n },\n step: 'PASSO ',\n },\n blockMessage: 'Conclua o passo anterior para acessar o conteúdo e continuar.',\n dnsCard: {\n title: 'Configurar domínio e DNS',\n description1: (\n <>\n O domínio é o\n ponto de partida \n do seu projeto online, fundamental para fortalecer a sua marca na web.\n ),\n description2: 'Para garantir que seu site e e-mail funcionem de forma eficiente, certifique-se de que o domínio está configurado corretamente.',\n link1: {\n label: 'Verificar configuração do DNS',\n url: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360052823753-Como-saber-se-o-DNS-est%C3%A1-apontando-corretamente',\n },\n link2: {\n label: 'Configurar domínio registrado na HostGator',\n url: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000497973-Como-configurar-o-dom%C3%ADnio-alterar-DNS#HostGator',\n },\n link3: {\n label: 'Configurar domínio registrado externamente',\n url: 'https://suporte.hostgator.com.br/hc/pt-br/articles/6597512530331-Como-configurar-o-dom%C3%ADnio-alterar-DNS-em-outro-provedor-Registro-br-UOL-Host-GoDaddy-Locaweb-KingHost',\n },\n },\n emailCard: {\n title: 'Criar E-mail Profissional',\n description1: 'Reforce a credibilidade e o reconhecimento da sua marca ao se comunicar com clientes e parceiros. ',\n description2: (\n <>\n Crie endereços de e-mail ilimitados utilizando o seu domínio, como por exemplo\n vendas@seudominio.com.br. \n ),\n button: 'Criar contas de e-mail',\n link1: {\n label: 'Como usar o e-mail em plataformas externas (Gmail, Outlook e outros)',\n url: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000388014-Como-usar-o-e-mail-em-plataformas-externas-Gmail-Outlook-e-outros?utm_source=portal&utm_medium=passo2&utm_campaign=configurar-email-plataformas-externas&utm_id=checklist-br',\n },\n },\n createSiteCard: {\n title: 'Criar Site Profissional',\n description1: 'Crie um site que inspire confiança e profissionalismo aos seus visitantes, fortalecendo a reputação da sua marca ou projeto.',\n description2: 'Construa a sua presença online e expanda seu negócio. ',\n button: 'Criar site ou Loja virtual',\n link1: {\n label: 'Como criar um site em WordPress',\n url: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115001935813-Como-criar-um-site-em-WordPress-atrav%C3%A9s-do-Portal-do-Cliente',\n },\n link2: {\n label: 'Verificar certificado de segurança (SSL)',\n url: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115001963913-Ativa%C3%A7%C3%A3o-do-Certificado-SSL-gratuito-na-Hospedagem',\n },\n link3: {\n label: 'Dicas para criar uma Landing Page de sucesso',\n url: 'https://www.hostgator.com.br/guias/landing-page/',\n },\n },\n\n },\n cloudflareBanner: {\n title: 'Deixe seu site mais rápido e seguro com a CDN da Cloudflare',\n description: 'Acelere o tempo de carregamento do seu site, proporcionando uma experiência mais rápida e satisfatória para os seus visitantes grátis.',\n buttonCta: 'Ir para desempenho de sites',\n },\n\n infosLogoBuilder: {\n title: (\n <>\n {' '}\n Crie logos profissionais \n {' '}\n com nossa nova ferramenta! Experimente agora!\n \n ),\n description: 'Não sabe por onde começar a criar sua marca? Nossa nova ferramenta te guia passo a passo.',\n buttonCta: 'Conheça',\n },\n};\n","/* eslint-disable react/jsx-curly-brace-presence */\nimport React from 'react';\nimport {\n BACKUP_INFO, DNS_PROPAGATION_ARTICLE, WOOCOMMERCE_ARTICLE, FIND_PLAN_DNS_ARTICLE, GET_A_NEW_DOMAIN,\n} from '@/config/urls/supportUrls';\nimport { PLATFORM_NAMES } from '@/enums/domains/dns.enum';\nimport { PROPAGATION_STATUS } from '@/enums/domains/domains.enum';\nimport {\n Link, IconCheck, IconClock, IconDanger, Button,\n} from 'gatorcomponents';\n\nexport default {\n wizard: {\n isActivated: 'Ya tienes un creador de sitios activo para este dominio. Seleccione la opción a continuación para acceder a la administración de su Creador de sitios web',\n access: 'Acceda al Creador de Sitios',\n domains: 'Dominios',\n activate: {\n title: 'Creador de Sitios',\n description: '¡Active la herramienta Creador de Sitios para sus dominios de forma gratuita!',\n selectField: 'Seleccione un dominio y haga clic en Activar Creador de Sitios',\n placeholder: 'dominio.com',\n manage: 'Administrar Creador de Sitios',\n suspended: 'El plan de alojamiento tiene un estado diferente al activo. Regularice su plan para que pueda activar el Creador de sitios web para nuevos dominios.',\n ready: 'Ahora puede acceder al Creador de Sitios',\n },\n modalRemoveSite: {\n title: 'Eliminar sitio',\n message: '¿Está seguro de que desea eliminar el sitio web <1>{{productName}} creado en la herramienta Creador de sitios?',\n warning: '¡Borrará todo lo que hayas creado!',\n buttonConfirmation: 'Si, quiero eliminar',\n },\n steps: {\n configurations: 'Configuraciones iniciales',\n about: 'Sobre el sitio',\n tools: 'Definir herramienta de creación',\n tips: 'Consejos para comenzar',\n },\n about: {\n title: {\n 0: '¡Es hora de ',\n 1: 'definir el tipo y el propósito de su sitio web!',\n },\n subtitle: 'En base a sus respuestas le indicaremos la mejor herramienta de creación :)',\n question: '¿Qué tipo de sitio web quieres empezar a crear?',\n questionTooltip: 'Elija el tipo que más se acerque a sus necesidades y no se preocupe, después puede crear otros tipos si lo desea.',\n institucional: {\n title: 'Sitio institucional',\n subtitle: '(de una empresa)',\n },\n personal: {\n title: 'Sitio personal o portafolio',\n },\n blog: {\n title: 'Blog',\n },\n ecommerce: {\n title: 'Tienda en línea',\n subtitle: '(e-commerce)',\n },\n landing: {\n title: 'Página de adquisición de clientes',\n subtitle: '(landing page)',\n },\n other: {\n title: 'Otro tipo de sitio',\n },\n objectives: {\n question: 'Seleccione el objetivo principal que desea lograr con su sitio web:',\n tooltip: 'Aunque tengas más de un objetivo, elige el que más quieras alcanzar en este momento.',\n placeholder: 'Seleccionar objetivo',\n defaultObjectives: {\n goodSite: 'Tener un buen sitio web (Bonito, rápido y seguro)',\n visibility: 'Visibilidad y difusión de mi marca',\n access: 'Alto número de visitas en el sitio',\n prospection: 'Prospección y captación de clientes',\n results: 'Resultados financieros',\n satisfaction: 'Satisfacción de mis clientes',\n other: 'Otro objetivo',\n },\n },\n othersSitesModal: {\n title: '¿Qué otro tipo de sitio web quiere crear?',\n placeholder: 'digite el tipo de site',\n back: 'Volver',\n save: 'Guardar',\n },\n othersObjectivesModal: {\n title: '¿Qué otro objetivo pretende lograr con el sitio web?',\n placeholder: 'Digite el objetivo',\n back: 'Volver',\n save: 'Guardar',\n },\n },\n tips: {\n createSites: {\n title: '¡Todo listo para comenzar el sitio ahora mismo!',\n buttonLabel: 'Ingresar al creador de sitios',\n altSubtitle: {\n 0: 'Abrimos la herramienta Creador de Sitios en una nueva pestaña de su navegador. Si desea volver a ingresar nuevamente, use el acceso directo de la página de ',\n 1: 'Sitios web',\n 2: ' :)',\n },\n subtitleOne: '¡Vea a continuación algunos ',\n subtitleTwo: 'consejos para trabajar en la apariencia y el contenido del sitio!',\n hiddenInfo: 'Para una mejor experiencia crea tu sitio web en una computadora.',\n },\n wordpress: {\n title: '¡WordPress se instaló correctamente!',\n buttonLabel: 'Ingresar a WordPress',\n subtitle: 'También reenviamos los datos de acceso a la herramienta al correo electrónico de registro :)',\n subtitleOne: '¡Vea a continuación algunos ',\n subtitleTwo: 'consejos para trabajar en la apariencia y el contenido del sitio!',\n hiddenInfo: 'Para una mejor experiencia crea tu sitio web en una computadora.',\n },\n softaculous: {\n title: '¡Felicitaciones, usted ya puede crear su sitio web usando Softaculous!',\n subtitleOne: '¡Vea a continuación algunos ',\n subtitleTwo: 'consejos para instalar otros plugins en su sitio web!',\n hiddenInfo: 'Para una mejor experiencia crea tu sitio web en una computadora.',\n },\n dnsInProgressModal: {\n title: 'Su dominio aún se está propagando',\n description: 'Su dominio aún se encuentra en el período de propagación. Por lo general, la propagación es rápida, pero pueden tardar hasta 24 horas antes de que pueda usar la plataforma.',\n backButton: 'Volver',\n continueButton: 'Intentar ingresar de todos modos',\n },\n },\n wordPressInstall: {\n defaultWordpressValue: 'Mi sitio',\n title: {\n 0: 'Antes de continuar, ',\n actionWoocommerce: '¡necesitamos instalar WordPress y Woocommerce!',\n actionWordPress: ' ¡necesitamos instalar WordPress!',\n },\n subtitle: 'Complete los campos y grupos a continuación para luego tener acceso a la herramienta y crear un sitio web :)',\n info: {\n title: 'Informaciones útiles',\n description: 'Describa el sitio y configure los datos de acceso para el panel de WordPress.',\n questions: {\n name: {\n label: 'Nombre del Sitio Web',\n placeholder: 'Nombre de la marca',\n tooltip: 'Introduzca el nombre que utilizará en su sitio web.',\n errorMessage: 'El campo debe tener mínimo 3 caracteres.',\n },\n description: {\n label: 'Descripcion del Sitio Web',\n placeholder: 'Escriba de qué trata el sitio web o el negocio.',\n tooltip: 'Haz una breve descripción de tu sitio, puede ser una explicación de lo que cubre, por ejemplo.',\n },\n email: {\n label: 'Correo',\n placeholder: 'Correo electrónico de inicio de sesión de WordPress',\n errorMessage: 'El correo electrónico digitado no es válido.',\n },\n user: {\n label: 'Usuario',\n placeholder: 'Usuario de inicio de sesión de WordPress',\n errorMessage: 'El campo debe tener mínimo 8 caracteres.',\n errorMessageWithWondersuite: 'El campo debe tener mínimo 4 caracteres.',\n },\n password: {\n label: 'Contraseña',\n placeholder: 'Crea una contraseña',\n },\n confirmPassword: {\n label: 'Confirmar contraseña',\n placeholder: 'Confirme la contraseña',\n },\n },\n passwordChecklistTexts: {\n description: 'Tu nueva contraseña debe:',\n hasLowerAndUpperCase: 'Incluir caracteres en mayúsculas y minúsculas',\n hasNumber: 'Incluir al menos 1 número',\n hasSymbol: 'Incluir al menos 1 símbolo',\n hasAtLeastEight: 'Tener al menos 8 caracteres',\n matchConfirmation: 'Ser igual en ambos campos',\n },\n userChecklistTexts: {\n description: 'El usuario debe:',\n hasAtLeastEight: 'Tener al menos 8 caracteres',\n hasAtLeastFour: 'Tener al menos 4 caracteres',\n notHaveSymbol: 'No contener ningún símbolo (ejemplo: !#$%&)',\n },\n nextStepButton: 'Ver abajo las opciones para el tema del sitio',\n },\n theme: {\n title: 'Elegir el tema del sitio web',\n description: 'Vea algunas ideas para el sitio y elija la que tenga la composición que más le guste.',\n tooltip: 'Puede cambiar las imágenes, los colores y los textos de los temas para que combinen con el objetivo de su negocio.',\n see: 'Ver tema',\n use: 'Usar tema',\n selected: 'Seleccionado',\n nextStepButton: 'Ver abajo las opciones de plugins para agregar al sitio',\n },\n plugin: {\n title: 'Elegir plugins',\n optional: ' (Opcional)',\n description: 'Hemos seleccionado algunos plugins populares para usted. Seleccione todos los que quiera usar junto con WordPress.',\n tooltip: ' Los plugins sirven para mejorar el sitio y permiten aplicarle diferentes funcionalidades. Dentro de la herramienta será posible instalar estos y varios otros.',\n use: 'Usar plugin',\n selected: 'Seleccionado',\n nextStepButton: 'Finalizar y instalar Wordpress',\n descriptions: {\n elementor: 'Con este plugin, es posible crear de manera fácil y rápida, arrastrando y soltando los componentes que desee para crear su sitio web.',\n contactForm: 'Facilite la comunicación del cliente con su marca a través de formularios de contacto personalizados.',\n jivoChat: 'Hable y supervise los visitantes en tiempo real por el chat en línea, Facebook Messenger, teléfono y correo electrónico.',\n googleKit: 'Utilice un kit con las mejores herramientas de Google para capturar informaciones y perspectivas sobre su sitio de forma centralizada. Tendrá acceso a Analytics, Adsense, entre otros.',\n yoast: 'Facilite para el cliente encontrar su sitio web en Internet. Use este plugin para mejorar su clasificación en las herramientas de búsqueda como Google.',\n },\n },\n installModal: 'Estamos instalando WordPress...',\n errorToast: 'Ocurrió un error inesperado. inténtalo más tarde.',\n },\n wondersuite: {\n tools: {\n toolsCards: {\n woocommerce: {\n title: 'WordPress + plugin Woocommerce',\n titleText: 'WordPress + Woocommerce',\n description: () => null,\n items: {\n 0: () => (\n <>\n Ideal para\n {' '}\n crear una Tienda en línea \n \n\n ),\n 1: () => (\n <>\n Miles de plugins \n {' '}\n para personalizar la tienda online\n \n ),\n 2: () => (\n <>\n Diversos\n {' '}\n temas listos y receptivos \n {' '}\n para diferentes tipos de negocios\n \n ),\n 3: () => (\n <>\n Solución\n {' '}\n ideal para integrar diferentes sistemas de envío y pago \n \n ),\n 4: onWoocommerceHelpMaterialClick => (\n <>\n Registre productos y administre la tienda con \n \n onWoocommerceHelpMaterialClick()}\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n Woocommerce\n \n\n \n {' (plugin para venta online)'}\n \n ),\n 5: () => (\n <>\n Ideal para cualquier persona que quiera\n {' '}\n crear un sitio web personalizado \n \n ),\n },\n warning: 'Estas herramientas requieren un poco de conocimiento para un mejor uso. Tenemos contenido que puede ayudar en este proceso :)',\n action: 'Elegir WordPress',\n },\n otherSite: {\n title: 'Otras herramientas',\n titleText: 'Otras herramientas',\n description: () => (\n <>\n Estas y otras herramientas las puedes encontrar en Softaculos \n {' '}\n (administrador de aplicaciones de hospedaje). En el encontrarás más información sobre cada herramienta.\n \n ),\n items: {\n 0: () => (\n <>\n Indicado para\n {' '}\n soluciones más complejas. \n \n ),\n 1: () => (\n <>\n Ideal para cualquier persona que quiera\n {' '}\n crear un sitio web personalizado. \n \n ),\n },\n otherIconLabel: 'Otros',\n warning: 'Estas herramientas requieren un poco de conocimiento para un mejor uso.',\n action: 'Ver herramientas',\n },\n },\n },\n },\n tools: {\n title: {\n 0: 'Recomendamos la herramienta ',\n ecommerce: ' para crear la tienda en línea',\n institucional: ' para crear la tienda en línea',\n personal: ' para crear la tienda en línea',\n blog: ' para crear la tienda en línea',\n landing: ' para crear la tienda en línea',\n other: ' para crear la tienda en línea',\n },\n subtitle: {\n ecommerce: 'Esta es la mejor opción para quienes quieren crear una tienda en línea, pero también puede elegir otra herramienta.',\n institucional: 'Si prefiere, elija otra opción presenta a continuación :)',\n personal: 'Si prefiere, elija otra opción presenta a continuación :)',\n blog: 'Si prefiere, elija otra opción presenta a continuación :)',\n landing: 'Si prefiere, elija otra opción presenta a continuación :)',\n other: 'Si prefiere, elija otra opción presenta a continuación :)',\n },\n woocommerce: {\n title: 'WordPress + plugin Woocommerce',\n titleText: 'WordPress + Woocommerce',\n description: () => null,\n items: {\n 0: 'Ideal para crear una Tienda en línea ',\n 1: 'Miles de plugins para personalizar la tienda online',\n 2: 'Diversos temas listos y receptivos para diferentes tipos de negocios',\n 3: 'Solución ideal para integrar diferentes sistemas de envío y pago ',\n 4: onWoocommerceHelpMaterialClick => (\n <>\n Registre productos y administre la tienda con \n \n onWoocommerceHelpMaterialClick()}\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n Woocommerce\n \n\n \n {' (plugin para venta online)'}\n \n ),\n 5: 'Ideal para cualquier persona que quiera crear un sitio web personalizado ',\n },\n warning: 'Estas herramientas requieren un poco de conocimiento para un mejor uso. Tenemos contenido que puede ayudar en este proceso :)',\n action: 'Elegir WordPress',\n },\n wordpress: {\n title: 'WordPress',\n description: () => null,\n titleText: 'WordPress',\n items: {\n 0: () => (\n <>\n Indicado para\n {' '}\n soluciones más complejas \n \n ),\n 1: () => (\n <>\n Tiempo de creación variable \n {' '}\n según el nivel de conocimiento y el propósito del sitio\n \n ),\n 2: () => (\n <>\n\n Miles de temas listos para usar y receptivos \n {' '}\n para diferentes tipos de negocio\n \n ),\n 3: () => (\n <>\n Ideal para cualquier persona que quiera\n {' '}\n crear un sitio web personalizado \n \n ),\n 4: () => (\n <>\n Cientos de complementos \n {' '}\n para personalizar el sitio\n \n ),\n },\n warning: 'Esta herramienta requiere un poco de conocimiento para un mejor uso.',\n action: 'Elegir WordPress',\n },\n sitebuilder: {\n title: 'Creador de sitios web',\n description: () => null,\n titleText: 'Creador de sitios web',\n items: {\n 0: () => (\n <>\n Diseñado para\n {' '}\n soluciones simples \n \n ),\n 1: () => (\n <>\n Construya su sitio web rápidamente \n \n ),\n 2: () => (\n <>\n Cientos de temas listos para usar y receptivos \n {' '}\n para diferentes tipos de negocios\n \n ),\n 3: () => (\n <>\n Fácil de usar, \n {' '}\n tiene una guía para crear el sitio web sin ningún código\n\n \n ),\n 4: () => (\n <>\n Banco de imágenes \n {' '}\n lleno de fotos para hacer más atractivo el sitio web\n \n ),\n },\n action: 'Elegir el creador de sitios web',\n },\n otherCommerce: {\n title: 'Otras herramientas',\n titleText: 'Otras herramientas',\n description: () => (\n <>\n Estas y otras herramientas las puedes encontrar en Softaculos \n {' '}\n (administrador de aplicaciones de hospedaje). En el encontrarás más información sobre cada herramienta.\n \n ),\n items: {\n 0: 'Indicado para soluciones más complejas. ',\n 1: 'Ideal para cualquier persona que quiera crear un sitio web personalizado. ',\n },\n otherIconLabel: 'Otros',\n warning: 'Estas herramientas requieren un poco de conocimiento para un mejor uso.',\n action: 'Ver herramientas',\n },\n otherSite: {\n title: 'Otras herramientas',\n titleText: 'Otras herramientas',\n description: () => (\n <>\n Estas y otras herramientas las puedes encontrar en Softaculos \n {' '}\n (administrador de aplicaciones de hospedaje). En el encontrarás más información sobre cada herramienta.\n \n ),\n items: {\n 0: () => (\n <>\n Indicado para\n {' '}\n soluciones más complejas \n \n ),\n 1: () => (\n <>\n Ideal para cualquier persona que quiera\n {' '}\n crear un sitio web personalizado \n \n ),\n },\n otherIconLabel: 'Otros',\n warning: 'Estas herramientas requieren un poco de conocimiento para un mejor uso.',\n action: 'Ver herramientas',\n },\n icons: {\n other: 'Otros',\n },\n },\n actions: {\n continue: 'Continuar',\n backButton: 'Volver',\n backHome: 'Ir a la pantalla principal de Sitios web',\n showMore: 'Ver beneficios',\n showLess: 'Ver menos',\n },\n altSnappy: 'logo',\n altColorLine: 'línea de color',\n configurationStep: {\n cloudflareAlert: 'Su dominio será protegido y almacenado por cloudflare de forma gratuita en su plan de hospedaje.',\n cloudflareTooltip: 'Tener el sitio web en Cloudflare aumenta la velocidad de carga de la página, el sitio web está protegido de ataques y tiene un menor riesgo de quedarse offline. Todo esto es gratis en su plan de hospedaje. Puede desactivar esta función en la página \"Rendimiento del sitio\"',\n title: '¿Listo para lograr el ',\n titleStrong: 'éxito en línea?',\n text: '¡Empiece a crear su sitio web ahora mismo!',\n selectText: '¿Cuál será la dirección del sitio web?',\n selectPlaceholder: 'seleccionar dominio o subdominio',\n wishOtherDomain: 'Quiero usar otro dominio o subdominio',\n selectedPlan: 'Vea en cuál plan de Hosting estará el sitio web:',\n choosePlan: 'Elegir plan',\n mainDomain: 'Dominio principal: ',\n continue: 'Continuar',\n tooltipReplace: 'Si ya tiene un sitio creado para ese dominio, al continuar, será reemplazado.',\n tooltipSinglePlan: 'Su sitio web se alojará en el plan a continuación porque es su único plan disponible o porque su dominio ya está agregado a él. ',\n hirePlanTitle: 'Usted no tiene un plan de hospedaje contratado y activo.',\n hirePlanSubtitle: '¡Para crear un nuevo sitio web haga clic en el botón de abajo y contrate un plan ahora mismo!',\n hirePlanCta: 'Contratar Hospedaje',\n registerDomainTitle: domain => `El dominio \"${domain}\" aún no está registrado.`,\n registerDomainSubtitle: 'Para crear un nuevo sitio web, el dominio debe estar registrado y activo. ¡Haga clic en el botón de abajo para registrarlo ahora mismo!',\n registerDomainCta: 'Registrar dominio',\n },\n useAnotherDomain: {\n title: '¿Cuál dirección desea utilizar para el sitio?',\n subtitle: 'Digite abajo, seleccione la extensión y vea si está lista para usar.',\n placeholder: 'Digite su dominio o subdominio (ej: midominio.com)',\n buttonLabel: 'Validar dominio',\n messageError: '¡Dominio inválido! No puede contener caracteres especiales (excepto guiones), comenzar y terminar con guiones, contener solo números o tener más de 63 caracteres.',\n tldMessageError: 'El dominio informado no se pudo agregar a su plan. Inténtelo de nuevo más tarde o comuníquese con el soporte.',\n selectText: '¿Cuál será la dirección del sitio web?',\n },\n modalNotRegistered: {\n title: 'Validación de dominio ',\n domain: 'El dominio ',\n noRegister: ' aún no está registrado.',\n registerNow: 'Aproveche y regístrelo ahora mismo',\n otherDomain: 'o vuelva e indique otro dominio.',\n wishKeep: 'Si desea continuar con la creación del sitio sin registrar el dominio, ',\n notAvailable: 'cuando lo publique, no estará disponible para el acceso en línea.',\n backButton: 'Volver',\n continueButton: 'Continuar creando el sitio',\n },\n modalRegistered: {\n title: 'Validación de dominio ',\n domain: 'El dominio ',\n registered: ' ya está registrado con otro proveedor.',\n isCorrect: '¿La dirección es correcta? ',\n continue: ' Si es así, siga creando el nuevo sitio :)',\n incorrect: 'Si no es suyo o está incorrecto, vuelva e indique otro dominio.',\n backButton: 'Volver',\n continueButton: 'Continuar creando el sitio',\n },\n planLimit: {\n title: '¡Su plan de alojamiento actual ya alcanzó el límite de sitios!',\n text: 'Para crear un nuevo sitio web, es necesario cambiarse para un plan superior o comprar otro.',\n changePlan: 'Cambiar plan de Hosting',\n buyOtherPlan: 'Comprar otro plan',\n },\n modalUpgradePlan: {\n title: '¿Cuál plan de hosting quiere cambiar?',\n subtitle: 'Seleccione en qué plan le gustaría crear más sitios y vea las opciones disponibles.',\n buttonLabel: 'Ver planes disponibles',\n domainDirector: 'Dominio principal: ',\n },\n modalChangePlan: {\n title: '¿En cuál plan quiere que esté el sitio web?',\n subtitle: 'Seleccione a continuación en cuál plan de Hosting está alojado el sitio web.',\n tooltip: 'Todo sitio web debe estar alojado en un plan. En caso de duda, seleccione cualquiera disponible abajo. Solo enumeramos aquellos que están activos y aptos para crear nuevos sitios.',\n mainDomain: 'Dominio principal: ',\n otherDomains: 'Otros dominios: ',\n noOtherDomains: 'Aún no hay otros dominios agregados al plan.',\n domains: ' dominios',\n domain: ' dominio',\n choosePlan: 'Elegir plan',\n },\n modalSelectDnsManual: {\n title: 'Ahora falta que configure el dominio',\n descriptionOne: 'Como el dominio ',\n descriptionTwo: ' no se registró aquí en HostGator, debe ir al otro proveedor y apuntar el DNS de ese dominio para su plan de hosting con nosotros.',\n question: '¿Donde el dominio fue registrado?',\n placeholder: 'seleccionar proveedor',\n labelButtonBack: 'Volver',\n labelButtonKeep: 'Ver cómo configurar',\n },\n modalSelectDnsManualStep2: {\n title: 'Vea cómo configurar el dominio en otro proveedor',\n description: 'Utilice la siguiente información para configurar su dominio (cambiar DNS) en otro proveedor y, si es necesario, ',\n tutorialLink: 'vea cómo hacer esta configuración paso a paso:',\n replace: 'Sustituya las informaciones de DNS actuales del otro proveedor por las de Hostgator:',\n actualDns: 'DNS actual en ',\n hgDns: 'DNS de HostGator',\n server1: 'Servidor 1 (DNS):',\n server2: 'Servidor 2 (DNS):',\n goToHost: 'Ir al otro proveedor para hacer el cambio de DNS',\n waitTime: 'Después de la configuración anterior, ',\n waitTimeStrong: 'la propagación de DNS de su dominio puede demorar hasta 24 horas.',\n warning: 'Si desea, continúe creando el sitio, pero tenga en cuenta que no estará en línea hasta que esta configuración esté finalizada y propagada.',\n labelButtonBack: 'Volver',\n labelButtonContinue: 'Continuar creando el sitio',\n copied: 'Copiado',\n },\n modalVerifyingSiteExist: {\n message: 'Estamos comprobando que todo está bien para que pueda continuar...',\n },\n modalOverwrite: {\n title: '¿Ya tiene un sitio web creado?',\n warningDomain: domain => (\n <>\n Si tiene un sitio web creado para el dominio\n "\n {domain} \n ",\n al avanzar, ¡perderá todo el contenido publicado!\n \n ),\n warningLink: handleClickMaterials => (\n <>\n {'Usted puede hacer una '}\n copia de seguridad (backup) \n {' de su hosting, o avanzar con la creación de su sitio web.'}\n \n ),\n checkboxLabel: 'Soy consciente y quiero continuar de todos modos',\n continueButtonLabel: 'Continuar creando el sitio web',\n backButtonLabel: 'Volver',\n },\n modalVerifiedOverwrite: {\n title: 'Ya tiene un sitio web creado para ese dominio',\n warningDomain: domain => (\n <>\n Ya tiene un sitio web creado en el dominio\n "\n {domain} \n ".\n Al avanzar para la creación de un nuevo sitio web, ¡perderá todo el contenido publicado! \n \n ),\n warningDomainWithDns: domain => (\n <>\n Ya tiene un sitio web creado en el dominio\n "\n {domain} \n ".\n \n ),\n warningAboutDns: () => (\n <>\n Al avanzar para la creación de un nuevo sitio web,\n {' '}\n perderá todo el contenido ya publicado y aún tendremos que actualizar la configuración de ese dominio (registros DNS). \n \n ),\n warningLink: handleClickMaterials => (\n <>\n Si lo desea, realice primero una\n copia de seguridad (backup) \n de su hosting.\n \n ),\n checkboxLabel: 'Comprendo que se eliminará el contenido y deseo continuar de todos modos.',\n continueButtonLabel: 'Continuar creando el sitio',\n backButtonLabel: 'Cancelar',\n },\n },\n configuration: {\n modal: {\n stepOne: {\n title: 'Configurar el DNS de dominio para HostGator',\n description: ({ domain }) => (\n <>\n {'Debido a que el dominio '}\n \n "\n {domain}\n "\n \n {' no se registró aquí en HostGator, debe ir al otro proveedor y apuntar el DNS de ese dominio para su plan de hosting con nosotros.'}\n \n ),\n question: '¿Donde el dominio fue registrado?',\n placeholder: 'seleccionar proveedor',\n labelButtonBack: 'Volver',\n labelButtonKeep: 'Ver cómo configurar',\n },\n stepTwo: {\n title: 'Vea cómo configurar el dominio en otro proveedor',\n description: 'Utilice la siguiente información para configurar su dominio (cambiar DNS) en otro proveedor y, si es necesario, ',\n tutorialLink: 'vea cómo hacer esta configuración paso a paso:',\n replace: 'Sustituya las informaciones de DNS actuales del otro proveedor por las de Hostgator:',\n actualDns: 'DNS actual en ',\n hgDns: 'DNS de HostGator',\n server1: 'Servidor 1 (DNS):',\n server2: 'Servidor 2 (DNS):',\n goToHost: ({ provider }) => (`Ir a la ${provider}`),\n waitTime: () => (\n <>\n {' Después de la confirmación anterior, la propagación de DNS de su dominio puede demorar hasta '}\n \n 24\n \n {' horas. '}\n Leer más. \n \n ),\n otherProvider: {\n firstLine: () => (\n <>\n \n 1.\n \n {' Acceda al panel de su otro proveedor de alojamiento; '}\n \n panel de su otro proveedor\n \n {' de alojamiento;'}\n \n ),\n secondLine: () => (\n <>\n \n 2.\n \n {' En el dominio que desea configurar (cambiar DNS) para su plan aquí con HostGator, busque ”'}\n \n Cambiar DNS\n \n {' o '}\n \n Cambiar Servidores\n \n ” - si no los encuentra, comuníquese con el soporte de ese proveedor;\n \n ),\n thirdLine: () => (\n <>\n \n 3.\n \n {' En la parte donde le pide para cambiar los ”DNS / Servidores”, coloque los '}\n \n DNS de su plan de Hosting aquí con HostGator\n \n {' - Si es necesario, '}\n vea como encontrarlo. \n .\n \n ),\n },\n labelButtonBack: 'Volver a las instrucciones',\n copied: 'Copiado',\n changesDone: 'Ya hice los cambios',\n failureDomainDns: link => (\n <>\n {'Tuvimos un problema para encontrar las '}\n informaciones de DNS de su proveedor actual. \n haga clic aquí y vea como realizar el paso a paso. \n \n ),\n failurePlanDns: link => (\n <>\n {'Tuvimos un problema para encontrar las '}\n informaciones de DNS de HostGator. \n haga clic aquí y vea como realizar el paso a paso. \n \n ),\n },\n stepThree: {\n title: 'Finalizando la configuración del dominio',\n description: 'Después de realizar todos los cambios, acompañe el status de su dominio aquí.',\n },\n configuredDomainStatusTexts: {\n title: 'Cambios que ha realizado:',\n description: externalDns => ({\n [PLATFORM_NAMES.registro_br]: 'DNS actual en Registro.br para DNS de Hostgator',\n [PLATFORM_NAMES.godaddy]: 'DNS actual en GoDaddy para DNS de Hostgator',\n [PLATFORM_NAMES.locaweb]: 'DNS actual en Locaweb para DNS de Hostgator',\n [PLATFORM_NAMES.uolhost]: 'DNS actual en Uol Host para DNS de Hostgator',\n [PLATFORM_NAMES.kinghost]: 'DNS actual en Kinghost para DNS de Hostgator',\n })[externalDns] || 'DNS actual en otro proveedor para DNS de Hostgator',\n buttonLabel: 'Verificar el status del dominio',\n result: status => ({\n [PROPAGATION_STATUS.PROPAGATED]: (\n <>\n \n Propagado: \n {' La configuración del dominio se realizó correctamente.'}\n
\n \n ),\n [PROPAGATION_STATUS.IN_PROGRESS]: (\n <>\n \n En propagación: \n {' La configuración de dominio todavía está sucediendo y puede tomar hasta '}\n {'24 horas. '} \n
\n \n ),\n [PROPAGATION_STATUS.NOT_PROPAGATED]: (\n <>\n \n
\n No propagado: \n {' La configuración del dominio aún no se ha encontrado. Pero tranquilo: puede llevar algunas horas para que la actualización en la red suceda.'}\n
\n
\n {'Si han pasado más de 24 horas, consulte con su proveedor para ver si la configuración se realizó correctamente. '}\n
\n
\n
\n No propagado: \n {' La configuración del dominio aún no se ha encontrado. Pero tranquilo: puede llevar algunas horas para que la actualización en la red suceda.'}\n
\n
\n {'Si han pasado más de 24 horas, consulte con su proveedor para ver si la configuración se realizó correctamente. '}\n
\n
Sites: \n {` ${amount}`}\n \n );\n }\n },\n empty: 'Adquiera un alojamiento y un dominio ¡y dé el primer paso para crear su sitio web!',\n title: 'Lista de Sitios',\n description: 'Vea sus sitios hospedados aquí en HostGator :)',\n createNewSiteButton: 'Crear sitio',\n seeMoreButton: 'Cargar más sitios',\n emptyState: 'No encontramos ningún sitio que coincida con los filtros aplicados.',\n alerts: {\n financial: {\n isPending: {\n label: () => (\n \n Esperando la compensación del pago de las suscripciones \n
\n ),\n button: ({ handleClick, invoiceId }) => (\n handleClick(invoiceId)} />\n ),\n },\n isInAnalysis: {\n label: () => (\n <>\n Estamos realizando el análisis de seguridad de las suscripciones \n \n ),\n },\n isToDue: {\n label: () => (\n <>\n La factura de renovación del Dominio y/o Plan de Hosting ya está disponible para su pago \n \n ),\n button: ({ handleClick, invoiceId }) => (\n handleClick(invoiceId)} />\n ),\n },\n isOverDue: {\n label: ({ daysForPayment }) => (\n <>\n {'Pendiente financiero: '} \n {daysForPayment === 1 ? ` ${daysForPayment} día para que el sitio web esté caído (offline)` : ` ${daysForPayment} días para que el sitio web esté caído (offline)`}\n \n ),\n button: ({ handleClick, invoiceId }) => (\n handleClick(invoiceId)} />\n ),\n },\n isSuspended: {\n label: ({ daysForPayment }) => (\n <>\n {'Pendiente financiero: '} \n {daysForPayment === 1 ? ` ${daysForPayment} día para que se cancele el sitio web y se eliminen sus archivos.` : ` ${daysForPayment} días para que se cancele el sitio web y se eliminen sus archivos.`}\n \n ),\n button: ({ handleClick, invoiceId }) => (\n handleClick(invoiceId)}\n />\n ),\n subLabel: 'SITIO WEB OFFLINE',\n },\n },\n propagation: {\n isExternalNotConfigured: {\n label: () => (\n <>\n {'Dominio aún no configurado (cambiar DNS): '} \n configure en la empresa donde tiene el dominio registrado y activo\n \n ),\n button: () => (\n Dominio aún no configurado (cambiar DNS) \n \n ),\n button: ({ handleClick }) => (\n {'Dominio en propagación: '} \n Espere hasta 24 horas para que su dominio se propague\n \n ),\n },\n isPropagated: {\n label: () => (\n <>\n Dominio propagado \n \n ),\n },\n },\n ssl: {\n NOT_ACTIVE: {\n label: () => (\n <>\n {'SSL aún no activado: '} \n Configure primero el dominio y espere hasta 24 horas después de la propagación para que el SSL se active\n \n ),\n },\n IN_PROGRESS: {\n label: () => (\n <>\n {'SSL en proceso de activación: '} \n Se instalará automáticamente dentro de las 24 horas posteriores a la propagación del dominio\n \n ),\n button: ({ handleClick }) => (\n SSL activo \n \n ),\n },\n ACTIVATION_FAILED: {\n label: () => (\n <>\n {'SSL pendiente: '} \n debe realizar alguna acción para que se active el SSL\n \n ),\n button: ({ handleClick }) => (\n {groupMainDomain} \n .\n {' '}\n Si ya ha pagado, por favor espere. Pagar factura\n {' '}\n \n ),\n button: ({ handleClick }) => (\n {groupMainDomain} \n {` fue suspendido y los sitios vinculados a él están caídos. En ${daysForPayment} días se cancelará y sus archivos serán eliminados..`}\n \n );\n }\n\n return (daysForPayment === 1\n ? `Su plan ha sido suspendido y los sitios vinculados a él están inactivos. En ${daysForPayment} día se cancelará y se eliminarán sus archivos. `\n : `Su plan ha sido suspendido y los sitios vinculados a él están inactivos. En ${daysForPayment} días se cancelará y se eliminarán sus archivos. `);\n },\n\n button: ({ handleClick }) => (\n Dominio no registrado \n {': Este dominio aún no ha sido adquirido. '}\n Dominio en propagación \n {': Espere hasta 24 horas para que su dominio se propague.'}\n \n ),\n },\n },\n tagNew: 'Nuevo',\n },\n sslModal: {\n loading: 'Espere mientras intentamos activar el Certificado SSL. Este proceso puede tardar unos minutos...',\n verifyPendencyLoading: 'Estamos comprobando cuál es la activación pendiente del Certificado SSL...',\n backButtonLabel: 'Volver',\n\n domainNotRegistered: {\n domainNotRegisteredTitle: 'Dominio aún no registrado',\n domainNotRegisteredDescription: ({ domain }) => (\n <>\n {'El dominio \"'}\n {domain} \n {'\" aún no está registrado. '}\n Haga clic en el botón de abajo para registrarlo \n {', y después de que esté activo y propagado, el Certificado SSL se activará automáticamente dentro de las 24 horas.'}\n \n ),\n registerDomainButtonLabel: 'Registrar dominio',\n },\n\n externalDomainNotPointed: {\n externalDomainNotPointedTitle: 'El dominio no está configurado para HostGator',\n externalDomainNotPointedDescription: ({ domain }) => (\n <>\n {'Vimos que el dominio \"'}\n {domain} \n {'\" está configurado para un proveedor diferente de HostGator.'}\n {domain} \n {'\" no está configurado (DNS apuntado) para el Plan de Alojamiento de HostGator.'}\n {domain} \n {'\" y por eso pasará por un nuevo período de '}\n Certificado SSL se activará automáticamente \n {' en hasta 24 horas.'}\n \n ),\n agreeButtonLabel: 'Estoy consciente y de acuerdo',\n pointingDnsLoading: 'Espere mientras realizamos los ajustes...',\n\n keepInHgSuccessTitle: 'Ajustes realizados en la Zona DNS',\n keepInHgSuccessDescription: ({ domain }) => (\n <>\n {'¡Los ajustes en la Zona DNS del dominio \"'}\n {domain} \n {'\" foram realizados! se han realizado! Espera los plazos de propagación del dominio y de activación del Certificado SSL.'}\n \n ),\n closeButton: 'Cerrar',\n\n keepInHgErrorTitle: 'No se pudo hacer los ajustes en la Zona DNS',\n keepInHgErrorDescription: ({ domain }) => (\n <>\n {'No se pudo realizar los ajustes en la Zona DNS del dominio \"'}\n {domain} \n {'\". Haz clic en el botón de abajo para abrir un chat con nuestro equipo de Soporte para que puedan verificar.'}\n \n ),\n cancelButtonLabel: 'Cancelar',\n openChatButtonLabel: 'Abrir chat',\n },\n keepInOtherHost: {\n keepInOtherHostTitle: 'Mantener sitio y SSL en otro proveedor',\n keepInOtherHostDescription: ({ domain }) => (\n <>\n {'Como has optado por mantener el sitio y SSL del dominio \"'}\n {domain} \n {'\" configurados para otro proveedor, la activación del Certificado SSL a través de HostGator no es posible. Sugerimos que te pongas en contacto con el Soporte de esa otra empresa.'}\n \n ),\n understoodButtonLabel: 'Entendido',\n },\n },\n\n autoSSL: {\n error: {\n title: 'Se ha producido un error al activar SSL',\n description: domain => (\n <>\n Hubo un error en la activación del SSL. No se pudo activar el Certificado SSL del dominio\n {' '}\n \n "\n {domain}\n "\n \n . Haz clic en el botón de abajo para intentar activarlo de nuevo\n \n ),\n button: 'Intentar activar de nuevo',\n },\n active: {\n title: 'Certificado SSL activado con éxito',\n description: domain => (\n <>\n ¡El Certificado SSL del dominio\n {' '}\n \n "\n {domain}\n "\n \n {' '}\n ha sido activado con éxito!\n \n ),\n button: 'Cerrar',\n },\n activation_error: {\n title: 'No se puede activar el SSL',\n description: domain => (\n <>\n ¡No fue posible completar la activación del certificado SSL para el dominio\n {' '}\n \n "\n {domain}\n "\n \n ! Haga clic en el botón de abajo para abrir un chat con nuestro equipo de soporte para que puedan comprobarlo.\n \n ),\n button: 'Abrir chat',\n cancel: 'Cancelar',\n },\n },\n },\n welcomeChecklistBanner: {\n header: {\n titleStart: userName => (`¡Hola, ${userName}! Vamos a empezar? 👋`),\n titleContinue: userName => (`¡Hola, ${userName}! ¡Sus proyectos le están esperando! 😊`),\n titleFinish: 'Vuelva a la lista de verificación de su proyecto cuando quiera 🐊✨',\n showChecklist: 'Mostrar checklist',\n hideChecklist: 'Ocultar checklist',\n dontShowThisBanner: 'No quiero ver más este panel',\n descriptions: {\n start: 'Preparamos esta guía para ayudarle en los primeros pasos de sus proyectos.',\n continue: 'Nuestros materiales fueron seleccionados para ayudarle a sacar su idea del papel.',\n finish: 'Nuestra guía siempre estará aquí para ayudarle en todas las etapas de su proyecto.',\n },\n step: 'PASO ',\n },\n blockMessage: 'Complete el paso anterior para acceder al contenido y continuar.',\n dnsCard: {\n title: 'Configurar dominio y DNS',\n description1: (\n <>\n El dominio es el\n punto de partida \n de su proyecto online, fundamental para fortalecer su marca en la web.\n ),\n description2: 'Para garantizar que su sitio web y su correo electrónico funcionen de manera eficiente, asegúrese de que su dominio esté configurado correctamente.',\n link1: {\n label: 'Verificar la configuración de DNS',\n url: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360053080651-C%C3%B3mo-saber-si-el-DNS-est%C3%A1-apuntando-correctamente?utm_source=portal&utm_medium=passo1&utm_campaign=verificar-dns&utm_id=checklist-es',\n },\n link2: {\n label: 'Configurar dominio registrado en HostGator',\n url: 'https://soporte-latam.hostgator.com/hc/es-419/articles/217236957-C%C3%B3mo-configurar-el-dominio-cambiar-DNS?utm_source=portal&utm_medium=passo1&utm_campaign=configurar-dominio&utm_id=checklist-es#portal',\n },\n link3: {\n label: 'Configurar dominio registrado externamente',\n url: 'https://soporte-latam.hostgator.com/hc/es-419/articles/6798006471067-C%C3%B3mo-configurar-el-dominio-cambiar-DNS-en-otro-proveedor-GoDaddy-Web-Empresa-Colombia-Hosting-Neubox-NIC-Chile?utm_source=portal&utm_medium=passo1&utm_campaign=configurar-dominio-externo&utm_id=checklist-es',\n },\n },\n emailCard: {\n title: 'Crear un Correo Electrónico Profesional',\n description1: 'Refuerce la credibilidad y el reconocimiento de su marca al comunicarse con clientes y socios. ',\n description2: (\n <>\n Cree direcciones de correo electrónico ilimitados usando su dominio, como por ejemplo\n vendas@tudominio.com. \n ),\n button: 'Crear cuentas de correo',\n link1: {\n label: 'Cómo utilizar el correo electrónico en plataformas externas (Gmail, Outlook y otros)',\n url: 'https://soporte-latam.hostgator.com/hc/es-419/articles/216721888-C%C3%B3mo-utilizar-el-correo-electr%C3%B3nico-en-plataformas-externas-Gmail-Outlook-y-otros?utm_source=portal&utm_medium=passo2&utm_campaign=configurar-email-plataformas-externas&utm_id=checklist-es',\n },\n },\n createSiteCard: {\n title: 'Crear un Sitio web Profesional',\n description1: 'Cree un sitio web que inspire confianza y profesionalismo para sus visitantes, fortaleciendo la reputación de su marca o proyecto.',\n description2: 'Construya su presencia online y expanda su negocio.',\n button: 'Crear sitio web o Tienda virtual',\n link1: {\n label: 'Cómo crear un sitio web en WordPress',\n url: 'https://soporte-latam.hostgator.com/hc/es-419/articles/217577968-C%C3%B3mo-crear-un-sitio-web-en-WordPress-a-trav%C3%A9s-del-Portal-del-Cliente?utm_source=portal&utm_medium=passo3&utm_campaign=criar-site-wordpress&utm_id=checklist-es',\n },\n link2: {\n label: 'Verificar el certificado de seguridad (SSL)',\n url: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360008274932-Activaci%C3%B3n-del-certificado-SSL-gratuito-en-Hosting?utm_source=portal&utm_medium=passo3&utm_campaign=ativacao-ssl&utm_id=checklist-es',\n },\n link3: {\n label: 'Consejos para crear una Landing Page con éxito',\n url: 'https://www.hostgator.mx/blog/como-crear-una-landing-page/?utm_source=portal&utm_medium=passo3&utm_campaign=dicas-criar-lading-page&utm_id=checklist-es',\n },\n },\n\n },\n cloudflareBanner: {\n title: 'Su sitio web más rápido y seguro con la CDN de Cloudflare',\n description: 'Acelere el tiempo de carga de su sitio web, proporcionando una experiencia más rápida y satisfactoria para sus visitantes de forma gratuita.',\n buttonCta: 'Ir a rendimiento del sitio',\n },\n\n infosLogoBuilder: {\n title: (\n <>\n \n ),\n description: '',\n buttonCta: '',\n },\n};\n","import esContent from './sites.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './sites.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './sites.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './sites.es';\n\nexport default {\n ...esContent,\n};\n","import sitesBR from './sites.br';\nimport sitesCL from './sites.cl';\nimport sitesCO from './sites.co';\nimport sitesMX from './sites.mx';\nimport sitesAR from './sites.ar';\n\nconst locales = {\n BR: sitesBR,\n CL: sitesCL,\n CO: sitesCO,\n MX: sitesMX,\n AR: sitesAR,\n};\n\nexport default locales;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedAlert.style';\n\nconst IconDetailedAlert = ({\n line = '#4a4a4a',\n color = '#FF9442',\n size = '40',\n testId = 'icon-alert',\n}) => (\n \n \n \n \n);\n\n\nexport default IconDetailedAlert;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedBrush.style';\n\nconst IconDetailedBrush = ({\n line = '#4a4a4a',\n color = '#FFCF00',\n size = '40',\n testId = 'icon-brush',\n}) => (\n \n \n \n \n \n \n \n \n \n\n \n);\n\n\nexport default IconDetailedBrush;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedProtection.style';\n\nconst IconDetailedProtection = ({\n line = '#4a4a4a',\n color = '#2E93EE',\n size = '40',\n testId = 'icon-protection',\n}) => (\n \n \n \n \n);\n\n\nexport default IconDetailedProtection;\n","import React from 'react';\nimport { IconDetailedAlert } from '@/icons/IconDetailedAlert';\nimport { IconDetailedBrush } from '@/icons/IconDetailedBrush';\nimport { IconDetailedProtection } from '@/icons/IconDetailedProtection';\n\nexport default {\n pageTitle: {\n 0: 'Proteja seu site ',\n 1: 'de ameaças cibernéticas com SiteLock',\n },\n description: 'A solução ideal para encontrar e corrigir ameaças ao seu site automaticamente.',\n listTitle: {\n 0: 'Contrate o ',\n 1: 'SiteLock Professional ',\n 2: 'e conte com:',\n },\n featureList: {\n 1: 'Proteção de até 100 páginas',\n 2: 'Selo de segurança do site',\n 3: 'Varreduras frequentes',\n 4: 'Remoção automática de malwares',\n 5: 'Verificação diária de FTP',\n 6: 'Verificação de edição de arquivos',\n 7: 'Monitoramento de blocklist',\n 8: 'E muito mais',\n },\n formTitle: 'Plano profissional',\n formDescription: 'Escolha seu domínio:',\n formFirstToggleLabel: 'Selecionar um domínio contratado com a HostGator',\n formSecondToggleLabel: 'Digitar outro domínio',\n formSecondTogglePlaceholder: 'Digitar seu domínio',\n cycleLabel: 'Selecione o ciclo:',\n selectePaymentLabel: 'Selecione a forma de pagamento:',\n cycleOptions: {\n annually: 'Anual',\n semiannually: 'Semestral',\n quarterly: 'Trimestral',\n monthly: 'Mensal',\n },\n cyclePer: {\n annually: '/ano',\n semiannually: '/semestre',\n quarterly: '/trimestre',\n monthly: '/mês',\n },\n toBePaid: 'Valor a pagar:',\n hgSiteLock: 'https://www.hostgator.com.br/sitelock',\n needMoreLabel: 'Precisa de um plano mais robusto? Confira opções no nosso site:',\n needMoreButtonText: 'Ver todos os planos SiteLock',\n detailsSectionTitle: () => (\n <>\n Mais de\n 12 milhões de sites \n contam com a proteção do SiteLock\n \n ),\n detailsSectionFirstSectionTitle: 'Proteja seu site, sua reputação e seus visitantes',\n detailsSectionFirstSectionDescription: () => (\n <>\n Não jogue com segurança do site. Existem muitas ameaças na internet, e prevenir ataques é a melhor opção para evitar prejuízos.
\n\n \n O SiteLock tem\n um ótimo custo-benefício \n , e protege seu site de ameaças cibernéticas maliciosas.\n
\n \n ),\n detailsSectionFirstSectionButtonLabel: 'Quero proteger meu site',\n detailsSectionSecondSectionTitle: 'Não importa o tamanho do seu site, segurança nunca é demais',\n detailsSectionSecondSectionDescription: () => (\n <>\n Com o SiteLock você não tem trabalho. Ele monitora e\n remove ameaças automaticamente \n e com extrema facilidade, evitando dores de cabeça.\n \n ),\n detailsSectionSecondSectionButtonLabel: 'Quero proteger meu site',\n discoveryTitle: 'Descubra como o SiteLock protege o seu site',\n benefits: () => [\n {\n icon: menores taxas do mercado \n {' e gerencia suas cobranças tudo em '}\n um só lugar. \n \n ),\n imageItems: [\n 'Cobre com Pix, Boleto e Cartões',\n 'Emissão de Notas Fiscais',\n 'Crie links para pagamento',\n 'Antecipe seus recebíveis',\n 'Atendimento 24h com a Asaas',\n 'E muito mais',\n ],\n form: {\n texts: {\n titleFirstStep: 'Abra sua conta grátis',\n descriptionFirstStep: () => (\n <>\n {'Informe os dados para '}\n abrir a sua conta no Asaas \n {' em poucos passos:'}\n \n ),\n questionDocument: 'Trabalho como:',\n placeholderName: 'Nome completo',\n placeholderMail: 'E-mail',\n placeholderBirthday: 'Data de nascimento',\n placeholderCep: 'CEP',\n placeholderCity: 'Cidade',\n placeholderStreet: 'Rua',\n placeholderDistrict: 'Bairro',\n placeholderNumber: 'Número',\n placeholderComplement: 'Complemento (Opcional)',\n placeholderCompanyType: 'Selecione o tipo da sua empresa:',\n placeholderMonthlyIncome: 'Qual sua renda mensal?',\n labelCPF: 'CPF',\n labelCNPJ: 'CNPJ',\n buttonLabel: 'Continuar',\n acceessAsaas: clickAction => (\n <>\n {'Já tem conta no Asaas? '}\n Fazer login \n .\n \n ),\n titleSecondStep: 'Dados principais',\n descriptionSecondStep: 'Agora, informe seus dados de endereço:',\n myCepLabel: 'Não sei meu CEP',\n myCepUrl: 'https://buscacepinter.correios.com.br/app/endereco/index.php',\n backButtonLabel: 'Voltar',\n agreementRadioLabel: 'Declaro que li e concordo com os ',\n agreementLinkLabel: 'Termos de uso do Asaas.',\n agreementUrl: 'https://ajuda.asaas.com/pt-BR/articles/102021-termos-e-condicoes-de-uso',\n successTitle: 'Conta criada com sucesso!',\n successDescription: () => (\n <>\n Nós enviamos para o seu\n e-mail de cadastro \n os dados de acesso para a sua conta, como\n login e senha. \n :)\n \n ),\n successButtonLabel: 'Acessar minha conta do Asaas',\n successButtonUrl: 'https://www.asaas.com/login/',\n failedTitle: 'O e-mail já possui uma conta Asaas',\n failedDescription: () => (\n <>\n Notamos que o seu e-mail já possui um cadastro no Asaas. Você pode tentar\n logar na conta já existente \n ou\n refazer o cadastro usando outra conta de e-mail. \n \n ),\n failedButtonBackLabel: 'Refazer cadastro',\n failedButtonLoginLabel: 'Logar no site do Asaas',\n articlesTitle: 'Quer saber mais? Confira os conteúdos da Central de Ajuda:',\n articlesTitleHelp: 'Precisa de ajuda? Confira os conteúdos da nossa Central:',\n articles: [\n {\n label: 'Primeiros passos com Asaas',\n link: FIRST_STEP_ASAAS_ARTICLE,\n },\n {\n label: 'Como integrar o Asaas no WooCommerce',\n link: ASAAS_INTEGRATION_ARTICLE,\n },\n {\n label: 'Como acessar o Asaas',\n link: HOW_ACCESS_ASAAS_ARTICLE,\n },\n {\n label: 'Quais são as taxas do Asaas na Hostgator',\n link: ASAAS_TAX_ARTICLE,\n },\n {\n label: 'Principais dúvidas sobre o Asaas',\n link: QUESTIONS_ABOUT_ASAAS_ARTICLE,\n },\n ],\n showMoreArticles: 'Ver mais conteúdos',\n showMoreArticlesURL: MORE_CONTENT_ASAAS_ARTICLE,\n cnjpTypes: {\n mei: {\n label: 'MEI (Micro Empreendedor Individual)',\n value: 'MEI',\n },\n limited: {\n label: 'Empresa Limitada',\n value: 'LIMITED',\n },\n individual: {\n label: 'Empresa Individual',\n value: 'INDIVIDUAL',\n },\n association: {\n label: 'Associação',\n value: 'ASSOCIATION',\n },\n },\n },\n error: {\n emptyData: 'Esse campo é obrigatório',\n invalidData: 'O dado preenchido não corresponde ao padrão necessário para esse campo.',\n connectionErrorValidationPart: 'Já existe uma conta no Asaas',\n conectionError: 'Ocorreu um erro inesperado. Por favor, tente novamente mais tarde.',\n cepNotFound: 'O CEP informado não retornou seu endereço. Verifique o CEP informado e tente novamente.',\n },\n },\n },\n secondRow: {\n title: 'Suas cobranças com zero mensalidades e sem taxa de emissão ',\n AsaasHG: 'Com Asaas + Hostgator',\n mensality: 'Você não paga nada na mensalidade e taxa de emissão.',\n mainTaxPrice: 'R$ 0',\n tax: {\n pix: () => (\n <>\n Pix \n R$ 1,89 \n por transação recebida\n \n ),\n billet: () => (\n <>\n Boleto \n R$ 1,89 \n por transação recebida\n \n ),\n creditCard: () => (\n <>\n Cartões \n a partir de\n 2,89% \n \n ),\n others: clickAction => (\n <>\n Veja todas as taxas\n {' '}\n clicando aqui \n \n ),\n },\n advantagesTitle: () => (\n <>\n Você tem acesso a taxas especiais na parceria\n Asaas e Hostgator \n \n ),\n advantagesText: () => (\n <>\n Aproveite as\n vantagens exclusivas \n para facilitar toda a gestão de cobrança do seu negócio.\n \n ),\n buttonLabel: 'Abrir conta grátis',\n },\n thirdRow: {\n title: 'Porque usar o Asaas no meu site',\n benefits: [\n {\n title: 'Ofereça várias formas de pagamento',\n description: 'Personalize as condições de cobrança e venda usando Pix, cartão de débito ou crédito, link de pagamento e boleto bancário.',\n },\n {\n title: 'Gerencie seu dinheiro como e quando quiser',\n description: 'Desfrute dos benefícios de uma conta digital com movimentações grátis todo mês e cartão sem anuidade.',\n },\n {\n title: 'Parcelamento e antecipação de cobranças',\n description: 'Solicite a antecipação dos seus recebíveis e, após a aprovação do pedido, receba o dinheiro em até 2 dias úteis.',\n },\n {\n title: 'Pagamentos recorrentes automatizados',\n description: 'Envie todo mês a fatura para seu cliente de forma automática: notificações por voz, e-mail e SMS para reduzir a inadimplência.',\n },\n ],\n erpTitle: 'Solução completa de gestão do seu negócio (ERP)',\n erpDescription: () => (\n <>\n Cuide do financeiro do seu negócio, crie propostas comerciais, organize o estoque e emita notas fiscais com um único sistema. Com o\n ERP do Asaas \n você centraliza todo o fluxo de trabalho do seu negócio e mantém sua equipe focada em um só objetivo: vender mais. Necessário ser cliente CNPJ.\n \n ),\n },\n fourthRow: {\n title: 'Conta digital completa e sem mensalidades com o Asaas',\n description: () => (\n <>\n Uma instituição financeira homologada pelo Banco Central,\n a forma mais rápida e barata \n de gerenciar o financeiro do seu negócio.\n \n ),\n buttonLabel: 'Contrate agora',\n },\n modal: {\n createSite: {\n title: 'Estamos criando a sua conta...',\n description: 'Falta pouco para ter a sua conta Asaas!',\n },\n },\n },\n wizard: {\n firstRow: {\n title: () => (\n <>\n {'Receba dos seus clientes com '}\n menores taxas do mercado \n {' e gerencia suas cobranças tudo em um só lugar.'}\n \n {'Veja todas as vantagens desse gerenciador de pagamentos acessando a nossa '}\n Central de Ajuda \n .\n
\n \n ),\n imageItems: [\n <>\n {'Pix '} \n {' R$ 1,89'} \n {' por transação recebida'}\n ,\n <>\n {'Boleto '} \n {' R$ 1,89'} \n {' por transação recebida'}\n ,\n <>\n {'Cartões '} \n {'a partir de '}\n {' 2,89%'} \n ,\n <>\n {'Gere '} \n {' links para pagamento'}\n ,\n <>\n {'Atendimento '} \n {' 24h no site do Asaas'}\n ,\n 'E muito mais',\n ],\n form: {\n texts: {\n titleFirstStep: 'Abra sua conta grátis',\n descriptionFirstStep: () => (\n <>\n {'Informe os dados para '}\n abrir a sua conta no Asaas \n {' em poucos passos:'}\n \n ),\n questionDocument: 'Trabalho como:',\n placeholderName: 'Nome completo',\n placeholderMail: 'E-mail',\n placeholderBirthday: 'Data de nascimento',\n placeholderCep: 'CEP',\n placeholderCity: 'Cidade',\n placeholderStreet: 'Rua',\n placeholderDistrict: 'Bairro',\n placeholderNumber: 'Número',\n placeholderComplement: 'Complemento (Opcional)',\n placeholderCompanyType: 'Selecione o tipo da sua empresa:',\n placeholderMonthlyIncome: 'Qual sua renda mensal?',\n labelCPF: 'CPF',\n labelCNPJ: 'CNPJ',\n buttonLabel: 'Continuar para instalação Asaas',\n acceessAsaas: clickAction => (\n <>\n {'Já tem conta no Asaas? '}\n Fazer login \n .\n \n ),\n titleSecondStep: 'Dados principais',\n descriptionSecondStep: 'Agora, informe seus dados de endereço:',\n myCepLabel: 'Não sei meu CEP',\n myCepUrl: 'https://buscacepinter.correios.com.br/app/endereco/index.php',\n backButtonLabel: 'Voltar',\n agreementRadioLabel: 'Declaro que li e concordo com os ',\n agreementLinkLabel: 'Termos de uso do Asaas.',\n agreementUrl: 'https://ajuda.asaas.com/pt-BR/articles/102021-termos-e-condicoes-de-uso',\n successTitle: 'Conta criada com sucesso!',\n successDescription: () => (\n <>\n Nós enviamos para o seu\n e-mail de cadastro \n os dados de acesso para a sua conta, como\n login e senha. \n :)\n \n ),\n successButtonLabel: 'Acessar minha conta do Asaas',\n successButtonUrl: 'https://www.asaas.com/login/',\n failedTitle: 'O e-mail já possui uma conta Asaas',\n failedDescription: () => (\n <>\n Notamos que o seu e-mail já possui um cadastro no Asaas. Você pode tentar\n logar na conta já existente \n ou\n refazer o cadastro usando outra conta de e-mail. \n \n ),\n failedButtonBackLabel: 'Refazer cadastro',\n failedButtonLoginLabel: 'Logar no site do Asaas',\n articlesTitle: 'Quer saber mais? Confira os conteúdos da Central de Ajuda:',\n articlesTitleHelp: 'Precisa de ajuda? Confira os conteúdos da nossa Central:',\n articles: [\n {\n label: 'Primeiros passos com Asaas',\n link: FIRST_STEP_ASAAS_ARTICLE,\n },\n {\n label: 'Como integrar o Asaas no WooCommerce',\n link: ASAAS_INTEGRATION_ARTICLE,\n },\n {\n label: 'Como acessar o Asaas',\n link: HOW_ACCESS_ASAAS_ARTICLE,\n },\n {\n label: 'Quais são as taxas do Asaas na Hostgator',\n link: ASAAS_TAX_ARTICLE,\n },\n {\n label: 'Principais dúvidas sobre o Asaas',\n link: QUESTIONS_ABOUT_ASAAS_ARTICLE,\n },\n ],\n showMoreArticles: 'Ver mais conteúdos',\n showMoreArticlesURL: MORE_CONTENT_ASAAS_ARTICLE,\n cnjpTypes: {\n mei: {\n label: 'MEI (Micro Empreendedor Individual)',\n value: 'MEI',\n },\n limited: {\n label: 'Empresa Limitada',\n value: 'LIMITED',\n },\n individual: {\n label: 'Empresa Individual',\n value: 'INDIVIDUAL',\n },\n association: {\n label: 'Associação',\n value: 'ASSOCIATION',\n },\n },\n },\n error: {\n emptyData: 'Esse campo é obrigatório',\n invalidData: 'O dado preenchido não corresponde ao padrão necessário para esse campo.',\n connectionErrorValidationPart: 'Já existe uma conta no Asaas',\n conectionError: 'Ocorreu um erro inesperado. Por favor, tente novamente mais tarde.',\n cepNotFound: 'O CEP informado não retornou seu endereço. Verifique o CEP informado e tente novamente.',\n },\n },\n modal: {\n createSite: {\n title: 'Estamos criando a sua conta...',\n description: 'Falta pouco para ter a sua conta Asaas!',\n },\n },\n },\n createAsaasContinueLabel: 'Finalizar e instalar o Wordpress',\n dontCreateAsaasContinueLabel: 'Não quero criar minha conta Asaas agora',\n },\n};\n","import React from 'react';\nimport {\n ASAAS_INTEGRATION_ARTICLE,\n HOW_ACCESS_ASAAS_ARTICLE,\n FIRST_STEP_ASAAS_ARTICLE,\n ASAAS_TAX_ARTICLE,\n QUESTIONS_ABOUT_ASAAS_ARTICLE,\n MORE_CONTENT_ASAAS_ARTICLE,\n ASAAS_HELP,\n} from '@/config/urls/supportUrls';\n\nexport default {\n banner: {\n title: 'CONTA DIGITAL COMPLETA COM ASAAS',\n newChip: 'NOVO',\n text: {\n 0: 'Cobre por ',\n 1: 'Pix, boleto, cartões ',\n 2: 'e gerencie tudo da sua loja online em um só lugar com as melhores taxas do mercado.',\n },\n buttonLabel: 'Quero saber mais',\n },\n lp: {\n pageTitle: 'Assinatura Asaas',\n firstRow: {\n title: () => (\n <>\n {'Receba dos seus clientes com '}\n menores taxas do mercado \n {' e gerencia suas cobranças tudo em '}\n um só lugar. \n \n ),\n imageItems: [\n 'Cobre com Pix, Boleto e Cartões',\n 'Emissão de Notas Fiscais',\n 'Crie links para pagamento',\n 'Antecipe seus recebíveis',\n 'Atendimento 24h com a Asaas',\n 'E muito mais',\n ],\n form: {\n texts: {\n titleFirstStep: 'Abra sua conta grátis',\n descriptionFirstStep: () => (\n <>\n {'Informe os dados para '}\n abrir a sua conta no Asaas \n {' em poucos passos:'}\n \n ),\n questionDocument: 'Trabalho como:',\n placeholderName: 'Nome completo',\n placeholderMail: 'E-mail',\n placeholderBirthday: 'Data de nascimento',\n placeholderCep: 'CEP',\n placeholderCity: 'Cidade',\n placeholderStreet: 'Rua',\n placeholderDistrict: 'Bairro',\n placeholderNumber: 'Número',\n placeholderComplement: 'Complemento (Opcional)',\n placeholderCompanyType: 'Selecione o tipo da sua empresa:',\n placeholderMonthlyIncome: 'Qual sua renda mensal?',\n labelCPF: 'CPF',\n labelCNPJ: 'CNPJ',\n buttonLabel: 'Continuar',\n acceessAsaas: clickAction => (\n <>\n {'Já tem conta no Asaas? '}\n Fazer login \n .\n \n ),\n titleSecondStep: 'Dados principais',\n descriptionSecondStep: 'Agora, informe seus dados de endereço:',\n myCepLabel: 'Não sei meu CEP',\n myCepUrl: 'https://buscacepinter.correios.com.br/app/endereco/index.php',\n backButtonLabel: 'Voltar',\n agreementRadioLabel: 'Declaro que li e concordo com os ',\n agreementLinkLabel: 'Termos de uso do Asaas.',\n agreementUrl: 'https://ajuda.asaas.com/pt-BR/articles/102021-termos-e-condicoes-de-uso',\n successTitle: 'Conta criada com sucesso!',\n successDescription: () => (\n <>\n Nós enviamos para o seu\n e-mail de cadastro \n os dados de acesso para a sua conta, como\n login e senha. \n :)\n \n ),\n successButtonLabel: 'Acessar minha conta do Asaas',\n successButtonUrl: 'https://www.asaas.com/login/',\n failedTitle: 'O e-mail já possui uma conta Asaas',\n failedDescription: () => (\n <>\n Notamos que o seu e-mail já possui um cadastro no Asaas. Você pode tentar\n logar na conta já existente \n ou\n refazer o cadastro usando outra conta de e-mail. \n \n ),\n failedButtonBackLabel: 'Refazer cadastro',\n failedButtonLoginLabel: 'Logar no site do Asaas',\n articlesTitle: 'Quer saber mais? Confira os conteúdos da Central de Ajuda:',\n articlesTitleHelp: 'Precisa de ajuda? Confira os conteúdos da nossa Central:',\n articles: [\n {\n label: 'Primeiros passos com Asaas',\n link: FIRST_STEP_ASAAS_ARTICLE,\n },\n {\n label: 'Como integrar o Asaas no WooCommerce',\n link: ASAAS_INTEGRATION_ARTICLE,\n },\n {\n label: 'Como acessar o Asaas',\n link: HOW_ACCESS_ASAAS_ARTICLE,\n },\n {\n label: 'Quais são as taxas do Asaas na Hostgator',\n link: ASAAS_TAX_ARTICLE,\n },\n {\n label: 'Principais dúvidas sobre o Asaas',\n link: QUESTIONS_ABOUT_ASAAS_ARTICLE,\n },\n ],\n showMoreArticles: 'Ver mais conteúdos',\n showMoreArticlesURL: MORE_CONTENT_ASAAS_ARTICLE,\n cnjpTypes: {\n mei: {\n label: 'MEI (Micro Empreendedor Individual)',\n value: 'MEI',\n },\n limited: {\n label: 'Empresa Limitada',\n value: 'LIMITED',\n },\n individual: {\n label: 'Empresa Individual',\n value: 'INDIVIDUAL',\n },\n association: {\n label: 'Associação',\n value: 'ASSOCIATION',\n },\n },\n },\n error: {\n emptyData: 'Esse campo é obrigatório',\n invalidData: 'O dado preenchido não corresponde ao padrão necessário para esse campo.',\n connectionErrorValidationPart: 'Já existe uma conta no Asaas',\n conectionError: 'Ocorreu um erro inesperado. Por favor, tente novamente mais tarde.',\n cepNotFound: 'O CEP informado não retornou seu endereço. Verifique o CEP informado e tente novamente.',\n },\n },\n },\n secondRow: {\n title: 'Suas cobranças com zero mensalidades e sem taxa de emissão ',\n AsaasHG: 'Com Asaas + Hostgator',\n mensality: 'Você não paga nada na mensalidade e taxa de emissão.',\n mainTaxPrice: 'R$ 0',\n tax: {\n pix: () => (\n <>\n Pix \n R$ 1,89 \n por transação recebida\n \n ),\n billet: () => (\n <>\n Boleto \n R$ 1,89 \n por transação recebida\n \n ),\n creditCard: () => (\n <>\n Cartões \n a partir de\n 2,89% \n \n ),\n others: clickAction => (\n <>\n Veja todas as taxas\n {' '}\n clicando aqui \n \n ),\n },\n advantagesTitle: () => (\n <>\n Você tem acesso a taxas especiais na parceria\n Asaas e Hostgator \n \n ),\n advantagesText: () => (\n <>\n Aproveite as\n vantagens exclusivas \n para facilitar toda a gestão de cobrança do seu negócio.\n \n ),\n buttonLabel: 'Abrir conta grátis',\n },\n thirdRow: {\n title: 'Porque usar o Asaas no meu site',\n benefits: [\n {\n title: 'Ofereça várias formas de pagamento',\n description: 'Personalize as condições de cobrança e venda usando Pix, cartão de débito ou crédito, link de pagamento e boleto bancário.',\n },\n {\n title: 'Gerencie seu dinheiro como e quando quiser',\n description: 'Desfrute dos benefícios de uma conta digital com movimentações grátis todo mês e cartão sem anuidade.',\n },\n {\n title: 'Parcelamento e antecipação de cobranças',\n description: 'Solicite a antecipação dos seus recebíveis e, após a aprovação do pedido, receba o dinheiro em até 2 dias úteis.',\n },\n {\n title: 'Pagamentos recorrentes automatizados',\n description: 'Envie todo mês a fatura para seu cliente de forma automática: notificações por voz, e-mail e SMS para reduzir a inadimplência.',\n },\n ],\n erpTitle: 'Solução completa de gestão do seu negócio (ERP)',\n erpDescription: () => (\n <>\n Cuide do financeiro do seu negócio, crie propostas comerciais, organize o estoque e emita notas fiscais com um único sistema. Com o\n ERP do Asaas \n você centraliza todo o fluxo de trabalho do seu negócio e mantém sua equipe focada em um só objetivo: vender mais. Necessário ser cliente CNPJ.\n \n ),\n },\n fourthRow: {\n title: 'Conta digital completa e sem mensalidades com o Asaas',\n description: () => (\n <>\n Uma instituição financeira homologada pelo Banco Central,\n a forma mais rápida e barata \n de gerenciar o financeiro do seu negócio.\n \n ),\n buttonLabel: 'Contrate agora',\n },\n modal: {\n createSite: {\n title: 'Estamos criando a sua conta...',\n description: 'Falta pouco para ter a sua conta Asaas!',\n },\n },\n },\n wizard: {\n firstRow: {\n title: () => (\n <>\n {'Receba dos seus clientes com '}\n menores taxas do mercado \n {' e gerencia suas cobranças tudo em um só lugar.'}\n \n {'Veja todas as vantagens desse gerenciador de pagamentos acessando a nossa '}\n Central de Ajuda \n .\n
\n \n ),\n imageItems: [\n <>\n {'Pix '} \n {' R$ 1,89'} \n {' por transação recebida'}\n ,\n <>\n {'Boleto '} \n {' R$ 1,89'} \n {' por transação recebida'}\n ,\n <>\n {'Cartões '} \n {'a partir de '}\n {' 2,89%'} \n ,\n <>\n {'Gere '} \n {' links para pagamento'}\n ,\n <>\n {'Atendimento '} \n {' 24h no site do Asaas'}\n ,\n 'E muito mais',\n ],\n form: {\n texts: {\n titleFirstStep: 'Abra sua conta grátis',\n descriptionFirstStep: () => (\n <>\n {'Informe os dados para '}\n abrir a sua conta no Asaas \n {' em poucos passos:'}\n \n ),\n questionDocument: 'Trabalho como:',\n placeholderName: 'Nome completo',\n placeholderMail: 'E-mail',\n placeholderBirthday: 'Data de nascimento',\n placeholderCep: 'CEP',\n placeholderCity: 'Cidade',\n placeholderStreet: 'Rua',\n placeholderDistrict: 'Bairro',\n placeholderNumber: 'Número',\n placeholderComplement: 'Complemento (Opcional)',\n placeholderCompanyType: 'Selecione o tipo da sua empresa:',\n placeholderMonthlyIncome: 'Qual sua renda mensal?',\n labelCPF: 'CPF',\n labelCNPJ: 'CNPJ',\n buttonLabel: 'Continuar para instalação Asaas',\n acceessAsaas: clickAction => (\n <>\n {'Já tem conta no Asaas? '}\n Fazer login \n .\n \n ),\n titleSecondStep: 'Dados principais',\n descriptionSecondStep: 'Agora, informe seus dados de endereço:',\n myCepLabel: 'Não sei meu CEP',\n myCepUrl: 'https://buscacepinter.correios.com.br/app/endereco/index.php',\n backButtonLabel: 'Voltar',\n agreementRadioLabel: 'Declaro que li e concordo com os ',\n agreementLinkLabel: 'Termos de uso do Asaas.',\n agreementUrl: 'https://ajuda.asaas.com/pt-BR/articles/102021-termos-e-condicoes-de-uso',\n successTitle: 'Conta criada com sucesso!',\n successDescription: () => (\n <>\n Nós enviamos para o seu\n e-mail de cadastro \n os dados de acesso para a sua conta, como\n login e senha. \n :)\n \n ),\n successButtonLabel: 'Acessar minha conta do Asaas',\n successButtonUrl: 'https://www.asaas.com/login/',\n failedTitle: 'O e-mail já possui uma conta Asaas',\n failedDescription: () => (\n <>\n Notamos que o seu e-mail já possui um cadastro no Asaas. Você pode tentar\n logar na conta já existente \n ou\n refazer o cadastro usando outra conta de e-mail. \n \n ),\n failedButtonBackLabel: 'Refazer cadastro',\n failedButtonLoginLabel: 'Logar no site do Asaas',\n articlesTitle: 'Quer saber mais? Confira os conteúdos da Central de Ajuda:',\n articlesTitleHelp: 'Precisa de ajuda? Confira os conteúdos da nossa Central:',\n articles: [\n {\n label: 'Primeiros passos com Asaas',\n link: FIRST_STEP_ASAAS_ARTICLE,\n },\n {\n label: 'Como integrar o Asaas no WooCommerce',\n link: ASAAS_INTEGRATION_ARTICLE,\n },\n {\n label: 'Como acessar o Asaas',\n link: HOW_ACCESS_ASAAS_ARTICLE,\n },\n {\n label: 'Quais são as taxas do Asaas na Hostgator',\n link: ASAAS_TAX_ARTICLE,\n },\n {\n label: 'Principais dúvidas sobre o Asaas',\n link: QUESTIONS_ABOUT_ASAAS_ARTICLE,\n },\n ],\n showMoreArticles: 'Ver mais conteúdos',\n showMoreArticlesURL: MORE_CONTENT_ASAAS_ARTICLE,\n cnjpTypes: {\n mei: {\n label: 'MEI (Micro Empreendedor Individual)',\n value: 'MEI',\n },\n limited: {\n label: 'Empresa Limitada',\n value: 'LIMITED',\n },\n individual: {\n label: 'Empresa Individual',\n value: 'INDIVIDUAL',\n },\n association: {\n label: 'Associação',\n value: 'ASSOCIATION',\n },\n },\n },\n error: {\n emptyData: 'Esse campo é obrigatório',\n invalidData: 'O dado preenchido não corresponde ao padrão necessário para esse campo.',\n connectionErrorValidationPart: 'Já existe uma conta no Asaas',\n conectionError: 'Ocorreu um erro inesperado. Por favor, tente novamente mais tarde.',\n cepNotFound: 'O CEP informado não retornou seu endereço. Verifique o CEP informado e tente novamente.',\n },\n },\n modal: {\n createSite: {\n title: 'Estamos criando a sua conta...',\n description: 'Falta pouco para ter a sua conta Asaas!',\n },\n },\n },\n createAsaasContinueLabel: 'Finalizar e instalar o Wordpress',\n dontCreateAsaasContinueLabel: 'Não quero criar minha conta Asaas agora',\n },\n};\n","import esContent from './asaas.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './asaas.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './asaas.es';\n\nexport default {\n ...esContent,\n};\n","import asaasBR from './asaas.br';\nimport asaasMX from './asaas.mx';\nimport asaasCL from './asaas.cl';\nimport asaasCO from './asaas.co';\n\nconst asaas = {\n BR: asaasBR,\n MX: asaasMX,\n CL: asaasCL,\n CO: asaasCO,\n};\n\nexport default asaas;\n","export default {\n billing: 'Facturas',\n changePassword: 'Cambiar Contraseña',\n accountSecurity: 'Seguridad de la Cuenta',\n courses: 'Cursos',\n creditCard: 'Gestionar Tarjeta',\n domains: 'Dominios',\n emails: 'Correos',\n help: 'Soporte',\n hireProduct: 'Contratar Producto / Servicio',\n manageUsers: 'Gestionar Usuarios',\n mktPlace: 'Ferramentas e Serviços',\n myData: 'Mis Datos',\n newBilling: 'Facturas y Suscripciones',\n manageSubscription: 'Administrar Suscripción',\n subscriptions: 'Suscripciones',\n products: 'Productos',\n quit: 'Salir',\n servicesStatus: 'Status de los Servicios',\n sites: 'Mis sitios web',\n sitesPage: 'Sitios Web',\n sitesPlans: 'Sitios Web y Planes',\n stopBeta: 'Dejar de usar la Versión Beta',\n support: 'Soporte',\n academyPass: 'Cursos',\n profile: 'Perfil',\n linkNaBio: 'Enlace en la bio',\n logoBuilder: '',\n v2: {\n products: 'Hospedajes y Servidores',\n createSiteWithPartners: {\n title: {\n 0: 'Faça seu site ',\n 1: 'do jeito que você imaginou!',\n },\n description: {\n 0: 'Conte com um ',\n 1: 'especialista em criação de sites ',\n 2: 'para o seu projeto ou faça você mesmo. :)',\n },\n buttonCreate: 'Criar com um especialista',\n buttonClose: 'Criar eu mesmo',\n },\n },\n myAlerts: 'Mis avisos',\n allNotifications: 'Todos',\n ticketNotifications: 'Tickets',\n seeMore: 'Ver más',\n alertsTooltip: 'Cuando se completa la situación de una advertencia, desaparece de este área.',\n noNotifications: 'No tienes nuevas notificaciones 😊',\n};\n","import esContent from './menu.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './menu.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './menu.es';\n\nexport default {\n ...esContent,\n};\n","import menuBR from './menu.br';\nimport menuMX from './menu.mx';\nimport menuCL from './menu.cl';\nimport menuCO from './menu.co';\n\nconst menu = {\n BR: menuBR,\n MX: menuMX,\n CL: menuCL,\n CO: menuCO,\n};\n\nexport default menu;\n","export default {\n sites: 'Meus sites',\n sitesPage: 'Sites',\n sitesPlans: 'Sites e Planos',\n domains: 'Domínios',\n emails: 'E-mails',\n products: 'Produtos',\n billing: 'Faturas',\n newBilling: 'Faturas e Assinaturas',\n subscriptions: 'Assinaturas',\n hireProduct: 'Contratar Produto / Serviço',\n creditCard: 'Gerenciar Cartão',\n help: 'Suporte',\n support: 'Suporte',\n servicesStatus: 'Status dos Serviços',\n stopBeta: 'Parar de usar a Versão Beta',\n quit: 'Sair',\n myData: 'Meus Dados',\n changePassword: 'Alterar Senha',\n accountSecurity: 'Segurança da Conta',\n manageUsers: 'Gerenciar Usuários',\n courses: 'Cursos',\n mktPlace: 'Ferramentas e Serviços',\n mktPlaceAlt: 'Potencialize seu negócio',\n mktPlaceDescription: 'Encontre os melhores aplicativos para o seu site',\n security: 'Segurança e Backup',\n sitelock: 'SiteLock',\n academyPass: 'Cursos',\n asaas_a: 'Venda com Pix, cartões e boleto',\n asaas_b: 'Pagamentos na sua loja',\n asaas_c: 'Gere cobranças em seu site',\n profile: 'Perfil',\n linkNaBio: 'Link na bio',\n logoBuilder: 'Criador de logos',\n v2: {\n products: 'Hospedagens e Servidores',\n createSiteWithPartners: {\n title: {\n 0: 'Faça seu site ',\n 1: 'do jeito que você imaginou!',\n },\n description: {\n 0: 'Conte com um',\n 1: ' especialista em criação de sites ',\n 2: 'para o seu projeto. :)',\n },\n buttonCreate: 'Criar com um especialista',\n },\n },\n myAlerts: 'Meus avisos',\n allNotifications: 'Todos',\n ticketNotifications: 'Chamados',\n seeMore: 'Ver mais',\n alertsTooltip: 'Quando a situação de um aviso for concluída ele desaparece dessa área.',\n noNotifications: 'Você não tem novas notificações 😊',\n};\n","export default {\n '404Page': 'Erro 404',\n billing: 'Facturas',\n cancelled: 'Facturas',\n changePassword: 'Cambiar Contraseña',\n checkDomainAvailability: '/check-domain-availability',\n courses: 'Cursos',\n cancelRenewal: 'Cancelar Renovación',\n cancelSignature: 'Cancelar Suscripción',\n createEmail: 'Crear Cuenta de Correo',\n creditCard: 'Gestionar Tarjeta de Crédito',\n dns: 'Cambiar DNS',\n domain: 'Administrar Dominio',\n domains: 'Dominios',\n emails: 'Correos',\n emailsTitan: 'Administrar',\n help: 'Soporte',\n invoices: 'Facturas',\n mktPlace: 'Ferramentas e Serviços',\n manageSubscription: 'Administrar suscripción',\n paid: 'Facturas',\n product: 'Gestionar Producto',\n products: 'Productos',\n subscriptions: 'Suscripciones',\n sites: 'Mis sitios web',\n sitesPage: 'Sitios web',\n sitesCreate: 'Crear sitio',\n sitesPlans: 'Sitios Web y Planes',\n support: 'Soporte',\n supportforms: 'Abrir ticket',\n ticket: 'Ticket',\n titanHire: 'Contratar Plan de correo Electrónico',\n titanHireFreePlan: 'Contratar Nuevo Plan de correo Electrónico',\n titanHirePlanActiveCPanel: 'Plataforma de Correo Electrónico Gratuita',\n titanInboxUpgrade: 'Administrar Planes',\n titanUpgrade: 'Administrar Planes',\n unpaid: 'Facturas Pendientes',\n asaas: 'Asaas',\n v2: {\n sitesPage: 'Sitios web',\n sitesCreate: 'Crear Sitio',\n emails: 'Correos',\n setEmailPlatform: 'Definir plataforma de correo',\n manageEmailsTitan: 'Administrar Correo Titan',\n manageEmailsCpanel: 'Administrar Correo cPanel',\n domains: 'Dominios',\n manageDomain: 'Administrar Dominio',\n setupDomain: 'Configurar Dominio',\n hostsAndserver: 'Hospedajes y Servidores',\n manageHostOrServer: 'Administrar Alojamiento web o Servidor',\n securityAndBackup: 'Seguridad y Backup',\n manageSiteLock: 'Administrar SiteLock',\n manageCodeGuard: 'Administrar CodeGuard',\n subscribeSitelock: 'Suscribirse a SiteLock',\n subscribeCodeGuard: 'Suscribirse a CodeGuard',\n toolsAndServices: 'Herramientas y Servicios',\n courses: 'Cursos',\n subscribeAcademyPass: 'Suscribirse a Academy Pass',\n invoice: 'Facturas',\n subscription: 'Suscripciones',\n manageSubscriptions: 'Administrar Suscripción',\n cancelSubscription: 'Cancelar Suscripción',\n manageCreditCard: 'Administrar Tarjeta de Crédito',\n support: 'Soporte',\n openTicket: 'Abrir Ticket',\n seeTicket: 'Ver Ticket',\n myData: 'Mis Datos',\n changePassword: 'Cambiar Contraseña',\n accountSecurity: 'Seguridad de la Cuenta',\n asaas: 'Asaas',\n linkNaBio: 'Enlace en la bio',\n dataAnalysis: 'Análisis de datos del Enlace en la Bio',\n cloudflare: 'Desempenho de sites',\n },\n};\n","import esContent from './title.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './title.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './title.es';\n\nexport default {\n ...esContent,\n};\n","import titleBR from './title.br';\nimport titleMX from './title.mx';\nimport titleCL from './title.cl';\nimport titleCO from './title.co';\n\nconst title = {\n BR: titleBR,\n MX: titleMX,\n CL: titleCL,\n CO: titleCO,\n};\n\nexport default title;\n","export default {\n sites: 'Meus sites',\n sitesPage: 'Sites',\n sitesCreate: 'Criar site',\n sitesPlans: 'Sites e Planos',\n cancelRenewal: 'Cancelar Renovação',\n cancelSignature: 'Cancelar Assinatura',\n manageSubscription: 'Gerenciar Assinatura',\n domains: 'Domínios',\n emails: 'E-mails',\n products: 'Produtos',\n billing: 'Faturas',\n invoices: 'Faturas',\n subscriptions: 'Assinaturas',\n unpaid: 'Faturas Pendentes',\n paid: 'Faturas',\n cancelled: 'Faturas',\n domain: 'Gerenciar Domínio',\n product: 'Gerenciar Produto',\n creditCard: 'Gerenciar Cartão de Crédito',\n help: 'Suporte',\n support: 'Suporte',\n supportforms: 'Abrir chamado',\n ticket: 'Chamado',\n dns: 'Alterar DNS',\n changePassword: 'Alterar Senha',\n createEmail: 'Criar Conta de E-mail',\n '404Page': 'Erro 404',\n courses: 'Cursos',\n mktPlace: 'Parceiros HostGator',\n security: 'Segurança',\n sitelock: 'SiteLock',\n emailsTitan: 'Gerenciar',\n titanUpgrade: 'Upgrade de Plano',\n titanInboxUpgrade: 'Gerenciar Plano',\n titanHire: 'Contratar Plano de E-mail',\n titanHireFreePlan: 'Contratar Novo Plano de E-mail',\n titanHirePlanActiveCPanel: 'Plataforma de E-mail Grátis',\n academyPass: 'Hostgator Academy',\n codeguard: 'CodeGuard',\n asaas: 'Asaas',\n v2: {\n sitesPage: 'Sites',\n sitesCreate: 'Criar site',\n emails: 'E-mails',\n setEmailPlatform: 'Definir Plataforma de E-mail',\n manageEmailsTitan: 'Gerenciar E-mail Titan',\n manageEmailsCpanel: 'Gerenciar E-mail cPanel',\n domains: 'Domínios',\n manageDomain: 'Gerenciar Domínio',\n setupDomain: 'Configurar Domínio',\n hostsAndserver: 'Hospedagens e Servidores',\n manageHostOrServer: 'Gerenciar Hospedagem ou Servidor',\n securityAndBackup: 'Segurança e Backup',\n manageSiteLock: 'Gerenciar SiteLock',\n upgradeSiteLock: 'Alterar Plano do SiteLock',\n manageCodeGuard: 'Gerenciar CodeGuard',\n subscribeSitelock: 'Assinar SiteLock',\n subscribeCodeGuard: 'Assinar CodeGuard',\n toolsAndServices: 'Ferramentas e Serviços',\n courses: 'Cursos',\n subscribeAcademyPass: 'Assinar Academy Pass',\n invoice: 'Faturas',\n subscription: 'Assinaturas',\n manageSubscriptions: 'Gerenciar Assinatura',\n cancelSubscription: 'Cancelar Assinatura',\n manageCreditCard: 'Gerenciar Cartão de Crédito',\n support: 'Suporte',\n openTicket: 'Abrir Novo Chamado',\n seeTicket: 'Ver Chamado',\n myData: 'Meus Dados',\n changePassword: 'Alterar Senha',\n accountSecurity: 'Segurança da Conta',\n asaas: 'Asaas',\n linkNaBio: 'Link na bio',\n logoBuilder: 'Criador de logos',\n dataAnalysis: 'Análise de dados do Link na Bio',\n cloudflare: 'Desempenho de sites',\n },\n};\n","import { DNS_PROPAGATION_ARTICLE } from '@/config/urls/supportUrls';\nimport { Link } from 'gatorcomponents';\nimport React from 'react';\n\nexport default {\n stepper: {\n linkChoose: 'Escolha um link único',\n content: 'Insira o conteúdo',\n template: 'Selecione um template',\n share: 'Compartilhe',\n },\n step1: {\n title: (\n <>\n Crie seu Link na Bio \n \n Você pode criar até\n {' '}\n 5 Links na Bio \n \n ),\n copy: 'Copiar link',\n dataAnalysis: 'Análise de dados',\n customDomain: 'Domínio personalizado',\n edit: 'Editar Link na Bio',\n delete: 'Excluir Link na Bio',\n deleteModalDescription: profileName => (\n \n O seu link\n {' '}\n {profileName} \n {' '}\n será removido, junto com todo o seu conteúdo. Esta ação não pode ser desfeita.\n
\n ),\n cancel: 'Cancelar',\n confirmDelete: 'Estou ciente, quero excluir',\n linkPlaceholder: 'olink.ai/',\n copied: 'Copiado',\n tooltip: 'Você atingiu o limite de 5 Links na Bio, para criar um novo, você pode excluir um Link na Bio existente.',\n domainConnectedTo: 'Conectado ao domínio ',\n bannerTitle: (\n <>\n Novidade! \n {' '}\n Conecte um domínio personalizado ao seu Link na Bio\n \n ),\n bannerDescription: 'Personalize ainda mais o seu Link na Bio conectando a um domínio que você já possui.',\n seeHowToConfigure: 'Veja como configurar',\n linkExample: 'bio.minhaloja.com',\n },\n toasts: {\n linkDeleteError: 'Não foi possível excluir o link selecionado. Tente novamente.',\n linkDeleteSuccess: 'O link selecionado foi excluído.',\n linkNaBioCreationError: 'Ocorreu um erro ao tentar criar o seu Link na Bio. Tente novamente.',\n linkNaBioDeleteError: 'Não foi possível excluir o seu Link na Bio. Tente novamente.',\n linkNaBioDeleteSuccess: 'Seu Link na Bio foi excluído.',\n linkEdition: 'Não foi possível realizar essa ação. Tente novamente.',\n profileLoadingError: 'Ocorreu um erro ao carregar os seus Links na Bio. Tente novamente.',\n linkUpdated: 'Link atualizado',\n domainLinked: 'O domínio personalizado foi removido do seu Link na Bio.',\n domainRemoved: 'Ocorreu um erro ao remover o domínio personalizado do seu Link na Bio. Tente novamente.',\n },\n statistics: {\n linkPlaceholder: 'olink.ai/',\n consolidatedData: 'Dados consolidados',\n totalData: 'Dados de acessos totais desde a criação do seu Link na Bio.',\n access: totalAccess => (\n <>\n {totalAccess} \n {' '}\n Acessos
\n \n ),\n clicks: totalClicks => (\n <>\n {totalClicks} \n {' '}\n Cliques
\n \n ),\n conversionRate: rate => (\n <>\n \n {rate}\n %\n \n {' '}\n Taxa de conversão
\n \n ),\n dailyAccess: 'Dados de acessos diários',\n lastWeek: 'Últimos 7 dias',\n lastMonth: 'Últimos 30 dias',\n totalAccess: 'Total de acessos',\n totalClicks: 'Total de cliques',\n totalConversion: 'Taxa de conversão',\n accessTooltip: 'Total de vezes que o seu Link na Bio foi acessado.',\n clicksTooltip: 'Total de cliques nos links internos e ícones de redes sociais do seu Link na Bio.',\n conversionRateTooltip: 'É o percentual de visitantes que clicaram em algum link interno ou ícone do seu Link na Bio.',\n emptyStateTitle: 'Ainda não há dados para exibir',\n emptyStateDescription: 'Estamos analisando seu Link na Bio. Em breve, você terá acesso a dados de acesso que ajudarão a entender melhor o comportamento do seu Link.',\n },\n customDomainModal: {\n title: 'Conecte o seu Link na Bio a um domínio próprio',\n description: 'Personalize ainda mais o seu Link na Bio conectando a um domínio que você já possui, você pode conectar como domínio principal ou criar um subdomínio apenas para o seu Link na Bio.',\n domainPlaceHolder: 'Selecionar domínio',\n cancel: 'Cancelar',\n verify: 'Verificar domínio',\n otherDomain: 'Quero usar outro domínio',\n otherDomainInputLabel: 'Qual domínio deseja conectar?',\n invalidDomain: 'Domínio inválido! Não pode conter caracteres especiais (exceto hífen), iniciar e finalizar com hífen, conter apenas números ou ter mais de 63 caracteres.',\n howToConnectTitle: domain => (\n <>\n Como você deseja conectar o domínio\n {' '}\n \n {domain}\n \n {' '}\n ao seu Link na Bio?\n \n ),\n subdomain: 'Definir um subdomínio para o meu Link na Bio',\n subdomainDescription: (\n <>\n Crie um subdomínio apenas para o seu Link na Bio, como\n {' '}\n bio.meusite.com \n . Isso não altera o direcionamento do domínio original.\n \n ),\n recommended: 'Recomendado',\n mainDomain: domain => (\n <>\n Usar\n {' '}\n \n {domain}\n \n {' '}\n como domínio principal\n \n ),\n mainDomainDescription: (\n <>\n Ideal se você ainda não possui um site vinculado ao domínio.\n {' '}\n \n O seu domínio irá direcionar diretamente e apenas\n \n {' '}\n para o Link na Bio.\n \n ),\n back: 'Voltar',\n continue: 'Continuar',\n insertSubdomain: 'Insira o subdomínio',\n verifyChanges: 'Verifique as alterações',\n verifyChangesDescription: 'As mudanças abaixo serão realizadas após você confirmar a alteração.',\n afterConfirmation: 'Após a confirmação, o seu domínio personalizado irá direcionar para a página do seu Link na Bio:',\n newDomainConnected: 'Novo domínio conectado',\n afterConfirmationInfo: (\n <>\n O seu domínio original\n {' '}\n olink.ai \n {' '}\n também continuará funcionando e redirecionando para o seu Link na Bio.\n \n ),\n confirmChange: 'Confirmar alteração',\n domainConnectionSuccess: 'Domínio personalizado conectado!',\n successDescription: (\n <>\n O domínio foi conectado ao seu Link na Bio.\n {' '}\n Pode levar algumas horas para que os visitantes vejam o seu Link na Bio a partir do novo domínio conectado \n {' '}\n , enquanto isso, você ainda pode usar o seu domínio padrão\n {' '}\n olink.ai \n {' '}\n na sua Bio.\n \n ),\n backToList: 'Voltar para lista de Links',\n configureYourDomain: 'Configure seu domínio',\n configureYourDomainDescription: domain => (\n <>\n Como o domínio\n {' '}\n \n "\n {domain}\n "\n \n {' '}\n não foi registrado aqui na HostGator, você precisa ir no outro provedor e apontar o registro CNAME para a página do seu Link na Bio, siga as instruções abaixo:\n \n ),\n configureStep1: 'Acesse o painel do provedor onde o seu domínio está registrado.',\n configureStep2: 'No domínio que deseja configurar (alterar DNS) para o seu Link na Bio da HostGator, busque por “Alterar DNS ou Alterar Servidores” - se não achar, contate o suporte desse provedor',\n configureStep3: 'Busque pela opção de adicionar um novo registro, e selecione o tipo CNAME.',\n configureStep4: 'Adicione um novo registro CNAME contendo os valores abaixo:',\n configureStep4Attention: (\n <>\n Atenção: \n {' '}\n Ao realizar a configuração abaixo, os direcionamentos atuais do domínio serão perdidos e ele passará a direcionar apenas para o Link na Bio.\n \n ),\n configureStep4Name: domain => (\n <>\n Nome:\n {' '}\n {domain} \n \n ),\n configureStep4TTL: (\n <>\n TTL:\n {' '}\n 3600 \n \n ),\n configureStep4Value: value => (\n <>\n Valor:\n {' '}\n {value} \n \n ),\n configurationTip: 'Algumas plataformas podem utilizar nomes diferentes para os campos do registro, se tiver dúvidas, pesquise como adicionar registros DNS no provedor do seu domínio.',\n configurationDone: 'Já fiz as alterações',\n verifyingDomain: 'Verificando domínio',\n verifyingDomainDescription: 'Verificando o status de configuração do seu domínio.',\n verificationNotPossible: 'Não foi possível conectar o seu Link na Bio ao domínio informado.',\n verifyOtherDomain: 'Verifique se o domínio está correto e registrado, ou escolha um outro domínio.',\n chooseOther: 'Escolher outro domínio',\n domainConnected: 'Domínio personalizado conectado!',\n domainConnectedDescription: domain => (\n <>\n O domínio\n {' '}\n {domain} \n {' '}\n foi conectado ao seu Link na Bio, você já pode compartilhar esse novo domínio com os seus visitantes.\n \n ),\n removeDomainLink: 'Remover domínio personalizado',\n removeDomainTitle: 'Remover domínio',\n removeDomainDescription: (\n <>\n Remover o domínio personalizado faz com que ele não direcione mais o tráfego para o seu Link na Bio. Você ainda poderá usar o domínio original\n {' '}\n olink.ai \n {' '}\n para compartilhar o seu Link na Bio ou adicionar um novo domínio personalizado.\n \n ),\n removeDomainConfirm: 'Estou ciente, quero remover',\n removeDomainSuccessAlert: 'O domínio personalizado foi removido do seu Link na Bio.',\n removeDomainErrorAlert: 'Ocorreu um erro ao remover o domínio personalizado do seu Link na Bio. Tente novamente.',\n externalDomainConnected: (\n <>\n Seu domínio foi conectado e em breve seus visitantes poderão ver o seu Link na Bio a partir do novo domínio. Enquanto isso, utilize o seu domínio padrão\n {' '}\n olink.ai \n {' '}\n na sua bio.\n \n ),\n timeToPropagate: (\n <>\n As alterações no registro DNS podem levar até 24 horas para serem concluídas (período de propagação do DNS). Após esse tempo, o novo domínio será vinculado ao seu Link na Bio.\n Cree su enlace en la Bio \n \n Puede crear hasta\n {' '}\n 5 enlaces en la Bio \n \n ),\n copy: 'Copiar enlace',\n dataAnalysis: 'Análisis de datos',\n customDomain: 'Dominio personalizado',\n edit: 'Editar enlace en la Bio',\n delete: 'Eliminar Enlace en la Bio',\n deleteModalDescription: profileName => (\n \n Su enlace\n {' '}\n {profileName} \n {' '}\n será eliminado, junto con todo su contenido. Esta acción no se puede deshacer.\n
\n ),\n cancel: 'Cancelar',\n confirmDelete: 'Soy consciente, quiero eliminar',\n linkPlaceholder: 'olink.ai/',\n copied: 'Copiado',\n tooltip: 'Has alcanzado el límite de 5 enlaces en la Bio. Para crear uno nuevo, puedes eliminar un enlace existente en la Bio',\n domainConnectedTo: 'Conectado al dominio ',\n bannerTitle: (\n <>\n ¡Novedad! \n {' '}\n Conecte un dominio personalizado a su Enlace en la Bio\n \n ),\n bannerDescription: 'Personalice aún más su Enlace en la Bio conectando un dominio que ya tiene registrado.',\n seeHowToConfigure: 'Consulte como configurar',\n linkExample: 'bio.mitienda.com',\n },\n toasts: {\n linkDeleteError: 'No se ha podido eliminar el enlace seleccionado. Inténtelo de nuevo.',\n linkDeleteSuccess: 'El enlace seleccionado fue eliminado',\n linkNaBioCreationError: 'Ocurrió un error al intentar crear su Enlace en la Bio. Inténtelo de nuevo.',\n linkNaBioDeleteError: 'No fue posible eliminar el Enlace en la Bio. Inténtelo de nuevo.',\n linkNaBioDeleteSuccess: 'Su Enlace en la Bio fue eliminado.',\n linkEdition: 'No fue posible realizar esta acción. Inténtelo de nuevo.',\n profileLoadingError: 'Se ha producido un error al cargar los Enlaces en la Bio. Inténtelo de nuevo',\n linkUpdated: 'Enlace actualizado',\n domainLinked: 'El dominio personalizado fue eliminado de su Enlace en la Bio.',\n domainRemoved: 'Ocurrió un error al eliminar el dominio personalizado de su Enlace en la Bio. Inténtelo nuevamente.',\n },\n statistics: {\n linkPlaceholder: 'olink.ai/',\n consolidatedData: 'Datos consolidados',\n totalData: 'Datos de accesos totales desde la creación de su Enlace en la Bio.',\n access: totalAccess => (\n <>\n {totalAccess} \n {' '}\n Accesos
\n \n ),\n clicks: totalClicks => (\n <>\n {totalClicks} \n {' '}\n Clics
\n \n ),\n conversionRate: rate => (\n <>\n \n {rate}\n %\n \n {' '}\n Tasa de conversión
\n \n ),\n dailyAccess: 'Datos de accesos diarios',\n lastWeek: 'Últimos 7 días',\n lastMounth: 'Últimos 30 días',\n totalAccess: 'Total de accesos',\n totalClicks: 'Total de clics',\n totalConversion: 'Tasa de conversión',\n accessTooltip: 'Total de veces que su Enlace en la Bio fue accedido.',\n clicksTooltip: 'Total de clics en los enlaces internos y iconos de redes sociales de su Enlace en la Bio.',\n conversionRateTooltip: 'Es el porcentaje de visitantes que hicieron clic en algún enlace interno o icono de su Enlace en la Bio.',\n emptyStateTitle: 'Todavía no hay datos para mostrar',\n emptyStateDescription: 'Estamos analizando su Enlace en la Bio. En breve, tendrá acesso a los dados de acesso que ayudarán a comprender mejor el comportamiento de su Enlace.',\n },\n customDomainModal: {\n title: 'Conecte su Enlace en la Bio a un dominio propio',\n description: 'Personalice aún más su Enlace en la Bio vinculándolo a un dominio que ya tiene registrado, puede conectarlo como su dominio principal o crear un subdominio solo para su Enlace en la Bio.',\n domainPlaceHolder: 'Seleccionar dominio',\n cancel: 'Cancelar',\n verify: 'Verificar dominio',\n otherDomain: 'Quiero usar otro dominio',\n otherDomainInputLabel: '¿Cuál dominio desea conectar?',\n invalidDomain: '¡Dominio inválido! No puede contener caracteres especiales (excepto guion), iniciar y finalizar con guion, contener solo números o tener más de 63 caracteres.',\n howToConnectTitle: domain => (\n <>\n ¿Cómo quiere conectar el dominio\n {' '}\n \n {domain}\n \n {' '}\n su Enlace en la Bio?\n \n ),\n subdomain: 'Definir un subdominio para mi Enlace en la Bio',\n subdomainDescription: (\n <>\n Cree un subdominio solo para su Enlace en la Bio, como\n {' '}\n bio.meusite.com \n . Esto no cambia el apuntamiento del dominio original.\n \n ),\n recommended: 'Recomendado',\n mainDomain: domain => (\n <>\n Usar\n {' '}\n \n {domain}\n \n {' '}\n como dominio principal\n \n ),\n mainDomainDescription: (\n <>\n Ideal si aún no tiene un sitio web vinculado al dominio.\n {' '}\n Su dominio apuntará directamente \n {' '}\n al Enlace en la Bio.\n \n ),\n back: 'Volver',\n continue: 'Continuar',\n insertSubdomain: 'Ingrese el subdominio',\n verifyChanges: 'Verifique los cambios',\n verifyChangesDescription: 'Los cambios a continuación se realizarán después de que confirme el cambio.',\n afterConfirmation: 'Después de la confirmación, su dominio personalizado redirigirá a la página de su Enlace en la Bio:',\n newDomainConnected: 'Nuevo dominio conectado',\n afterConfirmationInfo: (\n <>\n Su dominio original\n {' '}\n olink.ai \n {' '}\n también continuará funcionando y se redirigirá para su Enlace en la Bio.\n \n ),\n confirmChange: 'Confirmar cambio',\n domainConnectionSuccess: '¡Dominio personalizado conectado!',\n successDescription: (\n <>\n El dominio se conectó a su Enlace en la Bio.\n {' '}\n Es posible que los visitantes tarden algunas horas en ver su Enlace en la Bio del dominio recién conectado \n {' '}\n , mientras tanto, aún puede usar su dominio predeterminado\n {' '}\n olink.ai \n {' '}\n en su Enlace en la Bio.\n \n ),\n backToList: 'Volver a la lista de Enlaces',\n configureYourDomain: 'Configure su dominio',\n configureYourDomainDescription: domain => (\n <>\n Como el dominio\n {' '}\n \n "\n {domain}\n "\n \n {' '}\n no se registró aquí en HostGator, debe ir al otro proveedor y apuntar el registro CNAME para la página de su Enlace en la Bio, siga las instrucciones a continuación:\n \n ),\n configureStep1: 'Ingrese al panel del proveedor donde está registrado su dominio. ',\n configureStep2: 'En el dominio que desea configurar (cambiar DNS) para su Enlace en la Bio de HostGator, busque por \"Cambiar DNS o Cambiar Servidores\" - se no encuentra esa opción, contacte el soporte de ese proveedor.',\n configureStep3: 'Busque la opción para agregar un nuevo registro y seleccione el tipo CNAME.',\n configureStep4: 'Agregue un nuevo registro CNAME que contenga los siguientes valores:',\n configureStep4Attention: (\n <>\n Atención: \n {' '}\n Al realizar la configuración de abajo, las direcciones actuales del dominio se perderán y pasara solo a dirigirse al Enlace en la Bio.\n \n ),\n configureStep4Name: domain => (\n <>\n Nombre:\n {' '}\n {domain} \n \n ),\n configureStep4TTL: (\n <>\n TTL:\n {' '}\n 3600 \n \n ),\n configureStep4Value: value => (\n <>\n Valor:\n {' '}\n {value} \n \n ),\n configurationTip: 'Algunas plataformas pueden utilizar nombres diferentes para los campos del registro, si tiene dudas, investigue cómo agregar registros DNS en el proveedor de su dominio.',\n configurationDone: 'Ya hice los cambios',\n verifyingDomain: 'Verificando dominio',\n verifyingDomainDescription: 'Verificar el status de configuración de su dominio.',\n verificationNotPossible: 'No fue posible conectar su Enlace en la Bio al dominio informado.',\n verifyOtherDomain: 'Compruebe si el dominio está correcto y registrado, o elija otro dominio.',\n chooseOther: 'Elegir otro dominio',\n domainConnected: '¡Dominio personalizado conectado!',\n domainConnectedDescription: domain => (\n <>\n El dominio\n {' '}\n {domain} \n {' '}\n ha sido conectado a su Enlace en la Bio, ahora puede compartir este nuevo dominio con sus visitantes.\n \n ),\n removeDomainLink: 'Eliminar dominio personalizado',\n removeDomainTitle: 'Eliminar dominio',\n removeDomainDescription: (\n <>\n Eliminar el dominio personalizado significa que ya no dirigirá tráfico a su Enlace en la Bio. Aún puede usar el dominio\n {' '}\n olink.ai \n {' '}\n original para compartir su Enlace en la Bio o agregar un nuevo dominio personalizado.\n \n ),\n removeDomainConfirm: 'Estoy de acuerdo, quiero eliminarlo',\n removeDomainSuccessAlert: 'El dominio personalizado fue eliminado de su Enlace en la Bio.',\n removeDomainErrorAlert: 'Ocurrió un error al eliminar el dominio personalizado de su Enlace en la Bio. Inténtelo nuevamente.',\n externalDomainConnected: (\n <>\n Su dominio se ha conectado y sus visitantes pronto podrán ver su Enlace en la Bio desde el nuevo dominio. Mientras tanto, use su dominio predeterminado\n {' '}\n olink.ai \n {' '}\n en su bio.\n \n ),\n timeToPropagate: (\n <>\n Los cambios en el registro DNS pueden tardar hasta 24 horas en completarse (período de propagación de DNS). Pasado este tiempo, el nuevo dominio quedará vinculado a su Enlace en la Bio.\n 1 GB de armazenamento por contaWebmail e apps para Android e iOS Suporte a Outlook, Gmail e outros aplicativos Poderoso filtro anti-spam Proteção antivírus avançada Calendário e contatos integrados i Suporte multi-contas i Importação de e-mails e contatos existentes com apenas um clique i {{ domain }} ',\n tagOfTrialTime: '30 DIAS GRÁTIS PARA TESTAR',\n productDescription: 'O {{ productName }} é uma solução da HostGator para que empreendedores tenham um endereço de e-mail personalizado com o nome da sua empresa.',\n advantages: {\n 1: 'E-mail personalizado @seudominio',\n 2: '10 GB de armazenamento por conta',\n 3: 'Webmail e Apps para Android e iOS',\n 4: 'Proteção anti-spam e antivírus',\n 5: 'Calendário e contatos integrados',\n 6: 'E muito mais!',\n },\n form: {\n emailAddressLabel: 'Endereço de e-mail',\n emailAddressPlaceholder: 'ex.: contato',\n domainLabel: 'Domínio',\n passwordLabel: 'Senha',\n passwordError: 'A senha deve conter no mínimo 8 caracteres',\n submitButton: 'Iniciar período de teste',\n // eslint-disable-next-line no-template-curly-in-string\n termsOfService: 'Após o período grátis, a assinatura mensal é R${{ price }} por conta com renovação automática. Cancele quando quiser. ',\n },\n },\n modalTitanTrialHirePlan: {\n buttonAddAccount: {\n label: 'Adicionar mais uma conta',\n },\n emailSuggestions: {\n 1: 'ex.: contato',\n 2: 'ex.: vendas',\n 3: 'ex.: atendimento',\n 4: 'ex.: suporte',\n 5: 'ex.: financeiro',\n },\n title: 'Titan Essentials 10GB',\n tagOfTrialTime: '30 DIAS GRÁTIS PARA TESTAR',\n confirmText: 'Estou ciente que ao iniciar o período de teste grátis do e-mail Titan Essentials não poderei realizar o downgrade para o Titan Básico (gratuito da hospedagem).',\n productDescription: {\n 1: 'O ',\n 2: ' é uma solução da HostGator para que empreendedores tenham um endereço de e-mail personalizado com o nome da sua empresa.',\n 3: 'Aproveite agora mesmo e crie sua primeira conta de e-mail profissional com ',\n 4: '30 dias grátis! ',\n },\n termDescriptions: '<0>Após o período de teste grátis, a assinatura mensal do <1> {{productName}} é no valor de <2>{{amount}} por conta de e-mail <3>com renovação automática, podendo ser cancelada quando quiser.',\n titleForm: 'Crie a sua primeira conta de e-mail profissional Titan Essentials',\n },\n bannerTitanTrialInSites: {\n title: 'Crie sua primeira conta de e-mail profissional Titan Essential',\n description: 'O E-mail Profissional é uma solução da HostGator para que empreendedores tenham um endereço de e-mail personalizado com o nome da sua empresa.',\n tagOfTrialTime: '30 DIAS GRÁTIS PARA TESTAR',\n },\n modalToAlertUpgradeWhenInTrialPlan: {\n title: 'Alteração de plano',\n description: 'Você ainda tem {{ remainingPeriod }} dias de teste grátis , mas não se preocupe, você não vai perder isso que falta. Ao confirmar a alteração do plano vamos adicionar o que resta como dias extras ao final do ciclo contratado.',\n buttons: {\n cancel: 'CANCELAR',\n confirm: 'CONFIRMAR ALTERAÇÃO',\n },\n },\n customerProfile: {\n start: 'Vamos iniciar?',\n skip: 'Pular',\n send: 'Enviar',\n questions: 'Perguntas',\n placeholder: 'comentar',\n select: 'Selecionar',\n },\n sites: {\n tooltip: 'Esta tela é dedicada ao gerenciamento de sites de hospedagens compartilhadas.',\n newTooltip: {\n 0: 'Veja os seus',\n 1: ' sites hospedados aqui na HostGator :)',\n },\n pageDescription: {\n empty: {\n title: 'Esta tela é dedicada ao gerenciamento de sites de hospedagens compartilhadas.',\n subtitle: 'Veja abaixo o que deseja fazer:',\n },\n hasOtherThanPendingStites: {\n singleSubtitle: 'Veja os seus sites hospedados aqui na HostGator :)',\n composedSubtitle: {\n 0: 'Escolha a plataforma de criação ',\n 1: 'para os sites abaixo ou outros domínios que você tenha',\n 2: ' e inicie a criação desses sites ',\n 3: ':)',\n },\n buttonLabel: 'Criar site',\n },\n onlyPendingSites: {\n subtitle: 'Aguarde a ativação das assinaturas para iniciar a criação do seu site :)',\n },\n },\n emptyOptions: {\n hireHost: 'Contratar uma hospedagem',\n hirePlan: 'Contratar um domínio',\n manageServer: 'Gerenciar seu Servidor',\n manageEmails: 'Gerenciar contas de e-mail',\n manageDomains: 'Gerenciar domínios',\n manageSecurity: 'Gerenciar produtos de segurança',\n manageAcademy: 'Ver cursos do HostGator Academy',\n },\n modalExclusion: {\n title: 'Desativação do Criador de Sites',\n descriptor: {\n 0: 'Está ação é irreversível! ',\n 1: 'O Criador de Site do domínio ',\n 2: ' será desabilitado e você não terá mais acesso a ferramenta.',\n },\n radioText: 'Desejo remover o Criador de Sites mesmo assim.',\n cancelLabel: 'Desistir da ação',\n continueLabel: 'Confirmar desativação',\n },\n exclusionToast: {\n success: 'O Criador de Sites foi desabilitado e o conteúdo do seu site removido.',\n failure: 'Não foi possível executar essa ação. Tente novamente mais tarde.',\n },\n filter: {\n options: {\n all: 'Todos',\n out: 'Fora do ar',\n pending: 'Com pendência financeira',\n filterBy: 'Filtrar por:',\n },\n placeholder: 'Busque por domínio',\n clear: 'Limpar filtros',\n noResults: {\n field: 'Não encontramos nenhum site com o nome digitado acima.',\n option: '<0>Não encontramos nenhum site <1>\"{{status}}\"<2>.',\n },\n },\n createSiteBanner: {\n title: {\n 0: 'Crie um site',\n 1: ' e deixe sua marca na internet!',\n },\n subtitle: 'Escolha a plataforma de criação, instale, veja dicas de design e de como criar o conteúdo. :)',\n button: 'Criar site ou Loja virtual',\n tools: {\n wordpress: 'WordPress',\n sitebuilder: 'Criador de sites',\n other: 'Outras ferramentas',\n },\n },\n siteModals: {\n domainCanceled: {\n title: 'Site indisponível',\n contentDomainName: 'O domínio {{domain}} não está mais registrado na HostGator.',\n contentsDomainName: 'Os domínios {{domain}} não estão mais registrados na HostGator.',\n contentInfo: ' Ele estará disponível na lista de sites, pois seu conteúdo continua com a gente. Caso queira registrar o domínio novamente ',\n contentsInfo: ' Eles estarão disponíveis na lista de sites, pois seu conteúdo continua com a gente. Caso queira registrar os domínios novamente ',\n contentRedirect: 'acesse o site da HostGator.',\n button: 'Entendido',\n },\n planCanceled: {\n title: 'Site removido',\n contentDomainName: '<0>Devido o cancelamento do plano, <1>{{domain}} e os demais domínios que estavam nesse plano não estão mais disponíveis<2> na lista de site. Caso queira contratar um novo plano ',\n contentRedirect: 'acesse o site da HostGator.',\n button: 'Entendido',\n },\n newSite: {\n title: '<0>Crie agora mesmo um site para <1>{{domain}}',\n contentInfo: 'Escolha a plataforma de criação, instale e veja dicas de design e como criar o conteúdo :)',\n button: 'Criar site',\n },\n createSite: {\n title: {\n 0: 'Vamos expandir sua marca',\n 1: ' criando um novo site?',\n },\n description: {\n 0: '5 bilhões de pessoas no mundo estão usando a internet!',\n 1: 'Não perca tempo e crie um site personalizado para',\n 2: ' {{domain}}',\n },\n toolsText: {\n 0: 'Você pode usar o',\n 1: ' Criador de Sites, Wordpress',\n 2: ' ou outras ferramentas para instalar e personalizar. :)',\n },\n buttonCreate: 'Criar site',\n buttonClose: 'Não quero expandir minha marca',\n },\n createSiteWithPartners: {\n title: {\n 0: 'Faça seu site ',\n 1: 'do jeito que você imaginou!',\n },\n description: {\n 0: 'Conte com um ',\n 1: 'especialista em criação de sites ',\n 2: 'para o seu projeto ou faça você mesmo. :)',\n },\n toolsText: {\n 0: 'Você pode usar o',\n 1: ' Criador de Sites, Wordpress',\n 2: ' ou outras ferramentas para instalar e personalizar. :)',\n },\n buttonCreate: 'Criar com um especialista',\n buttonClose: 'Criar eu mesmo',\n },\n ecommercePlusOffer: {\n title: 'Pronto para criar sua loja online?',\n descriptionFirst: {\n 0: 'Crie sua loja online agora mesmo para o domínio',\n 1: ' {{domain }} ',\n 2: 'e aproveite os 14 dias de teste do plugin E-commerce Plus.',\n },\n descriptionSecond: 'Nele você irá ter acesso a várias ferramentas especializadas para tornar sua loja um sucesso!',\n continue: 'Criar loja online',\n skip: 'Vou criar mais tarde',\n },\n },\n },\n warningStatus: {\n pending: {\n label: 'Aguardando a compensação do pagamento',\n tooltip: 'A compensação de pagamento por boleto leva até 72 horas. Caso já tenha pago, por favor, aguarde.',\n buttonLabel: 'Pagar fatura',\n },\n analysis: {\n label: 'Realizando análise de segurança. Esse processo pode levar até 48 horas',\n tooltip: 'Toda nova compra passa pelo processo de análise de segurança antes de ser definitivamente aprovada. É um procedimento normal, não se preocupe.',\n },\n nearDue: {\n day: 'dia',\n days: 'dias',\n label: '{{date}} para o site ficar fora do ar',\n tooltip: 'Sua fatura de renovação já está disponível. Realize o pagamento e evite que seu site fique fora do ar.',\n buttonLabel: 'Pagar fatura',\n },\n overdue: {\n tooltip: 'Ainda não identificamos o pagamento da sua fatura de renovação e ela já está vencida. Realize o pagamento e evite que seu site fique fora do ar.',\n buttonLabel: 'Pagar fatura',\n },\n suspended: {\n subLabel: 'Site fora do ar',\n subLabelTooltip: 'Seu site está fora do ar porque ainda não identificamos o pagamento da fatura de renovação.',\n label: '{{date}} para o site ser cancelado e ter seus arquivos excluídos',\n tooltip: 'Ainda não identificamos o pagamento da sua fatura de renovação. Realize o pagamento e evite perder seu site e arquivos.',\n day: 'dia',\n days: 'dias',\n },\n },\n\n academyPassTrial: {\n titleCard: 'Assinatura Academy Pass',\n title: '30 dias grátis para você aprender a alavancar seus resultados na internet',\n descriptionText: 'O passo-a-passo que faltava para você aprender a aumentar seus resultados na internet através de cursos rápidos e dinâmicos, feitos para quem não tem tempo a perder.',\n descriptionTextBold: 'E o melhor: com 30 dias grátis para você testar',\n button: 'Iniciar meu teste grátis',\n footer: '*Após o término do período de testes de 30 dias, será cobrado o valor de R$19,90 por mês, na forma de pagamento escolhida pelo cliente no momento da ativação.',\n middleSectionDust: {\n 0: 'Deixe a concorrência comendo poeira',\n 1: 'Aprenda com experts do mercado as melhores técnicas para',\n 2: ' aumentar as suas chances de sucesso na internet',\n 3: ' e conquistar muito mais resultados.',\n button: 'Quero testar grátis',\n },\n middleSectionKnowledge: {\n 0: 'Não importa o seu nível de conhecimento no assunto',\n 1: 'Todos os cursos são 100% atualizados e organizados para você ter um',\n 2: ' passo-a-passo de como aplicar em seu negócio',\n 3: ' os conhecimentos aprendidos.',\n button: 'Quero testar grátis',\n },\n middleSectionSaveMoney: {\n 0: 'Feitos para você economizar tempo e dinheiro',\n 1: 'Chega de perder tempo e dinheiro comprando vários cursos. Com o HostGator Academy você tem',\n 2: ' dezenas de cursos sobre variados assuntos em um só lugar.',\n 3: ' E hoje, por 30 dias totalmente grátis.',\n button: 'Iniciar teste grátis',\n },\n middleSectionVideo: {\n title: 'Conheça um pouco mais dos cursos mais famosos do HostGator Academy',\n descInfOne: '+200 mil alunos',\n descInfTwo: '500 aulas disponíveis',\n descInfThree: '30 professores experts',\n linkVideo: 'https://www.youtube.com/embed/SDDR-0ssKxA?enablejsapi=1&origin=http://cliente.whmcs.brasil/',\n button: 'Quero iniciar meu teste grátis',\n },\n middleSectionCards: {\n title: 'Nossos cursos já transformaram o negócio de muitos empreendedores e você pode ser o próximo.',\n textCardOne: 'Conteúdo de fácil aprendizagem, totalmente personalizável e com recursos que ainda não conhecia.',\n autorCardOne: '– Anderson Silva de Souza',\n footerCardOne: 'Crie um Site Profissional Hoje Mesmo',\n\n textCardTwo: 'Graças a Deus tive acesso a seu curso e que maravilha, consegui fazer tudo funcionar. Valeu mesmo muito obrigado.',\n autorCardTwo: '– Claudevan Macedo Bandeira',\n footerCardTwo: 'Meu Primeiro Site Wordpress no Ar',\n\n textCardThree: 'A melhor explicação desse assunto que eu pude ter comparado aos outros online que tem por aí.',\n autorCardThree: '– Amanda Cristina M. Monteiro',\n footerCardThree: 'Crie um Site Profissional Hoje Mesmo',\n },\n middleSectionFooter: {\n title: 'Agora é com você!',\n textFooter: {\n 0: 'Aproveite a chance de aprender ',\n 1: 'técnicas que vão revolucionar o seu negócio na internet ',\n 2: 'com os melhores profissionais do mercado. Tudo isso em uma metodologia fácil e 100% prática por 30 dias grátis.',\n },\n btnFooter: 'Quero testar grátis agora',\n },\n },\n codeGuardLP: {\n mainTitle: 'Assinatura CodeGuard',\n getNow: {\n title: {\n 0: 'Seu site seguro ',\n 1: 'com backups diários',\n },\n description: 'Proteção total e monitoramento para que seus dados estejam sempre em segurança',\n listTitle: {\n 0: 'Contrate o ',\n 1: 'Codeguard Básico ',\n 2: 'e conte com:',\n },\n featureList: {\n 1: 'Backups diários automáticos',\n 2: 'Restauração completa do site',\n 3: 'Monitoramento diário de alterações no site',\n 4: 'Rastreio de performance do backup',\n 5: 'Banco de dados ilimitado',\n 6: 'Backup de até 5 sites',\n 7: '1 GB de armazenamento',\n 8: 'E muito mais',\n },\n formTitle: 'Plano Básico',\n formDescription: 'Escolha seu domínio:',\n formFirstToggleLabel: 'Selecionar um domínio contratado com a HostGator',\n formSecondToggleLabel: 'Digitar outro domínio',\n formSecondTogglePlaceholder: 'Digitar seu domínio',\n cycleLabel: 'Selecione o ciclo:',\n selectePaymentLabel: 'Selecione a forma de pagamento:',\n cycleOptions: {\n annually: 'Anual',\n semiannually: 'Semestral',\n quarterly: 'Trimestral',\n monthly: 'Mensal',\n },\n cyclePer: {\n annually: '/ano',\n semiannually: '/semestre',\n quarterly: '/trimestre',\n monthly: '/mês',\n },\n toBePaid: 'Valor a pagar:',\n hgCodeguard: 'https://www.hostgator.com.br/backup-online',\n needMoreLabel: 'Precisa de um plano mais robusto? Confira opções no nosso site:',\n needMoreButtonText: 'Ver todos os planos Codeguard',\n },\n detailsSections: {\n title: {\n 0: 'Tenha o ',\n 1: 'backup do seu site ',\n 2: 'em nuvem com o Codeguard',\n },\n firstSection: {\n title: {\n 0: 'Problemas podem acontecer com qualquer site. ',\n 1: 'Esteja preparado!',\n },\n description: {\n 0: 'O Codeguard cria ',\n 1: 'cópias de segurança ',\n 2: 'do seu site na nuvem para você resgatar em caso de emergência.',\n 3: 'Com o backup online você pode recuperar seus sites e dados instantaneamente com apenas alguns cliques.',\n },\n buttonLabel: 'Ativar backup para meu site',\n },\n secondSection: {\n title: {\n 0: 'Como o ',\n 1: 'Codeguard ',\n 2: 'protege o site?',\n },\n description: {\n 0: 'O CodeGuard funciona como uma máquina do tempo do seu site. Se você tiver algum problema na configuração ou sofrer um ataque hacker, pode ficar tranquilo.',\n 1: 'Você pode recuperar todo seu site com apenas alguns cliques e zero complicações.',\n },\n buttonLabel: 'Quero proteger meu site',\n },\n },\n discoverBenefits: {\n title: 'Descubra por que o Codeguard é perfeito para seu site',\n benefits: {\n 0: {\n title: 'Backup automático e em nuvem',\n description: 'Deixe que o CodeGuard tome conta do seu site. Todo o processo é automatizado para você não se preocupar.',\n },\n 1: {\n title: 'Restauração fácil e completa',\n description: 'Caso aconteça algum imprevisto, restaure todo seu site, ou arquivos específicos, com extrema facilidade.',\n },\n 2: {\n title: 'Notificação de alterações no site',\n description: 'Tenha controle total das alterações que acontecem em seu site e monitore possíveis ameaças.',\n },\n },\n videoTitle: 'A máquina do tempo do seu site',\n videoDescription: 'Tenha um serviço de backup rápido e fácil, que rastreia todas as alterações do seu site diariamente.',\n buttonLabel: 'Quero mais proteção',\n },\n snappyBanner: {\n title: 'Seu site seguro com backups diários',\n buttonLabel: 'Contrate agora',\n },\n },\n asaas: asaas.BR,\n productDetailsBackup: {\n title: 'Backup',\n description: {\n 0: 'O último backup de ',\n 1: ' foi feito em ',\n },\n buttonLabel: 'Fazer backup',\n },\n};\n","import billing from './billing';\nimport domains from './domains';\nimport routes from './routes';\nimport sites from './sites';\nimport phoneValidation from './phoneValidation';\nimport emailValidation from './emailValidation';\nimport menu from './menu';\nimport title from './title';\nimport linkNaBio from './linkNaBio';\n\nexport default {\n appTitle: 'Portal del Cliente',\n services: 'Servicios',\n activeSsl: 'Activar Certificado SSL',\n more: 'Ver más',\n morev2: 'Ver más contenido de Ayuda.',\n showInvoices: 'Ver Facturas',\n nextDueDate: 'Vencimiento',\n autoRenewal: 'Renovación automática',\n no: 'No',\n yes: 'Sí',\n registerDate: 'Fecha de registro',\n status: 'Status',\n changeDNS: 'Cambiar DNS',\n notifyFailMessage: 'La operación solicitada ha fallado',\n notifySuccessMessage: 'Operación realizada con éxito',\n manageSubscriptionMessage01: 'Ahora las informaciones de su suscripción, como pago y cancelación, estaran disponibles a través del botón ',\n manageSubscriptionMessage02: 'Administrar Suscripción',\n manageSubscriptionMessage03: ' que se encuentra arriba.',\n dialogRegisterAndUseNewCard: 'Registrar y utilizar una nueva tarjeta',\n useExistingCard: 'Utilizar tarjeta guardada',\n useNewCard: 'Utilizar una Nueva Tarjeta',\n modalbetaDescription: 'Este Portal del Cliente aún se encuentra en versión beta, y por lo tanto, algunas páginas no están 100% listas. Al acceder a determinadas funcionalidades serás redireccionado a nuestra versión anterior.',\n actions: {\n ssl: {\n active: 'Certificado SSL',\n inactive: 'Certificado SSL',\n },\n webpresence: {\n active: 'Página Fácil',\n inactive: 'Crear Página Fácil',\n },\n webmail: {\n active: 'E-mail',\n inactive: 'E-mail',\n },\n cpanel: {\n active: 'cPanel',\n inactive: 'cPanel',\n },\n sitelock: {\n active: 'SiteLock',\n inactive: 'SiteLock',\n },\n websitebuilder: {\n active: 'Editar Sitio Web',\n inactive: 'Activar Creador de Sitios',\n access: 'Acesso Creador de Sitios',\n remove: 'Eliminar sitio',\n },\n 'websitebuilder-active-edit': {\n active: 'Editar Sitio Web',\n inactive: 'Activar Creador de Sitios',\n },\n 'websitebuilder-on-shared-plans': {\n active: 'Editar Sitio Web',\n },\n 'manage-site': {\n active: 'Administrar Creador de Sitios Web',\n },\n 'create-site': {\n active: 'Crear Sitio Web',\n },\n 'cpanel-pwd-edit': {\n active: 'Modificar contraseña del cPanel',\n },\n 'plan-switch': {\n active: 'Modificar Plan / Ciclo',\n },\n 'old-reseller-plan-switch': {\n active: 'Escoger un Nuevo Plan',\n },\n 'product-details': {\n active: 'Detalles de productos',\n },\n whm: {\n active: 'Panel WHM',\n },\n 'whm-reseller': {\n access: 'Panel WHM',\n active: 'Panel WHM',\n },\n 'whm-plesk': {\n active: 'Panel Plesk',\n },\n 'edit-dns': {\n active: 'Configurar Dominio',\n },\n wizard: {\n active: 'Configurar Dominio',\n },\n wphosting: {\n active: 'WordPress',\n },\n domainLink: {\n active: 'Acceder al Sitio Web',\n },\n codeguard: {\n active: 'Acceder CodeGuard',\n },\n 'cpanel-email': {\n active: 'Correos Electrónicos',\n },\n 'cpanel-addon': {\n active: 'Dominios Adicionales',\n },\n 'cpanel-backup': {\n active: 'Backup',\n },\n cloudflare: {\n active: 'Rendimiento de sitios',\n },\n 'cpanel-dns': {\n active: 'Zona DNS',\n },\n addEmail: {\n active: 'Correos Electrónicos',\n },\n 'contact-info': {\n active: 'Editar Infos Contacto',\n },\n 'domain-renewal': {\n active: 'Renovar Dominio',\n },\n 'domain-protected-id': {\n active: 'Protect ID',\n },\n 'domain-register-lock': {\n active: 'Bloqueo de Registro',\n },\n 'vps-reboot': {\n active: 'Reboot',\n },\n dataAccess: {\n active: 'Cambiar Contraseña de Acceso',\n },\n 'sites-cloudflare': 'Rendimiento de sitios',\n 'sites-gerenciar': 'Administrar alojamiento web',\n 'sites-backup': 'Copia de seguridad',\n 'sites-exclude': 'Desactivar el Creador de Sitios',\n 'sites-easyPage': 'Página Fácil',\n 'sites-signatures': 'Ver suscripciones vinculadas al sitio',\n 'sites-ssl': 'Certificado SSL',\n 'sites-sitelock': '',\n 'sites-actions-wordpress': 'Acceder a WordPress',\n 'sites-actions-sitebuilder': 'Acceder al Creador de Sitios',\n 'sites-actions-reseller': 'Panel WHM',\n },\n hg_credits: 'Créditos HostGator',\n dlocal: 'Tarjeta de Crédito',\n creditCard: 'Tarjeta de Crédito',\n dlocalcash: 'Cupón de Pago',\n payu_boleto: 'Cupón de Pago',\n dlocal_boleto: 'dLocal Boleto',\n boleto: 'Efectivo',\n paypal: 'PayPal',\n gp_paypal: 'PayPal',\n payu: 'none',\n invoiceAction: {\n dlocal: 'Pagar con tarjeta',\n creditCard: 'Pagar con tarjeta',\n dlocalcash: 'Generar cupón',\n payu_boleto: 'Generar cupón',\n dlocal_boleto: 'Generar cupón',\n boleto: 'Generar cupón',\n paypal: 'Pagar con PayPal',\n gp_paypal: 'Pagar con Paypal',\n pay_invoice: 'Pagar Factura',\n },\n month: 'Mes',\n year: 'Año',\n save: 'Guardar',\n cancel: 'Cancelar',\n backToList: 'Volver a la lista',\n clean: 'Borrar',\n removeCreditCard: 'Eliminar tarjeta de crédito',\n creditCardExpDate: 'Vence el',\n savedCreditCard: 'Tarjeta Registrada',\n createCreditCard: 'Registrar Tarjeta de Crédito',\n saveCreditCard: 'Guardar',\n\n errorSavingCreditCard: 'Error al guardar tarjeta de crédito',\n showReceiptAction: 'Ver Factura',\n payInvoiceAction: 'Pagar',\n payExpiredInvoiceAction: 'Pagar factura vencida',\n unpaidInvoicesEmptyPageSubtitle: 'Por el momento no tienes facturas pendientes :)',\n paidInvoicesEmptyPageSubtitle: 'No tienes facturas pagadas hasta el momento :)',\n processingSelectedPaymentPleaseWait: 'Procesando el método de pago elegido. Por favor, no cierre esta ventana.',\n selectCreditCardInstallments: 'Seleccione el número de cuotas',\n creditCardInstallmentsQuestion: '¿En cuántas cuotas quieres pagar?',\n creditCardInstallmentsTooltipDescription: '<1>Las opciones de pago se definen de acuerdo al valor del producto y su ciclo de pago. Ver más en: <2>Reglas de Cuotas',\n creditCardInstallmentsTooltipDescriptionLink: 'https://soporte-latam.hostgator.com',\n creditCardInstallmentLabel: '{{installments}}x de {{installmentValue}}{{fees}}{{totalValue}}',\n creditCardInstallmentFees: '(con tarifa)',\n creditCardInstallmentsPopupTitle: '¡Ahora puedes dividir tu factura con tu tarjeta de crédito!',\n creditCardInstallmentsPopupKnowMoreURL: 'https://soporte-latam.hostgator.com',\n cancelledInvoicesEmptyPageSubtitle: 'No tienes facturas anuladas hasta el momento :)',\n Unpaid: 'Pendiente',\n Paid: 'Pagada',\n Cancelled: 'Anulada',\n invoiceDueDateLabel: 'Vencimiento',\n invoiceTotalLabel: 'Valor Total',\n selectPaymentMethod: 'Seleccione la forma de pago',\n domainCyclePayment: 'Ciclo de pago',\n invoicePaymentMethod: 'Forma de pago',\n invoiceDescription: 'Descripción',\n invoiceValue: 'Valor ($)',\n invoiceCredit: 'Crédito',\n invoiceSubtotal: 'Sub total',\n invoiceTaxes: 'Impuestos',\n invoicePaidValue: 'Ya fue pagado',\n invoiceUnpaidValue: 'Saldo a Pagar',\n invoiceTotalUnpaidValue: 'Valor a Pagar',\n invoiceFisrtPayment: 'Valor del primer pago',\n invoiceValueReminiscent: 'Valor',\n invoiceYouHave: 'Usted tiene',\n invoiceToPayWithTotal: 'factura (s) para pagar con un total de',\n invoiceStaticMessage: 'Tienes <1>{{ totalInvoice }} factura(s) pendientes para pagar con un <3>total del ',\n domainStaticMessage: '¡Evite la suspensión temporal de su sitio web! Haga <1>clic aquí para confirmar su dirección de correo electrónico y evitar la suspensión.',\n domainCritialMessage: 'Usted tiene uno o más sitios web suspendidos temporalmente. Haga <1>clic aquí para confirmar su dirección de correo electrónico y reactivar su sitio web.',\n myAccount: 'Mi Cuenta',\n myAccountAlertMessage: 'En esta nueva versión, todavía estamos creando las páginas de su cuenta (Mis Datos, Modificar Contraseña, Administrar Usuarios). Si desea modificar algo, clic abajo :)',\n myAccountAlertAction: 'Ver mi cuenta',\n Domain: 'Dominio',\n Sitelock: 'Sitelock',\n hosting: 'Administrar',\n addon: 'Ver más',\n domain: 'Administrar',\n subdomains: 'Subdominios',\n pendingStatus: 'Su sitio no está disponível por el momento. Pague la factura que está pendiente.',\n contactUs_invoice: 'Para generar una segunda vía de tu factura, pónte en contacto con nuestro soporte financiero',\n suspendedStatus: 'Sitio web suspendido. Realiza el pago de tu factura para reactivarlo.',\n nfseTitle: 'Facturas',\n nfseNumber: 'Nº Factura',\n nfseLink: 'Ver Factura',\n servername: 'Nombre del Servidor',\n server_ips: 'IPs Atribuidos',\n username: 'Nombre del Usuario',\n access_ssh: 'Accesso via SSH',\n hostnameFtp: 'Hostname FTP',\n temporaryLink: 'URL Temporal',\n host: 'Host',\n port: 'Puerta',\n hireDomain: 'Contratar Dominio',\n addSite: 'Agregar sitio',\n hireProduct: 'Contratar Producto',\n ErrorSSO: 'No se pudo acceder al panel. Inténtalo nuevamente o entra en contacto con el soporte.',\n redirectPageMessage: {\n WHMPanel: 'Aguarde por favor, lo estamos direccionando para el Panel WHMCS...',\n siteBuilder: 'Aguarde por favor, lo estamos direccionando para el Creador de Sitios...',\n },\n noResults: {\n tab: {\n sites: 'No hemos encontramos ningún sitio web. <1>Haz clic aquí para conocer nuestros planes.',\n emails: 'Usted no tiene ninguna cuenta de correo electrónico creada.',\n host: 'En el momento no cuentas con un plan de hosting para administrar tus correos. Contrata un plan a través de nuestro <1>sitio web.',\n domains: 'No hemos encontrado ningún dominio contratado. <1>Haz clic aquí para contratar un dominio.',\n products: 'No hemos encontrado ningún producto o servicio contratado. <1>Haz clic aquí para conocer nuestros servicios.',\n },\n filter: 'No hay resultados. Inténtalo de nuevo :)',\n },\n emails: {\n message: {\n withServer: 'Los correos de los planes de VPS y Dedicado NO se muestran a continuación. La administración se realiza únicamente en el cPanel. ',\n },\n buttonConfirmation: 'SÍ, ESTOY SEGURO',\n storage: 'Almacenamiento',\n changeStorage: 'Cambiar almacenamiento',\n changePassword: 'Cambiar contraseña',\n deleteAccount: 'Eliminar Cuenta',\n createAccount: 'Crear Cuenta',\n name: 'Nombre del Correo',\n password: 'Tu contraseña debe:',\n quota: 'Capacidad',\n unlimited: 'Ilimitado',\n unlimitedToolTip: 'Al definir la capacidad de almacenamiento, cuando esta llegue a su límite, no podrás recibir más correos.',\n createButton: 'Crear Cuenta de Correo',\n createButtonAndStay: 'Crear Cuenta de Correo y permanecer en esta pantalla',\n confirmPassword: 'Confirmar contraseña',\n specialCharacters: 'El correo electrónico solo permite punto, guión y subrayado como caracteres especiales.',\n createEmailSuccess: 'El correo electrónico ha sido creado exitosamente! :)',\n createEmailError: 'Ocurrió una falla en la creación de tu cuenta de correo. Por favor, inténtalo más tarde',\n or: 'o',\n deleteEmailAccount: 'Eliminar cuenta de correo',\n confirmationDeleteEmail: '¿Estás seguro de que deseas eliminar la cuenta de correo',\n seeEmail: 'VER CORREOS',\n warningDeleteEmail: '¡Eliminarás todos los correos!',\n alter: 'Cambiar',\n passwordPlaceholder: 'Contraseña',\n alterEmailPassword: 'Cambiar la contraseña del correo',\n toolTipQuota: 'Al definir la capacidad de almacenamiento, cuando esta llegue a su límite, no podrás recibir más correos',\n change: 'CAMBIAR',\n typeQuotaStorage: 'Ingrese la capacidad de almacenamiento que estará disponible para el correo electrónico <1>{{ emailAddress }} o configúrelo como ilimitado:',\n },\n cardAlerts: {\n suspendedPlan: 'Producto suspendido. Paga la factura para reactivar.',\n suspendedSite: 'Sitio web suspendido. Realiza el pago de tu factura para reactivarlo.',\n pendingPlan: 'Producto no disponible. Paga la factura para activar tu producto.',\n pendingSitePlan: 'Sitio web no disponible. Realiza el pago de tu factura para activarlo.',\n pendingSite: 'Sitio web no disponible. Paga la factura para activarlo.',\n unpaidInvoice: 'Genera una copia de tu factura entrando en contacto con el soporte financiero.',\n invoicePhishingCheck: 'Espera mientras procesamos el pago.',\n cancelledProduct: 'Producto cancelado. No es posible reactivarlo. Por favor contrata un nuevo producto a través de nuestro sitio web.',\n domain: {\n pending: 'Dominio pendiente. <1>Realiza el pago de la factura abierta.',\n pendingTransfer: 'Dominio en proceso de transferencia. Aguarda más instrucciones por correo.',\n registerError: 'Error en el registro del dominio. Aguarda más instrucciones por correo.',\n expired: 'Dominio vencido. <1>Realiza el pago de la factura abierta.',\n expiredSimpleMessage: '<0>Su Dominio <1>venció el {{data}}. <2>Para más informaciones, comuníquese con soporte.',\n cancelled: 'Dominio cancelado. No es posible reactivarlo. Contrata un nuevo dominio en nuestro <1>sitio web.',\n emailConfirmSuccess: '<0>Un correo electrónico a sido enviado para {{email}}. Siga las instrucciones en el mensaje para evitar suspender su dominio. <1>Si en algunos minutos usted no recibir el correo electrónico, por favor compruebe su carpeta de spam. <2>Para cambiar su correo electrónico, deberá abrir un nuevo ticket con el equipo de soporte. <3>clic aquí.',\n emailSuspended: '<0>Un correo electrónico a sido enviado para {{email}}. Siga las instrucciones en el mensaje para evitar suspender su dominio. <1>Si en algunos minutos usted no recibir el correo electrónico, por favor compruebe su carpeta de spam. <2>Para cambiar su correo electrónico, deberá abrir un nuevo ticket con el equipo de soporte. <3>clic aquí. <4>1- Espere la propagación (entre 4h y 24h) <5>2- Limpie la caché',\n cancelledPendingInvoice: 'dominio pendiente. <1>Póngase en contacto con el servicio de asistencia.',\n cancelledExpiredInvoice: 'dominio vencido. <1>Póngase en contacto con el servicio de asistencia.',\n messages: {\n nextDueDateInvoice: {\n 0: 'Su factura ',\n 1: 'vence el día ',\n 2: '¡Pague el cupón de pago ahora mismo',\n 3: ' y no corra el riesgo de perder su dominio!',\n },\n nextDueDateInvoiceCreditCard: {\n 0: 'Su factura ',\n 1: 'vence el día',\n 3: 'y se le cobrará automáticamente a través de Tarjeta de Crédito.',\n },\n nextDueDateInvoicePayPal: {\n 0: 'Su factura ',\n 1: 'vence el día ',\n 3: 'y se le cobrará automáticamente a través de PayPal.',\n },\n dueDateInvoice: {\n 0: 'Su factura ',\n 1: 'venció el día ',\n 2: ' y su dominio caducará en ',\n 3: 'dias. ',\n 4: 'dia. ',\n 5: '¡Pague la factura ahora mismo!',\n },\n expiredInvoice: {\n 0: 'Su factura ',\n 1: 'venció el día ',\n 2: ' y su dominio será cancelado en breve. ',\n 3: '¡Pague la factura ahora mismo!',\n },\n expiredOnGracePeriod: {\n 0: 'El dominio ha caducado y esta es la última oportunidad para renovarlo. ',\n 1: 'Pague la factura ahora mismo',\n 2: ' para no correr el riesgo de perderlo.',\n },\n expiredGracePeriodOverdue: {\n 0: 'Su dominio ',\n 1: 'venció el ',\n 2: '. Para más informaciones, comuníquese con soporte.',\n },\n disableAutoRenovation: {\n 0: 'Según lo solicitado, su dominio ',\n 1: 'será cancelado el día ',\n },\n newDisableAutoRenovation: {\n 0: 'Su dominio ',\n 1: 'vence el ',\n 2: 'Active la renovación automática',\n 3: ' para no correr el riesgo de perderlo.',\n },\n dueDateDisabledAutoRenovation: {\n 0: 'Su dominio ',\n 1: 'vence el ',\n 2: 'Renueve ahora mismo',\n 3: ' para no correr el riesgo de perderlo.',\n },\n overDueDateDisabledAutoRenovation: {\n 0: 'Su dominio ',\n 1: 'venció ',\n 2: ' y caducará el ',\n 3: ' Renueve ahora mismo',\n 4: ' para no correr el riesgo de perderlo.',\n },\n cancelledDomain: {\n 0: 'Su dominio ',\n 1: 'fue cancelado el dia ',\n 2: ' por falta de pago. ',\n 3: '¡Ingrese a nuestro sitio web y contrate un nuevo dominio!',\n },\n cancelledByAbuseTOS: {\n 0: 'Su dominio ',\n 1: 'fue cancelado',\n 2: '. Para más informaciónes ingrese a nuestra ',\n 3: 'Central de Ayuda.',\n },\n },\n suspendedPlanLink: 'Producto suspendido. <1>Por favor realiza el pago de tu factura.',\n pendingPlanLink: 'Producto pendiente. <1>Por favor realiza el pago de tu factura.',\n cancelledPlanLink: 'Producto cancelado. No es posible reactivarlo. <1>Por favor contrata un nuevo plan a través de nuestro sitio web.',\n terminatedPlanLink: 'Producto finalizado. No es posible reactivarlo. <1>Por favor contrata un nuevo plan a través de nuestro sitio web.',\n buildingPlanLink: 'Su servidor está siendo configurado. Aguarde hasta que esté disponible para el uso. ',\n },\n },\n billing: billing.MX,\n invoices: billing.MX.invoices,\n subscriptions: billing.MX.subscriptions,\n creditcard: {\n label: {\n number: 'Número de la tarjeta',\n date: 'Vencimiento',\n cvvShort: 'Código',\n cvvLong: 'Código de Seguridad (CVC)',\n name: 'Nombre como aparece en la tarjeta',\n },\n placeholder: {\n number: 'XXXX XXXX XXXX XXXX',\n date: 'MM/AA',\n cvv: 'Ex: 123',\n name: 'NOMBRE',\n },\n },\n product: {\n Pending: 'Pendiente',\n Active: 'Activo',\n Completed: 'Completo',\n Suspended: 'Suspendido',\n Terminated: 'Cerrado',\n Cancelled: 'Cerrado',\n Fraud: 'Fraude',\n Building: 'En Configuración',\n ActivationPending: 'Esperando activación',\n },\n statusProductDomain: {\n active: 'Registrado',\n pending: 'Abierto',\n pendingTransfer: 'Em Transferencia',\n registerError: 'Registro Fallido',\n expired: 'Caducado',\n cancelled: 'Cancelado',\n nextDueDate: 'Por vencer',\n overDueDate: 'Vencido',\n },\n details: {\n product: {\n domain: 'Administrar',\n subdomains: 'Subdominios',\n emptySubdomains: 'No hay subdominios',\n dedicated: 'Administrar',\n windows: 'Administrar',\n weebly: 'Ver más',\n reseller: 'Administrar',\n shared: 'Administrar',\n wordpress: 'Administrar',\n websitebuilder: 'Administrar',\n hostingaccount: 'Ver más',\n reselleraccount: 'Ver más',\n upgrade: 'Ver más',\n codeguard: 'Ver más',\n other: 'Ver más',\n protectedid: 'Ver más',\n ssl: 'Ver más',\n gapps: 'Ver más',\n jumpstart: 'Ver más',\n ip: 'Ver más',\n sitelock: 'Ver más',\n streaming: 'Ver más',\n vps: 'Administrar',\n sql: 'Ver más',\n revenda: 'Ver más',\n setup: 'Ver más',\n suspended: 'Pagar Factura',\n },\n service: {\n websitebuilder: 'Ver más',\n server: 'Ver más',\n wordpress: 'Ver más',\n shared: 'Ver más',\n hostingaccount: 'Ver más',\n reseller: 'Ver más',\n reselleraccount: 'Ver más',\n revenda: 'Ver más',\n suspended: 'Reactivar Sitio',\n dedicated: 'Ver más',\n weebly: 'Ver más',\n windows: 'Ver más',\n },\n },\n filter: {\n product: 'Producto',\n site: 'Sitio',\n siteName: 'Sitio Web',\n domainName: 'Dominio',\n emails: 'El correo',\n title: 'Filtrar por',\n status: 'Status',\n invoiceNumber: 'Número de la factura',\n Active: 'Activo',\n Pending: 'Pendiente',\n Suspended: 'Suspendido',\n Cancelled: 'Anulado',\n Terminated: 'Cerrado',\n Building: 'En Configuración',\n allSites: 'Todos los Sitios',\n allProducts: 'Todos los Productos',\n allStatus: 'Todos los Status',\n allDomains: 'Todos os Dominios',\n open: 'Abierto',\n hold: 'Abierto',\n conclude: 'Terminado',\n search: 'Asunto o número del ticket',\n placeholder: {\n search: 'Buscar',\n allSites: 'Todos los Sitios',\n },\n },\n feedback: {\n title: '¡Déjanos tu feedback!',\n chooseTier: '¿Cuál es el motivo de esta opinión?',\n comments: '¿Qué fue lo que más le gustó a usted y/o lo que todavía podemos mejorar?',\n commentsPlaceholder: 'Envíe su comentario',\n sendButton: 'Enviar feedback',\n hated: 'La detesté',\n regular: 'Es regular',\n loved: 'Me gusta',\n validation: {\n tiers: 'Seleccione por lo menos una opción.',\n score: 'Seleccione por lo menos una opción.',\n },\n },\n dialog: {\n title: 'Pagar con Tarjeta de Crédito',\n message: 'Los datos serán enviados de manera segura y criptografiados para reducir el riesgo de fraude.',\n subtitle: '¿Con cuál tarjeta desea pagar?',\n formCaption: 'Se reemplazará la tarjeta que ya habías registrado',\n invoiceDetails: 'Ver Resumen de la Factura',\n },\n snackbar: {\n creditCard: {\n create_error: '¡Discúlpenos!... no se puede registrar esta tarjeta por el momento. Por favor, inténtelo más tarde :)',\n create: '¡Tarjeta de Crédito registrada con éxito!',\n remove_error: '¡Discúlpenos!... no se puede excluir esta tarjeta por el momento. Por favor, inténtelo más tarde :)',\n remove: '¡Tarjeta eliminada con éxito!',\n invoice_error: 'Discúlpenos... no se puede pagar esta factura por el momento. Por favor, inténtelo más tarde :)',\n invoice_status_not_unpaid: 'Identificamos un problema con el pago y su factura fue cancelada, verifique sus datos e intente realizar una compra nuevamente a través de nuestro sitio web.',\n invoice: 'Factura paga con éxito',\n recaptcha_not_clicked: 'Confirma que no eres un robot haciendo clic en el reCaptcha abajo.',\n invoicePaymentSuccess: 'El pago de su factura ha sido efectuado con éxito! :)',\n invoicePaymentPending: 'El pago de su factura está siendo procesado y su estado será actualizado automáticamente apenas finalice el proceso.',\n exceeded_accounts: 'Has alcanzado el límite de creación de cuentas de correo para este dominio. Para crear una nueva cuenta de correo, debes eliminar una cuenta ya existente de este dominio.',\n paas: {\n errorSaveCreditCard: 'Complete todos los campos disponibles para el registro de la tarjeta de crédito :)',\n errorVerifyCard: 'Tarjeta inválida, revise los datos ingresados o inserte una nueva tarjeta de crédito',\n errorCreditCardAttempt: 'No se pudo guardar en este momento, por favor, inténtelo más tarde',\n },\n },\n feedback: {\n sent: '¡Feedback enviado con éxito!',\n sent_error: 'Vaya... no hemos podido enviar tus feedback en el momento. Por favor, inténtalo más tarde :)',\n },\n dns: {\n changed: 'DNS cambiado con éxito!',\n changed_error: 'No fue posible modificar el DNS en el momento. Por favor, inténtalo más tarde :)',\n },\n actions: {\n open: 'Abrir',\n },\n emails: {\n deleteEmailAccount: 'El correo ha sido eliminado exitosamente',\n alterPasswordSuccess: 'La contraseña del correo ha sido modificada exitosamente.',\n alterPasswordError: 'Ocurrió una falla con el cambio de la contraseña de tu correo. Por favor, inténtalo más tarde .',\n changeStorage: 'El almacenamiento de correo ha sido modificado exitosamente',\n },\n siteBuilder: {\n successRemoveSite: '¡Sitio eliminado con éxito!',\n errorRemoveSite: 'No pudimos eliminar su sitio. Inténtalo de nuevo o ponte en contacto con el servicio de asistencia.',\n errorOnActivateSiteBuilder: 'No pudimos activar el Creador de Sitios. Inténtalo de nuevo',\n },\n error: {\n address_ip_invalid: 'Esta dirección IP no es válida. Por favor verifica que la información sea correcta o entra en contacto con soporte.',\n authorization_denied: 'Alteración de DNS no autorizada. Por favor verifica que la información sea correcta o entra en contacto con soporte.',\n violated_policy: 'No fue posible cambiar el DNS. Por favor verifica tu información de registro.',\n generic_error: 'No fue posible cambiar el DNS. Por favor entra en contacto con soporte.',\n domain_not_exist: 'No fue posible cambiar el DNS. Por favor entra en contacto con soporte.',\n invalid_nameserver: 'DNS no válido. Por favor verifica que la información sea correcta o entra en contacto con soporte.',\n frozen_domain: 'Este dominio se encuentra caducado. Por favor entra en contacto con soporte financiero.',\n duplicated_information: 'No fue posible cambiar el DNS. Por favor verifica que la información sea correcta o entra en contacto con soporte.',\n cpanel_authentication_fail: 'No fue posible cambiar el DNS. Por favor entra en contacto con soporte.',\n empty_params: 'No fue posible cambiar el DNS. Por favor entra en contacto con soporte.',\n unknown_domain_provider: 'No fue posible modificar el DNS. Verifica si tu dominio fue adicionado en el plan de otro proveedor.',\n unknown_domain: 'No fue posible cambiar el DNS. Por favor entra en contacto con soporte.',\n search_refused: 'No fue posible modificar el DNS. Entra en contacto con tu proveedor actual.',\n change_pass: 'No fue posible cambiar sus datos en el momento. Inténtelo de nuevo más tarde.',\n minimum_requirement: 'Tu contraseña no cumple con los requisitos mínimos de seguridad.',\n temporary_invalid: 'Este método de pago no está disponible temporalmente',\n changeStorageEmail: 'Ocurrió una falla en la creación de tu cuenta de correo. Por favor, inténtalo más tarde',\n email_already_exists: 'El correo electrónico ya existe.',\n access_denied_cpanel: 'Hubo un problema al crear su cuenta de correo electrónico. Póngase en contacto con el soporte.',\n username_invalid: 'Hubo un problema al crear su cuenta de correo electrónico. Póngase en contacto con el soporte.',\n exceeded_accounts: 'El límite de la cuenta de correo electrónico para el plan contratado ha alcanzado el límite. Elimine una cuenta de correo electrónico ya creada para continuar.',\n cpanel_instability: 'Hubo un problema al crear su cuenta de correo electrónico. Póngase en contacto con el soporte.',\n hosting_id_not_authorized: 'Ocurrió una falla en la creación de tu cuenta de correo. Por favor, inténtalo más tarde',\n is_not_possible_reactive_freemium_plan: 'Não foi possível reativar o seu plano. Entre em contato com o suporte',\n is_not_possible_active_email_cpanel: 'Erro ao ativa o e-mail cPanel',\n },\n paypal: {\n success: '¡Pago exitoso!',\n error: {\n service_error: 'No pudimos cargar con Paypal. Su pago no fue autorizado, confirme sus detalles de pago en la Cartera de Paypal e intente nuevamente.',\n agreement_cancelled: 'No pudimos cargar su billetera de PayPal. Puede vincular una billetera de PayPal volviendo a intentarlo.',\n },\n },\n },\n domainStatus: {\n Pending: 'Pendiente',\n Pending_Transfer: 'Todavía sin transferir',\n Active: 'Activo',\n Expired: 'Vencido',\n Transferred_Away: 'Transferido lejos',\n Cancelled: 'Anulado',\n Fraud: 'Rechazado',\n Suspended: 'Suspendido',\n },\n domaindetail: {\n renewBlocked: 'La renovación automática solo se puede cambiar cuando su dominio está activo',\n action: {\n alterDns: 'Configurar Dominio',\n editContact: 'Editar Infos Contacto',\n renewDomain: 'Renovar Dominio',\n protectId: 'Protect ID',\n registrationLock: 'Bloqueo de Registro',\n manageSubscription: 'Administrar Suscripción',\n domainConfigurationWizard: 'Configurar Dominio',\n eppKey: 'Generar clave EPP',\n },\n eppKeyDisabledTooltip: 'No se puede generar la clave porque el dominio ha expirado.',\n },\n routes: routes.MX,\n menu: menu.MX,\n title: title.MX,\n tag: {\n new: 'Nuevo',\n },\n lists: {\n sites: 'Lista de Sitios',\n sitesPage: 'Lista de Sitios',\n sitesPlans: 'Lista de Sitios e Planes',\n products: 'Lista de Productos',\n domains: 'Lista de Dominios',\n emails: 'Lista de Correos',\n tickets: 'Lista de Tickets',\n invoices: 'Lista de Facturas',\n },\n loaderPage: {\n title: '¡Sólo un momento!',\n },\n notFound: {\n error: 'Erro 404',\n title: 'UPS, nos perdimos…',\n description: 'Parece que el camino que estás buscando no existe o ya no está disponible.',\n textLink: 'IR A LA PÁGINA DE INICIO',\n },\n btn: {\n loadMore: 'Cargar más',\n },\n help: {\n frequentlyQuestions: 'Enlaces de ayuda',\n send: 'Enviar',\n me: 'Yo',\n analyst: 'Analista',\n search: 'Cuál es tu duda?',\n guidePlaceholder: 'Escribe aquí tu duda',\n faqCpanel: 'Cómo administrar archivos en el panel de cPanel',\n faqWebsiteAdvanced: 'Materiales de apoyo para el Creador de Sitios Avanzado',\n faqSoftaculous: 'Cómo instalar WordPress en el Softaculous',\n faqWebsiteFast: 'Cómo configurar el creador de sitios web rápido',\n seeMoreResults: 'Ver mais resultados',\n contentHelpCenter: 'Contenido Central de ayuda',\n buttonRedirectWordPress: 'https://soporte-latam.hostgator.com/hc/es-419/categories/6428647308187',\n buttonRedirectSitesBuilder: 'https://soporte-latam.hostgator.com/hc/es-419/sections/360004187832',\n buttonRedirectSoftaculos: 'https://soporte-latam.hostgator.com/hc/es-419/sections/115000065331',\n },\n home: {\n mySites: 'Mis Sitios',\n emails: 'Correos Electrónicos',\n products: 'Productos',\n domains: 'Dominios',\n },\n tickets: {\n pendingTab: 'Pendientes',\n finalizedTab: 'Finalizados',\n openTicket: 'Abrir Nuevo Ticket',\n tickets: 'Tickets',\n show: 'Ver Ticket',\n close: 'Finalizar Ticket',\n reply: 'Responder el ticket',\n attachment: 'Adjuntar',\n endMessage: 'En el caso de que no sea así, En 7 días se finalizará automáticamente.',\n attendance: '¿Qué creyó de la atención?',\n sendFeedback: 'Enviar opinión',\n sendFeedbackSuccess: 'Evaluación enviada con éxito.',\n sendFeedbackError: 'No hemos podido registrar su evaluación.',\n errorUploadFile: 'No se pudo cargar este archivo',\n errorUploadExtension: 'Se permiten archivos .jpg, .jpeg, .png, .pdf, .doc, .docx, .crt, .key',\n errorUploadSize: 'Se permiten archivos con hasta 20MB',\n anexo: 'Adjunto:',\n good: '¡Muy buena!',\n bad: '¡No me ayudó!',\n new: 'Abierto',\n open: 'Pendiente',\n pending: 'Esperando tu respuesta',\n hold: 'Pendiente',\n solved: 'Completado',\n conclude: 'Completado',\n closed: 'Finalizado',\n inputHere: 'Digite aquí...',\n pendingEmpty: 'Usted no tiene llamadas pendientes hasta el momento :)',\n closedEmpty: 'Usted no tiene llamadas finalizadas hasta el momento :)',\n uploadMessage: 'Arrastre el archivo aquí, o haga',\n sendImages: 'Adjuntar archivos',\n defaultMessage: 'Mensaje con el archivo adjunto.',\n uploadButton: 'upload.',\n back: 'hace',\n second: 'seg',\n seconds: 'seg',\n minute: 'min',\n minutes: 'min',\n hour: 'h',\n hours: 'h',\n day: 'd',\n days: 'd',\n week: 'sem',\n weeks: 'sem',\n month: 'mes',\n months: 'meses',\n year: 'año',\n years: 'años',\n },\n chat: {\n open: 'Abrir Chat',\n },\n persona: {\n beginner: {\n title: 'Principiante',\n subtitle: 'Entiendes poco y vas a necesitar mucha ayuda',\n },\n intermediary: {\n title: 'Intermedia',\n subtitle: 'Conoces el tema y pides ayuda cuando es realmente necesario',\n },\n technician: {\n title: 'Técnica',\n subtitle: 'Entiendes bastante y te desenvuelves en este campo',\n },\n welcome: '¡Hola! Te damos la bienvenida :)',\n description: 'Pensando en tecnología, hospedaje web y creación de sitios, te consideras una persona...',\n next: 'Siguiente',\n createLater: '¡No quiero crear mi sitio web ahora!',\n errorMsg: 'Ha habido un error al validar su elección. Inténtalo nuevamente más tarde.',\n successMsg: 'Su nivel de conocimiento fue grabado con éxito.',\n },\n newsite: {\n creator: {\n title: 'Creador de sitios web',\n subtitle: 'Un editor fácil con todos los recursos que usted necesita',\n },\n wordpress: {\n title: 'Wordpress',\n subtitle: 'Herramienta más utilizada y completa del mundo',\n },\n manual: {\n title: 'Manual (Archivos)',\n subtitle: 'Administra los archivos de tu sitio web a través de FTP',\n },\n fast: {\n title: 'Rápido',\n subtitle: '¡Crea tu sito web ahora mismo!',\n },\n advanced: {\n title: 'Avanzado',\n subtitle: 'Crea tu sitio a través de un editor lleno de recursos!',\n },\n siteModes: {\n title: 'Cómo le gustaría crear el sitio?',\n subtitle: 'Elige cómo te gustaría crearlo, si de una forma más rápida o más tradicional...',\n subtitle2: 'y selecciona un editor a continuación',\n subtitleWithoutExpress: 'Utiliza el Creador de Sitios Avanzado!',\n information: 'Selecciona el editor para continuar:',\n },\n themes: {\n title: 'Selecciona la categoría del sitio y el tema',\n },\n welcome: 'Enhorabuena, ya puedes crear tu sitio :)',\n description: 'Seleccione uno de los siguientes sitios',\n choice: 'y seleccione entre las opciones disponibles o la que recomendamos de acuerdo con su nivel de conocimiento ...',\n create: 'Criar Sitio',\n preview: 'Preview',\n useTheme: 'Utilizar',\n feedbackWelcome: '¡Felicitaciones por tu elección! :)',\n feedbackLink: 'Consulta nuestro tutorial',\n feedbackTitleWordpress: '¿Tienes dudas sobre cómo instalar el wordpress?',\n feedbackTitleFile: '¿Tienes dudas sobre cómo administrar archivos?',\n feedbackTitleCreator: '¿Tienes dudas sobre cómo configurar el creador de sitios?',\n chooseWebsite: 'Elegir el sitio',\n chooseCategoryWebsite: 'Selecciona la categoría del sitio *',\n categories: 'Categorías',\n backToSite: 'Volver a Mis Sitios',\n },\n dns: {\n label: 'DNS',\n message: 'Define hacia donde apuntará tu dominio :)',\n chooseDomain: 'Elige un dominio',\n selectDomain: 'Selecciona un dominio',\n selectHosting: 'Selecciona un plan',\n choiceOption: 'Su dominio no ha sido registrado en HostGator. Para editar el apuntamiento de',\n choiceOption_2: 'DNS (Name Server)',\n choiceOption_3: 'siga una de las dos opciones a continuación.',\n notRegistred: {\n title: 'Dominio aún no registrado',\n text: 'Para cambiar el DNS, es necesario registrar el dominio.',\n link: 'Registra tu dominio fácilmente a través de nuestro sitio web.',\n orText: 'O',\n },\n anotherProvider: {\n title: 'Domínio registrado em outro provedor',\n text: 'Este dominio no está registrado con nosotros, por eso, es necesario apuntar su DNS al hosting de HostGator. Solo hay que seguir una de las siguientes opciones:',\n },\n messages: {\n messageHosting: '<0>Para acceder a su editor de Zona de DNS acceda al panel de administración de cPanel. ¿No sabe cómo acceder al editor de Zona de DNS a través de cPanel? <1>Haga clic aquí.',\n messageHosting_2: 'Si usted ha seleccionado un Plan Creador de Sitios Web o Plan de WordPress, solicite cambios en su Zona de DNS abriendo una llamada con el soporte.',\n messageWhm: '<0>Para acceder a su editor de Zona de DNS vaya al panel de administración de WHM. ¿No sabe cómo acceder al editor de Zona de DNS a través de WHM? <1>Haga clic aquí.',\n messageOther: 'Si su dominio está apuntado a un servidor fuera de HostGator, acceda al panel de administración de su proveedor para editar la zona de DNS.',\n messageOtherSeeMore: 'Vea cómo acceder a la Zona de DNS de su dominio en otro proveedor:',\n messageOtherBellow: '<0>Si su dominio está apuntado a un plan VPS o un servidor Dedicado de HostGator, vaya al panel de administración de WHM. ¿No sabe cómo acceder al editor de Zona de DNS a través de WHM? <1>Haga clic aquí.',\n messageError: 'Ha habido un error inesperado al acceder a la zona de DNS del servidor donde apunta su dominio.',\n messageError_2: 'Inténtelo de nuevo más tarde o abra una llamada con el soporte.',\n createTicket: 'ABRIR LLAMADA',\n },\n transferDomain: {\n title: 'Transferir tu dominio a HostGator',\n text: 'Puedes transferir tu dominio a HostGator y administrar todos tus productos en un solo lugar. Para realizar este proceso, solo debes ingresar a nuestra página de transferencia y realizar la solicitud:',\n link: 'Transferir dominio',\n },\n changeDns: {\n title: 'Cambiar DNS en otra empresa de registro',\n textUp: 'También podrás realizar el cambio de DNS directamente en la empresa donde registraste tu dominio. Para ayudarte creamos algunos tutoriales que puedes consultar a continuación.',\n textDown: 'Solo debes escoger la empresa donde registraste tu dominio y seguir el paso a paso:',\n textOtherProvider: 'En caso de que no hayas realizado el registro en alguna de estas empresas, por favor entra en contacto con el soporte de la empresa donde registraste tu dominio.',\n },\n zoneManager: {\n title: 'Zona de DNS',\n explanation: 'Administre los registros de DNS para utilizar su dominio de la manera que necesite.',\n explanationKnowMore: 'Obtenga más información sobre los',\n explanationKnowMore_2: 'registros de la Zona DNS.',\n explanationTooltip_1: 'El dominio es su dirección de Internet. Está representado por una serie de caracteres que identifican su sitio web, por ejemplo: \"hostgator.com.mx\".',\n copyDnsTable: 'Copiar registros DNS',\n planStatusCancelledZoneDNS: 'Su dominio está configurado para un plan de hosting cancelado. Ahora configure su dominio haciendo clic en \"Cambiar plataforma\"',\n\n addRecord: {\n button: 'Añadir Registro',\n form: {\n title: 'Crear Registro',\n editTitle: 'Editar Registro',\n closeForm: 'Fechar formulário',\n label: {\n type: 'Tipo',\n name: 'Nombre',\n class: 'Clase',\n ttl: 'TTL',\n typeAValueField: 'IPv4',\n typeAAAAValueField: 'IPv6',\n typeCAAValueField: 'Valor',\n typeMxPriorityField: 'Prioridad',\n typeMxDestinationField: 'Destino',\n typeTxtTextField: 'Texto',\n typeCnameValueField: 'Valor',\n typeSrvPriorityField: 'Prioridad',\n typeSrvPortField: 'Puerto',\n typeSrvWeightField: 'Peso',\n typeSrvDestinationField: 'Destino',\n },\n placeholder: {\n type: 'Tipo',\n name: 'Use @ para root',\n class: 'Clase',\n ttl: 'TTL',\n preference: 'Número entero positivo',\n },\n helperText: {\n typeA: 'Usted debe especificar una dirección IPv4 válida.',\n nameField: \"Introduzca un dominio válido con letras de a-z, números de 0-9 y guión. Usted también puede introducir '_', como en 'sub._domainkey.ejemplo.com' o '*', como en '*.ejemplo.com'. No use espacios.\",\n 'nameFieldAs@': \"El carácter '@' en nombre de registro corresponderá a la dirección raíz\",\n ttl: 'Introduzca un número entero positivo.',\n caaIodefValue: \"Usted debe introducir una dirección de correo electrónico en el formato 'mailto:ejemplo@email.com' o una URL válida en el formato 'https://ejemplo.com' o 'http://ejemplo.com'.\",\n caaIssueValue: \"Usted debe introducir solamente un punto y coma ‘;’ o una dirección válida en el formato 'ejemplo.com' o 'www.ejemplo.com'.\",\n mxDestinationValue: 'Usted debe especificar un nombre de dominio válido en el formato “ejemplo.com” y sin espacios.',\n mxPriorityValue: 'El número debe ser menor o igual a 65535.',\n cnameValueField: 'Usted debe especificar un nombre de dominio válido en el formato “ejemplo.com” y sin espacios.',\n srvIntegerHelper: 'El número debe ser menor o igual a 65535.',\n srvDomainHelper: 'Usted debe especificar un nombre de dominio válido en el formato “ejemplo.com” o “www.ejemplo.com”.',\n },\n },\n addButton: 'Añadir',\n cancelButton: 'Cancelar',\n updateButton: 'Guardar',\n response: {\n success: 'Registro añadido con éxito.',\n error: 'Algo salió mal al añadir el registro. Inténtelo de nuevo en unos minutos o solicite soporte técnico.',\n },\n successMessage: 'Registro añadido con éxito.',\n errorMessage: 'Algo salió mal al añadir el registro. Inténtelo de nuevo en unos minutos o solicite soporte técnico.',\n errorMessageDomain: 'No puede tener un registro CNAME con el mismo nombre de dominio.',\n },\n excludeRecord: {\n title: 'Eliminar Registro',\n confirmation: '¿Seguro que desea eliminar este registro?',\n explanation: '¡Tenga cuidado! Al eliminar un registro de DNS usted puede impactar el funcionamiento de su sitio web.',\n excludeButton: 'Eliminar',\n cancelButton: 'Cancelar',\n successMessage: 'Registro eliminado con éxito',\n errorMessage: 'Algo salió mal al eliminar el registro. Inténtelo de nuevo en unos minutos o solicite soporte técnico.',\n },\n editRecord: {\n successMessage: 'Registro cambiado con éxito.',\n errorMessage: 'Algo salió mal al editar el registro. Inténtelo de nuevo en unos minutos o solicite soporte técnico.',\n },\n recordList: {\n searchField: 'Buscar Registro',\n filterLabel: 'Filtrar por:',\n loadMore: 'CARGAR MÁS',\n listLabel: {\n type: 'Tipo',\n name: 'Nombre',\n class: 'Clase',\n ttl: 'TTL',\n value: 'Valor',\n address: 'Valor',\n status: 'Status',\n editButton: 'Editar',\n removeButton: 'Eliminar',\n flag: 'Flag',\n tag: 'Tag',\n preference: 'Prioridad',\n exchange: 'Destino',\n txt_data: 'Texto',\n cname: 'Valor',\n weight: 'Peso',\n port: 'Puerto',\n target: 'Destino',\n priority: 'Prioridad',\n },\n allFiltersLabel: 'Todos',\n emptyMessage: 'Usted aún no tiene registros (clase IN) en la zona de DNS de su dominio.',\n emptyMessage_2: 'Haga clic en el botón \"AÑADIR REGISTRO\" para añadir su primer registro.',\n emptySearch: 'No encontramos ningún resultado para su búsqueda :(',\n emptySearch_2: 'Usted puede intentar buscar otra palabra clave y/o utilizar una combinación diferente de filtros para encontrar lo que busca.',\n },\n errorCode: {\n internal: {\n error: 'Algo salió mal. Inténtelo de nuevo en unos minutos o solicite soporte técnico.',\n },\n name: {\n dns_record_name: \"Introduzca un dominio válido con letras de a-z, números de 0-9 y guión. Usted también puede introducir '_', como en 'sub._domainkey.ejemplo.com' o '*', como en '*.ejemplo.com'.\",\n unique_1: 'Usted no puede tener un registro',\n unique_2: 'junto con otro registro CNAME con el mismo nombre.',\n unique_3: 'Usted no puede tener un registro CNAME junto con otros registros con el mismo nombre.',\n },\n address: {\n ip: 'Usted debe especificar una dirección IP válida.',\n },\n value: {\n dns_record_value: \"A informação do campo 'valor' é inválida.\",\n },\n exchange: {\n domain: 'Usted debe especificar un nombre de dominio válido en el formato “ejemplo.com” o “www.ejemplo.com',\n },\n },\n },\n dnsPropagation: 'Propagación DNS',\n },\n whichDnsToChange: {\n title: 'DNS (Name Server)',\n title2: 'No fue posible cambiar tu DNS',\n text: 'Por favor, ',\n text2: 'entra en contacto con soporte.',\n infoIconTooltip: 'El sistema de Nombre de Dominios (Domain Name System - DNS) es responsable de la traducción de la dirección de su sitio web (o dominio), por ejemplo \"hostgator.com.mx\", al lenguaje de Internet.',\n paragraphOne: 'Configure las direcciones de DNS (Name Server) para que los servidores de Internet puedan encontrar su dominio en la red mundial de computadoras.',\n wichDnsToChangeKnowMore: 'Sepa más sobre',\n wichDnsToChangeKnowMore_2: 'apuntamientos de Name Server.',\n text3Tooltip_1: '<0>El Sistema de Nombres de Dominios (<1>Domain Name System<2> - DNS) El Sistema de Nombres de Dominios (Domain Name System - DNS) es responsable de la traducción de la dirección de su sitio web (o dominio), por ejemplo \"hostgator.com.mx\", al lenguaje de internet. ',\n text3Tooltip_2: 'El dominio es su dirección de Internet. Está representado por una serie de caracteres que identifican su sitio web, por ejemplo: \"hostgator.com.mx\".',\n description: 'Este dominio no es nuestro, o sea, no está registrado en HostGator. Para realizar una transferencia para este lugar, <1>vea este artículo y <3>deje un mensaje.',\n },\n dnsGroups: {\n dnsMissing: 'Falta Apuntar DNS',\n dnsOk: 'DNS Apuntado',\n anotherProvider: 'No está registrado en HostGator',\n },\n dnsSetup: {\n title: 'Por cuál DNS usted desea cambiar?',\n warning: '<1>El cambio puede tardar hasta 24 horas, que es el período de propagación en Internet.',\n warningSuccess: 'Felicitaciones, el DNS ha sido modificado con éxito :)',\n warningError: 'No se pudo guardar en el momento. Por favor, inténtalo más tarde. :)',\n warningNative: 'Seleccione una de las opciones de DNS al lado :)',\n native: {\n title: 'No tengo un Servidor de Hosting',\n description: 'Utilice este apuntamiento para habilitar el editor de Zona de DNS de su dominio si usted no tiene un hosting.',\n },\n other: {\n title: 'Otro Servidor',\n description: 'Utilice un DNS personalizado o apunte su dominio a otro proveedor de hosting.',\n button: 'Agregar otro Slave',\n ipAddress: 'Dirección IP',\n },\n hosting: {\n title: 'Servidor de Hosting de HostGator',\n description: 'Utilice un Servidor de Hosting de HostGator para poner su sitio web en el aire.',\n },\n },\n myData: {\n foreign: 'Soy Empresa',\n companyName: 'Razón Social',\n typeHere: 'Escriba aquí',\n placeHolderEmail: 'seuemail@dominio.com',\n personalDataContact: 'Datos personales y de contacto',\n name: 'Nombre completo',\n nameResponsable: 'Representante legal',\n birthDate: 'Fecha de nacimiento',\n cellPhone: 'Celular',\n email: 'Correo Electrónico',\n knowledge: 'Nivel de conocimiento',\n addressTitle: 'Calle',\n address: 'Calle',\n findMyCep: 'Buscar mi código postal',\n countryResidence: 'País de residencia',\n cep: 'Código Postal',\n postalCode: 'Código Postal',\n numberComplement: 'Número exterior/interior',\n district: 'Colonia',\n state: 'Estado',\n stateSelect: 'Estado',\n city: 'Ciudad',\n citySelect: 'Ciudad',\n avatar: 'Avatar',\n chooseMyAvatar: 'Escolher Avatar',\n persona: {\n beginner: 'Principiante',\n intermediary: 'Intermedia',\n technical: 'Técnica',\n },\n errors: {\n required: 'Campo obligatorio',\n fullName: 'El nombre debe tener 2 palabras con mínimo 2 letras y máximo 50',\n birthDate: 'Ingresa una fecha válida',\n country: 'País no válido',\n phoneNumber: 'Digite um telefone válido',\n email: 'Ingresa una dirección de correo electrónico válida',\n cep: 'Código postal no válido',\n state: 'Estado no válido',\n },\n snackBar: {\n updateSuccess: 'Tus datos fueron actualizados con suceso',\n updateError: 'Error al actualizar tus datos',\n emailAlreadyExists: 'Tu correo ya está registrado en nuestro sistema.',\n },\n changePassword: {\n title: 'Cambia la contraseña del Portal del Cliente',\n currentPassword: 'Contraseña actual',\n newPassword: 'Nueva contraseña',\n confirmPassword: 'Confirma la nueva contraseña',\n helperTextUp: 'La contraseña debe tener mínino <1>8 caracteres que contengan al menos una <3>una letra mayúscula, <5>una minúscula, <7>un número y <9>un carácter especial (Por ejemplo: !#$%&).',\n strength: 'Fuerza de la nueva contraseña',\n generatorText: 'Si necesitas ayuda para generar una contraseña fuerte y segura, usa nuestro <1>generador de contraseñas.',\n errorCurrentEmpty: 'Escribe tu contraseña actual.',\n errorEmptyField: 'Completa este campo.',\n errorCurrentMinimumCharacters: 'La contraseña debe tener un mínimo de 6 caracteres.',\n errorMinimumCharacters: 'Debe tener mínino 8 caracteres.',\n errorMinimumRequirements: 'Tu contraseña no cumple con los requisitos mínimos de seguridad.',\n errorConfirmNew: 'Las contraseñas no coinciden.',\n nofifierSuccess: 'Contraseña cambiada con éxito!',\n notifierError: 'No fue posible cambiar tu contraseña. Por favor entra en contacto con soporte.',\n checklist: {\n title: 'Tu nueva contraseña debe:',\n upperAndLowercase: 'Contener mayúsculas y minúsculas',\n number: 'Contener al menos 1 número',\n symbol: 'Contener al menos 1 símbolo',\n eightCharacters: 'Tener al menos 8 caracteres',\n notEqualCharacters: 'No incluir combinaciones de caracteres repetidos (ej.: aaa)',\n notSequencialCharacters: 'No incluir combinaciones de caracteres secuenciales (ej.: 123)',\n sameInBothFields: 'Ser la misma en ambos campos',\n },\n error: {\n base: 'La contraseña debe tener un mínimo',\n uppercase: '1 letra mayúscula',\n lowercase: '1 letra minúscula',\n number: '1 número',\n symbol: '1 símbolo',\n },\n },\n dataPrivacy: {\n title: 'Privacidad de los Datos',\n checkboxLabel: 'Recibir notificaciones por e-mail',\n checkboxExplanation: 'Con esta opción activada estarás autorizándonos a enviar mensajes promocionales y últimas actualizaciones de contenido de nuestras plataformas.',\n },\n },\n billingcycle: {\n monthly: '1 pago mensual',\n quarterly: '1 pago cada 3 meses',\n semiannually: '1 pago cada 6 meses',\n annually: '1 pago cada año',\n biennially: '1 pago cada 2 años',\n triennially: '1 pago cada 3 años',\n },\n reboot: {\n title: 'Reboot (reiniciar la máquina)',\n message: '<0>Reiniciar la máquina tardará cerca de 15 minutos y durante este periodo todos los servicios dejarán de estar disponibles',\n messageWarning: 'Haz reiniciado la máquina 3 veces en menos de 1 hora. Si lo deseas, <1>crea una solicitud al equipo de soporte para que te puedan ayudar a solucionar el problema.',\n history: 'Ver el historial de reboots',\n restart: 'Reiniciar la máquina',\n modalHistory: {\n title: 'Historial de Reboots',\n message: 'Conoce las últimas veces que reiniciaste tu <1>{{product}}, cuyo dominio principal es: <3>\"{{domain}}\"',\n date: 'Fecha',\n time: 'Horarios',\n },\n modalReboot: {\n title: 'Reiniciar la máquina',\n message: '¿Estás seguro que deseas reiniciar tu <1>{{product}} cuyo dominio principal es: <3>\"{{domain}}\"?',\n cancel: 'Cancelar',\n confirm: 'Sí, quiero reiniciar',\n },\n feedback: {\n error: 'No ha sido posible reiniciar la máquina. Intentalo nuevamente o entra en contacto con el equipo de soporte',\n success: 'Reboot finalizado',\n },\n },\n titanAdvertisement: {\n top: {\n title: 'Correo Profesional Titan',\n description_0: 'Impulse aún más su marca con un correo profesional ',\n description_1: '@tudominio',\n labelLink: 'Quiero saber más',\n new: 'Nuevo',\n },\n toast: {\n knowMore: 'Quiero saber más',\n description: 'Impulse aún más su marca con un correo profesional ',\n yourDomain: '@tudominio',\n title: 'Correo Profesional Titan',\n newTag: 'Nuevo',\n },\n bannerDark: {\n knowMore: 'Quiero saber más',\n description: 'Impulse aún más su marca con un correo profesional',\n title: 'Correo Profesional Titan',\n newTag: 'Nuevo',\n },\n modalGtm: {\n event: {\n one: 'gtmModalTitanOffer1',\n two: 'gtmModalTitanOffer2',\n },\n },\n },\n modalTitanAdvertisement: {\n title: '¿Para cual dominio le gustaría crear su correo profesional Titan?',\n selectDomain: 'Seleccionar dominio',\n button: 'Continuar para más informaciones',\n },\n onboarding: {\n title: {\n whatYouCreateFirst: '¿Qué deseas crear primero?',\n whatYouWantDoFirst: '¿Qué quieres hacer primero?',\n createEmailAccountsAsYouLike: 'Crea todos los correos que quieras:',\n createYourEmailsRightNow: '¡Crea tus cuentas de correo ahora mismo!',\n chooseBelowCreationType: 'Escoge la herramienta para crear tu sitio:',\n wantCreateWebsiteNow: '¿Quieres crear un sitio web ahora?',\n makeWebsiteRightNow: '¡Crea un sitio web ahora mismo!',\n domainNotRegistered: 'Este dominio no fue registrado con nosotros :/',\n getHostingsPlans: '¡Adquiere uno de nuestros planes de Web Hosting!',\n getEmailProfissional: '¡Obtenga uno de nuestros planes de correo electrónico profesional!',\n createYourEmailAccounts: 'Crea tus cuentas de correo electrónico:',\n createEmailAsYouLike: 'Crea todos los correos que quieras:',\n chooseThemeCategory: 'Selecciona la categoría del sitio y el tema:',\n },\n subtitle: {\n createEmailAsYouLike: 'Crea todos los correos que quieras.',\n ifYesChooseBelowCreationType: 'De ser así, escoge la forma de creación a continuación.',\n chooseBelowCreationType: 'Escoge la herramienta para crear tu sitio.',\n chooseOneFollowingSites: 'Selecciona uno de los sitios a continuación',\n domainNotRegistered: 'Antes de continuar, debes apuntar el DNS para un Web Hosting de HostGator. <1>Si ya ha registrado este dominio con otra compañía, simplemente siga la opción a continuación:',\n hostingsPlansToCreateSite: 'Para que puedas crear tu sitio web, es necesario tener un plan de Web Hosting.',\n hostingsPlansToCreateEmail: 'Para que puedas crear los correos, es necesario tener un plan de Web Hosting.',\n NewHostingsPlansToCreateEmail: 'Para que puedas crear un correo personalizado con tu dominio, puedes contratar un plan de Correo Profesional.',\n contactUs: 'Entra ahora mismo en nuestra web y elige la que más se adapte a tus necesidades.',\n fastOrAdvanced: 'Elige cómo te gustaría crearlo, si de una forma más rápida o más tradicional...',\n },\n option: {\n title: {\n createSite: 'Crear Sitio Web',\n createEmail: 'Crear Correos',\n siteCreator: 'Creador de sitios web',\n wordpress: 'WordPress',\n manualFiles: 'Manual (Archivos)',\n fast: 'Rápido',\n advanced: 'Avanzado',\n transferDomain: 'Transferir el dominio a HostGator',\n changeDnsExternal: 'Modificar el DNS en la empresa de registro',\n changeDns: 'Alterar DNS',\n },\n description: {\n createSite: '¡Publica tu proyecto ahora mismo!',\n createEmail: 'Crea todas las cuentas de correo que quieras.',\n siteCreator: 'Un editor fácil con todos los recursos que usted necesita.',\n wordpress: 'Herramienta más utilizada y completa del mundo.',\n manualFiles: 'Administra los archivos de tu sitio web a través de FTP.',\n changeDns: 'Apunta el dominio hacia un plan o un proveedor de web hosting.',\n fast: '¡Crea tu sito web ahora mismo!',\n advanced: 'Crea tu sitio a través de un editor lleno de recursos!',\n },\n },\n action: {\n button: 'Crear Sitio Web',\n linkSkipCreateEmails: '¡No quiero crear correos ahora!',\n linkSkipCreateSite: '¡No quiero crear mi sitio web ahora!',\n hostingsPlans: 'Ver Planes de Web Hosting',\n emailProfessional: 'Compra el plan de correo electrónico profesional',\n },\n emails: {\n createPassword: 'Contraseña*',\n createEmail: 'CREAR UN CORREO MÁS',\n selectAnEmail: 'Selecione um correo electrónico*',\n limitLength: 'Su correo electrónico debe contener hasta 64 caracteres.',\n emailExists: 'Este correo electrónico ya ha sido ingresado',\n },\n changeDns: {\n title: 'Cambio de DNS',\n subtitle: 'Para realizar el cambio, <1>consulte su DNS a continuación y elija el nombre de la empresa donde registró su dominio:',\n note: 'Si no hiciste el registro en ninguna de estas empresas, por favor, solicita ayuda al equipo de soporte de la empresa donde contrataste el dominio.',\n link: 'Ir al portal del cliente',\n },\n transferDomain: {\n title: 'Transferencia de dominio',\n requirementsMessage: 'Asegúrate de que <1>todos los requisitos para esta transferencia estén a día. <3>Este procedimiento puede llevar hasta 6 horas.',\n eppMessage: 'Para que podamos realizar la transferencia de dominio, <1>solicita el código EPP al equipo de soporte de la empresa donde contrataste el dominio y coloca la información en el campo a continuación. Este procedimiento puede llevar hasta 6 horas.',\n eppError: 'Campo obligatorio',\n label: 'Digita el código EPP aquí',\n link: 'Transferir dominio',\n feedback: 'Se ha abierto el llamado {{ ticket }} para la transferencia de tu dominio. Acompaña este llamado en la página de Soporte.',\n },\n obs: 'Si aún no has contratado un dominio. <1>¡Registralo ahora mismo!',\n wordpress: {\n plan: {\n limitedPrefix: 'Crea hasta',\n limitedSuffix: 'cuentas de correo.',\n unlimited: 'Crea todos los correos que quieras.',\n },\n },\n },\n modalDomainAutoRenovation: {\n title: 'Habilitar la renovación automática',\n description: 'Si el método de pago es PayPal o Tarjeta de Crédito, el cobro se realizará automáticamente. Si el método es cupón de pago, la factura se emitirá 30 días antes de la fecha de vencimiento.',\n confirmLabel: 'Confirmar',\n },\n modalSetPassword: {\n setTitle: 'Definir la contraseña de acceso',\n editingTitle: 'Cambiar Contraseña de Acceso',\n message: 'Para comenzar a usar tu <1>{{ product }}, define una contraseña de acceso:',\n setBtn: 'Definir la contraseña',\n changeBtn: 'Cambiar contraseña',\n passwordLabel: 'Contraseña',\n confirmPasswordLabel: 'Confirmar contraseña',\n newPasswordLabel: 'Nueva contraseña',\n confirmNewPasswordLabel: 'Confirmar nueva contraseña',\n required: 'Completa este campo',\n minimumRequirements: 'Tu contraseña no cumple con los requisitos mínimos de seguridad',\n confirmPassword: 'Las contraseñas no coinciden',\n },\n emailVerify: emailValidation.MX,\n phoneVerify: phoneValidation.MX,\n linkNaBio: linkNaBio.MX,\n courses: {\n info: 'Contenido gratuito con consejos y tutoriales para ayudarlo a comenzar a construir su sitio web.',\n menuTitle: 'Contenido del curso',\n classes: 'clases',\n seeClasses: 'Ver Clases',\n minutes: 'min',\n watched: 'Visto',\n vimeoServiceDown: 'No era posible buscar cursos en este momento. Por favor, inténtelo de nuevo más tarde.',\n certificate: {\n download: 'Descargar Certificado',\n available: 'Su Certificado estará disponible para descargar después de ver todos los videos.',\n progress: 'Completado',\n title: 'Certificamos que',\n conclusion: 'Ha completado con éxito el curso',\n hours: 'on una carga horaria de {{hours}}h',\n date: 'Fecha',\n founder: 'Fundador de HostGator',\n fileName: 'certificado',\n },\n },\n sitesWizard: sites.MX.wizard,\n modalDnsAutomatic: {\n title: 'Propagación de dominio en curso....',\n button: 'Continuar creando el sitio',\n descriptionOne: {\n 0: 'La configuración del dominio (cambio de DNS) ya se ha realizado, pero las informaciones están en ',\n 1: 'proceso de propagación',\n 2: ' y esto puede demorar hasta 24h.',\n 3: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360024988331',\n },\n descriptionTwo: {\n 0: 'Mientras tanto, ',\n 1: 'siga creando su sitio web. Estará en línea después de completar esta etapa.',\n },\n },\n domains: domains.MX,\n dialogPaypal: {\n title: 'Pagar con PayPal',\n titleContainer: 'Cartera digital Paypal',\n featureTitleFirst: 'Tecnología',\n featureDescriptionFirst: 'Tarjeta protegida por criptografía',\n featureTitleSecond: 'Seguridad',\n featureDescriptionSecond: 'Al almacenar sus datos',\n featureTitleThree: 'One TouchTM',\n featureDescriptionThree: 'Pague con un clic',\n },\n plan: {\n detail: 'Administrar',\n expand: 'Ver sitios',\n status: {\n active: 'Activo',\n pending: 'Abierto',\n in_analysis: 'En análisis',\n on_configure: 'En configuración',\n cancelled: 'Cerrado',\n suspended: 'Suspendido',\n expired: 'Caducado',\n },\n warning: {\n pending: 'Aún no hemos identificado su pago. <1>Atención: los pagos mediante boleto pueden tardar hasta 72 horas en identificarse.',\n in_analysis: 'Su plan está bajo análisis de registro, este proceso puede demorar hasta 24 horas. Después de este período, tendrá acceso a la creación y administración de sus sitios.',\n on_configure: 'Se está configurando su servidor, este proceso puede tardar hasta X horas. Pasado este período, tendrá acceso a la gestión de su plan.',\n cancelled: 'Se canceló su plan de alojamiento y se eliminaron todos los archivos. <1> Contrata un nuevo plan a través de nuestro sitio web.',\n suspended: 'Este plan está suspendido. Realice el pago para reactivarlo. <1>Atención: los pagos mediante boleto pueden tardar hasta 72 horas en identificarse.',\n expired: 'Debido a la falta de pago, su plan de hosting ha expirado y todos sus sitios y archivos han sido eliminados. <1> Contrata un nuevo plan a través de nuestro sitio web. ',\n },\n tooltip: {\n disabled: 'Esta acción está deshabilitada debido al estado en el que se encuentra actualmente su producto.',\n active: 'Su hosting está activo. Usted tiene acceso a todas las funcionalidades de su plan de hosting accediendo a la administración de al lado.',\n pending: 'Aún no hemos identificado su pago. Atención: los pagos por boleto pueden tardar hasta 72 horas en ser identificados.',\n suspended: 'Este plan está suspendido. Realice el pago para reactivarlo. Atención: los pagos por boleto pueden tardar hasta 72 horas en ser identificados.',\n expired: 'Debido a la falta de pago, su plan de hosting expiró y todos sus sitios web y archivos fueron borrados. Contrate un nuevo plan a través de nuestro sitio web',\n },\n filter: {\n active: 'Sitios Activos',\n pending: 'Sitios Abiertos',\n in_analysis: 'Sitios en análisis',\n on_configure: 'Sitios en configuración',\n cancelled: 'Sitios Cerrados',\n suspended: 'Sitios Suspendidos',\n expired: 'Sitios Caducados',\n },\n },\n site: {\n websitebuilder: '(Creador de Sitios)',\n action: {\n active: 'Administrar',\n notConfigured: 'Configurar Dominio',\n },\n status: {\n not_configured: 'Dominio no configurado',\n },\n },\n oldReseller: {\n ResellerSuspendedMessage: '<0>Tienes uno o más planes afectados por la <1>actualización de los precios y planes de Reseller Hosting.<2> Deberás <3>escoger un nuevo plan<4> para evitar que tus datos sean eliminados permanentemente.',\n ResellerAffectedMessage: '<0>Tienes uno o más planes afectados por la <1>actualización de los precios y planes de Reseller Hosting.<2> Deberás <3>escoger un nuevo plan<4> en tu próxima renovación.',\n cardSuspendedMessage: '<0>Tu plan {{productname}} ha sido suspendido y será anulado el día {{invoicedate}}. <1>Escoge un nuevo plan<2> y evita que tus datos sean eliminados permanentemente.',\n cardAffectedMessage: '<0>Tu plan {{productname}} vence el día {{invoicedate}}. <1>Debido a la <2>actualización de los planes Reseller<3>, tu próxima factura de renovación será anulada automáticamente. Deberás <4>escoger un nuevo plan<5> al momento de renovar el servicio.',\n cardAffectedMessageTilTenDays: '<0>Tu plan {{productname}} vence el día {{invoicedate}} y entrara en suspensión 10 días hábiles después de esa fecha. <1>Debido a la <2>actualización de los planes Reseller<3>, tu próxima factura de renovación será anulada automáticamente. Deberás <4>escoger un nuevo plan<5> al momento de renovar el servicio.',\n ModalTitle: 'Planes pendientes',\n ModalOldResellerMessage: '<0>Tienes uno o más planes afectados por la <1>actualización de los precios y planes de Reseller Hosting.<2> Escoge un nuevo plan que se adapte a tus necesidades.',\n productPlan: 'Plan',\n productStatus: 'Status del plan',\n productCancelation: 'Anulación en',\n productExpiration: 'Vence em',\n ModalCta: 'ESCOGER NUEVO PLAN',\n Active: 'Activo',\n Pending: 'Pendiente',\n Pending_Transfer: 'Todavía sin transferir',\n Expired: 'Vencido',\n Cancelled: 'Anulado',\n Fraud: 'Fraude',\n Suspended: 'Suspendido',\n Building: 'En Configuración',\n },\n proEmail: {\n searchDomainLabel: 'Buscar nombre del dominio',\n professionalTitanMailLabel: 'Correo profesional Titan',\n freeMailLabel: 'Correo gratuito del hosting',\n showMore: 'Mostrar más',\n showLess: 'Mostrar menos',\n infoPaidMailLabel: 'Las soluciones de correo electrónico profesional Titan Essential y Premium son perfectas para negocios en expansión, ya que ofrecen más funciones que el correo electrónico básico del hosting.',\n infoFreeMailLabel: 'El correo electrónico gratuito es un beneficio de su hosting. Usted puede usar la solución de correo electrónico básico de cPanel o el correo electrónico profesional Titan en su versión gratuita.',\n domainFilterLabel: 'hospedajens',\n subscriptionsLabel: 'Suscripción',\n domainLabel: 'Dominio',\n mailBox: 'Cuenta de Correo',\n titanLabel: 'Titan',\n cPanelLabel: 'cPanel',\n createFirstAccount: 'Cree su primera cuenta',\n createFirstAccountMenu: 'Cree su primera cuenta',\n createEmail: 'Definir plataforma de correo',\n managerEmail: 'Administrar Correos',\n hostingLabel: 'Hospedaje',\n dueDate: 'Fecha de Vencimiento',\n terminatedDate: 'Data de Cancelación',\n provisioningCardStatusNew: 'Activando Período de Prueba',\n pendingCardStatusNew: 'En Espera de Pago',\n toDueDateCardStatus: 'Por vencer',\n expiredCardStatusNew: 'Vencida',\n suspendedCardStatusNew: 'Suspendida',\n terminatedCardStatusNew: 'Cancelada',\n activeCardStatusNew: 'Activo',\n renovationButton: 'Activar Renovación',\n almostCanceladCardStatus: '<0>!Cancelación próxima - {{amount}}<2> dias',\n trialCardStatus: '{{amount}}<2> días disponibles de prueba',\n trialCardStatusToDueDate: '{{amount}}<2> días finales de prueba grátis',\n trialCardStatusOverDueDate: '{{amount}}<2> días para que se cancele su suscripción',\n trialCardStatusTerminated: 'Período de prueba gratuito terminado',\n provisioningCardStatusInfo: 'Estamos activando su plan de correo electrónico y en instantes usted podrá aprovechar todos los beneficios del período de prueba.',\n pendingCardStatusInfo: 'Estamos esperando la confirmación de pago. La compensación de Cupones de pago puede tardar hasta 72 horas. Si ya ha pago, por favor espere.',\n infoAutomaticRenovation: 'La renovación automática de la suscripción ha sido cancelada. Active la renovación y evite que sus datos se eliminen permanentemente después de la fecha de vencimiento.',\n uponDueDateCardStatusInfo: 'Su suscripción vencerá pronto. Pague su factura y no se arriesgue a perder sus correos electrónicos.',\n uponDueDateTrialCardStatusInfo: 'El período de prueba está finalizando y la renovación de la suscripción caducará pronto. Pague su factura y no se arriesgue a perder sus correos electrónicos.',\n infoDueDateCardStatus: 'Su suscripción vencerá pronto. Pague su factura y no se arriesgue a perder sus correos electrónicos.',\n expiredCardStatusInfo: 'Su suscripción ha vencido y se suspenderá pronto. Pague su factura y no se arriesgue a perder sus correos electrónicos',\n suspendedCardStatusInfo: 'Su suscripción ha sido suspendida por falta de pago. Pague su factura para que no sea cancelada y sus datos sean eliminados definitivamente',\n terminatedCardStatusInfo: 'Su suscripción ha sido cancelada por falta de pago.',\n titleConfirmRenovation: '¿Quiere activar la renovación de la suscripción?',\n descriptionConfirmRenovation: 'El cobro del pago será realizado al final del ciclo, evitando que su producto sea cancelado y sus datos y archivos se eliminen permanentemente.',\n bottonConfirmRenovation: 'CONFIRMAR ACTIVACIÓN',\n titanIconInfo: 'Plataforma de Correo Titan',\n cPanelIconInfo: 'Plataforma de Correo cPanel',\n alertConfirmRenovation: 'La renovación de la suscripción (Nome da assinatura) fue activada',\n contractNewEmailPlan: 'Contratar Correo',\n contractNewEmailPlanMobile: 'Contratar Correo',\n chipLinkLabel: 'Configurar correo electrónico',\n activeTrialTitle: 'Cree su primera cuenta de correo profesional Titan Essentials',\n activeTrialDescription: 'El Correo Electrónico Profesional es una solución de HostGator para que los emprendedores tengan una dirección de correo personalizado con el nombre de su empresa.',\n activeTrialInfoPersonalize: 'Correo personalizado @tudominio',\n activeTrialInfoSpace: '10 GB de almacenamiento por cuenta',\n activeTrialInfoApp: 'Webmail y Aplicaciones para Android y iOS',\n activeTrialInfoAntv: 'Protección anti-spam y antivirus',\n activeTrialInfoCalendar: 'Calendarios y contactos integrados',\n activeTrialInfoMore: '¡Y mucho más!',\n activeTrialEmailAddress: 'Dirección de correo',\n placeHolderEmailAddress: 'Ej: contacto',\n activeTrialDomain: 'Dominio',\n activeTrialPassword: 'Contraseña',\n errorActivateTrial: 'Algo salió mal. Inténtelo nuevamente más tarde.',\n errorDomainRegistration: 'El dominio no está registrado. Elija un dominio que esté registrado para activar el período de prueba',\n successAtivateTrial: 'En instantes podrá aprovechar todos los beneficios del período de prueba.',\n accessEmailTrial: 'Haga clic aquí para ingresar a su correo',\n activeTrialButtonStart: 'Iniciar Prueba',\n activeTrialPosDescription: '<0>Después del periodo de prueba gratis, la suscripción mensual es {{amount}}<1> por cuenta de correo, con renovación automática. Cancele cuando quiera. <1>',\n activeTrialTerms: 'Términos del servicio',\n activeTrialFreeTime: '30 DÍAS GRATIS DE PRUEBA',\n ilimitedMailBoxes: 'buzones de correo electrónico ilimitados',\n cpanelListInfo: 'Usted tiene una cuenta de correo electrónico vinculada a cPanel en este dominio. Manténgase actualizado con su plan de hosting para que su correo electrónico continúe funcionando sin problemas.',\n configAccountListInfo: 'Esta cuenta de correo electrónico está vinculada a un web hosting. Mantenga actualizado su plan de web Hosting para que no afecte el funcionamiento de su correo electrónico.',\n listName: 'Listado de Planes',\n activeCardStatus: 'Activo',\n pendingCardStatus: 'Pendiente',\n provisioningCardStatus: 'Pendiente',\n suspendedCardStatus: 'Suspendido',\n terminatedCardStatus: 'Cancelado',\n expiredCardStatus: 'Expirado',\n nullCardStatus: 'Sin Plan de Correo Electrónico',\n almostExcludedCardStatus: '<0>!Suspensión próxima - {{amount}}<2> dias',\n accountsUsed: 'Número de Cuentas de Correo',\n expiringDate: 'Vencimiento',\n managementLabel: 'Administrar',\n contractNewPlanLabel: 'CONTRATAR NUEVO PLAN DE CORREO ELECTRÓNICO ',\n checkAvailabilityLabel: 'CONSULTAR DISPONIBILIDAD',\n domainNoAvailabilityTitleLabel: 'El dominio seleccionado no está registrado.',\n domainNoAvailabilityDescriptionLabel: 'Para comprarlo, compruebe la disponibilidad en nuestro sitio web.',\n hostingPlansTitleLabel: 'El dominio {{domain}} está vinculado a más de un plan de hosting.',\n hostingPlansDescriptionLabel: 'Para continuar, seleccione abajo qué plan de hosting le gustaría vincular al nuevo plan de correo electrónico.',\n hostingPlansCreateDateLabel: 'Fecha de Creación',\n hostingPlansDueDateLabel: 'Vencimiento',\n hostingPlansViewPlansLabel: 'Ver planes de Correo Electrónico',\n billButton: 'Pagar Factura',\n failedToLoadList: 'No se puede cargar la lista de correo electrónico profesional.',\n getPlanLink: 'CONTRATAR PLAN DE CORREO ELECTRÓNICO',\n createEmailPlan: 'CREAR PLAN DE CORREO ELECTRÓNICO',\n notifications: {\n activateRenewal: {\n success: {\n 0: 'La renovación del ',\n 1: ' fue activado',\n },\n failure: {\n 0: 'La activación de la renovación del ',\n 1: ' no se pudo completar. Por favor, inténtelo de nuevo más tarde.',\n },\n },\n },\n type: {\n titan: 'TITAN',\n cpanel: 'cPanel',\n free: 'Plan de Correo Gratis',\n },\n emptyList: {\n title: 'No encontramos ningún resultado para su búsqueda :(',\n description: 'Puede intentar buscar otra palabra clave para encontrar lo que está buscando.',\n },\n noPlan: 'Sin plan de correo',\n proemail: {\n pendingMessage: '<0>Pendiente de pago. Realice el pago de este plan para tener acceso a la creación y administración de sus correos electrónicos. <1>Atención: Los pagos por boleto pueden tardar hasta 72 horas en ser identificados.',\n freemiumPendingMessage: '<0>Pendiente de pago. Realice el pago de su Plan de Hosting para tener acceso a la creación y administración de sus correos electrónicos. <1>Atención: Los pagos por boleto pueden tardar hasta 72 horas en ser identificados.',\n suspendedMessage: '<0>Este plan está suspendido. Realice el pago para reactivarlo. <1>Atención: Los pagos por boleto pueden tardar hasta 72 horas en ser identificados.',\n terminatedMessage: '<0>Según lo solicitado, su plan ha sido cancelado y todos los datos y registros han sido borrados. <1>Contrate un nuevo plan a través de nuestro sitio web.',\n expiredMessage: '<0>Debido a la falta de pago su plan de correo electrónico profesional ha expirado y todos los datos han sido borrados. <1>Contrate un nuevo plan en nuestro sitio web.',\n almostExpiredMessageFree: '<0>El plan de alojamiento vinculado a su cuenta de correo electrónico gratuita de TITAN ha expirado. <1>Actualice su plan <2>para mantenerte activo.',\n almostExpiredMessageTitan: '<0>Este plan de correo electrónico ha vencido y pronto entrará en suspensión. Realice el pago de su <1>factura de renovación<2> para mantenerlo activo. <3>Atención: Los pagos por cupón de pago pueden tardar hasta 72 horas en identificarse.',\n almostExpiredMessageCpanel: '<0>El plan de hosting al que está vinculado su correo electrónico ha expirado. Realice el pago de su <1>factura de renovación<2> para mantener su plan de correo electrónico activo. <3>Atención: Los pagos por cupón de pago pueden tardar hasta 72 horas en identificarse.',\n },\n cpanel: {\n basic: 'Plan básico',\n pendingMessage: '<0>Pendiente de pago. Realice el pago de su plan de alojamiento para tener acceso a la creación y administración de sus correos electrónicos. <1>Atención: Los pagos por boleto pueden tardar hasta 72 horas en ser identificados.',\n suspendedMessage: '<0>Este plan está suspendido. Realice el pago de su plan de alojamiento para reactivarlo. <1>Atención: Los pagos por boleto pueden tardar hasta 72 horas en ser identificados.',\n terminatedMessage: '<0>Según lo solicitado, su plan de alojamiento ha sido cancelado y todos los datos y registros han sido borrados. <1>Contrate un nuevo plan a través de nuestro sitio web.',\n expiredMessage: '<0>Debido a la falta de pago su plan de alojamiento ha expirado y todos los datos han sido borrados. <1>Contrate un nuevo plan en nuestro sitio web.',\n },\n filterOptions: {\n all: 'Todos os Dominios',\n proemail: 'Con correo electrónico Titan',\n cpanel: 'Con Correo electrónico Básico del Hosting',\n withoutPlan: 'Dominio sin plan de correo electrónico',\n },\n upgrade: {\n underConstruction: {\n title: 'La actualización del plan aún no está disponible para este producto :/',\n description: 'Ya estamos trabajando para pronto ofrecer una solución.',\n managementButton: 'VOLVER A LA ADMINISTRACIÓN DEL PLAN',\n },\n },\n hirePlan: {\n annually: 'Anual',\n bestFormatToPayment: 'Seleccione la mejor forma de pago para usted:',\n containerDescription: 'Use las siguientes opciones para solicitar la contratar su nuevo plan de correo electrónico profesional.',\n containerDescriptionOld: 'Elija el plan de correo electrónico ideal para su proyecto',\n newContainerDescription: 'Elija el plan de correo electrónico profesional ideal para su negocio:',\n free: 'GRATIS',\n hireCTA: 'CONTRATAR PLAN',\n mailBoxes: 'Buzones de Correo Electrónico',\n monthly: 'Mensual',\n paymentCycle: 'Ciclo de Pago',\n perMailBoxLabel: 'mes / por cuentas de correo',\n perMailBoxLabelOld: 'por cuentas de correo',\n descriptionFreemium: 'Su plan de Web Hosting tiene un plan de correo electrónico Titan gratuito con 1 GB de almacenamiento por cuenta de correo.',\n activeFreemium: 'ACTIVAR GRATIS',\n freeMailBoxLabel: 'para usar cuando quiera',\n perMonth: '/mes',\n perYear: '/año',\n monthPayment: 'pagamento mensual',\n yearPayment: 'pago anual',\n recommended: ' (Recomendado)',\n save: 'Ahorros',\n savedPercent: '<0>{{savedAmount}}<1>% de descuento',\n total: 'Total del ',\n totalOld: 'Total:',\n weRecommend: 'Le recomendamos',\n cpanelChangeTitle: '¿Prefiere usar un webmail básico de cPanel?',\n cpanelChangeDescription: '<0>A diferencia de los planes de correo electrónico profesional Titan, las cuentas de correo electrónico básico de cPanel (Roundcube)<1> utilizan el espacio de su hosting <2>para almacenar los mensajes y archivos de correo electrónico.',\n cpanelEnableChange: 'Activar correo electrónico básico de cPanel',\n cpanelDialogActiveTitle: '¿Continuar como cPanel?',\n cpanelDialogActiveDescription: '<0>Los siguientes dominios añadidos a <1>{{productName}}<2> tendrán correos electrónicos cPanel activados automáticamente.',\n cpanelDialogActiveDescriptionAdvice: 'Al seleccionar la opción de correo electrónico, no podrá deshacer la acción, es decir, una vez que haya elegido el correo electrónico de cPanel, no podrá cambiar para Titan gratuito.',\n cpanelDialogActiveAction: 'CONTINUAR COMO CPANEL',\n continueFreePlanTitle: '¿Continuar como Titan Gratis?',\n continueFreePlanDescription: '<0>Los siguientes dominios añadidos a <1>{{hostingName}}<2> tendrán correos electrónicos Titan Gratis activados automáticamente.',\n continueFreePlanDescriptionAdvice: 'Al seleccionar la opción de correo electrónico, no podrá deshacer la acción, es decir, una vez que haya elegido el correo electrónico de Titan, no podrá cambiar para cPanel',\n continueFreePlanAction: 'CONTINUAR COMO TITAN GRATIS',\n successActivateFreePlanTitle: '¡Correo Electrónico Titan Gratis activado con éxito! ',\n successActivateFreePlanDescription: 'Todo listo para que usted añada su primera cuenta de correo electrónico',\n successActivateFreePlanAction: 'AÑADIR CUENTA DE CORREO ELECTRÓNICO ',\n successMoveCPanelTitle: '¡Correo Electrónico cPanel activado con éxito! ',\n successMoveCPanelDescription: 'Todo listo para que usted añada su primera cuenta de correo electrónico',\n successMoveCPanelAction: 'AÑADIR CUENTA DE CORREO ELECTRÓNICO',\n hostingPlan: 'plan de hosting',\n titanBasic: {\n topLabel: 'Gratuito del Web Hosting',\n productName: 'Titan Básico',\n gb: '1Gb',\n storage: 'de almacenamiento',\n ctaButton: 'Activar Titan Básico',\n description: 'Titan Básico es una opción de cuenta de correo electrónico ilimitada y gratuita que no utiliza el espacio de almacenamiento de su alojamiento.',\n link: 'Conozca más',\n },\n titanEssentials: {\n topLabel: '30 días gratis de prueba',\n productName: 'Titan Essentials',\n gb: '10Gb',\n storage: 'de almacenamiento',\n ctaButton: 'Pruébelo Gratis',\n // eslint-disable-next-line no-template-curly-in-string\n description: '<0>Después del período de prueba gratuito, la suscripción mensual es de <1>${{price}}<2> por cuenta de correo electrónico con renovación automática ,se puede cancelar en cualquier momento.',\n link: 'Términos del Servicio',\n },\n titanPremium: {\n topLabel: 'RECOMENDADO',\n productName: 'Titan Premium',\n gb: '50Gb',\n storage: 'de almacenamiento',\n ctaButton: 'Activar ahora',\n description: 'Más espacio de almacenamiento y potentes funciones de productividad',\n link: 'Términos del Servicio',\n monthlyPriceEachEmail: 'Por cuenta de correo',\n perMonth: '/mes',\n cycleTitle: 'Ciclo',\n paymentMethodTitle: 'Forma de pago',\n cycles: {\n monthly: '1 mes',\n quarterly: '3 meses',\n semiannually: '6 meses',\n annually: '1 año',\n biennially: '2 años',\n },\n totalPrice: '<0>Total <1>{{price}} <2>en el <3>ciclo {{cycle}}<4> para <5>{{numberAccounts}} <6>cuenta de correo electrónico.',\n totalPriceMoreThanOne: '<0>Total <1>{{price}} <2>en el <3>ciclo {{cycle}} <4> para <5>{{numberAccounts}} <6>cuentas de correo electrónico.',\n },\n titanUltra: {\n topLabel: 'MÁS COMPLETO',\n productName: 'Titan Ultra',\n gb: '100GB',\n storage: 'de almacenamiento',\n ctaButton: 'Activar ahora',\n description: 'Más espacio de almacenamiento y potentes funciones de productividad',\n link: 'Términos del Servicio',\n monthlyPriceEachEmail: 'Por cuenta de correo',\n perMonth: '/mes',\n cycleTitle: 'Ciclo',\n paymentMethodTitle: 'Forma de pago',\n cycles: {\n monthly: '1 mes',\n quarterly: '3 meses',\n semiannually: '6 meses',\n annually: '1 año',\n biennially: '2 años',\n },\n totalPrice: '<0>Total <1>{{price}} <2>en el <3>ciclo {{cycle}}<4> para <5>{{numberAccounts}} <6>cuenta de correo electrónico.',\n totalPriceMoreThanOne: '<0>Total <1>{{price}} <2>en el <3>ciclo {{cycle}} <4> para <5>{{numberAccounts}} <6>cuentas de correo electrónico.',\n },\n },\n upgradePlan: {\n whatIsincluded: 'QUE ESTÁ INCLUIDO',\n whatIsincludedInPaid: 'Todo de titan basic, más',\n downgradeMaessage: '<0>En caso de que quiera reducir el número de cuentas de correo, es necesario eliminarlas a través del link <1>Cuentas de Correo<1/><2>',\n changeInboxLabel: 'Cambiar',\n changeInboxLabelAlt: 'editar cantidad de inbox',\n changePlan: 'CAMBIAR PLAN',\n modalTitle: 'Seleccionar Cuentas de Correo',\n modalDescription: 'Use los botones a continuación para seleccionar la cantidad de cuentas de correo que le gustaría tener en su Plan de Correo Electrónico. <1>El valor de su plan será proporcional a la cantidad de cuentas de correo contratadas.',\n modalPlanTitle: 'Plan',\n modalPerMailTitle: 'Valor por cuenta de correo',\n modalRecurrentTitle: 'Valor Recurrente',\n modalCancel: 'Cancelar',\n modalSave: 'Ahorrar',\n upgradeMemorial: {\n initialSingleInbox: 'cuenta',\n initialMultipleInbox: 'cuentas',\n singleInbox: 'cuenta',\n multipleInbox: 'cuentas',\n singleDays: 'dia',\n multipleDays: 'días',\n monthlyCycle: '30 dias',\n annuallyCycle: 'un año',\n singleRemnant: 'queda',\n multipleRemnant: 'quedan',\n singleCapsThis: 'Esto',\n multipleCapsThis: 'Estos',\n singleRemnantDays: 'restante',\n multipleRemnantDays: 'restantes',\n singleEquivalent: 'equivale',\n multipleEquivalent: 'equivalen',\n singleRemaining: 'restante',\n multipleRemaining: 'restantes',\n upgradeDefault: '<0>Usted ya pago {{amountUsed}} para usar {{cycleText}} su <1>{{planName}} - Titan con {{initialInboxAmount}} {{initialInboxText}} de correo <2>y todavía le {{remnantText}} {{remnantDays}} {{daysText}} para usar. {{thisTexts}} {{daysText}} {{remnantDaysText}} {{equivalentText}} a {{refund}} que serán devueltos en forma de descuento en su factura al realizar la actualización al <3>{{newPlanName}} - Titan con {{inboxAmount}} {{inboxText}} de correo.',\n upgradeNegativeDays: '<0>Usted ya pagó {{amountUsed}} para usar {{cycleText}} en su <1>{{planName}} - Titan con {{initialInboxAmount}} {{initialInboxText}} de Correo Electrónico. <2>Su plan venció, pero permanecerá activo por más {{remnantDays}} {{daysText}}. Como usted ya usó el plan por el tiempo contratado, no se aplicará ningún descuento a su factura y al actualizar a un <3>{{newPlanName}} - Titan con {{inboxAmount}} {{inboxText}} de Correo Electrónico<4>, su suscripción se renovará automáticamente por otros {{cycleText}}.',\n upgradeZeroDays: '<0>Usted ya pagó {{amountUsed}} para usar {{cycleText}} en su <1>{{planName}} - Titan con {{initialInboxAmount}} {{initialInboxText}} de Correo Electrónico. <2>Su plan actual vence hoy y como usted ya lo usó durante el tiempo contratado, no se aplicará ningún descuento a su factura. Al actualizar a un <3>{{newPlanName}} - Titan con {{inboxAmount}} {{inboxText}} de Correo Electrónico<4>, su suscripción se renovará automáticamente por otros {{cycleText}}.',\n },\n modalOldInvoice: {\n title: '¿Desea cancelar la factura abierta y generar una nueva?',\n subtitle: 'Usted tiene una factura abierta para este plan',\n ongoingTitle: 'Factura abierta',\n viewOngoingInvoiceLabel: 'Ver factura',\n ongoingSubtitle: 'Al hacer clic en “Generar nueva factura” esta factura será cancelada',\n mailBoxItem: 'Cuentas de correo',\n totalValue: 'Saldo a Pagar',\n warning: 'Si ya ha pagado esta factura, solo espere la activación automática de su plan. Los pagos por Cupón de Pago pueden tardar hasta 72 horas en procesarse.',\n close: 'CERRAR',\n execute: 'GENERAR NUEVA FACTURA',\n pendingLabel: 'Pendiente',\n aplliedCredit: 'Descuentos aplicados',\n },\n actualPlan: 'Plan actual',\n newPlanCardTitle: 'Planes disponibles',\n newPlanCardDescription: 'Seleccione una de las siguientes opciones para solicitar la actualización de su plan y recibir más espacio de almacenamiento para sus buzones de correo:',\n storage: 'de almacenamiento',\n monthlyPerMailBox: ' ao mês / conta de e-mail',\n freeTrialPeriod: 'em Período Gratuito',\n annuallyPerMailBox: '/año por cuentas de correo',\n savedPercent: '<0>( {{savedAmount}}<1>% de descuento )',\n instantAccess: '( Acceso inmediato al plan )',\n paymentMethod: 'Forma de Pago',\n invoiceCardTitle: 'Factura',\n buyMoreAccountsLink: 'Quiero comprar más cuentas de correo para mi Plan de Correo Electrónico TITAN.',\n boughtMailBoxes: 'Cuentas de correo',\n valuePerMailBox: 'Valor por cuenta de correo',\n recurrentValue: 'Valor recurrente',\n nextDueDate: 'Vencimiento ',\n changePlanTo: '<0>Actualización para {{planName}} {{cycle}} con {{accounts}} cuentas de correo electrónico.<1>Periodo de contratación: ({{from}} - {{to}})',\n freeBenefits: \"1 GB de almacenamiento por cuentaWebmail y aplicaciones para Android e iOS Soporte con Outlook, Gmail y otras aplicaciones Potente filtro antispam Protección antivirus avanzada Calendario y contactos integrados i Soporte multi-cuentasi Importación de correos electrónicos y contactos existentes con un solo clici {{ domain }} ',\n tagOfTrialTime: '30 DÍAS GRATIS DE PRUEBA',\n productDescription: 'El {{ productName }} es una solución de HostGator para que los emprendedores tengan una dirección de correo personalizado con el nombre de su empresa.',\n advantages: {\n 1: 'Correo personalizado @tudominio',\n 2: '10 GB de almacenamiento por cuenta',\n 3: 'Webmail y Aplicaciones para Android y iOS',\n 4: 'Protección anti-spam y antivirus',\n 5: 'Calendarios y contactos integrados',\n 6: '¡Y mucho más!',\n },\n form: {\n emailAddressLabel: 'Dirección de correo',\n emailAddressPlaceholder: 'Ej: contacto',\n domainLabel: 'Dominio',\n passwordLabel: 'Contraseña',\n passwordError: 'Debe tener mínino 8 caracteres.',\n submitButton: 'Iniciar periodo de prueb',\n // eslint-disable-next-line no-template-curly-in-string\n termsOfService: 'Después del periodo de prueba gratis, la suscripción mensual es ${{ price }} por cuenta de correo, con renovación automática. Cancele cuando quiera. ',\n },\n },\n modalTitanTrialHirePlan: {\n buttonAddAccount: {\n label: 'Agregar una cuenta más',\n },\n emailSuggestions: {\n 1: 'ej.: contato',\n 2: 'ej.: ventas',\n 3: 'ej.: atendimiento',\n 4: 'ej.: soporte',\n 5: 'ej.: financiero',\n },\n title: 'Titan Essentials 10GB',\n tagOfTrialTime: '30 DÍAS GRATIS DE PRUEBA',\n confirmText: 'Soy consciente de que cuando comience el período de prueba gratuito del correo electrónico Titan Essentials no podré cambiar a Titan Básico (gratuito del web hosting).',\n productDescription: {\n 1: 'El ',\n 2: ' es una solución de HostGator para que los emprendedores tengan una dirección de correo electrónico personalizada con el nombre de su empresa.',\n 3: '¡Aproveche ahora y cree su primera cuenta de correo profesional con ',\n 4: '30 días gratis!',\n },\n termDescriptions: '<0>Después del período de prueba gratuito, la suscripción mensual al <1> {{productName}} cuesta <2>{{amount}} por cuenta de correo electrónico<3> con renovación automática y se puede cancelar en cualquier momento.',\n titleForm: 'Cree su primera cuenta de correo profesional Titan Essentials',\n },\n bannerTitanTrialInSites: {\n title: 'Cree su primera cuenta de correo electrónico profesional Titan Essential',\n description: 'El correo electrónico profesional es una solución de HostGator para que los emprendedores tengan una dirección de correo electrónico personalizada con el nombre de su empresa.',\n tagOfTrialTime: '30 días gratis para probar',\n },\n modalToAlertUpgradeWhenInTrialPlan: {\n title: 'Cambio de plan',\n description: 'Todavía tiene {{ remainingPeriod }} días de prueba gratuita , pero no se preocupe, no perderá lo que falta. Al confirmar el cambio de plan, vamos agregar lo que queda como días extras al final del ciclo contratado.',\n buttons: {\n cancel: 'CANCELAR',\n confirm: 'CONFIRMAR CAMBIO',\n },\n },\n sites: {\n tooltip: 'Esta pantalla está dedicada a la administración de sitios web de hosting compartidos.',\n newTooltip: {\n 0: 'Vea sus',\n 1: ' sitios web alojados aquí en HostGator :)',\n },\n pageDescription: {\n empty: {\n title: 'Esta pantalla está dedicada a la administración de sitios web de hosting compartidos.',\n subtitle: 'Vea abajo lo que desea realizar:',\n },\n hasOtherThanPendingStites: {\n singleSubtitle: 'Vea sus sitios alojados aquí en HostGator :)',\n composedSubtitle: {\n 0: 'Elija la plataforma de creación ',\n 1: 'para los sitios web a continuación u otros dominios que tenga',\n 2: ' y comience a crear estos sitios ',\n 3: ':)',\n },\n buttonLabel: 'Crear sitio',\n },\n onlyPendingSites: {\n subtitle: 'Espere la activación de las suscripciones para comenzar a crear su sitio web :)',\n },\n },\n emptyOptions: {\n hireHost: 'Contratar un web Hosting',\n hirePlan: 'Contratar un nuevo Dominio',\n manageServer: 'Administrar su servidor',\n manageEmails: 'Administrar cuentas de correo electrónico',\n manageDomains: 'Administrar dominios',\n manageSecurity: 'Administrar cuentas de correo electrónico',\n manageAcademy: 'Ver cursos de HostGator Academy',\n },\n modalExclusion: {\n title: 'Desactivación del Creador de Sitios',\n descriptor: {\n 0: '¡Esta acción es irreversible! ',\n 1: 'El Creador de Sitios del domínio ',\n 2: ' se desactivará y no tendrá más acceso a la herramienta.',\n },\n radioText: 'Quiero eliminar el Creador de Sitios de todos modos.',\n cancelLabel: 'Renunciar a la acción',\n continueLabel: 'Confirmar desactivación',\n },\n exclusionToast: {\n success: 'El Creador de sitios web se ha desactivado y se ha eliminado el contenido de su sitio web.',\n failure: 'Esta acción no se pudo realizar. Vuelva a intentarlo más tarde.',\n },\n filter: {\n options: {\n all: 'Todos',\n out: 'Fuera de línea ',\n pending: 'Con pendencia financiera ',\n filterBy: 'Filtrar por:',\n },\n placeholder: 'Buscar por dominio',\n clear: 'Limpiar filtros',\n noResults: {\n field: 'Não encontramos nenhum site com o nome digitado acima.',\n option: '<0>No encontramos ningún sitio <1>\"{{status}}\"<2>.',\n },\n },\n createSiteBanner: {\n title: {\n 0: 'Cree un sitio web',\n 1: ' y coloque su marca en internet',\n },\n subtitle: 'Elija la plataforma de creación, instálela, vea consejos de diseño y cómo crear el contenido :)',\n button: 'Crear sitio',\n tools: {\n wordpress: 'WordPress',\n sitebuilder: 'Creador de Sitios',\n other: 'Otras herramientas',\n },\n },\n siteModals: {\n domainCanceled: {\n title: 'Sitio web no disponible',\n contentDomainName: 'El dominio {{domain}} ya no está registrado con HostGator.',\n contentsDomainName: 'Los dominios {{domain}} ya no estan registrados con HostGator.',\n contentInfo: ' Estará disponible en la lista de sitios ya que su contenido permanece con nosotros. Si desea volver a registrar el dominio, ',\n contentsInfo: ' Estarán disponibles en la lista de sitios ya que su contenido permanece con nosotros. Si desea volver a registrar los dominios ',\n contentRedirect: 'visite el sitio web de HostGator.',\n button: 'Entendido',\n },\n planCanceled: {\n title: 'Sitio web eliminado',\n contentDomainName: '<0>Debido a la cancelación del plan, <1>{{domain}} y los demás dominios que estaban en este plan ya no están disponibles<2> en la lista de sitios. Si desea comprar un nuevo plan, ',\n contentRedirect: 'visite el sitio web de HostGator.',\n button: 'Entendido',\n },\n newSite: {\n title: '<0>Cree un sitio web ahora mismo para <1>{{domain}}',\n contentInfo: 'Elija la plataforma de creación, instálela, vea consejos de diseño y cómo crear el contenido :)',\n button: 'Crear sitio',\n },\n createSite: {\n title: {\n 0: '¿Vamos expandir su marca',\n 1: ' creando un nuevo sitio web?',\n },\n description: {\n 0: '¡5 mil millones de personas em el mundo están usando internet!',\n 1: 'No pierda tiempo y cree un sitio web personalizado para',\n 2: ' {{domain}}',\n },\n toolsText: {\n 0: 'Usted puede usar el',\n 1: ' Creador de Sitios web, WordPress',\n 2: ' u otras herramientas para instalar y personalizar su sitio. :)',\n },\n buttonCreate: 'Crear sitio',\n buttonClose: 'No quiero expandir mi marca',\n },\n createSiteWithPartners: {\n title: {\n 0: '¿Vamos expandir su marca',\n 1: ' creando un nuevo sitio web?',\n },\n description: {\n 0: '¡5 mil millones de personas em el mundo están usando internet!',\n 1: 'No pierda tiempo y cree un sitio web personalizado para',\n 2: ' {{domain}}',\n },\n toolsText: {\n 0: 'Usted puede usar el',\n 1: ' Creador de Sitios web, WordPress',\n 2: ' u otras herramientas para instalar y personalizar su sitio. :)',\n },\n buttonCreate: 'Crear sitio',\n buttonClose: 'No quiero expandir mi marca',\n },\n },\n },\n warningStatus: {\n pending: {\n label: 'Esperando la compensación del pago',\n tooltip: 'La compensación del pago por cupón puede tardar hasta 72 horas. Si ya ha pagado, por favor espere.',\n buttonLabel: 'Pagar factura',\n },\n analysis: {\n label: 'Realizando el análisis de seguridad. Este proceso puede demorar hasta 48 horas',\n tooltip: 'Toda nueva compra pasa por el proceso de análisis de seguridad antes de ser aprobada definitivamente. Es un procedimiento normal, no se preocupe.',\n },\n nearDue: {\n day: 'día',\n days: 'días',\n label: '{{date}} para que el sitio web quede fuera de línea ',\n tooltip: 'Su factura de renovación ya está disponible. Realice el pago y evite que su sitio quede fuera de línea ',\n buttonLabel: 'Pagar factura',\n },\n overdue: {\n tooltip: 'Aún no identificamos el pago de su factura de renovación y ya está vencida. Realice el pago y evite que tu sitio web quede fuera de línea.',\n buttonLabel: 'Pagar factura',\n },\n suspended: {\n subLabel: 'Sitio web fuera de línea',\n subLabelTooltip: 'Su sitio web está fuera de línea porque aún no hemos identificado el pago de la factura de renovación',\n label: '{{date}} para que se cancele el sitio web y se eliminen sus archivos',\n tooltip: 'Aún no identificamos el pago de su factura de renovación. Realice el pago y evite perder su sitio web y archivos.',\n day: 'día',\n days: 'días',\n },\n },\n productDetailsBackup: {\n title: 'Copia de seguridad',\n description: {\n 0: 'La última copia de seguridad ',\n 1: ' se realizó el ',\n },\n buttonLabel: 'Realizar copia de seguridad',\n },\n};\n","import i18n from 'i18next';\nimport { reactI18nextModule } from 'react-i18next';\nimport { config } from '@/config';\n\nimport ptTranslation from './pt_BR';\nimport esTranslation from './es_ES';\n\nexport const selectedLanguage = config.LANG.code;\n\nexport const createLocale = (lang = 'br') => i18n\n .use(reactI18nextModule) // passes i18n down to react-i18next\n .init({\n interpolation: {\n escapeValue: false,\n },\n resources: {\n pt: { translation: ptTranslation },\n es: { translation: esTranslation },\n },\n lng: lang,\n fallbackLng: {\n br: ['pt'],\n default: ['es'],\n },\n });\n\nexport default createLocale(selectedLanguage);\n","import React, { createContext } from 'react';\n\nexport const LocaleContext = createContext({});\n\nconst LocaleProvider = ({ content, children }) => {children} ;\n\nexport default LocaleProvider;\n","import { Link } from 'gatorcomponents';\nimport React from 'react';\n\nexport default {\n manualSelectDns: {\n backLabel: 'Voltar',\n cancelLabel: 'Cancelar',\n continueLabel: 'Continuar',\n nextStepLabel: 'Próximo passo',\n finishLabel: 'Ok, entendi',\n howToSetupLabel: 'Ver como configurar',\n backToInstructions: 'Voltar para instruções',\n helpLink: (\n <>\n {'Está com dificuldade? '}\n \n {`\"${domain}\" `}\n \n não foi registrado na HostGator, você precisa acessar o site onde ele foi registrado e mudar as configurações para apontar para a sua hospedagem na HostGator.\n \n ),\n inputLabel: 'Selecione onde ele foi registrado',\n selectPlaceholder: 'Selecionar',\n },\n domainOriginalRegistrationV2: {\n subtitle: 'Selecione o provedor onde o domínio foi registrado',\n selectPlaceholder: 'Selecionar',\n disabledNextStepToolTip: 'Clique no botão do provedor para prosseguir',\n },\n howToSetup: {\n title: 'Como configurar domínio no outro provedor de site ',\n howToSectionTitle: 'Siga o passo a passo para substituir seu nome de servidor',\n steps: ({ from }) => [\n {\n id: 'firstStep',\n description: 'Acesse o site do provedor onde seu domínio está registrado',\n },\n {\n id: 'secondStep',\n description: `Localize os nomes de servidores (DNS) atuais no site da ${from}`,\n },\n {\n id: 'thirdStep',\n description: `Substitua o nomes de servidores (DNS) que está no site da ${from} pelo da CloudFlare. Basta copiar e colar os valores abaixo:`,\n alert: 'Ao continuar suas configurações atuais do domínio serão alteradas',\n },\n ],\n serverLabel: index => `Servidor ${index + 1} (DNS): `,\n goTo: selectedManualDns => `ir para ${selectedManualDns}`,\n alreadyMadeChanges: 'Continuar',\n backtoInstructions: 'Voltar',\n },\n howToSetupV2: {\n subtitle: 'Substitua os nomes de servidores atuais (DNS) pelos novos nomes de servidores abaixo. Copie os valores, cole no site do seu provedor atual e salve as alterações.',\n alert: 'Ao continuar suas configurações atuais do domínio serão alteradas para os da Cloudflare.',\n serverLabel: index => `Servidor ${index + 1}: `,\n alreadyMadeChanges: 'Já fiz a configuração',\n originalDnsLabel: 'Nomes de servidores atuais (DNS)',\n newDnsLabel: 'Seu novo nome de servidor (DNS)',\n configureDomainText: 'Ao clicar em “configurar domínio” você será redirecionado para o site do seu provedor para realizar o passo 2. Essa ação é necessária para que o seu domínio possa usar a CDN.',\n configureDomainButton: 'Configurar domínio',\n domainHasConfiguredLabel: 'Já fiz a configuração do meu domínio para o da Cloudflare.',\n backtoInstructions: 'Voltar',\n },\n finishDomainSetup: {\n title: 'Finalizando as configurações de domínio',\n subtitle: 'Após ter realizado as configurações, acompanhe aqui o status de seu domínio.',\n box: {\n title: 'Alterações que você realizou:',\n description: ({ from }) => `DNS atual na ${from} para DNS da Hostgator`,\n alert: (\n <>\n \n {'Em andamento: '}\n \n {'A configuração do domínio ainda está acontecendo e pode levar até '}\n 24 horas. \n \n ),\n },\n },\n finishDomainSetupV2: {\n title: 'Finalizando as configurações de domínio',\n subtitle: 'Acompanhe aqui o status do seu domínio.',\n box: {\n title: 'Alterações que você realizou:',\n description: ({ from }) => `Transferência ${from ? `DNS ${from} para DNS Cloudflare.` : ' para DNS da Cloudflare.'}`,\n alert: (\n <>\n \n {'Em andamento: '}\n \n {'A configuração do domínio ainda está acontecendo e pode levar até '}\n 24h \n {' para domínios nacionais e até '}\n 72h \n {' para domínios internacionais.'}\n \n ),\n },\n },\n domainNotRegistered: {\n title: domain => `O domínio “${domain}” ainda não está registrado`,\n description: 'Para criar um novo site o domínio precisa estar registrado e ativo. Clique no botão para registrá-lo agora mesmo!',\n redirectLabel: 'Registrar domínio',\n },\n activationError: {\n domainWithProblemTitle: 'Domínio temporariamente indisponível',\n domainWithProblemDescription: 'Não foi possível ativar a CDN por conta de problemas no seu domínio, por favor, entre em contato com o seu registrante e confirme se há alguma pendência.',\n confirmationCta: 'Ok, entendi',\n },\n },\n },\n};\n","import { Link } from 'gatorcomponents';\nimport React from 'react';\n\nexport default {\n manualSelectDns: {\n backLabel: 'Volver',\n cancelLabel: 'Cancelar',\n continueLabel: 'Continuar',\n nextStepLabel: 'Próximo passo',\n finishLabel: 'Ok, entendí',\n howToSetupLabel: 'Ver cómo configurar',\n backToInstructions: 'Volver a las instrucciones',\n helpLink: (\n <>\n {'¿Tiene dificultades? '}\n \n {`\"${domain}\" `}\n \n no se registró en HostGator, necesitas acceder al sitio donde se registró y cambiar las configuraciones para que apunten a tu hospedaje en HostGator.\n \n ),\n inputLabel: 'Selecciona dónde se registró',\n selectPlaceholder: 'Seleccionar',\n },\n domainOriginalRegistrationV2: {\n subtitle: 'Seleccione el proveedor donde se registró el dominio',\n selectPlaceholder: 'Seleccionar',\n disabledNextStepToolTip: 'Haga clic en el botón del proveedor para continuar',\n },\n howToSetup: {\n title: 'Cómo configurar dominio en otro proveedor de sitio',\n howToSectionTitle: 'Sigue los pasos para cambiar tu nombre de servidor',\n steps: ({ from }) => [\n {\n id: 'firstStep',\n description: 'Accede al sitio del proveedor donde se registró tu dominio',\n },\n {\n id: 'secondStep',\n description: `Localiza los nombres de servidores (DNS) actuales en el sitio de ${from}`,\n },\n {\n id: 'thirdStep',\n description: `Reemplaza los nombres de servidores (DNS) que están en el sitio de ${from} por los de CloudFlare. Solo copia y pega los valores a continuación:`,\n alert: 'Al continuar, tus configuraciones actuales del dominio serán cambiadas',\n },\n ],\n serverLabel: index => `Servidor ${index + 1} (DNS): `,\n goTo: selectedManualDns => `ir a ${selectedManualDns}`,\n alreadyMadeChanges: 'Continuar',\n backtoInstructions: 'Volver',\n },\n howToSetupV2: {\n subtitle: 'Reemplace los nombres de servidores actuales (DNS) con los nuevos nombres de servidores de abajo. Copie los valores, péguelos en el sitio web de su proveedor actual y guarde los cambios.',\n alert: 'Al continuar, sus configuraciones actuales de dominio se cambiará a las de Cloudflare',\n serverLabel: index => `Servidor ${index + 1}: `,\n alreadyMadeChanges: 'Ya hice la configuración',\n originalDnsLabel: 'Nombres de servidores actuales (DNS)',\n newDnsLabel: 'Su nuevo nombre de servidor (DNS)',\n configureDomainText: 'Al hacer clic en \"configurar dominio\", será redirigido al sitio de su proveedor para realizar el paso 2. Esta acción es necesaria para que su dominio pase a usar una CDN.',\n configureDomainButton: 'Configurar dominio',\n domainHasConfiguredLabel: 'Ya configuré mi dominio para Cloudflare.',\n backtoInstructions: 'Volver',\n },\n finishDomainSetup: {\n title: 'Finalizando las configuraciones de dominio',\n subtitle: 'Después de haber realizado las configuraciones, sigue aquí el estado de tu dominio.',\n box: {\n title: 'Cambios que realizaste:',\n description: ({ from }) => `DNS actual en ${from} por DNS de Hostgator`,\n alert: (\n <>\n \n {'En proceso: '}\n \n {'La configuración del dominio aún está sucediendo y puede tardar hasta '}\n 24 horas. \n \n ),\n },\n },\n finishDomainSetupV2: {\n title: 'Finalizando las configuraciones de dominio',\n subtitle: 'Acompañe aquí el status de su dominio.',\n box: {\n title: 'Cambios que ha realizado:',\n description: ({ from }) => `Transferencia ${from && `de DNS${from}`} a DNS de Cloudflare.`,\n alert: (\n <>\n \n {'Em andamento: '}\n \n {'La configuración del dominio aún está en proceso y puede tardar hasta '}\n 24 horas. \n \n ),\n },\n },\n domainNotRegistered: {\n title: domain => `El dominio “${domain}” aún no está registrado`,\n description: 'Para crear un nuevo sitio, el dominio necesita estar registrado y activo. Haz clic en el botón para registrarlo ahora mismo!',\n redirectLabel: 'Registrar dominio',\n },\n activationError: {\n domainWithProblemTitle: 'Dominio no disponible temporalmente',\n domainWithProblemDescription: 'No fue posible activar la CDN debido a problemas con su dominio, por favor, comuníquese con su registrante y confirme si hay algo pendiente.',\n confirmationCta: 'Ok, entendí',\n },\n },\n },\n};\n","import esContent from './useDnsModal.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './useDnsModal.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './useDnsModal.es';\n\nexport default {\n ...esContent,\n};\n","import useDnsModalBR from './useDnsModal.br';\nimport useDnsModalCL from './useDnsModal.cl';\nimport useDnsModalCO from './useDnsModal.co';\nimport useDnsModalMX from './useDnsModal.mx';\n\nconst locales = {\n BR: useDnsModalBR,\n CL: useDnsModalCL,\n CO: useDnsModalCO,\n MX: useDnsModalMX,\n};\n\nexport default locales;\n","export const PaymentMethodsTypes = {\n BANK_TRANSFER: 'bank_transfer',\n GP_BOLETO: 'gp_boleto',\n GP_PAYPAL: 'gp_paypal',\n PAYPAL: 'paypal',\n BRASPAG_CREDIT: 'braspag_credit',\n DLOCAL: 'dlocal',\n QR_PAYMENT: 'qr_payment',\n EFECTIVE_PAYMENT: 'cash_payment',\n WALLET: 'wallet',\n PIX: 'gp_pix',\n PAYU_BOLETO: 'payu_boleto',\n CURRENT_CREDIT_CARD: 'current_credit_card',\n};\n\nexport const PaymentMethodsKey = {\n CURRENT_CREDIT_CARD: 'current_credit_card',\n};\n\nexport const PaymentStatusTypes = {\n SUCCESS_GENERIC: 'SUCCESS_GENERIC',\n FAILURE_CREDIT_CARD: 'FAILURE_CREDIT_CARD',\n PIX_TIME_EXPIRED: 'PIX_TIME_EXPIRED',\n PIX_ONGOING: 'PIX_ONGOING',\n ERROR_GENERIC: 'ERROR_GENERIC',\n FOLLOW_NEW_TAB_INSTRUCTIONS: 'FOLLOW_NEW_TAB_INSTRUCTIONS',\n GENERIC_FAILURE: 'GENERIC_FAILURE',\n};\n\nexport const PAYMENT_MODAL_CALLER = {\n INVOICES_MANAGER: 'INVOICES_MANAGER',\n SUBSCRIPTION_LIST: 'SUBSCRIPTION_LIST',\n SUBSCRIPTION_MANAGER: 'SUBSCRIPTION_MANAGER',\n SITELOCK_UPGRADE: 'SITELOCK_UPGRADE',\n};\n\nexport const PaypalActionTypes = {\n CALLING_BY_SWITCH_PAYMENT_METHOD_MODAL: 'payment_method_modal_by_subscriptions',\n CALLING_BY_PAYMENT_MODAL: 'payment_modal_by_manager_subscriptions',\n CALLING_BY_MANAGER_INVOICES: 'payment_modal_by_manager_invoices',\n CALLING_BY_LIST_SUBSCRIPTIONS: 'payment_modal_by_list_subscriptions',\n};\n\nexport const PAYMENT_STATUS = {\n FAIL: 'paymentFail',\n SUCCESS: 'paymentSuccess',\n HIDDEN: 'paymentHidden',\n PENDING_ANALYSIS: 'pendingAnalysis',\n};\n\nexport const CALLER = {\n SUBSCRIPTIONS: 'subscriptions',\n INVOICES: 'invoices',\n SITELOCK: 'sitelock',\n};\n","import React from 'react';\nimport { PaymentMethodsTypes, PaymentStatusTypes } from '@/hooks/billing/subscriptions/usePaymentModal/usePaymentModal.types';\nimport { Button } from 'gatorcomponents';\n\nexport default {\n title: 'Pagar fatura',\n titleSubscriptions: 'Alterar forma de pagamento',\n descriptionSubscriptions: 'Escolha o método de pagamento para renovar suas próximas faturas ou ajuste as parcelas:',\n invoiceDetails: {\n invoice: 'Fatura',\n dueDate: 'Vencimento',\n subtotal: 'Subtotal',\n totalValue: 'Valor total + impostos',\n total: 'Total',\n taxes: 'Impostos',\n credits: 'Créditos',\n amountPaid: 'Já foi pago',\n showDetailsButtonLabel: 'Ver detalhes',\n hideDetailsButtonLabel: 'Ocultar detalhes',\n vatTooltip: taxRate => `O VAT (Value-Added Tax) é aplicado de acordo com a legislação tributária do país. A alíquota atual é de ${taxRate}%.`,\n },\n successChangeMethodToast: {\n title: 'Pagamento atualizado',\n info: 'Suas próximas faturas usarão a nova forma de pagamento.',\n },\n invoiceDetailsLabel: 'Detalhes da fatura',\n selectPaymentMethod: 'Selecione a forma de pagamento',\n installmentLabel: (installment, value) => `${installment}x de ${value}`,\n paymentMethods: {\n [PaymentMethodsTypes.BANK_TRANSFER]: {\n name: 'Transferência bancária',\n selectPlaceholder: 'Selecione a opção de pagamento',\n icon: 'IconSwitch',\n },\n [PaymentMethodsTypes.GP_BOLETO]: {\n name: 'Boleto bancário',\n icon: 'IconData',\n description: () => (\n <>\n Pagamentos via boleto podem levar até 24h para serem identificados.\n \n Para acesso imediato, prefira\n {' '}\n Cartão de Crédito, Pix ou PayPal. \n
\n \n ),\n getTicketButton: 'Gerar boleto',\n modalTitle: 'Pagar com Boleto bancário',\n changeMethodButtonLabel: 'Alterar forma de pagamento',\n instruction: 'Para pagar seu boleto, basta utilizar as informações abaixo:',\n ticketTipLabels: {\n 0: 'Você pode pagar seu boleto em qualquer lotérica, caixa eletrônico ou aplicativo de banco.',\n 1: 'O seu pagamento será processado e confirmado em até 24h úteis. Portanto, após o pagamento aguarde a compensação para evitar duplicidade.',\n 2: 'Se o vencimento do seu boleto cair em um feriado ou final de semana, você poderá pagá-lo no próximo dia útil.',\n },\n saveTicketButton: 'Salvar boleto em PDF',\n printTicketButton: 'Imprimir boleto',\n },\n [PaymentMethodsTypes.GP_PAYPAL]: {\n name: 'PayPal',\n icon: 'IconPayPal',\n directions: 'Clique no botão acima para confirmar e realizar seu pagamento no PayPal.',\n selectAccount: 'Selecione qual conta PayPal gostaria de utilizar:',\n alert: 'Transação segura e criptografada.',\n },\n [PaymentMethodsTypes.EFECTIVE_PAYMENT]: {\n name: 'Pago en Efectivo',\n icon: 'IconData',\n selectPlaceholder: 'Selecciona la opción de pago',\n buttonLabel: 'Continuar para o pagamento',\n description: 'Você será redirecionado para concluir seu pagamento em uma tela segura.',\n modal: {\n title: 'Siga as instruções da plataforma de pagamento',\n description: 'Uma nova página foi aberta para que você realize seu pagamento. Siga as instruções e acompanhe o status do seu pagamento em sua lista de faturas.',\n buttonLabel: 'Fechar',\n redirectText: 'Caso a página não abra automaticamente, clique aqui',\n },\n },\n [PaymentMethodsTypes.PAYU_BOLETO]: {\n name: 'Pago en Efectivo',\n icon: 'IconData',\n selectPlaceholder: 'Selecciona la opción de pago',\n buttonLabel: 'Continuar para o pagamento',\n description: 'Você será redirecionado para concluir seu pagamento em uma tela segura.',\n modal: {\n title: 'Siga as instruções da plataforma de pagamento',\n description: 'Uma nova página foi aberta para que você realize seu pagamento. Siga as instruções e acompanhe o status do seu pagamento em sua lista de faturas.',\n buttonLabel: 'Fechar',\n redirectText: 'Caso a página não abra automaticamente, clique aqui',\n },\n },\n [PaymentMethodsTypes.BRASPAG_CREDIT]: {\n name: 'Novo Cartão de crédito',\n icon: 'IconCard',\n replaceCardLabel: 'Substituirá o cartão acima em todas as assinaturas vinculadas à ele.',\n useOnNextRenovationLabel: 'Usar esta forma de pagamento nas próximas renovações deste(s) produto(s).',\n saveCcButtonLabel: 'Pagar fatura e Salvar Cartão',\n changeMethodButtonLabel: 'Alterar e Salvar Cartão',\n bottomMessage: 'Transação segura e criptografada.',\n selectInstallmentsPlaceholder: 'Selecione o número de parcelas',\n },\n [PaymentMethodsTypes.DLOCAL]: {\n name: '',\n icon: '',\n replaceCardLabel: '',\n useOnNextRenovationLabel: '',\n saveCcButtonLabel: '',\n bottomMessage: '',\n selectInstallmentsPlaceholder: '',\n },\n [PaymentMethodsTypes.CURRENT_CREDIT_CARD]: {\n name: 'Cartão cadastrado',\n selectInstallmentsPlaceholder: 'Selecione o número de parcelas',\n useOnNextRenovationLabel: 'Usar esta forma de pagamento nas próximas renovações deste(s) produto(s).',\n dueLabel: date => `Vence em ${date}`,\n payInvoiceButtonLabel: 'Pagar fatura',\n changeMethodButtonLabel: 'Alterar forma de pagamento',\n bottomMessage: 'Transação segura e criptografada.',\n },\n [PaymentMethodsTypes.QR_PAYMENT]: {\n name: 'QR Interoperable',\n icon: 'IconQrCode',\n },\n [PaymentMethodsTypes.WALLET]: {\n name: 'Billetera Eletcrónica',\n icon: 'IconQrCode',\n },\n [PaymentMethodsTypes.PIX]: {\n name: 'Pix',\n icon: 'IconPix',\n label: 'Gerar código Pix',\n labelChangePaymentMethod: 'Alterar forma de pagamento',\n description: \"Clique no botão 'Gerar código Pix' para confirmar e realizar seu pagamento na próxima tela.\",\n descriptionChangePaymentMethod: \"Clique no botão 'Alterar forma de pagamento' para confirmar e realizar seu pagamento na próxima tela.\",\n secureTransition: 'Transação rápida e segura com o Pix.',\n },\n modo: {\n icon: 'IconModo',\n },\n yape: {\n icon: 'IconYape',\n },\n defaultContinue: 'Continuar para o pagamento',\n defaultContinueChangeMethod: 'Alterar forma de pagamento',\n defaultDescription: 'Você será redirecionado para concluir seu pagamento em uma tela segura.',\n multiplePaymentMethodsDescription: 'Você será redirecionado para concluir seu pagamento em uma tela segura.',\n },\n paymentStatus: {\n [PaymentStatusTypes.SUCCESS_GENERIC]: {\n title: 'Pagamento concluído',\n description: 'Parabéns! Seu pagamento foi realizado com sucesso. Em breve, você receberá um e-mail de confirmação.',\n buttonLabel: 'Voltar para minhas faturas',\n },\n [PaymentStatusTypes.FAILURE_CREDIT_CARD]: {\n title: 'Ops! Algo deu errado no seu pagamento',\n description: 'Tente novamente em alguns minutos ou utilize outro Cartão de Crédito.',\n buttonLabel: 'Tentar novamente',\n secondButtonLabel: 'Usar outro Cartão',\n },\n [PaymentStatusTypes.PIX_TIME_EXPIRED]: {\n title: 'Tempo para pagamento esgotado',\n description: 'Altere o método de pagamento ou atualize o QR Code para concluir. Se já realizou o pagamento, você receberá um e-mail de confirmação em breve.',\n buttonLabel: 'Alterar forma de pagamento',\n secondButtonLabel: 'Atualizar QR Code',\n },\n [PaymentStatusTypes.FOLLOW_NEW_TAB_INSTRUCTIONS]: {\n title: 'Siga as instruções da plataforma de pagamento',\n description: 'Uma nova página foi aberta para que você realize seu pagamento. Siga as instruções e acompanhe o status do seu pagamento em sua lista de faturas.',\n buttonLabel: 'Fechar',\n pageNotLoaded: ({ handleClick }) => (\n <>\n {'Caso a página não abra automaticamente, '}\n criando um novo site \n ?\n \n ),\n description: {\n 0: domain => (\n <>\n {'5 bilhões de pessoas no mundo estão usando a internet. Não perca tempo e crie um site personalizado para '}\n {`${domain}.`} \n \n ),\n 1: () => (\n <>\n {'Você pode usar o '}\n Criador de Sites, Wordpress \n {' ou outras ferramentas para instalar e personalizar. :)'}\n \n ),\n },\n buttonLabel: 'Criar site',\n backButtonLabel: 'Não quero expandir minha marca',\n },\n },\n },\n};\n","import React from 'react';\n\nexport default {\n productsDetails: {\n modals: {\n createSite: {\n title: () => (\n <>\n {'¿Vamos expandir su marca '}\n creando un nuevo sitio web \n ?\n \n ),\n description: {\n 0: domain => (\n <>\n {' bilhões de pessoas no mundo estão usando a internet! Não perca tempo e crie um site personalizado para '}\n {`${domain}.`} \n \n ),\n 1: () => (\n <>\n {'¡5 mil millones de personas em el mundo están usando internet! No pierda tiempo y cree un sitio web personalizado para '}\n Criador de Sites, Wordpress \n {' Usted puede usar el Creador de Sitios web, WordPress u otras herramientas para instalar y personalizar su sitio. :)'}\n \n ),\n },\n buttonLabel: 'Crear sitio',\n backButtonLabel: 'No quiero expandir mi marca',\n },\n },\n },\n};\n","import esContent from './products.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './products.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './products.es';\n\nexport default {\n ...esContent,\n};\n","import productsBR from './products.br';\nimport productsCL from './products.cl';\nimport productsCO from './products.co';\nimport productsMX from './products.mx';\n\nconst locales = {\n BR: productsBR,\n CL: productsCL,\n CO: productsCO,\n MX: productsMX,\n};\n\nexport default locales;\n","export const TOS_STATUS = {\n DISK: 'tos-disk',\n INODES: 'tos-inodes',\n BACKUP: 'tos-backup',\n MYSQL: 'tos-mysql',\n CPU: 'tos-cpu',\n DMCA: 'tos-dmca',\n PISHING: 'tos-phishing',\n};\n","import React from 'react';\nimport { Button } from 'gatorcomponents';\nimport { DNS_PROPAGATION_ARTICLE } from '@/config/urls/supportUrls';\nimport { TOS_STATUS } from '@/enums/preChat/preChat.enum';\nimport { ALERT_TYPES, ANALYSIS_STATUS } from '@/components/Layout/Menu/MyAlerts/MyAlerts.types';\n\nexport default {\n invoiceStaticMessage: ({ totalInvoice, sum, handleClick }) => (\n <>\n {'Você tem '}\n {totalInvoice}\n {' fatura(s) para pagar com um total de '}\n {sum}\n {'. '}\n Entenda o prazo. \n \n ),\n domainInPropagation: ({ handleClick }) => (\n <>\n Parece que você tem um ou mais domínios sendo propagados, isso poderá deixar seu site\n {' '}\n instável ou fora do ar por até 24 horas. \n {' '}\n 24 horas após a configuração do domínio. \n \n ),\n knowMoreLabel: 'Quer saber mais sobre propagação?',\n helpCentralLabel: (\n <>\n Clique aqui \n {' '}\n e acesse a nossa Central de Ajuda.\n \n ),\n alertTitle: 'Domínio(s) sendo propagado(s):',\n accordionTitle: 'Dominios em propagação',\n okUnderstoodButtonLabel: 'Ok, entendi',\n },\n refundModal: {\n title: 'Status do reembolso',\n refundCompletedCardLabel: (value, paymentMethod) => (\n <>\n O valor de\n {' '}\n {value} \n {' '}\n para receber no modo\n {' '}\n {paymentMethod} \n {' '}\n já foi reembolsado!\n \n ),\n refundPendingCardLabel: (value, paymentMethod) => (\n <>\n Você tem um reembolso no valor de\n {' '}\n {value} \n {' '}\n para receber no modo\n {' '}\n {paymentMethod} \n .\n \n ),\n oneWeekCancel: 'Para cancelamentos feitos após 7 dias do pagamento, o reembolso será parcial.',\n accordionTitle: 'Produto(s) cancelado(s)',\n canceledProduct: {\n label: 'Produto cancelado:',\n value: productDescription => (\n <>\n {productDescription}\n \n ),\n },\n canceledDate: {\n label: 'Data do cancelamento:',\n value: date => (<>{date}),\n },\n canceledModality: {\n label: 'Modalidade:',\n value: modality => (<>{modality}),\n },\n refundValue: {\n label: 'Valor do reembolso:',\n value: value => (<>{value}),\n },\n modeAndTerm: {\n title: 'Modo do reembolso escolhido e prazo:',\n refundMethods: {\n wholeCreditsLabel: 'Créditos HostGator - o valor será abatido em uma próxima fatura.',\n wholeCreditCardLabel: 'Cartão de Crédito - o valor será devolvido em até 3 faturas (90 dias), de acordo com o seu banco. Entre em contato com a administradora do seu cartão para mais informações.',\n wholePaypalLabel: (\n <>\n PayPal - devolução de acordo com as\n {' '}\n \n regras do próprio PayPal\n \n .\n \n ),\n wholePixLabel: 'Pix e Boleto - no momento, a opção disponível para reembolso é Créditos HostGator - Caso queira a devolução do valor entre em contato com o suporte Financeiro via chat.',\n partialCreditsLabel: 'Créditos HostGator - o valor será abatido em uma próxima fatura.',\n partialCreditCardLabel: 'Cartão de Crédito - opção disponível em até 90 dias após a contratação e devolução em até 3 faturas (90 dias), de acordo com o seu banco. Entre em contato com a administradora do seu cartão para mais informações.',\n partialPaypalLabel: (\n <>\n PayPal - devolução de acordo com as\n {' '}\n \n regras do próprio PayPal\n \n .\n \n ),\n partialPixLabel: 'Pix e Boleto - no momento, a opção disponível para reembolso é Créditos HostGator - Caso queira a devolução do valor entre em contato com o suporte Financeiro via chat.',\n },\n },\n paymentMethods: {\n hgCredits: 'Créditos HostGator',\n creditCard: 'Cartão de Crédito',\n paypal: 'PayPal',\n },\n knowMoreLabel: (\n \n Entenda mais sobre os prazos e valores de reembolso que você recebeu na nossa Central de Ajuda\n {' '}\n
clicando aqui \n .\n
\n "\n {domain}\n "\n \n {' '}\n precisa ser configurado para um Plano aqui da HostGator ou outra plataforma. Configurar domínio.\n \n <>Faltam \n {daysToDue === 30 && (\n <> 30 \n )}\n {daysToDue < 30 && daysToDue > 10 && (\n <>menos que 30\n )}\n {daysToDue === 10 && (\n <>apenas 10\n )}\n {daysToDue < 10 && daysToDue > 5 && (\n <>menos que 10\n )}\n {daysToDue === 5 && (\n <>apenas 5\n )}\n {daysToDue < 5 && (\n <>menos que 5\n )}\n <> dias para sua assinatura ser cancelada.\n \n <>\n {' '}\n <>Ative a renovação e evite perder seus dados. \n \n <>Em \n {dueDate}\n <> sua assinatura será cancelada.\n \n {' '}\n \n {' '}\n {refundValue}\n {' '}\n \n para receber no modo\n \n {' '}\n {refundMethod}\n {' '}\n \n já foi\n {' '}\n {refundMethod && refundMethod.includes('HostGator') ? 'creditado' : 'reembolsado'}\n .\n {' '}\n gerador de senhas. \n \n ),\n },\n tos: {\n [TOS_STATUS.DISK]: {\n title: 'Seu espaço em disco está cheio.',\n description: ({ handleClick }) => (\n <>\n Entre no chamado para ser orientado pelos nossos especialistas sobre como desbloquear.\n {' '}\n handleClick()} />\n \n ),\n },\n noBackup: {\n title: planInfo => `Seu ${planInfo} não possui um backup`,\n description: ({ handleClick }) => (\n <>\n Considere fazer um para não perder seus dados.\n handleClick()} />\n \n ),\n },\n oldBackup: {\n title: (planInfo, daysSinceLast) => `Seu último backup do ${planInfo} foi há mais de ${daysSinceLast} dias`,\n description: ({ handleClick }) => (\n <>\n Considere atualizar para não perder seus dados.\n handleClick()} />\n \n ),\n },\n },\n duplicateOrders: ({ handleClick }) => (\n <>\n {'Você possui um ou mais pedidos iguais para o '}\n \n mesmo produto e domínio.\n \n {' '}\n \n {domain ? `${productName} + ${domain}` : `Domínio ${productName}`}\n \n {', que pode levar até '}\n {'72 horas úteis. '} \n \n {domain ? `${productName} + ${domain}` : `Domínio ${productName}`}\n \n {' está em análise. O prazo de análise é de '}\n {'24 a 48 horas úteis. '} \n \n {domain ? `${productName} + ${domain}` : `Domínio ${productName}`}\n \n {' foi cancelado durante a nossa análise. '}\n {domain} \n {' foi ativado com sucesso!'}\n \n ),\n activation_failed: ({ domain }) => (\n <>\n {'Não foi possível instalar o SSL no domínio '}\n {`${domain}. `} \n \n veja como corrigir\n \n \n ),\n in_progress: ({ domain }) => (\n <>\n {'O SSL está em processo de ativação para seu domínio '}\n \n {`${domain}. `}\n \n Ele ficará ativo em até 24h após a propagação do domínio\n \n ),\n },\n cloudflareFeature: ({ handleClick }) => (\n <>\n {'Gerencie a CDN da Cloudflare na sua hospedagem e deixe seu site mais rápido e seguro. Aproveite esta funcionalidade grátis em '}\n {invoiceid} \n {' Mas não se preocupe! O valor de R$'}\n {creditAmount} \n {' será descontado automaticamente em suas próximas faturas.'}\n \n ),\n received: ({ invoiceid, creditAmount }) => (\n <>\n {'Recebemos um pagamento duplicado da fatura: '}\n {invoiceid} \n {' Mas não se preocupe! O valor de R$'}\n {creditAmount} \n {' já foi descontado em sua última fatura.'}\n \n ),\n },\n};\n","import React from 'react';\nimport { Button } from 'gatorcomponents';\nimport { DNS_PROPAGATION_ARTICLE } from '@/config/urls/supportUrls';\nimport { TOS_STATUS } from '@/enums/preChat/preChat.enum';\nimport { ALERT_TYPES } from '@/components/Layout/Menu/MyAlerts/MyAlerts.types';\n\nexport default {\n invoiceStaticMessage: ({ totalInvoice, sum, handleClick }) => (\n <>\n {'Tienes '}\n {totalInvoice}\n {' factura(s) pendientes para pagar'}\n {' con un total del '}\n {sum}\n {'. '}\n Entienda el plazo. \n \n ),\n domainInPropagation: ({ handleClick }) => (\n <>\n Parece que tiene uno o más dominios en propagación, esto puede dejar su sitio\n {' '}\n inestable o inactivo hasta por 24 horas. \n {' '}\n dentro de las 24 horas \n .\n \n ),\n knowMoreLabel: '¿Quiere saber más sobre la propagación?',\n helpCentralLabel: (\n <>\n Haga clic aquí \n {' '}\n para acceder a nuestra Central de Ayuda.\n \n ),\n alertTitle: 'Dominio(s) siendo propagado(s):',\n accordionTitle: 'Dominios en propagación',\n okUnderstoodButtonLabel: 'Ok, entendí',\n },\n refundModal: {\n title: 'Status del reembolso',\n refundCompletedCardLabel: (value, paymentMethod) => (\n <>\n ¡El valor de\n {' '}\n {value} \n {' '}\n para recibir en la modalidad\n {' '}\n {paymentMethod} \n {' '}\n ya ha sido reembolsado!\n \n ),\n refundPendingCardLabel: (value, paymentMethod) => (\n <>\n Tiene un reembolso por el valor de\n {' '}\n {value} \n {' '}\n para recibir en la modalidad\n {' '}\n {paymentMethod} \n .\n \n ),\n oneWeekCancel: 'Para cancelaciones realizadas después de 7 días del pago, el reembolso será parcial.',\n accordionTitle: 'Producto(s) cancelado(s)',\n canceledProduct: {\n label: 'Producto cancelado:',\n value: productDescription => (\n <>\n {productDescription}\n \n ),\n },\n canceledDate: {\n label: 'Fecha de cancelación:',\n value: date => (<>{date}),\n },\n canceledModality: {\n label: 'Modalidad:',\n value: modality => (<>{modality}),\n },\n refundValue: {\n label: 'Valor del reembolso:',\n value: value => (<>{value}),\n },\n modeAndTerm: {\n title: 'Modalidad del reembolso elegida y plazo:',\n refundMethods: {\n wholeCreditsLabel: 'Créditos HostGator - el valor se deducirá en una próxima factura.',\n wholeCreditCardLabel: 'Tarjeta de Crédito - el valor se devolverá dentro de 3 facturas (90 días) de acuerdo con su banco. Comuníquese con el emisor de su tarjeta para obtener más informaciones.',\n wholePaypalLabel: (\n <>\n PayPal - devolución según las\n {' '}\n \n propias reglas de PayPal\n \n .\n \n ),\n wholePixLabel: 'Cupón de pago - por el momento, la opción disponible para el reembolso es Créditos HostGator - Si desea la devolución del valor, comuníquese con soporte Financiero a través del chat.',\n partialCreditsLabel: 'Créditos HostGator - el valor se deducirá en una próxima factura.',\n partialCreditCardLabel: 'Tarjeta de Crédito - opción disponible dentro de los 90 días posteriores a la contratación y reembolso dentro de 3 facturas (90 días) de acuerdo con su banco. Comuníquese con el emisor de su tarjeta para obtener más informaciones.',\n partialPaypalLabel: (\n <>\n PayPal - devolución según las\n {' '}\n \n propias reglas de PayPal\n \n .\n \n ),\n partialPixLabel: 'Cupón de pago - por el momento, la opción disponible para el reembolso es Créditos HostGator - Si desea la devolución del valor, comuníquese con soporte Financiero a través del chat.',\n },\n },\n paymentMethods: {\n hgCredits: 'Créditos HostGator',\n creditCard: 'Tarjeta de Crédito',\n paypal: 'PayPal',\n },\n knowMoreLabel: (\n \n Obtenga más información sobre los plazos y valores de reembolso en nuestra Central de ayuda\n {' '}\n
haciendo clic aquí \n .\n
\n "\n {domain}\n "\n \n {' '}\n debe estar configurado para un Plan aquí en HostGator u otra plataforma.\n \n <>Faltan \n {daysToDue === 30 && (\n <> 30 \n )}\n {daysToDue < 30 && daysToDue > 10 && (\n <>menos de 30\n )}\n {daysToDue === 10 && (\n <>apenas 10\n )}\n {daysToDue < 10 && daysToDue > 5 && (\n <>menos de 10\n )}\n {daysToDue === 5 && (\n <>apenas 5\n )}\n {daysToDue < 5 && (\n <>menos de 5\n )}\n <> dias para que se cancele su suscripción\n \n <>\n {' '}\n <>Active la renovación y evite perder sus datos. \n \n <>En \n {dueDate}\n <> su suscripción será cancelada.\n \n {' '}\n \n {' '}\n {refundValue}\n {' '}\n \n a recibir en el modo\n \n {' '}\n {refundMethod}\n {' '}\n \n ya fue\n {' '}\n {refundMethod && refundMethod.includes('HostGator') ? 'acreditada' : 'reembolsado'}\n .\n {' '}\n generador de contraseñas. \n \n ),\n },\n tos: {\n [TOS_STATUS.DISK]: {\n title: 'Su espacio en disco está lleno.',\n description: ({ handleClick }) => (\n <>\n Ingrese al ticket para ser orientado por nuestros especialistas sobre cómo desbloquear.\n {' '}\n handleClick()} />\n \n ),\n },\n noBackup: {\n title: planInfo => `Tu ${planInfo} no tiene una copia de seguridad`,\n description: ({ handleClick }) => (\n <>\n Considera hacer una para no perder tus datos.\n handleClick()} />\n \n ),\n },\n oldBackup: {\n title: (planInfo, daysSinceLast) => `Tu última copia de seguridad del ${planInfo} fue hace más de ${daysSinceLast} días`,\n description: ({ handleClick }) => (\n <>\n Considera actualizar para no perder tus datos.\n handleClick()} />\n \n ),\n },\n },\n duplicateOrders: ({ handleClick }) => (\n <>\n {'Tiene uno o más pedidos iguales para el '}\n \n mismo producto y dominio.\n \n {' '}\n {domain} \n {' se ha activado con éxito!'}\n \n ),\n activation_failed: ({ domain }) => (\n <>\n {'El SSL no se pudo instalar en el dominio '}\n {`${domain}. `} \n \n Consulte cómo solucionarlo\n \n \n ),\n in_progress: ({ domain }) => (\n <>\n {'El SSL está en proceso de activación para '}\n \n {`${domain}. `}\n \n Estará activo dentro de las 24 horas posteriores a la propagación del dominio.\n \n ),\n },\n cloudflareFeature: ({ handleClick }) => (\n <>\n {'Administre la CDN de Cloudflare en su hosting y haga que su sitio web sea más rápido y seguro. Aproveche esta funcionalidad gratuita en '}\n {invoiceid} \n {' ¡Pero no te preocupes! El valor de $'}\n {creditAmount} \n {' será descontado automáticamente en tus próximas facturas.'}\n \n ),\n received: ({ invoiceid, creditAmount }) => (\n <>\n {'Recibimos un pago duplicado de la factura: '}\n {invoiceid} \n {' ¡Pero no te preocupes! El valor de $'}\n {creditAmount} \n {' ya fue descontado en tu última factura.'}\n \n ),\n },\n};\n","import esContent from './alerts.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './alerts.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './alerts.es';\n\nexport default {\n ...esContent,\n};\n","import alertsBR from './alerts.br';\nimport alertsMX from './alerts.mx';\nimport alertsCL from './alerts.cl';\nimport alertsCO from './alerts.co';\n\n\nconst alerts = {\n BR: alertsBR,\n MX: alertsMX,\n CL: alertsCL,\n CO: alertsCO,\n};\n\nexport default alerts;\n","import React from 'react';\n\nimport {\n ACCESS_CPANEL_ARTICLE, ADD_DOMAIN_TO_HOST_ARTICLE, CLIENT_AREA_FEATURES_ARTICLE, CONFIGURE_DOMAIN_DNS_ARTICLE, CREATE_WORDPRESS_SITE_ARTICLE,\n} from '@/config/urls/supportUrls';\n\nexport default {\n diagnostic: {\n helpLinks: [\n {\n title: 'Guia de início da sua hospedagem',\n link: CLIENT_AREA_FEATURES_ARTICLE,\n },\n {\n title: 'Como configurar o domínio (Alterar DNS)',\n link: CONFIGURE_DOMAIN_DNS_ARTICLE,\n },\n {\n title: 'Como adicionar um domínio na hospedagem',\n link: ADD_DOMAIN_TO_HOST_ARTICLE,\n },\n {\n title: 'Como criar um site em WordPress pelo Portal',\n link: CREATE_WORDPRESS_SITE_ARTICLE,\n },\n {\n title: 'Como acessar o cPanel',\n link: ACCESS_CPANEL_ARTICLE,\n },\n ],\n },\n zopimDepartments: {\n builder: 'hgbr_chat_construtor_de_sites',\n domain: 'hgbr_chat_dominios',\n financial: 'hgbr_chat_financeiro',\n mail: 'hgbr_chat_email',\n priority: 'priority',\n retention: 'hgbr_chat_retencao',\n shared: 'hgbr_chat_compartilhado',\n skilled: 'specialized',\n tos: 'hgbr_chat_abuse_tos',\n },\n resetMessages: ['Vou encerrar essa conversa por agora, mas a gente está sempre por aqui se precisar de mais alguma coisa. Em breve, você vai receber um e-mail com o histórico da nossa conversa'],\n chatFinished: 'Essa conversa foi finalizada. Se ainda precisar de ajuda, basta iniciar uma nova conversa.',\n startNewChat: 'Iniciar novo atendimento',\n chatbot: {\n title: (\n <>\n Olá, sou o Cortex, \n disponível 24h, \n {' '}\n e posso te ajudar com:\n \n ),\n cards: [\n {\n id: 1,\n cardText: (\n <>\n Dúvidas sobre assinaturas e\n Hola, soy Cortex, \n disponible 24h, \n {' '}\n y puedo ayudarte con:\n \n ),\n cards: [\n {\n id: 1,\n cardText: (\n <>\n Dudas sobre suscripciones y\n {`${open} chamado${open === 1 ? '' : 's'} em aberto.`} \n {' O prazo para a primeira resposta é de '}\n até 24h úteis. \n \n Você possui mais de um chamado urgente para resolver. Entre no chamado para ser orientado pelos nossos especialistas.\n
\n \n ),\n selectLabel: 'Chamados',\n selectPlaceholder: 'Selecione o chamado',\n ticketStatusLabel: status => ({\n [TOS_STATUS.DISK]: 'Alerta de espaço em disco',\n [TOS_STATUS.INODES]: 'Alerta de limite de arquivos',\n [TOS_STATUS.BACKUP]: 'Alerta de backup',\n [TOS_STATUS.MYSQL]: 'Alerta de uso de recursos do banco de dados',\n [TOS_STATUS.CPU]: 'Alerta de uso de recursos do processador',\n [TOS_STATUS.DMCA]: 'Alerta de direitos autorais',\n [TOS_STATUS.PISHING]: 'Alerta de arquivo infectado',\n })[status] || '',\n ticketWarningText: status => ({\n [TOS_STATUS.DISK]: (\n \n {'Alerta de espaço em disco: '} \n Seu espaço em disco está cheio! Entre no chamado para ser orientado pelos nossos especialistas sobre como desbloquear.\n
\n ),\n [TOS_STATUS.INODES]: (\n \n {'Alerta de limite de arquivos: '} \n A conta chegou ao limite de arquivos e diretórios! Entre no chamado para ser orientado pelos nossos especialistas sobre como desbloquear.\n
\n ),\n [TOS_STATUS.BACKUP]: (\n \n {'Alerta de backup: '} \n Você só pode armazenar um backup em sua conta! Entre no chamado para ser orientado pelos nossos especialistas sobre como desbloquear.\n
\n ),\n [TOS_STATUS.MYSQL]: (\n \n {'Alerta de uso de recursos do banco de dados: '} \n Seu banco de dados MySQL atingiu o limite de uso de recursos! Entre no chamado para ser orientado pelos nossos especialistas sobre como desbloquear.\n
\n ),\n [TOS_STATUS.CPU]: (\n \n {'Alerta de uso de recursos do processador: '} \n Seu uso de recursos do processador chegou ao limite! Entre no chamado para ser orientado pelos nossos especialistas sobre como desbloquear.\n
\n ),\n [TOS_STATUS.DMCA]: (\n \n {'Alerta de direitos autorais: '} \n Existe um problema relacionado a direitos autorais em seu site! Entre no chamado para ser orientado pelos nossos especialistas sobre como desbloquear.\n
\n ),\n [TOS_STATUS.PISHING]: (\n \n {'Alerta de arquivo infectado: '} \n Detectamos conteúdos potencialmente perigosos em seu plano de hospedagem! Entre no chamado para ser orientado pelos nossos especialistas sobre como desbloquear.\n
\n ),\n })[status] || '',\n goToTicketBtnText: 'Ir para o chamado',\n },\n ticketUpgradeVpsModal: {\n title: 'Upgrade de VPS',\n firstLabel: () => (\n \n Esse tipo de upgrade é somente realizado através de\n {' abertura de chamado '} \n com o atendimento de um especialista.\n
\n ),\n secondLabel: () => (\n \n Por isso,\n {' preencha as informações faltantes '} \n (IP do Servidor, Novo produto e Horário para execução) e envie o formulário de abertura de chamado. Assim que um especialista atender,\n {' a resposta será enviada por e-mail.'} \n
\n ),\n buttonLabel: 'Ok, entendi',\n },\n openNewTicketPage: {\n title: 'Preencha as informações abaixo para enviar o seu chamado',\n whichService: 'Para qual assunto ou serviço deseja suporte?',\n selecteProductOptionPlaceholder: 'Para qual produto/serviço deseja suporte? *',\n selecteSectorOptionPlaceholder: 'Qual o setor? *',\n sectorBilling: 'Financeiro',\n sectorTechnical: 'Técnico',\n selecteNeedOptionPlaceholder: 'Qual a sua necessidade? *',\n textManipulation: {\n startsWith: {\n billing: 'Suporte Financeiro',\n technical: 'Suporte Técnico',\n myAccount: 'Minha Conta',\n afiliated: 'Programa de Afiliados',\n nationalDomainTransfer: 'transferência de domínio nacional',\n nationalDomainRegisterTransfer: 'transferência de registro de domínio nacional',\n },\n },\n selectProductGroups: {\n myAccount: 'Minha Conta',\n activeProducts: 'Produtos/Serviços Ativos',\n suspendedProducts: 'Produtos/Serviços Suspensos',\n commonQuestions: 'Principais categorias',\n },\n },\n forms: {\n error: 'Não foi possível abrir o chamado no momento. Por favor, tente mais tarde :)',\n terms: (\n <>\n {'Leia com atenção os '}\n termos \n {' a seguir:'}\n \n ),\n submitLabel: 'Abrir chamado',\n internalMigration: {\n title: 'Preencha o formulário abaixo',\n originTitle: 'Dados da origem:',\n destinationTitle: 'Dados do destino:',\n links: {\n migration: () => (\n <>\n {'Leia os nossos '}\n NÃO CANCELE seu plano antigo até que os arquivos tenham sido migrados, testados e o DNS alterado corretamente. \n ),\n 1: () => (\n Lembre-se de aguardar o prazo de propagação, de até 24 horas. \n ),\n 2: () => (\n Não nos responsabilizamos pelo conteúdo migrado, pois não temos controle de versão. \n ),\n },\n },\n checkbox: {\n terms: () => (\n <>\n {'Confirmo que '}\n li e concordo \n {' com os '}\n concordo \n {' com eventual cobrança se não me adequar aos limites de migração descritos no termo.'}\n \n ),\n },\n migrationTypeText: 'Tipo de migração',\n partialMigration: 'Migração Parcial',\n fullMigration: 'Migração completa',\n whatToBeMigrated: 'O que deve ser migrado?',\n name: 'Migração Interna',\n alert: 'Este formulário é para migração de toda a conta. Ao solicitar a migração, todo o conteúdo do site e/ou, banco de dados serão substituídos pelo conteúdo migrado, não podendo voltar ao conteúdo anterior, se você possui mais de um plano de hospedagem certifique-se que está solicitando para o produto correto.',\n originDomainPlaceholder: 'Selecione entre os seus planos ativos',\n originDomainLabel: 'Domínio principal *',\n originServerPlaceholder: 'Digite o servidor aqui',\n originServerLabel: 'Servidor',\n originUserPlaceholder: 'Digite o usuário aqui',\n originUserLabel: 'Usuário',\n myServerLabelRadio: 'Para o meu painel HostGator',\n otherServerLabelRadio: 'Para o outro painel HostGator',\n myDomainPlaceholder: 'Selecione o domínio principal aqui',\n myDomainLabel: 'Domínio principal*',\n myServerPlaceholder: 'Digite o servidor aqui',\n myServerLabel: 'Servidor',\n myUserPlaceholder: 'Digite o usuário aqui',\n myUserLabel: 'Usuário',\n otherDomainPlaceholder: 'Digite o domínio principal',\n otherDomainLabel: 'Domínio principal*',\n otherServerPlaceholder: 'Digite o servidor aqui',\n otherServerLabel: 'Servidor',\n otherUserPlaceholder: 'Digite o usuário aqui',\n otherUserLabel: 'Usuário',\n body: {\n originServer: 'Servidor de origem',\n originUser: 'Usuário de origem',\n destinyServer: 'Servidor de destino',\n destinyUser: 'Usuário de destino',\n agree: 'Concordo com os termos',\n agreePayment: 'Concordo com uma eventual cobrança',\n yes: 'Sim',\n no: 'Não',\n },\n },\n restorateBackupHgRoutine: {\n terms: (\n <>\n {'Leia com atenção os '}\n termos \n {' a seguir:'}\n \n ),\n termsItems: (\n <>\n \n \n {'Há uma '}\n cobrança no valor de R$100,00 \n {' para este procedimento. '}\n Ao término da restauração será gerada a cobrança na sua conta. \n \n Não temos controle de versão, portanto, não nos responsabilizamos pelo conteúdo restaurado. \n \n {'Caso seus e-mails sejam Titan, não fazemos restauração de backup. Você é o responsável por '}\n \n Caso o seu site tenha sido desenvolvido com o Criador de Sites da HostGator, depois você deverá solicitar a restauração do editor através do formulário “Restauração de acesso ao editor criador de sites”. \n \n \n ),\n alert: {\n title: 'ATENÇÃO!',\n description: (\n <>\n {'Este formulário é para restauração de toda a conta. Ao solicitar a restauração, todo o conteúdo do site e/ou banco de dados serão substituídos pelo conteúdo restaurado, '}\n não podendo voltar ao conteúdo anterior. \n \n ),\n },\n title: 'Preencha os dados abaixo',\n selectRestorationType: {\n full: 'Completa',\n database: 'Banco de dados',\n file: 'Arquivos',\n domain: 'Domínio',\n },\n fields: {\n restorationType: 'Tipo da Restauração',\n user: 'Digite o usuário aqui',\n userLabel: 'Usuário',\n server: 'Digite o servidor aqui',\n serverLabel: 'Servidor',\n domain: 'Digite o domínio aqui',\n domainLabel: 'Domínio',\n backup: 'Escolha uma das datas para restaurar',\n specificDomains: 'Informe abaixo os domínios que deseja restaurar separados por vírgula',\n specificDatabase: 'Informe abaixo os Bancos que deseja restaurar separados por vírgula',\n specificFiles: 'Informe abaixo os nomes dos arquivos deseja restaurar separados por vírgula',\n },\n options: {\n daily: 'Diário',\n monthly: 'Mensal',\n weekly: 'Semanal',\n },\n selectBackupTitle: 'Backups disponíveis para serem restaurados:',\n months: {\n 0: 'Janeiro',\n 1: 'Fevereiro',\n 2: 'Março',\n 3: 'Abril',\n 4: 'Maio',\n 5: 'Junho',\n 6: 'Julho',\n 7: 'Agosto',\n 8: 'Setembro',\n 9: 'Outubro',\n 10: 'Novembro',\n 11: 'Dezembro',\n },\n agreed: (\n <>\n {'Confirmo que '}\n li e concordo \n {' com os termos acima e com a cobrança na minha conta do valor de R$100,00.'}\n \n ),\n open: 'Abrir chamado',\n body: {\n productId: 'ID do produto',\n server: 'Servidor',\n user: 'Usuário',\n domain: 'Domínio',\n backupName: 'Nome do backup utilizado para restauração',\n uninformed: 'não informado',\n agree: 'Concordo com os termos',\n yes: 'Sim',\n no: 'Não',\n },\n },\n generateBackup: {\n terms: (\n <>\n {'Leia com atenção os '}\n termos \n {' a seguir:'}\n \n ),\n termsItems: (\n <>\n \n \n O arquivo de backup será enviado por e-mail, e você poderá acompanhar o andamento na tela de Suporte, na área de Chamados.\n \n \n \n ),\n title: 'Preencha os dados abaixo',\n fields: {\n user: 'Digite o usuário aqui',\n userLabel: 'Usuário',\n server: 'Digite o servidor aqui',\n serverLabel: 'Servidor',\n domain: 'Digite o domínio aqui',\n domainLabel: 'Domínio',\n },\n agreed: (\n <>\n {'Confirmo que '}\n li e concordo \n {' com os termos de geração de backup acima.'}\n \n ),\n open: 'Abrir chamado',\n body: {\n productId: 'ID do produto',\n server: 'Servidor',\n user: 'Usuário',\n agree: 'Concordo com os termos',\n yes: 'Sim',\n no: 'Não',\n },\n },\n userBackupRestore: {\n name: 'Restaurar backup - Cópia do cliente',\n title: 'Preencha os dados abaixo',\n restorationType: 'Tipo da Restauração',\n completeRestoration: 'Completa',\n databaseRestoration: 'Banco de dados',\n filesRestoration: 'Arquivos',\n domainRestorarion: 'Domínio',\n alert: 'Este formulário é para solicitar a restauração de toda a conta. Todo o conteúdo do site e/ou banco de dados serão substituídos pelo conteúdo restaurado, não podendo voltar ao conteúdo anterior. Se você possui mais de um plano de hospedagem, certifique-se que está solicitando para o produto correto.',\n fileNameInputLabel: 'Informe o nome do arquivo de backup a ser restaurado',\n fileNameInputPlaceholder: 'Digite o nome do arquivo de backup',\n databaseNameInputLabel: 'Nome do Banco de dados',\n databaseNameInputPlaceholder: 'Digite o nome do banco de dados',\n checkboxAgreed: (\n <>\n Confirmo que\n {' li e concordo '} \n com os termos de restauração de backup acima.\n \n ),\n warning: {\n title: (\n ATENÇÃO! \n ),\n item: {\n 0: (\n \n {'Certifique-se de realizar o Upload do arquivo de backup para o cPanel antes de solicitar a restauração. '}\n \n ),\n 1: (\n Não temos controle de versão, portanto, não nos responsabilizamos pelo conteúdo restaurado. \n ),\n 2: (\n \n {'Caso seus emails sejam Titan, não fazemos restauração de backup. Você é o responsável por '}\n \n ),\n 3: (\n Caso o seu site tenha sido desenvolvido com o Criador de Sites da HostGator, depois você deverá solicitar a restauração do editor através do formulário “Restauração de acesso ao editor criador de sites”. \n ),\n },\n },\n selectedProduct: 'Produto selecionado',\n backupFileName: 'Arquivo de backup',\n databaseFileName: 'Banco de dados',\n domain: 'Digite o domínio aqui',\n domainLabel: 'Domínio',\n server: 'Digite o servidor aqui',\n serverLabel: 'Servidor',\n user: 'Digite o usuário aqui',\n userLabel: 'Usuário',\n agree: 'Concordo com os termos',\n yes: 'Sim',\n no: 'Não',\n },\n withoutEmailAccess: {\n name: 'Não tenho acesso ao e-mail cadastrado',\n title: 'Preencha os dados abaixo',\n info: 'Para garantir a segurança da sua conta e prosseguir com a alteração do seu e-mail cadastrado, solicitamos que preencha as informações abaixo. Após o envio, nossa equipe de suporte entrará em contato em até 48 horas.',\n emailLabel: 'E-mail de cadastro',\n documentLabel: 'CPF/CNPJ do titular da conta',\n contactEmailPlaceholder: 'Digite aqui um e-mail válido para que possamos entrar em contato com você.',\n contactEmailLabel: 'E-mail para contato',\n addDocumentLabel: 'Para concluir o processo de verificação, solicitamos que você envie uma foto segurando o documento de identificação (RG ou CNPJ/contrato social) utilizado no cadastro da conta. Por favor, clique no botão \"Anexar documento\" abaixo para fazer o upload do arquivo. Aceitamos os formatos JPEG, PNG e PDF.',\n addDocumentButton: 'Anexar documento',\n descriptionLabel: 'Por favor, descreva sua solicitação em detalhes no campo abaixo',\n emailError: 'Digite um email válido',\n body: {\n registeredEmail: 'E-mail cadastrado',\n document: 'Documento',\n contactEmail: 'E-mail de contato',\n description: 'Descrição do problema',\n },\n },\n changePrimaryDomain: {\n title: 'Preencha os dados abaixo',\n info: isHosting => (\n <>\n Para a alteração de domínio principal, verifique os 2 passos a seguir: \n \n \n {'O novo domínio precisa estar registrado. Se necessário, '}\n \n \n {isHosting ? (\n <>\n {'O domínio não deve estar adicionado no cPanel. Se o domínio já estiver adicionado e contiver conteúdo (arquivos do site e e-mails), '}\n \n \n Leia com atenção os termos a seguir: \n \n \n Caso o site tenha sido desenvolvido com o Criador de Sites da HostGator, ao alterar o domínio principal, você perderá acesso à ferramenta de edição. Para recuperar o acesso será necessário criar um novo site.\n \n \n \n ),\n newDomainLabel: 'Qual o nome do novo domínio registrado que será usado como principal da hospedagem?',\n whyLabel: 'Motivo da mudança',\n agreedLabel: 'Confirmo que li e concordo com os termos acima e autorizo a alteração de domínio principal.',\n productId: 'ID do produto',\n solicitation: 'Solicitação',\n product: 'Produto',\n yes: 'Sim',\n no: 'Não',\n userLabel: 'Usuário',\n subject: 'Suporte Técnico - Alteração de domínio primário',\n },\n installExternalSsl: {\n info: (\n <>\n Leia com atenção os termos a seguir: \n \n \n {'No campo abaixo, para preenchimento da URL, cuide para informar o endereço correto, '} \n pois o certificado não pode ser instalado para um domínio diferente do emitido;\n \n \n {'Caso possua um Servidor Dedicado Windows anterior a 2012, '} \n a instalação deste SSL exigirá um IP Dedicado disponível. Como o IP será alterado,\n {' é possível que tenha instabilidades no acesso por até 4h após a instalação'} \n ;\n \n \n A instalação deste 'SSL de outra empresa' tem uma taxa de instalação de R$60,00 \n ;\n \n \n \n ),\n urlInputPlaceholder: 'Endereço (URL) onde o SSL irá funcionar *',\n urlInputLabel: 'O SSL funcionará apenas na URL informada, que pode ser um domínio ou subdomínio. Por exemplo, use nomedodominio.com.br ou loja.nomedodominio.com.br',\n sslCertificate: 'Certificado SSL *',\n addDocumentButton: 'Anexar arquivo',\n sslCertififateFileType: 'Arquivo com extensão .crt',\n sslCertificateCA: 'Insira o conteúdo do arquivo do Certificado SSL CA (Trusted Authority) no campo abaixo',\n privateKey: 'Insira o conteúdo do arquivo da Private Key no campo abaixo *',\n orPasteContentPlaceholder: 'Se preciso, abra o arquivo em um bloco de notas, copie o conteúdo e cole aqui',\n checkboxLabel: 'Confirmo que li e concordo com os termos acima e com a cobrança de R$60,00.',\n send: 'Enviar',\n\n bodyFields: {\n tag: 'whmcs_form_tecnico_ssl_outra_empresa',\n\n product: 'Produto',\n user: 'Usuário',\n server: 'Servidor',\n solicitation: 'Solicitação',\n sslUrl: 'Endereço (URL) onde o SSL irá funcionar',\n sslCa: 'Conteúdo do arquivo do Certificado SSL CA (Trusted Authority)',\n privateKey: 'Conteúdo do arquivo da Private Key',\n agree: 'Confirmo que li e concordo com os termos acima e com a cobrança de R$60,00.',\n yes: 'Sim',\n no: 'Não',\n productId: 'ID do produto',\n },\n },\n changeDueDate: {\n info: () => (\n <>\n Leia com atenção os termos a seguir:
\n \n \n A nova data precisa ser\n {' '}\n de até 30 dias a partir da data de vencimento atual \n {' '}\n do serviço;\n \n \n Alterar a data de vencimento\n {' '}\n poderá gerar um acréscimo de valor na sua próxima fatura \n {' '}\n por conta da readequação da data.\n\n \n \n \n ),\n desiredDueDate: 'Qual a data de vencimento desejada?',\n desiredDueDatePlaceHolder: 'mm/dd/yyyy',\n agreement: 'Confirmo que li e concordo com os termos acima.',\n send: 'Enviar',\n },\n financialDoubts: {\n title: 'Preencha os dados abaixo',\n info: (\n <>\n Caso não encontre a opção desejada na lista abaixo, inicie um\n {' '}\n atendimento por chat \n .\n \n ),\n descriptionLabel: 'Qual sua dúvida financeira?',\n addDocumentLabel: 'Possui Anexo? Nos Envie!',\n addDocumentButton: 'Anexar documento',\n solicitation: 'Solicitação',\n product: 'Produto',\n productId: 'ID do produto',\n user: 'Usuário',\n subject: 'Suporte Financeiro - Dúvidas Gerais',\n tag: 'whmcs_form_financeiro_duvidas_financeiras',\n },\n googleAdwordsCoupon: {\n info: (\n <>\n Leia com atenção os termos a seguir: \n \n Como cliente da HostGator você tem direito a 1 cupom por cada plano de hospedagem contratado; \n \n Como cliente da HostGator\n {' você tem direito a um cupom por plano de hospedagem '} \n contratado;\n \n \n Apenas\n {' 1 crédito promocional '} \n pode ser obtido\n {' por cliente'} \n ;\n \n \n Você tem direito ao cupom se for novo no Google AdWords e tiver uma conta com pelo menos 14 dias de existência, ou se já for um cliente do Google AdWords e ativar um novo recurso ou produto ou ainda reativar uma conta inativa;\n \n \n {'Nós vamos te enviar um código promocional que deverá ser inserido em sua conta do Google Adwords '} \n - esse código não têm valor imediato, ele irá servir apenas para iniciar o processo de qualificação para o crédito promocional a ele associado;\n \n \n Para obter o crédito \n , após inserir o código em sua conta do Google Ads,\n {' você deverá investir até R$ 1200,00 '} \n (excluindo qualquer imposto)\n {' em suas campanhas publicitárias durante um período de 60 dias'} \n . Você receberá um cupom de um valor igual ao gasto total durante este período, com um limite máximo de R$ 1200,00.\n \n \n O crédito não se aplica aos custos acumulados antes da introdução do código promocional \n . Ou seja, o crédito poderá ser usado unicamente para os gastos de publicidade futuros.\n Para informações detalhadas, confira os\n \n \n\n \n ),\n checkbox: 'Confirmo que li e concordo com os termos acima.',\n sendButtonLabel: 'Enviar',\n bodyFields: {\n product: 'Produto',\n user: 'Usuário',\n server: 'Servidor',\n solicitation: 'Solicitação',\n agree: 'Li e concordo com os termos do Google AdWords',\n productId: 'ID do produto',\n },\n },\n externalMigration: {\n title: 'Preencha os dados abaixo',\n info: (\n <>\n {'Leia com atenção os itens a seguir: '}\n \n \n Leia os nossos\n \n \n {'Veja também '}\n \n \n IMPORTANTE: \n \n \n NÃO CANCELE \n {' seu plano antigo até que os arquivos tenham sido migrados, testados e o DNS alterado corretamente.'}\n \n \n Lembre-se de aguardar o prazo de propagação, de até 24 horas.\n \n \n Não nos responsabilizamos pelo conteúdo migrado, pois não temos controle de versão.\n \n \n ATENÇÃO \n \n \n Este formulário é para migração de toda a conta. Ao solicitar a migração, todo o conteúdo do site e/ou, banco de dados\n \n \n termos \n {' a seguir:'}\n \n ),\n termsItems: (\n <>\n \n É OBRIGATÓRIO que já tenha contratado novamente o mesmo plano com o mesmo domínio para que a restauração seja realizada. \n {'Há uma cobrança no valor de R$100,00 '} \n para este procedimento. Ao término da restauração será gerado a cobrança na sua conta.\n \n Não nos responsabilizamos pelo conteúdo restaurado, pois não temos controle de versão. \n Nossa rotina de backups é semanal e inclui contas de até 20 GB de dados, que possuem até 100 mil nós (arquivos, pastas, e-mails etc.). Pode ocorrer de não termos como restaurar sua conta, por ela estar fora da rotina de backup antes do cancelamento; \n Todos os domínios abaixo de seu usuário que tivermos backups serão restaurando independentemente se eles foram removidos previamente. \n \n {'Caso seus emails sejam Titan, não fazemos restauração de backup. Você é o responsável por '}\n \n Caso o seu site tenha sido desenvolvido com o Criador de Sites da HostGator, você deverá solicitar também a restauração o editor através do formulário Restauração de acesso ao editor criador de sites \n \n IMPORTANTE: \n \n Este formulário é para restauração de conta cancelada. \n Ao solicitar a restauração recuperaremos todo o conteúdo do site, banco de dados e emails do último estado da sua conta antes do cancelamento, não sendo possível restaurar somente o domínio principal ou somente domínios adicionais. \n \n \n ),\n mainDomainPlaceholder: 'Informe o domínio principal do plano cancelado que deseja restaurar',\n chargeAgreed: 'Confirmo que li e concordo com os termos acima e com a cobrança do valor de R$100,00',\n termsAgreed: 'Confirmo que li e concordo com os termos de restauração de backup',\n bodyProduct: selectedProduct => `Produto: ${selectedProduct.name} - Usuário: ${selectedProduct.username}`,\n bodyServer: selectedProduct => `Servidor: ${selectedProduct.serverhostname || selectedProduct.dedicatedip}`,\n bodyRequest: subject => `Assunto: ${subject}`,\n bodyProductId: selectedProduct => `ID do produto: ${selectedProduct.id}`,\n bodyMainDomain: domain => `Informe abaixo o domínio principal do plano cancelado que deseja restaurar: ${domain}`,\n },\n generateCSR: {\n title: 'Preencha o formulário abaixo',\n info: (\n <>\n Leia com atenção os termos a seguir: \n \n CSR é uma solicitação de uma emissão do certificado de uma empresa terceira; \n \n {'Somente faça esta solicitação caso vá comprar um Certificado SSL em outra empresa '} \n {' - caso queira adquirir um Certificado com a gente, '}\n \n \n {\"Este formulário de 'Gerar CSR' serve principalmente para clientes de planos Plano P, M, Business, Plus ou Turbo. \"} \n {'Para clientes de Revenda e Servidores VPS e Dedicado, veja o material de '}\n \n \n \n ),\n\n isWildCard: 'O Certificado SSL que irá contratar em outra empresa será \"SSL Wildcard\"?',\n checkbox: 'Confirmo que li e concordo com os termos acima',\n sendButtonLabel: 'Enviar',\n placeholders: {\n email: 'Digite seu e-mail',\n name: 'Digite seu nome completo',\n city: 'Digite sua cidade',\n state: 'Digite seu estado',\n country: 'Digite seu país',\n company: 'Digite o nome da empresa',\n sslUrl: 'Digite o domínio (URL)',\n },\n bodyFields: {\n email: 'E-mail',\n name: 'Nome Completo',\n city: 'Cidade',\n state: 'Estado',\n country: 'País',\n company: 'Empresa',\n sslUrl: 'Em qual site (URL) onde o SSL irá funcionar?',\n isWildcard: 'SSL Wildcard',\n agree: 'Concordo com os termos',\n\n yes: 'Sim',\n no: 'Não',\n\n user: 'Usuário',\n server: 'Servidor',\n product: 'Produto',\n },\n errors: {\n invalidEmail: 'Digite um email válido',\n emptyField: 'Preencha este campo',\n },\n },\n restorateSiteBuilderAccess: {\n title: 'Preencha os dados abaixo!',\n subject: 'Suporte Técnico - Restauração de acesso ao editor do Criador de Sites',\n terms: (\n <>\n {'Leia com atenção os '}\n termos \n {' a seguir:'}\n \n ),\n termsItems: (\n <>\n \n \n {'Só é possível recuperar a edição do criador de Sites Rápido. Se usava o editor avançado, terá que '}\n \n \n {'Há uma cobrança no valor de R$100,00 '} \n para este procedimento. Ao término da restauração será gerado a cobrança na sua conta.\n \n Não nos responsabilizamos pelo conteúdo restaurado, pois não temos controle de versão. \n \n {'Caso seus emails sejam Titan, não fazemos restauração de backup. Você é o responsável por '}\n \n \n IMPORTANTE: \n \n Este formulário é para restauração de acesso ao PAINEL de edição do criador de sites. Ao solicitar essa restauração, nenhum Wordpress, banco de dados ou email será restaurado. \n A restauração de acesso ao editor somente é realizada para o mesmo tipo de plano ao qual foi ativado. \n \n \n ),\n chargeAgreed: 'Confirmo que li e concordo com os termos acima e com a cobrança do valor de R$100,00',\n termsAgreed: 'Confirmo que li e concordo com os termos de restauração de backup',\n bodyProduct: selectedProduct => `Produto: ${selectedProduct.name} - Usuário: ${selectedProduct.username}`,\n bodyRequest: subject => `Assunto: ${subject}`,\n bodyProductId: selectedProduct => `ID do produto: ${selectedProduct.id}`,\n bodyAgreedCharge: bool => `Confirmo que li e concordo com os termos acima e com a cobrança do valor de R$100,00: ${bool ? 'Sim' : 'Não'}`,\n bodyAgreedTerms: bool => `Confirmo que li e concordo com os termos de restauração de backup: ${bool ? 'Sim' : 'Não'}`,\n },\n affiliateProgram: {\n title: 'Preencha os dados abaixo!',\n subject: 'Minha Conta - Dúvidas exclusivamente sobre o Programa de Afiliados',\n info: (\n <>\n \n {'Leia com atenção os '}\n termos \n {' a seguir:'}\n \n \n \n {'Este formulário é de uso '}\n exclusivo \n {' sobre nosso Programa de Afiliados. Atendimento de segunda a sexta em horário comercial (exceto feriados) com tempo de resposta de até 72 horas.'}\n \n \n Caso queira suporte técnico ou financeiro, use o formulário apropriado. \n \n \n \n ),\n labelAffiliate: 'Você faz parte do Programa de Afiliados?',\n affiliateOptions: {\n yes: 'Sim',\n no: 'Não, mas tenho dúvidas sobre o Programa',\n },\n labelDoubts: 'Informe suas dúvidas sobre o nosso Programa de Afiliados',\n bodyProduct: 'Produto: Dúvidas exclusivamente sobre o Programa de Afiliados',\n bodyRequest: 'Solicitação: Dúvidas exclusivamente sobre o Programa de Afiliados',\n bodyIsAffiliate: answer => `Você faz parte do programa de afiliados?: ${answer}`,\n bodyDoubts: content => `Informe sua dúvida sobre o nosso Programa de Afiliados: ${content}`,\n sendButtonLabel: 'Enviar',\n },\n nationalDomainTransfer: {\n subject: (\n <>\n Para transferir a administração do seu domínio nacional para a HostGator você deve fazer a alteração do seu Provedor de Serviços da Entidade no site da\n {' '}\n \n {'Leia com atenção os '}\n termos \n {' a seguir:'}\n \n \n \n \n \n O IP informado de sua responsabilidade\n \n \n IMPORTANTE: Este formulário é para solicitação de Upgrade de plano VPS. Ao solicitar o procedimento não tem possibilidade de downgrade. \n \n \n \n ),\n fields: {\n ipLabel: 'Qual o IP do servidor?',\n ipInfo: 'ATENÇÃO: O procedimento será realizado no servidor deste IP. Não haverá dupla confirmação',\n productLabel: 'Novo Produto',\n executionLabel: 'Podemos executar em horário comercial',\n executionInfo: '08:00 as 18:00 *Conforme horário de Brasília',\n agreedTermsLabel: 'Confirmo que li e concordo com os termos acima e com a diferença do valor entre os produtos',\n agreedResponsabilityLabel: 'Confirmo que li e estou ciente que é minha responsabilidade fazer backups do servidor antes do procedimento',\n },\n body: {\n product: selectedProduct => `Produto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username} - IP: ${selectedProduct.dedicatedip}`,\n request: 'Solicitação: Upgrade de Plano',\n serverIp: serverIp => `Qual o IP do Servidor?: ${serverIp}`,\n newProduct: newProduct => `Novo Produto: ${newProduct}`,\n execution: execution => `Podemos executar em horário comercial: ${execution}`,\n agreedTerms: agreedTerms => `Confirmo que li e concordo com os termos acima e com a diferença do valor entre os produtos: ${agreedTerms ? 'Sim' : 'Não'}`,\n agreedResponsability: agreedResponsability => `Confirmo que li e estou ciente que é minha responsabilidade fazer backups do servidor antes do procedimento: ${agreedResponsability ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do produto: ${selectedProduct.id}`,\n },\n sendButtonLabel: 'Enviar',\n },\n upgradeSiteLock: {\n info: (\n <>\n {'Caso não encontre a opção desejada na lista abaixo, inicie um '}\n atendimento por chat. \n \n ),\n placeholders: {\n domain: 'Domínio vinculado ao Sitelock?',\n newSitelock: 'Novo Produto',\n agreed: 'Confirmo que li e concordo com a diferença do valor entre os produtos',\n },\n body: {\n product: selectedProduct => `Produto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username}`,\n request: 'Solicitação: Upgrade de Plano',\n domain: domain => `Dominio vinculado ao Sitelock?: ${domain}`,\n newSitelock: newSitelock => `Novo Produto: ${newSitelock}`,\n agreed: agreed => `Confirmo que li e concordo com a diferença do valor entre os produtos: ${agreed ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do produto: ${selectedProduct.id}`,\n },\n title: 'Preencha os dados abaixo!',\n send: 'Enviar',\n },\n upgradeCodeGuard: {\n info: (\n <>\n {'Caso não encontre a opção desejada na lista abaixo, inicie um '}\n atendimento por chat. \n \n ),\n placeholders: {\n newProduct: 'Novo Produto',\n agreed: 'Confirmo que li e concordo com a diferença do valor entre os produtos',\n agreedSelectedPlan: 'Confirmo que selecionei o plano correto e estou ciente que não haverá dupla confirmação para realização do upgrade.',\n },\n body: {\n product: selectedProduct => `Produto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username}`,\n request: 'Solicitação: Upgrade de Plano',\n newProduct: newProduct => `Novo Produto: ${newProduct}`,\n agreed: agreed => `Confirmo que li e concordo com a diferença do valor entre os produtos: ${agreed ? 'Sim' : 'Não'}`,\n agreedSelectedPlan: agreedSelectedPlan => `Confirmo que selecionei o plano correto e estou ciente que não haverá dupla confirmaçãop para realização do upgrade: ${agreedSelectedPlan ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do produto: ${selectedProduct.id}`,\n },\n title: 'Preencha os dados abaixo!',\n send: 'Enviar',\n },\n upgradeSiteBuilder: {\n info: (\n <>\n {'Si no encuentra la opción deseada en la lista de abajo, inicie un '}\n atendimiento por chat. \n \n ),\n subject: 'Upgrade de un Plan - Creador de Sitios',\n placeholders: {\n professional: 'Creador de Sitios Profesional',\n tienda: 'Creador de Sitios Tienda en Línea',\n newPlan: 'Nuevo plan',\n agreed: 'Permitir el upgrade del plan seleccionado',\n },\n body: {\n product: selectedProduct => `Producto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuario: ${selectedProduct.username}`,\n request: 'Solicitación: Upgrade de un plan - Creador de Sitios',\n newProduct: newProduct => `Nuevo plan: ${newProduct}`,\n agreed: agreed => ` Permitir el upgrade del plan seleccionado: ${agreed ? 'Si' : 'No'}`,\n productId: selectedProduct => `ID del producto: ${selectedProduct.id}`,\n },\n title: '¡Complete los datos de abajo!',\n send: 'Enviar',\n },\n sslEV: {\n info: (\n <>\n {'Por favor, lea atentamente los siguientes términos '}\n \n La instalación del certificado solo se realiza para Personas Jurídicas (empresas registradas) y todos los datos aquí en HostGator deben corresponder a los de la empresa con el registro de su ciudad; \n La validación de datos es realizada por una empresa ajena a Hostgator que puede solicitar documentos y realizará llamadas telefónicas exclusivamente al número registrado en el cadastro de su empresa, con el fin de validar la existencia de la misma; \n Si desea utilizar un número de teléfono diferente al del registro de la empresa, debe registrarse en https://www.cialdnb.com/es/numero-d-u-n-s/ con el número de teléfono deseado (el registro gratuito tarda hasta 30 días para ser efectivado); \n En el campo a continuación, para completar la URL, asegúrese de informar la dirección correcta. No se puede volver a emitir el certificado para otro dominio; \n Este Certificado SSL EV tiene un costo por año; \n Las facturas de renovación se generarán automáticamente al final del ciclo, pero con cada pago deberá crear un ticket para volver a emitir el certificado SSL renovado; \n La instalación de este certificado solo es válida para los servidores de HostGator. \n \n atendimiento por chat. \n \n ),\n subject: 'Soporte Técnico - Certificado SSL EV',\n placeholders: {\n installUrl: 'URL para la instalación del SSL',\n installUrlInfo: 'SSL solo funcionará en la URL dada, que puede ser un dominio o subdominio. Por ejemplo, nombrededominio.com.br o loja.nombrededominio.com.br.',\n enterprisedocument: 'Documento de registro de la empresa',\n enterprisePhone: 'Número de teléfono del documento de la empresa',\n enterprisePhoneInfo: 'Es obligatorio que el número de teléfono informado se registre en el documento.',\n email: 'Cuenta de correo de dominio',\n emailInfo: 'Es obligatorio que la cuenta de correo electrónico informada sea del propio dominio.',\n agreed: `Confirmo que he leído y estoy de acuerdo con los términos anteriores y el cobro del Certificado SSL por ${formatCurrency(sslEvPricePerBrand[COUNTRY.toLowerCase()])}/año`,\n },\n body: {\n product: selectedProduct => `Producto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuario: ${selectedProduct.username}`,\n request: 'Solicitación: Certificado SSL EV',\n newProduct: newProduct => `Nuevo plan: ${newProduct}`,\n agreed: agreed => ` Confirmo que he leído y estoy de acuerdo con los términos anteriores y el cobro del Certificado SSL por ${formatCurrency(sslEvPricePerBrand[COUNTRY.toLowerCase()])} ${coinPerBrand[COUNTRY.toLowerCase()]}/año: ${agreed ? 'Si' : 'No'}`,\n productId: selectedProduct => `ID del producto: ${selectedProduct.id}`,\n },\n title: '¡Complete los datos de abajo!',\n send: 'Enviar',\n },\n changePaymentCycle: {\n info: (\n <>\n {'Caso não encontre a opção desejada na lista abaixo, inicie um '}\n atendimento por chat. \n \n ),\n placeholders: {\n newCycle: 'Selecione o novo ciclo desejado',\n agreed: 'Confirmo a alteração de ciclo de pagamento do serviço selecionado',\n generalComment: 'Comentário adicional',\n },\n body: {\n product: selectedProduct => `Produto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username}`,\n request: 'Alterar Ciclo de Pagamento',\n newCycle: newCycle => `Selecione o novo ciclo desejado: ${newCycle}`,\n agreed: agreed => `Confirmo a alteração de ciclo de pagamento do serviço selecionado: ${agreed ? 'Sim' : 'Não'}`,\n generalComment: comment => `Comentário Geral: ${comment}`,\n productId: selectedProduct => `ID do produto: ${selectedProduct.id}`,\n },\n title: 'Preencha os dados abaixo!',\n send: 'Enviar',\n subject: 'Suporte Financeiro - Alterar Ciclo de Pagamento',\n },\n privateSslCertificate: {\n title: 'Preencha os dados abaixo!',\n info: (\n <>\n Leia com atenção os termos a seguir: \n \n \n No campo abaixo, para preenchimento da URL, cuide para informar o endereço correto. \n {' Não é possível reemitir o certificado para outro domínio;'}\n \n \n {'Este '}\n \n {'certificado SSL Privado tem um custo de '}\n {formatCurrency(119.88)}\n {' ao ano;'}\n \n \n \n As faturas de renovação serão geradas automaticamente ao fim do ciclo, mas a cada pagamento deve criar um chamado para reemitir o certificado SSL renovado;\n \n \n A instalação deste certificado é válida apenas para servidores da HostGator.\n \n \n\n \n ),\n placeholders: {\n domain: 'Endereço (URL) onde o SSL irá funcionar',\n domainInfo: 'O SSL funcionará apenas na URL informada, que pode ser um domínio ou subdomínio. Ex. nomedodominio.com.br ou loja.nomedodominio.com.br',\n agreed: 'Confirmo que li e concordo com os termos acima e com a cobrança de R$119.88 ao ano.',\n },\n subject: 'Suporte Técnico - Certificado SSL Privado',\n body: {\n product: selectedProduct => `Produto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username}`,\n request: 'Solicitação: Certificado SSL Privado',\n domain: domain => `Endereço (URL) onde o SSL irá funcionar: ${domain}`,\n agreed: agreed => `Confirmo a alteração de ciclo de pagamento do serviço selecionado: ${agreed ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do produto: ${selectedProduct.id}`,\n },\n send: 'Enviar',\n },\n widlcardSslCertificate: {\n title: 'Preencha os dados abaixo!',\n info: (\n <>\n Leia com atenção os termos a seguir: \n \n \n No campo abaixo, para preenchimento da URL, cuide para informar o endereço correto. \n {' Não é possível reemitir o certificado para outro domínio;'}\n \n \n {'Este '}\n \n {'Certificado SSL Wildcard tem um custo de '}\n {formatCurrency(443.88)}\n {' ao ano;'}\n \n \n \n As faturas de renovação serão geradas automaticamente ao fim do ciclo, mas a cada pagamento deve criar um chamado para reemitir o certificado SSL renovado;\n \n \n A instalação deste certificado é válida apenas para servidores da HostGator.\n \n \n\n \n ),\n placeholders: {\n domain: 'Endereço (URL) onde o SSL irá funcionar',\n domainInfo: 'O SSL funcionará apenas na URL informada, que pode ser um domínio ou subdomínio. Ex. nomedodominio.com.br ou loja.nomedodominio.com.br',\n agreed: `Confirmo que li e concordo com os termos acima e com a cobrança de ${formatCurrency(443.88)} ao ano.`,\n },\n subject: 'Suporte Técnico - Certificado SSL Wildcard',\n body: {\n product: selectedProduct => `Produto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username}`,\n request: 'Solicitação: Certificado SSL Wildcard',\n domain: domain => `Endereço (URL) onde o SSL irá funcionar: ${domain}`,\n agreed: agreed => `Confirmo a alteração de ciclo de pagamento do serviço selecionado: ${agreed ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do produto: ${selectedProduct.id}`,\n },\n send: 'Enviar',\n },\n enterPrisessslCertificate: {\n title: 'Preencha os dados abaixo!',\n info: (\n <>\n Leia com atenção os termos a seguir: \n \n \n A instalação deste certificado somente é feita para Pessoa Jurídica (CNPJ) e todos os dados aqui na HostGator precisam corresponder aos da empresa junto a Receita Federal;\n \n \n A validação dos dados é feita por uma empresa terceira que pode solicitar documentos e fará chamadas telefônicas exclusivamente ao número registrado no CNPJ afim de validar a existência da sua empresa;\n \n \n No campo abaixo, para preenchimento da URL, cuide para informar o endereço correto. Não é possível reemitir o certificado para outro domínio;\n \n \n {'Este Certificado SSL Empresarial tem um custo de '}\n {formatCurrency(323.88)}\n {' ao ano;'}\n \n \n As faturas de renovação serão geradas automaticamente ao fim do ciclo, mas a cada pagamento deve criar um chamado para reemitir o certificado SSL renovado;\n \n \n A instalação deste certificado é válida apenas para servidores da HostGator.\n \n \n \n ),\n placeholders: {\n cnpj: 'CNPJ da empresa',\n phone: 'Número de telefone do CNPJ',\n phoneInfo: 'É obrigatório que o telefone informado conste cadastrado no CNPJ',\n email: 'Conta de email do dominío',\n emailInfo: 'É obrigatório que a conta de email informada seja do próprio dominio',\n agreed: `Confirmo que li e concordo com os termos acima e com a cobrança de ${formatCurrency(323.88)} ao ano`,\n },\n subject: 'Suporte Técnico - Certificado SSL Empresarial',\n body: {\n product: selectedProduct => `Produto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username}`,\n request: 'Solicitação: Certificado SSL Privado',\n cnpj: cnpj => `CNPJ da empresa: ${cnpj}`,\n phone: phone => `Número de telefone do CNPJ: ${phone}`,\n email: email => `Conta de email do dominío: ${email}`,\n agreed: agreed => `Confirmo que li e concordo com os termos acima e com a cobrança de ${formatCurrency(323.88)} ao ano: ${agreed ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do produto: ${selectedProduct.id}`,\n },\n send: 'Enviar',\n },\n reloadRebuild: {\n title: 'Preencha os dados abaixo!',\n info: (\n <>\n Leia com atenção os termos a seguir: \n \n \n Nós não faremos backup de seu servidor. \n \n \n Caso você deseje que restauremos seu backup, após o procedimento, deverá subir todos os arquivos para um mesmo diretório em até 48 horas. \n \n \n Não nos responsabilizamos pelo conteúdo restaurado, pois não temos controle sobre o backup disponibilizado. \n \n \n {'Importante: '} \n \n \n Este formulário é para solicitação de Reload/Rebuild. Ao solicitar o procedimento todo o conteúdo do servidor será removido sem possibilidade de restauração. \n \n \n {'Atenção: '} \n \n \n O procedimento será realizado no servidor selecionado. Não haverá dupla confirmação \n \n \n Ao escolher uma imagem linux sem cPanel, o servidor é entregue somente com o SSH configurado. Todas configurações adicionais é responsábilidade do cliente. \n \n \n Se o seu servidor contratado é Windows, você somente pode escolher uma imagem Windows, assim como se seu servidor contratado for Linux, somente pode escolher uma imagem Linux. Para trocar o Sistema Operacional nesses casos, deve realizar o cancelamento e uma nova contratação. \n \n \n \n ),\n placeholders: {\n image: 'Qual a imagem desejada?',\n canExecuteInComercialHours: 'Podemos executar em horário comercial',\n agreedBrasiliaHours: '08:00 as 18:00 *Conforme horário de Brasília',\n agreedRebuildReloadTerms: 'Confirmo que li e concordo com os Termos de Rebuild/Reload',\n agreedValue: 'Confirmo que li e concordo com os termos acima e com a cobrança do valor de R$250,00 caso se encaixe nos cenários descritos nos termos',\n agreedResponsability: 'Confirmo que li e estou ciente que é minha responsabilidade fazer backups para posterior restauração',\n linuxWithCpanel: 'Imagens Linux com cPanel',\n linuxWithoutCpanel: 'Imagens Linux sem cPanel',\n windowsWithPleskWithoutLicense: 'Imagens Windows com Plesk (não incluso a licença que deve ser contratada diretamente com eles)',\n windowsWithPleskWithLicense: 'Imagens Windows com Plesk (incluso a licença)',\n yes: 'Sim',\n no: 'Não',\n },\n subject: 'Suporte Técnico - Solicitação de Reload/Rebuild',\n body: {\n product: selectedProduct => `Produto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username}`,\n request: 'Solicitação: Reload/Rebuild',\n image: image => `Qual a imagem desejada? ${image}`,\n canExecuteInComercialHours: bool => `Podemos executar em horário comercial? ${bool ? 'Sim' : 'Não'}`,\n agreedBrasiliaHours: bool => `08:00 as 18:00 *Conforme horário de Brasília? ${bool ? 'Sim' : 'Não'}`,\n agreedRebuildReloadTerms: bool => `Confirmo que li e concordo com os Termos de Rebuild/Reload? ${bool ? 'Sim' : 'Não'}`,\n agreedValue: bool => `Confirmo que li e concordo com os termos acima e com a cobrança do valor de R$250,00 caso se encaixe nos cenários descritos nos termos? ${bool ? 'Sim' : 'Não'}`,\n agreedResponsability: bool => `Confirmo que li e estou ciente que é minha responsabilidade fazer backups para posterior restauração? ${bool ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do produto: ${selectedProduct.id}`,\n },\n send: 'Enviar',\n },\n moreEmails: {\n title: 'Preencha os dados abaixo!',\n info: (\n <>\n Leia com atenção os termos a seguir: \n \n \n {'A limitação é para a segurança de seu servidor e aumenta-la '}\n \n pode aumentar o risco de seus Ips serem bloqueados pelos maiores provedores de emails\n \n \n \n {'Conforme pode ser verificados nos itens '}\n \n {' é de sua responsabilidade remover endereços de IP de listas de bloqueios, monitorar envios e filas de e-mail'}\n \n \n \n Não nos responsabilizamos se o IP do servidor ou seu domínio for bloqueado pelos provedores de emails devido a má utilização do mesmo como por exemplo envio de email marketing.\n \n \n \n {'IMPORTANTE: '} \n O valor informado por você mais abaixo poderá ou não ser aplicado. O limite será definido com base no histórico de uso do servidor.\n \n \n ),\n placeholders: {\n serverIp: 'Qual o IP do servidor?',\n motivation: 'Qual o motivo do pedido de aumento no limite de 500 emails por hora?',\n newLimit: 'Qual é o limite de emails por hora que você acha adequado para seu uso?',\n agreedService: 'Confirmo que li e concordo com os Termos de Serviço',\n agreedPolicy: 'Confirmo que li e concordo com a Política de e-mails',\n agreedResponsability: 'Confirmo que estou ciente que é minha responsabilidade remover endereços de IP de listas de bloqueios, monitorar envios e filas de e-mail',\n },\n subject: 'Suporte Técnico - Aumento no envio de e-mails',\n body: {\n product: selectedProduct => `Produto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username}`,\n request: 'Solicitação: Aumento no envio de e-mails',\n serverIp: serverIp => `Qual o IP do servidor?: ${serverIp}`,\n motivation: motivation => `Qual é o limite de emails por hora que você acha adequado para seu uso?: ${motivation}`,\n newLimit: newLimit => `Conta de email do dominío: ${newLimit}`,\n agreedService: agreed => `Confirmo que li e concordo com os Termos de Serviço: ${agreed ? 'Sim' : 'Não'}`,\n agreedPolicy: agreed => `Confirmo que li e concordo com a Política de e-mails: ${agreed ? 'Sim' : 'Não'}`,\n agreedResponsability: agreed => `Confirmo que estou ciente que é minha responsabilidade remover endereços de IP de listas de bloqueios, monitorar envios e filas de e-mail: ${agreed ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do produto: ${selectedProduct.id}`,\n },\n send: 'Enviar',\n },\n installWhmcs: {\n title: 'Preencha os dados abaixo!',\n info: (\n <>\n Leia com atenção os termos a seguir: \n \n \n \n {'A instalação do WHMCS tem um custo de '}\n {formatCurrency(350.00)}\n \n \n \n Não damos suporte para a plataforma WHMCS, apenas instalamos e atualizamos as licenças\n \n \n \n Antes de solicitar a instalação, obtenha a licença do WHMCS\n \n \n \n {'para contratação veja o material de '}\n \n \n \n ),\n placeholders: {\n link: 'Informe o link desejado para instalação do WHMCS',\n linkInfo: 'Ex: seudomínio.com/whmcs',\n email: 'Email para cadastro no whmcs',\n password: 'Senha para cadastrar no whmcs',\n key: 'Licença whmcs',\n agreed: `Confirmo que li e concordo com os termos acima e com o valor de ${formatCurrency(350.00)}.`,\n },\n subject: 'Suporte Técnico - Instalação do WHMCS',\n body: {\n product: selectedProduct => `Produto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username}`,\n request: 'Solicitação: Instalação do WHMCS',\n link: link => `Informe o link desejado para instalação do WHMCS: ${link}`,\n email: email => `Email para cadastro no whmcs: ${email}`,\n password: password => `Senha para cadastrar no whmcs: ${password}`,\n key: key => `Licença whmcs: ${key}`,\n agreed: agreed => `Confirmo que li e concordo com os termos acima e com o valor de ${formatCurrency(350.00)}: ${agreed ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do produto: ${selectedProduct.id}`,\n },\n send: 'Enviar',\n },\n migrateVpsDedicated: {\n title: 'Preencha os dados abaixo!',\n info: (\n <>\n Leia com atenção os termos a seguir: \n \n \n {'Leia os nossos '}\n \n \n Caso você venha de outra empresa de hospedagem, verifique se há limitação de backup completo\n \n \n {'Veja também '}\n \n \n \n IMPORTANTE: \n {' NÃO CANCELE seu plano antigo até que os arquivos tenham sido migrados, testados e o DNS alterado corretamente.(Lembre-se de aguardar o prazo de propagação, de até 24 horas)'}\n \n \n ),\n placeholders: {\n ipOrDomain: 'Informe o endereço IP ou nome de domínio da conta da empresa de hospedagem anterior',\n user: 'Informe o nome de usuário de acesso ao painel da empresa de hospedagem anterior',\n password: 'Informe a senha de acesso',\n selectRootAccess: 'Você tem acesso root (administrador) ao servidor da empresa de hospedagem anterior?',\n yes: 'Sim',\n no: 'Não',\n selectWhmcsKey: 'Você usa a licença gratuita do WHMCS da HostGator?',\n installedDomain: 'Para qual domínio a licença está instalada?',\n detailedList: 'Por favor, nos dê uma lista completa das contas que você quer mudar, com todos os detalhes necessários, tais como nome de usuário, senha e painel de controle que você estava usando',\n agreed: 'Confirmo que li e concordo com os Termos de Migração e itens acima.',\n },\n subject: 'Suporte Técnico - Migração de Servidor Dedicado e VPS',\n body: {\n product: selectedProduct => `Produto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username}`,\n request: 'Solicitação: Migração de Servidor Dedicado e VPS',\n ipOrDomain: ipOrDomain => `Informe o endereço IP ou nome de domínio da conta da empresa de hospedagem anterior: ${ipOrDomain}`,\n user: user => `Informe o nome de usuário de acesso ao painel da empresa de hospedagem anterior: ${user}`,\n password: password => `Informe a senha de acesso: ${password}`,\n selectRootAccess: bool => `Você tem acesso root (administrador) ao servidor da empresa de hospedagem anterior?: ${bool ? 'Sim' : 'Não'}`,\n selectWhmcsKey: bool => `Você usa a licença gratuita do WHMCS da HostGator?: ${bool ? 'Sim' : 'Não'}`,\n installedDomain: installedDomain => `Para qual domínio a licença está instalada?: ${installedDomain}`,\n detailedList: detailedList => `Por favor, nos dê uma lista completa das contas que você quer mudar, com todos os detalhes necessários, tais como nome de usuário, senha e painel de controle que você estava usando: ${detailedList}`,\n agreed: agreed => `Confirmo que li e concordo com os Termos de Migração e itens acima: ${agreed ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do produto: ${selectedProduct.id}`,\n },\n send: 'Enviar',\n },\n migrateAccountVpsDedicated: {\n title: '¡Complete los datos de abajo!',\n info: (\n <>\n Lea cuidadosamente los siguientes términos: \n \n \n Las versiones PHP 5.2 y 5.3 fueron descontinuadas en nuestra estructura para evitar vulnerabilidades. Pedimos que tus sitio web estén debidamente actualizados de acuerdo a la versión PHP 5.6 (o superior) para que no ocurran problemas durante la migración.\n \n \n \n {'Importante: '} \n \n \n \n {'Antes de completar este formulario, por favor lee los '}\n \n NO CANCELES tu antiguo plsm hasta que los archivos se hayan migrado, los hayas probado y los DNS se hayan cambiado correctamente. \n \n \n ),\n placeholders: {\n ipOrDomain: 'Dirección IP o nombre de dominio de la cuenta de hosting anterior',\n user: 'Introduce el nombre de usuario para acceder al panel administrativo del antiguo proveedor',\n password: 'Introduce la contraseña para acceder al panel administrativo del antiguo proveedor',\n detailedList: 'Por favor propociónanos una lista completa de las cuentas que deseas migrar, con todos los detalles necesarios, tales como nombre de usuario, contraseña y panel de control que estaba utilizando',\n agreed: 'Entiendo y estoy de acuerdo con los términos de la migración',\n },\n subject: 'Soporte Técnico - Migración de Cuenta de VPS/Dedicado',\n body: {\n product: selectedProduct => `Produto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username}`,\n request: 'Solicitação: Migração de Servidor Dedicado e VPS',\n ipOrDomain: ipOrDomain => `Dirección IP o nombre de dominio de la cuenta de hosting anterior: ${ipOrDomain}`,\n user: user => `Introduce el nombre de usuario para acceder al panel administrativo del antiguo proveedor: ${user}`,\n password: password => `Introduce la contraseña para acceder al panel administrativo del antiguo proveedor: ${password}`,\n detailedList: detailedList => `Por favor propociónanos una lista completa de las cuentas que deseas migrar, con todos los detalles necesarios, tales como nombre de usuario, contraseña y panel de control que estaba utilizando: ${detailedList}`,\n agreed: agreed => `Entiendo y estoy de acuerdo con los términos de la migración: ${agreed ? 'Si' : 'No'}`,\n productId: selectedProduct => `ID del producto: ${selectedProduct.id}`,\n },\n send: 'Enviar',\n },\n updateWhmcsLicense: {\n title: 'Preencha os dados abaixo!',\n info: (\n <>\n Leia com atenção os termos a seguir: \n \n \n \n Este é um formulário apenas de atualização da licença, não de contratação.\n \n {' Para contratação veje o material de '}\n \n \n A licença gratuita é limitada a 249 contas cadastradas no WHMCS.\n \n \n Os planos de Revenda de hospedagem e Dedicado incluem uma única licença gratuita do WHMCS.\n \n \n A licença WHMCS oferecida pela HostGator só é válida se o WHMCS estiver instalado na sua conta na HostGator.\n \n \n IMPORTANTE: \n \n \n {`A Hostgator não é responsável pela instalação e configuração do WHMCS. Caso queira que façamos, existe uma cobrança de ${formatCurrency(350.00)}.`}\n \n \n Não damos suporte para a plataforma WHMCS, apenas instalamos e atualizamos as licenças.\n \n \n \n Você precisará acessar o painel de controle admin no mínimo 1 (uma) vez por mês para manter sua licença ativa.\n \n \n \n \n ),\n placeholders: {\n domain: 'Domínio que ativou o WHMCS',\n domainInfo: 'Informe o novo dominio. Se não deve ser alterado, basta informar o dominio atual.',\n license: 'Licença WHMCS',\n directory: 'Diretório onde está instalado o WHMCS',\n directoryInfo: 'Informe o novo diretório. Se não deve ser alterado, basta informar o diretório atual',\n accessLink: 'Link de acesso ao painel admin do WHMCS',\n serverIp: 'IP do servidor',\n serverIpInfo: (\n <>\n {'Deixe em branco se não souber o IP ou pegue-o através do painel da WHMCS '}\n \n {'Antes de prosseguir, veja se alguns materiais da nossa '}\n \n \n \n \n \n \n \n \n \n \n \n Leia com atenção os termos a seguir: \n \n \n A licença gratuita esta disponível para os planos de Revenda de hospedagem e Dedicado\n \n \n A licença gratuita é limitada a 249 contas cadastradas no WHMCS.\n \n \n Os planos de Revenda de hospedagem e Dedicado incluem uma única licença gratuita do WHMCS.\n \n \n A licença WHMCS oferecida pela HostGator só é válida se o WHMCS estiver instalado na sua conta na HostGator.\n \n \n \n ),\n placeholders: {\n domain: 'Informe o domínio utilizado ao fazer a solicitação',\n email: 'Informe o email utilizado ao fazer a solicitação',\n problem: 'Descreva seu problema e diga qual a mensagem de erro (se existir) ',\n directory: 'Diretório onde está instalado o WHMCS',\n print: 'Possui print de algum erro ou falha? Nos envie!',\n addDocumentButton: 'Anexar documento',\n agreed: 'Confirmo que li e concordo com os termos acima',\n },\n subject: 'Suporte Técnico - Aquisição Licença WHMCS',\n body: {\n product: selectedProduct => `Produto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username}`,\n request: 'Solicitação: Aquisição Licença WHMCS',\n agreed: ({ text, bool }) => `${text}: ${bool ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do produto: ${selectedProduct.id}`,\n },\n send: 'Enviar',\n },\n migrateReseller: {\n title: 'Preencha os dados abaixo!',\n info: (\n <>\n Leia com atenção os termos a seguir: \n \n \n {'Leia os nossos '}\n \n \n {'Veja também '}\n \n \n {'Para a '}\n migração entre planos da HostGator \n {' é necessária a contratação de um novo plano. Se você não desejar continuar com o plano antigo, depois que a migração for finalizada, solicite o cancelamento'}\n \n \n \n Ao solicitar uma migração não haverá reembolso\n \n {' (devolução do seu dinheiro) caso decida cancelar o plano'}\n \n \n {'Migramos gratuitamente até 30 contas, para além disso, '}\n \n \n \n IMPORTANTE: \n {' NÃO CANCELE seu plano antigo até que os arquivos tenham sido migrados, testados e o DNS alterado corretamente.(Lembre-se de aguardar o prazo de propagação, de até 24 horas)'}\n \n \n ),\n subject: 'Suporte Técnico - Migração de Revenda',\n placeholders: {\n domain: 'Domínio registrado na empresa de hospedagem anterior',\n panel: 'Qual o painel administrativo da empresa de hospedagem anterior?',\n other: 'Outro',\n user: 'Informe o nome do usuário do painel da empresa de hospedagem anterior',\n password: 'Informe a senha desse usuário do painel da empresa de hospedagem anterior',\n link: 'Link para acesso ao painel da empresa de hospedagem anterior',\n multipleDomainsLabel: 'Se você selecionou o painel WHM ou Plesk - Informe na caixa de texto abaixo no máximo 30 domínios que devem ser migrados gratuitamente, mantendo um por linha conforme o exemplo',\n multipleDomainsPlaceHolder: 'Exemplo:\\ndominio1.com.br\\ndominio2.com.br\\ndominio3.com.br',\n mutipleDomainsCpanelOtherLabel: 'Se você selecionou o painel cPanel ou Outro - Informe na caixa de texto abaixo no máximo 30 domínios (com usuário e senha do acesso ao painel) que devem ser migrados gratuitamente, mantendo um por linha conforme o exemplo',\n mutipleDomainsCpanelOtherPlaceholder: 'Exemplo:\\ndominio1.com.br / usuário painel / senha de acesso ao painel\\ndominio2.com.br / usuário painel / senha de acesso ao painel\\ndominio3.com.br / usuário painel / senha de acesso ao painel',\n agreed: 'Confirmo que li e concordo com os Termos de Migração.',\n },\n body: {\n product: selectedProduct => `Produto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username}`,\n request: 'Solicitação: Migração de Revenda',\n agreed: ({ text, bool }) => `${text}: ${bool ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do produto: ${selectedProduct.id}`,\n },\n send: 'Enviar',\n },\n commonForm: {\n info: 'Descreva o seu problema em detalhes para que nossos atendentes possam melhor te atender.',\n selectProduct: 'Selecione o produto em que você precisa de suporte',\n alert: email => (\n <>\n Quanto mais detalhes você fornecer, mais rápida e precisa será nossa resposta. Todo o atendimento será feito pelo chamado e você receberá atualizações no e-mail\n {' '}\n \n {email}\n \n . Não há necessidade de entrar no chat.\n \n ),\n domainRelated: 'Domínio relacionado ao problema',\n describe: 'Descreva o seu problema*',\n required: 'Por favor, insira a descrição do problema para abrir o chamado.',\n screenShot: (\n <>\n Envie uma captura de tela (print) \n {' '}\n que possa nos ajudar a entender o que está acontecendo (opcional):\n \n ),\n sendFile: 'Enviar arquivo',\n fileInputExtensions: extensions => `Envie uma imagem de até 5 MB nos formatos: ${extensions}.`,\n checkbox: () => (\n \n Li e concordo com as\n {' '}\n \n Políticas do Suporte\n \n
\n ),\n review: 'Revisei os dados informados e descrevi o meu problema em detalhes',\n submitLabel: 'Enviar solicitação',\n selectProductPlaceholder: 'Selecione um produto',\n category: 'Categoria',\n product: 'Produto',\n description: 'Descrição',\n },\n successModal: {\n title: 'Recebemos seu chamado!',\n description: (\n <>\n Fique atento ao prazo de resposta. \n \n {'Em até '}\n 24h úteis \n {' (De segunda à sexta) você receberá um retorno do nosso time de suporte.'}\n \n \n ),\n closeLabel: 'Voltar para suporte',\n },\n names: {\n internalMigration: 'Migração Interna (Entre contas HostGator)',\n restorateBackupHgRoutine: 'Restauração de Backup (Rotina HostGator)',\n userBackupRestore: 'Restauração de backup (arquivo fornecido pelo cliente)',\n generateBackup: 'Gerar Backup',\n withoutEmailAccess: 'Não tenho acesso ao e-mail cadastrado',\n changePrimaryDomain: 'Alteração de Domínio Primário',\n changeDueDate: 'Alterar Data de Vencimento',\n googleAdwordsCoupon: 'Cupom Google AdWords',\n externalMigration: 'Migração externa (Outros provedores)',\n installExternalSsl: 'Instalação de SSL de Outra Empresa',\n financialDoubts: 'Dúvidas Gerais',\n restorateCancelledPlan: 'Restauração de Plano Cancelado',\n generateCSR: 'Gerar CSR',\n restorateSiteBuilderAccess: 'Restauração de acesso ao editor do Criador de Sites',\n affiliateProgram: 'Dúvidas exclusivamente sobre o Programa de Afiliados',\n nationalDomainTransfer: 'Transferência de registro de Domínio nacional',\n upgradeVps: 'Upgrade de Plano',\n upgradeSiteLock: 'Upgrade de Plano - SiteLock',\n upgradeCodeGuard: 'Upgrade de Plano - CodeGuard',\n upgradeSiteBuilder: 'Upgrade de un plan - SiteBuilder',\n ChangePaymentcycle: 'Alterar Ciclo de Pagamento',\n privateSslCertificate: 'Certificado SSL Privado',\n widlcardSslCertificate: 'Certificado SSL Wildcard',\n enterPrisessslCertificate: 'Certificado SSL Empresarial',\n installWhmcs: 'Instalação do WHMCS',\n reloadRebuild: 'Solicitação de Reload/Rebuild',\n moreEmails: 'Aumento no envio de e-mails',\n migrateVpsDedicated: 'Migração de Servidor Dedicado e VPS',\n migrateAccountVpsDedicated: 'Migración de Cuenta de VPS/Dedicado',\n updateWhmcsLicense: 'Atualização de Licença WHMCS',\n whmcsAcquisition: 'Aquisição Licença WHMCS',\n migrateReseller: 'Migração de Revenda',\n financial: 'Financeiro',\n hosting: 'Hospedagem',\n domain: 'Domínio',\n email: 'E-mail',\n siteOffline: 'Site fora do ar',\n other: 'Não encontrei o que procurava',\n sslEV: 'Certificado SSL EV',\n },\n },\n history: {\n attachFile: 'Anexar arquivo',\n draggableTitle: 'Selecione um arquivo do seu dispositivo ou arraste e solte o arquivo nessa área.',\n findFile: 'Buscar arquivo',\n placeHolder: 'Envie uma mensagem',\n send: 'Enviar',\n status: {\n closed: 'Finalizado',\n solved: 'Concluído',\n new: 'Aberto',\n open: 'Em Aberto',\n opened: 'Em Aberto',\n pending: 'Aguardando Respsota',\n },\n emptyLabel: 'Não foi possível carregar as informações do ticket',\n emptyCta: 'Ir para a lista de tickets',\n ticketDate: ({ comment }) => {\n const isToday = isSameDay(new Date(comment.created_at), new Date());\n if (isToday) {\n return format(new Date(comment.created_at), 'H:mm aa');\n }\n\n return `${format(new Date(comment.created_at), 'EEEE, dd/MM/yyyy', {\n locale: ptBR,\n })} às ${format(new Date(comment.created_at), 'H:mm aa', {\n locale: ptBR,\n })}`;\n },\n endMessage: 'Confira se está tudo ok e finalize o chamado. Em 3 dias ele será finalizado automaticamente.',\n replyCta: 'Responder o chamado',\n closeTicketCta: 'Finalizar chamado',\n feedback: {\n title: 'O que achou do atendimento?',\n good: 'Muito bom!',\n bad: 'Não me ajudou!',\n send: 'Enviar avaliação',\n },\n },\n underMaintenance: (\n <>\n Estamos em manutenção\n 24 horas úteis \n {' '}\n (De segunda a sexta).\n \n ),\n automated: {\n alterar_dominio_primario: {\n title: 'Domínio alterado com sucesso',\n description: 'Para deixar seu novo domínio acessível, é necessário configurá-lo.',\n cta: 'Ir para página de Domínios',\n },\n },\n backToSupport: 'Voltar para tela de Suporte',\n};\n","/* eslint-disable react/no-unescaped-entities */\nimport React from 'react';\nimport { TOS_STATUS } from '@/enums/preChat/preChat.enum';\nimport { IconDanger, Link } from 'gatorcomponents';\nimport { BLOG_URL, HELP_CENTER_URL } from '@/config/urls/supportUrls';\nimport { format, isSameDay } from 'date-fns';\nimport { es } from 'date-fns/locale';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { COUNTRY } from '@/config';\n\nconst sslEvPricePerBrand = {\n mx: 8988,\n co: 727200,\n cl: 168000,\n ar: 93597,\n pe: 30000,\n uy: 3149.97,\n ec: 77.97,\n do: 4649.97,\n bo: 539.97,\n};\n\nconst installSslPerBrand = {\n ar: 10654.25,\n pe: 41.40,\n ec: 11.05,\n uy: 456.50,\n do: 662.60,\n bo: 76.15,\n};\n\nconst privateSslPerBrand = {\n ar: 31199,\n pe: 100,\n ec: 25.99,\n uy: 1049.99,\n do: 1549.99,\n bo: 179.99,\n};\n\nconst wildCardPerBrand = {\n ar: 62398,\n pe: 200,\n ec: 51.98,\n uy: 2099.98,\n do: 3099.98,\n bo: 359.98,\n};\n\nconst coinPerBrand = {\n mx: 'MXN',\n co: 'COP',\n cl: 'CLP',\n ar: 'ARS',\n pe: 'PEN',\n uy: 'UYU',\n ec: 'USD',\n do: 'DOP',\n bo: 'BOB',\n};\n\nconst domainExtensionPerBrand = {\n cl: 'cl',\n co: 'co',\n mx: 'mx',\n ar: 'ar',\n pe: 'pe',\n bo: 'bo',\n cr: 'cr',\n do: 'do',\n ec: 'net.ec',\n sv: 'sv',\n pa: 'pa',\n py: 'com.py',\n uy: 'uy',\n};\n\nexport default {\n listPageFaq: {\n title: 'Links de ajuda',\n filterLabel: 'Filtrar por',\n filterByPlaceholder: 'Busque por palavra-chave',\n clearFilterLabel: 'Limpar filtros',\n helpLinks: {\n filter: {\n chips: {\n main: 'Principais dúvidas',\n financial: 'Financeiro',\n domain: 'Domínio e DNS',\n mail: 'E-mail',\n site: 'Site',\n },\n },\n },\n listDescription: (\n <>\n {'Vea a continuación los principales contenidos, '}\n {`${open} ticket${open === 1 ? '' : 's'} abierto${open === 1 ? '' : 's'}.`} \n {' El plazo para la primera respuesta es de '}\n hasta 24 horas hábiles. \n \n Tiene más de un ticket urgente que resolver. Ingrese al ticket para ser orientado por nuestros especialistas.\n
\n \n ),\n selectLabel: 'Tickets',\n selectPlaceholder: 'Seleccione el ticket',\n ticketStatusLabel: status => ({\n [TOS_STATUS.DISK]: 'Alerta de espacio en disco',\n [TOS_STATUS.INODES]: 'Alerta de límite de archivos',\n [TOS_STATUS.BACKUP]: 'Alerta de copia de seguridad',\n [TOS_STATUS.MYSQL]: 'Alerta de uso de recursos de base de datos',\n [TOS_STATUS.CPU]: 'Alerta de uso de recursos del procesador',\n [TOS_STATUS.DMCA]: 'Alerta de derechos de autor',\n [TOS_STATUS.PISHING]: 'Alerta de archivo infectado',\n })[status] || '',\n ticketWarningText: status => ({\n [TOS_STATUS.DISK]: (\n \n {'Alerta de espacio en disco: '} \n ¡Su espacio en disco está lleno! Ingrese al ticket para ser orientado por nuestros especialistas sobre cómo desbloquear.\n
\n ),\n [TOS_STATUS.INODES]: (\n \n {'Alerta de límite de archivos: '} \n ¡La cuenta ha alcanzado el límite de archivos y directorios! Ingrese al ticket para ser orientado por nuestros especialistas sobre cómo desbloquear.\n
\n ),\n [TOS_STATUS.BACKUP]: (\n \n {'Alerta de copia de seguridad: '} \n ¡Solo puede almacenar una copia de seguridad en su cuenta! Ingrese al ticket para ser orientado por nuestros especialistas sobre cómo desbloquear.\n
\n ),\n [TOS_STATUS.MYSQL]: (\n \n {'Alerta de uso de recursos de base de datos: '} \n ¡Su base de datos MySQL ha alcanzado el límite de uso de recursos! Ingrese al ticket para ser orientado por nuestros especialistas sobre cómo desbloquear.\n
\n ),\n [TOS_STATUS.CPU]: (\n \n {'Alerta de uso de recursos del procesador: '} \n ¡Su uso de los recursos del procesador ha llegado al límite! Ingrese al ticket para ser orientado por nuestros especialistas sobre cómo desbloquear.\n
\n ),\n [TOS_STATUS.DMCA]: (\n \n {'Alerta de derechos de autor: '} \n ¡Hay un problema relacionado con los derechos de autor en su sitio! Ingrese al ticket para ser orientado por nuestros especialistas sobre cómo desbloquear.\n
\n ),\n [TOS_STATUS.PISHING]: (\n \n {'Alerta de archivo infectado: '} \n ¡Detectamos contenido potencialmente peligroso en su plan de hosting! Ingrese al ticket para ser orientado por nuestros especialistas sobre cómo desbloquear.\n
\n ),\n })[status] || '',\n goToTicketBtnText: 'Ir al ticket',\n },\n ticketUpgradeVpsModal: {\n title: 'Upgrade de VPS',\n firstLabel: () => (\n \n Este tipo de upgrade solo se realiza a través de la\n {' apertura de un ticket '} \n con el atendimiento de un especialista.\n
\n ),\n secondLabel: () => (\n \n Por lo tanto,\n {' complete las informaciones que falta '} \n (IP del Servidor, Nuevo producto y Horario para la ejecución) y envíe el formulario de apertura del ticket. Tan pronto como un especialista responda,\n {' la respuesta se enviará por correo electrónico.'} \n
\n ),\n buttonLabel: 'Ok, entendí',\n },\n openNewTicketPage: {\n title: 'Complete las siguientes informaciones para enviar su solicitud',\n whichService: 'Para cuál asunto o servicio desea soporte?',\n selecteProductOptionPlaceholder: ' ¿Para cuál producto/ servicio desea soporte? *',\n selecteSectorOptionPlaceholder: '¿Cuál sector? *',\n sectorBilling: 'Financiero',\n sectorTechnical: 'Técnico',\n selecteNeedOptionPlaceholder: '¿Cuál es su necesidad? *',\n textManipulation: {\n startsWith: {\n billing: 'Soporte Financiero',\n technical: 'Soporte Técnico',\n myAccount: 'Mi cuenta',\n },\n },\n selectProductGroups: {\n myAccount: 'Mi cuenta',\n activeProducts: 'Productos/Servicios Activos',\n suspendedProducts: 'Productos/ Servicios Suspendidos ',\n commonQuestions: 'Principales categorías',\n },\n },\n forms: {\n error: 'No fue posible generar el ticket en este momento. Espere un instante y vuelva a intentarlo.',\n terms: (\n <>\n {'Lea con atención los siguientes '}\n términos: \n \n ),\n submitLabel: 'Abrir ticket',\n internalMigration: {\n title: 'Complete el siguiente formulario',\n originTitle: 'Datos de origen:',\n destinationTitle: 'Datos de destino:',\n links: {\n migration: () => (\n <>\n {'Lea nuestros '}\n NO CANCELE su plan antiguo hasta que los archivos se hayan migrado, probado y las DNS cambiadas correctamente. \n ),\n 1: () => (\n Recuerde esperar el plazo de propagación de 24 horas. \n ),\n 2: () => (\n No somos responsables del contenido migrado, ya que no tenemos control de la versión. \n ),\n },\n },\n checkbox: {\n terms: () => (\n <>\n {'Confirmo que '}\n he leído y estoy de acuerdo \n {' con los '}\n estoy de acuerdo \n {' con un eventual cobro si no cumplo con los límites de la migración descritos en los términos.'}\n \n ),\n },\n migrationTypeText: 'Tipo de migración',\n partialMigration: 'Migración Parcial',\n fullMigration: 'Migración completa',\n whatToBeMigrated: '¿Qué debe ser migrado?',\n name: 'Migración Interna',\n alert: 'Este formulario es para la migración de toda la cuenta. Al solicitar la migración, todo el contenido de su sitio y/o banco de datos, serán reemplazados por el contenido migrado, no pudiendo volver al contenido anterior, si tiene más de un plan de hosting asegúrese de que está haciendo la solicitud para el producto correcto. ',\n originDomainPlaceholder: 'Seleccione entre sus planes activos',\n originDomainLabel: 'Dominio principal *',\n originServerPlaceholder: 'Digite el servidor aquí',\n originServerLabel: 'Servidor',\n originUserPlaceholder: 'Digite el usuario aquí',\n originUserLabel: 'Usuario',\n myServerLabelRadio: 'Para mi panel HostGator',\n otherServerLabelRadio: 'Para otro panel HostGator',\n myDomainPlaceholder: 'Seleccione el dominio principal aquí',\n myDomainLabel: 'Dominio principal *',\n myServerPlaceholder: 'Digite el servidor aquí',\n myServerLabel: 'Servidor',\n myUserPlaceholder: 'Digite el usuario aquí',\n myUserLabel: 'Usuario',\n otherDomainPlaceholder: 'Digite el dominio principal aquí',\n otherDomainLabel: 'Dominio principal*',\n otherServerPlaceholder: 'Digite el servidor aquí',\n otherServerLabel: 'Servidor',\n otherUserPlaceholder: 'Digite el usuario aquí',\n otherUserLabel: 'Usuario',\n body: {\n originServer: 'Servidor de origen',\n originUser: 'Usuario de origen',\n destinyServer: 'Servidor de destino',\n destinyUser: 'Usuario de destino',\n agree: 'De acuerdo con los términos',\n agreePayment: 'De acuerdo con un eventual cobro',\n yes: 'Si',\n no: 'No',\n },\n },\n restorateBackupHgRoutine: {\n name: 'Restauração de Backup Completo - Rotina HostGator',\n terms: (\n <>\n {'Lea atentamente los siguientes '}\n términos: \n \n ),\n termsItems: (\n <>\n \n \n Hay un cobro \n {' por este procedimiento. '}\n Al final de la restauración se generará el cobro en su cuenta. \n \n No tenemos control de versiones, por lo que no somos responsables del contenido restaurado. \n \n {'Si sus correos electrónicos son Titan, no restauramos desde la copia de seguridad. Usted es responsable de '}\n \n Si su sitio fue desarrollado con el Creador de Sitios web de HostGator, debe solicitar la restauración del editor a través del formulario \"Restauración de acceso al editor del Creador de Sitios” \n \n \n ),\n alert: {\n title: 'ATENCIÓN!',\n description: (\n <>\n {'Este formulario es para solicitar la restauración de toda la cuenta. Todo el contenido del sitio y/o la base de datos será reemplazado por contenido restaurado y '}\n no podrá ser devuelto al contenido anterior. \n \n ),\n },\n title: 'Complete los siguientes datos ',\n selectRestorationType: {\n full: 'Completa',\n database: 'Base de datos',\n file: 'Archivos',\n domain: 'Dominio',\n },\n fields: {\n restorationType: 'Tipo de restauración ',\n user: 'Escribe el nombre de usuario aquí',\n userLabel: 'Usuario',\n server: 'Escribe el servidor aquí',\n serverLabel: 'Servidor',\n domain: 'Escribe el dominio aquí',\n domainLabel: 'Dominio',\n backup: 'Seleccione una de las fechas para restaurar',\n specificDomains: 'Informe abajo los dominios que desea restaurar separados por coma',\n specificDatabase: 'Informe abajo las Bases de Datos que desea restaurar separados por coma',\n specificFiles: 'Informe abajo los archivos que desea restaurar separados por coma',\n },\n options: {\n daily: 'Diario',\n monthly: 'Mensual',\n weekly: 'Semanal',\n },\n selectBackupTitle: 'Copias de seguridad disponibles para restaurar:',\n months: {\n 0: 'Enero',\n 1: 'Febrero',\n 2: 'Marzo',\n 3: 'Abril',\n 4: 'Mayo',\n 5: 'Junio',\n 6: 'Julio',\n 7: 'Agosto',\n 8: 'Septiembre',\n 9: 'Octubre',\n 10: 'Noviembre',\n 11: 'Diciembre',\n },\n agreed: (\n <>\n\n {'Confirmo que '}\n leí y estoy de acuerdo \n {' con los términos de restauración del backup de arriba. '}\n \n ),\n open: 'Abrir ticket',\n body: {\n productId: 'ID del producto',\n server: 'Servidor',\n user: 'Usuario',\n domain: 'Dominio',\n backupName: 'Nombre del backup utilizado para la restauración',\n uninformed: 'no informado',\n agree: 'De acuerdo con los términos',\n yes: 'Si',\n no: 'No',\n },\n },\n generateBackup: {\n name: 'Restauração de Backup Completo - Rotina HostGator',\n terms: (\n <>\n {'Lea atentamente los siguientes '}\n términos: \n \n ),\n termsItems: (\n <>\n \n \n El archivo de backup será enviado por correo electrónico, y podrás seguir su progreso en la pantalla de Soporte, en la sección de Tickets.\n \n \n \n ),\n title: 'Complete los siguientes datos ',\n fields: {\n user: 'Escribe el nombre de usuario aquí',\n userLabel: 'Usuario',\n server: 'Escribe el servidor aquí',\n serverLabel: 'Servidor',\n domain: 'Escribe el dominio aquí',\n domainLabel: 'Dominio',\n },\n agreed: (\n <>\n\n {'Confirmo que '}\n leí y estoy de acuerdo \n {' con los términos de restauración del backup de arriba. '}\n \n ),\n open: 'Abrir ticket',\n body: {\n productId: 'ID del producto',\n server: 'Servidor',\n user: 'Usuario',\n agree: 'De acuerdo con los términos',\n yes: 'Si',\n no: 'No',\n },\n },\n userBackupRestore: {\n name: 'Restaurar backup - Copia del cliente',\n restorationType: 'Tipo de Restauración ',\n completeRestoration: 'Completa',\n databaseRestoration: 'Base de datos',\n filesRestoration: 'Archivos',\n domainRestorarion: 'Dominio',\n title: 'Complete los siguientes datos',\n alert: 'Este formulario es para solicitar la restauración de toda la cuenta. Todo el contenido del sitio y/o la base de datos será reemplazado por contenido restaurado y no podrá ser devuelto al contenido anterior. Si tiene más de un plan de hosting, asegúrese de solicitar para el producto correcto.',\n fileNameInputLabel: 'Ingrese el nombre del archivo de backup a ser restaurado',\n fileNameInputPlaceholder: 'Digite el nombre del archivo de backup',\n databaseNameInputLabel: 'Nombre de la base de datos',\n databaseNameInputPlaceholder: 'Digite el nombre de la base de datos',\n checkboxAgreed: (\n <>\n Confirmo que\n {' leí y estoy de acuerdo '} \n con los términos de restauración del backup de arriba.\n \n ),\n warning: {\n title: (\n ATENCIÓN! \n ),\n item: {\n 0: (\n \n {'Asegúrese de cargar el archivo de copia de seguridad en cPanel antes de solicitar la restauración. Consulte '}\n \n ),\n 1: (\n No tenemos control de versiones, por lo que no somos responsables del contenido restaurado. \n ),\n 2: (\n \n {'Si sus correos electrónicos son Titan, no restauramos desde la copia de seguridad. Usted es responsable de '}\n \n ),\n 3: (\n Si su sitio fue desarrollado con el Creador de Sitios web de HostGator, debe solicitar la restauración del editor a través del formulario \"Restauración de acceso al editor del Creador de Sitios” \n ),\n },\n },\n selectedProduct: 'Producto selecionado',\n backupFileName: 'Archivo de backup',\n databaseFileName: 'Base de datos',\n user: 'Escribe el nombre de usuario aquí',\n userLabel: 'Usuario',\n server: 'Escribe el servidor aquí',\n serverLabel: 'Servidor',\n domain: 'Escribe el dominio aquí',\n domainLabel: 'Dominio',\n agree: 'De acuerdo con los términos',\n yes: 'Si',\n no: 'No',\n },\n withoutEmailAccess: {\n name: 'No tengo acceso al correo electrónico registrado',\n title: 'Complete el siguiente formulario',\n info: 'Para garantizar la seguridad de su cuenta y proceder al cambio de su correo electrónico registrado, solicitamos que complete las informaciones de abajo. Después del envío, nuestro equipo de soporte se comunicará con usted en hasta 48 horas.',\n emailLabel: 'Correo electrónico registrado',\n documentLabel: 'Número de Documento del titular de la cuenta (Personal o Empresa)',\n contactEmailPlaceholder: 'Digite aquí una dirección de correo electrónico válida para que podamos ponernos en contacto con usted.',\n contactEmailLabel: 'Correo electrónico de contacto',\n addDocumentLabel: (\n <>\n {'Para completar el proceso de verificación, solicitamos que '}\n envíe una foto teniendo el documento de identificación (Personal o de la Empresa) utilizado para registrar su cuenta. \n {' Por favor, haga clic en el botón \"Adjuntar documento\" de abajo para cargar el archivo. Tenga en cuenta que el límite de tamaño es de 5 MB y aceptamos formatos JPEG, PNG y PDF.'}\n \n ),\n addDocumentButton: 'Adjuntar documento',\n descriptionLabel: 'Describa su solicitud en detalle en el campo de abajo:',\n emailError: 'Introduzca un correo electrónico válido',\n body: {\n registeredEmail: 'Correo electrónico registrado',\n document: 'Documento',\n contactEmail: 'Correo electrónico de contacto',\n description: 'Descripción del problema',\n },\n },\n changePrimaryDomain: {\n title: 'Complete el siguiente formulario',\n info: isHosting => (\n <>\n Para el cambio de dominio principal, compruebe los dos pasos siguientes: \n \n \n {'El nuevo dominio debe estar registrado. Si es necesario, consulte '}\n \n \n {isHosting ? (\n <>\n {'El dominio no puede estar añadido en cPanel. Por lo tanto, si el nuevo dominio ya está configurado como dominio adicional o alternativo (Aliases) en su hosting '}\n \n \n Lea con atención los siguientes términos: \n \n \n Si el sitio web ha sido desarrollado con el Creador de Sitios Web de HostGator, al cambiar el dominio principal, usted perderá acceso a la herramienta de edición. Para recuperar el acceso será necesario crear un nuevo sitio web.\n \n \n \n ),\n newDomainLabel: 'Nuevo dominio que será utilizado',\n whyLabel: 'Motivo del cambio',\n agreedLabel: 'Confirmo que he leído y estoy de acuerdo con los términos anteriores y autorizo el cambio de dominio principal.',\n productId: 'ID del producto',\n solicitation: 'Solicitación',\n product: 'Producto',\n yes: 'Si',\n no: 'No',\n userLabel: 'Usuario',\n subject: 'Soporte Técnico - Alteración de Dominio Primario',\n },\n installExternalSsl: {\n info: (\n <>\n Lea con atención los siguientes términos: \n \n \n {'En el campo URL para la instalación del SSL, asegúrate de informar el dominio correcto, '} \n ya que no es posible emitir el certificado nuevamente para otro dominio;\n \n \n El SSL funcionará unicamente para el dominio informado a continuación (por ejemplo: nombrededominio.com);\n \n \n El certificado SSL es valido únicamente para ser instalado en los servidores de HostGator \n ;\n \n \n \n ),\n urlInputPlaceholder: 'URL para la instalación del SSL *',\n urlInputLabel: 'El SSL funcionará únicamente en la URL informada, la cual puede ser un dominio o un subdominio. Por ejemplo tienda.nombredeldominio.com.',\n sslCertificate: 'Certificado SSL *',\n addDocumentButton: 'Anexar archivo',\n sslCertififateFileType: 'Archivo con extensión .crt',\n sslCertificateCA: 'Insira el contenido del archivo del Certificado SSL CA (Trusted Authority)',\n privateKey: 'Insira el contenido del archivo del Private Key *',\n orPasteContentPlaceholder: 'Agrega el contenido del archivo en este campo',\n checkboxLabel: `Si, estoy de acuerdo con el cobro del Certificado SSL por ${formatCurrency(installSslPerBrand[COUNTRY.toLowerCase()])} ${coinPerBrand[COUNTRY.toLowerCase()]}`,\n send: 'Enviar',\n\n bodyFields: {\n tag: 'whmcs_form_tecnico_ssl_otra_empresa',\n\n product: 'Producto',\n user: 'Usuario',\n server: 'Servidor',\n solicitation: 'Solicitación',\n sslUrl: 'URL para la instalación del SSL',\n sslCa: 'Contenido del archivo del Certificado SSL CA (Trusted Authority)',\n privateKey: 'Contenido del archivo del Private Key',\n agree: `Si, estoy de acuerdo con el cobro del Certificado SSL por ${formatCurrency(installSslPerBrand[COUNTRY.toLowerCase()])} ${coinPerBrand[COUNTRY.toLowerCase()]}`,\n yes: 'Si',\n no: 'No',\n productId: 'ID del producto',\n },\n },\n googleAdwordsCoupon: {\n info: (\n <>\n Lea con atención los siguientes términos: \n \n Como cliente de HostGator tienes derecho a 1 cupón por cada plan de hospedaje contratado; \n \n Apenas 1 crédito promocional puede ser obtenido por el cliente;\n \n \n Usted tiene derecho al cupón si eres nuevo en Google AdWords y si tienes una cuenta con por lo menos 14 dias de existencia, o si ya eres un cliente de Google AdWords y activas un nuevo recurso o producto, o reactivar todavia una cuenta inactiva;\n \n \n Nosotros te enviaremos un código promocional que deberá ser registrado en su cuenta de Google AdWords - este código no tiene valor inmediato, este servira apenas para iniciar el proceso de calificación para el crédito promocional asociado;\n \n \n El crédito no se aplica a los costos acumulados antes de la introducción del código promocional. O sea, el crédito puede ser usado unicamente para los gastos de publicidades futuras.\n Para informaciones detalladas, verifique los\n \n \n\n \n ),\n checkbox: 'Confirmo que leí y concuerdo con los términos',\n sendButtonLabel: 'Enviar',\n bodyFields: {\n product: 'Producto',\n user: 'Usuario',\n server: 'Servidor',\n solicitation: 'Solicitación',\n agree: 'Confirmo que leí y concuerdo con los términos',\n productId: 'ID del producto',\n },\n },\n externalMigration: {\n title: 'Complete el siguiente formulario',\n info: (\n <>\n {'Antes de completar este formulario, por favor: '}\n \n \n {'Lee los '}\n \n \n {'Consulte también '}\n \n \n IMPORTANTE: \n \n \n NO CANCELES \n {' tu antiguo plan hasta que los archivos se hayan migrado, los hayas probado y los DNS se hayan cambiado correctamente.'}\n \n \n Recuerda esperar el periodo de propagación, de 24 horas.\n \n \n ATENCION \n \n Este formulario es para la restauración de toda la cuenta. Al solicitar la restauración, todo el contenido del site y/o, base de datos serán substituídos por el contenido restaurado, no pudiendo volver al contenido anterior. Si posee más de un plan de hospedaje certifiquese que está solicitando para el producto correcto. \n \n \n ),\n oldHostDomain: 'Dominio registrado en el antiguo antiguo hosting *',\n oldHostLogin: 'Introduce el nombre de usuario para acceder al panel administrativo del antiguo hosting *',\n oldHostPassword: 'Introduce la contraseña para acceder al panel administrativo del antiguo hosting *',\n oldHostLinkAdmin: 'Link para acceder al panel administrativo del antiguo hosting *',\n oldHostAdminPanel: '¿Cuál es el panel administrativo del antiguo servidor? *',\n oldHostProEmail: '¿Cuál es el tipo de correo electrónico utilizado en el antiguo hosting? *',\n actualProEmail: '¿Seleccione el tipo de correo electrónico utilizado en su alojamiento actual con HostGator? *',\n aditionalInfo: 'Utiliza el siguiente campo para introducir cualquier información que consideres importante para la migración, como una observación específica',\n terms: 'Entiendo y estoy de acuerdo con los términos de la migración',\n payment: 'Confirmo que estoy de acuerdo con cualquier pago o tasa adicional, de no cumplir con las condiciones estipuladas en el término de migración',\n dontKnow: 'No sé',\n bodyProduct: selectedProduct => `Producto: ${selectedProduct.name} - Usuario: ${selectedProduct.username}`,\n solicitation: 'Migración Externa',\n bodyDomain: oldHostDomain => `Dominio registrado en el antiguo proveedor de hosting: ${oldHostDomain}`,\n bodyLogin: oldHostLogin => `Introduce el nombre de usuario para acceder al panel administrativo del antiguo proveedor: ${oldHostLogin}`,\n bodyPassword: oldHostPassword => `Introduce la contraseña para acceder al panel administrativo del antiguo proveedor: ${oldHostPassword}`,\n bodyLink: oldHostLinkAdmin => `Link para acceder al panel administrativo del antiguo proveedor: ${oldHostLinkAdmin}`,\n bodyPanel: oldHostAdminPanel => `¿Cuál es el panel administrativo del antiguo servidor?: ${oldHostAdminPanel}`,\n bodyOldEmail: oldHostProEmail => `¿Cuál es el tipo de correo electrónico utilizado en el antiguo hosting? ${oldHostProEmail}`,\n bodyNewEmail: actualProEmai => `¿Seleccione el tipo de correo electrónico utilizado en su alojamiento actual con HostGator? ${actualProEmai}`,\n bodyAditionalInfo: aditionalInfo => `Utiliza el siguiente campo para introducir cualquier información que consideres importante para la migración, como una observación específica: ${aditionalInfo}`,\n bodyTerms: terms => `Entiendo y estoy de acuerdo con los términos de la migración: ${terms ? 'Si' : 'No'}`,\n bodyPayment: payment => `Confirmo que estoy de acuerdo con cualquier pago o tasa adicional, de no cumplir con las condiciones estipuladas en el término de migración: ${payment ? 'Si' : 'No'}`,\n bodyProductId: selectedProduct => ` ID del producto: ${selectedProduct.id}`,\n subject: 'Soporte Técnico - Migración Externa',\n },\n financialDoubts: {\n title: 'Complete el siguiente formulario',\n info: (\n <>\n Si no encuentra la opción que desea en la lista de abajo, inicie un\n {' '}\n servicio de chat \n .\n \n ),\n descriptionLabel: '¿Cuál es tu duda para el área financiera?',\n addDocumentLabel: '¿Quieres adjuntar un archivo? ¡Envíanoslo!',\n addDocumentButton: 'Adjuntar documento',\n solicitation: 'Solicitación',\n product: 'Producto',\n productId: 'ID del producto',\n user: 'Usuario',\n subject: 'Soporte Financiero - Dudas Generales',\n tag: 'whmcs_form_dudas_financieras',\n },\n restorateCancelledPlan: {\n title: 'Complete el siguiente formulario!',\n subject: 'Soporte Técnico - Restauración de plan cancelado',\n terms: (\n <>\n {'Lea con atención los '}\n términos \n {' a continuación:'}\n \n ),\n termsItems: (\n <>\n \n ES OBLIGATORIO que ya haya contratado nuevamente el mismo plan con el mismo dominio para que la restauración sea realizada. \n {'Existe una cobranza por hora técnica para este procedimiento. '} \n Al término de la restauración será generada una cobranza en su cuenta.\n \n No nos responsabilizamos por el contenido restaurado, pues no tenemos control de versiones. \n Nuestra rutina de backups es semana e incluye cuentas de hasta 20GB de datos, que posean hasta 100 mil inodes (archivos, carpetas, e-mails, etc.). \n Todos los dominio bajo su usuario que tengamos backups serán restaurados intependientemente si ellos fueron removidos anteriormente. \n Si su sitio fue desarrollado con el Creador de sitios de HostGator, también debe solicitar que se restaure el editor utilizando el formulario Restauración de acceso al editor del Creador de Sitios. \n \n IMPORTANTE: \n \n Este formulario es para restauración de cuenta cancelada. \n Al solicitar la restauración recuperaremos todo el contenido del sitio, bases de datos e e-mails del último estado de su cuenta antes del cancelamiento, no siendo posible restaurar solamente el dominio principal o solamente dominios adicionales. \n \n \n ),\n mainDomainPlaceholder: 'Informe abajo el dominio principal del plan cancelado que desea restaurar',\n chargeAgreed: 'Confirmo que leí y concuerdo con los términos y con la cobranza',\n termsAgreed: 'Confirmo que leí y concuerdo con los términos de restauración de backup',\n bodyProduct: selectedProduct => `Producto: ${selectedProduct.name} - Usuário: ${selectedProduct.username}`,\n bodyServer: selectedProduct => `Servidor: ${selectedProduct.serverhostname || selectedProduct.dedicatedip}`,\n bodyRequest: subject => subject,\n bodyProductId: selectedProduct => `ID do producto: ${selectedProduct.id}`,\n bodyMainDomain: domain => `Informe abajo el dominio principal del plan cancelado que desea restaurar: ${domain}`,\n },\n restorateSiteBuilderAccess: {\n title: 'Complete el siguiente formulario!',\n subject: 'Soporte Técnico - Restauración de acceso al editor del Creador de Sitios',\n terms: (\n <>\n {'Lea con atención los '}\n términos \n {' a continuación:'}\n \n ),\n termsItems: (\n <>\n \n \n {'Solamente es posible recuperar la edición del creador de sitios Rápido. Su usabas el editor avanzado, '}\n \n \n {'Existe una cobranza por hora técnica '} \n para este procedimiento. Al término de la restauración será generada una cobranza en su cuenta.\n \n No nos responsabilizamos por el contenido restaurado, pues no tenemos control de versiones. \n \n IMPORTANTE: \n \n Este formulario es para restaurar el acceso al PANEL de edición del creador del sitio. Al solicitar esta restauración, no se restaurarán las bases de datos ni los correos electrónicos. \n La restauración del acceso al editor solo se realiza para el mismo tipo de plan al que fue activado. \n \n \n ),\n chargeAgreed: 'Confirmo que leí y concuerdo con los términos y con la cobranza',\n termsAgreed: 'Confirmo que leí y concuerdo con los términos de restauración de backup',\n bodyProduct: selectedProduct => `Producto: ${selectedProduct.name} - Usuario: ${selectedProduct.username}`,\n bodyRequest: subject => `Sujeto: ${subject}`,\n bodyProductId: selectedProduct => `ID del producto: ${selectedProduct.id}`,\n bodyAgreedCharge: bool => `Confirmo que leí y concuerdo con los términos y con la cobranza: ${bool ? 'Si' : 'No'}`,\n bodyAgreedTerms: bool => `Confirmo que leí y concuerdo con los términos de restauración de backup: ${bool ? 'Si' : 'No'}`,\n },\n affiliateProgram: {\n title: 'Complete el siguiente formulario!',\n subject: 'Preguntas exclusivamente sobre el Programa de Afiliados',\n info: (\n <>\n \n {'Lea con atención los '}\n términos \n {' a continuación:'}\n \n \n \n {'Este formulario es '}\n exclusivo \n {' para nuestro Programa de Afiliados. Atención de lunes a viernes con tiempo de respuesta entre 24/72 horas laborables.'}\n \n \n Si necesitas soporte técnico o financiero este formulario no es el apropiado. \n \n \n \n ),\n labelAffiliate: '¿Formas parte del Programa de Afiliados?',\n affiliateOptions: {\n yes: 'Sí',\n no: 'No, pero tengo dudas sobre el Programa',\n },\n labelDoubts: 'Ingrese su pregunta sobre el Programa de Afiliados',\n bodyProduct: 'Producto: Preguntas exclusivamente sobre el Programa de Afiliados',\n bodyRequest: 'Preguntas exclusivamente sobre el Programa de Afiliados',\n bodyIsAffiliate: answer => `¿Formas parte del Programa de Afiliados?: ${answer}`,\n bodyDoubts: content => `Ingrese su pregunta sobre el Programa de Afiliados: ${content}`,\n sendButtonLabel: 'Enviar',\n },\n upgradeVps: {\n title: 'Complete el siguiente formulario!',\n subject: 'Preguntas exclusivamente sobre el Programa de Afiliados',\n fields: {\n productLabel: 'Nuevo plan',\n agreedTermsLabel: 'Permitir el upgrade del plan seleccionado',\n },\n body: {\n product: selectedProduct => `Producto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuario: ${selectedProduct.username} - IP: ${selectedProduct.dedicatedip}`,\n request: 'Upgrade de un plan',\n newProduct: newProduct => `Nuevo plan: ${newProduct}`,\n agreedTerms: agreedTerms => `Permitir el upgrade del plan seleccionado: ${agreedTerms ? 'Sí' : 'No'}`,\n productId: selectedProduct => `ID del producto: ${selectedProduct.id}`,\n },\n sendButtonLabel: 'Enviar',\n },\n changeDueDate: {\n info: () => (\n <>\n Lea con atención las siguientes informaciones:
\n \n \n {'La nueva fecha debe ser '}\n de hasta 30 días a partir de la fecha del vencimiento actual \n {' del servicio;'}\n \n \n {'Cambiar la fecha de vencimiento '}\n puede generar un incremento en el valor de su próxima factura \n {' debido al reajuste de la fecha.'}\n \n \n \n ),\n desiredDueDate: '¿Cuál es la fecha de vencimiento deseada?',\n desiredDueDatePlaceHolder: 'mm/dd/aaaa',\n agreement: 'Confirmo que he leído y estoy de acuerdo con los términos anteriores.',\n send: 'Enviar',\n },\n upgradeCodeGuard: {\n info: (\n <>\n {'Si no encuentra la opción deseada en la lista de abajo, inicie un '}\n atendimiento por chat. \n \n ),\n placeholders: {\n newProduct: 'Nuevo Producto',\n agreed: ' Confirmo que he leído y estoy de acuerdo con la diferencia de valor entre los productos',\n agreedSelectedPlan: 'Confirmo que seleccione el plan correcto y soy consciente de que no habrá doble confirmación para realizar el upgrade/actualización.',\n },\n body: {\n product: selectedProduct => `Producto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuario: ${selectedProduct.username}`,\n request: 'Solicitación: Upgrade/actualización del Plan',\n newProduct: newProduct => `Nuevo Produto: ${newProduct}`,\n agreed: agreed => ` Confirmo que he leído y estoy de acuerdo con la diferencia de valor entre los productos: ${agreed ? 'Si' : 'No'}`,\n agreedSelectedPlan: agreedSelectedPlan => ` Confirmo que seleccione el plan correcto y soy consciente de que no habrá doble confirmación para realizar el upgrade/actualización: ${agreedSelectedPlan ? 'Si' : 'No'}`,\n productId: selectedProduct => `ID del producto: ${selectedProduct.id}`,\n },\n title: '¡Complete los datos de abajo!',\n send: 'Enviar',\n },\n upgradeSiteBuilder: {\n info: (\n <>\n {'Si no encuentra la opción deseada en la lista de abajo, inicie un '}\n atendimiento por chat. \n \n ),\n subject: 'Upgrade de un Plan - Creador de Sitios',\n placeholders: {\n professional: 'Creador de Sitios Profesional',\n tienda: 'Creador de Sitios Tienda en Línea',\n newPlan: 'Nuevo plan',\n agreed: 'Permitir el upgrade del plan seleccionado',\n },\n body: {\n product: selectedProduct => `Producto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuario: ${selectedProduct.username}`,\n request: 'Solicitación: Upgrade de un plan - Creador de Sitios',\n newProduct: newProduct => `Nuevo plan: ${newProduct}`,\n agreed: agreed => ` Permitir el upgrade del plan seleccionado: ${agreed ? 'Si' : 'No'}`,\n productId: selectedProduct => `ID del producto: ${selectedProduct.id}`,\n },\n title: '¡Complete los datos de abajo!',\n send: 'Enviar',\n },\n sslEV: {\n info: (\n <>\n {'Por favor, lea atentamente los siguientes términos '}\n \n La instalación del certificado solo se realiza para Personas Jurídicas (empresas registradas) y todos los datos aquí en HostGator deben corresponder a los de la empresa con el registro de su ciudad; \n La validación de datos es realizada por una empresa ajena a Hostgator que puede solicitar documentos y realizará llamadas telefónicas exclusivamente al número registrado en el cadastro de su empresa, con el fin de validar la existencia de la misma; \n Si desea utilizar un número de teléfono diferente al del registro de la empresa, debe registrarse en https://www.cialdnb.com/es/numero-d-u-n-s/ con el número de teléfono deseado (el registro gratuito tarda hasta 30 días para ser efectivado); \n En el campo a continuación, para completar la URL, asegúrese de informar la dirección correcta. No se puede volver a emitir el certificado para otro dominio; \n Este Certificado SSL EV tiene un costo por año; \n Las facturas de renovación se generarán automáticamente al final del ciclo, pero con cada pago deberá crear un ticket para volver a emitir el certificado SSL renovado; \n La instalación de este certificado solo es válida para los servidores de HostGator. \n \n atendimiento por chat. \n \n ),\n subject: 'Soporte Técnico - Certificado SSL EV',\n placeholders: {\n installUrl: 'URL para la instalación del SSL',\n installUrlInfo: 'SSL solo funcionará en la URL dada, que puede ser un dominio o subdominio. Por ejemplo, nombrededominio.com.br o loja.nombrededominio.com.br.',\n enterprisedocument: 'Documento de registro de la empresa',\n enterprisePhone: 'Número de teléfono del documento de la empresa',\n enterprisePhoneInfo: 'Es obligatorio que el número de teléfono informado se registre en el documento.',\n email: 'Cuenta de correo de dominio',\n emailInfo: 'Es obligatorio que la cuenta de correo electrónico informada sea del propio dominio.',\n agreed: `Confirmo que he leído y estoy de acuerdo con los términos anteriores y el cobro del Certificado SSL por ${formatCurrency(sslEvPricePerBrand[COUNTRY.toLowerCase()])}/año`,\n },\n body: {\n product: selectedProduct => `Producto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuario: ${selectedProduct.username}`,\n request: 'Solicitación: Certificado SSL EV',\n newProduct: newProduct => `Nuevo plan: ${newProduct}`,\n agreed: agreed => ` Confirmo que he leído y estoy de acuerdo con los términos anteriores y el cobro del Certificado SSL por ${formatCurrency(sslEvPricePerBrand[COUNTRY.toLowerCase()])} ${coinPerBrand[COUNTRY.toLowerCase()]}/año: ${agreed ? 'Si' : 'No'}`,\n productId: selectedProduct => `ID del producto: ${selectedProduct.id}`,\n },\n title: '¡Complete los datos de abajo!',\n send: 'Enviar',\n },\n privateSslCertificate: {\n title: '¡Complete los datos de abajo!',\n send: 'Enviar',\n info: (\n <>\n Importante: \n \n \n Para que el SSL solicitado sea generado, será adicionada una cuenta de correo electrónico "hostmaster@dominio". En algunos casos, solicitaremos la creación de esta cuenta. Si tienes alguna duda, entra en contacto con nuestro equipo a través de nuestros Canales de Atención.\n \n \n Este certificado no da derecho a la barra de direcciones verde de Comodo. En caso de que necesites un certificado SSL con esta caracterísitica, por favor llena la solicitud del Certificado SSL EV.\n \n \n En el campo URL para la instalación del SSL, asegúrate de informar el dominio correcto, ya que no es posible emitir el certificado nuevamente para otro dominio.\n \n \n El SSL funcionará unicamente para el dominio informado a continuación (por ejemplo: nombrededominio.com).\n \n \n El certificado SSL es válido únicamente para ser instalado en los servidores de HostGator.\n \n \n \n ),\n placeholders: {\n domain: 'URL para la instalación del SSL',\n domainInfo: 'El SSL funcionará únicamente en la URL informada, la cual puede ser un dominio o un subdominio. Por ejemplo, puedes usar nombredeldominio.com o tienda.nombredeldominio.com. ',\n agreed: `Si, estoy de acuerdo con el cobro del Certificado SSL por ${formatCurrency(privateSslPerBrand[COUNTRY.toLowerCase()])} ${coinPerBrand[COUNTRY.toLowerCase()]}}/año`,\n },\n subject: 'Soporte Técnico - Certificado SSL Privado',\n body: {\n product: selectedProduct => `Producto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuario: ${selectedProduct.username}`,\n request: 'Solicitación: Certificado SSL Privado',\n domain: domain => `URL para la instalación del SSL: ${domain}`,\n agreed: agreed => `Si, estoy de acuerdo con el cobro del Certificado SSL por ${formatCurrency(privateSslPerBrand[COUNTRY.toLowerCase()])} ${coinPerBrand[COUNTRY.toLowerCase()]}}/año: ${agreed ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do producto: ${selectedProduct.id}`,\n },\n },\n widlcardSslCertificate: {\n title: '¡Complete los datos de abajo!',\n send: 'Enviar',\n info: (\n <>\n Importante: \n \n \n Para que el SSL solicitado sea generado, será adicionada una cuenta de correo electrónico "hostmaster@dominio". En algunos casos, solicitaremos la creación de esta cuenta. Si tienes alguna duda, entra en contacto con nuestro equipo a través de nuestros Canales de Atención.\n \n \n Este certificado no da derecho a la barra de direcciones verde de Comodo. En caso de que necesites un certificado SSL con esta caracterísitica, por favor llena la solicitud del Certificado SSL EV.\n \n \n En el campo URL para la instalación del SSL, asegúrate de informar el dominio correcto, ya que no es posible emitir el certificado nuevamente para otro dominio.\n \n \n El SSL funcionará unicamente para el dominio informado a continuación (por ejemplo: nombrededominio.com).\n \n \n El certificado SSL es válido únicamente para ser instalado en los servidores de HostGator.\n \n \n \n ),\n placeholders: {\n domain: 'URL para la instalación del SSL',\n domainInfo: 'El SSL funcionará únicamente en la URL informada, la cual puede ser un dominio o un subdominio. Por ejemplo, puedes usar nombredeldominio.com o tienda.nombredeldominio.com. ',\n agreed: `Si, estoy de acuerdo con el cobro del Certificado SSL por ${formatCurrency(wildCardPerBrand[COUNTRY.toLowerCase()])} ${coinPerBrand[COUNTRY.toLowerCase()]}/año`,\n },\n subject: 'Soporte Técnico - Certificado SSL Wildcard',\n body: {\n product: selectedProduct => `Producto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuario: ${selectedProduct.username}`,\n request: 'Solicitación: Certificado SSL Wildcard',\n domain: domain => `URL para la instalación del SSL: ${domain}`,\n agreed: agreed => `Si, estoy de acuerdo con el cobro del Certificado SSL por ${formatCurrency(wildCardPerBrand[COUNTRY.toLowerCase()])} ${coinPerBrand[COUNTRY.toLowerCase()]}/año: ${agreed ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do producto: ${selectedProduct.id}`,\n },\n },\n changePaymentCycle: {\n info: (\n <>\n {'Si no encuentra la opción deseada en la lista de abajo, inicie un '}\n atendimiento por chat. \n \n ),\n placeholders: {\n newCycle: 'Seleccione el nuevo ciclo que desea',\n agreed: 'Confirmo el cambio de ciclo de pago para el servicio seleccionado',\n generalComment: 'Comentario adicional',\n },\n body: {\n product: selectedProduct => `Producto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuario: ${selectedProduct.username}`,\n request: 'Cambiar Ciclo de Pago',\n newCycle: newCycle => `Seleccione el nuevo ciclo que desea: ${newCycle}`,\n agreed: agreed => `Confirmo el cambio de ciclo de pago para el servicio seleccionado: ${agreed ? 'Sí' : 'No'}`,\n generalComment: comment => `Comentario general: ${comment}`,\n productId: selectedProduct => `ID del producto: ${selectedProduct.id}`,\n },\n title: '¡Complete los datos de abajo!',\n send: 'Enviar',\n subject: 'Soporte Financiero - Cambiar Ciclo de Pago',\n },\n reloadRebuild: {\n title: '¡Complete los datos de abajo!',\n info: (\n <>\n Lea con atención los términos a continuación: \n \n \n No realizaremos backup de su servidor. \n \n \n Caso usted desee que restauremos su backup, luego del procedimiento, deberá subir todos los archivos para un mismo directorio en hasta 48 horas. \n \n \n No nos responsabilizamos por el contenido restaurado, pues no tenemos control sobre el backup disponibilizado. \n \n \n {'Importante: '} \n \n \n Este formulario es para solicitudes de Reload/Rebuild. Al solicitar el procedimiento todo el contenido del servidor será removido sin posibilidad de restauración. \n \n \n {'Atención: '} \n \n \n El procedimiento será realizado en el servidor con este IP. No habrá doble confirmación \n \n \n Al seleccionar una imagen linux sin cPanel, el servidor solo se entrega con SSH configurado. Cualquier configuración adicional es responsabilidad del cliente. \n \n \n Si tu servidor contratado es Windows, solo puedes elegir una imagen Windows, si tu servidor contratado es Linux, solo puedes elegir una imagen Linux. Para cambiar el Sistema Operativo en estos casos, deberá solicitar la baja y realizar una nueva contratación. \n \n \n \n ),\n placeholders: {\n image: 'Cual es la imagen deseada?',\n canExecuteInComercialHours: 'Podemos hacerlo en horario comercial',\n agreedBrasiliaHours: '08:00 as 18:00',\n agreedRebuildReloadTerms: 'Confirmo que he leído y estoy de acuerdo con los Términos de Reload/Rebuild',\n agreedValue: 'Confirmo que he leído y estoy de acuerdo con los términos antes descritos y con la cobranza del valor de Hora Técnica en caso se encaje en los escenarios descritos en los términos',\n agreedResponsability: 'Confirmo que he leído y estoy de acuerdo en que es mi responsabilidad hacer backups para posterior restauración',\n linuxWithCpanel: 'Imágenes Linux con cPanel',\n linuxWithoutCpanel: 'Imágenes Linux sin cPanel',\n windowsWithPleskWithoutLicense: 'Imágenes Windows con Plesk (no incluida la licencia, debe ser contratada directamente con ellos)',\n windowsWithPleskWithLicense: 'Imágenes Windows con Plesk (incluida la licencia)',\n yes: 'Si',\n no: 'No',\n },\n subject: 'Soporte Técnico - Solicitud de Reload/Rebuild',\n body: {\n product: selectedProduct => `Produto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username}`,\n request: 'Solicitación: Reload/Rebuild',\n image: image => `Cual es la imagen deseada? ${image}`,\n canExecuteInComercialHours: bool => `Podemos hacerlo en horario comercial? ${bool ? 'Si' : 'No'}`,\n agreedBrasiliaHours: bool => `08:00 as 18:00? ${bool ? 'Si' : 'No'}`,\n agreedRebuildReloadTerms: bool => `Confirmo que he leído y estoy de acuerdo con los Términos de Rebuild/Reload? ${bool ? 'Sí' : 'No'}`,\n agreedValue: bool => `Confirmo que he leído y estoy de acuerdo con los términos anteriores y con el cargo de $250,00 si se ajusta a los escenarios descritos en los términos? ${bool ? 'Sí' : 'No'}`,\n agreedResponsability: bool => `Confirmo que he leído y soy consciente de que es mi responsabilidad realizar copias de seguridad para su posterior restauración? ${bool ? 'Sí' : 'No'}`,\n productId: selectedProduct => `ID del producto: ${selectedProduct.id}`,\n },\n send: 'Enviar',\n },\n moreEmails: {\n title: '¡Complete los datos de abajo!',\n info: (\n <>\n Lea cuidadosamente los siguientes términos: \n \n \n {'La limitación es para la seguridad de su servidor y '}\n \n aumentarla puede aumentar el riesgo de que sus Ips sean bloqueados por los principales proveedores de correo electrónico\n \n \n \n {'Como se puede ver en los puntos '}\n \n {' es su responsabilidad eliminar las direcciones IP de las listas de bloqueo, monitorear los envíos de correo electrónico y las colas'}\n \n \n \n No somos responsables por la IP del servidor o por si su dominio está bloqueado por proveedores de correo electrónico debido a su uso, como por ejemplo el envío de correo electrónico de marketing.\n \n \n \n {'IMPORTANTE: '} \n El valor que usted ha informado puede ser aplicado o no. El límite se definirá en función del historial de uso del servidor.\n \n \n ),\n placeholders: {\n serverIp: '¿Cuál es la IP del servidor?',\n motivation: '¿Por qué desea aumentar el límite de 500 correos electrónicos por hora?',\n newLimit: '¿Cuál es el límite de correos electrónicos por hora que cree que es apropiado para su uso?',\n agreedService: 'Confirmo que he leído y acepto los Términos de servicio',\n agreedPolicy: 'Confirmo que he leído y acepto la Política de correo electrónico',\n agreedResponsability: 'Confirmo que soy consciente de que es mi responsabilidad eliminar las direcciones IP de las listas negras, monitorear los correos y las colas de correo electrónico',\n },\n subject: 'Soporte Técnico - Aumento del envío de correos',\n body: {\n product: selectedProduct => `Producto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuario: ${selectedProduct.username}`,\n request: 'Solicitación: Aumento del envío de correos',\n serverIp: serverIp => `¿Cuál es la IP del servidor?: ${serverIp}`,\n motivation: motivation => `¿Por qué desea aumentar el límite de 500 correos electrónicos por hora?: ${motivation}`,\n newLimit: newLimit => `¿Cuál es el límite de correos electrónicos por hora que cree que es apropiado para su uso?: ${newLimit}`,\n agreedService: agreed => `Confirmo que he leído y acepto los Términos de servicio: ${agreed ? 'Si' : 'No'}`,\n agreedPolicy: agreed => `Confirmo que he leído y acepto la Política de correo electrónico: ${agreed ? 'Si' : 'No'}`,\n agreedResponsability: agreed => `Confirmo que soy consciente de que es mi responsabilidad eliminar las direcciones IP de las listas negras, monitorear los correos y las colas de correo electrónico: ${agreed ? 'Si' : 'No'}`,\n productId: selectedProduct => `ID del producto: ${selectedProduct.id}`,\n },\n send: 'Enviar',\n },\n migrateAccountVpsDedicated: {\n title: '¡Complete los datos de abajo!',\n info: (\n <>\n Lea cuidadosamente los siguientes términos: \n \n \n Las versiones PHP 5.2 y 5.3 fueron descontinuadas en nuestra estructura para evitar vulnerabilidades. Pedimos que tus sitio web estén debidamente actualizados de acuerdo a la versión PHP 5.6 (o superior) para que no ocurran problemas durante la migración.\n \n \n \n {'Importante: '} \n \n \n \n {'Antes de completar este formulario, por favor lee los '}\n \n NO CANCELES tu antiguo plan hasta que los archivos se hayan migrado, los hayas probado y los DNS se hayan cambiado correctamente. \n \n \n ),\n placeholders: {\n ipOrDomain: 'Dirección IP o nombre de dominio de la cuenta de hosting anterior',\n user: 'Introduce el nombre de usuario para acceder al panel administrativo del antiguo proveedor',\n password: 'Introduce la contraseña para acceder al panel administrativo del antiguo proveedor',\n detailedList: 'Por favor propociónanos una lista completa de las cuentas que deseas migrar, con todos los detalles necesarios, tales como nombre de usuario, contraseña y panel de control que estaba utilizando',\n agreed: 'Entiendo y estoy de acuerdo con los términos de la migración',\n },\n subject: 'Soporte Técnico - Migración de Cuenta de VPS/Dedicado',\n body: {\n product: selectedProduct => `Produto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username}`,\n request: 'Solicitaión: Migración de Cuenta de VPS/Dedicado',\n ipOrDomain: ipOrDomain => `Dirección IP o nombre de dominio de la cuenta de hosting anterior: ${ipOrDomain}`,\n user: user => `Introduce el nombre de usuario para acceder al panel administrativo del antiguo proveedor: ${user}`,\n password: password => `Introduce la contraseña para acceder al panel administrativo del antiguo proveedor: ${password}`,\n detailedList: detailedList => `Por favor propociónanos una lista completa de las cuentas que deseas migrar, con todos los detalles necesarios, tales como nombre de usuario, contraseña y panel de control que estaba utilizando: ${detailedList}`,\n agreed: agreed => `Entiendo y estoy de acuerdo con los términos de la migración: ${agreed ? 'Si' : 'No'}`,\n productId: selectedProduct => `ID del producto: ${selectedProduct.id}`,\n },\n send: 'Enviar',\n },\n updateWhmcsLicense: {\n title: '¡Complete los datos de abajo!',\n info: (\n <>\n Lea cuidadosamente los siguientes términos: \n \n \n \n Este es un formulario de actualización de licencia, no un formulario de adquisición.\n \n {' Para la contratación, consulte el material de '}\n \n \n La licencia gratuita esta disponible solo para los planes de hospedajes Reseller y Dedicados.\n \n \n La licencia gratuita esta limitada a 249 cuentas registradas en WHMCS.\n \n \n Los planos de hospedaje Reseller y Dedicados incluyen solo una licencia gratuita de WHMCS.\n \n \n La licencia WHMCS ofrecida por HostGator solo es valida si WHMCS esta instalado en la cuetna de HostGator.\n \n \n IMPORTANTE: \n \n \n HostGator no se responsabiliza por la instalación y configuración de WHMCS. En el caso de que se requiera, existe un pago adicional por el servicio.\n \n \n No damos soporte sobre la plataforma de WHMCS, solo instalamos y/o actualizamos las lincencias.\n \n \n Deberá acceder al panel de control de administración al menos 1 (una vez) al mes para mantener su licencia activa.\n \n \n \n ),\n placeholders: {\n domain: 'Dominio que activó WHMCS',\n domainInfo: 'Informar el nuevo dominio. Si no debe cambiarse, solo informe al dominio actual.',\n license: 'Licencia WHMCS',\n directory: 'Directorio donde está instalado WHMCS',\n directoryInfo: 'Informar al nuevo directorio. Si no debe cambiarse, solo informe al directorio actual.',\n accessLink: 'Enlace de acceso al panel de administración de WHMCSLink de acesso ao painel admin do WHMCS',\n serverIp: 'Dirección IP del servidor',\n serverIpInfo: (\n <>\n {'Déjelo en blanco si no conoce la IP o consígalo a través del panel de WHMCS '}\n \n {'Antes de continuar, verifique si hay algun material de apoyo en nuestra Central de Ayuda que pueda ayudarte, de esta forma ahorras tiempo y no necesitarias esperar en fila para ser atendido :) '}\n \n \n \n \n \n \n \n \n \n Lea con atencion los terminos a seguir: \n \n \n La licencia gratuita esta disponible solo para los planes de hospedajes Reseller y Dedicados\n \n \n Los planos de hospedaje Reseller y Dedicados incluyen solo una licencia gratuita de WHMCS.\n \n \n Os planos de Revenda de hospedagem e Dedicado incluem uma única licença gratuita do WHMCS.\n \n \n La licencia WHMCS ofrecida por HostGator solo es valida si WHMCS esta instalado en la cuetna de HostGator.\n \n \n IMPORTANTE: \n \n \n HostGator no se responsabiliza por la instalación y configuración de WHMCS. En el caso de que se requiera, existe un pago adicional por el servicio.\n \n \n No damos soporte sobre la plataforma de WHMCS, solo instalamos y/o actualizamos las lincencias.\n \n \n \n ),\n placeholders: {\n domain: 'Informe el dominio a ser utilizado en la solicitud',\n email: 'Informe el email a ser utilizado en la solicitud',\n problem: 'Describa su problema y mencione cual es el mensaje de error (caso exista)',\n directory: 'Informe el email a ser utilizado en la solicitud',\n print: 'Tienes algun print o foto del error o del problema? Envianosla!',\n addDocumentButton: 'Adjuntar documento',\n agreed: 'Confirmo que lei y estoy de acuerdo con los teminos y condiciones informados.',\n },\n subject: 'Soporte Técnico - Adquisición de la Licencia de WHMCS (ES)',\n body: {\n product: selectedProduct => `Producto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username}`,\n request: 'Solicitaión: Adquisición de la Licencia de WHMCS (ES)',\n agreed: ({ text, bool }) => `${text}: ${bool ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do producto: ${selectedProduct.id}`,\n },\n send: 'Enviar',\n },\n migrateReseller: {\n title: '¡Complete los datos de abajo!',\n info: (\n <>\n Lea atentamente los siguientes términos: \n \n \n Las versiones PHP 5.2 y 5.3 fueron descontinuadas en nuestra estructura para evitar vulnerabilidades. Pedimos que tus sitio web estén debidamente actualizados de acuerdo a la versión PHP 5.6 (o superior) para que no ocurran problemas durante la migración.\n \n \n \n IMPORTANTE: \n \n \n {'Antes de completar este formulario, por favor lee los '}\n \n \n NO CANCELES tu antiguo plan hasta que los archivos se hayan migrado, los hayas probado y los DNS se hayan cambiado correctamente.\n \n \n \n \n ),\n subject: 'Soporte Técnico - Migración de Cuentas de Revendedor',\n placeholders: {\n domain: 'Dominio registrado en el antiguo proveedor de hosting',\n panel: '¿Cuál es el panel administrativo del servidor antiguo?',\n user: 'Introduce el nombre de usuario para acceder al panel administrativo del antiguo proveedor',\n password: 'Introduce la contraseña para acceder al panel administrativo del antiguo proveedor',\n other: 'Otro',\n dontKnow: 'No sé',\n link: 'Link para acceder al panel administrativo del antiguo proveedor',\n migrateAll: 'Selecciona esta opción únicamente si deseas migrar TODOS los campos existentes en el WHM/Plesk del antiguo servidor para el nuevo plan en HostGator',\n multipleDomainsLabel: 'Si no seleccionas la casilla, introduce en el cuadro de texto a continuación un máximo de 30 dominios para que sean migrados de forma gratuita, manteniendo un dominio por línea, como se muestra',\n multipleDomainsPlaceHolder: 'Ejemplo:\\ndominio1.com\\ndominio2.com\\ndominio3.com',\n agreed: 'Entiendo y estoy de acuerdo con los términos de la migración',\n },\n body: {\n product: selectedProduct => `Producto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuario: ${selectedProduct.username}`,\n request: 'Solicitaión: Migración de Cuentas de Revendedor',\n agreed: ({ text, bool }) => `${text}: ${bool ? 'Sí' : 'No'}`,\n productId: selectedProduct => `ID del producto: ${selectedProduct.id}`,\n },\n send: 'Enviar',\n },\n commonForm: {\n info: 'Describa su problema en detalle para que nuestros asistentes puedan atenderle mejor.',\n selectProduct: 'Seleccione el producto en el que necesita soporte',\n alert: email => (\n <>\n Cuanto más detalles usted proporcione, más rápida y precisa será nuestra respuesta. Todo el atendimiento será hecho por el ticket y usted recibirá actualizaciones en el email\n {' '}\n \n {email}\n \n . No es necesario entrar en el chat.\n \n ),\n domainRelated: 'Dominio relacionado con el problema',\n describe: 'Describa su problema*',\n required: 'Los campos marcados con * son obligatorios',\n screenShot: (\n <>\n Envíe captura de pantalla (print) \n {' '}\n que pueda ayudarnos a entender lo que está sucediendo (opcional):\n \n ),\n sendFile: 'Enviar archivo',\n fileInputExtensions: extensions => `Envía una imagen de hasta 5 MB en los formatos: ${extensions}.`,\n checkbox: brand => (\n \n He leído y estoy de acuerdo con las\n {' '}\n \n Políticas de Soporte\n \n
\n ),\n review: 'Revisé los datos informados y describí mi problema en detalle',\n submitLabel: 'Enviar solicitud',\n selectProductPlaceholder: 'Seleccione un producto',\n category: 'Categoría',\n product: 'Producto',\n description: 'Descripción',\n },\n successModal: {\n title: '¡Recibimos su ticket!',\n description: (\n <>\n Este atento al plazo de respuesta. \n \n {'En hasta '}\n 24 horas hábiles \n {' (De lunes a viernes) recibirá una respuesta de nuestro equipo de soporte.'}\n \n \n ),\n closeLabel: 'Volver para el soporte',\n },\n names: {\n internalMigration: 'Migración Interna (Entre cuentas HostGator)',\n restorateBackupHgRoutine: 'Restauración de Backup (Rutina HostGator)',\n userBackupRestore: 'Restauración de Backup (archivo fornecido por el cliente)',\n generateBackup: 'Generar Backup',\n withoutEmailAccess: 'No tengo acceso al correo electrónico registrado',\n changePrimaryDomain: 'Alteración de Dominio Primario',\n googleAdwordsCoupon: 'Cupón de Google AdWords (ES)',\n externalMigration: 'Migración externa (Otros proveedores)',\n installExternalSsl: 'Instalación del SSL de otra empresa',\n financialDoubts: 'Dudas Financieras Generales',\n restorateCancelledPlan: 'Restauración de plan cancelado',\n restorateSiteBuilderAccess: 'Restauración de acceso al editor del Creador de Sitios',\n affiliateProgram: 'Preguntas exclusivamente sobre el Programa de Afiliados',\n upgradeVps: 'Upgrade de un plan',\n upgradeCodeGuard: 'Upgrade de un plan - CodeGuard',\n upgradeSiteBuilder: 'Upgrade de un plan - SiteBuilder',\n ChangePaymentcycle: 'Cambiar Ciclo de Pago',\n changeDueDate: 'Cambiar Fecha de Vencimiento',\n privateSslCertificate: 'Certificado SSL Privado',\n widlcardSslCertificate: 'Certificado SSL Wildcard',\n reloadRebuild: 'Solicitud de rebuild/reload',\n moreEmails: 'Aumento del envío de correos',\n migrateAccountVpsDedicated: 'Migración de Cuenta de VPS/Dedicado',\n updateWhmcsLicense: 'Actualización de licencia WHMCS',\n whmcsAcquisition: 'Adquisición de la Licencia de WHMCS',\n migrateReseller: 'Migración de Cuentas de Revendedor',\n financial: 'Financiero',\n hosting: 'Hospedaje',\n domain: 'Dominio',\n email: 'Correo electrónico',\n siteOffline: 'Sitio fuera de línea',\n other: 'No encontré lo que buscaba',\n sslEV: 'Certificado SSL EV',\n },\n },\n history: {\n attachFile: 'Adjuntar archivo',\n draggableTitle: 'Seleccione un archivo de su dispositivo o arrastre y suelte el archivo en esta área.',\n findFile: 'Buscar archivo',\n placeHolder: 'Envía un mensaje',\n send: 'Enviar',\n status: {\n closed: 'Finalizado',\n solved: 'Completado',\n new: 'Abierto',\n open: 'Pendiente',\n opened: 'Pendiente',\n pending: 'Esperando respuesta',\n emptyLabel: 'No se pudo cargar la información del ticket',\n emptyCta: 'Ir a la lista de tickets',\n },\n ticketDate: ({ comment }) => {\n const isToday = isSameDay(new Date(comment.created_at), new Date());\n if (isToday) {\n return format(new Date(comment.created_at), 'H:mm aa');\n }\n\n return `${format(new Date(comment.created_at), 'EEEE, dd/MM/yyyy', {\n locale: es,\n })} a las ${format(new Date(comment.created_at), 'H:mm aa', {\n locale: es,\n })}`;\n },\n endMessage: 'En el caso de que no sea así, En 7 días se finalizará automáticamente.',\n replyCta: 'Responder al ticket',\n closeTicketCta: 'Finalizar ticket',\n feedback: {\n title: '¿Qué te pareció el servicio?',\n good: '¡Muy bueno!',\n bad: '¡No me ayudó!',\n send: 'Enviar evaluación',\n },\n },\n underMaintenance: (\n <>\n Estamos en mantenimiento\n 24 horas hábiles \n {' '}\n (De lunes a viernes).\n \n ),\n automated: {\n alterar_dominio_primario: {\n title: 'Dominio cambiado con éxito',\n description: 'Para que su nuevo dominio sea accesible, es necesario configurarlo',\n cta: 'Ir a la página de Dominios',\n },\n },\n backToSupport: 'Volver a la pantalla de Soporte',\n};\n","import React from 'react';\nimport esContent from './ticket.es';\nimport { Link } from 'gatorcomponents';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\n\nexport default {\n ...esContent,\n forms: {\n ...esContent.forms,\n internalMigration: {\n ...esContent.forms.internalMigration,\n links: {\n ...esContent.forms.internalMigration.links,\n migration: () => (\n <>\n {'Lea nuestros '}\n he leído y acepto \n {' los '}\n he leído y acepto \n {' los '}\n Importante: \n \n \n Para que el SSL solicitado sea generado, será adicionada una cuenta de correo electrónico "hostmaster@dominio". En algunos casos, solicitaremos la creación de esta cuenta. Si tienes alguna duda, entra en contacto con nuestro equipo a través de nuestros Canales de Atención.\n \n \n Este certificado no da derecho a la barra de direcciones verde de Comodo. En caso de que necesites un certificado SSL con esta caracterísitica, por favor llena la solicitud del Certificado SSL EV.\n \n \n En el campo URL para la instalación del SSL, asegúrate de informar el dominio correcto, ya que no es posible emitir el certificado nuevamente para otro dominio.\n \n \n El SSL funcionará unicamente para el dominio informado a continuación (por ejemplo: nombrededominio.com).\n \n \n El certificado SSL es válido únicamente para ser instalado en los servidores de HostGator.\n \n \n \n ),\n placeholders: {\n domain: 'URL para la instalación del SSL',\n domainInfo: 'El SSL funcionará únicamente en la URL informada, la cual puede ser un dominio o un subdominio. Por ejemplo, puedes usar nombredeldominio.com o tienda.nombredeldominio.com. ',\n agreed: `Si, estoy de acuerdo con el cobro del Certificado SSL por ${formatCurrency(48000.00)} COP/año`,\n },\n subject: 'Soporte Técnico - Certificado SSL Privado',\n body: {\n product: selectedProduct => `Producto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuario: ${selectedProduct.username}`,\n request: 'Solicitación: Certificado SSL Privado',\n domain: domain => `URL para la instalación del SSL: ${domain}`,\n agreed: agreed => `Si, estoy de acuerdo con el cobro del Certificado SSL por ${formatCurrency(48000.00)} COP/año: ${agreed ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do producto: ${selectedProduct.id}`,\n },\n },\n widlcardSslCertificate: {\n ...esContent.forms.widlcardSslCertificate,\n placeholders: {\n domain: 'URL para la instalación del SSL',\n domainInfo: 'El SSL funcionará únicamente en la URL informada, la cual puede ser un dominio o un subdominio. Por ejemplo, puedes usar nombredeldominio.com o tienda.nombredeldominio.com. ',\n agreed: `Si, estoy de acuerdo con el cobro del Certificado SSL por ${formatCurrency(230400.00)} COP/año`,\n },\n body: {\n product: selectedProduct => `Producto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuario: ${selectedProduct.username}`,\n request: 'Solicitación: Certificado SSL Wildcard',\n domain: domain => `URL para la instalación del SSL: ${domain}`,\n agreed: agreed => `Si, estoy de acuerdo con el cobro del Certificado SSL por ${formatCurrency(230400.00)} COP/año: ${agreed ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do producto: ${selectedProduct.id}`,\n },\n },\n },\n};\n","import React from 'react';\nimport esContent from './ticket.es';\nimport { Link } from 'gatorcomponents';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\n\nexport default {\n ...esContent,\n forms: {\n ...esContent.forms,\n internalMigration: {\n ...esContent.forms.internalMigration,\n links: {\n ...esContent.forms.internalMigration.links,\n migration: () => (\n <>\n {'Lea nuestros '}\n he leído y acepto \n {' los '}\n Importante: \n \n \n Para que el SSL solicitado sea generado, será adicionada una cuenta de correo electrónico "hostmaster@dominio". En algunos casos, solicitaremos la creación de esta cuenta. Si tienes alguna duda, entra en contacto con nuestro equipo a través de nuestros Canales de Atención.\n \n \n Este certificado no da derecho a la barra de direcciones verde de Comodo. En caso de que necesites un certificado SSL con esta caracterísitica, por favor llena la solicitud del Certificado SSL EV.\n \n \n En el campo URL para la instalación del SSL, asegúrate de informar el dominio correcto, ya que no es posible emitir el certificado nuevamente para otro dominio.\n \n \n El SSL funcionará unicamente para el dominio informado a continuación (por ejemplo: nombrededominio.com).\n \n \n El certificado SSL es válido únicamente para ser instalado en los servidores de HostGator.\n \n \n \n ),\n placeholders: {\n domain: 'URL para la instalación del SSL',\n domainInfo: 'El SSL funcionará únicamente en la URL informada, la cual puede ser un dominio o un subdominio. Por ejemplo, puedes usar nombredeldominio.com o tienda.nombredeldominio.com. ',\n agreed: `Si, estoy de acuerdo con el cobro del Certificado SSL por ${formatCurrency(516.00)} MXN/año`,\n },\n subject: 'Soporte Técnico - Certificado SSL Privado',\n body: {\n product: selectedProduct => `Producto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuario: ${selectedProduct.username}`,\n request: 'Solicitación: Certificado SSL Privado',\n domain: domain => `URL para la instalación del SSL: ${domain}`,\n agreed: agreed => `Si, estoy de acuerdo con el cobro del Certificado SSL por ${formatCurrency(516.00)} MXN/año: ${agreed ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do producto: ${selectedProduct.id}`,\n },\n },\n widlcardSslCertificate: {\n ...esContent.forms.widlcardSslCertificate,\n placeholders: {\n domain: 'URL para la instalación del SSL',\n domainInfo: 'El SSL funcionará únicamente en la URL informada, la cual puede ser un dominio o un subdominio. Por ejemplo, puedes usar nombredeldominio.com o tienda.nombredeldominio.com. ',\n agreed: `Si, estoy de acuerdo con el cobro del Certificado SSL por ${formatCurrency(2892.00)} MXN/año`,\n },\n body: {\n product: selectedProduct => `Producto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuario: ${selectedProduct.username}`,\n request: 'Solicitación: Certificado SSL Wildcard',\n domain: domain => `URL para la instalación del SSL: ${domain}`,\n agreed: agreed => `Si, estoy de acuerdo con el cobro del Certificado SSL por ${formatCurrency(2892.00)} MXN/año: ${agreed ? 'Sim' : 'Não'}`,\n productId: selectedProduct => `ID do producto: ${selectedProduct.id}`,\n },\n },\n },\n};\n","import ticketBR from './ticket.br';\nimport ticketCL from './ticket.cl';\nimport ticketCO from './ticket.co';\nimport ticketMX from './ticket.mx';\nimport ticketES from './ticket.es';\n\nconst locales = {\n BR: ticketBR,\n CL: ticketCL,\n CO: ticketCO,\n MX: ticketMX,\n ES: ticketES,\n};\n\nexport default locales;\n","import { Button, Link } from 'gatorcomponents';\nimport React from 'react';\n\nexport default {\n tabs: {\n labels: {\n general: 'Visão Geral',\n create: 'Fazer Backup',\n restore: 'Restaurar Backup',\n log: 'Últimos Backups',\n cpanel: 'Backup pelo cPanel',\n },\n create: {\n title: 'Fazer backup',\n description: 'Baixe a cópia do diretório inicial de arquivos da sua hospedagem.',\n alertTitle: 'Informações sobre o backup',\n alertDescription: (\n <>\n Esse backup irá baixar no seu computador\n {' '}\n somente os arquivos do diretório principal do seu site \n {' '}\n (não inclui banco de dados e e-mails).\n Lembre-se \n : cada backup completo possui limite de 10GB.\n \n {'Esse backup irá baixar no seu computador somente '}\n os arquivos do diretório principal da sua hospedagem \n {' (não inclui banco de dados e e-mails).'}\n
\n\n Não feche seu navegador até a conclusão do download do arquivo.
\n\n \n {'Se você precisa de um backup completo, incluindo todos os arquivos, bancos de dados e e-mails, '}\n
\n \n ),\n proceedAlertDescription: (\n <>\n Ao prosseguir, o backup dos seus arquivos\n {' '}\n será baixado no seu computador \n . Aguarde a conclusão e, se quiser restaurar, faça upload dos arquivos na aba “Restaurar Backup”.\n \n ),\n backupLabel: 'Baixar backup',\n backupError: {\n title: 'Erro ao fazer backup',\n description: 'Tivemos um problema ao gerar seu backup. Aguarde alguns instantes tente novamente.',\n },\n backupSuccess: {\n title: 'Backup gerado',\n description: 'Seu backup foi gerado e o arquivo está sendo baixado pelo seu navegador. Confira o arquivo nos downloads do seu computador e não gere um backup novamente até a conclusão.',\n },\n },\n restore: {\n title: 'Restaurar backup - Diretório Inicial ou Banco de Dados',\n description: 'Confira como restaurar um backup.',\n alertTitle: 'Saiba como restaurar',\n alertDescription: (\n <>\n Para restaurar um backup a partir do arquivo que você baixou anteriormente (Diretório Inicial ou Banco de Dados), siga estes passos:
\n\n \n
\n Localize o arquivo de backup no seu computador. \n \n Faça o upload do arquivo utilizando a opção\n {' “Restaurar” '} \n ,no cPanel.\n \n Aguarde até que todos os arquivos sejam transferidos. \n A restauração estará completa. \n \n \n\n \n {'Atenção: o arquivo precisa ter extensão '}\n “.tar” \n {' ou '}\n “.tar.gz” \n {'. O tamanho máximo do arquivo a ser enviado deve ser de '}\n 500MB para Diretório Inicial e 50MB para Banco de Dados. \n
\n\n \n {'Para mais instruções, confira o material de apoio '}\n
\n\n \n {'Caso o arquivo seja maior que o informado, recomendamos '}\n
\n \n ),\n agreement: (\n <>\n Atenção: \n {date} \n {' '}\n \n {`às ${hour}h`}\n \n . Confira os detalhes abaixo:\n \n ),\n noBackupDescription: 'Você não tem um backup recente. Confira os detalhes abaixo:',\n centralQuestions: () => (\n <>\n {'Veja as '}\n principais dúvidas e respostas \n {' aqui:'}\n \n ),\n status: {\n completed: 'REALIZADO',\n attention: 'ATENÇÃO',\n error: 'ERRO',\n inProgress: 'EM ANDAMENTO',\n completedAlert: date => (\n <>\n {'Seu último backup '}\n \n foi feito com sucesso em\n {' '}\n {date}\n \n . Isso significa que seu backup está atualizado! :)\n \n ),\n noBackupAlert: handleClick => (\n <>\n Você não tem backup desse plano.\n handleClick()} label=\"Faça um backup agora\" />\n {' '}\n para não perder os seus dados \n .\n \n ),\n oldBackupAlert: (handleClick, days) => (\n <>\n {`Seu último backup foi realizado há mais de ${days} dias. `}\n handleClick()} label=\"Atualize seu backup agora\" />\n para não perder os seus dados \n .\n \n ),\n errorBackupAlert: handleClick => (\n <>\n {'Tivemos um problema ao realizar seu backup. Espere alguns instantes e '}\n handleClick()} label=\"clique aqui para tentar novamente\" />\n {'. '}\n \n ),\n inProgressBackupAlert: 'Seu backup está em andamento. Aguarde alguns instantes para ele estar completo.',\n },\n firstStep: {\n title: 'Primeiros passos - Backup',\n description: 'Realize backups e restaurações do seu site com facilidade, seguindo nosso passo a passo simplificado.',\n label: 'Iniciar Restauração',\n labelWithGeneration: 'Iniciar Backup/Restauração',\n },\n faq: {\n faqTitle: (\n <>\n {'Veja as '}\n principais dúvidas e respostas \n {' aqui:'}\n \n ),\n backupTypesAccordion: {\n title: 'Quais são os tipos de backup?',\n content: {\n description: 'Tem várias opções de backup que você pode fazer para ter uma cópia de segurança dos dados que você deseja. Dependendo do tipo do backup executado vai obter resultados distintos. Veja abaixo quais são:',\n fullBackup: (\n <>\n Backup Completo: \n {` Faz uma cópia de tudo o que estiver atrelado a sua conta de hospedagem. Isso inclui arquivos e pastas dos diretórios, como e-mails do webmail (cPanel) e banco de dados de todos os sites existentes em sua conta de hospedagem (diretório principal, domínios adicionais e subdomínios).\n Contas de e-mail Titan não entram no backup completo, você terá que `}\n Backup do Diretório principal (backup parcial): \n {` Faz a cópia somente dos arquivos do domínio principal ou raiz.\n O diretório raiz é onde os arquivos de seu domínio principal do site estão armazenados, geralmente é a pasta “public_html” - Exceto quando o site foi instalado em outra pasta, é um subdomínio ou um domínio adicional, não inclui banco de dados e nem e-mails.`}\n \n ),\n emailsBackup: (\n <>\n Backup dos e-mails: \n {` Faz uma cópia das informações armazenadas nas contas de e-mail webmail (cPanel) de cada domínio.\n Caso tenha uma conta de e-mail Titan não realizamos o backup, para isso, veja como `}\n Backup do banco de dados: \n {' Faz a cópia de todas as tabelas que armazena os dados de um site, envolve a exportação de todas essas tabelas (geralmente em formato SQL).'}\n \n ),\n },\n },\n createBackupAccordion: {\n title: 'Como fazer um backup?',\n content: {\n description: 'Existem duas formas de fazer um backup:',\n byCpanel: (\n <>\n Backup avançado pelo cPanel: \n {' Este backup permite o download separadamente dos arquivos e pastas, banco de dados e dos e-mails desde que seja webmail (cPanel).'}\n \n ),\n byPortal: (\n <>\n Backup pelo Portal do Cliente: \n {' backup somente dos arquivos do diretório principal (domínio principal) do seu site. Veja como:'}\n \n 1. \n Na tela “Gerenciar Plano” clique em\n <> \n Fazer backup \n ;\n \n \n 2. \n Na modal “Fazer backup” clique em\n <> \n Backup Portal do Cliente \n ;\n \n \n 3. \n Em seguida, clique em\n <> \n Fazer backup \n ;\n \n \n 4. \n Após, aparecerá disponível o arquivo para fazer\n <> \n download em seu computador \n .\n \n \n ),\n },\n },\n maxSizeBackupAccordion: {\n title: 'Qual tamanho do máximo do meu armazenamento?',\n content: {\n paragraphOne: (\n <>\n {'Para realizar o backup você precisa possuir '}\n menos de 10GB \n {' de conteúdo em uso no plano de hospedagem.'}\n \n ),\n paragraphTwo: 'Caso exceda os limites mencionados abaixo, sairá automaticamente da nossa rotina de armazenamento.',\n paragraphThree: 'O backup ficará disponibilizado para fazer download em seu computador.',\n },\n },\n restoreBackupAccordion: {\n title: 'Como restaurar um backup?',\n content: {\n description: 'Antes de fazer a restauração é importante certificar-se de que os arquivos não estão corrompidos e que seu backup contenha tudo o que você precisa para fazer uma restauração completa.',\n subdescription: (\n <>\n {'Existem '}\n duas opções \n {' para restaurar o backup:'}\n \n ),\n byPortal: (\n <>\n Via Portal do Cliente - \n {' você realizara o upload do arquivo de backup, veja como:'}\n \n 1. \n Localize o arquivo de backup que você baixou em seu computador - O arquivo precisa ser\n <> \n extensão “tar.gz” \n ;\n \n \n 2. \n Na tela “Restaurar backup” clique em\n <> \n Faça upload \n ;\n \n \n 3. \n Em seguida, clique em\n <> \n Restaurar via cPanel \n ;\n \n \n 4. \n Para finalizar o procedimento, aparecerá uma mensagem de conclusão do upload, clique em\n <> \n Ok, entendi \n .\n \n \n ),\n bySupport: (\n <>\n Via Suporte \n {' - é necessário abrir um chamado - '}\n \n {`foi feito com sucesso em ${date}`}\n \n {'. Isso significa que seu backup está atualizado! :) '}\n \n ),\n warning: (days, goToCPanel) => (\n <>\n {`Seu último backup foi realizado há mais de ${days} dias. `}\n para não perder os seus dados. \n \n ),\n empty: goToCPanel => (\n <>\n Você não tem backup desse plano.\n para não perder os seus dados. \n \n ),\n error: handleClick => (\n <>\n {'Tivemos um problema ao realizar seu backup. Espere alguns instantes e '}\n handleClick()} label=\"clique aqui para tentar novamente\" />\n {'. '}\n \n ),\n ongoing: () => (\n <>\n Seu backup está em andamento.\n Backup pelo Portal do Cliente: \n Faça um backup completo do seu plano, armazenando todos os dados, arquivos e e-mails no Diretório Inicial. Você pode guardar até 10GB nesse backup.\n Backup avançado pelo cPanel: \n Um backup mais avançado com opções adicionais de download. Personalize e tenha maior controle sobre seus backups.\n \n ),\n alertDescription: () => (\n <>\n {'Não sabe qual escolher? Saiba mais sobre '}\n Comece selecionando o que deseja fazer agora: \n ),\n generateLocale: {\n optionTitle: 'Gerar um backup',\n optionDescription: (\n <>\n Faça uma cópia de segurança \n {' do seu site para baixar e manter em um local seguro.'}\n \n ),\n secondStep: {\n description: (\n E qual backup você quer gerar? \n ),\n generateSuspendedTitle: (\n <>\n {'Ok! '}\n Vamos ajudá-lo. \n {' :)'}\n \n ),\n },\n thirdStep: {\n options: {\n active: {\n full: {\n title: 'Backup completo',\n description: (\n <>\n Baixe uma cópia completa da sua hospedagem incluindo arquivos, bancos de dados, configurações do cPanel:\n\n \n Tamanho máximo 10Gb ou 10mil arquivos (inodes). \n Ideal para migrações de site, desenvolvimento local ou recuperação em caso de infecção por vírus/malwares. \n Inclui os arquivos de todos os sites instalados na hospedagem. \n Evita inconsistências entre o banco de dados e os arquivos do seu site. \n Conta com o suporte HostGator para restaurar o seu backup sempre que precisar. \n \n \n ),\n },\n root: {\n title: 'Backup do diretório inicial',\n description: (\n <>\n Baixe a cópia do diretório de arquivos da sua hospedagem:\n\n \n Tamanho máximo 10Gb ou 10mil arquivos (inodes). \n Ideal para recuperação em casos de exclusão acidental de arquivos ou infecção por vírus/malwares. \n Inclui os arquivos de todos os sites instalados na hospedagem. \n Restauração fácil pelo cPanel quando precisar. \n \n \n ),\n },\n database: {\n title: 'Backup do banco de dados',\n description: (\n <>\n Baixe uma cópia segura do banco de dados MySQL do seu site (avançado):\n\n \n Ideal para realizar análises de dados avançadas ou recuperação de dados corrompidos. \n Restauração fácil pelo cPanel quando precisar. \n \n \n ),\n },\n },\n },\n },\n generateTexts: {\n description: (\n <>\n {'Ok! '}\n Vamos ajudar a gerar seu Backup, aguarde uns segundos \n {'. :) '}\n \n ),\n info: 'Clique no botão abaixo para ler mais sobre o backup e fazer o download do arquivo.',\n },\n generateByCpanel: {\n description: (\n <>\n {'Você pode realizar o backup completo do seu plano de forma rápida '}\n através do cPanel. \n\n \n ),\n info: (\n <>\n {'Clique no botão abaixo para ir até lá. Em caso de dúvida, '}\n Restaure uma cópia de segurança \n {' da sua hospedagem caso esteja enfrentando problemas.'}\n \n ),\n mine: {\n title: 'De um arquivo que eu já tenho',\n description: 'texto de apoio.',\n },\n hostgator: {\n title: 'De um arquivo que a Hostgator tenha',\n description: 'texto de apoio.',\n },\n restoreLabel: 'Restaurar backup',\n description: (\n <>\n {'Como você não possui um arquivo de backup disponível, para prosseguir com a restauração, é necessário '}\n abrir um chamado para a nossa equipe de Suporte \n . Clique no botão abaixo e preencha o formulário.\n \n ),\n fullBkpDescription: (\n <>\n {'Para realizar a restauração do backup completo, '}\n é necessário abrir um chamado para nossa equipe de Suporte. \n {' Clique no botão abaixo para acessar o formulário e iniciar o processo.'}\n \n ),\n noFullBkpDescription: (\n <>\n Clique no botão abaixo para ler mais informações e\n {' ver como fazer a restauração '} \n pelo cPanel.\n \n ),\n firstStep: {\n title: (\n <>\n {'Você tem o '}\n arquivo para restaurar? \n \n ),\n },\n secondStep: {\n title: (\n <>\n Ok! Vamos ajudar a restaurar seu Backup. :)\n \n Qual tipo de backup você quer restaurar\n \n ?\n \n ),\n options: {\n positive: (\n <>\n Sim \n , tenho o arquivo!\n \n ),\n negative: (\n <>\n Não \n , quero usar um arquivo da HostGator.\n \n ),\n },\n },\n thirdStep: {\n options: {\n active: {\n userFile: {\n full: {\n title: 'Backup completo',\n description: (\n <>\n Selecione esta opção se você possui um arquivo de backup completo do cPanel.\n \n Arquivo no formato .tar.gz \n Tamanho máximo 500MB. \n Nenhuma alteração realizada após a data de geração do arquivo de backup será preservada no cPanel após a restauração completa. \n \n \n ),\n },\n root: {\n title: 'Backup do diretório inicial',\n description: (\n <>\n Selecione esta opção se você possui um arquivo de backup do diretório inicial do cPanel.\n\n \n Arquivo no formato .tar.gz \n Tamanho máximo 500MB. \n Nenhuma alteração realizada nos arquivos do cPanel após a data de geração do arquivo de backup será preservada após a restauração. \n \n \n ),\n },\n database: {\n title: 'Backup do banco de dados',\n description: (\n <>\n Selecione esta opção se você possui um arquivo de backup de banco de dados MySQL do cPanel.\n\n \n Arquivo no formato .sql.gz \n Tamanho máximo 50MB. \n Nenhuma alteração realizada nos dados do seu site após a data de geração do arquivo de backup será preservada após a restauração. \n \n \n ),\n },\n },\n routineFile: {\n full: {\n title: 'Backup completo',\n description: (\n <>\n Realize a restauração completa do seu backup a partir de um arquivo fornecido pela HostGator.\n \n Ideal para migrações de site, desenvolvimento local ou recuperação pós infecção por vírus/malwares. \n Inclui todos os arquivos dos sites instalados na hospedagem. \n Conte com o suporte HostGator para executar o processo de restauração. \n \n \n ),\n },\n root: {\n title: 'Backup do diretório inicial',\n description: (\n <>\n Restauração de diretório de arquivos pela HostGator:\n \n Recupere seu diretório de arquivos hospedado com facilidade. \n Ideal para casos de exclusão acidental ou infecção por vírus/malwares. Inclui todos os arquivos dos sites instalados na hospedagem. \n Conte com o suporte HostGator para executar o processo de restauração. \n \n \n ),\n },\n database: {\n title: 'Backup do banco de dados',\n description: (\n <>\n Realize a restauração do banco de dados MySQL do seu site pela HostGator (avançado):\n \n Ideal para análises avançadas de dados ou recuperação de dados corrompidos. \n Conte com o suporte HostGator para executar o processo de restauração. \n \n \n ),\n },\n },\n },\n suspended: {\n full: {\n title: 'Backup completo',\n description: 'Restaure todos os arquivos do backup completo.',\n },\n root: {\n title: 'Backup do diretório inicial',\n description: 'Você pode escolher um arquivo específico para restaurar.',\n },\n database: {\n title: 'Backup do banco de dados',\n description: 'Recupere seu backup do banco de dados.',\n },\n },\n },\n },\n inodeMessage: (\n <>\n Verificamos que o seu backup excede o limite de tamanho ou de arquivos permitido.\n é necessário abrir um chamado. \n {' Clique no botão abaixo para acessar o formulário.'}\n \n ),\n exceededInodeButton: 'Solicitar Backup',\n buttonLable: 'Solicitar restauração',\n continue: 'Continuar',\n },\n cancelledRestoreAlert: (\n <>\n Seu plano foi encerrado e não pode ser recuperado. \n não é possível gerar um backup. \n Como seu plano está suspenso, você precisa solicitar a restauração para a nossa equipe de Suporte. \n Como seu plano está suspenso, você precisa solicitar o backup para a nossa equipe de Suporte. \n Primeiros Passos \n \n ),\n },\n};\n","/* eslint-disable react/no-unescaped-entities */\nimport { Button, Link } from 'gatorcomponents';\nimport React from 'react';\n\nexport default {\n tabs: {\n labels: {\n general: 'Visión General',\n create: 'Realizar copia de seguridad',\n restore: 'Restaurar Backup',\n log: 'Últimos Backups',\n cpanel: 'Copia de seguridad cPanel',\n },\n create: {\n title: 'Realizar copia de seguridad',\n description: 'Descargue la copia del directorio inicial de archivos de su alojamiento.',\n alertTitle: 'Vea los detalles de esta copia de seguridad',\n alertDescription: (\n <>\n Esta copia de seguridad descargará en su computador\n {' '}\n solo los archivos del directorio principal de su sitio \n {' '}\n (no incluye base de datos ni correos electrónicos).\n Recuerde \n : cada copia de seguridad completa tiene un límite de 10 GB.\n \n {'Este backup descargará en su computadora solo '}\n los archivos del directorio principal de su alojamiento \n {' (no incluye la base de datos ni correos electrónicos).'}\n
\n\n No cierre su navegador hasta que se complete la descarga del archivo.
\n\n \n {'Si necesita una copia de seguridad completa, que incluya todos los archivos, bases de datos y correos electrónicos, '}\n
\n \n ),\n proceedAlertDescription: (\n <>\n Al continuar, la copia de seguridad de sus archivos\n {' '}\n se descargará en su computador \n . Espere a que se complete y, si desea restaurar, suba los archivos en la pestaña “Restaurar copia de seguridad”.\n \n ),\n backupLabel: 'Descargar backup',\n backupError: {\n title: 'Error al realizar la copia de seguridad',\n description: 'Tuvimos un problema al generar su copia de seguridad. Espere un momento e inténtelo de nuevo.',\n },\n backupSuccess: {\n title: 'Copia de seguridad generada',\n description: 'Su copia de seguridad ha sido generada y el archivo está siendo descargado por su navegador. Vea el archivo en las descargas de su computador y no vuelva a generar una copia de seguridad hasta su finalización.',\n },\n },\n restore: {\n title: 'Restaurar copia de seguridad - Directorio Inicial o Base de Datos',\n description: 'Vea como restaurar una copia de seguridad.',\n alertTitle: 'Sepa como restaurar',\n alertDescription: (\n <>\n Para restaurar una copia de seguridad desde el archivo que descargaste previamente (Directorio Inicial o Base de Datos), sigue estos pasos:
\n\n \n
\n Localiza el archivo de copia de seguridad en tu ordenador. \n \n Sube el archivo utilizando la opción\n {' “Restaurar” '} \n en cPanel.\n \n Espera a que todos los archivos se transfieran. \n La restauración estará completa. \n \n \n\n \n {'Atención: el archivo debe tener la extensión '}\n “.tar” \n {' o '}\n “.tar.gz” \n {'. El tamaño máximo del archivo a cargar debe ser de '}\n 500MB para el Directorio Inicial y 50MB para la Base de Datos. \n
\n\n \n {'Para obtener más instrucciones, consulta el material de apoyo '}\n
\n\n \n {'Si el archivo es más grande de lo indicado, te recomendamos '}\n
\n \n ),\n agreement: 'Al continuar, se le dirigirá a la pantalla de restauración de backup (copia de seguridad) de cPanel donde puede subir y restaurar el directorio inicial de su sitio web.',\n uploadLabel: 'Restaurar via cPanel',\n },\n generalVision: {\n title: 'Visión General',\n description: (date, hour) => (\n <>\n {'Tu última copia de seguridad se realizó el '}\n {`${date} `} \n \n {`a las ${hour}h`}\n \n . Revisa los detalles a continuación:\n \n ),\n noBackupDescription: 'No tienes una copia de seguridad reciente. Revisa los detalles a continuación:',\n centralQuestions: () => (\n <>\n {'Consulta las '}\n preguntas y respuestas principales \n {' aquí:'}\n \n ),\n status: {\n completed: 'COMPLETADO',\n attention: 'ATENCIÓN',\n error: 'ERROR',\n inProgress: 'EN CURSO',\n completedAlert: date => (\n <>\n {'Tu última copia de seguridad '}\n \n {`se realizó con éxito el ${date}`}\n \n {'. ¡Esto significa que tu copia de seguridad está actualizada! :) '}\n \n ),\n noBackupAlert: handleClick => (\n <>\n No tienes una copia de seguridad de este plan.\n handleClick()} label=\"Realiza una copia de seguridad\" />\n ahora para no perder tus datos \n .\n \n ),\n oldBackupAlert: (handleClick, days) => (\n <>\n {`Han pasado más de ${days} días desde tu última copia de seguridad. `}\n handleClick()} label=\"Actualiza tu copia de seguridad\" />\n ahora para no perder tus datos \n .\n \n ),\n errorBackupAlert: handleClick => (\n <>\n {'Hemos tenido un problema al realizar tu copia de seguridad. Espera unos momentos y '}\n handleClick()} label=\"haz clic aquí para intentar nuevamente\" />\n .\n \n ),\n inProgressBackupAlert: 'Tu copia de seguridad está en proceso. Espera unos momentos para que esté completa.',\n },\n firstStep: {\n title: 'Primeros Pasos - Copia de Seguridad',\n description: 'Realiza copias de seguridad y restauraciones de tu sitio web con facilidad siguiendo nuestros simples pasos.',\n label: 'Iniciar Restauración',\n labelWithGeneration: 'Iniciar Copia de Seguridad/Restauración',\n },\n faq: {\n faqTitle: (\n <>\n {'Consulta las '}\n preguntas y respuestas principales \n {' aquí:'}\n \n ),\n backupTypesAccordion: {\n title: '¿Cuáles son los tipos de copia de seguridad?',\n content: {\n description: 'Hay varias opciones para tener una copia de seguridad de los datos que desee. Dependiendo del tipo de copia de seguridad realizada obtendrá diferentes resultados. Vea a continuación cuáles son:',\n fullBackup: (\n <>\n Copia de seguridad completa: \n {' hace una copia de todo lo que está vinculado a su cuenta de hosting. Esto incluye archivos y carpetas de los directorios, como correos electrónicos de webmail (cPanel) y base de datos de todos los sitios web existentes en su cuenta de hosting (directorio principal, dominios y subdominios adicionales). Las cuentas de correo electrónico de Titan no ingresan en la copia de seguridad completa, deberá '}\n {'Copia de seguridad del directorio principal (copia de seguridad parcial): '} \n realiza la copia solamente de los archivos del dominio principal o raíz.\n El directorio raíz es donde se almacenan los archivos del dominio principal de su sitio web, generalmente es la carpeta \"public_html\" - Excepto cuando el sitio web se ha instalado en otra carpeta, es un subdominio o un dominio adicional, y no incluye base de datos ni correos electrónicos.\n \n ),\n emailsBackup: (\n <>\n {'Copia de seguridad de correos electrónicos: '} \n {`realiza una copia de seguridad de la información almacenada en las cuentas de correo electrónico webmail (cPanel) de cada dominio.\n Si tiene una cuenta de correo electrónico de Titan no realizamos la copia de seguridad, para ello, vea cómo `}\n {'Copia de seguridad de la base de datos: '} \n Realiza la copia de todas las tablas que almacena los datos de un sitio web (normalmente en formato SQL).\n \n ),\n },\n },\n createBackupAccordion: {\n title: '¿Cómo hacer una copia de seguridad? ',\n content: {\n description: 'Hay dos formas de hacer una copia de seguridad:',\n byCpanel: (\n <>\n {'Copia de seguridad avanzada a través del cPanel: '} \n Esta copia de seguridad le permite descargar por separado archivos y carpetas, base de datos y correos electrónicos, siempre y cuando sea webmail (cPanel).\n \n ),\n byPortal: (\n <>\n Copia de seguridad a través del Portal del Cliente: \n {' realiza una copia de seguridad solo de los archivos que se encuentran en el directorio principal (dominio principal) de su sitio. A continuación, le indicamos cómo:'}\n \n 1. \n En la pantalla \"Administrar plan\", haga clic en\n <> \n Realizar copia de seguridad \n ;\n \n \n 2. \n En \"Copia de seguridad\", haga clic en\n <> \n Copia de seguridad, Portal del Cliente \n ;\n \n \n 3. \n Luego, haga clic en\n <> \n Copia de seguridad \n ;\n \n \n 4. \n Después de eso, el archivo estará disponible para\n <> \n descargar en su computador \n .\n \n \n ),\n },\n },\n maxSizeBackupAccordion: {\n title: '¿Cuál es el tamaño máximo de mi almacenamiento?',\n content: {\n paragraphOne: (\n <>\n {'Para realizar la copia de seguridad, debe tener '}\n menos de 10GB \n {' de contenido en uso en el plan de hosting/alojamiento.'}\n \n ),\n paragraphTwo: 'Si excede los límites mencionados anteriormente, saldrá automáticamente de nuestra rutina de almacenamiento.',\n paragraphThree: 'La copia de seguridad estará disponible para descargar en su computador.',\n },\n },\n restoreBackupAccordion: {\n title: '¿Cómo restaurar una copia de seguridad? ',\n content: {\n description: 'Antes de realizar la restauración, es importante asegurarse de que sus archivos no estén dañados y que su copia de seguridad contenga todo lo que necesita para realizar una restauración completa.',\n subdescription: (\n <>\n {'Existen '}\n dos opciones \n {' para restaurar la copia de seguridad:'}\n \n ),\n byPortal: (\n <>\n A través del Portal del cliente - \n {' usted cargará el archivo de copia de seguridad, vea como:'}\n \n 1. \n Localice el archivo de copia de seguridad que descargó en su computadora - el archivo debe ser con\n <> \n extensión \"tar.gz\" \n ;\n \n \n 2. \n En la pantalla \"Restaurar copia de seguridad\", haga clic en\n <> \n Cargar \n ;\n \n \n 3. \n A continuación, haga clic en\n <> \n Restaurar via cPanel \n ;\n \n \n 3. \n Para finalizar el procedimiento, aparecerá un mensaje de finalización de carga, haga clic en\n <> \n Ok, entiendo \n .\n \n \n ),\n bySupport: (\n <>\n A través de Soporte \n {' - es necesario abrir un ticket - '}\n \n {`se realizó con éxito el ${date}`}\n \n {'. ¡Esto significa que tu copia de seguridad está actualizada! :) '}\n \n ),\n warning: (days, goToCPanel) => (\n <>\n {`Han pasado más de ${days} días desde tu última copia de seguridad. `}\n ahora para no perder tus datos. \n \n ),\n empty: goToCPanel => (\n <>\n No tienes una copia de seguridad de este plan.\n ahora para no perder tus datos. \n \n ),\n error: handleClick => (\n <>\n {'Hemos tenido un problema al realizar tu copia de seguridad. Espera unos momentos y '}\n handleClick()} label=\"haz clic aquí para intentar nuevamente\" />\n {'. '}\n \n ),\n ongoing: () => (\n <>\n Tu copia de seguridad está en proceso.\n Backup a través del Portal del Cliente: \n Realiza una copia de seguridad completa de tu plan, almacenando todos los datos, archivos y correos electrónicos en el Directorio Inicial. Puedes guardar hasta 10 GB en esta copia de seguridad.\n Backup avanzado a través de cPanel: \n Una copia de seguridad más avanzada con opciones adicionales de descarga. Personaliza y obtén un mayor control sobre tus copias de seguridad.\n \n ),\n alertDescription: () => (\n <>\n {'¿No sabes cuál elegir? Obtén más información sobre '}\n Comienza seleccionando lo que deseas hacer ahora: \n ),\n generateLocale: {\n optionTitle: 'Generar una copia de seguridad',\n optionDescription: (\n <>\n Haz una copia de seguridad \n {' de tu sitio para descargarla y mantenerla en un lugar seguro.'}\n \n ),\n secondStep: {\n description: (\n ¿Y qué copia de seguridad deseas generar? \n ),\n generateSuspendedTitle: (\n <>\n {'Ok! '}\n ¡Vamos a ayudarte! \n {' :)'}\n \n ),\n },\n thirdStep: {\n options: {\n active: {\n full: {\n title: 'Backup completo',\n description: (\n <>\n Descargue una copia completa de su alojamiento, incluyendo archivos, bases de datos y configuraciones de cPanel:\n\n \n Tamaño máximo de 10 GB o 10,000 archivos (inodes). \n Ideal para migraciones de sitios, desarrollo local o recuperación en caso de infección por virus/malwares. \n Incluye los archivos de todos los sitios instalados en el alojamiento. \n Evita inconsistencias entre la base de datos y los archivos de su sitio. \n Cuenta con el soporte de HostGator para restaurar su backup siempre que lo necesite. \n \n \n ),\n },\n root: {\n title: 'Backup del directorio inicial',\n description: (\n <>\n Descargue una copia del directorio de archivos de su alojamiento:\n\n \n Tamaño máximo de 10 GB o 10,000 archivos (inodes). \n Ideal para recuperación en casos de eliminación accidental de archivos o infección por virus/malwares. \n Incluye los archivos de todos los sitios instalados en el alojamiento. \n Restauración fácil mediante cPanel cuando lo necesite. \n \n \n ),\n },\n database: {\n title: 'Backup del banco de datos',\n description: (\n <>\n Descargue una copia segura de la base de datos MySQL de su sitio (avanzado):\n\n \n Ideal para realizar análisis de datos avanzados o recuperación de datos corruptos. \n Restauración fácil mediante cPanel cuando lo necesite. \n \n \n ),\n },\n },\n },\n },\n generateTexts: {\n description: (\n <>\n {'¡De acuerdo! '}\n Vamos a ayudarte a generar tu copia de seguridad, espera unos segundos \n {'. :) '}\n \n ),\n info: 'Haz clic en el botón de abajo para obtener más información sobre la copia de seguridad y descargar el archivo.',\n },\n generateByCpanel: {\n description: (\n <>\n {'Puede realizar una copia de seguridad completa de su plan de forma rápida '}\n a través del cPanel. \n \n ),\n info: (\n <>\n {'Haga clic en el botón a continuación para ir allí. En caso de duda, '}\n Restaura una copia de seguridad \n {' de tu alojamiento si estás teniendo problemas.'}\n \n ),\n mine: {\n title: 'Desde un archivo que ya tengo',\n description: 'Texto de apoyo.',\n },\n hostgator: {\n title: 'Desde un archivo que Hostgator tenga',\n description: 'Texto de apoyo.',\n },\n restoreLabel: 'Restaurar copia de seguridad',\n description: (\n <>\n {'Como no tienes un archivo de copia de seguridad disponible, para continuar con la restauración, es necesario '}\n abrir un ticket de soporte con nuestro equipo \n . Haz clic en el botón de abajo y completa el formulario.\n \n ),\n fullBkpDescription: (\n <>\n {'Para realizar la restauración del backup completo, '}\n es necesario abrir un ticket para nuestro equipo de Soporte. \n {' Haga clic en el botón a continuación para acceder al formulario e iniciar el proceso.'}\n \n ),\n noFullBkpDescription: (\n <>\n Haga clic en el botón a continuación para obtener más información y\n {' ver cómo realizar la restauración '} \n a través del cPanel.\n \n ),\n firstStep: {\n title: (\n <>\n {'¿Tienes el '}\n archivo para restaurar? \n \n ),\n },\n secondStep: {\n title: (\n <>\n ¡Ok! Vamos a ayudarte a restaurar tu copia de seguridad. :)\n \n ¿Qué tipo de copia de seguridad deseas restaurar?\n \n \n ),\n options: {\n positive: (\n <>\n Sí \n , ¡tengo el archivo!\n \n ),\n negative: (\n <>\n No \n , quiero usar un archivo de HostGator.\n \n ),\n },\n },\n thirdStep: {\n options: {\n active: {\n userFile: {\n full: {\n title: 'Backup completo',\n description: (\n <>\n Seleccione esta opción si tiene un archivo de backup completo del cPanel.\n \n Archivo en formato .tar.gz \n Tamaño máximo de 500 MB. \n No se conservarán cambios realizados después de la fecha de generación del archivo de backup en cPanel después de la restauración completa. \n \n \n ),\n },\n root: {\n title: 'Backup del directorio inicial',\n description: (\n <>\n Seleccione esta opción si tiene un archivo de backup del directorio inicial del cPanel.\n \n Archivo en formato .tar.gz \n Tamaño máximo de 500 MB. \n No se conservarán cambios realizados en los archivos de cPanel después de la fecha de generación del archivo de backup después de la restauración. \n \n \n ),\n },\n database: {\n title: 'Backup del banco de datos',\n description: (\n <>\n Seleccione esta opción si tiene un archivo de backup de la base de datos MySQL del cPanel.\n \n Archivo en formato .sql.gz \n Tamaño máximo de 50 MB. \n No se conservarán cambios realizados en los datos de su sitio después de la fecha de generación del archivo de backup después de la restauración. \n \n \n ),\n },\n },\n routineFile: {\n full: {\n title: 'Backup completo',\n description: (\n <>\n Realice la restauración completa de su backup a partir de un archivo proporcionado por HostGator.\n \n Ideal para migraciones de sitios, desarrollo local o recuperación después de una infección por virus/malwares. \n Incluye todos los archivos de los sitios instalados en el alojamiento. \n Confíe en el soporte de HostGator para ejecutar el proceso de restauración. \n \n \n ),\n },\n root: {\n title: 'Backup del directorio inicial',\n description: (\n <>\n Restauración del directorio de archivos proporcionada por HostGator:\n \n Recupere su directorio de archivos hospedado con facilidad. \n Ideal para casos de eliminación accidental o infección por virus/malwares. Incluye todos los archivos de los sitios instalados en el alojamiento. \n Confíe en el soporte de HostGator para ejecutar el proceso de restauración. \n \n \n ),\n },\n database: {\n title: 'Backup del banco de datos',\n description: (\n <>\n Realice la restauración del banco de datos MySQL de su sitio proporcionada por HostGator (avanzado):\n \n Ideal para análisis avanzados de datos o recuperación de datos corruptos. \n Confíe en el soporte de HostGator para ejecutar el proceso de restauración. \n \n \n ),\n },\n },\n },\n suspended: {\n full: {\n title: 'Backup completo',\n description: 'Restaure todos los archivos del backup completo.',\n },\n root: {\n title: 'Backup del directorio inicial',\n description: 'Puede elegir un archivo específico para restaurar.',\n },\n database: {\n title: 'Backup de la base de datos',\n description: 'Recupere su backup del banco de datos.',\n },\n },\n },\n },\n inodeMessage: (\n <>\n Hemos detectado que su copia de seguridad excede el límite de tamaño o de archivos permitido.\n es necesario abrir un ticket. \n {' Haga clic en el botón de abajo para acceder al formulario.'}\n \n ),\n exceededInodeButton: 'Solicitar copia de seguridad',\n buttonLable: 'Solicitar restauración',\n continue: 'Continuar',\n },\n cancelledRestoreAlert: (\n <>\n Su plan ha sido cancelado y no se puede recuperar. \n no es posible generar una copia de seguridad. \n Como su plan está suspendido, necesita solicitar la restauración a nuestro equipo de Soporte. \n Como tu plan está suspendido, necesitas solicitar la copia de seguridad a nuestro equipo de soporte. \n Primeros Pasos \n \n ),\n },\n};\n","import esContent from './backup.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './backup.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './backup.es';\n\nexport default {\n ...esContent,\n};\n","import backupBR from './backup.br';\nimport backupCL from './backup.cl';\nimport backupCO from './backup.co';\nimport backupMX from './backup.mx';\n\nconst locales = {\n BR: backupBR,\n CL: backupCL,\n CO: backupCO,\n MX: backupMX,\n};\n\nexport default locales;\n","import { isBRServer } from '@/utils/Validators/validation';\n\nexport const HgProducts = !isBRServer\n ? {\n DOMAINS_ALL: [\n\n ],\n STREAMING_ALL: [\n\n ],\n CODEGUARD_ALL: [\n\n ],\n SITELOCK_ALL: [\n\n ],\n HOSTING_ALL: [\n 5,\n 6,\n 7,\n 8,\n 9,\n 10,\n 174,\n 211,\n 212,\n 213,\n 50,\n 51,\n 52,\n 53,\n 54,\n 229,\n 230,\n 231,\n 232,\n 233,\n 234,\n 235,\n 236,\n 237,\n 238,\n 240,\n 56,\n 57,\n 58,\n 59,\n 60,\n 61,\n 64,\n 65,\n 133,\n 134,\n 135,\n 136,\n 137,\n 138,\n 139,\n 140,\n 141,\n 201,\n 202,\n 203,\n 204,\n 205,\n 206,\n 208,\n 209,\n 210,\n 215,\n 216,\n 251,\n 254,\n 257,\n 260,\n 263,\n 266,\n 269,\n 272,\n 275,\n 278,\n ],\n LINUX_PROFESIONAL: 7,\n SSL_FREE: 176,\n SHARED_ALL: [\n 5,\n 6,\n 7,\n 174,\n 211,\n 212,\n 213,\n ],\n PLAN_EMPRENDEDOR: 5,\n PLAN_D_NEGOCIOS: 6,\n PLAN_PROFESSIONAL: 7,\n SHARED_GID: 1,\n WEB_HOSTING_COMPARTIDO_WINDOWS_PLAN_EMPRENDEDOR: 8,\n WEB_HOSTING_COMPARTIDO_WINDOWS_PLAN_DE_NEGOCIOS: 9,\n WEB_HOSTING_COMPARTIDO_WINDOWS_PLAN_PROFESSIONAL: 10,\n ALOJAMENTO_3: 213,\n GMAIL_PROFESIONAL: 12,\n RESELLER_GID: 4,\n RESELLER_ALUMINIO: 50,\n RESELLER_COBRE: 51,\n RESELLER_PLATA: 52,\n RESELLER_ORO: 53,\n RESELLER_DIAMANTE: 54,\n RESELLER_INICIANDO: 229,\n RESELLER_CRECIENDO: 230,\n RESELLER_EXPANDIENDO: 231,\n RESELLER_VETERANO: 232,\n RESELLER_VETERANO_100: 233,\n RESELLER_VETERANO_150: 234,\n RESELLER_VETERANO_200: 235,\n RESELLER_VETERANO_300: 236,\n RESELLER_VETERANO_500: 237,\n RESELLER_VETERANO_1000: 240,\n RESELLER_VETERANO_1200: 238,\n RESELLER_ALL: [\n 4,\n 50,\n 51,\n 52,\n 53,\n 54,\n 229,\n 230,\n 231,\n 232,\n 233,\n 234,\n 235,\n 236,\n 237,\n 240,\n 238,\n ],\n DEDICATED_GID: 5,\n SERVIDOR_DEDICADO_LINUX_PLAN_BASICO: 56,\n SERVIDOR_DEDICADO_WINDOWS_PLAN_BASICO: 57,\n SERVIDOR_DEDICADO_LINUX_PLAN_ESTANDAR: 58,\n SERVIDOR_DEDICADO_WINDOWS_PLAN_ESTANDAR: 59,\n SERVIDOR_DEDICADO_LINUX_PLAN_ELITE: 60,\n SERVIDOR_DEDICADO_WINDOWS_PLAN_ELITE: 61,\n SERVIDOR_DEDICADO_LINUX_PLAN_PRO: 64,\n SERVIDOR_DEDICADO_WINDOWS_PLAN_PRO: 65,\n DEDICADO_LINUX_BLACK: 204,\n DEDICADO_LINUX_SAPPHIRE: 205,\n DEDICADO_LINUX_DIAMOND: 206,\n DEDICADO_WINDOWS_BLACK: 208,\n DEDICADO_WINDOWS_SAPPHIRE: 209,\n DEDICADO_WINDOWS_DIAMOND: 210,\n DEDICADO_4: 266,\n DEDICADO_6: 269,\n DEDICADO_8: 272,\n DEDICADO_16: 275,\n DEDICADO_32: 278,\n DEDICATED_ALL: [\n 56,\n 57,\n 58,\n 59,\n 60,\n 61,\n 64,\n 65,\n 204,\n 205,\n 206,\n 208,\n 209,\n 210,\n 266,\n 269,\n 272,\n 275,\n 278,\n ],\n BLOG: 100,\n BUSINESS: 101,\n PRO: 102,\n VPS_GID: 8,\n VPS_SNAPPY_500: 133,\n VPS_SNAPPY_1000_CPANEL: 134,\n VPS_SNAPPY_1000: 135,\n VPS_SNAPPY_2000_CPANEL: 136,\n VPS_SNAPPY_2000: 137,\n VPS_SNAPPY_4000_CPANEL: 138,\n VPS_SNAPPY_4000: 139,\n VPS_SNAPPY_8000_CPANEL: 140,\n VPS_SNAPPY_8000: 141,\n VPS_STANDARD: 203,\n VPS_OPTIMIZED: 202,\n VPS_PLATINUM: 201,\n VPS_ENTRY: 215,\n VPS_PREMIUM: 216,\n VPS_2: 251,\n VPS_4: 254,\n VPS_4_PLUS: 257,\n VPS_6: 260,\n VPS_8: 263,\n VPS_ALL: [\n 133,\n 134,\n 135,\n 136,\n 137,\n 138,\n 139,\n 140,\n 141,\n 203,\n 202,\n 201,\n 215,\n 216,\n 251,\n 254,\n 257,\n 260,\n 263,\n ],\n NEW_VPS: [\n 251,\n 254,\n 257,\n 260,\n 263,\n ],\n TRANSFERENCIA: 143,\n HORA_TECNICA: 144,\n CAMBIO_DE_DOMINIO_PRIMARIO: 146,\n POSITIVE_SSL: 147,\n EV_SSL: 148,\n EXTENDED_SSL: 149,\n IP_DEDICADA: 150,\n INSTALACION_DE_SSL: 152,\n RESTAURACION_DE_COPIA_DE_SEGURIDAD: 153,\n CHIP_RAM_12GB: 155,\n COMODO_WILDCARD_SSL: 156,\n CODEGUARD_PLAN_BASICO: 157,\n CODEGUARD_PLAN_INICIANTE: 158,\n CODEGUARD_PLAN_PROFESIONAL: 159,\n CODEGUARD_PLAN_EMPRESARIAL: 160,\n CODEGUARD_PLAN_PREMIUM: 244,\n WEEBLY_BASICO: 161,\n WEEBLY_INICIANTE: 162,\n WEEBLY_PROFESIONAL: 163,\n WEEBLY_ALL: [\n 161,\n 162,\n 163,\n ],\n CREADOR_DE_SITIOS_GID_ADDON: 13,\n CREADOR_DE_SITIOS_GID: 14,\n CREADOR_DE_SITIOS_PERSONAL: 164,\n CREADOR_DE_SITIOS_PROFESIONAL: 165,\n CREADOR_DE_SITIOS_TIENDA_EN_LINEA: 166,\n CREADOR_DE_SITIOS_PERSONAL_ADDON: 167,\n CREADOR_DE_SITIOS_ADDON: 214,\n CREADOR_DE_SITIOS_PROFESIONAL_ADDON: 168,\n CREADOR_DE_SITIOS_TIENDA_EN_LINEA_ADDON: 169,\n CREADOR_DE_SITIOS: [\n 164,\n 165,\n 166,\n 167,\n 168,\n 169,\n 214,\n ],\n WEB_HOSTING_CREADOR_DE_SITIOS_PERSONAL: 170,\n WEB_HOSTING_CREADOR_DE_SITIOS_PROFESIONAL: 171,\n WEB_HOSTING_CREADOR_DE_SITIOS_TIENDA_EN_LINEA: 172,\n HOSTING_CREADOR_DE_SITIOS: [\n 170,\n 171,\n 172,\n ],\n PROTECCION_WHOIS: 173,\n PLAN_PERSONAL: 174,\n SSL_GRATUITO: 176,\n SSL_PRIVADO: 177,\n SSL_EV: 178,\n SSL_WILDCARD: 179,\n PRODUCT_GROUPS: {\n ssl: [\n 176,\n 178,\n 177,\n 179,\n ],\n websitebuilder: [\n 170,\n 171,\n 172,\n 164,\n 165,\n 166,\n 167,\n 168,\n 169,\n 214,\n ],\n reseller: [50,\n 51,\n 52,\n 53,\n 54],\n },\n STANDALONE_GROUPS: [],\n PRODUCT_GIDS: {\n vps: 8,\n dedicated: 5,\n reseller: 4,\n shared: 1,\n wphosting: [],\n weebly: [],\n websitebuilder: [],\n gapps: [],\n },\n PORTAL_PRODUCT_IDS: [\n 174,\n 5,\n 6,\n 7,\n 50,\n 51,\n 52,\n 53,\n 54,\n 56,\n 58,\n 60,\n 64,\n 57,\n 59,\n 61,\n 65,\n 134,\n 136,\n 138,\n 140,\n 161,\n 162,\n 163,\n 164,\n 165,\n 166,\n ],\n PRO_EMAIL_GID: 16,\n PRO_EMAIL_PRO_TRIAL: 244,\n PRO_EMAIL_PRO: 242,\n PRO_EMAIL_PREMIUM: 243,\n PRO_EMAIL_ULTRA: 245,\n PRO_EMAIL_ALL: [\n 242,\n 243,\n 244,\n 245,\n ],\n WPHOSTING_ALL: [\n\n ],\n PLUS_ALL: [\n ],\n }\n : {\n HOSTING_ALL: [\n 5,\n 6,\n 437,\n 7,\n 47,\n 329,\n 332,\n 335,\n 50,\n 51,\n 52,\n 53,\n 54,\n 86,\n 385,\n 388,\n 391,\n 394,\n 397,\n 400,\n 403,\n 406,\n 409,\n 412,\n 415,\n 56,\n 57,\n 58,\n 59,\n 60,\n 61,\n 62,\n 63,\n 64,\n 65,\n 68,\n 69,\n 70,\n 71,\n 72,\n 73,\n 74,\n 75,\n 76,\n 133,\n 134,\n 135,\n 136,\n 137,\n 138,\n 139,\n 140,\n 141,\n 183,\n 302,\n 305,\n 308,\n 311,\n 314,\n 317,\n 320,\n 323,\n 326,\n 343,\n 346,\n 446,\n 449,\n 452,\n 455,\n 458,\n 461,\n 464,\n 467,\n 470,\n 473,\n ],\n BUSINESS: 7,\n PLUS: 47,\n SHARED_GID: 1,\n PLANO_P: 5,\n PLANO_M: 6,\n PLANO_STARTER: 437,\n PLANO_BUSINESS: 7,\n HOSPEDAGEM_3: 335,\n HOSPEDAGEM_COLABORADORES: 247,\n SHARED_ALL: [\n 5,\n 6,\n 437,\n 7,\n 247,\n 335,\n ],\n RESELLER_GID: 4,\n REVENDA_1: 50,\n REVENDA_2: 51,\n REVENDA_3: 52,\n REVENDA_4: 53,\n REVENDA_5: 54,\n REVENDA_COMECANDO: 385,\n REVENDA_CRESCENDO: 388,\n REVENDA_EXPANDINDO: 391,\n REVENDA_VETERANO: 394,\n REVENDA_VETERANO_100: 397,\n REVENDA_VETERANO_200: 400,\n REVENDA_VETERANO_300: 403,\n REVENDA_VETERANO_500: 406,\n REVENDA_VETERANO_150: 409,\n REVENDA_VETERANO_1000: 412,\n REVENDA_VETERANO_1200: 415,\n RESELLER_ALL: [\n 50,\n 51,\n 52,\n 53,\n 54,\n 385,\n 388,\n 391,\n 394,\n 397,\n 400,\n 403,\n 406,\n 409,\n 412,\n 415,\n ],\n DEDICATED_GID: 5,\n DEDICADO_LINUX_BASICO: 56,\n DEDICADO_WINDOWS_BASICO: 57,\n DEDICADO_LINUX_STANDARD: 58,\n DEDICADO_WINDOWS_STANDARD: 59,\n DEDICADO_LINUX_ELITE: 60,\n DEDICADO_WINDOWS_ELITE: 61,\n DEDICADO_HG1_EMPRESA: 62,\n DEDICADO_HG2_EMPRESA: 63,\n DEDICADO_LINUX_PRO: 64,\n DEDICADO_WINDOWS_PRO: 65,\n DEDICADO_LINUX_BLACK: 311,\n DEDICADO_LINUX_SAPPHIRE: 314,\n DEDICADO_LINUX_DIAMOND: 317,\n DEDICADO_WINDOWS_BLACK: 320,\n DEDICADO_WINDOWS_SAPPHIRE: 326,\n DEDICADO_WINDOWS_DIAMOND: 323,\n DEDICADO_4: 461,\n DEDICADO_6: 464,\n DEDICADO_8: 467,\n DEDICADO_16: 470,\n DEDICADO_32: 473,\n DEDICATED_ALL: [\n 56,\n 57,\n 58,\n 59,\n 60,\n 61,\n 62,\n 63,\n 64,\n 65,\n 311,\n 314,\n 317,\n 320,\n 326,\n 323,\n 461,\n 464,\n 467,\n 470,\n 473,\n ],\n VPS_GID: 6,\n OLD_VPS_1: 68,\n OLD_VPS_2: 69,\n OLD_VPS_3: 70,\n OLD_VPS_4: 71,\n OLD_VPS_5: 72,\n OLD_VPS_6: 73,\n OLD_VPS_7: 74,\n OLD_VPS_8: 75,\n OLD_VPS_9: 76,\n VPS_500: 133,\n VPS_1000_WHM: 134,\n VPS_1000_SEM_WHM: 135,\n VPS_2000_WHM: 136,\n VPS_2000_SEM_WHM: 137,\n VPS_4000_WHM: 138,\n VPS_4000_SEM_WHM: 139,\n VPS_8000_WHM: 140,\n VPS_8000_SEM_WHM: 141,\n VPS_OPTIMIZED: 302,\n VPS_PLATINUM: 305,\n VPS_STANDARD: 308,\n VPS_ENTRY: 343,\n VPS_PREMIUM: 346,\n VPS_2: 446,\n VPS_4: 449,\n VPS_4_PLUS: 452,\n VPS_6: 455,\n VPS_8: 458,\n VPS_ALL: [\n 68,\n 69,\n 70,\n 71,\n 72,\n 73,\n 74,\n 75,\n 76,\n 133,\n 134,\n 135,\n 136,\n 137,\n 138,\n 139,\n 140,\n 141,\n 302,\n 305,\n 308,\n 343,\n 346,\n 446,\n 449,\n 452,\n 455,\n 458,\n ],\n NEW_VPS: [\n 446,\n 449,\n 452,\n 455,\n 458,\n ],\n CRIADORDESITES: [\n 272,\n 278,\n 284,\n ],\n SERVICES_GID: 7,\n CERTIFICADO_SSL: 8,\n CERTIFICADO_SSL_IP: 9,\n CERTIFICADO_SSL_EMPRESARIAL: 10,\n HORA_TECNICA_SYSADMIN: 13,\n INSTALACAO_WHMCS: 14,\n IP_DEDICADO: 15,\n PROTECAO_WHOIS_ENOM: 48,\n PLACA_RAID: 49,\n UPGRADE_UPLINK_100: 67,\n WHMCS_VPS: 78,\n CPANEL_VPS: 85,\n STREAMING_ADICIONAL_128: 88,\n STREAMING_AUTODJ_2GB: 89,\n INSTALACAO_SSL: 90,\n UPGRADE_RAM: 91,\n MSSQL_2014_STANDARD: 92,\n MSSQL_2014_ENTERPRISE: 93,\n RESTAURACAO_BACKUP: 94,\n SMARTERMAIL_PROFESSIONAL_UNLIMITED_MENSAL: 95,\n UPGRADE_HD_250GB: 96,\n UPGRADE_HD_500GB: 97,\n UPGRADE_HD_750GB: 98,\n UPGRADE_HD_1TB: 99,\n ALTERACAO_DOMINIO_PRIMARIO: 100,\n UPGRADE_HD_2TB: 101,\n UPGRADE_HD_3TB: 102,\n LICENCA_TERMINAL_SERVICES: 103,\n MSSQL_2014_WEB: 104,\n UPGRADE_UPLINK_1000: 105,\n SMARTERMAIL_ENTERPRISE_UNLIMITED_MENSAL: 106,\n SITEBUILDER_50_LICENCAS: 111,\n SITEBUILDER_100_LICENCAS: 112,\n SITEBUILDER_500_LICENCAS: 113,\n SMARTERMAIL_ENTERPRISE_250_MENSAL: 114,\n SMARTERMAIL_ENTERPRISE_250_UNICO: 115,\n UPGRADE_SAN_PROVO_100GB: 117,\n UPGRADE_SAN_PROVO_250GB: 118,\n UPGRADE_SAN_PROVO_500GB: 119,\n UPGRADE_SAN_PROVO_750GB: 120,\n UPGRADE_SAN_PROVO_1TB: 121,\n UPGRADE_SAN_PROVO_2TB: 122,\n GOMOBI: 123,\n UPGRADE_SAN_PROVO_2_5TB: 125,\n UPGRADE_SAN_PROVO_3TB: 126,\n UPGRADE_SAN_PROVO_3_5TB: 127,\n UPGRADE_SAN_PROVO_4TB: 128,\n LOGO_FREELOGOSERVICES: 129,\n CARTOES_250_FREELOGOSERVICES: 130,\n JUMPSTART: 132,\n UPGRADE_RAM_PROVO_4GB: 142,\n UPGRADE_RAM_PROVO_8GB: 143,\n UPGRADE_RAM_PROVO_12GB: 144,\n UPGRADE_RAM_PROVO_16GB: 145,\n UPGRADE_RAM_PROVO_20GB: 146,\n UPGRADE_RAM_PROVO_24GB: 147,\n UPGRADE_RAM_PROVO_28GB: 148,\n WEEBLY_INICIANTE: 151,\n WEEBLY_PRO: 152,\n WEEBLY_EMPRESARIAL: 153,\n WEEBLY_BASICO: 154,\n SMARTERMAIL_ENTERPRISE_1000_UNICO: 156,\n SMARTERMAIL_PROFESSIONAL_1000_UNICO: 157,\n SMARTERMAIL_PROFESSIONAL_250_UNICO: 165,\n SMARTERMAIL_PROFESSIONAL_250_MENSAL: 168,\n SMARTERMAIL_PROFESSIONAL_1000_MENSAL: 171,\n SMARTERMAIL_PROFESSIONAL_UNLIMITED_UNICO: 174,\n SMARTERMAIL_ENTERPRISE_1000_MENSAL: 177,\n SMARTERMAIL_ENTERPRISE_UNLIMITED_UNICO: 180,\n SMARTERSTATS_PROFESSIONAL_50_UNICO: 186,\n SMARTERSTATS_PROFESSIONAL_50_MENSAL: 189,\n SMARTERSTATS_PROFESSIONAL_250_UNICO: 192,\n SMARTERSTATS_PROFESSIONAL_250_MENSAL: 195,\n SMARTERSTATS_PROFESSIONAL_1000_UNICO: 198,\n SMARTERSTATS_PROFESSIONAL_1000_MENSAL: 201,\n SMARTERSTATS_ENTERPRISE_50_UNICO: 204,\n SMARTERSTATS_ENTERPRISE_50_MENSAL: 207,\n SMARTERSTATS_ENTERPRISE_250_UNICO: 210,\n SMARTERSTATS_ENTERPRISE_250_MENSAL: 213,\n SMARTERSTATS_ENTERPRISE_1000_UNICO: 216,\n SMARTERSTATS_ENTERPRISE_1000_MENSAL: 219,\n SMARTERTRACK_PROFESSIONAL_2: 222,\n SMARTERTRACK_PROFESSIONAL_5: 225,\n SMARTERTRACK_PROFESSIONAL_10: 228,\n SMARTERTRACK_ENTERPRISE_5: 231,\n SMARTERTRACK_ENTERPRISE_10: 234,\n CERTIFICADO_SSL_WILDCARD: 261,\n CRIADOR_SITES_LOJA: 272,\n CRIADOR_SITES_LOJA_ADDON: 275,\n CRIADOR_SITES_PESSOAL: 278,\n CRIADOR_SITES_PESSOAL_ADDON: 281,\n CRIADOR_SITES_PROFISSIONAL: 284,\n CRIADOR_SITES_PROFISSIONAL_ADDON: 287,\n CRIADOR_SITES_ADDON: 338,\n SSL_FREE: 290,\n SSL_PRIVADO: 293,\n SSL_EMPRESARIAL: 296,\n SSL_WILDCARD: 299,\n MSSQL_2017_2CORE_WEB: 349,\n MSSQL_2017_2CORE_STANDARD: 352,\n MSSQL_2017_2CORE_ENTERPRISE: 355,\n MSSQL_2017_4CORE_WEB: 358,\n MSSQL_2017_4CORE_STANDARD: 361,\n MSSQL_2017_4CORE_ENTERPRISE: 364,\n MSSQL_2017_8CORE_WEB: 367,\n MSSQL_2017_8CORE_STANDARD: 370,\n MSSQL_2017_8CORE_ENTERPRISE: 373,\n MSSQL_2017_16CORE_WEB: 376,\n MSSQL_2017_16CORE_STANDARD: 379,\n MSSQL_2017_16CORE_ENTERPRISE: 382,\n SERVICES_ALL: [\n 8,\n 9,\n 10,\n 13,\n 14,\n 15,\n 48,\n 49,\n 67,\n 78,\n 85,\n 88,\n 89,\n 90,\n 91,\n 92,\n 93,\n 94,\n 95,\n 96,\n 97,\n 98,\n 99,\n 100,\n 101,\n 102,\n 103,\n 104,\n 105,\n 106,\n 107,\n 108,\n 109,\n 110,\n 111,\n 112,\n 113,\n 114,\n 115,\n 117,\n 118,\n 119,\n 120,\n 121,\n 122,\n 123,\n 125,\n 126,\n 127,\n 128,\n 129,\n 130,\n 132,\n 142,\n 143,\n 144,\n 145,\n 146,\n 147,\n 148,\n 151,\n 152,\n 153,\n 154,\n 156,\n 157,\n 165,\n 168,\n 171,\n 174,\n 177,\n 180,\n 186,\n 189,\n 192,\n 195,\n 198,\n 201,\n 204,\n 207,\n 210,\n 213,\n 216,\n 219,\n 222,\n 225,\n 228,\n 231,\n 234,\n 261,\n 272,\n 275,\n 278,\n 281,\n 284,\n 287,\n 290,\n 293,\n 296,\n 299,\n 338,\n 349,\n 352,\n 355,\n 358,\n 361,\n 364,\n 367,\n 370,\n 373,\n 376,\n 379,\n 382,\n ],\n SITELOCK_BASIC: 107,\n SITELOCK_PROFESSIONAL: 108,\n SITELOCK_PREMIUM: 109,\n SITELOCK_ENTERPRISE: 110,\n SITELOCK_ALL: [\n 107,\n 108,\n 109,\n 110,\n ],\n PLUS_GID: 10,\n HOSPEDAGEM_PLUS: 47,\n PLUS_2: 83,\n PLUS_3: 84,\n REVENDA_PLUS: 86,\n PLUS_ALL: [\n 47,\n 83,\n 84,\n 86,\n ],\n DOMAINS_GID: 12,\n DOMINIO_INTERNACIONAL: 11,\n DOMINIO_NACIONAL: 12,\n TRANSFERENCIA_DOMINIO_INTERNACIONAL: 66,\n DOMAINS_ALL: [\n 11,\n 12,\n 66,\n ],\n STREAMING_GID: 13,\n RADIO_ONLINE_1: 79,\n RADIO_ONLINE_2: 80,\n RADIO_ONLINE_3: 81,\n RADIO_ONLINE_4: 82,\n STREAMING_1_AUTOMATICO: 116,\n STREAMING_ALL: [\n 79,\n 80,\n 81,\n 82,\n 116,\n ],\n WEEBLY_GID: 15,\n WEEBLY_HOST_INICIANTE: 149,\n WEEBLY_HOST_PRO: 150,\n WEEBLY_HOST_BASICO: 155,\n WEEBLY_ALL: [\n 149,\n 150,\n 154,\n 155,\n ],\n GAPPS_GID: 16,\n GOOGLE_APPS: 159,\n GAPPS_ALL: [\n 159,\n ],\n GAPPS_ADDON_MONTH: 6,\n GAPPS_ADDON_ANNUALY: 12,\n CODEGUARD_GID: 19,\n CODEGUARD_BASICO: 235,\n CODEGUARD_INICIANTE: 238,\n CODEGUARD_PROFISSIONAL: 241,\n CODEGUARD_PREMIUM: 244,\n CODEGUARD_ALL: [\n 235,\n 238,\n 241,\n 244,\n ],\n WPHOSTING_GID: 22,\n WORDPRESS_BLOG: 250,\n WORDPRESS_STARTUP: 253,\n WORDPRESS_PRO: 256,\n WORDPRESS_VIP: 259,\n WPHOSTING_ALL: [\n 250,\n 253,\n 256,\n 259,\n ],\n CRIADOR_SITES_GID: 23,\n CRIADOR_SITES_HOST_PESSOAL: 263,\n CRIADOR_SITES_HOST_PROFISSIONAL: 266,\n CRIADOR_SITES_HOST_LOJA: 269,\n CRIADOR_SITES_ALL: [\n 263,\n 266,\n 269,\n\n ],\n CRIADOR_SITES_ALL_AND_ADDONS: [\n 263,\n 266,\n 269,\n 272,\n 278,\n 284,\n 275,\n 281,\n 287,\n 338,\n ],\n PRODUCT_GROUPS: {\n ssl: [\n 296,\n 290,\n 293,\n 299,\n ],\n websitebuilder: [\n 263,\n 266,\n 269,\n 272,\n 278,\n 284,\n 275,\n 281,\n 287,\n 338,\n ],\n wphosting: [\n 250,\n 253,\n 256,\n 259,\n ],\n sitelock: [\n 107,\n 108,\n 109,\n 110,\n ],\n reseller: [\n 50,\n 51,\n 52,\n 53,\n 54,\n ],\n webpresence: [\n\n ],\n },\n STANDALONE_GROUPS: {\n sitelock: [\n 107,\n 108,\n 109,\n 110,\n ],\n websitebuilder: [\n 263,\n 266,\n 269,\n 272,\n 278,\n 284,\n 275,\n 281,\n 287,\n 338,\n ],\n wphosting: [\n 250,\n 253,\n 256,\n 259,\n ],\n codeguard: [\n 235,\n 238,\n 241,\n 244,\n ],\n weebly: [\n 149,\n 150,\n 155,\n ],\n gapps: [\n 159,\n ],\n radio: [\n 79,\n 80,\n 81,\n 82,\n 116,\n ],\n },\n PRODUCT_GIDS: {\n vps: 6,\n dedicated: 5,\n reseller: 4,\n shared: 1,\n wphosting: 22,\n weebly: 15,\n websitebuilder: 23,\n gapps: 16,\n plus: 10,\n },\n PORTAL_PRODUCT_IDS: [\n 247,\n 5,\n 6,\n 7,\n 155,\n 149,\n 150,\n 50,\n 51,\n 52,\n 53,\n 54,\n 56,\n 58,\n 60,\n 64,\n 57,\n 59,\n 61,\n 65,\n 134,\n 136,\n 138,\n 140,\n 47,\n 250,\n 256,\n 253,\n 259,\n 272,\n 278,\n 284,\n ],\n PRO_EMAIL_GID: 28,\n PRO_EMAIL_PRO_TRIAL: 430,\n PRO_EMAIL_PRO: 421,\n PRO_EMAIL_PREMIUM: 424,\n PRO_EMAIL_ULTRA: 443,\n PRO_EMAIL_ALL: [\n 421,\n 424,\n 430,\n 443,\n ],\n };\n","import React from 'react';\nimport simpleBr from '@/media/security/simple_br.svg';\nimport codeguard from '@/media/security/codeguard.svg';\nimport sitelock from '@/media/security/sitelock.svg';\nimport { Button, Link } from 'gatorcomponents';\nimport { IconDetailedAlert } from '@/icons/IconDetailedAlert';\nimport { IconDetailedBrush } from '@/icons/IconDetailedBrush';\nimport { IconDetailedProtection } from '@/icons/IconDetailedProtection';\nimport { HgProducts } from '@/components/SupportForms/SupportForms.types';\n\nexport default {\n cards: {\n title: 'Backup e Segurança',\n description: (\n <>\n {'Precisa restaurar seus dados ou de mais segurança no site site? '}\n Veja abaixo as opções disponíveis: \n \n ),\n items: [\n {\n id: 'simple',\n title: 'BACKUP SIMPLES E MANUAL',\n imgSrc: simpleBr,\n list: [\n <>\n Segurança ao seu alcance: \n {' Faça cópias da sua hospedagem cPanel sem custos adicionais;'}\n ,\n <>\n Restaure quando precisar: \n {' Restaure versões anteriores do seu site facilmente.'}\n ,\n <>\n Não possui um backup para restauração? \n {' Solicite para o suporte por uma pequena taxa.'}\n ,\n ],\n action: 'Acessar',\n },\n {\n id: 'codeguard',\n title: 'BACKUP AUTOMÁTICO',\n imgSrc: codeguard,\n list: [\n <>\n Proteção simplificada: \n {' Com o CodeGuard, os backups são automáticos;'}\n ,\n <>\n Sempre seguro: \n {' Garanta a integridade dos seus dados com backups regulares;'}\n ,\n <>\n Restauração rápida: \n {' Recupere seu site sem complicações e evite processos manuais.'}\n ,\n ],\n action: 'Saiba mais',\n },\n {\n id: 'sitelock',\n title: 'SEGURANÇA EXTRA',\n imgSrc: sitelock,\n list: [\n <>\n Proteção diária: \n {' Realize scans diários em busca de Malwares, garantindo a segurança contínua do seu site;'}\n ,\n <>\n Mostre sua credibilidade: \n {' Exiba o selo de segurança e inspire segurança nos seus visitantes;'}\n ,\n <>\n Reputação impecável: \n {' Monitore e gerencie a sua reputação online.'}\n ,\n ],\n action: 'Saiba mais',\n },\n ],\n },\n modal: {\n title: 'Lista de Planos',\n description: 'Selecione o plano desejado para realizar o seu backup.',\n select: {\n placeholder: 'Selecione um plano para continuar',\n label: 'Planos',\n },\n goToLabel: 'Ir para o Backup',\n status: {\n Active: 'Ativo',\n Suspended: 'Suspenso',\n Cancelled: 'Cancelado',\n Terminated: 'Cancelado',\n },\n },\n productsList: {\n title: 'Produtos contratados',\n filterLabel: 'Filtrar por',\n filterByPlaceholder: 'Busque por domínio',\n clearFilterLabel: 'Limpar filtros',\n description: (\n <>\n Aqui você vê os produtos contratados de:\n {' '}\n CodeGuard \n {' '}\n e\n {' '}\n SiteLock \n .\n \n ),\n due: 'Vencimento ',\n manage: 'Gerenciar',\n status: {\n Active: 'ATIVO',\n Pending: 'EM ANÁLISE',\n Suspended: 'SUSPENSO',\n Terminated: 'CANCELADO',\n Cancelled: 'CANCELADO',\n },\n },\n detailsPage: {\n tabs: {\n threats_detector: {\n title: 'Detecção de Ameaças',\n paidTitle: 'Detecção e remoção de Ameaças',\n noThreatsFounded: 'Não foram encontradas ameaças.',\n neverScanned: 'Estamos verificando seu site...',\n willShowScan: 'Exibiremos os resultados quando a verificação for finalizada.',\n threatsFounded: threats => (\n <>\n {'Encontramos '}\n {threats}\n {threats > 1 ? ' ameaças ' : ' ameaça '}\n {'no seu site!'}\n \n ),\n lastCheck: 'Última verificação',\n nextCheck: 'Próxima verificação',\n verifiedPages: 'Páginas verificadas',\n verifiedFiles: 'Arquivos verificados',\n noMalwaresFounded: 'Nenhum malware identificado',\n malwaresFounded: malwares => (\n <>\n {malwares}\n {malwares > 1 ? ' malwares idenfiticados' : ' malware idenfiticado'}\n \n ),\n vulnerabilities: {\n not_found: 'Nenhuma vulnerabilidade identificada',\n found: 'Vulnerabilidades idenfiticadas',\n },\n blocklists: {\n not_found: 'Nenhuma blocklist detectada',\n found: 'Blocklists idenfiticadas',\n },\n paidPlanNote: plan => `Seu site possui detecção e remoção automática de ameaças ativos com o ${plan}.`,\n freePlanNote: handleClick => (\n <>\n {'A verificação gratuita apenas detecta ameaças que estejam nos arquivos externos do seu site. Para uma proteção mais completa e verificação profunda do site, '}\n Atenção: \n {' Se houver problemas identificados na verificação do SiteLock, é importante corrigi-los em alguns dias para manter o selo. Caso contrário, o selo será removido. Não alertamos os visitantes sobre falhas na verificação.'}\n \n ),\n },\n preview: 'Pré-visualização:',\n saveToView: 'Salve as alterações para visualizar as mudanças',\n howToInsert: (\n <>\n Importante: \n {' '}\n Para que a varredura seja feita corretamente, certifique-se de que o seu domínio já está vinculado ao plano de hospedagem selecionado através dos dados de FTP inseridos.\n \n ),\n doubts: ({ handleClick }) => (\n <>\n {'Se tiver dúvidas sobre seu acesso FTP, '}\n {domain} \n \n ),\n paymentCicleLabel: 'Ciclo de pagamento:',\n cycleOptions: {\n annually: 'Anual',\n semiannually: 'Semestral',\n quarterly: 'Trimestral',\n monthly: 'Mensal',\n },\n cards: {\n currentPlanLabel: 'Seu plano atual',\n buyNowButtonLabel: 'Contrate agora',\n valueToPaidLabel: 'Valor a pagar',\n defaultOnHostPlanLabel: 'Incluso no seu plano de hospedagem.',\n items: [\n {\n plan: 'Sitelock Free',\n pid: 440,\n title: 'Grátis',\n list: [\n <>\n {'Proteção para '}\n 5 páginas \n ,\n 'Detecção de ameaças',\n 'Selo de segurança',\n ],\n },\n {\n plan: 'Sitelock Professional',\n pid: HgProducts.SITELOCK_PROFESSIONAL,\n title: 'Professional',\n list: [\n <>\n {'Proteção para até '}\n 100 páginas \n ,\n 'Remoção automática de Malwares',\n 'Verificação diária de FTP',\n 'Verificação de edição de arquivos',\n 'Monitoramento de blocklist',\n Todos os recursos do Grátis ,\n ],\n },\n {\n plan: 'Sitelock Premium',\n pid: HgProducts.SITELOCK_PREMIUM,\n title: 'Premium',\n list: [\n <>\n {'Proteção para até '}\n 500 páginas \n ,\n 'Verificação de segurança de rede',\n Todos os recursos do Professional ,\n ],\n },\n {\n plan: 'Sitelock Enterprise',\n pid: HgProducts.SITELOCK_ENTERPRISE,\n title: 'Enterprise',\n list: [\n <>\n {'Proteção para até '}\n 2500 páginas \n ,\n 'Verificação avançada de segurança',\n Todos os recursos do Premium ,\n ],\n },\n ],\n },\n wishOtherSitelock: handleClick => (\n <>\n {'Deseja proteger outro domínio com o '}\n {'SiteLock? '} \n 12 milhões de sites \n contam com a proteção do SiteLock\n \n ),\n detailsSectionFirstSectionTitle: 'Proteja seu site, sua reputação e seus visitantes',\n detailsSectionFirstSectionDescription: (\n <>\n Não jogue com segurança do site. Existem muitas ameaças na internet, e prevenir ataques é a melhor opção para evitar prejuízos.
\n \n O SiteLock tem\n um ótimo custo-benefício \n , e protege seu site de ameaças cibernéticas maliciosas.\n
\n \n ),\n detailsSectionFirstSectionButtonLabel: 'Quero proteger meu site',\n detailsSectionSecondSectionTitle: 'Não importa o tamanho do seu site, segurança nunca é demais',\n detailsSectionSecondSectionDescription: (\n <>\n Com o SiteLock você não tem trabalho. Ele monitora e\n remove ameaças automaticamente \n e com extrema facilidade, evitando dores de cabeça.\n \n ),\n detailsSectionSecondSectionButtonLabel: 'Quero proteger meu site',\n discoveryTitle: 'Descubra como o SiteLock protege o seu site',\n benefits: [\n {\n icon: Consulte a continuación las opciones disponibles: \n \n ),\n items: [\n {\n id: 'simple',\n title: 'BACKUP SIMPLE Y MANUAL',\n imgSrc: simpleEs,\n list: [\n <>\n Seguridad al alcance de su mano: \n {' Haga copias de su hosting cPanel sin costo adicional;'}\n ,\n <>\n Restaure cuando necesite: \n {' Restaure versiones anteriores de su sitio fácilmente.'}\n ,\n <>\n ¿No tiene un backup (copia de seguridad) para restaurar? \n {' Solicite soporte por una pequeña tarifa.'}\n ,\n ],\n action: 'Acceder',\n },\n {\n id: 'codeguard',\n title: 'BACKUP AUTOMATICO',\n imgSrc: codeguard,\n list: [\n <>\n Protección simplificada: \n {' Con CodeGuard, las copias de seguridad son automáticas;'}\n ,\n <>\n Siempre seguro: \n {' Garantice la integridad de sus datos con copias de seguridad periódicas;'}\n ,\n <>\n Restauración rápida: \n {' Recupere su sitio sin problemas y evite los procesos manuales.'}\n ,\n ],\n action: 'Sepa más',\n },\n ],\n },\n modal: {\n title: 'Lista de Planes ',\n description: 'Seleccione el plan deseado para realizar su backup',\n select: {\n placeholder: 'Seleccione um plan para continuar',\n label: 'Planes',\n },\n goToLabel: 'Ir para Backup',\n status: {\n Active: 'Activo',\n Suspended: 'Suspendido',\n Cancelled: 'Cancelado',\n Terminated: 'Cancelado',\n },\n },\n detailsPage: {\n tabs: {\n threats_detector: {\n title: '',\n paidTitle: '',\n noThreatsFounded: '',\n neverScanned: '',\n willShowScan: '',\n hasSitelock: '',\n threatsFounded: threats => (\n <>\n {threats}\n \n ),\n lastCheck: '',\n nextCheck: '',\n verifiedPages: '',\n verifiedFiles: '',\n noMalwaresFounded: '',\n malwaresFounded: malwares => (\n <>\n {malwares}\n \n ),\n noVulnerabilitiesFounded: '',\n vulnerabilitiesFounded: vulnerabilities => (\n <>\n {vulnerabilities}\n \n ),\n noBlocklistsFounded: '',\n blocklistsFounded: blocklists => (\n <>\n {blocklists}\n \n ),\n paidPlanNote: () => '',\n freePlanNote: () => '',\n signSitelockCard: {\n howToFixThreats: '',\n howToFixThreatsDescription: '',\n tag: '',\n title: '',\n description: '',\n subscribeButton: '',\n },\n },\n last_scans: {\n title: '',\n scanDate: '',\n pagesVerified: '',\n filesVerified: '',\n threatsFound: '',\n filesFixed: '',\n filesNeedFix: '',\n status: '',\n safe: '',\n unsafe: '',\n description: () => (\n <>\n \n ),\n emptyStateLabel: '',\n loadMore: '',\n signSitelockCard: {\n howToFixThreats: '',\n howToFixThreatsDescription: '',\n tag: '',\n title: '',\n description: '',\n subscribeButton: '',\n },\n emptyScans: '',\n goToFTP: '',\n },\n security_seal: {\n title: 'Selo de Segurança',\n description: {\n 0: 'Adicione um Selo de Segurança no seu site e mostre para os seus visitantes que ele é seguro para navegação.',\n 1: (\n <>\n Atenção: \n {' Se houver problemas identificados na verificação do SiteLock, é importante corrigi-los em alguns dias para manter o selo. Caso contrário, o selo será removido. Não alertamos os visitantes sobre falhas na verificação.'}\n \n ),\n },\n preview: 'Pré-visualização:',\n saveToView: 'Salve as alterações para visualizar as mudanças',\n howToInsert: (\n <>\n Senha
\n ••••••••
\n \n ),\n SectionButtonLabel: 'Alterar Senha',\n currentPwLabel: 'Senha atual',\n currentPwPlaceholder: 'Insira sua senha atual',\n newPwLabel: 'Nova senha',\n newPwPlaceholder: 'Insira sua nova senha',\n repeatNewPwLabel: 'Repita a nova senha',\n repeatNewPwPlaceholder: 'Repita a nova senha',\n\n errorCurrentEmpty: 'Prencha sua senha atual.',\n errorEmptyField: 'Preencha este campo.',\n errorCurrentMinimumCharacters: 'A senha deve ter no mínimo 6 caracteres.',\n errorMinimumCharacters: 'A senha deve ter no mínimo 8 caracteres.',\n errorMinimumRequirements: 'Sua senha não tem os requisitos mínimos de segurança.',\n errorConfirmNew: 'A confirmação de senha não confere.',\n notifierSuccess: 'Senha alterada com sucesso!',\n notifierError: 'Não foi possível alterar sua senha. Entre em contato com o suporte.',\n\n requirementsList: {\n listTitle: 'Sua nova senha deve:',\n upperAndLowerItem: 'Incluir caracteres maiúsculos e minúsculos',\n numberLabel: 'Incluir pelo menos 1 número',\n symbolLabel: 'Incluir pelo menos 1 símbolo',\n minCharLabel: 'Ter pelo menos 8 caracteres',\n sameOnBothLabel: 'Ser a mesma em ambos os campos',\n differentPasswords: 'A nova senha não pode ser igual a senha atual.',\n matchConfirmation: 'Os campos da senha precisam ser iguais',\n },\n\n modalDescription: () => (\n \n Apenas a\n {' '}\n senha de login do Portal HostGator \n {' '}\n será alterada com esta ação.\n
\n ),\n buttonLabel: 'Alterar senha',\n secondaryButtonLabel: 'Cancelar',\n\n requirementsTitle: 'Sua nova senha deve ter:',\n chips: {\n hasAtLeastEight: 'Mínimo de 8 caracteres',\n hasUpperCase: 'Letra maiúscula',\n hasLowerCase: 'Letra minúscula',\n hasSymbol: 'Caracteres especiais',\n hasNumber: 'Números',\n },\n },\n twoFactorAuth: {\n title: 'Autenticação de dois fatores',\n description: 'Adicione uma camada extra de segurança à sua conta.',\n status: {\n title: 'Status',\n enabled: 'Habilitado',\n disabled: 'Desabilitado',\n },\n statusButtonLabel: {\n enable: 'Habilitar',\n disable: 'Desabilitar',\n },\n snackbarRequestLimit: {\n title: 'Novo código enviado com sucesso.',\n label: attempts => `Resta${attempts === 1 ? '' : 'm'} ${attempts} tentativa${attempts === 1 ? '' : 's'} nas próximas 24 horas.`,\n },\n snackbarFeedback: type => `Autenticação de dois fatores ${type === 'enable' ? 'habilitada' : 'desabilitada'} com sucesso.`,\n chooseMethodModal: {\n title: type => `${type === 'enable' ? 'Habilitar' : 'Desabilitar'} autenticação de dois fatores`,\n description: 'Para garantir a segurança da sua conta, selecione como deseja receber o código de verificação:',\n email: 'E-mail no endereço:',\n sms: 'SMS no número:',\n whatsapp: 'WhatsApp no número:',\n primaryButtonLabel: 'Enviar código',\n secondaryButtonLabel: 'Voltar',\n notConfirmedPhoneValue: 'Não confirmado',\n noAttemptsLeftValue: 'Aguarde para tentar novamente',\n tooltip: {\n notConfirmedPhone: 'Este método não está disponível porque o número de telefone não foi confirmado. Para ativá-lo, acesse as informações da conta e confirme seu telefone de contato.',\n noAttemptsLeft: 'Você utilizou todas as solicitações de código disponíveis para este método. Será necessário aguardar 24h após a última solicitação para tentar novamente.',\n },\n requestLimit: {\n title: 'Você atingiu o limite de solicitações de código por hoje',\n description: 'Selecione outro método de verificação ou aguarde 24 horas para tentar novamente.',\n buttonLabel: 'Selecionar outro método de envio',\n },\n },\n validateCodeModal: {\n descriptionEmail: 'Enviamos um código temporário para o e-mail',\n descriptionSms: 'Enviamos um código temporário por SMS para o número',\n descriptionWhatsApp: 'Enviamos um código temporário por WhatsApp para o número',\n codeInputPlaceholder: 'Código de verificação',\n resendCodeMessage: 'Renviar código por e-mail em: ',\n resendButtonHelperText: 'Não recebeu o código?',\n resendCodeButtonLabel(time) {\n return time === '00:00' ? 'Reenviar' : `Reenviar em: ${time}`;\n },\n codeInputError: 'Código inválido',\n enable2FA: {\n title: 'Habilitar autenticação de dois fatores',\n buttonLabel: 'Validar código e habilitar',\n },\n disable2FA: {\n title: 'Desabilitar autenticação de dois fatores',\n warning: {\n title: 'Essa ação diminuirá a segurança da sua conta',\n description: 'Recomendamos manter essa camada extra de proteção para defender sua conta contra acessos não autorizados e possíveis fraudes.',\n },\n buttonLabel: 'Validar código e desabilitar',\n },\n },\n },\n};\n","import React from 'react';\n\nexport default {\n title: 'Datos personales y de contacto',\n address: 'Calle',\n privacy: 'Privacidad de los Datos',\n form: {\n addressLabel: 'Calle *',\n addressPlaceholder: 'Escriba aquí',\n birthCountryLabel: 'País de nascimento *',\n birthCountryPlaceholder: 'Selecione',\n birthDateLabel: 'Fecha de nacimiento *',\n birthDatePlaceholder: 'DD/MM/AAAA',\n cityLabel: 'Ciudad *',\n cityPlaceholder: 'Escriba aquí',\n companyNameLabel: 'Razón Social *',\n companyNameLabelPlaceholder: 'Escriba aquí',\n companyResponsible: 'Representante legal *',\n companyResponsiblePlaceholder: 'Escriba aquí',\n complementLabel: 'Complemento *',\n complementPlaceholder: 'Apt 00',\n countryLabel: 'País de residencia *',\n countryPlaceholder: 'Selecione',\n cpfCnpjLabel: '',\n documentLabel: '',\n documentPlaceholder: '',\n emailLabel: 'Correo Electrónico *',\n emailPlaceholder: 'Escriba aquí',\n foreignerLabel: '',\n isCompanyLabel: 'Soy Empresa',\n knowledgeLabel: 'Nivel de conocimiento',\n knowledgePlaceholder: 'Selecione',\n mailSubscribeLabel: 'Recibir notificaciones por e-mail',\n mailSubscribeTooltip: 'Con esta opción activada estarás autorizándonos a enviar mensajes promocionales y últimas actualizaciones de contenido de nuestras plataformas.',\n nameLabel: 'Nombre completo *',\n namePlaceholder: 'Escriba aquí',\n neighborhoodLabel: 'Colonia *',\n neighborhoodPlaceholder: 'Escriba aquí',\n numberAndComplementLabel: 'Número exterior/interior *',\n numberAndComplementPlaceholder: '00',\n phoneLabel: 'Celular *',\n phonePlaceholder: 'Escriba aquí',\n postalCodeHelp: '',\n postalCodeLabel: 'Código Postal *',\n postalCodePlaceholder: 'Escriba aquí',\n stateLabel: 'Estado *',\n statePlaceholder: 'Escriba aquí',\n },\n errors: {\n birthDate: 'Ingresa una fecha válida',\n postalCode: 'Código postal no válido',\n cnpj: '',\n cpf: '',\n email: 'Ingresa una dirección de correo electrónico válida',\n numberAndComplement: 'No se permiten caracteres especiales',\n name: 'El nombre debe tener 2 palabras con mínimo 2 letras y máximo 50',\n companyName: '',\n phone: 'Digite um telefone válido',\n required: 'Campo obligatorio',\n state: 'Estado no válido',\n },\n findMyCep: 'Buscar mi código postal',\n knowledgeLevels: {\n beginner: 'Principiante',\n intermediary: 'Intermedia',\n technical: 'Técnica',\n },\n cancel: 'Cancelar',\n save: 'Guardar alterações',\n snackBar: {\n updateSuccess: 'Tus datos fueron actualizados con suceso',\n updateError: 'Error al actualizar tus datos',\n emailAlreadyExists: 'Tu correo ya está registrado en nuestro sistema.',\n },\n\n changePassword: {\n title: 'Login Portal HostGator',\n modalTitle: 'Cambiar contraseña',\n contentDescription: () => (\n <>\n Contraseña
\n ••••••••
\n \n ),\n SectionButtonLabel: 'Cambiar contraseña',\n currentPwLabel: 'Contraseña actual',\n currentPwPlaceholder: 'Introduzca tu contraseña actual',\n newPwLabel: 'Nueva contraseña',\n newPwPlaceholder: 'Introduzca la nueva contraseña',\n repeatNewPwLabel: 'Repita la nueva contraseña',\n repeatNewPwPlaceholder: 'Repita la nueva contraseña',\n\n errorCurrentEmpty: 'Escribe tu contraseña actual.',\n errorEmptyField: 'Completa este campo.',\n errorCurrentMinimumCharacters: 'La contraseña debe tener un mínimo de 6 caracteres.',\n errorMinimumCharacters: 'Debe tener mínino 8 caracteres.',\n errorMinimumRequirements: 'Tu contraseña no cumple con los requisitos mínimos de seguridad.',\n errorConfirmNew: 'Las contraseñas no coinciden.',\n notifierSuccess: 'Contraseña cambiada con éxito!',\n notifierError: 'No fue posible cambiar tu contraseña. Por favor entra en contacto con soporte.',\n\n requirementsList: {\n listTitle: 'Su nueva contraseña debe:',\n upperAndLowerItem: 'Incluir caracteres en mayúsculas y minúsculas',\n numberLabel: 'Incluir al menos 1 número',\n symbolLabel: 'Incluir al menos 1 símbolo',\n minCharLabel: 'Tener al menos 8 caracteres',\n sameOnBothLabel: 'Ser iguales en ambos campos',\n differentPasswords: 'La nueva contraseña no puede ser igual a la actual',\n matchConfirmation: 'Las contraseñas deben ser iguales.',\n },\n\n modalDescription: () => (\n \n Solo se cambiará la\n {' '}\n contraseña de inicio de sesión del Portal HostGator \n {' '}\n con esta acción.\n
\n ),\n buttonLabel: 'Cambiar contraseña',\n secondaryButtonLabel: 'Cancelar',\n\n requirementsTitle: 'Su nueva contraseña debe tener:',\n chips: {\n hasAtLeastEight: 'Mínimo de 8 caracteres',\n hasUpperCase: 'Letra mayúscula',\n hasLowerCase: 'Letra minúscula',\n hasSymbol: 'Caracteres especiales',\n hasNumber: 'Números',\n },\n },\n twoFactorAuth: {\n title: 'Autenticación de dos factores',\n description: 'Agregue una capa adicional de seguridad a su cuenta.',\n status: {\n title: 'Status',\n enabled: 'Activado',\n disabled: 'Desactivado',\n },\n statusButtonLabel: {\n enable: 'Activar',\n disable: 'Desactivar',\n },\n snackbarRequestLimit: {\n title: '¡Nuevo código enviado con éxito!',\n label: attempts => `$Queda${attempts === 1 ? '' : 'n'} ${attempts} solicitud${attempts === 1 ? '' : 'es'} en las próximas 24 horas.`,\n },\n snackbarFeedback: type => `Autenticación de dos factores ${type === 'enable' ? 'activada' : 'desactivada'} con éxito`,\n chooseMethodModal: {\n title: type => `${type === 'enable' ? 'Activar' : 'Desactivar'} autenticación de dos factores`,\n description: 'Para garantizar la seguridad de su cuenta, seleccione cómo desea recibir el código de verificación:',\n email: 'Correo electrónico:',\n sms: 'SMS al número:',\n whatsapp: 'WhatsApp al número:',\n primaryButtonLabel: 'Enviar código',\n secondaryButtonLabel: 'Volver',\n notConfirmedPhoneValue: 'No confirmado',\n noAttemptsLeftValue: 'Espere para intentarlo nuevamente',\n tooltip: {\n notConfirmedPhone: 'Este método no está disponible porque el número de teléfono no ha sido confirmado. Para activarlo, vaya a las informaciones de su cuenta y confirme su teléfono de contacto.',\n noAttemptsLeft: 'Ha utilizado todas las solicitudes de código disponibles para este método. Será necesario esperar 24 horas después de la última solicitud para volver a intentarlo.',\n },\n requestLimit: {\n title: 'Ha alcanzado el límite de solicitudes de código disponibles por hoy.',\n description: 'Seleccione otro método de verificación o espere 24 horas para volver a intentarlo.',\n buttonLabel: 'Seleccionar otro método de envío',\n },\n },\n validateCodeModal: {\n descriptionEmail: 'Enviamos un código temporal al correo electrónico',\n descriptionSms: 'Enviamos un código temporal por SMS al número',\n descriptionWhatsApp: 'Enviamos un código temporal por WhatsApp al número',\n codeInputPlaceholder: 'Código de verificación',\n resendCodeMessage: 'Reenviar el código a: ',\n resendButtonHelperText: '¿No recibiste el código?',\n resendCodeButtonLabel(time) {\n return time === '00:00' ? 'Reenviar' : `Reenviar em: ${time}`;\n },\n codeInputError: 'Código inválido',\n enable2FA: {\n title: 'Activar la autenticación de dos factores',\n buttonLabel: 'Validar código y habilitar',\n },\n disable2FA: {\n title: 'Desactivar la autenticación de dos factores',\n warning: {\n title: 'Esta acción disminuirá la seguridad de su cuenta',\n description: 'Recomendamos que mantenga esta capa adicional de protección para defender su cuenta de accesos no autorizados y posibles fraudes.',\n },\n buttonLabel: 'Validar código y desactivar',\n },\n },\n },\n};\n","import esContent from './myData.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './myData.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './myData.es';\n\nexport default {\n ...esContent,\n};\n","import myDataBR from './myData.br';\nimport myDataCL from './myData.cl';\nimport myDataCO from './myData.co';\nimport myDataMX from './myData.mx';\n\nconst locales = {\n BR: myDataBR,\n CL: myDataCL,\n CO: myDataCO,\n MX: myDataMX,\n};\n\nexport default locales;\n","\nimport React from 'react';\n\nexport default {\n emailNotRecived: 'Não recebeu o e-mail?',\n resendText: 'Enviar novamente em ',\n validateEmail: {\n title: 'Confirme seu e-mail',\n description: ({ email }) => (\n <>\n {'Para sua segurança, enviamos um link para '}\n {email} \n . Acesse seu e-mail para finalizar o procedimento.\n \n ),\n tryResendDescription: 'Tente o reenvio do e-mail de validação ou abra um chamado para que possamos validar que a conta é sua e então fazermos a troca do e-mail de cadastro.',\n resendButtonLabel: 'Reenviar e-mail de validação',\n resendIn: seconds => `Reenviar em ${seconds}s`,\n changeEmail: 'Alterar e-mail',\n },\n changeMail: {\n tip: (\n \n Dica: \n {' Use um e-mail pessoal (ex: @gmail) para não correr o risco de perder o acesso.'}\n \n ),\n title: 'Altere seu e-mail de cadastro',\n description: ({ email }) => (\n <>\n {'Por segurança, enviaremos um link para o e-mail atual '}\n {email} \n {' para que você valide a troca.'}\n \n ),\n form: {\n mailLabel: 'Novo e-mail',\n mailPlaceholder: 'Digite seu e-mail',\n checkEmailLabel: 'Confirme seu novo e-mail',\n checkEmailPlaceholder: 'Digite novamente seu e-mail',\n passwordLabel: 'Senha do portal do cliente',\n passwordPlaceholder: 'Digite sua senha',\n errors: {\n invalidEmail: 'Digite um email válido',\n emailsDoesntMatch: 'Ops! Parece que os e-mails não estão iguais.',\n requiredEmail: 'Campo obrigatório',\n passwordTooShort: 'A senha deve ter no mínimo 6 caracteres.',\n },\n submitLabel: 'Enviar e-mail de validação',\n },\n noAccessTitle: 'Não tem mais acesso ao seu e-mail atual?',\n noAccessDescription: 'Será necessário abrir um chamado para que possamos validar que a conta é sua e então fazermos a troca do e-mail de cadastro.',\n noAccessForm: 'Abrir chamado',\n },\n sentEmail: {\n title: 'Valide a alteração do e-mail de cadastro',\n description: ({ email }) => (\n <>\n {'Acesse o seu e-mail atual '}\n {email} \n {' e no e-mail que enviamos, valide a alteração.'}\n \n ),\n tryResendDescription: 'Tente o reenvio do e-mail de validação ou abra um chamado para que possamos validar que a conta é sua e então fazermos a troca do e-mail de cadastro.',\n resendButtonLabel: 'Reenviar e-mail de validação',\n openFormButtonLabel: 'Abrir chamado',\n },\n feedback: {\n emailSendAttempts: ({ attempts, used }) => `Você solicitou ${used} e-mail${used > 1 ? 's' : ''} nas últimas 24 horas, restam ${attempts} solicitações`,\n noMoreAttempts: () => 'Você esgotou as solicitações de confirmação, tente novamente amanhã',\n blockedUntil: 'Aguarde para solicitar o reenvio do e-mail de validação novamente',\n resendError: 'Não foi possível fazer o reenvio neste momento. Por favor, mude o e-mail ou tente novamente mais tarde.',\n changeSuccess: 'Verifique seu e-mail e clique no link de confirmação.',\n dataInUse: 'O e-mail informado já está em uso no seu cadastro. Para prosseguir, informe outro e-mail.',\n password: 'Senha incorreta. Por favor, tente novamente.',\n emailInDataBase: 'Ops! Este e-mail já está cadastrado. Por favor, escolha um novo endereço de e-mail.',\n alreadyValidated: ({ hours, date }) => `E-mail confirmado à menos de 24 horas, você poderá alterar este e-mail às ${hours} horas do dia ${date}.`,\n changeError: 'Tente novamente mais tarde ou altere o e-mail.',\n resendSuccess: 'Reenviamos. Por favor, verifique seu e-mail novamente.',\n emailAlreadyRegistered: 'E-mail já cadastrado, tente outro.',\n },\n};\n","\nimport React from 'react';\n\nexport default {\n emailNotRecived: '¿Ya no tiene acceso a su correo electrónico actual?',\n resendText: 'Enviar nuevamente en ',\n validateEmail: {\n title: 'Confirme su correo electrónico',\n description: ({ email }) => (\n <>\n {'Para su seguridad, le enviamos un enlace a '}\n {email} \n . Acceda a su correo electrónico para finalizar el procedimiento.\n \n ),\n tryResendDescription: 'Intente volver a enviar el correo electrónico de validación o abrir un ticket para que podamos validar que la cuenta es suya y luego cambiamos el correo electrónico de registro.',\n resendButtonLabel: 'Reenviar correo de validación',\n resendIn: seconds => `Reenviar en ${seconds}s`,\n changeEmail: 'Cambiar correo electrónico',\n },\n changeMail: {\n tip: (\n \n Consejo: \n {' Use una dirección de correo electrónico personal (por ejemplo, @gmail) para no correr el riesgo de perder el acceso.'}\n \n ),\n title: 'Cambie su correo electrónico',\n description: ({ email }) => (\n <>\n {'Por seguridad, enviaremos un enlace a su correo electrónico actual '}\n {email} \n {' para validar el cambio.'}\n \n ),\n form: {\n mailLabel: 'Nuevo correo electrónico',\n mailPlaceholder: 'Digite su correo electrónico',\n checkEmailLabel: 'Confirme su nuevo correo electrónico',\n checkEmailPlaceholder: 'Digite nuevamente su correo electrónico',\n passwordLabel: 'Contraseña del Portal del Cliente',\n passwordPlaceholder: 'Digite su contraseña',\n errors: {\n invalidEmail: 'Introduzca un correo electrónico válido',\n emailsDoesntMatch: '¡Ops! Parece que los correos electrónicos no están iguales.',\n requiredEmail: 'Campo obligatorio',\n passwordTooShort: 'La contraseña debe tener un mínimo de 6 caracteres.',\n },\n submitLabel: 'Enviar correo de validación',\n },\n noAccessTitle: '¿Ya no tiene acceso a su correo electrónico actual? ',\n noAccessDescription: 'Será necesario abrir un ticket para que podamos validar que la cuenta es suya y luego cambiar el correo electrónico de registro.',\n noAccessForm: 'Abrir ticket',\n },\n sentEmail: {\n title: 'Valide el cambio del correo electrónico de registro',\n description: ({ email }) => (\n <>\n {'Ingrese a su correo actual '}\n {email} \n {' y en el correo electrónico que enviamos, valide el cambio.'}\n \n ),\n tryResendDescription: 'Intente volver a enviar el correo electrónico de validación o abrir un ticket para que podamos validar que la cuenta es suya y luego cambiamos el correo electrónico de registro.',\n resendButtonLabel: 'Reenviar correo de validación',\n openFormButtonLabel: 'Abrir ticket',\n },\n feedback: {\n noMoreAttempts: () => 'Ha agotado las solicitudes de confirmación, inténtalo de nuevo mañana',\n emailSendAttempts: ({ attempts, used }) => `Ha solicitado ${used} correo${used > 1 ? 's' : ''} electrónico${used > 1 ? 's' : ''} en las últimas 24 horas, quedan ${attempts} solicitudes`,\n alreadyValidated: ({ hours, date }) => `Correo electrónico confirmado hace menos de 24 horas, puede cambiar este correo electrónico a las ${hours} horas del día ${date}.`,\n blockedUntil: 'Espere para solicitar el reenvio del correo electrónico de validación nuevamente',\n resendSuccess: 'Reenviamos. Por favor, verifica tu correo electrónico nuevamente.',\n resendError: 'No fue posible realizar el reenvío. Por favor, cambia tu correo o intenta nuevamente más tarde',\n changeSuccess: 'Compruebe su correo electrónico y haga clic en el enlace de confirmación.',\n changeError: 'Inténtelo de nuevo más tarde o cambie el correo electrónico.',\n password: 'Contraseña incorrecta. Por favor, intente de nuevo.',\n dataInUse: 'El correo electrónico informado ya está en uso en su registro. Para continuar, informe otro correo electrónico.',\n emailInDataBase: '¡Ups! Este correo electrónico ya está registrado. Por favor, elija una nueva dirección de correo electrónico.',\n emailAlreadyRegistered: 'Correo electrónico ya registrado, intente con otro.',\n },\n};\n","import esContent from './emailVerify.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './emailVerify.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './emailVerify.es';\n\nexport default {\n ...esContent,\n};\n","import emailVerifyBR from './emailVerify.br';\nimport emailVerifyCL from './emailVerify.cl';\nimport emailVerifyCO from './emailVerify.co';\nimport emailVerifyMX from './emailVerify.mx';\n\nconst locales = {\n BR: emailVerifyBR,\n CL: emailVerifyCL,\n CO: emailVerifyCO,\n MX: emailVerifyMX,\n};\n\nexport default locales;\n","export default {\n logoutModal: {\n title: 'Su sesión expiró',\n description: 'Su sesión ha estado activa durante mucho tiempo, por razones de seguridad y protección de datos, se ha cerrado. Para continuar en el Portal del Cliente, haga clic en \"Entrar nuevamente\" e inicie sesión en el portal.',\n cta: 'Entrar nuevamente',\n },\n logoBuilderGuide: {\n title: '¡Crea gratis!',\n description: 'Amplía tu audiencia con un enlace único para tu negocio.',\n },\n};\n","import esContent from './template.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './template.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './template.es';\n\nexport default {\n ...esContent,\n};\n","import templateBR from './template.br';\nimport templateCL from './template.cl';\nimport templateCO from './template.co';\nimport templateMX from './template.mx';\n\nconst locales = {\n BR: templateBR,\n CL: templateCL,\n CO: templateCO,\n MX: templateMX,\n};\n\nexport default locales;\n","/* eslint-disable react/jsx-curly-brace-presence */\nexport default {\n logoutModal: {\n title: 'Sua sessão expirou',\n description: 'Sua sessão já está ativa há bastante tempo, por questões de segurança e proteção de dados, ela foi encerrada. Para continuar no Portal do Cliente, clique em \"Entrar novamente\" e realize o login no portal.',\n cta: 'Entrar novamente',\n },\n logoBuilderGuide: {\n title: 'Crie sua logo profissional',\n description: 'Experimente criar sua logo gratis em seu plano!',\n },\n};\n","import React from 'react';\n\nexport default {\n goToPlaylist: 'Ver playlist',\n bannerDescription: (\n <>\n Acompanhe as lives diárias com nossos especialistas e\n {' '}\n inicie sua jornada online. \n \n ),\n live: 'LIVE',\n daily: isDesktop => (\n <>\n {'De Segunda a Sexta, '}\n {isDesktop && das 9h às 11h e 14h às 16h. \n \n ),\n close: 'Fechar',\n notShowAgainLabel: 'Não mostrar novamente',\n};\n","export default {\n liveButtonLabel: '',\n playlistButtonLabel: '',\n live: '',\n class: '',\n close: '',\n notShowAgainLabel: '',\n};\n","import phoneValidation from './videoClasses.es';\n\nexport default {\n ...phoneValidation,\n};\n","import phoneValidation from './videoClasses.es';\n\nexport default {\n ...phoneValidation,\n};\n","import phoneValidation from './videoClasses.es';\n\nexport default {\n ...phoneValidation,\n};\n","import videoClassesBR from './videoClasses.br';\nimport videoClassesCL from './videoClasses.cl';\nimport videoClassesCO from './videoClasses.co';\nimport videoClassesMX from './videoClasses.mx';\n\nconst videoClasses = {\n BR: videoClassesBR,\n CL: videoClassesCL,\n CO: videoClassesCO,\n MX: videoClassesMX,\n};\n\nexport default videoClasses;\n","export const RuleActionTypes = {\n COUNTRY: 'country',\n CONTINENT: 'continent',\n URL: 'url',\n SOURCE_IP_ADDRESS: 'source_ip_address',\n};\n","export const FEATURES = {\n PURGE_CACHE: 'purge_cache',\n DEV_MODE: 'dev_mode',\n UNDER_ATTACK_MODE: 'under_attack_mode',\n ALWAYS_ONLINE: 'always_online',\n};\n\nexport const ERROR_MODAL_STATUS = {\n GENERIC: 'GENERIC',\n PURGE_CACHE: 'PURGE_CACHE',\n BLOCKING_ERROR: 'BLOCKING_ERROR',\n};\n\nexport const SUCCESS_MODAL_STATUS = {\n GENERIC: 'GENERIC',\n ADD_NEW_RULE: 'ADD_NEW_RULE',\n DELETE_RULE: 'DELETE_RULE',\n};\n\nexport const CONFIRM_MODAL = {\n DELETE_RULE: 'DELETE_RULE',\n};\n\nexport const TABS = {\n tools: 'tools',\n speed: 'speed',\n visitors: 'visitors',\n progressBar: 'progressBar',\n security: 'security',\n};\n","import { RuleActionTypes } from '@/pages/Products/CloudFlare/ManageCloudFlareHandler/components/Security/Security.types';\nimport { FEATURES } from '@/pages/Products/CloudFlare/ManageCloudFlareHandler/ManageCloudFlareHandler.types';\nimport { format } from 'date-fns';\nimport { Button, Link } from 'gatorcomponents';\nimport React from 'react';\n\nexport default {\n hostingLabel: 'Hospedagem: ',\n change: 'Alterar',\n cloudflareCdnExplanation: ({ handleWhatIsCdn }) => (\n <>\n {'Acelere seu site e tenha mais segurança ao ativar a CDN integrada a Cloudflare. '}\n \n \n A CDN\n \n {' já está ativa nesse site, deixando-o mais rápido e seguro.'}\n \n ),\n showMore: 'Mostrar mais',\n changePlanModal: {\n title: 'Selecione um domínio',\n searchPlaceholder: 'Buscar por domínio',\n mainDomain: 'Domínio principal',\n back: 'Voltar',\n continue: 'Continuar',\n },\n activateDeactivateInternalModal: {\n toActivateTitle: 'Ativar a CDN',\n toDeactivateTitle: 'Desativar a CDN',\n activatingTitle: 'Ativação da CDN em andamento',\n deactivatingTitle: 'Desativação da CDN em andamento',\n toActivateDescription: 'Ative a CDN e deixe seu site mais rápido e seguro. As mudanças podem levar até 24 horas.',\n toDeactivateDescription: 'Desativar a CDN pode deixar seu site mais lento e menos seguro. As mudanças podem levar até 24 horas.',\n activatingDescription: 'A ativação da sua CDN foi solicitada e está em andamento. Acompanhe a atualização do status na tela de gerenciamento.',\n deactivatingDescription: 'A desativação da sua CDN foi solicitada e está em andamento. Acompanhe a atualização do status na tela de gerenciamento.',\n cancelCta: 'Cancelar',\n confirmationCta: 'Ok, entendi',\n continueActivationCta: 'Ativar a CDN',\n continueDeactivationCta: 'Desativar a CDN',\n failedRequestTitle: 'Ocorreu um erro na sua solicitação',\n failedRequestDescription: 'Algo deu errado enquanto processavamos sua solicitação. Por favor, tente novamente.',\n domainWithProblemTitle: 'Domínio temporariamente indisponível',\n domainWithProblemDescription: 'Não foi possível ativar a CDN por conta de problemas no seu domínio, por favor, entre em contato com o seu registrante e confirme se há alguma pendência.',\n },\n nameServerTooltip: (ns1, ns2) => (\n <>\n \n {'Servidor 1: '}\n \n {ns1}\n \n {'Servidor 2: '}\n \n {ns2}\n \n ),\n refreshStatus: 'Atualizar status da listagem',\n noOpenStatus: 'Você não possui status em aberto',\n waitRefreshTimeLimit: 'Aguarde até 1 hora para atualizar o status novamente',\n domainsError: 'Ocorreu um problema ao processar sua solicitação. Caso persista, tente novamente mais tarde.',\n refreshList: 'Recarregar lista',\n messageWithActivationError: 'Ocorreu um erro na sua configuração. Tente novamente, e se o problema continuar, contate o suporte.',\n messageWithDeactivationError: 'Ocorreu um erro na sua tentativa de desativação da CDN. Tente novamente, e se o problema continuar, contate o suporte.',\n genericErrorModal: {\n title: 'Ocorreu um erro na sua solicitação',\n description: 'Algo deu errado enquanto processávamos sua solicitação. Por favor, tente novamente.',\n buttonLabel: 'Ok, entendi',\n },\n genericSuccessModal: {\n title: 'Sua alteração foi realizada com sucesso.',\n description: '',\n buttonLabel: 'Ok, entendi',\n },\n deleteRuleConfirmModal: {\n title: 'Tem certeza que deseja excluir essa regra de bloqueio?',\n description: '',\n primaryButtonLabel: 'Sim, quero excluir',\n secondaryButtonLabel: 'Cancelar',\n },\n deleteRuleSuccessModal: {\n title: 'Sua regra de bloqueio foi excluída com sucesso.',\n description: '',\n buttonLabel: 'Ok, entendi',\n },\n blockingErrorModal: {\n title: 'Ocorreu um erro em seu bloqueio',\n description: 'Houve um problema em sua tentativa de bloqueio. Por favor, tente novamente.',\n buttonLabel: 'Ok, entendi',\n },\n manageCdnHandler: {\n hostingLabel: planName => `Hospedagem: ${planName}`,\n selectedDomainLabel: 'Domínio selecionado',\n changeButtonLabel: 'Alterar',\n readMoreButton: toggleOn => (toggleOn ? 'Ler menos' : 'Ler mais'),\n footerLabel: 'Essas funcionalidades utilizam os recusos da Cloudflare',\n cdnCards: {\n [FEATURES.PURGE_CACHE]: {\n cardTitle: 'Limpar cache',\n cardDescription: 'Apague os arquivos em cache para forçar o sistema a buscar uma nova versão desses arquivos do seu servidor web. Limpar o cache pode fazer com que o seu site fique mais lento temporariamente e sobrecarregar o seu servidor.',\n button: {\n buttonLabel: 'Limpar cache',\n secondsRemainingTooltip: ({ seconds }) => (\n <>\n {'Aguarde '}\n {seconds}\n {seconds > 1 ? ' segundos' : ' segundo'}\n {' para limpar cache novamente'}\n \n ),\n },\n },\n [FEATURES.DEV_MODE]: {\n cardTitle: 'Visualizar mudanças no site em tempo real',\n cardDescription: 'Desativa temporariamente alguns recursos como armazenamento em cache, compressão e otimização de arquivos, por três horas (a menos que você os desative antes). Isso permite que você veja imediatamente qualquer mudança que faça no seu site.',\n tooltipLabel: (\n <>\n {'Essa funcionalidade utiliza o '}\n modo desenvolvedor \n {' da Cloudflare'}\n \n ),\n secondsRemainingTooltip: ({ seconds, isActive }) => (\n <>\n {'Aguarde '}\n {seconds}\n {seconds > 1 ? ' segundos' : ' segundo'}\n {' para '}\n {isActive ? 'desativar' : 'ativar'}\n {' essa funcionalidade novamente'}\n \n ),\n },\n [FEATURES.UNDER_ATTACK_MODE]: {\n cardTitle: 'Modo sob ataque',\n cardDescription: 'Faz verificações extras para proteger seu site contra ataques de vírus. Ele permite o bloqueio do tráfego suspeito. Use este modo quando seu site estiver sendo atacado. Quando ativado, os visitantes verão uma página de espera antes de acessar o site.',\n secondsRemainingTooltip: ({ seconds, isActive }) => (\n <>\n {'Aguarde '}\n {seconds}\n {seconds > 1 ? ' segundos' : ' segundo'}\n {' para '}\n {isActive ? 'desativar' : 'ativar'}\n {' essa funcionalidade novamente'}\n \n ),\n },\n [FEATURES.ALWAYS_ONLINE]: {\n cardTitle: 'Manter site sempre online',\n cardDescription: 'Mantenha o seu site acessível mesmo quando o servidor estiver fora do ar. Essa função usa cópias das suas páginas guardadas no Wayback Machine (serviço online que arquiva e permite visualizar versões antigas de sites da internet).',\n tooltipLabel: (\n <>\n {'Essa funcionalidade utiliza o '}\n always online \n {' da Cloudflare'}\n \n ),\n secondsRemainingTooltip: ({ seconds, isActive }) => (\n <>\n {'Aguarde '}\n {seconds}\n {seconds > 1 ? ' segundos' : ' segundo'}\n {' para '}\n {isActive ? 'desativar' : 'ativar'}\n {' essa funcionalidade novamente'}\n \n ),\n },\n },\n cleanCacheModal: {\n successTitle: 'Limpeza de cache realizada',\n successDescription: 'Seu site será atualizado com a última versão disponível no servidor original.',\n\n failureTitle: 'Ocorreu um erro ao limpar o cache',\n failureDescription: 'Houve um problema ao tentar limpar o cache. Por favor, tente novamente.',\n\n loadingTitle: 'Limpeza de cache em andamento',\n okButtonLabel: 'Ok, entendi',\n },\n cleanCacheModalError: {\n title: 'Ocorreu um erro ao limpar o cache',\n description: 'Houve um problema ao tentar limpar o cache. Por favor, tente novamente.',\n buttonLabel: 'Ok, entendi',\n },\n tabs: {\n speed: 'Teste de velocidade',\n visitors: 'Visitantes',\n tools: 'Ferramentas',\n security: 'Segurança',\n },\n speedAnalysis: {\n title: 'Teste de velocidade',\n listTitle: 'Detalhes do desempenho de seu site',\n firstRow: `Faça o teste de velocidade para analisar o tempo de carregamento das páginas, identificando possíveis problemas\nde desempenho. Tenha uma maior taxa de conversão ao garantir um site mais rápido e eficiente.`,\n secondRow: 'Você pode realizar até 30 testes por mês. Após atingir esse limite, os testes serão renovados no mês seguinte.',\n stillHave: ({ amount }) => (\n <>\n {'Você ainda possui '}\n \n {amount}\n {' testes'}\n \n {' para realizar'}\n \n ),\n dontHave: (\n <>\n {'Você já '}\n atingiu o limite \n {' de testes'}\n \n ),\n initTestLabel: 'Iniciar teste',\n reduTestLabel: 'Refazer teste',\n showList: 'Mostrar detalhes',\n hideList: 'Ocultar detalhes',\n testDate: date => `Resultado do teste: ${format(date, 'dd/MM/yyyy H:m')}`,\n results: {\n title: 'Resultado do seu teste',\n analysisTitle: {\n good: 'O site está com um rápido desempenho',\n neutral: 'O site está com um desempenho moderado',\n bad: 'Seu site está com um baixo desempenho',\n },\n failedTitle: 'Falha ao realizar seu teste',\n failedDescription: domain => `Não foi possível realizar o teste de velocidade no domínio “${domain}” Confira se esse domínio está hospedado em nosso servidor e tente novamente.`,\n items: {\n ttfb: 'Tempo até o primeiro byte carregar (TTFB)',\n ttfbTooltip: 'Time to First Byte é o tempo que o seu computador demora para começar a receber as primeiras informações de um site depois que você clica para acessá-lo. Quanto menor esse tempo, mais rápido o site vai aparecer para você.',\n fcp: 'Tempo do primeiro conteúdo da tela aparecer (FCP)',\n fcpTooltip: ' First Contentful Paint é o momento em que você começa a ver algo útil na tela ao carregar um site. É a primeira vez que o site mostra algo que você pode ver, como texto, imagens ou gráficos. Quanto mais rápido isso acontece, mais rápido você sente que o site está carregando.',\n lcp: 'Tempo que o maior conteúdo do site aparece (LCP)',\n lcpTooltip: 'Largest Contentful Paint é quando o maior e mais relevante pedaço de conteúdo aparece na tela, como uma grande imagem, um vídeo ou um bloco de texto principal. Quanto mais rápido isso acontece, mais rápido você sente que o site terminou de carregar o conteúdo principal.',\n tti: 'Tempo para o site estar pronto para uso (TTI)',\n ttiTooltip: 'Time to Interactive é o tempo que o site leva para estar pronto para ser usado, isso significa o tempo que ele leva para não apenas aparecer, mas estar totalmente pronto para você interagir com ele, sem travar ou demorar para responder.',\n tbt: 'Tempo de travamento durante o carregamento (TBT)',\n tbtTooltip: 'Total Blocking Time mede o tempo em que o site está travado e não responde a interações, como cliques ou digitação. É o período em que ele está carregando ou processando algo e não responde a você imediatamente. Quanto menor esse tempo, mais fluida é a experiência de uso.',\n si: 'Velocidade com que o conteúdo visível do site aparece (SI)',\n siTooltip: 'Speed Index é uma medida de quão rápido o conteúdo visível de um site aparece enquanto ele está carregando. É uma forma de medir quão rapidamente você vê a página ganhando forma e se tornando útil, mesmo que ainda não esteja carregando completamente. Quanto menor o índice, mais rápido você vê o site se tornando visível.',\n cls: 'Estabilidade visual da página ao carregar (CLS)',\n clsTooltip: 'Cumulative Layout Shift mede o quanto o conteúdo de um site muda de lugar enquanto ele está carregando. Para um site, é quando o texto ou as imagens mudam de posição enquanto você está tentando interagir com a página. Quanto menor a mudança, mais estável e confortável é a experiência de uso.',\n },\n },\n historyList: {\n title: 'Histórico de resultados',\n date: 'Data',\n domain: 'Domínio',\n score: 'Pontuação',\n showDetails: 'Mostrar detalhes',\n itemsPerPage: 'Itens por página: ',\n },\n getHistoryListError: {\n title: 'Falha ao carregar os dados',\n description: 'Não foi possível carregar os dados solicitados. Por favor, aguarde e tente novamente em alguns minutos.',\n },\n },\n progressBar: {\n texts: [\n 'Iniciando...',\n 'Analisando o site...',\n 'Gerando o relatório...',\n ],\n },\n visitors: {\n visitsOnSiteTitle: 'Visitas no site',\n totalOfAccess: 'Total de acessos',\n maxOfVisitants: 'Máximo de visitantes únicos',\n minOfVisitants: 'Mínimo de visitantes únicos',\n perDay: 'Por um dia',\n perHour: 'Por uma hora',\n uniqueVisitants: 'Visitantes únicos',\n startTimeEndTime: (startTime, endTime) => `De ${startTime}\\nAté ${endTime}`,\n selectOptions: {\n last24hours: '24 horas anteriores',\n last7Days: '7 dias anteriores',\n last30Days: '30 dias anteriores',\n },\n\n regionsOfAccessTitle: 'Principais países/regiões de acesso',\n countryTitle: 'País/Região',\n trafficTitle: 'Tráfego',\n perPageLabel: 'Itens por página',\n noDataTitle: 'Ainda não há dados para exibir',\n noDataDescription: 'Seu site ainda não possui dados de visitas para exibir.',\n errorStateTitle: 'Falha ao carregar os dados',\n errorStateDescription: 'Não foi possível carregar os dados solicitados. Por favor, aguarde e tente novamente em alguns minutos.',\n },\n security: {\n rules: {\n title: 'Nome da regra',\n description: 'Coloque a sua regra um nome descritivo',\n inputLabel: 'Ex: regra de bloqueio por país duplicada *',\n },\n traficBlock: {\n title: 'Bloqueio de tráfego',\n description: 'Selecione o que deseja bloquear',\n selectPlaceholder: 'Selecionar',\n rulesLeftInfo: rulesLeft => (\n \n Você possui\n {' '}\n \n {rulesLeft}\n {' '}\n {rulesLeft === 1 ? 'regra' : 'regras'}\n \n {' '}\n de bloqueio\n {' '}\n {rulesLeft === 1 ? 'disponível' : 'disponíveis'}\n \n ),\n noRulesLeftInfo: () => (\n \n Você já atingiu o\n {' '}\n limite de 5 regras \n {' '}\n de bloqueio criadas, para continuar exclua uma delas na lista de bloqueios.\n \n ),\n ruleTypes: {\n [RuleActionTypes.COUNTRY]: {\n label: 'País',\n ruleValuePlaceholder: 'Selecionar país',\n },\n [RuleActionTypes.CONTINENT]: {\n label: 'Continente',\n ruleValuePlaceholder: 'Selecionar continente',\n },\n [RuleActionTypes.SOURCE_IP_ADDRESS]: {\n label: 'Endereço por IP',\n ruleValuePlaceholder: 'Endereço de IP, ex: 192.158.1.38',\n },\n [RuleActionTypes.URL]: {\n label: 'Endereço do site - URL',\n ruleValuePlaceholder: 'URL exemplo: www.meusite.com.br',\n },\n },\n button: 'Bloquear',\n },\n blockList: {\n title: 'Lista de bloqueios',\n order: 'Ordem',\n name: 'Nome',\n action: 'Ação',\n toggleOn: 'Habilitado',\n },\n dropdownActions: {\n edit: 'Editar',\n duplicate: 'Duplicar',\n delete: 'Excluir',\n },\n addRuleModalSuccess: {\n title: 'Seu bloqueio foi realizado com sucesso',\n description: rulesLeft => (\n <>\n \n Confira os detalhes da ação na sua lista de bloqueios.\n
\n \n Você ainda possui\n {' '}\n \n {rulesLeft}\n {' '}\n {rulesLeft === 1 ? 'regra' : 'regras'}\n {' '}\n \n {' '}\n {`de bloqueio ${rulesLeft === 1 ? 'disponível' : 'disponíveis'}`}\n
\n \n ),\n buttonLabel: 'Ok, entendi',\n },\n getRulesError: {\n title: 'Falha ao carregar os dados',\n description: 'Não foi possível carregar os dados solicitados. Por favor, aguarde e tente novamente em alguns minutos.',\n },\n },\n },\n cloudflareBanner: {\n title: 'Deixe seu site mais rápido e seguro com a CDN da Cloudflare',\n description: 'Acelere o tempo de carregamento do seu site, proporcionando uma experiência mais rápida e satisfatória para os seus visitantes grátis.',\n buttonCta: 'Ir para desempenho de sites',\n },\n topBanner: {\n title: 'Seu site mais rápido e seguro com a CDN da Cloudflare grátis',\n description: 'Os sites do seu plano já tem acesso aos recursos de desempenho e segurança da CDN grátis.',\n cta: 'Conheça',\n modal: {\n title: 'Conheça a CDN da Cloudflare',\n know: {\n title: 'O que é a CDN da Cloudflare?',\n description: 'A CDN (Content Delivery Network) é uma rede de servidores distribuídos globalmente que entrega conteúdo da internet mais rápida, eficiente e segura.',\n },\n speed: {\n title: 'Maior velocidade do site',\n description: 'Com a CDN, o conteúdo do seu site é entregue a partir de servidores mais próximos dos visitantes, o que faz as páginas carregarem mais rápido.',\n },\n stability: {\n title: 'Maior estabilidade',\n description: 'Se um servidor falhar, a CDN redireciona o tráfego para uma versão do seu conteúdo em cache mantendo seu site sempre online.',\n },\n safety: {\n title: 'Maior segurança ',\n description: 'Protege o site contra ataques cibernéticos, como tentativas de derrubá-lo com tráfego excessivo (DDoS).',\n },\n settup: {\n title: 'Configure sua CDN em desempenho de sites',\n description: 'Acelere e proteja o seu site com a CDN da Cloudflare. Comece hoje e melhore sua performance online',\n cta: 'Ir para desempenho de sites',\n },\n },\n },\n whatIsCdnModal: {\n title: 'O que é a CDN',\n description: 'A CDN (Content Delivery Network) é uma rede de servidores distribuídos globalmente que entrega conteúdo da internet mais rápida, eficiente e segura. Ter uma CDN trás vantagens para o seu site como:',\n items: [\n {\n icon: 'IconCdn',\n featureBackground: 'attentionPure',\n iconSecondaryColor: 'attentionUltraLight',\n title: 'Mais velocidade',\n description: 'O conteúdo do seu site é entregue a partir de servidores mais próximos dos visitantes, o que faz as páginas carregarem mais rápido.',\n },\n {\n icon: 'IconSecurityCheck',\n featureBackground: 'activeLight',\n iconSecondaryColor: 'activeUltraLight',\n title: 'Mais segurança',\n description: 'Protege o site contra ataques cibernéticos, como tentativas de derrubá-lo com tráfego excessivo (DDoS).',\n },\n {\n icon: 'IconLive',\n featureBackground: 'pendingPure',\n iconSecondaryColor: 'attentionUltraLight',\n title: 'Maior estabilidade',\n description: 'Se um servidor falhar, a CDN redireciona o tráfego para uma versão do seu conteúdo em cache mantendo seu site sempre online.',\n },\n ],\n cta: 'Ok, entendi',\n },\n};\n","import { FEATURES } from '@/pages/Products/CloudFlare/ManageCloudFlareHandler/ManageCloudFlareHandler.types';\nimport { Button, Link } from 'gatorcomponents';\nimport React from 'react';\nimport { format } from 'date-fns';\nimport { RuleActionTypes } from '@/pages/Products/CloudFlare/ManageCloudFlareHandler/components/Security/Security.types';\n\nexport default {\n hostingLabel: 'Hospedaje: ',\n change: 'Cambiar',\n cloudflareCdnExplanation: ({ handleWhatIsCdn }) => (\n <>\n {'Acelere su sitio y obtenga más seguridad al activar la CDN integrada con Cloudflare. '}\n \n \n El CDN\n \n {' ya está activo en este sitio, dejándolo más rápido y seguro.'}\n \n ),\n showMore: 'Mostrar más',\n changePlanModal: {\n title: 'Seleccione un dominio',\n searchPlaceholder: 'Buscar por dominio',\n mainDomain: 'Dominio principal: ',\n back: 'Volver',\n continue: 'Continuar',\n },\n activateDeactivateInternalModal: {\n toActivateTitle: 'Activar CDN',\n toDeactivateTitle: 'Desactivar CDN',\n activatingTitle: 'Activación de CDN en curso',\n deactivatingTitle: 'Desactivación del CDN en curso',\n toActivateDescription: 'Active la CDN y deje su sitio web más rápido y seguro. Los cambios pueden tardar hasta 24 horas.',\n toDeactivateDescription: 'Desactivar la CDN puede dejar más lento y reducir la seguridad de su sitio. Los cambios pueden tardar hasta 24 horas.',\n activatingDescription: 'La activación de su CDN ha sido solicitada y está en curso. Acompañe la actualización del status en la pantalla de administración.',\n deactivatingDescription: 'La desactivación de su CDN fue solicitada y está en curso. Acompañe la actualización del status en la pantalla de administración.',\n cancelCta: 'Cancelar',\n confirmationCta: 'Ok, entendí',\n continueActivationCta: 'Activar CDN',\n continueDeactivationCta: 'Desactivar CDN',\n failedRequestTitle: 'Se ha producido un error en la solicitud',\n failedRequestDescription: 'Algo salió mal mientras procesábamos su solicitud. Por favor, inténtelo de nuevo.',\n domainWithProblemTitle: 'Dominio no disponible temporalmente',\n domainWithProblemDescription: 'No fue posible activar la CDN debido a problemas con su dominio, por favor, comuníquese con su registrante y confirme si hay algo pendiente.',\n },\n nameServerTooltip: (ns1, ns2) => (\n <>\n \n {'Servidor 1: '}\n \n {ns1}\n \n {'Servidor 2: '}\n \n {ns2}\n \n ),\n refreshStatus: 'Actualizar status de la lista',\n noOpenStatus: 'No tiene ningún status abierto',\n waitRefreshTimeLimit: 'Espere hasta 1 hora para actualizar el status nuevamente',\n domainsError: 'Se produjo un problema al procesar su solicitud. Si persiste, intente nuevamente más tarde.',\n refreshList: 'Recarregar lista',\n messageWithActivationError: 'Ocurrió un error en su configuración. Inténtelo nuevamente y si el problema continúa, contáctese con el soporte',\n messageWithDeactivationError: 'Ocurrió un error en su intento de desactivación de la CDN. Intente de nuevo, y si el problema persiste, contacte al soporte.',\n genericErrorModal: {\n title: 'Ocurrió un error en su solicitud',\n description: 'Algo salió mal mientras procesábamos su solicitud. Por favor, intente nuevamente.',\n buttonLabel: 'Ok, entendí',\n },\n genericSuccessModal: {\n title: 'Su cambio fue realizado con éxito.',\n description: '',\n buttonLabel: 'Ok, entendí',\n },\n deleteRuleConfirmModal: {\n title: '¿Está seguro de que desea eliminar esta regla de bloqueo?',\n description: '',\n primaryButtonLabel: 'Sí, quiero eliminarla',\n secondaryButtonLabel: 'Cancelar',\n },\n deleteRuleSuccessModal: {\n title: 'Su regla de bloqueo se ha eliminado correctamente.',\n description: '',\n buttonLabel: 'Ok, entendí',\n },\n blockingErrorModal: {\n title: 'Se ha producido un error en su bloqueo',\n description: 'Hubo un problema en su intento de bloqueo Inténtelo de nuevo.',\n buttonLabel: 'Ok, entendí',\n },\n manageCdnHandler: {\n hostingLabel: planName => `Hospedaje: ${planName}`,\n selectedDomainLabel: 'Dominio seleccionado',\n changeButtonLabel: 'Cambiar',\n readMoreButton: toggleOn => (toggleOn ? 'Leer menos' : 'Leer más'),\n footerLabel: 'Estas funcionalidades utilizan los recursos de Cloudflare',\n cdnCards: {\n [FEATURES.PURGE_CACHE]: {\n cardTitle: 'Borrar caché',\n cardDescription: 'Elimine los archivos almacenados en caché para obligar al sistema a buscar una nueva versión de estos archivos de su servidor web. Borrar caché puede hacer que su sitio web se ralentice temporalmente y sobrecargue su servidor.',\n button: {\n buttonLabel: 'Borrar caché',\n secondsRemainingTooltip: ({ seconds }) => (\n <>\n {'Espere '}\n {seconds}\n {seconds > 1 ? ' segundos' : ' segundo'}\n {' para limpiar el caché nuevamente'}\n \n ),\n },\n },\n [FEATURES.DEV_MODE]: {\n cardTitle: 'Visualizar en tiempo real',\n cardDescription: 'Desactive temporalmente algunos recursos, como el almacenamiento en caché, la compresión y la optimización de archivos, durante tres horas (a menos que las desactive antes). Esto le permite ver inmediatamente cualquier cambio que realice en su sitio web.',\n tooltipLabel: (\n <>\n {'Esta funcionalidad utiliza el '}\n modo desarrollador \n {' de Cloudflare'}\n \n ),\n secondsRemainingTooltip: ({ seconds, isActive }) => (\n <>\n {'Espere '}\n {seconds}\n {seconds > 1 ? ' segundos' : ' segundo'}\n {' para '}\n {isActive ? 'desactivar' : 'activar'}\n {' esta funcionalidad nuevamente'}\n \n ),\n },\n [FEATURES.UNDER_ATTACK_MODE]: {\n cardTitle: 'Modo bajo ataque',\n cardDescription: 'Realiza verificaciones adicionales para proteger su sitio web contra ataques de virus. Permite el bloqueo de tráfico sospechoso. Utilice este modo cuando su sitio web esté siendo atacado. Cuando está activado, los visitantes verán una página de espera antes de acceder al sitio',\n secondsRemainingTooltip: ({ seconds, isActive }) => (\n <>\n {'Espere '}\n {seconds}\n {seconds > 1 ? ' segundos' : ' segundo'}\n {' para '}\n {isActive ? 'desactivar' : 'activar'}\n {' esta funcionalidad nuevamente'}\n \n ),\n },\n [FEATURES.ALWAYS_ONLINE]: {\n cardTitle: 'Mantener el sitio web siempre online',\n cardDescription: 'Mantenga su sitio web accesible incluso cuando el servidor está caído. Esta función utiliza copias de sus páginas guardadas en Wayback Machine (un servicio online que archiva y permite ver versiones antiguas de sitios de la internet).',\n tooltipLabel: (\n <>\n {'Esta funcionalidad utiliza el '}\n always online \n {' de Cloudflare'}\n \n ),\n secondsRemainingTooltip: ({ seconds, isActive }) => (\n <>\n {'Espere '}\n {seconds}\n {seconds > 1 ? ' segundos' : ' segundo'}\n {' para '}\n {isActive ? 'desactivar' : 'activar'}\n {' esta funcionalidad nuevamente'}\n \n ),\n },\n },\n cleanCacheModal: {\n loadingTitle: 'Limpieza de caché en curso',\n successTitle: 'Limpieza de caché realizada',\n successDescription: 'Su sitio web se actualizará con la última versión disponible en el servidor original.',\n failureTitle: 'Ocurrió un error al limpiar el caché',\n failureDescription: 'Hubo un problema al intentar limpiar el caché. Por favor, inténtelo de nuevo.',\n okButtonLabel: 'Ok, entendí',\n },\n cleanCacheModalError: {\n title: 'Ocurrió un error al limpiar el caché',\n description: 'Hubo un problema al intentar limpiar el caché. Por favor, inténtelo de nuevo.',\n buttonLabel: 'Ok, entendí',\n },\n tabs: {\n speed: 'Teste de velocidade',\n tools: 'Ferramentas',\n visitors: 'Visitantes',\n security: 'Seguridad',\n },\n speedAnalysis: {\n title: 'Prueba de velocidad',\n listTitle: 'Detalles del rendimiento de su sitio',\n firstRow: 'Ejecute la prueba de velocidad para analizar los tiempos de carga de la página, identificando posibles problemas de rendimiento. Tenga una mayor tasa de conversión asegurando un sitio web más rápido y eficiente.',\n secondRow: 'Puede realizar hasta 30 pruebas al mes. Una vez alcance este límite, las pruebas se renovarán el mes siguiente.',\n stillHave: ({ amount }) => (\n <>\n {'Aún le quedan '}\n \n {amount}\n {' testes'}\n \n {' pruebas por realizar'}\n \n ),\n dontHave: (\n <>\n {'Ya ha '}\n alcanzado el límite \n {' de la prueba'}\n \n ),\n initTestLabel: 'Iniciar prueba',\n reduTestLabel: 'Repetir la prueba',\n showList: 'Mostrar detalles',\n hideList: 'Ocultar detalles',\n testDate: date => `Fecha de la prueba: ${format(date, 'dd/MM/yyyy H:m')}`,\n results: {\n title: 'Resultado de su prueba',\n analysisTitle: {\n good: 'El sitio está con rápido rendimiento',\n neutral: 'El sitio está con rendimiento moderado',\n bad: 'El sitio está con bajo rendimiento',\n },\n failedTitle: 'Falla al realizar la prueba',\n failedDescription: domain => `No se puede realizar la prueba de velocidad en el dominio “${domain}” Compruebe si este dominio está alojado en nuestro servidor e inténtalo de nuevo.`,\n items: {\n ttfb: 'Tiempo hasta el primer byte cargar (TTFB)',\n ttfbTooltip: 'Time to First Byte es el tiempo que tarda su computadora en comenzar a recibir las primeras informaciones de un sitio web después de hacer clic para acceder a él. Cuanto más corto sea este tiempo, más rápido aparecerá el sitio.',\n fcp: 'Tiempo en que aparece el primer contenido de la pantalla (FCP)',\n fcpTooltip: 'First Contentful Paint es el momento en el que usted comienza a ver algo útil en la pantalla al cargar un sitio web. Es la primera vez que el sitio le muestra algo que usted pueda ver, como texto, imágenes o gráficos. Cuanto más rápido suceda esto, más rápido sentirá que se está cargando el sitio web.',\n lcp: 'Tiempo en que aparece el contenido más grande del sitio (LCP)',\n lcpTooltip: 'Largest Contentful Paint es cuando la más grande y relevante pieza de contenido aparece en la pantalla, como una imagen grande, un vídeo o un bloque principal de texto. Cuanto más rápido suceda esto, más rápido usted siente que el sitio termino de cargar el contenido principal.',\n tti: 'Tiempo para que el sitio esté listo para su uso (TTI)',\n ttiTooltip: 'Time to Interactive es el tiempo que tarda el sitio web en estar listo para ser utilizado, es decir, el tiempo que tarda no sólo en aparecer, sino en estar completamente listo para que usted interactúe con él, sin que se bloquee o tarde en responder.',\n tbt: 'Tiempo de bloqueo durante la carga (TBT)',\n tbtTooltip: 'Total Blocking Time mide el tiempo en que el sitio web se bloquea y no responde a las interacciones, como los clics o la escritura. Es el período en el que está cargando o procesando algo y no le responde de inmediato. Cuanto más corto sea este tiempo, más fluida será la experiencia de uso.',\n si: 'Velocidad a la que aparece el contenido visible del sitio web (SI)',\n siTooltip: 'Speed Index es una medida de la rapidez con la que aparece el contenido visible de un sitio web mientras se está cargando. Es una forma de medir la rapidez con la que ve que la página toma forma y se vuelve útil, incluso si aún no se está cargando por completo. Cuanto más bajo sea el índice, más rápido verá que el sitio web se vuelve visible.',\n cls: 'Estabilidad visual de la página al cargar (CLS)',\n clsTooltip: 'Cumulative Layout Shift mide cuánto cambia el contenido de un sitio web mientras se carga. Para un sitio web, esto ocurre cuando el texto o las imágenes cambian de posición mientras intentas interactuar con la página. Cuanto menor sea el cambio, más estable y cómoda será la experiencia de uso.',\n },\n },\n historyList: {\n title: 'Histórico de resultados',\n date: 'Fecha',\n domain: 'Dominio',\n score: 'Puntuación',\n showDetails: 'Mostrar detalles',\n itemsPerPage: 'Itens por página: ',\n },\n getHistoryListError: {\n title: 'Falla al cargar los datos',\n description: 'No fue posible cargar los datos solicitados. Por favor, espere y vuelva a intentarlo en unos minutos.',\n },\n },\n progressBar: {\n texts: [\n 'Iniciando...',\n 'Analizando el sitio...',\n 'Generando el relatório...',\n ],\n },\n visitors: {\n visitsOnSiteTitle: 'Visitas en el sitio',\n totalOfAccess: 'Total de accesos',\n maxOfVisitants: 'Máximo de visitantes únicos',\n minOfVisitants: 'Mínimo de visitantes únicos',\n perDay: 'Por un día',\n perHour: 'Por uma hora',\n uniqueVisitants: 'Visitantes únicos',\n startTimeEndTime: (startTime, endTime) => `De ${startTime}\\nHasta ${endTime}`,\n selectOptions: {\n last24hours: '24 horas anteriores',\n last7Days: '7 días anteriores',\n last30Days: '30 días anteriores',\n },\n\n regionsOfAccessTitle: 'Principales países/regiones de acceso',\n countryTitle: 'País/Región',\n trafficTitle: 'Tráfico',\n perPageLabel: 'Itens por página',\n noDataTitle: 'Todavía no hay datos para mostrar',\n noDataDescription: 'Su sitio aún no tiene datos de visitas para mostrar.',\n errorStateTitle: 'Falla al cargar los datos',\n errorStateDescription: 'No fue posible cargar los datos solicitados. Por favor, espere y vuelva a intentarlo en unos minutos.',\n },\n security: {\n rules: {\n title: 'Nombre de la regra',\n description: 'Asigne un nombre descriptivo a la regla',\n inputLabel: 'Ej: regla de bloqueo por país duplicado',\n },\n traficBlock: {\n title: 'Bloqueo de tráfico',\n rulesLeftInfo: rulesLeft => (\n \n Tienes\n {' '}\n \n {rulesLeft}\n {' '}\n reglas\n {' '}\n \n {rulesLeft === 1 ? 'disponible' : 'disponibles'}\n \n ),\n noRulesLeftInfo: () => (\n \n Ya ha alcanzado el\n {' '}\n límite de 5 reglas \n {' '}\n de bloqueo creadas, para continuar elimine una de ellas de la lista de bloqueo.\n \n ),\n description: 'Seleccione el tipo de bloqueo',\n selectPlaceholder: 'Seleccionar',\n ruleTypes: {\n [RuleActionTypes.COUNTRY]: {\n label: 'País',\n ruleValuePlaceholder: 'Seleccionar país',\n },\n [RuleActionTypes.CONTINENT]: {\n label: 'Continente',\n ruleValuePlaceholder: 'Seleccionar continente',\n },\n [RuleActionTypes.SOURCE_IP_ADDRESS]: {\n label: 'Dirección por IP',\n ruleValuePlaceholder: 'Dirección por IP, ej: 192.158.1.38',\n },\n [RuleActionTypes.URL]: {\n label: 'Dirección del sitio web - URL',\n ruleValuePlaceholder: 'Ejemplo URL: www.misitio.com',\n },\n },\n button: 'Bloquear',\n },\n blockList: {\n title: 'Lista de bloqueos',\n order: 'Orden',\n name: 'Nombre',\n action: 'Acción',\n toggleOn: 'Habilitado',\n },\n dropdownActions: {\n edit: 'Editar',\n duplicate: 'Duplicar',\n delete: 'Eliminar',\n },\n addRuleModalSuccess: {\n title: 'Su bloqueo se ha realizado con éxito',\n description: rulesLeft => (\n <>\n \n Verifique los detalles de la acción en su lista de bloqueo.\n
\n \n Todavía tienes\n {' '}\n \n {rulesLeft}\n {' '}\n {rulesLeft === 1 ? 'regla' : 'reglas'}\n {' '}\n \n {`de bloqueo ${rulesLeft === 1 ? 'disponible' : 'disponibles'}`}\n
\n \n ),\n buttonLabel: 'Ok, entendí',\n },\n getRulesError: {\n title: 'Falla al cargar los datos',\n description: 'No fue posible cargar los datos solicitados. Por favor, espere y vuelva a intentarlo en unos minutos.',\n },\n },\n },\n cloudflareBanner: {\n title: 'Su sitio web más rápido y seguro con la CDN de Cloudflare',\n description: 'Acelere el tiempo de carga de su sitio web, proporcionando una experiencia más rápida y satisfactoria para sus visitantes de forma gratuita.',\n buttonCta: 'Ir a rendimiento del sitio',\n },\n topBanner: {\n title: 'Su sitio web más rápido y seguro con la CDN de Cloudflare gratis',\n description: 'Los sitios de su plan ya tienen acceso a las funcionalidades de rendimiento y seguridad de la CDN gratis',\n cta: 'Consulte',\n modal: {\n title: 'Conozca la CDN de Cloudflare',\n know: {\n title: '¿Qué es la CDN de Cloudflare?',\n description: 'La CDN (Content Delivery Network) es una red de servidores distribuidos globalmente que entrega contenido de Internet de manera más rápida, eficiente y segura.',\n },\n speed: {\n title: 'Mayor velocidad del sitio',\n description: 'Con la CDN, el contenido de su sitio se entrega desde servidores más cercanos de sus visitantes, lo que hace que las páginas se carguen más rápido.',\n },\n stability: {\n title: 'Mayor estabilidad',\n description: 'Si un servidor falla, la CDN redirige el tráfico a otro, manteniendo el sitio en funcionamiento.',\n },\n safety: {\n title: 'Mayor seguridad',\n description: 'Protege el sitio web de los ciberataques, como los intentos de derribarlo con tráfico excesivo (DDoS).',\n },\n settup: {\n title: 'Configure su CDN en rendimiento del sitio',\n description: 'Acelere y proteja su sitio web con la CDN de Cloudflare. Comience hoy y mejore su rendimiento online',\n cta: 'Ir a rendimiento del sitio',\n },\n },\n },\n whatIsCdnModal: {\n title: '¿Qué es la CDN?',\n description: 'La CDN (Content Delivery Network) es una red de servidores distribuidos globalmente que entrega contenido de Internet de manera más rápida, eficiente y segura. Tener una CDN trae ventajas a su sitio web como:',\n items: [\n {\n icon: 'IconCdn',\n featureBackground: 'attentionPure',\n iconSecondaryColor: 'attentionUltraLight',\n title: 'Más velocidad',\n description: 'El contenido de su sitio se entrega desde servidores más cercanos de sus visitantes, lo que hace que las páginas se carguen más rápido.',\n },\n {\n icon: 'IconSecurityCheck',\n featureBackground: 'activeLight',\n iconSecondaryColor: 'activeUltraLight',\n title: 'Más seguridad',\n description: 'Protege el sitio web de los ciberataques, como los intentos de derribarlo con tráfico excesivo (DDoS).',\n },\n {\n icon: 'IconLive',\n featureBackground: 'pendingPure',\n iconSecondaryColor: 'attentionUltraLight',\n title: 'Mayor estabilidad',\n description: 'Si un servidor falla, la CDN redirige el tráfico a una versión de su contenido almacenada en caché, manteniendo su sitio siempre online.',\n },\n ],\n cta: 'Ok, entendí',\n },\n};\n","import esContent from './cloudflare.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './cloudflare.es';\n\nexport default {\n ...esContent,\n};\n","import esContent from './cloudflare.es';\n\nexport default {\n ...esContent,\n};\n","import cloudflareBR from './cloudflare.br';\nimport cloudflareCL from './cloudflare.cl';\nimport cloudflareCO from './cloudflare.co';\nimport cloudflareMX from './cloudflare.mx';\n\nconst locales = {\n BR: cloudflareBR,\n CL: cloudflareCL,\n CO: cloudflareCO,\n MX: cloudflareMX,\n};\n\nexport default locales;\n","import React from 'react';\n\nexport default {\n logoBuilder: 'Criador de logos',\n beta: 'Beta',\n title: (\n <>\n Crie\n {' '}\n designs profissionais de forma simples \n {' '}\n com nossa ferramenta de criação.\n \n ),\n description: 'Com o HostGator Creator, você pode criar logos, conteúdo e designs com aparência profissional para a sua marca e aumentar a credibilidade com os seus clientes.',\n choosePlan: 'Escolha o plano ideal para o seu negócio',\n freePlan: 'Criado de Logo',\n free: 'Grátis',\n freePlanDescription: 'Crie seu logo grátis agora',\n continueWithFree: 'Continuar no plano grátis',\n freeSpecs: ['Crie até 1 logo', 'Logo personalizado para o seu negócio'],\n paidPlan: 'HostGator Creator',\n paidPlanPrice: (\n <>\n R$ 19,90 \n {' '}\n por mês.\n \n ),\n yearlyPrice: 'R$ 239,88 / ano',\n paidPlanDescription: (\n <>\n Crie logos e designs\n \n {t('snackbar.actions.open')}\n \n)));\n\nconst LinkAccountAction = () => (\n closeSnackbar(id)}\n >\n \n {locale('phoneVerify.feedback.smsSendAttempts')({ attempts, used: brPhone ? 10 - attempts : 5 - attempts })}\n
\n ),\n type: 'success',\n }));\n }\n } catch (e) {\n let internalCode = null;\n let unblock = null;\n let disabledTil = null;\n\n if (e && e.response && e.response.data && e.response.data.internal_code) {\n internalCode = e.response.data.internal_code;\n }\n\n if (e && e.response && e.response.data && e.response.data.data && e.response.data.data.unblock_time) {\n unblock = new Date(e.response.data.data.unblock_time);\n }\n\n if (e && e.response && e.response.data && e.response.data.data && e.response.data.data.disabled_til) {\n disabledTil = e.response.data.data.disabled_til;\n }\n\n if (internalCode === SMS_ERROR.REQUEST_DISABLED) {\n setPendingCounter(disabledTil);\n } else {\n if (internalCode !== SMS_ERROR.INVALID_PASSWORD) {\n setPendingCounter(disabledTil);\n }\n\n yield put(commonActions.notifications.set({\n label: (\n \n {e.response.data.data === 'Bad Gateway' && (\n `${locale('phoneVerify.feedback.genericError')} `\n )}\n\n {internalCode === SMS_ERROR.INVALID_PASSWORD && (\n `${locale('phoneVerify.feedback.password')} `\n )}\n\n {internalCode === SMS_ERROR.GENERIC_ERROR && (\n `${locale('phoneVerify.feedback.sendCodeError')} `\n )}\n\n {internalCode === SMS_ERROR.NO_MORE_ATTEMPTS && (\n <>\n {locale('phoneVerify.feedback.noMoreAttempts')({ hours: format(unblock, 'HH:mm'), date: format(unblock, 'dd/MM/yyyy') })}\n \n )}\n\n {internalCode === SMS_ERROR.DATA_IN_USE && (\n <>\n {locale('phoneVerify.feedback.dataInUse')}\n \n )}\n\n {internalCode === SMS_ERROR.ALREADY_VALIDATED && (\n <>\n {locale('phoneVerify.feedback.alreadyValidated')({ hours: format(unblock, 'HH:mm'), date: format(unblock, 'dd/MM/yyyy') })}\n \n )}\n
\n ),\n type: 'error',\n }));\n }\n\n\n yield put(authActions.user.phoneToken.failure());\n }\n}\n\nfunction* sagas() {\n yield takeLeading(AuthActionsTypes.UPDATE_JWT_TOKEN, updateJwtToken);\n yield takeLatest(AuthActionsTypes.SEND_PHONE_TOKEN, sendPhoneToken);\n}\n\nexport default sagas;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconAlertTriangle.style';\n\nconst IconAlertTriangle = ({\n color = '#FF9442',\n testId = 'icon-alert-triangle',\n size = '20',\n}) => (\n \n \n \n \n);\n\n\nexport default IconAlertTriangle;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconAcademy.style';\n\nconst IconAcademy = ({ color = '#4480c5' }) => (\n \n \n \n \n \n \n);\n\n\nexport default IconAcademy;\n","import React from 'react';\n\nconst IconArrowDown = ({ color = '#1F2044' }) => (\n \n \n \n \n);\n\nexport default IconArrowDown;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nexport const IconArrowDownOutlined = ({ color }) => (\n \n \n);\n\nIconArrowDownOutlined.propTypes = {\n color: PropTypes.string,\n};\n\nIconArrowDownOutlined.defaultProps = {\n color: '#2e93ee',\n};\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconArrowForward.style';\n\nconst IconArrowWardsLeft = ({\n fill = '#4480c5',\n stroke = '#4480c5',\n testId = 'icon-arrowForward',\n size = '24',\n}) => (\n \n \n \n \n \n \n);\n\nexport default IconArrowWardsLeft;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconArrowLeft.style';\n\nconst IconArrowLeft = ({\n color = '#4480c5',\n testId = 'icon-arrow-left',\n size = '24',\n}) => (\n \n \n \n \n \n \n);\n\nexport default IconArrowLeft;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconArrowWardsLeft.style';\n\nconst IconArrowWardsLeft = ({ color = '#4480c5' }) => (\n \n \n \n \n);\n\n\nexport default IconArrowWardsLeft;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconCheck.style';\n\nconst IconCheck = ({\n color = '#4a4a4a',\n testId = 'icon-check',\n size = 24,\n variant = 'regular',\n}) => (\n \n {variant === 'regular' && (\n \n \n )}\n {variant === 'outlined' && (\n \n \n )}\n \n);\n\n\nexport default IconCheck;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconCheckCircle.style';\n\nconst IconCheckCircle = ({\n color = '#35CF8B',\n testId = 'icon-check-circle',\n size = '20',\n}) => (\n \n \n \n \n);\n\n\nexport default IconCheckCircle;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconChevronRight.style';\n\nconst IconChevronRight = ({ color = '#1d5297', testId = 'icon-chevron-right', size = 30 }) => (\n \n \n \n \n \n \n \n\n \n);\n\n\nexport default IconChevronRight;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconClose.style';\n\nconst IconClose = ({ color = '#4A4A4A', testId = 'icon-close', size = 24 }) => (\n \n \n \n \n);\n\n\nexport default IconClose;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconCopyContent.style';\n\nconst IconCopyContent = ({\n color = '#2e93ee',\n testId = 'icon-copy-content',\n size = 24,\n}) => (\n \n \n \n\n \n);\n\n\nexport default IconCopyContent;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconCreditCard.style';\n\nconst IconCreditCard = ({\n color = '#2E578B',\n testId = 'icon-credit-card',\n size = 32,\n}) => (\n \n \n \n \n \n \n);\n\n\nexport default IconCreditCard;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDedicatedLinux.styles';\n\nconst IconDedicatedLinux = ({ testId = 'icon-dedicated-linux' }) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\n\nexport default IconDedicatedLinux;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDedicatedWindows.styles';\n\nconst IconDedicatedWindows = ({ testId = 'icon-dedicated-windows' }) => (\n \n \n \n \n \n \n \n \n);\n\n\nexport default IconDedicatedWindows;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedAcademy.style';\n\nconst IconDetailedAcademy = ({\n primaryColor = '#2e93ee',\n secondaryColor = '#1d5297',\n tertiaryColor = '#f67922',\n width = '21',\n height = '26',\n testId = 'icon-detailed-academy',\n}) => (\n \n \n \n \n \n \n);\n\n\nexport default IconDetailedAcademy;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedBlog.style';\n\nconst IconDetailedBlog = ({\n color = '#4a4a4a',\n backgroundColor = '#f47924',\n size = '30',\n testId = 'icon-detailed-blog',\n}) => (\n \n \n \n \n \n \n);\n\n\nexport default IconDetailedBlog;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedDomain.style';\n\nconst IconDetailedDomain = ({\n color = '#4a4a4a',\n background = '#3c97ff',\n width = '32',\n height = '30',\n testId = 'icon-detailed-domain',\n}) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\n\nexport default IconDetailedDomain;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedEmail.style';\n\nconst IconDetailedEmail = ({\n color = '#4a4a4a',\n background = '#3c97ff',\n size = '25',\n testId = 'icon-detailed-email',\n}) => (\n \n \n \n \n \n \n \n \n);\n\n\nexport default IconDetailedEmail;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedGear.style';\n\nconst IconDetailedGear = ({\n color = '#4a4a4a',\n backgroundColor = '#3c97ff',\n width = '35',\n height = '28',\n testId = 'icon-detailed-gear',\n}) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default IconDetailedGear;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedHost.style';\n\nconst IconDetailedHost = ({\n color = '#4a4a4a',\n background = '#ffd54c',\n size = '24',\n testId = 'icon-detailed-host',\n}) => (\n \n \n \n \n \n \n \n \n);\n\n\nexport default IconDetailedHost;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedInstitutional.style';\n\nconst IconDetailedInstitutional = ({\n color = '#4a4a4a',\n backgroundColor = '#f47924',\n size = '30',\n testId = 'icon-detailed-institutional',\n}) => (\n \n \n \n \n \n \n);\n\n\nexport default IconDetailedInstitutional;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedLandingPage.style';\n\nconst IconDetailedLandingPage = ({\n color = '#4a4a4a',\n backgroundColor = '#3c97ff',\n size = '30',\n testId = 'icon-detailed-landing-page',\n}) => (\n \n \n \n \n \n \n \n \n);\n\nexport default IconDetailedLandingPage;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedOther.style';\n\nconst IconDetailedOther = ({\n color = '#4a4a4a',\n backgroundColor = '#3c97ff',\n size = '30',\n testId = 'icon-detailed-other',\n}) => (\n \n \n \n \n \n \n \n \n \n\n \n);\n\nexport default IconDetailedOther;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedOtherSquare.style';\n\nconst IconDetailedOtherSquare = ({\n color = '#4a4a4a',\n backgroundColor = '#ffcf00',\n width = '64',\n height = '54',\n testId = 'icon-detailed-other-square',\n}) => (\n \n \n \n \n);\n\n\nexport default IconDetailedOtherSquare;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedPersonalPortfoil.style';\n\nconst IconDetailedPersonalPortfoil = ({\n color = '#4a4a4a',\n backgroundColor = '#ffd54c',\n size = '30',\n testId = 'icon-detailed-personal-portfoil',\n}) => (\n \n \n \n \n \n \n \n \n \n \n);\n\n\nexport default IconDetailedPersonalPortfoil;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedPlugin.style';\n\nconst IconDetailedPlugin = ({\n color = '#4a4a4a',\n backgroundColor = '#ffcf00',\n size = '30',\n testId = 'icon-detailed-plugin',\n}) => (\n \n \n \n \n \n \n \n\n \n);\n\n\nexport default IconDetailedPlugin;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedSecurity.style';\n\nconst IconDetailedSecurity = ({\n color = '#4a4a4a',\n background = '#ff9144',\n size = '24',\n testId = 'icon-detailed-security',\n}) => (\n \n \n \n \n \n \n \n \n \n \n);\n\n\nexport default IconDetailedSecurity;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedServer.style';\n\nconst IconDetailedServer = ({\n color = '#4a4a4a',\n background = '#ff9144',\n size = '24',\n testId = 'icon-detailed-server',\n}) => (\n \n \n \n \n \n \n \n \n \n \n);\n\n\nexport default IconDetailedServer;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedSiteBuilder.style';\n\nconst IconDetailedSiteBuilder = ({\n color = '#4a4a4a',\n backgroundColor = '#f47924',\n size = '50',\n testId = 'icon-detailed-sitebuilder',\n}) => (\n \n \n \n \n \n \n);\n\n\nexport default IconDetailedSiteBuilder;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedStore.style';\n\nconst IconDetailedStore = ({\n color = '#4a4a4a',\n backgroundColor = '#ffd54c',\n size = '30',\n testId = 'icon-detailed-store',\n}) => (\n \n \n \n \n \n \n \n \n);\n\nexport default IconDetailedStore;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedTheme.style';\n\nconst IconDetailedTheme = ({\n color = '#4a4a4a',\n background = '#ff9758',\n width = '24',\n height = '27',\n testId = 'icon-detailed-theme',\n}) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n);\n\n\nexport default IconDetailedTheme;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedWordpress.style';\n\nconst IconDetailedWordpress = ({\n color = '#4a4a4a',\n backgroundColor = '#3c97ff',\n size = '50',\n testId = 'icon-detailed-wordpress',\n}) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\n\nexport default IconDetailedWordpress;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDomain.styles';\n\nconst IconDomain = ({ testId = 'IconHosting' }) => (\n \n \n \n \n \n \n \n \n \n \n);\n\n\nexport default IconDomain;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n height: 14px;\n width: 14px;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDoubt.style';\n\nconst IconDoubt = ({\n color = '#fff',\n borderColor = '#4480c5',\n backgroundColor = '#4480c5',\n testId = 'icon-doubt',\n}) => (\n \n \n \n \n \n ? \n \n \n);\n\n\nexport default IconDoubt;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDropdownArrow.style';\n\nconst IconDropdownArrow = ({\n color = '#2e578b',\n testId = 'icon-dropdown-arrow',\n size = 24,\n}) => (\n \n \n \n \n\n);\n\nexport default IconDropdownArrow;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDrupal.style';\n\nconst IconDrupal = ({\n color = '#4a4a4a',\n width = '26',\n height = '30',\n testId = 'icon-drupal',\n}) => (\n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default IconDrupal;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconEdit.style';\n\nconst IconEdit = ({\n color = '#2e93ee',\n testId = 'icon-edit',\n size = 24,\n}) => (\n \n \n \n\n \n);\n\n\nexport default IconEdit;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconEmail.style';\n\nconst IconEmail = ({ color = '#4480c5' }) => (\n \n \n \n \n);\n\n\nexport default IconEmail;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconError.style';\n\nconst IconError = ({ color = '#4480c5', size = '14', testId = 'icon-error' }) => (\n \n \n \n \n);\n\n\nexport default IconError;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n width: auto;\n position: inherit;\n padding: 10px 8px 8px 8px;\n svg {\n display: block;\n }\n`;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconEyePasswordDisabled.style';\n\nconst IconEyePasswordDisabled = ({\n color = '#959ea3',\n testId = 'icon-eyes-password-disabled',\n size = 20,\n}) => (\n \n \n \n \n);\n\n\nexport default IconEyePasswordDisabled;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n width: auto;\n position: inherit;\n padding: 10px 8px 8px 8px;\n svg {\n display: block;\n }\n}\n`;\n","import React from 'react';\nimport * as Style from './IconEyePasswordEnabled.style';\n\nconst IconEyePasswordEnabled = ({\n color = '#959ea3',\n testId = 'icon-eye-password-enabled',\n size = 20,\n}) => (\n \n \n \n \n);\n\n\nexport default IconEyePasswordEnabled;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconFeaturedStar.styles';\n\nconst IconFeaturedStar = ({ testId = 'IconHosting' }) => (\n \n \n \n \n \n \n \n \n);\n\n\nexport default IconFeaturedStar;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconFlarum.style';\n\nconst IconFlarum = ({\n color = '#4a4a4a',\n detail = '#2d2d2d',\n width = '24',\n height = '29',\n testId = 'icon-flarum',\n}) => (\n \n \n \n \n \n \n \n \n \n \n);\n\nexport default IconFlarum;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconFolder.style';\n\nconst IconFolder = ({ color = '#4480c5' }) => (\n \n \n \n \n \n \n);\n\n\nexport default IconFolder;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconHosting.styles';\n\nconst IconHosting = ({ testId = 'IconHosting' }) => (\n \n \n \n \n \n \n \n \n);\n\n\nexport default IconHosting;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconInfo.style';\n\nconst IconInfo = ({\n color = '#4480c5',\n testId = 'icon-info',\n size = '18',\n}) => (\n \n \n \n \n);\n\n\nexport default IconInfo;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconInfoCircle.style';\n\nconst IconInfoCircle = ({\n color = '#74C1FF',\n testId = 'icon-info-circle',\n size = '20',\n}) => (\n \n \n \n \n);\n\n\nexport default IconInfoCircle;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconJoomla.style';\n\nconst IconJoomla = ({\n color = '#4a4a4a',\n size = '27',\n testId = 'icon-joomla',\n}) => (\n \n \n \n \n \n \n \n \n);\n\nexport default IconJoomla;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconLight.style';\n\nconst IconLight = ({\n color = '#FBCE3B',\n testId = 'icon-light',\n size = 17,\n}) => (\n \n \n \n\n \n);\n\n\nexport default IconLight;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconLock.style';\n\nconst IconLock = ({ color = '#4480c5' }) => (\n \n \n \n \n);\n\n\nexport default IconLock;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconMagento.style';\n\nconst IconMagento = ({\n color = '#4a4a4a',\n width = '25',\n height = '29',\n testId = 'icon-magento',\n}) => (\n \n \n \n \n \n \n \n \n \n \n);\n\nexport default IconMagento;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconMoodle.style';\n\nconst IconMoodle = ({\n fill = '#4a4a4a',\n stroke = '#a8abad',\n width = '42',\n height = '29',\n testId = 'icon-moodle',\n}) => (\n \n \n \n \n \n \n);\n\nexport default IconMoodle;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconNetwork.style';\n\nconst IconNetwork = ({\n color = '#4480c5',\n size = '24',\n}) => (\n \n \n \n \n);\n\n\nexport default IconNetwork;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconOpenCart.style';\n\nconst IconOpenCart = ({\n color = '#4a4a4a',\n width = '37',\n height = '27',\n testId = 'icon-open-cart',\n}) => (\n \n \n \n \n \n \n \n \n \n \n);\n\nexport default IconOpenCart;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconOtherMiniSquares.style';\n\nconst IconOtherMiniSquares = ({\n color = '#4a4a4a',\n size = '32',\n testId = 'icon-others-mini-squares',\n}) => (\n \n \n \n \n \n \n \n\n \n);\n\nexport default IconOtherMiniSquares;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconPayPal.style';\n\nconst IconPayPal = ({\n color = '#2e578b',\n testId = 'icon-paypal',\n size = 36,\n}) => (\n \n \n \n \n \n \n);\n\n\nexport default IconPayPal;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconPix.style';\n\nconst IconPix = ({\n color = '#2E578B',\n testId = 'icon-pix',\n size = 72,\n}) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n);\n\n\nexport default IconPix;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconReportHeptagon.style';\n\nconst IconReportHeptagon = ({\n color = '#F16A5E',\n testId = 'icon-report-heptagon',\n size = '20',\n}) => (\n \n \n \n \n);\n\n\nexport default IconReportHeptagon;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconResale.styles';\n\nconst IconResale = ({ testId = 'icon-resale' }) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\n\nexport default IconResale;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconServer.style';\n\nconst IconServer = ({ color = '#4480c5' }) => (\n \n \n \n \n);\n\n\nexport default IconServer;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconSuccess.styles';\n\nconst IconSuccess = ({ testId = 'icon-success' }) => (\n \n \n \n \n);\n\n\nexport default IconSuccess;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconThrashCan.style';\n\nconst IconThrashCan = ({\n color = '#707070',\n size = 24,\n testId = 'icon-thrashCan',\n}) => (\n \n \n \n \n);\n\n\nexport default IconThrashCan;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconThrash.style';\n\nconst IconThrash = ({\n color = '#2E93EE',\n size = 16,\n testId = 'icon-thrash',\n}) => (\n \n \n \n \n);\n\n\nexport default IconThrash;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconVPS.styles';\n\nconst IconVPS = ({ testId = 'icon-vps' }) => (\n \n \n \n \n \n \n \n \n \n \n \n \n);\n\n\nexport default IconVPS;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconWarning.style';\n\nconst IconWarning = ({\n color = '#4a4a4a',\n testId = 'icon-warning',\n size = 17,\n}) => (\n \n \n \n \n);\n\n\nexport default IconWarning;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconWatch.style';\n\nconst IconWatch = ({\n color = '#FF9442',\n testId = 'icon-watch',\n size = '30',\n}) => (\n \n \n \n \n);\n\n\nexport default IconWatch;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconCopy.style';\n\nconst IconCopy = ({\n color = '#4480C5',\n testId = 'icon-copy',\n}) => (\n \n \n \n \n);\n\n\nexport default IconCopy;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconBell.style';\n\nconst IconBell = ({\n color = '#000000',\n background = '#FFD54C',\n size = '40',\n testId = 'icon-bell',\n}) => (\n \n \n \n\n \n);\n\n\nexport default IconBell;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconCloud.style';\n\nconst IconCloud = ({\n color = '#000000',\n background = '#2E93EE',\n size = '40',\n testId = 'icon-cloud',\n}) => (\n \n \n \n \n \n \n \n \n \n \n);\n\n\nexport default IconCloud;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconBackup.style';\n\nconst IconBackup = ({\n color = '#1F2044',\n background = '#F67922',\n size = '40',\n testId = 'icon-backup',\n}) => (\n \n \n \n\n \n);\n\n\nexport default IconBackup;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconFeatured.style';\n\nconst IconFeatured = ({ width = 23, height = 21 }) => (\n \n \n \n \n);\n\n\nexport default IconFeatured;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconMail.style';\n\nconst IconEmail = ({ color = '#ff9758' }) => (\n \n \n \n \n \n \n);\n\n\nexport default IconEmail;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedCheck.style';\n\nconst IconDetailedCheck = ({\n color = '#1F2044',\n backgroundColor = '#FF9442',\n width = '38',\n height = '37',\n testId = 'icon-detailed-check',\n}) => (\n \n \n \n \n \n \n \n \n \n\n \n);\n\n\nexport default IconDetailedCheck;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedPhone.style';\n\nconst IconDetailedPhone = ({\n color = '#FFCF00',\n backgroundColor = '#1F2044',\n width = '40',\n height = '50',\n testId = 'icon-detailed-phone',\n}) => (\n \n \n \n \n \n \n \n \n \n \n);\n\n\nexport default IconDetailedPhone;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedComputer.style';\n\nconst IconDetailedComputer = ({\n color = '#1F2044',\n backgroundColor = '#EF3120',\n width = '37',\n height = '26',\n testId = 'icon-detailed-computer',\n}) => (\n \n \n \n \n);\n\n\nexport default IconDetailedComputer;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedPay.style';\n\nconst IconDetailedPay = ({\n color = '#1F2044',\n backgroundColor = '#0198FF',\n width = '30',\n height = '40',\n testId = 'icon-detailed-pay',\n}) => (\n \n \n \n\n \n);\n\n\nexport default IconDetailedPay;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconMaterials.style';\n\nconst IconMaterials = ({\n color = '#4A4A4A',\n backgroundColor = '#FF9144',\n width = '33',\n height = '26',\n testId = 'icon-materials',\n}) => (\n \n \n \n \n);\n\n\nexport default IconMaterials;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedWishlist.style';\n\nconst IconDetailedWishlist = ({\n size = '30',\n testId = 'icon-detailed-host',\n}) => (\n \n \n \n \n \n \n \n \n \n\n \n);\n\n\nexport default IconDetailedWishlist;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedSchedules.style';\n\nconst IconDetailedSchedules = ({\n size = '30',\n testId = 'icon-detailed-host',\n}) => (\n \n \n \n \n \n \n \n \n \n\n \n);\n\n\nexport default IconDetailedSchedules;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedMyAccount.style';\n\nconst IconDetailedMyAccount = ({\n size = '24',\n testId = 'icon-detailed-host',\n}) => (\n \n \n \n\n \n);\n\n\nexport default IconDetailedMyAccount;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedFilters.style';\n\nconst IconDetailedFilters = ({\n size = '30',\n testId = 'icon-detailed-host',\n}) => (\n \n \n \n\n \n);\n\n\nexport default IconDetailedFilters;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedCart.style';\n\nconst IconDetailedCart = ({\n size = '30',\n testId = 'icon-detailed-host',\n}) => (\n \n \n \n \n);\n\n\nexport default IconDetailedCart;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconDetailedGiftCertificate.style';\n\nconst IconDetailedGiftCertificate = ({\n size = '30',\n testId = 'icon-detailed-host',\n}) => (\n \n \n \n\n \n);\n\n\nexport default IconDetailedGiftCertificate;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.article`\n${({ theme, variant }) => {\n const variants = {\n default: {\n color: theme.palette.primary.main,\n padding: '0 24px',\n },\n yellow: {\n color: theme.palette.yellow.main,\n padding: '0 24px',\n },\n clean: {\n color: '',\n padding: '16px 16px 16px 16px',\n },\n };\n\n return css`\n border-left: ${variant === 'clean' ? '' : `5px solid ${variants[variant].color}`};\n box-shadow: ${variant === 'clean' ? '0px 1px 3px 0px rgba(0, 0, 0, 0.25)' : `2px 2px 5px ${theme.shadows.grey.light}`};\n border-radius: ${variant === 'clean' ? '4px' : ''};\n\n box-sizing: border-box;\n padding: ${variants[variant].padding};\n width: 100 %; `;\n }}\n`;\n\nexport const ContentTitle = styled.div`\n ${() => css`\n display:flex;\n `}\n`;\n\n\nexport const Header = styled.header`\n${({ variant }) => css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: ${variant === 'clean' ? '40px' : '80px'};\n &:hover {\n cursor: pointer;\n }\n\n @media (max-width: 600px) {\n height: ${variant === 'clean' ? 'auto' : ''};\n display: ${variant === 'clean' ? 'block' : 'flex'};\n }\n`}\n`;\n\nexport const Title = styled.div`\n ${({ theme }) => css`\n margin: 0;\n font-weight: ${theme.font.weights.medium};\n font-size: ${theme.font.sizes.md};\n\n & .highlight {\n color: ${theme.palette.primary.main};\n }\n `}\n`;\n\nexport const Icon = styled.div`\n ${({ open }) => css`\n transform: rotate(${open ? '0deg' : '180deg'});\n margin-left: 48px;\n transition: transform 200ms ease-out;\n @media (max-width: 600px) {\n width: 100%;\n margin-left: 0px;\n text-align: center;\n }\n `}\n`;\n\nexport const InsertedIcon = styled.div`\n${() => css`\n margin-right: 18px;\n`}\n`;\n\n\nexport const Content = styled.div`\n ${({ maxHeight, open }) => css`\n overflow: hidden;\n height: auto;\n max-height: ${open ? `${maxHeight}` : 0};\n transition: max-height 200ms ease-out;\n `}\n`;\n\nexport const InnerContent = styled.div`\n padding-bottom: 24px;\n`;\n","import React, {\n useState, useRef, useEffect, useCallback,\n} from 'react';\nimport { IconDropdownArrow } from '@/icons';\nimport * as Styles from './Accordion.styles';\n\nconst Accordion = ({\n children,\n onToggleClick,\n title = 'title',\n testId = 'accordion',\n expanded = false,\n titleHighlightPattern = null,\n variant = 'default',\n icon,\n enabledAutoHeight = false,\n invoiceResume = null,\n}) => {\n const [open, setOpen] = useState(expanded);\n const [maxHeight, setMaxHeight] = useState(0);\n const contentRef = useRef();\n\n const getContentHeight = () => contentRef.current.scrollHeight;\n\n const defineMaxHeight = useCallback(() => {\n setMaxHeight(enabledAutoHeight ? 'auto' : `${getContentHeight()}px`);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleOnToggleClick = () => {\n onToggleClick && onToggleClick(!open);\n setOpen(!open);\n };\n\n useEffect(() => {\n setOpen(expanded);\n }, [expanded]);\n\n useEffect(() => {\n open && defineMaxHeight();\n }, [defineMaxHeight, open]);\n\n return (\n \n \n {!invoiceResume && (\n \n {icon && (\n \n {icon}\n \n )}\n {\n titleHighlightPattern ? (\n $1'),\n }}\n />\n ) : (\n \n {title}\n \n )\n }\n \n )}\n {invoiceResume && (\n <>\n {invoiceResume}\n \n )}\n \n \n \n \n {variant !== 'clean' && (\n \n {children}\n \n )}\n \n \n );\n};\n\nexport default Accordion;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.span`\n ${({ disabled, display }) => css`\n position: relative;\n display: ${display === 'large' ? 'flex' : 'inline-flex'};\n\n &:after {\n display: ${disabled ? 'block' : 'none'};\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n }\n `}\n`;\n\nexport const Icon = styled.div`\n ${({ iconDirection }) => {\n const degs = {\n left: '0deg',\n top: '90deg',\n right: '180deg',\n bottom: '270deg',\n };\n\n return css`\n display: inline-flex;\n transform: rotate(${degs[iconDirection]});\n transition: transform 200ms ease;\n `;\n }}\n`;\n\nexport const IconLeft = styled.div`\n ${({ iconDirection }) => {\n const degs = {\n left: '0deg',\n top: '90deg',\n right: '180deg',\n bottom: '270deg',\n };\n\n return css`\n display: inline-flex;\n transform: rotate(${degs[iconDirection]});\n transition: transform 200ms ease;\n `;\n }}\n`;\n\nexport const IconRight = styled.div`\n ${({ iconDirection }) => {\n const degs = {\n left: '0deg',\n top: '90deg',\n right: '180deg',\n bottom: '270deg',\n };\n\n return css`\n display: inline-flex;\n transform: rotate(${degs[iconDirection]});\n transition: transform 200ms ease;\n `;\n }}\n`;\n\nexport const Button = styled.button`\n ${({\n align,\n size,\n theme,\n variant,\n font,\n }) => {\n const variants = {\n default: {\n backgroundColor: theme.palette.white.light,\n borderColor: theme.palette.primary.main,\n borderRadius: '2px',\n color: theme.palette.primary.main,\n hoverBackgroundColor: theme.palette.primary.main,\n hoverBorderColor: theme.palette.primary.dark,\n hoverColor: theme.palette.white.light,\n whiteSpace: 'nowrap',\n padding: '11px 16px',\n weight: theme.font.weights.medium,\n borderWidth: '1px',\n },\n disabled: {\n backgroundColor: theme.palette.grey.primary,\n borderColor: theme.palette.grey.primary,\n borderRadius: '2px',\n color: theme.palette.grey.ultralight,\n hoverBackgroundColor: theme.palette.grey.primary,\n hoverBorderColor: theme.palette.grey.primary,\n hoverColor: theme.palette.grey.ultralight,\n padding: '11px 16px',\n weight: theme.font.weights.medium,\n borderWidth: '1px',\n },\n link: {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n borderRadius: '2px',\n color: theme.palette.primary.main,\n hoverBackgroundColor: 'transparent',\n hoverBorderColor: 'transparent',\n hoverColor: theme.palette.primary.dark,\n padding: '0',\n weight: theme.font.weights.regular,\n borderWidth: '1px',\n },\n action: {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n borderRadius: '2px',\n color: theme.palette.secondary.primary,\n hoverBackgroundColor: 'transparent',\n hoverBorderColor: 'transparent',\n hoverColor: theme.palette.blue.dark,\n padding: '11px 17px 11px 24px',\n weight: theme.font.weights.regular,\n borderWidth: '1px',\n },\n primary: {\n backgroundColor: theme.palette.primary.main,\n borderColor: theme.palette.secondary.dark,\n borderRadius: '2px',\n color: theme.palette.white.light,\n hoverBackgroundColor: theme.palette.primary.dark,\n hoverBorderColor: theme.palette.primary.dark,\n hoverColor: theme.palette.white.light,\n padding: '11px 16px',\n weight: theme.font.weights.medium,\n borderWidth: '1px',\n },\n yellow: {\n backgroundColor: theme.palette.yellow.main,\n borderColor: theme.palette.yellow.dark,\n borderRadius: '2px',\n color: theme.palette.white.light,\n hoverBackgroundColor: theme.palette.yellow.dark,\n hoverBorderColor: theme.palette.yellow.dark,\n hoverColor: theme.palette.white.light,\n padding: '11px 16px',\n weight: theme.font.weights.medium,\n borderWidth: '1px',\n },\n text: {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n borderRadius: '2px',\n color: theme.palette.primary.main,\n hoverBackgroundColor: 'transparent',\n hoverBorderColor: 'transparent',\n hoverColor: theme.palette.primary.dark,\n padding: '11px 16px',\n weight: theme.font.weights.medium,\n borderWidth: '1px',\n },\n darkHover: {\n backgroundColor: 'transparent',\n borderRadius: '2px',\n color: theme.palette.white.light,\n hoverBackgroundColor: theme.palette.secondary.dark,\n hoverBorderColor: 'transparent',\n hoverColor: theme.palette.white.light,\n whiteSpace: 'nowrap',\n padding: '11px 16px',\n weight: theme.font.weights.medium,\n borderWidth: '1px',\n },\n opacity: {\n backgroundColor: 'transparent',\n borderColor: theme.palette.white.light,\n borderRadius: '2px',\n color: theme.palette.white.light,\n hoverBackgroundColor: theme.palette.white,\n hoverBorderColor: theme.palette.white.light,\n hoverColor: theme.palette.white.light,\n whiteSpace: 'nowrap',\n padding: '11px 16px',\n weight: theme.font.weights.medium,\n borderWidth: '1px',\n },\n pill: {\n backgroundColor: theme.palette.primary.light,\n borderColor: theme.palette.primary.light,\n borderRadius: '19px',\n color: theme.palette.white.light,\n hoverBackgroundColor: theme.palette.primary.dark,\n hoverBorderColor: theme.palette.primary.dark,\n hoverColor: theme.palette.white.light,\n padding: '5px 16px',\n weight: theme.font.weights.medium,\n borderWidth: '1px',\n },\n pillOutlined: {\n backgroundColor: 'transparent',\n borderColor: theme.palette.primary.main,\n borderRadius: '16px',\n color: theme.palette.primary.main,\n hoverBackgroundColor: theme.palette.primary.main,\n hoverBorderColor: theme.palette.primary.main,\n hoverColor: theme.palette.white.light,\n padding: '8px 12px',\n weight: theme.font.weights.medium,\n borderWidth: '1px',\n },\n secondaryPillOutlined: {\n backgroundColor: 'transparent',\n borderColor: theme.palette.secondary.primary,\n borderRadius: '16px',\n color: theme.palette.secondary.primary,\n hoverBackgroundColor: theme.palette.blue.dark,\n hoverBorderColor: theme.palette.blue.dark,\n hoverColor: theme.palette.white.light,\n padding: '6px 16px',\n weight: theme.font.weights.regular,\n borderWidth: '1px',\n },\n bluePill: {\n backgroundColor: theme.color.vividBlue,\n borderColor: theme.color.vividBlue,\n borderRadius: '19px',\n color: theme.palette.white.light,\n hoverBackgroundColor: theme.palette.primary.light,\n hoverBorderColor: theme.palette.primary.light,\n hoverColor: theme.palette.white.light,\n padding: '5px 16px',\n weight: theme.font.weights.medium,\n borderWidth: '1px',\n },\n bigBluePill: {\n backgroundColor: theme.color.vividBlue,\n borderColor: theme.color.vividBlue,\n borderRadius: '19px',\n color: theme.palette.white.light,\n hoverBackgroundColor: theme.palette.blue.dark,\n hoverBorderColor: theme.palette.blue.dark,\n hoverColor: theme.palette.white.light,\n padding: '9px 24px',\n weight: theme.font.weights.medium,\n borderWidth: '1px',\n disabledBackgroundColor: theme.palette.blue.ultralight,\n disabledBorderColor: theme.palette.blue.ultralight,\n },\n lightPill: {\n backgroundColor: theme.palette.white.light,\n borderColor: theme.palette.white.light,\n borderRadius: '19px',\n color: theme.palette.primary.light,\n hoverBackgroundColor: theme.palette.white.light,\n hoverBorderColor: theme.palette.white.light,\n hoverColor: theme.palette.primary.dark,\n padding: '5px 16px',\n weight: theme.font.weights.medium,\n borderWidth: '1px',\n },\n darkBorderedPill: {\n backgroundColor: 'transparent',\n borderColor: theme.palette.white.light,\n borderRadius: '20px',\n color: theme.palette.white.light,\n hoverBackgroundColor: theme.palette.white.light,\n hoverBorderColor: theme.palette.white.light,\n hoverColor: theme.palette.grey.dark,\n padding: '9px 16px',\n weight: theme.font.weights.medium,\n borderWidth: '2px',\n },\n lightBorderedPill: {\n backgroundColor: 'transparent',\n borderColor: theme.palette.secondary.primary,\n borderRadius: '20px',\n color: theme.palette.secondary.primary,\n hoverBackgroundColor: theme.palette.secondary.primary,\n hoverBorderColor: theme.palette.secondary.primary,\n hoverColor: theme.palette.white.light,\n padding: '9px 16px',\n weight: theme.font.weights.medium,\n borderWidth: '2px',\n },\n secondaryText: {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n borderRadius: '2px',\n color: theme.palette.secondary.primary,\n hoverBackgroundColor: 'transparent',\n hoverBorderColor: 'transparent',\n hoverColor: theme.palette.secondary.primary,\n hoverTextDecoration: 'underline',\n padding: '0px',\n weight: theme.font.weights.medium,\n borderWidth: '1px',\n },\n newPrimary: {\n backgroundColor: theme.palette.secondary.primary,\n borderColor: theme.palette.secondary.primary,\n borderRadius: '19px',\n color: theme.palette.white.light,\n hoverBackgroundColor: theme.color.cyanCobaltBlue,\n hoverBorderColor: theme.color.cyanCobaltBlue,\n hoverColor: theme.palette.white.light,\n padding: '9px 24px',\n weight: theme.font.weights.medium,\n borderWidth: '1px',\n disabledBackgroundColor: theme.palette.blue.ultralight,\n disabledBorderColor: theme.palette.blue.ultralight,\n },\n newTertiary: {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n color: theme.palette.secondary.primary,\n hoverBackgroundColor: 'transparent',\n hoverBorderColor: 'transparent',\n hoverColor: theme.palette.secondary.primary,\n hoverTextDecoration: 'underline',\n padding: '0',\n weight: theme.font.weights.medium,\n borderWidth: '0',\n },\n };\n\n const sizes = {\n small: {\n fontSize: theme.font.sizes.xxs,\n },\n medium: {\n fontSize: theme.font.sizes.sm,\n },\n large: {\n fontSize: theme.font.sizes.md,\n },\n };\n\n const aligns = {\n center: 'center',\n left: 'flex-start',\n right: 'flex-end',\n };\n\n return css`\n background-color: ${variants[variant].backgroundColor};\n border-radius: ${variants[variant].borderRadius};\n border: ${variants[variant].borderWidth} solid ${variants[variant].borderColor};\n color: ${variants[variant].color};\n cursor: pointer;\n display: flex;\n flex-direction: left;\n font-family:${theme.font.family[font]};\n font-size: ${sizes[size].fontSize};\n font-weight: ${variants[variant].weight};\n justify-content: ${aligns[align]};\n letter-spacing: 0.01px;\n padding: ${variants[variant].padding};\n text-align: ${align};\n text-decoration: ${variant === 'link' || variant === 'action' ? 'underline' : 'none'};\n transition: color 200ms ease-in-out, background-color 200ms ease-in-out, border-color 200ms ease-in-out;\n white-space: ${variants[variant].whiteSpace};\n width: 100%;\n\n @media(max-width: ${theme.breakpoints.sm}){\n padding: ${variant === 'action' && '8px 0px'};\n justify-content: ${variant === 'action' && 'flex-start'};\n }\n\n &:hover {\n background-color: ${variants[variant].hoverBackgroundColor};\n border: ${variants[variant].borderWidth} solid ${variants[variant].hoverBorderColor};\n color: ${variants[variant].hoverColor};\n text-decoration:${variants[variant].hoverTextDecoration || undefined};\n }\n\n & ${IconLeft} {\n margin: 0 18px 0 0;\n\n svg {\n fill: ${variants[variant].color};\n transition-property: fill, opacity;\n transition-duration: 200ms ;\n transition-timing-function: ease-in-out;\n opacity: ${variant === 'newTertiary' ? '0' : '1'};\n }\n }\n\n & ${IconRight} {\n margin: 0 0 0 18px;\n\n svg {\n fill: ${variants[variant].color};\n transition-property: fill, opacity;\n transition-duration: 200ms;\n transition-timing-function: ease-in-out;\n opacity: ${variant === 'newTertiary' ? '0' : '1'};\n }\n }\n\n &:hover ${IconLeft},\n &:hover ${IconRight} {\n\n svg {\n fill: ${variants[variant].hoverColor};\n opacity: 1;\n }\n }\n\n &.disabled {\n background-color: ${variants[variant].disabledBackgroundColor || variants.disabled.backgroundColor};\n border: 1px solid ${variants[variant].disabledBorderColor || variants.disabled.borderColor};\n color: ${variants.disabled.color};\n\n &:hover {\n background-color: ${variants.disabled.hoverBackgroundColor};\n border: 1px solid ${variants.disabled.hoverBorderColor};\n color: ${variants.disabled.hoverColor};\n }\n }\n `;\n }\n}\n`;\n\n\nexport const Label = styled.span``;\n","import React from 'react';\nimport * as Styles from './Button.styles';\n\nconst Button = ({\n disabled = false,\n label = 'Button text',\n onClick,\n iconLeft,\n iconLeftDirection = 'left',\n iconRightDirection = 'left',\n testId = 'button',\n type = 'button',\n variant = 'default',\n size = 'medium',\n display = 'inline',\n titleEnabled = true,\n align = 'center',\n iconRight,\n icon,\n font = 'primary',\n}) => {\n const handleOnClick = (event) => {\n onClick && onClick(event);\n };\n\n return (\n \n \n {iconLeft && (\n \n {iconLeft}\n \n )}\n\n {icon ? (\n \n {icon}\n \n ) : {label} }\n\n {iconRight && (\n \n {iconRight}\n \n )}\n \n \n );\n};\n\nexport default Button;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.svg`\n transform: rotate(-90deg);\n`;\n\nexport const Background = styled.circle`\n ${({ theme }) => css`\n fill: none;\n stroke: ${theme.palette.grey.variant};\n `}\n`;\n\nexport const Foreground = styled.circle`\n ${({ theme, bgColor }) => css`\n fill: none;\n stroke: ${bgColor || theme.palette.primary.main};\n `}\n`;\n","import React, { useState, useEffect } from 'react';\nimport * as Styles from './ProgressCircle.styles';\n\nconst ProgressCircle = ({\n testId = 'progress-circle',\n size = 56,\n current = 1,\n total = 4,\n strokeWidth = 4,\n bgColor,\n}) => {\n const radius = (size - strokeWidth) / 2;\n const circumference = 2 * Math.PI * radius;\n const [progress, setProgress] = useState(1 - current * 100 / total / 100);\n const [offset, setOffset] = useState(progress * circumference);\n\n useEffect(() => {\n setProgress(1 - current * 100 / total / 100);\n }, [current, total]);\n\n useEffect(() => {\n setOffset(progress * circumference);\n }, [progress, circumference]);\n\n return (\n \n \n );\n};\n\nexport default ProgressCircle;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n ${({ theme }) => css`\n background: ${theme.palette.white.light};\n color: ${theme.palette.grey.dark};\n padding: 24px 16px;\n font-family: ${theme.font.family.secondary};\n `}\n`;\n\nexport const StepCount = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background: ${theme.palette.grey.ultralight};\n border-radius: 50%;\n border: 2px solid ${theme.palette.primary.main};\n display: flex;\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.medium};\n height: 32px;\n justify-content: center;\n width: 32px;\n `}\n`;\n\nexport const StepLabel = styled.span`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.medium};\n margin-left: 16px;\n flex: 1;\n `}\n`;\n\nexport const Step = styled.div`\n ${({\n theme, color, bgColor, stepDoneColor, stepDoneBgColor,\n }) => css`\n display: flex;\n align-items: center;\n\n &.active {\n ${StepCount} {\n border-color: ${bgColor};\n background-color: ${bgColor};\n color: ${color};\n }\n }\n\n &.disabled {\n\n ${StepCount} {\n border-color: ${theme.palette.grey.ultralight};\n color: ${theme.palette.grey.main};\n }\n\n ${StepLabel} {\n color: ${theme.palette.grey.main};\n }\n }\n\n &.done {\n ${StepCount} {\n border-color: ${stepDoneBgColor || theme.palette.grey.primary};\n background-color: ${stepDoneBgColor};\n svg {\n fill: ${stepDoneColor || theme.palette.grey.primary};\n }\n }\n\n ${StepLabel} {\n color: ${theme.palette.grey.dark};\n }\n }\n `}\n`;\n\nexport const Steps = styled.div`\n${({ theme }) => css`\n display: flex;\n align-items: center;\n justify-content: center;\n\n @media (max-width: ${theme.breakpoints.md}) {\n justify-content: flex-start;\n margin-left: 24px;\n }\n\n & ${Step}:not(:first-child) {\n margin-left: 40px;\n }\n `}\n`;\n\nexport const StepperDesktop = styled.div`\n ${({ theme }) => css`\n @media (max-width: ${theme.breakpoints.md}) {\n display: none;\n }\n `}\n`;\n\nexport const StepperMobile = styled.div`\n ${({ theme }) => css`\n display: none;\n\n @media (max-width: ${theme.breakpoints.md}) {\n display: block;\n }\n `}\n`;\n\nexport const StepCounter = styled.div`\n position: relative;\n`;\n\nexport const StepCounterText = styled.p`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.medium};\n position: absolute;\n z-index: 1;\n text-align: center;\n margin: 0;\n width: 100%;\n top: 50%;\n transform: translateY(-50%);\n `}\n`;\n","export const FeedbackStepsStatus = {\n ACTIVE: 'active',\n DISABLED: 'disabled',\n DONE: 'done',\n};\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { ProgressCircle } from '@/pages/common/ProgressCircle';\nimport { IconCheck } from '@/icons';\nimport * as Styles from './FeedbackStepper.styles';\nimport { FeedbackStepsStatus } from './FeedbackStepper.types';\n\nconst FeedbackStepper = ({\n testId = 'feedback-stepper',\n activeStep = 1,\n steps = [\n {\n id: 1,\n label: 'Answer Question',\n },\n {\n id: 2,\n label: 'Confirm Cancellation',\n },\n ],\n stepActiveColor,\n stepActiveBgColor,\n stepDoneColor,\n stepDoneBgColor,\n}) => {\n const [feedbackActiveStep, setFeedbackActiveStep] = useState(null);\n const [feedbackSteps, setFeedbackSteps] = useState([]);\n const [currentFeedBackStep, setCurrentFeedBackStep] = useState(null);\n\n const changeActiveStep = useCallback((activeStep) => {\n const handledSteps = steps.map((step) => {\n let status = FeedbackStepsStatus.DISABLED;\n\n if (activeStep > step.id || step.markAsDone) {\n status = FeedbackStepsStatus.DONE;\n } else if (activeStep === step.id) {\n status = FeedbackStepsStatus.ACTIVE;\n }\n\n return {\n ...step,\n status,\n };\n });\n\n setFeedbackSteps(handledSteps);\n }, [steps]);\n\n useEffect(() => {\n if (activeStep !== feedbackActiveStep) {\n changeActiveStep(activeStep);\n setFeedbackActiveStep(activeStep);\n }\n }, [activeStep, changeActiveStep, feedbackActiveStep, feedbackSteps]);\n\n useEffect(() => {\n const isAllStepsDone = feedbackSteps.every(step => step.status === FeedbackStepsStatus.DONE);\n\n setCurrentFeedBackStep(\n isAllStepsDone\n ? feedbackSteps[feedbackSteps.length - 1]\n : feedbackSteps.find(step => step.status === FeedbackStepsStatus.ACTIVE),\n );\n }, [feedbackSteps]);\n\n return (\n \n \n \n {feedbackSteps.map(step => (\n \n \n {\n step.status === FeedbackStepsStatus.DONE ? (\n \n {step.label} \n \n ))}\n \n \n {currentFeedBackStep && (\n \n \n \n \n \n {`${currentFeedBackStep.id} de ${feedbackSteps.length}`}\n \n \n {currentFeedBackStep.label} \n \n \n \n )}\n \n );\n};\n\nexport default FeedbackStepper;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.header`\n ${({ theme, paddingBottom }) => css`\n align-items: center;\n background: ${theme.palette.white.light};\n box-shadow: 0px 1px 3px ${theme.shadows.grey.light};\n display: flex;\n padding: ${paddingBottom ? '14px 16px' : '16px 24px 0px'};\n `}\n`;\n\nexport const TooltipWrapper = styled.div`\n display: flex;\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.light};\n margin: 0;\n `}\n`;\n\nexport const Description = styled.span`\n ${({ theme }) => css`\n color: ${theme.palette.grey.light};\n font-size: ${theme.font.sizes.lg};\n font-weight: ${theme.font.weights.regular};\n margin-left: 6px;\n `}\n`;\n\nexport const ChildrenContainer = styled.span`\n ${({ position }) => css`\n justify-self: ${position};\n `}\n`;\n","import React, { useCallback } from 'react';\nimport * as Styles from './Header.styles';\nimport { Tooltip } from '@/pages/common';\n\nconst Header = ({\n children,\n childrenPosition = 'flex-start',\n description = 'Description',\n testId = 'header',\n title = 'Title',\n tooltip = null,\n paddingBottom = true,\n}) => {\n const headerContent = useCallback(() => (\n <>\n {title} \n\n {description\n && {description} \n }\n\n {children} \n \n ), [children, childrenPosition, description, title, testId]);\n\n return (\n \n {tooltip\n ? (\n \n \n {headerContent()}\n \n \n )\n : headerContent()\n }\n \n );\n};\n\nexport default Header;\n","import styled, { css } from 'styled-components';\n\nexport const Icon = styled.div`\n ${({ iconColor }) => css`\n display: flex;\n\n svg {\n fill: ${iconColor};\n }\n `}\n`;\n\nexport const Text = styled.div`\n ${({ theme }) => css`\n p {\n margin: 0;\n color: ${theme.palette.grey.dark};\n }\n `}\n`;\n\nexport const Wrapper = styled.div`\n ${({ theme, borderColor, variant }) => {\n const variants = {\n small: {\n padding: '2px 4px',\n borderRadius: '2px',\n iconScale: 0.9,\n fontSize: theme.font.sizes.xxs,\n lineHeight: '16px',\n marginLeft: '4px',\n fontFamily: theme.font.family.primary,\n },\n default: {\n padding: '16px',\n borderRadius: '5px',\n iconScale: 1,\n fontSize: theme.font.sizes.xxs,\n lineHeight: '16px',\n marginLeft: '16px',\n fontFamily: theme.font.family.primary,\n },\n large: {\n padding: '16px',\n borderRadius: '5px',\n iconScale: 1.4,\n fontSize: theme.font.sizes.md,\n lineHeight: '24px',\n marginLeft: '16px',\n fontFamily: theme.font.family.primary,\n },\n warning: {\n color: theme.palette.grey.dark,\n fontFamily: theme.font.family.secondary,\n fontSize: theme.font.sizes.xxs,\n marginLeft: '8px',\n padding: '0px 24px',\n },\n altWarning: {\n color: theme.palette.grey.dark,\n fontFamily: theme.font.family.secondary,\n fontSize: theme.font.sizes.xxs,\n marginLeft: '8px',\n padding: '0px 24px 0px 0px',\n },\n };\n\n return css`\n display: flex;\n align-items: flex-start;\n border: 1px solid ${borderColor};\n padding: ${(variant === 'warning') ? '18px 0px' : variants[variant].padding};\n border-radius: ${variants[variant].borderRadius};\n font-family: ${variants[variant].fontFamily};\n\n & ${Icon} svg {\n transform: scale(${variants[variant].iconScale});\n margin-top: 9px;\n @media (min-width: ${theme.breakpoints.sm}){\n margin-top: 0px;\n }\n }\n\n & ${Text} {\n margin-left: ${variants[variant].marginLeft};\n font-size: ${variants[variant].fontSize};\n line-height: ${variants[variant].lineHeight};\n color: ${variants[variant].color}\n }\n @media (min-width: ${theme.breakpoints.sm}){\n padding: ${variants[variant].padding};\n align-items: center;\n }\n `;\n }\n}\n`;\n","import React from 'react';\nimport { IconWarning } from '@/icons';\nimport * as Styles from './Message.style';\n\nconst Message = ({\n borderColor = '#4A4A4A',\n Icon = \n \n {!!Icon && Icon}\n \n \n {text}\n \n \n );\n};\n\nexport default Message;\n","import styled, { css } from 'styled-components';\n\nexport const Overlay = styled.div`\n ${({ position }) => css`\n align-items: center;\n background-color: rgba(74,74,74,0.8);\n display: flex;\n height: 100vh;\n min-height: 40vh;\n justify-content: center;\n left: 0;\n position: ${position};\n top: 0;\n width: 100vw;\n z-index: 130;\n `}\n`;\n\nexport const ModalCard = styled.div`${(\n {\n theme, maxWidth, maxHeight, disablePadding, disableOverFlow, variant, centerContentInMobile,\n },\n) => {\n const variants = {\n default: { margin: '16px' },\n regular: { margin: '32px' },\n };\n return css`\n background-color: ${theme.palette.white.light};\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n max-height: ${`${maxHeight}px`};\n max-width: ${`${maxWidth}px`};\n min-height: 100px;\n overflow-x: hidden;\n overflow-y: auto;\n\n &::-webkit-scrollbar {\n width: 6px;\n }\n\n &::-webkit-scrollbar-track {\n background: ${theme.v1.color.white.primary};\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${theme.v1.color.text.disabled};\n border-left: 0;\n border-radius: 25px;\n border-right: 0;\n height: 30px;\n width: 100%; \n }\n\n ${!disableOverFlow && css`\n overflow: auto;\n `}\n\n ${!disablePadding && css`\n padding: ${variants[variant].margin};\n `}\n \n position: relative;\n width: 100%;\n \n @media (max-width: ${theme.breakpoints.sm}) {\n height: 100%;\n max-height: 100%;\n ${centerContentInMobile && css`\n justify-content: center;\n `}\n },\n `;\n}}\n `;\n\nexport const CloseButton = styled.button`\n ${({ theme, variant, whiteIcon }) => {\n const variants = {\n default: { margin: '16px' },\n regular: { margin: '32px' },\n };\n return css`\n align-items: center;\n background-color: unset;\n border: unset;\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n margin: 0;\n opacity: 1;\n padding: 0;\n position: absolute;\n right: ${variants[variant].margin};\n top: ${variants[variant].margin};\n width: 24px;\n z-index: ${theme.v1.layers.important};\n\n svg {\n fill: ${whiteIcon ? theme.v2.colors.white.primary : theme.palette.grey.main};\n transition: fill 200ms ease-in-out;\n &:hover{\n fill: ${theme.palette.secondary.primary};\n }\n }\n `;\n }}\n `;\n","import React, {\n useCallback, useEffect, useRef,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport { IconClose } from '@/icons';\nimport * as Styles from './Modal.styles';\n\nconst Modal = ({\n children,\n maxWidth = 600,\n maxHeight = 600,\n onClose,\n disablePadding = false,\n disableOverFlow = false,\n centerContentInMobile = false,\n closeOnOutsideClick = true,\n testId = 'modal',\n fromTarget = '#root',\n position = 'fixed',\n variant = 'default',\n onCloseButtonAction,\n whiteIcon,\n}) => {\n const ESCAPE_KEY_CODE = 27;\n const cardRef = useRef();\n const root = document.querySelector(fromTarget) || document.body;\n\n const handleOnClose = useCallback((isCloseButton) => {\n onClose && onClose();\n\n if (isCloseButton) {\n onCloseButtonAction && onCloseButtonAction();\n }\n }, [onClose, onCloseButtonAction]);\n\n const handlePressKey = useCallback((event) => {\n if (event.keyCode === ESCAPE_KEY_CODE) {\n handleOnClose();\n }\n }, [handleOnClose]);\n\n const handleClickOutsideCard = useCallback((event) => {\n const isClickOutsideCard = !cardRef.current || !cardRef.current.contains(event.target);\n\n if (isClickOutsideCard && closeOnOutsideClick) {\n handleOnClose();\n }\n }, [handleOnClose,\n closeOnOutsideClick,\n ]);\n\n useEffect(() => {\n document.body.style.overflowY = 'hidden';\n document.addEventListener('keydown', handlePressKey, false);\n document.addEventListener('mousedown', handleClickOutsideCard, false);\n\n return () => {\n document.removeEventListener('keydown', handlePressKey, false);\n document.removeEventListener('mousedown', handleClickOutsideCard, false);\n document.body.style.overflowY = 'unset';\n };\n }, [handlePressKey, handleClickOutsideCard]);\n\n const template = (\n \n \n {(onClose || onCloseButtonAction) && (\n handleOnClose(true)} data-testid={`${testId}-button-close`} variant={variant} whiteIcon={whiteIcon}>\n \n )}\n {children}\n \n \n );\n\n return fromTarget\n ? ReactDOM.createPortal(template, root)\n : template;\n};\n\nexport default Modal;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme, maxWidth, hasToast }) => css`\n bottom: 0;\n height: 0px;\n max-width: ${!hasToast ? maxWidth || '513px' : 'auto'};\n position: fixed;\n right: 0;\n width: ${!hasToast ? '100%' : '380px'};\n z-index: 1000;\n\n @media (max-width: ${theme.breakpoints.xs}) {\n max-width: 300px;\n }\n `}\n`;\n\nexport const IconWrapper = styled.div`\n ${({ round, theme }) => css`\n align-items: center;\n background-color: ${round ? theme.palette.white.light : '0px'};\n border-radius: ${round ? '50%' : '0px'};\n display: flex;\n height: 24px;\n justify-content: center;\n margin-right: 16px;\n max-width: 24px;\n width: 100%;\n\n @media (max-width: ${theme.breakpoints.xs}) {\n width: 95px;\n }\n `}\n`;\n\nexport const Notification = styled.div`\n ${({ theme, maxWidth }) => css`\n align-items:center;\n animation-delay: 0s;\n animation-duration: 500ms;\n animation-iteration-count: 1;\n border-radius:2px;\n bottom: -100vh;\n display: flex;\n margin: 10px;\n max-width: ${maxWidth || '513px'};\n position: absolute;\n right: 0px;\n transition: 200ms ease-in-out;\n width: 100%;\n\n > div {\n width: 100%;\n }\n\n p {\n margin: 0px;\n }\n\n @media (max-width: ${theme.breakpoints.xs}) {\n max-width: 100%;\n }\n `}\n`;\n\nexport const ContentWrapper = styled.div`\n ${({ theme }) => css`\n color:${theme.palette.white.light};\n font-size: 16px;\n letter-spacing: 0.01px;\n line-height: 20px;\n margin-right: 30px;\n margin: unset;\n padding: unset;\n\n p{\n color:${theme.palette.white.light};\n font-size: 16px;\n letter-spacing: 0.01px;\n line-height: 20px;\n margin: unset;\n padding: unset;\n }\n `}\n`;\n\nexport const CloseButton = styled.div`\n background-color: transparent;\n border: unset;\n cursor: pointer;\n display: flex;\n margin-left: auto;\n`;\n","import styled from 'styled-components';\nimport { contextList } from './Toast';\n\nexport const coloByContext = (context = 'positive') => ({\n [contextList.positive]: '#35CF8B',\n [contextList.neutral]: '#74C1FF',\n [contextList.alert]: '#FF9442',\n [contextList.negative]: '#F16A5E',\n [contextList.error]: '#DA4336',\n})[context];\n\nexport const Container = styled.dialog`\n border-radius: 8px;\n margin: 0 20px 10px 20px;\n padding: 16px;\n border: 0;\n background: #1F2044;\n display: flex;\n gap: 10px;\n font-family: 'Galano';\n\n ${({ error }) => error && `\n background-color: #DA4336;\n button, p, div {\n color: #ffffff;\n };\n `}\n`;\n\nexport const Text = styled.div`\n display: flex;\n flex-direction: column;\n gap: 16px;\n p {\n margin: 0;\n padding: 0;\n }\n`;\n\nexport const Title = styled.p`\n color: #fff;\n font-weight: 700;\n font-size: 16px;\n\n ${({ context }) => context !== contextList.error && `\n color: ${coloByContext(context)};\n `}\n`;\n\nexport const Info = styled.p`\n font-weight: 500;\n color: #CDD8DF;\n font-size: 14px;\n`;\n\nexport const Actions = styled.div`\n margin: 0 3px;\n font-weight: 500;\n font-size: 14px;\n color: #FFFFFF;\n align-content: center;\n`;\n\nexport const Close = styled.button`\n align-content: center;\n padding: 0;\n margin: 0;\n background-color: transparent;\n border: 0;\n cursor: pointer;\n\n ${({ hasActionsButton }) => hasActionsButton && `\n align-content: start;\n `}\n\n span {\n display: block;\n cursor: pointer;\n }\n`;\n\nexport const Buttons = styled.div`\n display: flex;\n gap: 24px;\n`;\n\nexport const Button = styled.button`\n font-weight: 500;\n font-size: 14;\n font-family: 'Galano';\n border-radius: 1000px;\n background-color: transparent;\n padding: 7px 20px;\n color: #fff;\n cursor: pointer;\n\n &:active, :focus, :focus-visible {\n outline: none;\n }\n\n ${({ variant }) => variant === 'primary' && `\n border: 1px solid #fff;\n `}\n\n ${({ variant }) => variant === 'secondary' && `\n border: 0;\n `}\n`;\n","import React from 'react';\nimport {\n IconCheckCircle,\n IconReportHeptagon,\n IconAlertTriangle,\n IconInfoCircle,\n IconClose,\n} from '@/icons';\nimport * as Styles from './Toast.styles';\n\nexport const contextList = {\n positive: 'positive',\n neutral: 'neutral',\n alert: 'alert',\n negative: 'negative',\n error: 'error',\n};\n\nexport const getIconBasedOnContext = (context = 'positive') => ({\n [contextList.positive]: \n {showIcon ? (\n getIconBasedOnContext(context)\n ) : null}\n \n \n {title ? (\n {title} \n ) : null}\n {info} \n
\n {onActions.onAccept && onActions.onCancel ? (\n \n \n {labelPrimaryButton}\n \n \n {labelSecondaryButton}\n \n \n ) : null}\n \n {onActions.onSingleAction && !(onActions.onAccept && onActions.onCancel) ? (\n \n {actionLabel}\n \n ) : null}\n {onClose ? (\n \n \n ) : null }\n \n);\n","import React, {\n useRef, useEffect, useState,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { commonActions } from '@/redux/modules';\nimport * as Styles from './Notifications.styles';\nimport { Toast } from '../Toast';\nimport { Alert } from 'gatorcomponents';\n\n\nconst timeOut = null;\nconst Notifications = () => {\n const notifications = useSelector(state => state.common.notifications);\n const dispatch = useDispatch();\n const domNode = document.body;\n const wrapperRef = useRef();\n const [maxWidth, setMaxWidth] = useState('513px');\n\n useEffect(() => {\n clearTimeout(timeOut);\n if (notifications.length) {\n setTimeout(() => {\n let lenght = 0;\n wrapperRef.current.childNodes.forEach((notification, index) => {\n const notficiationItem = notification;\n notficiationItem.style.bottom = `${lenght}px`;\n lenght += wrapperRef.current.childNodes[index].offsetHeight + 10;\n });\n }, 100);\n }\n }, [notifications, dispatch]);\n\n const removeNotification = (index) => {\n dispatch(commonActions.notifications.remove(index));\n };\n\n return ReactDOM.createPortal(\n \n {notifications.map((notification, index) => {\n if (notification.maxWidth !== maxWidth) {\n setMaxWidth(notification.maxWidth);\n }\n\n if (notification.toast) {\n return (\n removeNotification(index)}\n index={index}\n {...notification.toast}\n />\n );\n }\n\n return (\n \n removeNotification(index)}\n />\n \n );\n })}\n ,\n domNode,\n );\n};\n\nexport default Notifications;\n","import styled, { css } from 'styled-components';\n\nexport const Dot = styled.span`\n border-radius: 50%;\n height: 13px;\n left: 50%;\n opacity: 0;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n transition: opacity 200ms ease-in-out;\n width: 13px;\n z-index: 0;\n`;\n\nexport const Wrapper = styled.span`\n ${({\n theme, checked, size, variant,\n }) => {\n const variants = {\n default: {\n border: `2px solid ${checked ? theme.palette.primary.main : theme.palette.grey.dark}`,\n width: '24px',\n background: theme.palette.primary.main,\n },\n primary: {\n border: `2px solid ${checked ? theme.palette.blue.dark : theme.palette.secondary.primary}`,\n width: '20px',\n background: theme.palette.primary.main,\n },\n v1: {\n border: `2px solid ${checked ? theme.v1.color.action.primary : theme.v1.color.text.primary}`,\n width: '24px',\n background: theme.v1.color.action.primary,\n },\n sizes: {\n small: '16px',\n medium: '20px',\n default: '24px',\n },\n };\n\n return css`\n border-radius: 50%;\n border: ${variants[variant].border};\n display: inline-flex;\n flex: 0 0 ${size === 'small' || size === 'medium' ? variants.sizes[size] : '24px'};\n height: ${size === 'small' || size === 'medium' ? variants.sizes[size] : '24px'};\n position: relative;\n transition: border-color 200ms ease-in-out;\n width: ${size === 'small' || size === 'medium' ? variants.sizes[size] : '24px'};\n\n ${Dot} {\n background: ${variants[variant].background};\n flex: 0 0 ${size === 'small' ? '10px' : '13px'};\n height: ${size === 'small' ? '10px' : '13px'};\n width: ${size === 'small' ? '10px' : '13px'};\n }\n `;\n }}\n`;\n\nexport const Input = styled.input`\n display: block;\n height: 100%;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: relative;\n width: 100%;\n z-index: 1;\n\n &:hover {\n cursor: pointer;\n }\n\n &:checked + ${Dot} {\n opacity: 1;\n }\n`;\n","import React, { useEffect, useState } from 'react';\nimport * as Styles from './Radio.styles';\n\nconst Radio = ({\n checked = false,\n onChange,\n testId = 'radio',\n value = 'value',\n inputId = null,\n size = 'default',\n variant = 'default',\n}) => {\n const [currentChecked, setCurrentChecked] = useState(checked);\n\n const handleOnChange = (event) => {\n (checked && onChange) && onChange(event, value);\n setCurrentChecked(!checked);\n };\n\n useEffect(() => {\n setCurrentChecked(checked);\n }, [checked]);\n return (\n \n \n
\n );\n};\n\nLoader.propTypes = {\n classes: PropTypes.object.isRequired,\n classesToProps: PropTypes.string,\n fullscreen: PropTypes.bool,\n positionFixed: PropTypes.bool,\n\n};\n\nexport default withStyles(styles)(Loader);\n","import React, {\n useState, useCallback, useEffect, useRef, useMemo,\n} from 'react';\nimport { IconArrowDown, IconArrowDownOutlined } from '@/icons';\nimport * as Styles from './Select.styles';\nimport Loader from '@/components/Layout/Loader';\n\nconst Select = ({\n defaultOption = null,\n defaultOptionLabel = 'Select',\n defaultOptionValue = '',\n disabled = false,\n error = '',\n label = '',\n onChange,\n options = [],\n testId = 'select',\n customDropdownIcon = '',\n animatedDropdownIcon = false,\n placeholder = '',\n variant = 'default',\n fixedBottomOption = '',\n fixedBottomOptionAction = () => {},\n customSelectedValue,\n loading = false,\n maxHeight = '203px',\n autoSelectIfOnOption = true,\n selectedOption = null,\n searchable,\n}) => {\n const wrapperRef = useRef(null);\n const [isOpen, setIsOpen] = useState(false);\n const [selected, setSelected] = useState(selectedOption);\n const [isEmpty, setIsEmpty] = useState(false);\n const [inputedValue, setInputedValue] = useState('');\n\n const defaultSelectOption = useMemo(\n () => ({\n id: 'default',\n label: defaultOptionLabel,\n value: defaultOptionValue,\n }),\n [defaultOptionLabel, defaultOptionValue],\n );\n\n const initialOptions = placeholder ? [...options] : [defaultSelectOption, ...options];\n const [selectOptions, setSelectOptions] = useState(initialOptions);\n\n const handlePlaceholderAndDefault = useCallback(() => {\n if (defaultOption && !selected && selectOptions.length) {\n setSelected({ value: selectOptions[defaultOption], callOnChange: false });\n }\n\n if (!placeholder && !defaultOption) {\n if (JSON.stringify(selectOptions) !== JSON.stringify([defaultSelectOption, ...options])) {\n setSelectOptions([defaultSelectOption, ...options]);\n setSelected(null);\n }\n\n if (!selected && selectOptions.length > 0) {\n const clamped = Math.min(Math.max(defaultOption, 0), selectOptions.length - 1);\n setSelected({ value: selectOptions[clamped], callOnChange: false });\n }\n }\n\n if (placeholder && !selected && selectOptions.length === 1) {\n if (autoSelectIfOnOption) {\n const clamped = Math.min(Math.max(defaultOption, 0), selectOptions.length - 1);\n setSelected({ value: selectOptions[clamped], callOnChange: false });\n }\n }\n }, [defaultOption, selectOptions, selected, options, defaultSelectOption, placeholder, autoSelectIfOnOption]);\n\n useEffect(() => {\n handlePlaceholderAndDefault();\n }, [handlePlaceholderAndDefault]);\n\n const onSelectClick = useCallback(() => {\n setIsOpen(!isOpen);\n }, [isOpen]);\n\n const getArrowStyle = () => {\n if (variant === 'sites') {\n return onOptionClick(option)} variant={variant}>\n {option.label} \n \n ));\n\n const onKeyDown = useCallback((e) => {\n const esc = 27;\n if (e.keyCode === esc) {\n setIsOpen(false);\n setInputedValue('');\n }\n }, []);\n\n useEffect(() => {\n window.addEventListener('mousedown', onMouseDown);\n window.addEventListener('keydown', onKeyDown);\n return () => {\n window.removeEventListener('mousedown', onMouseDown);\n window.addEventListener('keydown', onKeyDown);\n };\n }, [onMouseDown, onKeyDown]);\n\n useEffect(() => {\n if ((placeholder && !selectOptions.length) || !placeholder) { setIsEmpty(selectOptions.length === 1); }\n }, [selectOptions.length, isEmpty, selectOptions, label, placeholder]);\n\n useEffect(() => {\n if (placeholder) {\n setSelectOptions([...options]);\n }\n }, [options, placeholder]);\n\n useEffect(() => {\n if (selectedOption) {\n if (selectedOption.label) {\n const option = selectOptions.find(options => options.label === selectedOption.label);\n if (option) {\n setSelected({ value: option, callOnChange: false });\n }\n }\n } else if (!selectedOption) {\n setSelected(null);\n }\n }, [selectedOption, selectOptions]);\n\n\n return (\n \n {label && (\n \n {label}\n \n )}\n \n {(searchable && isOpen) && (\n setInputedValue(e.target.value)}\n />\n )}\n\n {(!searchable || !isOpen) && (\n <>\n \n {selected\n ? selected.label || selected.value.label\n : placeholder}\n \n\n {!isEmpty && !disabled && (\n \n {customDropdownIcon || getArrowStyle()}\n \n )}\n \n )}\n\n \n {loading\n && \n {optionsMap}\n \n )}\n\n {(fixedBottomOption && !loading)\n && {fixedBottomOption} \n }\n \n\n \n\n {error && {error} }\n \n );\n};\n\nexport default Select;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.textarea`\n ${({ theme }) => css`\n border-radius: 5px;\n border: 1px solid ${theme.palette.grey.light};\n box-sizing: border-box;\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.regular};\n min-height: 144px;\n outline: 0 none;\n padding: 16px;\n resize: none;\n transition: border-color 200ms ease-in-out;\n width: 100%;\n\n &:focus {\n border-color: ${theme.palette.primary.main};\n }\n `}\n`;\n","import React, { useState } from 'react';\nimport * as Styles from './Textarea.styles';\n\nconst Textarea = ({\n onChange,\n forwardRef,\n testId = 'textarea',\n value = '',\n maxLength = 250,\n}) => {\n const [textareaValue, setTextareaValue] = useState(value);\n const handleOnChange = (event) => {\n onChange && onChange(event);\n\n if (event.target.value.length > maxLength) {\n return;\n }\n\n setTextareaValue(event.target.value);\n };\n\n return (\n \n {questions.map(question => (\n \n { question.value } \n {questionDescriptionLabel} \n \n {question.options.map(option => (\n onOptionClick(question.id, option.id)}\n selected={surveyOptionId === option.id}\n visible={option.selected}\n data-testid={`${testId}-option-${option.id}`}\n >\n \n \n \n \n {option.value}\n \n \n \n ))}\n \n\n \n \n { reasonQuestionLabel }\n \n \n \n \n \n ))}\n \n );\n};\n\nexport default Survey;\n","import styled, { css } from 'styled-components';\n\nexport const TabButton = styled.button`\n ${({ theme, activated }) => css`\n align-items: center;\n background: transparent;\n border: 0;\n border-bottom: 5px solid ${activated ? theme.palette.primary.main : theme.palette.white.light};\n display: flex;\n justify-content: center;\n opacity: ${activated ? '1' : '0.5'};\n transition: opacity 200ms ease-in-out;\n\n &:hover {\n cursor: pointer;\n opacity: 1;\n }\n\n @media (max-width: ${theme.breakpoints.md}) {\n flex: 1;\n }\n `}\n`;\n\nexport const TabText = styled.div`\n ${({ theme }) => css`\n display: flex;\n font-weight: 500;\n margin-left: 8px;\n text-transform: uppercase;\n color: ${theme.palette.primary.main}\n `}\n`;\n\nexport const TabIcon = styled.div`\n display: flex;\n`;\n\nexport const TabHeader = styled.div`\n ${({ theme }) => css`\n background: ${theme.palette.white.light};\n display: flex;\n height: 60px;\n\n ${TabButton} {\n padding: 0 16px;\n }\n\n ${TabText} {\n font-size: 14px;\n }\n\n @media (max-width: ${theme.breakpoints.md}) {\n background: ${theme.palette.primary.dark};\n\n ${TabButton} {\n padding: 0;\n }\n\n ${TabIcon} svg {\n fill: ${theme.palette.white.light};\n }\n\n ${TabText} {\n color: ${theme.palette.white.light};\n }\n }\n `}\n`;\n\nexport const TabContainer = styled.div`\n display: flex;\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.span`\n ${({\n theme, variant, color, bgColor,\n }) => {\n const variants = {\n small: {\n fontSize: theme.font.sizes.xxxxs,\n lineHeight: '11px',\n padding: '3px 6px 2px 6px',\n },\n default: {\n fontSize: theme.font.sizes.xxs,\n lineHeight: '16px',\n padding: '4px 8px',\n },\n };\n\n return css`\n align-items: center;\n background-color: ${bgColor};\n color: ${color};\n display: inline-flex;\n padding: ${variants[variant].padding};\n font-size: ${variants[variant].fontSize};\n font-weight: ${theme.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: ${variants[variant].lineHeight};\n margin: 0px;\n text-transform: capitalize;\n border-radius: 2px;\n white-space: nowrap;\n `;\n }\n}\n`;\n","import React from 'react';\nimport * as Styles from './Tag.styles';\n\nconst Tag = ({\n label = 'text',\n testId = 'tag',\n variant = 'default',\n color = '#ffffff',\n bgColor = '#a4a4a4',\n}) => (\n \n {label}\n \n);\n\nexport default Tag;\n","const debounce = (fn, timeout = 100) => {\n let clearId = null;\n return (...args) => {\n clearId && clearTimeout(clearId);\n clearId = setTimeout(() => fn(...args), timeout);\n };\n};\n\nexport default debounce;\n","import { useState, useLayoutEffect } from 'react';\nimport { debounce } from '@/utils/debounce';\n\nconst useResize = () => {\n const [rect, setRect] = useState({\n width: window.innerWidth,\n height: window.innerHeight,\n });\n\n const onResize = debounce(() => {\n setRect({\n width: window.innerWidth,\n height: window.innerHeight,\n });\n });\n\n useLayoutEffect(() => {\n window.addEventListener('resize', onResize);\n return () => {\n window.removeEventListener('resize', onResize);\n };\n }, [onResize]);\n\n return rect;\n};\n\nexport default useResize;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n position: relative;\n`;\n\nexport const Arrow = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.palette.white.light};\n border: 1px solid ${theme.palette.grey.primary};\n border-width: 1px 1px 0 0;\n height: 12px;\n position: absolute;\n width: 12px;\n `}\n`;\n\nexport const Tooltip = styled.div`\n ${({ theme, active }) => css`\n max-width: ${active ? 'unset' : '0px'};\n opacity: ${active ? '1' : '0'};\n overflow: ${active ? 'unset' : 'hidden'};\n padding: 16px;\n pointer-events: none;\n position: absolute;\n transition: opacity 350ms ease-in-out;\n visibility: ${active ? 'visible' : 'hidden'};\n z-index: ${theme.layers.important};\n\n &.top {\n top: 0;\n left: 50%;\n transform: translate(-50%, -100%);\n\n & ${Arrow} {\n left: 50%;\n top: 100%;\n transform: translate(-50%, -22px) rotate(136deg);\n }\n }\n\n &.right {\n top: 50%;\n left: 100%;\n transform: translate(0, -50%);\n\n & ${Arrow} {\n left: 0;\n top: 50%;\n transform: translate(10px, -50%) rotate(230deg);\n }\n }\n\n &.bottom {\n left: auto;\n padding: 0;\n right: auto;\n transform: unset;\n\n & ${Arrow} {\n left: 50%;\n top: 0;\n transform: translate(-50%, 10px) rotate(315deg);\n }\n }\n\n &.bottomLeft {\n left: -300px;\n top: 25px;\n padding: 0;\n right: auto;\n transform: unset;\n\n & ${Arrow} {\n left: 50%;\n top: 0;\n transform: translate(-50%, 10px) rotate(315deg);\n }\n }\n\n &.bottomCenter {\n left: -100px;\n top: 25px;\n padding: 0;\n right: auto;\n transform: unset;\n\n & ${Arrow} {\n left: 50%;\n top: 0;\n transform: translate(-50%, 10px) rotate(315deg);\n }\n }\n\n &.left {\n top: 50%;\n transform: translate(-100%, -50%);\n\n & ${Arrow} {\n left: 100%;\n top: 50%;\n transform: translate(-22px, -50%) rotate(45deg);\n }\n }\n `}\n`;\n\nexport const NestedChildren = styled.div`\n display: flex;\n`;\n\nexport const Text = styled.div`\n ${({\n theme, width, variant, translateXMobile,\n }) => {\n const variants = {\n white: {\n backgroundColor: theme.palette.white.light,\n border: `1px solid ${theme.palette.grey.primary}`,\n borderRadius: '0px',\n fontFamily: theme.font.family.primary,\n fontSize: theme.font.sizes.sm,\n padding: '16px',\n textColor: theme.palette.grey.dark,\n },\n dark: {\n backgroundColor: theme.palette.grey.darklight,\n border: `1px solid ${theme.palette.grey.darklight}`,\n borderRadius: '3px',\n fontFamily: theme.font.family.secondary,\n fontSize: theme.font.sizes.xxs,\n padding: '8px 16px',\n textColor: theme.palette.white.light,\n },\n };\n\n return css`\n background-color: ${variants[variant].backgroundColor};\n border-radius:${variants[variant].borderRadius};\n border: ${variants[variant].border};\n box-shadow: 3px 4px 12px ${theme.shadows.grey.light};\n color: ${variants[variant].textColor};\n font-family: ${variants[variant].fontFamily};\n font-size: ${variants[variant].fontSize};\n font-weight: ${theme.font.weights.regular};\n min-width: ${width}px;\n padding: ${variants[variant].padding};\n\n @media (max-width: ${theme.breakpoints.md}) {\n transform: translateX(${translateXMobile});\n }\n `;\n }}\n`;\n","import React, {\n useRef,\n useState,\n useLayoutEffect,\n useCallback,\n} from 'react';\nimport { useResize } from '@/hooks/useResize';\nimport { TextDescriptor } from '@/pages/common';\nimport * as Styles from './Tooltip.styles';\n\nconst Tooltip = ({\n children,\n text,\n width = 200,\n testId = 'tooltip',\n disabled = false,\n fixedDesktopPosition = null,\n fixedMobilePosition = null,\n translateXMobile = '0%',\n variant = 'white',\n}) => {\n const windowRect = useResize();\n const [active, setActive] = useState(false);\n const [toolTipPosition, setTooltipPosition] = useState('top');\n const toolTipRef = useRef();\n const nestedChildrenRef = useRef();\n\n const onSetPosition = useCallback(() => {\n let position = 'top';\n\n const {\n height: windowHeight,\n width: windowWidth,\n } = windowRect;\n const isMobile = windowRect.width < 600;\n\n const {\n left: elLeft,\n top: elTop,\n width: elWidth,\n } = nestedChildrenRef.current.getBoundingClientRect();\n\n const {\n width: tooltipWidth,\n height: tooltipHeight,\n } = toolTipRef.current.getBoundingClientRect();\n\n const defaultConditions = {\n left: elLeft > tooltipWidth && elTop < tooltipHeight,\n right: windowWidth - (elLeft + elWidth) > tooltipWidth,\n top: elTop > tooltipHeight && elLeft > tooltipWidth,\n bottom: elTop < tooltipHeight && elLeft < tooltipWidth && windowWidth - (elLeft + elWidth) < tooltipWidth,\n };\n const defaultPositionRules = {\n top: {\n valid: defaultConditions.top,\n position: 'top',\n },\n left: {\n valid: defaultConditions.left,\n position: 'left',\n },\n bottom: {\n valid: defaultConditions.bottom,\n position: 'bottom',\n },\n right: {\n valid: defaultConditions.right,\n position: 'right',\n },\n };\n\n const fixedConditions = {\n top: elTop > tooltipHeight && elLeft > tooltipWidth,\n bottom: windowHeight - (elTop - tooltipHeight) > 0,\n right: windowWidth - (elLeft + elWidth) > tooltipWidth,\n left: windowWidth - (elLeft - elWidth) > tooltipWidth,\n };\n const fixedPositionRules = {\n top: {\n valid: fixedConditions.top,\n position: 'top',\n },\n left: {\n valid: fixedConditions.left,\n position: 'left',\n },\n bottom: {\n valid: fixedConditions.bottom,\n position: 'bottom',\n },\n right: {\n valid: fixedConditions.right,\n position: 'right',\n },\n bottomLeft: {\n valid: fixedConditions.bottom,\n position: 'bottomLeft',\n },\n bottomCenter: {\n valid: fixedConditions.bottom,\n position: 'bottomCenter',\n },\n };\n\n const firstValidPosition = Object.keys(defaultPositionRules).find(item => defaultPositionRules[item].valid);\n if (firstValidPosition) {\n position = firstValidPosition;\n }\n\n const hasFixedPosition = fixedDesktopPosition || fixedMobilePosition;\n if (hasFixedPosition && fixedPositionRules[isMobile ? fixedMobilePosition : fixedDesktopPosition].valid) {\n const { position: newPosition } = fixedPositionRules[isMobile ? fixedMobilePosition : fixedDesktopPosition];\n position = newPosition;\n }\n\n setTooltipPosition(position);\n }, [windowRect, fixedDesktopPosition, fixedMobilePosition]);\n\n const onMouseEnter = useCallback((event) => {\n if (disabled) {\n return;\n }\n\n if (!event.target.closest('.tooltip')) {\n return;\n }\n\n onSetPosition();\n !active && setActive(true);\n }, [active, disabled, onSetPosition]);\n\n const onMouseOut = useCallback(() => {\n if (disabled) {\n return;\n }\n\n active && setActive(false);\n }, [active, disabled]);\n\n useLayoutEffect(() => {\n const nestedChildrenEl = nestedChildrenRef.current;\n\n nestedChildrenEl.addEventListener('mouseenter', onMouseEnter);\n nestedChildrenEl.addEventListener('mouseleave', onMouseOut);\n\n return () => {\n nestedChildrenEl.removeEventListener('mouseenter', onMouseEnter);\n nestedChildrenEl.removeEventListener('mouseleave', onMouseOut);\n };\n }, [onMouseEnter, onMouseOut]);\n\n return (\n \n \n {children}\n \n \n \n {\n Array.isArray(text)\n ? \n\n {variant !== 'dark' && \n );\n};\n\nexport default Tooltip;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import styled, { css } from 'styled-components';\n\nexport const ButtonWrapper = styled.div`\n ${() => css`\n display: flex;\n position:relative;\n white-space: nowrap;\n\n button {\n align-items: center;\n }\n `}\n`;\n\nexport const Button = styled.button`\n ${({\n theme,\n variant,\n }) => {\n const variants = {\n disabled: {\n backgroundColor: theme.palette.grey.primary,\n borderColor: theme.palette.grey.primary,\n color: theme.palette.grey.ultralight,\n font: theme.font.family.primary,\n fontSize: theme.font.sizes.sm,\n fontWeight: 400,\n hoverBackgroundColor: theme.palette.grey.primary,\n hoverBorderColor: theme.palette.grey.primary,\n hoverColor: theme.palette.grey.ultralight,\n justifyAlign: 'flex-start',\n },\n text: {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n color: theme.palette.primary.main,\n font: theme.font.family.primary,\n fontSize: theme.font.sizes.sm,\n fontWeight: 400,\n hoverBackgroundColor: 'transparent',\n hoverBorderColor: 'transparent',\n hoverColor: theme.palette.primary.dark,\n justifyAlign: 'center',\n lineHeight: '21px',\n },\n textHover: {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n color: theme.palette.primary.main,\n font: theme.font.family.primary,\n fontSize: theme.font.sizes.xxs,\n fontWeight: 600,\n hoverBackgroundColor: theme.palette.primary.contrastText,\n hoverBorderColor: 'transparent',\n hoverColor: theme.palette.primary.dark,\n justifyAlign: 'flex-start',\n lineHeight: '19px',\n },\n secondary: {\n backgroundColor: theme.palette.white.light,\n borderColor: 'transparent',\n color: theme.palette.secondary.primary,\n font: theme.font.family.secondary,\n fontSize: theme.font.sizes.sm,\n fontWeight: 400,\n hoverBackgroundColor: theme.palette.secondary.primary,\n hoverBorderColor: 'transparent',\n hoverColor: theme.palette.white.light,\n justifyAlign: 'flex-start',\n },\n };\n\n return css`\n align-items: center;\n background-color: ${variants[variant].backgroundColor};\n border-radius: 2px;\n border: 1px solid ${variants[variant].borderColor};\n color: ${variants[variant].color};\n cursor: pointer;\n display: flex;\n font-family:${variants[variant].font};\n font-size: ${variants[variant].fontSize};\n font-weight: ${variants[variant].fontWeight};\n justify-content: ${variants[variant].justifyAlign};;\n letter-spacing: 0.01px;\n line-height:${variants[variant].lineHeight};\n padding: 8px 16px;\n transition: color 200ms ease-in-out, background-color 200ms ease-in-out, border-color 200ms ease-in-out;\n width: 100%;\n\n span{\n margin-right: 8px;\n }\n\n svg{\n transition: fill 200ms ease-in-out, transform 200ms ease-in-out;\n }\n\n &:hover {\n background-color: ${variants[variant].hoverBackgroundColor};\n border: 1px solid ${variants[variant].hoverBorderColor};\n color: ${variants[variant].hoverColor};\n\n svg {\n fill: ${variants[variant].hoverColor};\n }\n }\n\n &.disabled {\n background-color: ${variants.disabled.backgroundColor};\n border: 1px solid ${variants.disabled.borderColor};\n color: ${variants.disabled.color};\n\n &:hover {\n background-color: ${variants.disabled.hoverBackgroundColor};\n border: 1px solid ${variants.disabled.hoverBorderColor};\n color: ${variants.disabled.hoverColor};\n }\n }\n `;\n }}\n`;\n\nexport const Ellipsis = styled.span`\n ${({ fill }) => css`\n display: flex;\n svg {\n fill: ${fill};\n }\n `}\n`;\n\nexport const DropdowIconWrapper = styled.div`\n ${({ displayed }) => css`\n align-items: center;\n display: flex;\n justify-content: center;\n\n svg {\n margin-left: 3px;\n transform: rotate(${displayed ? '0deg' : '180deg'});\n transition: transform 200ms ease;\n }\n `}\n`;\n\nexport const ItemsList = styled.div`\n ${({\n theme, displayed, isEllipsisDropdown, variant,\n }) => {\n const variants = {\n default: {\n padding: '8px 0px',\n },\n secondary: {\n padding: '0',\n },\n };\n\n return css`\n background-color: ${theme.palette.white.light};\n box-shadow: 3px 4px 12px ${theme.shadows.grey.light};\n display: flex;\n flex-direction: column;\n font-family:${variants[variant].font};\n opacity: ${displayed ? '1' : '0'};\n padding: ${variants[variant].padding};\n position: absolute;\n right: ${isEllipsisDropdown ? '-16px' : 'unset'};\n top: ${isEllipsisDropdown ? '30px' : '48px'};\n transition: opacity 200ms ease-in-out;\n visibility: ${displayed ? 'visible' : 'hidden'};\n width: ${isEllipsisDropdown ? 'auto' : '100%'};\n z-index: ${displayed ? '100' : '-1'};\n `;\n }}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.palette.white.light};\n display: flex;\n flex-direction: column;\n flex: 1;\n max-width: 100%;\n padding: 23px 24px 23px 186px;\n position: relative;\n\n @media (max-width: ${theme.breakpoints.sm}){\n width: 100%;\n padding: 23px 24px;\n }\n `}\n`;\n\nexport const TrianglesWrapper = styled.div`\n left: 8px;\n position: absolute;\n top: 8px;\n`;\n\nexport const SnappyImage = styled.img`\n ${({ theme }) => css`\n bottom: 0px;\n height: 40px;\n left: 62px;\n position:absolute;\n width: 90px;\n\n @media (max-width: ${theme.breakpoints.sm}){\n left: 8px;\n }\n `}\n`;\n\nexport const Title = styled.h3`\n ${({ theme, maxWidth }) => css`\n color: ${theme.palette.blue.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: 20px;\n margin: 0;\n max-width: ${maxWidth};\n\n @media (max-width: ${theme.breakpoints.sm}){\n margin-left: auto;\n max-width: 250px;\n text-align:right;\n width: 100%;\n }\n `}\n`;\n\nexport const Subtitle = styled.h4`\n ${({ theme, maxWidth }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 20px;\n margin: 0;\n max-width: ${maxWidth};\n\n @media (max-width: ${theme.breakpoints.sm}){\n margin-left: auto;\n max-width: 250px;\n text-align:right;\n width: 100%;\n }\n `}\n`;\n","import React from 'react';\nimport * as Style from './smallTriangles.style';\n\nconst SmallTriangles = ({\n color = '#4480c5',\n size = '45',\n testId = 'smallTriangles',\n}) => (\n \n \n \n \n);\n\n\nexport default SmallTriangles;\n","import styled, { css } from 'styled-components';\n\n\nexport const WrapperSelectDashed = styled.div`\n ${({ theme, width, position }) => css`\n background-color: ${theme.color.white};\n border-bottom: 1.7px dashed ${theme.color.halfBaked};\n padding: 0 0 .5rem;\n position: ${position || '$relative'};\n width: ${width || '100%'};\n height: 26px;\n `}\n`;\n\nexport const LabelSelectDashed = styled.p`\n ${({\n theme, isOpen, isVoid, hasValue,\n }) => css`\n align-items: center;\n color: ${theme.palette.grey.light};\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n margin: 0;\n\n .text {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n svg {\n transition: transform 150ms ease;\n ${isOpen && css`transform: rotate(180deg);`}\n }\n\n ${hasValue && css`\n color: ${theme.color.indigo};\n font-weight: 600;\n `}\n\n ${isVoid && css`\n color: ${theme.color.halfBaked};\n pointer-events: none;\n cursor: not-allowed;\n `}\n `}\n`;\n\nexport const SelectListBox = styled.div`\n ${({ theme, isOpen }) => css`\n background-color: ${theme.color.white};\n bottom: -5px;\n box-shadow: 0px 2px 5px #0000001a;\n position: relative;\n z-index: 1;\n\n max-height: 240px;\n overflow-y: auto;\n overflow-x: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n -webkit-animation: fadeInSelect 1s;\n animation: fadeInSelect 1s;\n\n ${!isOpen && 'display: none;'}\n\n @-webkit-keyframes fadeInSelect {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n @keyframes fadeInSelect {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n `}\n`;\n\nexport const WrapperSelectOptions = styled.div`\n display: flex;\n flex-direction: column;\n position: relative;\n z-index: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n`;\n\nexport const SelectOptions = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.color.white};\n cursor: pointer;\n display: flex;\n height: 40px;\n padding: 6px 10px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n\n &:hover {\n background-color: ${theme.color.halfBaked};\n color: ${theme.color.white};\n }\n `}\n`;\n","import React, {\n useState, useRef, useEffect, useMemo,\n} from 'react';\n\nimport { IconArrowDownOutlined } from '@/icons';\n\nimport * as Styles from './SelectBottomDashed.style';\n\nconst SelectBottomDashed = ({\n options, onChange, label, value, width, position,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n\n const domainSelectRef = useRef();\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (!domainSelectRef.current.contains(event.target)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [domainSelectRef]);\n\n const currentLabel = useMemo(() => {\n const foundedValue = options.find(option => option.value === value);\n\n if (foundedValue) {\n return foundedValue.label;\n }\n\n return label;\n }, [value, label, options]);\n\n const optionsToShow = useMemo(() => options.map(option => (\n {\n event.preventDefault();\n event.stopPropagation();\n\n setIsOpen(false);\n onChange(option);\n }}\n >\n {option.label}\n \n )), [options, setIsOpen, onChange, value]);\n\n return (\n \n setIsOpen(previousIsOpen => !previousIsOpen)}\n >\n \n {currentLabel}\n \n \n \n {isOpen && optionsToShow}\n \n \n \n );\n};\n\n\nexport default SelectBottomDashed;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconSearch.style';\n\nconst IconSearch = ({ color = '#707070', testId = 'icon-search' }) => (\n \n \n \n \n);\n\n\nexport default IconSearch;\n","import styled, { css } from 'styled-components';\n\nexport const FilterWrapper = styled.div`\n ${({ displayed, mobileBreakPoint }) => css`\n transition: max-height 200ms ease-in-out;\n width: 100%;\n\n @media (max-width: ${mobileBreakPoint}) {\n max-height:${displayed ? '700px' : '35px'};\n overflow:${displayed ? 'visible' : 'hidden'};\n }\n `}\n`;\n\nexport const Row = styled.div`\n ${({ mobileBreakPoint, variant }) => {\n const variants = {\n default: {\n justifyContent: 'center',\n padding: '11px 17px 11px 24px',\n },\n secondary: {\n justifyContent: 'flex-start',\n padding: '8px 0px',\n },\n };\n\n return css`\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n flex: 1;\n\n @media (max-width: ${mobileBreakPoint}){\n align-items: flex-start;\n flex-direction: column;\n\n & >:last-child {\n margin-top: 8px;\n width: 100%;\n\n > button {\n justify-content: ${variants[variant].justifyContent};\n padding: ${variants[variant].padding} ;\n }\n }\n }\n `;\n }}\n`;\n\nexport const FilterLabel = styled.article`\n ${({\n theme, fontFamily, variant, mobileBreakPoint,\n }) => {\n const variants = {\n default: {\n margin: '6px 10px 6px 0px',\n },\n secondary: {\n margin: '6px 16px 6px 0px',\n },\n };\n return css`\n align-items:center;\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family[fontFamily]};\n font-size: 14px;\n letter-spacing: 0.01px;\n line-height: 19px;\n margin: ${variants[variant].margin};\n\n @media (max-width: ${mobileBreakPoint}){\n display: flex;\n flex: 1;\n justify-content: space-between;\n margin: 12px 0px 6px 0px;\n width: 100%;\n }\n `;\n }}\n`;\n\nexport const DropdownButton = styled.button`\n ${({ displayed, mobileBreakPoint }) => css`\n background-color:transparent;\n border: unset;\n margin-left:auto;\n transform: rotate(${displayed ? '0deg' : '180deg'});\n transition: transform 200ms ease-in-out;\n\n @media (min-width: ${mobileBreakPoint}){\n display:none;\n visibility: hidden\n }\n `}\n`;\n\nexport const OptionsWrapper = styled.ul`\n ${({ mobileBreakPoint }) => css`\n display: inline-flex;\n flex-wrap: wrap;\n flex: 1;\n margin: unset;\n padding: unset;\n\n @media (max-width:${mobileBreakPoint}){\n flex: unset;\n width: 100%;\n }\n `}\n`;\n\nexport const OptionItem = styled.li`\n ${({ theme, variant }) => {\n const variants = {\n default: {\n checked: {\n backgroundColor: theme.palette.primary.main,\n color: theme.palette.white.light,\n },\n hover: {\n backgroundColor: theme.palette.primary.main,\n color: theme.palette.white.light,\n },\n margin: '6px 12px 6px 0px',\n },\n secondary: {\n checked: {\n backgroundColor: theme.palette.blue.dark,\n color: theme.palette.white.light,\n },\n hover: {\n backgroundColor: theme.color.vividBlue,\n color: theme.palette.white.light,\n },\n margin: '6px 8px 6px 0px',\n },\n };\n\n return css`\n min-height: 22px;\n display: flex;\n list-style: none;\n margin: ${variants[variant].margin};\n\n &:hover label{\n background-color: ${variants[variant].hover.backgroundColor};\n color: ${variants[variant].hover.color};\n }\n\n input:checked ~ label{\n background-color: ${variants[variant].checked.backgroundColor};\n color: ${variants[variant].checked.color};\n }\n `;\n }}\n`;\n\nexport const OptionLabel = styled.label`\n ${({ theme, fontFamily, variant }) => {\n const variants = {\n default: {\n color: theme.palette.grey.dark,\n checked: {\n color: theme.palette.white.light,\n },\n },\n secondary: {\n color: theme.color.vividBlue,\n checked: {\n color: theme.palette.white.light,\n },\n },\n };\n\n return css`\n border-radius: 15px;\n color: ${variants[variant].color};\n cursor: pointer;\n font-family: ${theme.font.family[fontFamily]};\n font-size: ${theme.font.sizes.xxs};\n letter-spacing: 0.01px;\n line-height: 16px;\n padding: 3px 12px;\n transition: background-color 200ms ease-in-out, color 200ms ease-in-out;\n `;\n }}\n`;\n\nexport const OptionInput = styled.input`\n ${() => css`\n display:none;\n `}\n`;\n\nexport const MultiSelectWrapper = styled.div`\n ${({ theme }) => css`\n position:relative;\n width: 220px;\n margin-right: 20px;\n @media (max-width: ${theme.breakpoints.md}){\n margin-top: 10px;\n margin-right: 0px;\n width: 100%;\n }\n `}\n`;\n\nexport const InputWrapper = styled.div`\n${({\n theme, iconSide, variant, mobileBreakPoint,\n }) => {\n const sides = {\n left: {\n position: 'absolute',\n top: '4px',\n right: 'auto',\n bottom: 'auto',\n left: '8px',\n },\n right: {\n position: 'absolute',\n top: '2px',\n right: '14px',\n bottom: 'auto',\n left: 'auto',\n },\n };\n return css`\n position:relative;\n svg {\n position: ${sides[iconSide].position};\n top: ${sides[iconSide].top};\n right: ${sides[iconSide].right};\n bottom: ${sides[iconSide].bottom};\n left: ${sides[iconSide].left};\n fill: ${variant === 'secondary' ? theme.palette.secondary.primary : theme.palette.grey.darklight};\n }\n @media (max-width: ${mobileBreakPoint}){\n margin-top: 10px;\n width: 100%;\n }\n `;\n }}`;\n\nexport const InputField = styled.input`\n${({\n theme, variant, fontFamily, mobileBreakPoint,\n }) => {\n const variants = {\n default: {\n borderRadius: '2px',\n borderWidth: '1px',\n borderColor: `${theme.palette.grey.light}`,\n borderStyle: 'solid',\n color: `${theme.palette.grey.dark}`,\n fontSize: `${theme.font.sizes.sm}`,\n fontWeight: `${theme.font.weights.regular}`,\n maxWidth: '100%',\n padding: '7px 17px 6px 41px',\n width: '250px',\n focusOutline: 'none',\n },\n secondary: {\n borderRadius: '2px',\n borderWidth: '0px 0px 1px 0px',\n borderColor: `${theme.palette.grey.main}`,\n borderStyle: 'solid',\n color: `${theme.palette.grey.dark}`,\n fontSize: `${theme.font.sizes.sm}`,\n fontWeight: `${theme.font.weights.regular}`,\n maxWidth: '100%',\n padding: '7px 42px 6px 16px',\n width: '300px',\n focusOutline: 'none',\n },\n };\n return css`\n border-color: ${variants[variant].borderColor};\n border-radius: ${variants[variant].borderRadius};\n border-style: ${variants[variant].borderStyle};\n border-width: ${variants[variant].borderWidth};\n color: ${variants[variant].color};\n font-family: ${theme.font.family[fontFamily]};\n font-size: ${variants[variant].fontSize};\n font-weight: ${variants[variant].fontWeight};\n max-width: ${variants[variant].maxWidth};\n padding: ${variants[variant].padding};\n width: ${variants[variant].width};\n &:focus {\n border-color: ${theme.palette.primary.main};\n outline: ${variants[variant].focusOutline}\n }\n &::placeholder{\n font-size: ${theme.font.sizes.sm};\n color: ${theme.palette.grey.main}\n }\n @media (max-width: ${theme.breakpoints.lg}){\n width: 250px;\n }\n @media (max-width: ${mobileBreakPoint}){\n width: 100%;\n }\n `;\n }}`;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ disabled }) => css`\n display: flex;\n flex: 1;\n flex-direction: column;\n pointer-events: ${disabled ? 'none' : 'initial'};\n position: relative;\n `}\n`;\n\nexport const FixedLabel = styled.label`\n ${({ theme }) => css`\n background-color: ${theme.palette.white.light};\n color: ${theme.palette.dark};\n font-size: ${theme.font.sizes.sm};\n left: 0px;\n padding: 0px 5px;\n pointer-events: none;\n position: absolute;\n top: 0px;\n transform: translate(6px, -9px) scale(0.8);\n z-index: 1;\n\n &.selected {\n color: ${theme.palette.secondary.primary};\n }\n\n &.error {\n color: ${theme.palette.error.primary};\n }\n\n &.disabled {\n background: linear-gradient(0deg, transparent 40%, ${theme.palette.white.light} 40%);\n }\n `}\n`;\n\nexport const Label = styled.p`\n ${({ theme, size }) => css`\n color: ${theme.palette.grey.light};\n font-size: ${theme.font.sizes.sm};\n margin: ${size === 'small' ? '0' : ''}\n\n `\n}\n`;\n\nexport const Checkbox = styled.input.attrs({ type: 'checkbox', name: 'multi-checkbox' })`\n ${({ theme }) => css`\n color: ${theme.palette.primary.darkest};\n cursor: pointer;\n font-size: ${theme.font.sizes.sm};\n width: ${theme.font.sizes.lg};\n min-width: 32px;\n height: ${theme.font.sizes.lg};\n `}\n`;\n\nexport const Field = styled.div`\n ${({ disabled, theme }) => css`\n align-items: center;\n background-color: ${disabled ? theme.palette.white.dark : theme.palette.white.light};\n border: 1px solid ${theme.palette.grey.primary};\n cursor: pointer;\n display: flex;\n flex: 1;\n max-height: 35px;\n padding: 8px 42px 8px 9px;\n position: relative;\n\n &.error {\n border-color: ${theme.palette.error.primary};\n\n ${Label} {\n color: ${theme.palette.error.primary};\n }\n\n svg {\n fill: ${theme.palette.error.primary};\n stroke: ${theme.palette.error.primary};\n }\n }\n `}\n`;\n\nexport const Header = styled.button`\n align-items: center;\n background-color: transparent;\n border: 0;\n cursor: pointer;\n display: flex;\n flex: 1;\n margin: 0;\n padding: 0;\n`;\n\nexport const IconAdapter = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n position: absolute;\n right: 18px;\n`;\n\nexport const Options = styled.ul`\n ${({ theme, show }) => css`\n margin: 0;\n padding: 0;\n background-color: ${theme.palette.white.light};\n border-bottom: 1px solid ${theme.palette.grey.variant};\n border-left: 1px solid ${theme.palette.grey.variant};\n border-right: 1px solid ${theme.palette.grey.variant};\n left: -1px;\n list-style: none;\n position: absolute;\n right: -1px;\n top: calc(100% - 1px);\n transition: opacity 200ms ease-in-out;\n z-index: ${theme.layers.awaysOnTop};\n opacity: ${show ? 1 : 0};\n display: ${show ? '' : 'none'};\n\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background: ${theme.palette.white.light};\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${theme.palette.grey.primary};\n border-left: 2px solid ${theme.palette.white.light};\n border-radius: 3px;\n border-right: 2px solid ${theme.palette.white.light};\n height: 30px;\n width: 100%;\n }\n `}\n`;\n\nexport const Option = styled.li`\n ${({ theme }) => css`\n align-items: center;\n cursor: pointer;\n display: flex;\n padding: 0;\n gap: 0px;\n\n &:hover {\n background-color: ${theme.palette.grey.ultralight};\n }\n `}\n`;\n\nexport const OptionLabel = styled.label`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n cursor: pointer;\n font-size: ${theme.font.sizes.md};\n line-height: ${theme.font.sizes.lg};\n margin: 0;\n padding: 12px 0px;\n white-space: nowrap;\n `}\n`;\n\nexport const Error = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.error.primary};\n font-size: ${theme.font.sizes.xxs};\n margin: 8px 0px 0px 0px;\n `}\n`;\n","import React, {\n useState, useCallback, useEffect, useRef,\n} from 'react';\nimport { IconArrowDown } from '@/icons';\nimport * as Styles from './MultiSelect.styles';\n\nconst MultiSelect = ({\n defaultOptionLabel = 'Assuntos',\n disabled = false,\n error = '',\n label = '',\n options = [],\n testId = 'select',\n size = 'medium',\n setMultiSelected = () => {},\n}) => {\n const wrapperRef = useRef(null);\n const [isOpen, setIsOpen] = useState(false);\n const [isEmpty, setIsEmpty] = useState(false);\n\n const [selectOptions, setSelectOptions] = useState(options);\n\n const onMultiSelectClick = useCallback(() => {\n setIsOpen(!isOpen);\n }, [isOpen]);\n\n const onOptionClick = (e, option) => {\n e.preventDefault();\n const newMappedSelection = selectOptions.map(e => ({ ...e, checked: (e.id !== option.id) ? e.checked : !e.checked }));\n setSelectOptions(newMappedSelection);\n const newSelected = newMappedSelection.filter(e => e.checked);\n setMultiSelected(newSelected);\n };\n\n const onMouseDown = useCallback(\n (event) => {\n (\n isOpen\n && wrapperRef.current\n && !wrapperRef.current.contains(event.target)\n ) && setIsOpen(false);\n },\n [isOpen],\n );\n\n const optionsMap = selectOptions.map((option, index) => (\n onOptionClick(e, option)}\n >\n {option.id !== 'default' && (\n {}}\n />\n )}\n {option.label} \n \n ));\n\n useEffect(() => {\n window.addEventListener('mousedown', onMouseDown);\n return () => {\n window.removeEventListener('mousedown', onMouseDown);\n };\n }, [onMouseDown]);\n\n useEffect(() => {\n setIsEmpty(selectOptions.length === 1);\n }, [selectOptions.length, isEmpty, selectOptions, label]);\n\n return (\n \n {label && (\n \n {label}\n \n )}\n \n \n {defaultOptionLabel} \n \n \n \n\n \n {optionsMap}\n \n \n\n {error && {error} }\n \n );\n};\n\nexport default MultiSelect;\n","import React, { useContext, useState } from 'react';\nimport { ThemeContext } from 'styled-components';\nimport { IconSearch } from '@/icons/iconSearch';\nimport { IconDropdownArrow } from '@/icons/IconDropdownArrow';\nimport * as Styles from './Filter.styles';\nimport { Button } from '../Button';\nimport { MultiSelect } from '../inputs/MultiSelect';\n\nconst Filter = ({\n filterLabel = 'Filter by',\n filteredOptions = [\n {\n id: 0, label: 'Todas', value: 'all', checked: true,\n },\n {\n id: 1, label: 'Ativas', value: 'active', checked: false,\n },\n {\n id: 2, label: 'Vencidas', value: 'to_due', checked: false,\n },\n ],\n multiSelectLabel = 'Subjects',\n multiSelectOptions = [],\n setMultiSelectOptions,\n multiSelectVisible = false,\n termFilterVisible = true,\n setFilteredOptions,\n allowMultipleOptions = true,\n clearFilterVariant = 'text',\n filterTyped,\n setFilterTyped,\n clearFilter,\n clearButtonSize,\n inputIconSide = 'left',\n testId = 'filter',\n clearLabel = 'Clear label',\n inputMaxLength,\n variant = 'default',\n searchPlaceholder = 'Search placeholder',\n onFilterClick,\n applySpecificRuleOnMark = null,\n fontFamily = 'primary',\n mobileBreakPoint = '960px',\n}) => {\n const [display, toggleDisplay] = useState(false);\n const theme = useContext(ThemeContext);\n const shouldRenderMultiSelect = multiSelectVisible;\n const handleMark = (index) => {\n let newOptions = [...filteredOptions];\n\n if (!newOptions[index].checked && newOptions[0].checked) {\n newOptions[0].checked = false;\n }\n\n if (!allowMultipleOptions) {\n newOptions = newOptions.map((option, idx) => {\n if (index !== idx) {\n const newOption = { ...option };\n newOption.checked = false;\n return newOption;\n }\n return option;\n });\n newOptions[index].checked = !newOptions[index].checked;\n }\n\n if (allowMultipleOptions) {\n if (index === 0 && !newOptions[0].checked) {\n newOptions = newOptions.map((option) => {\n const newOption = { ...option };\n newOption.checked = false;\n return newOption;\n });\n }\n\n newOptions[index].checked = !newOptions[index].checked;\n }\n\n const checkedItems = newOptions.filter(item => (item.checked)).length;\n if (!checkedItems) {\n newOptions[0].checked = true;\n }\n\n onFilterClick && onFilterClick(newOptions);\n\n if (applySpecificRuleOnMark) {\n newOptions = applySpecificRuleOnMark({ options: newOptions, index });\n }\n\n setFilteredOptions(newOptions);\n };\n\n const handleChange = (event) => {\n const { value } = event.target;\n\n setFilterTyped && setFilterTyped(value);\n };\n\n return (\n \n \n {termFilterVisible && (\n <>\n \n {filterLabel}\n toggleDisplay(!display)} mobileBreakPoint={mobileBreakPoint}>\n \n \n \n {filteredOptions.map((option, index) => (\n \n handleMark(index)} data-testid={`${testId}-checkbox-${option.value}`} />\n \n {option.label}\n \n \n ))}\n \n \n )}\n\n {shouldRenderMultiSelect && (\n \n \n )}\n\n \n handleChange(event)}\n data-testid={`${testId}-input`}\n maxLength={inputMaxLength}\n variant={variant}\n fontFamily={fontFamily}\n mobileBreakPoint={mobileBreakPoint}\n />\n \n \n \n );\n};\n\nexport default Filter;\n","import styled, { css } from 'styled-components';\n\nexport const Bold = styled.strong`\n ${({ theme }) => css`\n font-weight: ${theme.font.weights.bold};\n `}\n`;\n\nexport const Regular = styled.span`\n ${({ theme }) => css`\n font-weight: ${theme.font.weights.regular};\n `}\n`;\n","import React from 'react';\nimport { Link } from '@/pages/common';\nimport * as Styles from './TextDescriptor.styles';\n\nexport const textBold = (value, options = { tag: '', tagStyles: null }) => ({\n ...options,\n style: 'bold',\n type: 'text',\n value,\n});\n\nexport const textRegular = (value, options = { tag: '', tagStyles: null }) => ({\n ...options,\n style: 'regular',\n type: 'text',\n value,\n});\n\nexport const textLink = (value, url, options = { tag: '', tagStyles: null }) => ({\n ...options,\n type: 'link',\n url,\n value,\n});\n\nconst TextDescriptor = ({\n descriptors = [\n {\n type: 'text',\n style: 'bold',\n value: 'Important: ',\n },\n {\n type: 'text',\n style: 'regular',\n value: 'Access the ',\n },\n {\n type: 'link',\n url: 'https://www.hostgator.com',\n value: 'link',\n },\n ],\n testId = 'text-descriptor',\n}) => {\n const parseMethods = {\n text({\n style, value, testId, tag, tagStyle,\n }) {\n const textHandled = (style === 'bold') ? (\n \n {value}\n \n ) : (\n \n {value}\n \n );\n\n return React.createElement(\n tag || 'span',\n {\n key: testId,\n ...(tagStyle ? { style: tagStyle } : {}),\n },\n textHandled,\n );\n },\n link({ url, value, testId }) {\n return \n {descriptors.map((descriptor, index) => {\n const { type } = descriptor;\n return parseMethods[type]({ ...descriptor, testId: `${testId}-${type}-${index}` });\n })}\n \n );\n};\n\nexport default TextDescriptor;\n","const parseCancellingRenewal = (\n serviceId,\n serviceType,\n {\n reason,\n optionId,\n },\n) => ({\n serviceId,\n serviceType,\n reason,\n optionId,\n});\n\nconst receiveCancelRenewal = (data, subscription) => {\n const {\n success,\n } = data;\n\n const { type, dueDate, cancelDate } = subscription;\n\n return {\n modal: {\n show: success,\n ...(!!subscription && {\n date: type === 'domain' ? cancelDate : dueDate,\n subscription,\n }),\n },\n };\n};\n\nconst receiveSubscriptions = (rawData) => {\n const substatusAdapter = {\n pending_analysis: 'pendingAnalysis',\n pending_payment: 'pendingPayment',\n to_due: 'toDue',\n transferred_away: 'transferredAway',\n };\n\n const { data: subscriptions } = rawData;\n\n const handleAddons = addons => addons.map(addon => addon.productname);\n\n return subscriptions.map((subscription) => {\n const { substatus, discount, order_under_review: orderUnderReview } = subscription;\n\n return ({\n ...(subscription.addons && {\n addons: handleAddons(subscription.addons),\n }),\n ...(subscription.payment_installments && {\n installments: {\n quantity: subscription.payment_installments.installments,\n value: subscription.payment_installments.installmentValue,\n fees: subscription.payment_installments.fees,\n amount: subscription.payment_installments.totalValue,\n },\n }),\n ...(subscription.refund && {\n refundFeedback: { ...subscription.refund },\n }),\n addonId: subscription.addonid,\n allowCancelRenewal: subscription.allow_cancel_renewal,\n amount: subscription.amount,\n cancelDate: subscription.date_cancel,\n cancelType: subscription.type_cancel,\n category: subscription.category,\n domain: subscription.domain,\n dueDate: subscription.due_date,\n id: subscription.id,\n invoiceId: subscription.invoiceid,\n isSharedHostingAbleToRetention: subscription.isSharedHostingAbleToRetention,\n isExceedsRetriesCC: subscription.exceeds_retries_cc,\n paymentCycle: subscription.payment_cycle,\n paymentMethod: subscription.payment_method,\n paymentType: subscription.paymentType,\n paymentMethodLabel: subscription.payment_method_label,\n productName: subscription.productname,\n registerDate: subscription.reg_date,\n status: subscription.status,\n showFilesExclusionText: subscription.show_files_exclusion_text,\n substatus: substatus in substatusAdapter ? substatusAdapter[substatus] : substatus,\n suspendedDate: subscription.date_suspended,\n groupId: subscription.group_id,\n taxrate: subscription.taxrate,\n type: subscription.type,\n automaticBilling: {\n activated: subscription.has_automatic_payment,\n hasValidCreditCard: subscription.valid_credit_card,\n hasValidPaypalAgreement: subscription.valid_agreement_paypal,\n },\n ...(subscription.unpaid_invoice && {\n unpaidInvoice: {\n ccPaymentAttemptFailure: subscription.unpaid_invoice.cc_payment_attempt_failure,\n id: subscription.unpaid_invoice.id,\n totalInvoice: subscription.unpaid_invoice.totalInvoice,\n },\n }),\n trustReactivationAvailable: subscription.trust_reactivation_available,\n trustReactivationOnTheCycle: subscription.trust_reactivation_on_the_cycle,\n overrideSuspension: subscription.override_suspension,\n overrideDate: subscription.override_date,\n modal: subscription.modal,\n discount,\n orderUnderReview,\n });\n });\n};\n\nconst receiveSubscriptionsQuestion = (rawData) => {\n const question = [...rawData.data][0];\n\n question.options = question.options.map(option => ({\n ...option,\n selected: true,\n }));\n\n return question;\n};\n\nconst receiveRefund = (rawData) => {\n const { data } = rawData;\n\n return {\n total: data.value,\n methods: data.refund_methods,\n showHint: data.show_hint,\n };\n};\n\nconst receiveAbleToDiscount = (rawData) => {\n const {\n billingCycle, isCloseToCancelledTime, isFullRefund, isSharedHostingAbleToDiscount,\n } = rawData.data;\n\n return {\n billingCycle,\n isCloseToCancelledTime,\n isFullRefund,\n isSharedHostingAbleToDiscount,\n };\n};\n\nconst receiveDiscountValues = (rawData) => {\n const {\n original, recurrent, discount, final, installments,\n } = rawData.data;\n\n return {\n original,\n recurrent,\n discount,\n final,\n installments,\n };\n};\n\nconst receiveHostBenefitBilling = (rawData) => {\n const { isGenerateInvoice, invoiceId, draft } = rawData.data;\n return {\n isGenerateInvoice,\n invoiceId,\n draft,\n };\n};\n\nconst receiveRetentioData = (rawData) => {\n const { data } = rawData;\n return {\n reactivation: data,\n };\n};\n\nconst receivePaymentMethods = (rawData) => {\n const { data } = rawData;\n\n const paypalFiltered = Object.entries(data).find(([key]) => key === 'paypal');\n const paypalOptionsList = paypalFiltered && paypalFiltered[1];\n\n const ccOptionsList = [];\n\n Object.keys(data).forEach((key) => {\n if (key.includes('braspag_credit')) {\n ccOptionsList.push({\n ...data[key][0],\n key,\n });\n }\n });\n\n const filteredPaymentMethods = Object.keys(data)\n .filter(key => !key.includes('braspag_credit') && key !== 'paypal')\n .reduce((acc, key) => {\n acc[key] = data[key];\n return acc;\n }, {});\n\n if (paypalOptionsList && paypalOptionsList.length) {\n filteredPaymentMethods.gp_paypal = paypalOptionsList;\n }\n\n if (ccOptionsList.length) {\n filteredPaymentMethods.braspag_credit = ccOptionsList;\n }\n\n return {\n ...filteredPaymentMethods,\n };\n};\n\nconst assembly = {\n parseCancellingRenewal,\n receiveCancelRenewal,\n receiveRefund,\n receiveSubscriptions,\n receiveSubscriptionsQuestion,\n receiveAbleToDiscount,\n receiveDiscountValues,\n receiveHostBenefitBilling,\n receiveRetentioData,\n receivePaymentMethods,\n};\n\nexport default assembly;\n","\nimport PropTypes from 'prop-types';\n\nexport const ManageSubscriptionProps = {\n items: PropTypes.array,\n loading: PropTypes.bool,\n redirectTo: PropTypes.func,\n subscriptionId: PropTypes.number,\n subscriptionType: PropTypes.string,\n};\n\nexport const Modais = {\n NONE: 'NONE',\n CANCEL_SUBSCRIPTION: 'CANCEL_SUBSCRIPTION',\n ACTIVE_RENEWAL_SUBSCRIPTION: 'ACTIVATE_RENEWAL_SUBSCRIPTION',\n ACTIVE_PAYMENT_IN_SUBSCRIPTION: 'ACTIVE_PAYMENT_IN_SUBSCRIPTION',\n ACTIVE_SWITCH_PAYMENT_METHOD_IN_SUBSCRIPTION: 'ACTIVE_SWITCH_PAYMENT_METHOD_IN_SUBSCRIPTION',\n ACTIVE_FINISH_SWITCH_PAYMENT_METHOD_IN_SUBSCRIPTION: 'ACTIVE_FINISH_SWITCH_PAYMENT_METHOD_IN_SUBSCRIPTION',\n ACTIVE_EXPIRED_TIME_PIX_MODAL: 'ACTIVE_EXPIRED_TIME_PIX_MODAL',\n ACTIVE_PAYMENT_SUCCESS_PIX_MODAL: 'ACTIVE_PAYMENT_SUCCESS_PIX_MODAL',\n ACTIVE_GENERATE_ERROR_PIX_MODAL: 'ACTIVE_GENERATE_ERROR_PIX_MODAL',\n ACTIVE_SUBSCRIPTION_REACTIVATION_MODAL: 'ACTIVE_SUBSCRIPTION_REACTIVATION_MODAL',\n ACTIVE_REDIRECT_TICKET_MODAL: 'ACTIVE_REDIRECT_TICKET_MODAL',\n ACTIVE_RENOVATION_SUBSCRIPTION_SUCCESS_MODAL: 'ACTIVE_RENOVATION_SUBSCRIPTION_SUCCESS_MODAL',\n ACTIVE_INVOICE_GENERATOR_MODAL: 'ACTIVE_INVOICE_GENERATOR_MODAL',\n ACTIVE_SPLIT_PAYMENT_MODAL: 'ACTIVE_SPLIT_PAYMENT_MODAL',\n CHANGE_PAYMENT_METHOD: 'CHANGE_PAYMENT_METHOD',\n};\n\nexport const EnumActionOpeningModal = {\n MODAL_DEFAULT: null,\n MODAL_INVOICE_GENERATION: 'invoice_generation',\n MODAL_REACTIVATION: 'reactivation',\n};\n\nexport const EnumFeedbackStatus = {\n COMPLETED: 'accomplished',\n DECLINED: 'pending',\n ERROR: 'pending',\n};\n","import React from 'react';\nimport {\n call, takeLatest, put, select, take,\n} from 'redux-saga/effects';\nimport { api } from '@/utils/api';\nimport { COUNTRY, config } from '@/config';\nimport { authActions } from '@/redux/modules/auth';\nimport { commonActions } from '@/redux/modules/common';\nimport { locale } from '@/utils/locale';\nimport { textRegular, textBold } from '@/pages/common/TextDescriptor';\nimport { TextDescriptor } from '@/pages/common/';\nimport { billingAnalytics } from '@/analytics';\nimport billingAssembly from './billing.assembly';\nimport billingActions from './billing.actions';\nimport { BillingActionTypes } from './billing.types';\nimport { INVOICE_PAYMENT_METHODS } from '@/config/api';\nimport { EnumActionOpeningModal, Modais } from '@/components/billing/subscriptions/ManageSubscriptionNewHandler/ManageSubscriptionNewHandler.types';\nimport logger from '@/utils/logger';\n\nconst HTTP_STATUS = {\n TOO_MANY_REQUESTS: 429,\n};\n\nconst { subscriptions: subscriptionAnalytics } = billingAnalytics;\n\nfunction* getOldInvoicePaymentMethods() {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: INVOICE_PAYMENT_METHODS,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.whmcs.get, request);\n const paymentMethodData = response.data;\n yield put(billingActions.oldPaymentMethod.set(paymentMethodData.data));\n yield put(billingActions.oldPaymentMethod.success());\n } catch (e) {\n yield put(billingActions.oldPaymentMethod.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* getInvoicePaymentMethods() {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const requestUrl = `/api/v3/dlocal/payment-methods/${COUNTRY}`;\n // const requestUrl = 'http://localhost:3100/dlocal/payment-methods';\n\n const request = {\n url: requestUrl,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(billingActions.paymentMethods.setLoading(true));\n\n try {\n const response = yield call(api.whmcs.get, request);\n const paymentMethods = billingAssembly.receivePaymentMethods(response.data);\n yield put(billingActions.paymentMethods.set(paymentMethods));\n yield put(billingActions.paymentMethods.success());\n } catch (e) {\n yield put(billingActions.paymentMethods.failure());\n }\n\n yield put(billingActions.paymentMethods.setLoading(false));\n}\n\nfunction* getSubscriptions(action) {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `api/v2/clientarea/${config.COUNTRY}/signatures`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(billingActions.subscriptions.setSubscriptionsLoadingStatus(true));\n\n try {\n const response = yield call(api.whmcs.get, request);\n const subscriptionsData = billingAssembly.receiveSubscriptions(response.data);\n yield put(billingActions.subscriptions.set(subscriptionsData));\n yield put(billingActions.subscriptions.success());\n\n if (action.payload && action.payload.preChatRedirect) {\n yield getOldInvoicePaymentMethods();\n action.payload.preChatRedirect();\n }\n } catch (e) {\n yield put(billingActions.subscriptions.failure());\n }\n\n yield put(billingActions.subscriptions.setSubscriptionsLoadingStatus(false));\n}\n\nfunction* getSubscriptionsQuestions(action) {\n const { type } = action.payload;\n const { token } = yield select(state => state.auth);\n\n const request = {\n url: `api/v2/clientarea/${config.COUNTRY}/signatures/questions?name=${type}`,\n headers: {\n Authorization: `Bearer ${token}`,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.whmcs.get, request);\n const questionData = billingAssembly.receiveSubscriptionsQuestion(response.data);\n\n yield put(billingActions.subscriptions.questions.set(questionData, type));\n\n yield put(billingActions.subscriptions.questions.success());\n } catch (e) {\n yield put(billingActions.subscriptions.questions.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* requestCancellingRenewal(action) {\n yield put(authActions.tokens.jwt.update());\n\n const { productId, productType, redirect } = action.payload;\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const { cancel, items } = yield select(state => state.billing.subscriptions);\n const data = billingAssembly.parseCancellingRenewal(productId, productType, cancel);\n\n if (cancel.reason !== '') {\n subscriptionAnalytics.cancelRenewalReasonFeedback();\n }\n\n const subscription = items.find(({ id, type }) => id === Number(productId) && type === productType);\n\n const request = {\n data,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n url: `api/v2/clientarea/${config.COUNTRY}/signatures/cancel_renewal`,\n };\n\n try {\n const response = yield call(api.whmcs.post, request);\n const responseData = billingAssembly.receiveCancelRenewal(response.data, subscription);\n\n yield put(billingActions.subscriptions.cancel.set(responseData));\n\n yield put(billingActions.subscriptions.cancelRenewal.success());\n } catch (e) {\n if (e.response.status === HTTP_STATUS.TOO_MANY_REQUESTS) {\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('subscriptions.notifications.cancelRenewal.retry.0')}`}\n {locale('subscriptions.notifications.cancelRenewal.retry.1')} \n {`${locale('subscriptions.notifications.cancelRenewal.retry.2')}`}\n
\n ),\n type: 'error',\n }));\n\n if (redirect) {\n redirect();\n }\n } else {\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('subscriptions.notifications.cancelRenewalPartOne')} `}\n {subscription.productname} \n {` ${locale('subscriptions.notifications.cancelRenewalPartTwo')}`}\n
\n ),\n type: 'error',\n }));\n yield put(billingActions.subscriptions.cancelRenewal.failure());\n }\n }\n\n yield put(billingActions.subscriptions.cancel.set({\n questionId: null,\n optionId: null,\n questionValue: '',\n reason: '',\n }));\n}\n\nfunction* requestCancellingSignature(action) {\n yield put(authActions.tokens.jwt.update());\n\n const {\n productId, productType, history, openPreChatCancelFlow,\n } = action.payload;\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const { cancel, items } = yield select(state => state.billing.subscriptions);\n\n const subscription = items.find(item => (Number(productId) === item.id && productType === item.type));\n\n const withRefund = subscription && subscription.refund && !!subscription.refund.methodSelected;\n\n const data = {\n serviceId: productId,\n serviceType: productType,\n optionId: cancel.optionId,\n reason: cancel.reason,\n ...(withRefund && {\n refund: {\n withRefund,\n refundMethod: subscription.refund.methodSelected,\n },\n }),\n };\n\n const request = {\n data,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n url: `api/v2/clientarea/${config.COUNTRY}/signatures/cancel`,\n };\n\n try {\n const response = yield call(api.whmcs.post, request);\n if (response.status === 200) {\n yield put(billingActions.subscriptions.cancelSignature.success());\n history.push(`${locale('routes.subscriptions')}`);\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('subscriptions.notifications.activateRenewal.success.0')} `}\n {subscription.productname} \n {`${locale('subscriptions.notifications.activateRenewal.success.1')} `}\n
\n ),\n type: 'success',\n }));\n }\n } catch (e) {\n if (setModalById != null) {\n setModalById(Modais.ACTIVE_RENOVATION_SUBSCRIPTION_SUCCESS_MODAL);\n }\n\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('subscriptions.notifications.activateRenewal.failure.0')} `}\n {subscription.productname} \n {`${locale('subscriptions.notifications.activateRenewal.failure.1')} `}\n
\n ),\n type: 'error',\n }));\n }\n}\n\nfunction* requestRefundCheck(action) {\n const { subscriptionId, subscriptionType } = action.payload;\n\n const { token } = yield select(state => state.auth);\n\n const request = {\n headers: {\n Authorization: `Bearer ${token}`,\n },\n url: `api/v2/clientarea/${config.COUNTRY}/signatures/refund?serviceId=${subscriptionId}&serviceType=${subscriptionType}`,\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.whmcs.get, request);\n const refundData = billingAssembly.receiveRefund(response.data);\n yield put(billingActions.subscription.refund.check.set(refundData, subscriptionId, subscriptionType));\n yield put(billingActions.subscription.refund.check.success());\n } catch (e) {\n yield put(billingActions.subscription.refund.check.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* requestSwitchPaymentMethod(action) {\n yield put(authActions.tokens.jwt.update());\n const {\n subscription, paymentMethod, onSuccess, usePaymentModalV2, method, toast,\n } = action.payload;\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n data: {\n newPaymentMethod: paymentMethod,\n bank: method,\n },\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n url: `api/v2/clientarea/${config.COUNTRY}/signatures/${subscription.type}/${subscription.id}`,\n };\n\n yield put(billingActions.subscriptions.switchPaymentMethod.setLoading(true));\n try {\n yield call(api.whmcs.put, request);\n\n yield put(billingActions.subscriptions.switchPaymentMethod.success());\n onSuccess(true);\n\n if (usePaymentModalV2 && toast) {\n yield put(commonActions.notifications.set({\n toast,\n type: 'success',\n }));\n }\n\n yield put(billingActions.subscriptions.request());\n yield take([BillingActionTypes.GET_SUBSCRIPTIONS_SUCCESS, BillingActionTypes.GET_SUBSCRIPTIONS_FAILURE]);\n } catch (e) {\n yield put(billingActions.subscriptions.switchPaymentMethod.failure());\n onSuccess(false);\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('subscriptions.notifications.switchPaymentMethod.failure')} `}\n
\n ),\n type: 'error',\n }));\n }\n yield put(billingActions.subscriptions.switchPaymentMethod.setLoading(false));\n}\n\n\nfunction* getSubscriptionAbleToDiscount(action) {\n const { hostingId } = action.payload;\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `api/v2/clientarea/${config.COUNTRY}/signatures/check-hosting-able-discount/${hostingId}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.whmcs.get, request);\n const discountData = billingAssembly.receiveAbleToDiscount(response.data);\n yield put(billingActions.subscriptions.ableToDiscount.set(discountData, hostingId));\n yield put(billingActions.subscriptions.ableToDiscount.success());\n } catch (e) {\n yield put(billingActions.subscriptions.ableToDiscount.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\n\nfunction* getSubscriptionAbleToCancelOffer(action) {\n const {\n subscriptionId, subscriptionType, optionId, actionSuccess, actionFail,\n } = action.payload;\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `api/v2/clientarea/${config.COUNTRY}/signatures/verify-cancel-offer/${optionId}/${subscriptionType}/${subscriptionId}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.whmcs.get, request);\n const offerRetentionCancel = response && response.data.data ? response.data.data.offer : '';\n yield put(billingActions.subscriptions.ableToCancelOffer.set(offerRetentionCancel));\n actionSuccess && actionSuccess();\n yield put(billingActions.subscriptions.ableToCancelOffer.success());\n } catch (e) {\n actionFail && actionFail();\n yield put(billingActions.subscriptions.ableToDiscount.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* getDiscountValues(action) {\n const { hostingId } = action.payload;\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `api/v2/clientarea/${config.COUNTRY}/signatures/values/${hostingId}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.whmcs.get, request);\n const discountData = billingAssembly.receiveDiscountValues(response.data);\n yield put(billingActions.subscriptions.discountValues.set(discountData, hostingId));\n yield put(billingActions.subscriptions.discountValues.success());\n } catch (e) {\n yield put(billingActions.subscriptions.discountValues.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* checkHostingAbleDiscount(action) {\n const { subscriptionId } = action.payload;\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `api/v2/clientarea/${config.COUNTRY}/signatures/check-hosting-able-discount/${subscriptionId}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.whmcs.get, request);\n\n const subscription = billingAssembly.receiveRetentioData(response.data);\n yield put(billingActions.hostingAbleDiscountRequest.set(subscription));\n\n yield put(billingActions.hostingAbleDiscountRequest.success());\n } catch (e) {\n const subscription = {};\n yield put(billingActions.hostingAbleDiscountRequest.set(subscription));\n yield put(billingActions.hostingAbleDiscountRequest.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* getHostBenefitBilling(action) {\n const { hostingId } = action.payload;\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n data: {\n hosting_id: hostingId,\n },\n url: `api/v2/clientarea/${config.COUNTRY}/signatures/retention`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.whmcs.post, request);\n const invoice = billingAssembly.receiveHostBenefitBilling(response.data);\n yield put(billingActions.invoice.set(invoice));\n yield put(billingActions.invoice.success());\n } catch (e) {\n yield put(billingActions.invoice.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* requestDraftInvoicePublish(action) {\n const { invoiceId, executePayment } = action.payload;\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `api/v2/clientarea/${config.COUNTRY}/signatures/retention/${invoiceId}/publish`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.whmcs.post, request);\n if (response.data && response.data.data && response.data.data.success) {\n executePayment(response.data.success);\n } else {\n executePayment(false);\n }\n yield put(billingActions.invoice.success());\n } catch (e) {\n yield put(billingActions.invoice.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* requestReactivateSubscription(action) {\n const { invoiceId, redirect } = action.payload;\n\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `api/v2/clientarea/${config.COUNTRY}/hostings/trust-reactivation`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n brand: COUNTRY.toLowerCase(),\n },\n data: { invoice_id: invoiceId },\n };\n\n yield put(billingActions.subscriptions.reactivation.setLoading(true));\n\n try {\n const response = yield call(api.whmcs.post, request);\n yield call(getSubscriptions);\n\n if (response && response.data && response.data.data) {\n yield put(billingActions.subscriptions.reactivation.set(response.data.data));\n yield put(billingActions.subscriptions.reactivation.success());\n redirect && redirect();\n }\n } catch (e) {\n yield put(billingActions.subscriptions.reactivation.failure());\n } finally {\n yield put(billingActions.subscriptions.reactivation.setLoading(false));\n }\n}\n\nfunction* requestAcceptRetentionOffer(action) {\n const {\n subscriptionId, subscriptionType, offer, actionSuccess, showMessage,\n } = action.payload;\n\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const request = {\n url: `api/v2/clientarea/${config.COUNTRY}/signatures/accept-offer`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n brand: COUNTRY.toLowerCase(),\n },\n data: {\n product_type: subscriptionType,\n product_id: subscriptionId,\n offer,\n },\n };\n\n yield put(billingActions.subscriptions.setLoadingStatusAcceptRetentionOffer(true));\n\n try {\n const response = yield call(api.whmcs.post, request);\n if (response && response.data && response.data.data === 'Offer accepted! Payment method updated successfully') {\n yield put(billingActions.subscriptions.acceptRetentionOffer.set(true));\n yield call(getSubscriptions);\n\n if (showMessage) {\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('billing.retentionOffer.toastSucces')}`}\n
\n ),\n type: 'success',\n }));\n }\n\n yield put(billingActions.subscriptions.acceptRetentionOffer.success());\n actionSuccess && actionSuccess();\n }\n } catch (e) {\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('billing.defaultErrorMessage')}`}\n
\n ),\n type: 'error',\n }));\n yield put(billingActions.subscriptions.reactivation.failure());\n }\n\n yield put(billingActions.subscriptions.setLoadingStatusAcceptRetentionOffer(false));\n}\n\nfunction* requestSubscriptionsNotInCreditCard() {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const request = {\n url: `api/v2/clientarea/${COUNTRY}/signatures/boleto-and-pix`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(billingActions.subscriptions.setLoadingSubscriptionsNotInCreditCard(true));\n try {\n const response = yield call(api.whmcs.get, request);\n\n if (response && response.data && response.data.data) {\n yield put(billingActions.subscriptions.successRequestSubscriptionsNotInCreditCard());\n yield put(billingActions.subscriptions.setSubscriptionsNotInCreditCard(response.data.data));\n }\n } catch (e) {\n const error = { sagasError: e, userRequestData: request, errorMessage: e.message };\n logger.error('Error sagas requestSubscriptionsNotInCreditCard', error);\n yield put(billingActions.subscriptions.failureRequestSubscriptionsNotInCreditCard());\n }\n}\n\nfunction* migrateSubscriptionsToCreditCard(action) {\n const { list } = action.payload;\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const request = {\n url: `api/v2/clientarea/${COUNTRY}/signatures/change-payment-method`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n data: list,\n };\n\n yield put(billingActions.subscriptions.setLoadingUpdateSubscriptionsNotInCreditCard(true));\n try {\n const response = yield call(api.whmcs.put, request);\n\n if (response && response.data && response.data.data) {\n yield put(billingActions.subscriptions.successUpdateSubscriptionsNotInCreditCard());\n yield put(billingActions.subscriptions.requestSubscriptionsNotInCreditCard());\n }\n } catch (e) {\n const error = { sagasError: e, userRequestData: request, errorMessage: e.message };\n logger.error('Error sagas migrateSubscriptionsToCreditCard', error);\n yield put(billingActions.subscriptions.failureUpdateSubscriptionsNotInCreditCard());\n }\n yield put(billingActions.subscriptions.setLoadingUpdateSubscriptionsNotInCreditCard(false));\n}\n\nfunction* sagas() {\n yield takeLatest(BillingActionTypes.GET_SUBSCRIPTIONS_REQUEST, getSubscriptions);\n yield takeLatest(BillingActionTypes.GET_SUBCRIPTIONS_QUESTIONS_REQUEST, getSubscriptionsQuestions);\n yield takeLatest(BillingActionTypes.SUBSCRIPTION_CANCEL_RENEWAL_REQUEST, requestCancellingRenewal);\n yield takeLatest(BillingActionTypes.SUBSCRIPTION_ACTIVATE_RENEWAL_REQUEST, requestActivatingRenewal);\n yield takeLatest(BillingActionTypes.SUBSCRIPTION_CANCEL_SIGNATURE_REQUEST, requestCancellingSignature);\n yield takeLatest(BillingActionTypes.SUBSCRIPTION_REFUND_CHECK_REQUEST, requestRefundCheck);\n yield takeLatest(BillingActionTypes.SUBSCRIPTION_SWITCH_PAYMENT_METHOD_REQUEST, requestSwitchPaymentMethod);\n yield takeLatest(BillingActionTypes.GET_INVOICE_PAYMENT_METHODS_REQUEST, getOldInvoicePaymentMethods);\n yield takeLatest(BillingActionTypes.REQUEST_PAYMENT_METHODS, getInvoicePaymentMethods);\n yield takeLatest(BillingActionTypes.GET_SUBSCRIPTIONS_ABLE_TO_DISCOUNT_REQUEST, getSubscriptionAbleToDiscount);\n yield takeLatest(BillingActionTypes.GET_SUBSCRIPTIONS_ABLE_TO_CANCEL_OFFER_REQUEST, getSubscriptionAbleToCancelOffer);\n yield takeLatest(BillingActionTypes.GET_DISCOUNT_VALUES_REQUEST, getDiscountValues);\n yield takeLatest(BillingActionTypes.CHECK_HOSTING_ABLE_DISCOUNT_REQUEST, checkHostingAbleDiscount);\n yield takeLatest(BillingActionTypes.GET_HOST_BENEFIT_BILLING_REQUEST, getHostBenefitBilling);\n yield takeLatest(BillingActionTypes.SUBSCRIPTION_REACTIVATION_REQUEST, requestReactivateSubscription);\n yield takeLatest(BillingActionTypes.SUBSCRIPTION_PUBLISH_DRAFT_INVOICE_REQUEST, requestDraftInvoicePublish);\n yield takeLatest(BillingActionTypes.GET_SUBSCRIPTIONS_NO_IN_CREDIT_CARD, requestSubscriptionsNotInCreditCard);\n yield takeLatest(BillingActionTypes.UPDATE_SUBSCRIPTIONS_NOT_IN_CREDIT_CARD, migrateSubscriptionsToCreditCard);\n yield takeLatest(BillingActionTypes.ACCEPT_RETENTION_OFFER_REQUEST, requestAcceptRetentionOffer);\n}\n\nexport default sagas;\n","export const DomainsActionTypes = {\n GET_DOMAINS_FAILURE: 'GET_DOMAINS_FAILURE_DOMAINS_SAGAS',\n GET_DOMAINS_REQUEST: 'GET_DOMAINS_REQUEST_DOMAINS_SAGAS',\n GET_DOMAINS_SUCCESS: 'GET_DOMAINS_SUCCESS_DOMAINS_SAGAS',\n SET_DOMAINS: 'SET_DOMAINS_DOMAINS_SAGAS',\n\n SET_DOMAIN_DETAIL: 'SET_DOMAIN_DETAIL',\n GET_DOMAIN_DETAIL_REQUEST: 'GET_DOMAIN_DETAIL_REQUEST',\n GET_DOMAIN_DETAIL_SUCCESS: 'GET_DOMAIN_DETAIL_SUCCESS',\n GET_DOMAIN_DETAIL_FAILURE: 'GET_DOMAIN_DETAIL_FAILURE',\n\n DOMAIN_ACTIVATE_RENEWAL_FAILURE: 'DOMAIN_ACTIVATE_RENEWAL_FAILURE',\n DOMAIN_ACTIVATE_RENEWAL_REQUEST: 'DOMAIN_ACTIVATE_RENEWAL_REQUEST',\n DOMAIN_ACTIVATE_RENEWAL_SUCCESS: 'DOMAIN_ACTIVATE_RENEWAL_SUCCESS',\n\n DOMAIN_GENERATE_NEW_INVOICE_FAILURE: 'DOMAIN_GENERATE_NEW_INVOICE_FAILURE',\n DOMAIN_GENERATE_NEW_INVOICE_REQUEST: 'DOMAIN_GENERATE_NEW_INVOICE_REQUEST',\n DOMAIN_GENERATE_NEW_INVOICE_SUCCESS: 'DOMAIN_GENERATE_NEW_INVOICE_SUCCESS',\n DOMAIN_GENERATE_NEW_INVOICE_LOADING: 'DOMAIN_GENERATE_NEW_INVOICE_LOADING',\n\n SET_DOMAIN_INVOICE_ID: 'SET_DOMAIN_INVOICE_ID',\n\n GET_DOMAIN_PROPAGATION_STATUS_REQUEST: 'GET_DOMAIN_PROPAGATION_STATUS_REQUEST',\n GET_DOMAIN_PROPAGATION_STATUS_SUCCESS: 'GET_DOMAIN_PROPAGATION_STATUS_SUCCESS',\n GET_DOMAIN_PROPAGATION_STATUS_FAILURE: 'GET_DOMAIN_PROPAGATION_STATUS_FAILURE',\n SET_DOMAIN_PROPAGATION_STATUS: 'SET_DOMAIN_PROPAGATION_STATUS',\n\n GET_CONFIGURED_DOMAIN_STATUS_REQUEST: 'GET_CONFIGURED_DOMAIN_STATUS_REQUEST',\n GET_CONFIGURED_DOMAIN_STATUS_SUCCESS: 'GET_CONFIGURED_DOMAIN_STATUS_SUCCESS',\n GET_CONFIGURED_DOMAIN_STATUS_FAILURE: 'GET_CONFIGURED_DOMAIN_STATUS_FAILURE',\n SET_CONFIGURED_DOMAIN_STATUS: 'SET_CONFIGURED_DOMAIN_STATUS',\n SET_EMPTY_DOMAIN_STATUS: 'SET_EMPTY_DOMAIN_STATUS',\n SET_RESET_DOMAIN_STATUS: 'SET_RESET_DOMAIN_STATUS',\n SET_LOADED_CONFIGURED_DOMAIN_STATUS: 'SET_LOADED_CONFIGURED_DOMAIN_STATUS',\n\n SET_DOMAIN_HAS_CONFIGURED: 'SET_DOMAIN_HAS_CONFIGURED',\n SET_DOMAIN_HAS_CONFIGURED_SUCCESS: 'SET_DOMAIN_HAS_CONFIGURED_SUCCESS',\n SET_DOMAIN_HAS_CONFIGURED_FAILURE: 'SET_DOMAIN_HAS_CONFIGURED_FAILURE',\n\n SET_DOMAIN_EPP_REDIRECT: 'SET_DOMAIN_EPP_REDIRECT',\n\n SET_MODAL_EPP_KEY_IS_OPEN: 'SET_MODAL_EPP_KEY_IS_OPEN',\n SET_MODAL_EPP_KEY_IS_CLOSED: 'SET_MODAL_EPP_KEY_IS_CLOSED',\n SET_MODAL_EPP_KEY_IS_CHANGED: 'SET_MODAL_EPP_KEY_IS_CHANGED',\n\n GET_EPP_KEY_GENERATED_REQUEST: 'GET_EPP_KEY_GENERATED_REQUEST',\n GET_EPP_KEY_GENERATED_SUCCESS: 'GET_EPP_KEY_GENERATED_SUCCESS',\n GET_EPP_KEY_GENERATED_FAILURE: 'GET_EPP_KEY_GENERATED_FAILURE',\n SET_EPP_KEY_GENERATED: 'SET_EPP_KEY_GENERATED',\n\n GET_ALL_DOMAINS_LIST_REQUEST: 'GET_ALL_DOMAINS_LIST_REQUEST',\n GET_ALL_DOMAINS_LIST_SUCCESS: 'GET_ALL_DOMAINS_LIST_SUCCESS',\n GET_ALL_DOMAINS_LIST_FAILURE: 'GET_ALL_DOMAINS_LIST_FAILURE',\n SET_ALL_DOMAINS_LIST: 'SET_ALL_DOMAINS_LIST',\n\n REQUEST_DOMAINS_ELEGIBLE: 'REQUEST_DOMAINS_ELEGIBLE',\n SET_DOMAINS_ELEGIBLE: 'SET_DOMAINS_ELEGIBLE',\n DOMAINS_ELEGIBLE_SUCCESS: 'DOMAINS_ELEGIBLE_SUCCESS',\n DOMAINS_ELEGIBLE_FAILURE: 'DOMAINS_ELEGIBLE_FAILURE',\n};\n","import { DomainsActionTypes } from './domains.types';\n\nconst getDomainsRequest = page => ({ type: DomainsActionTypes.GET_DOMAINS_REQUEST, payload: page });\nconst getDomainsSuccess = () => ({ type: DomainsActionTypes.GET_DOMAINS_SUCCESS });\nconst getDomainsFailure = () => ({ type: DomainsActionTypes.GET_DOMAINS_FAILURE });\nconst setDomains = list => ({ type: DomainsActionTypes.SET_DOMAINS, payload: list });\n\nconst getDomainDetail = id => ({ type: DomainsActionTypes.GET_DOMAIN_DETAIL_REQUEST, payload: { id } });\nconst getDomainDetailSuccess = () => ({ type: DomainsActionTypes.GET_DOMAINS_SUCCESS });\nconst getDomainDetailFailure = () => ({ type: DomainsActionTypes.GET_DOMAINS_FAILURE });\nconst setDomainDetail = detail => ({ type: DomainsActionTypes.SET_DOMAIN_DETAIL, payload: detail });\n\nconst getDomainsElegible = () => ({ type: DomainsActionTypes.REQUEST_DOMAINS_ELEGIBLE });\nconst getDomainsElegibleSuccess = () => ({ type: DomainsActionTypes.DOMAINS_ELEGIBLE_SUCCESS });\nconst getDomainsElegibleFailure = () => ({ type: DomainsActionTypes.DOMAINS_ELEGIBLE_FAILURE });\nconst setDomainsElegible = domainsElegible => ({ type: DomainsActionTypes.SET_DOMAINS_ELEGIBLE, payload: domainsElegible });\n\nconst domainsActivateRenewalRequest = (domainData, callBackFunction) => ({\n type: DomainsActionTypes.DOMAIN_ACTIVATE_RENEWAL_REQUEST,\n payload: { domainData, callBackFunction },\n});\n\nconst domainsActivateRenewalSuccess = () => ({\n type: DomainsActionTypes.DOMAIN_ACTIVATE_RENEWAL_SUCCESS,\n});\n\nconst domainsActivateRenewalFailure = () => ({\n type: DomainsActionTypes.DOMAIN_ACTIVATE_RENEWAL_FAILURE,\n});\n\nconst domainsGenerateNewInvoiceRequest = (domainData, callBackFunction) => ({\n type: DomainsActionTypes.DOMAIN_GENERATE_NEW_INVOICE_REQUEST,\n payload: { domainData, callBackFunction },\n});\n\nconst domainsGenerateNewInvoiceSuccess = () => ({\n type: DomainsActionTypes.DOMAIN_GENERATE_NEW_INVOICE_SUCCESS,\n});\n\nconst domainsGenerateNewInvoiceFailure = () => ({\n type: DomainsActionTypes.DOMAIN_GENERATE_NEW_INVOICE_FAILURE,\n});\n\nconst domainsGenerateNewInvoiceLoading = value => ({\n type: DomainsActionTypes.DOMAIN_GENERATE_NEW_INVOICE_LOADING,\n value,\n});\n\nconst getDomainPropagationStatusRequest = domainId => ({\n type: DomainsActionTypes.GET_DOMAIN_PROPAGATION_STATUS_REQUEST,\n payload: domainId,\n});\n\nconst getDomainPropagationStatusSuccess = () => ({\n type: DomainsActionTypes.GET_DOMAIN_PROPAGATION_STATUS_SUCCESS,\n});\n\nconst getDomainPropagationStatusFailure = () => ({\n type: DomainsActionTypes.GET_DOMAIN_PROPAGATION_STATUS_FAILURE,\n});\n\nconst setDomainPropagationStatus = allStatus => ({\n type: DomainsActionTypes.SET_DOMAIN_PROPAGATION_STATUS,\n payload: allStatus,\n});\n\nconst getConfiguredDomainStatusRequest = domain => ({\n type: DomainsActionTypes.GET_CONFIGURED_DOMAIN_STATUS_REQUEST,\n payload: domain,\n});\n\nconst getConfiguredDomainStatusSuccess = () => ({\n type: DomainsActionTypes.GET_CONFIGURED_DOMAIN_STATUS_SUCCESS,\n});\n\nconst getConfiguredDomainStatusFailure = () => ({\n type: DomainsActionTypes.GET_CONFIGURED_DOMAIN_STATUS_FAILURE,\n});\n\nconst setConfiguredDomainStatus = data => ({\n type: DomainsActionTypes.SET_CONFIGURED_DOMAIN_STATUS,\n payload: {\n id: data.id,\n domain: data.domain,\n status: data.status,\n },\n});\n\nconst setEmptyDomainStatus = () => ({\n type: DomainsActionTypes.SET_EMPTY_DOMAIN_STATUS,\n});\n\nconst setResetDomainStatus = () => ({\n type: DomainsActionTypes.SET_RESET_DOMAIN_STATUS,\n});\n\nconst setLoadedDomainStatus = () => ({\n type: DomainsActionTypes.SET_LOADED_CONFIGURED_DOMAIN_STATUS,\n});\n\nconst setDomainsHasConfigured = id => ({\n type: DomainsActionTypes.SET_DOMAIN_HAS_CONFIGURED,\n payload: id,\n});\n\nconst setDomainsHasConfiguredSuccess = () => ({\n type: DomainsActionTypes.SET_DOMAIN_HAS_CONFIGURED_SUCCESS,\n});\n\nconst setDomainsHasConfiguredFailure = () => ({\n type: DomainsActionTypes.SET_DOMAIN_HAS_CONFIGURED_FAILURE,\n});\n\nconst setDomainEPPRedirect = redirect => ({\n type: DomainsActionTypes.SET_DOMAIN_EPP_REDIRECT,\n payload: redirect,\n});\n\nconst setModalEppKeyOpen = (domainName, domainId) => ({\n type: DomainsActionTypes.SET_MODAL_EPP_KEY_IS_OPEN,\n payload: {\n name: domainName,\n id: domainId,\n },\n});\n\nconst setModalEppKeyClose = () => ({\n type: DomainsActionTypes.SET_MODAL_EPP_KEY_IS_CLOSED,\n});\n\nconst setModalEppKeyChange = (domainName, domainId) => ({\n type: DomainsActionTypes.SET_MODAL_EPP_KEY_IS_CHANGED,\n payload: {\n name: domainName,\n id: domainId,\n },\n});\n\nconst getEppKeyGeneratedRequest = (domainId, setModalStatus) => ({\n type: DomainsActionTypes.GET_EPP_KEY_GENERATED_REQUEST,\n payload: {\n domainId,\n setModalStatus,\n },\n});\n\nconst getEppKeyGeneratedSuccess = () => ({\n type: DomainsActionTypes.GET_EPP_KEY_GENERATED_SUCCESS,\n});\n\nconst getEppKeyGeneratedFailure = () => ({\n type: DomainsActionTypes.GET_EPP_KEY_GENERATED_FAILURE,\n});\n\nconst setEppKeyGenerated = keyGenerated => ({\n type: DomainsActionTypes.SET_EPP_KEY_GENERATED,\n payload: keyGenerated,\n});\n\nconst getAllDomainsListRequest = setModalStatus => ({\n type: DomainsActionTypes.GET_ALL_DOMAINS_LIST_REQUEST,\n payload: setModalStatus,\n});\n\nconst getAllDomainsListSuccess = () => ({\n type: DomainsActionTypes.GET_ALL_DOMAINS_LIST_SUCCESS,\n});\n\nconst getAllDomainsListFailure = () => ({\n type: DomainsActionTypes.GET_ALL_DOMAINS_LIST_FAILURE,\n});\n\nconst setAllDomainsList = domainsList => ({\n type: DomainsActionTypes.SET_ALL_DOMAINS_LIST,\n payload: domainsList,\n});\n\nconst actions = {\n domains: {\n failure: getDomainsFailure,\n request: getDomainsRequest,\n success: getDomainsSuccess,\n set: setDomains,\n requestDetail: getDomainDetail,\n setDetail: setDomainDetail,\n detailSuccess: getDomainDetailSuccess,\n detailFailure: getDomainDetailFailure,\n activateRenewal: {\n request: domainsActivateRenewalRequest,\n success: domainsActivateRenewalSuccess,\n failure: domainsActivateRenewalFailure,\n },\n generateNewInvoice: {\n request: domainsGenerateNewInvoiceRequest,\n success: domainsGenerateNewInvoiceSuccess,\n failure: domainsGenerateNewInvoiceFailure,\n loading: domainsGenerateNewInvoiceLoading,\n },\n },\n propagationStatus: {\n get: getDomainPropagationStatusRequest,\n success: getDomainPropagationStatusSuccess,\n failure: getDomainPropagationStatusFailure,\n set: setDomainPropagationStatus,\n },\n configuredStatusDomain: {\n get: getConfiguredDomainStatusRequest,\n success: getConfiguredDomainStatusSuccess,\n failure: getConfiguredDomainStatusFailure,\n set: setConfiguredDomainStatus,\n empty: setEmptyDomainStatus,\n reset: setResetDomainStatus,\n loaded: setLoadedDomainStatus,\n },\n setDomainConfiguration: {\n set: setDomainsHasConfigured,\n success: setDomainsHasConfiguredSuccess,\n failure: setDomainsHasConfiguredFailure,\n },\n modalEppKey: {\n open: setModalEppKeyOpen,\n close: setModalEppKeyClose,\n change: setModalEppKeyChange,\n redirect: setDomainEPPRedirect,\n get: getEppKeyGeneratedRequest,\n set: setEppKeyGenerated,\n success: getEppKeyGeneratedSuccess,\n failure: getEppKeyGeneratedFailure,\n },\n activeDomainList: {\n get: getAllDomainsListRequest,\n set: setAllDomainsList,\n success: getAllDomainsListSuccess,\n failure: getAllDomainsListFailure,\n },\n domainsElegible: {\n get: getDomainsElegible,\n success: getDomainsElegibleSuccess,\n failure: getDomainsElegibleFailure,\n set: setDomainsElegible,\n },\n};\n\nexport default actions;\n","import { PROPAGATION_STATUS } from '@/enums/domains/domains.enum';\nimport { DomainsActionTypes } from './domains.types';\n\nexport const initialState = {\n list: [],\n listTotal: 0,\n loading: false,\n loaded: false,\n detail: {\n id: '',\n loading: false,\n loadingRenewal: false,\n domain: '',\n registrationDate: '',\n firstPaymentAmount: '',\n paymentMethod: '',\n recurringAmount: '',\n registrar: '',\n registrationPeriod: 1,\n billingCycle: '',\n expiryDate: '',\n nextInvoiceDate: '',\n status: '',\n doNotRenew: 0,\n nextDueDate: '',\n actions: [],\n },\n domains: {\n generateNewInvoice: {\n loading: false,\n },\n },\n propagationStatus: [],\n domainsElegible: [],\n domainConfiguredStatus: {\n id: 0,\n domain: '',\n status: '',\n loaded: false,\n },\n eppKey: {\n activeDomainsList: [],\n modalIsOpen: false,\n domainId: 0,\n domainName: '',\n keyGenerated: null,\n redirect: false,\n },\n};\n\nconst domainsReducer = (state = initialState, action) => {\n let newList = [];\n switch (action.type) {\n case DomainsActionTypes.SET_DOMAINS: {\n newList = [];\n\n if (action.payload.page && action.payload.page > 1) {\n newList.push(...state.list);\n }\n\n if (action.payload.domains) {\n newList.push(...action.payload.domains);\n } else {\n newList.push(...action.payload);\n }\n\n return {\n ...state,\n list: newList,\n listTotal: action.payload.total,\n loading: false,\n loaded: true,\n };\n }\n case DomainsActionTypes.GET_DOMAINS_FAILURE:\n case DomainsActionTypes.GET_DOMAINS_SUCCESS: {\n return {\n ...state,\n loading: false,\n };\n }\n case DomainsActionTypes.GET_DOMAINS_REQUEST: {\n return {\n ...state,\n loading: true,\n };\n }\n case DomainsActionTypes.SET_DOMAIN_DETAIL: {\n return {\n ...state,\n detail: {\n ...action.payload,\n loading: false,\n },\n };\n }\n case DomainsActionTypes.GET_DOMAIN_DETAIL_FAILURE:\n case DomainsActionTypes.GET_DOMAIN_DETAIL_SUCCESS: {\n return {\n ...state,\n detail: {\n ...initialState.detail,\n loading: false,\n },\n };\n }\n case DomainsActionTypes.GET_DOMAIN_DETAIL_REQUEST: {\n return {\n ...state,\n detail: {\n ...initialState.detail,\n loading: true,\n },\n };\n }\n case DomainsActionTypes.SET_DOMAIN_PROPAGATION_STATUS: {\n const allStatus = action.payload;\n return {\n ...state,\n propagationStatus: allStatus,\n };\n }\n case DomainsActionTypes.SET_CONFIGURED_DOMAIN_STATUS: {\n const { id, domain, status } = action.payload;\n return {\n ...state,\n domainConfiguredStatus: {\n ...state.domainConfiguredStatus,\n id,\n domain,\n status,\n },\n };\n }\n case DomainsActionTypes.SET_EMPTY_DOMAIN_STATUS: {\n return {\n ...state,\n domainConfiguredStatus: {\n ...state.domainConfiguredStatus,\n status: PROPAGATION_STATUS.OUT_OF_RANGE,\n loaded: true,\n },\n };\n }\n case DomainsActionTypes.SET_RESET_DOMAIN_STATUS: {\n return {\n ...state,\n domainConfiguredStatus: {\n ...initialState.domainConfiguredStatus,\n },\n };\n }\n case DomainsActionTypes.SET_LOADED_CONFIGURED_DOMAIN_STATUS: {\n return {\n ...state,\n domainConfiguredStatus: {\n ...state.domainConfiguredStatus,\n loaded: true,\n },\n };\n }\n case DomainsActionTypes.DOMAIN_GENERATE_NEW_INVOICE_LOADING: {\n return {\n ...state,\n domains: {\n ...state.domains,\n generateNewInvoice: {\n ...state.domains.generateNewInvoice,\n loading: action.value,\n },\n },\n };\n }\n case DomainsActionTypes.SET_DOMAIN_EPP_REDIRECT: {\n return {\n ...state,\n eppKey: {\n ...state.eppKey,\n redirect: action.payload,\n },\n };\n }\n case DomainsActionTypes.SET_MODAL_EPP_KEY_IS_OPEN: {\n return {\n ...state,\n eppKey: {\n ...state.eppKey,\n modalIsOpen: true,\n domainId: action.payload.id,\n domainName: action.payload.name,\n },\n };\n }\n case DomainsActionTypes.SET_MODAL_EPP_KEY_IS_CLOSED: {\n return {\n ...state,\n eppKey: {\n ...initialState.eppKey,\n },\n };\n }\n case DomainsActionTypes.SET_MODAL_EPP_KEY_IS_CHANGED: {\n return {\n ...state,\n eppKey: {\n ...state.eppKey,\n domainId: action.payload.id,\n domainName: action.payload.name,\n },\n };\n }\n case DomainsActionTypes.SET_EPP_KEY_GENERATED: {\n return {\n ...state,\n eppKey: {\n ...state.eppKey,\n keyGenerated: action.payload,\n },\n };\n }\n case DomainsActionTypes.SET_ALL_DOMAINS_LIST: {\n return {\n ...state,\n eppKey: {\n ...state.eppKey,\n activeDomainsList: action.payload,\n },\n };\n }\n case DomainsActionTypes.SET_DOMAINS_ELEGIBLE: {\n return {\n ...state,\n domainsElegible: action.payload.data,\n };\n }\n default: {\n return state;\n }\n }\n};\n\nexport default domainsReducer;\n","export const WORDPRESS_PRODUCT_ID = [256, 250, 253, 259];\n","import { WHMCS_URL, COUNTRY } from '@/config';\nimport { WORDPRESS_PRODUCT_ID } from '@/config/products/wordpress';\n\n\nexport const registrobrActions = [{\n name: 'alterDns',\n label: 'Configurar Domínio',\n link: '/produtos/alterar-dns/',\n},\n{\n name: 'domainConfigurationWizard',\n label: 'domainConfigurationWizard',\n link: '',\n},\n{\n name: 'editContact',\n label: 'Editar Infos Contato',\n link: `${WHMCS_URL}/clientarea.php?action=domaincontacts&domainid=`,\n},\n{\n name: 'renewDomain',\n label: 'Renovar Domínio',\n link: `${WHMCS_URL}/cart.php?gid=renewals`,\n},\n{\n name: 'manageSubscription',\n label: 'manageSubscription',\n link: '',\n}];\n\nexport const intResellerActions = [{\n name: 'alterDns',\n label: 'Configurar Dominio',\n link: '/produtos/alterar-dns/',\n},\n{\n name: 'domainConfigurationWizard',\n label: 'domainConfigurationWizard',\n link: '',\n},\n{\n name: 'editContact',\n label: 'Editar Infos Contato',\n link: `${WHMCS_URL}/clientarea.php?action=domaincontacts&domainid=`,\n},\n{\n name: 'renewDomain',\n label: 'Renovar Domínio',\n link: `${WHMCS_URL}/cart.php?gid=renewals`,\n},\n{\n name: 'protectId',\n label: 'Protect ID',\n link: `${WHMCS_URL}/clientarea.php?action=domaindetails&id=`,\n},\n{\n name: 'registrationLock',\n label: 'Trava de registro',\n link: `${WHMCS_URL}/clientarea.php?action=domaindetails&id=`,\n},\n{\n name: 'manageSubscription',\n label: 'manageSubscription',\n link: '',\n}];\n\nexport const handleCheckEmailSso = (id, email, packageId) => {\n const isWordPressHosting = WORDPRESS_PRODUCT_ID.includes(packageId);\n\n if (isWordPressHosting && COUNTRY === 'br') {\n return `${WHMCS_URL}/custom_includes/wordpress/endpoint.php?action=ssoWebmail&hostingid=${id}&email=${email}`;\n }\n return `${WHMCS_URL}/clientarea.php?action=productdetails&id=${id}&modop=custom&a=management&page=emails&act=emailSSO&email=${email}`;\n};\n","\nimport { registrobrActions, intResellerActions } from '@/config/components/ctas';\n\nconst propagationStatus = (rawData) => {\n const { data } = rawData.data;\n return data.map(domain => ({\n domain: domain.domain,\n id: domain.domain_id,\n status: domain.status ? domain.status : domain.propagation_status,\n hostingId: domain.hosting_id,\n nameServer1: domain.hosting_nameserver_1,\n nameServer2: domain.hosting_nameserver_2,\n configured: domain.configured,\n }));\n};\n\nconst configuredDomainStatus = (rawData) => {\n const data = rawData.data.data[0];\n return {\n id: data.domain_id,\n domain: data.domain,\n status: data.status,\n };\n};\n\nconst eppKeyGenerated = rawData => rawData.data.data.eppcode;\n\nconst allActiveDomainsList = (rawData) => {\n const { data } = rawData.data;\n const domains = data.domains || data;\n return domains.filter(domain => domain.status === 'active' && !domain.domain.includes('.com.br'));\n};\n\nconst sortDomains = (domainsList) => {\n const activeList = domainsList.filter(domain => domain.status === 'active');\n const expiredList = domainsList.filter(domain => domain.status === 'expired');\n const pendingTransferList = domainsList.filter(domain => domain.status === 'pendingTransfer');\n const pendingList = domainsList.filter(domain => domain.status === 'pending');\n const cancelledList = domainsList.filter(domain => domain.status === 'cancelled');\n const registerErrorList = domainsList.filter(domain => domain.status === 'registerError');\n\n return [\n ...activeList,\n ...pendingTransferList,\n ...pendingList,\n ...expiredList,\n ...registerErrorList,\n ...cancelledList,\n ];\n};\n\nconst mountDomainsList = (rawData) => {\n if (rawData && rawData.data && rawData.data.data) {\n if (rawData.data.data.domains) {\n return ({\n domains: sortDomains(rawData.data.data.domains),\n total: rawData.data.data.paginate.total,\n });\n }\n\n return sortDomains(rawData.data.data);\n }\n\n return [];\n};\n\nconst mountDetails = (rawData) => {\n if (rawData && rawData.data && rawData.data.data) {\n const detail = rawData.data.data;\n detail.actions = detail.registrar === 'registrobr' ? registrobrActions : intResellerActions;\n return detail;\n }\n\n return {};\n};\n\nconst assembly = {\n propagationStatus,\n configuredDomainStatus,\n eppKeyGenerated,\n allActiveDomainsList,\n mountDomainsList,\n mountDetails,\n};\n\nexport default assembly;\n","export const ORDER_EPP_KEY_MODAL_STEP = {\n SELECT_DOMAIN: 'SELECT_DOMAIN',\n CONFIRM_ORDER: 'CONFIRM_ORDER',\n KEY_SUCCESS: 'KEY_SUCCESS',\n KEY_FAILURE: 'KEY_FAILURE',\n LOADING_KEY: 'LOADING_KEY',\n};\n","import React from 'react';\nimport {\n call, takeLatest, put, select, take,\n} from 'redux-saga/effects';\nimport { authActions } from '@/redux/modules/auth';\nimport { api } from '@/utils/api';\nimport { commonActions } from '@/redux/modules/common';\nimport { locale } from '@/utils/locale';\nimport { DomainsActionTypes } from './domains.types';\nimport {\n DOMAIN_RENEWAL_URL, DOMAIN_GENERATE_NEW_INVOICE, USER_DOMAINS_URL, DOMAIN_DETAIL_URL, USER_DOMAINS_ELEGIBLE,\n} from '@/config/api';\nimport domainsActions from './domains.actions';\nimport domainsAssembly from './domains.assembly';\nimport { ORDER_EPP_KEY_MODAL_STEP } from '@/components/Domain/ModalEppKey/ModalEppKey.enum';\nimport logger from '@/utils/logger';\n\nfunction* requestActivatingRenewal(action) {\n const { domainData, callBackFunction } = action.payload;\n const { token } = yield select(state => state.auth);\n\n const request = {\n data: {\n donotrenew: domainData.donotrenew,\n },\n headers: {\n Authorization: `Bearer ${token}`,\n },\n url: DOMAIN_RENEWAL_URL(domainData.id),\n };\n\n try {\n yield call(api.whmcs.put, request);\n\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('domains.notifications.activateRenewal.success.0')} `}\n {domainData.name} \n {`${locale('domains.notifications.activateRenewal.success.1')} `}\n
\n ),\n type: 'success',\n }));\n callBackFunction();\n yield take([DomainsActionTypes.GET_DOMAINS_SUCCESS, DomainsActionTypes.GET_DOMAINS_FAILURE]);\n } catch (e) {\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('domains.notifications.activateRenewal.failure.0')} `}\n {domainData.name} \n {`${locale('domains.notifications.activateRenewal.failure.1')} `}\n
\n ),\n type: 'error',\n }));\n }\n}\n\nfunction* requestGenerationNewInvoice(action) {\n const { domainData, callBackFunction } = action.payload;\n const { token } = yield select(state => state.auth);\n\n const request = {\n data: {\n donotrenew: domainData.id,\n },\n headers: {\n Authorization: `Bearer ${token}`,\n },\n url: DOMAIN_GENERATE_NEW_INVOICE(domainData.id),\n };\n\n try {\n yield put(domainsActions.domains.generateNewInvoice.loading(true));\n const response = yield call(api.whmcs.put, request);\n\n if (response.data.data.invoiceid === undefined) {\n throw new Error('Its not returned invoice id');\n }\n\n callBackFunction(response.data.data.invoiceid);\n } catch (e) {\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('domains.notifications.generateNewInvoice.failure.0')} `}\n
\n ),\n type: 'error',\n }));\n yield put(domainsActions.domains.generateNewInvoice.failure());\n yield put(domainsActions.domains.generateNewInvoice.loading(false));\n }\n}\n\nfunction* getPropagationStatus() {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: 'api/v2/clientarea/br/domains/propagation',\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n try {\n const response = yield call(api.whmcs.get, request);\n const propagationStatus = domainsAssembly.propagationStatus(response);\n yield put(domainsActions.propagationStatus.success());\n yield put(domainsActions.propagationStatus.set(propagationStatus));\n } catch (e) {\n yield put(domainsActions.propagationStatus.failure());\n }\n}\n\nfunction* getConfiguredDomainStatus(action) {\n const domain = action.payload;\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `api/v2/clientarea/br/domains/domain-propagation/${domain}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n try {\n const response = yield call(api.whmcs.get, request);\n const propagationStatus = domainsAssembly.configuredDomainStatus(response);\n yield put(domainsActions.configuredStatusDomain.success());\n yield put(domainsActions.configuredStatusDomain.set(propagationStatus));\n } catch (e) {\n yield put(domainsActions.configuredStatusDomain.failure());\n } finally {\n yield put(domainsActions.configuredStatusDomain.loaded());\n }\n}\n\nfunction* setConfiguredDomain(action) {\n const id = action.payload;\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: 'api/v2/clientarea/br/domains/set-external-domain-configured-flag',\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n data: {\n hosting_id: id,\n configured: true,\n },\n };\n\n try {\n yield call(api.whmcs.post, request);\n yield put(domainsActions.setDomainConfiguration.success());\n } catch (e) {\n yield put(domainsActions.setDomainConfiguration.failure());\n }\n}\n\nfunction* setAllActiveDomainsList(action) {\n const setModalStatus = action.payload;\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: USER_DOMAINS_URL,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n setModalStatus(ORDER_EPP_KEY_MODAL_STEP.LOADING_KEY);\n\n try {\n const response = yield call(api.whmcs.get, request);\n const activeDomainList = domainsAssembly.allActiveDomainsList(response);\n yield put(domainsActions.activeDomainList.set(activeDomainList));\n setModalStatus(ORDER_EPP_KEY_MODAL_STEP.SELECT_DOMAIN);\n yield put(domainsActions.activeDomainList.success());\n } catch (e) {\n yield put(domainsActions.activeDomainList.failure());\n setModalStatus(ORDER_EPP_KEY_MODAL_STEP.KEY_FAILURE);\n }\n}\n\nfunction* setGeneratedEppKey(action) {\n const { domainId, setModalStatus } = action.payload;\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `api/v2/clientarea/br/domain/${domainId}/eppcode`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n setModalStatus(ORDER_EPP_KEY_MODAL_STEP.LOADING_KEY);\n\n try {\n const response = yield call(api.whmcs.get, request);\n const keyGenerated = domainsAssembly.eppKeyGenerated(response);\n yield put(domainsActions.modalEppKey.set(keyGenerated));\n setModalStatus(ORDER_EPP_KEY_MODAL_STEP.KEY_SUCCESS);\n yield put(domainsActions.modalEppKey.success());\n } catch (e) {\n setModalStatus(ORDER_EPP_KEY_MODAL_STEP.KEY_FAILURE);\n yield put(domainsActions.setDomainConfiguration.failure());\n }\n}\n\nfunction* requestDomains(action) {\n const { payload } = action;\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `${(payload && payload.page) ? `${USER_DOMAINS_URL}?page=${payload.page}` : USER_DOMAINS_URL}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n try {\n const response = yield call(api.whmcs.get, request);\n const domains = domainsAssembly.mountDomainsList(response);\n yield put(domainsActions.domains.set(payload ? { ...domains, page: payload && payload.page } : domains));\n yield put(domainsActions.domains.success());\n } catch (e) {\n const error = { ...e, userRequestData: request };\n logger.error('Error sagas requestDomains', error);\n yield put(domainsActions.domains.failure());\n }\n}\n\nfunction* requestDomainDetail(action) {\n const { id } = action.payload;\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: DOMAIN_DETAIL_URL(id),\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n try {\n const response = yield call(api.whmcs.get, request);\n const details = domainsAssembly.mountDetails(response);\n yield put(domainsActions.domains.setDetail(details));\n yield put(domainsActions.domains.detailSuccess());\n } catch (e) {\n yield put(domainsActions.domains.getDomainDetailFailure());\n }\n}\n\nfunction* requestDomainsElegible() {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `${USER_DOMAINS_ELEGIBLE}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n try {\n const response = yield call(api.whmcs.get, request);\n yield put(domainsActions.domainsElegible.set(response.data));\n yield put(domainsActions.domainsElegible.success());\n } catch (e) {\n yield put(domainsActions.domainsElegible.failure());\n }\n}\n\nfunction* sagas() {\n yield takeLatest(DomainsActionTypes.DOMAIN_ACTIVATE_RENEWAL_REQUEST, requestActivatingRenewal);\n yield takeLatest(DomainsActionTypes.DOMAIN_GENERATE_NEW_INVOICE_REQUEST, requestGenerationNewInvoice);\n yield takeLatest(DomainsActionTypes.GET_DOMAIN_PROPAGATION_STATUS_REQUEST, getPropagationStatus);\n yield takeLatest(DomainsActionTypes.GET_CONFIGURED_DOMAIN_STATUS_REQUEST, getConfiguredDomainStatus);\n yield takeLatest(DomainsActionTypes.SET_DOMAIN_HAS_CONFIGURED, setConfiguredDomain);\n yield takeLatest(DomainsActionTypes.GET_ALL_DOMAINS_LIST_REQUEST, setAllActiveDomainsList);\n yield takeLatest(DomainsActionTypes.GET_EPP_KEY_GENERATED_REQUEST, setGeneratedEppKey);\n yield takeLatest(DomainsActionTypes.GET_EPP_KEY_GENERATED_REQUEST, setGeneratedEppKey);\n yield takeLatest(DomainsActionTypes.GET_DOMAINS_REQUEST, requestDomains);\n yield takeLatest(DomainsActionTypes.GET_DOMAIN_DETAIL_REQUEST, requestDomainDetail);\n yield takeLatest(DomainsActionTypes.REQUEST_DOMAINS_ELEGIBLE, requestDomainsElegible);\n}\n\nexport default sagas;\n","export const DnsWizardActionTypes = {\n DEFAULT: 'DNS_WIZARD_DEFAULT',\n\n GET_HOSTING_PLATFORMS_REQUEST: 'GET_HOSTING_PLATFORMS_REQUEST',\n GET_HOSTING_PLATFORMS_SUCCESS: 'GET_HOSTING_PLATFORMS_SUCCESS',\n GET_HOSTING_PLATFORMS_FAILURE: 'GET_HOSTING_PLATFORMS_FAILURE',\n SET_HOSTING_PLATFORMS: 'SET_HOSTING_PLATFORMS',\n\n GET_EMAIL_PLATFORMS_REQUEST: 'GET_EMAIL_PLATFORMS_REQUEST',\n GET_EMAIL_PLATFORMS_SUCCESS: 'GET_EMAIL_PLATFORMS_SUCCESS',\n GET_EMAIL_PLATFORMS_FAILURE: 'GET_EMAIL_PLATFORMS_FAILURE',\n SET_EMAIL_PLATFORMS: 'SET_EMAIL_PLATFORMS',\n\n REQUEST_SETTED_EMAIL_PLATFORM: 'REQUEST_SETTED_EMAIL_PLATFORM',\n REQUEST_SETTED_EMAIL_PLATFORM_SUCCESS: 'REQUEST_SETTED_EMAIL_PLATFORM_SUCCESS',\n REQUEST_SETTED_EMAIL_PLATFORM_FAILURE: 'REQUEST_SETTED_EMAIL_PLATFORM_FAILURE',\n SET_CURRENT_EMAIL_PLATAFORM: 'SET_CURRENT_EMAIL_PLATAFORM',\n\n PUT_CONFIGURE_HOSTGATOR_HOSTING_PLAN_REQUEST: 'PUT_CONFIGURE_HOSTGATOR_HOSTING_PLAN_REQUEST',\n PUT_CONFIGURE_HOSTGATOR_HOSTING_PLAN_SUCCESS: 'PUT_CONFIGURE_HOSTGATOR_HOSTING_PLAN_SUCCESS',\n PUT_CONFIGURE_HOSTGATOR_HOSTING_PLAN_FAILURE: 'PUT_CONFIGURE_HOSTGATOR_HOSTING_PLAN_FAILURE',\n\n PUT_CONFIGURE_CUSTOM_DNS_REQUEST: 'PUT_CONFIGURE_CUSTOM_DNS_REQUEST',\n PUT_CONFIGURE_CUSTOM_DNS_SUCCESS: 'PUT_CONFIGURE_CUSTOM_DNS_SUCCESS',\n PUT_CONFIGURE_CUSTOM_DNS_FAILURE: 'PUT_CONFIGURE_CUSTOM_DNS_FAILURE',\n\n PUT_CONFIGURE_EXTERNAL_PLATFORM_REQUEST: 'PUT_CONFIGURE_EXTERNAL_PLATFORM_REQUEST',\n PUT_CONFIGURE_EXTERNAL_PLATFORM_SUCCESS: 'PUT_CONFIGURE_EXTERNAL_PLATFORM_SUCCESS',\n PUT_CONFIGURE_EXTERNAL_PLATFORM_FAILURE: 'PUT_CONFIGURE_EXTERNAL_PLATFORM_FAILURE',\n\n PUT_CONFIGURE_CUSTOM_DNS_ZONE_REQUEST: 'PUT_CONFIGURE_CUSTOM_DNS_ZONE_REQUEST',\n PUT_CONFIGURE_CUSTOM_DNS_ZONE_SUCCESS: 'PUT_CONFIGURE_CUSTOM_DNS_ZONE_SUCCESS',\n PUT_CONFIGURE_CUSTOM_DNS_ZONE_FAILURE: 'PUT_CONFIGURE_CUSTOM_DNS_ZONE_FAILURE',\n\n PUT_CONFIGURE_CUSTOM_DNS_ZONE_FROM_PLAN_REQUEST: 'PUT_CONFIGURE_CUSTOM_DNS_ZONE_FROM_PLAN_REQUEST',\n PUT_CONFIGURE_CUSTOM_DNS_ZONE_FROM_PLAN_SUCCESS: 'PUT_CONFIGURE_CUSTOM_DNS_ZONE_FROM_PLAN_SUCCESS',\n PUT_CONFIGURE_CUSTOM_DNS_ZONE_FROM_PLAN_FAILURE: 'PUT_CONFIGURE_CUSTOM_DNS_ZONE_FROM_PLAN_FAILURE',\n\n PUT_CONFIGURE_EMAIL_PLATFORM_REQUEST: 'PUT_CONFIGURE_EMAIL_PLATFORM_REQUEST',\n PUT_CONFIGURE_EMAIL_PLATFORM_SUCCESS: 'PUT_CONFIGURE_EMAIL_PLATFORM_SUCCESS',\n PUT_CONFIGURE_EMAIL_PLATFORM_FAILURE: 'PUT_CONFIGURE_EMAIL_PLATFORM_FAILURE',\n\n PUT_SKIP_WIZARD_REQUEST: 'PUT_SKIP_WIZARD_REQUEST',\n PUT_SKIP_WIZARD_SUCCESS: 'PUT_SKIP_WIZARD_SUCCESS',\n PUT_SKIP_WIZARD_FAILURE: 'PUT_SKIP_WIZARD_FAILURE',\n\n GET_DNS_ZONES_REQUEST: 'GET_DNS_ZONES_REQUEST',\n GET_DNS_ZONES_SUCCESS: 'GET_DNS_ZONES_SUCCESS',\n GET_DNS_ZONES_FAILURE: 'GET_DNS_ZONES_FAILURE',\n SET_DNS_ZONES: 'SET_DNS_ZONES',\n\n SET_EXTERNAL_PLATFORM_CONFIGURATION: 'SET_EXTERNAL_PLATFORM_CONFIGURATION',\n SET_HOSTING_CONFIGURATION: 'SET_HOSTING_CONFIGURATION',\n SET_SELECTED_CONFIGURATION: 'SET_SELECTED_CONFIGURATION',\n SET_CUSTOM_DNS_CONFIGURATION: 'SET_CUSTOM_DNS_CONFIGURATION',\n SET_CUSTOM_DNS_ZONE_CONFIGURATION: 'SET_CUSTOM_DNS_ZONE_CONFIGURATION',\n SET_CHANGED_PLAN: 'SET_CHANGED_PLAN',\n SET_RESERVED_NS: 'SET_RESERVED_NS',\n\n RESET_CUSTOM_DNS_CONFIGURATION: 'RESET_CUSTOM_DNS_CONFIGURATION',\n\n SET_PROPAGATING_STATUS: 'SET_PROPAGATING_STATUS',\n};\n","import { DnsWizardActionTypes } from './dnsWizard.types';\n\nconst getHostingPlatformsRequest = domainId => ({ type: DnsWizardActionTypes.GET_HOSTING_PLATFORMS_REQUEST, domainId });\nconst getHostingPlatformsSuccess = () => ({ type: DnsWizardActionTypes.GET_HOSTING_PLATFORMS_SUCCESS });\nconst getHostingPlatformsFailure = () => ({ type: DnsWizardActionTypes.GET_HOSTING_PLATFORMS_FAILURE });\n\nconst configureForHostGatorHostingPlanRequest = (domainId, body) => ({ type: DnsWizardActionTypes.PUT_CONFIGURE_HOSTGATOR_HOSTING_PLAN_REQUEST, domainId, body });\nconst configureForHostGatorHostingPlanSuccess = () => ({ type: DnsWizardActionTypes.PUT_CONFIGURE_HOSTGATOR_HOSTING_PLAN_SUCCESS });\nconst configureForHostGatorHostingPlanFailure = () => ({ type: DnsWizardActionTypes.PUT_CONFIGURE_HOSTGATOR_HOSTING_PLAN_FAILURE });\n\nconst configureForCustomDnsRequest = (domainId, body) => ({ type: DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_REQUEST, domainId, body });\nconst configureForCustomDnsSuccess = () => ({ type: DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_SUCCESS });\nconst configureForCustomDnsFailure = () => ({ type: DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_FAILURE });\n\nconst skipWizardSetToReserved = () => ({ type: DnsWizardActionTypes.SET_RESERVED_NS });\n\nconst configureForExternalPlatformRequest = (domainId, body) => ({ type: DnsWizardActionTypes.PUT_CONFIGURE_EXTERNAL_PLATFORM_REQUEST, domainId, body });\nconst configureForExternalPlatformSuccess = () => ({ type: DnsWizardActionTypes.PUT_CONFIGURE_EXTERNAL_PLATFORM_SUCCESS });\nconst configureForExternalPlatformFailure = () => ({ type: DnsWizardActionTypes.PUT_CONFIGURE_EXTERNAL_PLATFORM_FAILURE });\n\nconst configureForCustomDnsZoneRequest = (domainId, platformId, platformName) => ({\n type: DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_ZONE_REQUEST, domainId, platformId, platformName,\n});\nconst configureForCustomDnsZoneFromPlanRequest = (domainId, platformId, platformName) => ({\n type: DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_ZONE_FROM_PLAN_REQUEST, domainId, platformId, platformName,\n});\n\nconst configureForCustomDnsZoneSuccess = platformName => ({ type: DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_ZONE_SUCCESS, platformName });\nconst configureForCustomDnsZoneFromPlanSuccess = platformName => ({ type: DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_ZONE_FROM_PLAN_SUCCESS, platformName });\nconst configureForCustomDnsZoneFailure = () => ({ type: DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_ZONE_FAILURE });\nconst configureForCustomDnsZoneFromPlanFailure = () => ({ type: DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_ZONE_FROM_PLAN_FAILURE });\n\nconst skipWizardRequest = domainId => ({ type: DnsWizardActionTypes.PUT_SKIP_WIZARD_REQUEST, domainId });\nconst skipWizardSuccess = () => ({ type: DnsWizardActionTypes.PUT_SKIP_WIZARD_SUCCESS });\nconst skipWizardFailure = () => ({ type: DnsWizardActionTypes.PUT_SKIP_WIZARD_FAILURE });\n\nconst dnsZonesRequest = domain => ({ type: DnsWizardActionTypes.GET_DNS_ZONES_REQUEST, domain });\nconst dnsZonesSuccess = () => ({ type: DnsWizardActionTypes.GET_DNS_ZONES_SUCCESS });\nconst dnsZonesFailure = () => ({ type: DnsWizardActionTypes.GET_DNS_ZONES_FAILURE });\n\nconst getEmailPlatformsRequest = domainId => ({ type: DnsWizardActionTypes.GET_EMAIL_PLATFORMS_REQUEST, domainId });\nconst getEmailPlatformsSuccess = () => ({ type: DnsWizardActionTypes.GET_EMAIL_PLATFORMS_SUCCESS });\nconst getEmailPlatformsFailure = () => ({ type: DnsWizardActionTypes.GET_EMAIL_PLATFORMS_FAILURE });\n\nconst putEmailPlatformRequest = (domainId, platformId) => ({\n type: DnsWizardActionTypes.PUT_CONFIGURE_EMAIL_PLATFORM_REQUEST, domainId, platformId,\n});\nconst putEmailPlatformSuccess = () => ({ type: DnsWizardActionTypes.PUT_CONFIGURE_EMAIL_PLATFORM_SUCCESS });\nconst putEmailPlatformFailure = () => ({ type: DnsWizardActionTypes.PUT_CONFIGURE_EMAIL_PLATFORM_FAILURE });\n\nconst resetCustomDnsConfiguration = () => ({ type: DnsWizardActionTypes.RESET_CUSTOM_DNS_CONFIGURATION });\n\nconst changedPlan = () => ({ type: DnsWizardActionTypes.SET_CHANGED_PLAN });\n\nconst setHostingPlatforms = (dnsWizard = []) => ({\n type: DnsWizardActionTypes.SET_HOSTING_PLATFORMS,\n payload: {\n dnsWizard,\n },\n});\n\nconst setEmailPlatforms = (emailPlatforms = []) => ({\n type: DnsWizardActionTypes.SET_EMAIL_PLATFORMS,\n payload: {\n emailPlatforms,\n },\n});\n\nconst getEmailPlataform = ({ domainId }) => ({\n type: DnsWizardActionTypes.REQUEST_SETTED_EMAIL_PLATFORM,\n payload: domainId,\n});\n\nconst getEmailPlataformSuccess = () => ({\n type: DnsWizardActionTypes.REQUEST_SETTED_EMAIL_PLATFORM_SUCCESS,\n});\n\nconst getEmailPlataformFailure = () => ({\n type: DnsWizardActionTypes.REQUEST_SETTED_EMAIL_PLATFORM_SUCCESS,\n});\n\nconst setCurrentEmailPlataform = payload => ({\n type: DnsWizardActionTypes.SET_CURRENT_EMAIL_PLATAFORM,\n payload,\n});\n\nconst setHostingConfiguration = (configuration = []) => ({\n type: DnsWizardActionTypes.SET_HOSTING_CONFIGURATION,\n payload: {\n configuration,\n },\n});\n\nconst setCustomDnsConfiguration = (configuration = []) => ({\n type: DnsWizardActionTypes.SET_CUSTOM_DNS_CONFIGURATION,\n payload: {\n configuration,\n },\n});\n\nconst setExternalPlatform = (platformName, configuration = []) => ({\n type: DnsWizardActionTypes.SET_EXTERNAL_PLATFORM_CONFIGURATION,\n payload: {\n configuration,\n platformName,\n },\n});\n\nconst setCustomDnsZoneConfiguration = (configuration = []) => ({\n type: DnsWizardActionTypes.SET_CUSTOM_DNS_ZONE_CONFIGURATION,\n payload: {\n configuration,\n },\n});\n\nconst setSelectedConfiguration = (selectedConfiguration = {}) => ({\n type: DnsWizardActionTypes.SET_SELECTED_CONFIGURATION,\n payload: {\n selectedConfiguration,\n },\n});\n\nconst setDnsZones = (dnsZones = {}) => ({\n type: DnsWizardActionTypes.SET_DNS_ZONES,\n payload: {\n dnsZones,\n },\n});\n\nconst setPropagatingStatus = propagating => ({\n type: DnsWizardActionTypes.SET_PROPAGATING_STATUS,\n payload: propagating,\n});\n\nconst actions = {\n platforms: {\n failure: getHostingPlatformsFailure,\n request: getHostingPlatformsRequest,\n set: setHostingPlatforms,\n success: getHostingPlatformsSuccess,\n },\n hostGatorPlanConfiguration: {\n failure: configureForHostGatorHostingPlanFailure,\n request: configureForHostGatorHostingPlanRequest,\n set: setHostingConfiguration,\n success: configureForHostGatorHostingPlanSuccess,\n },\n customConfiguration: {\n failure: configureForCustomDnsFailure,\n request: configureForCustomDnsRequest,\n set: setCustomDnsConfiguration,\n success: configureForCustomDnsSuccess,\n },\n customDnsZoneConfiguration: {\n failure: configureForCustomDnsZoneFailure,\n request: configureForCustomDnsZoneRequest,\n set: setCustomDnsZoneConfiguration,\n success: configureForCustomDnsZoneSuccess,\n },\n customDnsZoneFromPlanConfiguration: {\n failure: configureForCustomDnsZoneFromPlanFailure,\n request: configureForCustomDnsZoneFromPlanRequest,\n set: setCustomDnsZoneConfiguration,\n success: configureForCustomDnsZoneFromPlanSuccess,\n },\n defineConfiguration: {\n set: setSelectedConfiguration,\n },\n skipWizard: {\n failure: skipWizardFailure,\n request: skipWizardRequest,\n success: skipWizardSuccess,\n set: skipWizardSetToReserved,\n },\n dnsZones: {\n failure: dnsZonesFailure,\n request: dnsZonesRequest,\n success: dnsZonesSuccess,\n set: setDnsZones,\n },\n changedPlan: {\n request: changedPlan,\n },\n customDnsConfiguration: {\n reset: resetCustomDnsConfiguration,\n },\n externalConfiguration: {\n failure: configureForExternalPlatformFailure,\n request: configureForExternalPlatformRequest,\n success: configureForExternalPlatformSuccess,\n set: setExternalPlatform,\n },\n emailPlatforms: {\n request: getEmailPlatformsRequest,\n failure: getEmailPlatformsFailure,\n success: getEmailPlatformsSuccess,\n set: setEmailPlatforms,\n getSettedPlataform: getEmailPlataform,\n getEmailPlataformSuccess,\n getEmailPlataformFailure,\n setCurrentEmailPlataform,\n },\n propagatingStatus: {\n set: setPropagatingStatus,\n },\n emailPlatformsConfiguration: {\n request: putEmailPlatformRequest,\n failure: putEmailPlatformFailure,\n success: putEmailPlatformSuccess,\n },\n};\n\nexport default actions;\n","import { DnsWizardActionTypes } from './dnsWizard.types';\n\nimport { RESERVED_NAME_SERVERS } from '@/enums/domains/dns.enum';\n\nconst baseDns = {\n ns: '',\n ip: '',\n valid: false,\n required: false,\n};\n\nexport const initialState = {\n controls: {\n pageLoading: true,\n domainConfigurationLoading: false,\n hasAvailableHostGatorPlan: false,\n emailsPlatformsLoading: false,\n settedEmailPlataformLoading: false,\n emailsConfigurationLoading: false,\n skippedWizard: false,\n changedPlan: false,\n hasHostGatorPlan: false,\n upgradablePlanId: null,\n },\n hostingPlatforms: {\n platforms: [],\n emailPlatforms: [],\n selectedEmailPlatform: '',\n hostingId: null,\n reserved: null,\n },\n hostGatorAvailablePlans: {\n hostingPlans: [],\n },\n domain: {\n name: null,\n registrar: null,\n platformName: null,\n nameServers: [],\n planDetails: {},\n records: [],\n configurationStatus: {\n isPropagationPeriod: true,\n wasRecentlyConfigured: false,\n isConfiguredThroughWizard: false,\n isConfiguredInHostGator: false,\n isConfiguredInHostGatorWithHostingPlan: false,\n isConfiguredInHostGatorWithCustomDnsZone: false,\n propagating: false,\n },\n proEmail: {\n id: 0,\n isDomainConfigured: false,\n },\n },\n selectedConfiguration: {\n hostingId: null,\n },\n customDnsOptions: {\n master: { ...baseDns, required: true },\n slave1: { ...baseDns, required: true },\n slave2: { ...baseDns },\n slave3: { ...baseDns },\n slave4: { ...baseDns },\n },\n};\n\nconst dnsWizardReducer = (state = initialState, action = DnsWizardActionTypes.DEFAULT) => {\n switch (action.type) {\n case DnsWizardActionTypes.GET_EMAIL_PLATFORMS_REQUEST: {\n return {\n ...state,\n controls: {\n ...state.controls,\n emailsPlatformsLoading: true,\n },\n };\n }\n case DnsWizardActionTypes.REQUEST_SETTED_EMAIL_PLATFORM: {\n return {\n ...state,\n controls: {\n ...state.controls,\n settedEmailPlataformLoading: true,\n },\n hostingPlatforms: {\n ...state.hostingPlatforms,\n selectedEmailPlatform: '',\n },\n };\n }\n case DnsWizardActionTypes.REQUEST_SETTED_EMAIL_PLATFORM_SUCCESS:\n case DnsWizardActionTypes.REQUEST_SETTED_EMAIL_PLATFORM_FAILURE: {\n return {\n ...state,\n controls: {\n ...state.controls,\n settedEmailPlataformLoading: false,\n },\n };\n }\n case DnsWizardActionTypes.SET_CURRENT_EMAIL_PLATAFORM: {\n return {\n ...state,\n controls: {\n ...state.controls,\n settedEmailPlataformLoading: false,\n },\n hostingPlatforms: {\n ...state.hostingPlatforms,\n selectedEmailPlatform: action.payload.platform_name,\n hostingId: action.payload.hosting_id,\n reserved: action.payload.reserved,\n },\n };\n }\n case DnsWizardActionTypes.GET_EMAIL_PLATFORMS_SUCCESS:\n case DnsWizardActionTypes.GET_EMAIL_PLATFORMS_FAILURE: {\n return {\n ...state,\n controls: {\n ...state.controls,\n emailsPlatformsLoading: false,\n },\n };\n }\n case DnsWizardActionTypes.GET_HOSTING_PLATFORMS_REQUEST: {\n return {\n ...state,\n controls: {\n ...state.controls,\n pageLoading: true,\n domainConfigurationLoading: false,\n hasHostGatorPlan: false,\n upgradablePlanId: null,\n hasAvailableHostGatorPlan: false,\n skippedWizard: false,\n },\n hostingPlatforms: {\n ...state.hostingPlatforms,\n },\n domain: {\n ...state.domain,\n name: null,\n configurationStatus: {\n ...state.domain.configurationStatus,\n wasRecentlyConfigured: false,\n isConfiguredThroughWizard: false,\n isConfiguredInHostGator: false,\n isConfiguredInHostGatorWithHostingPlan: false,\n isConfiguredInHostGatorWithCustomDnsZone: false,\n },\n },\n };\n }\n case DnsWizardActionTypes.GET_HOSTING_PLATFORMS_FAILURE:\n {\n return {\n ...state,\n controls: {\n ...state.controls,\n pageLoading: false,\n },\n hostingPlatforms: {\n ...state.hostingPlatforms,\n loading: false,\n },\n };\n }\n case DnsWizardActionTypes.GET_HOSTING_PLATFORMS_SUCCESS: {\n return {\n ...state,\n };\n }\n case DnsWizardActionTypes.SET_EMAIL_PLATFORMS: {\n return {\n ...state,\n hostingPlatforms: {\n ...state.hostingPlatforms,\n emailPlatforms: action.payload.emailPlatforms.availableEmailPlatforms,\n },\n domain: {\n ...state.domain,\n configurationStatus: {\n ...state.domain.configurationStatus,\n propagating: action.payload.emailPlatforms.configurationStatus.propagating,\n },\n proEmail: action.payload.emailPlatforms.proEmail,\n },\n };\n }\n case DnsWizardActionTypes.SET_HOSTING_PLATFORMS: {\n return {\n ...state,\n controls: {\n ...state.controls,\n pageLoading: false,\n hasAvailableHostGatorPlan: action.payload.dnsWizard.hostingPlanStatus.hasAvailableHostGatorPlan,\n hasHostGatorPlan: action.payload.dnsWizard.hostingPlanStatus.hasHostGatorPlan,\n upgradablePlanId: action.payload.dnsWizard.hostingPlanStatus.upgradablePlanId,\n },\n domain: {\n ...state.domain,\n name: action.payload.dnsWizard.domain,\n registrar: action.payload.dnsWizard.registrar,\n platformName: action.payload.dnsWizard.platformName,\n planDetails: { ...action.payload.dnsWizard.planDetails },\n nameServers: action.payload.dnsWizard.nameServers,\n configurationStatus: {\n ...state.domain.configurationStatus,\n isConfiguredThroughWizard: action.payload.dnsWizard.configurationStatus.isConfiguredThroughWizard || false,\n isPropagationPeriod: action.payload.dnsWizard.configurationStatus.isPropagationPeriod || false,\n isConfiguredInHostGator: action.payload.dnsWizard.configurationStatus.isConfiguredInHostGator || false,\n isConfiguredInHostGatorWithHostingPlan: action.payload.dnsWizard.configurationStatus.isConfiguredInHostGatorWithHostingPlan || false,\n isConfiguredInHostGatorWithCustomDnsZone: action.payload.dnsWizard.configurationStatus.isConfiguredInHostGatorWithCustomDnsZone || false,\n },\n },\n hostingPlatforms: {\n ...state.hostingPlatforms,\n platforms: action.payload.dnsWizard.availablePlatforms,\n },\n hostGatorAvailablePlans: {\n ...state.hostGatorAvailablePlans,\n hostingPlans: action.payload.dnsWizard.hostingPlanStatus.availablePlans,\n },\n };\n }\n case DnsWizardActionTypes.PUT_SKIP_WIZARD_REQUEST:\n case DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_REQUEST:\n case DnsWizardActionTypes.PUT_CONFIGURE_EXTERNAL_PLATFORM_REQUEST:\n case DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_ZONE_REQUEST:\n case DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_ZONE_FROM_PLAN_REQUEST:\n case DnsWizardActionTypes.PUT_CONFIGURE_HOSTGATOR_HOSTING_PLAN_REQUEST: {\n return {\n ...state,\n controls: {\n ...state.controls,\n domainConfigurationLoading: true,\n changedPlan: false,\n },\n };\n }\n case DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_FAILURE:\n case DnsWizardActionTypes.PUT_CONFIGURE_EXTERNAL_PLATFORM_FAILURE:\n case DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_ZONE_FAILURE:\n case DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_ZONE_FROM_PLAN_FAILURE:\n case DnsWizardActionTypes.PUT_CONFIGURE_HOSTGATOR_HOSTING_PLAN_FAILURE: {\n return {\n ...state,\n controls: {\n ...state.controls,\n domainConfigurationLoading: false,\n },\n };\n }\n case DnsWizardActionTypes.PUT_CONFIGURE_HOSTGATOR_HOSTING_PLAN_SUCCESS: {\n return {\n ...state,\n domain: {\n ...state.domain,\n planDetails: state.selectedConfiguration.selectedPlan,\n configurationStatus: {\n ...state.domain.configurationStatus,\n },\n },\n };\n }\n case DnsWizardActionTypes.SET_HOSTING_CONFIGURATION: {\n return {\n ...state,\n controls: {\n ...state.controls,\n domainConfigurationLoading: false,\n skippedWizard: false,\n },\n domain: {\n ...state.domain,\n configurationStatus: {\n ...state.domain.configurationStatus,\n wasRecentlyConfigured: true,\n isConfiguredThroughWizard: true,\n isConfiguredInHostGatorWithHostingPlan: true,\n isConfiguredInHostGator: true,\n isConfiguredInHostGatorWithCustomDnsZone: false,\n },\n },\n };\n }\n case DnsWizardActionTypes.SET_SELECTED_CONFIGURATION: {\n return {\n ...state,\n domain: {\n ...state.domain,\n },\n selectedConfiguration: action.payload.selectedConfiguration,\n };\n }\n case DnsWizardActionTypes.PUT_SKIP_WIZARD_SUCCESS: {\n return {\n ...state,\n controls: {\n ...state.controls,\n skippedWizard: true,\n domainConfigurationLoading: false,\n },\n domain: {\n ...state.domain,\n nameServers: [\n RESERVED_NAME_SERVERS.MASTER,\n RESERVED_NAME_SERVERS.SLAVE,\n ],\n planDetails: {},\n configurationStatus: {\n ...state.domain.configurationStatus,\n wasRecentlyConfigured: true,\n isConfiguredThroughWizard: true,\n isConfiguredInHostGator: true,\n isConfiguredInHostGatorWithHostingPlan: false,\n isConfiguredInHostGatorWithCustomDnsZone: false,\n },\n },\n };\n }\n case DnsWizardActionTypes.SET_RESERVED_NS: {\n return {\n ...state,\n domain: {\n ...state.domain,\n nameServers: [\n RESERVED_NAME_SERVERS.MASTER,\n RESERVED_NAME_SERVERS.SLAVE,\n ],\n },\n };\n }\n case DnsWizardActionTypes.PUT_CONFIGURE_EXTERNAL_PLATFORM_SUCCESS:\n case DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_SUCCESS: {\n return {\n ...state,\n controls: {\n ...state.controls,\n skippedWizard: false,\n domainConfigurationLoading: false,\n },\n domain: {\n ...state.domain,\n planDetails: {},\n configurationStatus: {\n ...state.domain.configurationStatus,\n wasRecentlyConfigured: true,\n isConfiguredThroughWizard: true,\n isConfiguredInHostGator: false,\n isConfiguredInHostGatorWithHostingPlan: false,\n isConfiguredInHostGatorWithCustomDnsZone: false,\n },\n },\n };\n }\n case DnsWizardActionTypes.SET_CUSTOM_DNS_CONFIGURATION: {\n return {\n ...state,\n controls: {\n ...state.controls,\n domainConfigurationLoading: false,\n skippedWizard: false,\n },\n domain: {\n ...state.domain,\n nameServers: action.payload.configuration.nameServers,\n platformName: null,\n },\n };\n }\n case DnsWizardActionTypes.SET_EXTERNAL_PLATFORM_CONFIGURATION: {\n return {\n ...state,\n controls: {\n ...state.controls,\n domainConfigurationLoading: false,\n skippedWizard: false,\n },\n domain: {\n ...state.domain,\n nameServers: action.payload.configuration.nameServers,\n platformName: action.payload.platformName,\n },\n };\n }\n case DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_ZONE_SUCCESS: {\n return {\n ...state,\n controls: {\n ...state.controls,\n skippedWizard: false,\n domainConfigurationLoading: false,\n },\n domain: {\n ...state.domain,\n platformName: action.platformName,\n planDetails: {},\n configurationStatus: {\n ...state.domain.configurationStatus,\n wasRecentlyConfigured: true,\n isConfiguredThroughWizard: true,\n isConfiguredInHostGator: true,\n isConfiguredInHostGatorWithHostingPlan: false,\n isConfiguredInHostGatorWithCustomDnsZone: true,\n },\n },\n };\n }\n case DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_ZONE_FROM_PLAN_SUCCESS: {\n return {\n ...state,\n controls: {\n ...state.controls,\n skippedWizard: false,\n domainConfigurationLoading: false,\n },\n domain: {\n ...state.domain,\n platformName: action.platformName,\n configurationStatus: {\n ...state.domain.configurationStatus,\n wasRecentlyConfigured: true,\n isConfiguredThroughWizard: true,\n isConfiguredInHostGator: true,\n isConfiguredInHostGatorWithHostingPlan: true,\n isConfiguredInHostGatorWithCustomDnsZone: true,\n },\n },\n };\n }\n case DnsWizardActionTypes.GET_DNS_ZONES_REQUEST: {\n return {\n ...state,\n domain: {\n ...state.domain,\n records: [],\n },\n };\n }\n case DnsWizardActionTypes.SET_DNS_ZONES: {\n return {\n ...state,\n domain: {\n ...state.domain,\n records: action.payload.dnsZones.records,\n },\n };\n }\n case DnsWizardActionTypes.SET_CHANGED_PLAN: {\n return {\n ...state,\n controls: {\n ...state.controls,\n changedPlan: true,\n },\n };\n }\n case DnsWizardActionTypes.RESET_CUSTOM_DNS_CONFIGURATION: {\n return {\n ...state,\n customDnsOptions: {\n ...initialState.customDnsOptions,\n },\n };\n }\n case DnsWizardActionTypes.PUT_CONFIGURE_EMAIL_PLATFORM_REQUEST: {\n return {\n ...state,\n controls: {\n ...state.controls,\n emailsConfigurationLoading: true,\n },\n domain: {\n ...state.domain,\n configurationStatus: {\n ...state.domain.configurationStatus,\n propagating: true,\n },\n },\n };\n }\n case DnsWizardActionTypes.PUT_CONFIGURE_EMAIL_PLATFORM_SUCCESS:\n case DnsWizardActionTypes.PUT_CONFIGURE_EMAIL_PLATFORM_FAILURE: {\n return {\n ...state,\n controls: {\n ...state.controls,\n emailsConfigurationLoading: false,\n },\n };\n }\n default: {\n return state;\n }\n }\n};\n\nexport default dnsWizardReducer;\n","\nconst receivePlatforms = (rawData) => {\n const {\n domain, registrar, planDetails, configurationStatus, hostingPlanStatus, availablePlatforms, nameServers, platformName,\n } = rawData.data;\n\n return {\n domain,\n registrar,\n planDetails,\n nameServers,\n hostingPlanStatus,\n configurationStatus,\n availablePlatforms,\n platformName,\n };\n};\n\nconst receiveEmailPlatforms = (rawData) => {\n const { availableEmailPlatforms, configurationStatus, proEmail } = rawData.data;\n\n return { availableEmailPlatforms, configurationStatus, proEmail };\n};\nconst receiveConfiguration = rawData => ({\n ...rawData.data,\n});\n\nconst receiveDnsZones = (rawData) => {\n const {\n records,\n } = rawData.data;\n\n return {\n records,\n };\n};\n\nconst trimNameServers = (rawData) => {\n const nameServers = [];\n Object.keys(rawData).forEach((key) => {\n if (key !== 'platformName' && key !== 'platformId') {\n nameServers.push(rawData[key].host);\n }\n });\n return { nameServers: nameServers.filter(elem => elem !== '') };\n};\n\nconst receiveEmailPlataform = rawData => rawData.data.data.data;\n\nconst assembly = {\n receiveConfiguration,\n receiveDnsZones,\n receiveEmailPlatforms,\n receivePlatforms,\n trimNameServers,\n receiveEmailPlataform,\n};\n\nexport default assembly;\n","import React from 'react';\nimport {\n call, takeLatest, put, select,\n} from 'redux-saga/effects';\nimport { api } from '@/utils/api';\nimport { authActions } from '@/redux/modules/auth';\nimport { commonActions } from '@/redux/modules/common';\nimport { locale } from '@/utils/locale';\nimport dnsWizardAssembly from './dnsWizard.assembly';\nimport dnsWizardActions from './dnsWizard.actions';\nimport { DnsWizardActionTypes } from './dnsWizard.types';\n\nfunction* getHostingPlatforms(action) {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `api/v2/clientarea/br/domains/${action.domainId}/dns`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.whmcs.get, request);\n if (response.data && response.data.data && (response.data.data.result === 'error')) {\n throw locale('domains.dnsWizard.errors.default');\n }\n const platformsData = dnsWizardAssembly.receivePlatforms(response.data);\n yield put(dnsWizardActions.platforms.set(platformsData));\n yield put(dnsWizardActions.platforms.success());\n } catch (e) {\n yield put(commonActions.notifications.set({\n label: ({locale('domains.dnsWizard.errors.default')}
),\n type: 'error',\n }));\n yield put(dnsWizardActions.platforms.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* getEmailPlatforms(action) {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `api/v2/clientarea/br/domains/${action.domainId}/mail`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n try {\n const response = yield call(api.whmcs.get, request);\n if (response.data && response.data.data && (response.data.data.result === 'error')) {\n throw locale('domains.dnsWizard.errors.default');\n }\n const emailsPlatformsData = dnsWizardAssembly.receiveEmailPlatforms(response.data);\n yield put(dnsWizardActions.emailPlatforms.set(emailsPlatformsData));\n yield put(dnsWizardActions.emailPlatforms.success());\n } catch (e) {\n yield put(commonActions.notifications.set({\n label: ({locale('domains.dnsWizard.errors.default')}
),\n type: 'error',\n }));\n yield put(dnsWizardActions.emailPlatforms.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* configureForHostGatorHostingPlan(action) {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `api/v2/clientarea/br/dns/domain/${action.domainId}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n data: action.body,\n };\n\n const markAsPointedRequest = {\n url: `api/v2/clientarea/br/domain/${action.domainId}/dns-pointing-wizard`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.whmcs.put, request);\n if (response.data && response.data.data && (response.data.data.result === 'error')) {\n throw locale('domains.dnsWizard.errors.default');\n }\n yield call(api.whmcs.put, markAsPointedRequest);\n yield getHostingPlatforms(action);\n const data = dnsWizardAssembly.receiveConfiguration(response.data);\n yield put(dnsWizardActions.hostGatorPlanConfiguration.set(data));\n yield put(dnsWizardActions.hostGatorPlanConfiguration.success());\n yield put(dnsWizardActions.changedPlan.request());\n yield put(dnsWizardActions.emailPlatforms.request(action.domainId));\n yield put(dnsWizardActions.emailPlatforms.getSettedPlataform({ domainId: action.domainId }));\n } catch (e) {\n yield put(commonActions.notifications.set({\n label: ({locale('domains.dnsWizard.errors.default')}
),\n type: 'error',\n }));\n yield put(dnsWizardActions.hostGatorPlanConfiguration.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* configureForCustomDns(action) {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `api/v2/clientarea/br/dns/domain/${action.domainId}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n data: action.body,\n };\n\n const markAsPointedRequest = {\n url: `api/v2/clientarea/br/domain/${action.domainId}/dns-pointing-wizard`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.whmcs.put, request);\n\n if (response.data && response.data.data && (response.data.data.result === 'error')) {\n throw locale('domains.dnsWizard.errors.default');\n }\n\n yield call(api.whmcs.put, markAsPointedRequest);\n yield getHostingPlatforms(action);\n\n const data = dnsWizardAssembly.trimNameServers(action.body);\n\n yield put(dnsWizardActions.customConfiguration.set(data));\n yield put(dnsWizardActions.customConfiguration.success());\n yield put(dnsWizardActions.changedPlan.request());\n yield put(dnsWizardActions.emailPlatforms.request(action.domainId));\n yield put(dnsWizardActions.emailPlatforms.getSettedPlataform({ domainId: action.domainId }));\n } catch (e) {\n yield put(commonActions.notifications.set({\n label: ({locale('domains.dnsWizard.errors.default')}
),\n type: 'error',\n }));\n yield put(dnsWizardActions.customConfiguration.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* configureForExternalPlatform(action) {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `api/v2/clientarea/br/dns/domain/${action.domainId}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n data: action.body,\n };\n\n const markAsPointedRequest = {\n url: `api/v2/clientarea/br/domain/${action.domainId}/dns-pointing-wizard`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.whmcs.put, request);\n\n if (response.data && response.data.data && (response.data.data.result === 'error')) {\n throw locale('domains.dnsWizard.errors.default');\n }\n\n yield call(api.whmcs.put, markAsPointedRequest);\n yield getHostingPlatforms(action);\n\n const data = dnsWizardAssembly.trimNameServers(action.body);\n\n yield put(dnsWizardActions.externalConfiguration.set(action.body.platformName, data));\n yield put(dnsWizardActions.externalConfiguration.success());\n yield put(dnsWizardActions.changedPlan.request());\n yield put(dnsWizardActions.emailPlatforms.request(action.domainId));\n yield put(dnsWizardActions.emailPlatforms.getSettedPlataform({ domainId: action.domainId }));\n } catch (e) {\n yield put(commonActions.notifications.set({\n label: ({locale('domains.dnsWizard.errors.default')}
),\n type: 'error',\n }));\n yield put(dnsWizardActions.externalConfiguration.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* configureForCustomDnsZone(action) {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const { domainId, platformId, platformName } = action;\n\n const request = {\n url: `api/v2/clientarea/br/domain/${domainId}/platform/${platformId}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n const markAsPointedRequest = {\n url: `api/v2/clientarea/br/domain/${action.domainId}/dns-pointing-wizard`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.whmcs.post, request);\n\n if (response.data && response.data.data && (response.data.data.result === 'error')) {\n throw locale('domains.dnsWizard.errors.default');\n }\n\n yield call(api.whmcs.put, markAsPointedRequest);\n yield getHostingPlatforms(action);\n\n yield put(dnsWizardActions.customDnsZoneConfiguration.success(platformName));\n yield put(dnsWizardActions.changedPlan.request());\n yield put(dnsWizardActions.emailPlatforms.request(action.domainId));\n yield put(dnsWizardActions.emailPlatforms.getSettedPlataform({ domainId: action.domainId }));\n } catch (e) {\n yield put(commonActions.notifications.set({\n label: ({locale('domains.dnsWizard.errors.default')}
),\n type: 'error',\n }));\n yield put(dnsWizardActions.customDnsZoneConfiguration.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* configureForCustomDnsZoneFromPlan(action) {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const { domainId, platformId, platformName } = action;\n\n const request = {\n url: `api/v2/clientarea/br/domain/${domainId}/platform/${platformId}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n const markAsPointedRequest = {\n url: `api/v2/clientarea/br/domain/${action.domainId}/dns-pointing-wizard`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.whmcs.post, request);\n\n if (response.data && response.data.data && (response.data.data.result === 'error')) {\n throw locale('domains.dnsWizard.errors.default');\n }\n\n yield call(api.whmcs.put, markAsPointedRequest);\n yield getHostingPlatforms(action);\n\n yield put(dnsWizardActions.customDnsZoneFromPlanConfiguration.success(platformName));\n yield put(dnsWizardActions.changedPlan.request());\n yield put(dnsWizardActions.emailPlatforms.request(domainId));\n yield put(dnsWizardActions.emailPlatforms.getSettedPlataform({ domainId }));\n } catch (e) {\n yield put(commonActions.notifications.set({\n label: ({locale('domains.dnsWizard.errors.default')}
),\n type: 'error',\n }));\n yield put(dnsWizardActions.customDnsZoneFromPlanConfiguration.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* skipWizard(action) {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `api/v2/clientarea/br/domain/${action.domainId}/dns-pointing-wizard`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n const requestToReservedNs = {\n url: `api/v2/clientarea/br/dns/domain/${action.domainId}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n data: {\n native: true,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n yield call(api.whmcs.put, request);\n const response = yield call(api.whmcs.put, requestToReservedNs);\n if (response.data && response.data.data && (response.data.data.result === 'error')) {\n throw locale('domains.dnsWizard.errors.default');\n }\n yield put(dnsWizardActions.skipWizard.success());\n yield put(dnsWizardActions.changedPlan.request());\n yield getHostingPlatforms(action);\n yield put(dnsWizardActions.emailPlatforms.request(action.domainId));\n yield put(dnsWizardActions.emailPlatforms.getSettedPlataform({ domainId: action.domainId }));\n } catch (e) {\n yield put(commonActions.notifications.set({\n label: ({locale('domains.dnsWizard.errors.default')}
),\n type: 'error',\n }));\n yield put(dnsWizardActions.skipWizard.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* getDnsZones(action) {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `dns/${action.domain}/zone`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.aws.get, request);\n const dnsZonesData = dnsWizardAssembly.receiveDnsZones(response);\n yield put(dnsWizardActions.dnsZones.set(dnsZonesData));\n yield put(dnsWizardActions.dnsZones.success());\n } catch (e) {\n yield put(commonActions.notifications.set({\n label: ({locale('domains.dnsWizard.errors.default')}
),\n type: 'error',\n }));\n yield put(dnsWizardActions.dnsZones.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* configureEmailPlatform(action) {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const { domainId, platformId } = action;\n\n const request = {\n url: `api/v2/clientarea/br/domain/${domainId}/mail/${platformId}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.whmcs.post, request);\n\n if (response.data && response.data.data && (response.data.data.result === 'error')) {\n throw locale('domains.dnsWizard.errors.default');\n }\n\n yield put(dnsWizardActions.emailPlatformsConfiguration.success());\n\n yield put(dnsWizardActions.emailPlatforms.request(domainId));\n yield put(dnsWizardActions.emailPlatforms.getSettedPlataform({ domainId: action.domainId }));\n } catch (e) {\n yield put(commonActions.notifications.set({\n label: ({locale('domains.dnsWizard.errors.default')}
),\n type: 'error',\n }));\n yield put(dnsWizardActions.emailPlatformsConfiguration.failure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* requestEmailPlataform(action) {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const { payload } = action;\n\n const request = {\n url: `api/v2/clientarea/br/domain/${payload}/platform`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n };\n\n yield put(commonActions.loading.set(true));\n\n try {\n const response = yield call(api.whmcs.get, request);\n const emailPlataform = dnsWizardAssembly.receiveEmailPlataform(response);\n\n yield put(dnsWizardActions.emailPlatforms.getEmailPlataformSuccess());\n yield put(dnsWizardActions.emailPlatforms.setCurrentEmailPlataform(emailPlataform)); // update email plaformf\n } catch (e) {\n yield put(dnsWizardActions.emailPlatforms.getEmailPlataformFailure());\n }\n\n yield put(commonActions.loading.set(false));\n}\n\nfunction* sagas() {\n yield takeLatest(DnsWizardActionTypes.GET_HOSTING_PLATFORMS_REQUEST, getHostingPlatforms);\n yield takeLatest(DnsWizardActionTypes.PUT_CONFIGURE_HOSTGATOR_HOSTING_PLAN_REQUEST, configureForHostGatorHostingPlan);\n yield takeLatest(DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_REQUEST, configureForCustomDns);\n yield takeLatest(DnsWizardActionTypes.PUT_CONFIGURE_EXTERNAL_PLATFORM_REQUEST, configureForExternalPlatform);\n yield takeLatest(DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_ZONE_REQUEST, configureForCustomDnsZone);\n yield takeLatest(DnsWizardActionTypes.PUT_CONFIGURE_CUSTOM_DNS_ZONE_FROM_PLAN_REQUEST, configureForCustomDnsZoneFromPlan);\n yield takeLatest(DnsWizardActionTypes.PUT_SKIP_WIZARD_REQUEST, skipWizard);\n yield takeLatest(DnsWizardActionTypes.GET_DNS_ZONES_REQUEST, getDnsZones);\n yield takeLatest(DnsWizardActionTypes.GET_EMAIL_PLATFORMS_REQUEST, getEmailPlatforms);\n yield takeLatest(DnsWizardActionTypes.REQUEST_SETTED_EMAIL_PLATFORM, requestEmailPlataform);\n yield takeLatest(DnsWizardActionTypes.PUT_CONFIGURE_EMAIL_PLATFORM_REQUEST, configureEmailPlatform);\n}\n\nexport default sagas;\n","export const SitesActionTypes = {\n // LOADING\n SET_LOADING: 'SET_LOADING',\n SET_LOADING_EXCLUSION: 'SET_LOADING_EXCLUSION',\n SET_LOADING_TLDS: 'SET_LOADING_TLDS',\n SET_LOADING_DOMAINS: 'SET_LOADING_DOMAINS',\n SET_LOADING_PLANS: 'SET_LOADING_PLANS',\n SET_LOADING_SITES: 'SET_LOADING_SITES',\n SET_LOADING_SSL_VERIFICATION: 'SET_LOADING_SSL_VERIFICATION',\n SET_LOADING_DOMAIN_VALIDATION: 'SET_LOADING_DOMAIN_VALIDATION',\n SET_LOADING_REDIRECT: 'SET_LOADING_REDIRECT',\n\n // SITES\n REQUEST_GET_SITES: 'REQUEST_GET_SITES',\n GET_SITES_SUCCESS: 'GET_SITES_SUCCESS',\n GET_SITES_FAILURE: 'GET_SITES_FAILURE',\n SET_SITES: 'SET_SITES',\n DELETE_SITE: 'DELETE_SITE',\n REDIRECT_TO_EDIT: 'REDIRECT_TO_EDIT',\n\n // TLDS\n REQUEST_GET_TLDS: 'REQUEST_GET_TLDS',\n GET_TLDS_FAILURE: 'GET_TLDS_FAILURE',\n GET_TLDS_SUCCESS: 'GET_TLDS_SUCCESS',\n SET_TLDS: 'SET_TLDS',\n\n // DOMAIN AVAILABILITY\n REQUEST_GET_DOMAIN_AVAILABILITY: 'REQUEST_GET_DOMAIN_AVAILABILITY',\n GET_DOMAIN_AVAILABILITY_FAILURE: 'GET_DOMAIN_AVAILABILITY_FAILURE',\n GET_DOMAIN_AVAILABILITY_SUCCESS: 'GET_DOMAIN_AVAILABILITY_SUCCESS',\n SET_DOMAIN_AVAILABILITY: 'SET_DOMAIN_AVAILABILITY',\n\n // DOMAINS\n REQUEST_GET_DOMAINS: 'REQUEST_GET_DOMAINS',\n SET_SITES_DOMAINS: 'SET_SITES_DOMAINS',\n GET_DOMAINS_SUCCESS: 'GET_DOMAINS_SUCCESS',\n GET_DOMAINS_FAILURE: 'GET_DOMAINS_FAILURE',\n\n // PLANS\n REQUEST_GET_PLANS: 'REQUEST_GET_PLANS',\n SET_PLANS: 'SET_PLANS',\n GET_PLANS_SUCCESS: 'GET_PLANS_SUCCESS',\n GET_PLANS_FAILURE: 'GET_PLANS_FAILURE',\n\n // WARNINGS\n SET_WARNINGS_SUCCESS: 'SET_WARNINGS_SUCCESS',\n SET_WARNINGS_FAILURE: 'SET_WARNINGS_FAILURE',\n SET_WARNING_SEEN: 'SET_WARNING_SEEN',\n\n // SUBDOMAIN\n REQUEST_ADITIONAL_DOMAIN_TO_PLAN: 'REQUEST_ADITIONAL_DOMAIN_TO_PLAN',\n SUCCEED_ADITIONAL_DOMAIN_TO_PLAN: 'SUCCEED_ADITIONAL_DOMAIN_TO_PLAN',\n FAIL_ADITIONAL_DOMAIN_TO_PLAN: 'FAIL_ADITIONAL_DOMAIN_TO_PLAN',\n\n // CHANGE DOMAIN DNS\n REQUEST_CHANGE_DOMAIN_DNS: 'REQUEST_CHANGE_DOMAIN_DNS',\n CHANGE_DOMAIN_DNS_SUCCESS: 'CHANGE_DOMAIN_DNS_SUCCESS',\n CHANGE_DOMAIN_DNS_FAILURE: 'CHANGE_DOMAIN_DNS_FAILURE',\n\n // GET DOMAIN DNS\n REQUEST_DOMAIN_DNS: 'REQUEST_DOMAIN_DNS',\n GET_DOMAIN_DNS_SUCCESS: 'GET_DOMAIN_DNS_SUCCESS',\n GET_DOMAIN_DNS_FAILURE: 'GET_DOMAIN_DNS_FAILURE',\n RESET_DOMAIN_DNS_STATUS: 'RESET_DOMAIN_DNS_STATUS',\n SET_DOMAIN_DNS: 'SET_DOMAIN_DNS',\n\n // GET PLAN DNS\n REQUEST_PLAN_DNS: 'REQUEST_PLAN_DNS',\n GET_PLAN_DNS_SUCCESS: 'GET_PLAN_DNS_SUCCESS',\n GET_PLAN_DNS_FAILURE: 'GET_PLAN_DNS_FAILURE',\n SET_PLAN_DNS: 'SET_PLAN_DNS',\n\n // SITEBUIDER ACTIVE\n SET_SITE_BUILDER_ACTIVE: 'SET_SITE_BUILDER_ACTIVE',\n\n // WORDPRESS INSTALLATION LOADING\n REQUEST_WORDPRESS_INSTALLATION: 'REQUEST_WORDPRESS_INSTALLATION',\n SET_WORDPRESS_INSTALLATION_SUCCESS: 'SET_WORDPRESS_INSTALLATION_SUCCESS',\n SET_WORDPRESS_INSTALLATION_FAILURE: 'SET_WORDPRESS_INSTALLATION_FAILURE',\n SET_WORDPRESS_INSTALLATION_LOADING: 'SET_WORDPRESS_INSTALLATION_LOADING',\n SET_WORDPRESS_INSTALLATION_STATUS: 'SET_WORDPRESS_INSTALLATION_STATUS',\n SET_WORDPRESS_INSTALLATION_DEFAULT: 'SET_WORDPRESS_INSTALLATION_DEFAULT',\n\n // SURVEY ANSWERS\n REQUEST_SURVEY_QUESTIONS_ANSWERED: 'REQUEST_SURVEY_QUESTIONS_ANSWERED',\n GET_SURVEY_QUESTIONS_ANSWERED_SUCCESS: 'GET_SURVEY_QUESTIONS_ANSWERED_SUCCESS',\n GET_SURVEY_QUESTIONS_ANSWERED_FAILURE: 'GET_SURVEY_QUESTIONS_ANSWERED_FAILURE',\n SET_SURVEY_QUESTIONS_ANSWERED: 'SET_SURVEY_QUESTIONS_ANSWERED',\n\n // FORCE\n FORCE_RELOAD: 'FORCE_RELOAD',\n\n // ADDON CHECK\n REQUEST_ADDON_CHECK: 'REQUEST_ADDON_CHECK',\n GET_ADDON_CHECK_SUCCESS: 'GET_ADDON_CHECK_SUCCESS',\n GET_ADDON_CHECK_FAILURE: 'GET_ADDON_CHECK_FAILURE',\n SET_ADDON_CHECK_DEFAULT: 'SET_ADDON_CHECK_DEFAULT',\n\n // VERIFY IF SITE EXIST\n REQUEST_VERIFY_SITE_EXIST: 'REQUEST_VERIFY_SITE_EXIST',\n GET_VERIFY_SITE_EXIST_SUCCESS: 'GET_VERIFY_SITE_EXIST_SUCCESS',\n GET_VERIFY_SITE_EXIST_RESET: 'GET_VERIFY_SITE_EXIST_RESET',\n GET_VERIFY_SITE_EXIST_LOADING: 'GET_VERIFY_SITE_EXIST_LOADING',\n GET_VERIFY_SITE_EXIST_FAILURE: 'GET_VERIFY_SITE_EXIST_FAILURE',\n GET_VERIFY_SITE_EXIST_DEFAULT_FILES_EXCLUDE: 'GET_VERIFY_SITE_EXIST_DEFAULT_FILES_EXCLUDE',\n GET_VERIFY_SITE_EXIST_DEFAULT_FILES_EXCLUDE_SUCCESS: 'GET_VERIFY_SITE_EXIST_DEFAULT_FILES_EXCLUDE_SUCCESS',\n GET_VERIFY_SITE_EXIST_DEFAULT_FILES_EXCLUDE_FAILURE: 'GET_VERIFY_SITE_EXIST_DEFAULT_FILES_EXCLUDE_FAILURE',\n\n // UNINSTALL SITE\n REQUEST_UNINSTALL_SITE: 'REQUEST_UNINSTALL_SITE',\n UNINSTALL_SITE_SUCCESS: 'UNINSTALL_SITE_SUCCESS',\n UNINSTALL_SITE_LOADING: 'UNINSTALL_SITE_LOADING',\n UNINSTALL_SITE_FAILURE: 'UNINSTALL_SITE_FAILURE',\n\n // CHECK DOMAIN DNS STATUS\n REQUEST_DOMAIN_DNS_STATUS_CHECK: 'REQUEST_DOMAIN_DNS_STATUS_CHECK',\n GET_DOMAIN_DNS_STATUS_CHECK_SUCCESS: 'GET_DOMAIN_DNS_STATUS_CHECK_SUCCESS',\n GET_DOMAIN_DNS_STATUS_CHECK_FAILURE: 'GET_DOMAIN_DNS_STATUS_CHECK_FAILURE',\n\n // CHECK ALL DOMAINS DNS STATUS\n REQUEST_ALL_DOMAINS_DNS_STATUS_CHECK: 'REQUEST_ALL_DOMAINS_DNS_STATUS_CHECK',\n GET_ALL_DOMAINS_DNS_STATUS_CHECK_SUCCESS: 'GET_ALL_DOMAINS_DNS_STATUS_CHECK_SUCCESS',\n GET_ALL_DOMAINS_DNS_STATUS_CHECK_FAILURE: 'GET_ALL_DOMAINS_DNS_STATUS_CHECK_FAILURE',\n GET_ALL_DOMAINS_DNS_STATUS_CHECK_LOADING: 'GET_ALL_DOMAINS_DNS_STATUS_CHECK_LOADING',\n\n SITES_FROM_PRECHAT: 'SITES_FROM_PRECHAT',\n\n // SSL\n CLEAR_SSL_STATUS: 'CLEAR_SSL_STATUS',\n\n AUTO_SSL_START_REQUEST: 'AUTO_SSL_START_REQUEST',\n AUTO_SSL_START_SUCCESS: 'AUTO_SSL_START_SUCCESS',\n AUTO_SSL_START_FAILURE: 'AUTO_SSL_START_FAILURE',\n\n AUTO_SSL_PROGRESS_REQUEST: 'AUTO_SSL_PROGRESS_REQUEST',\n AUTO_SSL_PROGRESS_LOOP: 'AUTO_SSL_PROGRESS_LOOP',\n AUTO_SSL_PROGRESS_SUCCESS: 'AUTO_SSL_PROGRESS_SUCCESS',\n AUTO_SSL_PROGRESS_FAILURE: 'AUTO_SSL_PROGRESS_FAILURE',\n\n AUTO_SSL_CHECK_REQUEST: 'AUTO_SSL_CHECK_REQUEST',\n AUTO_SSL_CHECK_SUCCESS: 'AUTO_SSL_CHECK_SUCCESS',\n AUTO_SSL_CHECK_FAILURE: 'DOMAIN_AUTO_SSL_CHECK_FAILURE',\n\n SSL_VERIFICATION_REQUEST: 'SSL_VERIFICATION_REQUEST',\n SET_SSL_VERIFICATION: 'SET_SSL_VERIFICATION',\n\n REQUEST_POST_DOMAIN_TO_HG: 'REQUEST_POST_DOMAIN_TO_HG',\n POST_DOMAIN_TO_HG_SUCCESS: 'POST_DOMAIN_TO_HG_SUCCESS',\n POST_DOMAIN_TO_HG_FAILURE: 'POST_DOMAIN_TO_HG_FAILURE',\n POST_DOMAIN_TO_HG_LOADING: 'POST_DOMAIN_TO_HG_LOADING',\n\n POST_STEP_WELCOME_CHECKLIST_REQUEST: 'POST_STEP_WELCOME_CHECKLIST_REQUEST',\n POST_STEP_WELCOME_CHECKLIST_SUCCESS: 'POST_STEP_WELCOME_CHECKLIST_SUCCESS',\n POST_STEP_WELCOME_CHECKLIST_FAILURE: 'POST_STEP_WELCOME_CHECKLIST_FAILURE',\n\n GET_STEP_WELCOME_CHECKLIST_REQUEST: 'GET_STEP_WELCOME_CHECKLIST_REQUEST',\n GET_STEP_WELCOME_CHECKLIST_SUCCESS: 'GET_STEP_WELCOME_CHECKLIST_SUCCESS',\n GET_STEP_WELCOME_CHECKLIST_FAILURE: 'GET_STEP_WELCOME_CHECKLIST_FAILURE',\n SET_STEP_WELCOME_CHECKLIST: 'SET_STEP_WELCOME_CHECKLIST',\n\n RD_CREATE_LEAD_REQUEST: 'RD_CREATE_LEAD_REQUEST',\n};\n","import { SitesActionTypes } from './sites.types';\n// LOADING\nconst setLoading = isLoading => ({ type: SitesActionTypes.SET_LOADING, payload: { isLoading } });\nconst setLoadingExclusion = isLoading => ({ type: SitesActionTypes.SET_LOADING_EXCLUSION, payload: { isLoading } });\nconst setLoadingTlds = isLoading => ({ type: SitesActionTypes.SET_LOADING_TLDS, payload: { isLoading } });\nconst setLoadingDomains = isLoading => ({ type: SitesActionTypes.SET_LOADING_DOMAINS, payload: { isLoading } });\nconst setLoadingPlans = isLoading => ({ type: SitesActionTypes.SET_LOADING_PLANS, payload: { isLoading } });\nconst setLoadingSites = isLoading => ({ type: SitesActionTypes.SET_LOADING_SITES, payload: { isLoading } });\nconst setLoadingSslVerification = isLoading => ({ type: SitesActionTypes.SET_LOADING_SSL_VERIFICATION, payload: { isLoading } });\nconst setLoadingSslDomainConfiguration = isLoading => ({ type: SitesActionTypes.POST_DOMAIN_TO_HG_LOADING, payload: { isLoading } });\nconst setLoadingDomainValidation = isLoading => ({ type: SitesActionTypes.SET_LOADING_DOMAIN_VALIDATION, payload: { isLoading } });\n\n// SITES\nconst requestSites = () => ({ type: SitesActionTypes.REQUEST_GET_SITES });\nconst getSitesSuccess = () => ({ type: SitesActionTypes.GET_SITES_SUCCESS });\nconst getSitesFailure = () => ({ type: SitesActionTypes.GET_SITES_FAILURE });\nconst setSites = (sites = []) => ({ type: SitesActionTypes.SET_SITES, payload: { sites } });\nconst deleteSite = ({ site, setSiteInExclusion }) => ({ type: SitesActionTypes.DELETE_SITE, payload: { site, setSiteInExclusion } });\nconst redirectToEdit = ({\n hostingId,\n domain,\n history,\n siteBuilderUrl,\n sitesWizardUrl,\n webPresenceUrl,\n cpanelUrl,\n}) => ({\n type: SitesActionTypes.REDIRECT_TO_EDIT,\n payload: {\n hostingId,\n domain,\n history,\n siteBuilderUrl,\n sitesWizardUrl,\n webPresenceUrl,\n cpanelUrl,\n },\n});\nconst loadRedirect = domain => ({ type: SitesActionTypes.SET_LOADING_REDIRECT, payload: { domain } });\n\n// DOMAINS\nconst requestDomains = (getSitesWithBuilderTools = false) => ({ type: SitesActionTypes.REQUEST_GET_DOMAINS, payload: { getSitesWithBuilderTools } });\nconst getDomainsSuccess = () => ({ type: SitesActionTypes.GET_DOMAINS_SUCCESS });\nconst getDomainsFailure = () => ({ type: SitesActionTypes.GET_DOMAINS_FAILURE });\nconst setDomains = (domains = []) => ({\n type: SitesActionTypes.SET_SITES_DOMAINS,\n payload: {\n domains,\n },\n});\n\n// TLDS\nconst requestTlds = () => ({ type: SitesActionTypes.REQUEST_GET_TLDS });\nconst getTldsFailure = () => ({ type: SitesActionTypes.GET_TLDS_FAILURE });\nconst getTldsSuccess = () => ({ type: SitesActionTypes.GET_TLDS_SUCCESS });\nconst setTlds = tlds => ({\n type: SitesActionTypes.SET_TLDS,\n payload: {\n tlds,\n },\n});\n\n// DOMAIN AVAILABILITY\nconst getDomainAvailabilityFailure = () => ({ type: SitesActionTypes.GET_DOMAIN_AVAILABILITY_FAILURE });\nconst getDomainAvailabilitySuccess = () => ({ type: SitesActionTypes.GET_DOMAIN_AVAILABILITY_SUCCESS });\nconst requestDomainAvailability = ({ domain }) => ({\n type: SitesActionTypes.REQUEST_GET_DOMAIN_AVAILABILITY,\n payload: { domain },\n});\nconst setDomainAvailability = ({\n domainAvailability,\n domainTldAvailability,\n domain,\n domainAndSubdomain,\n}) => ({\n type: SitesActionTypes.SET_DOMAIN_AVAILABILITY,\n payload: {\n domainAvailability, domainTldAvailability, domain, domainAndSubdomain,\n },\n});\n\n\n// PLANS\nconst requestPlans = () => ({ type: SitesActionTypes.REQUEST_GET_PLANS });\nconst getPlansSuccess = () => ({ type: SitesActionTypes.GET_PLANS_SUCCESS });\nconst getPlansFailure = () => ({ type: SitesActionTypes.GET_PLANS_FAILURE });\nconst setPlans = plans => ({\n type: SitesActionTypes.SET_PLANS,\n payload: {\n plans,\n },\n});\n\n// WARNINGS\nconst setWarningsSuccess = () => ({ type: SitesActionTypes.SET_WARNINGS_SUCCESS });\nconst setWarningsFailure = () => ({ type: SitesActionTypes.SET_WARNINGS_FAILURE });\nconst setWarningSeen = () => ({ type: SitesActionTypes.SET_WARNING_SEEN });\n\n// SUBDOMAIN\nconst requestAditionalDomain = (domain, planExternalId, withAditionDomainV2 = false) => ({ type: SitesActionTypes.REQUEST_ADITIONAL_DOMAIN_TO_PLAN, payload: { domain, planExternalId, withAditionDomainV2 } });\nconst succeedRequestAditionalDomain = () => ({ type: SitesActionTypes.SUCCEED_ADITIONAL_DOMAIN_TO_PLAN });\nconst failRequestAditionalDomain = () => ({ type: SitesActionTypes.FAIL_ADITIONAL_DOMAIN_TO_PLAN });\n\n// CHANGE DOMAIN DNS\nconst requestChangeDomainDns = (domainId, planId, selectedDomain) => ({ type: SitesActionTypes.REQUEST_CHANGE_DOMAIN_DNS, payload: { domainId, planId, selectedDomain } });\nconst changeDomainDnsSuccess = () => ({ type: SitesActionTypes.CHANGE_DOMAIN_DNS_SUCCESS });\nconst changeDomainDnsFailure = () => ({ type: SitesActionTypes.CHANGE_DOMAIN_DNS_FAILURE });\n\n// GET DOMAIN DNS\nconst requestDomainDns = (domainLabel, onDomainNotRegistered) => ({ type: SitesActionTypes.REQUEST_DOMAIN_DNS, payload: { domainLabel, onDomainNotRegistered } });\nconst domainDnsSuccess = () => ({ type: SitesActionTypes.GET_DOMAIN_DNS_SUCCESS });\nconst domainDnsFailure = () => ({ type: SitesActionTypes.GET_DOMAIN_DNS_FAILURE });\nconst resetDomainDnsStatus = () => ({ type: SitesActionTypes.RESET_DOMAIN_DNS_STATUS });\nconst setDomainDns = domainDns => ({\n type: SitesActionTypes.SET_DOMAIN_DNS,\n payload: {\n domainDns,\n },\n});\n\n// GET PLAN DNS\nconst requestPlanDns = planId => ({ type: SitesActionTypes.REQUEST_PLAN_DNS, payload: { planId } });\nconst planDnsSuccess = () => ({ type: SitesActionTypes.GET_PLAN_DNS_SUCCESS });\nconst planDnsFailure = () => ({ type: SitesActionTypes.GET_PLAN_DNS_FAILURE });\nconst setPlanDns = planDns => ({\n type: SitesActionTypes.SET_PLAN_DNS,\n payload: {\n planDns,\n },\n});\n\n// SITEBUILDER ACTIVE\n\nconst setHasSiteBuilderActive = hasSiteBuilderActive => ({\n type: SitesActionTypes.SET_SITE_BUILDER_ACTIVE,\n payload: {\n hasSiteBuilderActive,\n },\n});\n\n// WORDPRESS INSTALLATION LOADING\nconst requestWordpressInstallation = ({\n wordpress,\n setHgPluginIsInstall,\n isWondersuiteEnabled,\n themeId,\n userSelectedWondersuiteTrial,\n isFastCheckoutAddonEnabled,\n userSelectedUseEcommercePlus,\n requestAutoSsl,\n}) => ({\n type: SitesActionTypes.REQUEST_WORDPRESS_INSTALLATION,\n payload: {\n wordpress,\n setHgPluginIsInstall,\n isWondersuiteEnabled,\n themeId,\n userSelectedWondersuiteTrial,\n isFastCheckoutAddonEnabled,\n userSelectedUseEcommercePlus,\n requestAutoSsl,\n },\n});\nconst setWordpressInstallationSuccess = () => ({ type: SitesActionTypes.SET_WORDPRESS_INSTALLATION_SUCCESS });\nconst setWordpressInstallationFailure = () => ({ type: SitesActionTypes.SET_WORDPRESS_INSTALLATION_FAILURE });\nconst setWordpressInstallationStatus = installed => ({ type: SitesActionTypes.SET_WORDPRESS_INSTALLATION_STATUS, payload: { installed } });\nconst setWordpressInstallationLoading = isLoading => ({ type: SitesActionTypes.SET_WORDPRESS_INSTALLATION_LOADING, payload: { isLoading } });\nconst setWordpressInstallationToDefault = () => ({ type: SitesActionTypes.SET_WORDPRESS_INSTALLATION_DEFAULT });\n\n// SURVEY QUESTIONS ANSWERED\nconst requestSurveyQuestionsAnswered = surveyId => ({ type: SitesActionTypes.REQUEST_SURVEY_QUESTIONS_ANSWERED, payload: { surveyId } });\nconst surveyQuestionsAnsweredSuccess = () => ({ type: SitesActionTypes.GET_SURVEY_QUESTIONS_ANSWERED_SUCCESS });\nconst surveyQuestionsAnsweredFailure = () => ({ type: SitesActionTypes.GET_SURVEY_QUESTIONS_ANSWERED_FAILURE });\nconst setSurveyQuestionsAnswered = questions => ({\n type: SitesActionTypes.SET_SURVEY_QUESTIONS_ANSWERED,\n payload: {\n questions,\n },\n});\n\n// FORCE\nconst forceReload = bool => ({ type: SitesActionTypes.FORCE_RELOAD, payload: bool });\n\n// ADDON CHECK\nconst requestAddonCheck = ({ hostingId }) => ({ type: SitesActionTypes.REQUEST_ADDON_CHECK, payload: { hostingId } });\nconst getAddonCheckSuccess = data => ({ type: SitesActionTypes.GET_ADDON_CHECK_SUCCESS, payload: data });\nconst getAddonCheckFailure = () => ({ type: SitesActionTypes.GET_ADDON_CHECK_FAILURE });\nconst setAddonCheckDefault = () => ({ type: SitesActionTypes.SET_ADDON_CHECK_DEFAULT });\n\n// VERIFY IF SITE EXIST\nconst requestVerifyIfSiteExist = ({ hostingId, domain }) => ({ type: SitesActionTypes.REQUEST_VERIFY_SITE_EXIST, payload: { hostingId, domain } });\nconst requestVerifyIfSiteExistSuccess = data => ({ type: SitesActionTypes.GET_VERIFY_SITE_EXIST_SUCCESS, payload: data });\nconst requestVerifyIfSiteExistLoading = isLoading => ({ type: SitesActionTypes.GET_VERIFY_SITE_EXIST_LOADING, payload: { isLoading } });\nconst requestVerifyIfSiteExistFailure = () => ({ type: SitesActionTypes.GET_VERIFY_SITE_EXIST_FAILURE });\nconst requestVerifyIfSiteExistReset = () => ({ type: SitesActionTypes.GET_VERIFY_SITE_EXIST_RESET });\nconst requestVerifyIfSiteExistDefaultFilesExclude = data => ({ type: SitesActionTypes.GET_VERIFY_SITE_EXIST_DEFAULT_FILES_EXCLUDE, payload: data });\nconst requestVerifyIfSiteExistDefaultFilesExcludeSuccess = () => ({ type: SitesActionTypes.GET_VERIFY_SITE_EXIST_DEFAULT_FILES_EXCLUDE_SUCCESS });\nconst requestVerifyIfSiteExistDefaultFilesExcludeFailure = () => ({ type: SitesActionTypes.GET_VERIFY_SITE_EXIST_DEFAULT_FILES_EXCLUDE_FAILURE });\n\n// UNINSTALL SITE\nconst requestUninstallSite = ({\n hostingId, domain, domainId, domainHasPlan, needToExcludeDefaultFiles, currentlyInstallInfo,\n}) => ({\n type: SitesActionTypes.REQUEST_UNINSTALL_SITE,\n payload: {\n hostingId, domain, domainId, domainHasPlan, needToExcludeDefaultFiles, currentlyInstallInfo,\n },\n});\nconst uninstallSiteSuccess = () => ({ type: SitesActionTypes.UNINSTALL_SITE_SUCCESS });\nconst uninstallSiteLoading = isLoading => ({ type: SitesActionTypes.UNINSTALL_SITE_LOADING, payload: { isLoading } });\nconst uninstallSiteFailure = () => ({ type: SitesActionTypes.UNINSTALL_SITE_FAILURE });\n\n// DOMAIN DNS STATUS CHECK\nconst requestDomainDnsStatusCheck = ({ domain }) => ({ type: SitesActionTypes.REQUEST_DOMAIN_DNS_STATUS_CHECK, payload: { domain } });\nconst domainDnsStatusCheckSuccess = data => ({ type: SitesActionTypes.GET_DOMAIN_DNS_STATUS_CHECK_SUCCESS, payload: data });\nconst domainDnsStatusCheckFailure = () => ({ type: SitesActionTypes.GET_DOMAIN_DNS_STATUS_CHECK_FAILURE });\n\n// DOMAIN DNS STATUS CHECK\nconst requestAllDomainsDnsStatusCheck = () => ({ type: SitesActionTypes.REQUEST_ALL_DOMAINS_DNS_STATUS_CHECK });\nconst domainsDnsStatusCheckSuccess = data => ({ type: SitesActionTypes.GET_ALL_DOMAINS_DNS_STATUS_CHECK_SUCCESS, payload: data });\nconst domainsDnsStatusCheckFailure = () => ({ type: SitesActionTypes.GET_ALL_DOMAINS_DNS_STATUS_CHECK_FAILURE });\nconst requestDomainsDnsStatusLoading = isLoading => ({ type: SitesActionTypes.GET_ALL_DOMAINS_DNS_STATUS_CHECK_LOADING, payload: { isLoading } });\n\nconst redirectFromPreChat = bool => ({ type: SitesActionTypes.SITES_FROM_PRECHAT, payload: bool });\n\n// SSL\nconst clearSSLStatus = () => ({ type: SitesActionTypes.CLEAR_SSL_STATUS });\n\nconst requestAutoSSLStart = ({ domain, hostingId }) => ({ type: SitesActionTypes.AUTO_SSL_START_REQUEST, payload: { domain, hostingId } });\nconst successAutoSSLStart = () => ({ type: SitesActionTypes.AUTO_SSL_START_SUCCESS });\nconst failureAutoSSLStart = () => ({ type: SitesActionTypes.AUTO_SSL_START_FAILURE });\n\nconst requestAutoSSLProgress = ({ domain, hostingId }) => ({ type: SitesActionTypes.AUTO_SSL_PROGRESS_REQUEST, payload: { domain, hostingId } });\nconst loopAutoSSLProgress = ({ callLoop }) => ({ type: SitesActionTypes.AUTO_SSL_PROGRESS_LOOP, payload: { callLoop } });\nconst failureAutoSSLProgress = () => ({ type: SitesActionTypes.AUTO_SSL_PROGRESS_FAILURE });\n\nconst requestAutoSSLCheck = ({ hostingId, domain }) => ({ type: SitesActionTypes.AUTO_SSL_CHECK_REQUEST, payload: { hostingId, domain } });\nconst successAutoSSLCheck = () => ({ type: SitesActionTypes.AUTO_SSL_CHECK_SUCCESS });\nconst failureAutoSSLCheck = () => ({ type: SitesActionTypes.AUTO_SSL_CHECK_FAILURE });\n\nconst requestSslVerification = ({ domain, hostingId }) => ({ type: SitesActionTypes.SSL_VERIFICATION_REQUEST, payload: { domain, hostingId } });\nconst setSslVerification = data => ({ type: SitesActionTypes.SET_SSL_VERIFICATION, payload: data });\n\nconst postDomainToHgPlan = ({ domain }) => ({ type: SitesActionTypes.REQUEST_POST_DOMAIN_TO_HG, payload: { domain } });\nconst successPostDomainToHgPlan = () => ({ type: SitesActionTypes.POST_DOMAIN_TO_HG_SUCCESS });\nconst failurePostDomainToHgPlan = () => ({ type: SitesActionTypes.POST_DOMAIN_TO_HG_FAILURE });\n\nconst requestPostStepWelcomeChecklist = data => ({ type: SitesActionTypes.POST_STEP_WELCOME_CHECKLIST_REQUEST, payload: data });\nconst successPostStepWelcomeChecklist = data => ({ type: SitesActionTypes.POST_STEP_WELCOME_CHECKLIST_SUCCESS, payload: data });\nconst failurePostStepWelcomeChecklist = () => ({ type: SitesActionTypes.POST_STEP_WELCOME_CHECKLIST_FAILURE });\n\nconst requestGetStepWelcomeChecklist = ({ clientId, setData, action }) => ({ type: SitesActionTypes.GET_STEP_WELCOME_CHECKLIST_REQUEST, payload: { clientId, setData, action } });\nconst successGetStepWelcomeChecklist = data => ({ type: SitesActionTypes.GET_STEP_WELCOME_CHECKLIST_SUCCESS, payload: data });\nconst failureGetStepWelcomeChecklist = () => ({ type: SitesActionTypes.GET_STEP_WELCOME_CHECKLIST_FAILURE });\n\nconst setDataWelcomeChecklist = data => ({\n type: SitesActionTypes.SET_STEP_WELCOME_CHECKLIST,\n payload: {\n data,\n },\n});\n\nconst requestRdCreateLead = data => ({ type: SitesActionTypes.RD_CREATE_LEAD_REQUEST, payload: data });\n\n\nconst actions = {\n loading: {\n set: setLoading,\n },\n loadingExclusion: {\n set: setLoadingExclusion,\n },\n loadingTlds: {\n set: setLoadingTlds,\n },\n loadingDomains: {\n set: setLoadingDomains,\n },\n loadingPlans: {\n set: setLoadingPlans,\n },\n loadingSites: {\n set: setLoadingSites,\n },\n loadingDomainValidation: {\n set: setLoadingDomainValidation,\n },\n sites: {\n failure: getSitesFailure,\n request: requestSites,\n success: getSitesSuccess,\n set: setSites,\n },\n site: {\n delete: deleteSite,\n loadRedirect,\n redirectToEdit,\n },\n domains: {\n failure: getDomainsFailure,\n request: requestDomains,\n success: getDomainsSuccess,\n set: setDomains,\n },\n tlds: {\n failure: getTldsFailure,\n request: requestTlds,\n success: getTldsSuccess,\n set: setTlds,\n },\n domainAvailability: {\n failure: getDomainAvailabilityFailure,\n request: requestDomainAvailability,\n success: getDomainAvailabilitySuccess,\n set: setDomainAvailability,\n },\n plans: {\n request: requestPlans,\n success: getPlansSuccess,\n failure: getPlansFailure,\n set: setPlans,\n },\n warnings: {\n success: setWarningsSuccess,\n failure: setWarningsFailure,\n set: setWarningSeen,\n },\n aditionalDomain: {\n request: requestAditionalDomain,\n success: succeedRequestAditionalDomain,\n failure: failRequestAditionalDomain,\n },\n changeDomainDns: {\n request: requestChangeDomainDns,\n success: changeDomainDnsSuccess,\n failure: changeDomainDnsFailure,\n },\n domainDns: {\n request: requestDomainDns,\n success: domainDnsSuccess,\n failure: domainDnsFailure,\n resetStatus: resetDomainDnsStatus,\n set: setDomainDns,\n },\n planDns: {\n request: requestPlanDns,\n success: planDnsSuccess,\n failure: planDnsFailure,\n set: setPlanDns,\n },\n wordpressInstallation: {\n request: requestWordpressInstallation,\n success: setWordpressInstallationSuccess,\n failure: setWordpressInstallationFailure,\n set: setWordpressInstallationLoading,\n setStatus: setWordpressInstallationStatus,\n reset: setWordpressInstallationToDefault,\n },\n surveyQuestionsAnswered: {\n request: requestSurveyQuestionsAnswered,\n success: surveyQuestionsAnsweredSuccess,\n failure: surveyQuestionsAnsweredFailure,\n set: setSurveyQuestionsAnswered,\n },\n hasSiteBuilderActive: {\n set: setHasSiteBuilderActive,\n },\n force: {\n reload: forceReload,\n },\n addonCheck: {\n request: requestAddonCheck,\n success: getAddonCheckSuccess,\n failure: getAddonCheckFailure,\n reset: setAddonCheckDefault,\n },\n chat: {\n setRedirectFromPreChat: redirectFromPreChat,\n },\n verifyIfSiteExist: {\n request: requestVerifyIfSiteExist,\n success: requestVerifyIfSiteExistSuccess,\n failure: requestVerifyIfSiteExistFailure,\n loading: requestVerifyIfSiteExistLoading,\n reset: requestVerifyIfSiteExistReset,\n defaultFilesExclude: {\n request: requestVerifyIfSiteExistDefaultFilesExclude,\n success: requestVerifyIfSiteExistDefaultFilesExcludeSuccess,\n failure: requestVerifyIfSiteExistDefaultFilesExcludeFailure,\n },\n },\n uninstallSite: {\n request: requestUninstallSite,\n success: uninstallSiteSuccess,\n failure: uninstallSiteFailure,\n loading: uninstallSiteLoading,\n },\n domainDnsStatusCheck: {\n request: requestDomainDnsStatusCheck,\n success: domainDnsStatusCheckSuccess,\n failure: domainDnsStatusCheckFailure,\n },\n allDomainsDnsStatusCheck: {\n request: requestAllDomainsDnsStatusCheck,\n success: domainsDnsStatusCheckSuccess,\n failure: domainsDnsStatusCheckFailure,\n loading: requestDomainsDnsStatusLoading,\n },\n ssl: {\n clearStatus: clearSSLStatus,\n start: {\n request: requestAutoSSLStart,\n success: successAutoSSLStart,\n failure: failureAutoSSLStart,\n },\n progress: {\n request: requestAutoSSLProgress,\n loop: loopAutoSSLProgress,\n failure: failureAutoSSLProgress,\n },\n check: {\n request: requestAutoSSLCheck,\n success: successAutoSSLCheck,\n failure: failureAutoSSLCheck,\n },\n verification: {\n request: requestSslVerification,\n set: setSslVerification,\n loading: setLoadingSslVerification,\n },\n pointDomain: {\n request: postDomainToHgPlan,\n success: successPostDomainToHgPlan,\n failure: failurePostDomainToHgPlan,\n loading: setLoadingSslDomainConfiguration,\n },\n },\n upateStepWelcomeChecklist: {\n request: requestPostStepWelcomeChecklist,\n success: successPostStepWelcomeChecklist,\n failure: failurePostStepWelcomeChecklist,\n },\n welcomeChecklist: {\n request: requestGetStepWelcomeChecklist,\n success: successGetStepWelcomeChecklist,\n failure: failureGetStepWelcomeChecklist,\n set: setDataWelcomeChecklist,\n },\n rdStation: {\n request: requestRdCreateLead,\n },\n};\n\nexport default actions;\n","// DOMAIN-AVAILABILITY\nconst receiveDomainAvailability = response => ({\n domainAvailability: response.data.data.available,\n domainTldAvailability: response.data.data.tld_available,\n domain: response.data.data.domain,\n});\n\n// TLDS\nconst receiveTlds = (rawData) => {\n const { data } = rawData.data;\n const { tlds } = data;\n\n const tldsMap = tlds.map(rawTld => ({\n categories: rawTld.categories,\n title: rawTld.tld,\n }));\n\n return tldsMap;\n};\n\n// SITES\nconst receiveSites = rawData => [...rawData.data.sites];\nconst receiveSitesFromGatorSolutions = (rawData) => {\n const list = rawData.data.sites || rawData.data;\n\n const newData = [...list].filter(item => !(item.sub_status === 'pending' && item.invoice && item.invoice.status === 'Cancelled')).map((item) => {\n const newItem = { ...item };\n\n if (newItem.cpanel_domains) {\n newItem.cpanel_domains = newItem.cpanel_domains.filter(cpanelDomain => cpanelDomain.type !== 'parked');\n }\n\n return newItem;\n });\n\n return newData;\n};\n\n// DOMAINS\nconst receiveDomains = rawData => [...rawData.data];\n\n// PLANS\nconst receivePlans = (rawData) => {\n const activeStatus = ['active', 'to_due', 'overdue'];\n\n const activePlans = [...rawData.data].filter(plan => activeStatus.includes(plan.status.toLowerCase()));\n return activePlans;\n};\n\n// DOMAIN DNS\nconst receiveDomainDns = rawData => rawData.domain.name_servers;\n\n// PLAN DNS\nconst receivePlanDns = (rawData) => {\n let planDns = [];\n if (rawData) {\n const { ns1, ns2 } = rawData.data;\n planDns = [ns1, ns2];\n }\n return planDns;\n};\n\n// HAS SITE BUILDER ACTIVE\nconst receiveHasSiteBuilderActive = (rawData) => {\n if (rawData) {\n const { hasSiteBuilderActive } = rawData.data;\n return hasSiteBuilderActive;\n }\n};\n\n// SURVEY QUESTIONS ANSWERED\nconst receiveSurveyQuestionsAnswered = (rawData) => {\n let IdQuestionsAnswered = [];\n Object.keys(rawData.answers).forEach((id) => {\n IdQuestionsAnswered = [...IdQuestionsAnswered, parseInt(id, 10)];\n });\n const questionsAnswered = {\n ids: IdQuestionsAnswered,\n answers: rawData.answers,\n };\n return questionsAnswered;\n};\n\n// CHOOSEN DOMAIN DNS STATUS\n\nconst receiveChoosenDomainStatus = (rawData, choosenDomain) => {\n const choosenDomainObject = rawData.find(domainObject => domainObject.domain === choosenDomain);\n return choosenDomainObject !== undefined ? choosenDomainObject.status : null;\n};\n\n// RECEIVE SITE EXIST STATUS\n\nconst receiveSiteExistStatus = (rawData) => {\n if (rawData.cpanel_site) {\n const onlyDefaultFiles = rawData.cpanel_site.have_only_default_files;\n return {\n showOverwriteModal: !onlyDefaultFiles && rawData.cpanel_site.files_exists,\n sharedDocumentRoot: rawData.cpanel_site.shared_document_root,\n onlyDefaultFiles,\n siteType: 'cpanel',\n siteId: null,\n };\n }\n if (rawData.softaculous_site) {\n return {\n showOverwriteModal: true,\n sharedDocumentRoot: rawData.softaculous_site.shared_document_root,\n siteType: 'softaculous',\n siteId: rawData.softaculous_site.siteId,\n };\n }\n};\n\nconst hgPluginInstalled = rawdata => rawdata.data && rawdata.data.hg_plugin_installed;\n\nconst assembly = {\n receiveDomainAvailability,\n receiveTlds,\n receiveSites,\n receiveSitesFromGatorSolutions,\n receiveDomains,\n receivePlans,\n receivePlanDns,\n receiveDomainDns,\n receiveSurveyQuestionsAnswered,\n receiveHasSiteBuilderActive,\n receiveChoosenDomainStatus,\n hgPluginInstalled,\n receiveSiteExistStatus,\n};\n\nexport default assembly;\n","export const LinkNaBioActionTypes = {\n LINK_NA_BIO_AVAILABILITY_REQUEST: 'LINK_NA_BIO_AVAILABILITY_REQUEST',\n LINK_NA_BIO_AVAILABILITY_SUCCESS: 'LINK_NA_BIO_AVAILABILITY_SUCCESS',\n LINK_NA_BIO_AVAILABILITY_FAILURE: 'LINK_NA_BIO_AVAILABILITY_FAILURE',\n LINK_NA_BIO_AVAILABILITY_SET: 'LINK_NA_BIO_AVAILABILITY_SET',\n\n CREATE_LINK_NA_BIO_REQUEST: 'CREATE_LINK_NA_BIO_REQUEST',\n CREATE_LINK_NA_BIO_SUCCESS: 'CREATE_LINK_NA_BIO_SUCCESS',\n CREATE_LINK_NA_BIO_FAILURE: 'CREATE_LINK_NA_BIO_FAILURE',\n\n GET_LINK_NA_BIO_REQUEST: 'GET_LINK_NA_BIO_REQUEST',\n GET_LINK_NA_BIO_SUCCESS: 'GET_LINK_NA_BIO_SUCCESS',\n GET_LINK_NA_BIO_FAILURE: 'GET_LINK_NA_BIO_FAILURE',\n\n UPDATE_LINK_NA_BIO_REQUEST: 'UPDATE_LINK_NA_BIO_REQUEST',\n UPDATE_LINK_NA_BIO_SUCCESS: 'UPDATE_LINK_NA_BIO_SUCCESS',\n UPDATE_LINK_NA_BIO_FAILURE: 'UPDATE_LINK_NA_BIO_FAILURE',\n\n DELETE_LINK_NA_BIO_REQUEST: 'DELETE_LINK_NA_BIO_REQUEST',\n DELETE_LINK_NA_BIO_SUCCESS: 'DELETE_LINK_NA_BIO_SUCCESS',\n DELETE_LINK_NA_BIO_FAILURE: 'DELETE_LINK_NA_BIO_FAILURE',\n\n ADD_LINKS_REQUEST: 'ADD_LINKS_TO_LINK_NA_BIO_REQUEST',\n ADD_LINKS_SUCCESS: 'ADD_LINKS_TO_LINK_NA_BIO_SUCCESS',\n ADD_LINKS_FAILURE: 'ADD_LINKS_TO_LINK_NA_BIO_FAILURE',\n\n SORT_LINKS_REQUEST: 'SORT_LINKS_TO_LINK_NA_BIO_REQUEST',\n SORT_LINKS_SUCCESS: 'SORT_LINKS_TO_LINK_NA_BIO_SUCCESS',\n SORT_LINKS_FAILURE: 'SORT_LINKS_TO_LINK_NA_BIO_FAILURE',\n\n UPDATE_LINK_REQUEST: 'UPDATE_LINK_TO_LINK_NA_BIO_REQUEST',\n UPDATE_LINK_SUCCESS: 'UPDATE_LINK_TO_LINK_NA_BIO_SUCCESS',\n UPDATE_LINK_FAILURE: 'UPDATE_LINK_TO_LINK_NA_BIO_FAILURE',\n\n DELETE_LINK_REQUEST: 'DELETE_LINK_TO_LINK_NA_BIO_REQUEST',\n DELETE_LINK_SUCCESS: 'DELETE_LINK_TO_LINK_NA_BIO_SUCCESS',\n DELETE_LINK_FAILURE: 'DELETE_LINK_TO_LINK_NA_BIO_FAILURE',\n\n ADD_SOCIAL_MEDIA_REQUEST: 'ADD_SOCIAL_MEDIA_TO_LINK_NA_BIO_REQUEST',\n ADD_SOCIAL_MEDIA_SUCCESS: 'ADD_SOCIAL_MEDIA_TO_LINK_NA_BIO_SUCCESS',\n ADD_SOCIAL_MEDIA_FAILURE: 'ADD_SOCIAL_MEDIA_TO_LINK_NA_BIO_FAILURE',\n\n SORT_SOCIAL_MEDIA_REQUEST: 'SORT_SOCIAL_MEDIA_TO_LINK_NA_BIO_REQUEST',\n SORT_SOCIAL_MEDIA_SUCCESS: 'SORT_SOCIAL_MEDIA_TO_LINK_NA_BIO_SUCCESS',\n SORT_SOCIAL_MEDIA_FAILURE: 'SORT_SOCIAL_MEDIA_TO_LINK_NA_BIO_FAILURE',\n\n UPDATE_SOCIAL_MEDIA_REQUEST: 'UPDATE_SOCIAL_MEDIA_TO_SOCIAL_MEDIA_NA_BIO_REQUEST',\n UPDATE_SOCIAL_MEDIA_SUCCESS: 'UPDATE_SOCIAL_MEDIA_TO_SOCIAL_MEDIA_NA_BIO_SUCCESS',\n UPDATE_SOCIAL_MEDIA_FAILURE: 'UPDATE_SOCIAL_MEDIA_TO_SOCIAL_MEDIA_NA_BIO_FAILURE',\n\n DELETE_SOCIAL_MEDIA_REQUEST: 'DELETE_SOCIAL_MEDIA_TO_SOCIAL_MEDIA_NA_BIO_REQUEST',\n DELETE_SOCIAL_MEDIA_SUCCESS: 'DELETE_SOCIAL_MEDIA_TO_SOCIAL_MEDIA_NA_BIO_SUCCESS',\n DELETE_SOCIAL_MEDIA_FAILURE: 'DELETE_SOCIAL_MEDIA_TO_SOCIAL_MEDIA_NA_BIO_FAILURE',\n\n SOCIAL_MEDIA_ICONS_REQUEST: 'SOCIAL_MEDIA_ICONS_REQUEST',\n SOCIAL_MEDIA_ICONS_SUCCESS: 'SOCIAL_MEDIA_ICONS_SUCCESS',\n SOCIAL_MEDIA_ICONS_FAILURE: 'SOCIAL_MEDIA_ICONS_FAILURE',\n SOCIAL_MEDIA_ICONS_SET: 'SOCIAL_MEDIA_ICONS_SET',\n\n LINK_NA_BIO_STATISTIC_REQUEST: 'LINK_NA_BIO_STATISTIC_REQUEST',\n LINK_NA_BIO_STATISTIC_SUCCESS: 'LINK_NA_BIO_STATISTIC_SUCCESS',\n LINK_NA_BIO_STATISTIC_FAILURE: 'LINK_NA_BIO_STATISTIC_FAILURE',\n LINK_NA_BIO_STATISTIC_SET: 'LINK_NA_BIO_STATISTIC_SET',\n\n VERIFY_DOMAIN_TO_LINK_EXISTS_RESET: 'VERIFY_DOMAIN_TO_LINK_EXISTS_RESET',\n VERIFY_DOMAIN_TO_LINK_EXISTS_SUCCESS: 'VERIFY_DOMAIN_TO_LINK_EXISTS_SUCCESS',\n VERIFY_DOMAIN_TO_LINK_EXISTS_FAILURE: 'VERIFY_DOMAIN_TO_LINK_EXISTS_FAILURE',\n\n LINK_NA_BIO_LOADING: 'LINK_NA_BIO_LOADING',\n LINKS_FROM_LINK_NA_BIO_LOADING: 'LINKS_FROM_LINK_NA_BIO_LOADING',\n SOCIAL_MEDIA_FROM_LINK_NA_BIO_LOADING: 'SOCIAL_MEDIA_FROM_LINK_NA_BIO_LOADING',\n LINK_NA_BIO_PROFILES_SET: 'LINK_NA_BIO_PROFILES_SET',\n\n};\n","import { LinkNaBioActionTypes } from './linkNaBio.types';\n\nconst linkNaBioAvailabilityRequest = ({ link }) => ({ type: LinkNaBioActionTypes.LINK_NA_BIO_AVAILABILITY_REQUEST, payload: { link } });\nconst linkNaBioAvailabilitySuccess = () => ({ type: LinkNaBioActionTypes.LINK_NA_BIO_AVAILABILITY_SUCCESS });\nconst linkNaBioAvailabilityFailure = () => ({ type: LinkNaBioActionTypes.LINK_NA_BIO_AVAILABILITY_FAILURE });\nconst linkNaBioAvailabilitySet = payload => ({ type: LinkNaBioActionTypes.LINK_NA_BIO_AVAILABILITY_SET, payload });\n\nconst createLinkNaBioRequest = ({\n linkName, title, description, template, colorScheme, links, callback, icons,\n}) => ({\n type: LinkNaBioActionTypes.CREATE_LINK_NA_BIO_REQUEST,\n payload: {\n linkName, title, description, template, colorScheme, links, callback, icons,\n },\n});\nconst createLinkNaBioSuccess = () => ({ type: LinkNaBioActionTypes.CREATE_LINK_NA_BIO_SUCCESS });\nconst createLinkNaBioFailure = () => ({ type: LinkNaBioActionTypes.CREATE_LINK_NA_BIO_FAILURE });\n\nconst getLinkNaBioRequest = () => ({ type: LinkNaBioActionTypes.GET_LINK_NA_BIO_REQUEST });\nconst getLinkNaBioSuccess = () => ({ type: LinkNaBioActionTypes.GET_LINK_NA_BIO_SUCCESS });\nconst getLinkNaBioFailure = () => ({ type: LinkNaBioActionTypes.GET_LINK_NA_BIO_FAILURE });\n\nconst updateLinkNaBioRequest = ({\n linkName, title, description, template, colorScheme, profileId, callback, domainToLink, isRemovingDomain, isExternalDomain, nameServer, hostingId, domainId,\n}) => ({\n type: LinkNaBioActionTypes.UPDATE_LINK_NA_BIO_REQUEST,\n payload: {\n linkName, title, description, template, colorScheme, profileId, callback, domainToLink, isRemovingDomain, isExternalDomain, nameServer, hostingId, domainId,\n },\n});\nconst updateLinkNaBioSuccess = () => ({ type: LinkNaBioActionTypes.UPDATE_LINK_NA_BIO_SUCCESS });\nconst updateLinkNaBioFailure = () => ({ type: LinkNaBioActionTypes.UPDATE_LINK_NA_BIO_FAILURE });\n\nconst deleteLinkNaBioRequest = ({ profileId }) => ({ type: LinkNaBioActionTypes.DELETE_LINK_NA_BIO_REQUEST, payload: { profileId } });\nconst deleteLinkNaBioSuccess = () => ({ type: LinkNaBioActionTypes.DELETE_LINK_NA_BIO_SUCCESS });\nconst deleteLinkNaBioFailure = () => ({ type: LinkNaBioActionTypes.DELETE_LINK_NA_BIO_FAILURE });\n\nconst addLinkRequest = ({ links, profileId }) => ({ type: LinkNaBioActionTypes.ADD_LINKS_REQUEST, payload: { links, profileId } });\nconst addLinkSuccess = () => ({ type: LinkNaBioActionTypes.ADD_LINKS_SUCCESS });\nconst addLinkFailure = () => ({ type: LinkNaBioActionTypes.ADD_LINKS_FAILURE });\n\nconst updateLinkRequest = ({ link, profileId }) => ({ type: LinkNaBioActionTypes.UPDATE_LINK_REQUEST, payload: { link, profileId } });\nconst updateLinkSuccess = () => ({ type: LinkNaBioActionTypes.ADD_LINKS_SUCCESS });\nconst updateLinkFailure = () => ({ type: LinkNaBioActionTypes.ADD_LINKS_FAILURE });\n\nconst sortLinkRequest = ({ links, profileId }) => ({ type: LinkNaBioActionTypes.SORT_LINKS_REQUEST, payload: { links, profileId } });\nconst sortLinkSuccess = () => ({ type: LinkNaBioActionTypes.SORT_LINKS_SUCCESS });\nconst sortLinkFailure = () => ({ type: LinkNaBioActionTypes.SORT_LINKS_FAILURE });\n\nconst deleteLinkRequest = ({ linkId, profileId }) => ({ type: LinkNaBioActionTypes.DELETE_LINK_REQUEST, payload: { linkId, profileId } });\nconst deleteLinkSuccess = () => ({ type: LinkNaBioActionTypes.DELETE_LINK_SUCCESS });\nconst deleteLinkFailure = () => ({ type: LinkNaBioActionTypes.DELETE_LINK_FAILURE });\n\nconst addSocialMediaRequest = ({ links, profileId }) => ({ type: LinkNaBioActionTypes.ADD_SOCIAL_MEDIA_REQUEST, payload: { links, profileId } });\nconst addSocialMediaSuccess = () => ({ type: LinkNaBioActionTypes.ADD_SOCIAL_MEDIA_SUCCESS });\nconst addSocialMediaFailure = () => ({ type: LinkNaBioActionTypes.ADD_SOCIAL_MEDIA_FAILURE });\n\nconst updateSocialMediaRequest = ({ link, profileId }) => ({ type: LinkNaBioActionTypes.UPDATE_SOCIAL_MEDIA_REQUEST, payload: { link, profileId } });\nconst updateSocialMediaSuccess = () => ({ type: LinkNaBioActionTypes.UPDATE_SOCIAL_MEDIA_SUCCESS });\nconst updateSocialMediaFailure = () => ({ type: LinkNaBioActionTypes.UPDATE_SOCIAL_MEDIA_FAILURE });\n\nconst sortSocialMediaRequest = ({ links, profileId }) => ({ type: LinkNaBioActionTypes.SORT_SOCIAL_MEDIA_REQUEST, payload: { links, profileId } });\nconst sortSocialMediaSuccess = () => ({ type: LinkNaBioActionTypes.SORT_SOCIAL_MEDIA_SUCCESS });\nconst sortSocialMediaFailure = () => ({ type: LinkNaBioActionTypes.SORT_SOCIAL_MEDIA_FAILURE });\n\nconst deleteSocialMediaRequest = ({ linkId, profileId }) => ({ type: LinkNaBioActionTypes.DELETE_SOCIAL_MEDIA_REQUEST, payload: { linkId, profileId } });\nconst deleteSocialMediaSuccess = () => ({ type: LinkNaBioActionTypes.DELETE_SOCIAL_MEDIA_SUCCESS });\nconst deleteSocialMediaFailure = () => ({ type: LinkNaBioActionTypes.DELETE_SOCIAL_MEDIA_FAILURE });\n\nconst socialMediaIconsRequest = () => ({ type: LinkNaBioActionTypes.SOCIAL_MEDIA_ICONS_REQUEST });\nconst socialMediaIconsSuccess = () => ({ type: LinkNaBioActionTypes.SOCIAL_MEDIA_ICONS_SUCCESS });\nconst socialMediaIconsFailure = () => ({ type: LinkNaBioActionTypes.SOCIAL_MEDIA_ICONS_FAILURE });\nconst socialMediaIconsSet = payload => ({ type: LinkNaBioActionTypes.SOCIAL_MEDIA_ICONS_SET, payload });\n\nconst statisticRequest = ({ profileId, periodIntervalInDays }) => ({ type: LinkNaBioActionTypes.LINK_NA_BIO_STATISTIC_REQUEST, payload: { profileId, periodIntervalInDays } });\nconst statisticSuccess = () => ({ type: LinkNaBioActionTypes.LINK_NA_BIO_STATISTIC_SUCCESS });\nconst statisticFailure = () => ({ type: LinkNaBioActionTypes.LINK_NA_BIO_STATISTIC_FAILURE });\nconst statisticSet = payload => ({ type: LinkNaBioActionTypes.LINK_NA_BIO_STATISTIC_SET, payload });\n\nconst linkNaBioLoading = payload => ({ type: LinkNaBioActionTypes.LINK_NA_BIO_LOADING, payload });\nconst socialMediaLoading = payload => ({ type: LinkNaBioActionTypes.SOCIAL_MEDIA_FROM_LINK_NA_BIO_LOADING, payload });\nconst linksLoading = payload => ({ type: LinkNaBioActionTypes.LINKS_FROM_LINK_NA_BIO_LOADING, payload });\nconst linkNaBioProfilesSet = payload => ({ type: LinkNaBioActionTypes.LINK_NA_BIO_PROFILES_SET, payload });\n\nconst verifyDomainToLinkExistsReset = () => ({ type: LinkNaBioActionTypes.VERIFY_DOMAIN_TO_LINK_EXISTS_RESET });\nconst verifyDomainToLinkExistsSuccess = () => ({ type: LinkNaBioActionTypes.VERIFY_DOMAIN_TO_LINK_EXISTS_SUCCESS });\nconst verifyDomainToLinkExistsFailure = () => ({ type: LinkNaBioActionTypes.VERIFY_DOMAIN_TO_LINK_EXISTS_FAILURE });\n\nconst actions = {\n profile: {\n availability: {\n request: linkNaBioAvailabilityRequest,\n success: linkNaBioAvailabilitySuccess,\n failure: linkNaBioAvailabilityFailure,\n set: linkNaBioAvailabilitySet,\n },\n create: {\n request: createLinkNaBioRequest,\n success: createLinkNaBioSuccess,\n failure: createLinkNaBioFailure,\n },\n get: {\n request: getLinkNaBioRequest,\n success: getLinkNaBioSuccess,\n failure: getLinkNaBioFailure,\n },\n update: {\n request: updateLinkNaBioRequest,\n success: updateLinkNaBioSuccess,\n failure: updateLinkNaBioFailure,\n },\n delete: {\n request: deleteLinkNaBioRequest,\n success: deleteLinkNaBioSuccess,\n failure: deleteLinkNaBioFailure,\n },\n loading: linkNaBioLoading,\n set: linkNaBioProfilesSet,\n },\n link: {\n loading: linksLoading,\n add: {\n request: addLinkRequest,\n success: addLinkSuccess,\n failure: addLinkFailure,\n },\n update: {\n request: updateLinkRequest,\n success: updateLinkSuccess,\n failure: updateLinkFailure,\n },\n sort: {\n request: sortLinkRequest,\n success: sortLinkSuccess,\n failure: sortLinkFailure,\n },\n delete: {\n request: deleteLinkRequest,\n success: deleteLinkSuccess,\n failure: deleteLinkFailure,\n },\n },\n socialMedia: {\n loading: socialMediaLoading,\n add: {\n request: addSocialMediaRequest,\n success: addSocialMediaSuccess,\n failure: addSocialMediaFailure,\n },\n update: {\n request: updateSocialMediaRequest,\n success: updateSocialMediaSuccess,\n failure: updateSocialMediaFailure,\n },\n sort: {\n request: sortSocialMediaRequest,\n success: sortSocialMediaSuccess,\n failure: sortSocialMediaFailure,\n },\n delete: {\n request: deleteSocialMediaRequest,\n success: deleteSocialMediaSuccess,\n failure: deleteSocialMediaFailure,\n },\n icons: {\n request: socialMediaIconsRequest,\n success: socialMediaIconsSuccess,\n failure: socialMediaIconsFailure,\n set: socialMediaIconsSet,\n },\n },\n statistic: {\n request: statisticRequest,\n success: statisticSuccess,\n failure: statisticFailure,\n set: statisticSet,\n },\n domainVerify: {\n reset: verifyDomainToLinkExistsReset,\n success: verifyDomainToLinkExistsSuccess,\n failure: verifyDomainToLinkExistsFailure,\n },\n};\n\nexport default actions;\n","import { LinkNaBioActionTypes } from './linkNaBio.types';\n\nexport const initialState = {\n loading: false,\n linksLoading: false,\n socialMediaLoading: false,\n available: undefined,\n shouldGetProfiles: true,\n profiles: [],\n socialMediaList: [],\n statistics: {},\n domainToLinkExists: undefined,\n};\n\nconst linkAvailabilityReducer = (state = initialState, action) => {\n switch (action.type) {\n case LinkNaBioActionTypes.LINK_NA_BIO_AVAILABILITY_SET: {\n return {\n ...state,\n available: action.payload,\n };\n }\n case LinkNaBioActionTypes.LINK_NA_BIO_LOADING: {\n return {\n ...state,\n loading: action.payload,\n };\n }\n case LinkNaBioActionTypes.LINKS_FROM_LINK_NA_BIO_LOADING: {\n return {\n ...state,\n linksLoading: action.payload,\n };\n }\n case LinkNaBioActionTypes.SOCIAL_MEDIA_FROM_LINK_NA_BIO_LOADING: {\n return {\n ...state,\n socialMediaLoading: action.payload,\n };\n }\n case LinkNaBioActionTypes.LINK_NA_BIO_PROFILES_SET: {\n return {\n ...state,\n shouldGetProfiles: false,\n profiles: action.payload,\n };\n }\n case LinkNaBioActionTypes.CREATE_LINK_NA_BIO_SUCCESS:\n case LinkNaBioActionTypes.DELETE_LINK_NA_BIO_SUCCESS:\n case LinkNaBioActionTypes.SORT_SOCIAL_MEDIA_SUCCESS:\n case LinkNaBioActionTypes.DELETE_SOCIAL_MEDIA_SUCCESS:\n case LinkNaBioActionTypes.ADD_SOCIAL_MEDIA_SUCCESS:\n case LinkNaBioActionTypes.UPDATE_SOCIAL_MEDIA_SUCCESS:\n case LinkNaBioActionTypes.UPDATE_LINK_NA_BIO_SUCCESS: {\n return {\n ...state,\n shouldGetProfiles: true,\n };\n }\n case LinkNaBioActionTypes.SOCIAL_MEDIA_ICONS_SET: {\n return {\n ...state,\n socialMediaList: action.payload,\n };\n }\n case LinkNaBioActionTypes.LINK_NA_BIO_STATISTIC_SET: {\n return {\n ...state,\n statistics: action.payload,\n };\n }\n case LinkNaBioActionTypes.VERIFY_DOMAIN_TO_LINK_EXISTS_RESET: {\n return {\n ...state,\n domainToLinkExists: undefined,\n };\n }\n case LinkNaBioActionTypes.VERIFY_DOMAIN_TO_LINK_EXISTS_SUCCESS: {\n return {\n ...state,\n domainToLinkExists: true,\n };\n }\n case LinkNaBioActionTypes.VERIFY_DOMAIN_TO_LINK_EXISTS_FAILURE: {\n return {\n ...state,\n domainToLinkExists: false,\n };\n }\n default:\n return state;\n }\n};\n\nexport default linkAvailabilityReducer;\n","export const steps = {\n LINK_CHOOSE: 1,\n CONTENT: 2,\n TEMPLATE: 3,\n SHARE: 4,\n};\n\nexport const linkNaBioEnum = {\n steps,\n};\n\nexport const LINK_NOT_AVAILABLE = 'LINK_NOT_AVAILABLE';\nexport const LINK_AVAILABLE = 'Username available';\n\n\nexport const colorSchemes = {\n HOSTGATOR_DARK_BLUE: 'HOSTGATOR_DARK_BLUE',\n NEON: 'NEON',\n PASTEL: 'PASTEL',\n WARM: 'WARM',\n HOSTGATOR_BLUE: 'HOSTGATOR_BLUE',\n SIMPLE: 'SIMPLE',\n GRADIENT_ROSE: 'GRADIENT_ROSE',\n GRADIENT_WARM: 'GRADIENT_WARM',\n GRADIENT_DARK: 'GRADIENT_DARK',\n};\n\nexport const templates = {\n MODERN: 'MODERN',\n FRIENDLY: 'FRIENDLY',\n MINIMALIST: 'MINIMALIST',\n FUNNY: 'FUNNY',\n};\n\nexport const wizardStep2Actions = {\n NONE: 'NONE',\n ADD_LINK: 'ADD_LINK',\n EDIT_LINK: 'EDIT_LINK',\n DELETE_LINK: 'DELETE_LINK',\n ADD_SOCIAL_MEDIA_STEP1: 'ADD_SOCIAL_MEDIA_STEP1',\n ADD_SOCIAL_MEDIA_STEP2: 'ADD_SOCIAL_MEDIA_STEP2',\n DELETE_SOCIAL_MEDIA: 'DELETE_SOCIAL_MEDIA',\n EDIT_SOCIAL_MEDIA: 'EDIT_SOCIAL_MEDIA',\n};\n\nexport const linkType = {\n LINK: 'LINK',\n SOCIAL_MEDIA: 'SOCIAL_MEDIA',\n};\n","import {\n call, takeLatest, put, select,\n} from 'redux-saga/effects';\nimport { api } from '@/utils/api';\nimport { authActions } from '@/redux/modules/auth';\nimport linkNaBioActions from './linkNaBio.actions';\nimport { LinkNaBioActionTypes } from './linkNaBio.types';\nimport { config } from '@/config';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport logger from '@/utils/logger';\nimport Cookies from 'js-cookie';\nimport { TEMPLATE_COOKIES } from '@/components/Layout/Template/Template.types';\nimport { LINK_NOT_AVAILABLE } from '@/pages/linkNaBio/LinkNaBioWizardHandler/LinkNaBioWizardHandler.enum';\nimport { locale } from '@/utils/locale';\nimport { commonActions } from '@/redux/modules/common';\n\nconst { WHMCS_URL } = config;\n\nfunction* checkLinkAvailability(action) {\n const { link } = action.payload;\n\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${WHMCS_URL}/api/v3/link-na-bio/profile/${link}/available`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n brand,\n },\n };\n\n yield put(linkNaBioActions.profile.loading(true));\n\n try {\n const response = yield call(api.whmcs.get, request);\n const available = response && response.data && response.data.message;\n yield put(linkNaBioActions.profile.availability.set(available));\n yield put(linkNaBioActions.profile.availability.success());\n } catch (requestError) {\n yield put(linkNaBioActions.profile.availability.set(LINK_NOT_AVAILABLE));\n const error = { ...requestError, userRequestData: request };\n logger.error('Error sagas linkNaBio - method checkLinkAvailability', error);\n yield put(linkNaBioActions.profile.availability.failure());\n }\n\n yield put(linkNaBioActions.profile.loading(false));\n}\n\nfunction* createLinkNaBio(action) {\n const {\n linkName, title, description, template, colorScheme, links, callback, icons,\n } = action.payload;\n\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${WHMCS_URL}/api/v3/link-na-bio/profile`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n brand,\n },\n data: {\n username: linkName,\n title,\n description,\n template,\n color_scheme: colorScheme,\n links,\n icons,\n },\n };\n\n yield put(linkNaBioActions.profile.loading(true));\n\n try {\n yield call(api.whmcs.post, request);\n yield put(linkNaBioActions.profile.create.success());\n callback && callback();\n } catch (requestError) {\n const error = { ...requestError, userRequestData: request };\n logger.error('Error sagas linkNaBio - method createLinkNaBio', error);\n yield put(linkNaBioActions.profile.create.failure());\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.linkNaBioCreationError'),\n type: 'error',\n }));\n }\n\n yield put(linkNaBioActions.profile.loading(false));\n}\n\nfunction* getLinkNaBio() {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${WHMCS_URL}/api/v3/link-na-bio/profiles`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n brand,\n },\n };\n\n yield put(linkNaBioActions.profile.loading(true));\n\n try {\n const response = yield call(api.whmcs.get, request);\n const profiles = (response && response.data) || [];\n yield put(linkNaBioActions.profile.set(profiles));\n yield put(linkNaBioActions.profile.get.success());\n } catch (requestError) {\n const error = { ...requestError, userRequestData: request };\n logger.error('Error sagas linkNaBio - method getLinkNaBio', error);\n yield put(linkNaBioActions.profile.get.failure());\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.profileLoadingError'),\n type: 'error',\n }));\n }\n\n yield put(linkNaBioActions.profile.loading(false));\n}\n\nfunction* updateLinkNaBio(action) {\n const {\n linkName, title, description, template, colorScheme, profileId, callback, domainToLink, isRemovingDomain, isExternalDomain, nameServer, hostingId, domainId,\n } = action.payload;\n\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${WHMCS_URL}/api/v3/link-na-bio/profile/${profileId}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n brand,\n 'x-nameserver-host': nameServer,\n 'x-hosting-id': hostingId,\n },\n data: {\n username: linkName,\n title,\n description,\n template,\n color_scheme: colorScheme,\n domain: domainToLink,\n domain_external: isExternalDomain,\n domain_id: domainId,\n },\n };\n\n try {\n yield call(api.whmcs.put, request);\n yield put(linkNaBioActions.profile.update.success());\n\n if (isRemovingDomain) {\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.domainLinked'),\n type: 'success',\n }));\n }\n callback && callback();\n } catch (requestError) {\n const error = { ...requestError, userRequestData: request };\n logger.error('Error sagas linkNaBio - method updateLinkNaBio', error);\n yield put(linkNaBioActions.profile.update.failure());\n yield put(commonActions.notifications.set({\n label: isRemovingDomain ? locale('linkNaBio.toasts.domainRemoved') : locale('linkNaBio.toasts.linkEdition'),\n type: 'error',\n }));\n }\n}\n\nfunction* deleteLinkNaBio(action) {\n const { profileId } = action.payload;\n\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${WHMCS_URL}/api/v3/link-na-bio/profile/${profileId}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n brand,\n },\n };\n\n yield put(linkNaBioActions.profile.loading(true));\n\n try {\n yield call(api.whmcs.useDelete, request);\n yield put(linkNaBioActions.profile.delete.success());\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.linkNaBioDeleteSuccess'),\n type: 'success',\n }));\n } catch (requestError) {\n const error = { ...requestError, userRequestData: request };\n logger.error('Error sagas linkNaBio - method deleteLinkNaBio', error);\n yield put(linkNaBioActions.profile.delete.failure());\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.linkNaBioDeleteError'),\n type: 'error',\n }));\n }\n\n yield put(linkNaBioActions.profile.loading(false));\n}\n\nfunction* addNewLinks(action) {\n const { profileId, links } = action.payload;\n\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${WHMCS_URL}/api/v3/link-na-bio/profile/${profileId}/link`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n brand,\n },\n data: {\n links,\n profile_id: profileId,\n },\n };\n\n\n yield put(linkNaBioActions.link.loading(true));\n\n try {\n yield call(api.whmcs.post, request);\n yield put(linkNaBioActions.profile.get.request());\n yield put(linkNaBioActions.link.add.success());\n } catch (requestError) {\n const error = { ...requestError, userRequestData: request };\n logger.error('Error sagas linkNaBio - method addNewLink', error);\n yield put(linkNaBioActions.link.add.failure());\n yield put(linkNaBioActions.profile.get.request());\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.linkEdition'),\n type: 'error',\n }));\n }\n\n yield put(linkNaBioActions.link.loading(false));\n}\n\nfunction* updateLink(action) {\n const { profileId, link } = action.payload;\n\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${WHMCS_URL}/api/v3/link-na-bio/profile/${profileId}/link/${link.id}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n brand,\n },\n data: {\n description: link.description,\n link: link.link,\n },\n };\n\n yield put(linkNaBioActions.link.loading(true));\n try {\n yield call(api.whmcs.put, request);\n yield put(linkNaBioActions.link.update.success());\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.linkUpdated'),\n type: 'success',\n }));\n } catch (requestError) {\n const error = { ...requestError, userRequestData: request };\n logger.error('Error sagas linkNaBio - method updateLink', error);\n yield put(linkNaBioActions.link.update.failure());\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.linkEdition'),\n type: 'error',\n }));\n }\n\n yield put(linkNaBioActions.link.loading(false));\n}\n\nfunction* reorderLinks(action) {\n const { profileId, links } = action.payload;\n\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${WHMCS_URL}/api/v3/link-na-bio/profile/${profileId}/link/sort`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n brand,\n },\n data: {\n links,\n },\n };\n\n yield put(linkNaBioActions.link.loading(true));\n try {\n yield call(api.whmcs.put, request);\n yield put(linkNaBioActions.link.add.success());\n } catch (requestError) {\n const error = { ...requestError, userRequestData: request };\n logger.error('Error sagas linkNaBio - method reorderLinks', error);\n yield put(linkNaBioActions.link.add.failure());\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.linkEdition'),\n type: 'error',\n }));\n }\n\n yield put(linkNaBioActions.link.loading(false));\n}\n\nfunction* deleteLink(action) {\n const { profileId, linkId } = action.payload;\n\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${WHMCS_URL}/api/v3/link-na-bio/profile/${profileId}/link/${linkId}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n brand,\n },\n };\n\n yield put(linkNaBioActions.link.loading(true));\n try {\n yield call(api.whmcs.useDelete, request);\n yield put(linkNaBioActions.link.add.success());\n\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.linkDeleteSuccess'),\n type: 'success',\n }));\n } catch (requestError) {\n const error = { ...requestError, userRequestData: request };\n logger.error('Error sagas linkNaBio - method deleteLink', error);\n yield put(linkNaBioActions.link.add.failure());\n\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.linkDeleteError'),\n type: 'error',\n }));\n }\n\n yield put(linkNaBioActions.link.loading(false));\n}\n\nfunction* addNewSocialMedia(action) {\n const { profileId, links } = action.payload;\n\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${WHMCS_URL}/api/v3/link-na-bio/profile/${profileId}/social-icon`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n brand,\n },\n data: {\n icons: links,\n profile_id: profileId,\n },\n };\n\n yield put(linkNaBioActions.socialMedia.loading(true));\n\n try {\n yield call(api.whmcs.post, request);\n yield put(linkNaBioActions.profile.get.request());\n yield put(linkNaBioActions.socialMedia.add.success());\n } catch (requestError) {\n const error = { ...requestError, userRequestData: request };\n logger.error('Error sagas linkNaBio - method addNewSocialMedia', error);\n yield put(linkNaBioActions.socialMedia.add.failure());\n yield put(linkNaBioActions.profile.get.request());\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.linkEdition'),\n type: 'error',\n }));\n }\n\n yield put(linkNaBioActions.socialMedia.loading(false));\n}\n\nfunction* updateSocialMedia(action) {\n const { profileId, link } = action.payload;\n\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${WHMCS_URL}/api/v3/link-na-bio/profile/${profileId}/social-icon/${link.id}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n brand,\n },\n data: {\n value: link.link,\n },\n };\n\n yield put(linkNaBioActions.socialMedia.loading(true));\n try {\n yield call(api.whmcs.put, request);\n yield put(linkNaBioActions.socialMedia.update.success());\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.linkUpdated'),\n type: 'success',\n }));\n } catch (requestError) {\n const error = { ...requestError, userRequestData: request };\n logger.error('Error sagas linkNaBio - method updateSocialMedia', error);\n yield put(linkNaBioActions.socialMedia.update.failure());\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.linkEdition'),\n type: 'error',\n }));\n }\n\n yield put(linkNaBioActions.socialMedia.loading(false));\n}\n\nfunction* reorderSocialMedia(action) {\n const { profileId, links } = action.payload;\n\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${WHMCS_URL}/api/v3/link-na-bio/profile/${profileId}/social-icon/sort`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n brand,\n },\n data: {\n icons: links,\n },\n };\n\n yield put(linkNaBioActions.socialMedia.loading(true));\n try {\n yield call(api.whmcs.put, request);\n yield put(linkNaBioActions.socialMedia.sort.success());\n } catch (requestError) {\n const error = { ...requestError, userRequestData: request };\n logger.error('Error sagas linkNaBio - method reorderSocialMedia', error);\n yield put(linkNaBioActions.socialMedia.sort.failure());\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.linkEdition'),\n type: 'error',\n }));\n }\n\n yield put(linkNaBioActions.socialMedia.loading(false));\n}\n\nfunction* deleteSocialMedia(action) {\n const { profileId, linkId } = action.payload;\n\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${WHMCS_URL}/api/v3/link-na-bio/profile/${profileId}/social-icon/${linkId}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n brand,\n },\n };\n\n yield put(linkNaBioActions.socialMedia.loading(true));\n try {\n yield call(api.whmcs.useDelete, request);\n yield put(linkNaBioActions.socialMedia.delete.success());\n\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.linkDeleteSuccess'),\n type: 'success',\n }));\n } catch (requestError) {\n const error = { ...requestError, userRequestData: request };\n logger.error('Error sagas linkNaBio - method deleteSocialMedia', error);\n yield put(linkNaBioActions.socialMedia.delete.failure());\n\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.linkDeleteError'),\n type: 'error',\n }));\n }\n\n yield put(linkNaBioActions.socialMedia.loading(false));\n}\n\nfunction* getSocialIcons() {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${WHMCS_URL}/api/v3/link-na-bio/social-icons`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n brand,\n },\n };\n yield put(linkNaBioActions.socialMedia.loading(true));\n try {\n const response = yield call(api.whmcs.get, request);\n yield put(linkNaBioActions.socialMedia.icons.set(response.data));\n yield put(linkNaBioActions.socialMedia.icons.success());\n } catch (requestError) {\n const error = { ...requestError, userRequestData: request };\n logger.error('Error sagas linkNaBio - method getSocialIcons', error);\n yield put(linkNaBioActions.socialMedia.icons.failure());\n }\n\n yield put(linkNaBioActions.socialMedia.loading(false));\n}\n\nfunction* getProfileStatistics(action) {\n const { profileId, periodIntervalInDays } = action.payload;\n\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${WHMCS_URL}/api/v3/link-na-bio/profile/${profileId}/statistics?period=${periodIntervalInDays}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n brand,\n },\n };\n\n yield put(linkNaBioActions.profile.loading(true));\n try {\n const response = yield call(api.whmcs.get, request);\n yield put(linkNaBioActions.statistic.set(response.data));\n yield put(linkNaBioActions.statistic.success());\n } catch (requestError) {\n const error = { ...requestError, userRequestData: request };\n logger.error('Error sagas linkNaBio - method getProfileStatistics', error);\n yield put(linkNaBioActions.statistic.failure());\n\n yield put(commonActions.notifications.set({\n label: locale('linkNaBio.toasts.linkEdition'),\n type: 'error',\n }));\n }\n\n yield put(linkNaBioActions.profile.loading(false));\n}\n\nfunction* sagas() {\n yield takeLatest(LinkNaBioActionTypes.LINK_NA_BIO_AVAILABILITY_REQUEST, checkLinkAvailability);\n yield takeLatest(LinkNaBioActionTypes.CREATE_LINK_NA_BIO_REQUEST, createLinkNaBio);\n yield takeLatest(LinkNaBioActionTypes.GET_LINK_NA_BIO_REQUEST, getLinkNaBio);\n yield takeLatest(LinkNaBioActionTypes.UPDATE_LINK_NA_BIO_REQUEST, updateLinkNaBio);\n yield takeLatest(LinkNaBioActionTypes.DELETE_LINK_NA_BIO_REQUEST, deleteLinkNaBio);\n yield takeLatest(LinkNaBioActionTypes.ADD_LINKS_REQUEST, addNewLinks);\n yield takeLatest(LinkNaBioActionTypes.UPDATE_LINK_REQUEST, updateLink);\n yield takeLatest(LinkNaBioActionTypes.SORT_LINKS_REQUEST, reorderLinks);\n yield takeLatest(LinkNaBioActionTypes.DELETE_LINK_REQUEST, deleteLink);\n yield takeLatest(LinkNaBioActionTypes.ADD_SOCIAL_MEDIA_REQUEST, addNewSocialMedia);\n yield takeLatest(LinkNaBioActionTypes.UPDATE_SOCIAL_MEDIA_REQUEST, updateSocialMedia);\n yield takeLatest(LinkNaBioActionTypes.SORT_SOCIAL_MEDIA_REQUEST, reorderSocialMedia);\n yield takeLatest(LinkNaBioActionTypes.DELETE_SOCIAL_MEDIA_REQUEST, deleteSocialMedia);\n yield takeLatest(LinkNaBioActionTypes.SOCIAL_MEDIA_ICONS_REQUEST, getSocialIcons);\n yield takeLatest(LinkNaBioActionTypes.LINK_NA_BIO_STATISTIC_REQUEST, getProfileStatistics);\n}\n\nexport default sagas;\n","import React from 'react';\nimport {\n call, takeLatest, put, select,\n} from 'redux-saga/effects';\nimport { api } from '@/utils/api';\nimport { SitesActionTypes } from './sites.types';\nimport sitesActions from './sites.actions';\nimport {\n AWS_GATOR_SOLUTIONS_URL, CACHED_AWS_GATOR_SOLUTIONS_URL, COUNTRY, config,\n} from '@/config';\nimport { authActions } from '@/redux/modules/auth';\nimport sitesAssembly from './sites.assembly';\nimport { commonActions } from '@/redux/modules/common';\nimport { locale } from '@/utils/locale';\nimport {\n identify as identifyAmplitude, Identify as IdentifyObject,\n} from '@amplitude/analytics-browser';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { AUTO_SSL_STATUS } from '@/enums/sites/status.enum';\nimport Cookies from 'js-cookie';\nimport { TEMPLATE_COOKIES } from '@/components/Layout/Template/Template.types';\nimport logger from '@/utils/logger';\nimport { linkNaBioActions } from '../linkNaBio';\n\nexport function* getSitesRequest() {\n const { jwt: jwtToken, token } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n yield put(authActions.tokens.jwt.update());\n\n const request = {\n url: `${CACHED_AWS_GATOR_SOLUTIONS_URL}/hostings/domains`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-region': brand,\n 'x-service-token': jwtToken,\n },\n };\n\n yield put(sitesActions.loadingSites.set(true));\n\n try {\n const response = yield call(api.aws.get, request);\n\n const sitesData = sitesAssembly.receiveSitesFromGatorSolutions(response);\n\n if (sitesData) {\n const identifyObject = new IdentifyObject();\n identifyObject.set('sites_amount', sitesData.length);\n identifyAmplitude(identifyObject);\n }\n\n yield put(sitesActions.sites.set(sitesData));\n yield put(sitesActions.sites.success());\n yield put(sitesActions.loadingSites.set(false));\n } catch (e) {\n const error = { ...e, userRequestData: request };\n logger.error('Error sagas getSitesRequest', error);\n yield put(sitesActions.sites.failure());\n }\n yield put(sitesActions.loadingSites.set(false));\n}\n\nfunction* redirectToEdit(action) {\n const { jwt: jwtToken, token } = yield select(state => state.auth);\n const {\n hostingId,\n domain,\n history,\n siteBuilderUrl,\n sitesWizardUrl,\n webPresenceUrl,\n cpanelUrl,\n } = action.payload;\n const brand = isBRServer ? 'br' : 'es';\n yield put(authActions.tokens.jwt.update());\n\n const request = {\n url: `${CACHED_AWS_GATOR_SOLUTIONS_URL}/hosting/${hostingId}/builder_tools/${domain}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-region': brand,\n 'x-service-token': jwtToken,\n },\n };\n\n yield put(sitesActions.site.loadRedirect(domain));\n try {\n const response = yield call(api.aws.get, request);\n\n const rules = {\n site_builder_unpublished: () => window.open(siteBuilderUrl(domain)),\n site_builder: () => window.open(siteBuilderUrl(domain)),\n empty: () => history.push(`${sitesWizardUrl}/${domain}`),\n webpresence: () => window.open(`${webPresenceUrl}${hostingId}`),\n undentified: () => cpanelUrl({ hostingId }),\n };\n\n const isInToolsArray = [\n 'site_builder_unpublished',\n 'site_builder',\n 'empty',\n 'webpresence',\n 'undentified',\n ].includes(response.data.tool);\n const isWordpress = response.data.tool.toLowerCase().includes('wordpress');\n\n if (isInToolsArray) {\n rules[response.data.tool]();\n }\n\n if (isWordpress) {\n window.open(`https://${domain}/wp-admin`);\n }\n\n if (!isInToolsArray && !isWordpress && response.data.tool) {\n cpanelUrl({ hostingId, softaculous: true });\n }\n } catch (e) {\n const error = { ...e, userRequestData: request };\n logger.error('Error sagas getSitesRequest', error);\n }\n yield put(sitesActions.site.loadRedirect(false));\n}\n\nfunction* deleteSite(action) {\n const { site, setSiteInExclusion } = action.payload;\n yield put(authActions.tokens.jwt.update());\n const { token } = yield select(state => state.auth);\n const { id: userId, builderEmail } = yield select(state => state.summary);\n\n yield put(sitesActions.loadingExclusion.set(true));\n\n const request = {\n url: `${config.AWS_SITEBUILDER_URL}/sitebuilder/${builderEmail}/${site.site}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Client-ID': userId,\n 'X-Brand': COUNTRY,\n },\n };\n\n try {\n yield call(api.aws.delete, request);\n\n yield put(commonActions.notifications.set({\n label: ({locale('sites.exclusionToast.success')}
),\n type: 'success',\n }));\n yield put(sitesActions.sites.request());\n } catch (e) {\n const error = { ...e, userRequestData: request };\n logger.error('Error sagas deleteSite', error);\n yield put(commonActions.notifications.set({\n label: ({locale('sites.exclusionToast.failure')}
),\n type: 'error',\n }));\n }\n setSiteInExclusion(false);\n yield put(sitesActions.loadingExclusion.set(false));\n}\n\nexport function* getDomainsRequest(action) {\n const { getSitesWithBuilderTools } = action.payload;\n yield put(authActions.tokens.jwt.update());\n const { jwt: jwtToken } = yield select(state => state.auth);\n const { id: userId } = yield select(state => state.summary);\n\n yield put(sitesActions.loadingDomains.set(true));\n try {\n const request = {\n headers: {\n Authorization: `Bearer ${jwtToken}`,\n 'X-Client-ID': userId,\n 'X-Brand': COUNTRY,\n },\n url: `/clients/domains${getSitesWithBuilderTools ? '?bringDomainsWithBuilderTools=true' : ''}`,\n };\n\n const response = yield call(api.aws.get, request);\n const domainsData = sitesAssembly.receiveDomains(response);\n\n yield put(sitesActions.domains.set(domainsData));\n yield put(sitesActions.domains.success());\n } catch (e) {\n yield put(sitesActions.domains.failure());\n }\n yield put(sitesActions.loadingDomains.set(false));\n}\n\nexport function* getTlds() {\n yield put(sitesActions.loadingTlds.set(true));\n try {\n const request = {\n url: '/api/v3/tld',\n headers: {\n brand: COUNTRY.toUpperCase(),\n },\n };\n\n const response = yield call(api.whmcs.get, request);\n\n const tlds = sitesAssembly.receiveTlds(response);\n\n yield put(sitesActions.tlds.set(tlds));\n yield put(sitesActions.tlds.success());\n } catch (e) {\n yield put(sitesActions.tlds.failure());\n }\n yield put(sitesActions.loadingTlds.set(false));\n}\n\nexport function* getDomainAvailability(action) {\n yield put(authActions.tokens.jwt.update());\n const { token } = yield select(state => state.auth);\n const { domain } = action.payload;\n\n yield put(sitesActions.loadingDomainValidation.set(true));\n try {\n const request = {\n url: `${config.API_URL}/clientarea/br/check-domain-available/${domain}`,\n headers: {\n Authorization: `Bearer ${token}`,\n },\n };\n\n const response = yield call(api.whmcs.get, request);\n\n const domainAvailability = sitesAssembly.receiveDomainAvailability(response);\n\n yield put(sitesActions.domainAvailability.set({ ...domainAvailability, domainAndSubdomain: domain }));\n yield put(sitesActions.domainAvailability.success());\n } catch (e) {\n yield put(sitesActions.domainAvailability.failure());\n if (e.response && e.response.status === 401) {\n yield put(authActions.tokens.jwt.errorDuringRefresh(true));\n }\n }\n yield put(sitesActions.loadingDomainValidation.set(false));\n}\n\nexport function* getPlans() {\n yield put(authActions.tokens.jwt.update());\n const { jwt: jwtToken, token } = yield select(state => state.auth);\n const { id: userId } = yield select(state => state.summary);\n const brand = isBRServer ? 'br' : 'es';\n const endpoint = '/plans';\n\n yield put(sitesActions.loadingPlans.set(true));\n\n const request = {\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Client-ID': userId,\n 'x-region': brand,\n 'x-service-token': jwtToken,\n },\n url: CACHED_AWS_GATOR_SOLUTIONS_URL + endpoint,\n };\n\n try {\n let response = null;\n\n response = yield call(api.aws.get, request);\n\n const plansData = sitesAssembly.receivePlans(response);\n\n yield put(sitesActions.plans.set(plansData));\n yield put(sitesActions.plans.success());\n } catch (e) {\n yield put(sitesActions.plans.failure());\n }\n yield put(sitesActions.loadingPlans.set(false));\n}\n\nexport function* setWarningSeen() {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { jwt: jwtToken } = yield select(state => state.auth);\n const { id: userId } = yield select(state => state.summary);\n\n const request = {\n headers: {\n Authorization: `Bearer ${jwtToken}`,\n 'X-Client-ID': userId,\n 'X-Brand': COUNTRY,\n },\n url: '/sites/warning',\n };\n\n try {\n yield call(api.aws.post, request);\n yield put(sitesActions.warnings.success());\n } catch (e) {\n const error = { ...e, userRequestData: request };\n logger.error('Error sagas setWarningSeen', error);\n yield put(sitesActions.warnings.failure());\n }\n}\n\nexport function* linkDomainToPlan(action) {\n yield put(authActions.tokens.jwt.update());\n const { domain, planExternalId } = action.payload;\n const { jwt: jwtToken, token } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n const clientareaBaseUrl = `api/v2/clientarea/${brand}/user/hostings`;\n yield put(sitesActions.loading.set(true));\n\n const request = {\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n },\n url: `${clientareaBaseUrl}/domain`,\n data: {\n domain,\n external_id: planExternalId,\n },\n };\n\n try {\n yield call(api.whmcs.post, request);\n yield put(sitesActions.aditionalDomain.success());\n yield put(sitesActions.loading.set(false));\n return true;\n } catch (error) {\n if (error && error.message.includes(`A DNS entry for the domain “${domain}.cloudintegrationlatam.com” already exists`)) {\n yield put(sitesActions.aditionalDomain.success());\n } else {\n yield put(sitesActions.aditionalDomain.failure());\n }\n yield put(sitesActions.loading.set(false));\n return false;\n }\n}\n\nexport function* changeDomainDns(action) {\n const { domainId, planId, selectedDomain } = action.payload;\n\n const { token } = yield select(state => state.auth);\n const request = {\n headers: {\n Authorization: token,\n },\n url: `api/v2/clientarea/br/dns/domain/${domainId}`,\n data: { hostingId: planId },\n };\n\n try {\n yield call(api.whmcs.put, request);\n yield put(sitesActions.changeDomainDns.success());\n } catch (e) {\n yield put(sitesActions.changeDomainDns.failure());\n const error = { ...e, userRequestData: request, selectedDomain };\n logger.error('Error sagas changeDomainDns', error);\n }\n}\n\nexport function* getDomainDns({ payload }) {\n const { AWS_DNS_SERVICE_URL } = config;\n const { domainLabel, onDomainNotRegistered } = payload;\n yield put(authActions.tokens.jwt.update());\n const { jwt: jwtToken } = yield select(state => state.auth);\n yield put(sitesActions.domainDns.resetStatus());\n yield put(sitesActions.loading.set(true));\n try {\n const request = {\n headers: {\n Authorization: `Bearer ${jwtToken}`,\n },\n url: `${AWS_DNS_SERVICE_URL}/domains/${domainLabel}/whois`,\n };\n const response = yield call(api.aws.get, request);\n const domainDns = sitesAssembly.receiveDomainDns(response.data);\n yield put(sitesActions.domainDns.set(domainDns));\n yield put(sitesActions.domainDns.success());\n yield put(linkNaBioActions.domainVerify.success());\n } catch (e) {\n yield put(sitesActions.domainDns.failure());\n onDomainNotRegistered && onDomainNotRegistered();\n yield put(linkNaBioActions.domainVerify.failure());\n }\n yield put(sitesActions.loading.set(false));\n}\n\nexport function* getPlanDns({ payload }) {\n const { planId } = payload;\n yield put(authActions.tokens.jwt.update());\n const { token } = yield select(state => state.auth);\n\n yield put(sitesActions.loading.set(true));\n try {\n const request = {\n headers: {\n Authorization: token,\n },\n url: `api/v2/clientarea/${COUNTRY}/product/hosting/${planId}`,\n };\n const response = yield call(api.whmcs.get, request);\n const hasSiteBuilderActive = sitesAssembly.receiveHasSiteBuilderActive(response.data);\n const planDns = sitesAssembly.receivePlanDns(response.data);\n\n yield put(sitesActions.hasSiteBuilderActive.set(hasSiteBuilderActive));\n yield put(sitesActions.planDns.set(planDns));\n yield put(sitesActions.planDns.success());\n } catch (e) {\n yield put(sitesActions.planDns.failure());\n }\n yield put(sitesActions.loading.set(false));\n}\n\nexport function* requestWordPressInstallation({ payload }) {\n yield put(sitesActions.wordpressInstallation.set(true));\n const { jwt: jwtToken, token } = yield select(state => state.auth);\n const { id: userId } = yield select(state => state.summary);\n const {\n wordpress,\n setHgPluginIsInstall,\n isWondersuiteEnabled,\n themeId,\n userSelectedWondersuiteTrial,\n isFastCheckoutAddonEnabled,\n userSelectedUseEcommercePlus,\n requestAutoSsl,\n } = payload;\n\n const defaultAddonId = '14';\n const defaultPaymentMethod = 'braspag_credit_1x';\n const defaultPaymentCycle = 'monthly';\n\n const data = {\n customer_id: userId,\n softdomain: wordpress.domain,\n softsubmit: 1,\n admin_username: wordpress.admin,\n admin_pass: wordpress.password,\n admin_email: wordpress.email,\n site_name: wordpress.name,\n site_desc: wordpress.description,\n theme_id: themeId,\n sets_name: wordpress.sets,\n external_id: wordpress.external_id,\n };\n\n const wpType = userSelectedWondersuiteTrial || userSelectedUseEcommercePlus ? 'basic' : '';\n\n if (isWondersuiteEnabled) {\n data.wp_type = wpType;\n }\n\n const requestPayload = isFastCheckoutAddonEnabled ? {\n wp_install: data,\n } : data;\n\n isFastCheckoutAddonEnabled && (userSelectedWondersuiteTrial && !userSelectedUseEcommercePlus) && (requestPayload.addon = {\n products: [],\n service_id: wordpress.external_id.toString(),\n addon_id: defaultAddonId,\n payment_method: defaultPaymentMethod,\n cycle: defaultPaymentCycle,\n offer_contexts: ['criar_site_trial_woopremium_activation'],\n is_trial: true,\n });\n\n const headers = isWondersuiteEnabled ? { Authorization: token } : {\n Authorization: `Bearer ${jwtToken}`,\n 'X-Client-ID': userId,\n 'X-Brand': COUNTRY,\n };\n\n const url = isWondersuiteEnabled\n ? `api/v2/clientarea/${COUNTRY}/user/worpdpress/hiive/configure`\n : `${config.AWS_PRODUCT_LIFECYCLE_URL}/wordpress/install`;\n\n try {\n const request = {\n headers,\n data: requestPayload,\n url,\n };\n const response = isWondersuiteEnabled ? yield call(api.whmcs.put, request) : yield call(api.aws.post, request);\n const hgPluginInstalled = sitesAssembly.hgPluginInstalled(response);\n yield put(sitesActions.wordpressInstallation.success());\n yield put(sitesActions.wordpressInstallation.setStatus(true));\n\n if (hgPluginInstalled) {\n setHgPluginIsInstall(true);\n } else {\n setHgPluginIsInstall(false);\n }\n requestAutoSsl && requestAutoSsl();\n } catch (e) {\n yield put(sitesActions.wordpressInstallation.failure());\n yield put(sitesActions.wordpressInstallation.setStatus(false));\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('sitesWizard.wordPressInstall.errorToast')}`}\n
\n ),\n type: 'error',\n }));\n }\n\n yield put(sitesActions.wordpressInstallation.set(false));\n}\n\nexport function* getSurveyQuestionsAnswered({ payload }) {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { SURVEY_API } = config;\n const { jwt: jwtToken } = yield select(state => state.auth);\n const { id: userId } = yield select(state => state.summary);\n const { surveyId } = payload;\n yield put(sitesActions.loading.set(true));\n try {\n const request = {\n headers: {\n Authorization: `Bearer ${jwtToken}`,\n 'X-Client-ID': userId,\n 'X-Brand': COUNTRY,\n },\n url: `${SURVEY_API}/users/${userId}/surveys/${surveyId}`,\n };\n\n const response = yield call(api.aws.get, request);\n const surveyAnswersData = sitesAssembly.receiveSurveyQuestionsAnswered(response.data[0]);\n yield put(sitesActions.surveyQuestionsAnswered.set(surveyAnswersData));\n yield put(sitesActions.surveyQuestionsAnswered.success());\n } catch (e) {\n yield put(sitesActions.surveyQuestionsAnswered.failure());\n }\n yield put(sitesActions.loading.set(false));\n}\n\nexport function* requestAddonCheck({ payload }) {\n const brand = isBRServer ? 'br' : 'es';\n const { token } = yield select(state => state.auth);\n const { hostingId } = payload;\n yield put(sitesActions.loading.set(true));\n try {\n const request = {\n headers: {\n Authorization: token,\n },\n url: `api/v2/clientarea/${brand}/user/hostings/${hostingId}/addon_check`,\n };\n\n const response = yield call(api.whmcs.get, request);\n yield put(sitesActions.addonCheck.success(response.data));\n } catch (e) {\n yield put(sitesActions.addonCheck.failure());\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('sitesWizard.wordPressInstall.errorToast')}`}\n
\n ),\n type: 'error',\n }));\n if (e.response && e.response.status === 401) {\n yield put(authActions.tokens.jwt.errorDuringRefresh(true));\n }\n }\n yield put(sitesActions.loading.set(false));\n}\n\nexport function* requestVerifyIfSiteExist({ payload }) {\n const { token } = yield select(state => state.auth);\n const { hostingId, domain } = payload;\n const brand = isBRServer ? 'br' : 'es';\n yield put(sitesActions.verifyIfSiteExist.loading(true));\n try {\n const request = {\n headers: {\n Authorization: token,\n },\n url: `api/v2/clientarea/${brand}/user/hostings/site/${hostingId}/${domain}/check`,\n };\n\n const response = yield call(api.whmcs.get, request);\n const existSiteInfo = sitesAssembly.receiveSiteExistStatus(response.data.data);\n if (existSiteInfo.onlyDefaultFiles) {\n yield put(sitesActions.verifyIfSiteExist.defaultFilesExclude.request(existSiteInfo));\n } else {\n yield put(sitesActions.verifyIfSiteExist.success(existSiteInfo));\n }\n } catch (e) {\n yield put(sitesActions.verifyIfSiteExist.failure());\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('sitesWizard.wordPressInstall.errorToast')}`}\n
\n ),\n type: 'error',\n }));\n if (e.response && e.response.status === 401) {\n yield put(authActions.tokens.jwt.errorDuringRefresh(true));\n }\n }\n yield put(sitesActions.verifyIfSiteExist.loading(false));\n}\nexport function* uninstallSite({ payload }) {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token } = yield select(state => state.auth);\n\n const {\n hostingId, domain, domainId, domainHasPlan, needToExcludeDefaultFiles, currentlyInstallInfo,\n } = payload;\n const { siteId, siteType, sharedDocumentRoot } = currentlyInstallInfo;\n\n const brand = isBRServer ? 'br' : 'es';\n const isSoftaculous = siteType === 'softaculous';\n const isCpanel = siteType === 'cpanel';\n const clientareaBaseUrl = `api/v2/clientarea/${brand}/user/hostings`;\n const softaculousUrlUninstall = `${clientareaBaseUrl}/site/${hostingId}/${siteId}/${domain}/uninstall`;\n const cpanelUrlUninstall = `${clientareaBaseUrl}/cpanel/${hostingId}/${domain}/uninstall`;\n const readaptUrl = `${clientareaBaseUrl}/domain/readapt`;\n const headers = {\n Authorization: token,\n };\n\n const readaptRequest = {\n headers,\n url: readaptUrl,\n data: {\n hosting_id: hostingId,\n domain,\n domain_id: domainId,\n },\n };\n\n yield put(sitesActions.uninstallSite.loading(true));\n try {\n if (!domainHasPlan) { // if domain doesnt have a plan, add it to selected plan before uninstall\n yield put(sitesActions.aditionalDomain.request(\n domain,\n parseInt(hostingId, 10),\n ));\n }\n if (isSoftaculous) { // Currently install is softaculous: if the site is with shared document root flag true, needs to use readapt after uninstall (one AND other)\n yield call(api.whmcs.useDelete, {\n headers,\n url: softaculousUrlUninstall,\n });\n if (sharedDocumentRoot) {\n yield call(api.whmcs.post, readaptRequest);\n }\n } else if (isCpanel) { // Currently install is cpanel: if the site is with shared document root flag true, needs to use readapt, if isnt, use uninstall (one OR other)\n if (sharedDocumentRoot) {\n yield call(api.whmcs.post, readaptRequest);\n } else {\n yield call(api.whmcs.useDelete, {\n headers,\n url: cpanelUrlUninstall,\n });\n }\n }\n yield put(sitesActions.uninstallSite.success());\n if (needToExcludeDefaultFiles) { // // use the action for automatically uninstall (when only default files are found)\n yield put(sitesActions.verifyIfSiteExist.defaultFilesExclude.success());\n }\n } catch (e) {\n if (needToExcludeDefaultFiles) { // use the action for automatically uninstall (when only default files are found)\n yield put(sitesActions.verifyIfSiteExist.defaultFilesExclude.failure());\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('sitesWizard.wordPressInstall.errorToast')}`}\n
\n ),\n type: 'error',\n }));\n } else { // use the action for manual uninstall\n yield put(sitesActions.uninstallSite.failure());\n }\n }\n yield put(sitesActions.uninstallSite.loading(false));\n}\n\nexport function* requestDomainDnsStatusCheck({ payload }) {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const brand = isBRServer ? 'br' : 'es';\n const { token } = yield select(state => state.auth);\n const { domain } = payload;\n const { jwt: jwtToken } = yield select(state => state.auth);\n try {\n const request = {\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n url: `api/v2/clientarea/${brand}/domains/propagation`,\n };\n const response = yield call(api.whmcs.get, request);\n\n yield put(sitesActions.domainDnsStatusCheck.success(sitesAssembly.receiveChoosenDomainStatus(response.data.data, domain)));\n } catch (e) {\n yield put(sitesActions.domainDnsStatusCheck.failure());\n }\n}\n\nexport function* requestDomainsDnsStatusCheck() {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const brand = isBRServer ? 'br' : 'es';\n const { token } = yield select(state => state.auth);\n const { jwt: jwtToken } = yield select(state => state.auth);\n yield put(sitesActions.allDomainsDnsStatusCheck.loading(true));\n try {\n const request = {\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n url: `api/v2/clientarea/${brand}/domains/propagation`,\n };\n const response = yield call(api.whmcs.get, request);\n yield put(sitesActions.allDomainsDnsStatusCheck.success(response.data.data));\n } catch (e) {\n yield put(sitesActions.allDomainsDnsStatusCheck.failure());\n }\n yield put(sitesActions.allDomainsDnsStatusCheck.loading(false));\n}\n\n\nexport function* requestAutoSSLStart({ payload }) {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token } = yield select(state => state.auth);\n const { domain, hostingId } = payload;\n const { jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${AWS_GATOR_SOLUTIONS_URL}/hosting/${hostingId}/start-autossl/${domain}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-region': brand,\n 'x-service-token': jwtToken,\n },\n };\n\n try {\n const response = yield call(api.aws.post, request);\n if (response.data.success) {\n yield put(sitesActions.ssl.start.success());\n } else {\n yield put(sitesActions.ssl.start.failure());\n }\n } catch (e) {\n const error = { ...e, userRequestData: request };\n logger.error('Error sagas requestAutoSSLStart', error);\n yield put(sitesActions.ssl.start.failure());\n }\n}\n\nexport function* requestAutoSSLProgress({ payload }) {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token } = yield select(state => state.auth);\n const { domain, hostingId } = payload;\n const { jwt: jwtToken } = yield select(state => state.auth);\n const { ssl } = yield select(state => state.sites);\n const brand = isBRServer ? 'br' : 'es';\n const lastLoop = ssl.callLoop === 2;\n\n const request = {\n url: `${AWS_GATOR_SOLUTIONS_URL}/hosting/${hostingId}/check-autossl-progress`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-region': brand,\n 'x-service-token': jwtToken,\n },\n };\n\n try {\n const response = yield call(api.aws.get, request);\n\n if (!lastLoop && response.data.in_progress) {\n yield put(sitesActions.ssl.progress.loop({ callLoop: ssl.callLoop += 1 }));\n }\n\n if (lastLoop && response.data.in_progress) {\n yield put(sitesActions.ssl.progress.failure());\n }\n\n if (!response.data.in_progress) {\n yield put(sitesActions.ssl.check.request({ domain, hostingId }));\n }\n } catch (e) {\n yield put(sitesActions.ssl.progress.failure());\n }\n}\n\nexport function* requestAutoSSLCheck({ payload }) {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token } = yield select(state => state.auth);\n const { hostingId, domain } = payload;\n const { jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${AWS_GATOR_SOLUTIONS_URL}/hosting/${hostingId}/ssl-status/${domain}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-region': brand,\n 'x-service-token': jwtToken,\n },\n };\n\n try {\n const response = yield call(api.aws.get, request);\n\n if (response.data && response.data.status === 'active') {\n yield put(sitesActions.ssl.check.success());\n }\n\n if (response.data && (response.data.status === 'activation_failed' || response.data.status === 'not_installed')) {\n yield put(sitesActions.ssl.check.failure());\n }\n } catch (e) {\n yield put(sitesActions.ssl.check.failure());\n }\n}\n\nexport function* requestSslVerification({ payload }) {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token } = yield select(state => state.auth);\n const { domain, hostingId } = payload;\n const { jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${AWS_GATOR_SOLUTIONS_URL}/hosting/${hostingId}/ssl-pending-check/${domain}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-region': brand,\n 'x-service-token': jwtToken,\n },\n };\n\n yield put(sitesActions.ssl.verification.loading(true));\n try {\n const response = yield call(api.aws.get, request);\n if (response.data) {\n yield put(sitesActions.ssl.verification.set(response.data && response.data.status));\n }\n } catch (e) {\n yield put(sitesActions.ssl.verification.set(AUTO_SSL_STATUS.CAN_INSTALL_SSL));\n }\n yield put(sitesActions.ssl.verification.loading(false));\n}\n\nexport function* postSslDomainConfiguration({ payload }) {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token } = yield select(state => state.auth);\n const { domain } = payload;\n const { jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${AWS_GATOR_SOLUTIONS_URL}/ssl/domain_configuration/${domain}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-region': brand,\n 'x-service-token': jwtToken,\n },\n };\n\n yield put(sitesActions.ssl.pointDomain.loading(true));\n try {\n const response = yield call(api.aws.post, request);\n if (response.data.success) {\n yield put(sitesActions.ssl.pointDomain.success());\n } else {\n yield put(sitesActions.ssl.pointDomain.failure());\n }\n } catch (e) {\n yield put(sitesActions.ssl.pointDomain.failure());\n }\n yield put(sitesActions.ssl.pointDomain.loading(false));\n}\n\nexport function* hasWelcomeChecklistInProgress({ payload }) {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token } = yield select(state => state.auth);\n const { clientId, action } = payload;\n const brand = isBRServer ? 'br' : 'es';\n try {\n const request = {\n headers: {\n Authorization: token,\n },\n url: `api/v2/clientarea/${brand}/welcome-checklist?client_id=${clientId}`,\n };\n const response = yield call(api.whmcs.get, request);\n if (response && response.data && response.data.data) {\n yield put(sitesActions.welcomeChecklist.set(response.data.data));\n action && action(true);\n yield put(sitesActions.welcomeChecklist.success());\n }\n } catch (e) {\n yield put(sitesActions.welcomeChecklist.failure());\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('sitesWizard.wordPressInstall.errorToast')}`}\n
\n ),\n type: 'error',\n }));\n }\n}\n\nexport function* updateStepWelcomeChecklist({ payload }) {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token } = yield select(state => state.auth);\n\n const {\n clientId,\n hostingId,\n step,\n check,\n } = payload;\n\n const brand = isBRServer ? 'br' : 'es';\n try {\n const request = {\n data: {\n step,\n hostingId,\n userId: clientId,\n check,\n },\n headers: {\n Authorization: token,\n },\n url: `api/v2/clientarea/${brand}/welcome-checklist/`,\n };\n const response = yield call(api.whmcs.post, request);\n if (response && response.data && response.data.data) {\n yield put(sitesActions.welcomeChecklist.success());\n }\n } catch (e) {\n yield put(sitesActions.welcomeChecklist.failure());\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('sitesWizard.wordPressInstall.errorToast')}`}\n
\n ),\n type: 'error',\n }));\n }\n}\n\nexport function* requestCreateRdLead({ payload }) {\n const { token } = yield select(state => state.auth);\n const {\n plan, domain,\n } = payload;\n\n const { name, phoneNumber, email } = yield select(state => state.summary);\n\n try {\n const request = {\n headers: {\n Authorization: token,\n },\n data: {\n payload: {\n name,\n email,\n personal_phone: phoneNumber,\n cf_hg_wiz_criar_site_dominio_apontamento: domain,\n cf_hg_wiz_criar_site_plano_selecionado: plan,\n conversion_identifier: 'hg-wizard-criar-site',\n },\n event_type: 'CONVERSION',\n event_family: 'CDP',\n },\n url: `/platform/conversions?api_key=${config.ECOMMERCE_RD_TOKEN}`,\n };\n\n yield call(api.rdStation.post, request);\n } catch (e) {\n logger.error('Error create RD lead', e);\n }\n}\n\nfunction* sagas() {\n yield takeLatest(SitesActionTypes.REQUEST_GET_SITES, getSitesRequest);\n yield takeLatest(SitesActionTypes.REQUEST_GET_TLDS, getTlds);\n yield takeLatest(SitesActionTypes.REQUEST_GET_DOMAIN_AVAILABILITY, getDomainAvailability);\n yield takeLatest(SitesActionTypes.REQUEST_GET_DOMAINS, getDomainsRequest);\n yield takeLatest(SitesActionTypes.DELETE_SITE, deleteSite);\n yield takeLatest(SitesActionTypes.SET_WARNING_SEEN, setWarningSeen);\n yield takeLatest(SitesActionTypes.REQUEST_WORDPRESS_INSTALLATION, requestWordPressInstallation);\n yield takeLatest(SitesActionTypes.REQUEST_GET_PLANS, getPlans);\n yield takeLatest(SitesActionTypes.REQUEST_ADITIONAL_DOMAIN_TO_PLAN, linkDomainToPlan);\n yield takeLatest(SitesActionTypes.REQUEST_CHANGE_DOMAIN_DNS, changeDomainDns);\n yield takeLatest(SitesActionTypes.REQUEST_DOMAIN_DNS, getDomainDns);\n yield takeLatest(SitesActionTypes.REQUEST_PLAN_DNS, getPlanDns);\n yield takeLatest(SitesActionTypes.REQUEST_SURVEY_QUESTIONS_ANSWERED, getSurveyQuestionsAnswered);\n yield takeLatest(SitesActionTypes.REQUEST_ADDON_CHECK, requestAddonCheck);\n yield takeLatest(SitesActionTypes.REQUEST_VERIFY_SITE_EXIST, requestVerifyIfSiteExist);\n yield takeLatest(SitesActionTypes.REQUEST_DOMAIN_DNS_STATUS_CHECK, requestDomainDnsStatusCheck);\n yield takeLatest(SitesActionTypes.AUTO_SSL_START_REQUEST, requestAutoSSLStart);\n yield takeLatest(SitesActionTypes.AUTO_SSL_PROGRESS_REQUEST, requestAutoSSLProgress);\n yield takeLatest(SitesActionTypes.AUTO_SSL_CHECK_REQUEST, requestAutoSSLCheck);\n yield takeLatest(SitesActionTypes.SSL_VERIFICATION_REQUEST, requestSslVerification);\n yield takeLatest(SitesActionTypes.REQUEST_POST_DOMAIN_TO_HG, postSslDomainConfiguration);\n yield takeLatest(SitesActionTypes.REQUEST_ALL_DOMAINS_DNS_STATUS_CHECK, requestDomainsDnsStatusCheck);\n yield takeLatest(SitesActionTypes.REQUEST_UNINSTALL_SITE, uninstallSite);\n yield takeLatest(SitesActionTypes.GET_STEP_WELCOME_CHECKLIST_REQUEST, hasWelcomeChecklistInProgress);\n yield takeLatest(SitesActionTypes.POST_STEP_WELCOME_CHECKLIST_REQUEST, updateStepWelcomeChecklist);\n yield takeLatest(SitesActionTypes.RD_CREATE_LEAD_REQUEST, requestCreateRdLead);\n yield takeLatest(SitesActionTypes.REDIRECT_TO_EDIT, redirectToEdit);\n}\n\nexport default sagas;\n","import { AUTO_SSL_STATUS } from '@/enums/sites/status.enum';\nimport { SitesActionTypes } from './sites.types';\n\n\nexport const initialState = {\n failedWhoIsAttempt: false,\n forceReloadPropagationData: false,\n loading: false,\n plansLoading: false,\n plansLoaded: false,\n loadingExclusion: false,\n loadingDomains: false,\n loadedDomains: false,\n loadingSites: false,\n loadingDomainValidation: false,\n loadingRedirect: false,\n redirectStatus: null,\n loadedSites: false,\n anotherDomain: null,\n domainAvailability: false,\n domainTldAvailability: false,\n list: [],\n tlds: [],\n loadingTlds: false,\n domainList: [],\n plans: [],\n domainDns: null,\n planDns: null,\n wordpressLoading: false,\n wordpressLoaded: false,\n wordPressInstalled: false,\n questionsAnswered: { ids: [], answers: {} },\n hasSiteBuilderActive: null,\n hostingAlreadyHasWooPremium: null,\n redirectFromPreChat: false,\n loadingVerifyIfSiteExist: false,\n siteExistVerifyFinished: null,\n needToExcludeDefaultFiles: null,\n loadingDefaultFilesExclude: false,\n currentlyInstallInfo: {\n showOverwriteModal: null,\n sharedDocumentRoot: null,\n onlyDefaultFiles: null,\n siteType: null,\n siteId: null,\n },\n loadingUninstall: false,\n uninstallCompleted: false,\n uninstallError: false,\n domainDnsStatus: null,\n allDomainsDnsStatus: [],\n loadingAllDomainsDnsStatus: false,\n ssl: {\n status: null,\n callLoop: 0,\n },\n sslVerification: {\n loading: false,\n status: null,\n },\n sslConfigureDomain: {\n status: null,\n loading: false,\n },\n welcomeCheckListSteps: {\n data: [],\n },\n};\n\nconst sitesReducer = (state = initialState, action) => {\n switch (action.type) {\n case SitesActionTypes.SITES_FROM_PRECHAT: {\n return {\n ...state,\n redirectFromPreChat: action.payload,\n };\n }\n case SitesActionTypes.GET_DOMAIN_DNS_SUCCESS: {\n return {\n ...state,\n redirectStatus: 'success',\n };\n }\n case SitesActionTypes.GET_DOMAIN_DNS_FAILURE: {\n return {\n ...state,\n redirectStatus: 'failure',\n failedWhoIsAttempt: true,\n };\n }\n case SitesActionTypes.RESET_DOMAIN_DNS_STATUS: {\n return {\n ...state,\n redirectStatus: null,\n domainDns: null,\n };\n }\n case SitesActionTypes.SET_LOADING_REDIRECT: {\n return {\n ...state,\n loadingRedirect: action.payload.domain,\n };\n }\n case SitesActionTypes.FORCE_RELOAD: {\n return {\n ...state,\n forceReloadPropagationData: action.payload,\n };\n }\n case SitesActionTypes.SET_LOADING: {\n const { isLoading } = action.payload;\n return {\n ...state,\n loading: isLoading,\n failedWhoIsAttempt: isLoading ? false : state.failedWhoIsAttempt,\n };\n }\n case SitesActionTypes.SET_LOADING_EXCLUSION: {\n const { isLoading } = action.payload;\n return {\n ...state,\n loadingExclusion: isLoading,\n };\n }\n case SitesActionTypes.SET_LOADING_TLDS: {\n const { isLoading } = action.payload;\n return {\n ...state,\n loadingTlds: isLoading,\n };\n }\n case SitesActionTypes.SET_LOADING_DOMAINS: {\n const { isLoading } = action.payload;\n return {\n ...state,\n loadingDomains: isLoading,\n loadedDomains: !isLoading,\n };\n }\n case SitesActionTypes.SET_LOADING_PLANS: {\n const { isLoading } = action.payload;\n return {\n ...state,\n plansLoading: isLoading,\n plansLoaded: !isLoading,\n };\n }\n case SitesActionTypes.SET_LOADING_SITES: {\n const { isLoading } = action.payload;\n return {\n ...state,\n loadingSites: isLoading,\n loadedSites: !isLoading,\n };\n }\n case SitesActionTypes.SET_LOADING_DOMAIN_VALIDATION: {\n return {\n ...state,\n loadingDomainValidation: action.payload.isLoading,\n };\n }\n case SitesActionTypes.SET_SITES: {\n const { sites } = action.payload;\n return {\n ...state,\n list: sites,\n };\n }\n case SitesActionTypes.SET_SITES_DOMAINS: {\n const { domains } = action.payload;\n return {\n ...state,\n domainList: domains,\n };\n }\n case SitesActionTypes.SET_TLDS: {\n const { tlds } = action.payload;\n return {\n ...state,\n tlds,\n };\n }\n case SitesActionTypes.SET_DOMAIN_AVAILABILITY: {\n const {\n domainAvailability,\n domainTldAvailability,\n domain,\n domainAndSubdomain,\n } = action.payload;\n return {\n ...state,\n anotherDomain: domain,\n domainAvailability,\n domainTldAvailability,\n domainAndSubdomain,\n };\n }\n case SitesActionTypes.SET_PLANS: {\n const { plans } = action.payload;\n return {\n ...state,\n plans,\n };\n }\n case SitesActionTypes.SET_DOMAIN_DNS: {\n const { domainDns } = action.payload;\n return {\n ...state,\n domainDns,\n failedWhoIsAttempt: false,\n };\n }\n case SitesActionTypes.SET_PLAN_DNS: {\n const { planDns } = action.payload;\n return {\n ...state,\n planDns,\n };\n }\n case SitesActionTypes.SET_WORDPRESS_INSTALLATION_LOADING: {\n const { isLoading } = action.payload;\n return {\n ...state,\n wordpressLoading: isLoading,\n wordpressLoaded: !isLoading,\n };\n }\n case SitesActionTypes.SET_WORDPRESS_INSTALLATION_STATUS: {\n const { installed } = action.payload;\n return {\n ...state,\n wordPressInstalled: installed,\n };\n }\n case SitesActionTypes.SET_WORDPRESS_INSTALLATION_DEFAULT: {\n return {\n ...state,\n wordpressLoaded: false,\n wordPressInstalled: false,\n };\n }\n case SitesActionTypes.SET_SURVEY_QUESTIONS_ANSWERED: {\n const { questions } = action.payload;\n return {\n ...state,\n questionsAnswered: questions,\n };\n }\n case SitesActionTypes.SET_SITE_BUILDER_ACTIVE: {\n const { hasSiteBuilderActive } = action.payload;\n return {\n ...state,\n hasSiteBuilderActive,\n };\n }\n case SitesActionTypes.GET_ADDON_CHECK_SUCCESS: {\n const { data } = action.payload;\n return {\n ...state,\n hostingAlreadyHasWooPremium: data,\n };\n }\n case SitesActionTypes.SET_ADDON_CHECK_DEFAULT: {\n return {\n ...state,\n hostingAlreadyHasWooPremium: null,\n };\n }\n case SitesActionTypes.GET_VERIFY_SITE_EXIST_LOADING: {\n const { isLoading } = action.payload;\n return {\n ...state,\n loadingVerifyIfSiteExist: isLoading,\n };\n }\n case SitesActionTypes.GET_VERIFY_SITE_EXIST_SUCCESS: {\n return {\n ...state,\n siteExistVerifyFinished: true,\n currentlyInstallInfo: action.payload,\n };\n }\n case SitesActionTypes.GET_VERIFY_SITE_EXIST_DEFAULT_FILES_EXCLUDE: {\n return {\n ...state,\n needToExcludeDefaultFiles: true,\n currentlyInstallInfo: action.payload,\n loadingDefaultFilesExclude: true,\n };\n }\n case SitesActionTypes.GET_VERIFY_SITE_EXIST_DEFAULT_FILES_EXCLUDE_SUCCESS: {\n return {\n ...state,\n needToExcludeDefaultFiles: false,\n siteExistVerifyFinished: false,\n loadingDefaultFilesExclude: false,\n };\n }\n case SitesActionTypes.GET_VERIFY_SITE_EXIST_DEFAULT_FILES_EXCLUDE_FAILURE: {\n return {\n ...state,\n needToExcludeDefaultFiles: false,\n siteExistVerifyFinished: false,\n loadingDefaultFilesExclude: false,\n };\n }\n case SitesActionTypes.GET_VERIFY_SITE_EXIST_FAILURE: {\n return {\n ...state,\n siteExistVerifyFinished: false,\n loadingDefaultFilesExclude: false,\n };\n }\n case SitesActionTypes.GET_VERIFY_SITE_EXIST_RESET: {\n return {\n ...state,\n siteExistVerifyFinished: false,\n needToExcludeDefaultFiles: null,\n loadingDefaultFilesExclude: false,\n currentlyInstallInfo: {\n showOverwriteModal: null,\n sharedDocumentRoot: null,\n onlyDefaultFiles: null,\n siteType: null,\n siteId: null,\n },\n uninstallCompleted: false,\n uninstallError: false,\n };\n }\n case SitesActionTypes.UNINSTALL_SITE_LOADING: {\n const { isLoading } = action.payload;\n return {\n ...state,\n loadingUninstall: isLoading,\n };\n }\n case SitesActionTypes.UNINSTALL_SITE_SUCCESS: {\n return {\n ...state,\n uninstallCompleted: true,\n uninstallError: false,\n };\n }\n case SitesActionTypes.UNINSTALL_SITE_FAILURE: {\n return {\n ...state,\n uninstallCompleted: false,\n uninstallError: true,\n };\n }\n case SitesActionTypes.GET_DOMAIN_DNS_STATUS_CHECK_SUCCESS: {\n const status = action.payload;\n return {\n ...state,\n domainDnsStatus: status,\n };\n }\n case SitesActionTypes.GET_DOMAIN_DNS_STATUS_CHECK_FAILURE: {\n return {\n ...state,\n domainDnsStatus: null,\n };\n }\n case SitesActionTypes.GET_ALL_DOMAINS_DNS_STATUS_CHECK_SUCCESS: {\n const status = action.payload;\n return {\n ...state,\n allDomainsDnsStatus: status,\n };\n }\n case SitesActionTypes.GET_ALL_DOMAINS_DNS_STATUS_CHECK_LOADING: {\n const { isLoading } = action.payload;\n return {\n ...state,\n loadingAllDomainsDnsStatus: isLoading,\n };\n }\n case SitesActionTypes.CLEAR_SSL_STATUS: {\n return {\n ...state,\n ssl: {\n ...state.ssl,\n status: null,\n callLoop: 0,\n },\n sslVerification: {\n ...state.sslVerification,\n status: null,\n },\n sslConfigureDomain: {\n ...state.sslConfigureDomain,\n status: null,\n },\n };\n }\n case SitesActionTypes.AUTO_SSL_START_SUCCESS: {\n return {\n ...state,\n ssl: {\n ...state.ssl,\n status: AUTO_SSL_STATUS.START_SUCCESS,\n },\n };\n }\n case SitesActionTypes.AUTO_SSL_START_FAILURE: {\n return {\n ...state,\n ssl: {\n ...state.ssl,\n status: AUTO_SSL_STATUS.START_FAILURE,\n },\n };\n }\n case SitesActionTypes.AUTO_SSL_PROGRESS_LOOP: {\n return {\n ...state,\n ssl: {\n ...state.ssl,\n callLoop: action.payload.callLoop,\n },\n };\n }\n case SitesActionTypes.AUTO_SSL_PROGRESS_FAILURE: {\n return {\n ...state,\n ssl: {\n ...state.ssl,\n status: AUTO_SSL_STATUS.PROGRESS_FAILURE,\n },\n };\n }\n case SitesActionTypes.AUTO_SSL_CHECK_SUCCESS: {\n return {\n ...state,\n ssl: {\n ...state.ssl,\n status: AUTO_SSL_STATUS.CHECK_SUCCESS,\n },\n };\n }\n case SitesActionTypes.AUTO_SSL_CHECK_FAILURE: {\n return {\n ...state,\n ssl: {\n ...state.ssl,\n status: AUTO_SSL_STATUS.CHECK_FAILURE,\n },\n };\n }\n case SitesActionTypes.SET_LOADING_SSL_VERIFICATION: {\n return {\n ...state,\n sslVerification: {\n ...state.sslVerification,\n loading: action.payload.isLoading,\n },\n };\n }\n case SitesActionTypes.SET_SSL_VERIFICATION: {\n return {\n ...state,\n sslVerification: {\n ...state.sslVerification,\n status: action.payload,\n },\n };\n }\n case SitesActionTypes.POST_DOMAIN_TO_HG_LOADING: {\n return {\n ...state,\n sslConfigureDomain: {\n ...state.sslConfigureDomain,\n loading: action.payload.isLoading,\n },\n };\n }\n case SitesActionTypes.POST_DOMAIN_TO_HG_SUCCESS: {\n return {\n ...state,\n sslConfigureDomain: {\n ...state.sslConfigureDomain,\n status: 'success',\n },\n };\n }\n case SitesActionTypes.POST_DOMAIN_TO_HG_FAILURE: {\n return {\n ...state,\n sslConfigureDomain: {\n ...state.sslConfigureDomain,\n status: 'error',\n },\n };\n }\n case SitesActionTypes.SET_STEP_WELCOME_CHECKLIST: {\n const { data } = action.payload;\n return {\n ...state,\n welcomeCheckListSteps: {\n data,\n },\n };\n }\n default:\n return state;\n }\n};\n\nexport default sitesReducer;\n","export const FormsActionTypes = {\n POST_FORM: 'POST_FORM',\n REQUEST_HG_ROUTINE_BACKUPS: 'REQUEST_HG_ROUTINE_BACKUPS',\n SUCCESS_HG_ROUTINE_BACKUPS: 'SUCCESS_HG_ROUTINE_BACKUPS',\n FAILURE_HG_ROUTINE_BACKUPS: 'FAILURE_HG_ROUTINE_BACKUPS',\n SET_HG_BACKUP_HISTORY_LOAD_STATE: 'SET_HG_BACKUP_HISTORY_LOAD_STATE',\n SET_HG_ROUTINE_BACKUPS: 'SET_HG_ROUTINE_BACKUPS',\n SET_DEFAULT_FORCE_STATE: 'SET_DEFAULT_FORCE_STATE',\n SET_FORCE_STATE: 'SET_FORCE_STATE',\n SKIP_HG_ROUTINE_BACKUPS: 'SKIP_HG_ROUTINE_BACKUPS',\n};\n","import { FormsActionTypes } from './forms.types';\n\nconst sendForm = ({ data, useZendeskV2 }) => ({\n type: FormsActionTypes.POST_FORM,\n payload: { data, useZendeskV2 },\n});\n\nconst setDefaultForceState = () => ({ type: FormsActionTypes.SET_DEFAULT_FORCE_STATE });\nconst setForceState = ({ key, params }) => ({\n type: FormsActionTypes.SET_FORCE_STATE,\n payload: {\n key,\n params,\n },\n});\n\nconst getHgRoutineBackups = ({ id }) => ({ type: FormsActionTypes.REQUEST_HG_ROUTINE_BACKUPS, payload: { id } });\nconst setHgRoutineBackupsSuccess = () => ({ type: FormsActionTypes.SUCCESS_HG_ROUTINE_BACKUPS });\nconst setHgRoutineBackupsFaliure = () => ({ type: FormsActionTypes.FAILURE_HG_ROUTINE_BACKUPS });\nconst setHgRoutineBackupsLoadState = bool => ({ type: FormsActionTypes.SET_HG_BACKUP_HISTORY_LOAD_STATE, payload: bool });\nconst setHgRoutineBackups = payload => ({ type: FormsActionTypes.SET_HG_ROUTINE_BACKUPS, payload });\nconst skipHgRoutine = ({ id }) => ({ type: FormsActionTypes.SKIP_HG_ROUTINE_BACKUPS, payload: { id } });\n\n\nconst actions = {\n send: {\n request: sendForm,\n },\n forceState: {\n clear: setDefaultForceState,\n set: setForceState,\n },\n backupHgRoutine: {\n failure: setHgRoutineBackupsFaliure,\n request: getHgRoutineBackups,\n success: setHgRoutineBackupsSuccess,\n loading: setHgRoutineBackupsLoadState,\n set: setHgRoutineBackups,\n skipHgRoutine,\n },\n};\n\nexport default actions;\n","import { FormsActionTypes } from './forms.types';\n\nexport const initialState = {\n loadingHgBackupHistory: false,\n hgRoutineBackups: {},\n forceState: false,\n rules: {\n active: '',\n selectedProduct: null,\n selectedSector: null,\n selectedNeed: null,\n restorateBackupHgRoutine: {\n selectedRestorationType: null,\n selectedBackupOption: null,\n },\n userBackupRestore: {\n selectedRestorationType: null,\n },\n },\n};\n\nconst formsReducer = (state = initialState, action) => {\n switch (action.type) {\n case FormsActionTypes.POST_FORM: {\n return {\n ...state,\n };\n }\n case FormsActionTypes.SET_HG_BACKUP_HISTORY_LOAD_STATE: {\n return {\n ...state,\n loadingHgBackupHistory: action.payload,\n };\n }\n case FormsActionTypes.SET_HG_ROUTINE_BACKUPS: {\n return {\n ...state,\n hgRoutineBackups: { ...action.payload },\n };\n }\n case FormsActionTypes.SET_DEFAULT_FORCE_STATE:\n return {\n ...state,\n forceState: false,\n active: null,\n };\n case FormsActionTypes.SET_FORCE_STATE:\n return {\n ...state,\n forceState: true,\n rules: {\n ...state.rules,\n active: action.payload.key,\n selectedProduct: action.payload.params.selectedProduct,\n selectedSector: action.payload.params.selectedSector,\n selectedNeed: action.payload.params.selectedNeed,\n [action.payload.key]: action.payload.params,\n },\n };\n default:\n return state;\n }\n};\n\nexport default formsReducer;\n","import {\n call, takeLatest, select, put,\n} from 'redux-saga/effects';\nimport { api } from '@/utils/api';\nimport { FormsActionTypes } from './forms.types';\nimport { commonActions } from '../common';\nimport { formsActions } from '.';\nimport { AWS_GATOR_SOLUTIONS_URL } from '@/config';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport Cookies from 'js-cookie';\nimport { TEMPLATE_COOKIES } from '@/components/Layout/Template/Template.types';\nimport { authActions } from '../auth';\nimport logger from '@/utils/logger';\n\nexport function* skipHgRoutineBackup({ payload }) {\n const { id } = payload;\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${AWS_GATOR_SOLUTIONS_URL}/hosting/${id}/skip-backup`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-region': brand,\n 'x-service-token': jwtToken,\n },\n };\n\n try {\n yield call(api.whmcs.get, request);\n } catch (e) {\n logger.error('Error create RD lead', e);\n }\n}\n\nfunction* openTicket({ payload }) {\n const { data, useZendeskV2 } = payload;\n const { token } = yield select(state => state.auth);\n\n const form = { ...data };\n let shouldSkipHgRoutineBackup = null;\n\n const { locale, onSuccess, onFail } = data;\n const formData = new FormData();\n delete form.root;\n delete form.locale;\n delete form.onSuccess;\n delete form.onFail;\n if (form.skipHgRoutineBackup) {\n shouldSkipHgRoutineBackup = form.skipHgRoutineBackup;\n delete form.onSuccess;\n delete form.onFail;\n }\n\n const datakeys = Object.keys(form);\n datakeys.forEach((key) => {\n if (!Array.isArray(form[key])) {\n formData.append(key, form[key]);\n }\n\n if (Array.isArray(form[key])) {\n form[key].forEach((item) => {\n if (item) {\n formData.append(`${key}[${item.label || ''}]`, item.value || item);\n }\n });\n }\n });\n\n const request = {\n url: useZendeskV2 ? '/api/v3/submitForm' : '/api/v2/submitForm',\n headers: {\n Authorization: `Bearer ${token}`,\n },\n data: formData,\n };\n\n try {\n if (shouldSkipHgRoutineBackup) {\n yield put(formsActions.backupHgRoutine.skipHgRoutine({ id: shouldSkipHgRoutineBackup }));\n }\n yield call(api.whmcs.post, request);\n onSuccess && onSuccess();\n } catch (e) {\n onFail && onFail();\n yield locale && put(commonActions.notifications.set({\n label: locale.forms.error,\n type: 'error',\n }));\n }\n}\n\nfunction* getHgRoutineBackups(action) {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { id } = action.payload;\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${AWS_GATOR_SOLUTIONS_URL}/hosting/${id}/available-backups`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-region': brand,\n 'x-service-token': jwtToken,\n },\n };\n\n yield put(formsActions.backupHgRoutine.loading(true));\n try {\n const response = yield call(api.aws.get, request);\n yield put(formsActions.backupHgRoutine.set(response.data));\n yield put(formsActions.backupHgRoutine.success());\n } catch (e) {\n yield put(formsActions.backupHgRoutine.failure());\n }\n yield put(formsActions.backupHgRoutine.loading(false));\n}\n\nfunction* sagas() {\n yield takeLatest(FormsActionTypes.POST_FORM, openTicket);\n yield takeLatest(FormsActionTypes.REQUEST_HG_ROUTINE_BACKUPS, getHgRoutineBackups);\n yield takeLatest(FormsActionTypes.SKIP_HG_ROUTINE_BACKUPS, skipHgRoutineBackup);\n}\n\nexport default sagas;\n","export const AsaasActionTypes = {\n // LOADING\n SET_LOADING: 'ASAAS_SET_LOADING',\n\n // SUBACCOUNT\n ASAAS_CREATE_SUBACCOUNT_REQUEST: 'ASAAS_CREATE_SUBACCOUNT_REQUEST',\n ASAAS_CREATE_SUBACCOUNT_FAILURE: 'ASAAS_CREATE_SUBACCOUNT_FAILURE',\n ASAAS_CREATE_SUBACCOUNT_SUCCESS: 'ASAAS_CREATE_SUBACCOUNT_SUCCESS',\n ASAAS_SET_ACCOUNT_STATUS: 'ASAAS_SET_ACCOUNT_STATUS',\n};\n","import { AsaasActionTypes } from './asaas.types';\n// LOADING\nconst setLoading = isLoading => ({ type: AsaasActionTypes.SET_LOADING, payload: { isLoading } });\n\n// ACCOUNT CREATION\nconst createSubAccountRequest = payload => ({ type: AsaasActionTypes.ASAAS_CREATE_SUBACCOUNT_REQUEST, payload });\nconst failedCreateSubAccountRequest = () => ({ type: AsaasActionTypes.ASAAS_CREATE_SUBACCOUNT_FAILURE });\nconst succeededCreatSubAccountRequest = () => ({ type: AsaasActionTypes.ASAAS_CREATE_SUBACCOUNT_SUCCESS });\nconst setAsaaAccountCreateStatus = payload => ({ type: AsaasActionTypes.ASAAS_SET_ACCOUNT_STATUS, payload });\n\nconst actions = {\n loading: {\n set: setLoading,\n },\n createAccount: {\n request: createSubAccountRequest,\n failure: failedCreateSubAccountRequest,\n success: succeededCreatSubAccountRequest,\n set: setAsaaAccountCreateStatus,\n },\n};\n\nexport default actions;\n","export const assembledAccount = response => response.data.success;\nexport const assembledError = (error) => {\n if (error.response.data.data) {\n return error.response.data.data.errors[0].description;\n }\n return '';\n};\n","import {\n call, takeLatest, put, select,\n} from 'redux-saga/effects';\nimport { api } from '@/utils/api';\nimport { AsaasActionTypes } from './asaas.types';\nimport asaasActions from './asaas.actions';\nimport { assembledAccount, assembledError } from './asaas.assembly';\nimport { commonActions } from '../common';\nimport Cookies from 'js-cookie';\nimport { authActions } from '../auth';\nimport { TEMPLATE_COOKIES } from '@/components/Layout/Template/Template.types';\n\nfunction* createSubAccount(action) {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const { payload } = action;\n const { connectionErrorValidationPart, conectionError, changeToFormConclusion } = payload;\n delete payload.connectionErrorValidationPart;\n delete payload.conectionError;\n delete payload.changeToFormConclusion;\n\n yield put(asaasActions.loading.set(true));\n try {\n const request = {\n url: '/api/v3/asaas/create-account',\n headers: {\n Authorization: `Bearer ${token}`,\n 'X-Service-Token': jwtToken,\n },\n data: {\n ...payload,\n },\n };\n const response = yield call(api.whmcs.post, request);\n const createdAccount = assembledAccount(response);\n\n yield put(asaasActions.createAccount.success());\n yield put(asaasActions.createAccount.set(createdAccount));\n changeToFormConclusion && changeToFormConclusion('finished');\n } catch (e) {\n const assembledErrorMessage = assembledError(e);\n\n if (assembledErrorMessage.includes(connectionErrorValidationPart)) {\n changeToFormConclusion && changeToFormConclusion('error');\n }\n\n if (!assembledErrorMessage || (assembledErrorMessage && !assembledErrorMessage.includes(connectionErrorValidationPart))) {\n yield put(commonActions.notifications.set({\n label: conectionError,\n type: 'error',\n }));\n }\n\n yield put(asaasActions.createAccount.failure());\n }\n\n yield put(asaasActions.loading.set(false));\n}\n\nfunction* sagas() {\n yield takeLatest(AsaasActionTypes.ASAAS_CREATE_SUBACCOUNT_REQUEST, createSubAccount);\n}\n\nexport default sagas;\n","import { AsaasActionTypes } from './asaas.types';\n\nexport const initialState = {\n loading: false,\n accountCreated: false,\n};\n\nconst asaasReducer = (state = initialState, action) => {\n switch (action.type) {\n case AsaasActionTypes.SET_LOADING: {\n const { isLoading } = action.payload;\n return {\n ...state,\n loading: isLoading,\n };\n }\n case AsaasActionTypes.ASAAS_SET_ACCOUNT_STATUS: {\n return {\n ...state,\n accountCreated: action.payload,\n };\n }\n default:\n return state;\n }\n};\n\nexport default asaasReducer;\n","export const ProductsActionTypes = {\n REQUEST_GET_PRODUCTS: 'REQUEST_GET_PRODUCTS',\n GET_PRODUCTS_SUCCESS: 'GET_PRODUCTS_SUCCESS',\n GET_PRODUCTS_SET: 'GET_PRODUCTS_SET',\n GET_PRODUCTS_FAILURE: 'GET_PRODUCTS_FAILURE',\n SET_HOME_PAGE: 'SET_HOME_PAGE',\n SET_PRODUCT_VISUALIZED: 'SET_PRODUCT_VISUALIZED',\n SET_PRODUCT_VISUALIZED_FAILURE: 'SET_PRODUCT_VISUALIZED_FAILURE',\n SET_CPANEL_LOADING: 'SET_CPANEL_LOADING',\n GET_CPANEL_LINK: 'GET_CPANEL_LINK',\n SET_ADD_ALERT: 'SET_ADD_ALERT',\n REQUEST_CLEAR_NEW_ALERTS: 'REQUEST_CLEAR_NEW_ALERTS',\n SET_CLEAR_NEW_ALERTS: 'SET_CLEAR_NEW_ALERTS',\n SET_ALERTS_VISIBILITY: 'SET_ALERTS_VISIBILITY',\n GET_ALL_PRODUCTS: 'GET_ALL_PRODUCTS',\n GET_ALL_PRODUCTS_FAILURE: 'GET_ALL_PRODUCTS_FAILURE',\n GET_ALL_PRODUCTS_SUCCESS: 'GET_ALL_PRODUCTS_SUCCESS',\n SET_ALL_PRODUCTS_LIST: 'SET_ALL_PRODUCTS_LIST',\n};\n","import { ProductsActionTypes } from './products.types';\n\nconst requestAllProducts = () => ({ type: ProductsActionTypes.GET_ALL_PRODUCTS });\nconst getAllProductsFailure = () => ({ type: ProductsActionTypes.GET_ALL_PRODUCTS_FAILURE });\nconst getAllProductsSuccess = () => ({ type: ProductsActionTypes.GET_ALL_PRODUCTS_SUCCESS });\nconst setAllProductsList = list => ({ type: ProductsActionTypes.SET_ALL_PRODUCTS_LIST, payload: list });\n\nconst requestProductsPerCategory = ({ history }) => ({ type: ProductsActionTypes.REQUEST_GET_PRODUCTS, payload: { history } });\nconst getProductsSuccess = () => ({ type: ProductsActionTypes.GET_PRODUCTS_SUCCESS });\nconst getProductsSet = products => ({ type: ProductsActionTypes.GET_PRODUCTS_SET, payload: products });\nconst getProductsFailure = () => ({ type: ProductsActionTypes.GET_PRODUCTS_FAILURE });\nconst setProductVisualized = (hostingId, productId) => ({ type: ProductsActionTypes.SET_PRODUCT_VISUALIZED, payload: { hostingId, productId } });\nconst setProductVisualizedFailure = () => ({ type: ProductsActionTypes.SET_PRODUCT_VISUALIZED_FAILURE });\nconst setCPanelSSOLoading = loading => ({ type: ProductsActionTypes.SET_CPANEL_LOADING, payload: loading });\nconst requestCPanelSSO = ({\n hostingId, defaultCPanelUrl, setLoadingWithId, backup, backupWizard, enableCpanelSSO, setLoadingCpanelSSOProductId, setBlockedWindowUrl,\n}) => ({\n type: ProductsActionTypes.GET_CPANEL_LINK,\n payload: {\n hostingId, defaultCPanelUrl, setLoadingWithId, backup, backupWizard, enableCpanelSSO, setLoadingCpanelSSOProductId, setBlockedWindowUrl,\n },\n});\nconst addToAlertsList = alertItem => ({ type: ProductsActionTypes.SET_ADD_ALERT, payload: alertItem });\nconst clearNewAlerts = alertsList => ({ type: ProductsActionTypes.REQUEST_CLEAR_NEW_ALERTS, payload: alertsList });\nconst setClearNewAlerts = payload => ({ type: ProductsActionTypes.SET_CLEAR_NEW_ALERTS, payload });\nconst setAlertsVisibility = payload => ({ type: ProductsActionTypes.SET_ALERTS_VISIBILITY, payload });\n\nconst actions = {\n products: {\n request: requestProductsPerCategory,\n failure: getProductsFailure,\n success: getProductsSuccess,\n set: getProductsSet,\n requestAll: requestAllProducts,\n setRequestAllFailure: getAllProductsFailure,\n setRequestAllSuccess: getAllProductsSuccess,\n setAllProductsList,\n },\n productsVisualized: {\n set: setProductVisualized,\n failure: setProductVisualizedFailure,\n },\n cPanelSSO: {\n loading: setCPanelSSOLoading,\n requestLink: requestCPanelSSO,\n },\n myAlerts: {\n add: addToAlertsList,\n clearNew: clearNewAlerts,\n setClear: setClearNewAlerts,\n setVisibility: setAlertsVisibility,\n },\n};\n\nexport default actions;\n","const clearNewAlerts = (rawData) => {\n const updatedAlertsList = rawData.map((alert) => {\n if (alert.isNew) {\n return { ...alert, isNew: false };\n }\n return alert;\n });\n\n return updatedAlertsList;\n};\n\nconst assembly = {\n clearNewAlerts,\n};\n\nexport default assembly;\n","export const BackupActionTypes = {\n SET_BACKUP_REDIRECT_MODAL_SHOW: 'SET_BACKUP_REDIRECT_MODAL_SHOW',\n SET_REDIRECT_FROM_PRE_CHAT: 'SET_REDIRECT_FROM_PRE_CHAT',\n SET_BACKUP_GENERATION_LOADING: 'SET_BACKUP_GENERATION_LOADING',\n REQUEST_BACKUP_GENERATION: 'REQUEST_BACKUP_GENERATION',\n FAILURE_BACKUP_GENERATION: 'FAILURE_BACKUP_GENERATION',\n SUCCESS_BACKUP_GENERATION: 'SUCCESS_BACKUP_GENERATION',\n CLEAR_BACKUP_STATUS: 'CLEAR_BACKUP_STATUS',\n REQUEST_BACKUP_LOG: 'REQUEST_BACKUP_LOG',\n SET_LOADING_STATUS_BACKUP_LOG: 'SET_LOADING_STATUS_BACKUP_LOG',\n SET_SUCCESS_BACKUP_LOG: 'SET_SUCCESS_BACKUP_LOG',\n SET_FAILURE_BACKUP_LOG: 'SET_FAILURE_BACKUP_LOG',\n SET_BACKUP_LOG: 'SET_BACKUP_LOG',\n REQUEST_INODES_STATUS: 'REQUEST_INODES_STATUS',\n LOADING_INODES_STATUS: 'LOADING_INODES_STATUS',\n SUCCESS_INODES_STATUS: 'SUCCESS_INODES_STATUS',\n FAILURE_INODES_STATUS: 'FAILURE_INODES_STATUS',\n SET_INODES: 'SET_INODES',\n};\n\n\nexport const BackupGenerationStatus = {\n SUCCESS: 'SUCCESS',\n FAIL: 'FAIL',\n};\n","import { BackupActionTypes } from './backup.types';\n\nconst showModalBackupRedirect = ({ showModal, productId }) => ({\n type: BackupActionTypes.SET_BACKUP_REDIRECT_MODAL_SHOW,\n payload: { showModal, productId },\n});\n\nconst redirectFromPreChat = payload => ({\n type: BackupActionTypes.SET_REDIRECT_FROM_PRE_CHAT,\n payload,\n});\n\nconst setBackupGenerationLoading = payload => ({\n type: BackupActionTypes.SET_BACKUP_GENERATION_LOADING,\n payload,\n});\n\nconst requestBackupGeneration = ({ id }) => ({\n type: BackupActionTypes.REQUEST_BACKUP_GENERATION,\n payload: { id },\n});\n\nconst failureBackupGeneration = payload => ({\n type: BackupActionTypes.FAILURE_BACKUP_GENERATION,\n payload,\n});\n\nconst successBackupGeneration = payload => ({\n type: BackupActionTypes.SUCCESS_BACKUP_GENERATION,\n payload,\n});\n\nconst clearBackupStatus = () => ({\n type: BackupActionTypes.CLEAR_BACKUP_STATUS,\n});\n\nconst requestBackupLog = ({ id }) => ({\n type: BackupActionTypes.REQUEST_BACKUP_LOG,\n payload: { id },\n});\n\nconst setBackupLoadingStatus = payload => ({\n type: BackupActionTypes.SET_LOADING_STATUS_BACKUP_LOG,\n payload,\n});\n\nconst setBackupLogSuccess = payload => ({\n type: BackupActionTypes.SET_SUCCESS_BACKUP_LOG,\n payload,\n});\n\nconst setBackupLogFailure = payload => ({\n type: BackupActionTypes.SET_FAILURE_BACKUP_LOG,\n payload,\n});\n\nconst setBackupLog = payload => ({\n type: BackupActionTypes.SET_BACKUP_LOG,\n payload,\n});\n\nconst requestInodes = ({ id }) => ({ type: BackupActionTypes.REQUEST_INODES_STATUS, payload: { id } });\nconst setRequestInodesLoading = bool => ({ type: BackupActionTypes.LOADING_INODES_STATUS, payload: bool });\nconst successRequestInodes = () => ({ type: BackupActionTypes.SUCCESS_INODES_STATUS });\nconst failureRequestInode = () => ({ type: BackupActionTypes.FAILURE_INODES_STATUS });\nconst setInodes = bool => ({ type: BackupActionTypes.SET_INODES, payload: bool });\n\nconst actions = {\n set: {\n showModalBackupRedirect,\n redirectFromPreChat,\n },\n inodes: {\n request: requestInodes,\n loading: setRequestInodesLoading,\n success: successRequestInodes,\n failure: failureRequestInode,\n set: setInodes,\n },\n backupGeneration: {\n request: requestBackupGeneration,\n failure: failureBackupGeneration,\n success: successBackupGeneration,\n loading: setBackupGenerationLoading,\n clearStatus: clearBackupStatus,\n },\n backupLog: {\n request: requestBackupLog,\n loading: setBackupLoadingStatus,\n success: setBackupLogSuccess,\n failure: setBackupLogFailure,\n set: setBackupLog,\n },\n};\n\nexport default actions;\n","import { BackupActionTypes } from './backup.types';\n\nexport const initialState = {\n showBackupRedirectModal: false,\n productId: null,\n redirectFromPreChat: false,\n loadingLog: true,\n loadingInodes: false,\n inodesAndSizeOk: true,\n backupGeneration: {\n loading: false,\n status: null,\n },\n backupLog: [],\n};\n\nconst backupReducer = (state = initialState, action) => {\n switch (action.type) {\n case BackupActionTypes.SET_BACKUP_REDIRECT_MODAL_SHOW: {\n const { showModal, productId } = action.payload;\n return {\n ...state,\n showBackupRedirectModal: showModal,\n productId,\n };\n }\n case BackupActionTypes.SET_REDIRECT_FROM_PRE_CHAT: {\n return {\n ...state,\n redirectFromPreChat: action.payload,\n };\n }\n case BackupActionTypes.SET_BACKUP_GENERATION_LOADING: {\n const { payload } = action;\n return {\n ...state,\n backupGeneration: {\n ...state.backupGeneration,\n loading: payload,\n },\n };\n }\n case BackupActionTypes.SUCCESS_BACKUP_GENERATION:\n case BackupActionTypes.FAILURE_BACKUP_GENERATION: {\n const { payload } = action;\n return {\n ...state,\n backupGeneration: {\n ...state.backupGeneration,\n status: payload,\n },\n };\n }\n case BackupActionTypes.CLEAR_BACKUP_STATUS: {\n return {\n ...state,\n backupGeneration: {\n ...state.backupGeneration,\n status: null,\n },\n };\n }\n case BackupActionTypes.SET_LOADING_STATUS_BACKUP_LOG: {\n return {\n ...state,\n loadingLog: action.payload,\n };\n }\n case BackupActionTypes.SET_BACKUP_LOG: {\n return {\n ...state,\n backupLog: action.payload,\n };\n }\n case BackupActionTypes.LOADING_INODES_STATUS: {\n return {\n ...state,\n loadingInodes: action.payload,\n };\n }\n case BackupActionTypes.SET_INODES: {\n return {\n ...state,\n inodesAndSizeOk: action.payload,\n };\n }\n default:\n return state;\n }\n};\n\nexport default backupReducer;\n","export const PreChatActionTypes = {\n SET_DIAGNOSTIC_LOADING: 'SET_DIAGNOSTIC_LOADING',\n SET_PRODUCTS_BY_STATUS_LOADING: 'SET_PRODUCTS_BY_STATUS_LOADING',\n\n GET_DIAGNOSTIC_REQUEST: 'GET_DIAGNOSTIC_REQUEST',\n GET_DIAGNOSTIC_SUCCESS: 'GET_DIAGNOSTIC_SUCCESS',\n GET_DIAGNOSTIC_FAILURE: 'GET_DIAGNOSTIC_FAILURE',\n SET_DIAGNOSTIC: 'SET_DIAGNOSTIC',\n RELOAD_DIAGNOSTIC: 'RELOAD_DIAGNOSTIC',\n SET_INVOICE_ID: 'SET_INVOICE_ID',\n SET_HOLD_REDIRECT: 'SET_HOLD_REDIRECT',\n SET_SCREEN_TO_SHOW_IN_PRECHAT: 'SET_SCREEN_TO_SHOW_IN_PRECHAT',\n BILLING_GENERATED: 'BILLING_GENERATED',\n REACTIVATION_REDIRECT: 'REACTIVATION_REDIRECT',\n SET_TRUST_REACTIVATION_INVOICE_ID: 'SET_TRUST_REACTIVATION_INVOICE_ID',\n SET_INVOICE_TICKET_WILL_OPEN: 'SET_INVOICE_TICKET_WILL_OPEN',\n SET_SUBSCRIPTION_TO_CANCEL: 'SET_SUBSCRIPTION_TO_CANCEL',\n SET_SUBSCRIPTION_TO_CHANGE_PAYMENT_METHOD: 'SET_SUBSCRIPTION_TO_CHANGE_PAYMENT_METHOD',\n SET_SUBSCRIPTION_REDIRECT_FROM_PRECHAT: 'SET_SUBSCRIPTION_REDIRECT_FROM_PRECHAT',\n PRODUCT_BY_STATUS_REQUEST: 'PRODUCT_BY_STATUS_REQUEST',\n PRODUCT_BY_STATUS_SUCCESS: 'PRODUCT_BY_STATUS_SUCCESS',\n PRODUCT_BY_STATUS_FAILURE: 'PRODUCT_BY_STATUS_FAILURE',\n SET_PRODUCT_BY_STATUS: 'SET_PRODUCT_BY_STATUS',\n SET_TOS_REDIRECT: 'SET_TOS_REDIRECT',\n SET_VPS_REDIRECT: 'SET_VPN_REDIRECT',\n SET_VPS_PRODUCT_ID: 'SET_VPS_PRODUCT_ID',\n SET_VPS_TERMS_ACCEPTED: 'SET_VPS_TERMS_ACCEPTED',\n GET_PRODUCT_DETAILS_REQUEST: 'GET_PRODUCT_DETAILS_REQUEST',\n GET_PRODUCT_DETAILS_SUCCESS: 'GET_PRODUCT_DETAILS_SUCCESS',\n GET_PRODUCT_DETAILS_FAILURE: 'GET_PRODUCT_DETAILS_FAILURE',\n SET_PRODUCT_DETAILS_LOADING: 'SET_PRODUCT_DETAILS_LOADING',\n SET_PRODUCT_DETAILS: 'SET_PRODUCT_DETAILS',\n SET_EPP_KEY_FLOW: 'SET_EPP_KEY_FLOW',\n SET_RESERVED_DOMAIN_FLOW: 'SET_RESERVED_DOMAIN_FLOW',\n GET_WEEK_DAY_REQUEST: 'GET_WEEK_DAY_REQUEST',\n SET_WEEK_DAY: 'SET_WEEK_DAY',\n GET_WEEK_DAY_SUCCESS: 'GET_WEEK_DAY_SUCCESS',\n GET_WEEK_DAY_FAILURE: 'GET_WEEK_DAY_FAILURE',\n HANDLE_CHAT_DISPLAY: 'HANDLE_CHAT_DISPLAY',\n SET_SHOW_PRE_CHAT: 'SET_SHOW_PRE_CHAT',\n SET_ACTIVE_CHAT: 'SET_ACTIVE_CHAT',\n SET_TICKET_TYPE: 'SET_TICKET_TYPE',\n START_CHATBOT_REQUEST: 'START_CHATBOT_REQUEST',\n START_CHATBOT_SUCCESS: 'START_CHATBOT_SUCCESS',\n START_CHATBOT_FAILURE: 'START_CHATBOT_FAILURE',\n SET_CHATBOT_SESSION_ID: 'SET_CHATBOT_SESSION_ID',\n SEND_CHATBOT_MESSAGE_REQUEST: 'SEND_CHATBOT_MESSAGE_REQUEST',\n SEND_CHATBOT_MESSAGE_SUCCESS: 'SEND_CHATBOT_MESSAGE_SUCCESS',\n SEND_CHATBOT_MESSAGE_FAILURE: 'SEND_CHATBOT_MESSAGE_FAILURE',\n SET_CHATBOT_MESSAGE: 'SET_CHATBOT_MESSAGE',\n EVALUATE_CHATBOT_ANSWER_REQUEST: 'EVALUATE_CHATBOT_ANSWER_REQUEST',\n EVALUATE_CHATBOT_ANSWER_SUCCESS: 'EVALUATE_CHATBOT_ANSWER_SUCCESS',\n EVALUATE_CHATBOT_ANSWER_FAILURE: 'EVALUATE_CHATBOT_ANSWER_FAILURE',\n};\n","import { PreChatActionTypes } from './preChat.types';\n\nconst productsByStatusRequest = ({ withCancelled, withPending, waitToken }) => ({ type: PreChatActionTypes.PRODUCT_BY_STATUS_REQUEST, payload: { withCancelled, withPending, waitToken } });\nconst productsByStatusSuccess = () => ({ type: PreChatActionTypes.PRODUCT_BY_STATUS_SUCCESS });\nconst productsByStatusFailure = () => ({ type: PreChatActionTypes.PRODUCT_BY_STATUS_FAILURE });\n\nconst diagnosticRequest = ({\n enabledSubscriptionInDiagnostic,\n enabledCloudflare,\n enableDuplicateOrders,\n waitToken,\n enableSslAlert,\n enableAlertCreditRefund,\n enabledCloudflareDelayedAlert,\n}) => ({\n type: PreChatActionTypes.GET_DIAGNOSTIC_REQUEST,\n payload: {\n enabledSubscriptionInDiagnostic,\n enabledCloudflare,\n enableDuplicateOrders,\n waitToken,\n enableSslAlert,\n enableAlertCreditRefund,\n enabledCloudflareDelayedAlert,\n },\n});\nconst diagnosticSuccess = () => ({ type: PreChatActionTypes.GET_DIAGNOSTIC_SUCCESS });\nconst diagnosticFailure = () => ({ type: PreChatActionTypes.GET_DIAGNOSTIC_FAILURE });\n\nconst setDiagnostic = diagnostic => ({\n type: PreChatActionTypes.SET_DIAGNOSTIC,\n payload: { diagnostic },\n});\n\nconst setProductsByStatus = productsList => ({\n type: PreChatActionTypes.SET_PRODUCT_BY_STATUS,\n payload: { productsList },\n});\n\nconst diagnosticLoading = isLoading => ({\n type: PreChatActionTypes.SET_DIAGNOSTIC_LOADING,\n payload: isLoading,\n});\n\nconst productsLoading = isLoading => ({\n type: PreChatActionTypes.SET_PRODUCTS_BY_STATUS_LOADING,\n payload: isLoading,\n});\n\nconst diagnosticReload = () => ({\n type: PreChatActionTypes.RELOAD_DIAGNOSTIC,\n});\n\nconst setInvoiceId = invoiceId => ({\n type: PreChatActionTypes.SET_INVOICE_ID,\n payload: invoiceId,\n});\n\nconst setHoldDomainRedirect = redirect => ({\n type: PreChatActionTypes.SET_HOLD_REDIRECT,\n payload: redirect,\n});\n\nconst setScreenToShowInPreChat = screen => ({\n type: PreChatActionTypes.SET_SCREEN_TO_SHOW_IN_PRECHAT,\n payload: screen,\n});\n\nconst isBillingGenerated = generated => ({\n type: PreChatActionTypes.BILLING_GENERATED,\n payload: generated,\n});\n\nconst isReactivationRedirect = redirect => ({\n type: PreChatActionTypes.REACTIVATION_REDIRECT,\n payload: redirect,\n});\n\nconst setTrustReactivationInvoiceId = invoiceId => ({\n type: PreChatActionTypes.SET_TRUST_REACTIVATION_INVOICE_ID,\n payload: invoiceId,\n});\n\nconst setSubscriptionToCancel = productId => ({\n type: PreChatActionTypes.SET_SUBSCRIPTION_TO_CANCEL,\n payload: productId,\n});\n\nconst setSubscriptionToChangePaymentMethod = productId => ({\n type: PreChatActionTypes.SET_SUBSCRIPTION_TO_CHANGE_PAYMENT_METHOD,\n payload: productId,\n});\n\nconst redirectManageSubscription = isRedirect => ({\n type: PreChatActionTypes.SET_SUBSCRIPTION_REDIRECT_FROM_PRECHAT,\n payload: isRedirect,\n});\n\nconst setTosRedirect = isRedirect => ({\n type: PreChatActionTypes.SET_TOS_REDIRECT,\n payload: isRedirect,\n});\n\nconst setVpsRedirect = isRedirect => ({\n type: PreChatActionTypes.SET_VPS_REDIRECT,\n payload: isRedirect,\n});\n\nconst setVpsProductId = productId => ({\n type: PreChatActionTypes.SET_VPS_PRODUCT_ID,\n payload: productId,\n});\n\nconst setVpsTermsAccepted = accepted => ({\n type: PreChatActionTypes.SET_VPS_TERMS_ACCEPTED,\n payload: accepted,\n});\n\n\nconst productDetailsRequest = data => ({ type: PreChatActionTypes.GET_PRODUCT_DETAILS_REQUEST, payload: data });\n\nconst productDetailsSuccess = () => ({ type: PreChatActionTypes.GET_PRODUCT_DETAILS_SUCCESS });\n\nconst productDetailsFailure = () => ({ type: PreChatActionTypes.GET_PRODUCT_DETAILS_FAILURE });\n\nconst productDetailsLoading = isLoading => ({\n type: PreChatActionTypes.SET_PRODUCT_DETAILS_LOADING,\n payload: isLoading,\n});\n\nconst productDetailsSet = data => ({\n type: PreChatActionTypes.SET_PRODUCT_DETAILS,\n payload: data,\n});\n\nconst onEppKeyFlowSet = onFlow => ({\n type: PreChatActionTypes.SET_EPP_KEY_FLOW,\n payload: onFlow,\n});\n\nconst onReservedDomainFlow = onFlow => ({\n type: PreChatActionTypes.SET_RESERVED_DOMAIN_FLOW,\n payload: onFlow,\n});\n\nconst getWeekDayRequest = () => ({\n type: PreChatActionTypes.GET_WEEK_DAY_REQUEST,\n});\n\nconst setWeekDay = weekDay => ({\n type: PreChatActionTypes.SET_WEEK_DAY,\n payload: weekDay,\n});\n\nconst getWeekDaySuccess = () => ({\n type: PreChatActionTypes.GET_WEEK_DAY_SUCCESS,\n});\n\nconst getWeekDayFailure = () => ({\n type: PreChatActionTypes.GET_WEEK_DAY_FAILURE,\n});\n\n\nconst setShowPreChat = bool => ({\n type: PreChatActionTypes.SET_SHOW_PRE_CHAT,\n payload: bool,\n});\n\nconst setActiveChat = bool => ({\n type: PreChatActionTypes.SET_ACTIVE_CHAT,\n payload: bool,\n});\n\nconst setTicketType = ticketType => ({\n type: PreChatActionTypes.SET_TICKET_TYPE,\n payload: ticketType,\n});\n\nconst startChatbotRequest = () => ({\n type: PreChatActionTypes.START_CHATBOT_REQUEST,\n});\n\nconst startChatbotSuccess = () => ({\n type: PreChatActionTypes.START_CHATBOT_SUCCESS,\n});\n\nconst startChatbotFailure = () => ({\n type: PreChatActionTypes.START_CHATBOT_FAILURE,\n});\n\nconst setChatbotSessionId = sessionId => ({\n type: PreChatActionTypes.SET_CHATBOT_SESSION_ID,\n payload: sessionId,\n});\n\nconst sendMessageToChatbot = ({ message, retry }) => ({\n type: PreChatActionTypes.SEND_CHATBOT_MESSAGE_REQUEST,\n payload: { message, retry },\n});\n\nconst sendMessageToChatbotSuccess = () => ({\n type: PreChatActionTypes.SEND_CHATBOT_MESSAGE_SUCCESS,\n});\n\nconst sendMessageToChatbotFailure = () => ({\n type: PreChatActionTypes.SEND_CHATBOT_MESSAGE_FAILURE,\n});\n\nconst setChatbotMessage = message => ({\n type: PreChatActionTypes.SET_CHATBOT_MESSAGE,\n payload: message,\n});\n\nconst evaluateAnswerRequest = ({ evaluation, messageId }) => ({\n type: PreChatActionTypes.EVALUATE_CHATBOT_ANSWER_REQUEST,\n payload: { evaluation, messageId },\n});\n\nconst evaluateAnswerSuccess = () => ({\n type: PreChatActionTypes.EVALUATE_CHATBOT_ANSWER_SUCCESS,\n});\n\nconst evaluateAnswerFailure = () => ({\n type: PreChatActionTypes.EVALUATE_CHATBOT_ANSWER_FAILURE,\n});\n\nconst actions = {\n diagnostic: {\n get: diagnosticRequest,\n set: setDiagnostic,\n success: diagnosticSuccess,\n failure: diagnosticFailure,\n loading: diagnosticLoading,\n reload: diagnosticReload,\n },\n preChat: {\n setScreen: setScreenToShowInPreChat,\n setShowPreChat,\n },\n invoice: {\n set: {\n invoiceId: setInvoiceId,\n holdDomainRedirect: setHoldDomainRedirect,\n },\n },\n trustReactivation: {\n billingGenerated: isBillingGenerated,\n redirect: isReactivationRedirect,\n setInvoiceId: setTrustReactivationInvoiceId,\n },\n productByStatus: {\n request: productsByStatusRequest,\n success: productsByStatusSuccess,\n failure: productsByStatusFailure,\n loading: productsLoading,\n set: setProductsByStatus,\n },\n subscription: {\n setSubscriptionToCancel,\n setSubscriptionToChangePaymentMethod,\n redirectManageSubscription,\n },\n tos: {\n redirect: setTosRedirect,\n },\n vps: {\n redirect: setVpsRedirect,\n productId: setVpsProductId,\n termsAccepted: setVpsTermsAccepted,\n },\n productDetails: {\n get: productDetailsRequest,\n success: productDetailsSuccess,\n failure: productDetailsFailure,\n loading: productDetailsLoading,\n set: productDetailsSet,\n },\n weekDay: {\n get: getWeekDayRequest,\n set: setWeekDay,\n success: getWeekDaySuccess,\n failure: getWeekDayFailure,\n },\n eppKeyGen: {\n onFlow: onEppKeyFlowSet,\n },\n reservedDomain: {\n onFlow: onReservedDomainFlow,\n },\n chat: {\n setActiveChat,\n },\n tickets: {\n setTicketType,\n },\n chatbot: {\n startRequest: startChatbotRequest,\n startSuccess: startChatbotSuccess,\n startFailure: startChatbotFailure,\n setSession: setChatbotSessionId,\n sendMessage: sendMessageToChatbot,\n sendMessageSuccess: sendMessageToChatbotSuccess,\n sendMessageFailure: sendMessageToChatbotFailure,\n setChatbotMessage,\n evaluateAnswerRequest,\n evaluateAnswerSuccess,\n evaluateAnswerFailure,\n\n },\n};\n\nexport default actions;\n","import { PreChatActionTypes } from './preChat.types';\n\nexport const initialState = {\n loading: false,\n diagnosticLoaded: false,\n invoices: {},\n refunds: [],\n backups: [],\n backup_available: [],\n duplicateOrders: [],\n pendingOrders: [],\n customer: {},\n invoiceId: null,\n screenToShowInPreChat: 'diagnostic',\n trustReactivation: [],\n billingGenerated: false,\n reactivationRedirect: false,\n trustReactivationInvoiceId: null,\n invoiceTicketWillOpen: false,\n productsList: {},\n subscriptions: {},\n productsLoading: true,\n triage: {\n subscriptionToCancel: null,\n subscriptionToChangePaymentMethod: null,\n holdDomainRedirect: false,\n onEppKeyFlow: false,\n domainReservedFlow: false,\n redirectManageSubscription: false,\n },\n domainsPropagation: [],\n tos: {\n redirect: false,\n tickets: [],\n },\n vpsUpgrade: {\n redirect: false,\n termsAccepted: false,\n productId: null,\n },\n productDetails: {},\n productDetailsLoading: false,\n weekDay: null,\n ssl: [],\n sitelock: [],\n showPreChat: false,\n hasActiveChat: false,\n ticketType: null,\n chatbotSessionID: null,\n lastChatbotMessage: null,\n};\n\nconst preChatReducer = (state = initialState, action) => {\n switch (action.type) {\n case PreChatActionTypes.SET_DIAGNOSTIC_LOADING: {\n return {\n ...state,\n loading: action.payload,\n };\n }\n case PreChatActionTypes.SET_DIAGNOSTIC: {\n const { diagnostic } = action.payload;\n\n return {\n ...state,\n invoices: diagnostic.invoices,\n subscriptions: diagnostic.subscriptions,\n refunds: diagnostic.refunds,\n backups: diagnostic.backups,\n backup_available: diagnostic.backup_available,\n customer: diagnostic.customer,\n trustReactivation: diagnostic.trustReactivation,\n domainsPropagation: diagnostic.domains_propagation,\n duplicateOrders: diagnostic.duplicate_orders,\n pendingOrders: diagnostic.pending_orders,\n tos: {\n ...state.tos,\n tickets: diagnostic.tickets,\n },\n ssl: diagnostic.ssl,\n sitelock: diagnostic.sitelock,\n };\n }\n case PreChatActionTypes.SET_INVOICE_ID: {\n return {\n ...state,\n invoiceId: action.payload,\n };\n }\n case PreChatActionTypes.SET_SCREEN_TO_SHOW_IN_PRECHAT: {\n return {\n ...state,\n screenToShowInPreChat: action.payload,\n };\n }\n case PreChatActionTypes.GET_DIAGNOSTIC_SUCCESS: {\n return {\n ...state,\n diagnosticLoaded: true,\n };\n }\n case PreChatActionTypes.GET_DIAGNOSTIC_FAILURE: {\n return {\n ...state,\n diagnosticLoaded: false,\n };\n }\n case PreChatActionTypes.BILLING_GENERATED: {\n return {\n ...state,\n billingGenerated: action.payload,\n };\n }\n case PreChatActionTypes.REACTIVATION_REDIRECT: {\n return {\n ...state,\n reactivationRedirect: action.payload,\n };\n }\n case PreChatActionTypes.SET_TRUST_REACTIVATION_INVOICE_ID: {\n return {\n ...state,\n trustReactivationInvoiceId: action.payload,\n };\n }\n case PreChatActionTypes.SET_INVOICE_TICKET_WILL_OPEN: {\n return {\n ...state,\n invoiceTicketWillOpen: action.payload,\n };\n }\n case PreChatActionTypes.SET_PRODUCT_BY_STATUS: {\n return {\n ...state,\n productsList: action.payload.productsList,\n };\n }\n case PreChatActionTypes.SET_PRODUCTS_BY_STATUS_LOADING: {\n return {\n ...state,\n productsLoading: action.payload,\n };\n }\n case PreChatActionTypes.SET_SUBSCRIPTION_TO_CANCEL: {\n return {\n ...state,\n triage: {\n ...state.triage,\n subscriptionToCancel: action.payload,\n },\n };\n }\n case PreChatActionTypes.SET_SUBSCRIPTION_TO_CHANGE_PAYMENT_METHOD: {\n return {\n ...state,\n triage: {\n ...state.triage,\n subscriptionToChangePaymentMethod: action.payload,\n },\n };\n }\n case PreChatActionTypes.SET_TOS_REDIRECT: {\n return {\n ...state,\n tos: {\n ...state.tos,\n redirect: action.payload,\n },\n };\n }\n case PreChatActionTypes.SET_VPS_REDIRECT: {\n return {\n ...state,\n vpsUpgrade: {\n ...state.vpsUpgrade,\n redirect: action.payload,\n },\n };\n }\n case PreChatActionTypes.SET_VPS_PRODUCT_ID: {\n return {\n ...state,\n vpsUpgrade: {\n ...state.vpsUpgrade,\n productId: action.payload,\n },\n };\n }\n case PreChatActionTypes.SET_VPS_TERMS_ACCEPTED: {\n return {\n ...state,\n vpsUpgrade: {\n ...state.vpsUpgrade,\n termsAccepted: action.payload,\n },\n };\n }\n case PreChatActionTypes.SET_PRODUCT_DETAILS_LOADING: {\n return {\n ...state,\n productDetailsLoading: action.payload,\n };\n }\n case PreChatActionTypes.SET_PRODUCT_DETAILS: {\n return {\n ...state,\n productDetails: action.payload,\n };\n }\n case PreChatActionTypes.SET_HOLD_REDIRECT: {\n return {\n ...state,\n triage: {\n ...state.triage,\n holdDomainRedirect: action.payload,\n },\n };\n }\n case PreChatActionTypes.SET_EPP_KEY_FLOW: {\n return {\n ...state,\n triage: {\n ...state.triage,\n onEppKeyFlow: action.payload,\n },\n };\n }\n case PreChatActionTypes.SET_RESERVED_DOMAIN_FLOW: {\n return {\n ...state,\n triage: {\n ...state.triage,\n domainReservedFlow: action.payload,\n },\n };\n }\n case PreChatActionTypes.SET_WEEK_DAY: {\n return {\n ...state,\n weekDay: action.payload,\n };\n }\n case PreChatActionTypes.SET_SUBSCRIPTION_REDIRECT_FROM_PRECHAT: {\n return {\n ...state,\n triage: {\n ...state.triage,\n redirectManageSubscription: action.payload,\n },\n };\n }\n case PreChatActionTypes.SET_SHOW_PRE_CHAT: {\n return {\n ...state,\n showPreChat: typeof action.payload === 'boolean' ? action.payload : !state.showPreChat,\n };\n }\n case PreChatActionTypes.SET_ACTIVE_CHAT: {\n return {\n ...state,\n hasActiveChat: action.payload,\n };\n }\n case PreChatActionTypes.SET_TICKET_TYPE: {\n return {\n ...state,\n ticketType: action.payload,\n };\n }\n case PreChatActionTypes.SET_CHATBOT_SESSION_ID: {\n return {\n ...state,\n chatbotSessionID: action.payload,\n };\n }\n case PreChatActionTypes.SET_CHATBOT_MESSAGE: {\n return {\n ...state,\n lastChatbotMessage: action.payload,\n };\n }\n default:\n return state;\n }\n};\n\nexport default preChatReducer;\n","import moment from 'moment';\nimport { format, parseISO } from 'date-fns';\n\nconst enhancedFormatDate = date => format(parseISO(date), 'dd/MM/yyyy');\nconst oldFormatDate = date => moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY');\n\nexport const formatHour = date => format(parseISO(date), 'HH:mm');\nexport const formatDate = (date, isEnabled) => (isEnabled ? enhancedFormatDate(date) : oldFormatDate(date));\n","import { TOS_STATUS } from '@/enums/preChat/preChat.enum';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { formatDate } from '@/utils/Formatters/formatDate';\n\nconst diagnosticResponse = (rawData) => {\n const diagnostic = rawData.data;\n\n if (diagnostic && diagnostic.invoices && diagnostic.invoices.overdue.length) {\n const overdueTreatment = diagnostic.invoices.overdue.map(overdue => ({\n ...overdue,\n due_date: formatDate(overdue.due_date, true),\n due_dateNotFormatted: overdue.due_date,\n totalNotFormatted: overdue.total,\n total: formatCurrency(overdue.total),\n }));\n diagnostic.invoices.overdue = overdueTreatment;\n }\n\n if (diagnostic && diagnostic.invoices && diagnostic.invoices.to_due.length) {\n const toDueTreatment = diagnostic.invoices.to_due.map(toDue => ({\n ...toDue,\n due_date: formatDate(toDue.due_date, true),\n total: formatCurrency(toDue.total),\n totalNotFormatted: toDue.total,\n due_dateNotFormatted: toDue.due_date,\n }));\n diagnostic.invoices.to_due = toDueTreatment;\n }\n\n if (diagnostic && diagnostic.refunds && diagnostic.refunds.length) {\n const refundsTreatment = diagnostic.refunds.map(refund => ({\n ...refund,\n amount: formatCurrency(refund.amount),\n date_cancel: formatDate(refund.date_cancel, true),\n invoice_date_paid: formatDate(refund.invoice_date_paid, true),\n }));\n diagnostic.refunds = refundsTreatment;\n }\n\n if (diagnostic && diagnostic.alert_credit_refund && diagnostic.alert_credit_refund.length) {\n const alertRefunds = diagnostic.alert_credit_refund.map(refund => ({\n ...refund,\n received: refund.received,\n userid: refund.userid,\n invoiceid: refund.invoiceid,\n credit_amount: refund.credit_amount,\n }));\n diagnostic.alert_credit_refund = alertRefunds;\n }\n\n if (diagnostic && diagnostic.customer) {\n const customerTreatment = {\n ...diagnostic.customer,\n credit_balance: formatCurrency(diagnostic.customer.credit_balance),\n };\n diagnostic.customer = customerTreatment;\n }\n\n if (diagnostic && diagnostic.trust_reactivation) {\n const trustReactivation = diagnostic.trust_reactivation.map(reactivation => ({\n ...reactivation,\n override_date: formatDate(reactivation.override_date),\n }));\n\n delete diagnostic.trust_reactivation;\n diagnostic.trustReactivation = trustReactivation;\n }\n\n if (diagnostic && diagnostic.tickets) {\n const adjustedTickets = diagnostic.tickets.map(ticket => ({\n ...ticket,\n tag: ticket.tag.toLowerCase(),\n }));\n const filteredTickets = adjustedTickets.length ? adjustedTickets.filter(ticket => Object.values(TOS_STATUS).some(tos => tos === ticket.tag)) : [];\n\n diagnostic.tickets = filteredTickets;\n }\n\n if (diagnostic && diagnostic.backups && diagnostic.backups.length) {\n const backupsTreatment = diagnostic.backups.map(backup => ({\n ...backup,\n backup_type: backup.type,\n }));\n diagnostic.backups = backupsTreatment;\n }\n\n return diagnostic;\n};\n\nconst productDetailsResponse = (data) => {\n const isHosting = Object.keys(data).includes('hosting_id');\n\n if (isHosting) {\n return {\n origin: data.domain.origin,\n domain: data.domain.domain,\n registered: data.domain.registered,\n domainId: data.domain.domain_id,\n openInvoice: data.domain.open_invoice,\n invoiceId: data.domain.invoice_id,\n holdDomainStatus: !!data.domain.whois_frozen_status,\n isOnHgReserved: !!data.domain.pointed_to_the_reserved,\n couldBePointedToInternalHost: !!data.domain.has_available_hostgator_plan,\n };\n }\n\n return {\n origin: data.origin,\n domain: data.domain,\n registered: data.registered,\n domainId: data.domain_id,\n openInvoice: data.open_invoice,\n invoiceId: data.invoice_id,\n holdDomainStatus: !!data.whois_frozen_status,\n isOnHgReserved: !!data.pointed_to_the_reserved,\n couldBePointedToInternalHost: !!data.has_available_hostgator_plan,\n };\n};\n\nconst getWeekDayResponse = rawData => rawData.data.date;\n\nconst getBotResponse = (rawData) => {\n if (rawData && rawData.length && rawData[rawData.length - 1].content) {\n const { answer, id } = rawData[rawData.length - 1].content;\n return { answer, id };\n }\n\n return { answer: '', id: Date.now() };\n};\n\nconst assembly = {\n diagnosticResponse,\n productDetailsResponse,\n getWeekDayResponse,\n getBotResponse,\n};\n\nexport default assembly;\n","import { ALERT_TYPES, BACKUP_STATUS } from '@/components/Layout/Menu/MyAlerts/MyAlerts.types';\n\nconst mountDiagnosticAlerts = (\n diagnostic,\n enableCloudflare,\n siteWithCloudflare,\n enabledSubscriptionInDiagnostic,\n enablePendingOrders,\n enableSslAlert,\n enableAlertCreditRefund,\n enabledCloudflareDelayedAlert,\n) => {\n const pendingOrders = diagnostic.pending_orders || [];\n const ssl = diagnostic.ssl || [];\n const alertCreditRefund = diagnostic.alert_credit_refund || [];\n const duplicateOrders = diagnostic.duplicate_orders || [];\n const backupAvailable = diagnostic.backup_available || [];\n const backups = diagnostic.backups || [];\n const overdueInvoices = (diagnostic.invoices && diagnostic.invoices.overdue) || [];\n const toDueInvoices = (diagnostic.invoices && diagnostic.invoices.to_due) || [];\n const toDueSubscriptions = (diagnostic.subscriptions && diagnostic.subscriptions.to_due) || [];\n\n const refunds = diagnostic.refunds || [];\n const domainsPropagation = diagnostic.domains_propagation || [];\n const domainInPropagation = (diagnostic.domains_propagation && diagnostic.domains_propagation.filter(propagation => propagation.propagation_status === 'in_progress')) || [];\n const domainNotConfigured = (diagnostic.domains_propagation && diagnostic.domains_propagation.filter(propagation => propagation.propagation_status === 'not_configured')) || [];\n const domainNotContracted = (diagnostic.domains_propagation && diagnostic.domains_propagation.filter(propagation => propagation.propagation_status === 'not_contracted')) || [];\n const tos = diagnostic.tickets || [];\n const domainsForPointing = diagnostic.domains_for_pointing || [];\n\n const alertsAdapted = [];\n\n\n if (enabledCloudflareDelayedAlert && diagnostic.cloudflare && diagnostic.cloudflare.some(item => item.status === 'delay' && item.domain_origin === 'external')) {\n const item = diagnostic.cloudflare.find(item => item.status === 'delay' && item.domain_origin === 'external');\n alertsAdapted.push({ type: ALERT_TYPES.CLOUDFLARE_DELAYED, isNew: true, hostingId: item.hosting_id });\n }\n\n if (enableCloudflare && siteWithCloudflare) {\n alertsAdapted.push({ type: ALERT_TYPES.CLOUDFLARE_FEATURE, isNew: true, hostingId: siteWithCloudflare.hosting_id });\n }\n\n if (backupAvailable.length) {\n const adaptedBackupAvailable = backupAvailable.map(plan => ({\n ...plan, type: ALERT_TYPES.BACKUP, isNew: true,\n }));\n alertsAdapted.push(adaptedBackupAvailable);\n }\n\n if (backups.length) {\n const findInAlertsAdapted = hostingId => alertsAdapted.find(alert => alert.hosting_id === hostingId);\n\n backups.forEach((backup) => {\n const existingBackup = findInAlertsAdapted(backup.hosting_id);\n\n if (!existingBackup || backup.days_since_last < existingBackup.days_since_last) {\n const adaptedBackup = { ...backup, type: ALERT_TYPES.BACKUP, isNew: true };\n\n if (existingBackup) {\n alertsAdapted.splice(alertsAdapted.indexOf(existingBackup), 1);\n }\n\n adaptedBackup.backup_type !== BACKUP_STATUS.RESTORED && alertsAdapted.push(adaptedBackup);\n }\n });\n }\n\n if (tos.length) {\n const adaptedTos = tos.map(singleTos => ({ ...singleTos, type: ALERT_TYPES.TOS, isNew: true }));\n alertsAdapted.push(adaptedTos);\n }\n\n if (enabledSubscriptionInDiagnostic && toDueSubscriptions.length) {\n toDueSubscriptions.forEach((item) => {\n alertsAdapted.push({\n productType: item.type,\n toDueSubscriptionId: item.id,\n daysToDue: item['days-to-due'],\n type: ALERT_TYPES.SUSBCRIPTION_OVERDUE,\n isNew: true,\n discountEnable: item.discount_enable,\n emailDiscountSent: item.email_discount_sent,\n name: item.name,\n dueDate: item.due_date,\n url: item.url,\n });\n });\n }\n\n if ((overdueInvoices.length) || (toDueInvoices.length)) {\n const totalInvoices = overdueInvoices.length + toDueInvoices.length;\n const overdueInvoicesSum = overdueInvoices.length ? overdueInvoices.reduce((acumulator, current) => acumulator + current.totalNotFormatted, 0) : 0;\n const toDueInvoicesSum = toDueInvoices.length ? toDueInvoices.reduce((acumulator, current) => acumulator + current.totalNotFormatted, 0) : 0;\n const invoicesSum = overdueInvoicesSum + toDueInvoicesSum;\n const adaptedInvoices = {\n totalInvoices, invoicesSum, type: ALERT_TYPES.INVOICES, isNew: true,\n };\n alertsAdapted.push(adaptedInvoices);\n }\n\n if (enablePendingOrders && pendingOrders.length) {\n pendingOrders.forEach((item) => {\n const firstProduct = item.products[0];\n\n const pendingAnalysisOrder = {\n orderId: item.id,\n orderStatus: item.status,\n productName: firstProduct.name,\n productType: firstProduct.type,\n productId: firstProduct.id,\n type: ALERT_TYPES.PENDING_ORDER,\n isNew: true,\n };\n\n if (item.status !== 'pending_payment') {\n if (firstProduct.type === 'domain') {\n alertsAdapted.push({\n ...pendingAnalysisOrder,\n });\n } else {\n alertsAdapted.push({\n ...pendingAnalysisOrder,\n productDomain: firstProduct.domain,\n });\n }\n }\n });\n }\n\n if (duplicateOrders.length) {\n alertsAdapted.push({ type: ALERT_TYPES.DUPLICATE_ORDERS, isNew: true });\n }\n\n if (domainsForPointing.length) {\n domainsForPointing.forEach(domainForPointing => alertsAdapted.push({ ...domainForPointing, type: ALERT_TYPES.DOMAIN_FOR_POINTING, isNew: true }));\n }\n\n if (domainNotConfigured.length) {\n alertsAdapted.push({ type: ALERT_TYPES.DOMAIN_NOT_CONFIGURED, isNew: true });\n }\n\n if (domainNotContracted.length) {\n alertsAdapted.push({ type: ALERT_TYPES.DOMAIN_NOT_CONTRACTED, isNew: true });\n }\n\n if (domainInPropagation.length) {\n alertsAdapted.push({ type: ALERT_TYPES.DOMAIN_IN_PROGRESS, isNew: true });\n }\n\n if (refunds.length) {\n const adaptedRefunds = refunds.map(refund => ({ ...refund, type: ALERT_TYPES.REFUND, isNew: true }));\n alertsAdapted.push(adaptedRefunds);\n }\n\n if (enableSslAlert && ssl.length) {\n const sslItems = ssl.map(item => ({\n ...item,\n type: ALERT_TYPES.SSL,\n isNew: true,\n }));\n alertsAdapted.push(sslItems);\n }\n\n if (enableAlertCreditRefund && alertCreditRefund.length) {\n const alertItems = alertCreditRefund.map(item => ({\n ...item,\n type: ALERT_TYPES.ALERT_CREDIT_REFUND,\n isNew: true,\n }));\n alertsAdapted.push(alertItems);\n }\n\n const inPropagationItems = [...domainsPropagation].filter((item) => {\n const existsInSslArray = ssl.find(sslItem => sslItem.domain === item.domain);\n return !existsInSslArray;\n });\n\n if (enableSslAlert && inPropagationItems.length) {\n const sslitems = inPropagationItems.map(domain => ({\n ...domain,\n status: 'in_progress',\n type: ALERT_TYPES.SSL,\n isNew: true,\n }));\n alertsAdapted.push(...sslitems);\n }\n\n return alertsAdapted.flat();\n};\n\nconst getDomainsPropagations = diagnostic => diagnostic.domains_propagation.map(domain => ({\n domain: domain.domain,\n id: domain.domain_id,\n status: domain.status ? domain.status : domain.propagation_status,\n hostingId: domain.hosting_id,\n nameServer1: domain.hosting_nameserver_1,\n nameServer2: domain.hosting_nameserver_2,\n configured: domain.configured,\n}));\n\nconst assembly = {\n mountDiagnosticAlerts,\n getDomainsPropagations,\n};\n\nexport default assembly;\n","export const AlertsActionTypes = {\n SET_DIAGNOSTIC_ALERTS: 'SET_DIAGNOSTIC_ALERTS',\n SET_DOMAINS_PROPAGATION: 'SET_DOMAINS_PROPAGATION',\n SET_TICKETS_ALERTS: 'SET_TICKETS_ALERTS',\n ADD_NEW_DIAGNOSTIC_ALERT: 'ADD_NEW_DIAGNOSTIC_ALERT',\n CLICK_ON_ALERT_DOMAIN_TO_POINT: 'CLICK_ON_ALERT_DOMAIN_TO_POINT',\n};\n","import { AlertsActionTypes } from './alerts.types';\n\nconst setDiagnosticAlerts = alerts => ({\n type: AlertsActionTypes.SET_DIAGNOSTIC_ALERTS,\n payload: alerts,\n});\n\nconst addNewDiagnosticAlert = alert => ({\n type: AlertsActionTypes.ADD_NEW_DIAGNOSTIC_ALERT,\n payload: alert,\n});\n\nconst setTicketSAlerts = alerts => ({\n type: AlertsActionTypes.SET_TICKETS_ALERTS,\n payload: alerts,\n});\n\nconst clickOnAlertDomainToPoint = clickOnAlert => ({\n type: AlertsActionTypes.CLICK_ON_ALERT_DOMAIN_TO_POINT,\n payload: clickOnAlert,\n});\n\nconst actions = {\n set: {\n diagnosticAlerts: setDiagnosticAlerts,\n ticketsAlerts: setTicketSAlerts,\n clickOnAlertDomainToPoint,\n },\n add: {\n diagnostic: addNewDiagnosticAlert,\n },\n};\n\nexport default actions;\n","import { AlertsActionTypes } from './alerts.types';\n\nexport const initialState = {\n diagnosticAlerts: [],\n ticketsAlerts: [],\n clickOnAlertDomainToPoint: false,\n};\n\nconst alertsReducer = (state = initialState, action) => {\n switch (action.type) {\n case AlertsActionTypes.SET_DIAGNOSTIC_ALERTS: {\n return {\n ...state,\n diagnosticAlerts: action.payload,\n };\n }\n case AlertsActionTypes.SET_TICKETS_ALERTS: {\n return {\n ...state,\n ticketsAlerts: action.payload,\n };\n }\n case AlertsActionTypes.ADD_NEW_DIAGNOSTIC_ALERT: {\n return {\n ...state,\n diagnosticAlerts: [action.payload, ...state.diagnosticAlerts],\n };\n }\n case AlertsActionTypes.CLICK_ON_ALERT_DOMAIN_TO_POINT: {\n return {\n ...state,\n clickOnAlertDomainToPoint: action.payload,\n };\n }\n default:\n return state;\n }\n};\n\nexport default alertsReducer;\n","import {\n call, takeLatest, put, select, delay, take,\n} from 'redux-saga/effects';\nimport { api } from '@/utils/api';\nimport { authActions } from '@/redux/modules/auth';\nimport preChatActions from './preChat.actions';\nimport { PreChatActionTypes } from './preChat.types';\nimport preChatAssembly from './preChat.assembly';\nimport alertsAssembly from '../alerts/alerts.assembly';\nimport { config } from '@/config';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { alertsActions } from '../alerts';\nimport { domainsActions } from '../domains';\nimport { AuthActionsTypes } from '../auth/auth.types';\nimport logger from '@/utils/logger';\n\nconst {\n AWS_GATOR_SOLUTIONS_URL,\n WHMCS_URL,\n} = config;\n\nfunction* getDiagnostic({ payload }) {\n const {\n enabledSubscriptionInDiagnostic,\n enablePendingOrders,\n enabledCloudflare,\n waitToken,\n enableSslAlert,\n enableAlertCreditRefund,\n enabledCloudflareDelayedAlert,\n } = payload;\n yield put(preChatActions.diagnostic.loading(true));\n yield put(authActions.tokens.jwt.update());\n yield waitToken && take(AuthActionsTypes.UPDATE_JWT_TOKEN_FINISH);\n\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const sitesState = yield select(state => state.sites);\n\n const sitesList = sitesState.list;\n const siteWithCloudflare = sitesList.find(site => site.cloudflare_available && site.status === 'Active');\n\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${AWS_GATOR_SOLUTIONS_URL}/diagnostic`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-region': brand,\n 'x-service-token': jwtToken,\n },\n };\n\n try {\n const response = yield call(api.aws.get, request);\n const diagnostic = preChatAssembly.diagnosticResponse(response);\n yield put(preChatActions.diagnostic.set(diagnostic));\n const diagnosticAlerts = alertsAssembly.mountDiagnosticAlerts(\n diagnostic,\n enabledCloudflare,\n siteWithCloudflare,\n enabledSubscriptionInDiagnostic,\n enablePendingOrders,\n enableSslAlert,\n enableAlertCreditRefund,\n enabledCloudflareDelayedAlert,\n );\n\n yield put(alertsActions.set.diagnosticAlerts(diagnosticAlerts));\n\n const domainsPropagation = alertsAssembly.getDomainsPropagations(diagnostic);\n yield put(domainsActions.propagationStatus.set(domainsPropagation));\n\n yield put(preChatActions.diagnostic.success());\n } catch (e) {\n const error = { ...e, userRequestData: request };\n logger.error('Error sagas getDiagnostic', error);\n yield put(preChatActions.diagnostic.failure());\n yield delay(2000);\n }\n yield put(preChatActions.diagnostic.loading(false));\n}\n\nfunction* getProductsByStatus(action) {\n const { withCancelled, withPending, waitToken } = action.payload;\n yield put(authActions.tokens.jwt.update());\n yield waitToken && take(AuthActionsTypes.UPDATE_JWT_TOKEN_FINISH);\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${WHMCS_URL}/api/v2/clientarea/br/products-by-status?status=Active,Suspended,Expired${withCancelled ? ',Cancelled,Terminated' : ''}${withPending ? ',Pending' : ''}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n brand,\n },\n };\n\n yield put(preChatActions.productByStatus.loading(true));\n\n try {\n const response = yield call(api.aws.get, request);\n const productsList = response.data && response.data.data;\n yield put(preChatActions.productByStatus.set(productsList));\n yield put(preChatActions.productByStatus.success());\n } catch (e) {\n const error = { ...e, userRequestData: request };\n logger.error('Error sagas getProductsByStatus', error);\n yield put(preChatActions.productByStatus.failure());\n }\n\n yield put(preChatActions.productByStatus.loading(false));\n}\n\nfunction* getProductDetails({ payload }) {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${AWS_GATOR_SOLUTIONS_URL}/diagnostic/${payload && payload.productType}/${payload && payload.id}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-region': brand,\n 'x-service-token': jwtToken,\n },\n };\n\n yield put(preChatActions.productDetails.loading(true));\n\n try {\n const response = yield call(api.aws.get, request);\n const productDetails = preChatAssembly.productDetailsResponse(response.data);\n yield put(preChatActions.productDetails.set(productDetails));\n yield put(preChatActions.productDetails.success());\n } catch (e) {\n const error = { ...e, userRequestData: request };\n logger.error('Error sagas getProductDetails', error);\n yield put(preChatActions.productDetails.failure());\n yield delay(2000);\n }\n yield put(preChatActions.productDetails.loading(false));\n}\n\nfunction* getWeekDay() {\n yield put(authActions.tokens.jwt.update());\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${AWS_GATOR_SOLUTIONS_URL}/current-time`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-region': brand,\n 'x-service-token': jwtToken,\n },\n };\n\n try {\n const response = yield call(api.aws.get, request);\n const weekDay = preChatAssembly.getWeekDayResponse(response);\n yield put(preChatActions.weekDay.set(weekDay));\n yield put(preChatActions.weekDay.success());\n } catch (e) {\n const error = { ...e, userRequestData: request };\n logger.error('Error sagas getWeekDay', error);\n yield put(preChatActions.weekDay.failure());\n }\n}\n\nfunction* startChatbot() {\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `${WHMCS_URL}/api/v3/cortex/start-chat`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n },\n };\n\n try {\n const response = yield call(api.whmcs.post, request);\n yield put(preChatActions.chatbot.setSession(response.data && response.data.session_id));\n yield put(preChatActions.chatbot.startSuccess());\n } catch (e) {\n const error = { ...e, userRequestData: request };\n logger.error('Error sagas startChatbot', error);\n yield put(preChatActions.chatbot.startFailure());\n\n yield delay(3000);\n yield call(startChatbot);\n }\n}\n\nfunction* sendMessageToChatbot({ payload }) {\n const { message, retry } = payload;\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const { chatbotSessionID } = yield select(state => state.preChat);\n\n const request = {\n url: `${WHMCS_URL}/api/v3/cortex/message/${chatbotSessionID}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n },\n data: { question: message },\n };\n\n try {\n let transferToHuman = false;\n const response = yield call(api.whmcs.post, request);\n\n if (response.data && response.data.length) {\n response.data.forEach((item) => {\n if (item.progress === 'transfer_to_human_assistant') {\n transferToHuman = true;\n }\n });\n }\n\n const { answer, id } = preChatAssembly.getBotResponse(response.data);\n\n yield put(preChatActions.chatbot.setChatbotMessage({\n text: answer, origin: 'bot', id, transferToHuman,\n }));\n yield put(preChatActions.chatbot.sendMessageSuccess());\n } catch (e) {\n const error = { ...e, userRequestData: request };\n logger.error('Error sagas sendMessageToChatbot', error);\n if (retry) {\n yield put(preChatActions.chatbot.setChatbotMessage({ error: 'retry', message }));\n } else {\n yield put(preChatActions.chatbot.setChatbotMessage({ error: 'first', message }));\n }\n yield put(preChatActions.chatbot.sendMessageFailure());\n }\n}\n\nfunction* evaluateAnswer({ payload }) {\n const { evaluation, messageId } = payload;\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n\n const request = {\n url: `${WHMCS_URL}/api/v3/cortex/evaluate/${messageId}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-service-token': jwtToken,\n },\n data: { type: evaluation },\n };\n\n try {\n yield call(api.whmcs.post, request);\n yield put(preChatActions.chatbot.evaluateAnswerSuccess());\n } catch (e) {\n const error = { ...e, userRequestData: request };\n logger.error('Error sagas evaluateAnswer', error);\n\n yield put(preChatActions.chatbot.evaluateAnswerFailure());\n }\n}\n\nfunction* sagas() {\n yield takeLatest(PreChatActionTypes.GET_DIAGNOSTIC_REQUEST, getDiagnostic);\n yield takeLatest(PreChatActionTypes.PRODUCT_BY_STATUS_REQUEST, getProductsByStatus);\n yield takeLatest(PreChatActionTypes.GET_PRODUCT_DETAILS_REQUEST, getProductDetails);\n yield takeLatest(PreChatActionTypes.GET_WEEK_DAY_REQUEST, getWeekDay);\n yield takeLatest(PreChatActionTypes.START_CHATBOT_REQUEST, startChatbot);\n yield takeLatest(PreChatActionTypes.SEND_CHATBOT_MESSAGE_REQUEST, sendMessageToChatbot);\n yield takeLatest(PreChatActionTypes.EVALUATE_CHATBOT_ANSWER_REQUEST, evaluateAnswer);\n}\n\nexport default sagas;\n","import {\n call, takeLatest, put, select,\n} from 'redux-saga/effects';\nimport { api } from '@/utils/api';\nimport { backupActions } from '.';\nimport { BackupActionTypes, BackupGenerationStatus } from './backup.types';\nimport { AWS_GATOR_SOLUTIONS_URL, COUNTRY } from '@/config';\nimport { preChatActions } from '../preChat';\nimport { backupAnalytics } from '@/analytics';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport Cookies from 'js-cookie';\nimport { authActions } from '../auth';\nimport { TEMPLATE_COOKIES } from '@/components/Layout/Template/Template.types';\n\nfunction* generateBackup(action) {\n const { token } = yield select(state => state.auth);\n const { redirectFromPreChat } = yield select(state => state.backup);\n const { payload } = action;\n\n yield put(backupActions.backupGeneration.loading(true));\n try {\n const request = {\n url: `/api/v3/backup/generate/${payload.id}`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-brand': COUNTRY,\n },\n };\n\n const response = yield call(api.whmcs.get, request);\n if (response.data && response.data.data) {\n window.open(response.data.data);\n }\n\n backupAnalytics.backupGenerationSuccess();\n yield put(backupActions.backupGeneration.success(BackupGenerationStatus.SUCCESS));\n } catch (e) {\n backupAnalytics.backupGenerationError();\n yield put(backupActions.backupGeneration.failure(BackupGenerationStatus.FAIL));\n }\n\n if (redirectFromPreChat) {\n yield put(preChatActions.preChat.setScreen('problemSolved'));\n yield put(preChatActions.preChat.setShowPreChat(true));\n yield put(backupActions.set.redirectFromPreChat(false));\n }\n\n yield put(backupActions.backupGeneration.loading(false));\n}\n\nfunction* getLog(action) {\n const { token } = yield select(state => state.auth);\n const { payload } = action;\n const { id } = payload;\n\n yield put(backupActions.backupLog.loading(true));\n try {\n const request = {\n url: `/api/v3/backup/${id}?limit=20`,\n headers: {\n Authorization: `Bearer ${token}`,\n },\n };\n\n const response = yield call(api.whmcs.get, request);\n if (response) {\n yield put(backupActions.backupLog.set(response.data.data));\n }\n yield put(backupActions.backupLog.success());\n } catch (e) {\n yield put(backupActions.backupLog.failure());\n }\n\n yield put(backupActions.backupLog.loading(false));\n}\n\nfunction* getInodes(action) {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { id } = action.payload;\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${AWS_GATOR_SOLUTIONS_URL}/hosting/${id}/allowed-backup`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-region': brand,\n 'x-service-token': jwtToken,\n },\n };\n\n yield put(backupActions.inodes.loading(true));\n try {\n const response = yield call(api.aws.get, request);\n yield put(backupActions.inodes.set(response.data.available));\n yield put(backupActions.inodes.success());\n } catch (e) {\n yield put(backupActions.inodes.failure());\n } finally {\n yield put(backupActions.inodes.loading(false));\n }\n}\n\n\nfunction* sagas() {\n yield takeLatest(BackupActionTypes.REQUEST_BACKUP_GENERATION, generateBackup);\n yield takeLatest(BackupActionTypes.REQUEST_BACKUP_LOG, getLog);\n yield takeLatest(BackupActionTypes.REQUEST_INODES_STATUS, getInodes);\n}\n\nexport default sagas;\n","import {\n call,\n takeLatest, put,\n select,\n} from 'redux-saga/effects';\nimport { api } from '@/utils/api';\nimport productsActions from './products.actions';\nimport { COUNTRY, CACHED_AWS_GATOR_SOLUTIONS_URL } from '@/config';\nimport { authActions } from '@/redux/modules/auth';\nimport { ProductsActionTypes } from './products.types';\nimport productsAssembly from './products.assembly';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { locale } from '@/utils/locale';\nimport {\n identify as identifyAmplitude, Identify as IdentifyObject,\n} from '@amplitude/analytics-browser';\nimport { backupActions } from '../backup';\nimport { preChatActions } from '../preChat';\nimport { PRODUCTS_URL } from '@/config/api';\nimport logger from '@/utils/logger';\n\n\nconst getHomeRouteFromActiveProduct = ({ products }) => {\n const hasProduct = productType => products.find(product => product.category === productType && product.has_product);\n\n if (products) {\n const identifyObject = new IdentifyObject();\n const ownedProducts = {\n shared: !!hasProduct('shared'),\n wordpress: !!hasProduct('wordpress'),\n sitebuilder: !!hasProduct('sitebuilder'),\n reseller: !!hasProduct('reseller'),\n domain: !!hasProduct('domain'),\n proemail: !!hasProduct('proemail'),\n dedicated: !!hasProduct('dedicated'),\n sitelock: !!hasProduct('sitelock'),\n codeguard: !!hasProduct('codeguard'),\n academy: !!hasProduct('academy'),\n };\n identifyObject.set('products', ownedProducts);\n identifyAmplitude(identifyObject);\n }\n\n const routes = {\n courses: locale('routes.courses'),\n domains: locale('routes.domains'),\n emailsList: locale('routes.emailsList'),\n products: locale('routes.products'),\n security: locale('routes.security'),\n sites: locale('routes.sitesPage'),\n };\n\n if (hasProduct('shared') || hasProduct('wordpress') || hasProduct('sitebuilder') || hasProduct('reseller')) {\n return routes.sites;\n }\n\n if (hasProduct('domain')) {\n return routes.domains;\n }\n\n if (hasProduct('proemail')) {\n return routes.emailsList;\n }\n\n if (hasProduct('dedicated')) {\n return routes.products;\n }\n\n if (hasProduct('sitelock') || hasProduct('codeguard')) {\n return routes.security;\n }\n\n if (hasProduct('academy')) {\n return routes.courses;\n }\n\n return routes.sites;\n};\n\nfunction* getProductsPerCategoryRequest(action) {\n const { history } = action.payload;\n\n yield put(authActions.tokens.jwt.update());\n const { token } = yield select(state => state.auth);\n\n const { id: userId } = yield select(state => state.summary);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${CACHED_AWS_GATOR_SOLUTIONS_URL}/client/products/category`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-region': brand,\n 'X-Client-ID': userId,\n },\n };\n\n try {\n const response = yield call(api.aws.get, request);\n\n yield put(productsActions.products.set(response.data || []));\n yield put(productsActions.products.success());\n\n const homePage = getHomeRouteFromActiveProduct({ products: response.data });\n if (history) {\n history.push(homePage);\n }\n } catch (e) {\n const error = { ...e, userRequestData: request };\n logger.error('Error sagas getProductsPerCategoryRequest', error);\n yield put(productsActions.products.failure());\n }\n}\n\nfunction* requestAllProducts() {\n yield put(authActions.tokens.jwt.update());\n const { token } = yield select(state => state.auth);\n\n const request = {\n headers: {\n Authorization: `Bearer ${token}`,\n },\n url: PRODUCTS_URL,\n };\n\n try {\n const response = yield call(api.whmcs.get, request);\n yield put(productsActions.products.setAllProductsList(response.data.data.data));\n yield put(productsActions.products.setRequestAllSuccess());\n } catch (e) {\n const error = { ...e, userRequestData: request };\n logger.error('Error sagas requestAllProducts', error);\n yield put(productsActions.products.setRequestAllFailure());\n }\n}\n\nfunction* handleSetProductVisualized({ payload }) {\n const { productId, hostingId } = payload;\n const { token } = yield select(state => state.auth);\n const { id: userId } = yield select(state => state.summary);\n\n const request = {\n headers: {\n Authorization: token,\n 'X-Client-ID': userId,\n 'X-Brand': COUNTRY,\n },\n url: `api/v3/product/${productId}/hosting/${hostingId}/change-visualized`,\n };\n\n try {\n yield call(api.whmcs.put, request);\n yield put(productsActions.productsVisualized.success());\n } catch (e) {\n yield put(productsActions.productsVisualized.failure());\n }\n}\n\nfunction* cPanelSSO({ payload }) {\n const {\n defaultCPanelUrl, hostingId, setLoadingWithId, backup, backupWizard, enableCpanelSSO, setLoadingCpanelSSOProductId, setBlockedWindowUrl,\n } = payload;\n const { token } = yield select(state => state.auth);\n const { redirectFromPreChat } = yield select(state => state.backup);\n yield put(productsActions.cPanelSSO.loading(setLoadingWithId ? hostingId : true));\n\n const request = {\n headers: {\n Authorization: token,\n },\n url: `api/v2/clientarea/${COUNTRY}/cpanelsso/${hostingId}`,\n };\n\n let newWindow = null;\n let newWindowUrl = null;\n try {\n const result = yield call(api.whmcs.get, request);\n const cPanelUrl = result.data.data;\n\n if (backup) {\n if (enableCpanelSSO) {\n newWindowUrl = `${cPanelUrl}&goto_uri=/frontend/jupiter/backup/index.html`;\n } else {\n newWindowUrl = defaultCPanelUrl;\n }\n yield put(backupActions.set.showModalBackupRedirect({ productId: null, showModal: false }));\n }\n\n if (backupWizard) {\n if (enableCpanelSSO) {\n newWindowUrl = `${cPanelUrl}&goto_uri=/frontend/jupiter/backup/wizard.html`;\n } else {\n newWindowUrl = defaultCPanelUrl;\n }\n }\n\n if (redirectFromPreChat && (backup || backupWizard)) {\n yield put(preChatActions.preChat.setScreen('problemSolved'));\n yield put(preChatActions.preChat.setShowPreChat(true));\n yield put(backupActions.set.redirectFromPreChat(false));\n }\n\n if (!backup && !backupWizard) {\n if (enableCpanelSSO) {\n newWindowUrl = cPanelUrl;\n } else {\n newWindowUrl = defaultCPanelUrl;\n }\n }\n\n if (newWindowUrl) {\n newWindow = window.open(newWindowUrl, '_blank');\n\n if (!newWindow || newWindow.closed || typeof newWindow.closed === 'undefined') {\n setBlockedWindowUrl && setBlockedWindowUrl(newWindowUrl);\n }\n }\n } catch (e) {\n if (defaultCPanelUrl) {\n newWindowUrl = defaultCPanelUrl;\n\n if (newWindowUrl) {\n newWindow = window.open(newWindowUrl, '_blank');\n\n if (!newWindow || newWindow.closed || typeof newWindow.closed === 'undefined') {\n setBlockedWindowUrl && setBlockedWindowUrl(newWindowUrl);\n }\n }\n }\n }\n\n yield put(productsActions.cPanelSSO.loading(false));\n setLoadingCpanelSSOProductId && setLoadingCpanelSSOProductId(null);\n}\n\nfunction* clearNewAlerts({ payload }) {\n const clearedList = productsAssembly.clearNewAlerts(payload);\n yield put(productsActions.myAlerts.setClear(clearedList));\n}\n\nfunction* sagas() {\n yield takeLatest(ProductsActionTypes.REQUEST_GET_PRODUCTS, getProductsPerCategoryRequest);\n yield takeLatest(ProductsActionTypes.SET_PRODUCT_VISUALIZED, handleSetProductVisualized);\n yield takeLatest(ProductsActionTypes.GET_CPANEL_LINK, cPanelSSO);\n yield takeLatest(ProductsActionTypes.REQUEST_CLEAR_NEW_ALERTS, clearNewAlerts);\n yield takeLatest(ProductsActionTypes.GET_ALL_PRODUCTS, requestAllProducts);\n}\n\nexport default sagas;\n","import { ProductsActionTypes } from './products.types';\n\nconst initialState = {\n loading: false,\n loaded: false,\n owned: [\n {\n category: 'shared',\n has_product: false,\n },\n {\n category: 'domain',\n has_product: false,\n },\n {\n category: 'titan',\n has_product: false,\n },\n {\n category: 'dedicated',\n has_product: false,\n },\n {\n category: 'security',\n has_product: false,\n },\n {\n category: 'academy',\n has_product: false,\n },\n ],\n cPanelLoading: false,\n alertsList: [],\n alertsVisibility: false,\n listLoading: false,\n listLoaded: false,\n list: [],\n};\n\nconst productsReducer = (state = initialState, action) => {\n switch (action.type) {\n case ProductsActionTypes.GET_ALL_PRODUCTS:\n return {\n ...state,\n listLoading: true,\n };\n case ProductsActionTypes.SET_ALL_PRODUCTS_LIST:\n return {\n ...state,\n list: action.payload,\n };\n case ProductsActionTypes.GET_ALL_PRODUCTS_FAILURE:\n case ProductsActionTypes.GET_ALL_PRODUCTS_SUCCESS:\n return {\n ...state,\n listLoaded: true,\n listLoading: false,\n };\n case ProductsActionTypes.REQUEST_GET_PRODUCTS:\n return {\n ...state,\n loading: true,\n };\n case ProductsActionTypes.GET_PRODUCTS_SET:\n return {\n ...state,\n owned: action.payload,\n };\n case ProductsActionTypes.GET_PRODUCTS_SUCCESS:\n case ProductsActionTypes.GET_PRODUCTS_FAILURE:\n return {\n ...state,\n loading: false,\n loaded: true,\n };\n case ProductsActionTypes.SET_CPANEL_LOADING:\n return {\n ...state,\n cPanelLoading: action.payload,\n };\n case ProductsActionTypes.SET_ADD_ALERT:\n return {\n ...state,\n alertsList: [action.payload, ...state.alertsList],\n };\n case ProductsActionTypes.SET_CLEAR_NEW_ALERTS:\n return {\n ...state,\n alertsList: action.payload,\n };\n case ProductsActionTypes.SET_ALERTS_VISIBILITY:\n return {\n ...state,\n alertsVisibility: action.payload,\n };\n default:\n return state;\n }\n};\n\nexport default productsReducer;\n","export const FaqActionTypes = {\n REQUEST_FAQ_WORDPRESS: 'REQUEST_FAQ_WORDPRESS',\n GET_FAQ_WORDPRESS_SUCCESS: 'GET_FAQ_WORDPRESS_SUCCESS',\n GET_FAQ_WORDPRESS_FAILURE: 'GET_FAQ_WORDPRESS_FAILURE',\n\n REQUEST_FAQ_SOFTACULOUS: 'REQUEST_FAQ_SOFTACULOUS',\n GET_FAQ_SOFTACULOUS_SUCCESS: 'GET_FAQ_SOFTACULOUS_SUCCESS',\n GET_FAQ_SOFTACULOUS_FAILURE: 'GET_FAQ_SOFTACULOUS_FAILURE',\n\n REQUEST_FAQ_SITEBUILDER: 'REQUEST_FAQ_SITEBUILDER',\n GET_FAQ_SITEBUILDER_SUCCESS: 'GET_FAQ_SITEBUILDER_SUCCESS',\n GET_FAQ_SITEBUILDER_FAILURE: 'GET_FAQ_SITEBUILDER_FAILURE',\n\n REQUEST_FAQ_MAIN: 'REQUEST_FAQ_MAIN',\n GET_FAQ_MAIN_SUCCESS: 'GET_FAQ_MAIN_SUCCESS',\n GET_FAQ_MAIN_FAILURE: 'GET_FAQ_MAIN_FAILURE',\n\n REQUEST_FAQ_FINANCIAL: 'REQUEST_FAQ_FINANCIAL',\n GET_FAQ_FINANCIAL_SUCCESS: 'GET_FAQ_FINANCIAL_SUCCESS',\n GET_FAQ_FINANCIAL_FAILURE: 'GET_FAQ_FINANCIAL_FAILURE',\n\n REQUEST_FAQ_DNS: 'REQUEST_FAQ_DNS',\n GET_FAQ_DNS_SUCCESS: 'GET_FAQ_DNS_SUCCESS',\n GET_FAQ_DNS_FAILURE: 'GET_FAQ_DNS_FAILURE',\n\n REQUEST_FAQ_MAIL: 'REQUEST_FAQ_MAIL',\n GET_FAQ_MAIL_SUCCESS: 'GET_FAQ_MAIL_SUCCESS',\n GET_FAQ_MAIL_FAILURE: 'GET_FAQ_MAIL_FAILURE',\n\n REQUEST_FAQ_SITE: 'REQUEST_FAQ_SITE',\n GET_FAQ_SITE_SUCCESS: 'GET_FAQ_SITE_SUCCESS',\n GET_FAQ_SITE_FAILURE: 'GET_FAQ_SITE_FAILURE',\n\n REQUEST_FAQ_CLOUDFLARE: 'REQUEST_FAQ_CLOUDFLARE',\n GET_FAQ_CLOUDFLARE_SUCCESS: 'GET_FAQ_CLOUDFLARE_SUCCESS',\n GET_FAQ_CLOUDFLARE_FAILURE: 'GET_FAQ_CLOUDFLARE_FAILURE',\n\n LOADING_FAQ: 'LOADING_FAQ',\n SET_FAQ: 'SET_FAQ',\n DEFAULT: 'FAQ_DEFAULT',\n};\n","import { FaqActionTypes } from './faq.types';\n\nconst requestFaqWordpress = () => ({ type: FaqActionTypes.REQUEST_FAQ_WORDPRESS });\nconst getFaqWordpressSuccess = () => ({ type: FaqActionTypes.GET_FAQ_WORDPRESS_SUCCESS });\nconst getFaqWordpressFailure = () => ({ type: FaqActionTypes.GET_FAQ_WORDPRESS_FAILURE });\n\nconst requestSoftaculous = () => ({ type: FaqActionTypes.REQUEST_FAQ_SOFTACULOUS });\nconst getFaqSoftaculousSuccess = () => ({ type: FaqActionTypes.GET_FAQ_SOFTACULOUS_SUCCESS });\nconst getFaqSoftaculousFailure = () => ({ type: FaqActionTypes.GET_FAQ_SOFTACULOUS_FAILURE });\n\nconst requestSiteBuilder = () => ({ type: FaqActionTypes.REQUEST_FAQ_SITEBUILDER });\nconst getFaqSiteBuilderSuccess = () => ({ type: FaqActionTypes.GET_FAQ_SITEBUILDER_SUCCESS });\nconst getFaqSiteBuilderFailure = () => ({ type: FaqActionTypes.GET_FAQ_SITEBUILDER_FAILURE });\n\nconst requestFaqMain = () => ({ type: FaqActionTypes.REQUEST_FAQ_MAIN });\nconst getFaqMainSuccess = () => ({ type: FaqActionTypes.GET_FAQ_MAIN_SUCCESS });\nconst getFaqMainFailure = () => ({ type: FaqActionTypes.GET_FAQ_MAIN_FAILURE });\n\nconst requestFaqFinancial = () => ({ type: FaqActionTypes.REQUEST_FAQ_FINANCIAL });\nconst getFaqFinancialSuccess = () => ({ type: FaqActionTypes.GET_FAQ_FINANCIAL_SUCCESS });\nconst getFaqFinancialFailure = () => ({ type: FaqActionTypes.GET_FAQ_FINANCIAL_FAILURE });\n\nconst requestFaqDns = () => ({ type: FaqActionTypes.REQUEST_FAQ_DNS });\nconst getFaqDnsSuccess = () => ({ type: FaqActionTypes.GET_FAQ_DNS_SUCCESS });\nconst getFaqDnsFailure = () => ({ type: FaqActionTypes.GET_FAQ_DNS_FAILURE });\n\nconst requestFaqMail = () => ({ type: FaqActionTypes.REQUEST_FAQ_MAIL });\nconst getFaqMailSuccess = () => ({ type: FaqActionTypes.GET_FAQ_MAIL_SUCCESS });\nconst getFaqMailFailure = () => ({ type: FaqActionTypes.GET_FAQ_MAIL_FAILURE });\n\nconst requestFaqSite = () => ({ type: FaqActionTypes.REQUEST_FAQ_SITE });\nconst getFaqSiteSuccess = () => ({ type: FaqActionTypes.GET_FAQ_SITE_SUCCESS });\nconst getFaqSiteFailure = () => ({ type: FaqActionTypes.GET_FAQ_SITE_FAILURE });\n\nconst requestFaqCloudflare = () => ({ type: FaqActionTypes.REQUEST_FAQ_CLOUDFLARE });\nconst getFaqCloudflareSuccess = () => ({ type: FaqActionTypes.GET_FAQ_CLOUDFLARE_SUCCESS });\nconst getFaqCloudflareFailure = () => ({ type: FaqActionTypes.GET_FAQ_CLOUDFLARE_FAILURE });\n\nconst setLoading = boolean => ({\n type: FaqActionTypes.LOADING_FAQ, payload: { boolean },\n});\nconst setFaq = faq => ({\n type: FaqActionTypes.SET_FAQ, payload: { faq },\n});\n\n\nconst actions = {\n faq: {\n request: {\n wordpress: requestFaqWordpress,\n softaculous: requestSoftaculous,\n siteBuilder: requestSiteBuilder,\n faqMain: requestFaqMain,\n faqFinancial: requestFaqFinancial,\n faqDns: requestFaqDns,\n faqMail: requestFaqMail,\n faqSite: requestFaqSite,\n faqCloudflare: requestFaqCloudflare,\n },\n success: {\n wordpress: getFaqWordpressSuccess,\n softaculous: getFaqSoftaculousSuccess,\n siteBuilder: getFaqSiteBuilderSuccess,\n faqMain: getFaqMainSuccess,\n faqFinancial: getFaqFinancialSuccess,\n faqDns: getFaqDnsSuccess,\n faqMail: getFaqMailSuccess,\n faqSite: getFaqSiteSuccess,\n faqCloudflare: getFaqCloudflareSuccess,\n },\n failure: {\n wordpress: getFaqWordpressFailure,\n softaculous: getFaqSoftaculousFailure,\n siteBuilder: getFaqSiteBuilderFailure,\n faqMain: getFaqMainFailure,\n faqFinancial: getFaqFinancialFailure,\n faqDns: getFaqDnsFailure,\n faqMail: getFaqMailFailure,\n faqSite: getFaqSiteFailure,\n faqCloudflare: getFaqCloudflareFailure,\n },\n set: setFaq,\n load: setLoading,\n },\n};\n\nexport default actions;\n","const receiveFaq = ({ response, key }) => ({\n key,\n questions: [...response.data.data],\n});\n\nconst faqAssembly = {\n receiveFaq,\n};\n\nexport default faqAssembly;\n","import {\n call, takeLatest, put, select,\n} from 'redux-saga/effects';\nimport { api } from '@/utils/api';\nimport { FaqActionTypes } from './faq.types';\nimport faqActions from './faq.actions';\nimport faqAssembly from './faq.assembly';\nimport { FAQ_URL } from '@/config/api';\n\nfunction* getFaqWordpressSetup() {\n const { token } = yield select(state => state.auth);\n yield put(faqActions.faq.load(true));\n\n try {\n const request = {\n headers: {\n Authorization: token,\n },\n url: `${FAQ_URL}/create-site-wordpress`,\n };\n\n const response = yield call(api.whmcs.get, request);\n\n\n const faq = faqAssembly.receiveFaq({ response, key: 'wordpress' });\n yield put(faqActions.faq.set(faq));\n yield put(faqActions.faq.success.wordpress());\n } catch (e) {\n yield put(faqActions.faq.failure.wordpress());\n }\n yield put(faqActions.faq.load(false));\n}\n\nfunction* getFaqSitebuilderSetup() {\n const { token } = yield select(state => state.auth);\n yield put(faqActions.faq.load(true));\n\n try {\n const request = {\n headers: {\n Authorization: token,\n },\n url: `${FAQ_URL}/create-site-websitebuilder`,\n };\n\n const response = yield call(api.whmcs.get, request);\n\n const faq = faqAssembly.receiveFaq({ response, key: 'sitebuilder' });\n yield put(faqActions.faq.set(faq));\n yield put(faqActions.faq.success.siteBuilder());\n } catch (e) {\n yield put(faqActions.faq.failure.siteBuilder());\n }\n yield put(faqActions.faq.load(false));\n}\n\nfunction* getFaqSoftaculousSetup() {\n const { token } = yield select(state => state.auth);\n yield put(faqActions.faq.load(true));\n\n try {\n const request = {\n headers: {\n Authorization: token,\n },\n url: `${FAQ_URL}/create-site-softaculous`,\n };\n\n const response = yield call(api.whmcs.get, request);\n\n const faq = faqAssembly.receiveFaq({ response, key: 'softaculous' });\n\n yield put(faqActions.faq.set(faq));\n yield put(faqActions.faq.success.softaculous());\n } catch (e) {\n yield put(faqActions.faq.failure.softaculous());\n }\n yield put(faqActions.faq.load(false));\n}\n\nfunction* getFaqMainSupportPage() {\n const { token } = yield select(state => state.auth);\n yield put(faqActions.faq.load(true));\n\n try {\n const request = {\n headers: {\n Authorization: token,\n },\n url: `${FAQ_URL}/main-support`,\n };\n\n const response = yield call(api.whmcs.get, request);\n\n const faq = faqAssembly.receiveFaq({ response, key: 'mainSupportPage' });\n\n yield put(faqActions.faq.set(faq));\n yield put(faqActions.faq.success.faqMain());\n } catch (e) {\n yield put(faqActions.faq.failure.faqMain());\n }\n yield put(faqActions.faq.load(false));\n}\n\nfunction* getFaqFinancialSupportPage() {\n const { token } = yield select(state => state.auth);\n yield put(faqActions.faq.load(true));\n\n try {\n const request = {\n headers: {\n Authorization: token,\n },\n url: `${FAQ_URL}/billing-support`,\n };\n\n const response = yield call(api.whmcs.get, request);\n\n const faq = faqAssembly.receiveFaq({ response, key: 'financialSupportPage' });\n\n yield put(faqActions.faq.set(faq));\n yield put(faqActions.faq.success.faqFinancial());\n } catch (e) {\n yield put(faqActions.faq.failure.faqFinancial());\n }\n yield put(faqActions.faq.load(false));\n}\n\nfunction* getFaqDnsSupportPage() {\n const { token } = yield select(state => state.auth);\n yield put(faqActions.faq.load(true));\n\n try {\n const request = {\n headers: {\n Authorization: token,\n },\n url: `${FAQ_URL}/dns-support`,\n };\n\n const response = yield call(api.whmcs.get, request);\n\n const faq = faqAssembly.receiveFaq({ response, key: 'dnsSupportPage' });\n\n yield put(faqActions.faq.set(faq));\n yield put(faqActions.faq.success.faqDns());\n } catch (e) {\n yield put(faqActions.faq.failure.faqDns());\n }\n yield put(faqActions.faq.load(false));\n}\n\nfunction* getFaqMailSupportPage() {\n const { token } = yield select(state => state.auth);\n yield put(faqActions.faq.load(true));\n\n try {\n const request = {\n headers: {\n Authorization: token,\n },\n url: `${FAQ_URL}/mail-support`,\n };\n\n const response = yield call(api.whmcs.get, request);\n\n const faq = faqAssembly.receiveFaq({ response, key: 'mailSupportPage' });\n\n yield put(faqActions.faq.set(faq));\n yield put(faqActions.faq.success.faqMail());\n } catch (e) {\n yield put(faqActions.faq.failure.faqMail());\n }\n yield put(faqActions.faq.load(false));\n}\n\nfunction* getFaqSiteSupportPage() {\n const { token } = yield select(state => state.auth);\n yield put(faqActions.faq.load(true));\n\n try {\n const request = {\n headers: {\n Authorization: token,\n },\n url: `${FAQ_URL}/site-support`,\n };\n\n const response = yield call(api.whmcs.get, request);\n\n const faq = faqAssembly.receiveFaq({ response, key: 'siteSupportPage' });\n\n yield put(faqActions.faq.set(faq));\n yield put(faqActions.faq.success.faqSite());\n } catch (e) {\n yield put(faqActions.faq.failure.faqSite());\n }\n yield put(faqActions.faq.load(false));\n}\n\nfunction* getFaqCloudflare() {\n const { token } = yield select(state => state.auth);\n yield put(faqActions.faq.load(true));\n\n try {\n const request = {\n headers: {\n Authorization: token,\n },\n url: `${FAQ_URL}/cloudflare`,\n };\n\n const response = yield call(api.whmcs.get, request);\n\n const faq = faqAssembly.receiveFaq({ response, key: 'cloudflare' });\n\n yield put(faqActions.faq.set(faq));\n yield put(faqActions.faq.success.faqSite());\n } catch (e) {\n yield put(faqActions.faq.failure.faqSite());\n }\n yield put(faqActions.faq.load(false));\n}\n\nfunction* sagas() {\n yield takeLatest(FaqActionTypes.REQUEST_FAQ_WORDPRESS, getFaqWordpressSetup);\n yield takeLatest(FaqActionTypes.REQUEST_FAQ_SITEBUILDER, getFaqSitebuilderSetup);\n yield takeLatest(FaqActionTypes.REQUEST_FAQ_SOFTACULOUS, getFaqSoftaculousSetup);\n yield takeLatest(FaqActionTypes.REQUEST_FAQ_MAIN, getFaqMainSupportPage);\n yield takeLatest(FaqActionTypes.REQUEST_FAQ_FINANCIAL, getFaqFinancialSupportPage);\n yield takeLatest(FaqActionTypes.REQUEST_FAQ_DNS, getFaqDnsSupportPage);\n yield takeLatest(FaqActionTypes.REQUEST_FAQ_MAIL, getFaqMailSupportPage);\n yield takeLatest(FaqActionTypes.REQUEST_FAQ_SITE, getFaqSiteSupportPage);\n yield takeLatest(FaqActionTypes.REQUEST_FAQ_CLOUDFLARE, getFaqCloudflare);\n}\n\nexport default sagas;\n","import { FaqActionTypes } from './faq.types';\n\nexport const initialState = {\n loading: false,\n wordpress: {\n loaded: false,\n questions: [],\n },\n sitebuilder: {\n loaded: false,\n questions: [],\n },\n softaculous: {\n loaded: false,\n questions: [],\n },\n mainSupportPage: {\n loaded: false,\n questions: [],\n },\n financialSupportPage: {\n loaded: false,\n questions: [],\n },\n dnsSupportPage: {\n loaded: false,\n questions: [],\n },\n mailSupportPage: {\n loaded: false,\n questions: [],\n },\n siteSupportPage: {\n loaded: false,\n questions: [],\n },\n cloudflare: {\n loaded: false,\n questions: [],\n },\n};\n\nconst faqReducer = (state = initialState, action) => {\n switch (action.type) {\n case FaqActionTypes.LOADING_FAQ: {\n const { boolean } = action.payload;\n return {\n ...state,\n loading: boolean,\n };\n }\n case FaqActionTypes.SET_FAQ:\n return {\n ...state,\n [action.payload.faq.key]: {\n loaded: true,\n questions: action.payload.faq.questions,\n },\n };\n default:\n return state;\n }\n};\n\nexport default faqReducer;\n","export const InvoicesActionTypes = {\n\n GET_INVOICES_FAILURE: 'GET_INVOICES_FAILURE',\n GET_INVOICES_REQUEST: 'GET_INVOICES_REQUEST',\n GET_INVOICES_SUCCESS: 'GET_INVOICES_SUCCESS',\n\n // OLD INVOICE DETAILS ACTIONS\n INVOICE_DETAILS_REQUEST: 'INVOICE_DETAILS_REQUEST',\n INVOICE_DETAILS_FAILURE: 'INVOICE_DETAILS_FAILURE',\n INVOICE_DETAILS_SUCCESS: 'INVOICE_DETAILS_SUCCESS',\n\n\n // NEW INVOICE DETAILS ACTIONS\n GET_INVOICE_DETAILS: 'GET_INVOICE_DETAILS',\n SET_INVOICE_DETAILS: 'SET_INVOICE_DETAILS',\n SUCCESS_INVOICE_DETAILS: 'SUCCESS_INVOICE_DETAILS',\n FAILURE_INVOICE_DETAILS: 'FAILURE_INVOICE_DETAILS',\n SET_INVOICE_DETAILS_LOADING: 'SET_INVOICE_DETAILS_LOADING',\n RESET_INVOICE_DETAILS_STATE: 'RESET_INVOICE_DETAILS_STATE',\n\n SET_INVOICE_DATA: 'SET_INVOICE_DATA',\n\n GENERATE_PIX_FAILURE: 'GENERATE_PIX__FAILURE',\n GENERATE_PIX_REQUEST: 'GENERATE_PIX__REQUEST',\n GENERATE_PIX_SUCCESS: 'GENERATE_PIX__SUCCESS',\n SET_PIX: 'SET_PIX',\n\n CANCEL_ORDER_REQUEST: 'CANCEL_ORDER_REQUEST',\n CANCEL_ORDER_SUCCESS: 'CANCEL_ORDER_SUCCESS',\n CANCEL_ORDER_FAILURE: 'CANCEL_ORDER_FAILURE',\n CANCEL_ORDER_LOADING: 'CANCEL_ORDER_LOADING',\n\n SPLIT_PAYMENT_FAILURE: 'SPLIT_PAYMENT_FAILURE',\n SPLIT_PAYMENT_REQUEST: 'SPLIT_PAYMENT_REQUEST',\n SPLIT_PAYMENT_SUCCESS: 'SPLIT_PAYMENT_SUCCESS',\n\n GET_NFSE_FAILURE: 'GET_NFSE_FAILURE',\n GET_NFSE_REQUEST: 'GET_NFSE_REQUEST',\n GET_NFSE_SUCCESS: 'GET_NFSE_SUCCESS',\n SET_NFSE: 'SET_NFSE',\n\n};\n","import { InvoicesActionTypes } from './invoices.types';\n\nconst getInvoicesRequest = () => ({ type: InvoicesActionTypes.GET_INVOICES_REQUEST });\nconst getInvoicesSuccess = () => ({ type: InvoicesActionTypes.GET_INVOICES_SUCCESS });\nconst getInvoicesFailure = () => ({ type: InvoicesActionTypes.GET_INVOICES_FAILURE });\n\nconst splitPaymentSuccess = () => ({ type: InvoicesActionTypes.SPLIT_PAYMENT_SUCCESS });\n\nconst splitPaymentFailure = () => ({ type: InvoicesActionTypes.SPLIT_PAYMENT_FAILURE });\n\nconst splitPaymentRequest = (invoiceId, listProductsId, callBackFuction) => ({\n type: InvoicesActionTypes.SPLIT_PAYMENT_REQUEST,\n payload: { invoiceId, listProductsId, callBackFuction },\n});\n\n// OLD INVOICE DETAILS ACTIONS\nconst loadInvoiceDetailsRequest = (invoiceId, callBackFuction) => ({\n type: InvoicesActionTypes.INVOICE_DETAILS_REQUEST,\n payload: { invoiceId, callBackFuction },\n});\nconst loadInvoiceDetailsSuccess = () => ({ type: InvoicesActionTypes.INVOICE_DETAILS_SUCCESS });\nconst loadInvoiceDetailsFailure = () => ({ type: InvoicesActionTypes.INVOICE_DETAILS_FAILURE });\n\n// NEW INVOICE DETAILS ACTIONS\nconst requestInvoiceDetails = invoiceId => ({ type: InvoicesActionTypes.GET_INVOICE_DETAILS, payload: invoiceId });\nconst setInvoiceDetailsLoading = isLoading => ({ type: InvoicesActionTypes.SET_INVOICE_DETAILS_LOADING, payload: isLoading });\nconst setInvoiceDetails = data => ({ type: InvoicesActionTypes.SET_INVOICE_DETAILS, payload: data });\nconst invoiceDetailsSuccess = () => ({ type: InvoicesActionTypes.SUCCESS_INVOICE_DETAILS });\nconst invoiceDetailsFailure = () => ({ type: InvoicesActionTypes.FAILURE_INVOICE_DETAILS });\nconst resetInvoiceDetailsState = () => ({ type: InvoicesActionTypes.RESET_INVOICE_DETAILS_STATE });\n\nconst setInvoiceData = invoiceData => ({\n type: InvoicesActionTypes.SET_INVOICE_DATA,\n payload: invoiceData,\n});\n\nconst generatePixRequest = ({ invoiceId, callBackFuction }) => ({\n type: InvoicesActionTypes.GENERATE_PIX_REQUEST,\n payload: { invoiceId, callBackFuction },\n});\n\nconst setPix = ({ qrCode, code, failure = false }) => ({\n type: InvoicesActionTypes.SET_PIX,\n payload: { qrCode, code, failure },\n});\n\nconst generatePixSuccess = () => ({\n type: InvoicesActionTypes.GENERATE_PIX_SUCCESS,\n});\n\nconst generatePixFailure = () => ({\n type: InvoicesActionTypes.GENERATE_PIX_FAILURE,\n});\n\nconst cancelOrderRequest = ({ orderId, reloadData }) => ({\n type: InvoicesActionTypes.CANCEL_ORDER_REQUEST,\n payload: { orderId, reloadData },\n});\n\nconst cancelOrderSuccess = status => ({\n type: InvoicesActionTypes.CANCEL_ORDER_SUCCESS,\n payload: status,\n});\n\nconst cancelOrderFailure = status => ({\n type: InvoicesActionTypes.CANCEL_ORDER_FAILURE,\n payload: status,\n});\n\nconst cancelOrderLoading = loading => ({\n type: InvoicesActionTypes.CANCEL_ORDER_LOADING,\n payload: loading,\n});\n\nconst getNFSEByInvoiceRequest = invoiceId => ({\n type: InvoicesActionTypes.GET_NFSE_REQUEST,\n payload: { invoiceId },\n});\n\nconst getNFSEByInvoiceSuccess = () => ({\n type: InvoicesActionTypes.GET_NFSE_SUCCESS,\n});\n\nconst getNFSEByInvoiceFailure = () => ({\n type: InvoicesActionTypes.GET_NFSE_FAILURE,\n});\n\nconst setNFSEByInvoice = (listOfNfse = [], currentInvoiceId = null) => ({\n type: InvoicesActionTypes.SET_NFSE,\n payload: {\n listOfNfse,\n currentInvoiceId,\n },\n});\n\nconst actions = {\n invoices: {\n failure: getInvoicesFailure,\n request: getInvoicesRequest,\n success: getInvoicesSuccess,\n setInvoiceData,\n\n loadDetails: {\n request: loadInvoiceDetailsRequest,\n success: loadInvoiceDetailsSuccess,\n failure: loadInvoiceDetailsFailure,\n },\n loadDetailsV2: {\n request: requestInvoiceDetails,\n success: invoiceDetailsSuccess,\n failure: invoiceDetailsFailure,\n set: setInvoiceDetails,\n setLoading: setInvoiceDetailsLoading,\n resetState: resetInvoiceDetailsState,\n },\n generatePix: {\n request: generatePixRequest,\n success: generatePixSuccess,\n failure: generatePixFailure,\n setPix,\n },\n splitPayment: {\n request: splitPaymentRequest,\n success: splitPaymentSuccess,\n failure: splitPaymentFailure,\n },\n getNfse: {\n request: getNFSEByInvoiceRequest,\n success: getNFSEByInvoiceSuccess,\n failure: getNFSEByInvoiceFailure,\n set: setNFSEByInvoice,\n },\n },\n cancelOrder: {\n request: cancelOrderRequest,\n success: cancelOrderSuccess,\n failure: cancelOrderFailure,\n loading: cancelOrderLoading,\n },\n};\n\nexport default actions;\n","import {\n call, takeLatest, put, select,\n} from 'redux-saga/effects';\nimport { api } from '@/utils/api';\n\nimport { InvoicesActionTypes } from './invoices.types';\nimport {\n GENERATE_PIX, INVOICE_DETAIL_URL, INVOICE_SPLIT_PAYMENT_URL, NFSE_BY_INVOICE_URL,\n} from '@/config/api';\nimport { invoicesActions } from '.';\nimport { AWS_GATOR_SOLUTIONS_URL } from '@/config';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport Cookies from 'js-cookie';\nimport { TEMPLATE_COOKIES } from '@/components/Layout/Template/Template.types';\nimport { authActions } from '../auth';\nimport { commonActions } from '../common';\nimport { locale } from '@/utils/locale';\n\nfunction* splitPayment(action) {\n const { invoiceId, listProductsId, callBackFuction } = action.payload;\n const { token } = yield select(state => state.auth);\n const request = {\n\n headers: {\n Authorization: `Bearer ${token}`,\n },\n url: INVOICE_SPLIT_PAYMENT_URL(invoiceId),\n data: { items: listProductsId },\n };\n\n try {\n const response = yield call(api.whmcs.post, request);\n callBackFuction(response.status);\n yield put(invoicesActions.invoices.splitPayment.success);\n } catch (e) {\n callBackFuction('');\n }\n}\n\nfunction* loadDetails(action) {\n const { invoiceId, callBackFuction } = action.payload;\n const { token } = yield select(state => state.auth);\n\n const request = {\n\n headers: {\n Authorization: `Bearer ${token}`,\n },\n url: INVOICE_DETAIL_URL(invoiceId),\n };\n\n try {\n const response = yield call(api.whmcs.get, request);\n\n const invoice = {\n ...response.data.data.invoice,\n items: response.data.data.invoiceItems,\n nfse: response.data.data.nfse,\n };\n callBackFuction(invoice);\n yield put(invoicesActions.invoices.success());\n } catch (e) {\n callBackFuction('');\n }\n}\n\nfunction* loadDetailsV2(action) {\n const { invoiceId } = action.payload;\n const { token } = yield select(state => state.auth);\n\n const request = {\n headers: {\n Authorization: `Bearer ${token}`,\n },\n url: INVOICE_DETAIL_URL(invoiceId),\n };\n\n yield put(invoicesActions.invoices.loadDetailsV2.setLoading(true));\n\n try {\n const response = yield call(api.whmcs.get, request);\n yield put(invoicesActions.invoices.loadDetailsV2.set(response.data));\n yield put(invoicesActions.invoices.loadDetailsV2.success());\n } catch (e) {\n yield put(invoicesActions.invoices.loadDetailsV2.failure());\n }\n\n yield put(invoicesActions.invoices.loadDetailsV2.setLoading(false));\n}\n\nfunction* generatePix(action) {\n const { invoiceId, callBackFuction } = action.payload;\n const { token } = yield select(state => state.auth);\n\n const request = {\n headers: {\n Authorization: `Bearer ${token}`,\n },\n url: GENERATE_PIX(invoiceId),\n };\n\n try {\n const response = yield call(api.whmcs.post, request);\n callBackFuction && callBackFuction(response.data.code, response.data.qrCode);\n yield put(invoicesActions.invoices.generatePix.success());\n yield put(invoicesActions.invoices.generatePix.setPix({\n code: response.data.code,\n qrCode: response.data.qrCode,\n failure: false,\n }));\n } catch (e) {\n callBackFuction && callBackFuction('', '');\n yield put(invoicesActions.invoices.generatePix.setPix({\n code: null,\n qrCode: null,\n failure: true,\n }));\n yield put(invoicesActions.invoices.generatePix.failure());\n }\n}\n\nfunction* cancelOrder(action) {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { orderId, reloadData } = action.payload;\n const { token, jwt: jwtToken } = yield select(state => state.auth);\n const brand = isBRServer ? 'br' : 'es';\n\n const request = {\n url: `${AWS_GATOR_SOLUTIONS_URL}/order/${orderId}/cancel`,\n headers: {\n Authorization: `Bearer ${token}`,\n 'x-region': brand,\n 'x-service-token': jwtToken,\n },\n };\n\n yield put(invoicesActions.cancelOrder.loading(true));\n try {\n yield call(api.aws.post, request);\n yield put(invoicesActions.cancelOrder.success('canceled'));\n reloadData && reloadData();\n } catch (e) {\n yield put(invoicesActions.cancelOrder.failure('cancelation_fail'));\n }\n yield put(invoicesActions.cancelOrder.loading(false));\n}\n\nfunction* getNFSEByInvoice(action) {\n const { invoiceId } = action.payload;\n const { token } = yield select(state => state.auth);\n const errorNotification = commonActions.notifications.set({\n label: locale('invoices.infotReceiptGeneration'),\n type: 'error',\n });\n\n const request = {\n headers: {\n Authorization: `Bearer ${token}`,\n },\n url: NFSE_BY_INVOICE_URL(invoiceId),\n };\n\n try {\n const response = yield call(api.whmcs.get, request);\n const listOfNfse = response.data ? response.data.data : [];\n\n if (!listOfNfse.length) {\n yield put(invoicesActions.invoices.getNfse.set([], invoiceId));\n yield put(errorNotification);\n }\n if (listOfNfse.length) {\n const nfseData = response.data.data;\n yield put(invoicesActions.invoices.getNfse.set(nfseData, invoiceId));\n }\n\n yield put(invoicesActions.invoices.success());\n } catch (e) {\n yield put(invoicesActions.invoices.getNfse.set([], invoiceId));\n yield put(errorNotification);\n yield put(invoicesActions.invoices.failure());\n }\n}\nfunction* sagas() {\n yield takeLatest(InvoicesActionTypes.INVOICE_DETAILS_REQUEST, loadDetails);\n yield takeLatest(InvoicesActionTypes.GET_INVOICE_DETAILS, loadDetailsV2);\n yield takeLatest(InvoicesActionTypes.GENERATE_PIX_REQUEST, generatePix);\n yield takeLatest(InvoicesActionTypes.CANCEL_ORDER_REQUEST, cancelOrder);\n yield takeLatest(InvoicesActionTypes.SPLIT_PAYMENT_REQUEST, splitPayment);\n yield takeLatest(InvoicesActionTypes.GET_NFSE_REQUEST, getNFSEByInvoice);\n}\n\nexport default sagas;\n","import { InvoicesActionTypes } from './invoices.types';\n\nexport const initialState = {\n orderCancelStatus: undefined,\n orderCancelLoading: false,\n invoices: {\n listOfNfse: null,\n currentInvoiceId: [],\n },\n invoiceData: null,\n invoiceDetails: {\n data: null,\n loading: false,\n status: null,\n },\n qrCode: null,\n pixCode: null,\n};\n\nconst alertsReducer = (state = initialState, action) => {\n switch (action.type) {\n case InvoicesActionTypes.SET_INVOICE_DATA: {\n return {\n ...state,\n invoiceData: action.payload,\n };\n }\n case InvoicesActionTypes.SET_INVOICE_DETAILS: {\n return {\n ...state,\n invoiceDetails: {\n ...state.invoiceDetails,\n data: action.payload.data,\n },\n };\n }\n case InvoicesActionTypes.SUCCESS_INVOICE_DETAILS: {\n return {\n ...state,\n invoiceDetails: {\n ...state.invoiceDetails,\n status: 'success',\n },\n };\n }\n case InvoicesActionTypes.FAILURE_INVOICE_DETAILS: {\n return {\n ...state,\n invoiceDetails: {\n ...state.invoiceDetails,\n status: 'failure',\n },\n };\n }\n case InvoicesActionTypes.SET_INVOICE_DETAILS_LOADING: {\n return {\n ...state,\n invoiceDetails: {\n ...state.invoiceDetails,\n loading: action.payload,\n },\n };\n }\n case InvoicesActionTypes.RESET_INVOICE_DETAILS_STATE: {\n return {\n ...state,\n invoiceDetails: initialState.invoiceDetails,\n };\n }\n case InvoicesActionTypes.CANCEL_ORDER_SUCCESS:\n case InvoicesActionTypes.CANCEL_ORDER_FAILURE: {\n return {\n ...state,\n orderCancelStatus: action.payload,\n };\n }\n case InvoicesActionTypes.CANCEL_ORDER_LOADING: {\n return {\n ...state,\n orderCancelLoading: action.payload,\n };\n }\n case InvoicesActionTypes.SET_NFSE: {\n return {\n ...state,\n invoices: action.payload,\n };\n }\n case InvoicesActionTypes.SET_PIX: {\n return {\n ...state,\n qrCode: action.payload.qrCode,\n pixCode: action.payload.code,\n pixFailure: action.payload.failure,\n };\n }\n default:\n return state;\n }\n};\n\nexport default alertsReducer;\n","export const SecurityActionTypes = {\n SITELOCK_SCAN_DETAILS_LOADING: 'SITELOCK_SCAN_DETAILS_LOADING',\n SITELOCK_SCAN_DETAILS_REQUEST: 'SITELOCK_SCAN_DETAILS_REQUEST',\n SITELOCK_SCAN_DETAILS_SUCCESS: 'SITELOCK_SCAN_DETAILS_SUCCESS',\n SITELOCK_SCAN_DETAILS_FAILURE: 'SITELOCK_SCAN_DETAILS_FAILURE',\n SET_SITELOCK_SCAN_DETAILS: 'SET_SITELOCK_SCAN_DETAILS',\n UPDATE_SEAL: 'UPDATE_SEAL',\n REQUEST_SEAL: 'REQUEST_SEAL',\n SUCCESS_REQUEST_SEAL: 'SUCCESS_REQUEST_SEAL',\n FAILURE_REQUEST_SEAL: 'FAILURE_REQUEST_SEAL',\n SUCCESS_UPDATE_SEAL: 'SUCCESS_UPDATE_SEAL',\n FAILURE_UPDATE_SEAL: 'FAILURE_UPDATE_SEAL',\n SET_SEAL: 'SET_SEAL',\n SET_SEAL_LOADING_STATUS: 'SET_SEAL_LOADING_STATUS',\n SET_SEAL_SAVING_STATUS: 'SET_SEAL_SAVING_STATUS',\n SITELOCK_SCAN_LIST_LOADING: 'SITELOCK_SCAN_LIST_LOADING',\n SITELOCK_SCAN_LIST_REQUEST: 'SITELOCK_SCAN_LIST_REQUEST',\n SITELOCK_SCAN_LIST_SUCCESS: 'SITELOCK_SCAN_LIST_SUCCESS',\n SITELOCK_SCAN_LIST_FAILURE: 'SITELOCK_SCAN_LIST_FAILURE',\n SET_SITELOCK_SCAN_LIST: 'SET_SITELOCK_SCAN_LIST',\n SET_UPGRADE_SITELOCK_LOADING: 'SET_UPGRADE_SITELOCK_LOADING',\n REQUEST_UPGRADE_SITELOCK: 'REQUEST_UPGRADE_SITELOCK',\n SUCCESS_UPGRADE_SITELOCK: 'SUCCESS_UPGRADE_SITELOCK',\n FAILURE_UPGRADE_SITELOCK: 'FAILURE_UPGRADE_SITELOCK',\n SET_UPGRADE_SITELOCK: 'SET_UPGRADE_SITELOCK',\n UPDATE_CONFIGURATIONS_LOADING: 'UPDATE_CONFIGURATIONS_LOADING',\n REQUEST_UPDATE_CONFIGURATIONS: 'REQUEST_UPDATE_CONFIGURATIONS',\n SUCCESS_UPDATE_CONFIGURATIONS: 'SUCCESS_UPDATE_CONFIGURATIONS',\n FAILURE_UPDATE_CONFIGURATIONS: 'FAILURE_UPDATE_CONFIGURATIONS',\n GET_CONFIGURATIONS_LOADING: 'GET_CONFIGURATIONS_LOADING',\n REQUEST_GET_CONFIGURATIONS: 'REQUEST_GET_CONFIGURATIONS',\n SET_SITELOCK_CONFIGURATIONS: 'SET_SITELOCK_CONFIGURATIONS',\n SUCCESS_GET_CONFIGURATIONS: 'SUCCESS_GET_CONFIGURATIONS',\n FAILURE_GET_CONFIGURATIONS: 'FAILURE_GET_CONFIGURATIONS',\n REQUEST_SITELOCK_SSO: 'REQUEST_SITELOCK_SSO',\n SITELOCK_SSO_SUCCESS: 'SITELOCK_SSO_SUCCESS',\n SITELOCK_SSO_FAILURE: 'SITELOCK_SSO_FAILURE',\n SET_SITELOCK_SSO_LOADING: 'SET_SITELOCK_SSO_LOADING',\n REQUEST_CHECK_NEW_SITELOCK: 'REQUEST_CHECK_NEW_SITELOCK',\n SUCCESS_CHECK_NEW_SITELOCK: 'SUCCESS_CHECK_NEW_SITELOCK',\n FAILURE_CHECK_NEW_SITELOCK: 'FAILURE_CHECK_NEW_SITELOCK',\n SET_CHECK_NEW_SITELOCK: 'SET_CHECK_NEW_SITELOCK',\n REQUEST_SAW_NEW_SITELOCK: 'REQUEST_SAW_NEW_SITELOCK',\n SUCCESS_SAW_NEW_SITELOCK: 'SUCCESS_SAW_NEW_SITELOCK',\n FAILURE_SAW_NEW_SITELOCK: 'FAILURE_SAW_NEW_SITELOCK',\n};\n","import { SecurityActionTypes } from './security.types';\n\nconst setScanLoading = isLoading => ({ type: SecurityActionTypes.SITELOCK_SCAN_DETAILS_LOADING, payload: { isLoading } });\n\nconst getScanDetails = payload => ({ type: SecurityActionTypes.SITELOCK_SCAN_DETAILS_REQUEST, payload });\nconst scanDetailsSuccess = () => ({ type: SecurityActionTypes.SITELOCK_SCAN_DETAILS_SUCCESS });\nconst scanDetailsFailure = () => ({ type: SecurityActionTypes.SITELOCK_SCAN_DETAILS_FAILURE });\nconst setScanDetails = payload => ({ type: SecurityActionTypes.SET_SITELOCK_SCAN_DETAILS, payload });\n\nconst updateSeal = ({\n productType,\n productId,\n formData,\n setDate,\n successMessage,\n failureMessage,\n}) => ({\n type: SecurityActionTypes.UPDATE_SEAL,\n payload: {\n formData,\n productType,\n productId,\n setDate,\n successMessage,\n failureMessage,\n },\n});\n\nconst setLoadingStatus = bool => ({ type: SecurityActionTypes.SET_SEAL_LOADING_STATUS, payload: { bool } });\nconst setSavingStatus = bool => ({ type: SecurityActionTypes.SET_SEAL_SAVING_STATUS, payload: { bool } });\nconst setSuccess = () => ({ type: SecurityActionTypes.SUCCESS_UPDATE_SEAL });\nconst setFailure = () => ({ type: SecurityActionTypes.FAILURE_UPDATE_SEAL });\nconst requestSeal = ({ productType, productId }) => ({ type: SecurityActionTypes.REQUEST_SEAL, payload: { productType, productId } });\nconst setSealSuccessRequest = () => ({ type: SecurityActionTypes.SUCCESS_REQUEST_SEAL });\nconst setSealFailureRequest = () => ({ type: SecurityActionTypes.FAILURE_REQUEST_SEAL });\nconst setSeal = seal => ({ type: SecurityActionTypes.SET_SEAL, payload: seal });\n\nconst setScanListLoading = isLoading => ({ type: SecurityActionTypes.SITELOCK_SCAN_LIST_LOADING, payload: { isLoading } });\nconst getScanList = payload => ({ type: SecurityActionTypes.SITELOCK_SCAN_LIST_REQUEST, payload });\nconst scanListSuccess = () => ({ type: SecurityActionTypes.SITELOCK_SCAN_LIST_SUCCESS });\nconst scanListsFailure = () => ({ type: SecurityActionTypes.SITELOCK_SCAN_LIST_FAILURE });\nconst setScanList = payload => ({ type: SecurityActionTypes.SET_SITELOCK_SCAN_LIST, payload });\n\nconst setUpgradeSitelockLoading = isLoading => ({ type: SecurityActionTypes.SET_UPGRADE_SITELOCK_LOADING, payload: { isLoading } });\nconst requestUpgradeSitelock = payload => ({ type: SecurityActionTypes.REQUEST_UPGRADE_SITELOCK, payload });\nconst successUpgradeSitelock = () => ({ type: SecurityActionTypes.SUCCESS_UPGRADE_SITELOCK });\nconst failureUpgradeSitelock = () => ({ type: SecurityActionTypes.FAILURE_UPGRADE_SITELOCK });\nconst setUpgradeSitelock = payload => ({ type: SecurityActionTypes.SET_UPGRADE_SITELOCK, payload });\n\nconst requestUpdateConfigurations = ({\n productType, productId, data, successMessage, failureMessage,\n}) => ({\n type: SecurityActionTypes.REQUEST_UPDATE_CONFIGURATIONS,\n payload: {\n productType, productId, data, successMessage, failureMessage,\n },\n});\n\nconst loadingUpdateConfigurations = isLoading => ({ type: SecurityActionTypes.UPDATE_CONFIGURATIONS_LOADING, payload: { isLoading } });\nconst successUpdateConfigurations = () => ({ type: SecurityActionTypes.SUCCESS_UPDATE_CONFIGURATIONS });\nconst failureUpdateConfigurations = () => ({ type: SecurityActionTypes.FAILURE_UPDATE_CONFIGURATIONS });\n\nconst requestGetConfigurations = ({ productType, productId }) => ({ type: SecurityActionTypes.REQUEST_GET_CONFIGURATIONS, payload: { productType, productId } });\nconst successGetConfigurations = () => ({ type: SecurityActionTypes.SUCCESS_GET_CONFIGURATIONS });\nconst failureGetConfigurations = () => ({ type: SecurityActionTypes.FAILURE_GET_CONFIGURATIONS });\nconst setGetConfigurations = payload => ({ type: SecurityActionTypes.SET_SITELOCK_CONFIGURATIONS, payload: { data: payload } });\nconst loadingGetConfigurations = isLoading => ({ type: SecurityActionTypes.GET_CONFIGURATIONS_LOADING, payload: { isLoading } });\nconst requestSitelockSso = ({ hostingId }) => ({ type: SecurityActionTypes.REQUEST_SITELOCK_SSO, payload: { hostingId } });\nconst successSitelockSso = () => ({ type: SecurityActionTypes.SITELOCK_SSO_SUCCESS });\nconst failureSitelockSso = () => ({ type: SecurityActionTypes.SITELOCK_SSO_FAILURE });\nconst setSitelockSsoLoading = isLoading => ({ type: SecurityActionTypes.SET_SITELOCK_SSO_LOADING, payload: { isLoading } });\n\nconst requestCheckNewSitelock = () => ({ type: SecurityActionTypes.REQUEST_CHECK_NEW_SITELOCK });\nconst successCheckNewSitelock = () => ({ type: SecurityActionTypes.SUCCESS_CHECK_NEW_SITELOCK });\nconst failureCheckNewSitelock = () => ({ type: SecurityActionTypes.FAILURE_CHECK_NEW_SITELOCK });\nconst setCheckNewSitelock = payload => ({ type: SecurityActionTypes.SET_CHECK_NEW_SITELOCK, payload });\n\nconst requestSawNewSitelock = () => ({ type: SecurityActionTypes.REQUEST_SAW_NEW_SITELOCK });\nconst successSawNewSitelock = () => ({ type: SecurityActionTypes.SUCCESS_SAW_NEW_SITELOCK });\nconst failureSawNewSitelock = () => ({ type: SecurityActionTypes.FAILURE_SAW_NEW_SITELOCK });\n\nconst actions = {\n scanDetails: {\n setLoading: setScanLoading,\n request: getScanDetails,\n success: scanDetailsSuccess,\n failure: scanDetailsFailure,\n set: setScanDetails,\n },\n seal: {\n setLoadingStatus,\n setSavingStatus,\n requestSeal,\n setSealSuccessRequest,\n setSealFailureRequest,\n updateSeal,\n setSuccess,\n setFailure,\n setSeal,\n },\n scanList: {\n setLoading: setScanListLoading,\n request: getScanList,\n success: scanListSuccess,\n failure: scanListsFailure,\n set: setScanList,\n },\n upgrade: {\n setLoading: setUpgradeSitelockLoading,\n request: requestUpgradeSitelock,\n success: successUpgradeSitelock,\n failure: failureUpgradeSitelock,\n set: setUpgradeSitelock,\n },\n configurations: {\n update: {\n setLoading: loadingUpdateConfigurations,\n request: requestUpdateConfigurations,\n success: successUpdateConfigurations,\n failure: failureUpdateConfigurations,\n },\n get: {\n setLoading: loadingGetConfigurations,\n request: requestGetConfigurations,\n success: successGetConfigurations,\n failure: failureGetConfigurations,\n set: setGetConfigurations,\n },\n },\n sso: {\n request: requestSitelockSso,\n success: successSitelockSso,\n failure: failureSitelockSso,\n setLoading: setSitelockSsoLoading,\n },\n newSiteLock: {\n check: {\n request: requestCheckNewSitelock,\n success: successCheckNewSitelock,\n failure: failureCheckNewSitelock,\n set: setCheckNewSitelock,\n },\n saw: {\n request: requestSawNewSitelock,\n success: successSawNewSitelock,\n failure: failureSawNewSitelock,\n },\n },\n};\n\nexport default actions;\n","import { formatDate } from '@/utils/Formatters/formatDate';\n\nconst scanDetailsResponse = (rawData) => {\n const scanDetails = rawData.data;\n\n return {\n ...scanDetails,\n last_check: formatDate(scanDetails.last_check, true),\n next_check: formatDate(scanDetails.next_check, true),\n };\n};\n\nconst scanHistoryResponse = (rawData) => {\n const scanHistory = rawData.data;\n\n return scanHistory.map(scan => ({\n scanDate: formatDate(scan.scannedDate, true),\n filesVerified: scan.scanned,\n filesFixed: scan.fixed,\n filesNeedFix: scan.needFix,\n }));\n};\n\nconst sitelockConfigurationResponse = rawData => (rawData.data && rawData.data.data && rawData.data.data.smartscan && rawData.data.data.smartscan.data) || {};\n\nconst assembly = {\n scanDetailsResponse,\n scanHistoryResponse,\n sitelockConfigurationResponse,\n};\n\nexport default assembly;\n","import { PRODUCT_DETAILS } from '@/config/whmcsUrls';\n\nexport const brokeDomain = (domain) => {\n if (domain.indexOf('.') > 22) {\n const split = domain.split('.');\n const second = split[2] ? `.${split[2]}` : '';\n const dotDomain = `${split[0].substring(0, 22)}...[${split[1]}${second}]`;\n return dotDomain;\n }\n return domain;\n};\n\nexport const brokenEmailAddress = (email, maxCharacters) => {\n const emailLength = email.length;\n if (maxCharacters <= 3 || emailLength <= 3) {\n throw new Error('maxCharacters needs a value greater than 3 and email needs a string greater than 3 characters');\n }\n let dotEmail = email;\n if (emailLength > maxCharacters) {\n dotEmail = `${email.substring(0, (maxCharacters - 3))}...`;\n }\n return dotEmail;\n};\n\nexport const makeSealUrl = domain => `\n {`${locale('proEmail.errorActivateTrial')} `}\n
\n ),\n type: 'error',\n backGround: '#D94445',\n }));\n }\n yield put(emailsActions.emails.loading.set(false));\n}\n\nfunction* updateDomainSetupRequest(action) {\n const forceUpdateJwtInReducers = Cookies.get(TEMPLATE_COOKIES.FORCE_UPDATE_JWT_IN_REDUCERS);\n if (forceUpdateJwtInReducers === 'true') {\n yield put(authActions.tokens.jwt.update());\n }\n\n const { dataDomainSetup } = action.payload;\n const { id: userId } = yield select(state => state.summary);\n\n const { jwt: jwtToken } = yield select(state => state.auth);\n\n try {\n const request = {\n data: {\n setup: dataDomainSetup.enabledUpdateDomainSetup,\n domain: dataDomainSetup.domain,\n customer_email: dataDomainSetup.customerEmail,\n },\n headers: {\n Authorization: `${jwtToken}`,\n 'X-Client-ID': userId,\n 'X-Brand': COUNTRY,\n },\n url: PRO_EMAIL_DOMAIN_SETUP,\n };\n\n yield call(api.whmcs.put, request);\n yield put(emailsActions.emails.updateDomainSetup.success());\n } catch (e) {\n yield put(emailsActions.emails.updateDomainSetup.failure());\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('proEmail.errorActivateTrial')} `}\n
\n ),\n type: 'error',\n backGround: '#D94445',\n }));\n }\n}\n\nfunction* createEmailTrialRequest(action) {\n const { token } = yield select(state => state.auth);\n const { data } = action.payload;\n\n try {\n const request = {\n data: {\n domain: data.domain,\n email_account: data.email,\n email_password: data.password,\n offer_contexts: data.offerContext,\n accounts: data.accounts,\n },\n headers: {\n Authorization: `Bearer ${token}`,\n },\n url: 'api/v2/pro-emails/trial',\n };\n\n yield call(api.whmcs.post, request);\n\n yield put(commonActions.notifications.set({\n label: (\n \n {locale('proEmail.successAtivateTrial')}\n
\n ),\n type: 'success',\n maxWidth: '600px',\n }));\n\n yield put(emailsActions.emails.request());\n } catch (e) {\n yield put(emailsActions.emails.createEmailTrial.failure());\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('proEmail.errorDomainRegistration')} `}\n
\n ),\n type: 'error',\n backGround: '#D94445',\n }));\n }\n}\n\nfunction* requestActivatingRenewal(action) {\n const { email, callBackFunction } = action.payload;\n const { token } = yield select(state => state.auth);\n\n const request = {\n data: {\n serviceType: email.type,\n serviceId: email.id,\n },\n headers: {\n Authorization: `Bearer ${token}`,\n },\n url: `api/v2/clientarea/${config.COUNTRY}/signatures/active_renewal`,\n };\n\n try {\n yield call(api.whmcs.post, request);\n\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('proEmail.notifications.activateRenewal.success.0')} `}\n {email.productname} \n {`${locale('proEmail.notifications.activateRenewal.success.1')} `}\n
\n ),\n type: 'success',\n }));\n yield put(emailsActions.emails.request());\n callBackFunction();\n yield take([EmailsActionTypes.GET_EMAILS_SUCCESS, EmailsActionTypes.GET_EMAILS_FAILURE]);\n } catch (e) {\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('proEmail.notifications.activateRenewal.failure.0')} `}\n {email.productname} \n {`${locale('proEmail.notifications.activateRenewal.failure.1')} `}\n
\n ),\n type: 'error',\n }));\n }\n}\n\nfunction* getProEmailPaymentMethods() {\n const { token } = yield select(state => state.auth);\n\n yield put(emailsActions.emails.loading.set(true));\n try {\n const request = {\n headers: {\n Authorization: `Bearer ${token}`,\n },\n url: PRO_EMAIL_PAYMENT_METHODS,\n };\n\n const response = yield call(api.whmcs.get, request);\n yield put(emailsActions.emails.paymentMethods.success(receiveProEmailPaymentMethods(response)));\n } catch (e) {\n yield put(emailsActions.emails.paymentMethods.failure());\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('proEmail.errorActivateTrial')} `}\n
\n ),\n type: 'error',\n backGround: '#D94445',\n }));\n }\n yield put(emailsActions.emails.loading.set(false));\n}\n\nfunction* buyProEmailPremium(action) {\n const {\n productId, productCycle, paymentMethod, quantity, domain, isUltra,\n } = action.payload;\n const { token } = yield select(state => state.auth);\n const { isLoading } = yield select(state => state.emails.buyFastcheckout.isLoading);\n\n if (isLoading) {\n return yield put(emailsActions.emails.buyTitanPremium.abort());\n }\n\n yield put(emailsActions.emails.loading.set(true));\n\n let emailBoxId = null;\n\n if (isUltra) {\n emailBoxId = isBRServer ? 17 : 5;\n } else {\n emailBoxId = isBRServer ? 7 : 3;\n }\n\n const configOptions = {\n [emailBoxId]: quantity,\n };\n\n const bodyObject = {\n products: [\n {\n id: productId,\n domain,\n cycle: productCycle,\n type: 'product',\n quantity: 1,\n configoptions: configOptions,\n },\n ],\n payment_method: paymentMethod,\n offer_contexts: [\n 'setup_page_premium_activation',\n ],\n };\n\n try {\n const request = {\n data: bodyObject,\n headers: {\n Authorization: `Bearer ${token}`,\n },\n url: PRO_EMAIL_FAST_CHECKOUT,\n };\n\n const response = yield call(api.whmcs.post, request);\n yield put(emailsActions.emails.buyTitanPremium.success({\n ...response, paymentMethod, invoice_id: response.data.data.invoice_id, domain,\n }));\n } catch (e) {\n yield put(commonActions.notifications.set({\n label: (\n \n {`${locale('proEmail.errorActivateTrial')} `}\n
\n ),\n type: 'error',\n backGround: '#D94445',\n }));\n\n yield put(emailsActions.emails.buyTitanPremium.failure());\n }\n yield put(emailsActions.emails.loading.set(false));\n}\n\nfunction* sagas() {\n yield takeLatest(EmailsActionTypes.GET_EMAILS_REQUEST, getEmailsRequest);\n yield takeLatest(EmailsActionTypes.EMAIL_ACTIVATE_RENEWAL_REQUEST, requestActivatingRenewal);\n yield takeLatest(EmailsActionTypes.EMAIL_CREATE_EMAIL_TRIAL_REQUEST, createEmailTrialRequest);\n yield takeLatest(EmailsActionTypes.UPDATE_DOMAIN_SETUP_REQUEST, updateDomainSetupRequest);\n yield takeLatest(EmailsActionTypes.GET_PRO_EMAIL_PAYMENT_METHODS, getProEmailPaymentMethods);\n yield takeLatest(EmailsActionTypes.REQUEST_TITAN_PREMIUM_BUY_FAST_CHECKOUT, buyProEmailPremium);\n}\n\n\nexport default sagas;\n","import { all } from 'redux-saga/effects';\nimport { authSagas } from './auth';\nimport { billingSagas } from './billing';\nimport { domainsSagas } from './domains';\nimport { emailsSagas } from './emails';\nimport { sitesSagas } from './sites';\nimport { productsSagas } from './products';\nimport { dnsWizardSagas } from './dnsWizard';\nimport { faqSagas } from './faq';\nimport { invoicesSagas } from './invoices';\nimport { asaasSagas } from './asaas';\nimport { preChatSagas } from './preChat';\nimport { formsSagas } from './forms';\nimport { backupSagas } from './backup';\nimport { securitySagas } from './security';\nimport { linkNaBioSagas } from './linkNaBio';\nimport { videoClassesSagas } from './videoClasses';\nimport { cloudflareSagas } from './cloudflare';\nimport { commonSagas } from './common';\nimport { logoBuilderSagas } from './logoBuilder';\n\nconst sagas = [\n authSagas(),\n billingSagas(),\n domainsSagas(),\n emailsSagas(),\n sitesSagas(),\n productsSagas(),\n faqSagas(),\n dnsWizardSagas(),\n invoicesSagas(),\n asaasSagas(),\n preChatSagas(),\n formsSagas(),\n backupSagas(),\n securitySagas(),\n linkNaBioSagas(),\n videoClassesSagas(),\n cloudflareSagas(),\n commonSagas(),\n logoBuilderSagas(),\n];\n\nfunction* rootSaga() {\n yield all(sagas);\n}\n\nexport default rootSaga;\n","import { createStore } from 'redux';\n\nimport middleware, { sagaMiddleware } from '@/middleware/index';\nimport rootReducer from './rootReducer';\nimport rootSaga from './modules/rootSaga';\n\nconst store = createStore(rootReducer, middleware);\n\nsagaMiddleware.run(rootSaga);\n\nexport default store;\n","import { Component } from 'react';\nimport { withRouter } from 'react-router-dom';\n\nclass ScrollToTop extends Component {\n componentDidUpdate(prevProps) {\n const { location } = this.props;\n if (location !== prevProps.location) {\n window.scrollTo(0, 0);\n }\n }\n\n render() {\n const { children } = this.props;\n return children;\n }\n}\n\nexport default withRouter(ScrollToTop);\n","const styles = () => ({\n snackbarCustom: {\n '&> div:nth-child(1)': {\n paddingRight: 75,\n },\n },\n iconNotification: {\n fontSize: 24,\n marginRight: 10,\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles } from '@material-ui/core';\nimport { CheckCircle, Error } from '@material-ui/icons';\nimport { SnackbarProvider } from 'notistack';\nimport LinkDismissAction from '@/components/ActionsSnackbar/LinkDismiss';\nimport styles from './styles';\n\n\nconst SnackbarProviderCustom = ({ children, classes }) => (\n \n
\n \n Branch: \n {branch}\n {' - '}\n \n \n Commit: \n \n {commitHash} \n \n \n \n Build: \n {buildDate}\n {' - '}\n \n \n Version: \n {tags}\n \n \n
\n \n \n {domainsLocale.register.modal.title}\n \n {domainsNotContracted && domainsNotContracted.length === 1 && (\n \n \n \n \n {domainsLocale.register.modal.singleDomain({ domain: selectedDomain.label })}\n \n \n )}\n {domainsNotContracted && domainsNotContracted.length > 1 && (\n <>\n 1}>\n \n {domainsLocale.register.modal.multipleDomains}\n \n \n \n \n \n \n \n )}\n \n \n \n \n \n \n );\n};\n\nexport default withI18n()((ModalDomainNotContracted));\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n color: ${theme.color.tundora};\n font-family: ${theme.font.family.secondary};\n margin: 15px;\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin-left: 7px;\n }\n `}\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n margin-bottom: 24px;\n margin: 0;\n text-align: left;\n `}\n`;\n\nexport const IconsWrapper = styled.div`\n width: 20px;\n`;\n\nexport const DescriptionWrapper = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n display: flex;\n justify-content: space-evenly;\n margin-top: 25px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n align-items: center;\n gap: 15px;\n }\n `}\n`;\n\nexport const ConfiguredDomainStatusWrapper = styled.div`\n margin-top: 1.5rem;\n`;\n\nexport const TextDescription = styled.div`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.sm};\n margin-left: 17px;\n span {\n color: ${theme.color.cyanCobaltBlue};\n font-weight: ${theme.font.weights.bold};\n }\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin-left: 0px;\n margin-top: 38px;\n }\n `}\n`;\n\nexport const SelectWrapper = styled.div`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.sm};\n margin-top: 20px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n align-items: center;\n display: flex;\n flex-direction: column;\n }\n `}\n`;\n\nexport const TextSelect = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.blue.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.medium};\n margin-left: 25px;\n text-align: left;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin-left: 7px;\n }\n `}\n`;\n\nexport const Select = styled.div`\n ${({ theme }) => css`\n margin-left: 315px;\n margin-top: -44px;\n position: fixed;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin-left: 8px;\n margin-top: 0;\n position: relative;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: 8px;\n justify-content: center;\n margin-top: 39px;\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n flex-direction: column-reverse;\n margin-top: 40px;\n }\n `}\n`;\n\nexport const BackButtonWrapper = styled.div`\n ${({ theme }) => css`\n margin-left: -24px;\n margin-top: 16px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin-left: -20px;\n }\n `}\n`;\n\nexport const InstructionSquare = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.background.boxes};\n border-radius: 4px;\n border: 1px solid ${theme.v2.colors.feedback.canceledMedium};\n padding: 13px 26px 22px 26px;\n width: 100%;\n `}\n`;\n\nexport const VerticalInfosContainer = styled.div`\n display: grid;\n row-gap: 8px;\n margin: 8px 12px;\n padding-bottom: 28px;\n`;\n\nexport const Text = styled.div`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.sm};\n margin-bottom: 10px;\n margin-top: 8px;\n\n a{\n color: ${theme.v1.color.action.primary};\n font-size: ${theme.font.sizes.sm};\n }\n `}\n`;\n\nexport const SquareContentWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-bottom: 18px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const SquareDnsColumn = styled.div`\n display: flex;\n flex-direction: column;\n min-width: 230px;\n`;\n\nexport const IconWrapper = styled.div`\n ${({ theme }) => css`\n margin-right: 30px;\n margin-top: 23px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin-top: 0;\n transform: rotate(90deg);\n }\n `}\n`;\n\nexport const DnsContainer = styled.div`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.brand.primaryMedium};\n display: flex;\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.v1.font.weights.medium};\n height: 34px;\n margin: 0;\n padding: 0;\n\n button {\n margin-left: 17px;\n }\n `}\n`;\n\nexport const TextBoldSquare = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.featured};\n font-weight: ${theme.v1.font.weights.medium};\n `}\n`;\n\nexport const SquareButtonWrapper = styled.div`\n display: flex;\n justify-content: center;\n`;\n\nexport const DnsWarning = styled.div`\n ${({ theme }) => css`\n display: flex;\n margin-bottom: 25px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n align-items: center;\n\n div {\n margin-left: 15px;\n }\n }\n `}\n`;\n\nexport const TextWarningDns = styled.div`\n ${({ theme }) => css`\n margin-left: 25px;\n margin-top: 8px;\n margin-bottom: 20px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n div {\n margin-top: 0;\n margin-left: 15px;\n }\n }\n `}\n`;\n\nexport const UnderlinedText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n text-decoration: underline;\n margin: 0;\n\n `}\n`;\n\nexport const ButtonsBottomWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 8px;\n justify-content: center;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n align-items: center;\n flex-direction: column-reverse;\n }\n `}\n`;\n\nexport const CheckStatusModalTitle = styled(Title)`\n margin: 0;\n`;\n\nexport const CheckStatusModalDescription = styled(Text)`\n margin: 0;\n margin-top: 0.5rem;\n`;\n\nexport const DnsFailureText = styled.p`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xxxs};\n `}\n`;\n\nexport const Actions = styled.div`\n display: flex;\n justify-content: center;\n margin-top: 16px;\n`;\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 10px;\n margin-top: 24px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n align-items: center;\n flex-direction: column;\n }\n `}\n`;\n\nexport const InfoText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-size: ${theme.font.sizes.sm};\n margin: 0;\n\n strong {\n font-weight: ${theme.v1.font.weights.medium};\n }\n\n @media (max-width: ${theme.breakpoints.sm}) {\n text-align: center;\n }\n `}\n`;\n\nexport const SelectDomain = styled.div`\n ${({ theme }) => css`\n margin-left: 164px;\n margin-top: -50px;\n position: fixed;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin-left: 0;\n margin-top: -34px;\n position: relative;\n }\n `}\n`;\n\nexport const SelectDomainWrapper = styled.div`\n ${({ theme }) => css`\n margin-top: 74px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n display: flex;\n justify-content: center;\n margin-top: 60px;\n }\n `}\n`;\n","export const copyTextToClipboard = (textToCopy, contentId) => {\n // navigator clipboard api needs a secure context (https)\n if (navigator.clipboard && window.isSecureContext) {\n return navigator.clipboard.writeText(textToCopy);\n }\n // local development or older browsers\n const textArea = document.createElement('textarea');\n textArea.value = textToCopy;\n textArea.style.position = 'fixed';\n textArea.style.left = '-999999px';\n textArea.style.top = '-999999px';\n\n const content = contentId != null ? document.getElementById(contentId) : document.body;\n content.appendChild(textArea);\n\n textArea.focus();\n textArea.select();\n document.execCommand('copy');\n content && content.removeChild && content.removeChild(textArea);\n};\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.brand.primaryUltraLight};\n border-radius: 4px;\n border: 1px solid ${theme.v2.colors.feedback.canceledMedium};\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 1rem;\n `}\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xxs};\n margin: 0;\n text-align: center;\n `}\n`;\n\nexport const PlatformDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryMedium};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0;\n margin-top: 1rem;\n text-align: center;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n margin-top: 1.5rem;\n`;\n\nexport const StatusResultWrapper = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n display: flex;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 10px;\n margin-top: 1.5rem;\n\n p {\n margin: 0;\n }\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n\n svg {\n flex-shrink: 0;\n }\n `}\n`;\n","import { domainsActions, sitesActions } from '@/redux/modules';\nimport { useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\n\nconst useConfiguredDomainStatus = (domain) => {\n const [loadingStatus, setLoadingStatus] = useState(false);\n const {\n status: configuredDomainStatus,\n loaded: loadedStatus,\n } = useSelector(state => state.newDomains.domainConfiguredStatus);\n const dispatch = useDispatch();\n\n const verifyDomainConfiguration = () => {\n setLoadingStatus(true);\n dispatch(sitesActions.force.reload(true));\n\n if (domain) {\n dispatch(domainsActions.configuredStatusDomain.get(domain));\n } else {\n dispatch(domainsActions.configuredStatusDomain.empty());\n }\n };\n\n return {\n loadedStatus,\n loadingStatus,\n configuredDomainStatus,\n verifyDomainConfiguration,\n };\n};\n\nexport default useConfiguredDomainStatus;\n","import React from 'react';\nimport * as Styles from './ConfiguredDomainStatus.styles';\nimport { Button } from 'gatorcomponents';\nimport { useConfiguredDomainStatus } from '@/hooks/domains/useConfiguredDomainStatus';\n\nconst ConfiguredDomainStatus = ({\n configuredDomainStatusTexts,\n domain,\n externalDns,\n CheckStatusAnalyticEvent = () => {},\n}) => {\n const {\n loadedStatus,\n loadingStatus,\n configuredDomainStatus,\n verifyDomainConfiguration,\n } = useConfiguredDomainStatus(domain);\n\n const handleVerifyStatusClick = () => {\n CheckStatusAnalyticEvent();\n !loadingStatus && verifyDomainConfiguration();\n };\n\n return (\n \n \n {configuredDomainStatusTexts.title}\n \n \n {configuredDomainStatusTexts.description(externalDns)}\n \n {!loadedStatus && (\n \n \n )}\n {loadedStatus && (\n \n {configuredDomainStatusTexts.result(configuredDomainStatus)}\n \n )}\n \n );\n};\n\nexport default ConfiguredDomainStatus;\n","import React, { useEffect, useState } from 'react';\nimport {\n Button, IconDanger, Link, IconButton, IconClock, IconChevron, Select, IconLoading,\n} from 'gatorcomponents';\nimport * as Styles from './ModalDomainNotConfigured.styles';\nimport useLocale from '@/hooks/useLocale';\nimport { withI18n } from 'react-i18next';\nimport { Modal } from '@/pages/common';\nimport { COUNTRY } from '@/config';\nimport {\n COLOMBIAHOSTING_HOMEPAGE, GODADDY_HOMEPAGE, KINGHOST_HOMEPAGE, LOCAWEB_HOMEPAGE, NEUBOX_HOMEPAGE, REGISTROBR_HOMEPAGE, SUPPORT_ARTICLE_CHANGE_DNS_COLOMBIAHOSTING, SUPPORT_ARTICLE_CHANGE_DNS_GODADDY, SUPPORT_ARTICLE_CHANGE_DNS_KINGHOST, SUPPORT_ARTICLE_CHANGE_DNS_LOCAWEB, SUPPORT_ARTICLE_CHANGE_DNS_NEUBOX, SUPPORT_ARTICLE_CHANGE_DNS_OTHERS, SUPPORT_ARTICLE_CHANGE_DNS_REGISTROBR, SUPPORT_ARTICLE_CHANGE_DNS_UOLHOST, SUPPORT_ARTICLE_CHANGE_DNS_WEBEMPRESA, UOLHOST_HOMEPAGE, WEBEMPRESA_HOMEPAGE,\n} from '@/config/urls/supportUrls';\nimport { copyTextToClipboard } from '@/utils/Application/copyTextToClipboard';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { commonActions, domainsActions } from '@/redux/modules';\nimport { ConfiguredDomainStatus } from '../ConfiguredDomainStatus';\nimport { DOMAIN_NOT_CONFIGURED_STEPS, PROPAGATION_STATUS } from '@/enums/domains/domains.enum';\nimport { sitesActions } from '@/redux/modules/sites';\nimport analytics from '@/analytics/domains/domains.analytics';\n\nconst optionsBr = ['Registro.br', 'Godaddy', 'Locaweb', 'Uol Host', 'Kinghost', 'Outros provedores'];\nconst optionsBrList = optionsBr.map((item, index) => ({ id: index, label: item, value: item }));\nconst optionsEs = ['Godaddy', 'Web Empresa', 'Colombia Hosting', 'Neubox', 'Otros proveedores'];\nconst optionsEsList = optionsEs.map((item, index) => ({ id: index, label: item, value: item }));\n\nconst providersHelpLinks = [\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_REGISTROBR, page: REGISTROBR_HOMEPAGE, name: 'Registro.br' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_GODADDY, page: GODADDY_HOMEPAGE, name: 'Godaddy' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_LOCAWEB, page: LOCAWEB_HOMEPAGE, name: 'Locaweb' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_UOLHOST, page: UOLHOST_HOMEPAGE, name: 'Uol Host' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_KINGHOST, page: KINGHOST_HOMEPAGE, name: 'Kinghost' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_WEBEMPRESA, page: WEBEMPRESA_HOMEPAGE, name: 'Web Empresa' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_COLOMBIAHOSTING, page: COLOMBIAHOSTING_HOMEPAGE, name: 'Colombia Hosting' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_NEUBOX, page: NEUBOX_HOMEPAGE, name: 'Neubox' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_OTHERS, name: 'Others' },\n];\n\nconst ModalDomainNotConfigured = ({ hideModal, isPreChat }) => {\n const { sites: sitesLocale, alerts: alertsLocale } = useLocale();\n const dispatch = useDispatch();\n\n const [step, setStep] = useState(1);\n const [selectedProvider, setSelectedProvider] = useState('');\n const [domainNotConfigured, setDomainNotConfigured] = useState('');\n const [helpLink, setHelpLink] = useState({});\n\n const sitesState = useSelector(state => state.sites);\n const domainsFromPropagation = useSelector(state => state.newDomains.propagationStatus && state.newDomains.propagationStatus.filter(propagation => propagation.status === PROPAGATION_STATUS.NOT_CONFIGURED));\n const domainsFromDiagnostic = useSelector(state => state.preChat.domainsPropagation && state.preChat.domainsPropagation.filter(propagation => propagation.status === PROPAGATION_STATUS.NOT_CONFIGURED));\n const domainNotConfiguredArray = isPreChat ? domainsFromDiagnostic : domainsFromPropagation;\n\n const selectOptions = domainNotConfiguredArray.map(domain => ({ value: domain.hostingId, label: domain.domain }));\n\n const { domainDns, loading } = sitesState;\n const { nameServer1, nameServer2 } = domainNotConfigured;\n\n useEffect(() => {\n providersHelpLinks.forEach((providerLinks) => {\n if (providerLinks.name === selectedProvider.label) setHelpLink(providerLinks);\n if (selectedProvider.label === 'Outros provedores' || selectedProvider.label === 'Otros proveedores') setHelpLink(providersHelpLinks[providersHelpLinks.length - 1]);\n });\n }, [selectedProvider]);\n\n useEffect(() => {\n if (domainNotConfigured) {\n dispatch(sitesActions.domainDns.request(domainNotConfigured.domain));\n }\n }, [dispatch, domainNotConfigured]);\n\n useEffect(() => {\n if (!domainNotConfigured && domainNotConfiguredArray && domainNotConfiguredArray.length === 1) {\n setDomainNotConfigured(domainNotConfiguredArray[0]);\n if (domainNotConfiguredArray[0].configured === 1) {\n setStep(DOMAIN_NOT_CONFIGURED_STEPS.STATUS);\n } else {\n setStep(DOMAIN_NOT_CONFIGURED_STEPS.SELECT_PROVIDER);\n }\n }\n }, [domainNotConfiguredArray, domainNotConfigured]);\n\n const handleHideModal = () => {\n dispatch(domainsActions.configuredStatusDomain.reset());\n hideModal && hideModal();\n };\n\n const handleSelectOption = (option) => {\n setSelectedProvider(option);\n };\n\n const handleSelectDomainToConfigure = (option) => {\n const domainToConfigure = domainNotConfiguredArray.find(domain => domain.hostingId === option.value);\n if (domainToConfigure) {\n setDomainNotConfigured(domainToConfigure);\n }\n };\n\n const handleDomainToConfigureClick = () => {\n if (domainNotConfigured.configured === 1) {\n setStep(DOMAIN_NOT_CONFIGURED_STEPS.STATUS);\n } else {\n setStep(actualStep => actualStep + 1);\n }\n };\n\n const goNextStep = () => {\n if (step < DOMAIN_NOT_CONFIGURED_STEPS.CONFIGURATION) {\n setStep(step + 1);\n }\n };\n\n const goPrevStep = () => {\n if (step > DOMAIN_NOT_CONFIGURED_STEPS.SELECT_DOMAIN) {\n setStep(step - 1);\n }\n };\n\n const goToInstructions = () => {\n analytics.dnsWizard.buttonBackInstructions();\n setStep(DOMAIN_NOT_CONFIGURED_STEPS.SELECT_PROVIDER);\n };\n\n const showCopyNotification = () => {\n dispatch(commonActions.notifications.set({\n label: sitesLocale.configuration.modal.stepTwo.copied,\n type: 'success',\n }));\n };\n\n const handleDNSClick = (nameserver) => {\n copyTextToClipboard(nameserver);\n showCopyNotification();\n };\n\n const handleDoneConfigurationClick = () => {\n analytics.dnsWizard.buttonAlreadyMadeChanges();\n dispatch(domainsActions.setDomainConfiguration.set(domainNotConfigured.hosting_id || domainNotConfigured.hostingId));\n setStep(actualStep => actualStep + 1);\n };\n\n const openNewPage = () => {\n analytics.dnsWizard.buttonGoToAnotherProvider();\n window.open(helpLink.page, '_blank').focus();\n };\n\n if (step === DOMAIN_NOT_CONFIGURED_STEPS.SELECT_DOMAIN) {\n return (\n \n \n \n {alertsLocale.whichDomain}\n \n \n \n {alertsLocale.selectDomainToConfigure}\n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n\n if (step === DOMAIN_NOT_CONFIGURED_STEPS.SELECT_PROVIDER) {\n return (\n \n \n \n {sitesLocale.configuration.modal.stepOne.title}\n \n \n \n \n \n {sitesLocale.configuration.modal.stepOne.description({ domain: domainNotConfigured && domainNotConfigured.domain })}\n \n \n \n \n {sitesLocale.configuration.modal.stepOne.question}\n \n \n \n \n\n \n 1 ? goPrevStep : handleHideModal}\n variant=\"tertiary\"\n size=\"large\"\n label={sitesLocale.configuration.modal.stepOne.labelButtonBack}\n />\n \n \n \n );\n }\n\n if (step === DOMAIN_NOT_CONFIGURED_STEPS.CONFIGURATION) {\n return (\n \n \n \n {sitesLocale.configuration.modal.stepTwo.title}\n \n\n \n {sitesLocale.configuration.modal.stepTwo.description}\n \n\n \n \n \n \n {sitesLocale.configuration.modal.stepTwo.waitTime()}\n \n \n\n \n {(selectedProvider.label === 'Outros provedores' || selectedProvider.label === 'Otros proveedores') ? (\n \n \n {sitesLocale.configuration.modal.stepTwo.otherProvider.firstLine()}\n \n \n {sitesLocale.configuration.modal.stepTwo.otherProvider.secondLine()}\n \n \n {sitesLocale.configuration.modal.stepTwo.otherProvider.thirdLine()}\n \n \n ) : (\n <>\n \n {sitesLocale.configuration.modal.stepTwo.replace}\n \n \n \n \n {sitesLocale.configuration.modal.stepTwo.actualDns}\n {selectedProvider.label}\n \n {loading && !domainDns && \n {sitesLocale.configuration.modal.stepTwo.server1}\n \n \n {domainDns && domainDns[0]}\n \n \n {sitesLocale.configuration.modal.stepTwo.server2}\n \n \n {domainDns && domainDns[1]}\n \n \n )}\n {!loading && !domainDns && helpLink && (\n \n {sitesLocale.configuration.modal.stepTwo.failureDomainDns(helpLink.tutorial)}\n \n )}\n \n\n \n \n\n \n \n {sitesLocale.configuration.modal.stepTwo.hgDns}\n \n {(nameServer1 || nameServer2) && (\n <>\n \n {sitesLocale.configuration.modal.stepTwo.server1}\n \n \n <>\n {nameServer1 || '-'}\n {nameServer1 && (\n handleDNSClick(nameServer1)}\n />\n )}\n \n \n \n {sitesLocale.configuration.modal.stepTwo.server2}\n \n \n <>\n {nameServer2 || '-'}\n {nameServer2 && (\n handleDNSClick(nameServer2)}\n />\n )}\n \n \n \n )}\n {!nameServer1 && !nameServer2 && helpLink && (\n \n {sitesLocale.configuration.modal.stepTwo.failurePlanDns(helpLink.tutorial)}\n \n )}\n \n \n \n )}\n\n\n \n {helpLink && helpLink.page && (\n \n \n\n \n \n\n \n \n );\n }\n\n if (step === DOMAIN_NOT_CONFIGURED_STEPS.STATUS) {\n return (\n \n \n \n {sitesLocale.configuration.modal.stepThree.title}\n \n \n {sitesLocale.configuration.modal.stepThree.description}\n \n \n \n \n \n\n \n \n );\n }\n};\n\nexport default withI18n()((ModalDomainNotConfigured));\n","export const MODAL_STEP = {\n DUPLICATED_ORDER_CHOICE: 'DUPLICATED_ORDER_CHOICE',\n DEFAULT: 'DEFAULT',\n LOADING_SECOND_SCREEN: 'LOADING_SECOND_SCREEN',\n CANCELLATION_SUCCESS: 'CANCELLATION_SUCCESS',\n CANCELLATION_FAILURE: 'CANCELLATION_FAILURE',\n};\n\nexport const ORDER_STATUS = {\n PAID: 'Paid',\n};\n\nexport const ANALYTICS = {\n CLOSE_UNDERSTAND: 'CLOSE_UNDERSTAND',\n};\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div``;\n\nexport const AccordionItem = styled.div`\n align-self: center;\n margin: 24px 0px 48px 0px;\n`;\n\nexport const Header = styled.header``;\n\nexport const ContentWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 24px;\n font-family: ${theme.v2.font.family.primary};\n line-height: normal;\n `}\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n color: ${theme.v2.colors.neutral.lowPure};\n margin: 0;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n font-weight: ${theme.font.weights.regular};\n }\n `}\n`;\n\nexport const ChoiceDescription = styled.div`\n display: flex;\n align-items: start;\n gap: 8px;\n`;\n\nexport const SelectContainer = styled.div`\n ${({ theme }) => css`\n padding: 0 38px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n padding: 0 24px;\n }\n `};\n`;\n\nexport const Description = styled.div`\n ${({ theme, accordionDescription }) => css`\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.font.weights.regular};\n color: ${theme.v2.colors.neutral.lowPure};\n margin: 0;\n\n strong {\n font-weight: ${theme.font.weights.medium};\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n margin-left: ${accordionDescription && '24px'};\n }\n `}\n`;\n\nexport const ButtonsWrapper = styled.div`\n ${({\n theme,\n secondScreen,\n paddingTop,\n paddingBottom,\n }) => css`\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: ${paddingTop ? '24px' : 0};\n padding-bottom: ${paddingBottom ? '16px' : 0};\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n padding: ${secondScreen && 0};\n flex-direction: column;\n gap: 16px;\n }\n `};\n`;\n\nexport const ButtonLoadingContainer = styled.div`\n ${({ tryAgain }) => css`\n min-width: ${tryAgain ? '192px' : '162px'};\n `};\n`;\n\nexport const AccordionContainer = styled.div`\n width: 100%;\n gap: 8px;\n display: flex;\n flex-direction: column;\n`;\n\nexport const AccordionTitle = styled.div`\n ${({ theme }) => css`\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n flex-direction: column;\n gap: 12px;\n justify-content: start;\n }\n `}\n`;\n\nexport const AccordionName = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: start;\n gap: 8px;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n width: 100%;\n }\n `}\n`;\nexport const AccordionNameSpan = styled.span`\n max-width: 360px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const AccordionTag = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n justify-content: right;\n margin-left: 28px;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n width: 100%;\n justify-content: start;\n margin-left: 28px;\n }\n `}\n`;\n\nexport const AccordionDescription = styled.div`\n ${({ theme }) => css`\n font-size: 12px;\n\n strong {\n font-weight: 500;\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n margin-left: 28px;\n }\n `};\n`;\n\nexport const NoticeContainer = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n justify-content: center;\n margin: 24px 24px 0 0;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n padding: 16px;\n border-radius: 4px;\n box-shadow: ${theme.v2.shadows.light};\n margin: 0;\n }\n `}\n`;\n\nexport const ResultIcon = styled.div`\n ${({ theme, success }) => css`\n align-items: center;\n background-color: ${success ? theme.v2.colors.feedback.activePure : theme.v2.colors.feedback.problemMedium};\n border-radius: 50%;\n display: flex;\n min-height: 40px;\n justify-content: center;\n margin-right: 24px;\n min-width: 40px;\n `}\n`;\n\nexport const MessageWrapper = styled.div`\n display: flex;\n flex-wrap: wrap;\n`;\n","/**\n * Transform object into query string\n */\nexport const queryString = params => Object.keys(params).map(key => `${key}=${params[key]}`).join('&');\n","export const INVOICES_STATUS = {\n PAYMENT_PENDING: 'Payment Pending',\n PAID: 'Paid',\n UNPAID: 'Unpaid',\n CANCELLED: 'Cancelled',\n OTHERS: 'Others',\n};\n\nexport const INVOICES_STATUS_WITHOUT_CAPITALIZE = {\n PAYMENT_EXPIRED: 'unpaidExpired',\n PAYMENT_PENDING: 'paymentPending',\n PAID: 'paid',\n UNPAID: 'unpaid',\n CANCELLED: 'cancelled',\n REFUNDED: 'refunded',\n OTHERS: 'others',\n FRAUD: 'fraud',\n PHISHING: 'phishing',\n};\n\nexport const PHISHING_STATUS_ANALYSIS = 'order_pending_analysis';\n","import { CALL_API } from '@/middleware/api';\nimport { INVOICE_PAYMENT_METHODS } from '@/config/api';\nimport {\n RECEIVE_INVOICE_PAYMENT_METHODS, REQUEST_INVOICE_PAYMENT_METHODS, ERROR_INVOICE_PAYMENT_METHOD,\n} from './actionsTypes';\n\n\nconst receiveInvoicePaymentMethod = paymentMethods => ({\n type: RECEIVE_INVOICE_PAYMENT_METHODS,\n paymentMethods,\n});\n\nexport function getInvoicePaymentMethods() {\n return {\n [CALL_API]: {\n authenticated: true,\n endpoint: INVOICE_PAYMENT_METHODS,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_INVOICE_PAYMENT_METHODS }),\n success: data => receiveInvoicePaymentMethod(data.data),\n error: () => ({ type: ERROR_INVOICE_PAYMENT_METHOD }),\n },\n },\n };\n}\n","import { CALL_API } from '@/middleware/api';\nimport {\n INVOICES_URL, INVOICE_DETAIL_URL, PAYMENT_METHOD_TICKET_INVOICE_ES, INVOICE_BOLETO_PROCESS,\n CHECK_USER_DATA_FOR_PAYMENT_BOLETO,\n BOLETO_UPDATE_ADDRESS_URL,\n} from '@/config/api';\nimport { queryString } from '@/utils/Application/queryString';\nimport { INVOICES_STATUS, INVOICES_STATUS_WITHOUT_CAPITALIZE } from '@/config/invoices/invoiceStatus';\nimport { getInvoicePaymentMethods } from './invoicePaymentMethods';\nimport {\n REQUEST_INVOICES, RECEIVE_INVOICES, ERROR_INVOICES,\n RECEIVE_INVOICE_DETAILS, REQUEST_INVOICE_DETAILS, ERROR_INVOICE_DETAILS,\n UPDATE_UNPAID_INVOICES, UPDATE_PAID_INVOICES, REQUEST_PAYMENT_METHOD_TICKET_INVOICE_ES,\n RECEIVE_PAYMENT_METHOD_TICKET_INVOICE_ES, ERROR_PAYMENT_METHOD_TICKET_INVOICE_ES,\n REQUEST_BOLETO_URL, ERROR_BOLETO_URL, RECEIVE_BOLETO_URL,\n RECEIVE_BOLETO_VALIDATE_ADDRESS, REQUEST_BOLETO_VALIDATE_ADDRESS,\n ERROR_BOLETO_VALIDATE_ADDRESS, REQUEST_BOLETO_UPDATE_ADDRESS,\n SUCCESS_BOLETO_UPDATE_ADDRESS, ERROR_BOLETO_UPDATE_ADDRESS,\n} from './actionsTypes';\n\n\nconst requestInvoices = status => ({\n type: REQUEST_INVOICES,\n data: status,\n});\n\nconst receiveInvoices = (invoices, status) => {\n const byStatus = { [status]: invoices };\n const loadedDate = { [status]: new Date() };\n if (status === 'Unpaid') {\n byStatus[status].sort((dateA, dateB) => new Date(dateA.duedate) - new Date(dateB.duedate));\n } else {\n byStatus[status].sort((dateA, dateB) => new Date(dateB.duedate) - new Date(dateA.duedate));\n }\n\n return {\n type: RECEIVE_INVOICES,\n loadingByStatus: status,\n invoices,\n byStatus,\n loadedDate,\n };\n};\n\nconst receiveInvoiceDetails = invoice => ({\n type: RECEIVE_INVOICE_DETAILS,\n invoice,\n});\n\nconst receiveDataInvoices = (dataInvoices, status, invoicesOrignal = null) => {\n const invoices = dataInvoices.data;\n const byStatus = { [status]: invoices };\n const loadedDate = { [status]: new Date() };\n const paginationData = {\n [status]: {\n last_page: dataInvoices.last_page,\n next_page_url: dataInvoices.next_page_url,\n per_page: dataInvoices.per_page,\n to: dataInvoices.to,\n total: dataInvoices.total,\n },\n };\n\n if (status === 'Unpaid') {\n byStatus[status].sort((dateA, dateB) => new Date(dateA.duedate) - new Date(dateB.duedate));\n } else {\n byStatus[status].sort((dateA, dateB) => new Date(dateB.duedate) - new Date(dateA.duedate));\n }\n\n\n if (invoicesOrignal) {\n let invoicesUpdatedList = invoicesOrignal;\n const listTmp = invoicesOrignal;\n\n byStatus[status].forEach((item) => {\n if (!listTmp.some(i => item.id === i.id)) {\n invoicesUpdatedList = invoicesUpdatedList.concat(item);\n }\n });\n\n byStatus.all = invoicesUpdatedList;\n }\n\n return {\n type: RECEIVE_INVOICES,\n loadingByStatus: status,\n invoices,\n byStatus,\n loadedDate,\n paginationData,\n };\n};\n\nexport const loadInvoicesWithParams = (status = '', search = '', page = null, invoices = null, callback) => dispatch => dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: `${INVOICES_URL}?page${page !== null ? `=${page}` : ''}${status === 'all' ? '&status' : `&${queryString({ status: status.toLowerCase() })}`}${search === '' ? '' : `&${queryString({ search })}`}`,\n method: 'GET',\n actionTypes: {\n request: () => requestInvoices(status),\n success: response => (dispatch) => {\n dispatch(receiveDataInvoices(response.data, status, invoices));\n dispatch(getInvoicePaymentMethods());\n callback && callback();\n },\n error: () => ({ type: ERROR_INVOICES }),\n },\n },\n});\n\n/**\n * Load invoices from an given status\n * @param {String} status\n */\nexport const loadInvoices = (status, callback) => dispatch => dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: `${INVOICES_URL}?${queryString({ status: status.toLowerCase() })}`,\n method: 'GET',\n actionTypes: {\n request: () => requestInvoices(status),\n success: response => (dispatch) => {\n callback && callback();\n dispatch(receiveInvoices(response.data.data, status));\n dispatch(getInvoicePaymentMethods());\n },\n error: () => ({ type: ERROR_INVOICES }),\n },\n },\n});\n\nexport const loadInvoiceDetails = invoiceId => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: INVOICE_DETAIL_URL(invoiceId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_INVOICE_DETAILS }),\n success: (response) => {\n const invoice = {\n ...response.data.invoice,\n items: response.data.invoiceItems,\n nfse: response.data.nfse,\n };\n\n return receiveInvoiceDetails(invoice);\n },\n error: () => ({ type: ERROR_INVOICE_DETAILS }),\n },\n },\n});\n\nconst receiveUpdatedUnpaidInvoices = unpaidInvoices => ({\n type: UPDATE_UNPAID_INVOICES,\n data: unpaidInvoices,\n});\n\nconst receiveUpdatedPaidInvoices = paidInvoices => ({\n type: UPDATE_PAID_INVOICES,\n data: paidInvoices,\n});\n\nexport const updateStatusInvoiceToConfirmingPayment = invoiceId => (dispatch, getState) => {\n const unpaidInvoices = getState().invoices.byStatus.Unpaid;\n const paidInvoices = getState().invoices.byStatus.Paid;\n\n const indexUnpaidInvoice = unpaidInvoices.findIndex(item => item.id === invoiceId);\n const invoicePaid = unpaidInvoices[indexUnpaidInvoice];\n unpaidInvoices.splice(indexUnpaidInvoice, 1);\n return new Promise((resolve) => {\n dispatch(receiveUpdatedUnpaidInvoices(unpaidInvoices));\n\n if (paidInvoices.length > 0) {\n invoicePaid.status = INVOICES_STATUS.PAID;\n invoicePaid.statusMessage = INVOICES_STATUS_WITHOUT_CAPITALIZE.PAID;\n paidInvoices.push(invoicePaid);\n paidInvoices.sort((dateA, dateB) => new Date(dateB.duedate) - new Date(dateA.duedate));\n\n dispatch(receiveUpdatedPaidInvoices(paidInvoices));\n }\n resolve();\n });\n};\n\nexport const payTicketInvoiceForES = invoiceId => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: PAYMENT_METHOD_TICKET_INVOICE_ES(invoiceId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_PAYMENT_METHOD_TICKET_INVOICE_ES }),\n success: (response) => {\n if (!!response.data && response.success && response.data.result && response.data.url !== '') {\n return ({ type: RECEIVE_PAYMENT_METHOD_TICKET_INVOICE_ES, ...response.data });\n }\n return ({ type: ERROR_PAYMENT_METHOD_TICKET_INVOICE_ES });\n },\n error: () => ({ type: ERROR_PAYMENT_METHOD_TICKET_INVOICE_ES }),\n },\n },\n});\n\nconst requestGetBoletoUrl = invoiceId => ({\n type: REQUEST_BOLETO_URL,\n invoiceId,\n});\n\nconst receiveGetBoletoUrl = dataCheck => ({\n type: RECEIVE_BOLETO_URL,\n dataCheck,\n});\n\nexport const getBoletoUrl = invoiceId => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: INVOICE_BOLETO_PROCESS(invoiceId),\n method: 'GET',\n actionTypes: {\n request: () => requestGetBoletoUrl(invoiceId),\n success: response => receiveGetBoletoUrl(response),\n error: () => ({ type: ERROR_BOLETO_URL }),\n },\n },\n});\n\nconst receiveBoletoValidateAddress = data => ({\n type: RECEIVE_BOLETO_VALIDATE_ADDRESS,\n data,\n});\n\nexport const checkBoletoUserData = invoiceId => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: CHECK_USER_DATA_FOR_PAYMENT_BOLETO(invoiceId),\n method: 'POST',\n actionTypes: {\n request: () => ({ type: REQUEST_BOLETO_VALIDATE_ADDRESS }),\n success: response => receiveBoletoValidateAddress(response),\n error: () => ({ type: ERROR_BOLETO_VALIDATE_ADDRESS }),\n },\n },\n});\n\nconst successBoletoUpdateAddress = data => ({\n type: SUCCESS_BOLETO_UPDATE_ADDRESS,\n data,\n});\n\nexport const boletoUpdateAddress = data => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: BOLETO_UPDATE_ADDRESS_URL,\n method: 'POST',\n body: data,\n actionTypes: {\n request: () => ({ type: REQUEST_BOLETO_UPDATE_ADDRESS }),\n success: response => successBoletoUpdateAddress(response),\n error: () => ({ type: ERROR_BOLETO_UPDATE_ADDRESS }),\n },\n },\n});\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n font-family: ${theme.v1.font.family.primary};\n position: relative;\n `}\n`;\n\nexport const MobileWrapper = styled.div`\n ${({ theme }) => css`\n font-family: ${theme.v1.font.family.primary};\n padding-bottom: 64px;\n `}\n`;\n\nexport const NotificationsCircle = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background: ${theme.v2.colors.feedback.pendingLight};\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n font-size: 10px;\n font-weight: 500;\n height: 14px;\n justify-content: center;\n position: absolute;\n user-select: none;\n width: 14px;\n left: 38px;\n top: 12px;\n z-index: 1;\n `}\n`;\n\nexport const FloatingMenu = styled.div`\n ${({ theme }) => css`\n background: ${theme.v2.colors.white.primary};\n box-shadow: 0px 1px 3px ${theme.v1.color.shadow.primary};\n display: flex;\n flex-direction: column;\n max-height: 80vh;\n min-width: 435px;\n overflow: auto;\n padding-bottom: 14px;\n position: absolute;\n `}\n`;\n\nexport const FloatingMenuItem = styled.div`\n ${({ theme }) => css`\n background: ${theme.v2.colors.white.primary};\n box-shadow: 0px 1px 3px ${theme.v1.color.shadow.primary};\n display: flex;\n flex-direction: column;\n position: absolute; fontSize: 12,\n color: 'gray',\n marginTop: 8,\n `}\n`;\n\nexport const NotificationItem = styled.div`\n ${({ theme, isNew }) => css`\n align-items: flex-start;\n background: ${isNew ? theme.v2.colors.brand.primaryUltraLight : 'transparent'};\n display: flex;\n margin: 0px 0px;\n padding: 0px;\n `}\n`;\n\nexport const Header = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n padding: 23px 24px 15px 24px;\n `}\n`;\n\nexport const HeaderTop = styled.div`\n ${() => css`\n display: flex;\n justify-content: space-between;\n `}\n`;\n\nexport const TitleContainer = styled.div`\n ${() => css`\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n `}\n`;\n\nexport const Title = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryDark};\n font-size: 24px;\n font-weight: 500;\n padding-bottom: 4px;\n `}\n`;\n\nexport const CloseButton = styled.div`\n ${() => css`\n color: blue;\n cursor: pointer;\n padding: 20px;\n position: absolute;\n right: 0;\n `}\n`;\n\nexport const Subtitle = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryDark};\n font-size: 14px;\n padding-bottom: 4px;\n `}\n`;\n\nexport const SeeMoreContainer = styled.div`\n ${({ hideButton }) => css`\n align-items: center;\n display: ${hideButton ? 'none' : 'flex'};\n justify-content: center;\n font-size: 14px;\n `}\n`;\n\nexport const EmptyState = styled.div`\n ${({ isMobile }) => css`\n padding: ${isMobile ? '60px' : '60px 134px 94px 134px'};\n text-align: center;\n `}\n`;\n\nexport const Tabs = styled.div`\n display: flex;\n height: 35px;\n gap: 23px;\n\n button {\n padding: 0 !important;\n margin: 0;\n }\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 10px;\n\n a {\n color: ${theme.v2.colors.brand.primaryBlue};\n font-weight: ${theme.v2.font.weights.regular};\n text-decoration: underline;\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n margin: 0px 0px;\n }\n button {\n font-size: ${theme.v2.font.sizes.xxxs};\n }\n p {\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: ${theme.v2.font.sizes.xxxs};\n }\n `}\n`;\n\nexport const AlertContent = styled.div`\n ${({ theme }) => `\n button {\n background: none;\n border: none;\n color: ${theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n font-weight: ${theme.v2.font.weights.medium};\n padding: 0;\n text-decoration: underline;\n transition: 0.2s;\n\n &:hover{\n color: ${theme.v2.colors.brand.primaryLight};\n }\n }\n `}\n`;\n","import { collect } from '@/analytics';\n\nconst EVENTS = {\n NAME: 'gaEvent',\n CATEGORIES: {\n MY_ALERTS: 'Meus Avisos',\n INVOICES: 'Solução - Meus avisos - Exibição da notificação faturas',\n PROPAGATION: 'Solução - Meus avisos - Exibição da notificação propagação',\n CONTRACT_DOMAIN: 'Solução - Meus avisos - Exibição da notificação contratar domínio',\n SETUP_DOMAIN: 'Solução - Meus avisos - Exibição da notificação configurar domínio',\n SUBSCRIPTIONS_WITHOUT_RENEW_ENABLED_30: 'Solução - Meus avisos - Link Ativar Assinatura 30',\n SUBSCRIPTIONS_WITHOUT_RENEW_ENABLED_LT_30: 'Solução - Meus avisos - Link Ativar Assinatura menos 30',\n SUBSCRIPTIONS_WITHOUT_RENEW_ENABLED_10: 'Solução - Meus avisos - Link Ativar Assinatura 10',\n SUBSCRIPTIONS_WITHOUT_RENEW_ENABLED_LT_10: 'Solução - Meus avisos - Link Ativar Assinatura menos 10',\n SUBSCRIPTIONS_WITHOUT_RENEW_ENABLED_5: 'Solução - Meus avisos - Link Ativar Assinatura 5',\n SUBSCRIPTIONS_WITHOUT_RENEW_ENABLED_LT_5: 'Solução - Meus avisos - Link Ativar Assinatura menos 5',\n SUBSCRIPTIONS_WITHOUT_RENEW_ENABLED_WITH_DISCOUNT: 'Solução - Meus avisos - Link Ativar Assinatura 5 com desconto',\n WITHOUT_BACKUP: 'Solução - Meus avisos fluxo de backup - Exibição do alerta não possui backup',\n BACKUP_CTA_CLICK: 'Solução - Meus avisos fluxo de backup - Clique no cta',\n BACKUP_SEVEN_DAYS: 'Solução - Meus avisos fluxo de backup - Exibição do alerta ultimo backup 7 dias',\n BACKUP_FIFTEEN_DAYS: 'Solução - Meus avisos fluxo de backup - Exibição do alerta ultimo backup 15 dias',\n BACKUP_THIRTY_DAYS: 'Solução - Meus avisos fluxo de backup - Exibição do alerta ultimo backup 30 dias',\n BACKUP_SUCCESS: 'Solução - Meus avisos fluxo de backup - Exibição do alerta backup concluído com sucesso',\n BACKUP_RESTORED: 'Solução - Meus avisos fluxo de backup - Exibição do alerta restauração concluída com sucesso',\n DUPLICATE_ORDER: 'Solução - Meus avisos Pedidos duplicados - Alerta apresentado com sucesso',\n DUPLICATE_ORDER_CLICK: 'Solução - Meus avisos Pedidos duplicados - Clique no cta',\n TICKET_ALERTS: 'Solução - Status dos chamados meus avisos',\n PENDING_ORDER: 'Solução - Meus avisos pedidos em análise - Alerta apresentado com sucesso',\n PENDING_ORDER_CLICK: 'Solução - Meus avisos pedidos em análise - Clique no cta',\n SSL_ALERT: 'Solução - SSL Meus Avisos - Alerta apresentado com sucesso',\n },\n ACTIONS: {\n CLICK_MY_ACTIONS: 'Clique CTA: Meus Avisos',\n ALERT_EXHIBITION: 'Solução - Alerta apresentado com sucesso - Meus avisos - Exibição da notificação',\n CLICK_LINK_SUBSCRIPTION_MANAGER: 'Click',\n WITHOUT_BACKUP: 'Solução - Exibição de alerta - Exibição do alerta não possui backup',\n BACKUP_CTA_CLICK: 'Solução - Clique no cta - Fazer backup',\n BACKUP_SEVEN_DAYS: 'Solução - Exibição de alerta - Exibição do alerta ultimo backup 7 dias',\n BACKUP_FIFTEEN_DAYS: 'Solução - Exibição de alerta - Exibição do alerta ultimo backup 15 dias',\n BACKUP_THIRTY_DAYS: 'Solução - Exibição de alerta - Exibição do alerta ultimo backup 30 dias',\n BACKUP_SUCCESS: 'Solução - Exibição de alerta - Exibição do alerta backup concluído com sucesso',\n BACKUP_RESTORED: 'Solução - Exibição de alerta - Exibição do alerta restauração concluída com sucesso',\n DUPLICATE_ORDER: 'Solução - Alerta apresentado com sucesso - Alerta de pedido duplicado apresentado com sucesso',\n DUPLICATE_ORDER_CLICK: 'Solução - Alerta apresentado com sucesso - Cta ver pedidos duplicados',\n TICKET_NEW_ALERT: 'Solução - Exibição Status dos chamados - Alerta de chamado aberto',\n TICKET_NEW_CTA: 'Solução - Clique no cta - Cta ver chamado aberto',\n TICKET_OPEN_ALERT: 'Solução - Exibição Status dos chamados - Alerta de chamado em aberto',\n TICKET_OPEN_CTA: 'Solução - Clique no cta - Cta ver chamado em aberto',\n TICKET_WAITING_RESPONSE_ALERT: 'Solução - Exibição Status dos chamados - Alerta de chamado aguardando resposta',\n TICKET_WAITING_RESPONSE_CTA: 'Solução - Clique no cta - Cta ver chamado aguardando resposta',\n TICKET_SOLVED_ALERT: 'Solução - Exibição Status dos chamados - Alerta de chamado concluído',\n TICKET_SOLVED_CTA: 'Solução - Clique no cta - Cta ver chamado concluído',\n ANALYZING_ORDER_ALERT: 'Solução - Alerta apresentado com sucesso - Alerta pedido em análise',\n CANCELED_ORDER_ALERT: 'Solução - Alerta apresentado com sucesso - Alerta pedido cancelado',\n PROCESSING_ORDER_ALERT_CLICK: 'Solução - Clique no cta Pedidos em análise - Cta ver detalhes',\n SSL_IN_PROGRESS: 'Solução - Alerta apresentado com sucesso - SSL em processo de ativação',\n SSL_ACTIVE: 'Solução - Alerta apresentado com sucesso - SSL ativado com sucesso',\n SSL_ERROR: 'Solução - Alerta apresentado com sucesso - Não foi possível instalar o SSL',\n },\n LABELS: {\n VIEW_ALERT: 'Ação: Visualizar notificações de aviso',\n NOTIFICATION_VIEW: 'Solução - Meus avisos - Exibição da notificação',\n SUBSCRIPTIONS_WITHOUT_RENEW_ENABLED: 'Ação: Link Ativar Assinatura',\n WITHOUT_BACKUP: 'Solução - Meus avisos fluxo de backup - Exibição do alerta não possui backup',\n BACKUP_CTA_CLICK: 'Solução - Meus avisos fluxo de backup - Clique no cta Fazer backup',\n BACKUP_SEVEN_DAYS: 'Solução - Meus avisos fluxo de backup - Exibição do alerta ultimo backup 7 dias',\n BACKUP_FIFTEEN_DAYS: 'Solução - Meus avisos fluxo de backup - Exibição do alerta ultimo backup 15 dias',\n BACKUP_THIRTY_DAYS: 'Solução - Meus avisos fluxo de backup - Exibição do alerta ultimo backup 30 dias',\n BACKUP_SUCCESS: 'Solução - Meus avisos fluxo de backup - Exibição do alerta backup concluído com sucesso',\n BACKUP_RESTORED: 'Solução - Meus avisos fluxo de backup - Exibição do alerta restauração concluída com sucesso',\n DUPLICATE_ORDER: 'Solução - Meus avisos Pedidos duplicados - Alerta de pedido duplicado apresentado com sucesso',\n DUPLICATE_ORDER_CLICK: 'Solução - Meus avisos Pedidos duplicados - Clique no cta ver pedidos duplicados',\n TICKET_NEW_ALERT: 'Solução - Status dos chamados meus avisos - Alerta de chamado aberto exibido com sucesso',\n TICKET_NEW_CTA: 'Solução - Status dos chamados meus avisos - Clique no cta ver chamado aberto',\n TICKET_OPEN_ALERT: 'Solução - Status dos chamados meus avisos - Alerta de chamado em aberto exibido com sucesso',\n TICKET_OPEN_CTA: 'Solução - Status dos chamados meus avisos - Clique no cta ver chamado em aberto',\n TICKET_WAITING_RESPONSE_ALERT: 'Solução - Status dos chamados meus avisos - Alerta de chamado aguardando resposta exibido com sucesso',\n TICKET_WAITING_RESPONSE_CTA: 'Solução - Status dos chamados meus avisos - Clique no cta ver chamado aguardando resposta',\n TICKET_SOLVED_ALERT: 'Solução - Status dos chamados meus avisos - Alerta de chamado concluído exibido com sucesso',\n TICKET_SOLVED_CTA: 'Solução - Status dos chamados meus avisos - Clique no cta ver chamado concluído',\n ANALYZING_ORDER_ALERT: 'Solução - Meus avisos pedidos em análise - Alerta de pedido em análise apresentado com sucesso',\n CANCELED_ORDER_ALERT: 'Solução - Meus avisos pedidos em análise - Alerta de pedido cancelado apresentado com sucesso',\n PROCESSING_ORDER_ALERT_CLICK: 'Solução - Meus avisos pedidos em análise - Clique no cta ver detalhes',\n SSL_IN_PROGRESS_DISPLAYED: 'Solução - SSL Meus Avisos - Alerta de SSL em processo de ativação exibido com sucesso',\n SSL_ACTIVE_DISPLAYED: 'Solução - SSL Meus Avisos - Alerta de SSL ativado exibido com sucesso',\n SSL_ERROR_DISPLAYED: 'Solução - SSL Meus Avisos - Alerta de não foi possível instalar o SSL exibido com sucesso',\n },\n};\n\nconst redirectToSubscriptionManager = (daysToCancel, discountEnable) => {\n let category;\n if (discountEnable) {\n category = EVENTS.CATEGORIES.SUBSCRIPTIONS_WITHOUT_RENEW_ENABLED_WITH_DISCOUNT;\n } else if (daysToCancel === 30) {\n category = EVENTS.CATEGORIES.SUBSCRIPTIONS_WITHOUT_RENEW_ENABLED_30;\n } else if (daysToCancel < 30 && daysToCancel > 10) {\n category = EVENTS.CATEGORIES.SUBSCRIPTIONS_WITHOUT_RENEW_ENABLED_LT_30;\n } else if (daysToCancel === 10) {\n category = EVENTS.CATEGORIES.SUBSCRIPTIONS_WITHOUT_RENEW_ENABLED_10;\n } else if (daysToCancel < 10 && daysToCancel > 5) {\n category = EVENTS.CATEGORIES.SUBSCRIPTIONS_WITHOUT_RENEW_ENABLED_LT_10;\n } else if (daysToCancel === 5) {\n category = EVENTS.CATEGORIES.SUBSCRIPTIONS_WITHOUT_RENEW_ENABLED_5;\n } else if (daysToCancel < 5) {\n category = EVENTS.CATEGORIES.SUBSCRIPTIONS_WITHOUT_RENEW_ENABLED_LT_5;\n }\n\n collect({\n event: EVENTS.NAME,\n gaEventCategory: category,\n gaEventAction: EVENTS.ACTIONS.CLICK_LINK_SUBSCRIPTION_MANAGER,\n gaEventLabel: EVENTS.LABELS.SUBSCRIPTIONS_WITHOUT_RENEW_ENABLED,\n });\n};\n\nconst viewAlerts = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.MY_ALERTS,\n gaEventAction: EVENTS.ACTIONS.CLICK_MY_ACTIONS,\n gaEventLabel: EVENTS.LABELS.VIEW_ALERT,\n });\n};\n\nconst viewInvoicesAlert = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.INVOICES,\n gaEventAction: EVENTS.ACTIONS.ALERT_EXHIBITION,\n gaEventLabel: EVENTS.LABELS.NOTIFICATION_VIEW,\n });\n};\n\nconst viewPropagationAlert = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.PROPAGATION,\n gaEventAction: EVENTS.ACTIONS.ALERT_EXHIBITION,\n gaEventLabel: EVENTS.LABELS.NOTIFICATION_VIEW,\n });\n};\n\nconst viewContractDomainAlert = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.CONTRACT_DOMAIN,\n gaEventAction: EVENTS.ACTIONS.ALERT_EXHIBITION,\n gaEventLabel: EVENTS.LABELS.NOTIFICATION_VIEW,\n });\n};\nconst viewSetupDomainAlert = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.SETUP_DOMAIN,\n gaEventAction: EVENTS.ACTIONS.ALERT_EXHIBITION,\n gaEventLabel: EVENTS.LABELS.NOTIFICATION_VIEW,\n });\n};\nconst withoutBackup = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.WITHOUT_BACKUP,\n gaEventAction: EVENTS.ACTIONS.WITHOUT_BACKUP,\n gaEventLabel: EVENTS.LABELS.WITHOUT_BACKUP,\n });\n};\nconst backupCTAClick = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.BACKUP_CTA_CLICK,\n gaEventAction: EVENTS.ACTIONS.BACKUP_CTA_CLICK,\n gaEventLabel: EVENTS.LABELS.BACKUP_CTA_CLICK,\n });\n};\nconst backupSevenDays = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.BACKUP_SEVEN_DAYS,\n gaEventAction: EVENTS.ACTIONS.BACKUP_SEVEN_DAYS,\n gaEventLabel: EVENTS.LABELS.BACKUP_SEVEN_DAYS,\n });\n};\nconst backupFifteenDays = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.BACKUP_FIFTEEN_DAYS,\n gaEventAction: EVENTS.ACTIONS.BACKUP_FIFTEEN_DAYS,\n gaEventLabel: EVENTS.LABELS.BACKUP_FIFTEEN_DAYS,\n });\n};\nconst backupThirtyDays = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.BACKUP_THIRTY_DAYS,\n gaEventAction: EVENTS.ACTIONS.BACKUP_THIRTY_DAYS,\n gaEventLabel: EVENTS.LABELS.BACKUP_THIRTY_DAYS,\n });\n};\nconst backupSuccess = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.BACKUP_SUCCESS,\n gaEventAction: EVENTS.ACTIONS.BACKUP_SUCCESS,\n gaEventLabel: EVENTS.LABELS.BACKUP_SUCCESS,\n });\n};\nconst backupRestored = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.BACKUP_RESTORED,\n gaEventAction: EVENTS.ACTIONS.BACKUP_RESTORED,\n gaEventLabel: EVENTS.LABELS.BACKUP_RESTORED,\n });\n};\nconst duplicateOrder = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.DUPLICATE_ORDER,\n gaEventAction: EVENTS.ACTIONS.DUPLICATE_ORDER,\n gaEventLabel: EVENTS.LABELS.DUPLICATE_ORDER,\n });\n};\nconst duplicateOrderClick = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.DUPLICATE_ORDER_CLICK,\n gaEventAction: EVENTS.ACTIONS.DUPLICATE_ORDER_CLICK,\n gaEventLabel: EVENTS.LABELS.DUPLICATE_ORDER_CLICK,\n });\n};\n\nconst ticketNewClick = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.TICKET_ALERTS,\n gaEventAction: EVENTS.ACTIONS.TICKET_NEW_CTA,\n gaEventLabel: EVENTS.LABELS.TICKET_NEW_CTA,\n });\n};\n\nconst ticketOpenClick = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.TICKET_ALERTS,\n gaEventAction: EVENTS.ACTIONS.TICKET_OPEN_CTA,\n gaEventLabel: EVENTS.LABELS.TICKET_OPEN_CTA,\n });\n};\n\nconst ticketWaitingResponseClick = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.TICKET_ALERTS,\n gaEventAction: EVENTS.ACTIONS.TICKET_WAITING_RESPONSE_CTA,\n gaEventLabel: EVENTS.LABELS.TICKET_WAITING_RESPONSE_CTA,\n });\n};\n\nconst ticketSolvedClick = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.TICKET_ALERTS,\n gaEventAction: EVENTS.ACTIONS.TICKET_SOLVED_CTA,\n gaEventLabel: EVENTS.LABELS.TICKET_SOLVED_CTA,\n });\n};\n\nconst analyzingOrder = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.PENDING_ORDER,\n gaEventAction: EVENTS.ACTIONS.ANALYZING_ORDER_ALERT,\n gaEventLabel: EVENTS.LABELS.ANALYZING_ORDER_ALERT,\n });\n};\n\nconst canceledOrder = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.PENDING_ORDER,\n gaEventAction: EVENTS.ACTIONS.CANCELED_ORDER_ALERT,\n gaEventLabel: EVENTS.LABELS.CANCELED_ORDER_ALERT,\n });\n};\n\nconst pendingOrderClick = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.PENDING_ORDER_CLICK,\n gaEventAction: EVENTS.ACTIONS.PROCESSING_ORDER_ALERT_CLICK,\n gaEventLabel: EVENTS.LABELS.PROCESSING_ORDER_ALERT_CLICK,\n });\n};\n\nconst sslInProgressDisplayed = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.SSL_ALERT,\n gaEventAction: EVENTS.ACTIONS.SSL_IN_PROGRESS,\n gaEventLabel: EVENTS.LABELS.SSL_IN_PROGRESS_DISPLAYED,\n });\n};\n\nconst sslActiveDisplayed = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.SSL_ALERT,\n gaEventAction: EVENTS.ACTIONS.SSL_ACTIVE,\n gaEventLabel: EVENTS.LABELS.SSL_ACTIVE_DISPLAYED,\n });\n};\n\nconst sslErrorDisplayed = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORIES.SSL_ALERT,\n gaEventAction: EVENTS.ACTIONS.SSL_ERROR,\n gaEventLabel: EVENTS.LABELS.SSL_ERROR_DISPLAYED,\n });\n};\n\nconst analytics = {\n viewAlerts,\n redirectToSubscriptionManager,\n viewInvoicesAlert,\n viewPropagationAlert,\n viewContractDomainAlert,\n viewSetupDomainAlert,\n withoutBackup,\n backupCTAClick,\n backupSevenDays,\n backupFifteenDays,\n backupThirtyDays,\n backupSuccess,\n backupRestored,\n duplicateOrder,\n duplicateOrderClick,\n ticketNewClick,\n ticketOpenClick,\n ticketWaitingResponseClick,\n ticketSolvedClick,\n analyzingOrder,\n canceledOrder,\n pendingOrderClick,\n sslInProgressDisplayed,\n sslActiveDisplayed,\n sslErrorDisplayed,\n};\n\nexport default analytics;\n","import React from 'react';\nimport { useHistory } from 'react-router';\nimport { Alert } from 'gatorcomponents';\nimport * as Styles from './NewAlerts.styles';\nimport useLocale from '@/hooks/useLocale';\nimport analytics from '@/analytics/domains/domains.analytics';\nimport { billingAnalytics } from '@/analytics/billing';\n\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { ALERT_TYPES, BACKUP_STATUS } from '../../Layout/Menu/MyAlerts/MyAlerts.types';\nimport { alertsAnalytics } from '@/analytics/alerts';\nimport { format, parseISO } from 'date-fns';\n\nconst NewAlerts = ({\n alertType,\n handleShowModalDnsPropagationAlert,\n handleShowModalDomainNotContracted,\n handleShowModalDomainNotConfigured,\n handleShowModalDomainsInPropagation,\n handleRedirectToSubscriptionManager,\n handleRedirectToCloudflare,\n handleRedirectToSubscriptionAnalysis,\n handleClickOnAlertDomainToPoint,\n handleRedirectToBackupScreen,\n handleShowRefundModal,\n totalInvoice,\n invoiceSum,\n setVisible,\n alert,\n index,\n setAlertAsRead,\n handleDuplicateOrdersClick,\n enabledDiscountOfferBanner = false,\n enabledAlertCreditRefund = false,\n}) => {\n const { alerts: alertsLocale, billing: billingLocale, routes } = useLocale();\n const history = useHistory();\n\n const backupAlertSuccess = () => alert.backup_type === BACKUP_STATUS.REQUESTED && alert.days_since_last <= 7;\n const backupContent = () => {\n const handleBackup = () => {\n handleRedirectToBackupScreen(alert.hosting_id);\n setAlertAsRead(index);\n setVisible(false);\n };\n\n const daysToShowInBackupAlert = () => {\n if (alert.days_since_last > 7 && alert.days_since_last <= 15) {\n return 7;\n }\n if (alert.days_since_last > 15 && alert.days_since_last <= 30) {\n return 15;\n }\n if (alert.days_since_last > 30) {\n return 30;\n }\n };\n\n const planLabel = alert.type && alert.type === ALERT_TYPES.BACKUP && `${alert.plan_name} (${alert.domain})`;\n\n if (alert.days_since_last <= 7 && alert.backup_type === BACKUP_STATUS.REQUESTED) {\n return {\n title: alertsLocale.backup.backupCreated.title(planLabel),\n description: alertsLocale.backup.backupCreated.description({ handleClick: handleBackup }),\n };\n }\n\n if (alert.days_since_last > 30 && alert.backup_type === BACKUP_STATUS.REQUESTED) {\n return {\n title: alertsLocale.backup.oldBackup.title(planLabel, daysToShowInBackupAlert()),\n description: alertsLocale.backup.oldBackup.description({ handleClick: handleBackup }),\n };\n }\n\n if (alert.days_since_last > 7 && alert.days_since_last <= 30 && alert.backup_type === BACKUP_STATUS.REQUESTED) {\n return {\n title: alertsLocale.backup.oldBackup.title(planLabel, daysToShowInBackupAlert()),\n description: alertsLocale.backup.oldBackup.description({\n handleClick: () => {\n handleBackup();\n alertsAnalytics.backupCTAClick();\n },\n }),\n };\n }\n\n return {\n title: alertsLocale.backup.noBackup.title(planLabel),\n description: alertsLocale.backup.noBackup.description({\n handleClick: () => {\n handleBackup();\n alertsAnalytics.backupCTAClick();\n },\n }),\n };\n };\n\n const alertNotPropagatedDescription = () => alertsLocale.domainNotPropagated({\n handleClick: () => {\n analytics.dnsWizard.dnsUnpointedDomain();\n handleShowModalDnsPropagationAlert();\n setAlertAsRead(index);\n },\n });\n\n const alertInPropagationDescription = () => alertsLocale.domainInPropagation({\n handleClick: () => {\n analytics.dnsWizard.dnsPropagationUnderstandTerm();\n handleShowModalDomainsInPropagation();\n setAlertAsRead(index);\n },\n });\n\n const alertNotContractedDescription = () => alertsLocale.domainNotContracted({\n handleClick: () => {\n analytics.dnsWizard.bannerDomainNotContracted();\n handleShowModalDomainNotContracted();\n setAlertAsRead(index);\n },\n });\n\n const alertCloudflareFeatureDescription = () => alertsLocale.cloudflareFeature({\n handleClick: () => {\n handleRedirectToCloudflare(alert.hostingId);\n },\n });\n\n const alertCloudflareDelayedDescription = () => alertsLocale.cloudflareDelayed({\n handleClick: () => {\n handleRedirectToCloudflare(alert.hostingId);\n },\n });\n\n const alertDomainForPointingDescription = () => {\n const domain = alert.domain && alert.domain.length > 15 ? `${alert.domain.slice(0, 14)}...` : alert.domain;\n\n return alertsLocale.domainForPointing({\n handleClick: () => {\n handleClickOnAlertDomainToPoint(alert.id);\n setAlertAsRead(index);\n },\n domain,\n });\n };\n\n const alertNotConfiguredDescription = () => alertsLocale.domainNotConfigured({\n handleClick: () => {\n analytics.dnsWizard.buttonHowToConfigure();\n handleShowModalDomainNotConfigured();\n setAlertAsRead(index);\n },\n });\n\n const alertCreditRefundDescription = () => {\n const invoiceid = alert.invoiceid ? alert.invoiceid : '';\n const creditAmount = alert.credit_amount ? alert.credit_amount : '';\n if (alert.received) {\n return alertsLocale.alertCreditRefund.received({\n invoiceid,\n creditAmount,\n });\n }\n return alertsLocale.alertCreditRefund.notReceived({\n invoiceid,\n creditAmount,\n });\n };\n\n const alertSubscriptionToDue = () => alertsLocale.subscriptionToDue({\n handleClick: () => {\n handleRedirectToSubscriptionManager(index);\n setAlertAsRead(index);\n },\n daysToDue: alert.daysToDue,\n });\n\n const alertSubscriptionToCancel = () => alertsLocale.subscriptionToCancel({\n handleClick: () => {\n handleRedirectToSubscriptionManager(index);\n setAlertAsRead(index);\n },\n\n dueDate: format(parseISO(alert.dueDate), 'dd/MM/yyyy'),\n });\n\n const refundAlertDescription = () => alertsLocale.refund({\n handleClick: () => {\n handleShowRefundModal(alert);\n setAlertAsRead(index);\n },\n refundMethod: alert && alert.method && billingLocale.paymentMethods[alert.method],\n refundValue: alert && alert.amount,\n });\n\n const tosAlert = {\n title: alert && alert.tag && alertsLocale.tos[alert.tag] && alertsLocale.tos[alert.tag].title,\n description: alert && alert.tag && alertsLocale.tos[alert.tag] && alertsLocale.tos[alert.tag].description({\n handleClick: () => {\n history.push(routes.help);\n setAlertAsRead(index);\n },\n }),\n };\n\n const alertDuplicateOrdersDescription = () => alertsLocale.duplicateOrders({\n handleClick: () => {\n setAlertAsRead(index);\n handleDuplicateOrdersClick(true);\n setVisible(false);\n },\n });\n\n const alertPendingOrderDescription = () => alertsLocale.orderAnalysis[alert.orderStatus] && alertsLocale.orderAnalysis[alert.orderStatus].description({\n productName: alert.productName,\n handleClick: () => {\n alertsAnalytics.pendingOrderClick();\n handleRedirectToSubscriptionAnalysis(alert.productId, alert.productType);\n setAlertAsRead(index);\n setVisible(false);\n },\n domain: alert.productDomain,\n });\n\n const alertSSL = () => alertsLocale.ssl[alert.status] && alertsLocale.ssl[alert.status]({ domain: alert.domain });\n\n const alertTitle = () => {\n if (alert.subject) {\n return alert.subject.length > 48 ? `${alert.subject.slice(0, 45)}...` : alert.subject;\n }\n\n if (alert.description) {\n return alert.description.length > 48 ? `${alert.description.slice(0, 45)}...` : alert.description;\n }\n };\n\n const callTicketCtaAnalyticEvents = (ticketStatus) => {\n switch (ticketStatus) {\n case ALERT_TYPES.TICKET_OPEN:\n alertsAnalytics.ticketOpenClick();\n break;\n case ALERT_TYPES.TICKET_PENDING:\n alertsAnalytics.ticketWaitingResponseClick();\n break;\n case ALERT_TYPES.TICKET_SOLVED:\n alertsAnalytics.ticketSolvedClick();\n break;\n default:\n alertsAnalytics.ticketNewClick();\n }\n };\n\n const ticketAlert = {\n title: alert && alertsLocale.tickets && alertsLocale.tickets[alert.type] && `${alertsLocale.tickets[alert.type].title} - ${alertTitle()}`,\n description: alert && alertsLocale.tickets && alertsLocale.tickets[alert.type] && alertsLocale.tickets[alert.type].description({\n handleClick: () => {\n if (history.location.pathname.includes(routes.ticket)) {\n history.push(routes.help);\n setTimeout(() => {\n history.push(`${routes.ticket}/${alert.id}`);\n }, 10);\n } else {\n history.push(`${routes.ticket}/${alert.id}`);\n }\n\n callTicketCtaAnalyticEvents(alert.type);\n\n setAlertAsRead(alert.id, 'tickets');\n },\n }),\n };\n\n const handleInvoicesClick = () => {\n history.push(routes.billing);\n setVisible(false);\n billingAnalytics.invoicesAlertClick();\n setAlertAsRead(index);\n };\n\n const mountSSLVariant = () => {\n if (alert.status === 'active') {\n return 'success';\n }\n\n if (alert.status === 'activation_failed') {\n return 'error';\n }\n\n return 'timed';\n };\n\n const currencyFormated = formatCurrency(invoiceSum);\n\n const alertToShow = () => {\n switch (alertType) {\n case ALERT_TYPES.BACKUP:\n return (\n \n {alertToShow()}\n \n );\n};\n\nexport default NewAlerts;\n","import styled, { css } from 'styled-components';\n\nexport const Content = styled.section`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n padding: 14px;\n `}\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n margin-top: 2px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n text-align: center;\n }\n `}\n`;\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 10px;\n margin-top: 24px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n align-items: center;\n flex-direction: column;\n }\n `}\n`;\n\nexport const InfoText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-size: ${theme.font.sizes.sm};\n margin: 0;\n\n strong {\n font-weight: ${theme.v1.font.weights.medium};\n }\n\n @media (max-width: ${theme.breakpoints.sm}) {\n text-align: center;\n }\n `}\n`;\n\nexport const Actions = styled.div`\n display: flex;\n justify-content: center;\n margin-top: 16px;\n`;\n\nexport const ButtonWrapper = styled.div`\n margin-top: 7px;\n`;\n\nexport const Select = styled.div`\n ${({ theme }) => css`\n margin-left: 164px;\n margin-top: -50px;\n position: fixed;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin-left: 0;\n margin-top: -34px;\n position: relative;\n }\n `}\n`;\n\nexport const SelectWrapper = styled.div`\n ${({ theme }) => css`\n margin-top: 74px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n display: flex;\n justify-content: center;\n margin-top: 60px;\n }\n `}\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { Button, IconDanger, Select } from 'gatorcomponents';\nimport * as Styles from './ModalDomainDnsPropagationAlert.styles';\nimport { useSelector } from 'react-redux';\nimport useLocale from '@/hooks/useLocale';\nimport { withI18n } from 'react-i18next';\nimport { PROPAGATION_STATUS } from '@/enums/domains/domains.enum';\nimport { Modal } from '@/pages/common';\nimport { useHistory } from 'react-router';\nimport analytics from '@/analytics/domains/domains.analytics';\n\nconst ModalDomainDnsPropagationAlert = ({ hideModal, setMyAlertsVisible }) => {\n const { alerts: alertsLocale, routes: routesLocale } = useLocale();\n const history = useHistory();\n const domainsNotPropagated = useSelector(state => state.newDomains.propagationStatus && state.newDomains.propagationStatus.filter(propagation => propagation.status === PROPAGATION_STATUS.NOT_PROPAGATED));\n const [selectedDomainId, setSelectedDomainId] = useState('');\n const [selectedDomainLabel, setSelectedDomainLabel] = useState('');\n\n const selectOptions = domainsNotPropagated.map(domainNotPropagated => ({ value: domainNotPropagated.id, label: domainNotPropagated.domain }));\n\n const setDefaultDomain = useCallback(() => {\n if (selectOptions && selectOptions.length && selectOptions.length === 1) {\n setSelectedDomainId(selectOptions[0].value);\n setSelectedDomainLabel(selectOptions[0].label);\n }\n }, [selectOptions]);\n\n useEffect(() => {\n setDefaultDomain();\n }, [setDefaultDomain, selectOptions]);\n\n const handleHideModal = () => {\n hideModal && hideModal();\n };\n\n const handleSelectOption = (option) => {\n setSelectedDomainId(option.value);\n };\n\n const handleNavigation = () => {\n analytics.dnsWizard.dnsUnpointedDomainConfigureDomain();\n const routeToDnsWizard = selectedDomainId && `${routesLocale && routesLocale.domains}${routesLocale && routesLocale.dnsWizard}/${selectedDomainId}`;\n routeToDnsWizard && history.push(routeToDnsWizard);\n handleHideModal();\n setMyAlertsVisible && setMyAlertsVisible(false);\n };\n\n return (\n \n \n \n {alertsLocale.whichDomain}\n \n \n \n {alertsLocale.selectDomainToConfigure}\n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default withI18n()((ModalDomainDnsPropagationAlert));\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n color: ${theme.color.tundora};\n display: flex;\n flex-direction: column;\n font-family: ${theme.font.family.secondary};\n gap: 24px;\n margin: 8px;\n `}\n`;\n\nexport const Title = styled.p`\n ${({ theme, isMobile }) => css`\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${!isMobile && theme.font.weights.bold};\n margin: 0;\n `}\n`;\n\nexport const Text = styled.div`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.sm};\n `}\n`;\n\nexport const Description = styled(Text)`\n margin: 0;\n display: flex;\n flex-direction: column;\n`;\n\nexport const ButtonContainer = styled.div`\n ${() => css`\n align-items: center;\n display: flex;\n justify-content: center;\n `}\n`;\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n margin: 0;\n a {\n color: ${theme.v2.colors.brand.primaryBlue};\n }\n `}\n`;\n","import React from 'react';\nimport { Button, Alert, Accordion } from 'gatorcomponents';\nimport * as Styles from './ModalDomainInPropagation.styles';\nimport useLocale from '@/hooks/useLocale';\nimport { withI18n } from 'react-i18next';\nimport { Modal } from '@/pages/common';\n\nconst ModalDomainInPropagation = ({ domainsList, hideModal, mobile }) => {\n const { alerts: alertsLocale } = useLocale();\n\n const DomainsListContent = () => {\n const domainsContent = () => (\n <>\n {domainsList.length <= 4 && (\n {alertsLocale.modalDomainInPropagation.alertTitle} \n )}\n {domainsList.map(item => (\n {item.domain} \n ))}\n \n );\n\n return (\n <>\n {domainsList.length > 4 ? (\n \n \n \n {alertsLocale.modalDomainInPropagation.title}\n \n \n {alertsLocale.modalDomainInPropagation.description}\n \n \n {alertsLocale.modalDomainInPropagation.knowMoreLabel} \n {alertsLocale.modalDomainInPropagation.helpCentralLabel} \n \n \n \n \n \n \n \n );\n};\n\nexport default withI18n()((ModalDomainInPropagation));\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n color: ${theme.color.tundora};\n display: flex;\n flex-direction: column;\n font-family: ${theme.font.family.secondary};\n gap: 24px;\n margin: 8px;\n `}\n`;\n\nexport const Title = styled.p`\n ${({ theme, isMobile }) => css`\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${!isMobile && theme.font.weights.bold};\n margin: 0;\n `}\n`;\n\nexport const Text = styled.div`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.sm};\n `}\n`;\n\nexport const Description = styled.div`\n margin: 0;\n display: flex;\n flex-direction: column;\n font-size: 16px;\n`;\n\nexport const SubDescription = styled(Description)`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.sm};\n `}\n`;\n\nexport const ButtonContainer = styled.div`\n ${() => css`\n align-items: center;\n display: flex;\n justify-content: center;\n `}\n`;\n\nexport const Container = styled.div`\n ${() => css`\n display: flex;\n align-items: center;\n `}\n`;\n\nexport const ItemsContainer = styled.div`\n ${({ isMobile }) => css`\n display: flex;\n flex-direction: ${isMobile && 'column'};\n gap: 24px;\n justify-content: ${!isMobile && 'space-between'};\n `}\n`;\n\nexport const FrameWrapper = styled.div`\n ${() => css`\n align-items: center;\n border-radius: 4px;\n box-shadow: 0px 1px 3px #00000016;\n display: flex;\n justify-content: center;\n row-gap: 16px;\n padding: 16px;\n `}\n`;\n\nexport const NoticeContainer = styled.div`\n ${() => css`\n align-items: center;\n display: flex;\n justify-content: center;\n `}\n`;\n\nexport const ResultIcon = styled.div`\n ${({ completed, theme }) => css`\n align-items: center;\n border-radius: 50%;\n display: flex;\n min-height: 40px;\n justify-content: center;\n margin-right: 16px;\n min-width: 40px;\n & svg {\n fill: #FFFF;\n };\n\n background-color: ${completed ? theme.v2.colors.feedback.activePure : theme.v2.colors.feedback.pendingPure};\n `}\n`;\n\nexport const InfoAlert = styled.div`\n ${({ theme }) => css`\n display: flex;\n font-size: 12px;\n gap: 8px;\n\n a {\n color: ${theme.v2.colors.brand.primaryBlue};\n }\n `}\n`;\n\nexport const AccordionListContainer = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n font-size: 14px;\n row-gap: 20px;\n `}\n`;\n\nexport const ListItem = styled.div`\n ${() => css`\n display: flex;\n align-items: top;\n gap: 4px;\n\n p {\n margin: 0;\n };\n `}\n`;\n\nexport const ListMarker = styled.p`\n ${() => css`\n user-select: none;\n `}\n`;\n\nexport const ModalityContainer = styled.div`\n ${() => css`\n display: flex;\n gap: 4px;\n `}\n`;\n\nexport const TooltipContent = styled.div`\n ${() => css`\n max-width: 232px;\n `}\n`;\n\nexport const IconInfoContainer = styled.div`\n ${({ theme }) => css`\n position: absolute;\n\n & svg {\n fill: ${theme.v2.colors.brand.primaryBlue};\n },\n `}\n`;\n","export const PAYMENT_METHOD = {\n CREDIT_CARD: 'cc',\n BRASPAG_CREDIT: 'braspag_credit',\n BRASPAG_PARC_1X: 'braspag_credit_1x',\n BRASPAG_PARC_2X: 'braspag_credit_2x',\n BRASPAG_PARC_3X: 'braspag_credit_3x',\n BRASPAG_PARC_4X: 'braspag_credit_4x',\n BRASPAG_PARC_5X: 'braspag_credit_5x',\n BRASPAG_PARC_6X: 'braspag_credit_6x',\n BRASPAG_PARC_7X: 'braspag_credit_7x',\n BRASPAG_PARC_8X: 'braspag_credit_8x',\n BRASPAG_PARC_9X: 'braspag_credit_9x',\n BRASPAG_PARC_10X: 'braspag_credit_10x',\n BRASPAG_PARC_11X: 'braspag_credit_11x',\n BRASPAG_PARC_12X: 'braspag_credit_12x',\n HG_CREDITS: 'hg_credits',\n DLOCAL: 'dlocal',\n PIX: 'gp_pix',\n GP_PAYPAL: 'gp_paypal',\n PAYPAL: 'paypal',\n GP_BOLETO: 'gp_boleto',\n\n // CREDIT CARD ES\n CREDIT_CARD_ES: 'dlocal',\n\n // BOLETO MEXICO\n BOLETO_MX: 'payu_boleto',\n\n // BOLETO CHILE || COLOMBIA\n BOLETO_CL_CO: 'dlocalcash',\n\n TICKET_ES: 'dlocalcash',\n};\n\nexport const PAYMENT_TYPE = {\n CASH_PAYMENT: 'cash_payment',\n WALLET: 'wallet',\n QR_PAYMENT: 'qr_payment',\n GP_PAYPAL: 'gp_paypal',\n BANK_TRANSFER: 'bank_transfer',\n};\n\nexport const REFUND_TYPE = {\n PARTIAL: 'partial',\n INTEGRAL: 'integral',\n};\n\nexport const REFUND_STATUS = {\n COMPLETED: 'COMPLETED',\n DECLINED: 'DECLINED',\n ERROR: 'ERROR',\n CANCELED: 'CANCELED',\n PENDING: 'PENDING',\n};\n","import React from 'react';\nimport {\n Button, IconCheck, IconClock, IconDanger, Accordion, IconFilledInfo, Tooltip,\n} from 'gatorcomponents';\nimport * as Styles from './RefundAlertsModal.styles';\nimport useLocale from '@/hooks/useLocale';\nimport { withI18n } from 'react-i18next';\nimport { Modal } from '@/pages/common';\nimport { PAYMENT_METHOD, REFUND_TYPE, REFUND_STATUS } from './RefundAlertsModal.enum';\n\nconst RefundAlertsModal = ({ customerRefund, hideModal, mobile }) => {\n const { alerts: alertsLocale } = useLocale();\n\n const handleHideModal = () => {\n hideModal && hideModal();\n };\n\n const refundType = customerRefund.refund_type === REFUND_TYPE.PARTIAL ? 'Parcial' : 'Integral';\n\n const paymentMethodLabel = () => {\n switch (customerRefund.method) {\n case PAYMENT_METHOD.BRASPAG_CREDIT:\n case PAYMENT_METHOD.BRASPAG_PARC_1X:\n case PAYMENT_METHOD.BRASPAG_PARC_2X:\n case PAYMENT_METHOD.BRASPAG_PARC_3X:\n case PAYMENT_METHOD.BRASPAG_PARC_4X:\n case PAYMENT_METHOD.BRASPAG_PARC_5X:\n case PAYMENT_METHOD.BRASPAG_PARC_6X:\n case PAYMENT_METHOD.BRASPAG_PARC_7X:\n case PAYMENT_METHOD.BRASPAG_PARC_8X:\n case PAYMENT_METHOD.BRASPAG_PARC_9X:\n case PAYMENT_METHOD.BRASPAG_PARC_10X:\n case PAYMENT_METHOD.BRASPAG_PARC_11X:\n case PAYMENT_METHOD.BRASPAG_PARC_12X:\n case PAYMENT_METHOD.CREDIT_CARD_ES:\n case PAYMENT_METHOD.CREDIT_CARD:\n return alertsLocale.refundModal.paymentMethods.creditCard;\n case PAYMENT_METHOD.PAYPAL:\n case PAYMENT_METHOD.GP_PAYPAL:\n return alertsLocale.refundModal.paymentMethods.paypal;\n case PAYMENT_METHOD.HG_CREDITS:\n case PAYMENT_METHOD.PIX:\n case PAYMENT_METHOD.GP_BOLETO:\n case PAYMENT_METHOD.BOLETO_MX:\n case PAYMENT_METHOD.BOLETO_CL_CO:\n return alertsLocale.refundModal.paymentMethods.hgCredits;\n default:\n return alertsLocale.refundModal.paymentMethods.hgCredits;\n }\n };\n\n const methodChosenLabel = () => {\n if (customerRefund.refund_type === 'integral') {\n switch (customerRefund.method) {\n case PAYMENT_METHOD.HG_CREDITS:\n return alertsLocale.refundModal.modeAndTerm.refundMethods.wholeCreditsLabel;\n case PAYMENT_METHOD.PIX:\n case PAYMENT_METHOD.GP_BOLETO:\n case PAYMENT_METHOD.BOLETO_MX:\n case PAYMENT_METHOD.BOLETO_CL_CO:\n return alertsLocale.refundModal.modeAndTerm.refundMethods.wholePixLabel;\n case PAYMENT_METHOD.PAYPAL:\n case PAYMENT_METHOD.GP_PAYPAL:\n return alertsLocale.refundModal.modeAndTerm.refundMethods.wholePaypalLabel;\n case PAYMENT_METHOD.BRASPAG_CREDIT:\n case PAYMENT_METHOD.BRASPAG_PARC_1X:\n case PAYMENT_METHOD.BRASPAG_PARC_2X:\n case PAYMENT_METHOD.BRASPAG_PARC_3X:\n case PAYMENT_METHOD.BRASPAG_PARC_4X:\n case PAYMENT_METHOD.BRASPAG_PARC_5X:\n case PAYMENT_METHOD.BRASPAG_PARC_6X:\n case PAYMENT_METHOD.BRASPAG_PARC_7X:\n case PAYMENT_METHOD.BRASPAG_PARC_8X:\n case PAYMENT_METHOD.BRASPAG_PARC_9X:\n case PAYMENT_METHOD.BRASPAG_PARC_10X:\n case PAYMENT_METHOD.BRASPAG_PARC_11X:\n case PAYMENT_METHOD.BRASPAG_PARC_12X:\n case PAYMENT_METHOD.CREDIT_CARD_ES:\n case PAYMENT_METHOD.CREDIT_CARD:\n return alertsLocale.refundModal.modeAndTerm.refundMethods.wholeCreditCardLabel;\n default:\n return alertsLocale.refundModal.modeAndTerm.refundMethods.partialCreditsLabel;\n }\n } else {\n switch (customerRefund.method) {\n case PAYMENT_METHOD.HG_CREDITS:\n return alertsLocale.refundModal.modeAndTerm.refundMethods.partialCreditsLabel;\n case PAYMENT_METHOD.PIX:\n case PAYMENT_METHOD.GP_BOLETO:\n case PAYMENT_METHOD.BOLETO_MX:\n case PAYMENT_METHOD.BOLETO_CL_CO:\n return alertsLocale.refundModal.modeAndTerm.refundMethods.partialPixLabel;\n case PAYMENT_METHOD.PAYPAL:\n case PAYMENT_METHOD.GP_PAYPAL:\n return alertsLocale.refundModal.modeAndTerm.refundMethods.partialPaypalLabel;\n case PAYMENT_METHOD.BRASPAG_CREDIT:\n case PAYMENT_METHOD.BRASPAG_PARC_1X:\n case PAYMENT_METHOD.BRASPAG_PARC_2X:\n case PAYMENT_METHOD.BRASPAG_PARC_3X:\n case PAYMENT_METHOD.BRASPAG_PARC_4X:\n case PAYMENT_METHOD.BRASPAG_PARC_5X:\n case PAYMENT_METHOD.BRASPAG_PARC_6X:\n case PAYMENT_METHOD.BRASPAG_PARC_7X:\n case PAYMENT_METHOD.BRASPAG_PARC_8X:\n case PAYMENT_METHOD.BRASPAG_PARC_9X:\n case PAYMENT_METHOD.BRASPAG_PARC_10X:\n case PAYMENT_METHOD.BRASPAG_PARC_11X:\n case PAYMENT_METHOD.BRASPAG_PARC_12X:\n case PAYMENT_METHOD.CREDIT_CARD_ES:\n case PAYMENT_METHOD.CREDIT_CARD:\n return alertsLocale.refundModal.modeAndTerm.refundMethods.partialCreditCardLabel;\n default:\n return alertsLocale.refundModal.modeAndTerm.refundMethods.partialCreditsLabel;\n }\n }\n };\n\n const ProductsList = () => (\n <>\n {customerRefund.items.map(item => (\n \n • \n {item.description}
\n \n ))}\n \n );\n\n const accordionList = () => (\n \n \n );\n\n const CanceledProducts = () => (\n <>\n {customerRefund.items && customerRefund.items.length > 1 ? (\n \n {alertsLocale.refundModal.canceledProduct.label} \n {alertsLocale.refundModal.canceledProduct.value(customerRefund.items && customerRefund.items[0].description)} \n \n )}\n \n );\n\n return (\n \n \n \n {alertsLocale.refundModal.title}\n \n\n \n \n \n {customerRefund.status === REFUND_STATUS.COMPLETED ? (\n \n \n\n {customerRefund.status === REFUND_STATUS.COMPLETED ? (\n {alertsLocale.refundModal.refundCompletedCardLabel(customerRefund.amount, paymentMethodLabel())} \n ) : (\n {alertsLocale.refundModal.refundPendingCardLabel(customerRefund.amount, paymentMethodLabel())} \n )}\n\n \n\n \n \n {alertsLocale.refundModal.canceledDate.label} \n {customerRefund.date_cancel} \n \n \n \n {alertsLocale.refundModal.canceledModality.label} \n {alertsLocale.refundModal.oneWeekCancel}} disableMobile={mobile}>\n {!mobile && (\n \n \n \n
\n )}\n \n \n {refundType} \n \n \n {alertsLocale.refundModal.refundValue.label} \n {alertsLocale.refundModal.refundValue.value(customerRefund.amount)} \n \n \n\n \n {alertsLocale.refundModal.modeAndTerm.title} \n {methodChosenLabel()} \n \n \n \n {!mobile && (\n \n \n )}\n \n \n );\n};\n\nexport default withI18n()((RefundAlertsModal));\n","import { collect } from '@/analytics';\n\nconst EVENT = {\n NAME: 'gaEvent',\n CATEGORY: {\n CLOUDFLARE: 'Cloudflare',\n },\n ACTION: {\n MY_ALERTS: 'Gatilho_meus_avisos',\n BOTTOM_BANNER: 'Gatilho_Bottom_Banner',\n BANNER_SITES: 'Gatilho_Banner_Sites',\n SITES_BUTTON: 'Botão_Sites',\n HOSTINGS_BUTTON: 'Botão_Hospedagens',\n MANAGE_CF_SCREEN: 'Tela_gerenciar_CF',\n CF_FEATURES_SCREEN: 'Tela_Features_CF',\n },\n};\n\nconst cloudflareAlertCta = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.MY_ALERTS,\n gaEventLabel: 'Clique_Desempenho_de_Sites',\n});\n\nconst bottomBannerCta = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.BOTTOM_BANNER,\n gaEventLabel: 'Clique_Desempenho_de_Sites',\n});\n\nconst sitesBannerCta = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.BANNER_SITES,\n gaEventLabel: 'Clique_Conheça',\n});\n\nconst modalCta = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.BANNER_SITES,\n gaEventLabel: 'Clique_Desempenho_de_Sites_Modal',\n});\n\nconst modalClose = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.BANNER_SITES,\n gaEventLabel: 'Fechar_Modal',\n});\n\nconst sitesButton = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.SITES_BUTTON,\n gaEventLabel: 'Clique_Desempenho_de_Sites',\n});\n\nconst hostingsButton = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.HOSTINGS_BUTTON,\n gaEventLabel: 'Clique_Desempenho_de_Sites',\n});\n\nconst activateHgDomainToggle = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.MANAGE_CF_SCREEN,\n gaEventLabel: 'Toggle_Ativar_Dominio_HG',\n});\n\nconst deactivateHgDomainToggle = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.MANAGE_CF_SCREEN,\n gaEventLabel: 'Toggle_Desativar_Dominio_HG',\n});\n\nconst activateExternalDomainToggle = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.MANAGE_CF_SCREEN,\n gaEventLabel: 'Toggle_Ativar_Dominio_Externo',\n});\n\nconst deactivateExternalDomainToggle = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.MANAGE_CF_SCREEN,\n gaEventLabel: 'Toggle_Desativar_Dominio_Externo',\n});\n\nconst updateStatusCta = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.MANAGE_CF_SCREEN,\n gaEventLabel: 'Clique_Atualizar_Status',\n});\n\nconst manageCta = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.MANAGE_CF_SCREEN,\n gaEventLabel: 'Clique_Gerenciar',\n});\n\nconst cleanCacheCta = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.CF_FEATURES_SCREEN,\n gaEventLabel: 'Clique_Limpar_Cache',\n});\n\nconst activateDevModeToggle = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.CF_FEATURES_SCREEN,\n gaEventLabel: 'Ativar_Dev_Mode',\n});\n\nconst deactivateDevModeToggle = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.CF_FEATURES_SCREEN,\n gaEventLabel: 'Desativar_Dev_Mode',\n});\n\nconst activateUnderAttackToggle = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.CF_FEATURES_SCREEN,\n gaEventLabel: 'Ativar_Modo_Sob_Ataque',\n});\n\nconst deactivateUnderAttackToggle = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.CF_FEATURES_SCREEN,\n gaEventLabel: 'Desativar_Modo_Sob_Ataque',\n});\n\nconst activateAlwaysOnlineToggle = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.CF_FEATURES_SCREEN,\n gaEventLabel: 'Ativar_Always_Online',\n});\n\nconst deactivateAlwaysOnlineToggle = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.CLOUDFLARE,\n gaEventAction: EVENT.ACTION.CF_FEATURES_SCREEN,\n gaEventLabel: 'Desativar_Always_Online',\n});\n\nconst analytics = {\n cloudflareAlertCta,\n bottomBannerCta,\n sitesBannerCta,\n modalCta,\n modalClose,\n sitesButton,\n hostingsButton,\n activateHgDomainToggle,\n deactivateHgDomainToggle,\n activateExternalDomainToggle,\n deactivateExternalDomainToggle,\n updateStatusCta,\n manageCta,\n cleanCacheCta,\n activateDevModeToggle,\n deactivateDevModeToggle,\n activateUnderAttackToggle,\n deactivateUnderAttackToggle,\n activateAlwaysOnlineToggle,\n deactivateAlwaysOnlineToggle,\n};\n\nexport default analytics;\n","import React, {\n useState, useEffect, useRef, useMemo,\n} from 'react';\nimport {\n Button, IconFilledInfo, Tooltip, IconBell, IconClose,\n} from 'gatorcomponents';\nimport * as Styles from './MyAlerts.styles';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { alertsActions, productsActions } from '@/redux/modules';\nimport NewAlerts from '@/components/Domain/NewAlerts';\nimport ModalDomainDnsPropagationAlert from '@/components/Domain/ModalDomainDnsPropagationAlert';\nimport ModalDomainNotContracted from '@/components/Domain/ModalDomainNotContracted';\nimport ModalDomainNotConfigured from '@/components/Domain/ModalDomainNotConfigured';\nimport ModalDomainInPropagation from '@/components/Domain/ModalDomainInPropagation';\nimport RefundModal from '@/components/Domain/RefundAlertsModal';\nimport { DuplicateOrdersModal } from '@/components/billing/components/DuplicateOrdersModal';\nimport { alertsAnalytics } from '@/analytics/alerts';\nimport { Modal } from '@/pages/common';\nimport { locale } from '@/utils/locale';\nimport { useHistory } from 'react-router';\nimport {\n XRAY_ENABLED_DISCOUNT_OFFER_BANNER,\n XRAY_DIAGNOSTIC_ALERT_CREDIT_CUSTOMER,\n} from '@/config/GrowthBook/constants';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport {\n ALERT_TYPES, BACKUP_GA, BACKUP_STATUS, PENDING_ORDER_GA, SSL_GA, SSL_STATUS,\n} from './MyAlerts.types';\nimport { billingAnalytics } from '@/analytics';\nimport { cloudflareAnalytics } from '@/analytics/cloudflare';\n\nconst TABS = {\n ALL: 'all',\n TICKETS: 'tickets',\n};\n\nconst MyAlerts = ({\n label,\n titleLabel = 'Meus Avisos',\n allNotificationsLabel,\n seeMoreLabel,\n alertsTooltipLabel,\n noNotificationsLabel,\n isMobile,\n ticketNotificationsLabel,\n}) => {\n const [showModalDnsPropagationAlert, setShowModalDnsPropagationAlert] = useState(false);\n const [showModalDomainNotContracted, setShowModalDomainNotContracted] = useState(false);\n const [showModalDomainNotConfigured, setShowModalDomainNotConfigured] = useState(false);\n const [showModalDomainInPropagation, setShowModalDomainInPropagation] = useState(false);\n const [showDuplicateOrdersModal, setShowDuplicateOrdersModal] = useState(false);\n const [showRefundModal, setShowRefundModal] = useState(false);\n const [GAsCategoriesCollected, setGAsCategoriesCollected] = useState([]);\n const [renderAlertsAmount, setRenderAlertsAmount] = useState(3);\n const [activeTab, setActiveTab] = useState(TABS.ALL);\n const [alertsArray, setAlertsArray] = useState([]);\n const [refundToShowOnModal, setRefundToShowOnModal] = useState({});\n\n const visible = useSelector(state => state.products.alertsVisibility);\n const diagnostic = useSelector(state => state.preChat);\n const { diagnosticAlerts, ticketsAlerts } = useSelector(state => state.alertsV2);\n const enabledDiscountOfferBanner = useFeatureIsOn(XRAY_ENABLED_DISCOUNT_OFFER_BANNER);\n const enabledAlertCreditRefund = useFeatureIsOn(XRAY_DIAGNOSTIC_ALERT_CREDIT_CUSTOMER);\n\n const menuRef = useRef(null);\n const dispatch = useDispatch();\n const hasModalOpen = showModalDnsPropagationAlert || showModalDomainNotContracted || showModalDomainNotConfigured;\n const history = useHistory();\n\n const domainInPropagation = diagnostic.domainsPropagation && diagnostic.domainsPropagation.filter(propagation => propagation.propagation_status === 'in_progress');\n const tos = useMemo(() => (diagnosticAlerts && diagnosticAlerts.filter(tosTicket => tosTicket.type === ALERT_TYPES.TOS)) || [], [diagnosticAlerts]);\n\n const tabAlert = useMemo(() => ({\n all: [...alertsArray],\n tickets: [...tos],\n }), [alertsArray, tos]);\n\n const alertsToRender = isMobile ? tabAlert[activeTab] : tabAlert[activeTab].slice(0, renderAlertsAmount);\n const renderEmpty = alertsToRender.length === 0;\n\n const setVisible = (isVisible) => {\n dispatch(productsActions.myAlerts.setVisibility(isVisible));\n };\n\n const handleShowModalDnsPropagationAlert = () => {\n setShowModalDnsPropagationAlert(!showModalDnsPropagationAlert);\n };\n\n const handleShowModalDomainNotContracted = () => {\n setShowModalDomainNotContracted(!showModalDomainNotContracted);\n };\n\n const handleShowModalDomainNotConfigured = () => {\n setShowModalDomainNotConfigured(!showModalDomainNotConfigured);\n };\n\n const handleShowModalDomainInPropagation = () => {\n setShowModalDomainInPropagation(!showModalDomainInPropagation);\n setVisible(!visible);\n };\n\n const handleShowDuplicateOrdersModal = (open) => {\n setShowDuplicateOrdersModal(!showDuplicateOrdersModal);\n\n if (open) {\n alertsAnalytics.duplicateOrderClick();\n }\n };\n\n const handleRedirectToSubscriptionAnalysis = (productId, productType) => {\n const url = `${locale('routes.subscriptions')}${locale('routes.manageSubscription')}/${productId}/${productType}`;\n history.push(url);\n setVisible(!visible);\n };\n\n const handleShowRefundModal = (refund) => {\n setShowRefundModal(!showRefundModal);\n setVisible(!visible);\n setRefundToShowOnModal(refund);\n };\n\n const handleRedirectToBackupScreen = (hostingId) => {\n history.push(`${locale('routes.products')}${locale('routes.productdetail')}/${hostingId}${locale('routes.backup')}`);\n };\n\n const handleRedirectToCloudflare = (hostingId) => {\n cloudflareAnalytics.cloudflareAlertCta();\n history.push(`${locale('routes.products')}${locale('routes.cloudflare')}/${hostingId}`);\n setVisible(!visible);\n };\n\n const handleRedirectToSubscriptionManager = (alertIndex) => {\n alertsAnalytics.redirectToSubscriptionManager(alertsToRender[alertIndex].daysToDue, alertsToRender[alertIndex].discountEnable);\n const url = `${locale('routes.subscriptions')}${locale('routes.manageSubscription')}/${alertsToRender[alertIndex].toDueSubscriptionId}/${alertsToRender[alertIndex].productType}?modal=true`;\n setVisible(!visible);\n history && history.push(url);\n };\n\n const handleOnSeeMore = () => {\n const newAlertAmount = renderAlertsAmount + 3;\n\n setRenderAlertsAmount(newAlertAmount);\n };\n\n const handleClickOnAlertDomainToPoint = (id) => {\n history.push(`${locale('routes.domains')}${locale('routes.dnsWizard')}/${id}`);\n dispatch(alertsActions.set.clickOnAlertDomainToPoint(true));\n };\n\n const setAlertAsRead = (index, alertOrigin = 'diagnostic') => {\n setVisible(false);\n switch (alertOrigin) {\n case 'diagnostic': {\n const alertToUpdate = diagnosticAlerts[index];\n alertToUpdate.isNew = false;\n }\n break;\n case 'tickets': {\n const alertToUpdate = ticketsAlerts.find(ticket => ticket.id === index);\n alertToUpdate.isNew = false;\n }\n break;\n default:\n }\n };\n\n const handleClick = () => {\n if (!visible) {\n alertsAnalytics.viewAlerts();\n }\n setVisible(!visible);\n };\n\n useEffect(() => {\n function handleClickOutside(event) {\n if (visible === true && !hasModalOpen && menuRef.current && !menuRef.current.contains(event.target)) {\n setVisible(false);\n }\n }\n\n document.addEventListener('click', handleClickOutside);\n return () => document.removeEventListener('click', handleClickOutside);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [menuRef, hasModalOpen, visible]);\n\n useEffect(() => {\n if (!visible) {\n setRenderAlertsAmount(3);\n }\n if (isMobile && visible) {\n alertsAnalytics.viewAlerts();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [visible, isMobile]);\n\n useEffect(() => {\n if (visible) {\n const GAsToDispatch = [];\n const alreadyCollectedGA = alertGAType => GAsCategoriesCollected.some(category => category === alertGAType);\n const hasBackups = hostingId => diagnostic.backups && diagnostic.backups.some(backup => backup.hosting_id === hostingId);\n\n alertsToRender.forEach((alert) => {\n switch (alert.type) {\n case ALERT_TYPES.SSL:\n if (!alreadyCollectedGA(SSL_GA.ACTIVE) && alert.status === SSL_STATUS.ACTIVE) {\n GAsToDispatch.push(SSL_GA.ACTIVE);\n }\n if (!alreadyCollectedGA(SSL_GA.ACTIVATION_FAILED) && alert.status === SSL_STATUS.ACTIVATION_FAILED) {\n GAsToDispatch.push(SSL_GA.ACTIVATION_FAILED);\n }\n if (!alreadyCollectedGA(SSL_GA.IN_PROGRESS) && alert.status === SSL_STATUS.IN_PROGRESS) {\n GAsToDispatch.push(SSL_GA.IN_PROGRESS);\n }\n break;\n case ALERT_TYPES.INVOICES:\n if (!alreadyCollectedGA(ALERT_TYPES.INVOICES)) {\n GAsToDispatch.push(alert.type);\n }\n break;\n case ALERT_TYPES.DOMAIN_NOT_CONTRACTED:\n if (!alreadyCollectedGA(ALERT_TYPES.DOMAIN_NOT_CONTRACTED)) {\n GAsToDispatch.push(alert.type);\n }\n break;\n case ALERT_TYPES.DOMAIN_IN_PROGRESS:\n if (!alreadyCollectedGA(ALERT_TYPES.DOMAIN_IN_PROGRESS)) {\n GAsToDispatch.push(alert.type);\n }\n break;\n case ALERT_TYPES.DOMAIN_NOT_CONFIGURED:\n if (!alreadyCollectedGA(ALERT_TYPES.DOMAIN_NOT_CONFIGURED)) {\n GAsToDispatch.push(alert.type);\n }\n break;\n case ALERT_TYPES.BACKUP:\n if (!alreadyCollectedGA(BACKUP_GA.SUCCESS) && alert.backup_type === BACKUP_STATUS.REQUESTED && alert.days_since_last <= 7) {\n GAsToDispatch.push(BACKUP_GA.SUCCESS);\n break;\n }\n if (!alreadyCollectedGA(BACKUP_GA.SEVEN_DAYS) && alert.backup_type === BACKUP_STATUS.REQUESTED && alert.days_since_last > 7 && alert.days_since_last <= 15) {\n GAsToDispatch.push(BACKUP_GA.SEVEN_DAYS);\n break;\n }\n if (!alreadyCollectedGA(BACKUP_GA.FIFTEEN_DAYS) && alert.backup_type === BACKUP_STATUS.REQUESTED && alert.days_since_last > 15 && alert.days_since_last <= 30) {\n GAsToDispatch.push(BACKUP_GA.FIFTEEN_DAYS);\n break;\n }\n if (!alreadyCollectedGA(BACKUP_GA.THIRTY_DAYS) && alert.backup_type === BACKUP_STATUS.REQUESTED && alert.days_since_last > 30) {\n GAsToDispatch.push(BACKUP_GA.THIRTY_DAYS);\n break;\n }\n if (!alreadyCollectedGA(BACKUP_GA.WITHOUT) && alert && !hasBackups(alert.hosting_id)) {\n GAsToDispatch.push(BACKUP_GA.WITHOUT);\n }\n break;\n case ALERT_TYPES.DUPLICATE_ORDERS:\n if (!alreadyCollectedGA(ALERT_TYPES.DUPLICATE_ORDERS)) {\n GAsToDispatch.push(ALERT_TYPES.DUPLICATE_ORDERS);\n }\n break;\n case ALERT_TYPES.TICKET_NEW:\n if (!alreadyCollectedGA(ALERT_TYPES.TICKET_NEW)) {\n GAsToDispatch.push(alert.type);\n }\n break;\n case ALERT_TYPES.TICKET_OPEN:\n if (!alreadyCollectedGA(ALERT_TYPES.TICKET_OPEN)) {\n GAsToDispatch.push(alert.type);\n }\n break;\n case ALERT_TYPES.TICKET_PENDING:\n if (!alreadyCollectedGA(ALERT_TYPES.TICKET_PENDING)) {\n GAsToDispatch.push(alert.type);\n }\n break;\n case ALERT_TYPES.TICKET_SOLVED:\n if (!alreadyCollectedGA(ALERT_TYPES.TICKET_SOLVED)) {\n GAsToDispatch.push(alert.type);\n }\n break;\n case ALERT_TYPES.PENDING_ORDER:\n if (!alreadyCollectedGA(PENDING_ORDER_GA.CANCELLED) && alert.orderStatus === 'cancelled') {\n GAsToDispatch.push(PENDING_ORDER_GA.CANCELLED);\n }\n if (!alreadyCollectedGA(PENDING_ORDER_GA.PENDING_ANALYSIS) && alert.orderStatus === 'pending_analysis') {\n GAsToDispatch.push(PENDING_ORDER_GA.PENDING_ANALYSIS);\n }\n break;\n default:\n break;\n }\n });\n\n const notDuplicatedGAsToDispatch = [...new Set(GAsToDispatch)];\n\n if (notDuplicatedGAsToDispatch.length) {\n const onlyNewGAs = notDuplicatedGAsToDispatch.filter(GA => !alreadyCollectedGA(GA));\n setGAsCategoriesCollected([...GAsCategoriesCollected, ...onlyNewGAs]);\n\n onlyNewGAs.forEach((analyticType) => {\n switch (analyticType) {\n case ALERT_TYPES.INVOICES:\n alertsAnalytics.viewInvoicesAlert();\n billingAnalytics.invoicesAlertDisplayed();\n break;\n case ALERT_TYPES.DOMAIN_NOT_CONTRACTED:\n alertsAnalytics.viewContractDomainAlert();\n break;\n case ALERT_TYPES.DOMAIN_IN_PROGRESS:\n alertsAnalytics.viewPropagationAlert();\n break;\n case ALERT_TYPES.DOMAIN_NOT_CONFIGURED:\n alertsAnalytics.viewSetupDomainAlert();\n break;\n case BACKUP_GA.SUCCESS:\n alertsAnalytics.backupSuccess();\n break;\n case BACKUP_GA.SEVEN_DAYS:\n alertsAnalytics.backupSevenDays();\n break;\n case BACKUP_GA.FIFTEEN_DAYS:\n alertsAnalytics.backupFifteenDays();\n break;\n case BACKUP_GA.THIRTY_DAYS:\n alertsAnalytics.backupThirtyDays();\n break;\n case BACKUP_GA.WITHOUT:\n alertsAnalytics.withoutBackup();\n break;\n case ALERT_TYPES.DUPLICATE_ORDERS:\n alertsAnalytics.duplicateOrder();\n break;\n case PENDING_ORDER_GA.CANCELLED:\n alertsAnalytics.canceledOrder();\n break;\n case PENDING_ORDER_GA.PENDING_ANALYSIS:\n alertsAnalytics.analyzingOrder();\n break;\n case SSL_GA.ACTIVE:\n alertsAnalytics.sslActiveDisplayed();\n break;\n case SSL_GA.ACTIVATION_FAILED:\n alertsAnalytics.sslErrorDisplayed();\n break;\n case SSL_GA.IN_PROGRESS:\n alertsAnalytics.sslInProgressDisplayed();\n break;\n default:\n }\n });\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [visible, alertsToRender]);\n\n\n useEffect(() => {\n setAlertsArray([...diagnosticAlerts]);\n }, [diagnosticAlerts]);\n\n const notificationItems = () => (\n <>\n {alertsToRender.map((alert, index) => (\n \n \n ))}\n \n );\n\n const changeActiveTab = (tab) => {\n const alertsRenderInitialValue = 3;\n\n setActiveTab(tab);\n setRenderAlertsAmount(alertsRenderInitialValue);\n };\n\n const renderAlerts = () => (\n <>\n \n \n \n {titleLabel} \n {!isMobile && (\n \n \n )}\n \n \n \n changeActiveTab(TABS.ALL)}\n testId={`tab-${TABS.ALL}-button`}\n />\n changeActiveTab(TABS.TICKETS)}\n testId={`tab-${TABS.TICKETS}-button`}\n />\n \n \n {renderEmpty ? (\n \n {noNotificationsLabel}\n \n ) : (\n <>\n {notificationItems()}\n \n )}\n \n );\n\n return (\n <>\n {isMobile ? (\n <>\n {visible && (\n \n \n setVisible(false)}>\n \n {renderAlerts()}\n \n \n )}\n \n ) : (\n \n {(!!alertsArray.some(alert => alert.isNew === true)) && (\n \n {alertsArray.filter(alert => alert.isNew === true).length}\n \n )}\n \n {renderAlerts()}\n = tabAlert[activeTab].length}>\n \n \n )}\n \n )}\n {showModalDnsPropagationAlert && setVisible(true)} />}\n \n );\n};\n\nexport default MyAlerts;\n","import { useDispatch } from 'react-redux';\nimport { preChatActions } from '@/redux/modules';\nimport {\n CHARLIE_CLOUDFLARE_ALERT,\n CHARLIE_MYALERT_SSL,\n CHARLIE_TOKEN_REFRESH,\n XRAY_ENABLED_SUBSCRIPTIONS_IN_DIAGNOSTIC,\n XRAY_DIAGNOSTIC_ALERT_CREDIT_CUSTOMER,\n} from '@/config/GrowthBook/constants';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { useState } from 'react';\nimport { differenceInSeconds } from 'date-fns';\nimport logger from '@/utils/logger';\n\nconst useDiagnostic = () => {\n const [lastDispatch, setLastDispath] = useState(null);\n const dispatch = useDispatch();\n const enabledSubscriptionInDiagnostic = useFeatureIsOn(XRAY_ENABLED_SUBSCRIPTIONS_IN_DIAGNOSTIC);\n const waitToken = useFeatureIsOn(CHARLIE_TOKEN_REFRESH);\n const enableSslAlert = useFeatureIsOn(CHARLIE_MYALERT_SSL);\n const enableAlertCreditRefund = useFeatureIsOn(XRAY_DIAGNOSTIC_ALERT_CREDIT_CUSTOMER);\n const enabledCloudflare = useFeatureIsOn(CHARLIE_CLOUDFLARE_ALERT);\n\n const requestDiagnostic = (location) => {\n let dateDiff = null;\n if (lastDispatch) {\n dateDiff = differenceInSeconds(new Date(), lastDispatch);\n }\n\n if (dateDiff && dateDiff <= 10) {\n logger.info(`tentativa de requisição de diagnostic em menos de 10s: '${location}'`);\n }\n\n if (!dateDiff || dateDiff > 10) {\n setLastDispath(new Date());\n dispatch(\n preChatActions.diagnostic.get({\n enabledSubscriptionInDiagnostic,\n enabledCloudflare,\n waitToken,\n enableSslAlert,\n enableAlertCreditRefund,\n enabledCloudflareDelayedAlert: enabledCloudflare,\n }),\n );\n }\n };\n\n return {\n requestDiagnostic,\n };\n};\n\nexport default useDiagnostic;\n","/* eslint-disable array-callback-return */\nimport React, { useState, useEffect, useCallback } from 'react';\nimport { Modal } from '@/pages/common';\nimport {\n Accordion, Button, Tag, IconCheck, IconClock, IconDanger, Select,\n} from 'gatorcomponents';\nimport { useResize } from '@/hooks/useResize';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { ANALYTICS, MODAL_STEP, ORDER_STATUS } from './DuplicateOrdersModal.types';\nimport * as Styles from './DuplicateOrdersModal.styles';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { format } from 'date-fns';\nimport { locale } from '@/utils/locale';\nimport { useHistory } from 'react-router';\nimport {\n invoicesActions, productsActions, sitesActions,\n} from '@/redux/modules';\nimport { invoicesAnalytics } from '@/analytics';\nimport { loadInvoices } from '@/redux/actions/invoices';\nimport { useDiagnostic } from '@/components/Layout/Menu/MyAlerts';\n\nconst DuplicateOrdersModal = ({\n hideModal,\n showMyAlerts,\n defaultModalStep = MODAL_STEP.DEFAULT,\n defaultChosenOrder,\n defaultAccordionsOpened,\n}) => {\n const { duplicateOrders } = useSelector(state => state.preChat);\n const invoicesState = useSelector(state => state.invoicesV2);\n const [modalStep, setModalStep] = useState((duplicateOrders && duplicateOrders.length > 1) ? MODAL_STEP.DUPLICATED_ORDER_CHOICE : defaultModalStep);\n const [chosenOrder, setChosenOrder] = useState(defaultChosenOrder);\n const [optionSelected, setOptionSelected] = useState(undefined);\n const [accordionsOpened, setAccordionsOpened] = useState(defaultAccordionsOpened);\n const { billing: billingLocale } = useLocale();\n const history = useHistory();\n const dispatch = useDispatch();\n const { requestDiagnostic } = useDiagnostic();\n\n const windowRect = useResize();\n const { width } = windowRect;\n const mobile = width < 960;\n\n const orderGroupSelected = (duplicateOrders && duplicateOrders.length === 1) ? duplicateOrders[0] : optionSelected && duplicateOrders[optionSelected.value];\n\n const handleHideModal = () => {\n hideModal && hideModal();\n };\n\n const handleClose = (analyticsToDispatch) => {\n hideModal && hideModal();\n showMyAlerts && showMyAlerts();\n\n switch (analyticsToDispatch) {\n case (ANALYTICS.CLOSE_UNDERSTAND):\n invoicesAnalytics.duplicateOrderClickOkUnderstand();\n break;\n default:\n }\n };\n\n const handleOnClickSelect = (option) => {\n setOptionSelected(option);\n };\n\n const handleOnClickAccordion = (index) => {\n const newAccordionsOpened = [...accordionsOpened];\n\n newAccordionsOpened.forEach((accordion, i) => {\n if (i === index) {\n // eslint-disable-next-line no-param-reassign\n accordion.opened = !(accordion.opened);\n } else {\n // eslint-disable-next-line no-param-reassign\n accordion.opened = false;\n }\n });\n\n setAccordionsOpened(newAccordionsOpened);\n };\n\n const handleSeeInvoices = (invoiceId, successCancel = false, seeOrderFeedbacks = false) => {\n (successCancel || seeOrderFeedbacks) ? invoicesAnalytics.duplicateOrderModalSeeOrder() : invoicesAnalytics.duplicateOrderSeeOrder();\n const url = `${locale('routes.invoices')}${successCancel ? locale('routes.cancelled') : locale('routes.unpaid')}/${invoiceId}`;\n handleHideModal();\n history && history.push(url);\n };\n\n const cancelOrder = (order, tryAgain = false) => {\n tryAgain ? invoicesAnalytics.duplicateOrderModalTryAgain() : invoicesAnalytics.duplicateOrderCancelOrder();\n setChosenOrder(order);\n\n const reloadData = () => {\n dispatch(productsActions.products.request({ history: null }));\n dispatch(sitesActions.sites.request());\n requestDiagnostic('duplicatedOrdersModal');\n const noCache = false;\n dispatch(loadInvoices('Cancelled', noCache));\n dispatch(loadInvoices('Paid', noCache));\n dispatch(loadInvoices('Unpaid', noCache));\n };\n\n reloadData();\n dispatch(invoicesActions.cancelOrder.request({ orderId: order.id, reloadData }));\n if (modalStep === MODAL_STEP.DEFAULT) {\n setModalStep(MODAL_STEP.LOADING_SECOND_SCREEN);\n }\n };\n\n const verifyIfDuplicatedHostings = (duplicateOrderGroup) => {\n const uniqueHostings = new Set();\n let hasDuplicatedHostings = false;\n\n duplicateOrderGroup.map((order => order.hosting_items && order.hosting_items.map((hostingItem) => {\n const key = `${hostingItem.product_name} - ${hostingItem.domain}`;\n if (uniqueHostings.has(key)) {\n hasDuplicatedHostings = true;\n return;\n }\n uniqueHostings.add(key);\n })));\n return hasDuplicatedHostings;\n };\n\n const selectOrderOptions = (duplicateOrdersList) => {\n const options = [];\n\n duplicateOrdersList.map((orderGroup, index) => {\n const isDuplicatedHostings = verifyIfDuplicatedHostings(orderGroup);\n\n if (isDuplicatedHostings) {\n options.push({\n value: index,\n label: billingLocale.duplicateOrdersModal.planNameAccordion(orderGroup[0].hosting_items[0].product_name, orderGroup[0].hosting_items[0].domain),\n });\n }\n if (!isDuplicatedHostings && orderGroup[0].domain_items) {\n options.push({\n value: index,\n label: billingLocale.duplicateOrdersModal.domainNameAccordion(orderGroup[0].domain_items[0].domain),\n });\n }\n });\n\n return options;\n };\n\n useEffect(() => {\n if ((modalStep === MODAL_STEP.CANCELLATION_FAILURE || modalStep === MODAL_STEP.LOADING_SECOND_SCREEN) && !invoicesState.orderCancelLoading && invoicesState.orderCancelStatus) {\n if (invoicesState.orderCancelStatus === 'canceled') {\n invoicesAnalytics.duplicateOrderPositiveFeedback();\n setModalStep(MODAL_STEP.CANCELLATION_SUCCESS);\n }\n if (invoicesState.orderCancelStatus === 'cancelation_fail') {\n invoicesAnalytics.duplicateOrderFailFeedback();\n setModalStep(MODAL_STEP.CANCELLATION_FAILURE);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [invoicesState.orderCancelStatus, invoicesState.orderCancelLoading]);\n\n useEffect(() => {\n invoicesAnalytics.duplicateOrderModalShow();\n }, []);\n\n const renderAccordion = (index, order, duplicatedHosting = false) => {\n const orderDate = format(new Date(order.invoice_date), 'dd/MM/yyyy');\n const orderHour = format(new Date(order.invoice_date), 'HH:mm');\n\n const mountTag = (\n \n {order.invoice_status === ORDER_STATUS.PAID ? (\n \n );\n\n const accordionTitle = (\n \n \n \n {order.invoice_status === ORDER_STATUS.PAID ? (\n \n {duplicatedHosting && order.hosting_items\n ? billingLocale.duplicateOrdersModal.planNameAccordion(order.hosting_items[0].product_name, order.hosting_items[0].domain)\n : order.domain_items && billingLocale.duplicateOrdersModal.domainNameAccordion(order.domain_items[0].domain)\n }\n \n \n {!mobile && mountTag}\n \n \n {order.invoice_status === ORDER_STATUS.PAID && billingLocale.duplicateOrdersModal.invoicePayedDescription(order.invoice_id, orderDate, orderHour)}\n {order.invoice_status !== ORDER_STATUS.PAID && billingLocale.duplicateOrdersModal.invoicePendingDescription(order.invoice_id, orderDate, orderHour)}\n \n {mobile && mountTag}\n \n );\n\n const accordionItem = () => (\n <>\n {order.invoice_status !== ORDER_STATUS.PAID && (\n <>\n \n {billingLocale.duplicateOrdersModal.invoicePendingText}\n \n \n handleSeeInvoices(order.invoice_id)} />\n \n {invoicesState.orderCancelLoading ? (\n cancelOrder(order)} width=\"full\" />\n )}\n \n \n \n )}\n\n {order.invoice_status === ORDER_STATUS.PAID && (\n \n {billingLocale.duplicateOrdersModal.invoicePayedText}\n \n )}\n \n );\n\n if (order && order.invoice_status === ORDER_STATUS.PAID) {\n return (\n handleOnClickAccordion(index)}\n />\n );\n }\n if (order && order.invoice_status !== ORDER_STATUS.PAID) {\n return (\n handleOnClickAccordion(index)}\n />\n );\n }\n };\n\n const controllAccordionsOpened = useCallback(() => {\n const firstPendingOrder = orderGroupSelected && orderGroupSelected.find(order => order.invoice_status !== ORDER_STATUS.PAID);\n const accordionsOpenedList = [];\n orderGroupSelected && orderGroupSelected.map(order => accordionsOpenedList.push({ opened: firstPendingOrder.id === order.id }));\n\n return accordionsOpenedList;\n }, [orderGroupSelected]);\n\n useEffect(() => {\n const accordionsOpened = controllAccordionsOpened();\n setAccordionsOpened(accordionsOpened);\n }, [controllAccordionsOpened]);\n\n const resultCancellationAlert = (cancellationStatus, domain, invoiceId, date, plan = null) => {\n const orderDate = format(new Date(date), 'dd/MM/yyyy');\n const orderHour = format(new Date(date), 'HH:mm');\n\n return (\n \n \n {cancellationStatus === 'success' ? (\n \n \n {cancellationStatus === 'success' ? (\n {billingLocale.duplicateOrdersModal.successAlertLabel(domain, invoiceId, orderDate, orderHour, plan)} \n ) : (\n {billingLocale.duplicateOrdersModal.failureAlertLabel(domain, invoiceId, orderDate, orderHour, plan)} \n )}\n \n \n );\n };\n\n return (\n \n \n \n {modalStep === MODAL_STEP.DUPLICATED_ORDER_CHOICE && (\n <>\n \n {billingLocale.duplicateOrdersModal.modalTitle} \n \n \n \n {billingLocale.duplicateOrdersModal.choiceOrderDescription}\n \n \n \n \n \n setModalStep(MODAL_STEP.DEFAULT)}\n />\n \n \n )}\n\n {(modalStep === MODAL_STEP.DEFAULT || modalStep === MODAL_STEP.LOADING_SECOND_SCREEN) && (\n <>\n \n {billingLocale.duplicateOrdersModal.modalTitle} \n \n \n {!mobile ? billingLocale.duplicateOrdersModal.modalDescription : billingLocale.duplicateOrdersModal.modalDescriptionMobile}\n \n {duplicateOrders.length && orderGroupSelected.map((order, index) => renderAccordion(index, order, verifyIfDuplicatedHostings(orderGroupSelected)))}\n \n )}\n\n {modalStep === MODAL_STEP.CANCELLATION_SUCCESS && (\n <>\n \n {billingLocale.duplicateOrdersModal.successTitle} \n \n {chosenOrder.hosting_items && chosenOrder.hosting_items.length\n ? resultCancellationAlert('success', chosenOrder.hosting_items[0].domain, chosenOrder.invoice_id, chosenOrder.invoice_date, chosenOrder.hosting_items[0].product_name)\n : resultCancellationAlert('success', chosenOrder.domain_items[0].domain, chosenOrder.invoice_id, chosenOrder.invoice_date)\n }\n \n {mobile ? (\n <>\n handleClose(ANALYTICS.CLOSE_UNDERSTAND)} />\n handleSeeInvoices(chosenOrder.invoice_id, true)} />\n \n ) : (\n <>\n handleSeeInvoices(chosenOrder.invoice_id, true)} />\n handleClose(ANALYTICS.CLOSE_UNDERSTAND)} size=\"large\" />\n \n )}\n\n \n \n )}\n\n {modalStep === MODAL_STEP.CANCELLATION_FAILURE && (\n <>\n \n {billingLocale.duplicateOrdersModal.failureTitle} \n \n {chosenOrder.hosting_items && chosenOrder.hosting_items.length\n ? resultCancellationAlert('failure', chosenOrder.hosting_items[0].domain, chosenOrder.invoice_id, chosenOrder.invoice_date, chosenOrder.hosting_items[0].product_name)\n : resultCancellationAlert('failure', chosenOrder.domain_items[0].domain, chosenOrder.invoice_id, chosenOrder.invoice_date)\n }\n \n {mobile ? (\n <>\n \n {invoicesState.orderCancelLoading ? (\n cancelOrder(chosenOrder, true)} width=\"full\" />\n )}\n \n handleSeeInvoices(chosenOrder.invoice_id, false, true)} />\n \n ) : (\n <>\n handleSeeInvoices(chosenOrder.invoice_id, false, true)} />\n\n \n {invoicesState.orderCancelLoading ? (\n cancelOrder(chosenOrder, true)} size=\"large\" width=\"full\" />\n )}\n \n \n )}\n \n \n )}\n \n \n \n );\n};\n\nexport default DuplicateOrdersModal;\n","import styled, { css } from 'styled-components';\n\nexport const ModalWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n padding: 16px;\n `}\n`;\n\nexport const ModalTitle = styled.div`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n `}\n`;\n\nexport const TextContainer = styled.div`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xxs};\n margin-top: 24px;\n p {\n margin: 0;\n }\n `}\n`;\n\nexport const ButtonContainer = styled.div`\n display: flex;\n justify-content: center;\n margin-top: 32px;\n`;\n","import React from 'react';\nimport * as Styles from './TicketUpgradeVpsModal.styles';\nimport { Modal } from '@/pages/common';\nimport { useHistory } from 'react-router';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { preChatActions } from '@/redux/modules';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { preChatAnalytics } from '@/analytics/preChat';\nimport { Button } from 'gatorcomponents';\n\nconst TicketUpgradeVpsModal = () => {\n const history = useHistory();\n const dispatch = useDispatch();\n const preChatVpsUpgrade = useSelector(state => state.preChat.vpsUpgrade);\n const { ticket: ticketLocale, routes } = useLocale();\n\n const handleModalClose = () => {\n dispatch(preChatActions.vps.redirect(false));\n dispatch(preChatActions.vps.productId(null));\n dispatch(preChatActions.preChat.setShowPreChat(true));\n };\n\n const handleAcceptTermClick = () => {\n dispatch(preChatActions.vps.termsAccepted(true));\n dispatch(preChatActions.vps.redirect(false));\n history.push(`${routes.help}${routes.createTicket}`);\n preChatAnalytics.vpsUpgradeModal();\n };\n\n return preChatVpsUpgrade.redirect && (\n \n \n \n {ticketLocale.ticketUpgradeVpsModal.title}\n \n \n {ticketLocale.ticketUpgradeVpsModal.firstLabel()}\n \n \n {ticketLocale.ticketUpgradeVpsModal.secondLabel()}\n \n \n \n\n \n \n );\n};\n\nexport default TicketUpgradeVpsModal;\n","import React from 'react';\nimport logger from '../logger';\n\nclass ErrorBoundary extends React.Component {\n componentDidCatch(error, errorInfo) {\n const { componentName, errorCallback } = this.props;\n const boundaryError = { stack: error.stack, message: error.message, componentError: errorInfo };\n\n logger.error(`Error on Component ${componentName}`, boundaryError);\n\n errorCallback && errorCallback();\n }\n\n render() {\n const { children } = this.props;\n\n return children;\n }\n}\n\nconst withErrorBoundary = (Component, componentName, errorCallback) => {\n const wrapperComponent = props => (\n \n \n );\n\n return wrapperComponent;\n};\n\nexport default withErrorBoundary;\n","import { CALL_API } from '@/middleware/api';\nimport { TICKETS_URL, TICKETS_URL_V2, TICKET_TRANSFER_DOMAIN_URL } from '@/config/api';\nimport { queryString } from '@/utils/Application/queryString';\nimport {\n REQUEST_PENDING_TICKETS, REQUEST_CLOSED_TICKETS, REQUEST_ERROR_TICKETS,\n CLEAR_FILTER_PENDING_TICKETS, CLEAR_FILTER_CLOSED_TICKETS, RECEIVE_PENDING_TICKETS,\n RECEIVE_FILTERED_PENDING_TICKETS, RECEIVE_FILTERED_CLOSED_TICKETS, RECEIVE_CLOSED_TICKETS,\n TICKET_STATUS, FIRSTROW, SECONDROW, REQUEST_SAVE_TICKET_TRANSFER_DOMAIN,\n RECEIVE_SAVE_TICKET_TRANSFER_DOMAIN, ERROR_SAVE_TICKET_TRANSFER_DOMAIN,\n REQUEST_PENDING_TICKETS_V2, REQUEST_CLOSED_TICKETS_V2, RECEIVE_CLOSED_TICKETS_V2,\n RECEIVE_PENDING_TICKETS_V2, REQUEST_ERROR_TICKETS_V2,\n} from './actionsTypes';\nimport { ALERT_TYPES } from '@/components/Layout/Menu/MyAlerts/MyAlerts.types';\nimport { AlertsActionTypes } from '../modules/alerts/alerts.types';\nimport { COUNTRY } from '@/config';\nimport { CHARLIE_SEND_EXTRA_DATA_ON_LOAD_TICKETS } from '@/config/GrowthBook/constants';\n\nexport const requestPendingTickets = () => ({ type: REQUEST_PENDING_TICKETS });\nexport const requestPendingTicketsV2 = () => ({ type: REQUEST_PENDING_TICKETS_V2 });\n\nexport const requestClosedTickets = () => ({ type: REQUEST_CLOSED_TICKETS });\nexport const requestClosedTicketsV2 = () => ({ type: REQUEST_CLOSED_TICKETS_V2 });\n\nexport const requestErrorTickets = () => ({ type: REQUEST_ERROR_TICKETS });\nexport const requestErrorTicketsV2 = () => ({ type: REQUEST_ERROR_TICKETS_V2 });\n\nexport const clearFilterPendingTickets = () => ({ type: CLEAR_FILTER_PENDING_TICKETS });\n\nexport const clearFilterClosedTickets = () => ({ type: CLEAR_FILTER_CLOSED_TICKETS });\n\nexport const receivePendingTickets = (tickets, isToUpdateAlerts) => {\n if (isToUpdateAlerts) {\n let assembledTickets = [];\n if (tickets.length) {\n const alertStatus = {\n open: ALERT_TYPES.TICKET_OPEN,\n new: ALERT_TYPES.TICKET_NEW,\n solved: ALERT_TYPES.TICKET_SOLVED,\n pending: ALERT_TYPES.TICKET_PENDING,\n };\n\n assembledTickets = tickets.map(ticket => ({ ...ticket, isNew: true, type: alertStatus[ticket.status] }));\n }\n\n return ({\n type: AlertsActionTypes.SET_TICKETS_ALERTS,\n payload: assembledTickets,\n });\n }\n\n return ({\n type: RECEIVE_PENDING_TICKETS,\n tickets,\n });\n};\n\nexport const receivePendingTicketsV2 = (tickets, isToUpdateAlerts) => {\n if (isToUpdateAlerts) {\n let assembledTickets = [];\n if (tickets.length) {\n const alertStatus = {\n open: ALERT_TYPES.TICKET_OPEN,\n new: ALERT_TYPES.TICKET_NEW,\n solved: ALERT_TYPES.TICKET_SOLVED,\n pending: ALERT_TYPES.TICKET_PENDING,\n };\n\n assembledTickets = tickets.map(ticket => ({ ...ticket, isNew: true, type: alertStatus[ticket.status] }));\n }\n\n return ({\n type: AlertsActionTypes.SET_TICKETS_ALERTS,\n payload: assembledTickets,\n });\n }\n\n return ({\n type: RECEIVE_PENDING_TICKETS_V2,\n tickets,\n });\n};\n\n\nexport const receiveFilteredPendingTickets = tickets => ({\n type: RECEIVE_FILTERED_PENDING_TICKETS,\n tickets,\n});\n\nexport const receiveFilteredClosedTickets = tickets => ({\n type: RECEIVE_FILTERED_CLOSED_TICKETS,\n tickets,\n});\n\nexport const receiveClosedTickets = tickets => ({\n type: RECEIVE_CLOSED_TICKETS,\n tickets,\n});\n\nexport const receiveClosedTicketsV2 = tickets => ({\n type: RECEIVE_CLOSED_TICKETS_V2,\n tickets,\n});\n\nconst filterIncludesStrings = (ticketsReceived, search) => {\n const tickets = ticketsReceived.filter(\n item => item.id.toString().includes(search)\n || (item.subject && item.subject.toLowerCase().includes(search.toLowerCase())),\n );\n return tickets;\n};\n\nexport const filterPendingTickets = (status, search) => (dispatch, getState) => {\n let tickets = getState().tickets.bkpTickets.pending;\n\n if (status !== '') {\n switch (status) {\n case TICKET_STATUS.open:\n tickets = tickets.filter(\n item => item.status === TICKET_STATUS.open\n || item.status === TICKET_STATUS.new\n || item.status === TICKET_STATUS.pending,\n );\n break;\n case TICKET_STATUS.conclude:\n tickets = tickets.filter(item => item.status === TICKET_STATUS.solved);\n break;\n case TICKET_STATUS.hold:\n tickets = tickets.filter(item => item.status === TICKET_STATUS.hold);\n break;\n default:\n break;\n }\n }\n\n if (search !== '') {\n tickets = filterIncludesStrings(tickets, search);\n }\n\n return dispatch(receiveFilteredPendingTickets(tickets));\n};\n\nexport const filterClosedTickets = search => (dispatch, getState) => {\n let tickets = getState().tickets.bkpTickets.closed;\n\n if (search !== '') {\n tickets = filterIncludesStrings(tickets, search);\n }\n\n return dispatch(receiveFilteredClosedTickets(tickets));\n};\n\nexport const loadTickets = (status, userEmail, isToUpdateAlerts) => ({\n [CALL_API]: {\n authenticated: true,\n customHeaders: {\n email: userEmail,\n },\n endpoint: `${TICKETS_URL}?${queryString({ status })}`,\n method: 'GET',\n actionTypes: {\n request: status === FIRSTROW ? requestPendingTickets : requestClosedTickets,\n success: data => (status === FIRSTROW ? receivePendingTickets(data.data, isToUpdateAlerts) : receiveClosedTickets(data.data)),\n error: requestErrorTickets,\n },\n },\n});\n\nexport const loadTicketsV2 = (status, userEmail) => (dispatch, getState) => {\n const state = getState();\n\n let customHeaders = {\n email: userEmail,\n };\n\n if (state.common.toggles && state.common.toggles[CHARLIE_SEND_EXTRA_DATA_ON_LOAD_TICKETS]) {\n customHeaders = {\n email: userEmail,\n name: state.summary.name,\n 'x-external-id': `${COUNTRY}_${state.summary.id}`,\n };\n }\n\n return dispatch({\n [CALL_API]: {\n authenticated: true,\n customHeaders,\n endpoint: `${TICKETS_URL_V2}?${queryString({ status })}`,\n method: 'GET',\n actionTypes: {\n request: status === FIRSTROW ? requestPendingTicketsV2 : requestClosedTicketsV2,\n success: data => (status === FIRSTROW ? receivePendingTicketsV2(data.data) : receiveClosedTicketsV2(data.data)),\n error: requestErrorTickets,\n },\n },\n });\n};\n\nexport const loadPendingTickets = isToUpdateAlerts => (dispatch, getState) => dispatch(loadTickets(FIRSTROW, getState().summary.email, isToUpdateAlerts));\nexport const loadPendingTicketsV2 = () => (dispatch, getState) => dispatch(loadTicketsV2(FIRSTROW, getState().summary.email));\n\nexport const loadClosedTickets = () => (dispatch, getState) => dispatch(loadTickets(SECONDROW, getState().summary.email));\nexport const loadClosedTicketsV2 = () => (dispatch, getState) => dispatch(loadTicketsV2(SECONDROW, getState().summary.email));\n\nexport const createTicketTransferDomain = data => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: TICKET_TRANSFER_DOMAIN_URL,\n method: 'POST',\n body: data,\n actionTypes: {\n request: () => ({ type: REQUEST_SAVE_TICKET_TRANSFER_DOMAIN }),\n success: response => ({ type: RECEIVE_SAVE_TICKET_TRANSFER_DOMAIN, ticket: response.data.ticket }),\n error: () => ({ type: ERROR_SAVE_TICKET_TRANSFER_DOMAIN }),\n },\n },\n});\n","import { CHARLIE_ZENDESK_V2 } from '@/config/GrowthBook/constants';\nimport useLocale from '@/hooks/useLocale';\nimport {\n loadClosedTickets, loadPendingTickets, loadPendingTicketsV2, loadClosedTicketsV2,\n} from '@/redux/actions/tickets';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { useCallback, useState } from 'react';\nimport { useDispatch } from 'react-redux';\n\nconst useTickets = ({\n setFilteredTickets,\n ticketsReducer,\n}) => {\n const { ticket: ticketLocale } = useLocale();\n const dispatch = useDispatch();\n const enableZendeskV2 = useFeatureIsOn(CHARLIE_ZENDESK_V2);\n\n const defaultFilterChips = [\n {\n id: 'all',\n label: ticketLocale.listPage.tickets.filter.chips.all,\n value: 'all',\n checked: true,\n },\n {\n id: 'opened',\n label: ticketLocale.listPage.tickets.filter.chips.opened,\n value: 'opened',\n checked: false,\n },\n {\n id: 'closed',\n label: ticketLocale.listPage.tickets.filter.chips.closed,\n value: 'closed',\n checked: false,\n },\n ];\n\n const [tickets, setTickets] = useState([]);\n const [filteredOptions, setFilteredOptions] = useState(defaultFilterChips);\n const [totalTickets, setTotalTickets] = useState(defaultFilterChips.length);\n const [filterTyped, setFilterTyped] = useState('');\n const [page, setPage] = useState(1);\n const ticketsPerPage = 10;\n const [pendingAmount, setPendingAmount] = useState(0);\n\n const requestTickets = useCallback((isToUpdateAlerts) => {\n dispatch(loadPendingTickets(isToUpdateAlerts));\n dispatch(loadClosedTickets());\n }, [dispatch]);\n\n const requestTicketsV2 = useCallback(() => {\n if (enableZendeskV2) {\n dispatch(loadPendingTicketsV2());\n dispatch(loadClosedTicketsV2());\n }\n }, [dispatch, enableZendeskV2]);\n\n const getPaginatedArray = useCallback(array => (array.length\n ? array.slice(0, (page * ticketsPerPage))\n : array), [page]);\n\n const sortByUpdated = useCallback(array => array.sort((a, b) => {\n if (a.updated_at > b.updated_at) { return -1; }\n if (a.updated_at < b.updated_at) { return 1; }\n return 0;\n }), []);\n\n const filterTickets = useCallback(() => {\n let newFilteredTickets = [...tickets];\n\n if (filteredOptions) {\n const activeOption = filteredOptions.find(option => option.checked);\n if (activeOption && activeOption.id !== 'all') {\n newFilteredTickets = newFilteredTickets.filter(\n ticket => ticket.status.toLowerCase() === activeOption.value,\n );\n }\n }\n\n if (filterTyped) {\n newFilteredTickets = newFilteredTickets.filter(\n ticket => ticket.subject && ticket.subject.toLowerCase()\n .includes(filterTyped.toLowerCase()),\n );\n }\n\n setTotalTickets(newFilteredTickets.length);\n let paginatedArray = getPaginatedArray(newFilteredTickets);\n paginatedArray = sortByUpdated(paginatedArray);\n setFilteredTickets(paginatedArray);\n }, [tickets, filteredOptions, filterTyped, setFilteredTickets, getPaginatedArray, sortByUpdated]);\n\n const setTicketsArray = useCallback(() => {\n if (!ticketsReducer.loading) {\n const ticketsArray = new Set();\n ticketsReducer.pending.ticketsV2.forEach((ticket) => {\n const newTicket = { ...ticket };\n newTicket.status = 'opened';\n\n ticketsArray.add({\n ...newTicket,\n v2: true,\n });\n });\n ticketsReducer.pending.tickets.forEach((ticket) => {\n const newTicket = { ...ticket };\n newTicket.status = 'opened';\n\n ticketsArray.add({\n ...newTicket,\n v2: false,\n });\n });\n\n ticketsReducer.closed.ticketsV2.forEach((ticket) => {\n const newTicket = { ...ticket };\n newTicket.status = 'closed';\n ticketsArray.add({\n ...newTicket,\n v2: true,\n });\n });\n ticketsReducer.closed.tickets.forEach((ticket) => {\n const newTicket = { ...ticket };\n newTicket.status = 'closed';\n ticketsArray.add({\n ...newTicket,\n v2: false,\n });\n });\n\n const newTicketsArray = Array.from(ticketsArray);\n setTickets(newTicketsArray);\n let paginatedArray = getPaginatedArray(newTicketsArray);\n paginatedArray = sortByUpdated(paginatedArray);\n setFilteredTickets(paginatedArray);\n setPendingAmount((ticketsReducer.pending.tickets.length + ticketsReducer.pending.ticketsV2.length));\n }\n }, [ticketsReducer, setFilteredTickets, getPaginatedArray, sortByUpdated]);\n\n const loadMore = () => {\n setPage(page + 1);\n };\n\n const useTicketsData = {\n defaultFilterChips,\n requestTickets,\n requestTicketsV2,\n filterTickets,\n filteredOptions,\n setFilteredOptions,\n filterTyped,\n setFilterTyped,\n setTicketsArray,\n page,\n pendingAmount,\n loadMore,\n totalTickets,\n };\n\n return useTicketsData;\n};\n\nexport default useTickets;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport NewChat from 'gatorhelper';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n billingActions, preChatActions, domainsActions, backupActions, sitesActions,\n commonActions,\n} from '@/redux/modules';\nimport { COUNTRY, WHMCS_URL } from '@/config';\nimport useLocale from '@/hooks/useLocale';\nimport { useHistory, useLocation } from 'react-router-dom';\nimport { preChatAnalytics } from '@/analytics/preChat';\nimport { sidebarAnalytics } from '@/analytics/support/sidebar';\nimport ModalDomainNotContracted from '@/components/Domain/ModalDomainNotContracted';\nimport ModalDomainNotConfigured from '@/components/Domain/ModalDomainNotConfigured';\nimport { DuplicateOrdersModal } from '@/components/billing/components/DuplicateOrdersModal';\nimport { TicketUpgradeVpsModal } from '@/components/Tickets/TicketUpgradeVpsModal';\nimport {\n BRAVO_EMAIL_FLOW,\n BRAVO_CHANGE_PHONE_FLOW,\n CHARLIE_PRIORITY_CHAT,\n ENABLE_SKILLED_DEPARTMENT,\n ASA_TEXTS,\n NEW_SUPPORT,\n CHARLIE_ENABLE_FINANCIAL_CHAT,\n CHARLIE_ENABLE_GENERAL_CHAT,\n CHARLIE_CHAT_HOLIDAYS,\n} from '@/config/GrowthBook/constants';\nimport { useFeatureIsOn, useFeatureValue } from '@growthbook/growthbook-react';\nimport { useDiagnostic } from '@/components/Layout/Menu/MyAlerts';\nimport logger from '@/utils/logger';\nimport withErrorBoundary from '@/utils/errorBoundary';\nimport { useTickets } from '@/hooks/tickets';\nimport { format, parseISO, isWithinInterval } from 'date-fns';\n\nconst MODALS = {\n DOMAIN_NOT_CONTRACTED: 'DOMAIN_NOT_CONTRACTED',\n DOMAIN_NOT_CONFIGURED: 'DOMAIN_NOT_CONFIGURED',\n DUPLICATE_ORDERS: 'DUPLICATE_ORDERS',\n};\n\nlet getDiagnosticInterval = null;\nconst PreChat = ({\n hasActiveChat,\n widgetIsOpen,\n setWidgetIsOpen,\n handleStartZenDeskChat,\n}) => {\n const [modalToShow, setModalToShow] = useState(null);\n const [isClickBlocked, setIsClickBlocked] = useState(false);\n const history = useHistory();\n const location = useLocation();\n const dispatch = useDispatch();\n const { preChat: preChatLocale, routes } = useLocale();\n const { requestDiagnostic } = useDiagnostic();\n\n const preChatState = useSelector(state => state.preChat);\n const summaryState = useSelector(state => state.summary);\n const billingState = useSelector(state => state.billing);\n const { serverTime } = useSelector(state => state.common);\n\n const enableEmailVerify = useFeatureIsOn(BRAVO_EMAIL_FLOW);\n const enablePhoneVerify = useFeatureIsOn(BRAVO_CHANGE_PHONE_FLOW);\n const charliePriorityChat = useFeatureIsOn(CHARLIE_PRIORITY_CHAT);\n const enableSkilledDepartment = useFeatureIsOn(ENABLE_SKILLED_DEPARTMENT);\n const enabledFinancialChat = useFeatureIsOn(CHARLIE_ENABLE_FINANCIAL_CHAT);\n const enabledGeneralChat = useFeatureIsOn(CHARLIE_ENABLE_GENERAL_CHAT);\n const supportTimes = useFeatureValue(ASA_TEXTS);\n const holidaysObject = useFeatureValue(CHARLIE_CHAT_HOLIDAYS);\n const { routes: routesLocale } = useLocale();\n const { requestTickets } = useTickets({});\n const useNewSupport = useFeatureIsOn(NEW_SUPPORT);\n const [holiday, setHoliday] = useState({});\n\n const checkHolidays = useCallback(() => {\n if (holidaysObject && holidaysObject.holidays && holidaysObject.holidays.length) {\n const now = serverTime ? parseISO(serverTime.iso8601) : new Date();\n const todayFormatted = format(now, 'yyyy-MM-dd');\n const currentHoliday = holidaysObject.holidays.find(holidayItem => holidayItem.days.includes(todayFormatted));\n\n if (currentHoliday) {\n const startGeneral = new Date(currentHoliday.startGeneral);\n const endGeneral = new Date(currentHoliday.endGeneral);\n\n const startFinancial = new Date(currentHoliday.startFinancial);\n const endFinancial = new Date(currentHoliday.endFinancial);\n\n const generalIsClosed = isWithinInterval(now, { start: startGeneral, end: endGeneral });\n const financialIsClosed = isWithinInterval(now, { start: startFinancial, end: endFinancial });\n\n if (generalIsClosed || financialIsClosed) {\n setHoliday({\n ...currentHoliday,\n closeGeneral: generalIsClosed ? currentHoliday.closeGeneral : false,\n closeFinancial: financialIsClosed ? currentHoliday.closeFinancial : false,\n });\n }\n }\n }\n }, [holidaysObject, serverTime]);\n\n useEffect(() => {\n checkHolidays();\n }, [checkHolidays]);\n\n const featureToggles = {\n charliePriorityChat,\n enableSkilledDepartment,\n supportTimes,\n useNewSupport,\n enabledFinancialChat,\n enabledGeneralChat,\n holiday,\n };\n\n const emailVerify = enableEmailVerify ? summaryState.emailVerified : true;\n const phoneVerify = enablePhoneVerify ? summaryState.phoneNumberVerified : true;\n const contactsVerified = emailVerify && phoneVerify;\n const newPendingOrdersList = preChatState.pendingOrders && preChatState.pendingOrders.filter(order => order.status === 'pending_analysis');\n const pendingOrdersList = newPendingOrdersList;\n\n const verifyDaysDifference = (date, days) => {\n try {\n const formatDate = new Date(date);\n const today = new Date();\n\n const daysDifference = (today - formatDate) / (1000 * 60 * 60 * 24);\n\n return daysDifference < days;\n } catch (e) {\n logger.error('Error on PreChat - method verifyDaysDifference', e);\n }\n };\n\n const hostingsList = preChatState.productsList.hostings && preChatState.productsList.hostings.filter(hosting => hosting.status !== 'Cancelled' || verifyDaysDifference(hosting.due_date, 30));\n const domainsList = preChatState.productsList.domains && preChatState.productsList.domains.filter(domain => domain.status !== 'Cancelled' || verifyDaysDifference(domain.due_date, 30));\n const productsList = { hostings: hostingsList, domains: domainsList };\n\n const getDiagnostic = useCallback((isOpening) => {\n try {\n requestTickets(true);\n isOpening && dispatch(preChatActions.productByStatus.request({ withCancelled: true, withPending: false, waitToken: true }));\n } catch (e) {\n logger.error('Error on PreChat - method getDiagnostic', e);\n }\n }, [dispatch, requestTickets]);\n\n const handleSetScreenToShow = useCallback((screen) => {\n dispatch(preChatActions.preChat.setScreen(screen));\n }, [dispatch]);\n\n const getServerTime = useCallback(() => {\n try {\n dispatch(commonActions.serverTime.request());\n } catch (e) {\n logger.error('Error on PreChat - method getServerTime', e);\n }\n }, [dispatch]);\n\n const handleOpenChat = useCallback((isOpening) => {\n if (!isClickBlocked) {\n if (!hasActiveChat) {\n try {\n if (!contactsVerified) {\n preChatState.screenToShowInPreChat !== 'problemSolved' && handleSetScreenToShow('triage');\n getDiagnostic(isOpening);\n }\n if (contactsVerified && preChatState && !preChatState.showPreChat) {\n preChatState.screenToShowInPreChat !== 'problemSolved' && handleSetScreenToShow('diagnostic');\n getDiagnostic(isOpening);\n }\n\n dispatch(preChatActions.preChat.setShowPreChat(isOpening));\n\n if (isOpening) {\n getServerTime();\n setIsClickBlocked(true);\n setTimeout(() => {\n setIsClickBlocked(false);\n }, 1550);\n }\n } catch (e) {\n logger.error('Error on PreChat - method handleOpenChat', e);\n }\n }\n\n if (hasActiveChat) {\n if (!widgetIsOpen) {\n // eslint-disable-next-line no-undef\n zE('messenger', 'open');\n setWidgetIsOpen(true);\n }\n if (widgetIsOpen) {\n // eslint-disable-next-line no-undef\n zE('messenger', 'close');\n setWidgetIsOpen(false);\n }\n }\n }\n }, [contactsVerified, dispatch, getDiagnostic, handleSetScreenToShow, preChatState, hasActiveChat, widgetIsOpen, setWidgetIsOpen, isClickBlocked, getServerTime]);\n\n\n const handleClosePreChat = () => {\n dispatch(preChatActions.preChat.setShowPreChat(false));\n dispatch(preChatActions.preChat.setScreen('diagnostic'));\n };\n\n const goToChatTriage = () => {\n preChatAnalytics.goToChatTriage();\n dispatch(preChatActions.weekDay.get());\n handleSetScreenToShow('triage');\n };\n\n const redirectToSubscriptionManagement = ({ productId, productType }) => {\n try {\n const route = `${routes.subscriptions}${routes.manageSubscription}/${productId}/${productType}`;\n history.push(route);\n\n dispatch(preChatActions.preChat.setShowPreChat(false));\n\n setTimeout(() => {\n dispatch(preChatActions.preChat.setScreen('problemSolved'));\n }, 2000);\n } catch (e) {\n logger.error('Error on PreChat - method redirectToSubscriptionManagement', e);\n }\n };\n\n const handleCloseModal = () => {\n setModalToShow(null);\n handleSetScreenToShow('problemSolved');\n dispatch(preChatActions.preChat.setShowPreChat());\n };\n\n const goToTrustReactivationModal = (invoiceId) => {\n try {\n if (preChatState && !preChatState.trustReactivationInvoiceId) {\n dispatch(preChatActions.trustReactivation.setInvoiceId(invoiceId));\n }\n let trustReactivationPath = '';\n const subscriptionReactivationList = preChatState.trustReactivation.filter(subscription => subscription.invoice_id === preChatState.trustReactivationInvoiceId);\n if (subscriptionReactivationList.length === 1) {\n trustReactivationPath = `${routes.subscriptions}${routes.manageSubscription}/${subscriptionReactivationList[0].hosting_id}/hosting`;\n } else {\n trustReactivationPath = `${routes.subscriptions}`;\n }\n dispatch(preChatActions.trustReactivation.redirect(true));\n dispatch(preChatActions.preChat.setShowPreChat());\n history.push('/');\n setTimeout(() => {\n history.push(trustReactivationPath);\n }, 10);\n } catch (e) {\n logger.error('Error on PreChat - method goToTrustReactivationModal', e);\n }\n };\n\n const goToInvoicePaymentModal = (invoiceId) => {\n try {\n const unpaidInvoicePath = `${routes.invoices}${routes.unpaid}/${invoiceId}`;\n dispatch(preChatActions.preChat.setShowPreChat());\n dispatch(preChatActions.invoice.set.invoiceId(invoiceId));\n history.push(unpaidInvoicePath);\n } catch (e) {\n logger.error('Error on PreChat - method goToInvoicePaymentModal', e);\n }\n };\n\n const getDiagnosticProps = () => {\n const reloadDiagnostic = () => {\n requestDiagnostic('PreChat3');\n dispatch(preChatActions.diagnostic.loading(true));\n getDiagnostic(true);\n };\n\n const goToTos = () => {\n try {\n dispatch(preChatActions.preChat.setShowPreChat());\n dispatch(preChatActions.tos.redirect(true));\n\n if (preChatState.tos.tickets.length > 1) {\n if (location.pathname !== routes.help) {\n history.push(routes.help);\n }\n preChatAnalytics.tosModalDisplayed();\n } else if (preChatState.tos.tickets.length === 1) {\n const ticketPath = `${routes.ticket}/${preChatState.tos.tickets[0].id}`;\n if (location.pathname !== ticketPath) {\n history.push(ticketPath);\n }\n }\n } catch (e) {\n logger.error('Error on PreChat - method goToTos', e);\n }\n };\n\n const goToSubscriptionAnalysis = (productId, productType) => {\n try {\n redirectToSubscriptionManagement({ productId, productType });\n\n setTimeout(() => {\n dispatch(preChatActions.preChat.setShowPreChat());\n }, 2000);\n } catch (e) {\n logger.error('Error on PreChat - method goToSubscriptionAnalysis', e);\n }\n };\n\n const handleModalToShow = (modal) => {\n dispatch(preChatActions.preChat.setShowPreChat());\n setModalToShow(modal);\n };\n\n return ({\n loadingDiagnostic: preChatState.loading,\n requestSuccess: preChatState.diagnosticLoaded,\n helpLinks: preChatLocale.diagnostic.helpLinks,\n invoices: preChatState.invoices,\n refunds: preChatState.refunds,\n customer: preChatState.customer,\n domainsPropagation: preChatState.domainsPropagation,\n tosTickets: preChatState.tos.tickets,\n goToSubscriptionAnalysis,\n pendingOrders: pendingOrdersList,\n reloadDiagnostic,\n goToInvoicePaymentModal,\n setModalToShow: handleModalToShow,\n goToTos,\n goToDuplicateOrdersModal: () => handleModalToShow(MODALS.DUPLICATE_ORDERS),\n hasDuplicateOrders: preChatState.duplicateOrders && preChatState.duplicateOrders.length,\n });\n };\n\n const getTriageProps = () => {\n const goToSubscriptionCancelModal = (productId, productType) => {\n dispatch(preChatActions.preChat.setshowPreChat());\n try {\n redirectToSubscriptionManagement({ productId, productType });\n dispatch(preChatActions.subscription.setSubscriptionToCancel(productId));\n setTimeout(() => {\n dispatch(preChatActions.preChat.setScreen('problemSolved'));\n }, 1000);\n } catch (e) {\n logger.error('Error on NewChatButton - method goToSubscriptionCancelModal', e);\n }\n };\n\n const goToSubscriptionManagement = ({ productId, productType }) => {\n dispatch(preChatActions.preChat.setshowPreChat());\n try {\n redirectToSubscriptionManagement({ productId, productType });\n dispatch(preChatActions.subscription.redirectManageSubscription(true));\n setTimeout(() => {\n dispatch(preChatActions.preChat.setScreen('problemSolved'));\n }, 1000);\n } catch (e) {\n logger.error('Error on NewChatButton - method goToSubscriptionManagement', e);\n }\n };\n\n const goToPlanOrCycleChange = ({ planId }) => {\n dispatch(preChatActions.preChat.setshowPreChat());\n window.open(`${WHMCS_URL}/index.php?m=custom_upgrade&action=selectupgrade&id=${planId}`, '_blank');\n handleSetScreenToShow('problemSolved');\n };\n\n const goToUpgradeVPSModal = (productId) => {\n dispatch(preChatActions.preChat.setshowPreChat());\n try {\n dispatch(preChatActions.preChat.setOpen(false));\n dispatch(preChatActions.preChat.setshowPreChat());\n dispatch(preChatActions.vps.redirect(true));\n dispatch(preChatActions.vps.productId(productId));\n\n setTimeout(() => {\n dispatch(preChatActions.preChat.setScreen('problemSolved'));\n }, 2000);\n } catch (e) {\n logger.error('Error on NewChatButton - method goToUpgradeVPSModal', e);\n }\n };\n\n const goDirectToChangePaymentMethod = (productId, productType) => {\n dispatch(preChatActions.subscription.setSubscriptionToChangePaymentMethod(productId));\n\n redirectToSubscriptionManagement({ productId, productType });\n };\n\n const shouldFetchSubscriptions = billingState\n && billingState.subscriptions\n && billingState.subscriptions.items\n && !billingState.subscriptions.loaded\n && !billingState.subscriptions.loading\n && !billingState.subscriptions.items.length;\n\n const goToChangePaymentMethod = (productId, productType) => {\n dispatch(preChatActions.preChat.setshowPreChat());\n try {\n if (shouldFetchSubscriptions) {\n dispatch(billingActions.subscriptions.request({ preChatRedirect: () => goDirectToChangePaymentMethod(productId, productType) }));\n } else {\n goDirectToChangePaymentMethod(productId, productType);\n }\n } catch (e) {\n logger.error('Error on NewChatButton - method goToChangePaymentMethod', e);\n }\n };\n\n const goToHoldDomain = (invoiceId) => {\n try {\n dispatch(preChatActions.invoice.set.holdDomainRedirect(true));\n goToInvoicePaymentModal(invoiceId);\n dispatch(preChatActions.preChat.setshowPreChat());\n\n setTimeout(() => {\n dispatch(preChatActions.preChat.setScreen('problemSolved'));\n }, 2000);\n } catch (e) {\n logger.error('Error on NewChatButton - method goToHoldDomain', e);\n }\n };\n\n const requestSelectedProductDetails = (data) => {\n dispatch(preChatActions.productDetails.get(data));\n };\n\n const goToGenerateEppKey = (domainToGenKey) => {\n try {\n dispatch(preChatActions.eppKeyGen.onFlow(true));\n const domainDetailPath = `${routes.domains}${routes.domaindetail}/${domainToGenKey.domainId}`;\n history.push(domainDetailPath);\n dispatch(domainsActions.modalEppKey.open(domainToGenKey.domain, domainToGenKey.domainId));\n dispatch(preChatActions.preChat.setShowPreChat(false));\n\n setTimeout(() => {\n handleSetScreenToShow('problemSolved');\n }, 2000);\n } catch (e) {\n logger.error('Error on NewChatButton - method goToGenerateEppKey', e);\n }\n };\n\n const goToBackupModal = ({ id, category }) => {\n try {\n history.push(`${routesLocale.products}${routesLocale.productdetail}/${id}${routesLocale.backup}/wizard/${category}`);\n dispatch(preChatActions.preChat.setShowPreChat(false));\n\n dispatch(backupActions.set.redirectFromPreChat(true));\n setTimeout(() => {\n handleSetScreenToShow('problemSolved');\n }, 1000);\n } catch (e) {\n logger.error('Error on NewChatButton - method goToBackupModal', e);\n }\n };\n\n\n const goToSitesWizard = ({ domain }) => {\n try {\n history.push(`${routes.sitesPage}${routes.sitesCreate}/${domain}`);\n dispatch(preChatActions.preChat.setShowPreChat(false));\n\n dispatch(sitesActions.chat.setRedirectFromPreChat(true));\n setTimeout(() => {\n handleSetScreenToShow('problemSolved');\n }, 1000);\n } catch (e) {\n logger.error('Error on NewChatButton - method goToSitesWizard', e);\n }\n };\n\n const goToSslPage = ({ hostingId }) => {\n try {\n window.open(`${WHMCS_URL}/index.php?m=ssl_addon&action=request1&hosting_id=${hostingId}`, '_blank');\n dispatch(preChatActions.preChat.setshowPreChat());\n setTimeout(() => {\n handleSetScreenToShow('problemSolved');\n }, 1000);\n } catch (e) {\n logger.error('Error on NewChatButton - method goToSslPage', e);\n }\n };\n\n const datadog = {\n priority: () => logger.info('chat - departamento prioritário - clientarea'),\n };\n\n return ({\n goToSubscriptionCancelModal,\n startZendeskChat: handleStartZenDeskChat,\n productsList,\n trustReactivation: preChatState.trustReactivation,\n goToPlanOrCycleChange,\n goToUpgradeVPSModal,\n goToChangePaymentMethod,\n goDirectToChangePaymentMethod,\n goToGenerateEppKey,\n shouldFetchSubscriptions,\n goToHoldDomain,\n requestSelectedProductDetails,\n loadingSelectedProductDetails: preChatState.productDetailsLoading,\n selectedProductDetail: preChatState.productDetails,\n weekDay: preChatState.weekDay,\n goToBackupModal,\n goToSitesWizard,\n goToSslPage,\n goToSubscriptionManagement,\n datadog,\n });\n };\n\n const setGetDiagnosticInterval = useCallback(() => {\n const fifteenMinutes = 1000 * 60 * 30;\n clearInterval(getDiagnosticInterval);\n\n getDiagnosticInterval = setInterval(() => {\n requestDiagnostic('PreChat2');\n }, fifteenMinutes);\n }, [requestDiagnostic]);\n\n useEffect(() => {\n requestDiagnostic('PreChat1');\n setGetDiagnosticInterval();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [dispatch]);\n\n const resetDiagnosticInterval = useCallback(() => {\n if (preChatState.showPreChat) {\n setGetDiagnosticInterval();\n }\n }, [preChatState.showPreChat, setGetDiagnosticInterval]);\n\n useEffect(() => {\n resetDiagnosticInterval();\n }, [resetDiagnosticInterval]);\n\n\n const goToWizardDns = useCallback((id) => {\n try {\n history.push(`${routes.domains}${routes.dnsWizard}/${id}`);\n dispatch(preChatActions.reservedDomain.onFlow(true));\n\n dispatch(preChatActions.preChat.setShowPreChat(false));\n setTimeout(() => {\n handleSetScreenToShow('problemSolved');\n }, 1000);\n } catch (e) {\n logger.error('Error on PreChat - method goToWizardDns', e);\n }\n }, [dispatch, handleSetScreenToShow, history, routes]);\n\n const handleWidgetDisplay = useCallback((display) => {\n if (display) {\n // eslint-disable-next-line no-undef\n zE('messenger', 'open');\n } else {\n // eslint-disable-next-line no-undef\n zE('messenger', 'close');\n }\n setWidgetIsOpen(display);\n }, [setWidgetIsOpen]);\n\n const goToSitesWizard = () => {\n try {\n history.push(`${routes.sitesPage}${routes.sitesCreate}`);\n\n dispatch(sitesActions.chat.setRedirectFromPreChat(true));\n dispatch(preChatActions.preChat.setShowPreChat(false));\n setTimeout(() => {\n handleSetScreenToShow('problemSolved');\n }, 1000);\n } catch (e) {\n logger.error('Error on PreChat - method goToSitesWizard', e);\n }\n };\n\n const goToTicketsPage = (ticketType) => {\n try {\n if (sidebarAnalytics) {\n sidebarAnalytics.newSupportAnalytics('SUPPORT', 'SEE_TICKET');\n }\n\n if (typeof ticketType === 'string') {\n dispatch(preChatActions.tickets.setTicketType(ticketType !== 'frequent' ? ticketType : null));\n history.push(`${routes.help}${routes.supportforms}`);\n } else {\n history.push(routes.help);\n }\n\n dispatch(preChatActions.preChat.setShowPreChat(false));\n setTimeout(() => {\n handleSetScreenToShow('problemSolved');\n }, 1000);\n } catch (e) {\n logger.error('Error on PreChat - method goToTicketsPage', e);\n }\n };\n\n const goToGenerateEppKey = (domainToGenKey) => {\n try {\n dispatch(preChatActions.eppKeyGen.onFlow(true));\n const domainDetailPath = `${routes.domains}${routes.domaindetail}/${domainToGenKey.domainId}`;\n history.push(domainDetailPath);\n dispatch(domainsActions.modalEppKey.open(domainToGenKey.domain, domainToGenKey.domainId));\n dispatch(preChatActions.preChat.setShowPreChat(false));\n\n setTimeout(() => {\n handleSetScreenToShow('problemSolved');\n }, 2000);\n } catch (e) {\n logger.error('Error on PreChat - method goToGenerateEppKey', e);\n }\n };\n\n const goToChangePaymentMethod = (productId, productType) => {\n dispatch(preChatActions.preChat.setShowPreChat());\n\n const shouldFetchSubscriptions = billingState\n && billingState.subscriptions\n && billingState.subscriptions.items\n && !billingState.subscriptions.loaded\n && !billingState.subscriptions.loading\n && !billingState.subscriptions.items.length;\n\n const goDirectToChangePaymentMethod = (productId, productType) => {\n dispatch(preChatActions.subscription.setSubscriptionToChangePaymentMethod(productId));\n\n redirectToSubscriptionManagement({ productId, productType });\n };\n\n try {\n if (shouldFetchSubscriptions) {\n dispatch(billingActions.subscriptions.request({ preChatRedirect: () => goDirectToChangePaymentMethod(productId, productType) }));\n } else {\n goDirectToChangePaymentMethod(productId, productType);\n }\n } catch (e) {\n logger.error('Error on PreChat - method goToChangePaymentMethod', e);\n }\n };\n\n const goToPlanOrCycleChange = ({ planId }) => {\n dispatch(preChatActions.preChat.setShowPreChat());\n window.open(`${WHMCS_URL}/index.php?m=custom_upgrade&action=selectupgrade&id=${planId}`, '_blank');\n handleSetScreenToShow('problemSolved');\n };\n\n const goToSubscriptionCancelModal = (productId, productType) => {\n dispatch(preChatActions.preChat.setShowPreChat());\n try {\n redirectToSubscriptionManagement({ productId, productType });\n dispatch(preChatActions.subscription.setSubscriptionToCancel(productId));\n setTimeout(() => {\n dispatch(preChatActions.preChat.setScreen('problemSolved'));\n }, 1000);\n } catch (e) {\n logger.error('Error on PreChat - method goToSubscriptionCancelModal', e);\n }\n };\n\n const goToSubscriptionManagement = ({ productId, productType }) => {\n dispatch(preChatActions.preChat.setShowPreChat());\n try {\n redirectToSubscriptionManagement({ productId, productType });\n dispatch(preChatActions.subscription.redirectManageSubscription(true));\n setTimeout(() => {\n dispatch(preChatActions.preChat.setScreen('problemSolved'));\n }, 1000);\n } catch (e) {\n logger.error('Error on PreChat - method goToSubscriptionManagement', e);\n }\n };\n\n const goToBackupModal = ({ id, category }) => {\n try {\n history.push(`${routesLocale.products}${routesLocale.productdetail}/${id}${routesLocale.backup}/wizard/${category}`);\n dispatch(preChatActions.preChat.setShowPreChat(false));\n dispatch(backupActions.set.redirectFromPreChat(true));\n setTimeout(() => {\n handleSetScreenToShow('problemSolved');\n }, 1000);\n } catch (e) {\n logger.error('Error on PreChat - method goToBackupModal', e);\n }\n };\n\n return (\n <>\n handleOpenChat(isOpening)}\n chatIsOpen={preChatState.showPreChat}\n screenToShow={preChatState.screenToShowInPreChat}\n contactsVerified={contactsVerified}\n setScreenToShow={handleSetScreenToShow}\n closePreChat={handleClosePreChat}\n featureToggles={featureToggles}\n analyticEvents={{ ...preChatAnalytics, ...sidebarAnalytics }}\n goToChatTriage={goToChatTriage}\n goToTrustReactivationModal={goToTrustReactivationModal}\n goToWizardDns={goToWizardDns}\n hideButton={!hasActiveChat}\n serverTime={serverTime}\n hasActiveChat={hasActiveChat}\n handleWidgetDisplay={handleWidgetDisplay}\n goToSitesWizard={goToSitesWizard}\n goToTicketsPage={goToTicketsPage}\n getServerTime={getServerTime}\n productsList={productsList}\n startZendeskChat={handleStartZenDeskChat}\n trustReactivation={preChatState.trustReactivation}\n goToGenerateEppKey={goToGenerateEppKey}\n goToChangePaymentMethod={goToChangePaymentMethod}\n goToPlanOrCycleChange={goToPlanOrCycleChange}\n goToSubscriptionCancelModal={goToSubscriptionCancelModal}\n goToSubscriptionManagement={goToSubscriptionManagement}\n goToBackupModal={goToBackupModal}\n />\n\n {modalToShow === MODALS.DOMAIN_NOT_CONTRACTED && \n {icon}\n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const Svg = styled.svg``;\n","import React from 'react';\nimport * as Styles from './IconThumbsUp.styles';\n\nconst IconThumbsUp = ({\n testId = 'IconThumbsUp',\n selected,\n}) => (\n \n \n \n \n \n \n \n \n);\n\nexport default IconThumbsUp;\n","import styled from 'styled-components';\n\nexport const Svg = styled.svg``;\n","import React from 'react';\nimport * as Styles from './IconThumbsDown.styles';\n\nconst IconThumbsDown = ({\n testId = 'IconThumbsDown',\n selected,\n}) => (\n \n \n \n \n \n \n \n \n);\n\nexport default IconThumbsDown;\n","import React, {\n useCallback, useEffect, useRef, useState,\n} from 'react';\nimport * as Styles from './Chatbot.styles';\n\nimport withErrorBoundary from '@/utils/errorBoundary';\nimport {\n Button, IconChat, IconCheck, IconChevron, IconClose, IconDanger, IconReset, IconStars,\n Tooltip,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale';\nimport { IconButton } from '@/pages/common/v1/IconButton';\nimport sendIcon from './media/send.svg';\nimport stopIcon from './media/stop.svg';\nimport { preChatActions } from '@/redux/modules';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { IconThumbsUp } from './IconThumbsUp';\nimport { IconThumbsDown } from './IconThumbsDown';\n\nconst elementsEnum = {\n intro: 'introduction',\n chatbot: 'chatbot',\n};\n\nconst evaluationEnum = {\n positive: 'good',\n negative: 'bad',\n};\n\nconst Chatbot = ({ handleStartZenDeskChat, dataToStartChat }) => {\n const { preChat: locale } = useLocale();\n\n const [messages, setMessages] = useState([]);\n const [inputValue, setInputValue] = useState('');\n const [showCloseModal, setShowCloseModal] = useState(false);\n const [elementToShow, setElementToShow] = useState(undefined);\n const [renderIntro, setRenderIntro] = useState(true);\n const [openingChat, setOpeningChat] = useState(false);\n const [transitionToWidget, setTransitionToWidget] = useState(false);\n const [showTyping, setShowTyping] = useState(false);\n const [canStopMessage, setCanStopMessage] = useState(false);\n const [chatbotMinimized, setChatbotMinimized] = useState(false);\n const { lastChatbotMessage } = useSelector(state => state.preChat);\n const inputRef = useRef(null);\n const messagesRef = useRef(null);\n const messagesEndRef = useRef(null);\n const isAddingMessageRef = useRef(canStopMessage);\n const timeoutsRef = useRef([]);\n const dispatch = useDispatch();\n\n useEffect(() => {\n isAddingMessageRef.current = canStopMessage;\n }, [canStopMessage]);\n\n const hideScrollbar = messagesRef.current && messagesRef.current.scrollHeight <= messagesRef.current.clientHeight;\n\n const scrollToBottom = () => {\n messagesEndRef.current && messagesEndRef.current.scrollIntoView && messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });\n };\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n const goToChat = () => {\n setOpeningChat(true);\n handleStartZenDeskChat && handleStartZenDeskChat(dataToStartChat);\n setTimeout(() => {\n setMessages([]);\n dispatch(preChatActions.chatbot.setChatbotMessage(null));\n setElementToShow(undefined);\n setOpeningChat(false);\n dispatch(preChatActions.preChat.setScreen('diagnostic'));\n }, 1200);\n\n setTimeout(() => {\n setTransitionToWidget(true);\n }, 700);\n\n setTimeout(() => {\n setTransitionToWidget(false);\n }, 2000);\n };\n\n const minimizeChatBot = () => {\n setChatbotMinimized(!chatbotMinimized);\n };\n\n const clearTimeouts = () => {\n timeoutsRef.current.forEach(clearTimeout);\n timeoutsRef.current = [];\n };\n\n const addMessageCharByChar = (message, delay = 16) => {\n clearTimeouts();\n\n const chars = message.split('');\n chars.forEach((char, index) => {\n const timeoutId = setTimeout(() => {\n if (!isAddingMessageRef.current) return;\n\n setMessages((prevMessages) => {\n const lastMessage = prevMessages[prevMessages.length - 1];\n const newMessage = {\n ...lastMessage,\n text: lastMessage.text + char,\n };\n\n return [...prevMessages.slice(0, -1), newMessage];\n });\n\n if (index === chars.length - 1) {\n setCanStopMessage(false);\n clearTimeouts();\n }\n }, index * delay);\n\n timeoutsRef.current.push(timeoutId);\n });\n };\n\n const markdownToHtml = (markdown) => {\n let html = markdown;\n\n // Convert headers\n html = html.replace(/^### (.*$)/gim, '$1 ');\n html = html.replace(/^## (.*$)/gim, '$1 ');\n html = html.replace(/^# (.*$)/gim, '$1 ');\n\n // Convert bold text\n html = html.replace(/\\*\\*(.*?)\\*\\*/gim, '$1 ');\n\n // Convert italic text\n html = html.replace(/\\*(.*?)\\*/gim, '$1 ');\n html = html.replace(/_(.*?)_/gim, '$1 ');\n\n // Convert blockquotes\n html = html.replace(/^\\s*>\\s+(.*)$/gim, '$1 ');\n\n // Convert inline code\n html = html.replace(/`([^`]+)`/gim, '$1');\n\n // Convert code blocks\n html = html.replace(/```([^`]+)```/gim, '$1$1 ');\n\n // Convert images\n html = html.replace(/!\\[([^\\]]*)\\]\\(([^)]+)\\)/gim, '/gim, ''); // Remove consecutive tags\n\n // Convert ordered lists\n html = html.replace(/^\\s*\\d+\\.\\s+(.*)$/gim, '$1 /gim, ''); // Remove consecutive tags\n\n // Convert line breaks\n html = html.replace(/\\n/g, '');\n\n return html.trim();\n };\n\n const renderMessage = (message) => {\n const formattedMessage = markdownToHtml(message);\n return \n \n \n \n \n \n Beta\n \n \n \n {locale.chatbot.title}\n \n \n {locale.chatbot.description}\n \n {locale.chatbot.cards.map(({ cardText, id }) => (\n \n \n \n \n {cardText}\n \n \n ))}\n \n \n \n \n )}\n\n {!renderIntro && (\n <>\n \n \n \n \n Beta\n \n \n \n \n \n \n \n \n \n\n \n \n {messages.map((message, index) => (\n \n {message.origin === 'bot' && (\n \n \n )}\n \n {renderMessage(message.text)}\n\n {message.error && (\n \n \n )}\n\n {message.error === 'retry' && (\n \n \n )}\n\n {!message.firstMessage && message.origin === 'bot' && (\n \n \n answerEvaluation(index, evaluationEnum.negative, message.id)}\n >\n \n\n \n answerEvaluation(index, evaluationEnum.positive, message.id)}\n >\n \n \n )}\n \n \n ))}\n\n {showTyping && (\n \n \n \n \n \n \n )}\n \n \n\n \n \n setInputValue(event.target.value)}\n onKeyDown={event => event.key === 'Enter' && sendMessage()}\n value={inputValue}\n ref={inputRef}\n />\n\n {canStopMessage && (\n \n \n )}\n {!canStopMessage && (\n \n\n\n \n {locale.chatbot.aiAlert}\n \n \n\n {showCloseModal && (\n \n \n \n \n\n \n {locale.chatbot.closeChat}\n \n \n {locale.chatbot.closeChatAlert}\n \n\n \n setShowCloseModal(false)}\n />\n\n \n \n \n )}\n \n\n {!openingChat && (\n \n \n )}\n \n )}\n \n );\n};\n\nexport default withErrorBoundary(Chatbot, 'Chatbot');\n","import { COUNTRY } from '@/config';\nimport logger from '@/utils/logger';\n\nfunction mountZendeskTags({\n department,\n primaryReason,\n secondaryReason,\n product,\n whmcsId,\n departmentLocales,\n priority,\n isTicket,\n v2,\n}) {\n const isTechnicalDepartment = department === 'technical';\n const isFinancialDepartment = department === 'financial';\n const isPriorityDepartment = department === 'priority';\n const mountedTags = [];\n let zendeskDepartment;\n\n const noProductSelected = product === '&noproductselected=true';\n if (noProductSelected && !v2) {\n mountedTags.push('other_product_selected');\n }\n\n if (!isTechnicalDepartment && !v2) {\n zendeskDepartment = departmentLocales.financial;\n }\n\n if (isTechnicalDepartment && !v2) {\n zendeskDepartment = departmentLocales.shared;\n }\n\n if (isTechnicalDepartment && primaryReason === 'technical-others' && !v2) {\n zendeskDepartment = departmentLocales.shared;\n }\n\n if (isTechnicalDepartment && primaryReason === 'dns' && !v2) {\n zendeskDepartment = departmentLocales.domain;\n }\n\n if (isTechnicalDepartment && primaryReason === 'email' && !v2) {\n zendeskDepartment = departmentLocales.mail;\n }\n\n if (isTechnicalDepartment && (primaryReason === 'wordpress-tool' || primaryReason === 'site-offline') && !v2) {\n zendeskDepartment = departmentLocales.builder;\n }\n\n if (isTechnicalDepartment && (primaryReason === 'site-offline' && secondaryReason === 'site-tos') && !v2) {\n zendeskDepartment = departmentLocales.tos;\n }\n\n if (department === 'skilled') {\n zendeskDepartment = departmentLocales.skilled;\n }\n\n if (isPriorityDepartment) {\n zendeskDepartment = departmentLocales.priority;\n }\n\n if (secondaryReason) {\n mountedTags.push(secondaryReason);\n }\n\n if (primaryReason) {\n mountedTags.push(primaryReason);\n } else {\n logger.error('chat without tag', {\n primaryReason,\n department,\n secondaryReason,\n whmcsId,\n });\n }\n\n if (priority) {\n mountedTags.push(`priority_${priority}`);\n }\n\n if (COUNTRY === 'br' && !isFinancialDepartment && !isPriorityDepartment) {\n mountedTags.push(isTicket ? 'hg_messaging_email' : 'hg_messaging_chat');\n }\n\n mountedTags.push(`whmcs_id: ${whmcsId}`);\n mountedTags.push(COUNTRY);\n\n if (zendeskDepartment) {\n mountedTags.push(zendeskDepartment);\n }\n\n return mountedTags;\n}\n\nexport default mountZendeskTags;\n","import React, {\n useCallback, useEffect, useMemo, useState,\n} from 'react';\nimport { Fab, Typography, SvgIcon } from '@material-ui/core';\nimport { withStyles } from '@material-ui/core/styles';\nimport styles from './styles';\nimport { PreChat } from '../Prechat';\nimport { FeaturesReady, useFeatureIsOn, useFeatureValue } from '@growthbook/growthbook-react';\nimport {\n CHARLIE_PRECHAT, CHARLIE_START_CHAT_MESSAGE, CHARLIE_ZENDESK_CHAT_TITLE,\n CHARLIE_ZENDESK_DELETE_SUNSHINE,\n CHARLIE_ZENDESK_SEND_MESSAGE_BUTTON_TITLE,\n CHAT_BOT,\n NEW_SUPPORT,\n ZENDESK_WIDGET_KEY,\n} from '@/config/GrowthBook/constants';\nimport {\n CHAT_TOKEN, ZENDESK_AUTH_KEY, ZENDESK_AUTH_TOKEN, COUNTRY,\n IS_PROD,\n} from '@/config';\nimport jwt from 'jsonwebtoken';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport logger from '@/utils/logger';\nimport useLocale from '@/hooks/useLocale';\nimport { preChatActions } from '@/redux/modules';\nimport {\n addMinutes, differenceInMilliseconds, differenceInMinutes,\n} from 'date-fns';\nimport { api } from '@/utils/api';\nimport { Chatbot } from '@/components/Chatbot';\nimport mountZendeskTags from '../Prechat/utils/mountZendeskTags';\n\nconst ChatButton = ({ classes }) => {\n const [widgetIsOpen, setWidgetIsOpen] = useState(false);\n const { email, name, id } = useSelector(state => state.summary);\n const { token } = useSelector(state => state.auth);\n const { hasActiveChat, screenToShowInPreChat } = useSelector(state => state.preChat);\n const summaryState = useSelector(state => state.summary);\n const [zendeskExists, setZendeskExists] = useState(!!window.zE);\n const [isObservingChat, setIsObservingChat] = useState(false);\n const [dataToStartChat, setDataToStartChat] = useState({});\n const { preChat: preChatLocale } = useLocale();\n const dispatch = useDispatch();\n\n const disablePreChat = useFeatureIsOn(CHARLIE_PRECHAT);\n const enableChatBot = useFeatureIsOn(CHAT_BOT);\n const chatTitle = useFeatureValue(CHARLIE_ZENDESK_CHAT_TITLE);\n const deleteSunshineUser = useFeatureIsOn(CHARLIE_ZENDESK_DELETE_SUNSHINE);\n const zendeskWidgetKey = useFeatureValue(ZENDESK_WIDGET_KEY);\n const startChatMessage = useFeatureValue(CHARLIE_START_CHAT_MESSAGE);\n const sendMessageButtonTitle = useFeatureValue(CHARLIE_ZENDESK_SEND_MESSAGE_BUTTON_TITLE);\n const useNewSupport = useFeatureIsOn(NEW_SUPPORT);\n const intervalIds = useMemo(() => [], []);\n\n const downloadZendeskWebWidget = useCallback(() => {\n const script = document.createElement('script');\n script.type = 'text/javascript';\n script.id = 'ze-snippet';\n script.src = `https://static.zdassets.com/ekr/snippet.js?key=${zendeskWidgetKey || CHAT_TOKEN}`;\n document.body.appendChild(script);\n }, [zendeskWidgetKey]);\n\n const verifyHasRecentChatFinished = useCallback(() => {\n // control if a chat was finished and reset triggered in the last minute\n const resetHasBeenTriggered = localStorage.getItem('chatRecentFinished');\n const timeSinceReset = differenceInMilliseconds(new Date(), new Date(resetHasBeenTriggered));\n const oneMinute = 60000;\n if (resetHasBeenTriggered && timeSinceReset < oneMinute) {\n const timeToEnableReset = 60000 - timeSinceReset;\n setTimeout(() => { localStorage.removeItem('chatRecentFinished'); }, timeToEnableReset);\n } else {\n localStorage.removeItem('chatRecentFinished');\n }\n }, []);\n\n useEffect(() => {\n downloadZendeskWebWidget();\n verifyHasRecentChatFinished();\n }, [downloadZendeskWebWidget, verifyHasRecentChatFinished]);\n\n const verifyIfZendeskExists = useCallback(() => {\n if (!window.zE) {\n window.setTimeout(verifyIfZendeskExists, 1000);\n return;\n }\n\n setZendeskExists(true);\n\n // eslint-disable-next-line no-undef\n zE('messenger:on', 'open', () => {\n // eslint-disable-next-line\n const timeout = setTimeout(triggerChatFinish, 500);\n return () => clearTimeout(timeout);\n });\n\n // eslint-disable-next-line no-undef\n zE('messenger:on', 'close', () => {\n setWidgetIsOpen(false);\n });\n\n // eslint-disable-next-line no-undef\n zE('messenger:on', 'unreadMessages', (count) => {\n if (count >= 1) {\n // eslint-disable-next-line no-undef\n zE('messenger', 'open');\n setWidgetIsOpen(true);\n }\n });\n }, []);\n\n useEffect(() => {\n verifyIfZendeskExists();\n }, [verifyIfZendeskExists]);\n\n // force a start message on zendesk widget\n const clickOnSendMessageButton = useCallback((chatComponentDocument, inputElement) => {\n const sendBtnElement = chatComponentDocument.querySelector(`[title=\"${sendMessageButtonTitle}\"]`);\n\n if (!sendBtnElement) {\n inputElement.dispatchEvent(new Event('change', { bubbles: true }));\n window.setTimeout(clickOnSendMessageButton, 50);\n return;\n }\n\n sendBtnElement.click();\n }, [sendMessageButtonTitle]);\n\n const sendStartChatMessage = useCallback(() => {\n if (widgetIsOpen && startChatMessage && !hasActiveChat) {\n const chatComponent = document.querySelector(`[title=\"${chatTitle}\"]`);\n const chatComponentDocument = chatComponent && chatComponent.contentWindow && chatComponent.contentWindow.document;\n const inputElement = chatComponentDocument && chatComponentDocument.getElementsByTagName('textarea')[0];\n\n if (!inputElement) {\n window.setTimeout(sendStartChatMessage, 50);\n return;\n }\n\n inputElement.innerText = startChatMessage;\n inputElement.dispatchEvent(new Event('change', { bubbles: true }));\n inputElement.dispatchEvent(new Event('input', { bubbles: true }));\n\n if (inputElement.value === startChatMessage) {\n clickOnSendMessageButton(chatComponentDocument, inputElement);\n }\n\n dispatch(preChatActions.chat.setActiveChat(true));\n\n const spans = chatComponentDocument && chatComponentDocument.querySelectorAll('span');\n spans && spans.forEach((spanElement) => {\n if (spanElement.textContent === startChatMessage && spanElement.parentElement && spanElement.parentElement.parentElement) {\n // eslint-disable-next-line no-param-reassign\n spanElement.parentElement.parentElement.style.display = 'none';\n }\n });\n }\n }, [widgetIsOpen, chatTitle, startChatMessage, clickOnSendMessageButton, hasActiveChat, dispatch]);\n\n\n useEffect(() => {\n sendStartChatMessage();\n }, [sendStartChatMessage]);\n\n const clearAllIntervals = useCallback(() => {\n while (intervalIds.length) {\n const id = intervalIds.pop();\n clearInterval(id);\n }\n }, [intervalIds]);\n\n const generateZendeskToken = useCallback(async () => {\n if (!email || !id || !name || id === 'undefined' || id === undefined) return;\n\n const zendeskToken = localStorage.getItem('HGZendeskTokenToChat');\n const zendeskCustomerId = `${isBRServer ? 'br_' : 'es_'}${String(id)}`;\n\n if (zendeskCustomerId.includes('undefined')) {\n logger.error('Zendesk - User undefined', { email, userId: id, name });\n return;\n }\n\n let token;\n\n if (zendeskToken) {\n jwt.verify(zendeskToken, ZENDESK_AUTH_TOKEN, (err) => {\n if (!err) {\n token = zendeskToken;\n }\n });\n\n // check if the token is from the current user\n const tokenData = jwt.decode(zendeskToken, { complete: true });\n if (!tokenData\n || tokenData.payload.external_id !== zendeskCustomerId\n || tokenData.payload.external_id === 'undefined'\n || tokenData.payload.external_id === undefined\n || tokenData.payload.external_id === 'br_undefined'\n || tokenData.payload.external_id === 'es_undefined'\n ) {\n token = null;\n }\n }\n\n if (token) return token;\n\n token = jwt.sign(\n {\n external_id: zendeskCustomerId,\n name,\n email,\n email_verified: true,\n scope: 'user',\n },\n ZENDESK_AUTH_TOKEN,\n {\n keyid: ZENDESK_AUTH_KEY,\n algorithm: 'HS256',\n expiresIn: '1w',\n },\n );\n\n localStorage.setItem('HGZendeskTokenToChat', token);\n\n return token;\n }, [email, id, name]);\n\n const loginZendeskUserAgain = useCallback(async (customCallback) => {\n const zendeskJWTToken = await generateZendeskToken();\n setIsObservingChat(false);\n\n // eslint-disable-next-line no-undef\n zE('messenger', 'loginUser', (zendeskCallback) => {\n zendeskCallback(zendeskJWTToken);\n customCallback && customCallback();\n });\n }, [generateZendeskToken]);\n\n\n const minimizeWidgetAndResetPrechat = useCallback(() => {\n // eslint-disable-next-line no-undef\n zE('messenger', 'close');\n // eslint-disable-next-line no-undef\n zE('messenger', 'logoutUser');\n setTimeout(loginZendeskUserAgain, 3000);\n\n localStorage.removeItem('resetHasBeenTriggered');\n localStorage.setItem('chatRestarted', true);\n dispatch(preChatActions.chat.setActiveChat(false));\n setIsObservingChat(false);\n clearAllIntervals();\n }, [dispatch, clearAllIntervals, loginZendeskUserAgain]);\n\n const verifyUserHasActiveChat = useCallback(() => {\n const hasConversationStarted = Object.keys(localStorage).filter(key => key.includes('.conversationStartedAt'))[0];\n if (hasConversationStarted) {\n dispatch(preChatActions.chat.setActiveChat(true));\n setWidgetIsOpen(true);\n // eslint-disable-next-line no-undef\n zendeskExists && zE('messenger', 'open');\n } else {\n setTimeout(verifyUserHasActiveChat, 10000);\n }\n }, [dispatch, zendeskExists]);\n\n\n const watchForChatRestart = useCallback(() => {\n dispatch(preChatActions.chat.setActiveChat(false));\n setIsObservingChat(false);\n clearAllIntervals();\n verifyUserHasActiveChat();\n }, [clearAllIntervals, dispatch, verifyUserHasActiveChat]);\n\n useEffect(() => {\n const chatRestarted = localStorage.getItem('chatRestarted');\n if (!widgetIsOpen && chatRestarted && zendeskExists) {\n watchForChatRestart();\n\n if (name && email && id) {\n setTimeout(loginZendeskUserAgain, 3000);\n }\n }\n }, [widgetIsOpen, watchForChatRestart, zendeskExists, loginZendeskUserAgain, email, id, name]);\n\n const hideChatFinishAlert = useCallback(() => {\n localStorage.removeItem('resetHasBeenTriggered');\n\n const chatComponent = document.querySelector(`[title=\"${chatTitle}\"]`);\n const chatComponentDocument = chatComponent && chatComponent.contentWindow && chatComponent.contentWindow.document;\n const inputComponent = chatComponentDocument && chatComponentDocument.getElementsByTagName('textarea')[0];\n const chatBottom = inputComponent && inputComponent.parentElement && inputComponent.parentElement.parentElement && inputComponent.parentElement.parentElement.parentElement;\n if (chatBottom && chatBottom.childNodes) {\n chatBottom.childNodes.forEach((child) => {\n // eslint-disable-next-line no-param-reassign\n child.style.display = 'none';\n });\n\n chatBottom.childNodes[0].style.display = 'block';\n chatBottom.childNodes[2].style.display = 'block';\n }\n }, [chatTitle]);\n\n const triggerChatFinish = useCallback(() => {\n const chatComponent = document.querySelector(`[title=\"${chatTitle}\"]`);\n const chatComponentDocument = chatComponent && chatComponent.contentWindow && chatComponent.contentWindow.document;\n const chatLog = chatComponentDocument && chatComponentDocument.querySelector('[role=\"log\"]');\n const hasResetMessage = chatLog && chatLog.children && chatLog.children.length\n && [...chatLog.children].some(child => preChatLocale.resetMessages && preChatLocale.resetMessages.some(resetMessage => child.innerText.includes(resetMessage)) && child.innerHTML.includes(isBRServer ? 'Agora mesmo' : 'Hace un momento'));\n\n const resetHasBeenTriggered = localStorage.getItem('resetHasBeenTriggered');\n const timeSinceReset = differenceInMinutes(new Date(), new Date(resetHasBeenTriggered));\n\n const chatRecentFinished = localStorage.getItem('chatRecentFinished');\n const timeSinceLastChatFinished = differenceInMinutes(new Date(), new Date(chatRecentFinished));\n\n // recent chat finish || chat finished in the last 5 minutes\n if ((hasResetMessage && !chatRecentFinished && timeSinceLastChatFinished > 1) || (resetHasBeenTriggered && timeSinceReset < 5)) {\n // here we are going to hide and disable the input and show a message to the user that the chat has been finished\n const inputComponent = chatComponentDocument && chatComponentDocument.getElementsByTagName('textarea')[0];\n const chatBottom = inputComponent && inputComponent.parentElement && inputComponent.parentElement.parentElement && inputComponent.parentElement.parentElement.parentElement;\n if (chatBottom) {\n chatBottom.childNodes.forEach((child) => {\n // eslint-disable-next-line no-param-reassign\n child.style.display = 'none';\n });\n\n inputComponent.disabled = true;\n\n const alertWrapper = chatComponentDocument.createElement('div');\n alertWrapper.style.display = 'flex';\n alertWrapper.style.flexDirection = 'column';\n alertWrapper.style.fontFamily = 'system-ui';\n alertWrapper.style.justifyContent = 'center';\n alertWrapper.style.alignItems = 'center';\n alertWrapper.style.padding = '0px 16px 16px 16px';\n alertWrapper.style.bottom = '0px';\n alertWrapper.style.left = '0px';\n alertWrapper.style.width = '100%';\n alertWrapper.innerHTML = `\n \n ${preChatLocale.chatFinished}\n
\n `;\n\n chatBottom.appendChild(alertWrapper);\n\n const startNewChatButton = chatComponentDocument.createElement('button');\n startNewChatButton.style.height = '40px';\n startNewChatButton.style.padding = '0px 24px';\n startNewChatButton.style.justifyContent = 'center';\n startNewChatButton.style.alignItems = 'center';\n startNewChatButton.style.flexShrink = '0';\n startNewChatButton.style.borderRadius = '24px';\n startNewChatButton.style.background = '#0070D1';\n startNewChatButton.style.border = 'none';\n startNewChatButton.style.color = '#FFF';\n startNewChatButton.style.textAlign = 'center';\n startNewChatButton.style.fontFamily = 'system-ui';\n startNewChatButton.style.fontSize = '16px';\n startNewChatButton.style.fontStyle = 'normal';\n startNewChatButton.style.fontWeight = '500';\n startNewChatButton.style.lineHeight = 'normal';\n startNewChatButton.style.cursor = 'pointer';\n startNewChatButton.innerText = preChatLocale.startNewChat;\n\n alertWrapper.appendChild(startNewChatButton);\n\n startNewChatButton.addEventListener('mouseover', () => {\n startNewChatButton.style.backgroundColor = '#2E93EE';\n });\n\n startNewChatButton.addEventListener('mouseout', () => {\n startNewChatButton.style.backgroundColor = '#0070D1';\n });\n\n startNewChatButton.addEventListener('click', async () => {\n await hideChatFinishAlert();\n await minimizeWidgetAndResetPrechat();\n dispatch(preChatActions.preChat.setShowPreChat(true));\n });\n }\n\n const hasConversationStarted = Object.keys(localStorage).filter(key => key.includes('.conversationStartedAt'))[0];\n localStorage.removeItem(hasConversationStarted);\n\n if (!intervalIds.length && timeSinceReset < 10) {\n const timeToDispatch = addMinutes(new Date(resetHasBeenTriggered), 10);\n const remainingTime = differenceInMilliseconds(timeToDispatch, new Date());\n const timeoutId = window.setTimeout(minimizeWidgetAndResetPrechat, remainingTime);\n intervalIds.push(timeoutId);\n }\n\n if (!resetHasBeenTriggered) {\n localStorage.setItem('resetHasBeenTriggered', new Date().toISOString());\n // will be removed after 1 minute, even if the user didn't start a new chat, is to prevent the reset again in case the user starts a new chat because of the \"agora mesmo\" + resetMessage\n localStorage.setItem('chatRecentFinished', new Date().toISOString());\n setTimeout(() => { localStorage.removeItem('chatRecentFinished'); }, 60000);\n }\n } else {\n // hide the chat finished message and enable the input\n hideChatFinishAlert();\n const inputComponent = chatComponentDocument && chatComponentDocument.getElementsByTagName('textarea')[0];\n if (inputComponent) {\n inputComponent.disabled = false;\n }\n }\n }, [chatTitle, minimizeWidgetAndResetPrechat, preChatLocale, intervalIds, hideChatFinishAlert, dispatch]);\n\n const observeZendeskChat = useCallback(() => {\n const chatComponent = document.querySelector(`[title=\"${chatTitle}\"]`);\n const chatComponentDocument = chatComponent && chatComponent.contentWindow && chatComponent.contentWindow.document;\n const inputComponent = chatComponentDocument && chatComponentDocument.getElementsByTagName('textarea')[0];\n const chatLog = chatComponentDocument && chatComponentDocument.querySelector('[role=\"log\"]');\n\n if (!inputComponent && !chatLog) {\n window.setTimeout(observeZendeskChat, 500);\n return;\n }\n\n setIsObservingChat(true);\n const config = { attributes: true, childList: true, subtree: true };\n\n const logObserver = new MutationObserver(triggerChatFinish);\n logObserver.observe(chatLog, config);\n }, [chatTitle, triggerChatFinish]);\n\n const verifyZendeskLoginRetry = useCallback((retry) => {\n const loggedInZendesk = Object.keys(localStorage).filter(key => key.includes('.appUserId'))[0];\n if (loggedInZendesk) {\n verifyUserHasActiveChat();\n } else if (retry < 2) {\n loginZendeskUserAgain(setTimeout(() => verifyZendeskLoginRetry(retry + 1), 10000));\n } else {\n const zendeskCustomerId = `${isBRServer ? 'br_' : 'es_'}${String(id)}`;\n const zendeskJWTToken = generateZendeskToken();\n logger.info('Zendesk - User is not logged in zendesk', {\n email, zendeskCustomerId, name, zendeskJWTToken,\n });\n }\n }, [id, email, name, verifyUserHasActiveChat, generateZendeskToken, loginZendeskUserAgain]);\n\n const clearUserOnSunshine = useCallback(async (retry) => {\n const requestClearSunshineUser = {\n headers: {\n Authorization: token,\n email,\n brand: COUNTRY.toLowerCase(),\n },\n url: 'v2/clear/zendesk',\n data: {\n external_id: String(id),\n },\n };\n\n try {\n await api.customerSupport.post(requestClearSunshineUser);\n logger.info('Zendesk - Sunshine user cleared', { email, id });\n\n setTimeout(() => {\n const zendeskJWTToken = generateZendeskToken();\n\n // eslint-disable-next-line no-undef\n zE('messenger', 'loginUser', (callback) => {\n callback(zendeskJWTToken);\n setTimeout(() => verifyZendeskLoginRetry(0), 10000);\n });\n }, 10000);\n } catch (e) {\n if (e.response && e.response.status !== 404) {\n logger.error('Zendesk - Error clearing sunshine user', e);\n if (retry < 2) {\n clearUserOnSunshine(retry + 1);\n return;\n }\n }\n\n setTimeout(() => {\n const zendeskJWTToken = generateZendeskToken();\n\n // eslint-disable-next-line no-undef\n zE('messenger', 'loginUser', (callback) => {\n callback(zendeskJWTToken);\n setTimeout(() => verifyZendeskLoginRetry(0), 10000);\n });\n }, 10000);\n }\n }, [id, token, generateZendeskToken, email, verifyZendeskLoginRetry]);\n\n const verifyZendeskLogin = useCallback(() => {\n const loggedInZendesk = Object.keys(localStorage).filter(key => key.includes('.appUserId'))[0];\n if (loggedInZendesk) {\n verifyUserHasActiveChat();\n } else {\n deleteSunshineUser && clearUserOnSunshine(0);\n }\n }, [clearUserOnSunshine, deleteSunshineUser, verifyUserHasActiveChat]);\n\n const loginZendeskUser = useCallback(async () => {\n const hasConversationStarted = Object.keys(localStorage).filter(key => key.includes('.conversationStartedAt'))[0];\n localStorage.removeItem(hasConversationStarted);\n\n const zendeskJWTToken = await generateZendeskToken();\n\n // eslint-disable-next-line no-undef\n zE('messenger', 'loginUser', (callback) => {\n callback(zendeskJWTToken);\n setTimeout(verifyZendeskLogin, 10000);\n });\n }, [verifyZendeskLogin, generateZendeskToken]);\n\n const startZendeskChat = () => {\n // eslint-disable-next-line no-undef\n zE('messenger', 'open');\n setWidgetIsOpen(true);\n localStorage.removeItem('chatRestarted');\n };\n\n useEffect(() => {\n if (name && email && id && zendeskExists) {\n // eslint-disable-next-line no-undef\n zE('messenger:set', 'locale', `${isBRServer ? 'pt-br' : 'es'}`);\n loginZendeskUser();\n }\n }, [zendeskExists, loginZendeskUser, email, id, name]);\n\n useEffect(() => {\n if (!isObservingChat && widgetIsOpen) {\n observeZendeskChat();\n }\n }, [widgetIsOpen, observeZendeskChat, isObservingChat]);\n\n const handleStartZenDeskChat = async ({\n department,\n primaryReason,\n secondaryReason,\n product,\n hostingId,\n domain,\n isTicket,\n priority,\n }) => {\n if (enableChatBot && screenToShowInPreChat !== 'chatbot') {\n setTimeout(() => dispatch(preChatActions.preChat.setScreen('chatbot'), 600));\n const dataToZendesk = {\n department,\n primaryReason,\n secondaryReason,\n product,\n hostingId,\n domain,\n isTicket,\n priority,\n };\n\n setDataToStartChat(dataToZendesk);\n return;\n }\n\n try {\n const { id } = summaryState;\n\n const tags = await mountZendeskTags({\n department,\n primaryReason,\n secondaryReason,\n product,\n whmcsId: id,\n departmentLocales: preChatLocale.zopimDepartments,\n priority,\n isTicket,\n v2: useNewSupport,\n });\n\n // eslint-disable-next-line no-undef\n zE('messenger:set', 'conversationFields', [\n { id: IS_PROD ? '27835972869267' : '26102773393171', value: domain },\n { id: IS_PROD ? '28285611660947' : '26102798680595', value: String(hostingId) },\n ]);\n\n if (!tags || (tags && !tags.length)) {\n logger.info('chat sem tag', {\n department, primaryReason, id,\n });\n }\n // eslint-disable-next-line no-undef\n zE('messenger:set', 'conversationTags', tags);\n await new Promise(resolve => setTimeout(resolve, 500));\n\n localStorage.removeItem('chatRestarted');\n setWidgetIsOpen(true);\n\n // eslint-disable-next-line no-undef\n zE('messenger', 'open');\n\n dispatch(preChatActions.preChat.setShowPreChat(false));\n } catch (e) {\n logger.error('Error on PreChat - method handleStartZenDeskChat', e);\n }\n };\n\n return (\n \n {!disablePreChat && zendeskExists && (\n \n \n \n Chat \n \n )}\n \n );\n};\n\nexport default withStyles(styles)(ChatButton);\n","import React from 'react';\n\n\nconst HgLogoV2 = () => (\n \n \n);\n\nexport default HgLogoV2;\n","import styled, { css, keyframes } from 'styled-components';\n\nexport const Wrapper = styled.nav`\n ${({ theme, open }) => css`\n height: 100%;\n left: 0;\n position: fixed;\n top: 0;\n transition: visibility 200ms ease-in-out;\n visibility: ${open ? 'visible' : 'hidden'};\n width: 100%;\n z-index: ${theme.layers.important};\n\n @media (min-width: ${theme.v1.breakpoints.md}){\n display: flex;\n flex-direction: column;\n flex: 1 0 auto;\n height: 100%;\n outline: none;\n overflow-y: auto;\n position: fixed;\n top: 0;\n width: 200px;\n z-index: 1200;\n }\n `}\n`;\n\nexport const Overlay = styled.div`\n ${({ theme, open }) => css`\n background-color: ${theme.shadows.grey.darkest};\n height: 100%;\n left: 0;\n opacity: ${open ? 1 : 0};\n position: absolute;\n top: 0;\n transition: opacity 200ms ease-in-out;\n width: 100%;\n z-index: ${theme.layers.base};\n\n @media (min-width: ${theme.v1.breakpoints.md}){\n display: none;\n visibility: hidden;\n }\n `}\n`;\n\nexport const Content = styled.div`\n ${({ theme, open }) => css`\n background-color: ${theme.v2.colors.brand.menuPrimaryDark};\n box-shadow: 1px 0 3px ${theme.shadows.grey.light};\n display: flex;\n flex-direction: column;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n transform: translateX(${open ? '0' : '-100%'});\n transition: transform 200ms ease-in-out;\n width: 100vw;\n z-index: ${theme.layers.header};\n\n @media (min-width: ${theme.v1.breakpoints.md}){\n max-width: 100%;\n width: 100%;\n }\n `}\n`;\n\nexport const LogoButton = styled.button`\n ${({ theme }) => css`\n background: none;\n border: 0 none;\n display: flex;\n justify-content: flex-start;\n padding: 32px;\n width: 100%;\n\n svg {\n height: auto;\n max-width: 141px;\n width: 100%;\n }\n\n @media (min-width: ${theme.v1.breakpoints.md}){\n justify-content: 'flex-start';\n padding: 32px;\n }\n `}\n`;\n\nexport const MyAccount = styled.div`\n ${({ theme }) => css`\n @media (min-width: ${theme.v1.breakpoints.md}){\n max-width: 100%;\n width: 100%;\n }\n\n @media (min-width: ${theme.v1.breakpoints.md}){\n display: none;\n }\n `}\n`;\n\nexport const ListWrapper = styled.div`\n overflow: auto;\n\n &::-webkit-scrollbar {\n width: 1px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: transparent;\n border-radius: 1px;\n }\n\n &::-webkit-scrollbar-thumb:hover {\n background: transparent;\n }\n`;\n\nexport const List = styled.ul`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n flex: 1;\n list-style: none;\n margin: 0;\n padding: 0;\n\n @media (max-width: ${theme.breakpoints.md}) {\n li:nth-child(9) { \n margin-bottom: 24px; \n } \n\n li:last-child {\n margin-bottom 24px;\n }\n\n > li:last-child {\n margin-bottom 48px;\n }\n }\n `}\n`;\n\nexport const Item = styled.li`\n ${({ theme, showInDevice }) => css`\n display: ${['mobile', 'both'].includes(showInDevice) ? 'block' : 'none'};\n margin-top: 0px;\n position: relative;\n\n &:before {\n border-top: 2px dotted ${theme.palette.primary.main};\n content: '';\n visibility: hidden;\n left: 30px;\n position: absolute;\n top: -2px;\n width: calc(100% - 60px);\n }\n\n &:last-child {\n margin-top: auto;\n }\n\n @media (min-width: ${theme.breakpoints.md}) {\n display: ${['desktop', 'both'].includes(showInDevice) ? 'block' : 'none'};\n }\n `}\n`;\n\nexport const ButtonIcon = styled.span`\n display: flex;\n\n svg {\n transition: fill 200ms ease-in-out\n }\n`;\n\nexport const ButtonText = styled.span`\n ${({ theme, variant }) => {\n const variants = {\n v1: {\n fontFamily: 'inherit',\n fontSize: '16px',\n fontWeight: theme.font.weights.regular,\n marginLeft: '15px',\n lineHeight: 'inherit',\n },\n v2: {\n fontFamily: theme.v2.font.family.primary,\n fontSize: theme.v2.font.sizes.xxs,\n fontWeight: theme.v2.font.weights.medium,\n marginLeft: '10px',\n lineHeight: theme.v2.font.lineHeight.text,\n },\n };\n\n return css`\n font-family: ${variants[variant].fontFamily};\n font-size: ${variants[variant].fontSize};\n font-weight: ${variants[variant].fontWeight};\n line-height: ${variants[variant].lineHeight};\n margin-left: ${variants[variant].marginLeft};\n text-align: left;\n transition: color 200ms ease-in-out;\n `;\n }}\n`;\n\nexport const DropdownIcon = styled.span`\n display: flex;\n margin-left: 2px;\n`;\n\nexport const Button = styled.button`${(\n {\n theme, active, open, variant, insideDropdown, fillStroke,\n },\n) => {\n const variants = {\n v1: {\n bgColor: active ? theme.palette.secondary.darkest : 'transparent',\n padding: '15px 24px',\n visibility: 'hidden',\n buttonColor: (active || open) ? theme.palette.white.light : theme.palette.white.opacity,\n buttonColorHover: (active || open) ? theme.palette.white.light : theme.palette.white.opacity,\n fontFamily: 'inherit',\n },\n v2: {\n bgColor: theme.v2.colors.brand.menuPrimaryDark,\n padding: insideDropdown ? '17px 0px' : '16px 18px 16px 16px',\n visibility: 'visible',\n buttonColor: (active || open) ? `${theme.v2.colors.brand.primaryLight} !important` : theme.v2.colors.feedback.canceledPure,\n buttonColorHover: `${theme.v2.colors.brand.primaryLight} !important`,\n fontFamily: theme.v2.font.family.primary,\n },\n };\n\n return css`\n align-items: center;\n background-color: ${variants[variant].bgColor};\n border: 0 none;\n display: flex;\n padding: ${variants[variant].padding};\n position: relative;\n transition: background-color 200ms ease-in-out;\n width: 100%;\n\n &:before{\n width: 4px;\n background-color:${active ? theme.v2.colors.brand.primaryLight : 'transparent'};\n left: 0px;\n top: 0px;\n position: absolute;\n height: 100%;\n content: ' ';\n border-radius: 0px 50px 50px 0px;\n visibility: ${active ? variants[variant].visibility : 'hidden'};\n }\n\n &:hover {\n cursor: pointer;\n\n & ${ButtonText} {\n color: ${variants[variant].buttonColorHover};\n }\n\n & ${ButtonIcon} svg, svg {\n fill: ${variants[variant].buttonColorHover};\n }\n }\n\n & ${ButtonText} {\n color: ${variants[variant].buttonColor};\n }\n\n & ${ButtonIcon} svg, svg {\n fill: ${variants[variant].buttonColor};\n\n path {\n stroke: ${fillStroke && variants[variant].buttonColor};;\n }\n }\n\n & ${DropdownIcon} {\n transform: rotate(${open ? '0deg' : '180deg'});\n transition: transform 200ms ease-in-out;\n\n svg {\n fill: ${variants[variant].buttonColor};\n }\n }\n `;\n}}\n`;\n\nconst tagShake = () => keyframes`\n 0% { transform: rotate(0deg); }\n 5% { transform: rotate(5deg); }\n 10% { transform: rotate(0deg); }\n 15% { transform: rotate(-5deg); }\n 20% { transform: rotate(0deg); }\n`;\n\nexport const Tag = styled.span`${({\n theme, tagInText, variant, shake,\n}) => {\n const variants = {\n v1: {\n margin: '0px',\n minHeight: 'unset',\n },\n v2: {\n margin: '8px 0px 0px',\n minHeight: '24px',\n },\n };\n\n return css`\n -webkit-animation: ${shake && tagShake} 2s infinite linear;\n animation-iteration-count: infinite;\n animation: ${shake && tagShake} 2s infinite linear;\n background-color: ${theme.v2.colors.feedback.attentionLight};\n border-radius: 50vh;\n bottom: 15px;\n color: ${theme.v2.colors.brand.primaryExtraDark};\n display: inline-block;\n margin: ${variants[variant].margin};\n min-height: ${variants[variant].minHeight};\n padding: 4px 16px;\n position: ${tagInText ? 'inherit' : 'absolute'};\n right: 18px;\n\n @media (max-width: ${theme.v1.breakpoints.md}){\n margin-left: 8px;\n }\n `;\n}}`;\n\nexport const Dropdown = styled.ul`\n ${({ open }) => css`\n max-height: ${open ? '305px' : 0};\n overflow: hidden;\n list-style: none;\n margin: 0;\n padding: 0;\n transition: 200ms ${open ? 'ease-in' : 'ease-out'};\n\n & ${Button} {\n padding: 8px 17px;\n }\n `}\n`;\n\nexport const DropdownItem = styled.li`\n ${({ theme, active }) => css`\n\n & ${ButtonIcon} svg {\n fill: ${active ? theme.palette.white.light : theme.palette.white.opacity};\n }\n\n & ${ButtonText} {\n color: ${active ? theme.palette.white.light : theme.palette.white.opacity};\n }\n\n &:last-child ${Button} {\n padding-bottom: 15px;\n }\n `}\n`;\n\nexport const CloseWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n position: absolute;\n right: 16px;\n top: 16px;\n\n @media (min-width: ${theme.v1.breakpoints.md}){\n visibility: hidden;\n display: none;\n }\n `}\n`;\n","import React, { useEffect, useState } from 'react';\nimport { useHistory, useLocation } from 'react-router-dom';\nimport { withI18n } from 'react-i18next';\nimport LogoV2 from '@/media/logo/HgLogoV2';\nimport { IconNetwork, IconDropdownArrow } from '@/icons';\nimport { outGoingTagManager } from '@/utils/ThirdParties/tagManager';\nimport { useResize } from '@/hooks/useResize';\nimport * as Styles from './Menu.styles';\nimport { IconButton } from 'gatorcomponents';\nimport { track as trackAmplitude } from '@amplitude/analytics-browser';\n\nconst Menu = ({\n items = [\n {\n icon: \n {item.tag.toUpperCase()}\n \n );\n\n const handleMenuClick = () => {\n onMenuClick && onMenuClick();\n };\n\n\n return (\n \n \n \n \n \n\n \n \n {menuItems.map((item) => {\n if (!item.show) {\n return;\n }\n\n let isActive = item.to === location.pathname || item.to.split('/')[1] === location.pathname.split('/')[1];\n\n if (item.id === 'drawer-menu-button-emails') {\n const firstPartOfLocation = location.pathname.split('/')[1];\n isActive = firstPartOfLocation.includes('emails') || firstPartOfLocation.includes('e-mails');\n }\n\n return (\n \n {item.children.length > 0 ? (\n <>\n handleOnDropdownClick(item)}\n variant={menuVariant}\n >\n \n {item.icon}\n \n \n {item.label}\n \n \n \n \n\n \n {item.children.map(child => child.show && (\n \n handleOnMenuClick(child, { dropdown: true })}\n variant={menuVariant}\n insideDropdown\n >\n \n {child.icon}\n \n \n {child.label}\n \n \n \n ))}\n \n \n ) : (\n handleOnMenuClick(item)}\n variant={menuVariant}\n fillStroke={item.fillStroke}\n >\n \n {item.icon}\n \n \n {item.label}\n\n {(item.tagInText || item.tag) && (\n renderTag({ item, tagInText: true, tagShaking: item.tagShaking })\n )}\n \n \n )}\n \n );\n })}\n \n \n \n \n );\n};\n\nexport default withI18n()(Menu);\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.color.indigo};\n color: ${theme.color.white};\n display: flex;\n font-size: 16px;\n justify-content: space-between;\n left: 0;\n padding: 16px;\n z-index: 9999;\n @media (max-width: ${theme.breakpoints.md}) {\n align-items: flex-start;\n }\n `}\n`;\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.color.white};\n display: flex;\n flex: 1;\n gap: 24px;\n justify-content: center;\n\n @media (max-width: ${theme.breakpoints.md}) {\n flex-direction: column;\n padding-left: 24px;\n }\n `}\n`;\n\nexport const Logo = styled.img`\n ${({ theme }) => css`\n color: ${theme.color.white};\n `}\n`;\n\nexport const Title = styled.div`\n ${({ theme }) => css`\n color: ${theme.color.white};\n font: normal normal 300 16px/19px Roboto;\n letter-spacing: 0.01px;\n @media (max-width: ${theme.breakpoints.md}) {\n text-align: center;\n font: normal normal 300 14px/19px Roboto;\n }\n `}\n`;\n\nexport const Button = styled.div`\n ${({ theme }) => css`\n border-radius: 2px;\n border: 1px solid ${theme.color.white};\n color: ${theme.color.white};\n cursor: pointer;\n font: normal normal medium 16px/21px Roboto;\n letter-spacing: 0.01px;\n padding: 6px 16px;\n &:hover {\n background-color: ${theme.palette.secondary.dark}\n }\n `}\n`;\n\nexport const CloseButton = styled.button`\n${({ theme }) => css`\n align-items: center;\n background-color: unset;\n border: unset;\n color: ${theme.color.white};\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n margin: 0;\n opacity: 1;\n padding: 0;\n width: 24px;\n `}\n`;\n","import React, { useState } from 'react';\nimport { withI18n } from 'react-i18next';\nimport { Button } from '@/pages/common/Button';\nimport { IconClose } from '@/icons';\nimport { cobreFacilTopBanner, traktoTopBanner } from '@/utils/ThirdParties/tagManager';\nimport * as Style from './TopAdvertisementHandler.styles';\n\nconst TopAdvertisementHandler = ({\n ctaLabel, title, logo, href, callback, partnerInfo,\n}) => {\n const [visible, setVisible] = useState(true);\n\n const handleClick = () => {\n if (href && href !== '#') {\n return window.open(href, '_blank');\n }\n };\n\n const handleClose = () => {\n setVisible(false);\n callback && callback();\n };\n\n const gaEventActionOnObtainPartnership = (partner) => {\n switch (partner) {\n case 'cobrefacil':\n cobreFacilTopBanner();\n break;\n case 'trakto':\n traktoTopBanner();\n break;\n default:\n break;\n }\n };\n\n return (\n visible\n && (\n \n \n {title} \n { handleClick(); gaEventActionOnObtainPartnership(partnerInfo); }}\n testId=\"partner-link-button\"\n type=\"button\"\n variant=\"darkHover\"\n />\n \n \n \n \n )\n );\n};\n\nexport default withI18n()(TopAdvertisementHandler);\n","import styled, { css } from 'styled-components';\n\nconst drawerWidth = 200;\n\nconst HeaderWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.feedback.canceledLight};\n margin-left: ${drawerWidth}px;\n position: sticky;\n top: 0px;\n width: calc(100% - ${drawerWidth}px);\n z-index: ${theme.v2.layers.awaysOnTop};\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n background-color: ${theme.v2.colors.brand.primaryDark};\n margin-left: 0px;\n width: 100%;\n }\n `}\n`;\n\nconst PageContent = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.feedback.canceledLight};\n flex-grow: 1;\n margin-left: ${drawerWidth}px;\n min-height: calc(100vh - 80px);\n transition: width 200ms ease-in-out, margin 200ms ease-in-out;\n width: calc(100% - ${drawerWidth}px);\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n margin-left: 0px;\n width: 100%;\n }\n `}\n`;\n\nexport const Styles = {\n HeaderWrapper,\n PageContent,\n};\n\n\nconst styles = theme => ({\n root: {\n flexGrow: 1,\n height: '100%',\n position: 'relative',\n zIndex: 1,\n },\n drawerMargin: {\n paddingTop: '10px',\n transition: theme.transitions.create(['width', 'margin'], {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen,\n }),\n },\n drawerOpenMargin: {\n [theme.breakpoints.up('md')]: {\n width: `calc(100% - ${drawerWidth}px)`,\n marginLeft: drawerWidth,\n },\n transition: theme.transitions.create(['width', 'margin'], {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.enteringScreen,\n }),\n },\n toolbar: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-end',\n padding: '0 8px',\n ...theme.mixins.toolbar,\n },\n content: {\n flexGrow: 1,\n minHeight: '100vh',\n },\n addedMargin: {\n paddingTop: '73px',\n },\n});\n\nexport default styles;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.color.white};\n color: ${theme.color.white};\n display: flex;\n font-size: ${theme.font.sizes.md};\n justify-content: space-between;\n left: 0;\n height:60px;\n padding: 16px;\n z-index: 9999;\n @media (max-width: ${theme.breakpoints.md}) {\n align-items: flex-start;\n }\n @media (max-width: ${theme.breakpoints.lg}) {\n align-items: flex-start;\n height:auto;\n }\n `}\n`;\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.color.white};\n display: flex;\n flex: 1;\n gap: 24px;\n justify-content: center;\n\n @media (max-width: ${theme.breakpoints.md}) {\n flex-direction: column;\n gap: 2px;\n margin-bottom: 8px;\n }\n `}\n`;\n\nexport const Title = styled.div`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.bold};\n margin-bottom:auto;\n margin-left:15px;\n margin-top:auto;\n letter-spacing: 0.01px;\n @media (max-width: ${theme.breakpoints.md}) {\n text-align: center;\n }\n `}\n`;\n\nexport const CloseButton = styled.button`\n${({ theme }) => css`\n align-items: center;\n background-color: unset;\n border: unset;\n color: ${theme.color.gray};\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n margin: 0;\n opacity: 1;\n padding: 0;\n width: 24px;\n `}\n`;\n\nexport const Link = styled.a`\n${({ theme }) => css`\n color: ${theme.palette.secondary.primary};\n display: flex;\n flex-direction: column;\n font-weight: ${theme.font.weights.medium};\n text-decoration: none;\n\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n letter-spacing: 0.01px;\n opacity: 1;\n text-align: center;\n `}\n`;\n\nexport const DescriptionDomain = styled.span`\n ${({ theme }) => css`\n color: ${theme.palette.blue.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.bold};\n line-height: 17px;\n margin-left: 3px;\n display:content\n `}\n`;\n\nexport const Footer = styled.div`\n ${() => css`\n grid-row: 3;\n display: flex;\n flex-direction: column;\n `}\n`;\nexport const DecoLine = styled.img`\n ${() => css`\n align-self: stretch;\n height:4px;\n object-fit:none;\n `}\n`;\n\nexport const CTA = styled(Link)`\n ${({ theme, arrow, isBRServer }) => css`\n color: ${theme.palette.secondary.primary};\n cursor: pointer;\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.medium};\n line-height: ${theme.font.sizes.xl};\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n\n &:after {\n content: url(${arrow});\n font-size: ${theme.font.sizes.xxxxxxl};\n font-weight: 1000;\n opacity: 0;\n position: absolute;\n transform: translate(122px, -3px);\n transition: transform 0.1s, opacity 0.1s;\n @media (max-width: ${isBRServer ? '1276px' : '1167px'}) {\n transform: translate(30px, 22px);\n }\n @media (max-width: 991px) {\n transform: translate(80px, 22px);\n }\n @media (max-width: ${theme.breakpoints.md}) {\n transform:none;\n content:none;\n }\n }\n\n &:hover:after {\n opacity: 1;\n transform: translate(142px, -3px);\n @media (max-width: ${isBRServer ? '1276px' : '1167px'}) {\n transform: translate(40px, 22px);\n }\n @media (max-width: 991px) {\n transform: translate(90px, 22px);\n }\n @media (max-width: ${theme.breakpoints.md}) {\n transform:none;\n content:none;\n }\n }\n\n @media (max-width: ${theme.breakpoints.md}) {\n display: block;\n text-decoration: underline;\n }\n\n `}\n`;\n\nexport const ArrowIcon = styled.img`\n${({ theme, arrow }) => css`\n@media (max-width: ${theme.breakpoints.md}) {\n bottom: -2px;\n content: url(${arrow});\n position: relative;\n right:-2px;\n width:16px;\n }\n `}\n`;\n\n\nexport const TitanIcon = styled.img`\n ${() => css`\n align-self: flex-end;\n height:28px;\n object-fit: contain;\n width: 34px;\n `}\n`;\n\nexport const NewLabel = styled.div`\n ${({ theme, isBr }) => {\n const letterSpacing = isBr ? '0px' : '-1px';\n const transform = isBr ? 'rotate(-45deg) translate(-6px, 3px)' : 'rotate(-45deg) translate(-7px, 3px)';\n return css`\n\n background: ${theme.color.indigo};\n clip-path: polygon(0 0, 0 100%, 100% 0);\n height: 48px;\n left:4px;\n position: absolute;\n top:4px;\n width: 48px;\n & span {\n color: ${theme.color.white};\n display:block;\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxs};\n font-weight: ${theme.font.weights.bold};\n text-transform: uppercase;\n transform: ${transform};\n letter-spacing: ${letterSpacing};\n\n }\n `;\n }}\n`;\n\n\nexport const ContentTitle = styled.div`\n display:flex;\n`;\n\nexport const ContentDescription = styled.div`\n display:flex;\n @media (max-width: 1260px) {\n display:block;\n }\n`;\n","import React, { useState, useEffect } from 'react';\nimport { withI18n } from 'react-i18next';\nimport { IconClose } from '@/icons';\nimport * as Style from './TopTitanAdvertisementHandler.styles';\nimport DecoLineLarge from '@/media/survey/decoline-large.svg';\nimport arrow from '@/media/icons/icon_arrow_right.svg';\nimport titanIcon from '@/media/icons/icon_titan.svg';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { executeWithParams } from '@/utils/ThirdParties/tagManager';\n\nconst TopTitanAdvertisementHandler = ({\n newTag, description, descriptionDomain, title, labelLink, displayModalTitanAdvertisementHandler,\n setDisplayModalTitanAdvertisementHandler, typeAdvertisement,\n}) => {\n const [visible, setVisible] = useState(true);\n\n useEffect(() => {\n if (visible) {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n `${typeAdvertisement} - ativação Titan em Meus Sites`,\n 'Exibição top banner',\n );\n }\n }, [visible, typeAdvertisement]);\n\n\n const executeGAWhenClickDisplayPlans = () => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n `${typeAdvertisement} - ativação Titan em Meus Sites`,\n ' Ver planos disponíveis',\n );\n };\n\n const handleClick = () => {\n setDisplayModalTitanAdvertisementHandler(!displayModalTitanAdvertisementHandler);\n executeGAWhenClickDisplayPlans();\n };\n\n const handleClose = () => {\n setVisible(false);\n\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n `${typeAdvertisement} - ativação Titan em Meus Sites`,\n ' Fechar top banner',\n );\n };\n\n\n return (\n visible\n && (\n <>\n \n \n \n {newTag} \n \n \n {title} \n \n \n \n {description}\n {descriptionDomain} \n \n \n \n {labelLink}\n \n \n \n\n \n \n \n \n )\n );\n};\n\nexport default withI18n()(TopTitanAdvertisementHandler);\n","import styled, { css } from 'styled-components';\n\nexport const IconWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n align-self: center;\n background-color: ${theme.palette.success.primary};\n border-radius: 50%;\n display: flex;\n height: 56px;\n justify-content: center;\n margin-top: 24px;\n width: 56px;\n `}\n`;\n\nexport const ContentWrapper = styled.div`\n align-self: center;\n margin-top:9px;\n padding-left:20px;\n padding-right:20px;\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.palette.primary.darkest};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n opacity: 1;\n text-align: left;\n `}\n`;\n\n\nexport const FooterWrapper = styled.div`\n${({ theme }) => css`\n align-self: center;\n display: flex;\n flex-direction: column;\n margin: 54px 0px 24px;\n & button {\n background: ${theme.palette.primary.main};\n color: ${theme.palette.white.light};\n font-family: 'Roboto';\n text-transform: uppercase;\n width: 100%;\n &:hover {\n background: ${theme.palette.primary.dark};\n }\n }\n & button:first-child {\n margin-bottom: 6px;\n }\n & button:disabled {\n color: ${theme.palette.grey.light};\n background: ${theme.palette.grey.ultralight};\n }\n `}\n`;\nexport const SelectContainer = styled.div`\n ${({ theme }) => css`\n color: ${theme.palette.primary.darkest};\n display: inline-block;\n height: 32px;\n position: relative;\n width: 288px;\n z-index: 2;\n @media (max-width: ${theme.breakpoints.sm}) {\n width: none;\n }\n `}\n`;\n\nexport const DivSelector = styled.div`\n margin-top:40px;\n text-align: center;\n`;\n","import { locale } from '@/utils/locale';\n\nexport const titanAdvertisement = {\n title: locale('modalTitanAdvertisement.top.title'),\n description: locale('titanAdvertisement.top.description_0'),\n descriptionDomain: locale('titanAdvertisement.top.description_1'),\n labelLink: locale('titanAdvertisement.top.labelLink'),\n titleModal: locale('modalTitanAdvertisement.title'),\n selectDomainModal: locale('modalTitanAdvertisement.selectDomain'),\n buttonLabelModal: locale('modalTitanAdvertisement.button'),\n urlEmailList: locale('routes.emailsList'),\n pageHirePlanActiveCpanel: locale('routes.titanHirePlanActiveCPanel'),\n};\n","import React, { useState } from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport * as Styles from './TitanAdvertisementModal.styles';\nimport { locale } from '@/utils/locale';\nimport { titanAdvertisement } from './TitanAdvertisementModal.locale';\nimport { Button, SelectBottomDashed } from '@/pages/common';\nimport { useHistory } from 'react-router';\nimport {\n executeWithParams,\n} from '@/utils/ThirdParties/tagManager';\n\nconst TitanAdvertisementModal = ({\n displayModal = false,\n setDisplayModal,\n domainOptions,\n testId = 'titan-advertisement-modal',\n typeAdvertisement,\n}) => {\n const [selectDomain, setSelectDomain] = useState();\n const [isDisabledButton, setDisabledButton] = useState(true);\n const history = useHistory();\n const listDomains = domainOptions.map(domainObject => ({ value: domainObject.domain, label: `@${domainObject.domain}` }));\n const [defaultLabelSelect, setDefaultLabelSelect] = useState(locale(titanAdvertisement.selectDomainModal));\n\n const handleClick = () => {\n history.push(`${locale(titanAdvertisement.urlEmailList)}${locale(titanAdvertisement.pageHirePlanActiveCpanel)}/${selectDomain.domain}?idPro=${selectDomain.pro_email_id}`);\n setDisplayModal(false);\n\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n `${typeAdvertisement} - ativação Titan em Meus Sites`,\n 'Ativar plano',\n );\n };\n\n const handleOnClose = () => {\n setDisplayModal(false);\n setSelectDomain(null);\n setDefaultLabelSelect(locale(titanAdvertisement.selectDomainModal));\n setDisabledButton(true);\n\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n `${typeAdvertisement} - ativação Titan em Meus Sites`,\n 'Fechar modal',\n );\n };\n\n\n const handleDomainSelected = (domain) => {\n const domainSelected = domainOptions.filter(domainObject => `@${domainObject.domain}` === domain.label);\n setDefaultLabelSelect(domain.label);\n\n setSelectDomain(domainSelected[0]);\n setDisabledButton(false);\n\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n `${typeAdvertisement} - ativação Titan em Meus Sites`,\n 'Selecionar domínio',\n );\n };\n\n return (\n displayModal && (\n \n \n {locale(titanAdvertisement.titleModal)} \n \n \n \n \n \n \n \n \n )\n );\n};\n\nexport default TitanAdvertisementModal;\n","import { COUNTRY } from '@/config';\n\nconst countrySufix = () => (COUNTRY !== 'br' ? COUNTRY : 'com.br');\n\nexport const getBuyProductService = () => {\n const routeWebHosting = COUNTRY === 'br' ? 'hospedagem-de-sites' : 'web-hosting';\n return `https://www.hostgator.${countrySufix()}/${routeWebHosting}`;\n};\n\nexport const getLinkServerStatus = () => `https://status.hostgator.${countrySufix()}`;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.nav`\n ${() => css`\n `}\n`;\n\nexport const NotificationsCircle = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background: ${theme.v2.colors.feedback.pendingLight};\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n font-size: 10px;\n font-weight: 500;\n height: 14px;\n justify-content: center;\n position: absolute;\n user-select: none;\n width: 14px;\n left: 28px;\n top: 12px;\n z-index: 1;\n `}\n`;\n","import React from 'react';\nimport * as Styles from './AlertsBell.styles';\nimport { IconBell } from 'gatorcomponents';\nimport { useSelector } from 'react-redux';\n\nconst AlertsBell = () => {\n const { diagnosticAlerts } = useSelector(state => state.alertsV2);\n\n const alerts = [...diagnosticAlerts];\n const unreadedAlertsAmount = alerts.filter(alert => alert.isNew).length;\n\n return (\n \n {!!unreadedAlertsAmount && (\n \n {unreadedAlertsAmount}\n \n )}\n \n );\n};\n\nexport default AlertsBell;\n","/* eslint-disable react-hooks/rules-of-hooks */\nimport {\n createElement, useCallback,\n useEffect,\n useState,\n} from 'react';\nimport { locale } from '@/utils/locale';\n\nimport {\n IconSites as gatorIconSites, IconAsaas as gatorIconAsaas, IconEmail as gatorIconEmail, IconDomain as gatorIconDomain, IconFile as gatorIconFile, IconCourses as gatorIconCourses,\n IconServices as gatorIconServices, IconSecurity as gatorIconSecurity, IconSupport as gatorIconSupport, IconExit as gatorIconExit, IconCoin as gatorIconCoin, IconPerfil as gatorIconPerfil, IconData as gatorIconData, IconPassword as gatorIconPassword, IconStatus as gatorIconStatus,\n IconInvoice as gatorIconInvoice, IconSubscription as gatorIconSubscription, IconCreditCard as gatorIconCreditCard, IconLink, IconWand,\n} from 'gatorcomponents';\n\nimport { billingAnalytics } from '@/analytics';\nimport * as analytics from '@/utils/ThirdParties/tagManager';\nimport { LOGOUT_URL } from '@/config/whmcsUrls';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { getLinkServerStatus } from '@/utils/Application/links';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport {\n ENABLE_LOGO_BUILDER,\n EXPERIENCE_ACCOUNT_SECURITY,\n} from '@/config/GrowthBook/constants';\nimport { AlertsBell as gatorAlertsBell } from '@/components/Layout/Menu/AlertsBell';\nimport { preChatActions, productsActions } from '@/redux/modules';\nimport { useDispatch, useSelector } from 'react-redux';\n\nconst useMenu = ({\n moreThanOneUser, handleClick, profileIds, MANAGE_USERS_URL,\n}) => {\n const shouldRenderCharlieAcademyPass = isBRServer;\n const isBillingSignaturesEnaled = true;\n const isAccountSecurityEnabled = useFeatureIsOn(EXPERIENCE_ACCOUNT_SECURITY);\n const enableLogoBuilder = useFeatureIsOn(ENABLE_LOGO_BUILDER);\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n const [alreadySawLogoBuilderGuide, setAlreadySawLogoBuilderGuide] = useState(true);\n const { available: logoBuilderAvailable } = useSelector(state => state.logoBuilder);\n\n const dispatch = useDispatch();\n const setAlertsVisible = (isVisible) => {\n dispatch(productsActions.myAlerts.setVisibility(isVisible));\n };\n\n useEffect(() => {\n const alreadySawGuide = localStorage.getItem('logoBuilderGuideIsDone');\n if (!alreadySawGuide) {\n setAlreadySawLogoBuilderGuide(false);\n }\n }, [alreadySawLogoBuilderGuide]);\n\n\n window.addEventListener('storage', () => {\n setAlreadySawLogoBuilderGuide(true);\n });\n\n const startSupport = () => {\n dispatch(preChatActions.preChat.setShowPreChat());\n };\n\n const createItem = useCallback(({\n active = false,\n children = [],\n exitApp = false,\n showInDevice = 'mobile',\n icon = null,\n id = '',\n label = 'No Label',\n onClick = () => { },\n open = false,\n show = true,\n tag = '',\n target = '_self',\n to = '',\n tagInText,\n tagShaking = false,\n fillStroke = false,\n }) => ({\n active,\n children,\n exitApp,\n showInDevice,\n icon: icon ? createElement(icon) : null,\n id,\n label,\n onClick,\n open,\n show,\n tag,\n target,\n to,\n tagInText,\n tagShaking,\n fillStroke,\n }), []);\n\n const menuArrayV2 = ({ asaas }) => [\n createItem({\n icon: gatorIconSites,\n id: 'drawer-menu-button-sites-page',\n label: locale('menu.sitesPage'),\n to: locale('routes.sitesPage'),\n showInDevice: 'both',\n active: true,\n }),\n createItem({\n icon: gatorIconEmail,\n id: 'drawer-menu-button-emails',\n label: locale('menu.emails'),\n to: locale('routes.emailsList'),\n showInDevice: 'both',\n }),\n createItem({\n icon: gatorIconDomain,\n id: 'drawer-menu-button-domains',\n label: locale('menu.domains'),\n to: locale('routes.domains'),\n showInDevice: 'both',\n }),\n createItem({\n icon: gatorIconFile,\n id: 'drawer-menu-button-products',\n label: locale('menu.v2.products'),\n showInDevice: 'both',\n to: locale('routes.products'),\n }),\n createItem({\n icon: gatorIconSecurity,\n id: 'drawer-menu-button-security',\n label: locale('menu.security'),\n to: locale('routes.security'),\n show: isBRServer,\n onClick: () => analytics.sitelockMenuButton(),\n showInDevice: 'both',\n }),\n createItem({\n icon: IconWand,\n id: 'drawer-menu-button-logo-builder',\n label: locale('menu.logoBuilder'),\n to: locale('routes.logoBuilder'),\n tag: locale('tag.new'),\n showInDevice: 'both',\n show: enableLogoBuilder && isBRServer && !!logoBuilderAvailable,\n tagShaking: !alreadySawLogoBuilderGuide,\n fillStroke: true,\n }),\n createItem({\n icon: IconLink,\n id: 'drawer-menu-button-link-na-bio',\n label: locale('menu.linkNaBio'),\n to: locale('routes.linkNaBio'),\n showInDevice: 'both',\n }),\n createItem({\n icon: gatorIconServices,\n id: 'drawer-menu-button-mktplace',\n label: locale('menu.mktPlace'),\n to: locale('routes.mktPlace'),\n show: isBRServer,\n onClick: () => analytics.mktPlaceAcquireButton({\n name: 'Potencialize seu negócio',\n menu: true,\n }),\n showInDevice: 'both',\n }),\n createItem({\n icon: gatorIconCourses,\n id: 'drawer-menu-button-courses',\n label: locale('menu.courses'),\n to: locale('routes.courses'),\n show: shouldRenderCharlieAcademyPass,\n showInDevice: 'both',\n }),\n createItem({\n icon: gatorIconAsaas,\n id: 'drawer-menu-button-asaas',\n label: (asaas && asaas.label) ? asaas.label : '',\n to: locale('routes.asaas'),\n show: isBRServer,\n tagInText: asaas.tagInText,\n onClick: () => {\n analytics.menuAsaasClick(asaas.label);\n },\n showInDevice: 'both',\n }),\n createItem({\n label: locale('menu.newBilling'),\n id: 'drawer-menu-button-newBilling',\n icon: gatorIconCoin,\n showInDevice: 'mobile',\n show: isBillingSignaturesEnaled,\n children: [\n createItem({\n label: locale('menu.billing'),\n icon: gatorIconInvoice,\n id: 'drawer-menu-button-billing',\n to: `${locale('routes.invoices')}${locale('routes.unpaid')}`,\n show: true,\n }),\n createItem({\n label: locale('menu.subscriptions'),\n icon: gatorIconSubscription,\n id: 'drawer-menu-button-billing-subscriptions',\n to: `${locale('routes.subscriptions')}`,\n onClick: () => subscriptionAnalytics.subscriptionsMenuClick(),\n show: true,\n }),\n createItem({\n label: locale('menu.creditCard'),\n icon: gatorIconCreditCard,\n id: 'drawer-menu-button-billing-creditCard',\n to: `${locale('routes.creditcard')}`,\n onClick: () => subscriptionAnalytics.subscriptionsMenuClick(),\n show: true,\n }),\n\n ],\n }),\n createItem({\n exitApp: true,\n icon: gatorIconSupport,\n id: 'drawer-menu-button-help',\n label: locale('menu.support'),\n to: locale('routes.help'),\n onClick: () => startSupport(),\n showInDevice: 'mobile',\n }),\n createItem({\n exitApp: true,\n icon: gatorAlertsBell,\n id: 'drawer-menu-button-notifications',\n label: locale('menu.myAlerts'),\n onClick: () => setAlertsVisible(true),\n show: true,\n showInDevice: 'mobile',\n }),\n createItem({\n label: `${locale('menu.profile')}`,\n icon: gatorIconPerfil,\n showInDevice: 'mobile',\n show: isBillingSignaturesEnaled,\n children: [\n createItem({\n label: `${locale('menu.myData')}`,\n icon: gatorIconData,\n id: 'drawer-menu-button-billing',\n to: `${locale('routes.myData')}`,\n show: true,\n }),\n createItem({\n label: `${locale('menu.changePassword')}`,\n icon: gatorIconPassword,\n id: 'drawer-menu-button-billing-subscriptions',\n to: `${locale('routes.changePassword')}`,\n onClick: () => subscriptionAnalytics.subscriptionsMenuClick(),\n show: !isAccountSecurityEnabled,\n }),\n createItem({\n label: `${locale('menu.accountSecurity')}`,\n icon: gatorIconPassword,\n id: 'drawer-menu-button-profile-account-security',\n to: `${locale('routes.accountSecurity')}`,\n show: isAccountSecurityEnabled,\n }),\n createItem({\n label: `${locale('menu.servicesStatus')}`,\n icon: gatorIconStatus,\n id: 'drawer-menu-button-billing-subscriptions',\n to: getLinkServerStatus(),\n onClick: () => subscriptionAnalytics.subscriptionsMenuClick(),\n show: true,\n }),\n createItem({\n id: `${locale('menu.manageUsers')}`,\n icon: gatorIconPerfil,\n leftIconSize: 'md',\n label: locale('menu.manageUsers'),\n show: moreThanOneUser,\n onClick: () => handleClick({ id: profileIds.manageUsers, route: MANAGE_USERS_URL, label: `${locale('menu.manageUsers')}` }),\n }),\n createItem({\n exitApp: true,\n icon: gatorIconExit,\n id: 'drawer-menu-button-logout',\n label: locale('menu.quit'),\n to: LOGOUT_URL,\n showInDevice: 'mobile',\n show: true,\n }),\n ],\n }),\n ];\n\n const items = ({ asaasVariation }) => {\n let asaasLabel = '';\n let tagInText = false;\n switch (asaasVariation) {\n case 'variation_B':\n asaasLabel = locale('menu.asaas_b');\n break;\n case 'variation_C':\n asaasLabel = locale('menu.asaas_c');\n tagInText = true;\n break;\n case 'variation_A':\n default:\n asaasLabel = locale('menu.asaas_a');\n }\n\n return menuArrayV2({\n asaas: { label: asaasLabel, tagInText },\n });\n };\n\n return {\n createItem,\n items,\n };\n};\n\nexport default useMenu;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n padding: 0 40px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding: 0;\n }\n `}\n`;\n\nexport const Row = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: row;\n padding: 13px 0px;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n padding: 20px 16px;\n }\n `}\n`;\n\nexport const IconWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n\n > div {\n display: flex;\n }\n\n svg {\n fill: ${theme.v2.colors.neutral.lowMedium};\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n fill: ${theme.v2.colors.brand.primaryLight};\n }\n }\n `}\n`;\n\nexport const IconButton = styled.button`\n background-color: transparent;\n border: 0px;\n cursor: pointer;\n display: flex;\n`;\n\nexport const PageName = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n display: block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n line-height:${theme.v2.font.lineHeight.text};\n margin: 0px 0px 0px 8px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n color: ${theme.v2.colors.brand.primaryLight};\n font-size: ${theme.v2.font.sizes.xs};\n }\n `}\n`;\n\nexport const ActionsWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: row;\n margin: 0 0 0 auto;\n min-width: 591px;\n\n div {\n right: 0px;\n }\n\n button {\n white-space: nowrap;\n\n svg {\n flex: 0 0 24px;\n }\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n display: none;\n }\n `}\n`;\n\nexport const FirstFloatingWrapper = styled.div`\n align-items: center;\n display: flex;\n\n > div > div > div:first-child {\n button{\n padding: 6px 16px;\n }\n }\n`;\n\n\nexport const LastFloatingWrapper = styled.div`\n align-items: center;\n display: flex;\n\n > div > div > div:first-child {\n button{\n padding: 6px 0px 6px 8px;\n }\n }\n`;\n","export const profileIds = {\n myData: 'myData',\n changePassword: 'changePassword',\n accountSecurity: 'accountSecurity',\n serviceStatus: 'serviceStatus',\n manageUsers: 'manageUsers',\n logout: 'logout',\n};\n\nexport const financialIds = {\n invoices: 'invoices',\n subscriptions: 'subscriptions',\n creditCard: 'creditCard',\n};\n\n\nexport const supportIds = {\n support: 'support',\n};\n","import styled, { css } from 'styled-components';\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 15px 0px 24px;\n padding: 0px 8px;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n padding: 0px 8px;\n\n strong {\n align-items: center;\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n margin: 24px 0px 0px;\n \n &::before {\n background-color: ${theme.v2.colors.neutral.lowDark};\n border-radius: 100%;\n content: \"\";\n display: flex;\n flex-shrink: 0;\n flex: 0 0 2px;\n margin: 0px 8px;\n min-height: 5px;\n min-width: 5px;\n }\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n font-size:${theme.v2.font.sizes.xxs}\n }\n `}\n`;\n\nexport const AlertWrapper = styled.div`\n align-items: flex-start;\n display: flex;\n flex-direction: row;\n flex-warp: wrap;\n gap:10px;\n margin: 24px 0px 0px;\n padding: 0px 8px;\n\n svg {\n flex-shrink: 0;\n }\n`;\n\nexport const AlertDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n\n a {\n display: inline;\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n font-size:${theme.v2.font.sizes.xxs}\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 8px;\n justify-content: center;\n margin: 24px 0px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n flex-direction: column;\n gap: 16px;\n margin: 24px auto;\n max-width: fit-content;\n\n button {\n max-height: 52px;\n padding: 13px 24px;\n }\n }\n\n\n button {\n max-height: 52px;\n }\n `}\n`;\n","import React from 'react';\nimport { Modal } from '@/pages/common';\nimport * as Styles from './BackupModal.styles';\nimport { Button, IconInfo } from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { productsActions } from '@/redux/modules';\nimport Loader from '@/components/Layout/Loader';\nimport { useHistory } from 'react-router';\nimport { backupAnalytics } from '@/analytics';\n\nconst BackupModal = ({\n externalId,\n onClose,\n}) => {\n const { cPanelLoading } = useSelector(state => state.products);\n const dispatch = useDispatch();\n const history = useHistory();\n const { backup: backupLocale, routes: routesLocale } = useLocale();\n\n const handleClose = (willGoToBackup) => {\n onClose && onClose(willGoToBackup);\n };\n\n const goToCPanel = () => {\n dispatch(productsActions.cPanelSSO.requestLink({ hostingId: externalId, backup: true }));\n backupAnalytics.modalGoToCpanel();\n };\n\n const goToBackup = () => {\n backupAnalytics.modalGoToBackup();\n history.push(`${routesLocale.products}${routesLocale.productdetail}/${externalId}${routesLocale.backup}`);\n handleClose(true);\n };\n\n return (\n \n {backupLocale.modal.title} \n \n {backupLocale.modal.description()}\n \n\n \n \n {backupLocale.modal.alertDescription()}\n \n \n\n \n \n \n );\n};\n\nexport default BackupModal;\n","import styled, { css } from 'styled-components';\n\nexport const LogoWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: 16px;\n justify-content: center;\n margin: 26px 0px 0px;\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n flex-direction: row-reverse;\n flex-wrap: nowrap;\n }\n `}\n`;\n\nexport const Logo = styled.img`\n max-width:140px;\n`;\n\nexport const CustomTag = styled.span`\n ${({ theme }) => css`\n background-color:${theme.v2.colors.feedback.attentionLight};\n border-radius: 50vh;\n color:${theme.v2.colors.brand.primaryExtradark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n padding: 0px 20px;\n `}\n`;\n\nexport const TitleWrapper = styled.h2`\n ${({ theme }) => css`\n align-items: center;\n color:${theme.v2.colors.neutral.lowDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.regular};\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px auto 0px;\n text-align:center;\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n font-size: ${theme.v2.font.sizes.md};\n }\n `}\n`;\n\nexport const DescriptionWrapper = styled.p`\n ${({ theme }) => css`\n align-items: center;\n color:${theme.v2.colors.neutral.lowDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 4px auto 0px;\n max-width: 736px;\n text-align:center;\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const List = styled.ul`\n ${({ theme }) => css`\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n gap: 16px;\n list-style: none;\n margin: 40px 0px 0px;\n padding: 0px;\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n display: inline-flex;\n flex-direction:row;\n flex-wrap: nowrap;\n justify-content: space-between;\n }\n `}\n`;\n\nexport const ListItem = styled.li`\n ${({ theme }) => css`\n align-items: center;\n color:${theme.v2.colors.neutral.lowDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.bold};\n font-weight: ${theme.v2.font.weights.bold};\n gap: 4px;\n justify-content: center;\n max-width: 234px;\n\n svg {\n flex: 0 0 24px;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n margin: 40px 0px 0px;\n`;\n","import { collect } from '@/analytics';\n\nconst EVENTS = {\n NAME: 'gaEvent',\n CATEGORY: {\n BUY: 'Compra Sitelock',\n LANDINGPAGE: 'Ações landingpage',\n MANAGE_FREE_SITELOCK_ACCESS: 'Acessos à Área do SiteLock',\n COPY_SECURITY_SEAL: 'Selos de Segurança',\n TABS_CHANGES: 'Acesso às Abas do Produto',\n CONTRACT_NOW_CLICK: 'Cliques no Botão \"Contrate Agora\"',\n SITELOCK_FREE: 'sitelock_free',\n },\n ACTION: {\n SELECT_DOMAIN: 'Selecionar um domínio contratado com a HostGator',\n TYPE_DOMAIN: 'Digitar outro domínio',\n BUY_NOW: 'Sitelock Contrate agora',\n SEE_ALL_PLANS: 'Ver todos os planos SiteLock',\n PROTECT_MY_SITE: 'Quero proteger meu site',\n WANT_MORE_PROTECTION: 'Quero mais proteção',\n GET_NOW_ANCHOR: 'Contrate agora (âncora)',\n MANAGE_FREE_SITELOCK_ACCESS: 'Acessos à tela \"Gerenciar SiteLock Grátis\"',\n COPY_SECURITY_SEAL: 'Cliques em \"Copiar Selo\" na tela de Selo de Segurança',\n TABS_CHANGES: label => `Cliques na aba \"${label}\"`,\n CONTRACT_NOW_CLICK: 'Cliques no botão \"Contrate Agora\" de um dos planos do SiteLock na tela de upgrade',\n SHOW_LEGACY_MODAL: 'Exibição_modal',\n REDIRECT_LEGACY_MODAL: 'Acessar_Sitelock',\n CLOSE_LEGACY_MODAL: 'Fechar_modal',\n },\n LABEL: {\n MANAGE_FREE_SITELOCK_ACCESS: 'Número de acessos à tela \"Gerenciar SiteLock Grátis\"',\n COPY_SECURITY_SEAL: 'Número de selos de segurança copiados',\n TABS_CHANGES: 'Número de vezes que a aba é acessada pelos usuários',\n CONTRACT_NOW_CLICK: 'Número de cliques no botão \"Contrate Agora\" para cada plano',\n LEGACY_MODAL: 'Modal_SitelockFree_Legados',\n },\n};\n\nconst gaSelectDomain = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.BUY,\n gaEventAction: EVENTS.ACTION.SELECT_DOMAIN,\n gaEventLabel: 'Landingpage Sitelock',\n });\n};\n\nconst gaTypeDomain = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.BUY,\n gaEventAction: EVENTS.ACTION.TYPE_DOMAIN,\n gaEventLabel: 'Landingpage Sitelock',\n });\n};\n\nconst gaCyclePaymentClick = (cycle) => {\n let actionGa = '';\n switch (cycle) {\n case 'annually':\n actionGa = 'Sitelock Anual';\n break;\n case 'semiannually':\n actionGa = 'Sitelock Semestral';\n break;\n case 'quarterly':\n actionGa = 'Sitelock Trimestral';\n break;\n case 'monthly':\n actionGa = 'Sitelock Mensal';\n break;\n default:\n break;\n }\n\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.BUY,\n gaEventAction: actionGa,\n gaEventLabel: 'Landingpage Sitelock',\n });\n};\n\nconst gaSelectPaymentMethod = (paymentMethod) => {\n let actionGa = '';\n switch (paymentMethod) {\n case 'paypal':\n case 'gp_paypal':\n actionGa = 'Codeguard Paypal';\n break;\n case 'boleto':\n case 'gp_boleto':\n actionGa = 'Codeguard Boleto';\n break;\n case 'braspag_credit_1x':\n actionGa = 'Codeguard Cartão de crédito';\n break;\n default:\n break;\n }\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.BUY,\n gaEventAction: actionGa,\n gaEventLabel: 'Landingpage Sitelock',\n });\n};\n\nconst gaBuySitelock = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.BUY,\n gaEventAction: EVENTS.ACTION.BUY_NOW,\n gaEventLabel: 'Landingpage Sitelock',\n });\n};\n\nconst gaSeeAllPlans = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.LANDINGPAGE,\n gaEventAction: EVENTS.ACTION.SEE_ALL_PLANS,\n gaEventLabel: 'Landingpage Sitelock',\n });\n};\n\nconst gaProtectMySite = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.LANDINGPAGE,\n gaEventAction: EVENTS.ACTION.PROTECT_MY_SITE,\n gaEventLabel: 'Landingpage Sitelock',\n });\n};\n\nconst gaWantMoreProtection = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.LANDINGPAGE,\n gaEventAction: EVENTS.ACTION.WANT_MORE_PROTECTION,\n gaEventLabel: 'Landingpage Sitelock',\n });\n};\n\nconst gaGetNowAnchor = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.LANDINGPAGE,\n gaEventAction: EVENTS.ACTION.GET_NOW_ANCHOR,\n gaEventLabel: 'Landingpage Sitelock',\n });\n};\n\nconst gaFreeSitelockAccess = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.MANAGE_FREE_SITELOCK_ACCESS,\n gaEventAction: EVENTS.ACTION.MANAGE_FREE_SITELOCK_ACCESS,\n gaEventLabel: EVENTS.LABEL.MANAGE_FREE_SITELOCK_ACCESS,\n });\n};\n\nconst gaCopySecuritySeal = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.COPY_SECURITY_SEAL,\n gaEventAction: EVENTS.ACTION.COPY_SECURITY_SEAL,\n gaEventLabel: EVENTS.LABEL.COPY_SECURITY_SEAL,\n });\n};\n\nconst gaTabsChange = (label = '') => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.TABS_CHANGES,\n gaEventAction: EVENTS.ACTION.TABS_CHANGES(label),\n gaEventLabel: EVENTS.LABEL.TABS_CHANGES,\n });\n};\n\nconst gaHandleContractNow = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.CONTRACT_NOW_CLICK,\n gaEventAction: EVENTS.ACTION.CONTRACT_NOW_CLICK,\n gaEventLabel: EVENTS.LABEL.CONTRACT_NOW_CLICK,\n });\n};\n\nconst gaShowSitelockFreeModal = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.SITELOCK_FREE,\n gaEventAction: EVENTS.ACTION.SHOW_LEGACY_MODAL,\n gaEventLabel: EVENTS.LABEL.LEGACY_MODAL,\n });\n};\n\nconst gaRedirectSitelockFreeModal = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.SITELOCK_FREE,\n gaEventAction: EVENTS.ACTION.REDIRECT_LEGACY_MODAL,\n gaEventLabel: EVENTS.LABEL.LEGACY_MODAL,\n });\n};\n\nconst gaCloseSitelockFreeModal = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.SITELOCK_FREE,\n gaEventAction: EVENTS.ACTION.CLOSE_LEGACY_MODAL,\n gaEventLabel: EVENTS.LABEL.LEGACY_MODAL,\n });\n};\n\nconst analytics = {\n gaSelectDomain,\n gaTypeDomain,\n gaCyclePaymentClick,\n gaSelectPaymentMethod,\n gaBuySitelock,\n gaSeeAllPlans,\n gaProtectMySite,\n gaWantMoreProtection,\n gaGetNowAnchor,\n newSitelockPage: {\n gaFreeSitelockAccess,\n gaCopySecuritySeal,\n gaTabsChange,\n gaHandleContractNow,\n },\n sitelockFreeModal: {\n show: gaShowSitelockFreeModal,\n redirect: gaRedirectSitelockFreeModal,\n close: gaCloseSitelockFreeModal,\n },\n};\n\nexport default analytics;\n","import { Modal } from '@/pages/common';\nimport React, { useEffect } from 'react';\nimport sitelock from '@/media/security/sitelock.svg';\nimport * as Styles from './SitelockProvisionedModal.styles';\nimport useLocale from '@/hooks/useLocale';\nimport { Button, IconCheck } from 'gatorcomponents';\nimport { useHistory } from 'react-router';\nimport { securityActions } from '@/redux/modules';\nimport { useDispatch } from 'react-redux';\nimport withErrorBoundary from '@/utils/errorBoundary/errorBoundary.jsx';\nimport logger from '@/utils/logger';\nimport { sitelockAnalytics } from '@/analytics/security/sitelock';\n\nconst SitelockProvisionedModal = ({ setSiteLockModalIsClosed }) => {\n const history = useHistory();\n const { security: securityLocale, routes: routesLocale } = useLocale();\n const { provisionatedModal: provisionatedModalLocale } = securityLocale;\n const dispatch = useDispatch();\n\n useEffect(() => {\n sitelockAnalytics.sitelockFreeModal.show();\n }, []);\n\n const handleView = (redirect) => {\n try {\n if (!redirect) {\n sitelockAnalytics.sitelockFreeModal.close();\n }\n dispatch(securityActions.newSiteLock.saw.request());\n setSiteLockModalIsClosed(true);\n } catch (e) {\n logger.error('Error on SitelockProvisionedModal - method handleView', e);\n }\n };\n\n const handleClick = () => {\n try {\n sitelockAnalytics.sitelockFreeModal.redirect();\n history.push(`${routesLocale.security}`);\n handleView(true);\n setSiteLockModalIsClosed(true);\n } catch (e) {\n logger.error('Error on SitelockProvisionedModal - method handleClick', e);\n }\n };\n\n return (\n \n \n \n {provisionatedModalLocale.tag}\n \n\n \n\n \n {provisionatedModalLocale.title}\n \n\n \n {provisionatedModalLocale.description}\n \n\n \n {provisionatedModalLocale.items.map(item => (\n \n \n ))}\n \n\n \n \n \n );\n};\n\nexport default withErrorBoundary(SitelockProvisionedModal, 'SitelockProvisionedModal');\n","import React, { useState, useEffect } from 'react';\nimport * as Styles from './HeaderV2.styles';\nimport { useResize } from '@/hooks/useResize';\n\nimport {\n IconSites as GatorIconSites,\n IconEmail as GatorIconEmail,\n IconDomain as GatorIconDomain,\n IconFile as GatorIconFile,\n IconSecurity as GatorIconSecurity,\n IconServices as GatorIconServices,\n IconCourses as GatorIconCourses,\n IconAsaas as GatorIconAsaas,\n IconSubscription as GatorIconSubscription,\n IconInvoice as GatorIconInvoice,\n IconSupport as GatorIconSupport,\n IconData as GatorIconData,\n IconCreditCard as GatorIconCreditCard,\n IconPassword as GatorIconPassword,\n FloatingMenu,\n Button,\n IconButton,\n IconWand,\n} from 'gatorcomponents';\nimport { supportIds } from './HeaderV2.enum';\nimport MyAlerts from '../MyAlerts/MyAlerts';\nimport { BackupModal } from './components/BackupModal';\nimport { backupActions, preChatActions, securityActions } from '@/redux/modules';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { SitelockProvisionedModal } from './components/SitelockProvisionedModal';\nimport { isBRServer } from '@/utils/Validators/validation';\n\nconst HeaderV2 = ({\n onToggleMenu,\n routeSupport = '/',\n labelSupport = 'sample support',\n handleClick,\n profileItems = [{\n id: 'sample profile id',\n leftIcon: 'IconData',\n leftIconSize: 'md',\n label: 'sample label',\n onClick: () => null,\n }],\n financialItems = [{\n id: 'sample financial id',\n leftIcon: 'IconData',\n leftIconSize: 'md',\n label: 'sample label',\n onClick: () => null,\n }],\n handleChangeRoute,\n pageIcon,\n hasGoBackButton,\n pageTitle = 'sample title',\n financialLabel = 'sample financial',\n profileLabel = 'sample profile',\n myAlertsLabel = 'sample alerts',\n allNotificationsLabel,\n ticketNotificationsLabel,\n seeMoreLabel,\n alertsTooltipLabel,\n noNotificationsLabel,\n}) => {\n const [alertsLabel, setAlertsLabel] = useState(myAlertsLabel);\n const [profileMenuLabel, setProfileMenuLabel] = useState(profileLabel);\n const view = useResize();\n const isMobile = view.width < 960;\n const dispatch = useDispatch();\n const { showBackupRedirectModal, productId, redirectFromPreChat } = useSelector(state => state.backup);\n const { hasNewSitelock } = useSelector(state => state.security);\n const [sitelockModalIsClosed, setSiteLockModalIsClosed] = useState(false);\n\n const checkHasNewSitelock = () => dispatch(securityActions.newSiteLock.check.request());\n\n useEffect(() => {\n function setLabelByWidth() {\n if (window.innerWidth < 1280) {\n setAlertsLabel('');\n setProfileMenuLabel('');\n } else {\n setAlertsLabel(myAlertsLabel);\n setProfileMenuLabel(profileLabel);\n }\n }\n setLabelByWidth();\n\n if (isBRServer) {\n checkHasNewSitelock();\n }\n\n window.addEventListener('resize', setLabelByWidth);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleToggleMenu = () => {\n onToggleMenu && onToggleMenu();\n };\n\n const renderIconElement = () => {\n if (hasGoBackButton) {\n return (\n \n {showBackupRedirectModal && (\n \n \n {renderIconElement()}\n \n\n \n {pageTitle()}\n \n\n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default HeaderV2;\n","import { COUNTRY } from '@/config';\n\nconst SERVICE_URL_BY_BRAND = {\n br: 'https://status.hostgator.com.br/',\n mx: 'https://status.hostgator.mx/',\n co: 'https://status.hostgator.mx/',\n cl: 'https://status.hostgator.mx/',\n ar: 'https://status.hostgator.mx/',\n pe: 'https://status.hostgator.mx/',\n bo: 'https://status.hostgator.mx/',\n cr: 'https://status.hostgator.mx/',\n do: 'https://status.hostgator.mx/',\n ec: 'https://status.hostgator.mx/',\n sv: 'https://status.hostgator.mx/',\n pa: 'https://status.hostgator.mx/',\n py: 'https://status.hostgator.mx/',\n uy: 'https://status.hostgator.mx/',\n};\n\nexport const SERVICE_STATUS_URL = SERVICE_URL_BY_BRAND[COUNTRY];\n","import { WHMCS_URL } from '@/config/';\n\nexport const MANAGE_USERS_URL = `${WHMCS_URL}/clientarea.php?action=contacts`;\n","import styled, { css } from 'styled-components';\n\nexport const GtmModalWrapper = styled.div`\n align-items: center;\n background-color: rgba(31, 32, 68, 0.4);\n bottom: 0;\n display: flex;\n left: 0;\n opacity: 0;\n position: fixed;\n right: 0;\n top: 0;\n display: 'none';\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n @keyframes fadeOut {\n from {\n opacity: 1;\n z-index: 99;\n }\n to {\n opacity: 0;\n z-index: -1;\n }\n }\n &.in {\n display: 'flex';\n opacity: 1;\n animation: fadeIn 0.2s 0.02s forwards;\n z-index: 1500;\n }\n &.out {\n animation: fadeOut 0.2s forwards;\n pointer-events: none;\n display: none;\n }\n &:not(.in) {\n display: none;\n pointer-events: none;\n }\n`;\n\nexport const GtmModalContent = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n img {\n width: 100%;\n }\n`;\n\nexport const GtmModalCloseButton = styled.button`\n ${({ theme }) => css`\n align-items: center;\n background-color: #fff;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n height: 24px;\n height: 48px;\n justify-content: center;\n margin: 0 0 16px auto;\n padding: 0;\n width: 48px;\n svg {\n pointer-events: none;\n }\n @media (min-width: ${theme.v1.breakpoints.lg}) {\n height: 38px;\n width: 38px;\n }\n `}\n`;\n\nexport const DefaultContainer = styled.div`\n display: flex;\n flex: 1;\n justify-content: center;\n padding: 0px 10px;\n`;\n\nexport const DefaultPanel = styled.div`\n ${({ theme }) => css`\n background-color: 'transparent';\n flex: 1;\n max-height: 100vh;\n max-width: fit-content;\n overflow: auto;\n @media (min-width: ${theme.v1.breakpoints.lg}) {\n max-width: fit-content;\n }\n `}\n`;\n","import React, { useCallback } from 'react';\nimport { IconClose } from 'gatorcomponents';\nimport * as Style from './ModalGtm.styles';\n\nconst ModalGtm = ({ id = 'gtm' }) => {\n const handleClose = useCallback(() => {\n const component = document.getElementById(`modal-wrapper-${id}`);\n component.classList.remove('in');\n }, [id]);\n\n const onClickHandler = (event) => {\n event.stopPropagation();\n const target = event.target.id;\n\n if (\n target === `modal-wrapper-${id}`\n || target === `modal-container-${id}`\n || target === `modal-button-close-${id}`\n ) {\n handleClose();\n }\n };\n\n return (\n \n \n \n \n \n \n \n );\n};\n\nexport default ModalGtm;\n","import styled, { css } from 'styled-components';\n\nexport const Title = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weighth: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weighth: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 0px;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n margin: 43px 0px 0px 0px;\n`;\n","import React, { useState } from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport * as Styles from './LogoutModal.styles';\nimport { Button, IconLoading } from 'gatorcomponents';\n\nconst LogoutModal = ({\n onClose = () => {},\n title = 'title',\n description = 'description',\n cta = 'cta',\n}) => {\n const [loading, setLoading] = useState(false);\n\n const handleClick = () => {\n onClose && onClose();\n setLoading(true);\n };\n\n return (\n \n \n {title}\n \n\n \n {description}\n \n\n \n \n \n );\n};\n\nexport default LogoutModal;\n","import styled, { css, keyframes } from 'styled-components';\n\nexport const LogoBuilderGuide = styled.div`\n align-items: flex-start;\n display: flex;\n flex-wrap: wrap;\n gap: 22px;\n`;\n\nexport const GuideTexts = styled.div`\n max-width: 175px;\n`;\n\nexport const Image = styled.img`\n max-width: 56px;\n -webkit-transform: scaleX(-1);\n transform: scaleX(-1);\n`;\n\nexport const GuideTitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.bold};\n margin: 0;\n `};\n`;\n\nexport const GuideDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 0;\n `};\n`;\n\n\nconst boxShadowGrowth = ({ theme }) => keyframes`\n 0% {\n top: 53%;\n left: 56%;\n width: 0vh;\n height: 0vh;\n border-radius: 50%;\n box-shadow: 0px 0px 0px 0vw ${theme.v2.colors.brand.primaryExtraDark}99;\n \n }\n 100% {\n top: 0%;\n left: 0%;\n width: 98vw;\n height: 98vh;\n border-radius: 0%;\n box-shadow: 0px 0px 0px 120vw ${theme.v2.colors.brand.primaryExtraDark}99;\n }\n`;\n\n\nexport const GuideShadow = styled.div`\n ${({ theme }) => css`\n animation: ${boxShadowGrowth} 0.5s;\n animation-timing-function: ease-in-out;\n -webkit-animation-timing-function: ease-in-out;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n position: absolute;\n background-color: ${theme.v2.colors.brand.primaryExtraDark}99;\n z-index: 99;\n `};\n`;\n","import React, { useEffect, useState } from 'react';\nimport * as Styles from './Guides.styles';\nimport { Guide } from 'gatorcomponents';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport Snappy from '@/media/billing/snappy-with-shadow.svg';\nimport { useSelector } from 'react-redux';\nimport useLocale from '@/hooks/useLocale';\nimport { useResize } from '@/hooks/useResize';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { ENABLE_LOGO_BUILDER } from '@/config/GrowthBook/constants';\n\nconst Guides = () => {\n const [alreadySawLogoBuilderGuide, setAlreadySawLogoBuilderGuide] = useState(true);\n const { template: templateLocale } = useLocale();\n const view = useResize();\n const isMobile = view.width < 960;\n const enableLogoBuilder = useFeatureIsOn(ENABLE_LOGO_BUILDER);\n const { available: logoBuilderAvailable } = useSelector(state => state.logoBuilder);\n\n useEffect(() => {\n const alreadySawGuide = localStorage.getItem('logoBuilderGuideIsDone');\n if (!alreadySawGuide) {\n setAlreadySawLogoBuilderGuide(false);\n }\n }, [alreadySawLogoBuilderGuide]);\n\n const markLogoBuilderAsRead = () => {\n localStorage.setItem('logoBuilderGuideIsDone', 'true');\n setAlreadySawLogoBuilderGuide(true);\n window.dispatchEvent(new Event('storage'));\n };\n\n const LogoBuilderGuideContent = () => (\n \n \n \n {templateLocale.logoBuilderGuide.title}\n \n \n {templateLocale.logoBuilderGuide.description}\n \n \n \n );\n\n const logoBuilderGuideSteps = [{\n popover: {\n left: 160, top: isBRServer ? 370 : 300, content: LogoBuilderGuideContent(), pointer: 'leftBottom', maxwidth: 285,\n },\n }];\n\n if (logoBuilderAvailable && enableLogoBuilder && isBRServer && !alreadySawLogoBuilderGuide && !isMobile) {\n return (\n <>\n \n {hasRefreshError && (\n \n \n {partner && (\n \n\n \n {children}\n \n \n
\n );\n};\n\nexport default withI18n()(withWidth()(withStyles(styles)(Template)));\n","import { CALL_API } from '@/middleware/api';\nimport { FAQ_URL } from '@/config/api';\nimport { config } from '@/config';\nimport {\n REQUEST_FAQ_HELP, RECEIVE_FAQ_HELP, ERROR_FAQ_HELP, ABORT_FAQ_HELP,\n RECEIVE_FAQ_MYSITES, REQUEST_FAQ_MYSITES, ERROR_FAQ_MYSITES, ABORT_FAQ_MYSITES,\n RECEIVE_FAQ_DOMAIN, REQUEST_FAQ_DOMAIN, ERROR_FAQ_DOMAIN, ABORT_FAQ_DOMAIN,\n RECEIVE_FAQ_INVOICES, REQUEST_FAQ_INVOICES, ERROR_FAQ_INVOICES, ABORT_FAQ_INVOICES,\n REQUEST_FAQ_DNS, ERROR_FAQ_DNS, RECEIVE_FAQ_DNS, ABORT_FAQ_DNS,\n RECEIVE_FAQ_DOMAIN_LIST, REQUEST_FAQ_DOMAIN_LIST, ERROR_FAQ_DOMAIN_LIST, ABORT_FAQ_DOMAIN_LIST,\n RECEIVE_FAQ_EMAILS, REQUEST_FAQ_EMAILS, ERROR_FAQ_EMAILS, ABORT_FAQ_EMAILS,\n RECEIVE_FAQ_PRODUCTS, REQUEST_FAQ_PRODUCTS, ERROR_FAQ_PRODUCTS, REQUEST_FAQ_PRODUCT_DETAIL,\n RECEIVE_FAQ_PRODUCT_DETAIL, ERROR_FAQ_PRODUCT_DETAIL, ABORT_FAQ_PRODUCT_DETAIL, ABORT_FAQ_PRODUCTS,\n RECEIVE_FAQ_PARAM, REQUEST_FAQ_PARAM, ERROR_FAQ_PARAM, ABORT_FAQ_SECURITY, REQUEST_FAQ_SECURITY, ERROR_FAQ_SECURITY, RECEIVE_FAQ_SECURITY,\n} from './actionsTypes';\n\n\nconst receiveFaqHelp = faqHelp => ({\n type: RECEIVE_FAQ_HELP,\n faqHelp,\n loadedDate: Date.now(),\n});\n\nexport const loadFaqHelp = () => (dispatch, getState) => {\n const { loadedDate } = getState().faq.help;\n\n if (Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise((resolve) => {\n resolve(dispatch({ type: ABORT_FAQ_HELP }));\n });\n }\n return dispatch({\n [CALL_API]: {\n endpoint: `${FAQ_URL}/help`,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_FAQ_HELP }),\n success: ({ data }) => receiveFaqHelp(data || []),\n error: () => ({ type: ERROR_FAQ_HELP }),\n },\n authenticated: true,\n },\n });\n};\n\nconst receiveFaqProducts = faqProducts => ({\n type: RECEIVE_FAQ_PRODUCTS,\n faqProducts,\n loadedDate: Date.now(),\n});\n\nconst receiveFaqSecurity = faqSecurity => ({\n type: RECEIVE_FAQ_SECURITY,\n faqSecurity,\n loadedDate: Date.now(),\n});\n\nexport const loadFaqProducts = () => (dispatch, getState) => {\n const { loadedDate } = getState().faq.products;\n\n if (Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise((resolve) => {\n resolve(dispatch({ type: ABORT_FAQ_PRODUCTS }));\n });\n }\n return dispatch({\n [CALL_API]: {\n endpoint: `${FAQ_URL}/products-page`,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_FAQ_PRODUCTS }),\n success: ({ data }) => receiveFaqProducts(data || []),\n error: () => ({ type: ERROR_FAQ_PRODUCTS }),\n },\n authenticated: true,\n },\n });\n};\n\nexport const loadFaqSecurity = () => (dispatch, getState) => {\n const { loadedDate } = getState().faq.security;\n\n if (Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise((resolve) => {\n resolve(dispatch({ type: ABORT_FAQ_SECURITY }));\n });\n }\n return dispatch({\n [CALL_API]: {\n endpoint: `${FAQ_URL}/security`,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_FAQ_SECURITY }),\n success: ({ data }) => receiveFaqSecurity(data || []),\n error: () => ({ type: ERROR_FAQ_SECURITY }),\n },\n authenticated: true,\n },\n });\n};\n\nconst receiveFaqDomainList = faqDomainList => ({\n type: RECEIVE_FAQ_DOMAIN_LIST,\n faqDomainList,\n loadedDate: Date.now(),\n});\n\nexport const loadFaqDomainList = () => (dispatch, getState) => {\n const { loadedDate } = getState().faq.domainList;\n\n if (Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise((resolve) => {\n resolve(dispatch({ type: ABORT_FAQ_DOMAIN_LIST }));\n });\n }\n return dispatch({\n [CALL_API]: {\n endpoint: `${FAQ_URL}/domain-list`,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_FAQ_DOMAIN_LIST }),\n success: ({ data }) => receiveFaqDomainList(data || []),\n error: () => ({ type: ERROR_FAQ_DOMAIN_LIST }),\n },\n authenticated: true,\n },\n });\n};\n\nconst receiveFaqEmails = faqEmails => ({\n type: RECEIVE_FAQ_EMAILS,\n faqEmails,\n loadedDate: Date.now(),\n});\n\nexport const loadFaqEmails = () => (dispatch, getState) => {\n const { loadedDate } = getState().faq.emails;\n\n if (Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise((resolve) => {\n resolve(dispatch({ type: ABORT_FAQ_EMAILS }));\n });\n }\n return dispatch({\n [CALL_API]: {\n endpoint: `${FAQ_URL}/email-tab`,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_FAQ_EMAILS }),\n success: ({ data }) => receiveFaqEmails(data || []),\n error: () => ({ type: ERROR_FAQ_EMAILS }),\n },\n authenticated: true,\n },\n });\n};\n\nconst receiveFaqMySites = faqMySites => ({\n type: RECEIVE_FAQ_MYSITES,\n faqMySites,\n loadedDate: Date.now(),\n});\n\nexport const loadFaqMySites = () => (dispatch, getState) => {\n const { loadedDate } = getState().faq.mySites;\n\n if (Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise((resolve) => {\n resolve(dispatch({ type: ABORT_FAQ_MYSITES }));\n });\n }\n\n return dispatch({\n [CALL_API]: {\n endpoint: `${FAQ_URL}/mysites`,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_FAQ_MYSITES }),\n success: ({ data }) => receiveFaqMySites(data || []),\n error: () => ({ type: ERROR_FAQ_MYSITES }),\n },\n authenticated: true,\n },\n });\n};\n\nconst receiveFaqInvoices = faqInvoices => ({\n type: RECEIVE_FAQ_INVOICES,\n faqInvoices,\n loadedDate: Date.now(),\n});\n\nexport const loadFaqInvoices = () => (dispatch, getState) => {\n const { loadedDate } = getState().faq.invoices;\n\n if (Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise((resolve) => {\n resolve(dispatch({ type: ABORT_FAQ_INVOICES }));\n });\n }\n\n return dispatch({\n [CALL_API]: {\n endpoint: `${FAQ_URL}/invoice`,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_FAQ_INVOICES }),\n success: ({ data }) => receiveFaqInvoices(data || []),\n error: () => ({ type: ERROR_FAQ_INVOICES }),\n },\n authenticated: true,\n },\n });\n};\n\nconst receiveFaqDomain = faqDomainDetail => ({\n type: RECEIVE_FAQ_DOMAIN,\n faqDomainDetail,\n loadedDate: Date.now(),\n});\n\nexport const loadFaqDomain = () => (dispatch, getState) => {\n const { loadedDate } = getState().faq.domainDetail;\n\n if (Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise((resolve) => {\n resolve(dispatch({ type: ABORT_FAQ_DOMAIN }));\n });\n }\n\n return dispatch({\n [CALL_API]: {\n endpoint: `${FAQ_URL}/domain`,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_FAQ_DOMAIN }),\n success: ({ data }) => receiveFaqDomain(data || []),\n error: () => ({ type: ERROR_FAQ_DOMAIN }),\n },\n authenticated: true,\n },\n });\n};\n\nconst receiveFaqDns = faqDns => ({\n type: RECEIVE_FAQ_DNS,\n faqDns,\n loadedDate: Date.now(),\n});\n\nexport const loadFaqDns = () => (dispatch, getState) => {\n const { loadedDate } = getState().faq.dns;\n\n if (Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise((resolve) => {\n resolve(dispatch({ type: ABORT_FAQ_DNS }));\n });\n }\n\n return dispatch({\n [CALL_API]: {\n endpoint: `${FAQ_URL}/dns`,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_FAQ_DNS }),\n success: ({ data }) => receiveFaqDns(data || []),\n error: () => ({ type: ERROR_FAQ_DNS }),\n },\n authenticated: true,\n },\n });\n};\n\nconst reciveFaqProductDetail = faqProductDetail => ({\n type: RECEIVE_FAQ_PRODUCT_DETAIL,\n faqProductDetail,\n loadedDate: Date.now(),\n});\n\nexport const loadFaqProductDetail = id => (dispatch, getState) => {\n const { loadedDate } = getState().faq.productDetail;\n\n if (Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise((resolve) => {\n resolve(dispatch({ type: ABORT_FAQ_PRODUCT_DETAIL }));\n });\n }\n\n return dispatch({\n [CALL_API]: {\n endpoint: `${FAQ_URL}/product-detail/${id}`,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_FAQ_PRODUCT_DETAIL }),\n success: ({ data }) => reciveFaqProductDetail(data || []),\n error: () => ({ type: ERROR_FAQ_PRODUCT_DETAIL }),\n },\n authenticated: true,\n },\n });\n};\n\nconst receiveFaqParam = faqParam => ({\n type: RECEIVE_FAQ_PARAM,\n faqParam,\n loadedDate: Date.now(),\n});\n\n\nexport const loadFaqParam = param => (dispatch, getState) => {\n const { loadedDate } = getState().faq.emails;\n\n if (Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise((resolve) => {\n resolve(dispatch({ type: ABORT_FAQ_EMAILS }));\n });\n }\n return dispatch({\n [CALL_API]: {\n endpoint: `${FAQ_URL}/${param}`,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_FAQ_PARAM }),\n success: ({ data }) => receiveFaqParam(data || []),\n error: () => ({ type: ERROR_FAQ_PARAM }),\n },\n authenticated: true,\n },\n });\n};\n","import styled, { css } from 'styled-components';\n\nexport const FaqV2Wrapper = styled.div`\n ${({ theme, width }) => css`\n width: ${width === 'half' ? '50%' : 'full'};\n\n @media (max-width: ${theme.breakpoints.sm}){\n width: 100%;\n }\n `}\n`;\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.palette.white.light};\n box-shadow: 0px 1px 3px 0px ${theme.color.black}29;\n margin-bottom: 40px;\n margin: 0px;\n position: relative;\n width: 50%;\n\n @media (max-width: ${theme.breakpoints.sm}){\n width: 100%;\n }\n\n * {\n font-family: ${theme.font.family.secondary};\n }\n `}\n`;\n\nexport const FaqWrapper = styled.div`\n padding: 0px;\n`;\n\nexport const FaqTitle = styled.h5`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 32px;\n margin: 0;\n padding: 17px 24px 0px;\n `}\n`;\n\nexport const Separator = styled.div`\n ${({ theme }) => css`\n border-bottom: 1px solid ${theme.palette.grey.primary};\n margin: 8px auto 18px;\n max-width: calc(100% - 48px);\n padding: 0px 24px 0px;\n `}\n`;\n\nexport const ListWrapper = styled.div`\n display: flex;\n padding: 0 24px;\n`;\n\nexport const List = styled.ul`\n margin: 0;\n padding: 0;\n`;\n\nexport const ListItem = styled.li`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n font-size: ${theme.font.sizes.sm};\n list-style-type: none;\n margin-bottom: 12px;\n\n & > a {\n color: ${theme.palette.secondary.primary};\n text-decoration-color: transparent;\n transition: text-decoration-color 150ms ease-in-out;\n }\n\n & > a:hover {\n color: ${theme.palette.secondary.primary};\n text-decoration-color: ${theme.palette.secondary.primary};\n }\n\n & svg {\n fill: transparent;\n margin-left: 6px;\n stroke: transparent;\n transition: fill 150ms ease-in-out, stroke 150ms ease-in-out;\n }\n\n &:hover {\n svg {\n fill: ${theme.palette.secondary.primary};\n stroke: ${theme.palette.secondary.primary};\n }\n }\n `}\n`;\n\nexport const FaqFooter = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n font-size: ${theme.font.sizes.sm};\n justify-content: flex-start;\n padding: 0px 24px 30px;\n\n & > a {\n color: ${theme.palette.primary.main};\n text-decoration-color: transparent;\n transition: text-decoration-color 150ms ease-in-out;\n }\n\n & > a:hover {\n color: ${theme.palette.primary.main};\n text-decoration-color: ${theme.palette.primary.main};\n }\n\n & svg {\n fill: transparent;\n margin-left: 6px;\n stroke: transparent;\n transition: fill 150ms ease-in-out, stroke 150ms ease-in-out;\n }\n\n &:hover {\n svg {\n fill: ${theme.palette.primary.main};\n stroke: ${theme.palette.primary.main};\n }\n }\n `}\n`;\n","import React from 'react';\nimport { faqTagManager } from '@/utils/ThirdParties/tagManager';\nimport * as Styles from './FaqDefault.styles';\nimport { locale } from '@/utils/locale';\nimport { FaqCard } from 'gatorcomponents';\nimport Loader from '@/components/Layout/Loader';\n\nconst FaqDefault = ({\n questions = [{\n id: '01',\n link: '#',\n question: 'sample',\n }],\n link = '#',\n loading = false,\n width = 'half',\n buttonLabel,\n withoutButton = false,\n}) => {\n const getFaqCardProps = () => {\n const defaultProps = {\n title: locale('help.frequentlyQuestions'),\n seeMore: buttonLabel || locale('morev2'),\n seeMoreLink: !withoutButton && link,\n items: questions,\n };\n\n const handleOnClick = ({ question }) => {\n faqTagManager(question);\n };\n\n return {\n ...defaultProps,\n onClick: handleOnClick,\n };\n };\n\n return (\n \n {loading\n ? \n );\n};\n\nexport default FaqDefault;\n","import React, { useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { loadFaqMySites } from '@/redux/actions/faq';\nimport { SUPPORT_URL } from '@/config/urls/supportUrls';\nimport FaqDefault from '@/components/FrequentlyQuestions/FaqDefault';\n\n\nconst FaqMySites = ({ className }) => {\n const faq = useSelector(state => state.faq);\n const dispatch = useDispatch();\n\n useEffect(() => {\n dispatch(loadFaqMySites());\n }, [dispatch]);\n\n return (\n \n executeShowPassword()}\n disableRipple\n className={classes.icon}\n data-testid={`${dataId}-show-password`}\n >\n {showPassword ? \n {!onLoading ? children : (\n \n
\n )}\n \n);\n\nexport default withStyles(styles)(PrimaryButton);\n","import React, { Component } from 'react';\nimport { NavLink, Link as ReactLink } from 'react-router-dom';\n\n\nclass LinkButton extends Component {\n parseTo = (to) => {\n const parser = document.createElement('a');\n parser.href = to;\n return parser;\n };\n\n isInternal = target => window.location.host === target.host;\n\n render() {\n const {\n to,\n target,\n dataId,\n children,\n className,\n activeClassName,\n ...rest\n } = this.props;\n const toLocation = this.parseTo(to);\n\n if (this.isInternal(toLocation)) {\n return activeClassName ? (\n \n {children}\n \n ) : (\n \n {children}\n \n );\n }\n\n return (\n \n {children}\n \n );\n }\n}\n\nexport default LinkButton;\n","const styles = theme => ({\n\n\n icon: {\n color: theme.color.indigo,\n },\n\n paperProps: {\n marginTop: '50px',\n },\n\n selectCustom: {\n height: '40px',\n '&$selectCustomFocused $selectCustomOutline': {\n borderColor: theme.color.chambray,\n borderWidth: 1,\n },\n '& div > div': {\n paddingBottom: 8,\n paddingTop: 9,\n fontSize: 14,\n },\n '& div > div:focus': {\n backgroundColor: 'transparent',\n },\n '& fieldset': {\n borderTopLeftRadius: '0px',\n borderBottomLeftRadius: '0px',\n borderBottomRightRadius: '2px',\n borderTopRightRadius: '2px',\n },\n },\n selectCustomInput: {},\n selectCustomOutline: {},\n selectCustomFocused: {},\n\n link: {\n color: theme.color.indigo,\n fontFamily: 'Roboto, sans-serif',\n fontSize: '14px',\n fontWeight: 'bold',\n letterSpacing: '0.01px',\n opacity: 1,\n textAlign: 'center',\n textDecoration: 'underline',\n [theme.breakpoints.down(700)]: {\n marginTop: '16px',\n },\n },\n});\n\nexport default styles;\n","import styled, { css } from 'styled-components';\nimport IconCheck from '@/media/icons/check.svg';\n\nconst Container = styled.div`\n ${({ theme }) => css`\n border-radius: 0px;\n box-shadow: 0px 2px 4px 0px ${theme.color.alto};\n position: relative;\n text-align: left;\n width: 100%;\n `}\n`;\n\nexport const ContainerRow = styled(Container)`\n ${({ theme, location, background }) => {\n const layout = {\n list: {\n background: `${theme.color.weakBlue} linear-gradient(180deg, ${theme.palette.primary.main} 30%, ${theme.palette.success.primary} 100%)`,\n padding: '0px 0px 0px 5px',\n },\n modal: {\n background: `transparent linear-gradient(180deg, ${theme.palette.primary.main} 30%, ${theme.palette.success.primary} 100%)`,\n padding: '0px',\n },\n sites: {\n background: theme.palette.white.light,\n padding: '0px',\n },\n modalHirePlan: {\n background: theme.palette.white.light,\n padding: '0px',\n },\n modalEmailList: {\n background: theme.palette.white.light,\n padding: '0px',\n },\n modalDomainList: {\n background: theme.palette.white.light,\n padding: '0px',\n },\n };\n\n return css`\n background: ${layout[location].background};\n background-image: url('${background}');\n padding: ${layout[location].padding};\n `;\n }}\n`;\n\nexport const Figure = styled.figure`\n ${({ theme }) => css`\n margin:0px 15px 0px 0px;\n position: relative;\n .envelope {\n height: 28px;\n position: relative;\n width: 34px;\n }\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-left: 0px;\n }\n @media (max-width: 413px) {\n margin-top: -40px;\n }\n `}\n`;\n\nexport const TitleForm = styled.p`\n${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.lg};\n font-weight: ${theme.font.weights.medium};\n letter-spacing: 0.01px;\n font-family:${theme.font.family.secondary};\n margin-top:11px;\n`}\n`;\n\nexport const TitleWrapper = styled.div`\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n margin-bottom: 24px;\n`;\n\nexport const TitleHirePlanWrapper = styled.div`\n align-items: center;\n display: flex;\n justify-content: flex-start;\n margin: 0px 0px 0px 0px;\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.palette.secondary.dark};\n font-size: 24px;\n font-weight: ${theme.font.weights.regular};\n line-height: 29px;\n margin: 0px 16px 0px 0px;\n\n @media (max-width: 1230px) {\n order: 2;\n }\n `}\n`;\n\nexport const TrialTag = styled.span`\n ${({ theme }) => css`\n background-color: ${`${theme.palette.grey.primary}66`};\n color: ${theme.palette.success.primary};\n font-size: 15px;\n font-weight: ${theme.font.weights.bold};\n letter-spacing: 0.01px;\n padding: 6px;\n text-transform: uppercase;\n\n @media (max-width: 1230px) {\n margin: 0px 0px 16px;\n order: 1;\n }\n `}\n`;\n\n\nexport const DescriptionContainer = styled(Container)`\n ${({ theme }) => css`\n background-color: ${theme.palette.white.light};\n margin: 24px 0px 0px 0px;\n padding: 34px 32px 0px;\n\n @media (max-width: 1356px){\n padding: 24px 24px 0px;\n }\n `\n}`;\n\nexport const DescriptionWrapper = styled.div`\n display: flex;\n width: 100%;\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: 16px;\n letter-spacing: 0.01px;\n line-height: 26px;\n margin: 0px;\n max-width: 720px;\n `}\n`;\n\nexport const ListWrapper = styled.div`\n ${() => css`\n display: flex;\n flex-wrap: wrap;\n margin: 40px 0px 8px 0px;\n\n @media (max-width: 700px) {\n flex-direction: column;\n margin: 24px 0px 8px;\n }\n `}\n`;\n\nexport const RemoveButton = styled.button`\n align-self: center;\n background: transparent;\n border: none;\n cursor: pointer;\n margin-left: 20px;\n width: fit-content;\n @media (max-width: 579px){\n margin-left: -16px;\n margin-top: 12px;\n }\n`;\n\nexport const LinkButtonAdapter = styled.div``;\n\nexport const DescriptionList = styled.ul`\n ${({ theme }) => css`\n list-style-type: none;\n margin: 0px 68px 0px 0px;\n padding: 0;\n text-align: left;\n\n & li {\n color: ${theme.palette.grey.dark};\n display: flex;\n font-size: 14px;\n letter-spacing: 0.01px;\n line-height: 21px;\n margin-bottom: 16px;\n position: relative;\n\n & > strong, & > b {\n display: contents;\n }\n\n & span {\n align-items: center;\n background: ${theme.palette.primary.main};\n border-radius: 50%;\n color: ${theme.palette.white.light};\n display: flex;\n font-size: 10px;\n height: 12px;\n justify-content: center;\n margin-left: 8px;\n max-width: 12px;\n position: relative;\n top: 4px;\n width: 100%;\n }\n\n &:before {\n background-image: url('${IconCheck}');\n background-repeat: no-repeat;\n content: \"\";\n display: block;\n height: 16px;\n margin-right: 8px;\n min-width: 16px;\n position: relative;\n top: 2px;\n }\n }\n\n & li:last-child {\n margin-bottom: 0px,\n }\n\n @media (max-width: 700px){\n margin: 0px;\n }\n `}\n`;\n\nexport const SelectInsideHirePlan = styled.span`\ninput{\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n`;\n\nexport const Snappy = styled.img`\n display: inline-block;\n height: 246px;\n margin: 0px 0px 0px 72px;\n position: relative;\n top: 40px;\n width: 227px;\n z-index: 1;\n\n @media (max-width: 1254px){\n display: none;\n }\n`;\n\nexport const FormWrapper = styled.div`\n ${({ location }) => {\n const layout = {\n list: {\n padding: '0px',\n width: '900px',\n width1356: '100%',\n },\n modal: {\n padding: '0px',\n width: '100%',\n },\n sites: {\n padding: '0px',\n width: '900px',\n width1356: '100%',\n },\n modalHirePlan: {\n padding: '4px',\n width: 'auto',\n width1356: 'auto',\n },\n modalEmailList: {\n padding: '4px',\n width: 'auto',\n width1356: 'auto',\n },\n modalDomainList: {\n padding: '4px',\n width: 'auto',\n width1356: 'auto',\n },\n };\n return css`\n border-radius: 0px;\n margin: ${layout[location].margin};\n padding: ${layout[location].padding};\n position: relative;\n text-align: left;\n width: ${layout[location].width};\n\n @media (max-width: 1356px){\n top: 0px;\n width: ${layout[location].width1356};\n }\n\n @media (max-width: 1300px) {\n }\n `;\n }\n}}\n`;\n\nexport const Form = styled.form`\n ${({ theme, location }) => {\n const layout = {\n list: {\n backgroundColor: theme.color.weakBlue,\n padding: '40px 40px 24px',\n padding360: '24px',\n padding1356: '24px',\n },\n modal: {\n backgroundColor: theme.color.weakBlue,\n padding: '40px 120px 24px',\n padding360: '24px',\n padding1356: '24px',\n },\n sites: {\n backgroundColor: '',\n padding: '34px 24px 0px 24px',\n padding360: '24px 4px 24px 24px',\n padding1356: '16px',\n },\n modalHirePlan: {\n backgroundColor: theme.palette.white.light,\n padding: '13px 30px 16px 24px',\n padding360: '24px 24px 24px 24px',\n padding1356: '13px 24px 16px 24px',\n },\n modalEmailList: {\n backgroundColor: theme.palette.white.light,\n padding: '13px 30px 16px 24px',\n padding360: '24px 24px 24px 24px',\n padding1356: '13px 24px 16px 24px',\n },\n modalDomainList: {\n backgroundColor: theme.palette.white.light,\n padding: '13px 30px 16px 24px',\n padding360: '24px 24px 24px 24px',\n padding1356: '13px 24px 16px 24px',\n },\n };\n\n return css`\n background-color:${layout[location].backgroundColor};\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: ${layout[location].padding};\n\n @media (max-width: 1356px){\n padding: ${layout[location].padding1356};\n }\n\n @media (max-width: 360px){\n padding: ${layout[location].padding360};\n }\n `;\n }}\n`;\n\nexport const SetEmailRow = styled.div`\n ${({ theme, location }) => {\n const layout = {\n list: {\n marginBottom: '',\n marginTop: '',\n width: '534px',\n },\n modal: {\n marginBottom: '',\n marginTop: '',\n width: '534px',\n },\n sites: {\n marginBottom: '',\n marginTop: '',\n width: '534px',\n },\n modalHirePlan: {\n marginBottom: '5px',\n marginTop: '16px',\n width: 'auto',\n },\n modalEmailList: {\n marginBottom: '5px',\n marginTop: '16px',\n width: 'auto',\n },\n modalDomainList: {\n marginBottom: '5px',\n marginTop: '16px',\n width: 'auto',\n },\n };\n\n return css`\n align-items: flex-start;\n display: inline-flex;\n justify-content: flex-start;\n margin-bottom:${layout[location].marginBottom};\n margin-top:${layout[location].marginTop};\n width: ${layout[location].width};\n\n div{\n input {\n background-color: ${theme.palette.white.light};\n }\n }\n @media (max-width: 1356px){\n width: 100%;\n }\n `;\n }\n}}\n`;\n\nexport const Label = styled.p`\n ${({ theme, location }) => {\n const layout = {\n list: {\n color: theme.palette.grey.dark,\n fontFamily: '',\n fontWeight: '',\n },\n modal: {\n color: theme.palette.grey.dark,\n fontFamily: '',\n fontWeight: '',\n },\n sites: {\n color: theme.palette.secondary.primary,\n fontFamily: 'Galano',\n fontWeight: theme.font.weights.medium,\n },\n modalHirePlan: {\n color: theme.palette.secondary.primary,\n fontFamily: 'Galano',\n fontWeight: theme.font.weights.medium,\n },\n modalEmailList: {\n color: theme.palette.secondary.primary,\n fontFamily: 'Galano',\n fontWeight: theme.font.weights.medium,\n },\n modalDomainList: {\n color: theme.palette.secondary.primary,\n fontFamily: 'Galano',\n fontWeight: theme.font.weights.medium,\n },\n };\n return css`\n color: ${layout[location].color};\n font-family: ${layout[location].fontFamily};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${layout[location].fontWeight};\n margin: 0px 0px 8px 0px;\n text-align: left;\n `;\n }}\n`;\nexport const OutputWrapper = styled.div`\n ${() => css`\n\n display: flex;\n flex-direction: column;\n margin-left: -20px!important;\n margin: 0px 0px 16px 0px;\n max-width: 100%;\n width: 50%;\n div {\n max-width: unset;\n\n input{\n text-align: right;\n }\n }\n\n @media (max-width: 390px){\n width: 45%;\n div {\n max-width: unset;\n }\n }\n `}\n`;\n\n\nexport const InputWrapper = styled.div`\n ${({ theme, location, disabled }) => {\n const layout = {\n list: {\n inputFontSize: theme.font.sizes.sm,\n inputHeight: 'calc( 40px - 14px )',\n marginRight: '20px',\n marginRight400px: '20px',\n maxWidth: '534px',\n width1356: '50%',\n },\n modal: {\n inputFontSize: theme.font.sizes.sm,\n inputHeight: 'calc( 40px - 14px )',\n marginRight: '0px',\n marginRight400px: '0px',\n maxWidth: '100%',\n width1356: '50%',\n },\n sites: {\n inputFontSize: theme.font.sizes.md,\n inputHeight: '42px',\n marginRight: '20px',\n marginRight400px: '20px',\n maxWidth: '100%',\n maxWidth400px: '156px',\n width1356: '50%',\n },\n modalHirePlan: {\n inputFontSize: theme.font.sizes.md,\n inputHeight: '42px',\n marginRight: '20px',\n marginRight400px: '0px',\n maxWidth: '100%',\n maxWidth400px: '',\n width1356: '',\n },\n modalEmailList: {\n inputFontSize: theme.font.sizes.md,\n inputHeight: '42px',\n marginRight: '20px',\n marginRight400px: '0px',\n maxWidth: '100%',\n maxWidth400px: '',\n width1356: '',\n },\n modalDomainList: {\n inputFontSize: theme.font.sizes.md,\n inputHeight: '42px',\n marginRight: '20px',\n marginRight400px: '0px',\n maxWidth: '100%',\n maxWidth400px: '',\n width1356: '',\n },\n };\n\n return css`\n\n display: flex;\n flex-direction: column;\n margin: 0px 0px 16px 0px;\n margin-right:${layout[location].marginRight};\n max-width: ${layout[location].maxWidth};\n width: 100%;\n\n > div {\n margin: 0;\n width: auto;\n\n > div {\n position: relative;\n width: 100%;\n\n > fieldset {\n border-radius: ${disabled ? '0px 2px 2px 0px' : '2px 0px 0px 2px'};\n border: 1px solid ${theme.palette.grey.primary};\n padding: 0px 0px 0px 8px;\n }\n\n > input {\n background-color: ${disabled ? theme.palette.primary.contrastText : theme.palette.white.light};\n color: ${disabled ? theme.palette.grey.light : theme.palette.grey.dark};\n font-size: ${layout[location].inputFontSize};\n height: ${layout[location].inputHeight};\n letter-spacing: 0px;\n line-height: 21px;\n padding: 7px;\n width: calc(100% - 14px);\n\n &::placeholder {\n color: ${theme.palette.grey.light};\n opacity: 1;\n }\n }\n }\n }\n\n @media (max-width: 1356px){\n width: ${layout[location].width1356};\n div {\n max-width: 100%;\n > span {\n max-width: 100%;\n width: 100%;\n }\n }\n }\n\n @media (max-width: 400px){\n margin-right:${layout[location].marginRight400px};\n max-width: ${layout[location].maxWidth400px};\n width: 100%;\n div {\n max-width: unset;\n }\n }\n `;\n }}\n`;\n\nexport const SelectWrapper = styled.div`\n${({ theme, location }) => {\n const layout = {\n list: {\n height: '',\n maxWidth: '120px',\n },\n modal: {\n height: '',\n maxWidth: '',\n },\n sites: {\n height: '44px',\n maxWidth: '156px',\n },\n modalHirePlan: {\n height: '44px',\n maxWidth: '',\n },\n modalEmailList: {\n height: '44px',\n maxWidth: '',\n },\n modalDomainList: {\n height: '44px',\n maxWidth: '',\n },\n };\n\n return css`\n > div {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n height: ${layout[location].height};\n\n > fieldset {\n border-radius: 0px 2px 2px 0px !important;\n background-color: ${theme.palette.secondary.contrastText};\n }\n\n > div {\n > div {\n height: calc(40px - 17px);\n padding-bottom: 5px;\n padding-top: 11px;\n\n @media (max-width: 360px){\n max-width: ${layout[location].maxWidth};\n }\n }\n }\n }\n `;\n }}\n`;\n\nexport const FixedEmailAddress = styled.p`\n ${({ theme }) => css`\n background-color: ${theme.palette.primary.contrastText};\n border: 1px solid ${theme.palette.grey.primary};\n `}\n`;\n\nexport const PasswordWrapper = styled.div`\n ${({ theme, location, hasTrashIcon }) => {\n const layout = {\n list: {\n margin: '0px',\n margin1356: '0px 0px 24px 0px',\n marginHasTrashIcon: '0px 0px 0px 48px',\n maxWidth: '232px',\n width: '100%',\n },\n modal: {\n margin: '0px 0px 0px 0px',\n margin1356: '0px 0px 24px 0px',\n marginHasTrashIcon: '0px 0px 0px 48px',\n maxWidth: 'calc(50% - 8px)',\n textAlign: 'left',\n width: '100%',\n },\n sites: {\n margin: '0px',\n margin1356: '0px 0px 24px 0px',\n marginHasTrashIcon: '0px 0px 0px 16px',\n maxWidth: '232px',\n textAlign: 'left',\n width: '100%',\n },\n modalHirePlan: {\n margin: '0px',\n margin1356: '0px 0px 24px 0px',\n marginHasTrashIcon: '0px 0px 0px 48px',\n maxWidth: '232px',\n textAlign: 'right',\n width: '100%',\n },\n modalEmailList: {\n margin: '0px',\n margin1356: '0px 0px 24px 0px',\n marginHasTrashIcon: '0px 0px 0px 48px',\n maxWidth: '232px',\n textAlign: 'right',\n width: '100%',\n },\n modalDomainList: {\n margin: '0px',\n margin1356: '0px 0px 24px 0px',\n marginHasTrashIcon: '0px 0px 0px 48px',\n maxWidth: '232px',\n textAlign: 'right',\n width: '100%',\n },\n };\n\n return css`\n display: flex;\n flex-direction: column;\n margin: ${layout[location].margin};\n max-width: ${layout[location].maxWidth};\n width: ${layout[location].width};\n\n ${!hasTrashIcon\n && css`\n margin-right: ${layout[location].marginHasTrashIcon};\n `}\n\n > div {\n margin: 0;\n width: auto;\n > div {\n background-color: ${theme.palette.white.light};\n display: inline-flex;\n position: relative;\n\n > fieldset {\n border-radius: 2px 0px 0px 2px;\n border: 1px solid ${theme.palette.grey.primary};\n padding: 0px 0px 0px 8px;\n }\n\n > input {\n font-size: ${theme.font.sizes.sm};\n height: calc( 40px - 14px );\n letter-spacing: 0px;\n line-height: 21px;\n padding: 7px;\n &:-ms-reveal,\n &:-ms-clear {\n display: none;\n }\n\n &::placeholder {\n color: ${theme.palette.grey.light};\n opacity: 1;\n }\n }\n }\n }\n\n @media (max-width: 1356px){\n margin: ${layout[location].margin1356};\n max-width: 100%;\n width: 100%;\n }\n `;\n }}\n`;\n\nexport const OptionInput = styled.input`\n ${() => css`\n margin: 8px 8px 0px -2px;\n\n @media (max-width:1356px){\n margin: 15px 8px 0px -2px;\n }\n `}\n`;\n\nexport const ActionWrapper = styled.div`\n ${({ theme, location }) => {\n const layout = {\n list: {\n borderDisabledButton: `5px solid ${theme.palette.grey.primary}`,\n buttonWidth: 'unset',\n display: 'inline-block',\n fontFamily: '',\n fontSize: theme.font.sizes.sm,\n margin: '0px 0px 0px 20px',\n marginButtom1356: '8px 0px 0px 0px',\n paddingButtom: '10px 16px',\n width: 'unset',\n width1381: '100%',\n },\n modal: {\n borderDisabledButton: `5px solid ${theme.palette.grey.primary}`,\n buttonWidth: '100%',\n display: 'inline-block',\n fontFamily: '',\n fontSize: theme.font.sizes.sm,\n margin: '24px 0px 0px auto',\n marginButtom1356: '8px 0px 0px 0px',\n paddingButtom: '10px 16px',\n width: 'calc(50% - 8px)',\n textAlign: '',\n width1381: '100%',\n },\n sites: {\n borderDisabledButton: '',\n bordernWidth: '5px',\n buttonWidth: 'unset',\n display: 'inline-block',\n fontFamily: theme.font.family.secondary,\n fontSize: theme.font.sizes.md,\n margin: '0px 0px 0px 24px',\n marginButtom1356: '32px 32px 0px 0px',\n paddingButtom: '10px 23px 9px 23px',\n width: 'unset',\n textAlign: '',\n width1381: '100%',\n },\n modalHirePlan: {\n borderDisabledButton: theme.palette.grey.ultralight,\n bordernWidth: '5px',\n buttonWidth: 'unset',\n display: '',\n fontFamily: theme.font.family.secondary,\n fontSize: theme.font.sizes.md,\n margin: '0px 0px 0px 0px',\n marginButtom1356: '0px 0px 0px 0px',\n marginButtomButton: '32px 0px 8px',\n paddingButtom: '10px 23px 9px 23px',\n width: '100%',\n textAlign: 'center',\n width1381: 'auto',\n },\n modalEmailList: {\n borderDisabledButton: theme.palette.grey.ultralight,\n bordernWidth: '5px',\n buttonWidth: 'unset',\n display: '',\n fontFamily: theme.font.family.secondary,\n fontSize: theme.font.sizes.md,\n margin: '0px 0px 0px 0px',\n marginButtom1356: '0px 0px 0px 0px',\n marginButtomButton: '32px 0px 8px',\n paddingButtom: '10px 23px 9px 23px',\n width: '100%',\n textAlign: 'center',\n width1381: 'auto',\n },\n modalDomainList: {\n borderDisabledButton: theme.palette.grey.ultralight,\n bordernWidth: '5px',\n buttonWidth: 'unset',\n display: '',\n fontFamily: theme.font.family.secondary,\n fontSize: theme.font.sizes.md,\n margin: '0px 0px 0px 0px',\n marginButtom1356: '0px 0px 0px 0px',\n marginButtomButton: '32px 0px 8px',\n paddingButtom: '10px 23px 9px 23px',\n width: '100%',\n textAlign: 'center',\n width1381: 'auto',\n },\n };\n\n return css`\n display: ${layout[location].display};\n margin: ${layout[location].margin};\n width: ${layout[location].width};\n text-align: ${layout[location].textAlign};\n\n button {\n font-family: ${layout[location].fontFamily};\n font-size: ${layout[location].fontSize};\n font-weight: ${theme.font.weights.medium};\n height: 40px;\n letter-spacing: 0.01px;\n line-height: 19px;\n min-width: 208px;\n margin:${layout[location].marginButtomButton};\n padding: ${layout[location].paddingButtom};\n width ${layout[location].buttonWidth};\n\n &.disabled {\n border: ${layout[location].borderDisabledButton};\n background-color: ${theme.palette.grey.ultralight};\n color:${theme.palette.grey.main};\n }\n }\n\n @media (min-width:1381px){\n > div {\n width: ${layout[location].width1381};\n }\n }\n\n @media (max-width:1356px){\n margin: 29px 0px 0px auto;\n }\n\n @media (max-width:1356px){\n margin: ${layout[location].marginButtom1356};\n text-align: center;\n width: 100%;\n }\n `;\n }}\n`;\n\n\nexport const CheckBoxDescription = styled.p`\n ${({ theme }) => css`\n background-color: ${theme.palette.white.light};\n color: ${theme.palette.grey.dark};\n display:flex;\n font-family:${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n letter-spacing: 0.01px;\n line-height: 18px;\n margin-top: 8px;\n margin: -1px 0px 0px 0px;\n padding: 2px 0px 0px;\n text-align: left;\n `}\n`;\n\n\nexport const PosDescription = styled.p`\n ${({ theme, location }) => {\n const layout = {\n list: {\n backgroundColor: theme.color.weakBlue,\n display: '',\n fontSize: theme.font.sizes.sm,\n linkColor: theme.palette.primary.main,\n padding: '0px 40px 40px',\n paddingTerms: '0px 24px 24px',\n textAlign: 'left',\n marginTopA: '',\n textAlign1356px: 'center',\n marginTopA1356px: '16px',\n },\n modal: {\n backgroundColor: theme.color.weakBlue,\n display: '',\n fontSize: theme.font.sizes.sm,\n linkColor: theme.palette.primary.main,\n padding: '0px 76px 63px',\n paddingTerms: '0px 24px 24px',\n textAlign: 'center',\n textAlign1356px: 'center',\n marginTopA: '',\n marginTopA1356px: '16px',\n },\n sites: {\n backgroundColor: theme.palette.white.light,\n display: '',\n fontSize: theme.font.sizes.xs,\n linkColor: theme.palette.secondary.primary,\n padding: '17px 0px 29px 24px',\n paddingTerms: '17px 24px 24px',\n textAlign: 'left',\n textAlign1356px: 'center',\n marginTopA: '',\n marginTopA1356px: '16px',\n },\n modalHirePlan: {\n backgroundColor: theme.palette.white.light,\n display: 'block',\n fontSize: theme.font.sizes.xs,\n linkColor: theme.palette.secondary.primary,\n padding: '7px 0px 9px',\n paddingTerms: '13px 0px 9px',\n textAlign: 'left',\n textAlign1356px: 'left',\n marginTopA: '8px',\n marginTopA1356px: '8px',\n },\n modalEmailList: {\n backgroundColor: theme.palette.white.light,\n display: 'block',\n fontSize: theme.font.sizes.xs,\n linkColor: theme.palette.secondary.primary,\n padding: '7px 0px 9px',\n paddingTerms: '13px 0px 9px',\n textAlign: 'left',\n textAlign1356px: 'left',\n marginTopA: '8px',\n marginTopA1356px: '8px',\n },\n modalDomainList: {\n backgroundColor: theme.palette.white.light,\n display: 'block',\n fontSize: theme.font.sizes.xs,\n linkColor: theme.palette.secondary.primary,\n padding: '7px 0px 9px',\n paddingTerms: '13px 0px 9px',\n textAlign: 'left',\n textAlign1356px: 'left',\n marginTopA: '8px',\n marginTopA1356px: '8px',\n },\n };\n\n return css`\n background-color: ${layout[location].backgroundColor};\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.sm};\n letter-spacing: 0.01px;\n line-height: 18px;\n margin-top: 8px;\n margin: -1px 0px 0px 0px;\n padding: ${layout[location].padding};\n text-align: ${layout[location].textAlign};\n\n a {\n color: ${layout[location].linkColor};\n font-size: 14px;\n font-weight: ${theme.font.weights.bold};\n letter-spacing: 0.01px;\n text-align: ${layout[location].textAlign};\n text-decoration: underline;\n display: ${layout[location].display};\n margin-top: ${layout[location].marginTopA};;\n\n @media (max-width: 1356px){\n display: block;\n margin-top: ${layout[location].marginTopA1356px};\n text-align: ${layout[location].textAlign1356px};\n }\n\n @media (max-width: 700px){\n margin-top: 16px;\n }\n }\n\n @media (max-width: 1356px){\n padding: ${layout[location].paddingTerms};\n text-align: ${layout[location].textAlign1356px};\n with:100%!important;\n }\n `;\n }}\n`;\n","import { locale } from '@/utils/locale';\n\nexport const proEmailActiveTrialLocale = {\n title: locale('proEmail.activeTrialTitle'),\n trialTag: locale('proEmail.activeTrialFreeTime'),\n description: locale('proEmail.activeTrialDescription'),\n passwordError: locale('myData.changePassword.errorMinimumCharacters'),\n emailError: locale('emails.specialCharacters'),\n firstList: {\n 0: locale('proEmail.activeTrialInfoPersonalize'),\n 1: locale('proEmail.activeTrialInfoSpace'),\n 2: locale('proEmail.activeTrialInfoApp'),\n },\n secondList: {\n 0: locale('proEmail.activeTrialInfoAntv'),\n 1: locale('proEmail.activeTrialInfoCalendar'),\n 2: locale('proEmail.activeTrialInfoMore'),\n },\n activeTrialEmailAddress: locale('proEmail.activeTrialEmailAddress'),\n activeTrialDomain: locale('proEmail.activeTrialDomain'),\n placeHolderEmailAddress: locale('proEmail.placeHolderEmailAddress'),\n activeTrialPassword: locale('proEmail.activeTrialPassword'),\n activeTrialButtonStart: locale('proEmail.activeTrialButtonStart'),\n activeTrialTerms: locale('proEmail.activeTrialTerms'),\n confirmText: locale('modalTitanTrialHirePlan.confirmText'),\n buttonAddAccountLabel: locale('modalTitanTrialHirePlan.buttonAddAccount.label'),\n emailSuggestions: {\n 1: locale('modalTitanTrialHirePlan.emailSuggestions.1'),\n 2: locale('modalTitanTrialHirePlan.emailSuggestions.2'),\n 3: locale('modalTitanTrialHirePlan.emailSuggestions.3'),\n 4: locale('modalTitanTrialHirePlan.emailSuggestions.4'),\n 5: locale('modalTitanTrialHirePlan.emailSuggestions.5'),\n },\n routeEmailList: locale('routes.emailsList'),\n};\n","const email = (value) => {\n // eslint-disable-next-line no-useless-escape\n const emailRule = /^[a-z0-9-\\-\\.\\_\\+]{1,64}@[a-z0-9-\\-]{1,63}(\\.[a-z0-9-]{1,61})+$/;\n return emailRule.test(value);\n};\n\nconst hasLowerAndUper = (value) => {\n const hasLowerCaseRule = /(.*[a-z].*)/;\n const hasUppercaseRule = /(.*[A-Z].*)/;\n return hasLowerCaseRule.test(value) && hasUppercaseRule.test(value);\n};\n\nconst hasNumber = (value) => {\n const hasNumberRule = /(.*[0-9].*)/;\n return hasNumberRule.test(value);\n};\n\nconst hasSpecial = (value) => {\n // eslint-disable-next-line no-useless-escape\n const hasSpecialRule = /.*[$-/:-?{-~!\"^_`\\[\\]@¢¬#£].*/;\n return hasSpecialRule.test(value);\n};\n\nconst userWordpressHasNotSpecial = (value) => {\n const hasNotSpecialRule = /^[a-zA-Z0-9._-]+$/;\n return hasNotSpecialRule.test(value);\n};\n\nconst validators = {\n email,\n hasLowerAndUper,\n hasNumber,\n hasSpecial,\n userWordpressHasNotSpecial,\n};\n\nexport default validators;\n","import styled, { css } from 'styled-components';\n\n\nexport const LabelError = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.error.main};\n font-family: ${theme.font.family.secondary};\n font-size: 0.75rem;\n margin: 8px 12px 0;\n text-align: left;\n verflow-wrap: break-word;\n `}\n`;\n\nexport const Wrapper = styled.span`\n${({ maxWidth }) => css`\n max-width:${maxWidth};\n `}\n`;\n\nexport const ButtonPassword = styled.button`\n${() => css`\n border: none;\n background-color: transparent;\n outline: none;\n display: flex;\n cursor: pointer;\n padding-right: 0px;\n\n span{\n padding-right:0px;\n }\n\n `}\n`;\n\nexport const WrapperInput = styled.div`\n${({ theme, typeValue, variant }) => {\n const variants = {\n default: {\n borderStyle: 'solid',\n borderWidth: '0px 0px 1px 0px',\n borderColor: theme.v1.color.line.fields,\n borderRadius: '0px',\n },\n textWithBorder: {\n borderStyle: 'solid',\n borderWidth: '1px',\n borderColor: theme.v1.color.line.fields,\n borderRadius: '4px',\n },\n marketing: {\n borderStyle: 'solid',\n borderWidth: '1px',\n borderColor: theme.v1.color.line.fields,\n borderRadius: '4px',\n },\n };\n\n const types = {\n textarea: {\n borderStyle: 'solid',\n borderWidth: '1px',\n borderColor: theme.v1.color.line.fields,\n borderRadius: '4px',\n },\n text: {\n borderStyle: variants[variant].borderStyle,\n borderWidth: variants[variant].borderWidth,\n borderColor: variants[variant].borderColor,\n borderRadius: variants[variant].borderRadius,\n },\n password: {\n borderStyle: 'solid',\n borderWidth: '0px 0px 1px 0px',\n borderColor: theme.v1.color.line.fields,\n borderRadius: '0px',\n },\n email: {\n borderStyle: 'solid',\n borderWidth: '0px 0px 1px 0px',\n borderColor: theme.v1.color.line.fields,\n borderRadius: '0px',\n },\n };\n\n return css`\n background: ${theme.palette.white.light} 0% 0% no-repeat padding-box;\n border-radius: ${types[typeValue].borderRadius};\n border-style: ${types[typeValue].borderStyle};\n border-width: ${types[typeValue].borderWidth};\n border-color: ${types[typeValue].borderColor};\n display: flex;\n`;\n }}\n`;\n\nexport const Input = styled.input`\n ${({ theme, textAlign, variant }) => {\n const variants = {\n default: {\n padding: '11px',\n fontSize: '16px',\n placeholderColor: theme.v1.color.text.label,\n },\n textWithBorder: {\n fontSize: '16px',\n padding: '11px',\n placeholderColor: theme.v1.color.text.primary,\n },\n marketing: {\n padding: '16px',\n fontSize: '14px',\n placeholderColor: theme.v1.color.text.primary,\n },\n };\n\n return css`\n background-color: transparent;\n border:none;\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${variants[variant].fontSize};\n font-weight: ${theme.v1.font.weights.regular};\n outline: 0 none;\n padding: ${variants[variant].padding};\n resize: none;\n text-align: ${textAlign};\n width: 100%;\n\n ::placeholder {\n color: ${variants[variant].placeholderColor};\n font-family: ${theme.v1.font.family.primary};\n letter-spacing: 0px;\n opacity: 1;\n text-align: left;\n }\n `;\n }}\n`;\n\nexport const TextArea = styled.textarea`\n ${({ theme, textAlign }) => css`\n border:none;\n background-color: transparent;\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.regular};\n outline: 0 none;\n padding: 11px;\n resize: none;\n text-align:${textAlign};\n width: 100%;\n\n ::placeholder {\n color: ${theme.palette.grey.main};\n font-family: ${theme.font.family.secondary};\n letter-spacing: 0px;\n opacity: 1;\n text-align: left;\n }\n `}\n`;\n\nexport const Counter = styled.span`\n${({ theme, typeValue }) => {\n const variants = {\n textarea: {\n position: 'absolute',\n padding: '0px',\n right: '15px',\n bottom: '10px',\n },\n text: {\n position: 'inherit',\n padding: '15px 5px 0px 0px',\n right: '15px',\n bottom: '10px',\n },\n password: {\n position: 'inherit',\n padding: '15px 5px 0px 0px',\n right: '15px',\n bottom: '10px',\n },\n email: {\n position: 'inherit',\n padding: '15px 5px 0px 0px',\n right: '15px',\n bottom: '10px',\n },\n };\n\n return css`\n color: ${theme.v1.color.text.label};\n font-size: ${theme.font.sizes.xxs};\n font-family: ${theme.font.family.secondary};\n padding: ${variants[typeValue].padding};\n position: ${variants[typeValue].position};\n right: ${variants[typeValue].right};\n bottom: ${variants[typeValue].bottom};\n `;\n }}\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './Input.styles';\nimport { IconEyePasswordDisabled, IconEyePasswordEnabled } from '@/icons';\nimport {\n applyDocumentMask, applyDateMask, applyCpfMask, applyCnpjMask, applyCepMask, applyBRMoneyMask,\n} from '@/utils/Masks/inputMasks';\nimport { removeAccents } from '@/utils/Validators/validation';\n\nconst Input = ({\n onChange,\n onClickIconShowPassword,\n testId = 'test-id-text',\n value = 'teste',\n maxLength = null,\n title = '',\n placeholder = 'ex: place holder',\n disabled,\n errorMessage = '',\n type = 'password',\n textAlign = 'left',\n counter = false,\n name = 'input-name',\n iconColor = '#959ea3',\n onBlur,\n rows = 1,\n maxWidth = 'unset',\n variant = 'default',\n readOnly = false,\n mask = null,\n}) => {\n const [textValue, setTextValue] = useState(value);\n const [typeValue, setTypeValue] = useState(type);\n const isPasswordType = type === 'password';\n\n const handleMask = useCallback((value) => {\n let sanitizedValue = value;\n if (mask === 'document') {\n sanitizedValue = applyDocumentMask(value);\n }\n\n if (mask === 'cpf') {\n sanitizedValue = applyCpfMask(value);\n }\n\n if (mask === 'cnpj') {\n sanitizedValue = applyCnpjMask(value);\n }\n\n if (mask === 'date') {\n sanitizedValue = applyDateMask(value);\n }\n\n if (mask === 'cep') {\n sanitizedValue = applyCepMask(value);\n }\n\n if (mask === 'domain') {\n sanitizedValue = removeAccents(value).replace(/[^a-zA-Z0-9\\-.]/g, '');\n }\n\n if (mask === 'money') {\n sanitizedValue = applyBRMoneyMask(value);\n }\n\n return sanitizedValue;\n }, [mask]);\n\n const handleOnChange = (event) => {\n const sanitizedObject = {\n ...event,\n };\n\n sanitizedObject.target.value = handleMask(event.target.value);\n\n\n if (maxLength && event.target.value.length > maxLength) {\n return;\n }\n\n onChange && onChange(sanitizedObject);\n setTextValue(event.target.value);\n };\n\n const handleBlur = (event) => {\n onBlur && onBlur(event);\n };\n\n const showPassword = () => {\n if (onClickIconShowPassword) {\n onClickIconShowPassword();\n }\n setTypeValue('text');\n };\n\n const unShowPassword = () => {\n setTypeValue('password');\n };\n\n const applyMask = useCallback(() => {\n const sanitizedValue = handleMask(value);\n setTextValue(sanitizedValue);\n }, [value, handleMask]);\n\n useEffect(() => {\n applyMask();\n }, [applyMask]);\n\n\n return (\n \n \n\n {typeValue === 'textarea'\n ? (\n \n {`(${value.length >= maxLength ? maxLength : value.length}/${maxLength})`}\n \n )}\n\n {isPasswordType && typeValue === 'password' && (\n \n \n )}\n\n {isPasswordType && typeValue === 'text' && (\n \n \n )}\n \n\n {errorMessage && (\n \n {errorMessage}\n \n )}\n \n );\n};\n\nexport default Input;\n","import React, {\n useEffect, useMemo, useState, useCallback, useLayoutEffect,\n} from 'react';\nimport {\n withStyles, TextField, Select, OutlinedInput, MenuItem, CircularProgress,\n} from '@material-ui/core';\nimport { Trans } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';\nimport snappyMail from '@/media/icons/Snappy_Mail.svg';\nimport PasswordField from '@/components/Fields/PasswordField';\n\nimport { requestUpgradePlans } from '@/redux/actions/emails';\nimport { emailsActions } from '@/redux/modules/emails';\nimport {\n executeGADisplayBannerTrialInSites,\n executeGADisplayBannerWithoutDomains,\n executeGADisplayKeyPasswordActiveTrial,\n executeGADisplayKeyPasswordActiveTrialInModalHirePlan,\n executeGADisplayKeyPasswordActiveTrialInSites,\n executeGADisplayKeyPasswordActiveTrialInDomains,\n executeGADisplayKeyPasswordActiveTrialWithDomain,\n executeGADisplayModalTrialInHirePlan,\n executeGADomainSelectionActiveTrial,\n executeGADomainSelectionActiveTrialInSites,\n executeGAInitTrial,\n executeGAInitTrialInLocation,\n executeGAInitTrialWithDomain,\n executeGATermsActiveTrial,\n executeGATermsActiveTrialInModalHirePlan,\n executeGATermsActiveTrialInSites,\n executeGATermsActiveTrialWithDomain,\n executeGAAddMoreTitanBoxes,\n executeGAExcludeTitanBoxes,\n executeGAHireTitanTrial,\n} from '@/utils/ThirdParties/tagManager';\nimport { ESSENTIALS_PLAN } from '@/components/Email/TitanUpgrade/TitanUpgradePlanItem/TitanPlans';\nimport { SERVICE_TERMS } from '@/config/urls/supportUrls';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport styles from './styles';\nimport * as Styles from './ProEmailActiveTrial.styles';\nimport { proEmailActiveTrialLocale } from './ProEmailActiveTrial.locale';\nimport { useHistory } from 'react-router';\nimport envelope from '@/media/icons/icon_titan.svg';\nimport linhaColorida from '@/media/icons/linha_colorida.svg';\nimport linhaColoridaMobile from '@/media/icons/linha_colorida_mobile.svg';\n\nimport validators from '@/utils/FieldValidators/FieldValidators';\n\nimport * as Inputs from '@/pages/common/inputs';\nimport { Button } from '@/pages/common';\n\nimport { Input } from '@/pages/common/v1/inputs';\nimport { useResize } from '@/hooks/useResize';\nimport { IconThrash } from '@/icons';\n\nconst ProEmailActiveTrial = ({\n classes,\n renderedEmailList,\n location = 'list',\n selectedDomain = undefined,\n offerContext,\n productName,\n productValue,\n submittedOut,\n setSubmittedOut,\n isEnabledByURLParam = false,\n}) => {\n const insideModal = location === 'modal';\n const insideSites = location === 'sites';\n const insideList = location === 'list';\n const insideModalHirePlan = location === 'modalHirePlan' || location === 'modalEmailList' || location === 'modalDomainList';\n const view = useResize();\n const isMobile = view.width < 580;\n const isSmaller1356 = view.width < 1356;\n\n const variantInNewStyle = ['sites', 'modalHirePlan', 'modalEmailList', 'modalDomainList'];\n\n const emptyAccount = {\n email: '',\n emailError: false,\n domain: selectedDomain || '',\n domainError: false,\n password: '',\n passwordError: false,\n };\n\n const gaLocations = {\n sites: 'Sites',\n modalHirePlan: 'Tela de setup',\n modalEmailList: 'E-mails',\n modalDomainList: 'Domínios',\n };\n\n const dispatch = useDispatch();\n const history = useHistory();\n const initialFormData = Array(3).fill(emptyAccount);\n const [formDataAccounts, setFormDataAccounts] = useState(initialFormData);\n const [disabledDispatch, setDisabledDispatch] = useState(true);\n\n const [valueEssentialPlan, setValueEssentialPlan] = useState(productValue);\n const [isAcceptedTerms, setAcceptedTerms] = useState(false);\n const [isSubmitted, setSubmitted] = useState(false);\n\n const loadingCreateMail = useSelector(state => state.emails.createMailLoader);\n\n const hostDomainList = useMemo(() => renderedEmailList.map(item => ({\n ...item,\n domain: item.domain,\n id: item.domain_id,\n hostingId: item.hostingId,\n label: `@${item.domain}`,\n value: item.domain,\n })), [renderedEmailList]);\n\n const hostDomainListToSites = useMemo(() => {\n const list = [...hostDomainList];\n list.shift();\n return list;\n }, [hostDomainList]);\n\n\n const firstBoxDomain = hostDomainList.find(hostDomain => hostDomain.domain === formDataAccounts[0].domain);\n const indexOfFirstBoxDomain = useMemo(() => {\n if (!firstBoxDomain) {\n return;\n }\n const position = hostDomainList.indexOf(firstBoxDomain);\n return position === -1 ? 0 : position;\n }, [hostDomainList, firstBoxDomain]);\n\n useMemo(() => {\n setAcceptedTerms(true);\n\n if (!loadingCreateMail && isSubmitted) {\n history.push(proEmailActiveTrialLocale.routeEmailList);\n }\n\n if (!loadingCreateMail && submittedOut && location === 'modalHirePlan') {\n history.push(proEmailActiveTrialLocale.routeEmailList);\n }\n\n if (!loadingCreateMail && submittedOut && location === 'modalDomainList') {\n history.push(proEmailActiveTrialLocale.routeEmailList);\n }\n }, [loadingCreateMail, isSubmitted, history, submittedOut, location]);\n\n\n useEffect(() => {\n if (formDataAccounts[0].domain === '') {\n setFormDataAccounts([{\n ...formDataAccounts[0],\n domain: hostDomainList[0].domain,\n }]);\n }\n if (valueEssentialPlan === null || valueEssentialPlan === undefined) {\n dispatch(requestUpgradePlans()).then((response) => {\n const filteredByEssentials = response.data.filter(plano => plano.id === ESSENTIALS_PLAN);\n if (filteredByEssentials.length > 0) {\n const valueEssential = filteredByEssentials[0].configoptions[0].monthly;\n setValueEssentialPlan(formatCurrency(valueEssential));\n }\n });\n }\n }, [valueEssentialPlan, dispatch, hostDomainList, formDataAccounts, location]);\n\n const getError = ({ input, value, index }) => {\n const isOnlySpaces = RegExp(/^[?!^ ]+$/);\n\n // eslint-disable-next-line no-useless-escape\n const validEmail = validators.email(`${value}@${formDataAccounts[index].domain.toLowerCase()}`);\n\n const validator = {\n email: !validEmail,\n password: value.length < 8 || isOnlySpaces.test(value),\n };\n\n return validator[input];\n };\n\n const handleAddAccount = () => {\n executeGAAddMoreTitanBoxes(gaLocations[location], formDataAccounts.length + 1);\n const newAccounts = [...formDataAccounts, { ...emptyAccount, domain: formDataAccounts[0].domain }];\n setFormDataAccounts(newAccounts);\n };\n\n const handleRemoveAccount = (index) => {\n executeGAExcludeTitanBoxes(gaLocations[location], index + 1);\n const newAccounts = [...formDataAccounts];\n newAccounts.splice(index, 1);\n setFormDataAccounts(newAccounts);\n };\n\n const checkFields = useCallback(() => {\n formDataAccounts.forEach((account) => {\n const valuesArray = Object.values(account);\n\n const hasEmptyFieldFields = valuesArray.includes('');\n const hasErrors = valuesArray.includes(Boolean(true));\n\n setDisabledDispatch(hasEmptyFieldFields || hasErrors);\n\n if (insideModalHirePlan) {\n setDisabledDispatch(hasEmptyFieldFields || hasErrors || !isAcceptedTerms);\n }\n });\n }, [formDataAccounts, isAcceptedTerms, insideModalHirePlan]);\n\n const handleChange = (event, input, index) => {\n const { value } = variantInNewStyle.includes(location) && input === 'domain' ? event : event.target;\n const newAccounts = formDataAccounts.map((account, i) => {\n if (i === index) {\n return {\n ...account,\n [input]: value,\n [`${input}Error`]: getError({ input, value, index }),\n };\n }\n\n\n if (input === 'domain') {\n return { ...account, domain: value };\n }\n\n return account;\n });\n\n setFormDataAccounts(newAccounts);\n\n if (input === 'domain') {\n if (location === 'sites') {\n executeGADomainSelectionActiveTrialInSites();\n } else {\n executeGADomainSelectionActiveTrial();\n }\n }\n };\n\n const executeGADisplayKeyPassword = () => {\n if (location === 'sites') {\n return executeGADisplayKeyPasswordActiveTrialInSites();\n }\n if (location === 'modalHirePlan') {\n return executeGADisplayKeyPasswordActiveTrialInModalHirePlan();\n }\n if (location === 'modalEmailList') {\n return executeGADisplayKeyPasswordActiveTrialWithDomain();\n }\n if (location === 'modalDomainList') {\n return executeGADisplayKeyPasswordActiveTrialInDomains();\n }\n if (selectedDomain) {\n return executeGADisplayKeyPasswordActiveTrialWithDomain;\n }\n return executeGADisplayKeyPasswordActiveTrial;\n };\n\n\n const executeGATerms = () => {\n if (location === 'modalHirePlan') {\n return executeGATermsActiveTrialInModalHirePlan;\n }\n if (location === 'sites') {\n return executeGATermsActiveTrialInSites;\n }\n if (selectedDomain) {\n return executeGATermsActiveTrialWithDomain;\n }\n return executeGATermsActiveTrial;\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n if (!loadingCreateMail) {\n if (location === 'sites') {\n executeGAInitTrialInLocation('Sites', formDataAccounts.length);\n } else if (location === 'modalHirePlan') {\n executeGAInitTrialInLocation('Tela de setup', formDataAccounts.length);\n executeGAHireTitanTrial();\n } else if (location === 'modalEmailList') {\n executeGAInitTrialInLocation('E-mails', formDataAccounts.length);\n } else if (location === 'modalDomainList') {\n executeGAInitTrialInLocation('Domínios', formDataAccounts.length);\n } else if (selectedDomain) {\n executeGAInitTrialWithDomain(formDataAccounts.length);\n } else {\n executeGAInitTrial(formDataAccounts.length);\n }\n\n const emailAccounts = formDataAccounts.map(({ email, password }) => ({\n email_account: email,\n email_password: password,\n }));\n\n const createEmailData = {\n email: formDataAccounts[0].email,\n domain: formDataAccounts[0].domain,\n password: formDataAccounts[0].password,\n enabledUpdateDomainSetup: true,\n offerContext: insideSites ? ['sites_page_banner'] : offerContext || ['email_list_page_full_blurb'],\n accounts: emailAccounts,\n };\n\n dispatch(emailsActions.emails.createEmailTrial.request(createEmailData));\n\n if (insideModalHirePlan || location === 'modalDomainList') {\n setSubmittedOut(true);\n }\n\n if (isEnabledByURLParam) {\n history.push(proEmailActiveTrialLocale.routeEmailList);\n }\n\n setSubmitted(true);\n }\n };\n\n useEffect(() => {\n checkFields();\n }, [checkFields]);\n\n useLayoutEffect(() => {\n if (!insideModal && !variantInNewStyle.includes(location)) {\n executeGADisplayBannerWithoutDomains();\n }\n if (location === 'sites') {\n executeGADisplayBannerTrialInSites();\n }\n if (location === 'modalHirePlan' && !submittedOut) {\n executeGADisplayModalTrialInHirePlan();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const getBackground = () => {\n if (isMobile && insideModalHirePlan) { return linhaColoridaMobile; }\n if (!isMobile && insideModalHirePlan) { return linhaColorida; }\n\n return '';\n };\n return (\n \n {!insideModal && !insideSites && !insideModalHirePlan && (\n \n \n {proEmailActiveTrialLocale.title} \n {proEmailActiveTrialLocale.trialTag} \n \n\n \n \n {proEmailActiveTrialLocale.description} \n\n \n \n {proEmailActiveTrialLocale.firstList[0]} \n {proEmailActiveTrialLocale.firstList[1]} \n {proEmailActiveTrialLocale.firstList[2]} \n \n\n \n {proEmailActiveTrialLocale.secondList[0]} \n {proEmailActiveTrialLocale.secondList[1]} \n {proEmailActiveTrialLocale.secondList[2]} \n \n \n
\n \n \n )}\n handleSubmit(e)}>\n \n {insideModalHirePlan && (\n \n \n \n {proEmailActiveTrialLocale.title} \n \n )}\n {formDataAccounts.map((formDataAccount, index) => (\n <>\n \n \n {proEmailActiveTrialLocale.activeTrialEmailAddress} \n {!variantInNewStyle.includes(location) && (\n handleChange(event, 'email', index)}\n value={formDataAccount.email}\n data-testid=\"email-email-field\"\n error={formDataAccount.emailError}\n helperText={formDataAccount.emailError ? proEmailActiveTrialLocale.emailError : ''}\n InputProps={{\n inputProps: { maxLength: 64 },\n }}\n data-id=\"email-name\"\n />\n )}\n \n {variantInNewStyle.includes(location) && (\n handleChange(event, 'email', index)}\n value={formDataAccount.email}\n data-testid=\"email-email-field\"\n errorMessage={formDataAccount.emailError ? proEmailActiveTrialLocale.emailError : ''}\n maxLength={64}\n data-id=\"email-name\"\n />\n )}\n {insideModalHirePlan && (\n \n handleChange(event, 'email', index)}\n value={`@${selectedDomain}`}\n testId={`text-domain-selected-${index}`}\n maxLength={64}\n textAlign=\"right\"\n data-id=\"email-name\"\n />\n \n )}\n \n \n {!insideModalHirePlan && (\n \n {selectedDomain\n ? (\n <>\n {!variantInNewStyle.includes(location) && (\n \n {proEmailActiveTrialLocale.activeTrialDomain} \n \n )}\n \n )\n : (\n <>\n {proEmailActiveTrialLocale.activeTrialDomain} \n {variantInNewStyle.includes(location) && (\n handleChange(event, 'domain', index)}\n options={hostDomainListToSites}\n selectedOption={firstBoxDomain}\n variant=\"sites\"\n />\n )}\n \n {!variantInNewStyle.includes(location) && (\n handleChange(event, 'domain', index)}\n data-id=\"email-select-domain\"\n disabled={index !== 0}\n inputProps={{\n classes: {\n icon: classes.icon,\n },\n }}\n MenuProps={{\n classes: {\n paper: classes.paperProps,\n },\n }}\n input={(\n \n {`@${domain.domain}`}\n \n ))}\n \n )}\n \n \n )\n }\n \n )}\n {insideModalHirePlan && !isMobile && (\n 0}>\n {proEmailActiveTrialLocale.activeTrialPassword} \n handleChange(event, 'password', index)}\n errorMessage={formDataAccount.passwordError ? proEmailActiveTrialLocale.passwordError : ''}\n dataId=\"email-password\"\n data-testid=\"email-password-field\"\n />\n \n )}\n {index > 0 && (\n <>\n {(insideSites || insideList) && !isSmaller1356 ? <> : (\n handleRemoveAccount(index)}\n data-testid={`button-remove-email-${index}`}\n type=\"button\"\n >\n \n {((isMobile && insideModalHirePlan) || !insideModalHirePlan) && (\n \n {proEmailActiveTrialLocale.activeTrialPassword} \n {!variantInNewStyle.includes(location) && (\n handleChange(event, 'password', index)}\n error={formDataAccount.passwordError}\n helperText={formDataAccount.passwordError ? proEmailActiveTrialLocale.passwordError : ''}\n dataId=\"email-password\"\n data-testid=\"email-password-field\"\n />\n )}\n {variantInNewStyle.includes(location) && (\n handleChange(event, 'password', index)}\n errorMessage={formDataAccount.passwordError ? proEmailActiveTrialLocale.passwordError : ''}\n dataId=\"email-password\"\n data-testid=\"email-password-field\"\n />\n )}\n \n )}\n {index > 0 && (insideSites || insideList) && !isSmaller1356 && (\n handleRemoveAccount(index)}\n data-testid={`button-remove-email-${index}`}\n type=\"button\"\n >\n \n \n <>0\n <>{{ productName }}\n {{ amount: valueEssentialPlan }} \n <>1\n <>2\n \n\n \n {proEmailActiveTrialLocale.activeTrialTerms}\n \n\n \n )}\n\n \n {!variantInNewStyle.includes(location) && (\n \n {proEmailActiveTrialLocale.activeTrialButtonStart}\n \n )}\n {variantInNewStyle.includes(location) && (\n\n \n \n \n\n {insideSites && (\n \n \n <>0\n <>{{ amount: valueEssentialPlan }}\n <>2\n \n\n \n {proEmailActiveTrialLocale.activeTrialTerms}\n \n\n \n )}\n {!insideSites && !insideModalHirePlan && (\n \n \n <>0\n <>{{ amount: valueEssentialPlan }}\n <>2\n \n\n \n {proEmailActiveTrialLocale.activeTrialTerms}\n \n\n \n )}\n \n \n );\n};\n\nexport default withStyles(styles)(ProEmailActiveTrial);\n","import React, { } from 'react';\nimport * as Styles from './TrialActiveBannerInSites.styles';\nimport { locale } from '@/utils/locale';\nimport { trialActive } from './TrialActiveBannerInSites.locale';\n\nimport envelope from '@/media/icons/envelope.svg';\nimport ProEmailActiveTrial from '@/components/Email/ProEmail/ProEmailsNewList/ProEmailActiveTrial';\n\nconst TrialActiveSiteBanner = ({ domainWithoutEmail }) => (\n \n \n \n
\n \n
\n \n \n {locale(trialActive.title)}\n \n\n \n {locale(trialActive.tagOfTrialTime)}\n \n \n \n
\n \n {locale(trialActive.description)}\n \n \n \n\n \n\n);\nexport default TrialActiveSiteBanner;\n","import { locale } from '@/utils/locale';\n\nexport const TitanUpgradeBottomAdvertisementHandlerLocale = {\n knowMore: locale('titanAdvertisement.bannerDark.knowMore'),\n description: locale('titanAdvertisement.bannerDark.description'),\n title: locale('titanAdvertisement.bannerDark.title'),\n newTag: locale('titanAdvertisement.bannerDark.newTag'),\n};\n","import styled, { css } from 'styled-components';\nimport TitanDarkDeco from '@/media/titan/titan_dark.svg';\nimport TitanLightDeco from '@/media/titan/titan_light.svg';\nimport TitanDarkLogo from '@/media/titan/titan_dark_logo.svg';\nimport TitanLightLogo from '@/media/titan/titan_light_logo.svg';\n\nexport const TitanUpgradeBottomAdvertisementWrapper = styled.div`\n ${({ variant, theme }) => css`\n background-color: ${variant === 'dark' ? theme.palette.grey.ultradark : theme.palette.white.light};\n background-image: url('${variant === 'dark' ? TitanDarkLogo : TitanLightLogo}');\n background-position-x: right;\n background-position-y: bottom;\n background-repeat: no-repeat;\n color: ${variant === 'dark' ? theme.palette.grey.ultralight : theme.palette.blue.dark};\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n font-family: ${theme.font.family.secondary};\n gap: 24px;\n justify-content: space-between;\n padding: 0px;\n `}\n`;\n\nexport const HeaderWrapper = styled.div`\n ${({ variant }) => css`\n align-items: flex-start;\n background-image: url('${variant === 'dark' ? TitanDarkDeco : TitanLightDeco}');\n background-origin: content-box;\n background-position-x: right;\n background-position-y: top;\n background-repeat: no-repeat;\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 24px 24px 0px 24px;\n `}\n`;\n\nexport const FooterWrapper = styled.div`\n${({ theme }) => css`\n align-items: flex-start;\n display: flex;\n justify-content: space-between;\n padding: 0px 24px 56px 24px;\n\n @media (min-width: ${theme.breakpoints.md}) {\n padding: 0px 24px 30px 24px;\n }\n `}\n`;\n\nexport const Title = styled.h5`\n ${({ theme }) => css`\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.medium};\n line-height: ${theme.font.sizes.xxxxxxl};\n margin: 0;\n padding: 0;\n padding-top: 6px;\n text-align: left;\n text-transform: uppercase;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxxl};\n font-weight: ${theme.font.weights.medium};\n margin: 0;\n max-width: 283px;\n padding: 0;\n text-align: left;\n\n @media (min-width: ${theme.breakpoints.md}) {\n max-width: 430px;\n }\n \n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Chip = styled.div`\n ${({\n theme, recommended, altLayout, bold,\n }) => {\n const colors = {\n background: recommended ? theme.palette.danger.primary : theme.palette.primary.main,\n fontColor: theme.color.white,\n border: altLayout && !recommended ? `solid 1px ${theme.color.white}` : 'transparent',\n };\n\n const fontWeight = bold ? theme.font.weights.medium : theme.font.weights.regular;\n\n return css`\n align-items: center;\n background-color: ${colors.background};\n border-radius: 16px;\n border: ${colors.border};\n color: ${colors.fontColor};\n display: flex;\n font-size: 12px;\n height: 22px;\n letter-spacing: 0.01px;\n line-height: 14px;\n padding: 0 16px;\n font-weight: ${fontWeight};\n white-space: nowrap;\n }\n `;\n }}\n`;\n","import React from 'react';\nimport * as Styles from './Chip.style';\n\nconst Chip = ({\n testId = 'menu-item-component',\n label = 'Label Text',\n recommended = true,\n altLayout = false,\n bold = false,\n}) => (\n \n {label}\n \n);\n\nexport default Chip;\n","import { Button } from '@/pages/common/Button';\nimport React from 'react';\nimport * as Styles from './TitanUpgradeBottomAdvertisement.styles';\nimport { Chip } from '@/pages/common/Chip';\n\nfunction TitanUpgradeBottomAdvertisement({\n variant = 'dark',\n shouldRender = true,\n testId = 'titan-upgrade-bottom-banner',\n knowMore = 'Know More',\n description = 'Description',\n title = 'Title Tag',\n newTag = 'New',\n handleKnowMoreClick = () => {},\n}) {\n return (\n shouldRender && (\n \n \n {title} \n {description} \n \n \n \n \n )\n );\n}\n\nexport default TitanUpgradeBottomAdvertisement;\n","import React, { useLayoutEffect, useState } from 'react';\nimport { TitanUpgradeBottomAdvertisementHandlerLocale } from './TitanUpgradeBottomAdvertisementHandler.locale';\nimport { TitanUpgradeBottomAdvertisement } from '../TitanUpgradeBottomAdvertisement';\nimport {\n executeGABottomBannerDarkTitanBannerDisplay,\n executeGABottomBannerDarkTitanBannerDisplayPlans,\n executeGABottomBannerLightTitanBannerDisplay,\n executeGABottomBannerLightTitanBannerDisplayPlans,\n} from '@/utils/ThirdParties/tagManager';\n\nfunction TitanUpgradeBottomAdvertisementHandler({\n variant = 'dark',\n shouldRender = true,\n setDisplayModal = () => {},\n}) {\n const {\n knowMore,\n description,\n newTag,\n title,\n } = TitanUpgradeBottomAdvertisementHandlerLocale;\n\n const [alreadyViewed, setAlreadyViewed] = useState(false);\n\n useLayoutEffect(() => {\n if (!alreadyViewed) {\n switch (variant) {\n case 'dark':\n setAlreadyViewed(true);\n executeGABottomBannerDarkTitanBannerDisplay();\n break;\n case 'light':\n setAlreadyViewed(true);\n executeGABottomBannerLightTitanBannerDisplay();\n break;\n default:\n break;\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleKnowMoreClick = () => {\n setDisplayModal(true);\n switch (variant) {\n case 'dark':\n executeGABottomBannerDarkTitanBannerDisplayPlans();\n break;\n case 'light':\n executeGABottomBannerLightTitanBannerDisplayPlans();\n break;\n default:\n break;\n }\n };\n\n return (\n \n \n \n {newTag} \n \n \n \n \n {title} \n \n {description}\n {yourDomain} \n \n {knowMore} \n \n )\n );\n}\n\nexport default TitanUpgradeToast;\n","import { locale } from '@/utils/locale';\n\nexport const TitanUpgradeToastHandlerLocale = {\n knowMore: locale('titanAdvertisement.toast.knowMore'),\n description: locale('titanAdvertisement.toast.description'),\n yourDomain: locale('titanAdvertisement.toast.yourDomain'),\n title: locale('titanAdvertisement.toast.title'),\n newTag: locale('titanAdvertisement.toast.newTag'),\n};\n","import React, { useState, useLayoutEffect } from 'react';\nimport TitanUpgradeToast from '../TitanUpgradeToast/TitanUpgradeToast';\nimport { TitanUpgradeToastHandlerLocale } from './TitanUpgradeToastHandler.locale';\nimport { executeGAToastTitanToastDisplay, executeGAToastCloseToastClick, executeGAToastTitanDisplayPlans } from '@/utils/ThirdParties/tagManager';\nimport { isBRServer } from '@/utils/Validators/validation';\n\nfunction TitanUpgradeToastHandler({\n setDisplayModal = () => {},\n shouldRender = true,\n}) {\n const {\n knowMore,\n description,\n newTag,\n title,\n yourDomain,\n } = TitanUpgradeToastHandlerLocale;\n\n const [isOpen, setIsOpen] = useState(true);\n const [alreadyViewed, setAlreadyViewed] = useState(false);\n\n useLayoutEffect(() => {\n if (!alreadyViewed) {\n setAlreadyViewed(true);\n executeGAToastTitanToastDisplay();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleToggleOpen = () => {\n setIsOpen(!isOpen);\n executeGAToastCloseToastClick();\n };\n\n const handleKnowMoreClick = () => {\n setDisplayModal(true);\n executeGAToastTitanDisplayPlans();\n };\n\n return (\n shouldRender && (\n {locale('sites.newTooltip.1')} \n \n ),\n filter: {\n options: {\n filterBy: locale('sites.filter.options.filterBy'),\n },\n clear: locale('sites.filter.clear'),\n searchBarPlaceHolder: locale('sites.filter.placeholder'),\n },\n createSiteBanner: {\n title: (\n <>\n {{locale('sites.createSiteBanner.title.0')} }\n {locale('sites.createSiteBanner.title.1')}\n\n \n ),\n subtitle: locale('sites.createSiteBanner.subtitle'),\n button: locale('sites.createSiteBanner.button'),\n tools: {\n wordpress: locale('sites.createSiteBanner.tools.wordpress'),\n sitebuilder: locale('sites.createSiteBanner.tools.sitebuilder'),\n other: locale('sites.createSiteBanner.tools.other'),\n },\n },\n modalExclusion: {\n title: locale('sites.modalExclusion.title'),\n descriptor: [\n locale('sites.modalExclusion.descriptor.0'),\n locale('sites.modalExclusion.descriptor.1'),\n locale('sites.modalExclusion.descriptor.2'),\n ],\n radioText: locale('sites.modalExclusion.radioText'),\n cancelLabel: locale('sites.modalExclusion.cancelLabel'),\n continueLabel: locale('sites.modalExclusion.continueLabel'),\n },\n warningModals: {\n domainCanceled: {\n title: locale('sites.siteModals.domainCanceled.title'),\n button: locale('sites.siteModals.domainCanceled.button'),\n contentDomainName: domain => locale('sites.siteModals.domainCanceled.contentDomainName', { domain }),\n contentsDomainName: domain => locale('sites.siteModals.domainCanceled.contentsDomainName', { domain }),\n contentInfo: locale('sites.siteModals.domainCanceled.contentInfo'),\n contentsInfo: locale('sites.siteModals.domainCanceled.contentsInfo'),\n contentRedirect: locale('sites.siteModals.domainCanceled.contentRedirect'),\n },\n planCanceled: {\n title: locale('sites.siteModals.planCanceled.title'),\n button: locale('sites.siteModals.planCanceled.button'),\n contentRedirect: locale('sites.siteModals.planCanceled.contentRedirect'),\n },\n newSite: {\n contentInfo: locale('sites.siteModals.newSite.contentInfo'),\n button: locale('sites.siteModals.newSite.button'),\n },\n createSite: {\n title: (\n <>\n {locale('sites.siteModals.createSite.title.0')}\n {locale('sites.siteModals.createSite.title.1')} \n \n ),\n description: domain => (\n <>\n {locale('sites.siteModals.createSite.description.0')}\n {locale('sites.siteModals.createSite.description.2', { domain })} \n \n ),\n toolsText: (\n <>\n {locale('sites.siteModals.createSite.toolsText.0')}\n {locale('sites.siteModals.createSite.toolsText.1')} \n {locale('sites.siteModals.createSite.toolsText.2')}\n \n ),\n buttonCreate: locale('sites.siteModals.createSite.buttonCreate'),\n buttonClose: locale('sites.siteModals.createSite.buttonClose'),\n },\n createSiteWithPartners: {\n title: (\n <>\n {locale('sites.siteModals.createSiteWithPartners.title.0')} \n {locale('sites.siteModals.createSiteWithPartners.title.1')}\n \n ),\n description: () => (\n <>\n {locale('sites.siteModals.createSiteWithPartners.description.0')}\n {locale('sites.siteModals.createSiteWithPartners.description.1')} \n {locale('sites.siteModals.createSiteWithPartners.description.2')}\n \n ),\n buttonCreate: locale('sites.siteModals.createSiteWithPartners.buttonCreate'),\n buttonClose: locale('sites.siteModals.createSiteWithPartners.buttonClose'),\n },\n ecommercePlusOffer: {\n title: locale('sites.siteModals.ecommercePlusOffer.title'),\n descriptionFirst: domain => (\n <>\n {locale('sites.siteModals.ecommercePlusOffer.descriptionFirst.0')}\n {locale('sites.siteModals.ecommercePlusOffer.descriptionFirst.1', { domain })} \n {locale('sites.siteModals.ecommercePlusOffer.descriptionFirst.2')}\n \n ),\n descriptionSecond: locale('sites.siteModals.ecommercePlusOffer.descriptionSecond'),\n continue: locale('sites.siteModals.ecommercePlusOffer.continue'),\n skip: locale('sites.siteModals.ecommercePlusOffer.skip'),\n },\n },\n paymentUrl: locale('routes.billing'),\n asaas: {\n banner: {\n title: locale('asaas.banner.title'),\n newChip: locale('asaas.banner.newChip'),\n text: (\n <>\n {locale('asaas.banner.text.0')}\n {locale('asaas.banner.text.1')} \n {locale('asaas.banner.text.2')}\n \n ),\n buttonLabel: locale('asaas.banner.buttonLabel'),\n },\n asaasRoute: locale('routes.asaas'),\n },\n createSiteWithPartners: {\n title: (\n <>\n {locale('menu.v2.createSiteWithPartners.title.0')} \n {locale('menu.v2.createSiteWithPartners.title.1')}\n \n ),\n description: (\n <>\n {locale('menu.v2.createSiteWithPartners.description.0')}\n {locale('menu.v2.createSiteWithPartners.description.1')} \n {locale('menu.v2.createSiteWithPartners.description.2')}\n \n ),\n buttonCreate: locale('menu.v2.createSiteWithPartners.buttonCreate'),\n },\n};\n\nexport const emptyMessage = label => (\n \n <>0\n 1 \n <>2\n \n);\n","import styled, { css, keyframes } from 'styled-components';\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n padding: 0 40px;\n\n @media (max-width: ${theme.breakpoints.md}) {\n padding: 0;\n }\n `}\n`;\n\nexport const Row = styled.section`\n ${({ marginbottom }) => css`\n margin-bottom: ${marginbottom ? '10px' : '0px'};\n\n > header {\n box-shadow: none;\n padding: 16px 24px\n }\n `}\n`;\n\nexport const InfoWrapper = styled.div`\n align-items: center;\n display: flex;\n height: 100%;\n margin-left: 8px;\n`;\n\nexport const Card = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.color.white};\n border-radius: 0;\n display: flex;\n flex-direction: column;\n margin-bottom: 6px;\n padding: 0px 24px 5px;\n `}\n`;\n\nexport const ButtonContainer = styled.div`\n display: flex;\n justify-content: center;\n margin-bottom: 32px;\n`;\n\nexport const FaqWrapper = styled.section`\n ${({ theme }) => css`\n display: flex;\n gap: 24px;\n justify-content: space-between;\n margin: 40px 0px 0px;\n max-width: 100%;\n padding-bottom: 50px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n max-width: unset;\n }\n `}\n`;\n\nexport const FilterHeadContainer = styled.div`\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0;\n margin-bottom: 4px;\n `};\n`;\n\nexport const Description = styled.p`\n ${({ theme, marginBottom }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n margin: 0;\n margin-bottom: ${marginBottom && '16px'};\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `};\n`;\n\nexport const ToolsList = styled.ul`\n ${({ theme }) => css`\n display: flex;\n gap: 16px;\n margin: 0 0 0 16px;\n padding: 0;\n position: absolute;\n right: 0;\n top: 0;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n gap: 8px;\n }\n `}\n`;\n\nexport const Tool = styled.li`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: column;\n z-index: ${theme.v1.layers.header};\n `}\n`;\n\nexport const ToolTitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 10px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 13px;\n margin: 5px 0 0 0;\n text-align: center;\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n display: none;\n }\n `}\n`;\n\nexport const FilterWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n padding: 24px;\n `}\n`;\n\nexport const FilterHeadWrapper = styled.div`\n display: flex;\n`;\n\nexport const FilterMessage = styled.div`\n max-width: 75%;\n`;\n\nexport const ToolslistWrapper = styled.div`\n position: relative;\n`;\n\nexport const PageTitleWrapper = styled.div`\n ${({ theme }) => css`\n max-width: calc(100% - 270px);\n\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n max-width: 100%;\n }\n `};\n`;\n\nexport const TitanMessage = styled.aside`\n position: fixed;\n right: 16px;\n top: 120px;\n z-index: 9999;\n`;\n\nexport const SearchNoResultMessage = styled.span`\n ${({ theme }) => css`\n border-top: 1px solid ${theme.palette.grey.primary};\n color:${theme.color.greyDark};\n display: block;\n font-family: ${theme.font.family.secondary};\n font-size:${theme.font.sizes.md}\n font-weight: ${theme.font.weights.regular};\n padding: 67px 0px;\n text-align:center;\n `}\n`;\n\nexport const FloatingSurveyContainer = styled.aside`\n ${({ theme }) => css`\n position:fixed;\n right: 0px;\n z-index: ${theme.v2.layers.overlay};\n `}\n`;\n\nexport const SkeletonContainer = styled.div`\n ${({ theme, multipleSkelletons }) => css`\n background-color: ${theme.color.white};\n border-radius: 0;\n display: flex;\n flex-direction: column;\n gap: ${multipleSkelletons ? '8px' : '0px'};\n margin-bottom: 6px;\n padding: ${multipleSkelletons ? '24px' : '0px 24px 5px'};\n\n last-child() {\n border: 0px;\n border-bottom: 0px;\n }\n `}\n`;\n\nexport const SkeletonCard = styled.div`\n display: flex;\n padding: 32px 0px 0px;\n flex-direction: column;\n`;\n\nexport const FirstSkeletonRow = styled.section`\n ${({ theme, marginTop, marginBottom }) => css`\n display: flex;\n flex-direction: row;\n gap: 8px;\n margin-top: ${marginTop ? '16px' : '0px'};\n margin-bottom: ${marginBottom ? '32px' : '0px'};\n\n & div:nth-child(2) {\n margin-left: auto;\n @media(max-width: ${theme.v2.breakpoints.sm}) {\n display: none;\n }\n }\n\n & div:nth-child(3) {\n @media(max-width: ${theme.v2.breakpoints.sm}) {\n margin-left: auto;\n }\n }\n `}\n`;\n\nexport const LastSkeletonRow = styled.section`\n ${({ theme }) => css`\n display: none;\n flex-direction: row;\n gap: 8px;\n margin: 16px 0px 24px;\n max-width: 72px;\n\n @media(max-width: ${theme.v2.breakpoints.sm}) {\n display: flex;\n }\n `}\n`;\n\nexport const SkeletonRow = styled.section`\n ${({ theme, marginTop, marginBottom }) => css`\n display: flex;\n flex-direction: row;\n gap: 8px;\n margin-top: ${marginTop ? '16px' : '0px'};\n margin-bottom: ${marginBottom ? '32px' : '0px'};\n\n & div:nth-child(2) {\n margin-left: auto;\n }\n\n @media(max-width: ${theme.v2.breakpoints.sm}) {\n margin-bottom: 0px;\n }\n `}\n`;\n\nexport const LinkNaBioGuide = styled.div`\n align-items: flex-end;\n display: flex;\n flex-wrap: wrap;\n gap: 22px;\n`;\n\nexport const GuideTexts = styled.div`\n max-width: 140px;\n`;\n\nexport const Image = styled.img`\n max-width: 56px;\n -webkit-transform: scaleX(-1);\n transform: scaleX(-1);\n`;\n\nexport const GuideTitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.bold};\n margin: 0;\n `};\n`;\n\nexport const GuideDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 0;\n `};\n`;\n\nconst boxShadowGrowth = ({ theme }) => keyframes`\n 0% {\n top: 53%;\n left: 56%;\n width: 0vh;\n height: 0vh;\n border-radius: 50%;\n box-shadow: 0px 0px 0px 0vw ${theme.v2.colors.brand.primaryExtraDark}99;\n\n }\n 100% {\n top: 0%;\n left: 0%;\n width: 98vw;\n height: 98vh;\n border-radius: 0%;\n box-shadow: 0px 0px 0px 120vw ${theme.v2.colors.brand.primaryExtraDark}99;\n }\n`;\n\nexport const GuideShadow = styled.div`\n ${({ theme }) => css`\n animation: ${boxShadowGrowth} 0.5s;\n animation-timing-function: ease-in-out;\n -webkit-animation-timing-function: ease-in-out;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n position: absolute;\n background-color: ${theme.v2.colors.brand.primaryExtraDark}99;\n `};\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n ${({ theme }) => css`\n background-color: ${theme.palette.white.light};\n display: flex;\n flex-direction: row;\n gap: 19px;\n justify-content: flex-start;\n padding: 0px 24px 24px;\n\n @media (max-width:${theme.breakpoints.lg}){\n flex-direction: column;\n gap: 5px;\n padding: 0px 0px 24px;\n }\n `}\n`;\n\nexport const OptionItem = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.palette.blue.light};\n border-radius: 5px;\n display: flex;\n justify-content: flex-start;\n padding: 24px;\n width: 100%;\n\n > span:first-child { \n margin-right: 20px;\n }\n\n > a {\n margin-right: 6px;\n }\n\n > span:last-child {\n opacity: 0;\n transition: opacity 150ms ease-in-out;\n }\n\n > a:hover + span {\n opacity: 1;\n }\n `}\n`;\n\nexport const MessageWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.neutral.highPure};\n display: flex;\n gap: 12px;\n margin-top: 8px;\n padding: 6px 6px 0px 6px;\n\n > svg {\n flex-shrink: 0;\n transform: scaleX(-1);\n }\n\n @media (max-width:${theme.breakpoints.sm}){\n padding: 6px 36px 0px 6px;\n }\n `}\n`;\n\nexport const Image = styled.img`\n align-self: flex-end;\n max-width: 70px;\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px auto 0px 0px;\n\n span {\n color: ${theme.v2.colors.brand.primaryMedium};\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n","import { IconDetailedServer } from '@/icons';\nimport { IconArrowForward } from '@/icons/IconArrowForward';\nimport { Link } from '@/pages/common';\nimport React, { useCallback } from 'react';\nimport * as Styles from './EmptyList.styles';\nimport { IconTriangleDetail } from 'gatorcomponents';\nimport SnappyFace from '@/media/pageDescription/snappy-face.svg';\n\nconst EmptyList = ({\n handleEmptyClick,\n linkOptions = [\n {\n name: 'server',\n label: 'Gerenciar seu Servidor',\n icon: \n {emptyLocale} \n \n )}\n \n {linkOptions.map(option => (\n \n {option.icon}\n handleClick(option)}\n />\n \n ))}\n \n \n );\n};\n\nexport default EmptyList;\n","import { MODAL_TYPE } from './useMountNotificationModal.enum';\nimport { parseJSON } from 'date-fns';\n\nexport const rules = {\n [MODAL_TYPE.PLANCANCELED]: (filteredPlans) => {\n const mostRecentCanceled = filteredPlans.filteredSitesPlanCanceled.reduce((prev, current) => ((parseJSON(prev.plan_canceled_at) > parseJSON(current.plan_canceled_at)) ? prev : current));\n return {\n shouldRender: true,\n modalType: MODAL_TYPE.PLANCANCELED,\n domainsToShow: mostRecentCanceled.site,\n };\n },\n [MODAL_TYPE.DOMAINCANCELED]: filteredPlans => ({\n shouldRender: true,\n modalType: MODAL_TYPE.DOMAINCANCELED,\n domainsToShow: filteredPlans.filteredSitesDomainCanceled.map(site => site.site),\n }),\n [MODAL_TYPE.ECOMMERCEPLUS]: (filteredPlans) => {\n const mostRecentCreated = filteredPlans.filteredNewEcommercePlus.reduce((prev, current) => ((parseJSON(prev.created_at) > parseJSON(current.created_at)) ? prev : current));\n return {\n shouldRender: true,\n modalType: MODAL_TYPE.ECOMMERCEPLUS,\n domainsToShow: mostRecentCreated.site,\n };\n },\n [MODAL_TYPE.NEWSITE]: (filteredPlans) => {\n const mostRecentCreated = filteredPlans.filteredNewSites.reduce((prev, current) => ((parseJSON(prev.created_at) > parseJSON(current.created_at)) ? prev : current));\n return {\n shouldRender: true,\n modalType: MODAL_TYPE.NEWSITE,\n domainsToShow: mostRecentCreated.site,\n };\n },\n [MODAL_TYPE.SPECIALIST]: () => {\n const modalAlreadyViewd = localStorage.getItem('modalCreateSiteWithSpecialist');\n\n return ({\n shouldRender: !modalAlreadyViewd,\n modalType: MODAL_TYPE.SPECIALIST,\n domainsToShow: null,\n });\n },\n [null]: () => ({\n shouldRender: false,\n modalType: null,\n domainsToShow: [],\n }),\n};\n","import { useCallback, useMemo } from 'react';\nimport { rules } from './useMountNotificationModal.rules';\nimport { MODAL_TYPE } from './useMountNotificationModal.enum';\n\nconst useMountNotificationModal = ({ sites, enabledEcommercePlusModalToWizard }) => {\n const getModalType = useCallback((filteredPlans) => {\n if (filteredPlans.filteredSitesPlanCanceled.length) {\n return MODAL_TYPE.PLANCANCELED;\n }\n if (filteredPlans.filteredSitesDomainCanceled.length) {\n return MODAL_TYPE.DOMAINCANCELED;\n }\n if (filteredPlans.filteredNewEcommercePlus.length && enabledEcommercePlusModalToWizard) {\n return MODAL_TYPE.ECOMMERCEPLUS;\n }\n if (filteredPlans.filteredNewSites.length) {\n return MODAL_TYPE.NEWSITE;\n }\n if (!filteredPlans.filteredNewSites.length) {\n return MODAL_TYPE.SPECIALIST;\n }\n return null;\n }, [enabledEcommercePlusModalToWizard]);\n\n const mountMessage = useMemo(() => {\n const filteredPlans = {\n filteredSitesPlanCanceled: sites.filter(site => site.show_plan_canceled_warning === true && site.is_main_domain === true),\n filteredSitesDomainCanceled: sites.filter(site => site.show_domain_canceled_warning === true),\n filteredNewSites: sites.filter(site => site.show_new_site_warning === true && site.status_plan === 'active'),\n filteredNewEcommercePlus: sites.filter(site => site.show_ecommerce_plus === true && site.status_plan === 'active'),\n specialist: sites.filter(site => site.show_new_site_warning === true && site.status_plan === 'active'),\n };\n\n const modalType = getModalType(filteredPlans);\n const modalInfo = rules[modalType](filteredPlans);\n\n return modalInfo;\n }, [\n sites,\n getModalType,\n ]);\n return mountMessage;\n};\n\nexport default useMountNotificationModal;\n","import { locale } from '@/utils/locale';\n\nexport const useMountEmptyListLocale = {\n routes: {\n domains: locale('routes.domains'),\n emailsList: locale('routes.emailsList'),\n products: locale('routes.products'),\n security: locale('routes.security'),\n academy: locale('routes.courses'),\n },\n emptyOptions: {\n hireHost: locale('sites.emptyOptions.hireHost'),\n hirePlan: locale('sites.emptyOptions.hirePlan'),\n manageServer: locale('sites.emptyOptions.manageServer'),\n manageEmails: locale('sites.emptyOptions.manageEmails'),\n manageDomains: locale('sites.emptyOptions.manageDomains'),\n manageSecurity: locale('sites.emptyOptions.manageSecurity'),\n manageAcademy: locale('sites.emptyOptions.manageAcademy'),\n },\n};\n","import { SITE_HG, COUNTRY } from '@/config';\n\nconst HOSTING_URL_BY_BRAND = {\n br: `${SITE_HG}/hospedagem-de-sites`,\n cl: `${SITE_HG}/web-hosting`,\n co: `${SITE_HG}/web-hosting`,\n mx: `${SITE_HG}/web-hosting`,\n ar: `${SITE_HG}/web-hosting`,\n pe: `${SITE_HG}/web-hosting`,\n bo: `${SITE_HG}/web-hosting`,\n cr: `${SITE_HG}/web-hosting`,\n do: `${SITE_HG}/web-hosting`,\n ec: `${SITE_HG}/web-hosting`,\n sv: `${SITE_HG}/web-hosting`,\n pa: `${SITE_HG}/web-hosting`,\n py: `${SITE_HG}/web-hosting`,\n uy: `${SITE_HG}/web-hosting`,\n};\n\nexport const HOSTING_URL = HOSTING_URL_BY_BRAND[COUNTRY];\n","export const PRODUCTS_TYPE = {\n DOMAIN: 'domain',\n PROEMAIL: 'proemail',\n DEDICATED: 'dedicated',\n SITELOCK: 'sitelock',\n CODEGUARD: 'codeguard',\n ACADEMY: 'academy',\n};\n\nexport const OPTION_NAME = {\n HIREHOST: 'hireHost',\n HIREPLAN: 'hirePlan',\n DOMAINS: 'domains',\n TITAN: 'titan',\n DEDICATED: 'dedicated',\n SECURITY: 'security',\n ACADEMY: 'academy',\n};\n","import React from 'react';\nimport { OPTION_NAME } from './useMountEmptyList.enum';\nimport { useMountEmptyListLocale } from './useMountEmptyList.locale';\nimport {\n IconDetailedServer, IconDetailedDomain, IconDetailedEmail, IconDetailedSecurity, IconDetailedAcademy,\n} from '@/icons';\n\nexport const rules = {\n [OPTION_NAME.DOMAINS]: (options, routes) => {\n options.splice(0, 0, {\n name: OPTION_NAME.DOMAINS,\n label: useMountEmptyListLocale.emptyOptions.manageDomains,\n icon: \n {useCardActionsLocale.pageDescription.hasOtherThanPendingStites.composedSubtitle[0]} \n {useCardActionsLocale.pageDescription.hasOtherThanPendingStites.composedSubtitle[1]}\n {useCardActionsLocale.pageDescription.hasOtherThanPendingStites.composedSubtitle[2]} \n {useCardActionsLocale.pageDescription.hasOtherThanPendingStites.composedSubtitle[3]}\n ,\n );\n setPageMaxWidth('485px');\n setButton({\n label: useCardActionsLocale.pageDescription.hasOtherThanPendingStites.buttonLabel,\n title: null,\n onClick: () => buttonOnClick(),\n });\n setDisplayArrow(true);\n }\n\n if (!isEmptyList && hasOnlyPendingSites) {\n setPageDescriptionTitle(null);\n setPageDescriptionSubtitle(useCardActionsLocale.pageDescription.onlyPendingSites.subtitle);\n setPageMaxWidth('275px');\n }\n } catch (e) {\n logger.error('Error on useCardActions - method mountDescription', e);\n }\n }, [history, bannerNewSiteAnalytics]);\n\n const sortSitesPerProductSubStatus = useCallback((list) => {\n try {\n const finalList = [];\n let newList = [...list];\n\n newList = newList.filter(site => !['cancelled', 'terminated'].includes(site.sub_status.toLowerCase()));\n\n const active = newList.filter(site => site.sub_status.toLowerCase() === 'active');\n finalList.push(...active);\n\n const toDue = newList.filter(site => site.sub_status.toLowerCase() === 'to_due');\n finalList.push(...toDue);\n\n const overdue = newList.filter(site => site.sub_status.toLowerCase() === 'overdue');\n finalList.push(...overdue);\n\n const pending = newList.filter(site => site.sub_status.toLowerCase() === 'pending');\n finalList.push(...pending);\n\n const inAnalysis = newList.filter(site => site.sub_status.toLowerCase() === 'in_analysis');\n finalList.push(...inAnalysis);\n\n const suspended = newList.filter(site => site.sub_status.toLowerCase() === 'suspended');\n finalList.push(...suspended);\n\n return finalList;\n } catch (e) {\n logger.error('Error on useCardActions - method sortSitesPerProductSubStatus', e);\n return [];\n }\n }, []);\n\n const mountNoResultMessage = useCallback((filteredOptions, filterTyped, emptyMessage) => {\n try {\n const filteredOption = filteredOptions.find(filter => filter.checked);\n if (filterTyped !== '') {\n return sitesLocale.page.emptyState;\n }\n\n return emptyMessage(filteredOption.label.toLowerCase());\n } catch (e) {\n logger.error('Error on useCardActions - method mountNoResultMessage', e);\n }\n }, [sitesLocale.page.emptyState]);\n\n const groupByExternalId = useCallback((cardList) => {\n try {\n const setOfExternalIds = new Set();\n let sitesGroupedByExternalId = [];\n\n const sortedCardList = sortSitesPerProductSubStatus(cardList);\n\n sortedCardList.forEach((card) => {\n setOfExternalIds.add(`${card.hosting_id}`);\n });\n\n const arrayOfExternalIds = Array.from(setOfExternalIds);\n\n arrayOfExternalIds.forEach((groupHostingId) => {\n const sites = sortedCardList.filter(card => card.hosting_id === Number(groupHostingId));\n sitesGroupedByExternalId.push(sites);\n });\n\n sitesGroupedByExternalId = putMainDomainToFirstPosition(sitesGroupedByExternalId);\n\n return sitesGroupedByExternalId;\n } catch (e) {\n logger.error('Error on useCardActions - method groupByExternalId', e);\n }\n }, [putMainDomainToFirstPosition, sortSitesPerProductSubStatus]);\n\n const clearFilter = () => {\n try {\n setFilterTyped('');\n const optionsWithoutCancelled = filterCanceledSites(defaultFilteredOptions);\n groupByExternalId(optionsWithoutCancelled);\n setFilteredOptions(defaultFilteredOptions);\n sitesHandlerGa({\n gaEventAction: 'Limpar filtros',\n gaEventLabel: '',\n });\n } catch (e) {\n logger.error('Error on useCardActions - method clearFilter', e);\n }\n };\n\n return {\n getMainActions,\n getDropdownActions,\n filterCards,\n mountDescription,\n mountNoResultMessage,\n siteInExclusion,\n setSiteInExclusion,\n filteredOptions,\n setFilteredOptions,\n filterTyped,\n setFilterTyped,\n clearFilter,\n pageDescriptionTitle,\n pageDescriptionSubtitle,\n displayCreateSiteBanner,\n pageMaxWidth,\n button,\n displayArrow,\n filterCanceledSites,\n groupByExternalId,\n loadingCpanelSSOProductId,\n setLoadingCpanelSSOProductId,\n };\n};\n\nexport default useCardActions;\n","import { locale } from '@/utils/locale';\nimport React from 'react';\n\nexport const useCostumerPortalSurveyLocale = {\n\n title: locale('costumerPortalSurvey.title'),\n welcome: (\n <>\n {locale('costumerPortalSurvey.welcome.0')}\n {{locale('costumerPortalSurvey.welcome.1')} }\n \n ),\n explanation: (\n <>\n {locale('costumerPortalSurvey.explanation.0')}\n {{locale('costumerPortalSurvey.explanation.1')} }\n {locale('costumerPortalSurvey.explanation.2')}\n \n ),\n start: locale('costumerPortalSurvey.start'),\n jump: locale('costumerPortalSurvey.jump'),\n send: locale('costumerPortalSurvey.send'),\n selectPlaceholder: locale('costumerPortalSurvey.selectPlaceholder'),\n otherInputPlaceholder: locale('costumerPortalSurvey.otherInputPlaceholder'),\n congrats: locale('costumerPortalSurvey.congrats'),\n finalText: locale('costumerPortalSurvey.finalText'),\n finishLabel: locale('costumerPortalSurvey.finishLabel'),\n counterLabel: locale('costumerPortalSurvey.counterLabel'),\n questions: {\n question1: {\n label: locale('costumerPortalSurvey.questions.question-1.label'),\n options: {\n op1: locale('costumerPortalSurvey.questions.question-1.options.1'),\n op2: locale('costumerPortalSurvey.questions.question-1.options.2'),\n op3: locale('costumerPortalSurvey.questions.question-1.options.3'),\n },\n },\n question2: {\n label: locale('costumerPortalSurvey.questions.question-2.label'),\n options: {\n op1: locale('costumerPortalSurvey.questions.question-2.options.1'),\n op2: locale('costumerPortalSurvey.questions.question-2.options.2'),\n op3: locale('costumerPortalSurvey.questions.question-2.options.3'),\n op4: locale('costumerPortalSurvey.questions.question-2.options.4'),\n op5: locale('costumerPortalSurvey.questions.question-2.options.5'),\n },\n },\n question3: {\n label: locale('costumerPortalSurvey.questions.question-3.label'),\n options: {\n op1: locale('costumerPortalSurvey.questions.question-3.options.1'),\n op2: locale('costumerPortalSurvey.questions.question-3.options.2'),\n op3: locale('costumerPortalSurvey.questions.question-3.options.3'),\n op4: locale('costumerPortalSurvey.questions.question-3.options.4'),\n op5: locale('costumerPortalSurvey.questions.question-3.options.5'),\n op6: locale('costumerPortalSurvey.questions.question-3.options.6'),\n op7: locale('costumerPortalSurvey.questions.question-3.options.7'),\n op8: locale('costumerPortalSurvey.questions.question-3.options.8'),\n op9: locale('costumerPortalSurvey.questions.question-3.options.9'),\n op10: locale('costumerPortalSurvey.questions.question-3.options.10'),\n op11: locale('costumerPortalSurvey.questions.question-3.options.11'),\n op12: locale('costumerPortalSurvey.questions.question-3.options.12'),\n op13: locale('costumerPortalSurvey.questions.question-3.options.13'),\n op14: locale('costumerPortalSurvey.questions.question-3.options.14'),\n op15: locale('costumerPortalSurvey.questions.question-3.options.15'),\n op16: locale('costumerPortalSurvey.questions.question-3.options.16'),\n op17: locale('costumerPortalSurvey.questions.question-3.options.17'),\n op18: locale('costumerPortalSurvey.questions.question-3.options.18'),\n op19: locale('costumerPortalSurvey.questions.question-3.options.19'),\n op20: locale('costumerPortalSurvey.questions.question-3.options.20'),\n op21: locale('costumerPortalSurvey.questions.question-3.options.21'),\n },\n },\n question4: {\n label: locale('costumerPortalSurvey.questions.question-4.label'),\n options: {\n op1: locale('costumerPortalSurvey.questions.question-4.options.1'),\n op2: locale('costumerPortalSurvey.questions.question-4.options.2'),\n op3: locale('costumerPortalSurvey.questions.question-4.options.3'),\n op4: locale('costumerPortalSurvey.questions.question-4.options.4'),\n },\n },\n },\n};\n","import { useCostumerPortalSurveyLocale } from './useCostumerPortalSurvey.locale';\nimport { useState, useEffect, useMemo } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { sitesActions } from '@/redux/modules';\nimport { SURVEY_TYPE } from './useCostumerPortalSurvey.enum';\nimport { registerCustomerProfileSurvey } from '@/redux/actions/customerProfileSurvey';\nimport { COUNTRY, costumerPortalSurvey } from '@/config';\nimport { costumerPortalSurveyAnalytics } from '@/analytics';\n\nconst useCostumerPortalSurvey = () => {\n const dispatch = useDispatch();\n const initialQuestionsAnswered = useSelector(state => state.sites.questionsAnswered);\n const { id: userId } = useSelector(state => state.summary);\n\n const [surveyQuestionsAnswered, setSurveyQuestionsAnswered] = useState({ ids: [], answers: {} });\n const [shouldRenderSurvey, setShouldRenderSurvey] = useState(false);\n\n const optionsFirstQuestion = [\n { id: 'option-1', label: useCostumerPortalSurveyLocale.questions.question1.options.op1, value: useCostumerPortalSurveyLocale.questions.question1.options.op1 },\n { id: 'option-2', label: useCostumerPortalSurveyLocale.questions.question1.options.op2, value: useCostumerPortalSurveyLocale.questions.question1.options.op2 },\n { id: 'option-3', label: useCostumerPortalSurveyLocale.questions.question1.options.op3, value: useCostumerPortalSurveyLocale.questions.question1.options.op3 },\n ];\n\n const optionsSecondQuestion = [\n { id: 'option-1', label: useCostumerPortalSurveyLocale.questions.question2.options.op1, value: useCostumerPortalSurveyLocale.questions.question2.options.op1 },\n { id: 'option-2', label: useCostumerPortalSurveyLocale.questions.question2.options.op2, value: useCostumerPortalSurveyLocale.questions.question2.options.op2 },\n { id: 'option-3', label: useCostumerPortalSurveyLocale.questions.question2.options.op3, value: useCostumerPortalSurveyLocale.questions.question2.options.op3 },\n { id: 'option-4', label: useCostumerPortalSurveyLocale.questions.question2.options.op4, value: useCostumerPortalSurveyLocale.questions.question2.options.op4 },\n ].sort(() => Math.random() - 0.5);\n\n const optionsThirdQuestion = [\n { id: 'option-1', label: useCostumerPortalSurveyLocale.questions.question3.options.op1, value: useCostumerPortalSurveyLocale.questions.question3.options.op1 },\n { id: 'option-2', label: useCostumerPortalSurveyLocale.questions.question3.options.op2, value: useCostumerPortalSurveyLocale.questions.question3.options.op2 },\n { id: 'option-3', label: useCostumerPortalSurveyLocale.questions.question3.options.op3, value: useCostumerPortalSurveyLocale.questions.question3.options.op3 },\n { id: 'option-4', label: useCostumerPortalSurveyLocale.questions.question3.options.op4, value: useCostumerPortalSurveyLocale.questions.question3.options.op4 },\n { id: 'option-5', label: useCostumerPortalSurveyLocale.questions.question3.options.op5, value: useCostumerPortalSurveyLocale.questions.question3.options.op5 },\n { id: 'option-6', label: useCostumerPortalSurveyLocale.questions.question3.options.op6, value: useCostumerPortalSurveyLocale.questions.question3.options.op6 },\n { id: 'option-7', label: useCostumerPortalSurveyLocale.questions.question3.options.op7, value: useCostumerPortalSurveyLocale.questions.question3.options.op7 },\n { id: 'option-8', label: useCostumerPortalSurveyLocale.questions.question3.options.op8, value: useCostumerPortalSurveyLocale.questions.question3.options.op8 },\n { id: 'option-9', label: useCostumerPortalSurveyLocale.questions.question3.options.op9, value: useCostumerPortalSurveyLocale.questions.question3.options.op9 },\n { id: 'option-10', label: useCostumerPortalSurveyLocale.questions.question3.options.op10, value: useCostumerPortalSurveyLocale.questions.question3.options.op10 },\n { id: 'option-11', label: useCostumerPortalSurveyLocale.questions.question3.options.op11, value: useCostumerPortalSurveyLocale.questions.question3.options.op11 },\n { id: 'option-12', label: useCostumerPortalSurveyLocale.questions.question3.options.op12, value: useCostumerPortalSurveyLocale.questions.question3.options.op12 },\n { id: 'option-13', label: useCostumerPortalSurveyLocale.questions.question3.options.op13, value: useCostumerPortalSurveyLocale.questions.question3.options.op13 },\n { id: 'option-14', label: useCostumerPortalSurveyLocale.questions.question3.options.op14, value: useCostumerPortalSurveyLocale.questions.question3.options.op14 },\n { id: 'option-15', label: useCostumerPortalSurveyLocale.questions.question3.options.op15, value: useCostumerPortalSurveyLocale.questions.question3.options.op15 },\n { id: 'option-16', label: useCostumerPortalSurveyLocale.questions.question3.options.op16, value: useCostumerPortalSurveyLocale.questions.question3.options.op16 },\n { id: 'option-17', label: useCostumerPortalSurveyLocale.questions.question3.options.op17, value: useCostumerPortalSurveyLocale.questions.question3.options.op17 },\n { id: 'option-18', label: useCostumerPortalSurveyLocale.questions.question3.options.op18, value: useCostumerPortalSurveyLocale.questions.question3.options.op18 },\n { id: 'option-19', label: useCostumerPortalSurveyLocale.questions.question3.options.op19, value: useCostumerPortalSurveyLocale.questions.question3.options.op19 },\n { id: 'option-20', label: useCostumerPortalSurveyLocale.questions.question3.options.op20, value: useCostumerPortalSurveyLocale.questions.question3.options.op20 },\n ].sort(() => Math.random() - 0.5);\n\n const optionsFourthQuestion = [\n { id: 'option-1', label: useCostumerPortalSurveyLocale.questions.question4.options.op1, value: useCostumerPortalSurveyLocale.questions.question4.options.op1 },\n { id: 'option-2', label: useCostumerPortalSurveyLocale.questions.question4.options.op2, value: useCostumerPortalSurveyLocale.questions.question4.options.op2 },\n { id: 'option-3', label: useCostumerPortalSurveyLocale.questions.question4.options.op3, value: useCostumerPortalSurveyLocale.questions.question4.options.op3 },\n { id: 'option-4', label: useCostumerPortalSurveyLocale.questions.question4.options.op4, value: useCostumerPortalSurveyLocale.questions.question4.options.op4 },\n ].sort(() => Math.random() - 0.5);\n\n const survey = useMemo(() => ({\n title: useCostumerPortalSurveyLocale.title,\n explanation: useCostumerPortalSurveyLocale.explanation,\n welcome: useCostumerPortalSurveyLocale.welcome,\n startLabel: useCostumerPortalSurveyLocale.start,\n questions: [\n {\n id: 1,\n name: 'typePerson',\n label: useCostumerPortalSurveyLocale.questions.question1.label,\n skip: {\n skippable: true,\n skipLabel: useCostumerPortalSurveyLocale.jump,\n },\n sendLabel: useCostumerPortalSurveyLocale.send,\n selectPlaceholder: useCostumerPortalSurveyLocale.selectPlaceholder,\n options: [...optionsFirstQuestion],\n otherOption: {\n displayInput: false,\n inputPlaceholder: '',\n },\n },\n {\n id: 2,\n name: 'typeProfile',\n label: useCostumerPortalSurveyLocale.questions.question2.label,\n skip: {\n skippable: true,\n skipLabel: useCostumerPortalSurveyLocale.jump,\n },\n sendLabel: useCostumerPortalSurveyLocale.send,\n selectPlaceholder: useCostumerPortalSurveyLocale.selectPlaceholder,\n options: [\n ...optionsSecondQuestion,\n { id: 'option-5', label: useCostumerPortalSurveyLocale.questions.question2.options.op5, value: 'other' },\n ],\n otherOption: {\n displayInput: true,\n inputPlaceholder: useCostumerPortalSurveyLocale.otherInputPlaceholder,\n },\n },\n {\n id: 3,\n name: 'typeBusiness',\n label: useCostumerPortalSurveyLocale.questions.question3.label,\n skip: {\n skippable: true,\n skipLabel: useCostumerPortalSurveyLocale.jump,\n },\n sendLabel: useCostumerPortalSurveyLocale.send,\n selectPlaceholder: useCostumerPortalSurveyLocale.selectPlaceholder,\n options: [\n ...optionsThirdQuestion,\n { id: 'option-21', label: useCostumerPortalSurveyLocale.questions.question3.options.op21, value: 'other' },\n ],\n otherOption: {\n displayInput: true,\n inputPlaceholder: useCostumerPortalSurveyLocale.otherInputPlaceholder,\n },\n },\n {\n id: 4,\n name: 'forWho',\n label: useCostumerPortalSurveyLocale.questions.question4.label,\n skip: {\n skippable: true,\n skipLabel: useCostumerPortalSurveyLocale.jump,\n },\n sendLabel: useCostumerPortalSurveyLocale.send,\n selectPlaceholder: useCostumerPortalSurveyLocale.selectPlaceholder,\n options: [...optionsFourthQuestion],\n otherOption: {\n displayInput: false,\n inputPlaceholder: '',\n },\n },\n ],\n congrats: useCostumerPortalSurveyLocale.congrats,\n finalText: useCostumerPortalSurveyLocale.finalText,\n finishLabel: useCostumerPortalSurveyLocale.finishLabel,\n counterLabel: useCostumerPortalSurveyLocale.counterLabel,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }), []);\n\n useEffect(() => {\n dispatch(sitesActions.surveyQuestionsAnswered.request(costumerPortalSurvey[COUNTRY]));\n }, [dispatch]);\n\n useEffect(() => {\n const canRenderSurvey = initialQuestionsAnswered.ids.length !== survey.questions.length;\n setShouldRenderSurvey(canRenderSurvey);\n }, [survey.questions, initialQuestionsAnswered]);\n\n useEffect(() => {\n setSurveyQuestionsAnswered(initialQuestionsAnswered);\n }, [initialQuestionsAnswered]);\n\n const handleFinishSurvey = () => {\n setShouldRenderSurvey(false);\n costumerPortalSurveyAnalytics.surveyFinish();\n };\n\n const handleSendQuestion = (answers, questionId) => {\n const payload = {\n answers,\n country: COUNTRY,\n user_id: userId.toString(),\n hosting_id: `user-${userId}`,\n domain: `user-${userId}`,\n };\n dispatch(registerCustomerProfileSurvey({ data: payload, type: SURVEY_TYPE }));\n costumerPortalSurveyAnalytics.surveyQuestionSend(questionId);\n };\n\n const handleClose = (step) => {\n costumerPortalSurveyAnalytics.surveyClose(step);\n };\n\n const handleJumpQuestion = (questionId) => {\n costumerPortalSurveyAnalytics.surveyQuestionJump(questionId);\n };\n\n const handleStartSurvey = () => {\n costumerPortalSurveyAnalytics.surveyStart();\n };\n\n const shouldRenderOpened = surveyQuestionsAnswered.ids && !surveyQuestionsAnswered.ids.length > 0;\n\n const useCostumerPortalSurveyData = {\n survey,\n handleFinishSurvey,\n surveyQuestionsAnswered,\n setSurveyQuestionsAnswered,\n shouldRenderSurvey,\n shouldRenderOpened,\n handleSendQuestion,\n handleStartSurvey,\n handleClose,\n handleJumpQuestion,\n };\n return useCostumerPortalSurveyData;\n};\n\nexport default useCostumerPortalSurvey;\n","export const SURVEY_TYPE = 'costumerPortal';\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport * as Style from './IconComment.style';\n\nconst IconComment = ({\n color = '#4A4A4A', backgroundColor = '#35CF8B', testId = 'icon-comment', size = 24,\n}) => (\n \n \n \n\n \n);\n\n\nexport default IconComment;\n","import styled, { css } from 'styled-components';\n\nexport const ClosedWrapper = styled.button`\n${({ theme }) => css`\nalign-items: center;\n background-color: ${theme.color.oceanGreen};\n border: 0;\n box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);\n cursor: pointer;\n display: flex;\n flex-direction: column;\n gap: 8px;\n justify-content: space-between;\n outline: none;\n padding: 16px 0 8px 0;\n `\n}\n`;\n\nexport const VerticalText = styled.p`\n${({ theme }) => css`\n color: ${theme.color.white};\n font-family: ${theme.font.family.secondary};\n font-size: 16px;\n margin:0;\n padding: 0px 8px 0px 8px;\n text-orientation: mixed;\n transform: rotate(180deg);\n writing-mode: vertical-rl;\n `\n}\n`;\n","import React from 'react';\nimport { IconComment } from '@/icons/iconComment';\nimport * as Styles from './ClosedFloatingSurvey.styles';\nimport * as theme from '@/styles/HgThemeProvider';\n\nconst ClosedFloatingSurvey = ({\n survey = {},\n toggleOpen = () => {},\n testId = 'closed-floating-survey',\n}) => {\n const { title } = survey;\n return (\n \n {title} \n \n );\n};\n\nexport default ClosedFloatingSurvey;\n","import styled, { css } from 'styled-components';\n\nexport const OpenFloatingSurveyContainer = styled.div`\n box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-direction: column;\n margin-right:40px;\n position:relative;\n width: 285px;\n`;\n\nexport const Header = styled.div`\n${({ theme }) => css`\n align-items: center;\n background-color: ${theme.palette.grey.ultralight};\n display: flex;\n justify-content: space-between;\n padding: 0px 22px 0px 18px;\n button {\n padding: 0;\n }\n`\n}`;\n\nexport const Title = styled.p`\n${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.medium};\n margin-left: 10px;\n`\n}`;\n\nexport const TitleContainer = styled.div`\n align-items: center;\n display: flex;\n`;\n\nexport const CloseContainer = styled.div`\n display: flex;\n`;\n\nexport const WelcomeContainer = styled.div`\n${({ theme }) => css`\n background-color:${theme.color.white};\n display:flex;\n flex-direction: column;\n`\n}`;\n\nexport const Welcome = styled.p`\n${({ theme }) => css`\n color: ${theme.color.tundora};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxs};\n line-height: ${theme.font.lineHeights.md};\n padding: 16px;\n margin: 0px;\n span{\n font-weight: ${theme.font.weights.medium};\n }\n`\n}`;\n\nexport const Explanation = styled.p`\n${({ theme }) => css`\n color: ${theme.color.tundora};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxs};\n line-height: ${theme.font.lineHeights.md};\n padding: 0px 16px 16px 16px;\n margin: 0px;\n span{\n font-weight: ${theme.font.weights.medium};\n }\n`\n}`;\n\nexport const ButtonContainer = styled.div`\n align-self: end;\n margin: 8px 16px 24px 0px;\n`;\n\nexport const SnappyImage = styled.img`\n bottom: 0px;\n display: flex;\n height: 38px;\n left: 17px;\n position:absolute;\n width:80px;\n`;\n\nexport const FinishContainer = styled.div`\n${({ theme }) => css`\n background-color:${theme.color.white};\n display:flex;\n flex-direction: column;\n`\n}`;\n\nexport const Congrats = styled.p`\n${({ theme }) => css`\n color: ${theme.color.tundora};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxs};\n font-weight: ${theme.font.weights.medium};\n line-height: ${theme.font.lineHeights.md};\n padding: 16px;\n margin: 0px;\n`\n}`;\n\nexport const FinalText = styled.p`\n${({ theme }) => css`\n color: ${theme.color.tundora};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxs};\n line-height: ${theme.font.lineHeights.md};\n padding: 0px 16px 16px 16px;\n margin: 0px;\n`\n}`;\n\nexport const QuestionsContainer = styled.div`\n${({ theme }) => css`\n background-color:${theme.color.white};\n display:flex;\n flex-direction: column;\n`\n}`;\n\nexport const QuestionCounter = styled.p`\n${({ theme }) => css`\n color:${theme.palette.grey.main};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxs};\n line-height: ${theme.font.lineHeights.md};\n padding: 16px 16px 4px 16px;\n margin: 0px;\n`\n}`;\n","import styled, { css } from 'styled-components';\n\nexport const Button = styled.button`\n ${({\n theme,\n variant,\n size,\n customStyles,\n }) => {\n const sizes = {\n regular: {\n padding: '7px 20px',\n fontSize: '16px',\n lineHeight: '22px',\n borderWidth: customStyles && customStyles.borderWidth ? customStyles.borderWidth : '2px',\n weight: theme.v1.font.weights.medium,\n },\n small: {\n padding: '6px 16px',\n fontSize: '12px',\n lineHeight: '16px',\n borderWidth: customStyles && customStyles.borderWidth ? customStyles.borderWidth : '1px',\n weight: theme.v1.font.weights.regular,\n },\n };\n\n const variants = {\n primary: {\n color: theme.v1.color.white.primary,\n backColor: theme.v1.color.action.primary,\n borderColor: theme.v1.color.action.primary,\n borderStyle: 'solid',\n hoverBackColor: theme.v1.color.action.hover,\n hoverBorderColor: theme.v1.color.action.hover,\n hoverColor: theme.v1.color.white.primary,\n disabledBackColor: theme.v1.color.action.disabled,\n disabledBorderColor: theme.v1.color.action.disabled,\n disabledColor: theme.v1.color.white.primary,\n },\n secondary: {\n color: theme.v1.color.action.primary,\n backColor: theme.v1.color.white.primary,\n borderColor: theme.v1.color.action.primary,\n borderStyle: 'solid',\n hoverBackColor: theme.v1.color.action.hover,\n hoverBorderColor: theme.v1.color.action.hover,\n hoverColor: theme.v1.color.white.primary,\n disabledColor: theme.v1.color.action.disabled,\n disabledBackColor: theme.v1.color.white.primary,\n disabledBorderColor: theme.v1.color.action.disabled,\n },\n tertiary: {\n color: theme.v1.color.action.primary,\n backColor: theme.v1.color.white.primary,\n borderColor: theme.v1.color.white.primary,\n borderStyle: 'solid',\n hoverBackColor: theme.v1.color.action.hover,\n hoverBorderColor: theme.v1.color.action.hover,\n hoverColor: theme.v1.color.white.primary,\n disabledColor: theme.v1.color.action.disabled,\n disabledBackColor: theme.v1.color.white.primary,\n disabledBorderColor: theme.v1.color.action.disabled,\n },\n text: {\n color: theme.v1.color.action.primary,\n backColor: 'transparent',\n borderColor: '',\n borderStyle: 'none',\n hoverBackColor: '',\n hoverBorderColor: '',\n hoverColor: '',\n disabledColor: theme.v1.color.action.disabled,\n disabledBackColor: '',\n disabledBorderColor: '',\n },\n };\n\n return css`\n background-color:${(customStyles && customStyles.backColor) ? customStyles.backColor : variants[variant].backColor};\n border-color: ${(customStyles && customStyles.borderColor) ? customStyles.borderColor : variants[variant].borderColor};\n border-radius: ${(customStyles && customStyles.borderRadius) ? customStyles.borderRadius : '20px'};\n border-style: ${(customStyles && customStyles.borderStyle) ? customStyles.borderStyle : variants[variant].borderStyle};\n border-width: ${(customStyles && customStyles.borderWidth) ? customStyles.borderWidth : sizes[size].borderWidth};\n color:${(customStyles && customStyles.color) ? customStyles.color : variants[variant].color};\n cursor: pointer;\n font-family: ${theme.v1.font.family.primary};\n font-size: ${(customStyles && customStyles.fontSize) ? customStyles.fontSize : sizes[size].fontSize};\n font-weight:${(customStyles && customStyles.weight) ? customStyles.weight : sizes[size].weight};\n letter-spacing: 0.01px;\n line-height: ${(customStyles && customStyles.lineHeight) ? customStyles.lineHeight : sizes[size].lineHeight};\n padding: ${(customStyles && customStyles.padding) ? customStyles.padding : sizes[size].padding};\n transition: background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover{\n background-color:${(customStyles && customStyles.hoverBackColor) ? customStyles.hoverBackColor : variants[variant].hoverBackColor};\n border-color:${(customStyles && customStyles.hoverBorderColor) ? customStyles.hoverBorderColor : variants[variant].hoverBorderColor};\n color:${(customStyles && customStyles.hoverColor) ? customStyles.hoverColor : variants[variant].hoverColor};\n }\n\n &:disabled{\n background-color:${(customStyles && customStyles.disabledBackColor) ? customStyles.disabledBackColor : variants[variant].disabledBackColor};\n border-color:${(customStyles && customStyles.disabledBorderColor) ? customStyles.disabledBorderColor : variants[variant].disabledBorderColor};\n color:${(customStyles && customStyles.disabledColor) ? customStyles.disabledColor : variants[variant].disabledColor};\n }\n `;\n }\n}\n`;\n\n\nexport const Label = styled.span``;\n","import React from 'react';\nimport * as Styles from './Button.styles';\n\nconst Button = ({\n disabled = false,\n label = 'Button text',\n onClick,\n testId = 'button',\n type = 'button',\n variant = 'primary',\n size = 'regular',\n display = 'inline',\n title = null,\n customStyles = {\n color: null,\n backColor: null,\n borderColor: null,\n borderStyle: null,\n hoverBackColor: null,\n hoverBorderColor: null,\n hoverColor: null,\n disabledColor: null,\n disabledBackColor: null,\n disabledBorderColor: null,\n borderRadius: null,\n padding: null,\n },\n}) => {\n const handleOnClick = (event) => {\n onClick && onClick(event);\n };\n\n return (\n \n {label} \n \n );\n};\n\nexport default Button;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({\n theme, disabled, variant, maxWidth, minWidth,\n }) => {\n const variants = {\n default: {\n borderBottom: `1px solid ${theme.v1.color.line.wizard}`,\n },\n };\n\n return css`\n border-bottom: ${variants[variant].borderBottom};\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: ${minWidth || 'unset'};\n max-width: ${maxWidth || 'unset'};\n pointer-events: ${disabled ? 'none' : 'initial'};\n position: relative;\n width: 100%;\n `;\n }}\n`;\n\nexport const Field = styled.div`\n ${({\n theme, variant, isOpen,\n }) => {\n const variants = {\n default: {\n backgroudColor: `${theme.v1.color.white.primary}`,\n border: 'none',\n maxHeight: '42px',\n padding: '0px',\n transform: `rotateX(${isOpen ? '-180deg' : '0deg'})`,\n },\n };\n\n return css`\n align-items: center;\n background-color: ${variants[variant].backgroudColor};\n border: ${variants[variant].border};\n cursor: pointer;\n display: flex;\n flex: 1;\n max-height: ${variants[variant].maxHeight};\n padding:${variants[variant].padding};\n position: relative;\n\n svg {\n transform: ${variants[variant].transform};\n transition: transform 200ms ease;\n }\n `;\n }\n}\n`;\n\nexport const Label = styled.p`\n ${({ theme, variant, selected }) => {\n const variants = {\n default: {\n color: selected ? theme.v1.color.text.primary : theme.v1.color.line.fields,\n fontWeight: theme.v1.font.weights.regular,\n margin: '0px',\n maxWidth: 'calc(100% - 30px)',\n padding: '10px',\n },\n };\n\n return css`\n color: ${variants[variant].color};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${variants[variant].fontWeight};\n margin: ${variants[variant].margin};\n max-width: ${variants[variant].maxWidth};\n padding: ${variants[variant].padding};\n overFlow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `;\n }}\n`;\n\nexport const IconWrapper = styled.div`\n${({\n variant,\n }) => {\n const variants = {\n default: {\n right: '8px',\n },\n };\n\n return css`\n align-items: center;\n display: flex;\n justify-content: center;\n position: absolute;\n right: ${variants[variant].right};\n `;\n }\n}\n`;\n\nexport const OptionsWrapper = styled.div`\n ${({ theme, show, optionsPosition }) => css`\n bottom: ${optionsPosition === 'top' && 'calc(100% + 1px)'};\n box-shadow: -2px 2px 10px #00000024;\n opacity: ${show ? '1' : '0'};\n position: absolute;\n right: -1px;\n top: ${optionsPosition === 'bottom' && 'calc(100% - 1px)'};\n transition: opacity 200ms ease-in-out;\n visibility: ${show ? 'visible' : 'hidden'};\n width: 100%;\n z-index: ${theme.layers.awaysOnTop};\n `}\n`;\n\nexport const OptionsList = styled.ul`\n ${({\n theme, show, fixedBottomOption, variant, optionsHeight, breakLine,\n }) => {\n const variants = {\n default: {\n border: '0',\n borderRadius: '25px',\n overflow: breakLine ? 'visible' : 'hidden',\n scrollbarWidth: '7px',\n textOverflow: breakLine ? 'clip' : 'ellipsis',\n whiteSpace: breakLine ? 'normal' : 'nowrap',\n },\n };\n\n const props = {\n listHeight: optionsHeight || 'unset',\n };\n\n return css`\n background-color: ${theme.palette.white.light};\n border-bottom:${fixedBottomOption ? 0 : `1px solid ${theme.palette.grey.variant}`};\n border-left: 1px solid ${theme.palette.grey.variant};\n border-right: 1px solid ${theme.palette.grey.variant};\n list-style: none;\n margin: 0;\n max-height: ${show ? props.listHeight : '0px'};\n opacity: ${show ? 1 : 0};\n overflow-x: hidden;\n overflow-y: auto;\n padding: 0;\n\n li {\n p {\n text-overflow: ${variants[variant].textOverflow};\n white-space: ${variants[variant].whiteSpace};\n overflow: ${variants[variant].overflow};\n }\n }\n\n @media(min-width: ${theme.breakpoints.lg}) {\n max-height: ${show ? props.listHeight : '0px'};\n }\n\n &::-webkit-scrollbar {\n width: ${variants[variant].scrollbarWidth};\n }\n\n &::-webkit-scrollbar-track {\n background: ${theme.palette.white.light};\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${theme.palette.grey.primary};\n border-left: ${variants[variant].border} solid ${theme.palette.white.light};\n border-radius: ${variants[variant].borderRadius};\n border-right: ${variants[variant].border} solid ${theme.palette.white.light};\n height: 30px;\n width: 100%;\n }\n `;\n }\n}\n`;\n\nexport const OptionItem = styled.li`\n ${({ theme, variant }) => {\n const variants = {\n default: {\n hoverBackgroundColor: theme.v1.color.action.primary,\n hoverColor: theme.v1.color.white.primary,\n },\n };\n\n return css`\n align-items: center;\n cursor: pointer;\n display: flex;\n\n &:hover {\n background-color: ${variants[variant].hoverBackgroundColor};\n\n p{\n color: ${variants[variant].hoverColor}\n }\n }\n `;\n }\n}\n`;\n\nexport const OptionLabel = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n letter-spacing:0.25px;\n line-height: 20px;\n margin: 0px;\n padding: 10px 16px;\n `}\n`;\n","import React, {\n useState, useCallback, useEffect, useRef, useMemo,\n} from 'react';\nimport { IconArrowDownOutlined } from '@/icons';\nimport * as Styles from './Select.styles';\n\nconst Select = ({\n defaultOption = null,\n defaultOptionLabel = 'Select',\n disabled = false,\n onChange,\n onClick,\n options = [],\n testId = 'select',\n placeholder = 'selecionar objetivo',\n variant = 'default',\n minWidth = null,\n maxWidth = null,\n optionsPosition = 'bottom',\n optionsHeight = null,\n selectedResetOnChangeOf = null,\n breakLine = false,\n}) => {\n const wrapperRef = useRef(null);\n const [isOpen, setIsOpen] = useState(false);\n const [selected, setSelected] = useState(null);\n const [isEmpty, setIsEmpty] = useState(false);\n\n const defaultSelectOption = useMemo(\n () => ({\n id: 'default',\n label: defaultOptionLabel,\n value: '',\n }),\n [defaultOptionLabel],\n );\n\n useEffect(() => {\n setSelected(null);\n }, [selectedResetOnChangeOf]);\n\n const [selectOptions, setSelectOptions] = useState(placeholder ? [...options] : [defaultSelectOption, ...options]);\n\n useEffect(() => {\n setSelectOptions(placeholder ? [...options] : [defaultSelectOption, ...options]);\n }, [options, setSelectOptions, placeholder, defaultSelectOption]);\n\n useEffect(() => {\n if (defaultOption !== null && !selected) {\n setSelected({ value: selectOptions[defaultOption], callOnChange: false });\n }\n\n if (!placeholder && !defaultOption) {\n if (JSON.stringify(selectOptions) !== JSON.stringify([defaultSelectOption, ...options])) {\n setSelectOptions([defaultSelectOption, ...options]);\n setSelected(null);\n }\n\n if (!selected && selectOptions.length > 0) {\n const clamped = Math.min(Math.max(defaultOption, 0), selectOptions.length - 1);\n setSelected({ value: selectOptions[clamped], callOnChange: false });\n }\n }\n\n if (placeholder && !selected && selectOptions.length === 1 && !defaultOption) {\n const clamped = Math.min(Math.max(defaultOption, 0), selectOptions.length - 1);\n setSelected({ value: selectOptions[clamped], callOnChange: false });\n }\n }, [defaultOption, selectOptions, selected, options, defaultSelectOption, placeholder]);\n\n const onSelectClick = useCallback(() => {\n setIsOpen(!isOpen);\n }, [isOpen]);\n\n const onOptionClick = useCallback(\n (option) => {\n onClick && onClick(option);\n if (selected && selected.value.id === option.id) {\n setIsOpen(false);\n return;\n }\n setSelected({ value: option, callOnChange: true });\n setIsOpen(false);\n },\n [selected, onClick],\n );\n\n const callOnChange = useCallback(() => {\n if (selected && onChange && selected.callOnChange) {\n onChange && onChange(selected.value);\n setSelected({ value: selected.value, callOnChange: false });\n }\n }, [onChange, selected]);\n\n useEffect(() => {\n callOnChange();\n }, [callOnChange]);\n\n const onMouseDown = useCallback(\n (event) => {\n (\n isOpen\n && wrapperRef.current\n && !wrapperRef.current.contains(event.target)\n ) && setIsOpen(false);\n },\n [isOpen],\n );\n\n const optionsMap = selectOptions.map((option, index) => (\n onOptionClick(option)}\n variant={variant}\n >\n {option.label} \n \n ));\n\n useEffect(() => {\n window.addEventListener('mousedown', onMouseDown);\n return () => {\n window.removeEventListener('mousedown', onMouseDown);\n };\n }, [onMouseDown]);\n\n const validateEmptySelect = useCallback(() => {\n if ((placeholder && !selectOptions.length) || !placeholder) {\n setIsEmpty(selectOptions.length === 1);\n }\n }, [placeholder, selectOptions.length]);\n\n useEffect(() => {\n validateEmptySelect();\n }, [validateEmptySelect]);\n\n return (\n \n \n \n {selected ? selected.value.label : placeholder}\n \n\n \n \n\n \n {options.length > 0 && (\n \n {optionsMap}\n \n )}\n \n \n\n \n );\n};\n\nexport default Select;\n","import styled, { css } from 'styled-components';\n\nexport const Anchor = styled.a`\n ${({ theme, variant }) => {\n const variants = {\n default: {\n decoration: 'underline',\n hoverDecoration: 'underline',\n color: theme.v1.color.action.primary,\n decorationColor: 'transparent',\n hoverDecorationColor: theme.v1.color.action.primary,\n hoverColor: theme.v1.color.action.primary,\n fontWeight: theme.v1.font.weights.medium,\n },\n };\n\n return css`\n align-items: center;\n color: ${variants[variant].color};\n cursor: pointer;\n display: flex;\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${variants[variant].fontWeight};\n text-decoration-color: ${variants[variant].decorationColor};\n text-decoration-line: ${variants[variant].decoration};\n transition: color 200ms ease-in-out, text-decoration-color 200ms ease-in-out;\n\n &:hover {\n color: ${variants[variant].hoverColor};\n text-decoration: ${variants[variant].hoverDecoration};\n text-decoration-color: ${variants[variant].hoverDecorationColor};\n }\n `;\n }}\n`;\n\nexport const IconWrapper = styled.a`\n span {\n margin: 0;\n margin-left: 5px;\n opacity: 0;\n transition: opacity 200ms ease-in-out;\n }\n\n &:hover {\n span {\n opacity: 1;\n }\n }\n`;\n","import React, { useCallback } from 'react';\nimport { useHistory } from 'react-router';\nimport * as Styles from './TextButton.styles';\n\nconst TextButton = ({\n href,\n onClick,\n target = '_self',\n testId = 'link',\n text = 'Link description',\n title = '',\n variant = 'default',\n historyRedirect = false,\n}) => {\n const history = useHistory();\n const handleOnClick = useCallback(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ({ href, event }) => {\n event.preventDefault();\n event.stopPropagation();\n\n onClick && onClick();\n\n if (href && href !== '#') {\n if (target === '_blank') {\n return window.open(href, target);\n }\n\n if (historyRedirect) {\n history.push(href);\n } else {\n window.location.href = href;\n }\n }\n },\n [onClick, target, historyRedirect, history],\n );\n\n return (\n handleOnClick({ href, event })}\n target={target}\n title={title}\n variant={variant}\n >\n {text}\n \n );\n};\n\nexport default TextButton;\n","import styled, { css } from 'styled-components';\n\nexport const QuestionLabel = styled.p`\n${({ theme }) => css`\n color:${theme.palette.blue.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.medium};\n line-height: ${theme.font.lineHeights.xl};\n padding: 0px 16px 17px 16px;\n margin: 0px;\n`\n}`;\n\nexport const SelectContainer = styled.div`\n margin: 0px 16px;\n`;\n\n\nexport const QuestionButtonsContainer = styled.div`\n${() => css`\n align-self: end;\n display:flex;\n padding:25px 16px 25px 0px;\n a {\n margin-right:16px;\n }\n`\n}`;\n\nexport const OtherInputContainer = styled.div`\n margin-top:8px;\n`;\n","import React from 'react';\nimport { Select } from '@/pages/common/v1/inputs/Select';\nimport { TextButton } from '@/pages/common/v1/TextButton';\nimport { Button as NewButton } from '@/pages/common/v1/Button';\nimport { Input } from '@/pages/common/v1/inputs/Input';\nimport * as Styles from './SelectQuestion.styles';\n\nconst SelectQuestion = ({\n currentQuestion, handleAnswerChange, handleJumpQuestion, handleSendAnswer, currentQuestionAnswer, displayOtherOptionField, otherOptionFieldValue, setOtherOptionFieldValue,\n}) => {\n const handleOtherOptionChange = (value) => {\n setOtherOptionFieldValue(value);\n };\n\n return (\n <>\n \n {currentQuestion.label}\n \n \n \n \n )}\n \n \n {currentQuestion.skip && currentQuestion.skip.skippable && (\n handleJumpQuestion(currentQuestion.id)} text={currentQuestion.skip.skipLabel} />\n )}\n \n \n );\n};\n\nexport default SelectQuestion;\n","import React, { useState, useEffect, useCallback } from 'react';\nimport * as Styles from './OpenFloatingSurvey.styles';\nimport { IconComment } from '@/icons/iconComment';\nimport * as theme from '@/styles/HgThemeProvider';\nimport { IconClose } from '@/icons/IconClose';\nimport { Button } from '@/pages/common/';\nimport { Button as NewButton } from '@/pages/common/v1/Button';\nimport SnappyFace from '@/media/pageDescription/snappy-face.svg';\nimport { SelectQuestion } from './SelectQuestion';\n\nconst OpenFloatingSurvey = ({\n toggleOpen,\n survey,\n questionsAnswered,\n setQuestionsAnswered,\n onFinishSurvey,\n dispatch,\n handleStartSurvey,\n handleClose,\n handleJump,\n}) => {\n const {\n title, welcome, explanation, startLabel, congrats, finalText, finishLabel, counterLabel,\n } = survey;\n\n const alreadyAnsweredOne = questionsAnswered.ids.length > 0;\n const [answeredAll, setAnsweredAll] = useState(false);\n const [currentQuestion, setCurrentQuestion] = useState(null);\n const [currentQuestionAnswer, setCurrentQuestionAnswer] = useState({ id: 0, label: '' });\n const [questionsJumped, setQuestionsJumped] = useState([]);\n const [surveyStarted, setSurveyStarted] = useState(alreadyAnsweredOne);\n const [displayOtherOptionField, setDisplayOtherOptionField] = useState(false);\n const [otherOptionFieldValue, setOtherOptionFieldValue] = useState('');\n\n const verifyAllQuestionsAnswered = useCallback(() => {\n if (questionsAnswered.ids.length === survey.questions.length) {\n setAnsweredAll(true);\n }\n }, [questionsAnswered, survey.questions]);\n\n const resetOtherOptionField = () => {\n setDisplayOtherOptionField(false);\n setOtherOptionFieldValue('');\n };\n\n const handleAnswerChange = (answer) => {\n setCurrentQuestionAnswer(answer);\n answer.value === 'other' ? setDisplayOtherOptionField(true) : resetOtherOptionField();\n };\n\n const handleJumpQuestion = (question) => {\n resetOtherOptionField();\n setQuestionsJumped([...questionsJumped, question]);\n handleJump(currentQuestion.id);\n };\n\n const handleSendAnswer = () => {\n const answers = {\n ...questionsAnswered.answers,\n [`${currentQuestion.id}`]: displayOtherOptionField\n ? otherOptionFieldValue\n : currentQuestionAnswer.value,\n };\n\n dispatch(answers, currentQuestion.id);\n\n setQuestionsAnswered({\n ...questionsAnswered,\n ids: [...questionsAnswered.ids, currentQuestion.id],\n answers,\n });\n\n resetOtherOptionField();\n };\n\n useEffect(() => {\n const question = survey.questions.filter(question => questionsAnswered.ids.indexOf(question.id) === -1 && questionsJumped.indexOf(question.id) === -1)[0];\n setCurrentQuestion(question);\n setCurrentQuestionAnswer({ id: 0, label: '', value: '' });\n }, [questionsAnswered, survey.questions, questionsJumped]);\n\n useEffect(() => {\n verifyAllQuestionsAnswered();\n if ((questionsAnswered.ids.length + questionsJumped.length === survey.questions.length) && (questionsAnswered.ids.length !== survey.questions.length)) {\n toggleOpen();\n }\n }, [questionsAnswered, questionsJumped, survey.questions, toggleOpen, verifyAllQuestionsAnswered]);\n\n const startSurvey = () => {\n setSurveyStarted(true);\n handleStartSurvey();\n };\n\n const getCurrentStep = () => {\n let currentStep = '';\n if (!surveyStarted) {\n currentStep = 'start';\n } else if (answeredAll) {\n currentStep = 'end';\n } else {\n currentStep = currentQuestion.id;\n }\n return currentStep;\n };\n\n return (\n \n \n \n \n {title}\n \n \n \n \n \n\n {!surveyStarted && (\n \n \n {welcome}\n \n\n \n {explanation}\n \n\n \n \n \n )}\n\n {(!answeredAll && surveyStarted) && (\n \n \n {`${questionsAnswered.ids.length + questionsJumped.length + 1}/${survey.questions.length} ${counterLabel}`}\n \n {currentQuestion && (\n \n )}\n\n {answeredAll && (\n \n \n {congrats}\n \n \n {finalText}\n \n \n \n \n )}\n \n );\n};\n\nexport default OpenFloatingSurvey;\n","import React, { useState } from 'react';\nimport { ClosedFloatingSurvey } from './ClosedFloatingSurvey';\nimport { OpenFloatingSurvey } from './OpenFloatingSurvey';\n\nconst FloatingSurvey = ({\n survey = {},\n questionsAnswered = { ids: [], answers: {} },\n shouldRenderOpened,\n setQuestionsAnswered,\n onFinishSurvey,\n dispatch,\n handleStartSurvey,\n handleClose,\n handleJumpQuestion,\n}) => {\n const [isOpen, setIsOpen] = useState(shouldRenderOpened);\n const toggleOpen = () => {\n setIsOpen(!isOpen);\n };\n return (isOpen\n ? (\n \n \n {title}\n \n handleOnClose(modalCloseAction.close)}>\n \n \n \n \n {contentDomainName}\n \n {contentInfo}\n \n \n \n handleOnClose(modalCloseAction.understand)} font=\"secondary\" variant=\"newPrimary\" label={button} size=\"large\" />\n \n \n );\n};\n\nexport default ModalDomainCanceled;\n","import styled, { css } from 'styled-components';\n\nexport const Title = styled.h6`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n letter-spacing: 0px;\n line-height: ${theme.font.lineHeights.xxxxxxl};\n margin: 32px 0px 24px 32px;\n @media (max-width: ${theme.breakpoints.sm}) {\n margin: 32px 0px 40px 24px;\n }\n `}\n`;\n\nexport const DomainName = styled.span`\n ${({ theme }) => css`\n color: ${theme.palette.blue.dark};\n font-weight: ${theme.font.weights.medium};\n `}\n`;\n\nexport const Action = styled.div`\n ${() => css`\n align-items: center;\n display: flex;\n flex-direction: column;\n margin-bottom: 40px;\n `}\n`;\n\nexport const ContentWrapper = styled.div`\n${({ theme }) => css`\n display:flex;\n margin: 0px 31px;\n @media (max-width: ${theme.breakpoints.sm}) {\n align-items:center;\n flex-direction:column;\n margin: 0px 24px;\n svg{\n height:45px;\n margin-bottom:40px;\n width: 45px;\n }\n }\n `}\n`;\n\nexport const Content = styled.p`\n${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n letter-spacing: 0px;\n line-height: ${theme.font.lineHeights.lg};\n margin: 0px 0px 40px 16px;\n a{\n color: ${theme.palette.secondary.primary};\n display:inline;\n }\n @media (max-width: ${theme.breakpoints.sm}) {\n margin: 0px 0px 40px 0px;\n }\n`}\n`;\n\nexport const CloseButton = styled.button`\n ${({ theme }) => css`\n align-items: center;\n background-color: unset;\n border: unset;\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n margin: 0;\n opacity: 1;\n padding: 0;\n position: absolute;\n right: 16px;\n top: 16px;\n width: 24px;\n\n svg {\n fill: ${theme.palette.grey.bluish};\n transition: fill 200ms ease-in-out;\n &:hover{\n fill: ${theme.palette.secondary.primary};\n }\n }\n `}\n`;\n","import React, { useContext } from 'react';\nimport {\n Button,\n Link,\n Modal,\n} from '@/pages/common';\nimport * as Styles from './ModalPlanCanceled.styles';\nimport { IconClose, IconInfo } from '@/icons';\nimport { ThemeContext } from 'styled-components';\nimport { locale } from '@/utils/locale';\nimport { Trans } from 'react-i18next';\nimport { modalCloseAction } from '../../SitesHandler/SitesHandler.enum';\n\nconst ModalPlanCanceled = ({\n title, button, contentRedirect, contentDomainName, handleOnCloseWarningModal,\n}) => {\n const handleOnClose = action => (\n handleOnCloseWarningModal && handleOnCloseWarningModal(action)\n );\n const theme = useContext(ThemeContext);\n return (\n \n \n {title}\n \n handleOnClose(modalCloseAction.close)}>\n \n \n \n \n <>0\n \n <>1\n \n <>2\n \n \n \n \n handleOnClose(modalCloseAction.understand)} font=\"secondary\" variant=\"newPrimary\" label={button} size=\"large\" />\n \n \n );\n};\n\nexport default ModalPlanCanceled;\n","import styled, { css } from 'styled-components';\nimport modalDecoLine from '@/media/modalCreateSite/decoline.png';\n\nexport const ContentWrapper = styled.div`\n ${({ theme }) => css`\n padding: 40px 192px 90px 96px;\n position:relative;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n height: 100%;\n padding: 133px 73px 224px 36px;\n }\n `}\n`;\n\nexport const Title = styled.h6`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n letter-spacing: 0px;\n line-height: 32px;\n margin: 0px 0px 8px 0px;\n overflow-x: hidden;\n text-overflow: ellipsis;\n span {\n color: ${theme.v1.color.action.hover};\n font-weight: ${theme.v1.font.weights.bold};\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin-bottom: 16px;\n }\n `}\n`;\n\nexport const Content = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n display: inline-block;\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n line-height: 18px;\n margin: 0px 0px 18px 0px;\n span {\n color: ${theme.v1.color.action.hover};\n font-weight: ${theme.v1.font.weights.medium};\n }\n `}\n`;\n\nexport const Action = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 30px;\n margin-top: 6px;\n position: relative;\n z-index: 4;\n\n button:last-child {\n background-color: ${theme.v1.color.white.primary};\n padding: 0px;\n }\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n flex-direction: column;\n gap: 12px;\n button:first-child {\n width: 120px;\n }\n button:last-child {\n padding: 0px\n width: 260px;\n }\n }\n `}\n`;\n\nexport const DecoLine = styled.img`\n background-image: url(${modalDecoLine});\n bottom: 0;\n height:6px;\n left: 0;\n object-fit:none;\n position:absolute;\n width: 100%;\n`;\n\nexport const Deco = styled.img`\n ${({ theme }) => css`\n height: 121px;\n left: 0;\n object-fit:none;\n position:absolute;\n top: 0;\n width: 53px;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n height: 80px;\n }\n `}\n`;\n\nexport const DecoIcons = styled.div`\n ${({ theme }) => css`\n bottom: 51px;\n display: flex;\n height: 72px;\n position: absolute;\n right: 33px;\n z-index: ${theme.v1.layers.overlay};\n span:last-child{\n align-self: end;\n margin-left: 4px;\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n bottom: 63px;\n height: 105px;\n right: 50px;\n }\n `}\n`;\n\nexport const DecoTriangle = styled.div`\n ${({ theme }) => css`\n background:linear-gradient(to bottom right,#ffffff00 50%,${theme.v1.color.background.wizard} 50%);\n bottom: 0;\n height: 165px;\n position:absolute;\n right: 0;\n width: 207px;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n height: 243px;\n width: 306px\n }\n `}\n`;\n\nexport const SnappyFullBody = styled.img`\n ${({ theme }) => css`\n display: none;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n bottom: 45px;\n display: block;\n position: absolute;\n right: 44px;\n z-index:2;\n }\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const SelectButtonWrapper = styled.div`\n cursor: pointer;\n width: 100%;\n`;\n\nexport const SelectButtonLabel = styled.label`\n ${({\n align,\n justify,\n theme,\n variant,\n }) => {\n const variants = {\n default: {\n backgroundColor: 'transparent',\n border: `1px solid ${theme.v1.color.line.wizard}`,\n svgMargin: '0px 24px 0px 0px',\n },\n };\n\n return css`\n align-items: ${align};\n background-color: ${variants[variant].backgroundColor};\n border-radius: 4px;\n border: ${variants[variant].border};\n cursor: pointer;\n display: flex;\n justify-content: ${justify};\n padding: 16px 24px;\n transition: background-color 150ms ease-in-out, border 150ms ease-out;\n\n svg {\n margin: ${variants[variant].svgMargin}\n }\n `;\n }}\n`;\n\nexport const SelectInput = styled.input`\n ${({\n theme,\n variant,\n }) => {\n const variants = {\n default: {\n checkedBackgroundColor: theme.v1.color.background.boxes,\n checkedBorder: `1px solid ${theme.v1.color.line.fields}`,\n },\n };\n return css`\n display: none;\n\n &:checked + label {\n background-color: ${variants[variant].checkedBackgroundColor};\n border: ${variants[variant].checkedBorder};\n }\n `;\n }}\n`;\n\nexport const Title = styled.span`\n ${({\n theme,\n variant,\n truncate,\n truncateMaxWidth,\n }) => {\n const variants = {\n default: {\n color: theme.v1.color.text.primary,\n weight: theme.v1.font.weights.medium,\n fontSize: '14px',\n lineHeight: '20px',\n letterSpacing: '0px',\n },\n };\n return css`\n color: ${variants[variant].color};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${variants[variant].fontSize};\n font-weight: ${variants[variant].weight};\n letter-spacing: ${variants[variant].letterSpacing};\n line-height: ${variants[variant].lineHeight};\n max-width:${truncate && truncateMaxWidth};\n overflow: ${truncate && 'hidden'};\n text-overflow: ${truncate && 'ellipsis'};\n white-space: ${truncate && 'nowrap'};\n `;\n }}\n`;\n\nexport const Subtitle = styled.span`\n${({\n theme,\n variant,\n }) => {\n const variants = {\n default: {\n color: theme.v1.color.text.primary,\n weight: theme.v1.font.weights.regular,\n fontSize: '14px',\n lineHeight: '20px',\n letterSpacing: '0px',\n },\n };\n return css`\n color: ${variants[variant].color};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${variants[variant].fontSize};\n font-weight: ${variants[variant].weight};\n letter-spacing: ${variants[variant].letterSpacing};\n line-height: ${variants[variant].lineHeight};\n `;\n }}\n`;\n\nexport const LabelContent = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const Label = styled.span``;\n","import React, { useEffect, useState } from 'react';\nimport * as Styles from './SelectButton.styles';\n\nconst SelectButton = ({\n variant = 'default',\n title,\n subtitle,\n onChange,\n iconLeft,\n iconRight,\n type = 'radio',\n checked = false,\n id = 'SelectButton',\n testId = 'SelectButton',\n value = null,\n justify = 'flex-start',\n align = 'center',\n name = 'selectName',\n truncate = false,\n truncateMaxWidth,\n truncateTitle,\n}) => {\n const [currentChecked, setCurrentChecked] = useState(checked);\n\n const handleChange = (event) => {\n onChange && onChange(event, value);\n\n type === 'radio'\n ? setCurrentChecked(!checked)\n : setCurrentChecked(!currentChecked);\n };\n\n useEffect(() => {\n setCurrentChecked(checked);\n }, [checked]);\n\n return (\n \n handleChange(event)}\n variant={variant}\n name={name}\n />\n\n \n {iconLeft && iconLeft}\n\n \n {title && {title} }\n {subtitle && {subtitle} }\n \n {iconRight && iconRight}\n \n \n );\n};\n\nexport default SelectButton;\n","import styled, { css } from 'styled-components';\n\nexport const Button = styled.button`\n ${({\n theme,\n variant,\n size,\n customStyles,\n }) => {\n const sizes = {\n regular: {\n borderWidth: customStyles && customStyles.borderWidth ? customStyles.borderWidth : '2px',\n fontSize: '16px',\n lineHeight: '22px',\n padding: '7px 13px',\n weight: theme.v1.font.weights.medium,\n },\n small: {\n borderWidth: customStyles && customStyles.borderWidth ? customStyles.borderWidth : '1px',\n fontSize: '12px',\n lineHeight: '16px',\n padding: '6px 16px',\n weight: theme.v1.font.weights.regular,\n },\n };\n\n const variants = {\n text: {\n backColor: 'transparent',\n color: theme.v1.color.action.primary,\n disabledBackColor: '',\n disabledBorderColor: '',\n disabledColor: theme.v1.color.action.disabled,\n hoverBackColor: '',\n hoverBorderColor: '',\n hoverColor: '',\n },\n };\n\n return css`\n background-color:${(customStyles && customStyles.backColor) ? customStyles.backColor : variants[variant].backColor};\n border-style: none;\n color:${(customStyles && customStyles.color) ? customStyles.color : variants[variant].color};\n cursor: pointer;\n font-family: ${theme.v1.font.family.primary};\n font-size: ${(customStyles && customStyles.fontSize) ? customStyles.fontSize : sizes[size].fontSize};\n font-weight:${(customStyles && customStyles.weight) ? customStyles.weight : sizes[size].weight};\n letter-spacing: 0.01px;\n line-height: ${(customStyles && customStyles.lineHeight) ? customStyles.lineHeight : sizes[size].lineHeight};\n padding: ${(customStyles && customStyles.padding) ? customStyles.padding : sizes[size].padding};\n transition: background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover{\n background-color:${(customStyles && customStyles.hoverBackColor) ? customStyles.hoverBackColor : variants[variant].hoverBackColor};\n color:${(customStyles && customStyles.hoverColor) ? customStyles.hoverColor : variants[variant].hoverColor};\n }\n\n &:disabled{\n background-color:${(customStyles && customStyles.disabledBackColor) ? customStyles.disabledBackColor : variants[variant].disabledBackColor};\n color:${(customStyles && customStyles.disabledColor) ? customStyles.disabledColor : variants[variant].disabledColor};\n }\n `;\n }\n}\n`;\n\n\nexport const Label = styled.span``;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme, customBreakPoint }) => css`\n align-items: center;\n background-color: ${theme.palette.white.light};\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n flex: 1;\n max-width: 100%;\n padding: 23px 24px 23px 186px;\n position: relative;\n\n @media (max-width: ${customBreakPoint || theme.breakpoints.sm}){\n display: flex;\n flex-direction: column;\n padding: 23px 24px;\n width: 100%;\n }\n `}\n`;\n\nexport const ArrowWrapper = styled.div`\n ${({ theme, customArrowBreakPoint }) => css`\n align-items: center;\n display: flex;\n margin: 0px;\n \n @media (max-width: ${customArrowBreakPoint || theme.breakpoints.sm}) {\n display: none;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ theme, customBreakPoint }) => css`\n margin: 0px 16px 0px 36px;\n min-width: 124px;\n \n @media (max-width: ${customBreakPoint || theme.breakpoints.sm}) {\n margin: 24px 0px 0px auto;\n }\n `}\n`;\n\nexport const TrianglesWrapper = styled.div`\n left: 8px;\n position: absolute;\n top: 8px;\n`;\n\nexport const SnappyImage = styled.img`\n ${({ theme }) => css`\n bottom: 0px;\n height: 40px;\n left: 62px;\n position:absolute;\n width: 90px;\n\n @media (max-width: ${theme.breakpoints.md}){\n left: 8px;\n }\n `}\n`;\n\nexport const Title = styled.h3`\n ${({ theme, maxWidth }) => css`\n color: ${theme.palette.blue.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: 20px;\n margin: 0px auto 0px 0px;\n max-width: ${maxWidth};\n\n @media (max-width: ${theme.breakpoints.md}){\n margin: 0px 0px 0px auto;\n max-width: 250px;\n text-align:right;\n width: 100%;\n }\n `}\n`;\n\nexport const Subtitle = styled.h4`\n ${({ theme, maxWidth }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 20px;\n margin: 0px auto 0px 0px;\n max-width: ${maxWidth};\n width: 100%;\n\n strong {\n color: ${theme.v1.color.action.primary};\n font-weight: ${theme.font.weights.medium};\n }\n\n @media (max-width: ${theme.breakpoints.md}){\n margin: 0px 0px 0px auto;\n max-width: 250px;\n text-align:right;\n width: 100%;\n }\n `}\n`;\n","import React, { useState } from 'react';\nimport * as Styles from './CopyPasteButton.styles';\nimport { copyTextToClipboard } from '@/utils/Application/copyTextToClipboard';\nimport { IconCopyContent } from '@/icons';\n\nconst CopyPasteButton = ({\n id = '',\n disabled = false,\n copyLabel = 'Copy',\n copiedLabel = 'It is copied',\n onClick,\n clipBoardText = '',\n testId = 'button',\n type = 'button',\n variant = 'text',\n size = 'regular',\n display = 'inline',\n title = null,\n timeOut = null,\n icon = \n {getLabelButton()} \n \n \n );\n};\n\nexport default CopyPasteButton;\n","import styled, { css } from 'styled-components';\n\nexport const Label = styled.span``;\n\nexport const Content = styled.span`\n ${({ clickable }) => css`\n align-items: flex-start;\n cursor: ${clickable ? 'pointer' : 'unset'};\n display: inline;\n flex-direction: row;\n width: 100%;\n `}\n`;\n","import React, { useEffect, useState } from 'react';\nimport * as Styles from './Timer.styles';\n\nconst Timer = ({\n startHour = null,\n startMinute = null,\n startSecound = null,\n onFinish = null,\n displayHour = true,\n testeId = 'timer-content',\n}) => {\n const [hours, setHours] = useState(startHour);\n const [minutes, setMinutes] = useState(startMinute);\n const [seconds, setSeconds] = useState(startSecound);\n const [deadline, setDeadline] = useState((((hours || 0) * 60 * 60) + ((minutes || 0) * 60) + (seconds || 0)) * 1000);\n\n const getTime = (deadline) => {\n setHours(Math.floor((deadline / (1000 * 60 * 60)) % 24));\n setMinutes(Math.floor((deadline / 1000 / 60) % 60));\n setSeconds(Math.floor((deadline / 1000) % 60));\n setDeadline(deadline);\n };\n\n const handleFinish = () => {\n onFinish && onFinish();\n };\n\n useEffect(() => {\n const timer = deadline > -1 && setInterval(() => getTime(deadline - 1000), 1000);\n\n if (deadline === 0) {\n handleFinish();\n }\n\n return () => clearInterval(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [deadline]);\n\n const convertToString = value => (value < 10 ? `0${value}` : value);\n\n return (\n \n {displayHour && (\n \n {hours == null ? '00' : convertToString(hours)}\n :\n \n )}\n \n {minutes == null ? '00' : convertToString(minutes)}\n \n :\n \n {seconds == null ? '00' : convertToString(seconds)}\n \n \n );\n};\n\nexport default Timer;\n","import styled, { css } from 'styled-components';\n\nexport const Chip = styled.div`\n ${({\n theme, primaryColor, secondaryColor, variant, weight, uppercase, clickable,\n }) => {\n const textTransform = uppercase ? 'uppercase' : 'capitalized';\n\n const colorScheme = {};\n let borderRadius = '5px';\n let padding = '5px 8px';\n\n switch (variant) {\n case 'outlined':\n colorScheme.fontColor = primaryColor;\n colorScheme.borderColor = primaryColor;\n colorScheme.backgroundColor = secondaryColor;\n break;\n case 'straightEdges':\n borderRadius = '0px';\n colorScheme.fontColor = secondaryColor;\n colorScheme.borderColor = primaryColor;\n colorScheme.backgroundColor = primaryColor;\n padding = '2px 8px';\n break;\n default:\n colorScheme.fontColor = secondaryColor;\n colorScheme.borderColor = primaryColor;\n colorScheme.backgroundColor = primaryColor;\n break;\n }\n\n const fontWeight = theme.font.weights[weight];\n const cursor = clickable ? 'pointer' : 'auto';\n\n return css`\n align-self: normal;\n background-color: ${colorScheme.backgroundColor};\n border-radius: ${borderRadius};\n border: 1px solid ${colorScheme.borderColor};\n color: ${colorScheme.fontColor};\n cursor: ${cursor};\n display: inline-flex;\n font-size: 12px;\n font-weight: ${fontWeight};\n justify-content: center;\n line-height: 14px;\n padding: ${padding};\n text-transform: ${textTransform};\n white-space: nowrap;\n }\n `;\n }}\n`;\n","import React from 'react';\nimport * as Styles from './Chip.styles';\n\nconst Chip = ({\n clickable = false,\n primaryColor = '#000000',\n secondaryColor = '#FFFFFF',\n label = 'Label Text',\n onClick = () => {},\n testId = 'chip',\n uppercase = false,\n variant = 'default',\n weight = 'regular',\n}) => (\n \n {label}\n \n);\n\nexport default Chip;\n","import styled, { css } from 'styled-components';\n\nexport const SlideToggleWrapper = styled.div`\n ${({ theme, maxWidht }) => css`\n align-items: flex-start;\n background-color: ${theme.v1.color.white.primary};\n border-radius: 4px;\n border: 1px solid ${theme.v1.color.line.wizard};\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n max-widht: ${maxWidht};\n padding: 32px 36px;\n width: 100%;\n\n @media (max-width: ${theme.v1.breakpoints.sm}){\n padding: 22px 15px; \n }\n `}\n`;\n\nexport const IconWrapper = styled.div`\n margin-right: 16px;\n`;\n\nexport const ToggleAction = styled.div`\n ${({ clickable }) => css`\n align-items: flex-start;\n cursor: ${clickable ? 'pointer' : 'unset'};\n display: flex;\n flex-direction: row;\n width: 100%;\n `}\n`;\n\nexport const ToggleHeader = styled.div`\n ${({ clickable }) => css`\n align-items: flex-start;\n cursor: ${clickable ? 'pointer' : 'unset'};\n display: flex;\n flex-direction: column;\n width: 100%;\n `}\n`;\n\nexport const TitleWrapper = styled.div`\n align-items: center;\n display: flex;\n flex-direction: row;\n max-width: calc(100% - 29px - 16px);\n width: 100%;\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n letter-spacing: 0px;\n line-height: 32px;\n margin: 0px 0px 8px 0px;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n letter-spacing: 0px;\n line-height: 19px;\n margin: 0px;\n\n @media (max-width: ${theme.v1.breakpoints.sm}){\n margin-left: -40px;\n }\n `}\n`;\n\nexport const ToggleContent = styled.div`\n ${({ open, maxHeight }) => css`\n max-height: ${open ? maxHeight : '0px'};\n overflow: hidden;\n transition: max-height 500ms ease-in-out;\n width: 100%;\n `}\n`;\n\n\nexport const Label = styled.span``;\n","import { IconDetailedHost, IconEdit } from '@/icons';\nimport React, { useEffect, useState } from 'react';\nimport { IconButton } from '../IconButton';\nimport * as Styles from './SlideToggle.styles';\n\nconst SlideToggle = ({\n testId = 'slide-toggle',\n icon = Lots of elements styled on father
\n Lots of elements styled on father
\n Lots of elements styled on father
\n Lots of elements styled on father
\n Lots of elements styled on father
\n Lots of elements styled on father
\n \n ),\n onToggle,\n controlledByFather = false,\n}) => {\n const [display, toggleDisplay] = useState(open);\n\n const handleClickToggle = () => {\n (!controlledByFather && !toggleOnIcon) && toggleDisplay(!display);\n onToggle && onToggle({ toggleOpen: !display });\n };\n\n const handleClickButton = () => {\n !controlledByFather && toggleDisplay(!display);\n onToggle && onToggle({ toggleOpen: !display });\n };\n\n useEffect(() => {\n toggleDisplay(open);\n }, [open]);\n\n return (\n \n \n \n {icon}\n \n\n \n \n {title} \n \n\n {description} \n \n\n {toggleOnIcon && (\n \n\n \n {children}\n \n \n );\n};\n\nexport default SlideToggle;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.div`\n display: flex;\n max-width: fit-content;\n position: relative;\n`;\n","import styled, { css, keyframes } from 'styled-components';\n\nconst appearence = keyframes`\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n`;\n\nexport const TooltipCard = styled.div`\n ${({ theme, width }) => css`\n animation: ${appearence} 200ms;\n background-color: ${theme.v1.color.background.tooltip};\n border-radius: 3px;\n color: ${theme.v1.color.white.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 12px;\n left: 0px;\n overflow: hidden;\n padding: 8px 16px;\n position: fixed;\n top: 0px;\n width: ${width};\n z-index: ${theme.v1.layers.important};\n max-width: 35ch;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n width: calc(100vw - 20px);\n }\n `}\n`;\n","import { useResize } from '@/hooks/useResize';\nimport React, {\n useCallback, useContext, useEffect, useRef,\n} from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { ThemeContext } from 'styled-components';\nimport * as Styles from './TooltipCard.styles';\n\nconst TooltipCard = ({\n content = 'tooltip sample',\n toolTipWrapperCurrent,\n width = 'fit-content',\n preferredPosition = null,\n padding = 8,\n testId = 'tooltip-card',\n}) => {\n const theme = useContext(ThemeContext);\n\n const view = useResize();\n const tooltipCard = useRef();\n const domNode = document.body;\n\n const setMobilePosition = useCallback(() => {\n const smWidth = theme.v1.breakpoints.sm.replace(/px/, '');\n\n if (view.width <= smWidth) {\n tooltipCard.current.style.left = '10px';\n }\n }, [view, theme]);\n\n const validateTooltipFit = useCallback(({ toolTipWrapperCurrent }) => {\n const father = toolTipWrapperCurrent.current.getBoundingClientRect();\n const card = tooltipCard.current.getBoundingClientRect();\n\n const fatherTopPosition = father.top;\n const fatherLeftPosition = father.left;\n const fatherWidth = father.width;\n const fatherHeight = father.height;\n\n const tooltipWidth = card.width;\n const tooltipHeight = card.height;\n\n const tooltipFitAt = {\n right: () => (fatherLeftPosition + fatherWidth + tooltipWidth) < view.width,\n left: () => (fatherLeftPosition - fatherWidth - tooltipWidth) > 0,\n bottom: () => (fatherTopPosition + tooltipHeight) < view.height,\n top: () => (fatherTopPosition - tooltipHeight) > 0,\n };\n\n const setTooltipAt = {\n right: () => {\n tooltipCard.current.style.top = `${fatherTopPosition - (tooltipHeight / 4)}px`;\n tooltipCard.current.style.left = `${fatherLeftPosition + fatherWidth + padding}px`;\n },\n left: () => {\n tooltipCard.current.style.top = `${fatherTopPosition - (tooltipHeight / 4)}px`;\n tooltipCard.current.style.left = `${fatherLeftPosition - tooltipWidth - padding}px`;\n },\n bottom: () => {\n tooltipCard.current.style.top = `${fatherTopPosition + fatherHeight + padding}px`;\n tooltipCard.current.style.left = `${fatherLeftPosition}px`;\n setMobilePosition(view);\n },\n top: () => {\n tooltipCard.current.style.top = `${fatherTopPosition - tooltipHeight - padding}px`;\n tooltipCard.current.style.left = `${fatherLeftPosition}px`;\n setMobilePosition(view);\n },\n };\n\n if (preferredPosition && tooltipFitAt[preferredPosition]()) {\n return setTooltipAt[preferredPosition]();\n }\n\n if (tooltipFitAt.right()) {\n return setTooltipAt.right();\n }\n\n if (tooltipFitAt.left()) {\n return setTooltipAt.left();\n }\n\n if (tooltipFitAt.bottom()) {\n return setTooltipAt.bottom();\n }\n\n if (tooltipFitAt.top()) {\n return setTooltipAt.top();\n }\n }, [setMobilePosition, view, preferredPosition, padding]);\n\n useEffect(() => {\n if (toolTipWrapperCurrent && view) {\n validateTooltipFit({ toolTipWrapperCurrent });\n }\n }, [toolTipWrapperCurrent, view, validateTooltipFit]);\n\n return ReactDOM.createPortal(\n \n {content}\n ,\n domNode,\n );\n};\n\nexport default TooltipCard;\n","import React, {\n useRef,\n useLayoutEffect,\n useState,\n} from 'react';\nimport * as Styles from './Tooltip.styles';\nimport TooltipCard from './TooltipCard/TooltipCard';\n\nconst Tooltip = ({\n children = sample children ,\n content = 'tooltip sample content',\n testId = 'tooltip',\n preferredPosition = null,\n padding = 8,\n width = 'fit-content',\n visible = false,\n}) => {\n const toolTipWrapper = useRef();\n const [hovered, setHovered] = useState(visible);\n\n const enter = () => setHovered(true);\n const leave = () => setHovered(false);\n\n useLayoutEffect(() => {\n const { current } = toolTipWrapper;\n\n if (current) {\n current.addEventListener('mouseenter', enter);\n current.addEventListener('mouseleave', leave);\n document.addEventListener('scroll', leave);\n }\n\n return () => {\n if (current) {\n current.removeEventListener('mouseenter', enter);\n current.removeEventListener('mouseleave', leave);\n document.removeEventListener('scroll', leave);\n }\n };\n }, [toolTipWrapper, hovered]);\n\n return (\n \n {children}\n\n {hovered && (\n \n );\n};\n\nexport default Tooltip;\n","import styled, { css } from 'styled-components';\n\nexport const Separator = styled.hr`\n ${({\n width, height, primaryColor,\n }) => css`\n background-color:${primaryColor};\n border:none;\n height:${height};\n margin:24px 0px 24px 0px;\n width:${width};\n `}\n`;\n","import React from 'react';\nimport * as Styles from './Separator.styles';\n\nconst Separator = ({\n primaryColor = '#F1F3F6',\n width = '100%',\n height = '2px',\n testId = 'separator',\n}) => (\n Lots of elements styled on father
\n Lots of elements styled on father
\n Lots of elements styled on father
\n Lots of elements styled on father
\n Lots of elements styled on father
\n Lots of elements styled on father
\n \n ),\n onToggle,\n}) => {\n const [display, toggleDisplay] = useState(open);\n\n const handleClickToggle = () => {\n toggleDisplay(!display);\n onToggle && onToggle({ toggleOpen: !display, name });\n };\n\n useEffect(() => {\n toggleDisplay(open);\n }, [open]);\n\n return (\n \n \n \n \n {title} \n \n \n \n\n \n {children}\n \n \n );\n};\n\nexport default RadioToggle;\n","import styled, { css } from 'styled-components';\n\nexport const SlideToggleWrapper = styled.div`\n ${({\n theme, basis, active,\n }) => css`\n align-items: flex-start;\n background-color: ${theme.v1.color.white.primary};\n border-radius: 4px;\n border: ${active ? `1px solid ${theme.v1.color.action.primary}` : `1px solid ${theme.v1.color.line.wizard}`};\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n flex: ${basis};\n padding: 18px 10px 18px 18px;\n position: relative;\n transition: border 200ms ease-in-out;\n\n @media (max-width: ${theme.v1.breakpoints.sm}){\n padding: 22px 15px; \n }\n `}\n`;\n\nexport const ToggleAction = styled.div`\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 6px;\n width: 100%;\n\n span {\n flex: 0 0 16px;\n }\n`;\n\nexport const ToggleHeader = styled.div`\n align-items: flex-start;\n cursor: 'pointer';\n display: flex;\n flex-direction: column;\n flex: 1 1 0px;\n width: 100%;\n`;\n\nexport const IconWrapper = styled.div`\n position: absolute;\n right: 3px;\n top: 3px;\n`;\n\nexport const Title = styled.p`\n ${({ theme, active }) => {\n const variant = {\n color: active ? theme.v1.color.action.primary : theme.v1.color.text.primary,\n weight: active ? theme.v1.font.weights.bold : theme.v1.font.weights.regular,\n };\n\n return css`\n color: ${variant.color};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${variant.weight};\n line-height: 19px;\n margin: 0px;\n `;\n }}\n`;\n\nexport const ToggleContent = styled.div`\n ${({ open, maxHeight }) => css`\n margin: ${open ? '12px 0px 0px 0px' : '0px'};\n max-height: ${open ? maxHeight : '0px'};\n overflow: ${open ? 'unset' : 'hidden'};\n transition: max-height 200ms ease-in-out, margin 200ms ease-in-out;\n width: 100%;\n `}\n`;\n\n\nexport const Label = styled.span``;\n","import { IconFeatured } from '@/icons';\nimport React, { useEffect, useState } from 'react';\nimport { Radio } from '../../inputs';\nimport * as Styles from './RadioOption.styles';\n\nconst RadioOption = ({\n testId = 'radio-option',\n title = 'Radio option title',\n basis = 'unset',\n maxHeight = '1000px',\n checked = false,\n onToggle,\n controlledByFather = false,\n featured = false,\n name = 'radio',\n}) => {\n const [check, toggleCheck] = useState(checked);\n\n const handleClickToggle = () => {\n (!controlledByFather && !check) && toggleCheck(!check);\n (onToggle && !check) && onToggle({ checked: !check, name });\n };\n\n useEffect(() => {\n toggleCheck(checked);\n }, [checked]);\n\n return (\n \n \n \n {title} \n \n \n\n {featured && (\n \n \n )}\n \n );\n};\n\nexport default RadioOption;\n","import styled, { css } from 'styled-components';\n\nexport const StepperWrapper = styled.div`\n display: flex;\n`;\n\nexport const Step = styled.div`\n align-items: center;\n display:flex;\n min-width: 42px;\n`;\n\nexport const StepDot = styled.span`\n ${({ theme, status }) => {\n const variants = {\n pending: {\n bgColor: theme.v2.colors.neutral.lowLight,\n flex: '0 0 15px',\n height: '15px',\n },\n finished: {\n bgColor: theme.v2.colors.brand.primaryMedium,\n flex: '0 0 19px',\n height: '19px',\n },\n error: {\n bgColor: theme.v2.colors.feedback.problemMedium,\n flex: '0 0 19px',\n height: '19px',\n },\n };\n\n return css`\n align-items: center;\n background-color: ${variants[status].bgColor};\n border-radius: 50%;\n display: flex;\n flex: ${variants[status].flex};\n justify-content: center;\n height: ${variants[status].height};\n position: relative;\n `;\n }}\n`;\n\nexport const InnerDot = styled.span`\n ${({ theme, status }) => css`\n align-items:center;\n background-color: transparent;\n border-radius: 50%;\n border: 1px solid ${status === 'pending' ? 'transparent' : theme.v2.colors.white.primary};\n display: flex;\n flex: 0 0 15px;\n height: 15px;\n justify-content: center;\n position: relative;\n `}\n`;\n\nexport const StepDash = styled.span`\n ${({ theme, status }) => {\n const variants = {\n pending: {\n bgColor: theme.v2.colors.neutral.lowLight,\n },\n finished: {\n bgColor: theme.v2.colors.brand.primaryMedium,\n },\n error: {\n bgColor: theme.v2.colors.brand.primaryMedium,\n },\n };\n\n return css`\n background-color: ${variants[status].bgColor};\n flex: 0 0 27px;\n height: 1px;\n min-width: 27px;\n `;\n }}\n`;\n\nexport const Label = styled.span``;\n","import { IconCheck, IconClose } from '@/icons';\nimport React from 'react';\nimport * as Styles from './FormStepper.styles';\n\nconst FormStepper = ({\n testId = 'form-stepper',\n items = [\n {\n id: 0,\n status: 'finished',\n },\n {\n id: 1,\n status: 'finished',\n },\n {\n id: 2,\n status: 'error',\n },\n {\n id: 3,\n status: 'pending',\n },\n ],\n}) => {\n const mountSteps = () => items.map((item, idx) => {\n const isLastItem = idx === (items.length - 1);\n return (\n \n {idx > 0 && (\n \n \n {item.status === 'finished' && (\n \n \n\n {!isLastItem && (\n \n );\n });\n\n return (\n \n {mountSteps()}\n \n );\n};\n\nexport default FormStepper;\n","import React from 'react';\nimport {\n Modal,\n} from '@/pages/common';\nimport * as Styles from './ModalCreateSite.styles';\nimport modalDeco from '@/media/newSiteModal/modal-deco.svg';\nimport { Button } from '@/pages/common/v1';\nimport {\n IconDetailedWordpress,\n IconDetailedSiteBuilder,\n} from '@/icons';\nimport { useResize } from '@/hooks/useResize';\nimport { modalCloseAction } from '../../SitesHandler/SitesHandler.enum';\n\nconst ModalCreateSite = ({\n contentDomainName = 'dominio.com.br',\n handleOnCloseWarningModal,\n buttonCreate,\n buttonClose,\n description,\n toolsText,\n title,\n}) => {\n const handleOnClose = (action) => {\n handleOnCloseWarningModal && handleOnCloseWarningModal(action);\n };\n\n const screenSize = useResize();\n const isMobile = screenSize.width <= 600;\n const iconsSize = isMobile ? 60 : 45;\n\n return (\n \n \n \n {title}\n \n\n \n {description(contentDomainName)}\n \n\n \n {toolsText}\n \n\n \n handleOnClose(modalCloseAction.createSite)} label={buttonCreate} />\n\n handleOnClose(modalCloseAction.close)} label={buttonClose} />\n \n\n \n \n\n \n \n );\n};\n\nexport default ModalCreateSite;\n","import styled, { css } from 'styled-components';\n\nexport const Title = styled.h6`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n letter-spacing: 0px;\n line-height: 32px;\n margin: 32px 32px 0px 32px;\n `}\n`;\n\nexport const ContentWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n margin: 30px 32px 0px 32px;\n\n \n\n @media (max-width: ${theme.breakpoints.sm}){\n align-items: center;\n flex-direction: column;\n\n svg {\n height: 55px;\n margin-bottom: 40px;\n width: 55px;\n }\n }\n `}\n`;\n\nexport const Content = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n letter-spacing: 0px;\n line-height: 19px;\n margin: 0;\n padding-left: 16px;\n\n strong {\n color: ${theme.palette.blue.dark};\n font-weight: ${theme.font.weights.medium};\n }\n `}\n`;\n\nexport const RadioWrapper = styled.div`\n display: flex;\n margin: 40px auto 0px;\n`;\n\nexport const RadioLabel = styled.label`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.palette.grey.dark};\n cursor: pointer;\n display: flex;\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxs};\n letter-spacing: 0px;\n line-height: 16px;\n\n > span {\n margin-right: 8px;\n }\n `}\n`;\n\nexport const ActionsWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 32px;\n margin: 40px auto;\n\n button {\n align-items: center;\n display: flex;\n justify-content: center;\n\n > div {\n margin-right: 10px !important;\n\n svg {\n opacity:0;\n transform: rotate( 180deg );\n transition: opacity 150ms ease-in-out !important;\n }\n }\n\n\n &:hover {\n > div {\n svg {\n opacity: 1;\n }\n }\n }\n\n &:last-child {\n div {\n padding: 0px;\n div {\n width: 16px;\n height: 16px;\n margin: 0 67px;\n }\n }\n }\n }\n\n @media (max-width: ${theme.breakpoints.sm}){\n flex-direction: column-reverse;\n > div:first-child {\n button {\n div {\n margin-left: -26px;\n }\n }\n }\n\n button {\n > div{\n margin: unset;\n }\n }\n }\n `}\n`;\n","/* eslint-disable jsx-a11y/label-has-associated-control */\nimport React, { useCallback, useContext, useState } from 'react';\nimport {\n Button, Modal, Radio, TextDescriptor,\n} from '@/pages/common';\nimport * as Styles from './ModalExcludeContent.styles';\nimport { IconInfo } from '@/icons';\nimport { ThemeContext } from 'styled-components';\nimport { textRegular, textBold } from '@/pages/common/TextDescriptor';\nimport { IconArrowForward } from '@/icons/IconArrowForward';\nimport Loader from '@/components/Layout/Loader';\nimport { sitesHandlerGa } from '@/utils/ThirdParties/tagManager';\n\nconst ModalExcludeContent = ({\n title = 'Exclude site content',\n descriptor = [\n 'This action is irreversible ',\n 'We will remove site builder all files from domain ',\n ' in yout host.',\n ],\n site = {\n site: 'sample.com',\n },\n radioText = 'I wish to exclude all content anyway.',\n cancelLabel = 'Guive up exclusion',\n continueLabel = 'Confirm exclusion',\n setSiteInExclusion,\n continueExclusion,\n loadingExclusion,\n}) => {\n const theme = useContext(ThemeContext);\n const [allowExclusion, setAllowExclusion] = useState(false);\n\n const handleClose = useCallback(() => {\n sitesHandlerGa({\n gaEventAction: 'Modal excluir site',\n gaEventLabel: 'Fechar modal',\n });\n setSiteInExclusion(null);\n }, [setSiteInExclusion]);\n\n const handleCancel = useCallback(() => {\n sitesHandlerGa({\n gaEventAction: 'Modal excluir site',\n gaEventLabel: 'Desistir ação',\n });\n setSiteInExclusion(null);\n }, [setSiteInExclusion]);\n\n const handleConfirm = useCallback(() => {\n sitesHandlerGa({\n gaEventAction: 'Modal excluir site',\n gaEventLabel: 'Confirmar exclusão',\n });\n continueExclusion(site);\n }, [continueExclusion, site]);\n\n return (\n handleClose()}\n disablePadding\n testId=\"ModalExcludeContent\"\n >\n {title} \n\n \n \n \n \n\n \n setAllowExclusion(true)} data-testid=\"radioLabel\">\n \n \n\n \n \n \n );\n};\n\nexport default ModalExcludeContent;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: column;\n padding: 32px 35px 25px 35px;\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n padding: 32px 45px 0px 24px;\n }\n `}\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n align-self: start;\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n font-family: ${theme.v2.font.family.primary};\n letter-spacing: 0;\n margin: 0;\n opacity: 100%;\n text-align: left;\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n max-width: 262px;\n }\n `}\n`;\n\nexport const DnsWarningWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 11px;\n margin: 24px 0px 32px 0px;\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n align-items: flex-start;\n margin: 24px 0px 50px 0px;\n }\n `}\n`;\n\nexport const DnsWarningIconWrapper = styled.div`\n align-self: start;\n`;\n\nexport const DnsWarning = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-family: ${theme.v2.font.family.primary};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n max-width: 523px;\n `}\n`;\n\nexport const Action = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n justify-content:center;\n div:first-child button{\n margin-right: 32px;\n }\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n flex-direction: column;\n gap: 32px;\n div:first-child button{\n margin-right: 0px;\n }\n }\n `}\n`;\nexport const BackButtonWrapper = styled.div`\n ${({ theme }) => css`\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n order: 2;\n }\n `}\n`;\n","import { locale } from '@/utils/locale';\n\nexport const dnsInProgressModalLocale = {\n title: locale('sitesWizard.tips.dnsInProgressModal.title'),\n description: locale('sitesWizard.tips.dnsInProgressModal.description'),\n backButton: locale('sitesWizard.tips.dnsInProgressModal.backButton'),\n continueButton: locale('sitesWizard.tips.dnsInProgressModal.continueButton'),\n};\n","/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport { Button } from '@/pages/common/Button';\nimport * as Styles from './DnsInProgressModal.styles';\nimport { dnsInProgressModalLocale } from './DnsInProgressModal.locale';\nimport { IconClock } from 'gatorcomponents';\n\nconst DnsInProgressModal = ({\n onClose,\n buttonClick,\n}) => {\n const handleOnClose = () => {\n onClose && onClose(true);\n };\n\n const handleOnClick = (event) => {\n buttonClick();\n handleOnClose();\n event.preventDefault();\n };\n\n return (\n handleOnClose()} disablePadding maxWidth={624}>\n \n \n {dnsInProgressModalLocale.title}\n \n \n \n \n \n {dnsInProgressModalLocale.description}\n \n \n \n \n handleOnClose('back')}\n />\n \n \n \n \n );\n};\n\nexport default DnsInProgressModal;\n","import styled, { css } from 'styled-components';\n\nexport const ContentWrapper = styled.div`\n ${({ theme }) => css`\n position:relative;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n height: 100vh;\n }\n `}\n`;\n\nexport const Title = styled.h6`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n letter-spacing: 0px;\n line-height: 32px;\n margin: 40px 0px 16px 90px;\n max-width: 500px;\n overflow-x: hidden;\n\n span {\n color: ${theme.v1.color.text.featured};\n }\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin: 133px 105px 24px 35px;\n }\n `}\n`;\n\nexport const Action = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n display: flex;\n flex-direction: row;\n margin: 8px 0px 40px 90px;\n\n button:first-child {\n margin-right: 24px;\n }\n button:last-child {\n padding-left: 24px;\n padding-right: 24px;\n }\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n flex-direction: column;\n margin: auto 35px 110px;\n \n button:last-child {\n margin-top: 12px;\n padding: 0px;\n }\n\n > button {\n width: 100%;\n }\n }\n `}\n`;\n\nexport const Description = styled.p`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n display: inline-block;\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n letter-spacing: 0px;\n line-height: 18px;\n margin: 0px 0px 24px 90px;\n max-width: 450px;\n\n span {\n color: ${theme.v1.color.text.featured};\n font-weight: ${theme.v1.font.weights.medium};\n }\n \n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin: 0px 35px 24px 35px;\n }\n`}\n`;\n\nexport const DecoLine = styled.img`\n bottom:0;\n height:5px;\n object-fit:none;\n position:absolute;\n width: 100%;\n z-index: 3;\n`;\n\nexport const Image = styled.img`\n ${({ theme }) => css`\n bottom: 0px;\n position:absolute;\n right: 30px;\n width: 85px;\n z-index: 3;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n bottom: 45px;\n right: 45px;\n }\n `}\n`;\n\nexport const Deco = styled.img`\n height: 121px;\n object-fit:none;\n position:absolute;\n width: 53px;\n \n`;\n\nexport const DecoTriangle = styled.div`\n ${({ theme }) => css`\n background:linear-gradient(to bottom right,#ffffff00 53%,${theme.v1.color.background.wizard} 50%);\n bottom: 0;\n height: 165px;\n position:absolute;\n right: 0;\n width: 207px;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n height: 243px;\n width: 306px\n }\n `}\n`;\n","import React, { useEffect } from 'react';\nimport { Modal } from '@/pages/common';\nimport { Button } from '@/pages/common/v1';\nimport * as Styles from './ModalEcommercePlusOffer.styles';\nimport modalDecoLine from '@/media/newSiteModal/modal-decoline.svg';\nimport modalDeco from '@/media/newSiteModal/modal-deco.svg';\nimport builderAndWordpress from '@/media/products/wordpress-sitebuildbuilder.svg';\nimport { modalCloseAction } from '../../SitesHandler/SitesHandler.enum';\n\nconst ModalEcommercePlusOffer = ({\n title = 'title sample',\n buttonLabel = 'button label',\n backButtonLabel = 'back button label',\n descriptionFirst = () => 'description sample',\n contentDomainName = 'domain.com',\n descriptionSecond = 'description sample',\n onClose,\n onModalOpen,\n}) => {\n const handleContinue = () => {\n onClose && onClose(modalCloseAction.createSite);\n };\n\n const handleClose = () => {\n onClose && onClose(modalCloseAction.close);\n };\n\n useEffect(() => {\n onModalOpen();\n }, [onModalOpen]);\n\n return (\n \n \n \n {title}\n \n\n \n {descriptionFirst(contentDomainName)}\n \n\n \n {descriptionSecond}\n \n\n \n \n\n \n \n );\n};\n\nexport default ModalEcommercePlusOffer;\n","import React from 'react';\nimport { ModalDomainCanceled } from '../ModalDomainCanceled';\nimport { ModalPlanCanceled } from '../ModalPlanCanceled';\nimport { ModalCreateSite } from '../ModalCreateSite';\nimport { ModalExcludeContent } from '../ModalExcludeContent';\nimport { TitanAdvertisementModal } from '@/pages/sites/components/TitanAdvertisementModal';\nimport { MODAL_TYPE } from '@/hooks/sites/sitesList/useMountNotificationModal/useMountNotificationModal.enum';\nimport ModalDomainNotConfigured from '@/components/Domain/ModalDomainNotConfigured';\nimport { DnsInProgressModal } from '../DnsInProgressModal';\nimport { ModalEcommercePlusOffer } from '../ModalEcommercePlusOffer';\n\nconst SitesHandlerModals = ({\n sitesPagesLocale,\n modalDomains,\n handleOnCloseWarningModal,\n handleCloseConfigureDomainModal,\n shouldRenderConfigureDomainModal,\n shouldRenderNotificationModal,\n modalWarningType,\n enabledNewSiteModal,\n siteInExclusion,\n loadingExclusion,\n excludeSiteBuilder,\n setSiteInExclusion,\n enabledNewStatusDomain,\n eligibleForTitanUpgrade,\n eligibleDomainOptions,\n ecommercePlusModalAnalytics,\n displayModalTitanAdvertisementHandler,\n setDisplayModalTitanAdvertisementHandler,\n advertisementType,\n showDnsInProgressModal,\n openWordpressLink,\n dnsInProgressDomain,\n setShowDnsInProgressModal,\n}) => {\n const modalPlanCanceled = () => {\n const defaultProps = {\n button: sitesPagesLocale.warningModals.planCanceled.button,\n title: sitesPagesLocale.warningModals.planCanceled.title,\n contentDomainName: modalDomains,\n contentRedirect: sitesPagesLocale.warningModals.planCanceled.contentRedirect,\n handleOnCloseWarningModal,\n };\n return { ...defaultProps };\n };\n\n const modalDomainCanceledProps = () => {\n const defaultProps = {\n button: sitesPagesLocale.warningModals.domainCanceled.button,\n title: sitesPagesLocale.warningModals.domainCanceled.title,\n contentDomainName: modalDomains.length === 1 ? sitesPagesLocale.warningModals.domainCanceled.contentDomainName(modalDomains) : sitesPagesLocale.warningModals.domainCanceled.contentsDomainName(modalDomains),\n contentInfo: modalDomains.length === 1 ? sitesPagesLocale.warningModals.domainCanceled.contentInfo : sitesPagesLocale.warningModals.domainCanceled.contentsInfo,\n contentRedirect: sitesPagesLocale.warningModals.domainCanceled.contentRedirect,\n handleOnCloseWarningModal,\n };\n return { ...defaultProps };\n };\n\n const modalCreateSiteProps = () => {\n const defaultProps = {\n title: sitesPagesLocale.warningModals.createSite.title,\n description: sitesPagesLocale.warningModals.createSite.description,\n toolsText: sitesPagesLocale.warningModals.createSite.toolsText,\n contentDomainName: modalDomains,\n buttonCreate: sitesPagesLocale.warningModals.createSite.buttonCreate,\n buttonClose: sitesPagesLocale.warningModals.createSite.buttonClose,\n handleOnCloseWarningModal,\n };\n return { ...defaultProps };\n };\n\n const modalExcludeContentProps = () => {\n const defaultProps = {\n title: sitesPagesLocale.modalExclusion.title,\n descriptor: [\n sitesPagesLocale.modalExclusion.descriptor[0],\n sitesPagesLocale.modalExclusion.descriptor[1],\n sitesPagesLocale.modalExclusion.descriptor[2],\n ],\n radioText: sitesPagesLocale.modalExclusion.radioText,\n cancelLabel: sitesPagesLocale.modalExclusion.cancelLabel,\n continueLabel: sitesPagesLocale.modalExclusion.continueLabel,\n site: siteInExclusion,\n continueExclusion: e => excludeSiteBuilder(e),\n setSiteInExclusion: e => setSiteInExclusion(e),\n loadingExclusion,\n };\n return { ...defaultProps };\n };\n\n const modalDnsInProgressProps = () => {\n const defaultProps = {\n onClose: () => setShowDnsInProgressModal(false),\n buttonClick: () => openWordpressLink(dnsInProgressDomain),\n };\n return { ...defaultProps };\n };\n\n const titanAdvertisementModalProps = () => {\n const defaultProps = {\n domainOptions: eligibleDomainOptions,\n displayModal: displayModalTitanAdvertisementHandler,\n setDisplayModal: setDisplayModalTitanAdvertisementHandler,\n typeAdvertisement: advertisementType,\n };\n return { ...defaultProps };\n };\n\n const modalEcommercePlusOfferProps = () => {\n const defaultProps = {\n title: sitesPagesLocale.warningModals.ecommercePlusOffer.title,\n buttonLabel: sitesPagesLocale.warningModals.ecommercePlusOffer.continue,\n backButtonLabel: sitesPagesLocale.warningModals.ecommercePlusOffer.skip,\n descriptionFirst: sitesPagesLocale.warningModals.ecommercePlusOffer.descriptionFirst,\n descriptionSecond: sitesPagesLocale.warningModals.ecommercePlusOffer.descriptionSecond,\n onClose: handleOnCloseWarningModal,\n contentDomainName: modalDomains,\n onModalOpen: ecommercePlusModalAnalytics.ecommercePlusModalOpen,\n };\n return { ...defaultProps };\n };\n\n if (shouldRenderConfigureDomainModal) {\n return \n {alerts.map((alert) => {\n const variants = {\n Critical: 'error',\n Important: 'warning',\n Warning: 'warning',\n };\n\n return (\n \n );\n};\n\nexport default AlertMessage;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin: 0px 40px 0px;\n\n a {\n color: ${theme.v2.colors.brand.primaryBlue};\n font-weight: ${theme.v2.font.weights.bold};\n text-decoration: underline;\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n margin: 0px 0px;\n }\n `}\n`;\n\nexport const DescriptionWrapper = styled.div`\n button {\n padding: 0px;\n }\n`;\n","import React from 'react';\nimport { Alert } from 'gatorcomponents';\nimport * as Styles from './DomainMessage.styles';\nimport useLocale from '@/hooks/useLocale';\n\nconst DomainMessage = ({\n action,\n domainStatusSuspended,\n domainStatusPending,\n}) => {\n const { alerts: alertsLocale } = useLocale();\n const handleClick = () => {\n action && action();\n };\n\n const descriptionSuspended = (\n \n {alertsLocale.domainCritialMessage({ handleClick })}\n \n );\n\n const descriptionPending = (\n \n {alertsLocale.domainStaticMessage({ handleClick })}\n \n );\n\n return (\n \n {domainStatusSuspended.length > 0 && (\n \n );\n};\n\nexport default DomainMessage;\n","export const getClassNamesFollowingDomainStatus = (domainStatus) => {\n switch (domainStatus) {\n case 'Active': return 'active';\n case 'Pending': return 'pending';\n case 'Pending Transfer': return 'pending_transfer';\n case 'Expired': return 'expired';\n case 'Transferred Away': return 'transferred_away';\n case 'Cancelled': return 'cancelled';\n case 'Fraud': return 'fraud';\n case 'NextDueDate': return 'nextDueDate';\n case 'DueDate': return 'dueDate';\n default: return domainStatus;\n }\n};\n","const styles = theme => ({\n container: {\n borderRadius: 0,\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n '& .detailParam': {\n fontFamily: 'Roboto, sans-serif',\n fontSize: theme.font.sizes.sm,\n },\n '& .cardSubTitle': {\n color: theme.color.regentGray,\n },\n },\n active: {\n borderLeft: `5px solid ${theme.color.oceanGreen}`,\n '& .status-icon': {\n color: theme.color.oceanGreen,\n },\n '& .barChecked': {\n '& ~ .roundBar': {\n backgroundColor: theme.color.oceanGreen,\n },\n },\n '& .roundIcon': {\n backgroundColor: theme.color.mystic,\n },\n '& .iconChecked': {\n backgroundColor: theme.color.oceanGreen,\n },\n '& .switchRoot': {\n '& .roundBar': {\n backgroundColor: theme.color.tundora,\n },\n },\n },\n pending: {\n borderLeft: `5px solid ${theme.color.brightSun}`,\n '& .status-icon': {\n color: theme.color.brightSun,\n },\n '& .warning-notice': {\n borderColor: theme.color.brightSun,\n },\n '& .warningStatusColor': {\n borderColor: theme.color.brightSun,\n },\n },\n pendingTransfer: {\n borderLeft: `5px solid ${theme.color.coral}`,\n '& .status-icon': {\n color: theme.color.coral,\n },\n '& .warning-notice': {\n borderColor: theme.color.coral,\n },\n '& .warningStatusColor': {\n borderColor: theme.color.coral,\n },\n },\n expired: {\n borderLeft: `5px solid ${theme.color.valencia}`,\n '& .status-icon': {\n color: theme.color.valencia,\n },\n '& .warning-notice': {\n borderColor: theme.color.valencia,\n },\n '& .warningStatusColor': {\n borderColor: theme.color.valencia,\n },\n },\n registerError: {\n borderLeft: `5px solid ${theme.color.valencia}`,\n '& .status-icon': {\n color: theme.color.valencia,\n },\n '& .warning-notice': {\n borderColor: theme.color.valencia,\n },\n '& .warningStatusColor': {\n borderColor: theme.color.valencia,\n },\n },\n cancelled: {\n borderLeft: `5px solid ${theme.color.geyser}`,\n '& .status-icon': {\n color: theme.color.geyser,\n },\n '& .warning-notice': {\n borderColor: theme.color.geyser,\n },\n '& .warningStatusColor': {\n borderColor: theme.color.geyser,\n },\n },\n suspended: {\n borderLeft: `5px solid ${theme.color.valencia}`,\n '& .status-icon': {\n color: theme.color.valencia,\n },\n '& .warning-notice': {\n borderColor: theme.color.valencia,\n },\n '& .warningStatusColor': {\n borderColor: theme.color.valencia,\n },\n },\n nextDueDate: {\n borderLeft: `5px solid ${theme.color.brightSun}`,\n '& .status-icon': {\n color: theme.color.brightSun,\n },\n '& .warning-notice': {\n borderColor: theme.color.brightSun,\n },\n '& .warningStatusColor': {\n borderColor: theme.color.brightSun,\n },\n },\n dueDate: {\n borderLeft: `5px solid ${theme.color.valencia}`,\n '& .status-icon': {\n color: theme.color.valencia,\n },\n '& .warning-notice': {\n borderColor: theme.color.valencia,\n },\n '& .warningStatusColor': {\n borderColor: theme.color.valencia,\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { Card, withStyles } from '@material-ui/core';\nimport { getClassNamesFollowingDomainStatus } from '@/utils/Application/getCssStyleNames';\nimport styles from './styles';\nimport classNames from 'classnames';\n\n\nfunction DomainDetailCard({\n children,\n classes,\n domainStatus,\n className,\n isNextDueDate,\n isDueDate,\n}) {\n return (\n \n {children}\n \n );\n}\n\n\nexport default withStyles(styles, { withTheme: true })(DomainDetailCard);\n","const styles = theme => ({\n cardWarningBox: {\n border: `1px solid ${theme.color.brightSun}`,\n padding: '5px 15px 5px 15px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n minHeight: '35px',\n '& svg': {\n marginRight: '12px',\n color: theme.color.tundora,\n },\n '& span': {\n lineHeight: '1.4',\n letterSpacing: '0',\n },\n },\n paymentPending: {\n borderColor: theme.color.coral,\n justifyContent: 'flex-start',\n '& .status-icon': {\n color: theme.color.coral,\n },\n '& .label': {\n backgroundColor: theme.color.coral,\n },\n '@media(min-width: 960px) and (max-width: 1160px)': {\n justifyContent: 'center',\n },\n },\n cardWarningText: {\n fontSize: 12,\n margin: 0,\n '& a': {\n color: theme.color.indigo,\n },\n },\n statusCancelled: {\n borderColor: theme.color.geyser,\n },\n statusTerminated: {\n borderColor: theme.color.geyser,\n },\n statusOnConfigure: {\n borderColor: theme.color.brightSun,\n },\n statusInAnalysis: {\n borderColor: theme.color.brightSun,\n },\n statusExpired: {\n borderColor: theme.color.grayLight,\n },\n statusSuspended: {\n borderColor: theme.color.valencia,\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport classnames from 'classnames';\nimport { Warning } from '@material-ui/icons';\nimport { Typography, withStyles } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport withWidth, { isWidthDown } from '@material-ui/core/withWidth';\n\nimport styles from './styles';\n\n\nconst WarningNotice = ({\n classes,\n message,\n fill,\n width,\n border,\n className,\n phishingCheck,\n icon,\n contentClassName,\n radius,\n}) => {\n const isMobile = isWidthDown('sm', width);\n\n return (\n \n
\n {icon || {message} \n \n \n
onClose()}\n >\n \n {t('domains.emailConfirmation')}\n \n \n \n 0 \n 1\n \n \n\n \n {domainsVerificationPending.map(domain => (\n \n \n \n \n \n {t('domain')} \n {domain.domain_name} \n \n \n {t('domains.domainStatusTitle')} \n {domain.verification_status === 'suspended' ? t('domains.verificationStatusSuspended') : t('domains.verificationStatusPending')} \n \n \n {t('domains.domainExpirationDate')} \n {formatDate(domain.suspension_date)} \n \n \n handleEmailConfirm(domain.domain_id)}\n onLoading={loadingEmailVerification && selected === domain.domain_id}\n >\n {t('domains.emailConfirmation')}\n \n \n {!loadingEmailVerification && selected === domain.domain_id && (\n \n \n
\n 0 \n \n 1\n
\n \n 2\n \n 3 \n {domain.verification_status === 'suspended' && (\n \n )}\n \n ) : (\n \n 0 \n 1\n \n )\n )}\n />\n \n )}\n \n \n \n \n ))}\n\n \n \n {displayAlertMessage && \n);\n\nexport default PageMessages;\n","import styled, { css } from 'styled-components';\nimport noGiveup from '@/media/subscriptions/retention/noGiveup.svg';\nimport linha from '@/media/subscriptions/retention/linha.svg';\n\nexport const Wrapper = styled.div`\n${({ theme }) => css`\nmargin: 0px 0px 8px 0px;\n\n> div {\n margin-right: auto;\n}\n@media (max-width: ${theme.v2.breakpoints.md}) {\n height:auto;\n > div {\n }\n}\n@media (max-width: ${theme.v2.breakpoints.lg}) {\n width: 100%;\n}\n@media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 0px 0px 8px 0px;\n\n}\n@media (max-width: ${theme.v2.breakpoints.xs}) {\n margin: 0px 0px 8px 0px;\n}\n`}\n`;\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.brand.primaryDark};\n color: ${theme.v2.colors.white.primary};\n display: flex;\n font-size: ${theme.v2.font.sizes.xs};\n height: 87px;\n justify-content: space-between;\n left: 0;\n padding: 0px;\n z-index: unset;\n\n > div {\n margin-right: auto;\n }\n @media (max-width: ${theme.v2.breakpoints.md}) {\n height:auto;\n > div {\n padding: 24px 16px 24px 0px;\n }\n }\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n width: 100%;\n }\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n\n }\n @media (max-width: ${theme.v2.breakpoints.xs}) {\n }\n `}\n `;\n\nexport const ContentText = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.brand.primaryDark};\n color: ${theme.v2.colors.white.primary};\n display: flex;\n font-size: ${theme.v2.font.sizes.xs};\n justify-content: space-between;\n left: 0;\n margin: 0px 0px 0px 0px;\n padding: 0px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n display: block;\n height:auto;\n width: 100%;\n }\n\n @media (max-width: ${theme.v2.breakpoints.xs}) {\n width: 100%;\n }\n\n `}\n`;\n\nexport const NoGiveUp = styled.div`\n align-self: flex-end;\n object-fit: contain;\n background-image: url('${noGiveup}');\n height:22px\n`;\n\n\nexport const TopLine = styled.div`\n align-self: flex-end;\n object-fit: contain;\n background-image: url('${linha}');\n height: 4px\n`;\n\n\nexport const GiftIcon = styled.img`\n align-self: flex-end;\n height: 88px;\n object-fit: contain;\n width: 65px;\n\n`;\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n max-width: fit-content;\n margin: 0px 0px 0px 8px;\n color: ${theme.v2.colors.white.primary};\n flex: 1;\n gap: 242px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n flex-direction: column;\n gap: 2px;\n margin-bottom: 8px;\n }\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 0px 0px 0px 0px;\n }\n `}\n`;\n\nexport const ContentTitle = styled.div`\n display:flex;\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.white.primary};\n font-family: ${theme.v2.font.family.secondary};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.bold};\n margin-bottom: 8px;\n margin-top:auto;\n max-width: fit-content;\n letter-spacing: 0.01px;\n @media (max-width: ${theme.v2.breakpoints.md}) {\n text-align: justify;\n }\n `}\n`;\n\nexport const Discount = styled.text`\n${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activePure};\n font-weight: ${theme.v2.font.weights.bold};\n margin-left: 4px;\n`}\n`;\n\nexport const ContentDescription = styled.div`\n width: 100%;\n @media (max-width: 1260px) {\n display:block;\n }\n`;\n\nexport const Description = styled.p`\n ${({ theme, variant }) => css`\n color: ${theme.v2.colors.white.primary};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${variant === 'sites' ? theme.v2.font.sizes.xxs : theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 1.4;\n margin: 0px;\n opacity: 1;\n text-align: start;\n width: max-content;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n width: auto;\n }\n\n `}\n`;\n\nexport const ContentButton = styled.div`\n${({ theme }) => css`\n margin: 0px 0px 0px 24px;\n > button {\n background: transparent;\n border-color: ${theme.v2.colors.feedback.activePure};\n color: ${theme.v2.colors.feedback.activePure};\n font-size: ${theme.v2.font.sizes.xxs};\n }\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 16px 0px 0px 0px;\n }\n `}\n `;\n\nexport const CloseButton = styled.button`\n${({ theme }) => css`\n align-items: center;\n align-self: flex-start;\n background-color: unset;\n border: unset;\n color: ${theme.v2.colors.white.primary};\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n margin: 8px 8px 8px 0px;\n object-fit: contain;\n opacity: 1;\n padding: 0;\n width: 24px;\n `}\n`;\n","import React, { useEffect, useState } from 'react';\nimport { IconClose } from '@/icons';\nimport * as Style from './DiscountSaversBanner.styles';\nimport saversBellIcon from '@/media/subscriptions/retention/saversBellIcon.svg';\nimport { Button } from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { useHistory } from 'react-router';\nimport { billingAnalytics } from '@/analytics';\n\nconst DiscountSaversBanner = ({\n invoice = null,\n}) => {\n const { billing: billingLocale, routes: routesLocale } = useLocale();\n const { offerSaversBanner: offerSaversBannerLocale } = billingLocale;\n const history = useHistory();\n const [visible, setVisible] = useState(true);\n\n const {\n description = '',\n title = [],\n buttonLabel = '',\n } = offerSaversBannerLocale || {};\n\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n\n useEffect(() => {\n subscriptionAnalytics.bannerDiscountDisplay(origin.toUpperCase());\n }, []);\n\n const handleClick = () => {\n let url = routesLocale.invoices;\n\n if (invoice !== null && invoice.id !== undefined) {\n url = `${url}${routesLocale.unpaid}/${invoice.id}?open_invoice=true`;\n }\n\n setVisible(!visible);\n subscriptionAnalytics.bannerSaversClick();\n history.push(url);\n };\n\n const handleClose = () => {\n setVisible(false);\n subscriptionAnalytics.bannerSaversClose();\n };\n\n return (\n visible && (title.length > 0 || buttonLabel || description)\n && (\n \n \n \n \n \n \n {invoice === null && (\n `${title[0]}`\n )}\n {invoice !== null && invoice.id !== null && (\n `${title[0]} ${title[1]} ${invoice.due_date}`\n )}\n \n \n \n \n {description}\n \n\n \n\n \n \n \n\n \n \n \n \n \n )\n );\n};\n\nexport default DiscountSaversBanner;\n","import React from 'react';\nimport { locale } from '@/utils/locale';\n\nexport const billingLocale = {\n domainLabel: locale('billing.domainLabel'),\n};\n\nexport const subscriptionLocale = {\n controlBackButtonLabel: locale('subscriptions.cancel.confirmation.controlBackButtonLabel'),\n controlFowardButtonLabel: locale('subscriptions.cancel.confirmation.controlFowardButtonLabel'),\n controlFowardButtonStepConfirmationCancelSignatureLabel: locale('subscriptions.cancel.confirmation.controlFowardButtonStepConfirmationCancelSignatureLabel'),\n tooltipCancelSignatureText: locale('subscriptions.cancel.confirmation.tooltipCancelSignatureText'),\n confirmationTitleCancelSignatureLabel: locale('subscriptions.cancel.confirmation.confirmationTitleCancelSignatureLabel'),\n attentionLabel: locale('subscriptions.cancel.confirmation.attentionLabel'),\n stopCancelSignatureLabel: locale('subscriptions.cancel.confirmation.stopCancelSignatureLabel'),\n backupFilesLinkLabel: locale('subscriptions.cancel.confirmation.backupFilesLinkLabel'),\n backupFilesLinkUrl: locale('subscriptions.cancel.confirmation.backupFilesLinkUrl'),\n stepSurveyLabel: locale('subscriptions.cancel.feedbackStepper.stepSurveyLabel'),\n stepConfirmationLabel: locale('subscriptions.cancel.feedbackStepper.stepConfirmationLabel'),\n stepRefundLabel: locale('subscriptions.cancel.feedbackStepper.stepRefundLabel'),\n stepReviewLabel: locale('subscriptions.cancel.feedbackStepper.stepReviewLabel'),\n surveyQuestionDescriptionLabel: locale('subscriptions.cancel.survey.surveyQuestionDescriptionLabel'),\n surveyReasonQuestionLabel: locale('subscriptions.cancel.survey.surveyReasonQuestionLabel'),\n withRefund: {\n title: locale('subscriptions.cancel.withRefund.title'),\n totalLabel: locale('subscriptions.cancel.withRefund.totalLabel'),\n refundPolitics: locale('subscriptions.cancel.withRefund.refundPolitics'),\n tipTitle: locale('subscriptions.cancel.withRefund.tipTitle'),\n tipText: date => locale('subscriptions.cancel.withRefund.tipText', { date }),\n giveUp: locale('subscriptions.cancel.withRefund.giveUp'),\n selectMethodTitle: locale('subscriptions.cancel.withRefund.selectMethodTitle'),\n },\n noRefund: {\n amountTitle: locale('subscriptions.cancel.noRefund.amountTitle'),\n withoutRefund: locale('subscriptions.cancel.noRefund.withoutRefund'),\n refundPolitics: locale('subscriptions.cancel.noRefund.refundPolitics'),\n tipTitle: locale('subscriptions.cancel.noRefund.tipTitle'),\n tipText: locale('subscriptions.cancel.noRefund.tipText'),\n stopCancelLabel: locale('subscriptions.cancel.noRefund.stopCancelLabel'),\n },\n review: {\n title: locale('subscriptions.cancel.review.title'),\n totalLabel: locale('subscriptions.cancel.review.totalLabel'),\n signatureTitle: locale('subscriptions.cancel.review.signatureTitle'),\n reasonTitle: locale('subscriptions.cancel.review.reasonTitle'),\n refundTitle: locale('subscriptions.cancel.review.refundTitle'),\n },\n refundMethodOptions: {\n hg_credits: {\n name: locale('subscriptions.cancel.refundMethodOptions.hg_credits.name'),\n description: locale('subscriptions.cancel.refundMethodOptions.hg_credits.description'),\n info: locale('subscriptions.cancel.refundMethodOptions.hg_credits.info'),\n },\n braspag_credit_1x: {\n name: locale('subscriptions.cancel.refundMethodOptions.braspag_credit_1x.name'),\n description: locale('subscriptions.cancel.refundMethodOptions.braspag_credit_1x.description'),\n info: locale('subscriptions.cancel.refundMethodOptions.braspag_credit_1x.info'),\n },\n dlocal: {\n name: locale('subscriptions.cancel.refundMethodOptions.dlocal.name'),\n description: locale('subscriptions.cancel.refundMethodOptions.dlocal.description'),\n info: locale('subscriptions.cancel.refundMethodOptions.dlocal.info'),\n },\n gp_boleto: {\n name: locale('subscriptions.cancel.refundMethodOptions.gp_boleto.name'),\n description: locale('subscriptions.cancel.refundMethodOptions.gp_boleto.description'),\n info: locale('subscriptions.cancel.refundMethodOptions.gp_boleto.info'),\n },\n gp_paypal: {\n name: locale('subscriptions.cancel.refundMethodOptions.gp_paypal.name'),\n description: locale('subscriptions.cancel.refundMethodOptions.gp_paypal.description'),\n info: locale('subscriptions.cancel.refundMethodOptions.gp_paypal.info'),\n },\n },\n processing: locale('subscriptions.cancel.processing'),\n};\n\nexport const refundModalLocaleV2 = {\n title: locale('subscriptions.cancel.refundModalV2.title'),\n refundPolicyButtonLabel: locale('subscriptions.cancel.refundModalV2.refundPolicyButtonLabel'),\n serviceTermsButtonLabel: locale('subscriptions.cancel.refundModalV2.serviceTermsButtonLabel'),\n serviceTermsUrl: locale('subscriptions.cancel.refundModalV2.serviceTermsUrl'),\n accordionCancelledBeforeContent: {\n title: locale('subscriptions.cancel.refundModalV2.accordionCancelledBefore.title'),\n titleHighlight: locale('subscriptions.cancel.refundModalV2.accordionCancelledBefore.titleHighlight'),\n refundableSubscriptions: {\n title: locale('subscriptions.cancel.refundModalV2.accordionCancelledBefore.refundableSubscriptions.title'),\n label: locale('subscriptions.cancel.refundModalV2.accordionCancelledBefore.refundableSubscriptions.label'),\n text: locale('subscriptions.cancel.refundModalV2.accordionCancelledBefore.refundableSubscriptions.text'),\n },\n nonRefundableSubscriptions: {\n label: locale('subscriptions.cancel.refundModalV2.accordionCancelledBefore.nonRefundableSubscriptions.label'),\n text: locale('subscriptions.cancel.refundModalV2.accordionCancelledBefore.nonRefundableSubscriptions.text'),\n },\n refundableCicles: {\n label: locale('subscriptions.cancel.refundModalV2.accordionCancelledBefore.refundableCicles.label'),\n text: locale('subscriptions.cancel.refundModalV2.accordionCancelledBefore.refundableCicles.text'),\n },\n refundableWays: {\n label: locale('subscriptions.cancel.refundModalV2.accordionCancelledBefore.refundableWays.label'),\n text: locale('subscriptions.cancel.refundModalV2.accordionCancelledBefore.refundableWays.text'),\n },\n exception: {\n label: locale('subscriptions.cancel.refundModalV2.accordionCancelledBefore.exception.label'),\n text: locale('subscriptions.cancel.refundModalV2.accordionCancelledBefore.exception.text'),\n },\n footerNote: locale('subscriptions.cancel.refundModalV2.accordionCancelledBefore.footerNote'),\n },\n accordionCancelledAfterContent: {\n title: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.title'),\n titleHighlight: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.titleHighlight'),\n refundableSubscriptions: {\n title: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.refundableSubscriptions.title'),\n label: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.refundableSubscriptions.label'),\n text: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.refundableSubscriptions.text'),\n },\n nonRefundableSubscriptions: {\n label: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.nonRefundableSubscriptions.label'),\n text: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.nonRefundableSubscriptions.text'),\n },\n nonRefundableCicles: {\n label: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.nonRefundableCicles.label'),\n text: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.nonRefundableCicles.text'),\n },\n refundableWays: {\n label: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.refundableWays.label'),\n text: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.refundableWays.text'),\n },\n exception: {\n label: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.exception.label'),\n text: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.exception.text'),\n },\n cancelAfterContract: {\n title: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.cancelAfterContract.title'),\n label: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.cancelAfterContract.label'),\n text: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.cancelAfterContract.text'),\n },\n nonRefundContract: {\n label: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.nonRefundContract.label'),\n text: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.nonRefundContract.text'),\n },\n nonRefundCycles: {\n label: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.nonRefundCycles.label'),\n text: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.nonRefundCycles.text'),\n },\n refundCalculation: {\n label: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.refundCalculation.label'),\n text: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.refundCalculation.text'),\n },\n refundWays: {\n label: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.refundWays.label'),\n text: locale('subscriptions.cancel.refundModalV2.accordionCancelledAfter.refundWays.text'),\n },\n },\n};\n\nexport const refundModalLocale = {\n title: locale('subscriptions.cancel.refundModal.title'),\n refundPolicyButtonLabel: locale('subscriptions.cancel.refundModal.refundPolicyButtonLabel'),\n serviceTermsButtonLabel: locale('subscriptions.cancel.refundModal.serviceTermsButtonLabel'),\n serviceTermsUrl: locale('subscriptions.cancel.refundModal.serviceTermsUrl'),\n accordionCancelledBeforeContent: {\n title: locale('subscriptions.cancel.refundModal.accordionCancelledBefore.title'),\n titleHighlight: locale('subscriptions.cancel.refundModal.accordionCancelledBefore.titleHighlight'),\n refundableSubscriptions: {\n label: locale('subscriptions.cancel.refundModal.accordionCancelledBefore.refundableSubscriptions.label'),\n text: locale('subscriptions.cancel.refundModal.accordionCancelledBefore.refundableSubscriptions.text'),\n },\n nonRefundableSubscriptions: {\n label: locale('subscriptions.cancel.refundModal.accordionCancelledBefore.nonRefundableSubscriptions.label'),\n text: locale('subscriptions.cancel.refundModal.accordionCancelledBefore.nonRefundableSubscriptions.text'),\n },\n refundableCicles: {\n label: locale('subscriptions.cancel.refundModal.accordionCancelledBefore.refundableCicles.label'),\n text: locale('subscriptions.cancel.refundModal.accordionCancelledBefore.refundableCicles.text'),\n },\n refundableWays: {\n label: locale('subscriptions.cancel.refundModal.accordionCancelledBefore.refundableWays.label'),\n text: locale('subscriptions.cancel.refundModal.accordionCancelledBefore.refundableWays.text'),\n },\n exception: {\n label: locale('subscriptions.cancel.refundModal.accordionCancelledBefore.exception.label'),\n text: locale('subscriptions.cancel.refundModal.accordionCancelledBefore.exception.text'),\n },\n footerNote: locale('subscriptions.cancel.refundModal.accordionCancelledBefore.footerNote'),\n },\n accordionCancelledAfterContent: {\n title: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.title'),\n titleHighlight: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.titleHighlight'),\n refundableSubscriptions: {\n label: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.refundableSubscriptions.label'),\n text: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.refundableSubscriptions.text'),\n },\n nonRefundableSubscriptions: {\n label: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.nonRefundableSubscriptions.label'),\n text: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.nonRefundableSubscriptions.text'),\n },\n refundableCicles: {\n label: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.refundableCicles.label'),\n text: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.refundableCicles.text'),\n },\n nonRefundableCicles: {\n label: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.nonRefundableCicles.label'),\n text: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.nonRefundableCicles.text'),\n },\n refundableCalculation: {\n label: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.refundableCalculation.label'),\n text: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.refundableCalculation.text'),\n },\n exampleCalculation: {\n label: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.exampleCalculation.label'),\n text: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.exampleCalculation.text'),\n },\n amountOwed: {\n label: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.amountOwed.label'),\n annualContractAmount: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.amountOwed.annualContractAmount'),\n annualContractLabel: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.amountOwed.annualContractLabel'),\n usedAmount: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.amountOwed.usedAmount'),\n usedLabel: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.amountOwed.usedLabel'),\n },\n amountAvailableRefund: {\n label: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.amountAvailableRefund.label'),\n totalAmount: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.amountAvailableRefund.totalAmount'),\n totalLabel: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.amountAvailableRefund.totalLabel'),\n terminationFinePercents: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.amountAvailableRefund.terminationFinePercents'),\n terminationFineLabel: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.amountAvailableRefund.terminationFineLabel'),\n },\n refundableWays: {\n label: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.refundableWays.label'),\n text: locale('subscriptions.cancel.refundModal.accordionCancelledAfter.refundableWays.text'),\n },\n },\n};\n\nexport const signatureConfirmationLocale = {\n attentionCancelSignature: (\n \n {locale('subscriptions.cancel.confirmation.attentionCancelSignatureTexts.0')}\n {locale('subscriptions.cancel.confirmation.attentionCancelSignatureTexts.1')} \n {locale('subscriptions.cancel.confirmation.attentionCancelSignatureTexts.2')}\n {locale('subscriptions.cancel.confirmation.attentionCancelSignatureTexts.3')} \n
\n ),\n addonCancellationAlert: addon => (\n \n {locale('subscriptions.cancel.confirmation.addonCancellationAlert.0')}\n {' '}\n {addon} \n {' '}\n {locale('subscriptions.cancel.confirmation.addonCancellationAlert.1')}\n {' '}\n \n {locale('subscriptions.cancel.confirmation.addonCancellationAlert.2')}\n \n
\n ),\n attentionCancelSignatureAddon: (\n \n {locale('subscriptions.cancel.confirmation.attentionCancelSignatureTexts.0')}\n \n {locale('subscriptions.cancel.confirmation.attentionCancelSignatureTexts.1')}\n .\n \n
\n ),\n};\n","import React from 'react';\nimport { billingActions } from '@/redux/modules';\nimport { debounce } from '@/utils/debounce';\nimport { locale } from '@/utils/locale';\nimport { CANCEL_SUBSCRIPTION_STEPS, REFUND_PAYMENT_METHODS } from '@/enums/billing/billing.enum';\nimport { SubscriptionsQuestionTypes } from '@/redux/modules/billing/billing.types';\nimport HostGator from '@/media/subscriptions/refund/HostGator.svg';\nimport { IconCreditCard, IconPix, IconPayPal } from '@/icons';\nimport { refundModalLocale, subscriptionLocale } from './CancelSubscriptionHandler.locale';\nimport { billingAnalytics } from '@/analytics';\nimport { isBRServer, isMXServer } from '@/utils/Validators/validation';\n\nconst createFunctions = ({\n dispatch,\n history,\n questions,\n setExpandRefundModalAccordion,\n setOpenRefundModal,\n setStep,\n step,\n subscriptionId,\n subscriptionType,\n openPreChatCancelFlow,\n}) => {\n const isXrayRefundPaymentCreditCardEnabled = true;\n const isXrayRefundPaymentPaypalEnabled = isBRServer || isMXServer;\n const isXrayRefundPaymentPixEnabled = false;\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n\n const steps = [\n {\n id: CANCEL_SUBSCRIPTION_STEPS.SURVEY,\n label: subscriptionLocale.stepSurveyLabel,\n },\n {\n id: CANCEL_SUBSCRIPTION_STEPS.REFUND,\n label: subscriptionLocale.stepRefundLabel,\n },\n {\n id: CANCEL_SUBSCRIPTION_STEPS.REVIEW,\n label: subscriptionLocale.stepReviewLabel,\n },\n {\n id: CANCEL_SUBSCRIPTION_STEPS.CONFIRMATION,\n label: subscriptionLocale.stepConfirmationLabel,\n },\n ];\n\n const getPaymentOptions = () => ({\n [REFUND_PAYMENT_METHODS.HG_CREDITS]: {\n show: true,\n image: \n {!isMobile && (\n \n \n )}\n \n {loading && \n \n \n \n {retentionOffer.title[type]} \n {retentionOffer.greenDescription[type]} \n {retentionOffer.description[type]} \n
\n \n \n \n \n \n {retentionOffer.note[type]} \n \n )}\n \n \n \n \n \n );\n};\n\nexport default DisableAutoRenewHandler;\n","import React, { } from 'react';\nimport { withI18n } from 'react-i18next';\nimport { useSelector } from 'react-redux';\nimport { OFFER_RETENTION_CANCEL_TYPES, RETENTION_TYPES } from './RetentionsOfferEnum';\nimport { DisableAutoRenewHandler } from '@/components/billing/subscriptions/DisableAutoRenewHandler';\n\nconst RetentionOfferPage = ({ handleDeclineRenewDiscount }) => {\n const offerRetentionCancel = useSelector(state => state.billing.subscriptions.offerRetentionCancel);\n\n return (\n <>\n \n \n \n \n \n {step === CANCEL_SUBSCRIPTION_STEPS.NEXT_RENEW_OFFER && (\n \n \n )\n }\n {\n step === CANCEL_SUBSCRIPTION_STEPS.REFUND && (\n \n {(subscription.refund && subscription.refund.total > 0)\n ? (\n \n )\n }\n {\n step === CANCEL_SUBSCRIPTION_STEPS.REVIEW && (\n \n \n )\n }\n\n {\n step === CANCEL_SUBSCRIPTION_STEPS.CONFIRMATION && (\n \n onClickBackupLink}\n stopCancelLabel={subscriptionLocale.stopCancelSignatureLabel}\n title={subscriptionLocale.confirmationTitleCancelSignatureLabel}\n topics={[\n canShowBackupLink()\n ? signatureConfirmationLocale.attentionCancelSignature : signatureConfirmationLocale.attentionCancelSignatureAddon,\n ...getCancelledAddonsTopics(),\n ]}\n />\n \n )\n }\n {\n step === CANCEL_SUBSCRIPTION_STEPS.DONE && (\n \n \n )\n }\n \n\n {step !== CANCEL_SUBSCRIPTION_STEPS.NEXT_RENEW_OFFER && (\n \n {\n step !== CANCEL_SUBSCRIPTION_STEPS.DONE && (\n <>\n \n \n \n \n \n \n )\n }\n \n )}\n \n \n );\n};\n\nexport default CancelSubscriptionHandler;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n ${({ theme }) => css`\n padding: 0 40px 40px 40px;\n overflow-x: hidden;\n\n @media (max-width: ${theme.breakpoints.md}) {\n padding: 0 0 40px 0;\n }\n `}\n`;\n\nexport const Header = styled.div`\n ${({ theme }) => css`\n @media (max-width: ${theme.breakpoints.md}) {\n margin-top: 8px;\n }\n `}\n`;\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n background: ${theme.palette.white.light};\n box-shadow: 0px 1px 3px ${theme.shadows.grey.light};\n margin-top: 8px;\n\n @media (max-width: ${theme.breakpoints.md}) {\n padding: 0 32px;\n }\n `}\n`;\n\nexport const StepContent = styled.div`\n ${({ theme }) => css`\n border-top: 1px solid ${theme.palette.grey.lightbluish};\n `}\n`;\n\nexport const StepSurveyContainer = styled.div``;\n\nexport const StepConfirmationContainer = styled.div``;\n\nexport const StepDoneContainer = styled.div``;\n\nexport const Controls = styled.div`\n ${({ theme, disabled }) => css`\n background: ${theme.palette.white.light};\n border-top: 1px solid ${disabled ? 'transparent' : theme.palette.grey.lightbluish};\n display: flex;\n justify-content: space-between;\n margin-top: 1px;\n padding: 24px;\n\n @media (max-width: ${theme.breakpoints.md}) {\n align-items: center;\n flex-direction: column-reverse;\n }\n `}\n`;\n\nexport const ControlLeft = styled.div`\n ${({ theme }) => css`\n @media (max-width: ${theme.breakpoints.md}) {\n margin-top: 16px;\n }\n `}\n`;\n\nexport const ControlRight = styled.div``;\n","import { billingActions, commonActions } from '@/redux/modules';\nimport { SubscriptionsQuestionTypes } from '@/redux/modules/billing/billing.types';\nimport { locale } from '@/utils/locale';\nimport { debounce } from '@/utils/debounce';\n\nconst createSubscriptionCancelRenewalHandler = ({\n history,\n questions,\n step,\n setStep,\n subscriptionAnalytics,\n subscriptions,\n subscriptionId,\n subscriptionType,\n stepsStatus,\n questionId,\n optionId,\n setSubscription,\n dispatch,\n openPreChatCancelFlow,\n}) => {\n const handleOnOptionSelected = (payload) => {\n dispatch(billingActions.subscriptions.cancel.set(payload));\n };\n\n const resetCancelRenewalSurvey = () => {\n dispatch(billingActions.subscriptions.cancel.set({\n questionId: null,\n optionId: null,\n questionValue: '',\n reason: '',\n }));\n };\n\n const resetOptionsByQuestionName = (type) => {\n const question = questions[type][0];\n question.options = question.options.map(option => ({\n ...option,\n ...(!option.selected && { selected: true }),\n }));\n\n dispatch(billingActions.subscriptions.questions.set(question, type));\n };\n\n const onFowardStepClick = () => {\n const redirect = () => {\n history.push(`${locale('routes.subscriptions')}${locale('routes.manageSubscription')}/${subscriptionId}/${subscriptionType}`);\n };\n\n const steps = {\n [stepsStatus.SURVEY]: () => {\n subscriptionAnalytics.cancelSubscriptionClick('3_continuar_pesquisa_respondida_cancelar_renovacao');\n setStep(stepsStatus.CONFIRMATION);\n },\n [stepsStatus.CONFIRMATION]: () => {\n subscriptionAnalytics.cancelSubscriptionClick('4_cta_cancelar_renovacao');\n\n subscriptionAnalytics.cancelRenewalConfirmationClick();\n setStep(stepsStatus.DONE);\n const subscription = subscriptions.find(item => item.id === Number(subscriptionId));\n dispatch(billingActions.subscriptions.cancelRenewal.request(\n subscription,\n subscriptionId,\n subscriptionType,\n redirect,\n ));\n\n resetOptionsByQuestionName(SubscriptionsQuestionTypes.CANCEL_RENEWAL);\n },\n };\n\n steps[step]();\n };\n\n const onPreviousStepClick = () => {\n const steps = {\n [stepsStatus.CONFIRMATION]: () => {\n subscriptionAnalytics.cancelSubscriptionClick('4_voltar_para_pesquisa_cancelar_renovacao');\n setStep(stepsStatus.SURVEY);\n },\n [stepsStatus.SURVEY]: () => {\n subscriptionAnalytics.cancelSubscriptionClick('3_voltar_pesquisa_respondida_cancelar_renovacao');\n resetCancelRenewalSurvey();\n resetOptionsByQuestionName(SubscriptionsQuestionTypes.CANCEL_RENEWAL);\n openPreChatCancelFlow();\n history.push(locale('routes.subscriptions'));\n },\n };\n\n steps[step]();\n };\n\n const handleOnStopCancel = () => {\n subscriptionAnalytics.cancelSubscriptionClick('4_desisir_cancelar_renovacao');\n resetCancelRenewalSurvey();\n resetOptionsByQuestionName(SubscriptionsQuestionTypes.CANCEL_RENEWAL);\n openPreChatCancelFlow();\n history.push(locale('routes.subscriptions'));\n };\n\n const isSurveyStepComplete = () => (!questionId || !optionId);\n\n const settingSubscriptions = () => {\n setSubscription(subscriptions.find(subscription => subscription.id === Number(subscriptionId)\n && subscription.type === subscriptionType));\n };\n\n const requestQuestions = () => {\n dispatch(billingActions.subscriptions.questions.request(\n SubscriptionsQuestionTypes.CANCEL_RENEWAL,\n ));\n };\n\n const findSubscription = () => {\n const subItem = subscriptions.find(({ id }) => id === subscriptionId);\n subItem && setSubscription(subItem);\n };\n\n const requestSubscription = () => {\n dispatch(billingActions.subscription.request({ subscriptionId, subscriptionType }));\n };\n\n const reset = () => {\n resetCancelRenewalSurvey();\n\n if (questions[SubscriptionsQuestionTypes.CANCEL_RENEWAL]) {\n resetOptionsByQuestionName(SubscriptionsQuestionTypes.CANCEL_RENEWAL);\n }\n };\n\n const redirect = () => {\n setTimeout(() => {\n history.push(redirect.url);\n dispatch(commonActions.redirect.clear());\n }, 3000);\n };\n\n const handleOnReasonChange = debounce((payload) => {\n dispatch(billingActions.subscriptions.cancel.set(payload));\n });\n\n return {\n onPreviousStepClick,\n onFowardStepClick,\n handleOnStopCancel,\n handleOnOptionSelected,\n resetCancelRenewalSurvey,\n resetOptionsByQuestionName,\n isSurveyStepComplete,\n settingSubscriptions,\n requestQuestions,\n findSubscription,\n requestSubscription,\n reset,\n redirect,\n handleOnReasonChange,\n };\n};\n\nexport default createSubscriptionCancelRenewalHandler;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useParams, useHistory } from 'react-router-dom';\nimport {\n Button, FeedbackStepper, Header, Tooltip, Survey,\n} from '@/pages/common';\nimport { Confirmation, OrderProcessing } from '@/components/billing';\nimport Loader from '@/components/Layout/Loader';\nimport { IconArrowWardsLeft } from '@/icons';\nimport { SubscriptionsQuestionTypes } from '@/redux/modules/billing/billing.types';\nimport { billingActions, preChatActions } from '@/redux/modules';\nimport { formatDate } from '@/utils/Formatters/formatDate';\nimport useLocale from '@/hooks/useLocale';\nimport { billingAnalytics } from '@/analytics';\nimport * as Styles from './CancelSubscriptionRenewalHandler.styles';\nimport createSubscriptionCancelRenewalHandler from './CancelSubscriptionRenewalHandler.functions';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { XRAY_ENABLED_RETENTION_OFFER } from '@/config/GrowthBook/constants';\nimport { RetentionOfferPage } from '@/pages/billing/subscriptions/RetentionOfferPage';\n\nconst CancelSubscriptionRenewalHandler = () => {\n const dispatch = useDispatch();\n const history = useHistory();\n\n const { billing: billingLocale, routes: routesLocale } = useLocale();\n const { subscriptions: subscriptionsLocale } = billingLocale;\n const { cancel: cancelLocale } = subscriptionsLocale;\n const {\n confirmation: confirmationLocale,\n feedbackStepper: feedbackStepperLocale,\n survey: surveyLocale,\n } = cancelLocale;\n\n const { subscriptionId, subscriptionType } = useParams();\n\n const loading = useSelector(state => state.common.loading);\n const redirect = useSelector(state => state.common.redirect);\n const subscriptions = useSelector(state => state.billing.subscriptions.items);\n const questions = useSelector(state => state.billing.subscriptions.questions);\n const cancel = useSelector(state => state.billing.subscriptions.cancel);\n const { triage } = useSelector(state => state.preChat);\n const [subscription, setSubscription] = useState(undefined);\n const enabledRetentionOffer = useFeatureIsOn(XRAY_ENABLED_RETENTION_OFFER);\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n\n const openPreChatCancelFlow = useCallback(() => {\n if (triage.subscriptionToCancel) {\n dispatch(preChatActions.preChat.setShowPreChat(true));\n dispatch(preChatActions.subscription.setSubscriptionToCancel(null));\n }\n }, [triage, dispatch]);\n\n const canShowBackupLink = () => {\n if (subscription && subscription.showFilesExclusionText !== undefined) {\n return subscription.showFilesExclusionText;\n }\n return subscriptionType !== 'addon' && subscriptionType !== 'domain';\n };\n\n const {\n questionId, optionId, reason, modal,\n } = cancel;\n\n // Steps Enum\n const stepsStatus = {\n SURVEY: 1,\n CONFIRMATION: 2,\n DONE: 3,\n NEXT_RENEW_OFFER: 99,\n };\n\n const steps = [\n {\n id: stepsStatus.SURVEY,\n label: feedbackStepperLocale.stepSurveyLabel,\n },\n {\n id: stepsStatus.CONFIRMATION,\n label: feedbackStepperLocale.stepConfirmationLabel,\n },\n ];\n\n const [step, setStep] = useState(stepsStatus.SURVEY);\n\n const verifyParamsInUrl = useCallback(() => {\n if (enabledRetentionOffer) {\n const containsStep = window.location.href.includes('step=');\n const step = window.location.href.includes('step=2') ? 2 : 1;\n const shouldOpenInvoice = containsStep && step === 2;\n\n if (shouldOpenInvoice) {\n setStep(stepsStatus.CONFIRMATION);\n }\n }\n }, [setStep, enabledRetentionOffer, stepsStatus.CONFIRMATION]);\n\n useEffect(() => {\n verifyParamsInUrl();\n }, [verifyParamsInUrl]);\n\n const subscriptionCancelRenewalFunctions = createSubscriptionCancelRenewalHandler({\n history,\n questions,\n step,\n setStep,\n subscriptionAnalytics,\n subscriptions,\n subscriptionId: Number(subscriptionId),\n subscriptionType,\n stepsStatus,\n questionId,\n optionId,\n setSubscription,\n dispatch,\n openPreChatCancelFlow,\n });\n\n const getConfirmationProps = () => {\n const defaultProps = {\n attentionLabel: confirmationLocale.attentionLabel,\n backupFilesLinkLabel: confirmationLocale.backupFilesLinkLabel,\n backupFilesLinkUrl: confirmationLocale.backupFilesLinkUrl,\n stopCancelLabel: confirmationLocale.stopCancelRenewalLabel,\n title: confirmationLocale.confirmationTitleCancelRenewalLabel,\n showBackfilesLink: canShowBackupLink(),\n\n };\n const onClickBackupLink = () => {\n subscriptionAnalytics.cancelSubscriptionClick('4_link_veja_como_fazer_backup_cancelar_renovacao');\n };\n\n const onShowPageAction = () => {\n subscriptionAnalytics.cancelSubscriptionPageView('4_confirmar_cancelamento_renovacao');\n };\n\n if (!subscription && !subscription.dueDate) {\n return defaultProps;\n }\n\n const {\n type,\n cancelDate,\n dueDate,\n } = subscription;\n\n const getCancelledAddonsTopics = () => {\n if (subscription && subscription.addons) {\n return subscription.addons.map(addon => confirmationLocale.addonCancellation(addon, formatDate(dueDate)));\n }\n\n return [];\n };\n\n const getTopics = () => {\n if (type === 'domain') {\n return confirmationLocale.domainAttentionCancelRenewalTexts(formatDate(cancelDate));\n }\n if (type === 'addon' || !canShowBackupLink()) {\n return confirmationLocale.addonAttentionCancelRenewalTexts(formatDate(dueDate));\n }\n return confirmationLocale.attentionCancelRenewalTexts(formatDate(dueDate));\n };\n\n return {\n ...defaultProps,\n onStopCancel: () => subscriptionCancelRenewalFunctions.handleOnStopCancel(),\n topics: [getTopics(), ...getCancelledAddonsTopics()],\n showBackfilesLink: canShowBackupLink(),\n onClickBackupLink: () => { onClickBackupLink(); },\n onShowPageAction: () => { onShowPageAction(); },\n\n };\n };\n\n useEffect(() => {\n subscriptionAnalytics.cancelSubscriptionPageView('3_pesquisa_respondida_cancelar_renovacao');\n subscriptionAnalytics.cancelRenewalPageView();\n }, [subscriptionAnalytics]);\n\n useEffect(() => {\n if (redirect) {\n subscriptionCancelRenewalFunctions.redirect(redirect.url);\n }\n }, [redirect, subscriptionCancelRenewalFunctions]);\n\n useEffect(() => {\n !enabledRetentionOffer && subscriptionCancelRenewalFunctions.resetCancelRenewalSurvey();\n if (questions[SubscriptionsQuestionTypes.CANCEL_RENEWAL]) {\n subscriptionCancelRenewalFunctions.resetOptionsByQuestionName(SubscriptionsQuestionTypes.CANCEL_RENEWAL);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (!subscriptions.length) {\n dispatch(billingActions.subscriptions.request());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (subscriptions.length) {\n subscriptionCancelRenewalFunctions.findSubscription();\n }\n }, [subscriptions, subscriptionId, subscriptionCancelRenewalFunctions]);\n\n useEffect(() => {\n if (!questions[SubscriptionsQuestionTypes.CANCEL_RENEWAL]) {\n subscriptionCancelRenewalFunctions.requestQuestions();\n }\n }, [questions, subscriptionCancelRenewalFunctions]);\n\n useEffect(() => {\n if (subscriptions.length && !subscription) {\n subscriptionCancelRenewalFunctions.settingSubscriptions();\n }\n }, [subscriptions, subscription, subscriptionCancelRenewalFunctions]);\n\n useEffect(() => {\n modal && history.push(routesLocale.subscriptions);\n }, [history, modal, routesLocale.subscriptions]);\n\n\n const handleDeclineRenewDiscount = useCallback(() => {\n setStep(stepsStatus.CONFIRMATION);\n }, [stepsStatus.CONFIRMATION]);\n\n if (loading || !subscription || !questions[SubscriptionsQuestionTypes.CANCEL_RENEWAL]) {\n return \n \n \n \n \n {step === stepsStatus.NEXT_RENEW_OFFER && (\n \n subscriptionCancelRenewalFunctions.handleOnOptionSelected(e)}\n onReasonChange={e => subscriptionCancelRenewalFunctions.handleOnReasonChange(e)}\n questionDescriptionLabel={surveyLocale.surveyQuestionDescriptionLabel}\n reasonQuestionLabel={surveyLocale.surveyReasonQuestionLabel}\n />\n \n )\n }\n {\n step === stepsStatus.CONFIRMATION && (\n \n \n )\n }\n {\n step === stepsStatus.DONE && (\n \n \n )\n }\n \n\n {step !== stepsStatus.NEXT_RENEW_OFFER && (\n \n {\n step !== stepsStatus.DONE && (\n <>\n \n \n \n \n \n \n )\n }\n \n )}\n \n \n );\n};\n\nexport default CancelSubscriptionRenewalHandler;\n","import styled, { css } from 'styled-components';\n\nconst ContentPadding = '24px';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n padding-bottom: 47px;\n\n @media (min-width: ${theme.v2.breakpoints.sm}) {\n padding: 0 40px;\n padding-bottom: 80px;\n }\n `}\n`;\n\n\nexport const ContentWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n box-shadow: ${theme.v2.shadows.dark};\n margin-top: 8px;\n min-height: 400px;\n padding: ${ContentPadding};\n `}\n`;\n\nexport const RetentionTitle = styled.strong`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: 32px;\n text-align: center;\n width: 100%;\n\n &::after {\n content: '';\n\n display: block;\n height: 1px;\n width: 100%;\n margin-top: 30px;\n background-color: ${theme.v2.colors.feedback.canceledPure};\n\n @media (min-width: ${theme.v2.breakpoints.sm}) {\n margin-top: 10px;\n }\n }\n `}\n`;\n\nexport const RetentionMailText = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n line-height: 32px;\n margin-top: 32px;\n text-align: center;\n width: 100%;\n p {\n margin: 0;\n }\n\n strong {\n color: ${theme.v2.colors.neutral.lowDark};\n font-weight: ${theme.v2.font.weights.bold};\n }\n `}\n`;\n\nexport const BenefitsContent = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n gap: 10px;\n\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n line-height: 22px;\n margin-top: 48px;\n width: 100%;\n\n p {\n margin: 0;\n margin-bottom: 16px;\n }\n\n p:first-of-type {\n margin-bottom: 22px;\n }\n\n p:last-of-type {\n margin-bottom: 0;\n }\n\n @media (min-width: ${theme.v2.breakpoints.sm}) {\n flex-direction: row;\n gap: 30px;\n margin-top: 18px;\n }\n `}\n`;\n\nexport const BenefitTitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n `}\n`;\n\nexport const BenefitTopic = styled.p`\n ${({ theme }) => css`\n display: flex;\n align-items: center;\n gap: 12px;\n margin-top: 16px;\n\n strong {\n color: ${theme.v2.colors.brand.primaryMedium};\n }\n `}\n`;\n\nexport const SnappyImg = styled.img`\n ${({ theme }) => css`\n max-width: 209px;\n margin-bottom: 10px;\n padding-right: 12px;\n @media (min-width: ${theme.v2.breakpoints.sm}) {\n max-width: 100%;\n margin-bottom: 0;\n padding-right: 0;\n }\n `}\n`;\n\nexport const CenterButtonContent = styled.div`\n display: flex;\n justify-content: center;\n`;\n\nexport const ConfirmationContent = styled.div`\n margin-top: 24px;\n`;\n\nexport const FooterContent = styled.div`\n ${({ theme }) => css`\n display: flex;\n justify-content: center;\n\n border-top: 1px solid ${theme.v2.colors.feedback.canceledPure};\n margin: 28px -${ContentPadding} -${ContentPadding} -${ContentPadding};\n padding: 24px 28px;\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 26px;\n padding: 24px;\n background-color: ${theme.palette.error.ultralight};\n color: ${theme.v1.color.text.primary};\n border-radius: 6px;\n `}\n`;\n\nexport const AttentionLabel = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: center;\n gap: 12px;\n\n svg {\n fill: ${theme.v1.color.warning.error};\n }\n `}\n`;\n","import { IconWarning } from '@/icons';\nimport React from 'react';\nimport * as Styles from './SimpleConfirmation.styles';\n\nconst SimpleConfirmation = ({\n attentionLabel = 'Attention',\n text = (\n \n In case of cancellation of the plan\n {' '}\n you will no longer have access to your free emails. \n \n ),\n testId = 'simpleConfirmation',\n}) => (\n \n \n {attentionLabel} \n \n \n {text}\n
\n \n);\n\nexport default SimpleConfirmation;\n","import styled, { css } from 'styled-components';\n\nexport const LoaderWrapper = styled.div`\n ${({ noMinHeight }) => css`\n justify-self: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-height: ${noMinHeight ? 0 : '337px'};\n gap: 16px;\n align-items:center;\n `}\n`;\n\nexport const Loader = styled.div`\n ${({ theme }) => css`\n display: block;\n height: 40px;\n width: 40px;\n -webkit-animation: loader-2-1 3s linear infinite;\n animation: loader-2-1 3s linear infinite;\n\n @-webkit-keyframes loader-2-1 {\n 0% { -webkit-transform: rotate(0deg); }\n 100% { -webkit-transform: rotate(360deg); }\n }\n @keyframes loader-2-1 {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n & span {\n display: block;\n position: absolute;\n top: 0; left: 0;\n bottom: 0; right: 0;\n margin: auto;\n height: 40px;\n width: 40px;\n clip: rect(16px, 40px, 40px, 0);\n -webkit-animation: loader-2-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;\n animation: loader-2-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;\n }\n\n @-webkit-keyframes loader-2-2 {\n 0% { -webkit-transform: rotate(0deg); }\n 100% { -webkit-transform: rotate(360deg); }\n }\n @keyframes loader-2-2 {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n & span::before {\n content: \"\";\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: block;\n position: absolute;\n top: 0; left: 0;\n bottom: 0; right: 0;\n margin: auto;\n height: 40px;\n width: 40px;\n border: 3px solid transparent;\n border-top: 3px solid ${theme.palette.danger.primary};\n border-radius: 50%;\n -webkit-animation: loader-2-3 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;\n animation: loader-2-3 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;\n }\n\n @-webkit-keyframes loader-2-3 {\n 0% { -webkit-transform: rotate(0deg); }\n 100% { -webkit-transform: rotate(360deg); }\n }\n\n @keyframes loader-2-3 {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n & span::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \"\";\n display: block;\n position: absolute;\n top: 0; left: 0;\n bottom: 0; right: 0;\n margin: auto;\n height: 40px;\n width: 40px;\n border: 3px solid ${theme.palette.danger.primary};\n border-radius: 50%;\n opacity: 0.5;\n }\n`}\n`;\n\nexport const Message = styled.p`\n ${({ theme }) => css`\n margin: 16px 0px 0px 0px !important;\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.md};\n line-height: ${theme.font.lineHeights.xl};\n font-weight: ${theme.font.weights.medium};\n `}\n`;\n","import React from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport * as Styles from './Loader.styles';\n\nfunction Loader({\n testId = 'loader',\n message,\n modal = false,\n noMinHeight = false,\n}) {\n const loader = (\n \n \n \n {message && (\n \n {message}\n \n )}\n \n );\n\n return (modal\n ? (\n \n {loader}\n \n ) : (loader)\n );\n}\n\nexport default Loader;\n","import PropTypes from 'prop-types';\n\nexport const SubscriptionActiveRenewalModalProps = {\n cancelRenewalDescriptionLabel: PropTypes.string,\n cancelRenewalLabel: PropTypes.string,\n cancelImmediateDescriptionLabel: PropTypes.string,\n cancelImmediateLabel: PropTypes.string,\n continueButtonLabel: PropTypes.string,\n descriptionLabel: PropTypes.string,\n onCloseClick: PropTypes.func,\n onContinueButtonClick: PropTypes.func,\n onQuitButtonClick: PropTypes.func,\n quitButtonLabel: PropTypes.string,\n titleLabel: PropTypes.string,\n};\n\nexport const CancelOptions = {\n CANCEL_RENEWAL: 'CANCEL_RENEWAL',\n CANCEL_IMMEDIATE: 'CANCEL_IMMEDIATE',\n};\n","import React, { useContext } from 'react';\nimport * as Styles from './RetentionSubscriptionHandler.styles';\nimport { useHistory } from 'react-router';\nimport { Button, Header } from '@/pages/common';\nimport useLocale from '@/hooks/useLocale';\nimport SnappyRetention from '@/media/subscriptions/retention/snappyRetention.svg';\nimport { ThemeContext } from 'styled-components';\nimport { IconCheck } from '@/icons';\nimport { SimpleConfirmation } from '../../components/SimpleConfirmation';\nimport { billingAnalytics } from '@/analytics';\nimport { Loader } from '@/pages/common/v1/Loader';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport {\n XRAY_ENABLED_DISCOUNT_RETENTION_CANCEL_IMMEDIATE,\n XRAY_ENABLED_DISCOUNT_RETENTION_CANCEL_RENEWAL,\n XRAY_ENABLED_DISCOUNT_RETENTION_WITH_NEW_BACKEND,\n XRAY_RETENTION_OFFER_VERSION_PAGE_AB_TEST,\n} from '@/config/GrowthBook/constants';\nimport { useSelector } from 'react-redux';\nimport { CancelOptions } from '../../components/manageSubscription/SubscriptionActiveRenewalModal/SubscriptionActiveRenewalModal.types';\nimport { PAGE_RETENTION_VERSIONS } from '@/enums/billing/billing.enum';\n\nconst RetentionSubscriptionHandler = ({\n currentItem = {},\n enableBenefitPage = false,\n isRenewCanceling = false,\n retentionType,\n retentionTypeRouteParam,\n subscriptionId,\n subscriptionType,\n openPreChatCancelFlow,\n}) => {\n const { loading } = useSelector(state => state.common);\n const history = useHistory();\n const { billing: billingLocale, routes: routesLocale } = useLocale();\n const { manageSubscriptionRetention } = billingLocale;\n const { subscriptions: retentionAnalytics } = billingAnalytics;\n const allRetentionBenefits = manageSubscriptionRetention.retentionBenefits.benefits.map((benefit, index) => ({\n description: benefit,\n id: index,\n }));\n const hasRetentionInfos = !!currentItem.retentionInfos;\n const retentionInfos = hasRetentionInfos ? currentItem.retentionInfos : {};\n const isMonthlyCycle = retentionInfos.billingCycle === 'Monthly';\n const theme = useContext(ThemeContext);\n const enabledDiscountRetentionNewFlux = useFeatureIsOn(XRAY_ENABLED_DISCOUNT_RETENTION_WITH_NEW_BACKEND);\n const enabledDiscountRetentionCancelImmediate = useFeatureIsOn(XRAY_ENABLED_DISCOUNT_RETENTION_CANCEL_IMMEDIATE);\n const enabledDiscountRetentionCancelRenewal = useFeatureIsOn(XRAY_ENABLED_DISCOUNT_RETENTION_CANCEL_RENEWAL);\n const retentionPageVersion = useFeatureIsOn(XRAY_RETENTION_OFFER_VERSION_PAGE_AB_TEST) ? PAGE_RETENTION_VERSIONS.NEW : PAGE_RETENTION_VERSIONS.OLD;\n const hasCurrentItem = () => JSON.stringify(currentItem) !== '{}';\n const isDomain = () => currentItem.type === 'domain';\n const getHeaderProps = () => {\n const defaultArgs = {\n testId: 'retention-handler-header',\n title: '...',\n description: '',\n };\n\n if (!hasCurrentItem()) {\n return defaultArgs;\n }\n\n const {\n productName,\n domain,\n } = currentItem;\n\n const getPageTitle = () => {\n if (isDomain()) {\n return `${billingLocale.domainLabel} -`;\n }\n\n return domain ? `${productName} -` : productName;\n };\n\n return {\n ...defaultArgs,\n title: getPageTitle(),\n description: domain || '',\n };\n };\n\n const handleMailButtonClick = () => {\n retentionAnalytics.retentionAccessEmails();\n openPreChatCancelFlow && openPreChatCancelFlow();\n history.push(routesLocale.emailsList);\n };\n\n const subscription = useSelector(state => state.billing.subscription);\n\n const getRedirectPath = () => {\n const isPageToUpgrade = isMonthlyCycle;\n const isPageToRenew = enableBenefitPage && !isMonthlyCycle;\n const isAbleToDiscount = enabledDiscountRetentionNewFlux && subscription && subscription.reactivation && subscription.reactivation[0] !== undefined;\n\n if ((isPageToUpgrade || isPageToRenew) && isAbleToDiscount) {\n if (retentionPageVersion === PAGE_RETENTION_VERSIONS.OLD) {\n return `${routesLocale.manageSubscription}${routesLocale.retentionBenefit}/${retentionTypeRouteParam}/${subscriptionId}/${subscriptionType}`;\n }\n if (retentionPageVersion === PAGE_RETENTION_VERSIONS.NEW) {\n if (enabledDiscountRetentionCancelImmediate && retentionType === CancelOptions.CANCEL_RENEWAL) {\n return `${routesLocale.manageSubscription}${routesLocale.retentionSubscriptionOffer}/${retentionTypeRouteParam}/${subscriptionId}/${subscriptionType}`;\n } if (enabledDiscountRetentionCancelRenewal && retentionType === CancelOptions.CANCEL_IMMEDIATE) {\n return `${routesLocale.manageSubscription}${routesLocale.retentionSubscriptionOffer}/${retentionTypeRouteParam}/${subscriptionId}/${subscriptionType}`;\n }\n }\n return `${routesLocale.manageSubscription}${routesLocale.retentionBenefit}/${retentionTypeRouteParam}/${subscriptionId}/${subscriptionType}`;\n }\n\n const cancelRenewalPath = `${routesLocale.manageSubscription}${routesLocale.cancelRenewal}/${subscriptionId}/${subscriptionType}`;\n const cancelImmediatePath = `${routesLocale.manageSubscription}${routesLocale.cancelSubscription}/${subscriptionId}/${subscriptionType}`;\n const cancelPaths = {\n CANCEL_RENEWAL: cancelRenewalPath,\n CANCEL_IMMEDIATE: cancelImmediatePath,\n };\n return cancelPaths[retentionType];\n };\n\n const handleCancelButtonClick = () => {\n retentionAnalytics.retentionCancelSignature();\n history.push(getRedirectPath());\n };\n\n return (\n \n \n \n {loading && {manageSubscriptionRetention.retentionTitle} \n \n {manageSubscriptionRetention.retentionTextDescription}\n \n \n \n {manageSubscriptionRetention.retentionBenefits.title} \n {allRetentionBenefits.map(benefit => (\n \n \n ))}\n
\n \n \n \n \n \n \n \n \n )}\n \n \n );\n};\n\nexport default RetentionSubscriptionHandler;\n","import styled, { css } from 'styled-components';\n\nconst ContentPadding = '24px';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n padding-bottom: 47px;\n\n @media (min-width: ${theme.v2.breakpoints.sm}) {\n padding: 0 40px;\n padding-bottom: 80px;\n }\n `}\n`;\n\nexport const ContentWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n box-shadow: ${theme.v2.shadows.dark};\n margin-top: 8px;\n min-height: 400px;\n padding: ${ContentPadding};\n position: relative;\n `}\n`;\n\nexport const IconContent = styled.div`\n position: absolute;\n right: 0;\n top: 0;\n`;\n\nexport const BenefitTitle = styled.strong`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: 26px;\n text-align: center;\n width: 100%;\n\n &::after {\n content: '';\n\n background-color: ${theme.v2.colors.feedback.canceledPure};\n display: block;\n height: 1px;\n margin-top: 30px;\n width: 100%;\n }\n\n @media (min-width: ${theme.v2.breakpoints.sm}) {\n font-size: ${theme.v2.font.sizes.md};\n line-height: 32px;\n margin-top: 10px;\n }\n `}\n`;\n\nexport const BenefitDescription = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n line-height: 29px;\n margin-top: 36px;\n text-align: center;\n width: 100%;\n p {\n margin: 0;\n }\n\n strong {\n font-weight: ${theme.v2.font.weights.bold};\n }\n\n @media (min-width: ${theme.v2.breakpoints.sm}) {\n font-size: ${theme.v2.font.sizes.md};\n line-height: 32px;\n margin-top: 25px;\n }\n `}\n`;\n\nexport const PricesContent = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: 25px;\n justify-content: center;\n margin-top: 24px;\n\n @media (min-width: ${theme.v2.breakpoints.md}) {\n align-items: flex-start;\n flex-direction: row;\n margin-top: 40px;\n }\n `}\n`;\n\nexport const CurrentPriceWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: 25px;\n\n @media (min-width: ${theme.v2.breakpoints.md}) {\n flex-direction: row;\n }\n `}\n`;\n\nexport const CurrentPriceContent = styled.div`\n ${({ theme }) => css`\n border: 1px solid ${theme.v2.colors.feedback.canceledPure};\n font-family: ${theme.v2.font.family.primary};\n padding: 34px;\n\n @media (min-width: ${theme.v2.breakpoints.sm}) {\n max-width: 290px;\n }\n `}\n`;\n\nexport const DiscountPriceContent = styled.div`\n ${({ theme }) => css`\n border: 1px solid ${theme.v2.colors.brand.primaryBlue};\n font-family: ${theme.v2.font.family.primary};\n padding: 34px;\n\n button {\n width: 100%;\n margin-top: 24px;\n }\n `}\n`;\n\nexport const CurrentPriceCycleText = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xs};\n line-height: ${theme.v2.font.lineHeight.text};\n\n p {\n margin: 0;\n }\n\n @media(min-width: ${theme.v2.breakpoints.sm}) {\n font-size: ${theme.v2.font.sizes.sm};\n }\n `}\n`;\n\nexport const CurrentPriceMonth = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.list};\n margin: 0;\n margin-top: 4px;\n `}\n`;\n\nexport const CurrentPriceYear = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xs};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0;\n\n strong {\n font-weight: ${theme.v2.font.weights.bold};\n }\n `}\n`;\n\nexport const CurrentPriceTotal = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0;\n\n strong {\n display: block;\n font-size: ${theme.v2.font.sizes.md};\n margin-bottom: 12px;\n margin-top: 24px;\n }\n `}\n`;\n\nexport const ArrowWrapper = styled.div`\n ${({ theme }) => css`\n transform: rotate(90deg) translateY(3px);\n\n @media (min-width: ${theme.v2.breakpoints.md}) {\n transform: none;\n }\n `}\n`;\n\nexport const BenefitFuturePriceFirstText = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xs};\n line-height: ${theme.v2.font.lineHeight.text};\n\n p {\n margin: 0;\n }\n\n @media(min-width: ${theme.v2.breakpoints.sm}) {\n font-size: ${theme.v2.font.sizes.sm};\n }\n `}\n`;\n\nexport const BenefitFuturePriceDiscountWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n gap: 28px;\n justify-content: space-between;\n margin-top: 28px;\n\n @media (min-width: ${theme.v2.breakpoints.sm}) {\n align-items: center;\n flex-direction: row;\n }\n `}\n`;\n\nexport const FuturePricesWrapper = styled.div`\n ${({ theme, showInstallment }) => css`\n display: flex;\n flex-direction: column;\n gap: 14px;\n\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xs};\n line-height: ${theme.v2.font.lineHeight.text};\n\n strong {\n color: ${theme.v2.colors.brand.primaryBlue};\n font-size: ${theme.v2.font.sizes.sm};\n }\n\n p {\n margin: 0;\n }\n\n small {\n display: block;\n font-size: ${theme.v2.font.sizes.xxs};\n\n strong {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n }\n\n ${!showInstallment && css`\n small {\n display: none;\n }\n `}\n\n @media (min-width: ${theme.v2.breakpoints.sm}) {\n strong {\n font-size: ${theme.v2.font.sizes.md};\n }\n }\n `}\n`;\n\nexport const DiscountTagWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 8px;\n\n width: 100%;\n\n @media (min-width: ${theme.v2.breakpoints.sm}) {\n max-width: 9.5rem;\n }\n `}\n`;\n\nexport const DiscountTagContent = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n background-color: ${theme.v2.colors.feedback.attentionPure};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n padding: 6px;\n text-align: center;\n text-transform: uppercase;\n `}\n`;\n\nexport const BenefitFinalExplanation = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryBlue};\n font-size: ${theme.v2.font.sizes.xxxs};\n line-height: ${theme.v2.font.lineHeight.text};\n margin-bottom: 0;\n margin-top: 32px;\n text-align: center;\n text-decoration: underline;\n\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n color: ${theme.v2.colors.neutral.lowPure};\n text-decoration: none;\n }\n `}\n`;\n\nexport const FooterContent = styled.div`\n ${({ theme }) => css`\n display: flex;\n justify-content: center;\n\n border-top: 1px solid ${theme.v2.colors.feedback.canceledPure};\n margin: 28px -${ContentPadding} -${ContentPadding} -${ContentPadding};\n padding: 24px 28px;\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const IconWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n align-self: center;\n background-color: ${theme.palette.success.primary};\n border-radius: 50%;\n display: flex;\n height: 56px;\n justify-content: center;\n margin-top: 24px;\n width: 56px;\n `}\n`;\n\nexport const ContentWrapper = styled.div`\n align-self: center;\n margin-top: 40px;\n`;\n\nexport const ModalTitle = styled.h2`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: 24px;\n letter-spacing: 0.01px;\n line-height: 32px;\n margin: 0px 0px 16px 0px;\n text-align: center;\n `}\n`;\n\nexport const ModalText = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: 16px;\n letter-spacing: 0.01px;\n line-height: 24px;\n margin: 0;\n text-align: center;\n `}\n`;\n\nexport const FooterWrapper = styled.div`\n align-self: center;\n display: flex;\n flex-direction: column;\n margin: 38px 0px 0px;\n \n & button {\n width: 100%;\n }\n \n & button:first-child {\n margin-bottom: 6px;\n }\n`;\n","import React from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport { Button } from '@/pages/common';\nimport * as Styles from './ActivateRenewModal.styles';\n\nconst ActivateRenewModal = ({\n activateSubscription,\n onClose,\n handleActivateSubscription,\n testId = 'renew-subscription-modal',\n title = 'Do you want to activate subscription renewal?',\n content = 'Payment will be charged at the end of the cycle, preventing your product from being canceled and your data and files from being permanently deleted.',\n buttonRenewalLabel = 'Confirm activation',\n}) => {\n const handleOnClose = () => {\n onClose && onClose();\n };\n\n const handleOnActivateRenew = () => {\n if (handleActivateSubscription) {\n handleActivateSubscription(activateSubscription);\n handleOnClose();\n }\n };\n\n return (\n \n \n {title} \n \n {content}\n \n \n\n \n \n \n );\n};\n\nexport default ActivateRenewModal;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n min-height: 400px;\n padding: 24px;\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.lg};\n font-weight: ${theme.font.weights.medium};\n margin: 0;\n `}\n`;\n\nexport const Warning = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.palette.error.ultralight};\n border-radius: 5px;\n display: inline-flex;\n flex-direction: column;\n margin-top: 24px;\n padding: 24px;\n position: relative;\n `}\n`;\n\nexport const Attention = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n\n svg {\n fill: ${theme.palette.error.primary};\n }\n `}\n`;\n\nexport const AttentionLabel = styled.span`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.bold};\n margin-left: 12px;\n `}\n`;\n\nexport const Content = styled.div``;\n\nexport const ListItem = styled.li`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.regular};\n padding-left: 16px;\n position: relative;\n\n &:not(:first-child) {\n margin-top: 16px;\n }\n\n &:before {\n background-color: ${theme.palette.grey.dark};\n border-radius: 50%;\n content: '';\n height: 8px;\n left: 0;\n position: absolute;\n top: 0;\n transform: translateY(70%);\n width: 8px;\n }\n `}\n`;\n\nexport const List = styled.ul`\n ${({ theme }) => css`\n list-style: none;\n padding: 0 0 0 30px;\n\n li {\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.regular};\n padding-left: 16px;\n position: relative;\n\n &:not(:first-child) {\n margin-top: 16px;\n }\n\n &:before {\n background-color: ${theme.palette.grey.dark};\n border-radius: 50%;\n content: '';\n height: 8px;\n left: 0;\n position: absolute;\n top: 0;\n transform: translateY(70%);\n width: 8px;\n }\n }\n `}\n`;\n\nexport const Links = styled.div`\n ${({ theme }) => css`\n display: flex;\n margin-left: 30px;\n\n @media (max-width: ${theme.breakpoints.md}) {\n margin: 32px 0 0 46px;\n flex-direction: column;\n }\n `}\n`;\n\nexport const LinksItem = styled.div`\n ${({ theme }) => css`\n align-items: self-end;\n display: flex;\n padding: 0 16px;\n\n &:not(:first-child) {\n border-left: 1px solid ${theme.palette.grey.darklight}\n }\n\n @media (max-width: ${theme.breakpoints.md}) {\n padding: 0;\n\n &:not(:first-child) {\n border-left: 0;\n margin-top: 24px;\n }\n }\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Content = styled.section`\n ${({ theme }) => css`\n font-family: ${theme.v1.font.family.primary};\n padding: 14px;\n `}\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n margin: 0;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-top: 74px;\n text-align: center;\n }\n `}\n`;\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n align-items: center;\n flex-direction: column;\n }\n `}\n`;\n\nexport const InfoIcon = styled.span`\n ${({ theme }) => css`\n & svg {\n fill: ${theme.v1.color.warning.attention};\n }\n `}\n`;\n\nexport const InfoText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-size: ${theme.font.sizes.sm};\n margin: 0;\n\n strong {\n font-weight: ${theme.v1.font.weights.medium};\n }\n\n @media (max-width: ${theme.breakpoints.sm}) {\n text-align: center;\n }\n `}\n`;\n\nexport const ButtonAdapter = styled.div``;\n\nexport const Actions = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 30px;\n justify-content: center;\n margin-top: 40px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n align-items: center;\n flex-direction: column;\n }\n `}\n`;\n","import React, { useEffect } from 'react';\nimport { IconWarning } from '@/icons';\nimport { Link, Button } from '@/pages/common';\nimport * as Styles from './Confirmation.styles';\n\nconst Confirmation = ({\n title = 'Please read the information below before confirming or canceling your subscription:',\n attentionLabel = 'Attention',\n backupFilesLinkLabel = 'See how to back up your files',\n backupFilesLinkUrl = '',\n stopCancelLabel = \"I don't want to cancel the renewal anymore\",\n onStopCancel,\n topics = [],\n testId = 'confirmation',\n showBackfilesLink = false,\n onClickBackupLink,\n onShowPageAction,\n}) => {\n useEffect(() => {\n onShowPageAction && onShowPageAction();\n }, [onShowPageAction]);\n\n const handleOnStopCancelClick = () => {\n onStopCancel && onStopCancel();\n };\n\n const hadleOnClickBackupLink = () => {\n onClickBackupLink && onClickBackupLink();\n };\n\n const topicsMap = topics.map(topic => {topic} );\n return (\n \n \n {title}\n \n \n \n \n {attentionLabel}\n \n \n \n\n \n { topicsMap }\n \n\n \n { showBackfilesLink && (\n \n hadleOnClickBackupLink()}\n href={backupFilesLinkUrl}\n text={backupFilesLinkLabel}\n testId={`${testId}-backupfiles-link`}\n target=\"_blank\"\n />\n \n )}\n \n \n \n \n \n \n );\n};\n\nexport default Confirmation;\n","import styled, { css } from 'styled-components';\n\nexport const Title = styled.h6`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n letter-spacing: 0px;\n line-height: ${theme.v2.font.lineHeight.list};\n margin: 28px 0px 10px 32px;\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 32px 0px 20px 24px;\n }\n `}\n`;\n\nexport const Icon = styled.div`\n ${({ theme }) => css`\n flex-shrink: 0;\n margin: 18px 0px 0px 0px;\n color: ${theme.v2.colors.feedback.attentionPure};\n fill: ${theme.v2.colors.feedback.attentionPure};\n height: 70px;\n width: 70px;\n\n @media (min-width: ${theme.v2.breakpoints.sm}) {\n width: 30px;\n height: 30px;\n }\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-weight: ${theme.v2.font.weights.medium};\n `}\n`;\n\nexport const Action = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n margin-bottom: 40px;\n`;\n\nexport const ContentWrapper = styled.div`\n${({ theme }) => css`\n display:flex;\n margin: 0px 31px;\n padding: 0;\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n align-items:center;\n flex-direction:column;\n margin: 0px 24px;\n svg{\n height:60px;\n margin-bottom:20px;\n width: 60px;\n }\n }\n `}\n`;\n\nexport const Content = styled.div`\n${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n letter-spacing: 0px;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 40px 12px;\n a {\n color: ${theme.v2.colors.brand.primaryBlue};\n display:inline;\n }\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 0px 0px 40px 0px;\n }\n`}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Content = styled.section`\n ${({ theme }) => css`\n font-family: ${theme.v1.font.family.primary};\n padding: 14px;\n `}\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n margin: 0;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-top: 74px;\n text-align: center;\n }\n `}\n`;\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n align-items: center;\n flex-direction: column;\n }\n `}\n`;\n\nexport const InfoIcon = styled.span`\n ${({ theme }) => css`\n & svg {\n fill: ${theme.v1.color.warning.attention};\n }\n `}\n`;\n\nexport const InfoText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-size: ${theme.font.sizes.sm};\n margin: 0;\n\n strong {\n font-weight: ${theme.v1.font.weights.medium};\n }\n\n @media (max-width: ${theme.breakpoints.sm}) {\n text-align: center;\n }\n `}\n`;\n\nexport const ButtonAdapter = styled.div``;\n\nexport const Actions = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 30px;\n justify-content: center;\n margin-top: 40px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n align-items: center;\n flex-direction: column;\n }\n `}\n`;\n","import React from 'react';\nimport { Modal } from '@/pages/common';\nimport * as Styles from './InvoiceModal.styles';\nimport { Button } from '@/pages/common/v1';\nimport { IconInfo } from '@/icons';\n\nconst InvoiceModal = ({\n title = 'Discount already applied',\n descriptions = [\n 'The discount has already been applied to your invoice. Click the button below to access it and then be able to make the payment.',\n 'If you have already paid the invoice, it may take up to 72 hours to clear.',\n ],\n btnText = 'See invoice',\n btnAction,\n modalClose,\n}) => {\n const invoiceClickHandler = () => {\n btnAction && btnAction();\n };\n const invoiceModalCloseHandler = () => {\n modalClose && modalClose();\n };\n return (\n \n \n {title}\n \n \n \n \n \n {descriptions.map(description => (\n \n {description}\n \n ))}\n \n \n \n \n\n \n );\n};\n\nexport default InvoiceModal;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n display: flex;\n flex-direction: column;\n min-height: 400px;\n padding: 24px;\n`;\n\nexport const Amount = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.palette.primary.contrastText}40;\n border-radius: 5px;\n display: inline-flex;\n flex-direction: column;\n max-width: 684px;\n padding: 24px;\n position: relative;\n `}\n`;\n\nexport const AmountTitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.light};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: 18px;\n margin: 0px 0px 20px 0px;\n `}\n`;\n\nexport const NoRefundWrapper = styled.div`\n ${() => css`\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex-direction: row;\n `}\n`;\n\nexport const NoRefundExplanation = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.regular};\n letter-spacing: 0.01px;\n margin: 0px 20px 0px 0px;\n `}\n`;\n\nexport const TipWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.palette.primary.contrastText}40;\n border-radius: 5px;\n display: inline-flex;\n flex-direction: column;\n margin-top: 24px;\n max-width: 684px;\n padding: 24px;\n position: relative;\n `}\n`;\n\nexport const Tip = styled.div`\n ${() => css`\n align-items: center;\n display: flex;\n `}\n`;\n\nexport const TipLabel = styled.span`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.bold};\n letter-spacing: 0.01px;\n margin-left: 12px;\n `}\n`;\n\nexport const Content = styled.div``;\n\nexport const TipContent = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 22px;\n margin-left: 34px;\n `}\n`;\n","import React, { useContext, useEffect } from 'react';\nimport { ThemeContext } from 'styled-components';\nimport { IconLight } from '@/icons';\nimport { Button } from '@/pages/common';\nimport * as Styles from './NoRefund.styles';\nimport { billingAnalytics } from '@/analytics';\n\nconst NoRefund = ({\n amountTitle = 'Total to be refounded',\n withoutRefund = 'This subscription is not eligible to receive a refund',\n refundPolitics = 'Read our refund politics',\n tipTitle = 'Tip:',\n tipText = 'É mais vantajoso utilizar a assinatura até o final do ciclo, em',\n tipDate = '01/10/2021',\n stopCancelLabel = 'Desistir do Cancelamento',\n testId = 'refund',\n handleStopCancel,\n onRefundPoliticsClick,\n}) => {\n const theme = useContext(ThemeContext);\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n\n useEffect(() => {\n subscriptionAnalytics.cancelSubscriptionPageView('4_visualizar_reembolso_cancelar_imediato');\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n const handleOnRefundPoliticsClick = () => {\n onRefundPoliticsClick && onRefundPoliticsClick();\n };\n\n return (\n \n \n {amountTitle} \n\n \n {withoutRefund} \n \n \n\n \n \n \n {tipTitle}\n \n \n\n \n \n {`${tipText} ${tipDate}.`}\n \n\n \n \n \n );\n};\n\nexport default NoRefund;\n","import styled, { css, keyframes } from 'styled-components';\n\nconst rotate = keyframes`\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n`;\n\nexport const Wrapper = styled.section`\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-height: 400px;\n`;\n\nexport const Loader = styled.div`\n ${({ theme }) => css`\n width: 40px;\n height: 40px;\n border-radius: 50%;\n border: 3px solid ${theme.palette.danger.dark};\n border-right-color: transparent;\n animation: .8s ease-in-out infinite ${rotate};\n `}\n`;\n\nexport const Description = styled.div`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.regular};\n margin-top: 12px;\n text-align: center;\n `}\n\n p:not(:first-child) {\n margin: 4px 0 0 0;\n }\n`;\n","import React from 'react';\nimport * as Styles from './OrderProcessing.styles';\n\nconst OrderProcessing = ({\n testId = 'order-processing',\n text = '',\n}) => (\n \n \n {text}\n \n \n);\n\nexport default OrderProcessing;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n max-height: 350px;\n max-width: 550px;\n padding-left: 17px;\n @media (max-width: ${theme.breakpoints.sm}) {\n display: flex;\n height: 100%;\n justify-content: center;\n max-height: 100%;\n padding-left: 0;\n width: 100%;\n },\n `}\n`;\n\nexport const Icon = styled.div`\n ${({ theme }) => css`\n align-self: center;\n background-color: ${theme.palette.success.primary};\n border-radius: 50%;\n height: 45px;\n margin-top: 35px;\n width: 45px;\n `}\n`;\n\nexport const IconCheck = styled.div`\n ${() => css`\n padding: 10px;\n `}\n`;\n\nexport const Title = styled.div`\n ${({ theme }) => css`\n align-items: center;\n font-size: 32px;\n font-weight: ${theme.font.weights.medium};\n justify-content: center;\n margin-bottom: 20px;\n margin-top: 45px;\n text-align: center;\n @media (min-width: ${theme.breakpoints.md}) {\n font-size: ${theme.font.sizes.xxl};\n },\n `}\n`;\n\nexport const Button = styled.div`\n ${() => css`\n display: flex;\n margin-bottom: 35px;\n margin-top: 15px;\n `}\n`;\n","import React, { useContext } from 'react';\nimport { ThemeContext } from 'styled-components';\nimport { Modal } from '@/pages/common/Modal';\nimport { Button } from '@/pages/common/Button';\nimport { IconCheck } from '@/icons';\nimport * as Style from './PaymentSuccessModal.styles';\n\nconst PaymentSuccessModal = ({\n title = 'Compra realizada com sucesso',\n buttonLabel = 'FECHAR',\n onClose,\n onButtonClick,\n}) => {\n const theme = useContext(ThemeContext);\n\n const handleOnButtonClick = () => {\n onButtonClick && onButtonClick();\n };\n\n const handleOnClose = () => {\n onClose && onClose();\n };\n\n return (\n \n \n \n \n \n \n \n {title}\n \n \n \n \n \n );\n};\n\nexport default PaymentSuccessModal;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n ${({ theme }) => css`\n margin-top: 36px;\n width: 100%;\n\n @media (max-width: ${theme.breakpoints.md}) {\n margin-top: 40px;\n }\n `}\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.lg};\n font-weight: ${theme.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: 24px;\n margin: 0px 0px 15px 0px;\n opacity: 1;\n `}\n`;\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n align-items: flex;\n display: flex;\n\n @media (max-width: ${theme.breakpoints.md}) {\n flex-wrap: wrap;\n }\n `}\n`;\n\nexport const InfoItem = styled.span`\n ${({ theme }) => css`\n &:not(:first-child) {\n margin-left: 40px;\n }\n\n @media (max-width: ${theme.breakpoints.md}) {\n &:not(:first-child) {\n margin: 26px 0 0 0;\n }\n\n &:first-child {\n flex: 100%;\n }\n }\n `}\n`;\n\nexport const Label = styled.h3`\n ${({ theme }) => css`\n color: ${theme.palette.grey.light};\n font-size: ${theme.font.sizes.xxs};\n font-weight: ${theme.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 16px;\n margin: 0 0 2px 0;\n opacity: 1;\n `}\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: 21px;\n opacity: 1;\n white-space: nowrap;\n `}\n`;\n\nexport const InfoItemSecondary = styled(InfoItem)`\n ${({ theme }) => css`\n & ${Label} {\n margin-bottom: 5px;\n }\n\n @media (max-width: ${theme.breakpoints.md}) {\n & + ${InfoItemSecondary} {\n margin-left: 24px;\n }\n }\n `}\n\n`;\n\nexport const InfoItemCentered = styled(InfoItem)`\n ${({ theme }) => css`\n align-self: center;\n\n @media (max-width: ${theme.breakpoints.md}) {\n flex: 100%;\n }\n `}\n`;\n","import React, { useContext } from 'react';\nimport { ThemeContext } from 'styled-components';\nimport { Tag } from '@/pages/common/Tag';\nimport { Message } from '@/pages/common/Message';\nimport * as Styles from './RefundFeedback.styles';\n\nconst RefundFeedback = ({\n titleLabel = 'Refund',\n statusLabel = 'Status',\n status = 'pending',\n statusText = 'Pending',\n valueLabel = 'Value',\n valueText = '$ 10,00',\n methodLabel = 'Refund Method',\n methodText = 'Credit Card',\n messageText = '',\n}) => {\n const theme = useContext(ThemeContext);\n\n const colorStatus = {\n pending: theme.palette.yellow.main,\n accomplished: theme.palette.success.primary,\n };\n\n return (\n \n \n {titleLabel}\n \n \n \n \n { statusLabel }\n \n\n \n \n \n \n { valueLabel }\n \n \n { valueText }\n \n \n \n \n { methodLabel }\n \n \n { methodText }\n \n \n { messageText && (\n \n \n )}\n \n \n );\n};\n\nexport default RefundFeedback;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n display: flex;\n flex-direction: column;\n padding: 30px 24px 24px 0px;\n width: 100%;\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.lg};\n font-weight: ${theme.font.weights.medium};\n line-height: ${theme.font.sizes.xxl};\n margin: 0 0 16px 0;\n `}\n`;\n\nexport const MethodsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n max-width: 777px;\n`;\n\nexport const MethodButton = styled.button`\n ${({ theme, active }) => css`\n align-items: center;\n background-color: transparent;\n border-color: ${active ? theme.palette.primary.main : theme.palette.grey.primary};\n border-radius: 5px;\n border-radius: 5px;\n border-style: solid;\n border-width: 1px;\n cursor: pointer;\n display: flex;\n justify-content: flex-start;\n margin-bottom: 16px;\n padding: 22px 16px 24px;\n `}\n`;\n\nexport const RadioWrapper = styled.div`\n margin-right: 16px;\n\n @media (max-width: 705px){\n align-self: flex-start;\n margin-top: 24px;\n }\n`;\n\nexport const Content = styled.div`\n display: flex;\n flex-wrap: wrap;\n`;\n\nexport const IconWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.palette.primary.contrastText};\n display: flex;\n height: 72px;\n justify-content: center;\n width: 72px;\n `}\n`;\n\nexport const DataWrapper = styled.div`\n display: flex;\n flex-direction: column;\n margin-left: 16px;\n flex: 1;\n\n @media (max-width: 705px){\n margin-left: 0px;\n margin-top: 16px;\n width: 100%;\n flex: none;\n }\n`;\n\nexport const MethodName = styled.h4`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: ${theme.font.sizes.xxl};\n margin: 0 0 8px 0;\n text-align: left;\n `}\n`;\n\nexport const MethodDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 20px;\n margin: 0 0 8px 0;\n text-align: left;\n `}\n`;\n\nexport const LoaderAdapter = styled.div`\n display: flex;\n justify-content: center;\n`;\n","import React, { useState } from 'react';\nimport { Radio } from '@/pages/common/inputs';\nimport Loader from '@/components/Layout/Loader';\nimport HostGator from '@/media/subscriptions/refund/HostGator.svg';\nimport { IconCreditCard, IconPix, IconPayPal } from '@/icons';\nimport * as Styles from './RefundMethodsBlock.styles';\nimport { REFUND_PAYMENT_METHODS } from '@/enums/billing/billing.enum';\nimport { billingAnalytics } from '@/analytics';\n\nconst RefundMethodsBlock = ({\n testId = 'refund-methods-block',\n title = 'Select a refund method:',\n methods = [\n 'hg_credits',\n 'braspag_credit_1x',\n 'pix',\n 'gp_paypal',\n 'dlocal',\n ],\n methodOptions = {\n hg_credits: {\n show: true,\n image: \n \n {title}\n \n\n {\n loading\n ? (\n \n \n )\n : (\n \n {methods.map(method => (\n (hasMethod(method) && methodOptions[method].show) && (\n handleOnChange(method)}\n active={checkedRadio === method}\n key={`method-${method}`}\n data-testid={`button-method-${method}`}\n >\n \n \n\n \n \n {methodOptions[method].image}\n \n\n \n {methodOptions[method].name} \n \n {methodOptions[method].description}\n \n \n \n\n \n )\n ))}\n \n )\n }\n \n );\n};\nexport default RefundMethodsBlock;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n ${({ open }) => css`\n visibility: ${open ? 'visible' : 'hidden'};\n opacity: ${open ? 1 : 0};\n transition:\n opacity 200ms ease-in-out,\n visibility 200ms ease-in-out;\n `}\n`;\n\nexport const TitleAccordion = styled.span`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.bold};\n `}\n`;\n\nexport const Header = styled.header``;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.medium};\n margin: 24px 0 0 0;\n `}\n`;\n\nexport const ContentWrapper = styled.div`\n ${({ theme }) => css`\n border-top: 1px solid ${theme.palette.grey.primary};\n margin-top: 40px;\n `}\n`;\n\nexport const Content = styled.div`\n margin-right: -16px;\n max-height: 385px;\n overflow-y: auto;\n padding: 0 16px 12px 0;\n`;\n\nexport const ContentItem = styled.div`\n padding-top: 24px;\n`;\n\nexport const Label = styled.strong`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.bold};\n `}\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n display: block;\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.regular};\n line-height: 20px;\n margin-top: 24px;\n `}\n\n`;\n\nexport const Block = styled.div`\n ${({ theme }) => css`\n border-radius: 5px;\n border: 1px solid ${theme.palette.grey.primary};\n margin-top: 16px;\n padding: 24px 16px;\n\n & ${Label} {\n display: block;\n }\n\n & ${Text} {\n margin-top: 16px;\n display: block;\n }\n `}\n`;\n\nexport const List = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n\n &:not(:first-child) {\n margin-top: 24px;\n }\n`;\n\nexport const ListItem = styled.li`\n padding-left: 16px;\n position: relative;\n\n &:not(:first-child) {\n margin-top: 24px;\n }\n\n &:before {\n background-color: #959EA3;\n border-radius: 50%;\n content: '';\n height: 8px;\n left: 0;\n position: absolute;\n top: 2px;\n transform: translateY(50%);\n width: 8px;\n }\n\n & ${Text} {\n display: inline;\n margin: 0;\n }\n`;\n\nexport const BlockSection = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: flex-end;\n\n &:last-child {\n margin-bottom: -8px;\n }\n\n & ${Label} {\n font-weight: ${theme.font.weights.medium};\n }\n\n & ${Block} {\n padding: 16px;\n flex: 1;\n }\n\n @media (max-width: ${theme.breakpoints.md}) {\n flex-direction: column;\n align-items: center;\n\n & ${Block} {\n margin: 0;\n width: 100%;\n }\n\n & ${Block}:first-child {\n margin-top: 16px;\n }\n }\n `}\n`;\n\nexport const Expression = styled.div`\n align-items: center;\n display: flex;\n margin-top: 16px;\n`;\n\nexport const ExpressionBase = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.palette.grey.variantlight};\n padding: 8px 16px;\n\n @media (max-width: ${theme.breakpoints.md}) {\n flex: 1;\n }\n `}\n`;\n\nexport const ExpressionPrice = styled.div`\n ${({ theme }) => css`\n font-weight: ${theme.font.weights.regular};\n font-size: ${theme.font.sizes.sm};\n color: ${theme.palette.grey.dark};\n `}\n`;\n\nexport const ExpressionText = styled.div`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.xxs};\n font-weight: ${theme.font.weights.medium};\n margin-top: 6px;\n `}\n`;\n\nexport const SymbolMinus = styled.div`\n ${({ theme }) => css`\n flex: 0 0 14px;\n height: 4px;\n background-color: ${theme.palette.primary.main};\n border-radius: 2px;\n margin: 0 20px;\n `}\n`;\n\nexport const SymbolEqual = styled.div`\n ${({ theme }) => css`\n display: inline-block;\n width: 14px;\n flex: 0 0 14px;\n margin: 0 20px 45px 20px;\n\n &:before {\n content: '';\n display: block;\n height: 4px;\n background-color: ${theme.palette.primary.main};\n border-radius: 2px;\n }\n\n &:after {\n margin-top: 2px;\n content: '';\n display: block;\n height: 4px;\n background-color: ${theme.palette.primary.main};\n border-radius: 2px;\n };\n\n @media (max-width: ${theme.breakpoints.md}) {\n margin: 16px 0;\n }\n `}\n`;\n\nexport const Footer = styled.footer`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n justify-content: center;\n margin-top: 12px;\n\n @media (max-width: ${theme.breakpoints.md}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const ButtonAdapter = styled.div`\n ${({ theme }) => css`\n &:not(:first-child) {\n margin-left: 16px;\n }\n\n @media (max-width: ${theme.breakpoints.md}) {\n margin-top: 16px;\n\n &:not(:first-child) {\n margin: 8px 0 0 0;\n }\n }\n `}\n`;\n","import React from 'react';\nimport { Modal, Button, Accordion } from '@/pages/common';\nimport { COUNTRY } from '@/config';\nimport * as Styles from './RefundModal.styles';\n\n\nconst RefundModal = ({\n accordionCancelledAfterContent,\n accordionCancelledAfterExpanded = false,\n accordionCancelledAfterLabel = 'Cancellations made after 7 days of contracting',\n accordionCancelledAfterTitleHighlightPattern = 'after 7 days',\n accordionCancelledBeforeContent,\n accordionCancelledBeforeExpanded = false,\n accordionCancelledBeforeLabel = 'Cancellations made within 7 days of contracting',\n accordionCancelledBeforeTitleHighlightPattern = 'within 7 days',\n onRefundModalClose,\n onRefundPolicyClick,\n onServiceTermsClick,\n enableRefundToggle,\n open = false,\n refundPolicyButtonLabel = 'see more about refund policy',\n serviceTermsButtonLabel = 'see terms of service',\n title = 'Refund Policy',\n refundModalLocaleV2,\n}) => {\n const isBr = COUNTRY === 'br';\n\n const handleOnClose = () => {\n onRefundModalClose && onRefundModalClose();\n };\n\n const handleOnRefundPolicyClick = () => {\n onRefundPolicyClick && onRefundPolicyClick();\n };\n\n const handleOnServiceTermsClick = () => {\n onServiceTermsClick && onServiceTermsClick();\n };\n\n return (\n \n { open && (\n \n \n {title} \n \n\n \n \n \n {enableRefundToggle && isBr ? (\n \n \n {refundModalLocaleV2.accordionCancelledBeforeContent.refundableSubscriptions.title && (\n {refundModalLocaleV2.accordionCancelledBeforeContent.refundableSubscriptions.title} \n )}\n \n \n {refundModalLocaleV2.accordionCancelledBeforeContent.refundableSubscriptions.label} \n {' '}\n {refundModalLocaleV2.accordionCancelledBeforeContent.refundableSubscriptions.text}\n \n \n \n \n {refundModalLocaleV2.accordionCancelledBeforeContent.nonRefundableSubscriptions.label} \n {' '}\n {refundModalLocaleV2.accordionCancelledBeforeContent.nonRefundableSubscriptions.text}\n \n \n \n \n {refundModalLocaleV2.accordionCancelledBeforeContent.refundableWays.label} \n {' '}\n {refundModalLocaleV2.accordionCancelledBeforeContent.refundableWays.text}\n \n \n \n \n {refundModalLocaleV2.accordionCancelledBeforeContent.exception.label} \n \n {refundModalLocaleV2.accordionCancelledBeforeContent.exception.text}\n \n \n \n )\n : (\n \n \n {accordionCancelledBeforeContent.refundableSubscriptions.title && (\n {accordionCancelledBeforeContent.refundableSubscriptions.title} \n )}\n \n \n {accordionCancelledBeforeContent.refundableSubscriptions.label} \n {' '}\n {accordionCancelledBeforeContent.refundableSubscriptions.text}\n \n \n \n \n {accordionCancelledBeforeContent.nonRefundableSubscriptions.label} \n {' '}\n {accordionCancelledBeforeContent.nonRefundableSubscriptions.text}\n \n \n {accordionCancelledBeforeContent.refundableCicles.label && (\n \n \n {accordionCancelledBeforeContent.refundableCicles.label} \n {' '}\n {accordionCancelledBeforeContent.refundableCicles.text}\n \n \n )}\n \n \n {accordionCancelledBeforeContent.refundableWays.label} \n {' '}\n {accordionCancelledBeforeContent.refundableWays.text}\n \n \n \n\n \n {accordionCancelledBeforeContent.exception.label} \n \n {accordionCancelledBeforeContent.exception.text}\n \n \n {accordionCancelledBeforeContent.footerNote && (\n \n {accordionCancelledBeforeContent.footerNote}\n \n )}\n \n )\n }\n \n\n \n {enableRefundToggle && isBr ? (\n \n \n {refundModalLocaleV2.accordionCancelledAfterContent.refundableSubscriptions.title && (\n {refundModalLocaleV2.accordionCancelledAfterContent.refundableSubscriptions.title} \n )}\n \n \n {refundModalLocaleV2.accordionCancelledAfterContent.refundableSubscriptions.label} \n {' '}\n {refundModalLocaleV2.accordionCancelledAfterContent.refundableSubscriptions.text}\n \n \n \n \n {refundModalLocaleV2.accordionCancelledAfterContent.nonRefundableSubscriptions.label} \n {' '}\n {refundModalLocaleV2.accordionCancelledAfterContent.nonRefundableSubscriptions.text}\n \n \n {refundModalLocaleV2.accordionCancelledAfterContent.nonRefundableCicles.label && (\n \n \n {refundModalLocaleV2.accordionCancelledAfterContent.nonRefundableCicles.label} \n {' '}\n {refundModalLocaleV2.accordionCancelledAfterContent.nonRefundableCicles.text}\n \n \n )}\n \n {refundModalLocaleV2.accordionCancelledAfterContent.refundableWays.label && (\n \n \n \n {refundModalLocaleV2.accordionCancelledAfterContent.refundableWays.label} \n {' '}\n {refundModalLocaleV2.accordionCancelledAfterContent.refundableWays.text}\n \n \n \n )}\n {refundModalLocaleV2.accordionCancelledAfterContent.exception.label && (\n \n {refundModalLocaleV2.accordionCancelledAfterContent.exception.label} \n \n {refundModalLocaleV2.accordionCancelledAfterContent.exception.text}\n \n \n )}\n {refundModalLocaleV2.accordionCancelledAfterContent.cancelAfterContract.title && (\n \n {refundModalLocaleV2.accordionCancelledAfterContent.cancelAfterContract.title} \n \n \n {refundModalLocaleV2.accordionCancelledAfterContent.cancelAfterContract.label} \n {' '}\n {refundModalLocaleV2.accordionCancelledAfterContent.cancelAfterContract.text}\n \n \n \n \n {refundModalLocaleV2.accordionCancelledAfterContent.nonRefundContract.label} \n {' '}\n {refundModalLocaleV2.accordionCancelledAfterContent.nonRefundContract.text}\n \n \n \n \n {refundModalLocaleV2.accordionCancelledAfterContent.nonRefundCycles.label} \n {' '}\n {refundModalLocaleV2.accordionCancelledAfterContent.nonRefundCycles.text}\n \n \n \n \n {refundModalLocaleV2.accordionCancelledAfterContent.refundCalculation.label} \n {' '}\n {refundModalLocaleV2.accordionCancelledAfterContent.refundCalculation.text}\n \n \n \n \n {refundModalLocaleV2.accordionCancelledAfterContent.refundWays.label} \n {' '}\n {refundModalLocaleV2.accordionCancelledAfterContent.refundWays.text}\n \n \n \n )}\n \n )\n : (\n \n \n \n \n {accordionCancelledAfterContent.refundableSubscriptions.label} \n {' '}\n {accordionCancelledAfterContent.refundableSubscriptions.text}\n \n \n \n \n {accordionCancelledAfterContent.nonRefundableSubscriptions.label} \n {' '}\n {accordionCancelledAfterContent.nonRefundableSubscriptions.text}\n \n \n \n \n {accordionCancelledAfterContent.refundableCicles.label} \n {' '}\n {accordionCancelledAfterContent.refundableCicles.text}\n \n \n \n \n {accordionCancelledAfterContent.nonRefundableCicles.label} \n {' '}\n {accordionCancelledAfterContent.nonRefundableCicles.text}\n \n \n \n \n {accordionCancelledAfterContent.refundableCalculation.label} \n {' '}\n {accordionCancelledAfterContent.refundableCalculation.text}\n \n \n \n \n {accordionCancelledAfterContent.exampleCalculation.label} \n \n {accordionCancelledAfterContent.exampleCalculation.text}\n \n \n \n {accordionCancelledAfterContent.amountOwed.label} \n \n \n \n {accordionCancelledAfterContent.amountOwed.annualContractAmount}\n \n \n {accordionCancelledAfterContent.amountOwed.annualContractLabel}\n \n \n \n \n {accordionCancelledAfterContent.amountOwed.usedAmount}\n \n \n {accordionCancelledAfterContent.amountOwed.usedLabel}\n \n \n \n \n \n {accordionCancelledAfterContent.amountAvailableRefund.label} \n \n \n \n {accordionCancelledAfterContent.amountAvailableRefund.totalAmount}\n \n \n {accordionCancelledAfterContent.amountAvailableRefund.totalLabel}\n \n \n \n \n {accordionCancelledAfterContent.amountAvailableRefund.terminationFinePercents}\n \n \n {accordionCancelledAfterContent.amountAvailableRefund.terminationFineLabel}\n \n \n \n \n \n \n \n \n \n {accordionCancelledAfterContent.refundableWays.label} \n {' '}\n {accordionCancelledAfterContent.refundableWays.text}\n \n \n \n \n )\n }\n \n \n \n\n \n {enableRefundToggle && isBr ? (\n null\n ) : (\n \n \n )}\n \n \n \n \n )}\n \n );\n};\n\nexport default RefundModal;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n ${({ theme }) => css`\n background-color: ${theme.palette.yellow.opacity};\n border-radius: 5px;\n display: flex;\n flex-direction: row;\n max-width: 777px;\n padding: 24px;\n width: 100%;\n\n button {\n align-items: center;\n display: flex;\n height: 32px;\n justify-content: flex-start;\n }\n `}\n`;\n\nexport const TipWrapper = styled.div`\n padding-left: 16px;\n`;\nexport const TipTitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.bold};\n letter-spacing: 0.01px;\n line-height: ${theme.font.sizes.xl};\n margin: 0;\n `}\n`;\n\nexport const TipContent = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: ${theme.font.sizes.xl};\n margin: 0px 0px 24px 0px;\n `}\n`;\n","import React from 'react';\nimport { IconLight } from '@/icons';\nimport { Button } from '@/pages/common';\nimport * as Styles from './RefundTipBlock.styles';\n\n\nconst RefundTipBlock = ({\n display = false,\n testId = 'refund-tip-block',\n tipTitle = 'Dica:',\n tip = 'Por essa quantia é mais vantajoso utilizar a assinatura até o final do ciclo, em 01/09/2022.',\n stopCancelLabel = 'Desistir do Cancelamento',\n handleStopCancel,\n}) => (\n display && (\n \n \n {tipTitle} \n {tip} \n \n\n \n )\n);\n\nexport default RefundTipBlock;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n ${({ theme }) => css`\n background-color: ${theme.palette.primary.contrastText};\n border-radius: 5px;\n display: flex;\n flex-direction: column;\n margin-right: 16px;\n padding: 24px;\n\n @media (max-width: 768px){\n margin: 0px 0px 24px 0px;\n }\n `}\n`;\n\nexport const TotalLabel = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.light};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: ${theme.font.sizes.lg};\n margin: 0;\n `}\n`;\n\nexport const Amount = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: ${theme.font.sizes.xxl};\n margin: 8px 0px auto;\n `}\n`;\n","import React from 'react';\nimport { Button } from '@/pages/common';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport * as Styles from './RefundValueBlock.styles';\n\nconst RefundValueBlock = ({\n testId = 'refundValueBlock',\n totalLabel = 'Total to refund',\n refundPolitics = 'Read our refund politics',\n amount = '0.00',\n onRefundPoliticsClick,\n loading = false,\n}) => {\n const handleOnRefundPoliticsClick = () => {\n onRefundPoliticsClick && onRefundPoliticsClick();\n };\n\n return (\n \n \n {totalLabel}\n \n \n {loading ? '...' : formatCurrency(amount)}\n \n \n );\n};\n\nexport default RefundValueBlock;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n ${({ theme }) => css`\n align-items: center;\n background-color:${theme.palette.primary.contrastText};\n display: flex;\n flex-direction: row;\n max-width: 604px;\n padding: 24px;\n `}\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: 24px;\n margin: 30px 0 15px 0;\n text-align: left;\n `}\n`;\n\nexport const IconWrapper = styled.div`\n align-items: center;\n align-self: flex-start;\n display: flex;\n height: 72px;\n justify-content: center;\n width: 72px;\n`;\n\nexport const DataWrapper = styled.div`\n display: flex;\n flex-direction: column;\n margin-left: 16px;\n`;\n\nexport const MethodName = styled.h4`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: 21px;\n margin: 0 0 14px 0;\n text-align: left;\n `}\n`;\n\nexport const TotalLabel = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.light};\n font-size: ${theme.font.sizes.xxs};\n font-weight: ${theme.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: ${theme.font.sizes.lg};\n margin: 0px 0px 2px 0px;\n `}\n`;\n\nexport const Amount = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 21px;\n margin: 0px 0px 16px 0px;\n `}\n`;\n\nexport const Info = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 19px;\n margin: 0;\n `}\n`;\n","import React, { useEffect, useState } from 'react';\nimport HostGator from '@/media/subscriptions/refund/HostGator.svg';\nimport { IconCreditCard, IconPix } from '@/icons';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport * as Styles from './ReviewRefundBlock.styles';\n\nconst ReviewRefundBlock = ({\n testId = 'review-refund-block',\n refundTitle = 'Refund Mode',\n totalLabel = 'Total to refund',\n amount = '10.00',\n selectedRefundMethod = 'hg_credits',\n methodOptions = {\n hg_credits: {\n image: \n {refundTitle}\n \n \n \n {methodOptions[methodSelected].image}\n \n\n \n {methodOptions[methodSelected].name} \n {totalLabel} \n \n {formatCurrency(amount)}\n \n\n \n {methodOptions[methodSelected].info}\n \n \n \n \n );\n};\n\nexport default ReviewRefundBlock;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n display: flex;\n flex-direction: column;\n min-height: 400px;\n padding: 24px;\n`;\n\nexport const DataWrapper = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.lg};\n font-weight: ${theme.font.weights.medium};\n margin: 0;\n `}\n`;\n\nexport const ItemTitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: 24px;\n margin: 34px 0px 18px 0px;\n `}\n`;\n\nexport const List = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n`;\n\nexport const ListItem = styled.li`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 24px;\n padding-left: 16px;\n position: relative;\n\n &:not(:first-child) {\n margin-top: 16px;\n }\n\n &:before {\n background-color: ${theme.palette.grey.dark};\n border-radius: 50%;\n content: '';\n height: 8px;\n left: 0;\n position: absolute;\n top: 0;\n transform: translateY(70%);\n width: 8px;\n }\n `}\n`;\n\nexport const ReasonDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 24px;\n margin: 0;\n padding-left: 16px;\n position: relative;\n `}\n`;\n","import { billingAnalytics } from '@/analytics';\nimport React, { useEffect } from 'react';\nimport { ReviewRefundBlock } from '../ReviewRefundBlock';\nimport * as Styles from './Review.styles';\n\nconst Review = ({\n title = 'Check your cancellation information:',\n signatureTitle = 'Signature',\n signature = 'Plan P',\n reasonTitle = 'Cancel reason',\n reasonOption = 'High renovation price',\n reasonDescription = '',\n testId = 'review',\n refundTitle = 'Refund method',\n totalLabel = 'Total to refund',\n methodOptions,\n refund,\n}) => {\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n\n useEffect(() => {\n subscriptionAnalytics.cancelSubscriptionPageView('5_conferir_informacoes_cancelar_imediato');\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n \n {title} \n\n \n {signatureTitle} \n \n {signature} \n \n\n {reasonTitle} \n \n {reasonOption} \n \n\n {reasonDescription && reasonDescription !== '' && (\n {reasonDescription} \n )}\n \n\n {refund && refund.total > 0 && (\n \n );\n};\n\nexport default Review;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n min-height: 400px;\n padding: 24px;\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.lg};\n font-weight: ${theme.font.weights.medium};\n margin: 0;\n `}\n`;\n\nexport const Warning = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.palette.error.ultralight};\n border-radius: 5px;\n display: inline-flex;\n flex-direction: column;\n margin-top: 24px;\n padding: 24px;\n position: relative;\n `}\n`;\n\nexport const Attention = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n\n svg {\n fill: ${theme.palette.error.primary};\n }\n `}\n`;\n\nexport const AttentionLabel = styled.span`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.bold};\n margin-left: 12px;\n `}\n`;\n\nexport const Content = styled.div``;\n\nexport const List = styled.ul`\n list-style: none;\n padding: 0 0 0 30px;\n`;\n\nexport const ListItem = styled.li`\n ${({ theme }) => css`\n position: relative;\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.regular};\n padding-left: 16px;\n\n &:not(:first-child) {\n margin-top: 16px;\n }\n\n &:before {\n background-color: ${theme.palette.grey.dark};\n border-radius: 50%;\n content: '';\n height: 8px;\n left: 0;\n position: absolute;\n top: 0;\n transform: translateY(70%);\n width: 8px;\n }\n `}\n`;\n\nexport const Links = styled.div`\n ${({ theme }) => css`\n display: flex;\n margin-left: 30px;\n\n @media (max-width: ${theme.breakpoints.md}) {\n margin: 32px 0 0 46px;\n flex-direction: column;\n }\n `}\n`;\n\nexport const LinksItem = styled.div`\n ${({ theme }) => css`\n align-items: self-end;\n display: flex;\n padding: 0 16px;\n\n &:not(:first-child) {\n border-left: 1px solid ${theme.palette.grey.darklight}\n }\n\n @media (max-width: ${theme.breakpoints.md}) {\n padding: 0;\n\n &:not(:first-child) {\n border-left: 0;\n margin-top: 24px;\n }\n }\n `}\n`;\n","import React, { useEffect } from 'react';\nimport { IconWarning } from '@/icons';\nimport { Link, Button } from '@/pages/common';\nimport * as Styles from './SignatureConfirmation.styles';\nimport { billingAnalytics } from '@/analytics';\n\nconst SignatureConfirmation = ({\n title = 'Please read the information below before confirming your cancellation:',\n attentionLabel = 'Attention',\n backupFilesLinkLabel = 'See how to back up your files',\n backupFilesLinkUrl = '',\n stopCancelLabel = \"I don't want to cancel the renewal anymore\",\n onStopCancel,\n canShowBackupLink = true,\n onClickBackupLink,\n topics = [\n <>\n Your subscription will be\n canceled immediately \n and all your data and files will be\n permanently deleted. \n ,\n ],\n testId = 'confirmation',\n}) => {\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n\n useEffect(() => {\n subscriptionAnalytics.cancelSubscriptionPageView('6_confirmar_cancelamento_imediato');\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleOnStopCancelClick = () => {\n onStopCancel && onStopCancel();\n };\n\n const hadleOnClickBackupLink = () => {\n onClickBackupLink && onClickBackupLink();\n };\n\n return (\n \n \n {title}\n \n \n \n \n {attentionLabel}\n \n \n \n\n \n {topics.map((topic, index) => (\n { topic } \n ))}\n \n\n \n {canShowBackupLink && (\n \n hadleOnClickBackupLink()}\n href={backupFilesLinkUrl}\n text={backupFilesLinkLabel}\n testId={`${testId}-backupfiles-link`}\n target=\"_blank\"\n />\n \n )}\n \n \n \n \n \n \n );\n};\n\nexport default SignatureConfirmation;\n","import styled, { css } from 'styled-components';\n\nexport const Status = styled.div`\n display: inline-flex;\n margin-top: 9px;\n`;\n\nexport const Wrapper = styled.article`\n ${({ theme, borderLeftColor, variant }) => {\n const variants = {\n oldLayout: {\n borderLeft: `5px solid ${borderLeftColor}`,\n padding: '16px 20px',\n maxHeight: 'auto',\n },\n newLayout: {\n borderLeft: 'none',\n padding: '18px 24px',\n maxHeight: '80px',\n },\n };\n\n return css`\n align-items: center;\n background: ${theme.palette.white.light};\n border-left: ${variants[variant].borderLeft};\n box-shadow: 0px 1px 3px ${theme.shadows.grey.light};\n display: flex;\n heigth: 80px;\n justify-content: space-between;\n padding: ${variants[variant].padding};\n max-height: ${variants[variant].maxHeight};\n width: 100%;\n\n @media (max-width: 1194px){\n max-height: unset;\n flex-direction: column;\n align-items: flex-start;\n }\n\n `;\n }}\n`;\n\nexport const SubscriptionInfo = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex: 1;\n min-width: 291px;\n\n @media (max-width: ${theme.breakpoints.xs}){\n min-width: unset;\n }\n `}\n`;\n\nexport const Icon = styled.div`\n ${({ color }) => css`\n display: flex;\n align-items: center;\n\n svg {\n fill: ${color};\n }\n `}\n`;\n\nexport const SubscriptionInfoDetails = styled.div`\n margin-left: 20px;\n`;\n\n\nexport const ProductName = styled.h1`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: 16px;\n font-weight: 500;\n margin-bottom: 0;\n margin-top: 0;\n max-width: 300px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 300px;\n\n\n @media (max-width:${theme.breakpoints.xs}){\n max-width: 230px;\n }\n `}\n`;\n\nexport const Domain = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.light};\n font-size: 12px;\n margin-bottom: 0;\n margin-top: 4px;\n max-width: 300px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n @media (max-width:${theme.breakpoints.xs}){\n max-width: 230px;\n }\n `}\n`;\n\nexport const MessageWrapper = styled.div`\n ${({ theme }) => css`\n margin-right: 40px;\n max-width: 465px;\n min-width: 312px;\n width: 100%;\n\n @media (max-width: 1110px){\n margin: 20px 0px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.xs}){\n max-width: 312px;\n min-width: unset;\n }\n `}\n`;\n\nexport const SubscriptionManage = styled.div`\n min-width: 176px;\n @media (max-width: 1110px){\n align-self: flex-end;\n}\n`;\n\nexport const Button = styled.button`\n ${({ theme }) => css`\n background: none;\n border: 0 none;\n text-transform: uppercase;\n font-size: 14px;\n font-weight: 500;\n color: ${theme.palette.primary.light};\n transition: color 200ms ease-in-out;\n\n &:hover {\n cursor: pointer;\n color: ${theme.palette.primary.dark};\n }\n `}\n`;\n\nexport const StepperWrapper = styled.div`\n ${({ cancelled, theme }) => css`\n margin-top: ${cancelled ? '-35px' : '-26px'};\n\n > div {\n margin: 0px 30px 0px auto;\n }\n\n @media (max-width: ${theme.breakpoints.md}){\n margin-top: 0;\n margin-bottom: 40px;\n }\n `}\n`;\n\nexport const StatusV2 = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: 132px;\n\n @media (max-width: 1194px){\n }\n padding: 22px 22px;\n`;\n\nexport const SubscriptionInfoV2 = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex: 1;\n max-width: 400px;\n\n @media (max-width: ${theme.breakpoints.xs}){\n min-width: unset;\n }\n `}\n`;\n\nexport const IconV2 = styled.div`\n ${({ color }) => css`\n align-items: start;\n display: flex;\n height: 16px;\n width: 16px;\n\n svg {\n flex: initial;\n fill: ${color};\n }\n `}\n`;\n\nexport const SubscriptionInfoDetailsV2 = styled.div`\n margin-left: 8px;\n`;\n\nexport const MessageWrapperV2 = styled.div`\n ${({ theme }) => css`\n margin-left: 34px;\n max-width: 465px;\n min-width: 312px;\n width: 100%;\n\n @media (max-width: 1110px){\n margin: 0px 0px 0px 0px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.xs}){\n max-width: 312px;\n min-width: unset;\n }\n\n @media (max-width: 1194px){\n > div {\n padding: 0px;\n\n > div {\n margin-left: 4px;\n }\n }\n }\n `}\n`;\n\nexport const SubscriptionManageV2 = styled.div`\n display: contents;\n min-width: 176px;\n\n @media (max-width: 1110px){\n align-self: flex-end;\n }\n\n @media (max-width: 1194px){\n > button {\n margin-top: 10px;\n width: 100%;\n }\n }\n`;\n","import React, { useCallback, useContext } from 'react';\nimport { ThemeContext } from 'styled-components';\nimport {\n SUBSCRIPTIONS_CATEGORY,\n SUBSCRIPTIONS_SUBSTATUS,\n} from '@/enums/billing/billing.enum';\nimport { Tag } from '@/pages/common/Tag';\nimport {\n IconAcademy,\n IconEmail,\n IconFolder,\n IconLock,\n IconServer,\n} from '@/icons';\nimport { Message } from '@/pages/common/Message';\nimport {\n Alert,\n Button,\n IconCourses,\n IconDomain,\n IconEmail as IconEmailV2,\n IconFile,\n Stepper,\n Tag as TagV2,\n IconSecurity,\n} from 'gatorcomponents';\n\nimport * as Styles from './SubscriptionItem.styles';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { useHistory } from 'react-router';\n\nconst SubscriptionItem = ({\n activeStatusLabel = 'Active',\n buttonManageSubscriptionsLabel = 'Manage Subscription',\n cancelledStatusLabel = 'Cancelled',\n domainLabel = 'Domain',\n expiredStatusLabel = 'Expired',\n onMessageClick,\n onSubscriptionManageClick,\n overdueStatusLabel = 'Overdue',\n pendingAnalysisStatusLabel = 'Pending Analysis',\n pendingPaymentStatusLabel = 'Pending Payment',\n pendingStatusLabel = 'Pending',\n registeredStatusLabel = 'Registred',\n subscription,\n suspendedStatusLabel = 'Suspended',\n testId = 'subscription-item',\n toDueStatusLabel = 'To due',\n transferredAwayStatusLabel = 'Transferred',\n enabledNewLayoutSubscriptionsPage = false,\n orderStatusLocale,\n routesLocale,\n readMoreStepper,\n paymendMethodType,\n isCreditCard,\n}) => {\n const history = useHistory();\n const isNewSuspendedMessage = subscription && subscription.status && subscription.status.toLowerCase() === 'suspended';\n const theme = useContext(ThemeContext);\n\n const {\n domain,\n id,\n productName,\n type,\n status,\n substatus,\n cancelType,\n category,\n } = subscription;\n\n const getIcon = (category) => {\n const iconsOldLayout = {\n [SUBSCRIPTIONS_CATEGORY.DOMAIN]: () => \n {!enabledNewLayoutSubscriptionsPage && (\n <>\n \n \n {getIcon(category)}\n \n \n \n {title}\n \n {type !== 'domain' && (\n \n {domain}\n \n )}\n \n \n \n \n\n \n {(subscription.message && subscription.message.text) && (\n isNewSuspendedMessage ? (\n \n \n \n {buttonManageSubscriptionsLabel}\n \n \n \n )\n }\n {\n enabledNewLayoutSubscriptionsPage && (\n <>\n \n \n {getIcon(category)}\n \n \n \n {title}\n \n {type !== 'domain' && (\n \n {domain}\n \n )}\n \n \n \n \n \n {(shouldRenderStepper && false) && (\n \n \n )}\n {(subscription.message && subscription.message.text) && (\n \n \n \n \n )\n }\n \n );\n};\n\nexport default SubscriptionItem;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n ${() => css`\n flex: 1;\n padding-bottom: 80px;\n `}\n`;\n\nexport const SubscriptionAdapter = styled.li`\n ${({ variant, theme }) => {\n const variants = {\n oldLayout: {\n marginTop: '8px',\n marginTopMD: '0px',\n\n },\n newLayout: {\n marginTop: '1px',\n marginTopMD: '8px',\n },\n };\n\n return css`\n background: ${theme.v2.colors.white.primary};\n list-style: none;\n &:not(:first-child) {\n margin-top: ${variants[variant].marginTop};\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n margin-top: ${variants[variant].marginTopMD};\n }\n\n `;\n }}\n`;\n\nexport const SkeletonWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n padding: 24px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n margin: 8px 0px\n }\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme, variant }) => {\n const variants = {\n sites: {\n borderRadius: 'none',\n height: '116px',\n margin: '0px 0px 8px 0px',\n padding: '24px 0px 24px 0px',\n width: '100%',\n marginVariants: '0px 0px 8px 0px',\n },\n subscription_list: {\n borderRadius: '8px',\n height: '64px',\n margin: '0px 24px 0px 24px',\n padding: '16px 40px 16px 14px',\n width: 'auto',\n marginVariants: '0px 24px 0px 24px',\n },\n subscription: {\n borderRadius: '8px',\n height: '64px',\n margin: '0px',\n padding: '16px 40px 16px 14px',\n width: 'auto',\n marginVariants: '0px 0px 0px 0px',\n },\n };\n\n return css`\n align-items: center;\n background-color: ${theme.v2.colors.brand.primaryDark};\n border-radius: ${variants[variant].borderRadius};\n color: ${theme.v2.colors.white.primary};\n display: flex;\n font-size: ${theme.v2.font.sizes.xs};\n height: ${variants[variant].height};\n justify-content: space-between;\n left: 0;\n margin: ${variants[variant].margin};\n padding: 0px;\n z-index: unset;\n\n > div {\n margin-right: auto;\n }\n @media (max-width: ${theme.v2.breakpoints.md}) {\n height:auto;\n > div {\n padding: ${variants[variant].padding};\n }\n }\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n width: ${variants[variant].width};\n }\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: ${variants[variant].marginVariants};\n\n }\n @media (max-width: ${theme.v2.breakpoints.xs}) {\n margin: ${variants[variant].marginVariants};\n }\n `;\n }}\n`;\n\nexport const Content = styled.div`\n ${({ theme, variant }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.brand.primaryDark};\n color: ${theme.v2.colors.white.primary};\n display: flex;\n font-size: ${theme.v2.font.sizes.xs};\n justify-content: space-between;\n left: 0;\n margin: 0px 0px 0px 0px;\n padding: 0px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n display: block;\n height:auto;\n width: 100%;\n }\n\n @media (max-width: ${theme.v2.breakpoints.xs}) {\n width: ${variant === 'sites' ? '100%' : 'auto'};\n }\n\n `}\n`;\n\nexport const GiftIcon = styled.img`\n ${({ variant }) => {\n const variants = {\n sites: {\n height: '88px',\n width: '65px',\n },\n subscription: {\n height: 'initial',\n width: '52px',\n },\n subscription_list: {\n height: 'initial',\n width: '52px',\n },\n };\n return css`\n align-self: flex-end;\n height: ${variants[variant].height};\n object-fit: contain;\n width: ${variants[variant].width};\n\n `;\n }}\n`;\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n max-width: fit-content;\n margin: 0px 0px 0px 8px;\n color: ${theme.v2.colors.white.primary};\n flex: 1;\n gap: 242px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n flex-direction: column;\n gap: 2px;\n margin-bottom: 8px;\n }\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 0px 0px 0px 0px;\n }\n `}\n`;\n\nexport const ContentTitle = styled.div`\n display:flex;\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.white.primary};\n font-family: ${theme.v2.font.family.secondary};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.bold};\n margin-bottom: 8px;\n margin-top:auto;\n max-width: fit-content;\n letter-spacing: 0.01px;\n @media (max-width: ${theme.v2.breakpoints.md}) {\n text-align: center;\n }\n `}\n`;\n\nexport const Discount = styled.text`\n${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activePure};\n font-weight: ${theme.v2.font.weights.bold};\n margin-left: 4px;\n`}\n`;\n\nexport const ContentDescription = styled.div`\n width: 100%;\n @media (max-width: 1260px) {\n display:block;\n }\n`;\n\nexport const Description = styled.p`\n ${({ theme, variant }) => css`\n color: ${theme.v2.colors.white.primary};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${variant === 'sites' ? theme.v2.font.sizes.xxs : theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 1.4;\n margin: 0px;\n opacity: 1;\n text-align: start;\n width: max-content;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n width: auto;\n }\n\n `}\n`;\n\nexport const ContentButton = styled.div`\n${({ theme }) => css`\n margin: 0px 0px 0px 24px;\n > button {\n background: transparent;\n border-color: ${theme.v2.colors.feedback.activePure};\n color: ${theme.v2.colors.feedback.activePure};\n font-size: ${theme.v2.font.sizes.xxs};\n }\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 16px 0px 0px 0px;\n }\n `}\n `;\n\nexport const CloseButton = styled.button`\n${({ theme }) => css`\n align-items: center;\n align-self: flex-start;\n background-color: unset;\n border: unset;\n color: ${theme.v2.colors.white.primary};\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n margin: 16px 8px 8px 0px;\n object-fit: contain;\n opacity: 1;\n padding: 0;\n width: 24px;\n `}\n`;\n","import React, { useEffect, useState } from 'react';\nimport { IconClose } from '@/icons';\nimport * as Style from './DiscountOfferBanner.styles';\nimport discountGift from '@/media/subscriptions/retention/ilustra_88px.svg';\nimport smallDiscountGift from '@/media/subscriptions/retention/ilustra_48px.svg';\nimport { Button } from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { useHistory } from 'react-router';\nimport { billingAnalytics } from '@/analytics';\n\nconst DiscountOfferBanner = ({\n subscription = null,\n origin = '',\n handleAction = null,\n}) => {\n const { billing: billingLocale, routes: routesLocale } = useLocale();\n const { offerDiscountBanner: offerDiscountBannerLocale } = billingLocale;\n const history = useHistory();\n const hasOnlyOneSubscription = subscription !== null;\n const [visible, setVisible] = useState(true);\n\n const {\n descriptionsToSitePage,\n descriptionToSubscripionsPage,\n title,\n buttonLabel,\n } = offerDiscountBannerLocale;\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n\n useEffect(() => {\n subscriptionAnalytics.bannerDiscountDisplay(origin.toUpperCase());\n }, []);\n\n const handleClick = () => {\n if (origin === 'sites' || origin === 'subscription_list') {\n let url = routesLocale.subscriptions;\n\n if (subscription != null) {\n url = `${routesLocale.subscriptions}${routesLocale.manageSubscription}/${subscription.id}/${subscription.type}?modal=true`;\n }\n\n setVisible(!visible);\n subscriptionAnalytics.bannerDiscountClick(origin.toUpperCase());\n\n handleAction && handleAction();\n\n history.push(url);\n } else if (origin === 'subscription') {\n subscriptionAnalytics.bannerDiscountClick(origin.toUpperCase());\n handleAction && handleAction();\n }\n };\n\n const handleClose = () => {\n setVisible(false);\n subscriptionAnalytics.bannerDiscountClose(origin.toUpperCase());\n };\n\n return (\n visible\n && (\n <>\n \n \n \n {origin === 'sites' && (\n \n \n {title[0]}\n {title[1]} \n \n \n )}\n \n {origin === 'sites' && (\n <>\n \n {hasOnlyOneSubscription && (\n <>\n {descriptionsToSitePage[2]}\n \n {subscription.name}\n \n {descriptionsToSitePage[3]}\n \n )}\n {!hasOnlyOneSubscription && (\n <>\n {descriptionsToSitePage[0]}\n \n {descriptionsToSitePage[1]}\n \n \n )}\n {descriptionsToSitePage[4]}\n \n \n {descriptionsToSitePage[5]}\n \n \n )}\n\n {origin.includes('subscription') && (\n \n {descriptionToSubscripionsPage}\n \n )}\n\n \n\n \n \n \n \n\n {origin === 'sites' && (\n \n \n )}\n\n \n \n )\n );\n};\n\nexport default DiscountOfferBanner;\n","import PropTypes from 'prop-types';\n\nexport const PaymentModalProps = {\n cancelRenewalDescriptionLabel: PropTypes.string,\n cancelRenewalLabel: PropTypes.string,\n cancelImmediateDescriptionLabel: PropTypes.string,\n cancelImmediateLabel: PropTypes.string,\n continueButtonLabel: PropTypes.string,\n descriptionLabel: PropTypes.string,\n onCloseClick: PropTypes.func,\n onContinueButtonClick: PropTypes.func,\n onQuitButtonClick: PropTypes.func,\n quitButtonLabel: PropTypes.string,\n titleLabel: PropTypes.string,\n};\n\nexport const PaymentMethods = {\n CREDIT_CARD: 'CREDIT_CARD',\n TICKET: 'BOLETO',\n PAY_PAL: 'PAY_PAL',\n};\n\nexport const OriginCalling = {\n INVOICES_MANAGER: 'INVOICES_MANAGER',\n SUBSCRIPTION_LIST: 'SUBSCRIPTION_LIST',\n SUBSCRIPTION_MANAGER: 'SUBSCRIPTION_MANAGER',\n SITELOCK_UPGRADE: 'SITELOCK_UPGRADE',\n};\n\nexport const DiscountType = {\n RENEWAL: 'RENEWAL',\n SAVERS35OFF: 'SAVERS35OFF',\n RETENTION: 'HOSTINGRETENTION',\n};\n","import React from 'react';\nimport { SubscriptionModal, ActivateRenewModal } from '@/components/billing';\nimport { SubscriptionItem } from '../SubscriptionItem';\nimport * as Style from './SubscriptionList.styles';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { DiscountOfferBanner } from '../../subscriptions/DiscountOfferBanner';\nimport { DiscountType } from '../../subscriptions/PaymentModal/PaymentModal.types';\nimport { Skeleton } from 'gatorcomponents';\n\nconst SubscriptionList = ({\n activateSubscription = null,\n activeStatusLabel = 'Active',\n buttonManageSubscriptionsLabel = 'Manage Subscription',\n cancelledStatusLabel = 'Cancelled',\n domainLabel = 'Domain',\n expiredStatusLabel = 'Expired',\n handleActivateSubscription,\n handleCloseRenewModal,\n loading = false,\n onMessageClick,\n modal,\n modalActiveRenewalButtonLabel = 'Confirm activation',\n modalActiveRenewalContent = 'Payment will be charged at the end of the cycle, preventing your product from being canceled and your data and files from being permanently deleted.',\n modalActiveRenewalTitle = 'Do you want to activate subscription renewal?',\n modalContent,\n onHandleManageSubscription,\n onModalClose,\n overdueStatusLabel = 'Vencida',\n pendingAnalysisStatusLabel = 'Pending Analysis',\n pendingPaymentStatusLabel = 'Pending Payment',\n pendingStatusLabel = 'Pending',\n registeredStatusLabel = 'Registred',\n subscriptions = [],\n suspendedStatusLabel = 'Suspended',\n toDueStatusLabel = 'À Vencer',\n transferredAwayStatusLabel = 'Transferred',\n openPreChatCancelFlow,\n enabledNewLayoutSubscriptionsPage = false,\n enabledDiscountOfferBanner = false,\n orderStatusLocale,\n routesLocale,\n readMoreStepper,\n}) => {\n const { billing: billingLocale } = useLocale();\n const enabledDiscountOffer = subscription => subscription.discount && subscription.discount.type === DiscountType.RENEWAL;\n\n const {\n paymentMethods: paymentMethodsLocale,\n } = billingLocale;\n\n const handleOnModalCloseClick = () => {\n openPreChatCancelFlow && openPreChatCancelFlow();\n onModalClose && onModalClose();\n };\n\n return (\n \n\n {modal && (\n \n \n ) : subscriptions.map((subscription) => {\n const {\n id, type,\n } = subscription;\n\n const key = `subscription-item-${id}-${type.toLowerCase()}`;\n const testId = `billing-subscriptions-item-${type.toLowerCase()}-${id}`;\n\n const paymentMethod = paymentMethodsLocale[subscription.paymentMethod];\n const isCreditCard = paymentMethod === 'Cartão de crédito';\n const paymendMethodType = isCreditCard ? 'creditcard' : 'other';\n\n return (\n \n \n );\n })}\n \n );\n};\n\nexport default SubscriptionList;\n","import styled, { css } from 'styled-components';\n\nexport const IconWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n align-self: center;\n background-color: ${theme.v2.colors.feedback.activePure};\n border-radius: 50%;\n display: flex;\n height: 56px;\n justify-content: center;\n margin-top: 48px;\n width: 56px;\n `}\n`;\n\nexport const ContentWrapper = styled.div`\n align-self: center;\n margin-top: 24px;\n`;\n\nexport const ModalTitle = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 32px;\n margin: 0px 0px 24px 0px;\n text-align: center;\n `}\n`;\n\nexport const ModalText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 16px;\n letter-spacing: 0.01px;\n line-height: 24px;\n margin: 0;\n text-align: center;\n `}\n`;\n\nexport const FooterWrapper = styled.div`\n align-self: center;\n display: flex;\n flex-direction: column;\n margin: 24px 0px 0px;\n\n & button {\n height: 48px;\n border-radius: 24px;\n width: 100%;\n }\n\n & button:first-child {\n margin-bottom: 6px;\n }\n`;\n","import React, { useContext } from 'react';\nimport { ThemeContext } from 'styled-components';\nimport { Modal } from '@/pages/common/Modal';\nimport { IconCheck } from '@/icons';\nimport { formatDate } from '@/utils/Formatters/formatDate';\nimport * as Styles from './SubscriptionModal.styles';\nimport { Button } from '@/pages/common/v1';\n\nconst SubscriptionModal = ({\n displayModal = false,\n modalContent,\n onClose,\n date = '2021-05-09',\n testId = 'subscription-modal',\n handleActivateSubscription,\n subscription,\n}) => {\n const theme = useContext(ThemeContext);\n\n const handleOnClose = () => {\n onClose && onClose();\n };\n\n const handleOnActivateRenew = () => {\n if (handleActivateSubscription) {\n handleActivateSubscription(subscription);\n handleOnClose();\n }\n };\n\n return (\n displayModal && (\n \n \n \n\n \n {modalContent.title} \n {`${modalContent.firstLinecontent} ${formatDate(date)}.`} \n {modalContent.secondLinecontent} \n \n\n \n \n \n )\n );\n};\n\nexport default SubscriptionModal;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n ${({ theme }) => css`\n font-family: ${theme.v1.font.family.primary};\n background-color: ${theme.v1.color.white.primary};\n `}\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: 22px;\n margin: 0;\n `}\n`;\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-wrap: wrap;\n margin-top: 24px;\n gap: 40px;\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n flex-direction: column;\n gap: 24px;\n }\n `}\n`;\n\nexport const Item = styled.div`\n ${({ theme, align }) => css`\n display: flex;\n flex-direction: column;\n justify-content: ${align === 'initial' ? 'initial' : 'center'};\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n &:not(:first-child) {\n margin: 0;\n }\n }\n `}\n`;\n\nexport const Label = styled.span`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.label};\n font-size: 12px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 16px;\n `}\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: 22px;\n margin-top: 4px;\n `}\n`;\n\nexport const TagWrapper = styled.span`\n margin-top: 4px;\n`;\n\nexport const TooltipWrapper = styled.span`\n margin-left: 8px;\n`;\n\nexport const ReactivationWrapper = styled.div`\n align-items: center;\n display: flex;\n`;\n\nexport const StepperWrapper = styled.div`\n margin: 26px 0px 0px;\n max-width: 494px\n`;\n","import React from 'react';\nimport { Button, Alert, Stepper } from 'gatorcomponents';\nimport { Tag } from '@/pages/common/Tag';\nimport * as Styles from './SubscriptionResume.styles';\nimport { SubscriptionResumeProps } from './SubscriptionResume.types';\nimport { IconInfo } from '@/icons';\nimport { Tooltip } from '@/pages/common/v1';\nimport { format, parseISO } from 'date-fns';\nimport { isBRServer } from '@/utils/Validators/validation';\n\nconst SubscriptionResume = ({\n loading = false,\n paymentCycleLabel = 'Subscription cycle',\n paymentCycleText = '',\n productNameLabel = 'Product',\n productNameText = '',\n registerDateLabel = 'Contract date',\n registerDateText = '',\n resumeTitleLabel = 'Subscription Summary',\n showPaymentCycle = false,\n statusBackgroundColor = '#a4a4a4',\n statusLabel = 'Status',\n statusText = '',\n statusTextColor = '#ffffff',\n reactivationButtonLabel = '',\n reactivationTooltipLabel = '',\n trustPeriodLabel = '',\n trustPeriodDescriptionLabel = '',\n onDisplayReactivationModal,\n trustReactivationAvailable = false,\n overrideDate,\n trustReactivationOnTheCycle,\n alreadyReactivatedTooltip,\n shouldRenderAlreadyReactivatedTooltip,\n orderUnderReview,\n summary,\n orderStatusLocale,\n substatus,\n paymentMethod,\n registerDate,\n isEcommercePlus = false,\n enabledEcommercePlusCycleChange = false,\n ecommercePlusChangeCycleLabel = '',\n onEcommercePlusCycleChangeClick = () => {},\n}) => {\n const isCreditCard = paymentMethod === 'Cartão de crédito';\n const paymendMethodType = isCreditCard ? 'creditcard' : 'other';\n const buttonProps = () => ({\n onClick: onDisplayReactivationModal,\n label: reactivationButtonLabel,\n testId: 'subscription-reactivation-button',\n disabled: trustReactivationOnTheCycle,\n });\n const buttonEcommercePlusProps = () => ({\n onClick: onEcommercePlusCycleChangeClick,\n label: (loading || !ecommercePlusChangeCycleLabel) ? '...' : ecommercePlusChangeCycleLabel,\n testId: 'ecommerce-plus-change-cycle-button',\n });\n\n const hasDate = date => date && date !== '0000-00-00 00:00:00';\n\n const showEcommercePlusCycleChange = substatus === 'active' && isEcommercePlus && enabledEcommercePlusCycleChange;\n\n const getAnalysisStatus = () => {\n if (isCreditCard && hasDate(orderUnderReview.date_order) && orderUnderReview.status === 'pending_analysis') {\n return 'ongoing';\n }\n\n if (!isCreditCard && (!hasDate(orderUnderReview.date_paid) || !hasDate(orderUnderReview.date_reg_analysis))) {\n return 'pending';\n }\n\n if (orderUnderReview.status === 'cancelled') {\n return 'finished';\n }\n\n return 'ongoing';\n };\n\n const getStepperProps = () => {\n const defaultProps = {\n direction: 'column',\n statusColor: ((orderUnderReview && orderUnderReview.status === 'pending_analysis')\n || substatus === 'pending') ? 'pendingMedium' : 'lowLight',\n };\n\n const itemsWithOrder = orderUnderReview && [\n {\n id: 0,\n status: 'finished',\n text: {\n title: orderStatusLocale.buy.title,\n content: orderStatusLocale.buy.content[paymendMethodType]({ paymentMethod }),\n lightContent: orderStatusLocale.buy.lightContent({\n date: format(new Date(orderUnderReview.date_order), 'dd/MM/yyyy'),\n time: format(new Date(orderUnderReview.date_order), 'HH:mm'),\n }),\n },\n },\n {\n id: 1,\n status: (hasDate(orderUnderReview.date_paid) || isCreditCard) ? 'finished' : 'ongoing',\n text: {\n title: (hasDate(orderUnderReview.date_paid) || isCreditCard)\n ? orderStatusLocale.paid.finished.title[paymendMethodType]\n : orderStatusLocale.paid.ongoing.title,\n content: (hasDate(orderUnderReview.date_paid) || isCreditCard)\n ? orderStatusLocale.paid.finished.content[paymendMethodType]\n : orderStatusLocale.paid.ongoing.content,\n lightContent: hasDate(orderUnderReview.date_paid)\n ? orderStatusLocale.paid.finished.lightContent({\n date: format(new Date(orderUnderReview.date_paid), 'dd/MM/yyyy'),\n time: format(new Date(orderUnderReview.date_paid), 'HH:mm'),\n }) : null,\n },\n },\n {\n id: 2,\n status: getAnalysisStatus(),\n text: {\n title: orderStatusLocale.analysing[hasDate(orderUnderReview.date_update_analysis) ? 'cancelled' : 'pending'].title,\n lightTitle: orderStatusLocale.analysing[hasDate(orderUnderReview.date_update_analysis) ? 'cancelled' : 'pending'].lightTitle,\n content: orderStatusLocale.analysing[hasDate(orderUnderReview.date_update_analysis) ? 'cancelled' : 'pending'].content,\n lightContent: hasDate(orderUnderReview.date_update_analysis)\n ? orderStatusLocale.analysing.cancelled.lightContent({\n date: format(new Date(orderUnderReview.date_update_analysis), 'dd/MM/yyyy'),\n time: format(new Date(orderUnderReview.date_update_analysis), 'HH:mm'),\n })\n : orderStatusLocale.analysing.pending.lightContent,\n },\n },\n {\n id: 3,\n status: orderUnderReview.status === 'cancelled' ? 'error' : 'pending',\n text: {\n title: orderUnderReview.status === 'cancelled'\n ? orderStatusLocale.finalStatus.cancelled.title\n : orderStatusLocale.finalStatus.pending.title,\n lightTitle: orderUnderReview.status === 'cancelled' ? null : orderStatusLocale.finalStatus.pending.lightTitle,\n content: orderUnderReview.status === 'cancelled'\n ? orderStatusLocale.finalStatus.cancelled.content[paymendMethodType]({ paymentMethod, email: summary.email })\n : null,\n lightContent: orderUnderReview.status === 'cancelled'\n ? orderStatusLocale.finalStatus.cancelled.lightContent({\n date: format(new Date(orderUnderReview.date_update_analysis), 'dd/MM/yyyy'),\n time: format(new Date(orderUnderReview.date_update_analysis), 'HH:mm'),\n }) : orderStatusLocale.finalStatus.pending.lightContent[paymendMethodType]({\n email: summary.email,\n }),\n },\n },\n ];\n\n const itemsWithoutOrder = [\n {\n id: 0,\n status: 'finished',\n text: {\n title: orderStatusLocale.buy.title,\n content: orderStatusLocale.buy.content[paymendMethodType]({ paymentMethod }),\n lightContent: orderStatusLocale.buy.lightContent({\n date: registerDate && format(parseISO(registerDate), 'dd/MM/yyyy'),\n }),\n },\n },\n {\n id: 1,\n status: 'ongoing',\n text: {\n title: orderStatusLocale.paid.ongoing.title,\n content: orderStatusLocale.paid.ongoing.content,\n },\n },\n {\n id: 2,\n status: 'pending',\n text: {\n title: orderStatusLocale.analysing.pending.title,\n lightTitle: orderStatusLocale.analysing.pending.lightTitle,\n content: orderStatusLocale.analysing.pending.content,\n lightContent: orderStatusLocale.analysing.pending.lightContent,\n },\n },\n {\n id: 3,\n status: 'pending',\n text: {\n title: orderStatusLocale.finalStatus.pending.title,\n lightTitle: orderStatusLocale.finalStatus.pending.lightTitle,\n lightContent: orderStatusLocale.finalStatus.pending.lightContent[paymendMethodType]({\n email: summary.email,\n }),\n },\n },\n ];\n\n const items = orderUnderReview ? itemsWithOrder : itemsWithoutOrder;\n\n\n return {\n ...defaultProps,\n items,\n };\n };\n\n const shouldRenderStepper = !loading\n && (substatus === 'pending' || substatus === 'cancelled')\n && true\n && isBRServer;\n\n return (\n \n \n {resumeTitleLabel}\n \n\n \n\n \n \n {productNameLabel}\n \n \n {(loading || !productNameText) ? '...' : productNameText}\n \n \n\n \n \n {statusLabel}\n \n {(loading || !statusText)\n ? (\n \n ...\n \n )\n : (\n \n \n )\n }\n \n\n \n \n {registerDateLabel}\n \n \n {(loading || !registerDateText) ? '...' : registerDateText}\n \n \n\n {showPaymentCycle && (\n \n \n {paymentCycleLabel}\n \n \n {(loading || !paymentCycleText) ? '...' : paymentCycleText}\n \n \n )}\n\n {showEcommercePlusCycleChange && (\n \n \n )}\n\n {!loading && statusText && (\n <>\n {(trustReactivationAvailable || (trustReactivationOnTheCycle && shouldRenderAlreadyReactivatedTooltip)) && (\n \n \n {trustReactivationOnTheCycle\n ? (\n \n \n \n \n )}\n \n \n )}\n {!trustReactivationAvailable && overrideDate && (\n \n \n )}\n \n )}\n \n\n\n {shouldRenderStepper && (\n \n \n )}\n\n \n );\n};\n\nSubscriptionResume.propTypes = SubscriptionResumeProps;\n\nexport default SubscriptionResume;\n","import PropTypes from 'prop-types';\n\nexport const SubscriptionResumeProps = {\n loading: PropTypes.bool,\n onPlanButtonClick: PropTypes.func,\n paymentCycleLabel: PropTypes.string,\n paymentCycleText: PropTypes.string,\n planButtonDisabled: PropTypes.bool,\n planButtonLabel: PropTypes.string,\n productNameLabel: PropTypes.string,\n productNameText: PropTypes.string,\n registerDateLabel: PropTypes.string,\n registerDateText: PropTypes.string,\n resumeTitleLabel: PropTypes.string,\n showPaymentCycle: PropTypes.bool,\n showPlanButton: PropTypes.bool,\n statusBackgroundColor: PropTypes.string,\n statusLabel: PropTypes.string,\n statusText: PropTypes.string,\n statusTextColor: PropTypes.string,\n};\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n ${({ theme }) => css`\n font-family: ${theme.v1.font.family.primary};\n background-color: ${theme.v1.color.white.primary};\n `}\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: 22px;\n margin: 0;\n `}\n`;\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n display: flex;\n margin-top: 24px;\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 8px;\n margin-top: 24px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n margin-right: 12px;\n > svg {\n height: 24px;\n width: 58px;\n }\n }\n `}\n`;\nexport const Item = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:not(:first-child) {\n margin-left: 40px;\n }\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n &:not(:first-child) {\n margin: 24px 0 0 0;\n }\n }\n `}\n`;\n\nexport const ItemDiscount = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:not(:first-child) {\n margin-left: 40px;\n }\n\n &:nth-child(2) {\n width:calc( + 160px);\n }\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n &:not(:first-child) {\n margin: 24px 0 0 0;\n }\n }\n `}\n`;\n\nexport const Label = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowPure};\n display: inline-flex;\n font-size: 12px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 16px;\n `}\n`;\n\nexport const TooltipWrapper = styled.span`\n margin-left: 8px;\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: 22px;\n margin-top: 4px;\n `}\n`;\n\nexport const TagWrapper = styled.span`\n margin-top: 4px;\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n display: flex;\n &:not(:first-child) {\n margin-top: 24px;\n }\n @media (max-width: ${theme.v2.breakpoints.md}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const Item = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:not(:first-child) {\n margin-left: 40px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n &:not(:first-child) {\n margin: 24px 0 0 0;\n }\n }\n `}\n`;\n\nexport const Label = styled.span`\n ${({ theme, enabledStrongText }) => css`\n align-items: center;\n color: ${!enabledStrongText ? theme.v2.colors.neutral.lowPure : theme.v2.colors.neutral.lowLight};\n display: inline-flex;\n font-size: 12px;\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 16px;\n `}\n`;\n\nexport const TooltipWrapper = styled.span`\n margin-left: 8px;\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n display: flex;\n font-size: 14px;\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 22px;\n margin-top: 4px;\n\n > div {\n position: relative;\n }\n\n > strong {\n margin: 0px 10px 0px 5px;\n color: ${theme.v2.colors.neutral.lowPure};\n }\n\n > p {\n margin: 0px 8px 0px 5px;\n color: ${theme.v2.colors.neutral.lowPure};\n }\n\n `}\n`;\n\nexport const LineThrough = styled.span`\n text-decoration: line-through;\n`;\n\nexport const TagWrapper = styled.span`\n${({ theme }) => css`\n\n> div {\n background-color: ${theme.v2.colors.feedback.activePure};\n border-radius: 4px;\n color: ${theme.v2.colors.white.primary};\n font-weight: ${theme.v2.font.weights.bold};\n padding: 4px 8px;\n position: unset\n\n}\n`}\n`;\n","import PropTypes from 'prop-types';\n\nexport const SubscriptionRenewalDataProps = {\n installmentsAmountLabel: PropTypes.string,\n installmentsAmountText: PropTypes.string,\n installmentsPaymentFormLabel: PropTypes.string,\n installmentsPaymentFormText: PropTypes.string,\n installmentsPaymentFormTooltipText: PropTypes.string,\n loading: PropTypes.bool,\n nextRenovationDateLabel: PropTypes.string,\n nextRenovationDateText: PropTypes.string,\n paymentMethodLabel: PropTypes.string,\n paymentMethodText: PropTypes.string,\n paymentMethodTooltipText: PropTypes.string,\n renewalDataTitleLabel: PropTypes.string,\n renovationAmountLabel: PropTypes.string,\n renovationAmountText: PropTypes.string,\n showInstallments: PropTypes.bool,\n};\n","import React from 'react';\nimport * as Styles from './DiscountBlock.styles';\nimport { Tag } from 'gatorcomponents';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport useLocale from '@/hooks/useLocale/useLocale';\n\nconst DiscountBlock = ({\n loading = false,\n renovationAmountText = '',\n discount = null,\n testId = 'discount-block',\n enabledStrongText = true,\n installmentsAmountText = '',\n}) => {\n const { billing: billingLocale } = useLocale();\n const {\n manageSubscriptionActiveRenewalModal: manageSubscriptionActiveRenewalModalLocale,\n manageSubscription: manageSubscriptionLocale,\n } = billingLocale;\n\n return (\n \n \n \n {installmentsAmountText !== '' ? installmentsAmountText : manageSubscriptionLocale.installmentsAmountLabel}\n \n \n \n {(loading || !renovationAmountText) ? '...' : renovationAmountText}\n \n <>\n {enabledStrongText && (\n \n {formatCurrency(discount.amount)}\n *\n \n )}\n {!enabledStrongText && (\n \n {formatCurrency(discount.amount)}\n
\n )}\n \n \n \n \n \n \n );\n};\nexport default DiscountBlock;\n","import React from 'react';\n\nimport * as Styles from './SubscriptionRenewalData.styles';\nimport { SubscriptionRenewalDataProps } from './SubscriptionRenewalData.types';\nimport { Tooltip } from '@/pages/common/v1/Tooltip';\nimport { IconDoubt } from '@/icons/IconDoubt';\nimport { Button, IconInfo } from 'gatorcomponents';\nimport { DiscountType } from '@/components/billing/subscriptions/PaymentModal/PaymentModal.types';\nimport { DiscountBlock } from '../../DiscountBlock';\nimport { isMobile } from '@/utils/Validators/validation';\n\nconst SubscriptionRenewalData = ({\n installmentsAmountLabel = 'Installments amount',\n installmentsAmountText = '',\n installmentsPaymentFormLabel = 'Payment form',\n installmentsPaymentFormText = '',\n installmentsPaymentFormTooltipText = 'Credit Card and PayPal methods process payment immediately. Boleto can take up to 72 hours to clear.',\n loading = false,\n nextRenovationDateLabel = 'Next renovation',\n nextRenovationDateText = '',\n paymentMethodLabel = 'Payment method',\n paymentMethodText = '',\n paymentMethodTooltipText = 'The installment options are defined according to the value of the product and its payment cycle.',\n renewalDataTitleLabel = 'Renewal data',\n renovationAmountLabel = 'Renovation amount',\n renovationAmountText = '',\n renovationInfoText = '',\n showInstallments = false,\n enabledDiscountRetention = false,\n discount = null,\n paymantLink = 'Pagar fatura.',\n onDisplayModalPayment = null,\n}) => (\n \n\n \n {renewalDataTitleLabel}\n \n\n \n\n \n \n {nextRenovationDateLabel}\n \n \n {(loading || !nextRenovationDateText) ? '...' : nextRenovationDateText}\n \n \n\n\n {(!discount || (discount && discount.type !== DiscountType.RETENTION)) && (\n \n \n {renovationAmountLabel}\n \n \n {(loading || !renovationAmountText) ? '...' : renovationAmountText}\n \n \n )}\n\n {enabledDiscountRetention && discount && discount.type === DiscountType.RETENTION && (\n \n \n )}\n\n \n \n {paymentMethodLabel}\n \n \n \n \n \n {(loading || !paymentMethodText) ? '...' : paymentMethodText}\n \n \n\n {showInstallments && (\n \n \n {installmentsPaymentFormLabel}\n \n \n \n \n \n {(loading || !installmentsPaymentFormText) ? '...' : installmentsPaymentFormText}\n \n \n )}\n\n {showInstallments && (\n \n \n {installmentsAmountLabel}\n \n \n {(loading || !installmentsAmountText) ? '...' : installmentsAmountText}\n \n \n )}\n \n {\n enabledDiscountRetention && discount && discount.type === DiscountType.RETENTION && (\n \n \n {renovationInfoText}\n {isMobile && (\n { onDisplayModalPayment && onDisplayModalPayment(); }}\n label={paymantLink}\n testId=\"link-invoice-modal-payment\"\n />\n )}\n \n \n )\n }\n \n);\n\nSubscriptionRenewalData.propTypes = SubscriptionRenewalDataProps;\n\nexport default SubscriptionRenewalData;\n","import styled, { css } from 'styled-components';\nimport { Button } from '@/pages/common/v1/Button/Button.styles';\n\nexport const Wrapper = styled.section`\n ${({ theme }) => css`\n font-family: ${theme.v1.font.family.primary};\n background-color: ${theme.v1.color.white.primary};\n `}\n`;\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n display: flex;\n margin-top: 24px;\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const Item = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n justify-content: 'center';\n\n ${Button} {\n height: 28px;\n }\n\n &:not(:first-child) {\n margin-left: 24px;\n }\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n &:not(:first-child) {\n margin: 24px 0 0 0;\n }\n }\n `}\n`;\n","import React, { useContext } from 'react';\nimport * as Styles from './SubscriptionControls.styles';\nimport { SubscriptionControlsProps } from './SubscriptionControls.types';\nimport { ThemeContext } from 'styled-components';\nimport { Button } from 'gatorcomponents';\n\nconst SubscriptionControls = ({\n activeSubscriptionRenewalButtonLabel = 'Activate subscription renewal',\n cancelSubscriptionButtonLabel = 'Cancel subscription',\n cancelSubscriptionImmediatelyButtonLabel = 'Cancel immediately',\n loading = true,\n onActiveSubscriptionRenewalClick,\n onCancelSubscriptionClick,\n onCancelSubscriptionImmediatelyClick,\n onSwitchPaymentMethodClick,\n showActiveSubscriptionRenewalButton = false,\n showCancelSubscriptionButton = false,\n showCancelSubscriptionImmediatelyButton = false,\n showSwitchPaymentMethodButton = false,\n showPaymentInvoceButton = false,\n switchPaymentMethodButtonLabel = 'Change payment method',\n payInvoiceButtonLabel = 'Pay invoice',\n onDisplayModalPayment,\n invoiceId = '',\n showPlanButton = false,\n planButtonLabel = 'Change plan and/or payment cycle',\n onPlanButtonClick,\n}) => {\n const theme = useContext(ThemeContext);\n\n const handleOnActiveSubscriptionRenewalClick = (event) => {\n onActiveSubscriptionRenewalClick && onActiveSubscriptionRenewalClick(event);\n };\n\n const handleOnSwitchPaymentMethodClick = (event) => {\n onSwitchPaymentMethodClick && onSwitchPaymentMethodClick(event);\n };\n\n const handleOnshowCancelSubscriptionButtonClick = (event) => {\n onCancelSubscriptionClick && onCancelSubscriptionClick(event);\n };\n\n const handleOnCancelSubscriptionImmediatelyClick = (event) => {\n onCancelSubscriptionImmediatelyClick && onCancelSubscriptionImmediatelyClick(event);\n };\n\n const handleOnPlanButtonClick = (event) => {\n onPlanButtonClick && onPlanButtonClick(event);\n };\n\n return (\n \n \n\n {showActiveSubscriptionRenewalButton && (\n \n \n )}\n\n {showPaymentInvoceButton && invoiceId && (\n \n \n )}\n\n {showPlanButton && (\n \n \n )}\n\n {showSwitchPaymentMethodButton && !showActiveSubscriptionRenewalButton && !invoiceId && (\n \n \n )}\n\n {showCancelSubscriptionButton && (\n \n \n )}\n\n {showCancelSubscriptionImmediatelyButton && (\n \n \n )}\n\n \n \n );\n};\n\nSubscriptionControls.propTypes = SubscriptionControlsProps;\n\nexport default SubscriptionControls;\n","import PropTypes from 'prop-types';\n\nexport const SubscriptionControlsProps = {\n activeSubscriptionRenewalButtonLabel: PropTypes.string,\n cancelSubscriptionButtonLabel: PropTypes.string,\n cancelSubscriptionImmediatelyButtonLabel: PropTypes.string,\n loading: PropTypes.bool,\n onActiveSubscriptionRenewalClick: PropTypes.func,\n onCancelSubscriptionClick: PropTypes.func,\n onCancelSubscriptionImmediatelyClick: PropTypes.func,\n onSwitchPaymentMethodClick: PropTypes.func,\n showActiveSubscriptionRenewalButton: PropTypes.bool,\n showCancelSubscriptionButton: PropTypes.bool,\n showCancelSubscriptionImmediatelyButton: PropTypes.bool,\n showSwitchPaymentMethodButton: PropTypes.bool,\n switchPaymentMethodButtonLabel: PropTypes.string,\n};\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n display: flex;\n flex-direction: column;\n min-height: 400px;\n padding: 24px;\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.lg};\n font-weight: ${theme.font.weights.medium};\n margin: 0px 0px 31px 0px;\n `}\n`;\n\nexport const Row = styled.div`\n ${() => css`\n display: flex;\n flex-direction: row;\n\n @media (max-width:768px){\n flex-direction: column;\n }\n `}\n`;\n","import React, { useEffect } from 'react';\nimport * as Styles from './WithRefund.styles';\nimport { RefundValueBlock, RefundTipBlock } from '../index';\nimport { RefundMethodsBlock } from '../RefundMethodsBlock';\nimport { REFUND_PAYMENT_METHODS } from '@/enums/billing/billing.enum';\nimport { billingAnalytics } from '@/analytics';\n\nconst WithRefund = ({\n totalLabel = 'Total to refund',\n refundPolitics = 'Read our refund politics',\n onRefundPoliticsClick,\n tipTitle = 'Tip:',\n tip = 'For this amount, it is more advantageous to use the subscription until the end of the cycle, on 09/01/2022.',\n stopCancelLabel = 'Give up Cancellation',\n handleStopCancel,\n title = 'See the refund possibilities available for your subscription:',\n testId = 'refund',\n selectMethodTitle = 'Select a refund mode:',\n methodOptions,\n onChangeSelected,\n refund = null,\n}) => {\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n\n useEffect(() => {\n subscriptionAnalytics.cancelSubscriptionPageView('4_visualizar_reembolso_cancelar_imediato');\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n \n \n {title}\n \n\n \n \n\n \n\n );\n};\n\nexport default WithRefund;\n","import React, { } from 'react';\nimport * as Styles from './RetentionBenefitHandler.styles';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { Button, Header } from '@/pages/common';\nimport { Button as ButtonV1 } from '@/pages/common/v1/Button';\nimport { IconArrowForward, IconFeaturedStar } from '@/icons';\nimport { Loader } from '@/pages/common/v1/Loader';\nimport { InvoiceModal } from '../../components';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport useLocale from '@/hooks/useLocale';\nimport { useHistory } from 'react-router';\n\nconst RetentionBenefitHandler = ({\n currentItem = {},\n headerProps = {},\n colorText = '#4A4A4A',\n invoiceModalIsOpen = false,\n isRenewCanceling = false,\n invoiceIsLoading = false,\n acceptBenefitClick,\n cancelButtonClick,\n closeInvoiceModal,\n redirectToInvoice,\n reactivationData = null,\n}) => {\n const history = useHistory();\n const { billing: billingLocale, routes: routesLocale } = useLocale();\n const { manageSubscriptionBenefit } = billingLocale;\n const benefitCycleInfos = currentItem && currentItem.paymentCycle;\n\n if (!reactivationData) {\n history.push(`${routesLocale.subscriptions}`);\n return (<>);\n }\n\n const discountPercentage = reactivationData && reactivationData.percent;\n const futurePrice = formatCurrency(reactivationData.discountAmount);\n const isPageReady = !invoiceIsLoading;\n const disabledInstallments = isBRServer && reactivationData.installment.max > 1;\n\n const dataInstallment = () => ({\n price: formatCurrency(reactivationData.installment.discountValue),\n quantityInstallments: reactivationData.installment.max,\n });\n\n const currentMonthlyPrice = () => formatCurrency(reactivationData.installment.originalValue);\n const currentYearlyPrice = () => formatCurrency(reactivationData.originalAmount);\n\n const handleAcceptButtonClick = () => {\n acceptBenefitClick && acceptBenefitClick();\n };\n\n const handleCancelButtonClick = () => {\n cancelButtonClick && cancelButtonClick();\n };\n\n const isMonthlyPlan = benefitCycleInfos === 'Monthly';\n\n const benefitDescription = isMonthlyPlan\n ? manageSubscriptionBenefit.benefitDescriptionMonth\n : manageSubscriptionBenefit.benefitDescriptionYear;\n\n const benefitFuturePriceText = isMonthlyPlan\n ? manageSubscriptionBenefit.benefitFuturePriceTextMonth\n : manageSubscriptionBenefit.benefitFuturePriceTextYear;\n\n const benefitFinalText = isMonthlyPlan\n ? manageSubscriptionBenefit.benefitFinalTextMonth\n : manageSubscriptionBenefit.benefitFinalTextCycle;\n\n const customButtonRadius = {\n borderRadius: '4px;',\n };\n\n const closeInvoiceModalHandler = () => {\n closeInvoiceModal && closeInvoiceModal();\n };\n\n const viewInvoiceGenerated = () => {\n redirectToInvoice && redirectToInvoice();\n };\n\n return (\n \n \n \n {!isPageReady && \n \n\n \n {manageSubscriptionBenefit.benefitTitle}\n \n\n \n {benefitDescription}\n \n\n \n \n \n \n {manageSubscriptionBenefit.benefitCurrentPriceText(benefitCycleInfos)}\n \n \n {manageSubscriptionBenefit.benefitCurrentPriceCycleMonth(currentMonthlyPrice())}\n \n \n {manageSubscriptionBenefit.benefitCurrentPriceCycleYear(currentYearlyPrice())}\n \n \n \n \n \n \n \n {benefitFuturePriceText}\n \n \n \n {disabledInstallments && manageSubscriptionBenefit.benefitFuturePriceCycleMonth(dataInstallment().quantityInstallments, dataInstallment().price)}\n {manageSubscriptionBenefit.benefitFuturePriceCycleYear(futurePrice)}\n \n \n \n {manageSubscriptionBenefit.benefitFutureDiscount(discountPercentage)}\n \n {disabledInstallments && (\n \n {manageSubscriptionBenefit.benefitInstallments(dataInstallment().quantityInstallments)}\n \n )}\n \n \n \n \n\n \n {benefitFinalText}\n \n\n \n \n \n )}\n \n {invoiceModalIsOpen && (\n \n );\n};\n\nexport default RetentionBenefitHandler;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n display: block;\n`;\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n padding: 0 24px;\n\n @media (max-width: ${theme.breakpoints.md}) {\n padding: 0;\n }\n `}\n`;\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex: 1;\n margin-top: 8px;\n\n @media (max-width: ${theme.breakpoints.md}) {\n margin-top: 0;\n }\n `}\n`;\n\nexport const HeaderRow = styled.div`\n ${({ theme }) => css`\n box-shadow: 0px 1px 3px ${theme.shadows.grey.light};\n\n @media (max-width: ${theme.breakpoints.md}) {\n // box-shadow: 0px 1px 3px ${theme.shadows.grey.light};\n }\n `}\n`;\n\nexport const TitleWrapper = styled.div`\n ${({ theme }) => css`\n background: ${theme.palette.white.light};\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 16px 22px;\n\n @media (max-width: ${theme.breakpoints.md}) {\n margin-bottom: 6px;\n }\n `}\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.light};\n margin: 0px;\n `}\n`;\n\nexport const FilterWrapper = styled.div`\n ${({ theme }) => css`\n background: ${theme.palette.white.light};\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 0px 22px 12px 22px;\n\n @media (max-width: ${theme.breakpoints.md}) {\n margin-bottom: 8px;\n }\n `}\n`;\n\nexport const NewFilterWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary}\n `}\n`;\n","import React from 'react';\nimport { locale } from '@/utils/locale';\n\nexport const subscriptionsLocale = {\n searchPlaceholder: locale('subscriptions.searchPlaceholder'),\n clearLabel: locale('subscriptions.clearLabel'),\n activeStatusLabel: locale('subscriptions.activeStatusLabel'),\n cancelledStatusLabel: locale('subscriptions.cancelledStatusLabel'),\n pendingStatusLabel: locale('subscriptions.pendingStatusLabel'),\n pendingPaymentStatusLabel: locale('subscriptions.pendingPaymentStatusLabel'),\n pendingAnalysisStatusLabel: locale('subscriptions.pendingAnalysisStatusLabel'),\n suspendedStatusLabel: locale('subscriptions.suspendedStatusLabel'),\n toDueStatusLabel: locale('subscriptions.toDueStatusLabel'),\n overdueStatusLabel: locale('subscriptions.overdueStatusLabel'),\n expiredStatusLabel: locale('subscriptions.expiredStatusLabel'),\n registeredStatusLabel: locale('subscriptions.registeredStatusLabel'),\n transferredAwayStatusLabel: locale('subscriptions.transferredAwayStatusLabel'),\n listTitle: locale('subscriptions.listTitle'),\n tabInvoicesLabel: locale('billing.tabInvoicesLabel'),\n tabSubscriptionsLabel: locale('billing.tabSubscriptionsLabel'),\n buttonManageSubscriptionLabel: locale('subscriptions.buttonManageSubscriptionLabel'),\n manageSubscriptionLabel: locale('subscriptions.manageSubscriptionLabel'),\n searchPlaceholderNewLayout: locale('subscriptions.searchPlaceholderNewLayout'),\n filterLabel: locale('billing.filterLabel'),\n filterSubscriptionsLabel: locale('billing.filterSubscriptionsLabel'),\n filterStatusLabel: locale('billing.filterStatusLabel'),\n domainLabel: locale('billing.domainLabel'),\n routeInvoices: locale('routes.invoices'),\n routeSubscriptions: locale('routes.subscriptions'),\n routeBillingHandler: locale('routes.newBilling'),\n routeUnpaid: locale('routes.unpaid'),\n routePaid: locale('routes.paid'),\n routeCancelled: locale('routes.cancelled'),\n modal: {\n title: locale('billing.modal.title'),\n firstLinecontent: locale('billing.modal.firstLinecontent'),\n secondLinecontent: locale('billing.modal.secondLinecontent'),\n activateRenew: locale('billing.modal.activateRenew'),\n close: locale('billing.modal.close'),\n },\n};\n\nexport const subscriptionLocale = {\n modalActiveRenewalTitle: locale('subscriptions.modal.activateRenew.title'),\n modalActiveRenewalContent: locale('subscriptions.modal.activateRenew.content'),\n modalActiveRenewalButtonLabel: locale('subscriptions.modal.activateRenew.buttonRenewalLabel'),\n};\n\nexport const routesLocale = {\n academy: locale('routes.coursesCta'),\n};\n\nexport const urlsLocale = {\n domain: locale('subscriptions.urls.domain'),\n};\n\nexport const messagesLocale = {\n pendingPayment: () => locale('subscriptions.message.pendingPayment'),\n pendingAnalysis: () => locale('subscriptions.message.pendingAnalysis'),\n toDue: ({\n invoicePaymentMethod,\n dueDate,\n invoiceUrl,\n onGoToInvoicesClick,\n }) => (\n \n {locale('subscriptions.message.toDue.0')}\n \n {`${locale('subscriptions.message.toDue.1')} ${dueDate}`}\n \n {invoicePaymentMethod === 'ticket'\n ? (\n <>\n {locale('subscriptions.message.toDue.ticket.0')}\n \n {locale('subscriptions.message.toDue.ticket.1')}\n \n {locale('subscriptions.message.toDue.ticket.2')}\n \n )\n : locale(`subscriptions.message.toDue.${invoicePaymentMethod}.0`)}\n
\n ),\n toDueWithTypeCancel: ({\n dueDate,\n invoiceUrl,\n onActiveRenewalClick,\n }) => (\n \n {locale('subscriptions.message.active.withCancelDate.0')}\n \n {`${locale('subscriptions.message.active.withCancelDate.1')} ${dueDate}.`}\n \n \n {locale('subscriptions.message.active.withCancelDate.2')}\n \n {locale('subscriptions.message.active.withCancelDate.3')}\n
\n ),\n overdue: ({\n dueDate,\n daysToExpiration,\n singularText,\n invoiceUrl,\n onGoToInvoicesClick,\n }) => (\n \n {locale('subscriptions.message.overdue.0')}\n \n {`${locale('subscriptions.message.overdue.1')} ${dueDate}`}\n \n {`${locale('subscriptions.message.overdue.2')}`}\n \n {`${locale('subscriptions.message.overdue.3')} ${daysToExpiration} ${locale(`subscriptions.message.overdue.4${singularText}`)}`}\n \n \n {locale('subscriptions.message.overdue.5')}\n \n
\n ),\n overdueAndIsMoreThan10DaysLate: ({\n dueDate,\n }) => (\n \n {locale('subscriptions.message.offAfterExpiration.0')}\n \n {`${locale('subscriptions.message.offAfterExpiration.1')} ${dueDate}`}\n \n {`${locale('subscriptions.message.offAfterExpiration.2')}`}\n
\n ),\n suspended: ({\n chatSupportUrl,\n }) => (\n \n {locale('subscriptions.message.suspendedWithoutDate.0')}\n {locale('subscriptions.message.suspendedWithoutDate.1')} \n {locale('subscriptions.message.suspendedWithoutDate.2')}\n \n {locale('subscriptions.message.suspendedWithoutDate.3')}\n \n {locale('subscriptions.message.suspendedWithoutDate.4')}\n
\n ),\n suspendedWithDateSuspended: ({\n dateSuspended,\n invoiceUrl,\n onGoToInvoicesClick,\n }) => (\n \n {locale('subscriptions.message.suspended.0')}\n \n {`${locale('subscriptions.message.suspended.1')} ${dateSuspended}`}\n \n {`${locale('subscriptions.message.suspended.2')}`}\n \n {locale('subscriptions.message.suspended.3')}\n \n \n {locale('subscriptions.message.suspended.4')}\n \n {locale('subscriptions.message.suspended.5')}\n
\n ),\n cancelled: ({\n cancelDate,\n country,\n }) => (\n \n {locale('subscriptions.message.cancelled.default.0')}\n \n {locale('subscriptions.message.cancelled.default.1', {\n cancelDate,\n })}\n \n {locale('subscriptions.message.cancelled.default.2')}\n \n {locale('subscriptions.supportEmail', { country })}\n \n {locale('subscriptions.message.cancelled.default.3')}\n
\n ),\n cancelledWithStatusFraud: ({\n country,\n }) => (\n \n {locale('subscriptions.message.cancelled.fraud.0')}\n {locale('subscriptions.message.cancelled.fraud.1')} \n {locale('subscriptions.message.cancelled.fraud.2')}\n {locale('subscriptions.supportEmail', { country })} \n {locale('subscriptions.message.cancelled.fraud.3')}\n
\n ),\n cancelledWithoutDateCancel: ({\n onGoToClick,\n siteUrl,\n }) => (\n \n {locale('subscriptions.message.cancelled.withoutDate.0')}\n {locale('subscriptions.message.cancelled.withoutDate.1')} \n {locale('subscriptions.message.cancelled.withoutDate.2')}\n \n {locale('subscriptions.message.cancelled.withoutDate.3')}\n \n
\n ),\n cancelledWithCancelTypeUserRequest: ({\n cancelDate,\n onGoToClick,\n siteUrl,\n }) => (\n \n {locale('subscriptions.message.cancelled.user_request.0')}\n \n {locale('subscriptions.message.cancelled.user_request.1', {\n cancelDate,\n })}\n \n {'. '}\n \n {locale('subscriptions.message.cancelled.user_request.2')}\n \n
\n ),\n cancelledWithCancelTypeWhmcsSuspension: ({\n cancelDate,\n onGoToClick,\n siteUrl,\n }) => (\n \n {locale('subscriptions.message.cancelled.whmcs_suspension.0')}\n \n {locale('subscriptions.message.cancelled.whmcs_suspension.1', { cancelDate })}\n \n {` ${locale('subscriptions.message.cancelled.whmcs_suspension.2')}`}\n \n {locale('subscriptions.message.cancelled.whmcs_suspension.3')}\n \n
\n ),\n activeWithCancelType: ({\n cancelDate,\n onActiveRenewalClick,\n }) => (\n \n {locale('subscriptions.message.active.withCancelDate.0')}\n \n {`${locale('subscriptions.message.active.withCancelDate.1')} ${cancelDate}.`}\n \n \n {locale('subscriptions.message.active.withCancelDate.2')}\n \n {locale('subscriptions.message.active.withCancelDate.3')}\n
\n ),\n registeredWithCancelTypeUserRequest: ({\n cancelDate,\n onActiveRenewalClick,\n }) => (\n \n {locale('subscriptions.message.domain.registered.withCancelDate.0')}\n {`${locale('subscriptions.message.domain.registered.withCancelDate.1')} ${cancelDate}.`} \n \n {locale('subscriptions.message.domain.registered.withCancelDate.2')}\n \n {locale('subscriptions.message.domain.registered.withCancelDate.3')}\n
\n ),\n domainOverdue: ({\n daysToExpiration,\n dueDate,\n invoiceUrl,\n singularText,\n onGoToInvoicesClick,\n }) => (\n \n {locale('subscriptions.message.domain.overdue.0')}\n {`${locale('subscriptions.message.domain.overdue.1')} ${dueDate}`} \n {`${locale('subscriptions.message.domain.overdue.2')} ${daysToExpiration} ${locale(`subscriptions.message.domain.overdue.3${singularText}`)}`}\n \n {locale('subscriptions.message.domain.overdue.4')}\n \n
\n ),\n domainExpired: ({\n dueDate,\n invoiceUrl,\n onGoToInvoicesClick,\n }) => (\n \n {locale('subscriptions.message.domain.expired.0')}\n {`${locale('subscriptions.message.domain.expired.1')} ${dueDate}`} \n {locale('subscriptions.message.domain.expired.2')}\n \n {locale('subscriptions.message.domain.expired.3')}\n \n
\n ),\n domainCancelledForNonPayment: ({\n cancelDate,\n onGoToClick,\n siteUrl,\n }) => (\n \n {locale('subscriptions.message.domain.cancelled.forNonPayment.0')}\n {`${locale('subscriptions.message.domain.cancelled.forNonPayment.1')} ${cancelDate}`} \n {locale('subscriptions.message.domain.cancelled.forNonPayment.2')}\n \n {locale('subscriptions.message.domain.cancelled.forNonPayment.3')}\n \n
\n ),\n domainCancelledByClient: ({\n cancelDate,\n onGoToClick,\n siteUrl,\n }) => (\n \n {locale('subscriptions.message.domain.cancelled.byClient.0')}\n {`${locale('subscriptions.message.domain.cancelled.byClient.1')} ${cancelDate}`} \n \n {locale('subscriptions.message.domain.cancelled.byClient.2')}\n \n
\n ),\n transferredAway: () => (\n \n {locale('subscriptions.message.domain.transferredAway')}\n
\n ),\n domainCancelledByFraud: ({\n country,\n }) => (\n \n {`${locale('subscriptions.message.domain.cancelled.byFraud.0')}`} \n {locale('subscriptions.message.domain.cancelled.byFraud.1')}\n \n {locale('subscriptions.message.domain.cancelled.byFraud.2')}\n \n {locale('subscriptions.message.domain.cancelled.byFraud.3')}\n
\n ),\n addonWithDateSuspended: ({\n dateSuspended,\n invoiceUrl,\n onGoToInvoicesClick,\n }) => (\n \n {locale('subscriptions.message.addon.withDateSuspended.0')}\n \n {`${locale('subscriptions.message.addon.withDateSuspended.1')} ${dateSuspended}. `}\n \n \n {locale('subscriptions.message.addon.withDateSuspended.2')}\n \n {locale('subscriptions.message.addon.withDateSuspended.3')}\n
\n ),\n addonWithoutDateSuspended: ({\n chatSupportUrl,\n }) => (\n \n {locale('subscriptions.message.addon.withoutDateSuspended.0')}\n {locale('subscriptions.message.addon.withoutDateSuspended.1')} \n {locale('subscriptions.message.addon.withoutDateSuspended.2')}\n \n {locale('subscriptions.message.addon.withoutDateSuspended.3')}\n \n {locale('subscriptions.message.addon.withoutDateSuspended.4')}\n
\n ),\n};\n","import { billingActions } from '@/redux/modules/billing';\nimport store from '@/redux/store';\nimport { billingAnalytics } from '@/analytics';\nimport { locale } from '@/utils/locale';\nimport { SUBSCRIPTIONS_SUBSTATUS } from '@/enums/billing/billing.enum';\nimport { subscriptionsLocale } from './SubscriptionsHandler.locale';\n\nconst { dispatch } = store;\nconst { subscriptions: subscriptionAnalytics } = billingAnalytics;\n\n// ANALYTICS\nconst onHandleManageSubscription = (obj, history) => {\n const { id, type } = obj;\n subscriptionAnalytics.manageSubscriptionClick();\n history.push(`${locale('routes.subscriptions')}${locale('routes.manageSubscription')}/${id}/${type}`);\n};\n\n// SUBSCRIPTION ACTIONS\nconst onHandleSubscriptionsLoad = () => {\n dispatch(billingActions.subscriptions.request());\n};\n\nconst handleActivateSubscription = (subscription, setModalById = null) => {\n subscriptionAnalytics.cancelSubscriptionClick('5_modal_ativar_cancelar_renovacao');\n dispatch(billingActions.subscriptions.activateRenewal.request(subscription, setModalById));\n};\n\nconst handleSwitchPaymentMethod = ({\n subscription,\n paymentMethod,\n onSuccess,\n usePaymentModalV2,\n}) => {\n dispatch(billingActions.subscriptions.switchPaymentMethod.request({\n subscription,\n paymentMethod,\n onSuccess,\n usePaymentModalV2,\n }));\n};\n\n\n// Modal\nconst handleCloseRenewModal = (setActivateSubscription) => {\n subscriptionAnalytics.cancelSubscriptionClick('5_modal_fechar_cancelar_renovacao');\n setActivateSubscription(null);\n};\n\nconst handleOnModalClose = () => {\n subscriptionAnalytics.cancelSubscriptionClick('5_modal_fechar_cancelar_renovacao');\n dispatch(billingActions.subscriptions.cancel.set({ modal: null }));\n};\n\n// FILTER\nconst sortByStatus = (subscriptions) => {\n const sortedList = [];\n Object.values(SUBSCRIPTIONS_SUBSTATUS)\n .forEach((substatus) => {\n [...subscriptions]\n .filter(subscription => subscription.substatus === substatus)\n .sort((subscriptionA, subscriptionB) => (subscriptionA.productName > subscriptionB.productName ? 1 : -1))\n .forEach(subscription => sortedList.push(subscription));\n });\n\n return sortedList;\n};\n\nconst createInitialFilterItem = () => ({\n id: 0,\n label: 'Todas',\n value: 'all',\n checked: true,\n});\n\nconst mountFilteredOptions = (filteredOptions, subscriptionsItems, setFilteredOptions) => {\n if (!filteredOptions.length && subscriptionsItems.length) {\n const options = [];\n const sortedList = sortByStatus(subscriptionsItems);\n\n sortedList.forEach((subscription) => {\n if (!options.length) {\n options.push(createInitialFilterItem());\n }\n\n let optionExists = options.find(option => option.value === subscription.substatus);\n const isActive = subscription.substatus === SUBSCRIPTIONS_SUBSTATUS.TO_DUE && subscription.cancelType;\n if (isActive) {\n optionExists = options.find(option => option.value === SUBSCRIPTIONS_SUBSTATUS.ACTIVE);\n }\n\n if (!optionExists) {\n const status = isActive ? subscription.status.toLowerCase() : subscription.substatus;\n\n options.push({\n id: options.length,\n label: subscriptionsLocale[`${status}StatusLabel`],\n value: status,\n checked: false,\n });\n }\n });\n\n setFilteredOptions(options);\n }\n};\n\nconst clearFilter = (filteredOptions, setFilteredOptions, setFilterTyped) => {\n const options = [...filteredOptions]\n .map((option, index) => ({ ...option, checked: index === 0 }));\n\n setFilteredOptions(options);\n setFilterTyped('');\n};\n\nconst handleOnFilterClick = (options) => {\n subscriptionAnalytics.subscriptionsFilterClick(options);\n};\n\n\nconst functions = {\n clearFilter,\n handleActivateSubscription,\n handleCloseRenewModal,\n handleOnFilterClick,\n handleOnModalClose,\n mountFilteredOptions,\n onHandleManageSubscription,\n onHandleSubscriptionsLoad,\n handleSwitchPaymentMethod,\n sortByStatus,\n};\n\nexport default functions;\n","import { useState, useEffect, useCallback } from 'react';\n\nconst FILTER_OPTION_ALL = 'all';\n\nexport const statusOrderRules = [\n 'pendingPayment',\n 'pendingAnalysis',\n 'pending',\n 'expired',\n 'suspended',\n 'overdue',\n 'toDue',\n 'active',\n 'registered',\n 'transferredAway',\n 'cancelled',\n];\n\nconst useSubscriptionsFilter = ({\n items = [],\n} = {}) => {\n const [filterOptions, setFilterOptions] = useState([]);\n const [filterText, setFilterText] = useState('');\n const [filteredItems, setFilteredItems] = useState([]);\n\n const getCheckedOptionsValues = useCallback(options => options\n .filter(option => option.checked)\n .map(option => option.value), []);\n\n const getTimestamp = dateString => new Date(dateString).getTime();\n\n const orderByDate = useCallback(\n (\n { registerDate: dateStringA },\n { registerDate: dateStringB },\n ) => -(getTimestamp(dateStringA) - getTimestamp(dateStringB)), [],\n );\n\n const filterByOptions = useCallback((items) => {\n const optionsValues = getCheckedOptionsValues(filterOptions);\n return optionsValues.includes(items.substatus) || optionsValues.includes(FILTER_OPTION_ALL);\n }, [filterOptions, getCheckedOptionsValues]);\n\n const filterByName = useCallback((item) => {\n const hasProductName = item.productName.toLowerCase().includes(filterText.toLowerCase());\n const hasDomain = item.domain.toLowerCase().includes(filterText.toLowerCase());\n const showAnyway = filterText === '';\n\n return hasProductName || hasDomain || showAnyway;\n }, [filterText]);\n\n useEffect(() => {\n if (items.length !== 0) {\n const itemsFiltered = statusOrderRules\n .flatMap(substatus => items\n .filter(item => item.substatus === substatus)\n .sort(orderByDate))\n .filter(filterByOptions)\n .filter(filterByName);\n\n setFilteredItems(itemsFiltered);\n }\n }, [filterByName, filterByOptions, orderByDate, items, filterOptions, filterText]);\n\n return {\n filteredItems,\n filterOptions,\n setFilterOptions,\n filterText,\n setFilterText,\n };\n};\n\nexport default useSubscriptionsFilter;\n","import React from 'react';\nimport { locale } from '@/utils/locale';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { Button as OldButton } from '@/pages/common';\nimport { Button } from 'gatorcomponents';\n\nexport const routesLocale = {\n invoices: () => locale('routes.invoices'),\n unpaid: () => locale('routes.unpaid'),\n};\n\nexport const supportLocale = {\n wizard: () => locale('subscriptions.supportWizard'),\n};\n\n\nconst displayLinkToModalPayment = (linkText, onDisplayModalPayment, subscription, newButton) => (\n newButton ? (\n { onDisplayModalPayment(subscription); }}\n label={linkText}\n testId=\"link-invoice-modal-payment\"\n />\n ) : (\n { onDisplayModalPayment(subscription); }}\n label={linkText}\n testId=\"link-invoice-modal-payment\"\n />\n )\n);\n\nexport const messagesLocale = {\n\n\n pendingPayment: enabledNewMessagesInSubscription => (\n \n {(enabledNewMessagesInSubscription && isBRServer) ? locale('subscriptions.message.newPendingPayment') : locale('subscriptions.message.pendingPayment')}\n
\n ),\n pendingAnalysis: enabledNewMessagesInSubscription => (\n \n {(enabledNewMessagesInSubscription && isBRServer) ? locale('subscriptions.message.newPendingAnalysis') : locale('subscriptions.message.pendingAnalysis')}\n
\n ),\n toDue: ({\n paymentMethod,\n dueDate,\n invoiceUrl,\n enabledNewMessagesInSubscription,\n enabledModalPaymentInSubscriptionList,\n onDisplayModalPayment,\n subscription,\n }) => (\n \n {locale('subscriptions.message.toDue.0')}\n \n {`${locale('subscriptions.message.toDue.1')} ${dueDate}`}\n {(paymentMethod && ['ticket', 'gp_pix'].includes(paymentMethod) && isBRServer) && locale('subscriptions.message.toDue.ticket.0')}\n \n\n {(paymentMethod && ['ticket', 'gp_pix'].includes(paymentMethod))\n ? (\n <>\n {enabledModalPaymentInSubscriptionList !== true\n ? (\n event.preventDefault()}\n >\n {(enabledNewMessagesInSubscription === true && isBRServer) ? locale('subscriptions.message.toDue.ticket.3') : locale('subscriptions.message.toDue.ticket.1')}\n \n )\n : displayLinkToModalPayment(locale((enabledNewMessagesInSubscription === true && isBRServer) ? 'subscriptions.message.toDue.ticket.3' : 'subscriptions.message.toDue.ticket.1'), onDisplayModalPayment, subscription)\n }\n {locale('subscriptions.message.toDue.ticket.2')}\n \n )\n : locale(`subscriptions.message.toDue.${paymentMethod}.0`)}\n
\n ),\n toDueWithTypeCancel: ({\n dueDate,\n invoiceUrl,\n }) => (\n \n {locale('subscriptions.message.active.withCancelDate.0')}\n \n {`${locale('subscriptions.message.active.withCancelDate.1')} ${dueDate}.`}\n \n event.preventDefault()}\n >\n {locale('subscriptions.message.active.withCancelDate.2')}\n \n {locale('subscriptions.message.active.withCancelDate.3')}\n
\n ),\n overdue: ({\n dueDate,\n daysToExpiration,\n singularText,\n invoiceUrl,\n },\n enabledNewMessagesInSubscription,\n enabledModalPaymentInSubscriptionList,\n onDisplayModalPayment,\n subscription) => (\n \n {locale('subscriptions.message.overdue.0')}\n \n {`${locale('subscriptions.message.overdue.1')} ${dueDate}`}\n \n {`${locale('subscriptions.message.overdue.2')}`}\n \n {`${locale('subscriptions.message.overdue.3')} ${daysToExpiration} ${locale(`subscriptions.message.overdue.4${singularText}`)}`}\n \n {enabledModalPaymentInSubscriptionList !== true ? (\n event.preventDefault()}\n >\n {(enabledNewMessagesInSubscription === true && isBRServer) ? locale('subscriptions.message.overdue.6') : locale('subscriptions.message.overdue.5')}\n \n )\n : displayLinkToModalPayment(locale((enabledNewMessagesInSubscription === true && isBRServer) ? 'subscriptions.message.overdue.6' : 'subscriptions.message.overdue.5'), onDisplayModalPayment, subscription)\n }\n\n
\n ),\n overdueAndIsMoreThan10DaysLate: ({\n dueDate,\n }) => (\n \n {locale('subscriptions.message.offAfterExpiration.0')}\n \n {`${locale('subscriptions.message.offAfterExpiration.1')} ${dueDate}`}\n \n {`${locale('subscriptions.message.offAfterExpiration.2')}`}\n
\n ),\n cancelled: ({\n cancelDate,\n country,\n }) => (\n \n {locale('subscriptions.message.cancelled.default.0')}\n \n {locale('subscriptions.message.cancelled.default.1', {\n cancelDate,\n })}\n \n {locale('subscriptions.message.cancelled.default.2')}\n \n {locale('subscriptions.supportEmail', { country })}\n \n {locale('subscriptions.message.cancelled.default.3')}\n
\n ),\n cancelledWithStatusFraud: ({\n country,\n }) => (\n \n {locale('subscriptions.message.cancelled.fraud.0')}\n {locale('subscriptions.message.cancelled.fraud.1')} \n {locale('subscriptions.message.cancelled.fraud.2')}\n {locale('subscriptions.supportEmail', { country })} \n {locale('subscriptions.message.cancelled.fraud.3')}\n
\n ),\n cancelledWithoutDateCancel: ({\n siteUrl,\n siteUrlClick,\n }) => (\n \n {locale('subscriptions.message.cancelled.withoutDate.0')}\n {locale('subscriptions.message.cancelled.withoutDate.1')} \n {locale('subscriptions.message.cancelled.withoutDate.2')}\n \n {locale('subscriptions.message.cancelled.withoutDate.3')}\n \n
\n ),\n cancelledWithoutDateCancelEcommercePlus: () => (\n \n {locale('subscriptions.message.cancelled.withoutDate_ecommerce_plus.0')}\n {locale('subscriptions.message.cancelled.withoutDate_ecommerce_plus.1')} \n {locale('subscriptions.message.cancelled.withoutDate_ecommerce_plus.2')}\n
\n ),\n cancelledWithCancelTypeUserRequest: ({\n cancelDate,\n siteUrl,\n siteUrlClick,\n }) => (\n \n {locale('subscriptions.message.cancelled.user_request.0')}\n \n {locale('subscriptions.message.cancelled.user_request.1', {\n cancelDate,\n })}\n \n {'. '}\n \n {locale('subscriptions.message.cancelled.user_request.2')}\n \n
\n ),\n cancelledWithCancelTypeUserRequestEcommercePlus: ({\n cancelDate,\n }) => (\n \n {locale('subscriptions.message.cancelled.user_request_ecommerce_plus.0')}\n \n {locale('subscriptions.message.cancelled.user_request_ecommerce_plus.1', {\n cancelDate,\n })}\n \n
\n ),\n cancelledWithCancelTypeWhmcsSuspension: ({\n cancelDate,\n siteUrl,\n siteUrlClick,\n }) => (\n \n {locale('subscriptions.message.cancelled.whmcs_suspension.0')}\n \n {locale('subscriptions.message.cancelled.whmcs_suspension.1', { cancelDate })}\n \n {` ${locale('subscriptions.message.cancelled.whmcs_suspension.2')}`}\n \n {locale('subscriptions.message.cancelled.whmcs_suspension.3')}\n \n
\n ),\n cancelledWithCancelTypeWhmcsSuspensionEcommercePlus: ({\n cancelDate,\n }) => (\n \n {locale('subscriptions.message.cancelled.whmcs_suspension_ecommerce_plus.0')}\n \n {locale('subscriptions.message.cancelled.whmcs_suspension_ecommerce_plus.1', { cancelDate })}\n \n {` ${locale('subscriptions.message.cancelled.whmcs_suspension_ecommerce_plus.2')}`}\n
\n ),\n activeWithCancelType: ({\n cancelDate,\n activeRenew,\n activeRenewPath,\n }) => (\n \n {locale('subscriptions.message.active.withCancelDate.0')}\n \n {`${locale('subscriptions.message.active.withCancelDate.1')} ${cancelDate}.`}\n \n \n {locale('subscriptions.message.active.withCancelDate.2')}\n \n {locale('subscriptions.message.active.withCancelDate.3')}\n
\n ),\n registeredWithCancelTypeUserRequest: ({\n cancelDate,\n activeRenew,\n activeRenewPath,\n }) => (\n \n {locale('subscriptions.message.domain.registered.withCancelDate.0')}\n {`${locale('subscriptions.message.domain.registered.withCancelDate.1')} ${cancelDate}.`} \n \n {locale('subscriptions.message.domain.registered.withCancelDate.2')}\n \n {locale('subscriptions.message.domain.registered.withCancelDate.3')}\n
\n ),\n domainOverdue: ({\n daysToExpiration,\n dueDate,\n invoiceUrl,\n singularText,\n enabledNewMessagesInSubscription,\n }) => (\n \n {locale('subscriptions.message.domain.overdue.0')}\n {`${locale('subscriptions.message.domain.overdue.1')} ${dueDate}`} \n {`${locale('subscriptions.message.domain.overdue.2')} ${daysToExpiration} ${locale(`subscriptions.message.domain.overdue.3${singularText}`)}`}\n event.preventDefault()}\n >\n {(enabledNewMessagesInSubscription === true && isBRServer) ? locale('subscriptions.message.domain.overdue.5') : locale('subscriptions.message.domain.overdue.4')}\n \n
\n ),\n domainExpired: ({\n dueDate,\n invoiceUrl,\n enabledNewMessagesInSubscription,\n enabledModalPaymentInSubscriptionList,\n onDisplayModalPayment,\n subscription,\n }) => (\n \n {locale('subscriptions.message.domain.expired.0')}\n {`${locale('subscriptions.message.domain.expired.1')} ${dueDate}`} \n {locale('subscriptions.message.domain.expired.2')}\n {enabledModalPaymentInSubscriptionList !== true\n ? (\n event.preventDefault()}\n >\n {(enabledNewMessagesInSubscription === true && isBRServer) ? locale('subscriptions.message.domain.expired.4') : locale('subscriptions.message.domain.expired.3')}\n \n )\n : displayLinkToModalPayment(locale((enabledNewMessagesInSubscription === true && isBRServer) ? 'subscriptions.message.domain.expired.4' : 'subscriptions.message.domain.expired.3'), onDisplayModalPayment, subscription)\n }\n
\n ),\n domainCancelledForNonPayment: ({\n cancelDate,\n siteUrl,\n }) => (\n \n {locale('subscriptions.message.domain.cancelled.forNonPayment.0')}\n {`${locale('subscriptions.message.domain.cancelled.forNonPayment.1')} ${cancelDate}`} \n {locale('subscriptions.message.domain.cancelled.forNonPayment.2')}\n event.preventDefault()}\n title={locale('subscriptions.message.domain.cancelled.forNonPayment.3')}\n >\n {locale('subscriptions.message.domain.cancelled.forNonPayment.3')}\n \n
\n ),\n domainCancelledByClient: ({\n cancelDate,\n siteUrl,\n }) => (\n \n {locale('subscriptions.message.domain.cancelled.byClient.0')}\n {`${locale('subscriptions.message.domain.cancelled.byClient.1')} ${cancelDate}`} \n event.preventDefault()}\n title={locale('subscriptions.message.domain.cancelled.byClient.2')}\n >\n {locale('subscriptions.message.domain.cancelled.byClient.2')}\n \n
\n ),\n transferredAway: () => (\n \n {locale('subscriptions.message.domain.transferredAway')}\n
\n ),\n domainCancelledByFraud: ({\n supportUrl,\n }) => (\n \n {`${locale('subscriptions.message.domain.cancelled.byFraud.0')}`} \n {locale('subscriptions.message.domain.cancelled.byFraud.1')}\n \n {locale('subscriptions.message.domain.cancelled.byFraud.2')}\n \n {locale('subscriptions.message.domain.cancelled.byFraud.3')}\n
\n ),\n default: {\n suspended: {\n standard: ({\n onDisplayModalPayment,\n subscription,\n }) => (\n <>\n {locale('subscriptions.message.suspended.standard.0')}\n {displayLinkToModalPayment(locale('subscriptions.message.suspended.standard.1'), onDisplayModalPayment, subscription, true)}\n {locale('subscriptions.message.suspended.standard.2')}\n \n {locale('subscriptions.message.suspended.standard.3')}\n \n \n ),\n withDate: ({\n dateSuspended,\n invoiceUrl,\n category,\n enabledNewMessagesInSubscription,\n enabledModalPaymentInSubscriptionList,\n onDisplayModalPayment,\n subscription,\n }) => (\n \n {locale('subscriptions.message.suspended.withDate.0')}\n \n {locale('subscriptions.message.suspended.withDate.1')}\n {dateSuspended}\n \n {(category === 'hosting') ? (\n <>\n {`${locale('subscriptions.message.suspended.withDate.2')}`}\n \n {locale('subscriptions.message.suspended.withDate.3')}\n \n \n ) : '.'}\n {enabledModalPaymentInSubscriptionList !== true\n ? (\n event.preventDefault()}\n >\n {(enabledNewMessagesInSubscription === true && isBRServer) ? locale('subscriptions.message.suspended.withDate.6') : locale('subscriptions.message.suspended.withDate.4')}\n \n )\n : displayLinkToModalPayment(locale((enabledNewMessagesInSubscription === true && isBRServer) ? 'subscriptions.message.suspended.withDate.6' : 'subscriptions.message.suspended.withDate.4'), onDisplayModalPayment, subscription)\n }\n {enabledNewMessagesInSubscription !== true && (locale('subscriptions.message.suspended.withDate.5'))}\n
\n ),\n withoutDate: ({\n chatSupportUrl,\n category,\n }) => (\n \n {locale('subscriptions.message.suspended.withoutDate.0')}\n {locale('subscriptions.message.suspended.withoutDate.1')} \n {category === 'hosting' ? locale('subscriptions.message.suspended.withoutDate.2') : ''}\n {locale('subscriptions.message.suspended.withoutDate.3')}\n \n {locale('subscriptions.message.suspended.withoutDate.4')}\n \n {locale('subscriptions.message.suspended.withoutDate.5')}\n
\n ),\n },\n },\n};\n","const extend = (from, to) => Object.assign({}, from, to);\n\nexport default extend;\n","import { COUNTRY } from '@/config';\nimport { routesLocale } from './useSubscriptionsMessage.locale';\n\nexport const getInvoiceUrl = (id) => {\n const { invoices: invoicesRoute, unpaid: invoicesUnpaidRoute } = routesLocale;\n const paymentMethod = COUNTRY === 'br' ? 'boleto' : 'payu_boleto';\n return `${invoicesRoute()}${invoicesUnpaidRoute()}/${id}/${paymentMethod}`;\n};\n\nexport const adaptPaymentMethodFromInvoice = (invoicePaymentMethod) => {\n const method = invoicePaymentMethod.toLowerCase();\n\n const hasMethod = (nameList = []) => nameList.some(name => method.includes(name));\n\n if (hasMethod(['credit', 'dlocal'])) return 'creditCard';\n if (hasMethod(['boleto', 'payu_boleto'])) return 'ticket';\n if (hasMethod(['paypal'])) return 'paypal';\n\n return method;\n};\n","import { differenceInCalendarDays, parseISO } from 'date-fns';\nimport { PRODUCT_NAMES, SUBSCRIPTIONS_CANCEL_TYPE, SUBSCRIPTION_STATUS } from '@/enums/billing/billing.enum';\nimport { messagesLocale, supportLocale } from './useSubscriptionsMessage.locale';\nimport { formatDate } from '@/utils/Formatters/formatDate';\nimport { extend } from '@/utils/extend';\nimport { locale } from '@/utils/locale';\nimport { getInvoiceUrl, adaptPaymentMethodFromInvoice } from './useSubscriptionsMessage.utils';\nimport { CHAT_SUPPORT_URL } from '@/config/urls/supportUrls';\nimport { SITE_HG, COUNTRY } from '@/config';\nimport { useHistory } from 'react-router';\n\n\nconst defaultMessages = {\n\n [SUBSCRIPTION_STATUS.PENDING]: ({ substatus }) => ({\n status: substatus,\n text: null,\n url: null,\n }),\n [SUBSCRIPTION_STATUS.PENDING_ANALYSIS]: ({ substatus }, { enabledNewMessagesInSubscription }) => ({\n status: substatus,\n url: null,\n text: messagesLocale.pendingAnalysis(enabledNewMessagesInSubscription),\n }),\n [SUBSCRIPTION_STATUS.PENDING_PAYMENT]: ({ substatus }, { enabledNewMessagesInSubscription }) => ({\n status: substatus,\n url: null,\n text: messagesLocale.pendingPayment(enabledNewMessagesInSubscription),\n }),\n [SUBSCRIPTION_STATUS.ACTIVE]: (subscription) => {\n const {\n cancelType, cancelDate, dueDate, substatus, id, type,\n } = subscription;\n\n const message = {\n status: substatus,\n text: null,\n url: null,\n };\n\n const history = useHistory();\n const activeRenewPath = `${locale('routes.subscriptions')}${locale('routes.manageSubscription')}/${id}/${type}`;\n\n const handleRedirect = (event) => {\n event.preventDefault();\n history.push(activeRenewPath);\n };\n\n if (cancelType && (cancelDate || dueDate)) {\n message.status = 'error';\n message.url = activeRenewPath;\n message.text = messagesLocale.activeWithCancelType({\n cancelDate: formatDate(cancelDate || dueDate),\n activeRenew: handleRedirect,\n activeRenewPath,\n });\n }\n\n return message;\n },\n [SUBSCRIPTION_STATUS.OVERDUE]: (subscription, {\n todayDate, enabledNewMessagesInSubscription, enabledModalPaymentInSubscriptionList, onDisplayModalPayment,\n }) => {\n const {\n dueDate, substatus, invoiceId,\n } = subscription;\n\n const message = {\n status: substatus,\n text: null,\n url: null,\n };\n\n const daysToCancel = 10;\n const today = todayDate || new Date();\n const daysAfterOverdue = differenceInCalendarDays(today, parseISO(dueDate));\n const daysToExpiration = daysToCancel - daysAfterOverdue;\n const willExpire = daysAfterOverdue < daysToCancel;\n if (willExpire) {\n message.url = getInvoiceUrl(invoiceId);\n message.text = messagesLocale.overdue({\n dueDate: formatDate(dueDate),\n daysToExpiration,\n singularText: daysToExpiration > 1 ? '' : '-singular',\n invoiceUrl: getInvoiceUrl(invoiceId),\n }, enabledNewMessagesInSubscription, enabledModalPaymentInSubscriptionList, onDisplayModalPayment, subscription);\n } else {\n message.text = messagesLocale.overdueAndIsMoreThan10DaysLate({\n dueDate: formatDate(dueDate),\n });\n }\n\n return message;\n },\n [SUBSCRIPTION_STATUS.TO_DUE]: (subscription, { enabledNewMessagesInSubscription, enabledModalPaymentInSubscriptionList, onDisplayModalPayment }) => {\n const {\n cancelType, cancelDate, dueDate, invoiceId, paymentMethod, substatus,\n } = subscription;\n const message = {\n status: substatus,\n text: null,\n url: null,\n };\n\n if (cancelType) {\n message.status = 'error';\n message.url = getInvoiceUrl(invoiceId);\n message.text = messagesLocale.toDueWithTypeCancel({\n dueDate: formatDate(cancelDate || dueDate),\n invoiceUrl: getInvoiceUrl(invoiceId),\n });\n } else {\n message.url = getInvoiceUrl(invoiceId);\n message.text = messagesLocale.toDue({\n paymentMethod: adaptPaymentMethodFromInvoice(paymentMethod),\n dueDate: formatDate(cancelDate || dueDate),\n invoiceUrl: getInvoiceUrl(invoiceId),\n enabledNewMessagesInSubscription: enabledNewMessagesInSubscription || false,\n enabledModalPaymentInSubscriptionList: enabledModalPaymentInSubscriptionList || false,\n onDisplayModalPayment,\n subscription,\n\n });\n }\n\n return message;\n },\n [SUBSCRIPTION_STATUS.CANCELLED]: (subscription, { country, enabledNewMessagesInSubscription }) => {\n const { cancelDate, substatus } = subscription;\n const message = {\n status: substatus,\n url: null,\n text: messagesLocale.cancelled({\n cancelDate: formatDate(cancelDate),\n country: country || COUNTRY,\n }, { enabledNewMessagesInSubscription }),\n };\n\n const history = useHistory();\n\n const handleRedirect = (event) => {\n event.preventDefault();\n history.push(SITE_HG);\n };\n\n if (!cancelDate) {\n subscription.productName === PRODUCT_NAMES.ECOMMERCE_PLUS\n ? message.text = messagesLocale.cancelledWithoutDateCancelEcommercePlus()\n : message.text = messagesLocale.cancelledWithoutDateCancel({\n siteUrl: SITE_HG,\n siteUrlClick: handleRedirect,\n });\n }\n\n return message;\n },\n [SUBSCRIPTION_STATUS.INVOICE_CANCELLED]: (subscription, { country, enabledNewMessagesInSubscription }) => {\n const { cancelDate, substatus } = subscription;\n const message = {\n status: substatus,\n url: null,\n text: messagesLocale.cancelled({\n cancelDate: formatDate(cancelDate),\n country: country || COUNTRY,\n }, { enabledNewMessagesInSubscription }),\n };\n\n if (!cancelDate) {\n subscription.productName === PRODUCT_NAMES.ECOMMERCE_PLUS\n ? message.text = messagesLocale.cancelledWithoutDateCancelEcommercePlus()\n : message.text = messagesLocale.cancelledWithoutDateCancel({\n siteUrl: SITE_HG,\n });\n }\n\n return message;\n },\n [SUBSCRIPTION_STATUS.TERMINATED_CANCELLED]: (subscription) => {\n const {\n cancelType, cancelDate, substatus,\n } = subscription;\n\n const message = {\n status: substatus,\n text: null,\n url: null,\n };\n\n const history = useHistory();\n\n const handleRedirect = (event) => {\n event.preventDefault();\n history.push(SITE_HG);\n };\n\n if (cancelType === SUBSCRIPTIONS_CANCEL_TYPE.USER_REQUEST) {\n message.url = SITE_HG;\n subscription.productName === PRODUCT_NAMES.ECOMMERCE_PLUS\n ? message.text = messagesLocale.cancelledWithCancelTypeUserRequestEcommercePlus({\n canceledDate: formatDate(cancelDate),\n })\n : message.text = messagesLocale.cancelledWithCancelTypeUserRequest({\n cancelDate: formatDate(cancelDate),\n siteUrl: SITE_HG,\n siteUrlClick: handleRedirect,\n });\n }\n\n if (cancelType === SUBSCRIPTIONS_CANCEL_TYPE.WHMCS_SUSPENSION) {\n message.url = SITE_HG;\n subscription.productName === PRODUCT_NAMES.ECOMMERCE_PLUS\n ? message.text = messagesLocale.cancelledWithCancelTypeWhmcsSuspensionEcommercePlus({\n cancelDate: formatDate(cancelDate),\n })\n : message.text = messagesLocale.cancelledWithCancelTypeWhmcsSuspension({\n cancelDate: formatDate(cancelDate),\n siteUrl: SITE_HG,\n siteUrlClick: handleRedirect,\n });\n }\n\n return message;\n },\n [SUBSCRIPTION_STATUS.FRAUD_CANCELLED]: ({ substatus }, { country }) => ({\n status: substatus,\n url: null,\n text: messagesLocale.cancelledWithStatusFraud({ country: country || COUNTRY }),\n }),\n [SUBSCRIPTION_STATUS.SUSPENDED]: (subscription, {\n enabledNewMessagesInSubscription, enabledModalPaymentInSubscriptionList, onDisplayModalPayment, enableTrustReactivation,\n }) => {\n const {\n suspendedDate, substatus, invoiceId, category,\n } = subscription;\n\n const message = {\n status: substatus,\n text: null,\n url: null,\n };\n\n if (enableTrustReactivation) {\n message.text = messagesLocale.default.suspended.standard({\n onDisplayModalPayment,\n subscription,\n });\n }\n\n if (!enableTrustReactivation) {\n if (suspendedDate) {\n message.url = getInvoiceUrl(invoiceId);\n message.text = messagesLocale.default.suspended.withDate({\n category,\n dateSuspended: formatDate(suspendedDate),\n invoiceUrl: getInvoiceUrl(invoiceId),\n enabledNewMessagesInSubscription: enabledNewMessagesInSubscription === true || false,\n enabledModalPaymentInSubscriptionList: enabledModalPaymentInSubscriptionList === true || false,\n onDisplayModalPayment,\n subscription,\n });\n } else {\n message.url = CHAT_SUPPORT_URL;\n message.text = messagesLocale.default.suspended.withoutDate({\n category,\n chatSupportUrl: CHAT_SUPPORT_URL,\n });\n }\n }\n\n return message;\n },\n};\n\nconst domain = extend(defaultMessages, {\n [SUBSCRIPTION_STATUS.TO_DUE]: (subscription, { enabledNewMessagesInSubscription }) => {\n const {\n cancelType, cancelDate, dueDate, invoiceId, paymentMethod, substatus,\n } = subscription;\n\n const message = {\n status: substatus,\n text: null,\n url: null,\n };\n\n if (cancelType) {\n message.status = 'error';\n message.url = getInvoiceUrl(invoiceId);\n message.text = messagesLocale.toDueWithTypeCancel({\n dueDate: formatDate(cancelDate || dueDate),\n invoiceUrl: getInvoiceUrl(invoiceId),\n });\n } else {\n message.url = getInvoiceUrl(invoiceId);\n message.text = messagesLocale.toDue({\n paymentMethod: adaptPaymentMethodFromInvoice(paymentMethod),\n dueDate: formatDate(dueDate),\n invoiceUrl: getInvoiceUrl(invoiceId),\n enabledNewMessagesInSubscription: enabledNewMessagesInSubscription === true || false,\n });\n }\n\n return message;\n },\n [SUBSCRIPTION_STATUS.OVERDUE]: (subscription, {\n todayDate, enabledNewMessagesInSubscription, enabledModalPaymentInSubscriptionList, onDisplayModalPayment,\n }) => {\n const {\n substatus, dueDate, invoiceId, cancelDate,\n } = subscription;\n\n const today = todayDate || new Date();\n const daysToExpiration = differenceInCalendarDays(parseISO(cancelDate), today);\n const willExpire = daysToExpiration > 0;\n\n const message = {\n status: substatus,\n url: null,\n text: null,\n };\n\n if (willExpire) {\n message.url = getInvoiceUrl(invoiceId);\n message.text = messagesLocale.domainOverdue({\n daysToExpiration,\n dueDate: formatDate(dueDate),\n invoiceUrl: getInvoiceUrl(invoiceId),\n singularText: daysToExpiration <= 1 ? '-singular' : '',\n enabledNewMessagesInSubscription: enabledNewMessagesInSubscription === true || false,\n enabledModalPaymentInSubscriptionList: enabledModalPaymentInSubscriptionList === true || false,\n onDisplayModalPayment,\n subscription,\n });\n } else {\n message.url = getInvoiceUrl(invoiceId);\n message.text = messagesLocale.domainExpired({\n dueDate: formatDate(dueDate),\n invoiceUrl: getInvoiceUrl(invoiceId),\n enabledNewMessagesInSubscription: enabledNewMessagesInSubscription === true || false,\n enabledModalPaymentInSubscriptionList: enabledModalPaymentInSubscriptionList === true || false,\n onDisplayModalPayment,\n subscription,\n });\n }\n\n return message;\n },\n [SUBSCRIPTION_STATUS.REGISTERED]: (subscription) => {\n const {\n cancelDate, cancelType, dueDate, substatus, id, type,\n } = subscription;\n\n const message = {\n status: substatus,\n text: null,\n url: null,\n };\n\n const history = useHistory();\n const activeRenewPath = `${locale('routes.subscriptions')}${locale('routes.manageSubscription')}/${id}/${type}`;\n\n const handleRedirect = (event) => {\n event.preventDefault();\n history.push(activeRenewPath);\n };\n\n if (cancelType && (cancelDate || dueDate)) {\n message.status = 'error';\n message.url = activeRenewPath;\n message.text = messagesLocale.registeredWithCancelTypeUserRequest({\n cancelDate: formatDate(cancelDate || dueDate),\n activeRenew: handleRedirect,\n activeRenewPath,\n });\n }\n\n return message;\n },\n [SUBSCRIPTION_STATUS.EXPIRED_CANCELLED]: (subscription) => {\n const {\n cancelDate, cancelType, substatus,\n } = subscription;\n\n const message = {\n status: substatus,\n text: null,\n url: null,\n };\n\n if (cancelDate && cancelType === null) {\n message.url = SITE_HG;\n message.text = messagesLocale.domainCancelledForNonPayment({\n cancelDate: formatDate(cancelDate),\n siteUrl: SITE_HG,\n });\n }\n\n if (cancelDate && cancelType === SUBSCRIPTIONS_CANCEL_TYPE.USER_REQUEST) {\n message.url = SITE_HG;\n message.text = messagesLocale.domainCancelledByClient({\n cancelDate: formatDate(cancelDate),\n siteUrl: SITE_HG,\n });\n }\n\n return message;\n },\n [SUBSCRIPTION_STATUS.EXPIRED]: (subscription) => {\n const { dueDate, invoiceId } = subscription;\n\n const message = {\n status: 'error',\n url: getInvoiceUrl(invoiceId),\n text: messagesLocale.domainExpired({\n dueDate: formatDate(dueDate),\n invoiceUrl: getInvoiceUrl(invoiceId),\n }),\n };\n\n return message;\n },\n [SUBSCRIPTION_STATUS.FRAUD_CANCELLED]: ({ substatus }) => {\n const message = {\n status: substatus,\n url: supportLocale.wizard(),\n text: messagesLocale.domainCancelledByFraud({\n supportUrl: supportLocale.wizard(),\n }),\n };\n\n return message;\n },\n [SUBSCRIPTION_STATUS.TRANSFERRED_AWAY]: ({ substatus }) => ({\n status: substatus,\n url: null,\n text: messagesLocale.transferredAway(),\n }),\n [SUBSCRIPTION_STATUS.TRANSFERRED_AWAY_OLD]: ({ substatus }) => ({\n status: substatus,\n url: null,\n text: messagesLocale.transferredAway(),\n }),\n});\n\nconst hosting = extend(defaultMessages, {});\nconst addon = extend(defaultMessages, {});\n\nconst rules = {\n domain,\n hosting,\n addon,\n};\n\nexport default rules;\n","import rules from './useSubscriptionsMessage.rules';\n\nconst useSubscriptionsMessage = (subscriptionList = [], deps = {}) => subscriptionList.map((subscription) => {\n const { type, status, substatus } = subscription;\n\n const property = `${status.toLowerCase()}/${substatus.toLowerCase()}`;\n\n const message = rules[type][property](subscription, deps);\n const subscriptionDecoratedWithMessage = {\n ...subscription,\n message,\n };\n return subscriptionDecoratedWithMessage;\n});\n\nexport default useSubscriptionsMessage;\n","import styled, { css } from 'styled-components';\nimport { Button } from '@/pages/common/v1/Button/Button.styles';\nimport { Wrapper as Radio, Dot as RadioDot } from '@/pages/common/inputs/Radio/Radio.styles';\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};;\n font-family: ${theme.v2.font.family.primary};\n padding: 32px;\n `}\n`;\n\nexport const Data = styled.div`\n ${({ hasInfo }) => css`\n padding-top: ${hasInfo ? '32px' : '0px'};\n `}\n`;\n\nexport const ContentInvoiceDetails = styled.div`\n${() => css`\n padding-top: 32px;\n`}\n`;\n\nexport const ContentFingerprint = styled.iframe`\n${() => css`\n width: 100px;\n height: 100px;\n border: 0;\n position: absolute;\n top: -5000px;\n`}\n`;\n\nexport const Header = styled.header``;\n\nexport const Title = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};;\n font-family: ${theme.v2.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0;\n padding: 0;\n `}\n`;\n\nexport const Description = styled.p`\n font-size: 16px;\n padding: 0;\n`;\n\nexport const OptionList = styled.ul`\n list-style: none;\n margin: 24px 0 0;\n padding: 0;\n`;\n\nexport const BlockoOptionItem = styled.div`\n display: flex;\n\n @media (max-width: 600px) {\n margin-top: 16px;\n &:not(:first-child) {\n margin-top: 24px;\n }\n }\n`;\n\nexport const OptionItem = styled.div`\n ${({ checked }) => css`\n background-size: contain;\n border-radius: ${checked ? 0 : '2px'};\n padding-right: 24px;\n\n &:hover {\n cursor: pointer;\n }\n `}\n`;\n\nexport const OptionItemWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.white.primary};\n display: flex;\n `}\n`;\n\nexport const OptionRadio = styled.div`\n ${({ theme, checked }) => css`\n ${Radio} {\n border-color: ${checked ? theme.v2.colors.neutral.lowDark : theme.v2.colors.neutral.lowLight};\n }\n\n ${RadioDot} {\n background-color: ${checked ? theme.v2.colors.neutral.lowDark : theme.v2.colors.neutral.lowLight};\n }\n `}\n`;\n\nexport const OptionContent = styled.div`\n padding-left: 8px;\n`;\n\nexport const OptionLabel = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 14px;\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: -0.19px;\n transition: color 200ms ease-in-out;\n `}\n`;\n\nexport const OptionDescription = styled.p`\n font-size: 14px;\n`;\n\nexport const Controls = styled.div`\n${({ isPix }) => css`\n display: flex;\n justify-content: center;\n margin-top: ${isPix ? '27px' : '32px'};\n `}\n`;\n\nexport const ControlButton = styled.div`\n ${() => css`\n &:not(:first-child) {\n margin-left: 12px;\n }\n\n @media (max-width: 600px) {\n ${Button} {\n font-size: 14px;\n }\n\n &:not(:first-child) {\n margin-left: 0;\n }\n }\n `}\n`;\n\nexport const BlockItemResume = styled.div`\n display: flex;\n width: 100%;\n @media (max-width: 600px) {\n > div {\n margin: 0px 32px 32px 0px;\n }\n }\n`;\n\nexport const Item = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:not(:first-child) {\n margin-left: 32px;\n }\n\n @media (max-width: 600px) {\n &:not(:first-child) {\n margin-left: 0;\n }\n }\n`;\n\nexport const ItemDiscount = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-left: 32px;\n width: max-content;\n\n @media (max-width: 600px) {\n &:not(:first-child) {\n margin-left: 0;\n }\n }\n`;\n\nexport const Label = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowDark};;\n display: inline-flex;\n font-size: 12px;\n font-family: ${theme.v2.font.family.primary};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 16px;\n width: max-content;\n `}\n`;\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};;\n font-size: 14px;\n font-family: ${theme.v2.font.family.primary};\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 22px;\n margin-top: 4px;\n width: max-content;\n\n `}\n`;\n\nexport const DiscountText = styled.text`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};;\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 22px;\n margin-top: 4px;\n width: max-content;\n\n > strong {\n padding: 0px 4px 0px 4px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n display: flow;\n }\n\n `}\n`;\n\nexport const WrapperData = styled.section`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.background.wizard};\n font-family: ${theme.v2.font.family.primary};\n padding: 16px 24px 16px 24px;\n `}\n`;\n\nexport const WrapperCreditCard = styled.div`\n${({ theme }) => css`\n > div {\n > div {\n > div {\n > div {\n padding: 0px 24px 16px 16px;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n padding: 0px 8px 16px 8px;\n }\n }\n }\n }\n }\n `}\n`;\n\nexport const WrapperInfo = styled.section`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v1.color.background.wizard};\n font-family: ${theme.v2.font.family.primary};\n justify-content: center;\n padding: 16px 24px 16px 24px;\n text-align:center;\n `}\n`;\nexport const WrapperInfoPix = styled.section`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v1.color.background.wizard};\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n justify-content: center;\n padding: 16px 24px 16px 24px;\n text-align: left;\n `}\n`;\nexport const DescriptionInfo = styled.p`\n font-size:12px;\n margin: 8px 0px 0px 0px;\n`;\nexport const ContentCloseButton = styled.div`\n position: absolute;\n top: 20px;\n right: 20px;\n`;\nexport const ContentData = styled.div`\n ${({ theme }) => css`\n display: flex;\n\n &:not(:first-child) {\n margin-top: 24px;\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n flex-direction: column;\n }\n `}\n`;\nexport const ContentPaymentSelector = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};;\n font-family: ${theme.v2.font.family.primary};\n font-weight: ${theme.v1.font.weights.medium};\n padding: 32px 0px 0px 0px;\n\n `}\n`;\n\nexport const ContentOptionsInSelectord = styled.div`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowDark};;\n display:flex;\n font-family: ${theme.v2.font.family.primary};\n justify-content: flex-start;\n padding-top: 16px;\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n display:contents;\n }\n\n `}\n`;\n\nexport const ContentDoubts = styled.div`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n font-size: 12px;\n text-align: center;\n z-index: 99;\n `}\n`;\n\nexport const Chip = styled.span`\n margin-left:8px;\n position: relative;\n top: -2px;\n`;\n\nexport const ContentInfoSucess = styled.div`\n ${({ theme, hasSplitInfo }) => css`\n background-color: ${theme.v2.colors.feedback.activeUltralight};\n display: flex;\n height: auto;\n margin: ${hasSplitInfo ? '0px 0px 8px 0px' : '0px'};\n padding: 16px 16px 16px 16px;\n text-align: left;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n\n margin-top: 0px;\n padding: 16px;\n text-align: left;\n width: 100%;\n }\n\n`}\n`;\n\nexport const DescriptionInfoSuccess = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activeMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v2.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: normal;\n margin: 0px auto 0px 0px;\n padding: 0px 0px 0px 8px;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n margin: 0px 0px 0px auto;\n text-align: left;\n width: 100%;\n }\n `}\n`;\n\nexport const ContentInfoSplitPayment = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.brand.primaryUltraLight};\n display: flex;\n height: auto;\n padding: 16px 16px 16px 16px;\n text-align: left;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n\n margin-top: 0px;\n padding: 16px;\n text-align: left;\n width: 100%;\n }\n\n`}\n`;\n\nexport const DescriptionInfoSplitPayment = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: normal;\n margin: 0px auto 0px 0px;\n padding: 0px 0px 0px 8px;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n margin: 0px 0px 0px auto;\n text-align: left;\n width: 100%;\n }\n span {\n font-weight: ${theme.v2.font.weights.bold};\n }\n a {\n font-size: 14px;\n }\n `}\n`;\n\nexport const ContentIcon = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n width: 24px;\n`;\n\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 14px;\n padding: 0px 0px 24px 0px;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin: 32px 0px 0px 0px;\n text-align: initial;\n\n }\n `}\n`;\n\nexport const LineThrough = styled.span`\n text-decoration: line-through;\n`;\n\nexport const TagWrapper = styled.div`\n${({ theme }) => css`\n\n> div {\n background-color: ${theme.v2.colors.feedback.activePure};\n border-radius: 4px;\n font-weight: ${theme.v2.font.weights.bold};\n padding: 4px 8px;\n}\n`}\n`;\n","export const BOLETO = 'boleto';\nexport const CREDIT_CARD = 'braspag_credit_1x';\nexport const PAYPAL = 'paypal';\n\nexport const PARC_2X = 'cieloparc2';\nexport const PARC_3X = 'cieloparc3';\nexport const PARC_4X = 'cieloparc4';\nexport const PARC_5X = 'cieloparc5';\nexport const PARC_6X = 'cieloparc6';\n\nexport const BRASPAG_CREDIT = 'braspag_credit';\nexport const BRASPAG_PARC_1X = 'braspag_credit_1x';\nexport const BRASPAG_PARC_2X = 'braspag_credit_2x';\nexport const BRASPAG_PARC_3X = 'braspag_credit_3x';\nexport const BRASPAG_PARC_4X = 'braspag_credit_4x';\nexport const BRASPAG_PARC_5X = 'braspag_credit_5x';\nexport const BRASPAG_PARC_6X = 'braspag_credit_6x';\nexport const BRASPAG_PARC_7X = 'braspag_credit_7x';\nexport const BRASPAG_PARC_8X = 'braspag_credit_8x';\nexport const BRASPAG_PARC_9X = 'braspag_credit_9x';\nexport const BRASPAG_PARC_10X = 'braspag_credit_10x';\nexport const BRASPAG_PARC_11X = 'braspag_credit_11x';\nexport const BRASPAG_PARC_12X = 'braspag_credit_12x';\nexport const GATORPAY_BOLETO = 'gp_boleto';\nexport const GATORPAY_PAYPAL = 'gp_paypal';\n\n/* LATAM PAYMENT METHODS */\n/* CREDIT CARD ES */\nexport const CREDIT_CARD_ES = 'dlocal';\n/* BOLETO CHILE | COLOMBIA */\nexport const BOLETO_CL_CO = 'dlocalcash';\n/* BOLETO MEXICO */\nexport const BOLETO_MX = 'payu_boleto';\n\nexport const PIX = 'gp_pix';\n\nexport const TICKET_ES = 'dlocalcash';\n\nexport const PAYMENT_TYPE = {\n CASH_PAYMENT: 'cash_payment',\n WALLET: 'wallet',\n QR_PAYMENT: 'qr_payment',\n GP_PAYPAL: 'gp_paypal',\n BANK_TRANSFER: 'bank_transfer',\n};\n\nexport const LIST_CREDIT_CARD_METHODS = [CREDIT_CARD, CREDIT_CARD_ES, PARC_2X, PARC_3X,\n PARC_4X, PARC_5X, PARC_6X, BRASPAG_PARC_1X, BRASPAG_PARC_2X, BRASPAG_PARC_3X,\n BRASPAG_PARC_4X, BRASPAG_PARC_5X, BRASPAG_PARC_6X, BRASPAG_PARC_7X, BRASPAG_PARC_8X,\n BRASPAG_PARC_9X, BRASPAG_PARC_10X, BRASPAG_PARC_11X, BRASPAG_PARC_12X];\n\nexport const LIST_BOLETO_METHODS = [BOLETO_CL_CO, BOLETO_MX, BOLETO, GATORPAY_BOLETO];\n\nexport const LIST_PAYPAL_METHODS = [GATORPAY_PAYPAL, PAYPAL];\n","import { CALL_API } from '@/middleware/api';\nimport {\n PAYPAL_AGREEMENT,\n PAYPAL_CANCEL_AGREEMENT,\n PAYPAL_CREATE_AGREEMENT_TOKEN,\n PAYPAL_PAYMENT_AGREEMENT,\n} from '@/config/api';\nimport {\n REQUEST_PAYPAL_VERIFY_AGREEMENT,\n RECEIVE_PAYPAL_VERIFY_AGREEMENT,\n ERROR_PAYPAL_VERIFY_AGREEMENT,\n REQUEST_PAYPAL_CREATE_AGREEMENT_TOKEN,\n RECEIVE_PAYPAL_CREATE_AGREEMENT_TOKEN,\n ERROR_PAYPAL_CREATE_AGREEMENT_TOKEN,\n REQUEST_PAYPAL_CREATE_AGREEMENT,\n RECEIVE_PAYPAL_CREATE_AGREEMENT,\n ERROR_PAYPAL_CREATE_AGREEMENT,\n REQUEST_PAYPAL_PAYMENT_AGREEMENT,\n RECEIVE_PAYPAL_PAYMENT_AGREEMENT,\n ERROR_PAYPAL_PAYMENT_AGREEMENT,\n REQUEST_PAYPAL_CANCEL_AGREEMENT,\n RECEIVE_PAYPAL_CANCEL_AGREEMENT,\n ERROR_PAYPAL_CANCEL_AGREEMENT,\n} from './actionsTypes';\n\nexport const verifyAgreementClient = () => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: PAYPAL_AGREEMENT,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_PAYPAL_VERIFY_AGREEMENT }),\n success: ({\n // eslint-disable-next-line camelcase\n success, agreement_id, payer_email, payer_first_name, payer_last,\n }) => ({\n type: RECEIVE_PAYPAL_VERIFY_AGREEMENT,\n success,\n agreementId: agreement_id,\n payerEmail: payer_email,\n payerFirstName: payer_first_name,\n payerLast: payer_last,\n }),\n error: () => ({ type: ERROR_PAYPAL_VERIFY_AGREEMENT }),\n },\n },\n});\n\n\nexport const createAgreementToken = () => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: PAYPAL_CREATE_AGREEMENT_TOKEN,\n method: 'POST',\n actionTypes: {\n request: () => ({ type: REQUEST_PAYPAL_CREATE_AGREEMENT_TOKEN }),\n success: ({ token_id: tokenId }) => ({ type: RECEIVE_PAYPAL_CREATE_AGREEMENT_TOKEN, tokenId }),\n error: () => ({ type: ERROR_PAYPAL_CREATE_AGREEMENT_TOKEN }),\n },\n },\n});\n\nexport const createAgreement = tokenId => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: PAYPAL_AGREEMENT,\n method: 'POST',\n body: { token_id: tokenId },\n actionTypes: {\n request: () => ({ type: REQUEST_PAYPAL_CREATE_AGREEMENT }),\n success: () => ({ type: RECEIVE_PAYPAL_CREATE_AGREEMENT }),\n error: () => ({ type: ERROR_PAYPAL_CREATE_AGREEMENT }),\n },\n },\n});\n\nexport const paymentAgreement = invoiceId => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: PAYPAL_PAYMENT_AGREEMENT,\n method: 'POST',\n body: { invoice_id: invoiceId },\n actionTypes: {\n request: () => ({ type: REQUEST_PAYPAL_PAYMENT_AGREEMENT }),\n success: () => ({ type: RECEIVE_PAYPAL_PAYMENT_AGREEMENT }),\n error: ({ response }) => ({ type: ERROR_PAYPAL_PAYMENT_AGREEMENT, message: response.data.message }),\n },\n },\n});\n\nexport const cancelAgreementWithBody = () => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: `${PAYPAL_CANCEL_AGREEMENT}`,\n method: 'POST',\n body: { cancel_on_paypal: true },\n\n actionTypes: {\n request: () => ({ type: REQUEST_PAYPAL_CANCEL_AGREEMENT }),\n success: () => ({ type: RECEIVE_PAYPAL_CANCEL_AGREEMENT }),\n error: () => ({ type: ERROR_PAYPAL_CANCEL_AGREEMENT }),\n },\n },\n});\n\n\nexport const cancelAgreement = () => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: `${PAYPAL_CANCEL_AGREEMENT}`,\n method: 'POST',\n actionTypes: {\n request: () => ({ type: REQUEST_PAYPAL_CANCEL_AGREEMENT }),\n success: () => ({ type: RECEIVE_PAYPAL_CANCEL_AGREEMENT }),\n error: () => ({ type: ERROR_PAYPAL_CANCEL_AGREEMENT }),\n },\n },\n});\n","import PropTypes from 'prop-types';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\n\n\nconst CurrencyFormat = ({ children }) => formatCurrency(children);\n\nCurrencyFormat.propTypes = {\n children: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n\nCurrencyFormat.defaultProps = {\n children: 0,\n};\n\nexport default CurrencyFormat;\n","import PropTypes from 'prop-types';\n\n\nconst invoiceType = PropTypes.shape({\n id: PropTypes.number,\n date: PropTypes.string,\n duedate: PropTypes.string,\n totalStatus: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]),\n statusMessage: PropTypes.string,\n isExpired: PropTypes.bool,\n status: PropTypes.string,\n invoice_detail: PropTypes.string,\n});\n\nexport default invoiceType;\n","const styles = theme => ({\n taxesWrapper: {\n alignItems: 'center',\n display: 'flex',\n gap: '4px',\n justifyContent: 'flex-end',\n },\n tRowBorder: {\n borderLeft: `1px solid ${theme.color.mystic}`,\n width: '35%',\n },\n tRowAlign: {\n textAlign: 'right',\n },\n tableMain: {\n border: `1px solid ${theme.color.mystic}`,\n },\n tableHeader: {\n backgroundColor: theme.color.mystic,\n '& tr': {\n height: 'auto',\n },\n '& tr th': {\n padding: '10px 15px',\n color: theme.color.tundora,\n fontWeight: '400',\n },\n '& tr > th': {\n '&:last-child': {\n padding: '10px 15px',\n },\n\n },\n },\n tableBody: {\n '& > tr': {\n height: 'auto',\n },\n '& > tr > td': {\n [theme.breakpoints.down('xs')]: {\n '&:last-child': {\n padding: '7px 15px',\n },\n padding: '7px 15px',\n },\n '&:last-child': {\n padding: '10px 15px',\n },\n padding: '10px 15px',\n fontSize: '12px',\n },\n },\n tableTextBold: {\n fontWeight: '500',\n },\n tableValueTd: {\n [theme.breakpoints.down('xs')]: {\n whiteSpace: 'nowrap',\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withI18n } from 'react-i18next';\nimport {\n Table, TableRow, TableCell, TableBody, TableHead, withStyles,\n} from '@material-ui/core';\n\nimport invoiceType from '@/types/invoiceType';\nimport CurrencyFormat from '@/components/CurrencyFormat';\nimport styles from './styles';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { IconInfo, Tooltip } from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale';\n\n\nconst InvoiceDetails = ({\n classes,\n invoice,\n t,\n variant,\n}) => {\n const {\n usePaymentModal: paymentModalLocale,\n } = useLocale();\n\n const currentTaxes = (invoice.tax && Number(invoice.tax)) || 0;\n const extraTaxesSum = (invoice.extraTaxes && invoice.extraTaxes.reduce((acc, tax) => acc + tax.taxTotal, 0)) || 0;\n const totalTaxes = currentTaxes + extraTaxesSum;\n\n const getProductName = (name) => {\n if (name.includes('(') && variant === 'clean') {\n const regex = /\\(\\d{2}/;\n return name.split(regex)[0];\n }\n return name;\n };\n\n return (\n \n {variant !== 'clean' && (\n \n \n {t('invoiceDescription')} \n {t('invoiceValue')} \n \n \n )}\n \n {invoice.items && Object.keys(invoice.items).map(id => (\n \n \n {getProductName(invoice.items[id].description)}\n \n \n {invoice.items[id].amount} \n \n \n ))}\n \n \n {t('invoiceSubtotal')}\n \n \n {invoice.subtotal} \n \n \n\n \n \n {t('invoiceCredit')}\n \n \n {invoice.credit} \n \n \n\n \n \n {t('invoiceTaxes')}\n \n \n {totalTaxes} \n \n \n\n\n {invoice.extraTaxes && invoice.extraTaxes.map((tax, index) => (\n 1 && index === 0}\n isVat\n >\n \n \n {`VAT: ${tax.taxRate}% ${tax.taxName}`}\n \n \n \n \n {formatCurrency(tax.taxTotal)} \n \n ))}\n\n\n \n \n {t('invoicePaidValue')}\n \n \n {invoice.amountpaid} \n \n \n\n \n \n {t('invoiceUnpaidValue')} \n \n \n {invoice.balance} \n \n\n \n
\n );\n};\n\nInvoiceDetails.propTypes = {\n invoice: invoiceType.isRequired,\n variant: PropTypes.string,\n classes: PropTypes.shape({\n tableHeader: PropTypes.string,\n }).isRequired,\n};\n\nexport default withStyles(styles)(withI18n()(InvoiceDetails));\n","const styles = theme => ({\n container: {\n borderRadius: 0,\n marginTop: '20px',\n marginBottom: '15px',\n fontWeight: 500,\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n },\n unpaid: {\n borderLeft: `5px solid ${theme.color.valencia}`,\n '& .receiptIcon': {\n color: theme.color.valencia,\n },\n },\n unpaidExpired: {\n borderLeft: `5px solid ${theme.color.valencia}`,\n '& .receiptIcon': {\n color: theme.color.valencia,\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { Card, withStyles } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nfunction InvoiceSummaryCard({ children, classes, status }) {\n return (\n \n {children}\n \n );\n}\n\nexport default withStyles(styles, { withTheme: true })(InvoiceSummaryCard);\n","import styled, { css } from 'styled-components';\n\nexport const ButtonContainer = styled.div`\n ${({ $loadingPaypalPayment }) => css`\n display: ${$loadingPaypalPayment ? 'none' : 'block'};\n min-height: 40px\n `}\n`;\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useEffect } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { withI18n } from 'react-i18next';\nimport PropTypes from 'prop-types';\nimport { loadScript } from '@/utils/ThirdParties/loadUniqueScripts';\nimport { notifierError } from '@/utils/Application/notifier';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport { PAYPAL_CHECKOUT_SCRIPT_URL } from '@/config/externalScriptsUrl';\nimport {\n createAgreementToken,\n createAgreement,\n paymentAgreement,\n cancelAgreement,\n cancelAgreementWithBody,\n} from '@/redux/actions/paypal';\nimport { ERROR_PAYPAL_PAYMENT_AGREEMENT } from '@/redux/actions/actionsTypes';\nimport { config, IS_PROD } from '@/config';\nimport { IconLoading } from 'gatorcomponents';\nimport * as Styles from './PaypalButton.styles';\nimport { commonActions } from '@/redux/modules';\nimport { locale } from '@/utils/locale';\n\nconst PaypalButton = ({\n isAgreement,\n invoiceId,\n onSuccess,\n onError,\n onSetLoadingPaypalScript,\n onLoadingPaypalScript,\n switchPaymentMethod,\n isCreateNewAccount,\n insidePaymentModalV2,\n loadingPaypalPayment,\n}) => {\n const dispatch = useDispatch();\n const ERROR_GATORPAY_PAYPAL_AGREEMENT = 'gatorpay.paypal.agreement_cancelled';\n\n const URL_PAYPAL = IS_PROD ? 'https://www.paypal.com/cgi-bin/webscr?cmd=_logout' : 'https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_logout';\n\n const handleCancelAgreement = () => (dispatch(cancelAgreement()));\n\n const handleValidateAgreement = (data) => {\n if (isCreateNewAccount) {\n data.enable();\n return true;\n }\n if (isAgreement) {\n data.disable();\n return false;\n }\n data.enable();\n return true;\n };\n\n\n const handlePayment = async () => {\n const data = await dispatch(paymentAgreement(invoiceId));\n if (data.type === ERROR_PAYPAL_PAYMENT_AGREEMENT) {\n if (data.message === ERROR_GATORPAY_PAYPAL_AGREEMENT) {\n dispatch(enqueueSnackbar('snackbar.paypal.error.agreement_cancelled', notifierError));\n handleCancelAgreement();\n onError();\n return;\n }\n\n dispatch(commonActions.notifications.set({\n label: locale('snackbar.paypal.error.service_error'),\n type: 'error',\n }));\n return;\n }\n\n if (!insidePaymentModalV2) {\n dispatch(commonActions.notifications.set({\n label: locale('snackbar.paypal.success'),\n type: 'success',\n }));\n }\n\n onSuccess();\n };\n\n const handleSwitchPaymentMethod = () => {\n switchPaymentMethod();\n };\n\n const handleOnClick = async () => {\n if (isAgreement && !isCreateNewAccount) {\n if (!switchPaymentMethod) {\n handlePayment();\n }\n switchPaymentMethod && switchPaymentMethod();\n }\n };\n\n\n const handleCreateAgreementToken = () => (dispatch(createAgreementToken()).then(value => value.tokenId));\n\n const handleCreateAgreement = (data) => {\n if (isCreateNewAccount) {\n return dispatch(cancelAgreementWithBody()).then(() => {\n dispatch(createAgreement(data.billingToken)).then(() => {\n if (!switchPaymentMethod) {\n handlePayment();\n }\n switchPaymentMethod && handleSwitchPaymentMethod();\n });\n });\n }\n return dispatch(createAgreement(data.billingToken)).then(() => {\n if (!switchPaymentMethod) {\n handlePayment();\n }\n switchPaymentMethod && handleSwitchPaymentMethod();\n });\n };\n\n const handleButton = async () => {\n const buttonParams = {\n locale: config.LANG.paypal,\n style: {\n color: 'blue',\n shape: 'rect',\n size: 'responsive',\n label: 'pay',\n tagline: false,\n height: 36,\n },\n env: config.PAYPAL_ENVIRONMENT,\n validate: handleValidateAgreement,\n onClick: handleOnClick,\n payment: handleCreateAgreementToken,\n onAuthorize: handleCreateAgreement,\n };\n\n if (insidePaymentModalV2) {\n buttonParams.style.shape = 'pill';\n buttonParams.style.width = 280;\n buttonParams.style.height = 40;\n }\n\n window.paypal.Button.render(buttonParams, '#paypal-container-button');\n\n if (insidePaymentModalV2) {\n document.querySelector('.zoid-outlet').style.width = '280px';\n }\n };\n\n const handlePaypalFlow = () => {\n if (window.paypal === undefined) {\n onSetLoadingPaypalScript('loading');\n loadScript({ id: 'paypal-objects-checkout', src: PAYPAL_CHECKOUT_SCRIPT_URL }).then(() => {\n handleButton();\n onSetLoadingPaypalScript('finish');\n });\n } else {\n handleButton();\n onSetLoadingPaypalScript('finish');\n }\n };\n\n useEffect(() => {\n handlePaypalFlow();\n }, []);\n\n return (\n <>\n {(loadingPaypalPayment || onLoadingPaypalScript !== 'finish') && (\n \n \n \n \n);\n\nexport default IconPaypalLogo;\n","import React from 'react';\n\nconst IconCardAmericanExpress = ({ className }) => (\n \n \n \n \n);\n\nexport default IconCardAmericanExpress;\n","import React from 'react';\n\nconst IconCardElo = ({ className }) => (\n \n \n \n \n);\n\nexport default IconCardElo;\n","import React from 'react';\n\nconst IconCardHiper = ({ className }) => (\n \n \n \n \n);\n\nexport default IconCardHiper;\n","import React from 'react';\n\nconst IconCardMaster = ({ className }) => (\n \n \n \n \n \n \n);\n\nexport default IconCardMaster;\n","import React from 'react';\n\nconst IconCardVisa = ({ className }) => (\n \n \n \n \n);\n\nexport default IconCardVisa;\n","import React from 'react';\nimport { withStyles } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport { isBRServer } from '@/utils/Validators/validation';\n\nimport styles from './styles';\n\nimport {\n IconCardAmericanExpress,\n IconCardElo,\n IconCardHiper,\n IconCardMaster,\n IconCardVisa,\n IconPaypalLogo,\n} from './Icons';\n\nconst PaypalCard = ({\n t,\n classes,\n isNewLayout = false,\n}) => (\n \n
\n
\n
\n
{t('dialogPaypal.titleContainer')}
\n
\n
\n
\n
\n
\n \n {t('dialogPaypal.featureTitleFirst')}
\n {t('dialogPaypal.featureDescriptionFirst')}
\n \n \n {t('dialogPaypal.featureTitleSecond')}
\n {t('dialogPaypal.featureDescriptionSecond')}
\n \n \n {t('dialogPaypal.featureTitleThree')}
\n {t('dialogPaypal.featureDescriptionThree')}
\n \n \n
\n \n \n {defaultAccountLabel}\n \n\n \n {userName}\n \n\n \n {userEmail}\n \n \n\n \n \n {addNewAccountLabel}\n \n\n \n {defaultInfoUseDefaultAccountLabel}\n \n \n \n );\n }\n\n return (\n \n \n {infoPaymentByPicPayLabel}\n \n\n \n {selectActionPayPalLabel}\n \n\n \n \n \n \n \n \n \n {defaultAccountLabel}\n \n \n \n {userName}\n \n \n {userEmail}\n \n
\n \n\n \n \n \n \n \n \n \n \n {addNewAccountLabel}\n \n \n {defaultInfoUseDefaultAccountLabel}\n \n \n \n \n\n \n\n \n \n \n \n {infoChangePaymentByPayPalLabel}\n\n \n \n \n );\n};\n\nPayPalChangeAccount.propTypes = {\n defaultAccountLabel: PropTypes.string,\n addNewAccountLabel: PropTypes.string,\n defaultInfoUseDefaultAccountLabel: PropTypes.string,\n userName: PropTypes.string,\n userEmail: PropTypes.string,\n selectActionPayPalLabel: PropTypes.string,\n infoPaymentByPicPayLabel: PropTypes.string,\n infoChangePaymentByPayPalLabel: PropTypes.string,\n updatePaymentOptionByPayPal: PropTypes.func,\n isSubscriptionsPage: PropTypes.bool,\n insidePaymentModalV2: PropTypes.bool,\n};\n\nexport default PayPalChangeAccount;\n","export const PaypalActionTypes = {\n\n CALLING_BY_SWITCH_PAYMENT_METHOD_MODAL: 'payment_method_modal_by_subscriptions',\n CALLING_BY_PAYMENT_MODAL: 'payment_modal_by_manager_subscriptions',\n CALLING_BY_MANAGER_INVOICES: 'payment_modal_by_manager_invoices',\n CALLING_BY_LIST_SUBSCRIPTIONS: 'payment_modal_by_list_subscriptions',\n\n};\n","import styled, { css } from 'styled-components';\n\n\nexport const SelectAccount = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n line-height: ${theme.v2.font.lineHeight.text};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 0px 0px 24px 0px\n `}\n`;\n\nexport const PaypalContentWrapper = styled.div`\n align-items:center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-width: 100%;\n width: 100%;\n`;\n\nexport const ButtonWrapper = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n margin: 24px 0px 0px 0px;\n max-width: 280px;\n width: 100%;\n`;\n\nexport const AlertWrapper = styled.div`\n ${({ theme }) => css`\n margin: 20px;\n width: calc(100% - 40px);\n\n > div {\n align-items: center;\n background-color: ${theme.v2.colors.brand.primaryLowLight}\n display: flex;\n padding: 8px;\n }\n `}\n`;\n\nexport const Directions = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n line-height: ${theme.v2.font.lineHeight.text};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 24px 0px 0px 0px\n `}\n`;\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { Fragment, useState, useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { withI18n } from 'react-i18next';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport withMobileDialog from '@material-ui/core/withMobileDialog';\nimport Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\nimport {\n IconButton, Typography, CardContent, CardActions, Collapse, withStyles, DialogActions,\n} from '@material-ui/core';\nimport { Close, Receipt, ExpandMore } from '@material-ui/icons';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { loadInvoiceDetails, updateStatusInvoiceToConfirmingPayment } from '@/redux/actions/invoices';\nimport { verifyAgreementClient } from '@/redux/actions/paypal';\nimport InvoiceDetails from '@/components/Invoices/InvoiceDetails';\nimport InvoiceSummaryCard from '@/components/Cards/InvoiceSummaryCard';\nimport WarningNotice from '@/components/Notification/WarningNotice/index';\nimport Loader from '@/components/Layout/Loader';\nimport PaypalButton from '@/components/Paypal/PaypalButton';\nimport PaypalCard from '@/components/Paypal/PaypalCard';\nimport { PAYMENT_STATUS } from '@/pages/Invoices/types';\nimport { cancelBuyPayPalByPortalClick } from '@/utils/ThirdParties/tagManager';\nimport styles from './styles';\nimport { PaypalChangeAccount } from '../PayPalChangeAccount';\nimport useLocale from '@/hooks/useLocale';\nimport { billingAnalytics } from '@/analytics';\nimport { PaypalActionTypes } from './Paypal.types';\nimport * as Styles from './PaypalDialog.styles';\nimport { Alert, Skeleton } from 'gatorcomponents';\nimport { PaymentMethodsTypes } from '@/hooks/billing/subscriptions/usePaymentModal/usePaymentModal.types';\n\nconst PaypalDialog = ({\n invoiceId,\n invoiceStatusMessage,\n close,\n classes,\n t,\n onPaymentExecuted,\n showResumeData = true,\n displayActionButton = true,\n updateAgreementPayPal,\n switchPaymentMethod,\n isSubscriptionsPage = false,\n enabledChangePayPalAccount,\n labelsLocale,\n callingOrigin = '',\n insidePaymentModalV2,\n}) => {\n const loadingPaypalPayment = useSelector(state => state.paypal.loadingPaypalPayment);\n\n const {\n subscription,\n } = useSelector(state => state.billing);\n const { switchPaymentMethod: switchPaymentMethodReducer } = subscription;\n const { loading: loadingSwitchPaymentMethod } = switchPaymentMethodReducer;\n\n\n const [showDetails, setShowDetails] = useState(false);\n const [invoiceDetails, setInvoiceDetails] = useState({});\n const [loadAgreement, setLoadAgreement] = useState(false);\n const [agreement, setAgreement] = useState(false);\n const [loadingPaypalScript, setLoadingPaypalScript] = useState('');\n const [isCreateNewAccount, setCreateNewAccount] = useState(false);\n const [tryiedToLoadAgreement, setTryiedToLoadAgreement] = useState(false);\n\n const [payerEmail, setpayerEmail] = useState('...');\n const [payerUserName, setPayerUserName] = useState('...');\n const isNewLayout = !showResumeData;\n const dispatch = useDispatch();\n const {\n billing: billingLocale,\n usePaymentModal: usePaymentModalLocale,\n } = useLocale();\n\n const [labelsChangeAccountModal, setLabelsChangeAccountModal] = useState(labelsLocale);\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n\n const isCallingModalByManagerInvoices = callingOrigin => [PaypalActionTypes.CALLING_BY_MANAGER_INVOICES, PaypalActionTypes.CALLING_BY_LIST_SUBSCRIPTIONS].includes(callingOrigin);\n\n useEffect(() => {\n if (!labelsChangeAccountModal) {\n const { manageSubscriptionPaymentInvoiceModal } = billingLocale;\n setLabelsChangeAccountModal(manageSubscriptionPaymentInvoiceModal);\n }\n }, []);\n\n const handleCheckAgreement = async () => {\n if (!tryiedToLoadAgreement) {\n setTryiedToLoadAgreement(true);\n\n try {\n const {\n success, payerEmail, payerFirstName, payerLast,\n } = await dispatch(verifyAgreementClient());\n setAgreement(success);\n updateAgreementPayPal && updateAgreementPayPal(success);\n setLoadAgreement(true);\n setpayerEmail(payerEmail);\n setPayerUserName(`${payerFirstName} ${payerLast}`);\n } catch (error) {\n setAgreement(false);\n }\n }\n };\n\n const handleExpand = async () => {\n setShowDetails(!showDetails);\n\n if (!Object.prototype.hasOwnProperty.call(invoiceDetails, 'id')) {\n const data = await dispatch(loadInvoiceDetails(invoiceId));\n setInvoiceDetails(data.invoice);\n }\n };\n\n\n const handleSuccess = () => {\n if (!insidePaymentModalV2) {\n close && close();\n }\n\n onPaymentExecuted({ status: PAYMENT_STATUS.SUCCESS }, isCallingModalByManagerInvoices(callingOrigin) === PaypalActionTypes.CALLING_BY_MANAGER_INVOICES ? t('routes.invoices') : t('routes.subscriptions'));\n\n dispatch(updateStatusInvoiceToConfirmingPayment(invoiceId));\n };\n\n const handleError = () => {\n close();\n };\n\n useEffect(() => {\n handleCheckAgreement();\n }, [handleCheckAgreement]);\n\n const cancelHgAcademyGAEvent = async () => {\n if (!Object.prototype.hasOwnProperty.call(invoiceDetails, 'id')) {\n const data = await dispatch(loadInvoiceDetails(invoiceId));\n const invoiceDesc = data.invoice.items[0] ? data.invoice.items[0].description : '';\n const matched = invoiceDesc.match(/Hostgator Academy Pass/);\n if (matched && matched.length > 0) {\n cancelBuyPayPalByPortalClick();\n }\n }\n };\n\n const updatePaymentOptionByPayPal = (data) => {\n setCreateNewAccount(data === 'add_new');\n callingOrigin === PaypalActionTypes.CALLING_BY_SWITCH_PAYMENT_METHOD_MODAL && subscriptionAnalytics.changePaymentMethodClick(data === 'add_new' ? '3_usar_paypal_novo' : '3_usar_paypal_cadastrado');\n\n callingOrigin === PaypalActionTypes.CALLING_BY_PAYMENT_MODAL && subscriptionAnalytics.executePaymentClick(data === 'add_new' ? '3_usar_paypal_novo' : '3_usar_paypal_cadastrado');\n\n callingOrigin === PaypalActionTypes.CALLING_BY_MANAGER_INVOICES && subscriptionAnalytics.executePaymentInvoiceManagerClick(data === 'add_new' ? '3_usar_paypal_novo' : '3_usar_paypal_cadastrado');\n };\n\n const renderPayPalButton = () => (\n \n \n );\n\n if (insidePaymentModalV2) {\n return (\n <>\n \n {(!loadAgreement) && (\n \n {usePaymentModalLocale.paymentMethods[PaymentMethodsTypes.GP_PAYPAL].selectAccount}\n \n )}\n\n {enabledChangePayPalAccount && agreement && (\n \n \n )}\n\n {loadAgreement && !isCreateNewAccount && renderPayPalButton()}\n {isCreateNewAccount && renderPayPalButton()}\n\n {!loadAgreement && (\n \n {usePaymentModalLocale.paymentMethods[PaymentMethodsTypes.GP_PAYPAL].directions}\n \n )}\n\n \n\n \n \n \n );\n }\n\n return (\n \n {showResumeData && (\n \n \n {t('dialogPaypal.title')} \n \n \n
\n \n )}\n \n {showResumeData && (\n <>\n \n \n \n \n {t('dialog.invoiceDetails')} \n
\n \n \n \n \n\n \n \n \n {invoiceDetails.id ? (\n \n \n ) : (\n \n \n \n \n \n \n )}\n {enabledChangePayPalAccount && agreement && (\n \n\n\n {isNewLayout && (\n \n {loadingPaypalScript === 'finish' && showResumeData && displayActionButton && (\n { close(); cancelHgAcademyGAEvent(); }}\n variant=\"outlined\"\n >\n {t('cancel')}\n \n )}\n {loadAgreement && !isCreateNewAccount && renderPayPalButton()}\n\n {isCreateNewAccount && renderPayPalButton()}\n \n )}\n\n \n );\n};\n\nPaypalDialog.propTypes = {\n invoiceId: PropTypes.string.isRequired,\n invoiceStatusMessage: PropTypes.string,\n close: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles, { withTheme: true })(\n withI18n()(withMobileDialog()(PaypalDialog)),\n);\n","import { CALL_API } from '@/middleware/api';\nimport { CREDIT_CARD_INSTALLMENTS, CREDIT_CARD_INSTALLMENTS_BY_PRODUCT_DATA, CREDIT_CARD_URL } from '@/config/api';\nimport {\n REQUEST_CREDIT_CARD, RECEIVE_CREDIT_CARD, ERROR_CREDIT_CARD,\n DELETE_CREDIT_CARD_START, DELETE_CREDIT_CARD_SUCCESS, DELETE_CREDIT_CARD_ERROR,\n SAVE_CREDIT_CARD_START, SAVE_CREDIT_CARD_SUCCESS, SAVE_CREDIT_CARD_ERROR, CREDIT_CARD_INSTALLMENTS_SUCCESS, REQUEST_CREDIT_CARD_INSTALLMENTS, CREDIT_CARD_INSTALLMENTS_ERROR,\n} from './actionsTypes';\n\n\nfunction receiveCreditCard(creditCard) {\n return {\n type: RECEIVE_CREDIT_CARD,\n creditCard,\n };\n}\n\nexport function loadCreditCard() {\n return {\n [CALL_API]: {\n authenticated: true,\n endpoint: CREDIT_CARD_URL,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_CREDIT_CARD }),\n success: response => receiveCreditCard(response.data),\n error: () => ({ type: ERROR_CREDIT_CARD }),\n },\n },\n };\n}\n\n\nexport function removeCreditCard() {\n return {\n [CALL_API]: {\n authenticated: true,\n endpoint: `${CREDIT_CARD_URL}/remove`,\n method: 'DELETE',\n actionTypes: {\n request: () => ({ type: DELETE_CREDIT_CARD_START }),\n success: () => ({ type: DELETE_CREDIT_CARD_SUCCESS }),\n error: () => ({ type: DELETE_CREDIT_CARD_ERROR }),\n },\n },\n };\n}\n\nfunction verifyOnSaveCreditCard(response, data) {\n // eslint-disable-next-line no-param-reassign\n delete data.recaptcha;\n if (response.data && Object.prototype.hasOwnProperty.call(response.data, 'success') && response.data.success) {\n const { ccnumber, expdate, ...restData } = data;\n return {\n type: SAVE_CREDIT_CARD_SUCCESS,\n data: {\n ...restData,\n cardlastfour: ccnumber.replace(/.(?=.{4,}$)/g, '*').padStart(15, '*'),\n expdate: expdate.split('-').reverse().join('/'),\n },\n };\n }\n return {\n type: SAVE_CREDIT_CARD_ERROR,\n };\n}\n\nexport function saveCreditCard(data) {\n return {\n [CALL_API]: {\n authenticated: true,\n endpoint: `${CREDIT_CARD_URL}`,\n method: 'PUT',\n body: data,\n actionTypes: {\n request: () => ({ type: SAVE_CREDIT_CARD_START }),\n success: response => verifyOnSaveCreditCard(response, data),\n error: () => ({ type: SAVE_CREDIT_CARD_ERROR }),\n },\n },\n };\n}\n\nfunction onReceiveCreditCardInstallments(installments) {\n return {\n type: CREDIT_CARD_INSTALLMENTS_SUCCESS,\n installments,\n };\n}\n\nexport function getCreditCardInstallments(invoiceId) {\n return {\n [CALL_API]: {\n authenticated: true,\n endpoint: CREDIT_CARD_INSTALLMENTS(invoiceId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_CREDIT_CARD_INSTALLMENTS }),\n success: response => onReceiveCreditCardInstallments(response.data),\n error: () => ({ type: CREDIT_CARD_INSTALLMENTS_ERROR }),\n },\n },\n };\n}\n\nexport function getCreditCardInstallmentsByProductData(serviceType, serviceId) {\n return {\n [CALL_API]: {\n authenticated: true,\n endpoint: CREDIT_CARD_INSTALLMENTS_BY_PRODUCT_DATA(serviceType, serviceId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_CREDIT_CARD_INSTALLMENTS }),\n success: response => onReceiveCreditCardInstallments(response.data),\n error: () => ({ type: CREDIT_CARD_INSTALLMENTS_ERROR }),\n },\n },\n };\n}\n","import PropTypes from 'prop-types';\n\n\nconst productType = PropTypes.shape({\n id: PropTypes.number,\n domain: PropTypes.string,\n username: PropTypes.string,\n domainstatus: PropTypes.string,\n nextinvoicedate: PropTypes.string,\n productname: PropTypes.string,\n type: PropTypes.string,\n gid: PropTypes.number,\n product_id: PropTypes.number,\n origin: PropTypes.string,\n orderid: PropTypes.number,\n paginafacil: PropTypes.string,\n cpanel: PropTypes.string,\n webmail: PropTypes.string,\n});\n\nexport default productType;\n","import PropTypes from 'prop-types';\n\n\nconst creditCardType = PropTypes.shape({\n id: PropTypes.number,\n cardType: PropTypes.string,\n cardLastFour: PropTypes.string,\n expDate: PropTypes.string,\n});\n\nexport default creditCardType;\n","import moment from 'moment';\nimport { parse, isBefore, format } from 'date-fns';\n\nconst isQueryParam = (param = 'debug') => {\n const urlParams = new URLSearchParams(window.location.search);\n return urlParams.get(param);\n};\n\n/**\n * Check if the given date is lower than current\n *\n * @param {String} date\n * @param {String} formatModel\n * @param {String} dateNow\n */\nexport const enhancedIsDateLowerThanCurrent = (date, formatModel, dateNow) => {\n const now = new Date();\n const formatConveter = formatModel === 'MM/YY' ? 'MM/yy' : formatModel;\n const dateEntered = parse(date, formatConveter, now);\n const dateToCompareParse = parse(dateNow || format(now, formatConveter), formatConveter, now);\n return isBefore(dateEntered, dateToCompareParse);\n};\n\n/**\n * Check if the given date is lower than current\n *\n * @param {String} date\n * @param {String} format\n */\nexport const oldIsDateLowerThanCurrent = (date, format) => {\n const currentDate = moment();\n const currentDateFormatted = moment(currentDate.format(format), format);\n return moment(date, format).isBefore(currentDateFormatted);\n};\n\nexport const isDateLowerThanCurrent = (date, formatModel, dateNow, isEnabled) => {\n if (isQueryParam()) {\n const libDateActive = isEnabled ? 'date-fns' : 'moment';\n // Necessário para testar lib que é executada com feature toggle.\n // eslint-disable-next-line no-console\n console.log('@lib enabled:', libDateActive);\n }\n\n return (isEnabled\n ? enhancedIsDateLowerThanCurrent(date, formatModel, dateNow)\n : oldIsDateLowerThanCurrent(date, formatModel));\n};\n","export const TYPES = {\n visa: {\n maxLength: 16,\n minLength: 16,\n codeName: 'CVV',\n codeSize: 4,\n },\n mastercard: {\n maxLength: 16,\n minLength: 16,\n codeName: 'CVC',\n codeSize: 4,\n },\n amex: {\n maxLength: 16,\n minLength: 15,\n codeName: 'CID',\n codeSize: 4,\n },\n elo: {\n maxLength: 16,\n minLength: 16,\n codeName: 'CVE',\n codeSize: 4,\n },\n};\n\nexport const ACCEPTED = {\n pt: ['visa', 'mastercard', 'elo'],\n es: ['visa', 'mastercard', 'amex'],\n cl: ['visa', 'mastercard', 'amex'],\n co: ['visa', 'mastercard', 'amex'],\n mx: ['visa', 'mastercard', 'amex'],\n ar: ['visa', 'mastercard'],\n pe: ['visa', 'mastercard'],\n ec: ['visa', 'mastercard'],\n do: ['visa', 'mastercard'],\n bo: ['visa', 'mastercard'],\n uy: ['visa', 'mastercard'],\n};\n\nconst CREDIT_CARD = {\n TYPES,\n ACCEPTED,\n};\n\nexport default CREDIT_CARD;\n","import { config } from '@/config';\nimport { RECAPTCHA_V3_URL } from '@/config/externalScriptsUrl';\n\n\nexport const generateRecaptchaToken = async (sitekey, action) => {\n let tokenReceived = '';\n await window.grecaptcha.execute(sitekey, { action })\n .then((token) => {\n tokenReceived = token;\n });\n return tokenReceived;\n};\n\nexport const loadReCaptcha = () => {\n const hasRecaptchaScript = document.getElementById('recaptcha-script');\n if (!hasRecaptchaScript) {\n const script = document.createElement('script');\n script.id = 'recaptcha-script';\n script.src = RECAPTCHA_V3_URL(config.RECAPTCHA_SITE_KEY);\n document.body.appendChild(script);\n }\n};\n\nexport const loadReCaptchaPaaS = () => {\n const hasRecaptchaScript = document.getElementById('recaptcha-script-paas');\n const hasNewRecaptchaScript = document.getElementById('new-recaptcha-script-paas');\n\n if (!hasRecaptchaScript && !hasNewRecaptchaScript) {\n const script = document.createElement('script');\n script.id = 'recaptcha-script-paas';\n script.src = RECAPTCHA_V3_URL(config.RECAPTCHA_PAAS);\n document.body.appendChild(script);\n }\n if (!hasNewRecaptchaScript) {\n const script = document.createElement('script');\n script.id = 'new-recaptcha-script-paas';\n script.src = RECAPTCHA_V3_URL(config.NEW_RECAPTCHA_PAAS);\n document.body.appendChild(script);\n\n if (hasRecaptchaScript) {\n const element = document.getElementById('recaptcha-script-paas');\n element.remove();\n }\n }\n};\n","import { CALL_API } from '@/middleware/api';\nimport { PAYMENT_METHOD_URL, PAYMENT_METHOD_CC } from '@/config/api';\nimport {\n PAYPAL, CREDIT_CARD, CREDIT_CARD_ES, BRASPAG_PARC_1X, BRASPAG_PARC_2X,\n BRASPAG_PARC_3X, BRASPAG_PARC_4X, BRASPAG_PARC_5X, BRASPAG_PARC_6X,\n BRASPAG_PARC_7X, BRASPAG_PARC_8X, BRASPAG_PARC_9X, BRASPAG_PARC_10X,\n BRASPAG_PARC_11X, BRASPAG_PARC_12X,\n} from '@/config/billing/paymentMethods';\nimport {\n REQUEST_PAYMENT_METHOD, REQUEST_CC_METHOD, RECEIVE_CC_METHOD, ERROR_CC_METHOD,\n ERROR_PAYMENT_METHOD, OPEN_PAYMENT_PAYPAL_NEW_TAB, SUCCESS_CHANGE_PAYMENT_METHOD, REQUEST_CHANGE_PAYMENT_METHOD, ERROR_CHANGE_PAYMENT_METHOD,\n} from './actionsTypes';\n\n\nconst paypalMethod = (paypalPaymentData) => {\n const data = [`${paypalPaymentData.form_action}?`];\n Object\n .keys(paypalPaymentData)\n .forEach((key) => {\n if (key !== 'form_action') {\n data.push(`${key}=${encodeURIComponent(paypalPaymentData[key])}`);\n }\n });\n window.open(data.join('&'));\n return { type: OPEN_PAYMENT_PAYPAL_NEW_TAB };\n};\n\nexport const ccMethod = (invoiceId, fingerPrintId = null, changeProductsPaymentMethodToCC = null) => dispatch => dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: PAYMENT_METHOD_CC(invoiceId),\n body: fingerPrintId != null ? { fpId: fingerPrintId, changeProductsPaymentMethodToCC } : { changeProductsPaymentMethodToCC },\n method: 'POST',\n actionTypes: {\n request: () => ({ type: REQUEST_CC_METHOD }),\n success: (data) => {\n if (!!data.data && data.success && data.data.result) {\n return ({ type: RECEIVE_CC_METHOD });\n }\n\n const { data: response } = data;\n if (Object.prototype.hasOwnProperty.call(response, 'key')) {\n return { type: ERROR_CC_METHOD, key: response.key, status: data.data.status };\n }\n return { type: ERROR_CC_METHOD, status: data.data.status };\n },\n error: () => ({ type: ERROR_CC_METHOD }),\n },\n },\n});\n\nconst receivePaymentMethod = (method, invoiceId, paymentMethodData, fingerPrintId, changeProductsPaymentMethodToCC) => {\n switch (method) {\n case PAYPAL:\n return paypalMethod(paymentMethodData);\n case CREDIT_CARD:\n case CREDIT_CARD_ES:\n case BRASPAG_PARC_1X:\n case BRASPAG_PARC_2X:\n case BRASPAG_PARC_3X:\n case BRASPAG_PARC_4X:\n case BRASPAG_PARC_5X:\n case BRASPAG_PARC_6X:\n case BRASPAG_PARC_7X:\n case BRASPAG_PARC_8X:\n case BRASPAG_PARC_9X:\n case BRASPAG_PARC_10X:\n case BRASPAG_PARC_11X:\n case BRASPAG_PARC_12X:\n return ccMethod(invoiceId, fingerPrintId, changeProductsPaymentMethodToCC);\n default:\n return { type: ERROR_PAYMENT_METHOD };\n }\n};\n\nexport const getPaymentMethod = (method, invoiceId, fingerPrintId = null, changeProductsPaymentMethodToCC = null) => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: PAYMENT_METHOD_URL(invoiceId),\n method: 'PUT',\n body: { method: method.toLowerCase() },\n actionTypes: {\n request: () => ({ type: REQUEST_PAYMENT_METHOD }),\n success: data => receivePaymentMethod(method, invoiceId, data.data, fingerPrintId, changeProductsPaymentMethodToCC),\n error: () => ({ type: ERROR_PAYMENT_METHOD }),\n },\n },\n});\n\nexport const changePaymentMethodOption = ({ method, bank, invoiceId }) => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: PAYMENT_METHOD_URL(invoiceId),\n method: 'PUT',\n body: { method: method.toLowerCase(), bank },\n actionTypes: {\n request: () => ({ type: REQUEST_CHANGE_PAYMENT_METHOD }),\n success: () => ({ type: SUCCESS_CHANGE_PAYMENT_METHOD }),\n error: () => ({ type: ERROR_CHANGE_PAYMENT_METHOD }),\n },\n },\n});\n","import { CALL_API } from '@/middleware/api';\nimport { api } from '@/utils/api';\nimport {\n GATORPAY_PAAS_SAVE_CREDITCARD,\n GATORPAY_PAAS_SAVE_ATTEMPT_CREDITCARD,\n GATORPAY_PAAS_GET_ATTEMPT_CREDITCARD,\n BLACK_LIST_GET_IP_USER,\n} from '@/config/api';\nimport {\n REQUEST_GATORPAY_PAAS_SAVE_CREDITCARD,\n RECEIVE_GATORPAY_PAAS_SAVE_CREDITCARD,\n ERROR_GATORPAY_PAAS_SAVE_CREDITCARD,\n REQUEST_GATORPAY_PAAS_SAVE_CREDITCARD_ATTEMPT,\n RECEIVE_GATORPAY_PAAS_SAVE_CREDITCARD_ATTEMPT,\n ERROR_GATORPAY_PAAS_SAVE_CREDITCARD_ATTEMPT,\n REQUEST_GATORPAY_PAAS_GET_CREDITCARD_ATTEMPT,\n ERROR_GATORPAY_PAAS_GET_CREDITCARD_ATTEMPT,\n RECEIVE_GATORPAY_PAAS_GET_CREDITCARD_ATTEMPT,\n ERROR_GATORPAY_PAAS_GET_USER_IP,\n} from './actionsTypes';\n\nexport const saveCreditCard = body => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: GATORPAY_PAAS_SAVE_CREDITCARD,\n method: 'POST',\n body,\n actionTypes: {\n request: () => ({ type: REQUEST_GATORPAY_PAAS_SAVE_CREDITCARD }),\n success: ({ success }) => ({ type: RECEIVE_GATORPAY_PAAS_SAVE_CREDITCARD, success }),\n error: () => ({ type: ERROR_GATORPAY_PAAS_SAVE_CREDITCARD }),\n },\n },\n});\n\nexport const saveCreditCardAttempt = token => async (dispatch) => {\n const getIp = async () => {\n const requestIpUser = {\n url: BLACK_LIST_GET_IP_USER,\n };\n\n try {\n const result = await Promise.all([\n api.whmcs.get(requestIpUser),\n ]);\n\n const [dados] = result;\n const ip = dados.data.data;\n return ip && ip.ip ? ip.ip : '';\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('error to get ip', e);\n dispatch({ type: ERROR_GATORPAY_PAAS_GET_USER_IP });\n }\n };\n\n const resultIp = await getIp();\n const bodyObject = {\n token,\n ip: resultIp,\n };\n\n return dispatch({\n [CALL_API]: {\n endpoint: GATORPAY_PAAS_SAVE_ATTEMPT_CREDITCARD,\n method: 'POST',\n body: bodyObject,\n actionTypes: {\n request: () => ({ type: REQUEST_GATORPAY_PAAS_SAVE_CREDITCARD_ATTEMPT }),\n success: response => RECEIVE_GATORPAY_PAAS_SAVE_CREDITCARD_ATTEMPT(response),\n error: () => ({ type: ERROR_GATORPAY_PAAS_SAVE_CREDITCARD_ATTEMPT }),\n },\n },\n });\n};\n\nconst receiveCreditCardAttempt = success => ({\n type: RECEIVE_GATORPAY_PAAS_GET_CREDITCARD_ATTEMPT,\n success,\n});\n\nexport const getCreditCardAttempt = () => ({\n [CALL_API]: {\n endpoint: GATORPAY_PAAS_GET_ATTEMPT_CREDITCARD,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_GATORPAY_PAAS_GET_CREDITCARD_ATTEMPT }),\n success: data => receiveCreditCardAttempt(data || []),\n error: () => ({ type: ERROR_GATORPAY_PAAS_GET_CREDITCARD_ATTEMPT }),\n },\n },\n});\n","const styles = () => ({\n divContainer: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n },\n divContainerDialog: {\n width: '648px',\n },\n newdivContainerDialog: {\n width: 'auto',\n },\n iframe: {\n width: '100%',\n border: '0',\n },\n actions: {\n display: 'flex',\n gap: '40px',\n },\n});\n\nexport default styles;\n","import React, { useEffect, useState, useCallback } from 'react';\nimport { withStyles } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport withMobileDialog from '@material-ui/core/withMobileDialog';\nimport { Button } from 'gatorcomponents';\nimport { useDispatch, useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport { config, COUNTRY } from '@/config';\nimport logger from '@/utils/logger';\nimport { getCreditCardAttempt, saveCreditCard, saveCreditCardAttempt } from '@/redux/actions/creditCardPaas';\nimport { ERROR_GATORPAY_PAAS_SAVE_CREDITCARD, RECEIVE_GATORPAY_PAAS_SAVE_CREDITCARD } from '@/redux/actions/actionsTypes';\nimport Loader from '@/components/Layout/Loader';\nimport { notifierError } from '@/utils/Application/notifier';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport { generateRecaptchaToken, loadReCaptchaPaaS } from '@/utils/Application/reCaptcha';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport styles from './styles';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { XRAY_VERIFY_CARD_CHECK, XRAY_VERIFY_CARD_LOGS } from '@/config/GrowthBook/constants';\nimport { billingActions } from '@/redux/modules';\n\nconst {\n IFRAME_URL,\n CLIENT_ID,\n IFRAME_PAGENAME,\n} = config.PAAS_CONFIG;\n\n\nconst CreditCardPaas = ({\n classes,\n t,\n onSave,\n isDialog,\n gaEvent,\n isNewLayout = false,\n}) => {\n const summaryState = useSelector(state => state.summary);\n const [isButtonEnabled, setButtonEnabled] = useState(true);\n const [isLoadingEnabled, setLoadingEnabled] = useState(true);\n const [heightIframe, setHeightIframe] = useState(260);\n const isVerifyCardCheckActive = useFeatureIsOn(XRAY_VERIFY_CARD_CHECK);\n const isVerifyCardLogsActive = useFeatureIsOn(XRAY_VERIFY_CARD_LOGS);\n const isEnabledAttemptCreditCard = true;\n const dispatch = useDispatch();\n const creditCardAttempt = useSelector(state => state.creditCardAttempt);\n const isEnabledNewRecaptchaPass = true;\n\n const checkSubscriptionsToChangePaymentMethod = useCallback(() => {\n dispatch(billingActions.subscriptions.requestSubscriptionsNotInCreditCard());\n }, [dispatch]);\n\n const postMessage = (body) => {\n const { contentWindow } = document.getElementById('token-iframe');\n contentWindow.postMessage(JSON.stringify({\n securePayMessage: true,\n body,\n }), IFRAME_URL);\n };\n\n const getLoader = () => (\n isLoadingEnabled ?
\n );\n\n const callGetToken = useCallback((token) => {\n postMessage({\n callFunction: {\n name: 'hgLatamGetToken',\n arguments: [token],\n },\n });\n }, []);\n\n const updateHeight = (h) => {\n setHeightIframe(h + 30);\n };\n\n const onMessage = useCallback((event) => {\n if (event.data.securePayMessage !== true) {\n return false;\n }\n let { body } = event.data;\n if (body.constructor === String) {\n try {\n body = JSON.parse(body);\n // eslint-disable-next-line no-console\n } catch (e) { console.log(e); }\n }\n if (body.constructor === Object) {\n if (body.isValid !== undefined && body.fields !== undefined) {\n if (!body.isValid) {\n dispatch(enqueueSnackbar('snackbar.creditCard.paas.errorSaveCreditCard', notifierError));\n setButtonEnabled(true);\n setLoadingEnabled(true);\n return;\n }\n generateRecaptchaToken(isEnabledNewRecaptchaPass ? config.NEW_RECAPTCHA_PAAS : config.RECAPTCHA_PAAS, 'userexistis').then((token) => {\n callGetToken(token);\n }).catch(() => {\n dispatch(enqueueSnackbar('snackbar.creditCard.paas.errorSaveCreditCard', notifierError));\n });\n }\n if (body.creditCard !== undefined && body.creditCard.data !== '') {\n body.creditCard.token = body.id;\n // Verify creditcard only BR\n if (isVerifyCardLogsActive) {\n logger.info(`VerifyCreditCard response - Code: '${body.properties.ProviderReturnCode}', Message: '${body.properties.ProviderReturnMessage}'`);\n }\n if (isVerifyCardCheckActive) {\n if (body.properties !== undefined && body.properties.Status !== undefined && body.properties.Status !== 1) {\n dispatch(enqueueSnackbar('snackbar.creditCard.paas.errorVerifyCard', notifierError));\n setButtonEnabled(true);\n setLoadingEnabled(false);\n\n if (isEnabledAttemptCreditCard && isBRServer) {\n dispatch(saveCreditCardAttempt(body.creditCard.token));\n }\n return;\n }\n }\n\n setButtonEnabled(false);\n dispatch(saveCreditCard(body.creditCard)).then((data) => {\n onSave(data.type);\n checkSubscriptionsToChangePaymentMethod();\n setLoadingEnabled(false);\n if (data.type === ERROR_GATORPAY_PAAS_SAVE_CREDITCARD) {\n setButtonEnabled(true);\n setLoadingEnabled(true);\n }\n\n if (isEnabledAttemptCreditCard && isBRServer && data.type === RECEIVE_GATORPAY_PAAS_SAVE_CREDITCARD) {\n dispatch(saveCreditCardAttempt(body.creditCard.token, 'ip'));\n }\n });\n }\n if (body.size !== undefined && body.size.height !== 0) {\n updateHeight(body.size.height);\n }\n }\n }, [\n dispatch,\n isEnabledNewRecaptchaPass,\n isVerifyCardLogsActive,\n isVerifyCardCheckActive,\n isEnabledAttemptCreditCard,\n onSave,\n callGetToken,\n checkSubscriptionsToChangePaymentMethod,\n ]);\n\n const submitCreditCard = () => {\n if (isEnabledAttemptCreditCard && isBRServer) {\n dispatch(getCreditCardAttempt());\n if (creditCardAttempt !== undefined && !creditCardAttempt.response) {\n dispatch(enqueueSnackbar('snackbar.creditCard.paymentFailByAttemptsLimit', notifierError));\n setButtonEnabled(true);\n setLoadingEnabled(false);\n return;\n }\n }\n\n setButtonEnabled(false);\n postMessage({\n callFunction: {\n name: 'hgLatamValidateAll',\n arguments: [],\n },\n });\n };\n\n const clearFormData = () => {\n const { contentWindow } = document.getElementById('token-iframe');\n const origin = IFRAME_URL;\n contentWindow.postMessage(JSON.stringify({\n securePayMessage: true,\n body: {\n callFunction: {\n name: 'hgLatamClear',\n arguments: [],\n },\n },\n }), origin);\n };\n\n useEffect(() => {\n loadReCaptchaPaaS(isEnabledNewRecaptchaPass);\n window.addEventListener('message', onMessage);\n return () => {\n window.removeEventListener('message', onMessage);\n };\n }, [onMessage, isEnabledNewRecaptchaPass]);\n\n useEffect(() => {\n dispatch(getCreditCardAttempt());\n }, [dispatch]);\n\n return (\n \n
\n {isButtonEnabled\n ? (\n
\n
\n
\n { clearFormData(); gaEvent(); }}\n testId=\"clean-button\"\n />\n
\n
\n\n ) : (getLoader())\n }\n
\n \n \n \n\n {!!(billingState.subscriptions.loadedItemsNotInCreditcard\n && !billingState.subscriptions.loadingItemsNotInCreditCard\n && itemsToChangePaymentMethod.length > 0\n ) && (\n \n \n \n {creditCardLocale.changeMethodTitle}\n \n \n {creditCardLocale.changeMethodDescription}\n \n\n \n \n \n \n\n \n )}\n\n {!!billingState.subscriptions.loadingItemsNotInCreditCard && (\n \n \n \n );\n};\n\nCreditCardPreview.propTypes = {\n creditCard: creditCardType.isRequired,\n t: PropTypes.func.isRequired,\n onRemoveCreditCard: PropTypes.func.isRequired,\n};\n\nexport default withI18n()(CreditCardPreview);\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n display: flex;\n margin-top: 0px;\n`;\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n width: max-content;\n `}\n`;\n\nexport const LabelCardNumber = styled.p`\n${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n opacity: 1;\n margin-top: 0px;\n margin-bottom: 0px;\n`}\n`;\n\n\nexport const LabelCardExpDate = styled.p`\n${({ theme }) => css`\n color: ${theme.palette.grey.light};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n opacity: 1;\n margin-top: 1px;\n`}\n`;\n","import React, { } from 'react';\n\nimport * as Styles from './CreditCardPreview.styles';\nimport CreditCardWrapper from '../CreditCardWrapper';\n\nconst CreditCardPreview = ({\n creditCard,\n newFormatCreditCardNumber,\n creditCardExpDateLabel,\n}) => (\n <>\n \n \n \n \n {newFormatCreditCardNumber && (\n \n {newFormatCreditCardNumber}\n \n )}\n {creditCardExpDateLabel && (\n \n {`${creditCardExpDateLabel} ${creditCard.expDate}`}\n \n )}\n \n \n \n);\n\n\nexport default CreditCardPreview;\n","export const calcLabelWidth = (text) => {\n const lenghtText = text.length;\n switch (lenghtText) {\n case 16:\n return parseInt(text.length * 8, 10);\n case 30:\n return parseInt(text.length * 7.6, 10);\n default:\n return parseInt(text.length * 8.7, 10);\n }\n};\n","const styles = theme => ({\n btnPrimary: {\n '&:disabled': {\n border: 'none',\n backgroundColor: 'transparent',\n color: theme.color.disabled,\n },\n borderRadius: '2px',\n boxShadow: 'none',\n border: `1px solid ${theme.color.chambray}`,\n color: theme.color.white,\n },\n btnOutline: {\n borderRadius: '2px',\n boxShadow: 'none',\n border: `1px solid ${theme.color.mystic}`,\n color: theme.color.tundora,\n padding: '6px 16px',\n },\n closeButton: {\n position: 'absolute',\n right: theme.spacing.unit,\n top: theme.spacing.unit,\n color: theme.palette.grey[500],\n },\n creditCard: {\n alignSelf: 'flex-start',\n },\n borderDefault: {\n border: '1px solid',\n borderColor: theme.color.regentGray,\n minHeight: '132px',\n paddingLeft: theme.spacing.unit * 2,\n paddingRight: theme.spacing.unit * 2,\n },\n newBorderDefault: {\n border: '1px solid',\n borderColor: theme.palette.grey.primary,\n borderRadius: '2px',\n paddingLeft: theme.spacing.unit * 2,\n paddingRight: theme.spacing.unit * 2,\n },\n borderActive: {\n boxSizing: 'border-box',\n border: '2px solid',\n paddingLeft: theme.spacing.unit * 2,\n paddingRight: theme.spacing.unit * 2,\n borderColor: theme.color.indigo,\n },\n cardSize: {\n minHeight: '132px',\n '& .rccs': {\n transform: 'scale(0.4)',\n margin: '0',\n width: '0',\n height: '0%',\n top: '0',\n },\n '& .rccs__card': {\n height: '50px',\n },\n '& .rccs__card--front': {\n height: '160px',\n },\n },\n newCardSize: {\n minHeight: '',\n },\n cardSizeNewLayout: {\n '& .rccs': {\n transform: 'scale(0.2)',\n marginLeft: '-9px',\n width: '112px',\n height: '0%',\n top: '0',\n },\n '& .rccs__card': {\n height: '50px',\n },\n '& .rccs__card--front': {\n height: '160px',\n },\n },\n cardSizeForm: {\n '& .rccs': {\n [theme.breakpoints.down('xs')]: {\n width: 'auto',\n margin: '0 auto',\n },\n transform: 'scale(0.8)',\n margin: '0',\n width: '0',\n },\n\n '& .rccs__card': {\n height: '170px',\n width: '270px',\n },\n },\n cardSizeFormFull: {\n '& .rccs': {\n transform: 'scale(0.9)',\n margin: '0 auto',\n width: '100%',\n },\n '& .rccs__card': {\n height: '170px',\n width: '270px',\n marginLeft: 'auto',\n },\n [theme.breakpoints.down('xs')]: {\n '& .formBox': {\n paddingTop: 0,\n },\n },\n },\n cardFormCaption: {\n padding: '10px 0 20px 0',\n minHeight: '80px',\n },\n newCardFormCaption: {\n padding: '0px',\n marginLeft: '34px',\n },\n paddingCardFormEmpty: {\n paddingBottom: '16px',\n },\n container: {\n '& .handleInputCreditCard': {\n width: '100%',\n },\n padding: '10px 0 20px 0',\n },\n containerAddNewCard: {\n '& .handleInputCreditCard': {\n width: '100%',\n },\n padding: '10px 0 20px 33px',\n '@media (max-width: 600px)': {\n padding: '0px',\n },\n },\n containerNewLayout: {\n '& .handleInputCreditCard': {\n width: '100%',\n },\n padding: '0px',\n },\n containerLeft: {\n '& .handleInputCreditCard': {\n width: '100%',\n },\n textAlign: 'left',\n padding: '10px 0 20px 0',\n },\n newDialogContent: {\n overflowY: 'inherit',\n padding: '22px 0px 0px 0px',\n },\n dialogActions: {\n marginTop: 20,\n marginBottom: 20,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n newDialogActions: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'center',\n marginBottom: 0,\n marginTop: 32,\n },\n cardFlexBox: {\n [theme.breakpoints.down('xs')]: {\n paddingLeft: '10px',\n },\n paddingLeft: '24px',\n display: 'flex',\n alignItens: 'center',\n '& > svg': {\n marginRight: '10px',\n },\n '& > p': {\n fontWeight: '500',\n fontSize: '16px',\n },\n },\n invoiceCardBox: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n },\n cardSummaryContent: {\n paddingTop: '10px',\n '&:last-child': {\n paddingBottom: '10px',\n },\n },\n receiptIcon: {\n color: theme.color.valencia,\n },\n expand: {\n transform: 'rotate(0deg)',\n transition: theme.transitions.create('transform', {\n duration: theme.transitions.duration.shortest,\n }),\n },\n expandOpen: {\n transform: 'rotate(180deg)',\n },\n creditCardFormCustomRegister: {\n [theme.breakpoints.up('md')]: {\n '& > div': {\n '& > div': {\n '& > div': {\n paddingLeft: 0,\n paddingRight: 0,\n marginLeft: '-28px',\n '& > div': {\n paddingLeft: 0,\n paddingRight: 0,\n '& > div': {\n paddingLeft: 0,\n paddingRight: 0,\n },\n },\n },\n },\n },\n },\n },\n creditCardFormCustomReplace: {\n [theme.breakpoints.up('md')]: {\n '& > div': {\n '& > div': {\n '& > div': {\n paddingLeft: 0,\n paddingRight: 0,\n marginLeft: '-12px',\n '& > div:first-child': {\n marginLeft: 'calc(50% - 108px)',\n },\n '& > div:nth-child(2)': {\n '& > div': {\n paddingLeft: 0,\n paddingRight: 0,\n '& > div': {\n paddingRight: 0,\n },\n },\n },\n },\n },\n },\n },\n },\n arrow: {\n fill: theme.color.tundora,\n },\n creditCardInstallmentsLoadingDialog: {\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n minHeight: '60vh',\n },\n creditCardInstallmentsLoadingDialogText: {\n maxWidth: '350px',\n },\n creditCardInstallmentsQuestionAdapter: {\n alignItems: 'center',\n display: 'flex',\n margin: '20px 0 0 0',\n },\n creditCardInstallmentsQuestion: {\n fontSize: 14,\n },\n newCreditCardInstallmentsQuestion: {\n fontSize: 14,\n marginBottom: '0px',\n },\n creditCardInstallmentsIconAdapter: {\n alignItems: 'center',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n paddingLeft: '5px',\n },\n newCreditCardInstallmentsIconAdapter: {\n alignItems: 'center',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n marginTop: '16px',\n paddingLeft: '5px',\n },\n creditCardInstallmentsFormControl: {\n margin: '16px 8px 5px 0',\n width: '339px',\n minWidth: '192px',\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n },\n },\n creditCardInstallmentsInputLabelCustom: {\n transform: 'translate(14px, 10px) scale(1)',\n zIndex: 0,\n },\n useExistingCard: {\n color: theme.palette.secondary.primary,\n fontFamily: theme.font.family.secondary,\n fontWeight: theme.font.weights.medium,\n },\n useExistingCardSelected: {\n color: theme.palette.blue.dark,\n fontFamily: theme.font.family.secondary,\n fontWeight: theme.font.weights.medium,\n },\n creditCardInstallmentsSelectCustom: {\n '&$selectCustomFocused $selectCustomOutline': {\n borderColor: theme.color.chambray,\n borderWidth: 1,\n },\n '& div > div': {\n paddingBottom: 6,\n paddingTop: 9,\n fontSize: 14,\n },\n '& div > div:focus': {\n backgroundColor: 'transparent',\n },\n '& fieldset': {\n borderRadius: '2px',\n },\n dialogContainer: {\n '& div': {\n '& div': {\n [theme.breakpoints.up('md')]: {\n maxWidth: 750,\n },\n },\n },\n },\n },\n creditCardInstallmentsSelectCustomInput: {},\n creditCardInstallmentsSelectCustomOutline: {},\n creditCardInstallmentsSelectCustomFocused: {},\n creditCardInstallmentsSelectWrapper: {\n minWidth: '296.17px',\n width: '100%',\n },\n creditCardInstallmentsTooltipLink: {\n color: 'white',\n cursor: 'pointer',\n textDecoration: 'underline',\n },\n});\n\nexport default styles;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n display: flex;\n margin-top: 25px;\n`;\n\nexport const Content = styled.div`\n width: max-content;\n`;\n\nexport const CheckboxLabel = styled.label`\n${({ theme }) => css`\n cursor: pointer;\n display: flex;\n width: max-content;\n @media (max-width: ${theme.v2.breakpoints.md}) {\n width: fit-content;\n }\n >button {\n > label {\n height: 20px;\n width: 20px;\n }\n };\n `}\n`;\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin-left: 2px;\n `}\n`;\n","import React, { } from 'react';\n\nimport * as Styles from './CheckedDefaultCreditCardPayment.styles';\nimport { Checkbox } from 'gatorcomponents';\n\nconst CheckedDefaultCreditCardPayment = ({\n description = 'Descrição da seleção',\n onClickAction = null,\n isChecked = true,\n testId = 'check-default-credit-card-payment',\n}) => {\n const onClickActionHandler = (isChecked) => {\n onClickAction && onClickAction(isChecked);\n };\n\n return (\n \n \n onClickActionHandler(!isChecked)}>\n \n {description}\n \n \n \n \n );\n};\n\nexport default CheckedDefaultCreditCardPayment;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport withMobileDialog from '@material-ui/core/withMobileDialog';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport { Trans, withI18n } from 'react-i18next';\nimport {\n withStyles, IconButton, CardContent, CardActions, Collapse, CircularProgress, MenuItem, Select, FormControl, InputLabel, OutlinedInput, Tooltip, ClickAwayListener,\n} from '@material-ui/core';\nimport Typography from '@material-ui/core/Typography';\nimport Radio from '@material-ui/core/Radio';\nimport Grid from '@material-ui/core/Grid';\nimport Button from '@material-ui/core/Button';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport { Close, ExpandMore, Receipt } from '@material-ui/icons';\nimport classnames from 'classnames';\nimport {\n loadCreditCard, removeCreditCard, saveCreditCard, getCreditCardInstallments, getCreditCardInstallmentsByProductData,\n} from '@/redux/actions/creditCard';\nimport { creditCardType } from '@/types';\nimport {\n notifierError, notifierSuccess, notifierErrorLong, notifierSuccessLong,\n} from '@/utils/Application/notifier';\nimport { isDateLowerThanCurrent } from '@/utils/Validators/isDateLowerThanCurrent';\nimport { getCreditCardTypeInfo } from '@/utils/Application/getCreditCardTypeInfo';\nimport { generateRecaptchaToken } from '@/utils/Application/reCaptcha';\nimport { loadInvoiceDetails, updateStatusInvoiceToConfirmingPayment, loadInvoices } from '@/redux/actions/invoices';\nimport WarningNotice from '@/components/Notification/WarningNotice/index';\nimport Loader from '@/components/Layout/Loader';\nimport InvoiceDetails from '@/components/Invoices/InvoiceDetails';\nimport InvoiceSummaryCard from '@/components/Cards/InvoiceSummaryCard';\nimport { getPaymentMethod } from '@/redux/actions/paymentMethod';\nimport { ERROR_CC_METHOD, SAVE_CREDIT_CARD_ERROR } from '@/redux/actions/actionsTypes';\nimport { config } from '@/config';\nimport { PHISHING_STATUS_ANALYSIS } from '@/config/invoices/invoiceStatus';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport CreditCardPaas from '@/components/CreditCard/CreditCardPaas';\nimport { cancelBuyCCByPortalClick } from '@/utils/ThirdParties/tagManager';\nimport { CreditCardPreview } from '../CreditCardPreview';\nimport { CreditCardPreview as CreditCardPreviewNewVersion } from '../NewCreditCardPreview';\nimport { Button as ButtonV1 } from '@/pages/common/v1/Button';\n\nimport { PAYMENT_STATUS } from '@/pages/Invoices/types';\nimport { calcLabelWidth } from '@/utils/Formatters/calcWidthLabel';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { IconInfo } from '@/icons';\nimport styles from './styles';\nimport { PaypalActionTypes } from '@/components/Paypal/PaypalDialog/Paypal.types';\nimport { CheckedDefaultCreditCardPayment } from '../CheckedDefaultCreditCardPayment';\n\nclass CreditCardDialog extends React.Component {\n constructor(props) {\n super(props);\n const { t } = this.props;\n const isEnabled = true;\n\n this.state = {\n isEnabled,\n cardForm: {\n ccname: '',\n ccnumber: '',\n ccvnumber: '',\n expdate: '',\n },\n saveNewCreditCard: false,\n cardInfo: {\n minLength: 0,\n maxLength: 16,\n codeSize: 4,\n maxLengthName: 25,\n minLengthName: 3,\n },\n focusedField: 'number',\n canSubmit: false,\n existsCreditCard: false,\n invoiceDetails: {},\n creditCardInstallments: [],\n selectedCreditCardInstallment: '',\n showCreditCardInstallmentsTooltip: false,\n showDetails: false,\n loadingCardCredit: false,\n loadingDetailsInvoice: false,\n enabledChangeProductsPaymentMethodToCC: true,\n loadingCreditCardInstallments: true,\n recaptchaToken: '',\n labelCvv: t('creditcard.label.cvvShort'),\n hasValidCreditCardSelected: false,\n };\n }\n\n componentDidMount() {\n this.recaptchaRef = React.createRef();\n this.handleLoadCreditCard();\n this.setState({ loadingPaymentFlux: false });\n this.handleCreditCardInstallments();\n }\n\n get language() {\n const { i18n } = this.props;\n return i18n.language;\n }\n\n verifyCallback = (token) => {\n this.setState({\n recaptchaToken: token,\n });\n }\n\nhandletValidCreditCardSelectedStatus = (isValid) => {\n const { onSetCreditCardSelected } = this.props;\n onSetCreditCardSelected && onSetCreditCardSelected(isValid);\n}\n\n handleExpand = async () => {\n const { showDetails, invoiceDetails } = this.state;\n this.setState({\n showDetails: !showDetails,\n loadInvoiceDetails: true,\n });\n\n if (!Object.prototype.hasOwnProperty.call(invoiceDetails, 'id')) {\n const { loadInvoiceDetails, invoiceId } = this.props;\n\n const data = await loadInvoiceDetails(invoiceId);\n this.setState({\n invoiceDetails: data.invoice,\n loadingDetailsInvoice: false,\n });\n }\n }\n\n getMdGridAddNewCard = (existsCreditCard, showResumeData) => {\n if (!showResumeData) { return 12; }\n return !existsCreditCard ? 12 : 6;\n }\n\n handleChangeCreditCardSelected = () => {\n const {\n saveNewCreditCard, existsCreditCard, creditCardInstallments, selectedCreditCardInstallment,\n } = this.state;\n\n const {\n subscriptionAnalytics, callingOrigin, isCreditCardInstallmentsEnabled,\n } = this.props;\n\n const hasSelectedCreditCardInstallment = creditCardInstallments && creditCardInstallments.filter(installment => installment.gateway === selectedCreditCardInstallment).length > 0;\n const hasValidCreditCardSelected = existsCreditCard && !saveNewCreditCard;\n this.setState(prevState => ({\n ...prevState,\n saveNewCreditCard: !saveNewCreditCard,\n hasValidCreditCardSelected,\n canSubmit: isCreditCardInstallmentsEnabled ? hasSelectedCreditCardInstallment && existsCreditCard && !saveNewCreditCard : existsCreditCard && !saveNewCreditCard,\n }));\n\n this.handletValidCreditCardSelectedStatus(hasValidCreditCardSelected);\n\n if (subscriptionAnalytics) {\n callingOrigin === PaypalActionTypes.CALLING_BY_PAYMENT_MODAL && subscriptionAnalytics.executePaymentClick(hasValidCreditCardSelected ? '3_usar_cartão_existente' : '3_usar_cartão_novo');\n callingOrigin === PaypalActionTypes.CALLING_BY_MANAGER_INVOICES && subscriptionAnalytics.executePaymentInvoiceManagerClick(hasValidCreditCardSelected ? '3_usar_cartão_existente' : '3_usar_cartão_novo');\n callingOrigin === PaypalActionTypes.CALLING_BY_LIST_SUBSCRIPTIONS && subscriptionAnalytics.executePaymentInSubscriptionsListClick(hasValidCreditCardSelected ? '3_usar_cartão_existente' : '3_usar_cartão_novo');\n }\n }\n\n handleLoadCreditCard = () => {\n const { creditCardInstallments, selectedCreditCardInstallment } = this.state;\n const { loadCreditCard } = this.props;\n loadCreditCard().then((data) => {\n this.setState({ loadingCardCredit: true });\n const {\n subscriptionAnalytics, callingOrigin, isCreditCardInstallmentsEnabled,\n } = this.props;\n\n const hasSelectedCreditCardInstallment = creditCardInstallments.filter(installment => installment.gateway === selectedCreditCardInstallment).length > 0;\n\n const canSubmit = !isCreditCardInstallmentsEnabled ? true : hasSelectedCreditCardInstallment;\n\n if (data.creditCard && data.creditCard.cardtype) {\n this.setState({\n saveNewCreditCard: true,\n radioDisabled: false,\n canSubmit,\n hasValidCreditCardSelected: true,\n existsCreditCard: true,\n });\n\n if (subscriptionAnalytics) {\n callingOrigin === PaypalActionTypes.CALLING_BY_PAYMENT_MODAL && subscriptionAnalytics.executePaymentClick('3_usar_cartão_existente');\n callingOrigin === PaypalActionTypes.CALLING_BY_MANAGER_INVOICES && subscriptionAnalytics.executePaymentInvoiceManagerClick('3_usar_cartão_existente');\n callingOrigin === PaypalActionTypes.CALLING_BY_LIST_SUBSCRIPTIONS && subscriptionAnalytics.executePaymentInSubscriptionsListClick('3_usar_cartão_existente');\n }\n\n this.handletValidCreditCardSelectedStatus(true);\n } else if (subscriptionAnalytics) {\n callingOrigin === PaypalActionTypes.CALLING_BY_PAYMENT_MODAL && subscriptionAnalytics.executePaymentClick('3_usar_cartão_novo');\n callingOrigin === PaypalActionTypes.CALLING_BY_MANAGER_INVOICES && subscriptionAnalytics.executePaymentInvoiceManagerClick('3_usar_cartão_novo');\n callingOrigin === PaypalActionTypes.CALLING_BY_LIST_SUBSCRIPTIONS && subscriptionAnalytics.executePaymentInSubscriptionsListClick('3_usar_cartão_novo');\n }\n });\n }\n\n handleCreditCardInstallments = async () => {\n const {\n getCreditCardInstallmentsByProductData,\n getCreditCardInstallments, invoiceId,\n subscriptionId, subscriptionType,\n } = this.props;\n\n if (invoiceId && invoiceId !== undefined) {\n await getCreditCardInstallments(invoiceId).then((data) => {\n this.setState({ loadingCreditCardInstallments: false });\n this.setState({ creditCardInstallments: data.installments });\n });\n } else {\n await getCreditCardInstallmentsByProductData(subscriptionId, subscriptionType).then((data) => {\n this.setState({ loadingCreditCardInstallments: false });\n this.setState({ creditCardInstallments: data.installments });\n });\n }\n }\n\n cleanHgAcademyGAEvent = async () => {\n const { invoiceDetails } = this.state;\n const { loadInvoiceDetails, invoiceId } = this.props;\n if (!Object.prototype.hasOwnProperty.call(invoiceDetails, 'id')) {\n const data = await loadInvoiceDetails(invoiceId);\n const invoiceDesc = data.invoice.items[0] ? data.invoice.items[0].description : '';\n const matched = invoiceDesc.match(/Hostgator Academy Pass/);\n if (matched && matched.length > 0) {\n cancelBuyCCByPortalClick();\n }\n }\n };\n\n isCallingModalByManagerInvoices = () => {\n const {\n callingOrigin,\n } = this.props;\n return [PaypalActionTypes.CALLING_BY_PAYMENT_MODAL, PaypalActionTypes.CALLING_BY_LIST_SUBSCRIPTIONS].includes(callingOrigin);\n }\n\n paymentHandle = async () => {\n const {\n enqueueSnackbar,\n getPaymentMethod,\n invoiceId,\n loadInvoices,\n newPaymentMethod,\n onClose,\n t,\n onPaymentExecuted,\n updateStatusInvoiceToConfirmingPayment,\n isExceedsRetriesCC,\n providerIdentifier,\n showCreditCardCheckbox,\n } = this.props;\n\n const {\n selectedCreditCardInstallment,\n saveNewCreditCard,\n enabledChangeProductsPaymentMethodToCC,\n } = this.state;\n\n this.setState({ loadingPaymentFlux: true });\n\n if (saveNewCreditCard && isExceedsRetriesCC) {\n enqueueSnackbar('snackbar.creditCard.paymentFailByAttemptsLimit', notifierError);\n this.setState({ loadingPaymentFlux: false });\n return;\n }\n\n const currentPaymentMethod = selectedCreditCardInstallment && selectedCreditCardInstallment.trim().length > 0 ? selectedCreditCardInstallment : newPaymentMethod;\n\n getPaymentMethod(currentPaymentMethod, invoiceId, providerIdentifier, showCreditCardCheckbox ? enabledChangeProductsPaymentMethodToCC : false).then((action) => {\n const isError = action.type === ERROR_CC_METHOD;\n\n if (isError) {\n switch (action.status) {\n case 'INVALID_INVOICE_STATUS':\n enqueueSnackbar('snackbar.creditCard.invoice_status_not_unpaid', notifierErrorLong);\n updateStatusInvoiceToConfirmingPayment(invoiceId);\n onClose();\n break;\n case 'PENDING_ANALYSIS':\n loadInvoices('Unpaid', true);\n enqueueSnackbar('snackbar.creditCard.invoicePaymentPending', notifierSuccessLong);\n onPaymentExecuted({ status: PAYMENT_STATUS.PENDING_ANALYSIS }, this.isCallingModalByManagerInvoices() ? t('routes.invoices') : t('routes.subscriptions'));\n onClose();\n break;\n default:\n enqueueSnackbar('snackbar.creditCard.invoice_error', notifierError);\n if (Object.prototype.hasOwnProperty.call(action, 'key') && action.key === PHISHING_STATUS_ANALYSIS) {\n const { onClose, loadInvoices } = this.props;\n onClose();\n const noCache = true;\n loadInvoices('Unpaid', noCache);\n }\n break;\n }\n } else {\n onClose();\n onPaymentExecuted({ status: PAYMENT_STATUS.SUCCESS }, this.isCallingModalByManagerInvoices() ? t('routes.invoices') : t('routes.subscriptions'));\n enqueueSnackbar('snackbar.creditCard.invoicePaymentSuccess', notifierSuccess);\n updateStatusInvoiceToConfirmingPayment(invoiceId);\n }\n this.setState({ loadingPaymentFlux: false });\n });\n }\n\n cardSaveHandle = (cardForm) => {\n const {\n saveCreditCard,\n enqueueSnackbar,\n } = this.props;\n this.setState({ loadingPaymentFlux: true });\n saveCreditCard(cardForm).then((action) => {\n const isSuccess = action.type !== SAVE_CREDIT_CARD_ERROR;\n\n if (isSuccess) {\n enqueueSnackbar('snackbar.creditCard.create', notifierSuccess);\n this.paymentHandle();\n } else {\n enqueueSnackbar('snackbar.creditCard.create_error', notifierError);\n this.setState({ loadingPaymentFlux: false });\n }\n });\n }\n\n onSaveCreditCard = () => {\n const { creditCardInstallments, selectedCreditCardInstallment } = this.state;\n const { isCreditCardInstallmentsEnabled } = this.props;\n\n const hasSelectedCreditCardInstallment = creditCardInstallments.filter(installment => installment.gateway === selectedCreditCardInstallment).length > 0;\n\n const canSubmit = !isCreditCardInstallmentsEnabled ? true : hasSelectedCreditCardInstallment;\n\n this.setState({ canSubmit, hasValidCreditCardSelected: true });\n this.handletValidCreditCardSelectedStatus(true);\n }\n\n onFocus = () => {\n const { t } = this.props;\n this.setState({\n labelCvv: t('creditcard.label.cvvLong'),\n });\n }\n\n onBlur = (event) => {\n const { t } = this.props;\n if (!event.target.value) {\n this.setState({\n labelCvv: t('creditcard.label.cvvShort'),\n });\n }\n }\n\n handleChangeCreditCardInstallment = (event) => {\n this.setState({ selectedCreditCardInstallment: event.target.value });\n\n const {\n displayActionButton,\n onSelectCreditCardInstallment,\n } = this.props;\n\n const {\n hasValidCreditCardSelected, creditCardInstallments,\n } = this.state;\n const hasSelectedCreditCardInstallment = creditCardInstallments.filter(installment => installment.gateway === event.target.value).length > 0;\n\n this.setState({ canSubmit: hasSelectedCreditCardInstallment && hasValidCreditCardSelected });\n\n if (!displayActionButton && onSelectCreditCardInstallment) {\n onSelectCreditCardInstallment(event.target.value);\n }\n }\n\n handleOnOpenCreditCardInstallmentsTooltip = () => {\n this.setState({ showCreditCardInstallmentsTooltip: true });\n }\n\n handleOnCloseCreditCardInstallmentsTooltip = () => {\n this.setState({ showCreditCardInstallmentsTooltip: false });\n }\n\n async submit(event) {\n event.preventDefault();\n\n this.setState({ loadingPaymentFlux: true });\n\n await generateRecaptchaToken(config.RECAPTCHA_SITE_KEY, 'creditcardpayment').then((token) => {\n this.verifyCallback(token);\n });\n this.paymentHandle();\n }\n\n canSubmit() {\n let hasErrors = false;\n\n const {\n cardInfo,\n cardForm,\n isEnabled,\n creditCardInstallments,\n selectedCreditCardInstallment,\n } = this.state;\n\n const {\n ccnumber,\n ccvnumber,\n expdate,\n ccname,\n } = cardForm;\n\n const { isCreditCardInstallmentsEnabled } = this.props;\n\n const ccNumberLength = ccnumber.length;\n\n if (ccNumberLength < cardInfo.minLength || ccNumberLength > cardInfo.maxLength) {\n hasErrors = true;\n }\n\n if (ccname.length < cardInfo.minLengthName) {\n hasErrors = true;\n }\n\n if (expdate.replace(/_/g, '').length !== 5 || isDateLowerThanCurrent(expdate, 'MM/YY', null, isEnabled)) {\n hasErrors = true;\n }\n\n if (ccvnumber.length < cardInfo.codeSize - 1) {\n hasErrors = true;\n }\n\n if (isCreditCardInstallmentsEnabled && !creditCardInstallments.includes(selectedCreditCardInstallment)) {\n hasErrors = true;\n }\n\n if (hasErrors) {\n this.setState({ canSubmit: false, hasValidCreditCardSelected: false });\n } else {\n this.setState({ canSubmit: true, hasValidCreditCardSelected: true });\n }\n }\n\n updateCreditCardValue(name, value) {\n if (name === 'ccvnumber') {\n this.setState({ focusedField: 'cvc' });\n } else {\n this.setState({ focusedField: 'number' });\n }\n\n const letters = /^[a-zA-Z\\s]*$/;\n if (name === 'ccname' && (value.search(' ') > -1 || value.search(letters))) {\n this.canSubmit();\n return;\n }\n\n if (name === 'cctype') {\n this.setState(prevState => ({\n cardInfo: {\n ...prevState.cardInfo,\n ...getCreditCardTypeInfo(value),\n },\n }));\n }\n\n this.setState(prevState => ({\n cardForm: {\n ...prevState.cardForm,\n [name]: value.toLowerCase(),\n },\n }),\n () => this.canSubmit());\n }\n\n handleEvents(type, event) {\n const {\n removeCreditCard,\n creditCard,\n enqueueSnackbar,\n } = this.props;\n const { recaptchaToken } = this.state;\n\n switch (type) {\n case 'remove':\n removeCreditCard(recaptchaToken).then(() => {\n creditCard.error\n ? enqueueSnackbar('notifyFailMessage', notifierError)\n : enqueueSnackbar('notifySuccessMessage', notifierSuccess);\n });\n break;\n case 'save':\n this.submit(event);\n break;\n case 'changeInputValue':\n this.updateCreditCardValue(event.target.name, event.target.value);\n break;\n default:\n enqueueSnackbar('notifyFailMessage', notifierError);\n break;\n }\n }\n\n creditCardInstallmentsRender() {\n const {\n classes,\n t,\n showResumeData,\n } = this.props;\n const {\n creditCardInstallments,\n selectedCreditCardInstallment,\n showCreditCardInstallmentsTooltip,\n } = this.state;\n\n const mappedInstallments = creditCardInstallments.map((installment, index) => (\n \n 0 ? ` ${t('creditCardInstallmentFees')}` : ''),\n totalValue: index > 0 ? ` - ${formatCurrency(installment.totalValue)}` : '',\n }}\n />\n \n ));\n\n return (\n \n \n
{t('creditCardInstallmentsQuestion')}
\n
\n <>0\n <>1\n \n 2\n \n \n )}\n >\n \n \n \n {t('selectCreditCardInstallments')}\n \n \n \n );\n }\n\n creditCardRender() {\n const {\n showResumeData,\n } = this.props;\n return (\n \n {loadingCreditCardInstallments ? (\n \n \n {t('processingSelectedPaymentPleaseWait')}\n
\n \n ) : (\n <>\n {showResumeData && (\n \n \n \n {t('dialog.title')}\n \n )}\n \n {showResumeData && (\n\n \n \n \n \n \n {t('dialog.invoiceDetails')} \n
\n \n \n \n \n\n \n \n \n {invoiceDetails.id ? (\n \n \n ) : (\n \n \n \n \n \n \n )}\n {!loadingCardCredit && \n \n {showResumeData && (t('dialog.subtitle'))}\n {!showResumeData && (selectCardLabel)}\n \n \n )}\n {creditCard.errors && {t('errorSavingCreditCard')} }\n\n {loadingCardCredit && (\n \n {existsCreditCard && (\n \n \n
{t('useExistingCard')}}\n control={(\n \n this.handleEvents('remove')}\n />\n\n
\n )}\n {!showResumeData && (\n \n this.handleEvents('remove')}\n creditCardExpDateLabel={t('creditCardExpDate')}\n />\n
\n )}\n \n )}\n \n )}\n\n \n \n {t('dialogRegisterAndUseNewCard')}}\n control={(\n {infoAddNewCreditCardLabel} \n )}\n {showResumeData && (\n \n {t('dialog.formCaption')}\n \n )}\n {(!saveNewCreditCard\n || (!creditCard.loading\n && !creditCard.cardType)) && (\n \n {this.creditCardRender()}\n \n )}\n \n \n \n )}\n\n {isCreditCardInstallmentsEnabled && this.creditCardInstallmentsRender()}\n {showCreditCardCheckbox && (\n \n\n {showResumeData && (\n \n this.handleEvents('save', e)}\n disabled={!canSubmit || !hasValidCreditCardSelected}\n >\n {t('payInvoiceAction')}\n \n \n\n )}\n {!showResumeData && displayActionButton && (\n \n this.handleEvents('save', e)}\n disabled={!canSubmit || !hasValidCreditCardSelected}\n />\n \n\n )}\n\n {loadingPaymentFlux && \n \n \n {securityTitlePix} \n {securityDescriptionPix} \n \n \n {agilityTitlePix} \n {agilityDescriptionPix} \n \n \n {taxTitlePix} \n {taxDescriptionPix} \n \n \n \n {enabledContentDoubts && (\n \n {doubtsPix}\n { onClickSupportLink(); }}\n >\n {doubtsLink}\n \n \n )}\n \n );\n};\n\n\nexport default PixCard;\n","import styled, { css } from 'styled-components';\n\nexport const Content = styled.div`\n ${({ theme, variant }) => {\n const variants = {\n withPix: {\n margin: '40px 0px',\n },\n default: {\n margin: '40px 0px',\n },\n };\n return css`\n background: ${theme.v1.color.background.wizard};\n margin: ${variants[variant].margin};\n padding: 24px 36px;\n `;\n }}\n`;\n\nexport const ContentPixCode = styled.div`\n${({ theme }) => css`\n margin: 24px 69px 0px 69px;\n padding: 18px 46px;\n text-align: center;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin: 0px;\n padding: 18px 0px;\n }\n `}\n`;\n\nexport const ContentInputPixCode = styled.div`\n ${({ theme }) => css`\n padding: 0px 0px 10px 0px;\n\n div {\n border-radius: 5px;\n }\n\n input {\n border: solid 1px ${theme.v1.shadows.grey.light};\n border-radius: 5px;\n }\n `}\n`;\n\nexport const ContentPixUpdater = styled.div`\n display: inline-grid;\n height: 100px;\n\n`;\n\nexport const Icon = styled.span`\n display: inline-grid;\n margin-right:10.6px;\n position: relative;\n top: 3px;\n`;\n\nexport const ContentDoubts = styled.div`\n ${({ theme }) => css`\n font-family: ${theme.v1.font.family.primary};\n font-size: 12px;\n text-align: center;\n z-index: 99;\n `}\n`;\nexport const ContentDataPix = styled.div`\n ${({ theme }) => css`\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n padding: 0px 98px 0px 98px;\n text-align: center;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n padding: 0;\n text-align: center;\n }\n `}\n`;\n\nexport const ButtonReload = styled.button`\n background: transparent;\n border: none;\n left: 36px;\n position: relative;\n text-align: center;\n top: -138px;\n width: min-content;\n`;\n\n\nexport const PixUpdateDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.bold};\n margin: 0;\n padding: 14px 0px 0px 0px;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n text-align: center;\n }\n `}\n`;\n\n\nexport const PixDescription = styled.p`\n\n ${({ theme, variant }) => {\n const variants = {\n withPix: {\n padding: '24.4px 24px 0px 24px',\n },\n default: {\n padding: '24.4px 0px 0px 0px',\n },\n };\n return css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n margin: 0;\n padding: ${variants[variant].padding};\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n padding: 24.4px 0px 0px 0px;\n text-align: center;\n }\n `;\n }\n}\n`;\n\nexport const PixCodeDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 18px;\n margin: 0px 0px 9px 0px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n text-align: center;\n }\n `}\n`;\n\n\nexport const Number = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.background.marketingBanner};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.bold};\n margin: 0px 8px 0px 0px;\n`}\n`;\n\nexport const Description = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n display: flex;\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n margin: 0;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n text-align: ;\n }\n `}\n`;\n\nexport const List = styled.ul`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n margin: 0;\n padding: 0px;\n\n strong {\n font-weight: ${theme.v1.font.weights.medium};\n }\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n text-align: center;\n }\n `}\n`;\nexport const Item = styled.li`\n list-style-type:none;\n padding: 0 0 16px 0;\n\n &:last-child{\n padding: 0;\n }\n`;\n\nexport const Link = styled.a`\n${({ theme }) => css`\n color: ${theme.v1.color.action.primary};\n margin-right: 5px;\n text-decoration: underline;\n`}\n`;\n\nexport const QRCode = styled.img`\n${({ variant }) => {\n const variants = {\n withPix: {\n margin: '40px 0px',\n },\n default: {\n margin: '24px 0px',\n },\n };\n return css`\n height: 153px;\n margin: ${variants[variant].margin};\n width: 153px:\n `;\n }}\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\n\n\nimport useLocale from '@/hooks/useLocale';\nimport * as Styles from './QRCodePixCard.styles';\nimport { IconWatch, IconCopyContent } from '@/icons';\n\nimport CopyPasteButton from '../../../pages/common/v1/CopyPasteButton/CopyPasteButton';\nimport { Timer } from '@/pages/common/v1/Timer';\nimport { Input } from '@/pages/common/v1/inputs';\nimport { useDispatch } from 'react-redux';\nimport { invoicesActions } from '@/redux/modules';\nimport { INVOICES_STATUS } from '@/config/invoices/invoiceStatus';\nimport { billingAnalytics } from '@/analytics';\nimport { OriginCalling } from '@/components/billing/subscriptions/PaymentModal/PaymentModal.types';\nimport { isMobile } from '@/utils/Validators/validation';\n\nconst QRCodePixCard = ({\n pixCode = '00020126360014BR.GOV.BCB.PIX0114+554899608447052040000530398654040.015802BR5912Luiz Gustavo6009Ararangua62150511119585989926304BD53',\n invoiceId = null,\n onFinishPixTimer = null,\n timeToVerifyInvoiceStatus = 14,\n limitTimeInSecondsToDisplayPixCode,\n onPaymentSuccessPix = null,\n qrCode = null,\n originCalling = null,\n\n}) => {\n const { billing: billingLocale } = useLocale();\n const { manageSubscriptionPaymentInvoiceModal: manageSubscriptionPaymentInvoiceModalLocale } = billingLocale;\n const [isFinishedTimeInTimer, setFinishedTimeInTimer] = useState(false);\n const timerPix = manageSubscriptionPaymentInvoiceModalLocale.timerPixLabel;\n const firstLineTitlePixQRCodeCard = manageSubscriptionPaymentInvoiceModalLocale.titlePixQRCodeCardLabel[0];\n const secoundLineTitlePixQRCodeCard = manageSubscriptionPaymentInvoiceModalLocale.titlePixQRCodeCardLabel[1];\n\n const copyCodePix = manageSubscriptionPaymentInvoiceModalLocale.copyCodePixLabel;\n const copiedCodePix = manageSubscriptionPaymentInvoiceModalLocale.copiedCodePixLabel;\n const step1Pix = manageSubscriptionPaymentInvoiceModalLocale.step1PixLabel;\n const step2Pix = manageSubscriptionPaymentInvoiceModalLocale.step2PixLabel;\n const step3Pix = manageSubscriptionPaymentInvoiceModalLocale.step3PixLabel;\n const doubtsPix = manageSubscriptionPaymentInvoiceModalLocale.doubtsPixLabel;\n const doubtsLink = manageSubscriptionPaymentInvoiceModalLocale.doubtsPixLink;\n const doubtsURL = manageSubscriptionPaymentInvoiceModalLocale.doubtsPixURL;\n\n\n const [invoiceDetails, setInvoiceDetails] = useState({});\n const dispatch = useDispatch();\n\n const [verificationPaymentNumber, setVerificationPaymentNumber] = useState(0);\n\n const idContentDataPix = 'content-data-pix';\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n\n\n const isCallingModalBySubscription = () => originCalling === OriginCalling.SUBSCRIPTION_MANAGER;\n const isCallingModalByInvoice = () => originCalling === OriginCalling.INVOICES_MANAGER;\n const isCallingModalBySubscriptionList = () => originCalling === OriginCalling.SUBSCRIPTION_LIST;\n\n\n const onClickCopyCode = () => {\n if (isCallingModalBySubscription()) {\n subscriptionAnalytics.executePaymentClick('4_copiar_codigo');\n }\n if (isCallingModalByInvoice()) {\n subscriptionAnalytics.executePaymentInvoiceManagerClick('4_copiar_codigo');\n }\n\n if (isCallingModalBySubscriptionList()) {\n subscriptionAnalytics.executePaymentInSubscriptionsListClick('4_copiar_codigo');\n }\n };\n\n const onClickSupportLink = () => {\n if (isCallingModalBySubscription()) {\n subscriptionAnalytics.executePaymentClick('4_central_ajuda');\n }\n if (isCallingModalByInvoice()) {\n subscriptionAnalytics.executePaymentInvoiceManagerClick('4_central_ajuda');\n }\n if (isCallingModalBySubscriptionList()) {\n subscriptionAnalytics.executePaymentInSubscriptionsListClick('4_central_ajuda');\n }\n };\n\n const onFocus = (inputPix) => {\n const buttonCopyPix = document.getElementById('qr-code-copy-paste-button');\n inputPix.target.select();\n buttonCopyPix.click();\n };\n\n const setDataInvoice = (data) => {\n setInvoiceDetails(data);\n\n if (data && data.status === INVOICES_STATUS.PAID) {\n onPaymentSuccessPix && onPaymentSuccessPix();\n return true;\n }\n setVerificationPaymentNumber(verificationPaymentNumber => verificationPaymentNumber + 1);\n };\n\n\n const startTimer = useCallback(() => {\n const id = window.setInterval(() => {\n dispatch(invoicesActions.invoices.loadDetails.request(invoiceId, setDataInvoice));\n }, timeToVerifyInvoiceStatus * 1000);\n window.setTimeout(() => {\n window.clearInterval(id);\n }, timeToVerifyInvoiceStatus * 1000);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [dispatch]);\n\n useEffect(() => {\n startTimer();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [verificationPaymentNumber]);\n\n const handlerFinishTimer = () => {\n setFinishedTimeInTimer(true);\n if (Object.keys(invoiceDetails).length === 0 || invoiceDetails.status === INVOICES_STATUS.UNPAID) {\n onFinishPixTimer && onFinishPixTimer();\n }\n };\n\n return (\n <>\n\n \n {!isFinishedTimeInTimer && (\n \n <>\n {!isMobile && (\n <>\n { firstLineTitlePixQRCodeCard}\n {secoundLineTitlePixQRCodeCard }\n \n )}\n {isMobile && (\n <>\n { firstLineTitlePixQRCodeCard}\n {'.'}\n \n )}\n \n \n )}\n \n \n \n <>\n {timerPix}\n {!isFinishedTimeInTimer && (\n \n {!isMobile && (\n \n\n \n )}\n \n {!isFinishedTimeInTimer && (\n \n \n { onClickCopyCode(); }}\n contentButtonId={idContentDataPix}\n icon={ \n )}\n \n \n \n \n 01 \n {step1Pix}\n \n \n \n \n 02 \n {step2Pix}\n \n \n \n \n 03 \n {step3Pix}\n \n \n \n \n \n {doubtsPix}\n { onClickSupportLink(); }}\n >\n {doubtsLink}\n \n \n \n );\n};\n\n\nexport default QRCodePixCard;\n","import styled, { css } from 'styled-components';\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n background: ${theme.v2.colors.feedback.canceledLight};\n padding: 24px 32px;\n margin: 24px 0px 16px 0px;\n text-align: center;\n `}\n`;\n\nexport const ContentDoubts = styled.div`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n text-align: center;\n a:first-child {\n display:block;\n }\n `}\n`;\n\nexport const Link = styled.a`\n${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryBlue};\n margin-right: 5px;\n text-decoration: underline;\n`}\n`;\n","import React, { } from 'react';\n\n\nimport useLocale from '@/hooks/useLocale';\nimport * as Styles from './TicketCardInfo.styles';\n\nconst TicketCardInfo = ({\n enabledContentDoubts = true,\n}) => {\n const { billing: billingLocale } = useLocale();\n const { manageSubscriptionPaymentInvoiceModal: manageSubscriptionPaymentInvoiceModalLocale } = billingLocale;\n\n const infoSelectionTicketLabel = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.infoSelectionTicketOption;\n const doubtsTicketLabel = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.doubtsTicketDescription;\n const doubtsTicketLinkLabel = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.doubtsTicketLink;\n const doubtsTicketURLLabel = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.doubtsTicketURL;\n\n return (\n <>\n \n <>\n {infoSelectionTicketLabel[0]}\n {infoSelectionTicketLabel[1]} \n {infoSelectionTicketLabel[2]}\n {infoSelectionTicketLabel[3]} \n \n \n \n {enabledContentDoubts && (\n \n {doubtsTicketLabel}\n \n {doubtsTicketLinkLabel}\n \n \n )}\n \n );\n};\n\n\nexport default TicketCardInfo;\n","import { Button } from 'gatorcomponents';\nimport styled, { css } from 'styled-components';\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n background: ${theme.v2.colors.feedback.canceledLight};\n margin: 17px 0px 8px 0px;\n padding: 24px 36px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 4px 0px 8px 0px;\n padding: 16px 11px 16px 18px;\n }\n `}\n`;\n\nexport const ContentTicketCode = styled.div`\n${({ theme }) => css`\n margin: 0px 88px 0px 88px;\n text-align: center;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 0px;\n padding: 28px 0px;\n }\n `}\n`;\n\nexport const ContentInputTicketCode = styled.div`\n ${({ theme }) => css`\n padding: 0px 0px 10px 0px;\n div {\n border-radius: 5px;\n }\n\n input {\n border: solid 1px ${theme.v2.shadows.light};\n border-radius: 5px;\n }\n textarea {\n border-radius: 5px;\n border: solid 1px ${theme.v2.shadows.light};\n font-family: ${theme.v2.font.family.primary};\n font-weight: ${theme.v2.font.weights.regular};\n min-height:0px;\n text-align:center;\n }\n `}\n`;\n\nexport const ContentDoubts = styled.div`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n font-size: 12px;\n text-align: center;\n z-index: 99;\n\n a:first-child {\n display:block;\n }\n\n `}\n`;\n\nexport const Controls = styled.div`\n${({ theme }) => css`\n display: flex;\n justify-content: center;\n margin-top: 32px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin-bottom: 12px;\n\n `}\n `;\n\nexport const ControlButton = styled.div`\n ${() => css`\n &:not(:first-child) {\n margin-left: 12px;\n }\n\n button:first-child {\n margin-right: 16px;\n }\n\n @media (max-width: 600px) {\n text-align: center;\n\n ${Button} {\n font-size: 14px;\n }\n\n &:not(:first-child) {\n margin-left: 0;\n }\n }\n `}\n`;\n\nexport const ContentTitleTicket = styled.div`\n ${({ theme, displayBarcode }) => css`\n font-family: ${theme.v2.font.family.primary};\n font-size: 16px;\n padding: 0px 90px 0px 90px;\n text-align: center;\n margin-bottom: ${displayBarcode ? '0px' : '24px'};\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n padding: 0;\n text-align: center;\n }\n `}\n`;\n\nexport const ContentBarcode = styled.div`\n text-align: center;\n`;\n\nexport const TicketTitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 16px;\n margin: 0;\n padding: 24.4px 0px 0px 0px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n padding: 0px 0px 0px 0px;\n text-align: center;\n }\n `\n}\n`;\n\nexport const Number = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v2.font.weights.bold};\n margin: 0px 8px 0px 0px;\n display: initial;\n`}\n`;\n\nexport const TipTitle = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 14px;\n margin: 0px 0px 26px 0px;\n font-weight: ${theme.v2.font.weights.bold};\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n text-align: ;\n }\n `}\n`;\n\nexport const Description = styled.div`\n ${({ theme }) => css`\n font-size: 14px;\n margin: 0;\n display: flex;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n text-align: ;\n }\n `}\n`;\nexport const Label = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n text-align: initial;\n }\n `}\n`;\n\n\nexport const List = styled.ul`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 14px;\n margin: 0;\n padding: 0px;\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n text-align: center;\n }\n `}\n`;\nexport const Item = styled.li`\n list-style-type:none;\n padding: 0 0 16px 0;\n\n &:last-child{\n padding: 0;\n }\n`;\n\nexport const Link = styled.a`\n${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryBlue};\n margin-right: 5px;\n text-decoration: underline;\n`}\n`;\n\nexport const Barcode = styled.img`\n height: 83px;\n margin: 16px 0px 14px 0px;\n width: 537px:\n`;\n","import React, { useState } from 'react';\n\n\nimport useLocale from '@/hooks/useLocale';\nimport * as Styles from './TicketBarcodeCard.styles';\nimport { IconCopyContent } from '@/icons';\n\nimport CopyPasteButton from '../../../pages/common/v1/CopyPasteButton/CopyPasteButton';\nimport { Input } from '@/pages/common/v1/inputs';\nimport { isMobile } from '@/utils/Validators/validation';\nimport barCodeImg from '@/media/billing/barcode.png';\nimport { Button } from 'gatorcomponents';\nimport { CircularProgress } from '@material-ui/core';\nimport { Textarea } from '@/pages/common';\n\nconst TicketBarcodeCard = ({\n digitableLine = '34191.09248 77200.227195 72734.800005 7 01019888101988',\n barcode = null,\n onPrintTicket = null,\n onSaveTicketAsPDF = null,\n enabledBarcodeDisplay = false,\n\n}) => {\n const { billing: billingLocale } = useLocale();\n const { manageSubscriptionPaymentInvoiceModal: manageSubscriptionPaymentInvoiceModalLocale } = billingLocale;\n const [loading, setLoading] = useState(false);\n\n const copyCodeTicketLabel = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.copyBarcodeLabel;\n const copiedCodeTicketLabel = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.copiedBarcodeLabel;\n const tipTitle = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.tipTicketTitle;\n const tip1Ticket = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.tip1TicketLabel;\n const titleBarcode = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.infoPaymentByTicketTitle;\n\n const tip2Ticket0 = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.tip2TicketLabel[0];\n const tip2Ticket1 = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.tip2TicketLabel[1];\n const tip2Ticket2 = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.tip2TicketLabel[2];\n const tip2Ticket3 = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.tip2TicketLabel[3];\n const tip3Ticket = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.tip3TicketLabel;\n\n const saveTicketAsPDFLabel = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.saveTicketAsPDF;\n const printTicketLabel = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.printTicket;\n\n const doubtsTicketLabel = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.doubtsTicketDescription;\n const doubtsLink = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.doubtsTicketLink;\n const doubtsURL = manageSubscriptionPaymentInvoiceModalLocale.ticketBlockInfo.doubtsTicketURL;\n\n const idContentDataTicket = 'content-data-ticket';\n\n const onFocus = (inputTicket) => {\n const buttonCopyTicket = document.getElementById('barcode-copy-paste-button');\n inputTicket.target.select();\n buttonCopyTicket.click();\n };\n\n const handleOnPrintTicket = () => {\n setLoading(true);\n onPrintTicket != null && onPrintTicket();\n setLoading(false);\n };\n\n\n const handleOnSaveTicketAsPDF = () => {\n setLoading(true);\n onSaveTicketAsPDF != null && onSaveTicketAsPDF();\n setLoading(false);\n };\n\n return (\n <>\n \n \n {titleBarcode()}\n \n \n {!isMobile && enabledBarcodeDisplay && (\n \n \n )}\n \n \n {!isMobile && (\n \n\n \n \n {tipTitle}\n \n \n \n \n 01 \n {tip1Ticket} \n \n \n \n \n 02 \n \n {tip2Ticket0}\n {tip2Ticket1} \n {tip2Ticket2}\n {tip2Ticket3} \n \n \n \n \n \n 03 \n {tip3Ticket} \n \n \n \n \n \n {doubtsTicketLabel}\n \n {doubtsLink}\n \n \n \n \n \n \n \n \n \n );\n};\n\n\nexport default TicketBarcodeCard;\n","import React, { useEffect, useState } from 'react';\nimport { Button } from '@/pages/common/v1/Button';\nimport { Separator } from '@/pages/common/v1/Separator';\nimport {\n Dialog,\n CircularProgress,\n IconButton,\n} from '@material-ui/core'; import * as Styles from './PaymentModal.styles';\nimport {\n DiscountType,\n OriginCalling,\n PaymentMethods,\n PaymentModalProps,\n} from './PaymentModal.types';\nimport { locale } from '@/utils/locale';\nimport useLocale from '@/hooks/useLocale';\nimport { Accordion, Radio } from '@/pages/common';\nimport {\n BOLETO,\n BOLETO_CL_CO,\n BOLETO_MX,\n CREDIT_CARD_ES,\n GATORPAY_BOLETO,\n LIST_BOLETO_METHODS,\n LIST_CREDIT_CARD_METHODS,\n LIST_PAYPAL_METHODS,\n PIX,\n} from '@/config/billing/paymentMethods';\nimport { IS_PROD, config, COUNTRY } from '@/config/index';\nimport { invoiceUnpaidCardTagManager } from '@/utils/ThirdParties/tagManager';\nimport {\n isBRServer, isCLServer, isCOServer, isMXServer, isMobile, hasPaymentEnabled,\n} from '@/utils/Validators/validation';\nimport {\n getBoletoUrl, checkBoletoUserData, payTicketInvoiceForES,\n} from '@/redux/actions/invoices';\nimport { Chip } from '@/pages/common/v1/Chip';\nimport { BOLETO_URL } from '@/config/whmcsUrls';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport { notifierError } from '@/utils/Application/notifier';\nimport { useDispatch, useSelector } from 'react-redux';\nimport PaypalDialog from '@/components/Paypal/PaypalDialog';\nimport CreditCardDialog from '@/components/CreditCard/CreditCardDialog';\nimport { Close } from '@material-ui/icons';\nimport {\n ERROR_PAYMENT_METHOD_TICKET_INVOICE_ES,\n RECEIVE_PAYMENT_METHOD_TICKET_INVOICE_ES,\n} from '@/redux/actions/actionsTypes';\nimport { PAYMENT_STATUS } from '@/pages/Invoices/types';\nimport { useHistory } from 'react-router';\nimport { loadReCaptcha } from '@/utils/Application/reCaptcha';\nimport InvoiceDetails from '@/components/Invoices/InvoiceDetails';\nimport Loader from '@/components/Layout/Loader';\nimport { invoicesActions } from '@/redux/modules/invoices';\nimport { billingAnalytics } from '@/analytics';\nimport { PaypalActionTypes } from '@/components/Paypal/PaypalDialog/Paypal.types';\nimport PixCard from '@/components/Pix/PixCard';\nimport QRCodePixCard from '@/components/Pix/QRCodePixCard';\nimport { billingActions, preChatActions } from '@/redux/modules';\nimport TicketCardInfo from '@/components/Tickets/TicketCardInfo';\nimport TicketBarcodeCard from '@/components/Tickets/TicketBarcodeCard';\nimport { useFeatureIsOn, useFeatureValue } from '@growthbook/growthbook-react';\nimport { differenceInCalendarDays } from 'date-fns';\nimport {\n CHARLIE_OLD_PAYMENT_MODAL_OPTIONS,\n XRAY_CHANGE_PRODUCT_GATEWAY_USER_REQUEST,\n XRAY_ENABLED_BARCODE_DISPLAY,\n XRAY_ENABLED_DISCOUNT_RETENTION,\n XRAY_ENABLED_DISCOUNT_SAVERS,\n XRAY_ENABLED_FINGERPRINT,\n XRAY_ENABLED_NEW_TICKET_MODAL,\n XRAY_ENABLED_OPTION_TO_SELECT_PAYPAL_ACCOUNT,\n XRAY_ENABLED_PAYMENT_BY_CREDIT_CARD,\n XRAY_ENABLED_PAYMENT_BY_TICKET,\n XRAY_ENABLED_PAYMENT_METHOD_FILTER,\n XRAY_ENABLED_REDIRECT_TO_TICKET_MODAL,\n XRAY_ENABLED_SWITCH_PAYMENT_METHOD_BY_PAYPAL,\n XRAY_INSTALLMENTS_MODAL,\n XRAY_LIMIT_DATE_TO_DISPLAY_NEW_PIX_LABEL,\n XRAY_LIMIT_TIME_IN_SECONDS_TO_DISPLAY_PIX_CODE,\n XRAY_PIX_PAYMENT_GATEWAY,\n} from '@/config/GrowthBook/constants';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { useDiagnostic } from '@/components/Layout/Menu/MyAlerts';\nimport { IconCheck, IconInfo } from 'gatorcomponents';\nimport { DiscountBlock } from '../../components/DiscountBlock';\nimport { getPaymentMethod } from '@/redux/actions/paymentMethod';\n\nconst PaymentModal = ({\n onCloseClick,\n productNameText = '',\n paymentCycleText = '',\n invoiceId = '',\n renovationAmountText = '',\n dueDate = '',\n displayOnlyInvoiceId = true,\n originCalling = '',\n onFinishPixTimer = null,\n hasQRCodeGenerated = false,\n onGenerateErrorPix = null,\n onPaymentSuccessPix = null,\n qrCodeGenerated = '',\n pixCodeGenerated = '',\n isExceedsRetriesCC = false,\n onRedirectTicket = null,\n discount = null,\n totalDiscounts = '',\n hasSuccessSplitInvoice = false,\n handleUpgradeSitelock,\n showCreditCardCheckbox = false,\n setJustLeftSplittedInvoicesModal,\n}) => {\n const dispatch = useDispatch();\n const history = useHistory();\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n const { billing: billingLocale } = useLocale();\n\n const { requestDiagnostic } = useDiagnostic();\n\n const { enabledPaymentMethods } = useSelector(state => state.billing.paymentMethods);\n\n const enabledPaymentMethodFilter = useFeatureIsOn(XRAY_ENABLED_PAYMENT_METHOD_FILTER);\n const enabledPaymentByPayPal = useFeatureIsOn(XRAY_ENABLED_SWITCH_PAYMENT_METHOD_BY_PAYPAL) && (enabledPaymentMethodFilter ? hasPaymentEnabled(enabledPaymentMethods, LIST_PAYPAL_METHODS) : true);\n const enabledCreditCard = useFeatureIsOn(XRAY_ENABLED_PAYMENT_BY_CREDIT_CARD);\n const enabledTicket = useFeatureIsOn(XRAY_ENABLED_PAYMENT_BY_TICKET);\n const enabledCreditCardPaymentAsDefault = useFeatureIsOn(XRAY_CHANGE_PRODUCT_GATEWAY_USER_REQUEST);\n\n const enabledPaymentByTicket = enabledPaymentMethodFilter ? enabledTicket && hasPaymentEnabled(enabledPaymentMethods, LIST_BOLETO_METHODS) : enabledTicket;\n const enabledPaymentByCreditCard = enabledPaymentMethodFilter ? enabledCreditCard && hasPaymentEnabled(enabledPaymentMethods, LIST_CREDIT_CARD_METHODS) : enabledCreditCard;\n const enabledPaymentByPix = useFeatureIsOn(XRAY_PIX_PAYMENT_GATEWAY) && (enabledPaymentMethodFilter ? hasPaymentEnabled(enabledPaymentMethods, [PIX]) : true);\n const isCreditCardInstallmentsEnabled = useFeatureIsOn(XRAY_INSTALLMENTS_MODAL);\n\n const {\n IFRAME_URL_FINGERPRINT,\n MERCHANT_ID,\n ORG_ID,\n } = config.BRASPAG_CONFIG;\n\n const clientInfo = useSelector(state => state.summary);\n const providerIdentifier = `${COUNTRY}${clientInfo.id}${Date.now()}`;\n const enabledFingerprint = useFeatureIsOn(XRAY_ENABLED_FINGERPRINT);\n const providerMerchantIdProviderIdentifier = `${MERCHANT_ID}${providerIdentifier}`;\n const enabledInvoiceDetails = true;\n const enabledChangePayPalAccount = useFeatureIsOn(XRAY_ENABLED_OPTION_TO_SELECT_PAYPAL_ACCOUNT);\n\n const enabledNewTicketModal = useFeatureIsOn(XRAY_ENABLED_NEW_TICKET_MODAL);\n const enabledBarcodeDisplay = useFeatureIsOn(XRAY_ENABLED_BARCODE_DISPLAY);\n const enabledTimeToDisplayQRCode = useFeatureIsOn(XRAY_LIMIT_TIME_IN_SECONDS_TO_DISPLAY_PIX_CODE);\n const enabledRedirectToTickeModal = useFeatureIsOn(XRAY_ENABLED_REDIRECT_TO_TICKET_MODAL);\n\n\n const enabledLimitDateNewPixLabel = useFeatureIsOn(XRAY_LIMIT_DATE_TO_DISPLAY_NEW_PIX_LABEL);\n const limitDateNewPixLabel = useFeatureValue(XRAY_LIMIT_DATE_TO_DISPLAY_NEW_PIX_LABEL);\n const oldPaymentOptions = useFeatureValue(CHARLIE_OLD_PAYMENT_MODAL_OPTIONS);\n const limitDateToDisplayNewPixLabel = enabledLimitDateNewPixLabel && limitDateNewPixLabel.limitDate != null ? limitDateNewPixLabel.limitDate : null;\n\n const enabledLimitTimeToDisplayPixCode = useFeatureIsOn(XRAY_LIMIT_TIME_IN_SECONDS_TO_DISPLAY_PIX_CODE);\n const limitTimeToDisplayPixCode = useFeatureValue(XRAY_LIMIT_TIME_IN_SECONDS_TO_DISPLAY_PIX_CODE);\n const limitTimeInSecondsToDisplayPixCode = enabledLimitTimeToDisplayPixCode && limitTimeToDisplayPixCode.time_in_secounds != null ? limitTimeToDisplayPixCode.time_in_secounds : null;\n const enabledNewPixChipLabel = limitDateToDisplayNewPixLabel != null && differenceInCalendarDays(new Date(`${limitDateToDisplayNewPixLabel} 00:00:00`), new Date()) > 0;\n\n const { manageSubscriptionPaymentInvoiceModal: manageSubscriptionPaymentInvoiceModalLocale } = billingLocale;\n\n const [hasQRCodePix, setQRCodePix] = useState(hasQRCodeGenerated);\n const [hasBarcode, setBarcode] = useState(false);\n const [dataTicket, setDataTicket] = useState({});\n const [qrCode, setQRCode] = useState(qrCodeGenerated);\n const [pixCode, setPixCode] = useState(pixCodeGenerated);\n const [option, setOption] = useState(hasQRCodeGenerated ? PaymentMethods.PIX : '');\n const [loading, setLoading] = useState(false);\n const [invoiceDetails, setInvoiceDetails] = useState({});\n const [invoiceDetailsExpanded, setIinvoiceDetailsExpanded] = useState(false);\n const [paymentMethod, setPaymentMethod] = useState('');\n\n const isCallingModalBySubscription = () => originCalling === OriginCalling.SUBSCRIPTION_MANAGER || OriginCalling.SITELOCK_UPGRADE;\n const isCallingModalByInvoice = () => originCalling === OriginCalling.INVOICES_MANAGER;\n const isCallingModalBySubscriptionList = () => originCalling === OriginCalling.SUBSCRIPTION_LIST;\n\n const isCreditCardSelected = () => option === PaymentMethods.CREDIT_CARD;\n\n const isTicketSelected = () => option === PaymentMethods.TICKET;\n\n const isPayPalSelected = () => option === PaymentMethods.PAY_PAL;\n\n const isPixSelected = () => option === PaymentMethods.PIX;\n\n const [fingerBlock, setFingerBlock] = useState(null);\n const enabledDiscountSavers = useFeatureIsOn(XRAY_ENABLED_DISCOUNT_SAVERS);\n const enabledDiscountRetention = useFeatureIsOn(XRAY_ENABLED_DISCOUNT_RETENTION);\n\n const isEnabledDiscountOfferBanner = () => {\n if (discount) {\n if (enabledDiscountSavers && discount.type === DiscountType.SAVERS35OFF) {\n return true;\n }\n if (enabledDiscountRetention && discount.type === DiscountType.RETENTION) {\n return true;\n }\n }\n return false;\n };\n\n const enabledDiscountOfferBanner = isEnabledDiscountOfferBanner();\n\n const changePaymentMethod = (paymentMethod) => {\n dispatch(getPaymentMethod(paymentMethod, invoiceId));\n };\n\n useEffect(() => {\n if (enabledFingerprint) {\n setFingerBlock(\n \n {!displayOnlyInvoiceId && (\n <>\n \n \n {locale(manageSubscriptionLocale.productNameLabel)}\n \n \n {productNameText}\n \n \n \n \n {manageSubscriptionLocale.paymentCycleLabel}\n \n \n {paymentCycleText}\n \n \n \n )}\n \n {displayOnlyInvoiceId && (\n \n \n {locale(manageSubscriptionLocale.invoiceLabel)}\n \n \n {invoiceId}\n \n \n )}\n \n \n {labelsLocale.duedate}\n \n \n {dueDate}\n \n \n \n \n {totalDiscounts !== '' && (\n \n \n {labelsLocale.discount}\n \n \n {formatCurrency(totalDiscounts)}\n \n \n )}\n {!enabledDiscountOfferBanner && (\n \n \n {manageSubscriptionLocale.installmentsAmountLabel}\n \n \n {renovationAmountText}\n \n \n )}\n \n {enabledDiscountOfferBanner && (\n \n \n \n \n )\n }\n \n );\n\n return (\n \n \n \n \n \n \n \n {manageSubscriptionPaymentInvoiceModalLocale.titleLabel} \n \n \n {hasSuccessSplitInvoice && (\n <>\n \n \n \n \n {manageSubscriptionPaymentInvoiceModalLocale.successInvoiceGenerate}\n \n \n \n \n \n \n {splitPaymentModalLocale.alertDescription}\n \n \n \n )}\n {enabledInvoiceDetails && (\n \n \n {!invoiceDetails.id && (\n \n )}\n {!hasQRCodePix && !hasBarcode && (\n \n {manageSubscriptionPaymentInvoiceModalLocale.selectPaymentMethodLabel}\n \n \n {enabledPaymentByCreditCard && (\n \n \n \n \n \n \n {paymentMethodsLocale.creditCard}\n \n\n \n \n \n )}\n {enabledPaymentByPix && (\n \n \n \n \n \n \n {paymentMethodsLocale.pix}\n {enabledNewPixChipLabel && (\n \n \n )}\n \n \n \n\n \n )}\n \n \n {enabledPaymentByTicket && (\n \n \n \n \n \n \n {paymentMethodsLocale.ticket}\n \n\n \n \n \n )}\n {enabledPaymentByPayPal && (\n \n \n \n \n \n \n {paymentMethodsLocale.paypal}\n \n \n \n \n )}\n \n \n\n \n )}\n {option !== '' && (\n \n {hasBarcode && (\n \n {manageSubscriptionPaymentInvoiceModalLocale.infoPaymentByTicketLabel}\n \n )}\n {!hasBarcode && (\n \n \n \n \n \n )}\n \n )}\n {oldPaymentOptions.paypal && isPayPalSelected() && (\n <>\n {!enabledChangePayPalAccount && (\n \n {manageSubscriptionPaymentInvoiceModalLocale.infoPaymentByPicPayLabel}\n \n )}\n \n \n )}\n {oldPaymentOptions.creditCard && isCreditCardSelected() && (\n \n \n {manageSubscriptionPaymentInvoiceModalLocale.infoPaymentByCreditCardTitle}\n \n {manageSubscriptionPaymentInvoiceModalLocale.infoPaymentByCreditCardLabel}\n \n\n \n \n )}\n {oldPaymentOptions.pix && isPixSelected() && (\n <>\n \n {manageSubscriptionPaymentInvoiceModalLocale.infoPaymentByPixLabel}\n \n {hasQRCodePix && (\n \n \n {!loading && (\n { generateQRCodePix(); }}\n label={manageSubscriptionPaymentInvoiceModalLocale.payButtonByPixLabel}\n />\n )}\n {loading && (\n \n \n \n )}\n \n )}\n \n {enabledFingerprint && fingerBlock}\n \n );\n};\n\nPaymentModal.propTypes = PaymentModalProps;\n\nexport default PaymentModal;\n","import styled, { css } from 'styled-components';\nimport { Button } from '@/pages/common/v1/Button/Button.styles';\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n padding: 32px;\n `}\n`;\n\nexport const Data = styled.div`\n padding-top: 24px;\n`;\n\nexport const Header = styled.header``;\n\nexport const TitleModal = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n margin: 0;\n padding: 0;\n `}\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v1.color.warning.attention};\n font-family: ${theme.v1.font.family.primary};\n font-size: 22px;\n font-weight: ${theme.v1.font.weights.bold};\n margin: 16px 0 16px 0;\n padding: 0;\n `}\n`;\n\nexport const Description = styled.p`\n font-size: 16px;\n padding: 0;\n`;\n\nexport const Controls = styled.div`\n display: flex;\n justify-content: center;\n margin: 56px 0 16px 0;\n`;\n\nexport const ControlButton = styled.div`\n${({ theme }) => css`\n ${Button}:not(:first-child) {\n margin-left: 12px;\n }\n @media (max-width: 600px) {\n ${Button} {\n font-size: 14px;\n }\n\n &:not(:first-child) {\n margin-left: 0;\n }\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n display: grid;\n }\n `}\n`;\n\nexport const InfoIcon = styled.span`\n ${({ theme }) => css`\n display: contents;\n margin: 24px 0 0 0;\n & svg {\n fill: ${theme.v1.color.warning.attention};\n }\n `}\n`;\n\nexport const Label = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v1.color.text.label};\n display: inline-flex;\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 16px;\n `}\n`;\n\nexport const ContentCloseButton = styled.div`\n position: absolute;\n top: 0px;\n right: 0px;\n`;\n\nexport const ContentData = styled.div`\n ${({ theme }) => css`\n text-align:center;\n\n &:not(:first-child) {\n margin-top: 48px;\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const Cronometer = styled.img`\n${({ theme }) => css`\n & svg {\n fill: ${theme.v1.color.warning.attention};\n }\n `}\n`;\n","import React, { useEffect, useState } from 'react';\nimport { Button } from '@/pages/common/v1/Button';\nimport { Modal } from '@/pages/common/Modal';\nimport * as Styles from './ExpiredTimePixModal.styles';\nimport useLocale from '@/hooks/useLocale';\nimport IconCronometer from '@/media/billing/cronometer.svg';\nimport { loadReCaptcha } from '@/utils/Application/reCaptcha';\nimport { invoicesActions } from '@/redux/modules';\nimport { INVOICES_STATUS } from '@/config/invoices/invoiceStatus';\nimport { useDispatch } from 'react-redux';\nimport Loader from '@/components/Layout/Loader';\nimport { OriginCalling } from '../PaymentModal/PaymentModal.types';\nimport { billingAnalytics } from '@/analytics';\nimport { isMobile } from '@/utils/Validators/validation';\n\n\nconst ExpiredTimePixModal = ({\n onCloseClick = null,\n onUpdateQRCode = null,\n onPaymentSuccessPix = null,\n invoiceId,\n onSwitchPaymentMethod = null,\n originCalling = null,\n}) => {\n const { billing: billingLocale } = useLocale();\n const dispatch = useDispatch();\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n\n const isCallingModalBySubscription = () => originCalling === OriginCalling.SUBSCRIPTION_MANAGER;\n const isCallingModalByInvoice = () => originCalling === OriginCalling.INVOICES_MANAGER;\n const isCallingModalBySubscriptionList = () => originCalling === OriginCalling.SUBSCRIPTION_LIST;\n\n const {\n manageSubscriptionPaymentInvoiceModal: manageSubscriptionPaymentInvoiceModalLocale,\n expiredTimePixModal: expiredTimePixModalLocale,\n } = billingLocale;\n\n const titleModalLabel = useState(manageSubscriptionPaymentInvoiceModalLocale.titleLabel);\n\n const titleLabel = useState(expiredTimePixModalLocale.titleLabel);\n const descriptionLine1 = expiredTimePixModalLocale.descriptionLine1Label;\n const descriptionLine2 = expiredTimePixModalLocale.descriptionLine2Label;\n const changePaymentMethodButtonLabel = useState(expiredTimePixModalLocale.changePaymentMethodLabel);\n const updateQRCodeButtonLabel = useState(expiredTimePixModalLocale.updateQRCodeLabel);\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n loadReCaptcha();\n }, [setLoading]);\n\n const redirectToSwitchPaymentMethod = (data) => {\n if (data && data.status === INVOICES_STATUS.PAID) {\n onPaymentSuccessPix && onPaymentSuccessPix();\n return true;\n }\n\n onSwitchPaymentMethod && onSwitchPaymentMethod();\n };\n\n const redirectToUpdateQRCodeModal = (data) => {\n if (data && data.status === INVOICES_STATUS.PAID) {\n onPaymentSuccessPix && onPaymentSuccessPix();\n return true;\n }\n\n onUpdateQRCode && dispatch(invoicesActions.invoices.generatePix.request({ invoiceId, callBackFuction: onUpdateQRCode }));\n };\n\n const closeClick = (data) => {\n if (isCallingModalBySubscription()) {\n subscriptionAnalytics.executePaymentClick('5_fechar');\n }\n if (isCallingModalByInvoice()) {\n subscriptionAnalytics.executePaymentInvoiceManagerClick('5_fechar');\n }\n if (isCallingModalBySubscriptionList()) {\n subscriptionAnalytics.executePaymentInSubscriptionsListClick('5_fechar');\n }\n\n if (data && data.status === INVOICES_STATUS.PAID) {\n onPaymentSuccessPix && onPaymentSuccessPix();\n return true;\n }\n onCloseClick && onCloseClick();\n };\n\n const handleOnCloseClick = () => {\n setLoading(true);\n dispatch(invoicesActions.invoices.loadDetails.request(invoiceId, closeClick));\n };\n\n const handleOnSwitchPaymentMethod = () => {\n setLoading(true);\n if (isCallingModalBySubscription()) {\n subscriptionAnalytics.executePaymentClick('5_alterar_forma');\n }\n if (isCallingModalByInvoice()) {\n subscriptionAnalytics.executePaymentInvoiceManagerClick('5_alterar_forma');\n }\n if (isCallingModalBySubscriptionList()) {\n subscriptionAnalytics.executePaymentInSubscriptionsListClick('5_alterar_forma');\n }\n dispatch(invoicesActions.invoices.loadDetails.request(invoiceId, redirectToSwitchPaymentMethod));\n };\n\n const handleOnUpdateQRCode = () => {\n setLoading(true);\n if (isCallingModalBySubscription()) {\n subscriptionAnalytics.executePaymentClick('5_atualizar_qrcode');\n }\n if (isCallingModalByInvoice()) {\n subscriptionAnalytics.executePaymentInvoiceManagerClick('5_atualizar_qrcode');\n }\n if (isCallingModalBySubscriptionList()) {\n subscriptionAnalytics.executePaymentInSubscriptionsListClick('5_atualizar_qrcode');\n }\n dispatch(invoicesActions.invoices.loadDetails.request(invoiceId, redirectToUpdateQRCodeModal));\n };\n\n return (\n \n \n \n {titleModalLabel} \n \n \n \n {titleLabel}\n \n \n {descriptionLine1[0]}\n {!isMobile && (\n descriptionLine1[1]\n )}\n {isMobile && (\n descriptionLine1[2]\n )}\n {descriptionLine1[3]}\n \n \n {descriptionLine2}\n \n \n {!loading && (\n \n \n \n \n )}\n {loading && (\n \n \n );\n};\n\n\nexport default ExpiredTimePixModal;\n","import styled, { css } from 'styled-components';\nimport { Button } from '@/pages/common/v1/Button/Button.styles';\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n padding: 32px;\n `}\n`;\n\nexport const Data = styled.div`\n padding-top: 24px;\n`;\n\nexport const Header = styled.header``;\n\nexport const TitleModal = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n margin: 0;\n padding: 0;\n `}\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v1.color.warning.success};\n font-family: ${theme.v1.font.family.primary};\n font-size: 22px;\n font-weight: ${theme.v1.font.weights.bold};\n margin: 16px 0 16px 0;\n padding: 0;\n `}\n`;\n\nexport const Description = styled.p`\n font-size: 16px;\n padding: 0;\n`;\n\nexport const Controls = styled.div`\n display: flex;\n justify-content: center;\n margin: 56px 0 16px 0;\n`;\n\nexport const ControlButton = styled.div`\n ${Button}:not(:first-child) {\n margin-left: 12px;\n }\n @media (max-width: 600px) {\n ${Button} {\n font-size: 14px;\n }\n\n &:not(:first-child) {\n margin-left: 0;\n }\n }\n`;\n\nexport const InfoIcon = styled.span`\n ${({ theme }) => css`\n display: contents;\n margin: 24px 0 0 0;\n & svg {\n fill: ${theme.v1.color.warning.attention};\n }\n `}\n`;\n\nexport const Label = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v1.color.text.feature};\n display: inline-flex;\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 16px;\n `}\n`;\n\nexport const ControlButtonLink = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n padding: 35px 0px 10px 0px;\n width: 100%;\n`;\n\nexport const Label2 = styled.a`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v1.color.text.feature};\n display: inline-flex;\n font-family: ${theme.v1.font.family.primary}\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 16px;\n `}\n`;\n\nexport const ContentCloseButton = styled.div`\n position: absolute;\n top: 0px;\n right: 0px;\n`;\n\nexport const ContentData = styled.div`\n ${({ theme }) => css`\n text-align:center;\n\n &:not(:first-child) {\n margin-top: 48px;\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const Cronometer = styled.img`\n${({ theme }) => css`\n & svg {\n fill: ${theme.v1.color.warning.attention};\n }\n `}\n`;\n","import React, { useState } from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport * as Styles from './PaymentSuccessPixModal.styles';\nimport useLocale from '@/hooks/useLocale';\nimport IconCheckGreen from '@/media/billing/circle-and-check-green.svg';\nimport { Button } from '@/pages/common';\nimport { loadInvoices } from '@/redux/actions/invoices';\nimport { useDispatch } from 'react-redux';\nimport { OriginCalling } from '../PaymentModal/PaymentModal.types';\nimport { billingAnalytics } from '@/analytics';\n\n\nconst PaymentSuccessPixModal = ({\n onCloseClick = null,\n isManageSubscription = false,\n originCalling,\n}) => {\n const { billing: billingLocale } = useLocale();\n const dispatch = useDispatch();\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n\n const {\n manageSubscriptionPaymentInvoiceModal: manageSubscriptionPaymentInvoiceModalLocale,\n paymentSuccessPixModal: paymentSuccessPixModalLocale,\n } = billingLocale;\n\n const titleModalLabel = useState(manageSubscriptionPaymentInvoiceModalLocale.titleLabel);\n\n const titleLabel = useState(paymentSuccessPixModalLocale.titleLabel);\n const descriptionLine1Label = useState(paymentSuccessPixModalLocale.descriptionLine1Label);\n const descriptionLine2Label = useState(paymentSuccessPixModalLocale.descriptionLine2Label);\n const linkBack = useState(isManageSubscription ? paymentSuccessPixModalLocale.backToSignatures : paymentSuccessPixModalLocale.backToInvoices);\n\n const isCallingModalBySubscription = () => originCalling === OriginCalling.SUBSCRIPTION_MANAGER;\n const isCallingModalByInvoice = () => originCalling === OriginCalling.INVOICES_MANAGER;\n const isCallingModalBySubscriptionList = () => originCalling === OriginCalling.SUBSCRIPTION_LIST;\n\n const handleOnCloseClick = (event) => {\n if (isCallingModalBySubscription()) {\n subscriptionAnalytics.executePaymentClick('6_fechar');\n }\n if (isCallingModalByInvoice()) {\n subscriptionAnalytics.executePaymentInvoiceManagerClick('6_fechar');\n }\n if (isCallingModalBySubscriptionList()) {\n subscriptionAnalytics.executePaymentInSubscriptionsListClick('6_fechar');\n }\n if (!isManageSubscription) {\n dispatch(loadInvoices('Unpaid', true));\n }\n onCloseClick && onCloseClick(event);\n };\n\n\n const handleOnBackClick = (event) => {\n if (isCallingModalBySubscription()) {\n subscriptionAnalytics.executePaymentClick('6_voltar');\n }\n if (isCallingModalByInvoice()) {\n subscriptionAnalytics.executePaymentInvoiceManagerClick('6_voltar');\n }\n if (isCallingModalBySubscriptionList()) {\n subscriptionAnalytics.executePaymentInSubscriptionsListClick('6_voltar');\n }\n if (!isManageSubscription) {\n dispatch(loadInvoices('Unpaid', true));\n }\n onCloseClick && onCloseClick(event);\n };\n\n return (\n \n \n \n {titleModalLabel} \n \n \n \n {titleLabel}\n \n \n {descriptionLine1Label}\n \n \n {descriptionLine2Label}\n \n \n \n \n \n \n );\n};\n\n\nexport default PaymentSuccessPixModal;\n","import styled, { css } from 'styled-components';\nimport { Button } from '@/pages/common/v1/Button/Button.styles';\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n padding: 32px;\n\n @media (max-width: ${theme.v1.breakpoints.md}}) {\n align-items: center;\n flex-direction: column;\n padding: 28px;\n }\n\n `}\n`;\n\nexport const Header = styled.header``;\n\nexport const TitleModal = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n margin: 0;\n padding: 0;\n `}\n`;\n\nexport const Controls = styled.div`\n display: flex;\n justify-content: center;\n margin: 10px 0 16px 0;\n`;\n\nexport const ControlButton = styled.div`\n${({ theme }) => css`\n\n ${Button}:not(:first-child) {\n margin-left: 12px;\n }\n @media (max-width: 600px) {\n ${Button} {\n font-size: 14px;\n }\n\n &:not(:first-child) {\n margin-left: 0;\n }\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n display:grid;\n }\n`}\n`;\n\nexport const InfoIcon = styled.span`\n ${({ theme }) => css`\n & svg {\n fill: ${theme.v1.color.warning.attention};\n }\n `}\n`;\n\nexport const Label = styled.span`\n ${({ theme }) => css`\n align-items: center;\n display: inline-flex;\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 21.6px;\n `}\n`;\n\n\nexport const ContentData = styled.div`\n${({ theme }) => css`\n text-align:center;\n flex-direction: column;\n margin: 42px 0px 0px 0px;\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n display:block;\n }\n `}\n`;\n\nexport const QRCodeError = styled.img`\n${({ theme }) => css`\n margin: 42px 0px 0px 0px;\n & svg {\n fill: ${theme.v1.color.warning.attention};\n }\n `}\n`;\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 16px;\n margin: 0px 0px 0px 35px;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin: 0px 0px 0px 0px;\n text-align: initial;\n\n }\n `}\n`;\n","import React, { useEffect, useState } from 'react';\nimport { Button } from '@/pages/common/v1/Button';\nimport { Modal } from '@/pages/common/Modal';\nimport * as Styles from './GenerateErrorPixModal.styles';\nimport useLocale from '@/hooks/useLocale';\nimport QRCodeError from '@/media/billing/QRCodeError.svg';\nimport { loadReCaptcha } from '@/utils/Application/reCaptcha';\nimport { invoicesActions } from '@/redux/modules';\nimport { INVOICES_STATUS } from '@/config/invoices/invoiceStatus';\nimport { useDispatch } from 'react-redux';\nimport Loader from '@/components/Layout/Loader';\nimport { IconError } from '@/icons';\nimport { isMobile } from '@/utils/Validators/validation';\nimport { OriginCalling } from '../PaymentModal/PaymentModal.types';\nimport { billingAnalytics } from '@/analytics';\n\nconst GenerateErrorPixModal = ({\n onCloseClick = null,\n onUpdateQRCode = null,\n invoiceId,\n onSwitchPaymentMethod = null,\n onPaymentSuccessPix = null,\n originCalling = null,\n}) => {\n const { billing: billingLocale } = useLocale();\n const dispatch = useDispatch();\n\n const {\n manageSubscriptionPaymentInvoiceModal: manageSubscriptionPaymentInvoiceModalLocale,\n generateErrorPixModal: generateErrorPixModalLocale,\n } = billingLocale;\n\n const titleModalLabel = useState(manageSubscriptionPaymentInvoiceModalLocale.titleLabel);\n\n const descriptionLineLabel = useState(generateErrorPixModalLocale.descriptionLineLabel);\n const changePaymentMethodButtonLabel = useState(generateErrorPixModalLocale.changePaymentMethodLabel);\n const updateQRCodeButtonLabel = useState(generateErrorPixModalLocale.updateQRCodeLabel);\n const [loading, setLoading] = useState(false);\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n\n const isCallingModalBySubscription = () => originCalling === OriginCalling.SUBSCRIPTION_MANAGER;\n const isCallingModalByInvoice = () => originCalling === OriginCalling.INVOICES_MANAGER;\n const isCallingModalBySubscriptionList = () => originCalling === OriginCalling.SUBSCRIPTION_LIST;\n\n useEffect(() => {\n loadReCaptcha();\n }, [setLoading]);\n\n const redirectToSwitchPaymentMethod = (data) => {\n if (data && data.status === INVOICES_STATUS.PAID) {\n onPaymentSuccessPix && onPaymentSuccessPix();\n return true;\n }\n onSwitchPaymentMethod && onSwitchPaymentMethod();\n };\n\n const redirectToUpdateQRCodeModal = (data) => {\n if (data && data.status === INVOICES_STATUS.PAID) {\n onPaymentSuccessPix && onPaymentSuccessPix();\n return true;\n }\n onUpdateQRCode && dispatch(invoicesActions.invoices.generatePix.request({ invoiceId, callBackFuction: onUpdateQRCode }));\n\n setLoading(false);\n };\n\n const handleOnCloseClick = (event) => {\n if (isCallingModalBySubscription()) {\n subscriptionAnalytics.executePaymentClick('7_fechar');\n }\n if (isCallingModalByInvoice()) {\n subscriptionAnalytics.executePaymentInvoiceManagerClick('7_fechar');\n }\n if (isCallingModalBySubscriptionList()) {\n subscriptionAnalytics.executePaymentInSubscriptionsListClick('7_fechar');\n }\n onCloseClick && onCloseClick(event);\n };\n\n const handleOnSwitchPaymentMethod = () => {\n setLoading(true);\n if (isCallingModalBySubscription()) {\n subscriptionAnalytics.executePaymentClick('7_alterar_forma');\n }\n if (isCallingModalByInvoice()) {\n subscriptionAnalytics.executePaymentInvoiceManagerClick('7_alterar_forma');\n }\n if (isCallingModalBySubscriptionList()) {\n subscriptionAnalytics.executePaymentInSubscriptionsListClick('7_alterar_forma');\n }\n dispatch(invoicesActions.invoices.loadDetails.request(invoiceId, redirectToSwitchPaymentMethod));\n };\n\n const handleOnUpdateQRCode = () => {\n setLoading(true);\n if (isCallingModalBySubscription()) {\n subscriptionAnalytics.executePaymentClick('7_atualizar_qrcode');\n }\n if (isCallingModalByInvoice()) {\n subscriptionAnalytics.executePaymentInvoiceManagerClick('7_atualizar_qrcode');\n }\n if (isCallingModalBySubscriptionList()) {\n subscriptionAnalytics.executePaymentInSubscriptionsListClick('7_atualizar_qrcode');\n }\n dispatch(invoicesActions.invoices.loadDetails.request(invoiceId, redirectToUpdateQRCodeModal));\n };\n\n return (\n \n \n \n {titleModalLabel} \n \n \n \n \n \n \n {descriptionLineLabel}\n \n \n \n {!loading && (\n \n \n \n \n )}\n {loading && (\n \n \n );\n};\n\n\nexport default GenerateErrorPixModal;\n","import styled, { css } from 'styled-components';\n\nexport const Content = styled.section`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n padding: 14px;\n `}\n`;\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n align-items: center;\n flex-direction: column;\n }\n `}\n`;\n\nexport const InfoText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: 16px;\n margin: 0;\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n text-align: center;\n }\n `}\n`;\n\nexport const ButtonAdapter = styled.div``;\n\nexport const Actions = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 30px;\n justify-content: center;\n margin-top: 40px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n align-items: center;\n flex-direction: column;\n }\n `}\n`;\n","import React, { } from 'react';\nimport * as Styles from './TicketRedirectModal.styles';\nimport { Modal } from '@/pages/common/Modal';\nimport { Button } from '@/pages/common/v1/Button';\nimport useLocale from '@/hooks/useLocale';\n\nconst TicketRedirectModal = ({\n onCloseClick,\n onRedirectButtonClick,\n position = 'fixed',\n urlTicket = '',\n hasOriginSavePDF = false,\n}) => {\n const { billing: billingLocale } = useLocale();\n\n const {\n ticketRedirectModal: ticketRedirectModalLocale,\n } = billingLocale;\n\n const redirectTicketUrlLabel = ticketRedirectModalLocale.redirectTicketUrlButtonLabel;\n const downloadPDFLabel = ticketRedirectModalLocale.downloadPDFButtonLabel;\n const infoLabel = ticketRedirectModalLocale.infoTextLabel;\n\n const handleOnRedirectClick = (event) => {\n onRedirectButtonClick && onRedirectButtonClick(event);\n window.open(urlTicket, '_blank');\n onCloseClick && onCloseClick();\n };\n\n return (\n \n \n \n \n {infoLabel}\n \n \n \n \n \n \n \n \n );\n};\n\nexport default TicketRedirectModal;\n","import styled, { css } from 'styled-components';\nimport { Button } from '@/pages/common/v1/Button/Button.styles';\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n padding: 32px;\n\n @media (max-width: ${theme.v1.breakpoints.md}}) {\n align-items: center;\n flex-direction: column;\n padding: 28px;\n }\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n align-items: center;\n padding: 24px 32px 32px 32px;\n }\n\n `}\n`;\n\nexport const ContentProduct = styled.div`\n${({ theme }) => css`\n background: ${theme.v2.colors.white.primary};\n box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.20);\n display: flex;\n min-height: 40px;\n margin: 1px 0px 0px 0px;\n text-align: left;\n padding: 8px 16px 8px 16px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n display: block;\n width: 100%;\n\n >div:last-child {\n margin: 8px 8px 8px 8px;\n };\n }\n`}\n`;\n\nexport const Selection = styled.div`\n display: flex;\n`;\n\nexport const CheckboxLabel = styled.label`\n cursor: pointer;\n >button {\n > label {\n height: 18px;\n width: 18px;\n }\n };\n`;\n\nexport const ProductName = styled.div`\n${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v2.font.weights.regular};\n margin-left: 4px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n max-width: 280px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n`}\n`;\n\n\nexport const ProductValue = styled.div`\n${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n font-family: ${theme.v2.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v2.font.weights.regular};\n margin-left: auto;\n`}\n`;\n\nexport const Header = styled.div`\n${({ theme }) => css`\n width: 100%;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin: 0px 0px 50px 0px;\n }\n `}\n`;\n\nexport const TitleModal = styled.text`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0;\n padding: 0;\n @media (max-width: ${theme.v2.breakpoints.sm}){\n position: absolute;\n left: 20px;\n }\n\n `}\n`;\n\nexport const Controls = styled.div`\n display: flex;\n justify-content: center;\n`;\n\nexport const ControlButton = styled.div`\n${({ theme }) => css`\n display: grid;\n gap: 16px;\n margin: 32px 0px 0px 0px;\n ${Button}:not(:first-child) {\n margin-left: 12px;\n }\n @media (max-width: 600px) {\n ${Button} {\n font-size: 14px;\n }\n\n &:not(:first-child) {\n margin-left: 0;\n }\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n display:grid;\n }\n`}\n`;\n\nexport const InfoIcon = styled.span`\n ${({ theme }) => css`\n & svg {\n fill: ${theme.v1.color.warning.attention};\n }\n `}\n`;\n\nexport const Label = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowPure};\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n line-height: 21.6px;\n `}\n`;\n\n\nexport const ContentData = styled.div`\n${({ theme }) => css`\n flex-direction: column;\n text-align:center;\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n display:block;\n }\n `}\n`;\nexport const ContentIcon = styled.div`\n${({ theme }) => css`\n align-items: center;\n display: flex;\n justify-content: center;\n width: 24px;\n\n svg {\n fill: ${theme.v2.colors.brand.primaryMedium};\n }\n `}\n`;\n\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 16px;\n padding: 0px 0px 24px 0px;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin: 32px 0px 0px 0px;\n text-align: initial;\n\n }\n `}\n`;\n\nexport const Products = styled.div`\nalign - items: center;\nboreder: 1px solid red;\n\n`;\nexport const ContentInfo = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.brand.primaryUltraLight};\n display: flex;\n height: auto;\n margin: 32px 0px 32px 0px;\n padding: 16px 16px 16px 16px;\n text-align: left;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n\n margin-top: 78px;\n padding: 16px;\n text-align: left;\n width: 100%;\n }\n\n`}\n`;\n\nexport const DescriptionInfo = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: normal;\n margin: 0px auto 0px 0px;\n padding: 0px 0px 0px 8px;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n margin: 0px 0px 0px auto;\n text-align: left;\n width: 100%;\n }\n span {\n font-weight: ${theme.v2.font.weights.bold};\n }\n a {\n font-size: 14px;\n }\n `}\n`;\n","import React, { useEffect, useState } from 'react';\nimport { Button } from '@/pages/common/v1/Button';\nimport { Modal } from '@/pages/common/Modal';\nimport * as Styles from './SplitPaymentModal.styles';\nimport useLocale from '@/hooks/useLocale';\nimport { loadReCaptcha } from '@/utils/Application/reCaptcha';\nimport Loader from '@/components/Layout/Loader';\nimport { isMobile } from '@/utils/Validators/validation';\nimport { Checkbox, IconInfo } from 'gatorcomponents';\nimport { useDispatch } from 'react-redux';\nimport { invoicesActions } from '@/redux/modules';\nimport CurrencyFormat from '@/components/CurrencyFormat';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\n\nconst SplitPaymentModal = ({\n onCloseClick = null,\n invoice = null,\n testId = 'split-payment-moda-',\n onExecutePayment = null,\n setInvoiceDetails,\n isLoading = true,\n}) => {\n const { billing: billingLocale } = useLocale();\n const dispatch = useDispatch();\n\n const { splitPaymentModal: splitPaymentModalLocale } = billingLocale;\n\n const {\n title,\n alertDescription,\n description,\n selectPaymentLabel,\n cancelLabel,\n } = splitPaymentModalLocale;\n\n const [loading, setLoading] = useState(isLoading);\n const [listProdutcs, setListProdutcs] = useState([]);\n const [listCheckedProducts] = useState([]);\n const [listOriginalProdutcs] = useState([]);\n const [reloadingListProducts, setReloadingListProducts] = useState(true);\n\n useEffect(() => {\n loadReCaptcha();\n }, [setLoading]);\n\n const updateListProductsCheck = (productId) => {\n listCheckedProducts.includes(productId) ? listCheckedProducts.pop(productId) : listCheckedProducts.push(productId);\n setReloadingListProducts(true);\n };\n\n const getProductName = (product) => {\n if (product.description.includes('(')) {\n const regex = /\\(\\d{2}/;\n return product.description.split(regex)[0];\n }\n return product.description;\n };\n\n const addProductToList = (product, list) => {\n list.push(\n \n \n updateListProductsCheck(product.id)}\n >\n \n {`${getProductName(product)}`}\n \n \n \n {product.amount} \n \n ,\n );\n setLoading(false);\n };\n\n const reloadProducts = () => {\n const list = [];\n listOriginalProdutcs && listOriginalProdutcs.forEach((product) => {\n addProductToList(product, list);\n });\n setListProdutcs(list);\n setReloadingListProducts(false);\n };\n\n useEffect(() => {\n if (reloadingListProducts && listCheckedProducts.length >= 0) {\n reloadProducts();\n }\n }, [listCheckedProducts, listProdutcs, reloadingListProducts]);\n\n const handleOnCloseClick = (event) => {\n onCloseClick && onCloseClick(event);\n };\n\n const setDataInvoice = (data) => {\n const list = [];\n\n if (data && data.items && data.items.length > 0) {\n setInvoiceDetails && setInvoiceDetails(data);\n data.items.forEach((product) => {\n if (product.description !== '' && product.isSplittable) {\n listOriginalProdutcs.push(product);\n addProductToList(product, list);\n }\n });\n }\n setListProdutcs(list);\n };\n\n const checkSplitAction = (code) => {\n if (code !== 200) {\n dispatch(enqueueSnackbar(billingLocale.genericError));\n } else {\n setLoading(true);\n dispatch(invoicesActions.invoices.loadDetails.request(invoice.id, setDataInvoice)).then(() => {\n onExecutePayment && onExecutePayment(true);\n });\n }\n };\n\n const executePayment = () => {\n if (listCheckedProducts.length === 0) {\n onExecutePayment && onExecutePayment();\n } else {\n dispatch(invoicesActions.invoices.splitPayment.request(invoice.id, listCheckedProducts, checkSplitAction));\n }\n };\n\n useEffect(() => {\n setDataInvoice([]);\n dispatch(invoicesActions.invoices.loadDetails.request(invoice.id, setDataInvoice));\n }, [invoice.id]);\n\n return (\n \n \n \n {title} \n \n \n \n \n \n {alertDescription}\n \n \n {!loading && (\n <>\n \n \n \n {description}\n \n \n \n {listProdutcs}\n \n \n \n \n { executePayment(); }}\n label={selectPaymentLabel}\n />\n { handleOnCloseClick(); }}\n variant=\"text\"\n label={cancelLabel}\n />\n \n \n \n )}\n {loading && (\n \n \n );\n};\n\n\nexport default SplitPaymentModal;\n","import React, { useEffect, useState } from 'react';\nimport { PaymentModal } from '../PaymentModal';\nimport { ExpiredTimePixModal } from '../ExpiredTimePixModal';\nimport { PaymentSuccessPixModal } from '../PaymentSuccessPixModal';\nimport { GenerateErrorPixModal } from '../GenerateErrorPixModal';\nimport SubscriptionsFunctions from '../SubscriptionsHandler/SubscriptionsHandler.functions';\nimport { OriginCalling } from '../PaymentModal/PaymentModal.types';\nimport { Modais } from '../ManageSubscriptionNewHandler/ManageSubscriptionNewHandler.types';\nimport useLocale from '@/hooks/useLocale';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { billingActions, preChatActions } from '@/redux/modules';\nimport { TicketRedirectModal } from '../TicketRedirectModal';\nimport { format } from 'date-fns';\nimport { useDiagnostic } from '@/components/Layout/Menu/MyAlerts';\nimport { SplitPaymentModal } from '@/components/Invoices/SplitPaymentModal';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { XRAY_ENABLED_SPLIT_PAYMENT } from '@/config/GrowthBook/constants';\n\nconst GroupPaymentModal = ({\n subscription,\n invoice = null,\n displayModalPayment = false,\n setDisplayModalPayment,\n originCalling,\n onExecuteAction = null,\n handleUpgradeSitelock,\n onToggleUpdatedInvoices,\n}) => {\n const [modalById, setModalById] = useState(Modais.NONE);\n const [hasQRCodeGenerated, setHasQRCodeGenerated] = useState(false);\n const [qrCodeGenerated, setQRCodeGenerated] = useState('');\n const [pixCodeGenerated, setPixCodeGenerated] = useState('');\n const [dueDateFormated, setDueDateFormated] = useState('');\n const [hasOriginSavePDF, setOriginSavePDF] = useState(false);\n const [invoiceDetails, setInvoiceDetails] = useState(null);\n const [hasSuccessSplitInvoice, setSuccessSplitInvoice] = useState(false);\n const [isPaymentSplited, setPaymentSplited] = useState(false);\n const [justLeftSplittedInvoicesModal, setJustLeftSplittedInvoicesModal] = useState(false);\n\n const hasInvoice = invoice !== null;\n const { requestDiagnostic } = useDiagnostic();\n\n const { billing: billingLocale } = useLocale();\n\n const canShowPaymentModal = () => modalById === Modais.ACTIVE_PAYMENT_IN_SUBSCRIPTION;\n const canShowSplitPaymentModal = () => modalById === Modais.ACTIVE_SPLIT_PAYMENT_MODAL;\n\n const canShowExpiredTimePixModal = () => modalById === Modais.ACTIVE_EXPIRED_TIME_PIX_MODAL;\n const canShowPaymentSuccessPixModal = () => modalById === Modais.ACTIVE_PAYMENT_SUCCESS_PIX_MODAL;\n const canShowGenerateErrorPixModal = () => modalById === Modais.ACTIVE_GENERATE_ERROR_PIX_MODAL;\n const canShowTicketRedirectModal = () => modalById === Modais.ACTIVE_REDIRECT_TICKET_MODAL;\n const enabledSplitPayment = useFeatureIsOn(XRAY_ENABLED_SPLIT_PAYMENT);\n\n\n const isDomain = () => subscription && subscription.type === 'domain';\n const [urlTicket, setUrlTicket] = useState('');\n\n const dispatch = useDispatch();\n\n const preChatSetOpen = preChatActions.preChat.setOpen;\n const preChatSetScreen = preChatActions.preChat.setScreen;\n const setPreChatInvoiceId = preChatActions.invoice.set.invoiceId;\n const { setPreChatBillingGenerated, preChatBillingGenerated } = preChatActions.trustReactivation.billingGenerated;\n const setPreChatTrustReactivationInvoiceId = preChatActions.trustReactivation.setInvoiceId;\n const { preChatTrustReactivationStates } = useSelector(state => state.preChat.trustReactivation);\n const invoiceIdFromPreChat = useSelector(state => state.preChat.invoiceId);\n\n useEffect(() => {\n if (!justLeftSplittedInvoicesModal) {\n if ((subscription && subscription.dueDate !== undefined) || (invoice && invoice.duedate !== undefined)) {\n setDueDateFormated(format(new Date(`${hasInvoice ? invoice.duedate : subscription.dueDate} 00:00:00`), 'dd/MM/yyyy'));\n }\n if (displayModalPayment === true) {\n setModalById(Modais.ACTIVE_PAYMENT_IN_SUBSCRIPTION);\n }\n if (displayModalPayment === true && invoice && invoice.isSplittable && enabledSplitPayment) {\n setModalById(Modais.ACTIVE_SPLIT_PAYMENT_MODAL);\n }\n }\n }, [subscription, invoice, displayModalPayment, setDisplayModalPayment, justLeftSplittedInvoicesModal]);\n\n const onPaymentSuccessPix = () => {\n if (handleUpgradeSitelock) {\n handleUpgradeSitelock();\n } else {\n setModalById(Modais.ACTIVE_PAYMENT_SUCCESS_PIX_MODAL);\n requestDiagnostic('groupPaymentModal');\n }\n };\n\n const openPreChat = () => {\n if (invoiceIdFromPreChat && invoice && invoiceIdFromPreChat.toString() === invoice.id.toString()) {\n const findTrustReactivationState = preChatTrustReactivationStates.find(state => (state.invoice_id === invoice.id && state.trust_reactivation_available));\n\n const trustReactivationAvailable = findTrustReactivationState && findTrustReactivationState.trust_reactivation_available;\n\n const trustReactivationInvoiceId = findTrustReactivationState && findTrustReactivationState.invoice_id;\n\n const trustReactivationFlow = preChatBillingGenerated && trustReactivationAvailable;\n\n if (trustReactivationFlow) {\n setPreChatTrustReactivationInvoiceId(trustReactivationInvoiceId);\n preChatSetScreen('trustReactivation');\n } else {\n preChatSetScreen('problemSolved');\n }\n setPreChatBillingGenerated(false);\n setPreChatInvoiceId(null);\n preChatSetOpen(true);\n }\n };\n\n const getTicketModalProps = () => {\n const onCloseClick = () => {\n setModalById(Modais.NONE);\n openPreChat();\n };\n\n return {\n onCloseClick,\n urlTicket,\n hasOriginSavePDF,\n };\n };\n\n const getGenerateErrorPixModalProps = () => {\n const onCloseClick = () => {\n setModalById(Modais.NONE);\n setDisplayModalPayment(false);\n openPreChat();\n };\n\n const onSwitchPaymentMethod = () => {\n setHasQRCodeGenerated(false);\n setModalById(Modais.ACTIVE_PAYMENT_IN_SUBSCRIPTION);\n };\n\n const onUpdateQRCode = (code, qrCode) => {\n if ((code || code !== '') && (qrCode || qrCode !== '')) {\n setPixCodeGenerated(code);\n setQRCodeGenerated(qrCode);\n setHasQRCodeGenerated(true);\n setModalById(Modais.ACTIVE_PAYMENT_IN_SUBSCRIPTION);\n } else {\n setHasQRCodeGenerated(false);\n }\n };\n\n return {\n onSwitchPaymentMethod,\n onUpdateQRCode,\n onPaymentSuccessPix,\n onCloseClick,\n invoiceId: hasInvoice ? invoice.id : subscription.invoiceId,\n originCalling,\n };\n };\n\n const getExpiredPixModalProps = () => {\n const onCloseClick = () => {\n setModalById(Modais.NONE);\n setDisplayModalPayment(false);\n openPreChat();\n };\n\n const onSwitchPaymentMethod = () => {\n setHasQRCodeGenerated(false);\n setModalById(Modais.ACTIVE_PAYMENT_IN_SUBSCRIPTION);\n };\n\n const onUpdateQRCode = (code, qrCode) => {\n if ((code || code !== '') && (qrCode || qrCode !== '')) {\n setHasQRCodeGenerated(true);\n setPixCodeGenerated(code);\n setQRCodeGenerated(qrCode);\n setModalById(Modais.ACTIVE_PAYMENT_IN_SUBSCRIPTION);\n } else {\n setHasQRCodeGenerated(false);\n setModalById(Modais.ACTIVE_GENERATE_ERROR_PIX_MODAL);\n }\n };\n\n return {\n onSwitchPaymentMethod,\n onUpdateQRCode,\n onCloseClick,\n onPaymentSuccessPix,\n invoiceId: hasInvoice ? invoice.id : subscription.invoiceId,\n originCalling,\n };\n };\n\n const getPaymentSuccessPixModalProps = () => {\n const onCloseClick = () => {\n setModalById(Modais.NONE);\n dispatch(billingActions.subscriptions.request());\n setHasQRCodeGenerated(false);\n openPreChat();\n };\n\n return {\n onCloseClick,\n onPaymentSuccessPix,\n originCalling,\n };\n };\n const handleToggle = (toggle = false) => {\n onToggleUpdatedInvoices(toggle);\n };\n\n const getSplitPaymentModalProps = () => {\n const onCloseClick = () => {\n setDisplayModalPayment(false);\n setModalById(Modais.NONE);\n openPreChat();\n };\n\n const onExecutePayment = (hasSplitedInvoice = false) => {\n setJustLeftSplittedInvoicesModal(true);\n setPaymentSplited(hasSplitedInvoice);\n if (hasSplitedInvoice) {\n onExecuteAction && onExecuteAction();\n handleToggle(hasSplitedInvoice);\n }\n setModalById(Modais.ACTIVE_PAYMENT_IN_SUBSCRIPTION);\n setSuccessSplitInvoice(hasSplitedInvoice);\n openPreChat();\n };\n\n\n return {\n onCloseClick,\n onExecutePayment,\n setInvoiceDetails,\n invoice: hasInvoice ? invoice : null,\n };\n };\n\n\n const getPaymentModalProps = () => {\n const onCloseClick = () => {\n setModalById(Modais.NONE);\n setDisplayModalPayment(false);\n openPreChat();\n isPaymentSplited && window.location.reload();\n };\n\n const onConfirmButtonClick = () => {\n SubscriptionsFunctions.handleActivateSubscription(subscription);\n SubscriptionsFunctions.handleOnModalClose();\n setModalById(Modais.NONE);\n setDisplayModalPayment(false);\n };\n\n const onFinishPixTimer = () => {\n setModalById(Modais.ACTIVE_EXPIRED_TIME_PIX_MODAL);\n };\n\n const onGenerateErrorPix = () => {\n setModalById(Modais.ACTIVE_GENERATE_ERROR_PIX_MODAL);\n };\n\n const onRedirectTicket = (urlTicket, isOriginSavePDF = false) => {\n setUrlTicket(urlTicket);\n setOriginSavePDF(isOriginSavePDF);\n setModalById(Modais.ACTIVE_REDIRECT_TICKET_MODAL);\n };\n\n const isNotDomainType = subscription !== undefined ? subscription.subscriptionType !== 'domain' : true;\n\n const getProductName = () => {\n if (subscription !== undefined) {\n return isDomain() ? billingLocale.domainLabel : subscription.productName;\n }\n\n return '';\n };\n\n return {\n onCloseClick,\n invoiceId: hasInvoice ? invoice.id : subscription.invoiceId,\n totalDiscounts: hasInvoice ? invoice.totalDiscounts : '',\n onConfirmButtonClick,\n originCalling: originCalling === OriginCalling.SITELOCK_UPGRADE ? OriginCalling.SITELOCK_UPGRADE : OriginCalling.SUBSCRIPTION_LIST,\n canShowCancelImmediateButton: isNotDomainType,\n productNameText: getProductName(),\n dueDate: dueDateFormated,\n onFinishPixTimer,\n discount: hasInvoice ? invoice.discount : subscription.discount,\n onGenerateErrorPix,\n onPaymentSuccessPix,\n onRedirectTicket,\n hasSuccessSplitInvoice: isPaymentSplited,\n renovationAmountText: hasInvoice ? formatCurrency(invoiceDetails ? invoiceDetails.subtotal : invoice.total) : formatCurrency(subscription.unpaidInvoice !== undefined && subscription.unpaidInvoice.totalInvoice !== undefined ? subscription.unpaidInvoice.totalInvoice : subscription.amount),\n handleUpgradeSitelock: event => handleUpgradeSitelock(event),\n showCreditCardCheckbox: hasInvoice && invoice.showCreditCardCheckbox,\n setJustLeftSplittedInvoicesModal,\n };\n };\n\n return (\n <>\n {canShowPaymentModal() && (\n \n {reactivationLocale.reactivationSuccessLabel} \n \n \n \n \n \n {reactivationLocale.infoSuccessLabel}
\n {reactivationLocale.infoSuccessDescriptionLabel}
\n \n \n {multipleReactivationsAlert()}\n \n \n \n ),\n [FlowStep.FAILURE]: (\n <>\n \n {reactivationLocale.reactivationFailureLabel} \n \n \n \n \n \n {reactivationLocale.infoFailureLabel}
\n {reactivationLocale.infoFailureDescriptionLabel}
\n \n \n \n \n \n \n \n ),\n })[screenToShow]\n || (\n <>\n \n {reactivationLocale.reactivateTitleLabel} \n \n \n {reactivationLocale.descriptionLabel}\n \n \n \n {reactivationLocale.infoAlertLabel}\n
\n \n {multipleReactivationsAlert()}\n \n \n \n \n \n );\n\n return (\n \n \n \n \n \n \n {screenToShow(screen)}\n \n \n );\n};\n\nReactivationModal.propTypes = ReactivationModalProps;\n\nexport default ReactivationModal;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n position: absolute;\n right: 16px;\n top: 72px;\n width: 285px;\n\n z-index: 99;\n`;\n\nexport const Content = styled.div`\n display: flex;\n height: 250px;\n text-align: center;\n`;\n\nexport const CornerTag = styled.div`\n border-color: #0070D1 transparent transparent #0070D1;\n border-style: solid;\n border-width: 20px 20px 20px 20px;\n height: 0;\n line-height: 0;\n margin: 4px 0px 0px 4px;\n width: 0;\n`;\n\nexport const CornerTagTextContainer = styled.div`\n align-items: center;\n display: flex;\n height: 10px;\n justify-content: center;\n left: 4px;\n position: absolute;\n top: 13px;\n transform: rotate(-45deg);\n width: 30px;\n`;\n\nexport const CornerTagText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.white.primary};\n font-size: 9px;\n font-family: ${theme.v2.font.family.primary};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: normal;\n text-transform: uppercase;\n `}\n`;\n\nexport const SplitInvoiceIcon = styled.img`\n ${({ theme }) => css`\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n }\n `}\n`;\n\nexport const CreditCardInstallmentsIconAdapter = styled.div`\n display: flex;\n justify-content: center;\n left: 0px;\n position: absolute;\n right: 0px;\n top: 16px;\n`;\n\nexport const CloseButton = styled.a`\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n position: absolute;\n right: 16px;\n top: 16px;\n width: 24px;\n`;\n\nexport const TextContainer = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin: 32px 32px 32px 32px;\n position:absolute;\n text-align: center;\n a {\n font-size: 14px;\n color: #0070D1;\n };\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: 16px;\n font-family: ${theme.v2.font.family.primary};\n font-weight: ${theme.v2.font.weights.bold};\n margin: 16px 0px 16px 0px;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.regular};\n margin: 0px 0px 16px 0px;\n witth: 216px;\n `}\n`;\n","import { Paper } from '@material-ui/core';\nimport * as Styles from './SplitPaymentOfferModal.styles';\nimport React, { } from 'react';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport SplitInvoiceIcon from '@/media/icons/icone-split-fatura.svg';\nimport { IconClose, Link } from 'gatorcomponents';\n\nconst SplitPaymentOfferModal = ({\n onClose,\n testId = 'split-payment-offer-modal',\n}) => {\n const { billing: billingLocale } = useLocale();\n const { splitPaymentOfferModal: splitPaymentOfferModalLocale } = billingLocale;\n\n const {\n conerTag,\n description,\n title,\n url,\n linkLabel,\n } = splitPaymentOfferModalLocale;\n\n const handleOnClose = () => {\n onClose && onClose();\n };\n return (\n \n \n \n \n \n {conerTag}\n \n \n \n \n \n \n {title}\n \n \n {description}\n \n \n \n \n \n );\n};\n\nexport default SplitPaymentOfferModal;\n","import styled, { css } from 'styled-components';\n\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryExtraDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm2};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n gap: 24px;\n `}\n`;\n\nexport const SelectPaymentLabel = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryExtraDark};\n font-size: ${theme.v2.font.sizes.sm2};\n margin: 0;\n `};\n`;\n\nexport const PaymentMethodsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 14px;\n`;\n\nexport const RadioLabel = styled.div``;\n\nexport const MobileDetailsContainer = styled.div`\n display: flex;\n flex-direction: column;\n gap: 24px;\n margin-top: 24px;\n`;\n\nexport const InfosLoadingContainer = styled.div`\n display: flex;\n gap: 24px;\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n align-self: center;\n display: flex;\n gap: 8px;\n height: 100%;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n justify-content: center;\n max-width: 600px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin-bottom: 64px;\n }\n `};\n`;\n\nexport const ModalStatusTitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0;\n text-align: center;\n `};\n`;\n\nexport const ModalStatusInfo = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xs};\n margin: 0;\n text-align: center;\n `};\n`;\n\nexport const ButtonsWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 32px;\n margin-top: 16px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n flex-direction: column;\n margin-top: 24px;\n }\n `}\n`;\n\nexport const PageNotLoaded = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n font-size: ${theme.v2.font.sizes.xxs};\n margin-top: 24px auto 0px;\n text-align: center;\n `}\n`;\n","import React from 'react';\nimport * as Styles from './PaymentStatus.styles';\nimport { Button } from 'gatorcomponents';\nimport PropTypes from 'prop-types';\n\nconst PaymentStatus = ({\n icon,\n title,\n description,\n buttonProps,\n secondButtonProps,\n pageNotLoaded,\n}) => (\n \n {icon && icon}\n {title && {title} }\n {description && {description} }\n\n {(buttonProps || secondButtonProps) && (\n \n {buttonProps && \n )}\n\n {pageNotLoaded && (\n \n {pageNotLoaded}\n \n )}\n \n);\n\nPaymentStatus.propTypes = {\n icon: PropTypes.node,\n title: PropTypes.string,\n description: PropTypes.string,\n buttonProps: PropTypes.object,\n secondButtonProps: PropTypes.object,\n pageNotLoaded: PropTypes.node,\n};\n\nexport default PaymentStatus;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n align-item: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-width: 100%;\n`;\n\nexport const SelectWrapper = styled.div`\n margin: 0px auto 24px;\n width: 400px;\n`;\n\nexport const ButtonWrapper = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n min-width: 100%;\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n jusftify-content: center;\n margin: 16px auto 20px;\n `};\n`;\n\nexport const AlertWrapper = styled.div`\n align-items: center;\n display: inline-flex;\n justify-content: center;\n margin: 0 24px 24px;\n\n > div { \n align-items: center;\n min-width: 100%;\n }\n`;\n","import * as Styles from './DefaultPaymentAction.styles';\nimport {\n Alert, Button, IconLoading, SelectField,\n} from 'gatorcomponents';\nimport PropTypes from 'prop-types';\nimport React, { useCallback } from 'react';\n\nconst DefaultPaymentAction = ({\n label,\n description,\n onClick,\n loading,\n selectedPaymentMethodOptions,\n selectPlaceholder = 'Selecciona la opción de pago',\n setSelectedPaymentMethodCode,\n multiplePaymentMethodsDescription,\n securePixTransation,\n}) => {\n const handleClick = () => {\n onClick && onClick();\n };\n\n const handleSelect = useCallback((option) => {\n setSelectedPaymentMethodCode && setSelectedPaymentMethodCode(option.value);\n }, [\n setSelectedPaymentMethodCode,\n ]);\n\n const options = selectedPaymentMethodOptions && selectedPaymentMethodOptions.map(option => ({\n value: option.code,\n label: option.name,\n }));\n\n\n return (\n \n {securePixTransation && (\n \n \n )}\n\n {selectedPaymentMethodOptions && (\n \n handleSelect(e)}\n placeholder={selectPlaceholder}\n />\n \n )}\n\n \n \n\n \n {selectedPaymentMethodOptions\n ? multiplePaymentMethodsDescription\n : description}\n \n \n );\n};\n\nDefaultPaymentAction.propTypes = {\n label: PropTypes.string,\n description: PropTypes.string,\n onClick: PropTypes.func,\n loading: PropTypes.bool,\n selectedPaymentMethodOptions: PropTypes.array,\n setSelectedPaymentMethodCode: PropTypes.func,\n multiplePaymentMethodsDescription: PropTypes.string,\n selectPlaceholder: PropTypes.string,\n};\n\nexport default DefaultPaymentAction;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 24px;\n padding: 1px 20px 20px 20px;\n width: 100%;\n`;\n\nexport const AlertContent = styled.div`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 21px;\n font-size: ${theme.v2.font.sizes.xxs};\n width: 100%;\n `}\n`;\n","import React, { useState } from 'react';\nimport { AlertV2, Button } from 'gatorcomponents';\nimport { useDispatch } from 'react-redux';\nimport * as Styles from './Ticket.styles';\nimport { getBoletoUrl } from '@/redux/actions/invoices';\nimport { CALLER } from '../../usePaymentModal.types';\n\nconst Ticket = ({\n invoice = null,\n setTicketData,\n description,\n buttonLabel,\n handleSwitchPaymentMethod,\n loadingSwitchPaymentMethod,\n caller,\n}) => {\n const [loading, setLoading] = useState();\n const dispatch = useDispatch();\n\n const generateTicket = async () => {\n if (caller === CALLER.SUBSCRIPTIONS) {\n handleSwitchPaymentMethod();\n return;\n }\n\n if (invoice && invoice.id) {\n setLoading(true);\n dispatch(getBoletoUrl(invoice.id)).then((response) => {\n setTicketData(response.dataCheck.data);\n });\n }\n };\n\n return (\n <>\n \n \n \n {description()}\n \n \n \n \n );\n};\n\nexport default Ticket;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 24px;\n`;\n\nexport const Instruction = styled.b`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n font-weight: ${theme.v2.font.weights.bold};\n font-size: ${theme.v2.font.sizes.sm2};\n `}\n`;\n\nexport const InputWrapper = styled.div`\n &:hover{\n cursor: pointer;\n }\n`;\n\nexport const BarCode = styled.img`\n width: 100%;\n height: 68px;\n`;\n\nexport const PaymentTips = styled.ul`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n font-family: ${theme.v2.font.family.primary};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 24px;\n padding: 0 0 0 16px;\n list-style: none;\n `}\n`;\n\nexport const TipItem = styled.li`\n display: flex;\n gap: 8px;\n`;\n\nexport const Number = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n height: 24px;\n min-width: 24px;\n border-radius: 50%;\n background-color: ${theme.v2.colors.brand.primaryExtraDark};\n font-weight: ${theme.v2.font.weights.bold};\n font-size: ${theme.v2.font.sizes.xxs};\n `}\n`;\n\nexport const TipText = styled.div`\n ${({ theme }) => css`\n font-weight: ${theme.v2.font.weights.regular};\n font-size: ${theme.v2.font.sizes.xs};\n color: ${theme.v2.colors.neutral.lowDark};\n `}\n`;\n\nexport const Actions = styled.div`\n ${({ theme }) => css`\n display: flex;\n justify-content: center;\n gap: 16px;\n\n @media (max-width: ${theme.v1.breakpoints.sm}){\n flex-direction: column;\n }\n `}\n`;\n","import React, { useState } from 'react';\nimport { Button, TextField, Modal } from 'gatorcomponents';\nimport * as Styles from './TicketDialog.styles';\nimport { copyTextToClipboard } from '@/utils/Application/copyTextToClipboard';\nimport barCodeMockImg from '@/media/billing/barcode.png';\n\nconst TicketDialog = ({\n onGoBack,\n digitableLine,\n barCode = null,\n saveTicketAsPDF,\n printTicket,\n labelsLocale,\n isLoading,\n}) => {\n const [codeCopied, setCodeCopied] = useState(false);\n const copyToClipboard = () => {\n copyTextToClipboard(digitableLine);\n setCodeCopied(true);\n };\n\n const handleSaveTicketAsPDF = () => {\n saveTicketAsPDF && saveTicketAsPDF();\n };\n\n const handlePrintTicket = () => {\n printTicket && printTicket();\n };\n\n const handleOnGoBack = (() => {\n onGoBack && onGoBack();\n setCodeCopied(false);\n });\n\n return (\n \n \n {labelsLocale.instruction} \n \n \n \n \n 1 \n \n {labelsLocale.ticketTipLabels[0]}\n \n \n\n \n 2 \n \n {labelsLocale.ticketTipLabels[1]}\n \n \n\n \n 3 \n \n {labelsLocale.ticketTipLabels[2]}\n \n \n \n \n \n \n \n );\n};\n\nexport default TicketDialog;\n","import styled, { css } from 'styled-components';\n\nexport const InvoiceInfoWrapper = styled.div`\n ${({ theme }) => css`\n align-items: end;\n display: flex;\n flex-wrap: wrap;\n font-family: ${theme.v2.font.family.primary};\n gap: 24px;\n `};\n`;\n\nexport const InvoiceInfo = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n flex-direction: column;\n font-size: ${theme.v2.font.sizes.xs};\n `}\n`;\n\nexport const InvoiceInfoTitle = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n `}\n`;\n","import React from 'react';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { formatDate } from '@/utils/Formatters/formatDate';\nimport { Button } from 'gatorcomponents';\nimport * as Styles from './InvoiceInfos.styles';\n\nconst InvoiceInfos = ({\n mobile,\n showInvoiceDetails,\n invoiceDetailsLocale,\n invoiceDetailsState,\n invoice,\n handleSeeDetails,\n}) => {\n const detailsButtonLabel = showInvoiceDetails\n ? invoiceDetailsLocale.hideDetailsButtonLabel\n : invoiceDetailsLocale.showDetailsButtonLabel;\n\n return (\n \n {invoice && (!mobile || showInvoiceDetails) && (\n <>\n \n {invoiceDetailsLocale.invoice} \n {invoice && invoice.id}\n \n \n {invoiceDetailsLocale.dueDate} \n {formatDate(invoice.duedate)}\n \n \n {invoiceDetailsLocale.totalValue} \n {formatCurrency(invoice.total)}\n \n \n )}\n {(!mobile || !showInvoiceDetails) && (\n \n );\n};\n\nexport default InvoiceInfos;\n","import styled, { css } from 'styled-components';\n\nexport const DetailsWrapper = styled.div`\n ${({ theme }) => css`\n background: ${theme.v2.colors.brand.primaryUltraLight};\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n padding: 0 16px;\n `};\n`;\n\nexport const DetailsItem = styled.div`\n ${({ theme }) => css`\n border-bottom: 1px solid ${theme.v2.colors.neutral.highMedium};\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n font-size: ${theme.v2.font.sizes.xxs};\n justify-content: space-between;\n padding: 16px 0;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n flex-wrap: wrap;\n gap: 8px;\n }\n `};\n`;\n\nexport const DetailsTextContainer = styled.span`\n ${({ theme, truncableText }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n\n ${truncableText && css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 85%;\n `}\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n width: 100%;\n text-align: end;\n }\n `};\n`;\n\nexport const FinancialTable = styled.table`\n ${({ theme }) => css`\n align-self: flex-end;\n border-spacing: 16px;\n border-collapse: collapse;\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 16px 0;\n width: 320px;\n\n tr:nth-last-child(2) {\n border-bottom: 1px solid ${theme.v2.colors.neutral.highMedium};\n\n td {\n padding-bottom: 16px;\n }\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n width: 100%;\n }\n `};\n`;\n\nexport const TableRow = styled.tr`\n ${({\n theme, noPaddingBottom, paddingTop, isVat,\n }) => css`\n td:first-child {\n text-align: left;\n }\n td:last-child {\n text-align: right;\n }\n\n td {\n color: ${isVat && theme.v2.colors.neutral.lowMedium};\n font-size: ${isVat && theme.v2.font.sizes.xxxs};\n padding-bottom: ${noPaddingBottom ? 0 : '16px'};\n padding-top: ${paddingTop && '8px'};\n }\n `};\n`;\n\nexport const TableData = styled.td`\n ${({ isVat }) => css`\n display: ${isVat && 'flex'};\n gap: ${isVat && '4px'};\n `};\n`;\n","import React from 'react';\nimport { InvoiceInfos } from '../InvoiceInfos';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { IconInfo, Tooltip } from 'gatorcomponents';\nimport * as Styles from './InvoiceDetails.styles';\n\nconst InvoiceDetails = ({\n mobile,\n invoiceInfosProps,\n invoice,\n invoiceDetailsData,\n invoiceDetailsLocale,\n}) => (\n <>\n {mobile && \n {invoiceDetailsData && invoiceDetailsData.invoiceItems.map(item => (\n \n {item.description} \n {formatCurrency(item.amount)} \n \n ))}\n \n \n {invoiceDetailsLocale.subtotal} \n {formatCurrency(invoiceDetailsData.invoice.subtotal)} \n \n\n {invoice.tax > 0 && (\n <>\n \n {invoiceDetailsLocale.taxes} \n {formatCurrency(invoice.tax)} \n \n {invoice.extraTaxes && invoice.extraTaxes.map((tax, index) => (\n 1 && index === 0}\n isVat\n >\n \n {`VAT: ${tax.taxRate}% ${tax.taxName}`}\n \n \n \n {formatCurrency(tax.taxTotal)} \n \n ))}\n \n )}\n\n {invoiceDetailsData.invoice.credit > 0 && (\n \n {invoiceDetailsLocale.credits} \n {`-${formatCurrency(invoiceDetailsData.invoice.credit)}`} \n \n )}\n\n {invoiceDetailsData.invoice.amountpaid > 0 && (\n \n {invoiceDetailsLocale.amountPaid} \n {`-${formatCurrency(invoiceDetailsData.invoice.amountpaid)}`} \n \n )}\n\n \n {invoiceDetailsLocale.total} \n {formatCurrency(invoiceDetailsData.invoice.total)} \n \n \n \n \n);\n\nexport default InvoiceDetails;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: 32px;\n justify-content: center;\n padding: 20px;\n width: 100%;\n`;\n\nexport const PaymentInfos = styled.div`\n max-width: 400px;\n width: 100%;\n`;\n\nexport const ReplaceOtherCardText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: ${theme.v2.font.sizes.xxs};\n margin: 0;\n `};\n`;\n\nexport const CheckboxContainer = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n cursor: pointer;\n display: flex;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 8px;\n `};\n`;\n\nexport const Iframe = styled.iframe`\n max-width: 400px;\n border: none;\n`;\n\nexport const SelectContainer = styled.div`\n padding: 0 10px;\n width: 100%;\n`;\n\nexport const BottomMessage = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background: ${theme.v2.colors.brand.primaryLowLight};\n border-radius: 4px;\n display: flex;\n gap: 8px;\n padding: 8px;\n width: 100%;\n `};\n`;\n\nexport const BottomMessageText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryExtraDark};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0;\n `}\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './NewCreditCard.styles';\nimport {\n Button, Checkbox, IconSecurity, SelectField, Skeleton,\n} from 'gatorcomponents';\nimport PropTypes from 'prop-types';\nimport { isBRServer } from '@/utils/Validators/validation';\n\nconst NewCreditCard = ({\n invoice,\n saveCcButtonLabel,\n bottomMessage,\n loadingCreditCardInstallments,\n selectInstallmentsPlaceholder,\n useOnNextRenovationLabel,\n existsCreditCard,\n replaceCardLabel,\n installmentsOptions,\n isButtonLoading,\n isCcButtonEnabled,\n canSubmit,\n renderIframe,\n submitCreditCard,\n setInstallment,\n setUseOnNextRenovation,\n}) => {\n const [useCardOnNextRenovation, setUseCardOnNextRenovation] = useState(false);\n const [selectedInstallment, setSelectedInstallment] = useState(null);\n\n const showRenovationCheckbox = invoice && invoice.showCreditCardCheckbox;\n\n const handleUseCardOnNextRenovation = () => {\n setUseCardOnNextRenovation(!useCardOnNextRenovation);\n setUseOnNextRenovation && setUseOnNextRenovation(!useCardOnNextRenovation);\n };\n\n const handleSetSelectedInstallment = useCallback((option) => {\n setSelectedInstallment(option);\n setInstallment && setInstallment(option);\n }, [setInstallment]);\n\n const setFirstOptionAsDefault = useCallback(() => {\n if (!isBRServer && installmentsOptions.length > 0) {\n handleSetSelectedInstallment(installmentsOptions[0]);\n }\n }, [installmentsOptions, handleSetSelectedInstallment]);\n\n useEffect(() => {\n setFirstOptionAsDefault();\n }, [setFirstOptionAsDefault]);\n\n const isDisabled = (!isCcButtonEnabled && !canSubmit) || isButtonLoading || !selectedInstallment;\n\n return (\n \n {existsCreditCard && (\n \n {replaceCardLabel}\n \n )}\n \n {renderIframe}\n\n {isBRServer && (\n \n {!loadingCreditCardInstallments && (\n \n )}\n\n \n {showRenovationCheckbox && (\n \n \n )}\n \n \n {bottomMessage}\n \n \n \n );\n};\n\nNewCreditCard.propTypes = {\n invoice: PropTypes.object,\n saveCcButtonLabel: PropTypes.string,\n bottomMessage: PropTypes.string,\n loadingCreditCardInstallments: PropTypes.bool,\n selectInstallmentsPlaceholder: PropTypes.string,\n useOnNextRenovationLabel: PropTypes.string,\n existsCreditCard: PropTypes.bool,\n replaceCardLabel: PropTypes.string,\n installmentsOptions: PropTypes.array,\n isButtonLoading: PropTypes.bool,\n isCcButtonEnabled: PropTypes.bool,\n canSubmit: PropTypes.bool,\n renderIframe: PropTypes.element,\n submitCreditCard: PropTypes.func,\n setInstallment: PropTypes.func,\n setUseOnNextRenovation: PropTypes.func,\n};\n\n\nexport default NewCreditCard;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 20px;\n width: 100%;\n`;\n\nexport const PaymentWrapper = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: 16px;\n justify-content: center;\n max-width: 400px;\n width: 100%;\n`;\n\nexport const SelectContainer = styled.div`\n padding: 0 10px;\n width: 100%;\n`;\n\nexport const CardInfo = styled.div`\n display: flex;\n width: 100%;\n`;\n\nexport const CardImage = styled.div`\n position: relative;\n left: -24px;\n transform: scale(0.2);\n margin: 0;\n height: 0px;\n width: 90px;\n`;\n\nexport const CheckboxContainer = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n cursor: pointer;\n display: flex;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 8px;\n `};\n`;\n\nexport const CardData = styled.div`\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nexport const CardLastFour = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: ${theme.v2.font.sizes.xxs};\n margin: 0;\n `};\n`;\n\nexport const CardDueDate = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxxs};\n margin: 0;\n `};\n`;\n\nexport const BottomMessage = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background: ${theme.v2.colors.brand.primaryLowLight};\n border-radius: 4px;\n display: flex;\n gap: 8px;\n padding: 8px;\n width: 100%;\n `};\n`;\n\nexport const BottomMessageText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryExtraDark};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0;\n `}\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './CurrentCreditCard.styles';\nimport {\n Button, Checkbox, IconSecurity, SelectField, Skeleton,\n} from 'gatorcomponents';\nimport { CreditCardPreview } from '@/components/CreditCard/NewCreditCardPreview';\nimport { isBRServer } from '@/utils/Validators/validation';\n\nconst CurrentCreditCard = ({\n invoice,\n currentCreditCardData,\n isButtonLoading,\n submitCurrentCreditCard,\n loadingCreditCardInstallments,\n selectInstallmentsPlaceholder,\n useOnNextRenovationLabel,\n setInstallment,\n setUseOnNextRenovation,\n dueLabel,\n payInvoiceButtonLabel,\n bottomMessage,\n installmentsOptions,\n}) => {\n const [selectedInstallment, setSelectedInstallment] = useState(null);\n const [useCardOnNextRenovation, setUseCardOnNextRenovation] = useState(false);\n\n const showRenovationCheckbox = invoice && invoice.showCreditCardCheckbox;\n\n const handleUseCardOnNextRenovation = () => {\n setUseCardOnNextRenovation(!useCardOnNextRenovation);\n setUseOnNextRenovation && setUseOnNextRenovation(!useCardOnNextRenovation);\n };\n\n const handleSetSelectedInstallment = useCallback((option) => {\n setSelectedInstallment(option);\n setInstallment && setInstallment(option);\n }, [setInstallment]);\n\n const setFirstOptionAsDefault = useCallback(() => {\n if (!isBRServer && installmentsOptions.length > 0) {\n handleSetSelectedInstallment(installmentsOptions[0]);\n }\n }, [installmentsOptions, handleSetSelectedInstallment]);\n\n useEffect(() => {\n setFirstOptionAsDefault();\n }, [setFirstOptionAsDefault]);\n\n\n const cardLastFour = currentCreditCardData && currentCreditCardData.cardLastFour && `**** ${(currentCreditCardData.cardLastFour).replace(/\\*/g, '')}`;\n\n return (\n \n \n {currentCreditCardData && (\n \n \n \n \n {cardLastFour} \n {dueLabel(currentCreditCardData.expDate)} \n \n \n )}\n\n {isBRServer && (\n \n {!loadingCreditCardInstallments && (\n \n )}\n \n {showRenovationCheckbox && (\n \n \n )}\n \n \n {bottomMessage}\n \n \n \n );\n};\n\nexport default CurrentCreditCard;\n","import styled from 'styled-components';\n\nexport const Iframe = styled.iframe`\n max-width: 400px;\n border: none;\n`;\n","import React, {\n useCallback, useEffect, useRef, useState,\n} from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { config, COUNTRY } from '@/config';\nimport * as Styles from './useCreditCardPayment.styles';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { XRAY_ENABLED_FINGERPRINT, XRAY_INSTALLMENTS_MODAL, XRAY_VERIFY_CARD_CHECK } from '@/config/GrowthBook/constants';\nimport { CALLER, PaymentStatusTypes } from '../usePaymentModal/usePaymentModal.types';\nimport { loadInvoices, updateStatusInvoiceToConfirmingPayment } from '@/redux/actions/invoices';\nimport { getPaymentMethod } from '@/redux/actions/paymentMethod';\nimport { ERROR_CC_METHOD, RECEIVE_GATORPAY_PAAS_SAVE_CREDITCARD } from '@/redux/actions/actionsTypes';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport { notifierError } from '@/utils/Application/notifier';\nimport { PHISHING_STATUS_ANALYSIS } from '@/config/invoices/invoiceStatus';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { getCreditCardAttempt, saveCreditCard, saveCreditCardAttempt } from '@/redux/actions/creditCardPaas';\nimport { billingActions } from '@/redux/modules';\nimport { generateRecaptchaToken, loadReCaptchaPaaS } from '@/utils/Application/reCaptcha';\n\nconst useCreditCardPayment = ({\n creditCardInstallments,\n setCcButtonEnabled,\n setCcButtonLoading,\n selectedInstallment,\n setPaymentStatus,\n useCardOnNextRenovation = false,\n handleSwitchPaymentMethod,\n invoiceId,\n caller,\n}) => {\n const [heightIframe, setHeightIframe] = useState(260);\n const [canSubmit, setCanSubmit] = useState(false);\n\n const summaryState = useSelector(state => state.summary);\n const creditCardAttempt = useSelector(state => state.creditCardAttempt);\n\n const enabledFingerprint = useFeatureIsOn(XRAY_ENABLED_FINGERPRINT);\n const isCreditCardInstallmentsEnabled = useFeatureIsOn(XRAY_INSTALLMENTS_MODAL);\n const isVerifyCardCheckActive = useFeatureIsOn(XRAY_VERIFY_CARD_CHECK);\n\n const iframeRef = useRef(null);\n const dispatch = useDispatch();\n\n const {\n IFRAME_URL,\n CLIENT_ID,\n IFRAME_PAGENAME,\n } = config.PAAS_CONFIG;\n\n const providerIdentifier = enabledFingerprint && `${COUNTRY}${summaryState.id}${Date.now()}`;\n\n const onSaveCreditCard = useCallback(() => {\n const hasSelectedInstallment = creditCardInstallments && creditCardInstallments.filter(installment => installment.gateway === selectedInstallment).length > 0;\n\n const enabledSubmit = !!selectedInstallment && !isCreditCardInstallmentsEnabled ? true : hasSelectedInstallment;\n setCanSubmit(enabledSubmit);\n }, [selectedInstallment, creditCardInstallments, isCreditCardInstallmentsEnabled]);\n\n const changePaymentMethod = useCallback(() => {\n setCcButtonLoading(true);\n dispatch(getPaymentMethod(selectedInstallment.value, invoiceId, providerIdentifier, useCardOnNextRenovation)).then((action) => {\n const isError = action.type === ERROR_CC_METHOD;\n\n setCcButtonLoading(false);\n\n if (isError) {\n switch (action.status) {\n case 'INVALID_INVOICE_STATUS':\n setPaymentStatus && setPaymentStatus(PaymentStatusTypes.FAILURE_CREDIT_CARD);\n updateStatusInvoiceToConfirmingPayment(invoiceId);\n break;\n case 'PENDING_ANALYSIS':\n loadInvoices('Unpaid', true);\n setPaymentStatus && setPaymentStatus(PaymentStatusTypes.SUCCESS_GENERIC);\n break;\n default:\n setPaymentStatus && setPaymentStatus(PaymentStatusTypes.FAILURE_CREDIT_CARD);\n if (Object.prototype.hasOwnProperty.call(action, 'key') && action.key === PHISHING_STATUS_ANALYSIS) {\n loadInvoices('Unpaid', true);\n }\n break;\n }\n }\n\n if (!isError) {\n setPaymentStatus && setPaymentStatus(PaymentStatusTypes.SUCCESS_GENERIC);\n loadInvoices('Unpaid', true);\n updateStatusInvoiceToConfirmingPayment(invoiceId);\n }\n });\n }, [\n dispatch,\n invoiceId,\n providerIdentifier,\n setPaymentStatus,\n useCardOnNextRenovation,\n selectedInstallment,\n setCcButtonLoading,\n ]);\n\n const sendCurrentCreditCard = useCallback(() => {\n if (caller === CALLER.SUBSCRIPTIONS) {\n handleSwitchPaymentMethod();\n }\n\n if (caller === CALLER.INVOICES) {\n changePaymentMethod();\n }\n }, [caller, changePaymentMethod, handleSwitchPaymentMethod]);\n\n const postMessage = useCallback((body) => {\n const { contentWindow } = document.getElementById('token-iframe');\n contentWindow.postMessage(JSON.stringify({\n securePayMessage: true,\n body,\n }), IFRAME_URL);\n }, [IFRAME_URL]);\n\n const callGetToken = useCallback((token) => {\n postMessage({\n callFunction: {\n name: 'hgLatamGetToken',\n arguments: [token],\n },\n });\n }, [postMessage]);\n\n const submitCreditCard = () => {\n if (isBRServer) {\n dispatch(getCreditCardAttempt());\n if (creditCardAttempt !== undefined && !creditCardAttempt.response) {\n dispatch(enqueueSnackbar('snackbar.creditCard.paymentFailByAttemptsLimit', notifierError));\n setCcButtonEnabled(true);\n setCcButtonLoading(false);\n return;\n }\n }\n\n setCcButtonEnabled(false);\n setCcButtonLoading(true);\n postMessage({\n callFunction: {\n name: 'hgLatamValidateAll',\n arguments: [],\n },\n });\n };\n\n const checkSubscriptionsToChangePaymentMethod = useCallback(() => {\n dispatch(billingActions.subscriptions.requestSubscriptionsNotInCreditCard());\n }, [dispatch]);\n\n const onMessage = useCallback((event) => {\n if (event.data.securePayMessage !== true) {\n return false;\n }\n let { body } = event.data;\n if (body.constructor === String) {\n try {\n body = JSON.parse(body);\n // eslint-disable-next-line no-console\n } catch (e) { console.log(e); }\n }\n if (body.constructor === Object) {\n if (body.isValid !== undefined && body.fields !== undefined) {\n if (!body.isValid) {\n dispatch(enqueueSnackbar('snackbar.creditCard.paas.errorSaveCreditCard', notifierError));\n setCcButtonEnabled(true);\n setCcButtonLoading(false);\n return;\n }\n generateRecaptchaToken(config.NEW_RECAPTCHA_PAAS, 'userexistis').then((token) => {\n callGetToken(token);\n }).catch(() => {\n dispatch(enqueueSnackbar('snackbar.creditCard.paas.errorSaveCreditCard', notifierError));\n setCcButtonEnabled(true);\n setCcButtonLoading(false);\n });\n }\n if (body.creditCard !== undefined && body.creditCard.data !== '') {\n body.creditCard.token = body.id;\n if (isVerifyCardCheckActive) {\n if (body.properties !== undefined && body.properties.Status !== undefined && body.properties.Status !== 1) {\n dispatch(enqueueSnackbar('snackbar.creditCard.paas.errorVerifyCard', notifierError));\n setPaymentStatus && setPaymentStatus(PaymentStatusTypes.FAILURE_CREDIT_CARD);\n setCcButtonEnabled(true);\n setCcButtonLoading(false);\n\n if (isBRServer) {\n dispatch(saveCreditCardAttempt(body.creditCard.token));\n }\n return;\n }\n }\n\n setCcButtonLoading(true);\n dispatch(saveCreditCard(body.creditCard)).then((data) => {\n onSaveCreditCard();\n checkSubscriptionsToChangePaymentMethod();\n\n if (caller === CALLER.SUBSCRIPTIONS) {\n handleSwitchPaymentMethod();\n }\n\n if (caller === CALLER.INVOICES) {\n changePaymentMethod();\n }\n\n if (isBRServer && data.type === RECEIVE_GATORPAY_PAAS_SAVE_CREDITCARD) {\n dispatch(saveCreditCardAttempt(body.creditCard.token, 'ip'));\n }\n });\n }\n if (body.size !== undefined && body.size.height !== 0) {\n setHeightIframe(body.size.height);\n }\n }\n }, [\n isVerifyCardCheckActive,\n dispatch,\n checkSubscriptionsToChangePaymentMethod,\n setCcButtonEnabled,\n setPaymentStatus,\n setHeightIframe,\n callGetToken,\n onSaveCreditCard,\n changePaymentMethod,\n setCcButtonLoading,\n handleSwitchPaymentMethod,\n caller,\n ]);\n\n useEffect(() => {\n loadReCaptchaPaaS(true);\n window.addEventListener('message', onMessage);\n return () => {\n window.removeEventListener('message', onMessage);\n };\n }, [onMessage]);\n\n useEffect(() => {\n dispatch(getCreditCardAttempt());\n }, [dispatch]);\n\n useEffect(() => {\n window.addEventListener('message', onMessage);\n\n return () => {\n window.removeEventListener('message', onMessage);\n };\n }, [IFRAME_URL, onMessage]);\n\n const renderIframe = (\n \n \n {title}\n \n\n \n \n \n \n\n \n \n\n \n {list.map((item, index) => (\n \n {index + 1} \n {item}\n \n ))}\n\n \n\n \n );\n};\n\nexport default PixContent;\n","import React, {\n useCallback,\n useEffect, useMemo, useState,\n} from 'react';\nimport useLocale from '@/hooks/useLocale';\nimport {\n IconCheckBg, IconCardRefresh, IconExternalLink, Modal, RadioCollapse,\n IconTimeIllustrated,\n IconAtencion,\n IconLoading,\n Skeleton,\n} from 'gatorcomponents';\nimport * as Styles from './usePaymentModal.styles';\nimport { useResize } from '@/hooks/useResize';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n PAYMENT_MODAL_CALLER, PAYMENT_STATUS, PaymentMethodsTypes, PaymentStatusTypes, PaypalActionTypes,\n CALLER,\n} from './usePaymentModal.types';\nimport { PaymentStatus } from './components/PaymentStatus';\nimport { DefaultPaymentAction } from './components/DefaultPaymentAction';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { Ticket } from './components/Ticket';\nimport { TicketDialog } from './components/TicketDialog';\nimport { billingActions, commonActions, invoicesActions } from '@/redux/modules';\nimport PaypalDialog from '@/components/Paypal/PaypalDialog';\nimport { useFeatureIsOn, useFeatureValue } from '@growthbook/growthbook-react';\nimport { CHARLIE_NEW_PAYMENT_MODAL_OPTIONS, XRAY_ENABLED_SPLIT_PAYMENT, XRAY_LIMIT_TIME_IN_SECONDS_TO_DISPLAY_PIX_CODE } from '@/config/GrowthBook/constants';\nimport PropTypes from 'prop-types';\nimport { useDiagnostic } from '@/components/Layout/Menu/MyAlerts';\nimport { billingAnalytics } from '@/analytics';\nimport { InvoiceInfos } from './components/InvoiceInfos';\nimport { InvoiceDetails } from './components/InvoiceDetails';\nimport { NewCreditCard } from './components/NewCreditCard';\nimport { getCreditCardInstallments, getCreditCardInstallmentsByProductData, loadCreditCard } from '@/redux/actions/creditCard';\nimport { CurrentCreditCard } from './components/CurrentCreditCard';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { useCreditCardPayment } from '../useCreditCardPayment';\nimport { useHistory, useParams } from 'react-router';\nimport { payTicketInvoiceForES, checkBoletoUserData } from '@/redux/actions/invoices';\nimport {\n ERROR_CHANGE_PAYMENT_METHOD, ERROR_PAYMENT_METHOD_TICKET_INVOICE_ES, RECEIVE_PAYMENT_METHOD_TICKET_INVOICE_ES, SUCCESS_CHANGE_PAYMENT_METHOD,\n} from '@/redux/actions/actionsTypes';\nimport { locale } from '@/utils/locale';\nimport { changePaymentMethodOption } from '@/redux/actions/paymentMethod';\nimport { PixContent } from './components/PixContent';\nimport { SplitPaymentModal } from '@/components/Invoices/SplitPaymentModal';\n\nconst usePaymentModal = ({\n onClose,\n invoiceData,\n invoiceId,\n caller,\n handleUpgradeSitelock,\n paymentFromInvoicesPage,\n}) => {\n const calledFromInvoices = caller === CALLER.INVOICES;\n const calledFromSubscriptions = caller === CALLER.SUBSCRIPTIONS;\n const [showInvoiceDetails, setShowInvoiceDetails] = useState(false);\n const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(null);\n const [selectedPaymentMethodOptions, setSelectedPaymentMethodOptions] = useState(null);\n const [selectedPaymentMethodCode, setSelectedPaymentMethodCode] = useState(null);\n const [selectedMethodKey, setSelectedMethodKey] = useState(null);\n const [paymentStatus, setPaymentStatus] = useState(null);\n const [ticketData, setTicketData] = useState(null);\n const [loadingPrintTicket, setLoadingPrintTicket] = useState(false);\n const [loadingCreditCardInstallments, setLoadingCreditCardInstallments] = useState(true);\n const [creditCardInstallments, setCreditCardInstallments] = useState([]);\n const [installment, setInstallment] = useState(null);\n const [useOnNextRenovation, setUseOnNextRenovation] = useState(false);\n const [loadingInvoiceData, setLoadingInvoiceData] = useState(false);\n const [lastPaymentMethodExternalUrls, setLastPaymentMethodExternalUrls] = useState(null);\n const [isCcButtonEnabled, setCcButtonEnabled] = useState(true);\n const [isCcButtonLoading, setCcButtonLoading] = useState(false);\n const [isPaymentSplited, setPaymentSplited] = useState(false);\n\n const { paymentMethodsV2: paymentMethodsState, subscription } = useSelector(state => state.billing);\n const currentCreditCard = useSelector(state => state.creditCard);\n const invoicesState = useSelector(state => state.invoicesV2);\n const oldInvoicesState = useSelector(state => state.invoices);\n\n const enabledSplitPayment = useFeatureIsOn(XRAY_ENABLED_SPLIT_PAYMENT);\n const newPaymentModalOptions = useFeatureValue(CHARLIE_NEW_PAYMENT_MODAL_OPTIONS);\n const enabledTimeToDisplayPixCode = useFeatureValue(XRAY_LIMIT_TIME_IN_SECONDS_TO_DISPLAY_PIX_CODE);\n const limitTimeToDisplayPixCode = useFeatureValue(XRAY_LIMIT_TIME_IN_SECONDS_TO_DISPLAY_PIX_CODE);\n\n const params = useParams();\n const history = useHistory();\n const dispatch = useDispatch();\n const { requestDiagnostic } = useDiagnostic();\n\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n const { switchPaymentMethod } = subscription;\n const { loading: loadingSwitchPaymentMethod } = switchPaymentMethod;\n\n const limitTimeInSecondsToDisplayPixCode = enabledTimeToDisplayPixCode && limitTimeToDisplayPixCode.time_in_secounds != null\n ? limitTimeToDisplayPixCode && limitTimeToDisplayPixCode.time_in_secounds\n : null;\n\n const existsCreditCard = !!currentCreditCard && !!currentCreditCard.cardLastFour;\n const isCreditCard = selectedPaymentMethod && (\n selectedPaymentMethod.includes(PaymentMethodsTypes.BRASPAG_CREDIT)\n || selectedPaymentMethod === PaymentMethodsTypes.CURRENT_CREDIT_CARD.toLowerCase()\n || selectedPaymentMethod === PaymentMethodsTypes.DLOCAL);\n\n const canDisplayInvoiceDetails = !!invoicesState.invoiceDetails.data && !invoicesState.invoiceDetails.loading;\n\n const resetStates = useCallback(() => {\n setCcButtonLoading(false);\n setCcButtonEnabled(true);\n setShowInvoiceDetails(false);\n setSelectedPaymentMethod(null);\n setPaymentStatus(null);\n setSelectedMethodKey(null);\n setPaymentSplited(false);\n dispatch(invoicesActions.invoices.loadDetailsV2.resetState());\n dispatch(invoicesActions.invoices.generatePix.setPix({\n qrCode: null,\n code: null,\n }));\n }, [dispatch]);\n\n const handleClose = useCallback(() => {\n if (!isCcButtonLoading) {\n resetStates();\n onClose && onClose();\n }\n }, [resetStates, onClose, isCcButtonLoading]);\n\n const getInvoiceData = () => {\n if (invoiceData) {\n return invoiceData;\n }\n if (invoicesState.invoiceDetails.data) {\n return invoicesState.invoiceDetails.data.invoice;\n }\n if (invoiceId) {\n const item = (oldInvoicesState.byStatus.Unpaid.find(invoice => invoice.id === invoiceId));\n\n return item;\n }\n return invoicesState.invoiceData;\n };\n\n const invoice = getInvoiceData();\n const paymentMethods = paymentMethodsState.methods;\n const displaySplitInvoice = paymentFromInvoicesPage\n && invoice\n && invoice.isSplittable\n && enabledSplitPayment\n && !isPaymentSplited;\n\n const {\n usePaymentModal: paymentModalLocale,\n manageSubscriptionPaymentInvoiceModal: manageSubscriptionPaymentInvoiceModalLocale,\n routes: routesLocale,\n } = useLocale();\n\n const windowRect = useResize();\n const { width } = windowRect;\n const mobile = width < 960;\n\n const setPaymentStatusPix = useCallback(() => {\n if (invoicesState && invoicesState.pixFailure) {\n setPaymentStatus(PaymentStatusTypes.GENERIC_FAILURE);\n }\n\n if (invoicesState && invoicesState.qrCode && !invoicesState.pixFailure) {\n setPaymentStatus(PaymentStatusTypes.PIX_ONGOING);\n }\n }, [invoicesState]);\n\n useEffect(() => {\n setPaymentStatusPix();\n }, [setPaymentStatusPix]);\n\n const clearPix = useCallback(() => {\n dispatch(invoicesActions.invoices.generatePix.setPix({\n qrCode: null,\n pixCode: null,\n }));\n }, [dispatch]);\n\n useCallback(() => {\n clearPix();\n }, [clearPix]);\n\n const getPaymentMethod = useCallback(() => {\n const selectedOption = selectedPaymentMethodOptions && selectedPaymentMethodOptions.find(option => option.code === selectedPaymentMethodCode);\n const paymentMethod = selectedOption && selectedOption.provider;\n\n if (isCreditCard && installment) {\n return installment && installment.value;\n }\n\n if (selectedPaymentMethod && !selectedOption) {\n return selectedPaymentMethod;\n }\n\n return paymentMethod;\n }, [\n installment,\n selectedPaymentMethod,\n selectedPaymentMethodOptions,\n selectedPaymentMethodCode,\n isCreditCard,\n ]);\n\n const handleSuccessSwitchPaymentMethod = useCallback((bool) => {\n if (bool) {\n onClose && onClose();\n resetStates();\n\n if (isCreditCard) {\n dispatch(loadCreditCard());\n }\n }\n }, [onClose, isCreditCard, resetStates, dispatch]);\n\n const handleSwitchPaymentMethod = useCallback(({ method } = {}) => {\n let paymentMethod = null;\n\n if (method) {\n paymentMethod = method;\n }\n\n if (!method) {\n paymentMethod = getPaymentMethod() || (installment && installment.value);\n }\n\n const toast = {\n ...paymentModalLocale.successChangeMethodToast,\n showIcon: 'true',\n };\n\n dispatch(billingActions.subscriptions.switchPaymentMethod.request(\n {\n subscription: {\n id: params.subscriptionId,\n type: params.subscriptionType,\n },\n paymentMethod,\n onSuccess: handleSuccessSwitchPaymentMethod,\n usePaymentModalV2: true,\n method: selectedPaymentMethodCode || selectedPaymentMethod,\n toast,\n },\n ));\n }, [\n params,\n dispatch,\n selectedPaymentMethodCode,\n selectedPaymentMethod,\n handleSuccessSwitchPaymentMethod,\n paymentModalLocale.successChangeMethodToast,\n installment,\n getPaymentMethod,\n ]);\n\n const {\n canSubmit,\n renderIframe,\n sendCurrentCreditCard,\n submitCreditCard,\n } = useCreditCardPayment({\n creditCardInstallments,\n selectedInstallment: installment,\n setCcButtonEnabled,\n setCcButtonLoading,\n setPaymentStatus,\n handleSwitchPaymentMethod,\n useOnNextRenovation,\n invoiceId: invoice && invoice.id,\n caller,\n });\n\n const handleSeeDetails = () => {\n if (!invoicesState.invoiceDetails.data && invoice && invoice.id) {\n dispatch(invoicesActions.invoices.loadDetailsV2.request({ invoiceId: invoice.id }));\n }\n setShowInvoiceDetails(!showInvoiceDetails);\n };\n\n const requestPaymentMethods = useCallback(() => {\n dispatch(billingActions.paymentMethods.request());\n }, [dispatch]);\n\n useEffect(() => {\n requestPaymentMethods();\n }, [requestPaymentMethods]);\n\n const loadBaseRequests = useCallback(() => {\n if (invoiceId && !invoice) {\n dispatch(invoicesActions.invoices.loadDetailsV2.request({ invoiceId }));\n }\n\n if (existsCreditCard) {\n setSelectedMethodKey(PaymentMethodsTypes.CURRENT_CREDIT_CARD);\n }\n\n if (!existsCreditCard) {\n dispatch(loadCreditCard()).then((data) => {\n if (data && data.creditCard && data.creditCard.cardlastfour) {\n setSelectedMethodKey(PaymentMethodsTypes.CURRENT_CREDIT_CARD);\n }\n });\n }\n\n if (((invoice && invoice.id)) || params.subscriptionId) {\n setLoadingCreditCardInstallments(true);\n\n if (params.subscriptionId) {\n dispatch(getCreditCardInstallmentsByProductData(params.subscriptionId, params.subscriptionType)).then((data) => {\n setLoadingCreditCardInstallments(false);\n setCreditCardInstallments(data.installments);\n });\n }\n\n if (invoice && invoice.id) {\n dispatch(getCreditCardInstallments(invoice.id)).then((data) => {\n setLoadingCreditCardInstallments(false);\n setCreditCardInstallments(data.installments);\n });\n }\n }\n }, [\n dispatch,\n invoice,\n invoiceId,\n params,\n existsCreditCard,\n ]);\n\n useEffect(() => {\n loadBaseRequests();\n }, [loadBaseRequests]);\n\n const handleSelectPaymentMethod = useCallback(({ key, options, method }) => {\n if (!isCcButtonLoading) {\n const paymentMethod = method.provider || method.key;\n\n setSelectedMethodKey(key);\n setSelectedPaymentMethod(paymentMethod);\n setSelectedPaymentMethodOptions(options);\n\n if (!options) {\n setSelectedPaymentMethodCode(method.code);\n }\n\n if (options && options.length === 1) {\n setSelectedPaymentMethodCode(options[0].code);\n }\n }\n }, [isCcButtonLoading]);\n\n const goToTicketPrint = () => {\n window.open(ticketData.url, '_blank');\n setTicketData(null);\n handleClose();\n };\n\n const getPaypalDialogProps = useCallback(() => {\n const defaultProps = {\n open: true,\n enabledChangePayPalAccount: newPaymentModalOptions.payPal,\n invoiceId: invoice && invoice.id,\n showResumeData: false,\n enabledChangeAccount: true,\n close: handleClose,\n isSubscriptionsPage: false,\n labelsLocale: manageSubscriptionPaymentInvoiceModalLocale,\n insidePaymentModalV2: true,\n switchPaymentMethod: calledFromInvoices\n ? null\n : () => handleSwitchPaymentMethod({ method: PaymentMethodsTypes.GP_PAYPAL }),\n };\n\n const getCallingOrigin = () => {\n const rules = {\n [PAYMENT_MODAL_CALLER.INVOICES_MANAGER]: PaypalActionTypes.CALLING_BY_MANAGER_INVOICES,\n [PAYMENT_MODAL_CALLER.SUBSCRIPTION_LIST]: PaypalActionTypes.CALLING_BY_LIST_SUBSCRIPTIONS,\n [CALLER.SUBSCRIPTIONS]: PaypalActionTypes.CALLING_BY_PAYMENT_MODAL,\n [CALLER.SITELOCK]: PaypalActionTypes.CALLING_BY_PAYMENT_MODAL,\n };\n\n return rules[caller] || PaypalActionTypes.CALLING_BY_MANAGER_INVOICES;\n };\n\n const onPaymentPayPalExecuted = (event) => {\n if (event && event.status === PAYMENT_STATUS.SUCCESS) {\n if (caller === PAYMENT_MODAL_CALLER.SITELOCK_UPGRADE) {\n handleUpgradeSitelock && handleUpgradeSitelock();\n }\n requestDiagnostic('paymentModal1');\n if (calledFromSubscriptions) {\n dispatch(billingActions.subscriptions.request());\n }\n setPaymentStatus(PaymentStatusTypes.SUCCESS_GENERIC);\n }\n\n if (event && event.status === PAYMENT_STATUS.FAIL) {\n setPaymentStatus(PaymentStatusTypes.ERROR_GENERIC);\n }\n\n const rules = {\n [PAYMENT_MODAL_CALLER.SUBSCRIPTION_MANAGER]: subscriptionAnalytics.executePaymentClick('3_pago_paypal'),\n [PAYMENT_MODAL_CALLER.SITELOCK_UPGRADE]: subscriptionAnalytics.executePaymentClick('3_pago_paypal'),\n [PAYMENT_MODAL_CALLER.INVOICES_MANAGER]: subscriptionAnalytics.executePaymentInvoiceManagerClick('3_pago_paypal'),\n [PAYMENT_MODAL_CALLER.SUBSCRIPTION_LIST]: subscriptionAnalytics.executePaymentInSubscriptionsListClick('3_pago_paypal'),\n };\n\n return rules[caller];\n };\n\n return {\n ...defaultProps,\n onPaymentExecuted: onPaymentPayPalExecuted,\n callingOrigin: getCallingOrigin(),\n };\n }, [\n manageSubscriptionPaymentInvoiceModalLocale,\n handleClose,\n dispatch,\n invoice,\n handleUpgradeSitelock,\n requestDiagnostic,\n subscriptionAnalytics,\n newPaymentModalOptions.payPal,\n handleSwitchPaymentMethod,\n calledFromSubscriptions,\n caller,\n calledFromInvoices,\n ]);\n\n const getTicketProps = () => {\n const buttonLabel = calledFromSubscriptions\n ? paymentModalLocale.paymentMethods[PaymentMethodsTypes.GP_BOLETO].changeMethodButtonLabel\n : paymentModalLocale.paymentMethods[PaymentMethodsTypes.GP_BOLETO].getTicketButton;\n\n return {\n ...paymentModalLocale.paymentMethods[PaymentMethodsTypes.GP_BOLETO],\n setTicketData,\n handleSwitchPaymentMethod,\n loadingSwitchPaymentMethod,\n caller,\n invoice,\n buttonLabel,\n };\n };\n\n const loadInvoiceData = useCallback(() => {\n setLoadingInvoiceData(true);\n\n if (!invoice || !invoice.id) {\n return null;\n }\n\n const requestParams = {\n method: getPaymentMethod(),\n invoiceId: invoice.id,\n bank: selectedPaymentMethodCode,\n };\n\n dispatch(changePaymentMethodOption(requestParams)).then((response) => {\n if (response.type === SUCCESS_CHANGE_PAYMENT_METHOD) {\n dispatch(payTicketInvoiceForES(invoice.id)).then((response) => {\n if (response.type === RECEIVE_PAYMENT_METHOD_TICKET_INVOICE_ES) {\n window.open(response.url, '_blank', 'popup');\n setLastPaymentMethodExternalUrls(response.url);\n setPaymentStatus(PaymentStatusTypes.FOLLOW_NEW_TAB_INSTRUCTIONS);\n }\n\n if (response.type === ERROR_PAYMENT_METHOD_TICKET_INVOICE_ES) {\n dispatch(commonActions.notifications.set({\n label: locale('notifyFailMessage'),\n type: 'error',\n }));\n }\n setLoadingInvoiceData(false);\n });\n }\n\n if (response.type === ERROR_CHANGE_PAYMENT_METHOD) {\n dispatch(commonActions.notifications.set({\n label: locale('notifyFailMessage'),\n type: 'error',\n }));\n\n setLoadingInvoiceData(false);\n }\n });\n }, [\n dispatch,\n invoice,\n selectedPaymentMethodCode,\n getPaymentMethod,\n ]);\n\n const handleClickOption = useCallback(() => {\n if (caller === CALLER.INVOICES) {\n loadInvoiceData();\n }\n\n if (caller === CALLER.SUBSCRIPTIONS) {\n handleSwitchPaymentMethod();\n }\n }, [\n caller,\n loadInvoiceData,\n handleSwitchPaymentMethod,\n ]);\n\n const getQrInteroperableProps = useCallback(() => {\n const handleClick = () => {\n handleClickOption();\n };\n\n return {\n label: calledFromInvoices ? paymentModalLocale.paymentMethods.defaultContinue : paymentModalLocale.paymentMethods.defaultContinueChangeMethod,\n description: paymentModalLocale.paymentMethods.defaultDescription,\n onClick: handleClick,\n loading: loadingInvoiceData || loadingSwitchPaymentMethod,\n };\n }, [\n loadingInvoiceData,\n handleClickOption,\n loadingSwitchPaymentMethod,\n calledFromInvoices,\n paymentModalLocale,\n ]);\n\n const getBilleteraElectronicaProps = useCallback(() => {\n const handleClick = () => {\n handleClickOption();\n };\n\n return {\n label: calledFromInvoices ? paymentModalLocale.paymentMethods.defaultContinue : paymentModalLocale.paymentMethods.defaultContinueChangeMethod,\n description: paymentModalLocale.paymentMethods.defaultDescription,\n onClick: handleClick,\n loading: loadingInvoiceData || loadingSwitchPaymentMethod,\n };\n }, [\n loadingInvoiceData,\n handleClickOption,\n loadingSwitchPaymentMethod,\n calledFromInvoices,\n paymentModalLocale,\n ]);\n\n const installmentsOptions = useMemo(() => {\n if (creditCardInstallments && creditCardInstallments.length > 0) {\n return creditCardInstallments.map(installment => ({\n label: paymentModalLocale.installmentLabel(installment.installments, formatCurrency(installment.installmentValue)),\n value: installment.gateway,\n }));\n }\n\n return [];\n }, [creditCardInstallments, paymentModalLocale]);\n\n const handleSubmitCreditCard = (isNewCc) => {\n isNewCc ? submitCreditCard() : sendCurrentCreditCard();\n };\n\n const newCreditCardProps = () => {\n const defaultProps = {\n invoice,\n setPaymentStatus,\n setInstallment,\n setUseOnNextRenovation,\n loadingCreditCardInstallments,\n creditCardInstallments,\n installmentsOptions,\n existsCreditCard,\n isButtonLoading: isCcButtonLoading || loadingSwitchPaymentMethod,\n isCcButtonEnabled,\n canSubmit,\n renderIframe,\n submitCreditCard: () => handleSubmitCreditCard(true),\n };\n\n if (isBRServer) {\n return {\n ...paymentModalLocale.paymentMethods[PaymentMethodsTypes.BRASPAG_CREDIT],\n ...defaultProps,\n saveCcButtonLabel: calledFromInvoices\n ? paymentModalLocale.paymentMethods[PaymentMethodsTypes.BRASPAG_CREDIT].saveCcButtonLabel\n : paymentModalLocale.paymentMethods[PaymentMethodsTypes.BRASPAG_CREDIT].changeMethodButtonLabel,\n };\n }\n\n if (!isBRServer) {\n return {\n ...paymentModalLocale.paymentMethods[PaymentMethodsTypes.DLOCAL],\n ...defaultProps,\n saveCcButtonLabel: calledFromInvoices\n ? paymentModalLocale.paymentMethods[PaymentMethodsTypes.DLOCAL].saveCcButtonLabel\n : paymentModalLocale.paymentMethods[PaymentMethodsTypes.DLOCAL].changeMethodButtonLabel,\n };\n }\n };\n\n const currentCreditCardProps = () => ({\n ...paymentModalLocale.paymentMethods[PaymentMethodsTypes.CURRENT_CREDIT_CARD],\n payInvoiceButtonLabel: calledFromInvoices\n ? paymentModalLocale.paymentMethods[PaymentMethodsTypes.CURRENT_CREDIT_CARD].payInvoiceButtonLabel\n : paymentModalLocale.paymentMethods[PaymentMethodsTypes.CURRENT_CREDIT_CARD].changeMethodButtonLabel,\n invoice,\n setPaymentStatus,\n setInstallment,\n setUseOnNextRenovation,\n isButtonLoading: isCcButtonLoading || loadingSwitchPaymentMethod,\n submitCurrentCreditCard: () => handleSubmitCreditCard(false),\n loadingCreditCardInstallments,\n creditCardInstallments,\n installmentsOptions,\n currentCreditCardData: currentCreditCard,\n });\n\n const getBankTransferProps = useCallback(() => {\n const handleClick = () => {\n handleClickOption();\n };\n\n return {\n label: calledFromInvoices ? paymentModalLocale.paymentMethods.defaultContinue : paymentModalLocale.paymentMethods.defaultContinueChangeMethod,\n description: paymentModalLocale.paymentMethods.defaultDescription,\n onClick: handleClick,\n loading: loadingInvoiceData || loadingSwitchPaymentMethod,\n selectedPaymentMethodOptions,\n setSelectedPaymentMethodCode,\n multiplePaymentMethodsDescription: paymentModalLocale.paymentMethods.multiplePaymentMethodsDescription,\n };\n }, [\n paymentModalLocale,\n loadingInvoiceData,\n handleClickOption,\n selectedPaymentMethodOptions,\n loadingSwitchPaymentMethod,\n calledFromInvoices,\n ]);\n\n const getEfectivePaymentProps = useCallback(() => {\n const onClick = () => {\n calledFromInvoices\n ? loadInvoiceData()\n : handleSwitchPaymentMethod();\n };\n\n return ({\n label: calledFromInvoices\n ? paymentModalLocale.paymentMethods.defaultContinue\n : paymentModalLocale.paymentMethods.defaultContinueChangeMethod,\n description: paymentModalLocale.paymentMethods.defaultDescription,\n loading: loadingInvoiceData || loadingSwitchPaymentMethod,\n onClick,\n selectedPaymentMethodOptions,\n setSelectedPaymentMethodCode,\n });\n }, [\n loadingSwitchPaymentMethod,\n paymentModalLocale,\n loadingInvoiceData,\n loadInvoiceData,\n selectedPaymentMethodOptions,\n calledFromInvoices,\n handleSwitchPaymentMethod,\n ]);\n\n const handleRequestPixQrCode = useCallback(() => {\n if (calledFromInvoices) {\n dispatch(\n invoicesActions.invoices.generatePix.request({\n invoiceId,\n callBackFuction: () => setLoadingInvoiceData(false),\n }),\n );\n }\n }, [\n dispatch,\n invoiceId,\n calledFromInvoices,\n ]);\n\n const getPayuBoletoProps = useCallback(() => {\n const onClick = () => {\n calledFromInvoices\n ? loadInvoiceData()\n : handleSwitchPaymentMethod();\n };\n\n return ({\n label: calledFromInvoices\n ? paymentModalLocale.paymentMethods.defaultContinue\n : paymentModalLocale.paymentMethods.defaultContinueChangeMethod,\n description: paymentModalLocale.paymentMethods.defaultDescription,\n loading: loadingInvoiceData || loadingSwitchPaymentMethod,\n onClick,\n selectedPaymentMethodOptions,\n setSelectedPaymentMethodCode,\n });\n }, [\n loadingSwitchPaymentMethod,\n paymentModalLocale,\n loadingInvoiceData,\n loadInvoiceData,\n selectedPaymentMethodOptions,\n calledFromInvoices,\n handleSwitchPaymentMethod,\n ]);\n\n const getPixProps = useMemo(() => () => {\n const onClick = () => {\n setLoadingInvoiceData(true);\n\n if (calledFromInvoices) {\n handleRequestPixQrCode();\n }\n\n if (calledFromSubscriptions) {\n handleSwitchPaymentMethod();\n }\n };\n\n return {\n label: calledFromInvoices\n ? paymentModalLocale.paymentMethods[PaymentMethodsTypes.PIX].label\n : paymentModalLocale.paymentMethods[PaymentMethodsTypes.PIX].labelChangePaymentMethod,\n description: calledFromInvoices\n ? paymentModalLocale.paymentMethods[PaymentMethodsTypes.PIX].description\n : null,\n loading: loadingInvoiceData || loadingSwitchPaymentMethod,\n onClick,\n selectedPaymentMethodOptions,\n setSelectedPaymentMethodCode,\n qrCode: invoicesState.qrCode,\n code: invoicesState.pixCode,\n securePixTransation: paymentModalLocale.paymentMethods[PaymentMethodsTypes.PIX].secureTransition,\n };\n }, [\n invoicesState,\n loadingInvoiceData,\n loadingSwitchPaymentMethod,\n selectedPaymentMethodOptions,\n calledFromInvoices,\n paymentModalLocale,\n calledFromSubscriptions,\n handleSwitchPaymentMethod,\n handleRequestPixQrCode,\n ]);\n\n const paymentMethodsRules = {\n [PaymentMethodsTypes.GP_BOLETO]: newPaymentModalOptions.gpBoleto && \n \n \n );\n }\n\n if (ticketData) {\n return (\n setTicketData(null)}\n digitableLine={ticketData.digitable_line}\n barCode={ticketData.barcode}\n saveTicketAsPDF={saveTicketAsPDF}\n printTicket={printTicket}\n labelsLocale={paymentModalLocale.paymentMethods[PaymentMethodsTypes.GP_BOLETO]}\n isLoading={loadingPrintTicket}\n />\n );\n }\n\n if (canDisplayInvoiceDetails && showInvoiceDetails && mobile) {\n return (\n {\n setShowInvoiceDetails(false);\n }}\n >\n \n \n \n );\n }\n\n if (!invoice && calledFromInvoices) {\n return (\n \n \n {Array.from({ length: 3 }).map(() => (\n \n \n {Array.from({ length: 5 }).map(() => (\n \n \n );\n }\n\n return (\n \n \n {calledFromSubscriptions && (\n \n {paymentModalLocale.descriptionSubscriptions}\n \n )}\n\n {shouldRenderInvoiceInfo && \n {paymentModalLocale.selectPaymentMethod}\n \n )}\n\n \n {formatedPaymentMethods.map(method => (\n method && method.content && (\n handleSelectPaymentMethod({\n key: method.key,\n options: method.options,\n method,\n })}\n >\n \n {method.content}\n \n \n )))}\n \n \n \n );\n };\n\n return {\n paymentModal,\n };\n};\n\nusePaymentModal.propTypes = {\n onClose: PropTypes.func,\n caller: PropTypes.string,\n handleUpgradeSitelock: PropTypes.func,\n};\n\nexport default usePaymentModal;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { SubscriptionList } from '@/components/billing';\nimport { Filter } from '@/pages/common/Filter';\nimport { billingAnalytics } from '@/analytics';\nimport * as Styles from './SubscriptionsHandler.styles';\nimport { subscriptionsLocale, subscriptionLocale } from './SubscriptionsHandler.locale';\nimport SubscriptionsFunctions from './SubscriptionsHandler.functions';\nimport { useSubscriptionsFilter } from '@/hooks/billing/subscriptions/useSubscriptionsFilter';\nimport { useSubscriptionsMessage } from '@/hooks/billing/subscriptions/useSubscriptionsMessage';\nimport GroupPaymentModal from '../GroupPaymentModal/GroupPaymentModal';\nimport { billingActions } from '@/redux/modules/billing';\nimport { OriginCalling } from '../PaymentModal/PaymentModal.types';\nimport { Modais } from '../ManageSubscriptionNewHandler/ManageSubscriptionNewHandler.types';\nimport { ReactivationModal } from '../ReactivationModal';\nimport { preChatActions } from '@/redux/modules';\nimport { useFeatureIsOn, useFeatureValue } from '@growthbook/growthbook-react';\nimport {\n CHARLIE_PAYMENT_MODAL_V2, XRAY_ENABLED_DISCOUNT_OFFER_BANNER, XRAY_ENABLED_NEW_LAYOUT_SUBSCRIPTIONS_PAGE, XRAY_LIMIT_DATE_TO_DISPLAY_SPLIT_PAYMENT_BANNER,\n} from '@/config/GrowthBook/constants';\nimport { PageTitle } from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { SplitPaymentOfferModal } from '@/components/Invoices/SplitPaymentOfferModal';\nimport { differenceInCalendarDays } from 'date-fns';\nimport { getCookie, setCookie } from '@/utils/Application/cookies';\nimport { usePaymentModal } from '@/hooks/billing/subscriptions/usePaymentModal';\nimport { loadInvoices } from '@/redux/actions/invoices';\nimport { CALLER } from '@/hooks/billing/subscriptions/usePaymentModal/usePaymentModal.types';\n\nconst SubscriptionHandler = (\n {\n enabledNewMessagesInSubscription = false,\n enabledModalPaymentInSubscriptionList = false,\n preChatState,\n },\n) => {\n const history = useHistory();\n const dispatch = useDispatch();\n\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n const billingReducer = useSelector(state => state.billing);\n const { subscriptions } = billingReducer;\n const { items: subscriptionsItems, loading: loadingSubscriptions } = subscriptions;\n const { modal } = useSelector(state => state.billing.subscriptions.cancel);\n const { triage } = useSelector(state => state.preChat);\n const [activateSubscription, setActivateSubscription] = useState(null);\n const [displayModalPayment, setDisplayModalPayment] = useState(false);\n const [displaySplitPaymentOfferModal, setDisplaySplitPaymentOfferModal] = useState(true);\n const [currentItem, setCurrentItem] = useState(null);\n const [trustReactivationInvoiceId, setTrustReactivationInvoiceId] = useState(null);\n const [modalById, setModalById] = useState(Modais.NONE);\n\n const enabledNewLayoutSubscriptionsPage = useFeatureIsOn(XRAY_ENABLED_NEW_LAYOUT_SUBSCRIPTIONS_PAGE);\n const enabledDiscountOfferBanner = useFeatureIsOn(XRAY_ENABLED_DISCOUNT_OFFER_BANNER);\n const toogleWithDate = useFeatureValue(XRAY_LIMIT_DATE_TO_DISPLAY_SPLIT_PAYMENT_BANNER);\n const enabledPaymentModalV2 = useFeatureIsOn(CHARLIE_PAYMENT_MODAL_V2);\n\n const canShowReactivationModal = () => modalById === Modais.ACTIVE_SUBSCRIPTION_REACTIVATION_MODAL;\n\n const limitDateValue = toogleWithDate && toogleWithDate.limitDate != null ? toogleWithDate.limitDate : null;\n const enabledInvoiceSplitPaymentBanner = limitDateValue !== null && differenceInCalendarDays(new Date(`${limitDateValue} 00:00:00`), new Date()) > 0;\n\n const { billing: billingLocale, routes: routesLocale } = useLocale();\n const { manageSubscription: manageSubscriptionLocale } = billingLocale;\n\n const handleLoadInvoices = useCallback(() => {\n dispatch(loadInvoices('Unpaid', false));\n }, [dispatch]);\n\n useEffect(() => {\n handleLoadInvoices();\n }, [handleLoadInvoices]);\n\n const {\n paymentModal,\n } = usePaymentModal({\n caller: CALLER.INVOICES,\n onClose: () => setDisplayModalPayment(false),\n invoiceId: currentItem && currentItem.invoiceId,\n });\n\n const {\n filteredItems,\n filterOptions,\n setFilterOptions,\n filterText,\n setFilterText,\n } = useSubscriptionsFilter({\n items: subscriptionsItems,\n });\n\n useEffect(() => {\n if (!loadingSubscriptions) {\n dispatch(billingActions.subscriptions.request());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [dispatch]);\n\n useEffect(() => {\n if (preChatState && preChatState.reactivationRedirect) {\n setTrustReactivationInvoiceId(preChatState.trustReactivationInvoiceId);\n setModalById(Modais.ACTIVE_SUBSCRIPTION_REACTIVATION_MODAL);\n }\n }, [preChatState]);\n\n const getReactivationModalProps = () => {\n const onCloseClick = () => {\n setModalById(Modais.NONE);\n };\n\n return {\n onCloseClick,\n invoiceId: trustReactivationInvoiceId,\n };\n };\n\n const onDisplayModalPayment = (currentItem) => {\n subscriptionAnalytics.executePaymentInSubscriptionsListClick('1_link_pagar_fatura_lista');\n setDisplayModalPayment(true);\n setCurrentItem(currentItem);\n };\n\n const decoratedItems = useSubscriptionsMessage(filteredItems,\n {\n enabledNewMessagesInSubscription, enabledModalPaymentInSubscriptionList, onDisplayModalPayment,\n });\n\n const messageEventHandlers = {\n onActiveRenewal: (subscription) => {\n subscriptionAnalytics.activeRenewalClick('lista');\n setActivateSubscription(subscription);\n },\n redirect: (subscription) => {\n const { url } = subscription.message;\n\n if (/^https?|^mailto:/.test(url)) {\n window.open(url, '_blank');\n } else {\n history.push(url);\n }\n },\n };\n\n const onMessageClick = (event, subscription) => {\n const { cancelType, substatus } = subscription;\n\n const isAnchor = () => event.target.nodeName.toLowerCase() === 'a';\n const isActiveRenewal = () => cancelType && ['active', 'registered', 'todue', 'toDue'].includes(substatus);\n\n if (!isAnchor()) return;\n\n if (isActiveRenewal()) {\n return messageEventHandlers.onActiveRenewal(subscription);\n }\n\n return messageEventHandlers.redirect(subscription);\n };\n const { enabledPaymentMethods } = useSelector(state => state.billing.paymentMethods);\n\n\n const fetchEnabledPaymentMethods = useCallback(() => {\n if (enabledPaymentMethods !== null) return;\n\n dispatch(billingActions.oldPaymentMethod.request());\n }, [dispatch, enabledPaymentMethods]);\n\n useEffect(() => {\n fetchEnabledPaymentMethods();\n }, [fetchEnabledPaymentMethods]);\n\n // Mount filtered options\n useEffect(() => {\n SubscriptionsFunctions.mountFilteredOptions(filterOptions, subscriptionsItems, setFilterOptions);\n }, [filterOptions, setFilterOptions, subscriptionsItems]);\n\n useEffect(() => {\n subscriptionAnalytics.subscriptionsPageView();\n }, [subscriptionAnalytics]);\n\n const openPreChatCancelFlow = useCallback(() => {\n if (triage.subscriptionToCancel) {\n dispatch(preChatActions.preChat.setShowPreChat(true));\n dispatch(preChatActions.subscription.setSubscriptionToCancel(null));\n }\n }, [triage, dispatch]);\n\n const handleActivateSubscription = (subscriptionInList) => {\n const subscription = { id: subscriptionInList.id, type: subscriptionInList.type };\n SubscriptionsFunctions.handleActivateSubscription(subscription, null);\n };\n\n\n const getFilterProps = () => {\n const defaultProps = {\n testId: 'filter-subscription',\n title: subscriptionsLocale.listTitle,\n filterLabel: subscriptionsLocale.filterLabel,\n filterChips: filterOptions,\n filterByPlaceholder: subscriptionsLocale.searchPlaceholderNewLayout,\n filterByValue: filterText,\n clearFilterLabel: subscriptionsLocale.clearLabel,\n handleClearFilter: () => SubscriptionsFunctions.clearFilter(filterOptions, setFilterOptions, setFilterText),\n };\n\n const clearOptions = () => {\n const newOptions = [...filterOptions].map((option) => {\n const newOption = { ...option };\n newOption.checked = false;\n return newOption;\n });\n return newOptions;\n };\n\n const handleChangeChip = (chip) => {\n const newOptions = clearOptions();\n\n const chipIndex = newOptions.findIndex(option => option.id === parseInt(chip.id, 10));\n\n if (!chip.checked) {\n newOptions[0].checked = true;\n }\n\n if (chip.checked) {\n newOptions[chipIndex].checked = true;\n }\n setFilterOptions(newOptions);\n };\n\n\n const handleChangeFilterBy = (text) => {\n setFilterText(text);\n };\n\n return {\n ...defaultProps,\n handleChangeFilterBy,\n handleChangeChip,\n };\n };\n const cookiePopupSplitPayment = getCookie('hg-modal-split-payment') !== 'false';\n\n\n const handleOnSplitPaymentsModalClose = () => {\n setDisplaySplitPaymentOfferModal(false);\n setCookie('hg-modal-split-payment', false);\n };\n\n return (\n <>\n\n {enabledInvoiceSplitPaymentBanner && displaySplitPaymentOfferModal && cookiePopupSplitPayment && (\n \n \n \n {!enabledNewLayoutSubscriptionsPage && (\n <>\n \n \n {subscriptionsLocale.listTitle}\n \n \n\n \n SubscriptionsFunctions.clearFilter(filterOptions, setFilterOptions, setFilterText)}\n searchPlaceholder={subscriptionsLocale.searchPlaceholder}\n clearLabel={subscriptionsLocale.clearLabel}\n onFilterClick={e => SubscriptionsFunctions.handleOnFilterClick(e)}\n />\n \n \n )}\n {enabledNewLayoutSubscriptionsPage && (\n \n \n )}\n \n \n SubscriptionsFunctions.handleCloseRenewModal(setActivateSubscription)}\n loading={loadingSubscriptions}\n onMessageClick={onMessageClick}\n modal={modal}\n modalActiveRenewalButtonLabel={subscriptionLocale.modalActiveRenewalButtonLabel}\n modalActiveRenewalContent={subscriptionLocale.modalActiveRenewalContent}\n modalActiveRenewalTitle={subscriptionLocale.modalActiveRenewalTitle}\n modalContent={subscriptionsLocale.modal}\n onHandleManageSubscription={e => SubscriptionsFunctions.onHandleManageSubscription(e, history)}\n onModalClose={() => SubscriptionsFunctions.handleOnModalClose()}\n overdueStatusLabel={subscriptionsLocale.overdueStatusLabel}\n pendingAnalysisStatusLabel={subscriptionsLocale.pendingAnalysisStatusLabel}\n pendingPaymentStatusLabel={subscriptionsLocale.pendingPaymentStatusLabel}\n pendingStatusLabel={subscriptionsLocale.pendingStatusLabel}\n registeredStatusLabel={subscriptionsLocale.registeredStatusLabel}\n subscriptions={decoratedItems}\n suspendedStatusLabel={subscriptionsLocale.suspendedStatusLabel}\n toDueStatusLabel={subscriptionsLocale.toDueStatusLabel}\n transferredAwayStatusLabel={subscriptionsLocale.transferredAwayStatusLabel}\n openPreChatCancelFlow={openPreChatCancelFlow}\n enabledNewLayoutSubscriptionsPage={enabledNewLayoutSubscriptionsPage}\n enabledDiscountOfferBanner={enabledDiscountOfferBanner}\n orderStatusLocale={manageSubscriptionLocale.orderUnderReview}\n routesLocale={routesLocale}\n readMoreStepper={manageSubscriptionLocale.readMoreStepper}\n />\n \n \n \n\n {enabledPaymentModalV2 && displayModalPayment && currentItem && paymentModal()}\n\n {!enabledPaymentModalV2 && currentItem && (\n \n \n \n {titleLabel} \n \n \n \n {version === 0 ? lessThanMonthDescriptionVersionLabel : moreThanMonthDescriptionVersionLabel}\n \n \n \n <>\n {version === 0 && (\n \n \n \n );\n};\n\n\nexport default AcceptedOfferSuccessModal;\n","import React, { useEffect, useState } from 'react';\nimport * as Styles from './RetentionOfferDiscountInNextRenew.styles';\nimport { useHistory, useParams } from 'react-router';\nimport useLocale from '@/hooks/useLocale';\nimport SnappyRetention from '@/media/subscriptions/retention/snappyGlass.svg';\nimport Star from '@/media/subscriptions/retention/star.svg';\n\nimport { Button, IconArrow, IconLoading } from 'gatorcomponents';\nimport { useBenefitParams } from '@/hooks/billing/subscriptions/useBenefitParams';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { useBenefitAnalytics } from '@/hooks/billing/subscriptions/useBenefitAnalytics';\nimport { useBenefitInvoice } from '@/hooks/billing/subscriptions/useBenefitInvoice';\nimport { AcceptedOfferSuccessModal } from '../AcceptedOfferSuccessModal';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport { billingAnalytics } from '@/analytics';\n\nconst RetentionOfferDiscountInNextRenew = ({\n loading = false,\n titleVersion = 0,\n reactivationData = null,\n currentItem = null,\n}) => {\n const dispatch = useDispatch();\n const history = useHistory();\n const { billing: billingLocale, routes: routesLocale } = useLocale();\n const { manageSubscriptionRetentionDiscountOffer } = billingLocale;\n const { retentionInfos } = useBenefitParams();\n const invoiceStatus = useSelector(state => state.billing.invoice);\n const { analyticsBenefitAccept, analyticsBenefitDecline } = useBenefitAnalytics(retentionInfos, true);\n const { retentionType } = useParams();\n const { getInvoiceInfos, invoiceIsLoading, publishInvoiceDraft } = useBenefitInvoice();\n const [isAcceptOffer, setAcceptOffer] = useState(false);\n const [version, setVersion] = useState(0);\n const params = useParams();\n const { loadingAcceptRetention } = useSelector(state => state.billing.subscriptions);\n\n const handleLoading = () => {\n if (invoiceIsLoading) {\n setVersion(invoiceStatus && invoiceStatus.draft ? 0 : 1);\n setAcceptOffer(true);\n }\n };\n\n useEffect(() => {\n handleLoading();\n }, [invoiceStatus]);\n\n if (!reactivationData) {\n history.push(`${routesLocale.subscriptions}`);\n return (<>);\n }\n\n const discountAmout = reactivationData && formatCurrency(reactivationData.discountAmount);\n const discountPercent = reactivationData && reactivationData.percent;\n\n\n const handleAcceptOfferButtonClick = () => {\n analyticsBenefitAccept();\n getInvoiceInfos(currentItem.id);\n };\n\n const handleCancelButtonClick = () => {\n analyticsBenefitDecline();\n const { subscriptionType, subscriptionId } = params;\n\n const cancelRenewalPath = `${routesLocale.manageSubscription}${routesLocale.cancelRenewal}/${subscriptionId}/${subscriptionType}`;\n const cancelImmediatePath = `${routesLocale.manageSubscription}${routesLocale.cancelSubscription}/${subscriptionId}/${subscriptionType}`;\n\n const nextStep = (retentionType.includes('renova') || params.path === 'renew')\n ? cancelRenewalPath\n : cancelImmediatePath;\n\n history.push(nextStep);\n };\n\n const getPaymentCycle = (cycle) => {\n switch (cycle) {\n case 'Monthly':\n return manageSubscriptionRetentionDiscountOffer.paymentCycle.Monthly;\n case 'Quarterly':\n return manageSubscriptionRetentionDiscountOffer.paymentCycle.Quarterly;\n case 'Annually':\n return manageSubscriptionRetentionDiscountOffer.paymentCycle.Annually;\n case 'Semi-Annually':\n return manageSubscriptionRetentionDiscountOffer.paymentCycle.SemiAnnually;\n case 'Biennially':\n return manageSubscriptionRetentionDiscountOffer.paymentCycle.Biennially;\n case 'Triennially':\n return manageSubscriptionRetentionDiscountOffer.paymentCycle.Triennially;\n case 'FreeAccount':\n return manageSubscriptionRetentionDiscountOffer.paymentCycle.FreeAccount;\n default:\n return '';\n }\n };\n\n const getDescriptionPlan = () => `${currentItem.productName} ${getPaymentCycle(currentItem.paymentCycle)}`;\n const {\n subscriptions: {\n acceptedOfferSuccessModalClose, acceptedOfferSuccessModalDisplay, acceptedOfferSuccessModalRenewalAfterOption, acceptedOfferSuccessModalRenewalNowOption, acceptedOfferSuccessModalPayNowOption,\n },\n } = billingAnalytics;\n\n const getAcceptedOfferSuccessModalProps = () => {\n const onCloseClick = () => {\n acceptedOfferSuccessModalClose();\n history.push(`${routesLocale.subscriptions}${routesLocale.manageSubscription}/${currentItem.id}/${currentItem.type}`);\n };\n\n const onBackAction = () => {\n acceptedOfferSuccessModalRenewalAfterOption();\n history.push(`${routesLocale.subscriptions}${routesLocale.manageSubscription}/${currentItem.id}/${currentItem.type}`);\n };\n\n const onDisplay = () => {\n acceptedOfferSuccessModalDisplay(invoiceStatus.draft);\n };\n\n const onAcceptAction = () => {\n if (invoiceStatus.draft === false) {\n acceptedOfferSuccessModalPayNowOption();\n history.push(`${routesLocale.invoices}${routesLocale.unpaid}/${invoiceStatus.invoiceId}?open_invoice=true`);\n } else {\n const executePayment = (enabledToPayment) => {\n enabledToPayment ? history.push(`${routesLocale.invoices}${routesLocale.unpaid}/${invoiceStatus.invoiceId}?open_invoice=true`)\n : dispatch(enqueueSnackbar(billingLocale.genericError));\n };\n\n acceptedOfferSuccessModalRenewalNowOption();\n publishInvoiceDraft({ invoiceId: invoiceStatus.invoiceId, executePayment });\n }\n };\n\n return {\n onBackAction,\n onDisplay,\n onCloseClick,\n invoiceId: currentItem.invoiceId,\n onAcceptAction,\n version,\n };\n };\n\n return (\n <>\n \n \n \n \n {loading && \n \n \n \n {titleVersion === 1 && (\n {manageSubscriptionRetentionDiscountOffer.retentionTitles[0]} \n )}\n {manageSubscriptionRetentionDiscountOffer.retentionTitles[titleVersion]} \n {manageSubscriptionRetentionDiscountOffer.discountDescription(discountPercent, titleVersion)} \n {manageSubscriptionRetentionDiscountOffer.benefitDescription(discountAmout, getDescriptionPlan())} \n
\n \n \n \n \n \n {manageSubscriptionRetentionDiscountOffer.benefitInfo} \n \n )}\n \n \n handleCancelButtonClick()}\n variant=\"text\"\n testId=\"retention-cancel-button\"\n iconRight={ \n \n {isAcceptOffer && (\n \n \n \n {description}\n \n \n \n );\n }\n\n return (\n \n \n {title && (\n \n {title}\n \n )}\n\n \n {icon && (\n \n {icon}\n \n )}\n\n {description && (\n \n {description}\n \n )}\n \n\n {actions && actions.length && (\n \n {actions.map(action => (\n \n )}\n \n \n );\n};\n\nexport default ModalContent;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport {\n Modal,\n} from '@/pages/common';\nimport {\n IconDanger, IconCheck,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale';\nimport { sitesAnalytics } from '@/analytics';\nimport { SSL_GA } from '@/components/Layout/Menu/MyAlerts/MyAlerts.types';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { AUTO_SSL_STATUS } from '@/enums/sites/status.enum';\nimport { sitesActions } from '@/redux/modules';\nimport { ModalAutoSslTypes } from './ModalAutoSSL.types';\nimport { ModalContent } from './components/ModalContent';\nimport { CART_URL } from '@/config';\nimport { useDiagnostic } from '@/components/Layout/Menu/MyAlerts';\n\nconst ModalAutoSSL = ({\n handleCloseModal,\n domainToConfigureSSL,\n initialStep = ModalAutoSslTypes.steps.SSL_AUTO_SSL_ACTIVATION,\n}) => {\n const { steps } = ModalAutoSslTypes;\n const [step, setStep] = useState(initialStep);\n const isLoading = step === steps.VERIFYING_PENDENCIES || step === steps.SSL_AUTO_SSL_ACTIVATION;\n const { sites: sitesLocale } = useLocale();\n const { ssl, sslVerification, sslConfigureDomain } = useSelector(state => state.sites);\n const dispatch = useDispatch();\n const { requestDiagnostic } = useDiagnostic();\n\n const closeModal = useCallback(() => {\n handleCloseModal && handleCloseModal();\n setStep(steps.SSL_AUTO_SSL_ACTIVATION);\n dispatch(sitesActions.ssl.clearStatus());\n }, [setStep, handleCloseModal, dispatch, steps]);\n\n const verifySSLProgress = useCallback(() => {\n dispatch(sitesActions.ssl.progress.request({ ...domainToConfigureSSL }));\n }, [\n dispatch,\n domainToConfigureSSL,\n ]);\n\n const callInitialRequest = useCallback(() => {\n if (initialStep === steps.SSL_AUTO_SSL_ACTIVATION) {\n dispatch(sitesActions.ssl.start.request(domainToConfigureSSL));\n }\n if (initialStep === steps.VERIFYING_PENDENCIES) {\n dispatch(sitesActions.ssl.verification.request(domainToConfigureSSL));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [dispatch, domainToConfigureSSL]);\n\n const verifyDomainStatus = useCallback(() => {\n if (sslVerification.loading) {\n setStep(steps.VERIFYING_PENDENCIES);\n return;\n }\n\n switch (sslVerification.status) {\n case AUTO_SSL_STATUS.EXTERNAL_NS:\n setStep(steps.EXTERNAL_NOT_POINTED);\n break;\n case AUTO_SSL_STATUS.CAN_CHANGE_A_RECORD:\n case AUTO_SSL_STATUS.REGISTERED:\n setStep(steps.INTERNAL_NOT_POINTED);\n break;\n case AUTO_SSL_STATUS.CAN_INSTALL_SSL:\n setStep(steps.SSL_AUTO_SSL_ERROR);\n break;\n case AUTO_SSL_STATUS.NOT_REGISTERED:\n setStep(steps.DOMAIN_NOT_REGISTERED);\n break;\n default:\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [sslVerification.loading]);\n\n const checkDomainConfiguration = useCallback(() => {\n if (sslConfigureDomain.status === 'success') {\n setStep(steps.INTERNAL_KEEP_IN_HG_SUCCESS);\n }\n if (sslConfigureDomain.status === 'error') {\n setStep(steps.INTERNAL_KEEP_IN_HG_FAIL);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [sslConfigureDomain.status]);\n\n const checkAutoSslProgress = useCallback(() => {\n const rules = {\n [AUTO_SSL_STATUS.START_SUCCESS]: () => setTimeout(verifySSLProgress, 60000),\n [AUTO_SSL_STATUS.START_FAILURE]: () => setStep(steps.SSL_AUTO_SSL_ERROR),\n [AUTO_SSL_STATUS.PROGRESS_FAILURE]: () => setStep(steps.SSL_AUTO_SSL_ERROR),\n [AUTO_SSL_STATUS.CHECK_SUCCESS]: () => setStep(steps.SSL_ACTIVATION_SUCCESS),\n [AUTO_SSL_STATUS.CHECK_FAILURE]: () => setStep(steps.SSL_ACTIVATION_ERROR),\n };\n\n rules[ssl.status] && rules[ssl.status]();\n }, [steps, verifySSLProgress, ssl.status]);\n\n const dispatchViewTags = useCallback(() => {\n if (step === steps.DOMAIN_NOT_REGISTERED) {\n sitesAnalytics.ssl.sslModal({ view: SSL_GA.REGISTER_DOMAIN.toLowerCase() });\n }\n\n if (step === steps.SSL_AUTO_SSL_ERROR) {\n sitesAnalytics.ssl.sslModal({ view: SSL_GA.ACTIVATION_ERROR.toLowerCase() });\n }\n\n if (step === steps.EXTERNAL_NOT_POINTED) {\n sitesAnalytics.ssl.sslModal({ view: SSL_GA.MODAL_TO_OTHER.toLowerCase() });\n }\n }, [step, steps]);\n\n useEffect(() => {\n if (ssl.callLoop > 0) {\n setTimeout(verifySSLProgress, 60000);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [ssl.callLoop]);\n\n useEffect(() => {\n callInitialRequest();\n }, [callInitialRequest]);\n\n useEffect(() => {\n if (initialStep === steps.VERIFYING_PENDENCIES) {\n verifyDomainStatus();\n }\n }, [verifyDomainStatus, initialStep, steps.VERIFYING_PENDENCIES, sslVerification.status]);\n\n useEffect(() => {\n checkDomainConfiguration();\n }, [checkDomainConfiguration]);\n\n useEffect(() => {\n checkAutoSslProgress();\n }, [checkAutoSslProgress]);\n\n useEffect(() => {\n dispatchViewTags();\n }, [dispatchViewTags]);\n\n const getModalContentProps = useCallback(() => {\n const startZendeskChat = () => {\n closeModal();\n };\n\n const retryStartAutoSSL = () => {\n dispatch(sitesActions.ssl.clearStatus());\n dispatch(sitesActions.ssl.start.request(domainToConfigureSSL));\n setStep(steps.SSL_AUTO_SSL_ACTIVATION);\n };\n\n const handlePointDomainToHg = () => {\n dispatch(sitesActions.ssl.pointDomain.request({ domain: domainToConfigureSSL.domain }));\n setStep(steps.INTERNAL_KEEP_IN_HG_LOADING);\n };\n\n const handleHowToConfigure = () => {\n sitesAnalytics.ssl.sslModal({ click: SSL_GA.MODAL_TO_OTHER });\n window.open(sitesLocale.sslModal.externalDomainNotPointed.materialUrl);\n };\n\n const handleRegisterDomain = () => {\n const splitedDomain = domainToConfigureSSL.domain.split('.');\n window.open(`${CART_URL}?pid=d&sld=${splitedDomain[0]}&tld=.${splitedDomain[1]}${splitedDomain[2] ? `.${splitedDomain[2]}` : ''}`);\n sitesAnalytics.ssl.sslModal({ click: SSL_GA.REGISTER_DOMAIN.toLocaleLowerCase() });\n };\n\n const handleActivationSuccess = () => {\n closeModal();\n requestDiagnostic('modalAutoSSl');\n };\n\n const rules = {\n [steps.SSL_AUTO_SSL_ACTIVATION]: {\n loading: true,\n description: sitesLocale.sslModal.loading,\n },\n [steps.VERIFYING_PENDENCIES]: {\n loading: true,\n description: sitesLocale.sslModal.verifyPendencyLoading,\n },\n [steps.INTERNAL_KEEP_IN_HG_LOADING]: {\n loading: true,\n description: sitesLocale.sslModal.internalDomainNotPointed.keepInHostgator.pointingDnsLoading,\n },\n [steps.SSL_AUTO_SSL_ERROR]: {\n title: sitesLocale.sslModal.autoSSL.error.title,\n icon: \n \n \n {sitesLocale.page.newAlerts[type][status].label({ daysForPayment, groupMainDomain })}\n \n\n {(type === 'ssl' ? showSSLModal : true) && sitesLocale.page.alerts[type][status].button && sitesLocale.page.alerts[type][status].button({\n handleClick,\n invoiceId,\n })}\n \n );\n\n return (\n \n {group.map(item => item.cpanel_domains && item.cpanel_domains.slice(0, (itemsPerPage * page)).map((cpanelItem) => {\n const tagRules = {\n is_main_domain: \n \n {isMain && tagRules.is_main_domain}\n {siteIsOffline && tagRules.site_offline}\n \n\n \n \n\n {dropdownActions.list.length > 0 && (\n \n \n )}\n\n \n {mountPropagationAlert()}\n \n \n );\n }))}\n\n {shouldRenderLoadMore() && (\n \n setPage(page + 1)}\n testId=\"loadMore\"\n label={loadMoreLabel}\n />\n \n )}\n \n ), [\n page,\n shouldRenderLoadMore,\n getDropdownActions,\n getMainActions,\n loadMoreLabel,\n mobile,\n propagationAlertLabels,\n propagationStatus,\n siteTagLabels,\n planStatus,\n handleClickEditSite,\n editSiteCta,\n loadingRedirect,\n ]);\n\n const handleToggle = (group) => {\n Cookies.set(`${group[0].hosting_id}-accordion-status`, !open);\n setOpen(!open);\n };\n\n const financialAlertProps = () => {\n const alertVariant = STATUS_ALERTS_VARIANTS.financial[planStatus];\n\n const defaultProps = {\n status: planStatus,\n type: 'financial',\n alertVariant,\n handleClick: handlePayInvoice,\n daysForPayment: closerPayment && closerPayment(planStatus, mainSite),\n newSitesAlert: true,\n groupMainDomain: group[0].domain,\n invoiceId: group[0].invoice.id,\n };\n\n return defaultProps;\n };\n\n const planNotification = () => {\n if (group[0].sub_status !== STATUS_TYPE.ACTIVE) {\n return (\n \n \n );\n }\n };\n\n const shouldrender = group[0].product_name;\n\n return (\n shouldrender && (\n mountAccordionItems(group)}\n width=\"full\"\n title={`${group[0].product_name}`}\n justifyContent=\"flex-start\"\n subtitle={hostCount({ group })}\n actions={actions(group, planStatus)}\n open={planStatus === STATUS_TYPE.SUSPENDED ? false : open}\n onToggleAccordion={() => handleToggle(group)}\n leftIcon=\"IconFile\"\n notification={planNotification()}\n loading={loading}\n allowToggle={planStatus !== STATUS_TYPE.SUSPENDED}\n actionsBreakpoint={1080}\n />\n )\n );\n};\n\nexport default withErrorBoundary(CardGroup, 'CardGroup');\n","import React, { useCallback } from 'react';\nimport * as Styles from './GroupedCards.styles';\nimport { IconLoading, Tag } from 'gatorcomponents';\nimport { CardGroup } from './components/CardGroup';\nimport { STATUS_TYPE } from '@/enums/sites/status.enum';\nimport withErrorBoundary from '@/utils/errorBoundary';\nimport { HgProducts } from '@/components/SupportForms/SupportForms.types';\nimport { cloudflareAnalytics } from '@/analytics/cloudflare';\n\nconst GroupedCards = ({\n groupedCards,\n propagationStatus,\n propagationAlertLabels,\n loadingCpanelSSOProductId,\n handleClickCpanel,\n cloudflareLabel,\n tagNewLabel,\n handleGoToCloudFlare,\n manageLabel,\n handleManage,\n getDropdownActions,\n getMainActions,\n loadMoreLabel,\n handlePayInvoice,\n closerPayment,\n loading,\n siteTagLabels,\n hostCount,\n emptyMessage,\n suspendedCpanelTooltip,\n handleEditSite,\n loadingRedirect,\n editSiteCta,\n}) => {\n const getCardGroupProps = useCallback((group) => {\n const defaultProps = {\n group,\n propagationStatus,\n propagationAlertLabels,\n getDropdownActions,\n getMainActions,\n loadMoreLabel,\n handlePayInvoice,\n closerPayment,\n loading,\n siteTagLabels,\n hostCount,\n handleEditSite,\n loadingRedirect,\n editSiteCta,\n };\n\n const handleAccessCpanel = (group) => {\n handleClickCpanel && handleClickCpanel(group);\n };\n\n const handleClickGoToCloudflare = (group) => {\n cloudflareAnalytics.sitesButton();\n handleGoToCloudFlare && handleGoToCloudFlare(group);\n };\n\n const actions = (group, planStatus) => {\n const actions = [];\n const canDisplayCloudflareButton = group[0].cloudflare_available\n && group[0].status.toLowerCase() === STATUS_TYPE.ACTIVE;\n\n const currentCpanelIsLoading = loadingCpanelSSOProductId === group[0].hosting_id;\n\n if (canDisplayCloudflareButton) {\n actions.push({\n label: (\n \n {cloudflareLabel}\n \n ),\n onClick: () => handleClickGoToCloudflare(group),\n testId: `cloudflare-${group[0].external_id}-cta`,\n });\n }\n\n if (HgProducts.SHARED_ALL.includes(group[0].package_id)\n ) {\n actions.push({\n label: currentCpanelIsLoading\n ? (\n <>\n \n {(groupedCards && groupedCards.length > 0) && groupedCards.map(group => (\n group && group.length && (\n \n {emptyMessage}\n \n )}\n \n );\n};\n\nexport default withErrorBoundary(GroupedCards, 'GroupedCards');\n","import styled, { css } from 'styled-components';\n\nexport const DomainsAlertsWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.neutral.highPure};\n margin-bottom: 16px;\n padding: 16px;\n\n a {\n font-size: inherit;\n }\n `}\n`;\n","import { differenceInCalendarDays, parseISO } from 'date-fns';\nimport { useCallback, useMemo } from 'react';\n\nconst useBillingStatus = () => {\n const today = useMemo(() => (new Date()), []);\n const limitNextDueDate = 30;\n const getIsDueDate = domain => (domain.isGracePeriod ? parseISO(domain.gracePeriodDueDate) : parseISO(domain.nextDueDate));\n const getIsOverDue = useCallback(domain => differenceInCalendarDays(parseISO(domain.nextDueDate), today) < 0 && !domain.isGracePeriod && domain.status === 'active', [today]);\n const getDateDiff = useCallback(dueDate => differenceInCalendarDays(dueDate, today), [today]);\n const getIsNextDueDate = useCallback(domain => getDateDiff(getIsDueDate(domain)) <= limitNextDueDate && domain.status === 'active' && !domain.isGracePeriod, [getDateDiff]);\n\n const getTagStatus = useCallback((domain) => {\n if (getIsNextDueDate(domain) && !getIsOverDue(domain)) {\n return 'nextDueDate';\n }\n if (getIsOverDue(domain)) {\n return 'overDueDate';\n }\n return domain.status;\n }, [getIsNextDueDate, getIsOverDue]);\n\n return {\n getTagStatus,\n getIsDueDate,\n getIsOverDue,\n getDateDiff,\n getIsNextDueDate,\n };\n};\n\nexport default useBillingStatus;\n","import React, { useCallback } from 'react';\nimport * as Styles from './DomainsAlerts.styles';\nimport { Alert, Skeleton } from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale';\nimport { useHistory } from 'react-router';\nimport { useBillingStatus } from '@/hooks/domains/useBillingStatus';\n\nconst DomainsAlerts = ({\n diagnostic,\n domains,\n}) => {\n const history = useHistory();\n const { routes: routesLocale, sites: sitesLocale } = useLocale();\n const { page: pageLocale } = sitesLocale;\n const { groupedPage: groupedPageLocale } = pageLocale;\n const { getTagStatus } = useBillingStatus();\n\n const domainsUrl = `${routesLocale.domains}`;\n const invoicesUrl = `${routesLocale.invoices}${routesLocale.unpaid}`;\n\n const mountAlerts = useCallback(() => {\n if (diagnostic.loading || domains.loading) {\n return (\n \n \n );\n }\n\n const hasExpired = domains.list.length && domains.list.find(domain => domain.status === 'expired' && domain.invoiceStatus === 'Unpaid');\n if (hasExpired) {\n return (\n \n \n );\n }\n\n const hasOverdue = domains.list.length && domains.list.find((domain) => {\n const status = getTagStatus(domain);\n return status === 'overDueDate' && domain.invoiceStatus === 'Unpaid';\n });\n if (hasOverdue) {\n return (\n \n \n );\n }\n\n const hasDnsProblem = domains.list.length && domains.list.find(domain => domain.status === 'registerError');\n if (hasDnsProblem) {\n return (\n \n \n );\n }\n\n const hasToDue = domains.list.length && domains.list.find((domain) => {\n const status = getTagStatus(domain);\n return status === 'nextDueDate' && domain.invoiceStatus === 'Unpaid';\n });\n if (hasToDue) {\n return (\n \n \n );\n }\n\n const hasPending = domains.list.length && domains.list.find(domain => domain.status === 'pending');\n if (hasPending) {\n return (\n \n \n );\n }\n\n return null;\n }, [\n groupedPageLocale,\n history,\n domains,\n diagnostic,\n domainsUrl,\n invoicesUrl,\n getTagStatus,\n ]);\n\n return (\n mountAlerts()\n );\n};\n\nexport default DomainsAlerts;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n margin: 16px 0px 16px 0px;\n padding: 24px;\n width: 100%;\n `}\n`;\n\nexport const Title = styled.text`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.medium};\n `}\n`;\n\n\nexport const Description = styled.text`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0em;\n line-height: ${theme.v2.font.lineHeight.text};\n text-align: left;\n `}\n`;\n\nexport const Text = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0em;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0;\n text-align: left;\n span {\n font-weight: bold;\n }\n `}\n`;\n\nexport const ContentCards = styled.div`\n${({ isOpen }) => css`\n display: flex;\n height: ${isOpen ? 'fit-content' : '0px'};\n margin-top: ${isOpen ? '2px' : '0px'};\n margin: ${isOpen ? '2px' : '0px'};\n opacity: ${isOpen ? '2px' : '0px'};\n overflow: auto;\n transition: 0.2s;\n `}\n`;\n\nexport const Header = styled.div`\n${({ theme, isOpen }) => css`\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n justify-content: space-between;\n margin-bottom: ${isOpen ? '24px' : '0px'};\n position: relative;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const Container = styled.div`\n align-items: center;\n display: grid;\n gap: 4px;\n width: 100 %;\n`;\n\nexport const ContentButtons = styled.div`\n${({ isOpen }) => css`\n border: none;\n cursor: pointer;\n display: flex;\n gap: 18px;\n outline: none;\n right: 24px;\n > button {\n > svg {\n transition: 0.2s ease-in-out;\n transform: ${isOpen ? 'rotate(-180deg)' : ''};\n }\n }\n}\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme, isChecked }) => css`\n background-color: ${theme.v2.colors.white.primary};\n border-radius: 4px;\n border: 2px solid ${isChecked ? theme.v2.colors.feedback.activeLight : theme.v2.colors.neutral.highMedium};\n height: 471px;\n margin: 0px 24px 0px 0px;\n width: 365px;\n min-width: 296px;\n`}\n`;\nexport const Content = styled.div`\n padding: 16px 24px 24px 24px;\n`;\n\nexport const Step = styled.text`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-style: normal;\n font-weight: ${theme.v2.font.weights.bold};\n line-height: normal;\n text-transform: uppercase;\n `}\n`;\n\nexport const IconCheck = styled.img`\n ${({ theme, disabled }) => css`\n color: ${theme.v2.colors.white.primary};\n\n &:hover {\n cursor: ${disabled ? 'not-allowed;' : 'pointer'};\n }\n `}\n`;\n\nexport const ContentIcon = styled.div`\n`;\n\nexport const ContentTitle = styled.div`\n ${({ theme }) => css`\n align-items: center;\n align-self: stretch;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n margin-bottom: 8px;\n `}\n`;\n\nexport const Description = styled.text`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0em;\n line-height: ${theme.v2.font.lineHeight.text};\n text-align: left;\n margin-top: 8px;\n width: 102%;\n `}\n`;\n\nexport const Text = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0em;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0;\n text-align: left;\n span {\n font-weight: bold;\n }\n `}\n`;\n\nexport const Logo = styled.img`\n ${({ theme }) => css`\n color: ${theme.v2.colors.white.primary};\n height: 48px;\n width: 48px;\n `}\n`;\n\nexport const Body = styled.div`\n${({ isOpen }) => css`\n height: ${isOpen ? 'fit-content' : '0px'};\n margin-top: ${isOpen ? '2px' : '0px'};\n opacity: ${isOpen ? '2px' : '0px'};\n overflow: hidden;\n padding: 0 24px 0 24px;\n transition: 0.2s;\n margin: ${isOpen ? '2px' : '0px'};\n `}\n`;\n\nexport const Header = styled.div`\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: space-between;\n margin-bottom: 8px;\n position: relative;\n margin-right: -8px;\n`;\n\nexport const Container = styled.div`\n align-items: center;\n display: grid;\n gap: 4px;\n width: 100 %;\n height: 40px;\n`;\n\nexport const ContentDescriptions = styled.div`\n${({ wasViewed }) => css`\n align-items: center;\n display: grid;\n gap: 4px;\n width: 100 %;\n height:${wasViewed ? '134px' : 'unset'};\n `}\n `;\n\n\nexport const ContentDisabledBlock = styled.div`\n${({ theme }) => css`\n align-items: center;\n background: ${theme.v2.colors.white.primary};\n display: flex;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n position: relative;\n bottom: 34px;\n padding: 0px 22px 0px 22px;\n `}\n `;\n\nexport const IconLock = styled.img`\n ${({ theme }) => css`\n color: ${theme.v2.colors.white.primary};\n margin-top: 16px;\n `}\n`;\n\nexport const BlockedText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.canceledMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin-top: 8px;\n text-align: center;\n `}\n`;\n\n\nexport const ContentButtons = styled.div`\n align-items: center;\n text-align: center;\n gap: 4px;\n margin: 16px 0px 16px 0px;\n\n & button {\n width: fit-content;\n }\n`;\n\nexport const ContentLinks = styled.div`\n${({ theme }) => css`\n display: grid;\n gap: 4px;\n margin-top: 16px;\n & a {\n color: ${theme.v2.colors.brand.primaryMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-style: normal;\n font-weight: ${theme.v2.font.weights.medium};\n line-height: normal;\n text-decoration-line: underline;\n }\n`}\n`;\n","import React, { useEffect, useState } from 'react';\nimport * as Styles from './WelcomeCheckListCard.styles';\nimport { Link } from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale';\nimport checkOn from '@/media/newsite/check_circle.svg';\nimport checkOff from '@/media/newsite/unchecked_circle.svg';\nimport lock from '@/media/newsite/lock.svg';\n\nconst WelcomeCheckListCard = ({\n testId = 'welcomecard',\n descriptions = [],\n button = null,\n links = [{ label: 'link', url: 'https://www.hostgator.com.br/' }],\n onClick = null,\n logo = null,\n title = 'Title',\n step = 1,\n wasViewed = false,\n isChecked = false,\n enabledCheckButton = false,\n welcomeChecklistBannerAnalytics = null,\n enabledUnCheckButton = false,\n}) => {\n const { sites: sitesLocale } = useLocale();\n const [isSelected, setSelected] = useState(false);\n\n useEffect(() => {\n setSelected(isChecked);\n }, [isChecked]);\n\n const handlerCheckStep = () => {\n if (enabledCheckButton && enabledUnCheckButton) {\n onClick && onClick(step, !isSelected);\n setSelected(!isSelected);\n }\n };\n\n const executeGA = (ga) => {\n if (welcomeChecklistBannerAnalytics) {\n switch (ga) {\n case 'clickVerifyDNS':\n welcomeChecklistBannerAnalytics.clickVerifyDNS();\n break;\n case 'clickConfigHostgatorDomain':\n welcomeChecklistBannerAnalytics.clickConfigHostgatorDomain();\n break;\n case 'clickConfigExternalDomain':\n welcomeChecklistBannerAnalytics.clickConfigExternalDomain();\n break;\n case 'clickEmailConfig':\n welcomeChecklistBannerAnalytics.clickEmailConfig();\n break;\n case 'clickWordpress':\n welcomeChecklistBannerAnalytics.clickWordpress();\n break;\n case 'clickVerifySSL':\n welcomeChecklistBannerAnalytics.clickVerifySSL();\n break;\n case 'clickLinkLadingPage':\n welcomeChecklistBannerAnalytics.clickLinkLadingPage();\n break;\n default:\n break;\n }\n }\n };\n\n return (\n \n \n \n \n \n {sitesLocale.welcomeChecklistBanner.header.step}\n {' '}\n {step}\n \n \n handlerCheckStep()} src={isSelected ? checkOn : checkOff} />\n \n\n \n \n\n {wasViewed && (\n \n {button}\n \n )}\n\n \n {descriptions.map((description, index) => ({description} ))}\n \n\n {wasViewed && (\n \n {links.map((data, index) => (\n \n )}\n\n \n\n {!wasViewed && (\n \n \n {sitesLocale.welcomeChecklistBanner.blockMessage}\n \n \n )}\n \n );\n};\n\nexport default WelcomeCheckListCard;\n","export const VERSION_BANNER = {\n START: 0,\n EDITION: 1,\n COMPLETED: 2,\n};\n","import React, { useEffect, useState } from 'react';\nimport * as Styles from './WelcomeCheckListBanner.styles';\nimport { Button, IconChevron } from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale';\nimport { WelcomeCheckListCard } from '../WelcomeCheckListCard';\nimport dnsStep from '@/media/newsite/icons-steps.svg';\nimport emailStep from '@/media/newsite/icon-email.svg';\nimport creatorStep from '@/media/newsite/icon-criador.svg';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useHistory } from 'react-router';\nimport { VERSION_BANNER } from './WelcomCheckListBannerTypes';\nimport { sitesActions } from '@/redux/modules';\nimport { steps } from '../../SitesHandler/SitesHandler.enum';\n\nconst WelcomeCheckListBanner = ({\n testId = 'Welcome-banner',\n open = false,\n originTypeBanner = 0,\n hostingId = null,\n listCheckedsLoaded = [],\n onCloseBanner = null,\n welcomeChecklistBannerAnalytics = null,\n}) => {\n const history = useHistory();\n const summary = useSelector(state => state.summary);\n const { sites: sitesLocale, routes: routesLocale } = useLocale();\n const [listCheckeds, setListCheckeds] = useState(listCheckedsLoaded);\n const [listViewed, setListViewed] = useState(listCheckedsLoaded);\n const [typeBanner, setTypeBanner] = useState(originTypeBanner);\n\n const [isOpen, setIsOpen] = useState(open);\n const dispatch = useDispatch();\n const isEnabledGA = welcomeChecklistBannerAnalytics;\n\n useEffect(() => {\n isEnabledGA && welcomeChecklistBannerAnalytics.showWelcomeCheckListBanner();\n }, [welcomeChecklistBannerAnalytics, isEnabledGA]);\n\n const handleOnToggleAccordion = (open) => {\n open && isEnabledGA ? welcomeChecklistBannerAnalytics.showChecklist() : welcomeChecklistBannerAnalytics.hideChecklist();\n\n setIsOpen(open);\n };\n\n const generateTitle = () => {\n switch (typeBanner) {\n case VERSION_BANNER.START:\n return sitesLocale.welcomeChecklistBanner.header.titleStart(summary.firstname);\n case VERSION_BANNER.EDITION:\n return sitesLocale.welcomeChecklistBanner.header.titleStart(summary.firstname);\n case VERSION_BANNER.COMPLETED:\n return sitesLocale.welcomeChecklistBanner.header.titleFinish;\n default:\n return '';\n }\n };\n\n const generateDescription = () => {\n switch (typeBanner) {\n case VERSION_BANNER.START:\n return sitesLocale.welcomeChecklistBanner.header.descriptions.start;\n case VERSION_BANNER.EDITION:\n return sitesLocale.welcomeChecklistBanner.header.descriptions.continue;\n case VERSION_BANNER.COMPLETED:\n return sitesLocale.welcomeChecklistBanner.header.descriptions.finish;\n default:\n return '';\n }\n };\n\n const createSite = () => {\n isEnabledGA && welcomeChecklistBannerAnalytics.clickCreateStore();\n history.push(`${routesLocale.sitesPage}${routesLocale.sitesCreate}`);\n };\n\n const createEmail = () => {\n isEnabledGA && welcomeChecklistBannerAnalytics.clickCreateEmail();\n history.push(`${routesLocale.emailsList}`);\n };\n\n const getTypeWelcomeChecklistTypeBanner = (listCheckeds) => {\n if (listCheckeds.length === 0) {\n return 0;\n }\n if (listCheckeds.length > 0 && listCheckeds.length < 3) {\n return 1;\n }\n return 2;\n };\n\n useEffect(() => {\n setTypeBanner(getTypeWelcomeChecklistTypeBanner(listCheckeds));\n\n listCheckeds.length > 2 && setIsOpen(false);\n }, [listCheckeds]);\n\n const executeGAInStep = (step) => {\n switch (step) {\n case 1:\n welcomeChecklistBannerAnalytics.checkStep1();\n break;\n case 2:\n welcomeChecklistBannerAnalytics.checkStep2();\n break;\n case 3:\n welcomeChecklistBannerAnalytics.checkStep3();\n break;\n default:\n break;\n }\n };\n\n const onCheckCard = (stepInt, isChecked) => {\n const step = `${stepInt}`;\n const data = {\n clientId: summary.id,\n hostingId,\n step,\n check: isChecked,\n };\n\n isChecked && isEnabledGA && executeGAInStep(stepInt);\n\n dispatch(sitesActions.upateStepWelcomeChecklist.request(data));\n\n if (step === steps.finishStep) {\n isEnabledGA && welcomeChecklistBannerAnalytics.noShowBanner();\n onCloseBanner && onCloseBanner(false);\n }\n\n if (!listCheckeds.includes(step) && step !== steps.finishStep) {\n setListCheckeds([...listCheckeds, step]);\n\n if (!listViewed.includes(step)) {\n setListViewed([...listViewed, step]);\n }\n }\n\n if (listCheckeds.includes(step) && !isChecked) {\n setListCheckeds(listCheckeds.filter(item => item !== step));\n }\n };\n\n const isChecked = (steps) => {\n let isChecked = false;\n steps.forEach((step) => {\n if (listCheckeds.includes(`${step}`) && !isChecked) {\n isChecked = true;\n }\n });\n\n return isChecked;\n };\n\n const isViewded = (steps) => {\n let isChecked = false;\n steps.forEach((step) => {\n if (listViewed.includes(`${step}`)) {\n isChecked = true;\n }\n });\n\n return isChecked;\n };\n\n const getWelcomeCheckListCardProps = () => {\n const props = [\n {\n testId: 'wclc-dns',\n descriptions: [sitesLocale.welcomeChecklistBanner.dnsCard.description1, sitesLocale.welcomeChecklistBanner.dnsCard.description2],\n links: [\n { dataLink: sitesLocale.welcomeChecklistBanner.dnsCard.link1, ga: 'clickVerifyDNS' },\n { dataLink: sitesLocale.welcomeChecklistBanner.dnsCard.link2, ga: 'clickConfigHostgatorDomain' },\n { dataLink: sitesLocale.welcomeChecklistBanner.dnsCard.link3, ga: 'clickConfigExternalDomain' },\n ],\n logo: dnsStep,\n step: 1,\n wasViewed: true,\n isChecked: isChecked([1]),\n enabledCheckButton: true,\n enabledUnCheckButton: !isChecked([2]),\n title: sitesLocale.welcomeChecklistBanner.dnsCard.title,\n },\n {\n testId: 'wclc-email',\n descriptions: [sitesLocale.welcomeChecklistBanner.emailCard.description1, sitesLocale.welcomeChecklistBanner.emailCard.description2],\n links: [\n { dataLink: sitesLocale.welcomeChecklistBanner.emailCard.link1, ga: 'clickEmailConfig' },\n ],\n logo: emailStep,\n button: ( createEmail()} />),\n step: 2,\n wasViewed: isViewded([1, 2]),\n isChecked: isChecked([2]),\n enabledCheckButton: isChecked([1]),\n enabledUnCheckButton: !isChecked([3]),\n title: sitesLocale.welcomeChecklistBanner.emailCard.title,\n },\n {\n testId: 'wclc-create-sites',\n descriptions: [sitesLocale.welcomeChecklistBanner.createSiteCard.description1, sitesLocale.welcomeChecklistBanner.createSiteCard.description2],\n links: [\n { dataLink: sitesLocale.welcomeChecklistBanner.createSiteCard.link1, ga: 'clickWordpress' },\n { dataLink: sitesLocale.welcomeChecklistBanner.createSiteCard.link2, ga: 'clickVerifySSL' },\n { dataLink: sitesLocale.welcomeChecklistBanner.createSiteCard.link3, ga: 'clickLinkLadingPage' },\n ],\n logo: creatorStep,\n button: ( createSite()} />),\n step: 3,\n wasViewed: isViewded([2, 3]),\n isChecked: isChecked([3]),\n enabledCheckButton: isChecked([1]) && isChecked([2]),\n enabledUnCheckButton: true,\n title: sitesLocale.welcomeChecklistBanner.createSiteCard.title,\n },\n ];\n return props;\n };\n\n const generateWelcomeCheckListCard = () => getWelcomeCheckListCardProps().map(e => { onCheckCard(step, isChecked); }} />);\n\n return (\n \n \n \n {generateTitle()} \n {generateDescription()} \n \n \n {typeBanner === VERSION_BANNER.COMPLETED && (\n onCheckCard(steps.finishStep, true)}\n label={sitesLocale.welcomeChecklistBanner.header.dontShowThisBanner}\n />\n )}\n \n \n\n \n {generateWelcomeCheckListCard()}\n \n \n );\n};\n\nexport default WelcomeCheckListBanner;\n","import styled, { css } from 'styled-components';\n\nexport const RefreshPageWrapper = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: 24px;\n justify-content: center;\n margin: 74px 85px 66px;\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n text-align: center;\n `}\n`;\n\nexport const IconWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.brand.primaryUltralight};\n border-radius: 100%;\n display: flex;\n height: 56px;\n justify-content: center;\n width: 56px;\n `}\n`;\n","import React from 'react';\nimport { Modal } from '@/pages/common';\nimport * as Styles from './useBlockedWindowModal.styles';\nimport { Button, IconRefreshPage } from 'gatorcomponents';\nimport useLocale from '../useLocale';\n\nexport const useBlockedWindowModal = () => {\n const handleOpen = ({ url, closeModal }) => {\n window.open(url, '_blank');\n closeModal && closeModal();\n };\n\n const { useBlockedWindowModal: useBlockedWindowModalLocale } = useLocale();\n\n const renderBlockedWindowModal = ({\n url,\n closeModal,\n }) => (\n \n \n \n \n\n \n {useBlockedWindowModalLocale.description}\n \n\n handleOpen({ url, closeModal })}\n size=\"large\"\n />\n \n \n );\n\n const useBlockedWindowModalData = {\n renderBlockedWindowModal,\n };\n\n return useBlockedWindowModalData;\n};\n\nexport default useBlockedWindowModal;\n","import styled, { css } from 'styled-components';\n\nexport const CardWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-width: 535px;\n padding: 24px;\n position: relative;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n padding 20px;\n }\n `}\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryExtraDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n max-width: 383px;\n z-index: 2;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n font-size: ${theme.v2.font.sizes.xs};\n max-width: 260px;\n }\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 8px 0px 0px 0px;\n max-width: 330px;\n z-index: 2;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n font-size: ${theme.v2.font.sizes.xxxs};\n max-width: 270px;\n }\n `}\n`;\n\nexport const SvgWrapper = styled.div`\n ${({ theme }) => css`\n bottom 18px;\n position: absolute;\n right: 0px;\n z-index: 1;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n right: -35px;\n }\n `}\n`;\n\n\nexport const ButtonWrapper = styled.div`\n max-width: 280px;\n`;\n","import React from 'react';\nimport * as Styles from './BannerCloudflare.styles';\nimport { Button } from 'gatorcomponents';\nimport { useResize } from '@/hooks/useResize';\nimport { useHistory } from 'react-router';\nimport useLocale from '@/hooks/useLocale';\nimport { cloudflareAnalytics } from '@/analytics/cloudflare';\n\nconst { default: RocketSvg } = require('./rocketSvg');\n\nconst BannerCloudflare = ({\n title = 'Deixe seu site mais rápido e seguro com a CDN da Cloudflare',\n description = 'Acelere o tempo de carregamento do seu site, proporcionando uma experiência mais rápida e satisfatória para os seus visitantes grátis.',\n buttonCta = 'Ir para desempenho de sites',\n cloudflareList,\n}) => {\n const history = useHistory();\n const { routes: routesLocale } = useLocale();\n const windowRect = useResize();\n const { width } = windowRect;\n const mobile = width < 600;\n\n const handleRedirect = () => {\n cloudflareAnalytics.bottomBannerCta();\n history.push(`${routesLocale.products}${routesLocale.cloudflare}/${cloudflareList[0].hosting_id}`);\n };\n\n return (\n \n {title} \n\n \n {description}\n \n\n \n \n\n \n \n \n );\n};\n\nexport default BannerCloudflare;\n","import styled, { css } from 'styled-components';\n\nexport const CardWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.brand.primaryExtraDark};\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 16px;\n padding: 16px 32px 0;\n position: relative;\n width: 100%;\n min-height: 80px;\n margin-bottom: 24px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n padding 20px;\n min-height: 196px;\n flex-direction: column;\n margin-bottom: 10px;\n gap: 0;\n align-items: flex-start;\n }\n `}\n`;\n\nexport const GradientBar = styled.div`\n width: 100%; \n height: 4px;\n position: absolute;\n bottom: 0;\n background: linear-gradient(90deg, #1D5297 0%, #FFCF00 9.63%, #2E93EE 19.15%, #F67922 28.15%, #2E93EE 39.33%, #FFE885 52.38%, #F67922 63.48%, #2E93EE 73.53%, #1D5297 82.76%, #FFCF00 91.23%, #F67922 100%);\n`;\n\nexport const SvgWrapper = styled.div`\n ${({ theme }) => css`\n margin-top: 0;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n display: none;\n }\n `}\n`;\n\nexport const DivText = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-wrap: wrap;\n padding-bottom: 16px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n flex-direction: column;\n width: 100%;\n margin-bottom: 14px;\n }\n `}\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.highPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n\n strong {\n color: ${theme.v2.colors.feedback.attentionPure};\n }\n \n @media (max-width: 720px) {\n font-size: ${theme.v2.font.sizes.xs};\n max-width: 80%;\n order: 1;\n margin-bottom: 4px;\n }\n\n @media (min-width: ${theme.v2.breakpoints.md} and max-width: ${theme.v2.breakpoints.lg}) {\n font-size: ${theme.v2.font.sizes.xxxs};\n }\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.canceledLight};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n font-size: ${theme.v2.font.sizes.xxxs};\n }\n\n @media (max-width: 720px) {\n font-size: ${theme.v2.font.sizes.xxxs};\n max-width: 80%;\n order: 2;\n }\n\n @media (min-width: ${theme.v2.breakpoints.md} and max-width: ${theme.v2.breakpoints.lg}) {\n font-size: ${theme.v2.font.sizes.xxxs};\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n max-width: 280px;\n padding-right: 30px;\n padding-bottom: 16px;\n`;\n\nexport const Span = styled.span`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.brand.primaryUltraLight};\n border-radius: 50px;\n color: ${theme.v2.colors.brand.primaryMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.medium};\n padding: 4px 8px;\n margin-left: 10px;\n\n @media (max-width: 960px) {\n order: 0;\n margin-left: 0;\n margin-right: 100%;\n margin-bottom: 5px;\n }\n\n @media (max-width: 1100px) {\n order: -1;\n margin-left: 0;\n margin-bottom: 5px;\n }\n `}\n`;\n\nexport const CloseButton = styled.div`\n${({ theme }) => css`\n position: absolute;\n right: 16px;\n padding-bottom: 16px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n order: 0;\n position: absolute;\n right: 16px;\n top: 16px;\n }\n `}\n`;\n","/* eslint-disable react/style-prop-object */\nimport React from 'react';\n\nconst SnappyPainter = () => (\n \n \n \n \n \n \n \n \n \n \n \n\n);\n\nexport default SnappyPainter;\n","import React from 'react';\nimport * as Styles from './LogoBuilder.styles';\nimport { Button, IconButton } from 'gatorcomponents';\nimport SnappyPainter from './snappyPainter';\nimport { useResize } from '@/hooks/useResize';\nimport { useHistory } from 'react-router';\nimport useLocale from '@/hooks/useLocale';\n\nconst LogoBuilder = ({ handleLogoBuilderBanner }) => {\n const windowRect = useResize();\n const { width } = windowRect;\n const mobile = width < 600;\n\n const history = useHistory();\n\n const { routes: routesLocale, sites: sitesLocale } = useLocale();\n\n const redirectToLogoBuilder = () => {\n history.push(routesLocale.logoBuilder);\n };\n\n return (\n \n \n \n\n \n \n {sitesLocale.infosLogoBuilder.title}\n\n \n\n Beta \n\n \n {sitesLocale.infosLogoBuilder.description}\n \n \n\n \n \n\n \n \n\n \n );\n};\n\nexport default LogoBuilder;\n","import FaqMySites from '@/components/FrequentlyQuestions/FaqMySites';\nimport { TrialActiveBannerInSites } from '@/pages/sites/components/TrialActiveBannerInSites';\nimport { TitanUpgradeBottomAdvertisementHandler } from '@/pages/titanAdvertisement/TitanUpgradeBottomAdvertisementHandler/';\nimport { TitanUpgradeToastHandler } from '@/pages/titanAdvertisement/TitanUpgradeToastHandler';\nimport { domainsActions, productsActions, sitesActions } from '@/redux/modules';\nimport React, {\n useCallback,\n useEffect,\n useState,\n} from 'react';\nimport { withI18n } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n useHistory,\n} from 'react-router-dom';\nimport { sitesPagesLocale } from './SitesHandler.locale';\nimport * as Styles from './SitesHandler.styles';\nimport { EmptyList } from '../components/EmptyList';\nimport { sitesHandlerGa } from '@/utils/ThirdParties/tagManager';\nimport { sitesAnalytics } from '@/analytics';\nimport useLocale from '@/hooks/useLocale';\nimport { useMountNotificationModal } from '@/hooks/sites/sitesList/useMountNotificationModal';\nimport { useMountEmptyList } from '@/hooks/sites/sitesList/useMountEmptyList';\nimport { useCardActions } from '@/hooks/sites/sitesList/useCardActions';\nimport { useCostumerPortalSurvey } from '@/hooks/surveys/useCostumerPortalSurvey';\nimport { FloatingSurvey } from '@/pages/FloatingSurvey';\nimport { SitesHandlerModals } from '../components/SitesHandlerModals';\nimport PageMessages from '@/pages/common/PageMessages';\nimport {\n Accordion,\n Button, PageTitle,\n} from 'gatorcomponents';\nimport {\n checklistProgressStatus, modalCloseAction, steps,\n} from './SitesHandler.enum';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { DiscountSaversBanner } from '@/components/billing';\nimport { DiscountOfferBanner } from '@/components/billing/subscriptions/DiscountOfferBanner';\nimport { DiscountType } from '@/components/billing/subscriptions/PaymentModal/PaymentModal.types';\nimport {\n CHARLIE_CLOUDFLARE_BANNER,\n CHARLIE_CPANEL_SSO_PORTAL,\n ENABLE_LOGO_BUILDER,\n FOXTROT_ECOMMERCE_PLUS_MODAL_TO_WIZARD,\n XRAY_ENABLED_DISCOUNT_OFFER_BANNER,\n XRAY_ENABLED_DISCOUNT_SAVERS,\n XRAY_ENABLED_WELCOME_CHECKLIST,\n} from '@/config/GrowthBook/constants';\nimport { STATUS_TYPE } from '@/enums/sites/status.enum';\nimport { ModalAutoSSL } from '../components/ModalAutoSSL';\nimport { ModalAutoSslTypes } from '../components/ModalAutoSSL/ModalAutoSSL.types';\nimport { MODAL_TYPE } from '@/hooks/sites/sitesList/useMountNotificationModal/useMountNotificationModal.enum';\nimport { useResize } from '@/hooks/useResize';\nimport { GroupedCards } from '../components/GroupedCards';\nimport { getURLCpanel } from '@/config/urls/cpanelUrls';\nimport { useCardActionsLocale } from '@/hooks/sites/sitesList/useCardActions/useCardActions.locale';\nimport { IconDetailedOtherSquare, IconDetailedSiteBuilder, IconDetailedWordpress } from '@/icons';\nimport { DomainsAlerts } from '../components/DomainsAlerts';\nimport logger from '@/utils/logger';\nimport { WelcomeCheckListBanner } from '../components/WelcomeCheckListBanner';\nimport { WHMCS_URL } from '@/config';\nimport { useBlockedWindowModal } from '@/hooks/useBlockedWindowModal';\nimport { BannerCloudflare } from './components/BannerCloudflare';\nimport { LogoBuilder } from './components/LogoBuilder';\n\nlet filterTimeout = null;\nconst SitesHandler = () => {\n const history = useHistory();\n const dispatch = useDispatch();\n const sites = useSelector(state => state.sites.list);\n const cloudflareList = sites.filter(site => site.cloudflare_available && site.status.toLowerCase() === 'active');\n const diagnostic = useSelector(state => state.preChat);\n const propagationStatus = useSelector(state => state.newDomains.propagationStatus);\n const [filteredSitesItems, setFilteredSitesItems] = useState(sites);\n const [blockedWindowUrl, setBlockedWindowUrl] = useState('');\n\n const { renderBlockedWindowModal } = useBlockedWindowModal();\n\n const products = useSelector(state => state.products);\n const loadedSites = useSelector(state => state.sites.loadedSites);\n const { allDomainsDnsStatus } = useSelector(state => state.sites);\n const loadingExclusion = useSelector(state => state.sites.loadingExclusion);\n const loadingRedirect = useSelector(state => state.sites.loadingRedirect);\n const loadingCPanelSSO = useSelector(state => state.products.cPanelLoading);\n const { available: logoBuilderAvailable, loading: logoBuilderLoading } = useSelector(state => state.logoBuilder);\n const { routes, sites: sitesLocale } = useLocale();\n const enabledDiscountOfferBanner = useFeatureIsOn(XRAY_ENABLED_DISCOUNT_OFFER_BANNER);\n const enabledDiscountSaversBanner = useFeatureIsOn(XRAY_ENABLED_DISCOUNT_SAVERS);\n const enabledEcommercePlusModalToWizard = useFeatureIsOn(FOXTROT_ECOMMERCE_PLUS_MODAL_TO_WIZARD);\n const enableCpanelSSO = useFeatureIsOn(CHARLIE_CPANEL_SSO_PORTAL);\n const withCloudflareBanner = useFeatureIsOn(CHARLIE_CLOUDFLARE_BANNER);\n const enableLogoBuilder = useFeatureIsOn(ENABLE_LOGO_BUILDER);\n\n const allEmails = useSelector(state => state.emails.proEmailList);\n const [shouldRenderToast, setShouldRenderToast] = useState(false);\n const [shouldRenderBottomBanner, setShouldRenderBottomBanner] = useState(false);\n const [bottomBannerVariant, setBottomBannerVariant] = useState('dark');\n const [advertisementType, setAdvertisementType] = useState('');\n const [showDnsInProgressModal, setShowDnsInProgressModal] = useState(false);\n const [dnsInProgressDomain, setDnsInProgressDomain] = useState('');\n const [shouldRenderNotificationModal, setShouldRenderNotificationModal] = useState(false);\n const [shouldRenderConfigureDomainModal, setShouldRenderConfigureDomainModal] = useState(false);\n const [modalWarningType, setModalWarningType] = useState('');\n const [modalDomains, setModalDomains] = useState([]);\n const [domainToConfigureSSL, setDomainToConfigureSSL] = useState({ domain: '', hostingId: 0 });\n const [sslModalInitialStep] = useState(ModalAutoSslTypes.steps.SSL_AUTO_SSL_ACTIVATION);\n const windowRect = useResize();\n const { width } = windowRect;\n const mobile = width < 600;\n const enabledWelcomeChecklist = useFeatureIsOn(XRAY_ENABLED_WELCOME_CHECKLIST) && !mobile;\n const enabledNewSiteModal = !enabledWelcomeChecklist;\n const [groupedCards, setGroupedCards] = useState([]);\n const domains = useSelector(state => state.newDomains);\n const [hostingId, setHostingId] = useState(null);\n const [domainsPage, setDomainsPage] = useState(1);\n const [justUpdatedDomains, setJustUpdatedDomains] = useState(false);\n\n const [hasAbleSiteToConfigure, setAbleSiteToConfigure] = useState(false);\n const summary = useSelector(state => state.summary);\n const { welcomeCheckListSteps } = useSelector(state => state.sites);\n const [welcomeChecklistCardData, setWelcomeChecklistCardData] = useState(null);\n const [listCheckedsLoaded, setListCheckedsLoaded] = useState([]);\n const [loadedWelcomeChecklistCardData, setLoadedWelcomeChecklistCardData] = useState(false);\n const [showLogoBuilder, setShowLogoBuilder] = useState(true);\n const {\n sitesWarningModal: sitesWarningModalAnalytics,\n ecommercePlusModal: ecommercePlusModalAnalytics,\n welcomeChecklistBanner: welcomeChecklistBannerAnalytics,\n } = sitesAnalytics;\n\n\n const generateListChecksLoaded = useCallback(() => {\n if (enabledWelcomeChecklist && welcomeChecklistCardData !== null) {\n welcomeChecklistCardData.map((item) => {\n if (item.completion_date && item.completion_date !== null && !listCheckedsLoaded.includes(item.step)) {\n listCheckedsLoaded.push(item.step);\n }\n return null;\n });\n setListCheckedsLoaded(listCheckedsLoaded);\n }\n }, [welcomeChecklistCardData, listCheckedsLoaded, setListCheckedsLoaded, enabledWelcomeChecklist]);\n\n const handleLogoBuilderBanner = () => {\n setShowLogoBuilder(false);\n };\n\n const verifyWelcomeCheckListInProgress = useCallback(() => {\n if (enabledWelcomeChecklist) {\n dispatch(sitesActions.welcomeChecklist.request({ clientId: summary.id, action: setLoadedWelcomeChecklistCardData }));\n }\n }, [dispatch, enabledWelcomeChecklist, summary.id]);\n\n const listHostingId = [];\n\n const hasWelcomeChecklistInProcess = () => {\n if (welcomeCheckListSteps.data.length === 0) {\n return false;\n }\n if (welcomeCheckListSteps.data.length === checklistProgressStatus.completed && welcomeCheckListSteps.data[3].step === steps.finishStep) {\n listHostingId.push(welcomeCheckListSteps.data[0].hosting_id);\n return false;\n }\n\n if (welcomeCheckListSteps.data.length > checklistProgressStatus.noStarted && welcomeCheckListSteps.data.length < checklistProgressStatus.completed) {\n setWelcomeChecklistCardData(welcomeCheckListSteps.data);\n return true;\n }\n\n if (welcomeCheckListSteps.data.length > checklistProgressStatus.completed) {\n welcomeCheckListSteps.data.filter(hosting => hosting.step === steps.finishStep)\n .forEach(hosting => listHostingId.push(hosting.hosting_id));\n const hostingsInProgress = welcomeCheckListSteps.data.filter(hosting => !listHostingId.includes(hosting.hosting_id));\n if (hostingsInProgress.length > 0) {\n setWelcomeChecklistCardData(hostingsInProgress);\n setHostingId(hostingsInProgress[0].hosting_id);\n return true;\n }\n return false;\n }\n\n return true;\n };\n\n const startWelcomeChecklistProcess = useCallback(() => {\n if (!hasWelcomeChecklistInProcess()) {\n const sitesEnabled = sites.filter(site => site.show_new_site_warning === true && site.status_plan === 'active' && !listHostingId.includes(site.external_id));\n if (sitesEnabled.length > 0) {\n const externalId = sitesEnabled[0].external_id;\n\n setHostingId(externalId);\n setAbleSiteToConfigure(true);\n\n const data = {\n clientId: summary.id,\n hostingId: externalId,\n step: 1,\n check: false,\n };\n\n dispatch(sitesActions.upateStepWelcomeChecklist.request(data));\n }\n } else {\n !hostingId && setHostingId(welcomeCheckListSteps.data[0].hosting_id);\n const hostingsInProgress = welcomeCheckListSteps.data.filter(hosting => !listHostingId.includes(hosting.hosting_id));\n\n if (hostingsInProgress.length > 3 && hostingsInProgress[3].step === steps.finishStep) {\n setAbleSiteToConfigure(false);\n } else {\n setAbleSiteToConfigure(true);\n }\n }\n }, [sites, dispatch, summary.id, welcomeCheckListSteps]);\n\n useEffect(() => {\n verifyWelcomeCheckListInProgress();\n }, [verifyWelcomeCheckListInProgress]);\n\n useEffect(() => {\n generateListChecksLoaded();\n }, [generateListChecksLoaded]);\n\n useEffect(() => {\n loadedWelcomeChecklistCardData && startWelcomeChecklistProcess();\n }, [startWelcomeChecklistProcess, loadedWelcomeChecklistCardData]);\n\n const {\n eligibleForTitanUpgrade,\n eligibleDomainOptions,\n } = useSelector(state => state.emails);\n\n const [displayModalTitanAdvertisementHandler, setDisplayModalTitanAdvertisementHandler] = useState(false);\n const [linkOptions, setLinkOptions] = useState([]);\n\n const domainWithoutEmail = allEmails.filter(item => item.type === 'domain' && !!item.domain && item.status === 'Active');\n const openInNewTabClick = url => window.open(url, '_blank').focus();\n const { mountEmptyOptions } = useMountEmptyList(products.owned);\n const openWordpressLink = domain => openInNewTabClick(`https://${domain}/wp-admin`);\n\n const {\n survey,\n handleFinishSurvey,\n surveyQuestionsAnswered,\n setSurveyQuestionsAnswered,\n shouldRenderSurvey,\n shouldRenderOpened,\n handleSendQuestion,\n handleStartSurvey,\n handleClose,\n handleJumpQuestion,\n } = useCostumerPortalSurvey();\n\n const {\n filterCards,\n mountDescription,\n getDropdownActions,\n getMainActions,\n siteInExclusion,\n setSiteInExclusion,\n filteredOptions,\n setFilteredOptions,\n filterTyped,\n setFilterTyped,\n clearFilter,\n button,\n displayCreateSiteBanner,\n filterCanceledSites,\n groupByExternalId,\n loadingCpanelSSOProductId,\n setLoadingCpanelSSOProductId,\n } = useCardActions({\n history,\n loadingExclusion,\n loadingCPanelSSO,\n routesLocale: routes,\n allDomainsDnsStatus,\n setShowDnsInProgressModal,\n openWordpressLink,\n setDnsInProgressDomain,\n });\n\n const groupCards = useCallback(() => {\n if (filteredSitesItems && filteredSitesItems.length) {\n const group = groupByExternalId(filteredSitesItems);\n setGroupedCards(group);\n }\n }, [filteredSitesItems, groupByExternalId]);\n\n useEffect(() => {\n groupCards();\n }, [groupCards]);\n\n const modalInfo = useMountNotificationModal({ sites, enabledEcommercePlusModalToWizard });\n\n const callFilterCards = useCallback(() => {\n clearTimeout(filterTimeout);\n filterTimeout = setTimeout(() => {\n if (sites.length) {\n const filtered = filterCards(filteredOptions, filterTyped, sites, propagationStatus);\n setFilteredSitesItems(filtered);\n }\n }, 150);\n }, [filteredOptions, filterTyped, sites, filterCards, propagationStatus]);\n\n useEffect(() => {\n callFilterCards();\n }, [callFilterCards]);\n\n const handleCloseConfigureDomainModal = useCallback(() => {\n setShouldRenderConfigureDomainModal(false);\n }, []);\n\n const handleOnCloseWarningModal = useCallback((action) => {\n sitesWarningModalAnalytics.modalWarningClick(modalWarningType, action);\n setShouldRenderNotificationModal(false);\n dispatch(sitesActions.warnings.set());\n const routeWizardWithDomainSelected = `${sitesPagesLocale.routeSitesPages}${sitesPagesLocale.routesNewSite}/${modalDomains}`;\n\n if (action === modalCloseAction.createSite && modalWarningType === MODAL_TYPE.NEWSITE) {\n history.push(routeWizardWithDomainSelected);\n }\n\n if (action === modalCloseAction.createSite && modalWarningType === MODAL_TYPE.ECOMMERCEPLUS) {\n history.push(`${routeWizardWithDomainSelected}/ecommerceplus`);\n }\n }, [\n dispatch,\n setShouldRenderNotificationModal,\n modalWarningType,\n history,\n sitesWarningModalAnalytics,\n modalDomains,\n ]);\n\n const setEmptyOptions = useCallback(() => {\n const options = mountEmptyOptions(products.owned);\n setLinkOptions(options);\n }, [mountEmptyOptions, products.owned]);\n\n useEffect(() => {\n setEmptyOptions();\n }, [setEmptyOptions]);\n\n const requestSitesHandlerData = useCallback(() => {\n dispatch(productsActions.products.request({ history: null }));\n dispatch(sitesActions.sites.request());\n dispatch(sitesActions.force.reload(false));\n dispatch(productsActions.products.requestAll());\n dispatch(domainsActions.domains.request({ page: domainsPage }));\n dispatch(sitesActions.allDomainsDnsStatusCheck.request());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [dispatch]);\n\n const shouldRequestNewDomainsPage = useCallback(() => {\n const hasDomains = domains.list.length > 0;\n const hasMoreDomainsPages = domains.list.length < domains.listTotal;\n const isLoadingDomains = domains.loading;\n\n if (hasDomains && hasMoreDomainsPages && !isLoadingDomains && !justUpdatedDomains) {\n setDomainsPage(domainsPage + 1);\n setJustUpdatedDomains(true);\n }\n }, [\n domains.loading,\n domains.list,\n domains.listTotal,\n domainsPage,\n justUpdatedDomains,\n ]);\n\n useEffect(() => {\n shouldRequestNewDomainsPage();\n }, [shouldRequestNewDomainsPage]);\n\n const requestDomainsPage = useCallback(() => {\n if (justUpdatedDomains) {\n dispatch(domainsActions.domains.request({ page: domainsPage }));\n setJustUpdatedDomains(false);\n }\n }, [domainsPage, dispatch, justUpdatedDomains]);\n\n useEffect(() => {\n requestDomainsPage();\n }, [requestDomainsPage]);\n\n useEffect(() => {\n requestSitesHandlerData();\n }, [requestSitesHandlerData]);\n\n const setModalData = useCallback(() => {\n setModalWarningType(modalInfo.modalType);\n setModalDomains(modalInfo.domainsToShow);\n setShouldRenderNotificationModal(modalInfo.shouldRender);\n }, [modalInfo]);\n\n useEffect(() => {\n setModalData();\n }, [setModalData]);\n\n useEffect(() => {\n const filteredCanceledSites = filterCanceledSites(sites);\n mountDescription({\n filteredCanceledSites,\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [sites, mountDescription]);\n\n const setTitanAdvertisementByTestType = (type) => {\n switch (type) {\n case 'toast':\n setShouldRenderToast(true);\n setAdvertisementType('Toast');\n break;\n case 'bottom_banner_dark':\n setShouldRenderBottomBanner(true);\n setAdvertisementType('Banner Dark');\n setBottomBannerVariant('dark');\n break;\n case 'bottom_banner_light':\n setShouldRenderBottomBanner(true);\n setAdvertisementType('Banner Light');\n setBottomBannerVariant('light');\n break;\n default:\n break;\n }\n };\n\n useEffect(() => {\n setTitanAdvertisementByTestType('top_banner');\n }, []);\n\n const toolsList = () => {\n const iconsSize = mobile ? 20 : 26;\n\n return [\n {\n title: sitesPagesLocale.createSiteBanner.tools.wordpress,\n name: 'wordpress',\n icon: \n \n \n {displayCreateSiteBanner && (\n \n \n {toolsList().map(tool => (\n \n {tool.icon}\n \n {tool.title}\n \n \n ))}\n \n \n )}\n \n {sitesLocale.page.title} \n \n {sitesLocale.page.description}\n \n {displayCreateSiteBanner && \n \n {filterCanceledSites(sites).length > 5 && (\n \n \n )}\n \n \n ), [sites, displayCreateSiteBanner, getFilterProps]);\n\n\n const getGroupedCardsProps = useCallback(() => {\n const defaultProps = {\n editSiteCta: sitesLocale.page.editSiteCta,\n groupedCards,\n propagationStatus,\n propagationAlertLabels: sitesLocale.page.newAlerts.propagation,\n loadingCpanelSSOProductId,\n manageLabel: useCardActionsLocale.manageSite,\n cloudflareLabel: useCardActionsLocale.cloudflareSite,\n tagNewLabel: sitesLocale.page.tagNew,\n getDropdownActions,\n getMainActions,\n loadMoreLabel: sitesLocale.page.seeMoreButton,\n loading: !loadedSites,\n siteTagLabels: sitesLocale.page.tags,\n emptyMessage: sitesLocale.page.emptyState,\n suspendedCpanelTooltip: sitesLocale.page.suspendedCpanelTooltip,\n loadingRedirect,\n };\n\n const handlePayInvoice = (id) => {\n try {\n const unpaidInvoicePath = `${routes.invoices}${routes.unpaid}/${id}`;\n history.push(unpaidInvoicePath);\n } catch (e) {\n logger.error('Error on SitesHandler - method handlePayInvoice', e);\n }\n };\n\n const closerPayment = (financialStatus, siteItem) => {\n try {\n if (financialStatus === STATUS_TYPE.SUSPENDED && siteItem) {\n return siteItem.days_to_cancel_plan >= siteItem.days_to_cancel_domain ? siteItem.days_to_cancel_domain : siteItem.days_to_cancel_plan;\n }\n if (financialStatus === STATUS_TYPE.OVERDUE && siteItem) {\n return siteItem.days_to_suspend_plan >= siteItem.days_to_suspend_domain ? siteItem.days_to_suspend_domain : siteItem.days_to_suspend_plan;\n }\n } catch (e) {\n logger.error('Error on SitesHandler - method closerPayment', e);\n }\n };\n\n const handleGoToCloudFlare = (group) => {\n const hostingId = group[0].hosting_id;\n\n history.push(`${routes.products}${routes.cloudflare}/${hostingId}`);\n };\n\n const handleClickCpanel = (group) => {\n try {\n sitesHandlerGa({\n gaEventAction: 'cPanel',\n gaEventLabel: '',\n });\n if (setBlockedWindowUrl) {\n getURLCpanel({\n externalId: group[0].hosting_id,\n params: null,\n openInNewTab: true,\n dispatch,\n enableCpanelSSO,\n setLoadingCpanelSSOProductId,\n setBlockedWindowUrl,\n });\n }\n setLoadingCpanelSSOProductId(group[0].hosting_id);\n } catch (e) {\n logger.error('Error on SitesHandler - method handleClickCpanel', e);\n }\n };\n\n const handleManage = (group) => {\n try {\n sitesHandlerGa({\n gaEventAction: 'Gerenciar hospedagem',\n gaEventLabel: '',\n });\n history.push(`${routes.products}${routes.productdetail}/${group[0].hosting_id}`);\n } catch (e) {\n logger.error('Error on SitesHandler - method handleManage', e);\n }\n };\n\n const hostCount = ({\n group,\n }) => sitesLocale.page.hostCount({\n group,\n });\n\n const handleEditSite = ({\n domain,\n hostingId,\n }) => {\n if (setBlockedWindowUrl) {\n dispatch(sitesActions.site.redirectToEdit({\n domain,\n hostingId,\n history,\n siteBuilderUrl: domain => `${useCardActionsLocale.routeWebsitebuilderRedirectAccess}/${domain}`,\n sitesWizardUrl: `${routes.sitesPage}${routes.sitesCreate}`,\n webPresenceUrl: `${WHMCS_URL}/index.php?m=webpresence&action=edit&hosting_id=`,\n cpanelUrl: ({ hostingId, softaculous }) => {\n if (softaculous) {\n const url = `${getURLCpanel({ externalId: hostingId, enableCpanelSSO })}&app=Softaculous_Home`;\n const newWindow = window.open(url, '_blank');\n if (!newWindow || newWindow.closed || typeof newWindow.closed === 'undefined') {\n setBlockedWindowUrl(url);\n }\n }\n\n if (!softaculous) {\n getURLCpanel({\n externalId: hostingId,\n params: softaculous ? '&app=Softaculous_Home' : null,\n openInNewTab: true,\n dispatch,\n enableCpanelSSO,\n setBlockedWindowUrl,\n });\n }\n },\n }));\n }\n };\n\n return {\n ...defaultProps,\n handleClickCpanel,\n handleManage,\n handlePayInvoice,\n closerPayment: (financialStatus, siteItem) => closerPayment(financialStatus, siteItem),\n hostCount,\n handleEditSite,\n handleGoToCloudFlare,\n };\n }, [\n loadingRedirect,\n groupedCards,\n dispatch,\n setLoadingCpanelSSOProductId,\n loadingCpanelSSOProductId,\n history,\n routes,\n getDropdownActions,\n getMainActions,\n sitesLocale,\n loadedSites,\n propagationStatus,\n enableCpanelSSO,\n setBlockedWindowUrl,\n ]);\n\n const handleCloseBlockedWindowModal = useCallback(() => {\n setBlockedWindowUrl(false);\n }, []);\n\n const getDomainsAlertrsProps = useCallback(() => {\n const defaultProps = {\n diagnostic,\n domains,\n };\n\n return {\n ...defaultProps,\n };\n }, [\n diagnostic,\n domains,\n ]);\n\n if (!loadedSites || products.listLoading || !products.listLoaded || logoBuilderLoading) {\n return (\n \n {mountFilter}\n\n null}\n leftIcon=\"IconFile\"\n loading\n loadingActionItems={mobile ? 0 : 2}\n loadingTitleWidth=\"333px\"\n loadingListItems={5}\n />\n \n );\n }\n\n const getTypeWelcomeChecklistTypeBanner = () => {\n if (listCheckedsLoaded.length === 0) {\n return 0;\n }\n if (listCheckedsLoaded.length > 0 && listCheckedsLoaded.length < 3) {\n return 1;\n }\n return 2;\n };\n\n const getWelcomeCheckListBannerProps = () => ({\n open: listCheckedsLoaded.length < 3,\n hostingId,\n listCheckedsLoaded,\n setListCheckedsLoaded,\n originTypeBanner: getTypeWelcomeChecklistTypeBanner(),\n onCloseBanner: e => setAbleSiteToConfigure(e),\n welcomeChecklistBannerAnalytics,\n });\n\n const getDiscountOfferBannerProps = () => ({\n subscription,\n origin: 'sites',\n hasMoreThanDiscountSubscription,\n });\n\n const shouldRenderWelcomeChecklistBanner = enabledWelcomeChecklist && hasAbleSiteToConfigure;\n const shouldRenderDiscountOfferBanner = enabledDiscountOfferBanner && (subscription !== null || hasMoreThanDiscountSubscription);\n const shouldRenderDiscountSaversBanner = enabledDiscountSaversBanner && invoicesWithSaversDiscount.length > 0;\n const shouldRenderLogoBuilderBanner = enableLogoBuilder && logoBuilderAvailable && showLogoBuilder;\n\n return (\n <>\n {(!!blockedWindowUrl) && (\n renderBlockedWindowModal({ url: blockedWindowUrl, closeModal: handleCloseBlockedWindowModal })\n )}\n\n {shouldRenderSurvey && (\n \n \n )}\n\n \n {shouldRenderLogoBuilderBanner && (\n 1 ? null : invoicesWithSaversDiscount[0]}\n />\n )}\n\n {mountFilter}\n\n \n \n )}\n\n {filterCanceledSites(sites).length\n ? \n \n \n \n\n \n \n );\n};\n\nexport default withI18n()(SitesHandler);\n","import React from 'react';\nimport { locale } from '@/utils/locale';\nimport { COUNTRY } from '@/config';\n\nexport const sitesBuilderLocale = {\n routeSitesPage: locale('routes.sitesPage'),\n altSnappy: locale('sitesWizard.altSnappy'),\n altColorLine: locale('sitesWizard.altColorLine'),\n};\n\nexport const wizardLocale = {\n wizardStepConfigurations: locale('sitesWizard.steps.configurations'),\n wizardStepAbout: locale('sitesWizard.steps.about'),\n wizardStepTools: locale('sitesWizard.steps.tools'),\n wizardStepTips: locale('sitesWizard.steps.tips'),\n backButton: locale('sitesWizard.actions.backButton'),\n backHome: locale('sitesWizard.actions.backHome'),\n routeSitesPage: locale('routes.sitesPage'),\n continueButton: locale('sitesWizard.actions.continue'),\n showMore: locale('sitesWizard.actions.showMore'),\n showLess: locale('sitesWizard.actions.showLess'),\n about: {\n title: (\n <>\n {locale('sitesWizard.about.title.0')}\n {{locale('sitesWizard.about.title.1')} }\n \n ),\n subtitle: locale('sitesWizard.about.subtitle'),\n question: locale('sitesWizard.about.question'),\n questionTooltip: locale('sitesWizard.about.questionTooltip'),\n defaultOptions: {\n institucionalTitle: locale('sitesWizard.about.institucional.title'),\n institucionalSubtitle: locale('sitesWizard.about.institucional.subtitle'),\n personalTitle: locale('sitesWizard.about.personal.title'),\n blogTitle: locale('sitesWizard.about.blog.title'),\n ecommerceTitle: locale('sitesWizard.about.ecommerce.title'),\n ecommerceSubtitle: locale('sitesWizard.about.ecommerce.subtitle'),\n landingTitle: locale('sitesWizard.about.landing.title'),\n landingSubtitle: locale('sitesWizard.about.landing.subtitle'),\n otherTitle: locale('sitesWizard.about.other.title'),\n },\n objectivesQuestion: locale('sitesWizard.about.objectives.question'),\n objectivesTooltip: locale('sitesWizard.about.objectives.tooltip'),\n objectivesPlaceholder: locale('sitesWizard.about.objectives.placeholder'),\n defaultObjectives: {\n goodSite: locale('sitesWizard.about.objectives.defaultObjectives.goodSite'),\n visibility: locale('sitesWizard.about.objectives.defaultObjectives.visibility'),\n access: locale('sitesWizard.about.objectives.defaultObjectives.access'),\n prospection: locale('sitesWizard.about.objectives.defaultObjectives.prospection'),\n results: locale('sitesWizard.about.objectives.defaultObjectives.results'),\n satisfaction: locale('sitesWizard.about.objectives.defaultObjectives.satisfaction'),\n other: locale('sitesWizard.about.objectives.defaultObjectives.other'),\n },\n othersSitesModal: {\n title: locale('sitesWizard.about.othersSitesModal.title'),\n placeholder: locale('sitesWizard.about.othersSitesModal.placeholder'),\n back: locale('sitesWizard.about.othersSitesModal.back'),\n save: locale('sitesWizard.about.othersSitesModal.save'),\n },\n othersObjectivesModal: {\n title: locale('sitesWizard.about.othersObjectivesModal.title'),\n placeholder: locale('sitesWizard.about.othersObjectivesModal.placeholder'),\n back: locale('sitesWizard.about.othersObjectivesModal.back'),\n save: locale('sitesWizard.about.othersObjectivesModal.save'),\n },\n },\n tools: {\n title: {\n default: locale('sitesWizard.tools.title.0'),\n ecommerce: locale('sitesWizard.tools.title.ecommerce'),\n ecommercePlus: locale('sitesWizard.tools.title.ecommercePlus'),\n institucional: locale('sitesWizard.tools.title.institucional'),\n personal: locale('sitesWizard.tools.title.personal'),\n blog: locale('sitesWizard.tools.title.blog'),\n landing: locale('sitesWizard.tools.title.landing'),\n other: locale('sitesWizard.tools.title.other'),\n },\n subtitle: {\n ecommerce: locale('sitesWizard.tools.subtitle.ecommerce'),\n ecommercePlus: locale('sitesWizard.tools.subtitle.ecommercePlus'),\n institucional: locale('sitesWizard.tools.subtitle.institucional'),\n personal: locale('sitesWizard.tools.subtitle.personal'),\n blog: locale('sitesWizard.tools.subtitle.blog'),\n landing: locale('sitesWizard.tools.subtitle.landing'),\n other: locale('sitesWizard.tools.subtitle.other'),\n },\n wordPressInstall: {\n defaultWordpressValue: locale('sitesWizard.wordPressInstall.defaultWordpressValue'),\n titleActionWoocommerce: (\n <>\n {locale('sitesWizard.wordPressInstall.title.0')}\n {locale('sitesWizard.wordPressInstall.title.actionWoocommerce')} \n \n ),\n titleActionWordPress: (\n <>\n {locale('sitesWizard.wordPressInstall.title.0')}\n {locale('sitesWizard.wordPressInstall.title.actionWordPress')} \n \n ),\n info: {\n title: locale('sitesWizard.wordPressInstall.info.title'),\n description: locale('sitesWizard.wordPressInstall.info.description'),\n questions: {\n name: {\n label: locale('sitesWizard.wordPressInstall.info.questions.name.label'),\n placeholder: locale('sitesWizard.wordPressInstall.info.questions.name.placeholder'),\n tooltip: locale('sitesWizard.wordPressInstall.info.questions.name.tooltip'),\n errorMessage: locale('sitesWizard.wordPressInstall.info.questions.name.errorMessage'),\n },\n description: {\n label: locale('sitesWizard.wordPressInstall.info.questions.description.label'),\n placeholder: locale('sitesWizard.wordPressInstall.info.questions.description.placeholder'),\n tooltip: locale('sitesWizard.wordPressInstall.info.questions.description.tooltip'),\n },\n email: {\n label: locale('sitesWizard.wordPressInstall.info.questions.email.label'),\n placeholder: locale('sitesWizard.wordPressInstall.info.questions.email.placeholder'),\n errorMessage: locale('sitesWizard.wordPressInstall.info.questions.email.errorMessage'),\n },\n user: {\n label: locale('sitesWizard.wordPressInstall.info.questions.user.label'),\n placeholder: locale('sitesWizard.wordPressInstall.info.questions.user.placeholder'),\n errorMessage: locale('sitesWizard.wordPressInstall.info.questions.user.errorMessage'),\n errorMessageWithWondersuite: locale('sitesWizard.wordPressInstall.info.questions.user.errorMessageWithWondersuite'),\n },\n password: {\n label: locale('sitesWizard.wordPressInstall.info.questions.password.label'),\n placeholder: locale('sitesWizard.wordPressInstall.info.questions.password.placeholder'),\n },\n confirmPassword: {\n label: locale('sitesWizard.wordPressInstall.info.questions.confirmPassword.label'),\n placeholder: locale('sitesWizard.wordPressInstall.info.questions.confirmPassword.placeholder'),\n },\n },\n nextStepButton: locale('sitesWizard.wordPressInstall.info.nextStepButton'),\n },\n passwordChecklistTexts: {\n description: locale('sitesWizard.wordPressInstall.info.passwordChecklistTexts.description'),\n hasLowerAndUpperCase: locale('sitesWizard.wordPressInstall.info.passwordChecklistTexts.hasLowerAndUpperCase'),\n hasNumber: locale('sitesWizard.wordPressInstall.info.passwordChecklistTexts.hasNumber'),\n hasSymbol: locale('sitesWizard.wordPressInstall.info.passwordChecklistTexts.hasSymbol'),\n hasAtLeastEight: locale('sitesWizard.wordPressInstall.info.passwordChecklistTexts.hasAtLeastEight'),\n matchConfirmation: locale('sitesWizard.wordPressInstall.info.passwordChecklistTexts.matchConfirmation'),\n },\n userChecklistTexts: {\n description: locale('sitesWizard.wordPressInstall.info.userChecklistTexts.description'),\n hasAtLeastEight: locale('sitesWizard.wordPressInstall.info.userChecklistTexts.hasAtLeastEight'),\n hasAtLeastFour: locale('sitesWizard.wordPressInstall.info.userChecklistTexts.hasAtLeastFour'),\n notHaveSymbol: locale('sitesWizard.wordPressInstall.info.userChecklistTexts.notHaveSymbol'),\n },\n subtitle: locale('sitesWizard.wordPressInstall.subtitle'),\n theme: {\n title: locale('sitesWizard.wordPressInstall.theme.title'),\n description: locale('sitesWizard.wordPressInstall.theme.description'),\n tooltip: locale('sitesWizard.wordPressInstall.theme.tooltip'),\n see: locale('sitesWizard.wordPressInstall.theme.see'),\n use: locale('sitesWizard.wordPressInstall.theme.use'),\n selected: locale('sitesWizard.wordPressInstall.theme.selected'),\n nextStepButton: locale('sitesWizard.wordPressInstall.theme.nextStepButton'),\n },\n plugin: {\n title: (\n <>\n {locale('sitesWizard.wordPressInstall.plugin.title')}\n {locale('sitesWizard.wordPressInstall.plugin.optional')} \n \n ),\n description: locale('sitesWizard.wordPressInstall.plugin.description'),\n tooltip: locale('sitesWizard.wordPressInstall.plugin.tooltip'),\n use: locale('sitesWizard.wordPressInstall.plugin.use'),\n selected: locale('sitesWizard.wordPressInstall.plugin.selected'),\n nextStepButton: locale('sitesWizard.wordPressInstall.plugin.nextStepButton'),\n nextStepButtonWithAsaas: locale('sitesWizard.wordPressInstall.plugin.nextStepButtonWithAsaas'),\n },\n asaas: {\n title: (\n <>\n {locale('sitesWizard.wordPressInstall.asaas.title')}\n {locale('sitesWizard.wordPressInstall.asaas.optional')} \n \n ),\n description: locale('sitesWizard.wordPressInstall.asaas.description'),\n },\n installModal: locale('sitesWizard.wordPressInstall.installModal'),\n },\n wondersuite: {\n title: locale('sitesWizard.wondersuite.title'),\n features: {\n items: [\n {\n icon: locale('sitesWizard.wondersuite.features.items.0.icon'),\n title: locale('sitesWizard.wondersuite.features.items.0.title'),\n description: locale('sitesWizard.wondersuite.features.items.0.description'),\n },\n {\n icon: locale('sitesWizard.wondersuite.features.items.1.icon'),\n title: locale('sitesWizard.wondersuite.features.items.1.title'),\n description: locale('sitesWizard.wondersuite.features.items.1.description'),\n },\n {\n icon: locale('sitesWizard.wondersuite.features.items.2.icon'),\n title: locale('sitesWizard.wondersuite.features.items.2.title'),\n description: locale('sitesWizard.wondersuite.features.items.2.description'),\n },\n {\n icon: locale('sitesWizard.wondersuite.features.items.3.icon'),\n title: locale('sitesWizard.wondersuite.features.items.3.title'),\n description: locale('sitesWizard.wondersuite.features.items.3.description'),\n },\n {\n icon: locale('sitesWizard.wondersuite.features.items.4.icon'),\n title: locale('sitesWizard.wondersuite.features.items.4.title'),\n description: locale('sitesWizard.wondersuite.features.items.4.description'),\n },\n {\n icon: locale('sitesWizard.wondersuite.features.items.5.icon'),\n title: locale('sitesWizard.wondersuite.features.items.5.title'),\n description: locale('sitesWizard.wondersuite.features.items.5.description'),\n },\n ],\n },\n tools: {\n title: locale('sitesWizard.wondersuite.tools.title'),\n },\n wondersuiteHeroBanner: {\n title: () => (\n <>\n {locale('sitesWizard.wondersuite.wondersuiteHeroBanner.title.0')}\n {locale('sitesWizard.wondersuite.wondersuiteHeroBanner.title.1')} \n {locale('sitesWizard.wondersuite.wondersuiteHeroBanner.title.2')}\n \n ),\n description: locale('sitesWizard.wondersuite.wondersuiteHeroBanner.description'),\n tagLabel: locale('sitesWizard.wondersuite.wondersuiteHeroBanner.tagLabel'),\n btnLabel: locale('sitesWizard.wondersuite.wondersuiteHeroBanner.btnLabel'),\n btnGA: locale('sitesWizard.wondersuite.wondersuiteHeroBanner.btnGA'),\n assignValue: () => (\n <>\n {locale('sitesWizard.wondersuite.wondersuiteHeroBanner.assignValue.0')}\n {locale('sitesWizard.wondersuite.wondersuiteHeroBanner.assignValue.1')} \n {locale('sitesWizard.wondersuite.wondersuiteHeroBanner.assignValue.2')}\n \n ),\n wordpressExperience: locale('sitesWizard.wondersuite.wondersuiteHeroBanner.wordpressExperience'),\n },\n },\n woocommerce: {\n title: locale('sitesWizard.tools.woocommerce.title'),\n titleText: locale('sitesWizard.tools.woocommerce.titleText'),\n items: [\n locale('sitesWizard.tools.woocommerce.items.0'),\n locale('sitesWizard.tools.woocommerce.items.1'),\n locale('sitesWizard.tools.woocommerce.items.2'),\n locale('sitesWizard.tools.woocommerce.items.3'),\n locale('sitesWizard.tools.woocommerce.items.4'),\n locale('sitesWizard.tools.woocommerce.items.5'),\n ],\n warning: locale('sitesWizard.tools.woocommerce.warning'),\n action: locale('sitesWizard.tools.woocommerce.action'),\n },\n wordpress: {\n title: locale('sitesWizard.tools.wordpress.title'),\n titleText: locale('sitesWizard.tools.wordpress.titleText'),\n description: locale('sitesWizard.tools.wordpress.description'),\n items: [\n locale('sitesWizard.tools.wordpress.items.0'),\n locale('sitesWizard.tools.wordpress.items.1'),\n locale('sitesWizard.tools.wordpress.items.2'),\n locale('sitesWizard.tools.wordpress.items.3'),\n locale('sitesWizard.tools.wordpress.items.4'),\n ],\n warning: locale('sitesWizard.tools.wordpress.warning'),\n action: locale('sitesWizard.tools.wordpress.action'),\n },\n wizard: {\n title: locale('sitesWizard.tools.wizard.title'),\n titleText: locale('sitesWizard.tools.wizard.titleText'),\n items: [\n locale('sitesWizard.tools.wizard.items.0'),\n locale('sitesWizard.tools.wizard.items.1'),\n locale('sitesWizard.tools.wizard.items.2'),\n locale('sitesWizard.tools.wizard.items.3'),\n locale('sitesWizard.tools.wizard.items.4'),\n ],\n action: locale('sitesWizard.tools.wizard.action'),\n },\n otherCommerce: {\n title: locale('sitesWizard.tools.otherCommerce.title'),\n titleText: locale('sitesWizard.tools.otherCommerce.titleText'),\n description: locale('sitesWizard.tools.otherCommerce.description'),\n items: [\n locale('sitesWizard.tools.otherCommerce.items.0'),\n locale('sitesWizard.tools.otherCommerce.items.1'),\n ],\n otherCommerceOption: locale('sitesWizard.tools.otherCommerce.otherIconLabel'),\n warning: locale('sitesWizard.tools.otherCommerce.warning'),\n action: locale('sitesWizard.tools.otherCommerce.action'),\n },\n otherSite: {\n title: locale('sitesWizard.tools.otherSite.title'),\n titleText: locale('sitesWizard.tools.otherSite.titleText'),\n description: locale('sitesWizard.tools.otherSite.description'),\n items: [\n locale('sitesWizard.tools.otherSite.items.0'),\n locale('sitesWizard.tools.otherSite.items.1'),\n ],\n otherSiteOption: locale('sitesWizard.tools.otherSite.otherIconLabel'),\n warning: locale('sitesWizard.tools.otherSite.warning'),\n action: locale('sitesWizard.tools.otherSite.action'),\n },\n cardIcons: {\n joomla: 'Joomla',\n drupal: 'Drupal',\n moodle: 'Moodle',\n flarum: 'Flarum',\n magento: 'Magento',\n openCart: 'Opencart',\n others: locale('sitesWizard.tools.icons.other'),\n },\n },\n configurations: {\n cloudflareAlert: locale('sitesWizard.configurationStep.cloudflareAlert'),\n cloudflareTooltip: locale('sitesWizard.configurationStep.cloudflareTooltip'),\n modalSelectDnsManualStep2: {\n title: locale('sitesWizard.modalSelectDnsManualStep2.title'),\n description: locale('sitesWizard.modalSelectDnsManualStep2.description'),\n tutorialLink: locale('sitesWizard.modalSelectDnsManualStep2.tutorialLink'),\n replace: locale('sitesWizard.modalSelectDnsManualStep2.replace'),\n actualDns: locale('sitesWizard.modalSelectDnsManualStep2.actualDns'),\n hgDns: locale('sitesWizard.modalSelectDnsManualStep2.hgDns'),\n server1: locale('sitesWizard.modalSelectDnsManualStep2.server1'),\n server2: locale('sitesWizard.modalSelectDnsManualStep2.server2'),\n goToHost: locale('sitesWizard.modalSelectDnsManualStep2.goToHost'),\n waitTime: locale('sitesWizard.modalSelectDnsManualStep2.waitTime'),\n waitTimeStrong: locale('sitesWizard.modalSelectDnsManualStep2.waitTimeStrong'),\n warning: locale('sitesWizard.modalSelectDnsManualStep2.warning'),\n labelButtonBack: locale('sitesWizard.modalSelectDnsManualStep2.labelButtonBack'),\n labelButtonContinue: locale('sitesWizard.modalSelectDnsManualStep2.labelButtonContinue'),\n copied: locale('sitesWizard.modalSelectDnsManualStep2.copied'),\n },\n modalAnotherDomain: {\n title: locale('sitesWizard.useAnotherDomain.title'),\n subTitle: locale('sitesWizard.useAnotherDomain.subtitle'),\n placeholder: locale('sitesWizard.useAnotherDomain.placeholder'),\n buttonLabel: locale('sitesWizard.useAnotherDomain.buttonLabel'),\n messageErrorBr: locale('sitesWizard.useAnotherDomain.messageErrorBr'),\n messageError: locale('sitesWizard.useAnotherDomain.messageError'),\n tldMessageError: locale('sitesWizard.useAnotherDomain.tldMessageError'),\n },\n modalChoosePlan: {\n title: locale('sitesWizard.modalChangePlan.title'),\n subtitle: locale('sitesWizard.modalChangePlan.subtitle'),\n tooltip: locale('sitesWizard.modalChangePlan.tooltip'),\n mainDomain: locale('sitesWizard.modalChangePlan.mainDomain'),\n otherDomains: locale('sitesWizard.modalChangePlan.otherDomains'),\n noOtherDomains: locale('sitesWizard.modalChangePlan.noOtherDomains'),\n domains: locale('sitesWizard.modalChangePlan.domains'),\n domain: locale('sitesWizard.modalChangePlan.domain'),\n choosePlan: locale('sitesWizard.modalChangePlan.choosePlan'),\n },\n modalSelectDnsManual: {\n title: locale('sitesWizard.modalSelectDnsManual.title'),\n descriptionOne: locale('sitesWizard.modalSelectDnsManual.descriptionOne'),\n descriptionTwo: locale('sitesWizard.modalSelectDnsManual.descriptionTwo'),\n question: locale('sitesWizard.modalSelectDnsManual.question'),\n placeholder: locale('sitesWizard.modalSelectDnsManual.placeholder'),\n labelButtonBack: locale('sitesWizard.modalSelectDnsManual.labelButtonBack'),\n labelButtonKeep: locale('sitesWizard.modalSelectDnsManual.labelButtonKeep'),\n },\n modalNotRegistered: {\n title: locale('sitesWizard.modalNotRegistered.title'),\n domain: locale('sitesWizard.modalNotRegistered.domain'),\n noRegister: locale('sitesWizard.modalNotRegistered.noRegister'),\n registerNow: locale('sitesWizard.modalNotRegistered.registerNow'),\n otherDomain: locale('sitesWizard.modalNotRegistered.otherDomain'),\n wishKeep: locale('sitesWizard.modalNotRegistered.wishKeep'),\n notAvailable: locale('sitesWizard.modalNotRegistered.notAvailable'),\n backButton: locale('sitesWizard.modalNotRegistered.backButton'),\n continueButton: locale('sitesWizard.modalNotRegistered.continueButton'),\n },\n modalRegistered: {\n title: locale('sitesWizard.modalRegistered.title'),\n domain: locale('sitesWizard.modalRegistered.domain'),\n registered: locale('sitesWizard.modalRegistered.registered'),\n isCorrect: locale('sitesWizard.modalRegistered.isCorrect'),\n continue: locale('sitesWizard.modalRegistered.continue'),\n incorrect: locale('sitesWizard.modalRegistered.incorrect'),\n backButton: locale('sitesWizard.modalRegistered.backButton'),\n continueButton: locale('sitesWizard.modalRegistered.continueButton'),\n },\n title: locale('sitesWizard.configurationStep.title'),\n titleStrong: locale('sitesWizard.configurationStep.titleStrong'),\n text: locale('sitesWizard.configurationStep.text'),\n selectText: locale('sitesWizard.configurationStep.selectText'),\n selectPlaceholder: locale('sitesWizard.configurationStep.selectPlaceholder'),\n wishOtherDomain: locale('sitesWizard.configurationStep.wishOtherDomain'),\n selectedPlan: locale('sitesWizard.configurationStep.selectedPlan'),\n choosePlan: locale('sitesWizard.configurationStep.choosePlan'),\n mainDomain: locale('sitesWizard.configurationStep.mainDomain'),\n continue: locale('sitesWizard.configurationStep.continue'),\n tooltipReplace: locale('sitesWizard.configurationStep.tooltipReplace'),\n tooltipSinglePlan: locale('sitesWizard.configurationStep.tooltipSinglePlan'),\n planLimit: {\n title: locale('sitesWizard.planLimit.title'),\n text: locale('sitesWizard.planLimit.text'),\n changePlan: locale('sitesWizard.planLimit.changePlan'),\n buyOtherPlan: locale('sitesWizard.planLimit.buyOtherPlan'),\n },\n hirePlanTitle: locale('sitesWizard.configurationStep.hirePlanTitle'),\n hirePlanSubtitle: locale('sitesWizard.configurationStep.hirePlanSubtitle'),\n hirePlanCta: locale('sitesWizard.configurationStep.hirePlanCta'),\n registerDomainTitle: locale('sitesWizard.configurationStep.registerDomainTitle'),\n registerDomainSubtitle: locale('sitesWizard.configurationStep.registerDomainSubtitle'),\n registerDomainCta: locale('sitesWizard.configurationStep.registerDomainCta'),\n },\n tips: {\n siteBuilder: {\n baseUrl: locale('routes.siteBuilderRedirectAccess'),\n title: locale('sitesWizard.tips.createSites.title'),\n buttonLabel: locale('sitesWizard.tips.createSites.buttonLabel'),\n subtitle: {\n 0: locale('sitesWizard.tips.createSites.subtitleOne'),\n 1: locale('sitesWizard.tips.createSites.subtitleTwo'),\n },\n tooltip: locale('sitesWizard.tips.createSites.tooltip'),\n },\n pageWordPress: {\n title: locale('sitesWizard.tips.wordpress.title'),\n buttonLabel: locale('sitesWizard.tips.wordpress.buttonLabel'),\n subtitle: locale('sitesWizard.tips.wordpress.subtitle'),\n subtitleOne: locale('sitesWizard.tips.wordpress.subtitleOne'),\n subtitleTwo: locale('sitesWizard.tips.wordpress.subtitleTwo'),\n tooltip: locale('sitesWizard.tips.wordpress.tooltip'),\n routeSitesPages: locale('routes.sitesPage'),\n },\n softaculous: {\n title: locale('sitesWizard.tips.softaculous.title'),\n subtitleOne: locale('sitesWizard.tips.softaculous.subtitleOne'),\n subtitleTwo: locale('sitesWizard.tips.softaculous.subtitleTwo'),\n tooltip: locale('sitesWizard.tips.softaculous.tooltip'),\n },\n asaasLoginBanner: {\n title: locale('sitesWizard.tips.asaasLoginBanner.title'),\n description: locale('sitesWizard.tips.asaasLoginBanner.description'),\n button: locale('sitesWizard.tips.asaasLoginBanner.button'),\n },\n },\n modalDns: {\n title: locale('modalDnsAutomatic.title'),\n descriptionOne: {\n 0: locale('modalDnsAutomatic.descriptionOne.0'),\n 1: {locale('modalDnsAutomatic.descriptionOne.1')} ,\n 2: locale('modalDnsAutomatic.descriptionOne.2'),\n },\n descriptionTwo: {\n 0: locale('modalDnsAutomatic.descriptionTwo.0'),\n 1: {locale('modalDnsAutomatic.descriptionTwo.1')} ,\n },\n link: locale('modalDnsAutomatic.descriptionOne.3'),\n button: locale('modalDnsAutomatic.button'),\n },\n faqContent: {\n title: locale('help.contentHelpCenter'),\n button: locale('help.seeMoreResults'),\n buttonRedirectWordPress: locale('help.buttonRedirectWordPress'),\n buttonRedirectSitesBuilder: locale('help.buttonRedirectSitesBuilder'),\n buttonRedirectSoftaculos: locale('help.buttonRedirectSoftaculos'),\n },\n modalOverwrite: {\n title: locale('sitesWizard.modalOverwrite.title'),\n warningDomain: domain => locale('sitesWizard.modalOverwrite.warningDomain')(domain),\n warningLink: handleClickMaterials => locale('sitesWizard.modalOverwrite.warningLink')(handleClickMaterials),\n checkboxLabel: locale('sitesWizard.modalOverwrite.checkboxLabel'),\n continueButtonLabel: locale('sitesWizard.modalOverwrite.continueButtonLabel'),\n backButtonLabel: locale('sitesWizard.modalOverwrite.backButtonLabel'),\n },\n modalVerifiedOverwrite: {\n title: locale('sitesWizard.modalVerifiedOverwrite.title'),\n warningDomain: domain => locale('sitesWizard.modalVerifiedOverwrite.warningDomain')(domain),\n warningLink: handleClickMaterials => locale('sitesWizard.modalVerifiedOverwrite.warningLink')(handleClickMaterials),\n warningDomainWithDns: domain => locale('sitesWizard.modalVerifiedOverwrite.warningDomainWithDns')(domain),\n warningAboutDns: locale('sitesWizard.modalVerifiedOverwrite.warningAboutDns'),\n checkboxLabel: locale('sitesWizard.modalVerifiedOverwrite.checkboxLabel'),\n continueButtonLabel: locale('sitesWizard.modalVerifiedOverwrite.continueButtonLabel'),\n backButtonLabel: locale('sitesWizard.modalVerifiedOverwrite.backButtonLabel'),\n error: locale('sitesWizard.modalVerifiedOverwrite.error'),\n },\n asaasBanner: {\n title: locale('sitesWizard.asaasBanner.title'),\n chip: locale('sitesWizard.asaasBanner.chip'),\n description: () => (\n <>\n {locale('sitesWizard.asaasBanner.description.0')}\n {locale('sitesWizard.asaasBanner.description.1')} \n {locale('sitesWizard.asaasBanner.description.2')}\n \n ),\n buttonLabel: locale('sitesWizard.asaasBanner.buttonLabel'),\n asaasRoute: locale('routes.asaas'),\n },\n};\n\nconst countryFlow = {\n br: 'Brasil',\n mx: 'México',\n cl: 'Chile',\n co: 'Colômbia',\n ar: 'Argentina',\n pe: 'Peru',\n ec: 'Equador',\n do: 'República Dominicana',\n uy: 'Uruguai',\n cr: 'Costa Rica',\n bo: 'Bolívia',\n py: 'Paraguai',\n sv: 'El Salvador',\n pa: 'Panamá',\n};\n\nexport const surveyCountry = countryFlow[COUNTRY];\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n margin-top: 25px;\n padding: 0 24px;\n\n > section:first-child {\n box-shadow: 0px 1px 3px ${theme.v1.color.shadow.primary};\n }\n\n @media (max-width: ${theme.breakpoints.md}) {\n margin-top: 10px;\n padding: 0;\n }\n `}\n`;\n\nexport const Container = styled.div`\n ${({ theme, loading }) => css`\n background-color: ${theme.color.white};\n border-top: 1px solid ${theme.color.mystic};\n box-shadow: 0px 1px 3px ${theme.color.tundoraLight};\n display: flex;\n flex-direction: column;\n font-family: ${theme.font.family.secondary};\n margin-bottom: -10px;\n min-height: calc(100vh - 200px);\n padding: 0px 32px;\n position: relative;\n\n ${loading && `\n svg {\n margin: auto;\n }\n `}\n\n @media (max-width: ${theme.breakpoints.sm}) {\n min-height: calc(100vh - 170px);\n margin-bottom: -15px;\n padding: 0 16px;\n }\n `}\n`;\n\nexport const ContainerBottomRow = styled.div`\n align-items: flex-end;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-top: auto;\n`;\n\nexport const BackButtonWrapper = styled.div`\n ${({ theme }) => css`\n display: inline-flex;\n padding: 0px 0px 40px 0px;\n \n & svg {\n fill: transparent;\n margin: 0px 10px 0px;\n stroke: transparent;\n transition: fill 200ms ease-in-out, stroke 200ms ease-in-out;\n transform: rotate(180deg);\n }\n\n &:hover {\n svg {\n fill: ${theme.v1.color.action.primary};\n stroke: ${theme.v1.color.action.primary};\n }\n }\n `}\n`;\n\nexport const Snappy = styled.img`\n ${({ theme, maxWidth }) => css`\n max-width: ${maxWidth || 'unset'};\n @media (max-width: ${theme.breakpoints.sm}) {\n height: 160px;\n }\n `}\n`;\n\nexport const BottomLine = styled.img`\n ${({ theme }) => css`\n height: 5px;\n width: 100%;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-bottom: -5px;\n }\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const ConfigurationsWrapper = styled.div`\n padding-bottom: 34px;\n`;\n\nexport const Title = styled.h4`\n ${({ theme }) => css`\n color: ${theme.color.tundora};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n margin-bottom: 10px;\n margin-top: 34px;\n span {\n color: ${theme.color.cyanCobaltBlue};\n }\n `}\n`;\n\nexport const Subtitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.color.tundora};\n font-size: ${theme.font.sizes.sm};\n letter-spacing: 0.3px;\n line-height: ${theme.font.lineHeights.lg};\n margin-top: 9px;\n margin-bottom: 30px;\n `}\n`;\n\nexport const LabelWrapper = styled.span`\n display: flex;\n`;\n\nexport const Triangle = styled.div`\n ${({ theme }) => css`\n border-bottom: 23px solid transparent;\n border-left: 23px solid ${theme.color.mustard};\n height: 0;\n margin-right: 18px;\n width: 0;\n `}\n`;\n\nexport const Label = styled.p`\n ${({ theme }) => css`\n color: ${theme.color.cyanCobaltBlue};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.medium};\n line-height: ${theme.font.lineHeights.xl};\n margin: 0;\n `}\n`;\n\nexport const Select = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-wrap: nowrap;\n max-height: 50px;\n margin-left: 16px;\n width: 350px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-left: 0;\n width: 100%;\n }\n `}\n`;\n\nexport const SelectWrapper = styled.div`\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n `;\n\nexport const Box = styled.div`\n ${({ theme }) => css`\n display: flex;\n padding-left: 6px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n flex-wrap: wrap;\n justify-content: center;\n }\n `}\n`;\n\nexport const LinkWrapper = styled.div`\n${({ theme }) => css`\n display: flex;\n align-items: center;\n margin-left: 32px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-left: 16px;\n margin-top: 30px;\n }\n `}\n`;\n\nexport const IconWrapper = styled.div`\n ${({ theme }) => css`\n margin-left: -5px;\n margin-right: 22px;\n margin-top: 42px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-left: 0;\n margin-right: 0;\n }\n `}\n`;\n\nexport const PlanChooseWrapper = styled.div`\n margin-top: 42px;\n `;\n\nexport const CardWrapper = styled.div`\n ${({ theme }) => css`\n margin-top: 16px;\n margin-left: 40px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-left: 0;\n }\n `}\n`;\n\nexport const ContinueButtonWrapper = styled.div`\n margin-top: 40px;\n button{\n min-width:128px;\n min-height:40px;\n display: flex;\n align-items: center;\n justify-content: center;\n span div {\n display: flex;\n }\n }\n div{\n padding: 0;\n margin: 0;\n }\n`;\n\nexport const TooltipReplaceWrapper = styled.div`\n margin-top: 10px;\n margin-left: 5px;\n`;\n\nexport const SinglePlanTooltipWrapper = styled.span`\n ${({ theme }) => css`\n display: inline-block;\n margin-left: 5px;\n vertical-align: bottom;\n\n &:hover{\n svg {\n fill: ${theme.color.cyanCobaltBlue}\n }\n }\n `}\n`;\n\nexport const TextDomain = styled.p`\n max-width:250px;\n overflow-x: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const AlertWrapper = styled.div`\n margin-top: 24px;\n max-width: 543px;\n \n p {\n > span { \n display: inline-flex;\n position: relative;\n top: 3px;\n }\n }\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Card = styled.div`\n ${({\n theme, selected, asButton, cursorPointer, iconAction,\n }) => css`\n align-items: ${iconAction ? 'center' : 'flex-start'};\n background-color: ${selected || asButton ? theme.color.lightBlue : ''};\n border: 1px solid ${theme.palette.grey.main};\n border-radius: 4px;\n cursor: ${cursorPointer ? 'pointer' : 'auto'};\n display: flex;\n font-family: ${theme.font.family.secondary};\n justify-content: space-between;\n overflow-x: hidden;\n padding: 15px;\n width: ${asButton ? '230px' : '348px'};\n\n @media (max-width: ${theme.breakpoints.sm}) {\n width: 100%;\n },\n `}\n`;\n\nexport const Title = styled.div`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.palette.grey.dark};\n display: flex;\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.medium};\n margin-left: 35px;\n `}\n`;\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.xxs};\n font-weight: ${theme.font.weights.regular};\n margin-left: 35px;\n margin-top: 10px;\n `}\n`;\n\nexport const Icon = styled.img`\n ${() => css`\n height: 20px;\n padding: -3px;\n margin-left: -35px;\n margin-right: 15px;\n `}\n`;\n\nexport const IconAction = styled.button`\n ${({ theme }) => css`\n background-color: transparent;\n border: none;\n\n &:hover{\n cursor: pointer;\n\n svg {\n fill: ${theme.color.cyanCobaltBlue};\n stroke: ${theme.color.cyanCobaltBlue};\n }\n }\n\n `}\n`;\n\nexport const CardContainer = styled.div`\n max-width: 100%;\n`;\n","import React from 'react';\nimport * as Style from './Card.styles';\nimport iconHospedagem from '@/media/siteBuilder/icon-hospedagem.svg';\n\nconst Card = ({\n testId = 'card',\n children,\n icon = iconHospedagem,\n title = '',\n selected = false,\n asButton = false,\n iconAction,\n action,\n onClick,\n cursorPointer,\n}) => (\n\n \n \n \n {icon\n && \n {children\n && (\n \n {children}\n \n )\n }\n \n {(iconAction && action)\n && (\n \n {iconAction}\n \n )\n }\n \n\n);\n\nexport default Card;\n","import React, { useContext } from 'react';\nimport * as Styles from './Configurations.styles';\nimport {\n Select, Button, Link, Tooltip,\n} from '@/pages/common';\nimport {\n IconDropdownArrow, IconError, IconArrowForward, IconEdit, IconInfo,\n} from '@/icons';\nimport { ThemeContext } from 'styled-components';\nimport { HOSTING_URL } from '@/config/urls/hostingUrls';\nimport Loader from '@/components/Layout/Loader';\nimport { Card } from '../Card';\nimport {\n Alert, IconLoading, IconSupport, Tooltip as GatorComponentsTooltip,\n} from 'gatorcomponents';\n\nconst Configurations = ({\n choosePlan,\n chosenPlan,\n comparingDns,\n continueText,\n costumerNeedToUpgradePlan,\n customDomain,\n getSingleDomainsPlans,\n getMultiDomainsPlans,\n handleBuyOtherPlanClick,\n handleChangeDomain,\n handleChangePlanClick,\n handleSelectDomainOnContinue,\n handleShowModal,\n handleWishOtherDomain,\n mainDomain,\n modals,\n multiDomainsPlans,\n planLimitBuyOtherPlan,\n planLimitChangePlan,\n planLimitText,\n planLimitTitle,\n selectedDomain,\n selectedDomainPlan,\n selectedPlan,\n selectedSite,\n selectPlaceholder,\n selectText,\n sitesState,\n text,\n title,\n titleStrong,\n tooltipReplace,\n tooltipSinglePlan,\n userDomainList,\n wishOtherDomain,\n showOtherPlans,\n displayOverwriteModal,\n handleClickHirePlan,\n hirePlanTitle,\n hirePlanSubtitle,\n hirePlanCta,\n registerDomainTitle,\n registerDomainSubtitle,\n registerDomainCta,\n handleClickRegisterDomain,\n isInternalDomain,\n cloudflareAlert,\n cloudflareTooltip,\n allowCloudflare,\n loadingCloudflare,\n currentPlan,\n}) => {\n const shouldDisplayEditIcon = !sitesState.loadingDomainValidation && !sitesState.loading && !comparingDns;\n const theme = useContext(ThemeContext);\n const { color } = theme.v1;\n const hasChosenPlanId = chosenPlan.external_id;\n const hasMultiplePlans = multiDomainsPlans.length > 1 || (selectedDomainPlan && getSingleDomainsPlans(selectedDomainPlan) && multiDomainsPlans.length >= 1);\n\n const hasJustOnePlan = (selectedDomainPlan && sitesState.plans.length === 1)\n || (selectedDomainPlan && getSingleDomainsPlans(selectedDomainPlan) && !hasMultiplePlans)\n || (selectedDomainPlan && getMultiDomainsPlans(selectedDomainPlan) && multiDomainsPlans.length === 1)\n || (!selectedDomainPlan && multiDomainsPlans.length === 1);\n\n const domainWithoutPlan = !selectedDomainPlan && !hasChosenPlanId && hasMultiplePlans;\n const clientHasOnlyOnePlan = hasChosenPlanId && hasJustOnePlan;\n\n\n const hasMultiplePlanOptions = (hasChosenPlanId || selectedDomainPlan) && hasMultiplePlans;\n\n const hasActivePlan = sitesState.plans.find(plan => plan.status === 'active');\n\n if (!sitesState.plans.length || (sitesState.plans.length && !hasActivePlan)) {\n return (\n <>\n \n \n \n\n \n \n {hirePlanTitle}\n \n \n {hirePlanSubtitle}\n \n
\n \n\n \n \n \n );\n }\n\n if (sitesState.anotherDomain && sitesState.domainAvailability && sitesState.domainTldAvailability) {\n return (\n <>\n \n \n \n\n \n \n {registerDomainTitle && registerDomainTitle(sitesState.anotherDomain)}\n \n \n {registerDomainSubtitle}\n \n
\n \n\n \n \n \n );\n }\n\n if (costumerNeedToUpgradePlan) {\n return (\n <>\n \n \n \n\n \n \n {planLimitTitle}\n \n {planLimitText} \n
\n \n\n \n \n \n \n \n );\n }\n\n\n return (\n \n \n {title}\n {titleStrong} \n \n\n {text} \n\n \n \n {selectText} \n \n\n \n \n \n \n )}\n \n \n\n {(sitesState.loadingDomainValidation || loadingCloudflare) && (\n \n \n \n {selectedPlan}\n\n {hasChosenPlanId && hasJustOnePlan && (\n \n \n \n )}\n \n \n \n\n \n {domainWithoutPlan && (\n \n \n {mainDomain}\n {chosenPlan.domain}\n \n \n )}\n\n {hasMultiplePlanOptions && (\n \n {mainDomain}\n {chosenPlan.domain}\n \n \n )}\n \n \n )}\n\n\n {allowCloudflare\n && isInternalDomain\n && currentPlan && currentPlan.cloudflare_available && (\n \n \n {cloudflareAlert}\n \n \n )}\n\n\n {!sitesState.loadingDomainValidation && (\n \n \n )}\n \n );\n};\n\nexport default Configurations;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.white.primary};\n padding: 34px 0px;\n `}\n`;\n\nexport const Title = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n margin: 0 0 8px 0px;\n\n span {\n color: ${theme.v1.color.text.featured};\n }\n `}\n`;\n\nexport const Subtitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n letter-spacing: 0.3px;\n line-height: 19px;\n margin: 0px 0px 40px 0px;\n `}\n`;\n\nexport const IconWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n justify-content: center;\n margin-left: 8px;\n\n svg:hover {\n fill: ${theme.v1.color.text.featured};\n }\n `}\n`;\n\nexport const LabelWrapper = styled.div`\n align-items: center;\n display: flex;\n margin: 0px 0px 25px 0px;\n`;\n\nexport const EditIconWrapper = styled.span`\n margin: 0px;\n`;\n\nexport const Triangle = styled.div`\n ${({ theme }) => css`\n border-bottom: 23px solid transparent;\n border-left: 23px solid ${theme.v1.color.warning.attention};\n height: 0;\n margin-right: 18px;\n width: 0;\n `}\n`;\n\nexport const Label = styled.p`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v1.color.text.featured};\n display: flex;\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.medium};\n line-height: 22px;\n margin: 0;\n `}\n`;\n\nexport const TypesWrapper = styled.div`\n${({ theme }) => css`\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n margin-bottom: 40px;\n max-width: 1020px;\n\n label {\n min-height: 74px;\n }\n div:nth-last-child(1) div label span:nth-last-child(1) svg{\n position:absolute;\n right:19px;\n top :27px;\n margin-right: 0px;\n &:hover {\n fill: ${theme.palette.blue.dark}\n }\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n max-width: 324px;\n width: 100%;\n position: relative;\n`;\n\nexport const SelectWrapper = styled.div`\n margin: 0px 0px 40px;\n`;\n\nexport const ContinueWrapper = styled.div`\n button{\n min-width:128px;\n min-height:40px;\n display: flex;\n align-items: center;\n justify-content: center;\n span div {\n display: flex;\n }\n }\n div{\n padding: 0;\n margin: 0;\n }\n`;\n","import { IconDetailedInstitutional, IconEdit, IconInfo } from '@/icons';\nimport {\n Tooltip, SelectButton, Select, Button,\n} from '@/pages/common/v1/';\nimport React, { useContext } from 'react';\nimport * as Styles from './WizardAbout.styles';\nimport { ThemeContext } from 'styled-components';\nimport Loader from '@/components/Layout/Loader';\n\nconst WizardAbout = ({\n title = \"It's time to define the type and purpose of your website!\",\n subtitle = 'Based on your answers we will indicate the best creation tool :)',\n question = {\n text: 'What type of website do you want to start creating?',\n tooltip: \"Choose the type closest to your need and don't worry, later you can create other types if you wish.\",\n },\n siteTypes = [\n {\n title: 'Other type of site',\n subtitle: null,\n iconLeft: \n \n {title}\n \n \n {subtitle}\n \n\n \n \n {question.text}\n \n\n {question.tooltip && (\n \n \n \n \n )}\n \n\n \n {siteTypes.map(siteType => (\n \n onChange(event, value)}\n truncate\n truncateMaxWidth=\"205px\"\n truncateTitle={siteType.value === 'other' && siteType.title}\n iconRight={siteType.value === 'other' && othersFieldEditMode && setDisplayOthersModal(true)}> }\n testId={siteType.id}\n />\n \n ))}\n \n\n {checkedItem && (\n <>\n \n \n {objectivesQuestion}\n \n\n {question.tooltip && (\n \n \n \n \n )}\n \n\n \n \n\n \n \n \n )}\n \n );\n};\n\nexport default WizardAbout;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.white.primary};\n padding: 34px 0px;\n `}\n`;\n\nexport const Title = styled.h4`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n margin: 0 0 8px 0px;\n\n span {\n color: ${theme.v1.color.text.featured};\n }\n`}\n`;\n\nexport const Subtitle = styled.p`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n letter-spacing: 0.3px;\n line-height: 19px;\n margin: 0px 0px 40px 0px\n`}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const QuestionWrapper = styled.div`\n align-items: flex-start;\n display: flex;\n margin: 0px 0px 24px 0px;\n max-width: 664px;\n position: relative;\n width: 100%;\n\n &:first-child {\n margin-top: 40px;\n }\n\n @media (max-width: 1098px){\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n }\n`;\n\nexport const LabelWrapper = styled.div`\n display: flex;\n margin-right: auto;\n min-width: 250px;\n\n @media (max-width: 1098px){\n margin: 0px 0px 24px 0px;\n min-width: unset;\n position: relative;\n }\n`;\n\nexport const Triangle = styled.div`\n ${({ theme }) => css`\n border-bottom: 23px solid transparent;\n border-left: 23px solid ${theme.v1.color.warning.attention};\n height: 0;\n margin-right: 18px;\n width: 0;\n `}\n`;\n\nexport const Label = styled.label`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.featured};\n display: flex;\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.medium};\n line-height: 22px;\n margin: 0px auto 0px 0px;\n max-width: 664px;\n width: 100%;\n `}\n`;\n\nexport const InputWrapper = styled.div`\n align-items:flex-start;\n display: flex;\n justify-content:flex-start;\n margin: 0px 8px 0px 0px;\n width: 100%;\n\n\n > * {\n width: 100%;\n }\n\n @media (max-width: 1098px){\n min-width: unset;\n }\n`;\n\nexport const TooltipWrapper = styled.div`\n ${({ theme }) => css`\n position: absolute;\n right: -14px;\n top: 2px;\n\n svg > g > g {\n fill: ${theme.v1.color.action.primary};\n stroke: ${theme.v1.color.action.primary};\n transition: fill 200ms ease-in-out, stroke 200ms ease-in-out;\n }\n\n &:hover {\n svg > g > g {\n fill: ${theme.v1.color.action.hover};\n stroke: ${theme.v1.color.action.hover};\n }\n }\n \n @media (max-width: 1098px){\n right: -20px;\n top: 4px;\n }\n `}\n`;\n\nexport const CheckListWrapper = styled.div`\n max-width: 664px;\n padding: 0px;\n width: 100%;\n`;\n\nexport const ListHeader = styled.p`\n align-items: center;\n display: flex;\n justify-content: flex-start;\n margin: 0px 0px 4px auto;\n max-width: 410px;\n padding: 0px;\n\n @media (max-width: 1098px){\n margin: 0px 0px 4px 0px;\n }\n`;\n\nexport const ListInfo = styled.span`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.font.family.primary};\n font-size: 12px;\n line-height: 16px;\n margin: 0px 0px 0px 8px;\n `}\n`;\n\nexport const List = styled.ul`\n align-items: center;\n margin: 0px 0px 0px auto;\n max-width: 410px;\n padding: 0;\n width: 100%;\n\n @media (max-width: 1098px){\n margin: 0px;\n }\n`;\n\nexport const ListItem = styled.li`\n ${({ theme, valid }) => css`\n align-items: center;\n color: ${valid ? theme.v1.color.text.primary : theme.v1.color.warning.error};\n display: flex;\n font-family: ${theme.font.family.primary};\n font-size: 12px;\n line-height: 16px;\n margin: 0px 0px 4px 0px;\n\n span:first-child { \n margin: 0px 10px 0px 8px;\n }\n `}\n`;\n\nexport const ListDot = styled.span`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.warning.error};\n border-radius: 50%;\n height: 6px;\n width: 6px;\n `}\n`;\n\nexport const ActionWrapper = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n margin: 40px 0px 0px;\n`;\n\nexport const ToggleWrapper = styled.div`\n margin: 0px 0px 24px 0px;\n`;\n","import {\n IconDetailedGear, IconDoubt, IconLock, IconCheck,\n} from '@/icons';\nimport { SlideToggle, Button, Tooltip } from '@/pages/common/v1';\nimport * as Styles from './WizardWordpressConfigInfo.styles';\nimport React, { useContext } from 'react';\nimport { ThemeContext } from 'styled-components';\nimport { Input } from '@/pages/common/v1/inputs/index';\n\nconst WizardWordpressConfigInfo = ({\n testId = 'wordpress-info',\n title = 'title',\n infoNextStepButton = 'next step label',\n description = 'description',\n questions = {\n name: {\n label: 'name',\n placeholder: 'name placeholder',\n tooltip: 'name tooltip',\n errorMessage: 'Name field error',\n },\n description: {\n label: 'description',\n placeholder: 'description placeholder',\n tooltip: 'description tooltip',\n },\n email: {\n label: 'email',\n placeholder: 'email placeholder',\n errorMessage: 'email field error',\n },\n user: {\n label: 'user',\n placeholder: 'user placeholder',\n errorMessage: 'user field error',\n errorMessageWithWondersuite: 'user with wondersuite field error',\n },\n password: {\n label: 'password',\n placeholder: 'password placeholder',\n },\n confirmPassword: {\n label: 'confirm password',\n placeholder: 'confirm password placeholder',\n },\n },\n wodpressSetupValues = {\n name: {\n value: '',\n empty: true,\n error: false,\n },\n description: {\n value: '',\n empty: true,\n error: false,\n },\n email: {\n value: '',\n empty: true,\n error: false,\n },\n user: {\n value: '',\n empty: true,\n error: false,\n },\n password: {\n value: '',\n empty: true,\n error: false,\n hasLowerAndUpperCase: false,\n hasNumber: false,\n hasSymbol: false,\n hasAtLeastEight: false,\n matchConfirmation: false,\n },\n confirmPassword: {\n value: '',\n empty: true,\n error: false,\n },\n },\n handleUpdateWordpressSetupValues,\n handleBlurWordpressSetupValues,\n passwordChecklistTexts = {\n description: 'password description:',\n hasLowerAndUpperCase: 'password uppercase',\n hasNumber: 'password number',\n hasSymbol: 'password symbol',\n hasAtLeastEight: 'password 8 charcater',\n matchConfirmation: 'password match',\n },\n userChecklistTexts = {\n description: 'user description:',\n hasAtLeastEight: 'user 8 character',\n hasAtLeastFour: 'user 4 character',\n notHaveSymbol: 'user symbol',\n },\n wordPressSetupReadyToContinue,\n onContinueSetup,\n open,\n setupSteps,\n activeSetupStep,\n wordPressInfoBlock,\n isWondersuiteEnabled,\n handleLoadingWordpress,\n asaasInsideWizardShouldAppear,\n}) => {\n const infoIsTheUnicBlock = isWondersuiteEnabled && !asaasInsideWizardShouldAppear;\n const theme = useContext(ThemeContext);\n\n const handleChangeInput = (event) => {\n handleUpdateWordpressSetupValues && handleUpdateWordpressSetupValues(event);\n };\n\n const handleBlur = (event) => {\n handleBlurWordpressSetupValues && handleBlurWordpressSetupValues(event);\n };\n\n const handleContinue = (currentStep) => {\n if (infoIsTheUnicBlock) {\n return handleLoadingWordpress();\n }\n onContinueSetup && onContinueSetup(currentStep);\n };\n\n const handleOnToggle = () => {\n if (activeSetupStep !== setupSteps.UTILS && !infoIsTheUnicBlock) {\n onContinueSetup(0);\n }\n };\n\n const listDetail = valid => (valid ? \n \n \n \n {questions.name.label}\n \n\n \n \n \n \n \n\n \n handleChangeInput(event)}\n onBlur={event => handleBlur(event)}\n value={wodpressSetupValues.name.value}\n type=\"text\"\n placeholder={questions.name.placeholder}\n />\n \n \n \n \n \n {questions.description.label}\n \n\n \n \n \n \n \n\n \n handleChangeInput(event)}\n onBlur={event => handleBlur(event)}\n value={wodpressSetupValues.description.value}\n type=\"textarea\"\n placeholder={questions.description.placeholder}\n rows=\"3\"\n />\n \n \n \n )}\n\n \n \n \n {questions.email.label}\n \n \n\n \n handleChangeInput(event)}\n onBlur={event => handleBlur(event)}\n errorMessage={wodpressSetupValues.email.error ? questions.email.errorMessage : ''}\n value={wodpressSetupValues.email.value}\n type=\"email\"\n placeholder={questions.email.placeholder}\n />\n \n \n\n \n \n \n {questions.user.label}\n \n \n\n\n \n handleChangeInput(event)}\n onBlur={event => handleBlur(event)}\n value={wodpressSetupValues.user.value}\n type=\"text\"\n placeholder={questions.user.placeholder}\n />\n \n \n \n \n {userChecklistTexts.description} \n \n \n \n {listDetail(isUserSizeRuleValid)}\n {userChecklistSize}\n \n\n \n {listDetail(isUserSpecialCharacterRuleValid)}\n {userChecklistTexts.notHaveSymbol}\n \n \n \n\n \n \n \n {questions.password.label}\n \n \n\n \n handleChangeInput(event)}\n onBlur={event => handleBlur(event)}\n value={wodpressSetupValues.password.value}\n type=\"password\"\n placeholder={questions.password.placeholder}\n iconColor={theme.v1.color.action.primary}\n />\n \n \n\n \n \n \n {questions.confirmPassword.label}\n \n \n\n \n handleChangeInput(event)}\n onBlur={event => handleBlur(event)}\n value={wodpressSetupValues.confirmPassword.value}\n type=\"password\"\n placeholder={questions.confirmPassword.placeholder}\n iconColor={theme.v1.color.action.primary}\n />\n \n \n\n \n \n {passwordChecklistTexts.description} \n \n\n \n \n {listDetail(wodpressSetupValues.password.hasLowerAndUpperCase)}\n {passwordChecklistTexts.hasLowerAndUpperCase}\n \n\n \n {listDetail(wodpressSetupValues.password.hasNumber)}\n {passwordChecklistTexts.hasNumber}\n \n\n \n {listDetail(wodpressSetupValues.password.hasSymbol)}\n {passwordChecklistTexts.hasSymbol}\n \n\n \n {listDetail(wodpressSetupValues.password.hasAtLeastEight)}\n {passwordChecklistTexts.hasAtLeastEight}\n \n\n \n {listDetail(wodpressSetupValues.password.matchConfirmation)}\n {passwordChecklistTexts.matchConfirmation}\n \n \n \n\n \n handleContinue(1)}\n label={infoNextStepButton}\n testId={`${testId}-continue`}\n />\n \n \n \n );\n};\n\nexport default WizardWordpressConfigInfo;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div``;\n\nexport const DescriptionWrapper = styled.span`\n ${({ theme }) => css`\n display:flex;\n\n svg{\n margin-left: 8px;\n\n &:hover{\n fill: ${theme.v1.color.text.featured};\n }\n }\n\n @media (max-width: ${theme.v1.breakpoints.sm}){\n display:inline-block;\n\n > div {\n display:inline-block;\n }\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${() => css`\n max-width: 464px;\n margin: 40px auto;\n `}\n`;\n\nexport const ThemesContainer = styled.div`\n ${() => css`\n display:flex;\n justify-content:center;\n `}\n`;\n\nexport const ThemesWrapper = styled.div`\n ${({ theme }) => css`\n display:flex;\n max-width:752px;\n flex-wrap:wrap;\n margin-top: 40px;\n gap: 16px;\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n max-width:496px;\n }\n @media (max-width: 630px) {\n max-width:240px;\n }\n `}\n`;\n\nexport const ThemeImage = styled.img`\n ${() => css`\n width: 224px;\n height:151px;\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n display:flex;\n flex-direction:column;\n align-items:center;\n width:240px;\n border: 1px solid ${theme.v1.color.line.wizard};\n border-radius: 4px;\n `}\n`;\n\nexport const Title = styled.h4`\n ${({ theme }) => css`\n color:${theme.v1.color.text.primary};\n font-size:${theme.font.sizes.md};\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.v1.font.weights.medium};\n line-height: ${theme.font.lineHeights.xl};\n margin: 0;\n padding: 8px 0;\n `}\n`;\n\nexport const ThemeImage = styled.img`\n ${() => css`\n width: 224px;\n height:151px;\n padding-bottom: 16px;\n `}\n`;\n\nexport const ButtonsWrapper = styled.div`\n ${({ theme }) => css`\n display:flex;\n justify-content:center;\n padding-bottom:16px;\n button:first-child {\n padding-top:6px;\n padding-right: 16px;\n font-family: ${theme.v1.font.family.primary};\n color: ${theme.v1.color.action.primary};\n &:hover{\n color: ${theme.v1.color.action.hover};\n }\n }\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const SelectChipWrapper = styled.div`\n cursor: pointer;\n`;\n\nexport const SelectChipLabel = styled.label`\n ${({\n align,\n justify,\n theme,\n variant,\n }) => {\n const variants = {\n default: {\n backgroundColor: 'transparent',\n border: `1px solid ${theme.v1.color.action.primary}`,\n hoverBackgroundColor: theme.v1.color.action.hover,\n hoverFontColor: theme.v1.color.white.primary,\n hoverBorder: `1px solid ${theme.v1.color.action.hover}`,\n },\n };\n\n return css`\n align-items: ${align};\n background-color: ${variants[variant].backgroundColor};\n border-radius: 16px;\n border: ${variants[variant].border};\n cursor: pointer;\n display: flex;\n justify-content: ${justify};\n padding: 6px 24px;\n transition: background-color 150ms ease-in-out, border 150ms ease-out;\n\n &:hover{\n background-color: ${variants[variant].hoverBackgroundColor};\n border: ${variants[variant].hoverBorder};\n span{\n color: ${variants[variant].hoverFontColor};\n }\n }\n `;\n }}\n`;\n\nexport const SelectInput = styled.input`\n ${({\n theme,\n variant,\n }) => {\n const variants = {\n default: {\n checkedBackgroundColor: theme.v1.color.warning.success,\n checkedBorder: `1px solid ${theme.v1.color.warning.success}`,\n fontColor: theme.v1.color.white.primary,\n hoverFontColor: theme.v1.color.white.primary,\n hoverBackgroundColor: theme.v1.color.action.hover,\n disabledBorder: `1px solid ${theme.v1.color.action.disabled}`,\n disabledColor: theme.v1.color.action.disabled,\n disabledBackgroundColor: theme.v1.color.action.disabled,\n },\n };\n return css`\n display: none;\n\n &:checked + label {\n background-color: ${variants[variant].checkedBackgroundColor};\n border: ${variants[variant].checkedBorder};\n span {\n color: ${variants[variant].fontColor};\n }\n }\n &:disabled + label {\n background-color: transparent;\n border: ${variants[variant].disabledBorder};\n span {\n color: ${variants[variant].disabledColor};\n }\n }\n `;\n }}\n`;\n\nexport const Title = styled.span`\n ${({\n theme,\n variant,\n truncate,\n truncateMaxWidth,\n }) => {\n const variants = {\n default: {\n color: theme.v1.color.action.primary,\n weight: theme.v1.font.weights.medium,\n fontSize: '12px',\n lineHeight: '16px',\n letterSpacing: '0px',\n },\n };\n return css`\n color: ${variants[variant].color};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${variants[variant].fontSize};\n font-weight: ${variants[variant].weight};\n letter-spacing: ${variants[variant].letterSpacing};\n line-height: ${variants[variant].lineHeight};\n max-width:${truncate && truncateMaxWidth};\n overflow: ${truncate && 'hidden'};\n text-overflow: ${truncate && 'ellipsis'};\n white-space: ${truncate && 'nowrap'};\n `;\n }}\n`;\n\nexport const LabelContent = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const Label = styled.span``;\n","import React, { useEffect, useState } from 'react';\nimport * as Styles from './SelectChip.styles';\n\nconst SelectChip = ({\n variant = 'default',\n title,\n onChange,\n type = 'radio',\n checked = false,\n id = 'SelectChip',\n testId = 'SelectChip',\n value = null,\n justify = 'flex-start',\n align = 'center',\n name = 'selectName',\n disabled = false,\n truncate = false,\n truncateMaxWidth,\n truncateTitle,\n}) => {\n const [currentChecked, setCurrentChecked] = useState(checked);\n\n const handleChange = (event) => {\n onChange && onChange(event, value);\n type === 'radio'\n ? setCurrentChecked(!checked)\n : setCurrentChecked(!currentChecked);\n };\n\n useEffect(() => {\n setCurrentChecked(checked);\n }, [checked]);\n\n return (\n \n handleChange(event)}\n variant={variant}\n name={name}\n disabled={disabled}\n />\n\n \n\n \n {title && {title} }\n \n \n \n );\n};\n\nexport default SelectChip;\n","import React from 'react';\nimport * as Styles from './WizardThemeCard.styles';\nimport { Button as LinkButton } from '@/pages/common/Button';\nimport { SelectChip } from '@/pages/common/v1/SelectChip';\nimport { wizardLocale } from '@/pages/sites/WizardHandler/WizardHandler.locale.jsx';\n\nconst WizardThemeCard = ({\n title, image, handleChangeTheme, selected, cardValue, handleOnOpenThemeModal,\n}) => {\n const handleChange = (selectedCard) => {\n handleChangeTheme && handleChangeTheme(selectedCard);\n };\n return (\n \n {title} \n\n \n handleOnOpenThemeModal(cardValue)}\n size=\"small\"\n variant=\"link\"\n label={wizardLocale.tools.wordPressInstall.theme.see}\n testId=\"theme-card-modal-button\"\n />\n\n handleChange(cardValue)}\n title={selected ? wizardLocale.tools.wordPressInstall.theme.selected : wizardLocale.tools.wordPressInstall.theme.use}\n checked={selected}\n value={cardValue}\n justify=\"center\"\n id={cardValue}\n testId=\"theme-card-select-button\"\n />\n \n \n );\n};\n\nexport default WizardThemeCard;\n","import React, { useContext } from 'react';\nimport * as Styles from './WizardWordpressConfigThemes.styles';\nimport { SlideToggle } from '@/pages/common/v1/SlideToggle';\nimport { Tooltip } from '@/pages/common/v1/';\nimport { IconInfo, IconDetailedTheme } from '@/icons';\nimport { WizardThemeCard } from '../WizardThemeCard';\nimport { Button } from '@/pages/common/v1/Button';\nimport { ThemeContext } from 'styled-components';\n\nconst WizardWordpressConfigThemes = ({\n themeTitle,\n themeDescription,\n themeTooltip,\n themes,\n themeSelected,\n handleChangeTheme,\n handleOnOpenThemeModal,\n nextStepButtonLabel,\n activeSetupStep,\n onContinueSetup,\n open,\n setupSteps,\n wordPressThemesBlock,\n wordPressSetupReadyToContinue,\n wodpressSetupValues,\n wordPressInfoBlock,\n validateWordpressInfo,\n}) => {\n const theme = useContext(ThemeContext);\n\n const handleOnClick = () => {\n onContinueSetup && onContinueSetup(2);\n };\n\n const scrollToInfo = () => {\n window.scrollTo({\n top: wordPressInfoBlock.current.offsetTop,\n left: 0,\n behavior: 'smooth',\n });\n };\n\n const handleOnToggle = () => {\n validateWordpressInfo();\n\n const hasError = wodpressSetupValues.name.error || wodpressSetupValues.email.error || wodpressSetupValues.user.error;\n\n if (!wordPressSetupReadyToContinue) {\n if (hasError) {\n scrollToInfo();\n }\n\n if (!hasError) {\n onContinueSetup(1);\n }\n }\n\n if (wordPressSetupReadyToContinue) {\n scrollToInfo();\n }\n\n if (activeSetupStep > setupSteps.THEME) {\n onContinueSetup(1);\n }\n };\n\n return (\n \n = setupSteps.PLUGIN}\n onToggle={handleOnToggle}\n testId=\"slide-toggle-theme\"\n maxHeight={1825}\n icon={\n {themeDescription}\n \n \n \n )}\n >\n \n \n {themes && themes.map(theme => (\n \n \n\n \n \n \n \n );\n};\n\nexport default WizardWordpressConfigThemes;\n","import styled, { css } from 'styled-components';\n\n\nexport const Wrapper = styled.div`\n padding-top: 24px;\n`;\n\nexport const DescriptionWrapper = styled.span`\n ${({ theme }) => css`\n display:flex;\n svg{\n margin-left: 8px;\n\n &:hover{\n fill: ${theme.v1.color.text.featured};\n }\n }\n @media (max-width: ${theme.v1.breakpoints.sm}){\n display:inline-block;\n\n > div {\n display:inline-block;\n }\n `}\n`;\n\nexport const Title = styled.span`\n ${({ theme }) => css`\n span{\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.v1.font.weights.medium};\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n display:flex;\n justify-content:center;\n margin: 40px auto 0px auto;\n max-width: 502px;\n`;\n\nexport const PluginContainer = styled.div`\n display:flex;\n justify-content:center;\n`;\n\nexport const PluginWrapper = styled.div`\n ${({ theme }) => css`\n display:flex;\n flex-wrap:wrap;\n gap: 16px;\n margin-top: 40px;\n max-width:752px;\n\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n max-width:496px;\n }\n\n @media (max-width: 630px) {\n max-width:240px;\n }\n\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n align-items:center;\n border: 1px solid ${theme.v1.color.line.wizard};\n border-radius: 4px;\n display:flex;\n flex-direction:column;\n width:240px;\n `}\n`;\n\nexport const TitleWrapper = styled.div`\n align-items:center;\n align-self: flex-start;\n display:flex;\n padding: 16px;\n`;\n\nexport const Title = styled.h4`\n ${({ theme }) => css`\n color:${theme.v1.color.text.primary};\n font-size:${theme.font.sizes.md};\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.v1.font.weights.medium};\n line-height: ${theme.font.lineHeights.xl};\n margin: 0;\n `}\n`;\n\nexport const PluginImage = styled.img`\n height:40px;\n margin-right: 16px;\n width: 40px;\n`;\n\nexport const PluginDescription = styled.p`\n ${({ theme }) => css`\n align-self: flex-start;\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.xxs};\n height: 113px;\n line-height: ${theme.font.lineHeights.md};\n margin: 0px 15px 13px 16px;\n `}\n`;\n\n\nexport const ButtonsWrapper = styled.div`\n display:flex;\n justify-content:center;\n padding-bottom:16px;\n`;\n","import React from 'react';\nimport * as Styles from './WizardPluginCard.styles';\nimport { SelectChip } from '@/pages/common/v1/SelectChip';\nimport { wizardLocale } from '@/pages/sites/WizardHandler/WizardHandler.locale.jsx';\n\nconst WizardPluginCard = ({\n title = 'Plugin Card',\n description = 'Plugin Description',\n image,\n handleChangePlugin,\n selected,\n cardValue,\n id,\n}) => {\n const handleChange = (selectedCard) => {\n handleChangePlugin && handleChangePlugin(selectedCard);\n };\n\n return (\n \n\n \n {title} \n \n\n \n {description}\n \n\n \n handleChange(cardValue)}\n title={selected ? wizardLocale.tools.wordPressInstall.plugin.selected : wizardLocale.tools.wordPressInstall.plugin.use}\n checked={selected}\n value={cardValue}\n justify=\"center\"\n id={id}\n testId=\"plugin-card-select-button\"\n type=\"checkbox\"\n />\n \n \n );\n};\n\nexport default WizardPluginCard;\n","import React, { useContext } from 'react';\nimport * as Styles from './WizardWordpressConfigPlugin.styles';\nimport { SlideToggle } from '@/pages/common/v1/SlideToggle';\nimport { Tooltip } from '@/pages/common/v1/';\nimport { IconInfo, IconDetailedPlugin } from '@/icons';\nimport { WizardPluginCard } from '../WizardPluginCard';\nimport { Button } from '@/pages/common/v1/Button';\nimport { ThemeContext } from 'styled-components';\n\nconst WizardWordpressConfigPlugin = ({\n pluginTitle = 'Plugin Title',\n pluginDescription = 'Plugin Description',\n pluginTooltip = 'Plugin Tooltip',\n plugins = [{\n id: 1,\n name: 'Plugin Sample',\n description: 'Plugin Description',\n image: \n = setupSteps.ASAAS}\n testId=\"slide-toggle-plugin\"\n icon={{pluginTitle} }\n description={(\n \n {pluginDescription}\n \n \n \n )}\n >\n \n \n {plugins && plugins.map((plugin) => {\n const selected = pluginsSelected.find(pluginValue => pluginValue === plugin.value);\n return (\n \n \n\n \n handleOnClick()}\n testId=\"plugin-next-step-button\"\n label={nextStepButtonLabel}\n />\n \n \n \n );\n};\n\nexport default WizardWordpressConfigPlugin;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction:column;\n`;\n\nexport const Title = styled.h4`\n ${({ theme }) => css`\n align-self: flex-start;\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n letter-spacing: 0px;\n line-height: 32px;\n margin: 32px 0px 0px 32px;\n `}\n`;\n","import React from 'react';\nimport {\n Modal,\n} from '@/pages/common';\nimport * as Styles from './WizardWordpressConfigModal.styles';\nimport Loader from '@/components/Layout/Loader';\n\nconst WizardWordpressConfigModal = ({ modalTitle }) => (\n \n \n \n {modalTitle}\n \n \n \n);\n\nexport default WizardWordpressConfigModal;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.white.primary};\n padding: 34px 0px;\n `}\n`;\n\nexport const DescriptionWrapper = styled.span`\n ${({ theme }) => css`\n display:flex;\n svg{\n margin-left: 8px;\n\n &:hover{\n fill: ${theme.v1.color.text.featured};\n }\n }\n @media (max-width: ${theme.v1.breakpoints.sm}){\n display:inline-block;\n\n > div {\n display:inline-block;\n }\n `}\n`;\n\nexport const Title = styled.span`\n ${({ theme }) => css`\n span{\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.v1.font.weights.medium};\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${() => css`\n max-width: 464px;\n margin: 40px auto;\n `}\n`;\n","import styled, { css } from 'styled-components';\nimport listDecoration from '@/media/asaas/Asaas-list-decoration.svg';\n\nexport const FirstRowWrapper = styled.div`\n ${({ theme, isInsideWizard }) => css`\n background-color: ${theme.v1.color.white.primary};\n display: flex;\n flex-direction: row;\n flex-warp: wrap;\n justify-content: space-between;\n padding: ${isInsideWizard ? '0px' : '40px'};\n width: 100%;\n\n @media (max-width: ${theme.v1.breakpoints.md}){\n flex-direction: column;\n padding: 36px;\n }\n `}\n`;\n\nexport const LeftColumn = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n max-width: 725px;\n width: 100%;\n \n @media (max-width: ${theme.v1.breakpoints.md}){\n max-width: 100%;\n }\n `}\n`;\n\nexport const Logo = styled.img`\n ${({ theme, isInsideWizard }) => css`\n margin: ${isInsideWizard ? '44px 0px 0px 0px' : '0px'};\n max-width: 141px;\n width: 100%;\n\n @media (max-width: ${theme.v1.breakpoints.md}){\n margin: 0px auto;\n }\n `}\n`;\n\nexport const Title = styled.h3`\n ${({ theme, isInsideWizard }) => css`\n color: ${theme.v1.color.text.featured};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 32px;\n margin: ${isInsideWizard ? '15px 0px 0px 0px' : '24px 0px 0px 0px'};\n max-width: ${isInsideWizard ? '364px' : '469px'};\n\n @media (max-width: ${theme.v1.breakpoints.md}){\n font-size: 20px;\n line-height: 27px;\n margin: 16px auto 0px auto;\n text-align: center;\n }\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme, isInsideWizard }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${isInsideWizard ? '14px' : '16px'};\n font-weight: ${theme.v1.font.weights.regular};\n line-height: ${isInsideWizard ? '19px' : '21px'};\n margin: 16px 0px 36px;\n max-width: ${isInsideWizard ? '364px' : '409px'};\n\n > b {\n font-weight: ${theme.v1.font.weights.bold};\n }\n\n > p {\n margin: 20px 0px 0px 0px;\n }\n\n a {\n color: ${theme.v1.color.action.primary};\n font-weight: ${theme.v1.font.weights.bold};\n }\n\n @media (max-width: ${theme.v1.breakpoints.md}){\n font-size: 14px;\n line-height: 19px;\n margin: 16px auto 20px auto;\n text-align: center;\n }\n `}\n`;\n\nexport const AsaasDescriptionImage = styled.img`\n ${({ theme, isInsideWizard }) => css`\n max-width: ${isInsideWizard ? '364px' : '436px'};\n width: 100%;\n\n @media (max-width: ${theme.v1.breakpoints.md}){\n display: none;\n visibility: hidden;\n }\n `}\n`;\n\nexport const RightColumn = styled.div`\n ${({ theme, isInsideWizard }) => css`\n background-color: ${theme.v1.color.white.primary};\n display: flex;\n flex-direction: column;\n max-width: 521px;\n min-height: ${isInsideWizard ? '0px' : '625px'} ;\n width: 100%;\n\n @media (max-width: ${theme.v1.breakpoints.md}){\n margin: 0 auto;\n }\n `}\n`;\n\nexport const Form = styled.form`\n ${({ theme, isInsideWizard }) => css`\n background-color: ${theme.v1.color.white.primary};\n border-radius: 4px;\n border: 1px solid ${theme.v1.color.background.wizard};\n max-width: 520px;\n padding: ${isInsideWizard ? '30px 16px 0px' : '30px 16px'};\n width: 100%;\n @media (min-width: ${theme.v1.breakpoints.lg}){\n max-width: unset;\n width: 520px;\n }\n `}\n\n`;\n\nexport const StepperWrapper = styled.div`\n margin: 0 auto;\n width: fit-content;\n`;\n\nexport const DescriptionList = styled.ul`\n ${({ theme }) => css`\n list-style-type: none;\n margin: auto 0 0 0;\n padding: 0;\n display: none;\n visibility: hidden;\n\n li:last-child {\n margin-bottom: 0px;\n }\n\n @media (max-width: ${theme.v1.breakpoints.md}){\n display: block;\n margin: 20px auto 0 auto;\n visibility: visible;\n }\n `}\n`;\n\nexport const DescriptionItem = styled.li`\n ${({ theme, isInsideWizard }) => css`\n color: ${theme.v1.color.text.primary};\n display: flex;\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 19px;\n margin-bottom: 10px;\n gap: ${isInsideWizard ? '5px' : '0px'};\n\n b {\n font-weight: ${theme.v1.font.weights.bold};\n }\n\n span {\n color: ${theme.v1.color.action.primary};\n }\n\n &:before {\n align-self: center;\n background-image: url(${listDecoration});\n background-repeat: no-repeat;\n content: '';\n display: block;\n height: 11px;\n margin-right: 10px;\n min-width: 14px;\n }\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const FormContent = styled.div`\n`;\n\nexport const FormTtitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.featured};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 32.4px;\n margin: 32px 0px 8px 0px;\n `}\n`;\n\nexport const FormDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 19px;\n margin: 0px 0px 24px 0px;\n `}\n`;\n\nexport const Question = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.medium};\n line-height: 19px;\n margin: 36px 0px 16px 0px;\n `}\n`;\n\nexport const StepperWrapper = styled.div`\n margin: 0 auto;\n width: fit-content;\n`;\n\nexport const InputWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media(max-width: ${theme.v1.breakpoints.md}){\n gap: 8px;\n }\n `}\n`;\n\nexport const RadioWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: row;\n gap: 40px;\n margin: 0px 0px 16px 0px;\n\n @media(max-width: ${theme.v1.breakpoints.md}){\n flex-direction: column;\n gap: 8px;\n\n > div {\n flex: 0;\n }\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n margin: 24px auto;\n max-width: fit-content;\n`;\n\nexport const AccessWrapper = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 19px;\n margin: 0px auto;\n max-width: fit-content;\n\n a { \n color: ${theme.v1.color.action.primary};\n font-weight: ${theme.v1.font.weights.medium};\n }\n `}\n`;\n\nexport const LabelError = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.warning.error};\n font-family: ${theme.v1.font.family.primary};\n font-size: 12px;\n margin: 8px 12px 0;\n text-align: left;\n `}\n`;\n","const formStepper = {\n OPEN_ACCOUNT: 0,\n MAIN_DATA: 1,\n FORM_CONCLUSION: 2,\n};\n\nconst documentType = {\n CPF: 'CPF',\n CNPJ: 'CNPJ',\n};\n\nconst documentLength = {\n CPF: 14,\n CNPJ: 18,\n};\n\nexport const asaasEnum = {\n formStepper,\n documentType,\n documentLength,\n};\n","import React from 'react';\nimport * as Styles from './FormOpenAccount.styles';\nimport {\n Button,\n RadioOption,\n Select,\n} from '@/pages/common/v1';\nimport { Input } from '@/pages/common/v1/inputs';\nimport { asaasEnum } from '../../AsaasHandler.enum';\n\nconst AsaasFirstRow = ({\n testId = 'asaas-form-open-account',\n formData,\n onChange,\n onContinue,\n enabledFormOpenAccountContinue,\n cnpjTypes,\n isInsideWizard = false,\n}) => {\n const handleChange = (e) => {\n onChange && onChange({ value: e.target.value, name: e.target.name });\n };\n\n const handleToggle = (e, document) => {\n onChange && onChange({ value: document, name: e.name });\n };\n\n const handleChangeSelect = (e) => {\n onChange && onChange({ value: e.value, name: 'companyType' });\n };\n\n const handleContinue = () => {\n onContinue && onContinue(asaasEnum.formStepper.OPEN_ACCOUNT);\n };\n\n\n return (\n \n {formData.texts[formData.activeStep].title} \n {formData.texts[formData.activeStep].description} \n\n \n \n\n {formData.texts[formData.activeStep].questionDocument} \n\n \n handleToggle(e, 'CPF')}\n checked={formData.fields.documentType.value === 'CPF'}\n name=\"documentType\"\n />\n handleToggle(e, 'CNPJ')}\n checked={formData.fields.documentType.value === 'CNPJ'}\n name=\"documentType\"\n />\n \n\n \n \n {formData.fields.companyType.error}\n \n )}\n \n\n \n \n\n {!isInsideWizard && (\n \n {formData.texts[formData.activeStep].accessAsaas}\n \n )}\n \n );\n};\n\nexport default AsaasFirstRow;\n","import styled, { css } from 'styled-components';\nimport listDecoration from '@/media/asaas/Asaas-list-decoration.svg';\n\nexport const FormContent = styled.div`\n`;\n\nexport const FormTtitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.featured};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 32.4px;\n margin: 32px 0px 8px 0px;\n `}\n`;\n\nexport const FormDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 19px;\n margin: 0px 0px 24px 0px;\n `}\n`;\n\nexport const InputWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n input:read-only {\n background-color: ${theme.v1.color.background.wizard} !important;\n cursor: not-allowed;\n }\n\n @media(max-width: ${theme.v1.breakpoints.md}){\n gap: 8px;\n }\n `}\n`;\n\nexport const CepWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 16px;\n justify-content: space-between;\n\n @media (max-width: ${theme.v1.breakpoints.md}){\n gap: 8px;\n }\n `}\n`;\n\nexport const LoaderPosition = styled.div`\n align-items: center;\n display: flex;\n flex: 1;\n justify-content: space-between;\n min-width: 165px;\n position: relative;\n\n > span {\n width: 100%;\n }\n`;\n\nexport const LoaderWrapper = styled.div`\n position: absolute;\n right: 10px;\n top: 14px;\n\n * {\n padding: 0;\n margin: 0;\n }\n`;\n\nexport const AnchoMyCEP = styled.a`\n ${({ theme }) => css`\n align-self: flex-start;\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 19px;\n margin-top: 8px;\n text-decoration: underline;\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n font-size: 12px;\n line-height: 16px;\n }\n `}\n`;\n\nexport const NumberComplementWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: row;\n gap: 8px;\n justify-content: space-between;\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const CheckboxWrapper = styled.label`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v1.color.text.primary};\n cursor: pointer;\n display: flex;\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 19px;\n margin: 0px;\n padding: 0px;\n width: fit-content;\n\n > span { \n margin: 0px 11px 0px 0px;\n }\n `}\n`;\n\nexport const AnchorAgreement = styled.a`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 19px;\n margin-left: 4px;\n text-decoration: underline;\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n font-size: 12px;\n line-height: 16px;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n align-items: center;\n display: flex;\n gap: 32px;\n margin: 24px auto;\n max-width: fit-content;\n`;\n\nexport const BackButtonWrapper = styled.div`\n align-items: center;\n display: flex;\n gap: 12px;\n\n > span {\n transform: rotate(180deg);\n }\n`;\n\nexport const AccessWrapper = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 19px;\n margin: 0px auto;\n max-width: fit-content;\n\n a { \n color: ${theme.v1.color.action.primary};\n font-weight: ${theme.v1.font.weights.medium};\n }\n `}\n`;\n\nexport const DescriptionList = styled.ul`\n ${({ theme }) => css`\n list-style-type: none;\n margin: auto 0 0 0;\n padding: 0;\n display: none;\n visibility: hidden;\n\n @media (max-width: ${theme.v1.breakpoints.md}){\n display: block;\n visibility: visible;\n }\n `}\n`;\n\nexport const DescriptionItem = styled.li`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n display: flex;\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 19px;\n\n &:before {\n align-self: center;\n background-image: url(${listDecoration});\n background-repeat: no-repeat;\n content: '';\n display: block;\n height: 11px;\n margin-right: 10px;\n min-width: 14px;\n }\n `}\n`;\n","import React, { useContext } from 'react';\nimport * as Styles from './FormMainData.styles';\nimport { Button, TextButton } from '@/pages/common/v1';\nimport { Input } from '@/pages/common/v1/inputs';\nimport { asaasEnum } from '../../AsaasHandler.enum';\nimport Loader from '@/components/Layout/Loader';\nimport { IconArrowForward } from '@/icons';\nimport { ThemeContext } from 'styled-components';\nimport { Radio } from '@/pages/common';\n\nconst AsaasFirstRow = ({\n testId = 'asaas-form-main-data',\n formData,\n onChange,\n onContinue,\n loadingCep,\n enabledMainDataContinue,\n onGoback,\n callformStepTwoMyCEP,\n}) => {\n const theme = useContext(ThemeContext);\n\n const handleChange = (e) => {\n onChange && onChange({ value: e.target.value, name: e.target.name });\n };\n\n const handleChangeRadio = (e) => {\n if (e.target.id === 'anchor-agreement') {\n return;\n }\n\n onChange && onChange({ value: !formData.fields.checkboxConfirmation.value, name: 'checkboxConfirmation' });\n };\n\n const handleContinue = () => {\n onContinue && onContinue(asaasEnum.formStepper.MAIN_DATA);\n };\n\n const handleGoBack = () => {\n onGoback && onGoback(asaasEnum.formStepper.MAIN_DATA);\n };\n\n const handleMyCep = () => {\n callformStepTwoMyCEP && callformStepTwoMyCEP();\n };\n\n return (\n \n {formData.texts[formData.activeStep].title} \n {formData.texts[formData.activeStep].description} \n\n \n \n \n \n \n )}\n \n\n {formData.texts[formData.activeStep].myCepLabel} \n \n \n \n\n {!loadingCep && (\n \n \n {formData.texts[formData.activeStep].agreementLinkLabel}\n \n \n )}\n \n\n \n \n \n \n \n );\n};\nexport default AsaasFirstRow;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.div`\n${({ theme }) => css`\n display: flex;\n flex-direction: column;\n padding: 0px 8px;\n @media(max-width: ${theme.v1.breakpoints.md}){\n align-items: center;\n }\n `}\n`;\n\nexport const TitleContainer = styled.div`\n${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 8px;\n margin: 32px 0px 8px 0px;\n @media(max-width: ${theme.v1.breakpoints.md}){\n flex-direction: column;\n margin: 16px 0px 8px 0px;\n }\n `}\n`;\n\nexport const CongratsIcon = styled.img`\n`;\n\nexport const Title = styled.h3`\n${({ theme }) => css`\n color: ${theme.v1.color.text.featured};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 32px;\n margin: 0px;\n max-width: 440px;\n text-align: left;\n width: 100%;\n @media(max-width: ${theme.v1.breakpoints.md}){\n text-align: center;\n width: 256px;\n }\n `}\n`;\n\nexport const Description = styled.p`\n${({ theme, success }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 19px;\n margin: ${success ? '0px 0px 24px 0px' : '0px 0px 16px 0px'};\n max-width: 448px;\n text-align: left;\n width: 100%;\n span {\n font-weight: bold;\n }\n @media(max-width: ${theme.v1.breakpoints.md}){\n margin: ${success ? '0px 0px 16px 0px' : '0px 0px 26px 0px'};\n width: 256px;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n${({ theme, success, isInsideWizard }) => css`\n align-items: center;\n display: flex;\n gap: 32px;\n margin: ${isInsideWizard ? '0px auto 39px auto' : '0px 0px 39px 0px'};\n\n @media(max-width: ${theme.v1.breakpoints.lg}){\n align-items: initial;\n flex-direction: column;\n gap: 14px;\n {width: ${success ? '288px' : '200px'};\n span {\n font-size: ${success ? '16px' : '14px'}\n }\n }\n @media(max-width: ${theme.v1.breakpoints.md}){\n align-items: center;\n margin-bottom: 0px;\n width: 250px;\n span {\n font-size: 14px;\n }\n }\n `}\n`;\n\nexport const BackButtonWrapper = styled.div`\n ${({ theme }) => css`\n display: inline-flex;\n margin: 0px 0px 0px 12px;\n \n & svg {\n fill: ${theme.v1.color.action.primary};\n margin-right: 10px;\n stroke: ${theme.v1.color.action.primary};\n transition: fill 200ms ease-in-out, stroke 200ms ease-in-out;\n transform: rotate(180deg);\n }\n @media(max-width: ${theme.v1.breakpoints.lg}){\n margin: 0px;\n }\n `}\n`;\n","import { collect } from '@/analytics';\n\nconst EVENT = {\n NAME: 'gaEvent',\n CATEGORY: {\n LP_ASAAS: 'Landing Page Asaas',\n STEP_2: 'Etapa 2 - Sobre o site',\n STEP_3: 'Etapa 3 - Definir ferramenta de criação',\n STEP_4: 'Etapa 4 - Dicas para começar',\n },\n ACTION: {\n FORM_STEP_ONE: 'Etapa 1 do formulário de cadastro',\n FORM_STEP_TWO: 'Etapa 2 do formulário de cadastro',\n FORM_STEP_THREE: 'Etapa 3 do formulário de cadastro',\n ANCHOR: 'Âncora para cadastro no Asaas',\n TAXES_MATERIAL: 'Material sobre taxas',\n },\n};\n\nexport const formStepOneContinue = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_ONE,\n gaEventLabel: 'Ação: Continuar',\n});\n\nexport const formStepOneCPF = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_ONE,\n gaEventLabel: 'Ação: Pessoa física',\n});\n\nexport const formStepOneCNPJ = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_ONE,\n gaEventLabel: 'Ação: Pessoa jurídica',\n});\n\nexport const formStepOneMEI = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_ONE,\n gaEventLabel: 'Tipo de empresa: MEI',\n});\n\nexport const formStepOneLimited = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_ONE,\n gaEventLabel: 'Tipo de empresa: Empresa Limitada',\n});\n\nexport const formStepOneIndividual = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_ONE,\n gaEventLabel: 'Tipo de empresa: Empresa Individual',\n});\n\nexport const formStepOneAssociation = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_ONE,\n gaEventLabel: 'Tipo de empresa: Associação',\n});\n\nexport const formStepOneLogin = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_ONE,\n gaEventLabel: 'Ação: Login no Asaas',\n});\n\nexport const formStepTwoMyCEP = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_TWO,\n gaEventLabel: 'Ação: Não sei meu CEP',\n});\n\nexport const formStepTwoUseTerm = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_TWO,\n gaEventLabel: 'Ação: Marcou checkbox dos termos de uso',\n});\n\nexport const formStepTwoContinue = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_TWO,\n gaEventLabel: 'Ação: Continuar',\n});\n\nexport const formStepThreeRemake = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_THREE,\n gaEventLabel: 'Ação: Refazer cadastro',\n});\n\nexport const formStepThreeLogin = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_THREE,\n gaEventLabel: 'Ação: Login no Asaas',\n});\n\nexport const formStepThreeMaterialOne = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_THREE,\n gaEventLabel: 'Ação: Material 1',\n});\n\nexport const formStepThreeMaterialTwo = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_THREE,\n gaEventLabel: 'Ação: Material 2',\n});\n\nexport const formStepThreeMaterialThree = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_THREE,\n gaEventLabel: 'Ação: Material 3',\n});\n\nexport const formStepThreeMaterialFour = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_THREE,\n gaEventLabel: 'Ação: Material 4',\n});\n\nexport const formStepThreeMaterialFive = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_THREE,\n gaEventLabel: 'Ação: Material 5',\n});\n\nexport const formStepThreeViewMore = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.FORM_STEP_THREE,\n gaEventLabel: 'Ação: Ver mais conteúdos',\n});\n\nexport const taxesMaterial = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.TAXES_MATERIAL,\n gaEventLabel: '',\n});\n\nexport const anchorLink = () => collect({\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LP_ASAAS,\n gaEventAction: EVENT.ACTION.ANCHOR,\n gaEventLabel: '',\n});\n\nconst analytics = {\n formStepOneContinue,\n formStepOneCPF,\n formStepOneCNPJ,\n formStepOneMEI,\n formStepOneLimited,\n formStepOneIndividual,\n formStepOneAssociation,\n formStepOneLogin,\n formStepTwoMyCEP,\n formStepTwoUseTerm,\n formStepTwoContinue,\n formStepThreeRemake,\n formStepThreeLogin,\n formStepThreeMaterialOne,\n formStepThreeMaterialTwo,\n formStepThreeMaterialThree,\n formStepThreeMaterialFour,\n formStepThreeMaterialFive,\n formStepThreeViewMore,\n taxesMaterial,\n anchorLink,\n};\n\nexport default analytics;\n","import React, { useContext } from 'react';\nimport * as Styles from './FormConclusion.styles';\nimport congratsIcon from '@/media/asaas/congrats.svg';\nimport failIcon from '@/media/asaas/fail.svg';\nimport { Button } from '@/pages/common/v1/Button';\nimport {\n IconArrowForward,\n} from '@/icons';\nimport { TextButton } from '@/pages/common/v1';\nimport { ThemeContext } from 'styled-components';\nimport { asaasAnalytics } from '@/analytics/asaas';\n\nconst FormConclusion = ({\n formData,\n resetForm,\n testId = 'form-conclusion',\n accountCreated,\n isInsideWizard,\n}) => {\n const thirdStepWithError = !accountCreated;\n const theme = useContext(ThemeContext);\n\n const handleOpenLink = () => {\n asaasAnalytics.formStepThreeLogin();\n window.open(formData.texts[formData.activeStep].successButtonUrl);\n };\n return (\n \n \n \n {!thirdStepWithError ? formData.texts[formData.activeStep].successTitle : formData.texts[formData.activeStep].failedTitle}\n \n \n\n \n {!thirdStepWithError ? formData.texts[formData.activeStep].successDescription : formData.texts[formData.activeStep].failedDescription}\n \n\n \n\n {thirdStepWithError && (\n \n \n )}\n\n {!isInsideWizard && (\n \n \n );\n};\n\nexport default FormConclusion;\n","import styled, { css } from 'styled-components';\n\nexport const Materials = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n margin-left: 24px;\n @media (max-width: ${theme.v1.breakpoints.md}){\n align-items: center;\n }\n `}\n`;\n\nexport const MaterialsTitleWrapper = styled.div`\n display: flex;\n gap: 15px;\n margin-bottom: 14px;\n margin-top: 24px;\n`;\n\nexport const MaterialTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.medium};\n line-height: 21px;\n margin: 0px;\n max-width: 429px;\n width: 100%;\n @media (max-width: ${theme.v1.breakpoints.md}){\n font-size: 14px;\n width: 208px;\n }\n `}\n`;\n\nexport const MaterialsList = styled.ul`\n display: flex;\n flex-direction: column;\n gap: 8px;\n list-style: none;\n margin: 0px;\n padding: 0px;\n`;\n\nexport const Material = styled.li`\n ${({ theme }) => css`\n font-size: 14px;\n line-height: 19px;\n & > a {\n color: ${theme.v1.color.action.primary};\n text-decoration-color: transparent;\n transition: text-decoration-color 150ms ease-in-out;\n }\n & > a:hover {\n color: ${theme.v1.color.action.primary};\n text-decoration-color: ${theme.v1.color.action.primary};\n }\n `}\n`;\n\nexport const ShowMoreWrapper = styled.div`\n display: flex;\n margin-top: 16px;\n width: 152px;\n`;\n","import React from 'react';\nimport * as Styles from './HelpLinks.styles';\nimport { IconMaterials } from '@/icons';\nimport { Link } from '@/pages/common';\nimport { Button } from '@/pages/common/v1/Button';\nimport { asaasAnalytics } from '@/analytics/asaas';\n\nconst HelpLinks = ({ formData, testId = 'asaas-form-help-links', accountCreated }) => {\n const handleCallAnalytics = (idx) => {\n switch (idx) {\n case 1:\n asaasAnalytics.formStepThreeMaterialOne();\n break;\n case 2:\n asaasAnalytics.formStepThreeMaterialTwo();\n break;\n case 3:\n asaasAnalytics.formStepThreeMaterialThree();\n break;\n case 4:\n asaasAnalytics.formStepThreeMaterialFour();\n break;\n case 5:\n asaasAnalytics.formStepThreeMaterialFive();\n break;\n default:\n break;\n }\n };\n\n const handleCallViewMore = () => {\n window.open(formData.texts[formData.activeStep].showMoreArticlesURL);\n asaasAnalytics.formStepThreeViewMore();\n };\n\n const thirdStepWithError = !accountCreated;\n return (\n \n \n \n {thirdStepWithError ? formData.texts[formData.activeStep].articlesTitleHelp : formData.texts[formData.activeStep].articlesTitle}\n \n \n\n \n {formData.texts[formData.activeStep].articles.map((article, index) => (\n \n handleCallAnalytics(index)}\n />\n \n ))}\n \n\n \n \n \n );\n};\n\nexport default HelpLinks;\n","import React from 'react';\nimport * as Styles from './AsaasFirstRow.styles';\nimport AsaasLogo from '@/media/asaas/asaas-logo.svg';\nimport AsaasDetails from '@/media/asaas/Assas-lp-details.svg';\nimport AsaasWizardDetails from '@/media/asaas/Asaas-wizard-details.svg';\nimport {\n FormStepper,\n} from '@/pages/common/v1';\nimport { FormOpenAccount } from '../FormOpenAccount';\nimport { asaasEnum } from '../../AsaasHandler.enum';\nimport { FormMainData } from '../FormMainData';\nimport { FormConclusion } from '../FormConclusion';\nimport { HelpLinks } from '../HelpLinks';\n\nconst AsaasFirstRow = ({\n testId = 'asaas-first-row',\n title = 'First row title',\n description = 'description',\n imageItems = [\n 'item 0',\n 'item 1',\n 'item 2',\n ],\n descriptionImageAlt = 'descriptionImageAlt',\n formData,\n onChange,\n onContinue,\n loadingCep,\n enabledFormOpenAccountContinue,\n enabledMainDataContinue,\n onGoback,\n onSubmit,\n resetForm,\n cnpjTypes,\n callformStepTwoMyCEP,\n accountCreated,\n isInsideWizard = false,\n}) => {\n const shouldDisplayHelpLinks = !isInsideWizard && formData.activeStep === asaasEnum.formStepper.FORM_CONCLUSION;\n const descriptionImage = isInsideWizard ? AsaasWizardDetails : AsaasDetails;\n\n const formOpenAccountProps = () => {\n const defaultProps = {\n formData,\n onChange,\n onContinue,\n enabledFormOpenAccountContinue,\n cnpjTypes,\n isInsideWizard,\n };\n\n return defaultProps;\n };\n\n const formMainDataProps = () => {\n const defaultProps = {\n formData,\n onChange,\n onContinue,\n loadingCep,\n enabledMainDataContinue,\n onGoback,\n callformStepTwoMyCEP,\n };\n\n return defaultProps;\n };\n\n const formConclusionProps = () => {\n const defaultProps = {\n formData,\n resetForm,\n accountCreated,\n isInsideWizard,\n };\n\n return defaultProps;\n };\n\n const helpLinksProps = () => {\n const defaultProps = {\n formData,\n accountCreated,\n };\n\n return defaultProps;\n };\n\n const handleSubmit = (e) => {\n onSubmit && onSubmit(e);\n };\n\n return (\n \n \n {title} \n {description} \n \n\n \n \n \n \n\n {formData.activeStep === asaasEnum.formStepper.OPEN_ACCOUNT && (\n \n\n {shouldDisplayHelpLinks && (\n \n\n \n {imageItems.map(item => {item} )}\n \n \n );\n};\n\nexport default AsaasFirstRow;\n","import React, { useContext } from 'react';\nimport { SlideToggle } from '@/pages/common/v1/SlideToggle';\nimport * as Styles from './WizardWordpressConfigAsaas.styles';\nimport { IconDetailedPay } from '@/icons';\nimport { ThemeContext } from 'styled-components';\nimport { AsaasFirstRow } from '@/pages/asaas/AsaasHandler/components/AsaasFirstRow';\nimport { Button } from '@/pages/common/v1';\n\nconst WizardWordpressConfigAsaas = ({\n wordPressAsaasBlock,\n open,\n asaasToggleTitle,\n asaasToggleDescription,\n wodpressSetupValues,\n wordPressSetupReadyToContinue,\n pluginsSelected,\n onContinueSetup,\n wordPressPluginsBlock,\n wordPressInfoBlock,\n asaasFormData,\n accountCreated,\n asaasOnChange,\n asaasOnContinue,\n loadingCep,\n asaasEnabledFormOpenAccountContinue,\n asaasEnabledMainDataContinue,\n asaasOnGoback,\n asaasOnSubmit,\n asaasResetForm,\n asaasCnpjTypes,\n asaasCallformStepTwoMyCEP,\n asaasTitle,\n asaasDescription,\n asaasReachedThridStep,\n createAsaasContinueLabel,\n dontCreateAsaasContinueLabel,\n themeSelected,\n wordPressThemesBlock,\n activeSetupStep,\n setupSteps,\n handleLoadingWordpress,\n descriptionImageAlt,\n imageItems,\n isWondersuiteEnabled,\n}) => {\n const theme = useContext(ThemeContext);\n const continueLabel = asaasReachedThridStep ? createAsaasContinueLabel : dontCreateAsaasContinueLabel;\n const continueVariant = asaasReachedThridStep ? 'primary' : 'text';\n\n const handleOnToggle = () => {\n const hasError = wodpressSetupValues.name.error || wodpressSetupValues.email.error || wodpressSetupValues.user.error;\n if (isWondersuiteEnabled) {\n if (hasError) {\n onContinueSetup(0);\n return window.scrollTo({\n top: wordPressInfoBlock.current.offsetTop,\n left: 0,\n behavior: 'smooth',\n });\n }\n return onContinueSetup(1);\n }\n\n if (!wordPressSetupReadyToContinue) {\n if (activeSetupStep !== setupSteps.PLUGIN) {\n onContinueSetup(2);\n window.scrollTo({\n top: wordPressPluginsBlock.current.offsetTop,\n left: 0,\n behavior: 'smooth',\n });\n }\n\n if (!themeSelected) {\n onContinueSetup(1);\n window.scrollTo({\n top: wordPressThemesBlock.current.offsetTop,\n left: 0,\n behavior: 'smooth',\n });\n }\n\n if (hasError) {\n onContinueSetup(0);\n window.scrollTo({\n top: wordPressInfoBlock.current.offsetTop,\n left: 0,\n behavior: 'smooth',\n });\n }\n\n if (pluginsSelected && activeSetupStep === setupSteps.PLUGIN) {\n onContinueSetup(3);\n }\n }\n\n if (wordPressSetupReadyToContinue) {\n onContinueSetup(0);\n window.scrollTo({\n top: wordPressInfoBlock.current.offsetTop,\n left: 0,\n behavior: 'smooth',\n });\n }\n };\n\n const getAsaasFirstRow = () => {\n const defaultProps = {\n formData: asaasFormData,\n accountCreated,\n onChange: asaasOnChange,\n onContinue: asaasOnContinue,\n loadingCep,\n enabledFormOpenAccountContinue: asaasEnabledFormOpenAccountContinue,\n enabledMainDataContinue: asaasEnabledMainDataContinue,\n onGoback: asaasOnGoback,\n onSubmit: asaasOnSubmit,\n resetForm: asaasResetForm,\n cnpjTypes: asaasCnpjTypes,\n callformStepTwoMyCEP: asaasCallformStepTwoMyCEP,\n isInsideWizard: true,\n title: asaasTitle,\n description: asaasDescription,\n descriptionImageAlt,\n imageItems,\n };\n\n return defaultProps;\n };\n\n const handleOnClick = () => {\n handleLoadingWordpress && handleLoadingWordpress();\n };\n\n return (\n \n {asaasToggleTitle} }\n description={(\n \n {asaasToggleDescription}\n \n )}\n >\n \n handleOnClick()}\n testId=\"theme-next-step-button\"\n label={continueLabel}\n variant={continueVariant}\n />\n \n \n \n );\n};\n\nexport default WizardWordpressConfigAsaas;\n","import React, { useEffect, useRef } from 'react';\nimport * as Styles from './WizardWordPressConfig.styles';\nimport { WizardWordpressConfigInfo } from '../WizardWordpressConfigInfo';\nimport { WizardWordpressConfigThemes } from '../WizardWordpressConfigThemes';\nimport { WizardWordpressConfigPlugin } from '../WizardWordpressConfigPlugin';\nimport { WizardWordpressConfigModal } from '../WizardWordpressConfigModal';\nimport { useResize } from '@/hooks/useResize';\nimport { WizardWordpressConfigAsaas } from '../WizardWordpressConfigAsaas';\n\nlet resizeTimout = null;\nconst WizardWordPressConfig = ({\n title,\n subtitle,\n themeTitle,\n themeDescription,\n themeTooltip,\n themes,\n themeSelected,\n handleChangeTheme,\n handleOnOpenThemeModal,\n nextStepButtonLabel,\n wodpressSetupValues,\n handleUpdateWordpressSetupValues,\n handleBlurWordpressSetupValues,\n wordPressSetupReadyToContinue,\n wordpressInfoTitle = 'info title',\n wordpressInfoDescription = 'info subtitle',\n questions,\n passwordChecklistTexts,\n userChecklistTexts,\n onContinueSetup,\n setupSteps,\n activeSetupStep,\n pluginTitle,\n pluginDescription,\n asaasToggleTitle,\n asaasToggleDescription,\n wordPressPlugins,\n handleChangePlugin,\n pluginsSelected,\n finishLabel,\n pluginTooltip,\n modalTitle,\n handleLoadingWordpress,\n loadingWordpressInstallation,\n infoNextStepButton,\n validateWordpressInfo,\n asaasFormData,\n accountCreated,\n asaasOnChange,\n asaasOnContinue,\n loadingCep,\n asaasEnabledFormOpenAccountContinue,\n asaasEnabledMainDataContinue,\n asaasOnGoback,\n asaasOnSubmit,\n asaasResetForm,\n asaasCnpjTypes,\n asaasCallformStepTwoMyCEP,\n asaasTitle,\n asaasDescription,\n asaasReachedThridStep,\n createAsaasContinueLabel,\n dontCreateAsaasContinueLabel,\n asaasInsideWizardShouldAppear,\n descriptionImageAlt,\n imageItems,\n isWondersuiteEnabled,\n}) => {\n const wordPressInfoBlock = useRef();\n const wordPressThemesBlock = useRef();\n const wordPressPluginsBlock = useRef();\n const wordPressAsaasBlock = useRef();\n const screenSize = useResize();\n\n useEffect(() => {\n resizeTimout = setTimeout(() => {\n let top = null;\n\n if (activeSetupStep === setupSteps.UTILS) {\n top = wordPressInfoBlock.current.offsetTop;\n }\n\n if (activeSetupStep === setupSteps.THEME) {\n top = wordPressThemesBlock.current.offsetTop;\n }\n\n if (activeSetupStep === setupSteps.PLUGIN) {\n top = wordPressPluginsBlock.current.offsetTop;\n }\n\n if (activeSetupStep === setupSteps.ASAAS) {\n top = wordPressAsaasBlock.current.offsetTop;\n }\n\n window.scrollTo({\n top,\n left: 0,\n behavior: 'smooth',\n });\n }, 500);\n\n return () => {\n clearTimeout(resizeTimout);\n };\n }, [activeSetupStep, setupSteps, screenSize.height]);\n\n const WizardWordPressAsaas = () => {\n const defaultProps = {\n asaasToggleTitle,\n asaasToggleDescription,\n wordPressAsaasBlock,\n open: activeSetupStep === setupSteps.ASAAS,\n pluginsSelected,\n wordPressSetupReadyToContinue,\n wordPressInfoBlock,\n wordPressPluginsBlock,\n onContinueSetup,\n wodpressSetupValues,\n asaasFormData,\n accountCreated,\n asaasOnChange,\n asaasOnContinue,\n loadingCep,\n asaasEnabledFormOpenAccountContinue,\n asaasEnabledMainDataContinue,\n asaasOnGoback,\n asaasOnSubmit,\n asaasResetForm,\n asaasCnpjTypes,\n asaasCallformStepTwoMyCEP,\n asaasTitle,\n asaasDescription,\n asaasReachedThridStep,\n createAsaasContinueLabel,\n dontCreateAsaasContinueLabel,\n themeSelected,\n wordPressThemesBlock,\n activeSetupStep,\n setupSteps,\n handleLoadingWordpress,\n descriptionImageAlt,\n imageItems,\n isWondersuiteEnabled,\n };\n\n return defaultProps;\n };\n\n return (\n \n \n {title}\n \n \n {subtitle}\n \n\n \n );\n};\n\nexport default WizardWordPressConfig;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n padding: 40px 0px 35px 0px;\n width: 100%;\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding: 20px 0px 82px 0px;\n } \n `}\n`;\n\nexport const Title = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n margin: 0 0 16px 0px;\n\n span {\n color: ${theme.v2.colors.brand.primaryMedium};\n }\n @media (max-width: ${theme.v2.breakpoints.md}) {\n font-size: ${theme.v2.font.sizes.sm};\n }\n `}\n`;\n\nexport const Subtitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n margin: 0px 0px 32px 0px;\n @media (max-width: ${theme.v2.breakpoints.md}) {\n margin: 0px 0px 24px 0px;\n }\n `}\n`;\n\nexport const CardsWrapper = styled.div`\n ${({ shouldRenderEcommercePlusCard, theme }) => css`\n align-items: flex-start;\n display: flex;\n flex-wrap: wrap;\n gap: ${shouldRenderEcommercePlusCard ? '56px' : '20px'};\n justify-content: center;\n\n > div {\n width: 313px;\n }\n\n > span {\n color: ${theme.v2.colors.neutral.lowPure};\n font-weight: ${theme.v2.font.weights.medium};\n }\n\n @media (max-width: 1349px){\n align-items: center;\n flex-direction: column;\n gap: 16px;\n }\n `}\n`;\n","import styled, { css } from 'styled-components';\nimport colorfulLine from '@/media/icons/colorfulLine.svg';\n\nexport const Card = styled.div`\n ${({ theme, featured }) => css`\n background-image: ${featured ? `url(${colorfulLine})` : undefined};\n background-size: cover;\n border-radius: 4px;\n border: ${featured ? '0px' : `1px solid ${theme.v1.color.line.wizard}`};\n display: flex;\n flex-direction: row;\n height: auto;\n max-width: 498px;\n position: relative;\n width: 100%;\n `}\n`;\n\nexport const CardContainer = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n border-radius: 4px;\n display:flex;\n flex-direction: column;\n margin: 5px;\n padding: 74px 19px 32px 19px;\n width: 100%;\n `}\n`;\n\nexport const CardHeader = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n`;\n\nexport const CardTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.bold};\n margin: 16px 0px 0px;\n text-align: center;\n `}\n`;\n\nexport const CardSubtitle = styled.h5`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 8px 0px 0px;\n max-width: 265px;\n text-align: center;\n `}\n`;\n\nexport const CardDescription = styled.h5`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 16px 0px;\n min-height: 54px;\n text-align: center;\n span {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n\nexport const WithoutDesc = styled.h5`\n margin: 16px 0px;\n min-height: 10px;\n text-align: center;\n`;\n\nexport const CardSeparator = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.feedback.canceledPure};\n height: 1px;\n margin: 24px auto 16px auto;\n max-width: 265px;\n width: 100%;\n @media (max-width: ${theme.v2.breakpoints.md}) {\n margin: 24px auto;\n }\n `}\n`;\n\nexport const CardWarningSeparator = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.feedback.canceledPure};\n height: 1px;\n margin: 0px auto 16px auto;\n width: 100%;\n `}\n`;\n\nexport const ShowMoreWrapper = styled.div`\n ${({ theme, open }) => css`\n align-items: center;\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n justify-content: center;\n letter-spacing: 0.01px;\n line-height: 22px;\n padding: ${open ? '0px 0px 24px 0px' : '0px'};\n transition: padding 200ms ease-in-out;\n \n & > a {\n color: ${theme.v2.colors.brand.primaryPure};\n text-decoration: none;\n }\n \n & svg {\n fill: transparent;\n margin-left: 6px;\n max-width: 0px;\n overflow: hidden;\n stroke: transparent;\n transform: ${open ? 'rotate(-90deg)' : 'rotate(90deg)'};\n transition: fill 150ms ease-in-out, stroke 150ms ease-in-out, width 150ms ease-in-out;\n }\n\n &:hover {\n svg {\n fill: ${theme.v2.colors.brand.primaryPure};\n max-width: 100px;\n stroke: ${theme.v2.colors.brand.primaryPure};\n }\n }\n\n > span { \n @media (max-width: ${theme.v2.breakpoints.md}) {\n display: none;\n }\n }\n\n @media (min-width: ${theme.v2.breakpoints.md}) {\n display: none;\n }\n `}\n`;\n\nexport const ContentWrapper = styled.div`\n ${({ open, theme }) => css`\n display: flex;\n flex-direction: column;\n transition: max-height 200ms ease-in-out, padding 200ms ease-in-out;\n flex-grow: 1;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n max-height: ${open ? '1000px' : '0px'};\n overflow: hidden;\n }\n `}\n`;\n\nexport const ListIconWrapper = styled.div`\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: 20px;\n height: 40px;\n justify-content: space-between;\n`;\n\nexport const ListIcon = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n`;\n\nexport const ListIconImage = styled.img`\n`;\n\nexport const IconWrapper = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n margin-left: 8px;\n`;\n\nexport const LabelWrapper = styled.div`\n align-items: flex-start;\n display: flex;\n margin: 0px 0px 16px 0px;\n`;\n\nexport const FeaturesListIcon = styled.div`\n padding-right: 8px;\n svg {\n width: 19px;\n }\n`;\n\n\nexport const Label = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: inline;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0px;\n line-height: 19px;\n margin: 0;\n\n > span { \n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n\nexport const ActionWrapper = styled.div`\n ${({ featured }) => css`\n align-items: center;\n display: flex;\n justify-content: center;\n width: 100%;\n button {\n width: ${featured ? '100%' : 'auto'};\n }\n `}\n`;\n\nexport const WarningIconWrapper = styled.div`\n margin: 0px 8px 0px 0px;\n`;\n\nexport const WarningWrapper = styled.div`\n align-items: flex-start;\n display: flex;\n`;\n\nexport const TagWrapper = styled.div`\n display: flex;\n justify-content: center;\n position: absolute;\n top: 32px;\n width: 100%;\n div {\n text-transform: uppercase;\n }\n`;\n\nexport const PreList = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.bold};\n margin-bottom: 24px;\n text-align: center;\n `}\n`;\n","import { IconArrowForward, IconInfo } from '@/icons/';\nimport { TextButton } from '@/pages/common/v1';\nimport React, { useContext, useState } from 'react';\nimport * as Styles from './WizardWondersuiteToolCard.styles';\nimport { ThemeContext } from 'styled-components';\nimport { Button, IconCheck, Tag } from 'gatorcomponents';\n\nconst WizardWondersuiteToolCard = ({\n tool,\n showMoreText,\n showLessText,\n testId,\n onToolCardClick,\n sitesLoading,\n}) => {\n const theme = useContext(ThemeContext);\n const [open, toggleOpen] = useState(tool.featured);\n\n const handleShowMore = () => {\n toggleOpen(!open);\n };\n\n const toolCardClick = (toolTitle) => {\n tool.action && tool.action();\n onToolCardClick && onToolCardClick(toolTitle);\n };\n\n return (\n \n {tool.tag && (\n \n \n )}\n \n \n {tool.iconList && (\n \n {tool.iconList.map(iconObject => (\n \n \n ))}\n \n )}\n \n {tool.title}\n \n {tool.subtitle && (\n \n {tool.subtitle}\n \n )}\n {tool.description() !== null ? (\n \n {tool.description()}\n \n )\n : \n toolCardClick(tool.titleText)}\n\n />\n \n \n\n \n handleShowMore()}\n />\n \n\n \n {tool.preList && ({tool.preList} )}\n {tool.items.map(item => ((\n \n \n \n \n {item && item()}\n \n \n )))}\n {tool.warning && (\n <>\n \n \n \n \n {tool.warning}\n \n \n \n )}\n \n\n \n \n );\n};\n\nexport default WizardWondersuiteToolCard;\n","import { IconDetailedSiteBuilder } from '@/icons/';\nimport React from 'react';\nimport * as Styles from './WizardTools.styles';\nimport { WizardWondersuiteToolCard } from '../WizardWondersuiteToolCard';\n\nconst WizardTools = ({\n title = [\n 'my ',\n '\"title\" ',\n 'sample',\n ],\n subtitle = 'subtitle sample',\n tools = [\n {\n featured: true,\n icon: \n \n {title[0]}\n {title[1]} \n {title[2]}\n \n\n \n {subtitle}\n \n\n \n {tools.map(tool => (\n \n \n \n );\n};\n\nexport default WizardTools;\n","import { locale } from '@/utils/locale';\nimport React from 'react';\nimport { Link } from '@/pages/common';\n\nexport const useWizardTipsLocale = {\n sitebuilder: {\n title: locale('sitesWizard.tips.createSites.title'),\n subtitle: () => (\n <>\n {locale('sitesWizard.tips.createSites.altSubtitle.0')}\n {\n \n \n \n \n\n \n);\n\n\nexport default IconPaper;\n","import React from 'react';\nimport { faqTagManager } from '@/utils/ThirdParties/tagManager';\nimport * as Styles from './FaqContent.styles';\nimport { Link } from '@/pages/common';\nimport { IconArrowForward } from '@/icons/IconArrowForward';\nimport { Button } from '@/pages/common/v1/Button';\nimport { IconPaper } from '@/icons/IconPaper';\n\nconst FaqContent = ({\n faqLocaleTitle,\n faqLocaleButton,\n questionsFaq,\n handleMoreContent,\n onClickMaterial,\n}) => {\n const handleClick = question => faqTagManager(question);\n const questions = questionsFaq;\n\n return (\n \n \n\n \n \n {faqLocaleTitle}\n \n \n\n \n \n {questions && questions.length && questions.map((questions, index) => (\n \n {\n handleClick(questions.question);\n onClickMaterial(index + 1);\n }}\n target=\"_blank\"\n text={questions.question}\n />\n \n ))}\n \n \n\n \n \n \n \n \n \n );\n};\n\n\nexport default FaqContent;\n","import styled, { css } from 'styled-components';\n\nexport const AsaasSitesAdvertisementWrapper = styled.div`\n ${({ theme, wizardVariant }) => css`\n background-color: ${theme.v1.color.white.primary};\n border: solid 1px ${theme.v1.color.background.wizard};\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n font-family: ${theme.v1.font.family.primary};\n gap: 16px;\n margin-top: ${wizardVariant ? '25px' : '0px'};\n padding: 0px;\n position:relative;\n `}\n`;\n\nexport const HeaderWrapper = styled.div`\n ${({ theme, wizardVariant }) => css`\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: ${wizardVariant ? '29px 0px 0px 20px' : '24px 24px 0px 24px'};\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n padding: ${wizardVariant ? '42px 0px 8px 14px' : '18px 18px 0px 18px'};\n }\n `}\n`;\n\nexport const HeaderContentWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 8px;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n align-items: start;\n flex-direction: column;\n gap: 11px;\n }\n `}\n`;\n\nexport const FooterWrapper = styled.div`\n${({ theme, wizardVariant }) => css`\n align-items: flex-start;\n display: flex;\n justify-content: space-between;\n padding: ${wizardVariant ? '0px 24px 56px 20px' : '0px 24px 56px 24px'};\n @media (min-width: ${theme.v1.breakpoints.md}) {\n padding: ${wizardVariant ? '0px 24px 30px 20px' : '0px 24px 30px 24px'};\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n padding: ${wizardVariant ? '0px 24px 30px 14px' : '0px 24px 56px 18px'};\n }\n `}\n`;\n\nexport const Title = styled.h5`\n ${({ theme, wizardVariant }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 19px;\n margin: 0;\n padding: 0;\n padding-top: ${wizardVariant ? '0px' : '8px'}\n text-align: left;\n text-transform: uppercase;\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n max-width: ${wizardVariant ? 'unset' : '180px'};\n }\n @media (max-width: 670px) {\n max-width: ${wizardVariant ? '188px' : '180px'};\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n max-width: 207px;\n }\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme, wizardVariant }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n margin: 0;\n max-width: ${wizardVariant ? '633px' : '361px'};\n padding: 0;\n text-align: left;\n span {\n font-weight: ${theme.v1.font.weights.bold};\n }\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n max-width: ${wizardVariant ? '400px' : '200px'};\n }\n @media (max-width: 670px) {\n max-width: ${wizardVariant ? '227px' : '200px'};\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n max-width: 239px;\n }\n `}\n`;\n\nexport const Chip = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v1.color.warning.pending};\n border-radius: 16px;\n color: ${theme.v1.color.white.primary};\n display: flex;\n font-size: 12px;\n height: 22px;\n letter-spacing: 0.01px;\n line-height: 14px;\n padding: 0 10px;\n font-weight: ${theme.v1.font.weights.bold};\n white-space: nowrap;\n\n @media (min-width: ${theme.v1.breakpoints.md}) {\n max-width: 430px;\n }\n \n `}\n`;\n\nexport const HeaderDeco = styled.img`\n ${({ theme, wizardVariant }) => css`\n position: absolute;\n right: ${wizardVariant ? '56px' : '8px'};\n top: 19px;\n @media (max-width: 1366px) {\n width: 110px;\n }\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n right: 8px;\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n width: ${wizardVariant ? '116px' : '131px'};\n top: ${wizardVariant ? '8px' : '19px'};\n }\n `}\n`;\n\nexport const DecoTriangle = styled.div`\n ${({ theme }) => css`\n background:linear-gradient(to bottom right,transparent 50%,${theme.v1.color.background.wizard} 50%);\n bottom: 0;\n height: 110px;\n position:absolute;\n right: 0;\n width: 140px;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n width: 143px;\n }\n `}\n`;\n\nexport const AsaasLogo = styled.img`\n bottom: 24px;\n position: absolute;\n right: 16px;\n`;\n","import { Button } from '@/pages/common/v1';\nimport React from 'react';\nimport * as Styles from './AsaasSitesAdvertisement.styles';\nimport asaasDeco from '@/media/asaas/asaas-deco.png';\nimport asaasLogo from '@/media/asaas/asaas-logo.svg';\n\nfunction AsaasSitesAdvertisement({\n testId = 'asaas-bottom-banner',\n knowMore = 'Know More',\n description = 'Description',\n title = 'Title Tag',\n newTag = 'New',\n handleKnowMoreClick = () => {},\n wizardVariant = false,\n}) {\n const handleClick = () => {\n handleKnowMoreClick && handleKnowMoreClick();\n };\n\n return (\n \n \n \n {newTag}\n \n )}\n \n {wizardVariant && (\n \n {newTag}\n \n )}\n {title} \n \n {description} \n \n \n \n \n );\n}\n\nexport default AsaasSitesAdvertisement;\n","import styled, { css } from 'styled-components';\n\nexport const WizardAsaasLoginBannerWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n border: solid 1px ${theme.v2.colors.feedback.canceledLight};\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n font-family: ${theme.v2.font.family.primary};\n gap: 16px;\n margin-top: 26px;\n padding: 0px;\n position:relative;\n `}\n`;\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: column;\n margin-bottom: 29px;\n position: relative;\n @media (max-width: ${theme.v2.breakpoints.sm}){\n align-items: flex-start;\n margin-left: 22px;\n }\n `}\n`;\n\nexport const AsaasStamp = styled.img`\n ${({ theme }) => css`\n left: 0;\n position: absolute;\n top: 0;\n @media (max-width: ${theme.v2.breakpoints.sm}){\n left: auto;\n right: 0;\n transform: scaleX(-1);\n }\n `}\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: 32px;\n margin: 17px 18px 0px 18px;\n @media (max-width: ${theme.v2.breakpoints.sm}){\n margin: 17px 36px 0px 0px;\n text-align: left;\n }\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.normal};\n line-height: 19px;\n margin: 16px;\n max-width: 579px;\n text-align: center;\n @media (max-width: ${theme.v2.breakpoints.sm}){\n margin-left: 0px;\n margin-right: 61px;\n text-align: left;\n }\n `}\n`;\n","import React from 'react';\nimport * as Styles from './WizardAsaasLoginBanner.styles';\nimport { Button } from '@/pages/common/v1';\nimport AsaasStamp from '@/media/asaas/asaas-stamp.svg';\n\nconst WizardAsaasLoginBanner = ({\n testId = 'wizard-asaas-login-banner',\n title = 'Asaas Wizard Title',\n description = 'Asaas Wizard Description',\n buttonLabel = 'Asaas Wizard Button Label',\n onButtonClick,\n}) => {\n const handleClick = () => {\n onButtonClick && onButtonClick();\n };\n return (\n \n \n {title} \n\n {description} \n\n \n \n );\n};\n\nexport default WizardAsaasLoginBanner;\n","import React, { useContext, useEffect } from 'react';\nimport { Button } from '@/pages/common';\nimport * as Styles from './WizardTips.styles';\nimport celebration from '@/media/siteBuilder/celebration.png';\nimport { IconInfo } from '@/icons';\nimport { ThemeContext } from 'styled-components';\nimport { FaqContent } from '@/pages/sites/components/FaqContent';\nimport { AsaasSitesAdvertisement } from '../AsaasSitesAdvertisement';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { WizardAsaasLoginBanner } from '../WizardAsaasLoginBanner';\n\nlet timeoutAutoSsl = null;\nconst WizardTips = ({\n title = 'title sample',\n subtitle = null,\n seeBellow,\n hiddenInfo = 'hiddenInfo sample',\n buttonLabel = null,\n onClickButton,\n testId = 'sitebuilder_tips',\n faqLocaleTitle,\n faqLocaleButton,\n questionsFaq,\n handleMoreContent,\n onClickMaterial,\n asaasTag,\n asaasTitle,\n asaasDescription,\n asaasDescriptionClick,\n asaasButtonLabel,\n asaasBannerClick,\n id,\n asaasLoginBannerTitle,\n asaasLoginBannerDescription,\n asaasLoginBannerButton,\n onClickAsaasLoginBanner,\n asaasInsideWizardShouldAppear,\n asaasReachedThridStep = false,\n enabledAsaas,\n checkPreChat,\n requestAutoSsl,\n}) => {\n const theme = useContext(ThemeContext);\n const { palette } = theme;\n const isSiteBuilderTips = id === 'sitebuilder';\n const shouldRenderButtonInSiteBuilder = isSiteBuilderTips;\n const renderSubtitle = typeof subtitle === 'function' ? subtitle() : subtitle;\n const isWordPressTips = id === 'wordpress'\n || id === 'wordpress-woocommerce'\n || id === 'wordpress-woocommerce-trial'\n || id === 'wordpress-woocommerce-plus';\n\n useEffect(() => {\n checkPreChat && checkPreChat();\n }, [checkPreChat]);\n\n const handleClick = () => {\n onClickButton && onClickButton();\n\n if (shouldRenderButtonInSiteBuilder) {\n const tenSeconds = 10000;\n clearTimeout(timeoutAutoSsl);\n timeoutAutoSsl = setTimeout(() => {\n requestAutoSsl && requestAutoSsl();\n }, tenSeconds);\n }\n };\n\n const descriptionClick = () => {\n asaasDescriptionClick && asaasDescriptionClick();\n };\n\n return (\n \n \n \n \n {title} \n \n\n {((!isSiteBuilderTips && buttonLabel)\n || shouldRenderButtonInSiteBuilder) && (\n \n \n )}\n \n\n {!isSiteBuilderTips && subtitle && (\n \n \n {renderSubtitle}\n \n \n )}\n\n \n \n \n\n \n {hiddenInfo}\n \n \n \n\n {isBRServer && isWordPressTips && enabledAsaas && !asaasReachedThridStep && (\n descriptionClick()}\n knowMore={asaasButtonLabel}\n handleKnowMoreClick={asaasBannerClick}\n wizardVariant\n />\n )}\n\n {isWordPressTips && asaasInsideWizardShouldAppear && asaasReachedThridStep && (\n \n {seeBellow[0]}\n {seeBellow[1]} \n \n\n \n );\n};\n\nexport default WizardTips;\n","import { api } from '@/utils/api';\nimport { useSelector } from 'react-redux';\nimport { COUNTRY, config } from '@/config';\n\nconst { AWS_DNS_SERVICE_URL } = config;\n\nconst getPlanDns = (domainData) => {\n if (domainData) {\n const { ns1, ns2 } = domainData.data;\n return [ns1, ns2];\n }\n};\n\nconst useCompareDns = () => {\n const { token } = useSelector(state => state.auth);\n const { jwt: jwtToken } = useSelector(state => state.auth);\n const compareDns = async (domainLabel, planId) => {\n if (!domainLabel && !planId) return false;\n let planDns = [];\n let domainDns = [];\n\n const requestDomain = {\n headers: {\n Authorization: `Bearer ${jwtToken}`,\n },\n url: `${AWS_DNS_SERVICE_URL}/domains/${domainLabel}/whois`,\n };\n\n const requestHosting = {\n headers: {\n Authorization: token,\n },\n url: `api/v2/clientarea/${COUNTRY}/product/hosting/${planId}`,\n };\n\n try {\n const result = await Promise.all([\n api.aws.get(requestDomain),\n api.whmcs.get(requestHosting),\n ]);\n const [responseDomain, responseHosting] = result;\n domainDns = responseDomain.data.domain.name_servers;\n planDns = getPlanDns(responseHosting.data);\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('dns comparison error', e);\n }\n\n if ((planDns && planDns.length) && (domainDns && domainDns.length)) {\n const dnsAreEquals = planDns.every((value, i) => value === domainDns[i]);\n\n if (dnsAreEquals) return true;\n }\n\n return false;\n };\n\n return { compareDns };\n};\n\n\nexport default useCompareDns;\n","/* eslint-disable camelcase */\nimport { api } from '@/utils/api';\nimport { useSelector } from 'react-redux';\nimport { COUNTRY } from '@/config';\n\nfunction useVerifyDomainNative() {\n const { jwt: jwtToken } = useSelector(state => state.auth);\n const { id: userId } = useSelector(state => state.summary);\n\n const domainNative = async (domain) => {\n let isNative = false;\n\n try {\n const request = {\n headers: {\n Authorization: `Bearer ${jwtToken}`,\n 'X-Client-ID': userId,\n 'X-Brand': COUNTRY,\n },\n url: `/verify/registration?domain=${domain}&brand=${COUNTRY}`,\n };\n\n await api.aws.get(request).then((response) => {\n const { is_hosted_on_hostgator } = response.data;\n isNative = is_hosted_on_hostgator;\n });\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('domain native compare error', e);\n }\n return isNative;\n };\n\n return { domainNative };\n}\n\n\nexport default useVerifyDomainNative;\n","export const SELECTED_TOOL = {\n WORDPRESS: 'wordpress',\n WOOCOMMERCE: 'wordpress-woocommerce',\n ECOMMERCEPLUS_TRIAL: 'wordpress-woocommerce-trial',\n ECOMMERCEPLUS: 'wordpress-woocommerce-plus',\n};\n","import { SELECTED_TOOL } from './useWizardWordpressThemes.enum';\nimport {\n blocksyP,\n blocksy,\n bravadaP,\n bravada,\n colibriP,\n colibri,\n helloP,\n hello,\n hestiaP,\n hestia,\n rifeP,\n rife,\n} from '@/media/siteBuilder/wordpressThemes';\nimport {\n asheP,\n ashe,\n astraP,\n astra,\n envoP,\n envo,\n shopmaxP,\n shopmax,\n storefrontP,\n storefront,\n supermarketP,\n supermarket,\n} from '@/media/siteBuilder/woocommerceThemes';\n\nconst woocommerceThemes = [\n {\n title: 'Ashe',\n image: asheP,\n imageDetails: ashe,\n value: 'Ashe_admin',\n id: 1,\n },\n {\n title: 'Astra',\n image: astraP,\n imageDetails: astra,\n value: 'Astra_admin',\n id: 2,\n },\n {\n title: 'Envo',\n image: envoP,\n imageDetails: envo,\n value: 'Envo_admin',\n id: 3,\n },\n {\n title: 'ShopMax',\n image: shopmaxP,\n imageDetails: shopmax,\n value: 'ShopMax_admin',\n id: 4,\n },\n {\n title: 'Storefront',\n image: storefrontP,\n imageDetails: storefront,\n value: 'Storefront_admin',\n id: 5,\n },\n {\n title: 'Supermarket',\n image: supermarketP,\n imageDetails: supermarket,\n value: 'Supermarket_admin',\n id: 6,\n },\n];\n\nconst themes = {\n [SELECTED_TOOL.WORDPRESS]: [\n {\n title: 'Blocksy',\n image: blocksyP,\n imageDetails: blocksy,\n value: 'Blocksy_admin',\n id: 1,\n },\n {\n title: 'Bravada',\n image: bravadaP,\n imageDetails: bravada,\n value: 'Bravada_admin',\n id: 2,\n },\n {\n title: 'Colibri',\n image: colibriP,\n imageDetails: colibri,\n value: 'Colibri_admin',\n id: 3,\n },\n {\n title: 'Hello',\n image: helloP,\n imageDetails: hello,\n value: 'Hello_admin',\n id: 4,\n },\n {\n title: 'Hestia',\n image: hestiaP,\n imageDetails: hestia,\n value: 'Hestia_admin',\n id: 5,\n },\n {\n title: 'Rife',\n image: rifeP,\n imageDetails: rife,\n value: 'Free_admin',\n id: 6,\n },\n ],\n [SELECTED_TOOL.ECOMMERCEPLUS_TRIAL]: woocommerceThemes,\n [SELECTED_TOOL.ECOMMERCEPLUS]: woocommerceThemes,\n [SELECTED_TOOL.WOOCOMMERCE]: woocommerceThemes,\n};\n\nconst rules = {\n themes,\n};\n\nexport default rules;\n","import { useMemo } from 'react';\nimport rules from './useWizardWordpressThemes.rules';\n\nconst useWizardWordpressThemes = (selectedTheme = {}) => {\n const themes = useMemo(\n () => rules.themes[selectedTheme],\n [selectedTheme],\n );\n\n return themes;\n};\n\nexport default useWizardWordpressThemes;\n","import { useMemo } from 'react';\nimport { FieldValidators } from '@/utils/FieldValidators';\n\nconst useWizardWordpressSetupForm = (userEmail, isWondersuiteEnabled) => {\n const userMinimumSize = isWondersuiteEnabled ? 4 : 8;\n\n const defaultFormState = useMemo(() => ({\n name: {\n value: '',\n empty: true,\n error: false,\n },\n description: {\n value: '',\n empty: true,\n error: false,\n },\n email: {\n value: userEmail,\n empty: false,\n error: !FieldValidators.email(userEmail),\n },\n user: {\n value: '',\n empty: true,\n error: false,\n },\n password: {\n value: '',\n empty: true,\n error: false,\n },\n confirmPassword: {\n value: '',\n empty: true,\n error: false,\n },\n }), [userEmail]);\n\n const validatePasswordOnChange = ({ event, wodpressSetupValues }) => {\n const { value, name: fieldName } = event.target;\n let newFormValues = null;\n\n if (fieldName === 'password') {\n const hasLowerAndUpperCase = FieldValidators.hasLowerAndUper(value);\n const hasNumber = FieldValidators.hasNumber(value);\n const hasSymbol = FieldValidators.hasSpecial(value);\n const hasAtLeastEight = value.length >= 8;\n const matchConfirmation = wodpressSetupValues.confirmPassword.value === value;\n\n newFormValues = {\n ...wodpressSetupValues,\n confirmPassword: {\n ...wodpressSetupValues.confirmPassword,\n error: !matchConfirmation,\n matchConfirmation,\n },\n [fieldName]: {\n ...wodpressSetupValues[fieldName],\n empty: value.length === 0,\n value,\n error: !hasLowerAndUpperCase || !hasNumber || !hasSymbol || !hasAtLeastEight,\n hasLowerAndUpperCase,\n hasNumber,\n hasSymbol,\n hasAtLeastEight,\n matchConfirmation,\n },\n };\n\n return newFormValues;\n }\n\n if (fieldName === 'confirmPassword') {\n const matchConfirmation = wodpressSetupValues.password.value === value;\n\n newFormValues = {\n ...wodpressSetupValues,\n password: {\n ...wodpressSetupValues.password,\n matchConfirmation,\n },\n [fieldName]: {\n ...wodpressSetupValues[fieldName],\n empty: value.length === 0,\n value,\n error: !matchConfirmation,\n },\n };\n\n return newFormValues;\n }\n };\n\n const validateUserOnChange = ({ event, wodpressSetupValues }) => {\n const { value, name: fieldName } = event.target;\n let newFormValues = null;\n\n const notHaveSymbol = FieldValidators.userWordpressHasNotSpecial(value);\n const hasRequiredSize = value.length >= userMinimumSize;\n\n newFormValues = {\n ...wodpressSetupValues,\n user: {\n ...wodpressSetupValues[fieldName],\n empty: value.length === 0,\n value,\n error: !notHaveSymbol || !hasRequiredSize,\n hasRequiredSize,\n notHaveSymbol,\n },\n };\n\n return newFormValues;\n };\n\n const handleUpdateWordpressSetupValues = ({ event, wodpressSetupValues }) => {\n const { name: fieldName, value } = event.target;\n const isPassword = fieldName === 'password' || fieldName === 'confirmPassword';\n const isUser = fieldName === 'user';\n let newFormValues = null;\n\n if (!isPassword && !isUser) {\n newFormValues = {\n ...wodpressSetupValues,\n [fieldName]: {\n ...wodpressSetupValues[fieldName],\n empty: value.length === 0,\n value,\n },\n };\n\n return newFormValues;\n }\n\n if (isPassword) {\n return validatePasswordOnChange({ event, wodpressSetupValues });\n }\n if (isUser) {\n return validateUserOnChange({ event, wodpressSetupValues });\n }\n };\n\n const handleBlurWordpressSetupValues = ({ event, wodpressSetupValues }) => {\n const { name: fieldName, value } = event.target;\n const isNotEmail = fieldName !== 'password' && fieldName !== 'confirmPassword' && fieldName !== 'user';\n let newFormValues = null;\n\n const rules = {\n name: value.length < 3,\n description: false,\n email: !FieldValidators.email(value),\n };\n\n if (isNotEmail) {\n newFormValues = {\n ...wodpressSetupValues,\n [fieldName]: {\n ...wodpressSetupValues[fieldName],\n error: rules[fieldName],\n },\n };\n\n return newFormValues;\n }\n };\n\n const validateWordPressInfoInputs = ({ wodpressSetupValues }) => {\n let setupData = { ...wodpressSetupValues };\n const fields = ['name', 'email'];\n\n fields.forEach((fieldName) => {\n setupData[fieldName].error = false;\n\n const rules = {\n name: wodpressSetupValues.name.value.length < 3,\n email: !FieldValidators.email(wodpressSetupValues.email.value),\n };\n\n setupData = {\n ...setupData,\n [fieldName]: {\n ...setupData[fieldName],\n error: rules[fieldName],\n },\n };\n });\n\n return setupData;\n };\n\n const wordpressSetupData = {\n defaultFormState,\n validatePasswordOnChange,\n validateUserOnChange,\n handleUpdateWordpressSetupValues,\n handleBlurWordpressSetupValues,\n validateWordPressInfoInputs,\n };\n\n return wordpressSetupData;\n};\n\nexport default useWizardWordpressSetupForm;\n","import { locale } from '@/utils/locale';\n\nexport const useWizardWordpressPluginsLocale = {\n elementor: locale('sitesWizard.wordPressInstall.plugin.descriptions.elementor'),\n contactForm: locale('sitesWizard.wordPressInstall.plugin.descriptions.contactForm'),\n jivoChat: locale('sitesWizard.wordPressInstall.plugin.descriptions.jivoChat'),\n googleKit: locale('sitesWizard.wordPressInstall.plugin.descriptions.googleKit'),\n yoast: locale('sitesWizard.wordPressInstall.plugin.descriptions.yoast'),\n};\n","import { useMemo } from 'react';\nimport {\n contactform,\n elementor,\n jivochat,\n sitekit,\n yoast,\n} from '@/media/siteBuilder/plugins';\nimport { useWizardWordpressPluginsLocale } from './useWizardWordpressPlugins.locale';\n\nconst useWizardWordpressPlugins = () => {\n const defaultPluginsList = useMemo(() => [\n {\n title: 'Yoast SEO',\n description: useWizardWordpressPluginsLocale.yoast,\n image: yoast,\n value: 'Yoast_admin',\n gaValue: 'Yoast SEO',\n id: 1,\n },\n {\n title: 'Elementor Website Builder',\n description: useWizardWordpressPluginsLocale.elementor,\n image: elementor,\n value: 'Elementor_admin',\n gaValue: 'Elementor',\n id: 2,\n },\n {\n title: 'Site Kit by Google',\n description: useWizardWordpressPluginsLocale.googleKit,\n image: sitekit,\n value: 'Google_admin',\n gaValue: 'Site Kit by Google',\n id: 3,\n },\n {\n title: 'Contact Form 7',\n description: useWizardWordpressPluginsLocale.contactForm,\n image: contactform,\n value: 'Contact_admin',\n gaValue: 'Contact Form 7',\n id: 4,\n },\n {\n title: 'JivoChat',\n description: useWizardWordpressPluginsLocale.jivoChat,\n image: jivochat,\n value: 'JivoChat_admin',\n gaValue: 'Jivo Chat',\n id: 5,\n },\n ], []);\n\n const getSelectedPlugins = (plugins) => {\n const { clickedPlugin, pluginsSelected } = plugins;\n const pluginArray = [...pluginsSelected];\n const activePluginIndex = pluginsSelected.findIndex(plugin => plugin === clickedPlugin);\n const isActive = activePluginIndex > -1;\n\n if (isActive) {\n pluginArray.splice(activePluginIndex, 1);\n } else if (!isActive) {\n pluginArray.push(clickedPlugin);\n }\n\n return pluginArray;\n };\n\n const wordpressPluginsData = {\n defaultPluginsList,\n getSelectedPlugins,\n };\n\n return wordpressPluginsData;\n};\n\nexport default useWizardWordpressPlugins;\n","import { locale } from '@/utils/locale';\n\nexport const useWizardToolsLocale = {\n woocommerce: {\n title: locale('sitesWizard.tools.woocommerce.title'),\n titleText: locale('sitesWizard.tools.woocommerce.titleText'),\n items: [\n locale('sitesWizard.tools.woocommerce.items.0'),\n locale('sitesWizard.tools.woocommerce.items.1'),\n locale('sitesWizard.tools.woocommerce.items.2'),\n locale('sitesWizard.tools.woocommerce.items.3'),\n onWoocommerceHelpMaterialClick => locale('sitesWizard.tools.woocommerce.items.4')(onWoocommerceHelpMaterialClick),\n locale('sitesWizard.tools.woocommerce.items.5'),\n ],\n warning: locale('sitesWizard.tools.woocommerce.warning'),\n action: locale('sitesWizard.tools.woocommerce.action'),\n },\n wordpress: {\n title: locale('sitesWizard.tools.wordpress.title'),\n titleText: locale('sitesWizard.tools.wordpress.titleText'),\n description: locale('sitesWizard.tools.wordpress.description'),\n items: [\n locale('sitesWizard.tools.wordpress.items.0'),\n locale('sitesWizard.tools.wordpress.items.1'),\n locale('sitesWizard.tools.wordpress.items.2'),\n locale('sitesWizard.tools.wordpress.items.3'),\n locale('sitesWizard.tools.wordpress.items.4'),\n ],\n warning: locale('sitesWizard.tools.wordpress.warning'),\n action: locale('sitesWizard.tools.wordpress.action'),\n },\n sitebuilder: {\n title: locale('sitesWizard.tools.sitebuilder.title'),\n titleText: locale('sitesWizard.tools.sitebuilder.titleText'),\n description: locale('sitesWizard.tools.sitebuilder.description'),\n items: [\n locale('sitesWizard.tools.sitebuilder.items.0'),\n locale('sitesWizard.tools.sitebuilder.items.1'),\n locale('sitesWizard.tools.sitebuilder.items.2'),\n locale('sitesWizard.tools.sitebuilder.items.3'),\n locale('sitesWizard.tools.sitebuilder.items.4'),\n ],\n action: locale('sitesWizard.tools.sitebuilder.action'),\n },\n otherCommerce: {\n title: locale('sitesWizard.tools.otherCommerce.title'),\n titleText: locale('sitesWizard.tools.otherCommerce.titleText'),\n description: locale('sitesWizard.tools.otherCommerce.description'),\n items: [\n locale('sitesWizard.tools.otherCommerce.items.0'),\n locale('sitesWizard.tools.otherCommerce.items.1'),\n ],\n otherCommerceOption: locale('sitesWizard.tools.otherCommerce.otherIconLabel'),\n warning: locale('sitesWizard.tools.otherCommerce.warning'),\n action: locale('sitesWizard.tools.otherCommerce.action'),\n },\n otherSite: {\n title: locale('sitesWizard.tools.otherSite.title'),\n titleText: locale('sitesWizard.tools.otherSite.titleText'),\n description: locale('sitesWizard.tools.otherSite.description'),\n items: [\n locale('sitesWizard.tools.otherSite.items.0'),\n locale('sitesWizard.tools.otherSite.items.1'),\n ],\n otherSiteOption: locale('sitesWizard.tools.otherSite.otherIconLabel'),\n warning: locale('sitesWizard.tools.otherSite.warning'),\n action: locale('sitesWizard.tools.otherSite.action'),\n },\n wondersuiteWoocommerce: {\n title: locale('sitesWizard.wondersuite.tools.toolsCards.woocommerce.title'),\n description: locale('sitesWizard.wondersuite.tools.toolsCards.woocommerce.description'),\n items: [\n locale('sitesWizard.wondersuite.tools.toolsCards.woocommerce.items.0'),\n locale('sitesWizard.wondersuite.tools.toolsCards.woocommerce.items.1'),\n locale('sitesWizard.wondersuite.tools.toolsCards.woocommerce.items.2'),\n locale('sitesWizard.wondersuite.tools.toolsCards.woocommerce.items.3'),\n locale('sitesWizard.wondersuite.tools.toolsCards.woocommerce.items.4'),\n locale('sitesWizard.wondersuite.tools.toolsCards.woocommerce.items.5'),\n ],\n warning: locale('sitesWizard.wondersuite.tools.toolsCards.woocommerce.warning'),\n action: locale('sitesWizard.wondersuite.tools.toolsCards.woocommerce.action'),\n },\n wondersuiteOtherSite: {\n title: locale('sitesWizard.wondersuite.tools.toolsCards.otherSite.title'),\n description: locale('sitesWizard.wondersuite.tools.toolsCards.otherSite.description'),\n items: [\n locale('sitesWizard.wondersuite.tools.toolsCards.otherSite.items.0'),\n locale('sitesWizard.wondersuite.tools.toolsCards.otherSite.items.1'),\n ],\n warning: locale('sitesWizard.wondersuite.tools.toolsCards.otherSite.warning'),\n action: locale('sitesWizard.wondersuite.tools.toolsCards.otherSite.action'),\n },\n ecommercePlus: {\n title: locale('sitesWizard.wondersuite.tools.toolsCards.ecommercePlus.title'),\n subtitle: locale('sitesWizard.wondersuite.tools.toolsCards.ecommercePlus.subtitle'),\n tag: locale('sitesWizard.wondersuite.tools.toolsCards.ecommercePlus.tag'),\n preList: locale('sitesWizard.wondersuite.tools.toolsCards.ecommercePlus.preList'),\n titleText: locale('sitesWizard.wondersuite.tools.toolsCards.ecommercePlus.titleText'),\n description: locale('sitesWizard.wondersuite.tools.toolsCards.ecommercePlus.description'),\n items: [\n locale('sitesWizard.wondersuite.tools.toolsCards.ecommercePlus.items.0'),\n locale('sitesWizard.wondersuite.tools.toolsCards.ecommercePlus.items.1'),\n locale('sitesWizard.wondersuite.tools.toolsCards.ecommercePlus.items.2'),\n locale('sitesWizard.wondersuite.tools.toolsCards.ecommercePlus.items.3'),\n locale('sitesWizard.wondersuite.tools.toolsCards.ecommercePlus.items.4'),\n locale('sitesWizard.wondersuite.tools.toolsCards.ecommercePlus.items.5'),\n ],\n warning: locale('sitesWizard.wondersuite.tools.toolsCards.ecommercePlus.warning'),\n action: locale('sitesWizard.wondersuite.tools.toolsCards.ecommercePlus.action'),\n },\n cardIcons: {\n joomla: 'Joomla',\n drupal: 'Drupal',\n moodle: 'Moodle',\n flarum: 'Flarum',\n magento: 'Magento',\n openCart: 'Opencart',\n sitebuilder: 'SiteBuilder',\n yith: 'Yith',\n others: locale('sitesWizard.tools.icons.other'),\n },\n};\n","import React, { useCallback, useMemo } from 'react';\nimport {\n IconDetailedOtherSquare,\n IconJoomla,\n IconOpenCart,\n IconOtherMiniSquares,\n IconMagento,\n IconDrupal,\n IconMoodle,\n IconFlarum,\n} from '@/icons';\nimport { useWizardToolsLocale } from './useWizardTools.locale';\nimport { getURLCpanel } from '@/config/urls/cpanelUrls';\nimport {\n joomlaTool, wordpressTool, woocommerceTool, sitebuilderTool, othersTool, magentoTool, opencartTool, yithTool,\n} from '@/media/siteBuilder/wondersuite';\nimport { wizardEnum } from '@/pages/sites/WizardHandler/WizardHandler.enum';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { CHARLIE_CPANEL_SSO_PORTAL } from '@/config/GrowthBook/constants';\nimport { isBRServer } from '@/utils/Validators/validation';\n\nconst useWizardTools = ({\n activeStep,\n selectedSite,\n setToolSelected,\n handleContinueToNextStep,\n setUserSelectedWondersuiteTrial,\n setUserSelectedUseEcommercePlus,\n selectedPlan,\n}) => {\n const enableCpanelSSO = useFeatureIsOn(CHARLIE_CPANEL_SSO_PORTAL);\n\n const mountSoftaculousUrl = useCallback(externalId => `${getURLCpanel({ externalId, enableCpanelSSO })}&app=Softaculous_Home`, [enableCpanelSSO]);\n\n const {\n toolsNames,\n } = wizardEnum;\n\n const setOthersToolsSelected = useCallback(() => {\n setToolSelected('softaculous');\n const softaculousUrl = mountSoftaculousUrl(selectedSite.externalId);\n window.open(softaculousUrl, '_blank').focus();\n handleContinueToNextStep(activeStep + 1, false);\n }, [\n activeStep,\n selectedSite,\n setToolSelected,\n handleContinueToNextStep,\n mountSoftaculousUrl,\n ]);\n\n const cardIcons = useMemo(() => ({\n joomla: {\n icon: \n \n {title}\n \n\n \n {selectedDomain && warningDomain(selectedDomain.label)} \n \n\n \n {warningLink(handleClickMaterials)} \n \n\n handleChangeCheckbox()} data-testid=\"radioLabel\">\n \n\n \n \n\n \n );\n};\n\nexport default OverwriteSiteModal;\n","import styled, { css } from 'styled-components';\n\nexport const Title = styled.h6`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n letter-spacing: 0px;\n line-height: ${theme.font.lineHeights.xxxxxxl};\n margin: 32px 64px 24px 32px;\n @media (max-width: ${theme.breakpoints.sm}) {\n margin: 32px 0px 40px 24px;\n }\n `}\n`;\n\nexport const Action = styled.div`\n ${() => css`\n align-items: center;\n display: flex;\n justify-content:center;\n margin-bottom: 40px;\n div:first-child button{\n margin-right:32px;\n }\n `}\n`;\nexport const BackButtonWrapper = styled.div`\n ${({ theme }) => css`\n padding-top:8px;\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-left: -42px;\n }\n `}\n`;\n\nexport const InputContent = styled.div`\n ${() => css`\n width: 100%;\n margin: 0px auto 40px auto;\n padding: 0px 32px;\n `}\n`;\n","import React, { useContext } from 'react';\nimport {\n Modal, Button,\n} from '@/pages/common';\nimport * as Styles from './OthersSiteTypesModal.styles';\nimport { IconArrowLeft } from '@/icons';\nimport { ThemeContext } from 'styled-components';\nimport { Input } from '@/pages/common/v1/inputs/index';\n\nconst OthersSiteTypesModal = ({\n handleOnCloseOthersModal, title, buttonBack, buttonSave, inputPlaceholder, othersEditFieldValue, handleOthersEditFieldValue, handleOnSaveOthersModal, inputMaxLength, maxWidth,\n}) => {\n const theme = useContext(ThemeContext);\n return (\n handleOnCloseOthersModal('close')} disablePadding maxWidth={maxWidth}>\n \n {title}\n \n \n \n \n \n \n \n \n );\n};\n\nexport default OthersSiteTypesModal;\n","import styled, { css } from 'styled-components';\n\nexport const ThemeInfoModalWrapper = styled.div`\n align-items:center;\n display:flex;\n flex-direction:column;\n\n button {\n align-self:center;\n margin-bottom: 24px; \n }\n`;\n\nexport const Title = styled.h4`\n ${({ theme }) => css`\n align-self: flex-start;\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n letter-spacing: 0px;\n line-height: 32px;\n margin: 24px 0px 24px 32px;\n `}\n`;\n\nexport const ThemeImage = styled.img`\n margin-bottom: 40px;\n width: calc(100% - 64px);\n`;\n","import React from 'react';\nimport {\n Modal,\n} from '@/pages/common';\nimport { Button } from '@/pages/common/v1/Button';\nimport * as Styles from './ThemeInfoModal.styles';\nimport { useResize } from '@/hooks/useResize';\n\nconst ThemeInfoModal = ({\n handleOnCloseThemeInfoModal, buttonLabel, theme, handleChangeTheme,\n}) => {\n const screenSize = useResize();\n const isMobile = screenSize.width < 960;\n return (\n handleOnCloseThemeInfoModal(theme)}>\n \n \n {theme.title}\n \n handleChangeTheme(theme.value)} size={isMobile ? 'regular' : 'small'} variant=\"secondary\" label={buttonLabel} />\n \n \n );\n};\n\nexport default ThemeInfoModal;\n","import styled, { css } from 'styled-components';\n\nexport const ModalContainer = styled.div`\n${({ theme }) => css`\n color: ${theme.color.tundora};\n font-family: ${theme.font.family.secondary};\n`\n}`;\n\nexport const ModalTitle = styled.p`\n${({ theme }) => css`\n color: ${theme.color.tundora};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n margin: 16px 0 40px 29px;\n`\n}`;\n\nexport const ModalBody = styled.div`\n${({ theme }) => css`\n color: ${theme.color.tundora};\n font-size: ${theme.font.sizes.sm};\n margin-bottom: 40px;\n padding-left: 80px;\n padding-right: 20px;\n\n\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-left: 9px;\n margin-right: 9px;\n padding: 0;\n }\n`\n}`;\n\nexport const FirstParagraph = styled.div`\n${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 24px;\n margin-left: -51px;\n margin-bottom: 28px;\n\n strong:first-child {\n color: ${theme.color.cyanCobaltBlue};\n }\n\n @media (max-width: ${theme.breakpoints.sm}) {\n flex-direction: column;\n margin-left: 0;\n }\n`}\n`;\n\nexport const ModalFooter = styled.div`\n${({ theme }) => css`\n align-items: center;\n display: flex;\n font-family: ${theme.font.family.secondary};\n gap: 32px;\n justify-content: center;\n margin-bottom: 24px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n flex-direction: column-reverse;\n gap: 24px;\n }\n`\n}`;\n\nexport const ModalText = styled.p`\n margin: 0;\n`;\n\nexport const ModalLink = styled.a`\n${({ theme }) => css`\n color: ${theme.palette.secondary.primary};\n margin-right: 5px;\n text-decoration: underline;\n`}\n`;\n\nexport const CheckIcon = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.color.shamrockGreen};\n border-radius: 50%;\n padding: 7px;\n `}\n`;\n\nexport const BackButtonWrapper = styled.div`\n ${({ theme }) => css`\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-left: -42px;\n }\n `}\n`;\n","import { Modal, Button } from '@/pages/common';\nimport React, { useContext } from 'react';\nimport { IconCheck, IconArrowLeft } from '@/icons';\nimport * as Styles from './DomainRegisteredModal.styles';\nimport { useResize } from '@/hooks/useResize';\nimport { ThemeContext } from 'styled-components';\n\n\nexport default function DomainRegisteredModal({\n handleBack,\n handleCloseModal,\n domain,\n domainAndSubdomain,\n handleSelectChange,\n title,\n domainLabel,\n registered,\n isCorrect,\n continueLabel,\n incorrect,\n backButton,\n continueButton,\n}) {\n const theme = useContext(ThemeContext);\n const { color } = theme;\n const screenSize = useResize();\n const isMobile = screenSize.width < 700;\n\n const handleClickBack = () => {\n handleBack('domain-registered');\n };\n\n const handleClickContinue = () => {\n handleSelectChange(domainAndSubdomain, 'domain-registered');\n handleCloseModal();\n };\n\n return (\n handleCloseModal(true)} maxWidth={600} testId=\"domain-registered-modal\">\n \n {title} \n \n \n \n \n {domainLabel}\n "\n {domain} \n "\n {registered}\n {isCorrect} \n {continueLabel}\n \n
\n \n \n {incorrect}\n \n \n \n \n \n\n \n \n \n );\n}\n","import styled, { css } from 'styled-components';\n\nexport const Title = styled.h6`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n letter-spacing: 0px;\n line-height: 32px;\n margin: 28px 0px 10px 32px;\n @media (max-width: ${theme.breakpoints.sm}) {\n margin: 32px 0px 20px 24px;\n }\n `}\n`;\n\nexport const Icon = styled.span`\n margin: 18px 0px 0px 0px;\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font: ${theme.v1.font.family.primary}\n font-weight: ${theme.font.weights.medium};\n `}\n`;\n\nexport const Action = styled.div`\n ${() => css`\n align-items: center;\n display: flex;\n flex-direction: column;\n margin-bottom: 40px;\n `}\n`;\n\nexport const ContentWrapper = styled.div`\n${({ theme }) => css`\n display:flex;\n margin: 0px 31px;\n padding: 0;\n @media (max-width: ${theme.breakpoints.sm}) {\n align-items:center;\n flex-direction:column;\n margin: 0px 24px;\n svg{\n height:60px;\n margin-bottom:20px;\n width: 60px;\n }\n }\n `}\n`;\n\nexport const Content = styled.div`\n${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n letter-spacing: 0px;\n line-height: ${theme.font.lineHeights.lg};\n margin: 0px 0px 40px 12px;\n a{\n color: ${theme.palette.secondary.primary};\n display:inline;\n }\n @media (max-width: ${theme.breakpoints.sm}) {\n margin: 0px 0px 40px 0px;\n }\n`}\n`;\n","import React, { useContext } from 'react';\nimport {\n Link,\n Modal,\n} from '@/pages/common';\nimport * as Styles from './ModalDnsAutomatic.styles';\nimport { IconInfo } from '@/icons';\nimport { ThemeContext } from 'styled-components';\nimport { useResize } from '@/hooks/useResize';\nimport { Button } from '@/pages/common/v1';\n\nconst ModalDnsAutomatic = ({\n title,\n descriptionOne,\n descriptionTwo,\n link,\n button,\n onContinue,\n onAccessSupportMaterial,\n onClickButton,\n}) => {\n const screenSize = useResize();\n const isMobile = screenSize.width < 600;\n const theme = useContext(ThemeContext);\n\n const handleContinue = () => {\n onClickButton();\n onContinue && onContinue();\n };\n return (\n \n \n {title}\n \n \n \n \n \n \n {descriptionOne[0]}\n \n \n {descriptionTwo[0]}\n {descriptionTwo[1]}\n \n \n \n \n \n \n );\n};\n\nexport default ModalDnsAutomatic;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n justify-content: center;\n margin-top: 12px;\n margin: 0;\n padding: 0 32px;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin-top: 17px;\n padding: 0 12px;\n }\n `}\n`;\n\nexport const ErrorMessage = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.warning.error};\n margin: 8px 0px 0px 0px;\n max-width: 408px;\n font-size: 12px;\n line-height: 18px;\n font-family: ${theme.v1.font.family.primary};\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n padding-top: 20px;\n },\n `}\n`;\nexport const Title = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n margin: 15px 0px 0px;\n `}\n`;\n\nexport const SubTitle = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n margin: 8px 0px 30px 0px;\n `}\n`;\n\nexport const InputsWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: row;\n \n @media (max-width: ${theme.v1.breakpoints.sm}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const Fields = styled.div`\n ${({ theme }) => css`\n display: flex;\n margin: 0px 8px 0px 0px;\n width: 100%;\n\n > span {\n width: 100%;\n }\n\n input {\n background-color: ${theme.v1.color.white.primary};\n }\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin: 0px 0px 24px 0px;\n }\n `}\n`;\n\nexport const ActionWrapper = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n margin: 40px 0px 24px 0px;\n\n div {\n align-items: center;\n display: flex;\n justify-content: center;\n margin: 0px;\n padding: 0px;\n }\n\n button {\n min-height: 40px;\n min-width: 167px;\n }\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport { Button } from '@/pages/common/v1/Button';\nimport * as Style from './AnotherDomainModal.styles';\nimport { Input } from '@/pages/common/v1/inputs';\nimport Loader from '@/components/Layout/Loader';\nimport { domain as isDomain, removeDomainPrefix } from '@/utils/Validators/validation';\n\nconst AnotherDomainModal = ({\n onClose,\n prefixDomain = 'www.',\n loading,\n title,\n subTitle,\n placeholder,\n buttonLabel,\n titleMessageErrorBr,\n messageError,\n tldMessageError,\n checkDomainAvailability,\n tldAvailability,\n userDomainList,\n handleChangeDomain,\n}) => {\n const [domain, setDomain] = useState('');\n const [error, setError] = useState(undefined);\n const [isDomainChecked, setIsDomainChecked] = useState(false);\n\n const handleOnClose = () => {\n onClose && onClose(true);\n };\n\n const handleOnInputChange = useCallback((event) => {\n const { target } = event;\n const { value } = target;\n setError(undefined);\n\n const newValue = value ? value.toLowerCase() : '';\n\n setDomain(newValue);\n }, []);\n\n const handleOnClick = useCallback(() => {\n const domainExisists = userDomainList.find(item => item.label === domain);\n if (domainExisists) {\n handleChangeDomain(domain);\n onClose && onClose();\n }\n\n if (!domainExisists) {\n const domainIsValid = isDomain(domain);\n\n if (!domainIsValid && domain.includes('.br')) {\n setError(titleMessageErrorBr);\n return;\n }\n\n if (!domainIsValid && !domain.includes('.br')) {\n setError(messageError);\n return;\n }\n\n checkDomainAvailability && checkDomainAvailability({ domain: removeDomainPrefix(domain) });\n setIsDomainChecked(true);\n }\n }, [\n checkDomainAvailability,\n domain,\n messageError,\n titleMessageErrorBr,\n handleChangeDomain,\n userDomainList,\n onClose,\n ]);\n\n useEffect(() => {\n if (!tldAvailability && !loading && isDomainChecked) {\n setError(tldMessageError);\n }\n }, [tldAvailability, loading, isDomainChecked, tldMessageError]);\n\n return (\n \n \n \n {title}\n \n \n {subTitle}\n \n\n \n \n {prefixDomain ? (\n \n \n\n {error && (\n \n {error}\n \n )}\n\n \n \n \n \n );\n};\n\nexport default AnotherDomainModal;\n","import styled, { css } from 'styled-components';\n\nexport const ModalContainer = styled.div`\n ${({ theme }) => css`\n color: ${theme.color.tundora};\n font-family: ${theme.font.family.secondary};\n margin: 15px;\n `}\n`;\n\nexport const ModalTitle = styled.p`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n margin: 0;\n margin-bottom: 9px;\n `}\n`;\n\nexport const ModalSubtitle = styled.p`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.sm};\n margin: 0;\n `}\n`;\n\nexport const ModalBody = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-wrap: wrap;\n font-size: 14px;\n gap: 16px;\n margin: 40px 0;\n max-height: 250px;\n overflow-y: auto;\n scrollbar-color: ${theme.v1.color.line.divisor} ${theme.v1.color.white.primary};\n scrollbar-width: thin;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin: 30px 0;\n max-height: fit-content;\n }\n\n &::-webkit-scrollbar {\n width: 6px;\n }\n\n &::-webkit-scrollbar-track {\n background: ${theme.v1.color.white.primary};\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${theme.v1.color.line.divisor};\n border-left: 0;\n border-radius: 25px;\n border-right: 0;\n height: 30px;\n width: 100%;\n }\n `}\n`;\n\nexport const ModalFooter = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n font-family: ${theme.v1.font.family.primary};\n gap: 32px;\n justify-content: center;\n margin-bottom: 24px;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n flex-direction: column-reverse;\n gap: 24px;\n }\n `}\n`;\n\nexport const ModalSubtitleWrapper = styled.div`\n display: flex;\n`;\n\nexport const TooltipWrapper = styled.div`\n display: inline-block;\n margin-left: 8px;\n`;\n\nexport const Sites = styled.div`\n margin-top: 8px;\n`;\n\nexport const MainDomain = styled.p`\n text-overflow: ellipsis;\n overflow-x: hidden;\n`;\n\nexport const OtherDomain = styled.p`\n text-overflow: ellipsis;\n overflow-x: hidden;\n`;\n","import { Modal, Button, Tooltip } from '@/pages/common';\nimport React, { useContext, useState, useEffect } from 'react';\nimport * as Styles from './ChoosePlanModal.styles';\nimport { IconInfo } from '@/icons';\nimport { ThemeContext } from 'styled-components';\nimport { Card } from '../Card';\n\nexport default function ChoosePlanModal({\n setChosenPlan,\n handleCloseModal,\n multiDomainsPlans = [],\n chosenPlan,\n singleDomainsPlans,\n selectedDomainPlan,\n title,\n subtitle,\n tooltip,\n mainDomain,\n otherDomains,\n noOtherDomains,\n domains,\n domain,\n choosePlan,\n onChoosePlan,\n}) {\n const theme = useContext(ThemeContext);\n const { palette } = theme;\n const [selectedPlan, setSelectedPlan] = useState({});\n\n const handlePlanChoose = () => {\n setChosenPlan(selectedPlan);\n handleCloseModal();\n onChoosePlan();\n };\n\n useEffect(() => { if (chosenPlan) setSelectedPlan(chosenPlan); }, [chosenPlan]);\n\n const renderCardMainDomain = plan => (\n \n {mainDomain}\n {plan.domain}\n \n );\n\n const renderCardOthersDomains = (plan) => {\n const sitesLength = plan.sites.length;\n return (\n \n {otherDomains}\n\n {!!sitesLength && (\n `${plan.sites[0].site} ${plan.sites.length === 1 ? '' : `/ ${plan.sites[1].site}`}`\n )}\n\n {sitesLength > 2 && (\n ` (+${(sitesLength - 2) + (sitesLength - 2 === 1 ? domain : domains)})`\n )}\n\n {!sitesLength && noOtherDomains}\n \n );\n };\n\n return (\n handleCloseModal(true)} maxWidth={800} testId=\"choose-plan-modal\">\n \n {title} \n \n {subtitle} \n \n \n \n \n \n {selectedDomainPlan && singleDomainsPlans.find(plan => plan.whmcs_product_id === selectedDomainPlan.whmcs_product_id)\n && (\n setSelectedPlan(selectedDomainPlan)}\n cursorPointer\n >\n {mainDomain}\n {selectedDomainPlan.domain}\n \n )\n }\n {multiDomainsPlans.map(plan => (\n setSelectedPlan(plan)}\n key={plan.id}\n cursorPointer\n >\n {renderCardMainDomain(plan)}\n \n {renderCardOthersDomains(plan)}\n \n \n ))}\n \n \n \n \n \n );\n}\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme, step }) => css`\n color: ${theme.color.tundora};\n font-family: ${theme.font.family.secondary};\n height: ${step === 1 && '300px'};\n margin: 15px;\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-left: 7px;\n }\n `}\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n margin: 0;\n margin-bottom: 24px;\n text-align: left;\n `}\n`;\n\nexport const DescriptionWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: row;\n justify-content: space-evenly;\n @media (max-width: ${theme.breakpoints.sm}) {\n flex-direction: column;\n margin-top: 42px;\n }\n `}\n`;\n\nexport const TextDescription = styled.div`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.sm};\n margin-left: 17px;\n span {\n color: ${theme.color.cyanCobaltBlue};\n font-weight: ${theme.font.weights.bold};\n }\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-left: 0px;\n margin-top: 38px;\n }\n `}\n`;\n\nexport const SelectWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: row;\n font-size: ${theme.font.sizes.sm};\n justify-content: space-evenly;\n margin-top: 18px;\n @media (max-width: ${theme.breakpoints.sm}) {\n flex-direction: column;\n margin-top: -5px;\n }\n `}\n`;\n\nexport const TextSelect = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.blue.dark};\n font-size: ${theme.font.sizes.md};\n text-align: left;\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-left: -65px;\n }\n `}\n`;\n\nexport const Select = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-wrap: nowrap;\n max-height: 50px;s\n margin-left: 2px;\n width: 250px;\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-left: 0;\n width: 100%;\n margin-top: 2px;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: row;\n justify-content: space-evenly;\n margin-top: 32px;\n @media (max-width: ${theme.breakpoints.sm}) {\n flex-direction: column-reverse;\n margin-top: 40px;\n }\n `}\n`;\n\nexport const BackButtonWrapper = styled.div`\n ${({ theme }) => css`\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-left: -42px;\n margin-top: 22px;\n }\n `}\n`;\n\nexport const InstructionSquare = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.background.boxes};\n border: 1px solid ${theme.v1.color.line.fields};\n width: 100%;\n padding: 13px 26px 22px 26px;\n `}\n`;\n\nexport const Text = styled.div`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.sm};\n margin-bottom: 31px;\n\n a{\n color: ${theme.v1.color.action.primary};\n }\n `}\n`;\n\nexport const SquareContentWrapper = styled.div`\n display: flex;\n margin-top: -23px;\n margin-bottom: 18px;\n align-items: center;\n\n @media (max-width: 650px) {\n flex-direction: column;\n }\n`;\n\nexport const SquareDnsColumn = styled.div`\n display: flex;\n flex-direction: column;\n min-width: 230px;\n`;\n\nexport const IconWrapper = styled.div`\n padding: 35px;\n margin-top: 44px;\n\n @media (max-width: 650px) {\n transform: rotate(90deg);\n padding: 5px;\n margin-top: 0;\n }\n`;\n\nexport const DnsContainer = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: center;\n font-size: ${theme.font.sizes.sm};\n color: ${theme.v1.color.text.primary};\n height: 34px;\n\n p{\n font-weight: ${theme.v1.font.weights.medium};\n color: ${theme.v1.color.text.featured};\n margin: 0;\n padding: 0;\n }\n\n button {\n margin-left: 13px;\n }\n `}\n`;\n\nexport const TextBoldSquare = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.featured};\n font-weight: ${theme.v1.font.weights.medium};\n `}\n`;\n\nexport const SquareButtonWrapper = styled.div`\n display: flex;\n justify-content: center;\n`;\n\nexport const DnsWarning = styled.div`\n ${({ theme }) => css`\n display: flex;\n margin-top: 28px;\n\n svg{\n margin-right: -1px;\n }\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n div {\n margin-top: 0;\n margin-left: 15px;\n }\n }\n `}\n`;\n\nexport const TextWarningDns = styled.div`\n ${({ theme }) => css`\n margin-left: 25px;\n margin-top: 8px;\n margin-bottom: 20px;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n div {\n margin-top: 0;\n margin-left: 15px;\n }\n }\n `}\n`;\n\nexport const UnderlinedText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n text-decoration: underline;\n margin: 0;\n\n `}\n`;\n\nexport const ButtonsBottonWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n flex-direction: column-reverse;\n }\n `}\n`;\n","import { Modal, Button, Select } from '@/pages/common';\nimport React, { useContext, useEffect, useState } from 'react';\nimport { COUNTRY } from '@/config/index';\nimport * as Styles from './SelectManualDnsModal.styles';\nimport {\n IconError, IconArrowLeft, IconDropdownArrow, IconChevronRight, IconCopyContent,\n} from '@/icons';\nimport { ThemeContext } from 'styled-components';\nimport { useResize } from '@/hooks/useResize';\nimport { IconButton } from '@/pages/common/v1/IconButton';\nimport { Button as NewButton } from '@/pages/common/v1';\nimport { copyTextToClipboard } from '@/utils/Application/copyTextToClipboard';\nimport {\n SUPPORT_ARTICLE_CHANGE_DNS_COLOMBIAHOSTING,\n SUPPORT_ARTICLE_CHANGE_DNS_GODADDY,\n SUPPORT_ARTICLE_CHANGE_DNS_KINGHOST,\n SUPPORT_ARTICLE_CHANGE_DNS_LOCAWEB,\n SUPPORT_ARTICLE_CHANGE_DNS_NEUBOX,\n SUPPORT_ARTICLE_CHANGE_DNS_OTHERS,\n SUPPORT_ARTICLE_CHANGE_DNS_REGISTROBR,\n SUPPORT_ARTICLE_CHANGE_DNS_UOLHOST,\n SUPPORT_ARTICLE_CHANGE_DNS_WEBEMPRESA,\n GODADDY_HOMEPAGE,\n KINGHOST_HOMEPAGE,\n LOCAWEB_HOMEPAGE,\n REGISTROBR_HOMEPAGE,\n UOLHOST_HOMEPAGE,\n WEBEMPRESA_HOMEPAGE,\n COLOMBIAHOSTING_HOMEPAGE,\n NEUBOX_HOMEPAGE,\n} from '@/config/urls/supportUrls';\nimport { useDispatch } from 'react-redux';\nimport { commonActions } from '@/redux/modules/common';\n\nconst optionsBr = ['Registro.br', 'Godaddy', 'Locaweb', 'Uol Host', 'Kinghost', 'Outros'];\nconst optionsBrList = optionsBr.map((item, index) => ({ id: index, label: item, value: item }));\nconst optionsEs = ['Godaddy', 'Web Empresa', 'Colombia Hosting', 'Neubox', 'Otros'];\nconst optionsEsList = optionsEs.map((item, index) => ({ id: index, label: item, value: item }));\n\nconst providersHelpLinks = [\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_REGISTROBR, page: REGISTROBR_HOMEPAGE, name: 'Registro.br' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_GODADDY, page: GODADDY_HOMEPAGE, name: 'Godaddy' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_LOCAWEB, page: LOCAWEB_HOMEPAGE, name: 'Locaweb' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_UOLHOST, page: UOLHOST_HOMEPAGE, name: 'Uol Host' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_KINGHOST, page: KINGHOST_HOMEPAGE, name: 'Kinghost' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_WEBEMPRESA, page: WEBEMPRESA_HOMEPAGE, name: 'Web Empresa' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_COLOMBIAHOSTING, page: COLOMBIAHOSTING_HOMEPAGE, name: 'Colombia Hosting' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_NEUBOX, page: NEUBOX_HOMEPAGE, name: 'Neubox' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_OTHERS, name: 'Others' },\n];\n\nexport default function SelectManualDnsModal({\n domain,\n handleCloseModal,\n onContinue,\n domainDns,\n planDns,\n title,\n descriptionOne,\n descriptionTwo,\n question,\n placeholder,\n labelButtonBack,\n labelButtonKeep,\n step2Title,\n step2Description,\n step2TutorialLink,\n step2Replace,\n step2ActualDns,\n step2HgDns,\n step2Server1,\n step2Server2,\n step2GoToHost,\n step2WaitTime,\n step2WaitTimeStrong,\n step2Warning,\n step2LabelButtonBack,\n step2LabelButtonContinue,\n step2Copied,\n onChangeProvider,\n onContinueNextModal,\n onBackStep,\n onClickHelpLink,\n onClickRedirect,\n onCopyServer,\n onContinueNextStep,\n}) {\n const theme = useContext(ThemeContext);\n const { palette, color } = theme;\n const [provider, setProvider] = useState({ id: 0, label: '' });\n const [step, setStep] = useState(1);\n const [helpLink, setHelpLink] = useState({});\n const screenSize = useResize();\n const isMobile = screenSize <= 600;\n\n useEffect(() => {\n providersHelpLinks.forEach((providerLinks) => {\n if (providerLinks.name === provider.label) setHelpLink(providerLinks);\n if (provider.label === 'Outros' || provider.label === 'Otros') setHelpLink(providersHelpLinks[providersHelpLinks.length - 1]);\n });\n }, [provider]);\n\n const handleContinue = () => {\n onContinue && onContinue();\n onContinueNextStep();\n };\n\n const goNextStep = () => {\n setStep(2);\n onContinueNextModal();\n };\n const goPrevStep = (action) => {\n setStep(1);\n onBackStep(action);\n };\n\n const openLink = () => {\n onClickRedirect(provider.label);\n window.open(helpLink.page, '_blank').focus();\n };\n const dispatch = useDispatch();\n\n const showCopyNotification = () => {\n dispatch(commonActions.notifications.set({\n label: (\n \n {step2Copied}\n
\n ),\n type: 'success',\n }));\n };\n\n const handleBackButton = (action) => {\n goPrevStep(action);\n setProvider({ id: 0, label: '' });\n };\n\n useEffect(() => {\n if (provider.label !== '') {\n onChangeProvider(provider.label);\n }\n }, [provider, onChangeProvider]);\n\n if (step === 1) {\n return (\n handleCloseModal(true, 'close')} maxWidth={625} testId=\"select-dns-modal\">\n \n \n {' '}\n {title}\n {' '}\n \n \n\n \n {descriptionOne}\n \n "\n {domain}\n "\n \n {descriptionTwo}\n \n\n \n \n\n \n {question}\n \n \n \n \n\n \n \n handleCloseModal(true, 'back')}\n variant=\"newTertiary\"\n iconLeft={ \n \n \n \n );\n }\n\n if (step === 2) {\n return (\n goPrevStep('close')} maxWidth={679} maxHeight={675} testId=\"select-dns-modal-step-2\">\n \n \n {step2Title}\n \n\n \n {step2Description}\n {' '}\n {\n onClickHelpLink(provider.label);\n }}\n href={helpLink.tutorial}\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n {step2TutorialLink}\n \n \n\n \n \n {step2Replace}\n \n\n \n \n \n {step2ActualDns}\n {provider.label}\n \n \n {step2Server1}\n \n \n \n {domainDns && domainDns[0]}\n
\n \n \n {step2Server2}\n \n \n \n {domainDns && domainDns[1]}\n
\n \n \n\n \n \n\n \n \n {step2HgDns}\n \n \n {step2Server1}\n \n \n {planDns && planDns[0] && (\n <>\n \n {planDns[0]}\n
\n {' '}\n \n \n {step2Server2}\n \n \n {planDns && planDns[1] && (\n <>\n \n {planDns[1]}\n
\n {' '}\n \n \n \n\n {helpLink && helpLink.page && (\n \n \n )}\n \n\n \n \n {step2WaitTime}\n \n {step2WaitTimeStrong}\n \n \n \n\n \n \n {step2Warning}\n \n \n\n \n \n handleBackButton('back')}\n variant=\"newTertiary\"\n iconLeft={ \n \n\n \n \n );\n }\n}\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n justify-content: center;\n padding: 10px 0 0 16px;\n @media (max-width: ${theme.breakpoints.sm}) {\n padding: 12px 0 0 5px;\n },\n `}\n`;\n\nexport const Title = styled.div`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n font-family: ${theme.font.family.secondary};\n letter-spacing: 0;\n margin: 0;\n opacity: 100%;\n padding-top: 8px;\n text-align: left;\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-top: -3px;\n },\n `}\n`;\n\nexport const SubTitle = styled.div`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.regular};\n font-family: ${theme.font.family.secondary};\n letter-spacing: 0;\n margin-top: 6px;\n margin: 0;\n opacity: 100%;\n padding-top: 12px;\n text-align: left;\n @media (max-width: ${theme.breakpoints.sm}) {\n font-weight: ${theme.font.weights.light};\n padding-top: 13px;\n text-align: justify;\n },\n `}\n`;\n\nexport const Cards = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n gap: 12px;\n padding-top: 42px;\n @media (max-width: ${theme.breakpoints.sm}) {\n flex-direction: column;\n justify-content: center;\n margin-left: -7px;\n },\n `}\n`;\n\nexport const Card = styled.button`\n ${({ theme, selected }) => css`\n background-color: ${selected ? theme.color.lightBlue : theme.color.white};\n cursor: pointer;\n display: flex;\n flex-wrap: wrap;\n border: 1px solid ${theme.color.grayVeryLight};\n border-radius: 4px;\n padding: 12px;\n padding-bottom: 17px;\n width: 352px;\n height: 77px;\n @media (max-width: ${theme.breakpoints.sm}) {\n margin: auto;\n padding: 12px;\n width: 312px;\n }\n &:hover {\n background-color: ${theme.color.lightBlue};\n }\n `}\n`;\n\nexport const CardTitle = styled.div`\n ${({ theme }) => css`\n text-align: left;\n margin-right: 25px;\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.medium};\n padding-left: 3px;\n @media (max-width: ${theme.breakpoints.sm}) {\n padding-left: 1px;\n }\n `}\n`;\n\nexport const CardSubTitle = styled.div`\n ${({ theme }) => css`\n text-align: left;\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.xxs};\n font-weight: ${theme.font.weights.regular};\n font-family: ${theme.font.family.secondary};\n margin-left: 42px;\n display: flex;\n flex-direction: row;\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-bottom: 6px;\n margin-left: 40px;\n }\n `}\n`;\n\nexport const DomainDirector = styled.div`\n ${() => css`\n width: 110px;\n `}\n`;\n\n\nexport const CardIcon = styled.img`\n ${() => css`\n height: 23px;\n padding: 3px 0 0 3px;\n margin-right: 15px;\n `}\n`;\n\nexport const Action = styled.div`\n ${() => css`\n align-items: center;\n display: flex;\n flex-direction: column;\n `}\n`;\n\nexport const Button = styled.div`\n ${({ theme }) => css`\n display: flex;\n padding: 40px 0 24px 0;\n @media (max-width: ${theme.breakpoints.sm}) {\n padding: 30px 0 0 15px;\n },\n `}\n`;\n","import { locale } from '@/utils/locale';\n\nexport const upgradePlanModalLocale = {\n title: locale('sitesWizard.modalUpgradePlan.title'),\n subTitle: locale('sitesWizard.modalUpgradePlan.subtitle'),\n buttonLabel: locale('sitesWizard.modalUpgradePlan.buttonLabel'),\n domainDirector: locale('sitesWizard.modalUpgradePlan.domainDirector'),\n};\n","import React, { useState } from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport { Button } from '@/pages/common/Button';\nimport * as Style from './UpgradePlanModal.styles';\nimport { upgradePlanModalLocale } from './UpgradePlanModal.locale';\nimport iconHospedagem from '@/media/siteBuilder/icon-hospedagem.svg';\nimport { WHMCS_URL } from '@/config';\n\nconst UpgradePlanModal = ({\n onClose,\n plans,\n ellipsis = '...',\n buttonClick,\n}) => {\n const [currentPlanId, setCurrentPlanId] = useState(undefined);\n const handleOnClose = () => {\n onClose && onClose(true);\n };\n\n const handleSubmitProduct = (productId) => {\n setCurrentPlanId(productId);\n };\n\n const handleOnClick = (event) => {\n buttonClick();\n event.preventDefault();\n window.location.href = `${WHMCS_URL}/index.php?m=custom_upgrade&action=selectupgrade&id=${currentPlanId}`;\n };\n\n return (\n \n \n \n {upgradePlanModalLocale.title}\n \n \n {upgradePlanModalLocale.subTitle}\n \n \n {plans && plans.map(item => (\n { handleSubmitProduct(item.external_id); }}\n key={item.external_id}\n >\n \n {item.name}\n \n \n {upgradePlanModalLocale.domainDirector} \n {item.domain.substring(0, 10)}\n {ellipsis}\n {item.domain.substring(item.domain.indexOf('.'))}\n \n \n ))}\n\n \n \n \n \n \n \n \n );\n};\n\nexport default UpgradePlanModal;\n","import styled, { css } from 'styled-components';\n\nexport const LoaderWrapper = styled.div`\n * {\n margin: 0px;\n padding: 0p;x\n }\n`;\n\nexport const Title = styled.h6`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.featured};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 32px;\n margin: 24px auto 42px;\n width: fit-content;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 21px;\n margin: 40px auto 24px;\n width: fit-content;\n `}\n`;\n","import Loader from '@/components/Layout/Loader';\nimport { Modal } from '@/pages/common';\nimport React from 'react';\nimport * as Styles from './AsaasCreateAccountModal.styles';\n\nconst AsaasCreateAccountModal = ({\n title = 'Estamos criando a sua conta...',\n description = 'Falta pouco para ter a sua conta Asaas!',\n}) => (\n \n {title} \n\n \n \n\n {description} \n \n\n);\n\nexport default AsaasCreateAccountModal;\n","import styled, { css } from 'styled-components';\n\nexport const ModalContainer = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 102px 0px;\n`;\n\nexport const LoadingMessage = styled.p`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xxs};\n line-height: ${theme.v2.font.lineHeight.text};\n margin-top: 16px;\n max-width: 234px;\n text-align: center;\n `}\n`;\n","import { locale } from '@/utils/locale';\n\nexport const verifyingSiteExistModalLocale = {\n message: locale('sitesWizard.modalVerifyingSiteExist.message'),\n};\n","import { Modal } from '@/pages/common';\nimport React from 'react';\nimport * as Styles from './VerifyingSiteExistModal.styles';\nimport { IconLoading } from 'gatorcomponents';\nimport { verifyingSiteExistModalLocale } from './VerifyingSiteExistModal.locale';\n\n\nconst VerifyingSiteExistModal = () => (\n \n \n \n {verifyingSiteExistModalLocale.message}\n \n \n \n);\n\nexport default VerifyingSiteExistModal;\n","import React from 'react';\nimport { OthersSiteTypesModal } from '../OthersSiteTypesModal';\nimport { ThemeInfoModal } from '../ThemeInfoModal';\nimport { DomainRegisteredModal } from '../DomainRegisteredModal';\nimport { ModalDnsAutomatic } from '../ModalDnsAutomatic';\nimport AnotherDomainModal from '../AnotherDomainModal/AnotherDomainModal';\nimport { ChoosePlanModal } from '../ChoosePlanModal';\nimport { SelectManualDnsModal } from '../SelectManualDnsModal';\nimport UpgradePlanModal from '../UpgradePlanModal/UpgradePlanModal';\nimport { AsaasCreateAccountModal } from '@/pages/asaas/AsaasHandler/components/AsaasCreateAccountModal';\nimport { VerifyingSiteExistModal } from '../VerifyingSiteExistModal';\nimport { DnsInProgressModal } from '../DnsInProgressModal';\n\nconst WizardHandlerModals = ({\n displayOthersSitesModal,\n handleOnCloseOthersSitesModal,\n wizardLocale,\n othersSitesEditFieldValue,\n handleOthersSitesEditFieldValue,\n handleOnSaveOthersSitesModal,\n displayOthersObjectivesModal,\n handleOnCloseOthersObjectivesModal,\n othersObjectivesEditFieldValue,\n handleOthersObjectivesEditFieldValue,\n handleOnSaveOthersObjectivesModal,\n displayThemeInfoModal,\n handleOnCloseThemeInfoModal,\n getModalTheme,\n handleModalChangeTheme,\n showModal,\n modals,\n sitesState,\n handleCloseModal,\n wizardConfigurationsAnalytics,\n selectedDomain,\n backAnotherDomainModal,\n handleChangeDomain,\n chosenPlan,\n selectedDomainPlan,\n setChosenPlan,\n singleDomainsPlans,\n multiDomainsPlans,\n handleContinueToNextStep,\n getActivePlans,\n displayCreateAccountModal,\n asaasLocale,\n handleContinueDnsInProgressModal,\n loadingVerifyIfSiteExist,\n loadingDefaultFilesExclude,\n checkDomainAvailability,\n userDomainList,\n}) => {\n const getOthersSitesTypesModalProps = () => {\n const defaultProps = {\n handleOnCloseOthersModal: handleOnCloseOthersSitesModal,\n title: wizardLocale.about.othersSitesModal.title,\n buttonBack: wizardLocale.about.othersSitesModal.back,\n buttonSave: wizardLocale.about.othersSitesModal.save,\n inputPlaceholder: wizardLocale.about.othersSitesModal.placeholder,\n othersEditFieldValue: othersSitesEditFieldValue,\n handleOthersEditFieldValue: handleOthersSitesEditFieldValue,\n handleOnSaveOthersModal: handleOnSaveOthersSitesModal,\n inputMaxLength: 20,\n maxWidth: 375,\n };\n\n return defaultProps;\n };\n\n const getOthersSiteTypesModalProps = () => {\n const defaultProps = {\n handleOnCloseOthersModal: handleOnCloseOthersObjectivesModal,\n title: wizardLocale.about.othersObjectivesModal.title,\n buttonBack: wizardLocale.about.othersObjectivesModal.back,\n buttonSave: wizardLocale.about.othersObjectivesModal.save,\n inputPlaceholder: wizardLocale.about.othersObjectivesModal.placeholder,\n othersEditFieldValue: othersObjectivesEditFieldValue,\n handleOthersEditFieldValue: handleOthersObjectivesEditFieldValue,\n handleOnSaveOthersModal: handleOnSaveOthersObjectivesModal,\n inputMaxLength: 20,\n maxWidth: 442,\n };\n\n return defaultProps;\n };\n\n const getThemeInfoModalProps = () => {\n const defaultProps = {\n handleOnCloseThemeInfoModal,\n theme: getModalTheme(),\n buttonLabel: wizardLocale.tools.wordPressInstall.theme.use,\n handleChangeTheme: handleModalChangeTheme,\n };\n\n return defaultProps;\n };\n\n const getAnotherDomainModalProps = () => {\n const defaultProps = {\n prefixDomain: null,\n loading: sitesState.loading || sitesState.loadingTlds || sitesState.loadingDomainValidation,\n onClose: handleCloseModal,\n title: wizardLocale.configurations.modalAnotherDomain.title,\n subtitle: wizardLocale.configurations.modalAnotherDomain.subTitle,\n placeholder: wizardLocale.configurations.modalAnotherDomain.placeholder,\n buttonLabel: wizardLocale.configurations.modalAnotherDomain.buttonLabel,\n titleMessageErrorBr: wizardLocale.configurations.modalAnotherDomain.messageErrorBr,\n messageError: wizardLocale.configurations.modalAnotherDomain.messageError,\n tldMessageError: wizardLocale.configurations.modalAnotherDomain.tldMessageError,\n checkDomainAvailability,\n tldAvailability: sitesState.domainTldAvailability,\n userDomainList,\n handleChangeDomain,\n };\n\n return defaultProps;\n };\n\n const getDomainRegisteredModalProps = () => {\n const defaultProps = {\n domain: selectedDomain.label,\n domainAndSubdomain: selectedDomain.domainAndSubdomain,\n handleBack: backAnotherDomainModal,\n handleCloseModal,\n handleSelectChange: handleChangeDomain,\n title: wizardLocale.configurations.modalRegistered.title,\n domainLabel: wizardLocale.configurations.modalRegistered.domain,\n registered: wizardLocale.configurations.modalRegistered.registered,\n isCorrect: wizardLocale.configurations.modalRegistered.isCorrect,\n continueLabel: wizardLocale.configurations.modalRegistered.continue,\n incorrect: wizardLocale.configurations.modalRegistered.incorrect,\n backButton: wizardLocale.configurations.modalRegistered.backButton,\n continueButton: wizardLocale.configurations.modalRegistered.continueButton,\n };\n\n return defaultProps;\n };\n\n const getChoosePlanModalProps = () => {\n const defaultProps = {\n chosenPlan,\n handleCloseModal,\n selectedDomainPlan,\n setChosenPlan,\n singleDomainsPlans,\n multiDomainsPlans,\n title: wizardLocale.configurations.modalChoosePlan.title,\n subtitle: wizardLocale.configurations.modalChoosePlan.subtitle,\n tooltip: wizardLocale.configurations.modalChoosePlan.tooltip,\n mainDomain: wizardLocale.configurations.modalChoosePlan.mainDomain,\n otherDomains: wizardLocale.configurations.modalChoosePlan.otherDomains,\n noOtherDomains: wizardLocale.configurations.modalChoosePlan.noOtherDomains,\n domains: wizardLocale.configurations.modalChoosePlan.domains,\n domain: wizardLocale.configurations.modalChoosePlan.domain,\n choosePlan: wizardLocale.configurations.modalChoosePlan.choosePlan,\n onChoosePlan: wizardConfigurationsAnalytics.selectOtherPlanModalSelectPlan,\n };\n\n return defaultProps;\n };\n\n const getSelectManualDnsModalProps = () => {\n const defaultProps = {\n domain: selectedDomain.label,\n domainDns: sitesState.domainDns,\n handleBack: backAnotherDomainModal,\n handleCloseModal,\n onContinue: handleContinueToNextStep,\n planDns: sitesState.planDns,\n title: wizardLocale.configurations.modalSelectDnsManual.title,\n descriptionOne: wizardLocale.configurations.modalSelectDnsManual.descriptionOne,\n descriptionTwo: wizardLocale.configurations.modalSelectDnsManual.descriptionTwo,\n question: wizardLocale.configurations.modalSelectDnsManual.question,\n placeholder: wizardLocale.configurations.modalSelectDnsManual.placeholder,\n labelButtonBack: wizardLocale.configurations.modalSelectDnsManual.labelButtonBack,\n labelButtonKeep: wizardLocale.configurations.modalSelectDnsManual.labelButtonKeep,\n step2Title: wizardLocale.configurations.modalSelectDnsManualStep2.title,\n step2Description: wizardLocale.configurations.modalSelectDnsManualStep2.description,\n step2TutorialLink: wizardLocale.configurations.modalSelectDnsManualStep2.tutorialLink,\n step2Replace: wizardLocale.configurations.modalSelectDnsManualStep2.replace,\n step2ActualDns: wizardLocale.configurations.modalSelectDnsManualStep2.actualDns,\n step2HgDns: wizardLocale.configurations.modalSelectDnsManualStep2.hgDns,\n step2Server1: wizardLocale.configurations.modalSelectDnsManualStep2.server1,\n step2Server2: wizardLocale.configurations.modalSelectDnsManualStep2.server2,\n step2GoToHost: wizardLocale.configurations.modalSelectDnsManualStep2.goToHost,\n step2WaitTime: wizardLocale.configurations.modalSelectDnsManualStep2.waitTime,\n step2WaitTimeStrong: wizardLocale.configurations.modalSelectDnsManualStep2.waitTimeStrong,\n step2Warning: wizardLocale.configurations.modalSelectDnsManualStep2.warning,\n step2LabelButtonBack: wizardLocale.configurations.modalSelectDnsManualStep2.labelButtonBack,\n step2LabelButtonContinue: wizardLocale.configurations.modalSelectDnsManualStep2.labelButtonContinue,\n step2Copied: wizardLocale.configurations.modalSelectDnsManualStep2.copied,\n onChangeProvider: wizardConfigurationsAnalytics.DNSManualModalSelectProvider,\n onContinueNextModal: wizardConfigurationsAnalytics.DNSManualModalContinue,\n onBackStep: wizardConfigurationsAnalytics.DNSManualModalSecondStepBack,\n onClickHelpLink: wizardConfigurationsAnalytics.DNSManualModalSecondStepHelp,\n onClickRedirect: wizardConfigurationsAnalytics.DNSManualModalSecondStepRedirect,\n onCopyServer: wizardConfigurationsAnalytics.DNSManualModalSecondStepCopy,\n onContinueNextStep: wizardConfigurationsAnalytics.DNSManualModalSecondStepContinue,\n };\n\n return defaultProps;\n };\n\n const getUpgradePlanModalProps = () => {\n const defaultProps = {\n onClose: handleCloseModal,\n plans: getActivePlans(),\n buttonClick: wizardConfigurationsAnalytics.upgradePlanModalButton,\n };\n\n return defaultProps;\n };\n\n const getModalDnsAutomaticProps = () => {\n const defaultProps = {\n button: wizardLocale.modalDns.button,\n descriptionOne: wizardLocale.modalDns.descriptionOne,\n descriptionTwo: wizardLocale.modalDns.descriptionTwo,\n link: wizardLocale.modalDns.link,\n onContinue: handleContinueToNextStep,\n title: wizardLocale.modalDns.title,\n onAccessSupportMaterial: wizardConfigurationsAnalytics.DNSAutomaticModalAccessSupportMaterial,\n onClickButton: wizardConfigurationsAnalytics.DNSAutomaticModalContinue,\n };\n\n return defaultProps;\n };\n\n const getAsaasCreateAccountModal = () => {\n const defaultProps = {\n title: asaasLocale.wizard.firstRow.modal.createSite.title,\n description: asaasLocale.wizard.firstRow.modal.createSite.description,\n };\n\n return defaultProps;\n };\n\n const getDnsInProgressModalProps = () => {\n const defaultProps = {\n onClose: handleCloseModal,\n buttonClick: handleContinueDnsInProgressModal,\n };\n\n return defaultProps;\n };\n\n return (\n <>\n {displayOthersSitesModal && (\n \n \n {title}\n \n \n {tools.map(tool => (\n \n \n \n);\n\nexport default WizardWondersuiteTools;\n","import styled, { css } from 'styled-components';\nimport Bg from '@/media/siteBuilder/woondersuite/features-background.svg';\nimport BgMobile from '@/media/siteBuilder/woondersuite/features-background-mobile.svg';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n padding: 24px 20px 88px 0px;\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n gap: 32px;\n justify-content: space-between;\n position: relative;\n z-index: 1;\n\n @media (max-width: ${theme.breakpoints.md}) {\n padding: 0 45px 80px;\n\n .slick-prev {\n position: absolute;\n top: 37px;\n }\n\n .slick-next {\n position: absolute;\n top: 37px;\n }\n }\n `}\n\n &::before {\n content: '';\n background-image: url(${Bg});\n background-repeat: no-repeat;\n background-position: left bottom;\n position: absolute;\n width: 252px;\n height: 272px;\n bottom: 0;\n left: -34px;\n z-index: -1;\n @media (max-width: 600px) {\n background-image: url(${BgMobile});\n }\n }\n`;\n\nexport const FullWidthBorder = styled.div`\n border-bottom: 1px solid #EBEFF3;\n width: 100%;\n position: absolute;\n bottom: 0;\n left: 32px;\n`;\n\nexport const Card = styled.div`\n ${({ theme }) => css`\n width: 30%;\n padding: 16px 14px;\n border-radius: 10px;\n border: 1px solid ${theme.v2.colors.feedback.canceledMedium};\n display: flex;\n align-items: center;\n\n @media (max-width: ${theme.breakpoints.md}) {\n width: 100%;\n }\n `}\n`;\n\nexport const IconWrapper = styled.div`\n ${({ theme }) => css`\n margin-right: 14px;\n @media (max-width: ${theme.breakpoints.md}) {\n display: none;\n }\n `}\n`;\n\nexport const InfoWrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n`;\n\nexport const Title = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: 14px;\n font-weight: 700;\n line-height: 19px;\n `}\n`;\n\nexport const Description = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: 14px;\n font-weight: 400;\n line-height: 19px;\n `}\n`;\n\nexport const Snappy = styled.img`\n ${({ theme }) => css`\n position: absolute;\n right: 60px;\n bottom: 0;\n\n @media (max-width: ${theme.breakpoints.md}) {\n width: 128px;\n height: 57px;\n right: 22px;\n }\n `}\n`;\n","import styled, { css } from 'styled-components';\nimport arrowLeftSvg from '@/media/icons/arrow_left.svg';\nimport arrowRightSvg from '@/media/icons/arrow_right.svg';\n\nexport const SlickWrapper = styled.div`\n ${({ theme, maxWidth }) => css`\n display: flex;\n flex-direction: column;\n max-width: 100%;\n width: ${maxWidth};\n\n .slick-slider {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-around;\n\n .slick-list {\n min-width: 100%;\n order: 1;\n overflow: hidden;\n\n @media (min-width: 769px){\n display: flex;\n }\n \n .slick-track { \n display: flex;\n }\n }\n\n .slick-arrow{\n background: transparent !important;\n border: unset !important;\n bottom: 0;\n color: transparent !important;\n cursor: pointer;\n height: 24px;\n width: 24px;\n\n &.slick-prev {\n left: 0;\n order: 2;\n \n &::before {\n background-image: url(${arrowLeftSvg});\n background-position: center center;\n background-repeat: no-repeat;\n content: '←';\n }\n }\n\n &.slick-next {\n order: 4;\n right: 0;\n \n &::before {\n background-image: url(${arrowRightSvg});\n background-position: center center;\n background-repeat: no-repeat;\n content: '→';\n }\n }\n }\n\n .slick-dots {\n display: inline-flex !important;\n list-style-type: none;\n margin: 5px 0px 43px 0px;\n order: 3;\n padding: 0;\n\n li {\n background-color: transparent;\n border-radius: 100%;\n border: 2px solid ${theme.palette.grey.dark};\n box-shadow: unset;\n height: 10px;\n margin: 0px 12px;\n overflow: hidden;\n width: 10px;\n transition: 300ms background-color ease-in-out, 300ms border ease-in-out;\n\n &.slick-active{\n border: 2px solid ${theme.palette.primary.main};\n background-color: ${theme.palette.primary.main};\n }\n\n button {\n font-size: 0px;\n }\n }\n }\n }\n `}\n`;\n","import React from 'react';\nimport Slick from 'react-slick';\nimport * as Styles from './Slider.styles';\n\n// YOU CAN VIEW MORE AT LIB DOC: https://react-slick.neostack.com/docs/get-started\n\nconst Slider = ({\n settings = {\n initialSlide: 0,\n slidesToShow: 1,\n speed: 500,\n dots: true,\n infinite: true,\n arrows: true,\n slidesToScroll: 1,\n },\n items = [\n Sample one
,\n Sample two
,\n Sample three
,\n ],\n maxWidth = '100%',\n}) => (\n \n \n {items}\n \n \n);\n\nexport default Slider;\n","import React from 'react';\nimport * as Styles from './WizardWondersuiteFeatures.styles';\nimport {\n IconDetailedCart, IconDetailedFilters, IconDetailedGiftCertificate, IconDetailedMyAccount, IconDetailedSchedules, IconDetailedWishlist,\n} from '@/icons';\nimport snappy from '@/media/siteBuilder/woondersuite/snappy.svg';\nimport { Slider } from '@/pages/common/Slider';\nimport { useResize } from '@/hooks/useResize';\n\nconst WizardWondersuiteFeatures = ({\n items = [],\n}) => {\n const view = useResize();\n const isMobile = view.width < 960;\n\n const IconDictionary = {\n myAccount: \n \n {IconDictionary[item.icon]}\n \n \n \n {item.title}\n \n \n {item.description}\n \n \n \n ));\n\n return (\n <>\n \n {isMobile && (\n \n \n );\n};\n\nexport default WizardWondersuiteFeatures;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n width: 100%;\n `}\n`;\n\nexport const Container = styled.div`\n${({ theme }) => css`\n align-items: center;\n display: flex;\n justify-content: space-between;\n position: relative;\n font-family: 'Galano';\n @media (max-width: ${theme.v2.breakpoints.xl}) {\n justify-content: baseline;\n }\n @media (max-width: ${theme.v2.breakpoints.md}) {\n flex-direction: column;\n gap: 28px;\n padding: 0px;\n }\n`}\n`;\n\nexport const HeroContent = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n display: flex;\n flex-direction: column;\n gap: 20px;\n height: 100%;\n width: 50%;\n @media (max-width: ${theme.v2.breakpoints.md}) {\n flex-direction: column;\n gap: 24px;\n justify-content: unset;\n width: 100%;\n }\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n align-items: center;\n padding: 0;\n }\n `}\n`;\n\nexport const Title = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 32px;\n font-weight: ${theme.v2.font.weights.bold};\n margin: 0 0 8px 0px;\n z-index: 1;\n span {\n color: ${theme.v2.colors.brand.primaryMedium};\n }\n @media (max-width: ${theme.v2.breakpoints.md}) {\n font-size: 20px;\n }\n `}\n`;\n\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n letter-spacing: 0em;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0;\n text-align: left;\n z-index: 1;\n span {\n font-weight: bold;\n }\n `}\n`;\n\nexport const ImageAdapter = styled.div`\n z-index: 1;\n`;\n\nexport const Image = styled.img`\n width: 100%;\n`;\n\n\nexport const TagAdapter = styled.div`\n margin-bottom: 16px;\n width: 100%;\n`;\n\nexport const AssignBox = styled.div`\n${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 16px;\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n align-items: baseline;\n flex-direction: column;\n width: 100%;\n }\n `}\n`;\n\nexport const Wordpress = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n`;\n\nexport const WordpressImg = styled.img``;\n\n\nexport const Strong = styled.strong`\n${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n letter-spacing: 0em;\n line-height: ${theme.v2.font.lineHeight.text};\n text-align: left;\n @media (max-width: ${theme.v2.breakpoints.md}) {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const ButtonAdapter = styled.div`\n min-width: 202px;\n max-width: 200px;\n width: 100%;\n button {\n width: 100%;\n }\n`;\n\nexport const Text = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0em;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0;\n text-align: left;\n span {\n font-weight: bold;\n }\n `}\n`;\n\nexport const Polygon = styled.img`\n position: absolute;\n right: -34px;\n top: -40px;\n`;\n","import React from 'react';\nimport * as Styles from './WizardWonderSuiteHeroBanner.styles';\nimport heroBannerImage from '@/media/siteBuilder/wondersuite/hero-banner.png';\nimport wordpress from '@/media/siteBuilder/wondersuite/wordpress.svg';\nimport polygon from '@/media/siteBuilder/wondersuite/polygon.png';\nimport polygonMobile from '@/media/siteBuilder/wondersuite/polygon-mobile.png';\nimport { Button, Tag } from 'gatorcomponents';\nimport { useResize } from '@/hooks/useResize';\n\nconst WizardWonderSuiteHeroBanner = ({\n title = 'title sample',\n description = 'description default',\n tagLabel = '',\n btnLabel,\n assignValue,\n wordpressExperience,\n onWondersuiteTrialStart,\n sitesLoading,\n testId = 'wizard-wondersuite-hero-banner',\n}) => {\n const screenSize = useResize();\n const isMobile = screenSize.width < 700;\n const polygonSrc = isMobile ? polygonMobile : polygon;\n\n const onButtonClick = () => {\n onWondersuiteTrialStart && onWondersuiteTrialStart();\n };\n\n return (\n <>\n \n \n \n \n \n \n {title}\n \n \n {description}\n \n \n \n \n {assignValue} \n \n \n {wordpressExperience} \n \n \n \n \n \n \n \n );\n};\n\n\nexport default WizardWonderSuiteHeroBanner;\n","import React from 'react';\nimport * as Styles from './WizardWondersuite.styles';\nimport { WizardWondersuiteTools } from '../WizardWondersuiteTools';\nimport { WizardWondersuiteFeatures } from '../WizardWondersuiteFeatures';\nimport { WizardWonderSuiteHeroBanner } from '../WizardWonderSuiteHeroBanner';\n\nconst WizardWondersuite = ({\n tools,\n heroBanner,\n testId = 'wizard-wondersuite',\n items,\n}) => (\n <>\n \n \n \n);\n\nexport default WizardWondersuite;\n","import styled, { css } from 'styled-components';\n\nexport const Title = styled.h6`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v2.font.weights.bold};\n line-height: 32px;\n margin: 32px 32px 24px 32px;\n @media (max-width: ${theme.v2.breakpoints.sm}){\n margin: 32px 0px 24px 24px;\n max-width: 262px;\n }\n `}\n`;\n\nexport const WarningWrapper = styled.div`\n ${({ theme, warnAboutDns }) => css`\n margin: ${warnAboutDns ? '0px 32px 0px' : '0px 32px 16px;'};\n display: flex;\n @media (max-width: ${theme.v2.breakpoints.sm}){\n margin: ${warnAboutDns ? '0px 43px 0px 24px' : '0px 43px 16px 24px;'};\n }\n `}\n`;\n\nexport const IconWrapper = styled.div`\n margin-right: 8px;\n`;\n\nexport const SecondWarningWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n margin: 0px 32px 20px;\n padding-left: 40px;\n\n > span {\n align-self: center;\n display: flex;\n margin-right: 14px;\n }\n @media (max-width: ${theme.v2.breakpoints.sm}){\n margin: 0px 43px 24px 56px;\n padding-left: 0px;\n }\n `}\n`;\n\nexport const Warning = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 14px;\n line-height: 18px;\n margin: 0px;\n\n span:first-child {\n color: ${theme.v2.colors.brand.primaryMedium};\n }\n span {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n\nexport const WarningAboutDns = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 14px;\n line-height: 18px;\n margin: 0px 32px 20px;\n padding-left: 40px;\n\n span {\n font-weight: ${theme.v2.font.weights.medium};\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n margin: 16px 43px 24px 56px;\n padding-left: 0px;\n }\n `}\n`;\n\nexport const WarningBackup = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 14px;\n line-height: 18px;\n margin: 0px;\n\n > span, > a {\n color: ${theme.v2.colors.brand.primaryBlue}\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n\nexport const CheckboxWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n cursor: pointer;\n display: flex;\n margin: 0px 32px 32px 32px;\n padding-left: 40px;\n button {\n padding: 0px 8px 0px 0px;\n }\n svg {\n flex: 0 1 auto;\n }\n @media (max-width: ${theme.v2.breakpoints.sm}){\n margin: 0px 34px 32px 56px;\n padding-left: 0px;\n }\n `}\n`;\n\nexport const CheckboxLabel = styled.p`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowPure};\n cursor: pointer;\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 16px;\n user-select: none;\n `}\n`;\n\nexport const ActionWrapper = styled.div`\n ${({ theme, uninstallError }) => css`\n align-items: center;\n display: flex;\n justify-content: center;\n gap: 8px;\n margin: ${uninstallError ? '0px 0px 16px' : '0px 0px 32px'};\n @media (max-width: ${theme.v2.breakpoints.sm}){\n flex-direction: column;\n button:first-child {\n order: 2;\n }\n }\n `}\n`;\n\nexport const ErrorWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n justify-content: center;\n margin-bottom: 32px;\n padding: 0px 43px 0px 24px;\n svg {\n margin-right: 8px;\n }\n p {\n color: ${theme.v2.colors.feedback.problemPure}\n }\n `}\n`;\n","import React, { useCallback, useEffect } from 'react';\nimport { Modal } from '@/pages/common';\nimport * as Styles from './VerifiedOverwriteSiteModal.styles';\nimport { Button, Checkbox, IconDanger } from 'gatorcomponents';\nimport { isMobile } from '@/utils/Validators/validation';\n\nconst VerifiedOverwriteSiteModal = ({\n title = 'Modal title',\n checkboxLabel = 'Checkbox label',\n continueButtonLabel = 'Continue label',\n backButtonLabel = 'Back label',\n maxWidth = '654',\n userAgreeOverwriteSite,\n handleToggleUserAgreeOverwriteSite,\n selectedDomain = null,\n onClose,\n warningDomain,\n warningDomainWithDns,\n warningAboutDns,\n warningLink,\n cancelOverwrite,\n onContinue,\n errorMessage,\n warnAboutDns,\n loadingUninstall,\n uninstallError,\n securityCopyOverwriteModalAnalytics,\n continueToVerifiedOverwriteAnalytics,\n showVerifiedOverwriteSiteModalAnalytics,\n}) => {\n const handleChangeCheckbox = () => {\n handleToggleUserAgreeOverwriteSite && handleToggleUserAgreeOverwriteSite();\n };\n\n const handleCancel = () => {\n cancelOverwrite && cancelOverwrite();\n onClose && onClose();\n };\n\n const handleClose = () => {\n cancelOverwrite && cancelOverwrite();\n onClose && onClose();\n };\n\n const handleContinue = () => {\n continueToVerifiedOverwriteAnalytics && continueToVerifiedOverwriteAnalytics(warnAboutDns);\n onContinue && onContinue();\n };\n\n const handleWarningBackup = () => {\n securityCopyOverwriteModalAnalytics && securityCopyOverwriteModalAnalytics(warnAboutDns);\n };\n\n const handleShowVerifiedOverwriteSiteModal = useCallback(() => {\n showVerifiedOverwriteSiteModalAnalytics && showVerifiedOverwriteSiteModalAnalytics(warnAboutDns);\n }, [showVerifiedOverwriteSiteModalAnalytics, warnAboutDns]);\n\n useEffect(() => {\n handleShowVerifiedOverwriteSiteModal();\n }, [handleShowVerifiedOverwriteSiteModal]);\n\n return (\n \n \n {title}\n \n\n \n \n \n {warnAboutDns && selectedDomain.label ? warningDomainWithDns(selectedDomain.label) : warningDomain(selectedDomain.label)} \n \n\n {warnAboutDns && (\n {warningAboutDns()} \n )}\n\n \n {warningLink()} \n \n\n handleChangeCheckbox()} data-testid=\"radioLabel\">\n {checkboxLabel} \n \n\n \n \n {uninstallError && !loadingUninstall && (\n \n {errorMessage} \n \n )}\n \n );\n};\n\nexport default VerifiedOverwriteSiteModal;\n","import {\n ABORT_REQUEST_GENERAL_PRODUCTS,\n ALTER_VISIBLE_PRODUCTS,\n CLEAR_FILTER_GENERAL_PRODUCTS,\n ERROR_GENERAL_PRODUCTS,\n FILTER_GENERAL_PRODUCTS,\n RECEIVE_GENERAL_PRODUCTS,\n REQUEST_GENERAL_PRODUCTS,\n SELECT_STATUS_PRODUCTS,\n UPDATE_DOMAIN_RENEWAL_GENERAL_PRODUCTS,\n} from '@/redux/actions/actionsTypes';\nimport { CALL_API } from '@/middleware/api';\nimport { GENERAL_PRODUCTS_URL } from '@/config/api';\nimport { config } from '@/config';\nimport { sortAlphabetic } from '@/utils/Application/sort';\n\n\nfunction receiveGeneralProducts(generalProducts) {\n let activeProducts = generalProducts.filter(products => products.status === 'Active');\n let suspendedProducts = generalProducts.filter(products => products.status === 'Suspended');\n let pendingProducts = generalProducts.filter(products => products.status === 'Pending' || products.status === 'Fraud');\n let cancelledProducts = generalProducts.filter(products => products.status === 'Cancelled');\n let terminatedProducts = generalProducts.filter(products => products.status === 'Terminated');\n let buildingProducts = generalProducts.filter(products => products.status === 'Building');\n let activationPendingProducts = generalProducts.filter(products => products.status === 'ActivationPending');\n\n activeProducts = sortAlphabetic(activeProducts, 'productname');\n suspendedProducts = sortAlphabetic(suspendedProducts, 'productname');\n pendingProducts = sortAlphabetic(pendingProducts, 'productname');\n cancelledProducts = sortAlphabetic(cancelledProducts, 'productname');\n terminatedProducts = sortAlphabetic(terminatedProducts, 'productname');\n buildingProducts = sortAlphabetic(buildingProducts, 'productname');\n activationPendingProducts = sortAlphabetic(activationPendingProducts, 'productname');\n\n let initialProducts;\n const allProducts = [...activeProducts, ...suspendedProducts, ...pendingProducts, ...cancelledProducts, ...terminatedProducts, ...buildingProducts, ...activationPendingProducts];\n\n if (activeProducts.length === 0 && suspendedProducts.length === 0 && pendingProducts.length === 0 && buildingProducts.length === 0 && activationPendingProducts.length === 0) {\n initialProducts = allProducts;\n } else {\n initialProducts = [...activeProducts, ...suspendedProducts, ...pendingProducts, ...buildingProducts, ...activationPendingProducts];\n }\n\n const filterProducts = [];\n const filterStatus = [];\n const filterSelectedStatus = [];\n\n allProducts.forEach((element) => {\n const product = element.productname;\n const { status } = element;\n if (product && filterProducts.indexOf(product) === -1) {\n filterProducts.push(product);\n }\n if (status && filterStatus.indexOf(status) === -1) {\n filterStatus.push(status);\n }\n });\n\n filterStatus.forEach((status) => {\n if (status !== 'Cancelled' && status !== 'Terminated' && status !== 'Fraud') {\n filterSelectedStatus.push(status);\n }\n });\n\n return {\n type: RECEIVE_GENERAL_PRODUCTS,\n generalProducts: allProducts,\n initialProducts,\n filterDomain: filterProducts.sort(),\n loadedDate: Date.now(),\n filterSelectedStatus,\n filterStatus,\n };\n}\n\nexport const productStatus = arrayStatus => ({\n type: SELECT_STATUS_PRODUCTS,\n arrayStatus,\n});\n\nexport const productsVisible = productsNumber => ({\n type: ALTER_VISIBLE_PRODUCTS,\n productsNumber,\n});\n\nexport const setUpdateDomainRenewalGeneralProducts = domainRenewalProducts => ({\n type: UPDATE_DOMAIN_RENEWAL_GENERAL_PRODUCTS,\n domainRenewalProducts,\n});\n\nexport const updateDomainRenewalGeneralProducts = domainRenewal => (dispatch, getState) => {\n const generalProducts = getState().generalProducts.byId;\n const indexDomainRenewal = generalProducts.findIndex(el => el.id === domainRenewal.id);\n generalProducts[indexDomainRenewal].donotrenew = !!domainRenewal.donotrenew;\n return dispatch(setUpdateDomainRenewalGeneralProducts(generalProducts));\n};\n\nexport const receiveFilteredProducts = filteredProducts => ({\n type: FILTER_GENERAL_PRODUCTS,\n filterProduct: filteredProducts,\n});\n\nexport const filterGeneralProducts = productName => (dispatch, getState) => {\n const allProducts = getState().generalProducts.bkpProducts;\n const allStatus = getState().generalProducts.selectFilters.selectedStatus;\n\n let filteredProducts;\n\n if (productName !== '') {\n filteredProducts = allProducts.filter((product) => {\n if (product.productname === productName) {\n return product;\n }\n return null;\n });\n } else {\n filteredProducts = allProducts;\n }\n\n if (allStatus.length !== 0) {\n let adictionalStatus = null;\n switch (allStatus) {\n case 'Pending':\n adictionalStatus = 'Fraud';\n break;\n case 'Cancelled':\n adictionalStatus = 'Terminated';\n break;\n default:\n adictionalStatus = null;\n break;\n }\n\n filteredProducts = filteredProducts.filter((product) => {\n if (\n (\n product.status === allStatus[0]\n || (allStatus[1] && product.status === allStatus[1])\n || (allStatus[2] && product.status === allStatus[2])\n || (allStatus[3] && product.status === allStatus[3])\n )\n || product.status === adictionalStatus) {\n return product;\n }\n return null;\n });\n }\n\n dispatch(productsVisible(filteredProducts.length));\n return dispatch(receiveFilteredProducts(filteredProducts));\n};\n\nexport const clearFilterProducts = () => ({\n type: CLEAR_FILTER_GENERAL_PRODUCTS,\n});\n\nconst abortRequestGeneralProducts = () => ({\n type: ABORT_REQUEST_GENERAL_PRODUCTS,\n});\n\nexport const loadGeneralProducts = () => async (dispatch, getState) => {\n const { generalProducts } = getState();\n const { loadedDate } = generalProducts;\n\n if (Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise((resolve) => {\n resolve(dispatch(abortRequestGeneralProducts()));\n });\n }\n\n return dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: GENERAL_PRODUCTS_URL,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_GENERAL_PRODUCTS }),\n success: response => receiveGeneralProducts(response.data),\n error: () => ({ type: ERROR_GENERAL_PRODUCTS }),\n },\n },\n });\n};\n","export const AVAILABLE_PRODUCT_TYPES = ['vps', 'dedicated', 'windows', 'shared', 'reseller', 'websitebuilder'];\nexport const AVAILABLE_DEDICATED_TYPES = ['vps', 'dedicated', 'windows'];\nexport const AVAILABLE_PRODUCT_DOMAIN_STATUS = ['Active', 'Pending', 'Suspended'];\nexport const AVAILABLE_ACTIVATE_SITEBUILDER_PRODUCTS = ['shared', 'reseller'];\n\nexport const AVAILABLE_REBOOT_PRODUCT_ID_LIST = {\n br: [56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 68, 69, 70, 71, 72, 73, 74, 75, 76, 302, 305, 308, 311, 314, 317, 320, 323, 326, 343, 346, 446, 449, 452, 455, 458, 461, 464, 467, 470, 473],\n es: [56, 57, 58, 59, 60, 61, 64, 65, 134, 136, 138, 140, 201, 202, 203, 204, 205, 206, 208, 209, 210, 215, 216, 251, 254, 257, 260, 263, 266, 269, 272, 275, 278],\n};\n\nexport const SERVER_INFO_ID_LIST = {\n br: [302, 305, 308, 311, 314, 317, 343, 346],\n es: [201, 202, 203, 204, 205, 206, 215, 216],\n};\n","import {\n format, parseISO, differenceInHours,\n} from 'date-fns';\nimport shortid from 'shortid';\nimport { CALL_API } from '@/middleware/api';\nimport {\n PRODUCT_DETAIL_URL, PRODUCT_REBOOT_HISTORY_URL, PRODUCT_REBOOT_URL, PRODUCT_HEALTHCHECK_URL,\n PRODUCT_SAVE_PASSWORD_URL, PANEL_WHM_URL, HOSTINGS_ADDONS,\n ADDON_ID_FROM_SITE_BUILDER_ADDON,\n} from '@/config/api';\nimport { COUNTRY } from '@/config';\nimport { loadGeneralProducts } from '@/redux/actions/generalProducts';\nimport { AVAILABLE_ACTIVATE_SITEBUILDER_PRODUCTS } from '@/config/products/availability';\nimport {\n RECEIVE_PRODUCT_DETAIL, REQUEST_PRODUCT_DETAIL, ERROR_PRODUCT_DETAIL, REMOVE_PRODUCT_DETAIL,\n REQUEST_PRODUCT_REBOOT_HISTORY, RECEIVE_PRODUCT_REBOOT_HISTORY, ERROR_PRODUCT_REBOOT_HISTORY,\n ERROR_PRODUCT_REBOOT, REQUEST_PRODUCT_REBOOT, RECEIVE_PRODUCT_REBOOT, REQUEST_PRODUCT_HEALTHCHECK,\n RECEIVE_PRODUCT_HEALTHCHECK, ERROR_PRODUCT_HEALTHCHECK, SET_REBOOT_AVAILABILITY,\n TOGGLE_ACCESS_PASSWORD_MODAL, REQUEST_PRODUCT_SAVE_PASSWORD, ERROR_PRODUCT_SAVE_PASSWORD,\n RECEIVE_PRODUCT_SAVE_PASSWORD, REQUEST_WHM_PANEL_ACCESS, RECEIVE_WHM_PANEL_ACCESS,\n ERROR_WHM_PANEL_ACCESS, ERROR_HEALTHCHECK_WHM_PANEL_ACCESS, REQUEST_PRODUCT_ADDONS,\n ERROR_PRODUCT_ADDONS, RECEIVE_PRODUCT_DETAIL_ADDONS, REQUEST_ADDON_PARENT_PRODUCT_DETAIL,\n ERROR_ADDON_PARENT_PRODUCT_DETAIL, REQUEST_ADDON_ID_FROM_SITE_BUILDER,\n RECEIVE_ADDON_ID_FROM_SITE_BUILDER, ERROR_ADDON_ID_FROM_SITE_BUILDER,\n REQUEST_SITEBUILDER_PRODUCT_DETAIL, RECEIVE_SITEBUILDER_PRODUCT_DETAIL, ERROR_SITEBUILDER_PRODUCT_DETAIL,\n UPDATE_ACTIONS_IN_PRODUCT_DETAILS,\n} from './actionsTypes';\n\n\nconst sanitizeAddonProductDetail = ({ addonParentDetail, productDetail }) => {\n const {\n ns1,\n ns2,\n serverName,\n assignedips,\n } = addonParentDetail;\n\n const addonParentProductDetail = {\n ...productDetail,\n ns1,\n ns2,\n serverName,\n assignedips,\n showBillingCycle: false,\n };\n\n return addonParentProductDetail;\n};\n\nconst receiveAddonParentProductDetail = ({ addons, sanitizeData }) => ({\n type: RECEIVE_PRODUCT_DETAIL_ADDONS,\n addons,\n productDetail: sanitizeAddonProductDetail(sanitizeData),\n});\n\nconst errorAddonParentProductDetail = ({ addons, sanitizeData }) => ({\n type: ERROR_ADDON_PARENT_PRODUCT_DETAIL,\n addons,\n productDetail: sanitizeAddonProductDetail(sanitizeData),\n});\n\nconst loadAddonParentProductDetail = ({ hostingId, addons, productDetail }) => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: PRODUCT_DETAIL_URL(hostingId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_ADDON_PARENT_PRODUCT_DETAIL }),\n success: ({ data }) => receiveAddonParentProductDetail({\n addons,\n sanitizeData: {\n productDetail,\n addonParentDetail: data,\n },\n }),\n error: () => errorAddonParentProductDetail({ addons, productDetail }),\n },\n },\n});\n\nconst receiveProductAddons = (data, productDetail) => (dispatch, getState) => {\n if (!productDetail) {\n return dispatch({\n type: RECEIVE_PRODUCT_DETAIL,\n productDetail: { addons: data.addons },\n });\n }\n\n const { generalProducts } = getState();\n const [addonParentProduct] = generalProducts.bkpProducts.filter(item => (\n item.domain === data.domain\n && item.type !== 'websitebuilder'\n && AVAILABLE_ACTIVATE_SITEBUILDER_PRODUCTS.includes(item.type)\n ));\n\n if (!addonParentProduct && productDetail.productType === 'addon') {\n const [addonParentProductAditionalDomain] = generalProducts.bkpProducts.filter(item => (\n item.id === productDetail.parentId && item.type !== 'websitebuilder'\n ));\n\n const newProductDetail = {\n ...productDetail,\n aditionalDomain: true,\n };\n\n return dispatch(loadAddonParentProductDetail({\n hostingId: addonParentProductAditionalDomain.id,\n addons: data.addons,\n productDetail: newProductDetail,\n }));\n }\n\n if (addonParentProduct) {\n return dispatch(loadAddonParentProductDetail({\n hostingId: addonParentProduct.id,\n addons: data.addons,\n productDetail,\n }));\n }\n\n const handleProductDetail = {\n ...productDetail,\n showBillingCycle: true,\n };\n\n return dispatch({\n type: RECEIVE_PRODUCT_DETAIL,\n productDetail: handleProductDetail,\n });\n};\n\nexport const getProductAddons = (hostingId, productDetail) => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: HOSTINGS_ADDONS(hostingId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_PRODUCT_ADDONS }),\n success: ({ data }) => receiveProductAddons(data, productDetail),\n error: () => ({ type: ERROR_PRODUCT_ADDONS }),\n },\n },\n});\n\nexport const removeProductDetail = () => ({\n type: REMOVE_PRODUCT_DETAIL,\n});\n\nconst addSitebuilderActionsOnSharedAndResellerPlans = (product) => {\n if (\n ('type' in product)\n && AVAILABLE_ACTIVATE_SITEBUILDER_PRODUCTS.includes(product.type)\n && product.hasSiteBuilderActive\n ) {\n const randomId = shortid.generate();\n\n product.actions.unshift({\n relid: randomId,\n status: 'active',\n type: 'websitebuilder-on-shared-plans',\n uuid: `websitebuilder-on-shared-plans-${randomId}`,\n });\n }\n\n return product;\n};\n\nconst receiveProductDetail = productDetail => (dispatch, getState) => {\n let handleProductDetail = productDetail;\n handleProductDetail = addSitebuilderActionsOnSharedAndResellerPlans(handleProductDetail);\n\n if (\n handleProductDetail\n && ('type' in handleProductDetail)\n && handleProductDetail.type === 'websitebuilder'\n && ('productType' in handleProductDetail)\n && handleProductDetail.productType === 'addon'\n ) {\n const { generalProducts } = getState();\n\n if (generalProducts.bkpProducts.length === 0) {\n return dispatch(loadGeneralProducts()).then(() => dispatch(getProductAddons(handleProductDetail.id, handleProductDetail)));\n }\n\n return dispatch(getProductAddons(handleProductDetail.id, handleProductDetail));\n }\n\n return dispatch({\n type: RECEIVE_PRODUCT_DETAIL,\n productDetail,\n });\n};\n\nexport const loadProductDetail = hostingId => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: PRODUCT_DETAIL_URL(hostingId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_PRODUCT_DETAIL }),\n success: ({ data }) => receiveProductDetail(data),\n error: () => ({ type: ERROR_PRODUCT_DETAIL }),\n },\n },\n});\n\nconst receiveProductRebootHistory = (history) => {\n const newHistory = Object.values(history.reduce((prev, { datetime }) => {\n const newObj = prev;\n const date = format(parseISO(datetime), 'dd/MM/yyyy');\n const time = format(parseISO(datetime), 'HH\\'h\\'mm');\n if (!newObj[date]) {\n newObj[date] = {\n id: shortid.generate(),\n date,\n time: [time],\n };\n } else {\n newObj[date].time.push(time);\n }\n return newObj;\n }, {}));\n\n return {\n type: RECEIVE_PRODUCT_REBOOT_HISTORY,\n history: newHistory,\n historyBkp: history,\n };\n};\n\nconst checkRebootAvailability = (history) => {\n const now = new Date();\n const canReboot = !(history.length === 3 && history.every(item => differenceInHours(now, parseISO(item.datetime)) < 1));\n\n return {\n type: SET_REBOOT_AVAILABILITY,\n canReboot,\n };\n};\n\nexport const loadRebootHistory = hostingId => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: PRODUCT_REBOOT_HISTORY_URL(hostingId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_PRODUCT_REBOOT_HISTORY }),\n success: response => (dispatch) => {\n dispatch(receiveProductRebootHistory(response.data));\n dispatch(checkRebootAvailability(response.data));\n },\n error: () => ({ type: ERROR_PRODUCT_REBOOT_HISTORY }),\n },\n },\n});\n\nexport const reboot = hostingId => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: PRODUCT_REBOOT_URL(hostingId),\n method: 'POST',\n actionTypes: {\n request: () => ({ type: REQUEST_PRODUCT_REBOOT }),\n success: () => ({ type: RECEIVE_PRODUCT_REBOOT }),\n error: () => ({ type: ERROR_PRODUCT_REBOOT }),\n },\n },\n});\n\nexport const toggleAccessPasswordModal = () => ({\n type: TOGGLE_ACCESS_PASSWORD_MODAL,\n});\n\nconst receiveProductHealthcheck = data => ({\n type: RECEIVE_PRODUCT_HEALTHCHECK,\n healthcheck: data,\n});\n\nexport const healthcheck = hostingId => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: PRODUCT_HEALTHCHECK_URL(hostingId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_PRODUCT_HEALTHCHECK }),\n success: response => receiveProductHealthcheck(response.data),\n error: () => ({ type: ERROR_PRODUCT_HEALTHCHECK }),\n },\n },\n});\n\nexport const savePassword = (hostingId, data) => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: PRODUCT_SAVE_PASSWORD_URL(hostingId),\n method: 'PUT',\n body: data,\n actionTypes: {\n request: () => ({ type: REQUEST_PRODUCT_SAVE_PASSWORD }),\n success: () => ({ type: RECEIVE_PRODUCT_SAVE_PASSWORD }),\n error: () => ({ type: ERROR_PRODUCT_SAVE_PASSWORD }),\n },\n },\n});\n\n\nconst receiveWHMPanelAccess = data => ({\n type: RECEIVE_WHM_PANEL_ACCESS,\n data,\n});\n\nconst errorWHMPanelAccess = (healthcheck) => {\n const [vpsIP] = healthcheck.ips;\n\n return vpsIP ? ({\n type: ERROR_HEALTHCHECK_WHM_PANEL_ACCESS,\n data: `http://${vpsIP}:2086`,\n }) : ({\n type: ERROR_WHM_PANEL_ACCESS,\n });\n};\n\nexport const getWHMPanelAccess = () => (dispatch, getState) => {\n const { healthcheck } = getState().productDetail;\n const { id: clientId } = getState().summary;\n const isGetAccess = healthcheck && ('id' in healthcheck);\n\n if (isGetAccess) {\n return dispatch({\n [CALL_API]: {\n authenticated: true,\n authorizationType: 'jwt',\n endpoint: PANEL_WHM_URL(healthcheck.id),\n method: 'GET',\n customHeaders: {\n 'X-Brand': `${COUNTRY.toLowerCase()}`,\n 'X-Client-ID': clientId,\n },\n actionTypes: {\n request: () => ({ type: REQUEST_WHM_PANEL_ACCESS }),\n success: response => receiveWHMPanelAccess(response.data),\n error: () => errorWHMPanelAccess(healthcheck),\n },\n },\n });\n }\n\n return new Promise((resolve) => {\n resolve(dispatch(errorWHMPanelAccess(healthcheck)));\n });\n};\n\nexport const getAddonIdFromSiteBuilderAddon = ({ hostingId, domain }) => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: ADDON_ID_FROM_SITE_BUILDER_ADDON(hostingId, domain),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_ADDON_ID_FROM_SITE_BUILDER }),\n success: ({ data }) => ({ type: RECEIVE_ADDON_ID_FROM_SITE_BUILDER, data }),\n error: () => ({ type: ERROR_ADDON_ID_FROM_SITE_BUILDER }),\n },\n },\n});\n\nexport const updateOptionsProductDetail = actions => ({\n type: UPDATE_ACTIONS_IN_PRODUCT_DETAILS,\n data: actions,\n});\n\nexport const loadProductDetailSitebuilder = hostingId => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: PRODUCT_DETAIL_URL(hostingId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_SITEBUILDER_PRODUCT_DETAIL }),\n success: ({ data }) => ({\n type: RECEIVE_SITEBUILDER_PRODUCT_DETAIL,\n productDetail: addSitebuilderActionsOnSharedAndResellerPlans(data),\n }),\n error: () => ({ type: ERROR_SITEBUILDER_PRODUCT_DETAIL }),\n },\n },\n});\n","import React, {\n useState, useContext, useEffect, useCallback, useRef, useMemo,\n} from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Redirect, useParams } from 'react-router-dom';\nimport { useHistory } from 'react-router';\nimport { sitesBuilderLocale, wizardLocale, surveyCountry } from './WizardHandler.locale';\nimport * as Styles from './WizardHandler.styles';\nimport { sitesActions } from '@/redux/modules/sites';\nimport { FeedbackStepper } from '@/pages/common';\nimport { ThemeContext } from 'styled-components';\nimport snappyDesktop from '@/media/siteBuilder/snappy-desktop.svg';\nimport snappyMobile from '@/media/siteBuilder/snappy-mobile.svg';\nimport colorLine from '@/media/siteBuilder/color-line.svg';\nimport Configurations from '../components/Configurations';\nimport { useResize } from '@/hooks/useResize';\nimport { WizardAbout } from '../components/WizardAbout';\nimport { WizardWordPressConfig } from '../components/WizardWordPressConfig';\nimport {\n IconArrowForward,\n IconDetailedInstitutional,\n IconDetailedPersonalPortfoil,\n IconDetailedBlog,\n IconDetailedStore,\n IconDetailedLandingPage,\n IconDetailedOther,\n} from '@/icons';\nimport { TextButton } from '@/pages/common/v1';\nimport { WizardTools } from '../components/WizardTools';\nimport { sitesBuilderAnalytics } from '@/analytics';\nimport { registerCustomerProfileSurvey } from '@/redux/actions/customerProfileSurvey';\nimport { COUNTRY, IS_PROD, config } from '@/config';\nimport {\n cloudflareActions, domainsActions, faqActions, preChatActions,\n} from '@/redux/modules';\nimport { useWizardTips } from '@/hooks/sites/wizard/useWizardTips';\nimport { WizardTips } from '../components/WizardTips';\nimport { wizardEnum } from './WizardHandler.enum';\nimport useCompareDns from '@/hooks/sites/wizard/useCompareDns/useCompareDns';\nimport useVerifyDomainNative from '@/hooks/sites/wizard/useVerifyDomainNative/useVerifyDomainNative';\nimport { useWizardWordpressThemes } from '@/hooks/sites/wizard/useWizardWordpressThemes';\nimport { useWizardWordpressSetupForm } from '@/hooks/sites/wizard/useWizardWordpressSetupForm';\nimport { useWizardWordpressPlugins } from '@/hooks/sites/wizard/useWizardWordpressPlugins';\nimport { useWizardTools } from '@/hooks/sites/wizard/useWizardTools';\nimport { sortAlphabetic } from '@/utils/Application/sort';\nimport { OverwriteSiteModal } from '../components/OverwriteSiteModal';\nimport { WizardHandlerModals } from '../components/WizardHandlerModals';\nimport { useAsaasRegisterForm } from '@/hooks/asaas/useAsaasRegisterForm';\nimport useLocale from '@/hooks/useLocale';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport {\n ASAAS_LOGIN_LINK,\n} from '@/config/urls/supportUrls';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport {\n CHARLIE_CLOUDFLARE_INSIDE_SITES_WIZARD, FOXTROT_FASTCHECKOUT_ADDON,\n FOXTROT_WIZARD_SITE_EXISTS_CHECK, FOXTROT_WIZARD_WONDERSUITE, FOXTROT_WOOPREMIUM_OFFER, FOXTROT_WORDPRESS_IN_WIZARD,\n CHARLIE_REQUEST_DOMAINS_BY_GATORSOLUTIONS,\n} from '@/config/GrowthBook/constants';\nimport { WizardWondersuite } from '../components/WizardWondersuite';\nimport { VerifiedOverwriteSiteModal } from '../VerifiedOverwriteSiteModal';\nimport { IconLoading } from 'gatorcomponents';\nimport { HOSTING_URL } from '@/config/urls/hostingUrls';\nimport { getProductAddons } from '@/redux/actions/productDetail';\n\nconst WizardHandler = () => {\n const dispatch = useDispatch();\n const history = useHistory();\n const params = useParams();\n const [activeStep, setActiveStep] = useState(1);\n const theme = useContext(ThemeContext);\n const { color } = theme;\n const isSitesBuilderEnabled = true;\n const isHostgatorPluginEnabled = true;\n const displayOverwriteModal = COUNTRY === 'br';\n const bringDomainsWithBuilderTools = true;\n const isWondersuiteEnabled = useFeatureIsOn(FOXTROT_WIZARD_WONDERSUITE);\n const isWoopremiumOfferEnabled = useFeatureIsOn(FOXTROT_WOOPREMIUM_OFFER);\n const isFastCheckoutAddonEnabled = useFeatureIsOn(FOXTROT_FASTCHECKOUT_ADDON);\n const isSiteExistsCheckEnabled = useFeatureIsOn(FOXTROT_WIZARD_SITE_EXISTS_CHECK);\n const isWordpressToolsEnabled = useFeatureIsOn(FOXTROT_WORDPRESS_IN_WIZARD);\n const getDomainsByGatorsolutions = useFeatureIsOn(CHARLIE_REQUEST_DOMAINS_BY_GATORSOLUTIONS);\n const domains = useSelector(state => state.newDomains);\n const sitesState = useSelector(state => state.sites);\n const summary = useSelector(state => state.summary);\n const { loading: displayCreateAccountModal, accountCreated } = useSelector(state => state.asaas);\n const {\n wordpressLoaded, wordpressLoading, plans, wordPressInstalled, loading: sitesLoading, domainDnsStatus, loadingVerifyIfSiteExist, siteExistVerifyFinished, currentlyInstallInfo, uninstallCompleted, loadingUninstall, uninstallError, needToExcludeDefaultFiles, loadingDefaultFilesExclude,\n } = useSelector(state => state.sites);\n const screenSize = useResize();\n const isMobile = screenSize.width < 700;\n const { id: userId } = useSelector(state => state.summary);\n const containerRef = useRef();\n const previousActiveSetupStepRef = useRef(null);\n const faqQuestions = useSelector(state => state.newFaq);\n const { email: userEmail } = useSelector(state => state.summary);\n const { product } = useSelector(state => state.productDetail);\n const { asaas: asaasLocale } = useLocale();\n const initialPluginsSelected = isWondersuiteEnabled ? [] : ['Yoast_admin'];\n const [domainWithCloudflare, setDomainWithCloudflare] = useState(null);\n const [isInternalDomain, setIsInternalDomain] = useState(false);\n const cloudFlareStore = useSelector(state => state.cloudflare);\n const allowCloudflare = useFeatureIsOn(CHARLIE_CLOUDFLARE_INSIDE_SITES_WIZARD);\n\n const {\n stepsStatus,\n setupSteps,\n setupStepsInWondersuite,\n toolsNames,\n modals,\n siteBuilderPlansIds,\n singleDomainsPlansIds,\n multiDomainsPlansIds,\n wordPressPlansIds,\n } = wizardEnum;\n\n const verifyIfIsWordpress = label => label === toolsNames.WORDPRESS || label === toolsNames.WOOCOMMERCE || label === toolsNames.ECOMMERCEPLUS_TRIAL || label === toolsNames.ECOMMERCEPLUS;\n const verifyIfIsWoocommerce = label => label === toolsNames.WOOCOMMERCE || label === toolsNames.ECOMMERCEPLUS_TRIAL || label === toolsNames.ECOMMERCEPLUS;\n\n const steps = [\n {\n id: stepsStatus.CONFIGURATION,\n label: wizardLocale.wizardStepConfigurations,\n },\n {\n id: stepsStatus.ABOUT,\n label: wizardLocale.wizardStepAbout,\n },\n {\n id: stepsStatus.TOOLS,\n label: wizardLocale.wizardStepTools,\n },\n {\n id: stepsStatus.TIPS,\n label: wizardLocale.wizardStepTips,\n },\n ];\n\n const {\n sitesBuilderConfigurations: wizardConfigurationsAnalytics,\n sitesBuilderAbout: wizardAboutAnalytics,\n sitesBuilderTools: wizardToolsAnalytics,\n sitesBuilderTips: wizardTipsAnalytics,\n } = sitesBuilderAnalytics.newGa;\n\n const addDomainToPlan = useCallback(async (subdomain, planExternalId) => {\n const added = await dispatch(sitesActions.aditionalDomain.request(subdomain, planExternalId));\n return added;\n }, [dispatch]);\n\n const resetTldAndSld = useCallback(() => dispatch(sitesActions.domainAvailability.set({\n domainAvailability: false,\n domainTldAvailability: false,\n sld: undefined,\n tld: undefined,\n })), [dispatch]);\n const changeDomainDns = useCallback((domainId, planId, selectedDomain) => dispatch(sitesActions.changeDomainDns.request(domainId, planId, selectedDomain)), [dispatch]);\n const getDomainAndPlanDns = useCallback((domainLabel, planId) => {\n dispatch(sitesActions.domainDns.request(domainLabel));\n dispatch(sitesActions.domainDnsStatusCheck.request({ domain: domainLabel }));\n dispatch(sitesActions.planDns.request(planId));\n }, [dispatch]);\n\n const shuffledObjectivesOptions = useMemo(() => [\n {\n id: 'option-0', label: wizardLocale.about.defaultObjectives.goodSite, value: wizardLocale.about.defaultObjectives.goodSite, gaValue: 'Ter um bom site',\n },\n {\n id: 'option-1', label: wizardLocale.about.defaultObjectives.visibility, value: wizardLocale.about.defaultObjectives.visibility, gaValue: 'Visibilidade e divulgação',\n },\n {\n id: 'option-2', label: wizardLocale.about.defaultObjectives.access, value: wizardLocale.about.defaultObjectives.access, gaValue: 'Alto número de acessos',\n },\n {\n id: 'option-3', label: wizardLocale.about.defaultObjectives.prospection, value: wizardLocale.about.defaultObjectives.prospection, gaValue: 'Captação de clientes',\n },\n {\n id: 'option-4', label: wizardLocale.about.defaultObjectives.results, value: wizardLocale.about.defaultObjectives.results, gaValue: 'Resultados financeiros',\n },\n {\n id: 'option-5', label: wizardLocale.about.defaultObjectives.satisfaction, value: wizardLocale.about.defaultObjectives.satisfaction, gaValue: 'Satisfação dos meus clientes',\n },\n ].sort(() => Math.random() - 0.5), []);\n\n const [objectiveOptions, setObjectiveOptions] = useState([\n ...shuffledObjectivesOptions,\n {\n id: 'option-6', label: wizardLocale.about.defaultObjectives.other, value: wizardLocale.about.defaultObjectives.other, gaValue: 'Outro objetivo',\n },\n ]);\n\n const ecommerceSiteTypeValue = 'ecommerce';\n const defaultSiteTypeValue = '';\n const defaultObjectiveIndexValue = null;\n\n const [displayOthersSitesModal, setDisplayOthersSitesModal] = useState(false);\n const [displayOthersObjectivesModal, setDisplayOthersObjectivesModal] = useState(false);\n const [othersSitesEditFieldValue, setOthersSitesEditFieldValue] = useState('');\n const [othersObjectivesEditFieldValue, setOthersObjectivesEditFieldValue] = useState('');\n const [othersSitesFieldValue, setOthersSitesFieldValue] = useState(wizardLocale.about.defaultOptions.otherTitle);\n const [othersObjectivesFieldValue, setOthersObjectivesFieldValue] = useState(wizardLocale.about.defaultObjectives.other);\n const [othersSitesFieldEditMode, setOthersSitesFieldEditMode] = useState(false);\n const [siteType, setSiteType] = useState(defaultSiteTypeValue);\n const [recommendedTool, setRecommendedTool] = useState('');\n const [selectedObjectiveIndex, setSelectedObjectiveIndex] = useState(defaultObjectiveIndexValue);\n const [overwriteSite, setOverwriteSite] = useState(false);\n const [continueToOverwrite, toggleContinueToOverwrite] = useState(false);\n const [dnsAnalyzeStarted, setDnsAnalyzeStarted] = useState(false);\n const [skipSiteExistCheck, setSkipSiteExistCheck] = useState(false);\n const [userAgreeOverwriteSite, setUserAgreeOverwriteSite] = useState(false);\n const [domainsPage, setDomainsPage] = useState(1);\n const [justUpdatedDomains, setJustUpdatedDomains] = useState(true);\n\n const [tools, setTools] = useState([]);\n const [toolSelected, setToolSelected] = useState('');\n const [selectedSite, setSelectedSite] = useState(null);\n const [selectedPlan, setSelectedPlan] = useState(null);\n\n const [asaasReachedThridStep, setAsaasReachedThridStep] = useState(false);\n\n const tips = useWizardTips(toolSelected);\n const wordpressThemes = useWizardWordpressThemes(toolSelected);\n const wordpressSetupFunctions = useWizardWordpressSetupForm(userEmail, isWondersuiteEnabled);\n const wordpressPluginsFunctions = useWizardWordpressPlugins();\n const [wordPressSetupReadyToContinue, toggleWordPressSetupReadyToContinue] = useState(false);\n const [wodpressSetupValues, setWordpressSetupValues] = useState(wordpressSetupFunctions.defaultFormState);\n const [themeSelected, setThemeSelected] = useState(null);\n const [displayThemeInfoModal, setDisplayThemeInfoModal] = useState(false);\n const [modalTheme, setModalTheme] = useState('');\n const [activeSetupStep, setActiveSetupStep] = useState(1);\n const [userSelectedWondersuiteTrial, setUserSelectedWondersuiteTrial] = useState(false);\n const [pluginsSelected, setPluginsSelected] = useState(initialPluginsSelected);\n const [userSelectedUseEcommercePlus, setUserSelectedUseEcommercePlus] = useState(false);\n\n const [selectedDomain, setSelectedDomain] = useState(null);\n const [showModal, setShowModal] = useState(null);\n const { compareDns } = useCompareDns();\n const { domainNative } = useVerifyDomainNative();\n const [userDomainList, setUserDomainList] = useState([]);\n const [chosenPlan, setChosenPlan] = useState({});\n const [multiDomainsPlans, setMultiDomainsPlans] = useState([]);\n const [singleDomainsPlans, setSingleDomainsPlans] = useState([]);\n const [domainsFilteredPerType, setDomainsFilteredPerType] = useState(false);\n const [selectedDomainPlan, setSelectedDomainPlan] = useState(null);\n const [costumerNeedToUpgradePlan, setCostumerNeedToUpgradePlan] = useState(false);\n const [customDomain, setCustomDomain] = useState(null);\n const [comparingDns, setComparingDns] = useState(false);\n const [isPlanSiteBuilder, setIsPlanSiteBuilder] = useState(false);\n const [questionsFaq, setQuestionsFaq] = useState('');\n const [onUpgradePlanPage, setOnUpgradePlanPage] = useState(false);\n const [hgPluginIsInstall, setHgPluginIsInstall] = useState(false);\n const [lastCloudflareActivationEqualDns, setLastCloudflareActivationEqualDns] = useState(false);\n\n const isWordpressInstall = verifyIfIsWordpress(toolSelected);\n const needToShowDnsWarningModal = domainDnsStatus === wizardEnum.dnsStatusInProgress && isWordpressInstall;\n const siteIsVirtualStore = siteType === ecommerceSiteTypeValue;\n const shouldRenderWooopremiumOffer = isWoopremiumOfferEnabled && siteIsVirtualStore && isWordpressToolsEnabled;\n const shouldRenderEcommercePlusCard = sitesState.hostingAlreadyHasWooPremium && isWordpressToolsEnabled;\n const userSawEcommercePlusOffer = shouldRenderWooopremiumOffer && !shouldRenderEcommercePlusCard;\n\n const asaasInsideWizardShouldAppear = isBRServer;\n\n const wordPressPlugins = wordpressPluginsFunctions.defaultPluginsList;\n\n const requestDomainsPage = useCallback(() => {\n if (justUpdatedDomains) {\n dispatch(domainsActions.domains.request({ page: domainsPage }));\n setJustUpdatedDomains(false);\n }\n }, [domainsPage, dispatch, justUpdatedDomains]);\n\n useEffect(() => {\n requestDomainsPage();\n }, [requestDomainsPage]);\n\n const shouldRequestNewDomainsPage = useCallback(() => {\n const hasDomains = domains.list.length > 0;\n const hasMoreDomainsPages = domains.list.length < domains.listTotal;\n const isLoadingDomains = domains.loading;\n\n if (hasDomains && hasMoreDomainsPages && !isLoadingDomains && !justUpdatedDomains) {\n setDomainsPage(domainsPage + 1);\n setJustUpdatedDomains(true);\n }\n }, [\n domains.loading,\n domains.list,\n domains.listTotal,\n domainsPage,\n justUpdatedDomains,\n ]);\n\n useEffect(() => {\n shouldRequestNewDomainsPage();\n }, [shouldRequestNewDomainsPage]);\n\n const requestAutoSsl = useCallback(() => {\n dispatch(sitesActions.ssl.start.request({ domain: selectedSite.label, hostingId: selectedPlan.external_id }));\n }, [dispatch, selectedSite, selectedPlan]);\n\n const handleShowModal = (modal) => {\n setShowModal(modal);\n };\n\n const submitToSurvey = useCallback((needUpgradePlan) => {\n let plugins = '';\n if (wordPressPlugins.length && isWordpressInstall) {\n wordPressPlugins.forEach((plugin) => {\n if (pluginsSelected.includes(plugin.value)) {\n plugins += `${plugin.title},`;\n }\n });\n }\n const answers = {\n 'Fluxo de criação de sites': surveyCountry,\n 'Etapa 1': needUpgradePlan ? 'Cliente direcionado para upgrade/compra de plano' : {\n Dominio: selectedSite.label,\n Plano: selectedPlan.name,\n },\n 'Etapa 2': {\n 'Tipo de Site': siteType,\n 'Finalidade do Site': selectedObjectiveIndex !== null && objectiveOptions[selectedObjectiveIndex].label,\n },\n 'Etapa 3': {\n 'Ferramenta escolhida': toolSelected,\n 'Tema escolhido': isWordpressInstall ? themeSelected : '',\n 'Plugins escolhidos': plugins,\n },\n };\n\n if (hgPluginIsInstall) {\n answers['Etapa 3'] = {\n ...answers['Etapa 3'],\n 'Plugins nativos': 'HostGator_admin',\n };\n }\n\n if (asaasReachedThridStep) {\n answers['Etapa 3'] = {\n ...answers['Etapa 3'],\n 'Conta Asaas': 'Criada',\n };\n }\n\n if (activeStep < stepsStatus.ABOUT) {\n delete answers['Etapa 2'];\n delete answers['Etapa 3'];\n }\n\n if (activeStep < stepsStatus.TOOLS) {\n delete answers['Etapa 3'];\n }\n\n const payload = {\n answers,\n country: COUNTRY,\n user_id: userId.toString(),\n hosting_id: needUpgradePlan ? `need-upgrade-plan-${userId.toString()}` : `${selectedPlan.external_id}-${selectedSite.label}`,\n domain: needUpgradePlan ? `need-upgrade-plan-${userId.toString()}` : selectedSite.label,\n };\n\n dispatch(registerCustomerProfileSurvey({ data: payload, type: 'wizard' }));\n }, [\n activeStep,\n dispatch,\n objectiveOptions,\n pluginsSelected,\n selectedObjectiveIndex,\n selectedPlan,\n selectedSite,\n siteType,\n themeSelected,\n toolSelected,\n userId,\n wordPressPlugins,\n stepsStatus,\n hgPluginIsInstall,\n asaasReachedThridStep,\n isWordpressInstall,\n ]);\n\n const resetFirstStepStates = useCallback(() => {\n dispatch(sitesActions.addonCheck.reset());\n dispatch(sitesActions.verifyIfSiteExist.reset());\n setSkipSiteExistCheck(false);\n setDnsAnalyzeStarted(false);\n }, [dispatch, setSkipSiteExistCheck, setDnsAnalyzeStarted]);\n\n const handleContinueToNextStep = useCallback((specificStep, submit = true) => {\n const nextStep = specificStep || (activeStep + 1);\n setActiveStep(nextStep);\n if (submit) {\n submitToSurvey();\n }\n if (activeStep === stepsStatus.CONFIGURATION) {\n resetFirstStepStates();\n }\n\n if (specificStep === stepsStatus.TOOLS) {\n wizardAboutAnalytics.continueToThirdStep();\n if (siteIsVirtualStore && IS_PROD && isBRServer && wizardEnum.plansToCallRdWhenVirtualStore.includes(selectedPlan.whmcs_product_id)) {\n dispatch(sitesActions.rdStation.request({\n domain: selectedDomain.label,\n plan: selectedPlan.name,\n }));\n }\n }\n }, [wizardAboutAnalytics, setActiveStep, activeStep, submitToSurvey, stepsStatus, resetFirstStepStates, siteIsVirtualStore, dispatch, selectedDomain, selectedPlan]);\n\n\n const clearCloudflare = useCallback(() => {\n if (allowCloudflare) {\n dispatch(cloudflareActions.cdn.setActivatedDomain({}));\n }\n }, [dispatch, allowCloudflare]);\n\n useEffect(() => {\n clearCloudflare();\n }, [clearCloudflare]);\n\n\n const defaultSitesWizardFlow = useCallback(({\n isDomainNative,\n dnsAreEquals = lastCloudflareActivationEqualDns,\n }) => {\n getDomainAndPlanDns(selectedDomain.label, chosenPlan.external_id);\n\n const hasSubdomain = !!selectedDomain.label.replace(sitesState.anotherDomain, '') && !!sitesState.anotherDomain;\n\n const shouldDisplayAutomaticDnsModal = isDomainNative && !dnsAreEquals;\n const shouldRenderSelectDns = !isDomainNative && !dnsAreEquals;\n\n if (shouldDisplayAutomaticDnsModal) {\n handleShowModal(wizardEnum.modals.DNS_AUTOMATIC);\n !hasSubdomain && changeDomainDns(selectedDomain.domain_id, chosenPlan.external_id, selectedDomain);\n }\n\n if (!shouldDisplayAutomaticDnsModal && shouldRenderSelectDns) {\n handleShowModal(wizardEnum.modals.SELECT_DNS);\n }\n setComparingDns(false);\n }, [\n changeDomainDns,\n chosenPlan.external_id,\n getDomainAndPlanDns,\n handleShowModal,\n selectedDomain,\n sitesState.anotherDomain,\n setComparingDns,\n lastCloudflareActivationEqualDns,\n ]);\n\n const handleCloudflareActivation = useCallback(() => {\n if (allowCloudflare) {\n if (cloudFlareStore.lastActivation.status === 'success') {\n setComparingDns(false);\n handleContinueToNextStep(stepsStatus.ABOUT);\n dispatch(cloudflareActions.cdn.setActivatedDomain({}));\n }\n\n if (cloudFlareStore.lastActivation.status === 'failure') {\n setComparingDns(false);\n defaultSitesWizardFlow({ isDomainNative: true });\n dispatch(cloudflareActions.cdn.setActivatedDomain({}));\n }\n }\n }, [\n cloudFlareStore.lastActivation,\n handleContinueToNextStep,\n setComparingDns,\n stepsStatus,\n allowCloudflare,\n defaultSitesWizardFlow,\n dispatch,\n ]);\n\n useEffect(() => {\n handleCloudflareActivation();\n }, [handleCloudflareActivation]);\n\n const handleToggleUserAgreeOverwriteSite = () => {\n setUserAgreeOverwriteSite(!userAgreeOverwriteSite);\n };\n\n useEffect(() => {\n if (activeStep === stepsStatus.TIPS && toolSelected) {\n submitToSurvey();\n }\n }, [toolSelected, activeStep, stepsStatus.TIPS, submitToSurvey]);\n\n const wizardTools = useWizardTools({\n activeStep,\n selectedSite,\n setToolSelected,\n handleContinueToNextStep,\n setUserSelectedWondersuiteTrial,\n setUserSelectedUseEcommercePlus,\n selectedPlan,\n });\n const { mountTools } = wizardTools;\n\n const shuffledSitesTypesOptions = [\n {\n title: wizardLocale.about.defaultOptions.institucionalTitle,\n subtitle: wizardLocale.about.defaultOptions.institucionalSubtitle,\n iconLeft: \n \n \n \n );\n }\n\n const hasPreviousStep = activeStep > 1;\n const hasUpgradeOrDomainAction = costumerNeedToUpgradePlan || sitesActions.domainAvailability;\n const hasPlans = sitesState.plans.length > 0;\n\n const shouldRenderBackButton = hasPreviousStep && hasUpgradeOrDomainAction && hasPlans;\n\n return (\n \n \n {activeStep === stepsStatus.CONFIGURATION && (\n \n \n {shouldRenderBackButton && (\n <>\n \n\n \n \n\n \n );\n};\n\nexport default WizardHandler;\n","const styles = theme => ({\n card: {\n width: '100%',\n boxShadow: `0px 1px 3px ${theme.color.tundoraLight}`,\n border: 'none',\n background: theme.color.white,\n '&:focus': {\n border: 'none',\n outline: 'none',\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles } from '@material-ui/core';\nimport styles from './styles';\n\n\nconst PlanCard = ({\n classes, children,\n}) => (\n \n {children}\n
\n);\n\nexport default withStyles(styles)(PlanCard);\n","const styles = theme => ({\n card: {\n background: theme.color.white,\n boxShadow: `0px 1px 3px ${theme.color.tundoraLight}`,\n borderLeft: '5px solid transparent',\n },\n\n statusActive: {\n borderColor: theme.color.indigo,\n },\n statusNotConfigured: {\n borderColor: theme.color.valencia,\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport classnames from 'classnames';\nimport { withStyles } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nconst SiteCard = ({\n classes, className, children, status,\n}) => (\n \n {children}\n \n);\n\nexport default withStyles(styles)(SiteCard);\n","const styles = theme => ({\n status: {\n display: 'inline-block',\n height: 'fit-content',\n lineHeight: '20px',\n color: theme.color.white,\n fontSize: '12px',\n padding: '0 7px',\n borderRadius: 3,\n whiteSpace: 'nowrap',\n },\n statusActive: {\n backgroundColor: theme.color.oceanGreen,\n },\n statusPending: {\n backgroundColor: theme.color.brightSun,\n },\n statusPendingTransfer: {\n backgroundColor: theme.color.brightSun,\n },\n statusExpired: {\n backgroundColor: theme.color.grayLight,\n },\n statusCancelled: {\n backgroundColor: theme.color.geyser,\n },\n statusFraud: {\n backgroundColor: theme.color.brightSun,\n },\n statusSuspended: {\n backgroundColor: theme.color.valencia,\n },\n statusBuilding: {\n backgroundColor: theme.color.coral,\n },\n statusNotConfigured: {\n backgroundColor: theme.color.valencia,\n },\n statusOnConfigure: {\n backgroundColor: theme.color.brightSun,\n },\n statusInAnalysis: {\n backgroundColor: theme.color.brightSun,\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles } from '@material-ui/core';\nimport classnames from 'classnames';\nimport styles from './styles';\n\nconst CardStatus = ({ classes, children, status }) => (\n \n {children}\n \n);\n\nexport default withStyles(styles)(CardStatus);\n","const styles = theme => ({\n button: {\n margin: 5,\n height: 31,\n color: theme.color.indigo,\n fontSize: 12,\n fontWeight: 400,\n letterSpacing: 0.01,\n textTransform: 'none',\n background: theme.color.white,\n boxShadow: `0px 3px 6px ${theme.color.shadowBlue}`,\n padding: '6px 16px',\n borderRadius: 19,\n opacity: 1,\n transition: '0.2s box-shadow, 0.2s background',\n\n '&:hover': {\n background: theme.color.skyHover,\n },\n\n '&$disabled': {\n color: theme.color.indigo,\n },\n },\n root: {\n '&:disabled': {\n color: theme.color.indigo,\n boxShadow: 'none',\n opacity: 0.5,\n },\n },\n link: {\n textDecoration: 'none',\n display: 'inline-block',\n },\n disabled: {\n boxShadow: 'none',\n opacity: 0.5,\n },\n customPopper: {\n opacity: 1,\n },\n customTooltip: {\n backgroundColor: theme.color.doveGray,\n borderRadius: 0,\n fontSize: 12,\n lineHeight: '14px',\n textAlign: 'center',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { NavLink } from 'react-router-dom';\nimport { withStyles, Button, Tooltip } from '@material-ui/core';\nimport { Trans } from 'react-i18next';\nimport PropTypes from 'prop-types';\nimport { parseToHref, preventClick } from '@/utils/Validators/validation';\nimport styles from './styles';\n\nconst ShadowButton = ({\n classes,\n children,\n disabled,\n to,\n blank,\n onClick,\n}) => {\n const toLocation = parseToHref(to);\n const isInternal = url => window.location.host === url.host;\n\n const isInternalRender = () => (\n isInternal(toLocation) ? (\n {\n if (onClick) { onClick(); }\n preventClick(e, disabled);\n }}\n >\n \n {children}\n \n \n ) : (\n \n {children}\n \n )\n );\n\n return disabled ? (\n \n <>0\n 1\n <>2\n \n )}\n >\n {isInternalRender()}\n \n ) : (isInternalRender());\n};\n\nShadowButton.propTypes = {\n classes: PropTypes.object,\n children: PropTypes.oneOfType([\n PropTypes.element,\n PropTypes.string,\n ]),\n disabled: PropTypes.bool,\n to: PropTypes.string.isRequired,\n blank: PropTypes.bool,\n};\n\n\nexport default withStyles(styles)(ShadowButton);\n","const styles = theme => ({\n item: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n padding: '27px 24px',\n [theme.breakpoints.down('sm')]: {\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n },\n content: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n [theme.breakpoints.down('sm')]: {\n marginBottom: 10,\n },\n },\n title: {\n fontSize: 16,\n fontWeight: 500,\n color: theme.color.tundora,\n textAlign: 'left',\n userSelect: 'none',\n },\n subtitle: {\n display: 'inline-block',\n marginLeft: 5,\n fontSize: 12,\n color: theme.color.regentGray,\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport CardStatus from '@/components/Cards/CardStatus';\nimport ShadowButton from '@/components/Buttons/ShadowButton';\nimport styles from './styles';\n\n\nconst SiteItem = ({\n classes,\n site,\n t,\n}) => {\n const {\n id,\n domain,\n status,\n type,\n } = site;\n\n const isActive = status === 'active';\n const isWebsitebuilder = type === 'websitebuilder';\n\n let buttonTarget = '';\n let buttonText = '';\n\n switch (status) {\n case 'active':\n buttonTarget = `${t('routes.products')}${t('routes.productdetail')}/${id}`;\n buttonText = t('site.actions.active');\n break;\n case 'not_configured':\n buttonTarget = `${t('routes.domains')}${t('routes.domainConfig')}/${id}`;\n buttonText = t('site.actions.notConfigured');\n break;\n default:\n break;\n }\n\n return (\n \n
\n
\n {domain} \n {isWebsitebuilder && (\n {t('site.websitebuilder')} \n )}\n
\n {!isActive && (\n
{t(`site.status.${status}`)} \n )}\n
\n\n
{buttonText} \n
chipLinkOfProductTagManager(button.label)}\n >\n {button.label}\n \n ))\n );\n};\n\nPlanButtonsList.propTypes = {\n status: PropTypes.string.isRequired,\n externalId: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]).isRequired,\n};\n\nexport default withI18n()(PlanButtonsList);\n","const styles = theme => ({\n content: {\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n alignItems: 'flex-start',\n flexDirection: 'column',\n },\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n width: '100%',\n boxShadow: `0px 1px 3px ${theme.color.tundoraLight}`,\n border: 'none',\n padding: '27px 24px',\n background: theme.color.white,\n '&:focus': {\n border: 'none',\n outline: 'none',\n },\n },\n planContent: {\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n },\n display: 'flex',\n flexDirection: 'column',\n width: '30%',\n },\n planName: {\n marginBottom: 3,\n fontSize: 16,\n fontWeight: 500,\n textAlign: 'left',\n letterSpacing: 0.01,\n color: theme.color.tundora,\n },\n planStatus: {\n display: 'flex',\n },\n planDomain: {\n display: 'inline-block',\n marginLeft: 10,\n fontSize: 14,\n fontWeight: 400,\n letterSpacing: 0.01,\n color: theme.color.regentGray,\n },\n actionsContent: {\n [theme.breakpoints.down('sm')]: {\n marginTop: 20,\n width: '100%',\n },\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n width: '70%',\n },\n actionsMobile: {\n [theme.breakpoints.down('sm')]: {\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n },\n buttonsList: {\n [theme.breakpoints.down('sm')]: {\n marginBottom: 20,\n },\n },\n expandButton: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n cursor: 'pointer',\n },\n expandText: {\n [theme.breakpoints.down('sm')]: {\n textTransform: 'none',\n },\n display: 'inline-block',\n marginRight: 2,\n fontSize: 12,\n fontWeight: 500,\n letterSpacing: 0.01,\n color: theme.color.indigo,\n textTransform: 'uppercase',\n userSelect: 'none',\n },\n warningWrapper: {\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n },\n width: '70%',\n },\n expandIcon: {\n fill: theme.color.indigo,\n },\n expandMore: {\n transform: 'rotate(180deg)',\n transition: theme.transitions.create('transform', {\n duration: theme.transitions.duration.shortest,\n }),\n },\n expandLess: {\n transform: 'rotate(0deg)',\n transition: theme.transitions.create('transform', {\n duration: theme.transitions.duration.shortest,\n }),\n },\n collapse: {\n [theme.breakpoints.down('sm')]: {\n padding: '7px 0',\n\n },\n display: 'flex',\n flexWrap: 'wrap',\n padding: '19px 18px',\n background: theme.color.geyser,\n },\n siteWrapper: {\n [theme.breakpoints.down('sm')]: {\n width: 'calc(100% - 12px)',\n flexDirection: 'column',\n alignItems: 'flex-start',\n margin: '3px 5px',\n },\n width: 'calc(50% - 12px)',\n margin: '5px 6px',\n },\n customPopper: {\n opacity: 1,\n },\n customTooltip: {\n backgroundColor: theme.color.doveGray,\n borderRadius: 0,\n fontSize: 12,\n lineHeight: '14px',\n textAlign: 'center',\n },\n});\n\nexport default styles;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { withI18n, Trans } from 'react-i18next';\nimport { Collapse, withStyles, Tooltip } from '@material-ui/core';\nimport { ExpandLess as ExpandIcon } from '@material-ui/icons';\nimport classnames from 'classnames';\nimport SiteCard from '@/components/Cards/SiteCard';\nimport SiteItem from '@/components/SitesPlans/SiteItem';\nimport CardStatus from '@/components/Cards/CardStatus/';\nimport { HOSTING_URL } from '@/config/urls/hostingUrls';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport WarningNotice from '@/components/Notification/WarningNotice/';\nimport PlanButtonsList from '@/components/SitesPlans/PlanButtonsList';\nimport styles from './styles';\n\nconst PlanItem = ({\n classes,\n plan,\n t,\n}) => {\n const {\n id,\n name,\n status,\n domain,\n external_id: externalId,\n items: sites,\n } = plan;\n\n const isActive = status === 'active';\n const activeTooltip = status === 'pending' || status === 'active' || status === 'suspended' || status === 'expired';\n const hasSite = sites.length > 0;\n const [isExpand, setIsExpand] = useState(false);\n\n const expand = () => {\n if (isActive && hasSite) {\n setIsExpand(!isExpand);\n }\n };\n\n const warningMessage = (status) => {\n switch (status) {\n case 'pending':\n case 'suspended':\n return (\n \n 0\n 1 \n \n );\n case 'in_analysis':\n case 'on_configure':\n return t(`plan.warning.${status}`);\n case 'cancelled':\n return (\n \n 0\n 1 \n \n );\n case 'expired':\n return (\n \n 0\n 1 \n \n );\n default:\n return '';\n }\n };\n\n const renderCardStatus = () => (activeTooltip ? (\n \n \n {`${t(`plan.status.${status}`)}`} \n
\n \n ) : (\n {`${t(`plan.status.${status}`)}`} \n ));\n\n return (\n <>\n expand()}\n role=\"presentation\"\n data-testid=\"plan-item-content\"\n >\n \n
{name} \n
\n {renderCardStatus()}\n {domain} \n
\n
\n
\n\n {!isActive && (\n
\n
\n )}\n\n {(isActive && hasSite) && (\n
\n {t('plan.expand')} \n
\n )}\n
\n \n {sites.map(site => (\n
\n \n \n
\n ))}\n
\n )}\n \n );\n};\n\nPlanItem.propTypes = {\n classes: PropTypes.object.isRequired,\n plan: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n domain: PropTypes.string.isRequired,\n external_id: PropTypes.string.isRequired,\n status: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n items: PropTypes.array.isRequired,\n }).isRequired,\n t: PropTypes.func.isRequired,\n};\n\nexport default withI18n()(withStyles(styles)(PlanItem));\n","const styles = theme => ({\n input: {\n width: '100%',\n fontSize: '14px',\n margin: '6px 14px 0 0',\n '& fieldset': {\n borderRadius: '2px',\n },\n '& input[type=\"number\"]::-webkit-outer-spin-button, input[type=\"number\"]::-webkit-inner-spin-button': {\n '-webkit-appearance': 'none',\n margin: 0,\n },\n '& input[type=\"number\"]': {\n '-moz-appearance': 'textfield',\n },\n '& label': {\n transform: 'translate(14px, 10px) scale(1)',\n zIndex: 0,\n },\n '& input': {\n padding: '7px',\n paddingBottom: '8px',\n },\n [theme.breakpoints.down(1166)]: {\n marginBottom: '10px',\n },\n [theme.breakpoints.down('sm')]: {\n marginRight: '14px',\n marginLeft: 0,\n '& fieldset': {\n width: '100%',\n },\n },\n },\n cssLabel: {\n '&$cssFocused': {\n color: theme.color.chambray,\n },\n },\n cssOutlinedInput: {\n '&$cssFocused $notchedOutline': {\n border: `1px solid ${theme.color.chambray}`,\n },\n },\n cssFocused: {},\n notchedOutline: {},\n});\n\nexport default styles;\n","\nimport React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n TextField, InputAdornment, IconButton, withStyles,\n} from '@material-ui/core';\nimport Visibility from '@material-ui/icons/Visibility';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\n\nimport styles from './style';\n\nconst InputField = ({\n onChange, value, classes, label, className, icon, inputRef, password, required, error, ftp, defaultValue,\n}) => {\n const [showPassword, setShowPassword] = useState(!password);\n const handleClickShowPassword = () => {\n setShowPassword(!showPassword);\n };\n const setAdornment = () => (password ? (\n \n \n {showPassword ? \n ) : ({icon}
\n ftp://
\n \n ));\n\n return (\n \n {verifyTypeItem(product.domain)}\n \n ));\n case 'states':\n return filterOptions.map(state => (\n \n {verifyTypeItem(state.name)}\n \n ));\n case 'cities':\n return filterOptions.map(city => (\n \n {verifyTypeItem(city.name)}\n \n ));\n case 'knowledge':\n return filterOptions.map(persona => (\n \n {verifyTypeItem(persona.name)}\n \n ));\n case 'sitelockshield':\n return filterOptions.map(shield => (\n \n {verifyTypeItem(shield.value)}\n \n ));\n case 'paymentCycle':\n return filterOptions.map((paymentCycle, idx) => (\n \n {verifyTypeItem(paymentCycle.name)}\n {paymentCycle.span && (\n \n \n <>0\n {{ savedAmount: paymentCycle.span }}\n <>1\n \n \n )}\n \n ));\n case 'paymentMethod':\n return filterOptions.map((paymentMethod, idx) => (\n \n {verifyTypeItem(paymentMethod.name)}\n\n {paymentMethod.span && (\n \n {t('proEmail.upgradePlan.instantAccess')}\n \n )}\n \n ));\n default:\n return filterOptions.map((value) => {\n const valueWithoutSpace = value.replace(/ /g, '');\n return (\n \n {verifyTypeItem(value)}\n \n );\n });\n }\n };\n\n const [selectStyles, setSelectStyles] = useState({});\n\n useEffect(() => {\n let handleStyles = {};\n\n if (setWidth) {\n handleStyles = { ...selectStyles, width: setWidth };\n }\n\n if (setMaxWidth) {\n handleStyles = { ...selectStyles, maxWidth: setMaxWidth };\n }\n\n setSelectStyles(handleStyles);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n \n \n {inputLabel}\n \n \n {menuItemDefaultText} \n \n )}\n {generateFilterOptions()}\n \n {helperText && (\n {helperText} \n )}\n \n );\n};\n\nSelectField.propTypes = {\n filterOptions: PropTypes.array.isRequired,\n handleChangeSelectValue: PropTypes.func.isRequired,\n inputLabel: PropTypes.string.isRequired,\n labelWidth: PropTypes.number.isRequired,\n menuItemDefaultText: PropTypes.string.isRequired,\n selectType: PropTypes.string.isRequired,\n selectValue: PropTypes.string.isRequired,\n};\n\nexport default withStyles(styles)(withI18n()(SelectField));\n","const styles = theme => ({\n filter: {\n background: theme.color.white,\n minHeight: '60px',\n position: 'relative',\n boxShadow: `0px 1px 3px ${theme.color.tundoraLight}`,\n padding: '14px 14px 14px 24px',\n borderRadius: '0',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n [theme.breakpoints.down(1060)]: {\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n },\n title: {\n fontWeight: 300,\n fontSize: '24px',\n lineHeight: '29px',\n letterSpacing: 0.01,\n color: theme.color.tundora,\n [theme.breakpoints.down(1060)]: {\n marginBottom: 10,\n },\n },\n content: {\n display: 'flex',\n alignItems: 'center',\n [theme.breakpoints.down(1060)]: {\n width: '100%',\n alignItems: 'flex-start',\n },\n },\n formControl: {\n minWidth: 200,\n margin: 0,\n [theme.breakpoints.down(600)]: {\n minWidth: 'auto',\n },\n },\n input: {\n minWidth: 200,\n margin: '0px 14px 0 0',\n [theme.breakpoints.down(600)]: {\n minWidth: 'auto',\n },\n [theme.breakpoints.up(1115)]: {\n minWidth: 300,\n },\n [theme.breakpoints.up(1220)]: {\n minWidth: 400,\n },\n },\n label: {\n fontSize: 14,\n },\n selectFieldLabel: {\n fontSize: 14,\n },\n closeIcon: {\n color: theme.color.tundora,\n fontSize: 18,\n cursor: 'pointer',\n animation: 'isTyping 0.05s linear',\n },\n searchIcon: {\n color: theme.color.grayContour,\n fontSize: 18,\n },\n '@keyframes isTyping': {\n from: {\n transform: 'rotate(20deg)',\n },\n to: {\n transform: 'rotate(0deg)',\n },\n },\n});\n\nexport default styles;\n","import React, { useRef, useState } from 'react';\nimport { withStyles } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport { Search as SearchIcon, Close as CloseIcon } from '@material-ui/icons';\nimport InputField from '@/components/Fields/InputField';\nimport SelectField from '@/components/Fields/SelectField';\nimport styles from './styles';\n\nconst FilterSitesPlans = ({\n t, classes, total, selectFilters,\n}) => {\n const inputRef = useRef();\n\n const [inputFieldValue, setInputFieldValue] = useState('');\n const [selectFieldValue, setSelectFieldValue] = useState('');\n\n const showFilter = total > 1;\n\n const handleCleanInputField = () => {\n inputRef.current.focus();\n setInputFieldValue('');\n };\n\n return (\n \n
{t('lists.sitesPlans')} \n\n {showFilter && (\n
\n setInputFieldValue(e.target.value)}\n label={t('filter.placeholder.search')}\n value={inputFieldValue}\n icon={inputFieldValue === ''\n ? setSelectFieldValue(e.target.value)}\n menuItemDefaultText={t('filter.allSites')}\n selectValue={selectFieldValue}\n inputLabel={t('filter.allSites')}\n filterOptions={selectFilters}\n selectType=\"planStatus\"\n labelWidth={94}\n />\n
\n )}\n
\n {loadingPlans\n ?
\n : (\n <>\n
\n
\n {plans.map(plan => (\n
\n ))}\n \n )\n }\n
{children} \n);\n\nexport default withStyles(styles)(NoResultMessage);\n","const styles = theme => ({\n message: {\n fontSize: '14px',\n color: theme.color.regentGray,\n textAlign: 'center',\n marginTop: '18px',\n fontWeight: '400',\n padding: '0 50px',\n [theme.breakpoints.down('sm')]: {\n padding: '0 30px',\n },\n },\n linkMessage: {\n color: theme.color.indigo,\n textDecoration: 'none',\n fontWeight: 700,\n '&:hover': {\n textDecoration: 'underline',\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { Typography, withStyles } from '@material-ui/core';\nimport { withI18n, Trans } from 'react-i18next';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport styles from './styles';\n\n\nconst NoResultMessageTrans = ({ classes, languageKey, urlTarget }) => (\n \n \n 0\n 1 \n 2\n \n \n);\n\nexport default withI18n()(withStyles(styles)(NoResultMessageTrans));\n","import React, { useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { loadFaqEmails } from '@/redux/actions/faq';\nimport FaqDefault from '@/components/FrequentlyQuestions/FaqDefault';\nimport { SUPPORT_URL } from '@/config/urls/supportUrls';\n\n\nconst FaqEmails = ({ className, link }) => {\n const faq = useSelector(state => state.faq);\n const dispatch = useDispatch();\n\n useEffect(() => {\n dispatch(loadFaqEmails());\n }, [dispatch]);\n\n return (\n \n {children}\n \n);\n\n\nexport default withStyles(styles)(OutlineButton);\n","const styles = theme => ({\n button: {\n textDecoration: 'none',\n },\n outline: {\n color: theme.color.indigo,\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles } from '@material-ui/core';\nimport OutlineButton from '@/components/Buttons/OutlineButton';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport styles from './styles';\n\n\nconst FilterButton = ({\n classes,\n target,\n children,\n dataId,\n}) => (\n \n {children} \n \n);\n\nexport default withStyles(styles)(FilterButton);\n","const styles = theme => ({\n emailInput: {\n width: '200px',\n '@media(max-width: 1165px)': {\n width: '100%',\n },\n },\n startContentWrapper: {\n display: 'flex',\n },\n listTitle: {\n fontWeight: 300,\n fontSize: '24px',\n margin: '0 20px 0 32px',\n },\n card: {\n position: 'relative',\n borderRadius: '0',\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n padding: 7,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n minHeight: '60px',\n\n marginBottom: 5,\n '@media(max-width: 1165px)': {\n flexDirection: 'column',\n alignItems: 'flex-start',\n padding: 2,\n },\n },\n filterContainer: {\n display: 'flex',\n alignItems: 'center',\n '@media(max-width: 1165px)': {\n alignItems: 'flex-start',\n flexDirection: 'column',\n width: '100%',\n },\n },\n filterTitle: {\n fontSize: '14px',\n whiteSpace: 'nowrap',\n paddingRight: '15px',\n fontWeight: 400,\n '@media(max-width: 1165px)': {\n fontSize: '24px',\n fontWeight: 300,\n paddingTop: '10px',\n marginLeft: '32px',\n paddingBottom: '10px',\n },\n },\n collapseWrapper: {\n width: '100%',\n background: 'transparent',\n display: 'flex',\n paddingRight: '11px',\n justifyContent: 'flex-end',\n '@media(max-width: 1165px)': {\n flexDirection: 'column',\n paddingLeft: '23px',\n paddingRight: '23px',\n },\n },\n expand: {\n transform: 'rotate(0deg)',\n transition: theme.transitions.create('transform', {\n duration: theme.transitions.duration.shortest,\n }),\n },\n expandOpen: {\n transform: 'rotate(180deg)',\n },\n expandArrow: {\n position: 'absolute',\n right: 12,\n top: 7,\n },\n root: {\n display: 'flex',\n justifyContent: 'flex-end',\n width: '100%',\n '@media(max-width: 1165px)': {\n paddingBottom: 8,\n flexDirection: 'column',\n justifyContent: 'center',\n },\n },\n});\n\nexport default styles;\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useState, useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n Card, Typography, Collapse, IconButton,\n} from '@material-ui/core';\nimport { withStyles } from '@material-ui/core/styles';\nimport { withI18n } from 'react-i18next';\nimport { ExpandMore } from '@material-ui/icons';\nimport classnames from 'classnames';\nimport useMediaQuery from '@material-ui/core/useMediaQuery/unstable_useMediaQuery';\nimport { useParams } from 'react-router';\nimport { filterEmailsAddress } from '@/redux/actions/emails';\nimport InputField from '@/components/Fields/InputField';\nimport FilterButton from '@/components/Buttons/FilterButton';\nimport styles from './styles';\n\n\nconst FilterEmails = ({ classes, t }) => {\n const { domain } = useParams();\n\n const [expand, setExpand] = useState(false);\n const [email, setEmail] = useState('');\n\n const emailState = useSelector(state => state.emails);\n const { total } = emailState;\n const { hosting } = emailState.hostings.list;\n\n const dispatch = useDispatch();\n const isMobile = useMediaQuery('(max-width:1165px)');\n\n const handleCollapse = () => {\n isMobile ? setExpand(false) : setExpand(true);\n };\n\n useEffect(() => {\n handleCollapse();\n }, []);\n\n useEffect(() => {\n dispatch(filterEmailsAddress(email));\n }, [email]);\n\n const handleExpandCollapse = () => {\n setExpand(!expand);\n };\n\n const handleChange = (event) => {\n setEmail(event.target.value);\n };\n\n if (isMobile && total < 5) {\n return null;\n }\n\n return (\n \n {!isMobile && (\n \n {t('lists.emails')} \n {hosting > 0 && (\n \n {t('emails.createAccount')}\n \n )}\n
\n )}\n\n {total > 5 && (\n \n
{t('filter.title')} \n\n
\n \n handleChange(event)}\n />\n
\n \n\n {isMobile && (\n
\n handleExpandCollapse()}\n >\n
\n )}\n
\n );\n};\n\nexport default withStyles(styles, { withTheme: true })(withI18n()(FilterEmails));\n","const styles = theme => ({\n card: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n padding: '13px 34px',\n backgroundColor: theme.color.white,\n borderRadius: '0',\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n marginBottom: '6px',\n [theme.breakpoints.down('xs')]: {\n alignItems: 'flex-start',\n flexDirection: 'column',\n },\n },\n title: {\n lineHeight: '38px',\n fontSize: '24px',\n fontWeight: theme.font.weights.light,\n margin: '0 20px 0 0',\n padding: 0,\n color: theme.color.tundora,\n },\n searchBarDiv: {\n [theme.breakpoints.down('xs')]: {\n width: '100%',\n },\n },\n contentDiv: {\n display: 'flex',\n },\n titleBottom: {\n [theme.breakpoints.down('xs')]: {\n marginBottom: 15,\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport useMediaQuery from '@material-ui/core/useMediaQuery/unstable_useMediaQuery';\n\nimport styles from './styles';\n\n\nconst FilterCard = ({\n title, children, classes, button, useMediaWidth, className, searchBar,\n}) => {\n const isMobile = useMediaQuery(`(max-width:${useMediaWidth}px)`);\n\n return (\n <>\n {isMobile && (\n <>\n \n
\n
\n {searchBar}\n
\n
\n {children}\n
\n \n );\n};\n\nexport default withStyles(styles)(FilterCard);\n","const styles = theme => ({\n button: {\n display: 'block',\n margin: '20px auto',\n backgroundColor: theme.color.white,\n borderRadius: '2px',\n boxShadow: 'none',\n border: `1px solid ${theme.color.mystic}`,\n color: theme.color.tundora,\n padding: '6px 16px',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport { Button } from '@material-ui/core/';\n\nimport styles from './styles';\n\n\nconst ActionButton = ({\n classes,\n t,\n action,\n children,\n color,\n variant,\n className,\n ...rest\n}) => (\n \n {children}\n \n);\n\nexport default withStyles(styles)(ActionButton);\n","const styles = theme => ({\n wrapper: {\n padding: '0 40px',\n [theme.breakpoints.down('sm')]: {\n padding: 0,\n },\n },\n container: {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n padding: '10px 20px',\n backgroundColor: theme.color.havelockBlue,\n color: theme.color.white,\n fontSize: '12px',\n marginTop: 7,\n marginBottom: 5,\n [theme.breakpoints.down('xs')]: {\n marginTop: 12,\n },\n },\n icon: {\n marginRight: 12,\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles } from '@material-ui/core';\nimport { Info } from '@material-ui/icons';\nimport { withI18n } from 'react-i18next';\n\nimport styles from './styles';\n\n\nfunction ManageEmailCpanel({ t, classes }) {\n return (\n \n
\n
\n
\n \n \n \n {t('emails.deleteEmailAccount')}\n \n \n \n
{t('emails.confirmationDeleteEmail')}
\n
\n \n "\n {emailAddress}\n "\n \n ?\n
\n
\n
\n \n \n {t('cancel')}\n \n handleDeleteAccount()}\n color=\"primary\"\n autoFocus\n onLoading={loadingDeleteAccount}\n className={classes.save}\n data-id=\"button-submit-email-delete\"\n >\n {t('emails.buttonConfirmation')}\n \n \n \n );\n};\n\nDeleteEmailAccountModal.propTypes = {\n openModal: PropTypes.bool.isRequired,\n handleCloseModal: PropTypes.func.isRequired,\n hostingId: PropTypes.number.isRequired,\n emailAddress: PropTypes.string.isRequired,\n};\n\nexport default withStyles(styles, { withTheme: true })(withI18n()(DeleteEmailAccountModal));\n","const styles = theme => ({\n save: {\n minWidth: 95,\n },\n dialogContentRoot: {\n paddingBottom: 0,\n },\n modalContainer: {\n [theme.breakpoints.up(491)]: {\n height: 'inherit',\n marginTop: 70,\n },\n },\n containerInput: {\n marginTop: 26,\n marginBottom: 23,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n wrapperContentModal: {\n color: theme.color.tundora,\n },\n modalTitle: {\n fontSize: 24,\n margin: 0,\n padding: 0,\n },\n modalText: {\n fontSize: 14,\n margin: 0,\n padding: 0,\n },\n modalPaper: {\n borderRadius: 0,\n padding: '10px 16px',\n width: 474,\n [theme.breakpoints.down(491)]: {\n minWidth: '100%',\n padding: 0,\n paddingTop: 10,\n },\n },\n dialogTitle: {\n paddingBottom: 8,\n },\n dividerWarning: {\n marginBottom: 20,\n },\n closeIconButton: {\n position: 'absolute',\n right: 5,\n top: 5,\n },\n warningNotice: {\n marginTop: 10,\n marginBottom: 10,\n },\n dialogActionsContent: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n marginBottom: 20,\n marginTop: 6,\n },\n textFieldInput: {\n width: '100%',\n fontSize: '14px',\n margin: 0,\n maxWidth: 139,\n marginRight: 9,\n '& fieldset': {\n borderRadius: '2px',\n },\n '& input[type=\"number\"]::-webkit-outer-spin-button, input[type=\"number\"]::-webkit-inner-spin-button': {\n '-webkit-appearance': 'none',\n margin: 0,\n },\n '& input[type=\"number\"]': {\n '-moz-appearance': 'textfield',\n },\n '& label': {\n transform: 'translate(14px, 10px) scale(1)',\n zIndex: 0,\n },\n '& input': {\n padding: 7,\n paddingTop: 10,\n },\n },\n cssLabel: {\n '&$cssFocused': {\n color: theme.color.chambray,\n },\n },\n cssOutlinedInput: {\n '&$cssFocused $notchedOutline': {\n border: `1px solid ${theme.color.chambray}`,\n },\n },\n cssFocused: {},\n notchedOutline: {},\n textTie: {\n fontSize: 12,\n color: theme.color.regentGray,\n marginLeft: 30,\n marginRight: 30,\n [theme.breakpoints.down(360)]: {\n marginLeft: 10,\n marginRight: 10,\n },\n },\n capacityUnity: {\n fontSize: 12,\n },\n checkboxRootError: {\n color: '#f44336',\n '& span': {\n color: '#f44336',\n },\n },\n iconInfo: {\n cursor: 'pointer',\n fontSize: 17,\n color: theme.color.indigo,\n },\n tootlTipCustom: {\n background: '#000000e3',\n fontSize: 12,\n },\n});\n\nexport default styles;\n","import React, { useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport InfoIcon from '@material-ui/icons/Info';\nimport {\n Dialog, IconButton, DialogTitle, DialogContent, DialogActions, withStyles,\n TextField, FormControlLabel, Checkbox, Tooltip,\n} from '@material-ui/core';\nimport { Close } from '@material-ui/icons';\nimport { withI18n, Trans } from 'react-i18next';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport OutlineButton from '@/components/Buttons/OutlineButton';\nimport { changeStorageEmailAccount } from '@/redux/actions/emails';\nimport { SUCCESS_CHANGE_STORAGE_ACCOUNT_EMAILS, ERROR_CHANGE_STORAGE_ACCOUNT_EMAILS } from '@/redux/actions/actionsTypes';\nimport { validateOnlyNumbers, validateQuota } from '@/utils/Validators/validation';\nimport { notifierSuccess, notifierError } from '@/utils/Application/notifier';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport styles from './styles';\n\n\nconst ChangeStorageEmailAccountModal = ({\n classes,\n openModal,\n handleCloseModal,\n email,\n t,\n}) => {\n const { hostingId, email: emailAddress } = email;\n const [quota, setQuota] = useState(!email.diskUnlimited ? email.diskQuota : '');\n const [errorInput, setErrorInput] = useState(false);\n const [unlimited, setUnlimited] = useState(email.diskUnlimited);\n const dispatch = useDispatch();\n const loadingChangeStorage = useSelector(state => state.emails.loadingChangeStorageAccount);\n const isMobile = window.innerWidth <= 490;\n\n const onHandleCloseModal = () => {\n if (!loadingChangeStorage) {\n handleCloseModal('changeStorage');\n }\n };\n\n const handleChangeStorageEmailAccount = () => {\n if (loadingChangeStorage || (quota === '' && !unlimited)) {\n setErrorInput(true);\n return;\n }\n const storageOptions = {\n quota: Number(quota),\n unlimited,\n };\n\n dispatch(changeStorageEmailAccount(hostingId, emailAddress, storageOptions)).then((res) => {\n if (res.type === SUCCESS_CHANGE_STORAGE_ACCOUNT_EMAILS) {\n onHandleCloseModal();\n dispatch(enqueueSnackbar('snackbar.emails.changeStorage', notifierSuccess));\n }\n\n if (res.type === ERROR_CHANGE_STORAGE_ACCOUNT_EMAILS) {\n dispatch(enqueueSnackbar('snackbar.error.changeStorageEmail', notifierError));\n }\n });\n };\n\n const changeInput = (event) => {\n setErrorInput(false);\n if (validateOnlyNumbers(event.target.value) || event.target.value === '') {\n setQuota((validateQuota(event.target.value)));\n if (event.target.value.length > 7) {\n setQuota(validateQuota(event.target.value.slice(0, event.target.value.length - 1)));\n }\n }\n };\n\n const onChangeCheckBox = () => {\n setErrorInput(false);\n setUnlimited(!unlimited);\n setQuota('');\n };\n\n return (\n \n \n \n \n {t('emails.changeStorage')}\n \n \n \n
\n \n 0\n \n {{ emailAddress }}\n 1\n \n \n
\n
\n
changeInput(event)}\n value={quota}\n error={errorInput}\n InputLabelProps={{\n classes: {\n root: classes.cssLabel,\n focused: classes.cssFocused,\n },\n }}\n InputProps={{\n classes: {\n root: classes.cssOutlinedInput,\n focused: classes.cssFocused,\n notchedOutline: classes.notchedOutline,\n },\n }}\n data-id=\"email-quota\"\n />\n MB
\n {(t('emails.or'))} \n onChangeCheckBox()}\n value=\"ilimited\"\n color=\"primary\"\n classes={{\n root: errorInput && classes.checkboxRootError,\n }}\n data-id=\"email-unlimited-quota\"\n />\n )}\n label={t('emails.unlimited')}\n />\n {!isMobile && (\n \n \n
\n \n \n {t('cancel')}\n \n handleChangeStorageEmailAccount()}\n color=\"primary\"\n autoFocus\n onLoading={loadingChangeStorage}\n className={classes.save}\n data-id=\"button-submit-email-change-storage\"\n >\n {t('emails.change')}\n \n \n \n );\n};\n\nChangeStorageEmailAccountModal.propTypes = {\n openModal: PropTypes.bool.isRequired,\n handleCloseModal: PropTypes.func.isRequired,\n email: PropTypes.shape({\n hostingId: PropTypes.number.isRequired,\n email: PropTypes.string.isRequired,\n diskQuota: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]),\n diskUnlimited: PropTypes.bool.isRequired,\n }),\n};\n\nexport default withStyles(styles, { withTheme: true })(withI18n()(ChangeStorageEmailAccountModal));\n","export const passwordScore = (value) => {\n // Reset Count\n let score = 0;\n\n // Isolates each Input Type\n // Remove Symbols\n const cleanSymbols = value.replace(/\\W/g, '');\n\n // Remove Numbers\n const cleanNumbers = cleanSymbols.replace(/\\d+/g, '');\n const numbers = cleanSymbols.replace(/[A-Z-a-z]/g, '');\n const uppers = cleanNumbers.replace(/[a-z]/g, '');\n const lowers = cleanNumbers.replace(/[A-Z]/g, '');\n const symbols = value.replace(/\\w/g, '');\n\n // Check Uppercase and Score\n if (uppers.length > 0) {\n score += 10;\n }\n\n // Check Lowercase and Score\n if (lowers.length > 0) {\n score += 10;\n }\n\n // Check Numbers and Score\n if (numbers.length > 0) {\n score += 10;\n }\n\n // Check Symbols and Score\n if (symbols.length > 0) {\n score += 10;\n }\n\n // Check Minimum Characters and Score\n if (value.length > 7) {\n score += 10;\n }\n\n // BONUS 1: Check if have more than 8 Characters and Score\n if (uppers.length > 0 && lowers.length > 0 && numbers.length > 0 && symbols.length > 0 && value.length > 7) {\n score += 12.5;\n }\n\n // BONUS 2: Check if have more than 1 Numbers and Score\n if (uppers.length > 0 && lowers.length > 0 && numbers.length > 1 && symbols.length > 0 && value.length > 7) {\n score += 12.5;\n }\n\n // BONUS 3: Check if have more than 1 Symbols and Score\n if (uppers.length > 0 && lowers.length > 0 && numbers.length > 0 && symbols.length > 1 && value.length > 7) {\n score += 12.5;\n }\n\n // BONUS 3: Check if have more than 1 Uppercase and Score\n if (uppers.length > 1 && lowers.length > 0 && numbers.length > 0 && symbols.length > 0 && value.length > 9) {\n score += 12.5;\n }\n\n // Certify maximum and minimum score value\n let pwStrength = score;\n if (pwStrength < 0) {\n pwStrength = 0;\n }\n if (pwStrength > 100) {\n pwStrength = 100;\n }\n\n // Set tag value\n let pwLabel;\n if (pwStrength === 0) {\n pwLabel = 'default';\n } else if (pwStrength < 30) {\n pwLabel = 'low';\n } else if (pwStrength < 75) {\n pwLabel = 'medium';\n } else {\n pwLabel = 'strong';\n }\n\n const result = {\n strength: pwStrength,\n label: pwLabel,\n };\n\n return result;\n};\n","import { COUNTRY } from '@/config';\n\nconst PASSWORD_GENERATOR_URL_BY_BRAND = {\n br: 'https://www.hostgator.com.br/gerador-de-senhas',\n mx: 'https://www.hostgator.mx/generador-de-contrasenas',\n co: 'https://www.hostgator.co/generador-de-contrasenas',\n cl: 'https://www.hostgator.cl/generador-de-contrasenas',\n ar: 'https://www.hostgator.ar/generador-de-contrasenas',\n pe: 'https://www.hostgator.pe/generador-de-contrasenas',\n bo: 'https://www.hostgator.bo/generador-de-contrasenas',\n cr: 'https://www.hostgator.cr/generador-de-contrasenas',\n do: 'https://www.hostgator.do/generador-de-contrasenas',\n ec: 'https://www.hostgator.net.ec/generador-de-contrasenas',\n sv: 'https://www.hostgator.sv/generador-de-contrasenas',\n pa: 'https://www.hostgator.pa/generador-de-contrasenas',\n py: 'https://www.hostgator.com.py/generador-de-contrasenas',\n uy: 'https://www.hostgator.uy/generador-de-contrasenas',\n};\n\nexport const PASSWORD_GENERATOR_URL = PASSWORD_GENERATOR_URL_BY_BRAND[COUNTRY];\n","const styles = theme => ({\n modalContainer: {\n [theme.breakpoints.up(491)]: {\n height: 'inherit',\n marginTop: 70,\n },\n },\n save: {\n minWidth: 95,\n marginLeft: 8,\n },\n passwordFieldWrapper: {\n width: 325,\n [theme.breakpoints.down('xs')]: {\n width: '100%',\n },\n },\n dialogContent: {\n paddingBottom: 5,\n },\n generatorWrapper: {\n margin: '15px 0',\n },\n generatorText: {\n margin: '26px 0',\n color: theme.color.regentGray,\n fontSize: '12px',\n },\n generatorLink: {\n display: 'contents',\n color: theme.color.indigo,\n fontSize: '12px',\n },\n wrapperContentModal: {\n color: theme.color.tundora,\n },\n modalPaper: {\n borderRadius: 0,\n padding: '10px 16px',\n width: 475,\n [theme.breakpoints.down(491)]: {\n minWidth: '100%',\n padding: 0,\n paddingTop: 10,\n },\n },\n dialogTitle: {\n paddingBottom: 8,\n },\n closeIconButton: {\n position: 'absolute',\n right: 5,\n top: 5,\n },\n dialogActionsContent: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n marginBottom: 20,\n marginTop: 6,\n minHeight: 38,\n },\n '@keyframes showChecklist': {\n from: {\n opacity: 0,\n },\n to: {\n opacity: 1,\n },\n },\n checklistContainer: {\n transition: 'opacity',\n animationName: 'showChecklist',\n animationDuration: '0.3s',\n },\n checklist: {\n listStyle: 'none',\n paddingLeft: '5px',\n margin: '10px 0 0 0',\n '& li': {\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n fontSize: '12px',\n padding: '3px 0',\n },\n },\n checklistTitle: {\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n color: theme.color.regentGray,\n fontSize: '14px',\n margin: '20px 0 0 0',\n },\n checkIcon: {\n fontSize: '14px',\n marginRight: '6px',\n marginLeft: '-4px',\n },\n lensIcon: {\n fontSize: '6px',\n marginRight: '10px',\n },\n lockIcon: {\n fontSize: '14px',\n marginRight: '7px',\n },\n colorTrue: {\n color: theme.color.tundora,\n },\n colorFalse: {\n color: theme.color.valencia,\n },\n});\n\nexport default styles;\n","import React, { useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport { withI18n, Trans } from 'react-i18next';\nimport {\n Dialog, IconButton, DialogTitle, DialogContent, DialogActions, withStyles,\n} from '@material-ui/core';\nimport {\n Close, Lock, Check, Lens,\n} from '@material-ui/icons';\nimport PasswordField from '@/components/Fields/PasswordField';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport OutlineButton from '@/components/Buttons/OutlineButton';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport { passwordScore } from '@/utils/Validators/passwordScore';\nimport { PASSWORD_GENERATOR_URL } from '@/config/urls/passwordUrls';\nimport { alterEmailPassword } from '@/redux/actions/emails';\nimport { SUCCESS_ALTER_PASSWORD_EMAILS } from '@/redux/actions/actionsTypes';\nimport styles from './styles';\nimport { commonActions } from '@/redux/modules';\nimport useLocale from '@/hooks/useLocale';\n\n\nconst AlterEmailPasswordModal = ({\n classes,\n openModal,\n handleCloseModal,\n hostingId,\n emailAddress,\n t,\n}) => {\n const dispatch = useDispatch();\n const { alerts: alertsLocale } = useLocale();\n const loadingAlterPassword = useSelector(state => state.emails.loadingAlterPassword);\n const isMobile = window.innerWidth <= 490;\n\n const [strength, setStrength] = useState('');\n const [password, setPassword] = useState('');\n const [passwordReady, setPasswordReady] = useState(false);\n const [passwordError, setPasswordError] = useState(false);\n const [passwordErrorMsg, setPasswordErrorMsg] = useState('');\n const [passwordFlagError, setPasswordFlagError] = useState(false);\n const [confirmPassword, setConfirmPassword] = useState('');\n const [confirmPasswordReady, setConfirmPasswordReady] = useState(false);\n const [confirmPasswordError, setConfirmPasswordError] = useState(false);\n const [confirmPasswordErrorMsg, setConfirmPasswordErrorMsg] = useState('');\n const [confirmPasswordFlagError, setConfirmPasswordFlagError] = useState(false);\n const [checklistVisible, setChecklistVisible] = useState(true);\n const [upperAndLower, setUpperAndLower] = useState(false);\n const [number, setNumer] = useState(false);\n const [symbol, setSymbol] = useState(false);\n const [eightCharacters, setEightCharacters] = useState(false);\n const [equalInputValue, setEqualInputValue] = useState(false);\n const [actionsVisible, setActionsVisible] = useState(false);\n const [saveButtonDisable, setSaveButtonDisable] = useState(true);\n\n const handleValidations = (input) => {\n if (input === 'password') {\n if (password === '') {\n setPasswordError(true);\n setPasswordErrorMsg(t('myData.changePassword.errorEmptyField'));\n setPasswordFlagError(true);\n setPasswordReady(false);\n } else if (strength < 50) {\n setPasswordError(true);\n setPasswordErrorMsg('');\n setPasswordReady(false);\n } else {\n setPasswordError(false);\n setPasswordErrorMsg('');\n setPasswordReady(true);\n }\n } else if (input === 'confirmPassword') {\n if (confirmPassword === '') {\n setConfirmPasswordError(true);\n setConfirmPasswordErrorMsg(t('myData.changePassword.errorEmptyField'));\n setConfirmPasswordFlagError(true);\n } else if (confirmPassword !== password) {\n setConfirmPasswordError(true);\n setConfirmPasswordErrorMsg(t('myData.changePassword.errorConfirmNew'));\n setConfirmPasswordFlagError(true);\n } else {\n setConfirmPasswordError(false);\n setConfirmPasswordErrorMsg('');\n setConfirmPasswordReady(true);\n }\n }\n };\n\n const handleActionsVisible = () => {\n if (!!password || !!confirmPassword) {\n setActionsVisible(true);\n } else {\n setActionsVisible(false);\n }\n };\n\n const handleChange = (event, input) => {\n if (input === 'password') {\n const strength = passwordScore(event.target.value.trim());\n setPassword(event.target.value);\n setStrength(strength.strength);\n } else if (input === 'confirmPassword') {\n setConfirmPassword(event.target.value);\n }\n };\n\n const handleChecklist = (input) => {\n // Verify password change requirements are ready and hidden checklist\n if (passwordReady && password === confirmPassword) {\n setChecklistVisible(false);\n } else {\n setChecklistVisible(true);\n }\n\n // Handle regex clean password\n const cleanSymbols = password.replace(/\\W/g, '');\n const numbers = cleanSymbols.replace(/[A-Z-a-z]/g, '');\n const symbols = password.replace(/\\w/g, '');\n\n // Verify new password\n if (input === 'password') {\n // Check if have uppers and lowercase letters\n if (password.match(/[a-z]/) && password.match(/[A-Z]/)) {\n setUpperAndLower(true);\n } else {\n setUpperAndLower(false);\n }\n // Check if have number\n if (numbers.length > 0) {\n setNumer(true);\n } else {\n setNumer(false);\n }\n // Check if have symbol\n if (symbols.length > 0) {\n setSymbol(true);\n } else {\n setSymbol(false);\n }\n // Check if have 8 characters\n if (password.length >= 8) {\n setEightCharacters(true);\n } else {\n setEightCharacters(false);\n }\n }\n // Verify confirm password is equal new password\n if (input === 'confirmPassword') {\n if (password === confirmPassword) {\n setEqualInputValue(true);\n } else {\n setEqualInputValue(false);\n }\n }\n };\n\n const handleKeyUp = (event, input) => {\n if (passwordFlagError) handleValidations(input);\n if (confirmPasswordFlagError) handleValidations(input);\n\n if (password !== '' && confirmPassword !== '') {\n if (password.length > 7) {\n if (strength > 49) {\n if (password === confirmPassword) {\n setSaveButtonDisable(false);\n } else {\n setSaveButtonDisable(true);\n }\n } else {\n setSaveButtonDisable(true);\n }\n } else {\n setSaveButtonDisable(true);\n }\n } else {\n setSaveButtonDisable(true);\n }\n\n handleChecklist(input);\n handleActionsVisible();\n };\n\n const handleBlur = (event, input) => {\n handleValidations(input);\n };\n\n const resetStates = () => {\n setStrength('');\n setPassword('');\n setPasswordReady(false);\n setPasswordError(false);\n setPasswordErrorMsg('');\n setPasswordFlagError(false);\n setConfirmPassword('');\n setConfirmPasswordReady(false);\n setConfirmPasswordError(false);\n setConfirmPasswordErrorMsg('');\n setConfirmPasswordFlagError(false);\n setChecklistVisible(true);\n setUpperAndLower(false);\n setNumer(false);\n setSymbol(false);\n setEightCharacters(false);\n setEqualInputValue(false);\n setActionsVisible(false);\n setSaveButtonDisable(true);\n };\n\n const handleSave = () => {\n if (loadingAlterPassword) return;\n\n if (passwordReady && confirmPasswordReady && equalInputValue) {\n const alterPasswordData = {\n emailAddress,\n data: {\n emailAddress,\n password,\n passwordConfirmation: confirmPassword,\n },\n };\n dispatch(alterEmailPassword(hostingId, alterPasswordData)).then((res) => {\n if (res.type === SUCCESS_ALTER_PASSWORD_EMAILS) {\n handleCloseModal('changePassword');\n dispatch(commonActions.notifications.set({\n label: alertsLocale.emailPassword.createSuccess,\n type: 'success',\n }));\n resetStates();\n } else {\n dispatch(commonActions.notifications.set({\n label: alertsLocale.emailPassword.weakPassword,\n type: 'error',\n }));\n }\n });\n }\n };\n\n return (\n \n handleCloseModal('changePassword')} className={classes.closeIconButton}>\n \n \n {t('emails.alterEmailPassword')}\n \n \n \n
\n
handleKeyUp(event, 'password')}\n onChange={event => handleChange(event, 'password')}\n onBlur={event => handleBlur(event, 'password')}\n error={passwordError}\n helperText={passwordErrorMsg}\n dataId=\"email-password\"\n />\n \n
\n
handleKeyUp(event, 'confirmPassword')}\n onChange={event => handleChange(event, 'confirmPassword')}\n onBlur={event => handleBlur(event, 'confirmPassword')}\n error={confirmPasswordError}\n helperText={confirmPasswordErrorMsg}\n dataId=\"email-confirm-password\"\n />\n \n {checklistVisible && (\n
\n
\n
\n
\n \n {upperAndLower ? \n \n {number ? \n \n {symbol ? \n \n {eightCharacters ? \n \n {equalInputValue ? \n \n
\n )}\n
\n \n \n 0\n 1 \n 2\n \n \n
\n
\n \n {actionsVisible && (\n <>\n handleCloseModal('changePassword')}\n color=\"primary\"\n >\n {t('cancel')}\n \n handleSave()}\n color=\"primary\"\n autoFocus\n onLoading={loadingAlterPassword}\n disabled={saveButtonDisable}\n className={classes.save}\n data-id=\"button-submit-email-change-password\"\n >\n {t('emails.alter')}\n \n \n )}\n \n \n );\n};\n\nAlterEmailPasswordModal.propTypes = {\n openModal: PropTypes.bool.isRequired,\n handleCloseModal: PropTypes.func.isRequired,\n hostingId: PropTypes.number.isRequired,\n emailAddress: PropTypes.string.isRequired,\n};\n\nexport default withStyles(styles, { withTheme: true })(withI18n()(AlterEmailPasswordModal));\n","const styles = theme => ({\n tagControl: {\n '&.active': {\n '&:active': {\n backgroundColor: theme.color.oceanGreen,\n color: theme.color.white,\n },\n '&:focus': {\n backgroundColor: theme.color.oceanGreen,\n color: theme.color.white,\n },\n '&:hover': {\n backgroundColor: theme.color.oceanGreen,\n color: theme.color.white,\n },\n border: `1px solid ${theme.color.oceanGreen}`,\n },\n '&.inactive': {\n '&:hover': {\n backgroundColor: theme.color.geyser,\n },\n },\n backgroundColor: theme.color.white,\n },\n tagDefault: {\n '&:hover': {\n backgroundColor: theme.color.white,\n },\n textTransform: 'normal',\n textDecoration: 'none',\n fontWeight: '400',\n fontSize: '12px',\n flexGrow: 1,\n margin: 5,\n },\n tagActive: {\n color: theme.color.tundora,\n border: `1px solid ${theme.color.oceanGreen}`,\n '&:hover': {\n backgroundColor: `${theme.color.oceanGreen}`,\n },\n },\n tagCloudflare: {\n display: 'flex',\n alignItems: 'center',\n gap: '4px',\n },\n tagInactive: {\n color: theme.color.tundora,\n border: `1px solid ${theme.color.geyser}`,\n },\n disabled: {\n cursor: 'not-allowed',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles, Chip } from '@material-ui/core';\nimport { chipLinkOfProductTagManager } from '@/utils/ThirdParties/tagManager';\nimport styles from './styles';\nimport { Tag } from 'gatorcomponents';\n\nconst ChipLinkButton = ({\n classes,\n status,\n type,\n target,\n onClickable = true,\n cloudflareTagLabel,\n label,\n onClick,\n ...rest\n}) => {\n const getTagClasses = (type, status) => {\n if (type === 'sitelock') {\n return `${classes.tagDefault} ${classes.tagActive}`;\n }\n\n if (type === 'ssl') {\n return `${classes.tagDefault} ${classes.tagActive}`;\n }\n\n if (status === 'active') {\n return `${classes.tagDefault} ${classes.tagActive} ${status}`;\n }\n\n if (status === 'inactive') {\n return `${classes.tagDefault} ${classes.tagInactive} ${status}`;\n }\n\n return '';\n };\n\n const handleClick = () => {\n chipLinkOfProductTagManager(label);\n onClick && onClick();\n };\n\n const mountLabel = type !== 'cloudflare' ? label : (\n \n {label}\n \n );\n\n return (\n \n {email.diskQuota}\n {' '}\n MB\n \n ));\n\n return (\n \n \n \n\n \n
\n \n \n {brokenEmailAddress(email.email, maxCharacters)}\n \n \n ) : (\n \n {brokenEmailAddress(email.email, maxCharacters)}\n \n )}\n
\n
\n
\n {t('emails.storage')} \n
\n
\n \n {email.diskUsed}\n {' '}\n /\n {' '}\n {diskQuota()}\n \n
\n
\n
\n
\n handleOpenModal('changeStorage')}\n to={`${t('routes.domains')}${t('routes.dns')}/${email.id}`}\n label={t('emails.changeStorage')}\n data-id=\"email-change-storage\"\n />\n handleOpenModal('changePassword')}\n to={`${t('routes.domains')}${t('routes.dns')}/${email.id}`}\n label={t('emails.changePassword')}\n data-id=\"email-change-password\"\n />\n handleOpenModal('deleteEmailAccount')}\n label={t('emails.deleteAccount')}\n data-id=\"email-delete\"\n />\n
\n
\n
\n \n \n {t('emails.seeEmail')}\n \n \n
\n \n \n\n \n );\n};\n\nexport default withStyles(styles, { withTheme: true })(withI18n()(EmailItem));\n","const styles = theme => ({\n button: {\n display: 'inline-block',\n marginBottom: 20,\n marginLeft: 32,\n textDecoration: 'none',\n },\n outline: {\n color: theme.color.indigo,\n },\n contentWrapper: {\n [theme.breakpoints.up(960)]: {\n padding: '0 40px',\n },\n },\n bottomInfoWrapper: {\n display: 'flex',\n gap: '16px',\n marginTop: '32px',\n '& div': {\n flex: '1 1',\n },\n [theme.breakpoints.up(960)]: {\n padding: '0px 40px',\n },\n },\n});\n\nexport default styles;\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { withStyles } from '@material-ui/core/styles';\nimport { withI18n } from 'react-i18next';\nimport { Redirect, useParams } from 'react-router';\nimport NoResultMessage from '@/components/Notification/NoResultMessage';\nimport NoResultMessageTrans from '@/components/Notification/NoResultMessageTrans';\nimport Loader from '@/components/Layout/Loader';\nimport FaqEmails from '@/components/FrequentlyQuestions/FaqEmails';\nimport FilterEmails from '@/components/Filters/FilterEmails';\nimport FilterCard from '@/components/Cards/FilterCard';\nimport FilterButton from '@/components/Buttons/FilterButton';\nimport ActionButton from '@/components/Buttons/ActionButton';\nimport ManageEmailCpanel from '@/components/Email/ManageEmailCpanel';\nimport EmailItem from '@/components/Email/EmailItem';\nimport { loadEmails, loadHostingTypes } from '@/redux/actions/emails';\nimport { HOSTING_URL } from '@/config/urls/hostingUrls';\nimport styles from './styles';\nimport PageMessages from '@/pages/common/PageMessages';\n\nconst EmailsPage = ({ t, maxVisible, classes }) => {\n const stateEmails = useSelector(state => state.emails);\n const loadingHostings = stateEmails.hostings.loading;\n const hostings = stateEmails.hostings.list;\n const emailsLoading = stateEmails.loading;\n const totalEmails = stateEmails.total;\n const { domain } = useParams();\n let emails = stateEmails.list;\n\n if (domain) {\n emails = stateEmails.list.filter(email => email.domain === domain);\n }\n\n const isEmptyEmails = emails.length === 0;\n\n const [visible, setVisible] = useState(maxVisible);\n const dispatch = useDispatch();\n\n useEffect(() => {\n dispatch(loadHostingTypes());\n dispatch(loadEmails());\n }, [dispatch]);\n\n const loadMore = (length) => {\n setVisible(visible + (length - visible));\n };\n\n const handleEmailsMessages = (\n <>\n { // Show message if have shared host but havent any email account created\n hostings.hosting > 0 && totalEmails === 0 && (\n {t('noResults.tab.emails')} \n )}\n\n { // Show message if dont have any shared host\n hostings.hosting === 0 && (\n \n {t('emails.createAccount')}\n \n );\n\n if (domain === undefined) {\n return \n 0 ? filterButton : ''} useMediaWidth={1165}>\n \n
\n\n { // Show blue alert if have VPS or Dedicated Server\n hostings.server > 0 && (\n \n\n {isEmptyEmails ? (\n
{t('noResults.filter')} \n ) : (\n <>\n {emails.length > 0 && emails.slice(0, visible).map(email => (\n
\n ))}\n {visible < emails.length && (\n
loadMore(emails.length)}>\n {t('btn.loadMore')}\n \n )}\n \n )}\n
\n
\n \n );\n};\n\nEmailsPage.propTypes = {\n t: PropTypes.func.isRequired,\n classes: PropTypes.object.isRequired,\n maxVisible: PropTypes.number,\n};\n\nEmailsPage.defaultProps = {\n maxVisible: 5,\n};\n\nexport default withStyles(styles)(withI18n()(EmailsPage));\n","const styles = theme => ({\n icon: {\n color: theme.color.tundora,\n display: 'block',\n marginRight: '15px',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles } from '@material-ui/core';\nimport { Forum } from '@material-ui/icons';\n\nimport styles from './styles';\n\n\nconst TicketHeaderIcon = ({ classes }) => (\n {id} \n);\n\nTicketHeaderId.propType = {\n id: PropType.number.isRequired,\n};\n\nexport default withStyles(styles)(TicketHeaderId);\n","const styles = theme => ({\n content: {\n display: 'inline-block',\n height: 'auto',\n lineHeight: '20px',\n textAlign: 'center',\n color: theme.color.white,\n fontWeight: 'normal',\n fontSize: '12px',\n userSelect: 'none',\n padding: '0 7px',\n borderRadius: 3,\n whiteSpace: 'normal',\n },\n new: {\n backgroundColor: theme.color.brightSun,\n },\n open: {\n backgroundColor: theme.color.brightSun,\n },\n pending: {\n backgroundColor: theme.color.pendingPure,\n },\n solved: {\n backgroundColor: theme.color.oceanGreen,\n },\n hold: {\n backgroundColor: theme.color.brightSun,\n },\n closed: {\n backgroundColor: theme.color.geyser,\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nfunction TicketStatusLabel({\n classes,\n ticketStatus,\n children,\n className,\n}) {\n return (\n \n {children}\n \n );\n}\n\nexport default withStyles(styles, { withTheme: true })(TicketStatusLabel);\n","const styles = theme => ({\n title: {\n fontWeight: 500,\n fontSize: '16px',\n color: theme.color.tundora,\n marginTop: '9px',\n marginBottom: '17px',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport PropType from 'prop-types';\nimport { withStyles } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nconst TicketHeaderTitle = ({ title, classes }) => (\n {title}
\n);\n\nTicketHeaderTitle.propType = {\n title: PropType.string.isRequired,\n};\n\nexport default withStyles(styles)(TicketHeaderTitle);\n","const styles = theme => ({\n divider: {\n display: 'block',\n width: '100%',\n height: '1px',\n borderBottom: `1px dashed ${theme.color.mystic}`,\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nconst TicketDivider = ({ classes, className }) => (\n \n
\n \n {t(`tickets.${status}`)}\n \n
\n
\n
\n
\n \n\n \n
\n\n \n
\n
\n \n);\n\nconst mapStateToProps = state => ({\n userEmail: state.summary.email,\n ticketId: state.ticketDetail.id,\n loadingUpload: state.ticketDetail.loadingUpload,\n});\n\nconst mapDispatchToProps = dispatch => ({\n onUploadImagesTicketDetail: (data, userEmail) => dispatch(uploadImagesTicketDetail(data, userEmail)),\n});\n\nexport default withI18n()(withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)((TicketAttachmentsModal))));\n","const styles = theme => ({\n link: {\n display: 'inline-block',\n position: 'relative',\n color: theme.color.emperor,\n marginLeft: '-10px',\n },\n icon: {\n fontSize: '64px',\n color: 'inherit',\n },\n wrapper: {\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n color: theme.color.white,\n width: '64px',\n height: '64px',\n marginTop: '8px',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport SvgIcon from '@material-ui/core/SvgIcon';\nimport { withStyles } from '@material-ui/core';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport styles from './styles';\n\n\nconst FileIcon = (props) => {\n const {\n download,\n classes,\n extension,\n ...rest\n } = props;\n return (\n \n \n {`.${extension}`}\n
\n \n \n \n\n );\n};\n\nexport default withStyles(styles)(FileIcon);\n","const styles = theme => ({\n cardMessageWrapper: {\n marginBottom: '20px',\n '&:last-child': {\n marginBottom: 0,\n },\n '& > .wrapper-me': {\n display: 'flex',\n justifyContent: 'flex-end',\n },\n '& > .wrapper-analyst': {\n display: 'flex',\n justifyContent: 'flex-start',\n },\n '& > div .cardMessage-me': {\n backgroundColor: theme.color.brightSunLight,\n borderTopLeftRadius: '5px',\n borderTopRightRadius: '0px',\n borderBottomLeftRadius: '5px',\n borderBottomRightRadius: '5px',\n },\n '& > div .cardMessage-analyst': {\n backgroundColor: theme.color.indigoLight,\n borderTopLeftRadius: '0px',\n borderTopRightRadius: '5px',\n borderBottomLeftRadius: '5px',\n borderBottomRightRadius: '5px',\n },\n },\n cardMessage: {\n [theme.breakpoints.down('sm')]: {\n width: '95%',\n },\n width: '70%',\n padding: '15px 20px',\n wordBreak: 'break-all',\n },\n cardMessageTitle: {\n display: 'flex',\n justifyContent: 'space-between',\n color: theme.color.tundora,\n fontWeight: 600,\n '& > span': {\n fontWeight: 400,\n },\n },\n cardMessageText: {\n color: theme.color.tundora,\n },\n imgWrapper: {\n backgroundColor: 'rgba(0,0,0,0.1)',\n borderRadius: '2px',\n display: 'inline-flex',\n flexWrap: 'wrap',\n gap: '4px',\n marginTop: '5px',\n padding: '4px',\n alignItems: 'center',\n\n '&>*': {\n cursor: 'pointer',\n transition: 'opacity 300ms ease-in-out',\n\n '&:hover': {\n opacity: 0.9,\n },\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles, Typography } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport DOMPurify from 'dompurify';\nimport { handleTicketTime } from '@/utils/Formatters/handleTicketTime';\nimport TicketAttachmentsModal from '@/components/Tickets/TicketAttachmentsModal';\nimport FileIcon from '@/media/icons/FileIcon';\nimport styles from './styles';\n\n\nclass TicketMessage extends React.Component {\n state = {\n imgModalOpen: false,\n imageIndex: 0,\n }\n\n openImageModal = (index) => {\n this.setState({\n imgModalOpen: true,\n imageIndex: index,\n });\n }\n\n closeImageModal = () => {\n this.setState({\n imgModalOpen: false,\n });\n }\n\n handleFileExtension = (file) => {\n if (file) {\n const acceptedExtensionsList = ['pdf', 'txt', 'doc', 'docx', 'crt', 'key', 'zip', 'csv'];\n const extension = file.split('.').pop();\n if (acceptedExtensionsList.includes(extension)) {\n return true;\n }\n }\n return false;\n }\n\n getFileExtension = (file) => {\n const canHandleExtension = this.handleFileExtension(file);\n if (canHandleExtension) {\n const fileExtension = file.split('.').pop();\n return fileExtension;\n }\n return null;\n }\n\n render() {\n const { imgModalOpen, imageIndex } = this.state;\n const {\n person, date, message, classes, t, url, thumbnails, filename,\n } = this.props;\n\n const sanitizedMessage = DOMPurify.sanitize(message);\n\n const who = (person === 'me') ? t('help.me') : t('help.analyst');\n\n return (\n \n
\n
\n
\n {who}\n {handleTicketTime(date, t)} \n \n\n
\n\n {(thumbnails && !!thumbnails.length) && (\n
\n {thumbnails.map((thumb, index) => (\n thumb !== 0 ? (\n this.openImageModal(index)}\n />\n )\n : (\n this.handleFileExtension(filename[index]) && \n )}\n
\n
\n \n {comments.map((comment) => {\n const thumbnails = comment.attachments\n && comment.attachments.map(image => (\n image.thumbnails.length && image.thumbnails[0].content_url\n ));\n\n const attachments = comment.attachments.length\n && comment.attachments.map(attachment => (\n attachment.content_url\n ));\n\n const fileName = comment.attachments.length\n && comment.attachments.map(attachment => (\n attachment.file_name\n ));\n\n return (\n
\n );\n })}\n {status === 'solved' && (\n
\n
\n )}\n
\n );\n }\n}\n\nconst mapStateToProps = state => ({\n comments: state.ticketDetail.comments,\n});\n\nexport default withI18n()(withStyles(styles)(connect(mapStateToProps)(TicketContent)));\n","const styles = theme => ({\n footer: {\n backgroundColor: theme.color.white,\n position: 'relative',\n padding: '0 20px 24px 30px',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nconst TicketFooter = ({ classes, children, className }) => (\n \n {children}\n
\n);\n\nTicketFooter.propTypes = {\n children: PropTypes.node.isRequired,\n className: PropTypes.string,\n};\n\nexport default withStyles(styles)(TicketFooter);\n","const styles = theme => ({\n loader: {\n position: 'relative',\n width: '100%',\n textAlign: 'center',\n color: theme.color.white,\n },\n fullscreen: {\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n backgroundColor: 'rgba(0,0,0,0.5)',\n width: '100%',\n zIndex: 999999999,\n color: theme.color.white,\n },\n progress: {\n display: 'inline-block',\n marginTop: '2px',\n color: theme.color.white,\n },\n progressFull: {\n position: 'absolute',\n left: 'calc(50% - 40px)',\n top: 'calc(50% - 40px)',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport CircularProgress from '@material-ui/core/CircularProgress';\n\nimport styles from './styles';\n\n\nconst TicketButtonLoader = ({\n classes,\n fullscreen,\n size,\n classesToProps,\n ...res\n}) => (\n \n
\n);\n\nTicketButtonLoader.propTypes = {\n classes: PropTypes.object.isRequired,\n classesToProps: PropTypes.string,\n fullscreen: PropTypes.bool,\n};\n\nexport default withStyles(styles)(TicketButtonLoader);\n","const styles = theme => ({\n btns: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n marginTop: '15px',\n },\n btn: {\n '& > span > img': {\n marginRight: '5px',\n },\n '&:focus': {\n border: `1px solid ${theme.color.chambray}`,\n },\n '& > .active': {\n border: `1px solid ${theme.color.chambray}`,\n },\n margin: '0 5px',\n fontWeight: 400,\n fontSize: '14px',\n textTransform: 'none',\n color: theme.color.emperor,\n },\n btnActive: {\n border: `0 0 0 0.2rem ${theme.color.chambray}`,\n },\n dialogActions: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n paddingTop: '10px',\n paddingBottom: '30px',\n },\n dialog: {\n width: '500px',\n display: 'flex',\n flex: 'inherit',\n flexDirection: 'column',\n [theme.breakpoints.down('sm')]: {\n width: 'auto',\n },\n },\n title: {\n fontSize: '28px',\n fontWeight: 400,\n color: theme.color.tundora,\n margin: '-5px 0 20px 0',\n },\n wrapper: {\n borderRadius: '0',\n [theme.breakpoints.down('sm')]: {\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n width: '100%',\n height: '100%',\n maxHeight: '100%',\n margin: 0,\n borderRadius: 0,\n },\n },\n fillBtn: {\n margin: '0 5px',\n },\n close: {\n display: 'flex',\n justifyContent: 'flex-end',\n alignItems: 'center',\n color: theme.color.tundora,\n cursor: 'pointer',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport Slide from '@material-ui/core/Slide';\nimport { withStyles } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport { Close } from '@material-ui/icons';\nimport { connect } from 'react-redux';\nimport { Redirect } from 'react-router-dom';\nimport TicketButtonLoader from '@/components/Tickets/TicketButtonLoader';\nimport OutlineButton from '@/components/Buttons/OutlineButton';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport { saveFeedbackTicketDetail, changeTicketStatus } from '@/redux/actions/ticketDetail';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport SAVE_TICKET_FEEDBACK_ERROR from '@/redux/reducers/ticketDetail';\nimport { notifierError, notifierSuccess } from '@/utils/Application/notifier';\nimport BadImg from '@/media/icons/bad.png';\nimport GoodImg from '@/media/icons/good.png';\nimport styles from './styles';\n\n\nfunction Transition(props) {\n return \n \n \n
\n\n {t('tickets.attendance')}
\n\n \n
\n \n
\n \n
\n\n \n\n
\n {loadingStatusChange ? \n
\n {children}\n \n );\n }\n}\nexport default TicketDragAndDropUpload;\n","export const FILE_EXTENSIONS_PERMITTED = [\n 'jpg',\n 'jpeg',\n 'png',\n 'gif',\n 'pdf',\n 'doc',\n 'docx',\n 'crt',\n 'key',\n];\n","const styles = theme => ({\n dragText: {\n color: theme.color.regentGray,\n fontSize: '14px',\n },\n dragArea: {\n position: 'relative',\n border: `1px dashed ${theme.color.mystic}`,\n padding: '15px 0 40px 0',\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n transition: '0.2s border-color',\n willChange: 'border-color',\n '&.over': {\n borderColor: theme.color.indigo,\n },\n },\n dialogActions: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n paddingTop: '10px',\n paddingBottom: '30px',\n },\n dialog: {\n width: '500px',\n display: 'flex',\n flex: 'inherit',\n flexDirection: 'column',\n [theme.breakpoints.down('sm')]: {\n width: 'auto',\n },\n },\n title: {\n fontSize: '20px',\n fontWeight: 400,\n color: theme.color.tundora,\n margin: '-5px 0 20px 0',\n },\n wrapper: {\n [theme.breakpoints.down('sm')]: {\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n width: '100%',\n height: '100%',\n maxHeight: '100%',\n margin: 0,\n borderRadius: 0,\n },\n },\n fillBtn: {\n margin: '0 5px',\n },\n fillBtnSend: {\n width: '85.45px',\n },\n close: {\n display: 'flex',\n justifyContent: 'flex-end',\n alignItems: 'center',\n color: theme.color.tundora,\n cursor: 'pointer',\n },\n btnUpload: {\n backgroundColor: 'transparent',\n border: 'none',\n color: theme.color.indigo,\n fontSize: '14px',\n boxShadow: 'none',\n textTransform: 'none',\n padding: '0 10px',\n '&:hover': {\n backgroundColor: 'transparent',\n boxShadow: 'none',\n textDecoration: 'underline',\n },\n },\n input: {\n display: 'none',\n },\n img: {\n width: '100%',\n objectFit: 'cover',\n maxHeight: '60vh',\n },\n imgPreview: {\n width: '100%',\n padding: '20px 20px 0 20px',\n marginTop: '20px',\n },\n imgBox: {\n position: 'relative',\n },\n uploadingGradient: {\n display: 'flex',\n justfyContent: 'center',\n alignItems: 'center',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n backgroundColor: 'rgba(0,0,0,0.3)',\n },\n textUpload: {\n position: 'absolute',\n top: 0,\n right: 0,\n left: 0,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n paddingTop: '15px',\n },\n fileWrapper: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n marginTop: '60px',\n '& > p': {\n color: theme.color.regentGray,\n fontSize: '12px',\n textAlign: 'center',\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport Slide from '@material-ui/core/Slide';\nimport { withStyles, Button } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport { Close } from '@material-ui/icons';\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport TicketDragAndDropUpload from '@/components/Tickets/TicketDragAndDropUpload';\nimport TicketButtonLoader from '@/components/Tickets/TicketButtonLoader';\nimport OutlineButton from '@/components/Buttons/OutlineButton';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport {\n uploadImagesTicketDetail, changeTicketStatus, updateTicketDetailStatus, onUploadImagesTicketDetailV2,\n} from '@/redux/actions/ticketDetail';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport { FILE_EXTENSIONS_PERMITTED } from '@/utils/Validators/fileExtensions';\nimport { notifierError } from '@/utils/Application/notifier';\nimport FileIcon from '@/media/icons/FileIcon';\nimport { UPLOAD_TICKET_IMAGES_ERROR } from '@/redux/actions/actionsTypes';\nimport styles from './styles';\n\n\nfunction Transition(props) {\n return false : this.handleCancelUpload}\n TransitionComponent={Transition}\n keepMounted\n classes={{ paper: classes.wrapper }}\n >\n \n \n false : this.handleCancelUpload} />\n
\n {t('tickets.sendImages')}
\n \n \n
\n\n {imagePreviewUrl && (\n
\n
\n
\n {loadingUpload && (\n
\n
\n )}\n
\n
\n )}\n\n {filePreviewUrl && (\n
\n
\n
{filePreviewName}
\n
\n )}\n\n
\n\n \n\n \n
false : this.handleCancelUpload}\n className={classes.fillBtn}\n disabled={loadingUpload}\n >\n {t('cancel')}\n \n false)}\n disabled={filePreviewUrl ? false : loadingUpload || imagePreviewUrl === ''}\n >\n {loadingUpload && filePreviewUrl !== '' ? \n {children}\n \n );\n}\n\nexport default withStyles(styles, { withTheme: true })(TicketCard);\n","const styles = theme => ({\n container: {\n minHeight: 'calc(100vh - 135px)',\n },\n ticket: {\n '&:last-child': {\n paddingRight: '10px',\n paddingBottom: 0,\n },\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n height: '100%',\n padding: 0,\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n },\n uploadBox: {\n display: 'flex',\n justifyContnet: 'center',\n alignItems: 'center',\n position: 'absolute',\n left: '36px',\n bottom: '0',\n top: '0',\n },\n buttonBox: {\n display: 'flex',\n justifyContnet: 'center',\n alignItems: 'center',\n position: 'absolute',\n right: '30px',\n top: '0',\n bottom: '0',\n },\n send: {\n width: '85.45px',\n marginTop: '-3px',\n },\n divider: {\n marginBottom: '20px',\n },\n ticketSolved: {\n backgroundColor: theme.color.white,\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n width: '100%',\n zIndex: 10,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n buttonSolved: {\n margin: '0 5px',\n },\n buttonCustomHeight: {\n height: 'inherit',\n },\n upload: {\n marginTop: '-4px',\n },\n icon: {\n color: theme.color.tundora,\n display: 'block',\n },\n});\n\nexport default styles;\n","import React, { Fragment, Component } from 'react';\nimport { withStyles, CardContent, IconButton } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport { connect } from 'react-redux';\nimport { Redirect } from 'react-router-dom';\nimport { Photo } from '@material-ui/icons';\nimport TicketHeader from '@/components/Tickets/TicketHeader';\nimport TicketContent from '@/components/Tickets/TicketContent';\nimport TicketFooter from '@/components/Tickets/TicketFooter';\nimport TicketFeedbackModal from '@/components/Tickets/TicketFeedbackModal';\nimport TicketDivider from '@/components/Tickets/TicketDivider';\nimport TicketTextInput from '@/components/Tickets/TicketTextInput';\nimport TicketUploadModal from '@/components/Tickets/TicketUploadModal';\nimport TicketButtonLoader from '@/components/Tickets/TicketButtonLoader';\nimport Loader from '@/components/Layout/Loader';\nimport TicketCard from '@/components/Cards/TicketCard';\nimport OutlineButton from '@/components/Buttons/OutlineButton';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport {\n loadTicketDetail, loadTicketDetailV2, saveCommentTicketDetail, saveCommentTicketDetailV2, updateTicketDetailStatus,\n} from '@/redux/actions/ticketDetail';\nimport { API_REQUEST_ERROR } from '@/redux/actions/actionsTypes';\nimport styles from './styles';\nimport { preChatActions } from '@/redux/modules';\n\n\nclass TicketChat extends Component {\n state = {\n commentLoader: false,\n canSubmit: true,\n ticketMessage: '',\n redirect: false,\n modalFeedback: false,\n modalUpload: false,\n showInputMessage: false,\n canUpload: true,\n }\n\n componentDidMount() {\n const {\n onLoadTicketDetail,\n onLoadTicketDetailV2,\n ticketId,\n userEmail,\n v2,\n } = this.props;\n\n if (v2) {\n onLoadTicketDetailV2(ticketId, userEmail).then((res) => {\n if (res.type === API_REQUEST_ERROR) {\n this.setState({\n redirect: true,\n });\n }\n });\n }\n\n if (!v2) {\n onLoadTicketDetail(ticketId, userEmail).then((res) => {\n if (res.type === API_REQUEST_ERROR) {\n this.setState({\n redirect: true,\n });\n }\n });\n }\n }\n\n componentWillUnmount() {\n const {\n tosTicketRedirect,\n preChatTosCancelRedirect,\n preChatSetScreenScreen,\n preChatSetOpen,\n } = this.props;\n\n if (tosTicketRedirect) {\n preChatSetScreenScreen();\n preChatTosCancelRedirect();\n preChatSetOpen();\n }\n }\n\n handleChangeInput = (event) => {\n this.setState({ ticketMessage: event.target.value });\n }\n\n onKeyDown = (e) => {\n const { ticketId } = this.props;\n if (e.keyCode === 13 && !e.shiftKey) {\n this.handleSubmit(ticketId);\n }\n }\n\n handleOpenModalFeedback = () => {\n this.setState({\n modalFeedback: true,\n });\n }\n\n handleCloseModalFeedback = () => {\n this.setState({\n modalFeedback: false,\n });\n }\n\n handleReply = () => {\n this.setState({\n showInputMessage: true,\n });\n }\n\n handleOpenModalUpload = () => {\n this.setState({\n modalUpload: true,\n });\n }\n\n handleCloseModalUpload = () => {\n const { canUpload } = this.state;\n canUpload && this.setState({\n modalUpload: false,\n });\n }\n\n resetMessage = () => {\n this.setState({\n ticketMessage: '',\n });\n }\n\n handleSubmit(id) {\n this.setState({\n commentLoader: true,\n canUpload: false,\n });\n\n\n const { canSubmit, ticketMessage } = this.state;\n const {\n v2,\n onSaveCommentTicketDetail,\n onSaveCommentTicketDetailV2,\n userEmail,\n ticket,\n onUpdateTicketDetailStatus,\n } = this.props;\n if (canSubmit) {\n this.setState({ canSubmit: false });\n if (v2) {\n onSaveCommentTicketDetailV2({\n comment: {\n id,\n body: ticketMessage,\n },\n }, userEmail)\n .then(() => {\n if (ticket.status === 'solved') {\n onUpdateTicketDetailStatus();\n }\n this.setState({\n commentLoader: false,\n canSubmit: true,\n ticketMessage: '',\n canUpload: true,\n });\n });\n }\n\n if (!v2) {\n onSaveCommentTicketDetail({\n comment: {\n id,\n body: ticketMessage,\n },\n }, userEmail)\n .then(() => {\n if (ticket.status === 'solved') {\n onUpdateTicketDetailStatus();\n }\n this.setState({\n commentLoader: false,\n canSubmit: true,\n ticketMessage: '',\n canUpload: true,\n });\n });\n }\n }\n }\n\n render() {\n const {\n showInputMessage,\n redirect,\n modalFeedback,\n ticketMessage,\n commentLoader,\n modalUpload,\n } = this.state;\n const {\n t,\n classes,\n loading,\n ticket,\n v2,\n } = this.props;\n const showButton = !showInputMessage && ticket.status && !ticket.loading && ticket.status === 'solved';\n\n if (redirect) {\n return \n \n \n {showButton && (\n \n \n
\n {t('tickets.reply')}\n \n \n {t('tickets.close')}\n \n \n )}\n\n \n
this.handleSubmit(ticket.id)}\n className={classes.send}\n disabled={EmptyRegex.test(ticketMessage) || ticketMessage.length === 0}\n >\n {commentLoader ? \n )}\n \n \n );\n }\n}\n\nconst mapStateToProps = state => ({\n userEmail: state.summary.email,\n ticket: state.ticketDetail,\n comments: state.ticketDetail.comments,\n loading: state.ticketDetail.loading,\n tosTicketRedirect: state.preChat.tos.redirect,\n});\n\nconst mapDispatchToProps = dispatch => ({\n onLoadTicketDetail: (data, userEmail) => dispatch(loadTicketDetail(data, userEmail)),\n onLoadTicketDetailV2: (data, userEmail) => dispatch(loadTicketDetailV2(data, userEmail)),\n onSaveCommentTicketDetail: (data, userEmail) => dispatch(saveCommentTicketDetail(data, userEmail)),\n onSaveCommentTicketDetailV2: (data, userEmail) => dispatch(saveCommentTicketDetailV2(data, userEmail)),\n onUpdateTicketDetailStatus: () => dispatch(updateTicketDetailStatus()),\n preChatTosCancelRedirect: () => dispatch(preChatActions.tos.redirect(false)),\n preChatSetScreenScreen: () => dispatch(preChatActions.preChat.setScreen('problemSolved')),\n preChatSetOpen: () => dispatch(preChatActions.preChat.setShowPreChat(true)),\n});\n\nexport default withI18n()(withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(TicketChat)));\n","import styled, { css } from 'styled-components';\n\nconst styles = theme => ({\n root: {\n [theme.breakpoints.down('xs')]: {\n paddingLeft: '0',\n paddingRight: '0',\n },\n flexGrow: 1,\n padding: 40,\n },\n});\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n flex-grow: 1;\n padding: 0px 40px 40px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n padding-left: 0;\n padding-right: 0;\n }\n `}\n`;\n\nexport default styles;\n","import React from 'react';\n\nimport * as Style from './styles';\n\nconst ContentContainer = ({\n children, className, dataId,\n}) => (\n \n {children}\n \n);\n\nexport default ContentContainer;\n","const styles = theme => ({\n root: {\n [theme.breakpoints.up(960)]: {\n paddingTop: 0,\n },\n },\n});\n\nexport default styles;\n","import styled, { css } from 'styled-components';\n\nconst clientareaHeader = '80px';\nconst chatSize = '101px';\nconst chatSizeMobile = '40px';\nconst inputWrapperHeight = '85px';\nconst contentHeader = '83px';\nconst skelletonSiize = '150px';\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n display: flex;\n flex-direction: column;\n height: calc(100vh - ${clientareaHeader} - ${chatSizeMobile});\n margin: 0;\n padding: 16px;\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n margin: 0 16px;\n padding: 16px;\n height: calc(100vh - ${clientareaHeader} - ${chatSize});\n }\n `}\n`;\n\nexport const EmptyContainer = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.white.primary};\n display: flex;\n flex-direction: column;\n height: calc(100vh - ${clientareaHeader} - ${chatSizeMobile});\n justify-content: center;\n margin: 0;\n padding: 16px;\n\n > button { \n max-width: 337px;\n width: 100%;\n }\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n margin: 0 16px;\n padding: 16px;\n height: calc(100vh - ${clientareaHeader} - ${chatSize});\n }\n `}\n`;\n\nexport const TicketId = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n gap: 16px;\n margin: 0px;\n `}\n`;\n\nexport const TicketSubject = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px 0px 16px 0px;\n padding: 0px 0px 8px 0px;\n border-bottom: 1px solid ${theme.v2.colors.feedback.canceledPure};\n `}\n`;\n\n\nexport const MessagesWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n min-height: calc(100% - ${inputWrapperHeight} - ${contentHeader} - ${skelletonSiize});\n overflow-y: scroll;\n\n &::-webkit-scrollbar {\n height: 4px;\n width: 4px;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 25px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: ${theme.v2.colors.neutral.highMedium}; \n border-radius: 25px;\n }\n\n @media (max-width: ${theme.breakpoints.sm}) {\n overflow: auto;\n }\n `}\n`;\n\nexport const MessagesWrapperSkeleton = styled(MessagesWrapper)`\n display: flex;\n gap: 25px;\n`;\n\nexport const MessageBlock = styled.div`\n ${() => css` \n display: flex;\n display: flex;\n flex-direction: column;\n gap: 16px;\n margin-bottom: 24px;\n `}\n`;\n\nexport const Person = styled.p`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const PersonIconWrapper = styled.span`\n ${({ theme }) => css`\n width: 24px;\n align-items: center;\n background-color: ${theme.v2.colors.neutral.highLight};\n border-radius: 100%;\n display: flex;\n height: 24px;\n justify-content: center;\n margin: 0px 16px 0px 0px;\n padding: 4px;\n `}\n`;\n\nexport const Time = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 0px 16px;\n\n &:first-letter {\n text-transform: uppercase;\n }\n `}\n`;\n\nexport const Message = styled.div`\n ${({ theme, variant }) => {\n const variants = {\n analyst: {\n bgColor: theme.v2.colors.neutral.highLight,\n },\n me: {\n bgColor: theme.v2.colors.brand.primaryUltralight,\n },\n };\n\n return css`\n align-self: flex-start;\n background-color: ${variants[variant].bgColor};\n border-radius: 8px;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n padding: 8px 16px;\n\n p {\n margin: 0px;\n }\n `;\n }}\n`;\n\nexport const Image = styled.img`\n ${({ theme }) => css`\n align-self: flex-start;\n border-radius: 8px;\n border: 1px solid ${theme.v2.colors.feedback.canceledPure};\n cursor: pointer;\n flex: 0 0 150px;\n width: 150%;\n `}\n`;\n\nexport const AttachmentsWrapper = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n `}\n`;\n\nexport const ImageWrapper = styled.div`\n ${() => css`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 16px 8px;\n `}\n`;\n\nexport const DocWrapper = styled.div`\n ${() => css`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 16px 8px;\n `}\n`;\n\nexport const ImageModal = styled.img`\n`;\n\nexport const DocumentButton = styled.button`\n ${({ theme }) => css`\n align-items: center;\n background-color: transparent;\n border-radius: 8px;\n border: 1px solid ${theme.v2.colors.neutral.highMedium};\n box-shadow: unset;\n color: ${theme.v2.colors.neutral.lowPure};\n cursor: pointer;\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n gap: 8px;\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n padding: 12px 10px;\n `}\n`;\n\nexport const AttatchedFile = styled.span`\n ${({ theme }) => css`\n display: flex;\n align-items: center;\n align-self: flex-start;\n background-color: transparent;\n border-radius: 8px;\n border: 1px solid ${theme.v2.colors.neutral.highMedium};\n box-shadow: unset;\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n gap: 8px;\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n padding: 12px 10px;\n `}\n`;\n\nexport const InputWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n border-radius: 8px;\n border: 1px solid ${theme.v2.colors.neutral.highMedium};\n display: flex;\n flex-direction: row;\n gap: 16px;\n padding: 24px 12px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n flex-wrap: wrap;\n > button:last-child {\n width: 100%;\n }\n }\n `}\n`;\n\nexport const InputDelimiter = styled.div`\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-width: 100%;\n width: 100%;\n\n & div:first-child {\n border: 0px;\n }\n`;\n\nexport const EmptyLabel = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px 0px 38px\n `}\n`;\n\nexport const File = styled.div`\n ${({ theme }) => css`\n align-items: center;\n box-shadow: ${theme.v2.shadows.dark};\n display: flex;\n fit-content;\n flex-direction: row;\n gap: 24px;\n margin: 24px 0px 0px;\n padding: 16px;\n width: fit-content;\n `}\n`;\n\nexport const ModalWithFileContent = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n margin: 16px 32px 0px;\n `}\n`;\n\nexport const ButtonRow = styled.div`\n ${() => css`\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: 16px;\n justify-content: center;\n margin: 0px 0px 32px;\n `}\n`;\n\nexport const SolvedStatusWrapper = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: 16px;\n justify-content: center;\n`;\n\nexport const ActionsRow = styled.div`\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: 16px;\n justify-content: center;\n`;\n","\nexport const statusTagVariants = {\n opened: 'attention',\n closed: 'cancel',\n open: 'attention',\n new: 'attention',\n solved: 'active',\n pending: 'pending',\n};\n","import styled, { css } from 'styled-components';\n\nexport const UploadModalTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 32px 32px 0px;\n `}\n`;\n\nexport const AllowDrag = styled.label`\n ${({ theme }) => css`\n align-items: center;\n border-radius: 8px;\n border: 1px dashed ${theme.v2.colors.neutral.highMedium};\n color: ${theme.v2.colors.neutral.lowDark};\n cursor: pointer;\n display: flex;\n display: flex;\n flex-direction: column;\n height: 100%;\n justify-content: flex-start;\n margin: 16px 32px 48px;\n padding: 36px 18px 76px 28px;\n z-index: ${theme.v2.layers.important};\n\n button: {\n z-index: -1;\n }\n `}\n`;\n\n\nexport const DraggableTitle = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px 0px;\n max-width: 304px;\n text-align: center;\n `}\n`;\n\n\nexport const UploadInput = styled.input`\n display: none;\n`;\n","import { Modal } from '@/pages/common';\nimport React from 'react';\nimport * as Styles from './UploadFileModal.styles';\nimport { Button } from 'gatorcomponents';\n\nconst UploadFileModal = ({\n uploadModalIsVisible,\n setUploadModal,\n handleEnter,\n handleDrag,\n handleLeave,\n handleDrop,\n type,\n loadingSubmit,\n setFile,\n accept,\n title,\n draggableTitle,\n findFileLabel,\n}) => uploadModalIsVisible && (\n setUploadModal(false)}\n variant=\"regular\"\n disablePadding\n >\n \n {title}\n \n\n \n \n {draggableTitle}\n \n\n null}\n disabled={loadingSubmit}\n label={findFileLabel}\n as=\"label\"\n htmlFor=\"uploadInput\"\n />\n\n \n\n {\n setFile(e.target.files[0]);\n setUploadModal(false);\n }}\n accept={accept}\n />\n \n);\n\nexport default UploadFileModal;\n","import styled from 'styled-components';\n\nexport const ImageModal = styled.img`\n align-self: center;\n justify-self: center;\n max-width: 100%;\n padding: 16px 0px 0px 0px;\n`;\n","import { Modal } from '@/pages/common';\nimport React from 'react';\nimport * as Styles from './ViewImageModal.styles';\n\nconst ViewImageModal = ({\n imageModalIsVisible,\n setImageModalVisibale,\n image,\n}) => imageModalIsVisible && (\n setImageModalVisibale(false)}\n variant=\"regular\"\n>\n \n { attachments.map((attachment) => {\n const fileExtension = attachment.file_name.split('.').pop();\n const isDoc = acceptedDocumentsExtensionsList.includes(fileExtension);\n\n if (!isDoc) {\n return;\n }\n\n return (\n window.open(attachment.content_url)}\n data-testid={attachment.file_name}\n key={`${attachment.id}-${attachment.file_name}`}\n >\n \n );\n }\n }, [acceptedDocumentsExtensionsList]);\n\n const scrollWrapperToBottom = useCallback(() => {\n if (messagesWrapperRef.current) {\n const height = messagesWrapperRef.current.scrollHeight;\n messagesWrapperRef.current.scroll && messagesWrapperRef.current.scroll({\n top: height,\n behavior: 'smooth',\n });\n }\n }, [messagesWrapperRef]);\n\n const listImages = useCallback(({ comment }) => {\n const { attachments } = comment;\n const hasImage = attachments.find(attachment => !acceptedDocumentsExtensionsList.includes(attachment.file_name.split('.').pop()));\n\n if (hasImage) {\n return (\n \n { attachments.length > 0 && attachments.map((attachment) => {\n const isDoc = acceptedDocumentsExtensionsList.includes(attachment.file_name);\n\n if (isDoc) {\n return;\n }\n\n const { thumbnails } = attachment;\n\n return thumbnails.map(\n thumb => (\n openImageModal({ image: attachment.content_url })}\n />\n ),\n );\n })}\n \n );\n }\n }, [acceptedDocumentsExtensionsList, openImageModal]);\n\n const handleFetch = useCallback(({ response }) => {\n if (response.type === ERROR_TICKET_DETAIL) {\n setShouldRenderEmptyState(true);\n }\n\n if (response.type !== ERROR_TICKET_DETAIL) {\n setTicketData(response.ticketDetail);\n setLoadingSubmit(false);\n setFile(false);\n setUploadModal(false);\n scrollWrapperToBottom();\n setMessage('');\n }\n }, [scrollWrapperToBottom]);\n\n const loadDetails = useCallback(() => {\n if (v2) {\n onLoadTicketDetailV2(ticketId, userEmail).then((response) => {\n handleFetch({ response });\n });\n }\n\n if (!v2) {\n onLoadTicketDetail(ticketId, userEmail).then((response) => {\n handleFetch({ response });\n });\n }\n }, [\n onLoadTicketDetail,\n onLoadTicketDetailV2,\n ticketId,\n userEmail,\n v2,\n handleFetch,\n ]);\n\n const handleClearFile = useCallback(() => {\n setFile(null);\n }, []);\n\n const handleSubmit = useCallback(() => {\n setLoadingSubmit(true);\n\n const comment = {\n id: ticketId,\n body: message,\n };\n\n if (file) {\n comment.file = [file];\n if (!message) {\n comment.body = `Arquivo anexado: ${file.name}`;\n }\n }\n\n if (v2) {\n onSaveCommentTicketDetailV2({ comment }, userEmail).then(() => {\n loadDetails();\n });\n }\n\n if (!v2) {\n onSaveCommentTicketDetail({ comment }, userEmail).then(() => {\n loadDetails();\n });\n }\n }, [onSaveCommentTicketDetail, onSaveCommentTicketDetailV2, ticketId, userEmail, v2, message, loadDetails, file]);\n\n const handleAddFile = useCallback(() => {\n setUploadModal(true);\n }, []);\n\n useEffect(() => {\n loadDetails();\n }, [loadDetails]);\n\n const getUploadFileModalProps = useCallback(() => {\n const handleDrop = (e) => {\n e.preventDefault();\n e.stopPropagation();\n const filesList = e.dataTransfer.files;\n setFile(filesList[0]);\n setUploadModal(false);\n };\n\n const handleDrag = (e) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const handleEnter = (e) => {\n handleDrag(e);\n setType('div');\n };\n\n const handleLeave = (e) => {\n handleDrag(e);\n setType('label');\n };\n\n return ({\n uploadModalIsVisible: uploadModal,\n setUploadModal,\n handleEnter,\n handleDrag,\n handleLeave,\n handleDrop,\n type,\n loadingSubmit,\n setFile,\n accept,\n title: ticketLocale.history.attachFile,\n draggableTitle: ticketLocale.history.draggableTitle,\n findFileLabel: ticketLocale.history.findFile,\n });\n }, [accept, loadingSubmit, ticketLocale, uploadModal, type]);\n\n const getViewImageModalProps = useCallback(() => ({\n imageModalIsVisible,\n setImageModalVisibale,\n image,\n }), [image, imageModalIsVisible, setImageModalVisibale]);\n\n const renderMessages = useCallback(() => {\n if (isLoading) {\n return [1, 2, 3].map(index => (\n \n \n \n \n \n\n \n ));\n }\n\n if (!isLoading) {\n return ticketData.comments.comments.map(comment => (\n \n \n \n {comment.person === 'me' ? \n {comment.person === 'me' ? `${firstName} ${lastName}` : 'Analista'}\n\n \n {ticketLocale.history.ticketDate({ comment })}\n \n \n\n \n {listDocs({ comment })}\n\n {listImages({ comment })}\n \n )}\n \n ));\n }\n }, [isLoading, ticketData, firstName, lastName, listDocs, listImages, ticketLocale]);\n\n const renderTicketId = useCallback(() => {\n if (isLoading) {\n return (\n <>\n \n \n setShowSolvedMessage(false)}\n />\n\n setShowFeedbackModal(true)}\n />\n \n\n \n );\n }\n\n if (isLoading) {\n return \n <>\n \n setMessage(e.target.value)}\n placeholder={ticketLocale.history.placeHolder}\n />\n\n {file && (\n \n \n )}\n \n\n \n );\n }\n }, [\n file,\n isLoading,\n ticketLocale,\n handleAddFile,\n handleClearFile,\n handleSubmit,\n loadingSubmit,\n message,\n ticketData,\n showSolvedMessage,\n ]);\n\n const handleFeedback = useCallback((feedback) => {\n const data = {\n id: ticketId,\n score: feedback,\n };\n\n setLoadingFeedback(true);\n\n dispatch(saveFeedbackTicketDetail(data, userEmail)).then(() => {\n history.push(routesLocale.help);\n });\n }, [\n ticketId,\n userEmail,\n dispatch,\n history,\n routesLocale.help,\n ]);\n\n if (shouldRenderEmptyState) {\n return (\n \n \n {ticketLocale.history.emptyLabel}\n \n history.push(routesLocale.help)} size=\"large\" />\n \n );\n }\n\n return (\n \n {showFeedbackModal && (\n setShowFeedbackModal(false)}\n >\n \n {loadingFeedback && (\n setSelectedFeedback('bad')}\n />\n\n setSelectedFeedback('good')}\n />\n \n )}\n \n\n handleFeedback(selectedFeedback)}\n size=\"large\"\n variant=\"primary\"\n width=\"fit\"\n />\n \n )}\n\n \n {renderTicketId()}\n \n\n \n {isLoading\n ? \n\n \n {renderMessages()}\n \n\n {renderInutWrapper()}\n \n );\n};\n\nexport default TicketHistoryHandler;\n","import styled, { css } from 'styled-components';\n\nexport const UnderMaintenance = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.white.primary};\n border-radius: 8px;\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n margin-bottom: 8px;\n padding: 32px;\n text-align: center;\n `}\n`;\n","import React from 'react';\nimport { useParams } from 'react-router-dom';\nimport { withStyles } from '@material-ui/core';\nimport TicketChat from '@/components/Tickets/TicketChat';\nimport { ContentContainer } from '@/components/Cards/ContentContainer';\nimport styles from './styles';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { CHARLIE_TICKET_HISTORY, REMOVE_TICKETS } from '@/config/GrowthBook/constants';\nimport { TicketHistoryHandler } from '../TicketHistoryHandler';\nimport * as Styles from './TicketDetails.styles';\nimport useLocale from '@/hooks/useLocale';\n\nconst TicketDetails = ({ classes }) => {\n const { id, v2 } = useParams();\n const enableTicketHistory = useFeatureIsOn(CHARLIE_TICKET_HISTORY);\n const shouldHideTicketsList = useFeatureIsOn(REMOVE_TICKETS);\n const { ticket: ticketLocale } = useLocale();\n\n if (shouldHideTicketsList) {\n return (\n \n \n {ticketLocale.underMaintenance}\n \n \n );\n }\n\n if (enableTicketHistory) {\n return (\n \n \n \n
\n );\n};\n\nexport default withStyles(styles, { withTheme: true })(TicketDetails);\n","export const formatDomain = (domain) => {\n if (domain.length > 22) {\n const split = domain.split('.');\n const second = split[2] ? `.${split[2]}` : '';\n const dotDomain = `${split[0].substring(0, 22)}...[${split[1]}${second}]`;\n return dotDomain;\n }\n return domain;\n};\n","const styles = theme => ({\n cardWarning: {\n display: 'inline-flex',\n alignItems: 'center',\n padding: '5px 15px',\n border: '1px solid #000',\n },\n cardWarningIcon: {\n marginRight: '15px',\n color: theme.color.tundora,\n },\n cardWarningText: {\n fontSize: '12px',\n lineHeight: '16px',\n color: theme.color.tundora,\n margin: 0,\n },\n statusInfo: {\n borderColor: theme.color.indigo,\n },\n statusActive: {\n borderColor: theme.color.oceanGreen,\n },\n statusPending: {\n borderColor: theme.color.brightSun,\n },\n statusPendingTransfer: {\n borderColor: theme.color.brightSun,\n },\n statusExpired: {\n borderColor: theme.color.valencia,\n },\n statusCancelled: {\n borderColor: theme.color.geyser,\n },\n statusFraud: {\n borderColor: theme.color.brightSun,\n },\n statusSuspended: {\n borderColor: theme.color.valencia,\n },\n statusBuilding: {\n borderColor: theme.color.coral,\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport classnames from 'classnames';\nimport { withStyles } from '@material-ui/core';\nimport { Warning } from '@material-ui/icons';\n\nimport styles from './styles';\n\n\nconst CardWarning = ({\n classes, className, icon, status, message, iconSize,\n}) => {\n const IconImage = icon || Warning;\n return (\n \n );\n};\n\nexport default withStyles(styles)(CardWarning);\n","const styles = theme => ({\n modal: {\n borderRadius: 0,\n maxWidth: '475px',\n },\n container: {\n alignItems: 'flex-start',\n },\n content: {\n position: 'relative',\n padding: '35px 40px',\n },\n btnClose: {\n position: 'absolute',\n top: '15px',\n right: '15px',\n color: theme.color.tundora,\n padding: '6px',\n },\n title: {\n color: theme.color.tundora,\n fontSize: '24px',\n fontWeight: 'normal',\n margin: '0 0 5px',\n },\n message: {\n color: theme.color.tundora,\n fontSize: '14px',\n lineHeight: '20px',\n margin: '0 0 15px',\n },\n warning: {\n padding: '15px',\n marginBottom: '30px',\n borderRadius: '2px',\n width: '100%',\n },\n actions: {\n textAlign: 'center',\n },\n btn: {\n width: 176,\n whiteSpace: 'nowrap',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport {\n withStyles, Dialog, Slide, IconButton,\n} from '@material-ui/core';\nimport { Close, Warning } from '@material-ui/icons';\nimport { withI18n, Trans } from 'react-i18next';\nimport { useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport CardWarning from '@/components/Cards/CardWarning';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport styles from './styles';\n\nconst Transition = props => \n \n
\n {t('sitesWizard.modalRemoveSite.title')} \n \n \n 0\n 1 \n \n
\n\n \n
\n {t('sitesWizard.modalRemoveSite.buttonConfirmation')}\n \n \n {productDetailActionsLocale.createSiteButton}\n \n );\n case 'dataAccess':\n return (\n dispatch(toggleAccessPasswordModal())}\n disabled={disabledActions}\n >\n {t(`actions.${action.type}.active`)}\n \n );\n case 'whm':\n return (\n \n {buttonText}\n \n );\n case 'websitebuilder':\n return (\n handleSiteBuilder(action.removeSite)}\n className={classnames(classes.cardLink, {\n [classes.cardLinkDisabled]: inactiveButton,\n })}\n >\n {loadingSiteBuilderSso && (\n \n );\n case 'websitebuilder-on-shared-plans':\n return (\n \n {buttonText}\n \n );\n case 'websitebuilder-active-edit':\n return (\n dispatch(activateWebsiteCreationFlow(hostingId, domain)) : null}\n className={classnames(classes.cardLink, {\n [classes.cardLinkDisabled]: inactiveButton,\n })}\n >\n {t(`actions.websitebuilder-active-edit.${action.status}`)}\n \n );\n case 'cpanel':\n return (\n goToCPanel(action.linkUrl)}\n rel=\"noopener noreferrer\"\n >\n {loadingCPanelSSO ? \n {t('proEmail.chipLinkLabel')}\n \n );\n case 'manage-site':\n return (\n setRedirectToProductDetail(action.relid)}\n data-id=\"manage-site\"\n className={classnames(classes.cardLink, {\n [classes.cardLinkDisabled]: inactiveButton,\n })}\n >\n {buttonText}\n \n );\n case 'cloudflare':\n return (\n \n {buttonText}\n \n {showOldResellerLabel\n ? t(`actions.old-reseller-plan-switch.${action.status}`)\n : t(`actions.${action.type}.${action.status}`)\n }\n \n );\n }\n };\n\n const onRemoveSiteBuilder = async () => {\n const data = {\n hosting_id: productId,\n domain,\n product: 'shop',\n };\n\n const response = await dispatch(removeSiteFromSiteBuilder(data));\n if (response.type === SUCCESS_DELETE_SITE_FROM_SITEBUILDER) {\n dispatch(enqueueSnackbar(t('snackbar.siteBuilder.successRemoveSite'), notifierSuccess));\n const updateProductId = isStandalone ? productId : parentId;\n dispatch(updateSiteBuilderStatusOnMySitesPage(updateProductId, false));\n if (aditionalDomain) {\n dispatch(removeProductGroup(productId));\n }\n setRedirectToMySitesPage(true);\n } else {\n dispatch(enqueueSnackbar(t('snackbar.siteBuilder.errorRemoveSite'), notifierErrorLong));\n setShowModalRemoveSite(false);\n }\n };\n\n if (redirectToProductDetail) {\n return \n {generateLink(action)}\n
\n ))}\n\n {showModalRemoveSite && (\n setShowModalRemoveSite(false)}\n productName={productname}\n onRemove={onRemoveSiteBuilder}\n />\n )}\n \n );\n};\n\nexport default withI18n()(withStyles(styles)(ProductDetailActions));\n","const styles = theme => ({\n statusActive: {\n color: theme.color.oceanGreen,\n },\n statusPending: {\n color: theme.color.brightSun,\n },\n statusPendingTransfer: {\n color: theme.color.brightSun,\n },\n statusExpired: {\n color: theme.color.valencia,\n },\n statusCancelled: {\n color: theme.color.geyser,\n },\n statusFraud: {\n color: theme.color.brightSun,\n },\n statusSuspended: {\n color: theme.color.valencia,\n },\n statusBuilding: {\n color: theme.color.coral,\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport classnames from 'classnames';\nimport { withStyles } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nconst CardIcon = ({\n classes, icon, status, className,\n}) => {\n const IconImage = icon;\n return (\n key}>\n {children}\n \n );\n};\n\nProductsContextProvider.propTypes = {\n children: PropTypes.node,\n};\n\nProductsContextProvider.defaultProps = {\n children: null,\n};\n\nexport default ProductsContextProvider;\n","\nimport { addDays, format } from 'date-fns';\nimport PropTypes from 'prop-types';\n\nconst formatDateFns = ({ productDate, additionalDays }) => format(addDays(new Date(productDate), additionalDays), 'dd/MM/yyyy');\n\nformatDateFns.propTypes = {\n productDate: PropTypes.string.isRequired,\n additionalDays: PropTypes.number,\n};\n\nformatDateFns.defaultProps = {\n additionalDays: 0,\n};\n\nexport default formatDateFns;\n","\nconst styles = theme => ({\n resellerMessageWrapper: {\n display: 'flex',\n margin: '24px 0px 0px 0px',\n width: '85%',\n },\n\n messageStyle: {\n fontSize: 13,\n color: theme.color.tundora,\n lineHeight: '15px',\n letterSpacing: '0.01px',\n\n '& button, & a': {\n background: 'transparent',\n border: 0,\n color: theme.color.indigo,\n cursor: 'pointer',\n padding: 0,\n textDecoration: 'underline',\n },\n },\n\n listCursos: {\n cursor: 'pointer',\n },\n\n productDetail: {\n marginBottom: 24,\n marginTop: 14,\n },\n});\n\nexport default styles;\n","import React, { useContext } from 'react';\nimport { Trans, withI18n } from 'react-i18next';\nimport { withStyles } from '@material-ui/core';\nimport { addDays, differenceInDays } from 'date-fns';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport WarningNotice from '@/components/Notification/WarningNotice/index';\nimport { ProductsContext } from '@/contexts/Products/context';\nimport { RESELLER_PRICE_UPDATE_EXPLANATION } from '@/config/urls/supportUrls';\nimport formatDateFns from '@/utils/Formatters/formatDateFns';\nimport styles from './styles';\n\nconst OldResellerWarning = ({ classes, product, productDetail }) => {\n const { toggleShowModal } = useContext(ProductsContext);\n\n const changePlanAction = product.actions.find(action => action.type === 'plan-switch');\n const dateDiff = product.nextinvoicedate\n ? differenceInDays(addDays(new Date(product.nextinvoicedate), 1), new Date())\n : differenceInDays(addDays(new Date(product.nextduedate), 1), new Date());\n const criticalMessage = dateDiff < 10;\n\n const isValidDate = (product.nextinvoicedate !== undefined && product.nextinvoicedate !== '0000-00-00')\n || (product.nextduedate !== undefined && product.nextduedate !== '0000-00-00');\n\n if (!isValidDate) {\n return null;\n }\n\n return (\n \n \n\n {(product.status === 'Suspended' || product.domainstatus === 'Suspended') ? (\n \n \n {{ productname: product.productname }}\n {{\n invoicedate: formatDateFns({\n productDate: product.nextinvoicedate ? product.nextinvoicedate : product.nextduedate,\n additionalDays: 31,\n }),\n }}\n <>0\n \n\n {product.nextinvoicedate ? (\n toggleShowModal(true)}\n type=\"button\"\n data-testid=\"nextinvoicedateU\"\n >\n 1\n \n )\n : ( 1 )\n }\n\n <>2\n \n )\n : (\n \n \n {{ productname: product.productname }}\n {{\n invoicedate: formatDateFns({\n productDate: product.nextinvoicedate ? product.nextinvoicedate : product.nextduedate,\n additionalDays: 1,\n }),\n }}\n <>0\n \n\n <>1\n\n 2 \n\n <>3\n\n {product.nextinvoicedate ? (\n toggleShowModal(true)}\n data-testid=\"nextinvoicedateU\"\n >\n 4\n \n )\n : ( 4 )\n }\n\n <>5\n \n )\n }\n \n )}\n fill=\"100%\"\n />\n \n );\n};\n\nOldResellerWarning.propTypes = {\n product: PropTypes.object.isRequired,\n productDetail: PropTypes.bool.isRequired,\n};\n\nexport default withI18n()(withStyles(styles)(OldResellerWarning));\n","const styles = theme => ({\n card: {\n backgroundColor: '#fff',\n borderRadius: '0px',\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n padding: '30px',\n borderLeft: `5px solid ${theme.color.oceanGreen}`,\n },\n statusActive: {\n borderLeftColor: theme.color.oceanGreen,\n },\n statusPending: {\n borderLeftColor: theme.color.brightSun,\n },\n statusPendingTransfer: {\n borderLeftColor: theme.color.brightSun,\n },\n statusExpired: {\n borderLeftColor: theme.color.valencia,\n },\n statusCancelled: {\n borderLeftColor: theme.color.geyser,\n },\n statusFraud: {\n borderLeftColor: theme.color.brightSun,\n },\n statusSuspended: {\n borderLeftColor: theme.color.valencia,\n },\n statusBuilding: {\n borderLeftColor: theme.color.coral,\n },\n cardHeader: {\n display: 'flex',\n alignItems: 'center',\n flexWrap: 'wrap',\n borderBottom: `1px dashed ${theme.color.mystic}`,\n },\n cardHeaderInner: {\n display: 'flex',\n alignItems: 'center',\n marginBottom: '20px',\n marginRight: 40,\n },\n cardIcon: {\n marginRight: '15px',\n },\n cardName: {\n marginRight: '15px',\n },\n cardTitle: {\n display: 'block',\n fontSize: '16px',\n fontWeight: 'bold',\n color: theme.color.tundora,\n },\n cardSubtitle: {\n fontSize: '12px',\n color: theme.color.regentGray,\n },\n cardActions: {\n display: 'flex',\n flexWrap: 'wrap',\n marginBottom: '15px',\n [theme.breakpoints.down('xs')]: {\n flexGrow: 1,\n },\n },\n cardWarning: {\n marginLeft: '40px',\n marginBottom: '20px',\n },\n cardWarningLink: {\n color: theme.color.indigo,\n },\n cardContent: {\n paddingTop: '20px',\n display: 'flex',\n alignItems: 'stretch',\n '@media(max-width: 710px)': {\n display: 'block',\n },\n },\n chiplinkWrapper: {\n alignSelf: 'flex-start',\n },\n});\n\nexport default styles;\n","import React, { useContext } from 'react';\nimport classnames from 'classnames';\nimport { withI18n, Trans } from 'react-i18next';\nimport { withStyles } from '@material-ui/core';\nimport { Folder } from '@material-ui/icons';\nimport ProductDetailActions from '@/components/Products/ProductDetailActions';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport CardIcon from '@/components/Cards/CardIcon/index';\nimport CardStatus from '@/components/Cards/CardStatus/index';\nimport CardWarning from '@/components/Cards/CardWarning';\nimport OldResellerWarning from '@/components/Products/OldResellerWarning';\nimport { ProductsContext } from '@/contexts/Products/context';\nimport ChipLinkButton from '@/components/Buttons/ChipLinkButton';\nimport styles from './styles';\n\n\nconst ProductDetailCard = ({\n children,\n classes,\n t,\n status,\n title,\n subtitle,\n disabledActions,\n product,\n}) => {\n const changePlanAction = product.actions.find(action => action.type === 'plan-switch');\n const {\n oldResellerId,\n featureOldResellerNotification,\n products,\n cloudflareAvailableProducts,\n } = useContext(ProductsContext);\n\n return (\n \n \n
\n
\n
\n {title} \n {subtitle} \n
\n
{t(`domainStatus.${status.replace(' ', '_')}`)} \n
\n\n {status === 'Active' && (\n
\n )}\n\n {status === 'Pending' && (\n
\n 0\n 1 \n \n )}\n />\n )}\n\n {(status === 'Suspended' && oldResellerId.find(packageid => product.packageid === packageid)) && (\n \n
\n )}\n\n {(status === 'Suspended' && !oldResellerId.find(packageid => product.packageid === packageid)) && (\n \n 0\n 1 \n \n )}\n />\n )}\n\n {(oldResellerId.find(packageid => product.packageid === packageid) && featureOldResellerNotification) && (\n \n {children}\n
\n \n );\n};\n\nexport default withI18n()(withStyles(styles)(ProductDetailCard));\n","const styles = theme => ({\n cardDetail: {\n alignItems: 'flex-start',\n display: 'flex',\n paddingTop: 20,\n '@media(max-width: 710px)': {\n display: 'block',\n },\n },\n cardDetailItemWrapper: {\n display: 'flex',\n flexWrap: 'wrap',\n padding: '0 30px',\n '@media(max-width: 710px)': {\n flexDirection: 'column',\n padding: 0,\n width: 'auto',\n },\n },\n cardDetailItemWrapper1: {\n borderRight: `1px dashed ${theme.color.mystic}`,\n flexDirection: 'column',\n width: '190px',\n '@media(max-width: 710px)': {\n borderRight: 0,\n },\n },\n cardDetailItemWrapper2: {\n borderRight: `1px dashed ${theme.color.mystic}`,\n flex: 1,\n flexDirection: 'column',\n '@media(max-width: 710px)': {\n borderBottom: `1px dashed ${theme.color.mystic}`,\n borderRight: 0,\n borderTop: `1px dashed ${theme.color.mystic}`,\n marginBottom: 15,\n paddingTop: 15,\n '&:first-child': {\n borderBottom: 'none',\n borderTop: 'none',\n marginBottom: 0,\n paddingTop: 0,\n },\n },\n },\n cardDetailItemWrapper3: {\n justifyContent: 'space-between',\n width: '310px',\n },\n cardDetailItem: {\n marginBottom: 15,\n },\n cardDetailItemColumn3: {\n width: '120px',\n },\n cardDetailTitle: {\n color: theme.color.regentGray,\n display: 'block',\n fontSize: 12,\n marginBottom: 5,\n },\n cardDetailValue: {\n color: theme.color.tundora,\n display: 'block',\n fontSize: 14,\n lineHeight: '18px',\n },\n cardDetailNoBorder: {\n borderRight: 'none',\n },\n wrapper: {\n display: 'flex',\n flexDirection: 'column',\n marginTop: 6,\n width: '100%',\n },\n backupInfo: {\n borderBottom: `1px dashed ${theme.color.mystic}`,\n display: 'flex',\n flexDirection: 'column',\n gap: 10,\n marginBottom: 40,\n paddingBottom: 25,\n\n '@media(max-width: 710px)': {\n flexDirection: 'column',\n padding: 0,\n width: 'auto',\n },\n },\n productInfo: {\n display: 'flex',\n },\n backupDescription: {\n color: theme.color.tundora,\n fontSize: 14,\n fontWeight: '400',\n margin: 0,\n paddingBottom: 17,\n },\n});\n\nexport default styles;\n","import React, { useEffect } from 'react';\nimport { withI18n } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport classnames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport shortid from 'shortid';\nimport { formatDate } from '@/utils/Formatters/formatDate';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { formatDomain } from '@/utils/Formatters/domain';\nimport ProductDetailCard from '@/components/Cards/ProductDetailCard';\nimport { SERVER_INFO_ID_LIST } from '@/config/products/availability';\nimport { getSiteBuilderStatus } from '@/redux/actions/siteBuilder';\nimport { RECEIVE_STATUS_SITE_BUILDER_FOR_ACTIONS } from '@/redux/actions/actionsTypes';\nimport { updateOptionsProductDetail } from '@/redux/actions/productDetail';\nimport styles from './styles';\nimport { Button } from 'gatorcomponents';\nimport { useHistory } from 'react-router';\nimport { backupAnalytics } from '@/analytics';\nimport { format } from 'date-fns';\nimport { isBRServer } from '@/utils/Validators/validation';\n\nconst normalizeBillingCycle = billingcycle => billingcycle.toLowerCase().replace(/-/g, '');\nconst checkServerInfoVisibility = id => SERVER_INFO_ID_LIST[isBRServer ? 'br' : 'es'].includes(id);\nconst getAssignedIps = (ips) => {\n if (ips.length > 0) {\n return ips.join(' / ');\n }\n return '-';\n};\n\nconst ProductDetail = ({\n t,\n product,\n classes,\n isDedicated,\n disabledActions,\n}) => {\n const {\n amount,\n assignedips,\n billingcycle,\n dedicatedip,\n domainstatus,\n firstpaymentamount,\n ipaddress,\n nextduedate,\n ns1,\n ns2,\n paymentmethod,\n productname,\n regdate,\n serverName,\n temporaryLink,\n type,\n username,\n packageid,\n showBillingCycle,\n id,\n productType,\n } = product;\n const domain = useSelector(state => state.productDetail.product && state.productDetail.product.domain);\n const { backupLog } = useSelector(state => state.backup);\n const lastBackup = backupLog[0] || {};\n const isWebsitebuilder = type === 'websitebuilder';\n const isBorderNone = productType === 'addon';\n const isResellerOrShared = type === 'reseller' || type === 'shared';\n const isFreeAccount = billingcycle === 'Free Account';\n const isFreeDueDate = nextduedate === '0000-00-00';\n const isPending = product.domainstatus && product.domainstatus.toLowerCase() === 'pending';\n\n const isEnabled = true;\n const isRemoveFirstPayment = true;\n\n const backupEnableProductTypes = ['shared', 'reseller'];\n const showBackup = !isPending && backupEnableProductTypes.includes(product.type);\n\n const dispatch = useDispatch();\n const history = useHistory();\n\n useEffect(() => {\n if (isWebsitebuilder && domain) {\n dispatch(getSiteBuilderStatus(domain, 'actions')).then((response) => {\n if (response.type === RECEIVE_STATUS_SITE_BUILDER_FOR_ACTIONS) {\n const isActive = response.data.active;\n const status = isActive ? 'active' : 'inactive';\n\n const arrActions = [\n {\n uuid: 'active-edit-site-1',\n relid: shortid.generate(),\n linkUrl: `${t('routes.siteBuilderRedirectAccess')}/${domain}${isActive ? '' : `/${id}`}`,\n type: 'websitebuilder-active-edit',\n status,\n },\n ];\n\n if (status === 'active') {\n arrActions.push({\n uuid: 'removeSite-1',\n relid: shortid.generate(),\n linkUrl: '_self',\n type: 'websitebuilder',\n status,\n removeSite: true,\n });\n }\n\n dispatch(updateOptionsProductDetail(arrActions));\n }\n });\n }\n }, [domain, dispatch, id, isWebsitebuilder, t]);\n\n const getServerName = (isDedicated) => {\n if (isDedicated) {\n return formatDomain(domain) || '-';\n }\n return serverName;\n };\n\n const firstPayment = () => (!isRemoveFirstPayment\n ? (\n \n {t('invoiceFisrtPayment')} \n {formatCurrency(firstpaymentamount)} \n
\n ) : null);\n\n const showBackupRedirect = () => {\n history.push(`${t('routes.products')}${t('routes.productdetail')}/${product.id}${t('routes.backup')}`);\n backupAnalytics.backupButtonClick();\n };\n return (\n domainstatus !== undefined && (\n \n\n \n {showBackup && (\n
\n
\n {t('productDetailsBackup.title')}\n \n {lastBackup.created_at && (\n
\n {t('productDetailsBackup.description.0')}\n {product.productname} \n {t('productDetailsBackup.description.1')}\n {format(new Date(lastBackup.created_at), 'dd/MM/yyy')} \n
\n )}\n
\n
\n
\n )}\n\n
\n {checkServerInfoVisibility(packageid) && (\n
\n
\n {t('username')} \n {username} \n
\n
\n {t('access_ssh')} \n {`${t('host')}: ${dedicatedip}`} \n {`${t('port')}: 22022`} \n
\n
\n )}\n\n
\n
\n {t('servername')} \n {getServerName(isDedicated)} \n
\n\n {assignedips[0] !== '' && (\n
\n {t('server_ips')} \n {getAssignedIps(assignedips)} \n
\n )}\n\n
\n DNS \n {`${ns1} / ${ns2}`} \n
\n
\n\n {isResellerOrShared && (\n
\n
\n {t('hostnameFtp')} \n {`${ipaddress} / ${domain}`} \n
\n
\n {t('temporaryLink')} \n {temporaryLink} \n
\n
\n )}\n\n { (!isWebsitebuilder || showBillingCycle) && (\n
\n {!isFreeDueDate && (\n
\n {t('nextDueDate')} \n {formatDate(nextduedate, isEnabled)} \n
\n )}\n
\n {t('registerDate')} \n {formatDate(regdate, isEnabled)} \n
\n\n {firstPayment()}\n\n
\n {t('invoiceValueReminiscent')} \n {formatCurrency(amount)} \n
\n\n {!isFreeAccount && (\n
\n {t('domainCyclePayment')} \n {t(`billingcycle.${normalizeBillingCycle(billingcycle)}`)} \n
\n )}\n
\n {t('invoicePaymentMethod')} \n {t(paymentmethod)} \n
\n
\n )}\n
\n
\n
\n {t('myData.changePassword.checklist.title')} \n
\n
\n \n {upperAndLowercase ? \n {t('myData.changePassword.checklist.upperAndLowercase')} \n \n \n {number ? \n {t('myData.changePassword.checklist.number')} \n \n \n {symbol ? \n {t('myData.changePassword.checklist.symbol')} \n \n \n {eightCharacters ? \n {t('myData.changePassword.checklist.eightCharacters')} \n \n \n {haveBothFields && (\n <>\n {sameInBothFields ? \n {t('myData.changePassword.checklist.sameInBothFields')} \n \n )}\n \n \n
\n \n 0\n 1 \n 2\n \n
\n )}\n \n);\n\nPasswordCheckList.propTypes = {\n showCheckList: PropTypes.bool.isRequired,\n upperAndLowercase: PropTypes.bool.isRequired,\n number: PropTypes.bool.isRequired,\n symbol: PropTypes.bool.isRequired,\n eightCharacters: PropTypes.bool.isRequired,\n sameInBothFields: PropTypes.bool,\n};\n\nexport default withI18n()(withStyles(styles)(PasswordCheckList));\n","const styles = theme => ({\n modal: {\n borderRadius: 0,\n maxWidth: '475px',\n },\n content: {\n position: 'relative',\n padding: '35px 40px',\n },\n btnClose: {\n position: 'absolute',\n top: '15px',\n right: '15px',\n color: theme.color.tundora,\n padding: '6px',\n },\n title: {\n color: theme.color.tundora,\n fontSize: '24px',\n fontWeight: 'normal',\n margin: '0 0 10px',\n },\n message: {\n color: theme.color.tundora,\n fontSize: '14px',\n lineHeight: '20px',\n margin: '0 0 15px',\n },\n generatorText: {\n margin: '26px 0',\n color: theme.color.regentGray,\n fontSize: '12px',\n },\n generatorLink: {\n display: 'contents',\n color: theme.color.indigo,\n fontSize: '12px',\n },\n actions: {\n textAlign: 'center',\n marginTop: '25px',\n },\n btnCancel: {\n marginRight: '10px',\n color: theme.color.indigo,\n },\n});\n\nexport default styles;\n","import React, { useState, useEffect } from 'react';\nimport {\n withStyles, Dialog, Slide, IconButton, Grid,\n} from '@material-ui/core';\nimport { Close } from '@material-ui/icons';\nimport { withI18n, Trans } from 'react-i18next';\nimport { useParams, useHistory } from 'react-router-dom';\nimport { useDispatch } from 'react-redux';\nimport * as yup from 'yup';\nimport PasswordCheckList from '@/components/PasswordCheckList';\nimport PasswordField from '@/components/Fields/PasswordField';\nimport OutlineButton from '@/components/Buttons/OutlineButton';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport { savePassword } from '@/redux/actions/productDetail';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport { notifierSuccess, notifierError } from '@/utils/Application/notifier';\nimport { RECEIVE_PRODUCT_SAVE_PASSWORD } from '@/redux/actions/actionsTypes';\nimport styles from './styles';\n\n\nconst Transition = props => \n \n \n {editing ? t('modalSetPassword.editingTitle') : t('modalSetPassword.setTitle')} \n {!editing && (\n \n \n 0\n 1 \n 2\n \n
\n )}\n \n \n \n );\n};\n\nexport default withI18n()(withStyles(styles)(ModalSetPassword));\n","import React, { useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { loadFaqProductDetail } from '@/redux/actions/faq';\nimport FaqDefault from '../FaqDefault/FaqDefault';\nimport { SUPPORT_HOST_AND_SERVERS_URL } from '@/config/urls/domainsUrls';\n\n\nconst FaqProductDetail = ({ packageid }) => {\n const questions = useSelector(state => state.faq.productDetail.questions);\n const loading = useSelector(state => state.faq.loading);\n\n const dispatch = useDispatch();\n\n useEffect(() => {\n packageid && dispatch(loadFaqProductDetail(packageid));\n }, [dispatch, packageid]);\n\n return (\n questions.length > 0\n && (\n \n \n \n {t('reboot.modalHistory.title')} \n \n \n 0\n 1 \n 2\n 3 \n \n
\n \n {logs.map(log => (\n
\n
\n {t('reboot.modalHistory.date')} \n {log.date} \n
\n
\n {t('reboot.modalHistory.time')} \n {log.time.join(' / ')} \n
\n
\n ))}\n
\n \n \n {t('reboot.modalReboot.title')} \n \n \n 0\n 1 \n 2\n 3 \n \n
\n \n 0 \n 1\n \n )}\n />\n \n
{t('reboot.modalReboot.cancel')} \n
{t('reboot.modalReboot.confirm')} \n
\n
\n
{t('reboot.title')} \n \n
\n {loading && (\n 0 \n 1\n \n )}\n />\n )}\n {!canReboot && !loading && (\n \n 0\n 1 \n 2\n \n )}\n />\n )}\n \n {history.length > 0 && (\n
setModalRebootHistory(true)}>\n {t('reboot.history')}\n \n )}\n {!loadingReebot && (
setModalReboot(true)} disabled={disabledActions}>{t('reboot.restart')} )}\n {loadingReebot && (\n
\n Reiniciando... \n \n )}\n
setModalRebootHistory(false)}\n product={product.productname}\n domain={product.domain}\n />\n setModalReboot(false)}\n product={product.productname}\n domain={product.domain}\n onReboot={handleReboot}\n />\n \n )}\n \n );\n};\n\nexport default withI18n()(withStyles(styles)(RebootCard));\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.button`\n ${({ theme, bgColor }) => css`\n background-color: ${bgColor};\n border: none;\n cursor:pointer;\n display: grid;\n flex: 1;\n max-width: 812px;\n width: 100%;\n grid-template-areas:\n \"logo .\"\n \"description image\"\n \"button image\";\n\n @media (max-width: ${theme.breakpoints.sm}) {\n grid-template-areas:\n \"logo logo\"\n \"description image\"\n \"button image\";\n }\n `}\n`;\n\nexport const EmptyDiv = styled.div`\n ${({ theme }) => css`\n @media (max-width: ${theme.breakpoints.sm}) {\n display: none;\n }\n `}\n`;\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.color.white};\n display: flex;\n grid-area: info;\n `}\n`;\n\nexport const Logo = styled.img`\n grid-area: logo;\n padding: 24px 0px 26px 24px;\n`;\n\nexport const Image = styled.img`\n${({\n paddingTop, paddingRigth, paddingBottom, paddingLeft, maxWidth,\n marginTop, marginRight, marginBottom, marginLeft,\n }) => css`\n grid-area: image;\n margin: ${marginTop} ${marginRight} ${marginBottom} ${marginLeft};\n max-width: ${maxWidth};\n padding: ${paddingTop} ${paddingRigth} ${paddingBottom} ${paddingLeft};\n `}\n`;\n\nexport const Description = styled.div`\n${({ theme }) => css`\n color: ${theme.color.white};\n font-family: Roboto;\n font-size: 20px;\n grid-area: description;\n padding: 0px 24px 29px;\n text-align: left;\n `}\n`;\n\nexport const Title = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.color.oceanGreen};\n `}\n`;\n\nexport const Button = styled.div`\n border: 1px solid white;\n grid-area: button;\n margin: 0px auto 24px 24px;\n color: white;\n font-size: 15px;\n font-weight: bold;\n height: 32px;\n padding: 6px 16px 6px 16px;\n text-align: center;\n width: 125px;\n border-radius: 2px;\n`;\n","import React from 'react';\nimport { withI18n } from 'react-i18next';\nimport Trakto from '@/media/partners/traktoHG.svg';\nimport { bottomBannerPartnersClick } from '@/utils/ThirdParties/tagManager';\nimport * as Style from './BottomAdvertisement.styles';\n\nconst background = require('@/media/courses/certificate/background.png');\n\nconst BottomAdvertisement = ({\n buttonLabel = 'Get partnership',\n logo = Trakto,\n logoWidth = '289px',\n logoHeigth = '32px',\n description = 'The art editor that you need. Create mini-sites, social media, e-books, apresentations and more',\n partnerConfig = {\n image: background,\n imgMaxWidth: 450,\n imgPaddingTop: 0,\n imgPaddingRight: 0,\n imgPaddingBottom: 0,\n imgPaddingLeft: 0,\n imgMarginTop: 0,\n imgMarginRight: 0,\n imgMarginBottom: 0,\n imgMarginLeft: 0,\n bgColor: '#0096FB',\n },\n partner = 'trakto',\n advertisementLocal = '',\n visible = true,\n href = 'site.to.redirect.com',\n testId = 'bottom-advertisement-component',\n}) => {\n const isBottomBannerEnabled = true;\n const checkValue = value => ((typeof value) === 'number' ? `${value}px` : value);\n const formatPartnerName = value => value.charAt(0).toUpperCase() + value.slice(1);\n\n const handleClick = () => {\n if (advertisementLocal && partner) {\n bottomBannerPartnersClick(`${formatPartnerName(partner)}_bottombanner_${advertisementLocal}`);\n }\n if (href && href !== '#') {\n return window.open(href, '_blank');\n }\n };\n\n return isBottomBannerEnabled && visible && partnerConfig ? (\n \n \n {description}\n \n \n {buttonLabel}\n \n \n ) : \n \n
\n \n \n \n
\n\n {hasRebootCard && (\n \n \n )}\n \n
\n )}\n\n \n
\n \n );\n};\n\nexport default withI18n()(withStyles(styles)(ProductDetailPage));\n","import { CALL_API } from '@/middleware/api';\nimport { DNS_DOMAIN_LIST, DNS_DOMAIN_LIST_EXTERNAL, DNS_DETAILS } from '@/config/api';\nimport {\n DNS_DOMAIN_LIST_REQUEST, DNS_DOMAIN_LIST_RECEIVE, DNS_DOMAIN_LIST_ERROR,\n DNS_DETAILS_REQUEST, DNS_DETAILS_RECEIVE, DNS_DETAILS_ERROR,\n SAVE_CHANGE_TO_DNS_NATIVE_REQUEST, SAVE_CHANGE_TO_DNS_NATIVE_SUCCESS, SAVE_CHANGE_TO_DNS_NATIVE_ERROR,\n CHANGE_TO_OTHER_DNS, CHANGE_TO_NATIVE_DNS, CHANGE_TO_HOSTING_DNS,\n SAVE_CHANGE_TO_DNS_OTHER_REQUEST, SAVE_CHANGE_TO_DNS_OTHER_SUCCESS, SAVE_CHANGE_TO_DNS_OTHER_ERROR,\n DNS_DOMAIN_LIST_EXTERNAL_REQUEST, DNS_DOMAIN_LIST_EXTERNAL_RECEIVE, DNS_DOMAIN_LIST_EXTERNAL_ERROR,\n SAVE_CHANGE_TO_DNS_HOSTING_REQUEST, SAVE_CHANGE_TO_DNS_HOSTING_SUCCESS, SAVE_CHANGE_TO_DNS_HOSTING_ERROR,\n CHANGE_DNS_DOMAIN_STATE, SET_CHOSEN_DOMAIN,\n} from './actionsTypes';\n\n\nfunction receiveDns(dnsList) {\n const newList = dnsList;\n\n Object.keys(newList).forEach((key) => {\n if (key !== 'loadingExternalRequest' && key !== 'loadingInternalRequest' && newList[key].length > 0) {\n newList[key].forEach((obj) => {\n const newObject = obj;\n newObject.domain = newObject.domain.replace(/ /g, '');\n return newObject;\n });\n }\n });\n\n return {\n type: DNS_DOMAIN_LIST_RECEIVE,\n dnsList: newList,\n };\n}\n\nfunction receiveDnsExternal(dnsList) {\n return {\n type: DNS_DOMAIN_LIST_EXTERNAL_RECEIVE,\n dnsList,\n };\n}\n\nfunction receiveDnsDetails(dnsDetails) {\n const newDnsDetails = dnsDetails;\n if (newDnsDetails.data.hosting || newDnsDetails.data.native || newDnsDetails.data.other) {\n newDnsDetails.data.dbData = {\n hosting: newDnsDetails.data.hosting,\n native: newDnsDetails.data.native,\n other: newDnsDetails.data.other,\n };\n }\n return {\n type: DNS_DETAILS_RECEIVE,\n dnsDetails: newDnsDetails,\n };\n}\n\nexport function loadDnsDomainList() {\n return {\n [CALL_API]: {\n endpoint: DNS_DOMAIN_LIST,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: DNS_DOMAIN_LIST_REQUEST }),\n success: response => receiveDns(response.data),\n error: () => ({ type: DNS_DOMAIN_LIST_ERROR }),\n },\n authenticated: true,\n },\n };\n}\n\nexport function loadDnsDomainListExternal() {\n return {\n [CALL_API]: {\n endpoint: DNS_DOMAIN_LIST_EXTERNAL,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: DNS_DOMAIN_LIST_EXTERNAL_REQUEST }),\n success: response => receiveDnsExternal(response.data),\n error: () => ({ type: DNS_DOMAIN_LIST_EXTERNAL_ERROR }),\n },\n authenticated: true,\n },\n };\n}\n\nexport function loadDnsDetails(domainId) {\n return {\n [CALL_API]: {\n endpoint: DNS_DETAILS(domainId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: DNS_DETAILS_REQUEST }),\n success: response => receiveDnsDetails(response),\n error: () => ({ type: DNS_DETAILS_ERROR }),\n },\n authenticated: true,\n },\n };\n}\n\nexport function changeDnsToNative() {\n return {\n type: CHANGE_TO_NATIVE_DNS,\n };\n}\n\nexport function saveDnsNative(domainId) {\n return {\n [CALL_API]: {\n authenticated: true,\n endpoint: DNS_DETAILS(domainId),\n method: 'PUT',\n body: { native: true },\n actionTypes: {\n request: () => ({ type: SAVE_CHANGE_TO_DNS_NATIVE_REQUEST }),\n success: response => (response.http_status_code === 200\n ? ({ type: SAVE_CHANGE_TO_DNS_NATIVE_SUCCESS })\n : ({ type: SAVE_CHANGE_TO_DNS_NATIVE_ERROR })),\n error: () => ({ type: SAVE_CHANGE_TO_DNS_NATIVE_ERROR }),\n },\n },\n };\n}\n\nexport function changeDnsToOther() {\n return {\n type: CHANGE_TO_OTHER_DNS,\n };\n}\n\nconst receiveDnsOther = (data) => {\n const other = Object.keys(data).reduce((prev, next) => [...prev, {\n name: next,\n host: data[next].host,\n ip: data[next].ip,\n }], []);\n return {\n type: SAVE_CHANGE_TO_DNS_OTHER_SUCCESS,\n other,\n };\n};\n\nexport function saveDnsOther(domainId, other) {\n return {\n [CALL_API]: {\n authenticated: true,\n endpoint: DNS_DETAILS(domainId),\n method: 'PUT',\n body: other,\n actionTypes: {\n request: () => ({ type: SAVE_CHANGE_TO_DNS_OTHER_REQUEST }),\n success: response => (response.data.result === 'success'\n ? receiveDnsOther(other)\n : ({ type: SAVE_CHANGE_TO_DNS_OTHER_ERROR })),\n error: () => ({ type: SAVE_CHANGE_TO_DNS_OTHER_ERROR }),\n },\n },\n };\n}\n\nexport const changeDnsToHosting = () => ({\n type: CHANGE_TO_HOSTING_DNS,\n});\n\nconst receiveDnsHosting = data => ({\n type: SAVE_CHANGE_TO_DNS_HOSTING_SUCCESS,\n hosting: data,\n});\n\nexport function saveDnsHosting(domainId, hosting) {\n return {\n [CALL_API]: {\n authenticated: true,\n endpoint: DNS_DETAILS(domainId),\n method: 'PUT',\n body: { hostingId: hosting.id },\n actionTypes: {\n request: () => ({ type: SAVE_CHANGE_TO_DNS_HOSTING_REQUEST }),\n success: ({ data }) => (data.result === 'success'\n ? receiveDnsHosting(hosting)\n : ({ type: SAVE_CHANGE_TO_DNS_HOSTING_ERROR })),\n error: () => ({ type: SAVE_CHANGE_TO_DNS_HOSTING_ERROR }),\n },\n },\n };\n}\n\nexport const updateDomainDnsState = (dnsState, domainId) => (dispatch, getState) => {\n const { dnsList: stateDomains } = getState();\n const stateToFindDnsDomain = dnsState === 'dnsOk' ? 'dnsMissing' : 'dnsOk';\n const indexItem = stateDomains.domains[stateToFindDnsDomain].findIndex(item => item.id === domainId);\n\n if (indexItem !== -1) {\n stateDomains.domains[dnsState].push(stateDomains.domains[stateToFindDnsDomain][indexItem]);\n stateDomains.domains[stateToFindDnsDomain].splice(indexItem, 1);\n }\n\n return dispatch(({\n type: CHANGE_DNS_DOMAIN_STATE,\n stateDomains,\n }));\n};\n\nexport const setChosenDomain = domain => ({\n type: SET_CHOSEN_DOMAIN,\n payload: { domain },\n});\n","import { path } from 'ramda';\nimport {\n FORCE_DNS_LOADING_STATUS,\n ERROR_DNS_ZONE_MANAGER_ADD_RECORD,\n REQUEST_DNS_ZONE_MANAGER_ADD_RECORD,\n RECEIVE_DNS_ZONE_MANAGER_ADD_RECORD,\n RECEIVE_DNS_ZONE_MANAGER_EDIT_RECORD,\n REQUEST_DNS_ZONE_MANAGER_EDIT_RECORD,\n ERROR_DNS_ZONE_MANAGER_EDIT_RECORD,\n RECEIVE_DNS_ZONE_MANAGER_DELETE_RECORD,\n ERROR_DNS_ZONE_MANAGER_DELETE_RECORD,\n REQUEST_DNS_ZONE_MANAGER_DELETE_RECORD,\n REQUEST_DNS_ZONE_MANAGER_GET_RECORD,\n RECEIVE_DNS_ZONE_MANAGER_GET_RECORD,\n ERROR_DNS_ZONE_MANAGER_GET_RECORD,\n} from '@/redux/actions/actionsTypes';\nimport { CALL_API } from '@/middleware/api';\nimport { DNS_ZONE_MANAGER } from '@/config/api';\nimport { COUNTRY } from '@/config';\n\nexport const receiveAddRecord = data => ({\n type: RECEIVE_DNS_ZONE_MANAGER_ADD_RECORD,\n data,\n});\n\nexport const handleError = (data, type) => {\n const errors = path(['response', 'data', 'errors'], data);\n return ({\n type,\n data: errors,\n });\n};\n\nexport const requestAddRecord = data => async (dispatch, getState) => {\n const { dnsDetails, summary } = getState();\n const { details } = dnsDetails;\n\n let hostingSelected = null;\n if (details.dbData && details.dbData.hosting) {\n hostingSelected = details.nameserver.hosting;\n } else {\n hostingSelected = details.availableHostings.find(item => item.domain === details.domainName);\n }\n\n return dispatch({\n [CALL_API]: {\n endpoint: DNS_ZONE_MANAGER(details.domainName.replace(/ /g, '')),\n method: 'POST',\n authorizationType: 'jwt',\n body: data,\n customHeaders: details.native\n ? {\n 'X-NameServer-Host': details.nameserver.native.hostname,\n 'X-Brand': COUNTRY,\n 'X-Client-ID': summary.id,\n }\n : {\n 'X-Account-ID': hostingSelected.id,\n 'X-Brand': COUNTRY,\n 'X-Client-ID': summary.id,\n },\n actionTypes: {\n request: () => ({ type: REQUEST_DNS_ZONE_MANAGER_ADD_RECORD }),\n success: response => receiveAddRecord(response),\n error: response => handleError(response, ERROR_DNS_ZONE_MANAGER_ADD_RECORD),\n },\n },\n });\n};\n\nexport const receiveEditRecord = data => ({\n type: RECEIVE_DNS_ZONE_MANAGER_EDIT_RECORD,\n data,\n});\n\nexport const requestEditRecord = data => (dispatch, getState) => {\n const { dnsDetails, summary } = getState();\n const { details } = dnsDetails;\n\n let hostingSelected = null;\n if (details.dbData && details.dbData.hosting) {\n hostingSelected = details.nameserver.hosting;\n } else {\n hostingSelected = details.availableHostings.find(item => item.domain === details.domainName);\n }\n\n\n return dispatch({\n [CALL_API]: {\n endpoint: `${DNS_ZONE_MANAGER(details.domainName.replace(/ /g, ''))}/${data.line}`,\n method: 'PATCH',\n authorizationType: 'jwt',\n body: data,\n customHeaders: details.native\n ? {\n 'X-NameServer-Host': details.nameserver.native.hostname,\n 'X-Brand': COUNTRY,\n 'X-Client-ID': summary.id,\n }\n : {\n 'X-Account-ID': hostingSelected.id,\n 'X-Brand': COUNTRY,\n 'X-Client-ID': summary.id,\n },\n actionTypes: {\n request: () => ({ type: REQUEST_DNS_ZONE_MANAGER_EDIT_RECORD }),\n success: response => receiveEditRecord(response),\n error: response => handleError(response, ERROR_DNS_ZONE_MANAGER_EDIT_RECORD),\n },\n },\n });\n};\n\nexport const receiveDeleteRecord = data => ({\n type: RECEIVE_DNS_ZONE_MANAGER_DELETE_RECORD,\n data,\n});\n\nexport const requestDeleteRecord = data => (dispatch, getState) => {\n const { dnsDetails, summary } = getState();\n const { details } = dnsDetails;\n\n let hostingSelected = null;\n if (details.dbData && details.dbData.hosting) {\n hostingSelected = details.nameserver.hosting;\n } else {\n hostingSelected = details.availableHostings.find(item => item.domain === details.domainName);\n }\n\n\n return dispatch({\n [CALL_API]: {\n endpoint: `${DNS_ZONE_MANAGER(details.domainName.replace(/ /g, ''))}/${data.line}`,\n method: 'DELETE',\n authorizationType: 'jwt',\n customHeaders: details.native\n ? {\n 'X-NameServer-Host': details.nameserver.native.hostname,\n 'X-Brand': COUNTRY,\n 'X-Client-ID': summary.id,\n }\n : {\n 'X-Account-ID': hostingSelected.id,\n 'X-Brand': COUNTRY,\n 'X-Client-ID': summary.id,\n },\n actionTypes: {\n request: () => ({ type: REQUEST_DNS_ZONE_MANAGER_DELETE_RECORD }),\n success: response => receiveDeleteRecord(response),\n error: () => ({ type: ERROR_DNS_ZONE_MANAGER_DELETE_RECORD }),\n },\n },\n });\n};\n\nexport const receiveGetRecord = data => ({\n type: RECEIVE_DNS_ZONE_MANAGER_GET_RECORD,\n data,\n});\n\nexport const requestGetRecord = data => async (dispatch, getState) => {\n const { dnsDetails, summary } = getState();\n const { details } = dnsDetails;\n\n let hostingSelected = null;\n if (details.dbData.hosting) {\n hostingSelected = details.nameserver.hosting;\n } else {\n hostingSelected = details.availableHostings.find(item => item.domain === details.domainName);\n }\n\n return dispatch({\n [CALL_API]: {\n endpoint: DNS_ZONE_MANAGER(details.domainName.replace(/ /g, '')),\n method: 'GET',\n authorizationType: 'jwt',\n body: data,\n customHeaders: details.native\n ? {\n 'X-NameServer-Host': details.nameserver.native.hostname,\n 'X-Brand': COUNTRY,\n 'X-Client-ID': summary.id,\n }\n : {\n 'X-Account-ID': hostingSelected.id,\n 'X-Brand': COUNTRY,\n 'X-Client-ID': summary.id,\n },\n actionTypes: {\n request: () => ({ type: REQUEST_DNS_ZONE_MANAGER_GET_RECORD }),\n success: response => receiveGetRecord(response),\n error: () => ({ type: ERROR_DNS_ZONE_MANAGER_GET_RECORD }),\n },\n },\n });\n};\n\nexport const forceDnsLoadingStatus = bool => ({\n type: FORCE_DNS_LOADING_STATUS,\n payload: { bool },\n});\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, {\n createContext, useState, useEffect, useRef,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { useSelector, useDispatch } from 'react-redux';\nimport {\n path, findIndex, propEq, isNil, find,\n} from 'ramda';\nimport { withI18n } from 'react-i18next';\nimport {\n requestGetRecord, requestAddRecord, requestDeleteRecord, requestEditRecord,\n} from '@/redux/actions/dnsZoneManager';\nimport {\n ERROR_DNS_ZONE_MANAGER_ADD_RECORD,\n RECEIVE_DNS_ZONE_MANAGER_ADD_RECORD,\n RECEIVE_DNS_ZONE_MANAGER_DELETE_RECORD,\n ERROR_DNS_ZONE_MANAGER_DELETE_RECORD,\n RECEIVE_DNS_ZONE_MANAGER_EDIT_RECORD,\n ERROR_DNS_ZONE_MANAGER_EDIT_RECORD,\n RECEIVE_DNS_ZONE_MANAGER_GET_RECORD,\n ERROR_DNS_ZONE_MANAGER_GET_RECORD,\n} from '@/redux/actions/actionsTypes';\nimport { COUNTRY } from '@/config';\nimport {\n SUPPORT_ARTICLE_DNS_REGISTROBR,\n SUPPORT_ARTICLE_DNS_GODADDY,\n SUPPORT_ARTICLE_DNS_KINGHOST,\n SUPPORT_ARTICLE_DNS_WEBEMPRESA,\n SUPPORT_ARTICLE_DNS_COLOMBIAHOSTING,\n} from '@/config/urls/supportUrls';\nimport { commonActions } from '@/redux/modules';\n\nexport const DNSContext = createContext();\n\nlet typedFilterTimeout = null;\n\nconst DNSContextProvider = (props) => {\n const { t, children, planStatus } = props;\n const dispatch = useDispatch();\n const domainName = useSelector((state) => {\n const domainPath = path(['dnsDetails', 'details', 'domainName'], state);\n return domainPath ? domainPath.replace(/ /g, '') : '';\n });\n const recordTypes = useSelector(state => state.dnsZoneManager.recordTypes);\n const loading = useSelector(state => state.dnsZoneManager.loading);\n const dnsListLoading = useSelector(state => state.dnsList.loading);\n const details = useSelector(state => state.dnsDetails.details);\n const recordedDnsItems = useSelector(state => state.dnsZoneManager.recordedDnsItems);\n const tableColumns = ['type', 'name', 'class', 'ttl', 'address'];\n const [clearedRecordedItems, setClearedRecordedItems] = useState([]);\n const [renderedRecordedItems, setRenderedRecordedItems] = useState(recordedDnsItems);\n const [showExcludeModalConfirmation, setShowExcludeModalConfirmation] = useState(false);\n const [excludeRecordedDnsItem, setExcludeRecordedDnsItem] = useState(null);\n const [toggleAddRecordForm, setToggleAddRecordForm] = useState(false);\n const [dnsFilterOptions, setDnsFilterOptions] = useState([]);\n const [interactedWithFilterOptions, setInteractedWithFilterOptions] = useState(false);\n const [mobileListAmount, setMobileListAmount] = useState(5);\n const mobileItemRef = useRef();\n const [typedFilterData, setTypedFilterData] = useState('');\n const [showPointToModal, setShowPointToModal] = useState(false);\n const [hostingSelected, setHostingSelected] = useState(null);\n const [couldConnectWithServer, setCouldConnectWithServer] = useState(true);\n const [otherProviderLinks, setOtherProviderLinks] = useState(null);\n const [featureTogglesZoneManager, setFeatureTogglesZoneManager] = useState({\n hostingCpanel: false,\n hostingWhm: false,\n other: false,\n native: false,\n });\n const [lastInteracted, setLastInteracted] = useState(null);\n\n const handleLoadMoreMobile = () => {\n const top = mobileItemRef.current.offsetTop;\n window.scrollTo({\n top: top + 233,\n left: 0,\n behavior: 'smooth',\n });\n setMobileListAmount(mobileListAmount + 5);\n };\n\n const handleSetSelectedFilter = (idx, recordType) => {\n let newFilters = [];\n newFilters = [...dnsFilterOptions];\n\n if (newFilters[idx].name === t('dns.zoneManager.recordList.allFiltersLabel')) {\n newFilters.map((filter) => {\n const newFilter = filter;\n newFilter.active = false;\n newFilters[idx].active = true;\n return newFilter;\n });\n } else {\n const allItemsPosition = findIndex(propEq('name', t('dns.zoneManager.recordList.allFiltersLabel')), newFilters);\n newFilters[allItemsPosition].active = false;\n newFilters[idx].active = !recordType.active;\n }\n\n let allAreDisbled = true;\n newFilters.forEach((item) => {\n if (item.active === true) {\n allAreDisbled = false;\n }\n });\n\n if (allAreDisbled) {\n newFilters[0].active = true;\n }\n\n setInteractedWithFilterOptions(true);\n setDnsFilterOptions(newFilters);\n };\n\n const handleErrors = (response, errrorMethod, lastSubmited) => {\n const errors = response.data;\n errors.forEach((error) => {\n if (error.code) {\n let splittedError = error.code.split('.');\n splittedError = splittedError.splice(1, splittedError.length - 1);\n let errorPath = '';\n splittedError.forEach((errorBlock) => {\n errorPath = errorPath === '' ? `${errorBlock}` : `${errorPath}.${errorBlock}`;\n });\n const hasMessage = t(`dns.zoneManager.errorCode.${errorPath}`) !== `dns.zoneManager.errorCode.${errorPath}`;\n if (hasMessage) {\n dispatch(commonActions.notifications.set({ label: t(`dns.zoneManager.errorCode.${errorPath}`), type: 'error' }));\n } else {\n if (errorPath === 'name.unique') {\n let errorMessage = '';\n if (lastSubmited.type === 'CNAME') {\n errorMessage = `${t('dns.zoneManager.errorCode.name.unique_3')}`;\n } else {\n errorMessage = `${t('dns.zoneManager.errorCode.name.unique_1')} ${lastSubmited.type} ${t('dns.zoneManager.errorCode.name.unique_2')}`;\n }\n dispatch(commonActions.notifications.set({ label: errorMessage, type: 'error' }));\n return;\n }\n if (errorPath === 'unique.domain') {\n dispatch(commonActions.notifications.set({ label: t(`dns.zoneManager.${errrorMethod}.errorMessageDomain`), type: 'error' }));\n return;\n }\n if (planStatus === 'Terminated') {\n dispatch(commonActions.notifications.set({ label: t('dns.zoneManager.planStatusCancelledZoneDNS'), type: 'error' }));\n } else {\n dispatch(commonActions.notifications.set({ label: t(`dns.zoneManager.${errrorMethod}.errorMessage`), type: 'error' }));\n }\n }\n } else {\n dispatch(commonActions.notifications.set({ label: t(`dns.zoneManager.${errrorMethod}.errorMessage`), type: 'error' }));\n }\n });\n };\n\n const getListRecords = () => {\n dispatch(requestGetRecord()).then((response) => {\n if (response.type === RECEIVE_DNS_ZONE_MANAGER_GET_RECORD) {\n setCouldConnectWithServer(true);\n } else if (response.type === ERROR_DNS_ZONE_MANAGER_GET_RECORD) {\n setCouldConnectWithServer(false);\n }\n });\n };\n\n const handleSubmit = (e, formData, editing, keepEditing) => {\n e.preventDefault();\n const newFormData = { ...formData };\n newFormData.ttl = parseInt(newFormData.ttl, 10);\n\n if (newFormData.name === '@') {\n newFormData.name = `${domainName}`;\n }\n\n const hasDomain = newFormData.name.includes(domainName);\n\n const lastCharIsDot = newFormData.name[newFormData.name.length - 1] === '.';\n if (hasDomain) {\n newFormData.name = lastCharIsDot ? newFormData.name.substring(0, newFormData.name.length - 1) : newFormData.name;\n } else {\n newFormData.name = lastCharIsDot ? `${newFormData.name}${domainName}` : `${newFormData.name}.${domainName}`;\n }\n\n if (formData.type === 'CAA') {\n newFormData.flag = parseInt(newFormData.flag, 10);\n delete newFormData.address;\n }\n\n if (formData.type === 'A' || formData.type === 'AAAA') {\n delete newFormData.flag;\n delete newFormData.tag;\n delete newFormData.value;\n }\n\n if (formData.type === 'MX') {\n newFormData.preference = parseInt(newFormData.preference, 10);\n }\n\n if (formData.type !== 'CAA') {\n delete newFormData.flag;\n delete newFormData.tag;\n delete newFormData.value;\n } else {\n newFormData.flag = parseInt(newFormData.flag, 10);\n delete newFormData.address;\n }\n\n if (formData.type === 'SRV') {\n newFormData.priority = parseInt(newFormData.priority, 10);\n newFormData.port = parseInt(newFormData.port, 10);\n newFormData.weight = parseInt(newFormData.weight, 10);\n }\n\n if (loading) {\n return;\n }\n\n setLastInteracted(newFormData);\n\n if (editing) {\n dispatch(requestEditRecord(newFormData)).then((response) => {\n keepEditing(false);\n if (response.type === RECEIVE_DNS_ZONE_MANAGER_EDIT_RECORD) {\n dispatch(commonActions.notifications.set({ label: t('dns.zoneManager.editRecord.successMessage'), type: 'success' }));\n getListRecords();\n } else if (response.type === ERROR_DNS_ZONE_MANAGER_EDIT_RECORD) {\n handleErrors(response, 'editRecord', newFormData);\n }\n });\n } else {\n dispatch(requestAddRecord(newFormData)).then((response) => {\n if (response.type === RECEIVE_DNS_ZONE_MANAGER_ADD_RECORD) {\n dispatch(commonActions.notifications.set({ label: t('dns.zoneManager.addRecord.successMessage'), type: 'success' }));\n getListRecords();\n } else if (response.type === ERROR_DNS_ZONE_MANAGER_ADD_RECORD) {\n handleErrors(response, 'addRecord', newFormData);\n }\n });\n }\n };\n\n const confirmDeletion = () => {\n dispatch(requestDeleteRecord(excludeRecordedDnsItem)).then((response) => {\n if (response.type === RECEIVE_DNS_ZONE_MANAGER_DELETE_RECORD) {\n dispatch(commonActions.notifications.set({ label: t('dns.zoneManager.excludeRecord.successMessage'), type: 'success' }));\n getListRecords();\n setLastInteracted(excludeRecordedDnsItem);\n setShowExcludeModalConfirmation(false);\n } else if (response.type === ERROR_DNS_ZONE_MANAGER_DELETE_RECORD) {\n dispatch(commonActions.notifications.set({ label: t('dns.zoneManager.excludeRecord.errorMessage'), type: 'error' }));\n setShowExcludeModalConfirmation(false);\n }\n });\n };\n\n const removeSpecificTypes = (list) => {\n const types = ['SOA', 'NS'];\n const newList = [...list].filter(item => !types.includes(item.type));\n newList.sort((a, b) => (b.line - a.line));\n return newList;\n };\n\n const filterByOptions = () => {\n let newRecordedDnsItems = [...recordedDnsItems].filter((dnsItem) => {\n let isFiltered = false;\n dnsFilterOptions.forEach((filterOption) => {\n if (filterOption.active) {\n if (filterOption.name === t('dns.zoneManager.recordList.allFiltersLabel')) {\n isFiltered = true;\n } else if (dnsItem.type === filterOption.name) {\n isFiltered = true;\n }\n }\n });\n return isFiltered;\n });\n\n newRecordedDnsItems = removeSpecificTypes(newRecordedDnsItems);\n return newRecordedDnsItems;\n };\n\n const filterByTypedData = (obj) => {\n const { list, value } = obj;\n const newList = [...list].filter((item) => {\n const string = JSON.stringify(item);\n const itemHasTerm = string.indexOf(value) > -1;\n return itemHasTerm;\n });\n\n return newList;\n };\n\n const handleChangeTypedFilterData = (value, list) => {\n if (list) {\n let newRecordedDnsItems = filterByOptions();\n newRecordedDnsItems = filterByTypedData({ list: newRecordedDnsItems, value });\n return newRecordedDnsItems;\n }\n\n\n setTypedFilterData(value);\n\n /**\n * clearTimeout prevents filter functions to be called.\n * Those functions will be called only after the user finish typing the searchTearm.\n *\n * O clearTimeout impede que as funções de filtros sejam invocadas.\n * As funções de filtro são executadas somente após o usuário terminar de digitiar o termo de busca.\n */\n clearTimeout(typedFilterTimeout);\n typedFilterTimeout = setTimeout(() => {\n let newRecordedDnsItems = filterByOptions();\n newRecordedDnsItems = filterByTypedData({ list: newRecordedDnsItems, value });\n setRenderedRecordedItems(newRecordedDnsItems);\n }, 500);\n };\n\n const gettingFeatureToggles = () => {\n const isAlphaZoneManagerHostingCpanel = true;\n const isAdminAlphaZoneManagerHostingCpanel = false;\n\n const isAlphaZoneManagerHostingWhm = false;\n const isAdminAlphaZoneManagerHostingWh = false;\n\n const isAlphaZoneManagerNative = true;\n const isAdminAlphaZoneManagerNative = false;\n\n const toggles = {\n hostingCpanel: isAlphaZoneManagerHostingCpanel || isAdminAlphaZoneManagerHostingCpanel, // Hosting cpanel\n hostingWhm: isAlphaZoneManagerHostingWhm || isAdminAlphaZoneManagerHostingWh, // Hosting whm\n other: false, // Other - Must always be false\n native: isAlphaZoneManagerNative || isAdminAlphaZoneManagerNative, // Reservado\n };\n\n setFeatureTogglesZoneManager(toggles);\n };\n\n const validatingFeatureToggles = (hasDbData, hostingSelected) => {\n let featureToggleIsOn = false;\n if (hasDbData) {\n Object.keys(hasDbData).forEach((dnsOption) => {\n if (hasDbData[dnsOption] === true) {\n if (dnsOption === 'hosting') {\n if (hostingSelected) {\n const isCpanel = hostingSelected.type !== 'reselleraccount';\n const isWhm = hostingSelected.type === 'reselleraccount';\n\n if (isCpanel) {\n featureToggleIsOn = featureTogglesZoneManager.hostingCpanel;\n }\n\n if (isWhm) {\n featureToggleIsOn = featureTogglesZoneManager.hostingWhm;\n }\n }\n } else {\n featureToggleIsOn = featureTogglesZoneManager[dnsOption];\n }\n }\n });\n }\n\n return featureToggleIsOn;\n };\n\n useEffect(() => {\n const typesArray = [];\n typesArray.push({ name: t('dns.zoneManager.recordList.allFiltersLabel'), active: true });\n\n recordTypes.forEach((recordType) => {\n typesArray.push({ name: recordType, active: false });\n });\n setDnsFilterOptions(typesArray);\n\n let otherProvidersHelpLink = [\n { url: SUPPORT_ARTICLE_DNS_REGISTROBR, name: 'RegistroBR', country: { br: true } },\n {\n url: SUPPORT_ARTICLE_DNS_GODADDY,\n name: 'GoDaddy',\n country: {\n br: true, mx: true, es: true, co: true,\n },\n },\n { url: SUPPORT_ARTICLE_DNS_KINGHOST, name: 'KingHost', country: { br: true } },\n { url: SUPPORT_ARTICLE_DNS_WEBEMPRESA, name: 'Web Empresa', country: { mx: true, es: true, co: true } },\n { url: SUPPORT_ARTICLE_DNS_COLOMBIAHOSTING, name: 'Colombia Hosting', country: { mx: true, es: true, co: true } },\n ];\n\n otherProvidersHelpLink = otherProvidersHelpLink.filter((link) => {\n const shouldDisplay = path([`${COUNTRY}`], link.country);\n return !isNil(shouldDisplay);\n });\n\n setOtherProviderLinks(otherProvidersHelpLink);\n gettingFeatureToggles();\n }, []);\n\n useEffect(() => {\n const hasDbData = details && details.dbData;\n let featureToggleIsOn = false;\n\n if (details.domainName) {\n let hostingSelected = null;\n if (details.dbData && details.dbData.hosting) {\n hostingSelected = details.availableHostings.find(item => item.id === details.nameserver.hosting.id);\n } else {\n hostingSelected = details.availableHostings.find(item => item.domain === details.domainName);\n }\n\n setHostingSelected(hostingSelected);\n\n featureToggleIsOn = validatingFeatureToggles(hasDbData, hostingSelected);\n }\n\n if ((featureToggleIsOn)) {\n getListRecords();\n }\n }, [details && details.dbData]);\n\n const filteringItems = (list) => {\n let typeIsActive = false;\n let filteredList = [...list];\n\n if (lastInteracted) {\n typeIsActive = find(propEq('name', lastInteracted.type), dnsFilterOptions).active;\n }\n\n if (typeIsActive) {\n filteredList = handleChangeTypedFilterData(typedFilterData, list);\n }\n\n if (!typeIsActive) {\n const newTypesArray = [...dnsFilterOptions].map((filterOption, idx) => {\n const newRecordType = { ...filterOption };\n newRecordType.active = idx === 0;\n return newRecordType;\n });\n\n setDnsFilterOptions(newTypesArray);\n setLastInteracted(null);\n }\n\n return filteredList;\n };\n\n useEffect(() => {\n const shouldFilter = typedFilterData !== '' || interactedWithFilterOptions;\n\n if (recordedDnsItems && recordedDnsItems.length > 0) {\n let newRecordedDnsItems = [...recordedDnsItems];\n newRecordedDnsItems = removeSpecificTypes(newRecordedDnsItems);\n setRenderedRecordedItems(shouldFilter ? filteringItems(newRecordedDnsItems) : newRecordedDnsItems);\n setClearedRecordedItems(newRecordedDnsItems);\n }\n }, [recordedDnsItems]);\n\n useEffect(() => {\n let newRecordedDnsItems = [...recordedDnsItems].filter((dnsItem) => {\n let isFiltered = false;\n dnsFilterOptions.forEach((filterOption) => {\n if (filterOption.active) {\n if (filterOption.name === t('dns.zoneManager.recordList.allFiltersLabel')) {\n isFiltered = true;\n } else if (dnsItem.type === filterOption.name) {\n isFiltered = true;\n }\n }\n });\n return isFiltered;\n });\n\n newRecordedDnsItems = removeSpecificTypes(newRecordedDnsItems);\n newRecordedDnsItems = filterByTypedData({ list: newRecordedDnsItems, value: typedFilterData });\n setRenderedRecordedItems(newRecordedDnsItems);\n }, [dnsFilterOptions]);\n\n const values = {\n details,\n dnsFilterOptions,\n handleSetSelectedFilter,\n dnsListLoading,\n loading,\n recordTypes,\n setDnsFilterOptions,\n setToggleAddRecordForm,\n toggleAddRecordForm,\n handleSubmit,\n tableColumns,\n renderedRecordedItems,\n showExcludeModalConfirmation,\n setShowExcludeModalConfirmation,\n excludeRecordedDnsItem,\n setExcludeRecordedDnsItem,\n confirmDeletion,\n mobileListAmount,\n setMobileListAmount,\n mobileItemRef,\n handleLoadMoreMobile,\n domainName,\n typedFilterData,\n setTypedFilterData,\n handleChangeTypedFilterData,\n showPointToModal,\n setShowPointToModal,\n hostingSelected,\n couldConnectWithServer,\n otherProviderLinks,\n clearedRecordedItems,\n featureTogglesZoneManager,\n };\n\n return (\n {children} \n );\n};\n\nDNSContextProvider.propTypes = {\n children: PropTypes.node,\n};\n\nDNSContextProvider.defaultProps = {\n children: null,\n};\n\nexport default withI18n()(DNSContextProvider);\n","const styles = theme => ({\n zoneTitle: {\n display: 'block',\n fontSize: 24,\n lineHeight: '22px',\n fontWeight: 300,\n marginBottom: 12,\n\n '& > span': {\n fontSize: 18,\n color: theme.color.dustyGgray,\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { Typography, withStyles } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport withWidth from '@material-ui/core/withWidth';\nimport styles from './styles';\n\nconst ZoneManager = ({\n classes, t,\n}) => (\n \n {t('dns.zoneManager.title')}\n \n);\n\nexport default withI18n()(withWidth()(withStyles(styles, { withTheme: true })(ZoneManager)));\n","const styles = theme => ({\n explanation: {\n alignItems: 'center',\n color: theme.color.dustyGgray,\n display: 'block',\n fontSize: 16,\n lineHeight: '19px',\n marginBottom: 8,\n\n '& > span': {\n borderBottom: `1px dashed ${theme.color.indigo}`,\n color: theme.color.indigo,\n fontWeight: 500,\n },\n\n '& > svg': {\n fill: theme.color.indigo,\n width: 16,\n },\n },\n knowMore: {\n marginBottom: 12,\n },\n explanationLink: {\n color: theme.color.indigo,\n fontWeight: 500,\n },\n customPopper: {\n opacity: 1,\n },\n customTooltip: {\n backgroundColor: theme.color.doveGray,\n borderRadius: 0,\n fontSize: 12,\n lineHeight: '14px',\n textAlign: 'center',\n },\n});\n\nexport default styles;\n","import { Typography, withStyles } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport React from 'react';\nimport withWidth from '@material-ui/core/withWidth';\nimport { SUPPORT_ARTICLE_KNOW_MORE_DNS } from '@/config/urls/supportUrls';\nimport styles from './styles';\n\nconst ZoneManager = ({\n classes, t,\n}) => (\n \n);\n\nexport default withI18n()(withWidth()(withStyles(styles, { withTheme: true })(ZoneManager)));\n","const styles = theme => ({\n messageBlock: {\n alignItems: 'flex-start',\n border: `1px solid ${theme.color.havelockBlue}`,\n color: theme.color.tundora,\n display: 'inline-flex',\n fontSize: 12,\n lineHeight: '18px',\n maxWidth: 706,\n padding: '14px 18px',\n\n '& svg': {\n height: 18,\n marginRight: 6,\n width: 18,\n },\n },\n messageError: {\n border: `1px solid ${theme.color.valencia}`,\n },\n messageWrapper: {\n display: 'flex',\n flexWrap: 'wrap',\n\n '& > div, & > p': {\n display: 'block',\n width: '100%',\n },\n },\n messageText: {\n color: theme.color.tundora,\n fontSize: 12,\n lineHeight: '14px',\n marginBottom: 14,\n },\n linkList: {\n color: theme.color.indigo,\n fontSize: 14,\n lineHeight: '17px',\n margin: 0,\n marginBottom: 14,\n paddingLeft: 15,\n textDecoration: 'underline',\n\n '& a': {\n color: theme.color.indigo,\n },\n },\n messageLink: {\n color: theme.color.indigo,\n },\n loaderWrapper: {\n alignItems: 'center',\n display: 'flex',\n flex: '1',\n justifyContent: 'center',\n padding: '14px 0',\n },\n});\n\nexport default styles;\n","import React, {\n useContext,\n useEffect,\n} from 'react';\nimport { Info, Warning } from '@material-ui/icons/';\nimport { Typography, withStyles, CircularProgress } from '@material-ui/core';\nimport { withI18n, Trans } from 'react-i18next';\nimport withWidth from '@material-ui/core/withWidth';\nimport { useDispatch } from 'react-redux';\nimport { DNSContext } from '@/contexts/DNS/context';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport { SUPPORT_ARTICLE_DNS_THROUGH_WHM, SUPPORT_ARTICLE_ZONEMANAGER_CPANEL, SUPPORT_ARTICLE_ZONEMANAGER_WHM } from '@/config/urls/supportUrls';\nimport { forceDnsLoadingStatus } from '@/redux/actions/dnsZoneManager';\nimport styles from './styles';\n\nconst ZoneManager = ({\n classes,\n t,\n}) => {\n const {\n couldConnectWithServer,\n details,\n dnsListLoading,\n featureTogglesZoneManager,\n hostingSelected,\n loading,\n otherProviderLinks,\n } = useContext(DNSContext);\n\n const dispatch = useDispatch();\n\n useEffect(() => {\n dispatch(forceDnsLoadingStatus(false));\n }, [dispatch]);\n\n const cpanelToggleIsOnn = featureTogglesZoneManager.hostingCpanel;\n const whmToggleIsOnn = featureTogglesZoneManager.hostingWhm;\n const otherToggleIsOnn = featureTogglesZoneManager.other;\n\n const selectedHostIsFromCpanel = details.dbData.hosting && (hostingSelected && hostingSelected.type !== 'reselleraccount');\n const selectedHostIsFromWhm = details.dbData.hosting && (hostingSelected && hostingSelected.type === 'reselleraccount');\n const selectedHostIsFromOther = details.dbData.other;\n\n const hasCpanelMessage = !cpanelToggleIsOnn && selectedHostIsFromCpanel;\n const hasWhmMessage = !whmToggleIsOnn && selectedHostIsFromWhm;\n const hasOtherMessage = !otherToggleIsOnn && selectedHostIsFromOther;\n\n const hasErrorMessage = !couldConnectWithServer && (!hasCpanelMessage && !hasWhmMessage && !hasOtherMessage);\n\n if (loading || dnsListLoading) {\n return (\n \n
\n );\n }\n\n return (\n \n\n {hasErrorMessage\n ?
\n :
\n }\n\n {hasCpanelMessage\n && (\n
\n
\n \n <>0\n 1 \n \n \n\n
\n {t('dns.messages.messageHosting_2')}\n \n\n
\n {t('dns.messages.createTicket')}\n \n
\n )\n }\n\n {hasWhmMessage\n && (\n
\n )\n }\n\n {hasOtherMessage\n && (\n
\n
\n {t('dns.messages.messageOther')}\n \n\n
\n {t('dns.messages.messageOtherSeeMore')}\n \n\n
\n {otherProviderLinks.map((link, idx) => (\n {link.name} \n\n
\n \n <>0\n 1 \n \n \n
\n )\n }\n\n {hasErrorMessage\n && (\n
\n
\n {t('dns.messages.messageError')}\n \n\n
\n {t('dns.messages.createTicket')}\n \n
\n )\n }\n
\n \n {children}\n \n ,\n document.body,\n);\n\n\nexport default withStyles(styles)(PortalAddDNS);\n","import React from 'react';\nimport MaskedInput from 'react-text-mask';\n\n\nfunction MaskIpv4(props) {\n const { inputRef, ...other } = props;\n\n const optionsConfig = {\n guide: false,\n placeholderChar: '\\u2000',\n mask: (value) => {\n let result = [];\n const chunks = value.split('.');\n\n for (let i = 0; i < 4; i += 1) {\n const chunk = (chunks[i] || '').replace(/_/gi, '');\n if (chunks.length > i + 1) {\n result.push(...new Array(chunk.length).fill(/\\d/), '.');\n } else if (chunk === '') {\n result.push(/\\d/, /\\d/, /\\d/, '.');\n } else if (+chunk === 0) {\n result.push(/\\d/, '.');\n } else if (\n chunks.length < 4\n || (chunk.length < 3 && chunks[i].indexOf('_') !== -1)\n ) {\n if (\n (chunk.length < 2 && +`${chunk}00` > 255)\n || (chunk.length < 3 && +`${chunk}0` > 255)\n ) {\n result.push(/\\d/, /\\d/, '.');\n } else {\n result.push(/\\d/, /\\d/, /\\d/, '.');\n }\n } else {\n result.push(...new Array(chunk.length).fill(/\\d/), '.');\n }\n }\n\n result = result.slice(0, -1);\n return result;\n },\n pipe: (value) => {\n if (value === '.' || value.endsWith('..')) return false;\n const parts = value.split('.');\n if (\n parts.length > 4\n || parts.some(part => part === '00' || part < 0 || part > 255)\n ) {\n return false;\n }\n return value;\n },\n };\n\n return (\n {\n inputRef(ref ? ref.inputElement : null);\n }}\n />\n );\n}\n\nexport default MaskIpv4;\n","const styles = theme => ({\n textField: {\n fontSize: '14px',\n width: '100%',\n '& fieldset': {\n borderRadius: '2px',\n },\n '& input[type=\"number\"]::-webkit-outer-spin-button, input[type=\"number\"]::-webkit-inner-spin-button': {\n '-webkit-appearance': 'none',\n margin: 0,\n },\n '& input[type=\"number\"]': {\n '-moz-appearance': 'textfield',\n },\n '& label': {\n transform: 'translate(14px, 10px) scale(1)',\n zIndex: 1,\n fontSize: 14,\n },\n '& input': {\n padding: 8,\n fontSize: 14,\n },\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n '& fieldset': {\n width: '100%',\n },\n },\n [theme.breakpoints.up('md')]: {\n margin: '0 12px 0px 0px',\n },\n },\n cssLabel: {\n transform: 'translate(14px, 10px) scale(1)',\n '&$cssFocused': {\n color: theme.color.chambray,\n },\n },\n cssOutlinedInput: {\n '& input': {\n padding: '10px 14px 6px 14px',\n fontSize: '14px',\n },\n '&$cssFocused $notchedOutline': {\n border: `1px solid ${theme.color.chambray}`,\n },\n },\n cssFocused: {},\n notchedOutline: {},\n});\n\nexport default styles;\n","import React, { useContext } from 'react';\nimport { withI18n } from 'react-i18next';\nimport { TextField, withStyles } from '@material-ui/core';\nimport MaskIpv4 from '@/components/Fields/InputMasks/MaskIpv4';\nimport { DNSContext } from '@/contexts/DNS/context';\nimport styles from './styles';\n\nconst TypeAValueField = ({\n classes, t, formData, onHandleChangeInput, isInvalidBlock,\n}) => {\n const { loading } = useContext(DNSContext);\n\n return (\n onHandleChangeInput(e.target)}\n name=\"address\"\n placeholder=\"___.___.___.___\"\n variant=\"outlined\"\n required\n className={classes.textField}\n InputLabelProps={{\n classes: {\n root: classes.cssLabel,\n focused: classes.cssFocused,\n },\n }}\n InputProps={{\n classes: {\n root: classes.cssOutlinedInput,\n focused: classes.cssFocused,\n notchedOutline: classes.notchedOutline,\n },\n inputComponent: MaskIpv4,\n inputProps: {\n 'data-testid': 'zoneManagerIpv4Field',\n },\n }}\n error={formData.address.length > 0 && isInvalidBlock}\n helperText={(formData.address.length > 0 && isInvalidBlock) ? t('dns.zoneManager.addRecord.form.helperText.typeA') : null}\n />\n );\n};\n\nexport default (withI18n()(withStyles(styles)(TypeAValueField)));\n","const styles = theme => ({\n textField: {\n fontSize: '14px',\n width: '100%',\n '& fieldset': {\n borderRadius: '2px',\n },\n '& input[type=\"number\"]::-webkit-outer-spin-button, input[type=\"number\"]::-webkit-inner-spin-button': {\n '-webkit-appearance': 'none',\n margin: 0,\n },\n '& input[type=\"number\"]': {\n '-moz-appearance': 'textfield',\n },\n '& label': {\n transform: 'translate(14px, 10px) scale(1)',\n zIndex: 1,\n fontSize: 14,\n },\n '& input': {\n padding: 8,\n fontSize: 14,\n },\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n '& fieldset': {\n width: '100%',\n },\n },\n [theme.breakpoints.up('md')]: {\n margin: '0 12px 0px 0px',\n },\n },\n cssLabel: {\n transform: 'translate(14px, 10px) scale(1)',\n '&$cssFocused': {\n color: theme.color.chambray,\n },\n },\n cssOutlinedInput: {\n '& input': {\n padding: '10px 14px 6px 14px',\n fontSize: '14px',\n },\n '&$cssFocused $notchedOutline': {\n border: `1px solid ${theme.color.chambray}`,\n },\n },\n cssFocused: {},\n notchedOutline: {},\n});\n\nexport default styles;\n","import React, { useContext } from 'react';\nimport { withI18n } from 'react-i18next';\nimport { TextField, withStyles } from '@material-ui/core';\nimport { DNSContext } from '@/contexts/DNS/context';\nimport styles from './styles';\n\nconst TypeAAAAValueField = ({\n classes, t, formData, onHandleChangeInput,\n}) => {\n const { loading } = useContext(DNSContext);\n\n return (\n onHandleChangeInput(e.target)}\n name=\"address\"\n variant=\"outlined\"\n required\n className={classes.textField}\n InputLabelProps={{\n classes: {\n root: classes.cssLabel,\n focused: classes.cssFocused,\n },\n }}\n InputProps={{\n classes: {\n root: classes.cssOutlinedInput,\n focused: classes.cssFocused,\n notchedOutline: classes.notchedOutline,\n },\n inputProps: {\n 'data-testid': 'zoneManagerIpv6Field',\n },\n }}\n />\n );\n};\n\nexport default (withI18n()(withStyles(styles)(TypeAAAAValueField)));\n","const styles = theme => ({\n radioNoWrap: {\n flexWrap: 'nowrap',\n },\n textField: {\n fontSize: '14px',\n width: '100%',\n '& fieldset': {\n borderRadius: '2px',\n },\n '& input[type=\"number\"]::-webkit-outer-spin-button, input[type=\"number\"]::-webkit-inner-spin-button': {\n '-webkit-appearance': 'none',\n margin: 0,\n },\n '& input[type=\"number\"]': {\n '-moz-appearance': 'textfield',\n },\n '& label': {\n transform: 'translate(14px, 10px) scale(1)',\n zIndex: 1,\n fontSize: 14,\n },\n '& input': {\n padding: 8,\n fontSize: 14,\n },\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n '& fieldset': {\n width: '100%',\n },\n },\n [theme.breakpoints.up('md')]: {\n margin: '0 12px 0px 0px',\n },\n },\n radioGroup: {\n marginBottom: 15,\n '& legend': {\n fontSize: 14,\n position: 'absolute',\n top: -6,\n zIndex: 1,\n },\n },\n caaBlockWrapper: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n});\n\nexport default styles;\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, {\n useRef, useEffect, useState, useContext,\n} from 'react';\nimport { withI18n } from 'react-i18next';\nimport {\n withStyles, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel, TextField,\n} from '@material-ui/core';\nimport { DNSContext } from '@/contexts/DNS/context';\nimport styles from './styles';\n\n\nconst TypeCAAValueField = ({\n t, classes, formData, onHandleChangeInput, isInvalidBlock,\n}) => {\n const { loading } = useContext(DNSContext);\n\n const valueRef = useRef();\n const [errorMessage, setErrorMessage] = useState(null);\n\n useEffect(() => {\n if (isInvalidBlock) {\n if (formData.tag === 'iodef') {\n setErrorMessage(t('dns.zoneManager.addRecord.form.helperText.caaIodefValue'));\n } else {\n setErrorMessage(t('dns.zoneManager.addRecord.form.helperText.caaIssueValue'));\n }\n } else {\n setErrorMessage(null);\n }\n }, [formData, (formData && formData.tag), isInvalidBlock]);\n\n\n return (\n \n \n Flag \n onHandleChangeInput(e.target)}>\n \n \n\n \n Tag \n onHandleChangeInput(e.target)}>\n \n \n\n onHandleChangeInput(e.target)}\n name=\"value\"\n required\n variant=\"outlined\"\n className={classes.textField}\n InputLabelProps={{\n classes: {\n root: classes.cssLabel,\n focused: classes.cssFocused,\n },\n }}\n InputProps={{\n classes: {\n root: classes.cssOutlinedInput,\n focused: classes.cssFocused,\n notchedOutline: classes.notchedOutline,\n },\n inputProps: {\n maxLength: 255,\n ref: valueRef,\n 'data-testid': 'zoneManagerValueField',\n },\n }}\n error={isInvalidBlock}\n helperText={errorMessage}\n />\n
\n );\n};\n\nexport default (withI18n()(withStyles(styles)(TypeCAAValueField)));\n","import React from 'react';\nimport MaskedInput from 'react-text-mask';\n\n\nfunction IntegerMaskedInput(props) {\n const { inputRef, ...other } = props;\n\n const optionsConfig = {\n guide: false,\n mask: value => Array(value.length).fill(/^[0-9]+$/),\n };\n\n return (\n {\n inputRef(ref ? ref.inputElement : null);\n }}\n />\n );\n}\n\nexport default IntegerMaskedInput;\n","import React from 'react';\nimport MaskedInput from 'react-text-mask';\n\n\nfunction ZoneManagerSubdomainInputMask(props) {\n const { inputRef, ...other } = props;\n\n const optionsConfig = {\n guide: false,\n mask: value => Array(value.length).fill(/[A-Za-z0-9-@\\\\-\\\\.]/),\n };\n\n return (\n {\n inputRef(ref ? ref.inputElement : null);\n }}\n />\n );\n}\n\nexport default ZoneManagerSubdomainInputMask;\n","const styles = theme => ({\n textField: {\n fontSize: '14px',\n width: '100%',\n '& fieldset': {\n borderRadius: '2px',\n },\n '& input[type=\"number\"]::-webkit-outer-spin-button, input[type=\"number\"]::-webkit-inner-spin-button': {\n '-webkit-appearance': 'none',\n margin: 0,\n },\n '& input[type=\"number\"]': {\n '-moz-appearance': 'textfield',\n },\n '& label': {\n transform: 'translate(14px, 10px) scale(1)',\n zIndex: 1,\n fontSize: 14,\n },\n '& input': {\n padding: 8,\n fontSize: 14,\n },\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n '& fieldset': {\n width: '100%',\n },\n },\n [theme.breakpoints.up('md')]: {\n margin: '0 12px 0px 0px',\n },\n },\n MxBlockWrapper: {\n display: 'flex',\n flexWrap: 'wrap',\n ' & > div:first-child': {\n marginBottom: 15,\n },\n },\n});\n\nexport default styles;\n","import React, { useContext } from 'react';\nimport { withI18n } from 'react-i18next';\nimport {\n withStyles, TextField,\n} from '@material-ui/core';\nimport { DNSContext } from '@/contexts/DNS/context';\nimport IntegerMaskedInput from '@/components/Fields/InputMasks/IntegerMaskedInput';\nimport ZoneManagerSubdomainInputMask from '@/components/Fields/InputMasks/ZoneManagerSubdomainInputMask';\nimport styles from './styles';\n\n\nconst TypeCAAValueField = ({\n t, classes, formData, onHandleChangeInput, isInvalidDestination, isInvalidPriority,\n}) => {\n const { loading } = useContext(DNSContext);\n\n return (\n \n onHandleChangeInput(e.target)}\n name=\"preference\"\n required\n variant=\"outlined\"\n className={classes.textField}\n InputLabelProps={{\n classes: {\n root: classes.cssLabel,\n focused: classes.cssFocused,\n },\n }}\n placeholder={t('dns.zoneManager.addRecord.form.placeholder.preference')}\n InputProps={{\n inputComponent: IntegerMaskedInput,\n classes: {\n root: classes.cssOutlinedInput,\n focused: classes.cssFocused,\n notchedOutline: classes.notchedOutline,\n },\n inputProps: {\n maxLength: 5,\n 'data-testid': 'zoneManagerMxPriorityField',\n },\n }}\n error={isInvalidPriority}\n helperText={isInvalidPriority ? t('dns.zoneManager.addRecord.form.helperText.mxPriorityValue') : null}\n />\n\n onHandleChangeInput(e.target)}\n name=\"exchange\"\n required\n variant=\"outlined\"\n className={classes.textField}\n placeholder=\"Domínio Completo\"\n InputProps={{\n inputComponent: ZoneManagerSubdomainInputMask,\n inputProps: {\n maxLength: 255,\n 'data-testid': 'zoneManagerMxDestinationField',\n },\n }}\n error={isInvalidDestination}\n helperText={isInvalidDestination ? t('dns.zoneManager.addRecord.form.helperText.mxDestinationValue') : null}\n />\n\n
\n\n );\n};\n\nexport default (withI18n()(withStyles(styles)(TypeCAAValueField)));\n","const styles = theme => ({\n textField: {\n fontSize: '14px',\n width: '100%',\n\n '& > div': {\n padding: 8,\n },\n\n\n '& fieldset': {\n borderRadius: '2px',\n },\n '& input[type=\"number\"]::-webkit-outer-spin-button, input[type=\"number\"]::-webkit-inner-spin-button': {\n '-webkit-appearance': 'none',\n margin: 0,\n },\n '& input[type=\"number\"]': {\n '-moz-appearance': 'textfield',\n },\n '& label': {\n transform: 'translate(14px, 10px) scale(1)',\n zIndex: 1,\n fontSize: 14,\n },\n '& input': {\n padding: 8,\n fontSize: 14,\n },\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n '& fieldset': {\n width: '100%',\n },\n },\n [theme.breakpoints.up('md')]: {\n margin: '0 12px 0px 0px',\n },\n },\n TxtBlockWrapper: {\n display: 'flex',\n flexWrap: 'wrap',\n\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n },\n\n ' & > div:first-child': {\n marginBottom: 15,\n },\n },\n});\n\nexport default styles;\n","import React, { useContext } from 'react';\nimport { withI18n } from 'react-i18next';\nimport {\n withStyles, TextField,\n} from '@material-ui/core';\nimport { DNSContext } from '@/contexts/DNS/context';\nimport styles from './styles';\n\nconst TypeCAAValueField = ({\n t, classes, formData, onHandleChangeInput,\n}) => {\n const { loading } = useContext(DNSContext);\n return (\n \n onHandleChangeInput(e.target)}\n required\n value={formData.txt_data}\n variant=\"outlined\"\n InputProps={{\n inputProps: {\n 'data-testid': 'zoneManagerTxtTextField',\n },\n }}\n />\n
\n );\n};\n\nexport default (withI18n()(withStyles(styles)(TypeCAAValueField)));\n","const styles = theme => ({\n textField: {\n fontSize: '14px',\n width: '100%',\n '& fieldset': {\n borderRadius: '2px',\n },\n '& input[type=\"number\"]::-webkit-outer-spin-button, input[type=\"number\"]::-webkit-inner-spin-button': {\n '-webkit-appearance': 'none',\n margin: 0,\n },\n '& input[type=\"number\"]': {\n '-moz-appearance': 'textfield',\n },\n '& label': {\n transform: 'translate(14px, 10px) scale(1)',\n zIndex: 1,\n fontSize: 14,\n },\n '& input': {\n padding: 8,\n fontSize: 14,\n },\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n '& fieldset': {\n width: '100%',\n },\n },\n [theme.breakpoints.up('md')]: {\n margin: '0 12px 0px 0px',\n },\n },\n CnameBlockWrapper: {\n display: 'flex',\n flexWrap: 'wrap',\n ' & > div:first-child': {\n marginBottom: 15,\n },\n },\n});\n\nexport default styles;\n","import React, { useContext } from 'react';\nimport { withI18n } from 'react-i18next';\nimport {\n withStyles, TextField,\n} from '@material-ui/core';\nimport { DNSContext } from '@/contexts/DNS/context';\nimport styles from './styles';\n\nconst TypeCAAValueField = ({\n t,\n classes, formData, onHandleChangeInput, isInvalidDomain,\n}) => {\n const { loading } = useContext(DNSContext);\n\n return (\n \n onHandleChangeInput(e.target)}\n required\n value={formData.cname}\n variant=\"outlined\"\n InputProps={{\n inputProps: {\n maxLength: 255,\n 'data-testid': 'zoneManagerCnameValueField',\n },\n }}\n error={isInvalidDomain}\n helperText={isInvalidDomain ? t('dns.zoneManager.addRecord.form.helperText.cnameValueField') : null}\n />\n
\n );\n};\n\nexport default (withI18n()(withStyles(styles)(TypeCAAValueField)));\n","const styles = theme => ({\n textField: {\n fontSize: '14px',\n width: '100%',\n '& fieldset': {\n borderRadius: '2px',\n },\n '& input[type=\"number\"]::-webkit-outer-spin-button, input[type=\"number\"]::-webkit-inner-spin-button': {\n '-webkit-appearance': 'none',\n margin: 0,\n },\n '& input[type=\"number\"]': {\n '-moz-appearance': 'textfield',\n },\n '& label': {\n transform: 'translate(14px, 10px) scale(1)',\n zIndex: 1,\n fontSize: 14,\n },\n '& input': {\n padding: 8,\n fontSize: 14,\n },\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n '& fieldset': {\n width: '100%',\n },\n },\n [theme.breakpoints.up('md')]: {\n margin: '0 12px 0px 0px',\n },\n },\n caaBlockWrapper: {\n display: 'flex',\n flexWrap: 'wrap',\n\n '& > div': {\n marginBottom: 15,\n },\n\n '& > div:last-child': {\n marginBottom: 0,\n },\n\n '& p': {\n margin: '8px 0px 0px',\n },\n },\n});\n\nexport default styles;\n","import React, { useContext } from 'react';\nimport { withI18n } from 'react-i18next';\nimport {\n withStyles, TextField,\n} from '@material-ui/core';\nimport { DNSContext } from '@/contexts/DNS/context';\nimport IntegerMaskedInput from '@/components/Fields/InputMasks/IntegerMaskedInput';\nimport ZoneManagerSubdomainInputMask from '@/components/Fields/InputMasks/ZoneManagerSubdomainInputMask';\nimport styles from './styles';\n\n\nconst TypeCAAValueField = ({\n t,\n classes, formData, onHandleChangeInput,\n isInvalidPriority, isInvalidPort, isInvalidWeight, isInvalidDestination,\n}) => {\n const { loading } = useContext(DNSContext);\n\n return (\n \n\n onHandleChangeInput(e.target)}\n name=\"priority\"\n required\n variant=\"outlined\"\n className={classes.textField}\n InputLabelProps={{\n classes: {\n root: classes.cssLabel,\n focused: classes.cssFocused,\n },\n }}\n InputProps={{\n classes: {\n root: classes.cssOutlinedInput,\n focused: classes.cssFocused,\n notchedOutline: classes.notchedOutline,\n },\n inputComponent: IntegerMaskedInput,\n inputProps: {\n maxLength: 5,\n 'data-testid': 'zoneManagerSrvPriorityField',\n },\n }}\n error={isInvalidPriority}\n helperText={isInvalidPriority ? t('dns.zoneManager.addRecord.form.helperText.srvIntegerHelper') : null}\n />\n\n onHandleChangeInput(e.target)}\n name=\"port\"\n required\n variant=\"outlined\"\n className={classes.textField}\n InputLabelProps={{\n classes: {\n root: classes.cssLabel,\n focused: classes.cssFocused,\n },\n }}\n InputProps={{\n classes: {\n root: classes.cssOutlinedInput,\n focused: classes.cssFocused,\n notchedOutline: classes.notchedOutline,\n },\n inputComponent: IntegerMaskedInput,\n inputProps: {\n maxLength: 5,\n 'data-testid': 'zoneManagerSrvPortField',\n },\n }}\n error={isInvalidPort}\n helperText={isInvalidPort ? t('dns.zoneManager.addRecord.form.helperText.srvIntegerHelper') : null}\n />\n\n onHandleChangeInput(e.target)}\n name=\"weight\"\n required\n variant=\"outlined\"\n className={classes.textField}\n InputLabelProps={{\n classes: {\n root: classes.cssLabel,\n focused: classes.cssFocused,\n },\n }}\n InputProps={{\n classes: {\n root: classes.cssOutlinedInput,\n focused: classes.cssFocused,\n notchedOutline: classes.notchedOutline,\n },\n inputComponent: IntegerMaskedInput,\n inputProps: {\n maxLength: 5,\n 'data-testid': 'zoneManagerSrvWeightField',\n },\n }}\n error={isInvalidWeight}\n helperText={isInvalidWeight ? t('dns.zoneManager.addRecord.form.helperText.srvIntegerHelper') : null}\n />\n\n onHandleChangeInput(e.target)}\n name=\"target\"\n required\n variant=\"outlined\"\n className={classes.textField}\n InputLabelProps={{\n classes: {\n root: classes.cssLabel,\n focused: classes.cssFocused,\n },\n }}\n InputProps={{\n classes: {\n root: classes.cssOutlinedInput,\n focused: classes.cssFocused,\n notchedOutline: classes.notchedOutline,\n },\n inputComponent: ZoneManagerSubdomainInputMask,\n inputProps: {\n maxLength: formData.target[formData.target.length - 1] === '.' ? 254 : 253,\n 'data-testid': 'zoneManagerSrvDestinationField',\n },\n }}\n error={isInvalidDestination}\n helperText={isInvalidDestination ? t('dns.zoneManager.addRecord.form.helperText.srvDomainHelper') : null}\n />\n\n
\n );\n};\n\nexport default (withI18n()(withStyles(styles)(TypeCAAValueField)));\n","import React from 'react';\nimport MaskedInput from 'react-text-mask';\nimport PropTypes from 'prop-types';\n\n\nconst NumberMaskedInput = ({ inputRef, maxLength, ...rest }) => (\n rawValue.trim()}\n mask={new Array(maxLength).fill(/\\d/)}\n />\n);\n\nNumberMaskedInput.propTypes = {\n inputRef: PropTypes.func.isRequired,\n maxLength: PropTypes.number.isRequired,\n};\n\nexport default NumberMaskedInput;\n","const styles = theme => ({\n container: {\n display: 'flex',\n alignItems: 'flex-start',\n marginBottom: '15px',\n [theme.breakpoints.down('sm')]: {\n flexDirection: 'column',\n },\n\n '& > *': {\n flex: 1,\n marginTop: 0,\n },\n },\n selectField: {\n [theme.breakpoints.down('sm')]: {\n margin: '0px 0px 25px 0px',\n },\n [theme.breakpoints.up('md')]: {\n margin: '0 12px 0px 0px',\n },\n },\n textField: {\n fontSize: '14px',\n width: '100%',\n '& fieldset': {\n borderRadius: '2px',\n },\n '& input[type=\"number\"]::-webkit-outer-spin-button, input[type=\"number\"]::-webkit-inner-spin-button': {\n '-webkit-appearance': 'none',\n margin: 0,\n },\n '& input[type=\"number\"]': {\n '-moz-appearance': 'textfield',\n },\n '& label': {\n transform: 'translate(14px, 10px) scale(1)',\n zIndex: 1,\n fontSize: 14,\n },\n '& input': {\n padding: 8,\n fontSize: 14,\n },\n '& > p': {\n margin: '8px 0px',\n },\n [theme.breakpoints.down('sm')]: {\n margin: '0px 0px 25px 0px',\n maxWidth: '100%',\n\n '& fieldset': {\n width: '100%',\n },\n },\n [theme.breakpoints.up('md')]: {\n margin: '0 12px 0px 0px',\n },\n },\n addDNSForm: {\n [theme.breakpoints.down('sm')]: {\n padding: '0',\n },\n [theme.breakpoints.up('md')]: {\n border: `1px solid ${theme.color.indigo}`,\n borderRadius: '2px',\n padding: '32px 24px 24px 24px',\n },\n },\n loadingWrapper: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'center',\n marginBottom: 25,\n },\n buttonsWrapper: {\n display: 'flex !important',\n\n [theme.breakpoints.down('sm')]: {\n alignItems: 'center',\n flexDirection: 'row-reverse',\n justifyContent: 'center',\n },\n\n '& button': {\n marginRight: 12,\n },\n },\n outlinedCancel: {\n borderColor: theme.color.geyser,\n color: theme.color.indigo,\n },\n header: {\n marginBottom: 24,\n },\n closeFormPortal: {\n padding: 0,\n display: 'block',\n marginLeft: 'auto',\n },\n addRecordTitle: {\n display: 'block',\n fontSize: 24,\n lineHeight: '29px',\n },\n});\n\nexport default styles;\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useState, useEffect, useContext } from 'react';\nimport { withI18n } from 'react-i18next';\nimport {\n TextField, withStyles, Typography, IconButton, CircularProgress,\n} from '@material-ui/core';\nimport CloseIcon from '@material-ui/icons/Close';\nimport withWidth, { isWidthDown } from '@material-ui/core/withWidth';\nimport { isNil } from 'ramda';\nimport PropTypes from 'prop-types';\nimport SelectField from '@/components/Fields/SelectField';\nimport TypeAValueField from '@/components/Dns/ZoneManager/AddRecordForm/TypeFields/TypeAValueField';\nimport TypeAAAAValueField from '@/components/Dns/ZoneManager/AddRecordForm/TypeFields/TypeAAAAValueField';\nimport TypeCAAValueField from '@/components/Dns/ZoneManager/AddRecordForm/TypeFields/TypeCAAValueField';\nimport TypeMXValueFields from '@/components/Dns/ZoneManager/AddRecordForm/TypeFields/TypeMXValueFields';\nimport TypeTXTValueFields from '@/components/Dns/ZoneManager/AddRecordForm/TypeFields/TypeTXTValueFields';\nimport TypeCNAMEValueFields from '@/components/Dns/ZoneManager/AddRecordForm/TypeFields/TypeCNAMEValueFields';\nimport TypeSRVValueFields from '@/components/Dns/ZoneManager/AddRecordForm/TypeFields/TypeSRVValueFields';\nimport { calcLabelWidth } from '@/utils/Formatters/calcWidthLabel';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport OutlineButton from '@/components/Buttons/OutlineButton';\nimport { DNSContext } from '@/contexts/DNS/context';\nimport NumberMaskedInput from '@/components/Fields/InputMasks/NumberMaskedInput';\nimport styles from './styles';\n\nlet validationsTimeOut = null;\n\nconst AddRecordForm = ({\n classes, t, width, editing, recordedItem, closeForm, toggleCollapse, domainName,\n}) => {\n const {\n loading, setToggleAddRecordForm, handleSubmit, recordTypes,\n } = useContext(DNSContext);\n const isWidthDownSm = isWidthDown('sm', width);\n const [formData, setFormData] = useState(null);\n const [isInvalidBlock, setIsInvalidBlock] = useState(false);\n const [isInvalidName, setIsInvalidName] = useState(false);\n const [isInvalidDestination, setIsInvalidDestination] = useState(false);\n const [isInvalidDomain, setIsInvalidDomain] = useState(false);\n const [isInvalidPriority, setIsInvalidPriority] = useState(false);\n const [isInvalidPort, setIsInvalidPort] = useState(false);\n const [isInvalidWeight, setIsInvalidWeight] = useState(false);\n\n const removeMxParamaters = (data) => {\n const newData = data;\n delete newData.preference;\n delete newData.exchange;\n return newData;\n };\n\n const removeCaaParameters = (data) => {\n const newData = data;\n delete newData.flag;\n delete newData.tag;\n delete newData.value;\n return newData;\n };\n\n const removeAParameters = (data) => {\n const newData = data;\n delete newData.address;\n return newData;\n };\n\n const removeTxtParameters = (data) => {\n const newData = data;\n delete newData.txt_data;\n return newData;\n };\n\n const removeCnameParameters = (data) => {\n const newData = data;\n delete newData.cname;\n return newData;\n };\n\n const removeSrvParameters = (data) => {\n const newData = data;\n delete newData.priority;\n delete newData.port;\n delete newData.weight;\n delete newData.target;\n return newData;\n };\n\n const removeParameters = (data, type) => {\n let newData = data;\n\n if (type !== 'A' && type !== 'AAAA') {\n newData = removeAParameters(newData);\n }\n\n if (type !== 'CAA') {\n newData = removeCaaParameters(newData);\n }\n\n if (type !== 'MX') {\n newData = removeMxParamaters(newData);\n }\n\n\n if (type !== 'TXT') {\n newData = removeTxtParameters(newData);\n }\n\n if (type !== 'CNAME') {\n newData = removeCnameParameters(newData);\n }\n\n if (type !== 'SRV') {\n newData = removeSrvParameters(newData);\n }\n\n\n return newData;\n };\n\n const createParameters = (data, type) => {\n const newData = data;\n\n switch (type) {\n case 'CAA':\n newData.flag = '0';\n newData.tag = 'issue';\n newData.value = '';\n break;\n\n case 'MX':\n newData.preference = '';\n newData.exchange = '';\n break;\n\n case 'TXT':\n newData.txt_data = '';\n break;\n\n case 'CNAME':\n newData.cname = '';\n break;\n\n case 'SRV':\n newData.priority = '';\n newData.port = '';\n newData.weight = '';\n newData.target = '';\n break;\n\n case 'A':\n case 'AAAA':\n default:\n newData.address = '';\n }\n\n return newData;\n };\n\n const validateName = (name) => {\n if (name.length === 0 || name === '@') {\n setIsInvalidName(false);\n return;\n }\n\n let isValidDomain = true;\n\n const dotSplitedName = name.split('.');\n dotSplitedName.forEach((part) => {\n const regexUnderScore = RegExp(/(^_)?/);\n const regexDomain = RegExp(/(?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?\\.?/);\n const validationOk = regexUnderScore.test(part) && regexDomain.test(part);\n const underscoreFound = part.match(/_/g);\n\n if (!validationOk || (underscoreFound && underscoreFound.length > 1)) {\n isValidDomain = false;\n }\n });\n\n const hasDomain = name.includes(domainName);\n if (hasDomain) {\n const splitedValue = name.split(`${domainName}`);\n\n let lastStringFromFirstBlock = splitedValue[0];\n lastStringFromFirstBlock = lastStringFromFirstBlock.slice(-1);\n\n if ((splitedValue[1] !== '' && splitedValue[1] !== '.') || (lastStringFromFirstBlock !== '.' && lastStringFromFirstBlock !== '')) {\n isValidDomain = false;\n }\n }\n\n if (name.includes('*')) {\n const regexWildCard = RegExp(/^(\\*\\.)/);\n isValidDomain = regexWildCard.test(name);\n\n const wildCardFound = name.match(/\\*/g);\n if (wildCardFound && wildCardFound.length > 1) {\n isValidDomain = false;\n }\n }\n\n if (name.includes('@')) {\n isValidDomain = false;\n }\n\n setIsInvalidName(!isValidDomain);\n };\n\n const validateIodef = (hasHttp, isValidDomain, isMailTo) => {\n if (hasHttp && isValidDomain) {\n setIsInvalidBlock(false);\n return;\n }\n\n if (isMailTo) {\n setIsInvalidBlock(false);\n return;\n }\n\n setIsInvalidBlock(true);\n };\n\n const validateIssues = (hasHttp, isValidDomain, isMail, isSemicolon) => {\n if (hasHttp || isMail) {\n setIsInvalidBlock(true);\n return;\n }\n\n if (isValidDomain) {\n setIsInvalidBlock(false);\n return;\n }\n\n if (isSemicolon) {\n setIsInvalidBlock(false);\n return;\n }\n\n setIsInvalidBlock(true);\n };\n\n const validateCaaValue = (tag, value) => {\n const tagIsIodef = tag === 'iodef';\n const isSemicolon = value === ';';\n const isMail = value.includes('mailto') || value.includes('@');\n\n const regexDomain = RegExp(/(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]/);\n const isValidDomain = regexDomain.test(value);\n\n const httpRegex = RegExp(/https?:?/);\n const hasHttp = httpRegex.test(value);\n\n const mailToRegex = RegExp(/^mailto:[a-z0-9]{1,64}@[a-z0-9]{1,63}\\.[a-z0-9-]{1,61}/);\n const isMailTo = mailToRegex.test(value);\n\n if (value.length > 0 && value.lastIndexOf('/') === value.length - 1) {\n setIsInvalidBlock(true);\n return;\n }\n\n if (tagIsIodef) {\n validateIodef(hasHttp, isValidDomain, isMailTo);\n } else {\n validateIssues(hasHttp, isValidDomain, isMail, isSemicolon);\n }\n };\n\n const validateMxPriority = (preference) => {\n setIsInvalidPriority(parseInt(preference, 10) > 65535);\n };\n\n const validateMxTarget = (exchange) => {\n const hasAt = exchange.includes('@');\n\n if (hasAt) {\n setIsInvalidDestination(hasAt);\n return;\n }\n\n const regexDomain = RegExp(/^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]$/i);\n const isValidDomain = regexDomain.test(exchange) && exchange.lastIndexOf('/') !== exchange.length - 1;\n setIsInvalidDestination(!isValidDomain);\n };\n\n const validateCnameDomain = (cname) => {\n let isValidDomain = true;\n\n const dotSplitedName = cname.split('.');\n dotSplitedName.forEach((part) => {\n const regexUnderScore = RegExp(/(^_)?/);\n const regexDomain = RegExp(/(?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?\\.?/);\n const validationOk = regexUnderScore.test(part) && regexDomain.test(part);\n const underscoreFound = part.match(/_/g);\n\n if (!validationOk || (underscoreFound && underscoreFound.length > 1)) {\n isValidDomain = false;\n }\n });\n\n if (cname.includes('*')) {\n const regexWildCard = RegExp(/^(\\*\\.)/);\n isValidDomain = regexWildCard.test(cname);\n\n const wildCardFound = cname.match(/\\*/g);\n if (wildCardFound && wildCardFound.length > 1) {\n isValidDomain = false;\n }\n }\n\n if (cname.includes('@')) {\n isValidDomain = false;\n }\n\n setIsInvalidDomain(!isValidDomain);\n };\n\n const validateSrvDomain = (\n priority,\n port,\n weight,\n target,\n ) => {\n setIsInvalidPriority(parseInt(priority, 10) > 65535);\n setIsInvalidPort(parseInt(port, 10) > 65535);\n setIsInvalidWeight(parseInt(weight, 10) > 65535);\n\n if (target.length > 0) {\n const destinationRegex = RegExp(/^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]$/);\n const isValidDestination = (destinationRegex.test(target));\n setIsInvalidDestination(!isValidDestination);\n return;\n }\n\n setIsInvalidDestination(false);\n };\n\n const validations = (formData) => {\n validateName(formData.name);\n\n if (formData.type === 'A') {\n const addressBlocks = formData.address.split('.').length;\n const formDataAdress = formData.address.split('.');\n formDataAdress.pop();\n if (formData.address.length > 0) {\n setIsInvalidBlock(addressBlocks !== 4 || formDataAdress === '' || formDataAdress === '.');\n } else {\n setIsInvalidBlock(false);\n }\n }\n\n if (formData.type === 'CAA') {\n if (formData.value && formData.value.length > 0) {\n validateCaaValue(formData.tag, formData.value);\n } else {\n setIsInvalidBlock(false);\n }\n }\n\n if (formData.type === 'MX') {\n if (formData.preference && formData.preference.length > 0) {\n validateMxPriority(formData.preference);\n } else {\n setIsInvalidPriority(false);\n }\n\n if (formData.exchange && formData.exchange.length > 0) {\n validateMxTarget(formData.exchange);\n } else {\n setIsInvalidDestination(false);\n }\n }\n\n if (formData.type === 'CNAME') {\n if (formData.cname && formData.cname.length > 0) {\n validateCnameDomain(formData.cname);\n } else {\n setIsInvalidDomain(false);\n }\n }\n\n if (formData.type === 'SRV') {\n validateSrvDomain(\n formData.priority,\n formData.port,\n formData.weight,\n formData.target,\n );\n }\n };\n\n const onHandleChangeInput = (eventTarget) => {\n const { name: key } = eventTarget;\n const { value } = eventTarget;\n let newFormData = { ...formData };\n\n if (key === 'type') {\n newFormData = removeParameters(newFormData, value);\n newFormData = createParameters(newFormData, value);\n }\n\n setFormData({\n ...newFormData,\n [key]: value,\n });\n\n if (key === 'name') {\n clearTimeout(validationsTimeOut);\n validationsTimeOut = setTimeout(() => {\n validations({\n ...newFormData,\n [key]: value,\n });\n }, 500);\n } else {\n validations({\n ...newFormData,\n [key]: value,\n });\n }\n };\n\n const handleFocusOutName = (value) => {\n let newValue = value;\n if (newValue.length > 0 && newValue !== '@') {\n const hasDomain = newValue.includes(domainName);\n const regexOnlyWhiteSpaces = RegExp(/^ +$/);\n const isOnlySpaces = regexOnlyWhiteSpaces.test(newValue);\n\n const lastCharIsDot = newValue[newValue.length - 1] === '.';\n if (hasDomain) {\n newValue = lastCharIsDot ? newValue : `${newValue}.`;\n } else if (!isOnlySpaces) {\n newValue = lastCharIsDot ? `${value}${domainName}.` : `${value}.${domainName}.`;\n }\n\n setFormData({\n ...formData, name: newValue,\n });\n\n\n validations({\n ...formData, name: newValue,\n });\n }\n };\n\n const startingFormdata = () => {\n let newFormData = null;\n\n if (editing) {\n newFormData = { ...recordedItem };\n\n if (!isNil(newFormData.flag)) {\n newFormData.flag = newFormData.flag.toString();\n }\n\n if (!isNil(newFormData.preference)) {\n newFormData.preference = newFormData.preference.toString();\n }\n } else {\n newFormData = {\n type: 'A',\n name: '',\n class: 'IN',\n ttl: 14400,\n address: '',\n };\n }\n\n setFormData(newFormData);\n };\n\n const setKeepEditing = (editing, isWidthDownSm, closeForm, toggleCollapse, contextSetToggleAddRecordForm) => {\n if (!editing) {\n return contextSetToggleAddRecordForm;\n }\n\n return isWidthDownSm ? closeForm : toggleCollapse;\n };\n\n const setCantSubmit = (contextLoading, formData, isInvalidBlock, isInvalidName, isInvalidDestination, isInvalidDomain) => {\n if (formData === null) {\n return true;\n }\n\n let cantSubmit = false;\n\n const hasInvalidOption = contextLoading || formData.ttl < 1 || isInvalidBlock || isInvalidName || isInvalidDestination || isInvalidDomain || isInvalidPriority;\n\n if (hasInvalidOption) {\n cantSubmit = true;\n } else {\n Object.keys(formData).forEach((key) => {\n if (formData[key] === '') {\n cantSubmit = true;\n }\n });\n }\n\n return cantSubmit;\n };\n\n useEffect(() => {\n startingFormdata();\n }, [editing, recordedItem]);\n\n const keepEditing = setKeepEditing(editing, isWidthDownSm, closeForm, toggleCollapse, setToggleAddRecordForm);\n const cantSubmit = setCantSubmit(loading, formData, isInvalidBlock, isInvalidName, isInvalidDestination, isInvalidDomain);\n let nameHelperText = null;\n\n if (isInvalidName) {\n nameHelperText = t('dns.zoneManager.addRecord.form.helperText.nameField');\n }\n\n if (formData && formData.name === '@') {\n nameHelperText = `${t('dns.zoneManager.addRecord.form.helperText.nameFieldAs@')} '${domainName}'`;\n }\n\n return (\n formData !== null\n && (\n {\n handleSubmit(e, formData, editing, keepEditing);\n startingFormdata();\n }}\n className={classes.addDNSForm}\n data-testid=\"recordForm\"\n >\n\n {isWidthDownSm\n && (\n \n {\n editing\n ? closeForm()\n : setToggleAddRecordForm(false);\n }}\n >\n \n {editing\n ? t('dns.zoneManager.addRecord.form.editTitle')\n : t('dns.zoneManager.addRecord.form.title')\n }\n \n
\n )\n }\n\n \n onHandleChangeInput(e.target)}\n menuItemDefaultText={t('dns.zoneManager.addRecord.form.label.type')}\n selectTestId=\"zoneManagerTypeSelectButton\"\n selectInputTestId=\"zoneManagerTypeField\"\n />\n\n onHandleChangeInput(e.target)}\n onBlur={e => handleFocusOutName(e.target.value)}\n InputProps={{\n inputProps: {\n maxLength: formData.name.includes(`${domainName}.`) ? 254 : 253,\n 'data-testid': 'zoneManagerNameField',\n },\n }}\n error={isInvalidName}\n helperText={nameHelperText}\n />\n\n onHandleChangeInput(e.target)}\n inputProps={{\n 'data-testid': 'zoneManagerClassField',\n }}\n />\n\n onHandleChangeInput(e.target)}\n InputProps={{\n inputComponent: NumberMaskedInput,\n inputProps: {\n maxLength: 10,\n 'data-testid': 'zoneManagerTtlField',\n },\n }}\n error={formData.ttl < 1}\n helperText={formData.ttl < 1 ? t('dns.zoneManager.addRecord.form.helperText.ttl') : null}\n />\n\n {formData.type === 'A' &&
\n\n {(loading && isWidthDownSm) && (\n \n
\n )}\n\n \n
\n {editing\n ? t('dns.zoneManager.addRecord.updateButton')\n : t('dns.zoneManager.addRecord.addButton')\n }\n \n keepEditing(false)}\n disabled={loading}\n data-testid=\"zoneManagerCancelButon\"\n >\n {t('dns.zoneManager.addRecord.cancelButton')}\n \n \n \n )\n : (\n \n \n )\n }\n\n {(!toggleAddRecordForm) && (\n \n
setToggleAddRecordForm(!toggleAddRecordForm)} disabled={loading}>\n {t('dns.zoneManager.addRecord.button')}\n \n {renderedRecordedItems && renderedRecordedItems.length > 0 && (\n
{t('dns.zoneManager.copyDnsTable')} \n )}\n
\n setShowEditForm(false)} domainName={domainName} />\n \n\n \n\n \n \n {t('dns.zoneManager.recordList.listLabel.type')}\n
\n\n \n
\n \n\n \n \n {t('dns.zoneManager.recordList.listLabel.name')}\n
\n\n \n {recordedItem.name}\n
\n \n\n \n \n {t('dns.zoneManager.recordList.listLabel.class')}\n
\n\n \n {recordedItem.class}\n
\n \n\n \n \n {t('dns.zoneManager.recordList.listLabel.ttl')}\n
\n\n \n {recordedItem.ttl}\n
\n \n\n {(recordedItem.type === 'A' || recordedItem.type === 'AAAA')\n && (\n \n \n {t('dns.zoneManager.recordList.listLabel.address')}\n
\n\n \n {recordedItem.address}\n
\n \n )\n }\n\n {(recordedItem.type === 'CAA')\n && (\n <>\n \n \n {t('dns.zoneManager.recordList.listLabel.flag')}\n
\n\n \n {recordedItem.flag}\n
\n \n\n \n \n {t('dns.zoneManager.recordList.listLabel.tag')}\n
\n\n \n {recordedItem.tag}\n
\n \n\n \n \n {t('dns.zoneManager.recordList.listLabel.value')}\n
\n\n \n {recordedItem.value}\n
\n \n \n )\n }\n\n {(recordedItem.type === 'CNAME')\n && (\n <>\n \n \n {t('dns.zoneManager.recordList.listLabel.cname')}\n
\n\n \n {recordedItem.cname}\n
\n \n \n )\n }\n\n {(recordedItem.type === 'MX')\n && (\n <>\n \n \n {t('dns.zoneManager.addRecord.form.label.typeMxPriorityField')}\n
\n\n \n {recordedItem.preference}\n
\n \n\n \n \n {t('dns.zoneManager.addRecord.form.label.typeMxDestinationField')}\n
\n\n \n {recordedItem.exchange}\n
\n \n \n )\n }\n\n {(recordedItem.type === 'TXT')\n && (\n <>\n \n \n {t('dns.zoneManager.recordList.listLabel.address')}\n
\n\n \n {recordedItem.txt_data}\n
\n \n \n )\n }\n\n {(recordedItem.type === 'SRV')\n && (\n <>\n \n \n {t('dns.zoneManager.addRecord.form.label.typeSrvPriorityField')}\n
\n\n \n {recordedItem.priority}\n
\n \n\n \n \n {t('dns.zoneManager.addRecord.form.label.typeSrvPortField')}\n
\n\n \n {recordedItem.port}\n
\n \n\n \n \n {t('dns.zoneManager.addRecord.form.label.typeSrvWeightField')}\n
\n\n \n {recordedItem.weight}\n
\n \n\n \n \n {t('dns.zoneManager.addRecord.form.label.typeSrvDestinationField')}\n
\n\n \n {recordedItem.target}\n
\n \n \n )\n }\n\n \n setShowEditForm(!showEditForm)}\n >\n \n\n {\n setExcludeRecordedDnsItem(recordedItem);\n setShowExcludeModalConfirmation(!showExcludeModalConfirmation);\n }}\n >\n \n \n \n \n );\n};\n\nRecordedItemBlock.propTypes = {\n recordedItem: PropTypes.object.isRequired,\n idx: PropTypes.number.isRequired,\n};\n\nexport default (withI18n()((withStyles(styles)(RecordedItemBlock))));\n","const styles = theme => ({\n featuredMessage: {\n color: theme.color.tundora,\n fontSize: 24,\n fontWeight: 500,\n lineHeight: '29px',\n marginBottom: 6,\n marginTop: 20,\n textAlign: 'center',\n },\n message: {\n color: theme.color.tundora,\n fontSize: 16,\n fontWeight: 400,\n lineHeight: '19px',\n marginBottom: 25,\n maxWidth: '702px',\n textAlign: 'center',\n },\n});\n\nexport default styles;\n","\nimport React, { useContext } from 'react';\nimport { withI18n } from 'react-i18next';\nimport {\n withStyles, Typography,\n} from '@material-ui/core';\nimport { DNSContext } from '@/contexts/DNS/context';\nimport styles from './styles';\n\n\nconst EmptyList = ({ classes, t }) => {\n const { clearedRecordedItems } = useContext(DNSContext);\n\n const hasItems = clearedRecordedItems.length > 0;\n return (\n hasItems\n ? (\n <>\n {t('dns.zoneManager.recordList.emptySearch')} \n {t('dns.zoneManager.recordList.emptySearch_2')} \n \n )\n : (\n <>\n {t('dns.zoneManager.recordList.emptyMessage')} \n {t('dns.zoneManager.recordList.emptyMessage_2')} \n \n )\n );\n};\n\n\nexport default (withI18n()((withStyles(styles)(EmptyList))));\n","const styles = theme => ({\n buttonWrapper: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n outlinedButton: {\n borderColor: theme.color.geyser,\n color: theme.color.indigo,\n marginTop: 24,\n },\n});\n\nexport default styles;\n","import React, { useContext } from 'react';\nimport { withI18n } from 'react-i18next';\nimport { withStyles } from '@material-ui/core';\nimport { DNSContext } from '@/contexts/DNS/context';\nimport RecordedItemBlock from '@/components/Dns/ZoneManager/RecordList/MobileRecordList/RecordedItemBlock';\nimport OutlineButton from '@/components/Buttons/OutlineButton';\nimport EmptyList from '@/components/Dns/ZoneManager/RecordList/EmptyList';\nimport styles from './styles';\n\nconst MobileRecordList = ({ t, classes }) => {\n const {\n mobileListAmount,\n renderedRecordedItems,\n handleLoadMoreMobile,\n } = useContext(DNSContext);\n\n const hasRenderedItems = renderedRecordedItems && renderedRecordedItems.length > 0;\n return (\n hasRenderedItems\n ? (\n \n {renderedRecordedItems.map((recordedItem, idx) => (\n idx < mobileListAmount\n &&
\n ))}\n\n {mobileListAmount < renderedRecordedItems.length\n && (\n
\n handleLoadMoreMobile()}>\n {t('dns.zoneManager.recordList.loadMore')}\n \n
\n )\n }\n
\n
\n {t('dns.zoneManager.recordList.listLabel.type')}\n
\n\n
\n {t('dns.zoneManager.recordList.listLabel.name')}\n
\n\n
\n {t('dns.zoneManager.recordList.listLabel.class')}\n
\n\n
\n {t('dns.zoneManager.recordList.listLabel.ttl')}\n
\n\n
\n {t('dns.zoneManager.recordList.listLabel.address')}\n
\n
\n \n
\n\n
\n
\n
\n {recordedItem.name}\n
\n
\n
\n\n
\n
\n
\n {recordedItem.class}\n
\n
\n
\n\n
\n
\n
\n {recordedItem.ttl}\n
\n
\n
\n\n
\n {(recordedItem.type === 'A' || recordedItem.type === 'AAAA')\n && (\n
\n
\n {recordedItem.address}\n
\n
\n )\n }\n\n {(recordedItem.type === 'CAA') && (\n
\n
\n {`${t('dns.zoneManager.recordList.listLabel.flag')}: `}\n {recordedItem.flag} \n
\n\n
\n {`${t('dns.zoneManager.recordList.listLabel.tag')}: `}\n {recordedItem.tag} \n
\n\n
\n {`${t('dns.zoneManager.recordList.listLabel.value')}: `}\n {recordedItem.value} \n
\n
\n )}\n\n {(recordedItem.type === 'CNAME')\n && (\n
\n
\n {recordedItem.cname}\n
\n
\n )\n }\n\n {(recordedItem.type === 'MX')\n && (\n
\n
\n {`${t('dns.zoneManager.addRecord.form.label.typeMxPriorityField')}: `}\n {recordedItem.preference} \n
\n\n
\n {`${t('dns.zoneManager.addRecord.form.label.typeMxDestinationField')}: `}\n {recordedItem.exchange} \n
\n
\n )\n }\n\n {(recordedItem.type === 'TXT')\n && (\n
\n
\n {recordedItem.txt_data} \n
\n
\n )\n }\n\n {(recordedItem.type === 'SRV')\n && (\n
\n
\n {`${t('dns.zoneManager.addRecord.form.label.typeSrvPriorityField')}: `}\n {recordedItem.priority} \n
\n\n
\n {`${t('dns.zoneManager.addRecord.form.label.typeSrvPortField')}: `}\n {recordedItem.port} \n
\n\n
\n {`${t('dns.zoneManager.addRecord.form.label.typeSrvWeightField')}: `}\n {recordedItem.weight} \n
\n\n
\n {`${t('dns.zoneManager.addRecord.form.label.typeSrvDestinationField')}: `}\n {recordedItem.target} \n
\n
\n )\n }\n
\n\n
\n toggleCollapse(!collapse)}\n data-testid=\"editRecordedItem\"\n >\n
\n
\n {\n setExcludeRecordedDnsItem(recordedItem);\n setShowExcludeModalConfirmation(!showExcludeModalConfirmation);\n }}\n data-testid=\"deleteRecordedItem\"\n >\n
\n
\n \n )}\n \n );\n};\nexport default (withI18n()((withStyles(styles)(RecordedItemRow))));\n","const styles = theme => ({\n listWrapper: {\n borderRadius: 5,\n maxHeight: '370px',\n overflowX: 'scroll',\n overflowY: 'scroll',\n padding: '0px 6px 0px',\n width: '100%',\n\n '& > div:first-child': {\n borderTop: 0,\n },\n\n '&::-webkit-scrollbar': {\n height: 8,\n width: 8,\n },\n '&::-webkit-scrollbar-track': {\n background: theme.color.silver,\n },\n '&::-webkit-scrollbar-thumb': {\n borderRadius: 8,\n background: theme.color.indigo,\n },\n '&::-webkit-scrollbar-thumb:hover': {\n background: theme.color.indigo,\n },\n\n },\n});\n\nexport default styles;\n","import React, { useContext } from 'react';\nimport { withI18n } from 'react-i18next';\nimport { withStyles } from '@material-ui/core';\nimport { DNSContext } from '@/contexts/DNS/context';\nimport RecordedItemRow from '@/components/Dns/ZoneManager/RecordList/DesktopRecordList/RecordedItemRow';\nimport styles from './styles';\n\nconst MobileRecordList = ({ classes }) => {\n const { renderedRecordedItems } = useContext(DNSContext);\n\n return (\n \n {renderedRecordedItems.map((recordedItem, idx) => {\n const row = idx;\n return (\n
\n );\n};\n\n\nexport default (withI18n()((withStyles(styles)(MobileRecordList))));\n","const styles = theme => ({\n tableWrapper: {\n alignItems: 'center',\n border: `1px solid ${theme.color.darkSilver}`,\n borderRadius: 5,\n display: 'flex',\n flexDirection: 'column',\n marginTop: 15,\n maxHeight: '418px',\n overflow: 'hidden',\n\n '&::-webkit-scrollbar': {\n width: 8,\n },\n '&::-webkit-scrollbar-track': {\n background: theme.color.silver,\n },\n '&::-webkit-scrollbar-thumb': {\n borderRadius: 8,\n background: theme.color.indigo,\n },\n '&::-webkit-scrollbar-thumb:hover': {\n background: theme.color.indigo,\n },\n\n },\n});\n\nexport default styles;\n","import React, { useContext, useRef } from 'react';\nimport { withI18n } from 'react-i18next';\nimport {\n withStyles,\n} from '@material-ui/core';\nimport HeaderItems from '@/components/Dns/ZoneManager/RecordList/DesktopRecordList/HeaderItems';\nimport List from '@/components/Dns/ZoneManager/RecordList/DesktopRecordList/List';\nimport { DNSContext } from '@/contexts/DNS/context';\nimport EmptyList from '@/components/Dns/ZoneManager/RecordList/EmptyList';\nimport styles from './styles';\n\nconst MobileRecordList = ({ classes }) => {\n const { renderedRecordedItems } = useContext(DNSContext);\n const tableRef = useRef();\n const hasRenderedItems = renderedRecordedItems && renderedRecordedItems.length > 0;\n\n return (\n \n
\n :
\n );\n};\n\n\nexport default (withI18n()((withStyles(styles)(MobileRecordList))));\n","const styles = theme => ({\n textField: {\n fontSize: '14px',\n width: '100%',\n '& fieldset': {\n borderRadius: '2px',\n },\n '& input[type=\"number\"]::-webkit-outer-spin-button, input[type=\"number\"]::-webkit-inner-spin-button': {\n '-webkit-appearance': 'none',\n margin: 0,\n },\n '& input[type=\"number\"]': {\n '-moz-appearance': 'textfield',\n },\n '& label': {\n transform: 'translate(14px, 10px) scale(1)',\n zIndex: 1,\n fontSize: 14,\n },\n '& input': {\n padding: 8,\n fontSize: 14,\n },\n [theme.breakpoints.down('sm')]: {\n marginRight: 0,\n maxWidth: '100%',\n '& fieldset': {\n width: '100%',\n },\n },\n [theme.breakpoints.up('md')]: {\n marginRight: 12,\n },\n },\n filterWrapper: {\n display: 'flex',\n marginTop: 10,\n [theme.breakpoints.down('sm')]: {\n alignItems: 'flex-start',\n marginBottom: 22,\n },\n [theme.breakpoints.up('md')]: {\n alignItems: 'center',\n },\n },\n filterLabel: {\n color: theme.color.tundora,\n fontSize: 14,\n fontWeight: 400,\n letterSpacing: '0.01px',\n lineHeight: '17px',\n marginRight: 12,\n minWidth: '64px',\n },\n filterList: {\n display: 'flex',\n flexWrap: 'wrap',\n listStyleType: 'none',\n margin: 0,\n padding: 0,\n\n '& li': {\n marginLeft: 6,\n [theme.breakpoints.down('sm')]: {\n marginBottom: 6,\n },\n },\n },\n chipElement: {\n cursor: 'pointer',\n fontSize: 12,\n height: 22,\n },\n chipElementActive: {\n backgroundColor: theme.color.indigo,\n color: theme.color.white,\n '&:focus,&:hover': {\n backgroundColor: theme.color.indigo,\n color: theme.color.white,\n },\n },\n chipElementInactive: {\n backgroundColor: theme.color.white,\n color: theme.color.tundora,\n '&:focus,&:hover': {\n backgroundColor: theme.color.white,\n color: theme.color.tundora,\n },\n },\n});\n\nexport default styles;\n","import React, { useContext } from 'react';\nimport { withI18n } from 'react-i18next';\n\nimport {\n Chip,\n TextField,\n Typography,\n withStyles,\n} from '@material-ui/core';\nimport { DNSContext } from '@/contexts/DNS/context';\nimport styles from './styles';\n\n\nconst Filter = ({ classes, t }) => {\n const {\n dnsFilterOptions,\n handleChangeTypedFilterData,\n handleSetSelectedFilter,\n loading,\n typedFilterData,\n } = useContext(DNSContext);\n\n return (\n <>\n handleChangeTypedFilterData(e.target.value)}\n placeholder={t('dns.zoneManager.recordList.searchField')}\n value={typedFilterData}\n variant=\"outlined\"\n />\n\n \n
\n {t('dns.zoneManager.recordList.filterLabel')}\n \n\n
\n {dnsFilterOptions.map((recordType, idx) => (\n \n handleSetSelectedFilter(idx, recordType)}\n id={`Filter-chip_${recordType.name}`}\n />\n \n ))}\n \n
{\n setShowExcludeModalConfirmation(false);\n setExcludeRecordedDnsItem(null);\n }}\n maxWidth=\"md\"\n aria-labelledby=\"alert-dialog-title\"\n aria-describedby=\"alert-dialog-description\"\n >\n {\n setShowExcludeModalConfirmation(false);\n setExcludeRecordedDnsItem(null);\n }}\n >\n \n {t('dns.zoneManager.excludeRecord.title')}\n \n\n \n \n {t('dns.zoneManager.excludeRecord.confirmation')}\n \n\n \n \n\n {loading && (\n \n
\n )}\n\n \n\n \n {\n setShowExcludeModalConfirmation(false);\n setExcludeRecordedDnsItem(null);\n }}\n >\n {t('dns.zoneManager.excludeRecord.cancelButton')}\n \n\n confirmDeletion()}\n >\n {t('dns.zoneManager.excludeRecord.excludeButton')}\n \n \n \n );\n};\n\nexport default withI18n()(withWidth()(withStyles(styles, { withTheme: true })(ModalExcludeDnsZone)));\n","const styles = theme => ({\n recordListContainer: {\n width: '100%',\n position: 'relative',\n\n [theme.breakpoints.down('sm')]: {\n marginTop: 29,\n },\n [theme.breakpoints.up('md')]: {\n marginTop: 36,\n },\n },\n\n loadingWrapper: {\n backgroundColor: 'rgba(255,255,255,.8)',\n height: '100%',\n left: 0,\n position: 'absolute',\n top: 0,\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n\nexport default styles;\n","import React, { useContext } from 'react';\nimport { withI18n } from 'react-i18next';\nimport { withStyles, CircularProgress } from '@material-ui/core';\nimport withWidth, { isWidthDown } from '@material-ui/core/withWidth';\nimport MobileRecordList from '@/components/Dns/ZoneManager/RecordList/MobileRecordList';\nimport DesktopRecordList from '@/components/Dns/ZoneManager/RecordList/DesktopRecordList';\nimport Filter from '@/components/Dns/ZoneManager/RecordList/Filter';\nimport { DNSContext } from '@/contexts/DNS/context';\nimport ExcludeModalConfirmation from '@/components/Modal/ModalExcludeDnsZone';\nimport styles from './styles';\n\nconst RecordList = ({ classes, width }) => {\n const { showExcludeModalConfirmation, loading } = useContext(DNSContext);\n const isWidthDownSm = isWidthDown('sm', width);\n return (\n \n
\n\n {showExcludeModalConfirmation\n &&
\n }\n\n {isWidthDownSm\n &&
\n }\n\n {!isWidthDownSm\n &&
\n }\n\n {loading && (\n
\n
\n )}\n
\n
\n {!dnsTableOnly &&
\n\n {!hasMessages\n &&
\n }\n
handleSelectItem(e, key, item.id)}\n data-testid={`option_${item.domain}`}\n >\n {item.domain}\n \n ));\n }\n\n return null;\n };\n\n return (\n setOpen(false)} data-testid=\"select-domain-custom\">\n \n
\n {t('dns.selectDomain')}\n \n\n \n
\n {t('dns.selectDomain')} \n \n {Object.keys(options).map((key) => {\n const isCategory = key !== 'loadingInternalRequest' && key !== 'loadingExternalRequest';\n\n return (\n
\n\n {isCategory && options[key].length > 0\n && {t(`dnsGroups.${key}`)} \n }\n\n {key === 'loadingExternalRequest' && options[key]\n && {t('dnsGroups.anotherProvider')} \n }\n\n {(!isCategory && options[key])\n ? ( \n );\n })\n }\n
\n );\n};\n\nSelectDomainCustom.propTypes = {\n options: PropTypes.object.isRequired,\n selectedValue: PropTypes.string.isRequired,\n onHandleChangeSelectValue: PropTypes.func.isRequired,\n};\n\nexport default withI18n()(withStyles(styles)(SelectDomainCustom));\n","const styles = theme => ({\n firstCardWrapper: {\n alignItems: 'center',\n backgroundColor: 'white',\n borderLeft: `5px solid ${theme.color.indigo}`,\n boxShadow: '0px 2px 4px 0px #DBDBDB',\n display: 'flex',\n flexWrap: 'wrap',\n marginBottom: 12,\n padding: '24px 38px 24px 36px',\n width: '100%',\n\n [theme.breakpoints.down('xs')]: {\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n },\n headerWrapper: {\n display: 'flex',\n },\n title: {\n fontSize: '24px',\n color: theme.color.tundora,\n userSelect: 'none',\n [theme.breakpoints.up(379)]: {\n whiteSpace: 'nowrap',\n },\n },\n asterisk: {\n userSelect: 'none',\n display: 'inline-block',\n color: theme.color.valencia,\n margin: '0 20px 0 8px',\n },\n});\nexport default styles;\n","import React from 'react';\nimport {\n withStyles, Typography,\n} from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport { useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport SelectDomainCustom from '@/components/Dns/SelectDomainCustom';\nimport { zoneManagerDomainChoice } from '@/utils/ThirdParties/tagManager';\nimport styles from './styles';\n\nconst DomainSelectBlock = ({\n classes, t, setAnotherProvider, loadDomainData,\n}) => {\n const chosenDomain = useSelector(state => state.dnsList.choosenDomain);\n const dnsList = useSelector(state => state.dnsList.domains);\n\n const handleChangeSelectValue = (newChosenDomain, keySelected, optionId) => {\n setAnotherProvider(keySelected === 'anotherProvider');\n let gaEventLabel = '';\n switch (keySelected) {\n case 'dnsMissing':\n gaEventLabel = 'dns_missing';\n break;\n case 'dnsOk':\n gaEventLabel = 'dns_ok';\n break;\n case 'anotherProvider':\n gaEventLabel = 'another_domain_provider';\n break;\n default:\n gaEventLabel = keySelected;\n break;\n }\n\n zoneManagerDomainChoice(gaEventLabel);\n if (keySelected !== 'anotherProvider' && newChosenDomain !== '') {\n loadDomainData(optionId);\n }\n };\n\n return (\n \n
\n {t('dns.chooseDomain')} \n * \n
\n\n
\n
\n \n 0\n 1 \n \n )}\n />\n
\n);\nexport default withI18n()(withStyles(styles)((WarningBlock)));\n","const styles = theme => ({\n expandPanel: {\n animationDuration: '0.50s',\n animationName: 'expand',\n transition: 'opacity 281ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 187ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n },\n\n\n formWrapaper: {\n padding: '10px 20px 0 29px',\n\n [theme.breakpoints.down(1291)]: {\n padding: '10px 0 0 0',\n },\n },\n\n inputsWrapper: {\n display: 'flex',\n position: 'relative',\n },\n\n buttonWrapper: {\n display: 'flex',\n justifyContent: 'center',\n margin: '0 0 9px 0',\n },\n\n button: {\n color: theme.color.indigo,\n fontWeight: 400,\n padding: 0,\n textDecoration: 'underline',\n textTransform: 'none',\n userSelect: 'none',\n\n '&:hover': {\n backgroundColor: 'transparent',\n outline: 'none',\n textDecoration: 'underline',\n },\n\n '&:focus': {\n backgroundColor: 'transparent',\n outline: 'none',\n textDecoration: 'underline',\n },\n },\n});\n\nexport default styles;\n","const styles = theme => ({\n '@keyframes create': {\n from: {\n opacity: 0,\n transform: 'scaleY(0,0)',\n },\n to: {\n opacity: 1,\n transform: 'scaleY(1,1)',\n },\n },\n group: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n marginBottom: '5px',\n animationName: 'create',\n animationDuration: '0.30s',\n },\n subLine: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n paddingRight: '19px',\n },\n svg: {\n marginTop: '-6px',\n marginRight: '10px',\n fill: theme.color.tundora,\n },\n input: {\n width: '100%',\n height: '32px',\n margin: '3px 0 11px 0',\n color: theme.color.tundora,\n '& fieldset': {\n height: '39px',\n borderRadius: '2px',\n },\n },\n cssLabel: {\n transform: 'translate(14px, 10px) scale(1)',\n '&$cssFocused': {\n color: theme.color.chambray,\n },\n },\n cssOutlinedInput: {\n '& input': {\n padding: '10px 14px 6px 14px',\n fontSize: '14px',\n },\n '&$cssFocused $notchedOutline': {\n border: `1px solid ${theme.color.chambray}`,\n },\n },\n cssFocused: {},\n notchedOutline: {},\n masterWrapper: {\n display: 'flex',\n alignItems: 'center',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withI18n } from 'react-i18next';\nimport { withStyles, TextField } from '@material-ui/core';\nimport { SubdirectoryArrowRight } from '@material-ui/icons';\nimport MaskIpv4 from '@/components/Fields/InputMasks/MaskIpv4';\nimport styles from './styles';\n\n\nconst DnsFormGroup = ({\n classes,\n label,\n handleMouseEnter,\n handleMouseLeave,\n index,\n children,\n required,\n valueNs,\n handleChangeNs,\n objectKey,\n error,\n t,\n onHandleIpChange,\n otherDns,\n}) => (\n 1 ? () => handleMouseEnter(index) : () => false}\n onMouseLeave={index > 1 ? () => handleMouseLeave(index) : () => false}\n data-testid=\"dnsMasterWrapper\"\n >\n \n handleChangeNs(objectKey, e)}\n error={error}\n variant=\"outlined\"\n className={classes.input}\n InputLabelProps={{\n classes: {\n root: classes.cssLabel,\n focused: classes.cssFocused,\n },\n }}\n InputProps={{\n classes: {\n root: classes.cssOutlinedInput,\n focused: classes.cssFocused,\n notchedOutline: classes.notchedOutline,\n },\n 'data-testid': 'masterWrapperTexField',\n inputProps: {\n maxLength: 200,\n 'data-testid': `masterWrapperInput_${index}`,\n },\n }}\n\n />\n {children}\n
\n\n {otherDns.showIpField && (\n \n onHandleIpChange(objectKey, e)}\n margin=\"normal\"\n variant=\"outlined\"\n placeholder=\"___.___.___.___\"\n className={classes.input}\n InputLabelProps={{\n classes: {\n root: classes.cssLabel,\n focused: classes.cssFocused,\n },\n }}\n InputProps={{\n classes: {\n root: classes.cssOutlinedInput,\n focused: classes.cssFocused,\n notchedOutline: classes.notchedOutline,\n },\n 'data-testid': 'dnsFormGroupSubLineText',\n inputComponent: MaskIpv4,\n inputProps: {\n 'data-testid': `showIpField_${index}`,\n },\n }}\n />\n
\n )}\n \n);\n\nexport default withI18n()(withStyles(styles)(DnsFormGroup));\n","const styles = theme => ({\n\n iconWrapper: {\n height: '20px',\n marginRight: '-1px',\n paddingLeft: '3px',\n width: '20px',\n },\n\n closeIcon: {\n animationDuration: '0.50s',\n animationName: 'show',\n fill: theme.color.regentGray,\n fontSize: '19px',\n marginRight: '-4px',\n opacity: '0',\n transform: 'scale(0)',\n transition: 'fill 0.2s, transform 0.2s, opacity 0.2s',\n\n '&.show': {\n opacity: '1',\n transform: 'scale(1)',\n },\n\n '&:hover': {\n cursor: 'pointer',\n fill: theme.color.tundora,\n },\n },\n\n showIcon: {\n opacity: '1',\n transform: 'scale(1)',\n },\n});\n\nexport default styles;\n","import React, { useState } from 'react';\nimport { withStyles } from '@material-ui/core';\nimport { Close } from '@material-ui/icons';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport DnsFormGroup from '@/components/Dns/DnsFormGroup';\nimport styles from './styles';\n\nconst FormItem = ({\n i, arrayOtherDns, handleChangeNs, classes, handleIpChange, removeSlave,\n}) => {\n const [mouseOver, setMouseOver] = useState(false);\n return (\n { setMouseOver(true); }}\n handleMouseLeave={() => { setMouseOver(false); }}\n otherDns={arrayOtherDns[i]}\n >\n \n removeSlave(i)}\n className={classnames(classes.closeIcon, {\n [classes.showIcon]: mouseOver,\n })}\n />\n
\n \n );\n};\n\nFormItem.propTypes = {\n i: PropTypes.number.isRequired,\n arrayOtherDns: PropTypes.array.isRequired,\n handleChangeNs: PropTypes.func.isRequired,\n handleIpChange: PropTypes.func.isRequired,\n removeSlave: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)((FormItem));\n","import React from 'react';\nimport { withI18n } from 'react-i18next';\nimport { withStyles, Button } from '@material-ui/core';\nimport PropTypes from 'prop-types';\nimport WarningBlock from '../WarningBlock';\nimport styles from './styles';\nimport FormItem from './FormItem';\n\nconst OtherBlock = ({\n classes, t, arrayOtherDns, addSlave, handleChangeNs, removeSlave, handleIpChange,\n}) => (\n \n\n
\n { arrayOtherDns.map((item, index) => (\n
\n
\n ))}\n
\n\n
\n {arrayOtherDns.length < 5 && (\n addSlave()}\n data-testid=\"addSlaveButton\"\n >\n {t('dnsSetup.other.button')}\n \n )}\n
\n\n
\n
\n
\n \n \n
\n
{t(`dnsSetup.${nameServer}.title`)} \n
{t(`dnsSetup.${nameServer}.description`)}
\n \n );\n};\n\nRadioBlock.propTypes = {\n nameServer: PropTypes.string.isRequired,\n};\n\nexport default withI18n()(withStyles(styles)((RadioBlock)));\n","const styles = () => ({\n actionsWrapper: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'center',\n marginTop: '19px',\n },\n\n action: {\n marginBottom: '10px',\n marginTop: '5px',\n minWidth: '105px',\n\n '&:last-child': {\n marginLeft: '10px',\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withI18n } from 'react-i18next';\nimport { withStyles } from '@material-ui/core';\nimport PropTypes from 'prop-types';\nimport OutlineButton from '@/components/Buttons/OutlineButton';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport styles from './styles';\n\nconst ActionButtons = ({\n classes, t, handleCancel, disabledButtons, handleSave, loading,\n}) => (\n \n
handleCancel(e)}\n className={classes.action}\n disabled={disabledButtons}\n id=\"cancelSaveNameServerButton\"\n data-testid=\"cancelSaveNameServerButton\"\n >\n {t('cancel')}\n \n \n {t('save')}\n \n \n
\n
handleChangeSelectValue(e)}\n selectTestId=\"hostingBlockSelect\"\n selectInputTestId=\"hostingBlockInput\"\n />\n { hosting.master && hosting.slave && (\n \n Master \n {hosting.master} \n Slave 1 \n {hosting.slave} \n \n )}\n \n
\n
\n Master \n {native.master} \n Slave 1 \n {native.slave} \n \n
\n { Object.keys(nameServerOptions).map((nameServer) => {\n const showHostingBlock = nameServer === 'hosting' && DNSContextDetails[nameServer] === true;\n const showOtherBlock = nameServer === 'other' && DNSContextDetails[nameServer] === true;\n const showNativeBlock = nameServer === 'native' && DNSContextDetails[nameServer] === true;\n\n return (\n handleExpand(nameServer)}\n onKeyDown={() => null}\n role=\"button\"\n tabIndex=\"0\"\n key={`${nameServer}Block`}\n data-testid={`${nameServer}Block`}\n >\n addSlave()}\n handleChangeNs={handleChangeNs}\n setDisabledButtons={() => setDisabledButtons(false)}\n handleIpChange={handleIpChange}\n removeSlave={removeSlave}\n />\n )}\n\n {showNativeBlock && (\n handleSave({ nameServer, featureTogglesZoneManager })}\n loading={loadingHosting || loadingOther || loadingNative}\n />\n )}\n \n );\n })}\n\n \n );\n};\n\nDomainSetupOptions.defaultProps = {\n disabledBtn: true,\n};\n\nexport default withI18n()(withStyles(styles)((DomainSetupOptions)));\n","\nconst styles = theme => ({\n section: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n },\n titleWrapper: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-start',\n marginBottom: 9,\n },\n info: {\n fill: theme.color.indigo,\n fontSize: 17,\n marginLeft: 8,\n },\n title: {\n color: theme.color.tundora,\n fontSize: '24px',\n userSelect: 'none',\n },\n explanation: {\n alignItems: 'center',\n color: theme.color.dustyGgray,\n display: 'block',\n flexWrap: 'wrap',\n fontSize: 16,\n lineHeight: '19px',\n marginBottom: 8,\n\n '& > span': {\n borderBottom: `1px dashed ${theme.color.indigo}`,\n color: theme.color.indigo,\n },\n\n '& > svg': {\n fill: theme.color.indigo,\n width: 16,\n },\n },\n knowMore: {\n marginBottom: 12,\n },\n explanationLink: {\n color: theme.color.indigo,\n fontWeight: 500,\n },\n customPopper: {\n opacity: 1,\n },\n customTooltip: {\n backgroundColor: theme.color.doveGray,\n borderRadius: 0,\n fontSize: 12,\n lineHeight: '14px',\n textAlign: 'center',\n },\n});\n\nexport default styles;\n","import React, { useContext } from 'react';\nimport { withStyles, Typography, Tooltip } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport InfoIcon from '@material-ui/icons/Info';\nimport { SUPPORT_ARTICLE_KNOW_MORE_DNS } from '@/config/urls/supportUrls';\nimport { DNSContext } from '@/contexts/DNS/context';\nimport DomainSetupOptions from '@/components/Dns/DomainSetupOptions';\nimport styles from './styles';\n\n\nconst DomainSetup = ({ classes, t }) => {\n const { details } = useContext(DNSContext);\n return (\n \n );\n};\n\nexport default withI18n()(withStyles(styles)(DomainSetup));\n","const styles = theme => ({\n cardWrapper: {\n alignItems: 'center',\n backgroundColor: 'white',\n borderLeft: `5px solid ${theme.color.indigo}`,\n boxShadow: '0px 2px 4px 0px #DBDBDB',\n display: 'flex',\n flexWrap: 'wrap',\n marginBottom: 24,\n padding: '24px 38px 24px 36px',\n width: '100%',\n\n [theme.breakpoints.down('xs')]: {\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n },\n title: {\n fontSize: '24px',\n color: theme.color.tundora,\n userSelect: 'none',\n [theme.breakpoints.up(379)]: {\n whiteSpace: 'nowrap',\n },\n },\n dBlock: {\n display: 'block',\n },\n description: {\n color: theme.color.regentGray,\n display: 'flex',\n fontSize: '16px',\n lineHeight: '19px',\n margin: '18px 0 0px 0',\n alignItems: 'center',\n\n [theme.breakpoints.down(500)]: {\n display: 'block',\n },\n\n },\n link: {\n alignItems: 'center',\n color: theme.color.indigo,\n display: 'flex',\n fontSize: 16,\n marginLeft: 5,\n },\n});\nexport default styles;\n","import React from 'react';\nimport { withI18n } from 'react-i18next';\nimport {\n withStyles, Typography,\n} from '@material-ui/core';\nimport { useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport DomainSetup from '@/components/Dns/DomainSetup';\nimport Loader from '@/components/Layout/Loader';\nimport styles from './styles';\n\nconst ChoosenDomainWithoutProvider = ({\n classes, t, loading,\n}) => {\n const notifications = useSelector(state => state.dnsDetails.notifications);\n\n\n if (loading) {\n return (\n \n
\n );\n }\n\n return (\n \n { notifications.length > 0\n ? (\n
\n
\n {t('whichDnsToChange.title2')}\n \n
\n {t('whichDnsToChange.text')}\n {t('whichDnsToChange.text2')} \n
\n
\n )\n :
\n }\n
\n
{t('whichDnsToChange.title2')} \n
\n {t('dns.choiceOption')}\n \n \n <>0\n 1 \n <>2\n \n )}\n >\n {t('dns.choiceOption_2')} \n \n \n {t('dns.choiceOption_3')}\n \n\n
\n\n
\n {t('dns.notRegistred.title')} \n {t('dns.notRegistred.text')} \n {t('dns.notRegistred.link')} \n
\n\n
\n \n {t('dns.notRegistred.orText')}\n \n
\n\n
\n
{t('dns.anotherProvider.title')} \n
{t('dns.anotherProvider.text')} \n
\n
handleCollapse('transferDomain')}\n data-testid=\"handleCollapseButtonOne\"\n >\n \n \n {handleArrows(transferDomain)}\n \n\n \n \n {t('dns.transferDomain.text')} \n {t('dns.transferDomain.link')} \n
\n \n\n handleCollapse('changeDns')}\n data-testid=\"handleCollapseButtonTwo\"\n >\n \n \n {handleArrows(changeDns)}\n \n\n \n {t('dns.changeDns.textUp')} \n {t('dns.changeDns.textDown')} \n \n {CHANGE_DNS_OTHER_PROVIDER_URL.map(provider => (\n \n {provider.label}\n \n ))}\n
\n {t('dns.changeDns.textOtherProvider')} \n \n \n
\n
\n\n
\n );\n }\n\n const ShouldDisplayChoosenDomainWithoutProvider = chosenDomain !== '' && !anotherProvider;\n const ShouldDisplayZoneManager = featureTogglesZoneManager.native;\n\n return (\n <>\n \n
\n \n );\n};\n\nDomainChoice.propTypes = {\n domainId: PropTypes.string.isRequired,\n};\n\nexport default withRouter(withI18n()(withStyles(styles)(DomainChoice)));\n","const styles = theme => ({\n container: {\n paddingTop: '20px',\n minHeight: '80vh',\n [theme.breakpoints.up(960)]: {\n paddingTop: 0,\n },\n },\n});\n\nexport default styles;\n","import React, { useState, useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useParams } from 'react-router-dom';\nimport { withStyles } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport Loader from '@/components/Layout/Loader';\nimport DomainChoice from '@/components/Dns/DomainChoice';\nimport { ContentContainer } from '@/components/Cards/ContentContainer';\nimport { loadDnsDomainList, loadDnsDomainListExternal } from '@/redux/actions/dnsForward';\nimport DNSContextProvider from '@/contexts/DNS/context';\nimport styles from './styles';\n\nconst Dns = ({ classes, t }) => {\n const dispatch = useDispatch();\n const loading = useSelector(state => state.dnsList.loading);\n const [domainId, setDomainId] = useState(null);\n const { id } = useParams();\n\n useEffect(() => {\n dispatch(loadDnsDomainList()).then(() => {\n setDomainId(id);\n });\n dispatch(loadDnsDomainListExternal());\n }, [dispatch, id]);\n\n return (\n \n {(!loading && domainId)\n ? (\n \n \n )\n : (\n \n );\n};\n\nexport default withI18n()(withStyles(styles, { withTheme: true })((Dns)));\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '498px';\n\nexport const PageContainer = styled.div`\n ${({ theme }) => css`\n padding: 0 40px 100px;\n\n @media (max-width: ${theme.breakpoints.md}) {\n padding: 0;\n }\n `}\n`;\n\nexport const CreateTicketWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n padding: 24px;\n `}\n`;\n\nexport const SkeletonWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 24px;\n `}\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const SelectProductWrapper = styled.div`\n max-width: ${defaultWrapperWidth};\n width: 100%;\n`;\n\nexport const RadioSection = styled.div`\n max-width: ${defaultWrapperWidth};\n width: 100%;\n`;\n\nexport const RadioWrapper = styled.div`\n display: flex;\n gap: 16px;\n max-width: ${defaultWrapperWidth};\n width: 100%;\n`;\n\nexport const Label = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n display: block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 0px;\n `}\n`;\n\nexport const RadioLabel = styled.label`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowDark};\n cursor: pointer;\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 4px;\n\n label {\n width: 19px;\n height: 19px;\n }\n `}\n`;\n\nexport const SelectNeedWrapper = styled(SelectProductWrapper)`\n margin: 24px 0px 0px;\n`;\n\nexport const FormsWrapper = styled(SelectProductWrapper)`\n margin: 24px 0px 0px;\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 0 0px 24px;\n max-width: 1006px;\n `}\n`;\nexport const ButtonWrapper = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n`;\n\nexport const Feedback = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n height: 75vh;\n justify-content: center;\n `}\n`;\n\nexport const LoadingTicketText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: 30px;\n `}\n`;\n\nexport const LoadingTicketTitle = styled.p`\n ${({ theme, marginBottom, maxWidth }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: 31.2px;\n margin-bottom: ${marginBottom ? '24px' : 0};\n margin-top: 10px;\n text-align: center;\n max-width: ${`${maxWidth}px` || '100%'};\n `}\n`;\n\nexport const LoadingTicketDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 24px;\n max-width: 390px;\n margin: 0;\n margin-bottom: 32px;\n text-align: center;\n `}\n`;\n\nexport const SelectDescription = styled(Description)`\n margin-top: 0;\n margin-bottom: 10px;\n`;\n","/* eslint-disable no-empty */\nimport useLocale from '@/hooks/useLocale';\nimport { useCallback, useState } from 'react';\nimport yaml from 'js-yaml';\nimport { COUNTRY, config } from '@/config';\nimport { useHistory } from 'react-router';\nimport { HgProducts } from '@/components/SupportForms/SupportForms.types';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport {\n CHARLIE_MIGRADE_SUPPORT_FORMS_GENMERAL_DOUBTS,\n CHARLIE_MIGRATE_RESELLER,\n NEW_SUPPORT,\n CHARLIE_UPGRADE_SITEBUILDER_FORM,\n CHARLIE_SSL_EV_FORM,\n CHARLIE_RESTORATE_SITE_BUILDER_FORM,\n} from '@/config/GrowthBook/constants';\n\nconst useSupportForms = ({\n defaultLoading = true,\n defaultProductsOptions = [],\n defaultFormsValue = [],\n defaultSelectedProductOption = '',\n defaultProductsArray = [],\n defaultSelectedNeed = null,\n defaultTechnicalOptions = [],\n defaultBillingOptions = [],\n defaultSelectedSector = '',\n defaultselectedProductData = null,\n forceState,\n rules,\n}) => {\n const history = useHistory();\n const generalDoubtsV2 = useFeatureIsOn(CHARLIE_MIGRADE_SUPPORT_FORMS_GENMERAL_DOUBTS);\n const upgradeSitebuilder = useFeatureIsOn(CHARLIE_UPGRADE_SITEBUILDER_FORM);\n const sslEv = useFeatureIsOn(CHARLIE_SSL_EV_FORM);\n const migrateReseller = useFeatureIsOn(CHARLIE_MIGRATE_RESELLER);\n const restorateSiteBuilderIsEnabled = useFeatureIsOn(CHARLIE_RESTORATE_SITE_BUILDER_FORM);\n const useNewSupport = useFeatureIsOn(NEW_SUPPORT);\n const { ticket: ticketsLocale, routes: routesLocale } = useLocale();\n const [billingOptions, setBillingOptions] = useState(defaultBillingOptions);\n const [technicalOptions, setTechnicalOptions] = useState(defaultTechnicalOptions);\n const [products, setProducts] = useState(defaultProductsArray);\n const [defaultForms, setDefaultForms] = useState(defaultFormsValue);\n const [productsOptions, setProductsOptions] = useState(defaultProductsOptions);\n const [loading, setLoading] = useState(defaultLoading);\n const [selectedProductOption, setSelectedProductOption] = useState(defaultSelectedProductOption);\n const [selectedProductFormmd, setSelectedProductFormmd] = useState(null);\n const [selectedProduct, setSelectedProduct] = useState(null);\n const [selectedProductData, setSelectedProductData] = useState(defaultselectedProductData);\n const [selectedSector, setSelectedSector] = useState(defaultSelectedSector);\n const [selectedNeed, setSelectedNeed] = useState(defaultSelectedNeed);\n const [needsOptions, setNeedsOptions] = useState(null);\n const [activeProductsOptions, setActiveProductsOptions] = useState([]);\n\n const accountFormsV2 = useCallback(() => {\n const formsArray = [{\n label: ticketsLocale.forms.names.withoutEmailAccess,\n id: ticketsLocale.forms.names.withoutEmailAccess,\n key: ticketsLocale.forms.names.withoutEmailAccess,\n v2: true,\n }];\n\n formsArray.push({\n label: ticketsLocale.forms.names.affiliateProgram,\n id: ticketsLocale.forms.names.affiliateProgram,\n key: ticketsLocale.forms.names.affiliateProgram,\n v2: true,\n });\n\n isBRServer && formsArray.push({\n label: ticketsLocale.forms.names.nationalDomainTransfer,\n id: ticketsLocale.forms.names.nationalDomainTransfer,\n key: ticketsLocale.forms.names.nationalDomainTransfer,\n v2: true,\n });\n\n return formsArray;\n }, [ticketsLocale]);\n\n const technicalFormsV2 = useCallback(() => {\n const formsArray = [{\n label: ticketsLocale.forms.names.internalMigration,\n id: ticketsLocale.forms.names.internalMigration,\n key: ticketsLocale.forms.names.internalMigration,\n v2: true,\n }];\n\n formsArray.push({\n label: ticketsLocale.forms.names.restorateBackupHgRoutine,\n id: ticketsLocale.forms.names.restorateBackupHgRoutine,\n key: ticketsLocale.forms.names.restorateBackupHgRoutine,\n v2: true,\n });\n\n formsArray.push({\n label: ticketsLocale.forms.names.userBackupRestore,\n id: ticketsLocale.forms.names.userBackupRestore,\n key: ticketsLocale.forms.names.userBackupRestore,\n v2: true,\n });\n\n if (forceState && rules.generateBackup && rules.generateBackup.allowBackup) {\n formsArray.push({\n label: ticketsLocale.forms.names.generateBackup,\n id: ticketsLocale.forms.names.generateBackup,\n key: ticketsLocale.forms.names.generateBackup,\n v2: true,\n });\n }\n\n formsArray.push({\n label: ticketsLocale.forms.names.changePrimaryDomain,\n id: ticketsLocale.forms.names.changePrimaryDomain,\n key: ticketsLocale.forms.names.changePrimaryDomain,\n v2: true,\n });\n\n formsArray.push({\n label: ticketsLocale.forms.names.externalMigration,\n id: ticketsLocale.forms.names.externalMigration,\n key: ticketsLocale.forms.names.externalMigration,\n v2: true,\n });\n\n formsArray.push({\n label: ticketsLocale.forms.names.googleAdwordsCoupon,\n id: ticketsLocale.forms.names.googleAdwordsCoupon,\n key: ticketsLocale.forms.names.googleAdwordsCoupon,\n v2: true,\n });\n\n formsArray.push({\n label: ticketsLocale.forms.names.installExternalSsl,\n id: ticketsLocale.forms.names.installExternalSsl,\n key: ticketsLocale.forms.names.installExternalSsl,\n v2: true,\n });\n\n formsArray.push({\n label: ticketsLocale.forms.names.restorateCancelledPlan,\n id: ticketsLocale.forms.names.restorateCancelledPlan,\n key: ticketsLocale.forms.names.restorateCancelledPlan,\n v2: true,\n });\n\n isBRServer && formsArray.push({\n label: ticketsLocale.forms.names.generateCSR,\n id: ticketsLocale.forms.names.generateCSR,\n key: ticketsLocale.forms.names.generateCSR,\n v2: true,\n });\n\n if (restorateSiteBuilderIsEnabled) {\n formsArray.push({\n label: ticketsLocale.forms.names.restorateSiteBuilderAccess,\n id: ticketsLocale.forms.names.restorateSiteBuilderAccess,\n key: ticketsLocale.forms.names.restorateSiteBuilderAccess,\n v2: true,\n });\n }\n\n formsArray.push({\n label: ticketsLocale.forms.names.privateSslCertificate,\n id: ticketsLocale.forms.names.privateSslCertificate,\n key: ticketsLocale.forms.names.privateSslCertificate,\n v2: true,\n });\n\n formsArray.push({\n label: ticketsLocale.forms.names.widlcardSslCertificate,\n id: ticketsLocale.forms.names.widlcardSslCertificate,\n key: ticketsLocale.forms.names.widlcardSslCertificate,\n v2: true,\n });\n\n isBRServer && formsArray.push({\n label: ticketsLocale.forms.names.enterPrisessslCertificate,\n id: ticketsLocale.forms.names.enterPrisessslCertificate,\n key: ticketsLocale.forms.names.enterPrisessslCertificate,\n v2: true,\n });\n\n formsArray.push({\n label: ticketsLocale.forms.names.installWhmcs,\n id: ticketsLocale.forms.names.installWhmcs,\n key: ticketsLocale.forms.names.installWhmcs,\n v2: true,\n });\n\n formsArray.push({\n label: ticketsLocale.forms.names.reloadRebuild,\n id: ticketsLocale.forms.names.reloadRebuild,\n key: ticketsLocale.forms.names.reloadRebuild,\n v2: true,\n });\n\n formsArray.push({\n label: ticketsLocale.forms.names.moreEmails,\n id: ticketsLocale.forms.names.moreEmails,\n key: ticketsLocale.forms.names.moreEmails,\n v2: true,\n });\n\n isBRServer && formsArray.push({\n label: ticketsLocale.forms.names.migrateVpsDedicated,\n id: ticketsLocale.forms.names.migrateVpsDedicated,\n key: ticketsLocale.forms.names.migrateVpsDedicated,\n v2: true,\n });\n\n !isBRServer && formsArray.push({\n label: ticketsLocale.forms.names.migrateAccountVpsDedicated,\n id: ticketsLocale.forms.names.migrateAccountVpsDedicated,\n key: ticketsLocale.forms.names.migrateAccountVpsDedicated,\n v2: true,\n });\n\n formsArray.push({\n label: ticketsLocale.forms.names.updateWhmcsLicense,\n id: ticketsLocale.forms.names.updateWhmcsLicense,\n key: ticketsLocale.forms.names.updateWhmcsLicense,\n v2: true,\n });\n\n if (upgradeSitebuilder && !isBRServer) {\n formsArray.push({\n label: ticketsLocale.forms.names.upgradeSiteBuilder,\n id: ticketsLocale.forms.names.upgradeSiteBuilder,\n key: ticketsLocale.forms.names.upgradeSiteBuilder,\n v2: true,\n });\n }\n\n if (sslEv && !isBRServer) {\n formsArray.push({\n label: ticketsLocale.forms.names.sslEV,\n id: ticketsLocale.forms.names.sslEV,\n key: ticketsLocale.forms.names.sslEV,\n v2: true,\n });\n }\n\n formsArray.push({\n label: ticketsLocale.forms.names.whmcsAcquisition,\n id: ticketsLocale.forms.names.whmcsAcquisition,\n key: ticketsLocale.forms.names.whmcsAcquisition,\n v2: true,\n });\n\n if (migrateReseller) {\n formsArray.push({\n label: ticketsLocale.forms.names.migrateReseller,\n id: ticketsLocale.forms.names.migrateReseller,\n key: ticketsLocale.forms.names.migrateReseller,\n v2: true,\n });\n }\n\n return formsArray;\n }, [\n ticketsLocale,\n upgradeSitebuilder,\n restorateSiteBuilderIsEnabled,\n sslEv,\n migrateReseller,\n forceState,\n rules,\n ]);\n\n const billingFormsV2 = useCallback(() => {\n const formsArray = [];\n\n if (generalDoubtsV2) {\n formsArray.push({\n label: ticketsLocale.forms.names.financialDoubts,\n id: ticketsLocale.forms.names.financialDoubts,\n key: ticketsLocale.forms.names.financialDoubts,\n v2: true,\n });\n }\n\n const productPid = (selectedProductData && !!selectedProductData.pid && selectedProductData.pid)\n || (selectedProduct && selectedProduct.pid);\n\n if (HgProducts && HgProducts.DOMAINS_ALL && !HgProducts.DOMAINS_ALL.includes(productPid)) {\n formsArray.push({\n label: ticketsLocale.forms.names.changeDueDate,\n id: ticketsLocale.forms.names.changeDueDate,\n key: ticketsLocale.forms.names.changeDueDate,\n v2: true,\n });\n }\n\n formsArray.push({\n label: ticketsLocale.forms.names.upgradeVps,\n id: ticketsLocale.forms.names.upgradeVps,\n key: ticketsLocale.forms.names.upgradeVps,\n v2: true,\n });\n\n if (isBRServer) {\n formsArray.push({\n label: ticketsLocale.forms.names.upgradeSiteLock,\n id: ticketsLocale.forms.names.upgradeSiteLock,\n key: ticketsLocale.forms.names.upgradeSiteLock,\n v2: true,\n });\n }\n\n\n formsArray.push({\n label: ticketsLocale.forms.names.upgradeCodeGuard,\n id: ticketsLocale.forms.names.upgradeCodeGuard,\n key: ticketsLocale.forms.names.upgradeCodeGuard,\n v2: true,\n });\n\n formsArray.push({\n label: ticketsLocale.forms.names.ChangePaymentcycle,\n id: ticketsLocale.forms.names.ChangePaymentcycle,\n key: ticketsLocale.forms.names.ChangePaymentcycle,\n v2: true,\n });\n\n return formsArray;\n }, [ticketsLocale, generalDoubtsV2, selectedProductData, selectedProduct]);\n\n\n const validate = useCallback(({ selectedProductData, rule }) => {\n const { method } = rule;\n let groups = null;\n let ruleProducts = null;\n let isOk = false;\n\n if (rule.or) {\n const ruleResult = rule.or.some(rule => validate({ selectedProductData, rule })); // recursive call\n return ruleResult;\n }\n\n if (rule.and) {\n const ruleResult = rule.and.every(rule => validate({ selectedProductData, rule })); // recursive call\n return ruleResult;\n }\n\n switch (method) {\n case 'isInGroup':\n groups = rule.vars.map(r => HgProducts[r]);\n if (groups) {\n groups.forEach((group) => {\n if (group && group.includes(selectedProductData.pid)) {\n isOk = true;\n }\n });\n }\n return isOk;\n case 'isNotInGroup':\n groups = rule.vars.map(r => HgProducts[r]);\n if (groups) {\n groups.forEach((group) => {\n if (!group.includes(selectedProductData.pid)) {\n isOk = true;\n }\n });\n }\n return isOk;\n case 'isProduct':\n if (Array.isArray(rule.vars)) {\n ruleProducts = rule.vars.map(r => HgProducts[r]);\n return ruleProducts.includes(selectedProductData.pid);\n }\n return rule.vars === selectedProductData.pid;\n case 'notIsProduct':\n if (Array.isArray(rule.vars)) {\n ruleProducts = rule.vars.map(r => HgProducts[r]);\n return !ruleProducts.includes(selectedProductData.pid);\n }\n return rule.vars !== selectedProductData.pid;\n case 'eq':\n if (rule.vars[0].pop() === 'brand') {\n switch (rule.vars[1]) {\n case 1:\n return COUNTRY === 'mx';\n case 2:\n return COUNTRY === 'cl';\n case 3:\n return COUNTRY === 'co';\n default:\n return false;\n }\n }\n return false;\n default:\n return false;\n }\n }, []);\n\n const parseForm = (data) => {\n const splitted = data.split('---');\n const form = yaml.load(splitted[1]);\n return form;\n };\n\n const requestForms = useCallback((preSelectedCategory) => {\n setLoading(true);\n try {\n fetch(`${config.API_URL}/formconfig_new`, {\n headers: {\n Authorization: localStorage.getItem('token'),\n },\n })\n .then((response) => {\n try {\n const jsonResp = response.json();\n return jsonResp;\n } catch (e) {\n return response;\n }\n })\n .then((formData) => {\n const { products } = formData.data;\n const defaultForms = formData.data.forms;\n\n const billingForms = [];\n const technicalForms = [];\n const productsOptions = [];\n let commonForms = [];\n\n\n technicalFormsV2().forEach(form => technicalForms.push(form));\n billingFormsV2().forEach(form => billingForms.push(form));\n\n setTechnicalOptions([...technicalForms.sort((a, b) => {\n if (b.label > a.label) {\n return -1;\n }\n return 1;\n })]);\n\n setBillingOptions([...billingForms.sort((a, b) => {\n if (b.label > a.label) {\n return -1;\n }\n return 1;\n })]);\n\n const activeProducts = [...products].filter(product => product.active);\n if (activeProducts.length) {\n setActiveProductsOptions(activeProducts);\n productsOptions.push({ value: 'active_products', label: ticketsLocale.openNewTicketPage.selectProductGroups.activeProducts, title: true });\n }\n activeProducts.forEach((product) => {\n productsOptions.push({\n label: `${product.name} - ${product.domain}`,\n value: product.id,\n type: 'product',\n });\n });\n\n const suspendedProducts = [...products].filter(product => !product.active);\n if (suspendedProducts.length) {\n productsOptions.push({ value: 'suspended_products', label: ticketsLocale.openNewTicketPage.selectProductGroups.suspendedProducts, title: true });\n }\n suspendedProducts.forEach((product) => {\n productsOptions.push({\n label: `${product.name} - ${product.domain}`,\n value: product.id,\n type: 'product',\n });\n });\n\n productsOptions.push(\n {\n value: 'my_account',\n label: ticketsLocale.openNewTicketPage.selectProductGroups.myAccount,\n title: true,\n },\n );\n\n accountFormsV2().forEach(form => productsOptions.push(form));\n\n commonForms = [\n { value: 'common', label: ticketsLocale.openNewTicketPage.selectProductGroups.commonQuestions, title: true },\n ...ticketsLocale.commonForms,\n ];\n\n if (useNewSupport && preSelectedCategory) {\n const preSelectedCategoryForm = commonForms.find(item => item.value === preSelectedCategory);\n if (preSelectedCategoryForm) {\n setSelectedProductOption(preSelectedCategoryForm.label);\n }\n } else {\n setSelectedProductOption(defaultSelectedProductOption);\n }\n\n useNewSupport && productsOptions.push(...commonForms);\n\n setProducts(products);\n setDefaultForms(defaultForms);\n setProductsOptions(productsOptions);\n setLoading(false);\n });\n } catch (e) { }\n }, [\n ticketsLocale,\n technicalFormsV2,\n billingFormsV2,\n accountFormsV2,\n useNewSupport,\n defaultSelectedProductOption,\n ]);\n\n const checkProduct = useCallback(() => {\n if (productsOptions && selectedProductOption) {\n const option = defaultForms.find(item => item.label === selectedProductOption);\n\n if (option && option.id) {\n history.push(`${routesLocale.help}${routesLocale.createTicket}/${`${option.key}`}`);\n setSelectedProductFormmd(`${option.key}`);\n }\n\n if (!option) {\n const productSelectedOption = productsOptions.find(item => item.label === selectedProductOption);\n const product = productSelectedOption && products.find(item => item.id === productSelectedOption.value);\n\n if (product) {\n setSelectedProduct(product);\n setSelectedProductFormmd(product.id);\n setSelectedProductData(product);\n }\n }\n }\n }, [selectedProductOption, history, routesLocale, productsOptions, defaultForms, products]);\n\n const checkNeed = useCallback(() => {\n if (billingOptions && technicalOptions && selectedNeed) {\n const formsArray = selectedSector === 'technical' ? [...technicalOptions] : [...billingOptions];\n const option = formsArray.find(item => item.label === selectedNeed);\n\n if (option && option.id && !option.v2) {\n history.push(`${routesLocale.help}${routesLocale.createTicket}/${selectedProductFormmd}/${selectedSector}/${`${option.key}`}`);\n }\n }\n }, [\n history,\n billingOptions,\n technicalOptions,\n selectedNeed,\n routesLocale,\n selectedProductFormmd,\n selectedSector,\n ]);\n\n const removeFormsPerPlanAttributes = useCallback(({\n selectedProduct,\n HgProducts,\n formsOptions,\n }) => {\n let newFormsOptions = [...formsOptions];\n const isShared = HgProducts.SHARED_ALL.includes(selectedProduct.pid);\n const isWpHosting = HgProducts.WPHOSTING_ALL.includes(selectedProduct.pid);\n const isReseller = HgProducts.RESELLER_ALL.includes(selectedProduct.pid);\n const isVps = HgProducts.VPS_ALL.includes(selectedProduct.pid);\n const isDedicated = HgProducts.DEDICATED_ALL.includes(selectedProduct.pid);\n const isPlus = HgProducts.PLUS_ALL.includes(selectedProduct.pid);\n const isSitelock = HgProducts.SITELOCK_ALL.includes(selectedProduct.pid);\n const isCodeGuard = HgProducts.CODEGUARD_ALL.includes(selectedProduct.pid);\n const isStreaming = HgProducts.STREAMING_ALL.includes(selectedProduct.pid);\n const isWeebly = HgProducts.WEEBLY_ALL.includes(selectedProduct.pid);\n const isSiteBuilderPlan = !isBRServer && [HgProducts.WEB_HOSTING_CREADOR_DE_SITIOS_PERSONAL, HgProducts.WEB_HOSTING_CREADOR_DE_SITIOS_PROFESIONAL].includes(selectedProduct.pid);\n const isSslEvPlan = !isBRServer && [\n HgProducts.WEEBLY_BASICO,\n HgProducts.WEEBLY_INICIANTE,\n HgProducts.WEEBLY_PROFESIONAL,\n HgProducts.RESELLER_ALUMINIO,\n HgProducts.RESELLER_COBRE,\n HgProducts.RESELLER_DIAMANTE,\n HgProducts.RESELLER_ORO,\n HgProducts.RESELLER_PLATA,\n HgProducts.RESELLER_INICIANDO,\n HgProducts.RESELLER_CRECIENDO,\n HgProducts.RESELLER_EXPANDIENDO,\n HgProducts.RESELLER_VETERANO,\n HgProducts.RESELLER_VETERANO_100,\n HgProducts.RESELLER_VETERANO_150,\n HgProducts.RESELLER_VETERANO_200,\n HgProducts.RESELLER_VETERANO_300,\n HgProducts.RESELLER_VETERANO_500,\n HgProducts.RESELLER_VETERANO_1000,\n HgProducts.RESELLER_VETERANO_1200,\n ...HgProducts.DEDICATED_ALL,\n ...HgProducts.VPS_ALL,\n ].includes(selectedProduct.pid);\n\n const isNewVps = [\n HgProducts.VPS_ENTRY,\n HgProducts.VPS_OPTIMIZED,\n HgProducts.VPS_PLATINUM,\n HgProducts.VPS_STANDARD,\n HgProducts.VPS_2,\n HgProducts.VPS_4,\n HgProducts.VPS_4_PLUS,\n HgProducts.VPS_6,\n HgProducts.VPS_8,\n ].includes(selectedProduct.pid);\n\n const isDomain = HgProducts.DOMAINS_ALL.includes(selectedProduct.pid);\n\n const isSitelockEnterprise = HgProducts && HgProducts.SITELOCK_ENTERPRISE === selectedProduct.pid;\n\n const shouldRemoveChangePrimaryDomain = (!isShared && !isReseller && !isVps && !isDedicated && !isPlus) || isWpHosting;\n const shouldRemoveInternalMigration = !isShared && !isPlus;\n const shouldRemoveExternalMigration = !isShared && !isPlus;\n const shouldRemoveGoogleAdwordsCoupon = !isShared && !isReseller && !isPlus;\n const shouldRemoveRestorateCancelledPlan = !isShared && !isReseller && !isPlus;\n const shouldRemoveRestorateSiteBuilderAccess = !isShared && !isReseller && !isPlus;\n const shouldRemoveSitelockUpgrade = isBRServer && (!isSitelock || isSitelockEnterprise);\n const shouldRemoveCodeGuardUpgrade = !isCodeGuard;\n const shouldRemoveChangeCycle = !isVps && !isWpHosting && !isStreaming && !isDedicated;\n const shouldRemoveEnterpriseSslCertificate = isBRServer && !isVps && !isDedicated && !isReseller && !isWeebly;\n const shouldRemovePrivateSslCertificate = isBRServer\n ? !isVps && !isDedicated && !isReseller\n : !isVps && !isDedicated && !isReseller && !isWeebly;\n const canDisplayVpsUpgrade = HgProducts.NEW_VPS.includes(selectedProduct.pid)\n ? !!HgProducts && selectedProduct.pid !== HgProducts.VPS_8\n : true;\n const shouldRemoveReloadRebuild = !isVps && !isDedicated;\n const shouldRemoveMoreEmailsForms = !isVps && !isDedicated;\n const shouldRemoveExternalSsl = !isShared\n && !isReseller\n && !isVps\n && !isDedicated\n && !isPlus\n && HgProducts.WORDPRESS_PRO !== selectedProduct.pid\n && HgProducts.WORDPRESS_VIP !== selectedProduct.pid;\n const shouldRemoveInstallWhmcs = !isReseller && !isDedicated;\n const shouldRemoveMigrateVpsDedicated = !isVps && !isDedicated;\n const shouldRemoveVpsUpgrade = !isNewVps || !canDisplayVpsUpgrade;\n const shouldRemoveUpdateWhmcs = !isReseller && !isDedicated;\n const shouldRemoveWhmcsAcquisition = !isReseller && !isDedicated;\n const shouldRemoveResellerMigration = !isReseller;\n const shouldRemoveUpgradeSitebuilder = !isSiteBuilderPlan;\n const shouldRemoveSslEv = !isSslEvPlan;\n const shouldRemoveChangedueDate = isDomain;\n\n if (shouldRemoveChangePrimaryDomain) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.changePrimaryDomain);\n }\n\n if (shouldRemoveInternalMigration) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.internalMigration);\n }\n\n if (shouldRemoveExternalMigration) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.externalMigration);\n }\n\n if (shouldRemoveGoogleAdwordsCoupon) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.googleAdwordsCoupon);\n }\n\n if (shouldRemoveExternalSsl) {\n newFormsOptions = newFormsOptions.filter(item => !(item && item.id && item.id.toString().includes(ticketsLocale.forms.names.installExternalSsl)));\n }\n\n if (shouldRemoveRestorateCancelledPlan) {\n newFormsOptions = newFormsOptions.filter(item => !(item && item.id && item.id.toString().includes(ticketsLocale.forms.names.restorateCancelledPlan)));\n }\n\n if (shouldRemoveRestorateSiteBuilderAccess) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.restorateSiteBuilderAccess);\n }\n\n if (shouldRemoveVpsUpgrade) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.upgradeVps);\n }\n\n if (shouldRemoveSitelockUpgrade) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.upgradeSiteLock);\n }\n\n if (shouldRemoveCodeGuardUpgrade) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.upgradeCodeGuard);\n }\n\n if (shouldRemoveUpgradeSitebuilder) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.upgradeSiteBuilder);\n }\n\n if (shouldRemoveChangeCycle) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.ChangePaymentcycle);\n }\n\n if (shouldRemovePrivateSslCertificate) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.privateSslCertificate);\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.widlcardSslCertificate);\n }\n\n if (shouldRemoveEnterpriseSslCertificate) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.enterPrisessslCertificate);\n }\n\n if (shouldRemoveInstallWhmcs) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.installWhmcs);\n }\n\n if (shouldRemoveReloadRebuild) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.reloadRebuild);\n }\n\n if (shouldRemoveMoreEmailsForms) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.moreEmails);\n }\n\n if (shouldRemoveMigrateVpsDedicated) {\n if (isBRServer) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.migrateVpsDedicated);\n }\n\n if (!isBRServer) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.migrateAccountVpsDedicated);\n }\n }\n\n if (shouldRemoveUpdateWhmcs) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.updateWhmcsLicense);\n }\n\n if (shouldRemoveWhmcsAcquisition) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.whmcsAcquisition);\n }\n\n if (shouldRemoveResellerMigration) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.migrateReseller);\n }\n\n if (shouldRemoveSslEv) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.sslEV);\n }\n\n if (shouldRemoveChangedueDate) {\n newFormsOptions = newFormsOptions.filter(item => item.id !== ticketsLocale.forms.names.changeDueDate);\n }\n\n return newFormsOptions;\n }, [\n ticketsLocale,\n ]);\n\n const checkSector = useCallback(() => {\n if (selectedSector) {\n let isOk = false;\n let formsOptions = selectedSector === 'technical' ? [...technicalOptions] : [...billingOptions];\n formsOptions = formsOptions.filter((item) => {\n if (item && item.form && item.form.showWhen === true) {\n isOk = item.form.showWhen;\n }\n\n if (item && item.form && item.form.showWhen instanceof Array) {\n isOk = item.form.showWhen.some(rule => validate({ selectedProductData, rule }));\n }\n\n if (item.v2) {\n isOk = true;\n }\n\n const isResellerOrShared = selectedProduct && (\n HgProducts.SHARED_ALL.includes(selectedProduct.pid)\n || HgProducts.RESELLER_ALL.includes(selectedProduct.pid)\n || HgProducts.VPS_ALL.includes(selectedProduct.pid)\n || HgProducts.DEDICATED_ALL.includes(selectedProduct.pid)\n );\n\n const isVps = selectedProduct && HgProducts.VPS_ALL.includes(selectedProduct.pid);\n const isDedicated = selectedProduct && HgProducts.DEDICATED_ALL.includes(selectedProduct.pid);\n\n const backupOptions = [\n ticketsLocale.forms.names.generateBackup,\n ticketsLocale.forms.names.restorateBackupHgRoutine,\n ticketsLocale.forms.names.userBackupRestore,\n 54,\n ];\n\n if (!isResellerOrShared && item && backupOptions.includes(item.id)) {\n isOk = false;\n }\n\n if (selectedProduct && HgProducts.PLUS === selectedProduct.pid && item && item.id === ticketsLocale.forms.names.restorateBackupHgRoutine) {\n isOk = true;\n }\n\n if ((isVps || isDedicated) && item && item.id === ticketsLocale.forms.names.restorateBackupHgRoutine) {\n isOk = false;\n }\n\n return isOk;\n });\n\n if (selectedProduct && HgProducts) {\n formsOptions = removeFormsPerPlanAttributes({ selectedProduct, HgProducts, formsOptions });\n }\n\n setNeedsOptions(formsOptions);\n }\n setSelectedNeed(null);\n }, [\n billingOptions,\n technicalOptions,\n validate,\n selectedSector,\n selectedProductData,\n ticketsLocale,\n selectedProduct,\n removeFormsPerPlanAttributes,\n ]);\n\n const handleSelectedProductOption = useCallback((label) => {\n if (productsOptions) {\n setSelectedProductOption(label);\n }\n setSelectedProduct(null);\n setSelectedNeed(null);\n setSelectedSector(null);\n }, [productsOptions]);\n\n const useSupportFormsData = {\n requestForms,\n productsOptions,\n loading,\n checkProduct,\n checkNeed,\n checkSector,\n handleSelectedProductOption,\n selectedProductOption,\n selectedProduct,\n setSelectedSector,\n selectedSector,\n selectedNeed,\n needsOptions,\n setSelectedNeed,\n parseForm,\n requestedProducts: products,\n activeProductsOptions,\n setSelectedProductData,\n selectedProductData,\n };\n\n return useSupportFormsData;\n};\n\nexport default useSupportForms;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '498px';\n\nexport const Form = styled.form`\n position: relative;\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const RadioWrapper = styled(InputWrapper)`\n flex-direction: row;\n margin: 0px 0px 20px;\n`;\n\nexport const CheckboxWrapper = styled(InputWrapper)`\n gap: 8px;\n margin: 24px 0px;\n max-width: unset;\n`;\n\nexport const RadioLabel = styled.label`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowDark};\n cursor: pointer;\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 4px;\n\n label {\n width: 19px;\n height: 19px;\n }\n `}\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 0px 0px 4px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 0px;\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n lin-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\n\nexport const Warning = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 0px;\n\n strong {\n font-weight: ${theme.v2.font.family.medium};\n font-size: ${theme.v2.font.sizes.xs};\n }\n `}\n`;\n\nexport const Alert = styled.span`\n ${({ theme }) => css`\n align-items: flex-start;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 40px;\n gap: 8px;\n\n svg {\n flex-shrink: 0;\n }\n `}\n`;\n\nexport const AlertDescription = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n max-width: 1006px;\n\n svg {\n flex-shrink: 0;\n }\n `}\n`;\n\nexport const WarningList = styled.ul`\n margin: 0px;\n padding: 0px 0px 0px 20px;\n`;\n\nexport const LinksWrapper = styled.span`\n display: flex;\n flex-direction: column;\n margin: 24px 0px 27px;\n\n svg {\n margin-right: 4px;\n flex-shrink: 0;\n }\n`;\n\nexport const Link = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 4px;\n lin-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n lin-height: ${theme.v2.font.lineHeight.text};\n }\n\n svg {\n margin-right: 4px;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const VideoWrapper = styled.div`\n ${({ theme }) => css`\n height: 261px;\n position: absolute;\n right: 0;\n top: -272px;\n width: 464px;\n\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n height: 225px;\n margin-bottom: 24px;\n position: static;\n right: auto;\n top: auto;\n width: 400px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n height: 180px;\n width: 320px;\n }\n `};\n`;\n\nexport const Iframe = styled.iframe`\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-right-width: 0px;\n border-top-width: 0px;\n height: 100%;\n width: 100%;\n`;\n","export const V2Forms = {\n INTERNAL_MIGRATION: 'Migração Interna',\n USER_BACKUP_RESTORE: 'Restauração de backup do cliente',\n GENERATE_BACKUP: 'Gerar Backup',\n RESTORATE_HG_ROUTINE: 'Restaurar Backup - Arquivos da HostGator',\n WITHOUT_EMAIL_ACCESS: 'Não tenho acesso ao e-mail cadastrado',\n CHANGE_PRIMARY_DOMAIN: 'Alteração de Domínio Primário',\n CHANGE_DUE_DATE: 'Alterar Data de Vencimento',\n GOOGLE_ADWORDS_COUPON: 'Cupom Google AdWords',\n EXTERNAL_SSL: 'Instalação de SSL de Outra Empresa',\n FINANCIAL_DOUBTS: 'FINANCIAL_DOUBTS',\n RESTORATE_CANCELLED_PLAN: 'Restauração de Plano Cancelado',\n GENERATE_CSR: 'Gerar CSR',\n RESTORATE_SITEBUILDER_ACCESS: 'Restauração de acesso ao editor do Criador de Sites',\n AFFILIATE_PROGRAM: 'Dúvidas exclusivamente sobre o Programa de Afiliados',\n NATIONAL_DOMAIN_TRANSFER: 'Transferência de Domínio Nacional',\n UPGRADE_VPS: 'Upgrade de Plano',\n UPGRADE_SITELOCK: 'Upgrade de Plano - sitelock',\n UPGRADE_CODEGUARD: 'Upgrade de Plano - codeguard',\n CHANGE_PAYMENT_CYCLE: 'Alterar Ciclo de Pagamento',\n PRIVATE_SSL: 'Certificado SSL Privado',\n WILDCARD_SSL: 'Certificado SSL Wildcard',\n ENTERPRISE_SSL: 'Certificado SSL Empresarial',\n INSTALL_WHMCS: 'Instalação do WHMCS',\n RELOAD_REBUILD: 'Solicitação de Reload/Rebuild',\n MORE_EMAILS: 'Aumento no envio de e-mails',\n MIGRATE_VPS_DEDICATED: 'Migração de Servidor Dedicado e VPS',\n MIGRATE_ACCOUNT_VPS_DEDICATED: 'Migración de Cuenta de VPS/Dedicado',\n UPDATE_WHMCS_LICENSE: 'Atualização de Licença WHMCS',\n WHMCS_ACQUISITION: 'Aquisição Licença WHMCS',\n MIGRATE_RESELLER: 'Migração de Revenda',\n EXTERNAL_MIGRATION: 'Migração Externa',\n UPGRADE_SITEBUILDER: 'Upgrade de Plano - SiteBuilder',\n SSL_EV: 'Certificado SSL EV',\n};\n","/* eslint-disable jsx-a11y/media-has-caption */\nimport React, { useCallback, useState } from 'react';\nimport * as Styles from './InternalMigration.styles';\nimport {\n Button,\n Checkbox,\n IconCheck,\n IconData,\n IconInfo,\n Input, Radio, Select,\n} from 'gatorcomponents';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport Loader from '@/components/Layout/Loader';\nimport { isBRServer } from '@/utils/Validators/validation';\n\nexport const InternalMigration = ({\n selectedProductOption,\n selectedProduct,\n destinationProductsOptions,\n submitForm,\n opening,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const [destiny, setDestiny] = useState(null);\n const options = [{ label: selectedProductOption }];\n const [destinyData, setDestinyData] = useState(null);\n const [migrationType, setMigrationType] = useState(null);\n const [migrationData, setMigrationData] = useState('');\n const [destinyDomain, setDestinyDomain] = useState('');\n const [destinyServer, setDestinyServer] = useState('');\n const [destinyUser, setDestinyUser] = useState('');\n const [readTerms, setReadTerms] = useState(false);\n const [agreed, setAgreed] = useState(false);\n const [ignoreServer, setIgnoreServer] = useState(false);\n\n const handleSelectDestiny = (label) => {\n const product = [...destinationProductsOptions].find(product => product.label === label);\n setDestinyDomain(product.label);\n setDestinyServer((product.serverhostname || product.dedicatedip || ''));\n setDestinyUser(product.username || '');\n setDestinyData(product);\n setIgnoreServer(!product.serverhostname);\n };\n\n const checkForm = useCallback(() => {\n let isOk = false;\n const boxes = !!readTerms && !!agreed;\n\n const partialValidation = () => {\n if (!migrationType) {\n return false;\n }\n\n if (migrationType === 'partial' && migrationData === '') {\n return false;\n }\n\n return true;\n };\n\n if (ignoreServer) {\n isOk = !!destinyDomain && !!destinyServer && boxes && partialValidation();\n\n return !isOk;\n }\n\n isOk = !!destinyDomain && !!destinyUser && !!destinyServer && boxes && partialValidation();\n return !isOk;\n }, [\n destinyDomain,\n destinyServer,\n destinyUser,\n ignoreServer,\n agreed,\n readTerms,\n migrationData,\n migrationType,\n ]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: ticketsLocale.forms.internalMigration.name,\n key: V2Forms.INTERNAL_MIGRATION,\n tags: ['migracao_interna_automacao', 'migra-interna-full'],\n root: {\n name: 'techsupport',\n as: ticketsLocale.forms.internalMigration.name,\n },\n body: `\n ${ticketsLocale.forms.internalMigration.migrationTypeText}: ${migrationType}\n ${ticketsLocale.forms.internalMigration.whatToBeMigrated}: ${migrationData}\n ${ticketsLocale.forms.internalMigration.originDomainLabel}: ${selectedProductOption}\n ${ticketsLocale.forms.internalMigration.body.originServer}: ${selectedProduct.serverhostname || selectedProduct.dedicatedip}\n ${ticketsLocale.forms.internalMigration.body.originUser}: ${selectedProduct.username}\n ${destiny === 'myServer' ? ticketsLocale.forms.internalMigration.myServerLabelRadio : ticketsLocale.forms.internalMigration.otherServerLabelRadio}: ${ticketsLocale.forms.internalMigration.body.yes}\n ${ticketsLocale.forms.internalMigration.myDomainLabel}: ${destinyDomain}\n ${ticketsLocale.forms.internalMigration.body.destinyServer}: ${destinyServer}\n ${ticketsLocale.forms.internalMigration.body.destinyUser}: ${destinyUser}\n ${ticketsLocale.forms.internalMigration.body.agree}: ${readTerms ? ticketsLocale.forms.internalMigration.body.yes : ticketsLocale.forms.internalMigration.body.no}\n ${ticketsLocale.forms.internalMigration.body.agreePayment}: ${agreed ? ticketsLocale.forms.internalMigration.body.yes : ticketsLocale.forms.internalMigration.body.no}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n agreed,\n selectedProduct,\n destiny,\n destinyDomain,\n destinyServer,\n destinyUser,\n selectedProductOption,\n readTerms,\n submitForm,\n migrationData,\n migrationType,\n ]);\n\n const handleSetDestiny = (destiny) => {\n setDestinyDomain('');\n setDestinyServer('');\n setDestinyUser('');\n setDestiny(destiny);\n };\n\n const handleSetMigrationType = (type) => {\n setMigrationType(type);\n };\n\n return (\n handleSubmit(e)}>\n \n \n\n \n \n \n {ticketsLocale.forms.internalMigration.links.migration()}\n \n \n \n \n {ticketsLocale.forms.internalMigration.links.compatibility()}\n \n \n \n\n \n {ticketsLocale.forms.internalMigration.warning.title} \n \n {ticketsLocale.forms.internalMigration.warning.item[0]()}\n {ticketsLocale.forms.internalMigration.warning.item[1]()}\n {ticketsLocale.forms.internalMigration.warning.item[2]()}\n \n \n\n \n \n {ticketsLocale.forms.internalMigration.alert}\n \n \n\n {isBRServer && (\n \n \n )}\n\n \n {ticketsLocale.forms.internalMigration.title}\n \n\n \n {ticketsLocale.forms.internalMigration.originTitle}\n \n\n \n {ticketsLocale.forms.internalMigration.migrationTypeText}\n \n\n \n handleSetMigrationType('full')} data-testid=\"fullMigration\">\n \n\n handleSetMigrationType('partial')} data-testid=\"partialMigration\">\n \n \n\n {(migrationType === 'partial') && (\n setMigrationData(e.target.value)}\n type=\"textarea\"\n />\n )}\n\n \n \n\n \n {ticketsLocale.forms.internalMigration.destinationTitle}\n \n\n \n handleSetDestiny('myServer')} data-testid=\"myServerRadio\">\n \n\n handleSetDestiny('otherServer')} data-testid=\"otherServerRadio\">\n \n \n\n {destiny === 'myServer' && (\n \n handleSelectDestiny(label)}\n testId=\"selectProduct\"\n withScroll\n />\n\n {(destinyData && (destinyData.serverhostname || destinyData.dedicatedip) && destinyServer) && (\n setDestinyServer(e.target.value)}\n readOnly\n />\n )}\n\n {(destinyData && destinyData.username && destinyUser) && (\n setDestinyUser(e.target.value)}\n readOnly\n />\n )}\n \n )}\n\n {destiny === 'otherServer' && (\n \n setDestinyDomain(e.target.value)}\n />\n\n setDestinyServer(e.target.value)}\n />\n\n setDestinyUser(e.target.value)}\n />\n \n )}\n\n {!!destiny && (\n <>\n \n setReadTerms(!readTerms)}\n >\n \n {ticketsLocale.forms.internalMigration.checkbox.terms()}\n \n \n\n setAgreed(!agreed)}\n data-testid=\"checkAgreed\"\n >\n \n {ticketsLocale.forms.internalMigration.checkbox.agreed()}\n \n \n \n\n \n \n \n )}\n \n );\n};\n\nexport default InternalMigration;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '498px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n `}\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const RadioWrapper = styled(InputWrapper)`\n flex-direction: row;\n margin: 0px 0px 20px;\n`;\n\nexport const CheckboxWrapper = styled(InputWrapper)`\n gap: 8px;\n margin: 24px 0px;\n max-width: unset;\n`;\n\nexport const RadioLabel = styled.label`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowDark};\n cursor: pointer;\n display: flex;\n font-size: ${theme.v2.font.sizes.xxs};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 4px;\n\n label {\n height: 19px;\n width: 19px;\n }\n `}\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 0px 0px 4px;\n\n label {\n height: 19px;\n width: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 0px;\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n line-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\n\nexport const Warning = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: column;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 0px;\n\n strong {\n font-weight: ${theme.v2.font.family.medium};\n font-size: ${theme.v2.font.sizes.xs};\n }\n `}\n`;\n\nexport const Alert = styled.span`\n ${({ theme }) => css`\n align-items: flex-start;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 20px 0px 40px;\n\n svg {\n flex-shrink: 0;\n }\n `}\n`;\n\nexport const AlertText = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.problemMedium};\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 2px 0;\n `}\n`;\n\nexport const AlertDescription = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n max-width: 1006px;\n\n svg {\n flex-shrink: 0;\n }\n `}\n`;\n\nexport const WarningList = styled.ul`\n margin: 0px;\n padding: 0px 0px 0px 24px;\n\n a {\n font-size: 14px;\n }\n\n li {\n padding-bottom: 4px;\n }\n`;\n\nexport const LinksWrapper = styled.span`\n display: flex;\n flex-direction: column;\n margin: 24px 0px 27px;\n\n svg {\n margin-right: 4px;\n flex-shrink: 0;\n }\n`;\n\nexport const Link = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-flex;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 4px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n line-height: ${theme.v2.font.lineHeight.text};\n }\n\n svg {\n margin-right: 4px;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 48px;\n }\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './UserBackupRestore.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconInfo,\n Input, Select,\n} from 'gatorcomponents';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport Loader from '@/components/Layout/Loader';\nimport { useSelector } from 'react-redux';\n\nexport const UserBackupRestore = ({\n selectedProduct,\n submitForm,\n opening,\n}) => {\n const {\n forceState, rules,\n } = useSelector(state => state.formsReducer);\n const { ticket: ticketsLocale } = useLocale();\n const { userBackupRestore } = ticketsLocale.forms;\n const restorationOptions = [\n { value: 'database', label: userBackupRestore.databaseRestoration },\n { value: 'files', label: userBackupRestore.filesRestoration },\n { value: 'complete', label: userBackupRestore.completeRestoration },\n ];\n const [restorationType, setRestorationType] = useState(null);\n const [backupFileName, setBackupFileName] = useState('');\n const [databaseFileName, setDatabaseFileName] = useState('');\n const [userName, setUserName] = useState('');\n const [server, setServer] = useState('');\n const [domain, setDomain] = useState('');\n const [agreed, setAgreed] = useState(false);\n\n useEffect(() => {\n if (selectedProduct && selectedProduct.domain) {\n setUserName(selectedProduct.username);\n setServer((selectedProduct.serverhostname || selectedProduct.dedicatedip) || '');\n setDomain(selectedProduct.domain);\n }\n }, [selectedProduct]);\n\n useEffect(() => {\n if (forceState && rules.active === 'userBackupRestore') {\n setRestorationType(rules.userBackupRestore.selectedRestorationType);\n }\n }, [forceState, rules.active, rules.userBackupRestore.selectedRestorationType]);\n\n\n const checkForm = useCallback(() => {\n let isOk = false;\n\n const checkDatabase = () => {\n if (restorationType === userBackupRestore.databaseRestoration) {\n return databaseFileName.length;\n }\n\n return true;\n };\n\n isOk = !!agreed && restorationType && backupFileName.length && checkDatabase();\n return isOk;\n }, [\n agreed,\n restorationType,\n backupFileName,\n databaseFileName,\n userBackupRestore,\n ]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const bodyDatabase = `${userBackupRestore.databaseFileName}: ${databaseFileName}`;\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: userBackupRestore.name,\n key: V2Forms.USER_BACKUP_RESTORE,\n tags: ['aut-bkp-customer-file', 'fluxo_backup'],\n root: {\n name: 'techsupport',\n as: userBackupRestore.name,\n },\n body: `\n ${userBackupRestore.selectedProduct}: ${selectedProduct.name} - ID: ${selectedProduct.id}\n ${userBackupRestore.serverLabel}: ${server}\n ${userBackupRestore.domainRestorarion}: ${domain}\n ${userBackupRestore.userLabel}: ${userName}\n ${userBackupRestore.restorationType}: ${restorationType}\n ${restorationType === userBackupRestore.databaseRestoration ? bodyDatabase : ''}\n ${userBackupRestore.backupFileName}: ${backupFileName}\n ${userBackupRestore.agree}: ${agreed ? userBackupRestore.yes : userBackupRestore.no}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n userBackupRestore,\n agreed,\n selectedProduct,\n submitForm,\n backupFileName,\n databaseFileName,\n restorationType,\n domain,\n server,\n userName,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n \n {userBackupRestore.warning.item[0]}\n {userBackupRestore.warning.item[1]}\n {userBackupRestore.warning.item[2]}\n {userBackupRestore.warning.item[3]}\n \n \n\n \n \n {userBackupRestore.warning.title}\n \n {userBackupRestore.alert}\n \n \n \n\n \n {userBackupRestore.title}\n \n\n \n setRestorationType(label)}\n value={restorationType}\n options={restorationOptions}\n withScroll\n />\n\n setUserName(e.target.value)}\n />\n\n setServer(e.target.value)}\n />\n\n setDomain(e.target.value)}\n />\n\n setBackupFileName(e.target.value)}\n value={backupFileName}\n />\n\n {restorationType === userBackupRestore.databaseRestoration && (\n setDatabaseFileName(e.target.value)}\n value={databaseFileName}\n />\n )}\n \n\n \n setAgreed(!agreed)}\n data-testid=\"check-agreed\"\n >\n \n {userBackupRestore.checkboxAgreed}\n \n \n \n\n \n \n \n );\n};\n\nexport default UserBackupRestore;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '498px';\n\nexport const Form = styled.form``;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 0px;\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 24px 0px 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n \n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const Alert = styled.span`\n ${({ theme }) => css`\n align-items: flex-start;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 40px;\n gap: 8px;\n\n svg {\n flex-shrink: 0;\n }\n `}\n`;\n\nexport const AlertDescription = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n max-width: 1006px;\n\n svg {\n flex-shrink: 0;\n }\n `}\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './GenerateBackup.styles';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport {\n IconData, Input, IconLoading, Checkbox, Button,\n} from 'gatorcomponents';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const GenerateBackup = ({\n submitForm,\n selectedProduct,\n opening,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { generateBackup: generateBackupLocale } = ticketsLocale.forms;\n const [userName, setUserName] = useState('');\n const [server, setServer] = useState('');\n const [agreed, setAgreed] = useState(false);\n\n useEffect(() => {\n if (selectedProduct && selectedProduct.domain) {\n setUserName(selectedProduct.username);\n setServer((selectedProduct.serverhostname || selectedProduct.dedicatedip) || '');\n }\n }, [selectedProduct]);\n\n const handleSubmit = (e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: ticketsLocale.forms.names.generateBackup,\n key: V2Forms.GENERATE_BACKUP,\n tags: ['backup_limite', 'fluxo_backup'],\n root: {\n name: 'techsupport',\n as: ticketsLocale.forms.names.generateBackup,\n },\n body: `\n ${generateBackupLocale.body.productId}: ${selectedProduct.id}\n ${generateBackupLocale.body.server}: ${server}\n ${generateBackupLocale.body.user}: ${userName}\n ${generateBackupLocale.body.agree}: ${agreed ? generateBackupLocale.body.yes : generateBackupLocale.body.no}\n `,\n };\n\n submitForm && submitForm(data);\n };\n\n const checkForm = useCallback(() => {\n let isOk = false;\n\n isOk = agreed\n && userName.length\n && server.length;\n\n return isOk;\n }, [\n userName,\n server,\n agreed,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {generateBackupLocale.termsItems}\n \n\n \n {generateBackupLocale.title}\n \n\n \n setUserName(e.target.value)}\n disabled\n />\n\n setServer(e.target.value)}\n disabled\n />\n \n\n setAgreed(!agreed)}\n >\n \n {generateBackupLocale.agreed}\n \n \n\n \n \n \n );\n};\n\nexport default GenerateBackup;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '498px';\n\nexport const Form = styled.form``;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 0px;\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 24px 0px 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n \n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const Alert = styled.span`\n ${({ theme }) => css`\n align-items: flex-start;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 40px;\n gap: 8px;\n\n svg {\n flex-shrink: 0;\n }\n `}\n`;\n\nexport const AlertDescription = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n max-width: 1006px;\n\n svg {\n flex-shrink: 0;\n }\n `}\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './RestorateBackupHgRoutine.styles';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport {\n Select, IconData, Input, IconLoading, Checkbox, Button, Alert,\n} from 'gatorcomponents';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { formsActions } from '@/redux/modules';\nimport { format } from 'date-fns';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const RestorateBackupHgRoutine = ({\n submitForm,\n selectedProduct,\n opening,\n}) => {\n const {\n hgRoutineBackups, loadingHgBackupHistory, forceState, rules,\n } = useSelector(state => state.formsReducer);\n const dispatch = useDispatch();\n const { ticket: ticketsLocale } = useLocale();\n const { restorateBackupHgRoutine: restorateBackupHgRoutineLocale } = ticketsLocale.forms;\n const [selectedRestorationType, setSelectedRestoratoinType] = useState(restorateBackupHgRoutineLocale.selectRestorationType.full);\n const [userName, setUserName] = useState('');\n const [server, setServer] = useState('');\n const [domain, setDomain] = useState('');\n const [backupOptions, setBackupOptions] = useState([]);\n const [selectedBackupOption, setSelectedBackupOption] = useState(null);\n const [agreed, setAgreed] = useState(false);\n const [specificDomains, setSpecificDomains] = useState('');\n const [specificDatabase, setSpecificDatabase] = useState('');\n const [specificFiles, setSpecificFiles] = useState('');\n\n useEffect(() => {\n if (selectedProduct && selectedProduct.domain) {\n setUserName(selectedProduct.username);\n setServer((selectedProduct.serverhostname || selectedProduct.dedicatedip) || '');\n setDomain(selectedProduct.domain);\n }\n }, [selectedProduct]);\n\n useEffect(() => {\n if (forceState && rules.active === 'restorateBackupHgRoutine') {\n setSelectedRestoratoinType(rules.restorateBackupHgRoutine.selectedRestorationType);\n setSelectedBackupOption(rules.restorateBackupHgRoutine.selectedBackupOption);\n }\n }, [forceState, rules.active, rules.restorateBackupHgRoutine.selectedRestorationType, rules.restorateBackupHgRoutine.selectedBackupOption]);\n\n const requestHgRoutineBackups = useCallback(() => {\n if (selectedProduct && selectedProduct.id) {\n dispatch(formsActions.backupHgRoutine.request({ id: selectedProduct.id }));\n }\n }, [dispatch, selectedProduct]);\n\n useEffect(() => {\n requestHgRoutineBackups();\n }, [requestHgRoutineBackups]);\n\n const mountBackupOptions = useCallback(() => {\n if (hgRoutineBackups) {\n const options = [];\n\n if (hgRoutineBackups.daily) {\n options.push({\n label: `${restorateBackupHgRoutineLocale.options.daily} - ${format(new Date(hgRoutineBackups.daily), 'dd/MM/yyyy')} às ${format(new Date(hgRoutineBackups.daily), 'HH:mm')}h`,\n value: hgRoutineBackups.daily,\n });\n }\n\n if (hgRoutineBackups.weekly) {\n options.push({\n label: `${restorateBackupHgRoutineLocale.options.weekly} - ${format(new Date(hgRoutineBackups.weekly), 'dd/MM/yyyy')} às ${format(new Date(hgRoutineBackups.weekly), 'HH:mm')}h`,\n value: hgRoutineBackups.weekly,\n });\n }\n\n if (hgRoutineBackups.monthly) {\n options.push({\n label: `${restorateBackupHgRoutineLocale.options.monthly} - ${format(new Date(hgRoutineBackups.monthly), 'dd/MM/yyyy')} às ${format(new Date(hgRoutineBackups.monthly), 'HH:mm')}h`,\n value: hgRoutineBackups.monthly,\n });\n }\n setBackupOptions(options);\n }\n }, [hgRoutineBackups, restorateBackupHgRoutineLocale]);\n\n useEffect(() => {\n mountBackupOptions();\n }, [mountBackupOptions]);\n\n const restorationTypeOptions = [\n { value: 'full', label: restorateBackupHgRoutineLocale.selectRestorationType.full },\n { value: 'database', label: restorateBackupHgRoutineLocale.selectRestorationType.database },\n { value: 'file', label: restorateBackupHgRoutineLocale.selectRestorationType.file },\n ];\n\n const restorationTypeTags = {\n [restorateBackupHgRoutineLocale.selectRestorationType.full]: 'bkp-restauracao-full',\n [restorateBackupHgRoutineLocale.selectRestorationType.database]: 'bkp-restauracao-db',\n [restorateBackupHgRoutineLocale.selectRestorationType.file]: 'bkp-restauracao-arquivo',\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n\n const bodyDatabase = `\n nome do banco de dados: ${specificDatabase}\n `;\n\n const bodyFile = `\n arquivos: ${specificFiles}\n domínios: ${specificDomains}\n `;\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: ticketsLocale.forms.names.restorateBackupHgRoutine,\n key: V2Forms.RESTORATE_HG_ROUTINE,\n tags: [\n selectedRestorationType === restorateBackupHgRoutineLocale.selectRestorationType.database\n ? 'aut-bkp-db_site'\n : 'aut-bkp-tipodebackup',\n 'fluxo_backup',\n restorationTypeTags[selectedRestorationType],\n ],\n root: {\n name: 'techsupport',\n as: ticketsLocale.forms.names.restorateBackupHgRoutine,\n },\n skipHgRoutineBackup: selectedProduct.id,\n body: `\n ${selectedRestorationType === restorateBackupHgRoutineLocale.selectRestorationType.database ? bodyDatabase : ''}\n ${selectedRestorationType === restorateBackupHgRoutineLocale.selectRestorationType.file ? bodyFile : ''}\n ${restorateBackupHgRoutineLocale.body.productId}: ${selectedProduct.id}.\n ${restorateBackupHgRoutineLocale.body.server}: ${server}\n ${restorateBackupHgRoutineLocale.body.user}: ${userName}\n ${restorateBackupHgRoutineLocale.body.domain}: ${domain}\n ${restorateBackupHgRoutineLocale.body.backupName}: ${selectedBackupOption || restorateBackupHgRoutineLocale.body.uninformed}\n ${restorateBackupHgRoutineLocale.body.agree}: ${agreed ? restorateBackupHgRoutineLocale.body.yes : restorateBackupHgRoutineLocale.body.no}\n `,\n };\n\n submitForm && submitForm(data);\n };\n\n const checkForm = useCallback(() => {\n let isOk = false;\n\n const checkDatabase = () => {\n if (selectedRestorationType === restorateBackupHgRoutineLocale.selectRestorationType.database) {\n return specificDatabase.length > 0;\n }\n\n return true;\n };\n\n const checkSites = () => {\n if (selectedRestorationType === restorateBackupHgRoutineLocale.selectRestorationType.file) {\n return specificDomains.length > 0 || specificFiles.length > 0;\n }\n\n return true;\n };\n\n isOk = agreed\n && selectedBackupOption\n && userName.length\n && server.length\n && domain.length\n && checkDatabase()\n && checkSites();\n\n return isOk;\n }, [\n domain,\n userName,\n server,\n restorateBackupHgRoutineLocale,\n specificDatabase,\n selectedRestorationType,\n specificFiles,\n specificDomains,\n selectedBackupOption,\n agreed,\n ]);\n\n if (loadingHgBackupHistory) {\n return (\n \n \n \n \n );\n }\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {restorateBackupHgRoutineLocale.termsItems}\n \n\n \n \n\n \n {restorateBackupHgRoutineLocale.title}\n \n\n \n setSelectedRestoratoinType(label)}\n withScroll\n />\n\n setUserName(e.target.value)}\n disabled={!!selectedProduct.username}\n />\n\n setServer(e.target.value)}\n disabled={!!selectedProduct.serverhostname || !!selectedProduct.dedicatedip}\n />\n\n setDomain(e.target.value)}\n disabled={!!selectedProduct.domain}\n />\n\n {selectedRestorationType === restorateBackupHgRoutineLocale.selectRestorationType.database && (\n setSpecificDatabase(e.target.value)}\n />\n )}\n\n {(selectedRestorationType === restorateBackupHgRoutineLocale.selectRestorationType.file) && (\n <>\n setSpecificDomains(e.target.value)}\n />\n\n setSpecificFiles(e.target.value)}\n />\n \n )}\n \n\n {(backupOptions.length > 0) && (\n <>\n \n {restorateBackupHgRoutineLocale.selectBackupTitle}\n \n \n setSelectedBackupOption(label)}\n withScroll\n />\n \n \n )}\n\n setAgreed(!agreed)}\n >\n \n {restorateBackupHgRoutineLocale.agreed}\n \n \n\n \n \n \n );\n};\n\nexport default RestorateBackupHgRoutine;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '540px';\n\nexport const Form = styled.form``;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n color: ${theme.v2.colors.neutral.lowPure};\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n lin-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\n\nexport const Warning = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 0px;\n\n strong {\n font-weight: ${theme.v2.font.family.medium};\n font-size: ${theme.v2.font.sizes.xs};\n }\n `}\n`;\n\nexport const Alert = styled.span`\n ${({ theme }) => css`\n align-items: flex-start;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 40px;\n gap: 8px;\n\n svg {\n flex-shrink: 0;\n }\n `}\n`;\n\nexport const AlertDescription = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n max-width: 1006px;\n\n svg {\n flex-shrink: 0;\n }\n `}\n`;\n\nexport const WarningList = styled.ul`\n margin: 0px;\n padding: 0px 0px 0px 20px;\n`;\n\nexport const LinksWrapper = styled.span`\n display: flex;\n flex-direction: column;\n margin: 24px 0px 27px;\n\n svg {\n margin-right: 4px;\n flex-shrink: 0;\n }\n`;\n\nexport const Link = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 4px;\n lin-height: ${theme.v2.font.lineHeight.text};\n \n a {\n font-size: ${theme.v2.font.sizes.xxs};\n lin-height: ${theme.v2.font.lineHeight.text};\n }\n\n svg {\n margin-right: 4px;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\ndisplay:none;`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './WithoutEmailAccess.styles';\nimport {\n Button,\n IconData,\n IconLoading,\n Input,\n} from 'gatorcomponents';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { FieldValidators } from '@/utils/FieldValidators';\nimport { isBRServer } from '@/utils/Validators/validation';\n\nexport const WithoutEmailAccess = ({\n email,\n document,\n opening,\n submitForm,\n ignoreFile = false,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { withoutEmailAccess: withoutEmailAccessLocale } = ticketsLocale.forms;\n const [contactEmail, setcontactEmail] = useState('');\n const [emailError, setEmailError] = useState('');\n const [file, setFile] = useState('');\n const [fileBinary, setFileBinary] = useState();\n const [description, setDescription] = useState('');\n\n const handleValidateEmail = useCallback(() => {\n if (!FieldValidators.email(contactEmail)) {\n setEmailError(withoutEmailAccessLocale.emailError);\n } else {\n setEmailError('');\n }\n }, [contactEmail, withoutEmailAccessLocale]);\n\n const checkForm = useCallback(() => {\n let isOk = false;\n\n if (FieldValidators.email(contactEmail) && description) {\n if (!ignoreFile && file) {\n isOk = true;\n }\n\n if (ignoreFile) {\n isOk = true;\n }\n }\n\n return !isOk;\n }, [contactEmail, description, file, ignoreFile]);\n\n const handleFile = (e) => {\n setFileBinary(e.target.files[0]);\n setFile(e.currentTarget.value);\n };\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n handleValidateEmail();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: null,\n product: 'Não tenho acesso ao e-mail cadastrado',\n subject: ticketsLocale.forms.withoutEmailAccess.name,\n key: V2Forms.WITHOUT_EMAIL_ACCESS,\n tags: ['form_recuperacao_acesso'],\n root: {\n name: 'techsupport',\n as: ticketsLocale.forms.withoutEmailAccess.name,\n },\n files: [fileBinary],\n body: `\n ${withoutEmailAccessLocale.body.registeredEmail}: ${email}\n ${withoutEmailAccessLocale.body.document}: ${document}\n ${withoutEmailAccessLocale.body.contactEmail}: ${contactEmail}\n ${withoutEmailAccessLocale.body.description}: ${description}\n `,\n };\n\n if (!emailError) {\n submitForm && submitForm(data);\n }\n }, [\n ticketsLocale,\n emailError,\n handleValidateEmail,\n submitForm,\n contactEmail,\n description,\n email,\n document,\n fileBinary,\n withoutEmailAccessLocale,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {withoutEmailAccessLocale.title}\n \n\n \n setcontactEmail(e.target.value)}\n onBlur={handleValidateEmail}\n errorMessage={emailError}\n />\n\n \n {withoutEmailAccessLocale.addDocumentLabel}\n \n\n \n \n {(fileBinary && fileBinary.name) || withoutEmailAccessLocale.addDocumentButton}\n \n handleFile(e)}\n />\n \n\n setDescription(e.target.value)}\n maxLength={280}\n rows={3}\n counter\n />\n \n\n \n \n \n );\n};\n\nexport default WithoutEmailAccess;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '540px';\n\nexport const Form = styled.form``;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n color: ${theme.v2.colors.neutral.lowPure};\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n lin-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 24px 0px 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './ChangePrimaryDomain.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { HgProducts } from '../../SupportForms.types';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const ChangePrimaryDomain = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale, routes: routesLocale } = useLocale();\n const { changePrimaryDomain: changePrimaryDomainLocale, names: formNamesLocale } = ticketsLocale.forms;\n const [newDomain, setNewDomain] = useState('');\n const [why, setWhy] = useState('');\n const [agreed, setAgreed] = useState(false);\n\n const isHosting = HgProducts.SHARED_ALL.includes(selectedProduct.pid) || HgProducts.PLUS_ALL.includes(selectedProduct.pid);\n const isShared = HgProducts.SHARED_ALL.includes(selectedProduct.pid);\n\n const checkForm = useCallback(() => {\n let isOk = false;\n\n if (why.length && newDomain.length && agreed) {\n isOk = true;\n }\n\n return !isOk;\n }, [why, newDomain, agreed]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const productName = selectedProduct.name && selectedProduct.name.toLowerCase().replace(' ', '_');\n\n const data = {\n tags: ['whmcs_form_tecnico_alterar_dominio_primario', productName, selectedProduct.serverhostname],\n subject: changePrimaryDomainLocale.subject,\n key: V2Forms.CHANGE_PRIMARY_DOMAIN,\n automation: 'alterar_dominio_primario',\n automationRedirect: routesLocale.domains,\n newdomain: newDomain,\n body: `• ${changePrimaryDomainLocale.product}: ${selectedProduct.name} (${selectedProduct.domain}) - ${changePrimaryDomainLocale.userLabel}: ${selectedProduct.username}\n • Servidor: ${(selectedProduct.serverhostname || selectedProduct.dedicatedip) || ''}\n • ${changePrimaryDomainLocale.solicitation}: ${formNamesLocale.changePrimaryDomain}\n • ${changePrimaryDomainLocale.newDomainLabel}: ${newDomain}\n • ${changePrimaryDomainLocale.whyLabel}: ${why}\n • ${changePrimaryDomainLocale.agreedLabel}: ${agreed ? changePrimaryDomainLocale.yes : changePrimaryDomainLocale.no}\n • ${changePrimaryDomainLocale.productId}: ${selectedProduct.id}\n `,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n isAutomatic: isShared,\n };\n\n submitForm && submitForm(data);\n }, [\n submitForm,\n agreed,\n selectedProduct,\n why,\n newDomain,\n changePrimaryDomainLocale,\n formNamesLocale,\n isShared,\n routesLocale,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {changePrimaryDomainLocale.title}\n \n\n \n setNewDomain(e.target.value)}\n />\n\n setWhy(e.target.value)}\n maxLength={280}\n rows={3}\n counter\n />\n\n setAgreed(!agreed)}\n >\n \n {changePrimaryDomainLocale.agreedLabel}\n \n \n \n\n \n \n \n );\n};\n\nexport default ChangePrimaryDomain;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '498px';\n\nexport const Form = styled.form``;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n max-width: 600px;\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n lin-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 24px 0px 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n \n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './ExternalMigration.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n Select,\n} from 'gatorcomponents';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\nimport useLocale from '@/hooks/useLocale/useLocale';\n\nexport const ExternalMigration = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const {\n externalMigration: externalMigrationLocale,\n } = ticketsLocale.forms;\n const [oldHostDomain, setOldHostDomain] = useState('');\n const [oldHostLogin, setOldHostLogin] = useState('');\n const [oldHostPassword, setOldHostPassword] = useState('');\n const [oldHostLinkAdmin, setOldHostLinkAdmin] = useState('');\n const [oldHostProEmail, setOldHostProEmail] = useState('');\n const [actualProEmail, setActualProEmail] = useState('');\n const [oldHostAdminPanel, setOldHostAdminPanel] = useState('');\n const [aditionalInfo, setAditionalInfo] = useState('');\n const [terms, setTerms] = useState(false);\n const [payment, setPayment] = useState(false);\n\n const checkForm = useCallback(() => {\n let isOk = false;\n\n if (\n oldHostDomain.length\n && oldHostLogin.length\n && oldHostPassword.length\n && oldHostLinkAdmin.length\n && oldHostProEmail.length\n && actualProEmail.length\n && oldHostAdminPanel.length\n && terms\n && payment\n ) {\n isOk = true;\n }\n\n return !isOk;\n }, [\n oldHostDomain,\n oldHostLogin,\n oldHostPassword,\n oldHostLinkAdmin,\n oldHostProEmail,\n actualProEmail,\n oldHostAdminPanel,\n terms,\n payment,\n ]);\n\n const hostOptions = [\n {\n label: 'WHM',\n value: 1,\n },\n {\n label: 'cPanel',\n value: 2,\n },\n {\n label: 'Plesk',\n value: 3,\n },\n {\n label: 'Outro',\n value: 4,\n },\n {\n label: externalMigrationLocale.dontKnow,\n value: 5,\n },\n ];\n\n const emailOptions = [\n {\n label: 'Titan',\n value: 1,\n },\n {\n label: 'cPanel',\n value: 2,\n },\n {\n label: 'Externo',\n value: 3,\n },\n {\n label: 'Outro',\n value: 4,\n },\n {\n label: externalMigrationLocale.dontKnow,\n value: 5,\n },\n ];\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.id,\n product: selectedProduct.name,\n subject: externalMigrationLocale.subject,\n key: V2Forms.EXTERNAL_MIGRATION,\n tags: [\n 'whmcs_form_tecnico_migracao_compartilhada',\n selectedProduct.name,\n `${(selectedProduct.serverhostname || selectedProduct.dedicatedip) || ''}`,\n ],\n root: {\n name: 'techsupport',\n as: ticketsLocale.forms.names.externalMigration,\n },\n body: `\n ${externalMigrationLocale.bodyProduct(selectedProduct)}\n Servidor: ${(selectedProduct.serverhostname || selectedProduct.dedicatedip) || ''}\n ${externalMigrationLocale.solicitation}\n ${externalMigrationLocale.bodyDomain(oldHostDomain)}\n ${externalMigrationLocale.bodyLogin(oldHostLogin)}\n ${externalMigrationLocale.bodyPassword(oldHostPassword)}\n ${externalMigrationLocale.bodyLink(oldHostLinkAdmin)}\n ${externalMigrationLocale.bodyPanel(oldHostAdminPanel)}\n ${externalMigrationLocale.bodyOldEmail(oldHostProEmail)}\n ${externalMigrationLocale.bodyNewEmail(actualProEmail)}\n ${externalMigrationLocale.bodyAditionalInfo(aditionalInfo)}\n ${externalMigrationLocale.bodyTerms(terms)}\n ${externalMigrationLocale.bodyPayment(payment)}\n ${externalMigrationLocale.bodyProductId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n submitForm,\n selectedProduct,\n oldHostDomain,\n oldHostLogin,\n oldHostPassword,\n oldHostLinkAdmin,\n oldHostProEmail,\n actualProEmail,\n oldHostAdminPanel,\n aditionalInfo,\n payment,\n terms,\n externalMigrationLocale,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {externalMigrationLocale.title}\n \n\n \n setOldHostDomain(e.target.value)}\n />\n\n setOldHostLogin(e.target.value)}\n />\n\n setOldHostPassword(e.target.value)}\n />\n\n setOldHostLinkAdmin(e.target.value)}\n />\n\n setOldHostAdminPanel(label)}\n value={oldHostAdminPanel}\n withScroll\n />\n\n setOldHostProEmail(label)}\n value={oldHostProEmail}\n withScroll\n />\n\n setActualProEmail(label)}\n value={actualProEmail}\n withScroll\n />\n\n setAditionalInfo(e.target.value)}\n />\n\n setTerms(!terms)}\n >\n \n {externalMigrationLocale.terms}\n \n \n\n setPayment(!payment)}\n >\n \n {externalMigrationLocale.payment}\n \n \n \n\n \n \n \n );\n};\n\nexport default ExternalMigration;\n","import styled, { css } from 'styled-components';\n\nexport const Form = styled.form``;\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n\nexport const Agreed = styled.div`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n `}\n`;\n\nexport const InputWrapper = styled.div`\n max-width: 514px;\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 0px 0px 4px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './ChangeDueDate.styles';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport {\n Button, Checkbox, IconLoading, Input,\n} from 'gatorcomponents';\nimport { isAfter, isValid, startOfYesterday } from 'date-fns';\n\nexport const ChangeDueDate = ({\n submitForm,\n selectedProduct,\n opening,\n}) => {\n const [agreed, setAgreed] = useState(false);\n const [newDueDate, setNewDueDate] = useState();\n const [dateError, setDateError] = useState(false);\n const { ticket: ticketsLocale } = useLocale();\n const { changeDueDate: changeDueDateLocale } = ticketsLocale.forms;\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const productServer = selectedProduct.serverhostname || selectedProduct.dedicatedip || '';\n\n const data = {\n tags: [productServer, 'whmcs_form_financeiro_alterar_data_de_vencimento'],\n subject: 'Suporte Financeiro - Alterar Data de Vencimento',\n automation: false,\n body: `• Produto: ${selectedProduct.name} (${selectedProduct.domain}) - Usuário: ${selectedProduct.username}\n • Servidor: ${productServer}\n • Solicitação: Alterar Data de Vencimento\n • Qual a data de vencimento desejada?: ${newDueDate ? newDueDate.split('-').reverse().join('/') : ''}\n • Confirmo que li e concordo com os termos acima: ${agreed ? 'sim' : 'não'}\n • ID do produto: ${selectedProduct.id}`,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n };\n\n const isValidDate = isValid(new Date(newDueDate)) && isAfter(new Date(newDueDate), startOfYesterday());\n\n if (!isValidDate) {\n setDateError(true);\n return;\n }\n setDateError(false);\n submitForm && submitForm(data);\n }, [agreed, newDueDate, selectedProduct, submitForm]);\n\n const handleNewDueDate = (dueDate) => {\n setNewDueDate(dueDate);\n };\n\n return (\n handleSubmit(e)}>\n \n {changeDueDateLocale.info()}\n \n\n \n handleNewDueDate(e.target.value)}\n type=\"date\"\n testId=\"dateInput\"\n errorMessage={dateError ? 'Por favor selecione a data de vencimento desejada' : ''}\n />\n \n\n \n setAgreed(!agreed)}\n data-testid=\"checkAgreed\"\n >\n \n\n\n \n );\n};\n\nexport default ChangeDueDate;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '540px';\n\nexport const Form = styled.form`\n${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n`}\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin-bottom: 24px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n color: ${theme.v2.colors.neutral.lowPure};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './GoogleAdwordsCoupon.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n} from 'gatorcomponents';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\nimport useLocale from '@/hooks/useLocale/useLocale';\n\nexport const GoogleAdwordsCoupon = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { googleAdwordsCoupon: googleAdwordsCouponLocale } = ticketsLocale.forms;\n\n const [termsAgreed, setTermsAgreed] = useState(false);\n\n const checkForm = useCallback(() => {\n let isOk = false;\n\n if (termsAgreed) {\n isOk = true;\n }\n\n return !isOk;\n }, [termsAgreed]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n key: V2Forms.GOOGLE_ADWORDS_COUPON,\n tags: [\n 'whmcs_form_cupom_google_adwords',\n selectedProduct.serverhostname || '',\n selectedProduct.name.toLowerCase().replace(' ', '_'),\n ],\n root: {\n name: 'techsupport',\n },\n subject: `${ticketsLocale.openNewTicketPage.textManipulation.startsWith.technical} - ${ticketsLocale.forms.names.googleAdwordsCoupon}`,\n body: `\n • ${googleAdwordsCouponLocale.bodyFields.product}: ${selectedProduct.name} (${selectedProduct.domain}) - ${googleAdwordsCouponLocale.bodyFields.user}: ${selectedProduct.username}\n • ${googleAdwordsCouponLocale.bodyFields.server}: ${selectedProduct.serverhostname || ''}\n • ${googleAdwordsCouponLocale.bodyFields.solicitation}: ${ticketsLocale.forms.names.googleAdwordsCoupon}\n • ${googleAdwordsCouponLocale.bodyFields.agree}: ${termsAgreed ? 'Sim' : 'Não'}\n • ${googleAdwordsCouponLocale.bodyFields.productId}: ${selectedProduct.id}\n `,\n };\n\n if (termsAgreed) {\n submitForm && submitForm(data);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n submitForm,\n selectedProduct,\n termsAgreed,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n setTermsAgreed(!termsAgreed)}\n >\n \n {googleAdwordsCouponLocale.checkbox}\n \n \n\n \n \n \n );\n};\n\nexport default GoogleAdwordsCoupon;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '540px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputContainer = styled.div`\n`;\n\nexport const FileInputContainer = styled.div`\n textarea {\n padding: 4px;\n }\n`;\n\nexport const InputTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const InputDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: 12px;\n margin: 8px 0 0;\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n color: ${theme.v2.colors.neutral.lowPure};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n lin-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 24px 0px 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const TextAreaWrapper = styled.div`\n margin-top: 24px;\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n margin-top: 12px;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\n display:none;\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './InstallExternalSsl.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n} from 'gatorcomponents';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\nimport useLocale from '@/hooks/useLocale/useLocale';\n\nexport const InstallExternalSsl = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { installExternalSsl: installExternalSslLocale } = ticketsLocale.forms;\n const [urlToInstall, setUrlToInstall] = useState('');\n\n const [sslFile, setSslFile] = useState('');\n const [sslFileBinary, setSslFileBinary] = useState();\n const [sslCaTextarea, setSslCaTextarea] = useState('');\n const [pKeyTextarea, setPKeyTextarea] = useState('');\n\n const [agreed, setAgreed] = useState(false);\n\n const checkForm = useCallback(() => {\n let isOk = false;\n\n if (urlToInstall && sslFileBinary && pKeyTextarea && agreed) {\n isOk = true;\n }\n\n return !isOk;\n }, [urlToInstall, sslFileBinary, pKeyTextarea, agreed]);\n\n const handleFile = (e) => {\n setSslFile(e.currentTarget.value);\n setSslFileBinary(e.target.files[0]);\n };\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: ticketsLocale.forms.names.installExternalSsl,\n key: V2Forms.EXTERNAL_SSL,\n tags: [\n installExternalSslLocale.bodyFields.tag,\n selectedProduct.serverhostname || '',\n selectedProduct.name.toLowerCase().replace(' ', '_'),\n ],\n files: [sslFileBinary],\n body: `\n • ${installExternalSslLocale.bodyFields.product}: ${selectedProduct.name} - ${installExternalSslLocale.bodyFields.user}: ${selectedProduct.username}\n • ${installExternalSslLocale.bodyFields.server}: ${(selectedProduct.serverhostname || selectedProduct.dedicatedip) || ''}\n • ${installExternalSslLocale.bodyFields.solicitation}: ${ticketsLocale.forms.names.installExternalSsl}\n • ${installExternalSslLocale.bodyFields.sslUrl}: ${urlToInstall}\n • ${installExternalSslLocale.bodyFields.sslCa}: ${sslCaTextarea}\n • ${installExternalSslLocale.bodyFields.privateKey}: ${pKeyTextarea}\n • ${installExternalSslLocale.bodyFields.agree}: ${agreed ? installExternalSslLocale.bodyFields.yes : installExternalSslLocale.bodyFields.no}\n • ${installExternalSslLocale.bodyFields.productId}: ${selectedProduct.id}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n sslFileBinary,\n pKeyTextarea,\n sslCaTextarea,\n urlToInstall,\n ticketsLocale,\n submitForm,\n agreed,\n selectedProduct,\n installExternalSslLocale,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n \n setUrlToInstall(e.target.value)}\n />\n \n {installExternalSslLocale.urlInputLabel}\n \n \n\n \n {installExternalSslLocale.sslCertificate} \n \n \n {(sslFileBinary && sslFileBinary.name) || installExternalSslLocale.addDocumentButton}\n \n handleFile(e)}\n />\n \n {installExternalSslLocale.sslCertififateFileType} \n\n \n setSslCaTextarea(e.target.value)}\n rows={3}\n counter\n />\n \n \n setPKeyTextarea(e.target.value)}\n rows={3}\n counter\n />\n \n \n\n setAgreed(!agreed)}\n >\n \n {installExternalSslLocale.checkboxLabel}\n \n \n \n\n \n \n \n );\n};\n\nexport default InstallExternalSsl;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '540px';\n\nexport const Form = styled.form``;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 24px;\n `}\n`;\n\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n max-width: 850px;\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\ndisplay:none;`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './FinancialDoubts.styles';\nimport {\n Button,\n IconLoading,\n Input,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const FinancialDoubts = ({\n opening,\n submitForm,\n selectedProduct,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { financialDoubts: financialDoubtsLocale, names: namesLocale } = ticketsLocale.forms;\n const [file, setFile] = useState('');\n const [fileBinary, setFileBinary] = useState();\n const [description, setDescription] = useState('');\n\n const handleFile = (e) => {\n setFileBinary(e.target.files[0]);\n setFile(e.currentTarget.value);\n };\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const productServer = selectedProduct.serverhostname || selectedProduct.dedicatedip || '';\n\n const data = {\n tags: [financialDoubtsLocale.tag, productServer, selectedProduct.name],\n subject: financialDoubtsLocale.subject,\n automation: false,\n key: V2Forms.FINANCIAL_DOUBTS,\n files: [fileBinary],\n body: `• ${financialDoubtsLocale.product}: ${selectedProduct.name} (${selectedProduct.domain}) - ${financialDoubtsLocale.user}: ${selectedProduct.username}\n • Servidor: ${productServer}\n • ${financialDoubtsLocale.solicitation}: ${namesLocale.financialDoubts}\n • ${financialDoubtsLocale.descriptionLabel}: ${description}\n • ${financialDoubtsLocale.productId}: ${selectedProduct.id || ''}`,\n pid: selectedProduct.pid || '',\n product: selectedProduct.id || '',\n };\n\n submitForm && submitForm(data);\n }, [submitForm, fileBinary, selectedProduct, description, financialDoubtsLocale, namesLocale]);\n\n return (\n handleSubmit(e)}>\n \n {financialDoubtsLocale.title}\n \n\n \n {financialDoubtsLocale.info}\n \n\n \n setDescription(e.target.value)}\n maxLength={280}\n rows={3}\n counter\n />\n\n \n {financialDoubtsLocale.addDocumentLabel}\n \n\n \n \n {(fileBinary && fileBinary.name) || financialDoubtsLocale.addDocumentButton}\n \n handleFile(e)}\n />\n \n \n\n \n \n \n );\n};\n\nexport default FinancialDoubts;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '498px';\n\nexport const Form = styled.form``;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n color: ${theme.v2.colors.neutral.lowPure};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const CheckboxWrapper = styled(InputWrapper)`\n gap: 8px;\n margin: 24px 0px;\n max-width: unset;\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 0px 0px 4px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n \n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n display: flex;\n margin: 0px;\n button {\n max-height: 35px;\n }\n`;\n","import {\n Button, Checkbox, IconData, IconLoading, Input,\n} from 'gatorcomponents';\nimport * as Styles from './RestorateCancelledPlan.styles';\nimport React, { useState } from 'react';\nimport useLocale from '@/hooks/useLocale';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const RestorateCancelledPlan = ({\n submitForm,\n selectedProduct,\n opening,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { restorateCancelledPlan: restorateCancelledPlanLocale } = ticketsLocale.forms;\n const [mainDomain, setMainDomain] = useState('');\n const [chargeAgreed, setChargeAgreed] = useState(false);\n const [termsAgreed, setTermsAgreed] = useState(false);\n\n const handleSubmit = (e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.name,\n subject: ticketsLocale.forms.restorateCancelledPlan.subject,\n key: V2Forms.RESTORATE_CANCELLED_PLAN,\n tags: ['aut-bkp-canceled'],\n root: {\n name: 'techsupport',\n as: ticketsLocale.forms.names.restorateCancelledPlan,\n },\n body: `\n ${restorateCancelledPlanLocale.bodyProduct(selectedProduct)}\n ${restorateCancelledPlanLocale.bodyServer(selectedProduct)}\n ${restorateCancelledPlanLocale.bodyRequest(restorateCancelledPlanLocale.subject)}\n ${restorateCancelledPlanLocale.bodyMainDomain(mainDomain)}\n ${restorateCancelledPlanLocale.chargeAgreed}:${chargeAgreed ? 'sim' : 'Não'}\n ${restorateCancelledPlanLocale.termsAgreed}:${termsAgreed ? 'sim' : 'Não'}\n ${restorateCancelledPlanLocale.bodyProductId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n };\n\n const checkForm = () => {\n const isOk = mainDomain && chargeAgreed && termsAgreed;\n\n return !isOk;\n };\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {restorateCancelledPlanLocale.termsItems}\n \n\n \n {ticketsLocale.forms.internalMigration.title}\n \n\n \n setMainDomain(e.target.value)}\n />\n \n\n \n setChargeAgreed(!chargeAgreed)}\n >\n \n {restorateCancelledPlanLocale.chargeAgreed}\n \n \n\n setTermsAgreed(!termsAgreed)}\n >\n \n {restorateCancelledPlanLocale.termsAgreed}\n \n \n \n\n \n \n \n );\n};\n\nexport default RestorateCancelledPlan;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '498px';\n\nexport const Form = styled.form`\n margin-bottom: 48px;\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 0px;\n max-width: 540px;\n\n ul {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 24px 0px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputContainer = styled.div`\n ${({ error }) => css`\n margin-bottom: ${error ? '4px' : '24px'};\n `};\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 32px 0 24px 0;\n `}\n`;\n\nexport const RadioWrapper = styled(InputsWrapper)`\n flex-direction: row;\n gap: 16px;\n margin-bottom: 24px;\n`;\n\nexport const RadioLabel = styled.label`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowDark};\n cursor: pointer;\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 4px;\n\n label {\n width: 19px;\n height: 19px;\n }\n `}\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 24px 0px 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './GenerateCSR.styles';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport {\n IconData, Input, IconLoading, Checkbox, Button, Radio,\n} from 'gatorcomponents';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\nimport { FieldValidators } from '@/utils/FieldValidators';\n\nconst inputErrors = {\n email: '',\n name: '',\n city: '',\n state: '',\n country: '',\n sslUrl: '',\n isWildcard: '',\n};\n\nexport const GenerateCSR = ({\n submitForm,\n selectedProduct,\n customerSummary,\n opening,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { generateCSR: generateCSRLocale } = ticketsLocale.forms;\n const [email, setEmail] = useState(customerSummary.email || '');\n const [name, setName] = useState(customerSummary.name || '');\n const [city, setCity] = useState(customerSummary.city || '');\n const [state, setState] = useState(customerSummary.state || '');\n const [country, setCountry] = useState(customerSummary.country || '');\n const [company, setCompany] = useState(customerSummary.company || '');\n const [sslUrl, setSslUrl] = useState('');\n const [isWildcard, setIsWildcard] = useState(false);\n const [agreed, setAgreed] = useState(false);\n const [errors, setErrors] = useState(inputErrors);\n\n const handleValidateEmail = useCallback(() => {\n if (!FieldValidators.email(email)) {\n setErrors({ ...errors, email: generateCSRLocale.errors.invalidEmail });\n } else {\n setErrors({ ...errors, email: '' });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [email, errors]);\n\n const handleValidateEmptyField = useCallback((field) => {\n switch (field) {\n case 'name':\n if (!name.length) {\n setErrors({ ...errors, name: generateCSRLocale.errors.emptyField });\n } else {\n setErrors({ ...errors, name: '' });\n }\n break;\n case 'city':\n if (!city.length) {\n setErrors({ ...errors, city: generateCSRLocale.errors.emptyField });\n } else {\n setErrors({ ...errors, city: '' });\n }\n break;\n case 'state':\n if (!state.length) {\n setErrors({ ...errors, state: generateCSRLocale.errors.emptyField });\n } else {\n setErrors({ ...errors, state: '' });\n }\n break;\n case 'country':\n if (!country.length) {\n setErrors({ ...errors, country: generateCSRLocale.errors.emptyField });\n } else {\n setErrors({ ...errors, country: '' });\n }\n break;\n case 'sslUrl':\n if (!sslUrl.length) {\n setErrors({ ...errors, sslUrl: generateCSRLocale.errors.emptyField });\n } else {\n setErrors({ ...errors, sslUrl: '' });\n }\n break;\n default:\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [name, city, state, country, sslUrl, errors]);\n\n const handleSubmit = (e) => {\n Object.keys(errors).filter(key => key !== 'email').map(key => handleValidateEmptyField(key));\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: ticketsLocale.forms.names.generateCSR,\n key: V2Forms.GENERATE_CSR,\n tags: ['whmcs_form_tecnico_gerar_csr'],\n root: {\n name: 'techsupport',\n as: ticketsLocale.forms.names.generateCSR,\n },\n body: `\n ${generateCSRLocale.bodyFields.product}: ${selectedProduct.name} - ${selectedProduct.domain}\n ${generateCSRLocale.bodyFields.user}: ${selectedProduct.username || ''}\n ${generateCSRLocale.bodyFields.server}: ${(selectedProduct.serverhostname || selectedProduct.dedicatedip) || ''}\n\n ${generateCSRLocale.bodyFields.email}: ${email}\n ${generateCSRLocale.bodyFields.name}: ${name}\n ${generateCSRLocale.bodyFields.city}: ${city}\n ${generateCSRLocale.bodyFields.state}: ${state}\n ${generateCSRLocale.bodyFields.country}: ${country}\n ${generateCSRLocale.bodyFields.company}: ${company}\n ${generateCSRLocale.bodyFields.sslUrl}: ${sslUrl}\n ${generateCSRLocale.bodyFields.isWildcard}: ${isWildcard ? generateCSRLocale.bodyFields.yes : generateCSRLocale.bodyFields.no}\n ${generateCSRLocale.bodyFields.agree}: ${agreed ? generateCSRLocale.bodyFields.yes : generateCSRLocale.bodyFields.no}\n `,\n };\n\n submitForm && submitForm(data);\n };\n\n const checkForm = useCallback(() => {\n let isOk = false;\n\n isOk = agreed\n && email.length\n && name.length\n && city.length\n && state.length\n && country.length\n && sslUrl.length;\n\n return isOk;\n }, [email, name, city, state, country, sslUrl, agreed]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {generateCSRLocale.title}\n \n\n \n \n setEmail(e.target.value)}\n errorMessage={errors.email}\n />\n \n \n setName(e.target.value)}\n onBlur={() => handleValidateEmptyField('name')}\n errorMessage={errors.name}\n />\n \n \n setCity(e.target.value)}\n onBlur={() => handleValidateEmptyField('city')}\n errorMessage={errors.city}\n />\n \n \n setState(e.target.value)}\n onBlur={() => handleValidateEmptyField('state')}\n errorMessage={errors.state}\n />\n \n \n setCountry(e.target.value)}\n onBlur={() => handleValidateEmptyField('country')}\n errorMessage={errors.country}\n />\n \n \n setCompany(e.target.value)}\n />\n \n \n setSslUrl(e.target.value)}\n onBlur={() => handleValidateEmptyField('sslUrl')}\n errorMessage={errors.sslUrl}\n />\n \n \n\n \n {generateCSRLocale.isWildCard}\n \n\n \n setIsWildcard(true)} data-testid=\"isWildcard\">\n \n\n setIsWildcard(false)} data-testid=\"isNotWildcard\">\n \n \n\n setAgreed(!agreed)}\n >\n \n {generateCSRLocale.checkbox}\n \n \n\n \n \n \n );\n};\n\nexport default GenerateCSR;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '498px';\n\nexport const Form = styled.form``;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n color: ${theme.v2.colors.neutral.lowPure};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const CheckboxWrapper = styled(InputWrapper)`\n gap: 8px;\n margin: 24px 0px;\n max-width: unset;\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 0px 0px 4px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n \n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n display: flex;\n margin: 0px;\n button {\n max-height: 35px;\n }\n`;\n","import {\n Button, Checkbox, IconData, IconLoading,\n} from 'gatorcomponents';\nimport * as Styles from './RestorateSiteBuilderAccess.styles';\nimport React, { useState } from 'react';\nimport useLocale from '@/hooks/useLocale';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const RestorateSiteBuilderAccess = ({\n submitForm,\n selectedProduct,\n opening,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { restorateSiteBuilderAccess: restorateSiteBuilderAccessLocale } = ticketsLocale.forms;\n const [chargeAgreed, setChargeAgreed] = useState(false);\n const [termsAgreed, setTermsAgreed] = useState(false);\n\n const handleSubmit = (e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.name,\n subject: restorateSiteBuilderAccessLocale.subject,\n key: V2Forms.RESTORATE_SITEBUILDER_ACCESS,\n tags: ['bkp-builder'],\n root: {\n name: 'techsupport',\n as: ticketsLocale.forms.names.restorateSiteBuilderAccess,\n },\n body: `\n ${restorateSiteBuilderAccessLocale.bodyProduct(selectedProduct)}\n ${restorateSiteBuilderAccessLocale.bodyRequest(restorateSiteBuilderAccessLocale.subject)}\n ${restorateSiteBuilderAccessLocale.bodyAgreedCharge(chargeAgreed)}\n ${restorateSiteBuilderAccessLocale.bodyAgreedTerms(termsAgreed)}\n `,\n };\n\n submitForm && submitForm(data);\n };\n\n const checkForm = () => {\n const isOk = chargeAgreed && termsAgreed;\n\n return !isOk;\n };\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {restorateSiteBuilderAccessLocale.termsItems}\n \n\n \n {ticketsLocale.forms.internalMigration.title}\n \n\n \n setChargeAgreed(!chargeAgreed)}\n >\n \n {restorateSiteBuilderAccessLocale.chargeAgreed}\n \n \n\n setTermsAgreed(!termsAgreed)}\n >\n \n {restorateSiteBuilderAccessLocale.termsAgreed}\n \n \n \n\n \n \n \n );\n};\n\nexport default RestorateSiteBuilderAccess;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '540px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const RadioOptionsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 12px;\n`;\n\nexport const RadioQuestionTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n color: ${theme.v2.colors.neutral.lowPure};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const RadioLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './AffiliateProgram.styles';\nimport {\n Button,\n IconData,\n IconLoading,\n Input,\n Radio,\n} from 'gatorcomponents';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\nimport useLocale from '@/hooks/useLocale/useLocale';\n\nexport const AffiliateProgram = ({\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { affiliateProgram: affiliateProgramLocale } = ticketsLocale.forms;\n const [affiliate, setAffiliate] = useState(null);\n const [doubt, setDoubt] = useState('');\n\n const checkForm = useCallback(() => {\n let isOk = false;\n\n isOk = affiliate && doubt;\n\n return !isOk;\n }, [affiliate, doubt]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: undefined,\n product: undefined,\n subject: ticketsLocale.forms.affiliateProgram.subject,\n key: V2Forms.AFFILIATE_PROGRAM,\n tags: ['afiliados'],\n body: `\n ${affiliateProgramLocale.bodyProduct}\n ${affiliateProgramLocale.bodyRequest}\n ${affiliateProgramLocale.bodyIsAffiliate(affiliate)}\n ${affiliateProgramLocale.bodyDoubts(doubt)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n submitForm,\n affiliate,\n doubt,\n affiliateProgramLocale,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n\n \n \n \n {affiliateProgramLocale.labelAffiliate}\n \n\n setAffiliate(affiliateProgramLocale.affiliateOptions.yes)}\n >\n \n {affiliateProgramLocale.affiliateOptions.yes}\n \n \n\n setAffiliate(affiliateProgramLocale.affiliateOptions.no)}\n >\n \n {affiliateProgramLocale.affiliateOptions.no}\n \n \n \n\n setDoubt(e.target.value)}\n rows={3}\n counter\n />\n \n\n \n \n \n );\n};\n\nexport default AffiliateProgram;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '540px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n `}\n`;\n\nexport const List = styled.ul``;\n\nexport const ListItem = styled.li`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xxs};\n line-height: ${theme.v2.font.lineHeight.text};\n margin-bottom: 8px;\n `}\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n `}\n`;\n\nexport const InputWrapper = styled.div`\n max-width: 514px;\n`;\n\nexport const ButtonWrapper = styled.div`\n margin: 35px 0;\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './NationalDomainTransfer.styles';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport {\n Button, IconLoading, Input,\n} from 'gatorcomponents';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const NationalDomainTransfer = ({\n submitForm,\n opening,\n}) => {\n const [domainToTransfer, setDomainToTransfer] = useState({ value: '', error: '' });\n const { ticket: ticketsLocale } = useLocale();\n const { nationalDomainTransfer: nationalDomainTransferLocale } = ticketsLocale.forms;\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n if (!domainToTransfer.value) {\n setDomainToTransfer(prev => ({ ...prev, error: nationalDomainTransferLocale.required }));\n return;\n }\n\n const data = {\n tags: ['whmcs_form_transferencia_de_dominio_nacional', 'dominio_nacional'],\n subject: 'Minha Conta - Transferência de Domínio Nacional',\n key: V2Forms.NATIONAL_DOMAIN_TRANSFER,\n automation: false,\n pid: undefined,\n product: undefined,\n body: `• Produto: Transferência de Domínio Nacional\n • Solicitação: Transferência de Domínio Nacional\n • Domínio(s) a transferir: ${domainToTransfer.value}`,\n };\n\n\n submitForm && submitForm(data);\n }, [\n domainToTransfer,\n submitForm,\n nationalDomainTransferLocale.required,\n ]);\n\n const handleNewDomainToTransfer = (domain) => {\n setDomainToTransfer({ error: '', value: domain });\n };\n\n return (\n handleSubmit(e)}>\n \n {nationalDomainTransferLocale.subject}\n \n\n \n {nationalDomainTransferLocale.followTheSteps}\n \n\n \n {nationalDomainTransferLocale.steps.map(step => (\n \n {step}\n \n ))}\n \n\n \n {nationalDomainTransferLocale.remember}\n \n\n \n {nationalDomainTransferLocale.rememberList.map(step => (\n \n {step}\n \n ))}\n \n\n \n {nationalDomainTransferLocale.fillTheField}\n \n\n \n handleNewDomainToTransfer(e.target.value)}\n errorMessage={domainToTransfer.error}\n testId=\"domainInput\"\n type=\"textarea\"\n rows={3}\n />\n \n\n \n \n \n );\n};\n\nexport default NationalDomainTransfer;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '498px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const FieldWrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 12px;\n`;\n\nexport const RadioQuestionTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n color: ${theme.v2.colors.neutral.lowPure};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const FieldInfo = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 0px;\n max-width: ${defaultWrapperWidth};\n color: ${theme.v2.colors.neutral.lowLight};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const RadioLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './UpgradeVps.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n Select,\n} from 'gatorcomponents';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { HgProducts } from '../../SupportForms.types';\n\nexport const UpgradeVps = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { upgradeVps: upgradeVpsLocale } = ticketsLocale.forms;\n const [serverIp, setServerIp] = useState('');\n const [newProduct, setNewProduct] = useState(null);\n const [execution, setExecution] = useState(null);\n const [agreedTerms, setAgreedTerms] = useState(null);\n const [agreedResponsability, setAgreedResponsability] = useState(null);\n\n const checkForm = useCallback(() => {\n let isOk = false;\n\n isOk = isBRServer\n ? serverIp\n && newProduct\n && execution\n && agreedTerms\n && agreedResponsability\n : newProduct && agreedTerms;\n\n return !isOk;\n }, [\n serverIp,\n newProduct,\n execution,\n agreedTerms,\n agreedResponsability,\n ]);\n\n const getProductsOptions = useCallback(() => {\n const products = [];\n\n const higherThanStandard = [HgProducts.VPS_STANDARD, HgProducts.VPS_OPTIMIZED, HgProducts.VPS_PLATINUM].includes(selectedProduct.pid);\n if (!higherThanStandard) {\n products.push({\n label: 'VPS Standard',\n value: 'VPS Standard',\n });\n }\n\n const higherThanOptimized = [HgProducts.VPS_OPTIMIZED, HgProducts.VPS_PLATINUM].includes(selectedProduct.pid);\n if (!higherThanOptimized) {\n products.push({\n label: 'VPS Optimized',\n value: 'VPS Optimized',\n });\n }\n\n const higherThanPlatinum = [HgProducts.VPS_PLATINUM].includes(selectedProduct.pid);\n if (!higherThanPlatinum) {\n products.push({\n label: 'VPS Platinum',\n value: 'VPS Platinum',\n });\n }\n\n const higherThanPremium = [HgProducts.VPS_PREMIUM].includes(selectedProduct.pid);\n if (!higherThanPremium) {\n products.push({\n label: 'VPS Premium',\n value: 'VPS Premium',\n });\n }\n\n return products;\n }, [selectedProduct]);\n\n const getNewProductsOptions = useCallback(() => {\n const products = [];\n\n const higherThanVps2 = [HgProducts.VPS_2, HgProducts.VPS_4, HgProducts.VPS_4_PLUS, HgProducts.VPS_6, HgProducts.VPS_8].includes(selectedProduct.pid);\n if (!higherThanVps2) {\n products.push({\n label: 'VPS 2',\n value: 'VPS 2',\n });\n }\n\n const higherThanVps4 = [HgProducts.VPS_4, HgProducts.VPS_4_PLUS, HgProducts.VPS_6, HgProducts.VPS_8].includes(selectedProduct.pid);\n if (!higherThanVps4) {\n products.push({\n label: 'VPS 4',\n value: 'VPS 4',\n });\n }\n\n const higherThanVps4Plus = [HgProducts.VPS_4_PLUS, HgProducts.VPS_6, HgProducts.VPS_8].includes(selectedProduct.pid);\n if (!higherThanVps4Plus) {\n products.push({\n label: 'VPS 4 Plus',\n value: 'VPS 4 Plus',\n });\n }\n\n const higherThanVps6 = [HgProducts.VPS_6, HgProducts.VPS_8].includes(selectedProduct.pid);\n if (!higherThanVps6) {\n products.push({\n label: 'VPS 6',\n value: 'VPS 6',\n });\n }\n\n const higherThanVps8 = [HgProducts.VPS_8].includes(selectedProduct.pid);\n if (!higherThanVps8) {\n products.push({\n label: 'VPS 8',\n value: 'VPS 8',\n });\n }\n\n return products;\n }, [selectedProduct]);\n\n const productOptions = HgProducts && HgProducts.NEW_VPS.includes(selectedProduct.pid)\n ? getNewProductsOptions()\n : getProductsOptions();\n\n const executOptions = [{\n label: 'Sim',\n value: 'Sim',\n }, {\n label: 'Não',\n value: 'Não',\n }];\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: ticketsLocale.forms.names.upgradeVps,\n key: V2Forms.UPGRADE_VPS,\n tags: ['whmcs_form_financeiro_upgrade-downgrade_plano'],\n body: isBRServer ? `\n ${upgradeVpsLocale.body.product(selectedProduct)}\n ${upgradeVpsLocale.body.request}\n ${upgradeVpsLocale.body.serverIp(serverIp)}\n ${upgradeVpsLocale.body.newProduct(newProduct)}\n ${upgradeVpsLocale.body.execution(execution)}\n ${upgradeVpsLocale.body.agreedTerms(agreedTerms)}\n ${upgradeVpsLocale.body.agreedResponsability(agreedResponsability)}\n ${upgradeVpsLocale.body.productId(selectedProduct)}\n ` : `\n ${upgradeVpsLocale.body.product(selectedProduct)}\n ${upgradeVpsLocale.body.request}\n ${upgradeVpsLocale.body.newProduct(newProduct)}\n ${upgradeVpsLocale.body.agreedTerms(agreedTerms)}\n ${upgradeVpsLocale.body.productId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n submitForm,\n selectedProduct,\n upgradeVpsLocale,\n serverIp,\n newProduct,\n execution,\n agreedResponsability,\n agreedTerms,\n ]);\n\n return (\n handleSubmit(e)}>\n {isBRServer && (\n \n \n )}\n\n\n \n {isBRServer && (\n \n setServerIp(e.target.value)}\n rows={3}\n counter\n />\n \n {upgradeVpsLocale.fields.ipInfo}\n \n \n )}\n\n setNewProduct(label)}\n withScroll\n />\n\n {isBRServer && (\n \n setExecution(label)}\n withScroll\n />\n \n {upgradeVpsLocale.fields.executionInfo}\n \n \n )}\n\n setAgreedTerms(!agreedTerms)}\n >\n \n {upgradeVpsLocale.fields.agreedTermsLabel}\n \n \n\n {isBRServer && (\n setAgreedResponsability(!agreedResponsability)}\n >\n \n {upgradeVpsLocale.fields.agreedResponsabilityLabel}\n \n \n )}\n \n\n \n \n \n );\n};\n\nexport default UpgradeVps;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '540px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputContainer = styled.div`\n`;\n\nexport const FileInputContainer = styled.div`\n textarea {\n padding: 4px;\n }\n`;\n\nexport const InputTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const InputDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: 12px;\n margin: 8px 0 0;\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n color: ${theme.v2.colors.neutral.lowPure};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n lin-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 24px 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n margin-top: 12px;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\n display:none;\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './SiteLockUpgrade.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n Select,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { HgProducts } from '../../SupportForms.types';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const SiteLockUpgrade = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { upgradeSiteLock: upgradeSiteLockLocale } = ticketsLocale.forms;\n const [formData, setFormData] = useState({\n domain: '',\n newProduct: '',\n agreed: false,\n });\n\n const [productOptions, setProductOptions] = useState([]);\n\n const checkForm = useCallback(() => !(!!formData.domain && !!formData.newProduct && !!formData.agreed), [formData]);\n\n const createUpgradeOptions = useCallback(() => {\n const options = [];\n\n const professionalOptin = {\n label: 'Sitelock Professional',\n value: 1,\n };\n\n const premiumOptin = {\n label: 'Sitelock Premium',\n value: 2,\n };\n\n const enterpriseOptin = {\n label: 'Sitelock Enterprise',\n value: 3,\n };\n\n const shouldNotIncludeProfessional = [\n HgProducts.SITELOCK_PROFESSIONAL,\n HgProducts.SITELOCK_PREMIUM,\n HgProducts.SITELOCK_ENTERPRISE,\n ].includes(selectedProduct.pid);\n\n const shouldNotIncludePremium = [\n HgProducts.SITELOCK_PREMIUM,\n HgProducts.SITELOCK_ENTERPRISE,\n ].includes(selectedProduct.pid);\n\n const shouldNotIncludeEnterprise = [\n HgProducts.SITELOCK_ENTERPRISE,\n ].includes(selectedProduct.pid);\n\n !shouldNotIncludeProfessional && options.push(professionalOptin);\n !shouldNotIncludePremium && options.push(premiumOptin);\n !shouldNotIncludeEnterprise && options.push(enterpriseOptin);\n\n setProductOptions(options);\n }, [selectedProduct]);\n\n useEffect(() => {\n createUpgradeOptions();\n }, [createUpgradeOptions]);\n\n\n const mountSitelockTag = useCallback(() => {\n const rules = {\n [HgProducts.SITELOCK_PROFESSIONAL]: 'sitelock_professional',\n [HgProducts.SITELOCK_PREMIUM]: 'sitelock_premium',\n [HgProducts.SITELOCK_ENTERPRISE]: 'sitelock_enterprise',\n };\n\n return rules[selectedProduct.pid];\n }, [\n selectedProduct,\n ]);\n\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: ticketsLocale.forms.names.upgradeSiteLock,\n server_value: selectedProduct.serverhostname,\n domain_value: selectedProduct.domain,\n key: V2Forms.UPGRADE_SITELOCK,\n tags: [\n 'whmcs_form_financeiro_upgrade_sitelock',\n mountSitelockTag(),\n ],\n body: `\n • ${upgradeSiteLockLocale.body.product(selectedProduct)}\n • ${upgradeSiteLockLocale.body.request}\n • ${upgradeSiteLockLocale.body.domain(formData.domain)}\n • ${upgradeSiteLockLocale.body.newSitelock(formData.newProduct)}\n • ${upgradeSiteLockLocale.body.agreed(formData.agreed)}\n • ${upgradeSiteLockLocale.body.productId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n selectedProduct,\n formData,\n submitForm,\n upgradeSiteLockLocale,\n mountSitelockTag,\n ]);\n\n const handleChange = useCallback(({ key, value }) => {\n setFormData({\n ...formData,\n [key]: value,\n });\n }, [\n formData,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {upgradeSiteLockLocale.title}\n \n\n \n handleChange({ key: 'domain', value: e.target.value })}\n type=\"text\"\n testId=\"domain\"\n />\n\n handleChange({ key: 'newProduct', value: label })}\n withScroll\n />\n \n\n handleChange({ key: 'agreed', value: !formData.agreed })}\n >\n \n {upgradeSiteLockLocale.placeholders.agreed}\n \n \n\n \n \n \n );\n};\n\nexport default SiteLockUpgrade;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '540px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputContainer = styled.div`\n`;\n\nexport const FileInputContainer = styled.div`\n textarea {\n padding: 4px;\n }\n`;\n\nexport const InputTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const InputDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: 12px;\n margin: 8px 0 0;\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n color: ${theme.v2.colors.neutral.lowPure};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n lin-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n margin-top: 24px;\n\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n margin-top: 12px;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\n display:none;\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './CodeGuardUpgrade.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Select,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { HgProducts } from '../../SupportForms.types';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const CodeGuardUpgrade = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { upgradeCodeGuard: upgradeCodeGuardLocale } = ticketsLocale.forms;\n const [formData, setFormData] = useState({\n domain: '',\n newProduct: '',\n agreed: false,\n agreedSelectedPlan: false,\n });\n\n const [productOptions, setProductOptions] = useState([]);\n\n const checkForm = useCallback(() => !(!!formData.newProduct && !!formData.agreed && !!formData.agreedSelectedPlan), [formData]);\n\n const createUpgradeOptions = useCallback(() => {\n const options = [];\n\n const starterOption = {\n label: 'CodeGuard Iniciante',\n value: 2,\n };\n\n const professionalOption = {\n label: 'CodeGuard Profissional',\n value: 3,\n };\n\n const premiumOption = {\n label: 'CodeGuard Premium',\n value: 4,\n };\n\n const shouldIncludeStarterOption = [\n HgProducts.CODEGUARD_BASICO,\n ].includes(selectedProduct.pid);\n\n const shouldIncludeProfessional = [\n HgProducts.CODEGUARD_BASICO,\n HgProducts.CODEGUARD_INICIANTE,\n HgProducts.CODEGUARD_PREMIUM,\n ].includes(selectedProduct.pid);\n\n const shouldIncludePremium = [\n HgProducts.CODEGUARD_BASICO,\n HgProducts.CODEGUARD_INICIANTE,\n HgProducts.CODEGUARD_PROFISSIONAL,\n ].includes(selectedProduct.pid);\n\n shouldIncludeStarterOption && options.push(starterOption);\n shouldIncludeProfessional && options.push(professionalOption);\n shouldIncludePremium && options.push(premiumOption);\n\n setProductOptions(options);\n }, [selectedProduct]);\n\n useEffect(() => {\n createUpgradeOptions();\n }, [createUpgradeOptions]);\n\n\n const mountCodeGuardTag = useCallback(() => {\n const rules = {\n [HgProducts.CODEGUARD_BASICO]: 'codeguard_basico',\n [HgProducts.CODEGUARD_INICIANTE]: 'codeguard_iniciante',\n [HgProducts.CODEGUARD_PROFISSIONAL]: 'codeguard_profissional',\n [HgProducts.CODEGUARD_PREMIUM]: 'codeguard_premium',\n };\n\n return rules[selectedProduct.pid];\n }, [\n selectedProduct,\n ]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: ticketsLocale.forms.names.upgradeSiteLock,\n server_value: selectedProduct.serverhostname,\n domain_value: selectedProduct.domain,\n key: V2Forms.UPGRADE_CODEGUARD,\n tags: [\n 'whmcs_form_financeiro_upgrade_codeguard',\n mountCodeGuardTag(),\n ],\n body: `\n • ${upgradeCodeGuardLocale.body.product(selectedProduct)}\n • ${upgradeCodeGuardLocale.body.request}\n • ${upgradeCodeGuardLocale.body.newProduct(formData.newProduct)}\n • ${upgradeCodeGuardLocale.body.agreed(formData.agreed)}\n • ${upgradeCodeGuardLocale.body.agreedSelectedPlan(formData.agreedSelectedPlan)}\n • ${upgradeCodeGuardLocale.body.productId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n selectedProduct,\n formData,\n submitForm,\n upgradeCodeGuardLocale,\n mountCodeGuardTag,\n ]);\n\n const handleChange = useCallback(({ key, value }) => {\n setFormData({\n ...formData,\n [key]: value,\n });\n }, [\n formData,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {upgradeCodeGuardLocale.title}\n \n\n \n handleChange({ key: 'newProduct', value: label })}\n withScroll\n />\n \n\n \n handleChange({ key: 'agreed', value: !formData.agreed })}\n >\n \n {upgradeCodeGuardLocale.placeholders.agreed}\n \n \n\n handleChange({ key: 'agreedSelectedPlan', value: !formData.agreedSelectedPlan })}\n >\n \n {upgradeCodeGuardLocale.placeholders.agreedSelectedPlan}\n \n \n \n\n\n \n \n \n );\n};\n\nexport default CodeGuardUpgrade;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '540px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputContainer = styled.div`\n`;\n\nexport const FileInputContainer = styled.div`\n textarea {\n padding: 4px;\n }\n`;\n\nexport const InputTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const InputDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: 12px;\n margin: 8px 0 0;\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n color: ${theme.v2.colors.neutral.lowPure};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n lin-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n margin-top: 24px;\n\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n margin-top: 12px;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\n display:none;\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './ChangePaymentcycle.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n Select,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { HgProducts } from '../../SupportForms.types';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const ChangePaymentcicle = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { changePaymentCycle: changePaymentCycleLocale } = ticketsLocale.forms;\n const [formData, setFormData] = useState({\n newCycle: '',\n generalComment: '',\n agreed: false,\n });\n\n const [productOptions, setProductOptions] = useState([]);\n\n const checkForm = useCallback(() => !(!!formData.agreed && !!formData.newCycle), [formData]);\n\n const createUpgradeOptions = useCallback(() => {\n const options = [];\n\n const monthly = {\n label: 'Mensal',\n value: 'Monthly',\n };\n\n const quarterly = {\n label: 'Trimestral',\n value: 'Quarterly',\n };\n\n const annualy = {\n label: 'Anual',\n value: 'Annually',\n };\n\n if (selectedProduct.billingcycle !== 'Monthly') {\n options.push(monthly);\n }\n\n if (selectedProduct.billingcycle !== 'Quarterly') {\n options.push(quarterly);\n }\n\n\n if (selectedProduct.billingcycle !== 'Annually') {\n if (!HgProducts.STREAMING_ALL.includes(selectedProduct.pid)) {\n options.push(annualy);\n }\n }\n\n options.filter(option => option.value !== selectedProduct.billingcycle);\n\n setProductOptions(options);\n }, [selectedProduct]);\n\n useEffect(() => {\n createUpgradeOptions();\n }, [createUpgradeOptions]);\n\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: changePaymentCycleLocale.subject,\n server_value: selectedProduct.serverhostname,\n domain_value: selectedProduct.domain,\n key: V2Forms.CHANGE_PAYMENT_CYCLE,\n tags: [\n 'whmcs_form_financeiro_alterar_ciclo',\n selectedProduct.name.toLowerCase().replace(/ /g, '_'),\n ],\n body: `\n • ${changePaymentCycleLocale.body.product(selectedProduct)}\n • ${changePaymentCycleLocale.body.request}\n • ${changePaymentCycleLocale.body.newCycle(formData.newCycle)}\n • ${changePaymentCycleLocale.body.agreed(formData.agreed)}\n • ${changePaymentCycleLocale.body.generalComment(formData.generalComment)}\n • ${changePaymentCycleLocale.body.productId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n selectedProduct,\n formData,\n submitForm,\n changePaymentCycleLocale,\n ]);\n\n const handleChange = useCallback(({ key, value }) => {\n setFormData({\n ...formData,\n [key]: value,\n });\n }, [\n formData,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {changePaymentCycleLocale.title}\n \n\n \n handleChange({ key: 'newCycle', value: label })}\n withScroll\n />\n\n handleChange({\n key: 'generalComment',\n value: e.target.value,\n })}\n rows={3}\n counter\n />\n \n\n \n handleChange({ key: 'agreed', value: !formData.agreed })}\n >\n \n {changePaymentCycleLocale.placeholders.agreed}\n \n \n \n\n\n \n \n \n );\n};\n\nexport default ChangePaymentcicle;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '540px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputContainer = styled.div`\n`;\n\nexport const FileInputContainer = styled.div`\n textarea {\n padding: 4px;\n }\n`;\n\nexport const InputTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const InputDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: 12px;\n margin: 8px 0 0;\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n color: ${theme.v2.colors.neutral.lowPure};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 4px 16px 0px;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 24px 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n margin-top: 12px;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\n display:none;\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './PrivateSslCertificate.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const PrivateSslCertificate = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const {\n privateSslCertificate: privateSslCertificateLocale,\n } = ticketsLocale.forms;\n const [formData, setFormData] = useState({\n domain: '',\n agreed: false,\n });\n\n const checkForm = useCallback(() => !(!!formData.domain && !!formData.agreed), [formData]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: privateSslCertificateLocale.subject,\n server_value: selectedProduct.serverhostname,\n domain_value: selectedProduct.domain,\n key: V2Forms.PRIVATE_SSL,\n tags: [\n 'whmcs_form_tecnico_certificado_ssl_privado_2',\n selectedProduct.name.toLowerCase().replace(/ /g, '_'),\n ],\n body: `\n • ${privateSslCertificateLocale.body.product(selectedProduct)}\n • ${privateSslCertificateLocale.body.request}\n • ${privateSslCertificateLocale.body.domain(formData.domain)}\n • ${privateSslCertificateLocale.body.agreed(formData.agreed)}\n • ${privateSslCertificateLocale.body.productId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n selectedProduct,\n formData,\n submitForm,\n privateSslCertificateLocale,\n ]);\n\n const handleChange = useCallback(({ key, value }) => {\n setFormData({\n ...formData,\n [key]: value,\n });\n }, [\n formData,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {privateSslCertificateLocale.title}\n \n\n \n handleChange({ key: 'domain', value: e.target.value })}\n type=\"text\"\n testId=\"domain\"\n />\n \n {privateSslCertificateLocale.placeholders.domainInfo}\n \n\n \n\n handleChange({ key: 'agreed', value: !formData.agreed })}\n >\n \n {privateSslCertificateLocale.placeholders.agreed}\n \n \n\n \n \n \n );\n};\n\nexport default PrivateSslCertificate;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '540px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputContainer = styled.div`\n`;\n\nexport const FileInputContainer = styled.div`\n textarea {\n padding: 4px;\n }\n`;\n\nexport const InputTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const InputDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: 12px;\n margin: 8px 0 0;\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n color: ${theme.v2.colors.neutral.lowPure};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 4px 16px 0px;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 24px 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n margin-top: 12px;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\n display:none;\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './WildcardSslCertificate.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const WildcardSslCertificate = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const {\n widlcardSslCertificate: widlcardSslCertificateLocale,\n } = ticketsLocale.forms;\n const [formData, setFormData] = useState({\n domain: '',\n agreed: false,\n });\n\n const checkForm = useCallback(() => !(!!formData.domain && !!formData.agreed), [formData]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: widlcardSslCertificateLocale.subject,\n server_value: selectedProduct.serverhostname,\n domain_value: selectedProduct.domain,\n key: V2Forms.WILDCARD_SSL,\n tags: [\n 'whmcs_form_tecnico_certificado_ssl_wildcard_2',\n selectedProduct.name.toLowerCase().replace(/ /g, '_'),\n ],\n body: `\n • ${widlcardSslCertificateLocale.body.product(selectedProduct)}\n • ${widlcardSslCertificateLocale.body.request}\n • ${widlcardSslCertificateLocale.body.domain(formData.domain)}\n • ${widlcardSslCertificateLocale.body.agreed(formData.agreed)}\n • ${widlcardSslCertificateLocale.body.productId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n selectedProduct,\n formData,\n submitForm,\n widlcardSslCertificateLocale,\n ]);\n\n const handleChange = useCallback(({ key, value }) => {\n setFormData({\n ...formData,\n [key]: value,\n });\n }, [\n formData,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {widlcardSslCertificateLocale.title}\n \n\n \n handleChange({ key: 'domain', value: e.target.value })}\n type=\"text\"\n testId=\"domain\"\n />\n \n {widlcardSslCertificateLocale.placeholders.domainInfo}\n \n\n \n\n handleChange({ key: 'agreed', value: !formData.agreed })}\n >\n \n {widlcardSslCertificateLocale.placeholders.agreed}\n \n \n\n \n \n \n );\n};\n\nexport default WildcardSslCertificate;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '540px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputContainer = styled.div`\n`;\n\nexport const FileInputContainer = styled.div`\n textarea {\n padding: 4px;\n }\n`;\n\nexport const InputTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const InputDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: 12px;\n margin: 8px 0 0;\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n color: ${theme.v2.colors.neutral.lowPure};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 4px 16px 0px;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 24px 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n margin-top: 12px;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\n display:none;\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './EnterpriseSslCertificate.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const EnterpriseSslCertificate = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const {\n enterPrisessslCertificate: enterPrisessslCertificateLocale,\n } = ticketsLocale.forms;\n const [formData, setFormData] = useState({\n cnpj: '',\n phone: '',\n email: '',\n agreed: false,\n });\n\n const checkForm = useCallback(() => !(\n !!formData.cnpj\n && !!formData.phone\n && !!formData.email\n && !!formData.agreed\n ), [formData]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: enterPrisessslCertificateLocale.subject,\n server_value: selectedProduct.serverhostname,\n domain_value: selectedProduct.domain,\n key: V2Forms.ENTERPRISE_SSL,\n tags: [\n 'whmcs_form_tecnico_certificado_ssl_empresarial',\n selectedProduct.name.toLowerCase().replace(/ /g, '_'),\n ],\n body: `\n • ${enterPrisessslCertificateLocale.body.product(selectedProduct)}\n • ${enterPrisessslCertificateLocale.body.request}\n • ${enterPrisessslCertificateLocale.body.cnpj(formData.cnpj)}\n • ${enterPrisessslCertificateLocale.body.phone(formData.phone)}\n • ${enterPrisessslCertificateLocale.body.email(formData.email)}\n • ${enterPrisessslCertificateLocale.body.agreed(formData.agreed)}\n • ${enterPrisessslCertificateLocale.body.productId(selectedProduct)}`,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n selectedProduct,\n formData,\n submitForm,\n enterPrisessslCertificateLocale,\n ]);\n\n const handleChange = useCallback(({ key, value }) => {\n setFormData({\n ...formData,\n [key]: value,\n });\n }, [\n formData,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {enterPrisessslCertificateLocale.title}\n \n\n \n handleChange({ key: 'cnpj', value: e.target.value })}\n type=\"text\"\n testId=\"cnpj\"\n />\n\n \n handleChange({ key: 'phone', value: e.target.value })}\n type=\"text\"\n testId=\"phone\"\n />\n \n {enterPrisessslCertificateLocale.placeholders.phoneInfo}\n \n \n\n \n handleChange({ key: 'email', value: e.target.value })}\n type=\"text\"\n testId=\"email\"\n />\n \n {enterPrisessslCertificateLocale.placeholders.emailInfo}\n \n \n\n \n\n handleChange({ key: 'agreed', value: !formData.agreed })}\n >\n \n {enterPrisessslCertificateLocale.placeholders.agreed}\n \n \n\n \n \n \n );\n};\n\nexport default EnterpriseSslCertificate;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '540px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n > div {\n width: 100%;\n }\n`;\n\nexport const InputContainer = styled.div`\n`;\n\nexport const FileInputContainer = styled.div`\n textarea {\n padding: 4px;\n }\n`;\n\nexport const InputTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const InputDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: 12px;\n margin: 8px 0 0;\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n color: ${theme.v2.colors.neutral.lowPure};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n lin-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 24px 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n margin-top: 12px;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\n display:none;\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputInfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 4px 16px 0px;\n `}\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './InstallWhmcs.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const InstallWhmcs = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { installWhmcs: installWhmcsLocale } = ticketsLocale.forms;\n const [formData, setFormData] = useState({\n linkField: '',\n email: '',\n password: '',\n key: '',\n agreed: false,\n });\n\n const checkForm = useCallback(() => !(\n !!formData.linkField\n && !!formData.email\n && !!formData.password\n && !!formData.key\n && !!formData.agreed\n ), [formData]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: ticketsLocale.forms.names.installWhmcs,\n server_value: selectedProduct.serverhostname,\n domain_value: selectedProduct.domain,\n key: V2Forms.INSTALL_WHMCS,\n tags: [\n 'whmcs_form_tecnico_instalar_whmcs',\n selectedProduct.name.toLowerCase().replace(/ /g, '_'),\n ],\n body: `\n • ${installWhmcsLocale.body.product(selectedProduct)}\n • ${installWhmcsLocale.body.request}\n • ${installWhmcsLocale.body.link(formData.linkField)}\n • ${installWhmcsLocale.body.email(formData.email)}\n • ${installWhmcsLocale.body.password(formData.password)}\n • ${installWhmcsLocale.body.key(formData.key)}\n • ${installWhmcsLocale.body.agreed(formData.agreed)}\n • ${installWhmcsLocale.body.productId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n selectedProduct,\n formData,\n submitForm,\n installWhmcsLocale,\n ]);\n\n const handleChange = useCallback(({ key, value }) => {\n setFormData({\n ...formData,\n [key]: value,\n });\n }, [\n formData,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {installWhmcsLocale.title}\n \n\n \n \n handleChange({ key: 'linkField', value: e.target.value })}\n type=\"text\"\n testId=\"linkField\"\n />\n \n {installWhmcsLocale.placeholders.linkFieldInfo}\n \n \n\n handleChange({ key: 'email', value: e.target.value })}\n type=\"text\"\n testId=\"email\"\n />\n\n handleChange({ key: 'password', value: e.target.value })}\n type=\"password\"\n testId=\"password\"\n />\n\n handleChange({ key: 'key', value: e.target.value })}\n type=\"key\"\n testId=\"key\"\n />\n \n\n handleChange({ key: 'agreed', value: !formData.agreed })}\n >\n \n {installWhmcsLocale.placeholders.agreed}\n \n \n\n \n \n \n );\n};\n\nexport default InstallWhmcs;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '540px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputContainer = styled.div`\n`;\n\nexport const FileInputContainer = styled.div`\n textarea {\n padding: 4px;\n }\n`;\n\nexport const InputTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const InputDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: 12px;\n margin: 8px 0 0;\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n color: ${theme.v2.colors.neutral.lowPure};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 4px 16px 0px;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n margin-top: 12px;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\n display:none;\n`;\n","import { isBRServer } from '@/utils/Validators/validation';\n\n\nexport const linuxWithCpanel = [\n { label: 'CentOS 7 cPanel', value: 'CentOS 7 cPanel' },\n];\n\nexport const linuxWithoutCpanel = [\n { label: 'CentOS 8', value: 'CentOS 8' },\n { label: 'CentOS 7', value: 'CentOS 7' },\n { label: 'Debian 10', value: 'Debian 10' },\n { label: 'Debian 9', value: 'Debian 9' },\n { label: 'Ubuntu 22', value: 'Ubuntu 22' },\n];\n\nexport const windowsWithPleskWithoutLicense = isBRServer\n ? [\n { label: 'CentOS 8 com Plesk', value: 'CentOS 8 com Plesk' },\n { label: 'CentOS 7 com Plesk', value: 'CentOS 7 com Plesk' },\n { label: 'Debian 10 com Plesk', value: 'Debian 10 com Plesk' },\n { label: 'Debian 9 com Plesk', value: 'Debian 9 com Plesk' },\n { label: 'Ubuntu 22 com Plesk', value: 'Ubuntu 22 com Plesk' },\n ]\n : [\n { label: 'CentOS 8 con Plesk', value: 'CentOS 8 con Plesk' },\n { label: 'CentOS 7 con Plesk', value: 'CentOS 7 con Plesk' },\n { label: 'Debian 10 con Plesk', value: 'Debian 10 con Plesk' },\n { label: 'Debian 9 con Plesk', value: 'Debian 9 con Plesk' },\n { label: 'Ubuntu 22 con Plesk', value: 'Ubuntu 22 con Plesk' },\n ];\n\nexport const windowsWithPleskWithLicense = isBRServer\n ? [\n { label: 'Windows Server 2016', value: 'Windows Server 2016' },\n { label: 'Windows Server 2019', value: 'Windows Server 2019' },\n ]\n : [\n { label: 'Windows Server 2016', value: 'Windows Server 2016' },\n { label: 'Windows Server 2019', value: 'Windows Server 2019' },\n ];\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './ReloadRebuild.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Select,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\nimport {\n linuxWithCpanel, linuxWithoutCpanel, windowsWithPleskWithLicense, windowsWithPleskWithoutLicense,\n} from './ReloadRebuild.types';\n\nexport const ReloadRebuild = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const {\n reloadRebuild: reloadRebuildLocale,\n } = ticketsLocale.forms;\n const [formData, setFormData] = useState({\n selectedImage: '',\n canExecuteInComercialHours: '',\n agreedBrasiliaHours: false,\n agreedRebuildReloadTerms: false,\n agreedValue: false,\n agreedResponsability: false,\n });\n\n const checkForm = useCallback(() => !(\n !!formData.selectedImage\n && !!formData.canExecuteInComercialHours\n && !!formData.agreedBrasiliaHours\n && !!formData.agreedRebuildReloadTerms\n && !!formData.agreedResponsability\n ), [formData]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: reloadRebuildLocale.subject,\n server_value: selectedProduct.serverhostname,\n domain_value: selectedProduct.domain,\n key: V2Forms.RELOAD_REBUILD,\n tags: [\n 'whmcs_form_tecnico_reload-rebuild',\n selectedProduct.name.toLowerCase().replace(/ /g, '_'),\n ],\n body: `\n • ${reloadRebuildLocale.body.product(selectedProduct)}\n • ${reloadRebuildLocale.body.request}\n • ${reloadRebuildLocale.body.image(formData.selectedImage)}\n • ${reloadRebuildLocale.body.canExecuteInComercialHours(formData.canExecuteInComercialHours)}\n • ${reloadRebuildLocale.body.agreedBrasiliaHours(formData.agreedBrasiliaHours)}\n • ${reloadRebuildLocale.body.agreedRebuildReloadTerms(formData.agreedRebuildReloadTerms)}\n • ${reloadRebuildLocale.body.agreedValue(formData.agreedValue)}\n • ${reloadRebuildLocale.body.agreedResponsability(formData.agreedResponsability)}\n • ${reloadRebuildLocale.body.productId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n selectedProduct,\n formData,\n submitForm,\n reloadRebuildLocale,\n ]);\n\n const handleChange = useCallback(({ key, value }) => {\n setFormData({\n ...formData,\n [key]: value,\n });\n }, [\n formData,\n ]);\n\n const imageOptions = [\n {\n label: reloadRebuildLocale.placeholders.linuxWithCpanel,\n value: reloadRebuildLocale.placeholders.linuxWithCpanel,\n title: true,\n },\n ...linuxWithCpanel,\n {\n label: reloadRebuildLocale.placeholders.linuxWithoutCpanel,\n value: reloadRebuildLocale.placeholders.linuxWithoutCpanel,\n title: true,\n },\n ...linuxWithoutCpanel,\n {\n label: reloadRebuildLocale.placeholders.windowsWithPleskWithoutLicense,\n value: reloadRebuildLocale.placeholders.windowsWithPleskWithoutLicense,\n title: true,\n },\n ...windowsWithPleskWithoutLicense,\n {\n label: reloadRebuildLocale.placeholders.windowsWithPleskWithLicense,\n value: reloadRebuildLocale.placeholders.windowsWithPleskWithLicense,\n title: true,\n },\n ...windowsWithPleskWithLicense,\n ];\n\n const hoursOptions = [\n { value: reloadRebuildLocale.placeholders.yes, label: reloadRebuildLocale.placeholders.yes },\n { value: reloadRebuildLocale.placeholders.no, label: reloadRebuildLocale.placeholders.no },\n ];\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {reloadRebuildLocale.title}\n \n\n \n handleChange({ key: 'selectedImage', value: label })}\n withScroll\n />\n\n handleChange({ key: 'canExecuteInComercialHours', value: label })}\n withScroll\n />\n\n handleChange({ key: 'agreedBrasiliaHours', value: !formData.agreedBrasiliaHours })}\n >\n \n {reloadRebuildLocale.placeholders.agreedBrasiliaHours}\n \n \n\n handleChange({ key: 'agreedRebuildReloadTerms', value: !formData.agreedRebuildReloadTerms })}\n >\n \n {reloadRebuildLocale.placeholders.agreedRebuildReloadTerms}\n \n \n\n handleChange({ key: 'agreedValue', value: !formData.agreedValue })}\n >\n \n {reloadRebuildLocale.placeholders.agreedValue}\n \n \n\n handleChange({ key: 'agreedResponsability', value: !formData.agreedResponsability })}\n >\n \n {reloadRebuildLocale.placeholders.agreedResponsability}\n \n \n\n \n\n\n \n \n \n );\n};\n\nexport default ReloadRebuild;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '540px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputContainer = styled.div`\n`;\n\nexport const FileInputContainer = styled.div`\n textarea {\n padding: 4px;\n }\n`;\n\nexport const InputTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const InputDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: 12px;\n margin: 8px 0 0;\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n color: ${theme.v2.colors.neutral.lowPure};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 4px 16px 0px;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 24px 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n margin-top: 12px;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\n display:none;\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './MoreEmails.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const MoreEmails = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const {\n moreEmails: moreEmailsLocale,\n } = ticketsLocale.forms;\n\n const [formData, setFormData] = useState({\n serverIp: '',\n motivation: '',\n newLimit: '',\n agreedService: false,\n agreedPolicy: false,\n agreedResponsability: false,\n });\n\n const checkForm = useCallback(() => !(\n !!formData.serverIp\n && !!formData.motivation\n && !!formData.newLimit\n && !!formData.agreedService\n && !!formData.agreedPolicy\n && !!formData.agreedResponsability\n ), [formData]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: moreEmailsLocale.subject,\n server_value: selectedProduct.serverhostname,\n domain_value: selectedProduct.domain,\n key: V2Forms.MORE_EMAILS,\n tags: [\n 'whmcs_form_tecnico_envio-emails',\n selectedProduct.name.toLowerCase().replace(/ /g, '_'),\n ],\n body: `\n • ${moreEmailsLocale.body.product(selectedProduct)}\n • ${moreEmailsLocale.body.request}\n • ${moreEmailsLocale.body.serverIp(formData.serverIp)}\n • ${moreEmailsLocale.body.motivation(formData.motivation)}\n • ${moreEmailsLocale.body.newLimit(formData.newLimit)}\n • ${moreEmailsLocale.body.agreedService(formData.agreedService)}\n • ${moreEmailsLocale.body.agreedPolicy(formData.agreedPolicy)}\n • ${moreEmailsLocale.body.agreedResponsability(formData.agreedResponsability)}\n • ${moreEmailsLocale.body.productId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n selectedProduct,\n formData,\n submitForm,\n moreEmailsLocale,\n ]);\n\n const handleChange = useCallback(({ key, value }) => {\n setFormData({\n ...formData,\n [key]: value,\n });\n }, [\n formData,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {moreEmailsLocale.title}\n \n\n \n handleChange({ key: 'serverIp', value: e.target.value })}\n type=\"text\"\n testId=\"serverIp\"\n />\n\n \n handleChange({ key: 'motivation', value: e.target.value })}\n type=\"text\"\n testId=\"motivation\"\n />\n \n\n \n handleChange({ key: 'newLimit', value: e.target.value })}\n type=\"text\"\n testId=\"newLimit\"\n />\n \n \n\n \n handleChange({ key: 'agreedService', value: !formData.agreedService })}\n >\n \n {moreEmailsLocale.placeholders.agreedService}\n \n \n\n handleChange({ key: 'agreedPolicy', value: !formData.agreedPolicy })}\n >\n \n {moreEmailsLocale.placeholders.agreedPolicy}\n \n \n\n handleChange({ key: 'agreedResponsability', value: !formData.agreedResponsability })}\n >\n \n {moreEmailsLocale.placeholders.agreedResponsability}\n \n \n \n\n \n \n \n );\n};\n\nexport default MoreEmails;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '700px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n > div {\n width: 100%;\n }\n`;\n\nexport const InputContainer = styled.div`\n`;\n\nexport const FileInputContainer = styled.div`\n textarea {\n padding: 4px;\n }\n`;\n\nexport const InputTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const InputDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: 12px;\n margin: 8px 0 0;\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n lin-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 24px 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n margin-top: 12px;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\n display:none;\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputInfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 4px 16px 0px;\n `}\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './MigrateVpsDedicated.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n Select,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const MigrateVpsDedicated = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { migrateVpsDedicated: migrateVpsDedicatedLocale } = ticketsLocale.forms;\n const [formData, setFormData] = useState({\n ipOrDomain: '',\n user: '',\n password: '',\n selectedRootAccess: '',\n selectedWhmcsKey: '',\n installedDomain: '',\n detailedList: '',\n agreed: false,\n });\n\n const checkForm = useCallback(() => !(\n !!formData.ipOrDomain\n && !!formData.user\n && !!formData.password\n && !!formData.selectedRootAccess\n && !!formData.selectedWhmcsKey\n && !!formData.agreed\n ), [formData]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: ticketsLocale.forms.names.migrateVpsDedicated,\n server_value: selectedProduct.serverhostname,\n domain_value: selectedProduct.domain,\n key: V2Forms.MIGRATE_VPS_DEDICATED,\n tags: [\n 'whmcs_form_tecnico_migracao_dedicado_vps',\n selectedProduct.name.toLowerCase().replace(/ /g, '_'),\n ],\n body: `\n • ${migrateVpsDedicatedLocale.body.product(selectedProduct)}\n • ${migrateVpsDedicatedLocale.body.request}\n • ${migrateVpsDedicatedLocale.body.ipOrDomain(formData.ipOrDomain)}\n • ${migrateVpsDedicatedLocale.body.user(formData.user)}\n • ${migrateVpsDedicatedLocale.body.password(formData.password)}\n • ${migrateVpsDedicatedLocale.body.selectRootAccess(formData.selectRootAccess)}\n • ${migrateVpsDedicatedLocale.body.selectWhmcsKey(formData.selectWhmcsKey)}\n • ${migrateVpsDedicatedLocale.body.installedDomain(formData.installedDomain)}\n • ${migrateVpsDedicatedLocale.body.detailedList(formData.detailedList)}\n • ${migrateVpsDedicatedLocale.body.agreed(formData.agreed)}\n • ${migrateVpsDedicatedLocale.body.productId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n selectedProduct,\n formData,\n submitForm,\n migrateVpsDedicatedLocale,\n ]);\n\n const options = [\n { label: migrateVpsDedicatedLocale.placeholders.yes, value: 1 },\n { label: migrateVpsDedicatedLocale.placeholders.no, value: 2 },\n ];\n\n const handleChange = useCallback(({ key, value }) => {\n setFormData({\n ...formData,\n [key]: value,\n });\n }, [\n formData,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {migrateVpsDedicatedLocale.title}\n \n\n \n handleChange({ key: 'ipOrDomain', value: e.target.value })}\n type=\"text\"\n testId=\"ipOrDomain\"\n />\n\n handleChange({ key: 'user', value: e.target.value })}\n type=\"text\"\n testId=\"user\"\n />\n\n handleChange({ key: 'password', value: e.target.value })}\n type=\"password\"\n testId=\"password\"\n />\n\n handleChange({ key: 'selectedRootAccess', value: label })}\n withScroll\n />\n\n handleChange({ key: 'selectedWhmcsKey', value: label })}\n withScroll\n />\n\n handleChange({ key: 'installedDomain', value: e.target.value })}\n type=\"text\"\n testId=\"installedDomain\"\n />\n\n handleChange({ key: 'detailedList', value: e.target.value })}\n type=\"textarea\"\n rows={5}\n testId=\"detailedList\"\n />\n \n\n handleChange({ key: 'agreed', value: !formData.agreed })}\n >\n \n {migrateVpsDedicatedLocale.placeholders.agreed}\n \n \n\n \n \n \n );\n};\n\nexport default MigrateVpsDedicated;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '700px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n > div {\n width: 100%;\n }\n`;\n\nexport const InputContainer = styled.div`\n`;\n\nexport const FileInputContainer = styled.div`\n textarea {\n padding: 4px;\n }\n`;\n\nexport const InputTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const InputDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: 12px;\n margin: 8px 0 0;\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n lin-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 24px 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n margin-top: 12px;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\n display:none;\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputInfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 4px 16px 0px;\n `}\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './MigrateAccountVpsDedicated.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const MigrateAccountVpsDedicated = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { migrateAccountVpsDedicated: migrateAccountVpsDedicatedLocale } = ticketsLocale.forms;\n const [formData, setFormData] = useState({\n ipOrDomain: '',\n user: '',\n password: '',\n detailedList: '',\n agreed: false,\n });\n\n const checkForm = useCallback(() => !(\n !!formData.ipOrDomain\n && !!formData.user\n && !!formData.password\n && !!formData.agreed\n ), [formData]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: ticketsLocale.forms.names.migrateAccountVpsDedicated,\n server_value: selectedProduct.serverhostname,\n domain_value: selectedProduct.domain,\n key: V2Forms.MIGRATE_ACCOUNT_VPS_DEDICATED,\n tags: [\n 'whmcs_form_tecnico_migracion_vps_dedicado',\n selectedProduct.name.toLowerCase().replace(/ /g, '_'),\n ],\n body: `\n • ${migrateAccountVpsDedicatedLocale.body.product(selectedProduct)}\n • ${migrateAccountVpsDedicatedLocale.body.request}\n • ${migrateAccountVpsDedicatedLocale.body.ipOrDomain(formData.ipOrDomain)}\n • ${migrateAccountVpsDedicatedLocale.body.user(formData.user)}\n • ${migrateAccountVpsDedicatedLocale.body.password(formData.password)}\n • ${migrateAccountVpsDedicatedLocale.body.detailedList(formData.detailedList)}\n • ${migrateAccountVpsDedicatedLocale.body.agreed(formData.agreed)}\n • ${migrateAccountVpsDedicatedLocale.body.productId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n selectedProduct,\n formData,\n submitForm,\n migrateAccountVpsDedicatedLocale,\n ]);\n\n const handleChange = useCallback(({ key, value }) => {\n setFormData({\n ...formData,\n [key]: value,\n });\n }, [\n formData,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {migrateAccountVpsDedicatedLocale.title}\n \n\n \n handleChange({ key: 'ipOrDomain', value: e.target.value })}\n type=\"text\"\n testId=\"ipOrDomain\"\n />\n\n handleChange({ key: 'user', value: e.target.value })}\n type=\"text\"\n testId=\"user\"\n />\n\n handleChange({ key: 'password', value: e.target.value })}\n type=\"password\"\n testId=\"password\"\n />\n\n handleChange({ key: 'detailedList', value: e.target.value })}\n type=\"textarea\"\n rows={5}\n testId=\"detailedList\"\n />\n \n\n handleChange({ key: 'agreed', value: !formData.agreed })}\n >\n \n {migrateAccountVpsDedicatedLocale.placeholders.agreed}\n \n \n\n \n \n \n );\n};\n\nexport default MigrateAccountVpsDedicated;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '540px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n > div {\n width: 100%;\n }\n`;\n\nexport const InputContainer = styled.div`\n`;\n\nexport const FileInputContainer = styled.div`\n textarea {\n padding: 4px;\n }\n`;\n\nexport const InputTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const InputDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: 12px;\n margin: 8px 0 0;\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n lin-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 24px 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n margin-top: 12px;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\n display:none;\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputInfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 4px 16px 0px;\n `}\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './UpdateWhmcsLicense.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const UpdateWhmcsLicense = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { updateWhmcsLicense: updateWhmcsLicenseLocale } = ticketsLocale.forms;\n const [formData, setFormData] = useState({\n domain: '',\n license: '',\n directory: '',\n accessLink: '',\n serverIp: '',\n agreed: false,\n });\n\n const checkForm = useCallback(() => !(\n !!formData.domain\n && !!formData.license\n && !!formData.directory\n && !!formData.accessLink\n && !!formData.agreed\n ), [formData]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: ticketsLocale.forms.names.updateWhmcsLicense,\n server_value: selectedProduct.serverhostname,\n domain_value: selectedProduct.domain,\n key: V2Forms.UPDATE_WHMCS_LICENSE,\n tags: [\n 'whmcs_form_tecnico_licenca_whmcs',\n selectedProduct.name.toLowerCase().replace(/ /g, '_'),\n ],\n body: `\n • ${updateWhmcsLicenseLocale.body.product(selectedProduct)}\n • ${updateWhmcsLicenseLocale.body.request}\n • ${updateWhmcsLicenseLocale.placeholders.domain}: ${formData.domain}\n • ${updateWhmcsLicenseLocale.placeholders.license}: ${formData.license}\n • ${updateWhmcsLicenseLocale.placeholders.directory}: ${formData.directory}\n • ${updateWhmcsLicenseLocale.placeholders.accessLink}: ${formData.accessLink}\n • ${updateWhmcsLicenseLocale.placeholders.serverIp}: ${formData.serverIp}\n • ${updateWhmcsLicenseLocale.body.agreed(formData.agreed)}\n • ${updateWhmcsLicenseLocale.body.productId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n selectedProduct,\n formData,\n submitForm,\n updateWhmcsLicenseLocale,\n ]);\n\n const handleChange = useCallback(({ key, value }) => {\n setFormData({\n ...formData,\n [key]: value,\n });\n }, [\n formData,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {updateWhmcsLicenseLocale.title}\n \n\n \n \n handleChange({ key: 'domain', value: e.target.value })}\n type=\"text\"\n testId=\"domain\"\n />\n \n {updateWhmcsLicenseLocale.placeholders.domainInfo}\n \n \n\n handleChange({ key: 'license', value: e.target.value })}\n type=\"text\"\n testId=\"license\"\n />\n\n \n handleChange({ key: 'directory', value: e.target.value })}\n type=\"directory\"\n testId=\"directory\"\n />\n\n \n {updateWhmcsLicenseLocale.placeholders.directoryInfo}\n \n \n\n handleChange({ key: 'accessLink', value: e.target.value })}\n type=\"text\"\n testId=\"accessLink\"\n />\n\n \n handleChange({ key: 'serverIp', value: e.target.value })}\n type=\"text\"\n testId=\"serverIp\"\n />\n \n {updateWhmcsLicenseLocale.placeholders.serverIpInfo}\n \n \n \n\n handleChange({ key: 'agreed', value: !formData.agreed })}\n >\n \n {updateWhmcsLicenseLocale.placeholders.agreed}\n \n \n\n \n \n \n );\n};\n\nexport default UpdateWhmcsLicense;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '700px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n > div {\n width: 100%;\n }\n`;\n\nexport const InputContainer = styled.div`\n`;\n\nexport const FileInputContainer = styled.div`\n textarea {\n padding: 4px;\n }\n`;\n\nexport const InputTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const InputDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: 12px;\n margin: 8px 0 0;\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n lin-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 24px 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n margin-top: 12px;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\n display:none;\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputInfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 4px 16px 0px;\n `}\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './WhmcsAcquisition.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const WhmcsAcquisition = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { whmcsAcquisition: whmcsAcquisitionLocale } = ticketsLocale.forms;\n const [formData, setFormData] = useState({\n domain: '',\n email: '',\n problem: '',\n directory: '',\n print: '',\n agreed: false,\n });\n\n const checkForm = useCallback(() => !(\n !!formData.domain\n && !!formData.email\n && !!formData.problem\n && !!formData.agreed\n ), [formData]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: ticketsLocale.forms.names.updateWhmcsLicense,\n server_value: selectedProduct.serverhostname,\n domain_value: selectedProduct.domain,\n key: V2Forms.WHMCS_ACQUISITION,\n tags: [\n 'whmcs_form_tecnico_licenca_whmcs',\n selectedProduct.name.toLowerCase().replace(/ /g, '_'),\n ],\n body: `\n • ${whmcsAcquisitionLocale.body.product(selectedProduct)}\n • ${whmcsAcquisitionLocale.body.request}\n • ${whmcsAcquisitionLocale.placeholders.domain}: ${formData.domain}\n • ${whmcsAcquisitionLocale.placeholders.email}: ${formData.email}\n • ${whmcsAcquisitionLocale.placeholders.problem}: ${formData.problem}\n • ${whmcsAcquisitionLocale.placeholders.directory}: ${formData.directory}\n • ${whmcsAcquisitionLocale.body.agreed({ text: whmcsAcquisitionLocale.placeholders.agreed, bool: formData.agreed })}\n • ${whmcsAcquisitionLocale.body.productId(selectedProduct)}\n `,\n };\n\n if (formData.print && formData.print.binary) {\n data.files = [formData.print.binary];\n }\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n selectedProduct,\n formData,\n submitForm,\n whmcsAcquisitionLocale,\n ]);\n\n const handleChange = useCallback(({ key, value }) => {\n setFormData({\n ...formData,\n [key]: value,\n });\n }, [\n formData,\n ]);\n\n\n const handleFile = (e) => {\n setFormData({\n ...formData,\n print: {\n path: e.currentTarget.value,\n binary: e.target.files[0],\n },\n });\n };\n\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {whmcsAcquisitionLocale.title}\n \n\n \n handleChange({ key: 'domain', value: e.target.value })}\n type=\"text\"\n testId=\"domain\"\n />\n\n handleChange({ key: 'email', value: e.target.value })}\n type=\"text\"\n testId=\"email\"\n />\n\n handleChange({ key: 'problem', value: e.target.value })}\n type=\"textarea\"\n rows={5}\n testId=\"problem\"\n />\n\n handleChange({ key: 'directory', value: e.target.value })}\n type=\"text\"\n testId=\"directory\"\n />\n\n \n \n {(formData.print && formData.print.binary.name) || whmcsAcquisitionLocale.placeholders.addDocumentButton}\n \n handleFile(e)}\n />\n \n\n \n\n handleChange({ key: 'agreed', value: !formData.agreed })}\n >\n \n {whmcsAcquisitionLocale.placeholders.agreed}\n \n \n\n \n \n \n );\n};\n\nexport default WhmcsAcquisition;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '498px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const FieldWrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 12px;\n`;\n\nexport const RadioQuestionTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n color: ${theme.v2.colors.neutral.lowPure};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const FieldInfo = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 0px;\n max-width: ${defaultWrapperWidth};\n color: ${theme.v2.colors.neutral.lowLight};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const RadioLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n","import React, { useCallback, useMemo, useState } from 'react';\nimport * as Styles from './UpgradeSitebuilder.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Select,\n} from 'gatorcomponents';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { HgProducts } from '../../SupportForms.types';\n\nexport const UpgradeSitebuilder = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { upgradeSiteBuilder: upgradeSiteBuilderLocale } = ticketsLocale.forms;\n const [newProduct, setNewProduct] = useState(null);\n const [agreed, setAgreed] = useState(null);\n\n const checkForm = useCallback(() => {\n let isOk = false;\n\n isOk = newProduct\n && agreed;\n\n return !isOk;\n }, [\n newProduct,\n agreed,\n ]);\n\n const getProductsOptions = useMemo(() => {\n const products = [];\n\n const higherThanProfessional = [\n HgProducts.WEB_HOSTING_CREADOR_DE_SITIOS_PROFESIONAL,\n HgProducts.WEB_HOSTING_CREADOR_DE_SITIOS_TIENDA_EN_LINEA,\n ].includes(selectedProduct.pid);\n\n if (!higherThanProfessional) {\n products.push({\n label: upgradeSiteBuilderLocale.placeholders.professional,\n value: upgradeSiteBuilderLocale.placeholders.professional,\n });\n }\n\n const isTienda = [HgProducts.WEB_HOSTING_CREADOR_DE_SITIOS_TIENDA_EN_LINEA].includes(selectedProduct.pid);\n if (!isTienda) {\n products.push({\n label: upgradeSiteBuilderLocale.placeholders.tienda,\n value: upgradeSiteBuilderLocale.placeholders.tienda,\n });\n }\n\n return products;\n }, [selectedProduct, upgradeSiteBuilderLocale]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: ticketsLocale.forms.names.upgradeSiteBuilder,\n key: V2Forms.UPGRADE_SITEBUILDER,\n tags: [\n 'whmcs_form_financiero_upgrade-downgrade_plan',\n selectedProduct.name.toLowerCase().replace(/ /g, '_'),\n ],\n body: `\n ${upgradeSiteBuilderLocale.body.product(selectedProduct)}\n ${upgradeSiteBuilderLocale.body.request}\n ${upgradeSiteBuilderLocale.body.newProduct(newProduct)}\n ${upgradeSiteBuilderLocale.body.agreed(agreed)}\n ${upgradeSiteBuilderLocale.body.productId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n upgradeSiteBuilderLocale,\n submitForm,\n selectedProduct,\n newProduct,\n agreed,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {upgradeSiteBuilderLocale.title}\n \n\n \n setNewProduct(label)}\n withScroll\n />\n\n setAgreed(!agreed)}\n >\n \n {upgradeSiteBuilderLocale.placeholders.agreed}\n \n \n \n\n \n \n \n );\n};\n\nexport default UpgradeSitebuilder;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '700px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 0px;\n max-width: ${defaultWrapperWidth};\n\n > div {\n width: 100%;\n }\n`;\n\nexport const InputContainer = styled.div`\n`;\n\nexport const FileInputContainer = styled.div`\n textarea {\n padding: 4px;\n }\n`;\n\nexport const InputTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const InputDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: 12px;\n margin: 8px 0 0;\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n lin-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 24px 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n margin-top: 12px;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\n display:none;\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputInfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 4px 16px 0px;\n `}\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './MigrateResellerBr.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n Select,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const MigrateResellerBr = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { migrateReseller: migrateResellerLocale } = ticketsLocale.forms;\n const [formData, setFormData] = useState({\n domain: '',\n panel: '',\n user: '',\n password: '',\n link: '',\n multipleDomains: '',\n multipleDomainsCpanel: '',\n agreed: false,\n });\n\n const checkForm = useCallback(() => !(\n !!formData.domain\n && !!formData.panel\n && !!formData.user\n && !!formData.password\n && !!formData.link\n && !!formData.agreed\n ), [formData]);\n\n const panelOptions = [\n {\n label: 'WHM',\n value: 'WHM',\n },\n {\n label: 'cPanel',\n value: 'cPanel',\n },\n {\n label: 'Plesk',\n value: 'Plesk',\n },\n {\n label: migrateResellerLocale.placeholders.other,\n value: migrateResellerLocale.placeholders.other,\n },\n ];\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: ticketsLocale.forms.names.migrateReseller,\n server_value: selectedProduct.serverhostname,\n domain_value: selectedProduct.domain,\n key: V2Forms.MIGRATE_RESELLER,\n tags: [\n 'whmcs_form_tecnico_migracao_revenda',\n selectedProduct.name.toLowerCase().replace(/ /g, '_'),\n ],\n body: `\n • ${migrateResellerLocale.body.product(selectedProduct)}\n • ${migrateResellerLocale.body.request}\n • ${migrateResellerLocale.placeholders.domain}: ${formData.domain}\n • ${migrateResellerLocale.placeholders.panel}: ${formData.panel}\n • ${migrateResellerLocale.placeholders.user}: ${formData.user}\n • ${migrateResellerLocale.placeholders.password}: ${formData.password}\n • ${migrateResellerLocale.placeholders.link}: ${formData.link}\n • ${migrateResellerLocale.placeholders.multipleDomainsLabel}: ${formData.multipleDomains}\n • ${migrateResellerLocale.placeholders.mutipleDomainsCpanelOtherLabel}: ${formData.multipleDomainsCpanel}\n • ${migrateResellerLocale.body.agreed({ text: migrateResellerLocale.placeholders.agreed, bool: formData.agreed })}\n • ${migrateResellerLocale.body.productId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n selectedProduct,\n formData,\n submitForm,\n migrateResellerLocale,\n ]);\n\n const handleChange = useCallback(({ key, value }) => {\n setFormData({\n ...formData,\n [key]: value,\n });\n }, [\n formData,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {migrateResellerLocale.title}\n \n\n \n handleChange({ key: 'domain', value: e.target.value })}\n type=\"text\"\n testId=\"domain\"\n />\n\n handleChange({ key: 'panel', value: label })}\n withScroll\n />\n\n handleChange({ key: 'user', value: e.target.value })}\n type=\"text\"\n testId=\"user\"\n />\n\n handleChange({ key: 'password', value: e.target.value })}\n type=\"text\"\n testId=\"password\"\n />\n\n handleChange({ key: 'link', value: e.target.value })}\n type=\"text\"\n testId=\"linkField\"\n />\n\n handleChange({ key: 'multipleDomains', value: e.target.value })}\n type=\"textarea\"\n rows={5}\n testId=\"multipleDomains\"\n />\n\n handleChange({ key: 'multipleDomainsCpanel', value: e.target.value })}\n type=\"textarea\"\n rows={5}\n testId=\"multipleDomainsCpanel\"\n />\n \n\n handleChange({ key: 'agreed', value: !formData.agreed })}\n >\n \n {migrateResellerLocale.placeholders.agreed}\n \n \n\n \n \n \n );\n};\n\nexport default MigrateResellerBr;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '700px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const BlockTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const DestinationBlockTitle = styled(BlockTitle)`\n margin: 24px 0px\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n\n > div {\n width: 100%;\n }\n`;\n\nexport const InputContainer = styled.div`\n`;\n\nexport const FileInputContainer = styled.div`\n textarea {\n padding: 4px;\n }\n`;\n\nexport const InputTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const InputDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: 12px;\n margin: 8px 0 0;\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.feedback.activeMedium};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n gap: 8px;\n lin-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const FileWrapper = styled.div`\n display: flex;\n margin-top: 12px;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryBlue};\n border-radius: 20px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 6px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryBlue};\n background-color: ${theme.v2.colors.brand.primaryBlue};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const FileInput = styled.input`\n display:none;\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputInfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 4px 16px 0px;\n `}\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './MigrateResellerEs.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n Select,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\n\nexport const MigrateResellerEs = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { migrateReseller: migrateResellerLocale } = ticketsLocale.forms;\n const [formData, setFormData] = useState({\n domain: '',\n panel: '',\n user: '',\n password: '',\n link: '',\n multipleDomains: '',\n agreed: false,\n migrateAll: false,\n });\n\n const checkForm = useCallback(() => !(\n !!formData.domain\n && !!formData.panel\n && !!formData.user\n && !!formData.password\n && !!formData.link\n && !!formData.agreed\n ), [formData]);\n\n const panelOptions = [\n {\n label: 'WHM',\n value: 'WHM',\n },\n {\n label: 'cPanel',\n value: 'cPanel',\n },\n {\n label: 'Plesk',\n value: 'Plesk',\n },\n {\n label: migrateResellerLocale.placeholders.other,\n value: migrateResellerLocale.placeholders.other,\n },\n {\n label: migrateResellerLocale.placeholders.dontKnow,\n value: migrateResellerLocale.placeholders.dontKnow,\n },\n ];\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: ticketsLocale.forms.names.migrateReseller,\n server_value: selectedProduct.serverhostname,\n domain_value: selectedProduct.domain,\n key: V2Forms.MIGRATE_RESELLER,\n tags: [\n 'whmcs_form_tecnico_migracion_revendedor',\n selectedProduct.name.toLowerCase().replace(/ /g, '_'),\n ],\n body: `\n • ${migrateResellerLocale.body.product(selectedProduct)}\n • ${migrateResellerLocale.body.request}\n • ${migrateResellerLocale.placeholders.domain}: ${formData.domain}\n • ${migrateResellerLocale.placeholders.panel}: ${formData.panel}\n • ${migrateResellerLocale.placeholders.user}: ${formData.user}\n • ${migrateResellerLocale.placeholders.password}: ${formData.password}\n • ${migrateResellerLocale.placeholders.link}: ${formData.link}\n • ${migrateResellerLocale.placeholders.multipleDomainsLabel}: ${formData.multipleDomains}\n • ${migrateResellerLocale.body.agreed({ text: migrateResellerLocale.placeholders.agreed, bool: formData.agreed })}\n • ${migrateResellerLocale.body.agreed({ text: migrateResellerLocale.placeholders.migrateAll, bool: formData.migrateAll })}\n • ${migrateResellerLocale.body.productId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n selectedProduct,\n formData,\n submitForm,\n migrateResellerLocale,\n ]);\n\n const handleChange = useCallback(({ key, value }) => {\n setFormData({\n ...formData,\n [key]: value,\n });\n }, [\n formData,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {migrateResellerLocale.title}\n \n\n \n handleChange({ key: 'domain', value: e.target.value })}\n type=\"text\"\n testId=\"domain\"\n />\n\n handleChange({ key: 'panel', value: label })}\n withScroll\n />\n\n handleChange({ key: 'user', value: e.target.value })}\n type=\"text\"\n testId=\"user\"\n />\n\n handleChange({ key: 'password', value: e.target.value })}\n type=\"text\"\n testId=\"password\"\n />\n\n handleChange({ key: 'link', value: e.target.value })}\n type=\"text\"\n testId=\"linkField\"\n />\n\n\n handleChange({ key: 'migrateAll', value: !formData.migrateAll })}\n >\n \n {migrateResellerLocale.placeholders.migrateAll}\n \n \n\n handleChange({ key: 'multipleDomains', value: e.target.value })}\n type=\"textarea\"\n rows={5}\n testId=\"multipleDomains\"\n />\n\n handleChange({ key: 'agreed', value: !formData.agreed })}\n >\n \n {migrateResellerLocale.placeholders.agreed}\n \n \n \n\n \n \n \n );\n};\n\nexport default MigrateResellerEs;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '498px';\n\nexport const Form = styled.form`\n position: relative;\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 12px;\n margin: 16px 0px 0px;\n max-width: ${defaultWrapperWidth};\n`;\n\nexport const CheckboxWrapper = styled(InputWrapper)`\n margin: 0px;\n max-width: unset;\n`;\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 0px 0px 4px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n p {\n margin: 0px;\n }\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const Info = styled.p`\n ${({ theme, maxWidth }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.medium};\n line-height: 24px;\n max-width: ${maxWidth && `${maxWidth}px`};\n margin: 0px;\n margin-top: 15px;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n margin-bottom: 8px;\n`;\n\nexport const FileButton = styled.label`\n ${({ theme, file }) => css`\n align-items: center;\n background-color:${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.white.primary};\n border-color: ${file ? theme.v2.colors.feedback.activeLight : theme.v2.colors.brand.primaryMedium};\n border-radius: 50px;\n border-style: dashed;\n border-width: 2px;\n color: ${file ? theme.v2.colors.white.primary : theme.v2.colors.brand.primaryMedium};\n cursor: pointer;\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.family.medium};\n height: 48px;\n lin-height: ${theme.v2.font.lineHeight.text};\n padding: 16px 24px;\n transition:background-color 150ms ease-in-out, border 150ms ease-in-out, color 150ms ease-in-out;\n\n &:hover {\n border-color: ${theme.v2.colors.brand.primaryMedium};\n background-color: ${theme.v2.colors.brand.primaryMedium};\n color: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const FileDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n margin-top: 6px;\n `}\n`;\n\nexport const FileInput = styled.input`\n display: none;\n`;\n\nexport const FileInputExtensions = styled.div`\n ${({ theme }) => css`\n padding: 8px 0;\n color: ${theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n margin-left: 16px;\n font-size: 12px;\n font-weight: 500;\n line-height: 18px;\n text-align: left;\n max-width: 288px;\n `}\n`;\n\nexport const FileWrapper = styled.div`\n margin-top: 8px;\n display: flex;\n`;\n\nexport const SelectWrapper = styled.div`\n margin: -4px 0px 4px;\n max-width: ${defaultWrapperWidth};\n`;\n\nexport const AlertWrapper = styled.div`\n margin-bottom: 4px;\n margin-top: 4px;\n`;\n\nexport const Divider = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.neutral.highMedium};\n height: 1px;\n margin: 35px 0px 25px;\n width: 100%;\n `}\n`;\n\nexport const Checkboxes = styled.div`\n display: flex;\n flex-direction: column;\n gap: 18px;\n margin-bottom: 29px;\n`;\n","/* eslint-disable jsx-a11y/media-has-caption */\nimport React, {\n useCallback, useEffect, useMemo, useState,\n} from 'react';\nimport * as Styles from './CommonForm.styles';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport {\n Alert,\n Button, Checkbox, IconLoading, SelectField, TextField,\n} from 'gatorcomponents';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { preChatActions } from '@/redux/modules';\nimport { CHARLIE_TOKEN_REFRESH } from '@/config/GrowthBook/constants';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { COUNTRY } from '@/config';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { sidebarAnalytics } from '@/analytics/support/sidebar';\n\nexport const CommonForm = ({\n submitForm,\n opening,\n selectedProductOption,\n ticketType,\n}) => {\n const [agreed, setAgreed] = useState(false);\n const [review, setReview] = useState(false);\n const [file, setFile] = useState('');\n const [fileBinary, setFileBinary] = useState();\n const [description, setDescription] = useState('');\n const [selectedProduct, setSelectedProduct] = useState('');\n const [hasError, setHasError] = useState(false);\n\n const waitTokenToggle = useFeatureIsOn(CHARLIE_TOKEN_REFRESH);\n const dispatch = useDispatch();\n const { productsList } = useSelector(state => state.preChat);\n const { email } = useSelector(state => state.summary);\n\n const hostingsProducts = useMemo(() => (productsList.hostings\n ? productsList.hostings\n .filter(hosting => hosting.status === 'Active' || hosting.status === 'Suspended')\n .map(product => ({\n value: product.id,\n label: product.domain ? `${product.name} (${product.domain})` : product.name,\n name: product.name,\n }))\n : []), [productsList.hostings]);\n\n const domainsProducts = useMemo(() => (productsList.domains\n ? productsList.domains\n .filter(domain => domain.status === 'Active' || domain.status === 'Suspended')\n .map(product => ({ value: product.id, label: product.name, name: product.type }))\n : []), [productsList.domains]);\n\n const productsListToSelect = useMemo(() => [...hostingsProducts, ...domainsProducts], [hostingsProducts, domainsProducts]);\n\n const { ticket: ticketsLocale } = useLocale();\n const { commonForm: commonFormLocale, names: ticketNamesLocale } = ticketsLocale.forms;\n\n const fetchProducts = useCallback(() => {\n if (!productsList.domains) {\n dispatch(preChatActions.productByStatus.request({ withCancelled: true, withPending: false, waitToken: waitTokenToggle }));\n }\n }, [dispatch, productsList.domains, waitTokenToggle]);\n\n useEffect(() => {\n fetchProducts();\n }, [fetchProducts]);\n\n const handleFile = (e) => {\n setFileBinary(e.target.files[0]);\n setFile(e.currentTarget.value);\n };\n\n const handleDescription = (value) => {\n setDescription(value);\n setHasError(false);\n };\n\n const trackerGroup = useCallback(() => {\n switch (ticketType) {\n case 'financial':\n return 'CATEGORY_FINANCIAL';\n case 'hosting':\n return 'CATEGORY_HOSTING';\n case 'domain':\n return 'CATEGORY_DOMAIN';\n case 'email':\n return 'CATEGORY_EMAIL';\n case 'siteOffline':\n return 'CATEGORY_SITE_OFFLINE';\n case 'other':\n return 'CATEGORY_NOT_FOUND';\n default:\n break;\n }\n }, [ticketType]);\n\n const handleTagSelection = useCallback(() => {\n switch (ticketType) {\n case 'financial':\n return isBRServer ? 'whmcs_form_duvida_financeira' : 'whmcs_form_duda_financiera';\n case 'hosting':\n return isBRServer ? 'whmcs_form_duvida_hospedagem' : 'whmcs_form_duda_hospedaje';\n case 'domain':\n return isBRServer ? 'whmcs_form_duvida_dominio' : 'whmcs_form_duda_dominio';\n case 'email':\n return isBRServer ? 'whmcs_form_duvida_email' : 'whmcs_form_duda_correo';\n case 'siteOffline':\n return isBRServer ? 'whmcs_form_duvida_siteoffline' : 'whmcs_form_duda_sitiooffline';\n case 'other':\n return isBRServer ? 'whmcs_form_duvida_outros' : 'whmcs_form_duda_otros';\n default:\n break;\n }\n }, [ticketType]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n if (!description) {\n setHasError(true);\n return;\n }\n\n const tag = handleTagSelection();\n const productName = selectedProduct && productsListToSelect.find(product => product.label === selectedProduct.label).name.toLowerCase().replace(/ /g, '_');\n\n const data = {\n automation: false,\n product: selectedProduct ? `${selectedProduct.label} - id: ${selectedProduct.value}` : 'none',\n subject: selectedProductOption,\n files: [fileBinary],\n tags: [\n tag,\n productName,\n ],\n body: `\n ${commonFormLocale.category}: ${ticketNamesLocale[ticketType]}\n ${commonFormLocale.description}: ${description}\n ${commonFormLocale.product}: ${selectedProduct ? `${selectedProduct.label} - id: ${selectedProduct.value}` : 'none'}\n `,\n };\n\n sidebarAnalytics.newSupportAnalytics('SUPPORT', trackerGroup());\n submitForm && submitForm(data, true);\n }, [\n selectedProductOption,\n submitForm,\n fileBinary,\n description,\n handleTagSelection,\n trackerGroup,\n selectedProduct,\n ticketType,\n ticketNamesLocale,\n commonFormLocale,\n productsListToSelect,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n {commonFormLocale.selectProduct}\n \n \n setSelectedProduct(option)}\n testId=\"select-domain\"\n positionAbsolute\n />\n \n\n \n {commonFormLocale.info}\n \n\n \n \n\n handleDescription(e.target.value)}\n inputHeight={185}\n helpText={hasError && commonFormLocale.required}\n status={hasError && 'error'}\n />\n\n \n {commonFormLocale.screenShot}\n \n\n \n \n {(fileBinary && fileBinary.name) || commonFormLocale.sendFile}\n \n handleFile(e)}\n />\n \n {commonFormLocale.fileInputExtensions('.jpg, .jpeg, .png, .pdf')}\n \n \n \n\n \n \n setAgreed(!agreed)}\n data-testid=\"checkAgreed\"\n >\n \n {commonFormLocale.checkbox(COUNTRY.toLowerCase())}\n \n \n \n\n \n setReview(!review)}\n data-testid=\"checkReview\"\n >\n \n {commonFormLocale.review}\n \n \n \n \n\n \n \n \n );\n};\n\nexport default CommonForm;\n","import styled, { css } from 'styled-components';\n\nconst defaultWrapperWidth = '498px';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px;\n `}\n`;\n\nexport const InputsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px;\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0px;\n max-width: ${defaultWrapperWidth};\n\n div {\n width: 100%;\n }\n`;\n\nexport const InfoText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.family.regular};\n lin-height: ${theme.v2.font.lineHeight.text};\n margin: 4px 16px 0px;\n `}\n`;\n\nexport const FieldWrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 12px;\n`;\n\nexport const RadioQuestionTitle = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const Info = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 24px 0px 24px;\n max-width: ${defaultWrapperWidth};\n color: ${theme.v2.colors.neutral.lowPure};\n\n li {\n margin-bottom: 8px;\n }\n\n > svg {\n position: relative;\n top: 5px;\n }\n `}\n`;\n\nexport const FieldInfo = styled.span`\n ${({ theme }) => css`\n display: block;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.family.regular};\n margin: 0px;\n max-width: ${defaultWrapperWidth};\n color: ${theme.v2.colors.neutral.lowLight};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n button {\n max-height: 35px;\n }\n`;\n\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const RadioLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n margin: 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 6px;\n line-height: ${theme.v2.font.lineHeight.text};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n","import React, { useCallback, useState } from 'react';\nimport * as Styles from './SslEv.styles';\nimport {\n Button,\n Checkbox,\n IconData,\n IconLoading,\n Input,\n} from 'gatorcomponents';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\nimport useLocale from '@/hooks/useLocale/useLocale';\n\nexport const SslEv = ({\n selectedProduct,\n opening,\n submitForm,\n}) => {\n const { ticket: ticketsLocale } = useLocale();\n const { sslEV: sslEVLocale } = ticketsLocale.forms;\n const [formData, setFormData] = useState({\n installUrl: '',\n enterprisedocument: '',\n enterprisePhone: '',\n email: '',\n agreed: false,\n });\n\n const checkForm = useCallback(() => {\n let isOk = false;\n\n isOk = formData.installUrl\n && formData.enterprisedocument\n && formData.enterprisePhone\n && formData.email\n && formData.agreed;\n\n return !isOk;\n }, [\n formData,\n ]);\n\n const handleSubmit = useCallback((e) => {\n e.preventDefault();\n\n const data = {\n locale: ticketsLocale,\n automation: false,\n pid: selectedProduct.pid,\n product: selectedProduct.id,\n subject: ticketsLocale.forms.names.sslEV,\n key: V2Forms.SSL_EV,\n tags: [\n 'whmcs_form_financiero_upgrade-downgrade_plan',\n selectedProduct.name.toLowerCase().replace(/ /g, '_'),\n ],\n body: `\n ${sslEVLocale.body.product(selectedProduct)}\n ${sslEVLocale.body.request}\n ${sslEVLocale.placeholders.installUrl}: ${formData.installUrl}\n ${sslEVLocale.placeholders.enterprisedocument}: ${formData.enterprisedocument}\n ${sslEVLocale.placeholders.enterprisePhone}: ${formData.enterprisePhone}\n ${sslEVLocale.placeholders.email}: ${formData.email}\n ${sslEVLocale.body.agreed(formData.agreed)}\n ${sslEVLocale.body.productId(selectedProduct)}\n `,\n };\n\n submitForm && submitForm(data);\n }, [\n ticketsLocale,\n sslEVLocale,\n submitForm,\n selectedProduct,\n formData,\n ]);\n\n\n const handleChange = useCallback(({ key, value }) => {\n setFormData({\n ...formData,\n [key]: value,\n });\n }, [\n formData,\n ]);\n\n return (\n handleSubmit(e)}>\n \n \n\n \n {sslEVLocale.title}\n \n\n \n \n handleChange({ key: 'installUrl', value: e.target.value })}\n type=\"text\"\n testId=\"installUrl\"\n />\n \n {sslEVLocale.placeholders.installUrlInfo}\n \n \n\n handleChange({ key: 'enterprisedocument', value: e.target.value })}\n type=\"text\"\n testId=\"enterprisedocument\"\n />\n\n \n handleChange({ key: 'enterprisePhone', value: e.target.value })}\n type=\"text\"\n testId=\"enterprisePhone\"\n />\n \n {sslEVLocale.placeholders.enterprisePhoneInfo}\n \n \n\n \n handleChange({ key: 'email', value: e.target.value })}\n type=\"text\"\n testId=\"email\"\n />\n \n {sslEVLocale.placeholders.emailInfo}\n \n \n\n handleChange({ key: 'agreed', value: !formData.agreed })}\n >\n \n {sslEVLocale.placeholders.agreed}\n \n \n \n\n \n \n \n );\n};\n\nexport default SslEv;\n","import {\n Button, Radio, Select, Skeleton, SelectField,\n IconLoading,\n IconCheckBg,\n IconError,\n} from 'gatorcomponents';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './SupportForms.styles';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { useSupportForms } from '@/hooks/supportForms';\nimport { useHistory } from 'react-router';\nimport { InternalMigration } from './components/InternalMigration/InternalMigration';\nimport { UserBackupRestore } from './components/UserBackupRestore/UserBackupRestore';\nimport { GenerateBackup } from './components/GenerateBackup/GenerateBackup';\nimport { HgProducts } from './SupportForms.types';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { formsActions } from '@/redux/modules';\nimport { RestorateBackupHgRoutine } from './components/RestorateBackupHgRoutine';\nimport { WithoutEmailAccess } from './components/WithoutEmailAccess';\nimport { ChangePrimaryDomain } from './components/ChangePrimaryDomain';\nimport { ExternalMigration } from './components/ExternalMigration';\nimport { ChangeDueDate } from './components/ChangeDueDate';\nimport { GoogleAdwordsCoupon } from './components/GoogleAdwordsCoupon';\nimport { InstallExternalSsl } from './components/InstallExternalSsl';\nimport { FinancialDoubts } from './components/GeneralDoubts';\nimport { RestorateCancelledPlan } from './components/RestorateCancelledPlan';\nimport { GenerateCSR } from './components/GenerateCSR';\nimport { RestorateSiteBuilderAccess } from './components/RestorateSiteBuilderAccess';\nimport { AffiliateProgram } from './components/AffiliateProgram';\nimport { NationalDomainTransfer } from './components/NationalDomainTransfer';\nimport { UpgradeVps } from './components/UpgradeVps';\nimport { V2Forms } from '@/hooks/supportForms/useSupportForms.types';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { CHARLIE_ZENDESK_V2, NEW_SUPPORT } from '@/config/GrowthBook/constants';\nimport { COUNTRY, IS_PROD } from '@/config';\nimport { SiteLockUpgrade } from './components/SiteLockUpgrade';\nimport { CodeGuardUpgrade } from './components/CodeGuardUpgrade';\nimport { ChangePaymentcycle } from './components/ChangePaymentcycle';\nimport { PrivateSslCertificate } from './components/PrivateSslCertificate';\nimport { WildcardSslCertificate } from './components/WildcardSslCertificate';\nimport { EnterpriseSslCertificate } from './components/EnterpriseSslCertificate';\nimport { InstallWhmcs } from './components/InstallWhmcs';\nimport { ReloadRebuild } from './components/ReloadRebuild';\nimport { MoreEmails } from './components/MoreEmails';\nimport { MigrateVpsDedicated } from './components/MigrateVpsDedicated';\nimport { MigrateAccountVpsDedicated } from './components/MigrateAccountVpsDedicated';\nimport { UpdateWhmcsLicense } from './components/UpdateWhmcsLicense';\nimport { WhmcsAcquisition } from './components/WhmcsAcquisition';\nimport { UpgradeSitebuilder } from './components/UpgradeSitebuilder';\nimport { MigrateResellerBr } from './components/MigrateResellerBr';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { MigrateResellerEs } from './components/MigrateResellerEs';\nimport CommonForm from './components/CommonForm';\nimport { SslEv } from './components/SslEv';\n\nconst SupportForms = () => {\n const { ticket: ticketsLocale, routes: routesLocale } = useLocale();\n const history = useHistory();\n const dispatch = useDispatch();\n const [showFeedback, setShowFeedback] = useState();\n const [opening, setOpening] = useState(false);\n const [formData, setFormData] = useState();\n const clientInfo = useSelector(state => state.summary);\n const useZendeskV2 = useFeatureIsOn(CHARLIE_ZENDESK_V2);\n const useNewSupport = useFeatureIsOn(NEW_SUPPORT);\n const { ticketType } = useSelector(state => state.preChat);\n const [isAutomated, setIsAutomated] = useState(false);\n\n const {\n forceState, rules,\n } = useSelector(state => state.formsReducer);\n\n const {\n requestForms,\n productsOptions,\n loading,\n checkProduct,\n selectedProductOption,\n selectedProduct,\n checkNeed,\n checkSector,\n handleSelectedProductOption,\n setSelectedSector,\n selectedSector,\n selectedNeed,\n needsOptions,\n setSelectedNeed,\n activeProductsOptions,\n setSelectedProductData,\n requestedProducts,\n selectedProductData,\n } = useSupportForms({\n forceState,\n rules,\n });\n\n const setForcedState = useCallback(() => {\n if (\n forceState\n && handleSelectedProductOption\n && productsOptions.length\n && rules\n && rules.active\n ) {\n const ruleProduct = rules.selectedProduct || rules.active;\n const selectedOption = productsOptions.find((option) => {\n if (ruleProduct.id) {\n return option.value === ruleProduct.id;\n }\n return option.label === ruleProduct;\n });\n const fullSelectedProductData = requestedProducts.find(product => product.id === ruleProduct.id);\n\n setSelectedProductData(fullSelectedProductData);\n if (selectedOption) {\n handleSelectedProductOption(selectedOption.label);\n }\n setSelectedSector(rules.selectedSector);\n setTimeout(() => {\n setSelectedNeed(rules.selectedNeed);\n }, 100);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n forceState,\n rules,\n rules.active,\n rules.restorateBackupHgRoutine,\n setSelectedSector,\n handleSelectedProductOption,\n productsOptions,\n setSelectedProductData,\n setSelectedNeed,\n requestedProducts,\n ]);\n\n useEffect(() => {\n setForcedState();\n }, [setForcedState]);\n\n const clearForcedState = useCallback(() => {\n dispatch(formsActions.forceState.clear());\n }, [dispatch]);\n\n useEffect(() => () => {\n clearForcedState();\n }, [clearForcedState]);\n\n useEffect(() => {\n requestForms(ticketType);\n setShowFeedback(undefined);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [ticketType]);\n\n useEffect(() => {\n checkProduct();\n }, [checkProduct]);\n\n useEffect(() => {\n checkSector();\n }, [checkSector]);\n\n useEffect(() => {\n checkNeed();\n }, [checkNeed]);\n\n const addNewZendeskData = useCallback((data) => {\n const newData = { ...data };\n if (selectedSector === 'technical') {\n newData.domain_id = '27835972869267';\n newData.server_id = '27836218257939';\n newData.plan_id = '28285611660947';\n }\n\n if (selectedSector !== 'technical') {\n newData.domain_id = '27835972869267';\n newData.server_id = '28285611660947';\n }\n\n newData.server_value = selectedProductData ? selectedProductData.serverhostname : '';\n newData.domain_value = selectedProductData ? selectedProductData.domain : '';\n newData.plan_value = selectedProductData ? selectedProductData.name : '';\n\n switch (data.key) {\n case V2Forms.INTERNAL_MIGRATION:\n newData.group_id = IS_PROD ? '27293098116243' : '24966089236755';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_migracao';\n newData.sub_category_id = '28254219203219';\n newData.sub_category_value = 'hg_migracao_interna_cliente_existente';\n break;\n case V2Forms.EXTERNAL_MIGRATION:\n newData.group_id = '27293098116243';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_migracao';\n newData.sub_category_id = '28254219203219';\n newData.sub_category_value = 'hg_migracao_externa_novo_cliente';\n break;\n case V2Forms.USER_BACKUP_RESTORE:\n newData.group_id = '27292926799507';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_restauracao_de_backup';\n newData.sub_category_id = '28253974154131';\n newData.sub_category_value = 'hg_restauracao_de_backup';\n break;\n case V2Forms.GENERATE_BACKUP:\n newData.group_id = '27292918946835';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_restauracao_de_backup';\n newData.sub_category_id = '28253974154131';\n newData.sub_category_value = 'hg_restauracao_de_backup';\n break;\n case V2Forms.RESTORATE_HG_ROUTINE:\n newData.group_id = '27292926799507';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_restauracao_de_backup';\n newData.sub_category_id = '28253974154131';\n newData.sub_category_value = 'hg_restauracao_de_backup';\n break;\n case V2Forms.WITHOUT_EMAIL_ACCESS:\n newData.group_id = IS_PROD ? '27293010048019' : '24966089236755';\n newData.category_id = '28250390746387';\n newData.category_value = 'hg_recuperacao_de_acesso_e-mail';\n newData.sub_category_id = '';\n newData.sub_category_value = '';\n break;\n case V2Forms.CHANGE_PRIMARY_DOMAIN:\n newData.group_id = '23450116897811';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_alteracao_dominio_primario';\n newData.sub_category_id = '';\n newData.sub_category_value = '';\n break;\n case V2Forms.CHANGE_DUE_DATE:\n newData.group_id = IS_PROD ? '27293010048019' : '24966089236755';\n newData.category_id = '28250390746387';\n newData.category_value = 'hg_alteracao_data_de_vencimento';\n newData.sub_category_id = '';\n newData.sub_category_value = '';\n break;\n case V2Forms.GOOGLE_ADWORDS_COUPON:\n newData.group_id = '23450116897811';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_google_adwords';\n newData.sub_category_id = '';\n newData.sub_category_value = '';\n break;\n case V2Forms.EXTERNAL_SSL:\n newData.group_id = '23450116897811';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_instalacao_de_ssl';\n newData.sub_category_id = '28254262891667';\n newData.sub_category_value = 'hg_instalacao_de_ssl';\n break;\n case V2Forms.FINANCIAL_DOUBTS:\n newData.group_id = IS_PROD ? '27293010048019' : '24966089236755';\n newData.category_id = '28250390746387';\n newData.category_value = 'hg_outros_financeiro';\n newData.sub_category_id = '';\n newData.sub_category_value = '';\n break;\n case V2Forms.RESTORATE_CANCELLED_PLAN:\n newData.group_id = '27292926799507';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_restauracao_de_backup';\n newData.sub_category_id = '28253974154131';\n newData.sub_category_value = 'hg_restauracao_de_backup';\n break;\n case V2Forms.GENERATE_CSR:\n newData.group_id = '23450116897811';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_instalacao_de_ssl';\n newData.sub_category_id = '28254262891667';\n newData.sub_category_value = 'hg_csr_ssl';\n break;\n case V2Forms.RESTORATE_SITEBUILDER_ACCESS:\n newData.group_id = '23450116897812';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_restauracao_de_backup';\n newData.sub_category_id = '28253974154131';\n newData.sub_category_value = 'hg_restauracao_acesso_criador_de_sites';\n break;\n case V2Forms.AFFILIATE_PROGRAM:\n newData.group_id = '27292861425427';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_afiliados';\n newData.sub_category_id = '';\n newData.sub_category_value = '';\n break;\n case V2Forms.NATIONAL_DOMAIN_TRANSFER:\n newData.group_id = IS_PROD ? '27911666087059' : '24966089236755';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_dominios';\n newData.sub_category_id = '29794347165715';\n newData.sub_category_value = 'hg_dominios_transferencia_de_dominio_nacional';\n break;\n case V2Forms.UPGRADE_VPS:\n newData.group_id = IS_PROD ? '27293010048019' : '24966089236755';\n newData.category_id = '28250390746387';\n newData.category_value = 'hg_upgrade/downgrade';\n newData.sub_category_id = '';\n newData.sub_category_value = '';\n break;\n case V2Forms.UPGRADE_SITELOCK:\n newData.group_id = '27293010048019';\n newData.category_id = '28250390746387';\n newData.category_value = 'hg_upgrade/downgrade';\n newData.sub_category_id = '';\n newData.sub_category_value = '';\n break;\n case V2Forms.UPGRADE_CODEGUARD:\n newData.group_id = '27293010048019';\n newData.category_id = '28250390746387';\n newData.category_value = 'hg_upgrade/downgrade';\n newData.sub_category_id = '';\n newData.sub_category_value = '';\n break;\n case V2Forms.CHANGE_DUE_DATE3:\n newData.group_id = IS_PROD ? '27293010048019' : '24966089236755';\n newData.category_id = '28250390746387';\n newData.category_value = 'hg_alteracao_data_de_vencimento';\n newData.sub_category_id = '';\n newData.sub_category_value = '';\n break;\n case V2Forms.CHANGE_PAYMENT_CYCLE:\n newData.group_id = IS_PROD ? '27293010048019' : '24966089236755';\n newData.category_id = '28250390746387';\n newData.category_value = 'hg_alteracao_ciclo_de_pagamento';\n newData.sub_category_id = '';\n newData.sub_category_value = '';\n break;\n case V2Forms.PRIVATE_SSL:\n newData.group_id = '23450116897811';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_instalacao_de_ssl';\n newData.sub_category_id = '28254262891667';\n newData.sub_category_value = 'hg_instalacao_de_ssl';\n break;\n case V2Forms.WILDCARD_SSL:\n newData.group_id = '23450116897811';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_instalacao_de_ssl';\n newData.sub_category_id = '28254262891667';\n newData.sub_category_value = 'hg_instalacao_de_ssl';\n break;\n case V2Forms.ENTERPRISE_SSL:\n newData.group_id = '23450116897811';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_instalacao_de_ssl';\n newData.sub_category_id = '28254262891667';\n newData.sub_category_value = 'hg_instalacao_de_ssl';\n break;\n case V2Forms.INSTALL_WHMCS:\n newData.group_id = '27292955547155';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_whmcs';\n newData.sub_category_id = '28254313912211';\n newData.sub_category_value = 'hg_outros_whmcs';\n break;\n case V2Forms.RELOAD_REBUILD:\n newData.group_id = '27292955547155';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_reload_rebuild';\n newData.sub_category_id = '';\n newData.sub_category_value = '';\n break;\n case V2Forms.MIGRATE_VPS_DEDICATED:\n newData.group_id = IS_PROD ? '27293098116243' : '24966089236755';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_migracao';\n newData.sub_category_id = '28254219203219';\n newData.sub_category_value = 'hg_migracao_vps_dedicado';\n break;\n case V2Forms.MIGRATE_ACCOUNT_VPS_DEDICATED:\n newData.group_id = IS_PROD ? '27293098116243' : '24966089236755';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_migracao';\n newData.sub_category_id = '28254219203219';\n newData.sub_category_value = 'hg_migracao_vps_dedicado';\n break;\n case V2Forms.UPDATE_WHMCS_LICENSE:\n newData.group_id = '27292955547155';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_whmcs';\n newData.sub_category_id = '28254313912211';\n newData.sub_category_value = 'hg_solicitar_licenca';\n break;\n case V2Forms.WHMCS_ACQUISITION:\n newData.group_id = '27292955547155';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_whmcs';\n newData.sub_category_id = '28254313912211';\n newData.sub_category_value = 'hg_solicitar_licenca';\n break;\n case V2Forms.MIGRATE_RESELLER:\n newData.group_id = IS_PROD ? '27293098116243' : '24966089236755';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_migracao';\n newData.sub_category_id = '28254219203219';\n newData.sub_category_value = 'hg_migracao_revenda';\n break;\n case V2Forms.SSL_EV:\n newData.group_id = '23450116897811';\n newData.category_id = '28251033477139';\n newData.category_value = 'hg_ssl';\n newData.sub_category_id = '28254262891667';\n newData.sub_category_value = 'hg_instalacao_de_ssl';\n break;\n case V2Forms.UPGRADE_SITEBUILDER:\n newData.group_id = '27293010048019';\n newData.category_id = '28250390746387';\n newData.category_value = 'hg_upgrade/downgrade';\n newData.sub_category_id = '';\n newData.sub_category_value = '';\n break;\n default:\n break;\n }\n\n return newData;\n }, [selectedSector, selectedProductData]);\n\n const submitForm = useCallback((data, sendRawData) => {\n setIsAutomated(false);\n setOpening(true);\n\n const dataObject = {\n ...data,\n tags: [\n ...(data.tags || []),\n COUNTRY,\n ],\n };\n\n const newData = useZendeskV2 && !sendRawData ? addNewZendeskData(dataObject) : dataObject;\n\n if (!formData) {\n setFormData(dataObject);\n }\n\n const onSuccess = () => {\n setIsAutomated({\n name: data.automation,\n automationRedirect: data.automationRedirect,\n });\n setOpening(false);\n setShowFeedback('success');\n setFormData(undefined);\n };\n\n const onFail = () => {\n setOpening(false);\n setShowFeedback('fail');\n };\n\n newData.onSuccess = onSuccess;\n newData.onFail = onFail;\n dispatch(formsActions.send.request({ data: newData, useZendeskV2 }));\n }, [dispatch, useZendeskV2, addNewZendeskData, formData]);\n\n const tryCreateFormAgain = useCallback(() => {\n setShowFeedback(undefined);\n submitForm(formData, true);\n }, [formData, submitForm]);\n\n\n const getInternalMigrationProps = useCallback(() => {\n let destinationProductsOptions = [];\n\n if (activeProductsOptions) {\n destinationProductsOptions = [...activeProductsOptions].map((product) => {\n const newProduct = { ...product };\n newProduct.label = `${newProduct.name} - ${newProduct.domain}`;\n return newProduct;\n });\n\n destinationProductsOptions = [...destinationProductsOptions].filter((product) => {\n const isHosting = HgProducts.HOSTING_ALL.includes(product.pid);\n return product.label !== selectedProductOption && isHosting;\n });\n }\n\n const defaultProps = {\n selectedProduct,\n selectedProductOption,\n destinationProductsOptions,\n submitForm: e => submitForm(e),\n opening,\n };\n\n return defaultProps;\n }, [selectedProduct, activeProductsOptions, selectedProductOption, submitForm, opening]);\n\n const getUserBackupRestoreProps = useCallback(() => {\n let destinationProductsOptions = [];\n\n if (activeProductsOptions) {\n destinationProductsOptions = [...activeProductsOptions].map((product) => {\n const newProduct = { ...product };\n newProduct.label = `${newProduct.name} - ${newProduct.domain}`;\n return newProduct;\n });\n\n destinationProductsOptions = [...destinationProductsOptions].filter((product) => {\n const isHosting = HgProducts.HOSTING_ALL.includes(product.pid);\n return product.label !== selectedProductOption && isHosting;\n });\n }\n\n const defaultProps = {\n selectedProduct,\n selectedProductOption,\n destinationProductsOptions,\n submitForm: e => submitForm(e),\n opening,\n };\n\n return defaultProps;\n }, [selectedProduct, activeProductsOptions, selectedProductOption, submitForm, opening]);\n\n const getWithoutEmailAccess = useCallback(() => {\n const defaultProps = {\n submitForm: e => submitForm(e),\n email: clientInfo && clientInfo.email,\n document: clientInfo && clientInfo.document,\n opening,\n };\n\n return defaultProps;\n }, [\n submitForm,\n clientInfo,\n opening,\n ]);\n\n const getGenerateCSRProps = useCallback(() => {\n const customerSummary = {\n name: clientInfo.name,\n email: clientInfo.email,\n city: clientInfo.city,\n state: clientInfo.state,\n country: clientInfo.country,\n company: clientInfo.companyname,\n };\n\n const defaultProps = {\n submitForm: e => submitForm(e),\n selectedProduct,\n customerSummary,\n opening,\n };\n\n return defaultProps;\n }, [selectedProduct, clientInfo, opening, submitForm]);\n\n const getNationalDomainTransferProps = useCallback(() => {\n const defaultProps = {\n submitForm,\n opening,\n };\n\n return {\n ...defaultProps,\n };\n }, [submitForm, opening]);\n\n const getDefaultFormProps = useCallback((ticketType) => {\n const defaultProps = {\n submitForm,\n selectedProduct,\n opening,\n selectedProductOption,\n ticketType,\n };\n\n return {\n ...defaultProps,\n };\n }, [\n submitForm,\n selectedProduct,\n opening,\n selectedProductOption,\n ]);\n\n if (loading) {\n return (\n \n \n \n \n );\n }\n\n const renderForm = {\n [ticketsLocale.forms.names.internalMigration]: \n \n \n {ticketsLocale.opening} \n \n \n \n );\n }\n\n if (useNewSupport && showFeedback === 'success') {\n return (\n \n \n \n \n {isAutomated\n && ticketsLocale.automated[isAutomated.name]\n && ticketsLocale.automated[isAutomated.name].title\n ? ticketsLocale.automated[isAutomated.name].title\n : ticketsLocale.openingSuccess\n }\n \n \n {isAutomated\n && ticketsLocale.automated[isAutomated.name]\n && ticketsLocale.automated[isAutomated.name].description\n ? ticketsLocale.automated[isAutomated.name].description\n : ticketsLocale.openingSuccessDescription\n }\n \n history.push(\n isAutomated\n && isAutomated.automationRedirect\n ? isAutomated.automationRedirect\n : routesLocale.help,\n )}\n />\n \n \n \n );\n }\n\n if (useNewSupport && showFeedback === 'fail') {\n return (\n \n \n \n {ticketsLocale.openingError} \n \n \n \n );\n }\n\n return (\n <>\n \n \n {ticketsLocale.openNewTicketPage.title} \n {ticketsLocale.openNewTicketPage.whichService} \n \n {!ticketType && !isV3Form && (\n handleSelectedProductOption(label)}\n testId=\"selectProduct\"\n withScroll\n />\n\n )}\n\n {(isV3Form || ticketType) && (\n handleSelectedProductOption(label)}\n testId=\"selectProduct\"\n positionAbsolute\n />\n )}\n \n\n {selectedProduct && (\n \n {ticketsLocale.openNewTicketPage.selecteSectorOptionPlaceholder} \n \n setSelectedSector('billing')} data-testid=\"billingRadio\">\n \n\n {selectedProduct && selectedProduct.active && (\n setSelectedSector('technical')} data-testid=\"technicalRadio\">\n \n )}\n \n \n )}\n\n {selectedSector && (\n \n \n )}\n\n {renderForm[selectedNeed || selectedProductOption]}\n \n \n \n );\n};\n\nexport default SupportForms;\n","const styles = theme => ({\n faq: {\n padding: '29px 0 17px 0',\n },\n loading: {\n flex: 'none',\n },\n contentLoader: {\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n },\n handleSelectPosition: {\n marginLeft: '-1px',\n },\n save: {\n minWidth: 200,\n marginLeft: 10,\n [theme.breakpoints.down('xs')]: {\n marginLeft: 0,\n marginBottom: 13,\n },\n },\n actionsWrapper: {\n display: 'flex',\n alignItems: 'center',\n marginTop: 23,\n [theme.breakpoints.down('xs')]: {\n alignItems: 'flex-start',\n flexDirection: 'column-reverse',\n },\n },\n textMb: {\n fontSize: 13,\n color: theme.color.tundora,\n marginLeft: 10,\n display: 'inline-block',\n },\n textOr: {\n fontSize: 12,\n color: theme.color.regentGray,\n margin: '0 20px',\n display: 'inline-block',\n },\n generatorWrapper: {\n margin: '15px 0',\n },\n settings: {\n display: 'flex',\n alignItems: 'center',\n },\n infoIcon: {\n color: theme.color.indigo,\n fontSize: '20px',\n },\n tooltipHelper: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n generatorText: {\n margin: '26px 0',\n color: theme.color.regentGray,\n fontSize: '12px',\n },\n generatorLink: {\n display: 'contents',\n color: theme.color.indigo,\n fontSize: '12px',\n },\n handleWrapper: {\n marginTop: '-8px',\n marginBottom: '5px',\n [theme.breakpoints.down(815)]: {\n marginTop: '-14px',\n },\n },\n '@keyframes showChecklist': {\n from: {\n opacity: 0,\n },\n to: {\n opacity: 1,\n },\n },\n checklistContainer: {\n transition: 'opacity',\n animationName: 'showChecklist',\n animationDuration: '0.3s',\n },\n checklist: {\n listStyle: 'none',\n paddingLeft: '5px',\n margin: '10px 0 0 0',\n '& li': {\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n fontSize: '12px',\n padding: '3px 0',\n },\n },\n checklistTitle: {\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n color: theme.color.regentGray,\n fontSize: '14px',\n margin: '20px 0 0 0',\n },\n checkIcon: {\n fontSize: '14px',\n marginRight: '6px',\n marginLeft: '-4px',\n },\n lensIcon: {\n fontSize: '6px',\n marginRight: '10px',\n },\n lockIcon: {\n fontSize: '14px',\n marginRight: '7px',\n },\n colorTrue: {\n color: theme.color.tundora,\n },\n colorFalse: {\n color: theme.color.valencia,\n },\n inputEmailWrapper: {\n display: 'flex',\n width: '100%',\n flexWrap: 'wrap',\n [theme.breakpoints.down(815)]: {\n flexDirection: 'column',\n },\n },\n inputPasswordWrapper: {\n width: '325px',\n [theme.breakpoints.down('xs')]: {\n width: '100%',\n },\n },\n title: {\n margin: '0 0 25px 0',\n padding: 0,\n fontSize: '24px',\n color: theme.color.tundora,\n },\n content: {\n padding: '20px 30px 30px 30px',\n },\n border: {\n borderLeft: `5px solid ${theme.color.indigo}`,\n borderRadius: '0',\n marginBottom: '40px',\n position: 'relative',\n '& .cardLabel': {\n height: '20px',\n },\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n },\n root: {\n [theme.breakpoints.up(960)]: {\n paddingTop: 0,\n },\n [theme.breakpoints.between('xs', 'sm')]: {\n paddingTop: 20,\n },\n [theme.breakpoints.down('xs')]: {\n marginTop: 0,\n paddingTop: 0,\n },\n },\n selectFieldTextOn: {\n color: theme.color.tundora,\n width: '325px',\n fontSize: 14,\n [theme.breakpoints.down('xs')]: {\n width: '100%',\n },\n },\n quotaInput: {\n width: '100%',\n fontSize: '14px',\n margin: '0',\n maxWidth: '140px',\n '& fieldset': {\n borderRadius: '2px',\n },\n '& input[type=\"number\"]::-webkit-outer-spin-button, input[type=\"number\"]::-webkit-inner-spin-button': {\n '-webkit-appearance': 'none',\n margin: 0,\n },\n '& input[type=\"number\"]': {\n '-moz-appearance': 'textfield',\n },\n '& label': {\n transform: 'translate(14px, 10px) scale(1)',\n zIndex: 0,\n },\n '& input': {\n padding: '7px',\n paddingBottom: '8px',\n },\n [theme.breakpoints.down('xs')]: {\n maxWidth: '100%',\n marginRight: 0,\n marginLeft: 0,\n marginBottom: 0,\n '& fieldset': {\n width: '100%',\n },\n },\n },\n emailNameInput: {\n width: '325px',\n fontSize: '14px',\n margin: '0',\n '& fieldset': {\n borderTopLeftRadius: '2px',\n borderBottomLeftRadius: '2px',\n borderBottomRightRadius: '0px',\n borderTopRightRadius: '0px',\n },\n '& input[type=\"number\"]::-webkit-outer-spin-button, input[type=\"number\"]::-webkit-inner-spin-button': {\n '-webkit-appearance': 'none',\n margin: 0,\n },\n '& input[type=\"number\"]': {\n '-moz-appearance': 'textfield',\n },\n '& label': {\n transform: 'translate(14px, 10px) scale(1)',\n zIndex: 0,\n },\n '& input': {\n padding: '7px',\n paddingBottom: '8px',\n },\n [theme.breakpoints.down(1166)]: {\n margin: 0,\n '& fieldset': {\n width: '100%',\n },\n },\n [theme.breakpoints.down(1096)]: {\n marginBottom: 10,\n },\n [theme.breakpoints.down('xs')]: {\n width: '100%',\n },\n },\n disabledInput: {\n backgroundColor: theme.color.concrete,\n color: theme.color.tundora,\n fontSize: '14px',\n letterSpacing: '0.01px',\n lineHeight: '17px',\n },\n\n cssLabel: {\n '&$cssFocused': {\n color: theme.color.chambray,\n },\n },\n cssOutlinedInput: {\n '&$cssFocused $notchedOutline': {\n border: `1px solid ${theme.color.chambray}`,\n },\n },\n cssFocused: {},\n notchedOutline: {},\n selectCustom: {\n '&$selectCustomFocused $selectCustomOutline': {\n borderColor: theme.color.chambray,\n borderWidth: 1,\n },\n '& div > div': {\n paddingBottom: 8,\n paddingTop: 9,\n fontSize: 14,\n },\n '& div > div:focus': {\n backgroundColor: 'transparent',\n },\n '& fieldset': {\n borderTopLeftRadius: '0px',\n borderBottomLeftRadius: '0px',\n borderBottomRightRadius: '2px',\n borderTopRightRadius: '2px',\n },\n },\n selectCustomInput: {},\n selectCustomOutline: {},\n selectCustomFocused: {},\n});\n\nexport default styles;\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useState, useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Redirect, useParams } from 'react-router-dom';\nimport { withI18n, Trans } from 'react-i18next';\nimport Card from '@material-ui/core/Card';\nimport {\n Typography, TextField, Select, OutlinedInput, MenuItem, Checkbox,\n FormControlLabel, CircularProgress, Tooltip,\n} from '@material-ui/core';\nimport { withStyles } from '@material-ui/core/styles';\nimport {\n Lock, Check, Lens, Info,\n} from '@material-ui/icons';\nimport classnames from 'classnames';\nimport { find, propEq } from 'ramda';\nimport TicketButtonLoader from '@/components/Tickets/TicketButtonLoader';\nimport FaqEmails from '@/components/FrequentlyQuestions/FaqEmails';\nimport PasswordField from '@/components/Fields/PasswordField';\nimport { ContentContainer } from '@/components/Cards/ContentContainer';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport OutlineButton from '@/components/Buttons/OutlineButton';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport { passwordScore } from '@/utils/Validators/passwordScore';\nimport { validateEmailName, validateQuota, validateEmailCpanel } from '@/utils/Validators/validation';\nimport { commonActions } from '@/redux/modules';\nimport { PASSWORD_GENERATOR_URL } from '@/config/urls/passwordUrls';\nimport { loadHostDomain, createEmailAccount, loadHostingTypes } from '@/redux/actions/emails';\nimport { SUCCESS_CREATE_EMAIL } from '@/redux/actions/actionsTypes';\nimport styles from './styles';\nimport useLocale from '@/hooks/useLocale';\n\nconst CreateEmail = ({ t, classes }) => {\n const { domain: specificDomain } = useParams();\n const { alerts: alertsLocale } = useLocale();\n const dispatch = useDispatch();\n\n const stateEmails = useSelector(state => state.emails);\n\n const {\n list: hostings,\n loading: loadingHosting,\n } = stateEmails.hostings;\n\n const {\n list: hostDomainList,\n loading: hostDomainLoading,\n primaryDomain: hostDomainPrimary,\n } = stateEmails.hostDomain;\n const { loadingCreateAccount } = stateEmails;\n\n const [domain, setDomain] = useState('');\n const [domainName, setDomainName] = useState('');\n const [domainValue, setDomainValue] = useState('');\n const [strength, setStrength] = useState('');\n const [emailName, setEmailName] = useState('');\n const [emailNameReady, setEmailNameReady] = useState(false);\n const [emailNameError, setEmailError] = useState(false);\n const [emailNameErrorMsg, setEmailErrorMsg] = useState(false);\n const [emailNameFlagError, setEmailFlagError] = useState(false);\n const [password, setPassword] = useState('');\n const [passwordReady, setPasswordReady] = useState(false);\n const [passwordError, setPasswordError] = useState(false);\n const [passwordErrorMsg, setPasswordErrorMsg] = useState('');\n const [passwordFlagError, setPasswordFlagError] = useState(false);\n\n const [confirmPassword, setConfirmPassword] = useState('');\n const [confirmPasswordReady, setConfirmPasswordReady] = useState(false);\n const [confirmPasswordError, setConfirmPasswordError] = useState(false);\n const [confirmPasswordErrorMsg, setConfirmPasswordErrorMsg] = useState('');\n const [confirmPasswordFlagError, setConfirmPasswordFlagError] = useState(false);\n\n const [checklistVisible, setChecklistVisible] = useState(true);\n const [upperAndLower, setUpperAndLower] = useState(false);\n const [number, setNumer] = useState(false);\n const [symbol, setSymbol] = useState(false);\n const [notEqualCharacters, setNotEqualCharacters] = useState(false);\n const [notSequencialCharacters, setNotSequencialCharacters] = useState(false);\n const [eightCharacters, setEightCharacters] = useState(false);\n const [equalInputValue, setEqualInputValue] = useState(false);\n const [actionsVisible, setActionsVisible] = useState(false);\n const [cancelButtonDisable, setCancelButtonDisable] = useState(true);\n const [redirectToEmailList, setRedirectToEmailsList] = useState(false);\n const [saveButtonDisable, setSaveButtonDisable] = useState(true);\n const [quota, setQuota] = useState('');\n const [unlimited, setUnlimited] = useState(false);\n\n\n useEffect(() => {\n dispatch(loadHostDomain());\n\n if (hostings.length === 0) {\n dispatch(loadHostingTypes());\n }\n }, []);\n\n useEffect(() => {\n setDomainValue(hostDomainPrimary);\n setDomain(hostDomainPrimary.hostingId);\n setDomainName(hostDomainPrimary.domain);\n }, [stateEmails]);\n\n const handleCancel = () => {\n setRedirectToEmailsList(true);\n };\n\n const handleChange = (event, input) => {\n if (input === 'password') {\n const strength = passwordScore(event.target.value.trim());\n setPassword(event.target.value);\n setStrength(strength.strength);\n } else if (input === 'confirmPassword') {\n setConfirmPassword(event.target.value);\n } else if (input === 'domain') {\n setDomainValue(event.target.value);\n setDomain(event.target.value.hostingId);\n setDomainName(event.target.value.domain);\n } else if (input === 'emailName') {\n setEmailName(validateEmailName(event.target.value));\n } else if (input === 'quota') {\n setQuota(validateQuota(event.target.value));\n if (event.target.value.length > 7) {\n setQuota(validateQuota(event.target.value.slice(0, event.target.value.length - 1)));\n }\n } else if (input === 'unlimited') {\n setUnlimited(!unlimited);\n }\n };\n\n const handleValidations = (input) => {\n const isPasswordInvalid = strength < 50 || !notSequencialCharacters || !notEqualCharacters;\n\n if (input === 'password') {\n if (password === '') {\n setPasswordError(true);\n setPasswordErrorMsg(t('myData.changePassword.errorEmptyField'));\n setPasswordFlagError(true);\n } else if (isPasswordInvalid) {\n setPasswordError(true);\n setPasswordErrorMsg('');\n setPasswordReady(false);\n } else {\n setPasswordError(false);\n setPasswordErrorMsg('');\n setPasswordReady(true);\n }\n } else if (input === 'confirmPassword') {\n if (confirmPassword === '') {\n setConfirmPasswordError(true);\n setConfirmPasswordErrorMsg(t('myData.changePassword.errorEmptyField'));\n setConfirmPasswordFlagError(true);\n } else if (confirmPassword !== password) {\n setConfirmPasswordError(true);\n setConfirmPasswordErrorMsg(t('myData.changePassword.errorConfirmNew'));\n setConfirmPasswordFlagError(true);\n } else {\n setConfirmPasswordError(false);\n setConfirmPasswordErrorMsg('');\n setConfirmPasswordReady(true);\n }\n } else if (input === 'emailName') {\n if (emailName === '') {\n setEmailError(true);\n setEmailErrorMsg(t('myData.changePassword.errorEmptyField'));\n setEmailFlagError(true);\n } else if (validateEmailCpanel(emailName)) {\n setEmailError(true);\n setEmailErrorMsg(t('emails.specialCharacters'));\n setEmailFlagError(true);\n } else {\n setEmailError(false);\n setEmailErrorMsg('');\n setEmailNameReady(true);\n }\n }\n };\n\n const handleChecklist = (input) => {\n // Verify password change requirements are ready and hidden checklist\n if (passwordReady && password === confirmPassword) {\n setChecklistVisible(false);\n } else {\n setChecklistVisible(true);\n }\n\n // Handle regex clean password\n const cleanSymbols = password.replace(/\\W/g, '');\n const numbers = cleanSymbols.replace(/[A-Z-a-z]/g, '');\n const symbols = password.replace(/\\w/g, '');\n\n const verifyCharactersOnSequence = (alphabet) => {\n let haveCharactersOnSequence = false;\n\n for (let pointer = 0; pointer < password.length; pointer += 1) {\n for (let sequence = pointer + 3; sequence <= password.length; sequence += 1) {\n const substring = password.substring(pointer, sequence);\n if (alphabet.includes(substring)) {\n haveCharactersOnSequence = true;\n break;\n }\n }\n }\n\n return haveCharactersOnSequence;\n };\n\n const passwordHasSequencialCharacters = () => {\n const alphaNumbers = '0123456789';\n const alphaLetters = 'abcdefghijklmnopqrstuvwxyz';\n\n return verifyCharactersOnSequence(alphaNumbers)\n || verifyCharactersOnSequence(alphaNumbers.split('').reverse().join(''))\n || verifyCharactersOnSequence(alphaLetters)\n || verifyCharactersOnSequence(alphaLetters.toUpperCase());\n };\n\n // Verify new password\n if (input === 'password') {\n // Check if have uppers and lowercase letters\n if (password.match(/[a-z]/) && password.match(/[A-Z]/)) {\n setUpperAndLower(true);\n } else {\n setUpperAndLower(false);\n }\n // Check if have number\n if (numbers.length > 0) {\n setNumer(true);\n } else {\n setNumer(false);\n }\n // Check if have symbol\n if (symbols.length > 0) {\n setSymbol(true);\n } else {\n setSymbol(false);\n }\n // Check equal characters\n if (password.match(/(.)\\1{2}/)) {\n setNotEqualCharacters(false);\n } else {\n setNotEqualCharacters(true);\n }\n if (passwordHasSequencialCharacters()) {\n setNotSequencialCharacters(false);\n } else {\n setNotSequencialCharacters(true);\n }\n // Check if have 8 characters\n if (password.length >= 8) {\n setEightCharacters(true);\n } else {\n setEightCharacters(false);\n }\n }\n // Verify confirm password is equal new password\n if (input === 'confirmPassword') {\n if (password === confirmPassword) {\n setEqualInputValue(true);\n } else {\n setEqualInputValue(false);\n }\n }\n };\n\n const handleCancelButton = () => {\n if (password !== '' || confirmPasswordReady !== '') {\n setCancelButtonDisable(false);\n } else if (password === '' || confirmPassword === '') {\n setCancelButtonDisable(true);\n }\n };\n\n const handleActionsVisible = () => {\n if (!!emailName || !!password || !!confirmPassword) {\n setActionsVisible(true);\n } else {\n setActionsVisible(false);\n }\n };\n\n const handleKeyUp = (event, input) => {\n if (passwordFlagError) handleValidations(input);\n if (confirmPasswordFlagError) handleValidations(input);\n if (emailNameFlagError) handleValidations(input);\n handleCancelButton();\n\n if (emailName !== '' && password !== '' && confirmPassword !== '') {\n if (password.length > 7) {\n if (passwordReady) {\n if (password === confirmPassword) {\n setSaveButtonDisable(false);\n } else {\n setSaveButtonDisable(true);\n }\n } else {\n setSaveButtonDisable(true);\n }\n } else {\n setSaveButtonDisable(true);\n }\n } else {\n setSaveButtonDisable(true);\n }\n\n handleChecklist(input);\n handleActionsVisible();\n };\n\n const handleBlur = (event, input) => {\n handleValidations(input);\n };\n\n const clearAll = () => {\n const clearObject = {\n target: {\n value: '',\n },\n };\n handleChange(clearObject, 'emailName');\n handleChange(clearObject, 'password');\n handleChange(clearObject, 'confirmPassword');\n };\n\n const handleSave = () => {\n const domainObject = find(propEq('domain', specificDomain), hostDomainList);\n\n if (emailNameReady && passwordReady && confirmPasswordReady && equalInputValue) {\n const createEmailData = {\n user: emailName,\n domain: specificDomain ? domainObject.domain : domainName,\n quota,\n password,\n passwordConfirmation: confirmPassword,\n unlimited: quota === '',\n };\n dispatch(createEmailAccount(createEmailData, specificDomain ? domainObject.hostingId : domain)).then((response) => {\n if (response.type === SUCCESS_CREATE_EMAIL && response.data.notifications.length === 0) {\n dispatch(commonActions.notifications.set({\n label: alertsLocale.emailPassword.createSuccess,\n type: 'success',\n }));\n clearAll();\n }\n if (response.data.notifications.some(notification => notification.errors.error_tag === 'cpanel_instability')) {\n dispatch(commonActions.notifications.set({\n label: alertsLocale.emailPassword.weakPassword,\n type: 'error',\n }));\n }\n });\n }\n };\n\n if (loadingHosting) {\n return (\n \n
\n );\n }\n\n // Redirect on cancel button\n if (redirectToEmailList) {\n return specificDomain\n ? \n \n \n
{t('emails.createAccount')} \n
\n
handleKeyUp(event, 'emailName')}\n onChange={event => handleChange(event, 'emailName')}\n onBlur={event => handleBlur(event, 'emailName')}\n value={emailName}\n error={emailNameError}\n helperText={emailNameErrorMsg}\n InputLabelProps={{\n classes: {\n root: classes.cssLabel,\n focused: classes.cssFocused,\n },\n }}\n InputProps={{\n classes: {\n root: classes.cssOutlinedInput,\n focused: classes.cssFocused,\n notchedOutline: classes.notchedOutline,\n },\n inputProps: { maxLength: 64 },\n }}\n data-id=\"email-name\"\n />\n \n {specificDomain\n ? (\n handleChange(event, 'domain')}\n className={classes.selectFieldTextOn}\n startAdornment={hostDomainLoading && \n @\n {domain.domain}\n \n ))}\n \n )}\n
\n \n
\n
handleKeyUp(event, 'password')}\n onChange={event => handleChange(event, 'password')}\n onBlur={event => handleBlur(event, 'password')}\n error={passwordError}\n helperText={passwordErrorMsg}\n dataId=\"email-password\"\n data-testid=\"email-password-field\"\n />\n \n
\n
handleKeyUp(event, 'confirmPassword')}\n onChange={event => handleChange(event, 'confirmPassword')}\n onBlur={event => handleBlur(event, 'confirmPassword')}\n error={confirmPasswordError}\n helperText={confirmPasswordErrorMsg}\n dataId=\"email-confirm-password\"\n />\n \n\n {checklistVisible && (\n
\n
\n
\n
\n \n {upperAndLower\n ? \n \n {number\n ? \n \n {symbol\n ? \n \n {eightCharacters\n ? \n \n {notEqualCharacters\n ? \n \n {notSequencialCharacters\n ? \n \n {equalInputValue\n ? \n \n
\n )}\n\n
\n \n \n 0\n 1 \n 2\n \n \n
\n\n
\n
handleChange(event, 'quota')}\n value={quota}\n InputLabelProps={{\n classes: {\n root: classes.cssLabel,\n focused: classes.cssFocused,\n },\n }}\n InputProps={{\n classes: {\n root: classes.cssOutlinedInput,\n focused: classes.cssFocused,\n notchedOutline: classes.notchedOutline,\n },\n }}\n data-id=\"email-quota\"\n />\n MB \n {t('emails.or')} \n handleChange(event, 'unlimited')}\n value=\"checkedB\"\n color=\"primary\"\n data-id=\"email-unlimited-quota\"\n />\n )}\n label={t('emails.unlimited')}\n />\n \n \n
\n \n\n {actionsVisible && (\n
\n
\n {t('backToList')}\n \n handleSave()}\n className={classes.save}\n data-id=\"button-submit-email\"\n data-testid=\"button-submit-email\"\n >\n {loadingCreateAccount ? \n )}\n
\n\n \n \n );\n};\n\nexport default withI18n()(withStyles(styles)(CreateEmail));\n","const styles = theme => ({\n container: {\n marginBottom: '20px',\n },\n /** Category * */\n category: {\n fontSize: '20px',\n borderBottom: `1px solid ${theme.color.geyser}`,\n height: '18px',\n marginBottom: '16px',\n color: '#aaa',\n },\n categoryContent: {\n backgroundColor: theme.color.white,\n paddingRight: '16px',\n display: 'inline-block',\n maxWidth: '100%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n height: '20px',\n },\n\n /** section * */\n section: {\n width: '20%',\n textAlign: 'right',\n paddingRight: '16px',\n paddingTop: '4px',\n fontSize: 16,\n letterSpacing: '.2px',\n color: theme.color.indigo,\n [theme.breakpoints.down('xs')]: {\n width: '30%',\n },\n },\n /** content * */\n content: {\n width: '80%',\n padding: '4px 4px 4px 8px',\n [theme.breakpoints.down('xs')]: {\n width: '70%',\n paddingRight: '0',\n },\n '&:hover': {\n backgroundColor: '#D9D9D94D',\n },\n },\n contentBorder: {\n borderLeft: `1px solid ${theme.color.alto}`,\n },\n wrapperWithoutLeftTitle: {\n width: '100%',\n },\n title: {\n fontSize: '1.1em',\n fontWeight: 'bold',\n color: theme.color.tundora,\n },\n highlight: {\n position: 'relative',\n zIndex: '1',\n '& > em': {\n backgroundColor: '#e6f4f9',\n color: theme.color.indigo,\n },\n '&:before': {\n content: '',\n position: 'absolute',\n top: '0',\n left: '0',\n width: '100%',\n height: '100%',\n opacity: '.1',\n zIndex: '-1',\n },\n },\n /** body * */\n body: {\n fontSize: '13px',\n color: theme.color.regentGray,\n marginTop: '4px',\n lineHeight: '1.25em',\n },\n link: {\n textDecoration: 'none',\n '&:hover': {\n textDecoration: 'none',\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport { Highlight, Snippet } from 'react-instantsearch-dom';\nimport { Grid, withWidth } from '@material-ui/core';\nimport { isWidthUp, isWidthDown } from '@material-ui/core/withWidth';\nimport { SUPPORT_ARTICLES } from '@/config/urls/supportUrls';\nimport styles from './styles';\n\nconst verifyToSetClasses = (screenIsDowSM, screenIsDowXS, screenIsUpLG, classes) => {\n if (screenIsDowSM && !screenIsDowXS) {\n return classes.contentBorder;\n }\n if (!screenIsUpLG) {\n return classes.wrapperWithoutLeftTitle;\n }\n return '';\n};\n\nconst Hits = ({ hit, classes, width }) => {\n const linkTo = `${SUPPORT_ARTICLES}${hit.id}`;\n const screenIsUpLG = isWidthUp('lg', width);\n const screenIsDowSM = isWidthDown('sm', width);\n const screenIsDowXS = isWidthDown('xs', width);\n\n return (\n \n \n \n \n {hit.category.title}\n \n \n \n {screenIsUpLG && (\n \n {hit.section.title}\n \n )}\n\n {screenIsDowSM && !screenIsDowXS && (\n \n {hit.section.title}\n \n )}\n\n \n \n \n \n ... \n ... \n \n \n \n \n \n );\n};\n\nexport default withWidth()(withStyles(styles)(Hits));\n","const { COUNTRY } = require('..');\n\nconst ZENDESK_CONFIG_MX = {\n appId: 'R10XIKCG3E',\n apiKey: 'f8ba696bb2f40ca12b2a408ca5c1d4c3',\n indexName: 'zendesk_hostgatormx_articles',\n};\n\nconst ZENDESK_CONFIG_BY_BRAND = {\n br: {\n appId: '79GJXL4E2Y',\n apiKey: '992f3df3d603bd7cb85bb66a023bb0f8',\n indexName: 'zendesk_hostgatorbr_articles',\n },\n mx: ZENDESK_CONFIG_MX,\n cl: ZENDESK_CONFIG_MX,\n co: ZENDESK_CONFIG_MX,\n ar: ZENDESK_CONFIG_MX,\n ec: ZENDESK_CONFIG_MX,\n bo: ZENDESK_CONFIG_MX,\n cr: ZENDESK_CONFIG_MX,\n do: ZENDESK_CONFIG_MX,\n gt: ZENDESK_CONFIG_MX,\n pa: ZENDESK_CONFIG_MX,\n pe: ZENDESK_CONFIG_MX,\n py: ZENDESK_CONFIG_MX,\n sv: ZENDESK_CONFIG_MX,\n uy: ZENDESK_CONFIG_MX,\n};\n\n\nexport const ZENDESK = ZENDESK_CONFIG_BY_BRAND[COUNTRY];\n","const styles = theme => ({\n container: {\n borderRadius: '0',\n borderLeft: '5px solid',\n borderColor: theme.palette.primary.main,\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n padding: '12px 30px 12px 30px',\n marginBottom: '5px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n [theme.breakpoints.down('sm')]: {\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n },\n containerCollapse: {\n width: '100%',\n background: 'transparent',\n display: 'flex',\n paddingRight: '17px',\n justifyContent: 'flex-end',\n [theme.breakpoints.down('sm')]: {\n flexDirection: 'column',\n paddingLeft: '23px',\n paddingRight: '23px',\n },\n },\n searchTitle: {\n minWidth: '320px',\n fontSize: '24px',\n [theme.breakpoints.down('sm')]: {\n paddingTop: '10px',\n paddingBottom: '10px',\n },\n },\n linkWrapper: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n paddingBottom: '25px',\n },\n link: {\n textDecoration: 'none',\n },\n cssOutlinedInput: {\n '& > input': {\n padding: '9px 14px 5px 14px',\n fontSize: '14px',\n },\n '&$cssFocused $notchedOutline': {\n border: `1px solid ${theme.color.chambray}`,\n },\n },\n cssFocused: {},\n notchedOutline: {},\n cssLabel: {\n '&$cssFocused': {\n color: theme.color.chambray,\n },\n },\n input: {\n '& div': {\n '& > fieldset': {\n borderRadius: '2px',\n },\n },\n '& > label': {\n transform: 'translate(14px, 10px) scale(1)',\n },\n },\n});\n\nexport default styles;\n","import styled, { css } from 'styled-components';\n\nexport const InputWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n border-color: ${theme.v2.colors.feedback.canceledPure};\n border-radius: 0px;\n border-style: solid;\n border-width: 0px 0px 1px 0px;\n display: flex;\n min-width: 237px;\n\n fieldset {\n border: 0px !important;\n }\n\n input {\n padding: 8px;\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n line-height: ${theme.v2.font.lineHeight.text};\n }\n `}\n`;\n\nexport const SearchIconWrapper = styled.div``;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport algoliasearch from 'algoliasearch/lite';\nimport Autosuggest from 'react-autosuggest';\nimport {\n InstantSearch, Configure, Index, connectAutoComplete,\n} from 'react-instantsearch-dom';\nimport { withStyles } from '@material-ui/core/styles';\nimport { Typography, Card, TextField } from '@material-ui/core/';\nimport { withI18n } from 'react-i18next';\nimport Hits from '@/components/Tickets/Hits';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport { ZENDESK } from '@/config/application/zendeskConfig';\nimport { SUPPORT_URL } from '@/config/urls/supportUrls';\nimport styles from './styles';\nimport * as Styles from './Search.styles';\nimport { IconSearch } from 'gatorcomponents/';\n\nconst algoliaClient = algoliasearch(ZENDESK.appId, ZENDESK.apiKey);\nconst searchClient = {\n search(requests) {\n if (requests.every(({ params }) => !params.query)) {\n return Promise.resolve({\n results: requests.map(() => ({\n hits: [],\n nbHits: 0,\n nbPages: 0,\n processingTimeMS: 0,\n })),\n });\n }\n return algoliaClient.search(requests);\n },\n};\n\nconst Search = ({ classes, t, v2 }) => {\n if (v2) {\n return (\n \n \n \n \n \n );\n }\n\n return (\n \n { t('help.search') } \n \n \n );\n};\n\nclass Example extends Component {\n static propTypes = {\n hits: PropTypes.arrayOf(PropTypes.object).isRequired,\n currentRefinement: PropTypes.string.isRequired,\n refine: PropTypes.func.isRequired,\n };\n\n constructor(props) {\n super(props);\n const { currentRefinement } = this.props;\n this.state = {\n value: currentRefinement,\n };\n }\n\n onChange = (event, { newValue }) => {\n this.setState({\n value: newValue,\n });\n };\n\n onSuggestionsFetchRequested = ({ value }) => {\n const { refine } = this.props;\n refine(value);\n };\n\n onSuggestionsClearRequested = () => {\n const { refine } = this.props;\n return refine();\n }\n\n getSuggestionValue = hit => hit.title;\n\n renderSectionTitle = section => section.index;\n\n getSectionSuggestions = section => section.hits;\n\n renderSuggestion = hit => (\n {children}\n {\n
\n
\n {t('help.seeMoreResults')} \n \n
\n }\n
\n \n {ticketLocale.ticketOpenModal.title} \n {ticketLocale.ticketOpenModal.cautionText} \n \n \n {!!ticketFiltered && (\n \n {ticketLocale.ticketOpenModal.ticketWarningText(ticketFiltered.tag)}\n \n )}\n \n \n \n \n );\n};\n\nexport default TicketOpenModal;\n","import styled, { css } from 'styled-components';\n\nexport const FilterWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n margin-bottom: 8px;\n `}\n`;\n\nexport const HelpLinksWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n margin-top: 16px ;\n margin-bottom: 8px;\n `}\n`;\n\nexport const TicketsContainer = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.white.primary};\n padding: 16px;\n\n svg {\n flex: 0 0 24px;\n transform: scaleX(-1);\n }\n `}\n`;\n\nexport const TicketsList = styled.div`\n display: flex;\n flex-direction: column;\n padding: 0px 8px;\n`;\n\nexport const LoadMoreWrapper = styled.div`\n display: flex;\n justify-content: center;\n margin: 16px 0px 8px 0px;\n`;\n\nexport const LinksContainer = styled(TicketsContainer)`\n margin-bottom: 16px\n`;\n\nexport const LinksList = styled(TicketsList)`\n ${({ theme }) => css`\n border-top: 1px solid ${theme.v2.colors.feedback.canceledPure};\n display: flex;\n flex-direction: row;\n gap: 8px 24px;\n margin-bottom: 16px;\n padding: 24px 0px;\n flex-direction: row;\n flex-wrap: wrap;\n\n a {\n flex: 0 0 335px;\n }\n `}\n`;\n\nexport const LinkBlock = styled.div`\n display: flex;\n flex-direction: column;\n gap: 8px;\n`;\n\nexport const UnderMaintenance = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.white.primary};\n border-radius: 8px;\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n margin-bottom: 8px;\n padding: 32px;\n text-align: center;\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nconst mobileBreakpoint = 'max-width:1122px';\nconst extraSmallMobileBreakpoint = 'max-width:1122px';\nconst mobileFullWidthCreatTicket = 'max-width:439px';\n\nexport const ButtonWrapper = styled.div`\n ${({ chatButton }) => css`\n flex-grow: ${chatButton && 1};\n max-width: ${chatButton && '172px'};\n\n svg {\n max-width: 20px;\n }\n\n @media(${mobileFullWidthCreatTicket}){\n max-width: none;\n width: 100%;\n button {\n width: 100%;\n }\n }\n `}\n`;\n\nexport const SanppyImage = styled.img`\n bottom: -38px;\n left: 78px;\n position: absolute;\n\n @media(${mobileBreakpoint}) {\n display: none;\n visibility: hidden;\n }\n`;\n\nexport const DescriptionWrapper = styled.div`\n display: flex;\n overflow: hidden;\n position: relative;\n\n svg{\n flex: 0 0 45px;\n @media(${extraSmallMobileBreakpoint}){\n display: none;\n visibility: none;\n }\n }\n\n @media(${extraSmallMobileBreakpoint}){\n flex-direction: column;\n padding: 8px\n }\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 8px 0px 8px 182px;\n\n strong {\n color: ${theme.v2.colors.brand.primaryMedium};\n font-weight: ${theme.v2.font.weights.medium};\n }\n\n @media(${mobileBreakpoint}) {\n margin: 8px 0px 8px 16px;\n }\n\n @media(${extraSmallMobileBreakpoint}){\n margin: 0px 0px 8px 0px;\n }\n `}\n`;\n\nexport const ButtonsWrapper = styled.div`\n display: flex;\n flex-grow: 1;\n gap: 16px;\n justify-content: flex-end;\n\n @media(${mobileFullWidthCreatTicket}){\n flex-wrap: wrap;\n }\n`;\n","import React from 'react';\nimport * as Styles from './TicketsDescription.styles';\nimport SnappySvg from '@/media/ticket/snappy-hero.svg';\nimport {\n Button, IconDoubleChat, IconTriangleDetail,\n} from 'gatorcomponents';\n\nexport const TicketsDescription = ({\n pendingAmount,\n ticketLocale,\n handleCreateNewTicket,\n handleOpenChat,\n showChatButton,\n}) => (\n \n \n {ticketLocale.listPage.listDescription(pendingAmount)}\n \n \n {showChatButton && (\n \n \n )}\n \n \n\n \n \n);\n","import styled, { css } from 'styled-components';\n\nconst mobileBreakpoint = 'max-width:1289px';\nconst extraSmallMobileBreakpoint = 'max-width:439px';\nconst leftIconSpacing = '40px';\nconst tagWrapperWidth = '170px';\n\n\nexport const TicketsList = styled.div`\n display: flex;\n flex-direction: column;\n padding: 0px 8px;\n`;\n\nexport const Ticket = styled.div`\n ${({ theme }) => css`\n align-items: center;\n border-top: 1px solid ${theme.v2.colors.feedback.canceledPure};\n display: flex;\n flex-wrap: wrap;\n flex: 1 0 100%;\n padding: 25px 0px 22px;\n\n @media(${mobileBreakpoint}){\n padding: 8px 0px;\n }\n `}\n`;\n\nexport const TicketSubjectWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0px 30px 0px 16px;\n max-width: 370px;\n width: 100%;\n\n @media(${mobileBreakpoint}){\n margin: 0px 0px 8px 16px;\n max-width: unset;\n width: calc(100% - ${leftIconSpacing} - ${tagWrapperWidth});\n }\n\n @media(${extraSmallMobileBreakpoint}){\n margin: 0px 0px 8px auto;\n width: calc(100% - ${leftIconSpacing} - ${tagWrapperWidth} - 10px);\n }\n`;\n\nexport const TicketTitleItem = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n `}\n`;\n\nexport const EmptyInfo = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px auto;\n margin: 0px;\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n `}\n`;\n\nexport const TicketValueItem = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `}\n`;\n\nexport const TagWrapper = styled.div`\n align-items: center;\n display: flex;\n position: relative;\n white-space: nowrap;\n width: ${tagWrapperWidth};\n\n > div {\n position: relative;\n width: ${tagWrapperWidth};\n }\n\n @media(${mobileBreakpoint}){\n justify-content: flex-end;\n margin: 0px 0px 8px 0px;\n }\n\n @media(${extraSmallMobileBreakpoint}){\n margin: 0px 0px 8px auto;\n }\n`;\n\nexport const TicketNumberWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0px 0px 0px 30px;\n max-width: 105px;\n\n @media(${mobileBreakpoint}){\n max-width: unset;\n margin: 0px 30px 8px ${leftIconSpacing};\n }\n`;\n\nexport const TicketDateWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0px 30px 0px 30px;\n max-width: 105px;\n\n @media(${mobileBreakpoint}){\n margin: 0px 0px 8px 0px;\n max-width: unset;\n }\n`;\n\nexport const TicketViewWrapper = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin-left: auto;\n max-width: 141px;\n\n @media(${extraSmallMobileBreakpoint}){\n max-width:unset;\n width: 100%;\n button {\n width: 100% !important;\n }\n }\n`;\n","import React, { useCallback, useEffect } from 'react';\nimport * as Styles from './TicketItems.styles';\nimport { Button, IconChat, Tag } from 'gatorcomponents';\nimport { format } from 'date-fns';\nimport { supportAnalytics } from '@/analytics';\n\nexport const TicketItems = ({\n filteredTickets,\n domainRegexWithUpperCase,\n ticketLocale,\n handleOpenTicket,\n empty,\n}) => {\n const handleClick = ({ id, v2 }) => {\n supportAnalytics.showTicketsCtaClick();\n handleOpenTicket && handleOpenTicket({ id, v2 });\n };\n\n const dispatchGaTags = useCallback(() => {\n if (filteredTickets.length) {\n supportAnalytics.showTicketsDisplayed();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n dispatchGaTags();\n }, [dispatchGaTags]);\n\n const statusTagVariants = {\n opened: 'attention',\n closed: 'cancel',\n open: 'attention',\n new: 'attention',\n solved: 'active',\n pending: 'pending',\n };\n\n return (\n <>\n {filteredTickets.map((ticket) => {\n let domain = ticket.description.match(domainRegexWithUpperCase);\n const { subject } = ticket;\n let newSubject = subject;\n\n if (subject) {\n const subjectDomainIndex = subject.search(domainRegexWithUpperCase);\n if (subjectDomainIndex > -1) {\n newSubject = subject.substring(0, subjectDomainIndex);\n if (!domain) {\n domain = subject.match(domainRegexWithUpperCase);\n }\n }\n }\n\n return (\n \n \n \n {newSubject}\n \n\n {(domain && domain[0]) && (\n \n {domain[0]}\n \n )}\n \n\n \n \n\n \n {ticket.id} \n {ticketLocale.listPage.tickets.numberLabel} \n \n\n \n {format(new Date(ticket.created_at), 'dd/MM/yyyy')} \n {ticketLocale.listPage.tickets.openingLabel} \n \n\n \n handleClick({ id: ticket.id, v2: ticket.v2 })}\n testId=\"viewInvoice\"\n />\n \n \n );\n })}\n\n {filteredTickets.length === 0 && (\n \n \n {empty}\n \n \n )}\n \n );\n};\n","import useLocale from '@/hooks/useLocale';\nimport { useCallback, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { faqActions } from '@/redux/modules';\n\nconst useHelpLinks = () => {\n const dispatch = useDispatch();\n const { ticket: ticketLocale } = useLocale();\n\n const defaultFilterChips = [\n {\n id: 'main',\n label: ticketLocale.listPageFaq.helpLinks.filter.chips.main,\n value: 'main',\n checked: true,\n },\n {\n id: 'financial',\n label: ticketLocale.listPageFaq.helpLinks.filter.chips.financial,\n value: 'financial',\n checked: false,\n },\n {\n id: 'domain',\n label: ticketLocale.listPageFaq.helpLinks.filter.chips.domain,\n value: 'domain',\n checked: false,\n },\n {\n id: 'mail',\n label: ticketLocale.listPageFaq.helpLinks.filter.chips.mail,\n value: 'mail',\n checked: false,\n },\n {\n id: 'site',\n label: ticketLocale.listPageFaq.helpLinks.filter.chips.site,\n value: 'site',\n checked: false,\n },\n ];\n\n const [filterOptions, setFilterOptions] = useState(defaultFilterChips);\n const [filteredLinks, setFilteredLinks] = useState([]);\n const faqQuestions = useSelector(state => state.newFaq);\n\n const requestFaq = useCallback(() => {\n dispatch(faqActions.faq.request.faqMain());\n dispatch(faqActions.faq.request.faqFinancial());\n dispatch(faqActions.faq.request.faqDns());\n dispatch(faqActions.faq.request.faqMail());\n dispatch(faqActions.faq.request.faqSite());\n }, [dispatch]);\n\n const hasFaq = useCallback(() => faqQuestions\n && faqQuestions.mainSupportPage.loaded\n && faqQuestions.financialSupportPage.loaded\n && faqQuestions.dnsSupportPage.loaded\n && faqQuestions.mailSupportPage.loaded\n && faqQuestions.siteSupportPage.loaded,\n [faqQuestions]);\n\n const filterLinks = useCallback(() => {\n if (hasFaq()) {\n const activeOption = [...filterOptions].find(option => option.checked);\n\n if (activeOption.id === 'main') {\n setFilteredLinks(faqQuestions.mainSupportPage.questions);\n }\n if (activeOption.id === 'financial') {\n setFilteredLinks(faqQuestions.financialSupportPage.questions);\n }\n if (activeOption.id === 'domain') {\n setFilteredLinks(faqQuestions.dnsSupportPage.questions);\n }\n if (activeOption.id === 'mail') {\n setFilteredLinks(faqQuestions.mailSupportPage.questions);\n }\n if (activeOption.id === 'site') {\n setFilteredLinks(faqQuestions.siteSupportPage.questions);\n }\n }\n }, [filterOptions, setFilteredLinks, faqQuestions, hasFaq]);\n\n const setFaq = useCallback(() => {\n filterLinks();\n }, [filterLinks]);\n\n const useHelpLinksData = {\n defaultFilterChips,\n setFilterOptions,\n filterOptions,\n filteredLinks,\n filterLinks,\n requestFaq,\n faqQuestions,\n setFaq,\n };\n\n return useHelpLinksData;\n};\n\nexport default useHelpLinks;\n","import styled, { css } from 'styled-components';\n\nconst mobileBreakpoint = 'max-width:1122px';\nconst extraSmallMobileBreakpoint = 'max-width:1122px';\n\nexport const SanppyImage = styled.img`\n bottom: -38px;\n left: 78px;\n position: absolute;\n\n @media(${mobileBreakpoint}) {\n display: none;\n visibility: hidden;\n }\n`;\n\nexport const DescriptionWrapper = styled.div`\n display: flex;\n overflow: hidden;\n position: relative;\n\n svg{\n flex: 0 0 45px;\n @media(${extraSmallMobileBreakpoint}){\n display: none;\n visibility: none;\n }\n }\n\n @media(${extraSmallMobileBreakpoint}){\n flex-direction: column;\n padding: 8px\n }\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n font-family: ${theme.v2.font.family.primary};\n margin: 8px 0px 8px 182px;\n\n strong {\n color: ${theme.v2.colors.brand.primaryMedium};\n font-weight: ${theme.v2.font.weights.medium};\n }\n\n @media(${mobileBreakpoint}) {\n margin: 8px 0px 8px 16px;\n }\n\n @media(${extraSmallMobileBreakpoint}){\n margin: 0px 0px 8px 0px;\n }\n `}\n`;\n","import React from 'react';\nimport * as Styles from './LinksDescription.styles';\nimport SnappySvg from '@/media/ticket/snappy-hero.svg';\nimport { IconTriangleDetail } from 'gatorcomponents';\n\nexport const LinksDescription = ({\n ticketLocale,\n}) => (\n \n \n {ticketLocale.listPageFaq.listDescription}\n \n \n);\n","import styled, { css, keyframes } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme, showEmbed, smallEmbed }) => css`\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n justify-content: center;\n position: fixed;\n right: 62px;\n bottom: 140px;\n z-index: 130;\n\n @media (max-width: ${theme.v2.breakpoints.lg}){\n right: ${showEmbed && '30px'};\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n gap: 0;\n top: ${smallEmbed ? 'auto' : 0};\n bottom: ${smallEmbed ? '80px' : 'auto'};\n right: 0;\n }\n \n\n `}\n`;\n\nexport const ClassButtonWrapper = styled.div` ${({\n theme, asBanner, hasActiveChat, chatbot,\n}) => {\n const variant = {\n true: {\n position: 'unset',\n width: '100%',\n borderRadius: '4px',\n justifyContent: 'flex-start',\n marginBottom: '8px',\n backgroundColor: theme.v2.colors.brand.menuPrimaryDark,\n minHeight: '88px',\n minWidth: '100%',\n maxWidth: 'unset',\n },\n false: {\n position: 'fixed',\n width: 'fit-content',\n borderRadius: '50vh',\n justifyContent: 'flex-start',\n marginBottom: '0px',\n backgroundColor: theme.v2.colors.brand.menuPrimaryDark,\n minWidth: 'unset',\n maxWidth: '141px',\n },\n positionRight: hasActiveChat ? '210px' : '150px',\n\n };\n\n\n return css`\n bottom: 44px;\n position: ${variant[asBanner].position};\n right: ${hasActiveChat || chatbot ? variant.positionRight : '62px'};\n z-index: 1000;\n\n //it's a POC, some standards will be disrespected for now\n > button {\n background-color: ${variant[asBanner].backgroundColor};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n padding-right: 35px;\n padding-left: 12px;\n padding-top: 9px;\n padding-bottom: 9px;\n border-radius: ${variant[asBanner].borderRadius};\n min-height: ${variant[asBanner].minHeight};\n width: ${variant[asBanner].width};\n justify-content: ${variant[asBanner].justifyContent};\n margin-bottom: ${variant[asBanner].marginBottom};\n gap: 8px;\n\n strong {\n font-weight: ${theme.v2.font.weights.bold};\n }\n\n ${asBanner && css`\n &:hover {\n background-color: ${variant[asBanner].backgroundColor};\n }\n `}\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n bottom: 87px;\n max-width: ${variant[asBanner].maxWidth};\n right: 12px; \n min-width: ${variant[asBanner].minWidth};\n\n > button {\n display: flex;\n flex-wrap: wrap;\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.medium};\n justify-content: start;\n border-radius: 8px;\n padding: 8px;\n text-align: start;\n gap: 0;\n }\n }\n `;\n}}\n`;\n\nexport const CloseButton = styled.div`\n ${({ theme, hasActiveChat, chatbot }) => {\n const positionVariant = hasActiveChat ? '218px' : '158px';\n\n return css`\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n bottom: 58px;\n height: 25px;\n position: fixed;\n right: ${hasActiveChat || chatbot ? positionVariant : '70px'};\n width: 25px;\n z-index: 1000;\n\n //it's a POC, some standards will be disrespected for now\n button {\n border-radius: 50%;\n }\n\n svg {\n fill: ${theme.v2.colors.neutral.highPure};\n\n &:hover {\n fill: ${theme.v2.colors.neutral.highPure};\n }\n }\n\n &:hover {\n background-color ${theme.v2.colors.brand.primaryBlue};\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n bottom: 130px;\n max-width: 141px;\n right: 15px; \n }\n `;\n }}\n`;\n\nexport const Frame = styled.div`\n ${({ theme, isChat, smallEmbed }) => css`\n iframe {\n height: 520px;\n width: ${isChat ? '380px' : '916px'}; \n }\n \n @media (max-width: 1400px){\n iframe {\n height: 400px;\n width: ${isChat ? '300px' : '800px'}; \n }\n }\n\n iframe {\n height: ${smallEmbed && '240px'}; \n width: ${smallEmbed && '420px'}; \n }\n\n @media (max-width: 1170px){\n margin-bottom: -4px;\n width: 100%;\n\n iframe {\n height: ${isChat ? '320px' : '300px'};\n width: 100%;\n }\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n margin-bottom: -4px;\n width: 100%;\n\n iframe {\n height: ${isChat ? '420px' : '200px'};\n width: 100%;\n }\n }\n `}\n`;\n\nexport const ClassTag = styled.div`\n ${({ theme, isLive }) => css`\n align-items: center;\n background-color: ${isLive ? theme.v2.colors.feedback.problemLight : theme.v2.colors.feedback.attentionPure};\n border-radius: 15px;\n color: ${isLive ? theme.v2.colors.neutral.highPure : theme.v2.colors.brand.menuPrimaryDark};\n display: flex;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.bold};\n gap: 4px;\n min-height: 32px;\n justify-content: center;\n padding-left: 10px;\n padding-right: 10px;\n word-break: break-word;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n font-size: ${theme.v2.font.sizes.xxxs};\n margin-bottom: 2px;\n }\n `}\n`;\n\nconst opacityAnimation = keyframes`\n 0% {\n opacity: 0.0;\n }\n`;\n\nconst pulseAnimation = keyframes`\n 0% {\n transform: translate(-50%, -50%) scale(0);\n opacity: 1;\n }\n 70% {\n opacity: 0.0;\n transform: translate(-50%, -50%) scale(4);\n }\n to {\n transform: translate(-50%, -50%) scale(0);\n opacity: 0.0;\n }\n`;\n\nexport const Pulse = styled.i`\n ${({ theme }) => css`\n animation: ${opacityAnimation} 1s linear;\n background-color: ${theme.v2.colors.neutral.highPure};\n border-radius: 100%;\n color: transparent;\n display: inline-block;\n flex: 0 0 auto;\n height: 8px;\n margin: 0 6px;\n position: relative;\n vertical-align: 1px;\n width: 8px;\n\n &:before {\n animation: ${pulseAnimation} 2s infinite;\n border: 2px solid ${theme.v2.colors.neutral.highPure};\n border-radius: 100%;\n content: \"\";\n height: 100%;\n left: 50%;\n opacity: 1;\n position: absolute;\n top: 50%;\n transform: translate(-50%,-50%) scale(4);\n width: 100%;\n }\n `}\n`;\n\n\nexport const EmbedCloseButton = styled.div`\n ${({ theme, smallEmbed }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.brand.primaryMedium};\n border-radius: 50%;\n display: flex;\n height: 32px;\n justify-content: center;\n position: fixed;\n right: 62px;\n bottom: ${smallEmbed ? '400px' : '700px'};\n width: 32px;\n z-index: 1000;\n\n svg {\n fill: ${theme.v2.colors.neutral.highPure};\n\n &:hover {\n fill: ${theme.v2.colors.neutral.highPure};\n }\n }\n\n @media (max-width: 2000px){\n bottom: ${smallEmbed ? '400px' : '680px'};\n right: ${!smallEmbed && '62px'}\n }\n\n @media (max-width: 1400px){\n bottom: ${smallEmbed ? '400px' : '560px'};\n right: ${!smallEmbed && '62px'}\n }\n\n @media (max-width: 1170px){\n bottom: ${smallEmbed ? '456px' : '792px'}; \n right: ${!smallEmbed && '30px'}\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n bottom: ${smallEmbed ? '40px' : '185px'};\n right: ${!smallEmbed && '25px'}\n }\n `}\n`;\n\nexport const EmbedMinimizeButton = styled.div`\n ${({ theme, smallEmbed }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.brand.primaryMedium};\n border-radius: 50%;\n display: flex;\n height: 32px;\n justify-content: center;\n position: fixed;\n right: 110px;\n bottom: ${smallEmbed ? '400px' : '700px'};\n width: 32px;\n z-index: 1000;\n\n svg {\n fill: ${theme.v2.colors.neutral.highPure};\n\n &:hover {\n fill: ${theme.v2.colors.neutral.highPure};\n }\n }\n\n @media (max-width: 2000px){\n bottom: ${smallEmbed ? '400px' : '680px'}; \n right: ${!smallEmbed && '110px'}\n }\n\n @media (max-width: 1400px){\n bottom: ${smallEmbed ? '400px' : '560px'}; \n right: ${!smallEmbed && '110px'}\n }\n\n @media (max-width: 1170px){\n bottom: ${smallEmbed ? '456px' : '792px'}; \n right: ${!smallEmbed && '78px'}\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n bottom: ${smallEmbed ? '40px' : '185px'};\n right: ${!smallEmbed && '78px'}\n }\n `}\n`;\n\nexport const BannerCollumn = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n gap: 0px;\n\n strong {\n font-size: ${theme.v2.font.sizes.sm};\n }\n\n span {\n font-size: ${theme.v2.font.sizes.xs};\n }\n\n span > strong {\n font-size: ${theme.v2.font.sizes.xs};\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n margin-top: 8px;\n }\n `}\n`;\n\nexport const BannerCollumnDaily = styled.div`\n ${({ theme, fitContent }) => css`\n display: block;\n font-size: ${theme.v2.font.sizes.xs};\n gap: 0px;\n margin-left: auto;\n max-width: ${fitContent ? 'fit-content' : '198px'};\n text-align: justify;\n\n > button {\n background-color: ${theme.v2.colors.brand.primaryMedium};\n }\n \n @media (max-width: ${theme.v2.breakpoints.sm}){\n margin-left: unset;\n margin-top: 16px;\n max-width: unset;\n }\n `}\n`;\n\nexport const VimeoWrapper = styled.div` \n ${({ smallEmbed }) => css`\n padding: 177.78% 0 0 0;\n position: relative;\n width: ${smallEmbed ? '180px' : '360px'};\n `}\n`;\n\nexport const VimeoFrame = styled.iframe` \n position:absolute;\n top:0;\n left:0;\n width:100%;\n height:100%;\n`;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.button`\n background: transparent;\n border: none;\n cursor: pointer;\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconMinimize.style';\n\nconst IconMinimize = ({\n testId = 'icon-minimize', onClick, title, smallEmbed,\n}) => (\n \n {!smallEmbed && (\n \n \n \n \n \n \n )}\n {smallEmbed && (\n \n \n )}\n\n \n);\n\n\nexport default IconMinimize;\n","import styled, { css } from 'styled-components';\nimport bannerDesktop from './desktop.png';\nimport bannerMobile from './mobile.png';\n\nexport const Content = styled.div`\n ${({ theme, bannerImage }) => css`\n background-image: url(${bannerImage || bannerDesktop});\n background-size: cover;\n color: ${theme.v2.colors.neutral.lowPure};\n height: 444px;\n width: 800px;\n cursor: pointer;\n\n #tag {\n margin-left: 47px;\n margin-top: 23px;\n\n #dot {\n top: 35px;\n left: 67px;\n }\n }\n\n #close-button {\n position: relative;\n\n button {\n position: absolute;\n top: 30px;\n left: 962px;\n }\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n background-image: url(${bannerImage || bannerMobile});\n background-repeat: no-repeat;\n background-size: contain;\n height: 100%;\n width: auto;\n\n #tag {\n #dot {\n top: 29px;\n left: 61px;\n }\n }\n }\n `}\n`;\n\nexport const NotShowAgain = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.white.primary};\n border-radius: 24px;\n display: flex;\n position: absolute;\n right: 45px;\n top: 15px;\n `}\n`;\n","import React from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport * as Styles from './LiveModal.styles';\nimport { Button } from 'gatorcomponents';\n\nconst LiveModal = ({\n children, showLive, onClose, bannerImage, notShowAgain, notShowAgainLabel,\n}) => (\n \n \n \n \n {children}\n \n \n);\nexport default LiveModal;\n","import React, {\n useCallback, useEffect, useRef, useState,\n} from 'react';\nimport * as Styles from './VideoClasses.styles';\nimport useLocale from '@/hooks/useLocale';\nimport { Button, IconButton } from 'gatorcomponents';\nimport withErrorBoundary from '@/utils/errorBoundary/errorBoundary.jsx';\nimport { IconMinimize } from './components/IconMinimize';\nimport { useFeatureIsOn, useFeatureValue } from '@growthbook/growthbook-react';\nimport { CHARLIE_VIDEO_CLASSES, LIVE_BANNER } from '@/config/GrowthBook/constants';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { LiveModal } from './components/LiveModal';\nimport { videoClassesActions } from '@/redux/modules';\nimport { useTrack } from '@/utils/Tracker/tracker';\nimport ReactPlayer from 'react-player/lazy';\nimport { useResize } from '@/hooks/useResize';\nimport {\n differenceInDays, format, parse,\n} from 'date-fns';\n\nconst ClassTag = ({ label, isLive }) => (\n \n {isLive && (\n \n);\n\n// THIS IS A POC, SOME PATTERS AND METHODS HERE ARE NOT IDEAL\nconst VideoClasses = ({ asBanner = false }) => {\n const [showVideoClasses, setShowVideoClasses] = useState(true);\n const [showModal, setShowModal] = useState(true);\n const summary = useSelector(state => state.summary);\n const { jwt: jwtToken } = useSelector(state => state.auth);\n const { embedDisplayed, liveData } = useSelector(state => state.videoClassesReducer);\n const { hasActiveChat, screenToShowInPreChat } = useSelector(state => state.preChat);\n const {\n liveID, liveTitle, liveTag, enabledBanner, enableChat, bannerImage,\n } = liveData;\n const [embedSize, setEmbedSize] = useState('small');\n const [startWatchingTime, setStartWatchingTime] = useState(null);\n\n const showVideoClass = useFeatureIsOn(CHARLIE_VIDEO_CLASSES);\n const daysToHideBanner = useFeatureValue(LIVE_BANNER);\n\n const windowRect = useResize();\n const { width } = windowRect;\n const isDesktop = width > 600;\n\n const { sendAnalytics } = useTrack();\n const dispatch = useDispatch();\n const { videoClasses: videoClassesLocale } = useLocale();\n\n const playerRef = useRef(null);\n\n const isSmallEmbed = embedSize === 'small';\n\n const liveUrl = `https://www.youtube.com/embed/${liveID}?autoplay=1`;\n const chatUrl = `https://www.youtube.com/live_chat?is_popout=1&v=${liveID}&embed_domain=${window.location.hostname}`;\n\n const getLiveData = useCallback(() => {\n if (jwtToken && summary.datecreated) {\n dispatch(videoClassesActions.live.request());\n }\n }, [dispatch, jwtToken, summary.datecreated]);\n\n\n const shouldShowLiveBanner = useCallback(async () => {\n const doNotShowLiveModalDate = localStorage.getItem('doNotShowLiveModalForPeriod');\n const timeSinceDoNotShow = differenceInDays(parse(doNotShowLiveModalDate, 'dd-MM-yyyy', new Date()), new Date()) * -1;\n const doNotShowLiveModal = doNotShowLiveModalDate && daysToHideBanner && timeSinceDoNotShow < daysToHideBanner;\n\n if (doNotShowLiveModal) {\n setShowModal(false);\n dispatch(videoClassesActions.modal.setModalViewStatus(false));\n dispatch(videoClassesActions.embed.setEmbedViewStatus(false));\n }\n }, [dispatch, daysToHideBanner]);\n\n useEffect(() => {\n getLiveData();\n daysToHideBanner && shouldShowLiveBanner();\n }, [getLiveData, dispatch, shouldShowLiveBanner, daysToHideBanner]);\n\n const trackPlay = () => {\n const eventData = {\n campaign: 'Live Youtube',\n action: 'Video play',\n label: 'Play Live',\n };\n sendAnalytics(eventData);\n\n if (playerRef.current) {\n setStartWatchingTime(playerRef.current.getCurrentTime());\n }\n };\n\n const trackPause = () => {\n if (startWatchingTime) {\n const timeWatching = Math.round(playerRef.current.getCurrentTime() - startWatchingTime);\n\n const eventData = {\n campaign: 'Live Youtube',\n action: 'Video pause',\n label: timeWatching,\n };\n\n sendAnalytics(eventData);\n setStartWatchingTime(null);\n }\n };\n\n window.onbeforeunload = () => {\n if (embedDisplayed && liveID) {\n trackPause();\n return videoClassesLocale.close;\n }\n };\n\n const handleShowEmbed = () => {\n if (!embedDisplayed) {\n const eventData = {\n campaign: 'Live Youtube',\n action: liveID ? 'Live Click' : 'Playlist Click',\n label: liveID ? 'Acesso Live Youtube' : 'Acesso Playlist Youtube',\n };\n sendAnalytics(eventData);\n }\n if (embedDisplayed) {\n const eventData = {\n campaign: 'Live Youtube',\n action: liveID ? 'Live Click' : 'Playlist Click',\n label: liveID ? 'Fechou Live Youtube' : 'Fechou Playlist Youtube',\n };\n sendAnalytics(eventData);\n trackPause();\n }\n if (isSmallEmbed) {\n setEmbedSize('large');\n }\n dispatch(videoClassesActions.embed.setEmbedViewStatus(!embedDisplayed));\n };\n\n const showLiveWithoutClick = useCallback(() => {\n const doNotShowLiveModalDate = localStorage.getItem('doNotShowLiveModalForPeriod');\n const timeSinceDoNotShow = differenceInDays(parse(doNotShowLiveModalDate, 'dd-MM-yyyy', new Date()), new Date()) * -1;\n const doNotShowLiveModal = timeSinceDoNotShow && daysToHideBanner && timeSinceDoNotShow < daysToHideBanner;\n\n if (!asBanner && liveID && enabledBanner && !doNotShowLiveModal) {\n setShowModal(true);\n dispatch(videoClassesActions.modal.setModalViewStatus(true));\n }\n if (!asBanner && !liveID) {\n setShowModal(false);\n dispatch(videoClassesActions.modal.setModalViewStatus(false));\n setEmbedSize('small');\n }\n }, [asBanner, liveID, dispatch, enabledBanner, daysToHideBanner]);\n\n useEffect(() => {\n showLiveWithoutClick();\n }, [showLiveWithoutClick]);\n\n const handleResizeEmbed = () => setEmbedSize(isSmallEmbed ? 'large' : 'small');\n\n const hideVideoClasses = () => {\n const eventData = {\n campaign: 'Live Youtube',\n action: liveID ? 'Click Botão Live' : 'Click Botão Playlist',\n label: liveID ? 'Oculta Botão Live Youtube' : 'Oculta Botão Playlist Youtube',\n };\n sendAnalytics(eventData);\n setShowVideoClasses(false);\n };\n\n const hideModal = () => {\n const eventData = {\n campaign: 'Live Youtube',\n action: 'Click Modal Live',\n label: 'Oculta Modal Live Youtube',\n };\n sendAnalytics(eventData);\n setShowModal(false);\n dispatch(videoClassesActions.modal.setModalViewStatus(false));\n };\n\n const showEmbedFromModal = () => {\n const eventData = {\n campaign: 'Live Youtube',\n action: 'Click Modal Live',\n label: 'Mostrar Live Youtube',\n };\n sendAnalytics(eventData);\n setShowModal(false);\n dispatch(videoClassesActions.modal.setModalViewStatus(false));\n liveID ? handleResizeEmbed() : handleShowEmbed();\n };\n\n const neverShowModalAgain = () => {\n localStorage.setItem('doNotShowLiveModalForPeriod', format(Date.now(), 'dd-MM-yyyy'));\n setShowModal(false);\n dispatch(videoClassesActions.modal.setModalViewStatus(false));\n dispatch(videoClassesActions.embed.setEmbedViewStatus(false));\n };\n\n const mountLabel = () => {\n if (asBanner && liveID) {\n return (\n <>\n \n {liveTitle} \n {videoClassesLocale.bannerDescription} \n \n \n {videoClassesLocale.daily(isDesktop)}\n \n \n );\n }\n\n if (liveID) {\n return {liveTitle} ;\n }\n };\n\n const renderCta = () => (\n <>\n \n \n \n \n \n );\n\n const renderIframe = () => (\n \n \n \n \n \n\n {liveID && (\n \n \n )}\n\n {liveID && enableChat && embedSize === 'large' && (\n \n \n \n )}\n \n );\n\n if (!showVideoClass || !showVideoClasses || !liveID) return <>;\n\n if (!embedDisplayed) {\n return (\n renderCta()\n );\n }\n\n return (\n <>\n {!asBanner && enabledBanner && showModal && liveID && (\n \n
\n
\n \n {ticketLocale.underMaintenance}\n \n )\n : (\n <>\n \n \n\n \n \n \n \n\n {(filteredTickets && filteredTickets.length < totalTickets) && (\n \n \n )}\n \n )\n }\n\n \n \n\n \n \n {filteredLinks.map(questions => (\n \n \n\n \n
\n
{t('notFound.title')} \n
{children}
\n
handleRedirect()}\n >\n \n \n \n \n
\n
{course.name} \n
\n
\n {`${course.totalVideos} ${t('courses.classes')}`} \n
\n
\n \n {formatSecondsToMinutes(course.duration)}\n {' '}\n {t('courses.minutes')}\n \n
\n
\n {(firstItem && !isMobile) && (\n
{course.description} \n )}\n {courseWatched &&
{t('courses.watched')} }\n
\n {haveVideos && (\n
\n
\n {t('courses.seeClasses')}\n \n
\n \n );\n};\n\nCourseItem.propTypes = {\n course: PropTypes.object.isRequired,\n index: PropTypes.number.isRequired,\n animationId: PropTypes.string.isRequired,\n userProgress: PropTypes.object.isRequired,\n};\n\nexport default withI18n()(withStyles(styles)(CourseItem));\n","const styles = () => ({\n icon: {\n width: 437,\n height: 454,\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles, SvgIcon } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nconst BlueDoodle = ({ classes, className }) => (\n \n \n \n \n);\n\nexport default withStyles(styles)(BlueDoodle);\n","const styles = () => ({\n icon: {\n width: 217,\n height: 300,\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles, SvgIcon } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nconst SnappyDefault = ({ classes, className }) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default withStyles(styles)(SnappyDefault);\n","import { SET_CRUMBS, SET_DYNAMIC_BREADCRUMBS_TITLE } from './actionsTypes';\n\n\nexport const setBreadCrumb = crumbs => ({\n type: SET_CRUMBS,\n crumbs,\n});\n\nexport const setDynamicBreadCrumbTitles = data => ({\n type: SET_DYNAMIC_BREADCRUMBS_TITLE,\n data,\n});\n","import shortid from 'shortid';\nimport { CALL_API } from '@/middleware/api';\nimport { VIMEO_URL_ALBUMS, API_URL_VIMEO, COURSES_VIEWS_URL } from '@/config/api';\nimport { COUNTRY } from '@/config/index';\nimport { replaceAccents, replaceSpaceForHyphen } from '@/utils/Validators/validation';\nimport { setDynamicBreadCrumbTitles } from '@/redux/actions/breadCrumbs';\nimport { isEnvironmentCountry } from '@/utils/Application/environmentInfo';\nimport {\n REQUEST_VIMEO_SHOWCASES, RECEIVE_VIMEO_SHOWCASES, ERROR_VIMEO_SHOWCASES, REQUEST_TRACE_COURSE_ACCESS,\n REQUEST_SHOWCASE_VIDEOS, ERROR_SHOWCASE_VIDEOS, RECEIVE_SHOWCASE_VIDEOS, RECEIVE_TRACE_COURSE_ACCESS,\n ERROR_TRACE_COURSE_ACCESS,\n} from './actionsTypes';\n\n\nexport const traceCourseAccess = data => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: COURSES_VIEWS_URL,\n body: data,\n method: 'POST',\n actionTypes: {\n request: () => ({ type: REQUEST_TRACE_COURSE_ACCESS }),\n success: () => ({ type: RECEIVE_TRACE_COURSE_ACCESS }),\n error: () => ({ type: ERROR_TRACE_COURSE_ACCESS }),\n },\n },\n});\n\nconst extractModuleTag = (videos) => {\n const handleModules = [];\n videos.forEach((video) => {\n if (video.tags.length > 0) {\n video.tags.forEach((tagItem) => {\n if (tagItem.tag.toLowerCase() !== COUNTRY && !handleModules.includes(tagItem.tag)) {\n handleModules.push(tagItem.tag);\n }\n });\n }\n });\n return handleModules;\n};\n\nconst getTagBrand = (tags, getTag) => {\n const checkTag = obj => obj.tag === getTag;\n return tags.some(checkTag);\n};\n\nconst getVideosDuration = videos => videos.reduce((acc, video) => acc + video.duration, 0);\n\nconst extractVideosByModule = (videos, courseKeyName) => {\n const extractedModules = extractModuleTag(videos);\n const modules = [];\n extractedModules.forEach((moduleName) => {\n const videosByModules = videos.filter((item) => {\n if (item.tags.length > 0 && getTagBrand(item.tags, moduleName)) {\n const handleVideoItem = item;\n handleVideoItem.id = shortid.generate();\n handleVideoItem.moduleKeyName = replaceAccents(replaceSpaceForHyphen(moduleName)).toLowerCase();\n handleVideoItem.courseKeyName = courseKeyName;\n return handleVideoItem;\n }\n return null;\n });\n\n const handleModuleWithVideos = {\n id: shortid.generate(),\n name: moduleName,\n keyName: replaceAccents(replaceSpaceForHyphen(moduleName)).toLowerCase(),\n total: videosByModules.length,\n duration: getVideosDuration(videosByModules),\n videos: videosByModules,\n };\n\n modules.push(handleModuleWithVideos);\n });\n return modules;\n};\n\nconst sanitizeReceivedShowcasesVideos = (drawData) => {\n const {\n uri,\n name,\n description,\n link,\n duration,\n width,\n height,\n pictures,\n tags,\n } = drawData;\n\n return {\n uri,\n name,\n description,\n link,\n duration,\n width,\n height,\n pictures,\n tags,\n };\n};\n\nconst receiveShowcaseVideos = (videosFromVimeo, courseId, courseKeyName) => (dispatch, getState) => {\n const sanitizedVideos = videosFromVimeo.map(video => sanitizeReceivedShowcasesVideos(video));\n const handleCourses = getState().videos.courses;\n const getVideosByModules = extractVideosByModule(sanitizedVideos, courseKeyName);\n\n const newCourses = handleCourses.map((item) => {\n const handleItem = item;\n if (handleItem.id === courseId) {\n handleItem.modules = getVideosByModules;\n handleItem.duration = getVideosDuration(sanitizedVideos);\n handleItem.keyName = replaceAccents(replaceSpaceForHyphen(handleItem.name)).toLowerCase();\n }\n return handleItem;\n });\n\n return dispatch({\n type: RECEIVE_SHOWCASE_VIDEOS,\n data: newCourses,\n });\n};\n\nexport const getVideosFromShowcase = (url, courseId, courseKeyName) => ({\n [CALL_API]: {\n authorizationType: 'vimeo',\n endpoint: `${API_URL_VIMEO}${url}?direction=asc`,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_SHOWCASE_VIDEOS }),\n success: response => receiveShowcaseVideos(response.data, courseId, courseKeyName),\n error: () => ({ type: ERROR_SHOWCASE_VIDEOS }),\n },\n },\n});\n\nconst sanitizeReceivedVimeoShowCases = (drawData) => {\n const {\n name,\n description,\n link,\n duration,\n pictures,\n } = drawData;\n\n const videosUri = drawData.metadata.connections.videos.uri;\n const totalVideos = drawData.metadata.connections.videos.total;\n\n return {\n name,\n description,\n link,\n duration,\n pictures,\n videosUri,\n totalVideos,\n };\n};\n\nconst filterVimeoShowCasesByCountry = (showCase) => {\n const handleShowCase = showCase;\n const { name: showCaseName } = handleShowCase;\n const brand = isEnvironmentCountry('br') ? '_[$BR]' : '_[$ES]';\n\n if (!showCaseName.includes('_')) {\n return showCase;\n }\n\n if (showCaseName.includes(brand)) {\n handleShowCase.name = showCaseName.replace(brand, '');\n return handleShowCase;\n }\n\n return false;\n};\n\nconst receiveVimeoShowcases = data => (dispatch) => {\n const countryFilteredData = data.filter(filterVimeoShowCasesByCountry);\n const dynamicBreadCrumbs = [];\n\n const handleData = countryFilteredData.map((item) => {\n const handleItem = sanitizeReceivedVimeoShowCases(item);\n handleItem.id = shortid.generate();\n return handleItem;\n });\n\n dispatch({\n type: RECEIVE_VIMEO_SHOWCASES,\n data: handleData,\n });\n\n\n handleData.forEach((course) => {\n const courseKeyName = replaceAccents(replaceSpaceForHyphen(course.name)).toLowerCase();\n dynamicBreadCrumbs.push({\n urlParam: courseKeyName,\n title: course.name,\n });\n dispatch(getVideosFromShowcase(course.videosUri, course.id, courseKeyName));\n });\n\n dispatch(setDynamicBreadCrumbTitles(dynamicBreadCrumbs));\n};\n\nexport const getVimeoShowcases = () => ({\n [CALL_API]: {\n authorizationType: 'vimeo',\n endpoint: VIMEO_URL_ALBUMS,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_VIMEO_SHOWCASES }),\n success: response => receiveVimeoShowcases(response.data),\n error: () => ({ type: ERROR_VIMEO_SHOWCASES }),\n },\n },\n});\n","import { COUNTRY } from '@/config/index';\n\n\nexport const isEnvironmentCountry = country => COUNTRY.toLowerCase() === country;\n","import Dexie from 'dexie';\n\nconst db = new Dexie('CollabCourseDB');\n\ndb.version(1).stores({\n progress: 'userId, progress',\n});\n\nexport default db;\n","/* eslint-disable no-console */\nimport db from './initDB';\n\nexport const indexedDBGetCourseByUserId = async (id) => {\n try {\n const query = await db.progress\n .where({\n userId: id,\n })\n .first()\n .catch(error => console.error(error));\n\n return query || {};\n } catch (error) {\n console.error(error);\n return false;\n }\n};\n\nexport const indexedDBPutCourseProgress = async (data) => {\n try {\n await db.progress.put(data)\n .catch(error => console.error(error));\n\n return data;\n } catch (error) {\n console.error(error);\n return false;\n }\n};\n","export const checkoutProductAdapter = (response) => {\n const isProductsArray = response && response.data && response.data.products;\n\n if (isProductsArray) {\n const product = response && response.data && response.data.products && response.data.products[0];\n const tld = response && response.data && response.data.tld;\n const newData = {\n product,\n tld,\n };\n\n return {\n data: newData,\n };\n }\n\n return response;\n};\n","import { CALL_API } from '@/middleware/api';\nimport {\n ACADEMY_PASS_COURSES,\n ACADEMY_PASS_TOKENS,\n ACADEMY_PASS_HML_PAYMENT_METHOD,\n ACADEMY_PASS_HML_CHECKOUT_PRODUCT,\n ACADEMY_PASS_BUY_FAST_CHECKOUT,\n ACADEMY_PASS_DETAILS,\n ACADEMY_PASS_FILTERED_COURSES,\n} from '@/config/api';\nimport { config, COUNTRY } from '@/config';\nimport {\n REQUEST_ACADEMY_PASS_COURSES_LIST,\n RECEIVE_ACADEMY_PASS_COURSES_LIST,\n ABORT_ACADEMY_PASS_COURSES_LIST,\n ERROR_ACADEMY_PASS_COURSES_LIST,\n REQUEST_ACADEMY_PASS_FILTERED_COURSES_LIST,\n RECEIVE_ACADEMY_PASS_FILTERED_COURSES_LIST,\n ABORT_ACADEMY_PASS_FILTERED_COURSES_LIST,\n ERROR_ACADEMY_PASS_FILTERED_COURSES_LIST,\n REQUEST_ACADEMY_PASS_TOKENS,\n RECEIVE_ACADEMY_PASS_TOKENS,\n ABORT_ACADEMY_PASS_TOKENS,\n ERROR_ACADEMY_PASS_TOKENS,\n REQUEST_ACADEMY_PASS_PAYMENT_METHOD,\n RECEIVE_ACADEMY_PASS_PAYMENT_METHOD,\n ABORT_ACADEMY_PASS_PAYMENT_METHOD,\n ERROR_ACADEMY_PASS_PAYMENT_METHOD,\n REQUEST_ACADEMY_PASS_PRICE,\n RECEIVE_ACADEMY_PASS_PRICE,\n ABORT_ACADEMY_PASS_PRICE,\n ERROR_ACADEMY_PASS_PRICE,\n REQUEST_ACADEMY_PASS_DETAILS,\n RECEIVE_ACADEMY_PASS_DETAILS,\n ABORT_ACADEMY_PASS_DETAILS,\n ERROR_ACADEMY_PASS_DETAILS,\n REQUEST_ACADEMY_PASS_BUY_FAST_CHECKOUT,\n RECEIVE_ACADEMY_PASS_BUY_FAST_CHECKOUT,\n ABORT_ACADEMY_PASS_BUY_FAST_CHECKOUT,\n ERROR_ACADEMY_PASS_BUY_FAST_CHECKOUT,\n} from './actionsTypes';\nimport { checkoutProductAdapter } from '@/utils/Formatters/checkoutProductAdapter';\n\nexport const getCourses = () => (dispatch, getState) => {\n const { loadedDate } = getState().academyPass.courses;\n if (loadedDate) {\n if ((Date.now() - loadedDate) > config.CACHE_TIME) {\n return Promise.resolve(dispatch({ type: ABORT_ACADEMY_PASS_COURSES_LIST }));\n }\n }\n\n return dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: ACADEMY_PASS_COURSES,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_ACADEMY_PASS_COURSES_LIST }),\n success: response => ({ type: RECEIVE_ACADEMY_PASS_COURSES_LIST, data: response }),\n error: () => ({ type: ERROR_ACADEMY_PASS_COURSES_LIST }),\n },\n },\n });\n};\n\nexport const getFilteredCourses = filter => (dispatch, getState) => {\n const { loadedDate } = getState().academyPass.courses;\n if (loadedDate) {\n if ((Date.now() - loadedDate) > config.CACHE_TIME) {\n return Promise.resolve(dispatch({ type: ABORT_ACADEMY_PASS_FILTERED_COURSES_LIST }));\n }\n }\n\n return dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: ACADEMY_PASS_FILTERED_COURSES(filter),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_ACADEMY_PASS_FILTERED_COURSES_LIST }),\n success: response => ({ type: RECEIVE_ACADEMY_PASS_FILTERED_COURSES_LIST, data: response }),\n error: () => ({ type: ERROR_ACADEMY_PASS_FILTERED_COURSES_LIST }),\n },\n },\n });\n};\n\nexport const getTokens = () => (dispatch, getState) => {\n const { loadedDate } = getState().academyPass.tokens;\n if ((Date.now() - loadedDate) < config.CACHE_TIME) {\n return Promise.resolve(dispatch({ type: ABORT_ACADEMY_PASS_TOKENS }));\n }\n\n return dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: ACADEMY_PASS_TOKENS,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_ACADEMY_PASS_TOKENS }),\n success: response => ({ type: RECEIVE_ACADEMY_PASS_TOKENS, data: response }),\n error: () => ({ type: ERROR_ACADEMY_PASS_TOKENS }),\n },\n },\n });\n};\n\nexport const getPrice = () => (dispatch, getState) => {\n const { priceLoadedDate } = getState().academyPass.cta;\n if ((Date.now() - priceLoadedDate) < config.CACHE_TIME) {\n return Promise.resolve(dispatch({ type: ABORT_ACADEMY_PASS_PRICE }));\n }\n\n return dispatch({\n [CALL_API]: {\n authenticated: false,\n endpoint: ACADEMY_PASS_HML_CHECKOUT_PRODUCT,\n method: 'GET',\n customHeaders: {\n brand: COUNTRY,\n Accept: 'application/json, text/plain, */*',\n },\n actionTypes: {\n request: () => ({ type: REQUEST_ACADEMY_PASS_PRICE }),\n success: response => ({ type: RECEIVE_ACADEMY_PASS_PRICE, data: checkoutProductAdapter(response) }),\n error: () => ({ type: ERROR_ACADEMY_PASS_PRICE }),\n },\n },\n });\n};\n\nexport const getPaymentMethods = () => (dispatch, getState) => {\n const { paymentLoadedDate } = getState().academyPass.cta;\n if ((Date.now() - paymentLoadedDate) < config.CACHE_TIME) {\n return Promise.resolve(dispatch({ type: ABORT_ACADEMY_PASS_PAYMENT_METHOD }));\n }\n\n return dispatch({\n [CALL_API]: {\n authenticated: false,\n endpoint: ACADEMY_PASS_HML_PAYMENT_METHOD,\n method: 'GET',\n customHeaders: {\n brand: COUNTRY,\n },\n actionTypes: {\n request: () => ({ type: REQUEST_ACADEMY_PASS_PAYMENT_METHOD }),\n success: response => ({ type: RECEIVE_ACADEMY_PASS_PAYMENT_METHOD, data: response }),\n error: () => ({ type: ERROR_ACADEMY_PASS_PAYMENT_METHOD }),\n },\n },\n });\n};\n\n\nexport const buyAcademyPass = ({\n planId, paymentMethod, paymentLocation,\n}) => async (dispatch, getState) => {\n const { isLoading } = getState().academyPass.buyFastcheckout;\n\n if (isLoading) {\n return Promise.resolve(dispatch({ type: ABORT_ACADEMY_PASS_BUY_FAST_CHECKOUT }));\n }\n\n let cntxBypaymentLocation = '';\n\n if (paymentLocation === 'header') {\n cntxBypaymentLocation = 'hg_akdmy_landing_page_cta_top';\n }\n if (paymentLocation === 'footer') {\n cntxBypaymentLocation = 'hg_akdmy_landing_page_cta_bottom';\n }\n\n const bodyObject = {\n products: [\n {\n id: planId,\n type: 'product',\n domain: 'fims.com',\n quantity: 1,\n cycle: 'monthly',\n },\n ],\n payment_method: paymentMethod,\n offer_contexts: [\n cntxBypaymentLocation,\n ],\n };\n\n return dispatch({\n [CALL_API]: {\n endpoint: ACADEMY_PASS_BUY_FAST_CHECKOUT,\n method: 'POST',\n body: bodyObject,\n actionTypes: {\n request: () => ({ type: REQUEST_ACADEMY_PASS_BUY_FAST_CHECKOUT }),\n success: response => ({ type: RECEIVE_ACADEMY_PASS_BUY_FAST_CHECKOUT, data: { ...response, paymentMethod, invoice_id: response.data.invoice_id } }),\n error: () => ({ type: ERROR_ACADEMY_PASS_BUY_FAST_CHECKOUT }),\n },\n },\n });\n};\n\nexport const getDetails = () => (dispatch, getState) => {\n const { isLoading } = getState().academyPass.detail;\n if (isLoading) {\n return Promise.resolve(dispatch({ type: ABORT_ACADEMY_PASS_DETAILS }));\n }\n return dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: ACADEMY_PASS_DETAILS,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_ACADEMY_PASS_DETAILS }),\n success: response => ({ type: RECEIVE_ACADEMY_PASS_DETAILS, data: response }),\n error: () => ({ type: ERROR_ACADEMY_PASS_DETAILS }),\n },\n },\n });\n};\n","export const tagList = [\n {\n id: 0, label: 'Todos', value: 'all', checked: true,\n },\n {\n id: 3, label: 'Melhores avaliados', value: 'rating', checked: false,\n },\n];\n","import { locale } from '@/utils/locale';\n\nexport const ACADEMY_PASS_PRODUCT_ID = {\n br: 427,\n};\n\nexport const ACADEMY_PASS_TRIAL_PRODUCT_ID = {\n br: 431,\n};\n\nexport const ACADEMY_PASS_SUBJECTS = [\n {\n id: 'option-design', label: locale('academypass.filter.subjectList.design'), value: 'design', checked: false,\n },\n {\n id: 'option-domain', label: locale('academypass.filter.subjectList.domain'), value: 'domain', checked: false,\n },\n {\n id: 'option-email', label: locale('academypass.filter.subjectList.email'), value: 'email', checked: false,\n },\n {\n id: 'option-ecommerce', label: locale('academypass.filter.subjectList.ecommerce'), value: 'ecommerce', checked: false,\n },\n {\n id: 'option-site_hosting', label: locale('academypass.filter.subjectList.site_hosting'), value: 'site_hosting', checked: false,\n },\n {\n id: 'option-digital_mkt', label: locale('academypass.filter.subjectList.digital_mkt'), value: 'digital_mkt', checked: false,\n },\n {\n id: 'option-digital_business', label: locale('academypass.filter.subjectList.digital_business'), value: 'digital_business', checked: false,\n },\n {\n id: 'option-programming', label: locale('academypass.filter.subjectList.programming'), value: 'programming', checked: false,\n },\n {\n id: 'option-social_media', label: locale('academypass.filter.subjectList.social_media'), value: 'social_media', checked: false,\n },\n {\n id: 'option-videos', label: locale('academypass.filter.subjectList.videos'), value: 'videos', checked: false,\n },\n {\n id: 'option-wp', label: locale('academypass.filter.subjectList.wp'), value: 'wp', checked: false,\n },\n];\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { createContext, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n getCourses, getTokens, getPrice, getDetails, getPaymentMethods,\n} from '@/redux/actions/academyPass';\nimport { tagList } from './values';\nimport { ACADEMY_PASS_SUBJECTS } from '@/config/products/academypass';\n\nexport const AcademyPassContext = createContext();\n\nconst AcademyPassContextProvider = ({ children }) => {\n const dispatch = useDispatch();\n const academyPass = useSelector(state => state.academyPass);\n const academyPassCourses = useSelector(state => state.academyPass.courses);\n const academyPassTokens = useSelector(state => state.academyPass.tokens);\n const academyPassCta = useSelector(state => state.academyPass.cta);\n const academyPassDetail = useSelector(state => state.academyPass.detail);\n const [filteredOptions, setFilteredOptions] = useState(tagList);\n const [multiSelectOptions, setMultiSelectOptions] = useState(ACADEMY_PASS_SUBJECTS);\n const [filterTyped, setFilterTyped] = useState('');\n const [renderedCourses, setRenderedCourses] = useState([]);\n const [subjectOptions, setSubjectOptions] = useState([]);\n\n useEffect(() => {\n if (academyPassCta.price === null && (academyPassCta.isLoadingPrice === false)) {\n dispatch(getPrice());\n }\n if (academyPassCta.paymentMethods === null && (academyPassCta.isLoadingPayment === false)) {\n dispatch(getPaymentMethods());\n }\n if (academyPassDetail.data === null && academyPassDetail.isLoading === false) {\n dispatch(getDetails());\n }\n }, [academyPassCourses, academyPassTokens, academyPassCta]);\n\n const clearFilter = () => {\n const options = [...filteredOptions];\n options.map((option) => {\n const newOption = option;\n newOption.checked = false;\n return newOption;\n });\n\n options[0].checked = true;\n\n const checkOptions = [...multiSelectOptions];\n checkOptions.map((selectOption) => {\n const newSelectedOption = selectOption;\n newSelectedOption.checked = false;\n return newSelectedOption;\n });\n\n setFilteredOptions(options);\n setMultiSelectOptions(checkOptions);\n setSubjectOptions([]);\n setFilterTyped('');\n };\n\n const togglePaidOrFreeCourses = ({ options, index }) => {\n const newOptions = [...options];\n if (index === 1) {\n if (newOptions[index].checked) {\n newOptions[2].checked = false;\n }\n }\n if (index === 2) {\n if (newOptions[index].checked) {\n newOptions[1].checked = false;\n }\n }\n return newOptions;\n };\n\n const selectOptions = () => {\n const selectedOptions = multiSelectOptions\n .filter(subject => subject.checked)\n .map(subject => ({\n value: subject.value,\n label: subject.label,\n }));\n\n const newSubjectOptions = selectedOptions.length !== 0 ? selectedOptions : [];\n\n setSubjectOptions(newSubjectOptions);\n };\n\n useEffect(() => {\n if (multiSelectOptions) {\n selectOptions();\n }\n }, [multiSelectOptions]);\n\n const { coursesList } = academyPassCourses;\n\n const getOptionsValues = () => filteredOptions\n .filter(option => option.checked)\n .map(option => option.value);\n\n useEffect(() => {\n if (!coursesList) {\n dispatch(getTokens());\n dispatch(getCourses());\n }\n }, [coursesList]);\n\n useEffect(() => {\n const options = getOptionsValues();\n\n const isAllSelected = () => options.includes('all');\n const isMostRatedSelected = () => options.includes('rating');\n const isFreeSelected = course => options.includes('free') && course.isFree;\n const isPaidSelected = course => options.includes('hg_pass') && !course.isFree;\n const isSubjectsSelected = course => (subjectOptions.length === 0) || subjectOptions.find(subject => subject.label.toLowerCase() === decodeURI(course.subject).toLowerCase());\n const containTextInName = course => (filterTyped === '') || course.name.normalize().toLowerCase().includes(filterTyped.toLowerCase());\n\n if (!coursesList) {\n return;\n }\n\n const courses = coursesList\n .filter(course => isAllSelected()\n || isFreeSelected(course)\n || isPaidSelected(course)\n || isMostRatedSelected())\n .filter(course => isSubjectsSelected(course))\n .filter(course => containTextInName(course));\n\n if (isMostRatedSelected()) {\n courses.sort((courseA, courseB) => courseB.ratingAverage - courseA.ratingAverage);\n }\n\n setRenderedCourses(courses);\n }, [coursesList, filteredOptions, subjectOptions, filterTyped]);\n\n return (\n key}\n >\n {children}\n \n );\n};\n\nAcademyPassContextProvider.propTypes = {\n children: PropTypes.node,\n};\n\nAcademyPassContextProvider.defaultProps = {\n children: null,\n};\n\nexport default AcademyPassContextProvider;\n","const styles = theme => ({\n container: {\n margin: '0 40px 20px',\n [theme.breakpoints.down(960)]: {\n margin: '0 0 20px',\n },\n },\n alert: {\n padding: '13px 40px',\n display: 'flex',\n alignItems: 'center',\n },\n alertCritical: {\n backgroundColor: theme.color.valencia,\n color: theme.color.white,\n },\n alertImportant: {\n backgroundColor: theme.color.brightSun,\n color: theme.color.tundora,\n },\n icon: {\n marginRight: '20px',\n },\n message: {\n flex: 1,\n color: 'inherit',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport { withI18n } from 'react-i18next';\nimport classnames from 'classnames';\nimport { Typography, withStyles } from '@material-ui/core';\nimport { Warning, Info } from '@material-ui/icons';\n\nimport styles from './styles';\n\n\nconst AcademyPassAlertMessage = ({ classes, className }) => {\n const alerts = useSelector(state => state.academyPass.detail.data);\n if (alerts === null || alerts === undefined) {\n return null;\n }\n\n if (alerts && alerts.length === 0) {\n return null;\n }\n\n if (alerts[0].severity === undefined) {\n return null;\n }\n\n return (\n \n {alerts.map(alert => (\n
\n {alert.severity.level === 'Critical' && (\n {alert.message} \n \n
\n
\n {course.isFree ? t('academypass.card.free') : t('academypass.card.pass')}\n
\n
\n
\n
\n
\n
\n {`${course.workload ? course.workload : 0} ${t('academypass.card.minutes')}`}\n
\n
\n {courseImage()}\n \n
\n {courseTitle}\n \n {courseInfo()}\n
\n {ratingInfo(parseInt(course.ratingAverage, 10))}\n
\n {(isPaidAndActive && isPassActive) || course.isFree ? (\n
\n {t('academypass.card.watch')}\n \n ) : (\n
\n {t('academypass.card.buy')}\n \n )}\n
\n );\n};\n\nexport default withI18n()(withStyles(styles, { withTheme: true })(CourseCard));\n","const styles = theme => ({\n text: {\n color: theme.color.indigo,\n },\n wrapper: {\n padding: '0',\n position: 'relative',\n },\n cardGrid: {\n alignContent: 'flex-start',\n alignItems: 'flex-start',\n display: 'flex',\n flexWrap: 'wrap',\n marginTop: '24px',\n gap: '22px',\n justifyContent: 'center',\n paddingBottom: '48px',\n [theme.breakpoints.up(600)]: {\n alignContent: 'flex-start',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n },\n },\n title: {\n color: theme.color.tundora,\n font: 'normal normal normal 22px/29px Roboto',\n letterSpacing: '0.01px',\n marginTop: '36px',\n textAlign: 'left',\n },\n subtitle: {\n color: theme.color.tundora,\n font: 'normal normal normal 14px/16px Roboto',\n letterSpacing: '0.01px',\n marginTop: '12px',\n marginBottom: '24px',\n textAlign: 'left',\n },\n});\n\nexport default styles;\n","import React, { useEffect, useState, useContext } from 'react';\nimport { withStyles, Typography } from '@material-ui/core';\nimport { useSelector } from 'react-redux';\nimport { withI18n } from 'react-i18next';\nimport classnames from 'classnames';\nimport ActionButton from '@/components/Buttons/ActionButton';\nimport CourseCard from '../AcademyPassCoursesList/CourseCard';\nimport styles from './styles';\nimport { AcademyPassContext } from '@/contexts/academyPass/context';\n\n\nconst AcademyPassWatchAgain = ({ billStatus, classes, t }) => {\n const { coursesList } = useSelector(state => state.academyPass.courses);\n const { jwt, userId } = useSelector(state => state.academyPass.tokens);\n const { isPassActive } = useSelector(state => state.academyPass.courses);\n const [filteredCourses, setFilteredCourses] = useState([]);\n const [visible, setVisible] = useState(4);\n const { renderedCourses } = useContext(AcademyPassContext);\n const [shouldRenderCourseList, setShouldRenderCourseList] = useState(true);\n\n\n const isFinished = course => (\n (course.statistics !== undefined)\n && (course.statistics.summary !== undefined)\n && course.statistics.summary.progress === 100\n );\n\n const isPremium = course => course.isFree || course.amount === 0 || course.amount === undefined;\n\n const isVisible = (course) => {\n if (course && course.visibility !== undefined) {\n return course.visibility === 'public';\n }\n };\n\n useEffect(() => {\n if (renderedCourses && !shouldRenderCourseList) {\n setFilteredCourses(renderedCourses.filter(course => isVisible(course) && isPremium(course) && isFinished(course)));\n }\n if (coursesList && coursesList.length > 0 && shouldRenderCourseList) {\n setFilteredCourses(coursesList.filter(course => isVisible(course) && isPremium(course) && isFinished(course)));\n if (renderedCourses.length > 1) {\n setShouldRenderCourseList(false);\n }\n }\n }, [coursesList, renderedCourses, shouldRenderCourseList]);\n\n const loadMore = () => {\n setVisible(filteredCourses.length);\n };\n\n const sortingCoursesByDate = filteredCourses.sort((a, b) => new Date(a.productIssueDate).getTime() - new Date(b.productIssueDate).getTime()).reverse();\n\n return (\n filteredCourses.length > 0\n && (\n \n
\n {t('academypass.list.titleWatchAgain')}\n \n\n
\n {(coursesList || renderedCourses) && sortingCoursesByDate.slice(0, visible).map(course => (\n
\n {visible < sortingCoursesByDate.length && (\n
\n {t('btn.loadMore')}\n \n )}\n
\n
\n
\n {course.isFree ? t('academypass.card.free') : t('academypass.card.pass')}\n
\n
\n
\n
\n
\n
\n {`${course.workload ? course.workload : 0} ${t('academypass.card.minutes')}`}\n
\n
\n {courseImage()}\n \n
\n {course.name}\n \n {courseInfo()}\n
\n {ratingInfo(parseInt(course.ratingAverage, 10))}\n
\n {(isPaidAndActive && isPassActive) || course.isFree ? (\n
\n {t('academypass.card.watch')}\n \n ) : (\n
\n
{ getHgAcademyClick(course.name); cardTypeEventGA(cardType, course.name); }} className={classes.buyButton} data-testid=\"btn-card-buy\">\n {t('academypass.card.buy')}\n \n \n )}\n\n
\n );\n};\n\nexport default withI18n()(withStyles(styles, { withTheme: true })(CourseCard));\n","const styles = theme => ({\n text: {\n color: theme.color.indigo,\n },\n keepWatching: {\n paddingBottom: '40px',\n textAlign: 'center',\n },\n loadMoreBtn: {\n backgroundcolor: theme.color.white,\n },\n wrapper: {\n padding: '0',\n position: 'relative',\n },\n cardGrid: {\n alignContent: 'flex-start',\n alignItems: 'flex-start',\n display: 'flex',\n flexWrap: 'wrap',\n marginTop: '24px',\n gap: '22px',\n justifyContent: 'center',\n paddingBottom: '48px',\n [theme.breakpoints.up(600)]: {\n alignContent: 'flex-start',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n },\n },\n title: {\n color: theme.color.tundora,\n font: 'normal normal normal 22px/29px Roboto',\n letterSpacing: '0.01px',\n marginTop: '36px',\n textAlign: 'left',\n },\n subtitle: {\n color: theme.color.tundora,\n font: 'normal normal normal 14px/16px Roboto',\n letterSpacing: '0.01px',\n marginTop: '12px',\n marginBottom: '24px',\n textAlign: 'left',\n },\n});\n\nexport default styles;\n","import React, { useEffect, useState, useContext } from 'react';\nimport { withStyles, Typography } from '@material-ui/core';\nimport { useSelector } from 'react-redux';\nimport { withI18n } from 'react-i18next';\nimport classnames from 'classnames';\nimport ActionButton from '@/components/Buttons/ActionButton';\nimport CourseCard from './CourseCard';\nimport styles from './styles';\nimport { AcademyPassContext } from '@/contexts/academyPass/context';\n\n\nconst AcademyPassKeepWatchingList = ({ billStatus, classes, t }) => {\n const { coursesList } = useSelector(state => state.academyPass.courses);\n const { jwt, userId } = useSelector(state => state.academyPass.tokens);\n const { isPassActive } = useSelector(state => state.academyPass.courses);\n const [filteredCourses, setFilteredCourses] = useState([]);\n const [listLimit, setListLimit] = useState(4);\n const { renderedCourses } = useContext(AcademyPassContext);\n const [shouldRenderCourseList, setShouldRenderCourseList] = useState(true);\n\n const isInProgress = course => (\n (course.statistics !== undefined) && (course.statistics.summary !== undefined) && (course.statistics.summary.progress > 0 && course.statistics.summary.progress < 100)\n );\n const isPremium = course => (\n !(course.isFree || course.amount === 0 || course.amount === undefined)\n );\n const isVisible = (course) => {\n if (course && course.visibility !== undefined) {\n return course.visibility === 'public';\n }\n };\n\n useEffect(() => {\n if (renderedCourses && !shouldRenderCourseList) {\n setFilteredCourses(renderedCourses.filter(course => (isVisible(course) && !isPremium(course) && isInProgress(course))).slice(0, listLimit));\n }\n if (coursesList && coursesList.length > 0 && shouldRenderCourseList) {\n setFilteredCourses(coursesList.filter(course => (isVisible(course) && !isPremium(course) && isInProgress(course))).slice(0, listLimit));\n if (renderedCourses.length > 1) {\n setShouldRenderCourseList(false);\n }\n }\n }, [coursesList, listLimit, renderedCourses, shouldRenderCourseList]);\n\n const loadMoreCourses = () => {\n setListLimit(filteredCourses.length);\n };\n\n const sortingCoursesByDate = filteredCourses.sort((a, b) => new Date(a.productIssueDate).getTime() - new Date(b.productIssueDate).getTime()).reverse();\n\n return (\n filteredCourses.length > 0\n && (\n \n
\n {t('academypass.keepWatching.title')}\n \n
\n {(renderedCourses || coursesList) && sortingCoursesByDate.map(course => (
\n {filteredCourses.length > listLimit &&
{t('academypass.keepWatching.loadMore')} }\n
\n
\n {t('academypass.list.titleStarted')}\n \n
\n {t('academypass.list.subtitleStarted')}\n \n
\n {coursesList && sortingCoursesByDate.map(course => (
\n
\n {(renderedCourses || coursesList) && sortingCoursesByDate.map(course => (
\n );\n};\nexport default withI18n()(withStyles(styles, { withTheme: true })(AcademyPassCoursesList));\n","import styled, { css } from 'styled-components';\n\nexport const AcademyPassFilterHandlerWrapper = styled.div`\n ${({ theme }) => css`\n background: ${theme.palette.white.light} 0% 0% no-repeat padding-box;\n box-shadow: 0px 1px 3px ${theme.shadows.grey.light};\n margin-top: 0px;\n padding: 12px 24px;\n `}\n`;\n","import { locale } from '@/utils/locale';\n\nexport const filterHandlerLocale = {\n filterBy: locale('academypass.filter.filterBy'),\n subjects: locale('academypass.filter.subjects'),\n searchByCourseName: locale('academypass.filter.searchByCourseName'),\n clearFilters: locale('academypass.filter.clearFilters'),\n multiSelectLabel: locale('academypass.filter.multiSelectLabel'),\n};\n","import React, { useContext } from 'react';\nimport * as Styles from './AcademyPassFilterHandler.styles';\nimport { AcademyPassContext } from '@/contexts/academyPass/context';\nimport { filterHandlerLocale } from './AcademyPassFilterHandler.locale';\nimport { Filter } from '@/pages/common/Filter';\n\nfunction AcademyPassFilterHandler() {\n const {\n filteredOptions,\n setFilteredOptions,\n clearFilter,\n filterTyped,\n setFilterTyped,\n setMultiSelectOptions,\n multiSelectOptions,\n togglePaidOrFreeCourses,\n } = useContext(AcademyPassContext);\n return (\n \n togglePaidOrFreeCourses(e)}\n />\n \n );\n}\n\nexport default AcademyPassFilterHandler;\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useEffect, useState } from 'react';\nimport {\n withStyles, Typography, CircularProgress,\n} from '@material-ui/core';\nimport { Trans, withI18n } from 'react-i18next';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useLocation, Link } from 'react-router-dom';\nimport AcademyPassAlertMessage from '@/components/AcademyPass/AcademyPassAlertMessage';\nimport AcademyPassWatchAgain from '@/components/AcademyPass/AcademyPassWatchAgain';\nimport {\n RECEIVE_ALERTS, CLEAR_REDIRECT, CLEAR_MESSAGES, RECEIVE_ACADEMY_PASS_DETAILS,\n} from '@/redux/actions/actionsTypes';\nimport { getTokens } from '@/redux/actions/academyPass';\nimport styles from './styles';\nimport AcademyPassKeepWatchingList from './AcademyPassKeepWatchingList';\nimport AcademyPassStartHere from './AcademyPassStartHere';\nimport AcademyPassCoursesList from './AcademyPassCoursesList';\nimport { AcademyPassFilterHandler } from './AcademyPassFilterHandler';\nimport PageMessages from '@/pages/common/PageMessages';\n\nconst AcademyPass = ({ classes, t }) => {\n const dispatch = useDispatch();\n const location = useLocation();\n const {\n aborted: coursesAborted, error: coursesError, isLoading: coursesLoading, coursesList,\n } = useSelector(state => state.academyPass.courses);\n const { aborted: tokensAborted, error: tokensError, jwt } = useSelector(state => state.academyPass.tokens);\n const { data: dataAlert } = useSelector(state => state.academyPass.detail);\n const { aborted: buyFastCheckoutAborted, error: buyFastCheckoutError } = useSelector(state => state.academyPass.buyFastcheckout);\n const { isPassActive } = useSelector(state => state.academyPass.courses);\n const isacademyPassV2Enabled = true;\n const isAcademyPassFilterEnabled = true;\n const [isRecentCustomer, setIsRecentCustomer] = useState(false);\n const [paymentDataActive, setPaymentDataActive] = useState(null);\n\n const isBoletoPayment = alert => (alert.payment_method === 'boleto' || alert.payment_method === 'gp_boleto');\n const isPaymentPending = alert => (alert.payment_status === 'Pending');\n const isInvoiceNotPaid = alert => (alert.invoice_status !== 'Paid');\n const isPaymentActive = detail => (detail.payment_status === 'Active');\n\n useEffect(() => {\n dispatch({\n type: CLEAR_REDIRECT,\n });\n }, []);\n\n useEffect(() => {\n dispatch({\n type: CLEAR_MESSAGES,\n });\n }, [jwt]);\n\n useEffect(() => {\n if (dataAlert && dataAlert.data !== null) {\n dataAlert.map((detailsHgAcademy) => {\n if (isPaymentActive(detailsHgAcademy)) {\n setPaymentDataActive(detailsHgAcademy);\n }\n return null;\n });\n }\n });\n\n useEffect(() => {\n if ((coursesAborted || coursesError) && (location.pathname === t('routes.courses'))) {\n dispatch({\n type: RECEIVE_ALERTS,\n data: [\n {\n message: coursesAborted ? t('academypass.list.abort') : t('academypass.list.error'),\n severity: {\n level: 'Critical',\n },\n },\n ],\n });\n }\n }, [coursesAborted, coursesError]);\n\n useEffect(() => {\n if ((tokensAborted || tokensError) && (location.pathname === t('routes.courses'))) {\n dispatch({\n type: RECEIVE_ALERTS,\n data: [\n {\n message: tokensAborted ? t('academypass.card.abort') : t('academypass.card.error'),\n severity: {\n level: 'Critical',\n },\n },\n ],\n });\n if (tokensError) {\n dispatch(getTokens());\n }\n }\n }, [tokensAborted, tokensError]);\n\n useEffect(() => {\n if (isacademyPassV2Enabled && dataAlert && dataAlert.data !== null && (location.pathname === t('routes.courses'))) {\n dataAlert.map((alert) => {\n if (!alert.severity && isBoletoPayment(alert) && isPaymentPending(alert) && isInvoiceNotPaid(alert) && !alert.expired) {\n const alertComponent = (\n \n 0\n \n 3\n \n 4\n \n );\n return dispatch({\n type: RECEIVE_ACADEMY_PASS_DETAILS,\n data: [\n {\n ...alert,\n message: alertComponent,\n severity: {\n level: 'Warning',\n },\n },\n ],\n });\n }\n return true;\n });\n }\n }, [dataAlert]);\n\n useEffect(() => {\n if ((buyFastCheckoutAborted || buyFastCheckoutError) && (location.pathname === t('routes.courses'))) {\n dispatch({\n type: RECEIVE_ALERTS,\n data: [\n {\n message: buyFastCheckoutAborted ? t('academypass.fastCheckout.abort') : t('academypass.fastCheckout.error'),\n severity: {\n level: 'Critical',\n },\n },\n ],\n });\n }\n }, [buyFastCheckoutAborted, buyFastCheckoutError]);\n\n useEffect(() => {\n if (coursesList && coursesList.length > 0) {\n const watchedCoursesList = coursesList.filter(course => (\n (course.statistics === undefined)\n || (course.statistics.summary === undefined)\n || (course.statistics.summary.progress === 0)\n ? false : (course.statistics.summary !== 0)));\n setIsRecentCustomer(watchedCoursesList.length === 0);\n }\n }, [coursesList]);\n\n return (\n \n
\n
\n { isAcademyPassFilterEnabled &&
}\n\n
\n {(!coursesLoading && isPassActive && isRecentCustomer) ? (isacademyPassV2Enabled &&
) : (isacademyPassV2Enabled &&
)}\n {!coursesLoading\n && (\n
\n {t('academypass.list.title')}\n \n )}\n {\n coursesLoading ? (\n
\n
\n ) :
\n }\n\n\n {isacademyPassV2Enabled && !coursesLoading && !isRecentCustomer\n && (\n
\n )}\n
\n
\n \n ) : (\n \n {!isMobile && courses.length < 7 && (\n
\n
\n )}\n {coursesLength === 0 ? (\n
\n {t('courses.vimeoServiceDown')}\n \n ) : (\n <>\n
{t('courses.info')} \n
\n {courses.map((course, index) => (\n \n \n )}\n
\n
{t('academypass.cta.ctaHeader.productName')} \n\n {parseFloat(price) > 0 && (\n
\n {formatCurrency(price)}\n {t('academypass.cta.ctaHeader.month')} \n \n )}\n\n
\n
\n
\n
\n {t(`academypass.cta.ctaHeader.${title}`)} \n {t(`academypass.cta.ctaHeader.${subtitle}`)} \n
\n
\n
\n
\n
\n
\n
{t('academypass.cta.ctaHeader.title')} \n
{t('academypass.cta.ctaHeader.subtitle')} \n
\n
\n \n {newCard(icon1, icon12x, 'listItemTitle1', 'listItemSubtitle1')}\n {newCard(icon2, icon22x, 'listItemTitle2', 'listItemSubtitle2')}\n {newCard(icon3, icon32x, 'listItemTitle3', 'listItemSubtitle3')}\n {newCard(icon4, icon42x, 'listItemTitle4', 'listItemSubtitle4')}\n
\n \n
\n
{t('academypass.cta.testimonials.title')} \n
\n
\n {t('academypass.cta.testimonials.testimonial01')}\n \n {t('academypass.cta.testimonials.testimonialName01')}\n \n \n
\n {t('academypass.cta.testimonials.testimonial02')}\n \n {t('academypass.cta.testimonials.testimonialName02')}\n \n \n
\n {t('academypass.cta.testimonials.testimonial03')}\n \n {t('academypass.cta.testimonials.testimonialName03')}\n \n \n
\n {t('academypass.cta.testimonials.testimonial04')}\n \n {t('academypass.cta.testimonials.testimonialName04')}\n \n \n
\n
\n
\n
{t('academypass.cta.advantages.title')} \n
{t('academypass.cta.advantages.subtitle')} \n
\n
\n
\n \n {t('academypass.cta.advantages.bullet')} \n {t('academypass.cta.advantages.listItem1')}\n \n \n {t('academypass.cta.advantages.bullet')} \n {t('academypass.cta.advantages.listItem2')}\n \n \n {t('academypass.cta.advantages.bullet')} \n {t('academypass.cta.advantages.listItem3')}\n \n \n {t('academypass.cta.advantages.bullet')} \n {t('academypass.cta.advantages.listItem4')}\n \n \n {t('academypass.cta.advantages.bullet')} \n {t('academypass.cta.advantages.listItem5')}\n \n \n {t('academypass.cta.advantages.bullet')} \n {t('academypass.cta.advantages.listItem6')}\n \n \n
\n
\n
\n {t('academypass.cta.footer.productOffer')} \n {parseFloat(price) > 0 && (\n \n {formatCurrency(price)}\n {t('academypass.cta.footer.month')} \n \n )}\n
\n
\n
\n {t('academypass.cta.video.title')} \n {t('academypass.cta.video.subtitle')} \n \n
\n);\nexport default withI18n()(withStyles(styles, { withTheme: true })(CtaVideo));\n","export const videoEmbedUrl = 'https://www.youtube.com/embed/SDDR-0ssKxA';\n","const styles = theme => ({\n wrapper: {\n position: 'relative',\n minHeight: 'calc(100vh - 80px)',\n padding: '0 24px',\n width: '100%',\n [theme.breakpoints.up(960)]: {\n padding: '0 40px',\n },\n [theme.breakpoints.down(600)]: {\n padding: '0px',\n },\n },\n ctaCards: {\n paddingTop: '40px',\n backgroundColor: theme.color.white,\n boxShadow: `0px 1px 3px ${theme.color.tundoraLight}`,\n },\n pageTitle: {\n fontSize: '12px 24px',\n fontWeight: 300,\n },\n titleCard: {\n alignItems: 'center',\n borderRadius: '0',\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n display: 'flex',\n marginBottom: 24,\n marginTop: 24,\n minHeight: '60px',\n padding: '7px 24px',\n position: 'relative',\n [theme.breakpoints.up(768)]: {\n boxShadow: 'none',\n },\n\n },\n});\n\nexport default styles;\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useEffect } from 'react';\nimport {\n Typography,\n Card,\n withStyles,\n} from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport { useSelector } from 'react-redux';\nimport CtaHeader from './CtaHeader';\nimport CtaTestimonials from './CtaTestimonials';\nimport CtaAdvantages from './CtaAdvantages';\nimport CtaFooter from './CtaFooter';\nimport CtaVideo from './CtaVideo';\nimport styles from './styles';\nimport { Redirect } from 'react-router';\nimport { isBRServer } from '@/utils/Validators/validation';\n\nconst AcademyPassCta = ({ classes, t }) => {\n const { redirectToInvoices, invoiceId, paymentMethod } = useSelector(state => state.academyPass.buyFastcheckout);\n\n useEffect(() => {\n if (redirectToInvoices && invoiceId) {\n window.location.href = (`${t('routes.billing')}${t('routes.unpaid')}/${invoiceId}/${paymentMethod}`);\n }\n }, [redirectToInvoices, invoiceId, paymentMethod, t]);\n\n if (isBRServer) {\n return \n
\n \n {t('academypass.cta.title')}\n \n \n
\n
\n
\n \n);\n\nexport default (CoursesPage);\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.section``;\n","import React from 'react';\nimport { locale } from '@/utils/locale';\n\nexport const AcademyPassTrialHandlerLocale = {\n titleCard: locale('academyPassTrial.titleCard'),\n title: locale('academyPassTrial.title'),\n descriptionText: locale('academyPassTrial.descriptionText'),\n descriptionTextBold: locale('academyPassTrial.descriptionTextBold'),\n button: locale('academyPassTrial.button'),\n footer: locale('academyPassTrial.footer'),\n routes: {\n billing: locale('routes.billing'),\n unpaid: locale('routes.unpaid'),\n },\n middleSectionDust: {\n title: locale('academyPassTrial.middleSectionDust.0'),\n button: locale('academyPassTrial.middleSectionDust.button'),\n paragraph: (\n <>\n {locale('academyPassTrial.middleSectionDust.1')}\n {locale('academyPassTrial.middleSectionDust.2')} \n {locale('academyPassTrial.middleSectionDust.3')}\n \n ),\n },\n middleSectionKnowledge: {\n title: locale('academyPassTrial.middleSectionKnowledge.0'),\n button: locale('academyPassTrial.middleSectionKnowledge.button'),\n paragraph: (\n <>\n {locale('academyPassTrial.middleSectionKnowledge.1')}\n {locale('academyPassTrial.middleSectionKnowledge.2')} \n {locale('academyPassTrial.middleSectionKnowledge.3')}\n \n ),\n },\n middleSectionSaveMoney: {\n title: locale('academyPassTrial.middleSectionSaveMoney.0'),\n button: locale('academyPassTrial.middleSectionSaveMoney.button'),\n paragraph: (\n <>\n {locale('academyPassTrial.middleSectionSaveMoney.1')}\n {locale('academyPassTrial.middleSectionSaveMoney.2')} \n {locale('academyPassTrial.middleSectionSaveMoney.3')}\n \n ),\n },\n middleSectionVideo: {\n title: locale('academyPassTrial.middleSectionVideo.title'),\n descInfOne: locale('academyPassTrial.middleSectionVideo.descInfOne'),\n descInfTwo: locale('academyPassTrial.middleSectionVideo.descInfTwo'),\n descInfThree: locale('academyPassTrial.middleSectionVideo.descInfThree'),\n linkVideo: locale('academyPassTrial.middleSectionVideo.linkVideo'),\n button: locale('academyPassTrial.middleSectionVideo.button'),\n },\n middleSectionCards: {\n title: locale('academyPassTrial.middleSectionCards.title'),\n textCardOne: locale('academyPassTrial.middleSectionCards.textCardOne'),\n autorCardOne: (\n \n {locale('academyPassTrial.middleSectionCards.autorCardOne')}\n \n ),\n footerCardOne: locale('academyPassTrial.middleSectionCards.footerCardOne'),\n\n textCardTwo: locale('academyPassTrial.middleSectionCards.textCardTwo'),\n autorCardTwo: (\n \n {locale('academyPassTrial.middleSectionCards.autorCardTwo')}\n \n ),\n footerCardTwo: locale('academyPassTrial.middleSectionCards.footerCardTwo'),\n\n textCardThree: locale('academyPassTrial.middleSectionCards.textCardThree'),\n autorCardThree: (\n \n {locale('academyPassTrial.middleSectionCards.autorCardThree')}\n \n ),\n footerCardThree: locale(\n 'academyPassTrial.middleSectionCards.footerCardThree',\n ),\n },\n middleSectionFooter: {\n title: locale('academyPassTrial.middleSectionFooter.title'),\n textFooter: (\n <>\n {locale('academyPassTrial.middleSectionFooter.textFooter.0')}\n \n {locale('academyPassTrial.middleSectionFooter.textFooter.1')}\n \n {locale('academyPassTrial.middleSectionFooter.textFooter.2')}\n \n ),\n btnFooter: locale('academyPassTrial.middleSectionFooter.btnFooter'),\n },\n};\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div``;\n\nexport const Card = styled.div`\n ${({ theme }) => css`\n\n border-radius: 0px 60px 60px 60px;\n background: ${theme.v1.color.action.primary};\n color: ${theme.v1.color.white.primary};\n font-size: 17px;\n height: 310px;\n text-align: center;\n width: 300px;\n align-items: center;\n display: flex;\n flex-direction: column;\n\n @media (max-width: 1194px) {\n margin-bottom: 15px;\n }\n `}\n`;\n\nexport const DivCardText = styled.div`\n ${() => css`\n width: 82%;\n `}\n`;\n\nexport const CardText = styled.p``;\n\nexport const CardTextAutor = styled.p`\n ${({ theme }) => css`\n font-weight: ${theme.v1.font.weights.bold}\n `}\n`;\n\nexport const CardTextFooter = styled.p``;\n\nexport const IconCard = styled.div`\n margin-top: 30px;\n`;\n","import React from 'react';\nimport * as Styles from './Card.styles';\nimport AspasCard from '@/media/courses/AcademyPassTrialPage/aspas-quote.svg';\n\nconst Card = ({\n textCard,\n autorCard,\n footerCard,\n}) => (\n \n \n \n \n \n \n {textCard}\n \n\n \n {autorCard}\n \n\n \n {footerCard}\n \n\n \n \n \n);\nexport default Card;\n","import styled, { css } from 'styled-components';\n\nexport const ContainerRight = styled.div`\n ${({ imageRight }) => css`\n display: flex;\n flex-direction: ${imageRight ? 'row' : 'row-reverse'};\n justify-content: space-around;\n margin-top: 10px;\n margin-bottom: 40px;\n\n @media (max-width: 1194px) {\n align-items: center;\n display: flex;\n flex-direction: column-reverse;\n }\n `}\n`;\n\nexport const TextArea = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n max-width: 395px;\n\n @media (max-width: 1194px) {\n margin-bottom: 50px;\n max-width: 100%;\n }\n `}\n`;\n\nexport const Paragraph = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-size: 17px;\n font-weight: ${theme.v1.font.weights.regular};\n `}\n`;\n\nexport const Image = styled.img`\n ${({ isMarginRight }) => css`\n margin-right: ${isMarginRight ? '27px' : '77px'};\n\n @media (max-width: 1194px) {\n margin-right: 0;\n max-width: 380px;\n }\n `}\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n text-align: left;\n\n @media (max-width: 1194px) {\n display: none;\n }\n `}\n`;\n\nexport const IsMobileTitle = styled.h1`\n ${({ theme }) => css`\n @media (max-width: 1194px) {\n color: ${theme.v1.color.text.primary};\n text-align: left;\n }\n\n @media (min-width: 1195px) {\n display: none;\n }\n `}\n`;\n\nexport const Container = styled.div`\n ${() => css`\n margin: 0 62px 62px 62px;\n max-width: 100%;\n `}\n`;\n\nexport const Btn = styled.div``;\n","import React from 'react';\nimport { Button } from '@/pages/common/v1/Button';\nimport * as Styles from './AcademyMiddleSection.styles';\n\nconst AcademyMiddleSection = ({\n title,\n paragraph,\n imagePath,\n imageRight,\n isMarginRight,\n handleClick,\n academyPassTrialBuyButtonLabel,\n}) => (\n \n {title} \n \n \n {title} \n {paragraph} \n \n \n \n \n \n);\n\nexport default AcademyMiddleSection;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.background.wizard};\n height: 100%;\n margin: 0 80px 80px 80px;\n max-width: 100%;\n min-height: calc(100vh - 80px);\n position: relative;\n padding-bottom: 50px;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin: 0px;\n }\n `}\n`;\n\nexport const WrapperCircularProgress = styled.div`\n ${({ theme }) => css`\n height: 100%;\n margin: 0 80px 80px 80px;\n max-width: 100%;\n min-height: calc(100vh - 80px);\n position: relative;\n padding-bottom: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin: 0px;\n }\n `}\n`;\n\nexport const TitleCard = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v1.color.white.primary};\n border-radius: 0;\n box-shadow: 0px 2px 4px 0px ${theme.v1.color.shadow.primary};\n display: flex;\n margin-bottom: 24;\n margin-top: 24;\n min-height: 60px;\n padding: 7px 24px;\n position: relative;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n box-shadow: none;\n }\n `}\n`;\n\nexport const PageTitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font: normal normal 300 24px/32px Roboto;\n letter-spacing: 0.01px;\n text-align: left;\n `}\n`;\n\nexport const SectionSlanted = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.background.wizard};\n height: 40px;\n margin-top: -10px;\n transform: skewY(-1deg);\n `}\n`;\n\nexport const SectionMainWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.white.primary};\n display: flex;\n flex-direction: column;\n max-width: 100%;\n margin-top: 10px;\n padding: 20px 46px 25px 46px;\n `}\n`;\n\nexport const MainContent = styled.div`\n ${() => css`\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n\n @media (max-width: 1194px) {\n align-items: center;\n display: flex;\n flex-direction: column;\n }\n `}\n`;\n\nexport const MainContentLeft = styled.div`\n ${() => css`\n width: 38%;\n\n @media (max-width: 1194px) {\n width: 100%;\n }\n\n img {\n margin-left: -8px;\n }\n `}\n`;\n\nexport const ImageLogo = styled.img``;\n\nexport const Paragraph = styled.p``;\n\nexport const MainText = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-size: 32px;\n font-weight: ${theme.v1.font.weights.bold};\n margin-top: 10px;\n\n ${Paragraph}:nth-child(1) {\n font-size: 17px;\n font-weight: ${theme.v1.font.weights.regular};\n }\n\n ${Paragraph}:nth-child(2) {\n font-size: 17px;\n font-weight: ${theme.v1.font.weights.bold};\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${() => css`\n margin-top: 45px;\n `}\n`;\n\nexport const TextInfo = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.warning.canceled};\n font-weight: ${theme.v1.font.weights.regular};\n font-size: 11px;\n margin-top: 32px;\n\n @media (max-width: 1194px) {\n font-size: 12px;\n }\n `}\n`;\n\nexport const MainContentRight = styled.div`\n ${() => css`\n align-items: flex-end;\n display: flex;\n\n span {\n align-items: center;\n background-color: blue;\n border-radius: 50%;\n display: flex;\n height: 186px;\n text-align: center;\n width: 186px;\n }\n `}\n`;\n\nexport const Image = styled.img`\n ${() => css`\n margin-bottom: -24px;\n z-index: 1;\n\n @media (max-width: 1194px) {\n margin-top: 10px;\n width: 300px;\n }\n `}\n`;\n\nexport const Footer = styled.div`\n ${() => css`\n color: #a6a6a6;\n display: flex;\n font-size: 11px;\n justify-content: center;\n margin-top: 32px;\n\n p {\n @media (max-width: 1194px) {\n font-size: 12px;\n width: 100%;\n }\n }\n `}\n`;\n\nexport const MiddleWrapper = styled.div`\n ${() => css`\n padding: 20px 46px 25px 46px;\n `}\n`;\n\nexport const WrapperVideo = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v1.color.white.primary};\n border-radius: 0;\n box-shadow: 0px 2px 4px 0px ${theme.v1.color.shadow.primary};\n display: flex;\n flex-direction: column;\n width: 100%;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin: 0px;\n }\n `}\n`;\n\nexport const Section = styled.div`\n ${({ theme }) => css`\n font-family: ${theme.v1.font.family.primary}\n margin-top: 24;\n min-height: 60px;\n padding: 30px 0px 30px 0px;\n text-align: center;\n width: 55%;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n box-shadow: none;\n width: 90%;\n }\n\n @media (max-width: 1194px) {\n width: 90%;\n }\n `}\n`;\n\nexport const PageTitlePartTwo = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-size: 32px;\n font-weight: ${theme.v1.font.weights.bold};\n\n @media (max-width: 1194px) {\n font-size: 2rem;\n }\n `}\n`;\n\nexport const CardVideo = styled.div`\n @media (max-width: 1194px) {\n width: 90%;\n }\n\n iframe {\n @media (max-width: 1194px) {\n width: 100%;\n }\n }\n`;\n\nexport const ButtonWrapperVideo = styled.div`\n ${() => css`\n margin-top: 0px;\n `}\n`;\n\nexport const ListInfAcademyPass = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.background.tooltip};\n display: flex;\n justify-content: space-around;\n padding: 46px;\n width: 62%;\n\n @media (max-width: 1194px) {\n margin-left: 0;\n width: 100%;\n }\n `}\n`;\n\nexport const Icon = styled.div`\n color: #f67921;\n padding: 0px 13px 0px 0px;\n`;\n\nexport const InfOne = styled.div`\n ${() => css`\n display: flex;\n font-size: 18px;\n `}\n`;\n\nexport const InfTwo = styled.div`\n ${() => css`\n display: flex;\n font-size: 18px;\n `}\n`;\n\nexport const InfThree = styled.div`\n ${() => css`\n display: flex;\n font-size: 18px;\n `}\n`;\n\nexport const FooterVideo = styled.div`\n ${() => css`\n margin-bottom: 50px;\n padding-top: 25px;\n width: 28%;\n\n @media (max-width: 1194px) {\n width: 75%;\n }\n `}\n`;\n\nexport const TextFooterVideo = styled.p`\n ${() => css`\n color: #a6a6a6;\n font-size: 11px;\n\n @media (max-width: 1194px) {\n font-size: 12px;\n }\n `}\n`;\n\nexport const WrapperSecond = styled.div`\n ${({ theme }) => css`\n align-items: center;\n border-radius: 0;\n box-shadow: 0px 2px 4px 0px ${theme.v1.color.shadow.primary};\n display: flex;\n flex-direction: column;\n padding-bottom: 80px;\n width: 100%;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin: 0px;\n }\n `}\n`;\n\nexport const Cards = styled.div`\n ${() => css`\n display: flex;\n justify-content: space-around;\n width: 100%;\n\n @media (max-width: 1194px) {\n align-items: center;\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n `}\n`;\n\nexport const WrapperThree = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.palette.primary.main};\n border-radius: 0;\n box-shadow: 0px 2px 4px 0px ${theme.v1.color.shadow.primary};\n display: flex;\n flex-direction: column;\n padding-bottom: 40px;\n width: 100%;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin: 0px;\n }\n `}\n`;\n\nexport const SectionLine = styled.div`\n position: relative;\n width: 100%;\n\n img {\n position: absolute;\n width: 100%;\n }\n`;\n\nexport const SectionSelo = styled.div`\n position: relative;\n`;\n\nexport const PageTitleFooter = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v1.color.white.primary};\n font-family: ${theme.v1.font.family.primary}\n font-size: 32px;\n font-weight: ${theme.v1.font.weights.bold};\n `}\n`;\n\nexport const SectionFooter = styled.div`\n ${({ theme }) => css`\n font-family: ${theme.v1.font.family.primary};\n text-align: center;\n padding-top: 10px;\n width: 55%;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n box-shadow: none;\n }\n `}\n`;\n\nexport const SectionTextFooter = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: column;\n font-family: ${theme.v1.font.family.primary};\n text-align: center;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n box-shadow: none;\n }\n `}\n`;\n\nexport const PageTextFooter = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.white.primary};\n font-size: 17px;\n width: 36%;\n @media (max-width: 1194px) {\n width: 70%;\n }\n `}\n`;\n\nexport const ButtonFooter = styled.div`\n margin-top: 20px;\n z-index: 1;\n`;\n\nexport const DivFooter = styled.div`\n ${() => css`\n margin-top: 68px;\n width: 28%;\n @media (max-width: 1194px) {\n display: flex;\n justify-content: center;\n width: 100%;\n }\n `}\n`;\n\nexport const TextFooter = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.white.primary};\n font-size: 11px;\n @media (max-width: 1194px) {\n font-size: 12px;\n width: 75%;\n }\n `}\n`;\n\nexport const WrapperSnapFooter = styled.div`\n ${({ theme }) => css`\n align-items: baseline;\n display: flex;\n background-color: ${theme.v1.color.white.primary};\n border-radius: 0;\n box-shadow: 0px 2px 4px 0px ${theme.v1.color.shadow.primary};\n padding-bottom: 46px;\n width: 100%;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin: 0px;\n }\n `}\n`;\n\nexport const ImgSnapFooter = styled.img`\n @media (max-width: 1194px) {\n display: none;\n }\n`;\n\nexport const DivImage = styled.div`\n display: flex;\n margin-top: -243px;\n margin-bottom: -65px;\n width: 92%;\n @media (max-width: 1194px) {\n display: none;\n margin-top: 0;\n margin-bottom: 0;\n }\n`;\n","import React, { useEffect, useState } from 'react';\nimport { Button } from '@/pages/common/v1/Button';\nimport snapImage from '@/media/courses/AcademyPassTrialPage/snappy-selo.svg';\nimport logo from '@/media/courses/AcademyPassTrialPage/logo.svg';\nimport firstImage from '@/media/courses/AcademyPassTrialPage/peoples.svg';\nimport secondImage from '@/media/courses/AcademyPassTrialPage/certificate-trial.svg';\nimport thirdImage from '@/media/courses/AcademyPassTrialPage/cut-scene.svg';\nimport { AcademyPassTrialHandlerLocale } from './AcademyPassTrialHandler.locale';\nimport { Card } from '../../components/academyPassTrial/Card';\nimport { AcademyMiddleSection } from '../../components/academyPassTrial/AcademyMiddleSection';\nimport Line from '@/media/courses/AcademyPassTrialPage/linha-site.svg';\nimport Selo from '@/media/courses/AcademyPassTrialPage/selo.svg';\nimport SnapFooter from '@/media/courses/AcademyPassTrialPage/snappyFooter.svg';\n\nimport * as Styles from './AcademyPassTrialHandler.styles';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { buyAcademyPass } from '@/redux/actions/academyPass';\nimport { ACADEMY_PASS_TRIAL_PRODUCT_ID } from '@/config/products/academypass';\nimport { CircularProgress } from '@material-ui/core';\nimport { useHistory } from 'react-router';\n\nconst AcademyPassTrialHandler = () => {\n const { redirectToInvoices, invoiceId, paymentMethod } = useSelector(\n state => state.academyPass.buyFastcheckout,\n );\n const dispatch = useDispatch();\n const [isLoading, setIsLoading] = useState(false);\n\n const history = useHistory();\n\n useEffect(() => {\n if (redirectToInvoices && invoiceId) {\n history.push(`${AcademyPassTrialHandlerLocale.routes.billing}${AcademyPassTrialHandlerLocale.routes.unpaid}/${invoiceId}/${paymentMethod}`);\n }\n }, [redirectToInvoices, invoiceId, paymentMethod, history]);\n\n const handleClick = () => {\n setIsLoading(true);\n dispatch(\n buyAcademyPass({\n planId: ACADEMY_PASS_TRIAL_PRODUCT_ID.br,\n paymentMethod: 'boleto',\n paymentLocation: 'footer',\n }),\n );\n };\n return isLoading ? (\n \n \n ) : (\n \n \n \n {AcademyPassTrialHandlerLocale.titleCard}\n \n \n \n \n \n \n {AcademyPassTrialHandlerLocale.title}\n \n {AcademyPassTrialHandlerLocale.descriptionText}\n \n \n {AcademyPassTrialHandlerLocale.descriptionTextBold}\n \n \n \n \n \n {AcademyPassTrialHandlerLocale.footer}\n \n \n \n \n \n \n \n \n {AcademyPassTrialHandlerLocale.footer}
\n \n \n \n \n \n {AcademyPassTrialHandlerLocale.middleSectionVideo.title}\n \n \n \n \n \n \n ▶ \n {AcademyPassTrialHandlerLocale.middleSectionVideo.descInfOne}\n \n \n ▶ \n {AcademyPassTrialHandlerLocale.middleSectionVideo.descInfTwo}\n \n \n ▶ \n {AcademyPassTrialHandlerLocale.middleSectionVideo.descInfThree}\n \n \n \n \n \n \n {AcademyPassTrialHandlerLocale.footer}\n \n \n \n \n \n \n {AcademyPassTrialHandlerLocale.middleSectionCards.title}\n \n \n \n \n \n \n \n \n \n \n \n \n {AcademyPassTrialHandlerLocale.middleSectionFooter.title}\n \n \n \n \n {AcademyPassTrialHandlerLocale.middleSectionFooter.textFooter}\n \n \n \n \n \n \n {AcademyPassTrialHandlerLocale.footer}\n \n \n \n \n \n \n );\n};\nexport default AcademyPassTrialHandler;\n","import React from 'react';\nimport * as Styles from './AcademyPassTrialPage.styles';\nimport { AcademyPassTrialHandler } from '@/components/academy/academyPassTrial/AcademyPassTrialHandler';\n\nconst AcademyPassTrialPage = () => (\n \n \n);\n\nexport default AcademyPassTrialPage;\n","\nimport gestaoTrafegoProfissionalGoogleAds from '@/media/mktPlace/collabItems/gestaoTrafegoProfissionalGoogleAds.png';\nimport linguagemJavascriptBasicoAvancado from '@/media/mktPlace/collabItems/linguagemJavascriptBasicoAvancado.png';\nimport redeDisplayYoutuber from '@/media/mktPlace/collabItems/redeDisplayYoutuber.png';\n// import crieSiteProfissionalHojeMesmo from '@/media/mktPlace/collabItems/crieSiteProfissionalHojeMesmo.png'; Curso removido temporariamente\n// import primeiroSiteWordpressNoAr from '@/media/mktPlace/collabItems/primeiroSiteWordpressNoAr.png'; Curso removido temporariamente\nimport introducaoAoWooCommerce from '@/media/mktPlace/collabItems/introducaoAoWooCommerce.png';\n// import canvaDesignFacilEmpreendedores from '@/media/mktPlace/collabItems/canvaDesignFacilEmpreendedores.png'; Curso removido temporariamente\nimport criandoMarcasGuiaVisualConceitoDesign from '@/media/mktPlace/collabItems/criandoMarcasGuiaVisualConceitoDesign.png';\nimport ecommerceVendasOnline from '@/media/mktPlace/collabItems/ecommerceVendasOnline.png';\nimport tudoSobreCiracaoVideoParaSeuNegocio from '@/media/mktPlace/collabItems/tudoSobreCiracaoVideoParaSeuNegocio.png';\nimport youtubeParaIniciantesComoCriarCrescerSeuCanal from '@/media/mktPlace/collabItems/youtubeParaIniciantesComoCriarCrescerSeuCanal.png';\nimport afialiadoDeSucesso from '@/media/mktPlace/collabItems/afialiadoDeSucesso.png';\n// import introducaoGoogleAds from '@/media/mktPlace/collabItems/introducaoGoogleAds.png'; Curso removido temporariamente\nimport vendaMaisWhastappBusinessGoogleMeuNegocio from '@/media/mktPlace/collabItems/vendaMaisWhastappBusinessGoogleMeuNegocio.png';\nimport desenvolvimentoPluginsWordpress from '@/media/mktPlace/collabItems/desenvolvimentoPluginsWordpress.png';\nimport introducaoLogicaPython from '@/media/mktPlace/collabItems/introducaoLogicaPython.png';\nimport presencaOnlineMeis from '@/media/mktPlace/collabItems/presencaOnlineMeis.png';\n\nexport const collabItems = [\n {\n id: 17, image: presencaOnlineMeis, name: 'Presença Online para MEIs', lessons: 20, duration: '01:25min', link: 'https://conteudos.hostgator.com.br/hg-academy-sebrae-presenca-online-mei?utm_source=marketplace&utm_medium=banner&utm_campaign=presenca-online-mei ',\n },\n {\n id: 0, image: gestaoTrafegoProfissionalGoogleAds, name: 'Gestão de Tráfego Profissional em Google Ads', lessons: 49, duration: '11:30min', description: 'Desconto especial para clientes HostGator:', totalPrice: 599.00, newPrice: 199.00, link: 'https://www.hostgator.com.br/academy/domine-google-ads ', premium: true,\n },\n {\n id: 1, image: linguagemJavascriptBasicoAvancado, name: 'Linguagem Javascript: do Básico ao Avançado', lessons: 50, duration: '20:27min', description: 'Desconto especial para clientes HostGator:', totalPrice: 497.00, newPrice: 397.00, link: 'https://academy.hostgator.com.br/linguagem-javascript?utm_source=marketplace&utm_medium=banner&utm_campaign=curso-javascript', premium: true,\n },\n {\n id: 2, image: redeDisplayYoutuber, name: 'Rede de Display e YouTube', lessons: 16, duration: '05:36min', description: 'Desconto especial para clientes HostGator:', totalPrice: 99.99, newPrice: 39.99, link: 'https://academy.hostgator.com.br/rede-de-display-do-google-ads?utm_source=marketplace&utm_medium=banner&utm_campaign=curso-display-youtube', premium: true,\n },\n // { Curso removido temporariamente\n // id: 3, image: crieSiteProfissionalHojeMesmo, name: 'Crie um site profissional hoje mesmo', lessons: 6, duration: '26min', link: 'https://app.collabplay.online/criador-site-profissional',\n // },\n // { Curso removido temporariamente\n // id: 4, image: primeiroSiteWordpressNoAr, name: 'Meu Primeiro Site WordPress no Ar', lessons: 17, duration: '01:35min', link: 'https://app.collabplay.online/meu-primeiro-site-wordpress',\n // },\n {\n id: 5, image: introducaoAoWooCommerce, name: 'Introdução ao WooCommerce', lessons: 6, duration: '35min', link: 'https://academy.hostgator.com.br/sua-loja-online-com-woocommerce?utm_source=marketplace&utm_medium=banner&utm_campaign=curso-woocommerce',\n },\n // { Curso removido temporariamente\n // id: 6, image: canvaDesignFacilEmpreendedores, name: 'Canva: Design Fácil para Empreendedores', lessons: 11, duration: '01:59min', link: 'https://app.collabplay.online/canva-design-facil-para-empreendedores',\n // },\n {\n id: 7, image: criandoMarcasGuiaVisualConceitoDesign, name: 'Criando Marcas: Guia Visual do Conceito ao Design', lessons: 11, duration: '02:06min', link: 'https://academy.hostgator.com.br/criando-marcas-guia-visual-do-conceito-ao-design?utm_source=marketplace&utm_medium=banner&utm_campaign=curso-criando-marcas',\n },\n {\n id: 8, image: ecommerceVendasOnline, name: 'E-commerce e Vendas Online', lessons: 7, duration: '02:22min', link: 'https://academy.hostgator.com.br/ecommerce-vendas-online?utm_source=marketplace&utm_medium=banner&utm_campaign=curso-ecommerce',\n },\n {\n id: 9, image: tudoSobreCiracaoVideoParaSeuNegocio, name: 'Tudo sobre Criação de Vídeo para o seu Negócio', lessons: 16, duration: '03:54min', link: 'https://academy.hostgator.com.br/criacao-de-video-para-seu-negocio?utm_source=marketplace&utm_medium=banner&utm_campaign=curso-criacao-video',\n },\n {\n id: 10, image: youtubeParaIniciantesComoCriarCrescerSeuCanal, name: 'YouTube para Iniciantes: Como criar e crescer o seu canal', lessons: 8, duration: '01:24min', link: 'https://academy.hostgator.com.br/youtube-iniciantes-criar-crescer-canal?utm_source=marketplace&utm_medium=banner&utm_campaign=curso-youtube-iniciantes',\n },\n {\n id: 11, image: afialiadoDeSucesso, name: 'Afiliado de Sucesso', lessons: 20, duration: '01:25min', link: 'https://academy.hostgator.com.br/afiliado-de-sucesso?utm_source=marketplace&utm_medium=banner&utm_campaign=curso-afiliado-sucesso',\n },\n // { Curso removido temporariamente\n // id: 12, image: introducaoGoogleAds, name: 'Introdução ao Google Ads', lessons: 14, duration: '02:32min', link: 'https://app.collabplay.online/introducao-google-ads',\n // },\n {\n id: 13, image: vendaMaisWhastappBusinessGoogleMeuNegocio, name: 'Venda Mais com WhatsApp Business e Google Meu Negócio', lessons: 12, duration: '01:15min', link: 'https://academy.hostgator.com.br/whatsapp-business-e-google-meu-negocio?utm_source=marketplace&utm_medium=banner&utm_campaign=curso-whatsapp-google',\n },\n // { Curso removido temporariamente\n // id: 14, image: null, name: 'HostGator Insights', lessons: 14, duration: '07:33min', link: 'https://app.collabplay.online/hostgator-insights',\n // },\n {\n id: 15, image: desenvolvimentoPluginsWordpress, name: 'Desenvolvimento de Plugins para WordPress', lessons: 15, duration: '02:40min', link: 'https://academy.hostgator.com.br/desenvolvimento-de-plugins-para-wordpress?utm_source=marketplace&utm_medium=banner&utm_campaign=curso-plugins-wp',\n },\n {\n id: 16, image: introducaoLogicaPython, name: 'Introdução à Lógica de Programação em Python', lessons: 11, duration: '02:08min', link: 'https://academy.hostgator.com.br/introducao-a-logica-de-programacao-em-python?utm_source=marketplace&utm_medium=banner&utm_campaign=curso-logica-programacao',\n },\n];\n","import HostGatorLogo from '@/media/mktPlace/logo/hostGator.svg';\nimport SiteLockLogo from '@/media/mktPlace/logo/siteLock.svg';\nimport CodeGuardLogo from '@/media/mktPlace/logo/codeGuard.svg';\nimport JivoChatLogo from '@/media/mktPlace/logo/jivoChat.svg';\nimport BuildMyLogo from '@/media/mktPlace/logo/buildMyLogo.svg';\nimport RdStation from '@/media/mktPlace/logo/rdStation.svg';\nimport cobreFacil from '@/media/mktPlace/logo/cobreFacil.svg';\nimport trakto from '@/media/mktPlace/logo/trakto.svg';\nimport creditas from '@/media/mktPlace/logo/creditas.svg';\nimport asaas from '@/media/mktPlace/logo/asaas.svg';\nimport Workana from '@/media/mktPlace/logo/workana.png';\n\nexport const cardTypes = {\n ALL: 0,\n FEATURED: 1,\n EMAIL: 2,\n MARKETING: 3,\n SITEBUILDER: 4,\n CHAT: 5,\n AUTOMATION: 6,\n SECURITY: 7,\n DESIGN: 8,\n FINANCES: 9,\n COURSES: 10,\n FREELANCERS: 11,\n};\n\nexport const cardItems = [\n {\n featured: true,\n altLayout: false,\n coloredBorder: true,\n country: 'br',\n name: 'Asaas',\n logo: asaas,\n type: [cardTypes.FINANCES, cardTypes.FEATURED],\n description: 'Cobre por boleto, cartão, links de pagamento e Pix. Faça a gestão financeira da sua loja online em um só lugar.',\n internLink: true,\n link: '/asaas',\n show: false,\n },\n {\n featured: true,\n altLayout: true,\n coloredBorder: false,\n country: 'br',\n name: 'Cobre Fácil',\n logo: cobreFacil,\n type: [cardTypes.FINANCES, cardTypes.FEATURED],\n description: 'Cobre e receba de seus clientes de forma automatizada, profissional e sem burocracia.',\n internLink: false,\n link: 'https://www.cobrefacil.com.br/hostgator?utm_source=hostgator&utm_medium=Mktplace-portal-card',\n show: false,\n },\n {\n featured: true,\n altLayout: true,\n coloredBorder: false,\n country: 'br',\n name: 'Trakto',\n logo: trakto,\n type: [cardTypes.DESIGN, cardTypes.FEATURED],\n description: 'O editor feito para o empreendedor vender nas redes. Crie mini-sites, artes para redes sociais, ebooks, apresentações.',\n internLink: false,\n link: 'https://pages.trakto.io/hostgator?utm_source=hostgator-marketplace&utm_campaign=hostgator-marketplace&utm_medium=hostgator-marketplace&utm_content=hostgator-marketplace',\n show: false,\n },\n {\n featured: false,\n altLayout: false,\n coloredBorder: false,\n country: 'br',\n name: 'BuildMyLogo',\n logo: BuildMyLogo,\n type: [cardTypes.DESIGN],\n description: 'Crie e personalize o logotipo do seu negócio com a ajuda da inteligência artificial (IA).',\n internLink: false,\n link: 'https://buildmylogo.co/aff.php?aff=396',\n show: true,\n },\n {\n featured: false,\n altLayout: false,\n coloredBorder: false,\n country: 'br',\n name: 'Workana',\n logo: Workana,\n type: [cardTypes.FREELANCERS],\n description: 'Encontre os melhores freelancers de marketing, design, conteúdo e programação para impulsionar o sucesso do seu projeto. ',\n internLink: false,\n link: 'https://www.workana.com/?utm_campaign=hostgator',\n show: true,\n },\n {\n featured: false,\n altLayout: false,\n coloredBorder: false,\n country: 'br',\n name: 'Creditas',\n logo: creditas,\n type: [cardTypes.FINANCES],\n description: 'Faça seu negócio crescer com soluções de empréstimo facilitado e aproveite as menores taxas do mercado.',\n internLink: false,\n link: 'https://www.creditas.com/parceiros/hostgator-veiculo?utm_source=hostgator&utm_medium=affiliates&utm_campaign=lp',\n show: true,\n },\n {\n featured: false,\n coloredBorder: false,\n country: 'br',\n name: 'Rd Station Marketing',\n logo: RdStation,\n type: [cardTypes.MARKETING],\n description: 'Impulsione suas vendas com Automação de Marketing, WhatsApp para sites e muitos outros recursos.',\n internLink: false,\n link: 'https://materiais.resultadosdigitais.com.br/hr-parceria-rd-hostgator',\n show: true,\n },\n {\n featured: false,\n altLayout: false,\n coloredBorder: false,\n country: 'br',\n name: 'Criador de sites',\n logo: HostGatorLogo,\n type: [cardTypes.SITEBUILDER],\n description: 'Crie seu site, blog ou loja online de forma rápida e intuitiva, sem precisar escrever nenhuma linha de código.',\n internLink: false,\n link: 'https://www.hostgator.com.br/criador-de-sites?utm_source=portal&utm_medium=marketplace&utm_campaign=criador_de_sites&utm_content=seo&utm_term=builder',\n show: true,\n },\n {\n featured: false,\n altLayout: false,\n coloredBorder: false,\n country: 'br',\n name: 'JivoChat',\n logo: JivoChatLogo,\n type: [cardTypes.CHAT],\n description: 'Converse e monitore visitantes em tempo real por chat online, Facebook messenger, telefone e e-mail.',\n internLink: false,\n link: 'https://www.jivochat.com.br/partners/hostgator/',\n show: true,\n },\n {\n featured: false,\n altLayout: false,\n coloredBorder: false,\n country: 'br',\n name: 'Code Guard',\n logo: CodeGuardLogo,\n type: [cardTypes.SECURITY],\n description: 'Faça backup das suas alterações de maneira rápida e eficiente, garantindo mais segurança para o seu site.',\n internLink: false,\n link: 'https://www.hostgator.com.br/backup-online?utm_source=portal&utm_medium=marketplace&utm_campaign=codeguard&utm_content=seguranca&utm_term=codeguard',\n show: true,\n },\n {\n featured: false,\n altLayout: false,\n coloredBorder: false,\n country: 'br',\n name: 'Site Lock',\n logo: SiteLockLogo,\n type: [cardTypes.SECURITY],\n description: 'Proteja o seu site de invasões e ataques hackers de forma simples e automática.',\n internLink: false,\n link: 'https://www.hostgator.com.br/sitelock?utm_source=portal&utm_medium=marketplace&utm_campaign=sitelock&utm_content=seguranca&utm_term=sitelock',\n show: true,\n },\n];\n","export const tagList = [\n {\n id: 0, label: 'Todos', value: 'all', checked: true,\n },\n {\n id: 1, label: 'Recomendados', value: 'recomended', checked: false,\n },\n // {id: 2, label: 'Email', value: 'all', checked: false}, Removido temporariamente -- Retornando em 2021\n {\n id: 3, label: 'Marketing', value: 'marketing', checked: false,\n },\n {\n id: 4, label: 'Criação de Sites', value: 'siteBuilder', checked: false,\n },\n {\n id: 5, label: 'Chat', value: 'chat', checked: false,\n },\n // {id: 6, label: 'Automação', value: 'automation', checked: false}, Removido temporariamente -- Retornando em 2021\n {\n id: 7, label: 'Segurança', value: 'security', checked: false,\n },\n {\n id: 8, label: 'Design', value: 'design', checked: false,\n },\n {\n id: 10, label: 'Cursos', value: 'courses', checked: false,\n },\n {\n id: 9, label: 'Financeiro', value: 'finantial', checked: false,\n },\n {\n id: 11, label: 'Freelancers', value: 'freelancers', checked: false,\n },\n];\n","\nimport React, { createContext, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n collabItems,\n tagList,\n cardItems,\n} from './values';\n\nexport const MktPlaceContext = createContext();\n\nlet handleSeachTimeOut = null;\nconst MktPlaceContextProvider = ({ children }) => {\n const [showModal, toggleShowModal] = useState(false);\n const [renderedCards, setRenderedCards] = useState(cardItems);\n\n const [filteredOptions, setFilteredOptions] = useState(tagList);\n const [filterTyped, setFilterTyped] = useState('');\n\n useEffect(() => {\n const itemsToBeRendered = cardItems.filter(card => card.show);\n setRenderedCards(itemsToBeRendered);\n }, []);\n\n\n const clearFilter = () => {\n const options = [...filteredOptions];\n options.map((option) => {\n const newOption = option;\n newOption.checked = false;\n return newOption;\n });\n options[0].checked = true;\n\n setFilteredOptions(options);\n setFilterTyped('');\n };\n\n useEffect(() => {\n clearTimeout(handleSeachTimeOut);\n handleSeachTimeOut = setTimeout(() => {\n if (cardItems.length && filteredOptions.length) {\n const shouldRenderAll = filteredOptions.find(filter => filter.value === 'all').checked;\n const activeOptions = filteredOptions.filter(filterOption => filterOption.checked);\n const optionFilteredSubscriptions = cardItems.filter((card) => {\n const shouldBeRendered = activeOptions.some(option => card.type.some(type => type === option.id));\n return shouldRenderAll || shouldBeRendered;\n });\n\n const filteredCards = optionFilteredSubscriptions.filter((subscription) => {\n if (!subscription.show) {\n return false;\n }\n const subscriptionString = JSON.stringify(subscription).toLowerCase();\n const filterTypedLower = filterTyped.toLowerCase();\n return subscriptionString.includes(filterTypedLower);\n });\n\n setRenderedCards(filteredCards);\n }\n }, 100);\n }, [filteredOptions, filterTyped]);\n\n\n const values = {\n filteredOptions,\n setFilteredOptions,\n filterTyped,\n setFilterTyped,\n clearFilter,\n cardItems,\n renderedCards,\n setRenderedCards,\n showModal,\n toggleShowModal,\n collabItems,\n };\n\n return (\n key}>\n {children}\n \n );\n};\n\nMktPlaceContextProvider.propTypes = {\n children: PropTypes.node,\n};\n\nMktPlaceContextProvider.defaultProps = {\n children: null,\n};\n\nexport default MktPlaceContextProvider;\n","import styled, { css } from 'styled-components';\nimport colorfulLine from '@/media/asaas/colorful-border.svg';\n\nexport const Card = styled.div`\n${({ featured }) => css`\n background-image: ${featured ? `url(${colorfulLine})` : undefined};\n background-size: cover;\n height: auto;\n padding: ${featured ? '4px' : '0px'};\n width: 100%;\n `}\n`;\n\nexport const Wrapper = styled.div`\n ${({ theme, altLayout }) => css`\n background-color: ${altLayout ? theme.color.indigo : theme.color.white};\n color: ${altLayout ? theme.color.white : theme.color.tundora};\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n font-size: 16px;\n gap: 24px;\n min-height: 337px;\n justify-content: space-between;\n left: 0;\n padding: 16px 24px 24px 24px;\n `}\n`;\n\nexport const LogoWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const Logo = styled.img`\n object-fit: scale-down;\n`;\n\nexport const Tags = styled.div`\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n`;\n\nexport const Link = styled.a`\n display: flex;\n flex-direction: column;\n text-decoration: none;\n align-items: center;\n`;\n\nexport const Description = styled.div`\n ${({ theme, altLayout }) => css`\n color: ${altLayout ? theme.color.white : theme.color.tundora};\n font-size: 14px;\n line-height: 21px;\n font-family: 'Galano';\n font-weight: ${theme.font.weights.regular};\n `}\n`;\n","import React from 'react';\nimport SnappyLogo from '@/media/logo/SnappyLogo/SnappyLogo.svg';\nimport { Tag, Button } from 'gatorcomponents';\nimport { useHistory } from 'react-router-dom';\nimport * as Style from './Card.styles';\n\nconst Card = ({\n testId = 'cardItem',\n card = {\n logo: SnappyLogo,\n name: 'snappy',\n description: \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\",\n featured: true,\n type: [0, 2],\n },\n modal = false,\n btnLabel = 'Label',\n tagList = [{\n id: 0,\n label: 'Default',\n value: 'default',\n checked: true,\n }, {\n id: 1,\n label: 'Chip',\n value: 'chip',\n checked: true,\n }, {\n id: 2,\n label: 'Recommended',\n value: 'recommended',\n checked: true,\n }],\n altLayout = false,\n handleClick = () => {},\n ga = () => {},\n featured = false,\n internLink = false,\n}) => {\n const history = useHistory();\n\n const clickEvent = () => {\n ga();\n handleClick({ name: card.name, modal });\n internLink && history.push(card.link);\n };\n\n return (\n \n \n \n {card.type.map((cardType) => {\n const label = tagList.find(element => element.id === cardType);\n return (\n \n \n \n {card.description} \n \n \n
\n \n \n \n );\n};\n\nexport default (Card);\n","const styles = theme => ({\n tabWrapper: {\n border: `1px solid ${theme.color.geyser}`,\n borderRadius: '5px',\n height: '369px',\n padding: '12px 0px',\n\n [theme.breakpoints.down(960)]: {\n border: 0,\n height: 'unset',\n padding: 0,\n },\n },\n\n tabContainer: {\n boxShadow: '0px 1px 3px #00000029',\n margin: '0px 12px 12px 12px',\n\n '& > div > div > span': {\n height: '5px',\n },\n\n [theme.breakpoints.down(960)]: {\n margin: '0px 0px 12px 0px',\n },\n },\n\n tabTitle: {\n color: theme.color.gray,\n fontSize: '14px',\n fontWeight: 500,\n height: '60px',\n letterSpacing: '0.01px',\n lineHeight: '17px',\n opacity: 1,\n transition: '300ms',\n },\n\n activeTab: {\n color: theme.color.tundora,\n },\n\n listItemsWrapper: {\n display: 'flex',\n flexGrow: 1,\n flexShrink: 1,\n flexWrap: 'wrap',\n justifyContent: 'space-between',\n marginRight: '12px',\n maxHeight: '285px',\n overflow: 'hidden scroll',\n padding: '0px 12px',\n\n '&::-webkit-scrollbar': {\n width: 8,\n },\n '&::-webkit-scrollbar-track': {\n background: theme.color.silver,\n },\n '&::-webkit-scrollbar-thumb': {\n borderRadius: 8,\n background: theme.color.indigo,\n },\n '&::-webkit-scrollbar-thumb:hover': {\n background: theme.color.indigo,\n },\n\n [theme.breakpoints.down(960)]: {\n overflow: 'unset',\n maxHeight: 'unset',\n flex: 1,\n margin: 0,\n },\n },\n});\n\nexport default styles;\n","const styles = theme => ({\n listItem: {\n borderRadius: '5px',\n boxShadow: '0 3px 6px #00000029',\n display: 'flex',\n flex: '1 calc(50% - 6px)',\n flexGrow: 0,\n flexShrink: 1,\n marginBottom: '12px',\n padding: '12px',\n\n [theme.breakpoints.down(960)]: {\n flex: '1 100%',\n },\n },\n\n imageBlock: {\n marginRight: '12px',\n\n [theme.breakpoints.up(960)]: {\n maxHeight: '157px',\n },\n },\n\n infoBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n\n [theme.breakpoints.up(960)]: {\n maxHeight: '157px',\n },\n },\n\n itemName: {\n colro: theme.color.tundora,\n fontSize: '16px',\n fontWeight: 500,\n lineHeight: '19px',\n },\n\n row: {\n alignItems: 'center',\n display: 'flex',\n },\n\n lessonIcons: {\n fill: theme.color.regentGray,\n fontSize: '12px',\n marginRight: '2px',\n },\n\n lessons: {\n color: theme.color.regentGray,\n fontSize: '14px',\n lineHeight: '17px',\n marginRight: '12px',\n },\n\n duration: {\n color: theme.color.regentGray,\n fontSize: '14px',\n lineHeight: '17px',\n },\n\n description: {\n color: theme.color.tundora,\n fontSize: '12px',\n lineHeight: '14px',\n marginBottom: '6px',\n marginTop: '12px',\n },\n\n totalPrice: {\n alignItems: 'center',\n borderRadius: 100,\n color: theme.color.tundora,\n display: 'flex',\n fontSize: '14px',\n fontWeight: 500,\n height: '25px',\n justifyContent: 'center',\n lineHeight: '17px',\n marginBottom: '6px',\n padding: '0 8px',\n position: 'relative',\n\n '&:before': {\n backgroundColor: theme.color.valencia,\n content: \"''\",\n display: 'block',\n height: '1px',\n position: 'absolute',\n transform: 'rotate(7deg)',\n width: 'calc(100% - 16px)',\n },\n },\n\n newPrice: {\n alignItems: 'center',\n backgroundColor: theme.color.oceanGreen,\n borderRadius: 100,\n color: theme.color.white,\n display: 'flex',\n fontSize: '14px',\n fontWeight: 500,\n height: '25px',\n justifyContent: 'center',\n lineHeight: '17px',\n marginBottom: '6px',\n padding: '0 8px',\n },\n\n ctaButton: {\n alignItems: 'center',\n border: `1px solid ${theme.color.indigo}`,\n borderRadius: '100px',\n color: theme.color.indigo,\n display: 'flex',\n fontSize: '14px',\n justifyContent: 'center',\n letterSpacing: '0.01px',\n lineHeight: '17px',\n marginTop: 'auto',\n padding: '8px 0',\n textDecoration: 'none',\n transition: '500ms',\n\n '&:hover': {\n backgroundColor: theme.color.indigo,\n color: theme.color.white,\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles, Typography } from '@material-ui/core/';\nimport PropTypes from 'prop-types';\nimport { VideoLibrary, AccessTime } from '@material-ui/icons';\nimport { withI18n } from 'react-i18next';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport styles from './styles';\n\nconst CollabItem = ({ classes, item, t }) => (\n \n
\n
\n
\n\n
\n
{item.name} \n\n
\n
\n
{`${item.lessons} aulas`} \n\n
\n
{`${item.duration}`} \n
\n\n {item.premium && (\n <>\n
{`${item.description}`} \n\n
\n \n {formatCurrency(item.totalPrice)}\n \n\n\n \n {formatCurrency(item.newPrice)}\n \n
\n \n )}\n\n
\n {item.premium ? t('mktPlace.colab.acquireButton') : t('mktPlace.colab.accessButton')}\n \n\n
\n
\n
\n \n {collabItems.filter(item => (value === 0 ? item.premium : !item.premium)).map(item => (\n
\n toggleShowModal(false)}\n maxWidth=\"lg\"\n aria-labelledby=\"alert-dialog-title\"\n aria-describedby=\"alert-dialog-description\"\n data-testid=\"modalCollabPlay\"\n >\n toggleShowModal(false)}\n >\n \n {t('mktPlace.colab.modalTitle')}\n \n\n \n \n {t('mktPlace.colab.modalDescription')}\n \n\n \n \n );\n};\n\nexport default withI18n()(withWidth()(withStyles(styles, { withTheme: true })(ModalCollabPlay)));\n","const styles = theme => ({\n cardsWrapper: {\n display: 'grid',\n gridTemplateColumns: 'repeat(4, 1fr)',\n gap: '16px 24px',\n\n [theme.breakpoints.down(1280)]: {\n gridTemplateColumns: 'repeat(3, 1fr)',\n },\n [theme.breakpoints.down(960)]: {\n gridTemplateColumns: 'repeat(2, 1fr)',\n },\n [theme.breakpoints.down(600)]: {\n gridTemplateColumns: '1fr',\n padding: '24px',\n },\n },\n\n emptyCard: {\n backgroundColor: theme.color.white,\n boxShadow: `0 3px 6px ${theme.color.tundoraLight}`,\n width: 'calc(100% - 22px)',\n margin: '0 11px',\n padding: 24,\n textAlign: 'center',\n },\n\n emptyTitle: {\n color: theme.color.tundora,\n fontSize: '24px',\n fontWeight: 500,\n lineHeight: '29px',\n margin: '0 auto 6px',\n },\n\n emptySubTitle: {\n color: theme.color.tundora,\n fontSize: '16px',\n fontWeight: 400,\n lineHeight: '19px',\n margin: '0 auto',\n maxWidth: 702,\n },\n\n card: {\n backgroundColor: theme.color.white,\n boxShadow: '0 3px 6px #00000029',\n display: 'flex',\n flex: '0 0 calc(25% - 22px)',\n flexDirection: 'column',\n height: '262px',\n justifyContent: 'space-between',\n margin: '0 11px 11px 11px',\n padding: '24px 24px 0 24px',\n borderRadius: '2px',\n\n [theme.breakpoints.down(1340)]: {\n flex: '0 0 calc(33.33% - 22px)',\n },\n\n [theme.breakpoints.down(1069)]: {\n flex: '0 0 calc(50% - 22px)',\n },\n\n [theme.breakpoints.down(519)]: {\n flex: '0 0 calc(100% - 22px)',\n },\n },\n\n outLineButtonClass: {\n alignItems: 'center',\n border: `1px solid ${theme.color.geyser}`,\n borderRadius: '2px',\n color: theme.color.indigo,\n display: 'flex',\n fontSize: '14dp',\n height: 35,\n justifyContent: 'center',\n letterSpacing: '0.01px',\n lineHeight: '17px',\n marginBottom: 24,\n textDecoration: 'none',\n textTransform: 'uppercase',\n transition: '300ms',\n fontWeight: 500,\n\n '&:hover': {\n backgroundColor: theme.color.indigo,\n border: `1px solid ${theme.palette.primary.dark}`,\n color: theme.color.white,\n opacity: '1.0',\n },\n },\n\n\n description: {\n color: theme.color.tundora,\n fontSize: '14px',\n lineHeight: '17px',\n textAlign: 'center',\n },\n\n tagsWrapper: {\n display: 'flex',\n flexDirection: 'row-reverse',\n justifyContent: 'center',\n },\n\n cardTag: {\n color: theme.color.white,\n fontSize: '12px',\n height: '22px',\n letterSpacing: '0.01px',\n lineHeight: '14px',\n margin: '0 3px',\n },\n\n featuredTag: {\n backgroundColor: theme.color.coral,\n border: `1px solid ${theme.color.coral}`,\n },\n\n logo: {\n margin: '0 auto',\n maxHeight: 46,\n maxWidth: '100%',\n },\n});\n\nexport default styles;\n","import React, { useContext } from 'react';\nimport { withI18n } from 'react-i18next';\nimport {\n withStyles,\n Typography,\n} from '@material-ui/core';\nimport { MktPlaceContext } from '@/contexts/MktPlace/context';\n\nimport { tagList } from '@/contexts/MktPlace/values';\nimport { Card } from '@/pages/MktPlace/Card';\nimport {\n mktPlaceAcquireButton, cardCobreFacilClickButton, cardTraktoClickButton, cardCreditasClickButton,\n} from '@/utils/ThirdParties/tagManager';\nimport Loader from '@/components/Layout/Loader';\nimport ModalCollabPlay from '@/components/Modal/ModalCollabPlay';\nimport styles from './styles';\n\nconst ListSection = ({ t, classes }) => {\n const {\n filterLoading, renderedCards, toggleShowModal,\n } = useContext(MktPlaceContext);\n\n const handleClick = ({ name, modal }) => {\n if (name === 'Cobre Fácil') {\n cardCobreFacilClickButton();\n } else if (name === 'Trakto') {\n cardTraktoClickButton();\n } else if (name === 'Creditas') {\n cardCreditasClickButton();\n } else {\n mktPlaceAcquireButton({ name, menu: false });\n\n if (modal) {\n toggleShowModal(true);\n }\n }\n };\n\n return (\n filterLoading\n ? \n
\n\n {renderedCards.length === 0\n ? (\n
\n {t('mktPlace.emptyCardTitle')} \n {t('mktPlace.emptyCardSubTitle')} \n
\n )\n : renderedCards.map(card => (\n
\n ))}\n
\n {shouldDisplay\n && (\n \n \n )}\n \n );\n};\n\nexport default withI18n()(withStyles(styles)(MktPlace));\n","import { CALL_API } from '@/middleware/api';\nimport {\n SITELOCK_DOMAINS,\n SITELOCK_PRICE,\n SITELOCK_SCAN,\n SITELOCK_QUEUE,\n SITELOCK_COMPLETE_SCAN,\n SITELOCK_CHECK_SCAN_STATUS,\n SITELOCK_SHIELD,\n SITELOCK_SMARTSCAN,\n SITELOCK_COMPLETE_SMARTSCAN,\n SITELOCK_SMARTSCAN_CONFIG,\n SITELOCK_SMARTSCAN_FILE,\n SITELOCK_HML_PAYMENT_METHOD,\n SITELOCK_PROFESSIONAL_HML_CHECKOUT_PRODUCT,\n SITELOCK_PROFESSIONAL_BUY_FAST_CHECKOUT,\n CODEGUARD_PRICE,\n} from '@/config/api';\nimport { COUNTRY, config } from '@/config';\nimport { makeParamsUrl } from '@/utils/Formatters/handleStrings';\nimport { checkoutProductAdapter } from '@/utils/Formatters/checkoutProductAdapter';\nimport {\n REQUEST_SITELOCK_DOMAINS,\n RECEIVE_SITELOCK_DOMAINS,\n ERROR_SITELOCK_DOMAINS,\n ABORT_SITELOCK_REQUEST_DOMAINS,\n SET_SITELOCK_PRODUCT,\n RECEIVE_SITELOCK_STATUS_SCAN,\n REQUEST_SITELOCK_STATUS_SCAN,\n ERROR_SITELOCK_STATUS_SCAN,\n RECEIVE_SITELOCK_SCAN,\n REQUEST_SITELOCK_SCAN,\n REQUEST_SITELOCK_PRICE,\n RECEIVE_SITELOCK_PRICE,\n ERROR_SITELOCK_PRICE,\n ABORT_SITELOCK_REQUEST_PRICE,\n REQUEST_SITELOCK_COMPLETE_SCAN,\n RECEIVE_SITELOCK_COMPLETE_SCAN,\n REQUEST_SITELOCK_COMPLETE_SMARTSCAN,\n RECEIVE_SITELOCK_COMPLETE_SMARTSCAN,\n ERROR_SITELOCK_COMPLETE_SMARTSCAN,\n ERROR_SITELOCK_COMPLETE_SCAN,\n REQUEST_SITELOCK_SCAN_STATUS,\n RECEIVE_SITELOCK_SCAN_STATUS,\n RECEIVE_SITELOCK_SCAN_STATUS_PENDING,\n REQUEST_SITELOCK_SHIELD,\n RECEIVE_SITELOCK_SHIELD,\n ERROR_SITELOCK_SHIELD,\n REQUEST_SITELOCK_SHIELD_UPDATE,\n RECEIVE_SITELOCK_SHIELD_UPDATE,\n ERROR_SITELOCK_SHIELD_UPDATE,\n REQUEST_SITELOCK_SMARTSCAN_UPDATE,\n RECEIVE_SITELOCK_SMARTSCAN_UPDATE,\n ERROR_SITELOCK_SMARTSCAN_UPDATE,\n REQUEST_SITELOCK_SMARTSCAN_AUTOCONFIG,\n RECEIVE_SITELOCK_SMARTSCAN_AUTOCONFIG,\n ERROR_SITELOCK_SMARTSCAN_AUTOCONFIG,\n SITELOCK_CLEAR,\n REQUEST_SITELOCK_SMARTSCAN_FILE_DOWNLOAD,\n RECEIVE_SITELOCK_SMARTSCAN_FILE_DOWNLOAD,\n ERROR_SITELOCK_SMARTSCAN_FILE_DOWNLOAD,\n ABORT_SITELOCK_PAYMENT_METHOD,\n REQUEST_SITELOCK_PAYMENT_METHOD,\n RECEIVE_SITELOCK_PAYMENT_METHOD,\n ERROR_SITELOCK_PAYMENT_METHOD,\n ABORT_SITELOCK_PROFESSIONAL_PRICE,\n REQUEST_SITELOCK_PROFESSIONAL_PRICE,\n RECEIVE_SITELOCK_PROFESSIONAL_PRICE,\n ERROR_SITELOCK_PROFESSIONAL_PRICE,\n ABORT_SITELOCK_PROFESSIONAL_BUY_FAST_CHECKOUT,\n REQUEST_SITELOCK_PROFESSIONAL_BUY_FAST_CHECKOUT,\n RECEIVE_SITELOCK_PROFESSIONAL_BUY_FAST_CHECKOUT,\n ERROR_SITELOCK_PROFESSIONAL_BUY_FAST_CHECKOUT,\n REQUEST_CODEGUARD_PRICE,\n ERROR_CODEGUARD_PRICE,\n RECEIVE_CODEGUARD_PRICE,\n} from './actionsTypes';\n\nexport const receiveDomains = (sitelock) => {\n const {\n loaded_date: loadedDate, standalone, addon,\n } = sitelock;\n const total = standalone.length + addon.length;\n\n return {\n type: RECEIVE_SITELOCK_DOMAINS,\n loadedDate,\n standalone,\n addon,\n total,\n };\n};\n\nexport const receiveShield = (sitelock) => {\n const {\n color, size, type, language,\n } = sitelock.data;\n const shield = {\n color,\n size,\n type,\n language,\n };\n\n return {\n type: RECEIVE_SITELOCK_SHIELD,\n shield,\n };\n};\n\n\nexport const loadDomains = () => (dispatch, getState) => {\n const { loadedDate } = getState().sitelock;\n\n if (Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise((resolve) => {\n resolve(dispatch({ type: ABORT_SITELOCK_REQUEST_DOMAINS }));\n });\n }\n\n return dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: SITELOCK_DOMAINS,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_SITELOCK_DOMAINS }),\n success: response => receiveDomains(response.data),\n error: () => ({ type: ERROR_SITELOCK_DOMAINS }),\n },\n },\n });\n};\n\nexport const receiveAutoconfig = resp => (resp.success ? { type: RECEIVE_SITELOCK_SMARTSCAN_AUTOCONFIG, data: resp.data } : { type: ERROR_SITELOCK_SMARTSCAN_AUTOCONFIG });\n\nexport const receiveScanStatus = (sitelock) => {\n const status = sitelock.data;\n\n if (status.scanning) {\n return {\n type: RECEIVE_SITELOCK_SCAN_STATUS_PENDING,\n status,\n };\n }\n\n const {\n name, attention_flag: attentionFlag, last_scan: lastScan, next_scan: nextScan, issues,\n } = sitelock.api;\n\n return {\n type: RECEIVE_SITELOCK_SCAN_STATUS,\n status,\n scanning: false,\n name,\n attentionFlag: (attentionFlag === undefined) ? 'red' : attentionFlag,\n lastScan: new Date(`${lastScan}T00:00:00`),\n nextScan: new Date(`${nextScan}T00:00:00`),\n issues,\n };\n};\n\nexport const buySiteLock = ({\n productId, paymentMethod, productCycle, productDomain,\n}) => async (dispatch, getState) => {\n const { isLoading } = getState().sitelock.buyFastcheckout;\n\n if (isLoading) {\n return Promise.resolve(dispatch({ type: ABORT_SITELOCK_PROFESSIONAL_BUY_FAST_CHECKOUT }));\n }\n\n const bodyObject = {\n products: [\n {\n id: productId,\n type: 'product',\n domain: productDomain,\n quantity: 1,\n cycle: productCycle,\n },\n ],\n payment_method: paymentMethod,\n offer_contexts: [\n 'sitelock_landing_page_cta_top',\n ],\n };\n\n return dispatch({\n [CALL_API]: {\n endpoint: SITELOCK_PROFESSIONAL_BUY_FAST_CHECKOUT,\n method: 'POST',\n body: bodyObject,\n actionTypes: {\n request: () => ({ type: REQUEST_SITELOCK_PROFESSIONAL_BUY_FAST_CHECKOUT }),\n success: response => ({ type: RECEIVE_SITELOCK_PROFESSIONAL_BUY_FAST_CHECKOUT, data: { ...response, paymentMethod, invoice_id: response.data.invoice_id } }),\n error: () => ({ type: ERROR_SITELOCK_PROFESSIONAL_BUY_FAST_CHECKOUT }),\n },\n },\n });\n};\n\nexport const receiveScan = (sitelock) => {\n const {\n name, attention_flag: attentionFlag, last_scan: lastScan, next_scan: nextScan, issues,\n } = sitelock.api;\n const {\n scan_limit: scanLimitReached, scanning, domain, product, smartscan,\n } = sitelock.data;\n return {\n type: RECEIVE_SITELOCK_STATUS_SCAN,\n name,\n attentionFlag,\n scanning,\n issues,\n domain,\n product,\n scanLimitReached,\n smartscan,\n lastScan: new Date(`${lastScan}T00:00:00`),\n nextScan: new Date(`${nextScan}T00:00:00`),\n };\n};\n\nexport const receiveCompleteScan = sitelock => (\n {\n type: RECEIVE_SITELOCK_COMPLETE_SCAN,\n completeScan: sitelock.data,\n }\n);\n\nexport const receiveCompleteSMARTScan = (sitelock) => {\n const SMARTScanHistory = [...sitelock.data];\n return (\n {\n type: RECEIVE_SITELOCK_COMPLETE_SMARTSCAN,\n history: SMARTScanHistory,\n }\n );\n};\n\nexport const setDomain = (productType = 'addon', productId) => (dispatch) => {\n dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: makeParamsUrl(SITELOCK_SCAN, productType, productId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_SITELOCK_STATUS_SCAN }),\n success: response => receiveScan(response),\n error: () => ({ type: ERROR_SITELOCK_STATUS_SCAN }),\n },\n },\n });\n return dispatch({\n type: SET_SITELOCK_PRODUCT,\n productId: parseInt(productId, 10),\n productType,\n });\n};\n\nexport const requestScan = (productType, productId) => dispatch => dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: makeParamsUrl(SITELOCK_QUEUE, productType, productId),\n method: 'POST',\n actionTypes: {\n request: () => ({ type: REQUEST_SITELOCK_SCAN }),\n success: response => dispatch({ type: RECEIVE_SITELOCK_SCAN, scanned: response.scanned }),\n error: () => ({ type: ERROR_SITELOCK_DOMAINS }),\n },\n },\n});\n\nexport const checkScanStatus = (productType, productId) => dispatch => dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: makeParamsUrl(SITELOCK_CHECK_SCAN_STATUS, productType, productId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_SITELOCK_SCAN_STATUS }),\n success: response => receiveScanStatus(response),\n error: () => ({ type: ERROR_SITELOCK_DOMAINS }),\n },\n },\n});\n\nexport const requestCompleteScan = (productType, productId) => dispatch => dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: makeParamsUrl(SITELOCK_COMPLETE_SCAN, productType, productId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_SITELOCK_COMPLETE_SCAN }),\n success: response => receiveCompleteScan(response),\n error: () => ({ type: ERROR_SITELOCK_COMPLETE_SCAN }),\n },\n },\n});\n\nexport const requestCompleteSMARTScan = (productType, productId) => dispatch => dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: makeParamsUrl(SITELOCK_COMPLETE_SMARTSCAN, productType, productId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_SITELOCK_COMPLETE_SMARTSCAN }),\n success: response => receiveCompleteSMARTScan(response),\n error: () => ({ type: ERROR_SITELOCK_COMPLETE_SMARTSCAN }),\n },\n },\n});\n\nexport const receiveSitelockPrice = (sitelock) => {\n const { basic_price: basicPrice } = sitelock;\n\n return {\n type: RECEIVE_SITELOCK_PRICE,\n basicPrice,\n };\n};\n\nexport const receiveCodeGuardPrice = (codeGuard) => {\n const { basic_price: basicPrice } = codeGuard;\n\n return {\n type: RECEIVE_CODEGUARD_PRICE,\n basicPrice,\n };\n};\n\nexport const getPrices = () => (dispatch, getState) => {\n const { priceLoadedDate } = getState().sitelock.cta;\n if ((Date.now() - priceLoadedDate) < config.CACHE_TIME) {\n return Promise.resolve(dispatch({ type: ABORT_SITELOCK_PROFESSIONAL_PRICE }));\n }\n\n return dispatch({\n [CALL_API]: {\n authenticated: false,\n endpoint: SITELOCK_PROFESSIONAL_HML_CHECKOUT_PRODUCT,\n method: 'GET',\n customHeaders: {\n brand: COUNTRY,\n Accept: 'application/json, text/plain, */*',\n },\n actionTypes: {\n request: () => ({ type: REQUEST_SITELOCK_PROFESSIONAL_PRICE }),\n success: response => ({ type: RECEIVE_SITELOCK_PROFESSIONAL_PRICE, data: checkoutProductAdapter(response) }),\n error: () => ({ type: ERROR_SITELOCK_PROFESSIONAL_PRICE }),\n },\n },\n });\n};\n\nexport const getPaymentMethods = () => (dispatch, getState) => {\n const { paymentLoadedDate } = getState().sitelock.cta;\n if ((Date.now() - paymentLoadedDate) < config.CACHE_TIME) {\n return Promise.resolve(dispatch({ type: ABORT_SITELOCK_PAYMENT_METHOD }));\n }\n\n return dispatch({\n [CALL_API]: {\n authenticated: false,\n endpoint: SITELOCK_HML_PAYMENT_METHOD,\n method: 'GET',\n customHeaders: {\n brand: COUNTRY,\n },\n actionTypes: {\n request: () => ({ type: REQUEST_SITELOCK_PAYMENT_METHOD }),\n success: response => ({ type: RECEIVE_SITELOCK_PAYMENT_METHOD, data: response }),\n error: () => ({ type: ERROR_SITELOCK_PAYMENT_METHOD }),\n },\n },\n });\n};\n\nexport const loadBasicPrice = () => (dispatch, getState) => {\n const { loadedDate } = getState().sitelock;\n\n if (Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise((resolve) => {\n resolve(dispatch({ type: ABORT_SITELOCK_REQUEST_PRICE }));\n });\n }\n\n dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: CODEGUARD_PRICE,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_CODEGUARD_PRICE }),\n success: response => receiveCodeGuardPrice(response.data),\n error: () => ({ type: ERROR_CODEGUARD_PRICE }),\n },\n },\n });\n\n return dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: SITELOCK_PRICE,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_SITELOCK_PRICE }),\n success: response => receiveSitelockPrice(response.data),\n error: () => ({ type: ERROR_SITELOCK_PRICE }),\n },\n },\n });\n};\n\nexport const requestShield = (productType, productId) => dispatch => dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: makeParamsUrl(SITELOCK_SHIELD, productType, productId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_SITELOCK_SHIELD }),\n success: response => receiveShield(response),\n error: () => ({ type: ERROR_SITELOCK_SHIELD }),\n },\n },\n});\n\nexport const updateShield = (productType, productId, data) => dispatch => dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: makeParamsUrl(SITELOCK_SHIELD, productType, productId),\n method: 'POST',\n body: data,\n actionTypes: {\n request: () => ({ type: REQUEST_SITELOCK_SHIELD_UPDATE }),\n success: () => dispatch({ type: RECEIVE_SITELOCK_SHIELD_UPDATE }),\n error: () => ({ type: ERROR_SITELOCK_SHIELD_UPDATE }),\n },\n },\n});\n\nexport const updateSMART = (productType, productId, data) => dispatch => dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: makeParamsUrl(SITELOCK_SMARTSCAN, productType, productId),\n method: 'POST',\n body: data,\n actionTypes: {\n request: () => ({ type: REQUEST_SITELOCK_SMARTSCAN_UPDATE }),\n success: () => response => dispatch({ type: RECEIVE_SITELOCK_SMARTSCAN_UPDATE, data: response.data }),\n error: () => ({ type: ERROR_SITELOCK_SMARTSCAN_UPDATE }),\n },\n },\n});\n\nexport const configureSMART = (productType, productId) => dispatch => dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: makeParamsUrl(SITELOCK_SMARTSCAN_CONFIG, productType, productId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_SITELOCK_SMARTSCAN_AUTOCONFIG }),\n success: response => receiveAutoconfig(response),\n error: () => ({ type: ERROR_SITELOCK_SMARTSCAN_AUTOCONFIG }),\n },\n },\n});\n\nexport const downloadSMARTFile = download => dispatch => dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: `${SITELOCK_SMARTSCAN_FILE}${download}`,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_SITELOCK_SMARTSCAN_FILE_DOWNLOAD, file: download }),\n success: response => ({ type: RECEIVE_SITELOCK_SMARTSCAN_FILE_DOWNLOAD, file: download, fileData: response }),\n error: () => ({ type: ERROR_SITELOCK_SMARTSCAN_FILE_DOWNLOAD, file: download }),\n },\n },\n});\n\nexport const clearSitelock = () => ({ type: SITELOCK_CLEAR });\n","import { CALL_API } from '@/middleware/api';\nimport {\n CODEGUARD_DOMAINS, CODEGUARD_BUY_FAST_CHECKOUT, CODEGUARD_HML_PAYMENT_METHOD, CODEGUARD_PRICE, CODEGUARD_HML_CHECKOUT_PRODUCT,\n} from '@/config/api';\nimport { COUNTRY, config } from '@/config';\nimport {\n RECEIVE_CODEGUARD_PRICE,\n REQUEST_CODEGUARD_DOMAINS,\n RECEIVE_CODEGUARD_DOMAINS,\n ERROR_CODEGUARD_DOMAINS,\n ABORT_CODEGUARD_DOMAINS,\n RECEIVE_CODEGUARD_BASIC_PRICE,\n REQUEST_CODEGUARD_BASIC_PRICE,\n ABORT_CODEGUARD_BASIC_PRICE,\n ERROR_CODEGUARD_BASIC_PRICE,\n ABORT_CODEGUARD_BUY_FAST_CHECKOUT,\n REQUEST_CODEGUARD_BUY_FAST_CHECKOUT,\n RECEIVE_CODEGUARD_BUY_FAST_CHECKOUT,\n ERROR_CODEGUARD_BUY_FAST_CHECKOUT,\n ABORT_CODEGUARD_PAYMENT_METHOD,\n REQUEST_CODEGUARD_PAYMENT_METHOD,\n RECEIVE_CODEGUARD_PAYMENT_METHOD,\n ERROR_CODEGUARD_PAYMENT_METHOD,\n} from './actionsTypes';\nimport { checkoutProductAdapter } from '@/utils/Formatters/checkoutProductAdapter';\n\nexport const receiveDomains = (codeguards) => {\n const { codeguard } = codeguards;\n return {\n type: RECEIVE_CODEGUARD_DOMAINS,\n codeguard,\n total: codeguard.length,\n };\n};\n\nexport const loadCGDomains = () => (dispatch, getState) => {\n const { loadedDate } = getState().codeguard;\n\n if (Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise((resolve) => {\n resolve(dispatch({ type: ABORT_CODEGUARD_DOMAINS }));\n });\n }\n\n return dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: CODEGUARD_DOMAINS,\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_CODEGUARD_DOMAINS }),\n success: response => receiveDomains(response.data),\n error: () => ({ type: ERROR_CODEGUARD_DOMAINS }),\n },\n },\n });\n};\n\nexport const receivePrice = (codeguards) => {\n const { prices: basicPrice } = codeguards;\n\n return {\n type: RECEIVE_CODEGUARD_BASIC_PRICE,\n basicPrice,\n };\n};\n\nexport const getPrices = () => (dispatch, getState) => {\n const { loadedDate } = getState().codeguard;\n\n if (Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise((resolve) => {\n resolve(dispatch({ type: ABORT_CODEGUARD_BASIC_PRICE }));\n });\n }\n\n return dispatch({\n [CALL_API]: {\n authenticated: false,\n endpoint: CODEGUARD_HML_CHECKOUT_PRODUCT,\n method: 'GET',\n customHeaders: {\n brand: COUNTRY,\n Accept: 'application/json, text/plain, */*',\n },\n actionTypes: {\n request: () => ({ type: REQUEST_CODEGUARD_BASIC_PRICE }),\n success: response => ({ type: RECEIVE_CODEGUARD_BASIC_PRICE, data: checkoutProductAdapter(response) }),\n error: () => ({ type: ERROR_CODEGUARD_BASIC_PRICE }),\n },\n },\n });\n};\n\n\nexport const receiveCodeGuardPrice = (codeGuard) => {\n const { basic_price: basicPrice } = codeGuard;\n\n return {\n type: RECEIVE_CODEGUARD_PRICE,\n basicPrice,\n };\n};\n\nexport const loadBasicPrice = () => (dispatch, getState) => {\n const { loadedDate } = getState().codeguard;\n\n if (Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise((resolve) => {\n resolve(dispatch({ type: ABORT_CODEGUARD_BASIC_PRICE }));\n });\n }\n\n return dispatch({\n [CALL_API]: {\n authenticated: false,\n endpoint: CODEGUARD_PRICE,\n method: 'GET',\n customHeaders: {\n brand: COUNTRY,\n Accept: 'application/json, text/plain, */*',\n },\n actionTypes: {\n request: () => ({ type: REQUEST_CODEGUARD_BASIC_PRICE }),\n success: response => receiveCodeGuardPrice(response.data),\n error: () => ({ type: ERROR_CODEGUARD_BASIC_PRICE }),\n },\n },\n });\n};\n\nexport const getPaymentMethodsCG = () => (dispatch, getState) => {\n const { paymentLoadedDate } = getState().codeguard.cta;\n if ((Date.now() - paymentLoadedDate) < config.CACHE_TIME) {\n return Promise.resolve(dispatch({ type: ABORT_CODEGUARD_PAYMENT_METHOD }));\n }\n\n return dispatch({\n [CALL_API]: {\n authenticated: false,\n endpoint: CODEGUARD_HML_PAYMENT_METHOD,\n method: 'GET',\n customHeaders: {\n brand: COUNTRY,\n },\n actionTypes: {\n request: () => ({ type: REQUEST_CODEGUARD_PAYMENT_METHOD }),\n success: response => ({ type: RECEIVE_CODEGUARD_PAYMENT_METHOD, data: response }),\n error: () => ({ type: ERROR_CODEGUARD_PAYMENT_METHOD }),\n },\n },\n });\n};\n\nexport const buyCodeGuard = ({\n productId, paymentMethod, productCycle, productDomain,\n}) => async (dispatch, getState) => {\n const { isLoading } = getState().codeguard.buyFastcheckout;\n\n if (isLoading) {\n return Promise.resolve(dispatch({ type: ABORT_CODEGUARD_BUY_FAST_CHECKOUT }));\n }\n\n const bodyObject = {\n products: [\n {\n id: productId,\n domain: productDomain,\n cycle: productCycle,\n type: 'product',\n quantity: 1,\n },\n ],\n payment_method: paymentMethod,\n offer_contexts: [\n 'codeguard_landing_page_cta_top',\n ],\n };\n\n return dispatch({\n [CALL_API]: {\n endpoint: CODEGUARD_BUY_FAST_CHECKOUT,\n method: 'POST',\n body: bodyObject,\n actionTypes: {\n request: () => ({ type: REQUEST_CODEGUARD_BUY_FAST_CHECKOUT }),\n success: response => ({ type: RECEIVE_CODEGUARD_BUY_FAST_CHECKOUT, data: { ...response, paymentMethod, invoice_id: response.data.invoice_id } }),\n error: () => ({ type: ERROR_CODEGUARD_BUY_FAST_CHECKOUT }),\n },\n },\n });\n};\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { createContext, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useParams } from 'react-router-dom';\nimport {\n loadBasicPrice, loadDomains, setDomain, requestCompleteScan, requestShield, clearSitelock, requestCompleteSMARTScan, getPaymentMethods, getPrices,\n} from '@/redux/actions/sitelock';\nimport { loadDomains as loadAllDomains } from '@/redux/actions/domains';\nimport { loadFaqSecurity } from '@/redux/actions/faq';\nimport { loadCGDomains } from '@/redux/actions/codeguard';\n\nexport const SecurityContext = createContext();\n\nconst SecurityContextProvider = ({ children }) => {\n const dispatch = useDispatch();\n const params = useParams();\n const sitelockProducts = useSelector(state => state.sitelock);\n const sitelockCta = useSelector(state => state.sitelock.cta);\n const codeguardProducts = useSelector(state => state.codeguard);\n\n useEffect(() => {\n dispatch(loadAllDomains({}));\n }, [dispatch]);\n\n useEffect(() => {\n const noProductType = params.productType === undefined;\n const noProductId = params.productId === undefined;\n const noCompleteScan = sitelockProducts.completeScan === null;\n const noSmartScanHistory = sitelockProducts.smartscan.history === null;\n const noSitelockProducts = !sitelockProducts.sitelockProduct;\n\n if (!noProductType && !noProductId) {\n noCompleteScan && dispatch(requestCompleteScan(params.productType, params.productId));\n\n noSmartScanHistory && dispatch(requestCompleteSMARTScan(params.productType, params.productId));\n\n noSitelockProducts && dispatch(setDomain(params.productType, params.productId));\n\n dispatch(requestShield(params.productType, params.productId));\n\n dispatch(loadFaqSecurity());\n }\n\n if (sitelockCta !== undefined) {\n if (!sitelockCta.paymentMethods.length && sitelockCta.isLoadingPayment === false) {\n dispatch(getPaymentMethods());\n }\n if (!sitelockCta.prices.length && sitelockCta.isLoadingPrices === false) {\n dispatch(getPrices());\n }\n }\n\n if (sitelockProducts.basicPrice === null) {\n dispatch(loadBasicPrice());\n }\n\n if (!sitelockProducts.loadingDomains) {\n dispatch(loadDomains({}));\n }\n\n if (!codeguardProducts.loadingDomains) {\n dispatch(loadCGDomains());\n }\n }, []);\n\n useEffect(() => {\n dispatch(clearSitelock());\n }, [params]);\n\n useEffect(() => {\n if (sitelockCta !== undefined) {\n if (!sitelockCta.prices.length && sitelockCta.isLoadingPrices === false) {\n dispatch(getPrices());\n }\n }\n }, [sitelockCta]);\n\n\n const values = {\n sitelockProducts,\n };\n\n\n return (\n key}>\n {children}\n \n );\n};\n\nSecurityContextProvider.propTypes = {\n children: PropTypes.node,\n};\n\nSecurityContextProvider.defaultProps = {\n children: null,\n};\n\nexport default SecurityContextProvider;\n","import styled, { css } from 'styled-components';\n\nexport const SelectOptionWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 16px;\n\n span {\n display: block;\n max-width: 218px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n max-width: 180px;\n }\n }\n\n div {\n display: inline-flex;\n position: relative;\n }\n `}\n`;\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n background-color:${theme.v2.colors.white.primary};\n padding: 24px;\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px 16px 0px;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 16px 0px;\n `}\n`;\n\nexport const SelectWrapper = styled.div`\n margin: 23px 0px 0px;\n max-width: 498px;\n padding: 0px 16px;\n`;\n\nexport const ActionsWrapper = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n margin: 32px 0px 16px;\n\n @media (max-width: 600px){\n margin: auto 0px 60px\n }\n`;\n","import React from 'react';\nimport { Modal } from '@/pages/common';\nimport * as Styles from './BackupModal.styles';\nimport { Button, IconLoading, Select } from 'gatorcomponents';\nimport { useResize } from '@/hooks/useResize';\n\nconst BackupModal = ({\n onClose,\n securityLocale,\n productsLoading,\n productsOptions,\n selectedProduct,\n setSelectedProduct,\n goToBackup,\n setSelectedId,\n}) => {\n const windowRect = useResize();\n const { width } = windowRect;\n const isMobile = width < 960;\n\n const handleClose = () => {\n onClose && onClose();\n };\n\n const handleOpen = () => {\n goToBackup && goToBackup();\n };\n\n return (\n \n \n {securityLocale.modal.title}\n \n\n \n {securityLocale.modal.description}\n \n\n \n {productsLoading\n ? setSelectedId(e.value)}\n setValue={label => setSelectedProduct(label)}\n withScroll\n dropdownHeight={isMobile ? 'md' : 'sm'}\n />\n )\n }\n \n\n \n \n \n );\n};\n\nexport default BackupModal;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n margin: 0 24px;\n padding: 0px 0px 24px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 0px;\n }\n `}\n`;\n\nexport const CardsContainer = styled.div`\n ${({ theme }) => css`\n background-color:${theme.v2.colors.white.primary};\n padding: 32px;\n\n @media (max-width:${theme.v2.breakpoints.lg}) {\n padding: 24px 20px;\n }\n `}\n`;\n\nexport const CardsTitle = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const CardsDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 32px 0px 0px;\n `}\n`;\n\nexport const CardsWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 24px;\n justify-content: flex-start;\n margin: 32px 0px 0px;\n max-width:1032px;\n\n @media (max-width:${theme.v2.breakpoints.lg}) {\n align-items: center;\n flex-direction: column;\n gap: 32px;\n }\n`}\n`;\n\nexport const Card = styled.div`\n ${({ theme }) => css`\n border-radius: 8px;\n border: 1px solid ${theme.v2.colors.feedback.canceledPure};\n display: flex;\n flex-direction: column;\n max-width: 328px;\n min-width: 328px;\n padding: 37px 24px 39px;\n position: relative;\n width: 100%;\n `}\n`;\n\nexport const FeatureWrapper = styled.div`\n position: absolute;\n right: 5px;\n top: 5px;\n`;\n\nexport const CardItemTitle = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.feedback.attentionLight};\n border-radius: 20px;\n color: ${theme.v2.colors.brand.primaryDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px auto;\n padding: 0px 10px;\n text-align: center;\n width: fit-content;\n `}\n`;\n\nexport const CardImageWrapper = styled.div`\n align-items: flex-start;\n display: flex;\n margin: 18px 0px;\n min-height: 60px;\n`;\n\nexport const CardImage = styled.img`\n display: block;\n margin: 0px auto;\n`;\n\nexport const CardList = styled.ul`\n margin: 0px 0px 18px;\n padding: 0px 0px 0px 18px;\n`;\n\nexport const CardListItem = styled.li`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.list};\n \n strong {\n font-weight: ${theme.v2.font.weights.bold};\n }\n `}\n`;\n\nexport const CardActionWrapper = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n margin: auto 0px 0px;\n`;\n\nexport const SelectOptionWrapper = styled.div`\n display: flex;\n gap: 16px;\n\n span {\n display: block;\n max-width: 218px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n div {\n display: inline-flex;\n position: relative;\n }\n`;\n","import useLocale from '@/hooks/useLocale/useLocale';\nimport * as Styles from './Cards.styles';\nimport React from 'react';\nimport { Button } from 'gatorcomponents';\nimport { IconFeatured } from '@/icons';\n\nconst Cards = ({\n handleClickAccess,\n}) => {\n const { security: securityLocale } = useLocale();\n const handleAccess = (id) => {\n handleClickAccess && handleClickAccess(id);\n };\n return (\n \n \n \n {securityLocale.cards.title}\n \n\n \n {securityLocale.cards.description}\n \n\n \n {securityLocale.cards.items.map(item => (\n \n {item.id === 'codeguard' && (\n \n \n )}\n\n \n {item.title}\n \n\n \n \n\n \n {item.list.map(listItem => (\n \n {listItem}\n \n ))}\n \n\n \n handleAccess(item.id)}\n />\n \n \n ))}\n \n \n \n );\n};\n\nexport default Cards;\n","import styled, { css } from 'styled-components';\n\nexport const ProductListWrapper = styled.ul`\n padding: 0;\n`;\n\nexport const Product = styled.li`\n list-style: none;\n`;\n\nexport const FilterWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n margin: -9px 24px 0px 24px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 0px;\n }\n `}\n`;\n\nexport const ProductsListWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n font-family: ${theme.v2.font.family.primary};\n margin: 16px 24px;\n padding: 26px 24px 60px 24px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 16px 0px;\n padding: 10px 10px 60px 24px;\n }\n `}\n`;\n\nexport const ProductsListLoading = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const ProductData = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-wrap: wrap;\n gap: 85px;\n padding-left: 7px;\n padding-right: 15px;\n\n svg {\n margin-right: 15px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n gap: 0\n }\n `}\n`;\nexport const ProductIdentify = styled.div`\n display: flex;\n flex: 1;\n`;\n\nexport const ProductTitle = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: column;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n `}\n`;\n\nexport const ProductDomain = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: ${theme.v2.font.sizes.xxxs};\n margin-top: 7px;\n margin-bottom: 0px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n width: 360px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n width: 148px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n `}\n`;\n\nexport const TagWrapper = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n position: relative;\n width: 110px;\n\n @media (max-width: 350px) {\n margin-left: 40px;\n margin-top: 20px;\n }\n`;\n\nexport const ProductListDescription = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n\n strong {\n font-weight: ${theme.v2.font.weights.bold};\n }\n `}\n`;\n\nexport const DueDate = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 20px 0 20px 43px;\n width: 100%;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ theme }) => css`\n width: 118px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin-left: 43px;\n width: 100%;\n }\n `}\n`;\n\nexport const DueText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: ${theme.v2.font.sizes.xxxs};\n margin-top: 7px;\n margin-bottom: 0px;\n `}\n`;\n\nexport const Divider = styled.hr`\n ${({ theme }) => css`\n border-top: 1px solid ${theme.v2.colors.feedback.canceledPure};\n margin: 24px 0px 16px;\n `}\n`;\n","import useLocale from '@/hooks/useLocale/useLocale';\nimport * as Styles from './ProductsList.styles';\nimport React from 'react';\nimport {\n Button, IconCodeGuard, IconSecurity, PageTitle, Skeleton, Tag,\n} from 'gatorcomponents';\nimport { format } from 'date-fns';\n\nconst ProductsList = ({\n handleManageProductClick,\n productsListFiltered,\n getPageTitleProps,\n productsLoading,\n getStatus,\n}) => {\n const { security: securityLocale } = useLocale();\n\n const handleManageProduct = (product) => {\n handleManageProductClick && handleManageProductClick(product);\n };\n\n const datePermitted = value => !['0000-00-00'].includes(value);\n\n return (\n <>\n \n \n\n \n \n {securityLocale.productsList.description}\n \n \n \n )}\n\n {!productsLoading && (\n \n {productsListFiltered && !!productsListFiltered.length && productsListFiltered.map(product => (\n \n \n \n {product.name.toLowerCase().includes('sitelock') ? \n {product.name}\n {product.domain} \n \n \n \n \n {product.due_date && datePermitted(product.due_date) && (\n \n {format(new Date(`${product.due_date} 00:00:00`), 'dd/MM/yyyy')}\n \n {securityLocale.productsList.due}\n \n \n )}\n \n {product.status === 'Active' && (\n handleManageProduct(product)}\n variant=\"secondary\"\n />\n )}\n \n \n\n \n ))}\n \n )}\n \n \n );\n};\n\nexport default ProductsList;\n","const { isBRServer } = require('@/utils/Validators/validation');\n\nexport const shared = isBRServer\n ? [\n 5,\n 6,\n 437,\n 7,\n 335,\n 50,\n 51,\n 52,\n 53,\n 54,\n 385,\n 388,\n 391,\n 394,\n 397,\n 400,\n 403,\n 406,\n 409,\n 412,\n 415,\n ]\n : [\n 5,\n 6,\n 7,\n 213,\n 50,\n 51,\n 52,\n 53,\n 54,\n 385,\n 388,\n 391,\n 394,\n 397,\n 400,\n 403,\n 406,\n 409,\n 412,\n 415,\n ];\n\n\nexport const productsChips = [\n {\n id: 'all',\n checked: true,\n value: 'all',\n label: 'Todos',\n },\n {\n id: 'pending',\n checked: false,\n value: 'pending',\n label: 'Com pendência financeira',\n },\n {\n id: 'security',\n checked: false,\n value: 'security',\n label: 'Segurança',\n },\n {\n id: 'backup',\n checked: false,\n value: 'backup',\n label: 'Backup',\n },\n];\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './SecurityHandler.styles';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { Tag } from 'gatorcomponents';\nimport { useHistory } from 'react-router';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { preChatActions } from '@/redux/modules';\nimport { differenceInCalendarDays, parseISO } from 'date-fns';\nimport { BackupModal, Cards, ProductsList } from './components';\nimport { makeCodeguardUrl } from '@/utils/Formatters/handleStrings';\nimport { productsChips, shared } from './security.types';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { CHARLIE_TOKEN_REFRESH } from '@/config/GrowthBook/constants';\nimport { isBRServer } from '@/utils/Validators/validation';\n\nconst SecurityHandler = () => {\n const history = useHistory();\n const dispatch = useDispatch();\n const { security: securityLocale, routes: routesLocale } = useLocale();\n const [showBackupModal, setShowBackupModal] = useState(false);\n const { productsLoading, productsList } = useSelector(state => state.preChat);\n const [selectedProduct, setSelectedProduct] = useState(null);\n const [selectedId, setSelectedId] = useState(null);\n const [productFilter, setProductFilter] = useState('');\n const [productChips, setProductChips] = useState(productsChips);\n const [selectedChip, setSelectedChip] = useState(productsChips[0]);\n const [productsListFiltered, setProductsListFiltered] = useState([]);\n const waitTokenToggle = useFeatureIsOn(CHARLIE_TOKEN_REFRESH);\n\n const requestProducts = useCallback(() => {\n const withCancelled = true;\n const withPending = true;\n dispatch(preChatActions.productByStatus.request({ withCancelled, withPending, waitToken: waitTokenToggle }));\n }, [dispatch, waitTokenToggle]);\n\n useEffect(() => {\n requestProducts();\n }, [requestProducts]);\n\n useEffect(() => {\n const hostingSecurityProducts = (productsList && productsList.hostings && productsList.hostings.filter(hosting => hosting.name.toLowerCase().includes('sitelock') || hosting.name.toLowerCase().includes('codeguard'))) || [];\n const addonsSecurityProducts = (productsList && productsList.addons && productsList.addons.filter(addon => addon.name.toLowerCase().includes('sitelock')).map(addon => ({ ...addon, isAddon: true }))) || [];\n const securityProducts = [...hostingSecurityProducts, ...addonsSecurityProducts];\n const sortedProducts = [];\n\n const activeProducts = securityProducts.filter(item => item.status === 'Active');\n sortedProducts.push(...activeProducts);\n const pendingProducts = securityProducts.filter(item => item.status === 'Pending');\n sortedProducts.push(...pendingProducts);\n const suspendedProducts = securityProducts.filter(item => item.status === 'Suspended');\n sortedProducts.push(...suspendedProducts);\n\n if (!productFilter && selectedChip.id === 'all') {\n setProductsListFiltered(sortedProducts);\n return;\n }\n\n let newProductsList = sortedProducts;\n\n if (productFilter) {\n newProductsList = securityProducts.filter(product => product.domain.includes(productFilter));\n }\n\n if (selectedChip && selectedChip.id !== 'all') {\n switch (selectedChip.id) {\n case 'pending': {\n newProductsList = newProductsList.filter(product => product.status.toLowerCase() === 'pending');\n break;\n }\n case 'security': {\n newProductsList = newProductsList.filter(product => product.name.toLowerCase().includes('sitelock'));\n break;\n }\n case 'backup': {\n newProductsList = newProductsList.filter(product => product.name.toLowerCase().includes('codeguard'));\n break;\n }\n default:\n }\n }\n\n setProductsListFiltered(newProductsList);\n }, [selectedChip, productFilter, productsList]);\n\n const handleClickAccess = (id) => {\n if (id === 'simple') {\n setShowBackupModal(true);\n return;\n }\n\n history.push(`${routesLocale[id]}`);\n };\n\n const getStatus = (status) => {\n if (status === 'Suspended') {\n return 'problem';\n }\n\n if (status === 'Cancelled' || status === 'Terminated') {\n return 'cancel';\n }\n\n return status.toLowerCase();\n };\n\n const getBackupModalProps = useCallback(() => {\n const defaultProps = {\n onClose: () => setShowBackupModal(false),\n securityLocale,\n productsLoading,\n selectedProduct,\n setSelectedProduct,\n setSelectedId,\n };\n\n const goToBackup = () => {\n history.push(`${routesLocale.products}${routesLocale.productdetail}/${selectedId}${routesLocale.backup}/wizard`);\n };\n\n const productsOptions = [];\n if (!productsLoading && productsList && productsList.hostings && productsList.hostings.length) {\n const onlyShared = productsList.hostings.filter(product => shared.includes(product.package_id));\n\n const active = onlyShared.filter(product => product.status === 'Active');\n const suspended = onlyShared.filter(product => product.status === 'Suspended');\n const cancelled = onlyShared.filter((product) => {\n const { cancel_date: cancelDate } = product;\n const dateDiff = product.status === 'Cancelled' || product.status === 'Terminated' ? differenceInCalendarDays(parseISO(cancelDate), new Date()) : 0;\n return (product.status === 'Cancelled' || product.status === 'Terminated') && dateDiff < 30;\n });\n\n const push = (product) => {\n productsOptions.push({\n label: (\n \n {`${product.name} - ${product.domain}`} \n \n ),\n value: product.id,\n });\n };\n\n active.forEach((product) => {\n push(product);\n });\n\n suspended.forEach((product) => {\n push(product);\n });\n\n cancelled.forEach((product) => {\n push(product);\n });\n }\n\n return {\n ...defaultProps,\n productsOptions,\n goToBackup,\n };\n }, [\n productsList,\n productsLoading,\n securityLocale,\n selectedProduct,\n setSelectedProduct,\n history,\n routesLocale,\n selectedId,\n ]);\n\n const getProductsListProps = () => {\n const handleChangeChip = (chip) => {\n const newChips = productsChips.map(productChip => ({ ...productChip, checked: false }));\n const chipIndex = chip && newChips.findIndex(option => option.id === chip.id);\n\n if (!chipIndex) {\n newChips[0].checked = true;\n setSelectedChip(newChips[0]);\n }\n\n if (chipIndex) {\n newChips[chipIndex].checked = true;\n setSelectedChip(newChips[chipIndex]);\n }\n\n setProductChips(newChips);\n };\n\n const handleChangeFilterBy = (text) => {\n setProductFilter(text);\n };\n\n const handleClearFilter = () => {\n setProductFilter('');\n handleChangeChip();\n };\n\n const getPageTitleProps = () => {\n const defaultProps = {\n testId: 'products-list',\n title: securityLocale.productsList.title,\n filterLabel: securityLocale.productsList.filterLabel,\n filterByPlaceholder: securityLocale.productsList.filterByPlaceholder,\n filterByValue: productFilter,\n clearFilterLabel: securityLocale.productsList.clearFilterLabel,\n filterChips: productChips,\n hideFilter: false,\n showClearFilter: !!productFilter.length || selectedChip.id !== productsChips[0].id,\n handleClearFilter,\n };\n\n return {\n ...defaultProps,\n handleChangeChip,\n handleChangeFilterBy,\n };\n };\n\n const handleManageProductClick = (product) => {\n if (product.name.toLowerCase().includes('codeguard')) {\n window.open(makeCodeguardUrl(product.id), '_blank');\n }\n\n if (product.name.toLowerCase().includes('sitelock')) {\n isBRServer\n ? history.push(`${routesLocale.security}${routesLocale.productdetail}/standalone/${product.id}`)\n : history.push(`${routesLocale.security}/${product.isAddon ? 'addon' : 'standalone'}/${product.id}`);\n }\n };\n\n return {\n getPageTitleProps,\n getStatus,\n handleManageProductClick,\n productsListFiltered,\n productsLoading,\n };\n };\n\n return (\n <>\n {showBackupModal && (\n \n \n \n
\n);\n\nexport default withI18n()(SecurityPageWrapper);\n","const styles = theme => ({\n wrapper: {\n position: 'relative',\n minHeight: 'calc(100vh - 80px)',\n width: '100wh',\n height: '100%',\n margin: '40px',\n marginTop: '0px',\n [theme.breakpoints.down(600)]: {\n margin: '0px',\n },\n },\n ctaCards: {\n paddingTop: '40px',\n backgroundColor: theme.color.white,\n boxShadow: `0px 1px 3px ${theme.color.tundoraLight}`,\n [theme.breakpoints.up(960)]: {\n padding: '0',\n },\n [theme.breakpoints.down(600)]: {\n padding: '40px 0',\n },\n },\n pageTitle: {\n fontSize: '12px 24px',\n fontWeight: 300,\n },\n titleCard: {\n alignItems: 'center',\n borderRadius: '0',\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n display: 'flex',\n marginBottom: 24,\n marginTop: 24,\n minHeight: '60px',\n padding: '7px 24px',\n position: 'relative',\n [theme.breakpoints.up(768)]: {\n boxShadow: 'none',\n },\n\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { locale } from '@/utils/locale';\n\nexport const SecurityCtaLocale = {\n title:\n <>\n {locale('sitelockLP.pageTitle.0')} \n {locale('sitelockLP.pageTitle.1')}\n ,\n description: locale('sitelockLP.description'),\n listTitle:\n <>\n {locale('sitelockLP.listTitle.0')}\n {locale('sitelockLP.listTitle.1')} \n {locale('sitelockLP.listTitle.2')}\n ,\n featureList: {\n firstColumn: [\n locale('sitelockLP.featureList.1'),\n locale('sitelockLP.featureList.2'),\n locale('sitelockLP.featureList.3'),\n locale('sitelockLP.featureList.4'),\n ],\n secondColumn: [\n locale('sitelockLP.featureList.5'),\n locale('sitelockLP.featureList.6'),\n locale('sitelockLP.featureList.7'),\n locale('sitelockLP.featureList.8'),\n ],\n },\n formTitle: locale('sitelockLP.formTitle'),\n formDescription: locale('sitelockLP.formDescription'),\n formFirstToggleLabel: locale('sitelockLP.formFirstToggleLabel'),\n formSecondToggleLabel: locale('sitelockLP.formSecondToggleLabel'),\n formSecondTogglePlaceholder: locale('sitelockLP.formSecondTogglePlaceholder'),\n selectePaymentLabel: locale('sitelockLP.selectePaymentLabel'),\n cycleLabel: locale('sitelockLP.cycleLabel'),\n cycleOptions: {\n annually: locale('sitelockLP.cycleOptions.annually'),\n semiannually: locale('sitelockLP.cycleOptions.semiannually'),\n quarterly: locale('sitelockLP.cycleOptions.quarterly'),\n monthly: locale('sitelockLP.cycleOptions.monthly'),\n },\n cyclePer: {\n annually: locale('sitelockLP.cyclePer.annually'),\n semiannually: locale('sitelockLP.cyclePer.semiannually'),\n quarterly: locale('sitelockLP.cyclePer.quarterly'),\n monthly: locale('sitelockLP.cyclePer.monthly'),\n },\n toBePaid: locale('sitelockLP.toBePaid'),\n hgSiteLock: locale('sitelockLP.hgSiteLock'),\n needMoreLabel: locale('sitelockLP.needMoreLabel'),\n needMoreButtonText: locale('sitelockLP.needMoreButtonText'),\n detailsSectionTitle: locale('sitelockLP.detailsSectionTitle'),\n detailsSectionFirstSectionTitle: locale('sitelockLP.detailsSectionFirstSectionTitle'),\n detailsSectionFirstSectionDescription: locale('sitelockLP.detailsSectionFirstSectionDescription'),\n detailsSectionFirstSectionButtonLabel: locale('sitelockLP.detailsSectionFirstSectionButtonLabel'),\n detailsSectionSecondSectionTitle: locale('sitelockLP.detailsSectionSecondSectionTitle'),\n detailsSectionSecondSectionDescription: locale('sitelockLP.detailsSectionSecondSectionDescription'),\n detailsSectionSecondSectionButtonLabel: locale('sitelockLP.detailsSectionSecondSectionButtonLabel'),\n discoverBenefitsTitle: locale('sitelockLP.discoveryTitle'),\n discoverBenefitsBenefits: locale('sitelockLP.benefits'),\n discoverBenefitsCtaTitle: locale('sitelockLP.ctaTitle'),\n discoverBenefitsCtaDescription: locale('sitelockLP.ctaDescription'),\n discoverBenefitsButtonLabel: locale('sitelockLP.buttonLabel'),\n bannerTitle: locale('sitelockLP.bannerTitle'),\n bannerLabel: locale('sitelockLP.bannerLabel'),\n};\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.section`\n${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v1.color.background.wizard};\n display: flex;\n flex-direction: column;\n padding: 40px 0px 60px;\n @media (max-width: ${theme.breakpoints.sm}) {\n padding: 32px 16px 28px;\n }\n `}\n`;\n\nexport const Title = styled.h3`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 30px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 40px;\n margin: 0px 0px 56px 0px;\n max-width: 600px;\n text-align: center;\n span {\n color: ${theme.v1.color.action.hover}\n }\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n max-width: 450px;\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n margin: 0px 0px 32px 0px;\n font-size: 24px;\n }\n `}\n`;\n\nexport const FirstRow = styled.div`\n${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 137px;\n justify-content: center;\n margin-bottom: 55px;\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n gap:100px;\n }\n @media (max-width: 1085px) {\n gap:20px;\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n flex-direction: column-reverse;\n margin-bottom: 40px;\n }\n `}\n`;\n\nexport const SecondRow = styled.div`\n${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 137px;\n justify-content: center;\n margin-bottom: 40px;\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n gap: 128px;\n }\n @media (max-width: 1085px) {\n gap:20px;\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const RowContent = styled.div`\n${({ theme, row }) => css`\n display: flex;\n flex-direction: column;\n margin-top: ${row === 2 ? '40px' : '0px'};\n max-width: 568px;\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n margin-top:0px;\n max-width: 440px;\n }\n `}\n`;\n\nexport const RowImage = styled.img`\n${({ theme }) => css`\n max-width: 289px;\n \n @media (max-width: ${theme.v1.breakpoints.lg}) {\n width: 387px;\n }\n @media (max-width: 1085px) {\n width: 300px;\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n width: 100%;\n }\n `}\n`;\n\nexport const ImageWrapper = styled.div`\n`;\n\n\nexport const RowTitle = styled.h5`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 32px;\n margin: 0px;\n text-align: left;\n span {\n color: ${theme.palette.blue.dark};\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n text-align: center;\n }\n `}\n`;\n\nexport const RowDescription = styled.p`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 22px;\n margin: 16px 0px;\n text-align: left;\n span {\n display: block;\n }\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n margin: 20px 0px;\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n text-align: center;\n }\n `}\n`;\n\nexport const RowButtonWrapper = styled.div`\n${({ theme }) => css`\n @media (max-width: ${theme.v1.breakpoints.md}) {\n display:flex;\n justify-content: center;\n margin-bottom: 30px;\n }\n `}\n`;\n","import React from 'react';\nimport * as Styles from './DetailsSection.styles';\nimport { Button } from '@/pages/common/v1/Button';\nimport firstRowImage from '@/media/sitelock/protect.png';\nimport secondRowImage from '@/media/sitelock/security.png';\n\nconst DetailsSection = ({\n title = 'title',\n firstSectionTitle = 'firstSectionTitle',\n firstSectionDescription = 'firstSectionDescription',\n firstSectionButtonLabel = 'firstSectionButtonLabel',\n secondSectionTitle = 'secondSectionTitle',\n secondSectionDescription = 'secondSectionDescription',\n secondSectionButtonLabel = 'secondSectionButtonLabel',\n gaProtectMySite,\n}) => {\n const moveScreenToTop = () => {\n gaProtectMySite();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n };\n\n return (\n \n {title} \n\n \n \n \n\n \n \n {firstSectionTitle}\n \n\n \n {firstSectionDescription}\n \n\n \n moveScreenToTop()}\n />\n \n\n \n \n\n \n \n \n {secondSectionTitle}\n \n\n \n {secondSectionDescription}\n \n\n \n moveScreenToTop()}\n />\n \n\n \n\n \n \n \n \n );\n};\n\nexport default DetailsSection;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.section`\n${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v1.color.white.primary};\n display: flex;\n flex-direction: column;\n padding: 40px 20px;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n padding: 32px 16px;\n }\n `}\n`;\n\nexport const Title = styled.h3`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.xxxxxl};\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 40px;\n margin: 0px 0px 56px 0px;\n text-align: center;\n\n @media (max-width: 768px) {\n font-size: 24px;\n line-height: 32px;\n margin: 0px 0px 42px 0px;\n max-width: 388px;\n }\n\n @media (max-width: 360px) {\n max-width: 288px;\n }\n `}\n`;\n\nexport const BenefitsWrapper = styled.ul`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap:10px;\n justify-content: space-around;\n margin: 0px 0px 80px 0px;\n padding:0px;\n width: 100%;\n\n @media (max-width: 1300px) {\n flex-direction: column;\n gap: 25px;\n margin: 0px 0px 40px 0px;\n }\n`;\n\nexport const BenefitWrapper = styled.li`\n align-items: center;\n display: flex;\n flex-direction: column;\n`;\n\nexport const BenefitTitle = styled.h6`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 32px;\n margin: 16px 0px 0px 0px;\n text-align: center;\n\n @media (min-width: 1300px) {\n max-width: 308px;\n }\n\n @media (min-width: 1920px) {\n max-width: unset;\n }\n\n @media (max-width: 768px) {\n font-size: 20px\n }\n `}\n`;\n\nexport const BenefitDescription = styled.p`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.font.weights.regular};\n line-height: 22px;\n margin: 16px 0px 0px 0px;\n max-width:320px;\n text-align: center;\n `}\n`;\n\nexport const Logo = styled.img`\n margin-bottom: 16px;\n\n @media (max-width: 1920px) {\n margin-bottom: 20px;\n }\n`;\n\nexport const CTAtitle = styled.h5`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.xxxxxl};\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 40px;\n margin: 0px;\n text-align: center;\n\n @media (max-width: 768px) {\n font-size: 24px;\n line-height: 32px;\n max-width: 388px;\n }\n `}\n`;\n\nexport const CTAdescription = styled.p`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 22px;\n margin: 0px;\n max-width: 802px;\n text-align: center;\n margin: 16px 0px 16px;\n\n @media (max-width: 1920px) {\n margin: 20px 0px 20px 0px;\n }\n\n @media (max-width: 768px) {\n font-size: 14px;\n max-width: 388px;\n }\n `}\n`;\n\nexport const RowButtonWrapper = styled.div``;\n","import React from 'react';\nimport * as Styles from './DiscoverBenefits.styles';\nimport { Button } from '@/pages/common/v1/Button';\nimport Sitelock from '@/media/sitelock/sitelock.svg';\nimport { IconDetailedAlert } from '@/icons/IconDetailedAlert';\nimport { IconDetailedBrush } from '@/icons/IconDetailedBrush';\nimport { IconDetailedProtection } from '@/icons/IconDetailedProtection';\n\nconst DiscoverBenefits = ({\n title = 'title',\n benefits = [\n {\n icon: \n \n {title}\n \n\n \n {benefits.map(benefit => (\n \n {benefit.icon}\n \n {benefit.title}\n \n \n {benefit.description}\n \n \n ))}\n \n\n \n {ctaTitle}\n \n\n \n {ctaDescription}\n \n\n \n moveScreenToTop()}\n />\n \n \n );\n};\n\nexport default DiscoverBenefits;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.white.primary};\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n position: relative;\n\n @media (max-width: 1296px){\n flex-direction: column;\n }\n `}\n`;\n\nexport const Left = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1 1;\n padding: 56px 0px 0px 83px;\n\n @media(max-width: 1919px){\n padding: 32px 0px 0px 61px;\n }\n\n @media (max-width: 1296px){\n align-items: center;\n padding: 32px 61px 0px 61px;\n }\n\n @media (max-width: 428px){\n padding: 32px 15px 0px 15px;\n }\n`;\n\nexport const Right = styled.div`\n flex: 0 1;\n margin-left: 20px;\n padding: 56px 83px 0px 0px;\n\n @media(max-width: 1919px){\n padding: 32px 61px 0px 0px;\n }\n\n @media (max-width: 1296px){\n display: none;\n visibility: hidden;\n }\n`;\n\nexport const MobileForm = styled.div`\n display: none;\n visibility: hidden;\n width: 100%;\n\n @media (max-width: 1296px){\n display: flex;\n visibility: visible;\n }\n`;\n\nexport const Logo = styled.img`\n ${() => css`\n max-width: 170px;\n `}\n`;\n\nexport const TitleWrapper = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 30px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 41px;\n margin: 18px 0px 16px;\n max-width: 650px;\n\n & span {\n color: ${theme.v1.color.action.hover} !important;\n }\n\n @media (max-width: 1296px){\n text-align: center;\n }\n `}\n`;\n\nexport const DescriptionWrapper = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 22px;\n margin: 0px 0px 16px;\n max-width: 440px;\n\n @media (max-width: 1296px){\n text-align: center;\n }\n `}\n`;\n\nexport const ListTitleWrapper = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 22px;\n margin: 0px 0px 50px;\n max-width: 440px;\n\n\n @media (max-width: 1296px){\n margin-top: 16px;\n text-align: center;\n }\n\n @media (max-width: 724px){\n margin: 16px 0px 24px;\n align-self: start;\n }\n `}\n`;\n\nexport const ListWrapper = styled.div`\n ${() => css`\n display: flex;\n\n ul:first-child {\n margin-right: 50px\n }\n \n @media(max-width: 1919px){\n flex-direction: column;\n }\n\n @media (max-width: 1296px){\n flex-direction: row;\n }\n\n @media (max-width: 724px){\n align-self: start;\n flex-direction: column;\n }\n `}\n`;\n\nexport const ListItems = styled.ul`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 22px;\n list-style: none;\n margin: 0px;\n padding: 0px 0px 0px 20px;\n `}\n`;\n\nexport const ListItem = styled.li`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 22px;\n margin: 0px 0px 12px 0px;\n max-width: 440px;\n position: relative;\n\n &:before {\n border-color: ${theme.v1.color.text.featured};\n border-style: solid;\n border-width: 0 3px 3px 0;\n content: \"\";\n display: inline-block;\n height: 11px;\n left: -20px;\n position: absolute;\n top: 2px;\n transform-origin: bottom left;\n transform: rotate(45deg);\n width: 6px;\n }\n `}\n`;\n\nexport const BottomDetail = styled.div`\n ${({ theme }) => css`\n height: 90px;\n margin-top: 32px;\n position: relative;\n width: 100%;\n\n overflow: hidden;\n\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n\n &:after {\n background-color: ${theme.v1.color.background.wizard};\n bottom: -45px;\n content: '';\n display: block;\n height: 70px;\n left: 0px;\n position: absolute;\n transform: rotate(-2deg);\n width: calc(100% + 10px);\n }\n `}\n`;\n\nexport const SnappyDetail = styled.img`\n ${() => css`\n margin-left: 150px;\n margin-top: auto;\n max-width: 186px;\n position: absolute;\n bottom: 0px;\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n border-radius: 4px;\n border: 1px solid ${theme.v1.color.background.wizard};\n display: flex;\n flex-direction: column;\n margin-left: auto;\n width: 554px;\n padding: 32px 16px;\n\n @media (max-width: 1296px){\n width: 100%;\n }\n `}\n`;\n\nexport const FormTitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.featured};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 32px;\n margin: 0px 0px 8px;\n\n @media (max-width: 1296px){\n text-align: center;\n }\n `}\n`;\n\nexport const DomainLabel = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 18px;\n margin: 0px 0px 8px;\n `}\n`;\n\nexport const Label = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 18px;\n margin: 8px 0px;\n `}\n`;\n\nexport const ListOfToggles = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 8px;\n `}\n`;\n\nexport const ConfirmButtonWrapper = styled.div`\n margin: 17px 0px 0px;\n`;\n\nexport const SelectedDomainMessageWrapper = styled.div`\n${({ theme }) => css`\n display: flex;\n flex-direction: column;\n margin-top: -12px;\n\n button {\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n padding: 0px;\n text-align: left;\n text-decoration: underline;\n width: fit-content;\n }\n `}\n`;\n\nexport const SelectedDomainMessageTitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 19px;\n margin: 0px 0px 18px;\n `}\n`;\n\nexport const SelectedDomainMessageLabel = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 19px;\n margin: 0px 0px 11px;\n `}\n`;\n\nexport const TypeDomainWrapper = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n `}\n`;\n\nexport const CyclesBlock = styled.div``;\nexport const MethodsBlock = styled.div``;\nexport const ValueBlock = styled.div`\n button {\n min-width: 162px;\n\n span {\n padding: 0;\n }\n\n div {\n margin: 0;\n padding: 0;\n }\n }\n`;\n\nexport const CyclesWrapper = styled.div`\n display: flex;\n gap: 10px;\n\n @media (max-width: 768px) {\n flex-wrap: wrap;\n \n > div {\n flex: 1 0 45%;\n }\n }\n`;\n\nexport const Price = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.action.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 32px;\n margin: 2px 0px 10px;\n\n small {\n font-size: 14px;\n line-height: 18px;\n }\n `}\n`;\n\nexport const NeedMoreWrapper = styled.div`\n display: flex;\n flex-direction: column;\n\n p {\n margin: 16px 0px 10px;\n max-width: 275px;\n }\n`;\n\nexport const NeedMoreLink = styled.a`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v1.color.action.primary};\n display: flex;\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 26px;\n text-decoration: none;\n\n svg {\n fill: ${theme.v1.color.action.primary};\n margin-left: 12px;\n stroke: ${theme.v1.color.action.primary};\n }\n `}\n`;\n\nexport const NeedMore = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 18px;\n max-width: 275px;\n `}\n`;\n","import React, { useEffect } from 'react';\nimport * as Styles from './GetNowForm.styles';\nimport { Input } from '@/pages/common/v1/inputs';\nimport {\n Button, RadioOption, Select, RadioToggle,\n} from '@/pages/common/v1';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { IconArrowForward } from '@/icons';\nimport Loader from '@/components/Layout/Loader';\n\nconst GetNowForm = ({\n paymentCycles = [\n { title: 'Anual', name: 'annually', featured: true },\n { title: 'Semestral', name: 'semiannually', featured: false },\n { title: 'Trimestral', name: 'quarterly', featured: false },\n { title: 'Mensal', name: 'monthly', featured: false },\n ],\n paymentMethods = [\n { label: '1x Cartão Crédito', value: 'braspag_credit_1x', id: 'braspag_credit_1x' },\n { label: 'Boleto', value: 'gp_boleto', id: 'gp_boleto' },\n { label: 'Boleto Bank of America', value: 'boleto', id: 'boleto' },\n { label: 'PayPal Antigo', value: 'paypal', id: 'paypal' },\n { label: 'Paypal', value: 'gp_paypal', id: 'gp_paypal' },\n ],\n domains = [\n { label: '20220713local02.com', value: 26, id: 26 },\n { label: '20220713local.com', value: 25, id: 25 },\n ],\n setSelectedDomain,\n formTitle = 'professional plan',\n formDescription = 'Choose your domain:',\n formFirstToggleLabel = 'Select a domain contracted with HostGator',\n formSecondToggleLabel = 'Enter another domain',\n formSecondTogglePlaceholder = 'Enter your domain',\n cycleLabel = 'Select cycle:',\n handleOnToggle,\n activeDomainToggle,\n selectedDomain = null,\n typedDomain = '',\n setTypedDomain,\n setSelectedCycle,\n selectedCycle = 'annually',\n selectePaymentLabel = 'Select the payment method:',\n activeCycle = { price: '279.99', cycle: 'annually', per: '/ano' },\n disabledButton = true,\n toBePaid = 'To be paid',\n hgSiteLock = 'https://www.hostgator.com.br/sitelock',\n getDomain,\n isLoadingPayment = false,\n setSelectedPaymentMethod,\n needMoreLabel,\n needMoreButtonText,\n gaSelectDomain,\n gaTypeDomain,\n gaCyclePaymentClick,\n gaSelectPaymentMethod,\n gaBuySitelock,\n gaSeeAllPlans,\n}) => {\n const handleSelect = (e) => {\n setSelectedDomain && setSelectedDomain(e);\n };\n\n const handleSelectMethod = ({ value }) => {\n if (setSelectedPaymentMethod !== value) {\n gaSelectPaymentMethod(value);\n setSelectedPaymentMethod && setSelectedPaymentMethod(value);\n }\n };\n\n const handleToggle = ({ toggleOpen, name }) => {\n if (name === 'select-domain') {\n gaSelectDomain();\n\n if (!selectedDomain) {\n setSelectedDomain && setSelectedDomain(domains[0]);\n }\n }\n\n if (name === 'type-domain') {\n gaTypeDomain();\n }\n\n handleOnToggle && handleOnToggle({ toggleOpen, name });\n };\n\n const handleTypeDomain = (e) => {\n setTypedDomain && setTypedDomain(e.target.value);\n };\n\n const onChangeCycle = ({ name }) => {\n if (selectedCycle !== name) {\n gaCyclePaymentClick(name);\n setSelectedCycle && setSelectedCycle(name);\n }\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n gaBuySitelock();\n getDomain && getDomain();\n };\n\n const handleSeeMore = () => {\n gaSeeAllPlans();\n };\n\n useEffect(() => {\n if (domains.length === 0) {\n handleOnToggle && handleOnToggle({ toggleOpen: true, name: 'type-domain' });\n }\n }, [domains.length, handleOnToggle]);\n\n return (\n \n {formTitle} \n {formDescription} \n\n \n {domains.length > 0 && (\n \n {domains && (\n \n \n \n \n \n\n \n \n {cycleLabel}\n \n \n {paymentCycles.map(cycle => (\n \n \n\n \n {(paymentMethods && paymentMethods.length) && (\n <>\n \n {selectePaymentLabel}\n \n \n \n {toBePaid} \n \n {formatCurrency(activeCycle.price)}\n {activeCycle.per} \n \n\n \n\n \n \n {needMoreLabel}\n \n \n {needMoreButtonText}\n \n\n \n );\n};\n\nexport default GetNowForm;\n","import React from 'react';\nimport * as Styles from './GetNow.styles';\nimport Sitelock from '@/media/sitelock/sitelock.svg';\nimport SnappyFace from '@/media/sitelock/snappy-face.png';\nimport { GetNowForm } from './components/GetNowForm';\n\nconst GetNow = ({\n paymentCycles,\n paymentMethods,\n domains,\n setSelectedDomain,\n title = 'protect your website of cyber threats with SiteLock',\n description = 'The ideal solution to find and fix threats to your website automatically.',\n listTitle = 'hire the SiteLock Professional and count on:',\n featureList = {\n firstColumn: [\n 'Proteção de até 100 páginas',\n 'Selo de segurança do site',\n 'Varreduras frequentes',\n 'Remoção automática de malwares',\n ],\n secondColumn: [\n 'Verificação diária de FTP',\n 'Verificação de edição de arquivos',\n 'Monitoramento de blocklist',\n 'E muito mais',\n ],\n },\n formTitle = 'professional plan',\n formDescription = 'Choose your domain:',\n formFirstToggleLabel = 'Select a domain contracted with HostGator',\n formSecondToggleLabel = 'Enter another domain',\n formSecondTogglePlaceholder = 'Enter your domain',\n cycleLabel = 'Select cycle:',\n handleOnToggle,\n activeDomainToggle,\n selectedDomain,\n typedDomain,\n setTypedDomain,\n setSelectedCycle,\n selectedCycle,\n selectePaymentLabel = 'Select the payment method:',\n activeCycle,\n disabledButton,\n toBePaid = 'To be paid',\n hgSiteLock,\n getDomain,\n isLoadingPayment,\n setSelectedPaymentMethod,\n needMoreLabel,\n needMoreButtonText,\n gaSelectDomain,\n gaTypeDomain,\n gaCyclePaymentClick,\n gaSelectPaymentMethod,\n gaBuySitelock,\n gaSeeAllPlans,\n}) => {\n const getNowProps = () => {\n const defaultPorps = {\n paymentCycles,\n paymentMethods,\n domains,\n setSelectedDomain,\n formTitle,\n formDescription,\n formFirstToggleLabel,\n formSecondToggleLabel,\n formSecondTogglePlaceholder,\n cycleLabel,\n handleOnToggle,\n activeDomainToggle,\n selectedDomain,\n typedDomain,\n setTypedDomain,\n setSelectedCycle,\n selectedCycle,\n selectePaymentLabel,\n activeCycle,\n disabledButton,\n toBePaid,\n hgSiteLock,\n getDomain,\n isLoadingPayment,\n setSelectedPaymentMethod,\n needMoreLabel,\n needMoreButtonText,\n gaSelectDomain,\n gaTypeDomain,\n gaCyclePaymentClick,\n gaSelectPaymentMethod,\n gaBuySitelock,\n gaSeeAllPlans,\n };\n\n return defaultPorps;\n };\n\n return (\n \n \n \n {title}\n \n\n \n {description}\n \n\n \n \n\n \n {listTitle}\n \n\n \n \n {featureList.firstColumn.map(item => ({item} ))}\n \n\n \n {featureList.secondColumn.map(item => ({item} ))}\n \n \n \n\n \n \n\n \n \n \n );\n};\n\nexport default GetNow;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.section`\n${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v1.color.background.marketingBanner};\n display: flex;\n justify-content: center;\n gap: 72px;\n padding: 55px 0px;\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n gap: 20px;\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n flex-direction: column;\n gap: 40px;\n padding: 32px 0px;\n }\n `}\n`;\n\nexport const ContentWrapper = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const Title = styled.h3`\n${({ theme }) => css`\n color: ${theme.v1.color.white.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 30px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 40px;\n margin: 0px 0px 20px 0px;\n max-width: 380px;\n text-align: left;\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n max-width: 260px;\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n font-size: 20px;\n line-height: 27px;\n margin: 0px 0px 20px 0px;\n max-width: 288px;\n text-align: center;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ theme }) => css`\n width: 232px;\n\n @media (min-width: 1920px) {\n width: 335px;\n }\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n width: 287px;\n }\n\n > button {\n width: 100%;\n }\n `}\n`;\n\nexport const BannerSnappy = styled.img`\n${({ theme }) => css`\n @media (max-width: ${theme.v1.breakpoints.md}) {\n width: 300px;\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n width: 220px;\n }\n `}\n`;\n","import React from 'react';\nimport { Button } from '@/pages/common/v1/Button';\nimport * as Styles from './SnappyBanner.styles';\nimport bannerSnappy from '@/media/codeguard/banner-snappy.png';\n\nconst SnappyBanner = ({\n title = 'tilte',\n buttonLabel = 'button label',\n gaGetNowAnchor,\n}) => {\n const moveScreenToTop = () => {\n gaGetNowAnchor();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n };\n\n return (\n \n \n {title} \n \n moveScreenToTop()}\n variant=\"tertiary\"\n />\n \n \n \n );\n};\n\nexport default SnappyBanner;\n","import React from 'react';\nimport DetailsSection from './components/DetailsSection/DetailsSection';\nimport { DiscoverBenefits } from './components/DiscoverBenefits';\nimport GetNow from './components/GetNow/GetNow';\nimport { SnappyBanner } from './components/SnappyBanner';\n\nconst SiteLockLP = ({\n paymentCycles,\n paymentMethods,\n domains,\n setSelectedDomain,\n title,\n description,\n listTitle,\n featureList,\n formTitle,\n formDescription,\n formFirstToggleLabel,\n formSecondToggleLabel,\n formSecondTogglePlaceholder,\n cycleLabel,\n handleOnToggle,\n activeDomainToggle,\n selectedDomain,\n typedDomain,\n setTypedDomain,\n setSelectedCycle,\n selectedCycle,\n selectePaymentLabel,\n activeCycle,\n disabledButton,\n toBePaid,\n hgSiteLock,\n getDomain,\n isLoadingPayment,\n setSelectedPaymentMethod,\n needMoreLabel,\n needMoreButtonText,\n detailsSectionTitle,\n detailsSectionFirstSectionTitle,\n detailsSectionFirstSectionDescription,\n detailsSectionFirstSectionButtonLabel,\n detailsSectionSecondSectionTitle,\n detailsSectionSecondSectionDescription,\n detailsSectionSecondSectionButtonLabel,\n discoverBenefitsTitle,\n discoverBenefitsBenefits,\n discoverBenefitsCtaTitle,\n discoverBenefitsCtaDescription,\n discoverBenefitsButtonLabel,\n bannerTitle,\n bannerLabel,\n gaSelectDomain,\n gaTypeDomain,\n gaCyclePaymentClick,\n gaSelectPaymentMethod,\n gaBuySitelock,\n gaSeeAllPlans,\n gaProtectMySite,\n gaWantMoreProtection,\n gaGetNowAnchor,\n}) => {\n const getNowProps = () => {\n const defaultProps = {\n paymentCycles,\n paymentMethods,\n domains,\n setSelectedDomain,\n title,\n description,\n listTitle,\n featureList,\n formTitle,\n formDescription,\n formFirstToggleLabel,\n formSecondToggleLabel,\n formSecondTogglePlaceholder,\n cycleLabel,\n handleOnToggle,\n activeDomainToggle,\n selectedDomain,\n typedDomain,\n setTypedDomain,\n setSelectedCycle,\n selectedCycle,\n selectePaymentLabel,\n activeCycle,\n disabledButton,\n toBePaid,\n hgSiteLock,\n getDomain,\n isLoadingPayment,\n setSelectedPaymentMethod,\n needMoreLabel,\n needMoreButtonText,\n detailsSectionTitle,\n detailsSectionFirstSectionTitle,\n detailsSectionFirstSectionDescription,\n detailsSectionFirstSectionButtonLabel,\n detailsSectionSecondSectionTitle,\n detailsSectionSecondSectionDescription,\n detailsSectionSecondSectionButtonLabel,\n gaSelectDomain,\n gaTypeDomain,\n gaCyclePaymentClick,\n gaSelectPaymentMethod,\n gaBuySitelock,\n gaSeeAllPlans,\n };\n\n return defaultProps;\n };\n\n const getDetailsSectionProps = () => {\n const defaultProps = {\n title: detailsSectionTitle,\n firstSectionTitle: detailsSectionFirstSectionTitle,\n firstSectionDescription: detailsSectionFirstSectionDescription,\n firstSectionButtonLabel: detailsSectionFirstSectionButtonLabel,\n secondSectionTitle: detailsSectionSecondSectionTitle,\n secondSectionDescription: detailsSectionSecondSectionDescription,\n secondSectionButtonLabel: detailsSectionSecondSectionButtonLabel,\n gaProtectMySite,\n };\n\n return defaultProps;\n };\n\n const getDiscoverBenefitsProps = () => {\n const defaultProps = {\n title: discoverBenefitsTitle,\n benefits: discoverBenefitsBenefits,\n ctaTitle: discoverBenefitsCtaTitle,\n ctaDescription: discoverBenefitsCtaDescription,\n buttonLabel: discoverBenefitsButtonLabel,\n gaWantMoreProtection,\n };\n\n return defaultProps;\n };\n\n const getBannerProps = () => {\n const defaultProps = {\n title: bannerTitle,\n buttonLabel: bannerLabel,\n gaGetNowAnchor,\n };\n\n return defaultProps;\n };\n\n return (\n <>\n \n \n \n {t('sitelock.cta.title')}\n \n \n\n
\n \n );\n};\nexport default withI18n()(withStyles(styles, { withTheme: true })(SecurityCta));\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n padding: 0 40px 0px 40px;\n @media (max-width: ${theme.breakpoints.md}) {\n padding: 0px;\n }\n`}\n`;\n\nexport const MainTitleWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.palette.white.light};\n display: flex;\n margin: 24px 0px;\n min-height: 60px;\n padding: 7px 24px;\n `}\n`;\n\nexport const MainTitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.color.greyDark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.lg};\n font-weight: ${theme.font.weights.regular};\n margin: 0px;\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.section`\n${({ theme }) => css`\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 40px 0px 60px;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n padding: 32px 16px 28px;\n }\n `}\n`;\n\nexport const Title = styled.h3`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 30px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 40px;\n margin: 0px 0px 56px 0px;\n max-width: 600px;\n text-align: center;\n span {\n color: ${theme.v1.color.action.hover}\n }\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n max-width: 450px;\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n font-size: 24px;\n line-height: 32px;\n margin: 0px 0px 32px 0px;\n }\n `}\n`;\n\nexport const FirstRow = styled.div`\n${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 137px;\n justify-content: center;\n margin-bottom: 55px;\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n gap:100px;\n }\n @media (max-width: 1085px) {\n gap:20px;\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n flex-direction: column-reverse;\n margin-bottom: 40px;\n }\n `}\n`;\n\nexport const SecondRow = styled.div`\n${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 137px;\n justify-content: center;\n margin-bottom: 40px;\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n gap: 128px;\n }\n @media (max-width: 1085px) {\n gap:20px;\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const RowContent = styled.div`\n${({ theme, row }) => css`\n display: flex;\n flex-direction: column;\n margin-top: ${row === 2 ? '40px' : '0px'};\n max-width: 568px;\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n margin-top:0px;\n max-width: 440px;\n }\n `}\n`;\n\nexport const RowImage = styled.img`\n${({ theme }) => css`\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n width: 387px;\n }\n @media (max-width: 1085px) {\n width: 300px;\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n width: 100%;\n }\n `}\n`;\n\nexport const ImageWrapper = styled.div`\n`;\n\n\nexport const RowTitle = styled.h5`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 32px;\n margin: 0px;\n text-align: left;\n span {\n color: ${theme.v1.color.action.hover}\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n text-align: center;\n }\n `}\n`;\n\nexport const RowDescription = styled.p`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 22px;\n margin: 16px 0px;\n text-align: left;\n span {\n display: block;\n }\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n margin: 20px 0px;\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n text-align: center;\n }\n `}\n`;\n\nexport const RowButtonWrapper = styled.div`\n${({ theme }) => css`\n @media (max-width: ${theme.v1.breakpoints.md}) {\n display:flex;\n justify-content: center;\n margin-bottom: 30px;\n }\n `}\n`;\n","import React from 'react';\nimport * as Styles from './DetailsSections.styles';\nimport { Button } from '@/pages/common/v1/Button';\nimport firstRowImage from '@/media/codeguard/problems.png';\nimport secondRowImage from '@/media/codeguard/howprotect.png';\n\nconst DetailsSections = ({\n title,\n firstSectionTitle,\n firstSectionDescription,\n firstSectionButtonLabel,\n secondSectionTitle,\n secondSectionDescription,\n secondSectionButtonLabel,\n codeGuardAnalytics,\n}) => {\n const moveScreenToTop = (row) => {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n row === 1\n ? codeGuardAnalytics.firstSectionButtonClick()\n : codeGuardAnalytics.secondSectionButtonClick();\n };\n return (\n \n {title} \n\n \n \n \n\n \n \n {firstSectionTitle}\n \n\n \n {firstSectionDescription}\n \n\n \n moveScreenToTop(1)}\n />\n \n\n \n \n\n \n \n \n {secondSectionTitle}\n \n\n \n {secondSectionDescription}\n \n\n \n moveScreenToTop(2)}\n />\n \n\n \n\n \n \n \n \n );\n};\n\nexport default DetailsSections;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.section`\n${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v1.color.white.primary};\n display: flex;\n flex-direction: column;\n padding: 40px 20px;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n padding: 32px 16px;\n }\n `}\n`;\n\nexport const Title = styled.h3`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.xxxxxl};\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 40px;\n margin: 0px 0px 56px 0px;\n text-align: center;\n\n @media (max-width: 768px) {\n font-size: 24px;\n line-height: 32px;\n margin: 0px 0px 42px 0px;\n max-width: 388px;\n }\n\n @media (max-width: 360px) {\n max-width: 288px;\n }\n `}\n`;\n\nexport const BenefitsWrapper = styled.ul`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap:10px;\n justify-content: space-around;\n margin: 0px 0px 80px 0px;\n padding:0px;\n width: 100%;\n\n @media (max-width: 1300px) {\n flex-direction: column;\n gap: 25px;\n margin: 0px 0px 40px 0px;\n }\n`;\n\nexport const BenefitWrapper = styled.li`\n align-items: center;\n display: flex;\n flex-direction: column;\n`;\n\nexport const BenefitTitle = styled.h6`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 32px;\n margin: 16px 0px 0px 0px;\n text-align: center;\n\n @media (min-width: 1300px) {\n max-width: 308px;\n }\n\n @media (min-width: 1920px) {\n max-width: unset;\n }\n\n @media (max-width: 768px) {\n font-size: 20px\n }\n `}\n`;\n\nexport const BenefitDescription = styled.p`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.font.weights.regular};\n line-height: 22px;\n margin: 16px 0px 0px 0px;\n max-width:320px;\n text-align: center;\n `}\n`;\n\n\nexport const CodeguardBanner = styled.img`\n margin-bottom: 16px;\n`;\n\nexport const VideoTitle = styled.h5`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 30px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 40px;\n margin: 0px 0px 40px 0px;\n text-align: center;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n font-size: 24px;\n line-height: 32px;\n }\n `}\n`;\n\nexport const VideoDescription = styled.p`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 22px;\n margin: 16px 0px 0px 0px;\n text-align: center;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n font-size: 14px;\n }\n `}\n`;\n\nexport const VideoContainer = styled.div`\n${({ theme }) => css`\n width: 684px;\n @media (max-width: ${theme.v1.breakpoints.md}) {\n max-width: 90%;\n }\n `}\n`;\n\nexport const VideoLayer = styled.div`\n overflow: hidden;\n padding-top: 56.25%;\n position: relative;\n width: 100%;\n`;\n\nexport const Video = styled.iframe`\n bottom: 0;\n height: 100%;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n width: 100%;\n`;\n\nexport const RowButtonWrapper = styled.div`\n${({ theme }) => css`\n margin: 16px 0px 40px 0px;\n @media (max-width: ${theme.v1.breakpoints.md}) {\n margin: 16px 0px 30px 0px;\n }\n `}\n`;\n","import React from 'react';\nimport * as Styles from './DiscoverBenefits.styles';\nimport codeGuardBanner from '@/media/codeguard/codeguard-banner.png';\nimport { Button } from '@/pages/common/v1/Button';\nimport { videoEmbedUrl } from '@/config/urls/codeguard';\n\nconst DiscoverBenefits = ({\n title,\n benefits = [],\n videoTitle,\n videoDescription,\n buttonLabel,\n codeGuardAnalytics,\n}) => {\n const moveScreenToTop = () => {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n codeGuardAnalytics.thirdRowButtonClick();\n };\n return (\n \n \n {title}\n \n\n \n {benefits.map(benefit => (\n \n {benefit.icon}\n \n {benefit.title}\n \n \n {benefit.description}\n \n \n ))}\n \n\n \n {videoTitle}\n \n\n \n \n \n \n\n \n {videoDescription}\n \n\n \n moveScreenToTop()}\n />\n \n \n );\n};\n\nexport default DiscoverBenefits;\n","export const CODEGUARD_BUY_URL = 'https://www.hostgator.com.br/backup-online';\n\nexport const videoEmbedUrl = 'https://www.youtube.com/embed/wvv4BGjsehA';\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.section`\n${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v1.color.background.marketingBanner};\n display: flex;\n justify-content: center;\n gap: 72px;\n padding: 55px 0px;\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n gap: 20px;\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n flex-direction: column;\n gap: 40px;\n padding: 32px 0px;\n }\n `}\n`;\n\nexport const ContentWrapper = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const Title = styled.h3`\n${({ theme }) => css`\n color: ${theme.v1.color.white.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 30px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 40px;\n margin: 0px 0px 20px 0px;\n max-width: 380px;\n text-align: left;\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n max-width: 260px;\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n font-size: 20px;\n line-height: 27px;\n margin: 0px 0px 20px 0px;\n max-width: 288px;\n text-align: center;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ theme }) => css`\n width: 232px;\n\n @media (min-width: 1920px) {\n width: 335px;\n }\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n width: 287px;\n }\n\n > button {\n width: 100%;\n }\n `}\n`;\n\nexport const BannerSnappy = styled.img`\n${({ theme }) => css`\n @media (max-width: ${theme.v1.breakpoints.md}) {\n width: 300px;\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n width: 220px;\n }\n `}\n`;\n","import React from 'react';\nimport { Button } from '@/pages/common/v1/Button';\nimport * as Styles from './SnappyBanner.styles';\nimport bannerSnappy from '@/media/codeguard/banner-snappy.png';\n\nconst SnappyBanner = ({ title, buttonLabel, codeGuardAnalytics }) => {\n const moveScreenToTop = () => {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n codeGuardAnalytics.finalBannerButtonClick();\n };\n return (\n \n \n {title} \n \n moveScreenToTop()}\n variant=\"tertiary\"\n />\n \n \n \n );\n};\n\nexport default SnappyBanner;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.white.primary};\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n position: relative;\n\n @media (max-width: 1296px){\n flex-direction: column;\n }\n `}\n`;\n\nexport const Left = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1 1;\n padding: 56px 0px 0px 83px;\n\n @media(max-width: 1919px){\n padding: 32px 0px 0px 61px;\n }\n\n @media (max-width: 1296px){\n align-items: center;\n padding: 32px 61px 0px 61px;\n }\n\n @media (max-width: 428px){\n padding: 32px 15px 0px 15px;\n }\n`;\n\nexport const Right = styled.div`\n flex: 0 1;\n margin-left: 20px;\n padding: 56px 83px 0px 0px;\n\n @media(max-width: 1919px){\n padding: 32px 61px 0px 0px;\n }\n\n @media (max-width: 1296px){\n display: none;\n visibility: hidden;\n }\n`;\n\nexport const MobileForm = styled.div`\n display: none;\n visibility: hidden;\n width: 100%;\n\n @media (max-width: 1296px){\n display: flex;\n visibility: visible;\n }\n`;\n\nexport const Logo = styled.img`\n ${() => css`\n max-width: 210px;\n `}\n`;\n\nexport const TitleWrapper = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 30px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 41px;\n margin: 18px 0px 16px;\n max-width: 650px;\n\n & span {\n color: ${theme.v1.color.action.hover} !important;\n }\n\n @media (max-width: 1296px){\n text-align: center;\n }\n `}\n`;\n\nexport const DescriptionWrapper = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 22px;\n margin: 0px 0px 16px;\n max-width: 440px;\n\n @media (max-width: 1296px){\n text-align: center;\n }\n `}\n`;\n\nexport const ListTitleWrapper = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 22px;\n margin: 0px 0px 50px;\n max-width: 440px;\n\n span {\n font-weight: ${theme.v1.font.weights.bold};\n }\n\n\n @media (max-width: 1296px){\n margin-top: 16px;\n text-align: center;\n }\n\n @media (max-width: 724px){\n margin: 16px 0px 24px;\n align-self: start;\n }\n `}\n`;\n\nexport const ListWrapper = styled.div`\n ${() => css`\n display: flex;\n\n ul:first-child {\n margin-right: 50px\n }\n \n @media(max-width: 1919px){\n flex-direction: column;\n }\n\n @media (max-width: 1296px){\n flex-direction: row;\n }\n\n @media (max-width: 724px){\n align-self: start;\n flex-direction: column;\n }\n `}\n`;\n\nexport const ListItems = styled.ul`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 22px;\n list-style: none;\n margin: 0px;\n padding: 0px 0px 0px 20px;\n `}\n`;\n\nexport const ListItem = styled.li`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 22px;\n margin: 0px 0px 12px 0px;\n max-width: 440px;\n position: relative;\n\n &:before {\n border-color: ${theme.v1.color.text.featured};\n border-style: solid;\n border-width: 0 3px 3px 0;\n content: \"\";\n display: inline-block;\n height: 11px;\n left: -20px;\n position: absolute;\n top: 2px;\n transform-origin: bottom left;\n transform: rotate(45deg);\n width: 6px;\n }\n `}\n`;\n\nexport const BottomDetail = styled.div`\n ${({ theme }) => css`\n height: 90px;\n margin-top: 32px;\n position: relative;\n width: 100%;\n\n overflow: hidden;\n\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n\n &:after {\n background-color: ${theme.v1.color.background.wizard};\n bottom: -45px;\n content: '';\n display: block;\n height: 70px;\n left: 0px;\n position: absolute;\n transform: rotate(-2deg);\n width: calc(100% + 10px);\n }\n `}\n`;\n\nexport const SnappyDetail = styled.img`\n ${() => css`\n margin-left: 150px;\n margin-top: auto;\n max-width: 186px;\n position: absolute;\n bottom: 0px;\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n border: 1px solid ${theme.v1.color.background.wizard};\n border-radius: 4px;\n display: flex;\n flex-direction: column;\n margin-left: auto;\n padding: 32px 16px;\n width: 554px;\n\n @media (max-width: 1296px){\n width: 100%;\n }\n `}\n`;\n\nexport const FormTitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.featured};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 32px;\n margin: 0px 0px 8px;\n\n @media (max-width: 1296px){\n text-align: center;\n }\n `}\n`;\n\nexport const DomainLabel = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 18px;\n margin: 0px 0px 8px;\n `}\n`;\n\nexport const Label = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 18px;\n margin: 8px 0px;\n `}\n`;\n\nexport const ListOfToggles = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 8px;\n `}\n`;\n\nexport const ConfirmButtonWrapper = styled.div`\n margin: 17px 0px 0px;\n`;\n\nexport const SelectedDomainMessageWrapper = styled.div`\n${({ theme }) => css`\n display: flex;\n flex-direction: column;\n margin-top: -12px;\n\n button {\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n padding: 0px;\n text-align: left;\n text-decoration: underline;\n width: fit-content;\n }\n `}\n`;\n\nexport const SelectedDomainMessageTitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 19px;\n margin: 0px 0px 18px;\n `}\n`;\n\nexport const SelectedDomainMessageLabel = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 19px;\n margin: 0px 0px 11px;\n `}\n`;\n\nexport const TypeDomainWrapper = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n `}\n`;\n\nexport const CyclesBlock = styled.div``;\nexport const MethodsBlock = styled.div``;\nexport const ValueBlock = styled.div`\n button {\n min-width: 162px;\n\n span {\n padding: 0;\n }\n\n div {\n margin: 0;\n padding: 0;\n }\n }\n`;\n\nexport const CyclesWrapper = styled.div`\n display: flex;\n gap: 10px;\n\n @media (max-width: 768px) {\n flex-wrap: wrap;\n \n > div {\n flex: 1 0 45%;\n }\n }\n`;\n\nexport const Price = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.action.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 32px;\n margin: 2px 0px 10px;\n\n small {\n font-size: 14px;\n line-height: 18px;\n }\n `}\n`;\n\nexport const NeedMoreWrapper = styled.div`\n display: flex;\n flex-direction: column;\n\n p {\n margin: 16px 0px 10px;\n max-width: 275px;\n }\n`;\n\nexport const NeedMoreLink = styled.a`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v1.color.action.primary};\n display: flex;\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 26px;\n text-decoration: none;\n\n svg {\n fill: ${theme.v1.color.action.primary};\n margin-left: 12px;\n stroke: ${theme.v1.color.action.primary};\n }\n `}\n`;\n\nexport const NeedMore = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 18px;\n max-width: 275px;\n `}\n`;\n","import React, { useEffect } from 'react';\nimport * as Styles from './GetNowForm.styles';\nimport { Input } from '@/pages/common/v1/inputs';\nimport {\n Button, RadioOption, Select, RadioToggle,\n} from '@/pages/common/v1';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { IconArrowForward } from '@/icons';\nimport Loader from '@/components/Layout/Loader';\n\nconst GetNowForm = ({\n paymentCycles = [\n { title: 'Anual', name: 'annually', featured: true },\n { title: 'Semestral', name: 'semiannually', featured: false },\n { title: 'Trimestral', name: 'quarterly', featured: false },\n { title: 'Mensal', name: 'monthly', featured: false },\n ],\n paymentMethods = [\n { label: '1x Cartão Crédito', value: 'braspag_credit_1x', id: 'braspag_credit_1x' },\n { label: 'Boleto', value: 'gp_boleto', id: 'gp_boleto' },\n { label: 'Boleto Bank of America', value: 'boleto', id: 'boleto' },\n { label: 'PayPal Antigo', value: 'paypal', id: 'paypal' },\n { label: 'Paypal', value: 'gp_paypal', id: 'gp_paypal' },\n ],\n formTitle = 'professional plan',\n formDescription,\n formFirstToggleLabel,\n formSecondToggleLabel,\n formSecondTogglePlaceholder,\n activeDomainToggle,\n typedDomain = '',\n handleOnToggle,\n selectedDomain = null,\n setTypedDomain,\n setSelectedDomain,\n disabledButton = true,\n domains = [],\n cycleLabel = 'Select cycle:',\n setSelectedCycle,\n selectedCycle = 'annually',\n selectePaymentLabel = 'Select the payment method:',\n activeCycle = { price: '279.99', cycle: 'annually', per: '/ano' },\n toBePaid = 'To be paid',\n hgCodeguard = 'https://www.hostgator.com.br/backup-online',\n getCodeGuard,\n isLoadingPayment = false,\n setSelectedPaymentMethod,\n needMoreLabel,\n needMoreButtonText,\n codeGuardAnalytics,\n}) => {\n const handleSelectMethod = ({ value }) => {\n setSelectedPaymentMethod && setSelectedPaymentMethod(value);\n codeGuardAnalytics.selectPaymentMethod(value);\n };\n\n const handleSelectDomain = (e) => {\n setSelectedDomain && setSelectedDomain(e);\n };\n\n const handleToggle = ({ toggleOpen, name }) => {\n if (!selectedDomain && name === 'select-domain') {\n setSelectedDomain && setSelectedDomain(domains[0]);\n }\n\n handleOnToggle && handleOnToggle({ toggleOpen, name });\n };\n\n const handleTypeDomain = (e) => {\n setTypedDomain && setTypedDomain(e.target.value);\n };\n\n const onChangeCycle = ({ name }) => {\n if (selectedCycle !== name) {\n setSelectedCycle && setSelectedCycle(name);\n codeGuardAnalytics.cyclePaymentClick(name);\n }\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n getCodeGuard && getCodeGuard();\n codeGuardAnalytics.codeGuardBuy();\n };\n\n useEffect(() => {\n if (domains.length === 0) {\n handleOnToggle && handleOnToggle({ toggleOpen: true, name: 'type-domain' });\n }\n }, [domains.length, handleOnToggle]);\n\n return (\n \n {formTitle} \n {formDescription} \n\n \n {domains.length > 0 && (\n \n {domains && (\n \n \n \n \n \n\n \n \n {cycleLabel}\n \n \n {paymentCycles.map(cycle => (\n \n \n\n \n \n {selectePaymentLabel}\n \n \n \n {toBePaid} \n \n {formatCurrency(activeCycle.price)}\n {activeCycle.per} \n \n\n \n\n \n \n {needMoreLabel}\n \n codeGuardAnalytics.seeAllCodeGuardPlansButtonClick()}\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n {needMoreButtonText}\n \n\n \n );\n};\n\nexport default GetNowForm;\n","import React from 'react';\nimport * as Styles from './GetNow.styles';\nimport Sitelock from '@/media/codeguard/codeguard-logo.png';\nimport SnappyFace from '@/media/sitelock/snappy-face.png';\nimport { GetNowForm } from './components/GetNowForm';\n\nconst GetNow = ({\n paymentCycles,\n paymentMethods,\n title = 'protect your website of cyber threats with SiteLock',\n description = 'The ideal solution to find and fix threats to your website automatically.',\n listTitle = 'hire the SiteLock Professional and count on:',\n featureList = {\n firstColumn: [\n 'Proteção de até 100 páginas',\n 'Selo de segurança do site',\n 'Varreduras frequentes',\n 'Remoção automática de malwares',\n ],\n secondColumn: [\n 'Verificação diária de FTP',\n 'Verificação de edição de arquivos',\n 'Monitoramento de blocklist',\n 'E muito mais',\n ],\n },\n formTitle = 'professional plan',\n formDescription,\n DomainSelectTitle,\n formFirstToggleLabel,\n formSecondToggleLabel,\n formSecondTogglePlaceholder,\n setSelectedDomain,\n selectedDomain,\n activeDomainToggle,\n typedDomain,\n handleOnToggle,\n setTypedDomain,\n domains,\n disabledButton,\n cycleLabel = 'Select cycle:',\n setSelectedCycle,\n selectedCycle,\n selectePaymentLabel = 'Select the payment method:',\n activeCycle,\n toBePaid = 'To be paid',\n hgCodeguard,\n getCodeGuard,\n isLoadingPayment,\n setSelectedPaymentMethod,\n needMoreLabel,\n needMoreButtonText,\n codeGuardAnalytics,\n}) => {\n const getNowProps = () => {\n const defaultPorps = {\n paymentCycles,\n paymentMethods,\n formTitle,\n formDescription,\n DomainSelectTitle,\n formFirstToggleLabel,\n formSecondToggleLabel,\n formSecondTogglePlaceholder,\n setSelectedDomain,\n selectedDomain,\n activeDomainToggle,\n typedDomain,\n handleOnToggle,\n setTypedDomain,\n domains,\n disabledButton,\n cycleLabel,\n setSelectedCycle,\n selectedCycle,\n selectePaymentLabel,\n activeCycle,\n toBePaid,\n hgCodeguard,\n getCodeGuard,\n isLoadingPayment,\n setSelectedPaymentMethod,\n needMoreLabel,\n needMoreButtonText,\n codeGuardAnalytics,\n };\n\n return defaultPorps;\n };\n\n return (\n \n \n \n {title}\n \n\n \n {description}\n \n\n \n \n\n \n {listTitle}\n \n\n \n \n {featureList.firstColumn.map(item => ({item} ))}\n \n\n \n {featureList.secondColumn.map(item => ({item} ))}\n \n \n \n\n \n \n\n \n \n \n );\n};\n\nexport default GetNow;\n","import React from 'react';\nimport * as Styles from './CodeGuardLP.styles';\nimport { DetailsSections } from './components/DetailsSections';\nimport { DiscoverBenefits } from './components/DiscoverBenefits';\nimport { SnappyBanner } from './components/SnappyBanner';\nimport { GetNow } from './components/GetNow';\n\nconst CodeGuardLP = ({\n getNowProps, detailsSectionsProps, discoverBenefitsProps, snappyBannerProps, mainTitle,\n}) => (\n \n \n {mainTitle} \n \n \n);\n\nexport default CodeGuardLP;\n","import { locale } from '@/utils/locale';\nimport React from 'react';\n\nexport const codeGuardCtaLocale = {\n mainTitle: locale('codeGuardLP.mainTitle'),\n getNow: {\n title: () => (\n <>\n {locale('codeGuardLP.getNow.title.0')} \n {locale('codeGuardLP.getNow.title.1')}\n \n ),\n description: locale('codeGuardLP.getNow.description'),\n listTitle: () => (\n <>\n {locale('codeGuardLP.getNow.listTitle.0')}\n {locale('codeGuardLP.getNow.listTitle.1')} \n {locale('codeGuardLP.getNow.listTitle.2')}\n \n ),\n featureList: {\n firstColumn: [\n locale('codeGuardLP.getNow.featureList.1'),\n locale('codeGuardLP.getNow.featureList.2'),\n locale('codeGuardLP.getNow.featureList.3'),\n locale('codeGuardLP.getNow.featureList.4'),\n ],\n secondColumn: [\n locale('codeGuardLP.getNow.featureList.5'),\n locale('codeGuardLP.getNow.featureList.6'),\n locale('codeGuardLP.getNow.featureList.7'),\n locale('codeGuardLP.getNow.featureList.8'),\n ],\n },\n formTitle: locale('codeGuardLP.getNow.formTitle'),\n formDescription: locale('codeGuardLP.getNow.formDescription'),\n formFirstToggleLabel: locale('codeGuardLP.getNow.formFirstToggleLabel'),\n formSecondToggleLabel: locale('codeGuardLP.getNow.formSecondToggleLabel'),\n formSecondTogglePlaceholder: locale('codeGuardLP.getNow.formSecondTogglePlaceholder'),\n selectePaymentLabel: locale('codeGuardLP.getNow.selectePaymentLabel'),\n cycleLabel: locale('codeGuardLP.getNow.cycleLabel'),\n cycleOptions: {\n annually: locale('codeGuardLP.getNow.cycleOptions.annually'),\n semiannually: locale('codeGuardLP.getNow.cycleOptions.semiannually'),\n quarterly: locale('codeGuardLP.getNow.cycleOptions.quarterly'),\n monthly: locale('codeGuardLP.getNow.cycleOptions.monthly'),\n },\n cyclePer: {\n annually: locale('codeGuardLP.getNow.cyclePer.annually'),\n semiannually: locale('codeGuardLP.getNow.cyclePer.semiannually'),\n quarterly: locale('codeGuardLP.getNow.cyclePer.quarterly'),\n monthly: locale('codeGuardLP.getNow.cyclePer.monthly'),\n },\n toBePaid: locale('codeGuardLP.getNow.toBePaid'),\n hgCodeguard: locale('codeGuardLP.getNow.hgCodeguard'),\n needMoreLabel: locale('codeGuardLP.getNow.needMoreLabel'),\n needMoreButtonText: locale('codeGuardLP.getNow.needMoreButtonText'),\n },\n detailsSections: {\n title: () => (\n <>\n {locale('codeGuardLP.detailsSections.title.0')}\n {locale('codeGuardLP.detailsSections.title.1')} \n {locale('codeGuardLP.detailsSections.title.2')}\n \n ),\n firstSection: {\n title: () => (\n <>\n {locale('codeGuardLP.detailsSections.firstSection.title.0')}\n {locale('codeGuardLP.detailsSections.firstSection.title.1')} \n \n ),\n description: () => (\n <>\n \n {locale('codeGuardLP.detailsSections.firstSection.description.0')}\n {locale('codeGuardLP.detailsSections.firstSection.description.1')} \n {locale('codeGuardLP.detailsSections.firstSection.description.2')}\n \n \n {locale('codeGuardLP.detailsSections.firstSection.description.3')}\n \n \n ),\n buttonLabel: locale('codeGuardLP.detailsSections.firstSection.buttonLabel'),\n },\n secondSection: {\n title: () => (\n <>\n {locale('codeGuardLP.detailsSections.secondSection.title.0')}\n {locale('codeGuardLP.detailsSections.secondSection.title.1')} \n {locale('codeGuardLP.detailsSections.secondSection.title.2')}\n \n ),\n description: () => (\n <>\n \n {locale('codeGuardLP.detailsSections.secondSection.description.0')}\n \n \n {locale('codeGuardLP.detailsSections.secondSection.description.1')}\n \n \n ),\n buttonLabel: locale('codeGuardLP.detailsSections.secondSection.buttonLabel'),\n },\n },\n discoverBenefits: {\n title: locale('codeGuardLP.discoverBenefits.title'),\n benefits: {\n 0: {\n title: locale('codeGuardLP.discoverBenefits.benefits.0.title'),\n description: locale('codeGuardLP.discoverBenefits.benefits.0.description'),\n },\n 1: {\n title: locale('codeGuardLP.discoverBenefits.benefits.1.title'),\n description: locale('codeGuardLP.discoverBenefits.benefits.1.description'),\n },\n 2: {\n title: locale('codeGuardLP.discoverBenefits.benefits.2.title'),\n description: locale('codeGuardLP.discoverBenefits.benefits.2.description'),\n },\n },\n videoTitle: locale('codeGuardLP.discoverBenefits.videoTitle'),\n videoDescription: locale('codeGuardLP.discoverBenefits.videoDescription'),\n buttonLabel: locale('codeGuardLP.discoverBenefits.buttonLabel'),\n },\n snappyBanner: {\n title: locale('codeGuardLP.snappyBanner.title'),\n buttonLabel: locale('codeGuardLP.snappyBanner.buttonLabel'),\n },\n};\n","export const CODEGUARD_PRODUCT_ID = {\n br: 235,\n};\n","import { collect } from '@/analytics';\n\nconst EVENTS = {\n NAME: 'gaEvent',\n CATEGORY: {\n BUY: 'Compra Codeguard',\n LANDINGPAGE: 'Ações landingpage',\n },\n LABEL: 'Landingpage Codeguard',\n};\n\nconst cyclePaymentClick = (cycle) => {\n let actionGa = '';\n switch (cycle) {\n case 'annually':\n actionGa = 'Codeguard Anual';\n break;\n case 'semiannually':\n actionGa = 'Codeguard Semestral';\n break;\n case 'quarterly':\n actionGa = 'Codeguard Trimestral';\n break;\n case 'monthly':\n actionGa = 'Codeguard Mensal';\n break;\n default:\n break;\n }\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.BUY,\n gaEventAction: actionGa,\n gaEventLabel: EVENTS.LABEL,\n });\n};\n\nconst selectPaymentMethod = (paymentMethod) => {\n let actionGa = '';\n switch (paymentMethod) {\n case 'paypal':\n case 'gp_paypal':\n actionGa = 'Codeguard Paypal';\n break;\n case 'boleto':\n case 'gp_boleto':\n actionGa = 'Codeguard Boleto';\n break;\n case 'braspag_credit_1x':\n actionGa = 'Codeguard Cartão de crédito';\n break;\n default:\n break;\n }\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.BUY,\n gaEventAction: actionGa,\n gaEventLabel: EVENTS.LABEL,\n });\n};\n\nconst codeGuardBuy = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.BUY,\n gaEventAction: 'Codeguard Contrate agora',\n gaEventLabel: EVENTS.LABEL,\n});\n\nconst seeAllCodeGuardPlansButtonClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.LANDINGPAGE,\n gaEventAction: 'Ver todos os planos Codeguard',\n gaEventLabel: EVENTS.LABEL,\n});\n\nconst firstSectionButtonClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.LANDINGPAGE,\n gaEventAction: 'Ativar backup para meu site',\n gaEventLabel: EVENTS.LABEL,\n});\n\nconst secondSectionButtonClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.LANDINGPAGE,\n gaEventAction: 'Quero proteger meu site',\n gaEventLabel: EVENTS.LABEL,\n});\n\nconst thirdRowButtonClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.LANDINGPAGE,\n gaEventAction: 'Quero mais proteção',\n gaEventLabel: EVENTS.LABEL,\n});\n\nconst finalBannerButtonClick = () => collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY.LANDINGPAGE,\n gaEventAction: 'Contrate agora (âncora)',\n gaEventLabel: EVENTS.LABEL,\n});\n\n\nconst analytics = {\n cyclePaymentClick,\n selectPaymentMethod,\n codeGuardBuy,\n seeAllCodeGuardPlansButtonClick,\n firstSectionButtonClick,\n secondSectionButtonClick,\n thirdRowButtonClick,\n finalBannerButtonClick,\n};\n\nexport default analytics;\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useEffect, useState } from 'react';\nimport {\n withStyles,\n} from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { CodeGuardLP } from './CodeGuardLP';\nimport { codeGuardCtaLocale } from './CodeGuardCta.locale';\nimport { useHistory } from 'react-router';\nimport { IconBell, IconCloud, IconBackup } from '@/icons';\nimport {\n getPaymentMethodsCG, getPrices,\n buyCodeGuard,\n} from '@/redux/actions/codeguard';\nimport { CODEGUARD_PRODUCT_ID } from '@/config/products/codeguard';\nimport Loader from '@/components/Layout/Loader';\nimport { codeGuardAnalytics } from '@/analytics/security/codeguard';\nimport { loadDomains as loadAllDomains } from '@/redux/actions/domains';\n\nconst CodeGuardCta = ({ classes, t }) => {\n const dispatch = useDispatch();\n const { prices, paymentMethods } = useSelector(state => state.codeguard.cta);\n const history = useHistory();\n const { redirectToInvoices, invoiceId, paymentMethod } = useSelector(state => state.codeguard.buyFastcheckout);\n const { list: domainsList } = useSelector(state => state.newDomains);\n const loading = (prices === null) || (paymentMethods === null);\n\n const [activeDomainToggle, setActiveDomaintoggle] = useState(null);\n const [selectedDomain, setSelectedDomain] = useState(null);\n const [typedDomain, setTypedDomain] = useState('');\n\n const [selectedCycle, setSelectedCycle] = useState('annually');\n const [selectedPaymentMethod, setSelectedPaymentMethod] = useState('braspag_credit_1x');\n const [isLoadingPayment, setIsLoadingPayment] = useState(false);\n\n useEffect(() => {\n if (redirectToInvoices && invoiceId) {\n history.push(`${t('routes.billing')}${t('routes.unpaid')}/${invoiceId}/${paymentMethod}`);\n }\n }, [t, invoiceId, paymentMethod, redirectToInvoices]);\n\n const handleOnToggle = ({ toggleOpen, name }) => {\n if (!toggleOpen) {\n setActiveDomaintoggle(null);\n }\n\n if (toggleOpen) {\n setActiveDomaintoggle(name);\n }\n };\n\n const getCodeGuardProps = () => {\n const defaultProps = {\n mainTitle: codeGuardCtaLocale.mainTitle,\n getNowProps: {\n prices,\n setSelectedCycle,\n selectedCycle,\n isLoadingPayment,\n setSelectedPaymentMethod,\n title: codeGuardCtaLocale.getNow.title(),\n description: codeGuardCtaLocale.getNow.description,\n listTitle: codeGuardCtaLocale.getNow.listTitle(),\n featureList: codeGuardCtaLocale.getNow.featureList,\n formTitle: codeGuardCtaLocale.getNow.formTitle,\n formDescription: codeGuardCtaLocale.getNow.formDescription,\n DomainSelectTitle: codeGuardCtaLocale.getNow.DomainSelectTitle,\n formFirstToggleLabel: codeGuardCtaLocale.getNow.formFirstToggleLabel,\n formSecondToggleLabel: codeGuardCtaLocale.getNow.formSecondToggleLabel,\n formSecondTogglePlaceholder: codeGuardCtaLocale.getNow.formSecondTogglePlaceholder,\n setSelectedDomain,\n selectedDomain,\n activeDomainToggle,\n typedDomain,\n handleOnToggle,\n setTypedDomain,\n selectePaymentLabel: codeGuardCtaLocale.getNow.selectePaymentLabel,\n cycleLabel: codeGuardCtaLocale.getNow.cycleLabel,\n toBePaid: codeGuardCtaLocale.getNow.toBePaid,\n hgCodeguard: codeGuardCtaLocale.getNow.hgCodeguard,\n needMoreLabel: codeGuardCtaLocale.getNow.needMoreLabel,\n needMoreButtonText: codeGuardCtaLocale.getNow.needMoreButtonText,\n codeGuardAnalytics,\n },\n detailsSectionsProps: {\n title: codeGuardCtaLocale.detailsSections.title(),\n firstSectionTitle: codeGuardCtaLocale.detailsSections.firstSection.title(),\n firstSectionDescription: codeGuardCtaLocale.detailsSections.firstSection.description(),\n firstSectionButtonLabel: codeGuardCtaLocale.detailsSections.firstSection.buttonLabel,\n secondSectionTitle: codeGuardCtaLocale.detailsSections.secondSection.title(),\n secondSectionDescription: codeGuardCtaLocale.detailsSections.secondSection.description(),\n secondSectionButtonLabel: codeGuardCtaLocale.detailsSections.secondSection.buttonLabel,\n codeGuardAnalytics,\n },\n discoverBenefitsProps: {\n title: codeGuardCtaLocale.discoverBenefits.title,\n benefits: [\n {\n icon: \n
\n );\n};\n\nexport default withI18n()(withStyles({ withTheme: true })(CodeGuardCta));\n","export const SITELOCK_PANEL = 'https://secure.sitelock.com/login';\n\nexport const SITELOCK_BUY_URL = 'https://www.hostgator.com.br/sitelock';\n\nexport const SITELOCK_SHIELD_IMAGE = 'http://shield.sitelock.com/shield/';\n\nexport const SITELOCK_HELP_URL = 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000393034-Como-inserir-no-site-o-selo-de-seguran%C3%A7a-do-SiteLock-';\n\nexport const SITELOCK_SMARTSCAN_HELP_URL = 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000393034-Como-inserir-no-site-o-selo-de-seguran%C3%A7a-do-SiteLock-';\n\nexport const REMOVE_MALICIOUS_CODE = 'https://suporte.hostgator.com.br/hc/pt-br/articles/115002001314';\n\nexport const FTP_ACCESS = 'https://suporte.hostgator.com.br/hc/pt-br/articles/115000742474-Acesso-FTP-Informa%C3%A7%C3%B5es-gerais';\n","const styles = theme => ({\n statusArea: {\n border: `1px solid ${theme.color.geyser}`,\n background: `0% 0% no-repeat padding-box ${theme.color.white}`,\n borderRadius: '2px',\n marginTop: '30px',\n marginBottom: '12px',\n padding: '0 12px 12px 12px',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n statusLabel: {\n font: 'normal normal normal 12px/14px Roboto',\n letterSpacing: '0.01px',\n color: theme.color.doveGray,\n background: theme.color.white,\n position: 'relative',\n top: '-7px',\n padding: '0 2px',\n width: 'auto',\n minWidth: '20px',\n },\n statusMessage: {\n display: 'flex',\n '& span': {\n margin: '0 9px 0 7px',\n },\n },\n statusDates: {\n marginTop: '6px',\n },\n customPopper: {\n opacity: 1,\n },\n customTooltip: {\n backgroundColor: theme.color.doveGray,\n borderRadius: 0,\n fontSize: 12,\n lineHeight: '14px',\n textAlign: 'left',\n },\n malwareAlert: {\n borderTop: `1px solid ${theme.color.geyser}`,\n marginTop: '12px',\n textAlign: 'left',\n font: 'normal normal normal 12px/14px Roboto',\n letterSpacing: '0.01px',\n color: theme.color.tundora,\n '& strong': {\n font: 'normal normal medium 12px/14px Roboto',\n letterSpacing: '0.3px',\n },\n '& a': {\n color: theme.color.indigo,\n textDecorationLine: 'none',\n },\n '& a:hover': {\n textDecorationLine: 'underline',\n },\n },\n safe: {\n color: theme.color.oceanGreen,\n },\n issues: {\n color: theme.color.valencia,\n },\n pending: {\n color: theme.color.brightSun,\n },\n bullet: {\n '&:before': {\n content: '\"⬤ \"',\n fontSize: '10px',\n position: 'relative',\n top: '-2px',\n },\n },\n link: {\n fontWeight: '700',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport {\n withStyles, Tooltip, Typography,\n} from '@material-ui/core';\nimport { useSelector } from 'react-redux';\nimport { withI18n, Trans } from 'react-i18next';\nimport classnames from 'classnames';\nimport Info from '@material-ui/icons/Info';\nimport { getLangByCountry } from '@/config/application/langConfig';\nimport { SUPPORT_SECURITY_URL } from '@/config/urls/domainsUrls';\nimport styles from './styles';\n\nconst Status = ({ classes, t }) => {\n const {\n lastScan, nextScan, scanning, issues, attentionFlag, scanned,\n } = useSelector(state => state.sitelock);\n const alreadyScanned = {\n green: {\n color: classes.safe,\n title: t('sitelock.scannedSecure'),\n message: t('sitelock.scannedSecureMessage'),\n },\n red: {\n color: classes.issues,\n title: (issues > 1) ? `${issues} ${t('sitelock.scannedIssues')}` : `${issues} ${t('sitelock.scannedIssuesSingular')}`,\n message: t('sitelock.scannedIssuesMessage'),\n },\n yellow: {\n color: classes.pending,\n title: t('sitelock.scannedPending'),\n message: t('sitelock.scannedPendingMessage'),\n },\n };\n\n const color = (scanning && !scanned) ? classes.pending : alreadyScanned[attentionFlag].color;\n const title = (scanning && !scanned) ? t('sitelock.scannedPending') : alreadyScanned[attentionFlag].title;\n const message = (scanning && !scanned) ? t('sitelock.scannedPendingMessage') : alreadyScanned[attentionFlag].message;\n return (nextScan && lastScan) && (\n \n
\n
Status da Varredura
\n
\n { title } \n {attentionFlag !== 'red' && (\n \n
\n {attentionFlag === 'red' && (\n
\n
{t('sitelock.scannedIssuesWarningP1')}
\n
\n \n <>0\n 1 \n 2 \n 3 \n \n
\n
\n )}\n
\n
\n {t('sitelock.nextScan')} \n {' '}\n {!Number.isNaN(nextScan.getTime()) && nextScan.toLocaleString(getLangByCountry().locale, { dateStyle: 'short' })}\n \n
\n {t('sitelock.prevScan')} \n {' '}\n {!Number.isNaN(lastScan.getTime()) && lastScan.toLocaleString(getLangByCountry().locale, { dateStyle: 'short' })}\n \n
\n {item.url} \n {item.links.length} \n {item.level} \n \n);\nexport default MalwareItem;\n","const styles = theme => ({\n card: {\n maxHeight: '554px',\n padding: '24px',\n },\n historyTitle: {\n color: theme.color.tundora,\n fontSize: '24px',\n },\n historySubtitle: {\n color: theme.color.tundora,\n fontSize: '14px',\n marginBottom: '24px',\n },\n table: {\n width: '750px',\n border: '1px solid',\n borderRadius: '5px',\n borderColor: theme.color.regentGray,\n },\n tableHead: {\n borderBottom: '1px solid',\n color: theme.color.regentGray,\n display: 'flex',\n paddingLeft: '12px',\n paddingRight: '12px',\n },\n tableHeaderCell: {\n width: '16.66%',\n fontSize: '14px',\n lineHeight: '17px',\n color: theme.color.regentGray,\n paddingTop: '12px',\n paddingBottom: '12px',\n padding: '12px',\n display: 'flex',\n alignItems: 'center',\n },\n tableBody: {\n height: '240px',\n display: 'flex',\n flexDirection: 'column',\n paddingTop: '12px',\n },\n tableRow: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'stretch',\n boxShadow: `0px 1px 3px ${theme.color.tundoraLight}`,\n margin: '12px',\n marginTop: '0px',\n borderRadius: '5px',\n },\n tableRowDetails: {\n fontSize: '14px',\n display: 'flex',\n paddingX: '12px',\n paddingY: '5px',\n color: theme.color.tundora,\n },\n tableCell: {\n height: '60px',\n width: '16.66%',\n display: 'flex',\n alignItems: 'center',\n padding: '12px',\n },\n vulnerable: {\n color: theme.color.valencia,\n whiteSpace: 'nowrap',\n '&:before': {\n content: '\"⬤ \"',\n fontSize: '10px',\n position: 'relative',\n top: '-2px',\n },\n },\n secure: {\n color: theme.color.oceanGreen,\n whitespace: 'nowrap',\n '&:before': {\n content: '\"⬤ \"',\n fontSize: '10px',\n position: 'relative',\n top: '-2px',\n },\n },\n btnDetails: {\n padding: '6px',\n paddingLeft: '12px',\n paddingRight: '12px',\n borderRadius: '20px',\n backgroundColor: theme.color.white,\n color: theme.color.indigo,\n borderColor: theme.color.indigo,\n border: '1px solid',\n cursor: 'pointer',\n },\n select: {\n marginBottom: '15px',\n },\n\n malwareDetails: {\n maxHeight: '0px',\n transform: 'all 1s ease',\n overflow: 'hidden',\n },\n malwareDetailsOpen: {\n maxHeight: '9999px',\n transform: 'all 1s ease',\n },\n malwareDetailsContainer: {\n borderTop: '1px solid',\n padding: '12px',\n width: '100%',\n borderColor: theme.color.darkSilver,\n },\n malwareDetailsTable: {\n border: '1px solid',\n borderRadius: '5px',\n borderColor: theme.color.darkSilver,\n width: '100%',\n },\n malwareHeader: {\n fontSize: '14px',\n lineHeight: '17px',\n color: theme.color.regentGray,\n textAlign: 'left',\n margin: '12px',\n },\n});\n\nexport default styles;\n","import React, { useState } from 'react';\nimport {\n withStyles, Typography, Card, InputLabel, FormControl, Table, TableBody, TableHead, TableRow, TableCell,\n} from '@material-ui/core';\nimport moment from 'moment';\nimport classnames from 'classnames';\nimport { useSelector } from 'react-redux';\nimport { withI18n } from 'react-i18next';\nimport MalwareItem from './MalwareItem/MalwareItem';\nimport styles from './styles';\n\nconst History = ({ classes, t }) => {\n const { completeScan } = useSelector(state => state.sitelock);\n const malwareScan = completeScan.find(scan => scan.code === 'malware_scan');\n const { pages } = malwareScan;\n\n const [detailsToggle, setDetailsToggle] = useState(false);\n\n return (\n \n \n {t('sitelock.scanDetailed')}\n \n \n {t('sitelock.scanDetailedText')}\n \n \n \n \n
\n
{t('sitelock.scanDate')}
\n
{t('sitelock.scanPages')}
\n
{t('sitelock.scanLinks')}
\n
{t('sitelock.scanMalwares')}
\n
{t('sitelock.scanStatus')}
\n
\n
\n
\n
\n
\n
{ moment(malwareScan.last_scan).format('DD/MM/Y')}
\n
{malwareScan.total}
\n
{malwareScan.total_links}
\n
{malwareScan.issues}
\n
\n \n { malwareScan.status ? t('sitelock.scanVulnerable') : t('sitelock.scanSecure')}\n \n
\n
\n { malwareScan.attention_flag === 'red'\n && (\n {\n setDetailsToggle(!detailsToggle);\n }}\n >\n {detailsToggle ? t('sitelock.scanClose') : t('sitelock.scanDetails')}\n \n )\n }\n
\n
\n
\n
\n
\n
\n \n \n {t('sitelock.infectedPage')} \n {t('sitelock.malwareQuantity')} \n {t('sitelock.severity')} \n \n \n \n {pages.map(item => \n
\n
\n
\n
\n
\n
\n\n
\n );\n};\nexport default withI18n()(withStyles(styles, { withTheme: true })(History));\n","const styles = theme => ({\n resultContainer: {\n marginRight: '6px',\n marginBottom: '6px',\n background: `${theme.color.white}`,\n },\n tableHeader: {\n paddingRight: '6px',\n border: 0,\n },\n smartscanHeader: {\n marginTop: '24px',\n whiteSpace: 'nowrap',\n color: theme.color.regentGray,\n font: 'normal normal normal 12px/14px Roboto',\n },\n smartscanBody: {\n whiteSpace: 'nowrap',\n color: theme.color.tundora,\n font: 'normal normal normal 14px/17px Roboto',\n marginTop: '6px',\n marginBottom: '36px',\n },\n btnIcon: {\n marginRight: '6px',\n },\n btn: {\n color: theme.color.indigo,\n marginRight: '10px',\n padding: '0 10px',\n '&:hover': {\n color: theme.color.chambray,\n background: 'none',\n },\n },\n downloadError: {\n color: theme.color.valencia,\n fontSize: '10px',\n },\n downloadCell: {\n textAlign: 'center',\n },\n});\n\nexport default styles;\n","import React, { useEffect, useState } from 'react';\nimport {\n withStyles, Paper, Table, TableRow, TableCell, TableHead, Typography, Button, CircularProgress,\n} from '@material-ui/core';\nimport { useDispatch, useSelector } from 'react-redux';\nimport classnames from 'classnames';\nimport Save from '@material-ui/icons/Save';\nimport { withI18n } from 'react-i18next';\nimport { downloadSMARTFile } from '@/redux/actions/sitelock';\nimport { downloadSweepSitelock } from '@/utils/ThirdParties/tagManager';\nimport styles from './styles';\n\nconst SmartScanResult = ({\n classes, t, history, domainName,\n}) => {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(false);\n const dispatch = useDispatch();\n\n const {\n lastRequestedFilename,\n lastReceivedFilename,\n lastFailedFilename,\n } = useSelector(state => state.sitelock.smartscan.file);\n\n const { product } = useSelector(state => state.sitelock);\n\n const handleClick = (downloadFilename) => {\n dispatch(downloadSMARTFile(downloadFilename));\n downloadSweepSitelock(product);\n };\n\n useEffect(() => {\n if (lastRequestedFilename === history.download) {\n setLoading(true);\n setError(false);\n }\n }, [lastRequestedFilename, history.download]);\n\n useEffect(() => {\n if (lastReceivedFilename === history.download) {\n setLoading(false);\n setError(false);\n }\n }, [lastReceivedFilename, history.download]);\n\n useEffect(() => {\n if (lastFailedFilename === history.download) {\n setLoading(false);\n setError(true);\n }\n }, [lastFailedFilename, history.download]);\n\n return (\n \n \n \n \n \n {t('sitelock.smartscan.history.verified')} \n {domainName} \n \n \n {t('sitelock.smartscan.history.scanned')} \n {history.scanned} \n \n \n {t('sitelock.smartscan.history.fixed')} \n {history.fixed} \n \n \n {t('sitelock.smartscan.history.manualFix')} \n {history.needFix} \n \n \n {(history.files > 0)\n && (\n handleClick(history.download)}\n className={classes.btn}\n size=\"small\"\n data-testid=\"btn-download\"\n disabled={loading}\n >\n {loading ? (\n {t('sitelock.smartscan.history.downloadError')}\n \n )\n }\n \n \n \n
\n \n );\n};\nexport default withI18n()(withStyles(styles, { withTheme: true })(SmartScanResult));\n","const styles = theme => ({\n root: {\n [theme.breakpoints.up(960)]: {\n paddingTop: 0,\n },\n },\n card: {\n padding: '24px',\n minWidth: '1040px',\n display: 'flex',\n flexDirection: 'column',\n },\n historyTitle: {\n color: theme.color.tundora,\n fontSize: '24px',\n display: 'flex',\n justifyContent: 'space-between',\n },\n historySubtitle: {\n color: theme.color.tundora,\n fontSize: '14px',\n marginBottom: '24px',\n },\n tableContainer: {\n background: `${theme.color.solitude}`,\n padding: '12px',\n display: 'flex',\n alignItems: 'stretch',\n border: `1px solid ${theme.color.geyser}`,\n },\n tableScroll: {\n display: 'flex',\n flexDirection: 'column',\n maxHeight: '375px',\n width: '100%',\n paddingRight: '12px',\n overflowY: 'scroll',\n 'scrollbar-color': `${theme.color.indigo} ${theme.color.white}`,\n },\n historyDescription: {\n maxWidth: '800px',\n marginBottom: '12px',\n font: 'normal normal normal 14px/17px Roboto',\n letterSpacing: '0.01px',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport {\n withStyles, Card, Typography, Button,\n} from '@material-ui/core';\nimport Close from '@material-ui/icons/Close';\nimport { useSelector } from 'react-redux';\nimport { withI18n, Trans } from 'react-i18next';\nimport { SITELOCK_SMARTSCAN_HELP_URL } from '@/config/urls/sitelock';\nimport SMARTScanResult from './SMARTScanResult';\nimport styles from './styles';\n\nconst SMARTHistory = ({ classes, t, handleCloseFn }) => {\n const { history } = useSelector(state => state.sitelock.smartscan);\n const { domain } = useSelector(state => state.sitelock);\n\n return (\n \n \n {t('sitelock.smartscan.historyTitle')}\n { handleCloseFn(); }}>\n \n \n \n \n \n {SITELOCK_SMARTSCAN_HELP_URL}\n \n \n \n \n
\n {history && history.map(element => (
\n
\n );\n};\nexport default withI18n()(withStyles(styles, { withTheme: true })(SMARTHistory));\n","const styles = theme => ({\n AlertBox: {\n marginTop: '16px',\n padding: '0px 10px',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n gap: '5px',\n fontSize: '12px',\n color: theme.color.tundora,\n border: `${theme.color.brightSun} 1px solid`,\n borderRadius: '5px',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles, Link } from '@material-ui/core';\nimport Warning from '@material-ui/icons/Warning';\nimport styles from './styles';\n\n\nconst AlertBox = ({\n classes, message, title, urlTitle, url,\n}) => (\n \n
\n
\n {title} \n {message}\n {' '}\n {url &&
\n
\n
{t('sitelock.SealWarning')} \n
\n
\n
\n {(product === SITELOCK_PREMIUM || product === SITELOCK_ENTERPRISE) && (\n
\n )}\n
\n
{t('sitelock.formCode')} \n
\n {sealUrl}\n
\n
\n
\n
{t('sitelock.SealCopyLongBtn')} \n
\n
\n
\n
\n {t('sitelock.SealSaveBtn')}\n \n {t('sitelock.SealCancelBtn')} \n \n
\n {domain && uri ?
:
}\n
\n {t('sitelock.SealPreview')} \n \n
\n {t('sitelock.SealEditBtn')}\n \n \n {t('sitelock.SealCopyBtn')}\n \n \n
\n \n );\n\n const renderAlert = () => (\n
\n \n {t('sitelock.SealTitle')} \n {t('sitelock.SealSubtitle')} \n {shouldRenderShield ? renderShield() : renderAlert()}\n
\n \n
\n
{t('sitelock.sealSaved')}
\n
{t('sitelock.SealCopySuccess')}
\n
\n
{t('sitelock.smartscan.form.send')} );\n const renderUpdate = () => (\n \n
{t('sitelock.smartscan.form.cancel')} \n
{t('sitelock.smartscan.form.update')} \n
\n
\n {update ? t('sitelock.smartscan.updateForm.title') : t('sitelock.smartscan.SLtitle')}\n \n
{t('sitelock.smartscan.SLsubtitle')} \n
\n
\n
\n
\n
\n {update ? renderUpdate() : renderSave() }\n
\n
\n
\n \n \n \n
\n \n {t('sitelock.smartscan.form.error')}
\n {t('sitelock.smartscan.form.pending')}
\n {t('sitelock.smartscan.form.success')}
\n \n \n \n \n {domain}\n {' '}\n {product && (\n \n (\n {product}\n )\n \n )}\n\n \n \n {t('sitelock.panel')}\n \n
\n );\n\n const {\n scanning, scanLimitReached, domain, product, issues, status, scanned, smartscan,\n } = useSelector(state => state.sitelock);\n\n const { config, history } = useSelector(state => state.sitelock.smartscan);\n const needsConfig = smartscan.active && !smartscan.configured;\n const isSMART = smartscan.active && smartscan.configured;\n const faq = useSelector(state => state.faq);\n const dispatch = useDispatch();\n const { productType, productId } = useParams();\n const isStandalone = productType === 'standalone';\n const [modalHistory, setModalHistory] = useState(false);\n\n useEffect(() => {\n const timer = setTimeout(() => { dispatch({ type: SITELOCK_RESET_TOAST }); }, 5000);\n return () => { clearTimeout(timer); };\n }, [status, config]);\n\n const buttonText = () => {\n if (scanLimitReached || scanned) {\n return t('sitelock.limitReached');\n }\n return scanning ? t('sitelock.checkScan') : t('sitelock.doScan');\n };\n\n\n const handleOpenHistory = () => {\n if (product != null) {\n detailsSweepSitelock(product);\n }\n setModalHistory(true);\n };\n\n const handleCloseHistory = () => {\n setModalHistory(false);\n };\n\n const handleScanClick = () => {\n if (scanned || scanLimitReached) {\n if (product != null && scanned) {\n doSweepSitelock(product);\n }\n return;\n }\n if (!(scanLimitReached || scanning)) {\n dispatch(requestScan(productType, productId));\n } else {\n dispatch(checkScanStatus(productType, productId)).then(() => {\n setTimeout(() => { dispatch({ type: SITELOCK_RESET_TOAST }); }, 2000);\n });\n }\n };\n\n const handleConfigClick = () => {\n if (config.pending) return;\n dispatch(configureSMART(productType, productId)).then(() => {\n setTimeout(() => { dispatch({ type: SITELOCK_RESET_TOAST }); }, 2000);\n });\n };\n\n return domain ? (\n \n
\n {(domain != null) && sitelockCardTitle(domain, product) }\n \n
\n
\n
\n
\n { !needsConfig && (\n \n
{t('sitelock.SLtitle')} \n
{t('sitelock.SLsubtitle')} \n
\n
\n
\n {buttonText()}\n \n {t('sitelock.scanComplete')} \n \n {isSMART ? ( \n { (scanLimitReached || scanned) && (\n
\n {t('sitelock.limit1')} \n {' '}\n {t('sitelock.limit2')}\n
\n )}\n
\n {isSMART && (
\n \n
\n
{t('sitelock.smartscan.form.error')}
\n
{t('sitelock.smartscan.form.pending')}
\n
\n
\n
{t('sitelock.smartscan.config.error')}
\n
{t('sitelock.smartscan.config.pending')}
\n
\n
\n
{t('sitelock.toastPending')}
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
;\n};\nexport default withI18n()(withStyles(styles, { withTheme: true })(SitelockDetails));\n","const styles = theme => ({\n loading: {\n width: '100%',\n padding: '20px',\n textAlign: 'center',\n },\n container: {\n margin: '0 40px 20px',\n [theme.breakpoints.down(960)]: {\n margin: '0 0 20px',\n },\n },\n alert: {\n padding: '13px 40px',\n display: 'flex',\n alignItems: 'center',\n },\n alertCritical: {\n backgroundColor: theme.color.valencia,\n color: theme.color.white,\n },\n icon: {\n marginRight: '20px',\n },\n message: {\n flex: 1,\n color: 'inherit',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport { withStyles, CircularProgress, Typography } from '@material-ui/core';\nimport { Warning } from '@material-ui/icons';\nimport { withI18n } from 'react-i18next';\nimport classnames from 'classnames';\nimport { ContentContainer } from '@/components/Cards/ContentContainer';\nimport SitelockDetails from '@/components/Security/SitelockDetails';\nimport styles from './styles';\n\nconst SitelockProductDetailsPage = ({ classes, t }) => {\n const {\n loadingDescription, loadingShield, loadingError,\n } = useSelector(state => state.sitelock);\n\n const renderContent = () => ((!loadingDescription && loadingShield) ? (
) : (\n
\n {t('sitelock.errors.noConnection')} \n
\n
\n { loadingError ? renderErrorMessage() : renderContent()}\n \n );\n};\n\nexport default withI18n()(withStyles(styles, { withTheme: true })(SitelockProductDetailsPage));\n","import React from 'react';\nimport SecurityContextProvider from '@/contexts/Security/context';\nimport SitelockProductDetailsPage from './SitelockProductDetailsPage/SitelockProductDetailsPage';\n\nconst SitelockProductDetailsPageWrapper = () => (\n \n \n \n
\n);\n\nexport default SitelockProductDetailsPageWrapper;\n","import React from 'react';\nimport { SvgIcon } from '@material-ui/core';\n\n\nconst MenuOpen = ({ ...rest }) => (\n \n \n);\n\nexport default MenuOpen;\n","const styles = () => ({\n playerWrapper: {\n position: 'relative',\n paddingBottom: '57.25%',\n height: 0,\n overflow: 'hidden',\n maxWidth: '100%',\n '& iframe': {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n },\n '& object': {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n },\n '& embed': {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n },\n },\n});\n\nexport default styles;\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useEffect } from 'react';\nimport Player from '@vimeo/player';\nimport { withStyles } from '@material-ui/core';\nimport styles from './styles';\n\nconst videoPlayerId = 'video-wrapper';\n\nconst VimeoPlayer = ({\n classes,\n videoUrl,\n onPlay,\n onFinish,\n onLoaded,\n}) => {\n useEffect(() => {\n const videoPlayer = new Player(videoPlayerId, {\n url: videoUrl,\n autoplay: true,\n });\n\n videoPlayer.on('play', videoData => onPlay(videoData));\n videoPlayer.on('ended', videoData => onFinish(videoData));\n videoPlayer.on('loaded', videoData => onLoaded(videoData));\n\n return () => {\n videoPlayer.destroy();\n };\n }, [videoUrl]);\n\n return (\n
\n );\n};\n\nexport default withStyles(styles)(VimeoPlayer);\n","const styles = theme => ({\n asideWrapper: {\n transformOrigin: 'top right',\n animation: 'opac 0.8s',\n },\n '@keyframes opac': {\n from: {\n opacity: 0,\n },\n to: {\n opacity: 1,\n },\n },\n wrapper: {\n boxShadow: 'none',\n margin: '12px 0 0 0',\n '&:first-child': {\n margin: 0,\n },\n '&:before': {\n backgroundColor: 'unset',\n },\n },\n summary: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n width: '100%',\n background: 'transparent',\n borderLeft: `5px solid ${theme.color.indigo}`,\n boxShadow: `0px 1px 3px ${theme.color.tundoraLight}`,\n padding: '13px 23px 10px 23px',\n border: 'none',\n fontSize: 18,\n fontWeight: 500,\n color: theme.color.tudora,\n margin: 0,\n },\n summaryDone: {\n borderColor: theme.color.oceanGreen,\n },\n summaryContent: {\n margin: 0,\n '&$summaryExpanded': {\n margin: 0,\n },\n },\n summaryExpanded: {},\n summaryWrapper: {\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n textAlign: 'left',\n },\n infoWrapper: {\n display: 'flex',\n alignItems: 'center',\n marginTop: 2,\n marginBottom: 5,\n },\n info: {\n display: 'flex',\n alignItems: 'center',\n marginRight: 11,\n marginTop: 3,\n '& svg': {\n color: theme.color.regentGray,\n fontSize: 14,\n },\n '& span': {\n display: 'inline-block',\n color: theme.color.regentGray,\n fontSize: 14,\n marginLeft: 5,\n fontWeight: 400,\n },\n },\n details: {\n paddingBottom: 0,\n },\n list: {\n listStyle: 'none',\n padding: '20px 0 0 0',\n margin: 0,\n width: '100%',\n },\n listItem: {\n position: 'relative',\n display: 'flex',\n marginBottom: 20,\n },\n progressWrapper: {\n marginRight: 10,\n },\n progressBall: {\n fontSize: 20,\n color: theme.color.regentGray,\n },\n progressBallDone: {\n color: theme.color.oceanGreen,\n },\n progressLine: {\n position: 'absolute',\n top: 16,\n left: 8,\n bottom: 0,\n width: 3,\n height: 'calc(100% + 8px)',\n backgroundColor: theme.color.regentGray,\n },\n progressLineDone: {\n backgroundColor: theme.color.oceanGreen,\n },\n listTitle: {\n color: theme.color.tundora,\n },\n wrapperVideoItem: {\n cursor: 'pointer',\n },\n selectedVideoItemAnimation: {\n animation: 'selectVideoNotation 0.15s linear',\n fontWeight: 500,\n transform: 'translateX(8px)',\n },\n selectedVideoItemRemoveAnimation: {\n animation: 'selectVideoNotationReverse 0.15s linear',\n fontWeight: 400,\n transform: 'translateX(0px)',\n },\n '@keyframes selectVideoNotation': {\n from: {\n transform: 'translateX(0px)',\n fontWeight: 400,\n },\n to: {\n transform: 'translateX(8px)',\n fontWeight: 500,\n },\n },\n\n '@keyframes selectVideoNotationReverse': {\n from: {\n transform: 'translateX(8px)',\n fontWeight: 500,\n },\n to: {\n transform: 'translateX(0px)',\n fontWeight: 400,\n },\n },\n});\n\nexport default styles;\n","import React, { useState, useEffect } from 'react';\nimport { withStyles } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport ExpansionPanel from '@material-ui/core/ExpansionPanel';\nimport ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';\nimport ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';\nimport {\n VideoLibrary, Schedule, FiberManualRecord, ExpandMore,\n} from '@material-ui/icons';\nimport classnames from 'classnames';\nimport PropType from 'prop-types';\nimport { replaceAccents, replaceSpaceForHyphen } from '@/utils/Validators/validation';\nimport { formatSecondsToMinutes } from '@/utils/Formatters/formatTime';\nimport styles from './styles';\n\n\nconst CourseProgress = ({\n modules,\n classes,\n handleSelectVideo,\n selectedVideo,\n isAnimationEnded,\n userProgress,\n t,\n}) => {\n const [expanded, setExpanded] = useState(selectedVideo.moduleKeyName);\n const { courseKeyName: selectedCourseKeyName } = selectedVideo;\n\n useEffect(() => {\n // Animation callback\n if (isAnimationEnded) {\n const moduleName = replaceAccents(replaceSpaceForHyphen(Object.keys(modules)[0]).toLowerCase());\n setExpanded(moduleName);\n }\n }, [isAnimationEnded, modules]);\n\n const handleChange = panel => (event, isExpanded) => {\n setExpanded(isExpanded ? panel : false);\n };\n\n const isVideoWatched = ({ watchedLinks, videoLink }) => watchedLinks && watchedLinks.includes(videoLink);\n\n return (\n \n {modules.map((videoModule) => {\n const { keyName } = videoModule;\n const moduleHasProgressSaved = !!userProgress[selectedCourseKeyName] && !!userProgress[selectedCourseKeyName][keyName];\n const moduleHasWatched = moduleHasProgressSaved && userProgress[selectedCourseKeyName][keyName].watched;\n const videosLength = videoModule.videos.length;\n\n return (\n
\n }\n classes={{\n root: classes.summary,\n content: classes.summaryContent,\n expanded: classes.summaryExpanded,\n }}\n className={classnames({ [classes.summaryDone]: moduleHasWatched })}\n >\n \n
{videoModule.name} \n
\n
\n {`${videoModule.total} aulas`} \n
\n
\n {`${formatSecondsToMinutes(videoModule.duration)} ${t('courses.minutes')}`} \n
\n
\n
\n \n {videoModule.videos.map((video, index) => {\n const nextVideoIndex = index + 1;\n const videoNumberIndex = nextVideoIndex;\n const lastVideo = videosLength === videoNumberIndex;\n const { courseKeyName, moduleKeyName } = video;\n const hasWatchedVideos = userProgress[courseKeyName] && !!userProgress[courseKeyName][moduleKeyName];\n const watchedLinks = hasWatchedVideos && userProgress[courseKeyName][moduleKeyName].watchedLinks;\n const videoWatched = isVideoWatched({ watchedLinks, videoLink: video.link });\n const nextVideoWatched = !lastVideo ? isVideoWatched({ watchedLinks, videoLink: videoModule.videos[nextVideoIndex].link }) : false;\n\n return (\n \n\n \n
\n {!lastVideo && (\n
\n )}\n
handleSelectVideo(videoModule.id, video.id)}\n role=\"presentation\"\n className={classnames(classes.wrapperVideoItem, {\n [classes.selectedVideoItemAnimation]: selectedVideo && selectedVideo.id === video.id,\n [classes.selectedVideoItemRemoveAnimation]: selectedVideo && selectedVideo.id !== video.id,\n })}\n >\n {`${videoNumberIndex}. ${video.name}`} \n \n {`${formatSecondsToMinutes(video.duration)} ${t('courses.minutes')}`} \n
\n \n \n \n \n \n \n \n {t('courses.certificate.title')} \n {name} \n {t('courses.certificate.conclusion')} \n {course} \n \n \n 0\n {{ hours }}\n 2\n \n \n \n \n \n \n {date} \n {t('courses.certificate.date')} \n \n \n \n \n \n \n \n Robledo Ribeiro \n {t('courses.certificate.founder')} \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default withI18n()(CourseCertificate);\n","import { useState, useEffect } from 'react';\n\n\nconst useLocalStorage = (key, initialState) => {\n const getStorageValue = (key) => {\n const storageValue = localStorage.getItem(key);\n if (storageValue) {\n return JSON.parse(storageValue);\n }\n return initialState;\n };\n\n const [state, setState] = useState(getStorageValue(key));\n\n useEffect(() => {\n localStorage.setItem(key, JSON.stringify(state));\n }, [key, state]);\n\n return [state, setState];\n};\n\nexport default useLocalStorage;\n","export const styles = theme => ({\n wrapper: {\n position: 'relative',\n minHeight: 'calc(100vh - 80px)',\n [theme.breakpoints.up(960)]: {\n padding: '0 40px',\n },\n },\n container: {\n display: 'flex',\n minHeight: 'calc(100vh - 125px)',\n [theme.breakpoints.down(960)]: {\n flexDirection: 'column',\n },\n },\n main: {\n width: '100%',\n height: 'fit-content',\n marginRight: 24,\n position: 'relative',\n },\n title: {\n display: 'block',\n fontSize: 28,\n color: theme.color.tundora,\n fontWeight: 500,\n [theme.breakpoints.up(960)]: {\n marginBottom: 12,\n },\n [theme.breakpoints.down(960)]: {\n textAlign: 'center',\n fontSize: 20,\n color: theme.color.white,\n padding: '0px 20px 12px 20px',\n backgroundColor: theme.color.chambray,\n },\n },\n aside: {\n width: '100%',\n height: 'fit-content',\n backgroundColor: theme.color.white,\n boxShadow: 'none',\n flexShrink: 0,\n animationName: 'opac',\n animationDuration: '0.8s',\n [theme.breakpoints.up(960)]: {\n width: 310,\n },\n [theme.breakpoints.down(960)]: {\n marginTop: -4,\n paddingTop: 20,\n },\n },\n '@keyframes opac': {\n from: {\n opacity: 0,\n },\n to: {\n opacity: 1,\n },\n },\n '@keyframes animeAsideBackground': {\n from: {\n backgroundColor: 'transparent',\n },\n to: {\n backgroundColor: theme.color.white,\n },\n },\n asideBackground: {\n backgroundColor: theme.color.white,\n boxShadow: `0px 1px 3px ${theme.color.tundoraLight}`,\n\n animationName: 'animeAsideBackground',\n animationDuration: '0.3s',\n },\n header: {\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n color: theme.color.tundora,\n fontSize: 14,\n fontWeight: 500,\n height: 57,\n },\n headerContent: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n flexGrow: 1,\n paddingRight: 16,\n },\n button: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n padding: '23px 11px 22px 16px',\n border: 'none',\n background: 'transparent',\n outline: 'none',\n cursor: 'pointer',\n '&:focus': {\n outline: 'none',\n },\n },\n '@keyframes showMenuHover': {\n from: {\n transform: 'translateX(-90%)',\n },\n to: {\n transform: 'translateX(-95%)',\n },\n },\n menuHover: {\n position: 'absolute',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n whiteSpace: 'nowrap',\n backgroundColor: theme.color.white,\n height: 57,\n paddingLeft: 22,\n paddingRight: 10,\n animationName: 'showMenuHover',\n animationDuration: '0.30s',\n animationTimingFunction: 'ease-out',\n transform: 'translateX(-95%)',\n },\n menuTitle: {\n animationName: 'animeAsideProgress',\n animationDuration: '0.8s',\n },\n '@keyframes showMenuTitleHover': {\n from: {\n opacity: 0,\n },\n to: {\n opacity: 1,\n },\n },\n menuTitleHover: {\n animationName: 'showMenuTitleHover',\n animationDuration: '0.40s',\n },\n video: {\n width: '100%',\n [theme.breakpoints.up(960)]: {\n position: 'absolute',\n },\n },\n videoContent: {\n position: 'relative',\n },\n loaderWrapper: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n paddingBottom: '57.25%',\n height: 0,\n overflow: 'hidden',\n },\n loader: {\n marginTop: '50%',\n },\n certificateProgress: {\n fontSize: 12,\n color: theme.color.white,\n height: 20,\n lineHeight: '20px',\n borderRadius: 2,\n padding: '0 6px',\n },\n certificateWrapper: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n padding: '25px 27px 0px 27px',\n '& > a': {\n textDecoration: 'none',\n },\n },\n certificateInfo: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n marginBottom: 30,\n },\n wrapperPDFLink: {\n '& > a': {\n textDecoration: 'none',\n },\n },\n certificateButton: {\n marginBottom: 30,\n },\n certificateText: {\n fontSize: 12,\n color: theme.color.regentGray,\n },\n greyCertificateProgress: {\n backgroundColor: theme.color.regentGray,\n },\n greenCertificateProgress: {\n backgroundColor: theme.color.oceanGreen,\n },\n lockIcon: {\n marginRight: 15,\n color: theme.color.regentGray,\n },\n});\n\nexport const headerKeyframes = {\n '0%': {\n opacity: 0,\n transform: 'translateY(35px)',\n },\n '100%': {\n opacity: 1,\n transform: 'translateY(0)',\n },\n};\n\nexport const widthKeyFrames = (from, to) => ({\n '0%': {\n width: from,\n },\n '100%': {\n width: to,\n },\n});\n\nexport const heightKeyFrames = (from, to) => ({\n '0%': {\n height: from,\n },\n '100%': {\n height: to,\n },\n});\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useState, useEffect } from 'react';\nimport { withI18n } from 'react-i18next';\nimport { withStyles, withWidth } from '@material-ui/core';\nimport { isWidthDown } from '@material-ui/core/withWidth';\nimport { Menu as MenuIcon, Lock as LockIcon } from '@material-ui/icons';\nimport classnames from 'classnames';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useParams, Redirect } from 'react-router-dom';\nimport { StyleSheet, css } from 'aphrodite';\nimport { PDFDownloadLink } from '@react-pdf/renderer';\nimport MenuOpenIcon from '@/media/icons/MenuOpen';\nimport ExternalServiceErrorMessage from '@/components/Notification/ExternalServiceErrorMessage';\nimport VimeoPlayer from '@/components/Courses/VimeoPlayer';\nimport CourseProgress from '@/components/Courses/CourseProgress';\nimport CourseCertificate from '@/components/Courses/CourseCertificate';\nimport Loader from '@/components/Layout/Loader';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport { getVimeoShowcases, traceCourseAccess } from '@/redux/actions/videos';\nimport useLocalStorage from '@/hooks/useLocalStorage';\nimport { formatSecondsToHours } from '@/utils/Formatters/formatTime';\nimport { indexedDBGetCourseByUserId, indexedDBPutCourseProgress } from '@/config/indexedDB/handlers';\nimport {\n styles,\n headerKeyframes,\n widthKeyFrames,\n heightKeyFrames,\n} from './styles';\n\n\nconst CourseDetailPage = ({ t, classes, width }) => {\n const dispatch = useDispatch();\n\n const { id: courseId } = useParams();\n\n const stateCourses = useSelector(state => state.videos.courses);\n const loading = useSelector(state => state.videos.loading);\n const requestError = useSelector(state => state.videos.requestError);\n const userId = useSelector(state => state.summary.id);\n const userName = useSelector(state => state.summary.name);\n\n const [userProgress, setUserProgress] = useState('empty');\n const [loadingProgress, setLoadingProgress] = useState(true);\n const [showModules, setShowModules] = useState(true);\n const [asideModulesIsOpen, setAsideModulesIsOpen] = useState('');\n const [menuHover, setMenuHover] = useState(false);\n const [video, setVideo] = useState();\n const [asideModulesSizes, setAsideModulesSizes] = useState({ height: null, width: null });\n const [isAnimationDone, setIsAnimationDone] = useState(false);\n const [asideAnimationDone, setAsideAnimationDone] = useState(false);\n const [videoLoaded, setVideoLoaded] = useState(false);\n const [totalVideos, setTotalVideos] = useState(0);\n const [totalWatched, setTotalWatched] = useState(0);\n const [certificateProgress, setCertificateProgress] = useState(0);\n const [redirectToShowCases, setRedirectToShowCases] = useState(false);\n\n const [courseCertificate, setCourseCertificate] = useLocalStorage(`courseCertificate-${userId}`, []);\n\n const [handleCourse] = stateCourses.filter(item => item.keyName === courseId);\n const isHoverBurguerButton = !showModules && menuHover;\n\n const isMobile = isWidthDown('sm', width);\n const showMenuModules = isWidthDown('md', width);\n\n const isProgressOnIndexedDb = true;\n const isRemoveLocalStorage = true;\n\n const setLastUnwatchedVideo = () => {\n const {\n keyName: courseKeyName,\n modules: stateModules,\n } = handleCourse;\n const allModulesLength = stateModules.length;\n const currentModulesProgress = userProgress[courseKeyName];\n\n if (!currentModulesProgress) {\n return stateModules[0].videos[0];\n }\n\n const modulesKeysStoraged = Object.keys(currentModulesProgress);\n const modulesProgressLength = modulesKeysStoraged.length;\n\n const notWatchedModule = modulesKeysStoraged.findIndex(courseModule => courseModule.watched) !== -1;\n if (notWatchedModule && allModulesLength !== modulesProgressLength) {\n const notWatchedModuleIndex = stateModules.findIndex(courseModule => modulesKeysStoraged.indexOf(courseModule.keyName) === -1);\n return stateModules[notWatchedModuleIndex].videos[0];\n }\n\n let modulesHasWatched;\n let keyOfIncompleteModule = '';\n const modules = Object.keys(currentModulesProgress);\n\n for (let index = 0; index < modules.length; index += 1) {\n const key = modules[index];\n if (!currentModulesProgress[key]) {\n return stateModules[key].videos[0];\n }\n\n if (!currentModulesProgress[key].watched) {\n modulesHasWatched = false;\n keyOfIncompleteModule = key;\n break;\n }\n modulesHasWatched = true;\n }\n\n if (modulesHasWatched) {\n return stateModules[0].videos[0];\n }\n\n const { watchedLinks } = currentModulesProgress[keyOfIncompleteModule];\n\n const unwatchedModuleIndex = stateModules.findIndex(moduleItem => moduleItem.keyName === keyOfIncompleteModule);\n const safeUnwatchedModuleIndex = unwatchedModuleIndex < 0 ? 0 : unwatchedModuleIndex;\n\n const unwatchedModule = stateModules[safeUnwatchedModuleIndex];\n const unwatchedVideoIndex = unwatchedModule.videos.findIndex(videoItem => watchedLinks.indexOf(videoItem.link) === -1);\n const safeUnwatchedVideoIndex = unwatchedVideoIndex < 0 ? 0 : unwatchedVideoIndex;\n\n return stateModules[safeUnwatchedModuleIndex].videos[safeUnwatchedVideoIndex];\n };\n\n const getUserProgress = async () => {\n if (isProgressOnIndexedDb) {\n const indexedDBProgress = await indexedDBGetCourseByUserId(userId);\n if ('userProgress' in indexedDBProgress) {\n await setUserProgress(indexedDBProgress.userProgress);\n } else {\n setUserProgress({});\n }\n } else {\n const userProgress = await localStorage.getItem(`progress-${userId}`);\n setUserProgress(JSON.parse(userProgress) || {});\n }\n\n setVideo(setLastUnwatchedVideo());\n\n setLoadingProgress(false);\n };\n\n\n useEffect(() => {\n let mounted = true;\n if (mounted) {\n if (!loading && stateCourses.length === 0) {\n dispatch(getVimeoShowcases());\n }\n\n getUserProgress();\n }\n return () => { mounted = false; };\n }, []);\n\n useEffect(() => {\n if (userProgress && userProgress.length !== 0) {\n if (video && ('courseKeyName' in video) && userProgress[video.courseKeyName]) {\n const { courseKeyName } = video;\n let totalWatched = 0;\n Object.keys(userProgress[courseKeyName]).forEach((watchedModuleKey) => {\n totalWatched += userProgress[courseKeyName][watchedModuleKey].watchedLinks.length;\n });\n setTotalWatched(totalWatched);\n }\n }\n }, [userProgress, video]);\n\n useEffect(() => {\n if (handleCourse) {\n let totalVideos = 0;\n Object.keys(handleCourse.modules).forEach((keyModule) => {\n totalVideos += handleCourse.modules[keyModule].videos.length;\n });\n setTotalVideos(totalVideos);\n }\n }, [handleCourse]);\n\n useEffect(() => {\n if (totalWatched > 0) {\n const progressByVideo = 100 / totalVideos;\n const currentProgress = Math.round(totalWatched * progressByVideo);\n if (currentProgress !== 'Infinity') {\n setCertificateProgress(currentProgress);\n\n if (currentProgress === 100) {\n const { courseKeyName } = video;\n const data = new Date();\n const dataToLocale = data.toLocaleDateString();\n\n setCourseCertificate({\n ...courseCertificate,\n [courseKeyName]: {\n conclusion: dataToLocale,\n },\n });\n }\n }\n }\n }, [totalWatched, totalVideos]);\n\n useEffect(() => {\n if (video) {\n const data = {\n videoName: video.name,\n courseName: handleCourse.name,\n videoId: video.uri,\n userId,\n };\n dispatch(traceCourseAccess(data));\n }\n }, [video]);\n\n useEffect(() => {\n if (handleCourse && 'modules' in handleCourse && handleCourse.modules.length > 0) {\n setVideo(setLastUnwatchedVideo());\n } else {\n setRedirectToShowCases(true);\n }\n }, [stateCourses]);\n\n const saveUserCourseProgress = async (data) => {\n setUserProgress(data);\n\n if (isProgressOnIndexedDb) {\n await indexedDBPutCourseProgress({\n userId,\n userProgress: data,\n });\n }\n\n !isRemoveLocalStorage && await localStorage.setItem(`progress-${userId}`, JSON.stringify(data));\n };\n\n const handleMouseEnter = () => {\n if (!showModules) {\n setMenuHover(true);\n }\n };\n\n const handleMouseLeave = () => {\n if (!showModules) {\n setMenuHover(false);\n }\n };\n\n const selectVideo = (moduleId, videoId) => {\n const [selectModules] = handleCourse.modules.filter(item => item.id === moduleId);\n const [selectVideos] = selectModules.videos.filter(item => item.id === videoId);\n setVideo(selectVideos);\n setVideoLoaded(false);\n };\n\n const handleMenu = () => {\n if (showMenuModules && !isMobile) {\n if (showModules) {\n setMenuHover(false);\n const asideContainerElement = document.getElementById('aside-courses');\n setAsideModulesSizes({\n height: asideContainerElement.offsetHeight,\n width: asideContainerElement.offsetWidth,\n });\n }\n\n setAsideModulesIsOpen(showModules ? 'close' : 'open');\n setShowModules(!showModules);\n }\n };\n\n const handleAnimation = (event, element) => {\n if (element === 'aside' && event.animationName === 'animeAsideOpen') {\n setAsideAnimationDone(true);\n }\n\n element === 'asideContent' && setIsAnimationDone(true);\n };\n\n const styles = StyleSheet.create({\n asideClose: {\n display: 'flex',\n justifyContent: 'center',\n width: 57,\n height: 57,\n animationName: [\n widthKeyFrames(asideModulesSizes.width, 57),\n heightKeyFrames(asideModulesSizes.height, 57),\n ],\n animationDuration: '0.3s, 0.24s',\n },\n asideOpen: {\n display: 'unset',\n justifyContent: 'unset',\n width: asideModulesSizes.width,\n height: asideModulesSizes.height,\n },\n asideHeader: {\n animationName: [headerKeyframes],\n animationDuration: '0.2s',\n },\n });\n\n const saveCourseProgress = async () => {\n const { courseKeyName, moduleKeyName, link } = video;\n const { [courseKeyName]: courseProgress } = userProgress;\n\n const hasProgress = Object.keys(userProgress).length > 0;\n const hasCourseProgress = hasProgress && !!courseProgress && Object.keys(courseProgress).length > 0;\n const hasModuleCourseProgress = hasCourseProgress && !!courseProgress[moduleKeyName];\n const verifyHasVideoWatched = hasProgress && hasCourseProgress && hasModuleCourseProgress;\n\n const courseModule = handleCourse.modules.filter(item => item.keyName === moduleKeyName)[0];\n const checkWatchedModule = courseProgress && courseProgress[moduleKeyName];\n\n const checkErrorOnWatchedModules = (\n !!courseModule\n && checkWatchedModule\n && (courseModule.total === checkWatchedModule.watchedLinks.length)\n && !checkWatchedModule.watched\n );\n\n if (checkErrorOnWatchedModules) {\n const fixCoursesProgress = {\n [moduleKeyName]: {\n ...courseProgress[moduleKeyName],\n watched: true,\n },\n };\n\n await saveUserCourseProgress({\n ...(hasProgress && userProgress),\n [courseKeyName]: fixCoursesProgress,\n });\n\n return;\n }\n\n\n const watchedLinks = hasModuleCourseProgress ? [\n ...courseProgress[moduleKeyName].watchedLinks,\n link,\n ] : [\n link,\n ];\n\n const hasWatchedModule = !!courseModule && courseModule.total === watchedLinks.length;\n\n const videosLinks = {\n watched: hasWatchedModule,\n watchedLinks,\n };\n\n const coursesProgress = hasCourseProgress ? {\n ...courseProgress,\n [moduleKeyName]: videosLinks,\n } : {\n [moduleKeyName]: videosLinks,\n };\n\n // check if the video link is on localstorage\n if (verifyHasVideoWatched && courseProgress[moduleKeyName].watchedLinks.indexOf(link) !== -1) {\n return;\n }\n\n saveUserCourseProgress({\n ...(hasProgress && userProgress),\n [courseKeyName]: coursesProgress,\n });\n };\n\n const handleVideoLoaded = () => {\n setVideoLoaded(true);\n };\n\n const renderMenuModules = () => (\n <>\n {isHoverBurguerButton && (\n \n \n {t('courses.menuTitle')}\n \n
\n )}\n\n handleMenu()}\n className={classes.button}\n >\n {showModules ? \n \n );\n\n const getConclusionDate = () => {\n const { courseKeyName } = video;\n return courseCertificate[courseKeyName].conclusion;\n };\n\n const getCourseName = () => {\n const { name } = handleCourse;\n return name;\n };\n\n const getCourseHours = () => {\n const { duration } = handleCourse;\n return formatSecondsToHours(duration + 3600);\n };\n\n if (redirectToShowCases) {\n return \n {requestError ? (\n
\n {t('courses.vimeoServiceDown')}\n \n ) : (\n <>\n
{video.name} \n
\n
\n \n
\n {!videoLoaded && (\n
\n
\n )}\n {video && (\n
\n )}\n
\n
\n\n
handleAnimation(event, 'aside')}\n className={classnames(classes.aside, {\n [css(styles.asideClose)]: asideModulesIsOpen === 'close',\n [css(styles.asideOpen)]: asideModulesIsOpen === 'open',\n })}\n >\n \n
\n\n {renderMenuModules()}\n\n {showModules && (\n \n \n {t('courses.menuTitle')}\n \n\n 0,\n })}\n >\n {`${certificateProgress}% ${t('courses.certificate.progress')}`}\n \n
\n )}\n \n\n {showModules && (\n
\n {certificateProgress < 100 && (\n
\n {t('courses.certificate.available')} \n
\n )}\n {certificateProgress === 100 && (\n
\n
\n )}\n fileName={`${t('courses.certificate.fileName')}.pdf`}\n >\n
{t('courses.certificate.download')} \n \n
\n )}\n
\n )}\n \n
\n
{t('redirectPageMessage.WHMPanel')}
\n
\n
\n {loading && (\n <>\n
{t('redirectPageMessage.siteBuilder')}
\n
\n \n )}\n
\n {!isMobile &&
{t('notFound.error')}
}\n
{t('notFound.title')} \n
{t('notFound.description')}
\n
\n {t('notFound.textLink')}\n \n
\n );\n }\n}\n\n\nReCaptcha.propTypes = {\n elementID: PropTypes.string,\n verifyCallbackName: PropTypes.string,\n verifyCallback: PropTypes.func,\n sitekey: PropTypes.string.isRequired,\n action: PropTypes.string.isRequired,\n};\n\n\nexport default ReCaptcha;\n","const styles = theme => ({\n root: {\n fontSize: '14px',\n color: theme.color.regentGray,\n textAlign: 'center',\n marginTop: '0px',\n marginBottom: '26px',\n fontWeight: '400',\n lineHeight: '19px',\n padding: '0 20px',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Typography, withStyles } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nconst PageTitle = ({\n children,\n classes,\n ...rest\n}) => (\n \n {children}\n \n);\n\nPageTitle.propTypes = {\n children: PropTypes.node,\n classes: PropTypes.shape({\n root: PropTypes.string,\n }),\n};\n\nexport default withStyles(styles)(PageTitle);\n","const styles = theme => ({\n creditCardTitle: {\n color: theme.color.tundora,\n fontFamily: theme.font.family.secondary,\n fontSize: theme.font.sizes.xxl,\n fontWeight: theme.font.weights.medium,\n marginBottom: '20px',\n },\n creditCardCard: {\n position: 'relative',\n borderRadius: '0',\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n padding: '20px 30px 35px 30px',\n [theme.breakpoints.down('xs')]: {\n paddingLeft: '10px',\n paddingRight: '10px',\n },\n },\n container: {\n paddingTop: '20px',\n [theme.breakpoints.up(960)]: {\n paddingTop: 0,\n },\n [theme.breakpoints.down('xs')]: {\n paddingTop: 40,\n },\n },\n handleLoader: {\n [theme.breakpoints.down('xs')]: {\n paddingTop: '75px',\n },\n },\n});\n\nexport default styles;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme, noMarginTop }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n margin: ${noMarginTop ? '16px' : '48px 16px 16px'};\n `};\n`;\n\nexport const SelectProductsWrapper = styled(Wrapper)`\n display: flex;\n flex-direction: column;\n margin: 16px 0 16px 16px;\n`;\n\nexport const SuccessWrapper = styled(Wrapper)`\n align-self: center;\n display: flex;\n flex-direction: column;\n max-width: 546px;\n`;\n\nexport const TopContent = styled.div`\n display: flex;\n align-items: center;\n flex-direction: column;\n`;\n\nexport const BottomContent = styled.div`\n ${({ theme }) => css`\n display: flex;\n border: 1px solid ${theme.v2.colors.neutral.highMedium};\n border-radius: 4px;\n padding: 24px;\n `};\n`;\n\nexport const ChangeMethodContainer = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-left: 32px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin-left: 0;\n };\n `};\n`;\n\nexport const ButtonsContainer = styled.div`\n ${({ theme, centralized }) => css`\n display: flex;\n gap: 24px;\n justify-content: ${centralized && 'center'};\n margin-top: 16px;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n align-self: center;\n flex-direction: column-reverse;\n width: fit-content;\n }\n `};\n`;\n\nexport const ModalTitle = styled.h2`\n ${({ theme, noMargin }) => css`\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n margin: ${noMargin ? '0' : '4px 0 32px'};\n text-align: center;\n `};\n`;\n\nexport const ModalDescription = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 32px 0;\n text-align: center;\n `};\n`;\n\nexport const ListTitle = styled(ModalTitle)`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n margin: 0 0 24px;\n text-align: start;\n `};\n`;\n\nexport const SuccessTitle = styled(ModalTitle)`\n margin: 4px 0 8px;\n`;\n\nexport const Description = styled.b`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0;\n `};\n`;\n\nexport const ListDescription = styled(Description)`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xs};\n `};\n`;\n\nexport const Text = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 0;\n `};\n`;\n\nexport const Image = styled.img`\n ${({ theme }) => css`\n max-width: 124px;\n user-select: none;\n -webkit-user-drag: none;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n display: none;\n }\n `}\n`;\n\nexport const List = styled.ul`\n ${({ theme }) => css`\n margin: 24px 0 0;\n max-height: 379px;\n overflow: auto;\n padding: 0;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n max-height: 462px;\n }\n\n &::-webkit-scrollbar {\n width: 6px;\n }\n\n &::-webkit-scrollbar-track {\n background: ${theme.v2.colors.white.primary};\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${theme.v2.colors.neutral.highMedium};\n border-left: 12px;\n border-radius: 25px;\n border-right: 0;\n height: 30px;\n width: 100%;\n }\n `};\n`;\n\nexport const ListItem = styled.li`\n ${({ theme, lastItem }) => css`\n border-bottom: ${!lastItem && `1px solid ${theme.v2.colors.neutral.highMedium}`};\n display: flex;\n padding: 16px;\n margin-right: 14px;\n `};\n`;\n\nexport const ListItemInfos = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 24px;\n height: 44px;\n list-style-type: none;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n flex-wrap: wrap;\n height: auto;\n }\n `};\n`;\n\nexport const CheckboxLabel = styled.label`\n ${({ theme }) => css`\n display: flex;\n margin-right: 12px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n align-items: start;\n }\n `}:\n`;\n\nexport const ListItemField = styled.div`\n`;\n\nexport const ListItemLabel = styled.h6`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 0 0 4px;\n `};\n`;\n\nexport const ListItemValue = styled.p`\n ${({ theme, isProduct }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 0;\n max-width: 180px;\n overflow: hidden;\n text-overflow: ellipsis;\n width: ${isProduct && '180px'};\n white-space: nowrap;\n `};\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './ChangePaymentModal.styles';\nimport { Modal } from '@/pages/common';\nimport { useResize } from '@/hooks/useResize';\nimport {\n FLOW_ORIGIN, GA_RULES, MODAL_STEPS,\n} from './ChangePaymentModal.types';\nimport { Button, Checkbox, IconCheck } from 'gatorcomponents';\nimport Snappy from '@/media/billing/snappy-with-shadow.svg';\nimport useLocale from '@/hooks/useLocale';\nimport { formatDate } from '@/utils/Formatters/formatDate';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { useDispatch } from 'react-redux';\nimport { billingActions } from '@/redux/modules';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport { notifierError } from '@/utils/Application/notifier';\nimport { billingAnalytics } from '@/analytics';\n\nconst ChangePaymentModal = ({\n origin,\n cancelFlowAction,\n hideModal,\n productsList,\n loadingChangePaymentMethod,\n statusChangePaymentMethod,\n step = MODAL_STEPS.SUCCESS_CC_REGISTER,\n}) => {\n const [modalStep, setModalStep] = useState(step);\n const [updateRequested, setUpdateRequested] = useState(false);\n\n const changeMethodListDefault = productsList.map(product => ({ id: product.id, type: product.type, checked: true }));\n const [productsToChangeMethod, setProductsToChangeMethod] = useState(changeMethodListDefault);\n\n const dispatch = useDispatch();\n const windowRect = useResize();\n const { billing: billingLocale } = useLocale();\n const changePaymentModalLocale = billingLocale.changePaymentMethodModal;\n const modalTitleLabel = () => {\n switch (origin) {\n case FLOW_ORIGIN.MANAGE_SUBSCRIPTION:\n return changePaymentModalLocale.defaultStep.signaturePaymentChanged;\n case FLOW_ORIGIN.CREDIT_CARD:\n default:\n return changePaymentModalLocale.defaultStep.successRegister;\n }\n };\n\n const { width } = windowRect;\n const mobile = width < 600;\n\n const hasSelectedProducts = productsToChangeMethod.find(product => product.checked === true);\n\n const callGaEvent = useCallback((gaEvent = GA_RULES.CLOSE_MODAL) => {\n const gaRules = {\n CLOSE_MODAL: {\n [MODAL_STEPS.SUCCESS_CC_REGISTER]: billingAnalytics.changePaymentModal.successCcRegisterCloseModal,\n [MODAL_STEPS.SELECT_PRODUCTS]: billingAnalytics.changePaymentModal.selectProductsCloseModal,\n },\n CTA_CANCEL: {\n [MODAL_STEPS.SUCCESS_CC_REGISTER]: billingAnalytics.changePaymentModal.successCcRegisterCtaNoThanks,\n [MODAL_STEPS.SELECT_PRODUCTS]: billingAnalytics.changePaymentModal.selectProductsCtaCancel,\n },\n CTA_CHANGE_PAYMENT_METHOD: {\n [MODAL_STEPS.SUCCESS_CC_REGISTER]: billingAnalytics.changePaymentModal.successCcRegisterCtaChangeToCc,\n [MODAL_STEPS.SELECT_PRODUCTS]: billingAnalytics.changePaymentModal.selectProductsCtaChangeToCc,\n },\n };\n\n const gaEventFunction = gaRules[gaEvent][modalStep];\n\n modalStep !== MODAL_STEPS.SUCCESS_CHANGE_PRODUCTS_METHOD && gaEventFunction();\n }, [modalStep]);\n\n const handleHideModal = useCallback((gaEvent = GA_RULES.CLOSE_MODAL) => {\n callGaEvent(gaEvent);\n hideModal && hideModal();\n }, [hideModal, callGaEvent]);\n\n const handleCancel = () => {\n cancelFlowAction && cancelFlowAction();\n handleHideModal(GA_RULES.CTA_CANCEL);\n };\n\n const handleMarkCheckbox = (productId) => {\n setProductsToChangeMethod(productsToChangeMethod.map((product) => {\n if (product.id === productId) {\n return { ...product, checked: !product.checked };\n }\n return product;\n }));\n };\n\n const handleUpdateModalStep = ({ newModalStep, gaEvent }) => {\n callGaEvent(gaEvent);\n setModalStep(newModalStep);\n };\n\n const handleChangeToCreditCard = () => {\n const listToRequestChangePaymentMethod = productsToChangeMethod.filter(product => product.checked).map(product => (\n { id: product.id, type: product.type }\n ));\n\n dispatch(billingActions.subscriptions.updateSubscriptionsNotInCreditCard({ list: listToRequestChangePaymentMethod }));\n callGaEvent(GA_RULES.CTA_CHANGE_PAYMENT_METHOD);\n };\n\n const confirmPaymentMethodChange = useCallback(() => {\n if (loadingChangePaymentMethod) {\n setUpdateRequested(true);\n }\n\n if (modalStep === MODAL_STEPS.SELECT_PRODUCTS && updateRequested) {\n if (statusChangePaymentMethod === 'success') {\n setModalStep(MODAL_STEPS.SUCCESS_CHANGE_PRODUCTS_METHOD);\n }\n if (statusChangePaymentMethod === 'error') {\n dispatch(enqueueSnackbar(changePaymentModalLocale.changeMethodStep.errorToast, notifierError));\n handleHideModal();\n }\n }\n }, [\n loadingChangePaymentMethod,\n statusChangePaymentMethod,\n changePaymentModalLocale,\n modalStep,\n updateRequested,\n dispatch,\n handleHideModal,\n ]);\n\n useEffect(() => { confirmPaymentMethodChange(); }, [confirmPaymentMethodChange]);\n\n return (\n \n {modalStep === MODAL_STEPS.SUCCESS_CC_REGISTER && (\n \n \n \n {modalTitleLabel()}\n \n {origin === FLOW_ORIGIN.MANAGE_SUBSCRIPTION && (\n \n {changePaymentModalLocale.defaultStep.signaturePaymentChangedSubtitle}\n \n )}\n \n \n \n \n {changePaymentModalLocale.defaultStep.changePaymentLabel}\n \n \n {changePaymentModalLocale.defaultStep.changePaymentDescription}\n \n \n handleUpdateModalStep({ newModalStep: MODAL_STEPS.SELECT_PRODUCTS, gaEvent: GA_RULES.CTA_CHANGE_PAYMENT_METHOD })} width=\"fit\" />\n \n \n \n \n )}\n {modalStep === MODAL_STEPS.SELECT_PRODUCTS && (\n \n {changePaymentModalLocale.changeMethodStep.changeToCcLabel} \n {changePaymentModalLocale.changeMethodStep.descriptionLabel} \n \n {productsList.map((product, index) => {\n const checkboxProps = productsToChangeMethod.find(item => item.id === product.id);\n\n return (\n \n handleMarkCheckbox(product.id)}>\n \n \n \n {changePaymentModalLocale.changeMethodStep.tableLabels.product} \n {product.product} \n \n \n {changePaymentModalLocale.changeMethodStep.tableLabels.paymentMethod} \n {billingLocale.paymentMethods[product.paymentMethod] || ''} \n \n \n {changePaymentModalLocale.changeMethodStep.tableLabels.nextRenew} \n {formatDate(product.nextDueDate) || ''} \n \n \n {changePaymentModalLocale.changeMethodStep.tableLabels.renewValue} \n {formatCurrency(product.renewAmount) || ''} \n \n \n \n );\n })}\n \n \n \n \n )}\n {modalStep === MODAL_STEPS.SUCCESS_CHANGE_PRODUCTS_METHOD && (\n \n \n \n {changePaymentModalLocale.successChangeMethodStep.successChangeLabel}\n \n \n \n handleHideModal()}\n size=\"large\"\n width=\"fit\"\n />\n \n \n )}\n \n );\n};\n\nexport default ChangePaymentModal;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { Typography } from '@material-ui/core/Typography';\nimport { withStyles, Card } from '@material-ui/core';\nimport ReCaptcha from '@/components/ReCaptcha';\nimport PageTitle from '@/components/PageTitle';\nimport Loader from '@/components/Layout/Loader';\nimport { CreditCardPreview } from '@/components/CreditCard/CreditCardPreview';\nimport { ContentContainer } from '@/components/Cards/ContentContainer';\nimport { loadCreditCard, removeCreditCard } from '@/redux/actions/creditCard';\nimport { config } from '@/config';\nimport { notifierError, notifierSuccess } from '@/utils/Application/notifier';\nimport { loadReCaptcha } from '@/utils/Application/reCaptcha';\nimport { DELETE_CREDIT_CARD_ERROR, RECEIVE_GATORPAY_PAAS_SAVE_CREDITCARD } from '@/redux/actions/actionsTypes';\n\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport CreditCardPaas from '@/components/CreditCard/CreditCardPaas';\nimport styles from './styles';\nimport PageMessages from '../common/PageMessages';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { locale } from '@/utils/locale';\nimport { ChangePaymentModal } from './components/ChangePaymentModal';\nimport { FLOW_ORIGIN, MODAL_STEPS } from './components/ChangePaymentModal/ChangePaymentModal.types';\n\nconst CreditCardPage = ({ classes }) => {\n const [recaptchaToken, setRecaptchaToken] = useState('');\n const [successLoadCreditCard, setSuccessLoadCreditCard] = useState(false);\n const [displayChangePaymentModal, setDisplayChangePaymentModal] = useState(false);\n\n const dispatch = useDispatch();\n const creditCard = useSelector(state => state.creditCard);\n const billingState = useSelector(state => state.billing);\n\n const [modalStep, setModalStep] = useState(MODAL_STEPS.SUCCESS_CC_REGISTER);\n\n const itemsToChangePaymentMethod = billingState.subscriptions.itemsNotInCreditcard;\n\n useEffect(() => {\n loadReCaptcha();\n dispatch(loadCreditCard());\n }, [dispatch]);\n\n const verifyCallbackTokenreCaptcha = (token) => {\n !creditCard.loading && setRecaptchaToken(token);\n };\n\n const hideChangePaymentModal = () => {\n setDisplayChangePaymentModal(false);\n setSuccessLoadCreditCard(false);\n };\n\n const loaderCreditCard = (type) => {\n if (type === RECEIVE_GATORPAY_PAAS_SAVE_CREDITCARD) {\n setModalStep(MODAL_STEPS.SUCCESS_CC_REGISTER);\n dispatch(loadCreditCard());\n dispatch(enqueueSnackbar('snackbar.creditCard.create', notifierSuccess));\n !billingState.subscriptions.loadingItemsNotInCreditCard && setSuccessLoadCreditCard(true);\n return true;\n }\n\n dispatch(enqueueSnackbar('snackbar.creditCard.create_error', notifierError));\n };\n\n const handleRemoveCreditCard = () => {\n dispatch(removeCreditCard(recaptchaToken)).then((action) => {\n if (action.type === DELETE_CREDIT_CARD_ERROR) {\n dispatch(enqueueSnackbar('snackbar.creditCard.remove_error', notifierError));\n } else {\n dispatch(enqueueSnackbar('snackbar.creditCard.remove', notifierSuccess));\n }\n });\n };\n\n const getChangePaymentModalProps = () => {\n const defaultProps = {\n origin: FLOW_ORIGIN.CREDIT_CARD,\n hideModal: hideChangePaymentModal,\n productsList: itemsToChangePaymentMethod,\n loadingChangePaymentMethod: billingState.subscriptions.loadingUpdateItemsNotInCreditCard,\n statusChangePaymentMethod: billingState.subscriptions.updateItemsNotInCreditCardStatus,\n step: modalStep,\n };\n\n return {\n ...defaultProps,\n };\n };\n\n const enableChangePaymentModal = useCallback(() => {\n if (successLoadCreditCard && !!itemsToChangePaymentMethod.length) {\n setDisplayChangePaymentModal(true);\n }\n }, [itemsToChangePaymentMethod, successLoadCreditCard]);\n\n useEffect(() => {\n enableChangePaymentModal();\n }, [enableChangePaymentModal]);\n\n if (creditCard.loading) {\n return \n \n {creditCard.errors && (\n {locale('errorSavingCreditCard')} \n )}\n {creditCard.cardType ? (\n \n
\n {locale('savedCreditCard')}\n \n
\n
\n
\n {locale('createCreditCard')}\n \n \n \n\n {displayChangePaymentModal\n && {children} \n );\n};\n\nEmailsContextProvider.propTypes = {\n children: PropTypes.node,\n};\n\nEmailsContextProvider.defaultProps = {\n children: null,\n};\n\nexport default withI18n()(EmailsContextProvider);\n","const styles = theme => ({\n root: {\n [theme.breakpoints.up(960)]: {\n paddingTop: 0,\n paddingBottom: 0,\n },\n },\n\n title: {\n color: theme.color.thundora,\n fontSize: '16px',\n lineHeight: '19px',\n marginBottom: 24,\n\n [theme.breakpoints.down(600)]: {\n fontSize: '14px',\n padding: '0 24px',\n },\n },\n\n iframe: {\n border: 0,\n height: 'calc(100vh - 70px)',\n width: '100%',\n\n [theme.breakpoints.up(960)]: {\n height: '1200px',\n },\n },\n\n faqRemoveSpaces: {\n paddingLeft: '0px',\n },\n});\nexport default styles;\n","const styles = theme => ({\n card: {\n alignItems: 'center',\n borderRadius: '0',\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n justifyContent: 'flex-start',\n marginBottom: 6,\n minHeight: '60px',\n padding: 7,\n position: 'relative',\n\n '@media(max-width: 1260px)': {\n padding: 2,\n },\n },\n\n pageTitle: {\n fontSize: '24px',\n fontWeight: 300,\n margin: '0 20px 0 32px',\n },\n\n iframeDomain: {\n alignItems: 'center',\n color: theme.color.regentGray,\n display: 'flex',\n fontSize: '18px',\n fontWeight: 300,\n letterSpacing: '0.01px',\n lineHeight: '22px',\n\n [theme.breakpoints.down(449)]: {\n marginLeft: '32px',\n },\n },\n});\nexport default styles;\n","import React from 'react';\nimport { Card, Typography, withStyles } from '@material-ui/core';\nimport PropTypes from 'prop-types';\nimport { withI18n } from 'react-i18next';\nimport styles from './styles';\n\nconst TitanMailTitle = ({\n t, classes, domain, name,\n}) => (\n \n \n {name !== 'free'\n ? name\n : `${t('proEmail.type.free')}`}\n \n \n {`(${domain})`}\n \n \n);\n\n\nTitanMailTitle.propTypes = {\n domain: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n};\n\nexport default withI18n()(withStyles(styles)(TitanMailTitle));\n","const faqParams = [\n 'pro-account',\n 'import-account',\n 'pro-getall',\n 'pro-internal-mail',\n 'pro-check-dns',\n 'pro-desktop',\n 'pro-app',\n 'pro-upgrade',\n 'pro-buy-account',\n 'pro-home',\n];\n\nexport default faqParams;\n","import React, {\n useContext, useEffect, useState, useMemo, useCallback,\n} from 'react';\nimport { withStyles } from '@material-ui/core';\nimport { useHistory, useParams } from 'react-router';\nimport { find, propEq } from 'ramda';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { withI18n } from 'react-i18next';\nimport Loader from '@/components/Layout/Loader';\nimport { EmailsContext } from '@/contexts/Emails/context';\nimport { proEmailAuth } from '@/redux/actions/emails';\nimport { COUNTRY } from '@/config';\nimport FaqDefault from '@/components/FrequentlyQuestions/FaqDefault';\nimport { loadFaqEmails, loadFaqParam } from '@/redux/actions/faq';\nimport { TITAN_FAQ } from '@/config/urls/supportUrls';\nimport TitanMailTitle from './TitanMailTitle';\nimport styles from './styles';\nimport faqParams from './faqParams';\n\nconst TitanMail = ({ classes, t }) => {\n const dispatch = useDispatch();\n const { domain, section, action } = useParams();\n\n const faqQuestions = useSelector(state => state.faq);\n const [questions, setQuestions] = useState(null);\n const [faq, setFaq] = useState('');\n const history = useHistory();\n\n const { loadingProEmails, firstLoad, renderedEmailList } = useContext(EmailsContext);\n\n const loading = loadingProEmails || firstLoad;\n const planObject = useMemo(() => find(propEq('domain', domain), renderedEmailList), [domain, renderedEmailList]);\n const partnerId = process.env.REACT_APP_TITAN_PARTNER_ID;\n const titanUrl = process.env.REACT_APP_TITAN_URL;\n const [titanMailToken, setTitanMailToken] = useState(null);\n\n const postMessageListener = useCallback((event) => {\n if (event.data.event) {\n if (event.data.data.action === 'buyMoreAccounts') {\n history.push(`${t('routes.emailsList')}${t('routes.titanInboxUpgrade')}/${domain}`);\n }\n\n if (event.data.data.action === 'upgradePlan') {\n history.push(`${t('routes.emailsList')}${t('routes.titanUpgrade')}/${domain}`);\n }\n\n if (event.data.data.action === 'renewOrder') {\n history.push(`${t('routes.billing')}${t('routes.unpaid')}`);\n }\n\n setFaq(event.data.data.pageName);\n }\n }, [domain, t, history]);\n\n useEffect(() => {\n if (planObject && planObject.status !== 'active') {\n history.push(`${t('routes.emailsList')}`);\n }\n\n dispatch(loadFaqEmails());\n\n faqParams.forEach((param) => {\n dispatch(loadFaqParam(param));\n });\n\n window.addEventListener('message', event => postMessageListener(event));\n\n if (renderedEmailList.length > 0) {\n dispatch(proEmailAuth(planObject.pro_email_id)).then((response) => {\n if (response.data) {\n setTitanMailToken(response.data.token);\n }\n });\n }\n\n return () => { window.removeEventListener('message', event => postMessageListener(event)); };\n }, [renderedEmailList, dispatch, planObject, postMessageListener, t, history]);\n\n useEffect(() => {\n switch (faq) {\n case 'EMAIL_ACCOUNTS_LIST':\n if (faqQuestions['pro-account']) {\n setQuestions(faqQuestions['pro-account'].questions);\n }\n break;\n case 'IMPORT_EMAIL':\n if (faqQuestions['import-account']) {\n setQuestions(faqQuestions['import-account'].questions);\n }\n break;\n case 'CATCH_ALL_EMAIL':\n if (faqQuestions['pro-getall']) {\n setQuestions(faqQuestions['pro-getall'].questions);\n }\n break;\n case 'EMAIL_FORWARDER':\n if (faqQuestions['pro-internal-mail']) {\n setQuestions(faqQuestions['pro-internal-mail'].questions);\n }\n break;\n case 'DOMAIN_ACTIVATION':\n if (faqQuestions['pro-check-dns']) {\n setQuestions(faqQuestions['pro-check-dns'].questions);\n }\n break;\n case 'CONFIGURE_DESKTOP':\n if (faqQuestions['pro-desktop']) {\n setQuestions(faqQuestions['pro-desktop'].questions);\n }\n break;\n case 'DEVICE_DOWNLOAD':\n if (faqQuestions['pro-app']) {\n setQuestions(faqQuestions['pro-app'].questions);\n }\n break;\n case 'PRO_HOME':\n default:\n if (faqQuestions['pro-home']) {\n setQuestions(faqQuestions['pro-home'].questions);\n }\n }\n }, [faq, faqQuestions]);\n\n if (loading || planObject === undefined) {\n return \n \n \n \n);\n\nexport default withStyles(styles)(TitanMail);\n","const styles = theme => ({\n root: {\n [theme.breakpoints.up(960)]: {\n paddingTop: 0,\n },\n },\n});\nexport default styles;\n","const styles = theme => ({\n card: {\n alignItems: 'center',\n backgroundColor: theme.color.white,\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n display: 'flex',\n marginBottom: 6,\n minHeight: '60px',\n padding: '15px 24px',\n flexWrap: 'wrap',\n },\n\n plan: {\n color: theme.color.tundora,\n fontSize: '24px',\n fontWeight: 300,\n letterSpacing: '0.01px',\n lineHeight: '29px',\n marginRight: '6px',\n },\n\n title: {\n color: theme.color.tundora,\n fontSize: '24px',\n fontWeight: 300,\n letterSpacing: '0.01px',\n lineHeight: '29px',\n\n [theme.breakpoints.down('sm')]: {\n maxWidth: '270px',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n },\n\n redirectButton: {\n backgroundColor: 'transparent',\n border: 'none',\n color: theme.color.indigo,\n cursor: 'pointer',\n marginRight: '16px',\n padding: 0,\n },\n\n titleHasPlan: {\n fontSize: '18px',\n lineHeight: '22px',\n letterSpacing: '0.01px',\n color: theme.color.regentGray,\n fontWeight: 300,\n },\n});\nexport default styles;\n","import React, { useState } from 'react';\nimport { Typography, withStyles } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport withWidth from '@material-ui/core/withWidth';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport { Redirect } from 'react-router';\nimport { ArrowBack as ArrowBackIcon } from '@material-ui/icons/';\nimport styles from './styles';\n\nconst TitanUpgradeTitle = ({\n t, classes, plan, domain, origin,\n}) => {\n const [redirect, toggleRedirect] = useState(false);\n\n if (redirect && origin !== 'hirePlan') {\n return \n
toggleRedirect(true)} className={classes.redirectButton}>\n \n\n
\n {plan\n && {plan.name} \n }\n\n \n {plan ? `(${domain})` : domain}\n \n
\n
toggleDisplayInvoiceModal(false)}\n open={displayInvoiceModal}\n maxWidth=\"lg\"\n aria-labelledby=\"alert-dialog-title\"\n aria-describedby=\"alert-dialog-description\"\n data-testid=\"modalCollabPlay\"\n >\n toggleDisplayInvoiceModal(false)}\n data-testid=\"closeButton\"\n >\n \n {t('proEmail.upgradePlan.modalOldInvoice.title')}\n \n\n \n \n {t('proEmail.upgradePlan.modalOldInvoice.subtitle')}\n \n\n \n {t('proEmail.upgradePlan.modalOldInvoice.ongoingTitle')}\n\n {t('proEmail.upgradePlan.modalOldInvoice.pendingLabel')} \n\n \n {t('proEmail.upgradePlan.modalOldInvoice.viewOngoingInvoiceLabel')}\n \n \n\n \n {t('proEmail.upgradePlan.modalOldInvoice.ongoingSubtitle')}\n \n\n \n
\n {ongoingPlan} \n {`${ongoingMailBoxPrice} ${t(`proEmail.upgradePlan.${ongoingPaymentCycle.toLowerCase()}`)} ${t('proEmail.hirePlan.perMailBoxLabelOld')}`} \n
\n\n
\n {t('proEmail.upgradePlan.modalOldInvoice.mailBoxItem')} \n {ongoingInboxAmount} \n
\n\n {apllyableCredit > 0 && (\n
\n {t('proEmail.upgradePlan.modalOldInvoice.aplliedCredit')} \n \n {formatCurrency(apllyableCredit)}\n \n
\n )}\n\n
\n {t('proEmail.upgradePlan.modalOldInvoice.totalValue')} \n {`${ongoingTotalPrice} ${t(`proEmail.upgradePlan.${ongoingPaymentCycle.toLowerCase()}`)}`} \n
\n\n
\n
\n
\n\n \n toggleDisplayInvoiceModal(false)}\n data-testid=\"outlineButton\"\n >\n {t('proEmail.upgradePlan.modalOldInvoice.close')}\n \n\n handlePay()}\n data-testid=\"primaryButton\"\n >\n {loading ? \n \n );\n};\n\nModalValidateExistentInvoice.propTypes = {\n apllyableCredit: PropTypes.number.isRequired,\n displayInvoiceModal: PropTypes.bool.isRequired,\n handlePay: PropTypes.func.isRequired,\n loading: PropTypes.bool.isRequired,\n ongoingInboxAmount: PropTypes.number.isRequired,\n ongoingInvoiceId: PropTypes.number.isRequired,\n ongoingMailBoxPrice: PropTypes.string.isRequired,\n ongoingPaymentCycle: PropTypes.string.isRequired,\n ongoingPlan: PropTypes.string.isRequired,\n ongoingTotalPrice: PropTypes.string.isRequired,\n toggleDisplayInvoiceModal: PropTypes.func.isRequired,\n};\n\nexport default withI18n()(withWidth()(withStyles(styles, { withTheme: true })(ModalValidateExistentInvoice)));\n","const styles = theme => ({\n incrementWrapper: {\n border: `1px solid ${theme.color.geyser}`,\n borderRadius: '2px',\n display: 'flex',\n maxWidth: 226,\n },\n\n newIncrementWrapper: {\n border: `1px solid ${theme.palette.grey.main}`,\n borderRadius: '4px',\n display: 'flex',\n height: '42px',\n width: 221,\n },\n\n amountBlock: {\n width: 120,\n\n '& fieldset': {\n border: 0,\n height: '32px',\n padding: 0,\n top: 0,\n },\n\n '& input': {\n height: '32px',\n padding: 0,\n textAlign: 'center',\n },\n },\n\n newAmountBlock: {\n width: '100%',\n\n '& fieldset': {\n border: 0,\n height: '42px',\n padding: 0,\n top: 0,\n },\n\n '& input': {\n height: '42px',\n padding: 0,\n textAlign: 'center',\n },\n },\n\n fieldset: {\n padding: 0,\n },\n\n cssOutlinedInput: {\n alignItems: 'center',\n color: theme.color.tundora,\n display: 'flex',\n fontSize: '22px',\n fontWeight: '500',\n justifyContent: 'center',\n letterSpacing: '0.01px',\n lineHeight: '27px',\n },\n\n newInput: {\n alignItems: 'center',\n color: theme.palette.dark,\n display: 'flex',\n fontFamily: theme.font.family.secondary,\n fontSize: '16px',\n fontWeight: '700',\n justifyContent: 'center',\n height: '42px',\n letterSpacing: '0.01px',\n lineHeight: '24px',\n },\n\n incrementLabel: {\n color: theme.color.regentGray,\n fontSize: '12px',\n letterSpacing: '0.01px',\n lineHeight: '14px',\n marginBottom: '6px',\n },\n\n newIncrementLabel: {\n color: theme.color.regentGray,\n fontSize: '14px',\n fontFamily: theme.font.family.secondary,\n lineHeight: '18.2px',\n marginBottom: '8px',\n textAlign: 'left',\n },\n\n button: {\n backgroundColor: 'unset',\n borderRadius: '0px',\n\n '&:hover': {\n backgroundColor: 'unset',\n },\n\n '&:disabled': {\n backgroundColor: theme.color.porcelain,\n },\n },\n\n newButton: {\n minWidth: '40px',\n padding: '0px',\n },\n\n decrement: {\n borderRight: `1px solid ${theme.color.geyser}`,\n },\n\n increment: {\n borderLeft: `1px solid ${theme.color.geyser}`,\n },\n\n icon: {\n fill: theme.color.indigo,\n fontSize: '20px',\n },\n\n newIcon: {\n fill: theme.palette.dark,\n fontSize: '20px',\n },\n\n disabledIcon: {\n fill: theme.color.regentGray,\n fontSize: '20px',\n },\n\n separator: {\n borderBottom: `1px solid ${theme.color.geyser}`,\n height: '1px',\n marginBottom: '12px',\n width: '100%',\n },\n});\nexport default styles;\n","import {\n Button, TextField, Tooltip, Typography, withStyles,\n} from '@material-ui/core';\nimport React, { useRef } from 'react';\nimport { Add as IncrementIcon, Remove as SubtractIcon } from '@material-ui/icons/';\nimport classnames from 'classnames';\nimport { Trans, withI18n } from 'react-i18next';\nimport PropTypes from 'prop-types';\nimport IntegerMaskedInput from '@/components/Fields/InputMasks/IntegerMaskedInput';\nimport styles from './styles';\n\n\nconst IncrementAccounts = ({\n classes, label, min, max, amount, setAmount, showSeparator, domainObject = null, setTyping, isAUpgrade = true,\n}) => {\n const inputRef = useRef(null);\n\n\n const handleChange = ({ increment, value }) => {\n if (setTyping) {\n setTyping(true);\n }\n if (value && value !== '') {\n if (value > max || value < min) {\n setTyping(false);\n if (!isAUpgrade && value > max && inputRef) {\n setAmount(parseInt(max, 10));\n inputRef.current.blur();\n } else if (!isAUpgrade && value < min && inputRef) {\n setAmount(parseInt(min, 10));\n inputRef.current.blur();\n }\n } else {\n setAmount(parseInt(value, 10));\n }\n } else if (increment) {\n const newAmount = parseInt(amount, 10) + 1;\n setAmount(newAmount >= max ? max : newAmount);\n } else if (increment === false) {\n const newAmount = parseInt(amount, 10) - 1;\n setAmount(newAmount <= min ? min : newAmount);\n } else {\n setAmount(amount);\n }\n };\n\n const renderDecrementButton = () => (\n handleChange({ increment: false })}\n disabled={amount === min}\n data-testid=\"decrementButton\"\n >\n \n );\n\n return (\n <>\n {label} \n \n\n {(amount === min && (domainObject && isAUpgrade && domainObject.used_accounts > 1))\n ? (\n
\n <>0\n {min}\n <>2\n \n )}\n >\n \n {renderDecrementButton()}\n
\n \n )\n : renderDecrementButton()\n }\n\n handleChange({ value: e.target.value })}\n name=\"amount\"\n variant=\"outlined\"\n className={isAUpgrade ? classes.amountBlock : classes.newAmountBlock}\n InputLabelProps={{\n classes: {\n root: classes.cssLabel,\n focused: classes.cssFocused,\n },\n }}\n InputProps={{\n classes: {\n root: isAUpgrade ? classes.cssOutlinedInput : classes.newInput,\n notchedOutline: classes.fieldset,\n },\n 'data-testid': 'inputAmount',\n inputComponent: IntegerMaskedInput,\n }}\n />\n\n handleChange({ increment: true })}\n disabled={amount === max}\n data-testid=\"incrementButton\"\n >\n
\n }\n \n );\n};\n\nIncrementAccounts.propTypes = {\n label: PropTypes.string.isRequired,\n min: PropTypes.number.isRequired,\n max: PropTypes.number.isRequired,\n amount: PropTypes.number.isRequired,\n setAmount: PropTypes.func.isRequired,\n showSeparator: PropTypes.bool,\n};\n\nIncrementAccounts.defaultValues = {\n showSeparator: true,\n};\n\nexport default withI18n()(withStyles(styles)(IncrementAccounts));\n","const styles = theme => ({\n titleElement: {\n paddingBottom: 6,\n paddingTop: 0,\n padding: 0,\n margin: '0 0 0 42px',\n\n '& h6': {\n color: theme.color.thundora,\n fontSize: 24,\n fontWeight: 400,\n letterSpacing: '0.01px',\n lineHeight: '29px',\n },\n\n [theme.breakpoints.down(960)]: {\n marginLeft: 26,\n paddingBottom: 11,\n },\n },\n\n closeButton: {\n margin: '15px 17px 0px auto',\n maxHeight: 24,\n maxWidth: 24,\n },\n\n containerWrapper: {\n flex: 'unset',\n margin: '0 20px 0px 42px',\n overflowY: 'unset',\n padding: 0,\n\n [theme.breakpoints.down(960)]: {\n margin: '0 20px 24px 26px',\n },\n },\n\n containerWrapperCenter: {\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n marginTop: 12,\n\n [theme.breakpoints.down('sm')]: {\n alignItems: 'flex-start',\n marginTop: 0,\n },\n },\n\n modalDescriptionRow: {\n borderBottom: `1px solid ${theme.color.geyser}`,\n borderTop: `1px solid ${theme.color.geyser}`,\n display: 'flex',\n flexDirection: 'row',\n margin: '24px 0px',\n padding: '12px 0px',\n\n [theme.breakpoints.down('sm')]: {\n flexDirection: 'row',\n flexWrap: 'wrap',\n margin: 0,\n },\n },\n\n changeInboxDescription: {\n flexGrow: 1,\n },\n\n firstInboxBlock: {\n [theme.breakpoints.down('sm')]: {\n marginBottom: 24,\n width: '100%',\n },\n },\n\n description: {\n color: theme.color.tundora,\n fontSize: '14px',\n letterSpacing: '0.01px',\n lineHeight: '17px',\n },\n\n tableITitle: {\n color: theme.color.regentGrey,\n fontSize: '12px',\n letterSpacing: '0.01px',\n lineHeight: '14px',\n },\n\n tableItem: {\n color: theme.color.tundora,\n fontSize: '16px',\n fontWeight: '500',\n letterSpacing: '0.01px',\n lineHeight: '19px',\n },\n\n actionsWrapper: {\n [theme.breakpoints.down('sm')]: {\n justifyContent: 'center',\n margin: 0,\n },\n },\n});\n\nexport default styles;\n","import React, { useState } from 'react';\nimport { Trans, withI18n } from 'react-i18next';\nimport { Close } from '@material-ui/icons';\nimport {\n Dialog,\n DialogActions,\n DialogContent,\n DialogContentText,\n DialogTitle,\n IconButton,\n withStyles,\n} from '@material-ui/core/';\nimport withWidth, { isWidthDown } from '@material-ui/core/withWidth';\nimport classnames from 'classnames';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport IncrementAccounts from '@/components/Email/TitanUpgrade/TitanUpgradePlanItem/IncrementAccounts';\nimport getUsedAccounts from '@/components/Email/TitanUpgrade/TitanUpgradePlanItem/GetUsedAccoutns';\nimport OutlineButton from '@/components/Buttons/OutlineButton';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport styles from './styles';\n\nconst ModalChangeInboxAmount = ({\n t,\n classes,\n width,\n showModal,\n toggleShowModal,\n setNewAmount,\n\n plan,\n multiple,\n paymentCycle,\n domainObject,\n}) => {\n const isWidthDownSm = isWidthDown('sm', width);\n const [amount, setAmount] = useState(multiple);\n\n return (\n toggleShowModal(false)}\n maxWidth=\"sm\"\n aria-labelledby=\"alert-dialog-title\"\n aria-describedby=\"alert-dialog-description\"\n >\n toggleShowModal(false)}\n data-testid=\"closeButton\"\n >\n \n {t('proEmail.upgradePlan.modalTitle')}\n \n\n \n \n \n <>0\n 1 \n \n \n \n\n \n \n
\n \n\n \n \n
\n \n {t('proEmail.upgradePlan.modalPlanTitle')}\n \n \n {' '}\n {plan.name}\n \n
\n\n
\n \n {t('proEmail.upgradePlan.modalPerMailTitle')}\n \n \n {formatCurrency(plan.configoptions[0][paymentCycle].toLowerCase())}\n {' '}\n {t(`proEmail.upgradePlan.${paymentCycle.toLowerCase()}`)} \n \n
\n\n
\n \n {t('proEmail.upgradePlan.modalRecurrentTitle')}\n \n \n {formatCurrency(amount * plan.configoptions[0][paymentCycle].toLowerCase())}\n {' '}\n {t(`proEmail.upgradePlan.${paymentCycle.toLowerCase()}`)} \n \n
\n
\n\n\n \n {\n toggleShowModal(false);\n }}\n data-testid=\"cancel\"\n >\n {t('proEmail.upgradePlan.modalCancel')}\n \n\n {\n toggleShowModal(false);\n setNewAmount(amount);\n }}\n data-testid=\"save\"\n >\n {t('proEmail.upgradePlan.modalSave')}\n \n \n\n \n );\n};\n\nexport default withI18n()(withWidth()(withStyles(styles)(ModalChangeInboxAmount)));\n","const styles = theme => ({\n memorial: {\n border: `1px solid ${theme.color.indigo}`,\n display: 'flex',\n marginBottom: '24px',\n padding: '12px',\n },\n\n memorialText: {\n color: theme.color.tundora,\n fontSize: '12px',\n letterSpacing: '0.01px',\n lineHeight: '14px',\n },\n\n coinSvg: {\n alignSelf: 'center',\n fill: theme.color.indigo,\n marginRight: '12px',\n },\n});\n\nexport default styles;\n","import { Typography, withStyles } from '@material-ui/core';\nimport React, { useMemo } from 'react';\nimport { Trans, withI18n } from 'react-i18next';\nimport PropTypes from 'prop-types';\nimport { MonetizationOn as CoinIcon } from '@material-ui/icons';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport styles from './styles';\n\nconst MemorialMessage = ({\n t,\n classes,\n domainObject,\n summaryCalcs,\n dateDiff,\n multiple,\n plan,\n}) => {\n const mountedMessage = useMemo(() => {\n const monthly = domainObject.billingcycle.toLowerCase() === 'monthly';\n let message = '';\n let initialMultiple = 0;\n\n if (domainObject.plan === 'free') {\n initialMultiple = domainObject.used_accounts > 0 ? domainObject.used_accounts : 1;\n } else {\n initialMultiple = domainObject.total_accounts;\n }\n\n if (dateDiff === 0) {\n message = (\n \n <>0\n 1 \n <>2\n 3 \n <>4\n \n );\n return message;\n }\n\n if (dateDiff < 0) {\n message = (\n \n <>0\n 1 \n <>2\n 3 \n <>4\n \n );\n return message;\n }\n\n message = (\n \n <>0\n 1 \n <>2\n 3 \n \n );\n\n return message;\n }, [t, domainObject, summaryCalcs, dateDiff, plan.name, multiple]);\n\n\n return (\n \n \n {mountedMessage}\n \n
\n );\n};\n\nMemorialMessage.propTypes = {\n multiple: PropTypes.number.isRequired,\n plan: PropTypes.object,\n};\n\nMemorialMessage.defaultProps = {\n plan: null,\n};\n\nexport default withI18n()(withStyles(styles)(MemorialMessage));\n","const styles = theme => ({\n card: {\n border: `1px solid ${theme.color.geyser}`,\n borderRadius: '5px',\n boxShadow: '0px 1px 3px #00000029',\n display: 'flex',\n flexDirection: 'column',\n marginBottom: '12px',\n maxWidth: '829px',\n padding: '26px 24px 35px',\n },\n\n titleRow: {\n alignItems: 'flex-end',\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n justifyContent: 'space-between',\n },\n\n cardTitle: {\n color: theme.color.tundora,\n fontSize: '18px',\n fontWeight: '500',\n letterSpacing: '0.01px',\n lineHeight: '24px',\n },\n\n subTotal: {\n color: theme.color.oceanGreen,\n fontSize: '18px',\n fontWeight: '500',\n letterSpacing: '0.01px',\n lineHeight: '24px',\n\n '& small': {\n fontSize: '16px',\n fontWeight: 400,\n marginRight: '2px',\n },\n },\n\n paymentButton: {\n alignItems: 'center',\n display: 'flex',\n height: '37px',\n justifyContent: 'center',\n width: '200px',\n },\n\n descriptionItem: {\n fontSize: '12px',\n letterSpacing: '0.01px',\n lineHeight: '16px',\n margin: '0px 80px 24px 0px',\n\n [theme.breakpoints.down(758)]: {\n flexGrow: 1,\n flexShrink: 0,\n width: 'calc(50% - 48px)',\n },\n\n [theme.breakpoints.down(502)]: {\n width: '100%',\n },\n },\n\n firstDescriptionItem: {\n display: 'flex',\n margin: '0px 0px 24px 0px',\n\n [theme.breakpoints.down(768)]: {\n flexWrap: 'wrap',\n },\n },\n\n descriptionRow: {\n borderTop: `1px solid ${theme.color.geyser}`,\n marginTop: '26px',\n },\n\n planDescription: {\n display: 'flex',\n flexWrap: 'wrap',\n maxWidth: '590px',\n padding: '24px 0px 0px',\n '& > div:nth-child(4)': {\n margin: '0px 0px 24px 0px',\n },\n },\n\n centeredItem: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n },\n\n row: {\n display: 'flex',\n flexDirection: 'row',\n\n '& button': {\n alignItems: 'center',\n },\n },\n\n changeInboxButton: {\n alignItems: 'center',\n alignSelf: 'center',\n backgroundColor: 'transparent',\n border: `1px solid ${theme.color.indigo}`,\n borderRadius: '100%',\n cursor: 'pointer',\n display: 'flex',\n height: '18px',\n justifyContent: 'center',\n marginLeft: 6,\n width: '18px',\n },\n\n changeInboxIcon: {\n fill: `${theme.color.indigo}`,\n height: '9px',\n },\n\n descriptionItemTitle: {\n color: theme.color.regentGray,\n fontSize: '14px',\n letterSpacing: '0.01px',\n lineHeight: '19px',\n marginBottom: '4px',\n minWidth: '106px',\n },\n\n descriptionItemValue: {\n color: theme.palette.grey.dark,\n fontSize: '16px',\n letterSpacing: '0.01px',\n lineHeight: '32px',\n marginRight: '8px',\n },\n\n downgradeMessage: {\n backgroundColor: theme.palette.grey.opacityLight,\n border: `1px solid ${theme.palette.grey.primary}`,\n borderRadius: '5px',\n color: theme.palette.grey.dark,\n fontSize: '14px',\n letterSpacing: '0.01px',\n lineHeight: '21px',\n margin: '0px 0px 0px 24px',\n maxWidth: '461px',\n padding: '16px',\n '& > a ': {\n color: theme.palette.primary.main,\n fontWeight: '500',\n },\n\n [theme.breakpoints.down(768)]: {\n margin: '24px 0px 0px 0px',\n },\n },\n\n info: {\n fill: theme.color.indigo,\n height: '14px',\n marginLeft: '5px',\n width: '14px',\n },\n});\n\nexport default styles;\n","import { Tooltip, Typography, withStyles } from '@material-ui/core';\nimport React, { useState } from 'react';\nimport { Trans, withI18n } from 'react-i18next';\nimport PropTypes from 'prop-types';\nimport {\n Info as InfoIcon,\n} from '@material-ui/icons';\nimport { differenceInCalendarDays } from 'date-fns';\nimport classNames from 'classnames';\nimport { useHistory } from 'react-router';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { formatDate } from '@/utils/Formatters/formatDate';\nimport ModalChangeInboxAmount from '@/components/Modal/ModalChangeInboxAmount';\nimport { Button } from '@/pages/common';\nimport { TRIAL_PLAN } from '@/components/Email/TitanUpgrade/TitanUpgradePlanItem/TitanPlans';\nimport MemorialMessage from '../../MemorialMessage/MemorialMessage';\nimport styles from './styles';\n\nconst DescriptionItems = ({\n t,\n classes,\n multiple,\n paymentCycle,\n plan,\n newNextDueDate,\n summaryCalcs,\n showMonthlyCycle,\n domainObject,\n billingcycle,\n calledFrom,\n newAmount,\n setNewAmount,\n}) => {\n const today = new Date();\n const history = useHistory();\n const nextDueDate = new Date(`${domainObject.nextduedate} 00:00:00`);\n const dateDiff = differenceInCalendarDays(nextDueDate, today);\n\n const memorialEnabled = true;\n const [showModal, toggleShowModal] = useState(false);\n\n const handleRedirect = (url) => {\n history.push(url);\n };\n\n return (\n \n
\n {showModal\n && (\n
\n )\n }\n\n {calledFrom === 'cycleUpgrade' && (\n
\n )}\n\n
\n {t('proEmail.upgradePlan.valuePerMailBox')} \n \n {formatCurrency(plan.configoptions[0][paymentCycle].toLowerCase())}\n {' '}\n {t(`proEmail.upgradePlan.${paymentCycle.toLowerCase()}`)} \n \n
\n\n
\n {t('proEmail.upgradePlan.recurrentValue')} \n \n {formatCurrency(plan.configoptions[0][paymentCycle].toLowerCase() * multiple)}\n {' '}\n {t(`proEmail.upgradePlan.${paymentCycle.toLowerCase()}`)} \n \n <>0\n {{ planName: plan.name }}\n <>1\n \n )}\n >\n \n
\n\n {(showMonthlyCycle && billingcycle) && (\n
\n {t('proEmail.upgradePlan.upgradeMailBoxPaymentCycle')} \n {t(`proEmail.upgradePlan.${billingcycle}`)} \n
\n )}\n\n
\n {t('proEmail.upgradePlan.nextDueDate')} \n \n {formatDate(newNextDueDate)}\n \n <>0\n {{ planName: plan.name }}\n <>1\n \n )}\n >\n \n
\n\n {(memorialEnabled && summaryCalcs && domainObject.packageid !== TRIAL_PLAN) && (\n
\n )}\n
\n\n
\n \n \n
{t('modalToAlertUpgradeWhenInTrialPlan.title')} \n
\n\n
\n \n {t('modalToAlertUpgradeWhenInTrialPlan.buttons.cancel')}\n \n \n {t('modalToAlertUpgradeWhenInTrialPlan.buttons.confirm')}\n \n \n
\n \n ) : null);\n};\n\n\nModalToAlertUpgradeInTrial.propTypes = {\n t: propTypes.func.isRequired,\n isOpen: propTypes.bool,\n onClose: propTypes.func.isRequired,\n handleConfirm: propTypes.func.isRequired,\n getTotalDaysToEndTrial: propTypes.func.isRequired,\n isLoading: propTypes.bool,\n};\n\nModalToAlertUpgradeInTrial.defaultProps = {\n isOpen: false,\n isLoading: false,\n};\n\n\nexport default withI18n()(ModalToAlertUpgradeInTrial);\n","import { Tooltip, Typography, withStyles } from '@material-ui/core';\nimport React, {\n useEffect, useState, useMemo, useCallback,\n} from 'react';\nimport { Trans, withI18n } from 'react-i18next';\nimport classnames from 'classnames';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Info as InfoIcon } from '@material-ui/icons';\nimport { find, propEq } from 'ramda';\nimport { addDays, differenceInCalendarDays, parseISO } from 'date-fns';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { formatDate } from '@/utils/Formatters/formatDate';\nimport { changePlan, getUnpaidUpgradeInvoice, upgradeMailGetInvoice } from '@/redux/actions/emails';\nimport { ERROR_UPGRADE_MAIL_INVOICE, RECEIVE_EXISTENT_INVOICE_VALIDATION } from '@/redux/actions/actionsTypes';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport { notifierError, notifierSuccess } from '@/utils/Application/notifier';\nimport Loader from '@/components/Layout/Loader';\nimport { loadInvoices } from '@/redux/actions/invoices';\nimport ModalValidateExistentInvoice from '@/components/Modal/ModalValidateExistentInvoice/ModalValidateExistentInvoice';\nimport { ESSENTIALS_PLAN, TRIAL_PLAN, getTitanNameById } from '@/components/Email/TitanUpgrade/TitanUpgradePlanItem/TitanPlans';\nimport DescriptionItems from './DescriptionItems';\nimport styles from './styles';\nimport { upgradeTitanAnalytics } from '@/analytics';\nimport { ModalToAlertUpgradeInTrial } from './ModalToAlertUpgradeInTrial';\n\nconst Invoice = ({\n classes,\n t,\n plan,\n domainObject,\n paymentCycle,\n paymentMethod,\n amount,\n summaryCalcs,\n loadingUpgradeSummary,\n typing,\n queryError,\n showMonthlyCycle,\n calledFrom,\n newAmount,\n setNewAmount,\n upgradeButtonDisable,\n setAccountNumberChanged,\n disabledPayment,\n}) => {\n const dispatch = useDispatch();\n let multipliedAccounts = 0;\n const upgradeTitanPlanEvents = calledFrom === 'cycleUpgrade';\n const [displayInvoiceModal, toggleDisplayInvoiceModal] = useState(false);\n const [ongoingInvoice, setOngoingInvoice] = useState(null);\n const [loading, setLoadingRedirect] = useState(false);\n const invoices = useSelector(state => state.invoices);\n const loadingValidateUpgradeInvoice = useSelector(state => state.emails.loadingValidateUpgradeInvoice);\n const [lastResponse, setLastResponse] = useState(null);\n const cycleUpgradeChangeValidation = ((plan.isFree || domainObject.packageid === plan.id) && calledFrom === 'cycleUpgrade') && plan.id !== TRIAL_PLAN;\n const inboxUpgradeChangeValidation = (amount && (amount === domainObject.total_accounts || queryError) && calledFrom === 'inboxUpgrade') && plan.id !== TRIAL_PLAN;\n const shouldDisplayMessage = inboxUpgradeChangeValidation || cycleUpgradeChangeValidation;\n let selectMessage = null;\n const shouldRedirectWithoutPayedInvoice = true;\n const [initMultiple, setInitMultiple] = useState(null);\n\n const [shouldShowModalInUpgradePlan, setShouldShowModalInUpgradePlan] = useState(false);\n\n const handleUserEnterUpgradePage = useCallback(() => {\n upgradeTitanAnalytics.enterTitanUpgradePage();\n }, []);\n\n useEffect(() => {\n if (upgradeTitanPlanEvents) {\n handleUserEnterUpgradePage();\n }\n }, [upgradeTitanPlanEvents, handleUserEnterUpgradePage]);\n\n\n if (calledFrom === 'inboxUpgrade') {\n selectMessage = t('proEmail.upgradePlan.selectOther');\n } else if (plan.isFree) {\n selectMessage = t('proEmail.upgradePlan.selectOtherCycleFromFree');\n } else {\n selectMessage = t(disabledPayment ? 'proEmail.upgradePlan.newSelectOtherCycle' : 'proEmail.upgradePlan.selectOtherCycle');\n }\n\n if (domainObject.plan === 'free' || domainObject.packageid === TRIAL_PLAN) {\n multipliedAccounts = domainObject.used_accounts > 0 ? domainObject.used_accounts : 1;\n } else {\n multipliedAccounts = domainObject.total_accounts;\n }\n\n let multiple = amount || multipliedAccounts;\n\n useEffect(() => {\n if (initMultiple == null) {\n setInitMultiple(multiple);\n }\n }, [setInitMultiple, initMultiple, multiple]);\n\n if (newAmount) {\n multiple = newAmount;\n }\n\n const upateAccountNumber = (numberAccounts) => {\n setNewAmount(numberAccounts);\n setAccountNumberChanged(numberAccounts !== initMultiple);\n };\n\n const pricePart = formatCurrency(\n summaryCalcs\n ? summaryCalcs.total\n : (plan.configoptions[0][paymentCycle].toLowerCase() * multiple),\n ).split(' ');\n\n useEffect(() => {\n if (lastResponse && invoices && (invoices.byStatus.Paid.length > 0 || shouldRedirectWithoutPayedInvoice)) {\n const isPaid = find(propEq('id', lastResponse.data.invoice_id), invoices.byStatus.Paid);\n const paymentPart = paymentMethod ? `/${paymentMethod}` : '';\n\n const newLocation = (lastResponse.data.upgraded || isPaid)\n ? `${t('routes.emailsList')}${t('routes.emailsTitan')}/${domainObject.domain}`\n : `${t('routes.billing')}${t('routes.unpaid')}/${lastResponse.data.invoice_id}${paymentPart}`;\n\n if (isPaid) {\n dispatch(enqueueSnackbar(t('proEmail.upgradePlan.successWithCredits'), notifierSuccess));\n } else if (lastResponse.data.upgraded) {\n dispatch(enqueueSnackbar(t('proEmail.upgradePlan.success'), notifierSuccess));\n }\n\n setTimeout(() => {\n window.location.href = newLocation;\n }, 3000);\n }\n }, [invoices, lastResponse, t, domainObject, paymentMethod, dispatch, shouldRedirectWithoutPayedInvoice]);\n\n const handlePay = () => {\n const newPlan = { ...plan };\n\n if ((plan.id === domainObject.packageid) && (domainObject.packageid === TRIAL_PLAN)) {\n newPlan.id = ESSENTIALS_PLAN;\n }\n\n setLoadingRedirect(true);\n\n const dispatchedAction = calledFrom === 'inboxUpgrade'\n ? upgradeMailGetInvoice({\n inboxAmount: amount,\n hostingId: domainObject.hosting_id,\n planId: newPlan.id,\n paymentCycle,\n paymentMethod,\n offerContext: ['titan_iframe_account_upgrade'],\n })\n : changePlan({\n planId: newPlan.id,\n domain: domainObject.domain,\n cycle: paymentCycle,\n paymentMethod,\n inboxAmount: multiple,\n hostingId: domainObject.hosting_id,\n isFree: domainObject.plan === 'free',\n offerContext: ['titan_iframe_plan_upgrade'],\n });\n\n dispatch(dispatchedAction).then((response) => {\n if (response.type === ERROR_UPGRADE_MAIL_INVOICE) {\n dispatch(enqueueSnackbar(t('proEmail.upgradePlan.error'), notifierError));\n setLoadingRedirect(false);\n } else {\n const noCache = true;\n calledFrom === 'inboxUpgrade' ? setLastResponse({ data: response.data.data }) : setLastResponse({ data: response.data.response.data });\n dispatch(loadInvoices('Paid', noCache));\n if (upgradeTitanPlanEvents) {\n upgradeTitanAnalytics.confirmUpgrade(getTitanNameById[newPlan.id]);\n }\n }\n });\n };\n\n useEffect(() => {\n if (ongoingInvoice) {\n toggleDisplayInvoiceModal(true);\n }\n }, [ongoingInvoice]);\n\n const ValidateExistentInvoice = (hostingId) => {\n dispatch(getUnpaidUpgradeInvoice({\n domain: domainObject.domain,\n hostingId,\n isFree: domainObject.plan === 'free',\n })).then((response) => {\n if (response.type === RECEIVE_EXISTENT_INVOICE_VALIDATION) {\n if (response.data.data.already_exists) {\n setOngoingInvoice(response.data.data.invoice);\n } else {\n handlePay();\n }\n } else {\n dispatch(enqueueSnackbar(t('proEmail.upgradePlan.error'), notifierError));\n }\n });\n };\n\n const getTotalDayOfMonthly = () => {\n const currentDate = new Date();\n const totalOfDaysInCurrentMonth = new Date(\n currentDate.getFullYear(),\n currentDate.getMonth(),\n 0,\n ).getDate();\n\n if (totalOfDaysInCurrentMonth === 31) {\n return 30;\n }\n\n return 31;\n };\n\n const newNextDueDate = useMemo(() => {\n if (summaryCalcs && summaryCalcs.item && summaryCalcs.item.nextduedate) {\n return summaryCalcs.item.nextduedate;\n }\n\n\n const paymentCycleIntervals = {\n monthly: getTotalDayOfMonthly(),\n annually: 365,\n };\n\n return addDays(new Date(), paymentCycleIntervals[paymentCycle]);\n }, [summaryCalcs, paymentCycle]);\n\n const selectOtherMessage = () => (\n <>\n {t('proEmail.upgradePlan.invoicesTitle')} \n \n {selectMessage}\n \n \n );\n\n const getTotalDaysToEndTrial = useCallback(() => {\n const currentDate = new Date();\n const registerDate = new Date(parseISO(domainObject.regdate));\n const nextDueDateByRegisterDate = addDays(registerDate, getTotalDayOfMonthly());\n\n return differenceInCalendarDays(nextDueDateByRegisterDate, currentDate);\n }, [domainObject.regdate]);\n\n const handleUpgradePayment = () => {\n ValidateExistentInvoice(domainObject.hosting_id);\n };\n\n const isActiveProEmail = () => (\n domainObject.status.toLowerCase() === 'active' && domainObject.packageid === TRIAL_PLAN\n );\n\n const paymentHandler = () => {\n if (isActiveProEmail()) {\n setShouldShowModalInUpgradePlan(true);\n return;\n }\n handleUpgradePayment();\n };\n\n const invoiceTableData = () => (\n <>\n \n
\n {t('proEmail.upgradePlan.invoiceCardTitle')} \n\n \n {pricePart[0]} \n {pricePart[1]}\n \n
\n
\n {t('proEmail.upgradePlan.changePlan')}\n \n \n {t('proEmail.upgradePlan.description')} \n\n \n {t('proEmail.upgradePlan.value')}\n \n
\n\n \n
\n \n \n 0\n \n \n 1\n \n \n\n
\n
\n \n {formatCurrency(plan.configoptions[0][paymentCycle].toLowerCase() * multiple)}\n \n
\n\n {summaryCalcs && (\n <>\n {!!summaryCalcs.vat_value && (\n <>\n
\n
\n {t('proEmail.upgradePlan.taxes')}
\n \n
\n VAT: 21% ARG
\n \n
\n
\n {formatCurrency(summaryCalcs.vat_value)} \n
\n \n )}\n\n
\n {t('proEmail.upgradePlan.apllyableCredit')} \n
\n
\n {formatCurrency(summaryCalcs.deduction)} \n
\n \n )}\n\n
\n {t('proEmail.upgradePlan.toPay')} \n
\n
\n \n {summaryCalcs\n ? formatCurrency(summaryCalcs.total)\n : formatCurrency(plan.configoptions[0][paymentCycle].toLowerCase() * multiple)\n }\n \n
\n\n {(summaryCalcs && summaryCalcs.remaining_credits) > 0 && (\n <>\n
\n \n {t('proEmail.upgradePlan.remnantCredit')}\n\n \n \n \n
\n
\n {formatCurrency(summaryCalcs.remaining_credits)} \n
\n \n )}\n
\n
\n );\n }\n\n return (\n \n\n setShouldShowModalInUpgradePlan(false)}\n handleConfirm={handleUpgradePayment}\n getTotalDaysToEndTrial={getTotalDaysToEndTrial}\n isLoading={loadingValidateUpgradeInvoice || loading}\n />\n\n {ongoingInvoice && (\n \n setPaymentCycle(e.target.value)}\n selectTestId=\"selectButton\"\n selectInputTestId=\"selectField\"\n />\n \n);\n\nexport default PaymentCycle;\n","const styles = theme => ({\n card: {\n border: `1px solid ${theme.color.geyser}`,\n borderRadius: '5px',\n boxShadow: '0px 1px 3px #00000029',\n display: 'flex',\n flexDirection: 'column',\n marginBottom: '12px',\n maxWidth: '408px',\n overflow: 'hidden',\n padding: '16px 24px',\n width: '100%',\n\n [theme.breakpoints.down(758)]: {\n marginRight: 'unset',\n maxWidth: 'unset',\n width: '100%',\n },\n },\n});\n\nexport default styles;\n","import styled, { css } from 'styled-components';\n\nexport const PaymentCycleWrapper = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n margin: 5px 0px 40px 0px;\n max-width: 50%;\n overflow: hidden;\n padding: 0px;\n width: 100%;\n\n > div > div {\n padding: 9px 16px 10px;\n }\n\n @media (max-width: 758px){\n margin: 0px 0px 32px 0px;\n max-width: unset;\n width: 100%;\n }\n `}\n`;\n","import { withStyles } from '@material-ui/core';\nimport React from 'react';\nimport { withI18n } from 'react-i18next';\nimport { calcLabelWidth } from '@/utils/Formatters/calcWidthLabel';\nimport SelectField from '@/components/Fields/SelectField';\nimport { locale } from '@/utils/locale';\nimport styles from './styles';\nimport * as Styles from './PaymentMethod.styles';\n\n\nconst PaymentMethod = ({\n paymentMethod, setPaymentMethod, methodOptions, disabled,\n}) => (\n \n setPaymentMethod(e.target.value)}\n selectTestId=\"selectButton\"\n selectInputTestId=\"selectField\"\n />\n \n);\n\nexport default withI18n()(withStyles(styles)(PaymentMethod));\n","const styles = theme => ({\n MailBoxesWrapper: {\n border: `1px solid ${theme.color.geyser}`,\n borderRadius: '5px',\n boxShadow: '0px 3px 6px #00000029',\n marginBottom: 12,\n maxWidth: '829px',\n padding: 24,\n },\n\n WrapperTitle: {\n color: theme.color.tundora,\n fontSize: '18px',\n fontWeight: 500,\n letterSpacing: '0.01px',\n lineHeight: '22px',\n marginBottom: '12px',\n },\n});\nexport default styles;\n","import { Typography, withStyles } from '@material-ui/core';\nimport React from 'react';\nimport { withI18n } from 'react-i18next';\nimport PropTypes from 'prop-types';\nimport IncrementAccounts from '@/components/Email/TitanUpgrade/TitanUpgradePlanItem/IncrementAccounts';\nimport getUsedAccounts from '@/components/Email/TitanUpgrade/TitanUpgradePlanItem/GetUsedAccoutns';\nimport styles from './styles';\n\nconst MailBoxesBlock = ({\n t,\n classes,\n domainObject,\n amount,\n setAmount,\n plan,\n setTyping,\n}) => (\n \n {t('proEmail.upgradePlan.upgradeMailBoxSelectMailBoxAmount')} \n\n
\n);\n\nMailBoxesBlock.propTypes = {\n domainObject: PropTypes.object.isRequired,\n amount: PropTypes.number.isRequired,\n setAmount: PropTypes.func.isRequired,\n plan: PropTypes.object.isRequired,\n};\n\nexport default withI18n()(withStyles(styles)(MailBoxesBlock));\n","const styles = theme => ({\n planContainer: {\n backgroundColor: theme.color.white,\n padding: 24,\n },\n\n containerTitle: {\n color: theme.color.tundora,\n fontSize: '24px',\n letterSpacing: '0.01px',\n lineHeight: '29px',\n marginBottom: '6px',\n maxWidth: '829px',\n },\n\n description: {\n color: theme.color.tundora,\n fontSize: '14px',\n letterSpacing: '0.01px',\n lineHeight: '17px',\n marginBottom: 12,\n maxWidth: '829px',\n },\n\n row: {\n display: 'flex',\n flexDirection: 'row',\n\n [theme.breakpoints.down(758)]: {\n flexWrap: 'wrap',\n },\n },\n\n managementLinkButton: {\n backgroundColor: theme.color.indigo,\n border: `1px solid ${theme.color.chambray}`,\n borderRadius: '2px',\n color: theme.color.white,\n fontSize: '14px',\n fontWeight: '500',\n letterSpaceing: '0.01px',\n lineHeight: '17px',\n padding: '10px 20px',\n textDecoration: 'none',\n transition: '300ms',\n\n '&:hover': {\n backgroundColor: theme.color.chambray,\n },\n },\n\n changePlanLink: {\n color: theme.color.indigo,\n display: 'block',\n fontSize: '14px',\n letterSpacing: '0.01px',\n lineHeight: '17px',\n marginTop: '24px',\n textDecoration: 'underline',\n\n [theme.breakpoints.down(361)]: {\n marginLeft: 'auto',\n marginRight: 'auto',\n maxWidth: '225px',\n textAlign: 'center',\n },\n },\n});\nexport default styles;\n","import { Typography, withStyles } from '@material-ui/core';\nimport React, { useEffect, useState } from 'react';\nimport { withI18n } from 'react-i18next';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { addDays } from 'date-fns';\nimport { find, propEq } from 'ramda';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useParams } from 'react-router';\nimport TitanUpgradeTitle from '@/components/Email/TitanUpgrade/TitanUpgradeTitle';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport getUsedAccounts from '@/components/Email/TitanUpgrade/TitanUpgradePlanItem/GetUsedAccoutns';\nimport { getUpgradeSummary } from '@/redux/actions/emails';\nimport { ERROR_GET_UPGRADE_SUMMARY } from '@/redux/actions/actionsTypes';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport { notifierError } from '@/utils/Application/notifier';\nimport InvoiceTable from '@/components/Email/InvoiceTable';\nimport PaymentCycle from '@/components/Email/TitanUpgradePlanCycle/TitanUpgradePlanCycleContainer/PaymentCycle';\nimport PaymentMethod from '@/components/Email/TitanUpgradePlanCycle/TitanUpgradePlanCycleContainer/PaymentMethod';\nimport { COUNTRY } from '@/config';\nimport MailBoxesBlock from './MailBoxesBlock';\nimport styles from './styles';\nimport { ESSENTIALS_PLAN, PREMIUM_PLAN } from '@/components/Email/TitanUpgrade/TitanUpgradePlanItem/TitanPlans';\n\nlet typingDelay = null;\nconst UpgradeEnabled = ({\n t, classes, domainObject, plans,\n}) => {\n const dispatch = useDispatch();\n const [amount, setAmount] = useState(getUsedAccounts(domainObject.total_accounts));\n const plan = find(propEq('name', domainObject.plan), plans);\n const newNextDueDate = addDays(new Date(), domainObject.billingcycle === 'Monthly' ? 31 : 365);\n const [summaryCalcs, setSummaryCalcs] = useState('0.00');\n const loadingUpgradeSummary = useSelector(state => state.emails.loadingUpgradeSummary);\n const [queryError, setQueryError] = useState(false);\n const [typing, setTyping] = useState(false);\n const { domain } = useParams();\n\n const validPaymentCycle = domainObject.billingcycle.toLowerCase() === 'monthly' || domainObject.billingcycle.toLowerCase() === 'quarterly' || domainObject.billingcycle.toLowerCase() === 'semiannually' || domainObject.billingcycle.toLowerCase() === 'annually';\n const [paymentCycle, setPaymentCycle] = useState(validPaymentCycle ? domainObject.billingcycle.toLowerCase() : 'monthly');\n const [paymentMethod, setPaymentMethod] = useState(COUNTRY === 'br' ? 'braspag_credit_1x' : 'dlocal');\n\n const [disabledPayment, setDisabledPayment] = useState(false);\n\n useEffect(() => {\n clearTimeout(typingDelay);\n\n setDisabledPayment((plan.id === ESSENTIALS_PLAN || plan.id === PREMIUM_PLAN) && amount === getUsedAccounts(domainObject.total_accounts));\n\n const dispatchUpgrade = () => {\n dispatch(getUpgradeSummary({\n inboxAmount: amount, hostingId: domainObject.hosting_id, planId: plan.id, paymentCycle,\n })).then((response) => {\n if (response.type === ERROR_GET_UPGRADE_SUMMARY) {\n dispatch(enqueueSnackbar('proEmail.upgradePlan.error', notifierError));\n setQueryError(true);\n } else {\n setQueryError(false);\n setSummaryCalcs(response.data.data);\n }\n setTyping(false);\n });\n };\n\n if (amount !== domainObject.total_accounts) {\n typingDelay = setTimeout(() => {\n dispatchUpgrade();\n }, 300);\n }\n\n if (amount === domainObject.total_accounts) {\n setTyping(false);\n }\n }, [amount, dispatch, domainObject, t, plan, paymentCycle]);\n\n const cycleOptions = [\n { name: t('proEmail.upgradePlan.Monthly'), value: 'monthly' },\n { name: t('proEmail.upgradePlan.Quarterly'), value: 'quarterly' },\n { name: t('proEmail.upgradePlan.Semiannually'), value: 'semiannually' },\n { name: t('proEmail.upgradePlan.Annually'), value: 'annually' },\n { name: t('proEmail.upgradePlan.Biennially'), value: 'biennially' },\n ];\n\n const methodOptions = [\n { name: t('proEmail.upgradePlan.creditCard'), value: COUNTRY === 'br' ? 'braspag_credit_1x' : 'dlocal', span: 'Acesso imediato ao plano' },\n { name: t('proEmail.upgradePlan.gp_boleto'), value: COUNTRY === 'br' ? 'boleto' : 'payu_boleto' },\n { name: t('proEmail.upgradePlan.gp_paypal'), value: 'paypal' },\n ];\n\n return (\n <>\n \n
\n {t('proEmail.upgradePlan.upgradeMailBoxTitle')}\n \n\n
\n {t('proEmail.upgradePlan.upgradeMailBoxDescription')}\n \n\n
\n\n
\n\n
\n\n {plan.id !== 424 && plan.id !== 243 && (\n
\n {t('proEmail.upgradePlan.changeCycleOrPlanLink')}\n \n )}\n\n \n \n );\n};\n\nexport default withI18n()(withStyles(styles)(TitanUpgrade));\n","import React from 'react';\nimport { withStyles } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport { useParams } from 'react-router';\nimport EmailsContextProvider from '@/contexts/Emails/context';\nimport styles from './styles';\nimport TitanUpgradeWrapper from './TitanUpgradeWrapper';\n\nconst TitanUpgrade = () => {\n const { domain } = useParams();\n\n return (\n \n \n );\n};\n\nexport default withI18n()(withStyles(styles)(TitanUpgrade));\n","const styles = theme => ({\n root: {\n [theme.breakpoints.up(960)]: {\n paddingTop: 0,\n },\n },\n});\nexport default styles;\n","import styled, { css } from 'styled-components';\nimport IconCheck from '@/media/icons/check.svg';\n\nexport const Card = styled.div`\n ${() => css`\n margin-bottom: 40px;\n\n .slick-list {\n display: flex;\n .slick-track { \n > div {\n height: calc(100% - 30px);\n > div {\n height: 100%;\n }\n }\n\n > div { \n display: flex;\n margin: 0px 12px;\n }\n\n @media (min-width: 769px){\n margin: 0px auto;\n }\n }\n\n .slick-slide {\n display: flex;\n justify-content: center;\n }\n }\n `}\n`;\n\nexport const CardTitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: 22px;\n font-weight: 400;\n letter-spacing: 0.01px;\n line-height: 29px;\n margin: 0px 0px 7px 0px;\n `}\n`;\n\nexport const CardDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: 16px;\n letter-spacing: 0.01px;\n line-height: 21px;\n margin: 0px 0px 32px 0px;\n `}\n`;\n\nexport const Row = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n width: 100%;\n`;\n\nexport const PlanOption = styled.button`\n ${({ theme, active, status }) => {\n const plan = {\n free: {\n backgroundColor: theme.palette.white.polar,\n active: {\n border: `2px solid ${theme.palette.primary.main}`,\n },\n inactive: {\n border: '1px solid transparent',\n },\n },\n paid: {\n backgroundColor: theme.palette.white.light,\n active: {\n border: `2px solid ${theme.palette.primary.main}`,\n },\n inactive: {\n border: `1px solid ${theme.palette.grey.primary}`,\n },\n },\n };\n\n return css`\n background-color: ${plan[status].backgroundColor};\n border-radius: 5px;\n border: ${plan[status][active].border};\n cursor: pointer;\n display: flex !important;\n flex-direction: column;\n flex-grow: 1;\n height: 100%;\n margin-right: 24px;\n min-height: 624px;\n padding: 18px;\n position: relative;\n transition: 300ms border-color ease-in-out;\n\n &:last-child {\n margin-right: 0px;\n }\n\n @media (max-width: 758px) {\n margin-bottom: 35px;\n margin-right: unset;\n max-width: unset;\n width: 100% !important;\n }\n `;\n }}\n`;\n\nexport const TagWrapper = styled.div`\n display: flex; \n min-height: 23px;\n position: relative;\n width: 100%;\n`;\n\nexport const RadioWrapper = styled.div`\n position: absolute;\n`;\n\nexport const Tag = styled.span`\n ${({\n theme, type, centered,\n }) => {\n const tagStyle = {\n selected: {\n backgroundColor: theme.palette.primary.main,\n margin: '0px 0px 0px 38px',\n },\n trial: {\n backgroundColor: theme.palette.success.primary,\n margin: '0px 0px 0px 18px',\n },\n };\n\n return css`\n align-items: center;\n background-color: ${tagStyle[type].backgroundColor};\n border-radius: 5px;\n color: ${theme.palette.white.light};\n display: flex;\n font-size: 14px;\n font-weight: 500;\n justify-content: center;\n letter-spacing: 0.01px;\n line-height: 19px;\n margin: ${centered ? '0px auto' : tagStyle[type].margin};\n padding: 2px 8px;\n `;\n }}\n`;\n\nexport const TrialTag = styled.div`\n display: flex; \n`;\n\nexport const PlanName = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: 18px;\n letter-spacing: 0.01px;\n line-height: 24px;\n margin: 16px auto 8px auto; \n width: 100%;\n `}\n`;\n\nexport const StorageValue = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: 24px;\n font-weight: 500;\n letter-spacing: 0.01px;\n line-height: 32px;\n margin: 0px auto;\n text-align: center;\n `}\n`;\n\nexport const StorageLabel = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: 14px;\n letter-spacing: 0.01px;\n line-height: 19px;\n margin: 0px auto 8px;\n text-align: center;\n `}\n`;\n\nexport const PaymentPrice = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: 14px;\n letter-spacing: 0.01px;\n line-height: 19px;\n margin: 0px 0px 24px 0px;\n text-align: center;\n width: 100%;\n\n & small {\n fontSize: 10px;\n }\n `}\n`;\n\nexport const Separator = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.palette.grey.primary};\n height: 1px;\n margin: 0 auto 24px;\n max-width: 282px;\n padding: 0 6px;\n width: 100%;\n `}\n`;\n\nexport const BennefitsWrapper = styled.div`\n ${({ theme }) => css`\n & ul {\n list-style-type: none;\n margin: unset;\n padding: 0px 6px;\n text-align: left;\n\n & li {\n color: ${theme.palette.grey.dark};\n display: flex;\n font-size: 14px;\n letter-spacing: 0.01px;\n line-height: 21px;\n margin-bottom: 16px;\n position: relative;\n \n & > strong, & > b {\n display: contents;\n }\n\n & span {\n align-items: center;\n background: ${theme.palette.primary.main};\n border-radius: 50%;\n color: ${theme.palette.white.light};\n display: flex;\n font-size: 10px;\n height: 12px;\n justify-content: center;\n margin-left: 8px;\n max-width: 12px;\n position: relative;\n top: 4px;\n width: 100%;\n }\n\n &:before {\n background-image: url('${IconCheck}');\n background-repeat: no-repeat;\n content: \"\";\n display: block;\n height: 16px;\n margin-right: 8px;\n min-width: 16px;\n position: relative;\n top: 2px;\n }\n }\n\n & li:last-child {\n margin-bottom: 0px,\n }\n }\n `}\n`;\n\nexport const SlickAdapter = styled.div`\n flex: 1;\n max-width: 90%;\n overflow: hidden;\n padding: 0;\n position: relative;\n &:before {\n border-radius: 2px;\n bottom: 14px;\n content: '';\n display: block;\n height: 4px;\n left: 38px;\n position: absolute;\n right: 38px;\n }\n .slick-list {\n max-width: 31%;\n overflow: initial;\n }\n .slick-slide {\n padding: 0 15px;\n }\n .slick-prev, .slick-next {\n bottom: 0;\n height: 32px;\n top: auto;\n transform: none;\n width: 32px;\n z-index: 2;\n &.slick-disabled {\n cursor: default;\n &::before {\n opacity: 0.4;\n }\n }\n &::before {\n background-position: center;\n background-repeat: no-repeat;\n color: transparent;\n font-size: 32px;\n opacity: 1;\n }\n }\n @media (max-width: ${({ theme }) => theme.breakpoint.lg}px) {\n max-width: 100%;\n }\n @media (max-width: ${({ theme }) => theme.breakpoint.md}px) {\n .slick-list {\n max-width: 49%;\n }\n }\n`;\n\nexport const IncludedLabel = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: 14px;\n font-weight: 700;\n letter-spacing: 0.01px;\n line-height: 19px;\n margin: 0px 0px 16px 0px;\n text-align: left;\n `}\n`;\n","import React, { useContext } from 'react';\nimport DOMPurify from 'dompurify';\nimport withWidth from '@material-ui/core/withWidth';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { Radio } from '@/pages/common/inputs';\nimport { Slider } from '@/pages/common/Slider';\nimport { TRIAL_PLAN } from '@/components/Email/TitanUpgrade/TitanUpgradePlanItem/TitanPlans';\nimport * as Styles from './SelectNewPlan.styles';\nimport { ThemeContext } from 'styled-components';\n\nconst SelectNewPlan = ({\n freePlanActivated = false,\n planOptions,\n paymentCycle,\n handleSelectOption,\n newPlanCardTitle = 'Planos Disponíveis',\n newPlanCardDescription = 'Selecione uma das opções abaixo para solicitar a atualização do seu plano e receber mais armazenamento para suas caixas de e-mail:',\n higherPlan = 'Você já possui o plano com maior capacidade de armazenamento.',\n actualPlan = 'Plano Atual',\n freeTrialPeriod = 'em Período Gratuito',\n storage = 'de armazenamento',\n ilimitedMailBoxes = 'Contas de e-mail ilimitadas',\n monthlyPerMailBox = ' ao mês / conta de e-mail',\n notSelectedTrialPlanLabel = '30 dias grátis para testar',\n whatIsincluded = 'QUE ESTÁ INCLUIDO',\n whatIsincludedInPaid = 'TODO DE TITAN BASIC, MÁS',\n}) => {\n const theme = useContext(ThemeContext);\n\n const getNumericalThemeBreakpoint = breakpoint => parseInt(theme.breakpoints[breakpoint].slice(0, -2), 10);\n\n const handleClick = (optionName) => {\n handleSelectOption && handleSelectOption(optionName);\n };\n\n const settings = {\n initialSlide: 0,\n slidesToShow: 4,\n speed: 500,\n dots: true,\n infinite: false,\n arrows: true,\n slidesToScroll: 4,\n responsive: [\n {\n breakpoint: getNumericalThemeBreakpoint('xl'),\n settings: {\n slidesToShow: 3,\n slidesToScroll: 3,\n },\n },\n {\n breakpoint: getNumericalThemeBreakpoint('lg'),\n settings: {\n slidesToShow: 2,\n slidesToScroll: 2,\n },\n },\n {\n breakpoint: getNumericalThemeBreakpoint('md'),\n settings: {\n slidesToShow: 1,\n slidesToScroll: 1,\n },\n },\n {\n breakpoint: getNumericalThemeBreakpoint('sm'),\n settings: {\n slidesToShow: 1,\n slidesToScroll: 1,\n },\n },\n ],\n };\n\n const sliderItems = () => planOptions.length > 1 && planOptions.map((option) => {\n const price = formatCurrency(paymentCycle === 'monthly'\n ? option.price[paymentCycle].toLowerCase()\n : option.price[paymentCycle].toLowerCase() / 12).split(' ');\n\n const pricePart = { coin: price.shift(), value: price.pop() };\n\n const sanitizedBennefits = DOMPurify.sanitize(option.bennefits);\n const isTrial = option.id === TRIAL_PLAN;\n\n const freePlan = option.isFree;\n const selectedPlan = option.isSelected;\n const notSelectedTrialPlan = isTrial && !option.isSelected;\n const selectedTrialPlan = isTrial && option.isSelected;\n\n return (\n handleClick(option.name)}\n key={`button_${option.name}`}\n data-testid={option.name.replace(/ /g, '')}\n >\n \n {!freePlan\n && {actualPlan} \n )}\n\n {(notSelectedTrialPlan) && (\n {notSelectedTrialPlanLabel} \n )}\n\n {(selectedTrialPlan) && (\n {freeTrialPeriod} \n )}\n \n\n \n {option.name} \n \n\n {option.size} \n {storage} \n\n \n {option.isFree\n ? ilimitedMailBoxes\n : (\n <>\n {`${pricePart.coin} ${pricePart.value}`} \n {monthlyPerMailBox}\n \n )\n }\n \n\n {option.isFree ? whatIsincluded : whatIsincludedInPaid} \n }\n\n \n {planOptions.length > 1 && (\n {newPlanCardTitle} \n )}\n\n \n {planOptions.length > 1 ? newPlanCardDescription : higherPlan}\n \n\n \n );\n};\n\nexport default withWidth()((SelectNewPlan));\n","import styled, { css } from 'styled-components';\n\nexport const ContainerCard = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.palette.white.light};\n box-shadow: 0px 1px 3px #00000029;\n display: flex;\n flex-direction: column;\n padding: 36px 48px;\n\n @media (max-width:758px) {\n padding: 24px;\n }\n `}\n`;\n\nexport const Row = styled.div`\n display: flex;\n flex-direction: row;\n\n @media (max-width:758px) {\n flex-direction: column;\n flex-wrap: wrap;\n }\n`;\n","import React, {\n useState, useEffect, useMemo, useCallback,\n} from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { getUpgradeSummary } from '@/redux/actions/emails';\nimport { ERROR_GET_UPGRADE_SUMMARY } from '@/redux/actions/actionsTypes';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport { notifierError } from '@/utils/Application/notifier';\nimport { COUNTRY } from '@/config';\nimport { ESSENTIALS_PLAN, TRIAL_PLAN, FREE_PLAN } from '@/components/Email/TitanUpgrade/TitanUpgradePlanItem/TitanPlans';\nimport { locale } from '@/utils/locale';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport InvoiceTable from '../../InvoiceTable';\nimport PaymentMethod from './PaymentMethod/PaymentMethod';\nimport PaymentCycle from './PaymentCycle';\nimport SelectNewPlan from './SelectNewPlan';\nimport * as Styles from './TitanUpgradePlanCycleContainer.styles';\n\nconst TitanUpgradePlanCycleContainer = ({\n plan, plans, domainObject, setPlan,\n}) => {\n const validPaymentCycle = domainObject.billingcycle.toLowerCase() === 'monthly' || domainObject.billingcycle.toLowerCase() === 'quarterly' || domainObject.billingcycle.toLowerCase() === 'semiannually' || domainObject.billingcycle.toLowerCase() === 'annually' || domainObject.billingcycle.toLowerCase() === 'biennially';\n const dispatch = useDispatch();\n const initialPaymentMethod = isBRServer ? 'braspag_credit_1x' : 'dlocal';\n const initialPaymetCycle = validPaymentCycle ? domainObject.billingcycle.toLowerCase() : 'monthly';\n const [paymentCycle, setPaymentCycle] = useState(initialPaymetCycle);\n const [paymentMethod, setPaymentMethod] = useState(initialPaymentMethod);\n const [planOptions, setPlanOptions] = useState([]);\n const [summaryCalcs, setSummaryCalcs] = useState(null);\n const loadingUpgradeSummary = useSelector(state => state.emails.loadingUpgradeSummary);\n const [typing, setTyping] = useState(false);\n const [newAmount, setNewAmount] = useState(null);\n const [interacted, setInteracted] = useState(false);\n const [freePlanActivated, setFreePlanActivated] = useState(false);\n const isTrialPlan = plan.id === TRIAL_PLAN;\n const [upgradeButtonDisable, setUpgradeButtonDisable] = useState(isTrialPlan);\n const [isAccountNumberChanged, setAccountNumberChanged] = useState(false);\n const [isPaymetCycleChanged, setPaymetCycleChanged] = useState(false);\n const [isPaymentMethodChanged, setPaymentMethodChanged] = useState(false);\n const [disabledPayment, setDisabledPayment] = useState(false);\n\n useEffect(() => {\n if (paymentCycle !== initialPaymetCycle) {\n setPaymetCycleChanged(true);\n } else {\n setPaymetCycleChanged(false);\n }\n\n if (paymentMethod !== initialPaymentMethod) {\n setPaymentMethodChanged(true);\n } else {\n setPaymentMethodChanged(false);\n }\n setDisabledPayment((plan.id === ESSENTIALS_PLAN) && domainObject.plan !== 'free');\n }, [domainObject.plan, paymentCycle, initialPaymetCycle, setPaymentCycle, paymentMethod, initialPaymentMethod, setPaymentMethod, plan.id]);\n\n useEffect(() => {\n if (isTrialPlan) {\n const disable = [isPaymetCycleChanged, isPaymentMethodChanged, isAccountNumberChanged].every(paymentChagend => !paymentChagend);\n setUpgradeButtonDisable(disable);\n } else {\n setUpgradeButtonDisable(isTrialPlan);\n }\n }, [isPaymetCycleChanged, isPaymentMethodChanged, isAccountNumberChanged, isTrialPlan]);\n\n const updatePaymetCycle = ((newPaymentCycle) => {\n setPaymentCycle(newPaymentCycle);\n });\n\n const updatePaymetMethod = (newPaymentMethod) => {\n setPaymentMethod(newPaymentMethod);\n };\n\n const upgradePlanLocale = useMemo(() => ({\n newPlanCardTitle: locale('proEmail.upgradePlan.newPlanCardTitle'),\n newPlanCardDescription: locale('proEmail.upgradePlan.newPlanCardDescription'),\n higherPlan: locale('proEmail.upgradePlan.higherPlan'),\n actualPlan: locale('proEmail.upgradePlan.actualPlan'),\n freeTrialPeriod: locale('proEmail.upgradePlan.freeTrialPeriod'),\n storage: locale('proEmail.upgradePlan.storage'),\n ilimitedMailBoxes: locale('proEmail.ilimitedMailBoxes'),\n monthlyPerMailBox: locale('proEmail.upgradePlan.monthlyPerMailBox'),\n whatIsincluded: locale('proEmail.upgradePlan.whatIsincluded'),\n whatIsincludedInPaid: locale('proEmail.upgradePlan.whatIsincludedInPaid'),\n free: {\n bennefits: locale('proEmail.upgradePlan.freeBenefits'),\n name: locale('proEmail.type.free'),\n },\n cycleOptions: {\n monthly: locale('proEmail.upgradePlan.Monthly'),\n quarterly: locale('proEmail.upgradePlan.Quarterly'),\n semiannually: locale('proEmail.upgradePlan.Semiannually'),\n annually: locale('proEmail.upgradePlan.Annually'),\n biennially: locale('proEmail.upgradePlan.Biennially'),\n },\n methodOptions: {\n creditCard: locale('proEmail.upgradePlan.creditCard'),\n gp_boleto: locale('proEmail.upgradePlan.gp_boleto'),\n gp_paypal: locale('proEmail.upgradePlan.gp_paypal'),\n },\n }), []);\n\n const filterPlans = useCallback((options) => {\n const trialId = options.findIndex(item => item.id === TRIAL_PLAN);\n\n if (trialId > -1 && (domainObject.plan === 'free' || domainObject.packageid === ESSENTIALS_PLAN)) {\n options.splice(trialId, 1);\n }\n\n const essentialId = options.findIndex(item => item.id === ESSENTIALS_PLAN);\n\n if (essentialId > -1 && domainObject.packageid === TRIAL_PLAN) {\n options.splice(essentialId, 1);\n }\n\n return options;\n }, [domainObject]);\n\n const setMultipleAccounts = useCallback(() => {\n let multiplied = null;\n if (newAmount) {\n multiplied = newAmount;\n } else if (domainObject.plan === 'free' || domainObject.packageid === TRIAL_PLAN) {\n multiplied = domainObject.used_accounts > 0 ? domainObject.used_accounts : 1;\n } else {\n multiplied = domainObject.total_accounts;\n }\n\n return multiplied;\n }, [domainObject, newAmount]);\n\n const activeProduct = useCallback(({ loopPlan, hasActiveFree, isActive }) => {\n let active = isActive;\n\n if (loopPlan.id === ESSENTIALS_PLAN && hasActiveFree && !interacted) {\n active = true;\n }\n\n return active;\n }, [interacted]);\n\n const mountNewPlan = useCallback(() => {\n const validPlans = filterPlans(plans);\n if (validPlans.find(option => option.id === TRIAL_PLAN)) {\n return validPlans.find(option => option.id === TRIAL_PLAN);\n }\n\n if (validPlans.find(option => option.id === ESSENTIALS_PLAN)) {\n return validPlans.find(option => option.id === ESSENTIALS_PLAN);\n }\n\n return {\n isFree: true,\n configoptions: [\n {\n monthly: '0.00',\n quarterly: '0.00',\n semiannually: '0.00',\n annually: '0.00',\n },\n ],\n };\n }, [filterPlans, plans]);\n\n const updateSummary = useCallback(({ multipliedAccounts, activePlan }) => {\n const shouldRequestSummary = domainObject.plan !== 'free';\n const hasSelectedOtherPlan = plan.name !== domainObject.plan;\n\n let newProductId = hasSelectedOtherPlan ? activePlan.id : null;\n\n if (plan.id === TRIAL_PLAN) {\n newProductId = ESSENTIALS_PLAN;\n }\n\n if (shouldRequestSummary) {\n dispatch(getUpgradeSummary({\n inboxAmount: multipliedAccounts,\n hostingId: domainObject.hosting_id,\n planId: plan.id,\n newProductId,\n paymentCycle,\n })).then((response) => {\n if (response.type === ERROR_GET_UPGRADE_SUMMARY) {\n if (domainObject.plan !== plan.name || (!plan.name && (plan.id !== 418 && plan.id !== 241))) {\n dispatch(enqueueSnackbar('proEmail.upgradePlan.error', notifierError));\n }\n } else {\n setSummaryCalcs(response.data.data);\n }\n });\n }\n }, [dispatch, domainObject, paymentCycle, plan]);\n\n const mountOptions = useCallback(() => {\n setTyping(true);\n const options = [];\n\n let hadSelected = false;\n let activePlan = null;\n const hasActiveFree = domainObject.plan === 'free';\n plans.forEach((loopPlan) => {\n const isFree = loopPlan.id === FREE_PLAN;\n\n let freeIsActive = false;\n if (!plan.name && isFree) {\n if (interacted) {\n freeIsActive = true;\n }\n }\n\n const isSelected = (plan.name) ? loopPlan.name === domainObject.plan : freeIsActive;\n\n const isActive = (plan.name) ? loopPlan.name === plan.name : freeIsActive;\n\n const object = {\n id: loopPlan.id,\n name: isFree ? upgradePlanLocale.free.name : loopPlan.name,\n size: isFree ? '1GB' : `${loopPlan.moduleParams.storageLimit}GB`,\n bennefits: isFree ? upgradePlanLocale.free.bennefits : loopPlan.description,\n price: {\n monthly: loopPlan.configoptions[0].monthly,\n quarterly: loopPlan.configoptions[0].quarterly,\n semiannually: loopPlan.configoptions[0].semiannually,\n annually: loopPlan.configoptions[0].annually,\n biennially: loopPlan.configoptions[0].biennially,\n },\n isSelected: isSelected || (isFree && domainObject.plan === 'free'),\n active: activeProduct({ loopPlan, hasActiveFree, isActive }),\n isFree,\n };\n\n if (isActive) {\n activePlan = object;\n }\n\n if (isSelected || domainObject.plan === 'free') {\n hadSelected = true;\n }\n if (hadSelected) {\n options.push(object);\n }\n });\n\n const validPlanOptions = filterPlans(options);\n\n setPlanOptions(validPlanOptions);\n\n if (hasActiveFree && !interacted) {\n setFreePlanActivated(true);\n\n const newPlan = mountNewPlan();\n\n setPlan(newPlan);\n }\n\n const multipliedAccounts = setMultipleAccounts();\n\n if (plan.name) {\n updateSummary({ multipliedAccounts, activePlan });\n }\n\n setTimeout(() => {\n setTyping(false);\n }, 300);\n }, [plans, plan, domainObject, upgradePlanLocale, interacted, setPlan, filterPlans, setMultipleAccounts, activeProduct, mountNewPlan, updateSummary]);\n\n useEffect(() => {\n mountOptions();\n }, [mountOptions]);\n\n const cycleOptions = [\n { name: upgradePlanLocale.cycleOptions.monthly, value: 'monthly' },\n { name: upgradePlanLocale.cycleOptions.quarterly, value: 'quarterly' },\n { name: upgradePlanLocale.cycleOptions.semiannually, value: 'semiannually' },\n { name: upgradePlanLocale.cycleOptions.annually, value: 'annually' },\n { name: upgradePlanLocale.cycleOptions.biennially, value: 'biennially' },\n ];\n\n const methodOptions = [\n { name: upgradePlanLocale.methodOptions.creditCard, value: COUNTRY === 'br' ? 'braspag_credit_1x' : 'dlocal', span: 'Acesso imediato ao plano' },\n { name: upgradePlanLocale.methodOptions.gp_boleto, value: COUNTRY === 'br' ? 'boleto' : 'payu_boleto' },\n { name: upgradePlanLocale.methodOptions.gp_paypal, value: 'paypal' },\n ];\n\n const handleSelectOption = (optionName) => {\n const newOptions = [...planOptions];\n const idx = newOptions.findIndex(option => option.name === optionName);\n\n newOptions.map((option) => {\n const newOption = option;\n return delete newOption.active;\n });\n\n newOptions[idx].active = true;\n\n setPlanOptions(newOptions);\n\n const newPlan = plans.find(option => option.name === optionName);\n\n setInteracted(true);\n setPlan(newPlan || {\n isFree: true,\n configoptions: [\n {\n monthly: '0.00',\n quarterly: '0.00',\n semiannually: '0.00',\n annually: '0.00',\n biennially: '0.00',\n },\n ],\n });\n };\n\n return (\n \n \n \n )}\n\n {planOptions.length > 1 && (\n \n );\n};\n\nexport default TitanUpgradePlanCycleContainer;\n","const styles = theme => ({\n titleCard: {\n backgroundColor: theme.color.white,\n boxShadow: '0px 1px 3px #00000029',\n display: 'flex',\n marginBottom: '6px',\n padding: '12px 24px',\n },\n\n redirectButton: {\n backgroundColor: 'transparent',\n border: 'none',\n color: theme.color.indigo,\n cursor: 'pointer',\n marginRight: '16px',\n padding: 0,\n },\n\n actualPlanLabel: {\n color: theme.color.indigo,\n fontSize: '14px',\n fontWeight: '500',\n letterSpacing: '0.01px',\n lineHeight: '19px',\n },\n\n actualPlan: {\n color: theme.color.tundora,\n fontSize: '24px',\n fontWeight: '300',\n letterSpacing: '0.01px',\n lineHeight: '32px',\n },\n\n actualDomainSpan: {\n color: theme.color.regentGray,\n fontSize: '18px',\n fontWeight: '300',\n letterSpacing: '0.01px',\n lineHeight: '24px',\n marginLeft: '9px',\n },\n});\nexport default styles;\n","import { Typography, withStyles } from '@material-ui/core';\nimport React, { useState } from 'react';\nimport { withI18n } from 'react-i18next';\nimport { ArrowBack as ArrowBackIcon } from '@material-ui/icons/';\nimport { Redirect } from 'react-router';\nimport styles from './styles';\n\nconst TitanUpgradePlanCycleTitle = ({\n classes, domainObject, domain, t,\n}) => {\n const [redirect, toggleRedirect] = useState(false);\n\n if (redirect) {\n return \n
toggleRedirect(true)} className={classes.redirectButton}>\n \n\n
\n \n {domainObject.plan !== 'free' ? domainObject.plan : `${t('proEmail.type.free')}`}\n {`(${domain})`} \n \n
\n
\n \n );\n};\n\nexport default withI18n()(withStyles(styles)(TitanUpgrade));\n","import React from 'react';\nimport { withStyles } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport { useParams } from 'react-router';\nimport EmailsContextProvider from '@/contexts/Emails/context';\nimport styles from './styles';\nimport TitanChangeCycleWrapper from './TitanChangeCycleWrapper';\n\nconst TitanChangeCycle = () => {\n const { domain } = useParams();\n\n return (\n \n \n );\n};\n\nexport default withI18n()(withStyles(styles)(TitanChangeCycle));\n","const styles = theme => ({\n root: {\n [theme.breakpoints.up(960)]: {\n paddingTop: 0,\n },\n },\n});\nexport default styles;\n","import styled, { css } from 'styled-components';\n\nexport const BannerWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.color.white};\n border-radius: 4px;\n box-shadow: 0px 2px 5px #0000001a;\n display: flex;\n padding: 8px;\n position: relative;\n width: 100%;\n height: 128px;\n\n @media (max-width: ${theme.breakpoints.md}) {\n padding: 30px;\n height: 100%;\n }\n\n .assetTriangle {\n position: absolute;\n top: 8px;\n left: 8px;\n }\n\n @media (max-width: ${theme.breakpoints.sm}) {\n .assetTriangle {\n left: auto;\n right: 8px;\n transform: rotate(90deg);\n }\n }\n `}\n`;\n\nexport const Figure = styled.figure`\n ${({ theme }) => css`\n position: relative;\n .snappy {\n position: relative;\n bottom: 12px;\n }\n\n @media (max-width: ${theme.breakpoints.sm}) {\n display: none;\n }\n `}\n`;\n\nexport const ContentSection = styled.section`\n padding:0;\n`;\n\nexport const BannerTitle = styled.h3`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n justify-content: flex-start;\n margin: 28px 0 20px;\n\n p {\n margin: 0px;\n }\n\n @media (max-width: ${theme.breakpoints.sm}) {\n display: flex;\n flex-direction: column-reverse;\n margin: 0 0 20px;\n }\n `}\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n color: ${theme.color.astronaut};\n font-size: ${theme.font.sizes.lg};\n font-weight: 400;\n letter-spacing: 0.01px;\n margin: 0px;\n `}\n`;\n\nexport const TagBanner = styled.span`\n ${({ theme }) => css`\n background-color: ${`${theme.palette.grey.primary}66`};\n color: ${theme.palette.success.primary};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.bold};\n letter-spacing: 0.01px;\n margin-left: 12px;\n padding: 6px;\n text-transform: uppercase;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n align-self: flex-start;\n display: inline-block;\n margin-bottom: 16px;\n margin-left: 0;\n }\n `}\n`;\n\nexport const SelectContainer = styled.div`\n ${({ theme }) => css`\n width: 280px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n width: 100%;\n }\n `}\n`;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { withI18n } from 'react-i18next';\n\nimport snappyMail from '@/media/icons/snappy_mail_trial.svg';\nimport assetProEmailBanner from '@/media/icons/assetProEmailBanner.svg';\n\nimport * as Styles from './BannerToEnableTitanTrial.styles';\nimport { SelectBottomDashed } from '@/pages/common/SelectBottomDashed';\n\n\nconst BannerToEnableTitan = ({\n t,\n onDomainSelected,\n domainOptions,\n productName,\n onBannerLoaded,\n}) => {\n const [selectDomain, setSelectDomain] = useState({ value: '', label: '' });\n\n const handleDomainSelected = (domain) => {\n setSelectDomain(domain);\n onDomainSelected(domain);\n };\n\n useEffect(() => {\n onBannerLoaded && onBannerLoaded();\n }, [onBannerLoaded]);\n\n return (\n productName\n && (\n \n \n \n\n \n \n \n {t('bannerTitanTrial.title', { productName })}\n \n \n {t('bannerTitanTrial.tagOfTrialTime')}\n \n \n\n \n \n\n \n \n )\n );\n};\n\nBannerToEnableTitan.propTypes = {\n t: PropTypes.func.isRequired,\n onDomainSelected: PropTypes.func.isRequired,\n domainOptions: PropTypes.arrayOf(PropTypes.shape({\n value: PropTypes.any.isRequired,\n label: PropTypes.string.isRequired,\n })),\n productName: PropTypes.string,\n};\n\nBannerToEnableTitan.defaultProps = {\n domainOptions: [],\n productName: '',\n};\n\n\nexport default withI18n()(BannerToEnableTitan);\n","const styles = theme => ({\n btnClose: {\n color: theme.color.tundora,\n padding: '6px',\n position: 'absolute',\n right: '15px',\n top: '15px',\n },\n\n modal: {\n borderRadius: 0,\n height: '220px',\n maxWidth: '600px',\n },\n\n content: {\n padding: '35px 40px',\n position: 'relative',\n },\n\n checkAvailabilityPlanLinkButton: {\n alignItems: 'center',\n background: theme.color.indigo,\n color: theme.color.white,\n display: 'flex',\n fontFamily: 'Roboto',\n fontSize: '14px',\n fontWeight: 400,\n height: '40px',\n letterSpacing: '0.01px',\n justifyContent: 'center',\n marginLeft: 'auto',\n marginRight: 'auto',\n marginTop: '40px',\n textDecoration: 'none',\n textTransform: 'uppercase',\n width: '218px',\n },\n\n titleDialog: {\n fontFamily: 'Roboto',\n fontSize: '24px',\n fontWeight: 'Medium',\n letterSpacing: '0.01px',\n marginLeft: '26px',\n marginRight: '26px',\n },\n\n descriptionDialog: {\n fontFamily: 'Roboto',\n fontSize: '16px',\n fontStyle: 'Regular',\n letterSpacing: '0.01px',\n marginTop: '8px',\n },\n\n title: {\n color: theme.color.tundora,\n fontSize: '24px',\n fontWeight: 'normal',\n margin: '0 0 5px',\n },\n\n message: {\n color: theme.color.tundora,\n fontSize: '14px',\n lineHeight: '20px',\n margin: '0 0 15px',\n },\n\n warning: {\n borderRadius: '2px',\n marginBottom: '30px',\n padding: '15px',\n },\n\n actions: {\n textAlign: 'center',\n },\n\n btnCancel: {\n borderColor: theme.color.geyser,\n color: theme.color.indigo,\n marginRight: '10px',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport {\n withStyles,\n Dialog,\n IconButton,\n DialogContent,\n Typography,\n} from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport CloseIcon from '@material-ui/icons/Close';\nimport { GET_A_NEW_DOMAIN } from '@/config/urls/supportUrls';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport { offerPlanWithDomainNoRegisteredTagManager } from '@/utils/ThirdParties/tagManager';\nimport styles from './styles';\n\nconst ModalCheckDomainAvailable = ({\n onClose, open, classes, t,\n}) => {\n const executeGA = () => {\n offerPlanWithDomainNoRegisteredTagManager();\n onClose();\n };\n\n return (\n \n \n \n \n
\n \n {t('proEmail.domainNoAvailabilityTitleLabel')} \n {t('proEmail.domainNoAvailabilityDescriptionLabel')} \n \n {t('proEmail.checkAvailabilityLabel')}\n \n \n \n );\n};\n\nexport default withI18n()(withStyles(styles)(ModalCheckDomainAvailable));\n","const styles = theme => ({\n btnClose: {\n color: theme.color.tundora,\n padding: '6px',\n position: 'absolute',\n right: '15px',\n top: '15px',\n },\n modal: {\n borderRadius: 0,\n height: '280px',\n },\n content: {\n padding: '35px 40px',\n position: 'relative',\n },\n checkAvailabilityPlanLinkButton: {\n alignItems: 'center',\n background: theme.color.indigo,\n color: theme.color.white,\n display: 'flex',\n fontSize: '16px',\n fontWeight: 400,\n height: '32px',\n justifyContent: 'center',\n marginLeft: 'auto',\n marginRight: 'auto',\n marginTop: '24px',\n textDecoration: 'none',\n width: '250px',\n },\n scroolPaper: {\n marginTop: '24px',\n maxHeight: 420,\n overflow: 'auto',\n padding: 0,\n '&::-webkit-scrollbar': {\n width: 8,\n },\n '&::-webkit-scrollbar-track': {\n background: theme.color.silver,\n borderRadius: '8px',\n },\n '&::-webkit-scrollbar-thumb': {\n borderRadius: 8,\n background: theme.color.indigo,\n },\n '&::-webkit-scrollbar-thumb:hover': {\n background: theme.color.indigo,\n },\n [theme.breakpoints.down(960)]: {\n margin: 0,\n maxHeight: 'unset',\n overflow: 'unset',\n padding: 0,\n },\n },\n titleDomain: {\n color: theme.color.indigo,\n fontSize: '24px',\n fontStyle: 'Medium',\n },\n gridDates: {\n marginBottom: '19px',\n },\n gridSubDates: {\n marginLeft: '9px',\n firstColumn: {\n marginLeft: '-9px',\n },\n },\n radioItem: {\n textAlign: 'center',\n width: 'auto',\n },\n titleItemDate: {\n color: theme.color.textPrimary,\n display: 'block',\n fontSize: '16px',\n fontWeight: 'bold',\n marginTop: '4px',\n textAlign: 'left',\n },\n titleItem: {\n color: theme.color.tundora,\n display: 'block',\n fontSize: '16px',\n fontWeight: 'bold',\n marginTop: '19px',\n overflow: 'hidden',\n textAlign: 'left',\n textOverflow: 'ellipsis',\n width: '100%',\n },\n titleDate: {\n color: theme.color.regentGray,\n fontSize: '12px',\n marginTop: '2px',\n textAlign: 'left',\n },\n description: {\n fontSize: '16px',\n fontStyle: 'Regular',\n marginTop: '16px',\n },\n dialogTitle: {\n height: '45px',\n textAlign: 'right',\n },\n gridList: {\n marginTop: '18px',\n border: '1px solid #CDD8DF',\n borderRadius: '4px',\n width: '100%',\n marginLeft: 'auto',\n '&:hover': {\n border: `1px solid${theme.color.indigo}`,\n },\n },\n title: {\n color: theme.color.tundora,\n fontSize: '24px',\n fontWeight: 'normal',\n margin: '0 0 5px',\n },\n message: {\n color: theme.color.tundora,\n fontSize: '14px',\n lineHeight: '20px',\n margin: '0 0 15px',\n },\n warning: {\n borderRadius: '2px',\n marginBottom: '30px',\n padding: '15px',\n },\n actions: {\n textAlign: 'center',\n },\n btnCancel: {\n borderColor: theme.color.geyser,\n color: theme.color.indigo,\n marginRight: '10px',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport {\n withStyles,\n Dialog,\n Grid,\n Paper,\n IconButton,\n DialogContent,\n Typography,\n RadioGroup,\n FormControlLabel,\n Radio,\n} from '@material-ui/core';\nimport { NavLink } from 'react-router-dom';\n\nimport { withI18n, Trans } from 'react-i18next';\nimport CloseIcon from '@material-ui/icons/Close';\nimport { formatDate } from '@/utils/Formatters/formatDate';\nimport styles from './styles';\n\nconst ModalSelectionHostingPlans = ({\n onClose, open, classes, t, domain, hostings,\n}) => {\n const [value, setValue] = React.useState(1);\n const [disabledButtonAction, setDisabledButtonAction] = React.useState(true);\n const [urlTitanHire, setUrlTitanHire] = React.useState('');\n\n\n const handleChange = (event) => {\n const url = `${t('routes.emailsList')}${t('routes.titanHireFreePlan')}/${hostings[event.target.value].primary_domain}?id=${hostings[event.target.value].hostingId}&selected=true`;\n setUrlTitanHire(url);\n setValue(event.target.value);\n setDisabledButtonAction(false);\n };\n return (\n \n \n \n \n
\n \n \n 0 \n 1 \n 2 \n \n {t('proEmail.hostingPlansDescriptionLabel')} \n\n \n \n {Object.keys(hostings).map((index) => {\n const title = `${t('proEmail.hostingLabel')} ${hostings[index].hostname} - ${hostings[index].primary_domain}`;\n const regDate = hostings[index].regdate;\n const nextDueDate = hostings[index].nexduedate;\n\n return (\n\n \n \n \n {title}\n \n \n \n \n \n {t('proEmail.hostingPlansCreateDateLabel')}\n \n \n {formatDate(regDate)}\n \n \n \n \n {t('proEmail.hostingPlansDueDateLabel')}\n \n \n {formatDate(nextDueDate)}\n \n \n \n \n )}\n />\n );\n })}\n \n \n \n {t('proEmail.hostingPlansViewPlansLabel')}\n \n \n \n );\n};\n\nexport default withI18n()(withStyles(styles)(ModalSelectionHostingPlans));\n","const styles = theme => ({\n\n manageLinkButton: {\n color: theme.palette.grey.light,\n display: 'block',\n fontSize: '14px',\n fontWeight: '500',\n margin: 0,\n textAlign: 'right',\n textDecoration: 'none',\n textTransform: 'uppercase',\n transition: 'color 0.2s',\n\n },\n\n messageBlock: {\n alignItems: 'center',\n border: `1px solid ${theme.color.white}`,\n borderRadius: '6px',\n display: 'flex',\n marginLeft: 'auto',\n maxWidth: '473px',\n padding: '12px',\n width: '100%',\n [theme.breakpoints.down(1285)]: {\n maxWidth: '100%',\n },\n },\n\n pendingMessage: { borderColor: theme.color.brightSun },\n provisioningMessage: { borderColor: theme.color.brightSun },\n suspendedMessage: { borderColor: theme.color.valencia },\n terminatedMessage: { borderColor: theme.color.geyser },\n expiredMessage: { borderColor: theme.color.geyser },\n\n billButton: {\n alignItems: 'center',\n alignSelf: 'center',\n border: `1px solid ${theme.color.indigo}`,\n borderRadius: '200px',\n color: theme.color.indigo,\n display: 'flex',\n fontSize: '12px',\n height: 32,\n justifyContent: 'center',\n letterSpacing: '0.01px',\n lineHeight: '14px',\n textDecoration: 'none',\n transition: '300ms',\n width: 116,\n\n '&:hover': {\n backgroundColor: theme.color.indigo,\n color: theme.color.white,\n },\n\n [theme.breakpoints.down(1285)]: {\n alignSelf: 'flex-start',\n marginBottom: '24px',\n },\n\n [theme.breakpoints.down(745)]: {\n alignSelf: 'center',\n },\n },\n\n proEmailInactiveActions: {\n color: theme.color.indigo,\n display: 'block',\n fontWeight: '400',\n margin: 0,\n textAlign: 'right',\n textDecoration: 'none',\n textTransform: 'uppercase',\n transition: 'color 0.2s',\n [theme.breakpoints.down(1285)]: {\n width: '100%',\n },\n\n '&:hover': {\n background: theme.color.lightBlue,\n color: theme.color.chambray,\n textDecoration: 'underline',\n },\n },\n\n contractNewPlanLinkButton: {\n color: theme.color.indigo,\n display: 'inline-block',\n fontFamily: 'Roboto',\n fontSize: '14px',\n fontWeight: '500',\n letterSpacing: '0.01px',\n margin: 0,\n paddingRight: '0px',\n textAlign: 'right',\n textDecoration: 'none',\n textTransform: 'uppercase',\n transition: 'color 0.2s',\n '&:hover': {\n color: theme.color.chambray,\n backgroundColor: '#F2F8FC',\n textDecoration: 'underline',\n },\n },\n\n warningIcon: {\n fill: theme.color.valencia,\n height: '14px',\n marginRight: '4px',\n opacity: 1,\n width: '14px',\n },\n\n messageLink: {\n color: theme.color.indigo,\n fontWeight: 500,\n },\n\n message: {\n color: theme.color.tundora,\n fontSize: 12,\n },\n});\n\nexport default styles;\n","import {\n Button, Typography, withStyles,\n} from '@material-ui/core';\nimport React, { useState } from 'react';\nimport { withI18n } from 'react-i18next';\nimport PropTypes from 'prop-types';\nimport { useDispatch } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\n\nimport ModalCheckDomainAvailable from '@/components/Modal/ModalCheckDomainAvailable';\n\nimport ModalSelectionHostingPlans from '@/components/Modal/ModalSelectionHostingPlans';\nimport * as actions from '@/redux/actions/emails';\nimport styles from './styles';\nimport { executeGAContractNewPlanInListEmails } from '@/utils/ThirdParties/tagManager';\n\n\nconst InactiveBlock = ({\n classes, status, domain, t,\n}) => {\n const pendingMessage = status === 'pending' || status === 'provisioning';\n const [modalCheckDomainAvailable, setModalCheckDomainAvailable] = useState(false);\n const [modalSelectionHostingPlans, setModalSelectionHostingPlans] = useState(false);\n const [hostings, setHostings] = useState(new Map());\n const dispatch = useDispatch();\n const history = useHistory();\n\n const handleOpen = async () => {\n executeGAContractNewPlanInListEmails();\n dispatch(actions.requestCheckDomainAvailable(domain)).then((responseData) => {\n if (responseData.data.available) {\n setModalCheckDomainAvailable(true);\n } else {\n dispatch(actions.requestProEmailHostingPlans(domain)).then((response) => {\n if (response.data.length > 1) {\n setHostings(response.data);\n setModalSelectionHostingPlans(true);\n } else if (response.data.length === 1) {\n history.push(`${t('routes.emailsList')}${t('routes.titanHireFreePlan')}/${response.data[0].domain}?id=${response.data[0].hostingId}`);\n } else {\n history.push(`${t('routes.emailsList')}${t('routes.titanHire')}/${domain}`);\n }\n });\n }\n });\n };\n\n return (\n <>\n setModalSelectionHostingPlans(false)}\n open={modalSelectionHostingPlans}\n classes={classes}\n domain={domain}\n hostings={hostings}\n />\n\n setModalCheckDomainAvailable(false)}\n open={modalCheckDomainAvailable}\n classes={classes}\n domain={domain}\n />\n {pendingMessage && (\n \n
\n \n {t('proEmail.managerEmail')}\n \n
\n
\n
\n \n {t('proEmail.managerEmail')}\n \n
\n
\n \n {t('proEmail.contractNewEmailPlan')}\n \n
\n )}\n \n );\n};\n\nInactiveBlock.propTypes = {\n status: PropTypes.string.isRequired,\n domain: PropTypes.string.isRequired,\n};\n\nexport default withI18n()(withStyles(styles)(InactiveBlock));\n","const styles = theme => ({\n\n imgLogo: {\n display: 'inline-block',\n },\n\n divContentLogo: {\n width: '50%',\n textAlign: 'right',\n },\n\n divLogos: {\n display: 'inline-block',\n marginRight: '40px',\n marginTop: '21px',\n width: '96px',\n [theme.breakpoints.down(700)]: {\n display: 'none',\n },\n },\n\n logo: {\n display: 'inline-block',\n height: '24px',\n marginLeft: '16px',\n marginTop: '11px',\n width: '24px',\n },\n\n logoTitle: {\n color: theme.palette.grey.light,\n fontFamily: 'Roboto, sans-serif',\n letterSpacing: '0.01px',\n marginLeft: '4px',\n opacity: 1,\n textAlign: 'left',\n },\n\n details: {\n alignItems: 'center',\n display: 'flex',\n marginTop: '21px',\n minWidth: '326px',\n width: '50%',\n [theme.breakpoints.down(1285)]: {\n marginBottom: '21px',\n },\n\n [theme.breakpoints.down(745)]: {\n width: '100%',\n },\n },\n\n emailIcon: {\n fontSize: '24px',\n marginRight: '20px',\n },\n\n activeIcon: { fill: theme.color.oceanGreen },\n nullIcon: { fill: theme.color.coral },\n pendingIcon: { fill: theme.color.brightSun },\n provisioningIcon: { fill: theme.color.brightSun },\n suspendedIcon: { fill: theme.color.valencia },\n terminatedIcon: { fill: theme.color.geyser },\n expiredIcon: { fill: theme.color.geyser },\n\n proEmailDataWrapper: {\n alignSelf: 'flex-start',\n width: '100%',\n },\n\n forceCenter: {\n alignSelf: 'center',\n },\n\n info: {\n fill: theme.color.indigo,\n height: '16px',\n },\n\n proEmailDomain: {\n color: theme.color.tundora,\n fontSize: '16px',\n fontWeight: 500,\n letterSpacing: '0.01px',\n lineHeight: '19px',\n },\n\n proEmailStatus: {\n borderRadius: '2px',\n color: theme.color.white,\n display: 'inline-block',\n fontSize: '12px',\n fontWeight: 400,\n lineHeight: '14px',\n marginTop: '10px',\n padding: '3px 6px',\n },\n\n activeProEmailStatus: { backgroundColor: theme.color.oceanGreen },\n pendingProEmailStatus: { backgroundColor: theme.color.brightSun },\n provisioningProEmailStatus: { backgroundColor: theme.color.brightSun },\n suspendedProEmailStatus: { backgroundColor: theme.color.valencia },\n terminatedProEmailStatus: { backgroundColor: theme.color.geyser },\n expiredProEmailStatus: { backgroundColor: theme.color.geyser },\n nullProEmailStatus: { backgroundColor: theme.color.coral },\n});\n\nexport default styles;\n","const styles = theme => ({\n dialogContent: {\n textAlign: 'center',\n },\n\n dialogTitle: {\n height: '45px',\n textAlign: 'right',\n [theme.breakpoints.down(700)]: {\n height: '50%',\n },\n },\n\n btnClose: {\n color: theme.color.tundora,\n padding: '6px',\n position: 'absolute',\n right: '15px',\n top: '15px',\n },\n\n modal: {\n borderRadius: 0,\n height: '220px',\n maxWidth: '600px',\n [theme.breakpoints.down(700)]: {\n height: '100%',\n margin: '0px',\n maxWidth: '100%',\n },\n },\n\n content: {\n padding: '35px 40px',\n position: 'relative',\n },\n\n checkAvailabilityPlanLinkButton: {\n alignItems: 'center',\n background: theme.color.indigo,\n color: theme.color.white,\n display: 'flex',\n fontFamily: 'Roboto',\n fontSize: '14px',\n fontWeight: 400,\n height: '40px',\n letterSpacing: '0.01px',\n justifyContent: 'center',\n marginLeft: 'auto',\n marginRight: 'auto',\n marginTop: '40px',\n textDecoration: 'none',\n textTransform: 'uppercase',\n width: '218px',\n },\n\n titleDialog: {\n fontFamily: 'Roboto',\n fontSize: '24px',\n fontWeight: '500',\n letterSpacing: '0.01px',\n marginLeft: '26px',\n marginRight: '26px',\n [theme.breakpoints.down(700)]: {\n margin: '0px',\n },\n },\n\n descriptionDialog: {\n fontFamily: 'Roboto',\n fontSize: '16px',\n fontStyle: 'Regular',\n letterSpacing: '0.01px',\n marginTop: '8px',\n },\n\n title: {\n color: theme.color.tundora,\n fontSize: '24px',\n fontWeight: 'normal',\n margin: '0 0 5px',\n },\n\n message: {\n color: theme.color.tundora,\n fontSize: '14px',\n lineHeight: '20px',\n margin: '0 0 15px',\n },\n\n warning: {\n borderRadius: '2px',\n marginBottom: '30px',\n padding: '15px',\n },\n\n actions: {\n textAlign: 'center',\n },\n\n btnCancel: {\n borderColor: theme.color.geyser,\n color: theme.color.indigo,\n marginRight: '10px',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport {\n withStyles,\n Dialog,\n IconButton,\n DialogContent,\n Typography,\n Button,\n CircularProgress,\n} from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport CloseIcon from '@material-ui/icons/Close';\nimport styles from './styles';\n\n\nconst ModalReactivateAutomaticSubscription = ({\n onClose, open, classes, t, handleActivateSubscription,\n title,\n loading,\n description,\n confirmLabel,\n}) => {\n const isMobile = window.innerWidth < 700;\n\n const executeClick = () => {\n handleActivateSubscription();\n onClose();\n };\n\n return (\n \n \n \n \n
\n \n {title || t('proEmail.titleConfirmRenovation')} \n {description || t('proEmail.descriptionConfirmRenovation')} \n \n {!loading && (confirmLabel || t('proEmail.bottonConfirmRenovation'))}\n {loading && (\n \n
\n )}\n \n \n \n );\n};\n\nexport default withI18n()(withStyles(styles)(ModalReactivateAutomaticSubscription));\n","const styles = theme => ({\n\n trialDivMobile: {\n [theme.breakpoints.down(700)]: {\n marginTop: '0px',\n },\n },\n\n trialTerminationDate: {\n color: theme.color.regentGray,\n font: 'normal normal normal 12px/14px Roboto',\n letterSpacing: '0.01px',\n opacity: 1,\n textAlign: 'left',\n },\n\n trialDivTerminated: {\n background: theme.color.white,\n border: `1px solid ${theme.color.regentGray}`,\n borderRadius: '2px',\n color: theme.color.regentGray,\n display: 'inline-block',\n fontFamily: 'Roboto, sans-serif',\n fontSize: theme.font.sizes.xxs,\n fontWeight: theme.font.weights.regular,\n height: '26px',\n letterSpacing: '0.01px',\n lineHeight: '14px',\n marginLeft: '12px',\n opacity: '0.9',\n padding: '4px 8px 4px 8px',\n textAlign: 'left',\n [theme.breakpoints.down(700)]: {\n display: 'table',\n marginLeft: '4px',\n marginTop: '12px',\n },\n },\n\n trialDivOverDueDate: {\n background: theme.color.white,\n border: `1px solid ${theme.color.valencia}`,\n borderRadius: '2px',\n color: theme.color.valencia,\n display: 'inline-block',\n fontFamily: 'Roboto, sans-serif',\n fontSize: 12,\n fontWeight: theme.font.weights.regular,\n height: '26px',\n letterSpacing: '0.01px',\n lineHeight: '14px',\n marginLeft: '12px',\n opacity: '0.9',\n padding: '4px 8px 4px 8px',\n textAlign: 'left',\n [theme.breakpoints.down(700)]: {\n display: 'table',\n marginLeft: '4px',\n marginTop: '12px',\n },\n },\n\n trialDivToDueDate: {\n background: theme.color.white,\n border: `1px solid ${theme.color.brightSun}`,\n borderRadius: '2px',\n color: theme.color.black,\n display: 'inline-block',\n fontFamily: 'Roboto, sans-serif',\n fontSize: theme.font.sizes.xxs,\n fontWeight: theme.font.weights.regular,\n height: '26px',\n letterSpacing: '0.01px',\n lineHeight: '14px',\n marginLeft: '12px',\n opacity: '0.9',\n padding: '4px 8px 4px 8px',\n textAlign: 'left',\n [theme.breakpoints.down(700)]: {\n marginLeft: '12px',\n marginTop: '2px',\n },\n },\n\n trialDiv: {\n background: theme.color.white,\n border: `1px solid ${theme.color.oceanGreen}`,\n borderRadius: '2px',\n color: theme.color.oceanGreen,\n display: 'inline-block',\n fontFamily: 'Roboto, sans-serif',\n fontSize: theme.font.sizes.xxs,\n fontWeight: theme.font.weights.regular,\n height: '26px',\n letterSpacing: '0.01px',\n lineHeight: '14px',\n marginLeft: '12px',\n opacity: '0.9',\n padding: '4px 8px 4px 8px',\n textAlign: 'left',\n [theme.breakpoints.down(700)]: {\n marginLeft: '12px',\n marginTop: '2px',\n },\n },\n\n automaticReactivationButton: {\n color: theme.palette.primary.dark,\n fontFamily: 'Roboto',\n fontSize: theme.font.sizes.sm,\n fontWeight: theme.font.weights.regular,\n letterSpacing: '0.01px',\n margin: 0,\n opacity: 1,\n textAlign: 'left',\n textDecoration: 'underline',\n textTransform: 'none',\n transition: 'color 0.2s',\n '&:hover': {\n color: theme.color.indigo,\n backgroundColor: theme.color.white,\n textDecoration: 'underline',\n },\n [theme.breakpoints.down(700)]: {\n paddingLeft: '4px',\n marginBottom: '18px',\n },\n },\n\n proEmailExpiringDate: {\n minWidth: '183px',\n\n [theme.breakpoints.down(1285)]: {\n minWidth: '195px',\n },\n\n [theme.breakpoints.down(443)]: {\n maxWidth: '100%',\n minWidth: 'unset',\n paddingRight: 0,\n },\n },\n\n divWarningIcon: {\n display: 'initial',\n marginTop: '4px',\n verticalAlign: 'sub',\n },\n\n warningIcon: {\n fill: theme.color.valencia,\n height: '14px',\n marginRight: '4px',\n opacity: 1,\n width: '14px',\n },\n\n warningIconTrialDueDate: {\n fill: theme.color.black,\n height: '14px',\n marginRight: '4px',\n opacity: 1,\n width: '14px',\n },\n\n billButton: {\n color: theme.palette.primary.dark,\n fontFamily: 'Roboto',\n fontSize: theme.font.sizes.sm,\n fontWeight: theme.font.weights.regular,\n letterSpacing: '0.01px',\n margin: 0,\n opacity: 1,\n textAlign: 'left',\n textDecoration: 'underline',\n textTransform: 'none',\n transition: 'color 0.2s',\n '&:hover': {\n color: theme.color.indigo,\n backgroundColor: theme.color.white,\n textDecoration: 'underline',\n },\n [theme.breakpoints.down(443)]: {\n paddingLeft: 'px',\n marginBottom: '18px',\n },\n },\n\n suspendedDate: {\n background: theme.color.white,\n border: `1px solid ${theme.color.valencia}`,\n borderRadius: '2px',\n color: theme.color.valencia,\n display: 'inline-block',\n fontFamily: 'Roboto, sans-serif',\n fontSize: theme.font.sizes.xxs,\n fontWeight: theme.font.weights.regular,\n height: '24px',\n letterSpacing: '0.01px',\n lineHeight: '14px',\n marginLeft: '12px',\n opacity: '0.9',\n padding: '2px 8px 4px 8px',\n textAlign: 'left',\n [theme.breakpoints.down(700)]: {\n marginLeft: '12px',\n marginTop: '12px',\n },\n },\n\n customPopper: {\n opacity: 1,\n },\n\n customTooltip: {\n backgroundColor: theme.color.doveGray,\n borderRadius: '3px',\n fontSize: theme.font.sizes.xxs,\n lineHeight: '14px',\n opacity: '0.9',\n padding: '8px 8px 8px 8px',\n textAlign: 'left',\n },\n\n paperMenu: {\n marginTop: '52px',\n },\n\n divEmptyIcon: {\n height: '40px',\n width: '80px',\n },\n\n divPlan: {\n float: 'left',\n [theme.breakpoints.down(700)]: {\n marginRight: '12px',\n },\n },\n\n\n terminationDate: {\n color: theme.color.tundora,\n font: 'normal normal normal 12px/14px Roboto',\n letterSpacing: '0.01px',\n opacity: 1,\n textAlign: 'left',\n },\n\n dueDate: {\n color: theme.color.tundora,\n font: 'normal normal normal 12px/14px Roboto',\n letterSpacing: '0.01px',\n opacity: 1,\n textAlign: 'left',\n [theme.breakpoints.down(443)]: {\n },\n },\n\n textMenu: {\n color: theme.color.indigo,\n fontFamily: 'Roboto',\n fontSize: theme.font.sizes.sm,\n fontWeight: theme.font.weights.medium,\n justifyContent: 'center',\n letterSpacing: '0.01px',\n lineHeight: '17px',\n marginLeft: '16px',\n marginRight: '16px',\n maxWidth: '100%',\n padding: '2px',\n textAlign: 'left',\n textDecoration: 'none',\n textTransform: 'none',\n },\n\n menuIcon: {\n color: theme.palette.grey.light,\n height: '52px',\n padding: '2px',\n },\n\n divSignatureMain: {\n },\n\n divSignature: {\n width: '100%',\n },\n\n divLogoTitle: {\n display: 'inline-block',\n },\n\n divMain: {\n marginLeft: '19px',\n },\n\n imgLogo: {\n display: 'inline-block',\n },\n\n divContentLogo: {\n textAlign: 'right',\n width: '70px',\n },\n\n divLogos: {\n marginRight: '16px',\n textAlign: 'end',\n [theme.breakpoints.down(700)]: {\n marginRight: '2px',\n },\n },\n\n logo: {\n display: 'inline-block',\n height: '24px',\n marginLeft: '16px',\n marginTop: '11px',\n width: '24px',\n },\n\n logoTitle: {\n color: theme.palette.grey.light,\n fontFamily: 'Roboto, sans-serif',\n letterSpacing: '0.01px',\n marginLeft: '4px',\n opacity: 1,\n textAlign: 'left',\n [theme.breakpoints.down(700)]: {\n display: 'table-caption',\n },\n },\n\n divFirstLine: {\n width: 'max-content',\n [theme.breakpoints.down(700)]: {\n width: '400px',\n },\n },\n\n divBillButton: {\n borderRadius: '2px',\n color: theme.color.tundora,\n display: 'inline-block',\n fontFamily: 'Roboto, sans-serif',\n height: '24px',\n letterSpacing: '0.01px',\n marginLeft: '12px',\n opacity: 1,\n [theme.breakpoints.down(700)]: {\n marginLeft: '0px',\n marginTop: '8px',\n },\n },\n\n divBillButtonTrial: {\n [theme.breakpoints.down(700)]: {\n marginLeft: '4px',\n marginTop: '24px',\n },\n },\n\n divDueDate: {\n backgroundColor: theme.color.mystic,\n borderRadius: '2px',\n color: theme.color.tundora,\n display: 'inline-block',\n fontFamily: 'Roboto, sans-serif',\n height: '24px',\n letterSpacing: '0.01px',\n marginLeft: '12px',\n opacity: 1,\n padding: '4px 8px 4px 8px',\n },\n\n almostCanceladDiv: {\n background: theme.color.white,\n border: `1px solid ${theme.color.valencia}`,\n borderRadius: '2px',\n color: theme.color.valencia,\n display: 'inline-block',\n fontFamily: 'Roboto, sans-serif',\n fontSize: theme.font.sizes.xxs,\n fontWeight: theme.font.weights.regular,\n height: '24px',\n letterSpacing: '0.01px',\n lineHeight: '14px',\n marginLeft: '12px',\n opacity: '0.9',\n padding: '3px 8px 4px 8px',\n textAlign: 'left',\n [theme.breakpoints.down(700)]: {\n marginLeft: '12px',\n marginTop: '12px',\n },\n },\n\n\n proEmailStatus: {\n borderRadius: '2px',\n color: theme.color.white,\n display: 'inline-block',\n fontFamily: 'Roboto, sans-serif',\n fontSize: theme.font.sizes.xxs,\n fontWeight: theme.font.weights.regular,\n height: '24px',\n letterSpacing: '0.01px',\n lineHeight: '14px',\n marginLeft: '12px',\n opacity: 1,\n padding: '4px 8px 4px 8px',\n [theme.breakpoints.down(700)]: {\n marginLeft: '4px',\n marginTop: '20px',\n },\n },\n\n simpleTitle: {\n color: theme.palette.grey.light,\n fontFamily: 'Roboto, sans-serif',\n fontSize: theme.font.sizes.xxs,\n letterSpacing: '0.01px',\n opacity: 1,\n textAlign: 'left',\n [theme.breakpoints.down(700)]: {\n paddingLeft: '4px',\n },\n },\n\n activeProEmailStatusNew: { backgroundColor: theme.color.oceanGreen },\n pendingProEmailStatusNew: { backgroundColor: theme.color.coral },\n provisioningProEmailStatusNew: { backgroundColor: theme.color.coral },\n provisioningProEmailStatus: { backgroundColor: theme.color.brightSun },\n uponDueDateProEmailStatus: { backgroundColor: theme.color.brightSun },\n suspendedProEmailStatusNew: { backgroundColor: theme.color.valencia },\n terminatedProEmailStatusNew: { backgroundColor: theme.color.geyser },\n expiredProEmailStatusNew: { backgroundColor: theme.color.geyser },\n nullProEmailStatus: { backgroundColor: theme.color.coral },\n almostCanceladCardStatus: { backgroundColor: theme.color.valencia },\n\n proEmaiPlan: {\n color: theme.color.tundora,\n display: 'inline-block',\n fontFamily: 'Roboto',\n fontSize: '16px',\n fontWeight: theme.font.weights.medium,\n letterSpacing: '0.01px',\n lineHeight: '19px',\n opacity: 1,\n position: 'relative',\n textAlign: 'left',\n top: '4px',\n [theme.breakpoints.down(700)]: {\n paddingLeft: '4px',\n width: '100%',\n },\n\n },\n\n\n});\n\nexport default styles;\n","import { COUNTRY } from '@/config';\n\nexport const PLANO_P = COUNTRY === 'br' ? 5 : 174;\nexport const PLANO_M = COUNTRY === 'br' ? 6 : 5;\nexport const PLANO_BUSINESS = COUNTRY === 'br' ? 7 : 6;\nexport const HOSPEDAGEM_COLABORADORES = 247;\n","import {\n Button, Tooltip, Typography, withStyles,\n} from '@material-ui/core';\nimport React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Trans, withI18n } from 'react-i18next';\nimport classnames from 'classnames';\nimport { differenceInCalendarDays, parseISO } from 'date-fns';\nimport { Warning } from '@material-ui/icons';\nimport { useDispatch } from 'react-redux';\nimport { formatDate } from '@/utils/Formatters/formatDate';\nimport IconTitan from '@/media/icons/logoTitan.svg';\nimport IconCpanel from '@/media/icons/logoCpanel.svg';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport ModalReactivateAutomaticSubscription from '@/components/Modal/ModalReactivateAutomaticSubscription';\nimport { emailsActions } from '@/redux/modules/emails';\nimport { isBRServer, isMobile } from '@/utils/Validators/validation';\nimport { TRIAL_PLAN } from '@/components/Email/TitanUpgrade/TitanUpgradePlanItem/TitanPlans';\nimport { HOSPEDAGEM_COLABORADORES } from '@/components/Products/HgProducts';\n\nimport styles from './styles';\n\nconst ProEmailPlan = ({\n classes, proEmail, t, almostOverdue, almostExcluded, isAutomaticRenovationDisabled, daysTrial,\n}) => {\n const dispatch = useDispatch();\n const isTrialPlan = proEmail.billingcycle === 'Free Account' && proEmail.packageid === TRIAL_PLAN;\n const reactivateCPanelEnabled = true;\n const [modalReactivation, setModalReactivation] = useState(false);\n const [isAutomaticRenovation, setIsAutomaticRenovation] = useState(isAutomaticRenovationDisabled);\n const daysToDueDate = 10;\n const diferenceBetweenDays = differenceInCalendarDays(parseISO(proEmail.nextduedate), new Date());\n const isToDueDateNotTrial = proEmail.nextduedate != null ? diferenceBetweenDays <= daysToDueDate && ['active', 'suspended'].includes(proEmail.status) : false;\n const maxDaysToNextDueDateTrial = 10;\n const minDaysToNextDueDateTrial = 0;\n const minDaysToOverDueDateTrial = -10;\n\n const isNextDueDate = isTrialPlan ? daysTrial <= maxDaysToNextDueDateTrial && daysTrial > minDaysToNextDueDateTrial && proEmail.status !== 'terminated' : isToDueDateNotTrial;\n const toleranceDays = isBRServer ? 11 : 8;\n const suspendedToleranceDays = isBRServer ? 20 : 23;\n const planStatusWithReactiveCpanel = proEmail.plan ? t(`proEmail.${proEmail.status}CardStatusNew`) : t('proEmail.noPlan');\n const planStatusWithOutReactiveCpanel = proEmail.plan ? t(`proEmail.${proEmail.status}CardStatusNew`) : t('proEmail.noPlan');\n const planStatusMessage = reactivateCPanelEnabled ? planStatusWithReactiveCpanel : planStatusWithOutReactiveCpanel;\n const isCPanelFreePending = proEmail.type === 'cpanel' && proEmail.status === 'pending';\n const dateDiff = proEmail.nextduedate ? diferenceBetweenDays : 0;\n const daysToCalcateSuspedendDate = isBRServer ? 11 : 8;\n const displayCardInfoTrialActive = daysTrial > maxDaysToNextDueDateTrial && proEmail.status === 'active' && isTrialPlan;\n\n\n const isAlmostExcluded = almostOverdue && !almostExcluded && !isTrialPlan;\n const displayDueDate = proEmail.packageid !== HOSPEDAGEM_COLABORADORES && !isTrialPlan && proEmail.status !== 'pending' && proEmail.status !== 'suspended' && !almostOverdue && !almostExcluded;\n const displayTrialInfoStatusActive = isTrialPlan && daysTrial <= maxDaysToNextDueDateTrial && daysTrial > minDaysToNextDueDateTrial && proEmail.status !== 'terminated';\n const displayTrialInfoStatusOverDueDate = isTrialPlan && daysTrial <= minDaysToNextDueDateTrial && daysTrial >= minDaysToOverDueDateTrial && proEmail.status !== 'terminated';\n const displayBillButton = isNextDueDate || proEmail.status === 'expired' || proEmail.status === 'suspended' || almostOverdue;\n\n const mountPlanStatusMessage = () => {\n let message = planStatusMessage;\n const isTrial = proEmail.packageid === TRIAL_PLAN;\n\n if (!isTrial && proEmail.status.toLowerCase() === 'provisioning') {\n message = t('proEmail.pendingCardStatusNew');\n }\n\n if (isTrial && proEmail.status.toLowerCase() === 'pending') {\n message = t('proEmail.provisioningCardStatusNew');\n }\n\n return message;\n };\n\n\n const planStatusInfo = () => {\n let planStatusBase = '';\n const isTrial = proEmail.packageid === TRIAL_PLAN;\n\n if (proEmail.plan && proEmail.status !== 'active') {\n if (isTrial && (proEmail.status.toLowerCase() === 'pending' || proEmail.status.toLowerCase() === 'provisioning')) {\n planStatusBase = t('proEmail.provisioningCardStatusInfo');\n } else if (!isTrial && (proEmail.status.toLowerCase() === 'pending' || proEmail.status.toLowerCase() === 'provisioning')) {\n planStatusBase = t('proEmail.pendingCardStatusInfo');\n } else {\n planStatusBase = t(`proEmail.${proEmail.status}CardStatusInfo`);\n }\n }\n\n if (isNextDueDate) {\n return isTrialPlan ? t('proEmail.uponDueDateTrialCardStatusInfo') : t('proEmail.uponDueDateCardStatusInfo');\n }\n return planStatusBase;\n };\n\n const showPlanStatus = (plan) => {\n if ((proEmail.plan === 'free' && proEmail.hosting_plan) || proEmail.type === 'cpanel') {\n return proEmail.hosting_plan;\n }\n return plan ? proEmail.plan : ` - ${t('proEmail.type.titan')}`;\n };\n\n\n const produtctName = showPlanStatus(proEmail.plan);\n const handleOpen = async () => {\n setModalReactivation(true);\n };\n\n const callBackFunction = () => {\n setIsAutomaticRenovation(true);\n };\n\n const handleActivateSubscription = () => {\n const serviceType = 'hosting';\n const email = {\n type: serviceType,\n id: proEmail.hosting_id,\n productname: `${produtctName} - ${proEmail.domain}`,\n };\n dispatch(emailsActions.emails.activateRenewal.request(email, callBackFunction));\n };\n\n const toolTipBillButton = () => {\n if (isNextDueDate && !almostOverdue) {\n return t('proEmail.uponDueDateCardStatusInfo');\n }\n if (isTrialPlan && almostOverdue) {\n return t('proEmail.suspendedCardStatusInfo');\n }\n if (almostExcluded) {\n return t('proEmail.suspendedCardStatusInfo');\n }\n return t('proEmail.expiredCardStatusInfo');\n };\n\n\n return (\n <>\n setModalReactivation(false)}\n open={modalReactivation}\n handleActivateSubscription={handleActivateSubscription}\n classes={classes}\n domain=\"domain\"\n />\n {!isMobile && (\n \n
\n {t('proEmail.subscriptionsLabel')}\n \n
\n {showPlanStatus('plan')}\n \n\n\n {!isNextDueDate && !almostOverdue && (\n
\n \n {mountPlanStatusMessage()}\n \n \n {t('proEmail.toDueDateCardStatus')}\n \n \n )}\n {(almostOverdue || almostExcluded) && (\n \n \n {almostExcluded ? t('proEmail.suspendedCardStatusNew') : t('proEmail.expiredCardStatusNew')}\n \n \n\n )}\n {isAlmostExcluded && (\n \n \n
\n \n 0 \n <>1\n <>2\n \n \n ) }\n\n { displayDueDate && (\n <>\n \n {proEmail.status !== null && proEmail.status !== 'terminated' && (\n
\n \n\n \n {!isAutomaticRenovation && proEmail.status === 'active' && !isNextDueDate && (\n \n
\n )}\n {`${t('proEmail.dueDate')}: ${proEmail.nextduedate === '0000-00-00' ? '-' : formatDate(proEmail.nextduedate)}`}\n \n \n \n {`${t('proEmail.terminatedDate')}: ${proEmail.termination_date === '0000-00-00' ? '-' : formatDate(proEmail.termination_date)}`}\n \n \n )}\n\n \n \n )}\n { (proEmail.status === 'suspended' || almostExcluded) && (\n \n \n
\n \n 0 \n <>{{ amount: suspendedToleranceDays + daysToCalcateSuspedendDate + dateDiff }}\n <>2\n \n \n )}\n\n { displayCardInfoTrialActive && (\n \n \n <>0\n <>1\n \n \n )}\n\n { displayTrialInfoStatusActive && (\n \n \n
\n \n <>{{ amount: daysTrial }}\n <>1\n \n \n )}\n\n {displayTrialInfoStatusOverDueDate && (\n \n \n
\n \n <>0\n <>1\n \n \n )}\n { isTrialPlan && proEmail.status === 'terminated' && (\n \n \n {t('proEmail.trialCardStatusTerminated')}\n \n \n )}\n\n\n { proEmail.status !== 'pending' && (\n <>\n {displayBillButton && (\n \n \n \n {t('proEmail.billButton')}\n \n \n
\n )}\n \n )}\n {!isAutomaticRenovation && proEmail.status === 'active' && !isNextDueDate && (\n \n {t('proEmail.renovationButton')}\n \n )}\n\n \n )}\n {isMobile && (\n \n
\n
\n \n {t('proEmail.subscriptionsLabel')}\n \n \n {showPlanStatus('plan')}\n \n
\n
\n {proEmail.configured && !isCPanelFreePending && (\n <>\n
\n
\n
\n
\n \n {proEmail.type === 'cpanel' ? t('proEmail.cPanelLabel') : t('proEmail.titanLabel')}\n \n
\n \n )}\n {!proEmail.configured && (\n <>\n
\n \n
\n \n )}\n
\n\n
\n {!isNextDueDate && !almostOverdue && (\n
\n {planStatusMessage}\n \n {almostExcluded ? t('proEmail.suspendedCardStatusNew') : t('proEmail.expiredCardStatusNew')}\n \n )}\n\n {isNextDueDate && !almostOverdue && (\n \n {t('proEmail.toDueDateCardStatus')}\n \n )}\n\n {isAlmostExcluded && (\n \n \n
\n \n 0 \n <>1\n <>2\n \n \n )}\n { (proEmail.status === 'suspended' || almostExcluded) && (\n \n
\n
\n
\n 0 \n <>{{ amount: suspendedToleranceDays + daysToCalcateSuspedendDate + dateDiff }}\n <>2\n \n
\n \n <>{{ amount: daysTrial }}\n <>1\n \n \n )}\n\n { displayTrialInfoStatusActive && (\n \n \n
\n \n <>{{ amount: daysTrial }}\n <>1\n \n \n )}\n\n {displayTrialInfoStatusOverDueDate && (\n \n \n
\n \n <>0\n <>1\n \n \n )}\n { isTrialPlan && proEmail.status === 'terminated' && (\n \n \n {t('proEmail.trialCardStatusTerminated')}\n \n \n )}\n { displayDueDate && (\n \n {proEmail.status !== null && proEmail.status !== 'terminated' && (\n
\n
\n {!isAutomaticRenovation && (\n \n
\n )}\n {`${t('proEmail.dueDate')}: ${proEmail.nextduedate === '0000-00-00' ? '-' : formatDate(proEmail.nextduedate)}`}\n \n
\n )}\n {proEmail.status === 'terminated' && (\n
\n \n {`${t('proEmail.terminatedDate')}: ${proEmail.termination_date === '0000-00-00' ? '-' : formatDate(proEmail.termination_date)}`}\n \n
\n )}\n
\n \n {t('proEmail.billButton')}\n \n
\n\n )}\n\n {!isAutomaticRenovation && proEmail.status === 'active' && !isNextDueDate && (\n \n \n {t('proEmail.renovationButton')}\n \n
\n )}\n\n \n )}\n \n );\n};\n\nProEmailPlan.propTypes = {\n proEmail: PropTypes.object.isRequired,\n};\n\nexport default withI18n()(withStyles(styles)(ProEmailPlan));\n","import { withStyles } from '@material-ui/core';\nimport React, { } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport { withI18n } from 'react-i18next';\nimport styles from './styles';\nimport ProEmailPlan from './ProEmailPlan';\n\nconst CardStatus = ({\n classes, proEmail, almostOverdue, dateDiff, almostExcluded, isAutomaticRenovationDisabled, daysTrial,\n}) => {\n const plans = ['null', 'pending', 'provisioning', 'suspended', 'terminated', 'expired'];\n\n const isConfiguredAccounts = proEmail.configured ? proEmail.configured : plans.includes(proEmail.status.toLowerCase());\n\n\n return (\n \n );\n};\n\nCardStatus.propTypes = {\n proEmail: PropTypes.object.isRequired,\n};\n\nexport default withI18n()(withStyles(styles)(CardStatus));\n","import {\n Button, IconButton, withStyles, Menu, MenuItem,\n} from '@material-ui/core';\nimport React, { useState } from 'react';\n\nimport { withI18n } from 'react-i18next';\nimport { MoreVert } from '@material-ui/icons';\nimport { useDispatch } from 'react-redux';\nimport { useHistory } from 'react-router';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport * as actions from '@/redux/actions/emails';\nimport ModalSelectionHostingPlans from '@/components/Modal/ModalSelectionHostingPlans';\nimport ModalCheckDomainAvailable from '@/components/Modal/ModalCheckDomainAvailable';\n\nimport styles from './styles';\n\nconst ProEmailMenuMobilePlans = ({\n t, classes, proEmail, isProEmailInactive, isConfiguredAccounts, domain, almostExcluded, almostOverdue, isTrialPlan, shouldSetService, type,\n customerEmail,\n}) => {\n const hasPlan = proEmail !== undefined && proEmail.plan !== undefined;\n const dispatch = useDispatch();\n\n const shouldRenderCreateFirstAccountButton = false;\n\n const idProEmail = proEmail !== undefined && proEmail.id !== undefined ? proEmail.id : undefined;\n\n const [modalCheckDomainAvailable, setModalCheckDomainAvailable] = useState(false);\n const [modalSelectionHostingPlans, setModalSelectionHostingPlans] = useState(false);\n const [hostings] = useState(new Map());\n const [anchorEl, setAnchorEl] = useState(null);\n const open = Boolean(anchorEl);\n const history = useHistory();\n\n const handleClick = (event) => {\n setAnchorEl(event.currentTarget);\n };\n const handleClose = () => {\n setAnchorEl(null);\n };\n\n const displayManagerButton = !almostExcluded && hasPlan && !isProEmailInactive && isConfiguredAccounts\n && ((isTrialPlan && !almostOverdue) || (!isTrialPlan && almostOverdue) || (proEmail.status === 'active' && !almostOverdue));\n\n const handleOpen = () => {\n dispatch(actions.requestCheckDomainAvailable(domain)).then((responseData) => {\n if (responseData.data.available) {\n setModalCheckDomainAvailable(true);\n } else {\n dispatch(actions.requestProEmailHostingPlans(domain)).then(() => {\n history.push(`${t('routes.emailsList')}${t('routes.titanHirePlanActiveCPanel')}/${domain}?idPro=${idProEmail}&service=${type}`);\n });\n }\n });\n };\n\n const handleCreateEmailClick = async () => {\n const dataToFilter = type === 'proemail' ? `idPro=${idProEmail}` : `cust=${customerEmail}`;\n\n return history.push(`${t('routes.emailsList')}${t('routes.titanHirePlanActiveCPanel')}/${domain}?${dataToFilter}&service=${type}`);\n };\n\n return (\n <>\n setModalSelectionHostingPlans(false)}\n open={modalSelectionHostingPlans}\n classes={classes}\n domain={domain}\n hostings={hostings}\n />\n\n setModalCheckDomainAvailable(false)}\n open={modalCheckDomainAvailable}\n classes={classes}\n domain={domain}\n />\n\n \n \n
\n \n );\n};\n\n\nexport default withI18n()(withStyles(styles)(ProEmailMenuMobilePlans));\n","const styles = theme => ({\n\n manageLinkButtonDisabled: {\n color: theme.palette.grey.light,\n display: 'block',\n fontSize: '14px',\n fontWeight: '500',\n margin: 0,\n textAlign: 'right',\n textDecoration: 'none',\n textTransform: 'uppercase',\n transition: 'color 0.2s',\n\n },\n\n btActive: {\n alignItems: 'center',\n background: theme.color.indigo,\n borderRadius: '2px',\n color: theme.color.white,\n fontFamily: 'Roboto',\n fontSize: '14px',\n fontWeight: '500',\n height: '40px',\n justifyContent: 'center',\n letterSpacing: '0.01px',\n paddingLeft: '16px',\n paddingRight: '16px',\n textDecoration: 'none',\n textTransform: 'uppercase',\n\n '&:hover': {\n\n backgroundColor: theme.color.chambray,\n border: `1px solid ${theme.color.chambray}`,\n borderRadius: '2px',\n color: theme.color.white,\n },\n },\n\n proEmailItem: {\n alignItems: 'flex-start',\n alignSelf: 'center',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'flex-start',\n minWidth: '195px',\n\n [theme.breakpoints.down(1285)]: {\n marginBottom: '24px',\n minWidth: 'unset',\n width: '100',\n },\n },\n\n proEmailItemAccountUsed: {\n marginLeft: 'auto',\n paddingRight: 48,\n\n [theme.breakpoints.down(1285)]: {\n minWidth: '195px',\n },\n\n [theme.breakpoints.down(745)]: {\n marginLeft: 'unset',\n },\n\n [theme.breakpoints.down(443)]: {\n maxWidth: '64%',\n minWidth: 'unset',\n },\n },\n\n proEmailExpiringDate: {\n minWidth: '183px',\n\n [theme.breakpoints.down(1285)]: {\n minWidth: '195px',\n },\n\n [theme.breakpoints.down(443)]: {\n maxWidth: '64%',\n minWidth: 'unset',\n paddingRight: 0,\n },\n },\n\n proEmailItemTitle: {\n color: theme.color.regentGray,\n fontSize: '12px',\n fontWeight: 400,\n letterSpacing: '0.01px',\n lineHeight: '14px',\n marginBottom: '5px',\n },\n\n proEmailItemPlan: {\n color: theme.color.tundora,\n fontSize: '14px',\n fontWeight: 400,\n letterSpacing: '0.01px',\n lineHeight: '17px',\n },\n\n proEmailActions: {\n alignSelf: 'center',\n\n [theme.breakpoints.down(1285)]: {\n width: '100%',\n },\n },\n\n manageLinkButton: {\n color: theme.color.indigo,\n display: 'block',\n fontSize: '14px',\n fontWeight: '500',\n margin: 0,\n textAlign: 'right',\n textDecoration: 'none',\n textTransform: 'uppercase',\n transition: 'color 0.2s',\n\n '&:hover': {\n color: theme.color.chambray,\n textDecoration: 'underline',\n },\n },\n\n activeBlock: {\n display: 'inline-block',\n },\n\n activeBlockLink: {\n display: 'inline-block',\n minWidth: '241px',\n },\n});\n\nexport default styles;\n","import { Button, Typography, withStyles } from '@material-ui/core';\nimport React from 'react';\nimport { useHistory } from 'react-router-dom';\nimport PropTypes from 'prop-types';\nimport { withI18n } from 'react-i18next';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport styles from './styles';\n\nconst ActiveBlock = ({\n classes, t,\n proEmail,\n domain,\n isConfiguredAccounts,\n isProEmailInactive,\n almostExcluded,\n almostOverdue,\n isTrialPlan,\n shouldSetService,\n type,\n customerEmail,\n}) => {\n const history = useHistory();\n const hasPlan = proEmail !== undefined && proEmail.plan !== undefined;\n const idProEmail = proEmail !== undefined && proEmail.id !== undefined ? proEmail.id : undefined;\n\n const displayManagerButton = !almostExcluded && hasPlan && !isProEmailInactive && isConfiguredAccounts\n && ((isTrialPlan && !almostOverdue) || (!isTrialPlan && almostOverdue) || (proEmail.status === 'active' && !almostOverdue));\n\n const onClick = async () => {\n const dataToFilter = type === 'proemail' ? `idPro=${idProEmail}` : `cust=${customerEmail}`;\n\n return history.push(`${t('routes.emailsList')}${t('routes.titanHirePlanActiveCPanel')}/${domain}?${dataToFilter}&service=${type}`);\n };\n return (\n \n
\n {!shouldSetService && displayManagerButton && (\n \n {t('proEmail.managerEmail')}\n \n )}\n {((!almostExcluded && !isConfiguredAccounts) || shouldSetService) && (\n \n {shouldSetService || (!isConfiguredAccounts) ? t('proEmail.createEmail') : t('proEmail.getPlanLink') }\n \n )}\n\n {!shouldSetService && (almostExcluded || (isTrialPlan && almostOverdue)) && (\n\n \n {t('proEmail.managerEmail')}\n \n\n )}\n\n \n \n
\n \n {(!isCPanelFreePending) && (\n\n
\n \n
\n
\n
\n
\n \n {proEmail.type === 'cpanel' ? t('proEmail.cPanelLabel') : t('proEmail.titanLabel')}\n \n
\n
\n
\n \n \n \n {t('proEmail.domainLabel')}\n \n {t('proEmail.mailBox')} \n \n \n \n\n \n {listEmailDomains && listEmailDomains.map(proEmailTmp => (\n \n \n \n {`@ ${proEmailTmp.domain}`}\n \n \n \n\n {handlerIsConfigured(proEmailTmp) && (\n \n {displayNumberAccountsUsed(proEmailTmp)\n && (shouldRenderCreateFirstAccountButton || !shouldSetService(proEmailTmp))\n && (\n \n {proEmailTmp.plan === 'free' || proEmailTmp.type === 'cpanel' || proEmail.packageid === TRIAL_PLAN\n ? proEmailTmp.used_accounts\n : `${proEmailTmp.used_accounts}/${proEmailTmp.total_accounts} `}\n\n {(shouldRenderCreateFirstAccountButton || !shouldSetService(proEmailTmp))\n && displayButtonCreateFirstAccount(proEmailTmp)\n && (\n \n {t('proEmail.createFirstAccount')}\n \n )}\n \n )}\n\n { (notDisplayNumberAccountsUsed(proEmailTmp)\n || !(shouldRenderCreateFirstAccountButton || !shouldSetService(proEmailTmp)))\n && (\n \n {isStartPlan ? '0 / 3' : '-'}\n \n )}\n \n {isStartPlan ? '0 / 3' : '-'}\n \n )}\n\n \n {!isMobile && (\n \n\n {isProEmailInactive\n && (\n \n )}\n\n {isMobile && (\n \n {proEmailTmp.status !== 'pending'\n && proEmailTmp.status !== 'suspended'\n && ((isTrialPlan && !almostOverdue) || (!isTrialPlan && almostOverdue) || (proEmail.status === 'active' && !almostOverdue)) && (\n \n )}\n \n ))}\n \n \n \n \n \n );\n};\n\nProEmailCard.propTypes = {\n proEmail: PropTypes.object.isRequired,\n};\n\nexport default withI18n()(withStyles(styles)(ProEmailCard));\n","import styled, { css } from 'styled-components';\n\nimport { ArrowBack } from '@material-ui/icons';\nimport { TextField, Typography } from '@material-ui/core';\n\nimport { color } from '@/styles/HgThemeProvider';\n\nimport PasswordField from '@/components/Fields/PasswordField';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\n\nexport const iconColor = color.oceanGreen;\n\nexport const WrapperContent = styled.div`\n max-width: 800px;\n padding: 40px 24px 0;\n`;\n\nexport const Header = styled.div`\n ${({ theme }) => css`\n border-bottom: 1px solid ${theme.palette.grey.light};\n display: grid;\n gap: 10px;\n grid-template-columns: 24px 1fr;\n padding: 0 0 24px;\n margin-bottom: 20px;\n\n @media (max-width: 542px) {\n gap: 6px;\n margin-top: 32px;\n\n }\n\n button{\n padding-left: 0px;\n margin-left: -4px;\n }\n `}\n`;\n\nexport const BackButton = styled.button`\n background-color: transparent;\n border: none;\n cursor: pointer;\n height: 24px;\n`;\n\nexport const ArrowBackIcon = styled(ArrowBack)`\n ${({ theme }) => css`\n color: ${theme.palette.primary.main};\n `}\n`;\n\nexport const WrapperChip = styled.div`\n ${() => css`\n margin-bottom: 20px;\n `}\n`;\n\n\nexport const WrapperTextsHeader = styled.div``;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n display: flex;\n font-size: 24px;\n font-weight: 400;\n letter-spacing: 0.01px;\n margin: 0px;\n word-wrap: anywhere;\n\n @media (max-width: 542px) {\n display: flow-root;\n }\n\n >div{\n font-family: ${theme.font.family.secondary};\n height: fit-content;\n margin: 0px 0px 0px 16px;\n width: fit-content;\n @media (max-width: 542px) {\n margin: 8px 0px 0px 0px;\n }\n }\n `}\n`;\n\nexport const TagPeriod = styled.span`\n ${({ theme }) => css`\n background-color: ${`${theme.palette.grey.primary}66`};\n color: ${theme.palette.success.primary};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.bold};\n letter-spacing: 0.01px;\n padding: 6px;\n text-transform: uppercase;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n display: inline-block;\n font-size: 15px;\n margin-left: 0;\n margin-bottom: 16px;\n }\n `}\n`;\n\nexport const Content = styled.div``;\n\nexport const DescriptionProduct = styled.p`\n ${({ theme }) => css`\n color: ${theme.color.tundora};\n font-size: ${theme.font.sizes.md};\n font-family: ${theme.font.family.secondary};\n font-weight: 400;\n letter-spacing: 0.01px;\n line-height: 24px;\n `}\n`;\n\nexport const Form = styled.form``;\n\nexport const WrapperForm = styled.div`\n ${() => css`\n padding: 8px 24px 20px 24px;\n >img{\n position: fixed;\n }\n `}\n`;\n\nexport const Fieldset = styled.fieldset`\n border: none;\n margin: 0;\n padding: 0;\n\n & + & {\n margin-top: 16px;\n }\n`;\n\nconst overrideTextField = css`\n ${({ theme }) => css`\n background-color: #fff;\n color: ${theme.palette.grey.dark};\n height: 40px;\n margin: 0;\n width: 100%;\n\n /* .MuiOutlinedInput-input- { */\n #override-input-style {\n margin: 0;\n padding: 10px;\n width: 100%;\n }\n\n & fieldset {\n border-radius: 0;\n height: 45px;\n }\n `}\n`;\n\nexport const Label = styled(Typography)`\n ${({ theme, hideWhenDesktop }) => css`\n color: ${theme.palette.grey.dark};\n font-size: 14px;\n margin: 0 0 8px 8px;\n\n @media (min-width: ${theme.breakpoints.sm}) {\n ${hideWhenDesktop && css`\n opacity: 0;\n `}\n }\n `}\n`;\n\nexport const PasswordFieldStyled = styled(PasswordField)`\n ${overrideTextField}\n`;\n\n\nexport const TextFieldStyled = styled(TextField)`\n ${overrideTextField}\n`;\n\nexport const Row = styled.div`\n ${({ theme, changeViewWhenMobile }) => css`\n display: grid;\n grid-template-columns: 1fr 1fr;\n padding: 0 120px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n padding: 0;\n\n ${changeViewWhenMobile && css`\n gap: 16px;\n grid-template-columns: 1fr;\n `}\n }\n `}\n`;\n\n\nexport const ShowDomain = styled.div`\n ${({ theme }) => css`\n background-color: #EBEFF3;\n border: 1px solid #CDD8DF;\n color: ${theme.palette.grey.dark};\n height: 40px;\n letter-spacing: 0.01px;\n overflow: hidden;\n padding: 10px;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 240px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n max-width: 150px;\n }\n `}\n`;\n\nexport const PrimaryButtonStyled = styled(PrimaryButton)`\n ${({ theme }) => css`\n height: 40px;\n\n @media (min-width: ${theme.breakpoints.sm}) {\n width: 100%;\n }\n `}\n`;\n\nexport const PasswordFieldWrapper = styled.div`\n ${({ theme }) => css`\n position: relative;\n .error {\n bottom: -20px;\n color: ${theme.palette.error.main};\n font-size: 12px;\n left: 4px;\n position: absolute;\n width: 100%;\n }\n `}\n`;\n\nexport const WrapperButton = styled.div`\n ${({ theme }) => css`\n align-items: flex-end;\n display: flex;\n margin-left: 16px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n justify-content: center;\n margin: 0;\n }\n `}\n`;\n","import { locale } from '@/utils/locale';\n\nexport const trialActiveLocale = {\n title: locale('modalTitanTrialHirePlan.title'),\n description: locale('modalTitanTrialHirePlan.description'),\n tagOfTrialTime: locale('modalTitanTrialHirePlan.tagOfTrialTime'),\n productDescription: {\n 1: locale('modalTitanTrialHirePlan.productDescription.1'),\n 2: locale('modalTitanTrialHirePlan.productDescription.2'),\n 3: locale('modalTitanTrialHirePlan.productDescription.3'),\n 4: locale('modalTitanTrialHirePlan.productDescription.4'),\n },\n titleForm: locale('modalTitanTrialHirePlan.titleForm'),\n};\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-flex;\n`;\n\nexport const Mark = styled.mark`\n ${({\n theme, variant, color, textColor, weight,\n }) => {\n const variants = {\n default: {\n color: theme.palette.green.dark,\n fontSize: theme.font.sizes.md,\n fontWeight: theme.font.weights.medium,\n textColor: theme.palette.grey.ultradark,\n },\n sunLight: {\n color: theme.palette.yellow.light,\n fontSize: theme.font.sizes.sm,\n fontWeight: theme.font.weights.medium,\n textColor: theme.palette.grey.ultradark,\n },\n green: {\n color: theme.palette.green.main,\n fontSize: theme.font.sizes.md,\n fontWeight: theme.font.weights.medium,\n textColor: theme.palette.grey.ultradark,\n },\n\n };\n const fontWeight = theme.font.weights[weight];\n\n return css`\n background: ${theme.palette.white.light} 0% 0% no-repeat padding-box;\n border-bottom: 4px solid ${color || variants[variant].color};\n border-left:none;\n border-right:none;\n border-top:none;\n color:${textColor || variants[variant].textColor};\n display: inline-flex;\n font-family: ${theme.font.family.secondary};\n font-size:${variants[variant].fontSize};\n font-weight:${fontWeight};\n opacity: 1;\n text-align:left;\n `;\n }}\n`;\n","import React from 'react';\nimport * as Styles from './Mark.styles';\n\nconst FeaturedLabel = ({\n onClick,\n testId = 'mark-label',\n text = 'Title Sample',\n variant = 'default',\n textColor = '',\n color = '',\n weight = 'regular',\n\n}) => {\n const handleOnClick = () => (\n onClick && onClick()\n );\n return (\n \n {text}\n \n );\n};\n\nexport default FeaturedLabel;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Modal } from '@/pages/common/Modal';\nimport * as Styles from './ModalTitanTrialColorful.styles';\nimport ProEmailActiveTrial from '../ProEmail/ProEmailsNewList/ProEmailActiveTrial';\nimport { trialActiveLocale } from './ModalTitanTrialColorful.locale';\nimport { Mark } from '@/pages/common/v1/Mark';\nimport { Chip } from '@/pages/common/v1/Chip';\n\nconst ModalTitanTrialColorful = ({\n isOpen,\n onClose,\n selectedDomain,\n essentialData,\n offerContext,\n location,\n isEnabledByURLParam = false,\n}) => {\n const [submittedOut, setSubmittedOut] = useState(isOpen);\n\n return (\n isOpen && (\n \n \n \n \n \n \n \n {trialActiveLocale.title}\n \n \n \n \n \n {trialActiveLocale.productDescription[1]}\n {essentialData.name} \n {trialActiveLocale.productDescription[2]}\n \n \n {trialActiveLocale.productDescription[3]}\n \n \n \n \n \n \n )\n );\n};\n\n\nModalTitanTrialColorful.propTypes = {\n isOpen: PropTypes.bool,\n onClose: PropTypes.func.isRequired,\n selectedDomain: PropTypes.shape({\n id: PropTypes.string,\n domain: PropTypes.string,\n }).isRequired,\n essentialData: PropTypes.shape({\n name: PropTypes.string,\n price: PropTypes.string,\n }).isRequired,\n};\n\n\nexport default ModalTitanTrialColorful;\n","import styled, { css } from 'styled-components';\n\nexport const WrapperBannerTrial = styled.div`\n ${({ theme }) => css`\n\n @media (min-width: ${theme.breakpoints.md}) {\n margin-top: 32px;\n }\n `}\n`;\n\n\nconst styles = theme => ({\n\n info: {\n fill: theme.color.indigo,\n height: '16px',\n },\n\n toolTip: {\n marginLeft: '2px',\n },\n\n loadingMoreButton: {\n alignItems: 'center',\n backgroundColor: theme.color.white,\n border: `1px solid ${theme.color.indigo}`,\n borderRadius: '2px',\n boxShadow: '0px 0px 0px 0px ',\n color: theme.color.indigo,\n display: 'flex',\n fontSize: '14px',\n fontWeight: '500',\n height: '43px',\n justifyContent: 'center',\n letterSpacing: '0.01px',\n lineHeight: '17px',\n marginTop: '32px',\n maxWidth: '300px',\n textDecoration: 'none',\n textTransform: 'uppercase',\n transition: '300ms',\n width: '161px',\n '&:hover': {\n backgroundColor: theme.color.indigo,\n border: `1px solid ${theme.color.regentGray}`,\n color: theme.color.white,\n },\n },\n\n loadingMoreButtonDisabled: {\n alignItems: 'center',\n backgroundColor: theme.color.mystic,\n border: `1px solid ${theme.color.regentGray}`,\n borderRadius: '2px',\n boxShadow: '0px 0px 0px 0px ',\n color: theme.color.indigo,\n display: 'flex',\n fontFamily: 'Roboto, sans-serif',\n fontSize: '14px',\n fontWeight: '500',\n height: '43px',\n justifyContent: 'center',\n letterSpacing: '0.01px',\n lineHeight: '17px',\n marginTop: '32px',\n maxWidth: '300px',\n textDecoration: 'none',\n textTransform: 'uppercase',\n transition: '300ms',\n width: '161px',\n },\n\n card: {\n alignItems: 'center',\n borderRadius: 0,\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n marginBottom: 6,\n padding: '24px 0px',\n textAlign: 'center',\n '& .detailParam': {\n fontSize: '14px',\n fontFamily: 'Roboto, sans-serif',\n },\n '& .cardSubTitle': {\n color: theme.color.regentGray,\n },\n },\n\n logo: {\n height: '28px',\n position: 'absolute',\n width: '28px',\n },\n\n freeHostingLabel: {\n marginLeft: '36px',\n [theme.breakpoints.down(700)]: {\n marginLeft: '24px',\n },\n },\n\n mobileHostingLabel: {\n [theme.breakpoints.down(700)]: {\n marginLeft: '24px',\n },\n },\n\n cardContainer: {\n alignItems: 'stretch',\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n justifyContent: 'flex-start',\n letterSpacing: '0.01px',\n minHeight: 100,\n textAlign: 'left',\n '&:last-child': {\n padding: '19px 24px 18px 24px',\n },\n },\n\n cardTitle: {\n color: theme.color.tundora,\n fontFamily: 'Roboto, sans-serif',\n fontSize: '18px',\n fontWeight: '500',\n lineHeight: '29px',\n width: '350px',\n },\n\n cardTitleMobile: {\n color: theme.color.tundora,\n fontFamily: 'Roboto, sans-serif',\n fontSize: '18px',\n fontWeight: '500',\n lineHeight: '29px',\n width: '100%',\n },\n\n details: {\n backgroundColor: theme.color.mystic,\n width: '100%',\n padding: '8px 0px 0px 0px',\n\n },\n\n expander: {\n color: theme.color.indigo,\n },\n\n rootPanelMobile: {\n height: '80px',\n marginLeft: '24px',\n padding: '0px',\n },\n\n rootPanel: {\n backgroundColor: theme.color.mystic,\n borderTop: `4px ${theme.color.mystic} solid`,\n height: '80px',\n padding: '0px',\n [theme.breakpoints.down(700)]: {\n height: '20px',\n },\n },\n\n expandedPanel: {\n position: 'unset',\n },\n\n rootPanelExpaned: {\n backgroundColor: theme.color.mystic,\n borderTop: '2px red solid',\n height: '80px',\n marginTop: '-20px',\n padding: '0px',\n },\n\n line: {\n borderColor: theme.color.mystic,\n opacity: '0.4',\n marginTop: '8px',\n [theme.breakpoints.down(700)]: {\n marginLeft: '24px',\n marginRight: '26px',\n },\n },\n\n divArrow: {\n color: theme.color.indigo,\n fontFamily: 'Roboto',\n fontSize: '14px',\n letterSpacing: '0.01px',\n marginRight: '-30px',\n marginTop: '22px',\n textAlign: 'right',\n },\n\n moreLessLabel: {\n color: theme.color.indigo,\n display: 'inline-flex',\n fontFamily: 'Roboto',\n fontSize: '14px',\n letterSpacing: '0.01px',\n marginRight: '-30px',\n textAlign: 'right',\n textDecoration: 'underline',\n textDecorationColor: theme.color.indigo,\n },\n\n\n divShowMoreOrLess: {\n marginRight: '2px',\n marginTop: '2px',\n textAlign: 'right',\n width: '100%',\n },\n\n emptyCardDescription: {\n color: theme.color.tundora,\n fontSize: '16px',\n fontWeight: '400',\n lineHeight: '19px',\n },\n});\n\nexport default styles;\n","import React, {\n useContext, useState, useEffect, useCallback,\n useMemo,\n} from 'react';\nimport classnames from 'classnames';\nimport {\n Tooltip,\n Card, ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography, withStyles,\n} from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport { ExpandMore } from '@material-ui/icons';\nimport { ThemeContext } from 'styled-components';\nimport InfoIcon from '@material-ui/icons/Info';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useLocation } from 'react-router';\nimport { EmailsContext } from '@/contexts/Emails/context';\nimport Loader from '@/components/Layout/Loader';\nimport IconStar from '@/media/icons/proemailPremiumInverted.svg';\nimport AccountTreeBlack from '@/media/icons/proemailAccountTreeBlack.svg';\nimport BlueBackGround from '@/media/icons/bg_blue.svg';\nimport ActionButton from '@/components/Buttons/ActionButton';\nimport BannerToEnableTitanTrial from '@/components/Email/BannerToEnableTitanTrial';\nimport { IconDropdownArrow } from '@/icons';\nimport { isMobile, isBRServer } from '@/utils/Validators/validation';\nimport {\n executeWithParams,\n executeGADisplayBannerWithDomains,\n} from '@/utils/ThirdParties/tagManager';\nimport { queryParams } from '@/utils/Application/queryParams';\nimport { requestUpgradePlans } from '@/redux/actions/emails';\nimport { ESSENTIALS_PLAN } from '@/components/Email/TitanUpgrade/TitanUpgradePlanItem/TitanPlans';\nimport ProEmailActiveTrial from './ProEmailActiveTrial/ProEmailActiveTrial';\nimport ProEmailCard from './ProEmailCard';\nimport ModalTitanTrialColorful from '@/components/Email/ModalTitanTrialColorful';\nimport styles, { WrapperBannerTrial } from './styles';\n\nconst ProEmailsList = ({\n classes, t, setEnableSearch,\n}) => {\n const dispatch = useDispatch();\n\n const enableActivationTitanByBanner = true;\n\n const allEmails = useSelector(state => state.emails.proEmailList);\n const domainWithoutEmail = allEmails.filter(item => item.type === 'domain' && !!item.domain && item.status === 'Active');\n\n const domainWithoutEmailFormattedToOptions = domainWithoutEmail.map(item => ({ value: item.id, label: `@${item.domain}` }));\n const reactivateAutoRenovationCycle = true;\n\n const MAX_LINES_DISPLAYED = 5;\n const { renderedEmailList, searchLoader } = useContext(EmailsContext);\n const listEmailsFree = [];\n const listEmailsPaid = [];\n const [freeExpanded, setFreeExpanded] = useState(true);\n const [paidExpanded, setPaidExpanded] = useState(true);\n const [visibleFree, setVisibleFree] = useState(MAX_LINES_DISPLAYED);\n const [visiblePaid, setVisiblePaid] = useState(MAX_LINES_DISPLAYED);\n const [isLoaded, setIsLoaded] = useState(false);\n const theme = useContext(ThemeContext);\n const listKeysFree = [];\n const listKeysPaid = [];\n const [enableCreateFirstAccount, setEnableCreateFirstAccount] = useState(false);\n\n const location = useLocation();\n const [isTrialActivate, setTrialActivate] = useState(queryParams(location.search, 'trialSucess'));\n\n const sortByStatus = list => (list.sort((a, b) => (a.main_domain === b.domain ? 1 : -1)));\n\n\n useEffect(() => {\n if (isTrialActivate) {\n setTrialActivate(false);\n }\n }, [dispatch, isTrialActivate]);\n\n\n const executeSearchLoader = () => {\n if (searchLoader) {\n if (visibleFree > MAX_LINES_DISPLAYED) {\n setVisibleFree(MAX_LINES_DISPLAYED);\n }\n if (visiblePaid > MAX_LINES_DISPLAYED) {\n setVisiblePaid(MAX_LINES_DISPLAYED);\n }\n return \n \n );\n }\n\n return null;\n }, [\n domainWithoutEmail.length,\n domainWithoutEmailFormattedToOptions,\n enableTrialState,\n essentialData,\n handleCloseModal,\n handlerChangeBannerSelect,\n onBannerLoaded,\n ]);\n\n\n if (renderedEmailList.length > 0 && !enableCreateFirstAccount) {\n return (\n <>\n\n {flowToSellTitanByBanner}\n\n {listEmailsPaid.length > 0 && (\n <>\n \n }\n classes={{\n root: classes.rootPanel,\n expanded: classes.rootPanelExpanded,\n }}\n >\n \n
\n {!isMobile && (\n \n {t('proEmail.professionalTitanMailLabel')}\n {!isMobile && (\n \n
\n \n\n
\n \n {paidExpanded ? t('proEmail.showLess') : t('proEmail.showMore')}\n {paidExpanded ? \n
\n )}\n\n \n \n \n {listEmailsPaid.slice(0, visiblePaid).map((listDomains, index) => (\n
\n ))}\n\n
\n {t('btn.loadMore')}\n \n\n \n \n \n }\n classes={{\n root: classes.rootPanel,\n expanded: classes.rootPanelExpanded,\n }}\n >\n \n
\n {!isMobile && (\n \n
\n
\n
\n {t('proEmail.freeMailLabel')}\n {!isMobile && (\n \n
\n \n
\n \n {freeExpanded ? t('proEmail.showLess') : t('proEmail.showMore')}\n {freeExpanded ? \n
\n )}\n\n \n \n \n {listEmailsFree.slice(0, visibleFree).map((listDomains, index) => (\n
\n ))}\n\n
\n {t('btn.loadMore')}\n \n \n \n \n {t('proEmail.emptyList.title')} \n {t('proEmail.emptyList.description')} \n \n );\n};\n\nexport default withI18n()(withStyles(styles)(ProEmailsList));\n","const styles = theme => ({\n\n btnClose: {\n height: '40px',\n textAlign: 'right',\n },\n\n logo: {\n marginTop: '2px',\n },\n\n activeDialog: {\n borderRadius: 0,\n height: '317px',\n width: '600px',\n },\n\n content: {\n padding: '35px 40px',\n position: 'relative',\n },\n\n btActive: {\n alignItems: 'center',\n background: theme.color.indigo,\n color: theme.color.white,\n display: 'flex',\n fontFamily: 'Roboto',\n fontSize: '14px',\n fontWeight: 'Medium',\n height: '40px',\n justifyContent: 'center',\n letterSpacing: '0.01px',\n marginLeft: 'auto',\n marginRight: 'auto',\n marginTop: '24px',\n maxWidth: '320px',\n textDecoration: 'none',\n textTransform: 'uppercase',\n width: '224px',\n '&:hover': {\n backgroundColor: theme.color.chambray,\n border: `1px solid ${theme.color.chambray}`,\n color: theme.color.white,\n },\n },\n\n titleDialog: {\n fontFamily: 'Roboto',\n fontSize: '24px',\n fontStyle: 'Medium',\n fontWeight: 'bold',\n letterSpacing: '0.01px',\n marginBottom: '8px',\n opacity: 1,\n\n },\n\n descriptionDialog: {\n color: theme.color.dark,\n fontFamily: 'Roboto',\n fontSize: '16px',\n fontStyle: 'Regular',\n },\n\n title: {\n color: theme.color.tundora,\n fontSize: '24px',\n fontWeight: 'normal',\n margin: '0 0 5px',\n },\n\n message: {\n color: theme.color.tundora,\n fontSize: '14px',\n lineHeight: '20px',\n margin: '0 0 15px',\n },\n\n warning: {\n borderRadius: '2px',\n marginBottom: '30px',\n padding: '15px',\n },\n\n actions: {\n textAlign: 'center',\n },\n\n btnCancel: {\n borderColor: theme.color.geyser,\n color: theme.color.indigo,\n marginRight: '10px',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport {\n withStyles,\n Dialog,\n IconButton,\n DialogContent,\n Typography,\n} from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport CloseIcon from '@material-ui/icons/Close';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport IconMailTitan from '@/media/icons/mailTitan.svg';\nimport styles from './styles';\n\n\nconst ModalFreeTitanActiveSuccess = ({\n onClose, open, classes, t, domain,\n}) => (\n \n \n
\n \n \n
\n\n
\n {t('proEmail.hirePlan.successActivateFreePlanTitle')} \n \n {t('proEmail.hirePlan.successActivateFreePlanDescription')}\n \n \n {t('proEmail.hirePlan.successActivateFreePlanAction')}\n \n\n \n
\n \n
\n \n \n
\n\n
\n {t('proEmail.hirePlan.successMoveCPanelTitle')} \n \n {t('proEmail.hirePlan.successMoveCPanelDescription')}\n \n \n {t('proEmail.hirePlan.successMoveCPanelAction')}\n \n \n
\n\n setModalFreeTitanActiveSuccess(false)}\n open={modalFreeTitanActiveSuccess}\n domain={domain}\n />\n\n setModalMoveCPanelSuccess(false)}\n open={modalMoveCPanelSuccess}\n domain={domain}\n />\n\n \n \n {t('lists.emails')}\n \n \n {displaySearch && (\n \n\n handleTyppedTerm(e.target.value)}\n InputProps={{\n startAdornment: \n )}\n\n
\n );\n};\n\nexport default withI18n()(withWidth()(withStyles(styles)(ProEmailTitle)));\n","import React, { useContext, useState } from 'react';\nimport Loader from '@/components/Layout/Loader';\nimport ProEmailsNewList from '@/components/Email/ProEmail/ProEmailsNewList';\nimport ProEmailNewTitle from '@/components/Email/ProEmail/ProEmailNewTitle';\nimport { EmailsContext } from '@/contexts/Emails/context';\nimport FaqEmails from '@/components/FrequentlyQuestions/FaqEmails';\nimport styles from './styles.module.css';\nimport { SUPPORT_URL } from '@/config/urls/supportUrls';\n\nconst ProEmailListWrapper = () => {\n const {\n firstLoad, loadingCpanel, loadingProEmails,\n } = useContext(EmailsContext);\n const [displaySearch, setDisplaySearch] = useState(true);\n\n const setEnableSearch = (isEnabled) => {\n setDisplaySearch(isEnabled);\n };\n\n if (firstLoad || loadingCpanel || loadingProEmails) {\n return \n
\n \n );\n};\n\nexport default ProEmailListWrapper;\n","import React from 'react';\nimport { withStyles } from '@material-ui/core';\nimport { ContentContainer } from '@/components/Cards/ContentContainer';\nimport EmailsContextProvider from '@/contexts/Emails/context';\nimport styles from './styles';\nimport ProEmailListWrapper from './ProEmailListWrapper';\nimport PageMessages from '@/pages/common/PageMessages';\n\nconst EmailsList = ({ classes }) => (\n <>\n \n \n \n \n \n);\n\nexport default withStyles(styles)(EmailsList);\n","const styles = theme => ({\n\n dialogContent: {\n textAlign: 'center',\n },\n\n closeDialog: {\n height: '45px',\n textAlign: 'right',\n },\n\n btnClose: {\n color: theme.color.tundora,\n padding: '6px',\n position: 'absolute',\n right: '15px',\n top: '15px',\n },\n\n cpanelDialogActiveDialog: {\n borderRadius: 0,\n maxHeight: '350px',\n width: '600px',\n },\n\n content: {\n padding: '35px 40px',\n position: 'relative',\n },\n activeCPanel: {\n alignItems: 'center',\n background: theme.color.indigo,\n color: theme.color.white,\n display: 'flex',\n fontSize: '16px',\n fontWeight: 400,\n height: '40px',\n justifyContent: 'center',\n letterSpacing: '0.01px',\n marginLeft: 'auto',\n marginRight: 'auto',\n marginTop: '24px',\n maxWidth: '320px',\n textDecoration: 'none',\n textTransform: 'uppercase',\n '&:hover': {\n backgroundColor: theme.color.chambray,\n border: `1px solid ${theme.color.chambray}`,\n color: theme.color.white,\n\n },\n },\n\n titleDialog: {\n fontSize: '24px',\n fontStyle: 'medium',\n fontWeight: 'bold',\n letterSpacing: '0.01px',\n marginBottom: '24px',\n opacity: 1,\n\n },\n descriptionDialog: {\n color: theme.color.dark,\n fontSize: '16px',\n fontStyle: 'Regular',\n },\n\n title: {\n color: theme.color.tundora,\n fontSize: '24px',\n fontWeight: 'normal',\n margin: '0 0 5px',\n },\n message: {\n color: theme.color.tundora,\n fontSize: '14px',\n lineHeight: '20px',\n margin: '0 0 15px',\n },\n warning: {\n borderRadius: '2px',\n marginBottom: '30px',\n padding: '15px',\n },\n actions: {\n textAlign: 'center',\n },\n btnCancel: {\n borderColor: theme.color.geyser,\n color: theme.color.indigo,\n marginRight: '10px',\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport {\n withStyles,\n Dialog,\n IconButton,\n DialogContent,\n Typography,\n} from '@material-ui/core';\nimport { withI18n, Trans } from 'react-i18next';\nimport CloseIcon from '@material-ui/icons/Close';\nimport { useDispatch } from 'react-redux';\nimport Button from '@material-ui/core/Button';\nimport { cPanelWebmailTagManager, hireTitanCPanelWebmailWithTitanTrial } from '@/utils/ThirdParties/tagManager';\nimport * as actions from '@/redux/actions/emails';\nimport { emailsActions } from '@/redux/modules/emails';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport { notifierErrorLong } from '@/utils/Application/notifier';\nimport { RECEIVE_GET_ACTIVE_EMAIL_CPANEL } from '@/redux/actions/actionsTypes';\nimport { BASIC_PLAN } from '@/components/Email/TitanUpgrade/TitanUpgradePlanItem/TitanPlans';\nimport styles from './styles';\nimport { useHistory } from 'react-router';\nimport { EmailsActionTypes } from '@/redux/modules/emails/email.types';\n\nconst ModalActiveCPanel = ({\n onClose, open, classes, t, idProEmail, domain, domainObject,\n}) => {\n const dispatch = useDispatch();\n\n const isTitanHirePlanActiveCpanel = window.location.pathname.includes(\n '/emails-list/titan-hire-plan-active-cpanel',\n );\n\n const shouldRenderNewTitanCards = isTitanHirePlanActiveCpanel;\n const history = useHistory();\n const domainConfigured = domainObject && domainObject.domain_configured === false && domainObject.configured === true;\n\n const executeAction = () => {\n if (shouldRenderNewTitanCards) {\n hireTitanCPanelWebmailWithTitanTrial();\n }\n if (domainConfigured) {\n const updateDomainSetupData = {\n enabledUpdateDomainSetup: true,\n domain: domainObject.domain,\n customerEmail: domainObject.customer_email,\n };\n\n dispatch(emailsActions.emails.updateDomainSetup.request(updateDomainSetupData)).then((responseData) => {\n if (responseData.type === EmailsActionTypes.UPDATE_DOMAIN_SETUP_REQUEST) {\n cPanelWebmailTagManager(BASIC_PLAN);\n history.push(`${t('routes.emailsList')}?cpActivate=true&domain=${domain}`);\n } else {\n dispatch(enqueueSnackbar(t('snackbar.error.is_not_possible_active_email_cpanel'), notifierErrorLong));\n }\n });\n } else {\n dispatch(actions.requestReceiveActiveEmailCPanel(idProEmail, 'local')).then((responseData) => {\n if (responseData.type === RECEIVE_GET_ACTIVE_EMAIL_CPANEL) {\n cPanelWebmailTagManager(BASIC_PLAN);\n history.push(`${t('routes.emailsList')}?cpActivate=true&domain=${domain}`);\n } else {\n dispatch(enqueueSnackbar(t('snackbar.error.is_not_possible_active_email_cpanel'), notifierErrorLong));\n }\n });\n }\n onClose();\n };\n return (\n \n \n
\n \n \n
\n
\n {t('proEmail.hirePlan.cpanelDialogActiveTitle')} \n \n \n <>0\n 1 \n <>2\n \n \n {t('proEmail.hirePlan.cpanelDialogActiveDescriptionAdvice')} \n \n {t('proEmail.hirePlan.cpanelDialogActiveAction')}\n \n \n
\n \n
\n \n \n
\n
\n {t('proEmail.hirePlan.continueFreePlanTitle')} \n \n \n <>0\n 1 \n <>2\n \n \n {t('proEmail.hirePlan.continueFreePlanDescriptionAdvice')} \n {} : handlerReactivePlanFree} className={classes.btActive} data-testid=\"linkButton\" disabled={loading}>\n {loading ? \n \n
\n {t(`${pricePart[0]} ${pricePart[1]}`)}\n \n );\n};\n\nPriceBlock.propTypes = {\n cycle: PropTypes.string.isRequired,\n annuallyPrice: PropTypes.string.isRequired,\n monthlyPrice: PropTypes.string.isRequired,\n};\n\nexport default withI18n()(withWidth()(withStyles(styles)(PriceBlock)));\n","const styles = theme => ({\n\n priceLabel: {\n color: theme.color.tundora,\n fontSize: '16px',\n letterSpacing: '0.01px',\n lineHeight: '17px',\n textAlign: 'right',\n },\n\n priceLabelOld: {\n fontSize: '14px',\n fontWeight: '500',\n },\n\n\n paymentMethodComponent: { marginTop: '23px' },\n\n priceDiv: {\n marginButton: '16px',\n marginTop: '23px',\n },\n\n price: {\n marginTop: '16px',\n color: theme.color.tundora,\n fontSize: '16px',\n fontWeight: '500',\n letterSpacing: '0.01px',\n lineHeight: '22px',\n textAlign: 'center',\n },\n priceOld: {\n fontSize: '18px',\n marginTop: '0px',\n textAlign: 'right',\n },\n\n savedMoney: {\n color: theme.color.coral,\n fontSize: '12px',\n fontWeight: '500',\n letterSpacing: '0.01px',\n lineHeight: '14px',\n textAlign: 'right',\n },\n\n button: {\n alignItems: 'center',\n backgroundColor: theme.color.indigo,\n border: `1px solid ${theme.color.chambray}`,\n borderRadius: '2px',\n color: theme.color.white,\n display: 'flex',\n fontSize: '14px/19px',\n fontWeight: '500',\n height: '40px',\n justifyContent: 'center',\n letterSpacing: '0.01px',\n lineHeight: '17px',\n marginTop: '16px',\n maxWidth: '100%',\n textDecoration: 'none',\n transition: '300ms',\n width: '100%',\n '&:hover': {\n backgroundColor: theme.color.chambray,\n },\n\n [theme.breakpoints.down(700)]: {\n marginButton: '16px',\n },\n },\n\n featuredButton: {\n backgroundColor: theme.color.coral,\n borderColor: theme.color.brownRust,\n\n '&:hover': {\n backgroundColor: theme.color.brownRust,\n },\n },\n hireButtonWrapper: {\n display: 'flex',\n flexDirection: 'column',\n marginBottom: '32px',\n marginTop: '18px',\n width: '100%',\n },\n});\nexport default styles;\n","const styles = theme => ({\n card: {\n border: `1px solid ${theme.color.geyser}`,\n borderRadius: '5px',\n boxShadow: '0px 1px 3px #00000029',\n display: 'flex',\n flexDirection: 'column',\n marginBottom: '12px',\n maxWidth: '408px',\n overflow: 'hidden',\n padding: '16px 24px',\n width: '100%',\n\n [theme.breakpoints.down(758)]: {\n marginRight: 'unset',\n maxWidth: 'unset',\n width: '100%',\n },\n },\n});\n\nexport default styles;\n","import { withStyles } from '@material-ui/core';\nimport React from 'react';\nimport { withI18n } from 'react-i18next';\nimport SelectField from '@/components/Fields/SelectField';\nimport styles from './styles';\n\n\nconst PaymentMethod = ({\n paymentMethod, setPaymentMethod, methodOptions,\n}) => (\n\n setPaymentMethod(e.target.value)}\n selectTestId=\"selectButton\"\n selectInputTestId=\"selectField\"\n />\n\n);\n\nexport default withI18n()(withStyles(styles)(PaymentMethod));\n","import React, {\n useMemo, useState, useEffect, useCallback,\n} from 'react';\nimport { Typography, withStyles } from '@material-ui/core';\nimport { find, propEq } from 'ramda';\nimport { withI18n } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { useLocation, useHistory, useParams } from 'react-router';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { changePlan, getUnpaidUpgradeInvoice } from '@/redux/actions/emails';\nimport { notifierError, notifierSuccess } from '@/utils/Application/notifier';\nimport { Button as ButtonV1 } from '@/pages/common/v1/Button';\nimport ModalValidateExistentInvoice from '@/components/Modal/ModalValidateExistentInvoice/ModalValidateExistentInvoice';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport {\n ERROR_UPGRADE_MAIL_INVOICE,\n RECEIVE_EXISTENT_INVOICE_VALIDATION,\n} from '@/redux/actions/actionsTypes';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport {\n reativateWithoutHostingPlanTagManager,\n domainWithoutHostingPlanTagManager,\n cPanelWebmailTagManager,\n} from '@/utils/ThirdParties/tagManager';\nimport { COUNTRY } from '@/config';\nimport styles from './styles';\nimport PaymentMethod from '../../PaymentMethod';\nimport { getTotalPrice } from './getTotalPrice/getTotalPrice';\n\nconst HireBlock = ({\n classes,\n amount,\n cycle,\n annuallyPrice,\n monthlyPrice,\n featured,\n pid,\n domain,\n t,\n hostingId,\n handleOpenModalTitanTrialColorful,\n}) => {\n const dispatch = useDispatch();\n const history = useHistory();\n const { domain: currentDomain } = useParams();\n const [displayInvoiceModal, toggleDisplayInvoiceModal] = useState(false);\n const hasCPanel = window.location.pathname.includes(\n '/emails-list/titan-hire-plan-active-cpanel',\n );\n\n const finalPrice = useMemo(\n () => getTotalPrice(monthlyPrice, annuallyPrice, cycle, amount),\n [cycle, monthlyPrice, annuallyPrice, amount],\n );\n const [paymentMethod, setPaymentMethod] = useState(\n COUNTRY === 'br' ? 'braspag_credit_1x' : 'dlocal',\n );\n const [ongoingInvoice, setOngoingInvoice] = useState(null);\n const [loading, setLoadingRedirect] = useState(false);\n const [lastResponse, setLastResponse] = useState(null);\n const invoices = useSelector(state => state.invoices);\n const location = useLocation();\n const proEmailList = useSelector(state => state.emails.proEmailList);\n\n const isTitanHirePlanActiveCpanel = window.location.pathname.includes(\n '/emails-list/titan-hire-plan-active-cpanel',\n );\n const shouldRenderNewTitanCards = isTitanHirePlanActiveCpanel;\n\n\n const methodOptions = [\n {\n name: t('proEmail.upgradePlan.creditCard'),\n value: COUNTRY === 'br' ? 'braspag_credit_1x' : 'dlocal',\n },\n {\n name: t('proEmail.upgradePlan.gp_boleto'),\n value: COUNTRY === 'br' ? 'boleto' : 'payu_boleto',\n },\n { name: t('proEmail.upgradePlan.gp_paypal'), value: 'paypal' },\n ];\n\n function executeGA() {\n if (!hasCPanel) {\n hostingId === null\n ? domainWithoutHostingPlanTagManager(pid)\n : reativateWithoutHostingPlanTagManager(pid);\n } else {\n cPanelWebmailTagManager(pid);\n }\n }\n\n useEffect(() => {\n if (lastResponse && invoices && invoices.byStatus.Paid.length > 0) {\n const isPaid = find(\n propEq('id', lastResponse.data.invoice_id),\n invoices.byStatus.Paid,\n );\n\n\n let alertShowMessage = '';\n if (isPaid) {\n alertShowMessage = t('proEmail.upgradePlan.successWithCredits');\n } else if (lastResponse.data.upgraded) {\n alertShowMessage = t('proEmail.upgradePlan.success');\n }\n\n\n if (isPaid || lastResponse.data.upgraded) {\n dispatch(\n enqueueSnackbar(\n alertShowMessage,\n notifierSuccess,\n ),\n );\n\n const managerEmailDomainRoute = `${t('routes.emailsList')}${t('routes.emailsTitan')}/${domain}`;\n\n history.push(managerEmailDomainRoute);\n return;\n }\n\n const paymentPart = paymentMethod ? `/${paymentMethod}` : '';\n const unpaidRoute = `${t('routes.billing')}${t('routes.unpaid')}/${lastResponse.data.invoice_id}${paymentPart}`;\n\n history.push(unpaidRoute);\n }\n }, [invoices, lastResponse, t, domain, paymentMethod, dispatch, history]);\n\n const getTitanHirePlanActiveCpanelOfferContext = useMemo(() => {\n if (!proEmailList.length) {\n return;\n }\n\n const { plan } = proEmailList.find(item => item.domain === currentDomain);\n const dontHasPlan = plan === null;\n\n if (dontHasPlan) {\n return ['email_list_no_email_plan_offer'];\n }\n\n return ['email_list_free_email_platform_setup'];\n }, [currentDomain, proEmailList]);\n\n const getOfferContext = useCallback(() => {\n const currentPathName = location.pathname;\n\n const mapOfferContextByPath = {\n titanHirePlan: {\n route: '/titan-hire-plan/',\n offerContext: ['email_list_cancelled_reactivation'],\n },\n titanHirePlanActiveCpanel: {\n route: '/titan-hire-plan-active-cpanel/',\n offerContext: getTitanHirePlanActiveCpanelOfferContext,\n },\n titanHireFreePlan: {\n route: '/titan-hire-free-plan/',\n offerContext: ['email_list_cancelled_reactivation'],\n },\n };\n\n const keyForThatRoute = Object.keys(mapOfferContextByPath)\n .find(key => currentPathName.includes(mapOfferContextByPath[key].route));\n\n return keyForThatRoute ? mapOfferContextByPath[keyForThatRoute].offerContext : [];\n }, [location.pathname, getTitanHirePlanActiveCpanelOfferContext]);\n\n const handlePay = () => {\n executeGA();\n setLoadingRedirect(true);\n const offerContext = getOfferContext();\n\n const dispatchedAction = changePlan({\n planId: pid,\n domain,\n cycle,\n paymentMethod,\n inboxAmount: amount,\n hostingId,\n offerContext,\n isFree: true,\n });\n\n dispatch(dispatchedAction).then((response) => {\n if (response.type === ERROR_UPGRADE_MAIL_INVOICE) {\n dispatch(\n enqueueSnackbar(t('proEmail.upgradePlan.error'), notifierError),\n );\n setLoadingRedirect(false);\n } else {\n setLastResponse({ data: response.data.data });\n setLoadingRedirect(true);\n }\n });\n };\n\n useEffect(() => {\n if (ongoingInvoice) {\n toggleDisplayInvoiceModal(true);\n }\n }, [ongoingInvoice]);\n\n const ValidateExistentInvoice = (hostingId) => {\n setLoadingRedirect(true);\n dispatch(\n getUnpaidUpgradeInvoice({ domain, hostingId, isFree: false }),\n ).then((response) => {\n if (response.type === RECEIVE_EXISTENT_INVOICE_VALIDATION) {\n if (response.data.data.already_exists) {\n setOngoingInvoice(response.data.data.invoice);\n } else {\n handlePay();\n }\n } else {\n dispatch(\n enqueueSnackbar(t('proEmail.upgradePlan.error'), notifierError),\n );\n }\n });\n };\n\n return (\n <>\n {ongoingInvoice && (\n \n \n {t('proEmail.hirePlan.total')}\n {`${finalPrice}`}\n \n \n {` ${\n cycle === 'annually'\n ? t('proEmail.hirePlan.yearPayment')\n : t('proEmail.hirePlan.monthPayment')\n }`}\n \n \n )}\n { !shouldRenderNewTitanCards && (\n (ValidateExistentInvoice(hostingId))\n }\n data-testid=\"payInvoice\"\n >\n {t('proEmail.hirePlan.hireCTA')}\n \n ) : (\n \n
\n )}\n \n );\n};\n\nHireBlock.propTypes = {\n amount: PropTypes.number.isRequired,\n cycle: PropTypes.string.isRequired,\n annuallyPrice: PropTypes.string.isRequired,\n monthlyPrice: PropTypes.string.isRequired,\n featured: PropTypes.bool.isRequired,\n pid: PropTypes.number.isRequired,\n domain: PropTypes.string.isRequired,\n};\n\nexport default withI18n()(withStyles(styles)(HireBlock));\n","import { formatCurrency } from '@/utils/Formatters/formatCurrency';\n\nexport const getTotalPrice = (month, anual, cycle, amount) => formatCurrency(\n cycle === 'monthly'\n ? month * amount\n : anual * amount,\n);\n","import styled, { css } from 'styled-components';\nimport IconCheck from '@/media/icons/check.svg';\n\nexport const DescriptionWrapper = styled.div`\n ${({ theme, location, needsMargin }) => {\n const marginBottom = needsMargin ? '77px' : '0px';\n const layout = {\n default: {\n fontFamily: '',\n marginButtonLi: '16px',\n padding: '0px 6px',\n },\n hirePlan: {\n fontFamily: theme.font.family.secondary,\n marginButtonLi: '16px',\n padding: '0px 0px',\n },\n };\n return css`\n & ul {\n list-style-type: none;\n margin: unset;\n padding: ${location ? layout[location].padding : layout.default.padding};\n text-align: left;\n font-family: ${location ? layout[location].fontFamily : layout.default.fontFamily};\n\n & li {\n color: ${theme.palette.grey.dark};\n display: flex;\n font-size: 14px;\n letter-spacing: 0.01px;\n line-height: 21px;\n margin-bottom: ${location ? layout[location].marginButtonLi : layout.default.marginButtonLi};\n position: relative;\n\n & > strong, & > b {\n display: contents;\n }\n\n & span {\n align-items: center;\n background: ${theme.palette.secondary.primary};\n border-radius: 50%;\n color: ${theme.palette.white.light};\n display: flex;\n font-size: 12px;\n height: 15px;\n justify-content: center;\n margin-left: 8px;\n max-width: 15px;\n position: relative;\n top: 4px;\n width: 100%;\n }\n\n &:before {\n background-image: url('${IconCheck}');\n background-repeat: no-repeat;\n content: \"\";\n display: block;\n height: 16px;\n margin-right: 8px;\n min-width: 16px;\n position: relative;\n top: 2px;\n }\n }\n\n & li:last-child {\n margin-bottom: 0px,\n }\n }\n @media only screen and (min-width: 1035px) {\n margin-bottom: ${marginBottom};\n }\n `;\n }}\n`;\n\nexport const IncludedLabel = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: 14px;\n font-weight: 700;\n letter-spacing: 0.01px;\n line-height: 19px;\n margin: 0px 0px 16px 0px;\n text-align: left;\n text-transform: uppercase\n `}\n`;\n\nexport const Separator = styled.hr`\n ${({ theme }) => css`\n border: 0;\n border-bottom: 1px solid ${theme.palette.grey.main};\n width: 100%;\n margin: 16px 0px\n `}\n`;\n\nexport const TitleWrapper = styled.div`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.sm};\n margin-bottom: 8px;\n text-align: left;\n `}\n`;\n","/* eslint-disable react/no-danger */\nimport DOMPurify from 'dompurify';\nimport PropTypes from 'prop-types';\nimport React, { useMemo } from 'react';\nimport { locale } from '@/utils/locale';\nimport { ESSENTIALS_PLAN, PREMIUM_PLAN, ULTRA_PLAN } from '../TitanPlans';\nimport * as Styles from './PlanFeatures.styles';\nimport { Mark } from '@/pages/common/v1/Mark';\n\n\nconst PlanFeatures = ({ plan, description }) => {\n const sanitizedDescription = DOMPurify.sanitize(description);\n\n const isTitanHirePlanActiveCpanel = window.location.pathname.includes(\n '/emails-list/titan-hire-plan-active-cpanel',\n );\n const shouldRenderNewTitanCards = isTitanHirePlanActiveCpanel;\n\n const planFeaturesLocale = {\n whatIsincluded: locale('proEmail.upgradePlan.whatIsincluded'),\n whatIsincludedInPaid: locale('proEmail.upgradePlan.whatIsincludedInPaid'),\n };\n\n\n const whatIsincluded = useMemo(() => (\n ([PREMIUM_PLAN, ESSENTIALS_PLAN, ULTRA_PLAN].includes(plan.id) && shouldRenderNewTitanCards)\n ? planFeaturesLocale.whatIsincludedInPaid\n : ''), [plan.id, planFeaturesLocale.whatIsincludedInPaid, shouldRenderNewTitanCards]);\n\n return (\n <>\n {!shouldRenderNewTitanCards && (\n \n {whatIsincluded}\n \n )}\n {shouldRenderNewTitanCards && (\n <>\n \n \n )}\n \n )}\n \n
setModalConfirmFreeTitanAvailable(false)}\n open={modalConfirmFreeTitanAvailable}\n plan={plan}\n idHosting={idHosting}\n isHostingSelected={isHostingSelected}\n domainObject={domainObject}\n idProEmail={idProEmail}\n />\n\n \n\n \n {featured && !shouldRenderNewTitanCards && (\n
\n \n\n {shouldRenderNewTitanCards && (\n
\n
\n )}\n\n {shouldRenderNewTitanCards ? (\n
\n {t(`proEmail.hirePlan.${productName}.productName`)}\n \n ) : (\n
\n {plan.name}\n \n ) }\n\n {shouldRenderNewTitanCards\n ? (\n \n {t(`proEmail.hirePlan.${productName}.gb`)}\n \n ) : (\n \n {!isFreemium\n ? t('proEmail.hirePlan.perMailBoxLabel')\n : t('proEmail.hirePlan.freeMailBoxLabel')}\n \n )}\n\n {shouldRenderNewTitanCards && (\n \n {t(`proEmail.hirePlan.${productName}.storage`)}\n \n )}\n\n {!isFreemium && !shouldRenderNewTitanCards && (\n \n
\n )}\n\n {shouldRenderNewTitanCards && [PREMIUM_PLAN, ULTRA_PLAN].includes(plan.id) && (\n\n <>\n \n \n {`${formatCurrency(getPerMonthPrice(selectedPremiumCyclePrice, premiumSelectedCycleValue))}${t(`proEmail.hirePlan.${productName}.perMonth`)}`}\n \n \n {t(`proEmail.hirePlan.${productName}.monthlyPriceEachEmail`)}\n \n
\n \n
\n \n \n \n <>0\n 1 \n <>2\n 3 \n <>4\n 5 \n <>6\n \n \n
\n \n handleBuyPlan({\n productId: plan.id,\n productCycle: premiumSelectedCycleValue,\n paymentMethod: paymentMethodSelectedValue,\n quantity: proEmailPremiumAccounts,\n domain: domainObject.domain,\n isUltra: [ULTRA_PLAN].includes(plan.id),\n })}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n label={t('proEmail.hirePlan.titanPremium.ctaButton')}\n />\n
\n \n )}\n\n \n {!isFreemium && (![PREMIUM_PLAN, ULTRA_PLAN].includes(plan.id) || !shouldRenderNewTitanCards) && (\n
\n )}\n\n {isFreemium && shouldRenderNewTitanCards && (\n
\n
\n )}\n\n {(shouldRenderNewTitanCards) && (\n <>\n
\n \n <>0\n 1 \n <>2\n \n \n
\n {t(`proEmail.hirePlan.${productName}.link`)}\n \n \n )}\n \n \n );\n};\n\nexport default SelectHirePlan;\n","import {\n Typography, withStyles, Radio, RadioGroup, FormControlLabel,\n} from '@material-ui/core';\nimport React, {\n useContext, useEffect, useState, useCallback, useLayoutEffect, useMemo,\n} from 'react';\nimport { Trans, withI18n } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { find, propEq } from 'ramda';\nimport Button from '@material-ui/core/Button';\nimport { Button as ButtonV1 } from '@/pages/common/v1/Button';\nimport classnames from 'classnames';\nimport { useLocation, useHistory } from 'react-router-dom';\nimport TitanUpgradeTitle from '@/components/Email/TitanUpgrade/TitanUpgradeTitle';\nimport { requestUpgradePlans } from '@/redux/actions/emails';\nimport Loader from '@/components/Layout/Loader';\nimport { EmailsContext } from '@/contexts/Emails/context';\nimport { ContentContainer } from '@/components/Cards/ContentContainer';\nimport {\n TRIAL_PLAN, ESSENTIALS_PLAN, BASIC_PLAN, ULTRA_PLAN,\n} from '@/components/Email/TitanUpgrade/TitanUpgradePlanItem/TitanPlans';\nimport { TITAN, CPANEL } from '@/components/Email/TypeServiceEmails';\nimport ModalActiveCPanel from '@/components/Modal/ModalActiveCPanel';\nimport * as actions from '@/redux/actions/emails';\nimport { queryParams } from '@/utils/Application/queryParams';\nimport styles from './TitanHirePlan.styles';\nimport SelectHirePlan from './SelectNewPlan';\nimport ModalTitanTrialColorful from '@/components/Email/ModalTitanTrialColorful';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { renderEmailPlatformSelectionPageWithTitanTrial, executeGACloseInModalHirePlan } from '@/utils/ThirdParties/tagManager';\nimport {\n FOXTROT_TITAN_ULTRA_SETUP_PAGE,\n} from '@/config/GrowthBook/constants';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { emailsActions } from '@/redux/modules/emails';\n\nconst TitanHirePlan = ({ classes, domain, t }) => {\n const dispatch = useDispatch();\n const history = useHistory();\n\n const enableTitanUltra = useFeatureIsOn(FOXTROT_TITAN_ULTRA_SETUP_PAGE);\n const {\n redirectToInvoices, invoiceId, paymentMethod, domainsWithInvoices,\n } = useSelector(state => state.emails.buyFastcheckout);\n\n const [plans, setPlans] = useState([]);\n const { renderedEmailList, loadingCpanel, loadingProEmails } = useContext(EmailsContext);\n const [firstLoad, setFirstLoad] = useState(true);\n const domainObject = find(propEq('domain', domain), renderedEmailList);\n const [paymentCycle, setPaymentCycle] = useState('monthly');\n\n const filteredPlans = enableTitanUltra ? plans : plans.filter(plan => plan.id !== ULTRA_PLAN);\n\n const location = useLocation();\n const idProEmail = queryParams(location.search, 'idPro');\n const typeServiceEmail = queryParams(location.search, 'service');\n const isHostingSelected = queryParams(location.search, 'selected') === 'true';\n const cpanelUrl = '/emails-list/titan-hire-plan-active-cpanel';\n const titanFreeUrl = '/emails-list/titan-hire-free-plan';\n\n const [hasCPanel, setHasCPanel] = useState((window.location.pathname).includes(cpanelUrl));\n const [hasFreemium, setHasFreemium] = useState((window.location.pathname).includes(titanFreeUrl) || (window.location.pathname).includes(cpanelUrl));\n\n useEffect(() => {\n if (typeServiceEmail === CPANEL) {\n setHasCPanel(true);\n setHasFreemium(false);\n } else if (typeServiceEmail === TITAN) {\n setHasFreemium(true);\n }\n }, [typeServiceEmail]);\n\n const isTitanHirePlanActiveCpanel = window.location.pathname.includes(cpanelUrl);\n\n const shouldRenderNewTitanCards = isTitanHirePlanActiveCpanel;\n\n const [modalActiveCPanelAvailable, setModalActiveCPanelAvailable] = useState(false);\n const [idHosting, setIdHosting] = useState(queryParams(location.search, 'id'));\n\n const [essentialData, setEssentialData] = useState({ name: '', price: '' });\n const [ModalTitanTrialColorfulAvailable, setModalTitanTrialColorfulAvailable] = useState(false);\n\n useLayoutEffect(() => {\n if (shouldRenderNewTitanCards) {\n renderEmailPlatformSelectionPageWithTitanTrial();\n }\n }, [shouldRenderNewTitanCards]);\n\n\n const getDataOfEssential = useCallback(() => dispatch(\n requestUpgradePlans(),\n ).then(({ data }) => {\n const [planData] = data.filter(plan => plan.id === ESSENTIALS_PLAN);\n let dataEssential = { name: '', price: '' };\n if (planData) {\n const { name, configoptions } = planData;\n const [{ monthly: price }] = configoptions;\n\n dataEssential = { name, price };\n\n if (isBRServer) {\n dataEssential.price = price.replace('.', ',');\n }\n }\n\n return dataEssential;\n }), [dispatch]);\n const enabledCardCPanel = useMemo(() => (\n typeServiceEmail === CPANEL || ((domainObject != null && !domainObject.configured) && isTitanHirePlanActiveCpanel)\n ),\n [domainObject, typeServiceEmail, isTitanHirePlanActiveCpanel]);\n\n useEffect(() => {\n const thisDomainAlreadyHasPremiumInvoice = domainsWithInvoices.includes(domain);\n if (redirectToInvoices && invoiceId && paymentMethod && thisDomainAlreadyHasPremiumInvoice) {\n history.push(`${t('routes.billing')}${t('routes.unpaid')}/${invoiceId}/${paymentMethod}`);\n }\n }, [t, invoiceId, paymentMethod, redirectToInvoices, history, domainsWithInvoices, domain]);\n\n useEffect(() => {\n if (shouldRenderNewTitanCards) {\n getDataOfEssential().then(setEssentialData);\n }\n }, [getDataOfEssential, shouldRenderNewTitanCards]);\n\n useEffect(() => {\n if (hasCPanel) {\n dispatch(actions.requestProEmailHostingPlans(domain))\n .then(({ data }) => (data[0] ? data[0].hostingId : null))\n .then(setIdHosting);\n }\n }, [hasCPanel, dispatch, domain]);\n\n useEffect(() => {\n dispatch(emailsActions.emails.paymentMethods.request());\n }, [dispatch]);\n\n if (idHosting === null && hasFreemium && !hasCPanel) {\n history.push(t('routes.emailsList'));\n }\n\n useEffect(() => {\n dispatch(requestUpgradePlans()).then((response) => {\n if (shouldRenderNewTitanCards) {\n const [planData] = response.data.filter(plan => plan.id === ESSENTIALS_PLAN);\n if (planData) {\n const { name, configoptions } = planData;\n const [{ monthly: price }] = configoptions;\n\n const dataEssential = { name, price };\n\n if (isBRServer) {\n dataEssential.price = price.replace('.', ',');\n }\n }\n getDataOfEssential().then(setEssentialData);\n }\n\n if (hasFreemium) {\n response.data.unshift({\n id: BASIC_PLAN,\n type: 'product',\n currency: 1,\n name: t('proEmail.hirePlan.free'),\n tax: false,\n description: t('proEmail.upgradePlan.freeBenefits'),\n configoptions: [\n {\n id: 1,\n gid: 37,\n monthly: '0.00',\n annually: '0.00',\n },\n ],\n });\n }\n\n response.data = response.data.filter(plan => plan.id !== TRIAL_PLAN);\n\n setPlans(response.data);\n\n setFirstLoad(false);\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [dispatch, hasFreemium, t]);\n\n if (firstLoad || loadingCpanel || loadingProEmails || domainObject === undefined) {\n return \n { (shouldRenderNewTitanCards) && (\n <>\n setModalActiveCPanelAvailable(false)}\n open={modalActiveCPanelAvailable}\n idProEmail={idProEmail}\n domainObject={domainObject}\n domain={domain}\n />\n \n\n\n { (!shouldRenderNewTitanCards) && (\n
\n {t('proEmail.hirePlan.containerDescription')}\n \n )}\n\n { (!shouldRenderNewTitanCards) && (\n
\n {t('proEmail.hirePlan.bestFormatToPayment')}\n \n )}\n\n {shouldRenderNewTitanCards && (\n
\n {t('proEmail.hirePlan.newContainerDescription')}\n \n )}\n\n { (!shouldRenderNewTitanCards) && (\n
\n\n \n \n {t('proEmail.hirePlan.annually')}\n \n \n \n <>0\n {{ savedAmount: 15 }}\n <>1\n \n \n \n {t('proEmail.hirePlan.monthly')}\n \n )}\n className={classes.gridList}\n control={\n
\n
\n {t('proEmail.hirePlan.cpanelChangeTitle')}\n \n
\n \n <>0\n 1 \n <>2\n \n
\n {shouldRenderNewTitanCards ? (\n
\n
\n ) : (\n
\n {t('proEmail.hirePlan.cpanelEnableChange')}\n \n ) }\n\n \n
\n );\n};\n\nexport default withI18n()(withStyles(styles)(TitanHirePlan));\n","\nexport const CPANEL = 'cpanel';\nexport const TITAN = 'proemail';\n","import React from 'react';\nimport { withI18n } from 'react-i18next';\nimport { useParams } from 'react-router';\nimport EmailsContextProvider from '@/contexts/Emails/context';\nimport TitanHirePlanWrapper from './TitanHirePlanWrapper';\n\n\nconst TitanHirePlan = () => {\n const { domain } = useParams();\n\n return (\n \n \n );\n};\n\nexport default withI18n()(TitanHirePlan);\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.section``;\n","import React from 'react';\nimport * as Styles from './CancelSubscriptionPage.styles';\nimport { CancelSubscriptionHandler } from '@/components/billing';\n\nconst CancelSubscriptionPage = () => (\n \n \n);\n\nexport default CancelSubscriptionPage;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.section``;\n","import React from 'react';\nimport * as Styles from './CancelSubscriptionRenewalPage.styles';\nimport { CancelSubscriptionRenewalHandler } from '@/components/billing';\n\nconst CancelSubscriptionRenewalPage = () => (\n \n \n);\n\nexport default CancelSubscriptionRenewalPage;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.section``;\n","import PropTypes from 'prop-types';\n\nexport const SubscriptionCancelModalProps = {\n cancelRenewalDescriptionLabel: PropTypes.string,\n cancelRenewalLabel: PropTypes.string,\n cancelImmediateDescriptionLabel: PropTypes.string,\n cancelImmediateLabel: PropTypes.string,\n continueButtonLabel: PropTypes.string,\n descriptionLabel: PropTypes.string,\n onCloseClick: PropTypes.func,\n onContinueButtonClick: PropTypes.func,\n onQuitButtonClick: PropTypes.func,\n quitButtonLabel: PropTypes.string,\n titleLabel: PropTypes.string,\n};\n\nexport const CancelOptions = {\n CANCEL_RENEWAL: 'CANCEL_RENEWAL',\n CANCEL_IMMEDIATE: 'CANCEL_IMMEDIATE',\n};\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { RetentionSubscriptionHandler } from '@/components/billing';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useParams, useHistory } from 'react-router';\nimport { billingActions } from '@/redux/modules/billing';\nimport { withI18n } from 'react-i18next';\nimport * as Styles from './RetentionSubscriptionPage.styles';\nimport { CancelOptions } from '@/components/billing/components/manageSubscription/SubscriptionCancelModal/SubscriptionCancelModal.types';\nimport useLocale from '@/hooks/useLocale';\nimport { setBreadCrumb } from '@/redux/actions/breadCrumbs';\nimport { preChatActions } from '@/redux/modules';\n\nconst RetentionSubscriptionPage = ({ t }) => {\n const dispatch = useDispatch();\n const history = useHistory();\n const [retentionTypeParam, setRetentionTypeParam] = useState('');\n const [currentItem, setCurrentItem] = useState({});\n const { loading } = useSelector(state => state.common);\n const { items } = useSelector(state => state.billing.subscriptions);\n const breadCrumb = useSelector(state => state.breadCrumbs.crumbs[0]);\n const { triage } = useSelector(state => state.preChat);\n const { retentionType, subscriptionId, subscriptionType } = useParams();\n const { routes } = useLocale();\n const { retentionSubscription, retentionRenew } = routes;\n const isRenewCanceling = `/${retentionType}` === retentionRenew;\n const { retentionInfos } = currentItem;\n\n const getSubscriptions = useCallback(() => {\n if (items.length) return;\n\n dispatch(billingActions.subscriptions.request());\n }, [items, dispatch]);\n\n useEffect(() => {\n getSubscriptions();\n }, [getSubscriptions]);\n\n const getCurrentSubscription = useCallback(() => {\n if (!items.length) return;\n\n const filteredItem = items.find(({ id, type }) => String(id) === subscriptionId && type === subscriptionType);\n setCurrentItem(() => filteredItem);\n }, [items, subscriptionId, subscriptionType]);\n\n useEffect(() => {\n getCurrentSubscription();\n }, [getCurrentSubscription]);\n\n const verifyURL = useCallback(() => {\n const retentionTypeReturn = `/${retentionType}`.toLowerCase();\n const isCancelImediate = retentionTypeReturn === retentionSubscription;\n const isCancelRenew = retentionTypeReturn === retentionRenew;\n const {\n manageSubscription, subscriptions, cancelRenewal, cancelSubscription,\n } = routes;\n const pathCancel = isCancelImediate ? cancelSubscription : cancelRenewal;\n\n if (retentionInfos && retentionInfos.isCloseToCancelledTime) {\n return history.push(`${manageSubscription}${pathCancel}/${subscriptionId}/${subscriptionType}`);\n }\n\n if (isCancelImediate) {\n return setRetentionTypeParam(CancelOptions.CANCEL_IMMEDIATE);\n }\n\n if (isCancelRenew) {\n return setRetentionTypeParam(CancelOptions.CANCEL_RENEWAL);\n }\n\n history.push(subscriptions);\n }, [history, retentionInfos, subscriptionId, subscriptionType, retentionType, retentionSubscription, retentionRenew, routes]);\n\n useEffect(() => {\n verifyURL();\n }, [verifyURL]);\n\n const changeBreadcrumbTitle = useCallback(() => {\n if (isRenewCanceling) {\n breadCrumb.name = t('title.cancelRenewal');\n dispatch(setBreadCrumb([breadCrumb]));\n }\n }, [dispatch, t, breadCrumb, isRenewCanceling]);\n\n useEffect(() => {\n changeBreadcrumbTitle();\n }, [changeBreadcrumbTitle, retentionRenew, retentionType]);\n\n const openPreChatCancelFlow = useCallback(() => {\n if (triage.subscriptionToCancel) {\n dispatch(preChatActions.preChat.setShowPreChat(true));\n dispatch(preChatActions.subscription.setSubscriptionToCancel(null));\n }\n }, [triage, dispatch]);\n\n return (\n \n \n );\n};\n\nexport default withI18n()(RetentionSubscriptionPage);\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.section``;\n","import useLocale from '@/hooks/useLocale';\nimport { useEffect, useState } from 'react';\nimport { useHistory, useParams } from 'react-router';\nimport { CancelOptions } from '@/components/billing/components/manageSubscription/SubscriptionCancelModal/SubscriptionCancelModal.types';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setBreadCrumb } from '@/redux/actions/breadCrumbs';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { XRAY_ENABLED_DISCOUNT_RETENTION_WITH_NEW_BACKEND } from '@/config/GrowthBook/constants';\n\nconst useBenefitUrlVerification = (retentionInfos, t) => {\n const [retentionTypeParam, setRetentionTypeParam] = useState('');\n const breadCrumb = useSelector(state => state.breadCrumbs.crumbs[0]);\n const dispatch = useDispatch();\n const { retentionType } = useParams();\n const { routes } = useLocale();\n const { cancelSubscription, cancelRenewal } = routes;\n const history = useHistory();\n const isRenewCanceling = `/${retentionType}` === cancelRenewal;\n const enabledDiscountRetentionNewFlux = useFeatureIsOn(XRAY_ENABLED_DISCOUNT_RETENTION_WITH_NEW_BACKEND);\n\n useEffect(() => {\n const verifyURL = () => {\n const retentionTypeReturn = `/${retentionType}`.toLowerCase();\n\n if (retentionTypeReturn === cancelSubscription) {\n setRetentionTypeParam(CancelOptions.CANCEL_IMMEDIATE);\n } else if (retentionTypeReturn === cancelRenewal) {\n setRetentionTypeParam(CancelOptions.CANCEL_RENEWAL);\n } else {\n history.push(routes.subscriptions);\n }\n };\n\n const verifyIfUserIsAbleToDiscount = () => {\n const isUnableToDiscount = retentionInfos && (!retentionInfos.isSharedHostingAbleToDiscount || retentionInfos.isFullRefund);\n\n if (isUnableToDiscount) {\n history.push(routes.subscriptions);\n }\n };\n\n const changeBreadcrumbTitle = () => {\n if (t && isRenewCanceling) {\n breadCrumb.name = t('title.cancelRenewal');\n dispatch(setBreadCrumb([breadCrumb]));\n }\n };\n\n verifyURL();\n !enabledDiscountRetentionNewFlux && verifyIfUserIsAbleToDiscount();\n changeBreadcrumbTitle();\n }, [\n retentionType,\n cancelSubscription,\n cancelRenewal,\n routes,\n history,\n isRenewCanceling,\n breadCrumb,\n retentionInfos,\n t,\n dispatch,\n enabledDiscountRetentionNewFlux,\n ]);\n\n\n return {\n retentionTypeParam,\n isRenewCanceling,\n };\n};\n\nexport default useBenefitUrlVerification;\n","import useLocale from '@/hooks/useLocale';\nimport { useEffect, useState } from 'react';\n\nconst useSubscriptionHeaderProps = (item, testId = 'subscription-header-handler') => {\n const [headerProps, setHeaderProps] = useState({\n testId,\n title: '...',\n description: '',\n });\n const { billing: billingLocale } = useLocale();\n\n useEffect(() => {\n if (item.type) {\n const isDomain = item.type === 'domain';\n const {\n productName,\n domain,\n } = item;\n const getPageTitle = () => {\n if (isDomain) {\n return `${billingLocale.domainLabel} -`;\n }\n\n return domain ? `${productName} -` : productName;\n };\n\n setHeaderProps(props => ({\n ...props,\n title: getPageTitle(),\n description: domain || '',\n }));\n }\n }, [billingLocale, item]);\n\n return headerProps;\n};\n\nexport default useSubscriptionHeaderProps;\n","import React, { useContext, useEffect, useState } from 'react';\nimport { RetentionBenefitHandler } from '@/components/billing';\nimport { useHistory, useParams } from 'react-router';\nimport { withI18n } from 'react-i18next';\nimport * as Styles from './RetentionBenefitPage.styles';\nimport useLocale from '@/hooks/useLocale';\nimport { useBenefitParams } from '@/hooks/billing/subscriptions/useBenefitParams';\nimport { useBenefitUrlVerification } from '@/hooks/billing/subscriptions/useBenefitUrlVerification';\nimport { useBenefitInvoice } from '@/hooks/billing/subscriptions/useBenefitInvoice';\nimport { useBenefitAnalytics } from '@/hooks/billing/subscriptions/useBenefitAnalytics';\nimport { ThemeContext } from 'styled-components';\nimport { useSubscriptionHeaderProps } from '@/hooks/billing/subscriptions/useSubscriptionHeaderProps';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { AcceptedOfferSuccessModal } from '@/components/billing/subscriptions/AcceptedOfferSuccessModal';\nimport { billingAnalytics } from '@/analytics';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\n\nconst RetentionBenefitPage = ({ t }) => {\n const dispatch = useDispatch();\n const theme = useContext(ThemeContext);\n const colorText = theme.v2.colors.neutral.lowPure;\n const { currentItem, retentionInfos } = useBenefitParams();\n const { retentionTypeParam, isRenewCanceling } = useBenefitUrlVerification(retentionInfos, t);\n const {\n invoiceModalIsOpen,\n invoiceIsLoading,\n closeInvoiceModal,\n getInvoiceInfos,\n redirectToInvoice,\n publishInvoiceDraft,\n } = useBenefitInvoice();\n const { analyticsBenefitAccept, analyticsBenefitDecline } = useBenefitAnalytics(retentionInfos);\n const headerProps = useSubscriptionHeaderProps(currentItem, 'benefit-handler-header');\n const history = useHistory();\n const { subscriptionId, subscriptionType } = useParams();\n const [isAcceptOffer, setAcceptOffer] = useState(false);\n const invoiceStatus = useSelector(state => state.billing.invoice);\n const { billing: billingLocale, routes: routesLocale } = useLocale();\n const [version, setVersion] = useState(0);\n const subscription = useSelector(state => state.billing.subscription);\n const reactivationData = subscription && subscription.reactivation && subscription.reactivation.length > 0 && subscription.reactivation[0];\n\n const {\n subscriptions: {\n acceptedOfferSuccessModalClose, acceptedOfferSuccessModalDisplay, acceptedOfferSuccessModalRenewalAfterOption, acceptedOfferSuccessModalRenewalNowOption, acceptedOfferSuccessModalPayNowOption,\n },\n } = billingAnalytics;\n\n const handleLoading = () => {\n if (invoiceIsLoading) {\n setVersion(invoiceStatus && invoiceStatus.draft ? 0 : 1);\n setAcceptOffer(true);\n }\n };\n\n useEffect(() => {\n handleLoading();\n }, [invoiceStatus]);\n\n const cancelButtonClick = () => {\n analyticsBenefitDecline();\n const cancelPaths = {\n CANCEL_RENEWAL: `${routesLocale.manageSubscription}${routesLocale.cancelRenewal}/${subscriptionId}/${subscriptionType}`,\n CANCEL_IMMEDIATE: `${routesLocale.manageSubscription}${routesLocale.cancelSubscription}/${subscriptionId}/${subscriptionType}`,\n };\n history.push(cancelPaths[retentionTypeParam]);\n };\n\n const acceptBenefitClick = () => {\n analyticsBenefitAccept();\n getInvoiceInfos(currentItem.id);\n };\n\n const getAcceptedOfferSuccessModalProps = () => {\n const onCloseClick = () => {\n acceptedOfferSuccessModalClose();\n history.push(`${routesLocale.subscriptions}${routesLocale.manageSubscription}/${currentItem.id}/${currentItem.type}`);\n };\n\n const onBackAction = () => {\n acceptedOfferSuccessModalRenewalAfterOption();\n history.push(`${routesLocale.subscriptions}${routesLocale.manageSubscription}/${currentItem.id}/${currentItem.type}`);\n };\n\n const onDisplay = () => {\n acceptedOfferSuccessModalDisplay(invoiceStatus.draft);\n };\n\n const onAcceptAction = () => {\n if (invoiceStatus.draft === false) {\n acceptedOfferSuccessModalPayNowOption();\n history.push(`${routesLocale.invoices}${routesLocale.unpaid}/${invoiceStatus.invoiceId}?open_invoice=true`);\n } else {\n const executePayment = (enabledToPayment) => {\n enabledToPayment ? history.push(`${routesLocale.invoices}${routesLocale.unpaid}/${invoiceStatus.invoiceId}?open_invoice=true`)\n : dispatch(enqueueSnackbar(billingLocale.genericError));\n };\n\n acceptedOfferSuccessModalRenewalNowOption();\n publishInvoiceDraft({ invoiceId: invoiceStatus.invoiceId, executePayment });\n }\n };\n\n return {\n onBackAction,\n onDisplay,\n onCloseClick,\n invoiceId: currentItem.invoiceId,\n onAcceptAction,\n version,\n };\n };\n\n return (\n <>\n \n \n\n {isAcceptOffer && (\n \n \n \n \n {titleLabel} \n {descriptionLabel} \n \n \n {canShowCancelRenewalOption && (\n \n \n \n \n \n \n {cancelRenewalLabel}\n \n \n {cancelRenewalDescriptionLabel}\n \n \n \n \n )}\n\n {canShowCancelImmediateButton && (\n\n \n \n \n \n \n \n {cancelImmediateLabel}\n \n \n {cancelImmediateDescriptionLabel}\n \n \n \n \n )}\n \n \n \n \n \n \n \n \n \n \n );\n};\n\nSubscriptionCancelModal.propTypes = SubscriptionCancelModalProps;\n\nexport default SubscriptionCancelModal;\n","import styled, { css } from 'styled-components';\nimport checkedBackgroundSvg from '@/media/billing/checked-background.svg';\nimport { Button } from '@/pages/common/v1/Button/Button.styles';\nimport { Wrapper as Radio, Dot as RadioDot } from '@/pages/common/inputs/Radio/Radio.styles';\n\nexport const Wrapper = styled.article``;\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n padding: 32px;\n `}\n`;\n\nexport const Data = styled.div`\n ${() => css`\n padding-top: 24px;\n `}\n`;\n\nexport const Header = styled.header``;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.regular};\n margin: 0;\n padding: 0;\n `}\n`;\n\nexport const Description = styled.p`\n font-size: 16px;\n padding: 0;\n`;\n\nexport const OptionList = styled.ul`\n list-style: none;\n margin: 24px 0 0;\n padding: 0;\n`;\n\nexport const OptionItem = styled.li`\n ${({ theme, checked }) => css`\n background-image: ${checked ? `url(${checkedBackgroundSvg})` : 'none'};\n background-size: contain;\n border-radius: ${checked ? 0 : '2px'};\n box-shadow: ${checked ? 'none' : `0 0 0 1px ${theme.v1.color.border.primary}`};\n padding: 4px;\n\n &:not(:first-child) {\n margin-top: 24px;\n }\n\n &:hover {\n cursor: pointer;\n }\n `}\n`;\n\nexport const OptionItemWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.white.primary};\n display: flex;\n padding: 11px;\n `}\n`;\n\nexport const OptionRadio = styled.div`\n ${({ theme, checked }) => css`\n ${Radio} {\n border-color: ${checked ? theme.v1.color.text.featured : theme.v1.color.action.primary};\n }\n\n ${RadioDot} {\n background-color: ${checked ? theme.v1.color.text.featured : theme.v1.color.action.primary};\n }\n `}\n`;\n\nexport const OptionContent = styled.div`\n padding-left: 9px;\n`;\n\nexport const OptionLabel = styled.label`\n ${({ theme, checked }) => css`\n color: ${checked ? theme.v1.color.text.featured : theme.v1.color.action.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.medium};\n letter-spacing: -0.19px;\n transition: color 200ms ease-in-out;\n `}\n`;\n\nexport const OptionDescription = styled.p`\n font-size: 14px;\n`;\n\nexport const Controls = styled.div`\n display: flex;\n justify-content: center;\n margin-top: 32px;\n`;\n\nexport const ControlButton = styled.div`\n ${() => css`\n\n &:not(:first-child) {\n margin-left: 12px;\n }\n\n @media (max-width: 600px) {\n ${Button} {\n font-size: 14px;\n }\n\n &:not(:first-child) {\n margin-left: 0;\n }\n }\n `}\n`;\n\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n align-items: center;\n flex-direction: column;\n }\n `}\n`;\n\nexport const InfoIcon = styled.span`\n ${({ theme }) => css`\n display: contents;\n & svg {\n fill: ${theme.v1.color.warning.attention};\n }\n `}\n`;\n\nexport const InfoText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.sm};\n margin: 0;\n\n strong {\n font-weight: ${theme.v1.font.weights.medium};\n }\n\n @media (max-width: ${theme.breakpoints.sm}) {\n text-align: center;\n }\n `}\n`;\n\nexport const Note = styled.p`\n font-size: 14px;\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.section`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.feedback.canceledLight};\n font-family: ${theme.v2.font.family.primary};\n padding: 16px 24px 16px 24px;\n `}\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: 22px;\n margin: 0;\n `}\n`;\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n display: flex;\n\n &:not(:first-child) {\n margin-top: 24px;\n }\n @media (max-width: ${theme.v2.breakpoints.md}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const Item = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:not(:first-child) {\n margin-left: 40px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n &:not(:first-child) {\n margin: 24px 0 0 0;\n }\n }\n `}\n`;\n\nexport const Label = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowLight};\n display: inline-flex;\n font-size: 12px;\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 16px;\n `}\n`;\n\nexport const TooltipWrapper = styled.span`\n margin-left: 8px;\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n font-size: 16px;\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 22px;\n margin-top: 4px;\n\n > div {\n position: relative;\n }\n\n > strong {\n margin: 0px 10px 0px 5px;\n }\n `}\n`;\n\nexport const LineThrough = styled.span`\n ${({ discount }) => css`\n text-decoration: ${discount ? 'line-through' : 'none'}\n `}\n`;\n\nexport const TagWrapper = styled.span`\n${({ theme }) => css`\n\n> div {\n background-color: ${theme.v2.colors.feedback.activePure};\n border-radius: 4px;\n font-weight: ${theme.v2.font.weights.bold};\n padding: 4px 8px;\n}\n`}\n`;\n","import React from 'react';\nimport { SubscriptionActiveRenewalModalProps } from '../SubscriptionActiveRenewalModal/SubscriptionActiveRenewalModal.types';\nimport * as Styles from './SubscriptionRenewalModalData.styles';\nimport { DiscountBlock } from '../../DiscountBlock';\nimport { DiscountType } from '@/components/billing/subscriptions/PaymentModal/PaymentModal.types';\n\nconst SubscriptionRenewalModalData = ({\n installmentsAmountLabel = 'Installments amount',\n loading = false,\n nextRenovationDateLabel = 'Next renovation',\n nextRenovationDateText = '',\n paymentMethodLabel = 'Payment method',\n productLabel = 'Product',\n paymentMethodText = '',\n renovationAmountText = '',\n productNameText = '',\n enabledPaymentInfo = true,\n discount,\n paymentCycleLabel = 'Renovation Cycle',\n paymentCycleText = '',\n enabledDiscountOfferBanner,\n}) => (\n \n\n \n \n \n {productLabel}\n \n \n {(loading || !productNameText) ? '...' : productNameText}\n \n \n \n \n {paymentCycleLabel}\n \n \n {(loading || !paymentCycleText) ? '...' : paymentCycleText}\n \n \n \n \n {nextRenovationDateLabel}\n \n \n {(loading || !nextRenovationDateText) ? '...' : nextRenovationDateText}\n \n \n \n {enabledPaymentInfo && (\n \n \n \n {paymentMethodLabel}\n {enabledPaymentInfo === true}\n \n \n {(loading || !paymentMethodText) ? '...' : paymentMethodText}\n \n \n \n )}\n\n {(enabledPaymentInfo || (discount && discount.type !== DiscountType.RENEWAL)) && (\n \n \n \n {installmentsAmountLabel}\n \n \n \n {(loading || !renovationAmountText) ? '...' : renovationAmountText}\n \n \n \n \n )}\n\n {((discount && discount.type === DiscountType.RENEWAL)) && enabledDiscountOfferBanner && (\n \n);\n\nSubscriptionRenewalModalData.propTypes = SubscriptionActiveRenewalModalProps;\n\n\nexport default SubscriptionRenewalModalData;\n","import React, { useEffect } from 'react';\nimport { Button } from '@/pages/common/v1/Button';\nimport { Modal } from '@/pages/common/Modal';\nimport * as Styles from './SubscriptionActiveRenewalModal.styles';\nimport { IconError } from '@/icons';\nimport { SubscriptionRenewalModalData } from '../SubscriptionRenewalModalData';\nimport { SubscriptionActiveRenewalModalProps } from './SubscriptionActiveRenewalModal.types';\nimport { locale } from '@/utils/locale';\nimport useLocale from '@/hooks/useLocale';\nimport { billingAnalytics } from '@/analytics';\nimport { DiscountType } from '@/components/billing/subscriptions/PaymentModal/PaymentModal.types';\n\nconst SubscriptionActiveRenewalModal = ({\n confirmButtonLabel = 'Confirm activation',\n descriptionAlertInfoLabel = 'Select the form you want below:',\n onCloseClick,\n onConfirmButtonClick,\n titleLabel = 'Activate renewal subscription',\n installmentsAmountText = '',\n productNameText = '',\n paymentMethodText = '',\n renovationAmountText = '',\n installmentsPaymentFormText = '',\n nextRenovationDateText = '',\n showInstallments = true,\n enabledPaymentInfo = true,\n discount,\n from,\n to,\n discountText,\n note,\n paymentCycleText,\n paymentCycleLabel,\n origin,\n enabledDiscountOfferBanner,\n}) => {\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n\n useEffect(() => {\n origin === 'url'\n ? subscriptionAnalytics.activeRenewalModalDisplayByURL()\n : subscriptionAnalytics.activeRenewalModalDisplay();\n\n if (discount) {\n subscriptionAnalytics.activeRenewalModalDisplayDiscountBlock();\n }\n }, []);\n\n const handleOnCloseClick = (event) => {\n subscriptionAnalytics.activeRenewalModalClose();\n onCloseClick && onCloseClick(event);\n };\n const { billing: billingLocale } = useLocale();\n\n const {\n manageSubscription: manageSubscriptionLocale,\n } = billingLocale;\n\n\n const handleOnConfirmButtonClick = () => {\n subscriptionAnalytics.activeRenewalModalClick();\n onConfirmButtonClick && onConfirmButtonClick();\n };\n\n const getSubscriptionRenewalModalDataProps = () => ({\n installmentsAmountLabel: manageSubscriptionLocale.installmentsAmountLabel,\n installmentsAmountText,\n installmentsPaymentFormLabel: manageSubscriptionLocale.installmentsPaymentFormLabel,\n installmentsPaymentFormText,\n loading: false,\n nextRenovationDateLabel: manageSubscriptionLocale.nextRenovationDateLabel,\n nextRenovationDateText,\n paymentMethodLabel: manageSubscriptionLocale.paymentMethodLabel,\n productLabel: locale(manageSubscriptionLocale.productNameLabel),\n paymentMethodText,\n paymentCycleText,\n paymentCycleLabel,\n renovationAmountLabel: manageSubscriptionLocale.renovationAmountLabel,\n renovationAmountText,\n productNameText,\n showInstallments,\n enabledPaymentInfo,\n enabledDiscountOfferBanner,\n discount,\n from,\n to,\n discountText,\n });\n\n return (\n \n \n \n \n {titleLabel} \n \n \n {note} \n )}\n \n \n \n {descriptionAlertInfoLabel} \n \n \n \n \n \n \n \n \n \n );\n};\n\nSubscriptionActiveRenewalModal.propTypes = SubscriptionActiveRenewalModalProps;\n\nexport default SubscriptionActiveRenewalModal;\n","import { locale } from '@/utils/locale';\n\nexport const billingLocale = {\n domainLabel: locale('billing.domainLabel'),\n};\n\n\nexport const refundFeedbackLocale = {\n titleLabel: locale('subscriptions.refundFeedback.titleLabel'),\n statusLabel: locale('subscriptions.refundFeedback.statusLabel'),\n statusText: {\n pending: locale('subscriptions.refundFeedback.statusText.pending'),\n accomplished: locale('subscriptions.refundFeedback.statusText.accomplished'),\n },\n valueLabel: locale('subscriptions.refundFeedback.valueLabel'),\n methodLabel: locale('subscriptions.refundFeedback.methodLabel'),\n methodText: method => locale(method),\n};\n","import styled, { css } from 'styled-components';\nimport { Button } from '@/pages/common/v1/Button/Button.styles';\nimport { Wrapper as Radio, Dot as RadioDot } from '@/pages/common/inputs/Radio/Radio.styles';\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n padding: 32px;\n `}\n`;\n\nexport const Data = styled.div`\n ${() => css`\n padding-top: 16px;\n `}\n`;\n\nexport const Header = styled.header``;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n margin: 0;\n padding: 0;\n `}\n`;\n\nexport const Description = styled.p`\n font-size: 16px;\n padding: 0;\n`;\n\nexport const OptionList = styled.ul`\n list-style: none;\n margin: 24px 0 0;\n padding: 0;\n`;\n\nexport const OptionItem = styled.div`\n ${({ checked }) => css`\n background-size: contain;\n border-radius: ${checked ? 0 : '2px'};\n padding: 4px;\n\n &:hover {\n cursor: pointer;\n }\n `}\n`;\n\nexport const OptionItemWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.white.primary};\n display: flex;\n padding: 11px;\n padding-botton:0px;\n `}\n`;\n\nexport const OptionRadio = styled.div`\n ${({ theme, checked }) => css`\n ${Radio} {\n border-color: ${checked ? theme.v1.color.text.featured : theme.v1.color.action.primary};\n }\n\n ${RadioDot} {\n background-color: ${checked ? theme.v1.color.text.featured : theme.v1.color.action.primary};\n }\n `}\n`;\n\nexport const OptionContent = styled.div`\n padding-left: 9px;\n`;\n\nexport const OptionLabel = styled.label`\n ${({ theme, checked }) => css`\n color: ${checked ? theme.palette.blue.dark : theme.palette.secondary.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.medium};\n letter-spacing: -0.19px;\n transition: color 200ms ease-in-out;\n `}\n`;\n\nexport const OptionDescription = styled.p`\n font-size: 14px;\n`;\n\nexport const Controls = styled.div`\n display: flex;\n justify-content: center;\n margin-top: 32px;\n`;\n\nexport const ControlButton = styled.div`\n ${() => css`\n \n &:not(:first-child) {\n margin-left: 12px;\n }\n\n @media (max-width: 600px) {\n ${Button} {\n font-size: 14px;\n }\n\n &:not(:first-child) {\n margin-left: 0;\n }\n }\n `}\n`;\n\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n align-items: center;\n flex-direction: column;\n }\n `}\n`;\n\nexport const InfoPix = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 16px;\n margin-top: 36px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n align-items: center;\n flex-direction: column;\n }\n `}\n`;\n\n\nexport const InfoIcon = styled.span`\n ${({ theme }) => css`\n display: contents;\n & svg {\n fill: ${theme.v1.color.warning.attention};\n }\n `}\n`;\n\nexport const InfoText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.sm};\n margin: 0;\n\n strong {\n font-weight: ${theme.v1.font.weights.medium};\n }\n\n @media (max-width: ${theme.breakpoints.sm}) {\n text-align: center;\n }\n `}\n`;\n\nexport const Item = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:not(:first-child) {\n margin-left: 40px;\n }\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n &:not(:first-child) {\n margin: 24px 0 0 0;\n }\n }\n `}\n`;\nexport const Label = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v1.color.text.label};\n display: inline-flex;\n font-size: 12px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 16px;\n `}\n`;\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: 22px;\n margin-top: 4px;\n `}\n`;\nexport const WrapperData = styled.section`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.background.wizard};\n font-family: ${theme.v1.font.family.primary};\n padding: 16px 24px 16px 24px;\n `}\n`;\nexport const WrapperInfo = styled.section`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v1.color.background.wizard};\n font-family: ${theme.v1.font.family.primary};\n justify-content: center;\n padding: 16px 24px 16px 24px;\n text-align:center;\n `}\n`;\nexport const DescriptionInfo = styled.p`\n ${({ theme }) => css`\n font-size:${theme.font.sizes.xxs};\n margin: 8px 0px 0px 0px;\n `}\n`;\nexport const ContentCloseButton = styled.div`\n${() => css`\n position: absolute;\n top: 0px;\n right: 0px;\n`}\n`;\nexport const ContentData = styled.div`\n ${({ theme }) => css`\n display: flex;\n\n &:not(:first-child) {\n margin-top: 24px;\n }\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n flex-direction: column;\n }\n `}\n`;\nexport const ContentPaymentSelector = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n padding-top: 0px;\n `}\n`;\n\nexport const ContentOptionsInSelectord = styled.div`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v1.color.text.primary};\n display:flex;\n font-family: ${theme.v1.font.family.primary};\n justify-content: center;\n padding-top: 23px;\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n display: block;\n }\n `}\n`;\n\nexport const Chip = styled.span`\n ${() => css`\n margin-left:8px;\n position: relative;\n top: -2px;\n `}\n`;\n","import PropTypes from 'prop-types';\n\nexport const SwitchPaymentMethodModalProps = {\n cancelRenewalDescriptionLabel: PropTypes.string,\n cancelRenewalLabel: PropTypes.string,\n cancelImmediateDescriptionLabel: PropTypes.string,\n cancelImmediateLabel: PropTypes.string,\n continueButtonLabel: PropTypes.string,\n descriptionLabel: PropTypes.string,\n onCloseClick: PropTypes.func,\n onContinueButtonClick: PropTypes.func,\n onQuitButtonClick: PropTypes.func,\n quitButtonLabel: PropTypes.string,\n titleLabel: PropTypes.string,\n};\n\nexport const PaymentMethods = {\n CREDIT_CARD: 'CREDIT_CARD',\n TICKET: 'BOLETO',\n PAY_PAL: 'PAY_PAL',\n PIX: 'PIX',\n};\n","import React, { useState } from 'react';\nimport { Button } from '@/pages/common/v1/Button';\nimport { Separator } from '@/pages/common/v1/Separator';\nimport {\n CircularProgress,\n Dialog,\n IconButton,\n} from '@material-ui/core'; import * as Styles from './SwitchPaymentMethodModal.styles';\nimport { PaymentMethods, SwitchPaymentMethodModalProps } from './SwitchPaymentMethodModal.types';\nimport useLocale from '@/hooks/useLocale';\nimport { Radio } from '@/pages/common';\nimport {\n BOLETO, BOLETO_CL_CO, BOLETO_MX, BRASPAG_CREDIT, CREDIT_CARD_ES, GATORPAY_BOLETO, GATORPAY_PAYPAL, PIX,\n} from '@/config/billing/paymentMethods';\nimport {\n isBRServer, isCLServer, isCOServer, isMobile, isMXServer,\n} from '@/utils/Validators/validation';\nimport { IconError } from '@/icons';\nimport PaypalDialog from '@/components/Paypal/PaypalDialog';\nimport CreditCardDialog from '@/components/CreditCard/CreditCardDialog';\nimport { Close } from '@material-ui/icons';\nimport { PAYMENT_STATUS } from '@/pages/Invoices/types';\nimport { useHistory } from 'react-router';\nimport { billingAnalytics } from '@/analytics';\nimport { PaypalActionTypes } from '@/components/Paypal/PaypalDialog/Paypal.types';\nimport { Chip } from '@/pages/common/v1/Chip';\nimport PixCard from '@/components/Pix/PixCard';\nimport { useFeatureIsOn, useFeatureValue } from '@growthbook/growthbook-react';\nimport { XRAY_ENABLED_OPTION_TO_SELECT_PAYPAL_ACCOUNT, XRAY_INSTALLMENTS_MODAL, XRAY_LIMIT_DATE_TO_DISPLAY_NEW_PIX_LABEL } from '@/config/GrowthBook/constants';\nimport { differenceInCalendarDays } from 'date-fns';\n\nconst SwitchPaymentMethodModal = ({\n onCloseClick,\n requestsLoading = false,\n titleLabel = 'Switch the payment method',\n selectPaymentMethodLabel = 'Select payment method',\n infoChangePaymentByTicketLabel = 'Payment by ticket info',\n infoChangePaymentByPayPalLabel = 'Payment by paypal info',\n infoChangePaymentByCreditCardLabel = 'Payment by credit card info',\n confirmSwitchLabel = 'Switch payment method',\n selectCardLabel = 'Select credit card to pay',\n infoAddNewCreditCardLabel = 'Add new credit card',\n invoiceId = '',\n actualPaymentMethod = '',\n enabledPaymentByCreditCard = true,\n enabledPaymentByPayPal = true,\n enabledPaymentByTicket = true,\n enabledPaymentByPix = false,\n onSwitchPaymentMethod,\n subscriptionId = '',\n subscriptionType = '',\n infoPaymentByPicPayLabel = '',\n infoSendEmailWithPix = '',\n}) => {\n const history = useHistory();\n const { billing: billingLocale } = useLocale();\n const [option, setOption] = useState('');\n\n const [paymentMethod, setPaymentMethod] = useState('');\n const [creditCardInstallment, setCreditCardInstallment] = useState('');\n const [hasValidCreditCardSelected, setHasValidCreditCardSelected] = useState(false);\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n\n const isCreditCardInstallmentsEnabled = useFeatureIsOn(XRAY_INSTALLMENTS_MODAL);\n const enabledChangePayPalAccount = useFeatureIsOn(XRAY_ENABLED_OPTION_TO_SELECT_PAYPAL_ACCOUNT);\n const enabledLimitDateNewPixLabel = useFeatureIsOn(XRAY_LIMIT_DATE_TO_DISPLAY_NEW_PIX_LABEL);\n const limitDateNewPixLabel = useFeatureValue(XRAY_LIMIT_DATE_TO_DISPLAY_NEW_PIX_LABEL);\n const limitDateToDisplayNewPixLabel = enabledLimitDateNewPixLabel && limitDateNewPixLabel.limitDate != null ? limitDateNewPixLabel.limitDate : null;\n\n const enabledNewPixChipLabel = limitDateToDisplayNewPixLabel != null && differenceInCalendarDays(new Date(`${limitDateToDisplayNewPixLabel} 00:00:00`), new Date()) > 0;\n\n const {\n paymentMethods: paymentMethodsLocale,\n manageSubscriptionPaymentInvoiceModal: labelsLocale,\n } = billingLocale;\n\n const isCreditCardSelected = () => option === PaymentMethods.CREDIT_CARD;\n\n const isTicketSelected = () => option === PaymentMethods.TICKET;\n\n const isPayPalSelected = () => option === PaymentMethods.PAY_PAL;\n\n const isPixSelected = () => option === PaymentMethods.PIX;\n\n const isPaymentByTicket = () => [BOLETO, BOLETO_CL_CO, BOLETO_MX, GATORPAY_BOLETO].includes(actualPaymentMethod);\n\n const isPaymentByPix = () => [PIX].includes(actualPaymentMethod);\n\n const handleOnCloseClick = (event) => {\n subscriptionAnalytics.changePaymentMethodClick('2_opção_fechar');\n onCloseClick && onCloseClick(event);\n };\n\n const onSetCreditCardSelected = (isValidCreditCardSelected) => {\n setHasValidCreditCardSelected(isValidCreditCardSelected);\n\n subscriptionAnalytics.changePaymentMethodClick(isValidCreditCardSelected ? '3_usar_cartão_existente' : '3_usar_cartão_novo');\n };\n\n const getTypeCreditCard = () => {\n if (!isBRServer) {\n return CREDIT_CARD_ES;\n }\n if (creditCardInstallment !== '') {\n return creditCardInstallment;\n }\n\n return BRASPAG_CREDIT;\n };\n\n const onSelectCreditCardInstallment = (newCreditCardInstallment) => {\n setCreditCardInstallment(newCreditCardInstallment);\n setPaymentMethod(newCreditCardInstallment);\n };\n\n const getTypeTicket = () => {\n if (isCLServer || isCOServer) {\n return BOLETO_CL_CO;\n }\n\n if (isMXServer) {\n return BOLETO_MX;\n }\n\n if (isBRServer) {\n return GATORPAY_BOLETO;\n }\n\n return 'dlocalcash';\n };\n const onPaymentPayPalExecuted = (event, route) => {\n if (event && event.status === PAYMENT_STATUS.SUCCESS) {\n history.push(route);\n }\n };\n\n const onPaymentCreditCardExecuted = (event, route) => {\n if (event && (event.status === PAYMENT_STATUS.SUCCESS || event.status === PAYMENT_STATUS.PENDING_ANALYSIS)) {\n history.push(route);\n }\n };\n\n const clickTiket = () => {\n const typeTicket = getTypeTicket();\n setOption(PaymentMethods.TICKET);\n setPaymentMethod(typeTicket);\n subscriptionAnalytics.changePaymentMethodClick('2_selecionar_boleto');\n };\n\n const clickPayPal = () => {\n setOption(PaymentMethods.PAY_PAL);\n setPaymentMethod(GATORPAY_PAYPAL);\n subscriptionAnalytics.changePaymentMethodClick('2_selecionar_paypal');\n };\n\n const clickCreditCard = () => {\n setOption(PaymentMethods.CREDIT_CARD);\n subscriptionAnalytics.changePaymentMethodClick('2_selecionar_cartão');\n if (!isBRServer) {\n setPaymentMethod(CREDIT_CARD_ES);\n }\n };\n\n const clickPix = () => {\n setOption(PaymentMethods.PIX);\n setPaymentMethod(PIX);\n\n subscriptionAnalytics.changePaymentMethodClick('2_selecionar_pix');\n };\n\n const getInfoChangeMessage = () => {\n if (isTicketSelected()) {\n return infoChangePaymentByTicketLabel;\n }\n\n if (isPayPalSelected()) {\n return infoChangePaymentByPayPalLabel;\n }\n\n if (isCreditCardSelected()) {\n return infoChangePaymentByCreditCardLabel;\n }\n\n return '';\n };\n\n const isDisabledSwitchPaymentButton = () => {\n if (isCreditCardSelected()) {\n return isBRServer ? creditCardInstallment === '' || !hasValidCreditCardSelected : !hasValidCreditCardSelected;\n }\n return false;\n };\n\n const switchPaymentMethod = () => {\n if (onSwitchPaymentMethod && paymentMethod !== '') {\n if (isCreditCardSelected()) {\n onSwitchPaymentMethod(getTypeCreditCard);\n }\n\n onSwitchPaymentMethod(paymentMethod);\n subscriptionAnalytics.changePaymentMethodClick('3_confirmar_alteração');\n }\n };\n\n return (\n \n \n \n \n \n \n \n {titleLabel} \n \n \n\n \n {selectPaymentMethodLabel}\n \n {enabledPaymentByCreditCard && (\n \n \n \n \n \n \n {paymentMethodsLocale.creditCard}\n \n\n \n \n \n )}\n {!isPaymentByPix() && enabledPaymentByPix && (\n \n \n \n \n \n \n {paymentMethodsLocale.pix}\n {enabledNewPixChipLabel && (\n \n \n )}\n \n\n \n \n \n )}\n {!isPaymentByTicket() && enabledPaymentByTicket && (\n \n \n \n \n \n \n {paymentMethodsLocale.ticket}\n \n\n \n \n \n )}\n {enabledPaymentByPayPal && (\n \n \n \n \n \n \n {paymentMethodsLocale.paypal}\n \n\n \n \n \n )}\n \n\n \n {option !== '' && (\n \n\n {isPixSelected() && (\n <>\n \n {infoPaymentByPicPayLabel}\n \n \n \n \n \n {infoSendEmailWithPix}\n \n \n )}\n {isCreditCardSelected() && (\n <>\n {enabledPaymentByCreditCard && (\n \n \n \n \n {getInfoChangeMessage()}\n\n \n \n )}\n {!isPayPalSelected() && (\n \n \n \n \n \n )}\n\n {isPayPalSelected() && (\n <>\n {enabledPaymentByPayPal && (\n \n \n );\n};\n\nSwitchPaymentMethodModal.propTypes = SwitchPaymentMethodModalProps;\n\nexport default SwitchPaymentMethodModal;\n","import styled, { css } from 'styled-components';\nimport { Button } from '@/pages/common/v1/Button/Button.styles';\nimport { Wrapper as Radio, Dot as RadioDot } from '@/pages/common/inputs/Radio/Radio.styles';\nimport { Link } from 'react-router-dom';\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n padding: 32px;\n `}\n`;\n\nexport const Data = styled.div`\n ${() => css`\n padding-top: 16px;\n `}\n`;\n\nexport const Header = styled.header``;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n margin: 0;\n padding: 0;\n `}\n`;\n\nexport const Description = styled.p`\n font-size: 16px;\n padding: 0;\n`;\n\nexport const OptionList = styled.ul`\n list-style: none;\n margin: 24px 0 0;\n padding: 0;\n`;\n\nexport const OptionItem = styled.div`\n ${({ checked }) => css`\n background-size: contain;\n border-radius: ${checked ? 0 : '2px'};\n padding: 4px;\n\n &:hover {\n cursor: pointer;\n }\n `}\n`;\n\nexport const OptionItemWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.white.primary};\n display: flex;\n padding: 11px;\n padding-botton:0px;\n `}\n`;\n\nexport const OptionRadio = styled.div`\n ${({ theme, checked }) => css`\n ${Radio} {\n border-color: ${checked ? theme.v1.color.text.featured : theme.v1.color.action.primary};\n }\n\n ${RadioDot} {\n background-color: ${checked ? theme.v1.color.text.featured : theme.v1.color.action.primary};\n }\n `}\n`;\n\nexport const OptionContent = styled.div`\n padding-left: 9px;\n`;\n\nexport const OptionLabel = styled.label`\n ${({ theme, checked }) => css`\n color: ${checked ? theme.palette.blue.dark : theme.palette.secondary.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.medium};\n letter-spacing: -0.19px;\n transition: color 200ms ease-in-out;\n `}\n`;\n\nexport const OptionDescription = styled.p`\n font-size: 14px;\n`;\n\nexport const Controls = styled.div`\n display: flex;\n justify-content: center;\n margin-top: 32px;\n`;\n\nexport const ControlButton = styled.div`\n ${() => css`\n \n &:not(:first-child) {\n margin-left: 12px;\n }\n\n @media (max-width: 600px) {\n ${Button} {\n font-size: 14px;\n }\n\n &:not(:first-child) {\n margin-left: 0;\n }\n }\n `}\n`;\n\n\nexport const Info = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 16px;\n margin-top: 16px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n align-items: center;\n flex-direction: column;\n }\n `}\n`;\n\nexport const InfoIcon = styled.span`\n ${({ theme }) => css`\n display: contents;\n & svg {\n fill: ${theme.v1.color.warning.success};\n height:26px;\n width:26px;\n }\n `}\n`;\n\nexport const InfoText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.sm};\n margin: 0;\n\n strong {\n font-weight: ${theme.v1.font.weights.medium};\n }\n\n @media (max-width: ${theme.breakpoints.sm}) {\n text-align: center;\n }\n `}\n`;\n\nexport const Item = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:not(:first-child) {\n margin-left: 40px;\n }\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n &:not(:first-child) {\n margin: 24px 0 0 0;\n }\n }\n `}\n`;\nexport const Label = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v1.color.text.label};\n display: inline-flex;\n font-size: 12px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 16px;\n `}\n`;\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.medium};\n letter-spacing: 0.01px;\n line-height: 22px;\n margin-top: 4px;\n `}\n`;\nexport const WrapperData = styled.section`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.background.wizard};\n font-family: ${theme.v1.font.family.primary};\n padding: 16px 24px 16px 24px;\n `}\n`;\nexport const WrapperInfo = styled.section`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v1.color.background.wizard};\n font-family: ${theme.v1.font.family.primary};\n justify-content: center;\n padding: 16px 24px 16px 24px;\n text-align:center;\n `}\n`;\nexport const DescriptionInfo = styled.p`\n ${({ theme }) => css`\n font-size:${theme.font.sizes.xxs};\n margin: 8px 0px 0px 0px;\n `}\n`;\nexport const ContentCloseButton = styled.div`\n${() => css`\n position: absolute;\n top: 0px;\n right: 0px;\n`}\n`;\nexport const ContentData = styled.div`\n ${({ theme }) => css`\n display: flex;\n\n &:not(:first-child) {\n margin-top: 24px;\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n flex-direction: column;\n }\n `}\n`;\nexport const ContentPaymentSelector = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n padding-top: 0px;\n `}\n`;\n\nexport const ContentOptionsInSelectord = styled.div`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v1.color.text.primary};\n display:flex;\n font-family: ${theme.v1.font.family.primary};\n justify-content: center;\n padding-top: 23px;\n `}\n`;\nexport const CTA = styled(Link)`\n ${({ theme, arrow }) => css`\n color: ${theme.palette.secondary.primary};\n cursor: pointer;\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.medium};\n line-height: ${theme.font.sizes.xl};\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n\n &:before {\n content: url(${arrow});\n font-size: ${theme.font.sizes.xxxxxxl};\n font-weight: 1000;\n opacity: 0;\n position: absolute;\n transition: transform 0.1s, opacity 0.1s;\n transform: translate(-18px, 3px) rotate(180deg);\n @media (max-width: ${theme.breakpoints.md}) {\n transform:none;\n content:none;\n }\n }\n\n &:hover:before {\n opacity: 1;\n transform: translate(-18px, 3px) rotate(180deg);\n @media (max-width: ${theme.breakpoints.md}) {\n transform:none;\n content:none;\n }\n }\n\n @media (max-width: ${theme.breakpoints.md}) {\n display: block;\n text-decoration: underline;\n }\n\n `}\n`;\n\nexport const ArrowIcon = styled.img`\n${({ theme, arrow }) => css`\n@media (max-width: ${theme.breakpoints.md}) {\n bottom: -2px;\n content: url(${arrow});\n position: relative;\n right:-2px;\n width:16px;\n }\n `}\n`;\n","import React, { } from 'react';\nimport {\n Dialog,\n IconButton,\n} from '@material-ui/core'; import * as Styles from './FinishSwitchPaymentMethodModal.styles';\nimport { FinishSwitchPaymentMethodModalProps } from './FinishSwitchPaymentMethodModal.types';\nimport { IconSuccess } from '@/icons';\nimport { Close } from '@material-ui/icons';\nimport {\n BRASPAG_PARC_10X,\n BRASPAG_PARC_11X,\n BRASPAG_PARC_12X,\n BRASPAG_CREDIT,\n BRASPAG_PARC_1X,\n BRASPAG_PARC_2X,\n BRASPAG_PARC_3X,\n BRASPAG_PARC_4X,\n BRASPAG_PARC_5X,\n BRASPAG_PARC_6X,\n BRASPAG_PARC_7X,\n BRASPAG_PARC_8X,\n BRASPAG_PARC_9X,\n CREDIT_CARD_ES,\n GATORPAY_PAYPAL,\n PAYPAL,\n BOLETO,\n BOLETO_CL_CO,\n BOLETO_MX,\n GATORPAY_BOLETO,\n PIX,\n} from '@/config/billing/paymentMethods';\nimport arrow from '@/media/icons/icon_arrow_right.svg';\nimport {\n isBRServer,\n} from '@/utils/Validators/validation';\n\nconst FinishSwitchPaymentMethodModal = ({\n onCloseClick,\n titleLabel = 'Switch payment method',\n infoSwitchPaymentMethodLabel = 'Description',\n buttonBackLabel = 'Back to subscriptions',\n onBack,\n newPaymentMethod = 'boleto',\n\n}) => {\n const handleOnCloseClick = (event) => {\n onCloseClick && onCloseClick(event);\n };\n\n const handleOnBack = () => {\n onBack && onBack();\n };\n\n const getPaymentMethod = () => {\n switch (newPaymentMethod) {\n case BRASPAG_PARC_10X:\n case BRASPAG_PARC_11X:\n case BRASPAG_PARC_12X:\n case BRASPAG_PARC_1X:\n case BRASPAG_PARC_2X:\n case BRASPAG_PARC_3X:\n case BRASPAG_PARC_4X:\n case BRASPAG_PARC_5X:\n case BRASPAG_PARC_6X:\n case BRASPAG_PARC_7X:\n case BRASPAG_PARC_8X:\n case BRASPAG_PARC_9X:\n case CREDIT_CARD_ES:\n case BRASPAG_CREDIT:\n return 3;\n case GATORPAY_PAYPAL:\n case PAYPAL:\n return 1;\n case BOLETO:\n case GATORPAY_BOLETO:\n case BOLETO_CL_CO:\n case BOLETO_MX:\n return 2;\n case PIX:\n return 5;\n default:\n return -1;\n }\n };\n\n return (\n \n \n \n \n \n \n \n {titleLabel} \n \n \n \n \n \n {`${infoSwitchPaymentMethodLabel[0]} ${infoSwitchPaymentMethodLabel[getPaymentMethod()]}`} \n {infoSwitchPaymentMethodLabel[4]}\n \n \n \n \n\n \n {buttonBackLabel}\n \n \n \n\n \n \n );\n};\n\nFinishSwitchPaymentMethodModal.propTypes = FinishSwitchPaymentMethodModalProps;\n\nexport default FinishSwitchPaymentMethodModal;\n","import PropTypes from 'prop-types';\n\nexport const FinishSwitchPaymentMethodModalProps = {\n cancelRenewalDescriptionLabel: PropTypes.string,\n cancelRenewalLabel: PropTypes.string,\n cancelImmediateDescriptionLabel: PropTypes.string,\n cancelImmediateLabel: PropTypes.string,\n continueButtonLabel: PropTypes.string,\n descriptionLabel: PropTypes.string,\n onCloseClick: PropTypes.func,\n onContinueButtonClick: PropTypes.func,\n onQuitButtonClick: PropTypes.func,\n quitButtonLabel: PropTypes.string,\n titleLabel: PropTypes.string,\n};\n","import styled, { css } from 'styled-components';\n\nexport const IconWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n align-self: center;\n background-color: ${theme.v2.colors.feedback.activePure};\n border-radius: 50%;\n display: flex;\n height: 56px;\n justify-content: center;\n margin-top: 48px;\n width: 56px;\n `}\n`;\n\nexport const ContentWrapper = styled.div`\n align-self: center;\n margin-top: 24px;\n`;\n\nexport const ModalTitle = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 32px;\n margin: 0px 0px 24px 0px;\n text-align: center;\n `}\n`;\n\nexport const ModalText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 16px;\n letter-spacing: 0.01px;\n line-height: 24px;\n margin: 0;\n text-align: center;\n `}\n`;\n\nexport const FooterWrapper = styled.div`\n align-self: center;\n display: flex;\n flex-direction: column;\n margin: 24px 0px 0px;\n\n & button {\n height: 48px;\n border-radius: 24px;\n width: 100%;\n }\n\n & button:first-child {\n margin-bottom: 6px;\n }\n`;\n","import React, { useContext } from 'react';\nimport { ThemeContext } from 'styled-components';\nimport { Modal } from '@/pages/common/Modal';\nimport { IconCheck } from '@/icons';\nimport * as Styles from './ReactivationConfirmationModal.styles';\nimport { Button } from '@/pages/common/v1';\n\nconst ReactivationConfirmationModal = ({\n displayModal = true,\n onClose,\n testId = 'reactivation-confirmation-modal',\n title = 'Renovação ativada',\n clouseLabel = 'Fechar',\n description = 'A renovação automática da assinatura foi ativada com sucesso!',\n}) => {\n const theme = useContext(ThemeContext);\n\n const handleOnClose = () => {\n onClose && onClose();\n };\n\n return (\n displayModal && (\n \n \n \n\n \n {title} \n {description} \n \n\n \n \n \n )\n );\n};\n\nexport default ReactivationConfirmationModal;\n","import styled, { css } from 'styled-components';\n\nexport const IconWrapper = styled.div`\n ${() => css`\n align-items: center;\n align-self: center;\n border-radius: 50%;\n display: flex;\n height: 48px;\n justify-content: center;\n margin-top: 48px;\n width: 48px;\n `}\n`;\n\nexport const ContentWrapper = styled.div`\n align-self: center;\n margin: 24px 0px 48px 0px;\n`;\n\nexport const ModalTitle = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0.01px;\n line-height: 32px;\n margin: 0px 0px 24px 0px;\n text-align: center;\n `}\n`;\n\nexport const ModalText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 16px;\n letter-spacing: 0.01px;\n line-height: 24px;\n margin: 0;\n text-align: center;\n `}\n`;\n\nexport const FooterWrapper = styled.div`\n align-self: center;\n display: flex;\n flex-direction: column;\n margin: 24px 0px 0px;\n\n & button {\n height: 48px;\n border-radius: 24px;\n width: 100%;\n }\n\n & button:first-child {\n margin-bottom: 6px;\n }\n`;\n","import React, { } from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport * as Styles from './InvoiceGeneratorModal.styles';\nimport { IconLoading } from 'gatorcomponents';\n\nconst InvoiceGeneratorModal = ({\n displayModal = true,\n testId = 'invoice-generate-modal',\n title = 'Por favor, aguarde',\n description = ['Estamos te levando para o pagamento.', 'Não feche esta janela.'],\n}) => (\n displayModal && (\n \n \n \n\n \n {title} \n {description[0]} \n {description[1]} \n \n \n )\n);\n\nexport default InvoiceGeneratorModal;\n","import React, {\n useState, useEffect, useCallback, useContext,\n} from 'react';\nimport {\n differenceInCalendarDays, parseISO, format, subDays,\n} from 'date-fns';\nimport { ThemeContext } from 'styled-components';\nimport useLocale from '@/hooks/useLocale';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { CHANGE_PLAN_CYCLE_PRODUCTS, PAGE_RETENTION_VERSIONS, SUBSCRIPTION_STATUS } from '@/enums/billing/billing.enum';\nimport { Header, Button } from '@/pages/common';\nimport {\n SubscriptionResume, SubscriptionRenewalData, SubscriptionControls, RefundFeedback,\n} from '@/components/billing/components';\nimport * as Styles from './ManageSubscriptionNewHandler.styles';\nimport {\n ManageSubscriptionProps, Modais, EnumFeedbackStatus, EnumActionOpeningModal,\n} from './ManageSubscriptionNewHandler.types';\nimport {\n BRASPAG_PARC_10X,\n BRASPAG_PARC_11X,\n BRASPAG_PARC_12X,\n BRASPAG_CREDIT,\n BRASPAG_PARC_1X,\n BRASPAG_PARC_2X,\n BRASPAG_PARC_3X,\n BRASPAG_PARC_4X,\n BRASPAG_PARC_5X,\n BRASPAG_PARC_6X,\n BRASPAG_PARC_7X,\n BRASPAG_PARC_8X,\n BRASPAG_PARC_9X,\n CREDIT_CARD_ES,\n GATORPAY_PAYPAL,\n PAYPAL,\n PIX,\n LIST_BOLETO_METHODS,\n PAYMENT_TYPE,\n TICKET_ES,\n} from '@/config/billing/paymentMethods';\nimport { SubscriptionCancelModal } from '../../components/manageSubscription/SubscriptionCancelModal';\nimport { IconError } from '@/icons';\nimport { SubscriptionActiveRenewalModal } from '../../components/manageSubscription/SubscriptionActiveRenewalModal';\nimport SubscriptionsFunctions from '../SubscriptionsHandler/SubscriptionsHandler.functions';\nimport { billingAnalytics } from '@/analytics';\nimport {\n refundFeedbackLocale,\n} from './ManageSubscriptionNewHandler.locale';\nimport { PaymentModal } from '../PaymentModal';\nimport { SwitchPaymentMethodModal } from '../SwitchPaymentMethodModal';\nimport { FinishSwitchPaymentMethodModal } from '../FinishSwitchPaymentMethodModal';\nimport { useHistory } from 'react-router';\nimport { DiscountType, OriginCalling } from '../PaymentModal/PaymentModal.types';\nimport { ExpiredTimePixModal } from '../ExpiredTimePixModal';\nimport { PaymentSuccessPixModal } from '../PaymentSuccessPixModal';\nimport { GenerateErrorPixModal } from '../GenerateErrorPixModal';\nimport { ReactivationModal } from '../ReactivationModal';\nimport { isBRServer, isMobile } from '@/utils/Validators/validation';\nimport { formatDate } from '@/utils/Formatters/formatDate';\nimport { preChatAnalytics } from '@/analytics/preChat';\nimport { TicketRedirectModal } from '../TicketRedirectModal';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { billingActions, preChatActions } from '@/redux/modules';\nimport { WHMCS_URL } from '@/config';\nimport { ReactivationConfirmationModal } from '../../components/ReactivationConfirmationModal';\nimport { InvoiceGeneratorModal } from '../../components/InvoiceGeneratorModal';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { DiscountOfferBanner } from '../DiscountOfferBanner';\nimport {\n CHARLIE_CHANGE_SUBSCRIPTION_PAYMENT_METHOD,\n CHARLIE_PAYMENT_MODAL_V2,\n FOXTROT_ECOMMERCE_PLUS_CYCLE_CHANGE,\n XRAY_ENABLED_DISCOUNT_OFFER_BANNER,\n XRAY_ENABLED_DISCOUNT_RETENTION,\n XRAY_ENABLED_DISCOUNT_RETENTION_CANCEL_IMMEDIATE,\n XRAY_ENABLED_DISCOUNT_RETENTION_CANCEL_RENEWAL,\n XRAY_ENABLED_DISCOUNT_RETENTION_WITH_NEW_BACKEND,\n XRAY_RETENTION_OFFER_VERSION_PAGE_AB_TEST,\n} from '@/config/GrowthBook/constants';\nimport { useDiagnostic } from '@/components/Layout/Menu/MyAlerts';\nimport { CancelOptions } from '../../components/manageSubscription/SubscriptionActiveRenewalModal/SubscriptionActiveRenewalModal.types';\nimport { ChangePaymentModal } from '@/pages/CreditCard/components/ChangePaymentModal';\nimport { FLOW_ORIGIN, MODAL_STEPS } from '@/pages/CreditCard/components/ChangePaymentModal/ChangePaymentModal.types';\nimport { usePaymentModal } from '@/hooks/billing/subscriptions/usePaymentModal';\nimport { CALLER } from '@/hooks/billing/subscriptions/usePaymentModal/usePaymentModal.types';\nimport { loadInvoices } from '@/redux/actions/invoices';\n\nconst ManageSubscriptionNewHandler = ({\n items = [],\n redirectTo = () => { },\n subscriptionId,\n subscriptionType,\n displayReflundBlock = true,\n enabledPaymentErroInfoMessageByCreditCard = false,\n enabledPaymentByPayPal = false,\n enabledChangePayPalAccount = false,\n enabledPaymentByCreditCard = false,\n enabledPaymentByTicket = false,\n enabledPaymentByPix = false,\n limitDateToDisplayNewPixLabel = null,\n enabledNewLabelsWithPix = false,\n enabledModalInSubscriptionManagerByUrl = false,\n originCalling = OriginCalling.SUBSCRIPTION_MANAGER,\n preChatState,\n}) => {\n const theme = useContext(ThemeContext);\n const enabledNewPixChipLabel = limitDateToDisplayNewPixLabel != null && differenceInCalendarDays(new Date(`${limitDateToDisplayNewPixLabel} 00:00:00`), new Date()) > 0;\n const enabledDiscountOfferBanner = useFeatureIsOn(XRAY_ENABLED_DISCOUNT_OFFER_BANNER);\n const enabledEcommercePlusCycleChange = useFeatureIsOn(FOXTROT_ECOMMERCE_PLUS_CYCLE_CHANGE);\n const enabledDiscountRetention = useFeatureIsOn(XRAY_ENABLED_DISCOUNT_RETENTION);\n const usePaymentModalV2 = useFeatureIsOn(CHARLIE_PAYMENT_MODAL_V2);\n const useChangePaymentV2 = useFeatureIsOn(CHARLIE_CHANGE_SUBSCRIPTION_PAYMENT_METHOD);\n\n const { requestDiagnostic } = useDiagnostic();\n\n const { billing: billingLocale, routes: routesLocale } = useLocale();\n const {\n ecommercePlus: ecommercePlusLocale,\n manageSubscription: manageSubscriptionLocale,\n subscriptions: subscriptionsLocale,\n manageSubscriptionCancelModal: manageSubscriptionCancelModalLocale,\n manageSubscriptionActiveRenewalModal: manageSubscriptionActiveRenewalModalLocale,\n paymentCycle: paymentCycleLocale,\n manageSubscriptionPaymentInvoiceModal: manageSubscriptionPaymentInvoiceModalLocale,\n manageSubscriptionSwitchPaymentMethodInvoiceModal: manageSubscriptionSwitchPaymentMethodInvoiceModalLocale,\n reactivationConfirmationModal: reactivationConfirmationModalLocale,\n invoiceGeneratorModal: invoiceGeneratorModalLocale,\n manageSubscriptionFinishSwitchPaymentMethodInvoiceModal: manageSubscriptionFinishSwitchPaymentMethodInvoiceLocale,\n paymentMethods: paymentMethodsLocale,\n paymentTypes: paymentTypesLocale,\n status: statusLocale,\n } = billingLocale;\n const {\n manageSubscription,\n cancelSubscription,\n cancelRenewal,\n retentionRenew,\n retentionSubscriptionConfirm,\n retentionSubscription,\n } = routesLocale;\n const [currentItem, setCurrentItem] = useState({});\n const [modalById, setModalById] = useState(Modais.NONE);\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n const history = useHistory();\n const [newPaymentMethod, setNewPaymentMethod] = useState('');\n const [hasQRCodeGenerated, setHasQRCodeGenerated] = useState(false);\n const [qrCodeGenerated, setQRCodeGenerated] = useState('');\n const [pixCodeGenerated, setPixCodeGenerated] = useState('');\n const [hasOriginSavePDF, setOriginSavePDF] = useState(false);\n const [showRenewalSubscriptionModal, setShowRenewalSubscriptionModal] = useState(false);\n const [hasDraftInvoice, setDraftInvoice] = useState(false);\n\n const summary = useSelector(state => state.summary);\n const billingState = useSelector(state => state.billing);\n const { triage } = useSelector(state => state.preChat);\n const { subscription, subscriptions: subscriptionsState } = billingState;\n\n const retentionFlux = currentItem.isSharedHostingAbleToRetention;\n const dispatch = useDispatch();\n const [urlTicket, setUrlTicket] = useState('');\n const enabledInvoiceGeneration = currentItem != null && currentItem.modal === EnumActionOpeningModal.MODAL_INVOICE_GENERATION;\n const enabledDiscountOffer = currentItem != null && currentItem.discount && currentItem.discount.type === DiscountType.RENEWAL;\n const canDisplayChangePaymentModal = !!subscriptionsState.itemsNotInCreditcard.length;\n const changePaymentMethodLoading = subscriptionsState.loadingItemsNotInCreditCard || subscription.switchPaymentMethod.loading;\n const switchPaymentMethodStatus = subscription.switchPaymentMethod.status;\n\n const [currentCaller, setCurrentCaller] = useState(CALLER.INVOICES);\n\n useEffect(() => {\n dispatch(loadInvoices('Unpaid', false));\n }, [dispatch]);\n\n const getCurrentItem = useCallback(() => {\n if (!items.length) return;\n items\n .filter(item => item.id === subscriptionId && item.type === subscriptionType)\n .forEach(item => setCurrentItem(item));\n }, [items, subscriptionId, subscriptionType]);\n\n useEffect(() => {\n getCurrentItem();\n }, [getCurrentItem]);\n\n useEffect(() => {\n subscriptionAnalytics.cancelSubscriptionModalPageView('resumo_assinatura');\n }, [subscriptionAnalytics]);\n\n const hasCurrentItem = JSON.stringify(currentItem) !== '{}';\n\n useEffect(() => {\n if (hasCurrentItem && currentItem.discount && currentItem.discount.type === DiscountType.RETENTION && currentItem.unpaidInvoice.id === null) {\n setDraftInvoice(true);\n }\n }, [hasCurrentItem]);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const getPathWithRetention = {\n cancelRenewalPath: `${manageSubscription}${retentionSubscriptionConfirm}${retentionRenew}/${subscriptionId}/${subscriptionType}`,\n cancelImmediatePath: `${manageSubscription}${retentionSubscriptionConfirm}${retentionSubscription}/${subscriptionId}/${subscriptionType}`,\n };\n\n const {\n paymentModal,\n } = usePaymentModal({\n caller: currentCaller,\n onClose: () => setModalById(Modais.NONE),\n invoiceId: currentItem.invoiceId,\n });\n\n const getStatus = useCallback(() => {\n if (hasCurrentItem) {\n const {\n status,\n substatus,\n } = currentItem;\n\n return `${status.toLowerCase()}/${substatus.toLowerCase()}`;\n }\n }, [currentItem, hasCurrentItem]);\n\n const getCurrentPaymentMethod = () => {\n if (hasCurrentItem) {\n const {\n paymentMethod,\n } = currentItem;\n\n return paymentMethod;\n }\n };\n\n const isStatusPermitted = (status = []) => currentItem && status.includes(currentItem.substatus.toLowerCase());\n\n const canShowRefundFeedback = useCallback(\n\n () => displayReflundBlock && hasCurrentItem && !!(isStatusPermitted(['cancelled']) && (currentItem && currentItem.refundFeedback)),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [currentItem, hasCurrentItem, displayReflundBlock],\n );\n\n const isDomain = useCallback(() => currentItem.type === 'domain', [currentItem]);\n\n const hasRenewalActive = useCallback(() => currentItem.cancelType === null, [currentItem]);\n\n const onCancelSubscriptionImmediatelyClick = useCallback(() => {\n const cancelSubscriptionImmediatelyPath = retentionFlux\n ? getPathWithRetention.cancelImmediatePath\n : `${manageSubscription}${cancelSubscription}/${subscriptionId}/${subscriptionType}`;\n\n redirectTo(cancelSubscriptionImmediatelyPath);\n }, [cancelSubscription, getPathWithRetention, manageSubscription, redirectTo, retentionFlux, subscriptionId, subscriptionType]);\n\n const onEcommercePlusCycleChangeClick = useCallback(() => {\n redirectTo(''); // TODO: Add path\n }, [redirectTo]);\n\n useEffect(() => {\n if (Object.keys(currentItem).length) {\n if (triage.subscriptionToCancel) {\n if (hasRenewalActive() && getStatus() !== SUBSCRIPTION_STATUS.PENDING_PAYMENT) {\n setModalById(Modais.CANCEL_SUBSCRIPTION);\n }\n if (!hasRenewalActive()) {\n onCancelSubscriptionImmediatelyClick();\n }\n }\n }\n }, [triage, hasRenewalActive, isDomain, getStatus, onCancelSubscriptionImmediatelyClick, currentItem, dispatch]);\n\n useEffect(() => {\n if (triage.subscriptionToChangePaymentMethod) {\n setModalById(Modais.ACTIVE_SWITCH_PAYMENT_METHOD_IN_SUBSCRIPTION);\n }\n }, [triage.subscriptionToChangePaymentMethod]);\n\n const listPaymentToDisplayPaymentButton = [\n BRASPAG_PARC_10X,\n BRASPAG_PARC_11X,\n BRASPAG_PARC_12X,\n BRASPAG_PARC_1X,\n BRASPAG_PARC_2X,\n BRASPAG_PARC_3X,\n BRASPAG_PARC_4X,\n BRASPAG_PARC_5X,\n BRASPAG_PARC_6X,\n BRASPAG_PARC_7X,\n BRASPAG_PARC_8X,\n BRASPAG_PARC_9X,\n CREDIT_CARD_ES,\n GATORPAY_PAYPAL,\n PAYPAL,\n ];\n\n const canShowPaymentInvoceButton = (status = getStatus(), paymentMethod = getCurrentPaymentMethod()) => {\n const isCompatibleStatusWhenNotImmediatePayment = [\n SUBSCRIPTION_STATUS.PENDING_PAYMENT,\n SUBSCRIPTION_STATUS.OVERDUE,\n SUBSCRIPTION_STATUS.TO_DUE,\n SUBSCRIPTION_STATUS.SUSPENDED,\n ].includes(status);\n\n const isCompatibleStatusWhenImmediatePayment = [\n SUBSCRIPTION_STATUS.PENDING_PAYMENT,\n SUBSCRIPTION_STATUS.OVERDUE,\n SUBSCRIPTION_STATUS.SUSPENDED,\n ].includes(status);\n\n if (enabledDiscountRetention && currentItem && currentItem.discount && currentItem.discount.type === DiscountType.RETENTION && isMobile) {\n return false;\n }\n\n if (isCompatibleStatusWhenNotImmediatePayment && !listPaymentToDisplayPaymentButton.includes(paymentMethod)) {\n return true;\n }\n\n if (isCompatibleStatusWhenImmediatePayment && listPaymentToDisplayPaymentButton.includes(paymentMethod)) {\n return true;\n }\n\n return false;\n };\n\n const canShowSwitchPaymentMethodButton = (status = getStatus()) => ![\n SUBSCRIPTION_STATUS.OVERDUE,\n SUBSCRIPTION_STATUS.PENDING_PAYMENT,\n ].includes(status);\n\n const canShowRenewalData = (status = getStatus()) => hasRenewalActive() && ![\n SUBSCRIPTION_STATUS.PENDING,\n SUBSCRIPTION_STATUS.PENDING_ANALYSIS,\n SUBSCRIPTION_STATUS.PENDING_PAYMENT,\n SUBSCRIPTION_STATUS.CANCELLED,\n SUBSCRIPTION_STATUS.EXPIRED_CANCELLED,\n SUBSCRIPTION_STATUS.FRAUD_CANCELLED,\n SUBSCRIPTION_STATUS.TERMINATED_CANCELLED,\n ].includes(status);\n\n const canChangeCyclePlanProduct = () => {\n const brand = isBRServer ? 'BR' : 'ES';\n const isSignatureActive = getStatus() === SUBSCRIPTION_STATUS.ACTIVE;\n return isSignatureActive && CHANGE_PLAN_CYCLE_PRODUCTS[brand].some((product) => {\n const currentProductName = product.toLowerCase();\n const signatureProductName = currentItem.productName.toLowerCase();\n return signatureProductName.includes(currentProductName);\n });\n };\n\n const canShowPlanButton = canChangeCyclePlanProduct();\n\n const canShowControls = (status = getStatus()) => ![\n SUBSCRIPTION_STATUS.PENDING,\n SUBSCRIPTION_STATUS.PENDING_ANALYSIS,\n SUBSCRIPTION_STATUS.CANCELLED,\n SUBSCRIPTION_STATUS.EXPIRED_CANCELLED,\n SUBSCRIPTION_STATUS.FRAUD_CANCELLED,\n SUBSCRIPTION_STATUS.TERMINATED_CANCELLED,\n ].includes(status);\n\n const canShowSubscriptionCancelModal = () => modalById === Modais.CANCEL_SUBSCRIPTION;\n const canShowSubscriptionRenewalModal = () => modalById === Modais.ACTIVE_RENEWAL_SUBSCRIPTION;\n const canShowPaymentModal = () => modalById === Modais.ACTIVE_PAYMENT_IN_SUBSCRIPTION;\n const canShowSwitchPaymentMethodModal = () => modalById === Modais.ACTIVE_SWITCH_PAYMENT_METHOD_IN_SUBSCRIPTION;\n const canShowFinishSwitchPaymentMethodModal = () => modalById === Modais.ACTIVE_FINISH_SWITCH_PAYMENT_METHOD_IN_SUBSCRIPTION;\n const canShowExpiredTimePixModal = () => modalById === Modais.ACTIVE_EXPIRED_TIME_PIX_MODAL;\n const canShowPaymentSuccessPixModal = () => modalById === Modais.ACTIVE_PAYMENT_SUCCESS_PIX_MODAL;\n const canShowGenerateErrorPixModal = () => modalById === Modais.ACTIVE_GENERATE_ERROR_PIX_MODAL;\n const canShowReactivationModal = () => modalById === Modais.ACTIVE_SUBSCRIPTION_REACTIVATION_MODAL;\n const canShowTicketRedirectModal = () => modalById === Modais.ACTIVE_REDIRECT_TICKET_MODAL;\n const canShowReactivationConfirmationModal = () => modalById === Modais.ACTIVE_RENOVATION_SUBSCRIPTION_SUCCESS_MODAL;\n const canInvoiceGeneratorModal = () => modalById === Modais.ACTIVE_INVOICE_GENERATOR_MODAL;\n const canShowChangePaymentModal = () => modalById === Modais.CHANGE_PAYMENT_METHOD;\n const enabledDiscountRetentionNewFlux = useFeatureIsOn(XRAY_ENABLED_DISCOUNT_RETENTION_WITH_NEW_BACKEND);\n const enabledDiscountRetentionCancelImmediate = useFeatureIsOn(XRAY_ENABLED_DISCOUNT_RETENTION_CANCEL_IMMEDIATE);\n const enabledDiscountRetentionCancelRenewal = useFeatureIsOn(XRAY_ENABLED_DISCOUNT_RETENTION_CANCEL_RENEWAL);\n const retentionPageVersion = useFeatureIsOn(XRAY_RETENTION_OFFER_VERSION_PAGE_AB_TEST) ? PAGE_RETENTION_VERSIONS.NEW : PAGE_RETENTION_VERSIONS.OLD;\n\n useEffect(() => {\n dispatch(billingActions.hostingAbleDiscountRequest.request({ subscriptionId }));\n }, [subscriptionId, dispatch]);\n\n const getBoletoAndPixProducts = useCallback(() => {\n dispatch(billingActions.subscriptions.requestSubscriptionsNotInCreditCard());\n }, [dispatch]);\n\n const [dueDateFormated, setDueDateFormated] = useState('');\n\n const onRedirectInvoices = () => {\n redirectTo(`${routesLocale.billing}${routesLocale.unpaid}/${currentItem.invoiceId}`);\n };\n\n const onDisplayModalPayment = () => {\n setCurrentCaller(CALLER.INVOICES);\n setHasQRCodeGenerated(false);\n subscriptionAnalytics.executePaymentClick('1_link_pague_agora');\n setModalById(Modais.ACTIVE_PAYMENT_IN_SUBSCRIPTION);\n };\n\n useEffect(() => {\n if (preChatState && preChatState.reactivationRedirect) {\n setModalById(Modais.ACTIVE_SUBSCRIPTION_REACTIVATION_MODAL);\n }\n if (preChatState && preChatState.triage.redirectManageSubscription) {\n setTimeout(() => {\n dispatch(preChatActions.subscription.redirectManageSubscription(false));\n dispatch(preChatActions.preChat.setShowPreChat(true));\n }, 2000);\n }\n }, [preChatState, dispatch]);\n\n const onDisplayReactivationModal = () => {\n preChatAnalytics.subscriptionPageReactivationClick();\n setModalById(Modais.ACTIVE_SUBSCRIPTION_REACTIVATION_MODAL);\n };\n\n const getBackgroundStatusColor = (status = getStatus()) => {\n switch (status) {\n case SUBSCRIPTION_STATUS.ACTIVE:\n case SUBSCRIPTION_STATUS.REGISTERED: {\n return theme.palette.success.primary;\n }\n\n case SUBSCRIPTION_STATUS.CANCELLED:\n case SUBSCRIPTION_STATUS.EXPIRED_CANCELLED:\n case SUBSCRIPTION_STATUS.FRAUD_CANCELLED:\n case SUBSCRIPTION_STATUS.TERMINATED_CANCELLED: {\n return theme.palette.grey.primary;\n }\n\n case SUBSCRIPTION_STATUS.PENDING_ANALYSIS:\n case SUBSCRIPTION_STATUS.PENDING_PAYMENT:\n case SUBSCRIPTION_STATUS.PENDING:\n case SUBSCRIPTION_STATUS.TRANSFERRED_AWAY: {\n return theme.palette.danger.primary;\n }\n\n case SUBSCRIPTION_STATUS.TO_DUE: {\n return theme.palette.warning.primary;\n }\n\n case SUBSCRIPTION_STATUS.EXPIRED:\n case SUBSCRIPTION_STATUS.OVERDUE:\n case SUBSCRIPTION_STATUS.SUSPENDED: {\n return theme.palette.error.primary;\n }\n\n default: {\n return theme.palette.grey.primary;\n }\n }\n };\n\n const getHeaderProps = () => {\n const defaultArgs = {\n testId: 'subscription-manage-handler-header',\n title: '...',\n description: '',\n };\n\n if (!hasCurrentItem) {\n return defaultArgs;\n }\n\n const {\n productName,\n domain,\n } = currentItem;\n\n const getPageTitle = () => {\n if (isDomain()) {\n return `${billingLocale.domainLabel} -`;\n }\n\n return domain ? `${productName} -` : productName;\n };\n\n return {\n ...defaultArgs,\n title: getPageTitle(),\n description: domain || '',\n };\n };\n\n\n const enabledPaymentInfo = () => {\n if (hasCurrentItem && enabledModalInSubscriptionManagerByUrl) {\n if (enabledInvoiceGeneration) {\n return false;\n }\n }\n return true;\n };\n\n const enableRenewalSubscriptionModal = () => {\n setModalById(Modais.ACTIVE_RENEWAL_SUBSCRIPTION);\n };\n\n useEffect(() => {\n const urlParams = new URLSearchParams(window.location.search);\n const modal = urlParams.get('modal');\n\n if (enabledModalInSubscriptionManagerByUrl && modal && currentItem.modal != null) {\n setShowRenewalSubscriptionModal(true);\n enableRenewalSubscriptionModal();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [currentItem, setShowRenewalSubscriptionModal]);\n\n\n const getSubscriptionResumeProps = () => {\n const defaultProps = {\n loading: !hasCurrentItem,\n paymentCycleLabel: manageSubscriptionLocale.paymentCycleLabel,\n reactivationButtonLabel: manageSubscriptionLocale.reactivationButtonLabel,\n reactivationTooltipLabel: manageSubscriptionLocale.reactivationTooltipLabel,\n trustPeriodDescriptionLabel: manageSubscriptionLocale.trustPeriodDescriptionLabel,\n trustPeriodLabel: manageSubscriptionLocale.trustPeriodLabel,\n productNameLabel: manageSubscriptionLocale.productNameLabel,\n registerDateLabel: manageSubscriptionLocale.registerDateLabel,\n resumeTitleLabel: manageSubscriptionLocale.resumeTitleLabel,\n statusLabel: manageSubscriptionLocale.statusLabel,\n statusTextColor: theme.v1.color.white.primary,\n orderStatusLocale: manageSubscriptionLocale.orderUnderReview,\n paymentMethodsLocale,\n };\n\n if (!hasCurrentItem) {\n return defaultProps;\n }\n const {\n addonId,\n paymentCycle,\n productName,\n registerDate,\n substatus,\n trustReactivationAvailable,\n trustReactivationOnTheCycle,\n type,\n overrideDate,\n overrideSuspension,\n orderUnderReview,\n paymentMethod,\n } = currentItem;\n\n\n const transformPaymentCycle = () => paymentCycleLocale[paymentCycle.replace(/\\s+|-+/, '')];\n\n const canShowPaymentCycle = (status = getStatus()) => hasRenewalActive() && ![\n SUBSCRIPTION_STATUS.CANCELLED,\n SUBSCRIPTION_STATUS.EXPIRED_CANCELLED,\n SUBSCRIPTION_STATUS.FRAUD_CANCELLED,\n SUBSCRIPTION_STATUS.TERMINATED_CANCELLED,\n ].includes(status);\n\n return {\n ...defaultProps,\n paymentCycleText: transformPaymentCycle(),\n productNameText: isDomain() ? billingLocale.domainLabel : productName,\n registerDateText: format(parseISO(registerDate), 'dd/MM/yyyy'),\n showPaymentCycle: canShowPaymentCycle(),\n statusBackgroundColor: getBackgroundStatusColor(),\n statusText: statusLocale[`${substatus}StatusLabel`],\n onDisplayReactivationModal,\n overrideDate: overrideDate && formatDate(overrideDate, true),\n trustReactivationAvailable,\n overrideSuspension,\n trustReactivationOnTheCycle,\n alreadyReactivatedTooltip: manageSubscriptionLocale.alreadyReactivatedTooltip,\n shouldRenderAlreadyReactivatedTooltip: substatus === 'suspended',\n enabledPaymentInfo: enabledPaymentInfo(),\n orderUnderReview,\n summary,\n substatus,\n paymentMethod: paymentMethodsLocale[paymentMethod],\n registerDate,\n isEcommercePlus: type === 'addon' && addonId === 14,\n ecommercePlusChangeCycleLabel: ecommercePlusLocale && ecommercePlusLocale.changeCycleLabel,\n enabledEcommercePlusCycleChange,\n onEcommercePlusCycleChangeClick,\n };\n };\n\n const isBoleto = paymentMethod => LIST_BOLETO_METHODS.includes(paymentMethod);\n\n const isPix = paymentMethod => [PIX].includes(paymentMethod);\n\n const isCreditCard = paymentMethod => [\n BRASPAG_PARC_10X,\n BRASPAG_PARC_11X,\n BRASPAG_PARC_12X,\n BRASPAG_PARC_1X,\n BRASPAG_PARC_2X,\n BRASPAG_PARC_3X,\n BRASPAG_PARC_4X,\n BRASPAG_PARC_5X,\n BRASPAG_PARC_6X,\n BRASPAG_PARC_7X,\n BRASPAG_PARC_8X,\n BRASPAG_PARC_9X,\n CREDIT_CARD_ES,\n ].includes(paymentMethod);\n\n const isPaypal = paymentMethod => [\n GATORPAY_PAYPAL,\n PAYPAL,\n ].includes(paymentMethod);\n\n\n const getDescriptionAlert = () => {\n if (!enabledPaymentInfo()) {\n return manageSubscriptionActiveRenewalModalLocale.descriptonConfirmationAlertlabel;\n }\n return (isPix(currentItem.paymentMethod) || isBoleto(currentItem.paymentMethod)) ? manageSubscriptionActiveRenewalModalLocale.descriptionPixBoletoAlertInfoLabel : manageSubscriptionActiveRenewalModalLocale.descriptionAlertInfoLabel;\n };\n\n const getSubscriptionRenewalDataProps = () => {\n const onDisplayModalPayment = () => {\n setHasQRCodeGenerated(false);\n setModalById(Modais.ACTIVE_PAYMENT_IN_SUBSCRIPTION);\n };\n\n const defaultProps = {\n installmentsAmountLabel: manageSubscriptionLocale.installmentsAmountLabel,\n installmentsPaymentFormTooltipText: enabledNewLabelsWithPix && isBRServer ? manageSubscriptionLocale.installmentsPaymentFormTooltipWithPixText : manageSubscriptionLocale.installmentsPaymentFormTooltipText,\n loading: !hasCurrentItem,\n nextRenovationDateLabel: manageSubscriptionLocale.nextRenovationDateLabel,\n paymentMethodLabel: manageSubscriptionLocale.paymentMethodLabel,\n paymentMethodTooltipText: manageSubscriptionLocale.paymentMethodTooltipText,\n renewalDataTitleLabel: manageSubscriptionLocale.renewalDataTitleLabel,\n renovationAmountLabel: manageSubscriptionLocale.renovationAmountLabel,\n renovationInfoText: hasDraftInvoice ? manageSubscriptionLocale.renovationDraftInvoiceInfoLabel : manageSubscriptionLocale.renovationInfoLabel,\n enabledPaymentInfo: enabledPaymentInfo(),\n enabledDiscountRetention,\n onDisplayModalPayment,\n paymantLink: manageSubscriptionLocale.payInvoice,\n };\n\n if (!hasCurrentItem) {\n return defaultProps;\n }\n\n const {\n amount: renovationAmount,\n dueDate,\n installments,\n paymentMethod,\n paymentType,\n discount,\n paymentCycle,\n } = currentItem;\n\n const transformPaymentCycle = () => paymentCycleLocale[paymentCycle.replace(/\\s+|-+/, '')];\n const transformPaymentMethodLabel = () => {\n if (!isBRServer) {\n const paymentTypes = {\n [PAYMENT_TYPE.CASH_PAYMENT]: paymentTypesLocale.cash_payment,\n [PAYMENT_TYPE.QR_PAYMENT]: paymentTypesLocale.qr_payment,\n [PAYMENT_TYPE.WALLET]: paymentTypesLocale.wallet,\n [PAYMENT_TYPE.GP_PAYPAL]: paymentTypesLocale.gp_paypal,\n [PAYMENT_TYPE.BANK_TRANSFER]: paymentTypesLocale.bank_transfer,\n };\n\n if (paymentType && paymentMethod === TICKET_ES) {\n return paymentTypes[paymentType];\n }\n }\n\n if (isCreditCard(paymentMethod)) {\n return paymentMethodsLocale.creditCard;\n }\n\n if (isPaypal(paymentMethod)) {\n return paymentMethodsLocale.paypal;\n }\n\n if (isPix(paymentMethod)) {\n return paymentMethodsLocale.pix;\n }\n\n return paymentMethodsLocale.ticket;\n };\n\n return {\n ...defaultProps,\n ...(installments && {\n }),\n nextRenovationDateText: format(subDays(new Date(`${dueDate} 00:00:00`), 1), 'dd/MM/yyyy'),\n paymentMethodText: transformPaymentMethodLabel(),\n renovationAmountText: formatCurrency(renovationAmount),\n discount,\n paymentCycleText: transformPaymentCycle(),\n paymentCycleLabel: manageSubscriptionLocale.paymentCycleLabel,\n };\n };\n\n useEffect(() => {\n if (currentItem.dueDate !== undefined) { setDueDateFormated(format(new Date(`${currentItem.dueDate} 00:00:00`), 'dd/MM/yyyy')); }\n }, [currentItem]);\n\n const canShowBackupLink = () => {\n if (currentItem && currentItem.showFilesExclusionText !== undefined) {\n return currentItem.showFilesExclusionText;\n }\n return subscriptionType !== 'addon' && subscriptionType !== 'domain';\n };\n\n const onPaymentSuccessPix = () => {\n setModalById(Modais.ACTIVE_PAYMENT_SUCCESS_PIX_MODAL);\n requestDiagnostic('manageSubscriptionNewHandler');\n };\n\n const onPlanButtonClick = () => {\n subscriptionAnalytics.changePlanClick('1_link_alterar_plano');\n window.open(`${WHMCS_URL}/index.php?m=custom_upgrade&action=selectupgrade&id=${subscriptionId}`, '_blank');\n };\n\n const getSubscriptionControlsProps = () => {\n const defaultProps = {\n onDisplayModalPayment,\n activeSubscriptionRenewalButtonLabel: manageSubscriptionLocale.activeSubscriptionRenewalButtonLabel,\n cancelSubscriptionButtonLabel: manageSubscriptionLocale.cancelSubscriptionButtonLabel,\n cancelSubscriptionImmediatelyButtonLabel: manageSubscriptionLocale.cancelSubscriptionImmediatelyButtonLabel,\n switchPaymentMethodButtonLabel: manageSubscriptionLocale.switchPaymentMethodButtonLabel,\n payInvoiceButtonLabel: manageSubscriptionLocale.payInvoice,\n loading: !hasCurrentItem,\n showPlanButton: canShowPlanButton,\n planButtonLabel: manageSubscriptionLocale.planButtonLabel,\n onPlanButtonClick,\n };\n\n if (!hasCurrentItem) {\n return defaultProps;\n }\n\n const onActiveSubscriptionRenewalClick = () => {\n setModalById(Modais.ACTIVE_RENEWAL_SUBSCRIPTION);\n };\n\n const onSwitchPaymentMethodClick = () => {\n setCurrentCaller(CALLER.SUBSCRIPTIONS);\n setModalById(Modais.ACTIVE_SWITCH_PAYMENT_METHOD_IN_SUBSCRIPTION);\n subscriptionAnalytics.changePaymentMethodClick('1_link_alterar_pagamento');\n };\n\n\n const onCancelSubscriptionClick = () => {\n setModalById(Modais.CANCEL_SUBSCRIPTION);\n\n subscriptionAnalytics.cancelSubscriptionClick('1_link_cancelar_assinatura');\n };\n\n return {\n ...defaultProps,\n loading: !hasCurrentItem,\n invoiceId: currentItem.invoiceId,\n onActiveSubscriptionRenewalClick,\n onCancelSubscriptionClick,\n onCancelSubscriptionImmediatelyClick,\n onSwitchPaymentMethodClick,\n showActiveSubscriptionRenewalButton: !hasRenewalActive(),\n showCancelSubscriptionButton: hasRenewalActive() && getStatus() !== SUBSCRIPTION_STATUS.PENDING_PAYMENT,\n showCancelSubscriptionImmediatelyButton: !hasRenewalActive() && !isDomain(),\n showSwitchPaymentMethodButton: canShowSwitchPaymentMethodButton(),\n showPaymentInvoceButton: canShowPaymentInvoceButton(),\n };\n };\n\n const getPathRetention = (retentionType) => {\n const isAbleToDiscount = enabledDiscountRetentionNewFlux && subscription && subscription.reactivation[0] !== undefined;\n\n if (isAbleToDiscount) {\n const retentionTypeRouteParam = retentionType === CancelOptions.CANCEL_RENEWAL ? routesLocale.cancelRenewal : routesLocale.cancelSubscription;\n\n if (retentionPageVersion === PAGE_RETENTION_VERSIONS.OLD) {\n return `${routesLocale.manageSubscription}${routesLocale.retentionBenefit}${retentionTypeRouteParam}/${subscriptionId}/${subscriptionType}`;\n }\n if (retentionPageVersion === PAGE_RETENTION_VERSIONS.NEW) {\n if (enabledDiscountRetentionCancelImmediate && retentionType === CancelOptions.CANCEL_RENEWAL) {\n return `${routesLocale.manageSubscription}${routesLocale.retentionSubscriptionOffer}${retentionTypeRouteParam}/${subscriptionId}/${subscriptionType}`;\n } if (enabledDiscountRetentionCancelRenewal && retentionType === CancelOptions.CANCEL_IMMEDIATE) {\n return `${routesLocale.manageSubscription}${routesLocale.retentionSubscriptionOffer}${retentionTypeRouteParam}/${subscriptionId}/${subscriptionType}`;\n }\n } else {\n return `${routesLocale.manageSubscription}${routesLocale.retentionBenefit}${retentionTypeRouteParam}/${subscriptionId}/${subscriptionType}`;\n }\n }\n };\n\n\n const getSubscriptionCancelModalProps = () => {\n const cancelRenewalPath = retentionFlux\n ? getPathWithRetention.cancelRenewalPath\n : `${manageSubscription}${cancelRenewal}/${subscriptionId}/${subscriptionType}`;\n\n const cancelImmediatePath = retentionFlux\n ? getPathWithRetention.cancelImmediatePath\n : `${manageSubscription}${cancelSubscription}/${subscriptionId}/${subscriptionType}`;\n\n\n const cancelPaths = {\n CANCEL_RENEWAL: cancelRenewalPath,\n CANCEL_IMMEDIATE: cancelImmediatePath,\n };\n\n const onCloseClick = () => {\n setModalById(Modais.NONE);\n subscriptionAnalytics.cancelSubscriptionClick('2_opcao_desistir');\n if (triage.subscriptionToCancel) {\n dispatch(preChatActions.preChat.setShowPreChat(true));\n dispatch(preChatActions.subscription.setSubscriptionToCancel(null));\n }\n };\n\n const onQuitButtonClick = () => {\n setModalById(Modais.NONE);\n subscriptionAnalytics.cancelSubscriptionClick('2_opcao_desistir');\n if (triage.subscriptionToCancel) {\n dispatch(preChatActions.preChat.setShowPreChat(true));\n dispatch(preChatActions.subscription.setSubscriptionToCancel(null));\n }\n };\n\n const onContinueButtonClick = (event, option) => {\n const isAbleToDiscount = enabledDiscountRetentionNewFlux && subscription && subscription.reactivation && subscription.reactivation[0];\n const pathRedirection = !!isAbleToDiscount && !retentionFlux ? getPathRetention(option) : cancelPaths[option];\n redirectTo(pathRedirection);\n subscriptionAnalytics.cancelSubscriptionClick('2_opcao_continuar');\n };\n\n const isNotDomainType = subscriptionType !== 'domain';\n\n return {\n cancelRenewalDescriptionLabel: manageSubscriptionCancelModalLocale.cancelRenewalDescriptionLabel,\n cancelRenewalLabel: manageSubscriptionCancelModalLocale.cancelRenewalLabel,\n cancelImmediateDescriptionLabel: manageSubscriptionCancelModalLocale.cancelImmediateDescriptionLabel,\n cancelImmediateLabel: manageSubscriptionCancelModalLocale.cancelImmediateLabel,\n continueButtonLabel: manageSubscriptionCancelModalLocale.continueButtonLabel,\n descriptionLabel: manageSubscriptionCancelModalLocale.descriptionLabel,\n quitButtonLabel: manageSubscriptionCancelModalLocale.quitButtonLabel,\n titleLabel: manageSubscriptionCancelModalLocale.titleLabel,\n onCloseClick,\n onContinueButtonClick,\n onQuitButtonClick,\n canShowCancelImmediateButton: isNotDomainType,\n canShowCancelRenewalOption: subscriptionType !== 'addon',\n };\n };\n\n const getSubscriptionActivateRenewalModalProps = () => {\n const onCloseClick = () => {\n setModalById(Modais.NONE);\n };\n\n const onConfirmButtonClick = () => {\n if (enabledModalInSubscriptionManagerByUrl && enabledInvoiceGeneration) {\n setModalById(Modais.ACTIVE_INVOICE_GENERATOR_MODAL);\n } else {\n setModalById(Modais.NONE);\n }\n SubscriptionsFunctions.handleActivateSubscription(currentItem, enabledModalInSubscriptionManagerByUrl ? setModalById : null);\n SubscriptionsFunctions.handleOnModalClose();\n };\n\n const isNotDomainType = subscriptionType !== 'domain';\n\n return {\n descriptionAlertInfoLabel: getDescriptionAlert(),\n confirmButtonLabel: manageSubscriptionActiveRenewalModalLocale.confirmButtonLabel,\n titleLabel: manageSubscriptionActiveRenewalModalLocale.titleLabel,\n onCloseClick,\n onConfirmButtonClick,\n origin: showRenewalSubscriptionModal ? 'url' : 'subscription',\n canShowCancelImmediateButton: isNotDomainType,\n productNameText: isDomain() ? billingLocale.domainLabel : currentItem.productName,\n from: manageSubscriptionActiveRenewalModalLocale.from,\n to: manageSubscriptionActiveRenewalModalLocale.to,\n discountText: manageSubscriptionActiveRenewalModalLocale.discount,\n note: manageSubscriptionActiveRenewalModalLocale.note,\n enabledDiscountOfferBanner,\n ...getSubscriptionRenewalDataProps(),\n };\n };\n\n const getGenerateErrorPixModalProps = () => {\n const onCloseClick = () => {\n setModalById(Modais.NONE);\n };\n\n const onSwitchPaymentMethod = () => {\n setHasQRCodeGenerated(false);\n setModalById(Modais.ACTIVE_PAYMENT_IN_SUBSCRIPTION);\n };\n\n const onUpdateQRCode = (code, qrCode) => {\n if ((code || code !== '') && (qrCode || qrCode !== '')) {\n setPixCodeGenerated(code);\n setQRCodeGenerated(qrCode);\n setHasQRCodeGenerated(true);\n setModalById(Modais.ACTIVE_PAYMENT_IN_SUBSCRIPTION);\n } else {\n setHasQRCodeGenerated(false);\n }\n };\n\n return {\n onSwitchPaymentMethod,\n onUpdateQRCode,\n onPaymentSuccessPix,\n onCloseClick,\n invoiceId: currentItem.invoiceId,\n originCalling,\n };\n };\n\n const getExpiredPixModalProps = () => {\n const onCloseClick = () => {\n setModalById(Modais.NONE);\n };\n\n const onSwitchPaymentMethod = () => {\n setHasQRCodeGenerated(false);\n setModalById(Modais.ACTIVE_PAYMENT_IN_SUBSCRIPTION);\n };\n\n const onUpdateQRCode = (code, qrCode) => {\n if ((code || code !== '') && (qrCode || qrCode !== '')) {\n setHasQRCodeGenerated(true);\n setPixCodeGenerated(code);\n setQRCodeGenerated(qrCode);\n setModalById(Modais.ACTIVE_PAYMENT_IN_SUBSCRIPTION);\n } else {\n setHasQRCodeGenerated(false);\n setModalById(Modais.ACTIVE_GENERATE_ERROR_PIX_MODAL);\n }\n };\n\n return {\n onSwitchPaymentMethod,\n onUpdateQRCode,\n onCloseClick,\n onPaymentSuccessPix,\n originCalling,\n invoiceId: currentItem.invoiceId,\n };\n };\n\n const getPaymentSuccessPixModalProps = () => {\n const onCloseClick = () => {\n setModalById(Modais.NONE);\n redirectTo(`${routesLocale.subscriptions}`);\n };\n\n return {\n onCloseClick,\n onPaymentSuccessPix,\n isManageSubscription: true,\n originCalling,\n };\n };\n\n const getPaymentModalProps = () => {\n const onCloseClick = () => {\n setModalById(Modais.NONE);\n };\n\n const onConfirmButtonClick = () => {\n SubscriptionsFunctions.handleActivateSubscription(currentItem);\n SubscriptionsFunctions.handleOnModalClose();\n setModalById(Modais.NONE);\n };\n\n const onFinishPixTimer = () => {\n setModalById(Modais.ACTIVE_EXPIRED_TIME_PIX_MODAL);\n };\n\n const onGenerateErrorPix = () => {\n setModalById(Modais.ACTIVE_GENERATE_ERROR_PIX_MODAL);\n };\n\n const onRedirectTicket = (urlTicket, isOriginSavePDF = false) => {\n setUrlTicket(urlTicket);\n setOriginSavePDF(isOriginSavePDF);\n setModalById(Modais.ACTIVE_REDIRECT_TICKET_MODAL);\n };\n\n const isNotDomainType = subscriptionType !== 'domain';\n\n return {\n enabledNewPixChipLabel,\n onCloseClick,\n invoiceId: currentItem.invoiceId,\n onConfirmButtonClick,\n originCalling,\n canShowCancelImmediateButton: isNotDomainType,\n productNameText: isDomain() ? billingLocale.domainLabel : currentItem.productName,\n ...getSubscriptionRenewalDataProps(),\n ...getSubscriptionResumeProps(),\n dueDate: dueDateFormated,\n onFinishPixTimer,\n onGenerateErrorPix,\n onPaymentSuccessPix,\n onRedirectTicket,\n };\n };\n\n const getFinishSwitchPaymentMethodModalProps = () => {\n const onCloseClick = () => {\n setModalById(Modais.NONE);\n subscriptionAnalytics.changePaymentMethodClick('4_fechar');\n\n if (triage.subscriptionToChangePaymentMethod) {\n dispatch(preChatActions.subscription.setSubscriptionToChangePaymentMethod(null));\n dispatch(preChatActions.preChat.setShowPreChat(true));\n }\n };\n\n const onBack = () => {\n history.push(routesLocale.subscriptions);\n subscriptionAnalytics.changePaymentMethodClick('4_voltar_gerenciamento');\n\n if (triage.subscriptionToChangePaymentMethod) {\n dispatch(preChatActions.subscription.setSubscriptionToChangePaymentMethod(null));\n dispatch(preChatActions.preChat.setShowPreChat(true));\n }\n };\n\n return {\n titleLabel: manageSubscriptionFinishSwitchPaymentMethodInvoiceLocale.titleLabel,\n infoSwitchPaymentMethodLabel: manageSubscriptionFinishSwitchPaymentMethodInvoiceLocale.infoSwitchPaymentMethod,\n buttonBackLabel: manageSubscriptionFinishSwitchPaymentMethodInvoiceLocale.backButtonLabel,\n onBack,\n newPaymentMethod,\n onCloseClick,\n\n };\n };\n\n const clearSwitchPaymentMethodStatus = useCallback(() => {\n dispatch(billingActions.subscriptions.switchPaymentMethod.clearStatus());\n }, [dispatch]);\n\n useEffect(() => { clearSwitchPaymentMethodStatus(); }, [clearSwitchPaymentMethodStatus]);\n\n const setChangePaymentSuccessModalStep = useCallback(() => {\n const isSuccess = switchPaymentMethodStatus === 'success';\n\n const changeToCreditCard = newPaymentMethod.includes('credit') || newPaymentMethod === 'dlocal' || newPaymentMethod.includes('crédit') || newPaymentMethod.includes('tarjeta');\n\n if (!changePaymentMethodLoading && canDisplayChangePaymentModal && !!newPaymentMethod && changeToCreditCard && isSuccess) {\n setModalById(Modais.CHANGE_PAYMENT_METHOD);\n return;\n }\n\n if (!changePaymentMethodLoading && !!newPaymentMethod && isSuccess) {\n setModalById(Modais.ACTIVE_FINISH_SWITCH_PAYMENT_METHOD_IN_SUBSCRIPTION);\n return;\n }\n\n if (!changePaymentMethodLoading && triage.subscriptionToChangePaymentMethod) {\n dispatch(preChatActions.subscription.setSubscriptionToChangePaymentMethod(null));\n dispatch(preChatActions.preChat.setShowPreChat(true));\n }\n if (!changePaymentMethodLoading && !!newPaymentMethod) {\n setModalById(Modais.NONE);\n }\n }, [changePaymentMethodLoading, canDisplayChangePaymentModal, switchPaymentMethodStatus, newPaymentMethod, dispatch]);\n\n useEffect(() => { setChangePaymentSuccessModalStep(); }, [setChangePaymentSuccessModalStep]);\n\n const requestPaymentMethods = useCallback(() => {\n usePaymentModalV2 && dispatch(billingActions.paymentMethods.request());\n }, [dispatch, usePaymentModalV2]);\n\n useEffect(() => {\n requestPaymentMethods();\n }, [requestPaymentMethods]);\n\n const getSwitchPaymentMethodModalProps = () => {\n const onCloseClick = () => {\n setModalById(Modais.NONE);\n\n if (triage.subscriptionToChangePaymentMethod) {\n dispatch(preChatActions.subscription.setSubscriptionToChangePaymentMethod(null));\n dispatch(preChatActions.preChat.setShowPreChat(true));\n }\n };\n\n const onSuccess = () => {\n getBoletoAndPixProducts();\n };\n\n const onSwitchPaymentMethod = (paymentMethod) => {\n if (paymentMethod !== '') {\n setNewPaymentMethod(paymentMethod);\n SubscriptionsFunctions.handleSwitchPaymentMethod({\n subscription: currentItem,\n paymentMethod,\n onSuccess,\n });\n }\n };\n\n const isNotDomainType = subscriptionType !== 'domain';\n return {\n canDisplayChangePaymentModal,\n enabledChangePayPalAccount,\n enabledPaymentByPayPal,\n enabledPaymentByCreditCard,\n enabledPaymentByTicket,\n enabledPaymentByPix,\n enabledNewPixChipLabel,\n boletoAndPixLoading: subscriptionsState.loadingItemsNotInCreditCard,\n requestsLoading: changePaymentMethodLoading,\n titleLabel: manageSubscriptionSwitchPaymentMethodInvoiceModalLocale.titleLabel,\n selectPaymentMethodLabel: manageSubscriptionSwitchPaymentMethodInvoiceModalLocale.selectPaymentMethodLabel,\n infoChangePaymentByTicketLabel: manageSubscriptionSwitchPaymentMethodInvoiceModalLocale.infoChangePaymentByTicketLabel,\n infoChangePaymentByCreditCardLabel: manageSubscriptionSwitchPaymentMethodInvoiceModalLocale.infoChangePaymentByCreditCardLabel,\n infoChangePaymentByPayPalLabel: manageSubscriptionSwitchPaymentMethodInvoiceModalLocale.infoChangePaymentByPayPalLabel,\n confirmSwitchLabel: manageSubscriptionSwitchPaymentMethodInvoiceModalLocale.confirmSwitchLabel,\n onSwitchPaymentMethod,\n descriptionAlertInfoLabel: getDescriptionAlert(),\n generateTicketLabel: manageSubscriptionPaymentInvoiceModalLocale.generateTicketLabel,\n infoPaymentByPicPayLabel: manageSubscriptionPaymentInvoiceModalLocale.infoPaymentByPicPayLabel,\n infoPaymentByCreditCardLabel: manageSubscriptionPaymentInvoiceModalLocale.infoPaymentByCreditCardLabel,\n infoPaymentByCreditCardTitle: manageSubscriptionPaymentInvoiceModalLocale.infoPaymentByCreditCardTitle,\n selectCardLabel: manageSubscriptionPaymentInvoiceModalLocale.selectCardLabel,\n infoAddNewCreditCardLabel: manageSubscriptionPaymentInvoiceModalLocale.infoAddNewCreditCardLabel,\n infoSendEmailWithPix: manageSubscriptionPaymentInvoiceModalLocale.infoSendEmailWithPix,\n onCloseClick,\n actualPaymentMethod: currentItem.paymentMethod,\n invoiceId: currentItem.invoiceId,\n subscriptionId: currentItem.id,\n subscriptionType: currentItem.type,\n canShowCancelImmediateButton: isNotDomainType,\n productNameText: isDomain() ? billingLocale.domainLabel : currentItem.productName,\n ...getSubscriptionRenewalDataProps(),\n ...getSubscriptionResumeProps(),\n };\n };\n\n const getTicketModalProps = () => {\n const onCloseClick = () => {\n setModalById(Modais.NONE);\n };\n\n return {\n onCloseClick,\n urlTicket,\n hasOriginSavePDF,\n };\n };\n\n const getReactivationModalProps = () => {\n const onCloseClick = () => {\n setModalById(Modais.NONE);\n };\n\n return {\n onCloseClick,\n invoiceId: currentItem.invoiceId,\n paymentMethod: currentItem.paymentMethod,\n };\n };\n\n const getReactivationConfirmationModalProps = () => {\n const onClose = () => {\n setModalById(Modais.NONE);\n };\n\n return {\n onClose,\n invoiceId: currentItem.invoiceId,\n paymentMethod: currentItem.paymentMethod,\n description: reactivationConfirmationModalLocale.descriptionLabel,\n title: reactivationConfirmationModalLocale.titleLabel,\n clouseLabel: reactivationConfirmationModalLocale.clouseButtonLabel,\n };\n };\n\n const getInvoiceGeneratorModalProps = () => (\n {\n description: invoiceGeneratorModalLocale.descriptionLabel,\n title: invoiceGeneratorModalLocale.titleLabel,\n }\n );\n\n const getChangePaymentMethodModalProps = () => {\n const hideModal = () => {\n setModalById(Modais.NONE);\n clearSwitchPaymentMethodStatus();\n };\n\n const redirectToSubscriptionsList = () => {\n history.push(routesLocale.subscriptions);\n };\n\n const defaultProps = {\n origin: FLOW_ORIGIN.MANAGE_SUBSCRIPTION,\n hideModal,\n cancelFlowAction: redirectToSubscriptionsList,\n productsList: subscriptionsState.itemsNotInCreditcard,\n loadingChangePaymentMethod: billingState.subscriptions.loadingUpdateItemsNotInCreditCard,\n statusChangePaymentMethod: billingState.subscriptions.updateItemsNotInCreditCardStatus,\n step: MODAL_STEPS.SUCCESS_CC_REGISTER,\n };\n\n return {\n ...defaultProps,\n };\n };\n\n const getRefundFeedbackProps = () => {\n const defaultProps = {\n titleLabel: refundFeedbackLocale.titleLabel,\n statusLabel: refundFeedbackLocale.statusLabel,\n valueLabel: refundFeedbackLocale.valueLabel,\n methodLabel: refundFeedbackLocale.methodLabel,\n };\n\n if (!currentItem.refundFeedback) {\n return defaultProps;\n }\n\n const {\n amount,\n message,\n method,\n status,\n } = currentItem.refundFeedback;\n\n const verifyMethod = method === BRASPAG_PARC_1X ? BRASPAG_CREDIT : method;\n\n const getStatus = () => EnumFeedbackStatus[status || 'ERROR'];\n\n return {\n ...defaultProps,\n status: getStatus(),\n statusText: refundFeedbackLocale.statusText[getStatus()],\n valueText: formatCurrency(amount || 0),\n methodText: refundFeedbackLocale.methodText(verifyMethod),\n messageText: message,\n };\n };\n\n const isActive = () => getStatus() && getStatus().includes(SUBSCRIPTION_STATUS.ACTIVE, SUBSCRIPTION_STATUS.REGISTERED);\n\n const isFailPaymentCC = () => hasCurrentItem && currentItem.unpaidInvoice && currentItem.unpaidInvoice.ccPaymentAttemptFailure;\n\n const isNextToDueDate = () => getStatus() && getStatus().includes(SUBSCRIPTION_STATUS.TO_DUE);\n\n const isOverDueDate = () => getStatus() && getStatus().includes(SUBSCRIPTION_STATUS.OVERDUE);\n\n const isSuspended = () => getStatus() && getStatus().includes(SUBSCRIPTION_STATUS.SUSPENDED);\n\n const isPendingPayment = () => getStatus() && getStatus().includes(SUBSCRIPTION_STATUS.PENDING_PAYMENT);\n\n const isExceedsRetriesCC = () => hasCurrentItem && !isOverDueDate() && canShowControls() && currentItem.unpaidInvoice && currentItem.isExceedsRetriesCC;\n\n const displayButtonToModal = linkText => (\n \n \n \n \n {(!enabledNewLabelsWithPix || !isBRServer) && (\n <>\n \n {manageSubscriptionLocale.paymentFailAlertLabel[0]}\n \n {displayLinkToPay(manageSubscriptionLocale.paymentFailAlertLabel[1], 'link-invoice-next-over-due-date')}\n {manageSubscriptionLocale.paymentFailAlertLabel[2]}\n {getDaysToExpiration()}\n {manageSubscriptionLocale.paymentFailAlertLabel[3]}\n {manageSubscriptionLocale.newPaymentFailAlertLabel[0]} \n {manageSubscriptionLocale.newPaymentFailAlertLabel[1]}\n {manageSubscriptionLocale.newPaymentFailAlertLabel[2]}\n {manageSubscriptionLocale.newPaymentFailAlertLabel[3]}\n {manageSubscriptionLocale.newPaymentFailAlertLabel[4]}\n \n )}\n \n \n );\n\n const getAlertPaymentFailByAttemptsLimit = () => (\n \n \n \n \n {(isBRServer) && (\n <>\n \n {manageSubscriptionLocale.paymentFailByAttemptsLimitLabel[0]}\n \n {displayLinkToPay(manageSubscriptionLocale.paymentFailAlertLabel[1], 'link-invoice-next-over-due-date')}\n {manageSubscriptionLocale.paymentFailByAttemptsLimitLabel[2]}\n {manageSubscriptionLocale.paymentFailByAttemptsLimitLabel[3]}\n \n );\n\n const getAlertNextDueDate = () => (\n \n \n \n \n {(!enabledNewLabelsWithPix || !isBRServer) && (\n <>\n {manageSubscriptionLocale.nextDueAlertLabel[0]}\n {canShowPaymentInvoceButton() ? manageSubscriptionLocale.nextDueAlertLabel[1] : displayLinkToPay(manageSubscriptionLocale.nextDueAlertLabel[1], 'link-invoice-next-almost-due-date')}\n {manageSubscriptionLocale.nextDueAlertLabel[2]}\n {manageSubscriptionLocale.newNextDueAlertLabel[2]} \n {manageSubscriptionLocale.newNextDueAlertLabel[3]}\n {manageSubscriptionLocale.newNextDueAlertLabel[4]} \n \n )}\n {isPaypal(currentItem.paymentMethod) && (\n <>\n {manageSubscriptionLocale.dueDatePaypalLabel}\n \n )\n }\n {isCreditCard(currentItem.paymentMethod) && (\n <>\n {manageSubscriptionLocale.dueDateCreditCardLabel}\n \n )\n }\n\n \n \n );\n\n const getAlertDueBaseMessage = () => {\n switch (currentItem.type) {\n case 'hosting': {\n if (currentItem.showFilesExclusionText) {\n return manageSubscriptionLocale.dueDateAlertLabel[0];\n }\n return manageSubscriptionLocale.dueDateAlertLabel[2];\n }\n case 'domain':\n return manageSubscriptionLocale.dueDateAlertLabel[1];\n default:\n return manageSubscriptionLocale.dueDateAlertLabel[2];\n }\n };\n\n const getAlerOverDueDate = () => (\n \n \n \n \n\n {(!enabledNewLabelsWithPix || !isBRServer) && (\n <>\n \n {getAlertDueBaseMessage()}\n {getDaysToExpiration()}\n {manageSubscriptionLocale.dueDateAlertLabel[3]}\n \n {displayLinkToPay(manageSubscriptionLocale.dueDateAlertLabel[4], 'link-invoice-next-over-due-date')}\n {manageSubscriptionLocale.dueDateAlertLabel[5]}\n \n )}\n {enabledNewLabelsWithPix && isBRServer && (\n <>\n {getAlertDueBaseMessage()}\n {getDaysToExpiration()}\n {manageSubscriptionLocale.newDueDateAlertLabel[3]}\n {manageSubscriptionLocale.newDueDateAlertLabel[4]}\n {manageSubscriptionLocale.newDueDateAlertLabel[5]} \n {manageSubscriptionLocale.newDueDateAlertLabel[6]}\n {manageSubscriptionLocale.newDueDateAlertLabel[7]} \n \n )}\n \n );\n\n const getAlertSuspedendBaseMessage = () => {\n switch (currentItem.type) {\n case 'hosting':\n return manageSubscriptionLocale.suspendedAlertLabel[0];\n case 'domain':\n return manageSubscriptionLocale.suspendedAlertLabel[1];\n default:\n return manageSubscriptionLocale.suspendedAlertLabel[2];\n }\n };\n\n const getAlerSuspended = () => (\n \n \n \n \n {(!enabledNewLabelsWithPix || !isBRServer) && (\n <>\n {getAlertSuspedendBaseMessage()}\n {displayLinkToPay(manageSubscriptionLocale.suspendedAlertLabel[3])}\n \n {manageSubscriptionLocale.suspendedAlertLabel[4]}\n \n \n {manageSubscriptionLocale.newSuspendedAlertLabel[1]}\n {manageSubscriptionLocale.newSuspendedAlertLabel[2]}\n {manageSubscriptionLocale.newSuspendedAlertLabel[3]}\n {manageSubscriptionLocale.newSuspendedAlertLabel[4]}\n \n \n )}\n\n \n \n );\n\n const getAlertPendingPayment = () => (\n \n \n \n \n {(!enabledNewLabelsWithPix || !isBRServer) && (\n <>\n {manageSubscriptionLocale.pendingPaymentAlertLabel[0]}\n {manageSubscriptionLocale.newPendingPaymentAlertLabel[1]} \n {manageSubscriptionLocale.newPendingPaymentAlertLabel[2]}\n {manageSubscriptionLocale.newPendingPaymentAlertLabel[3]} \n {manageSubscriptionLocale.newPendingPaymentAlertLabel[4]}\n {manageSubscriptionLocale.newPendingPaymentAlertLabel[5]} \n \n )}\n \n \n );\n\n\n return (\n \n \n\n \n\n \n \n \n )}\n\n {isExceedsRetriesCC() && (\n getAlertPaymentFailByAttemptsLimit()\n )}\n\n {enabledPaymentErroInfoMessageByCreditCard && isFailPaymentCC() && !isExceedsRetriesCC() && (\n getAlertFailPaymentCC()\n )}\n\n <>\n {isNextToDueDate() && currentItem.invoiceId && !isFailPaymentCC() && !isExceedsRetriesCC() && (\n getAlertNextDueDate()\n )}\n\n {isOverDueDate() && currentItem.invoiceId && !isFailPaymentCC() && !isExceedsRetriesCC() && (\n getAlerOverDueDate()\n )}\n\n {isSuspended() && currentItem.invoiceId && !isFailPaymentCC() && !isExceedsRetriesCC() && (\n getAlerSuspended()\n )}\n\n {isPendingPayment() && currentItem.invoiceId && !isFailPaymentCC() && !isExceedsRetriesCC() && (\n getAlertPendingPayment()\n )}\n\n \n\n {!hasRenewalActive() && isActive() && (\n \n \n \n \n {manageSubscriptionLocale.noRenewAlertLabel[0]}\n \n {manageSubscriptionLocale.noRenewAlertLabel[1]}\n {dueDateFormated}\n .\n \n \n {manageSubscriptionLocale.noRenewAlertLabel[3]}\n \n \n )}\n \n \n )}\n {canShowRefundFeedback() && (\n \n \n )}\n\n {enabledDiscountOfferBanner && enabledDiscountOffer && (\n \n \n )}\n\n {canShowControls() && (\n \n \n )}\n\n \n\n {canShowSubscriptionCancelModal() && (\n \n );\n};\n\nManageSubscriptionNewHandler.propTypes = ManageSubscriptionProps;\n\nexport default ManageSubscriptionNewHandler;\n","import React, { useEffect, useCallback } from 'react';\nimport { useParams, useHistory } from 'react-router-dom';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { billingActions } from '@/redux/modules/billing';\nimport * as Styles from './ManageSubscriptionPage.styles';\nimport { ManageSubscriptionNewHandler } from '@/components/billing/subscriptions/ManageSubscriptionNewHandler';\nimport { hasPaymentEnabled } from '@/utils/Validators/validation';\nimport {\n LIST_BOLETO_METHODS, LIST_CREDIT_CARD_METHODS, LIST_PAYPAL_METHODS, PIX,\n} from '@/config/billing/paymentMethods';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport {\n XRAY_ENABLED_MODAL_IN_SUBSCRIPTION_MANAGER_BY_URL,\n XRAY_ENABLED_PAYMENT_BY_CREDIT_CARD,\n XRAY_ENABLED_PAYMENT_BY_TICKET,\n XRAY_ENABLED_PAYMENT_METHOD_FILTER,\n XRAY_ENABLED_SWITCH_PAYMENT_METHOD_BY_PAYPAL,\n XRAY_PIX_PAYMENT_GATEWAY,\n} from '@/config/GrowthBook/constants';\n\nconst ManageSubscriptionPage = () => {\n const history = useHistory();\n const dispatch = useDispatch();\n\n const { items } = useSelector(state => state.billing.subscriptions);\n const { enabledPaymentMethods } = useSelector(state => state.billing.paymentMethods);\n const preChatState = useSelector(state => state.preChat);\n const enabledReflundBlock = true;\n const enabledPaymentErroInfoMessageByCreditCard = true;\n const enabledPaymentByPayPal = useFeatureIsOn(XRAY_ENABLED_SWITCH_PAYMENT_METHOD_BY_PAYPAL);\n const enabledPaymentMethodFilter = useFeatureIsOn(XRAY_ENABLED_PAYMENT_METHOD_FILTER);\n const enabledNewLabelsWithPix = useFeatureIsOn(XRAY_PIX_PAYMENT_GATEWAY);\n\n const { subscriptionId, subscriptionType } = useParams();\n\n const enabledCreditCard = useFeatureIsOn(XRAY_ENABLED_PAYMENT_BY_CREDIT_CARD);\n const enabledTicket = useFeatureIsOn(XRAY_ENABLED_PAYMENT_BY_TICKET);\n const enabledPaymentByTicket = enabledPaymentMethodFilter ? enabledTicket && hasPaymentEnabled(enabledPaymentMethods, LIST_BOLETO_METHODS) : enabledTicket;\n const enabledPaymentByCreditCard = enabledPaymentMethodFilter ? enabledCreditCard && hasPaymentEnabled(enabledPaymentMethods, LIST_CREDIT_CARD_METHODS) : enabledCreditCard;\n const enabledPaymentByPix = useFeatureIsOn(XRAY_PIX_PAYMENT_GATEWAY) && (enabledPaymentMethodFilter ? hasPaymentEnabled(enabledPaymentMethods, [PIX]) : true);\n const enabledModalInSubscriptionManagerByUrl = useFeatureIsOn(XRAY_ENABLED_MODAL_IN_SUBSCRIPTION_MANAGER_BY_URL);\n\n const fetchItems = useCallback(() => {\n if (items.length) return;\n dispatch(billingActions.subscriptions.request());\n }, [dispatch, items]);\n\n const fetchEnabledPaymentMethods = useCallback(() => {\n if (enabledPaymentMethods !== null) return;\n\n dispatch(billingActions.oldPaymentMethod.request());\n }, [dispatch, enabledPaymentMethods]);\n\n useEffect(() => {\n fetchItems();\n fetchEnabledPaymentMethods();\n }, [fetchItems, fetchEnabledPaymentMethods]);\n\n const onRedirect = (path = '/') => {\n history.push(path);\n };\n\n return (\n \n \n );\n};\n\nexport default ManageSubscriptionPage;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.section``;\n","import React from 'react';\nimport * as Styles from './SubscriptionsPage.styles';\nimport { SubscriptionsHandler } from '@/components/billing';\nimport { useSelector } from 'react-redux';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport {\n XRAY_ENABLED_MODAL_PAYMENT_IN_SUBSCRIPTION_LIST,\n XRAY_ENABLED_NEW_MESSAGES_IN_SUBSCRIPTION_LIST,\n} from '@/config/GrowthBook/constants';\n\nconst SubscriptionsPage = () => {\n const preChatState = useSelector(state => state.preChat);\n const enabledNewMessagesInSubscription = useFeatureIsOn(XRAY_ENABLED_NEW_MESSAGES_IN_SUBSCRIPTION_LIST);\n const enabledModalPaymentInSubscriptionList = useFeatureIsOn(XRAY_ENABLED_MODAL_PAYMENT_IN_SUBSCRIPTION_LIST);\n\n\n return (\n \n \n );\n};\n\nexport default SubscriptionsPage;\n","import React from 'react';\nimport { useBenefitParams } from '@/hooks/billing/subscriptions/useBenefitParams';\nimport { useSelector } from 'react-redux';\nimport { RetentionOfferDiscountInNextRenew } from '@/components/billing';\n\nconst RetentionOfferDiscountInNextRenewPage = () => {\n const { currentItem } = useBenefitParams();\n const subscription = useSelector(state => state.billing.subscription);\n const reactivationData = subscription && subscription.reactivation && subscription.reactivation.length > 0 && subscription.reactivation[0];\n\n return (\n <>\n {children} \n );\n};\n\nexport default DnsWizardContextProvider;\n","import styled, { css } from 'styled-components';\n\nexport const DnsWizardEmailHandlerWrapper = styled.div`\n${() => css`\n background-position: bottom center;\n margin: 0px;\n `}\n`;\n\nexport const DnsWizardEmailHandlerContainer = styled.div`\n${({ selectedEmailPlataform }) => css`\n display: grid;\n margin: ${selectedEmailPlataform ? '24px 0px 0px 0px' : '0px'}\n `}\n`;\n\nexport const TextBlock = styled.div``;\n\nexport const Subtitle = styled.div`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.v1.font.weights.regular};\n line-height: ${theme.font.lineHeights.lg};\n margin: 16px 0 24px 40px;\n max-width: 75ch;\n > &:first-of-type {\n margin-top: 8px;\n }\n `}\n`;\n","import { HOSTING_PLATFORM_TYPES } from '@/enums/domains/dns.enum';\n\nconst useConfigurationStatus = (configurationStatus, platformName) => {\n const {\n isConfiguredThroughWizard,\n isConfiguredInHostGator,\n isConfiguredInHostGatorWithHostingPlan,\n isConfiguredInHostGatorWithCustomDnsZone,\n } = configurationStatus;\n\n const isPointedToHostGatorPlan = isConfiguredThroughWizard && isConfiguredInHostGator && isConfiguredInHostGatorWithHostingPlan && !isConfiguredInHostGatorWithCustomDnsZone;\n const isPointedToReservedServer = isConfiguredThroughWizard && isConfiguredInHostGator && !isConfiguredInHostGatorWithHostingPlan && !isConfiguredInHostGatorWithCustomDnsZone;\n const isPointedToCustomDnsZone = isConfiguredThroughWizard && isConfiguredInHostGator && isConfiguredInHostGatorWithCustomDnsZone;\n const isPointedToCustomServer = isConfiguredThroughWizard && !isConfiguredInHostGator && !isConfiguredInHostGatorWithHostingPlan && !isConfiguredInHostGatorWithCustomDnsZone && !platformName;\n const isPointedToExternalServer = isConfiguredThroughWizard && !isConfiguredInHostGator && !isConfiguredInHostGatorWithHostingPlan && !isConfiguredInHostGatorWithCustomDnsZone && platformName;\n\n if (isPointedToCustomDnsZone || platformName === HOSTING_PLATFORM_TYPES.DLOJA) {\n return HOSTING_PLATFORM_TYPES.CUSTOM_DNS_ZONE;\n }\n\n if (isPointedToReservedServer) {\n return HOSTING_PLATFORM_TYPES.RESERVED;\n }\n\n if (isPointedToExternalServer) {\n return HOSTING_PLATFORM_TYPES.EXTERNAL;\n }\n\n if (isPointedToCustomServer) {\n return HOSTING_PLATFORM_TYPES.CUSTOM;\n }\n\n if (isPointedToHostGatorPlan) {\n return HOSTING_PLATFORM_TYPES.HOSTGATOR;\n }\n\n return HOSTING_PLATFORM_TYPES.UNDEFINED;\n};\n\nexport default useConfigurationStatus;\n","import { HOSTING_PLATFORM_TYPES } from '@/enums/domains/dns.enum';\nimport { isBRServer } from '@/utils/Validators/validation';\n\nconst useFilterPlatforms = (platforms) => {\n const hgCard = true;\n const lojaIntegradaCard = isBRServer;\n const nuvemshopCard = isBRServer;\n const tiendanubeCard = !isBRServer;\n const externalCard = true;\n const shopifyCard = true;\n const dlojaCard = true;\n\n const IS_STORYBOOK = process.env.STORYBOOK_IS_SB === '1';\n\n return platforms.filter((platform) => {\n if (platform.platformType === HOSTING_PLATFORM_TYPES.HOSTGATOR) {\n return hgCard || IS_STORYBOOK;\n }\n\n if (platform.platformType === HOSTING_PLATFORM_TYPES.LOJA_INTEGRADA) {\n return lojaIntegradaCard || IS_STORYBOOK;\n }\n\n if (platform.platformType === HOSTING_PLATFORM_TYPES.NUVEMSHOP) {\n return nuvemshopCard || IS_STORYBOOK;\n }\n\n if (platform.platformType === HOSTING_PLATFORM_TYPES.TIENDANUBE) {\n return tiendanubeCard || IS_STORYBOOK;\n }\n\n if (platform.platformType === HOSTING_PLATFORM_TYPES.SHOPIFY) {\n return shopifyCard || IS_STORYBOOK;\n }\n\n if (platform.platformType === HOSTING_PLATFORM_TYPES.DLOJA) {\n return dlojaCard || IS_STORYBOOK;\n }\n\n if (platform.platformType === HOSTING_PLATFORM_TYPES.EXTERNAL) {\n return externalCard || IS_STORYBOOK;\n }\n\n return false;\n });\n};\n\nexport default useFilterPlatforms;\n","import { useSelector, useDispatch } from 'react-redux';\nimport { HOSTING_PLATFORM_TYPES } from '@/enums/domains/dns.enum';\nimport { dnsWizardActions } from '@/redux/modules/dnsWizard';\n\nconst formatConfigurationFromSelectedPlan = (selectedPlan, platformId) => ({\n hostingId: selectedPlan.id,\n platformId,\n selectedPlan,\n});\n\nconst configureHostgatorPlan = (dispatch, platformId, currentConfiguration, selectedPlanId = null, hostingPlans = []) => {\n const selectedConfiguration = hostingPlans.find(e => (e.id === selectedPlanId));\n if (currentConfiguration.hostingId !== selectedConfiguration.id) {\n dispatch(dnsWizardActions.defineConfiguration.set(formatConfigurationFromSelectedPlan(selectedConfiguration, platformId)));\n }\n};\n\nconst useSetConfiguration = (hostingType, selectedPlanId, platformId) => {\n const dispatch = useDispatch();\n const { hostGatorAvailablePlans, selectedConfiguration: currentConfiguration } = useSelector(state => state.dnsWizard);\n const { hostingPlans } = hostGatorAvailablePlans;\n\n if (HOSTING_PLATFORM_TYPES.HOSTGATOR === hostingType && selectedPlanId !== null) {\n configureHostgatorPlan(dispatch, platformId, currentConfiguration, selectedPlanId, hostingPlans);\n }\n};\n\nexport default useSetConfiguration;\n","import styled, { css } from 'styled-components';\n\nexport const DnsWizardHeaderWrapper = styled.div`\n ${() => css`\n display: flex;\n gap: 8px;\n `}\n`;\n\nexport const Title = styled.h2`\n ${({ theme, variation }) => {\n const color = variation !== 'default' ? theme.v1.color.text.primary : theme.v1.color.action.hover;\n\n return css`\n margin: 0px;\n color: ${color};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.v1.font.weights.bold};\n letter-spacing: -0.5px;\n\n > div {\n display: inline;\n margin-left: 3px;\n }\n `;\n }}\n`;\n","import React from 'react';\nimport * as Styles from './DnsWizardHeader.styles';\nimport { Tooltip } from '@/pages/common/v1/Tooltip';\nimport { IconInfo } from '@/icons';\nimport { palette } from '@/styles/HgThemeProvider';\n\n\nconst DnsWizardHeader = ({\n testId = 'iconheader', title = 'Title', tooltip, icon = null, variation = 'default',\n}) => {\n const { secondary } = palette;\n const { primary: lightBlueColor } = secondary;\n return (\n \n {icon}\n \n {title}\n {tooltip && ( \n \n );\n};\n\nexport default DnsWizardHeader;\n","import styled, { css } from 'styled-components';\n\nexport const EmailPlatformsGridWrapper = styled.div`\n ${({ theme, customColumns }) => css`\n display: grid;\n grid-template-columns: 1fr;\n gap: 16px;\n\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n grid-template-columns: 1fr 1fr;\n\n > *:nth-child(2n-1):nth-last-of-type(1) {\n grid-column: ${customColumns.sm || 'span 1'};\n }\n }\n\n @media (min-width: ${theme.v1.breakpoints.md}) {\n grid-template-columns: ${customColumns.md || '233px 233px 233px'};\n }\n\n @media (min-width: ${theme.v1.breakpoints.lg}) {\n grid-template-columns: ${customColumns.lg || '233px 233px 233px '};\n }\n\n @media (min-width: ${theme.v1.breakpoints.xl}) {\n grid-template-columns: ${customColumns.xl || '233px 233px 233px'};\n }\n `}\n`;\n","import styled, { css } from 'styled-components';\nimport colorfulLine from '@/media/icons/colorfulLine.svg';\n\nexport const Card = styled.div`\n ${({\n variant,\n theme,\n hover,\n selected,\n }) => {\n let padding = '0px';\n let border = '0';\n let borderRadius = '0';\n\n switch (variant) {\n case 'outlined':\n border = `1px solid ${theme.palette.grey.main}`;\n break;\n case 'rounded':\n border = `1px solid ${theme.color.grayVeryLight}`;\n borderRadius = '4px';\n padding = '4px';\n break;\n case 'featured':\n padding = '4px';\n break;\n default:\n break;\n }\n const backgroundImage = variant === 'featured' ? `url(${colorfulLine})` : 'none';\n\n return css`\n background-image: ${backgroundImage};\n background-size: 'cover';\n border: ${border};\n border-radius: ${borderRadius};\n box-sizing: border-box;\n cursor: pointer;\n padding: ${padding};\n\n &:hover {\n background-color: ${hover ? theme.palette.blue.light : theme.v1.color.white.primary};\n border-color: ${hover ? theme.palette.grey.main : theme.v1.color.white.primary};\n }\n border-color: ${!selected ? border : theme.palette.grey.main};\n background-color: ${selected ? theme.v1.color.background.boxes : theme.v1.color.white.primary};\n `;\n }}\n`;\n\nexport const Container = styled.div`\n ${({ unspaced, theme, hover }) => {\n const padding = unspaced ? '0px' : '40px 24px';\n return css`\n background-color: ${hover ? 'transparent' : theme.v1.color.white.primary};\n color: ${theme.v1.color.text.primary};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v1.font.family.primary};\n gap: 16px;\n justify-content: flex-start;\n padding: ${padding};\n & > * {\n margin: 0;\n }\n `;\n }}\n`;\n","import React from 'react';\nimport * as Styles from './Card.styles';\n\nfunction Card({\n children = null,\n variant = 'default',\n unspaced = false,\n hover = false,\n testId = 'card',\n selected = false,\n}) {\n return (\n \n \n {children}\n \n \n );\n}\n\nexport default Card;\n","import styled, { css } from 'styled-components';\n\nexport const MailCardWrapper = styled.button`\n background-color: transparent;\n border: 0;\n cursor: pointer;\n min-height: 102px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n > span {\n position: absolute;\n top: 0;\n right: 0;\n }\n > img{\n max-width: 120px;\n }\n`;\n\nexport const PlatformName = styled.div`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v1.color.text.primary};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.medium};\n gap: 8px;\n line-height: 19px;\n text-align: center;\n `}\n`;\n","import React from 'react';\nimport { EMAIL_PLATFORM_NAMES } from '@/enums/domains/dns.enum';\nimport * as Styles from './DnsWizardEmailPlatformCard.styles';\n\nconst DnsWizardEmailPlatformCard = ({\n testId = 'emailplatformcard',\n platformName = '',\n platformId,\n platformType,\n imageUrl,\n handleOnClick = () => {},\n hostgatorMailPlatformName,\n}) => {\n const handleClick = () => {\n handleOnClick && handleOnClick(platformName, platformId, platformType);\n };\n const getPlatformName = name => ((name !== 'Hostgator' && name !== 'Titan') ? name : hostgatorMailPlatformName);\n\n const shouldRenderPlatformName = (platformName !== EMAIL_PLATFORM_NAMES.CPANEL);\n\n return (\n \n \n \n \n );\n};\n\nexport default DnsWizardEmailPlatformCard;\n","import React from 'react';\nimport * as Styles from './DnsWizardEmailPlatformsGrid.styles';\nimport { Card } from '@/pages/common/v1/Card';\nimport { EMAIL_PLATFORM_NAMES, HOSTING_PLATFORM_TYPES } from '@/enums/domains/dns.enum';\nimport { DnsWizardEmailPlatformCard } from '@/components/domain/components/DnsWizardEmailPlatformCard';\nimport otherPlatform from '@/media/domains/other-card.png';\n\nconst DnsWizardEmailPlatformsGrid = ({\n testId = 'emailplatformsgrid',\n selectedPlatform,\n setSelectedPlatformType,\n setSelectedPlatformName,\n setSelected,\n insideModal = false,\n setSelectedEmailPlatformId = () => {},\n selected,\n platforms,\n emailLocale = {\n emailZoneContentText: p => p,\n customEmailPlatformName: '',\n },\n analytics = {},\n customColumns = {\n sm: '',\n md: '',\n lg: '',\n xl: '',\n },\n hostgatorMailPlatformName,\n}) => {\n const { emailZoneContentText, customEmailPlatformName } = emailLocale;\n const customEmailPlatform = {\n imageUrl: otherPlatform,\n platformType: HOSTING_PLATFORM_TYPES.CUSTOM_MAIL,\n platformName: customEmailPlatformName,\n platformID: HOSTING_PLATFORM_TYPES.CUSTOM_MAIL,\n };\n const handleSelectPlatform = (platformName, platformId, platformType) => {\n const {\n dnsWizardEmailPlatformGmailCardClick,\n dnsWizardEmailPlatformCustomCardClick,\n dnsWizardEmailPlatformTitanCardClick,\n dnsWizardEmailPlatformCpanelCardClick,\n dnsWizardAlterEmailPlatformCardClick,\n dnsWizardEmailPlatformCpanelAndTitanCardClick,\n } = analytics;\n\n switch (platformName) {\n case customEmailPlatformName:\n insideModal ? dnsWizardAlterEmailPlatformCardClick(platformName) : dnsWizardEmailPlatformCustomCardClick();\n break;\n case EMAIL_PLATFORM_NAMES.TITAN:\n insideModal ? dnsWizardAlterEmailPlatformCardClick(platformName) : dnsWizardEmailPlatformTitanCardClick();\n break;\n case EMAIL_PLATFORM_NAMES.GMAIL:\n insideModal ? dnsWizardAlterEmailPlatformCardClick(platformName) : dnsWizardEmailPlatformGmailCardClick();\n break;\n case EMAIL_PLATFORM_NAMES.CPANEL:\n insideModal ? dnsWizardAlterEmailPlatformCardClick(platformName) : dnsWizardEmailPlatformCpanelCardClick();\n break;\n case EMAIL_PLATFORM_NAMES.HOSTGATOR:\n insideModal ? dnsWizardAlterEmailPlatformCardClick(platformName) : dnsWizardEmailPlatformCpanelAndTitanCardClick();\n break;\n default:\n break;\n }\n\n setSelected && setSelected(platformId, platformType, platformName);\n setSelectedPlatformType && setSelectedPlatformType(platformType);\n setSelectedPlatformName && setSelectedPlatformName(platformName);\n setSelectedEmailPlatformId && setSelectedEmailPlatformId(platformId);\n };\n\n return (\n \n {platforms && platforms.map(platform => (\n \n \n \n );\n};\n\nexport default DnsWizardEmailPlatformsGrid;\n","import styled, { css } from 'styled-components';\n\nexport const DnsWizardPlanCardWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v1.color.background.boxes};\n border-radius: 4px;\n border: 1px solid ${theme.v1.color.line.wizard};\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n max-width: 100%;\n padding: 24px;\n gap: 16px;\n position: relative;\n\n @media (max-width: ${theme.v1.breakpoints.sm}){\n padding: 24px 24px 60px 24px;\n }\n `}\n`;\n\nexport const Image = styled.img`\n width: fit-content;\n`;\n\nexport const ChangePlatform = styled.span`\n ${({ theme }) => css`\n color: ${theme.v1.color.action.primary};\n cursor: pointer;\n display: initial;\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.v1.font.weights.medium};\n text-align: right;\n\n &:hover {\n color: ${theme.v1.color.action.hover};\n }\n\n @media (max-width: ${theme.v1.breakpoints.sm}){\n bottom: 24px;\n position: absolute;\n right: 24px;\n }\n\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n margin-left: auto;\n }\n `}\n`;\n\nexport const ChangePlanWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n max-width: 100%;\n \n @media (min-width: ${theme.v1.breakpoints.sm}) {\n align-items:center;\n flex-direction: row;\n justify-content: flex-start;\n }\n `}\n`;\n\nexport const MessageWrapper = styled.div`\n ${({ theme }) => css`\n div {\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n }\n\n > div {\n max-width: 880px;\n padding: 0px;\n\n svg {\n height: 31px;\n margin-top: -4px !important;\n width: 31px;\n }\n\n a {\n color: ${theme.v1.color.action.primary};\n }\n\n div:last-child{\n margin-left: 5px;\n }\n }\n `}\n`;\n\nexport const OtherCard = styled.div`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v1.color.text.primary};\n display: flex;\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.medium};\n\n img {\n margin: 0px 8px 0px 0px;\n }\n `}\n`;\n\nexport const SelectedPlatformName = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n display: flex;\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.medium};\n margin: 0 0 0 12px;;\n `}\n`;\n","import { IconInfo } from '@/icons';\nimport { Message } from '@/pages/common';\nimport React from 'react';\nimport * as Styles from './DnsWizardEmailConfigCard.styles';\nimport otherPlatform from '@/media/domains/other-card.png';\n\nconst DnsWizardEmailConfigCard = ({\n testId = 'dns-wizard-email-config-card',\n emailLocale = {\n changePlatformText: 'Alter Platform',\n propagationMessage: 'message',\n },\n changePlatformClick = () => {},\n currentPlatform,\n domain,\n propagating,\n customEmailPlatformName,\n dnsWizardAnalytics,\n}) => {\n const image = currentPlatform();\n const dotBr = domain && domain.includes('.com.br');\n const displayName = image && image.platformName === 'Gmail';\n\n const { changePlatformText, propagationMessage } = emailLocale;\n const startChangePlatformClick = () => {\n dnsWizardAnalytics.dnsWizardAlterPlatformEmailButton();\n changePlatformClick();\n };\n return (\n \n\n \n {image ? (\n <>\n {image.platformName} \n )}\n \n )\n : (\n \n \n )\n }\n \n {changePlatformText}\n \n \n\n {propagating && (\n \n \n )}\n \n );\n};\n\nexport default DnsWizardEmailConfigCard;\n","import styled, { css } from 'styled-components';\n\nexport const ContentWrapper = styled.div`\n padding: 16px 8px 24px 16px;\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 32px;\n margin: 0px;\n `}\n`;\n\nexport const Subtitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 14px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 19px;\n margin: 8px 0px 40px 0px;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n display: flex;\n justify-content: center;\n margin: 40px 0px 0px 0px;\n`;\n","import React from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport * as Styles from './AlterEmailPlatform.styles';\nimport DnsWizardEmailPlatformsGrid from '../../DnsWizardEmailPlatformsGrid/DnsWizardEmailPlatformsGrid';\nimport { Button } from '@/pages/common/v1';\nimport { EMAIL_PLATFORM_NAMES } from '@/enums/domains/dns.enum';\n\nconst AlterEmailPlatform = ({\n handleClose = () => {},\n title = 'Change e-mail plataform',\n subtitle = 'You can change your e-mail plataform <....>',\n continueLabel = 'Continue',\n selectedPlatformType = '',\n emailPlataforms = [\n {\n platformName: 'Titan',\n platformType: 'mail',\n },\n {\n platformName: 'Cpanel',\n platformType: 'cpanel',\n },\n {\n platformName: 'Gmail',\n platformType: 'mail',\n },\n {\n platformName: 'Custom',\n platformType: 'mail',\n },\n ],\n emailLocale,\n setEmailModal,\n dnsWizardAnalytics = { dnsWizardAlterEmailClose: () => {}, dnsWizardAlterEmailContinueButton: () => {} },\n selected = false,\n setSelectedEmailPlatformId,\n setSelected,\n selectedPlatformName = null,\n setSelectedPlatformType,\n setSelectedPlatformName,\n setCustomEmailModal,\n activeEmailPlatform = 'None',\n reserved = false,\n}) => {\n const { dnsWizardAlterEmailClose, dnsWizardAlterEmailContinueButton } = dnsWizardAnalytics;\n const onClose = () => {\n dnsWizardAlterEmailClose();\n handleClose && handleClose();\n };\n\n const handleSelect = (emailPlatformId) => {\n setSelected(true);\n setSelectedEmailPlatformId(emailPlatformId);\n };\n\n const handleClick = () => {\n dnsWizardAlterEmailContinueButton();\n handleClose && handleClose();\n if (selectedPlatformType === 'mail') {\n setEmailModal && setEmailModal(true);\n return;\n }\n setCustomEmailModal(true);\n };\n\n const filteredPlatforms = () => {\n let list = [...emailPlataforms];\n\n if (reserved) {\n list = list.filter(platform => platform.platformName !== EMAIL_PLATFORM_NAMES.CPANEL);\n }\n\n if (activeEmailPlatform) {\n list = list.filter(\n platform => platform.platformName !== activeEmailPlatform\n && platform.platformName !== EMAIL_PLATFORM_NAMES.HOSTGATOR\n && platform.platformName !== EMAIL_PLATFORM_NAMES.RESERVED,\n );\n }\n\n return list;\n };\n\n return (\n \n \n {title} \n {subtitle} \n\n \n \n \n \n );\n};\n\nexport default AlterEmailPlatform;\n","import styled, { css } from 'styled-components';\n\nexport const HostGatorAlterPlatformModalWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 40px;\n margin: 16px 8px;\n @media (min-width: ${theme.breakpoints.sm}) {\n margin: 8px 16px;\n }\n `}\n`;\n\nexport const TitleWrapper = styled.div`\n ${() => css`\n gap: 8px;\n `}\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n line-height: ${theme.font.lineHeights.xxxxxl};\n margin: 0;\n max-width: 90%;\n > div {\n display: inline;\n margin-left:8px;\n > span {\n margin:0;\n }\n }\n > span {\n margin-top: 8px;\n }\n `}\n`;\n\nexport const SubTitle = styled.h2`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n line-height: ${theme.font.lineHeights.lg};\n font-weight: ${theme.font.weights.regular};\n margin: 8px 0 0 0;\n > p {\n > span{\n width: 100%;\n display: block;\n margin-top: 8px;\n }\n margin: 0;\n }\n > div {\n display: inline;\n margin-left: 3px;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ position, theme }) => css`\n display: flex;\n align-items: center;\n flex-direction: column;\n align-self: ${position === 'left' ? 'flex-start' : 'center'};\n text-align: center;\n > div {\n margin: 0 16px 32px 16px;\n }\n @media (min-width: ${theme.breakpoints.sm}) {\n flex-direction: row;\n text-align: left;\n align-items: center;\n > div {\n margin: 0 32px 0 0;\n }\n }\n `}\n`;\n\nexport const ButtonConfig = styled.button`\n ${({ theme }) => css`\n background: transparent;\n border: 0;\n color: ${theme.v2.colors.brand.primaryBlue};\n cursor: pointer;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0 16px 26px;\n padding: 0;\n @media (min-width: ${theme.v2.breakpoints.sm}) {\n margin-bottom: 0;\n }\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const HostingPlatformsGridWrapper = styled.div`\n ${({ theme, maxGridColumns }) => css`\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n\n > *:nth-child(2n-1):nth-last-of-type(1) {\n grid-column: span 2;\n }\n\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n grid-template-columns: 1fr 1fr 1fr;\n gap: 24px;\n\n > *:nth-child(2n-1):nth-last-of-type(1) {\n grid-column: span 1;\n }\n }\n\n @media (min-width: ${theme.v1.breakpoints.md}) {\n grid-template-columns: 1fr 1fr 1fr ;\n }\n\n @media (min-width: ${theme.v1.breakpoints.lg}) {\n grid-template-columns: 1fr 1fr 1fr 1fr ;\n }\n\n @media (min-width: ${theme.v1.breakpoints.xl}) {\n grid-template-columns: repeat(${maxGridColumns}, 1fr);\n }\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const HostingPlatformCardWrapper = styled.div`\n ${() => css`\n min-height: 102px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n > span {\n position: absolute;\n top: 0;\n right: 0;\n }\n > img{\n max-width: 120px;\n }\n `}\n`;\n\nexport const ContentText = styled.p`\n ${({ theme }) => css`\n margin: 8px 0 0 0;\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.xxs};\n line-height: 16px;\n font-weight: ${theme.v1.font.weights.medium};\n text-align: center;\n `}\n`;\n","import React from 'react';\nimport { IconFeaturedStar } from '@/icons';\nimport * as Styles from './DnsWizardHostingPlatformCard.styles';\nimport { HOSTING_PLATFORM_TYPES } from '@/enums/domains/dns.enum';\nimport { domainsAnalytics } from '@/analytics';\n\nconst DnsWizardHostingPlatformCard = ({\n testId = 'hostingcompanycard',\n imageUrl = 'https://www.fillmurray.com/300/200',\n featured = false,\n platformType = HOSTING_PLATFORM_TYPES.HOSTGATOR,\n platformName = '',\n handleOnClick = () => {},\n contentText,\n}) => {\n const handleClick = () => {\n domainsAnalytics.dnsWizard.onlyDnsZoneCtaClick();\n handleOnClick(platformType, platformName);\n };\n\n return (\n \n {featured && \n {contentText}\n \n )}\n \n );\n};\n\nexport default DnsWizardHostingPlatformCard;\n","import React from 'react';\nimport * as Styles from './DnsWizardHostingPlatformsGrid.styles';\nimport { Card } from '@/pages/common/v1/Card';\nimport { DnsWizardHostingPlatformCard } from '@/components/domain/components/DnsWizardHostingPlatformCard';\nimport { HOSTING_PLATFORM_TYPES } from '@/enums/domains/dns.enum';\nimport otherPlatform from '@/media/domains/other-card.png';\nimport reservedPlatform from '@/media/domains/reserved.svg';\n\nconst DnsWizardHostingPlatformsGrid = ({\n testId = 'hostingcompaniesgrid',\n hasAvailableHostGatorPlan,\n hostingPlatforms = [],\n handleOpen = () => {},\n maxGridColumns = 5,\n selected,\n cardContentText,\n selectable,\n hgSelectGa,\n customSelectGa,\n selectedPlatform,\n dnsWizardExternalEditPlatformCardClick,\n reservedCardText,\n handleClickReserved,\n isPointedToReservedServer,\n handleSelectCard,\n}) => {\n const handleSelectPlatform = (platform, platformName) => {\n handleSelectCard && handleSelectCard({\n platform,\n platformName,\n });\n\n switch (platform) {\n case HOSTING_PLATFORM_TYPES.HOSTGATOR:\n hgSelectGa();\n break;\n case HOSTING_PLATFORM_TYPES.CUSTOM:\n customSelectGa();\n break;\n case HOSTING_PLATFORM_TYPES.LOJA_INTEGRADA:\n case HOSTING_PLATFORM_TYPES.TIENDANUBE:\n case HOSTING_PLATFORM_TYPES.NUVEMSHOP:\n case HOSTING_PLATFORM_TYPES.SHOPIFY:\n case HOSTING_PLATFORM_TYPES.DLOJA:\n case HOSTING_PLATFORM_TYPES.EXTERNAL:\n dnsWizardExternalEditPlatformCardClick(platformName);\n break;\n default:\n break;\n }\n };\n\n const handlePointToReserved = () => {\n handleClickReserved && handleClickReserved(HOSTING_PLATFORM_TYPES.RESERVED);\n };\n\n const filteredPlatforms = hostingPlatforms.filter(\n platform => hasAvailableHostGatorPlan\n || platform.platformType !== HOSTING_PLATFORM_TYPES.HOSTGATOR,\n );\n\n return (\n \n {filteredPlatforms.map((platform, index) => (\n \n \n selectable && handleSelectPlatform(HOSTING_PLATFORM_TYPES.CUSTOM)}\n selectedPlan={selectedPlatform}\n />\n \n\n {!isPointedToReservedServer && (\n \n selectable && handleSelectPlatform(HOSTING_PLATFORM_TYPES.RESERVED)}\n />\n \n )}\n \n );\n};\n\nexport default DnsWizardHostingPlatformsGrid;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n position: relative;\n`;\n\nexport const ButtonOutline = styled.button`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.md};\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.font.weights.medium};\n line-height: 22px;\n background-color: transparent;\n padding: 8px 0;\n margin-bottom: 16px;\n color: ${theme.palette.secondary.primary};\n border-radius: 20px;\n border: 2px solid ${theme.palette.secondary.primary};\n cursor: pointer;\n\n &:hover{\n background-color: ${theme.palette.blue.dark};\n border-color: ${theme.palette.blue.dark};\n color: ${theme.palette.white.light};\n }\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n margin:0 32px 0 0;\n padding: 8px 24px;\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n ${props => (props.hasHostGatorPlan === false ? 'max-width:35vw' : 'max-width:90vw')}\n }\n `}\n`;\n\nexport const Title = styled.strong`\n ${({ theme }) => css`\n display: inline;\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.xxl};\n line-height: 32px;\n color: ${theme.palette.primary.darkest};\n `}\n`;\n\nexport const WrapButton = styled.div`\n ${({ theme }) => css`\n display: flex;\n text-align: center;\n justify-content: start;\n flex-direction: column;\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n align-items: baseline;\n flex-direction: row;\n }\n `}\n`;\n\nexport const WrapImgSmall = styled.div`\n ${({ theme }) => css`\n position: absolute;\n bottom: -4px;\n right: 8px;\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n display: none;\n }\n `}\n`;\n\nexport const WrapImgLarge = styled.div`\n ${({ theme }) => css`\n display: none;\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n display: flex;\n justify-content: center;\n }\n `}\n`;\n\nexport const WrapIconFeaturedStar = styled.div`\n position: absolute;\n right: 4px;\n top: 4px;\n`;\n\nexport const FluidText = styled.div`\n ${({ theme }) => css`\n text-align: left;\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.sm};\n color: ${theme.palette.grey.dark};\n margin: 8px 0 16px 0;\n line-height: 19px;\n > div{\n display: inline-block;\n margin-left: 3px;\n span{\n height: 14px;\n height: 14px;\n }\n }\n @media (min-width: ${theme.v1.breakpoints.md}) {\n display: flex;\n align-items: center;\n }\n `}\n`;\n\nexport const InfoContainer = styled.div`\n width: 100%;\n`;\n\nexport const ContentContainer = styled.div`\n ${({ theme }) => css`\n background: ${theme.palette.blue.light} 0% 0% no-repeat padding-box;\n display: flex;\n padding: 16px;\n justify-content: space-between;\n align-items: center;\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n padding: 24px 32px;\n }\n `}\n`;\n\nexport const ContainerButton = styled.div`\n ${({ theme }) => css`\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n margin-top: 0px;\n display: flex;\n }\n `}\n`;\n\nexport const CTA = styled.div`\n ${({ theme, arrow }) => css`\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.medium};\n color: ${theme.palette.secondary.primary};\n line-height: ${theme.font.sizes.xl};\n text-decoration: none;\n text-align: center;\n margin-bottom: 16px;\n cursor: pointer;\n\n & > span {\n content:\"\\a\";\n white-space: pre;\n }\n\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n width: min-content;\n white-space: nowrap;\n transition: transform 0.3s, opacity 0.3s;\n text-align: right;\n justify-self: end;\n & > span {\n content:\"\";\n white-space: nowrap;\n }\n }\n\n &:hover {\n text-decoration: underline;\n }\n\n &:after {\n content: url(${arrow});\n font-size: ${theme.font.sizes.xxxxxxl};\n font-weight: ${theme.font.weights.bold};\n opacity: 0;\n position: absolute;\n transition: transform 0.1s, opacity 0.1s;\n }\n\n &:hover:after {\n opacity: 1;\n transform: translate(5px, -3px);\n }\n `}\n`;\n","import React from 'react';\nimport { IconFeaturedStar } from '@/icons';\nimport * as Styles from './DnsWizardBannerHosting.styles';\nimport arrow from '@/media/icons/icon_arrow_right.svg';\nimport HalfHeadSnappy from '@/media/logo/HalfHeadSnappy/HalfHeadSnappy.svg';\nimport SnappyDefaultLogo from '@/media/logo/SnappyDefaultLogo/SnappyDefaultLogo.svg';\nimport { HOSTING_URL } from '@/config/urls/hostingUrls';\nimport { WHMCS_URL } from '@/config';\n\nconst DnsWizardBannerHosting = ({\n hasHostGatorPlan,\n testId = 'dns-wizard-banner-hosting',\n text,\n upgradePlanOrSeePlansFromBannerClick,\n newPlanFromBannerClick,\n upgradePlanFromBannerText,\n newPlanFromBannerText,\n planId,\n}) => {\n const handleUpgradePlanFromBannerClick = () => {\n upgradePlanOrSeePlansFromBannerClick();\n hasHostGatorPlan ? window.open(\n `${WHMCS_URL}/index.php?m=custom_upgrade&action=selectupgrade&id=${planId}`,\n '_blank',\n ) : window.open(HOSTING_URL, '_blank');\n };\n\n const handleNewPlanFromBannerClick = () => {\n newPlanFromBannerClick();\n window.open(HOSTING_URL, '_blank');\n };\n\n\n return (\n \n \n \n HostGator \n \n {text}\n \n \n {\n handleUpgradePlanFromBannerClick();\n }}\n >\n {upgradePlanFromBannerText}\n \n {hasHostGatorPlan && (\n {\n handleNewPlanFromBannerClick();\n }}\n >\n {newPlanFromBannerText}\n \n )}\n\n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default DnsWizardBannerHosting;\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport { IconError } from '@/icons';\nimport * as Styles from './HostGatorAlterPlatformModal.styles';\nimport { Button } from '@/pages/common/v1/Button';\nimport { Tooltip } from '@/pages/common/v1/Tooltip';\nimport { DnsWizardHostingPlatformsGrid } from '@/components/domain/components/DnsWizardHostingPlatformsGrid';\nimport { DnsWizardBannerHosting } from '../../DnsWizardBannerHosting';\nimport { domainsAnalytics } from '@/analytics';\nimport { PLATFORM_NAMES } from '@/enums/domains/dns.enum';\n\nconst HostGatorAlterPlatformModal = ({\n testId = 'hostgatoralterplatformmodal',\n hostGatorAlterPlatformModal = false,\n showHostGatorPlanOffer = false,\n handleClose = () => {},\n handleContinue = () => {},\n title = 'Title',\n subtitle = 'subTitle',\n buttonText = 'Configurar',\n tooltipMessage = 'tooltipMessage',\n cardContentText = 'cardContentText',\n selectedPlatform = '',\n hostingPlatforms = [],\n customSelectGa,\n hgSelectGa,\n dnsWizardExternalEditPlatformCardClick = () => {},\n dnsWizardBannerHostingProps = () => {},\n handleClickReserved,\n reservedCardText,\n isPointedToReservedServer,\n shouldRenderAdditionalPlanOfferCard,\n shouldRenderNoHostgatorPlan,\n handleReinforceModal,\n}) => {\n const [selected, setSelected] = useState(false);\n const [selectedPlatformName, setSelectedPlatformName] = useState(null);\n const [selectedPlatformType, setSelectedPlatformType] = useState(null);\n const isHostGatorPlanOfferActive = true;\n\n const platformFormatter = (platform = '') => {\n const isString = typeof platform === 'string';\n return isString ? platform.replace(' ', '_').toLowerCase() : platform;\n };\n\n const filteredPlatforms = isHostGatorPlanOfferActive\n ? hostingPlatforms.filter((platform) => {\n const platformFormatted = platformFormatter(platform.platformName);\n const selectedPlatformFormatted = platformFormatter(selectedPlatform);\n return platformFormatted !== selectedPlatformFormatted;\n })\n : hostingPlatforms;\n\n const handleScrolBottom = useCallback(() => {\n if (selectedPlatformName) {\n const modalRef = document.getElementById('alterPlataformModal-card');\n\n if (modalRef) {\n modalRef.scrollTo({\n top: modalRef.scrollHeight,\n behavior: 'smooth',\n });\n }\n }\n }, [selectedPlatformName]);\n\n useEffect(() => {\n handleScrolBottom();\n }, [handleScrolBottom]);\n\n const MAX_GRID_COLUMNS = 4;\n\n\n const getDnsWizardHostingPlatformsGridProps = useCallback(() => {\n const defaultProps = {\n hostingPlatforms: filteredPlatforms,\n hasAvailableHostGatorPlan: true,\n testId: 'platform-grid',\n cardContentText,\n selected,\n selectable: true,\n customSelectGa,\n hgSelectGa,\n selectedPlatform: selectedPlatformName,\n dnsWizardExternalEditPlatformCardClick,\n maxGridColumns: MAX_GRID_COLUMNS,\n reservedCardText,\n handleClickReserved,\n isPointedToReservedServer,\n };\n\n const handleSelectCard = ({ platform, platformName }) => {\n setSelected(true);\n setSelectedPlatformType(platform);\n setSelectedPlatformName(platformName);\n\n if (platformName.toLowerCase() === PLATFORM_NAMES.hostgator.toLowerCase()) {\n if (shouldRenderAdditionalPlanOfferCard || shouldRenderNoHostgatorPlan) {\n handleReinforceModal && handleReinforceModal();\n }\n }\n };\n\n return {\n ...defaultProps,\n handleSelectCard,\n };\n }, [\n cardContentText,\n customSelectGa,\n dnsWizardExternalEditPlatformCardClick,\n filteredPlatforms,\n handleClickReserved,\n hgSelectGa,\n isPointedToReservedServer,\n reservedCardText,\n selected,\n selectedPlatformName,\n shouldRenderAdditionalPlanOfferCard,\n handleReinforceModal,\n shouldRenderNoHostgatorPlan,\n ]);\n\n const handleConfig = () => {\n domainsAnalytics.dnsWizard.continueCtaClick();\n handleContinue(selectedPlatformType, selectedPlatformName);\n };\n\n useEffect(() => {\n setSelected(false);\n }, [hostGatorAlterPlatformModal]);\n\n return (\n <>\n {hostGatorAlterPlatformModal\n && (\n \n \n \n \n \n {title}\n \n \n \n \n {subtitle}\n \n
\n {(showHostGatorPlanOffer && isHostGatorPlanOfferActive) && (\n \n \n \n \n )\n }\n \n );\n};\n\nexport default HostGatorAlterPlatformModal;\n","import styled, { css } from 'styled-components';\n\nexport const HostGatorConfigModalWrapper = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 24px;\n margin: 16px 8px 16px 8px;\n `}\n`;\n\nexport const TitleWrapper = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 8px;\n `}\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.v1.font.weights.bold};\n line-height: ${theme.font.lineHeights.xxxxxl};\n margin: 0;\n max-width: 90%;\n `}\n`;\n\nexport const SubTitle = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.sm};\n line-height: ${theme.font.lineHeights.lg};\n font-weight: ${theme.v1.font.weights.medium};\n margin: 0;\n\n > div {\n display: inline;\n margin-left: 3px;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ theme }) => css`\n align-self: center;\n margin-top: 16px;\n display: block;\n text-align: center;\n @media (min-width: ${theme.v1.breakpoints.md}) {\n display: flex;\n align-items: center;\n }\n `}\n`;\n\nexport const CheckboxWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: flex-start;\n align-self: center;\n gap: 8px;\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.xxs};\n line-height: ${theme.font.lineHeights.md};\n font-weight: ${theme.v1.font.weights.medium};\n\n > input {\n cursor: pointer;\n margin: 0;\n width: 41px;\n height: 24px;\n accent-color: ${theme.v1.color.action.hover};\n }\n\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n align-items: center;\n\n > input {\n margin: 0;\n width: 24px;\n height: 24px;\n }\n }\n `}\n`;\n\nexport const MessageWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: flex-start;\n gap: 8px;\n margin-top: 16px;\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.xxs};\n line-height: ${theme.font.lineHeights.md};\n font-weight: ${theme.v1.font.weights.medium};\n\n > p {\n margin: 0;\n }\n `}\n`;\n\nexport const ButtonConfig = styled.button`\n ${({ theme }) => css`\n color: ${theme.palette.secondary.primary};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.md};\n line-height: ${theme.font.lineHeights.lg};\n font-weight: ${theme.font.weights.medium};\n cursor: pointer;\n border: 0;\n padding: 0;\n margin: 0 16px 24px 16px;\n background: transparent;\n &:disabled {\n opacity: 0.5;\n }\n &:first-child{\n display: none;\n }\n &:last-child{\n margin-top: 24px;\n margin-bottom: 0;\n }\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n margin: 0 8px 0 0;\n &:first-child{\n margin-top: 0;\n display: flex;\n }\n &:last-child{\n display: none;\n }\n }\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const DnsWizardPlanCardWrapper = styled.div`\n ${({ selected, theme }) => css`\n padding: 16px;\n border: 1px solid ${theme.v1.color.border.primary};\n border-radius: 4px;\n display: flex;\n min-height: 122px;\n box-sizing: border-box;\n cursor: pointer;\n max-width: 100%;\n background-color: ${selected ? theme.v1.color.background.boxes : ''};\n &:hover {\n background-color: ${theme.v1.color.background.boxes};\n }\n `}\n`;\n\nexport const DnsWizardContainer = styled.div`\n display: flex;\n flex-direction: column;\n overflow: auto;\n justify-content: flex-start;\n gap: 8px;\n`;\n\nexport const Plan = styled.p`\n ${({ theme }) => css`\n line-height: ${theme.font.lineHeights.lg};\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.sm};\n margin: 0;\n `}\n`;\n\nexport const MainDomain = styled.div`\n ${({ theme }) => css`\n margin: 0;\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 12px;\n line-height: ${theme.font.lineHeights.lg};\n @media (min-width: ${theme.v1.breakpoints.md}) {\n & > br {\n display: none;\n }\n }\n `}\n`;\n\nexport const OtherDomains = styled.div`\n ${({ theme }) => css`\n margin: 0;\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 12px;\n line-height: ${theme.font.lineHeights.lg};\n @media (min-width: ${theme.v1.breakpoints.md}) {\n & > br {\n display: none;\n }\n }\n `}\n`;\n\nexport const Icon = styled.div`\n margin-right: 8px;\n span, svg{\n max-width: 22px;\n max-height: 22px;\n }\n`;\n","export const TLD_LIST = [\n '.academy',\n '.agency',\n '.associates',\n '.bargains',\n '.bike',\n '.biz',\n '.boutique',\n '.builders',\n '.business',\n '.cab',\n '.cafe',\n '.camera',\n '.camp',\n '.cards',\n '.care',\n '.cash',\n '.catering',\n '.cc',\n '.center',\n '.chat',\n '.cheap',\n '.church',\n '.city',\n '.cl',\n '.cleaning',\n '.clothing',\n '.club',\n '.co',\n '.coffee',\n '.com',\n '.com.co',\n '.com.mx',\n '.community',\n '.company',\n '.computer',\n '.construction',\n '.contractors',\n '.cool',\n '.deals',\n '.digital',\n '.direct',\n '.directory',\n '.discount',\n '.dog',\n '.domains',\n '.education',\n '.email',\n '.enterprises',\n '.equipment',\n '.estate',\n '.events',\n '.exchange',\n '.exposed',\n '.express',\n '.fail',\n '.farm',\n '.fitness',\n '.florist',\n '.football',\n '.foundation',\n '.fun',\n '.fyi',\n '.gallery',\n '.gifts',\n '.glass',\n '.graphics',\n '.gratis',\n '.gripe',\n '.group',\n '.guide',\n '.guru',\n '.host',\n '.house',\n '.immo',\n '.in',\n '.industries',\n '.info',\n '.institute',\n '.international',\n '.kitchen',\n '.la',\n '.land',\n '.life',\n '.lighting',\n '.limited',\n '.live',\n '.management',\n '.marketing',\n '.mba',\n '.me',\n '.media',\n '.mobi',\n '.money',\n '.mx',\n '.net',\n '.network',\n '.news',\n '.online',\n '.org',\n '.parts',\n '.photography',\n '.photos',\n '.place',\n '.plumbing',\n '.plus',\n '.press',\n '.productions',\n '.properties',\n '.reisen',\n '.rentals',\n '.repair',\n '.report',\n '.run',\n '.sarl',\n '.school',\n '.schule',\n '.services',\n '.shoes',\n '.show',\n '.singles',\n '.site',\n '.soccer',\n '.solar',\n '.solutions',\n '.space',\n '.store',\n '.style',\n '.supplies',\n '.supply',\n '.support',\n '.systems',\n '.team',\n '.tech',\n '.technology',\n '.tips',\n '.today',\n '.tools',\n '.top',\n '.town',\n '.toys',\n '.training',\n '.tv',\n '.vacations',\n '.vision',\n '.watch',\n '.website',\n '.works',\n '.world',\n '.wtf',\n '.xyz',\n '.zone',\n '.com.br',\n '.net.br',\n '.agr.br',\n '.art.br',\n '.esp.br',\n '.far.br',\n '.imb.br',\n '.ind.br',\n '.inf.br',\n '.radio.br',\n '.rec.br',\n '.srv.br',\n '.tmp.br',\n '.tur.br',\n '.tv.br',\n '.etc.br',\n '.adm.br',\n '.adv.br',\n '.arq.br',\n '.ato.br',\n '.bio.br',\n '.bmd.br',\n '.cim.br',\n '.cng.br',\n '.cnt.br',\n '.ecn.br',\n '.eng.br',\n '.eti.br',\n '.fnd.br',\n '.fot.br',\n '.fst.br',\n '.jor.br',\n '.lel.br',\n '.mat.br',\n '.med.br',\n '.mus.br',\n '.not.br',\n '.ntr.br',\n '.odo.br',\n '.ppg.br',\n '.pro.br',\n '.psc.br',\n '.qsl.br',\n '.slg.br',\n '.taxi.br',\n '.teo.br',\n '.trd.br',\n '.vet.br',\n '.zlg.br',\n '.blog.br',\n '.flog.br',\n '.vlog.br',\n '.wiki.br',\n '.eco.br',\n '.jampa.br',\n '.floripa.br',\n '.poa.br',\n '.vix.br',\n '.belem.br',\n '.recife.br',\n '.macapa.br',\n '.abc.br',\n '.sjc.br',\n '.osasco.br',\n '.bsb.br',\n '.maceio.br',\n '.aju.br',\n '.cuiaba.br',\n '.udi.br',\n '.riobranco.br',\n '.natal.br',\n '.gru.br',\n '.palmas.br',\n '.fortal.br',\n '.londrina.br',\n '.niteroi.br',\n '.aparecida.br',\n '.sorocaba.br',\n '.bhz.br',\n '.contagem.br',\n '.jab.br',\n '.the.br',\n '.jdf.br',\n '.ribeirao.br',\n '.salvador.br',\n '.campinas.br',\n '.sampa.br',\n '.boavista.br',\n '.caxias.br',\n '.goiania.br',\n '.pvh.br',\n '.slz.br',\n '.feira.br',\n '.joinville.br',\n '.morena.br',\n '.curitiba.br',\n '.anani.br',\n '.9guacu.br',\n '.manaus.br',\n '.foz.br',\n '.saogonca.br',\n '.riopreto.br',\n '.santamaria.br',\n '.campinagrande.br',\n '.santoandre.br',\n '.saobernardo.br',\n '.maringa.br',\n '.rio.br',\n '.ltda',\n '.rep.br',\n '.des.br',\n '.det.br',\n '.enf.br',\n '.coz.br',\n '.geo.br',\n '.app.br',\n '.dev.br',\n '.log.br',\n '.seg.br',\n '.tec.br',\n '.bib.br',\n];\n","import { TLD_LIST } from '@/enums/domains/tld.enum';\n\nexport const formatDomainEllipsis = (domainName, maxDomainLength = 20) => {\n if (!domainName || domainName === null) {\n return '';\n }\n if (domainName.length <= maxDomainLength) {\n return domainName;\n }\n\n const reversedDomainPieces = domainName && (domainName.split('.'));\n\n let tld = '';\n while (reversedDomainPieces.length > 0) {\n tld = `.${reversedDomainPieces.pop()}${tld}`;\n if (TLD_LIST.includes(tld)) {\n break;\n }\n }\n\n const slicedStringLength = maxDomainLength - tld.length - 5;\n\n const slicedString = domainName.slice(0, slicedStringLength);\n\n if (tld === domainName) {\n return domainName;\n }\n\n return `${slicedString}...[${tld}]`;\n};\n","import React from 'react';\nimport * as Styles from './DnsWizardPlanCard.styles';\nimport {\n IconHosting,\n IconVPS,\n IconResale,\n IconDedicatedLinux,\n IconDedicatedWindows,\n} from '@/icons';\nimport { PLAN_TYPES } from '@/enums/domains/dns.enum';\nimport { formatDomainEllipsis } from '@/utils/Formatters/formatDomainEllipsis';\n\nconst DnsWizardPlanCard = ({\n plan = 'Title',\n principalDomain = 'principaldomain.com',\n otherDomains = [],\n type = 'hostingaccount',\n selected = false,\n handleSelected,\n id = 0,\n mainDomainText,\n otherDomainsText,\n domainText,\n domainTextPlural,\n planSelectGa,\n selectedPlan,\n platformId = null,\n setPlatformId = p => p,\n}) => {\n const domainsLengthCalc = otherDomains.length - 2;\n const domainsPluralCalc = domainsLengthCalc > 1 ? domainTextPlural : domainText;\n\n const handleCardClick = (type) => {\n handleSelected(id);\n planSelectGa(plan);\n selectedPlan(type);\n setPlatformId(platformId);\n };\n\n const setCardPlanIcon = (planType) => {\n switch (planType) {\n case PLAN_TYPES.PLAN:\n return handleCardClick(type)}\n data-testid={`planCard-${id}`}\n >\n {setCardPlanIcon(type)} \n \n {plan} \n \n {mainDomainText}\n \n { otherDomains.length > 0 && (\n \n {otherDomainsText}\n \n )}\n \n \n\n );\n};\n\nexport default DnsWizardPlanCard;\n","import styled, { css } from 'styled-components';\n\nexport const DnsWizardPlanGridWrapper = styled.section`\n ${({ theme }) => css`\n display: grid;\n gap: 16px;\n grid-template-columns: 1fr;\n @media (min-width: ${theme.v1.breakpoints.md}) {\n grid-template-columns: 1fr 1fr;\n }\n `}\n`;\n","import React, { useState } from 'react';\nimport { useSetConfiguration } from '@/hooks/domains/wizard';\nimport { HOSTING_PLATFORM_TYPES } from '@/enums/domains/dns.enum';\nimport { DnsWizardPlanCard } from '../DnsWizardPlanCard';\nimport * as Styles from './DnsWizardPlanGrid.styles';\n\nconst DnsWizardPlanGrid = ({\n testId = 'dnswizard-plan-grid',\n availablePlans = [],\n setSelected, selected,\n mainDomainText,\n otherDomainsText,\n domainText,\n domainTextPlural,\n planSelectGa,\n selectedPlan,\n platformId,\n setSelectedPlanToShowInReview,\n setSelectedPlanId,\n}) => {\n const [selectedId, setSelectedId] = useState(null);\n const handleSelectPlan = (planId) => {\n setSelected(true);\n setSelectedId(planId);\n setSelectedPlanId(planId);\n setSelectedPlanToShowInReview(planId);\n };\n\n useSetConfiguration(HOSTING_PLATFORM_TYPES.HOSTGATOR, selectedId, platformId);\n\n return (\n \n {availablePlans ? availablePlans.map(hostingPlan => (\n \n );\n};\n\nexport default DnsWizardPlanGrid;\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport { Button } from '@/pages/common/v1/Button';\nimport { Tooltip } from '@/pages/common/v1/Tooltip';\nimport { IconInfo, IconError } from '@/icons';\nimport { domainsAnalytics } from '@/analytics';\nimport { palette } from '@/styles/HgThemeProvider';\nimport * as Styles from './HostGatorConfigModal.styles';\nimport { DnsWizardPlanGrid } from '@/components/domain/components/DnsWizardPlanGrid';\nimport { HOSTING_PLATFORM_TYPES, PLAN_TYPES } from '@/enums/domains/dns.enum';\nimport { IconLoading } from 'gatorcomponents';\n\nconst HostGatorConfigModal = ({\n testId = 'hostgatorconfigmodal',\n hostGatorConfigModal = false,\n handleClose = () => {},\n handleSubmit = () => {},\n handleClickVpsOrDedicatedPlan = () => {},\n title = 'Title',\n subtitle = 'subTitle',\n tooltip = 'tooltip',\n alertMessageText = 'alertMessageText',\n configureButtonText = 'configureButtonText',\n mainDomainText,\n otherDomainsText,\n availablePlans = [],\n domainText,\n domainTextPlural,\n planSelectGa,\n platform = {\n platformID: null,\n },\n setSelectedPlanToShowInReview,\n allowCloudflare,\n loadingCloudflare,\n handlePointCloudflare,\n forceDefaultDnsFlow,\n}) => {\n const { secondary, yellow } = palette;\n const { primary: lightBlueColor } = secondary;\n const { mustard } = yellow;\n const [selected, setSelected] = useState(false);\n const [selectedPlan, setSelectedPlan] = useState(false);\n const [selectedPlanId, setSelectedPlanId] = useState(null);\n\n const { dnsWizard: dnsWizardAnalytics } = domainsAnalytics;\n const {\n dnsWizardConfirmPlanSelection,\n dnsWizardPlanSelectClick,\n } = dnsWizardAnalytics;\n\n const handleSelectedPlan = (plan) => {\n setSelectedPlan(plan);\n };\n\n const defaultFlow = useCallback(() => {\n handleClose();\n if (selectedPlan === PLAN_TYPES.DEDICATED) {\n handleClickVpsOrDedicatedPlan();\n } else {\n handleSubmit(HOSTING_PLATFORM_TYPES.HOSTGATOR);\n }\n }, [\n handleClose,\n handleClickVpsOrDedicatedPlan,\n handleSubmit,\n selectedPlan,\n ]);\n\n const handleConfigureDomain = () => {\n dnsWizardConfirmPlanSelection();\n\n if (allowCloudflare) {\n handlePointCloudflare({ selectedPlanId });\n }\n\n if (!allowCloudflare) {\n defaultFlow();\n }\n };\n\n const forceDefaultFlow = useCallback(() => {\n if (forceDefaultDnsFlow) {\n defaultFlow();\n }\n }, [forceDefaultDnsFlow, defaultFlow]);\n\n useEffect(() => {\n forceDefaultFlow();\n }, [forceDefaultFlow]);\n\n useEffect(() => {\n setSelected(false);\n setSelectedPlan(false);\n }, [hostGatorConfigModal]);\n\n return (\n <>\n {hostGatorConfigModal\n && (\n \n \n \n {title} \n \n {subtitle}\n \n \n \n \n \n\n \n \n \n )\n }\n \n );\n};\n\nexport default HostGatorConfigModal;\n","import styled, { css } from 'styled-components';\n\nexport const HostGatorOtherPlatformModalWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 24px;\n margin: 16px 8px 16px 8px;\n @media (min-width: ${theme.breakpoints.sm}) {\n margin: 16px;\n }\n `}\n`;\n\nexport const TitleWrapper = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 8px;\n `}\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n line-height: ${theme.font.lineHeights.xxxxxl};\n margin: 0;\n max-width: 90%;\n `}\n`;\n\nexport const SubTitle = styled.h2`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n line-height: ${theme.font.lineHeights.lg};\n font-weight: ${theme.font.weights.regular};\n margin: 0;\n > span{\n width: 100%;\n display: block;\n margin-top: 8px;\n font-size: ${theme.font.sizes.xxs};\n }\n > div {\n display: inline;\n margin-left: 3px;\n }\n `}\n`;\n\nexport const MessageWrapper = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n display: flex;\n gap: 8px;\n margin-top: 16px;\n > p {\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxs};\n font-weight: ${theme.font.weights.regular};\n line-height: ${theme.font.lineHeights.md};\n margin: 0;\n > span{\n display: block;\n font-size: ${theme.font.sizes.xxs};\n margin-top: 8px;\n width: 100%;\n }\n }\n `}\n`;\n\nexport const NameServerInputs = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ position }) => css`\n align-self: ${position === 'left' ? 'flex-start' : 'center'} ;\n `}\n`;\n\nexport const TextWrapper = styled.div`\n ${() => css`\n align-items: center;\n display: flex;\n `}\n`;\n\nexport const IconWrapper = styled.div`\n ${({ orientation }) => {\n const rotate = orientation === 'up' ? 'rotate(0)' : 'rotate(180deg)';\n return css`\n align-items: center;\n display: flex;\n transform: ${rotate};\n `;\n }}\n`;\n\nexport const DnsRecordsTable = styled.table`\n ${({ theme }) => css`\n border-collapse: collapse;\n color: ${theme.palette.grey.dark};\n display: none;\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.regular};\n line-height: ${theme.font.lineHeights.lg};\n\n & td {\n border-top: 1px solid ${theme.v1.color.line.fields};\n vertical-align: top;\n }\n\n & th {\n color: ${theme.v1.color.text.featured};\n font-weight: ${theme.font.weights.medium};\n }\n\n & th, & td {\n padding: 8px;\n text-align: left;\n }\n\n & dl {\n margin: 0;\n }\n\n & dt {\n display: inline;\n font-weight: ${theme.font.weights.bold};\n }\n\n & dd {\n display: inline;\n margin: 0;\n }\n\n @media (min-width: ${theme.breakpoints.sm}) {\n display: table;\n }\n `}\n`;\n\n\nexport const DnsRecordsTableSmall = styled.div`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n display: grid;\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.regular};\n line-height: ${theme.font.lineHeights.lg};\n \n & table {\n overflow: hidden;\n padding: 24px 16px 24px 16px;\n }\n\n & table:nth-child(even) {\n background-color: ${theme.v1.color.background.wizard};\n }\n\n & tr {\n border-top: 1px solid ${theme.v1.color.line.fields};\n display: flex;\n justify-content: space-between;\n padding: 10px 0 10px 0;\n }\n\n & tr:first-child {\n border: 0;\n }\n\n & td {\n text-align: right;\n vertical-align: top;\n }\n\n & th {\n color: ${theme.v1.color.text.featured};\n font-weight: ${theme.font.weights.medium};\n text-align: left;\n }\n\n & dl {\n margin: 0;\n }\n\n & dt {\n font-weight: ${theme.font.weights.bold};\n }\n\n & dd {\n margin: 0;\n overflow: hidden;\n }\n\n @media (min-width: ${theme.breakpoints.sm}) {\n display: none;\n }\n `}\n`;\n\nexport const CheckboxWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: flex-start;\n align-self: center;\n gap: 8px;\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.xxs};\n line-height: ${theme.font.lineHeights.md};\n font-weight: ${theme.v1.font.weights.medium};\n\n > input {\n cursor: pointer;\n margin: 0;\n width: 41px;\n height: 24px;\n accent-color: ${theme.v1.color.action.hover};\n }\n\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n align-items: center;\n\n > input {\n margin: 0;\n width: 24px;\n height: 24px;\n }\n }\n `}\n`;\n","import { TLD_LIST } from '@/enums/domains/tld.enum';\n\nexport const splitDomainAndTld = (domainName) => {\n if (!domainName || domainName === null) {\n return '';\n }\n\n const reversedDomainPieces = domainName && (domainName.split('.'));\n\n let tld = '';\n while (reversedDomainPieces.length > 0) {\n tld = `.${reversedDomainPieces.pop()}${tld}`;\n if (TLD_LIST.includes(tld)) {\n break;\n }\n }\n\n\n const domain = domainName.slice(0, -tld.length);\n\n return [domain, tld];\n};\n","import React, { useState } from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport { IconError, IconArrowDownOutlined } from '@/icons';\nimport * as Styles from './HostGatorCustomDnsZoneModal.styles';\nimport { color, v1 } from '@/styles/HgThemeProvider';\nimport { Button } from '@/pages/common/v1/Button';\nimport { splitDomainAndTld } from '@/utils/Formatters/splitDomainAndTld';\nimport { PLATFORM_NAMES, HOSTING_PLATFORM_TYPES } from '@/enums/domains/dns.enum';\n\nconst HostGatorCustomDnsZoneModal = ({\n testId = 'customdnszonemodal',\n customDnsZoneModal = false,\n handleClose = () => {},\n handleConfigureCustomDnsZone = () => {},\n modalsLocale = {\n title: 'title',\n subtitle: 'subtitle',\n alertMessageText: 'alertMessageText',\n checkboxText: 'checkboxText',\n buttonText: 'buttonText',\n alertMessage: () => {},\n tableHeaders: {\n type: '',\n value: '',\n name: '',\n },\n },\n type = null,\n platform = {\n dnsDefaultEntries: [],\n platformID: 'uuid',\n },\n currentType = '',\n domainName = '',\n analytics = {\n dnsWizardCustomDnsZoneConfigureButtonClick: () => {},\n dnsWizardCustomDnsZonePropagationHelpClick: () => {},\n dnsWizardCustomDnsZoneShowRecordsClick: () => {},\n dnsWizardCustomDnsZoneHideRecordsClick: () => {},\n dnsWizardCustomDnsZoneCloseClick: () => {},\n },\n domainIp = '',\n}) => {\n const { mustard } = color;\n\n const [openDnsRecordsTable, setOpenDnsRecordsTable] = useState(false);\n const [hoverColor, setHoverColor] = useState(v1.color.action.primary);\n\n const { platformID: platformId, dnsDefaultEntries } = platform;\n\n const {\n title,\n subtitle,\n configureButtonLabel,\n showButtonLabel,\n hideButtonLabel,\n tableHeaders,\n alertMessage,\n } = modalsLocale;\n\n const {\n dnsWizardCustomDnsZoneConfigureButtonClick,\n dnsWizardCustomDnsZoneShowRecordsClick,\n dnsWizardCustomDnsZoneHideRecordsClick,\n dnsWizardCustomDnsZoneCloseClick,\n dnsWizardCustomDnsZonePropagationHelpClick,\n } = analytics;\n\n const [domain, tld] = splitDomainAndTld(domainName);\n\n const {\n type: headerType, value: headerValue, name: headerName,\n } = tableHeaders;\n\n const handleSubmit = () => {\n handleConfigureCustomDnsZone(HOSTING_PLATFORM_TYPES.CUSTOM_DNS_ZONE, { platformId, type, currentType });\n dnsWizardCustomDnsZoneConfigureButtonClick(type);\n handleClose();\n };\n\n const handleCloseModal = () => {\n dnsWizardCustomDnsZoneCloseClick(type);\n handleClose();\n };\n\n const dnsRecordsTableSwitch = () => {\n if (openDnsRecordsTable) {\n dnsWizardCustomDnsZoneHideRecordsClick(type);\n } else {\n dnsWizardCustomDnsZoneShowRecordsClick(type);\n }\n setOpenDnsRecordsTable(!openDnsRecordsTable);\n };\n\n const formatRecordField = text => `${text}`.replace('{domain}', domain).replace('{tld}', tld).replace('{hosting-ip}', domainIp);\n\n const label = openDnsRecordsTable ? (\n \n {hideButtonLabel}\n \n \n \n ) : (\n \n {showButtonLabel}\n \n \n \n );\n\n const dnsRecordsTable = (\n <>\n\n \n \n {headerType} \n {headerValue} \n {headerName} \n \n {dnsDefaultEntries && dnsDefaultEntries.map(e => (\n \n {formatRecordField(e.type)} \n \n \n {\n Object.keys(e).filter(field => (field === 'address' || field === 'cname' || field === 'txt_data')).map(key => (\n \n
\n {`${formatRecordField(e[key])}`.slice(0, 35)}\n {`${formatRecordField(e[key])}`.length > 35 && '...'}\n \n \n ))\n }\n \n \n \n {`${formatRecordField(e.name)}`.slice(0, 35)}\n {`${formatRecordField(e.name)}`.length > 35 && '...'}\n \n \n ))}\n \n \n {platform && platform.dnsDefaultEntries.map(e => (\n \n \n {headerType} \n {formatRecordField(e.type)} \n \n \n {headerValue} \n {\n Object.keys(e).filter(field => (field === 'address' || field === 'cname' || field === 'txt_data')).map(key => (\n \n {`${formatRecordField(e[key])}`.slice(0, 25)}\n {`${formatRecordField(e[key])}`.length > 25 && '...'}\n \n ))\n }\n \n \n {headerName} \n \n {`${formatRecordField(e.name)}`.slice(0, 25)}\n {`${formatRecordField(e.name)}`.length > 25 && '...'}\n \n \n
\n ))}\n \n \n );\n return (\n <>\n {customDnsZoneModal\n && (\n \n \n \n {title(type)} \n \n {subtitle(type)}\n \n \n setHoverColor(v1.color.white.primary)}\n onMouseLeave={() => setHoverColor(v1.color.action.primary)}\n >\n \n \n \n \n \n \n )\n }\n \n );\n};\n\nexport default HostGatorCustomDnsZoneModal;\n","import styled, { css } from 'styled-components';\n\nexport const HostGatorOtherPlatformModalWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 24px;\n margin: 16px 8px 16px 8px;\n @media (min-width: ${theme.breakpoints.sm}) {\n margin: 16px;\n }\n `}\n`;\n\nexport const TitleWrapper = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 8px;\n `}\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n line-height: ${theme.font.lineHeights.xxxxxl};\n margin: 0;\n max-width: 90%;\n `}\n`;\n\nexport const Description = styled.div`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: 14px;\n line-height: 19px;\n font-weight: ${theme.v1.font.weights.regular};\n margin: 0;\n\n p {\n margin-bottom: 16px;\n }\n\n p > span{\n color: ${theme.v1.color.text.featured};\n font-weight: ${theme.v1.font.weights.bold};\n }\n `}\n`;\n\nexport const MoreInfo = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.featured};\n font-weight: ${theme.v1.font.weights.bold};\n `}\n`;\n\nexport const MessageWrapper = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n display: flex;\n gap: 8px;\n margin-top: 16px;\n > p {\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxs};\n font-weight: ${theme.font.weights.regular};\n line-height: ${theme.font.lineHeights.md};\n margin: 0;\n > span{\n display: block;\n font-size: ${theme.font.sizes.xxs};\n margin-top: 8px;\n width: 100%;\n }\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ position }) => css`\n align-self: ${position === 'left' ? 'flex-start' : 'center'} ;\n `}\n`;\n\nexport const CheckboxWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: flex-start;\n align-self: center;\n gap: 8px;\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.xxs};\n line-height: ${theme.font.lineHeights.md};\n font-weight: ${theme.v1.font.weights.medium};\n\n > input {\n cursor: pointer;\n margin: 0;\n width: 41px;\n height: 24px;\n accent-color: ${theme.v1.color.action.hover};\n }\n\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n align-items: center;\n\n > input {\n margin: 0;\n width: 24px;\n height: 24px;\n }\n }\n `}\n`;\n","import React, { useState } from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport { IconError } from '@/icons';\nimport * as Styles from './HostGatorCustomEmailModal.styles';\nimport { color } from '@/styles/HgThemeProvider';\nimport { Button } from '@/pages/common/v1/Button';\n\nconst HostGatorCustomEmailModal = ({\n testId = 'customdnszonemodal',\n emailModal = false,\n handleClose = () => {},\n handleConfigureEmail = () => {},\n domainName,\n firstTimeConfigure = false,\n modalsLocale = {},\n platform = {\n dnsDefaultEntries: [],\n platformID: 'uuid',\n platformName: '',\n },\n analytics = {},\n reserved = false,\n}) => {\n const { platformID: platformId } = platform;\n const displayCheckbox = !firstTimeConfigure && (platform.platformName === '' && reserved === true) === false;\n\n const {\n title,\n description,\n button: configureButtonLabel,\n checkbox: checkboxText,\n alertMessage,\n moreInfo,\n } = modalsLocale;\n\n const {\n dnsWizardAlterEmailCustomCloseClick,\n dnsWizardAlterEmailCustomCheckbox,\n dnsWizardAlterEmailCustomHelpLink,\n dnsWizardAlterEmailCustomConfigureButton,\n } = analytics;\n\n const { mustard } = color;\n\n const [checked, setChecked] = useState(false);\n\n const buttonIsDisabled = !firstTimeConfigure && !checked && !reserved;\n const handleChange = () => {\n dnsWizardAlterEmailCustomCheckbox();\n setChecked(!checked);\n };\n\n const handleSubmit = () => {\n handleConfigureEmail(platformId);\n dnsWizardAlterEmailCustomConfigureButton();\n handleClose();\n setChecked(false);\n };\n\n const handleCloseModal = () => {\n dnsWizardAlterEmailCustomCloseClick();\n setChecked(false);\n handleClose();\n };\n\n return (\n <>\n {emailModal\n && (\n \n \n \n {title} \n \n \n {description(domainName)}\n {moreInfo(dnsWizardAlterEmailCustomHelpLink)}
\n \n \n \n {displayCheckbox && (\n \n \n {checkboxText}\n
\n \n )}\n \n \n \n \n )\n }\n \n );\n};\n\nexport default HostGatorCustomEmailModal;\n","import styled, { css } from 'styled-components';\n\nexport const HostGatorOtherPlatformModalWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 24px;\n margin: 16px 8px 16px 8px;\n @media (min-width: ${theme.breakpoints.sm}) {\n margin: 16px;\n }\n `}\n`;\n\nexport const TitleWrapper = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 8px;\n `}\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n line-height: ${theme.font.lineHeights.xxxxxl};\n margin: 0;\n max-width: 90%;\n `}\n`;\n\nexport const SubTitle = styled.h2`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n line-height: ${theme.font.lineHeights.lg};\n font-weight: ${theme.font.weights.regular};\n margin: 0;\n > span{\n color: ${theme.v1.color.text.featured};\n font-weight: ${theme.v1.font.weights.bold};\n }\n `}\n`;\n\nexport const MessageWrapper = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n display: flex;\n gap: 8px;\n margin-top: 16px;\n > p {\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxs};\n font-weight: ${theme.font.weights.regular};\n line-height: ${theme.font.lineHeights.md};\n margin: 0;\n > span{\n display: block;\n font-size: ${theme.font.sizes.xxs};\n margin-top: 8px;\n width: 100%;\n }\n }\n `}\n`;\n\nexport const NameServerInputs = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ position }) => css`\n align-self: ${position === 'left' ? 'flex-start' : 'center'} ;\n `}\n`;\n\nexport const TextWrapper = styled.div`\n ${() => css`\n align-items: center;\n display: flex;\n `}\n`;\n\nexport const IconWrapper = styled.div`\n ${({ orientation }) => {\n const rotate = orientation === 'up' ? 'rotate(0)' : 'rotate(180deg)';\n return css`\n align-items: center;\n display: flex;\n transform: ${rotate};\n `;\n }}\n`;\n\nexport const DnsRecordsTable = styled.table`\n ${({ theme }) => css`\n border-collapse: collapse;\n color: ${theme.palette.grey.dark};\n display: none;\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.regular};\n line-height: ${theme.font.lineHeights.lg};\n\n & td {\n border-top: 1px solid ${theme.v1.color.line.fields};\n vertical-align: top;\n }\n\n & th {\n color: ${theme.v1.color.text.featured};\n font-weight: ${theme.font.weights.medium};\n }\n\n & th, & td {\n padding: 8px;\n text-align: left;\n }\n\n & dl {\n margin: 0;\n }\n\n & dt {\n display: inline;\n font-weight: ${theme.font.weights.bold};\n }\n\n & dd {\n display: inline;\n margin: 0;\n }\n\n @media (min-width: ${theme.breakpoints.sm}) {\n display: table;\n }\n `}\n`;\n\n\nexport const DnsRecordsTableSmall = styled.div`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n display: grid;\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.regular};\n line-height: ${theme.font.lineHeights.lg};\n\n & table {\n overflow: hidden;\n padding: 24px 16px 24px 16px;\n }\n\n & table:nth-child(even) {\n background-color: ${theme.v1.color.background.wizard};\n }\n\n & tr {\n border-top: 1px solid ${theme.v1.color.line.fields};\n display: flex;\n justify-content: space-between;\n padding: 10px 0 10px 0;\n }\n\n & tr:first-child {\n border: 0;\n }\n\n & td {\n text-align: right;\n vertical-align: top;\n }\n\n & th {\n color: ${theme.v1.color.text.featured};\n font-weight: ${theme.font.weights.medium};\n text-align: left;\n }\n\n & dl {\n margin: 0;\n }\n\n & dt {\n font-weight: ${theme.font.weights.bold};\n }\n\n & dd {\n margin: 0;\n overflow: hidden;\n }\n\n @media (min-width: ${theme.breakpoints.sm}) {\n display: none;\n }\n `}\n`;\n\nexport const CheckboxWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: flex-start;\n align-self: center;\n gap: 8px;\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.xxs};\n line-height: ${theme.font.lineHeights.md};\n font-weight: ${theme.v1.font.weights.medium};\n\n > input {\n cursor: pointer;\n margin: 0;\n width: 41px;\n height: 24px;\n accent-color: ${theme.v1.color.action.hover};\n }\n\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n align-items: center;\n\n > input {\n margin: 0;\n width: 24px;\n height: 24px;\n }\n }\n `}\n`;\n","import React, { useState } from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport { IconError, IconArrowDownOutlined } from '@/icons';\nimport * as Styles from './HostGatorEmailModal.styles';\nimport { color, v1 } from '@/styles/HgThemeProvider';\nimport { Button } from '@/pages/common/v1/Button';\nimport { splitDomainAndTld } from '@/utils/Formatters/splitDomainAndTld';\n\nconst HostGatorEmailModal = ({\n testId = 'customdnszonemodal',\n emailModal = false,\n handleClose = () => {},\n handleConfigureEmail = () => {},\n firstTimeConfigure = false,\n modalsLocale = {\n title: 'title',\n subtitle: () => null,\n gmailSubtitle: () => null,\n alertMessageText: 'alertMessageText',\n checkboxText: 'checkboxText',\n buttonText: 'buttonText',\n alertMessage: () => {},\n tableHeaders: {\n type: '',\n value: '',\n name: '',\n },\n },\n platform = {\n dnsDefaultEntries: [],\n platformID: 'uuid',\n platformName: '',\n },\n domainName = '',\n analytics = {\n dnsWizardEmailModalHideRecords: () => {},\n dnsWizardEmailModalShowRecords: () => {},\n dnsWizardEmailModalClose: () => {},\n dnsWizardEmailModalCheckbox: () => {},\n dnsWizardEmailModalHelp: () => {},\n dnsWizardEmailModalConfigure: () => {},\n },\n domainIp = '',\n reserved = false,\n}) => {\n const { platformID: platformId, dnsDefaultEntries, platformName } = platform;\n const displayCheckbox = !firstTimeConfigure && (platform.platformName === 'Gmail' && reserved === true) === false;\n const {\n title,\n subtitle,\n gmailSubtitle,\n configureButtonLabel,\n showButtonLabel,\n hideButtonLabel,\n tableHeaders,\n checkboxText,\n alertMessage,\n } = modalsLocale;\n\n const {\n dnsWizardEmailModalHideRecords,\n dnsWizardEmailModalShowRecords,\n dnsWizardEmailModalClose,\n dnsWizardEmailModalCheckbox,\n dnsWizardEmailModalHelp,\n dnsWizardEmailModalConfigure,\n } = analytics;\n\n const { mustard } = color;\n\n const [openDnsRecordsTable, setOpenDnsRecordsTable] = useState(false);\n const [checked, setChecked] = useState(false);\n const [hoverColor, setHoverColor] = useState(v1.color.action.primary);\n const buttonIsDisabled = !firstTimeConfigure && !checked && !reserved;\n const handleChange = () => {\n dnsWizardEmailModalCheckbox(platformName);\n setChecked(!checked);\n };\n\n\n const [domain, tld] = splitDomainAndTld(domainName);\n\n const {\n type: headerType, value: headerValue, name: headerName,\n } = tableHeaders;\n\n const handleSubmit = () => {\n handleConfigureEmail(platformId);\n dnsWizardEmailModalConfigure(platformName);\n setOpenDnsRecordsTable(false);\n handleClose();\n setChecked(false);\n };\n\n const handleCloseModal = () => {\n dnsWizardEmailModalClose(platformName);\n setOpenDnsRecordsTable(false);\n handleClose();\n setChecked(false);\n };\n\n const dnsRecordsTableSwitch = () => {\n if (openDnsRecordsTable) {\n dnsWizardEmailModalHideRecords(platformName);\n } else {\n dnsWizardEmailModalShowRecords(platformName);\n }\n setOpenDnsRecordsTable(!openDnsRecordsTable);\n };\n\n const formatRecordField = text => `${text}`.replace('{domain}', domain).replace('{tld}', tld).replace('{hosting-ip}', domainIp);\n const label = openDnsRecordsTable ? (\n \n {hideButtonLabel}\n \n \n \n ) : (\n \n {showButtonLabel}\n \n \n \n );\n\n const dnsRecordsTable = (\n <>\n\n \n \n {headerType} \n {headerValue} \n {headerName} \n \n {dnsDefaultEntries && dnsDefaultEntries.map(e => (\n \n {formatRecordField(e.type)} \n \n \n {\n Object.keys(e).filter(field => (field === 'address' || field === 'cname' || field === 'exchange' || field === 'txt_data')).map(key => (\n \n
\n {`${formatRecordField(e[key])}`.slice(0, 35)}\n {`${formatRecordField(e[key])}`.length > 35 && '...'}\n \n \n ))\n }\n \n \n \n {`${formatRecordField(e.name)}`.slice(0, 35)}\n {`${formatRecordField(e.name)}`.length > 35 && '...'}\n \n \n ))}\n \n \n {platform && platform.dnsDefaultEntries.map(e => (\n \n \n {headerType} \n {formatRecordField(e.type)} \n \n \n {headerValue} \n {\n Object.keys(e).filter(field => (field === 'address' || field === 'cname' || field === 'exchange' || field === 'txt_data')).map(key => (\n \n
\n {`${formatRecordField(e[key])}`.slice(0, 35)}\n {`${formatRecordField(e[key])}`.length > 35 && '...'}\n \n \n ))\n }\n \n \n {headerName} \n \n {`${formatRecordField(e.name)}`.slice(0, 25)}\n {`${formatRecordField(e.name)}`.length > 25 && '...'}\n \n \n
\n ))}\n \n \n );\n\n const subtitleText = platformName === 'Gmail'\n ? gmailSubtitle(platformName, domainName, () => dnsWizardEmailModalHelp(platformName))\n : subtitle(platformName, domainName, () => dnsWizardEmailModalHelp(platformName));\n\n return (\n <>\n {emailModal\n && (\n \n \n \n {title(platformName)} \n \n {subtitleText}\n \n \n setHoverColor(v1.color.white.primary)}\n onMouseLeave={() => setHoverColor(v1.color.action.primary)}\n >\n \n \n {displayCheckbox && (\n \n \n )}\n \n \n \n \n )\n }\n \n );\n};\n\nexport default HostGatorEmailModal;\n","import styled, { css } from 'styled-components';\n\nexport const HostGatorOtherPlatformModalWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 24px;\n margin: 16px 8px 16px 8px;\n @media (min-width: ${theme.breakpoints.sm}) {\n margin: 16px;\n }\n `}\n`;\n\nexport const FieldsWrapper = styled.div`\n ${({ theme }) => css`\n @media (min-width: ${theme.breakpoints.sm}) {\n max-width: 60%;\n }\n `}\n`;\n\nexport const TitleWrapper = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 8px;\n `}\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n line-height: ${theme.font.lineHeights.xxxxxl};\n margin: 0;\n max-width: 90%;\n `}\n`;\n\nexport const SubTitle = styled.h2`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n line-height: ${theme.font.lineHeights.lg};\n font-weight: ${theme.font.weights.regular};\n margin: 0;\n > span{\n width: 100%;\n display: block;\n margin-top: 8px;\n font-size: ${theme.font.sizes.xxs};\n }\n > div {\n display: inline;\n margin-left: 3px;\n }\n `}\n`;\n\nexport const MessageWrapper = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n display: flex;\n gap: 8px;\n margin-top: 16px;\n > p {\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxs};\n font-weight: ${theme.font.weights.regular};\n line-height: ${theme.font.lineHeights.md};\n margin: 0;\n > span{\n display: block;\n font-size: ${theme.font.sizes.xxs};\n margin-top: 8px;\n width: 100%;\n }\n }\n `}\n`;\n\nexport const NameServerInputs = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ position }) => css`\n align-self: ${position === 'left' ? 'flex-start' : 'center'} ;\n `}\n`;\n\nexport const TextWrapper = styled.div`\n ${() => css`\n align-items: center;\n display: flex;\n `}\n`;\n\nexport const IconWrapper = styled.div`\n ${({ orientation }) => {\n const rotate = orientation === 'up' ? 'rotate(0)' : 'rotate(180deg)';\n return css`\n align-items: center;\n display: flex;\n transform: ${rotate};\n `;\n }}\n`;\n\nexport const DnsRecordsTable = styled.table`\n ${({ theme }) => css`\n border-collapse: collapse;\n color: ${theme.palette.grey.dark};\n display: none;\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.regular};\n line-height: ${theme.font.lineHeights.lg};\n\n & td {\n border-top: 1px solid ${theme.v1.color.line.fields};\n vertical-align: top;\n }\n\n & th {\n color: ${theme.v1.color.text.featured};\n font-weight: ${theme.font.weights.medium};\n }\n\n & th, & td {\n padding: 8px;\n text-align: left;\n }\n\n & dl {\n margin: 0;\n }\n\n & dt {\n display: inline;\n font-weight: ${theme.font.weights.bold};\n }\n\n & dd {\n display: inline;\n margin: 0;\n }\n\n @media (min-width: ${theme.breakpoints.sm}) {\n display: table;\n }\n `}\n`;\n\n\nexport const DnsRecordsTableSmall = styled.div`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n display: grid;\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.regular};\n line-height: ${theme.font.lineHeights.lg};\n \n & table {\n overflow: hidden;\n padding: 24px 16px 24px 16px;\n }\n\n & table:nth-child(even) {\n background-color: ${theme.v1.color.background.wizard};\n }\n\n & tr {\n border-top: 1px solid ${theme.v1.color.line.fields};\n display: flex;\n justify-content: space-between;\n padding: 10px 0 10px 0;\n }\n\n & tr:first-child {\n border: 0;\n }\n\n & td {\n text-align: right;\n vertical-align: top;\n }\n\n & th {\n color: ${theme.v1.color.text.featured};\n font-weight: ${theme.font.weights.medium};\n text-align: left;\n }\n\n & dl {\n margin: 0;\n }\n\n & dt {\n font-weight: ${theme.font.weights.bold};\n }\n\n & dd {\n margin: 0;\n overflow: hidden;\n }\n\n @media (min-width: ${theme.breakpoints.sm}) {\n display: none;\n }\n `}\n`;\n\nexport const CheckboxWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: flex-start;\n align-self: center;\n gap: 8px;\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.xxs};\n line-height: ${theme.font.lineHeights.md};\n font-weight: ${theme.v1.font.weights.medium};\n\n > input {\n cursor: pointer;\n margin: 0;\n width: 41px;\n height: 24px;\n accent-color: ${theme.v1.color.action.hover};\n }\n\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n align-items: center;\n\n > input {\n margin: 0;\n width: 24px;\n height: 24px;\n }\n }\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n display: grid;\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n `}\n`;\n\nexport const NameServerWrapper = styled.div`\n ${({ visible, theme }) => css`\n align-items: center;\n border-bottom: 1px solid ${theme.v1.color.line.fields};\n display: ${visible ? 'flex' : 'none'};\n justify-content: space-between;\n padding: 8px;\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n flex-grow: 1;\n }\n `}\n`;\n\nexport const EditWrapper = styled.div`\n ${({ visible, theme }) => css`\n display: ${visible ? 'flex' : 'none'};\n flex-direction: column;\n justify-content: space-between;\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n flex-grow: 1;\n }\n `}\n`;\n\nexport const EditFieldsWrapper = styled.div`\n ${({ theme }) => css`\n border-bottom: 1px solid ${theme.v1.color.line.fields};\n display: flex;\n justify-content: space-between;\n padding: 8px;\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n flex-grow: 1;\n }\n `} \n`;\n\nexport const IconWrapper = styled.div`\n ${() => css`\n display: flex;\n gap: 8px;\n `}\n`;\n\n\nexport const Label = styled.label`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.featured};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.font.weights.medium};\n letter-spacing: 0px;\n line-height: ${theme.font.lineHeights.xl};\n white-space: nowrap;\n `}\n`;\n\nexport const Input = styled.input`\n ${({ theme }) => css`\n background-color: transparent;\n border: 0;\n color: ${theme.v1.color.text.primary};\n flex-grow: 1;\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.regular};\n margin: 0;\n outline: none;\n padding: 0;\n `}\n`;\n\nexport const NameServer = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.font.weights.regular};\n letter-spacing: 0px;\n line-height: ${theme.font.lineHeights.lg};\n margin: 0;\n `}\n`;\n\nexport const Error = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.warning.error};\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.v1.font.weights.regular};\n font-size: ${theme.font.sizes.xxs};\n line-height: ${theme.font.lineHeights.lg};\n `}\n`;\n\nexport const Edit = styled.div`\n ${() => css`\n display: flex;\n cursor: pointer;\n ${({ theme }) => css`\n & span svg:hover {\n filter: brightness(60%);\n }\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n position: initial;\n }\n `}\n `}\n`;\n\nexport const SaveAndClose = styled.div`\n ${() => css`\n display: flex;\n cursor: pointer;\n ${({ theme }) => css`\n & span svg:hover {\n filter: brightness(60%);\n }\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n position: initial;\n }\n `}\n `}\n`;\n","import React, { useState, useEffect, useRef } from 'react';\nimport * as Styles from './DnsWizardExternalFormField.styles';\nimport { v1 } from '@/styles/HgThemeProvider';\nimport { IconEdit, IconCheck, IconClose } from '@/icons';\nimport { ERROR_MESSAGES } from '@/enums/domains/dns.enum';\n\nfunction DnsWizardExternalFormField({\n testId = 'dnswizardexternalformfield',\n inputValue = 'ns01.godaddy.com',\n controlName = 'id01',\n label = 'Servidor 1',\n editing = false,\n setEditing = () => {},\n setValue = p => p,\n handleEdit = () => {},\n getMessage = p => p,\n focused,\n}) {\n const [error, setError] = useState(false);\n const [nameServer, setNameServer] = useState(null);\n const [editingNameServer, setEditingNameServer] = useState(inputValue);\n const inputRef = useRef();\n\n const validateNameServer = (ns) => {\n const regex = /^[a-z0-9]+([-.]{1}[a-z0-9]+)*\\.[a-z]{2,5}(:[0-9]{1,5})?(\\/.*)?$/;\n return regex.test(ns);\n };\n\n const validateNameServerInput = (ns) => {\n const regex = /[^-a-z0-9.]+/i;\n return !regex.test(ns);\n };\n\n const handleChange = (e) => {\n e.preventDefault();\n const { value } = e.target;\n const isNameServerValid = validateNameServer(value) && validateNameServerInput(value);\n setEditingNameServer(value);\n setError(isNameServerValid ? null : getMessage(ERROR_MESSAGES.INVALID_SERVER));\n };\n\n const handleToggleEdit = () => {\n if (!editing) {\n setEditingNameServer(nameServer);\n handleEdit();\n }\n setError(false);\n setEditing(!editing);\n };\n\n const handleSave = () => {\n if (editingNameServer === '') {\n setError(getMessage(ERROR_MESSAGES.REQUIRED));\n return;\n }\n if (!error) {\n setEditing(!editing);\n setNameServer(editingNameServer);\n setValue(editingNameServer);\n }\n };\n\n useEffect(() => {\n setNameServer(inputValue);\n if (focused) {\n setEditingNameServer(nameServer);\n inputRef.current.focus();\n }\n }, [inputValue, focused, setEditingNameServer, nameServer]);\n\n return (\n \n {label} \n \n \n \n \n \n \n \n \n \n {error && (\n \n {error}\n \n )}\n \n \n \n {nameServer}\n \n \n \n \n \n );\n}\n\nexport default DnsWizardExternalFormField;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport * as Styles from './HostGatorExternalModal.styles';\nimport { IconError } from '@/icons';\nimport { Button } from '@/pages/common/v1/Button';\nimport { DnsWizardExternalFormField } from '@/components/domain/components/DnsWizardExternalFormField';\n\nimport { color } from '@/styles/HgThemeProvider';\nimport { HOSTING_PLATFORM_TYPES } from '@/enums/domains/dns.enum';\n\nconst HostGatorExternalModal = ({\n testId = 'customdnszonemodal',\n handleClose = () => {},\n externalModal,\n platformName,\n platform,\n modalsLocale = {\n title: p => p,\n subtitle: 'subtitle',\n alertMessage: () => {},\n configureButtonLabel: 'button',\n checkboxText: 'checkboxText',\n },\n analytics = {},\n defaultNameServers = [],\n firstTimeConfigure = false,\n handleConfigureExternalPlatform = p => p,\n errorsLocale = {},\n}) => {\n const { mustard } = color;\n\n const {\n dnsWizardExternalPlatformModalCloseButtonClick,\n dnsWizardExternalPlatformModalConfirmButtonClick,\n dnsWizardExternalPlatformModalEditNameServerButtonClick,\n dnsWizardExternalPlatformModalHelpLinkClick,\n } = analytics;\n\n const [ns1, setNs1] = useState(defaultNameServers[0]);\n const [ns2, setNs2] = useState(defaultNameServers[1]);\n const [ns3, setNs3] = useState(defaultNameServers[2]);\n const [ns4, setNs4] = useState(defaultNameServers[3]);\n const [editingNs1, setEditingNs1] = useState(true);\n const [editingNs2, setEditingNs2] = useState(false);\n const [editingNs3, setEditingNs3] = useState(false);\n const [editingNs4, setEditingNs4] = useState(false);\n const [checked, setChecked] = useState(false);\n\n const handleSubmit = () => {\n const submitData = {\n platformId: platform.platformID,\n platformName,\n master: {\n name: 'master',\n host: ns1,\n ip: '',\n },\n slave1: {\n name: 'slave1',\n host: ns2,\n ip: '',\n },\n slave2: {\n name: 'slave2',\n host: ns3,\n ip: '',\n },\n slave3: {\n name: 'slave3',\n host: ns4,\n ip: '',\n },\n };\n\n handleConfigureExternalPlatform(HOSTING_PLATFORM_TYPES.EXTERNAL, submitData);\n\n dnsWizardExternalPlatformModalConfirmButtonClick(platformName);\n handleClose();\n setChecked(false);\n };\n\n const handleCloseModal = () => {\n dnsWizardExternalPlatformModalCloseButtonClick(platformName);\n setChecked(false);\n handleClose();\n };\n\n const {\n title, subtitle, alertMessage, configureButtonLabel, serverLabel,\n } = modalsLocale;\n\n const canGoToNextStep = useCallback(() => {\n const isNotEditing = !editingNs1 && !editingNs2 && !editingNs3 && !editingNs4;\n setChecked(isNotEditing);\n }, [editingNs1, editingNs2, editingNs3, editingNs4]);\n\n useEffect(() => {\n canGoToNextStep();\n }, [canGoToNextStep]);\n\n useEffect(() => {\n setNs1(defaultNameServers[0]);\n setNs2(defaultNameServers[1]);\n setNs3(defaultNameServers[2]);\n setNs4(defaultNameServers[3]);\n }, [defaultNameServers]);\n\n return (\n <>\n {externalModal\n && (\n \n \n \n \n {title(platformName)}\n \n {subtitle} \n \n \n {ns1 && (\n { dnsWizardExternalPlatformModalEditNameServerButtonClick(platformName, 1); }}\n setValue={setNs1}\n getMessage={errorsLocale.getMessage}\n editing={editingNs1}\n setEditing={setEditingNs1}\n focused\n />\n )}\n {ns2 && (\n { dnsWizardExternalPlatformModalEditNameServerButtonClick(platformName, 2); }}\n setValue={setNs2}\n getMessage={errorsLocale.getMessage}\n editing={editingNs2}\n setEditing={setEditingNs2}\n />\n )}\n {ns3 && (\n { dnsWizardExternalPlatformModalEditNameServerButtonClick(platformName, 3); }}\n setValue={setNs3}\n getMessage={errorsLocale.getMessage}\n editing={editingNs3}\n setEditing={setEditingNs3}\n />\n )}\n {ns4 && (\n { dnsWizardExternalPlatformModalEditNameServerButtonClick(platformName, 4); }}\n setValue={setNs4}\n getMessage={errorsLocale.getMessage}\n editing={editingNs4}\n setEditing={setEditingNs4}\n />\n )}\n \n\n \n \n\n \n \n \n \n )\n }\n \n );\n};\n\nexport default HostGatorExternalModal;\n","import styled, { css } from 'styled-components';\n\nexport const HostGatorOtherPlatformModalWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 24px;\n margin: 16px 8px 16px 8px;\n @media (min-width: ${theme.breakpoints.sm}) {\n margin: 16px;\n }\n `}\n`;\n\nexport const TitleWrapper = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 8px;\n `}\n`;\n\nexport const HelpWrapper = styled.div`\n ${({ theme }) => css`\n display: block;\n margin-top: -12px;\n\n > p {\n color: ${theme.v1.color.text.primary};\n display: contents;\n font-family: ${theme.v1.font.family.primary};\n font-size: 12px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 16px;\n margin: 0;\n word-break: break-word;\n\n a {\n font-weight: ${theme.v1.font.weights.medium};\n }\n }\n `}\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxl};\n font-weight: ${theme.font.weights.bold};\n line-height: ${theme.font.lineHeights.xxxxxl};\n margin: 0;\n max-width: 90%;\n `}\n`;\n\nexport const SubTitle = styled.h2`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.sm};\n line-height: ${theme.font.lineHeights.lg};\n font-weight: ${theme.font.weights.regular};\n margin: 0;\n > span{\n width: 100%;\n display: block;\n margin-top: 8px;\n font-size: ${theme.font.sizes.xxs};\n }\n > div {\n display: inline;\n margin-left: 3px;\n }\n `}\n`;\n\nexport const MessageWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: flex-start;\n gap: 8px;\n margin-top: 16px;\n > p {\n color: ${theme.palette.grey.dark};\n font-family: ${theme.font.family.secondary};\n font-size: ${theme.font.sizes.xxs};\n line-height: ${theme.font.lineHeights.md};\n font-weight: ${theme.font.weights.regular};\n margin: 0;\n > span{\n width: 100%;\n display: block;\n margin-top: 8px;\n font-size: ${theme.font.sizes.xxs};\n }\n }\n `}\n`;\n\nexport const NameServerInputs = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ position }) => css`\n align-self: ${position === 'left' ? 'flex-start' : 'center'} ;\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const DnsWizardCustomServerFormFieldWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n \n @media (min-width: ${theme.breakpoints.md}) {\n flex-direction: row;\n gap: 24px;\n align-items: flex-start;\n }\n `}\n`;\n\nexport const Label = styled.label`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.featured};\n text-align: left;\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.v1.font.weights.medium};\n font-size: ${theme.font.sizes.md};\n line-height: ${theme.font.lineHeights.xl};\n \n & small {\n font-weight: ${theme.v1.font.weights.regular};\n color: ${theme.v1.color.text.primary};\n font-size: ${theme.font.sizes.xxs};\n line-height: ${theme.font.lineHeights.xl};\n }\n `}\n`;\n\nexport const TextInput = styled.input.attrs({ type: 'text' })`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n border: 0;\n background: transparent;\n padding: 0 8px 8px 8px;\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.v1.font.weights.regular};\n font-size: ${theme.font.sizes.sm};\n line-height: ${theme.font.lineHeights.lg};\n border-bottom: 1px solid ${theme.v1.color.line.fields};\n outline: none;\n &::placeholder {\n color: ${theme.v1.color.text.label};\n }\n `}\n`;\n\nexport const Divider = styled.div`\n ${({ theme, visible }) => css`\n display: none;\n min-height: 16px;\n align-items: center;\n justify-content: center;\n align-self: center;\n @media (min-width: ${theme.breakpoints.md}) {\n display: ${visible ? 'flex' : 'none'};\n visibility: ${visible ? 'visible' : 'hidden'};\n display: flex;\n }\n `}\n`;\n\nexport const FieldSet = styled.fieldset`\n ${({ theme, visible, forIpAddress }) => css`\n border: 0;\n padding: 0;\n margin: ${forIpAddress ? '0px 0px 32px 0px' : '0px'};\n display: ${visible ? 'flex' : 'none'};\n flex-direction: column;\n gap: 8px;\n flex: 1 1;\n\n & input {\n flex-grow: 1;\n }\n \n @media (min-width: ${theme.breakpoints.md}) {\n margin-bottom: 0px;\n visibility: ${visible ? 'visible' : 'hidden'};\n display: flex;\n }\n\n `}\n`;\n\nexport const Icon = styled.div`\n ${({ theme, visible }) => css`\n visibility: ${visible ? 'visible' : 'hidden'};\n padding-left: 8px;\n\n & svg {\n & path {\n fill: ${theme.v1.color.action.primary};\n }\n &:hover {\n & path {\n fill: ${theme.v1.color.action.hover};\n }\n }\n }\n\n @media (min-width: ${theme.breakpoints.md}) {\n padding: 0;\n }\n `}\n`;\n\nexport const RenderedButtonsWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n\n @media (min-width: ${theme.breakpoints.md}) {\n display: none;\n }\n `}\n`;\n\n\nexport const InputWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-grow: 1;\n\n @media (min-width: ${theme.breakpoints.md}) {\n }\n `}\n`;\n\nexport const ErrorWrapper = styled.div`\n ${() => css`\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n `}\n`;\n\nexport const ErrorText = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.warning.error};\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.v1.font.weights.regular};\n font-size: ${theme.font.sizes.xxs};\n line-height: ${theme.font.lineHeights.lg};\n `}\n`;\n","import React, { useState, useEffect, useRef } from 'react';\nimport * as Styles from './DnsWizardCustomServerFormField.styles';\nimport { IconChevronRight, IconThrashCan } from '@/icons';\nimport { domainsAnalytics } from '@/analytics';\nimport { Button } from '@/pages/common/v1/Button';\nimport { ERROR_MESSAGES } from '@/enums/domains/dns.enum';\n\nconst DnsWizardCustomServerFormField = ({\n testId = 'dnswizardcustomserverformfield',\n nsLabelText = 'Servidor 1:',\n nsPlaceholderText = 'ns1.seuservidor.com',\n ipLabelText =\n <>\n {'Endereço IP '}\n (servidor 1): \n ,\n ipPlaceholderText = 'digite endereço IP',\n domain = 'placeholder.com',\n setDns = () => {},\n dns = { required: true },\n index,\n handleDeleteByIndex = p => p,\n getMessage = p => p,\n focused,\n}) => {\n const [shouldShowConfigIpAddress, setShouldShowConfigIpAddress] = useState(false);\n const [nameServer, setNameServer] = useState('');\n const [ipAddress, setIpAddress] = useState('');\n const [nameServerError, setNameServerError] = useState(null);\n const [ipError, setIpError] = useState(null);\n const inputRef = useRef();\n\n\n const { required } = dns;\n\n const { dnsWizard: dnsWizardAnalytics } = domainsAnalytics;\n const {\n dnsWizardDeleteAdditionalNameServerClick,\n } = dnsWizardAnalytics;\n\n const validateNameServerInput = (ns) => {\n const regex = /[^-a-z0-9.]+/i;\n return !regex.test(ns);\n };\n\n const validateNameServer = (ns) => {\n if (ns === '') {\n return true;\n }\n const regex = /^[a-z0-9]+([-.]{1}[a-z0-9]+)*\\.[a-z]{2,5}(:[0-9]{1,5})?(\\/.*)?$/;\n return regex.test(ns);\n };\n\n const validateIpAddressInput = (ip) => {\n const regex = /[^-0-9.]+/;\n return !regex.test(ip);\n };\n\n const validateIpAddress = (ip) => {\n if (ip === '') {\n return true;\n }\n const regex = /(\\b25[0-5]|\\b2[0-4][0-9]|\\b[01]?[0-9][0-9]?)(\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}/;\n return regex.test(ip);\n };\n\n const checkIfSameDomain = (ns) => {\n const re = new RegExp(`.*\\\\.${domain}$`, 'i');\n return !!ns.match(re);\n };\n\n const handleSetNameServer = (e) => {\n e.preventDefault();\n const nsInput = e.target.value;\n\n const isSameDomain = checkIfSameDomain(nsInput);\n setShouldShowConfigIpAddress(isSameDomain);\n\n if (validateNameServerInput(nsInput)) {\n setNameServer(nsInput);\n }\n };\n\n const handleValidateFullNameServer = () => {\n const isNsValid = validateNameServer(nameServer);\n const isNsNotEmpty = nameServer.trim() !== '';\n const valid = isNsValid && (isNsNotEmpty || !required);\n\n setNameServerError(isNsValid ? null : getMessage(ERROR_MESSAGES.INVALID_SERVER));\n\n setDns({\n ...dns, ip: ipAddress, ns: nameServer, valid,\n });\n };\n\n const handleDeleteField = () => {\n dnsWizardDeleteAdditionalNameServerClick();\n handleDeleteByIndex(index);\n };\n\n const handleSetIpAddress = (e) => {\n e.preventDefault();\n const ipInput = e.target.value;\n\n const isSameDomain = checkIfSameDomain(nameServer);\n\n if (isSameDomain && validateIpAddressInput(ipInput)) {\n setIpAddress(ipInput);\n }\n };\n\n useEffect(() => {\n setNameServer(dns.ns);\n setIpAddress(dns.ip);\n }, [dns]);\n\n useEffect(() => {\n if (focused) {\n inputRef.current.focus();\n }\n }, [focused]);\n\n const RenderedButtons = ({ handleDeleteField = () => {}, hidden = false }) => (\n \n \n );\n\n const handleValidateFullIpAddress = () => {\n const isIpValid = validateIpAddress(ipAddress);\n const isIpNotEmpty = ipAddress.trim() !== '';\n if (!isIpNotEmpty) {\n setIpError(getMessage(ERROR_MESSAGES.REQUIRED));\n return;\n }\n const valid = isIpValid && (isIpNotEmpty || !required);\n\n setIpError(isIpValid ? null : getMessage(ERROR_MESSAGES.INVALID_IP));\n\n setDns({\n ...dns, ip: ipAddress, ns: nameServer, valid,\n });\n };\n\n useEffect(() => {\n setNameServer('');\n setIpAddress('');\n handleValidateFullNameServer();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n \n \n {nsLabelText} \n \n \n {nameServerError} \n \n \n \n \n\n \n \n {shouldShowConfigIpAddress ? ( \n \n {ipLabelText} \n \n \n {ipError} \n \n \n \n \n \n \n \n \n );\n};\n\nexport default DnsWizardCustomServerFormField;\n","import React, { useState, useEffect, useMemo } from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport { IconError } from '@/icons';\nimport * as Styles from './HostGatorOtherPlatformModal.styles';\nimport { DnsWizardCustomServerFormField } from '@/components/domain/components/DnsWizardCustomServerFormField';\nimport { color } from '@/styles/HgThemeProvider';\nimport { Button } from '@/pages/common/v1/Button';\nimport { HOSTING_PLATFORM_TYPES } from '@/enums/domains/dns.enum';\n\nconst HostGatorOtherPlatformModal = ({\n testId = 'hostgatorotherplatformmodal',\n hostGatorOtherPlatformModal = false,\n handleClose = () => {},\n handleConfigureCustomDns = () => {},\n title = 'Title',\n subtitle = 'subTitle',\n needHelp = 'needHelp',\n alertMessageText = 'alertMessageText',\n serverWithNumberText = () => {},\n nsWithNumberText = () => {},\n ipWithNumberText = () => {},\n ipPlaceholderText = 'digite endereço IP',\n addServerText = 'Adicionar mais um servidor',\n buttonText = 'Configurar',\n domain = 'domain.com',\n errorsLocale,\n}) => {\n const { mustard } = color;\n\n const baseDns = {\n ns: '',\n ip: '',\n valid: false,\n required: false,\n };\n\n const [master, setMaster] = useState({ ...baseDns, required: true });\n const [slave1, setSlave1] = useState({ ...baseDns, required: true });\n const [slave2, setSlave2] = useState({ ...baseDns, required: false });\n const [slave3, setSlave3] = useState({ ...baseDns, required: false });\n const [slave4, setSlave4] = useState({ ...baseDns, required: false });\n\n const customConfiguration = useMemo(() => [\n { name: 'master', dns: master, setDns: setMaster },\n { name: 'slave1', dns: slave1, setDns: setSlave1 },\n { name: 'slave2', dns: slave2, setDns: setSlave2 },\n { name: 'slave3', dns: slave3, setDns: setSlave3 },\n { name: 'slave4', dns: slave4, setDns: setSlave4 },\n ], [master, slave1, slave2, slave3, slave4, setMaster, setSlave1, setSlave2, setSlave3, setSlave4]);\n\n const [numberOfInputs, setNumberOfInputs] = useState(2);\n const [readyForNextStep, setReadyForNextStep] = useState(false);\n const [inputs, setInputs] = useState([customConfiguration[0], customConfiguration[1]]);\n\n const handleAddInputs = () => {\n if (numberOfInputs < 5) {\n setReadyForNextStep(false);\n setNumberOfInputs(numberOfInputs + 1);\n }\n };\n\n const resetAndClose = () => {\n setNumberOfInputs(2);\n setMaster({ ...baseDns, required: true });\n setSlave1({ ...baseDns, required: true });\n setSlave2({ ...baseDns, required: false });\n setSlave3({ ...baseDns, required: false });\n setSlave4({ ...baseDns, required: false });\n setTimeout(() => {\n setInputs([customConfiguration[0], customConfiguration[1]]);\n }, 0);\n handleClose();\n };\n\n const formatCustomDns = (dns) => {\n const payload = {};\n dns.forEach(({ name, dns: hostInfo }) => {\n const { ns: host, ip } = hostInfo;\n payload[name] = { name, host, ip };\n });\n return payload;\n };\n\n const handleSubmit = () => {\n const payload = formatCustomDns(customConfiguration);\n handleConfigureCustomDns(HOSTING_PLATFORM_TYPES.CUSTOM, payload);\n resetAndClose();\n };\n\n const handleDeleteByIndex = (index) => {\n for (let i = index; i < customConfiguration.length; i += 1) {\n if (i < customConfiguration.length - 1) {\n const { dns: currDns } = customConfiguration[i];\n const { dns: nextDns } = customConfiguration[i + 1];\n customConfiguration[i].setDns({ ...nextDns, required: currDns.required });\n customConfiguration[i + 1].setDns(baseDns);\n }\n }\n if (numberOfInputs > 2) {\n setNumberOfInputs(numberOfInputs - 1);\n }\n };\n\n const shouldShowAddButton = numberOfInputs < 5;\n\n useEffect(() => {\n const tempInputs = [];\n for (let index = 0; index < numberOfInputs; index += 1) {\n tempInputs.push(customConfiguration[index]);\n }\n setInputs(tempInputs);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [numberOfInputs, customConfiguration]);\n\n useEffect(() => {\n let isValid = true;\n\n for (let index = 0; index < numberOfInputs; index += 1) {\n const { ns, ip } = customConfiguration[index].dns;\n\n if (ns === '') {\n isValid = false;\n break;\n }\n\n const re = new RegExp(`.*\\\\.${domain}$`, 'i');\n const sameDomain = !!ns.match(re);\n\n if (sameDomain && ip === '') {\n isValid = false;\n break;\n }\n isValid = isValid && customConfiguration[index].dns.valid;\n }\n setReadyForNextStep(isValid);\n }, [\n numberOfInputs,\n customConfiguration,\n domain,\n ]);\n\n useEffect(() => {\n setNumberOfInputs(2);\n }, [hostGatorOtherPlatformModal]);\n\n return (\n <>\n {hostGatorOtherPlatformModal\n && (\n \n \n \n {title} \n \n {subtitle}\n \n \n\n \n {needHelp}\n \n\n \n { Object.keys(inputs).map((dnsItem) => {\n const index = parseInt(dnsItem, 10);\n const serverNumber = index + 1;\n return (\n \n {shouldShowAddButton\n && (\n \n \n )\n }\n \n \n \n \n \n \n )\n }\n \n );\n};\n\nexport default HostGatorOtherPlatformModal;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n margin: 0px 16px 18px 16px;\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n margin-bottom: 22px;\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n display: flex;\n justify-content: center;\n margin-top: 20px;\n`;\n\n\nexport const CheckboxWrapper = styled.div`\n align-items: center;\n display: flex;\n margin-top: 4px;\n`;\n\nexport const CheckboxDescription = styled.p`\n${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin-left: 6px;\n `}\n`;\n","import React, { useState } from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport * as Styles from './AdvancedDnsZoneModal.styles';\nimport { Button } from '@/pages/common/v1/Button';\nimport { Alert, Checkbox } from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { domainsAnalytics } from '@/analytics';\n\nconst HostGatorAlterPlatformModal = ({\n handleCloseModal,\n goToAdvancedDNSZone,\n}) => {\n const [checked, setChecked] = useState(false);\n\n const { domains } = useLocale();\n const { advancedDnsZone } = domains && domains.dnsWizard && domains.dnsWizard.modals;\n\n const handleSetChecked = () => setChecked(!checked);\n\n const handleButtonClick = () => {\n goToAdvancedDNSZone && goToAdvancedDNSZone();\n handleCloseModal && handleCloseModal();\n\n if (checked) {\n localStorage.setItem('dnsAdvancedZoneDontShowModal', true);\n }\n domainsAnalytics.dnsWizard.dnsWizardContinueToEditDnsZone();\n };\n\n return (\n \n \n \n {advancedDnsZone.title}\n \n\n \n \n {advancedDnsZone.checkboxDescription}\n \n \n\n \n \n \n \n );\n};\n\nexport default HostGatorAlterPlatformModal;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n margin: 0px 16px 18px 16px;\n\n strong {\n font-weight: ${theme.v2.font.weights.bold};\n };\n\n a {\n text-decoration: 'none';\n color: ${theme.v2.colors.brand.primaryBlue};\n };\n `}\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n margin-bottom: 16px;\n `}\n`;\n\nexport const Subtitle = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin-bottom: 16px;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n display: flex;\n gap: 19px;\n justify-content: center;\n margin-top: 25px;\n`;\n","import React from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport * as Styles from './DomainConfigurationReview.styles';\nimport { Button } from '@/pages/common/v1/Button';\nimport { Alert } from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { domainsAnalytics } from '@/analytics/domains';\n\nconst DomainConfigurationReview = ({\n handleCloseModal,\n nameServers,\n handleContinueClick,\n availablePlans,\n selectedPlanId,\n}) => {\n const { domains } = useLocale();\n const { domainConfigurationReview } = domains && domains.dnsWizard && domains.dnsWizard.modals;\n const selectedPlan = availablePlans && availablePlans.find(plan => (plan.id === selectedPlanId));\n\n\n const handleButtonClick = () => {\n domainsAnalytics.dnsWizard.configureCtaClick();\n handleCloseModal && handleCloseModal();\n handleContinueClick && handleContinueClick();\n };\n\n const handleKeepConfigurationsClick = () => {\n domainsAnalytics.dnsWizard.keepConfigurationsCtaClick();\n handleCloseModal && handleCloseModal();\n };\n\n return (\n \n \n \n {domainConfigurationReview.title}\n \n\n \n {selectedPlan ? domainConfigurationReview.subtitleWithHgPlan(selectedPlan) : domainConfigurationReview.subtitle}\n \n\n \n \n \n \n );\n};\n\nexport default DomainConfigurationReview;\n","import React, { useState, useContext, useEffect } from 'react';\nimport * as Styles from './DnsWizardEmailHandler.styles';\nimport { IconMail } from '@/icons';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useConfigurationStatus } from '@/hooks/domains/wizard';\nimport { Loader } from '@/pages/common/v1/Loader';\nimport { domainsAnalytics } from '@/analytics';\nimport {\n EMAIL_PLATFORM_NAMES, HOSTING_PLATFORM_TYPES, PLAN_TYPES,\n} from '@/enums/domains/dns.enum';\nimport { DnsWizardHeader } from '@/components/domain/components/DnsWizardHeader';\nimport { DnsWizardEmailPlatformsGrid } from '@/components/domain/components/DnsWizardEmailPlatformsGrid';\nimport { dnsWizardActions } from '@/redux/modules/dnsWizard';\nimport { DnsWizardEmailConfigCard } from '@/components/domain/components/configurationCards/DnsWizardEmailConfigCard';\nimport { DnsWizardContext } from '@/contexts/DnsWizard';\n\n// Modals\nimport {\n AlterEmailPlatform,\n HostGatorCustomEmailModal,\n HostGatorEmailModal,\n} from '@/components/domain/components/modals';\nimport { useHistory } from 'react-router';\nimport { emailsActions } from '@/redux/modules/emails';\n\nconst DnsWizardEmailHandler = ({\n testId = 'dns-wizard-email-handler',\n dnsWizardLocale = {},\n routesLocale = {},\n domain = {},\n emailPlatforms = [],\n domainId,\n}) => {\n const history = useHistory();\n const dispatch = useDispatch();\n const { selectedEmailPlatformId, setSelectedEmailPlatformId, setOpenDnsTable } = useContext(DnsWizardContext);\n const enabledForRenderToProEmail = false;\n\n const { dnsWizard: dnsWizardAnalytics } = domainsAnalytics;\n\n\n const {\n name: domainName,\n configurationStatus,\n proEmail,\n planDetails,\n platformName,\n } = domain;\n\n const {\n isConfiguredThroughWizard,\n isConfiguredInHostGator,\n } = configurationStatus;\n\n const {\n emails: emailLocale,\n modals: modalsLocale,\n hostgatorMailPlatform: hostgatorMailPlatformName,\n } = dnsWizardLocale;\n\n const {\n emailZoneTitle,\n emailZoneTitleWithDefinedPlatform,\n emailZoneTitleTooltip,\n emailZoneSubtitle,\n } = emailLocale;\n\n const [selected, setSelected] = useState(false);\n const [selectedPlatformName, setSelectedPlatformName] = useState(null);\n const [emailModal, setEmailModal] = useState(false);\n const [customEmailModal, setCustomEmailModal] = useState(false);\n const [selectedPlatformType, setSelectedPlatformType] = useState(null);\n const [alterEmailPlatform, toggleAlterEmailPlatform] = useState(false);\n const { controls, hostingPlatforms, domain: dnsWizardDomain } = useSelector(state => state.dnsWizard);\n const { proEmailList, loadingProEmails } = useSelector(state => state.emails);\n\n const { emailsConfigurationLoading, emailsPlatformsLoading } = controls;\n const shouldRenderLoading = loadingProEmails || emailsPlatformsLoading;\n\n const handleCloseEmailModal = () => {\n setEmailModal(false);\n };\n\n const status = useConfigurationStatus(configurationStatus, platformName);\n const isPointedToCustomServer = status === HOSTING_PLATFORM_TYPES.CUSTOM;\n const shouldRenderEmailConfigurationWizard = isConfiguredThroughWizard && isConfiguredInHostGator && !isPointedToCustomServer && planDetails.type !== PLAN_TYPES.RESALE;\n const isReserved = hostingPlatforms.selectedEmailPlatform === 'Reserved';\n const cardAction = (platformName) => {\n let isProEmailConfigured = false;\n if (enabledForRenderToProEmail) {\n const proEmail = proEmailList.find(email => email.domain === domain.name);\n isProEmailConfigured = proEmail && proEmail.domain_configured;\n } else {\n isProEmailConfigured = domain.proEmail.domain_configured;\n }\n\n let manageProEmailUrl = '';\n\n if (isProEmailConfigured) {\n manageProEmailUrl = `${routesLocale.emailsList}${routesLocale.emailsTitan}/${domain.name}`;\n }\n\n switch (platformName) {\n case EMAIL_PLATFORM_NAMES.TITAN:\n if (isProEmailConfigured) {\n history.push(manageProEmailUrl);\n } else {\n history.push(`${routesLocale.emailsList}?dspActtrial=${domain.name}`);\n }\n\n break;\n case EMAIL_PLATFORM_NAMES.HOSTGATOR:\n if (isProEmailConfigured) {\n history.push(manageProEmailUrl);\n } else {\n history.push(`${routesLocale.emailsList}${routesLocale.titanHirePlanActiveCPanel}/${domain.name}?idPro=${proEmail.id}&service=proemail`);\n }\n\n break;\n default:\n setEmailModal(true);\n }\n };\n\n\n const handleSelect = (emailPlatformId, platformType, platformName, insideModal) => {\n setSelected(true);\n switch (platformType) {\n case HOSTING_PLATFORM_TYPES.MAIL:\n insideModal ? setEmailModal(true) : cardAction(platformName);\n break;\n case HOSTING_PLATFORM_TYPES.HOSTGATOR:\n insideModal ? setEmailModal(true) : cardAction(platformName);\n break;\n case HOSTING_PLATFORM_TYPES.CUSTOM_MAIL:\n setCustomEmailModal(true);\n break;\n default:\n break;\n }\n setSelectedEmailPlatformId(emailPlatformId);\n };\n\n const handleConfigureEmail = (platformId) => {\n dispatch(dnsWizardActions.emailPlatformsConfiguration.request(domainId, platformId));\n };\n\n const emailModalComponent = emailsConfigurationLoading\n ? ( e.platformID === selectedEmailPlatformId).pop()}\n analytics={dnsWizardAnalytics}\n handleConfigureEmail={handleConfigureEmail}\n currentType={planDetails.type}\n firstTimeConfigure={hostingPlatforms.selectedEmailPlatform === 'None'}\n currentStatus={status}\n domainIp={planDetails.ip}\n reserved={isReserved}\n\n />\n );\n\n const customEmailModalComponent = emailsConfigurationLoading\n ? ( { setCustomEmailModal(false); }}\n emailModal={customEmailModal}\n modalsLocale={modalsLocale[HOSTING_PLATFORM_TYPES.CUSTOM_MAIL]}\n domainName={domainName}\n platform={emailPlatforms.filter(e => e.platformID === selectedEmailPlatformId).pop()}\n analytics={dnsWizardAnalytics}\n handleConfigureEmail={() => {\n setOpenDnsTable(true);\n const zoneRecords = document.getElementById('dns-wizard-zone-records');\n setTimeout(() => {\n window.scrollTo({\n behavior: 'smooth',\n top: zoneRecords.offsetTop,\n });\n }, 100);\n }}\n currentType={planDetails.type}\n firstTimeConfigure={hostingPlatforms.selectedEmailPlatform === 'None'}\n currentStatus={status}\n reserved={isReserved}\n />\n );\n\n const currentPlatform = () => emailPlatforms.find(item => item.platformName === hostingPlatforms.selectedEmailPlatform);\n\n const selectedEmailPlataform = !controls.settedEmailPlataformLoading && hostingPlatforms.selectedEmailPlatform && hostingPlatforms.selectedEmailPlatform !== 'None' && hostingPlatforms.selectedEmailPlatform !== 'Reserved';\n\n const filteredPlatforms = () => {\n const activeEmailPlatform = hostingPlatforms.selectedEmailPlatform;\n const { hostingId, reserved } = hostingPlatforms;\n const list = [...emailPlatforms].filter(platform => platform.platformName !== EMAIL_PLATFORM_NAMES.RESERVED);\n\n if ((activeEmailPlatform === 'None' || activeEmailPlatform === 'Reserved') && !hostingId && reserved) {\n const filtered = list.filter(platform => platform.platformName !== EMAIL_PLATFORM_NAMES.CPANEL\n && platform.platformName !== EMAIL_PLATFORM_NAMES.HOSTGATOR);\n return filtered;\n }\n\n if (activeEmailPlatform === 'None' && hostingId && !reserved) {\n const filtered = list.filter(platform => platform.platformName !== EMAIL_PLATFORM_NAMES.CPANEL\n && platform.platformName !== EMAIL_PLATFORM_NAMES.TITAN);\n return filtered;\n }\n\n const filtered = list.filter(platform => platform.platformName !== EMAIL_PLATFORM_NAMES.HOSTGATOR);\n return filtered;\n };\n\n useEffect(() => {\n if (enabledForRenderToProEmail) {\n dispatch(emailsActions.emails.request());\n }\n }, [dispatch, enabledForRenderToProEmail]);\n\n\n return shouldRenderEmailConfigurationWizard && (\n \n {emailModalComponent}\n {customEmailModalComponent}\n {alterEmailPlatform && (\n toggleAlterEmailPlatform(false)}\n emailPlataforms={emailPlatforms}\n emailLocale={emailLocale}\n dnsWizardAnalytics={dnsWizardAnalytics}\n setSelected={setSelected}\n setEmailModal={setEmailModal}\n selected={selected}\n selectedPlatformName={selectedPlatformName}\n setSelectedEmailPlatformId={setSelectedEmailPlatformId}\n setSelectedPlatformType={setSelectedPlatformType}\n selectedPlatformType={selectedPlatformType}\n setCustomEmailModal={setCustomEmailModal}\n setSelectedPlatformName={setSelectedPlatformName}\n activeEmailPlatform={hostingPlatforms.selectedEmailPlatform}\n reserved={hostingPlatforms.reserved}\n />\n )}\n\n \n {emailZoneSubtitle} \n )}\n \n {shouldRenderLoading ? (\n \n {!selectedEmailPlataform && (\n toggleAlterEmailPlatform(true)}\n emailLocale={emailLocale}\n domain={planDetails.domain}\n propagating={dnsWizardDomain.configurationStatus.propagating}\n customEmailPlatformName={emailLocale.customEmailPlatformName}\n dnsWizardAnalytics={dnsWizardAnalytics}\n />\n )}\n \n \n )}\n \n );\n};\n\nexport default DnsWizardEmailHandler;\n","import styled, { css } from 'styled-components';\nimport { Link } from 'react-router-dom';\n\nexport const DnsWizardHandlerWrapper = styled.div`\n`;\n\nexport const DnsWizardHandlerContainer = styled.div`\n${({ theme }) => css`\n display: grid;\n gap: 40px;\n\n > div > p {\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.v1.font.weights.regular};\n line-height: ${theme.font.lineHeights.lg};\n margin: 16px 0px 0px 0px;\n margin-bottom: 0px;\n margin-top: 16px;\n max-width: 75ch;\n\n > &:first-of-type {\n margin-top: 8px;\n }\n\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n margin-left: 40px;\n }\n }\n `}\n`;\n\nexport const TextBlock = styled.div``;\n\nexport const CTA = styled(Link)`\n ${({ theme, arrow }) => css`\n color: ${theme.v1.color.action.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.v1.font.weights.medium};\n line-height: ${theme.font.sizes.xl};\n text-align: center;\n text-decoration: none;\n\n & > span {\n content:\"\\a\";\n white-space: pre;\n }\n\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n justify-self: end;\n text-align: right;\n transition: transform 0.3s, opacity 0.3s;\n white-space: nowrap;\n width: min-content;\n & > span {\n content:\"\";\n white-space: nowrap;\n }\n\n }\n\n &:hover {\n text-decoration: underline;\n\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n transform: translate(-25px, 0px);\n }\n }\n\n &:after {\n content: url(${arrow});\n font-size: ${theme.font.sizes.xxxxxxl};\n font-weight: 1000;\n opacity: 0;\n position: absolute;\n transition: transform 0.1s, opacity 0.1s;\n\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n transform: translate(-55px, -3px);\n }\n }\n\n &:hover:after {\n opacity: 1;\n transform: translate(5px, -3px);\n }\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n padding: 16px;\n border: 1px solid ${theme.v1.color.line.wizard};\n border-radius: 4px;\n display: flex;\n flex-direction: column;\n background-color: ${theme.v1.color.background.boxes};\n max-width: 100%;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n @media (min-width: ${theme.v1.breakpoints.md}) {\n align-items: center;\n }\n `}\n`;\n\nexport const MessageWrapper = styled.div`\n ${({ theme }) => css`\n margin: 8px 0 0 0;\n display: flex;\n align-items: initial;\n justify-content: center;\n @media (min-width: ${theme.v1.breakpoints.md}) {\n margin-bottom: 8px;\n align-items: center;\n }\n `}\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.v1.font.weights.bold};\n line-height: ${theme.font.lineHeights.xxxxl};\n text-align: left;\n margin: 0;\n font-size: ${theme.font.sizes.xxl};\n\n & .full {\n display: none;\n }\n span{\n color: ${theme.v1.color.text.featured};\n text-decoration: none;\n }\n @media (min-width: ${theme.v1.breakpoints.lg}) {\n text-align: center;\n\n & .full {\n display: inline;\n }\n & .ellipsis {\n display: none;\n }\n }\n `}\n`;\n\nexport const Message = styled.span`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.md};\n line-height: ${theme.font.lineHeights.xxxxl};\n margin:0;\n text-align: left;\n @media (min-width: ${theme.v1.breakpoints.md}) {\n text-align: center;\n }\n `}\n`;\n\nexport const Icon = styled.span`\n margin-right: 8px;\n max-height: 45px;\n max-width: 45px;\n`;\n","import React from 'react';\nimport * as Styles from './DnsWizardSuccessMessage.styles';\n\n\nconst DnsWizardSuccessMessage = ({\n testId = 'dns-wizard-success-message',\n title = 'Title',\n icon,\n message,\n}) => (\n \n \n {title}\n \n {message && (\n \n {icon\n && (\n \n {icon}\n \n )\n }\n {message} \n \n )}\n \n);\n\nexport default DnsWizardSuccessMessage;\n","import styled, { css } from 'styled-components';\n\nexport const Triangle = styled.div`\n ${({ theme }) => css`\n width: 0; \n height: 0; \n border-top: 10px solid ${theme.v1.color.border.primary};\n border-bottom: 10px solid transparent; \n border-left: 10px solid ${theme.v1.color.border.primary};\n border-right: 10px solid transparent;\n `}\n`;\n\nexport const Header = styled.h1`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v1.color.action.hover};\n display: flex;\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.v1.font.weights.medium};\n gap: 16px;\n grid-area: header;\n margin: 0;\n white-space: nowrap;\n `}\n`;\n\nexport const Domain = styled.div`\n ${({ theme }) => css`\n border-bottom: 1px solid ${theme.v1.color.line.fields};\n min-width: 300px;\n max-width: 100%;\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.v1.font.weights.regular};\n grid-area: domain;\n padding: 0px 9px 9px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n`;\n\nexport const DomainHeaderWrapper = styled.div`\n ${({ theme }) => css`\n display: grid;\n gap: 16px;\n grid-template-columns: 1fr;\n max-width: 100%;\n grid-template-areas: \n \"header\"\n \"domain\";\n overflow: hidden;\n\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n display: flex\n }\n `}\n`;\n","import React from 'react';\nimport * as Styles from './DnsWizardDomainHeader.styles';\n\nconst DnsWizardDomainHeader = ({ testId = 'domainheader', domain = 'mydomain.com', title = 'Domain Header Title' }) => (\n \n \n \n \n {domain}\n \n \n);\n\nexport default DnsWizardDomainHeader;\n","import styled, { css } from 'styled-components';\n\nexport const DnsWizardPlanCardWrapper = styled.div`\n ${({ theme, isToggleOn }) => css`\n padding: ${isToggleOn ? 0 : '24px'} 24px 24px 24px;\n border: 1px solid ${theme.v1.color.line.wizard};\n border-radius: 4px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n max-width: 100%;\n background-color: ${theme.v1.color.background.boxes};\n `}\n p{\n margin: 0;\n }\n`;\n\nexport const Header = styled.div`\n ${({ theme, isToggleOn }) => css`\n display: flex;\n justify-content: space-between;\n margin-bottom: ${isToggleOn ? '5px' : '10px'};\n margin-top: ${isToggleOn ? '23px' : '10px'};\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding-top: ${isToggleOn && '25px'};\n padding-bottom: ${isToggleOn && '10px'};\n }\n `}\n`;\n\nexport const Logo = styled.img``;\n\nexport const Edit = styled.div`\n ${({ theme }) => css`\n position: absolute;\n right: 0;\n & span svg:hover {\n filter: brightness(60%);\n }\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n position: initial;\n }\n `}\n`;\n\nexport const Nameservers = styled.p`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.sm};\n font-family: ${theme.v1.font.family.primary};\n color: ${theme.v1.color.text.primary};\n font-weight: ${theme.v1.font.weights.medium};\n span{\n color: ${theme.v1.color.action.hover};\n }\n `}\n &:not(:last-child) {\n margin-bottom: 8px;\n }\n`;\n\nexport const PlatformDesktop = styled.span`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.md};\n font-family: ${theme.v1.font.family.primary};\n cursor: pointer;\n display: none;\n font-weight: ${theme.v1.font.weights.medium};\n color: ${theme.v1.color.action.primary};\n &:hover {\n color: ${theme.v1.color.action.hover};\n }\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n display: initial;\n }\n `}\n`;\n\nexport const PlatformMobile = styled.span`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.md};\n font-family: ${theme.v1.font.family.primary};\n cursor: pointer;\n display: initial;\n text-align: right;\n margin-top: 16px;\n &:hover {\n color: ${theme.v1.color.action.hover};\n }\n font-weight: ${theme.v1.font.weights.medium};\n color: ${theme.v1.color.action.primary};\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n display: none;\n }\n `}\n`;\n\nexport const Body = styled.div``;\n\nexport const Product = styled.div`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.md};\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.v1.font.weights.normal};\n color: ${theme.v1.color.text.primary};\n padding: 0 0 8px 8px;\n border-bottom: 1px solid ${theme.v1.color.line.fields};\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n margin-bottom: 8px;\n justify-content: start;\n position: relative;\n span{\n font-size: ${theme.font.sizes.xxs};\n &:last-child{\n cursor: pointer;\n }\n &:not(:last-child){\n margin-right: 8px;\n }\n }\n p{\n margin-right: 10px;\n &:first-child{\n min-width: 20%;\n }\n }\n @media (min-width: ${theme.v1.breakpoints.md}) {\n min-width: 344px;\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n p{\n margin-right: 3px;\n &:first-child{\n min-width: auto;\n }\n }\n span{\n &:not(:last-child){\n margin-right: 24px;\n }\n }\n }\n `}\n`;\n\nexport const Footer = styled.div`\n margin-top: 24px;\n display: flex;\n span{\n align-self: center;\n margin-right: 8px;\n }\n div{\n align-self: center;\n }\n`;\n\nexport const LogoWrapper = styled.div`\n ${({ theme }) => css`\n display:flex;\n align-items: center;\n p{\n margin-left: 8px;\n font-size: ${theme.font.sizes.xl};\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.v1.font.weights.medium};\n color: ${theme.v1.color.text.featured};\n line-height: 27px;\n }\n `}\n`;\n\nexport const FooterMessage = styled.div`\n ${({ theme }) => css`\n max-width: 110ch;\n font-size: ${theme.font.sizes.xxs};\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.v1.font.weights.light};\n color: ${theme.v1.color.text.primary};\n line-height: 16px;\n > a {\n display: inline;\n color: ${theme.v1.color.action.primary};\n }\n span {\n display: block;\n margin-top: 8px;\n }\n `}\n`;\n\nexport const Actions = styled.div`\n ${({ theme }) => css`\n display: flex;\n justify-content: flex-end;\n\n button{\n padding: 0 11px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n align-items: flex-end;\n flex-direction: column;\n padding-top: 25px;\n padding-bottom: 10px;\n\n button{\n padding: 5px 0px\n }\n }\n `}\n`;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.span`\n display: inline-block;\n\n svg {\n display: block;\n }\n`;\n","import React from 'react';\nimport * as Style from './IconAttentionYellow.styles';\n\nconst IconAttentionYellow = ({ testId = 'icon-attention-yellow' }) => (\n \n \n \n\n \n);\n\n\nexport default IconAttentionYellow;\n","import React from 'react';\nimport * as Styles from './DnsWizardConfigCardCustom.styles';\nimport IconAttentionYellow from '@/icons/IconAttentionYellow/IconAttentionYellow';\nimport otherPlatformIcon from '@/media/domains/other-card.png';\nimport { Button } from 'gatorcomponents';\nimport { isMobile } from '@/utils/Validators/validation';\n\nconst DnsWizardConfigCardCustom = ({\n changePlatformText = '',\n nameServers = [],\n serverText,\n attentionMessage,\n testId = 'dns-wizard-config-card',\n changePlatformClick,\n shouldRenderPropagationMessage = false,\n otherPlatformCardTitle = '',\n otherPlatformAttentionMessage,\n}) => (\n \n \n \n {otherPlatformCardTitle}
\n \n\n {!isMobile && (\n \n \n )}\n\n \n \n {nameServers && nameServers.map((nameServer, index) => (\n \n {`${serverText} ${index + 1}: `}\n {nameServer} \n \n ))}\n \n {((attentionMessage && shouldRenderPropagationMessage)) && (\n \n \n {attentionMessage}\n {otherPlatformAttentionMessage}\n \n \n )}\n\n {isMobile && (\n \n \n )}\n\n \n);\n\nexport default DnsWizardConfigCardCustom;\n","import styled, { css } from 'styled-components';\n\nexport const DnsWizardPlanCardWrapper = styled.div`\n ${({ theme, isToggleOn }) => css`\n background-color: ${theme.v1.color.background.boxes};\n border-radius: 4px;\n border: 1px solid ${theme.v1.color.line.wizard};\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n max-width: 100%;\n padding: ${isToggleOn ? 0 : '24px'} 24px 24px 24px;\n `}\n p{\n margin: 0;\n }\n`;\n\nexport const Header = styled.div`\n ${({ theme, isToggleOn }) => css`\n display: flex;\n justify-content: space-between;\n margin-bottom: ${isToggleOn ? '5px' : '10px'};\n margin-top: ${isToggleOn ? '23px' : '10px'};\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding-top: ${isToggleOn && '25px'};\n padding-bottom: ${isToggleOn && '10px'};\n }\n `}\n`;\n\nexport const Logo = styled.img`\n max-width: 160px;\n`;\n\nexport const Edit = styled.div`\n ${({ theme }) => css`\n position: absolute;\n right: 0;\n & span svg:hover {\n filter: brightness(60%);\n }\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n position: initial;\n }\n `}\n`;\n\nexport const Nameservers = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.v1.font.weights.medium};\n span{\n color: ${theme.v1.color.action.hover};\n }\n `}\n &:not(:last-child) {\n margin-bottom: 8px;\n }\n`;\n\nexport const PlatformDesktop = styled.span`\n ${({ theme }) => css`\n color: ${theme.v1.color.action.primary};\n cursor: pointer;\n display: none;\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.v1.font.weights.medium};\n &:hover {\n color: ${theme.v1.color.action.hover};\n }\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n display: initial;\n }\n `}\n`;\n\nexport const PlatformMobile = styled.span`\n ${({ theme }) => css`\n cursor: pointer;\n display: initial;\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.md};\n margin-top: 16px;\n text-align: right;\n &:hover {\n color: ${theme.v1.color.action.hover};\n }\n color: ${theme.v1.color.action.primary};\n font-weight: ${theme.v1.font.weights.medium};\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n display: none;\n }\n `}\n`;\n\nexport const Body = styled.div``;\n\nexport const Product = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n border-bottom: 1px solid ${theme.v1.color.line.fields};\n color: ${theme.v1.color.text.primary};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.v1.font.weights.normal};\n justify-content: start;\n margin-bottom: 8px;\n padding: 0 0 8px 8px;\n position: relative;\n span{\n font-size: ${theme.font.sizes.xxs};\n &:last-child{\n cursor: pointer;\n }\n &:not(:last-child){\n margin-right: 8px;\n }\n }\n p{\n margin-right: 10px;\n &:first-child{\n min-width: 20%;\n }\n }\n @media (min-width: ${theme.v1.breakpoints.md}) {\n align-items: center;\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n min-width: 344px;\n p{\n margin-right: 3px;\n &:first-child{\n min-width: auto;\n }\n }\n span{\n &:not(:last-child){\n margin-right: 24px;\n }\n }\n }\n `}\n`;\n\nexport const Footer = styled.div`\n display: flex;\n margin-top: 24px;\n span{\n align-self: center;\n margin-right: 8px;\n }\n div{\n align-self: center;\n }\n`;\n\nexport const LogoWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display:flex;\n flex-wrap: wrap;\n gap: 8px;\n p{\n margin-left: 8px;\n font-size: ${theme.font.sizes.xl};\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.v1.font.weights.medium};\n color: ${theme.v1.color.text.featured};\n line-height: 27px;\n }\n `}\n`;\n\nexport const FooterMessage = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.xxs};\n font-weight: ${theme.v1.font.weights.light};\n line-height: 16px;\n max-width: 110ch;\n > a {\n display: inline;\n color: ${theme.v1.color.action.primary};\n }\n span {\n display: block;\n margin-top: 8px;\n }\n `}\n`;\n\nexport const PlatformLinkWrapper = styled.span`\n ${({ theme }) => css`\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.sm};\n `}\n`;\n\nexport const Actions = styled.div`\n ${({ theme }) => css`\n display: flex;\n justify-content: flex-end;\n\n button{\n padding: 0 11px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n align-items: flex-end;\n flex-direction: column;\n padding-top: 25px;\n padding-bottom: 10px;\n\n button{\n padding: 5px 0px\n }\n }\n `}\n`;\n","import React from 'react';\nimport * as Styles from './DnsWizardConfigCardDnsZone.styles';\nimport lojaIntegradaLogo from '@/media/domains/lojaintegrada-card-big.png';\nimport nuvemshopLogo from '@/media/domains/nuvemshop-card-big.png';\nimport shopifyLogo from '@/media/domains/shopify-card-big.png';\nimport tiendanubeLogo from '@/media/domains/tiendanube-card-big.png';\nimport dLojaLogo from '@/media/domains/dloja.png';\nimport { palette } from '@/styles/HgThemeProvider';\nimport { Tooltip } from '@/pages/common/v1/Tooltip';\nimport { IconInfo } from '@/icons';\nimport {\n HOSTING_PLATFORM_TYPES,\n PLATFORM_NAMES,\n CUSTOM_DNS_ZONE_PLATFORMS_URL,\n} from '@/enums/domains/dns.enum';\nimport IconAttentionYellow from '@/icons/IconAttentionYellow/IconAttentionYellow';\nimport { Link } from '@/pages/common';\nimport { COUNTRY } from '@/config';\nimport { isMobile } from '@/utils/Validators/validation';\nimport { Button } from 'gatorcomponents';\n\nconst DnsWizardConfigCardDnsZone = ({\n platformName = '',\n hostingPlatforms,\n changePlatformText = '',\n nameServers = [],\n tooltip = '',\n accessText = '',\n serverText,\n attentionMessage,\n testId = 'dns-wizard-config-card-dns-zone',\n changePlatformClick,\n resellerMessage,\n isPointedToResale = false,\n}) => {\n const { secondary } = palette;\n const { primary: lightBlueColor } = secondary;\n\n const currentPlatform = hostingPlatforms && hostingPlatforms.find(platform => platform.platformType === platformName);\n\n const customPlatformsUrl = platform => ({\n ...CUSTOM_DNS_ZONE_PLATFORMS_URL,\n shopify: CUSTOM_DNS_ZONE_PLATFORMS_URL[`shopify_${COUNTRY}`],\n })[platform];\n\n const platformLogoByName = (name) => {\n switch (name) {\n case HOSTING_PLATFORM_TYPES.LOJA_INTEGRADA:\n return lojaIntegradaLogo;\n case HOSTING_PLATFORM_TYPES.NUVEMSHOP:\n return nuvemshopLogo;\n case HOSTING_PLATFORM_TYPES.SHOPIFY:\n return shopifyLogo;\n case HOSTING_PLATFORM_TYPES.TIENDANUBE:\n return tiendanubeLogo;\n case HOSTING_PLATFORM_TYPES.DLOJA:\n return dLojaLogo;\n default:\n break;\n }\n };\n\n const platformLogo = currentPlatform ? currentPlatform.imageUrl : platformLogoByName(platformName);\n const platformLabel = currentPlatform ? currentPlatform.platformName : PLATFORM_NAMES[platformName];\n\n return (\n \n \n \n \n \n \n\n {!isMobile && (\n \n \n )}\n \n \n {nameServers && nameServers.map((nameServer, index) => (\n \n {`${serverText} ${index + 1}: `}\n {nameServer} \n \n ))}\n \n \n \n {attentionMessage}\n {isPointedToResale && resellerMessage}\n \n \n\n {isMobile && (\n \n \n )}\n\n \n );\n};\n\nexport default DnsWizardConfigCardDnsZone;\n","import styled, { css } from 'styled-components';\n\nexport const DnsWizardPlanCardWrapper = styled.div`\n ${({ theme, isToggleOn }) => css`\n padding: ${isToggleOn ? 0 : '24px'} 24px 24px 24px;\n border: 1px solid ${theme.v1.color.line.wizard};\n border-radius: 4px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n max-width: 100%;\n background-color: ${theme.v1.color.background.boxes};\n `}\n p{\n margin: 0;\n }\n`;\n\nexport const Header = styled.div`\n ${({ theme, isToggleOn }) => css`\n display: flex;\n justify-content: space-between;\n margin-bottom: ${isToggleOn ? '5px' : '10px'};\n margin-top: ${isToggleOn ? '23px' : '10px'};\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding-top: ${isToggleOn && '25px'};\n padding-bottom: ${isToggleOn && '10px'};\n }\n `}\n`;\n\nexport const Logo = styled.img``;\n\nexport const Edit = styled.div`\n ${({ theme }) => css`\n position: absolute;\n right: 0;\n & span svg:hover {\n filter: brightness(60%);\n }\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n position: initial;\n }\n `}\n`;\n\nexport const Nameservers = styled.p`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.sm};\n font-family: ${theme.v1.font.family.primary};\n color: ${theme.v1.color.text.primary};\n font-weight: ${theme.v1.font.weights.medium};\n span{\n color: ${theme.v1.color.action.hover};\n }\n `}\n &:not(:last-child) {\n margin-bottom: 8px;\n }\n`;\n\nexport const PlatformDesktop = styled.span`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.md};\n font-family: ${theme.v1.font.family.primary};\n cursor: pointer;\n display: none;\n font-weight: ${theme.v1.font.weights.medium};\n color: ${theme.v1.color.action.primary};\n &:hover {\n color: ${theme.v1.color.action.hover};\n }\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n display: initial;\n }\n `}\n`;\n\nexport const PlatformMobile = styled.span`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.md};\n font-family: ${theme.v1.font.family.primary};\n cursor: pointer;\n display: initial;\n text-align: right;\n margin-top: 16px;\n &:hover {\n color: ${theme.v1.color.action.hover};\n }\n font-weight: ${theme.v1.font.weights.medium};\n color: ${theme.v1.color.action.primary};\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n display: none;\n }\n `}\n`;\n\nexport const Body = styled.div``;\n\nexport const Product = styled.div`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.md};\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.v1.font.weights.normal};\n color: ${theme.v1.color.text.primary};\n padding: 0 0 8px 8px;\n border-bottom: 1px solid ${theme.v1.color.line.fields};\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n margin-bottom: 8px;\n justify-content: start;\n position: relative;\n span{\n font-size: ${theme.font.sizes.xxs};\n &:last-child{\n cursor: pointer;\n }\n &:not(:last-child){\n margin-right: 8px;\n }\n }\n p{\n margin-right: 10px;\n &:first-child{\n min-width: 20%;\n }\n }\n @media (min-width: ${theme.v1.breakpoints.md}) {\n min-width: 344px;\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n p{\n margin-right: 3px;\n &:first-child{\n min-width: auto;\n }\n }\n span{\n &:not(:last-child){\n margin-right: 24px;\n }\n }\n }\n `}\n`;\n\nexport const Footer = styled.div`\n margin-top: 24px;\n display: flex;\n span{\n align-self: center;\n margin-right: 8px;\n }\n div{\n align-self: center;\n }\n`;\n\nexport const LogoWrapper = styled.div`\n ${({ theme }) => css`\n display:flex;\n align-items: center;\n p{\n margin-left: 8px;\n font-size: ${theme.font.sizes.xl};\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.v1.font.weights.medium};\n color: ${theme.v1.color.text.featured};\n line-height: 27px;\n }\n `}\n`;\n\nexport const FooterMessage = styled.div`\n ${({ theme }) => css`\n max-width: 110ch;\n font-size: ${theme.font.sizes.xxs};\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.v1.font.weights.light};\n color: ${theme.v1.color.text.primary};\n line-height: 16px;\n > a {\n display: inline;\n color: ${theme.v1.color.action.primary};\n }\n span {\n display: block;\n margin-top: 8px;\n }\n `}\n`;\n\nexport const Actions = styled.div`\n ${({ theme }) => css`\n display: flex;\n justify-content: flex-end;\n\n button{\n padding: 0 11px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n align-items: flex-end;\n flex-direction: column;\n padding-top: 25px;\n padding-bottom: 10px;\n\n button{\n padding: 5px 0px\n }\n }\n `}\n`;\n","import React from 'react';\nimport * as Styles from './DnsWizardConfigCardHostGator.styles';\nimport hostGatorLogo from '@/media/logo/HalfSnappyLogo/HalfSnappyLogo.svg';\nimport IconAttentionYellow from '@/icons/IconAttentionYellow/IconAttentionYellow';\nimport { IconEdit } from '@/icons';\nimport { Button } from 'gatorcomponents';\nimport { isMobile } from '@/utils/Validators/validation';\n\nconst DnsWizardConfigCardHostGator = ({\n testId = 'dns-wizard-config-card',\n changePlatformText = '',\n editAdvancedDNSZone = '',\n nameServers = [],\n serverText,\n domain,\n planDetails,\n attentionMessage,\n resellerMessage,\n changePlatformClick,\n handleAdvanceDNSZoneModalShow,\n editPlanClick,\n shouldRenderPropagationMessage = false,\n shouldRenderChangePlanButton = false,\n isPointedToResale = false,\n shouldRenderAdvancedDNSZoneButton,\n}) => {\n const { name: plan } = planDetails;\n return (\n \n \n \n \n\n {!isMobile && (\n \n \n )}\n\n \n \n \n \n {`${plan} -`}\n
\n \n {domain}\n \n {shouldRenderChangePlanButton\n && (\n \n \n )}\n \n\n {nameServers && nameServers.map((nameServer, index) => (\n \n {`${serverText} ${index + 1}: `}\n {nameServer} \n \n ))}\n \n {shouldRenderPropagationMessage && (\n \n \n {shouldRenderPropagationMessage && attentionMessage}\n {isPointedToResale && resellerMessage}\n \n \n )}\n\n {isMobile && (\n \n \n )}\n\n \n );\n};\n\nexport default DnsWizardConfigCardHostGator;\n","import styled, { css } from 'styled-components';\n\nexport const DnsWizardPlanCardWrapper = styled.div`\n ${({ theme, isToggleOn }) => css`\n padding: ${isToggleOn ? 0 : '24px'} 24px 24px 24px;\n border: 1px solid ${theme.v1.color.line.wizard};\n border-radius: 4px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n max-width: 100%;\n background-color: ${theme.v1.color.background.boxes};\n `}\n p{\n margin: 0;\n }\n`;\n\nexport const Header = styled.div`\n ${({ theme, isToggleOn }) => css`\n display: flex;\n justify-content: space-between;\n margin-bottom: ${isToggleOn ? '5px' : '10px'};\n margin-top: ${isToggleOn ? '23px' : '10px'};\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding-top: ${isToggleOn && '25px'};\n padding-bottom: ${isToggleOn && '10px'};\n }\n `}\n`;\n\nexport const Actions = styled.div`\n ${({ theme }) => css`\n display: flex;\n justify-content: flex-end;\n\n button{\n padding: 0 11px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n align-items: flex-end;\n flex-direction: column;\n padding-top: 25px;\n padding-bottom: 10px;\n\n button{\n padding: 5px 0px\n }\n }\n `}\n`;\n\nexport const Logo = styled.img``;\n\nexport const Edit = styled.div`\n ${({ theme }) => css`\n position: absolute;\n right: 0;\n & span svg:hover {\n filter: brightness(60%);\n }\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n position: initial;\n }\n `}\n`;\n\nexport const Nameservers = styled.p`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.sm};\n font-family: ${theme.v1.font.family.primary};\n color: ${theme.v1.color.text.primary};\n font-weight: ${theme.v1.font.weights.medium};\n span{\n color: ${theme.v1.color.action.hover};\n }\n `}\n &:not(:last-child) {\n margin-bottom: 8px;\n }\n`;\n\nexport const PlatformDesktop = styled.span`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.md};\n font-family: ${theme.v1.font.family.primary};\n cursor: pointer;\n display: none;\n font-weight: ${theme.v1.font.weights.medium};\n color: ${theme.v1.color.action.primary};\n &:hover {\n color: ${theme.v1.color.action.hover};\n }\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n display: initial;\n }\n `}\n`;\n\nexport const PlatformMobile = styled.span`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.md};\n font-family: ${theme.v1.font.family.primary};\n cursor: pointer;\n display: initial;\n text-align: right;\n margin-top: 16px;\n &:hover {\n color: ${theme.v1.color.action.hover};\n }\n font-weight: ${theme.v1.font.weights.medium};\n color: ${theme.v1.color.action.primary};\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n display: none;\n }\n `}\n`;\n\nexport const Body = styled.div``;\n\nexport const Product = styled.div`\n ${({ theme }) => css`\n font-size: ${theme.font.sizes.md};\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.v1.font.weights.normal};\n color: ${theme.v1.color.text.primary};\n padding: 0 0 8px 8px;\n border-bottom: 1px solid ${theme.v1.color.line.fields};\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n margin-bottom: 8px;\n justify-content: start;\n position: relative;\n span{\n font-size: ${theme.font.sizes.xxs};\n &:last-child{\n cursor: pointer;\n }\n &:not(:last-child){\n margin-right: 8px;\n }\n }\n p{\n margin-right: 10px;\n &:first-child{\n min-width: 20%;\n }\n }\n @media (min-width: ${theme.v1.breakpoints.md}) {\n min-width: 344px;\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n p{\n margin-right: 3px;\n &:first-child{\n min-width: auto;\n }\n }\n span{\n &:not(:last-child){\n margin-right: 24px;\n }\n }\n }\n `}\n`;\n\nexport const Footer = styled.div`\n ${({ theme }) => css`\n margin-top: 24px;\n display: flex;\n span{\n align-self: center;\n margin-right: 8px;\n }\n div{\n align-self: center;\n }\n\n strong{\n font-weight: ${theme.v2.font.weights.bold};\n }\n `}\n`;\n\nexport const LogoWrapper = styled.div`\n ${({ theme }) => css`\n display:flex;\n align-items: center;\n p{\n margin-left: 8px;\n font-size: ${theme.font.sizes.xl};\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.v1.font.weights.medium};\n color: ${theme.v1.color.text.featured};\n line-height: 27px;\n }\n `}\n`;\n\nexport const FooterMessage = styled.div`\n ${({ theme }) => css`\n max-width: 930px;\n font-size: ${theme.v2.font.sizes.xxxs};\n font-family: ${theme.v2.font.family.primary};\n font-weight: ${theme.v2.font.weights.regular};\n color: ${theme.v2.colors.neutral.lowPure};\n line-height: 16px;\n > a {\n display: inline;\n color: ${theme.v1.color.action.primary};\n }\n span {\n display: block;\n margin-top: 8px;\n }\n `}\n`;\n\n\nexport const NameserversWrapper = styled.div`\n display: flex;\n gap: 4px;\n`;\n\n\nexport const SkeletonWrapper = styled.div`\n display: inline-block;\n margin-left: 8px;\n`;\n","import React from 'react';\nimport * as Styles from './DnsWizardConfigCardReserved.styles';\nimport hostGatorLogo from '@/media/logo/HalfSnappyLogo/HalfSnappyLogo.svg';\nimport { IconEdit } from '@/icons';\nimport { Alert, Button, Skeleton } from 'gatorcomponents';\nimport { isMobile } from '@/utils/Validators/validation';\n\nconst DnsWizardConfigCardReserved = ({\n changePlatformText = '',\n editAdvancedDNSZone = '',\n nameServers = [],\n serverText,\n noPlatformMessage,\n testId = 'dns-wizard-config-card',\n changePlatformClick,\n handleAdvanceDNSZoneModalShow,\n editPlanClick,\n noPlanSelectedMessage = '',\n shouldRenderChangePlanButton = false,\n shouldRenderAdvancedDNSZoneButton,\n loading,\n}) => (\n \n \n \n \n\n {!isMobile && (\n \n \n )}\n\n \n \n \n \n {noPlanSelectedMessage}\n
\n \n \n )\n }\n \n {nameServers && nameServers.map((nameServer, index) => (\n \n \n {`${serverText} ${index + 1}: `}\n {!loading && {nameServer} }\n \n {loading && (\n \n \n )}\n \n ))}\n \n \n \n {isMobile && (\n \n \n )}\n\n \n);\n\nexport default DnsWizardConfigCardReserved;\n","import styled, { css } from 'styled-components';\n\nexport const DnsWizardPlanCardWrapper = styled.div`\n ${({ theme, isToggleOn }) => css`\n background-color: ${theme.v1.color.background.boxes};\n border-radius: 4px;\n border: 1px solid ${theme.v1.color.line.wizard};\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n max-width: 100%;\n padding: ${isToggleOn ? 0 : '24px'} 24px 24px 24px;\n `}\n p{\n margin: 0;\n }\n`;\n\nexport const Header = styled.div`\n ${({ theme, isToggleOn }) => css`\n display: flex;\n justify-content: space-between;\n margin-bottom: ${isToggleOn ? '5px' : '10px'};\n margin-top: ${isToggleOn ? '23px' : '10px'};\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding-top: ${isToggleOn && '25px'};\n padding-bottom: ${isToggleOn && '10px'};\n }\n `}\n`;\n\nexport const Logo = styled.img``;\n\nexport const Edit = styled.div`\n ${({ theme }) => css`\n position: absolute;\n right: 0;\n & span svg:hover {\n filter: brightness(60%);\n }\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n position: initial;\n }\n `}\n`;\n\nexport const Nameservers = styled.p`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.v1.font.weights.medium};\n span{\n color: ${theme.v1.color.action.hover};\n }\n `}\n &:not(:last-child) {\n margin-bottom: 8px;\n }\n`;\n\nexport const PlatformDesktop = styled.span`\n ${({ theme }) => css`\n color: ${theme.v1.color.action.primary};\n cursor: pointer;\n display: none;\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.v1.font.weights.medium};\n &:hover {\n color: ${theme.v1.color.action.hover};\n }\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n display: initial;\n }\n `}\n`;\n\nexport const PlatformMobile = styled.span`\n ${({ theme }) => css`\n cursor: pointer;\n display: initial;\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.md};\n margin-top: 16px;\n text-align: right;\n &:hover {\n color: ${theme.v1.color.action.hover};\n }\n color: ${theme.v1.color.action.primary};\n font-weight: ${theme.v1.font.weights.medium};\n @media (min-width: ${theme.v1.breakpoints.sm}) {\n display: none;\n }\n `}\n`;\n\nexport const Body = styled.div``;\n\nexport const Product = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n border-bottom: 1px solid ${theme.v1.color.line.fields};\n color: ${theme.v1.color.text.primary};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.md};\n font-weight: ${theme.v1.font.weights.normal};\n justify-content: start;\n margin-bottom: 8px;\n padding: 0 0 8px 8px;\n position: relative;\n span{\n font-size: ${theme.font.sizes.xxs};\n &:last-child{\n cursor: pointer;\n }\n &:not(:last-child){\n margin-right: 8px;\n }\n }\n p{\n margin-right: 10px;\n &:first-child{\n min-width: 20%;\n }\n }\n @media (min-width: ${theme.v1.breakpoints.md}) {\n align-items: center;\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n min-width: 344px;\n p{\n margin-right: 3px;\n &:first-child{\n min-width: auto;\n }\n }\n span{\n &:not(:last-child){\n margin-right: 24px;\n }\n }\n }\n `}\n`;\n\nexport const Footer = styled.div`\n display: flex;\n margin-top: 24px;\n span{\n align-self: center;\n margin-right: 8px;\n }\n div{\n align-self: center;\n }\n`;\n\nexport const LogoWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display:flex;\n flex-wrap: wrap;\n gap: 8px;\n p{\n margin-left: 8px;\n font-size: ${theme.font.sizes.xl};\n font-family: ${theme.v1.font.family.primary};\n font-weight: ${theme.v1.font.weights.medium};\n color: ${theme.v1.color.text.featured};\n line-height: 27px;\n }\n `}\n`;\n\nexport const FooterMessage = styled.div`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.xxs};\n font-weight: ${theme.v1.font.weights.light};\n line-height: 16px;\n max-width: 110ch;\n > a {\n display: inline;\n color: ${theme.v1.color.action.primary};\n }\n span {\n display: block;\n margin-top: 8px;\n }\n `}\n`;\n\nexport const PlatformLinkWrapper = styled.span`\n ${({ theme }) => css`\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.sm};\n `}\n`;\n\nexport const Actions = styled.div`\n ${({ theme }) => css`\n display: flex;\n justify-content: flex-end;\n\n button{\n padding: 0 11px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n align-items: flex-end;\n flex-direction: column;\n padding-top: 25px;\n padding-bottom: 10px;\n\n button{\n padding: 5px 0px\n }\n }\n `}\n`;\n","import React from 'react';\nimport * as Styles from './DnsWizardConfigCardExternal.styles';\nimport IconAttentionYellow from '@/icons/IconAttentionYellow/IconAttentionYellow';\nimport { Button } from 'gatorcomponents';\nimport { isMobile } from '@/utils/Validators/validation';\n\nconst DnsWizardConfigCardExternal = ({\n platform = {\n imageUrl: '',\n featured: false,\n platformID: '0004a9felocaweb-f681-4654-97a7-2ebeb34e60cd',\n platformName: 'Locaweb',\n nsServer1: 'ns1.locaweb.com.br',\n nsServer2: 'ns2.locaweb.com.br',\n nsServer3: 'ns3.locaweb.com.br',\n nsServer4: 'ns4.locaweb.com.br',\n },\n changePlatformText = '',\n nameServers = [],\n serverText,\n attentionMessage,\n externalPlatformAttentionMessage = p => p,\n testId = 'dns-wizard-config-card-dns-zone',\n changePlatformClick,\n}) => {\n const { platformName, imageUrl } = platform;\n\n return (\n \n \n \n \n\n {!isMobile && (\n \n \n )}\n \n \n {nameServers && nameServers.map((nameServer, index) => nameServer && (\n \n {`${serverText} ${index + 1}: `}\n {nameServer} \n \n ))}\n \n \n \n {attentionMessage}\n {externalPlatformAttentionMessage(platformName)}\n \n \n\n {isMobile && (\n \n \n )}\n\n \n );\n};\n\nexport default DnsWizardConfigCardExternal;\n","import styled, { css } from 'styled-components';\n\nexport const ModalWrapper = styled.div`\n padding: 32px;\n`;\n\nexport const ModalTitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 48px 0px;\n `}\n`;\n","import React from 'react';\nimport { Modal } from '@/pages/common';\nimport * as Styles from './ReinforcedModal.styles';\nimport { DnsWizardBannerHosting } from '@/components/domain/components/DnsWizardBannerHosting';\nimport PropTypes from 'prop-types';\n\nconst ReinforcedModal = ({\n handleClose,\n title,\n dnsWizardBannerHostingProps,\n}) => {\n const handleOnClose = () => {\n handleClose && handleClose(false);\n };\n\n return (\n \n \n \n {title}\n \n\n \n \n );\n};\n\nReinforcedModal.propTypes = {\n handleClose: PropTypes.func,\n title: PropTypes.string,\n dnsWizardBannerHostingProps: PropTypes.func,\n};\n\nexport default ReinforcedModal;\n","import styled, { css } from 'styled-components';\n\n\nexport const ModalWrapper = styled.div`\n padding: 32px;\n`;\n\nexport const Image = styled.img`\n max-width: 224px\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 48px 0px 0px 0px;\n `}\n`;\n\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 8px 0px 0px 0px;\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n \n br {\n content: \"\";\n margin: ${theme.v2.font.sizes.xxs};\n display: block;\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const AlertWrapper = styled.div`\n ${({ theme }) => css`\n margin: 32px 0px 0px 0px;\n > div {\n padding: 0px;\n a {\n display: inline-block !important;\n font-weight: ${theme.v2.font.weights.medium};\n }\n }\n `}\n`;\n\nexport const CheckBoxWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n border-top: 1px solid ${theme.v2.colors.neutral.highLight};\n display: flex;\n justify-content: center;\n margin: 24px 0px 0px 0px;\n padding: 24px 0px 0px 0px;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n margin: 24px auto 0px;\n`;\n\n\nexport const CheckboxLabel = styled.label`\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: 2px;\n margin: 0px;\n\n label {\n width: 19px;\n height: 19px;\n }\n`;\n\nexport const Text = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: inline-block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n line-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n","import React, { useState } from 'react';\nimport * as Styles from './InBetweenDlojaModal.styles';\nimport { Modal } from '@/pages/common';\nimport { Alert, Button, Checkbox } from 'gatorcomponents';\nimport PropTypes from 'prop-types';\nimport { HOSTING_PLATFORM_TYPES } from '@/enums/domains/dns.enum';\n\nconst InBetweenDlojaModal = ({\n hostingPlatforms,\n handleClose,\n title,\n description,\n alert,\n onContinue,\n checkbox,\n cta,\n}) => {\n const [knowTheDifference, setKnowTheDifference] = useState(false);\n\n const handleClickContinue = () => {\n onContinue && onContinue();\n handleClose();\n };\n\n return (\n \n \n platform.platformType === HOSTING_PLATFORM_TYPES.DLOJA,\n ).imageUrl\n }\n />\n\n \n {title}\n \n\n \n {description}\n \n\n \n \n\n \n setKnowTheDifference(!knowTheDifference)}\n >\n \n {checkbox}\n \n \n \n\n \n \n \n \n );\n};\n\nInBetweenDlojaModal.propTypes = {\n handleClose: PropTypes.func,\n hostingPlatforms: PropTypes.array,\n};\n\nexport default InBetweenDlojaModal;\n","import React, {\n useLayoutEffect, useState, useEffect, useContext, useCallback,\n} from 'react';\nimport * as Styles from './DnsWizardDomainHandler.styles';\nimport { Loader } from '@/pages/common/v1/Loader';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useConfigurationStatus, useFilterPlatforms } from '@/hooks/domains/wizard';\nimport { domainsAnalytics } from '@/analytics';\nimport { DnsWizardContext } from '@/contexts/DnsWizard';\nimport {\n HOSTING_PLATFORM_TYPES,\n PLAN_TYPES,\n} from '@/enums/domains/dns.enum';\nimport { dnsWizardActions } from '@/redux/modules/dnsWizard';\nimport { formatDomainEllipsis } from '@/utils/Formatters/formatDomainEllipsis';\nimport { loadDnsDetails } from '@/redux/actions/dnsForward';\nimport { IconHosting, IconWatch } from '@/icons';\nimport { DnsWizardHeader } from '@/components/domain/components/DnsWizardHeader';\nimport { DnsWizardSuccessMessage } from '@/components/domain/components/DnsWizardSuccessMessage';\nimport { DnsWizardDomainHeader } from '@/components/domain/components/DnsWizardDomainHeader';\nimport { DnsWizardHostingPlatformsGrid } from '@/components/domain/components/DnsWizardHostingPlatformsGrid';\nimport { DnsWizardBannerHosting } from '@/components/domain/components/DnsWizardBannerHosting';\nimport {\n alertsActions, cloudflareActions, preChatActions, sitesActions,\n} from '@/redux/modules';\n\n// Configuration Cards\nimport {\n DnsWizardConfigCardCustom,\n DnsWizardConfigCardDnsZone,\n DnsWizardConfigCardExternal,\n DnsWizardConfigCardHostGator,\n DnsWizardConfigCardReserved,\n} from '@/components/domain/components/configurationCards';\n\n// Modals\nimport {\n HostGatorAlterPlatformModal,\n HostGatorConfigModal,\n HostGatorCustomDnsZoneModal,\n HostGatorOtherPlatformModal,\n HostGatorExternalModal,\n AdvancedDnsZoneModal,\n DomainConfigurationReview,\n} from '@/components/domain/components/modals';\nimport { Alert } from 'gatorcomponents';\nimport ReinforcedModal from './components/ReinforcedModal/ReinforcedModal';\nimport { InBetweenDlojaModal } from './components/InBetweenDlojaModal';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { CHARLIE_CLOUDFLARE_INSIDE_WIZARD_DNS } from '@/config/GrowthBook/constants';\n\nconst DnsWizardDomainHandler = ({\n testId = 'dns-wizard-handler',\n hostingPlatforms = [],\n availablePlans = [],\n domain = {},\n controls = {},\n selectedConfiguration = {},\n dnsWizardLocale = {},\n domainId,\n goToAdvancedDNSZone,\n showAdvanceDNSZoneModal,\n setShowAdvanceDNSZoneModal,\n}) => {\n const dispatch = useDispatch();\n\n useEffect(() => {\n dispatch(sitesActions.plans.request());\n }, [dispatch]);\n\n const allowCloudflare = useFeatureIsOn(CHARLIE_CLOUDFLARE_INSIDE_WIZARD_DNS);\n const cloudFlareStore = useSelector(state => state.cloudflare);\n const sitesStore = useSelector(state => state.sites);\n\n const onDomainReservedFlow = useSelector(\n state => state.preChat.triage.domainReservedFlow,\n );\n const clickOnAlertDomainToPoint = useSelector(\n state => state.alertsV2.clickOnAlertDomainToPoint,\n );\n\n const {\n loading,\n } = useSelector(state => state.common);\n\n const { setOpenDnsTable } = useContext(DnsWizardContext);\n const IS_STORYBOOK = process.env.STORYBOOK_IS_SB === '1';\n\n const { modals: modalsLocale } = dnsWizardLocale;\n const { errors: errorsLocale } = dnsWizardLocale;\n const { dnsWizard: dnsWizardAnalytics } = domainsAnalytics;\n\n const filteredPlatforms = useFilterPlatforms(hostingPlatforms);\n\n const [hostGatorConfigModal, setHostGatorConfigModal] = useState(false);\n const [hostGatorAlterPlatformModal, setHostGatorAlterPlatformModal] = useState(false);\n const [hostGatorOtherPlatformModal, setHostGatorOtherPlatformModal] = useState(false);\n const [externalModal, setExternalModal] = useState(false);\n const [customDnsZoneModal, setCustomDnsZoneModal] = useState(false);\n const [renderDomainConfigurationReviewModal, setRenderDomainConfigurationReviewModal] = useState(false);\n const [inbetweenDlojaModal, setInbetweenDlojaModal] = useState(false);\n\n const [selectedPlatformType, setSelectedPlatformType] = useState(null);\n const [nameServers, setNameServers] = useState([]);\n const [externalNameServers, setExternalNameServers] = useState([]);\n const [selectedPlanToShowInReview, setSelectedPlanToShowInReview] = useState();\n const [selectedPlatformToPoint, setSelectedPlatformToPoint] = useState();\n const [dataToSubmitAfterReview, setDataToSubmitAfterReview] = useState();\n const [reinforceModal, setReinforceModal] = useState(false);\n const additionalPlanOfferCard = true;\n const additionalNoHostGatorPlanCard = true;\n const [forceDefaultDnsFlow, setForceDefaultDnsFlow] = useState(false);\n\n const {\n pageLoading,\n domainConfigurationLoading,\n hasAvailableHostGatorPlan,\n hasHostGatorPlan,\n skippedWizard,\n changedPlan,\n } = controls;\n\n const {\n name: domainName,\n configurationStatus,\n planDetails,\n nameServers: storedNameServers,\n platformName,\n } = domain;\n const domainEllipsis = formatDomainEllipsis(domainName, 15);\n const mainDomainEllipsis = formatDomainEllipsis(planDetails.domain, 19);\n\n const {\n isPropagationPeriod,\n wasRecentlyConfigured,\n isConfiguredThroughWizard,\n isConfiguredInHostGator,\n } = configurationStatus;\n\n const {\n dnsWizardHostingPlatformsView,\n dnsWizardPlanSelectClick,\n dnsWizardClosePlanSelectionModal,\n dnsWizardAlterPlatformClick,\n dnsWizardAlterHostingPlanClick,\n dnsWizardCustomConfigurationClick,\n dnsWizardCloseCustomConfigurationClick,\n dnsWizardConfirmCustomConfigurationClick,\n dnsWizardHelpMaterialCustomConfigurationClick,\n dnsWizardPlatformDefinitionHelpMaterialClick,\n dnsWizardHelpMaterialPlanSelection,\n dnsWizardHelpMaterialDnsZoneStatsClick,\n dnsWizardLojaIntegradaCardClick,\n dnsWizardNuvemshopCardClick,\n dnsWizardShopifyCardClick,\n dnsWizardExternalCardClick,\n dnsWizardExternalEditPlatformCardClick,\n dnsWizardBannerNewPlanClick,\n dnsWizardBannerUpgradePlanClick,\n dnsWizardBannerSeePlansClick,\n dnsWizardDLojaCardClick,\n } = dnsWizardAnalytics;\n // Rendering Rules\n const shouldRenderPlatformSelection = !isConfiguredThroughWizard && !skippedWizard;\n const shouldRenderConfigurationDetailsCard = isConfiguredThroughWizard;\n const shouldRenderSuccessMessage = !skippedWizard && wasRecentlyConfigured;\n const shouldRenderDnsZoneWarning = skippedWizard && wasRecentlyConfigured;\n\n // Business Rules\n const status = useConfigurationStatus(configurationStatus, platformName);\n const isPointedToReservedServer = status === HOSTING_PLATFORM_TYPES.RESERVED;\n const isPointedToHostGatorPlan = status === HOSTING_PLATFORM_TYPES.HOSTGATOR;\n const isPointedToResale = planDetails.type === PLAN_TYPES.RESALE;\n const isPointedToCustomServer = status === HOSTING_PLATFORM_TYPES.CUSTOM;\n\n const shouldRenderAdvancedDNSZoneButton = isConfiguredThroughWizard && isConfiguredInHostGator && !isPointedToCustomServer && planDetails.type !== PLAN_TYPES.RESALE;\n\n const shouldRenderAdditionalPlanOfferCard = hasHostGatorPlan && !hasAvailableHostGatorPlan && (additionalPlanOfferCard || IS_STORYBOOK);\n const shouldRenderNoHostgatorPlan = !hasHostGatorPlan && (additionalNoHostGatorPlanCard || IS_STORYBOOK);\n const showHostGatorPlanOffer = shouldRenderAdditionalPlanOfferCard || shouldRenderNoHostgatorPlan;\n const { planStatus } = planDetails;\n const attentionMessage = dnsWizardLocale.configCardAttentionMessage(dnsWizardHelpMaterialDnsZoneStatsClick);\n const attentionMessageCustom = dnsWizardLocale.configCardAttentionMessage(dnsWizardHelpMaterialDnsZoneStatsClick);\n\n const handleConfigureHostGatorPlan = () => {\n setOpenDnsTable(false);\n dispatch(dnsWizardActions.hostGatorPlanConfiguration.request(domainId, selectedConfiguration));\n dispatch(loadDnsDetails(domainId));\n };\n\n const handleConfigureCustomDns = (platformId) => {\n dnsWizardConfirmCustomConfigurationClick();\n dispatch(dnsWizardActions.customConfiguration.request(domainId, platformId));\n dispatch(loadDnsDetails(domainId));\n };\n\n const handleConfigureCustomDnsZone = (customDnsZonePayload, platform, currentType) => {\n if (currentType !== PLAN_TYPES.PLAN) {\n dispatch(dnsWizardActions.skipWizard.set());\n dispatch(dnsWizardActions.customDnsZoneConfiguration.request(domainId, customDnsZonePayload, platform));\n return;\n }\n dispatch(dnsWizardActions.customDnsZoneFromPlanConfiguration.request(domainId, customDnsZonePayload, platform));\n };\n\n const handleEditPlan = () => {\n dnsWizardAlterHostingPlanClick();\n setHostGatorConfigModal(true);\n };\n\n const handleChangePlatform = () => {\n dnsWizardAlterPlatformClick();\n domainsAnalytics.dnsWizard.changePlatformCtaClick();\n setHostGatorAlterPlatformModal(true);\n };\n\n const handleAdvanceDNSZoneModalShow = () => {\n const dontShowAlert = localStorage.getItem('dnsAdvancedZoneDontShowModal');\n if (dontShowAlert) {\n goToAdvancedDNSZone && goToAdvancedDNSZone();\n dnsWizardAnalytics.dnsWizardEditDnsZone();\n } else {\n if (!showAdvanceDNSZoneModal) {\n dnsWizardAnalytics.dnsWizardEditDnsZone();\n }\n setShowAdvanceDNSZoneModal(!showAdvanceDNSZoneModal);\n }\n };\n\n\n const closeDomainConfigurationReviewModal = () => {\n setRenderDomainConfigurationReviewModal(false);\n setSelectedPlanToShowInReview(undefined);\n setSelectedPlatformToPoint(undefined);\n setDataToSubmitAfterReview(undefined);\n };\n\n const handleOtherPlatformMClick = () => {\n dnsWizardCustomConfigurationClick();\n setHostGatorOtherPlatformModal(true);\n };\n\n const handleCloseModal = () => {\n dnsWizardClosePlanSelectionModal();\n setHostGatorConfigModal(false);\n };\n\n const handleClickVpsOrDedicatedPlan = () => {\n handleOtherPlatformMClick();\n };\n\n const handleCloseOtherPlatformModal = () => {\n dnsWizardCloseCustomConfigurationClick();\n setHostGatorOtherPlatformModal(false);\n };\n\n const handleCloseCustomDnsZoneModal = () => {\n setCustomDnsZoneModal(false);\n };\n\n const handleCloseExternalModal = () => {\n setExternalModal(false);\n };\n\n const handleCloseAlterPlatformModal = () => {\n dnsWizardAnalytics.dnsWizardCloseEditPlatformModal();\n setHostGatorAlterPlatformModal(false);\n };\n\n const helpClickGa = () => {\n dnsWizardHelpMaterialCustomConfigurationClick();\n };\n\n const configurationHelpClickGa = () => {\n dnsWizardHelpMaterialPlanSelection();\n };\n\n const handleSkipWizard = () => {\n dnsWizardAnalytics.dnsWizardSkipWizardClick();\n dispatch(dnsWizardActions.skipWizard.request(domainId));\n dispatch(dnsWizardActions.skipWizard.set());\n if (!isPointedToHostGatorPlan) {\n setNameServers(storedNameServers);\n }\n };\n\n const handleConfigureExternalPlatform = (payload) => {\n dispatch(dnsWizardActions.externalConfiguration.request(domainId, payload));\n };\n const handleNewPlanFromBanner = () => {\n dnsWizardBannerNewPlanClick();\n };\n\n const handleUpgradePlanFromBanner = () => {\n dnsWizardBannerUpgradePlanClick();\n };\n\n const handleDnsWizardBannerSeePlansClick = () => {\n dnsWizardBannerSeePlansClick();\n };\n\n const loadDnsDetailsFunc = useCallback((id) => {\n dispatch(loadDnsDetails(id));\n }, [dispatch]);\n\n useEffect(() => {\n if (changedPlan) {\n loadDnsDetailsFunc(domainId);\n }\n }, [changedPlan, domainId, loadDnsDetailsFunc]);\n\n const getNameServers = platform => [platform.nsServer1, platform.nsServer2, platform.nsServer3, platform.nsServer4].filter(e => e !== '');\n\n const handleSubmitDomainConfiguration = (platformToPoint, dataToSubmit) => {\n const platform = platformToPoint || selectedPlatformToPoint;\n const newDomainDnsData = dataToSubmit || dataToSubmitAfterReview;\n\n switch (platform) {\n case HOSTING_PLATFORM_TYPES.HOSTGATOR:\n handleConfigureHostGatorPlan();\n break;\n case HOSTING_PLATFORM_TYPES.CUSTOM:\n handleConfigureCustomDns(newDomainDnsData);\n break;\n case HOSTING_PLATFORM_TYPES.EXTERNAL:\n handleConfigureExternalPlatform(newDomainDnsData);\n break;\n case HOSTING_PLATFORM_TYPES.RESERVED:\n handleSkipWizard();\n break;\n case HOSTING_PLATFORM_TYPES.CUSTOM_DNS_ZONE:\n if (newDomainDnsData) {\n handleConfigureCustomDnsZone(newDomainDnsData.platformId, newDomainDnsData.type, newDomainDnsData.currentType);\n }\n break;\n default:\n break;\n }\n };\n\n const handleDomainConfigurationReviewModalShow = (submitDesired, data) => {\n if (!isPointedToReservedServer) {\n if (submitDesired) {\n setSelectedPlatformToPoint(submitDesired);\n setDataToSubmitAfterReview(data);\n }\n\n setRenderDomainConfigurationReviewModal(!renderDomainConfigurationReviewModal);\n } else {\n handleSubmitDomainConfiguration(submitDesired, data);\n }\n };\n\n const handleAlterPlatformContinue = (platformType, destinationPlatformName) => {\n dnsWizardAnalytics.dnsWizardEditPlatformContinueClick();\n setHostGatorAlterPlatformModal(false);\n\n switch (platformType) {\n case HOSTING_PLATFORM_TYPES.HOSTGATOR:\n setHostGatorConfigModal(true);\n break;\n case HOSTING_PLATFORM_TYPES.CUSTOM:\n setHostGatorOtherPlatformModal(true);\n break;\n case HOSTING_PLATFORM_TYPES.NUVEMSHOP:\n setSelectedPlatformType(HOSTING_PLATFORM_TYPES.NUVEMSHOP);\n setCustomDnsZoneModal(true);\n break;\n case HOSTING_PLATFORM_TYPES.TIENDANUBE:\n setSelectedPlatformType(HOSTING_PLATFORM_TYPES.TIENDANUBE);\n setCustomDnsZoneModal(true);\n break;\n case HOSTING_PLATFORM_TYPES.LOJA_INTEGRADA:\n setSelectedPlatformType(HOSTING_PLATFORM_TYPES.LOJA_INTEGRADA);\n setCustomDnsZoneModal(true);\n break;\n case HOSTING_PLATFORM_TYPES.SHOPIFY:\n setSelectedPlatformType(HOSTING_PLATFORM_TYPES.SHOPIFY);\n setCustomDnsZoneModal(true);\n break;\n case HOSTING_PLATFORM_TYPES.DLOJA:\n setInbetweenDlojaModal(true);\n setCustomDnsZoneModal(true);\n setExternalNameServers(getNameServers(hostingPlatforms.find(e => e.platformName.toLowerCase() === destinationPlatformName.toLowerCase())));\n break;\n case HOSTING_PLATFORM_TYPES.EXTERNAL:\n setSelectedPlatformType(destinationPlatformName);\n setExternalModal(true);\n setExternalNameServers(getNameServers(hostingPlatforms.find(e => e.platformName.toLowerCase() === destinationPlatformName.toLowerCase())));\n break;\n case HOSTING_PLATFORM_TYPES.RESERVED:\n handleDomainConfigurationReviewModalShow(HOSTING_PLATFORM_TYPES.RESERVED);\n setExternalNameServers(getNameServers(hostingPlatforms.find(e => e.platformName.toLowerCase() === destinationPlatformName.toLowerCase())));\n break;\n default:\n break;\n }\n };\n\n const handleOpenModal = useCallback((modalType, destinationPlatformName) => {\n switch (modalType) {\n case HOSTING_PLATFORM_TYPES.HOSTGATOR:\n dnsWizardAnalytics.dnsWizardHostGatorCardClick();\n setHostGatorConfigModal(true);\n break;\n case HOSTING_PLATFORM_TYPES.CUSTOM:\n dnsWizardCustomConfigurationClick();\n setHostGatorOtherPlatformModal(true);\n break;\n case HOSTING_PLATFORM_TYPES.NUVEMSHOP:\n dnsWizardNuvemshopCardClick();\n setSelectedPlatformType(HOSTING_PLATFORM_TYPES.NUVEMSHOP);\n setCustomDnsZoneModal(true);\n break;\n case HOSTING_PLATFORM_TYPES.TIENDANUBE:\n dnsWizardNuvemshopCardClick();\n setSelectedPlatformType(HOSTING_PLATFORM_TYPES.TIENDANUBE);\n setCustomDnsZoneModal(true);\n break;\n case HOSTING_PLATFORM_TYPES.LOJA_INTEGRADA:\n dnsWizardLojaIntegradaCardClick();\n setSelectedPlatformType(HOSTING_PLATFORM_TYPES.LOJA_INTEGRADA);\n setCustomDnsZoneModal(true);\n break;\n case HOSTING_PLATFORM_TYPES.DLOJA:\n dnsWizardDLojaCardClick();\n setSelectedPlatformType(HOSTING_PLATFORM_TYPES.DLOJA);\n setCustomDnsZoneModal(true);\n break;\n case HOSTING_PLATFORM_TYPES.SHOPIFY:\n dnsWizardShopifyCardClick();\n setSelectedPlatformType(HOSTING_PLATFORM_TYPES.SHOPIFY);\n setCustomDnsZoneModal(true);\n break;\n case HOSTING_PLATFORM_TYPES.EXTERNAL:\n dnsWizardExternalCardClick(destinationPlatformName);\n setSelectedPlatformType(destinationPlatformName);\n setExternalModal(true);\n setExternalNameServers(getNameServers(hostingPlatforms.find(e => e.platformName.toLowerCase() === destinationPlatformName.toLowerCase())));\n break;\n default:\n break;\n }\n }, [\n dnsWizardCustomConfigurationClick,\n dnsWizardDLojaCardClick,\n dnsWizardExternalCardClick,\n dnsWizardLojaIntegradaCardClick,\n dnsWizardNuvemshopCardClick,\n dnsWizardShopifyCardClick,\n dnsWizardAnalytics,\n hostingPlatforms,\n ]);\n\n const renderDnsWizardConfigCard = (statusType) => {\n switch (statusType) {\n case HOSTING_PLATFORM_TYPES.HOSTGATOR:\n return (\n e.platformName.toLowerCase() === platformName.toLowerCase())}\n externalPlatformAttentionMessage={dnsWizardLocale.externalPlatformAttentionMessage}\n />\n );\n default:\n return null;\n }\n };\n\n useLayoutEffect(() => {\n dnsWizardHostingPlatformsView();\n }, [dnsWizardHostingPlatformsView]);\n\n useEffect(() => {\n if ((status === HOSTING_PLATFORM_TYPES.CUSTOM)\n || (status === HOSTING_PLATFORM_TYPES.EXTERNAL)\n || ((status === HOSTING_PLATFORM_TYPES.CUSTOM_DNS_ZONE) && (planDetails.type !== PLAN_TYPES.PLAN))) {\n setNameServers(storedNameServers);\n }\n\n if (isPointedToHostGatorPlan\n || ((status === HOSTING_PLATFORM_TYPES.CUSTOM_DNS_ZONE) && (planDetails.type === PLAN_TYPES.PLAN))\n ) {\n setNameServers([\n planDetails.master,\n planDetails.slave,\n ]);\n }\n\n if (isPointedToReservedServer) {\n setNameServers(storedNameServers);\n }\n }, [planDetails, storedNameServers, isPointedToHostGatorPlan, status, configurationStatus, isPointedToReservedServer]);\n\n const handleCloudflareActivation = useCallback(() => {\n if (allowCloudflare) {\n if (cloudFlareStore.lastActivation.status === 'success') {\n dispatch(cloudflareActions.cdn.setActivatedDomain({}));\n handleCloseModal();\n }\n\n if (cloudFlareStore.lastActivation.status === 'failure') {\n setForceDefaultDnsFlow(true);\n dispatch(cloudflareActions.cdn.setActivatedDomain({}));\n }\n }\n }, [\n cloudFlareStore.lastActivation.status,\n dispatch,\n handleCloseModal,\n allowCloudflare,\n ]);\n\n useEffect(() => {\n handleCloudflareActivation();\n }, [handleCloudflareActivation]);\n\n const handleCheckCloudflareStatusActivation = useCallback(({ selectedPlanData }) => {\n if (domain && selectedPlanData && selectedPlanData.external_id && allowCloudflare) {\n if (selectedPlanData.cloudflare_available) {\n const cloudflareItem = cloudFlareStore.specificCheckedDomain.cloudflare;\n\n if (cloudflareItem) {\n const cloudflareAlreadyConfigured = Number(cloudflareItem.hosting_id) === Number(selectedPlanData.external_id);\n const cloudflareConfiguredForAnotherDomain = Number(cloudflareItem.hosting_id) !== Number(selectedPlanData.external_id);\n\n if (cloudflareAlreadyConfigured) {\n handleCloseModal();\n return;\n }\n\n if (cloudflareConfiguredForAnotherDomain) {\n dispatch(cloudflareActions.cdn.deactivateCdn({\n hostingId: cloudFlareStore.specificCheckedDomain.cloudflare.hosting_id,\n newHosting: Number(selectedPlanData.external_id),\n domain: domain.name,\n domainOrigin: 'internal',\n enqueueActivation: true,\n }));\n }\n }\n\n if (!cloudflareItem) {\n dispatch(cloudflareActions.cdn.activateCdn({\n hostingId: Number(selectedPlanData.external_id),\n domain: domain.name,\n domainOrigin: 'internal',\n }));\n }\n }\n\n if (!selectedPlanData.cloudflare_available) {\n setForceDefaultDnsFlow(true);\n }\n }\n }, [\n cloudFlareStore,\n domain,\n dispatch,\n handleCloseModal,\n allowCloudflare,\n ]);\n\n const getHostGatorConfigModalProps = useCallback(() => {\n const handlePointCloudflare = ({ selectedPlanId }) => {\n const selectedPlanData = sitesStore.plans.find(plan => Number(plan.external_id) === selectedPlanId);\n handleCheckCloudflareStatusActivation({ selectedPlanData });\n\n dispatch(cloudflareActions.sitesWizard.request({ domain: domain.name }));\n };\n\n\n const defaultProps = {\n hostGatorConfigModal,\n handleClose: handleCloseModal,\n availablePlans,\n handleSubmit: handleConfigureHostGatorPlan,\n handleSkipWizard,\n title: modalsLocale[HOSTING_PLATFORM_TYPES.HOSTGATOR].title,\n subtitle: modalsLocale[HOSTING_PLATFORM_TYPES.HOSTGATOR].subtitle,\n tooltip: modalsLocale[HOSTING_PLATFORM_TYPES.HOSTGATOR].tooltip,\n checkboxText: modalsLocale[HOSTING_PLATFORM_TYPES.HOSTGATOR].checkbox,\n configureButtonText: modalsLocale[HOSTING_PLATFORM_TYPES.HOSTGATOR].button,\n mainDomainText: modalsLocale[HOSTING_PLATFORM_TYPES.HOSTGATOR].mainDomain,\n otherDomainsText: modalsLocale[HOSTING_PLATFORM_TYPES.HOSTGATOR].otherDomains,\n domainText: modalsLocale[HOSTING_PLATFORM_TYPES.HOSTGATOR].domain,\n domainTextPlural: modalsLocale[HOSTING_PLATFORM_TYPES.HOSTGATOR].domains,\n alertMessageText: modalsLocale[HOSTING_PLATFORM_TYPES.HOSTGATOR].alertMessage(configurationHelpClickGa),\n planSelectGa: dnsWizardPlanSelectClick,\n handleClickVpsOrDedicatedPlan,\n firstTimeConfigure: !isConfiguredThroughWizard,\n dnsConfigureText: modalsLocale[HOSTING_PLATFORM_TYPES.HOSTGATOR].dnsConfigText,\n platform: hostingPlatforms.find(e => e.platformType === HOSTING_PLATFORM_TYPES.HOSTGATOR),\n setSelectedPlanToShowInReview,\n allowCloudflare,\n loadingCloudflare: cloudFlareStore.loading,\n handlePointCloudflare,\n forceDefaultDnsFlow,\n };\n\n return defaultProps;\n }, [\n availablePlans,\n configurationHelpClickGa,\n dnsWizardPlanSelectClick,\n handleConfigureHostGatorPlan,\n handleClickVpsOrDedicatedPlan,\n hostingPlatforms,\n isConfiguredThroughWizard,\n modalsLocale,\n hostGatorConfigModal,\n setSelectedPlanToShowInReview,\n allowCloudflare,\n handleCloseModal,\n handleSkipWizard,\n cloudFlareStore,\n dispatch,\n domain,\n forceDefaultDnsFlow,\n handleCheckCloudflareStatusActivation,\n sitesStore.plans,\n ]);\n\n const hostGatorConfigModalComponent = domainConfigurationLoading\n ? ( e.platformType === selectedPlatformType).pop()}\n analytics={dnsWizardAnalytics}\n handleConfigureCustomDnsZone={handleDomainConfigurationReviewModalShow}\n currentType={planDetails.type}\n firstTimeConfigure={!isConfiguredThroughWizard}\n currentStatus={status}\n />\n );\n\n const HostGatorExternalModalComponent = domainConfigurationLoading\n ? ( e.platformName === selectedPlatformType)}\n modalsLocale={modalsLocale[HOSTING_PLATFORM_TYPES.EXTERNAL]}\n analytics={dnsWizardAnalytics}\n defaultNameServers={externalNameServers}\n handleConfigureExternalPlatform={handleDomainConfigurationReviewModalShow}\n errorsLocale={errorsLocale}\n firstTimeConfigure={!isConfiguredThroughWizard}\n />\n );\n\n const advanceDNSZoneModal = showAdvanceDNSZoneModal && (\n \n\n {domainConfigurationLoading && (\n \n {(pageLoading || sitesStore.plansLoading) ? (\n \n {renderDnsWizardConfigCard(status)}\n \n )}\n\n {shouldRenderPlatformSelection && (\n <>\n \n \n\n {showHostGatorPlanOffer && (\n \n\n\n \n );\n};\n\nexport default DnsWizardDomainHandler;\n","import styled, { css } from 'styled-components';\n\nexport const DnsWizardZoneTableWrapper = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 100%;\n overflow: hidden;\n `}\n`;\n\nexport const TextWrapper = styled.div`\n ${() => css`\n display: flex;\n align-items: center;\n `}\n`;\n\nexport const IconWrapper = styled.div`\n ${({ orientation }) => {\n const rotate = orientation === 'up' ? 'rotate(0)' : 'rotate(180deg)';\n return css`\n display: flex;\n align-items: center;\n transform: ${rotate};\n `;\n }}\n`;\n\nexport const ButtonWrapper = styled.div``;\n","import styled, { css } from 'styled-components';\n\nexport const DnsWizardLegacyDnsTableWrapper = styled.div`\n ${() => css`\n margin-top: 40px;\n max-width: 100%;\n overflow: hidden;\n `}\n`;\n","import React from 'react';\nimport ZoneManager from '@/components/Dns/ZoneManager';\nimport * as Styles from './DnsWizardLegacyDnsTable.styles';\n\nfunction DnsWizardLegacyDnsTable({\n testId = 'dnswizardlegacydnstable',\n}) {\n return (\n \n \n );\n}\n\nexport default DnsWizardLegacyDnsTable;\n","import React, { useState } from 'react';\nimport * as Styles from './DnsWizardZoneTable.styles';\nimport { Button } from '@/pages/common/v1/Button';\nimport { DnsWizardLegacyDnsTable } from '../DnsWizardLegacyDnsTable';\nimport { IconArrowDownOutlined } from '@/icons';\nimport { domainsAnalytics } from '@/analytics';\nimport { v1 } from '@/styles/HgThemeProvider';\n\nconst DnsWizardZoneTable = ({\n testId = 'dnswizardzonetable',\n openText = 'Open Text',\n closeText = 'close Text',\n openDnsTable,\n setOpenDnsTable,\n setShowAdvanceDNSZoneModal,\n}) => {\n const [hoverColor, setHoverColor] = useState(v1.color.action.primary);\n\n const [alreadyOpened, setAlreadyOpened] = useState(false);\n\n const { dnsWizard: dnsWizardAnalytics } = domainsAnalytics;\n\n const {\n dnsWizardShowDnsStatsClick,\n } = dnsWizardAnalytics;\n\n const handleOpenDnsZoneTable = () => {\n if (!openDnsTable) {\n dnsWizardAnalytics.dnsWizardShowDnsZoneSettings();\n if (!alreadyOpened) {\n dnsWizardShowDnsStatsClick();\n setAlreadyOpened(true);\n }\n }\n\n const dontShowAlert = localStorage.getItem('dnsAdvancedZoneDontShowModal');\n if (dontShowAlert || openDnsTable) {\n setOpenDnsTable(!openDnsTable);\n } else {\n setShowAdvanceDNSZoneModal(true);\n }\n };\n\n const label = openDnsTable ? (\n \n {closeText}\n \n \n \n ) : (\n \n {openText}\n \n \n \n );\n\n return (\n \n setHoverColor(v1.color.white.primary)}\n onMouseLeave={() => setHoverColor(v1.color.action.primary)}\n >\n \n );\n};\n\nexport default DnsWizardZoneTable;\n","import styled, { css } from 'styled-components';\n\nexport const DnsWizardZoneRecordsHandlerWrapper = styled.div`\n overflow: hidden;\n`;\n\nexport const TextBlock = styled.div``;\n\nexport const Subtitle = styled.div`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: ${theme.font.sizes.sm};\n font-weight: ${theme.v1.font.weights.regular};\n line-height: ${theme.font.lineHeights.lg};\n margin: 16px 0px 24px 40px;\n > &:first-of-type {\n margin-top: 8px;\n }\n `}\n`;\n","import React, { useContext, useEffect } from 'react';\nimport { DnsWizardZoneTable } from '@/components/domain/components/DnsWizardZoneTable';\nimport { DnsWizardHeader } from '@/components/domain/components/DnsWizardHeader';\nimport { DnsWizardContext } from '@/contexts/DnsWizard';\nimport { useConfigurationStatus } from '@/hooks/domains/wizard';\nimport { HOSTING_PLATFORM_TYPES, PLAN_TYPES } from '@/enums/domains/dns.enum';\nimport { IconDomain } from '@/icons';\nimport * as Styles from './DnsWizardZoneRecordsHandler.styles';\n\nfunction DnsWizardZoneRecordsHandler({\n testId = 'dns-wizard-zone-records-handler',\n dnsWizardLocale = {},\n domain = {},\n scrollToDNSZoneRecords = false,\n setScrollToDNSZoneRecords,\n setShowAdvanceDNSZoneModal,\n}) {\n const { openDnsTable, setOpenDnsTable } = useContext(DnsWizardContext);\n\n const {\n configurationStatus,\n planDetails,\n platformName,\n } = domain;\n\n const {\n isConfiguredThroughWizard,\n isConfiguredInHostGator,\n } = configurationStatus;\n\n const {\n dnsZoneOpenButtonText,\n dnsZoneCloseButtonText,\n dnsZoneHeaderMessage,\n dnsZoneHeaderTitle,\n } = dnsWizardLocale;\n\n useEffect(() => {\n if (scrollToDNSZoneRecords) {\n if (!openDnsTable) {\n setOpenDnsTable(true);\n }\n\n setScrollToDNSZoneRecords && setScrollToDNSZoneRecords(false);\n\n setTimeout(() => {\n const dnsZoneRecordList = document.getElementById('dns-zone-record-button');\n dnsZoneRecordList && dnsZoneRecordList.scrollIntoView({ behavior: 'smooth' });\n }, 500);\n }\n }, [scrollToDNSZoneRecords, setScrollToDNSZoneRecords, openDnsTable, setOpenDnsTable]);\n\n const status = useConfigurationStatus(configurationStatus, platformName);\n const isPointedToCustomServer = status === HOSTING_PLATFORM_TYPES.CUSTOM;\n const shouldRenderDnsZoneTable = isConfiguredThroughWizard && isConfiguredInHostGator && !isPointedToCustomServer && planDetails.type !== PLAN_TYPES.RESALE;\n\n return shouldRenderDnsZoneTable && (\n \n \n {dnsZoneHeaderMessage && dnsZoneHeaderMessage()} \n \n \n );\n}\n\nexport default DnsWizardZoneRecordsHandler;\n","import React, { useEffect, useCallback, useState } from 'react';\nimport * as Styles from './DnsWizardPage.styles';\nimport DNSContextProvider from '@/contexts/DNS/context';\nimport { DnsWizardContextProvider } from '@/contexts/DnsWizard';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n DnsWizardDomainHandler,\n DnsWizardEmailHandler,\n DnsWizardZoneRecordsHandler,\n} from '@/components/domain/handlers';\nimport { dnsWizardActions } from '@/redux/modules/dnsWizard';\nimport useLocale from '@/hooks/useLocale';\nimport { useParams } from 'react-router-dom';\nimport { loadDnsDetails } from '@/redux/actions/dnsForward';\n\nconst DnsWizardPage = () => {\n const [isFetchingItems, setIsFetchingItems] = useState(true);\n const [scrollToDNSZoneRecords, setScrollToDNSZoneRecords] = useState(false);\n const [showAdvanceDNSZoneModal, setShowAdvanceDNSZoneModal] = useState(false);\n\n const dispatch = useDispatch();\n const { domains: domainsLocale, routes: routesLocale } = useLocale();\n const { dnsWizard: dnsWizardLocale } = domainsLocale;\n\n const { domainId } = useParams();\n const {\n domain,\n hostingPlatforms,\n controls,\n selectedConfiguration,\n hostGatorAvailablePlans,\n } = useSelector(state => state.dnsWizard);\n const {\n planDetails,\n } = domain;\n const { platforms, emailPlatforms } = hostingPlatforms;\n const { hostingPlans: availablePlans } = hostGatorAvailablePlans;\n const { planStatus } = planDetails;\n\n const fetchItems = useCallback(() => {\n if (isFetchingItems) {\n dispatch(dnsWizardActions.platforms.request(domainId));\n dispatch(loadDnsDetails(domainId));\n dispatch(dnsWizardActions.emailPlatforms.getSettedPlataform({ domainId }));\n setIsFetchingItems(false);\n }\n dispatch(dnsWizardActions.emailPlatforms.request(domainId));\n }, [dispatch, isFetchingItems, domainId]);\n\n useEffect(() => {\n fetchItems();\n }, [fetchItems]);\n\n const goToAdvancedDNSZone = () => setScrollToDNSZoneRecords(true);\n\n return (\n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default DnsWizardPage;\n","import React, {\n useContext, useEffect, useState, useMemo, useCallback,\n} from 'react';\nimport { withStyles } from '@material-ui/core';\nimport { useParams } from 'react-router';\nimport { find, propEq } from 'ramda';\nimport { useDispatch } from 'react-redux';\nimport { withI18n } from 'react-i18next';\nimport Loader from '@/components/Layout/Loader';\nimport { EmailsContext } from '@/contexts/Emails/context';\nimport { proEmailAuth } from '@/redux/actions/emails';\nimport { COUNTRY } from '@/config';\nimport { loadFaqEmails, loadFaqParam } from '@/redux/actions/faq';\nimport TitanMailTitle from './TitanMailTitle';\nimport styles from './styles';\nimport faqParams from './faqParams';\n\nconst TitanCreateEMail = ({ classes, t }) => {\n const dispatch = useDispatch();\n const { domain } = useParams();\n\n\n const { loadingProEmails, firstLoad, renderedEmailList } = useContext(EmailsContext);\n\n const loading = loadingProEmails || firstLoad;\n const planObject = useMemo(() => find(propEq('domain', domain), renderedEmailList), [domain, renderedEmailList]);\n const partnerId = process.env.REACT_APP_TITAN_PARTNER_ID;\n const titanUrl = process.env.REACT_APP_TITAN_URL;\n const [titanMailToken, setTitanMailToken] = useState(null);\n const postMessageListener = useCallback((event) => {\n if (event.data.event) {\n if (event.data.data.action === 'buyMoreAccounts') {\n window.location.href = `${t('routes.emailsList')}${t('routes.titanInboxUpgrade')}/${domain}`;\n }\n\n if (event.data.data.action === 'upgradePlan') {\n window.location.href = `${t('routes.emailsList')}${t('routes.titanUpgrade')}/${domain}`;\n }\n\n if (event.data.data.action === 'renewOrder') {\n window.location.href = `${t('routes.billing')}${t('routes.unpaid')}`;\n }\n }\n }, [domain, t]);\n\n useEffect(() => {\n if (planObject && planObject.status !== 'active') {\n window.location.href = `${t('routes.emailsList')}`;\n }\n\n dispatch(loadFaqEmails());\n\n faqParams.forEach((param) => {\n dispatch(loadFaqParam(param));\n });\n\n window.addEventListener('message', event => postMessageListener(event));\n\n if (renderedEmailList.length > 0) {\n dispatch(proEmailAuth(planObject.pro_email_id)).then((response) => {\n if (response.data) {\n setTitanMailToken(response.data.token);\n }\n });\n }\n\n return () => { window.removeEventListener('message', event => postMessageListener(event)); };\n }, [renderedEmailList, dispatch, planObject, postMessageListener, t]);\n\n\n if (loading || planObject === undefined) {\n return \n \n \n \n);\n\nexport default withStyles(styles)(TitanCreateEMail);\n","import { collect } from '@/analytics';\n\nconst EVENTS = {\n NAME: 'gaEvent',\n CATEGORY: 'Meus Dados',\n ACTION: {\n EDIT_EMAIL: 'Alteração: E-mail',\n EDIT_PHONE: 'Alteração: Celular',\n EDIT_FOREIGN: 'Ação: Sou estrangeiro',\n EDIT_BIRTHCOUNTRY: 'Alteração: País de nascimento',\n EDIT_DOCUMENT: 'Alteração: CPF/CNPJ',\n EDIT_NAME: 'Alteração: Nome Completo',\n EDIT_BIRTHDATE: 'Alteração: Data Nascimento',\n EDIT_COUNTRY: 'Alteração: País de residência',\n EDIT_CEP: 'Alteração: CEP',\n EDIT_ADDRESSNUMBER: 'Alteração: Número ou Complemento',\n EDIT_MARKETING_AGREEMENT: 'Ação: Receber novidades por e-mail',\n FIND_MY_CEP: 'Ação: Não sei meu CEP',\n CANCEL_SUBMIT: 'Ação: Cancelar',\n SAVE_SUBMIT: 'Ação: Salvar',\n EDIT_KNOWLEDGE: 'Alteração: Nível de conhecimento',\n ACCESS_MYDATA_PAGE: 'Acessos a página Meus Dados',\n },\n};\n\nconst accessMyDataPage = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTION.ACCESS_MYDATA_PAGE,\n gaEventLabel: '',\n });\n};\n\nconst editPhone = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTION.EDIT_PHONE,\n gaEventLabel: '',\n });\n};\n\nconst editEmail = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTION.EDIT_EMAIL,\n gaEventLabel: '',\n });\n};\n\nconst editForeign = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTION.EDIT_FOREIGN,\n gaEventLabel: '',\n });\n};\n\nconst editBirthCountry = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTION.EDIT_BIRTHCOUNTRY,\n gaEventLabel: '',\n });\n};\n\nconst editDocument = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTION.EDIT_DOCUMENT,\n gaEventLabel: '',\n });\n};\n\nconst editName = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTION.EDIT_NAME,\n gaEventLabel: '',\n });\n};\n\nconst editBirthDate = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTION.EDIT_BIRTHDATE,\n gaEventLabel: '',\n });\n};\n\nconst editCountry = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTION.EDIT_COUNTRY,\n gaEventLabel: '',\n });\n};\n\nconst editCEP = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTION.EDIT_CEP,\n gaEventLabel: '',\n });\n};\n\nconst editAddressNumber = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTION.EDIT_ADDRESSNUMBER,\n gaEventLabel: '',\n });\n};\n\nconst editMarketingAgreement = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTION.EDIT_MARKETING_AGREEMENT,\n gaEventLabel: '',\n });\n};\n\nconst findMyCep = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTION.FIND_MY_CEP,\n gaEventLabel: '',\n });\n};\n\nconst cancelSubmit = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTION.CANCEL_SUBMIT,\n gaEventLabel: '',\n });\n};\n\nconst submitChange = () => {\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTION.SAVE_SUBMIT,\n gaEventLabel: '',\n });\n};\n\nconst changeKnowledgeLevel = (level) => {\n let label;\n switch (level) {\n case 1:\n label = 'Iniciante';\n break;\n case 2:\n label = 'Intermediário';\n break;\n case 3:\n label = 'Técnico';\n break;\n default: break;\n }\n collect({\n event: EVENTS.NAME,\n gaEventCategory: EVENTS.CATEGORY,\n gaEventAction: EVENTS.ACTION.EDIT_KNOWLEDGE,\n gaEventLabel: label,\n });\n};\n\nconst analytics = {\n editPhone,\n editEmail,\n editForeign,\n editBirthCountry,\n editDocument,\n editName,\n editBirthDate,\n editCountry,\n editCEP,\n editAddressNumber,\n editMarketingAgreement,\n findMyCep,\n cancelSubmit,\n submitChange,\n changeKnowledgeLevel,\n accessMyDataPage,\n};\n\nexport default analytics;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n padding: 0 40px;\n\n @media (max-width: ${theme.breakpoints.md}) {\n padding: 0;\n }\n `}\n`;\n\nexport const FormWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n padding: 24px 24px 50px 24px;\n `}\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const PrivacyTitle = styled(Title)`\n margin-top: 8px;\n`;\n\nexport const Form = styled.form`\n display: flex;\n flex-wrap: wrap;\n gap: 24px 32px;\n`;\n\nexport const Label = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n\n button {\n padding-left: 3px;\n }\n `}\n`;\n\nexport const Column = styled.div`\n display: flex;\n flex-direction: column;\n flex: 1;\n gap: 24px;\n min-width: 230px;\n`;\n\nexport const Row = styled.div`\n ${({ theme, noWrap, margin }) => css`\n align-items: center;\n display: flex;\n gap: 8px;\n margin: ${margin || '0px'};\n\n @media (max-width: ${theme.breakpoints.lg}) {\n flex-wrap: ${noWrap ? 'nowrap' : 'wrap'};\n }\n `}\n`;\nexport const ButtonWrapper = styled.div`\n ${({ theme }) => css`\n width: 150px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n width: 100%;\n }\n `}\n`;\n\nexport const ButtonsWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 15px;\n justify-content: center;\n margin-top: 50px;\n width: 100%;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const SelectWrapper = styled.div`\n margin-right: 16px;\n`;\n\nexport const Loader = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.white.primary};\n display: flex;\n height: 100%;\n justify-content: center;\n left: 93px;\n opacity: 0.7;\n position: fixed;\n top: -100px;\n width: 100%;\n z-index: 2;\n\n @media (max-width: ${theme.breakpoints.md}) {\n left: 0;\n }\n `}\n`;\n\nexport const InputWrapper = styled.div`\n ${({ theme, hasError }) => css`\n flex: 1;\n min-width: auto;\n position: relative;\n\n a {\n bottom: ${hasError ? '30px' : '11px'};\n font-size: ${theme.v2.font.sizes.xxxs};\n position: absolute;\n right: 21px;\n z-index: 1;\n }\n\n @media (max-width: ${theme.breakpoints.lg}) {\n min-width: 100%;\n }\n `}\n`;\n\nexport const CheckboxWrapper = styled.button`\n${({ theme }) => css`\n background: transparent;\n border: 0px;\n\n input:checked {\n border: 2px solid ${theme.v2.colors.neutral.lowDark};\n };\n\n svg {\n display: inline-flex;\n };\n\n `}\n`;\n\nexport const CheckboxInput = styled.input`\n display: none;\n`;\n\nexport const Checkbox = styled.div`\n ${({ theme, checked }) => css`\n background-color: ${theme.v2.colors.white.primary};\n border: 2px solid ${checked ? theme.v2.colors.neutral.lowDark : theme.v2.colors.neutral.lowLight};\n borderRadius: 2px;\n cursor: pointer;\n display: flex;\n height: 19px;\n transition: all 300ms;\n width: 19px;\n\n svg {\n fill: ${theme.v2.colors.neutral.lowDark};\n stroke: ${theme.v2.colors.neutral.lowDark};\n flex: 0 0 15px;\n };\n\n &:hover {\n border: 2px solid ${theme.v2.colors.neutral.lowDark};\n color: ${theme.v2.colors.neutral.lowDark};\n };\n `}\n`;\n","import { CALL_API } from '@/middleware/api';\nimport {\n SEND_PHONE_CODE, VALIDATE_PHONE_CODE, CHANGE_PHONE_NUMBER,\n} from '@/config/api';\nimport {\n REQUEST_SEND_PHONE_CODE, RECEIVE_SEND_PHONE_CODE, ERROR_SEND_PHONE_CODE,\n REQUEST_VALIDATE_PHONE_CODE, RECEIVE_VALIDATE_PHONE_CODE, ERROR_VALIDATE_PHONE_CODE,\n REQUEST_CHANGE_PHONE_NUMBER, RECEIVE_CHANGE_PHONE_NUMBER, ERROR_CHANGE_PHONE_NUMBER, ERROR_SEND_PHONE_WRONG_PASSWORD, PHONENUMBER_CHANGE_FLOW,\n} from './actionsTypes';\n\n\nexport const receiveSendCodeVerify = data => ({\n type: RECEIVE_SEND_PHONE_CODE,\n data,\n});\n\nexport const sendPhoneCodeVerify = data => ({\n [CALL_API]: {\n statusCode: true,\n endpoint: SEND_PHONE_CODE,\n method: 'POST',\n body: data,\n actionTypes: {\n request: () => ({ type: REQUEST_SEND_PHONE_CODE }),\n success: response => receiveSendCodeVerify(response),\n error: (response) => {\n if (response.data) {\n if (response.data.internal_code === 1) {\n return ({ type: ERROR_SEND_PHONE_WRONG_PASSWORD });\n }\n }\n\n return ({ type: ERROR_SEND_PHONE_CODE });\n },\n },\n },\n});\n\nexport const receiveValidatePhoneCode = data => ({\n type: RECEIVE_VALIDATE_PHONE_CODE,\n data,\n});\n\nexport const validatePhoneCode = smsToken => ({\n [CALL_API]: {\n endpoint: VALIDATE_PHONE_CODE(smsToken),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_VALIDATE_PHONE_CODE }),\n success: response => receiveValidatePhoneCode(response),\n error: data => ({ data, type: ERROR_VALIDATE_PHONE_CODE }),\n },\n },\n});\n\nexport const receiveChangePhoneNumber = data => ({\n type: RECEIVE_CHANGE_PHONE_NUMBER,\n data,\n});\n\nexport const changePhoneNumber = data => ({\n [CALL_API]: {\n endpoint: CHANGE_PHONE_NUMBER,\n method: 'POST',\n body: data,\n actionTypes: {\n request: () => ({ type: REQUEST_CHANGE_PHONE_NUMBER }),\n success: response => receiveChangePhoneNumber(response),\n error: () => ({ type: ERROR_CHANGE_PHONE_NUMBER }),\n },\n },\n});\n\nexport const phoneNumberChangeFlow = (bool, currentUrl) => ({ type: PHONENUMBER_CHANGE_FLOW, data: { bool, currentUrl } });\n","import { CALL_API } from '@/middleware/api';\nimport { RESEND_EMAIL, CHANGE_EMAIL } from '@/config/api';\nimport {\n REQUEST_RESEND_EMAIL, RECEIVE_RESEND_EMAIL, ERROR_RESEND_EMAIL,\n REQUEST_CHANGE_EMAIL, RECEIVE_CHANGE_EMAIL, ERROR_CHANGE_EMAIL,\n EMAIL_CHANGE_FLOW,\n} from './actionsTypes';\n\nexport const receiveResendEmail = client => ({\n type: RECEIVE_RESEND_EMAIL,\n client,\n});\n\nexport const resendEmailVerify = data => ({\n [CALL_API]: {\n endpoint: RESEND_EMAIL,\n method: 'POST',\n body: data,\n actionTypes: {\n request: () => ({ type: REQUEST_RESEND_EMAIL }),\n success: response => receiveResendEmail(response),\n error: response => ({ type: ERROR_RESEND_EMAIL, client: response.response.data }),\n },\n },\n});\n\nexport const receiveChangeEmail = email => ({\n type: RECEIVE_CHANGE_EMAIL,\n email,\n});\n\nexport const changeEmailVerify = data => ({\n [CALL_API]: {\n endpoint: CHANGE_EMAIL,\n method: 'POST',\n body: data,\n actionTypes: {\n request: () => ({ type: REQUEST_CHANGE_EMAIL }),\n success: response => receiveChangeEmail(response),\n error: response => ({ type: ERROR_CHANGE_EMAIL, info: response }),\n },\n },\n});\n\nexport const emailChangeFlow = (bool, currentUrl) => ({ type: EMAIL_CHANGE_FLOW, data: { bool, currentUrl } });\n","export const CEP_URL_BY_BRAND = {\n br: 'http://www.buscacep.correios.com.br/sistemas/buscacep/',\n mx: 'https://micodigopostal.org/',\n co: 'http://visor.codigopostal.gov.co/472/visor/',\n cl: 'https://www.correos.cl/SitePages/home.aspx',\n ar: 'https://www.correoargentino.com.ar/formularios/cpa',\n pe: 'https://www.gob.pe/521-consulta-tu-codigo-postal-nacional',\n bo: 'https://correos.gob.bo/',\n cr: 'https://correos.go.cr/codigo-postal/',\n do: 'https://inposdom.gob.do/codigo-postal/',\n ec: 'https://www.codigopostal.gob.ec/',\n sv: 'https://www.listasal.info/articulos/codigo-postal-el-salvador.shtml',\n pa: 'https://www.officedepot.com.pa/officedepotPA/en/CodigosPostales',\n py: 'https://codigo-postal.org/paraguay/',\n uy: 'https://www.correo.com.uy/codigospostales',\n};\n","export const EXTERNAL_COUNTRIES_ACTING = ['MX', 'CL', 'CO'];\nexport const LATAM_COUNTRIES = ['BR', 'MX', 'CL', 'CO'];\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n padding: 0 40px;\n\n @media (max-width: ${theme.breakpoints.md}) {\n padding: 0;\n }\n `}\n`;\n\nexport const FormWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n padding: 24px 24px 50px 24px;\n `}\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const PrivacyTitle = styled(Title)`\n margin-top: 8px;\n`;\n\nexport const Form = styled.form`\n display: flex;\n flex-wrap: wrap;\n gap: 24px 48px;\n`;\n\nexport const Label = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n\n button {\n padding-left: 3px;\n }\n `}\n`;\n\nexport const Column = styled.div`\n display: flex;\n flex-direction: column;\n flex: 1;\n gap: 24px;\n min-width: 230px;\n`;\n\nexport const Row = styled.div`\n ${({ theme, noWrap, margin }) => css`\n align-items: center;\n display: flex;\n gap: 8px;\n margin: ${margin || '0px'};\n\n @media (max-width: ${theme.breakpoints.lg}) {\n flex-wrap: ${noWrap ? 'nowrap' : 'wrap'};\n }\n `}\n`;\nexport const ButtonWrapper = styled.div`\n ${({ theme }) => css`\n width: 150px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n width: 100%;\n }\n `}\n`;\n\nexport const ButtonsWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 15px;\n justify-content: center;\n margin-top: 50px;\n width: 100%;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const SelectWrapper = styled.div`\n ${({ half }) => css`\n width: ${half ? 'calc(100% - 12px)' : '100%'};\n > div {\n margin-right: 16px;\n }\n `}\n`;\n\nexport const ForeignerWrapper = styled.div`\n display: flex;\n flex-direction: row;\n gap: 24px;\n > div {\n min-width: calc(50% - 20px);\n }\n`;\n\nexport const Loader = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.white.primary};\n display: flex;\n height: 100%;\n justify-content: center;\n left: 93px;\n opacity: 0.7;\n position: fixed;\n top: -100px;\n width: 100%;\n z-index: 2;\n\n @media (max-width: ${theme.breakpoints.md}) {\n left: 0;\n }\n `}\n`;\n\nexport const InputWrapper = styled.div`\n ${({ theme, hasError, phoneInput }) => css`\n flex: 1;\n min-width: auto;\n position: relative;\n padding-right: ${phoneInput ? '15px' : 0};\n\n a {\n bottom: ${hasError ? '30px' : '11px'};\n font-size: ${theme.v2.font.sizes.xxxs};\n position: absolute;\n right: 21px;\n z-index: 1;\n }\n\n @media (max-width: ${theme.breakpoints.lg}) {\n min-width: 100%;\n }\n `}\n`;\n\nexport const CheckboxWrapper = styled.button`\n${({ theme }) => css`\n background: transparent;\n border: 0px;\n\n input:checked {\n border: 2px solid ${theme.v2.colors.neutral.lowDark};\n };\n\n svg {\n display: inline-flex;\n };\n\n `}\n`;\n\nexport const CheckboxInput = styled.input`\n display: none;\n`;\n\nexport const Checkbox = styled.div`\n ${({ theme, checked }) => css`\n background-color: ${theme.v2.colors.white.primary};\n border: 2px solid ${checked ? theme.v2.colors.neutral.lowDark : theme.v2.colors.neutral.lowLight};\n borderRadius: 2px;\n cursor: pointer;\n display: flex;\n height: 19px;\n transition: all 300ms;\n width: 19px;\n\n svg {\n fill: ${theme.v2.colors.neutral.lowDark};\n stroke: ${theme.v2.colors.neutral.lowDark};\n flex: 0 0 15px;\n };\n\n &:hover {\n border: 2px solid ${theme.v2.colors.neutral.lowDark};\n color: ${theme.v2.colors.neutral.lowDark};\n };\n `}\n`;\n","import React from 'react';\nimport * as Styles from './PersonFields.styles';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { COUNTRY } from '@/config';\nimport {\n IconCheck, Input, PhoneInput, Select,\n} from 'gatorcomponents';\n\nexport const PersonFields = ({\n myDataLocale,\n isForeigner,\n handleFormChange,\n validateField,\n formData,\n countriesSelectOptions,\n setIsCompany,\n isCompany,\n handlePhoneChange,\n handleEmailChange,\n knowledgeLevels,\n renderFlags,\n countryCode,\n}) => (\n <>\n {myDataLocale.title} \n {isBRServer && (\n handleFormChange('foreigner', !isForeigner)}>\n \n \n {isForeigner && \n \n {myDataLocale.form.foreignerLabel}\n \n )}\n\n {isBRServer && isForeigner && (\n \n \n handleFormChange('birthCountry', fieldData.value)}\n label={myDataLocale.form.birthCountryLabel}\n value={formData.birthCountry.value.name}\n placeholder={myDataLocale.form.birthCountryPlaceholder}\n testId=\"birthCountry\"\n options={countriesSelectOptions}\n withScroll\n onBlur={({ name, value }) => validateField(name, value)}\n errorMessage={formData.birthDate.error}\n />\n \n handleFormChange('document', fieldData.currentTarget.value)}\n label={isForeigner ? myDataLocale.form.documentLabel : myDataLocale.form.cpfCnpjLabel}\n value={formData.document.value}\n placeholder={myDataLocale.form.documentPlaceholder}\n testId=\"document\"\n onBlur={({ name, value }) => validateField(name, value)}\n mask={isForeigner ? 'noSpecialCharacters' : 'document'}\n errorMessage={formData.document.error}\n />\n \n )}\n {isBRServer && !isForeigner && (\n handleFormChange('document', fieldData.currentTarget.value)}\n label={isForeigner ? myDataLocale.form.documentLabel : myDataLocale.form.cpfCnpjLabel}\n value={formData.document.value}\n placeholder={myDataLocale.form.documentPlaceholder}\n testId=\"document\"\n onBlur={({ name, value }) => validateField(name, value)}\n mask={isForeigner ? 'noSpecialCharacters' : 'document'}\n errorMessage={formData.document.error}\n />\n )}\n {!isBRServer && (\n setIsCompany(!isCompany)}>\n \n \n {isCompany && \n \n {myDataLocale.form.isCompanyLabel}\n \n )}\n {!isCompany && (\n handleFormChange('name', fieldData.currentTarget.value)}\n label={myDataLocale.form.nameLabel}\n value={formData.name.value}\n placeholder={myDataLocale.form.namePlaceholder}\n testId=\"name\"\n onBlur={({ name, value }) => validateField(name, value)}\n errorMessage={formData.name.error}\n maxLength={isBRServer ? 40 : undefined}\n />\n )}\n {isCompany && (\n handleFormChange('companyName', fieldData.currentTarget.value)}\n label={myDataLocale.form.companyNameLabel}\n value={formData.companyName.value}\n placeholder={myDataLocale.form.companyNamePlaceholder}\n testId=\"companyName\"\n onBlur={({ name, value }) => validateField(name, value)}\n errorMessage={formData.companyName.error}\n maxLength={isBRServer ? 50 : undefined}\n />\n )}\n \n {!isCompany && (\n \n handleFormChange('birthDate', fieldData.currentTarget.value)}\n label={myDataLocale.form.birthDateLabel}\n value={formData.birthDate.value}\n placeholder={myDataLocale.form.birthDatePlaceholder}\n testId=\"birthDate\"\n onBlur={({ name, value }) => validateField(name, value)}\n mask=\"date\"\n maxLength={10}\n errorMessage={formData.birthDate.error}\n />\n \n )}\n {isCompany && (\n \n handleFormChange('name', fieldData.currentTarget.value)}\n label={myDataLocale.form.companyResponsible}\n value={formData.name.value}\n placeholder={myDataLocale.form.companyResponsiblePlaceholder}\n testId=\"companyResponsible\"\n onBlur={({ name, value }) => validateField(name, value)}\n errorMessage={formData.name.error}\n maxLength={isBRServer ? 40 : undefined}\n />\n \n )}\n\n \n \n \n \n handleFormChange('knowledge', fieldData.value)}\n label={myDataLocale.form.knowledgeLabel}\n value={knowledgeLevels[formData.knowledge - 1] && knowledgeLevels[formData.knowledge - 1].label}\n placeholder={myDataLocale.form.knowledgePlaceholder}\n testId=\"knowledge\"\n options={knowledgeLevels}\n withScroll\n clearValue={!knowledgeLevels[formData.knowledge - 1]}\n />\n \n \n);\n\nexport default PersonFields;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n padding: 0 40px;\n\n @media (max-width: ${theme.breakpoints.md}) {\n padding: 0;\n }\n `}\n`;\n\nexport const FormWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n padding: 24px 24px 50px 24px;\n `}\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const PrivacyTitle = styled(Title)`\n margin-top: 8px;\n`;\n\nexport const Form = styled.form`\n display: flex;\n flex-wrap: wrap;\n gap: 24px 48px;\n`;\n\nexport const Label = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n\n button {\n padding-left: 3px;\n }\n `}\n`;\n\nexport const Column = styled.div`\n display: flex;\n flex-direction: column;\n flex: 1;\n gap: 24px;\n min-width: 230px;\n`;\n\nexport const Row = styled.div`\n ${({ theme, noWrap, margin }) => css`\n align-items: center;\n display: flex;\n gap: 8px;\n margin: ${margin || '0px'};\n\n @media (max-width: ${theme.breakpoints.lg}) {\n flex-wrap: ${noWrap ? 'nowrap' : 'wrap'};\n }\n `}\n`;\nexport const ButtonWrapper = styled.div`\n ${({ theme }) => css`\n width: 150px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n width: 100%;\n }\n `}\n`;\n\nexport const ButtonsWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 15px;\n justify-content: center;\n margin-top: 50px;\n width: 100%;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const SelectWrapper = styled.div`\n margin-right: 16px;\n`;\n\nexport const Loader = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.white.primary};\n display: flex;\n height: 100%;\n justify-content: center;\n left: 93px;\n opacity: 0.7;\n position: fixed;\n top: -100px;\n width: 100%;\n z-index: 2;\n\n @media (max-width: ${theme.breakpoints.md}) {\n left: 0;\n }\n `}\n`;\n\nexport const InputWrapper = styled.div`\n ${({ theme, hasError }) => css`\n flex: 1;\n min-width: auto;\n position: relative;\n\n a {\n bottom: ${hasError ? '30px' : '11px'};\n font-size: ${theme.v2.font.sizes.xxxs};\n position: absolute;\n right: 21px;\n z-index: 1;\n }\n\n @media (max-width: ${theme.breakpoints.lg}) {\n min-width: 100%;\n }\n `}\n`;\n\nexport const CheckboxWrapper = styled.button`\n${({ theme }) => css`\n background: transparent;\n border: 0px;\n\n input:checked {\n border: 2px solid ${theme.v2.colors.neutral.lowDark};\n };\n\n svg {\n display: inline-flex;\n };\n\n `}\n`;\n\nexport const CheckboxInput = styled.input`\n display: none;\n`;\n\nexport const Checkbox = styled.div`\n ${({ theme, checked }) => css`\n background-color: ${theme.v2.colors.white.primary};\n border: 2px solid ${checked ? theme.v2.colors.neutral.lowDark : theme.v2.colors.neutral.lowLight};\n borderRadius: 2px;\n cursor: pointer;\n display: flex;\n height: 19px;\n transition: all 300ms;\n width: 19px;\n\n svg {\n fill: ${theme.v2.colors.neutral.lowDark};\n stroke: ${theme.v2.colors.neutral.lowDark};\n flex: 0 0 15px;\n };\n\n &:hover {\n border: 2px solid ${theme.v2.colors.neutral.lowDark};\n color: ${theme.v2.colors.neutral.lowDark};\n };\n `}\n`;\n","import React from 'react';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport * as Styles from './AddressFields.styles';\nimport {\n IconCheck, IconFilledInfo, Input, Link, Select, Tooltip,\n} from 'gatorcomponents';\n\nexport const AddressFields = ({\n myDataLocale,\n handleFormChange,\n formData,\n countriesSelectOptions,\n validateField,\n urlGetCep,\n findMyCepClick,\n postalCodeLength,\n brand,\n}) => (\n <>\n {myDataLocale.address} \n \n \n \n handleFormChange('country', fieldData.value)}\n label={myDataLocale.form.countryLabel}\n value={formData.country.value.name}\n placeholder={myDataLocale.form.countryPlaceholder}\n testId=\"country\"\n options={countriesSelectOptions}\n withScroll\n onBlur={({ name, value }) => validateField(name, value)}\n errorMessage={formData.country.error}\n />\n \n \n \n {isBRServer && urlGetCep && handleFormChange('postalCode', fieldData.currentTarget.value)}\n label={myDataLocale.form.postalCodeLabel}\n value={formData.postalCode.value}\n placeholder={myDataLocale.form.postalCodePlaceholder}\n testId=\"postalCode\"\n onBlur={({ name, value }) => validateField(name, value)}\n maxLength={postalCodeLength[brand]}\n errorMessage={formData.postalCode.error}\n />\n \n \n\n handleFormChange('address', fieldData.currentTarget.value)}\n label={myDataLocale.form.addressLabel}\n value={formData.address.value}\n placeholder={myDataLocale.form.addressPlaceholder}\n testId=\"address\"\n readOnly={isBRServer}\n onBlur={({ name, value }) => validateField(name, value)}\n errorMessage={formData.address.error}\n />\n\n \n \n handleFormChange('numberAndComplement', fieldData.currentTarget.value)}\n label={myDataLocale.form.numberAndComplementLabel}\n value={formData.numberAndComplement.value}\n placeholder={myDataLocale.form.numberAndComplementPlaceholder}\n testId=\"numberAndComplement\"\n onBlur={({ name, value }) => validateField(name, value)}\n errorMessage={formData.numberAndComplement.error}\n />\n \n \n handleFormChange('neighborhood', fieldData.currentTarget.value)}\n label={myDataLocale.form.neighborhoodLabel}\n value={formData.neighborhood.value}\n placeholder={myDataLocale.form.neighborhoodPlaceholder}\n testId=\"neighborhood\"\n readOnly={isBRServer}\n onBlur={({ name, value }) => validateField(name, value)}\n errorMessage={formData.neighborhood.error}\n />\n \n \n\n \n \n handleFormChange('state', fieldData.currentTarget.value)}\n label={myDataLocale.form.stateLabel}\n value={formData.state.value.name}\n placeholder={myDataLocale.form.statePlaceholder}\n testId=\"state\"\n readOnly={isBRServer}\n errorMessage={formData.state.error}\n />\n \n \n handleFormChange('city', fieldData.currentTarget.value)}\n label={myDataLocale.form.cityLabel}\n value={formData.city.value.name}\n placeholder={myDataLocale.form.cityPlaceholder}\n testId=\"city\"\n readOnly={isBRServer}\n onBlur={({ name, value }) => validateField(name, value)}\n errorMessage={formData.city.error}\n />\n \n \n\n {myDataLocale.privacy} \n \n handleFormChange('mailSubscribe', !formData.mailSubscribe)}>\n \n \n {formData.mailSubscribe && \n \n {myDataLocale.form.mailSubscribeLabel}\n \n \n \n \n \n);\n\nexport default AddressFields;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n padding: 0 40px;\n\n @media (max-width: ${theme.breakpoints.md}) {\n padding: 0;\n }\n `}\n`;\n\nexport const Form = styled.form`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n display: flex;\n flex-wrap: wrap;\n gap: 24px 32px;\n padding: 24px 24px 50px 24px;\n `};\n`;\n\nexport const Column = styled.div`\n display: flex;\n flex-direction: column;\n flex: 1;\n gap: 24px;\n min-width: 230px;\n`;\n\nexport const Row = styled.div`\n ${({ theme, noWrap, margin }) => css`\n align-items: center;\n display: flex;\n gap: 24px;\n margin: ${margin || '0px'};\n\n @media (max-width: ${theme.breakpoints.lg}) {\n flex-wrap: ${noWrap ? 'nowrap' : 'wrap'};\n }\n `}\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const PrivacyTitle = styled.div`\n margin-top: 8px;\n`;\n","import React from 'react';\nimport * as Styles from './MyDataSkeleton.styles';\nimport {\n Skeleton,\n} from 'gatorcomponents';\n\nconst MyDataSkeleton = ({ personalDataLabel, addressLabel, isBRServer }) => {\n const InputsRow = (\n \n \n );\n\n return (\n \n \n \n {personalDataLabel} \n \n\n \n {addressLabel} \n {InputsRow}\n \n \n \n \n \n );\n};\n\nexport default MyDataSkeleton;\n","import React, {\n useCallback, useEffect, useMemo, useState,\n} from 'react';\nimport * as Styles from './MyDataHandler.styles';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport {\n Button,\n} from 'gatorcomponents';\nimport { myDataAnalytics } from '@/analytics/myData';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { phoneNumberChangeFlow } from '@/redux/actions/phoneNumberVerify';\nimport { emailChangeFlow } from '@/redux/actions/emailVerify';\nimport {\n loadCitiesByCountryAndState, loadCountries, loadStatesByCountry, loadSummary, loadZipCode, updateSummary,\n} from '@/redux/actions/summary';\nimport {\n hasSpecialCharacters,\n isBRServer, maxDate, minDate, required, validateCep, validateCnpj, validateCompanyName, validateCpf, validateEmail, validatePersonName, validatePhoneBR,\n} from '@/utils/Validators/validation';\nimport { format, parse } from 'date-fns';\nimport { CEP_URL_BY_BRAND } from '@/config/urls/cepUrls';\nimport { LATAM_COUNTRIES } from '@/config/application/operatingCountriesConfig';\nimport { RECEIVE_UPDATE_SUMMARY } from '@/redux/actions/actionsTypes';\nimport { commonActions } from '@/redux/modules';\nimport ReCaptcha from '@/components/ReCaptcha';\nimport { COUNTRY, config } from '@/config';\nimport { generateRecaptchaToken, loadReCaptcha } from '@/utils/Application/reCaptcha';\nimport { postalCodeMask } from '@/utils/Masks/inputMasks';\nimport { useHistory } from 'react-router';\nimport { PersonFields } from './components/PersonFields';\nimport { AddressFields } from './components/AddressFields';\nimport MyDataSkeleton from './components/MyDataSkeleton/MyDataSkeleton';\nimport { CHARLIE_CHECKOUT_PHONEINPUT_FLAGS } from '@/config/GrowthBook/constants';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\n\nexport const defaultFormData = {\n address: { value: '', error: '' },\n numberAndComplement: { value: '', error: '' },\n birthCountry: { value: { name: '', id: 0, abbreviation: '' }, error: '' },\n birthDate: { value: '', error: '' },\n city: { value: { id: 0, name: '' }, error: '' },\n companyName: { value: '', error: '' },\n country: { value: { name: '', id: 0, abbreviation: '' }, error: '' },\n document: { value: '', error: '' },\n email: { value: '', error: '' },\n knowledge: 0,\n mailSubscribe: false,\n name: { value: '', error: '' },\n neighborhood: { value: '', error: '' },\n phone: { value: '', error: '' },\n postalCode: { value: '', error: '' },\n state: { value: { name: '', id: 0, code: '' }, error: '' },\n};\n\nconst postalCodeLength = {\n BR: 9,\n MX: 5,\n CL: 7,\n CO: 6,\n other: 30,\n};\n\nloadReCaptcha();\nconst MyDataHandler = () => {\n const history = useHistory();\n const { myData: myDataLocale } = useLocale();\n const dispatch = useDispatch();\n const summaryState = useSelector(state => state.summary);\n\n const defineInitialContryOnSelect = useCallback(() => {\n switch (COUNTRY) {\n case 'co':\n return '+57';\n case 'mx':\n return '+52';\n case 'cl':\n return '+56';\n case 'br':\n default:\n return '+55';\n }\n }, []);\n\n const [formData, setFormData] = useState(defaultFormData);\n const [userOriginalFormData, setUserOriginalFormData] = useState(defaultFormData);\n const phoneNumberCountry = useSelector(state => state.summary.phoneNumberCountry);\n const countriesCode = useSelector(state => state.countryPhoneCodes.countryCode);\n const countryCode = phoneNumberCountry ? countriesCode && countriesCode[phoneNumberCountry] && `+${countriesCode[phoneNumberCountry].code}` : defineInitialContryOnSelect();\n const [countriesSelectOptions, setCountriesSelectOptions] = useState([]);\n const [isForeigner, setIsForeigner] = useState(false);\n const [showButtons, setShowButtons] = useState(false);\n const [isCompany, setIsCompany] = useState(false);\n const [disableSubmit, setDisableSubmit] = useState(false);\n const [recaptchaToken, setRecaptchaToken] = useState(undefined);\n const [userDataMapped, setUserDataMapped] = useState(false);\n\n const renderFlags = useFeatureIsOn(CHARLIE_CHECKOUT_PHONEINPUT_FLAGS);\n\n const brand = LATAM_COUNTRIES.includes(formData.country.value.abbreviation) ? formData.country.value.abbreviation : 'other';\n const urlGetCep = brand && CEP_URL_BY_BRAND[brand.toLowerCase()];\n const knowledgeLevels = useMemo(() => [\n {\n value: 1,\n label: myDataLocale.knowledgeLevels.beginner,\n },\n {\n value: 2,\n label: myDataLocale.knowledgeLevels.intermediary,\n },\n {\n value: 3,\n label: myDataLocale.knowledgeLevels.technical,\n },\n ], [myDataLocale]);\n\n const onLoadPostalCode = useCallback(\n () => dispatch(loadZipCode(formData.postalCode.value)),\n [dispatch, formData],\n );\n\n const onLoadCountries = country => dispatch(loadCountries(country));\n\n const onLoadStatesByCountry = country => dispatch(loadStatesByCountry(country));\n\n const onLoadCitiesByCountryAndState = (country, state) => dispatch(loadCitiesByCountryAndState(country, state));\n\n const findMyCepClick = useMemo(\n () => myDataAnalytics.findMyCep(),\n [],\n );\n\n const restoreData = () => {\n setFormData(userOriginalFormData);\n setShowButtons(false);\n\n const isForeignerUser = summaryState.nationality !== 'BR';\n\n const formatCnpjCpf = value => (value.length === 11\n ? value.replace(/(\\d{3})(\\d{3})(\\d{3})(\\d{2})/g, '$1.$2.$3-$4')\n : value.replace(/(\\d{2})(\\d{3})(\\d{3})(\\d{4})(\\d{2})/g, '$1.$2.$3/$4-$5'));\n\n const document = isBRServer ? formatCnpjCpf(summaryState.document) : summaryState.document;\n\n if (((!isForeignerUser && isBRServer && document.length > 14) || (!isBRServer && summaryState.companyName))) {\n setIsCompany(true);\n }\n\n if (isForeignerUser) {\n setIsForeigner(true);\n }\n };\n\n const fieldValidations = useCallback((fieldName, fieldValue) => {\n if (!required(fieldValue)) {\n return 'required';\n }\n\n const validateDocument = (document) => {\n if (isBRServer) {\n if (!isForeigner && document.length <= 14) {\n setIsCompany(false);\n return !validateCpf(document) ? 'cpf' : false;\n }\n !isForeigner && setIsCompany(true);\n if (!isForeigner && !validateCnpj(document)) return 'cnpj';\n }\n return false;\n };\n\n const validateDate = (date) => {\n const isDate = parse(date, 'dd/MM/yyyy', new Date());\n // eslint-disable-next-line no-restricted-globals\n if (isNaN(isDate)) {\n return true;\n }\n\n const birthDateMin = minDate(date, '01/01/1900');\n const birthDateMax = maxDate(date, format(new Date(), 'dd/MM/yyyy'));\n\n return !(birthDateMin && birthDateMax);\n };\n\n const validatePhone = (phoneNumber) => {\n if (summaryState.phoneNumberCountry === 'BR') {\n return !validatePhoneBR(phoneNumber);\n }\n return false;\n };\n\n const validatePostalCode = (postalCode) => {\n if (brand === 'BR') {\n return !validateCep(postalCode);\n }\n return !required(postalCode) ? 'required' : false;\n };\n\n const validateComplement = complement => isBRServer && hasSpecialCharacters(complement);\n\n const formValidationRules = {\n birthDate: validateDate,\n cep: validateCep,\n document: validateDocument,\n email: value => !validateEmail(value),\n name: value => !validatePersonName(value),\n companyName: value => !validateCompanyName(value),\n phone: validatePhone,\n postalCode: validatePostalCode,\n numberAndComplement: validateComplement,\n required: value => (!required(value) ? 'required' : false),\n };\n\n return formValidationRules[fieldName] ? formValidationRules[fieldName](fieldValue) : formValidationRules.required(fieldValue);\n }, [brand, isForeigner, summaryState]);\n\n const verifyFormErrorBeforeSubmit = useCallback(() => {\n let hasError = false;\n Object.keys(formData).forEach((key) => {\n switch (key) {\n case 'address':\n case 'email':\n case 'name':\n case 'neighborhood':\n case 'numberAndComplement':\n case 'phone':\n case 'postalCode':\n if (fieldValidations(key, formData[key].value)) {\n hasError = true;\n }\n break;\n case 'document':\n if (isBRServer && fieldValidations(key, formData[key].value)) {\n hasError = true;\n }\n break;\n case 'companyName':\n if (isCompany) {\n if (fieldValidations(key, formData[key].value)) {\n hasError = true;\n }\n }\n break;\n case 'birthDate':\n if (!isCompany) {\n if (fieldValidations(key, formData[key].value)) {\n hasError = true;\n }\n }\n break;\n case 'birthCountry':\n if (isForeigner && isBRServer) {\n if (fieldValidations(key, formData[key].value.name)) {\n hasError = true;\n }\n }\n break;\n case 'city':\n case 'country':\n case 'state':\n if (fieldValidations(key, formData[key].value.name)) {\n hasError = true;\n }\n break;\n default:\n }\n });\n\n return hasError;\n }, [fieldValidations, formData, isCompany, isForeigner]);\n\n const validateField = useCallback((fieldName, fieldValue) => {\n const validationError = fieldValidations(fieldName, fieldValue);\n const newFormData = formData;\n\n if (fieldName === 'postalCode' && !validationError && isBRServer) {\n onLoadPostalCode();\n }\n\n if (validationError) {\n setDisableSubmit(true);\n newFormData[fieldName] = { ...newFormData[fieldName], error: myDataLocale.errors[typeof validationError === 'boolean' ? fieldName : validationError] };\n } else {\n newFormData[fieldName] = { ...newFormData[fieldName], error: '' };\n\n if (disableSubmit) {\n const stillHasError = verifyFormErrorBeforeSubmit();\n\n if (!stillHasError) {\n setDisableSubmit(false);\n }\n }\n }\n\n setFormData(() => ({ ...newFormData }));\n }, [\n disableSubmit,\n fieldValidations,\n formData,\n myDataLocale,\n onLoadPostalCode,\n verifyFormErrorBeforeSubmit,\n ]);\n\n const handleFormChange = useCallback((fieldName, fieldValue) => {\n if (!showButtons) {\n setShowButtons(true);\n }\n const newFormData = { ...formData };\n\n switch (fieldName) {\n case 'birthCountry':\n case 'country':\n newFormData[fieldName] = { ...newFormData[fieldName], value: summaryState.locationData.countries.find(contry => contry.id === fieldValue) };\n break;\n case 'numberAndComplement':\n case 'birthDate':\n case 'companyName':\n case 'document':\n case 'name':\n case 'phone':\n case 'neighborhood':\n case 'address':\n newFormData[fieldName] = { ...newFormData[fieldName], value: fieldValue };\n break;\n case 'state': {\n if (formData.country.value.abbreviation !== 'BR') {\n const statesArray = (summaryState.locationData && summaryState.locationData.states) || [];\n const state = statesArray.find(singleState => singleState.code === fieldValue) || { name: fieldValue, id: 0, abbreviation: '' };\n newFormData[fieldName] = { ...newFormData[fieldName], value: { ...state } };\n }\n break;\n }\n case 'city': {\n if (formData.country.value.abbreviation !== 'BR') {\n const citiesArray = (summaryState.locationData && summaryState.locationData.cities) || [];\n const city = citiesArray.find(singleCity => singleCity.name === fieldValue) || { id: 0, name: fieldValue };\n newFormData[fieldName] = { ...newFormData[fieldName], value: { ...city } };\n }\n break;\n }\n case 'postalCode':\n newFormData[fieldName] = { ...newFormData[fieldName], value: postalCodeMask[brand](fieldValue) };\n break;\n case 'knowledge':\n case 'mailSubscribe':\n newFormData[fieldName] = fieldValue;\n break;\n case 'foreigner':\n setIsForeigner(fieldValue);\n break;\n default:\n }\n if (newFormData[fieldName] && newFormData[fieldName].error) {\n const hasError = fieldValidations(fieldName, fieldValue);\n if (!hasError) {\n newFormData[fieldName] = { ...newFormData[fieldName], error: '' };\n }\n }\n setFormData(newFormData);\n }, [\n brand,\n fieldValidations,\n formData,\n showButtons,\n summaryState,\n ]);\n\n const handlePhoneChange = useCallback(() => {\n const currentUrl = history.location.pathname;\n dispatch(phoneNumberChangeFlow(true, currentUrl));\n myDataAnalytics.editPhone();\n }, [dispatch, history]);\n\n const handleEmailChange = useCallback(() => {\n const currentUrl = history.location.pathname;\n dispatch(emailChangeFlow(true, currentUrl));\n myDataAnalytics.editEmail();\n }, [dispatch, history]);\n\n const verifyCallbackTokenreCaptcha = token => setRecaptchaToken(token);\n\n const handleSubmitNewUserData = async (event) => {\n event.preventDefault();\n myDataAnalytics.submitChange();\n const hasFormErrors = verifyFormErrorBeforeSubmit();\n\n if (hasFormErrors) {\n setDisableSubmit(true);\n Object.keys(formData).forEach((key) => {\n if (key !== 'knowledge' && key !== 'mailSubscribe') {\n const keyValue = formData[key].value;\n validateField(key, keyValue);\n }\n if (key === 'city' || key === 'state' || key === 'country') {\n const keyValue = formData[key].value.name;\n validateField(key, keyValue);\n }\n if (key === 'birthCountry' && isForeigner && isBRServer) {\n const keyValue = formData[key].value.name;\n validateField(key, keyValue);\n }\n });\n return;\n }\n\n await generateRecaptchaToken(config.RECAPTCHA_SITE_KEY, 'mydatapage').then((token) => {\n verifyCallbackTokenreCaptcha(token);\n });\n\n if (!summaryState.loadingUpdateSummary) {\n const phoneNumber = summaryState.phoneNumber.replace(/\\D/g, '');\n\n const newUserData = {\n address1: formData.address.value,\n address2: formData.neighborhood.value,\n address3: formData.numberAndComplement.value,\n birthDate: (formData.birthDate && formData.birthDate.value),\n city: formData.city.value.name,\n companyName: formData.companyName.value,\n country: formData.country.value.abbreviation,\n document: formData.document.value,\n email: summaryState.email,\n emailMarketingAgreement: formData.mailSubscribe,\n id: summaryState.id,\n name: formData.name.value,\n nationality: isForeigner ? formData.birthCountry.value.abbreviation : summaryState.nationality,\n persona: formData.knowledge,\n phoneNumber,\n phoneNumberCountry: summaryState.phoneNumberCountry,\n postCode: formData.postalCode.value,\n recaptcha: recaptchaToken,\n state: (formData.state.value && formData.state.value.code) || (formData.state.value && formData.state.value.name),\n stateName: (formData.state.value && formData.state.value.name) || '',\n };\n\n dispatch(updateSummary(newUserData)).then((res) => {\n if (res.type === RECEIVE_UPDATE_SUMMARY) {\n dispatch(commonActions.notifications.set({\n label: (\n {myDataLocale.snackBar.updateSuccess}
\n ),\n type: 'success',\n }));\n\n dispatch(loadSummary());\n } else {\n if (res.data && (res.data.description === 'Duplicate Email Address')) {\n dispatch(commonActions.notifications.set({\n label: (\n {myDataLocale.snackBar.emailAlreadyExists}
\n ),\n type: 'error',\n }));\n\n\n return;\n }\n dispatch(commonActions.notifications.set({\n label: (\n {myDataLocale.snackBar.updateError}
\n ),\n type: 'error',\n }));\n }\n });\n }\n };\n\n const getPersonFieldsProps = useCallback(() => ({\n myDataLocale,\n isForeigner,\n handleFormChange,\n validateField,\n formData,\n countriesSelectOptions,\n setIsCompany,\n isCompany,\n handlePhoneChange,\n handleEmailChange,\n knowledgeLevels,\n renderFlags,\n countryCode,\n }), [\n myDataLocale,\n isForeigner,\n handleFormChange,\n validateField,\n formData,\n countriesSelectOptions,\n setIsCompany,\n isCompany,\n handlePhoneChange,\n handleEmailChange,\n knowledgeLevels,\n renderFlags,\n countryCode,\n ]);\n\n const getAddressFieldsProps = useCallback(() => ({\n myDataLocale,\n handleFormChange,\n formData,\n countriesSelectOptions,\n validateField,\n urlGetCep,\n findMyCepClick,\n postalCodeLength,\n brand,\n }), [\n myDataLocale,\n handleFormChange,\n formData,\n countriesSelectOptions,\n validateField,\n urlGetCep,\n findMyCepClick,\n brand,\n ]);\n\n useEffect(() => {\n dispatch(loadSummary());\n }, [dispatch]);\n\n useEffect(() => {\n // load user address data and populate form\n onLoadCountries(summaryState.country).then((countries) => {\n onLoadStatesByCountry(summaryState.country).then((states) => {\n onLoadCitiesByCountryAndState(summaryState.country, summaryState.state).then((cities) => {\n const countriesArray = (Array.isArray(countries.data) && countries.data) || summaryState.locationData.countries;\n const statesArray = (Array.isArray(states.data) && states.data) || summaryState.locationData.states;\n const citiesArray = (Array.isArray(cities.data) && cities.data) || summaryState.locationData.cities;\n const country = countriesArray && countriesArray.find(singleCountry => singleCountry.abbreviation === summaryState.country);\n const state = (statesArray && statesArray.find(singleState => singleState.code === summaryState.state)) || { name: summaryState.state, id: 0, abbreviation: '' };\n\n const city = (citiesArray && citiesArray.find(singleCity => singleCity.name === summaryState.city)) || { id: 0, name: summaryState.city };\n const birthCountry = countries.data && countries.data.find(singleCountry => singleCountry.abbreviation === summaryState.nationality);\n const isForeignerUser = summaryState.nationality !== 'BR';\n\n if (isForeignerUser) {\n setIsForeigner(true);\n }\n\n const formatCnpjCpf = value => (value.length === 11\n ? value.replace(/(\\d{3})(\\d{3})(\\d{3})(\\d{2})/g, '$1.$2.$3-$4')\n : value.replace(/(\\d{2})(\\d{3})(\\d{3})(\\d{4})(\\d{2})/g, '$1.$2.$3/$4-$5'));\n\n const document = isBRServer ? formatCnpjCpf(summaryState.document) : summaryState.document;\n\n if (((!isForeigner && isBRServer && document.length > 14) || (!isBRServer && summaryState.companyName))) {\n setIsCompany(true);\n }\n\n const isLatamBrand = country && LATAM_COUNTRIES.includes(country.abbreviation);\n\n\n const originalFormData = {\n ...formData,\n address: summaryState.address1 ? { value: summaryState.address1, error: '' } : formData.address,\n birthCountry: isForeignerUser && birthCountry ? { value: birthCountry, error: '' } : formData.birthCountry,\n birthDate: summaryState.birthDate ? { value: summaryState.birthDate, error: '' } : formData.birthDate,\n city: city && city.name ? { value: city, error: '' } : formData.city,\n country: country && country.name ? { value: country, error: '' } : formData.country,\n companyName: summaryState.companyName ? { value: summaryState.companyName, error: '' } : formData.companyName,\n document: document ? { value: document, error: '' } : formData.document,\n email: summaryState.email ? { value: summaryState.email, error: '' } : formData.email,\n knowledge: summaryState.persona,\n mailSubscribe: summaryState.emailMarketingAgreement,\n name: summaryState.firstname || summaryState.lastname ? { value: `${summaryState.firstname || ''} ${summaryState.lastname || ''}`, error: '' } : formData.name,\n neighborhood: summaryState.address2 ? { value: summaryState.address2, error: '' } : formData.neighborhood,\n numberAndComplement: summaryState.address3 ? { value: summaryState.address3, error: '' } : formData.numberAndComplement,\n phone: summaryState.phoneNumber ? { value: summaryState.phoneNumber, error: '' } : formData.phone,\n postalCode: summaryState.postCode ? { value: postalCodeMask[isLatamBrand ? country.abbreviation : 'other'](summaryState.postCode), error: '' } : formData.postalCode,\n state: state && state.name ? { value: state, error: '' } : formData.state,\n };\n\n setFormData(originalFormData);\n setUserOriginalFormData(originalFormData);\n setUserDataMapped(true);\n });\n });\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (userDataMapped) {\n setFormData({\n ...formData,\n phone: { value: summaryState.phoneNumber, error: '' },\n email: { value: summaryState.email, error: '' },\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [summaryState.phoneNumber, summaryState.email, userDataMapped]);\n\n useEffect(() => {\n // mount select options\n if (summaryState.locationData.countries && summaryState.locationData.countries.length) {\n const countriesOptionsArray = summaryState.locationData.countries.map(country => ({\n value: country.id,\n label: country.name,\n }));\n\n setCountriesSelectOptions(countriesOptionsArray);\n }\n }, [summaryState.locationData.countries]);\n\n useEffect(() => {\n // search address by postal code\n const { addressesByZipCodeSearch, states } = summaryState.locationData;\n if (addressesByZipCodeSearch) {\n const {\n postCode, address1, address2, state, city,\n } = addressesByZipCodeSearch;\n\n if (postCode && state && states) {\n onLoadCitiesByCountryAndState(formData.country.value.abbreviation, state).then((cities) => {\n const citySearched = city && cities.data ? cities.data.find(singleCity => singleCity.name === city) : defaultFormData.city;\n const stateSearched = state ? states.find(singleState => singleState.code === state) : defaultFormData.state;\n\n setFormData(actualFormData => ({\n ...actualFormData,\n address: { value: address1, error: '' },\n neighborhood: { value: address2, error: '' },\n city: { value: citySearched, error: '' },\n state: { value: stateSearched, error: '' },\n }));\n });\n }\n }\n\n if (addressesByZipCodeSearch === null) {\n setFormData(actualFormData => ({\n ...actualFormData,\n address: { ...defaultFormData.address, error: myDataLocale.errors.required },\n neighborhood: { ...defaultFormData.neighborhood, error: myDataLocale.errors.required },\n city: { ...defaultFormData.city, error: myDataLocale.errors.required },\n postalCode: { ...defaultFormData.postalCode, error: myDataLocale.errors.postalCode },\n state: { ...defaultFormData.state, error: myDataLocale.errors.required },\n }));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [summaryState.locationData.addressesByZipCodeSearch]);\n\n useEffect(() => {\n // if check/uncheck isForeigner revalidate it\n if (formData.document.value) {\n validateField('document', formData.document.value);\n }\n\n if (isForeigner) {\n setIsCompany(false);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isForeigner]);\n\n const shouldRenderLoading = (summaryState.loadingZipCode || summaryState.loadingStates || summaryState.loadingCountries || summaryState.loadingCities);\n\n if (shouldRenderLoading) {\n return \n \n handleSubmitNewUserData(e)}>\n \n \n\n \n \n\n {!!showButtons && (\n \n \n )}\n \n\n \n \n \n \n );\n};\n\nexport default MyDataHandler;\n","import React, { useEffect } from 'react';\nimport { myDataAnalytics } from '@/analytics/myData';\nimport MyDataHandler from '../MyDataHandler/MyDataHandler';\n\nconst MyDataWrapper = () => {\n useEffect(() => {\n myDataAnalytics.accessMyDataPage();\n }, []);\n\n return (\n \n {title} \n\n \n \n \n\n \n \n \n \n {partnership}\n \n\n \n \n\n \n {mainTaxPrice}\n \n\n \n {mensality}\n \n \n\n \n \n {tax.map(tax => (\n \n {tax(onClickTaxes)}\n \n ))}\n \n \n \n\n \n \n \n {secondSectionTitle}\n \n\n \n {secondSectionDescription}\n \n\n \n moveScreenToTop()}\n />\n \n\n \n\n \n \n \n \n);\n\nexport default AsaasSecondRow;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.section`\n${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v1.color.white.primary};\n display: flex;\n flex-direction: column;\n padding: 0px 20px 40px 20px;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n padding: 32px 16px;\n }\n `}\n`;\n\nexport const Title = styled.h3`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 24px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 32px;\n margin: 40px 0px 62px 0px;\n text-align: center;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n margin: 0px 0px 40px 0px;\n max-width: 322px;\n }\n `}\n`;\n\nexport const BenefitsWrapper = styled.ul`\n ${({ theme }) => css`\n align-items: baseline;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap:10px;\n justify-content: space-around;\n margin: 0px 0px 60px 0px;\n padding:0px;\n width: 100%;\n\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n align-items: center;\n flex-direction: column;\n gap: 20px;\n margin: 0px 0px 40px 0px;\n }\n `}\n`;\n\nexport const BenefitWrapper = styled.li`\n align-items: center;\n display: flex;\n flex-direction: column;\n`;\n\nexport const BenefitTitle = styled.h6`\n ${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 21px;\n margin: 20px 0px 0px 0px;\n max-width: 234px;\n text-align: center;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n font-size: 20px;\n max-width: 323px;\n }\n `}\n`;\n\nexport const BenefitDescription = styled.p`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 21px;\n margin: 16px 0px 0px 0px;\n max-width:220px;\n text-align: center;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n font-size: 14px;\n line-height: 18px;\n max-width: 322px;\n }\n `}\n`;\n\nexport const Logo = styled.img`\n margin-bottom: 16px;\n`;\n\nexport const ErpTitle = styled.h5`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 20px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 27px;\n margin: 0px;\n text-align: center;\n\n @media (max-width: ${theme.v1.breakpoints.md}) {\n max-width: 500px;\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n max-width: 323px;\n }\n `}\n`;\n\nexport const ErpDescription = styled.p`\n${({ theme }) => css`\n color: ${theme.v1.color.text.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 22px;\n max-width: 808px;\n text-align: center;\n margin: 16px 0px 16px;\n span {\n font-weight: bold;\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n font-size: 14px;\n max-width: 500px;\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n max-width: 320px;\n }\n `}\n`;\n\nexport const RowButtonWrapper = styled.div``;\n","import React from 'react';\nimport * as Styles from './AsaasThirdRow.styles';\nimport baseLogo from '@/media/asaas/base-logo.svg';\nimport { IconDetailedPay } from '@/icons/IconDetailedPay';\nimport { IconDetailedCheck } from '@/icons/IconDetailedCheck';\nimport { IconDetailedComputer } from '@/icons/IconDetailedComputer';\nimport { IconDetailedPhone } from '@/icons/IconDetailedPhone';\n\nconst AsaasThirdRow = ({\n testId = 'asaas-third-row',\n title = 'title',\n benefits = [\n {\n icon: \n \n {title}\n \n\n \n {benefits.map((benefit, index) => (\n \n {benefit.icon}\n \n {benefit.title}\n \n \n {benefit.description}\n \n \n ))}\n \n\n \n {erpTitle}\n \n\n \n {erpDescription}\n \n \n);\n\nexport default AsaasThirdRow;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.section`\n${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v1.color.background.marketingBanner};\n display: flex;\n justify-content: space-between;\n gap: 72px;\n padding: 42px 40px;\n @media (max-width: ${theme.v1.breakpoints.lg}) {\n gap: 20px;\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n flex-direction: column;\n gap: 26px;\n padding: 32px 0px;\n }\n `}\n`;\n\nexport const ContentWrapper = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const Title = styled.h3`\n${({ theme }) => css`\n color: ${theme.v1.color.white.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 30px;\n font-weight: ${theme.v1.font.weights.bold};\n line-height: 40px;\n margin: 0px 0px 8px 0px;\n max-width: 443px;\n text-align: left;\n @media (max-width: ${theme.v1.breakpoints.md}) {\n font-size: 20px;\n max-width: 324px;\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n line-height: 27px;\n margin: 0px 0px 16px 0px;\n text-align: center;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ theme }) => css`\n margin-bottom: 24px;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n display: flex;\n justify-content: center;\n margin-bottom: 0px;\n order: 3;\n width: 100%;\n }\n > button {\n width: 170px;\n }\n `}\n`;\nexport const Description = styled.p`\n${({ theme }) => css`\n color: ${theme.v1.color.white.primary};\n font-family: ${theme.v1.font.family.primary};\n font-size: 16px;\n font-weight: ${theme.v1.font.weights.regular};\n line-height: 22px;\n margin: 0px 0px 40px 0px;\n max-width: 552px;\n text-align: left;\n span {\n font-weight: bold;\n }\n @media (max-width: ${theme.v1.breakpoints.md}) {\n font-size: 14px;\n max-width: 307px;\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n line-height: 19px;\n text-align: center;\n }\n `}\n`;\n\nexport const RaImage = styled.img`\n ${({ theme }) => css`\n height: 48px;\n width: 94px;\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n display: none;\n }\n `}\n`;\n\n\nexport const BannerSnappy = styled.img`\n${({ theme }) => css`\n @media (max-width: ${theme.v1.breakpoints.md}) {\n width: 300px;\n }\n @media (max-width: ${theme.v1.breakpoints.sm}) {\n width: 220px;\n }\n `}\n`;\n","import React from 'react';\nimport { Button } from '@/pages/common/v1/Button';\nimport * as Styles from './AsaasFourthRow.styles';\nimport bannerSnappy from '@/media/asaas/snappy-banner.svg';\nimport ra100 from '@/media/asaas/ra100.svg';\n\nconst AsaasFourthRow = ({\n testId = 'asaas-fourth-row',\n title = 'title',\n description = 'description sample',\n buttonLabel = 'button label',\n moveScreenToTop,\n}) => (\n \n \n \n moveScreenToTop()}\n variant=\"secondary\"\n customStyles={{\n backColor: 'transparent',\n }}\n />\n \n {title} \n \n {description}\n \n \n \n);\n\nexport default AsaasFourthRow;\n","import React, { useEffect } from 'react';\nimport * as Styles from './AsaasHandler.styles';\nimport { Header } from '@/pages/common';\nimport useLocale from '@/hooks/useLocale';\nimport { AsaasSecondRow } from './components/AsaasSecondRow';\nimport { AsaasFirstRow } from './components/AsaasFirstRow';\nimport Loader from '@/components/Layout/Loader';\nimport { AsaasThirdRow } from './components/AsaasThirdRow';\nimport { IconDetailedPay } from '@/icons/IconDetailedPay';\nimport { IconDetailedCheck } from '@/icons/IconDetailedCheck';\nimport { IconDetailedComputer } from '@/icons/IconDetailedComputer';\nimport { IconDetailedPhone } from '@/icons/IconDetailedPhone';\nimport { useSelector } from 'react-redux';\nimport { AsaasFourthRow } from './components/AsaasFourthRow';\nimport { asaasAnalytics } from '@/analytics/asaas';\nimport { AsaasCreateAccountModal } from './components/AsaasCreateAccountModal';\nimport { useAsaasRegisterForm } from '@/hooks/asaas/useAsaasRegisterForm';\nimport PageMessages from '@/pages/common/PageMessages';\n\nconst AsaasHandler = () => {\n const { asaas: asaasLocale } = useLocale();\n const summary = useSelector(state => state.summary);\n const { loading: displayCreateAccountModal, accountCreated } = useSelector(state => state.asaas);\n\n const {\n formData,\n loadingCep,\n resetForm,\n getCep,\n onChange,\n onContinue,\n enabledFormOpenAccountContinue,\n enabledMainDataContinue,\n onGoback,\n onSubmit,\n cnpjTypes,\n callformStepTwoMyCEP,\n } = useAsaasRegisterForm({ summary });\n\n const moveScreenToTop = () => {\n asaasAnalytics.anchorLink();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n };\n\n useEffect(() => {\n getCep(formData.fields.cep.value);\n }, [getCep, formData.fields.cep.value]);\n\n const firstRowProps = () => {\n const defaultProps = {\n title: asaasLocale.lp.firstRow.title(),\n description: asaasLocale.lp.firstRow.description(),\n formData,\n accountCreated,\n onChange,\n onContinue,\n loadingCep,\n enabledFormOpenAccountContinue,\n enabledMainDataContinue,\n onGoback,\n onSubmit,\n resetForm,\n cnpjTypes,\n callformStepTwoMyCEP,\n };\n\n const { imageItems } = asaasLocale.lp.firstRow;\n let descriptionImageAlt = '';\n imageItems.forEach((item, idx) => {\n descriptionImageAlt += (idx + 1) < imageItems.length ? `${item}, ` : item;\n });\n\n return {\n ...defaultProps,\n descriptionImageAlt,\n imageItems,\n };\n };\n\n const secondRowProps = () => {\n const defaultProps = {\n title: asaasLocale.lp.secondRow.title,\n secondSectionTitle: asaasLocale.lp.secondRow.advantagesTitle(),\n secondSectionDescription: asaasLocale.lp.secondRow.advantagesText(),\n secondSectionButtonLabel: asaasLocale.lp.secondRow.buttonLabel,\n partnership: asaasLocale.lp.secondRow.AsaasHG,\n mainTaxPrice: asaasLocale.lp.secondRow.mainTaxPrice,\n mensality: asaasLocale.lp.secondRow.mensality,\n tax: [\n asaasLocale.lp.secondRow.tax.pix,\n asaasLocale.lp.secondRow.tax.billet,\n asaasLocale.lp.secondRow.tax.creditCard,\n asaasLocale.lp.secondRow.tax.others,\n ],\n moveScreenToTop,\n };\n\n const onClickTaxes = () => {\n asaasAnalytics.taxesMaterial();\n };\n\n return { ...defaultProps, onClickTaxes };\n };\n\n const thirdRowProps = () => {\n const defaultProps = {\n title: asaasLocale.lp.thirdRow.title,\n erpTitle: asaasLocale.lp.thirdRow.erpTitle,\n erpDescription: asaasLocale.lp.thirdRow.erpDescription(),\n benefits: [\n {\n icon: \n \n \n\n \n\n {displayCreateAccountModal && (\n \n {title} \n {description} \n \n \n \n\n \n {alertDescription}\n \n \n\n {proceedAlertDescription && (\n \n \n {proceedAlertDescription}\n \n \n )}\n\n \n \n\n {backupStatus === BackupGenerationStatus.SUCCESS && (\n \n);\n\nexport default Create;\n","import styled, { css } from 'styled-components';\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 32px 0px 0px;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px 0px 0px;\n `}\n`;\n\nexport const LogsWrapper = styled.div`\n ${({ theme }) => css`\n border-top: 1px solid ${theme.v2.colors.feedback.canceledPure};\n display: flex;\n flex-drection: column;\n flex-wrap: wrap;\n margin: 16px 0px 0px;\n `}\n`;\n\nexport const LoadingWrapper = styled.div`\n ${({ theme }) => css`\n background: ${theme.v2.colors.white.primary};\n display: flex;\n flex-direction: column;\n padding: 32px 16px 16px;\n `}\n`;\n\nexport const Log = styled.div`\n ${({ theme }) => css`\n align-items: center;\n border-bottom: 1px solid ${theme.v2.colors.feedback.canceledPure};\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n flex: 1 0 100%;\n gap: 30px;\n padding: 25px 0px 22px;\n\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n gap: 24px 0px;\n }\n `}\n`;\n\nexport const NameWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n justify-content: center;\n max-width: 240px;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n max-width: 50%;\n }\n `}\n`;\n\nexport const LogName = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `}\n`;\n\nexport const LogDate = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n display: block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 4px 0px 0px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `}\n`;\n\nexport const StatusWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n justify-content: center;\n max-width: 194px;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n align-items: flex-end;\n max-width: 50%;\n }\n `}\n`;\n\nexport const InfoWrapper = styled.div`\n display: flex;\n flex-direction: row;\n max-width: 600px;\n width: 100%;\n align-items: center;\n\n svg {\n flex-shrink: 0;\n margin: 0px 16px 0px 0px;\n }\n`;\n\nexport const InfoText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n\n span, strong {\n display: inline-block;\n }\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n margin-left: 5px;\n }\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n display: flex;\n justify-content: center;\n margin: 32px 0px 8px;\n`;\n","import {\n Button, IconCheck, IconDanger, IconLoading, Tag,\n} from 'gatorcomponents';\nimport * as Styles from './Log.styles';\nimport React from 'react';\nimport { differenceInCalendarDays, format } from 'date-fns';\n\nconst Log = ({\n history = [],\n page = 1,\n itemsPerPage = 10,\n loadMore = () => { },\n title = 'title',\n description = 'description',\n tagSuccess = 'completed',\n mountInfoSuccess,\n mountInfoWarning,\n mountInfoEmpty,\n mountInfoError,\n loadMoreLabel = 'more',\n tagWarning,\n tagError,\n loadingLog,\n currentProduct,\n goToCPanel,\n}) => {\n const getDate = (backup) => {\n const createdAt = new Date(backup && backup.created_at);\n const today = new Date();\n const diff = differenceInCalendarDays(today, createdAt);\n return diff;\n };\n\n const handleLoadMore = () => {\n loadMore && loadMore();\n };\n\n const daysToShow = (days) => {\n if (days > 7 && days <= 15) {\n return 7;\n }\n if (days > 15 && days <= 30) {\n return 15;\n }\n if (days > 30) {\n return 30;\n }\n };\n\n const mountMessage = (log) => {\n if (!log) {\n return mountInfoEmpty(goToCPanel);\n }\n\n if (log.status === 'error') {\n return mountInfoError(goToCPanel);\n }\n\n if (log.status === 'completed') {\n const dateDiff = getDate(log);\n\n if (dateDiff < 7) {\n return mountInfoSuccess(\n format(new Date(log.created_at), 'dd/MM/yyyy'),\n );\n }\n return mountInfoWarning(daysToShow(dateDiff), goToCPanel);\n }\n };\n\n const mountIcon = (log) => {\n if (!log || (log && log.status === 'error')) {\n return \n \n \n {currentProduct.productname}\n \n \n {currentProduct.domain}\n \n \n\n \n {mountTag(log)}\n \n\n \n {mountIcon(log)}\n \n {mountMessage(log)}\n \n \n \n );\n\n if (loadingLog || !currentProduct) {\n return (\n \n \n );\n }\n\n return (\n <>\n {title} \n \n {description}\n \n\n \n {history.length ? (\n history.slice(0, (page * itemsPerPage)).map(log => (\n mountCard(log)\n ))\n ) : (\n mountCard()\n )}\n \n\n {history.length > (page * itemsPerPage) && (\n \n \n )}\n \n );\n};\n\nexport default Log;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n background: white;\n display: flex;\n flex-direction: column;\n font-family: ${theme.v1.font.family.primary};\n gap: 16px;\n\n strong {\n font-weight: ${theme.v1.font.weights.medium};\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n margin-bottom: 40px;\n }\n `}\n`;\n\nexport const LoadingWrapper = styled.div`\n ${({ theme }) => css`\n background: ${theme.v2.colors.white.primary};\n display: flex;\n flex-direction: column;\n padding: 32px 16px 16px;\n `}\n`;\n\nexport const FaqTextContainer = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 14px;\n font-weight: 400;\n margin: 0;\n\n span {\n display: flex;\n margin: 0;\n padding: 0 8px 0 12px;\n font-weight: 500;\n user-select: none;\n }\n\n section {\n display: flex;\n margin-top: 8px;\n }\n\n li {\n margin-left: 12px;\n }\n\n a {\n font-size: 14px;\n }\n `}\n`;\n\nexport const FaqTextParagraph = styled.div`\n ${() => css`\n display: flex;\n margin-top: 8px;\n `}\n`;\n\nexport const FaqTextListNumber = styled.div`\n ${() => css`\n display: flex;\n margin: 0;\n padding: 0 8px 0 12px;\n font-weight: 500;\n user-select: none;\n `}\n`;\n\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 32px 0px 0px;\n `}\n`;\n\nexport const Text = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-weight: 400;\n margin: 0;\n `}\n`;\n\nexport const DescriptionText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 14px;\n font-weight: 400;\n margin: 0;\n `}\n`;\n\nexport const SecondaryText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-size: 12px;\n font-weight: 500;\n margin-top: 4px;\n margin-bottom: 0;\n `}\n`;\n\nexport const BackupInfoContainer = styled.div`\n ${({ theme }) => css`\n align-items: center;\n border-bottom: 1px solid ${theme.v2.colors.feedback.canceledPure};\n border-top: 1px solid ${theme.v2.colors.feedback.canceledPure};\n display: flex;\n justify-content: space-between;\n margin: 8px 0;\n padding: 24px 0;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n flex-direction: column;\n gap: 24px;\n }\n `}\n`;\n\nexport const InfoContainer = styled.div`\n ${() => css`\n display: flex;\n width: 100%;\n justify-content: space-between;\n `}\n`;\n\nexport const InfoBox = styled.div`\n ${({ theme }) => css`\n align-items: center;\n border-bottom: 1px solid ${theme.v2.colors.feedback.canceledPure};\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n flex: 1 0 100%;\n gap: 30px;\n padding: 25px 0px 22px;\n\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n gap: 24px 0px;\n }\n `}\n`;\n\nexport const PlanInfoWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n justify-content: initial;\n gap: 12px;\n max-width: 240px;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n max-width: 50%;\n }\n `}\n`;\n\nexport const NameWrapper = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n`;\n\nexport const InfoWrapper = styled.div`\n display: flex;\n flex-direction: row;\n max-width: 600px;\n width: 100%;\n align-items: center;\n\n svg {\n flex-shrink: 0;\n margin: 0px 16px 0px 0px;\n }\n`;\n\nexport const IconWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n flex-shrink: 0;\n }\n`;\n\nexport const StatusWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n justify-content: center;\n max-width: 194px;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n align-items: flex-end;\n max-width: 50%;\n }\n `}\n`;\n\nexport const FaqContainer = styled.div`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 16px 0;\n `}\n`;\n\nexport const AccordionContainer = styled.div`\n${() => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 16px 0;\n`}\n`;\n\nexport const SnappyBox = styled.div`\n ${() => css`\n position: relative;\n width: 100%;\n height: 100%;\n `}\n`;\n\nexport const SnappyImageContainer = styled.div`\n ${() => css`\n height: 49px;\n margin: -34px 30px 0 0;\n overflow: hidden;\n position: absolute;\n\n right: 0;\n width: 92px;\n `}\n`;\n\nexport const SnappyFace = styled.img`\n ${({ theme }) => css`\n bottom: 0px;\n width: 100%;\n height: auto;\n user-drag: none;\n\n @media (max-width: ${theme.breakpoints.sm}){\n display: none;\n }\n `}\n`;\n\nexport const WizardWrapper = styled.div`\n display: block;\n max-width: 800px;\n \n p {\n margin: 16px 0px;\n }\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './BackupGeneralVision.styles';\nimport {\n IconDanger, IconDomain, IconCheck, Tag, Accordion, IconLoading, IconClock, Button,\n} from 'gatorcomponents';\nimport SnappyFaceBackup from '@/media/backup/SnappyFaceBackup.svg';\nimport { differenceInCalendarDays, format } from 'date-fns';\nimport { GeneralVisionTags } from '../../BackupHandler.types';\nimport { backupAnalytics } from '@/analytics';\n\nconst BackupGeneralVision = ({\n generalVisionLocale,\n loadingLog,\n lastBackup,\n currentProduct,\n goToCPanel,\n setShowWizard,\n firstStep,\n}) => {\n const [product, setProduct] = useState({});\n\n const mountProductData = useCallback(() => {\n if (!loadingLog && lastBackup) {\n const createdAt = new Date(lastBackup.created_at);\n const today = new Date();\n const dif = differenceInCalendarDays(today, createdAt);\n setProduct({\n plan_type: currentProduct ? currentProduct.productname : '',\n plan_domain: currentProduct ? currentProduct.domain : '',\n daysSinceLastBackup: dif,\n date: format(new Date(lastBackup.created_at), 'dd/MM/yyyy'),\n hour: format(new Date(lastBackup.created_at), 'HH:mm'),\n status: lastBackup.status,\n });\n }\n }, [loadingLog, lastBackup, currentProduct]);\n\n useEffect(() => {\n mountProductData();\n }, [mountProductData]);\n\n\n const daysToShow = useCallback(() => {\n if (product.daysSinceLastBackup > 7 && product.daysSinceLastBackup <= 15) {\n return 7;\n }\n if (product.daysSinceLastBackup > 15 && product.daysSinceLastBackup <= 30) {\n return 15;\n }\n if (product.daysSinceLastBackup > 30) {\n return 30;\n }\n }, [product]);\n\n const tagType = useCallback(() => {\n if (product.status === 'completed' && product.daysSinceLastBackup <= 7) {\n return GeneralVisionTags.COMPLETED;\n }\n if ((product.status === 'completed' && product.daysSinceLastBackup > 7) || !lastBackup) {\n return GeneralVisionTags.ATTENTION;\n }\n if (product.status === 'in_progress') {\n return GeneralVisionTags.IN_PROGRESS;\n }\n if (product.status === 'error') {\n return GeneralVisionTags.ERROR;\n }\n }, [lastBackup, product]);\n\n const faqItems = [\n {\n title: generalVisionLocale.faq.backupTypesAccordion.title,\n content: () => (\n \n {generalVisionLocale.faq.backupTypesAccordion.content.description}\n \n \n {generalVisionLocale.faq.backupTypesAccordion.content.fullBackup}\n \n \n\n \n \n {generalVisionLocale.faq.backupTypesAccordion.content.parcialBackup}\n \n \n\n \n \n {generalVisionLocale.faq.backupTypesAccordion.content.emailsBackup}\n \n \n\n \n \n {generalVisionLocale.faq.backupTypesAccordion.content.databaseBackup}\n \n \n \n ),\n analytics: backupAnalytics.accordionBackupTypes,\n },\n {\n title: generalVisionLocale.faq.createBackupAccordion.title,\n content: () => (\n \n {generalVisionLocale.faq.createBackupAccordion.content.description}\n \n \n {generalVisionLocale.faq.createBackupAccordion.content.byCpanel}\n \n \n\n \n \n {generalVisionLocale.faq.createBackupAccordion.content.byPortal}\n \n \n \n ),\n analytics: backupAnalytics.accordionHowToDo,\n },\n {\n title: generalVisionLocale.faq.maxSizeBackupAccordion.title,\n content: () => (\n \n {generalVisionLocale.faq.maxSizeBackupAccordion.content.paragraphOne}\n \n {generalVisionLocale.faq.maxSizeBackupAccordion.content.paragraphTwo}\n \n \n {generalVisionLocale.faq.maxSizeBackupAccordion.content.paragraphThree}\n \n \n ),\n analytics: backupAnalytics.accordionMaxSize,\n },\n {\n title: generalVisionLocale.faq.restoreBackupAccordion.title,\n content: () => (\n \n {generalVisionLocale.faq.restoreBackupAccordion.content.description}\n \n \n {generalVisionLocale.faq.restoreBackupAccordion.content.subdescription}\n \n \n \n \n {generalVisionLocale.faq.restoreBackupAccordion.content.byPortal}\n \n \n\n \n \n {generalVisionLocale.faq.restoreBackupAccordion.content.bySupport}\n \n \n \n {generalVisionLocale.faq.restoreBackupAccordion.content.footer}\n \n \n ),\n analytics: backupAnalytics.accordionHowToRestore,\n },\n {\n title: generalVisionLocale.faq.whyDoBackupAccordion.title,\n content: () => (\n \n {generalVisionLocale.faq.whyDoBackupAccordion.content.paragraphOne}\n \n {generalVisionLocale.faq.whyDoBackupAccordion.content.paragraphTwo}\n \n \n {generalVisionLocale.faq.whyDoBackupAccordion.content.paragraphThree}\n \n \n ),\n analytics: backupAnalytics.accordionUpdatedBackup,\n },\n ];\n\n const backupTag = useCallback(() => {\n switch (tagType()) {\n case GeneralVisionTags.COMPLETED:\n return (\n \n \n \n {currentProduct && currentProduct.productname} {currentProduct && currentProduct.domain} \n \n \n \n {backupTag()}\n \n \n );\n\n if (loadingLog || !currentProduct) {\n return (\n \n \n );\n }\n\n return (\n \n {generalVisionLocale.title} \n {lastBackup ? (\n \n {generalVisionLocale.description(format(new Date(lastBackup.created_at), 'dd/MM/yyyy'), format(new Date(lastBackup.created_at), 'HH:mm'))}\n \n ) : (\n \n {generalVisionLocale.noBackupDescription}\n \n )}\n\n \n {infoItem}\n\n \n {product.status === 'in_progress' && ((\n <>\n {generalVisionLocale.status.completedAlert(product.date)} \n )}\n {product.daysSinceLastBackup > 7 && (\n {generalVisionLocale.status.oldBackupAlert(goToCPanel, daysToShow())} \n )}\n \n )}\n {product.status === 'in_progress' && (\n {generalVisionLocale.status.inProgressBackupAlert} \n )}\n {!lastBackup && (\n {generalVisionLocale.status.noBackupAlert(goToCPanel)} \n )}\n {product.status === 'error' && (\n {generalVisionLocale.status.errorBackupAlert(goToCPanel)} \n )}\n \n \n\n \n {firstStep.title} \n\n \n {firstStep.description}\n \n\n setShowWizard(true)}\n width=\"fit\"\n />\n \n\n \n {generalVisionLocale.faq.faqTitle} \n\n \n \n \n \n\n {faqItems.map(question => (\n isOpen && question.analytics()}\n />\n ))}\n \n \n );\n};\n\nexport default BackupGeneralVision;\n","import styled, { css } from 'styled-components';\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 32px 0px 0px;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px 0px 0px;\n `}\n`;\n\nexport const AlertWrapper = styled.div`\n ${({ theme }) => css`\n box-shadow: ${theme.v2.shadows.dark};\n fit-content;\n margin: 24px 0px 0px;\n padding: 19px 29px 26px 29px;\n `}\n`;\n\nexport const AlertTitle = styled.h3`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n gap: 16px;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n\n svg {\n flex-shrink: 0;\n }\n `}\n`;\n\nexport const AlertDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n gap: 16px;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 0px;\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const AgreementWrapper = styled.div`\n align-items: center;\n display: inline-flex;\n gap: 8px;\n margin: 24px 0px 0px 0px;\n\n svg {\n flex-shrink: 0;\n }\n`;\n\nexport const Agreement = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n display: flex;\n margin: 24px 0px 0px 0px;\n`;\n","import {\n Button, IconDanger, IconWarning,\n} from 'gatorcomponents';\nimport * as Styles from './Restore.styles';\nimport React from 'react';\nimport { backupAnalytics } from '@/analytics';\n\nconst Restore = ({\n title,\n description,\n alertTitle,\n alertDescription,\n agreement,\n uploadLabel,\n goToCPanel,\n cPanelLoading,\n}) => {\n const handleRestore = () => {\n backupAnalytics.clickRestore();\n goToCPanel && goToCPanel(true);\n };\n\n return (\n <>\n {title} \n {description} \n \n \n \n\n \n {alertDescription}\n \n \n\n \n \n {agreement}\n \n \n\n \n \n \n );\n};\n\nexport default Restore;\n","import styled, { css } from 'styled-components';\n\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n background-color:${theme.v2.colors.white.primary};\n font-family: ${theme.v2.font.family.primary};\n padding: 24px;\n `}\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n letter-spacing: 0em;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 0px 0px;\n text-align: left;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0em;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 0px 0px;\n text-align: left;\n `}\n`;\n\nexport const StepTitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n letter-spacing: 0em;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 0px 0px;\n text-align: left;\n `}\n`;\n\nexport const Row = styled.div`\n display: flex;\n flex-direction: row;\n gap: 16px;\n margin: 24px 0px 0px 0px;\n\n @media(max-width: 960px){\n flex-direction: column;\n }\n`;\n\nexport const RedirectMessage = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0em;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 0px 0px;\n text-align: left;\n `}\n`;\n\nexport const AlertWrapper = styled.div`\n margin: 24px 0px 0px;\n max-width: 1040px;\n`;\n\nexport const InfoWrapper = styled.div`\n ${({ theme }) => css`\n margin: 24px 0px 0px;\n max-width: 1040px;\n color: ${theme.v2.colors.neutral.lowDark};\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n\nexport const LoaderWrapper = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n`;\n\nexport const BreadCrumb = styled.div`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.brand.primaryDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n justify-content: flex-start;\n\n button {\n margin-right: 16px;\n\n svg {\n fill: ${theme.v2.colors.neutral.lowDark}\n }\n }\n\n strong {\n border-bottom: 2px solid ${theme.v2.colors.brand.primaryBlue};\n font-weight: ${theme.v2.font.weights.medium};\n margin-left: 8px;\n }\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Card = styled.button`\n ${({\n theme, selected,\n }) => css`\n align-items: center;\n background-color: ${selected ? theme.v2.colors.brand.primaryUltraLight : 'transparent'};\n border-radius: 8px;\n border: 1px solid ${theme.v2.colors.feedback.canceledPure};\n cursor: pointer;\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n justify-content: flex-start;\n min-height: 75px;\n overflow-x: hidden;\n padding: 15px;\n transition: background-color 200ms ease-in-out;\n width: 303px;\n \n &:hover {\n background-color: ${theme.v2.colors.brand.primaryUltraLight}\n }\n\n @media (max-width: ${theme.breakpoints.sm}) {\n width: 100%;\n },\n `}\n`;\n\nexport const Title = styled.div`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n font-size: ${theme.v2.font.family.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n text-align: left;\n `}\n`;\n\nexport const Description = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0em;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n padding: 0px;\n text-align: left;\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n\nexport const Content = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n letter-spacing: 0em;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n padding: 0px;\n text-align: left;\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n\nexport const Icon = styled.img`\n ${() => css`\n height: 20px;\n padding: -3px;\n margin: 0px 8px 0px 0px;\n `}\n`;\n\nexport const CardContainer = styled.div`\n display: flex;\n flex-direction: column;\n gap: 8px;\n max-width: 100%;\n`;\n","import React from 'react';\nimport * as Style from './Card.styles';\nimport iconHospedagem from '@/media/siteBuilder/icon-hospedagem.svg';\n\nconst Card = ({\n testId = 'card',\n children,\n icon = 'default',\n hasIcon = true,\n title = '',\n description = '',\n selected = false,\n asButton = false,\n iconAction,\n onClick,\n cursorPointer,\n}) => (\n\n \n \n {title && (\n \n {(hasIcon && icon === 'default')\n ? \n )}\n\n {description && (\n \n {description}\n \n )}\n\n {children && (\n \n {children}\n \n )}\n \n \n\n);\n\nexport default Card;\n","export const wizardActions = {\n GENERATE: 'generate',\n RESTORE: 'restore',\n};\n\nexport const wizardRestorationOptios = {\n FULL: 'FULL',\n ROOT: 'ROOT',\n DATABASE: 'DATABASE',\n};\n","import React, {\n useEffect, useRef,\n} from 'react';\nimport * as Styles from './WizardBackup.styles';\nimport {\n Alert, Button, IconBackupDetail, IconButton, IconDownloadDetail, IconLoading, IconUploadDetail,\n} from 'gatorcomponents';\nimport { Card } from './components/Card';\nimport { wizardActions, wizardRestorationOptios } from './WizardBackup.types';\nimport { SITE_HG } from '@/config';\nimport { backupAnalytics } from '@/analytics';\n\n\nconst WizardBackup = ({\n title = 'title',\n TABS,\n description = 'description',\n fristStepTitle = 'firstStepTitle',\n wizardAction,\n setWizardAction,\n generateLocale,\n restorateLocale,\n cancelledRestoreAlert = 'cancelledRestoreAlert',\n cancelledGenerateAlert = 'cancelledGenerateAlert',\n suspendedRestoreAlert = 'suspendedRestoreAlert',\n suspendedGenerateAlert = 'suspendedGenerateAlert',\n setActiveTab,\n setShowWizard,\n wizardRestorationOption,\n setWizardRestorationOption,\n haveFile,\n setHaveFile,\n currentProduct,\n hireNewLabel = 'hireNew',\n askRestorationLabel = 'askRestoration',\n askBackupLabel = 'askBackupLabel',\n breadCrumb,\n goToCPanel,\n cPanelLoading,\n openFormUserFile,\n openFormHgRoutine,\n openGenerateBackup,\n loadingInodes,\n inodesAndSizeOk,\n redirectFromPreChat,\n clearRedirectFromPrechat,\n}) => {\n const productStatus = currentProduct && currentProduct.status && currentProduct.status.toLowerCase();\n const isActive = productStatus === 'active';\n const isCancelled = productStatus === 'cancelled';\n const isSuspended = productStatus === 'suspended';\n const restoreSecondOption = useRef();\n const restoreThirdOption = useRef();\n\n useEffect(() => {\n if (\n currentProduct\n && currentProduct.status\n && currentProduct.status.toLowerCase() === 'suspended'\n ) {\n setHaveFile(false);\n }\n }, [currentProduct, setHaveFile]);\n\n useEffect(() => {\n if (restoreSecondOption.current) {\n window.scrollTo({\n top: restoreSecondOption.current.offsetTop,\n behavior: 'smooth',\n });\n }\n }, [restoreSecondOption]);\n\n const handleWizardAction = (action) => {\n if (action === wizardActions.RESTORE) {\n backupAnalytics.restoreBackup();\n }\n if (action === wizardActions.GENERATE) {\n backupAnalytics.generateBackup();\n }\n\n setHaveFile(null);\n setWizardRestorationOption(null);\n setWizardAction(action);\n };\n\n const gaTagDispatch = () => {\n if (wizardAction === wizardActions.RESTORE) {\n if (haveFile) {\n if (wizardRestorationOption === wizardRestorationOptios.FULL) {\n backupAnalytics.fullCustomerFileBackupClick();\n }\n if (wizardRestorationOption === wizardRestorationOptios.ROOT) {\n backupAnalytics.rootCustomerFileBackupClick();\n }\n if (wizardRestorationOption === wizardRestorationOptios.DATABASE) {\n backupAnalytics.databaseCustomerFileBackupClick();\n }\n }\n if (haveFile === false) {\n if (wizardRestorationOption === wizardRestorationOptios.FULL) {\n backupAnalytics.fullHgFileBackupClick();\n }\n if (wizardRestorationOption === wizardRestorationOptios.ROOT) {\n backupAnalytics.rootHgFileBackupClick();\n }\n if (wizardRestorationOption === wizardRestorationOptios.DATABASE) {\n backupAnalytics.databaseHgFileBackupClick();\n }\n }\n }\n if (wizardAction === wizardActions.GENERATE) {\n if (wizardRestorationOption === wizardRestorationOptios.FULL) {\n backupAnalytics.generateCompleteBackupClick();\n }\n if (wizardRestorationOption === wizardRestorationOptios.ROOT) {\n backupAnalytics.generateRootBackupClick();\n }\n if (wizardRestorationOption === wizardRestorationOptios.DATABASE) {\n backupAnalytics.generateDatabaseBackupClick();\n }\n }\n };\n\n const handleFile = (bool) => {\n setHaveFile(bool);\n setWizardRestorationOption(null);\n\n if (bool) {\n backupAnalytics.haveFileClick();\n }\n if (!bool) {\n backupAnalytics.hgFileClick();\n }\n\n if (restoreThirdOption.current) {\n window.scrollTo({\n top: restoreThirdOption.current.offsetTop,\n behavior: 'smooth',\n });\n }\n };\n\n const handleWizardRestorationOption = (action) => {\n setWizardRestorationOption(action);\n };\n\n const validatePreChat = () => {\n if (redirectFromPreChat) {\n clearRedirectFromPrechat();\n }\n };\n\n const handleClickGenerate = () => {\n gaTagDispatch();\n\n setActiveTab(TABS.CREATE);\n setShowWizard(false);\n validatePreChat();\n };\n\n const handleClickGenerateCpanel = () => {\n gaTagDispatch();\n\n goToCPanel && goToCPanel();\n validatePreChat();\n };\n\n const askBackup = () => {\n gaTagDispatch();\n\n if (haveFile) {\n openFormUserFile();\n }\n\n if (!haveFile) {\n openFormHgRoutine();\n }\n\n validatePreChat();\n };\n\n const handleClickRestore = () => {\n if (wizardRestorationOption === wizardRestorationOptios.FULL) {\n askBackup();\n }\n\n if (wizardRestorationOption !== wizardRestorationOptios.FULL) {\n gaTagDispatch();\n setActiveTab(TABS.RESTORE);\n setShowWizard(false);\n }\n\n validatePreChat();\n };\n\n const hireNew = () => {\n gaTagDispatch();\n\n window.open(SITE_HG);\n\n validatePreChat();\n };\n\n const mountGenerateLabel = () => {\n if (cPanelLoading) {\n return \n \n \n \n );\n }\n\n const shouldRenderRestorateSecondRow = (currentProduct.status.toLowerCase() === 'active' && wizardAction === wizardActions.RESTORE);\n const shouldRenderActionType = (!isCancelled && ((inodesAndSizeOk || wizardAction === wizardActions.RESTORE) || (haveFile !== null && wizardAction === wizardActions.GENERATE)));\n const shouldRenderRestorationSecondRow = (wizardAction === wizardActions.RESTORE && haveFile !== null && currentProduct && currentProduct.status.toLowerCase() === 'active') || (wizardAction === wizardActions.RESTORE && currentProduct && currentProduct.status.toLowerCase() !== 'active');\n const shoouldRenderActiveGenerateAction = (isActive && !inodesAndSizeOk && wizardAction !== wizardActions.RESTORE && wizardAction !== null);\n const shouldRenderInactiveGenerateDescription = !isActive && wizardAction === wizardActions.GENERATE;\n const shouldRenderActiveGenerateThirdRow = isActive && wizardAction === wizardActions.GENERATE;\n const shouldRenderActiveGenerateAction = isActive && wizardAction === wizardActions.GENERATE && wizardRestorationOption;\n const shouldRenderActiveGenerateRootDescription = wizardRestorationOption === wizardRestorationOptios.ROOT;\n const shouldRenderActiveRestorateAction = (isActive && wizardAction === wizardActions.RESTORE && haveFile !== null && wizardRestorationOption);\n\n return (\n \n \n setShowWizard(false)}\n />\n {breadCrumb}\n \n\n \n {title}\n \n\n \n {description}\n \n\n \n {fristStepTitle}\n \n\n \n \n\n {shouldRenderRestorateSecondRow && (\n <>\n \n {restorateLocale.firstStep.title}\n \n\n \n handleFile(true)}\n />\n\n handleFile(false)}\n />\n \n \n )}\n\n {shouldRenderActionType && (\n <>\n {shouldRenderRestorationSecondRow && (\n <>\n \n {restorateLocale.secondStep.title}\n \n\n {(!!haveFile) && (\n \n \n )}\n\n {(!haveFile) && (\n \n \n
\n\n \n
\n\n \n
\n \n )}\n \n )}\n\n {shouldRenderInactiveGenerateDescription && (\n \n {generateLocale.secondStep.generateSuspendedTitle}\n \n )}\n\n {shouldRenderActiveGenerateThirdRow && (\n <>\n \n {generateLocale.secondStep.description}\n \n\n \n \n
\n\n \n
\n\n \n
\n \n \n )}\n\n {(shouldRenderActiveGenerateAction) && (\n <>\n {shouldRenderActiveGenerateRootDescription ? (\n <>\n \n {generateLocale.generateTexts.description}\n \n\n \n {generateLocale.generateTexts.info}\n \n \n ) : (\n <>\n \n {generateLocale.generateByCpanel.description}\n \n\n \n {generateLocale.generateByCpanel.info}\n \n \n )}\n\n \n \n \n )}\n\n {shouldRenderActiveRestorateAction && (\n <>\n {(haveFile === false) && (\n \n \n )}\n\n {!!haveFile && wizardRestorationOption === wizardRestorationOptios.FULL && (\n \n \n )}\n\n {!!haveFile && wizardRestorationOption !== wizardRestorationOptios.FULL && (\n \n {restorateLocale.noFullBkpDescription}\n \n )}\n\n \n \n \n )}\n \n )}\n\n {(!isActive) && (\n <>\n \n {wizardAction === wizardActions.RESTORE && (isSuspended ? !!wizardRestorationOption : true) && (\n \n\n \n {wizardAction === wizardActions.RESTORE && (isSuspended ? !!wizardRestorationOption : true) && (\n hireNew()\n : () => askBackup()\n }\n />\n )}\n {wizardAction === wizardActions.GENERATE && (\n hireNew()\n : () => handleGenerateBackup()\n }\n />\n )}\n \n \n )}\n\n {shoouldRenderActiveGenerateAction && (\n <>\n \n {restorateLocale.inodeMessage}\n \n\n \n \n \n )}\n \n );\n};\n\nexport default WizardBackup;\n","import React, {\n useCallback, useEffect, useState, useMemo,\n} from 'react';\nimport * as Styles from './BackupHandler.styles';\nimport { Tabs } from 'gatorcomponents';\nimport { TABS } from './BackupHandler.types';\nimport { Create } from './components/Create';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { Log } from './components/Log';\nimport { BackupGeneralVision } from './components/BackupGeneralVision';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n productsActions, backupActions, formsActions, preChatActions,\n} from '@/redux/modules';\nimport { useParams, useHistory } from 'react-router';\nimport Loader from '@/components/Layout/Loader';\nimport { Restore } from './components/Restore';\nimport { backupAnalytics } from '@/analytics';\nimport { loadGeneralProducts } from '@/redux/actions/generalProducts';\nimport { WizardBackup } from './components/WizardBackup';\nimport { wizardActions, wizardRestorationOptios } from './components/WizardBackup/WizardBackup.types';\nimport { HgProducts } from '@/components/SupportForms/SupportForms.types';\n\nconst BackupPage = () => {\n const params = useParams();\n const { backup: backupLocale, ticket: ticketsLocale, routes: routesLocale } = useLocale();\n const [activeTab, setActiveTab] = useState(TABS.GENERAL);\n const dispatch = useDispatch();\n const history = useHistory();\n const { id, category } = useParams();\n const { cPanelLoading } = useSelector(state => state.products);\n const {\n backupGeneration, loadingLog, backupLog, loadingInodes, inodesAndSizeOk, redirectFromPreChat,\n } = useSelector(state => state.backup);\n const products = useSelector(state => state.generalProducts.bkpProducts);\n const [showWizard, setShowWizard] = useState(!!params.wizard);\n const [wizardAction, setWizardAction] = useState(null);\n const [haveFile, setHaveFile] = useState(null);\n\n const [wizardRestorationOption, setWizardRestorationOption] = useState(null);\n\n const currentProduct = useMemo(() => (products ? [...products].find((product) => {\n const foundedProduct = String(product.id) === id;\n return foundedProduct;\n }) : {}), [products, id]);\n\n const checkProduct = useCallback(() => {\n if (currentProduct) {\n const isAllowed = [...HgProducts.SHARED_ALL, ...HgProducts.RESELLER_ALL, ...HgProducts.PLUS_ALL].includes(currentProduct.packageid);\n if ((currentProduct.status.toLowerCase() === 'pending' || !isAllowed)) {\n history.push(`${routesLocale.products}${routesLocale.productdetail}/${currentProduct.id}`);\n }\n }\n }, [currentProduct, history, routesLocale]);\n\n useEffect(() => {\n checkProduct();\n }, [checkProduct]);\n\n const requestData = useCallback(() => {\n if (id) {\n dispatch(backupActions.backupGeneration.clearStatus());\n dispatch(backupActions.backupLog.request({ id }));\n dispatch(loadGeneralProducts());\n dispatch(backupActions.inodes.request({ id }));\n }\n }, [dispatch, id]);\n\n useEffect(() => {\n requestData();\n }, [requestData]);\n\n const setIinitialRestorationOption = useCallback(() => {\n if (category) {\n setWizardAction(category.includes('generate') ? wizardActions.GENERATE : wizardActions.RESTORE);\n }\n }, [category]);\n\n useEffect(() => {\n setIinitialRestorationOption();\n }, [setIinitialRestorationOption]);\n\n const goToCPanel = useCallback((wizard) => {\n if (wizard) {\n dispatch(productsActions.cPanelSSO.requestLink({ hostingId: id, backupWizard: true, enableCpanelSSO: true }));\n } else {\n dispatch(productsActions.cPanelSSO.requestLink({ hostingId: id, backup: true, enableCpanelSSO: true }));\n }\n }, [dispatch, id]);\n\n const createBackup = () => {\n dispatch(backupActions.backupGeneration.request({ id }));\n backupAnalytics.backupButtonOnTabBackupClick();\n };\n\n const handleChangeTabs = useCallback((tabId) => {\n switch (tabId) {\n case TABS.GENERAL: {\n backupAnalytics.generalVision();\n break;\n }\n case TABS.CREATE: {\n backupAnalytics.clickOnDoBackupTab();\n break;\n }\n case TABS.RESTORE: {\n backupAnalytics.clickRestoreTab();\n break;\n }\n case TABS.LOG: {\n backupAnalytics.clickLogTab();\n break;\n }\n case TABS.CPANEL: {\n backupAnalytics.clickCPanelTab();\n break;\n }\n default: {\n return null;\n }\n }\n\n if (tabId !== TABS.CPANEL) {\n setActiveTab(tabId);\n }\n\n if (tabId === TABS.CPANEL && !cPanelLoading) {\n goToCPanel();\n }\n }, [cPanelLoading, goToCPanel]);\n\n const openFormUserFile = () => {\n let restorationType = ticketsLocale.forms.userBackupRestore.completeRestoration;\n\n if (wizardRestorationOption === wizardRestorationOptios.ROOT) {\n restorationType = ticketsLocale.forms.userBackupRestore.filesRestoration;\n }\n\n if (wizardRestorationOption === wizardRestorationOptios.DATABASE) {\n restorationType = ticketsLocale.forms.userBackupRestore.databaseRestoration;\n }\n\n dispatch(formsActions.forceState.set({\n key: 'userBackupRestore',\n params: {\n selectedProduct: currentProduct,\n selectedSector: 'technical',\n selectedRestorationType: restorationType,\n selectedBackupOption: null,\n selectedNeed: ticketsLocale.forms.names.userBackupRestore,\n },\n }));\n history.push(`${routesLocale.help}${routesLocale.supportforms}`);\n };\n\n const openFormHgRoutine = (forceFull) => {\n let restorationType = ticketsLocale.forms.restorateBackupHgRoutine.selectRestorationType.full;\n\n if (!forceFull && wizardRestorationOption === wizardRestorationOptios.ROOT) {\n restorationType = ticketsLocale.forms.restorateBackupHgRoutine.selectRestorationType.file;\n }\n\n if (!forceFull && wizardRestorationOption === wizardRestorationOptios.DATABASE) {\n restorationType = ticketsLocale.forms.restorateBackupHgRoutine.selectRestorationType.database;\n }\n\n dispatch(formsActions.forceState.set({\n key: 'restorateBackupHgRoutine',\n params: {\n selectedProduct: currentProduct,\n selectedSector: 'technical',\n selectedRestorationType: restorationType,\n selectedBackupOption: null,\n selectedNeed: ticketsLocale.forms.names.restorateBackupHgRoutine,\n },\n }));\n history.push(`${routesLocale.help}${routesLocale.supportforms}`);\n };\n\n const openGenerateBackup = () => {\n dispatch(formsActions.forceState.set({\n key: 'generateBackup',\n params: {\n selectedProduct: currentProduct,\n selectedSector: 'technical',\n selectedNeed: ticketsLocale.forms.names.generateBackup,\n allowBackup: true,\n },\n }));\n history.push(`${routesLocale.help}${routesLocale.supportforms}`);\n };\n\n const getActiveProductTabsProps = useCallback(() => ({\n options: [\n {\n label: backupLocale.tabs.labels.general,\n id: TABS.GENERAL,\n onClick: () => handleChangeTabs(TABS.GENERAL),\n },\n {\n label: backupLocale.tabs.labels.create,\n id: TABS.CREATE,\n onClick: () => handleChangeTabs(TABS.CREATE),\n },\n {\n label: backupLocale.tabs.labels.restore,\n id: TABS.RESTORE,\n onClick: () => handleChangeTabs(TABS.RESTORE),\n },\n {\n label: backupLocale.tabs.labels.log,\n id: TABS.LOG,\n onClick: () => handleChangeTabs(TABS.LOG),\n },\n {\n id: TABS.CPANEL,\n label: cPanelLoading ? (\n <>\n \n {showWizard && (\n \n \n {(!currentProduct || currentProduct.status === 'Suspended' || currentProduct.status === 'Cancelled' || currentProduct.status === 'Pending') ? (\n \n\n {tabs[activeTab]}\n \n )}\n \n );\n};\n\nexport default BackupPage;\n","const styles = theme => ({\n container: {\n position: 'relative',\n borderRadius: '0',\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n '&> .active': {\n borderLeft: `5px solid ${theme.color.oceanGreen}`,\n '& .status-icon': {\n color: theme.color.oceanGreen,\n },\n '& .product-status-label': {\n backgroundColor: theme.color.oceanGreen,\n },\n '& .barChecked': {\n '& ~ .roundBar': {\n backgroundColor: theme.color.oceanGreen,\n },\n },\n '& .roundIcon': {\n backgroundColor: theme.color.mystic,\n },\n '& .iconChecked': {\n backgroundColor: theme.color.oceanGreen,\n },\n '& .switchRoot': {\n '& .roundBar': {\n backgroundColor: theme.color.tundora,\n },\n },\n },\n '&> .pending': {\n borderLeft: `5px solid ${theme.color.brightSun}`,\n '& .status-icon': {\n color: theme.color.brightSun,\n },\n '& .product-status-label': {\n backgroundColor: theme.color.brightSun,\n },\n '& .warningStatusColor': {\n borderColor: theme.color.brightSun,\n },\n },\n '&> .activationpending': {\n borderLeft: `5px solid ${theme.color.coral}`,\n '& .status-icon': {\n color: theme.color.coral,\n },\n '& .product-status-label': {\n backgroundColor: theme.color.coral,\n },\n '& .warningStatusColor': {\n borderColor: theme.color.coral,\n },\n },\n '&> .fraud': {\n borderLeft: `5px solid ${theme.color.brightSun}`,\n '& .status-icon': {\n color: theme.color.brightSun,\n },\n '& .product-status-label': {\n backgroundColor: theme.color.brightSun,\n },\n '& .warningStatusColor': {\n borderColor: theme.color.brightSun,\n },\n },\n '&> .suspended': {\n borderLeft: `5px solid ${theme.color.valencia}`,\n '& .status-icon': {\n color: theme.color.valencia,\n },\n '& .product-status-label': {\n backgroundColor: theme.color.valencia,\n },\n '& .warningStatusColor': {\n borderColor: theme.color.valencia,\n },\n },\n '&> .cancelled': {\n borderLeft: `5px solid ${theme.color.geyser}`,\n '& .status-icon': {\n color: theme.color.geyser,\n },\n '& .product-status-label': {\n backgroundColor: theme.color.geyser,\n },\n '& .warningStatusColor': {\n borderColor: theme.color.geyser,\n },\n },\n '&> .terminated': {\n borderLeft: `5px solid ${theme.color.geyser}`,\n '& .status-icon': {\n color: theme.color.geyser,\n },\n '& .product-status-label': {\n backgroundColor: theme.color.geyser,\n },\n '& .warningStatusColor': {\n borderColor: theme.color.geyser,\n },\n },\n '&> .building': {\n borderLeft: `5px solid ${theme.color.coral}`,\n '& .status-icon': {\n color: theme.color.coral,\n },\n '& .product-status-label': {\n backgroundColor: theme.color.coral,\n },\n '& .warningStatusColor': {\n borderColor: theme.color.coral,\n },\n },\n '& .cardTitle': {\n fontWeight: 400,\n fontSize: '16px',\n lineHeight: '1.2',\n },\n '& .cardSubTitle': {\n color: theme.color.regentGray,\n },\n '& .cardTitleLetter': {\n letterSpacing: '-0.5px',\n },\n '& .cardContentProduct': {\n paddingTop: '24px',\n paddingLeft: '30px',\n paddingRight: '30px',\n '&:last-child': {\n paddingBottom: '6px',\n },\n [theme.breakpoints.down('xs')]: {\n '&:last-child': {\n paddingBottom: '18px',\n },\n },\n [theme.breakpoints.up('sm')]: {\n '&:last-child': {\n paddingBottom: '24px',\n },\n },\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { Card, withStyles } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nfunction ProductCard({ classes, children }) {\n return (\n \n {children}\n \n );\n}\n\nexport default withStyles(styles, { withTheme: true })(ProductCard);\n","const styles = theme => ({\n loader: {\n marginRight: -20,\n marginLeft: -10,\n '& > div': {\n margin: 0,\n },\n },\n cardLink: {\n backgroundColor: 'transparent',\n border: `1px solid ${theme.color.oceanGreen}`,\n borderRadius: '16px',\n color: theme.color.tundora,\n cursor: 'pointer',\n display: 'inline-block',\n fontSize: theme.font.sizes.xxs,\n fontWeight: 'normal',\n height: '32px',\n margin: '5px 5px 0px 5px',\n outline: 'none',\n padding: '8px 12px',\n textDecoration: 'none',\n whiteSpace: 'nowrap',\n '&:focus': {\n backgroundColor: theme.color.oceanGreen,\n color: theme.color.white,\n },\n '&:hover': {\n backgroundColor: theme.color.oceanGreen,\n color: theme.color.white,\n },\n },\n});\n\nexport default styles;\n","import React, { useContext } from 'react';\nimport { withI18n } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport withWidth from '@material-ui/core/withWidth';\nimport { Link } from 'react-router-dom';\nimport { withStyles } from '@material-ui/core/styles';\nimport { countBy, propEq } from 'ramda';\nimport ChipLinkButton from '@/components/Buttons/ChipLinkButton/index';\nimport { activateWebsiteCreationFlow } from '@/redux/actions/onboarding';\nimport { ProductsContext } from '@/contexts/Products/context';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport styles from './styles';\nimport classnames from 'classnames';\nimport { IconLoading } from 'gatorcomponents';\nimport { productsActions } from '@/redux/modules';\nimport { useHistory } from 'react-router';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { backupAnalytics } from '@/analytics';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { CHARLIE_CPANEL_SSO_PORTAL } from '@/config/GrowthBook/constants';\nimport { cloudflareAnalytics } from '@/analytics/cloudflare';\n\nconst AddonListButton = ({\n t,\n group,\n onRedirectToProductDetail,\n productGroups,\n domain,\n createSiteLabel,\n classes,\n productId,\n}) => {\n const context = useContext(ProductsContext);\n const { oldResellerId, featureOldResellerNotification } = context || {};\n const dispatch = useDispatch();\n const featureToggleSiteBuilderActivate = useSelector(state => state.featureToggles.toggles.portal\n && state.featureToggles.toggles.portal.websitebuilderTraditional);\n const loadingCpanelSSO = useSelector(state => state.products.cPanelLoading);\n const history = useHistory();\n const { routes: routesLocale, sites: sitesLocale } = useLocale();\n const enableCpanelSSO = useFeatureIsOn(CHARLIE_CPANEL_SSO_PORTAL);\n\n const getDomain = group => group.domain.domain || group.domain;\n\n const siteBuilderConfig = () => {\n const [{ status }] = group.actions.filter(item => item.type === 'websitebuilder');\n const isSiteActive = status === 'active';\n const isSiteInactive = status === 'inactive' && featureToggleSiteBuilderActivate;\n\n if (!isSiteActive && !featureToggleSiteBuilderActivate && group.isStandalone) {\n return {\n onClick: () => dispatch(activateWebsiteCreationFlow(group.id, getDomain(group))),\n };\n }\n\n return {\n onClick: isSiteInactive ? () => onRedirectToProductDetail() : null,\n component: Link,\n to: `${t('routes.siteBuilderRedirectAccess')}/${getDomain(group)}${isSiteActive ? '' : `/${group.id}`}`,\n target: '_blank',\n };\n };\n\n const setupMailLink = () => {\n const multipleDomains = countBy(propEq('hostname', group.hostname), productGroups);\n\n const settedDomain = domain || group.domain;\n const titanMailRedirectUrl = multipleDomains.true > 1 ? `${t('routes.emailsList')}${t('routes.byHost')}/${group.hostname}` : `${t('routes.emailsList')}${t('routes.emailsTitan')}/${settedDomain}`;\n const cpanelMailRedirectUrl = multipleDomains.true > 1 ? `${t('routes.emailsList')}${t('routes.byHost')}/${group.hostname}` : `${t('routes.filteredEmails')}/${settedDomain}`;\n\n let link = group.setupMail === 'proemail' ? titanMailRedirectUrl : cpanelMailRedirectUrl;\n\n if (!group.configuredMail) {\n link = multipleDomains.true > 1 ? `${t('routes.emailsList')}${t('routes.byHost')}/${group.hostname}` : `${t('routes.emailsList')}${t('routes.titanHirePlanActiveCPanel')}/${getDomain(group)}?idPro=${group.proemailId}`;\n }\n\n if (group.domainstatus === 'Pending' || group.domainstatus === 'Suspended' || group.domainstatus === 'Cancelled') {\n link = t('routes.emailsList');\n }\n\n return link;\n };\n\n const goToCPanel = (defaultCPanelUrl) => {\n dispatch(productsActions.cPanelSSO.requestLink({\n hostingId: group.id, defaultCPanelUrl, setLoadingWithId: true, enableCpanelSSO,\n }));\n };\n\n const showBackupRedirectModal = () => {\n history.push(`${routesLocale.products}${routesLocale.productdetail}/${productId}${routesLocale.backup}`);\n backupAnalytics.clickBackupButtonProductsList();\n };\n\n const cloudflareRedirect = () => {\n cloudflareAnalytics.hostingsButton();\n history.push(`${routesLocale.products}${routesLocale.cloudflare}/${productId}`);\n };\n\n return group.actions.filter(addon => Object.prototype.hasOwnProperty.call(addon, 'linkUrl')).map((addon) => {\n let config = {};\n\n switch (addon.type) {\n case 'cpanel':\n config = {\n onClick: () => goToCPanel(addon.linkUrl.toString()),\n label: loadingCpanelSSO === group.id ? \n {createSiteLabel}\n \n );\n }\n\n return (\n {productLabel} ;\n }\n if (productIsPending) {\n return {productLabel} ;\n }\n return {productLabel} ;\n };\n\n const renderSubDomains = subdomainsList => (Object.keys(subdomainsList).length > 0\n ? Object.values(subdomainsList).map(subdomain => {subdomain.url} )\n : {t('details.product.emptySubdomains')} );\n\n const renderNextInvoiceDueDate = () => {\n const htmlNextInvoiceDueDate = (\n \n {product.nextinvoicedate && (\n
\n {t('nextDueDate')} \n {formatDate(product.nextinvoicedate)} \n
\n )}\n
\n \n \n\n \n
\n
\n
\n {icon}\n
\n {`${t(product.productname)}`} \n {formatDomain(product.domain)} \n {t(`product.${product.status}`)} \n
\n
\n {renderNextInvoiceDueDate()}\n
\n
\n\n {showActions &&
}\n\n {productIsPending && (\n
\n 0\n 1 \n \n )}\n fill=\"100%\"\n />\n )}\n {(productIsSuspended && oldResellerId.find(packageid => product.packageid === packageid)) && (\n \n 0\n 1 \n \n )}\n fill=\"100%\"\n />\n )}\n {productIsCancelled && (\n \n 0\n 1 \n \n )}\n fill=\"100%\"\n />\n )}\n {productIsTerminated && (\n \n 0\n 1 \n \n )}\n fill=\"100%\"\n />\n )}\n {productIsBuilding && (\n \n\n {shouldDisplayOldResellerWarning && (\n
\n )}\n
\n\n
\n \n {isAvailableDetailLink && (\n generateLink()\n )}\n {product.type === 'domain' && (\n \n {detailsExpanded ? \n
\n
\n \n \n \n \n \n
\n \n \n {t('details.product.subdomains')}\n \n \n {onLoadingSubdomains ? \n
\n \n \n \n \n \n \n \n \n );\n};\n\nProductItem.propTypes = {\n onExpandDetails: PropTypes.func.isRequired,\n detailsExpanded: PropTypes.bool,\n product: productType.isRequired,\n};\n\nProductItem.defaultProps = {\n detailsExpanded: false,\n};\n\nexport default withStyles(styles)(withI18n()(ProductItem));\n","import { CALL_API } from '@/middleware/api';\nimport { SUBDOMAINS_URL } from '@/config/api';\nimport { config } from '@/config';\nimport {\n RECEIVE_SUBDOMAINS, ABORT_REQUEST_SUBDOMAINS, REQUEST_SUBDOMAINS,\n ERROR_SUBDOMAINS,\n} from './actionsTypes';\n\n\nfunction receiveSubdomains(domainId, subdomains) {\n return {\n type: RECEIVE_SUBDOMAINS,\n subdomains,\n loadedDate: Date.now(),\n id: domainId,\n };\n}\n\nconst abortRequestSubdomains = (subdomains, loadedDate) => ({\n type: ABORT_REQUEST_SUBDOMAINS,\n subdomains,\n loadedDate,\n});\n\nexport function loadSubdomains(domainId) {\n return (dispatch, getState) => {\n const { loadedDate, byId, id } = getState().subdomains;\n\n if (id === domainId && Date.now() - loadedDate < config.CACHE_TIME) {\n return new Promise(resolve => resolve(dispatch(abortRequestSubdomains(byId, loadedDate))));\n }\n\n return dispatch({\n [CALL_API]: {\n authenticated: true,\n endpoint: SUBDOMAINS_URL(domainId),\n method: 'GET',\n actionTypes: {\n request: () => ({ type: REQUEST_SUBDOMAINS }),\n success: (response) => {\n const subdomain = {\n ...response.data,\n };\n return receiveSubdomains(domainId, subdomain);\n },\n error: () => ({ type: ERROR_SUBDOMAINS }),\n },\n },\n });\n };\n}\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withI18n } from 'react-i18next';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport { productType } from '@/types';\nimport ProductItem from '@/components/Products/ProductItem';\nimport { loadSubdomains } from '@/redux/actions/subdomains';\n\n\nclass ProductPageItem extends Component {\n static propTypes = {\n id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n product: productType,\n loading: PropTypes.bool,\n }\n\n static defaultProps = {\n product: null,\n loading: false,\n }\n\n state = {\n expandDetails: false,\n subdomainsList: {},\n loadingSubdomains: false,\n }\n\n expandDetails = () => {\n const { product, loadSubdomains } = this.props;\n const { expandDetails } = this.state;\n\n\n if (!expandDetails) {\n this.setState({ loadingSubdomains: true });\n loadSubdomains(product.id).then((result) => {\n this.setState({\n subdomainsList: result.subdomains,\n loadingSubdomains: false,\n });\n });\n }\n\n this.setState(prevState => ({\n ...prevState,\n expandDetails: !prevState.expandDetails,\n }));\n }\n\n render() {\n const {\n product, products,\n } = this.props;\n const { expandDetails, subdomainsList, loadingSubdomains } = this.state;\n\n const productProps = {\n onExpandDetails: () => this.expandDetails(),\n detailsExpanded: expandDetails,\n product,\n subdomainsList,\n onLoadingSubdomains: loadingSubdomains,\n };\n\n return \n \n {inputLabel}\n \n \n -1} />\n \n ))}\n \n \n );\n};\n\nSelectCheckboxField.propTypes = {\n filterStatus: PropTypes.array.isRequired,\n inputLabel: PropTypes.string.isRequired,\n labelWidth: PropTypes.number.isRequired,\n selectValue: PropTypes.array.isRequired,\n};\n\nexport default withStyles(styles)(withI18n()(SelectCheckboxField));\n","const styles = theme => ({\n startContentWrapper: {\n display: 'flex',\n },\n listTitle: {\n fontWeight: 300,\n fontSize: '24px',\n margin: '0 20px 0 32px',\n },\n card: {\n minHeight: '60px',\n position: 'relative',\n borderRadius: '0',\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n padding: 7,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n marginBottom: 5,\n '@media(max-width: 1280px)': {\n flexDirection: 'column',\n alignItems: 'flex-start',\n padding: 2,\n },\n },\n filterContainer: {\n display: 'flex',\n alignItems: 'center',\n '@media(max-width: 1280px)': {\n alignItems: 'flex-start',\n flexDirection: 'column',\n width: '100%',\n },\n },\n selectField: {\n width: '199px',\n marginRight: '15px',\n '@media(max-width: 1280px)': {\n width: '100%',\n },\n },\n selectCheckbox: {\n margin: '6px 8px 5px 0',\n width: '199px',\n '@media(max-width: 1280px)': {\n width: '100%',\n margin: '5px 0px 18px 0px',\n },\n },\n filterTitle: {\n fontSize: '14px',\n whiteSpace: 'nowrap',\n paddingRight: '15px',\n fontWeight: 400,\n '@media(max-width: 1280px)': {\n fontSize: '24px',\n fontWeight: 300,\n paddingTop: '10px',\n marginLeft: '32px',\n paddingBottom: '10px',\n },\n },\n collapseWrapper: {\n width: '100%',\n background: 'transparent',\n display: 'flex',\n paddingRight: '17px',\n justifyContent: 'flex-end',\n '@media(max-width: 1280px)': {\n flexDirection: 'column',\n paddingLeft: '23px',\n paddingRight: '23px',\n },\n },\n expand: {\n transform: 'rotate(0deg)',\n transition: theme.transitions.create('transform', {\n duration: theme.transitions.duration.shortest,\n }),\n },\n expandOpen: {\n transform: 'rotate(180deg)',\n },\n expandArrow: {\n position: 'absolute',\n right: 12,\n top: 7,\n },\n root: {\n display: 'flex',\n justifyContent: 'flex-end',\n width: '100%',\n '@media(max-width: 1280px)': {\n flexDirection: 'column',\n justifyContent: 'center',\n },\n },\n});\n\nexport default styles;\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useState, useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n Card, Typography, Collapse, IconButton,\n} from '@material-ui/core';\nimport withWidth from '@material-ui/core/withWidth';\nimport { withStyles } from '@material-ui/core/styles';\nimport { withI18n } from 'react-i18next';\nimport { ExpandMore } from '@material-ui/icons';\nimport classnames from 'classnames';\nimport useMediaQuery from '@material-ui/core/useMediaQuery/unstable_useMediaQuery';\nimport { filterProductGroups } from '@/redux/actions/productGroups';\nimport { filterGeneralProducts, productStatus } from '@/redux/actions/generalProducts';\nimport SelectField from '@/components/Fields/SelectField';\nimport SelectCheckboxField from '@/components/Fields/SelectCheckboxField';\nimport FilterButton from '@/components/Buttons/FilterButton';\nimport { calcLabelWidth } from '@/utils/Formatters/calcWidthLabel';\nimport { config } from '@/config';\nimport styles from './styles';\n\n\nconst FilterProducts = ({\n t,\n total,\n classes,\n}) => {\n const selectedStatus = useSelector(state => state.generalProducts.selectFilters.selectedStatus);\n const filterProducts = useSelector(state => state.generalProducts.selectFilters.site);\n const filterStatus = useSelector(state => state.generalProducts.selectFilters.status);\n\n const [expand, setExpand] = useState(false);\n const [product, setProduct] = useState('');\n\n const isMobile = useMediaQuery('(max-width:1280px)');\n const { SITE_HG } = config;\n\n const dispatch = useDispatch();\n\n const handleCollapse = () => {\n isMobile ? setExpand(false) : setExpand(true);\n };\n\n useEffect(() => {\n handleCollapse();\n }, []);\n\n useEffect(() => {\n dispatch(filterProductGroups(product, selectedStatus));\n dispatch(filterGeneralProducts(product, selectedStatus));\n }, [product]);\n\n useEffect(() => {\n dispatch(filterGeneralProducts(product, selectedStatus));\n }, [selectedStatus]);\n\n const handleExpandCollapse = () => {\n setExpand(!expand);\n };\n\n const handleChange = (event) => {\n setProduct(event.target.value);\n };\n\n const handleSelect = (event) => {\n dispatch(productStatus(event.target.value));\n };\n\n return (\n \n {!isMobile && (\n \n {t('lists.products')} \n \n {t('hireProduct')}\n \n
\n )}\n \n {total > 4 && (\n <>\n
{t('filter.title')} \n
\n \n handleChange(event)}\n />\n handleSelect(event)}\n labelWidth={calcLabelWidth(t('filter.status'))}\n />\n
\n \n\n {isMobile && (\n
\n handleExpandCollapse()}\n >\n
\n )}\n \n )}\n
\n );\n};\n\nexport default withWidth()(withStyles(styles, { withTheme: true })(withI18n()(FilterProducts)));\n","const styles = theme => ({\n message: {\n color: theme.color.regentGray,\n fontSize: '14px',\n fontWeight: '400',\n marginTop: '25px',\n textAlign: 'center',\n width: '100%',\n },\n contentWrapper: {\n [theme.breakpoints.up(960)]: {\n padding: '0 40px',\n },\n },\n bottomInfoWrapper: {\n display: 'flex',\n gap: '16px',\n marginTop: '32px',\n '& div': {\n flex: '1 1',\n },\n [theme.breakpoints.up(960)]: {\n padding: '0px 40px',\n },\n },\n});\n\nexport default styles;\n","const styles = theme => ({\n card: {\n display: 'flex',\n flex: 1,\n alignItems: 'center',\n borderRadius: '0',\n backgroundColor: theme.color.brightSun,\n padding: 10,\n boxShadow: 'none',\n [theme.breakpoints.down('xs')]: {\n padding: '10px 20px',\n },\n },\n cardContent: {\n flex: 1,\n padding: 7,\n '&:last-child': {\n paddingBottom: '7px',\n },\n },\n messageContent: {\n color: theme.color.tundora,\n display: 'flex',\n alignItems: 'center',\n '&:hover': {\n '& > a': {\n backgroundColor: 'transparent',\n '& > span': {\n textDecoration: 'underline',\n },\n },\n },\n verticalAlign: 'middle',\n '& .static-message-button': {\n justifyContent: 'flex-start',\n textDecoration: 'none',\n '&:hover': {\n backgroundColor: 'transparent',\n },\n [theme.breakpoints.down('xs')]: {\n display: 'flex',\n padding: 0,\n marginTop: 5,\n },\n '& span': {\n transition: '0.2s color',\n '&:hover': {\n backgroundColor: 'transparent',\n textDecoration: 'underline',\n color: theme.color.havelockBlue,\n },\n color: theme.color.indigo,\n fontWeight: '600',\n },\n\n },\n '& .static-message-modal-button': {\n textDecoration: 'underline',\n fontSize: 13,\n color: theme.color.indigo,\n textTransform: 'none',\n textAlign: 'left',\n fontWeight: 400,\n padding: 0,\n verticalAlign: 'bottom',\n '&:hover': {\n backgroundColor: 'transparent',\n },\n },\n },\n messageIcon: {\n marginRight: '20px',\n verticalAlign: 'inherit',\n },\n messageBox: {\n display: 'flex',\n },\n alertCritical: {\n backgroundColor: theme.color.valencia,\n '& p': {\n color: theme.color.white,\n },\n '& svg': {\n color: theme.color.white,\n },\n '& a': {\n color: theme.color.white,\n },\n '& .static-message-modal-button': {\n color: theme.color.white,\n },\n },\n\n oldResellerPaddingCard: {\n [theme.breakpoints.down(960)]: {\n padding: '15px 14px',\n\n '& svg': {\n marginRight: 16,\n },\n },\n },\n\n oldResellerPaddingCardContent: {\n '&:last-child': {\n [theme.breakpoints.down(960)]: {\n padding: 0,\n },\n },\n },\n\n});\n\nexport default styles;\n","import React from 'react';\nimport {\n Card, CardContent, Typography, withStyles,\n} from '@material-ui/core';\nimport { Warning } from '@material-ui/icons';\nimport classnames from 'classnames';\n\nimport styles from './styles';\n\n\nconst StaticMessage = ({\n classes, className, oldReseller, children, action,\n}) => (\n \n \n \n \n \n {children}\n {' '}\n {action}\n \n \n \n \n \n);\n\nexport default withStyles(styles)(StaticMessage);\n","const styles = theme => ({\n titleElement: {\n paddingBottom: 6,\n paddingTop: 0,\n padding: 0,\n margin: '0 0 0 42px',\n\n '& h6': {\n color: theme.color.thundora,\n fontSize: 24,\n fontWeight: 400,\n letterSpacing: '0.01px',\n lineHeight: '29px',\n },\n\n [theme.breakpoints.down(960)]: {\n marginLeft: 26,\n paddingBottom: 11,\n },\n },\n\n closeButton: {\n margin: '15px 17px 0px auto',\n maxHeight: 24,\n maxWidth: 24,\n },\n\n containerWrapper: {\n flex: 'unset',\n margin: '0 20px 0px 42px',\n overflowY: 'unset',\n padding: 0,\n\n [theme.breakpoints.down(960)]: {\n margin: '0 20px 24px 26px',\n },\n },\n\n description: {\n color: theme.color.tundora,\n fontSize: 14,\n letterSpacing: '0.01px',\n lineHeight: '17px',\n\n '& b': {\n fontWeight: 500,\n },\n\n '& u, & a': {\n color: theme.color.indigo,\n },\n },\n\n listWrapper: {\n margin: '24px 17px 42px 42px',\n maxHeight: '320px',\n overflowX: 'hidden',\n overflowY: 'scroll',\n padding: 0,\n\n '&::-webkit-scrollbar': {\n width: 8,\n },\n '&::-webkit-scrollbar-track': {\n background: theme.color.silver,\n borderRadius: '8px',\n },\n '&::-webkit-scrollbar-thumb': {\n borderRadius: 8,\n background: theme.color.indigo,\n },\n '&::-webkit-scrollbar-thumb:hover': {\n background: theme.color.indigo,\n },\n\n [theme.breakpoints.down(960)]: {\n margin: 0,\n maxHeight: 'unset',\n overflow: 'unset',\n padding: 0,\n },\n },\n});\n\nexport default styles;\n","const styles = theme => ({\n cardWrapper: {\n marginBottom: 5,\n },\n\n cardContent: {\n '&:last-child': {\n display: 'flex',\n height: 59,\n padding: '0px 16px',\n\n\n [theme.breakpoints.down(960)]: {\n height: 'unset',\n },\n },\n },\n\n cardItem: {\n display: 'flex',\n flexDirection: 'column',\n flexWrap: 'wrap',\n justifyContent: 'center',\n },\n\n itemTitle: {\n color: theme.color.silverChalice,\n fontSize: 12,\n fontWeight: 400,\n letterSpacing: '0.01px',\n lineHeight: '20px',\n\n [theme.breakpoints.down(960)]: {\n margin: '12px 0px 0px 0px',\n },\n },\n\n truncate: {\n maxWidth: '100%',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n\n fieldValue: {\n color: theme.color.emperor,\n fontSize: 14,\n fontWeight: 500,\n letterSpacing: '0.01px',\n lineHeight: '17px',\n },\n\n LinkButton: {\n alignItems: 'center',\n backgroundColor: theme.color.indigo,\n border: `1px solid ${theme.color.chambray}`,\n borderRadius: '2px',\n boxShadow: 'none',\n color: theme.color.white,\n display: 'flex',\n fontSize: 14,\n fontWeight: 500,\n height: 36,\n justifyContent: 'center',\n letterSpacing: '0.01px',\n lineHeight: '17px',\n padding: 0,\n textDecoration: 'unset',\n\n '&:disabled': {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n color: theme.color.disabled,\n },\n\n [theme.breakpoints.down(960)]: {\n margin: '24px 0px 24px',\n maxWidth: '75%',\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Grid, withStyles, CardContent, Typography,\n} from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport classnames from 'classnames';\nimport ProductCard from '@/components/Cards/ProductCard';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport formatDateFns from '@/utils/Formatters/formatDateFns';\nimport styles from './styles';\n\n\nconst CardItem = ({ t, classes, product }) => {\n const nextinvoicedate = new Date(product.nextinvoicedate);\n const formatedNextInvoice = formatDateFns({ productDate: nextinvoicedate, additionalDays: 1 });\n const cancelDate = formatDateFns({ productDate: nextinvoicedate, additionalDays: 31 });\n\n return (\n \n \n \n \n \n\n {t('oldReseller.productPlan')} \n \n {product.productname}\n \n\n \n\n \n {t('oldReseller.productStatus')} \n \n {t(`oldReseller.${product.status}`)}\n \n \n\n \n {product.status === 'Suspended' ? t('oldReseller.productCancelation') : t('oldReseller.productExpiration')} \n \n {product.status === 'Suspended' ? cancelDate : formatedNextInvoice}\n \n \n\n \n {product.actions.filter(action => (action.type === 'plan-switch')).map(action => (\n \n {t('oldReseller.ModalCta')}\n \n ))}\n \n \n \n \n \n );\n};\n\nCardItem.propTypes = {\n product: PropTypes.object.isRequired,\n};\n\nexport default withStyles(styles)(withI18n()(CardItem));\n","import React, { useContext } from 'react';\nimport { Trans, withI18n } from 'react-i18next';\nimport { Close } from '@material-ui/icons';\nimport {\n Dialog,\n DialogContent,\n DialogContentText,\n DialogTitle,\n IconButton,\n withStyles,\n} from '@material-ui/core/';\nimport withWidth, { isWidthDown } from '@material-ui/core/withWidth';\nimport { ProductsContext } from '@/contexts/Products/context';\nimport { RESELLER_PRICE_UPDATE_EXPLANATION } from '@/config/urls/supportUrls';\nimport styles from './styles';\nimport CardItem from './CardItem';\n\n\nconst ModalOldResellerManagement = ({ t, classes, width }) => {\n const isWidthDownSm = isWidthDown('sm', width);\n const {\n showModal, toggleShowModal, suspendedProducts, productsOldResellers,\n } = useContext(ProductsContext);\n return (\n toggleShowModal(false)}\n maxWidth=\"md\"\n aria-labelledby=\"alert-dialog-title\"\n aria-describedby=\"alert-dialog-description\"\n >\n toggleShowModal(false)}\n data-testid=\"closeButton\"\n >\n \n {t('oldReseller.ModalTitle')}\n \n\n \n \n \n 0 \n 1 \n <>2\n \n \n \n\n \n {suspendedProducts.map(product => (\n \n \n );\n};\n\nexport default withI18n()(withWidth()(withStyles(styles)(ModalOldResellerManagement)));\n","const styles = theme => ({\n container: {\n margin: '0 40px 20px',\n [theme.breakpoints.down(960)]: {\n margin: '20px 10px',\n },\n },\n\n messageButton: {\n color: theme.color.white,\n display: 'inline-block',\n fontSize: '13px',\n fontWeight: 400,\n letterSpacing: '0.01px',\n lineHeight: '15px',\n padding: 0,\n textAlign: 'left',\n textTransform: 'inherit',\n\n '&:hover': {\n backgroundColor: 'transparent',\n },\n\n '& a': {\n background: 'transparent',\n border: 0,\n cursor: 'pointer',\n padding: 0,\n textDecoration: 'underline',\n },\n },\n\n affectedMessageButton: {\n color: theme.color.tundora,\n\n '& a': {\n background: 'transparent',\n border: 0,\n color: theme.color.indigo,\n cursor: 'pointer',\n padding: 0,\n textDecoration: 'underline',\n },\n },\n\n affectedULink: {\n background: 'transparent',\n border: 0,\n color: theme.color.indigo,\n cursor: 'pointer',\n padding: 0,\n textDecoration: 'underline',\n },\n\n suspendedULink: {\n background: 'transparent',\n border: 0,\n cursor: 'pointer',\n padding: 0,\n textDecoration: 'underline',\n },\n});\n\nexport default styles;\n","import React, { useContext } from 'react';\nimport { withStyles } from '@material-ui/core';\nimport { withI18n, Trans } from 'react-i18next';\nimport classnames from 'classnames';\nimport StaticMessage from '@/components/Notification/StaticMessage/index';\nimport ModalOldResellerManagement from '@/components/Modal/ModalOldResellerManagement';\nimport { ProductsContext } from '@/contexts/Products/context';\nimport { RESELLER_PRICE_UPDATE_EXPLANATION } from '@/config/urls/supportUrls';\nimport styles from './styles';\n\n\nconst InvoiceMessage = ({ t, classes }) => {\n const {\n suspendedProducts,\n hasAboutToSuspend,\n toggleShowModal,\n } = useContext(ProductsContext);\n\n const hasSuspended = suspendedProducts.length > 0 || hasAboutToSuspend;\n return (\n \n
\n \n \n <>0\n 1 \n <>2\n (toggleShowModal(true))}\n onKeyDown={(e) => {\n if (e.keyCode === 13 && !e.shiftKey) {\n toggleShowModal(true);\n }\n }}\n >\n 3\n \n <>4\n \n \n \n \n \n \n \n);\n\nexport default CloudflareLogo;\n","export const MODAL_STEPS = {\n KNOW: 0,\n SPEED: 1,\n STABILITY: 2,\n SAFETY: 3,\n SETTUP: 4,\n};\n\nexport const STEPS_NAMES = {\n 0: 'know',\n 1: 'speed',\n 2: 'stability',\n 3: 'safety',\n 4: 'settup',\n};\n","import {\n Button, IconChevron, IconFeatured, Modal,\n Toggle,\n} from 'gatorcomponents';\nimport * as Styles from './CloudflareTopBanner.styles';\nimport React, { useState } from 'react';\nimport useLocale from '@/hooks/useLocale';\nimport { CloudflareLogo } from './media/CloudflareLogo';\nimport { MODAL_STEPS, STEPS_NAMES } from './CloudflareTopBanner.types;';\nimport { useHistory } from 'react-router';\nimport { cloudflareAnalytics } from '@/analytics/cloudflare';\n\nconst CloudflareTopBanner = () => {\n const [showExplanationModal, setShowExplanationModal] = useState(false);\n const { cloudflare: cloudflareLocale } = useLocale();\n const { topBanner: cloudflareTopBannerLocale } = cloudflareLocale;\n const [modalStep, setModalStep] = useState(MODAL_STEPS.KNOW);\n const history = useHistory();\n const { routes: routesLocale } = useLocale();\n\n const modalSteps = {\n [MODAL_STEPS.KNOW]: {\n title: cloudflareTopBannerLocale.modal.know.title,\n description: cloudflareTopBannerLocale.modal.know.description,\n icon: 'IconCdn',\n secondaryColor: 'pendingUltraLight',\n backgroundColor: 'pendingMedium',\n withToggle: false,\n },\n [MODAL_STEPS.SPEED]: {\n title: cloudflareTopBannerLocale.modal.speed.title,\n description: cloudflareTopBannerLocale.modal.speed.description,\n icon: 'IconSpeed',\n secondaryColor: 'attentionUltraLight',\n backgroundColor: 'attentionPure',\n withToggle: false,\n },\n [MODAL_STEPS.STABILITY]: {\n title: cloudflareTopBannerLocale.modal.stability.title,\n description: cloudflareTopBannerLocale.modal.stability.description,\n icon: 'IconLive',\n secondaryColor: 'attentionUltraLight',\n backgroundColor: 'primaryBlue',\n withToggle: false,\n },\n [MODAL_STEPS.SAFETY]: {\n title: cloudflareTopBannerLocale.modal.safety.title,\n description: cloudflareTopBannerLocale.modal.safety.description,\n icon: 'IconSecurityCheck',\n secondaryColor: 'activeUltraLight',\n backgroundColor: 'activeLight',\n withToggle: false,\n },\n [MODAL_STEPS.SETTUP]: {\n icon: 'IconSpeed',\n color: 'transparent',\n withToggle: true,\n backgroundColor: 'primaryUltralight',\n title: cloudflareTopBannerLocale.modal.settup.title,\n description: cloudflareTopBannerLocale.modal.settup.description,\n cta: cloudflareTopBannerLocale.modal.settup.cta,\n },\n };\n\n const handleDisplayModal = () => {\n cloudflareAnalytics.sitesBannerCta();\n setShowExplanationModal(true);\n };\n\n const handleRedirect = () => {\n cloudflareAnalytics.modalCta();\n history.push(`${routesLocale.products}${routesLocale.cloudflare}`);\n };\n\n const handleCloseModal = () => {\n cloudflareAnalytics.modalClose();\n setShowExplanationModal(false);\n };\n\n return (\n <>\n {showExplanationModal && (\n \n \n \n {modalSteps[modalStep].withToggle\n && \n\n \n {modalSteps[modalStep].title}\n \n\n \n {modalSteps[modalStep].description}\n \n\n {modalSteps[modalStep].cta && (\n \n \n )}\n\n {modalStep !== MODAL_STEPS.KNOW && (\n setModalStep(modalStep - 1)}\n >\n setModalStep(modalStep + 1)}\n >\n \n \n )}\n\n \n \n {cloudflareTopBannerLocale.title} \n {cloudflareTopBannerLocale.description} \n \n \n \n\n \n \n );\n};\n\nexport default CloudflareTopBanner;\n","import React, { useContext } from 'react';\nimport { withI18n } from 'react-i18next';\nimport shortid from 'shortid';\nimport { Typography, withStyles } from '@material-ui/core';\nimport ProductPageItem from '@/components/Products/ProductPageItem';\nimport Loader from '@/components/Layout/Loader';\nimport FaqProducts from '@/components/FrequentlyQuestions/FaqProducts';\nimport FilterProducts from '@/components/Filters/FilterProducts';\nimport NoResultMessageTrans from '@/components/Notification/NoResultMessageTrans';\nimport FilterCard from '@/components/Cards/FilterCard';\nimport FilterButton from '@/components/Buttons/FilterButton';\nimport ActionButton from '@/components/Buttons/ActionButton';\nimport { SITE_HG } from '@/config';\nimport { HOSTING_URL } from '@/config/urls/hostingUrls';\nimport { ProductsContext } from '@/contexts/Products/context';\nimport { BottomAdvertisementHandler } from '@/pages/advertisement/BottomAdvertisementHandler';\nimport styles from './styles';\nimport ResellerMessage from './ResellerMessage';\nimport PageMessages from '@/pages/common/PageMessages';\nimport { CloudflareTopBanner } from './CloudflareTopBanner';\n\nconst LOCATION_PRODUCTS = 'produtos';\n\nconst ProductPageContent = ({ classes, t }) => {\n const {\n featureOldResellerNotification,\n loading,\n loadMore,\n oldResellerId,\n products,\n productsOldResellers,\n shouldDisplayResellerMessage,\n suspendedProducts,\n totalProducts,\n visible,\n } = useContext(ProductsContext);\n\n const filterButton = (\n \n {t('hireProduct')}\n \n );\n\n if (loading) {\n return \n
\n \n\n {products.length === 0 ? (\n
{t('noResults.filter')} \n ) : (\n products.length > 0 && products.slice(0, visible).map(product => (\n
\n ))\n )}\n\n {showLoadMore && (\n
\n {t('btn.loadMore')}\n \n )}\n
\n
\n \n );\n};\n\nexport default withI18n()(withStyles(styles)(ProductPageContent));\n","import React from 'react';\nimport ProductsContextProvider from '@/contexts/Products/context';\nimport ProductPageContent from './ProductPageContent';\n\nconst ProductsPage = () => (\n \n);\n\nexport default ProductsPage;\n","import React, { useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { loadFaqInvoices } from '@/redux/actions/faq';\nimport { SUPPORT_URL } from '@/config/urls/supportUrls';\nimport FaqDefault from '@/components/FrequentlyQuestions/FaqDefault';\n\n\nconst FaqInvoicesPage = ({ className }) => {\n const faq = useSelector(state => state.faq);\n const dispatch = useDispatch();\n\n useEffect(() => {\n dispatch(loadFaqInvoices());\n }, [dispatch]);\n\n return (\n \n {!isMobile && (\n {t('lists.invoices')} \n )}\n {total > 0 && (\n \n <>\n
{t('filter.title')} \n
\n \n {type !== 'Paid' && (\n
\n \n\n {isMobile && (\n
\n handleExpandMobile()}\n >\n {mobileExpanded ?
\n )}\n \n
\n );\n};\n\nFilterInvoices.propTypes = {\n mobileExpanded: PropTypes.bool,\n filterValues: PropTypes.object.isRequired,\n type: PropTypes.string,\n selectFilters: PropTypes.object,\n t: PropTypes.func.isRequired,\n classes: PropTypes.shape({\n cardFilter: PropTypes.string,\n cardFilterContent: PropTypes.string,\n cardFilterFlex: PropTypes.string,\n cardFilterTitle: PropTypes.string,\n top: PropTypes.string,\n expand: PropTypes.string,\n expandOpen: PropTypes.string,\n containerCollapse: PropTypes.string,\n }).isRequired,\n};\n\nFilterInvoices.defaultProps = {\n mobileExpanded: true,\n};\n\nexport default withI18n()(withStyles(styles)(FilterInvoices));\n","const styles = theme => ({\n invoiceContainer: {\n width: '100%',\n borderLeft: `5px solid ${theme.color.indigo}`,\n margin: '0',\n position: 'relative',\n borderRadius: '0',\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n '& .cardActions': {\n padding: '0',\n },\n '& .cardActions > a': {\n '&:hover': {\n color: theme.color.chambray,\n textDecoration: 'underline',\n },\n transition: 'color 0.2s',\n textTransform: 'uppercase',\n textDecoration: 'none',\n textAlign: 'right',\n color: theme.color.indigo,\n fontWeight: '400',\n margin: 0,\n },\n '& .cardSubTitle': {\n color: theme.color.regentGray,\n },\n },\n subTitleNf: {\n fontSize: '14px',\n fontWeight: 500,\n },\n iconReceiptNf: {\n color: theme.color.oceanGreen,\n },\n titleNf: {\n display: 'flex',\n alignItems: 'center',\n fontSize: '24px',\n fontWeight: 400,\n marginBottom: '15px',\n },\n paper: {\n position: 'absolute',\n width: theme.spacing.unit * 100,\n backgroundColor: theme.palette.background.paper,\n boxShadow: theme.shadows[5],\n padding: theme.spacing.unit * 4,\n outline: 'none',\n top: '50%',\n left: '50%',\n minHeight: 'auto',\n maxHeight: 600,\n transform: 'translate(-50%, -50%)',\n overflowY: 'auto',\n [theme.breakpoints.down('xs')]: {\n width: '100%',\n },\n },\n invoiceNumber: {\n fontSize: {\n fontSize: '16px',\n fontWeight: 500,\n },\n display: 'flex',\n alignItems: 'center',\n marginLeft: '20px',\n '& svg': {\n verticalAlign: 'text-bottom',\n margin: '0 10px',\n },\n },\n gridLinkNf: {\n '& > a': {\n fontSize: '14px',\n },\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n flexGrow: 1,\n [theme.breakpoints.down('xs')]: {\n justifyContent: 'flex-end',\n },\n },\n cardContentNf: {\n [theme.breakpoints.down('xs')]: {\n '&:last-child': {\n paddingBottom: '8px',\n },\n },\n },\n closeIcon: {\n position: 'absolute',\n right: 10,\n top: 10,\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withI18n } from 'react-i18next';\nimport { withStyles } from '@material-ui/core/styles';\nimport shortid from 'shortid';\nimport Typography from '@material-ui/core/Typography';\nimport Modal from '@material-ui/core/Modal';\nimport Receipt from '@material-ui/icons/Receipt';\nimport CloseIcon from '@material-ui/icons/Close';\nimport {\n CardContent, Grid, IconButton, Card,\n} from '@material-ui/core';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport styles from './styles';\n\n\nconst ModalInvoiceWrapped = ({\n classes,\n modal,\n nfse,\n open,\n onClose,\n t,\n}) => (\n \n \n onClose()}\n >\n \n {t('nfseTitle')}\n \n \n \n \n {nfse.map(nota => (\n \n \n \n \n \n {t('nfseNumber')} \n {nota.code} \n \n \n {t('nfseLink')} \n \n \n \n \n \n ))}\n \n
\n \n);\n\nexport default withI18n()(withStyles(styles)(ModalInvoiceWrapped));\n","const styles = theme => ({\n container: {\n borderRadius: 0,\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n '& .cardPayButton': {\n textTransform: 'uppercase',\n textDecoration: 'none',\n textAlign: 'right',\n color: theme.color.indigo,\n fontWeight: '400',\n whiteSpace: 'nowrap',\n '&:disabled': {\n color: theme.color.disabled,\n },\n '&:hover': {\n backgroundColor: 'transparent',\n color: theme.color.chambray,\n textDecoration: 'underline',\n },\n [theme.breakpoints.down(960)]: {\n margin: 0,\n },\n [theme.breakpoints.down('xs')]: {\n marginRight: '-12px',\n },\n },\n },\n paid: {\n borderLeft: `5px solid ${theme.color.oceanGreen}`,\n '& .status-icon': {\n color: theme.color.oceanGreen,\n },\n '& .warning-payment': {\n borderColor: theme.color.oceanGreen,\n },\n '& .status-label': {\n backgroundColor: theme.color.oceanGreen,\n },\n },\n unpaid: {\n borderLeft: `5px solid ${theme.color.brightSun}`,\n '& .status-icon': {\n color: theme.color.brightSun,\n },\n '& .warning-payment': {\n borderColor: theme.color.brightSun,\n },\n '& .status-label': {\n backgroundColor: theme.color.brightSun,\n },\n },\n unpaidExpired: {\n borderLeft: `5px solid ${theme.color.valencia}`,\n '& .status-icon': {\n color: theme.color.valencia,\n },\n '& .warning-payment': {\n borderColor: theme.color.valencia,\n },\n '& .status-label': {\n backgroundColor: theme.color.valencia,\n },\n },\n paymentPending: {\n borderLeft: `5px solid ${theme.color.coral}`,\n '& .status-icon': {\n color: theme.color.coral,\n },\n '& .warning-payment': {\n borderColor: theme.color.coral,\n },\n '& .status-label': {\n backgroundColor: theme.color.coral,\n },\n },\n cancelled: {\n borderLeft: `5px solid ${theme.color.geyser}`,\n '& .status-icon': {\n color: theme.color.geyser,\n },\n '& .warning-payment': {\n borderColor: theme.color.geyser,\n },\n '& .status-label': {\n backgroundColor: theme.color.geyser,\n },\n },\n refunded: {\n borderLeft: `5px solid ${theme.color.geyser}`,\n '& .status-icon': {\n color: theme.color.geyser,\n },\n '& .warning-payment': {\n borderColor: theme.color.geyser,\n },\n '& .status-label': {\n backgroundColor: theme.color.geyser,\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { Card, withStyles } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nfunction InvoiceStatusCard({ classes, children, invoiceStatus }) {\n return (\n \n {children}\n \n );\n}\n\nexport default withStyles(styles, { withTheme: true })(InvoiceStatusCard);\n","const styles = theme => ({\n content: {\n padding: '2px 0 5px',\n position: 'relative',\n [theme.breakpoints.down('sm')]: {\n padding: '2px 0px 5px 0px',\n },\n },\n statusIcon: {\n verticalAlign: 'middle',\n marginRight: 20,\n marginLeft: '-3px',\n },\n expand: {\n margin: 0,\n transform: 'rotate(0deg)',\n transition: theme.transitions.create('transform', {\n duration: theme.transitions.duration.shortest,\n }),\n },\n expandOpen: {\n transform: 'rotate(180deg)',\n },\n arrow: {\n fill: theme.color.tundora,\n },\n subtitle: {\n display: 'inline-block',\n color: theme.color.regentGray,\n fontSize: '12px',\n userSelect: 'none',\n },\n subValue: {\n color: theme.color.tundora,\n fontSize: '14px',\n userSelect: 'none',\n letterSpacing: '-0.5px',\n margin: '4px 0 0 0',\n },\n id: {\n color: theme.color.tundora,\n display: 'block',\n fontSize: '16px',\n marginBottom: '4px',\n },\n iconLabel: {\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'center',\n flexDirection: 'column',\n },\n label: {\n display: 'inline-block',\n height: 'auto',\n lineHeight: '20px',\n textAlign: 'center',\n color: theme.color.white,\n fontWeight: 'normal',\n fontSize: '12px',\n userSelect: 'none',\n padding: '0 7px',\n borderRadius: 3,\n whiteSpace: 'nowrap',\n '@media(min-width: 1100px) and (max-width: 1280px)': {\n whiteSpace: 'normal',\n maxWidth: '82px',\n },\n '@media(min-width: 793px) and (max-width: 960px)': {\n whiteSpace: 'normal',\n maxWidth: '82px',\n },\n '@media(min-width: 420px) and (max-width: 510px)': {\n whiteSpace: 'normal',\n maxWidth: '82px',\n },\n },\n contentFlex: {\n display: 'flex',\n flexDirection: 'column',\n padding: '24px 30px',\n '@media(min-width: 960px) and (max-width: 1160px)': {\n paddingRight: '22px',\n },\n '@media(min-width: 420px) and (max-width: 972px)': {\n paddingRight: '22px',\n },\n },\n cardContainerNotUnpaid: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n '@media(max-width: 420px)': {\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n },\n cardContainer: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n '@media(min-width: 960px) and (max-width: 1100px)': {\n flexDirection: 'column',\n },\n '@media(max-width: 960px)': {\n width: 'auto',\n alignItems: 'center',\n justifyContent: 'space-between',\n flexWrap: 'wrap',\n },\n '@media(max-width: 420px)': {\n flexDirection: 'column',\n },\n },\n firstWrapperNotUnpaid: {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n '@media(max-width: 420px)': {\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n },\n secondWrapperNotUnpaid: {\n width: 'auto',\n display: 'flex',\n justifyContent: 'flex-end',\n alignItems: 'center',\n },\n secondWrapperNotUnpaidWithNewModalPayment: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-end',\n width: '50%',\n },\n firstWrapper: {\n width: '50%',\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n '@media(min-width: 1100px) and (max-width: 1200px)': {\n minWidth: '300px',\n },\n '@media(min-width: 960px) and (max-width: 1100px)': {\n width: '100%',\n alignItems: 'center',\n justifyContent: 'flex-start',\n },\n '@media(max-width: 960px)': {\n width: 'auto',\n alignItems: 'center',\n justifyContent: 'flex-start',\n },\n '@media(max-width: 420px)': {\n width: '100%',\n flexDirection: 'column',\n alignItems: 'flex-start',\n justifyContent: 'center',\n },\n },\n secondWrapper: {\n width: '50%',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n '& .select-payment': {\n '@media(max-width: 420px)': {\n width: '100%',\n margin: '6px 0 15px 0',\n },\n },\n '@media(min-width: 1160px) and (max-width: 1290px)': {\n width: '58%',\n },\n '@media(min-width: 1100px) and (max-width: 1160px)': {\n width: '58%',\n justifyContent: 'space-between',\n },\n '@media(min-width: 960px) and (max-width: 1160px)': {\n minWidth: '382px',\n },\n '@media(min-width: 960px) and (max-width: 1100px)': {\n justifyContent: 'center',\n marginTop: '15px',\n width: '100%',\n },\n '@media(max-width: 960px)': {\n flexDirection: 'row',\n alignItems: 'center',\n minWidth: '376px',\n },\n '@media(min-width: 0px) and (max-width: 792px)': {\n width: '100%',\n marginTop: '24px',\n minWidth: 'auto',\n },\n '@media(min-width: 420px) and (max-width: 792px)': {\n justifyContent: 'center',\n },\n '@media(max-width: 420px)': {\n marginTop: '10px',\n width: '100%',\n flexDirection: 'column',\n alignItems: 'flex-end',\n justifyContent: 'center',\n },\n },\n statusContainer: {\n display: 'flex',\n alignItems: 'center',\n minWidth: '188.67px',\n width: '50%',\n '@media(max-width: 1360px)': {\n minWidth: '134px',\n },\n '@media(max-width: 960px)': {\n minWidth: '167px',\n },\n '@media(min-width: 960px) and (max-width: 1100px)': {\n minWidth: '220px',\n },\n '@media(min-width: 0px) and (max-width: 792px)': {\n minWidth: '210px',\n },\n '@media(min-width: 420px) and (max-width: 510px)': {\n minWidth: '140px',\n },\n },\n dueContainer: {\n display: 'flex',\n justifyContent: 'space-evenly',\n alignItems: 'center',\n whiteSpace: 'nowrap',\n width: '100%',\n paddingRight: '5%',\n '@media(min-width: 1260px) and (max-width: 1500px)': {\n width: '50%',\n },\n '@media(min-width: 1160px) and (max-width: 1260px)': {\n paddingLeft: '5%',\n },\n '@media(max-width: 1160px)': {\n paddingLeft: 0,\n },\n '@media(max-width: 960px)': {\n minWidth: '170px',\n justifyContent: 'flex-start',\n },\n '@media(max-width: 420px)': {\n marginRight: '60px',\n marginBottom: '6px',\n },\n },\n dueWrapper: {\n marginRight: '30px',\n '@media(max-width: 420px)': {\n width: '50%',\n display: 'inline-block',\n marginTop: '16px',\n marginRight: '50px',\n },\n },\n valueWrapper: {\n '@media(max-width: 420px)': {\n width: '50%',\n display: 'inline-block',\n marginTop: '16px',\n },\n },\n arrowIconNotUnpaid: {\n '@media(min-width: 0px) and (max-width: 420px)': {\n position: 'absolute',\n top: 14,\n right: 12,\n },\n },\n arrowIcon: {\n '@media(min-width: 960px) and (max-width: 1100px)': {\n position: 'absolute',\n top: 14,\n right: 12,\n },\n '@media(max-width: 792px)': {\n position: 'absolute',\n top: 14,\n right: 12,\n },\n },\n actionContainer: {\n display: 'flex',\n justifyContent: 'flex-end',\n alignItems: 'center',\n minHeight: '36px',\n '@media(min-width: 960px) and (max-width: 1100px)': {\n width: 'auto',\n },\n [theme.breakpoints.down('xs')]: {\n minHeight: 0,\n },\n '@media(max-width: 420px)': {\n marginRight: '-10px',\n },\n },\n actions: {\n height: 52,\n width: '182.52px',\n display: 'flex',\n justifyContent: 'flex-end',\n [theme.breakpoints.down('sm')]: {\n padding: '0 4px',\n width: '100%',\n display: 'flex',\n justifyContent: 'flex-end',\n },\n '@media(min-width: 1160px)': {\n width: '100%',\n maxWidth: '140px',\n },\n '@media(min-width: 1100px) and (max-width: 1160px)': {\n justifyContent: 'flex-end',\n },\n '@media(min-width: 960px) and (max-width: 1160px)': {\n width: '100%',\n },\n },\n preTable: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n paddingTop: '24px',\n '&:last-child': {\n '@media(max-width: 960px)': {\n paddingBottom: 0,\n },\n },\n '@media(max-width: 960px)': {\n paddingLeft: 0,\n paddingRight: 0,\n },\n },\n pay: {\n minWidth: '136.42px',\n margin: 0,\n '&:hover': {\n textDecoration: 'none',\n },\n '& span': {\n '&:hover': {\n textDecoration: 'none',\n },\n },\n '@media(max-width: 960px)': {\n margin: 0,\n },\n },\n downloadContainer: {\n paddingTop: '25px',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n paddingBottom: '9px',\n },\n});\n\nexport default styles;\n","import styled, { css } from 'styled-components';\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n background: ${theme.v2.colors.white.primary};\n border-radius: 8px ;\n box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.20);\n display: flex;\n margin: 16px 0px 0px 0px;\n padding: 16px 0px 16px 0px;\n `}\n`;\n\nexport const ContentText = styled.div`\n ${({ theme }) => css`\n background: ${theme.v2.colors.white.primary};\n height: fit-content;\n margin: 2px 24px 0px 16px;\n `}\n`;\n\n\nexport const Icon = styled.img`\n margin: 0px 0px 0px 24px;\n `;\n\nexport const Title = styled.span`\ns ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 14px;\n margin: 0 0 8px 0;\n`}\n`;\n","import React, { } from 'react';\nimport useLocale from '@/hooks/useLocale';\nimport * as Styles from './SaversDiscountBanner.styles';\n\nimport AlarmIcon from '@/media/billing/alarm-icon.svg';\nimport { XRAY_ENABLED_DISCOUNT_OFFER_BANNER } from '@/config/GrowthBook/constants';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\n\nconst SaversDiscountBanner = () => {\n const { billing: billingLocale } = useLocale();\n const { saversDiscountBanner: saversDiscountBannerLocale } = billingLocale;\n const enabledDiscountOfferBanner = useFeatureIsOn(XRAY_ENABLED_DISCOUNT_OFFER_BANNER);\n\n return (\n <>\n {enabledDiscountOfferBanner && (\n \n \n {saversDiscountBannerLocale.title} \n \n \n )\n }\n \n );\n};\n\n\nexport default SaversDiscountBanner;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withI18n } from 'react-i18next';\nimport {\n Grid, CardContent, CardActions, IconButton, withStyles, Collapse, Button,\n} from '@material-ui/core';\nimport classnames from 'classnames';\nimport { ExpandMore } from '@material-ui/icons';\nimport { bindActionCreators } from 'redux';\nimport { connect } from 'react-redux';\nimport IconInvoice from '@material-ui/icons/Receipt';\nimport invoiceType from '@/types/invoiceType';\nimport { invoiceCardTagManager, visualizeNFSeTagManager } from '@/utils/ThirdParties/tagManager';\nimport { formatDate } from '@/utils/Formatters/formatDate';\nimport Loader from '@/components/Layout/Loader';\nimport InvoiceDetails from '@/components/Invoices/InvoiceDetails';\nimport ModalInvoiceWrapped from '@/components/Invoices/ModalInvoiceWrapped';\nimport CurrencyFormat from '@/components/CurrencyFormat';\nimport { INVOICES_STATUS } from '@/config/invoices/invoiceStatus';\nimport { loadInvoiceDetails } from '@/redux/actions/invoices';\nimport InvoiceStatusCard from '@/components/Cards/InvoiceStatusCard';\nimport OutlineButton from '@/components/Buttons/OutlineButton';\nimport { DOWNLOAD_INVOICE_VOUCHER } from '@/config/api';\nimport styles from './styles';\nimport SaversDiscountBanner from '../SaversDiscountBanner';\nimport { DiscountType } from '@/components/billing/subscriptions/PaymentModal/PaymentModal.types';\n\n\nclass InvoiceItem extends Component {\n constructor(props) {\n super(props);\n this.handleMatchMedia = this.handleMatchMedia.bind(this);\n }\n\n state = {\n expandDetails: false,\n loadingDetails: false,\n nfseModalOpen: false,\n nfseModalRender: false,\n showCollapseMiddle: false,\n };\n\n componentDidMount = () => {\n window.addEventListener('resize', this.handleMatchMedia);\n this.handleMatchMedia();\n }\n\n componentWillUnmount = () => {\n window.removeEventListener('resize', this.handleMatchMedia);\n }\n\n expandDetails = async () => {\n const { invoice, loadInvoiceDetails } = this.props;\n\n this.setState(prevState => ({\n ...prevState,\n expandDetails: !prevState.expandDetails,\n }));\n\n if (!invoice.details) {\n this.setState({ loadingDetails: true });\n await loadInvoiceDetails(invoice.id);\n this.setState({ loadingDetails: false });\n }\n }\n\n handleCloseNfseModal = () => {\n this.setState({\n nfseModalRender: false,\n nfseModalOpen: false,\n });\n }\n\n handleOpenNfseModal = () => {\n const { userSummary } = this.props;\n const isJuridicPerson = userSummary.personType === 'BUSINESS';\n visualizeNFSeTagManager(isJuridicPerson);\n\n this.setState({\n nfseModalRender: true,\n nfseModalOpen: true,\n });\n }\n\n handleMatchMedia = () => {\n const screenMinimalDesktop = window.matchMedia('(min-width: 960px) and (max-width: 1100px)');\n const screenSmartphones = window.matchMedia('(max-width: 792px)');\n\n if (screenMinimalDesktop.matches || screenSmartphones.matches) {\n this.setState({\n showCollapseMiddle: true,\n });\n } else {\n this.setState({\n showCollapseMiddle: false,\n });\n }\n }\n\n isUnpaid = (status) => {\n if (status === 'paid' || status === 'cancelled' || status === 'refunded') { return false; }\n return true;\n }\n\n isPaid = status => (status === 'paid');\n\n render() {\n const {\n classes,\n invoice,\n content,\n t,\n invoiceValueLabel,\n action,\n type,\n enabledNewModalPayment,\n } = this.props;\n\n const {\n expandDetails,\n loadingDetails,\n nfseModalRender,\n nfseModalOpen,\n showCollapseMiddle,\n } = this.state;\n\n let arrowClass;\n let cardContainerClass;\n let firstWrapperClass;\n let secondWrapperClass;\n\n if (this.isUnpaid(invoice.statusMessage)) {\n arrowClass = classes.arrowIcon;\n cardContainerClass = classes.cardContainer;\n firstWrapperClass = classes.firstWrapper;\n secondWrapperClass = enabledNewModalPayment ? classes.secondWrapperNotUnpaidWithNewModalPayment : classes.secondWrapper;\n } else {\n arrowClass = classes.arrowIconNotUnpaid;\n cardContainerClass = classes.cardContainerNotUnpaid;\n firstWrapperClass = classes.firstWrapperNotUnpaid;\n secondWrapperClass = classes.secondWrapperNotUnpaid;\n }\n\n return (\n \n \n \n\n \n
\n
\n \n {invoice.id} \n {t(`invoices.${invoice.statusMessage}`)} \n \n
\n
\n
\n
{t('invoiceDueDateLabel')} \n
{formatDate(invoice.duedate)}
\n
\n
\n
{t(invoiceValueLabel)} \n
\n {invoice.totalStatus} \n
\n
\n
\n
\n\n {showCollapseMiddle && this.isUnpaid(invoice.statusMessage) && (\n
\n \n \n \n {Object.prototype.hasOwnProperty.call(invoice, 'details') === false && loadingDetails && \n \n \n \n )}\n\n
\n {content && (\n content\n )}\n
\n
\n {action}\n {type === INVOICES_STATUS.PAID && invoice.nfse.length > 0 && (\n \n \n {t('showReceiptAction')}\n \n\n {nfseModalRender && (\n
\n )}\n \n
{\n InvoiceItem.gaEvent(expandDetails);\n this.expandDetails();\n }}\n >\n \n
\n
\n \n \n \n {Object.prototype.hasOwnProperty.call(invoice, 'details') === false && loadingDetails && \n \n \n \n )}\n\n {!this.isUnpaid(invoice.statusMessage) && (\n \n \n \n \n {Object.prototype.hasOwnProperty.call(invoice, 'details') === false && loadingDetails && \n \n {t('invoices.download')}\n \n
\n )}\n \n \n \n \n )}\n {invoice.discount && invoice.discount.type === DiscountType.SAVERS35OFF && (\n \n \n );\n }\n}\n\nInvoiceItem.gaEvent = expandDetails => !expandDetails && invoiceCardTagManager();\n\nInvoiceItem.propTypes = {\n invoice: invoiceType.isRequired,\n action: PropTypes.node,\n enabledNewModalPayment: PropTypes.bool,\n content: PropTypes.node,\n t: PropTypes.func.isRequired,\n classes: PropTypes.shape({\n status: PropTypes.string,\n expand: PropTypes.string,\n expandOpen: PropTypes.string,\n cardAction: PropTypes.string,\n }),\n};\n\nconst mapStateToProps = state => ({\n loading: state.invoices.loading,\n userSummary: state.summary,\n});\n\nconst mapDispatchToProps = dispatch => bindActionCreators({\n loadInvoiceDetails,\n}, dispatch);\n\nexport default withStyles(styles)(withI18n()(connect(mapStateToProps, mapDispatchToProps)(InvoiceItem)));\n","import React from 'react';\nimport MaskedInput from 'react-text-mask';\nimport { TextField } from '@material-ui/core';\n\n\nconst MaskedInputTextField = (props) => {\n const { mask, ...rest } = props;\n return (\n (\n \n \n \n \n\n {t('dialogDataCheck.title')} \n {t('dialogDataCheck.description')} \n\n {t('dialogDataCheck.info')} \n \n \n);\n\nexport default withStyles(styles)(withI18n()(ModalCheckData));\n","const styles = theme => ({\n container: {\n borderRadius: 0,\n marginTop: '20px',\n marginBottom: '15px',\n fontWeight: 500,\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n },\n unpaid: {\n borderLeft: `5px solid ${theme.color.brightSun}`,\n '& .receiptIcon': {\n color: theme.color.brightSun,\n },\n },\n unpaidExpired: {\n borderLeft: `5px solid ${theme.color.valencia}`,\n '& .receiptIcon': {\n color: theme.color.valencia,\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { Card, withStyles } from '@material-ui/core';\nimport styles from './styles';\n\n\nfunction InvoiceSummaryCardTicket({ children, classes, status }) {\n return (\n \n {children}\n \n );\n}\n\nexport default withStyles(styles, { withTheme: true })(InvoiceSummaryCardTicket);\n","const styles = theme => ({\n cardFlexBox: {\n [theme.breakpoints.down('xs')]: {\n paddingLeft: '10px',\n },\n alignItens: 'center',\n display: 'flex',\n paddingLeft: '24px',\n '& > svg': {\n marginRight: '10px',\n },\n '& > p': {\n fontWeight: '500',\n fontSize: '16px',\n },\n },\n invoiceCardBox: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'space-between',\n },\n cardSummaryContent: {\n paddingTop: '10px',\n '&:last-child': {\n paddingBottom: '10px',\n },\n },\n arrow: {\n fill: theme.color.tundora,\n },\n dialogActions: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'center',\n marginBottom: 20,\n marginTop: 20,\n },\n completeMessage: {\n color: theme.color.tundora,\n fontSize: '20px',\n fontWeight: 'bold',\n textAlign: 'left',\n },\n circularProgressBtn: {\n marginRight: 10,\n },\n title: {\n display: 'flex',\n flexDirection: 'row',\n fontWeight: '500',\n justifyContent: 'space-between',\n },\n iconClose: {\n marginTop: '-10px',\n },\n});\n\nexport default styles;\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { Fragment, useState, useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { withI18n } from 'react-i18next';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport withMobileDialog from '@material-ui/core/withMobileDialog';\nimport Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\nimport {\n IconButton, Typography, CardContent, CardActions, Collapse, withStyles, DialogActions, CircularProgress,\n} from '@material-ui/core';\nimport { Close, Receipt, ExpandMore } from '@material-ui/icons';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { loadInvoiceDetails, getBoletoUrl } from '@/redux/actions/invoices';\nimport InvoiceDetails from '@/components/Invoices/InvoiceDetails';\nimport InvoiceSummaryCardTicket from '@/components/Cards/InvoiceSummaryCardTicket';\nimport Loader from '@/components/Layout/Loader';\nimport styles from './styles';\n\nconst TicketDialog = ({\n invoiceId,\n invoiceStatusMessage,\n close,\n classes,\n t,\n}) => {\n const { loading, urlBoleto } = useSelector(state => state.invoices.boletoDataCheck);\n const [dispatched, setDispatched] = useState(false);\n const [showDetails, setShowDetails] = useState(false);\n const [invoiceDetails, setInvoiceDetails] = useState({});\n\n const dispatch = useDispatch();\n\n useEffect(() => {\n if (!dispatched && !loading) {\n dispatch(getBoletoUrl(invoiceId));\n setDispatched(true);\n }\n }, [loading, urlBoleto]);\n\n const handleExpand = async () => {\n setShowDetails(!showDetails);\n\n if (!Object.prototype.hasOwnProperty.call(invoiceDetails, 'id')) {\n const data = await dispatch(loadInvoiceDetails(invoiceId));\n setInvoiceDetails(data.invoice);\n }\n };\n\n return (\n \n \n \n {t('dialogTicket.title')} \n \n \n
\n \n \n \n \n \n \n {t('dialog.invoiceDetails')} \n
\n \n \n \n \n\n \n \n \n {invoiceDetails.id ? (\n \n \n ) : (\n \n \n \n \n \n \n\n \n \n {loading ? ( \n \n \n );\n};\n\nTicketDialog.propTypes = {\n invoiceId: PropTypes.number.isRequired,\n invoiceStatusMessage: PropTypes.string.isRequired,\n close: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles, { withTheme: true })(\n withI18n()(withMobileDialog()(TicketDialog)),\n);\n","const styles = theme => ({\n formControl: {\n margin: '5px 8px 5px 0',\n width: '100%',\n maxWidth: '296px',\n minWidth: '192px',\n '@media(min-width: 960px) and (max-width: 1160px)': {\n minWidth: '192px',\n maxWidth: '220px',\n },\n [theme.breakpoints.down('sm')]: {\n maxWidth: '52%',\n },\n '@media(max-width: 420px)': {\n width: '100%',\n maxWidth: '100%',\n },\n },\n inputLabelCustom: {\n transform: 'translate(14px, 10px) scale(1)',\n zIndex: 0,\n },\n selectCustom: {\n '&$selectCustomFocused $selectCustomOutline': {\n borderColor: theme.color.chambray,\n borderWidth: 1,\n },\n '& div > div': {\n paddingBottom: 6,\n paddingTop: 9,\n fontSize: 14,\n },\n '& div > div:focus': {\n backgroundColor: 'transparent',\n },\n '& fieldset': {\n borderRadius: '2px',\n },\n dialogContainer: {\n '& div': {\n '& div': {\n [theme.breakpoints.up('md')]: {\n maxWidth: 750,\n },\n },\n },\n },\n },\n selectCustomInput: {},\n selectCustomOutline: {},\n selectCustomFocused: {},\n selectWrapper: {\n minWidth: '296.17px',\n width: '100%',\n },\n dialogContainer: {\n '& div': {\n '& div': {\n maxWidth: '750px',\n },\n },\n },\n loaderDataCheck: {\n margin: 0,\n padding: '5px 50px 0px 0px',\n width: 118.52,\n display: 'flex',\n justifyContent: 'flex-end',\n '& > div': {\n margin: 0,\n },\n },\n});\n\nexport default styles;\n","/* eslint-disable react/no-did-update-set-state */\nimport React, { Fragment, Component } from 'react';\nimport { bindActionCreators } from 'redux';\nimport { connect } from 'react-redux';\nimport { withI18n } from 'react-i18next';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport {\n Button, MenuItem, Select, OutlinedInput, FormControl, InputLabel, Dialog, withMobileDialog,\n} from '@material-ui/core';\nimport { Info } from '@material-ui/icons';\nimport invoiceType from '@/types/invoiceType';\nimport CreditCardDialog from '@/components/CreditCard/CreditCardDialog';\nimport WarningNotice from '@/components/Notification/WarningNotice/index';\nimport Loader from '@/components/Layout/Loader';\nimport InvoiceItem from '@/components/Invoices/InvoiceItem';\nimport ModalCheckData from '@/components/Invoices/ModalCheckData';\nimport {\n BOLETO, CREDIT_CARD, PAYPAL, PARC_2X, PARC_3X, PARC_4X, PARC_5X, PARC_6X,\n BRASPAG_PARC_1X, BRASPAG_PARC_2X, BRASPAG_PARC_3X, BRASPAG_PARC_4X, BRASPAG_PARC_5X,\n BRASPAG_PARC_6X, BRASPAG_PARC_7X, BRASPAG_PARC_8X, BRASPAG_PARC_9X, BRASPAG_PARC_10X,\n BRASPAG_PARC_11X, BRASPAG_PARC_12X, CREDIT_CARD_ES, BOLETO_CL_CO, BOLETO_MX, GATORPAY_BOLETO, GATORPAY_PAYPAL,\n} from '@/config/billing/paymentMethods';\nimport { getPaymentMethod } from '@/redux/actions/paymentMethod';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport { BOLETO_URL } from '@/config/whmcsUrls';\nimport { INVOICES_STATUS, INVOICES_STATUS_WITHOUT_CAPITALIZE } from '@/config/invoices/invoiceStatus';\nimport { invoiceUnpaidCardTagManager } from '@/utils/ThirdParties/tagManager';\nimport { calcLabelWidth } from '@/utils/Formatters/calcWidthLabel';\nimport { notifierError } from '@/utils/Application/notifier';\nimport { payTicketInvoiceForES, getBoletoUrl, checkBoletoUserData } from '@/redux/actions/invoices';\nimport { RECEIVE_PAYMENT_METHOD_TICKET_INVOICE_ES, ERROR_PAYMENT_METHOD_TICKET_INVOICE_ES } from '@/redux/actions/actionsTypes';\nimport { IS_PROD, COUNTRY } from '@/config/index';\nimport PaypalDialog from '@/components/Paypal/PaypalDialog';\nimport TicketDialog from '@/components/Tickets/TicketDialog';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { billingAnalytics } from '@/analytics';\nimport styles from './styles';\nimport { PaymentModal } from '@/components/billing/subscriptions/PaymentModal';\nimport { OriginCalling } from '@/components/billing/subscriptions/PaymentModal/PaymentModal.types';\nimport { format } from 'date-fns';\nimport { ExpiredTimePixModal } from '@/components/billing/subscriptions/ExpiredTimePixModal';\nimport { PaymentSuccessPixModal } from '@/components/billing/subscriptions/PaymentSuccessPixModal';\nimport { GenerateErrorPixModal } from '@/components/billing/subscriptions/GenerateErrorPixModal';\nimport { preChatActions } from '@/redux/modules';\nimport { TicketRedirectModal } from '@/components/billing/subscriptions/TicketRedirectModal';\nimport logger from '@/utils/logger/logger';\n\nconst preChatSetOpen = preChatActions.preChat.setOpen;\nconst preChatSetScreen = preChatActions.preChat.setScreen;\nconst setPreChatInvoiceId = preChatActions.invoice.set.invoiceId;\nconst setPreChatBillingGenerated = preChatActions.trustReactivation.billingGenerated;\nconst setPreChatTrustReactivationInvoiceId = preChatActions.trustReactivation.setInvoiceId;\nconst getDiagnostic = preChatActions.diagnostic.get;\nclass UnpaidInvoiceItem extends Component {\n state = {\n openDialog: false,\n openPaymentModal: false,\n openDialogPaypal: false,\n openDialogTicket: false,\n openDialogDataCheck: false,\n openExpiredTimePixModal: false,\n openGenerateErrorPixModal: false,\n openPaymentSuccessPixModal: false,\n openTicketModal: false,\n isOriginSavePDF: false,\n urlTicket: '',\n hasQRCodeGenerated: false,\n boletoDataCheckInvoiceId: '',\n pixCodeGenerated: '',\n qRCodeGenerated: '',\n urlBoletoBraspag: '',\n paymentMethod: '',\n warningSize: '',\n paymentTicketOnEs: {\n loadGetUrlPaymentTicketOnEs: false,\n urlPaymentTicketOnEs: '',\n errorOnGetUrl: false,\n },\n redirecting: false,\n }\n\n componentWillUnmount = () => {\n window.removeEventListener('resize', this.handleMatchMedia);\n }\n\n handleOpen = (dialog) => {\n this.setState(prevState => ({\n ...prevState,\n [dialog]: true,\n }));\n }\n\n handleClose = () => {\n this.setState({ openDialog: false });\n this.openPreChat();\n }\n\n handleChangePaymentMethod = (event) => {\n const { invoice } = this.props;\n\n this.setState({ paymentMethod: event.target.value });\n if (event.target.value === BOLETO_CL_CO || event.target.value === BOLETO_MX) {\n this.setState({\n paymentTicketOnEs: {\n loadGetUrlPaymentTicketOnEs: true,\n urlPaymentTicketOnEs: '',\n errorOnGetUrl: false,\n },\n });\n\n const { payTicketInvoiceForES } = this.props;\n payTicketInvoiceForES(invoice.id).then((response) => {\n if (response.type === RECEIVE_PAYMENT_METHOD_TICKET_INVOICE_ES) {\n this.setState({\n paymentTicketOnEs: {\n loadGetUrlPaymentTicketOnEs: false,\n urlPaymentTicketOnEs: response.url,\n errorOnGetUrl: false,\n },\n });\n }\n\n if (response.type === ERROR_PAYMENT_METHOD_TICKET_INVOICE_ES) {\n const { enqueueSnackbar } = this.props;\n enqueueSnackbar('notifyFailMessage', notifierError);\n this.setState({\n paymentTicketOnEs: {\n loadGetUrlPaymentTicketOnEs: false,\n urlPaymentTicketOnEs: '',\n errorOnGetUrl: true,\n },\n });\n }\n });\n }\n }\n\n handleRedirectToBoleto = async ({ urlBoleto, invoiceId }) => {\n const { checkBoletoUserData, enqueueSnackbar } = this.props;\n const { data: response } = await checkBoletoUserData(invoiceId);\n\n if (!response) {\n enqueueSnackbar('snackbar.error.process_boleto', notifierError);\n return;\n }\n\n const isCepError = response.errorCode === 'braspag.boleto_creation.errorCep';\n\n if (!response.success) {\n if (isCepError) {\n this.setState(prevState => ({\n ...prevState,\n openDialogDataCheck: true,\n boletoDataCheckInvoiceId: invoiceId,\n }));\n } else {\n enqueueSnackbar('snackbar.error.process_boleto', notifierError);\n }\n return;\n }\n window.open(urlBoleto, '_blank');\n }\n\n handleGetBoletoURL = async (invoice) => {\n if (COUNTRY === 'br') {\n const { getBoletoUrl } = this.props;\n const { dataCheck } = await getBoletoUrl(invoice.id);\n\n if (dataCheck.data.result) {\n this.setState({\n redirecting: true,\n }, () => {\n this.handleRedirectToBoleto({\n urlBoleto: dataCheck.data.url,\n invoiceId: invoice.id,\n });\n });\n }\n } else {\n window.open(BOLETO_URL(invoice.id));\n }\n }\n\n handleOpenDialogNewApiPaypal = () => (this.setState({ openDialogPaypal: true }));\n\n handlePaypalPayment = (invoice) => {\n const { getPaymentMethod, gatorpayPaypalFeatureToggle } = this.props;\n\n if (gatorpayPaypalFeatureToggle) {\n this.handleOpenDialogNewApiPaypal();\n getPaymentMethod(GATORPAY_PAYPAL, invoice.id);\n return;\n }\n\n getPaymentMethod(PAYPAL, invoice.id);\n }\n\n handleTicketPayment = () => {\n const { ticketModalFeatureToggle } = this.props;\n if (ticketModalFeatureToggle) {\n this.setState({ openDialogTicket: true });\n }\n }\n\n openPreChat = () => {\n const {\n invoiceIdFromPreChat, preChatBillingGenerated, preChatSetOpen, setPreChatInvoiceId, preChatSetScreen, setPreChatBillingGenerated, preChatTrustReactivationStates, invoice, setPreChatTrustReactivationInvoiceId,\n } = this.props;\n if (invoiceIdFromPreChat && invoice && invoiceIdFromPreChat.toString() === invoice.id.toString()) {\n const findTrustReactivationState = preChatTrustReactivationStates.find(state => (state.invoice_id === invoice.id && state.trust_reactivation_available));\n\n const trustReactivationAvailable = findTrustReactivationState && findTrustReactivationState.trust_reactivation_available;\n\n const trustReactivationInvoiceId = findTrustReactivationState && findTrustReactivationState.invoice_id;\n\n const trustReactivationFlow = preChatBillingGenerated && trustReactivationAvailable;\n\n if (trustReactivationFlow) {\n setPreChatTrustReactivationInvoiceId(trustReactivationInvoiceId);\n preChatSetScreen('trustReactivation');\n } else {\n preChatSetScreen('problemSolved');\n }\n setPreChatBillingGenerated(false);\n setPreChatInvoiceId(null);\n preChatSetOpen(true);\n }\n }\n\n onDisplaPaymentModal = (invoiceIdFromPreChat) => {\n const {\n invoice, enabledNewPaymentModal, handleSetDisplayPaymentModalV2,\n } = this.props;\n\n if (enabledNewPaymentModal) {\n handleSetDisplayPaymentModalV2(true, invoice.id);\n }\n\n if (!enabledNewPaymentModal) {\n this.setState({ openPaymentModal: true });\n }\n\n this.setState({ hasQRCodeGenerated: false });\n\n if (invoiceIdFromPreChat) {\n return;\n }\n\n const { subscriptions: subscriptionAnalytics } = billingAnalytics;\n subscriptionAnalytics.executePaymentInvoiceManagerClick('1_link_pagar_fatura');\n }\n\n payInvoice = () => {\n const {\n invoice, paymentMethod: paymentMethodReceiveByProps, ticketModalFeatureToggle,\n } = this.props;\n const { paymentMethod, paymentTicketOnEs } = this.state;\n invoiceUnpaidCardTagManager(paymentMethodReceiveByProps);\n\n switch (paymentMethod) {\n case BOLETO:\n case GATORPAY_BOLETO:\n ticketModalFeatureToggle ? this.handleTicketPayment(invoice) : this.handleGetBoletoURL(invoice);\n break;\n case BOLETO_CL_CO:\n case BOLETO_MX:\n !paymentTicketOnEs.errorOnGetUrl && window.open(paymentTicketOnEs.urlPaymentTicketOnEs);\n break;\n case PAYPAL:\n case GATORPAY_PAYPAL:\n this.handlePaypalPayment(invoice);\n break;\n case CREDIT_CARD:\n case CREDIT_CARD_ES:\n case PARC_2X:\n case PARC_3X:\n case PARC_4X:\n case PARC_5X:\n case PARC_6X:\n case BRASPAG_PARC_1X:\n case BRASPAG_PARC_2X:\n case BRASPAG_PARC_3X:\n case BRASPAG_PARC_4X:\n case BRASPAG_PARC_5X:\n case BRASPAG_PARC_6X:\n case BRASPAG_PARC_7X:\n case BRASPAG_PARC_8X:\n case BRASPAG_PARC_9X:\n case BRASPAG_PARC_10X:\n case BRASPAG_PARC_11X:\n case BRASPAG_PARC_12X:\n this.handleOpen('openDialog');\n break;\n default:\n // eslint-disable-next-line no-console\n !IS_PROD && console.error(`Payment method not implemented ${paymentMethod}`);\n break;\n }\n }\n\n managePaymentMethodsAdapter = (invoicePaymentMethods) => {\n const { gpPaypalESFeatureToggle } = this.props;\n\n if ((gpPaypalESFeatureToggle || COUNTRY === 'br') && invoicePaymentMethods.paypal) {\n const paymentMethods = { ...invoicePaymentMethods };\n delete paymentMethods.paypal;\n return paymentMethods;\n }\n\n return invoicePaymentMethods;\n }\n\n manageInvoicePaymentMethodAdapter = (paymentMethod) => {\n const isBrAndPaypal = COUNTRY === 'br' && paymentMethod === PAYPAL;\n const isEsAndPaypal = COUNTRY !== 'br' && paymentMethod === PAYPAL;\n\n if (isBrAndPaypal) return GATORPAY_PAYPAL;\n if (isEsAndPaypal) return GATORPAY_PAYPAL;\n\n return paymentMethod;\n }\n\n\n mountSelectItems = (invoicePaymentMethods, invoice) => {\n const paymentMethodsAvailable = this.managePaymentMethodsAdapter(invoicePaymentMethods);\n const paymentMethodKey = this.manageInvoicePaymentMethodAdapter(invoice.paymentmethod);\n\n const method = paymentMethodsAvailable[paymentMethodKey];\n const hasMethod = !!method;\n const isMethodSelectable = hasMethod && method.selectable;\n const isMethodPrimary = hasMethod && method.primary;\n\n const canShow = hasMethod && !isMethodSelectable && !isMethodPrimary;\n\n if (canShow) {\n return (\n \n {method.description}\n \n );\n }\n return Object.keys(paymentMethodsAvailable).map(method => (\n paymentMethodsAvailable[method].selectable && (\n \n {paymentMethodsAvailable[method].description}\n \n )\n ));\n }\n\n handleCloseDataCheck = () => {\n this.setState({ openDialogDataCheck: false });\n this.openPreChat();\n }\n\n handleClosePaypalDialog = () => {\n this.setState({ openDialogPaypal: false });\n this.openPreChat();\n }\n\n handleCloseTicketDialog = () => {\n this.setState({ openDialogTicket: false });\n this.openPreChat();\n }\n\n getGenerateErrorPixModalProps = () => {\n const {\n invoice,\n } = this.props;\n\n const onCloseClick = () => {\n this.setState({ openGenerateErrorPixModal: false });\n this.openPreChat();\n };\n\n const onSwitchPaymentMethod = () => {\n this.setState({ hasQRCodeGenerated: false });\n this.setState({ openPaymentModal: true });\n this.setState({ openGenerateErrorPixModal: false });\n this.setState({ openTicketModal: false });\n };\n\n const onUpdateQRCode = (code, qrCode) => {\n if ((code && code !== '') && (qrCode && qrCode !== '')) {\n this.setState({ pixCodeGenerated: code });\n this.setState({ qrCodeGenerated: qrCode });\n this.setState({ hasQRCodeGenerated: true });\n this.setState({ openPaymentModal: true });\n this.setState({ openTicketModal: false });\n this.setState({ openGenerateErrorPixModal: false });\n }\n };\n\n const onPaymentSuccessPix = () => {\n this.setState({ openPaymentModal: false });\n this.setState({ openGenerateErrorPixModal: false });\n this.setState({ openExpiredTimePixModal: false });\n this.setState({ openTicketModal: false });\n this.setState({ openPaymentSuccessPixModal: true });\n getDiagnostic();\n logger.info('tentativa de requisição de diagnostic: UnpaidInvoiceItem');\n };\n\n return {\n onPaymentSuccessPix,\n onSwitchPaymentMethod,\n onUpdateQRCode,\n onCloseClick,\n invoiceId: invoice.id,\n originCalling: OriginCalling.INVOICES_MANAGER,\n };\n }\n\n getTicketModalProps = () => {\n const onCloseClick = () => {\n this.setState({ openTicketModal: false });\n this.openPreChat();\n };\n\n const {\n urlTicket,\n isOriginSavePDF,\n } = this.state;\n\n return {\n onCloseClick,\n originCalling: OriginCalling.INVOICES_MANAGER,\n urlTicket,\n hasOriginSavePDF: isOriginSavePDF,\n titleLabel: 'Redirect to ticket page',\n infoTextLabel: 'To open ticket in another tab was need disable popup blocker.',\n redirectTicketUrlButtonLabel: 'Go to Ticket',\n };\n };\n\n getPaymentSuccessPixModalProps = () => {\n const onCloseClick = () => {\n this.setState({ openPaymentSuccessPixModal: false });\n this.openPreChat();\n };\n\n const onPaymentSuccessPix = () => {\n this.setState({ hasQRCodeGenerated: false });\n this.setState({ openPaymentModal: false });\n this.setState({ openExpiredTimePixModal: false });\n this.setState({ openTicketModal: false });\n this.setState({ openPaymentSuccessPixModal: true });\n };\n\n return {\n onCloseClick,\n onPaymentSuccessPix,\n originCalling: OriginCalling.INVOICES_MANAGER,\n };\n }\n\n getExpiredPixModalProps = () => {\n const {\n invoice,\n } = this.props;\n\n const onCloseClick = () => {\n this.setState({ openExpiredTimePixModal: false });\n this.openPreChat();\n };\n\n const onSwitchPaymentMethod = () => {\n this.setState({ hasQRCodeGenerated: false });\n this.setState({ openPaymentModal: true });\n this.setState({ openExpiredTimePixModal: false });\n this.setState({ pixCodeGenerated: '' });\n this.setState({ qrCodeGenerated: '' });\n };\n\n const onUpdateQRCode = (code, qrCode) => {\n if ((code || code !== '') && (qrCode || qrCode !== '')) {\n this.setState({ pixCodeGenerated: code });\n this.setState({ qrCodeGenerated: qrCode });\n this.setState({ hasQRCodeGenerated: true });\n this.setState({ openPaymentModal: true });\n this.setState({ openExpiredTimePixModal: false });\n this.setState({ openTicketModal: false });\n }\n };\n\n const onPaymentSuccessPix = () => {\n this.setState({ hasQRCodeGenerated: false });\n this.setState({ openPaymentModal: false });\n this.setState({ openExpiredTimePixModal: false });\n this.setState({ openPaymentSuccessPixModal: true });\n this.setState({ openTicketModal: false });\n };\n\n\n return {\n onPaymentSuccessPix,\n onSwitchPaymentMethod,\n onUpdateQRCode,\n onCloseClick,\n invoiceId: invoice.id,\n originCalling: OriginCalling.INVOICES_MANAGER,\n\n };\n };\n\n getPaymentModalProps = () => {\n const {\n invoice,\n enabledChangePayPalAccount,\n enabledTimeToDisplayQRCode,\n } = this.props;\n\n const onCloseClick = () => {\n this.setState({ openPaymentModal: false });\n this.openPreChat();\n };\n\n const onConfirmButtonClick = () => {\n this.setState({ openPaymentModal: false });\n this.openPreChat();\n };\n\n const isNotDomainType = 'x' !== 'domain';\n\n const onFinishPixTimer = () => {\n this.setState({ openPaymentModal: false });\n this.setState({ openExpiredTimePixModal: true });\n };\n\n const onGenerateErrorPix = () => {\n this.setState({ openPaymentModal: false });\n this.setState({ openGenerateErrorPixModal: true });\n };\n\n const onPaymentSuccessPix = () => {\n this.setState({ openPaymentModal: false });\n this.setState({ openGenerateErrorPixModal: false });\n this.setState({ openExpiredTimePixModal: false });\n this.setState({ openPaymentSuccessPixModal: true });\n };\n\n const onRedirectTicket = (urlTicket, isOriginSavePDF = false) => {\n this.setState({ openTicketModal: true });\n this.setState({ isOriginSavePDF });\n this.setState({ urlTicket });\n };\n\n return {\n onCloseClick,\n onConfirmButtonClick,\n onFinishPixTimer,\n onPaymentSuccessPix,\n onGenerateErrorPix,\n onRedirectTicket,\n enabledTimeToDisplayQRCode,\n enabledChangePayPalAccount: { enabledChangePayPalAccount },\n invoiceId: invoice.id,\n discount: invoice.discount,\n isExceedsRetriesCC: invoice.isExceedsRetriesCC,\n dueDate: format(new Date(`${invoice.duedate} 00:00:00`), 'dd/MM/yyyy'),\n originCalling: OriginCalling.INVOICES_MANAGER,\n canShowCancelImmediateButton: isNotDomainType,\n renovationAmountText: formatCurrency(invoice.total),\n };\n };\n\n handleMatchMedia = () => {\n const screenMinimalDesktop = window.matchMedia('(max-width: 1100px)');\n\n if (screenMinimalDesktop.matches) {\n this.setState({\n warningSize: '100%',\n });\n } else {\n this.setState({\n warningSize: '75%',\n });\n }\n }\n\n componentDidMount = () => {\n this.paymentDialog = React.createRef();\n window.addEventListener('resize', this.handleMatchMedia);\n this.handleMatchMedia();\n\n const { openInvoiceOnMount } = this.props;\n this.setState({ openPaymentModal: openInvoiceOnMount });\n }\n\n openPaymentDialog = () => {\n const { paymentMethod, invoicePaymentMethods } = this.props;\n\n if (!paymentMethod) return;\n\n const method = invoicePaymentMethods[paymentMethod];\n const isMethodSelectable = !!method && method.selectable;\n\n const statePayload = isMethodSelectable\n ? [{ paymentMethod }, () => this.payInvoice()]\n : [{ paymentMethod: null }];\n\n this.setState(...statePayload);\n }\n\n componentDidUpdate = (prevProps) => {\n const {\n boletoDataCheck, invoiceIdFromPreChat, invoice, holdDomainRedirect,\n } = this.props;\n const { redirecting, openPaymentModal } = this.state;\n\n const canOpenPaymentDialog = this.paymentDialog\n && this.props !== prevProps\n && !boletoDataCheck.loading\n && !redirecting;\n\n canOpenPaymentDialog && this.openPaymentDialog();\n\n if (!openPaymentModal && !holdDomainRedirect && invoiceIdFromPreChat && invoice && invoiceIdFromPreChat.toString() === invoice.id.toString()) {\n this.onDisplaPaymentModal(true);\n }\n }\n\n render() {\n const {\n classes,\n t,\n invoicePaymentMethods,\n invoice,\n loading,\n fullScreen,\n index,\n loadingDataCheck,\n loadingDataCheckInvoiceId,\n enabledNewPaymentModal,\n onPaymentExecuted,\n enabledChangePayPalAccount,\n } = this.props;\n\n const {\n paymentMethod,\n openDialog,\n paymentTicketOnEs,\n openDialogDataCheck,\n openDialogPaypal,\n openDialogTicket,\n warningSize,\n openPaymentModal,\n openExpiredTimePixModal,\n openGenerateErrorPixModal,\n openTicketModal,\n openPaymentSuccessPixModal,\n hasQRCodeGenerated,\n pixCodeGenerated,\n qrCodeGenerated,\n } = this.state;\n\n const isBoletoES = paymentMethod === BOLETO_CL_CO || paymentMethod === BOLETO_MX;\n const isPaymentPendingPhishingCheck = invoice.statusMessage === INVOICES_STATUS_WITHOUT_CAPITALIZE.PAYMENT_PENDING;\n const enabledNewModalPayment = true;\n\n const getInvoiceAction = () => {\n if (!enabledNewModalPayment) {\n return (paymentMethod && !invoice.needContactUs && !isPaymentPendingPhishingCheck) && (\n !paymentTicketOnEs.loadGetUrlPaymentTicketOnEs ? (\n \n {loadingDataCheck && loadingDataCheckInvoiceId === invoice.id ? (\n \n {t(`invoiceAction.${paymentMethod}`)}\n \n )}\n \n ) : (\n \n {loadingDataCheck && loadingDataCheckInvoiceId === invoice.id ? (\n \n {t('invoiceAction.pay_invoice')}\n \n )}\n \n ) : (\n \n \n \n {t('invoicePaymentMethod')}\n \n \n {t('invoicePaymentMethod')} \n \n {Object.keys(invoicePaymentMethods).length && this.mountSelectItems(invoicePaymentMethods, invoice)}\n \n \n )\n )\n }\n action={getInvoiceAction()}\n enabledNewModalPayment={enabledNewModalPayment}\n type={INVOICES_STATUS.UNPAID}\n />\n \n \n \n \n );\n }\n}\n\nUnpaidInvoiceItem.propTypes = {\n t: PropTypes.func.isRequired,\n invoice: invoiceType.isRequired,\n invoicePaymentMethods: PropTypes.object.isRequired,\n loading: PropTypes.bool.isRequired,\n classes: PropTypes.shape({\n formControl: PropTypes.string,\n inputLabelCustom: PropTypes.string,\n selectCustom: PropTypes.string,\n }).isRequired,\n};\n\nconst mapDispatchToProps = dispatch => bindActionCreators({\n getPaymentMethod,\n payTicketInvoiceForES,\n enqueueSnackbar,\n getBoletoUrl,\n checkBoletoUserData,\n preChatSetOpen,\n setPreChatInvoiceId,\n preChatSetScreen,\n setPreChatBillingGenerated,\n setPreChatTrustReactivationInvoiceId,\n getDiagnostic,\n}, dispatch);\n\nconst mapStateToProps = state => ({\n loading: state.invoices.loading,\n invoicePaymentMethods: state.invoicePaymentMethods.methods,\n loadingDataCheck: state.invoices.boletoDataCheck.loading,\n loadingDataCheckInvoiceId: state.invoices.boletoDataCheck.invoiceId,\n boletoDataCheck: state.invoices.boletoDataCheck,\n gatorpayFeatureToggle: state.featureToggles.toggles.portal.gatorpay,\n gatorpayPaypalFeatureToggle: state.featureToggles.toggles.portal.gatorpay_paypal,\n preChatBillingGenerated: state.preChat.billingGenerated,\n preChatTrustReactivationStates: state.preChat.trustReactivation,\n invoiceIdFromPreChat: state.preChat.invoiceId,\n holdDomainRedirect: state.preChat.triage.holdDomainRedirect,\n ticketModalFeatureToggle: false,\n});\nexport default withMobileDialog()(connect(mapStateToProps, mapDispatchToProps)(withI18n()(withStyles(styles)(UnpaidInvoiceItem))));\n","const styles = theme => ({\n labelDisabled: {\n color: theme.color.halfBaked,\n [theme.breakpoints.down(960)]: {\n color: theme.color.white,\n },\n },\n faq: {\n padding: '29px 0 17px 0',\n },\n bottomCard: {\n marginBottom: 0,\n },\n tabs: {\n backgroundColor: theme.color.chambray,\n [theme.breakpoints.up(960)]: {\n backgroundColor: theme.color.white,\n },\n },\n tabContainerNewBilling: {\n top: '116px',\n },\n invoiceFilter: {\n margin: '0px 24px 0px 24px',\n [theme.breakpoints.down(960)]: {\n margin: 'auto',\n },\n },\n tabContainer: {\n position: 'fixed',\n width: '100%',\n zIndex: 1,\n [theme.breakpoints.up(960)]: {\n boxShadow: '0px 2px 4px 0px #DBDBDB',\n marginLeft: 40,\n marginRight: 40,\n position: 'initial',\n width: 'initial',\n },\n },\n indicator: {\n height: '6px',\n backgroundColor: theme.color.indigo,\n },\n tab: {\n color: theme.color.white,\n opacity: 1,\n transition: '0.2s opacity',\n willChange: 'opacity',\n [theme.breakpoints.up(960)]: {\n color: theme.color.halfBaked,\n },\n },\n tabSelected: {\n color: theme.color.indigo,\n [theme.breakpoints.down(960)]: {\n color: theme.color.white,\n },\n },\n tabTitle: {\n color: theme.color.regentGray,\n fontSize: '14px',\n fontWeight: '400',\n lineHeight: '19px',\n marginBottom: '26px',\n marginTop: '20px',\n padding: '0 20px',\n textAlign: 'center',\n width: '100%',\n },\n swipeableViewsContainer: {\n width: '100%',\n },\n loadMoreDiv: {\n boxShadow: '0px 0px 0px 1px rgba(0,0,0,0.20)',\n background: theme.color.white,\n padding: '40px',\n textAlign: 'center',\n },\n loading: {\n backgroundColor: theme.color.white,\n margin: '8px 24px',\n padding: '24px',\n '@media(max-width: 600px)': {\n margin: '8px 0px',\n },\n },\n swipeContainerTab: {\n padding: '0px 24px 7px 24px',\n [theme.breakpoints.up(960)]: {\n marginTop: 0,\n },\n [theme.breakpoints.down('sm')]: {\n paddingLeft: 0,\n paddingRight: 0,\n },\n },\n filterPaid: {\n minHeight: '60px',\n },\n wrapperContentTab: {\n [theme.breakpoints.down(960)]: {\n paddingTop: 48,\n },\n },\n wrapperContentTabNewBilling: {\n [theme.breakpoints.down('sm')]: {\n paddingTop: 118,\n },\n },\n bottomInfoWrapper: {\n display: 'flex',\n gap: '16px',\n marginTop: '32px',\n '& div': {\n flex: '1 1',\n },\n },\n});\n\nexport default styles;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n position: absolute;\n right: 49px;\n top: 72px;\n width: 285px;\n z-index: ${theme.layers.modal};\n `}\n`;\n\nexport const Content = styled.div`\n display: flex;\n flex-direction: column;\n height: 232px;\n text-align: center;\n`;\n\nexport const CornerTag = styled.div`\n ${({ theme }) => css`\n border-color: ${theme.palette.primary.main} transparent transparent ${theme.palette.primary.main};\n border-style: solid;\n border-width: 25px 25px 25px 25px;\n height: 0;\n line-height: 0;\n margin: 4px 0px 0px 4px;\n width: 0;\n `}\n`;\n\nexport const CornerTagTextContainer = styled.div`\n align-items: center;\n display: flex;\n height: 15px;\n justify-content: center;\n left: 7px;\n position: absolute;\n top: 14px;\n transform: rotate(-45deg);\n width: 30px;\n`;\n\nexport const CornerTagText = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.white.light};\n font-size: ${theme.font.sizes.xxxs};\n font-weight: bold;\n `}\n`;\n\nexport const CreditCardInstallmentsIconAdapter = styled.div`\n display: flex;\n justify-content: center;\n left: 0px;\n position: absolute;\n right: 0px;\n top: 16px;\n`;\n\nexport const CloseButtonAdapter = styled.div`\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n position: absolute;\n right: 16px;\n top: 16px;\n width: 24px;\n`;\n\nexport const TextContainer = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-top: 10px;\n margin: 0px 14px;\n text-align: center;\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.md};\n font-weight: bold;\n margin: 26px 0px 6px 0px;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.grey.dark};\n font-size: ${theme.font.sizes.sm};\n margin: 0px 0px 10px 0px;\n `}\n`;\n\nexport const Link = styled.p`\n ${({ theme }) => css`\n color: ${theme.palette.blue.main};\n cursor: pointer;\n font-size: 16px;\n margin: 0px;\n `}\n`;\n\nexport const Footer = styled.div`\n ${({ theme }) => css`\n background: ${theme.palette.yellow.main};\n background: linear-gradient(\n 90deg,\n ${theme.palette.yellow.main} 11%,\n ${theme.palette.danger.dark} 11%,\n ${theme.palette.danger.dark} 27%,\n ${theme.palette.secondary.primary} 27%,\n ${theme.palette.secondary.primary} 46%,\n ${theme.palette.primary.dark} 46%,\n ${theme.palette.primary.dark} 64%,\n ${theme.palette.yellow.main} 64%,\n ${theme.palette.yellow.main} 77%,\n ${theme.palette.secondary.primary} 77%,\n ${theme.palette.secondary.primary} 88%,\n ${theme.palette.danger.dark} 88%);\n bottom: 0px;\n height: 5px;\n position: absolute;\n width: 100%;\n `}\n`;\n","import { Paper } from '@material-ui/core';\nimport * as Styles from './PixOfferPopup.styles';\nimport CloseIcon from '@material-ui/icons/Close';\nimport React from 'react';\nimport { IconPix } from '@/icons';\n\nconst PixOfferPopup = ({\n closeAriaLabel = 'Close',\n cornerTagText = 'New',\n description = '',\n knowMore = 'See more about',\n onClose,\n onLinkClick,\n title = '!',\n}) => {\n const handleOnClose = () => {\n onClose && onClose();\n };\n\n const handleOnLinkClick = () => {\n onLinkClick && onLinkClick();\n };\n\n return (\n \n \n \n \n \n \n {cornerTagText}\n \n \n \n \n \n \n \n \n \n {title}\n \n \n {description}\n \n \n {knowMore}\n \n \n \n \n \n );\n};\n\nexport default PixOfferPopup;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n margin: 8px 24px 2px 24px;\n background-color: ${theme.v2.colors.white.primary};\n @media (max-width: ${theme.v2.breakpoints.sm}){\n margin: auto;\n }\n `}\n`;\n\nexport const WrapperContent = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.white.primary};\n\n height:92px;\n max-width: 100%;\n padding: 24px 24px 16px 186px;\n position: relative;\n @media (max-width: ${theme.v2.breakpoints.sm}){\n display: flex;\n flex-direction: column;\n padding: 8px 0px 24px 50px;\n width: 100%;\n height:auto;\n }\n `}\n`;\n\nexport const TrianglesWrapper = styled.div`\n${({ theme }) => css`\n left: 24px;\n position: absolute;\n top: 24px;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n left: 20px;\n position: absolute;\n top: 20px;\n }\n `}\n `;\n\n\nexport const SnappyImage = styled.img`\n ${({ theme }) => css`\n bottom: 0px;\n height: 42px;\n left: 88px;\n position:absolute;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n left: 43px;\n }\n `}\n`;\n\nexport const Alert = styled.div`\n ${({ theme }) => css`\n padding: 10px 44px;\n margin: 0px 24px 0px 24px;\n height: auto;\n background-color: ${theme.v2.colors.brand.primaryUltraLight};\n text-align: center;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n width: 100%;\n text-align: left;\n margin: 0px;\n padding: 8px 20px;\n }\n\n`}\n`;\nexport const Content = styled.div`\n ${({ theme }) => css`\n\n margin: 22px 0px 0px 16px;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n max-width: 260px;\n text-align: right;\n\n }\n`}\n`;\n\n\nexport const AlertDescription = styled.span`\n ${\n ({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-weight: ${theme.v2.font.weights.regular};\n font-size: 14px;\n letter-spacing: 0.01px;\n line-height: normal;\n margin: 0px auto 0px 0px;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n margin: 0px 0px 0px auto;\n max-width: 229px;\n text-align:right;\n width: 100%;\n }\n span {\n font-weight: ${theme.v2.font.weights.bold};\n }\n a {\n font-size: 14px;\n }\n `}\n`;\n\nexport const Description = styled.label`\n ${\n ({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-weight: ${theme.v2.font.weights.medium};\n font-size: 16px;\n letter-spacing: 0.01px;\n line-height: normal;\n margin: 0px auto 0px 0px;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n margin: 0px 0px 0px auto;\n max-width: 229px;\n text-align:right;\n width: 100%;\n }\n span {\n color: ${theme.v2.colors.brand.primaryMedium};\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n","import * as Styles from './InvoiceHeader.styles';\nimport React, { useContext } from 'react';\nimport { SmallTriangles } from '@/icons/SmallTriangles';\nimport { ThemeContext } from 'styled-components';\nimport SnappyFace from '@/media/pageDescription/snappy-face.svg';\nimport useLocale from '@/hooks/useLocale';\n\nconst InvoiceHeader = ({\n image = SnappyFace,\n pendingInvoices = 0,\n}) => {\n const theme = useContext(ThemeContext);\n const hasPendingInvoices = pendingInvoices > 0;\n const { billing: billingLocale } = useLocale();\n const { invoices: invoicesLocale } = billingLocale;\n return (\n \n \n \n \n \n \n {invoicesLocale.headerInvoicesPage.text.pendingInvoices(pendingInvoices)}\n \n \n )}\n \n \n );\n};\n\nexport default InvoiceHeader;\n","import styled, { css } from 'styled-components';\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n padding: 9px 31px;\n\n @media (max-width: ${theme.v2.breakpoints.md}}) {\n align-items: center;\n flex-direction: column;\n }\n\n `}\n`;\n\nexport const Header = styled.header``;\n\nexport const TitleModal = styled.h1`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n margin-bottom: 25px;\n `}\n`;\n\nexport const Controls = styled.div`\n display: flex;\n justify-content: center;\n margin-bottom: 25px;\n`;\n\n\nexport const AlertWrapper = styled.div`\n margin-top: 17px;\n margin-bottom: 31px;\n`;\n\nexport const Label = styled.div`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin-bottom: 15px;\n `}\n`;\n\nexport const ContentData = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n display:block;\n }\n `}\n`;\n","import React from 'react';\nimport { Alert, Button } from 'gatorcomponents';\nimport { Modal } from '@/pages/common/Modal';\nimport * as Styles from './ModalFrozenDomain.styles';\nimport useLocale from '@/hooks/useLocale';\nimport { isMobile } from '@/utils/Validators/validation';\nimport { useHistory } from 'react-router';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { preChatActions } from '@/redux/modules';\nimport { preChatAnalytics } from '@/analytics/preChat';\n\nconst ModalFrozenDomain = ({\n onCloseClick = null,\n}) => {\n const history = useHistory();\n const { billing, routes } = useLocale();\n const dispatch = useDispatch();\n const preChatState = useSelector(state => state.preChat);\n const { holdDomainModal: holdDomainModalLocale } = billing.invoices;\n\n const handleOnCloseClick = (event) => {\n onCloseClick && onCloseClick(event);\n dispatch(preChatActions.invoice.set.holdDomainRedirect(false));\n dispatch(preChatActions.preChat.setShowPreChat(true));\n dispatch(preChatActions.invoice.set.invoiceId(null));\n };\n\n const goToInvoicePaymentModal = () => {\n dispatch(preChatActions.invoice.set.holdDomainRedirect(false));\n const unpaidInvoicePath = `${routes.invoices}${routes.unpaid}/${preChatState.invoiceId}`;\n preChatAnalytics.holdDomainModalPayInvoice();\n history.push(unpaidInvoicePath);\n };\n\n return (\n \n \n \n {holdDomainModalLocale.title} \n \n \n \n {holdDomainModalLocale.description1}\n \n \n {holdDomainModalLocale.description2(preChatState.productDetails.domain || '')}\n \n \n \n \n \n \n \n \n );\n};\n\n\nexport default ModalFrozenDomain;\n","import styled, { css } from 'styled-components';\n\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n background: ${theme.v2.colors.white.primary};\n box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.20);\n display: block;\n margin: 1px 0px 0px 0px;\n padding: 24px 24px 24px 24px;\n\n @media (max-width: ${theme.v2.breakpoints.lg}){\n width: 100%;\n }\n\n `}\n`;\n\nexport const WrapperContent = styled.div`\n${({ theme }) => css`\n display: flex;\n @media (max-width: ${theme.v2.breakpoints.md}){\n display: block;\n }\n `}\n`;\n\nexport const ContentDetails = styled.div`\n${({ theme }) => css`\n display: block;\n margin: 0px 0px 0px 24px;\n\n &:first-child {\n margin-left: 0px;\n };\n\n @media (max-width: ${theme.v2.breakpoints.xs}){\n margin: 8px 0px 0px 0px;\n\n &:nth-child(2) {\n margin: 8px 0px 0px 24px;\n }\n\n }\n `}\n`;\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n background: ${theme.v2.colors.white.primary};\n display: flex;\n height: 28px;\n min-width:214px;\n align-items: center;\n width: 320px;\n\n `}\n`;\n\nexport const Block = styled.div`\n ${({ theme }) => css`\n background: ${theme.v2.colors.white.primary};\n padding: 0px 0px 0px 8px;\n\n\n &:first-child{\n padding: 0px 0px 0px 0px;\n }\n\n div:first-child{\n position: unset;\n }\n `}\n`;\n\nexport const InvoiceIdDescription = styled.div`\n ${({ theme }) => css`\n background: ${theme.v2.colors.white.primary};\n padding: 0px 0px 0px 8px;\n width: 100px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n div:first-child{\n position: unset;\n }\n\n @media (max-width: ${theme.v2.breakpoints.xs}){\n width: 100px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n `}\n`;\n\nexport const InvoiceId = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: 16px;\n font-family: ${theme.v2.font.family.primary};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: normal;\n width: 220px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `}\n`;\n\nexport const Icon = styled.svg`\n width: 18px;\n height: 18px;\n margin: 4px 0px 0px 0px;\n`;\n\nexport const ContentProducts = styled.div`\n${({ theme }) => css`\n\n align-items: center;\n display: block;\n margin: 0px 0px 0px 24px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n margin: 8px 0px 0px 24px;\n }\n `}\n`;\n\nexport const WrapperDetails = styled.div`\n${({ theme, isPaid }) => css`\n display: flex;\n margin: 0px 0px 0px 0px;\n flex-wrap: wrap;\n\n >div:last-child {\n\n @media (max-width: 1366px){\n margin: ${isPaid ? '16px 0px 0px 0px' : '0px 0px 0px 24px'};\n }\n\n @media (max-width: ${theme.v2.breakpoints.lg}){\n margin: ${isPaid ? '16px 0px 0px 0px' : '0px 0px 0px 24px'};\n }\n\n @media (max-width: 1024px){\n margin: 16px 0px 0px 0px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.xs}){\n margin: 24px 0px 0px 0px;\n }\n\n };\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n margin: 0px 0px 0px 24px;\n }\n\n @media (max-width: 1366px){\n max-width: ${isPaid ? '300px' : 'fit-content'};\n }\n\n @media (max-width: ${theme.v2.breakpoints.lg}){\n min-width: ${isPaid ? '300px' : 'fit-content'};\n }\n\n @media (max-width: 1024px){\n max-width: 300px;\n min-width: min-content;\n }\n\n`}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 14px;\n font-style: normal;\n font-weight: ${theme.v2.font.weights.regular};\n line-height: normal;\n margin: 4px 0px 0px 0px;\n max-width: 300px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `}\n`;\n\nexport const Title = styled.p`\n${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: 14px;\n font-style: normal;\n font-weight: ${theme.v2.font.weights.regular};\n line-height: normal;\n margin: 8px 0px 0px 0px;\n max-width: 276px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `}\n`;\n\nexport const ContentActions = styled.div`\n${({ theme, status }) => css`\n display: block;\n margin-left: auto;\n\n & button:last-child {\n margin: 0px 0px 0px 16px;\n }\n\n @media (max-width: 1380px){\n min-width: fit-content;\n\n }\n\n\n @media (max-width: ${theme.v2.breakpoints.lg}){\n flex-wrap: wrap;\n margin: 24px 0px 0px 0px;\n text-align: center;\n width: 100%;\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n display:${status === 'paid' ? 'flex' : 'block'};\n flex-wrap: unset;\n margin-left:${status === 'paid' ? '-12px' : 'auto'};\n margin-top: 24px;\n text-align: center;\n width: 100%;\n }\n `}\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './InvoiceCard.styles';\nimport { Button, IconInvoice, Tag } from 'gatorcomponents';\nimport { INVOICES_STATUS_WITHOUT_CAPITALIZE } from '@/config/invoices/invoiceStatus';\nimport { PAYMENT_METHOD, PAYMENT_TYPE } from '@/components/Domain/RefundAlertsModal/RefundAlertsModal.enum';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { billingAnalytics } from '@/analytics';\nimport { format } from 'date-fns';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport SaversDiscountBanner from '../SaversDiscountBanner';\nimport { DiscountType, OriginCalling } from '@/components/billing/subscriptions/PaymentModal/PaymentModal.types';\nimport { GroupPaymentModal } from '@/components/billing/subscriptions/GroupPaymentModal';\nimport { DOWNLOAD_INVOICE_VOUCHER } from '@/config/api';\nimport { visualizeNFSeTagManager } from '@/utils/ThirdParties/tagManager';\nimport { useDispatch, useSelector } from 'react-redux';\nimport ModalInvoiceWrapped from '../ModalInvoiceWrapped';\nimport { useResize } from '@/hooks/useResize';\nimport { commonActions, invoicesActions } from '@/redux/modules';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { CHARLIE_PAYMENT_MODAL_V2, XRAY_ENABLED_NEW_NFSE_ENDPOINT_CALLING } from '@/config/GrowthBook/constants';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport logger from '@/utils/logger';\n\n\nconst InvoiceCard = ({\n onToggleUpdatedInvoices,\n updatedInvoices,\n invoice = null,\n index = null,\n openInvoiceOnMount = false,\n handleSetDisplayPaymentModalV2,\n onExecuteAction = null,\n}) => {\n const { billing: billingLocale } = useLocale();\n const clientInfo = useSelector(state => state.summary);\n const dispatch = useDispatch();\n const invoicesState = useSelector(state => state.invoicesV2);\n\n const windowRect = useResize();\n const { width } = windowRect;\n const isTablet = width === 1024;\n const testId = 'invoice-card';\n\n const invoiceId = invoice.id;\n\n const isPaymentPendingPhishingCheck = invoice => invoice.statusMessage === INVOICES_STATUS_WITHOUT_CAPITALIZE.PAYMENT_PENDING;\n\n const [displayModalPayment, setDisplayModalPayment] = useState(openInvoiceOnMount);\n const [nfseModalOpen, setNfseModalOpen] = useState(false);\n const [nfseModalRender, setNfseModalRender] = useState(false);\n\n const enabledNewNfseEndpointCalling = useFeatureIsOn(XRAY_ENABLED_NEW_NFSE_ENDPOINT_CALLING);\n const enabledNewPaymentModal = useFeatureIsOn(CHARLIE_PAYMENT_MODAL_V2);\n\n const getDueDateFormated = () => {\n try {\n return format(new Date(`${invoice.duedate} 00:00:00`), 'dd/MM/yyyy');\n } catch (error) {\n logger.error('Error: %s', error);\n }\n return '-';\n };\n\n const hasValidDueDate = getDueDateFormated() !== '-';\n const shouldDisplayPaymentModal = invoice && invoice.id !== undefined && hasValidDueDate;\n\n const handleSetDisplayModalPayment = (display) => {\n setDisplayModalPayment(display);\n enabledNewPaymentModal && shouldDisplayPaymentModal && handleSetDisplayPaymentModalV2(display, invoice.id);\n };\n\n const { listOfNfse, currentInvoiceId } = invoicesState.invoices;\n\n const generateNameProductToList = (product) => {\n if (product.product === 'hosting') {\n return `${product.plan} - ${product.domain}`;\n }\n if (product.product === 'upgrade') {\n if (product.type === 'cycle') {\n return `${billingLocale.invoices.alterCycle} ${product.plan} ${product.domain}`;\n }\n return `${billingLocale.invoices.alterPlan} ${product.plan} ${product.domain}`;\n }\n if (product.product === 'domain') {\n switch (product.type) {\n case 'renew':\n return `${billingLocale.invoices.renewDomain} - ${product.domain}`;\n case 'register':\n return `${billingLocale.invoices.registerDomain}- ${product.domain}`;\n case 'cycle':\n return `${product.plan}`;\n case 'transfer':\n return `${product.plan}`;\n case 'plan':\n return `${product.plan}`;\n default:\n break;\n }\n }\n if (product.product === 'addon') {\n return `${product.plan}`;\n }\n };\n\n const mountListProduct = () => {\n const products = [];\n invoice.products && invoice.products.forEach((product) => {\n products.push(generateNameProductToList(product));\n });\n\n return products;\n };\n\n const listProducts = mountListProduct();\n\n const getTagStatus = () => {\n if (invoice.substatus === INVOICES_STATUS_WITHOUT_CAPITALIZE.PHISHING) {\n return ({billingLocale.invoices.infotReceiptGeneration}
),\n type: 'error',\n }));\n }\n };\n\n const getInvoiceAction = () => {\n const actions = [];\n if (invoice != null) {\n if (enabledToPay() && !invoice.needContactUs && !isPaymentPendingPhishingCheck(invoice)) {\n actions.push(\n \n onDisplaPaymentModal()}\n label={billingLocale.invoices.goToPayment}\n />\n ,\n );\n }\n if (invoice.statusMessage === INVOICES_STATUS_WITHOUT_CAPITALIZE.PAID) {\n actions.push(\n \n ,\n );\n }\n\n if (invoice.statusMessage === INVOICES_STATUS_WITHOUT_CAPITALIZE.PAID && isBRServer) {\n actions.push(\n \n onDisplayNfseModal()}\n label={billingLocale.invoices.showReceiptAction}\n />\n ,\n );\n }\n }\n return actions;\n };\n\n const generateListProducts = () => {\n const listProductsFormated = [];\n listProducts != null && listProducts.forEach((item) => {\n listProductsFormated.push({item} );\n });\n return listProductsFormated;\n };\n\n return (\n \n \n \n \n \n \n \n \n \n {invoiceId} \n \n \n {getTagStatus()}\n \n \n \n {generateListProducts()}\n \n \n \n \n {billingLocale.manageSubscription.dueDateLabel} \n {getDueDateFormated()} \n \n \n {billingLocale.invoices.totalInvoice} \n {formatCurrency(invoice.subtotal)} \n \n {displayPaymentMethod() && (\n \n {billingLocale.manageSubscription.installmentsPaymentFormLabel} \n {paymentMethodLabel()} \n \n )}\n \n\n {!isTablet && (\n \n {getInvoiceAction(invoice)}\n \n )}\n \n\n {isTablet && (\n \n {getInvoiceAction(invoice)}\n \n )}\n\n {invoice.discount && invoice.discount.type === DiscountType.SAVERS35OFF && (\n onCloseNfseModal()}\n />\n )}\n \n );\n};\n\n\nexport default InvoiceCard;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n background: ${theme.v2.colors.white.primary};\n\n & div:nth-child(3) {\n & div {\n display: inline;\n & input {\n width: calc(100% - 18px);\n }\n & div:nth-child(2) {\n right: 0px;\n }\n }\n }\n `}\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './InvoiceFilter.styles';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { PageTitle } from 'gatorcomponents';\nimport { debounce } from '@/utils/debounce';\n\nconst InvoiceFilter = ({\n invoices = [],\n setInvoices = null,\n paginationData = null,\n onLoadInvoices = null,\n onChangeChip = null,\n currentInvoiceStatus = 'all',\n}) => {\n const { billing: billingLocale } = useLocale();\n const testId = 'invoice-filter';\n const [selectChip, setSelectChip] = useState('all');\n const MAX_INVOCEID_SIZE = 12;\n const defaultFilteredOptions = [\n {\n id: '0',\n label: billingLocale.invoices.filterOptions.all,\n value: 'all',\n checked: currentInvoiceStatus === 'unpaid',\n },\n {\n id: '1',\n label: billingLocale.invoices.filterOptions.financialPending,\n value: 'unpaid',\n checked: false,\n },\n {\n id: '2',\n label: billingLocale.invoices.filterOptions.paid,\n value: 'paid',\n checked: currentInvoiceStatus === 'paid',\n },\n {\n id: '3',\n label: billingLocale.invoices.filterOptions.cancelled,\n value: 'cancelled',\n checked: currentInvoiceStatus === 'cancelled',\n },\n ];\n\n const [filterText, setFilterText] = useState('');\n const [filterOptions, setFilterOptions] = useState(defaultFilteredOptions);\n\n useEffect(() => {\n setFilterOptions(defaultFilteredOptions);\n }, [currentInvoiceStatus]);\n\n useEffect(() => {\n if (filterText === '') {\n onLoadInvoices('', selectChip);\n }\n }, [filterText]);\n\n const clearFilter = (filteredOptions, setFilteredOptions, setFilterText) => {\n const options = [...filteredOptions]\n .map((option, index) => ({ ...option, checked: index === 0 }));\n\n setFilteredOptions(options);\n setFilterText('');\n };\n\n const getCheckedOptionsValues = useCallback(options => options\n .filter(option => option.checked)\n .map(option => option.value), []);\n\n const FILTER_OPTION_ALL = 'all';\n const financialPendingStatus = [\n 'unpaid',\n 'unpaidExpired',\n 'paymentPending',\n 'pendingAnalysis',\n 'pending',\n 'expired',\n 'suspended',\n 'overdue',\n 'toDue',\n 'active'];\n\n const sortOrderByStatus = [\n 'expired',\n 'overdue',\n 'unpaidExpired',\n 'unpaid',\n 'paymentPending',\n 'pendingAnalysis',\n 'paid',\n 'refunded',\n 'cancelled',\n 'others'];\n\n const orderByStatus = useCallback(\n (\n { statusMessage: statusA },\n { statusMessage: statusB },\n ) => (sortOrderByStatus.indexOf(statusA) - sortOrderByStatus.indexOf(statusB)), [],\n );\n\n const filterByOptions = useCallback((items) => {\n const optionsValues = getCheckedOptionsValues(filterOptions);\n if (optionsValues.includes('unpaid')) {\n return financialPendingStatus.includes(items.statusMessage);\n }\n\n return optionsValues.includes(items.statusMessage) || optionsValues.includes(FILTER_OPTION_ALL);\n }, [filterOptions, getCheckedOptionsValues]);\n\n const filterByNameInProducts = useCallback((item) => {\n if (item && item.id.toString().includes(filterText.toLowerCase())) {\n return true;\n }\n let hasTextInProducts = false;\n\n item.products && item.products.forEach((product) => {\n if (product.domain && product.domain.toLowerCase().includes(filterText.toLowerCase())) {\n hasTextInProducts = true;\n }\n if (product.product && product.product.toLowerCase().includes(filterText.toLowerCase())) {\n hasTextInProducts = true;\n }\n if (product.plan && product.plan.toLowerCase().includes(filterText.toLowerCase())) {\n hasTextInProducts = true;\n }\n });\n return hasTextInProducts;\n }, [filterText]);\n\n\n const loadAndFilterInvoices = debounce(() => {\n onLoadInvoices(filterText, selectChip);\n const itemsFiltered = invoices\n .filter(filterByNameInProducts)\n .sort(orderByStatus);\n setInvoices(itemsFiltered);\n }, 500);\n\n useEffect(() => {\n if ((paginationData[selectChip] && filterText.length > 6) || invoices.length === 0) {\n if (filterText.length <= MAX_INVOCEID_SIZE) {\n loadAndFilterInvoices();\n }\n }\n }, [filterText, selectChip]);\n\n useEffect(() => {\n if (paginationData[selectChip] !== null || (paginationData[selectChip] && invoices.length >= paginationData[selectChip].total) || filterText.length === 0) {\n if (invoices.length !== 0) {\n const itemsFiltered = invoices\n .filter(filterByOptions)\n .filter(filterByNameInProducts)\n .sort(orderByStatus);\n setInvoices(itemsFiltered);\n }\n }\n }, [invoices, filterOptions, filterText]);\n\n const getFilterProps = () => {\n const defaultProps = {\n testId: 'filter-invoices',\n title: billingLocale.invoices.invoiceListTitle,\n filterLabel: billingLocale.filterLabel,\n filterChips: filterOptions,\n filterByPlaceholder: billingLocale.invoices.searchByProductInvoice,\n clearFilterLabel: billingLocale.clearLabel,\n filterByValue: filterText,\n handleClearFilter: () => clearFilter(filterOptions, setFilterOptions, setFilterText),\n };\n\n\n const clearOptions = () => {\n const newOptions = [...defaultFilteredOptions].map((option) => {\n const newOption = { ...option };\n newOption.checked = false;\n return newOption;\n });\n return newOptions;\n };\n\n\n const handleChangeChip = (chip) => {\n setSelectChip(chip.value);\n onChangeChip && onChangeChip(chip.value);\n const newOptions = clearOptions();\n\n const chipIndex = newOptions.findIndex(option => option.id === chip.id);\n\n if (!chip.checked) {\n newOptions[0].checked = true;\n }\n\n if (chip.checked) {\n newOptions[chipIndex].checked = true;\n }\n setFilterOptions(newOptions);\n };\n\n const handleChangeFilterBy = (text) => {\n setFilterText(text);\n };\n\n return {\n ...defaultProps,\n handleChangeFilterBy,\n handleChangeChip,\n };\n };\n return (\n \n \n );\n};\n\n\nexport default InvoiceFilter;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.white.primary};\n margin: -1px 24px -1px 24px;\n @media (max-width: ${theme.v2.breakpoints.sm}){\n margin: auto;\n }\n `}\n`;\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.brand.primaryUltraLight};\n height: auto;\n margin: 0px 24px 0px 24px;\n padding: 10px 44px;\n text-align: center;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n margin: 0px;\n padding: 8px 20px;\n text-align: left;\n width: 100%;\n }\n\n`}\n`;\n\nexport const Description = styled.span`\n ${\n ({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-weight: ${theme.v2.font.weights.regular};\n font-size: 14px;\n letter-spacing: 0.01px;\n line-height: normal;\n margin: 0px auto 0px 0px;\n\n @media (max-width: ${theme.v2.breakpoints.md}){\n margin: 0px 0px 0px auto;\n max-width: 229px;\n text-align:right;\n width: 100%;\n }\n span {\n font-weight: ${theme.v2.font.weights.bold};\n }\n a {\n font-size: 14px;\n }\n `}\n`;\n","import * as Styles from './BannerInvoiceSplit.styles';\nimport React, { } from 'react';\nimport useLocale from '@/hooks/useLocale';\nimport { Link } from 'gatorcomponents';\n\nconst BannerInvoiceSplit = () => {\n const { billing: billingLocale } = useLocale();\n const { invoices: invoicesLocale } = billingLocale;\n return (\n \n \n \n {invoicesLocale.headerInvoicesPage.text.splitAlert}\n {' '}\n \n \n \n );\n};\n\nexport default BannerInvoiceSplit;\n","import React, {\n Component, Fragment, useState,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport {\n withStyles, Tabs, Tab, Typography,\n} from '@material-ui/core';\nimport { withRouter } from 'react-router-dom';\nimport { withI18n } from 'react-i18next';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport withWidth, { isWidthDown } from '@material-ui/core/withWidth';\nimport SwipeableViews from 'react-swipeable-views';\nimport { loadInvoices, loadInvoicesWithParams } from '@/redux/actions/invoices';\nimport { loadUnpaidInvoices } from '@/redux/actions/unpaidInvoices';\nimport PageTitle from '@/components/PageTitle';\nimport FaqInvoicesPage from '@/components/FrequentlyQuestions/FaqInvoicesPage';\nimport FilterInvoices from '@/components/Filters/FilterInvoices';\nimport UnpaidInvoiceItem from '@/components/Invoices/UnpaidInvoiceItem';\nimport InvoiceItem from '@/components/Invoices/InvoiceItem';\nimport FilterCard from '@/components/Cards/FilterCard';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport ActionButton from '@/components/Buttons/ActionButton';\nimport { INVOICES_STATUS, INVOICES_STATUS_WITHOUT_CAPITALIZE } from '@/config/invoices/invoiceStatus';\nimport { loadReCaptcha } from '@/utils/Application/reCaptcha';\nimport { BottomAdvertisementHandler } from '@/pages/advertisement/BottomAdvertisementHandler';\nimport { PaymentSuccessModal } from '@/components/billing';\nimport { PAYMENT_STATUS } from './types';\nimport styles from './styles';\nimport { SplitPaymentOfferModal } from '@/components/Invoices/SplitPaymentOfferModal';\nimport { setCookie, getCookie } from '@/utils/Application/cookies';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { PixOfferPopup } from '@/components/Pix/PixOfferPopup';\nimport { differenceInCalendarDays } from 'date-fns';\nimport { InvoiceHeader } from '@/pages/billing/invoices/InvoiceHeader';\nimport PageMessages from '../common/PageMessages';\nimport { ModalFrozenDomain } from '@/components/billing/subscriptions/ModalFrozenDomain';\nimport { useFeatureIsOn, useFeatureValue } from '@growthbook/growthbook-react';\nimport {\n CHARLIE_PAYMENT_MODAL_V2,\n XRAY_ENABLED_HEADER_INVOICE_PAGE,\n XRAY_ENABLED_NEW_LAYOUT_INVOICE_PAGE,\n XRAY_LIMIT_DATE_TO_DISPLAY_INVOICE_SPLIT_MESSAGE,\n XRAY_LIMIT_DATE_TO_DISPLAY_SPLIT_PAYMENT_BANNER,\n} from '@/config/GrowthBook/constants';\nimport InvoiceCard from '@/components/Invoices/InvoiceCards';\nimport InvoiceFilter from '@/components/Invoices/InvoiceFilterPage/InvoiceFilterPage';\nimport { Button, Skeleton } from 'gatorcomponents';\nimport { BannerInvoiceSplit } from '../billing/invoices/BannerInvoiceSplit';\nimport { usePaymentModal } from '@/hooks/billing/subscriptions/usePaymentModal';\nimport { CALLER } from '@/hooks/billing/subscriptions/usePaymentModal/usePaymentModal.types';\n\nclass InvoicesPage extends Component {\n tabTitles = {\n [INVOICES_STATUS.UNPAID]: 'unpaidInvoicesPageSubtitle',\n [INVOICES_STATUS.PAID]: 'paidInvoicesPageSubtitle',\n [INVOICES_STATUS.CANCELLED]: 'cancelledInvoicesPageSubtitle',\n }\n\n emptyTabTitles = {\n [INVOICES_STATUS.UNPAID]: 'unpaidInvoicesEmptyPageSubtitle',\n [INVOICES_STATUS.PAID]: 'paidInvoicesEmptyPageSubtitle',\n [INVOICES_STATUS.CANCELLED]: 'cancelledInvoicesEmptyPageSubtitle',\n }\n\n constructor(props) {\n super(props);\n\n const {\n t,\n match,\n setCurrentInvoiceStatus,\n } = this.props;\n let invoiceStatus;\n loadReCaptcha();\n\n switch (match.params.tab) {\n case t('routes.unpaid'):\n invoiceStatus = INVOICES_STATUS_WITHOUT_CAPITALIZE.UNPAID;\n break;\n case t('routes.paid'):\n invoiceStatus = INVOICES_STATUS_WITHOUT_CAPITALIZE.PAID;\n break;\n case t('routes.cancelled'):\n invoiceStatus = INVOICES_STATUS_WITHOUT_CAPITALIZE.CANCELLED;\n break;\n default:\n break;\n }\n\n setCurrentInvoiceStatus(invoiceStatus);\n\n this.state = {\n updatedInvoices: false,\n currentTab: INVOICES_STATUS.UNPAID,\n filter: {\n statusValue: '',\n invoiceId: '',\n },\n visible: 50,\n indexTab: 0,\n emptySwipeTabTitles: [\n INVOICES_STATUS.UNPAID,\n INVOICES_STATUS.PAID,\n INVOICES_STATUS.CANCELLED,\n ],\n payment: {\n status: PAYMENT_STATUS.HIDDEN,\n productType: null,\n },\n showSplitPaymentOfferModal: true,\n showPixOffer: true,\n loading: false,\n statusSelected: 'all',\n };\n }\n\n componentDidMount() {\n let currentTabState;\n let indexTab;\n const {\n t,\n match,\n loadInvoices,\n loadUnpaidInvoices,\n } = this.props;\n switch (match.params.tab) {\n case t('routes.unpaid'):\n currentTabState = INVOICES_STATUS.UNPAID;\n indexTab = 0;\n break;\n case t('routes.paid'):\n currentTabState = INVOICES_STATUS.PAID;\n indexTab = 1;\n break;\n case t('routes.cancelled'):\n currentTabState = INVOICES_STATUS.CANCELLED;\n indexTab = 2;\n break;\n default:\n break;\n }\n\n this.setState({\n currentTab: currentTabState,\n indexTab,\n filter: {\n statusValue: '',\n invoiceId: match.params.invoiceId ? match.params.invoiceId : '',\n },\n });\n\n loadInvoices(currentTabState);\n loadUnpaidInvoices();\n }\n\n componentDidUpdate(_prevProps) {\n const {\n match,\n t,\n } = this.props;\n if ((_prevProps\n && _prevProps.match\n && _prevProps.match.params\n && _prevProps.match.params.invoiceId !== match.params.invoiceId)\n || (_prevProps\n && _prevProps.match\n && _prevProps.match.params\n && _prevProps.match.params.tab !== match.params.tab)\n ) {\n let currentTabState;\n let indexTab;\n\n switch (match.params.tab) {\n case t('routes.unpaid'):\n currentTabState = INVOICES_STATUS.UNPAID;\n indexTab = 0;\n break;\n case t('routes.paid'):\n currentTabState = INVOICES_STATUS.PAID;\n indexTab = 1;\n break;\n case t('routes.cancelled'):\n currentTabState = INVOICES_STATUS.CANCELLED;\n indexTab = 2;\n break;\n default:\n break;\n }\n // eslint-disable-next-line react/no-did-update-set-state\n this.setState({\n currentTab: currentTabState,\n indexTab,\n filter: {\n statusValue: '',\n invoiceId: match.params.invoiceId ? match.params.invoiceId : '',\n },\n });\n }\n }\n\n onToggleUpdatedInvoices = (value) => {\n this.setState(\n {\n updatedInvoices: value,\n filter: {\n statusValue: '',\n invoiceId: '',\n },\n },\n );\n };\n\n handleTabChange = (_, newTab) => {\n const { emptySwipeTabTitles } = this.state;\n this.setState(\n {\n currentTab: emptySwipeTabTitles[newTab],\n filter: {\n statusValue: '',\n invoiceId: '',\n },\n visible: 5,\n indexTab: newTab,\n },\n () => this.onLoadInvoices(),\n );\n }\n\n handleChangeIndex = (index) => {\n const { emptySwipeTabTitles } = this.state;\n this.setState(\n {\n indexTab: index,\n visible: 5,\n currentTab: emptySwipeTabTitles[index],\n },\n () => {\n this.onLoadInvoices();\n this.handleChangeUrlWithTraduction();\n },\n );\n }\n\n handleChangeUrlWithTraduction = () => {\n let url = '';\n const { indexTab } = this.state;\n const { t } = this.props;\n\n switch (parseInt(indexTab, 10)) {\n case 0:\n url = t('routes.unpaid');\n break;\n case 1:\n url = t('routes.paid');\n break;\n case 2:\n url = t('routes.cancelled');\n break;\n default:\n break;\n }\n\n window.history.replaceState({}, null, url);\n }\n\n onLoadInvoices = () => {\n const { loadInvoices } = this.props;\n const { currentTab } = this.state;\n loadInvoices(currentTab);\n }\n\n getTotalUnpaidInvoices = (invoices) => {\n let total = 0;\n\n const {\n setTotalInvoicesUnpaid,\n } = this.props;\n\n const financialPendingStatus = [\n 'unpaid',\n 'unpaidExpired',\n 'pendingPayment',\n 'pending',\n 'overdue',\n 'toDue'];\n\n invoices && invoices.forEach((invoice) => {\n if (financialPendingStatus.includes(invoice.statusMessage)) {\n total += 1;\n }\n });\n setTotalInvoicesUnpaid(total);\n }\n\n onLoadInvoiceWithParams = (search, status, page = null) => {\n const { loadInvoicesWithParams, invoicesByStatus } = this.props;\n const { updatedInvoices } = this.state;\n const invoices = updatedInvoices && invoicesByStatus.all ? invoicesByStatus.all : null;\n const hideLoading = () => {\n this.setState({\n loading: false,\n });\n };\n\n loadInvoicesWithParams(status, search, page, invoices, hideLoading);\n }\n\n onChangeChip = (chip) => {\n this.setState({\n statusSelected: (chip),\n });\n\n this.onLoadInvoiceWithParams('', chip);\n }\n\n onExecuteAction = () => {\n this.onLoadInvoiceWithParams('', 'all');\n }\n\n inputChange = itemKey => (e) => {\n const { filter } = this.state;\n\n this.setState({\n filter: {\n ...filter,\n [itemKey]: e.target.value,\n },\n visible: 10,\n });\n }\n\n filterInvoices = (invoicesByStatus) => {\n const { filter } = this.state;\n let filterInvoices;\n\n if (filter.statusValue !== '') {\n filterInvoices = invoicesByStatus.filter(invoice => invoice.statusMessage === filter.statusValue);\n } else {\n filterInvoices = invoicesByStatus;\n }\n if (filter.invoiceId !== null) {\n filterInvoices = filterInvoices.filter(invoice => invoice.id.toString().includes(filter.invoiceId));\n }\n return filterInvoices;\n }\n\n loadMore = (length) => {\n this.setState(prev => ({\n visible: prev.visible + (length - prev.visible),\n }));\n }\n\n loadMoreInBackend = () => {\n const {\n invoicesByStatus,\n paginationData,\n } = this.props;\n\n const { statusSelected } = this.state;\n\n this.setState({\n loading: true,\n });\n\n if (invoicesByStatus[statusSelected].length <= paginationData[statusSelected].total) {\n const pageNumber = paginationData[statusSelected].next_page_url ? paginationData[statusSelected].next_page_url.split('=')[1] : null;\n this.onLoadInvoiceWithParams('', statusSelected, pageNumber);\n } else {\n this.setState({\n loading: false,\n });\n }\n this.getTotalUnpaidInvoices(invoicesByStatus.all);\n }\n\n renderLoadMoreButton = () => {\n const {\n invoicesByStatus,\n paginationData,\n } = this.props;\n const { statusSelected } = this.state;\n\n this.getTotalUnpaidInvoices(invoicesByStatus[statusSelected]);\n return paginationData[statusSelected] && paginationData[statusSelected].to !== paginationData[statusSelected].total;\n }\n\n handleTotal = (tab) => {\n const { invoicesByStatus } = this.props;\n let total;\n\n switch (tab) {\n case 'Unpaid':\n total = invoicesByStatus.Unpaid.length;\n break;\n case 'Paid':\n total = invoicesByStatus.Paid.length;\n break;\n case 'Cancelled':\n total = invoicesByStatus.Cancelled.length;\n break;\n default:\n break;\n }\n\n return total;\n }\n\n setPaymentStatus = async ({ status }) => {\n this.setState({\n payment: {\n status,\n },\n });\n }\n\n handleOnPaymentModalClose = () => {\n this.setState({\n payment: {\n status: PAYMENT_STATUS.HIDDEN,\n },\n });\n };\n\n handleOnSplitPaymentsModalClose = () => {\n this.setState({\n showSplitPaymentOfferModal: false,\n });\n setCookie('hg-modal-split-payment', false);\n };\n\n handleOnPixOfferPopupClose = () => {\n this.setState({\n showPixOffer: false,\n });\n setCookie('hg-popup-pix', false);\n };\n\n handleOnPixOfferPopupLinkClick = () => {\n const {\n t,\n } = this.props;\n\n window.open(t('pixOfferPopupKnowMoreURL'), '_blank');\n }\n\n render() {\n const {\n currentTab,\n visible,\n indexTab,\n emptySwipeTabTitles,\n filter,\n payment,\n showSplitPaymentOfferModal,\n loading,\n showPixOffer,\n updatedInvoices,\n } = this.state;\n\n const {\n theme,\n t,\n classes,\n invoicesByStatus,\n paginationData,\n selectFilters,\n invoicesLoadingUnpaid,\n invoicesLoadingPaid,\n invoicesLoadingCancelled,\n width,\n match,\n enabledInvoiceSplitPaymentBanner,\n limitDateToDisplayPopupPixLabel,\n enabledHeaderInvoicePage,\n enabledInvoiceSplitMessage,\n holdDomainRedirect,\n enabledNewLayoutInvoicePage,\n enabledNewPaymentModal,\n handleSetDisplayPaymentModalV2,\n setInvoices,\n invoices,\n totalInvoicesUnpaid,\n invoicesLoading,\n currentInvoiceStatus,\n displayPaymentModalV2,\n mountPaymentModal,\n } = this.props;\n\n const isLoading = invoicesLoading\n || invoicesLoadingUnpaid\n || invoicesLoadingPaid\n || invoicesLoadingCancelled;\n\n const cookiePopupSplitPayment = getCookie('hg-modal-split-payment') !== 'false';\n const cookiePopupPix = getCookie('hg-popup-pix') !== 'false';\n const enablePixPopup = limitDateToDisplayPopupPixLabel != null && differenceInCalendarDays(new Date(`${limitDateToDisplayPopupPixLabel} 00:00:00`), new Date()) > 0;\n\n const titlePage = invoicesByStatus[emptySwipeTabTitles[indexTab]].length < 1 && !enabledNewLayoutInvoicePage && (\n {t(this.emptyTabTitles[currentTab])} \n );\n\n const contentFaqInvoicesPage = (\n \n
\n );\n\n const isWidthDownSm = isWidthDown('sm', width);\n\n const tabRoutes = {\n unpaid: `${t('routes.invoices')}${t('routes.unpaid')}`,\n paid: `${t('routes.invoices')}${t('routes.paid')}`,\n cancelled: `${t('routes.invoices')}${t('routes.cancelled')}`,\n };\n\n const searchParams = new URLSearchParams(window.location.search);\n\n const shouldOpenInvoice = window.location.href.includes('open_invoice=')\n ? searchParams.get('open_invoice')\n : false;\n\n return (\n \n {displayPaymentModalV2 && mountPaymentModal({\n onToggleUpdatedInvoices: this.onToggleUpdatedInvoices,\n onExecuteSplitAction: this.onExecuteAction,\n })}\n\n {enabledInvoiceSplitPaymentBanner && showSplitPaymentOfferModal && cookiePopupSplitPayment && (\n
\n )}\n {isBRServer && enablePixPopup && cookiePopupPix && showPixOffer && (\n
\n )}\n\n
\n\n {enabledNewLayoutInvoicePage && (\n
\n
\n )}\n\n {(enabledNewLayoutInvoicePage && isLoading) && (\n
\n
\n )}\n\n {enabledHeaderInvoicePage && totalInvoicesUnpaid > 0 && (\n
\n )}\n\n {enabledInvoiceSplitMessage && (\n
\n )}\n\n
\n\n {!isWidthDownSm && !enabledNewLayoutInvoicePage && (\n \n \n )}\n\n {!enabledNewLayoutInvoicePage && (\n \n
\n\n {enabledNewLayoutInvoicePage && (\n
\n {!isLoading && (\n
\n {titlePage}\n {invoices.length > 0 && (\n
\n {this.filterInvoices(invoices).length > 0 ? (\n this.filterInvoices(invoices)\n .map(invoice => (\n <>\n \n {t('noResults.filter')}\n \n )}\n {this.renderLoadMoreButton() && (\n \n { } : () => this.loadMoreInBackend()}\n label={loading ? '' : `${t('btn.loadMore')}`}\n loading={loading}\n />\n
\n )}\n \n )}\n {contentFaqInvoicesPage}\n
\n )}\n
\n )}\n\n\n {!enabledNewLayoutInvoicePage && (\n
\n {isWidthDownSm && (\n
\n )}\n\n {isWidthDownSm && (\n
\n {this.handleTotal(currentTab) > 5 && (\n \n \n {!isLoading && (\n
\n {titlePage}\n {invoicesByStatus.Unpaid.length > 0 && (\n
\n {this.filterInvoices(invoicesByStatus.Unpaid).length > 0 ? (\n this.filterInvoices(invoicesByStatus.Unpaid)\n .slice(0, visible)\n .map((invoice, index) => {\n const hasOpenInvoiceOnMount = match.params.invoiceId\n && (!!((match.params.invoiceId.toString() === invoice.id.toString() && shouldOpenInvoice)));\n\n return (\n {\n this.setPaymentStatus(status);\n }}\n openInvoiceOnMount={hasOpenInvoiceOnMount}\n />\n );\n })\n ) : (\n \n {t('noResults.filter')}\n \n )}\n {visible < this.filterInvoices(invoicesByStatus.Unpaid).length && (\n this.loadMore(invoicesByStatus.Unpaid.length)} data-id=\"load-more-button\">\n {t('btn.loadMore')}\n \n )}\n {payment.status === PAYMENT_STATUS.SUCCESS && (\n this.handleOnPaymentModalClose()}\n onButtonClick={() => this.handleOnPaymentModalClose()}\n />\n )}\n \n )}\n\n {contentFaqInvoicesPage}\n\n
\n )}\n
\n {!isLoading && (\n
\n {titlePage}\n {invoicesByStatus.Paid.length > 0 && (\n
\n {this.filterInvoices(invoicesByStatus.Paid).length > 0 ? (\n this.filterInvoices(invoicesByStatus.Paid)\n .slice(0, visible)\n .map(invoice => (\n \n {t('noResults.filter')}\n \n )}\n {visible < this.filterInvoices(invoicesByStatus.Paid).length && (\n this.loadMore(invoicesByStatus.Paid.length)} data-id=\"load-more-button\">\n {t('btn.loadMore')}\n \n )}\n \n )}\n\n {contentFaqInvoicesPage}\n\n
\n )}\n
\n\n {!isLoading && (\n
\n {titlePage}\n {invoicesByStatus.Cancelled.length > 0 && (\n \n {this.filterInvoices(invoicesByStatus.Cancelled).length > 0 ? (\n this.filterInvoices(invoicesByStatus.Cancelled)\n .slice(0, visible)\n .map(invoice => (\n \n {t('noResults.filter')}\n \n )}\n {visible < this.filterInvoices(invoicesByStatus.Cancelled).length && (\n this.loadMore(invoicesByStatus.Cancelled.length)} data-id=\"load-more-button\">\n {t('btn.loadMore')}\n \n )}\n \n )}\n\n {contentFaqInvoicesPage}\n\n \n )}\n
\n )\n }\n {holdDomainRedirect &&
}\n
\n \n {success ? (\n \n {label}\n \n );\n\n return (\n \n \n {changePasswordLocale.title} \n \n \n \n onChangeField('currentPassword', fieldData.currentTarget.value)}\n onBlur={({ name, value }) => onBlurField(name, value)}\n value={formData.currentPassword.value}\n errorMessage={formData.currentPassword.error}\n />\n \n \n onChangeField('inputPassword', fieldData.currentTarget.value)}\n onBlur={({ name, value }) => onBlurField(name, value)}\n value={formData.inputPassword.value}\n errorMessage={formData.inputPassword.error}\n />\n \n \n\n \n \n \n onChangeField('inputConfirmPassword', fieldData.currentTarget.value)}\n onBlur={({ name, value }) => onBlurField(name, value)}\n value={formData.inputConfirmPassword.value}\n errorMessage={formData.inputConfirmPassword.error}\n />\n \n \n\n {(!noValues || !noErrors) && (\n \n \n )}\n \n\n \n \n \n \n \n {changePasswordLocale.requirementsList.listTitle}\n \n \n \n {mountListItem({ testid: 'upper-n-lower', label: changePasswordLocale.requirementsList.upperAndLowerItem, success: formValidation.hasLowerAndUpperCase })}\n {mountListItem({ testid: 'number', label: changePasswordLocale.requirementsList.numberLabel, success: formValidation.hasNumber })}\n {mountListItem({ testid: 'symbol', label: changePasswordLocale.requirementsList.symbolLabel, success: formValidation.hasSymbol })}\n {mountListItem({ testid: 'min-char', label: changePasswordLocale.requirementsList.minCharLabel, success: formValidation.hasAtLeastEight })}\n {mountListItem({ testid: 'same-on-both', label: changePasswordLocale.requirementsList.sameOnBothLabel, success: formValidation.matchConfirmation })}\n {mountListItem({ testid: 'different-password', label: changePasswordLocale.requirementsList.differentPasswords, success: formValidation.differentPasswords })}\n \n \n \n \n \n );\n};\n\nexport default ChangePasswordV2;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n padding: 0 40px 40px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding: 8px 0 0 0;\n }\n `}\n`;\n\nexport const Container = styled.div`\n ${({ theme, width }) => css`\n background: ${theme.v2.colors.white.primary};\n padding: 24px;\n margin-bottom: 16px;\n width: ${width === 'half' ? '50%' : 'full'};\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n width: 100%;\n }\n `}\n`;\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n max-width: 600px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n max-width: 100%;\n }\n `}\n`;\n\nexport const Divider = styled.hr`\n ${({ theme }) => css`\n border-top: 1px solid ${theme.v2.colors.feedback.canceledPure};\n margin: 40px 0px 16px;\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.section`\n display: flex;\n align-items: flex-start;\n gap: 24px;\n`;\n\nexport const TwoFactorInfos = styled.div`\n display: flex;\n flex-direction: column;\n width: 100%;\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xss};\n font-weight: ${theme.v2.font.weights.regular};\n `}\n`;\n\nexport const StatusContainer = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n`;\n\nexport const StatusTextContainer = styled.div`\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nexport const StatusTitle = styled.span`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.medium};\n `}\n`;\n\nexport const StatusDescription = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n `}\n`;\n\nexport const StatusButton = styled.span`\n ${({ theme, isTwoFactorEnabled }) => css`\n background-color: transparent;\n border: none;\n color: ${isTwoFactorEnabled ? theme.v2.colors.feedback.problemMedium : theme.v2.colors.brand.primaryMedium};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n cursor: pointer;\n `}\n`;\n","import React from 'react';\n\nimport * as Styles from './TwoFactorAuth.styles';\nimport { IconAsterisk, IconCancel, IconCircleCheck } from 'gatorcomponents';\n\nconst TwoFactorAuth = ({\n twoFactorIsEnabled,\n twoFactorAuthLocale,\n twoAuthButtonClick,\n}) => {\n const testId = 'two-factor-auth';\n const twoFactorAuthButtonText = twoFactorIsEnabled ? twoFactorAuthLocale.statusButtonLabel.disable : twoFactorAuthLocale.statusButtonLabel.enable;\n const TwoFactorAuthStatus = twoFactorIsEnabled ? twoFactorAuthLocale.status.enabled : twoFactorAuthLocale.status.disabled;\n\n return (\n \n
\n \n \n {twoFactorAuthLocale.title}\n \n {twoFactorAuthLocale.description} \n \n \n {twoFactorAuthLocale.status.title} \n \n {twoFactorIsEnabled\n ? \n \n \n {twoFactorAuthButtonText}\n \n \n \n \n );\n};\n\nexport default TwoFactorAuth;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.section`\n display: flex;\n align-items: flex-start;\n gap: 24px;\n`;\n\nexport const Infos = styled.div`\n display: flex;\n flex-direction: column;\n gap: 24px;\n width: 100%;\n`;\n\nexport const Content = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 8px;\n`;\n\nexport const PasswordContainer = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.medium};\n `}\n`;\n\nexport const ChangePasswordButton = styled.span`\n ${({ theme }) => css`\n background-color: transparent;\n border: none;\n color: ${theme.v2.colors.brand.primaryMedium};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n cursor: pointer;\n `}\n`;\n\nexport const Title = styled.h1`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0;\n `}\n`;\n","import React from 'react';\nimport { IconPassword } from 'gatorcomponents';\nimport * as Styles from './ChangePassword.styles';\nimport useLocale from '@/hooks/useLocale';\n\nconst ChangePassword = ({ togglePasswordModal }) => {\n const testId = 'change-password';\n\n const { myData: myDataLocale } = useLocale();\n const changePasswordLocale = myDataLocale.changePassword;\n\n return (\n \n \n \n {changePasswordLocale.title}\n \n \n \n {changePasswordLocale.contentDescription()}\n \n \n {changePasswordLocale.SectionButtonLabel}\n \n \n \n \n );\n};\n\nexport default ChangePassword;\n","const styles = () => ({\n root: {\n padding: '32px',\n height: '100%',\n\n '@media (max-width: 960px)': {\n display: 'flex',\n flexDirection: 'column',\n padding: '32px 20px',\n },\n },\n titleContainer: {\n padding: '0 0 32px 0',\n },\n title: {\n fontSize: '24px',\n fontWeight: 500,\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'flex-start',\n gap: '24px',\n\n '@media (max-width: 960px)': {\n fontSize: '20px',\n gap: '8px',\n },\n },\n contentWrapper: {\n padding: '0',\n },\n actions: {\n display: 'flex',\n gap: '24px',\n justifyContent: 'center',\n padding: '32px 0 0 0',\n margin: 0,\n\n '@media (max-width: 960px)': {\n gap: '24px',\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport {\n Dialog,\n DialogTitle,\n DialogActions,\n DialogContent,\n withStyles,\n} from '@material-ui/core';\nimport { Button, IconButton } from 'gatorcomponents';\nimport { useResize } from '@/hooks/useResize';\nimport styles from './Modal.styles';\n\nconst Modal = ({\n onClose,\n title,\n primaryButtonLabel = 'Confirmar',\n primaryButtonAction,\n isDisabled = false,\n isLoading = false,\n secondaryButtonLabel = 'Cancelar',\n secondaryButtonAction,\n children,\n content,\n open = false,\n classes,\n testId = 'modal-component',\n}) => {\n const { width } = useResize();\n const mobile = width <= 425;\n\n return (\n \n \n
\n \n {title}\n
\n \n
\n {children || content}\n \n
\n {secondaryButtonAction && (\n \n
\n );\n};\n\nexport default withStyles(styles)(Modal);\n","import styled, { css } from 'styled-components';\n\nexport const Chip = styled.div`\n ${({ theme, isChecked }) => css`\n display: flex;\n gap: 4px;\n background-color: ${isChecked ? theme.v2.colors.feedback.activeUltraLight : theme.v2.colors.neutral.highLight};\n border-radius: 4px;\n color: ${isChecked ? theme.v2.colors.feedback.activeMedium : theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.medium};\n padding: ${isChecked ? '4px 8px' : '4px 8px 4px 4px'};\n `};\n`;\n","import React from 'react';\nimport { IconCheck } from 'gatorcomponents';\nimport * as Styles from './Chip.styles';\n\nconst Chip = ({\n id,\n label,\n isChecked,\n onClick,\n}) => (\n \n { isChecked && (\n \n {changePasswordLocale.modalDescription()}\n \n\n \n \n {changePasswordLocale.currentPwLabel} \n handleChange({ field: 'currentPassword', value: target.value })}\n placeholder={changePasswordLocale.currentPwPlaceholder}\n errorMessage={formData.currentPassword.error || undefined}\n name=\"currentPassword\"\n testId=\"currentPassword\"\n />\n \n \n {changePasswordLocale.newPwLabel} \n handleChange({ field: 'newPassword', value: target.value })}\n placeholder={changePasswordLocale.newPwPlaceholder}\n errorMessage={formData.newPassword.error || undefined}\n size=\"lg\"\n name=\"newPassword\"\n testId=\"newPassword\"\n />\n\n handleChange({ field: 'confirmPassword', value: target.value })}\n placeholder={changePasswordLocale.repeatNewPwPlaceholder}\n errorMessage={formData.confirmPassword.error || undefined}\n size=\"lg\"\n name=\"confirmPassword\"\n testId=\"confirmPassword\"\n />\n \n \n \n {changePasswordLocale.requirementsTitle} \n \n {chips.map(({ id, label }) => (\n \n \n \n );\n};\n\nexport default ChangePasswordModal;\n","import { cellphoneCover } from '@/utils/Masks/inputMasks';\nimport { phoneNumberToDigits } from '../Formatters/phoneNumberToDigits';\n\nexport const handleCoverPhoneNumber = ({ phoneNumber, phoneNumberCountry = 'other' }) => {\n const phoneNumberDigits = phoneNumberToDigits({ phoneNumber });\n const isValidCountry = Object.keys(cellphoneCover).includes(phoneNumberCountry.toLowerCase());\n const country = isValidCountry ? phoneNumberCountry.toLowerCase() : 'other';\n const phone = phoneNumberDigits\n ? phoneNumberDigits.replace(\n cellphoneCover[country].regex,\n cellphoneCover[country].replace,\n ) : '** ****-****';\n return phone;\n};\n","import { CALL_API } from '@/middleware/api';\nimport { TWO_FACTOR_AUTH } from '@/config/api';\nimport {\n RESEND_TWO_FACTOR_AUTH_CODE,\n RECEIVE_TWO_FACTOR_AUTH_CODE,\n REQUEST_VALIDATE_TWO_FACTOR_AUTH_CODE,\n SUCCESS_VALIDATE_TWO_FACTOR_AUTH_CODE,\n TWO_FACTOR_AUTH_CODE_VALIDATION_FEEDBACK,\n REQUEST_ENABLE_TWO_FACTOR_AUTH_METHODS,\n RECEIVE_ENABLE_TWO_FACTOR_AUTH_METHODS,\n REQUEST_DISABLE_TWO_FACTOR_AUTH_METHODS,\n RECEIVE_DISABLE_TWO_FACTOR_AUTH_METHODS,\n GENERATE_TWO_FACTOR_AUTH_CODE_REQUEST,\n GENERATE_TWO_FACTOR_AUTH_CODE_SUCCESS,\n} from './actionsTypes';\n\nexport const resendTwoFactorAuthCode = ({ method }) => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: `${TWO_FACTOR_AUTH}/resend`,\n method: 'POST',\n body: { method },\n actionTypes: {\n request: () => ({ type: RESEND_TWO_FACTOR_AUTH_CODE }),\n success: response => ({ type: RECEIVE_TWO_FACTOR_AUTH_CODE, payload: response.data }),\n },\n },\n});\n\nexport const generateCode = ({ method, action }) => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: `${TWO_FACTOR_AUTH}/generate`,\n method: 'POST',\n body: { method, action },\n actionTypes: {\n request: () => ({ type: GENERATE_TWO_FACTOR_AUTH_CODE_REQUEST }),\n success: response => ({ type: GENERATE_TWO_FACTOR_AUTH_CODE_SUCCESS, payload: response.data }),\n },\n },\n});\n\nexport const getEnableTwoFactorAuthMethods = () => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: `${TWO_FACTOR_AUTH}/enable`,\n method: 'PATCH',\n actionTypes: {\n request: () => ({ type: REQUEST_ENABLE_TWO_FACTOR_AUTH_METHODS }),\n success: response => ({ type: RECEIVE_ENABLE_TWO_FACTOR_AUTH_METHODS, payload: response.data }),\n },\n },\n});\n\nexport const getDisableTwoFactorAuthMethods = () => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: `${TWO_FACTOR_AUTH}/disable`,\n method: 'PATCH',\n actionTypes: {\n request: () => ({ type: REQUEST_DISABLE_TWO_FACTOR_AUTH_METHODS }),\n success: response => ({ type: RECEIVE_DISABLE_TWO_FACTOR_AUTH_METHODS, payload: response.data }),\n },\n },\n});\n\nexport const setValidationFeedback = ({ hasError }) => ({\n type: TWO_FACTOR_AUTH_CODE_VALIDATION_FEEDBACK,\n payload: { hasError },\n});\n\nexport const validateTwoFactorAuthCode = ({ code, action }) => ({\n [CALL_API]: {\n authenticated: true,\n endpoint: `${TWO_FACTOR_AUTH}/validate`,\n method: 'POST',\n body: { code, action },\n actionTypes: {\n request: () => ({ type: REQUEST_VALIDATE_TWO_FACTOR_AUTH_CODE }),\n success: response => ({ type: SUCCESS_VALIDATE_TWO_FACTOR_AUTH_CODE, payload: response.data }),\n error: () => setValidationFeedback({ hasError: true }),\n },\n },\n});\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 32px;\n width: 730px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n width: 100%;\n };\n `}\n`;\n\nexport const MethodsWrapper = styled.div`\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: 16px;\n margin-bottom: 32px;\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n align-items: center;\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 0;\n line-height: ${theme.v2.font.lineHeight.text};\n text-align: center;\n `}\n`;\n\nexport const AlertWrapper = styled.div`\n margin: 0 auto;\n max-width: 640px;\n margin-bottom: 40px;\n`;\n\nexport const Divider = styled.hr`\n ${({ theme }) => css`\n border-top: 1px solid ${theme.v2.colors.feedback.canceledPure};\n width: 100%;\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const CardWrapper = styled.div`\n ${({\n theme,\n isSelected,\n isDisabled,\n }) => css`\n align-items: flex-start;\n border-style: solid;\n border-width: ${isSelected ? '2px' : '1px'};\n border-color: ${isSelected ? theme.v2.colors.brand.primaryMedium : theme.v2.colors.neutral.highMedium};\n border-radius: 8px;\n background-color: ${isDisabled ? theme.v2.colors.neutral.highLight : theme.v2.colors.white.primary};\n display: flex;\n width: 320px;\n padding: 24px;\n cursor: ${isDisabled ? 'auto' : 'pointer'};\n `}\n`;\n\nexport const IconWrapper = styled.div`\n display: flex;\n margin-right: 24px;\n`;\n\nexport const InfoWrapper = styled.div`\n align-items: start;\n display: flex;\n flex-direction: column;\n`;\n\nexport const Description = styled.h4`\n ${({ theme, isDisabled }) => css`\n color: ${isDisabled ? theme.v2.colors.neutral.lowLight : theme.v2.colors.brand.primaryExtraDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.bold};\n text-align: left;\n margin: 0 0 8px 0;\n `}\n`;\n\nexport const Value = styled.span`\n ${({ theme, isDisabled }) => css`\n display: inline-block;\n color: ${isDisabled ? theme.v2.colors.neutral.lowLight : theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n `}\n`;\n","import React from 'react';\nimport { Skeleton, Tooltip } from 'gatorcomponents';\nimport * as Styles from './CardButton.styles';\n\nconst CardButton = ({\n show,\n description,\n value,\n type = 'none',\n isSelected = false,\n icon,\n twoFactorAuthLocale,\n isLoadingMethods,\n methodData,\n onClick,\n testId = 'card-button',\n}) => {\n const handleClick = (event) => {\n if (!methodData.active) {\n return;\n }\n onClick && onClick(type, event);\n };\n\n if (!show) {\n return null;\n }\n\n if (isLoadingMethods) {\n return (\n \n handleClick(event)}\n data-testid={testId}\n isSelected={isSelected}\n isDisabled={isDisabled}\n >\n \n {icon(IconColor)}\n \n \n {description} \n\n {value && (\n \n {valuePlaceholder || value}\n \n )}\n \n \n \n );\n};\n\nexport default CardButton;\n","import React, { useState, useEffect, useCallback } from 'react';\nimport Modal from '../../Modal';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { getEnableTwoFactorAuthMethods, getDisableTwoFactorAuthMethods } from '@/redux/actions/twoFactorAuth';\nimport {\n IconEmailV2,\n IconMessage,\n Alert,\n IconWhatsApp,\n} from 'gatorcomponents';\n\nimport * as Styles from './ChooseMethodModal.styles';\nimport { CardButton } from './CardButton';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { EXPERIENCIA_2FA_SMS_METHOD, EXPERIENCIA_2FA_WHATSAPP_METHOD } from '@/config/GrowthBook/constants';\n\nconst ChooseMethodModal = ({\n isOpen,\n toggleValidationCodeFlow,\n goToValidateStep,\n userEmail,\n userPhone,\n twoFactorIsEnabled,\n twoFactorAuthLocale,\n}) => {\n const [selectedMethod, setSelectedMethod] = useState('');\n const dispatch = useDispatch();\n const { loadingCodeGeneration, loadingMethods, methodsData } = useSelector(state => state.twoFactorAuth);\n const testId = 'choose-method-modal';\n\n const modalType = twoFactorIsEnabled ? 'disable' : 'enable';\n\n const handleCardClick = (type, event) => {\n event.preventDefault();\n setSelectedMethod(type);\n };\n\n const onSubmit = () => {\n goToValidateStep(selectedMethod);\n };\n\n const getMethodData = type => methodsData.find(methodData => methodData.name === type);\n\n const methodsList = [\n {\n id: 1,\n type: 'email',\n icon: color => \n \n \n {twoFactorAuthLocale.chooseMethodModal.description}\n \n \n {methodsList.map(({\n id,\n type,\n icon,\n description,\n value,\n show,\n }) => (\n \n \n\n {twoFactorIsEnabled && (\n \n \n )}\n\n \n \n {twoFactorAuthLocale.validateCodeModal.resendButtonHelperText}\n \n \n );\n};\n\nexport default ResendCode;\n","import { useState, useEffect, useRef } from 'react';\nimport { format } from 'date-fns';\n\nconst useCountdown = ({ onFinish }) => {\n const [timeLeft, setTimeLeft] = useState({ minutes: 0, seconds: 0 });\n const [started, setStarted] = useState(false);\n const expired = started && (timeLeft.minutes === 0 && timeLeft.seconds === 0);\n const timerRef = useRef(null);\n\n const finishTimer = () => {\n clearInterval(timerRef.current);\n setTimeLeft({ minutes: 0, seconds: 0 });\n onFinish && onFinish();\n };\n\n const calculateTimeLeft = (deadline) => {\n const currentTimeTimeZone = new Date().toLocaleString('en', { timeZone: 'America/Sao_Paulo' });\n const fomattedCurrentTime = format(new Date(currentTimeTimeZone), 'yyyy-MM-dd HH:mm:ss');\n\n const currentTime = new Date(fomattedCurrentTime).getTime();\n const targetTime = new Date(deadline).getTime();\n const difference = targetTime - currentTime;\n\n if (difference > 0) {\n const minutes = Math.floor((difference / 1000 / 60) % 60);\n const seconds = Math.floor((difference / 1000) % 60);\n setTimeLeft({ minutes, seconds });\n }\n\n if (difference <= 0) {\n finishTimer();\n }\n };\n\n const startTimer = ({ deadline }) => {\n setStarted(true);\n calculateTimeLeft(deadline);\n timerRef.current = setInterval(() => calculateTimeLeft(deadline), 1000);\n };\n\n const resetTimer = () => {\n clearInterval(timerRef.current);\n setStarted(false);\n setTimeLeft({ minutes: 0, seconds: 0 });\n };\n\n useEffect(() => () => clearInterval(timerRef.current), []);\n\n const numberWithZero = value => String(value).padStart(2, '0');\n const formatTime = ({ minutes, seconds }) => `${numberWithZero(minutes)}:${numberWithZero(seconds)}`;\n\n return {\n time: formatTime(timeLeft),\n started,\n expired,\n startTimer,\n resetTimer,\n };\n};\n\nexport default useCountdown;\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { Modal } from '@/pages/common';\nimport { Input, Button } from 'gatorcomponents';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { enqueueSnackbar } from '@/redux/actions/notifications';\nimport { notifierSuccess } from '@/utils/Application/notifier';\nimport { loadSummary } from '@/redux/actions/summary';\nimport * as Styles from './ValidateCodeModal.styles';\nimport {\n resendTwoFactorAuthCode,\n setValidationFeedback,\n validateTwoFactorAuthCode,\n generateCode,\n} from '@/redux/actions/twoFactorAuth';\nimport { ResendCode } from './ResendCode';\nimport { useCountdown } from '@/hooks/useCountdown';\nimport { commonActions } from '@/redux/modules';\n\nconst CODE_LENGTH = 6;\n\nconst ValidateCodeModal = ({\n modal,\n toggleValidationCodeFlow,\n goToChooseMethodStep,\n userEmail,\n userPhone,\n twoFactorIsEnabled,\n twoFactorAuthLocale,\n}) => {\n const [resendEnabled, setResendEnabled] = useState(false);\n const [formData, setFormData] = useState({\n code: '',\n });\n const testId = `validate-code-modal--${modal.type}`;\n\n const dispatch = useDispatch();\n const {\n loadingResend,\n loadingValidate,\n validationError,\n loadingCodeGeneration,\n selectedMethodData,\n } = useSelector(state => state.twoFactorAuth);\n\n const onFinishTimeout = () => {\n setResendEnabled(true);\n };\n\n const {\n startTimer,\n time,\n } = useCountdown({ onFinish: onFinishTimeout });\n\n const showCodeRequestSuccessSnackbar = useCallback((attemptsLeft) => {\n const toast = {\n title: twoFactorAuthLocale.snackbarRequestLimit.title,\n info: twoFactorAuthLocale.snackbarRequestLimit.label(attemptsLeft),\n showIcon: true,\n };\n\n dispatch(commonActions.notifications.set({ toast, type: 'success' }));\n }, [\n dispatch,\n twoFactorAuthLocale,\n ]);\n\n const showValidateSnackbar = () => {\n toggleValidationCodeFlow();\n dispatch(setValidationFeedback({ hasError: false }));\n\n const snackbarType = twoFactorIsEnabled ? {} : notifierSuccess;\n dispatch(enqueueSnackbar(\n twoFactorAuthLocale.snackbarFeedback(modal.type),\n snackbarType,\n ));\n };\n\n const onSubmit = () => {\n dispatch(validateTwoFactorAuthCode({\n code: formData.code,\n action: twoFactorIsEnabled ? 'disable' : 'enable',\n })).then(({ payload }) => {\n const codeValidated = payload.success;\n\n codeValidated && dispatch(loadSummary()).then(showValidateSnackbar);\n !codeValidated && dispatch(setValidationFeedback({ hasError: true }));\n\n codeValidated && setResendEnabled(true);\n setFormData(prev => ({ ...prev, code: '' }));\n });\n };\n\n const handleChange = useCallback(({ key, value }) => {\n dispatch(setValidationFeedback({ hasError: false }));\n setFormData({\n ...formData,\n [key]: value,\n });\n }, [\n formData,\n dispatch,\n ]);\n\n const resendCode = () => {\n dispatch(resendTwoFactorAuthCode({ method: modal.method })).then(({ payload }) => {\n startTimer(({ deadline: payload.nextCodeCanBeGeneratedAt }));\n payload.isSent && showCodeRequestSuccessSnackbar(payload.method.left);\n });\n setResendEnabled(false);\n };\n\n const onOpenModal = useCallback(() => {\n dispatch(setValidationFeedback({ hasError: false }));\n\n dispatch(generateCode({\n method: modal.method,\n action: twoFactorIsEnabled ? 'disable' : 'enable',\n })).then(({ payload }) => {\n startTimer(({ deadline: payload.nextCodeCanBeGeneratedAt }));\n payload.isSent && showCodeRequestSuccessSnackbar(payload.method.left);\n });\n }, [modal,\n twoFactorIsEnabled,\n dispatch,\n showCodeRequestSuccessSnackbar,\n ]);\n\n useEffect(() => {\n onOpenModal();\n }, [onOpenModal]);\n\n const descriptions = {\n email: { message: twoFactorAuthLocale.validateCodeModal.descriptionEmail, value: userEmail },\n sms: { message: twoFactorAuthLocale.validateCodeModal.descriptionSms, value: userPhone },\n whatsapp: { message: twoFactorAuthLocale.validateCodeModal.descriptionWhatsApp, value: userPhone },\n };\n\n const description = descriptions[modal.method];\n\n return (\n \n \n {modal.title} \n\n \n {description.message}\n \n {description.value} \n
\n \n\n \n handleChange({ key: 'code', value: e.target.value })}\n testId={`${testId}__input-code`}\n />\n\n \n\n {loadingCodeGeneration || selectedMethodData.left > 0 ? (\n \n \n {twoFactorAuthLocale.chooseMethodModal.requestLimit.title}\n \n\n {twoFactorAuthLocale.chooseMethodModal.requestLimit.description}\n\n \n \n \n )}\n\n \n \n );\n};\n\nexport default ValidateCodeModal;\n","import React from 'react';\nimport { ChooseMethodModal } from '../ChooseMethodModal';\nimport { ValidateCodeModal } from '../ValidateCodeModal';\n\nconst ValidationCodeFlow = ({\n showChooseMethodModal,\n goToValidateStep,\n goToChooseMethodStep,\n currentStep,\n twoFactorIsEnabled,\n toggleValidationCodeFlow,\n validateCodeModal,\n twoFactorAuthLocale,\n userEmail,\n userPhone,\n}) => (\n <>\n {currentStep === 'CHOOSE_METHOD' && (\n \n \n \n \n \n \n\n \n {!hideTopMessage && (\n \n {bannerLocale.howToFixThreats} \n {bannerLocale.howToFixThreatsDescription} \n \n )}\n \n \n \n \n {bannerLocale.tag} \n \n {bannerLocale.title} \n {bannerLocale.description} \n \n \n \n \n \n \n \n \n);\n\nexport default UpgradeBanner;\n","import React, { useCallback } from 'react';\nimport * as Styles from './ThreatsDetector.styles';\nimport {\n IconCheck, IconClock, IconDanger, IconInfo, Skeleton,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale';\nimport { UpgradeBanner } from '../UpgradeBanner';\n\nconst ThreatsDetector = ({\n isFree, productName, scanDetails, handleSignSitelock,\n}) => {\n const { security: securityLocale } = useLocale();\n const threatsLocale = securityLocale.detailsPage.tabs.threats_detector;\n\n const noVulnerabilities = !scanDetails.vulnerabilities || scanDetails.vulnerabilities === 'not_found';\n const noBlocklists = !scanDetails.blocklists || scanDetails.blocklists === 'not_found';\n\n const noErrors = !scanDetails.malwares && noVulnerabilities && noBlocklists;\n const neverScanned = !scanDetails.last_check;\n\n const malwaresAlertProps = useCallback(() => ({\n variant: scanDetails.malwares ? 'problem' : 'success',\n label: scanDetails.malwares ? threatsLocale.malwaresFounded(scanDetails.malwares) : threatsLocale.noMalwaresFounded,\n }), [scanDetails.malwares, threatsLocale]);\n\n const vulnerabilitiesAlertProps = useCallback(() => ({\n variant: noVulnerabilities ? 'success' : 'problem',\n label: threatsLocale.vulnerabilities[scanDetails.vulnerabilities] || threatsLocale.vulnerabilities.not_found,\n }), [scanDetails.vulnerabilities, threatsLocale, noVulnerabilities]);\n\n const blocklistsAlertProps = useCallback(() => ({\n variant: noBlocklists ? 'success' : 'problem',\n label: threatsLocale.blocklists[scanDetails.blocklists] || threatsLocale.blocklists.not_found,\n }), [scanDetails.blocklists, threatsLocale, noBlocklists]);\n\n const mountScanInfo = ({ label, value }) => (\n \n {label} \n {value} \n \n );\n\n const mountScanResult = ({ variant = 'success', label }) => (\n \n \n {variant === 'success' &&
\n \n {label}\n \n \n );\n\n const upgradeBannerProps = () => ({\n bannerLocale: threatsLocale.signSitelockCard,\n handleSignSitelock,\n });\n\n if (scanDetails.loading) {\n return (\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n );\n }\n\n if (neverScanned) {\n return (\n <>\n \n {threatsLocale.neverScanned} \n \n\n \n \n {mountScanResult({ label: threatsLocale.willShowScan, variant: 'pending' })}\n {isFree\n ? mountScanResult({ variant: 'info', label: threatsLocale.freePlanNote(handleSignSitelock) })\n : mountScanResult({ variant: 'info', label: threatsLocale.paidPlanNote(productName) })\n }\n \n \n {isFree && \n \n {noErrors ? (\n <>\n {threatsLocale.noThreatsFounded} \n \n ) : (\n <>\n {threatsLocale.threatsFounded(scanDetails.malwares)} \n \n )}\n \n\n \n {mountScanInfo({ label: threatsLocale.lastCheck, value: scanDetails.last_check || '' })}\n {mountScanInfo({ label: threatsLocale.nextCheck, value: scanDetails.next_check || '' })}\n {mountScanInfo({ label: threatsLocale.verifiedPages, value: scanDetails.verified_pages })}\n {mountScanInfo({ label: threatsLocale.verifiedFiles, value: scanDetails.verified_files })}\n \n \n \n {mountScanResult({ ...malwaresAlertProps() })}\n {mountScanResult({ ...vulnerabilitiesAlertProps() })}\n {scanDetails.blocklists && mountScanResult({ ...blocklistsAlertProps() })}\n {isFree\n ? mountScanResult({ variant: 'info', label: threatsLocale.freePlanNote(handleSignSitelock) })\n : mountScanResult({ variant: 'info', label: threatsLocale.paidPlanNote(productName) })\n }\n \n \n\n {isFree && \n );\n};\n\nexport default ThreatsDetector;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 19px;\n`;\n\nexport const Container = styled.div`\n display: flex;\n gap: 8px;\n`;\n\nexport const CentralizedContainer = styled(Container)`\n align-items: center;\n justify-content: center;\n min-height: 240px;\n width: 100%;\n`;\n\nexport const SkeletonContainer = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 32px;\n`;\n\nexport const Line = styled.div`\n ${({ theme }) => css`\n border-bottom: 1px solid ${theme.v2.colors.feedback.canceledPure};\n display: flex;\n flex-wrap: wrap;\n gap: 48px 80px;\n justify-content: flex-start;\n padding-bottom: 24px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n gap: 30px;\n }\n `}\n`;\n\nexport const Data = styled.div`\n ${({ isStatus }) => css`\n display: flex;\n flex-direction: column;\n gap: 4px;\n width: ${isStatus ? '80px' : 'auto'};\n `}\n\n`;\n\nexport const DataTitle = styled.h3`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 0;\n `};\n`;\n\nexport const DataValue = styled.h3`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 0;\n `};\n`;\n\nexport const ButtonWrapper = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n margin-top: 4px;\n width: 100%;\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xxs};\n max-width: 1020px;\n `};\n`;\n\nexport const EmptyStateWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n align-self: center;\n display: flex;\n font-size: ${theme.v2.font.sizes.xs};\n color: ${theme.v2.colors.neutral.lowMedium};\n height: 314px;\n max-width: 566px;\n padding: 32px 0;\n text-align: center;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n align-self: normal;\n font-size: ${theme.v2.font.sizes.xxs};\n text-align: start;\n }\n `};\n`;\n\nexport const ConfigureFTPWrapper = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: 16px;\n margin-bottom: 96px;\n margin-top: 80px;\n`;\n\nexport const ConfigureFTPAlert = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-size: ${theme.v2.font.sizes.xxs};\n max-width: 579px;\n `};\n`;\n","\nimport React, { useState } from 'react';\nimport * as Styles from './LastScans.styles';\nimport useLocale from '@/hooks/useLocale';\nimport {\n Button, Skeleton, Tag,\n} from 'gatorcomponents';\nimport { UpgradeBanner } from '../UpgradeBanner';\n\nconst LastScans = ({\n scanHistory, handleSignSitelock, seeHowToFix, isLoading, isFree, handleGoToFTP, hasFTPConfigurations,\n}) => {\n const [historiesToShowPage, setHistoriesToShowPage] = useState(1);\n const { security: securityLocale } = useLocale();\n const lastScansLocale = securityLocale.detailsPage.tabs.last_scans;\n const canShowLoadMoreButton = scanHistory && scanHistory.length > historiesToShowPage * 5;\n\n const isSafe = scan => scan.filesFixed === scan.filesNeedFix;\n\n const loadMoreScanHistory = () => {\n setHistoriesToShowPage(historiesToShowPage + 1);\n };\n\n const upgradeBannerProps = () => ({\n bannerLocale: lastScansLocale.signSitelockCard,\n handleSignSitelock,\n });\n\n if (isLoading) {\n return (\n \n \n );\n }\n\n return (\n \n \n {lastScansLocale.description({ handleSignSitelock, seeHowToFix, isFree })}\n \n\n {(isFree || hasFTPConfigurations) && !scanHistory.length && (\n \n {lastScansLocale.emptyStateLabel}\n \n )}\n\n {!isFree && !hasFTPConfigurations && scanHistory && !scanHistory.length && (\n \n \n {lastScansLocale.emptyScans}\n \n \n )}\n\n {scanHistory && !!scanHistory.length && scanHistory.slice(0, historiesToShowPage * 5).map(scan => (\n \n {Object.keys(scan).map(key => (\n \n \n {lastScansLocale[key]}\n \n \n {scan[key]}\n \n \n ))}\n \n \n {lastScansLocale.status}\n \n \n \n \n \n ))}\n\n {canShowLoadMoreButton && (\n \n \n )}\n\n {isFree && \n );\n};\n\nexport default LastScans;\n","import styled, { css } from 'styled-components';\n\nconst contentMaxWidth = '490px';\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 0px;\n max-width: 769px;\n `}\n`;\n\nexport const PreviewDescription = styled(Description)`\n margin: 24px 0px 16px\n`;\n\nexport const SmallTitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 32px 0px 8px;\n `}\n`;\n\nexport const SealLink = styled.a``;\n\nexport const SelectsWrapper = styled.div`\n ${({ expanded }) => css`\n display: flex;\n flex-direction: column;\n gap: 24px;\n max-height: ${expanded ? '1000px' : '0px'};\n max-width: ${contentMaxWidth};\n overflow: ${expanded ? 'unset' : 'hidden'};\n width: 100%;\n transition: max-height 300ms ease-in-out;\n\n textarea {\n word-break: break-all;\n }\n `}\n`;\n\nexport const ButtonsWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 16px;\n max-width: $483px;\n width: 100%;\n\n @media (max-width:${theme.v2.breakpoints.sm}){\n align-items: center;\n flex-direction: column-reverse;\n justify-content: center;\n\n > button {\n max-width: fit-content;\n }\n }\n `}\n`;\n\nexport const LinkWrapper = styled.div`\n display: flex;\n margin: 24px 0px;\n max-width: $483px;\n width: 100%;\n`;\n\nexport const Form = styled.form``;\n\nexport const BannerWrapper = styled.div`\n ${({ theme }) => css`\n border-top: 1px solid ${theme.v2.colors.feedback.canceledPure};\n margin: 32px 0px 0px;\n padding: 32px 0px 0px;\n `}\n`;\n\nexport const SkeletonRow = styled.div`\n ${({ top, row }) => css`\n display: flex;\n flex-direction: ${row ? 'row' : 'column'};\n gap: ${row ? '16px' : '8px'};\n margin: ${top} 0px 0px 0px;\n `}\n`;\n","/* eslint-disable jsx-a11y/anchor-is-valid */\nimport React, { useState } from 'react';\nimport * as Styles from './SecuritySeal.styles';\nimport {\n Button, IconLoading, Input, Select, Skeleton,\n} from 'gatorcomponents';\nimport { useDispatch } from 'react-redux';\nimport { commonActions } from '@/redux/modules';\nimport { SITELOCK_PRODUCT_NAME } from '../../SitelockDetailsHandler.types';\nimport { UpgradeBanner } from '../UpgradeBanner';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { sitelockAnalytics } from '@/analytics/security/sitelock';\n\nconst { SITELOCK_PREMIUM, SITELOCK_ENTERPRISE } = SITELOCK_PRODUCT_NAME;\n\nconst SecuritySeal = ({\n domain,\n colorOptions,\n sizeOptions,\n typeOptions,\n languageOptions,\n handleSave,\n formData,\n setFormData,\n date,\n loading,\n saving,\n sealRequested,\n productName,\n isFree,\n upgradeBannerProps,\n copyTextToClipboard,\n}) => {\n const dispatch = useDispatch();\n const { security: securityLocale } = useLocale();\n const sitelockLocale = securityLocale.detailsPage;\n const { security_seal: securitySealLocale } = sitelockLocale.tabs;\n const sealText = `\n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n );\n }\n\n return (\n <>\n \n {securitySealLocale.description[0]} \n {securitySealLocale.description[1]} \n\n \n {securitySealLocale.preview}\n \n\n \n \n {securitySealLocale.saveToView}\n \n\n handleChangeFormData({ e, key: 'language' })}\n />\n\n handleChangeFormData({ e, key: 'color' })}\n />\n\n handleChangeFormData({ e, key: 'size' })}\n />\n\n {(productName === SITELOCK_PREMIUM || productName === SITELOCK_ENTERPRISE) && (\n handleChangeFormData({ e, key: 'type' })}\n />\n )}\n\n \n\n \n {securitySealLocale.howToInsert}\n \n\n\n \n setExpandedSelect(!expandedSelect)}\n type=\"button\"\n variant=\"secondary\"\n disabled={!sealRequested}\n />\n\n {expandedSelect && (\n \n \n\n {isFree && (\n \n \n )}\n \n );\n};\n\nexport default SecuritySeal;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n margin-top: 36px;\n`;\n\nexport const Label = styled.strong`\n ${({ theme }) => css`\n font-weight: ${theme.v2.font.weights.medium};\n font-size: ${theme.v2.font.sizes.xs};\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n font-weight: ${theme.v2.font.weights.regular};\n font-size: ${theme.v2.font.sizes.xxs};\n margin-top: 5px;\n max-width: 877px;\n `}\n`;\n\nexport const Form = styled.form`\n display: flex;\n flex-direction: column;\n gap: 10px;\n max-width: 360px;\n`;\n\nexport const ButtonWrapper = styled.div`\n margin-top: 13px;\n margin-bottom: 15px;\n`;\n\nexport const AlertWrapper = styled.div`\n margin-left: -16px;\n max-width: 750px;\n`;\n\nexport const Line = styled.div`\n ${({ theme }) => css`\n border-bottom: 1px solid ${theme.v2.colors.feedback.canceledPure};\n margin-bottom: 30px;\n margin-top: 14px;\n `}\n`;\n\nexport const SkeletonRow = styled.div`\n ${({ top, row, maxWidth }) => css`\n display: flex;\n flex-direction: ${row ? 'row' : 'column'};\n gap: ${row ? '16px' : '8px'};\n margin: ${top} 0px 0px 0px;\n max-width: ${maxWidth || 'unset'};\n `}\n`;\n","\nimport React from 'react';\nimport * as Styles from './Configurations.styles';\nimport useLocale from '@/hooks/useLocale';\nimport {\n Alert, Button, Input, Skeleton,\n} from 'gatorcomponents';\nimport { UpgradeBanner } from '../UpgradeBanner';\n\nconst Configurations = ({\n isLoading, isFree, formData, setFormData, handleSave, upgradeBannerProps, handleHelpClick, showSkeleton,\n}) => {\n const { security: securityLocale } = useLocale();\n const configurationsLocale = securityLocale.detailsPage.tabs.configurations;\n\n const isDomainRegex = /(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]/g;\n\n const updateFormData = (dataName, dataValue) => {\n const newData = { ...formData };\n\n if (dataName === 'url') {\n newData[dataName] = {\n value: dataValue,\n error: !isDomainRegex.test(dataValue) ? 'Campo obrigatório' : '',\n touched: formData[dataName].touched,\n };\n } else {\n newData[dataName] = {\n value: dataValue,\n error: !dataValue ? 'Campo obrigatório' : '',\n touched: formData[dataName].touched,\n };\n }\n\n setFormData(newData);\n };\n\n const handleTouchForm = (dataName) => {\n const newData = { ...formData };\n\n newData[dataName] = {\n ...newData[dataName],\n touched: true,\n };\n\n setFormData(newData);\n };\n\n const handleShowError = (fieldName) => {\n if (formData[fieldName] && !formData[fieldName].touched) return '';\n\n if (formData[fieldName] && formData[fieldName].value) return formData[fieldName].error;\n\n return configurationsLocale.required;\n };\n\n\n if (showSkeleton) {\n return (\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n );\n }\n\n return (\n \n \n {configurationsLocale.ftpLabel}\n \n \n {configurationsLocale.ftpDescription}\n \n\n \n updateFormData('url', e.currentTarget.value)}\n placeholder={configurationsLocale.serverUrlPlaceholder}\n testId=\"serverUrl\"\n errorMessage={handleShowError('url')}\n onBlur={() => handleTouchForm('url')}\n />\n updateFormData('user', e.currentTarget.value)}\n placeholder={configurationsLocale.usernamePlaceholder}\n testId=\"username\"\n errorMessage={handleShowError('user')}\n onBlur={() => handleTouchForm('user')}\n />\n updateFormData('password', e.currentTarget.value)}\n placeholder={configurationsLocale.passwordPlaceholder}\n testId=\"password\"\n type=\"password\"\n errorMessage={handleShowError('password')}\n onBlur={() => handleTouchForm('password')}\n />\n\n \n \n \n\n \n \n\n \n {configurationsLocale.doubts({ handleClick: handleHelpClick })}\n \n\n {isFree && \n );\n};\n\nexport default Configurations;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './SitelockDetailsHandler.styles';\nimport {\n SITELOCK_COLORS, SITELOCK_LANGUAGE, SITELOCK_SIZE, SITELOCK_TYPE, TAB_TYPES,\n} from './SitelockDetailsHandler.types';\nimport {\n Button, IconLoading, Skeleton, Tabs,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale';\nimport { ThreatsDetector } from './components/ThreatsDetector';\nimport { LastScans } from './components/LastScans';\nimport FaqDefault from '@/components/FrequentlyQuestions/FaqDefault';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { SUPPORT_SECURITY_URL } from '@/config/urls/domainsUrls';\nimport { loadFaqSecurity } from '@/redux/actions/faq';\nimport { useHistory, useParams } from 'react-router';\nimport { preChatActions, securityActions } from '@/redux/modules';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { CHARLIE_TOKEN_REFRESH } from '@/config/GrowthBook/constants';\nimport { SecuritySeal } from './components/SecuritySeal';\nimport { FTP_ACCESS, REMOVE_MALICIOUS_CODE } from '@/config/urls/sitelock';\nimport { SITELOCK_PLANS } from '@/enums/products/products.enum';\nimport { copyTextToClipboard } from '@/utils/Application/copyTextToClipboard';\nimport { Configurations } from './components/Configurations';\nimport { sitelockAnalytics } from '@/analytics/security/sitelock';\n\nconst SitelockDetailsHandler = () => {\n const [activeTab, setActiveTab] = useState(TAB_TYPES.THREATS_DETECTOR);\n const [date, setDate] = useState(Date.now());\n const waitTokenToggle = useFeatureIsOn(CHARLIE_TOKEN_REFRESH);\n const { security: securityLocale, routes: routesLocale } = useLocale();\n const sitelockLocale = securityLocale.detailsPage;\n const threatsLocale = securityLocale.detailsPage.tabs.threats_detector;\n const dispatch = useDispatch();\n const params = useParams();\n const { productType, productId } = params;\n const history = useHistory();\n const faq = useSelector(state => state.faq);\n const { productsList } = useSelector(state => state.preChat);\n const securityState = useSelector(state => state.security);\n const { security_seal: securitySealLocale, configurations: configurationsLocale } = sitelockLocale.tabs;\n const [formData, setFormData] = useState({\n color: 'white',\n language: 'br',\n size: 'medium',\n type: 'mal',\n });\n const [configurationFormData, setConfigurationFormData] = useState({\n url: { value: '', error: '', touched: false },\n user: { value: '', error: '', touched: false },\n password: { value: '', error: '', touched: false },\n });\n\n const hostingsExists = !!(productsList && productsList.hostings);\n const sitelockProduct = hostingsExists && productsList.hostings.find(sitelockProduct => productId === sitelockProduct.id.toString());\n const isSitelockFree = sitelockProduct && sitelockProduct.name && sitelockProduct.name === SITELOCK_PLANS.FREE;\n\n const handleChangeTabs = (tabType) => {\n setActiveTab(tabType);\n sitelockAnalytics.newSitelockPage.gaTabsChange(sitelockLocale.tabs[tabType.toLowerCase()].title);\n };\n\n const handleSignSitelock = useCallback(() => {\n const url = `${routesLocale.security}${routesLocale.upgrade}/${productType}/${productId}`;\n history.push(url);\n }, [history, routesLocale, productType, productId]);\n\n const handleClickSitelockPanel = () => {\n if (!securityState.loadingSSO) {\n dispatch(securityActions.sso.request({ hostingId: productId }));\n }\n };\n\n const getTabsProps = useCallback(() => {\n const options = [\n {\n label: isSitelockFree ? sitelockLocale.tabs.threats_detector.title : sitelockLocale.tabs.threats_detector.paidTitle,\n id: TAB_TYPES.THREATS_DETECTOR,\n onClick: () => handleChangeTabs(TAB_TYPES.THREATS_DETECTOR),\n },\n {\n label: sitelockLocale.tabs.security_seal.title,\n id: TAB_TYPES.SECURITY_SEAL,\n onClick: () => handleChangeTabs(TAB_TYPES.SECURITY_SEAL),\n },\n ];\n\n if (!isSitelockFree) {\n options.splice(1, 0, {\n label: sitelockLocale.tabs.last_scans.title,\n id: TAB_TYPES.LAST_SCANS,\n onClick: () => handleChangeTabs(TAB_TYPES.LAST_SCANS),\n });\n\n options.push({\n label: sitelockLocale.tabs.configurations.title,\n id: TAB_TYPES.CONFIGURATIONS,\n onClick: () => handleChangeTabs(TAB_TYPES.CONFIGURATIONS),\n });\n }\n\n return ({\n options,\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isSitelockFree]);\n\n const getFaqProps = useCallback(() => ({\n buttonLabel: sitelockLocale.faqButton,\n questions: faq.security.questions,\n link: SUPPORT_SECURITY_URL,\n loading: faq.loading,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }), [faq.security]);\n\n const getProductsByStatus = useCallback(() => {\n dispatch(preChatActions.productByStatus.request({ withCancelled: true, withPending: true, waitToken: waitTokenToggle }));\n }, [dispatch, waitTokenToggle]);\n\n const upgradeBannerProps = useCallback(() => ({\n bannerLocale: threatsLocale.signSitelockCard,\n handleSignSitelock,\n }), [handleSignSitelock, threatsLocale]);\n\n const threatsDetectorProps = useCallback(() => ({\n isFree: isSitelockFree,\n productName: sitelockProduct && sitelockProduct.name,\n scanDetails: securityState.scanDetails,\n handleSignSitelock,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }), [sitelockProduct, securityState.scanDetails]);\n\n const lastScansProps = useCallback(() => ({\n scanHistory: securityState.scanHistory,\n handleSignSitelock,\n seeHowToFix: () => window.open(REMOVE_MALICIOUS_CODE, '_blank'),\n isLoading: securityState.scanHistoryLoading,\n isFree: isSitelockFree,\n handleGoToFTP: () => setActiveTab(TAB_TYPES.CONFIGURATIONS),\n hasFTPConfigurations: !!securityState.configurations.data.user,\n }), [securityState.scanHistory, handleSignSitelock, securityState.scanHistoryLoading, isSitelockFree, securityState.configurations.data.user]);\n\n const getSecuritySealProps = (() => {\n const defaultProps = {\n isFree: isSitelockFree,\n domain: sitelockProduct && sitelockProduct.domain,\n formData,\n setFormData,\n date,\n loading: securityState.seal.loading,\n saving: securityState.seal.saving,\n sealRequested: securityState.seal.requested,\n productName: sitelockProduct && sitelockProduct.name,\n upgradeBannerProps,\n copyTextToClipboard,\n };\n\n const colorOptions = SITELOCK_COLORS.map(item => ({\n label: securitySealLocale.colors[item],\n value: item,\n }));\n\n const sizeOptions = SITELOCK_SIZE.map(item => ({\n label: securitySealLocale.sizes[item],\n value: item,\n }));\n\n const typeOptions = SITELOCK_TYPE.map(item => ({\n label: securitySealLocale.type[item],\n value: item,\n }));\n\n const languageOptions = SITELOCK_LANGUAGE.map(item => ({\n label: securitySealLocale.language[item],\n value: item,\n }));\n\n const handleSave = (e) => {\n e.preventDefault();\n dispatch(securityActions.seal.updateSeal({\n productType,\n productId,\n formData,\n setDate,\n successMessage: securitySealLocale.successfullUpdate,\n failureMessage: securitySealLocale.failedfullUpdate,\n }));\n };\n\n return {\n ...defaultProps,\n colorOptions,\n sizeOptions,\n typeOptions,\n languageOptions,\n handleSave,\n };\n });\n\n const getConfigurationsProps = (() => {\n const handleHelpClick = () => {\n window.open(FTP_ACCESS, '_blank');\n };\n\n const defaultProps = {\n isFree: isSitelockFree,\n formData: configurationFormData,\n setFormData: setConfigurationFormData,\n isLoading: securityState.configurations.updateLoading,\n showSkeleton: securityState.configurations.getLoading,\n handleHelpClick,\n };\n\n const handleSave = (e) => {\n e.preventDefault();\n\n const dataToSave = {\n user: configurationFormData.user.value,\n password: configurationFormData.password.value,\n url: configurationFormData.url.value,\n domain: sitelockProduct && sitelockProduct.domain,\n };\n\n dispatch(securityActions.configurations.update.request({\n productType,\n productId,\n data: dataToSave,\n successMessage: configurationsLocale.successfullUpdate,\n failureMessage: configurationsLocale.failedfullUpdate,\n }));\n };\n\n return {\n ...defaultProps,\n handleSave,\n };\n });\n\n const tabs = {\n [TAB_TYPES.THREATS_DETECTOR]: \n \n {sitelockProduct ? (\n <>\n \n {`${sitelockProduct.name}`}\n \n \n {` - ${sitelockProduct.domain}`}\n \n {!isSitelockFree && (\n \n \n )}\n \n )\n : \n\n \n \n \n {tabs[activeTab]}\n \n \n \n\n \n \n \n );\n};\n\nexport default SitelockDetailsHandler;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n margin: 0 24px;\n `};\n`;\n\nexport const Container = styled.div`\n display: flex;\n`;\n\nexport const LoadingContainer = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n min-height: 248px;\n width: 100%;\n`;\n\nexport const Section = styled.section`\n ${({ theme }) => css`\n background: ${theme.v2.colors.white.primary};\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 48px 48px 0 48px;\n\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n margin: 8px 0 0 0;\n padding: 24px 20px;\n }\n `}\n`;\n\nexport const SitelockLogo = styled.img`\n ${({ theme }) => css`\n height: 38px;\n user-select: none;\n -webkit-user-drag: none;\n\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n height: 32px;\n }\n `};\n`;\n\nexport const SubscriptTag = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryDark};\n background: ${theme.v2.colors.feedback.attentionLight};\n border-radius: 20px;\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.bold};\n text-align: center;\n padding: 2px 10px;\n user-select: none;\n -webkit-user-drag: none;\n `};\n`;\n\nexport const LogoWrapper = styled(Container)`\n align-items: center;\n gap: 16px;\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0;\n\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n font-size: ${theme.v2.font.sizes.sm};\n text-align: center;\n }\n `};\n`;\n\nexport const PurchaseInfoWrapper = styled(Container)`\n ${({ theme }) => css`\n justify-content: space-between;\n gap: 8px;\n\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n flex-direction: column;\n gap: 24px;\n }\n `};\n`;\n\nexport const DomainLabel = styled.div`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xxs};\n color: ${theme.v2.colors.neutral.lowPure};\n\n em {\n color: ${theme.v2.colors.brand.primaryDark};\n font-size: ${theme.v2.font.sizes.xs};\n font-style: normal;\n font-weight: ${theme.v2.font.weights.medium};\n }\n\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n width: 100%;\n text-align: center;\n }\n `};\n`;\n\nexport const PaymentCycleWrapper = styled(Container)`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowDark};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n gap: 24px;\n justify-content: center;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n flex-direction: column;\n gap: 16px;\n text-align: center;\n }\n `};\n`;\n\nexport const PaymentCycleOptionsWrapper = styled(Container)`\n ${({ theme }) => css`\n gap: 8px;\n white-space: nowrap;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n justify-content: center;\n width: 100%;\n }\n `};\n`;\n\nexport const PaymentCycleOptions = styled(Container)`\n ${({ theme }) => css`\n gap: 24px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n flex-direction: column;\n gap: 16px;\n justify-content: center;\n width: 100%;\n }\n `};\n`;\n\nexport const PaymentCycleFrameWrapper = styled(Container)`\n ${({ theme }) => css`\n gap: 24px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n justify-content: space-between;\n padding: 0 24px;\n width: 100%;\n }\n `};\n`;\n\nexport const RadioLabel = styled.label`\n ${({ theme }) => css`\n align-items: center;\n cursor: pointer;\n display: flex;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n\n label {\n width: 19px;\n height: 19px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n width: 104px;\n }\n `};\n`;\n\nexport const CardsWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 16px;\n justify-content: flex-start;\n\n @media (max-width:${theme.v2.breakpoints.md}) {\n align-items: center;\n flex-direction: column;\n gap: 32px;\n }\n `}\n`;\n\nexport const Card = styled.div`\n ${({ theme, isFree = false }) => css`\n border-radius: 8px;\n border: ${!isFree && `1px solid ${theme.v2.colors.feedback.canceledPure}`};\n background: ${isFree ? theme.v2.colors.feedback.canceledLight : theme.v2.colors.white.primary};\n display: flex;\n flex-direction: column;\n padding: 20px;\n position: relative;\n width: ${isFree ? '75%' : '100%'};\n\n @media (max-width:${theme.v2.breakpoints.md}) {\n width: 100%;\n }\n `}\n`;\n\nexport const FeatureWrapper = styled.div`\n position: absolute;\n right: 5px;\n top: 5px;\n`;\n\nexport const PlanInfoWrapper = styled.div`\n ${({ isFree = false }) => css`\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin: ${isFree ? '0 0 24px 0' : '24px 0'};\n `};\n`;\n\nexport const CardTitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryDark};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n margin: 0;\n\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n font-size: ${theme.v2.font.sizes.sm};\n }\n `};\n`;\n\nexport const CardSubtitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryMedium};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.sizes.bold};\n margin: 4px 0;\n `};\n`;\n\nexport const PlanValueTitle = styled.h5`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 0;\n `};\n`;\n\nexport const PlanValueLabel = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryDark};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.bold};\n margin: 0;\n\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n font-size: ${theme.v2.font.sizes.sm};\n }\n `};\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ theme }) => css`\n margin-top: 16px;\n user-select: none;\n -webkit-user-drag: none;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n button {\n padding: 6px 24px;\n }\n }\n `};\n`;\n\nexport const LoadingWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n justify-content: center;\n width: 120px;\n\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n width: auto;\n }\n @media (max-width: ${theme.v2.breakpoints.md}) {\n width: 120px;\n }\n `}\n`;\n\nexport const List = styled.ul`\n display: flex;\n flex-direction: column;\n gap: 8px;\n list-style: none;\n padding: 0;\n`;\n\nexport const ListItem = styled.li`\n display: flex;\n gap: 4px;\n`;\n\nexport const IconWrapper = styled.div`\n`;\n\nexport const ListText = styled.span`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n\n strong: {\n font-weight: ${theme.v2.font.weights.bold};\n }\n `};\n`;\n\nexport const BottomDetail = styled.div`\n ${({ theme }) => css`\n height: 20px;\n position: relative;\n width: 100%;\n\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n display: none;\n }\n `};\n`;\n\nexport const SnappyDetail = styled.img`\n ${({ theme }) => css`\n margin-left: 20px;\n margin-top: auto;\n max-height: 64px;\n position: absolute;\n bottom: 0px;\n\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n display: none;\n }\n `}\n`;\n\nexport const SectionFootWrapper = styled.div`\n margin: 8px 0;\n justify-content: center;\n display: flex;\n`;\n\nexport const SignNowSpan = styled.span`\n text-align: center;\n\n button {\n font-size: 16px;\n }\n`;\n","import { SITELOCK_PLANS } from '@/enums/products/products.enum';\n\nexport const CYCLE_TYPES = {\n ANNUALLY: 'annually',\n SEMIANNUALLY: 'semiannually',\n QUARTERLY: 'quarterly',\n MONTHLY: 'monthly',\n};\n\nexport const PRICES = {\n [SITELOCK_PLANS.PROFESSIONAL]: {\n [CYCLE_TYPES.ANNUALLY]: 191.88,\n [CYCLE_TYPES.SEMIANNUALLY]: 95.94,\n [CYCLE_TYPES.QUARTERLY]: 47.97,\n [CYCLE_TYPES.MONTHLY]: 15.99,\n },\n [SITELOCK_PLANS.PREMIUM]: {\n [CYCLE_TYPES.ANNUALLY]: 323.88,\n [CYCLE_TYPES.SEMIANNUALLY]: 161.94,\n [CYCLE_TYPES.QUARTERLY]: 80.97,\n [CYCLE_TYPES.MONTHLY]: 26.99,\n },\n [SITELOCK_PLANS.ENTERPRISE]: {\n [CYCLE_TYPES.ANNUALLY]: 515.88,\n [CYCLE_TYPES.SEMIANNUALLY]: 257.94,\n [CYCLE_TYPES.QUARTERLY]: 128.97,\n [CYCLE_TYPES.MONTHLY]: 42.99,\n },\n};\n\nexport const SITELOCK_ID = {\n 108: 'professional',\n 109: 'premium',\n 110: 'enterprise',\n};\n","import styled, { css } from 'styled-components';\n\nexport const IconWrapper = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n margin: 42px 0px 0px;\n`;\n\nexport const ModalTitle = styled.h4`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 4px auto 0px;\n max-width: 489px;\n text-align: center;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n font-size: ${theme.v2.font.sizes.sm};\n text-align: center;\n }\n `}\n`;\n\nexport const ModalDescription = styled.p`\n ${({ theme }) => css`\n align-items: center;\n align-self: center;\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 4px 16px 0px;\n text-align: center;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n font-size: ${theme.v2.font.sizes.xxs};\n margin: 4px 4px 0px;\n max-width: 320px;\n }\n `}\n`;\n\nexport const List = styled.ul`\n ${({ theme }) => css`\n display: flex;\n flex-wrap: wrap;\n gap: 32px;\n justify-content: space-evenly;\n margin: 40px 30px;\n padding: 0px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n justify-content: flex-start;\n max-width: 320px;\n }\n `}\n`;\n\nexport const ListItem = styled.li`\n ${({ theme }) => css`\n align-items: flex-start;\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.bold};\n gap: 4px;\n list-style: none;\n max-width: 180px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n max-width: unset;\n }\n\n svg {\n flex: 0 0 24px;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n margin: 0px 0px 16px;\n`;\n","import { Modal } from '@/pages/common';\nimport { Button, IconCheck } from 'gatorcomponents';\nimport React from 'react';\nimport * as Styles from './UpgradeModal.styles';\n\nexport const UpgradeModal = ({\n title = 'Obrigado por assinar o SiteLock Professional!',\n description = 'A remoção automática de ameaças e os outros recursos do seu novo plano já estão sendo configuradas na sua conta. Veja abaixo os principais:',\n ListItems = [\n 'Proteção para até 100 páginas',\n 'Remoção automática de Malwares',\n 'Verificação diária de FTP',\n 'Verificação de edição de arquivos',\n 'Monitoramento de blocklist',\n 'Todos os recursos do Grátis',\n ],\n buttonLabel = 'Ir para página do SiteLock',\n handleRedirect,\n}) => {\n const handleGoToSitelock = () => {\n handleRedirect && handleRedirect();\n };\n\n return (\n \n \n \n\n \n {title}\n \n\n \n {description}\n \n\n \n {ListItems.map(item => (\n \n \n ))}\n \n\n \n \n \n );\n};\n\nexport default UpgradeModal;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './SiteLockUpgradeHandler.styles';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useHistory, useParams } from 'react-router';\nimport { useDiagnostic } from '@/components/Layout/Menu/MyAlerts';\nimport {\n Button, IconCheck, IconLoading, IconStar, Radio,\n} from 'gatorcomponents';\nimport sitelock from '@/media/security/sitelock.svg';\nimport useLocale from '@/hooks/useLocale';\nimport { CYCLE_TYPES, PRICES, SITELOCK_ID } from './SiteLockUpgradeHandler.types';\nimport { SITELOCK_PLANS } from '@/enums/products/products.enum';\nimport { formatCurrency } from '@/utils/Formatters/formatCurrency';\nimport { DetailsSection } from '../../SecurityCta/SiteLockLP/components/DetailsSection';\nimport { DiscoverBenefits } from '../../SecurityCta/SiteLockLP/components/DiscoverBenefits';\nimport { SnappyBanner } from '../../SecurityCta/SiteLockLP/components/SnappyBanner';\nimport SnappyFace from '@/media/sitelock/snappy-face.png';\nimport { sitelockAnalytics } from '@/analytics/security/sitelock';\nimport { UpgradeModal } from './components/UpgradeModal';\nimport { GroupPaymentModal } from '@/components/billing/subscriptions/GroupPaymentModal';\nimport { preChatActions, securityActions } from '@/redux/modules';\nimport { loadInvoices } from '@/redux/actions/invoices';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { CHARLIE_PAYMENT_MODAL_V2, CHARLIE_TOKEN_REFRESH } from '@/config/GrowthBook/constants';\nimport { OriginCalling } from '@/components/billing/subscriptions/PaymentModal/PaymentModal.types';\nimport { usePaymentModal } from '@/hooks/billing/subscriptions/usePaymentModal';\nimport { CALLER } from '@/hooks/billing/subscriptions/usePaymentModal/usePaymentModal.types';\n\nconst SiteLockUpgradeHandler = () => {\n const [selectedCycle, setSelectedCycle] = useState(CYCLE_TYPES.ANNUALLY);\n const [selectedProduct, setSelectedProduct] = useState(undefined);\n const [requestedUpgrade, setRequestedUpgrade] = useState(false);\n const [displayPaymentModalV2, setDisplayPaymentModalV2] = useState(false);\n const [invoiceData, setInvoiceData] = useState({});\n const [successUpgrade, setSuccessUpgrade] = useState(false);\n const [newPlanData, setNewPlanData] = useState(null);\n\n const waitTokenToggle = useFeatureIsOn(CHARLIE_TOKEN_REFRESH);\n const enablePaymentModalV2 = useFeatureIsOn(CHARLIE_PAYMENT_MODAL_V2);\n\n const params = useParams();\n const history = useHistory();\n const dispatch = useDispatch();\n const { requestDiagnostic } = useDiagnostic();\n const { security: securityLocale, routes: routesLocale } = useLocale();\n const { sitelock: sitelockState, loading: loadingDiagnostic, diagnosticLoaded: successDiagnostic } = useSelector(state => state.preChat);\n const { upgrade: upgradeState } = useSelector(state => state.security);\n const { loading: invoicesLoading, byStatus: invoicesListState } = useSelector(state => state.invoices);\n\n\n const { upgrade: upgradeSitelockLocale } = securityLocale;\n const { successModal: successModalLocale } = upgradeSitelockLocale;\n const landingPageLocale = upgradeSitelockLocale.landingPageContent;\n const sitelockUpgradeLoading = (upgradeState && upgradeState.loading) || invoicesLoading;\n\n const newUpgradeProcessed = requestedUpgrade && upgradeState && !upgradeState.loading && !!upgradeState.invoiceId;\n const newInvoiceGenerated = !invoicesLoading && !!invoicesListState.Unpaid.length;\n const displayInvoiceModal = newUpgradeProcessed && newInvoiceGenerated;\n\n const product = sitelockState.find && sitelockState.find(product => product.id.toString() === params.productId);\n\n const redirectToPurchase = useCallback(() => {\n if (product) {\n const productNotElegible = (product.status && product.status !== 'active') || (product.plan && product.plan !== SITELOCK_PLANS.FREE);\n\n if ((!loadingDiagnostic && successDiagnostic && productNotElegible && !successUpgrade)) {\n history.push('/sitelock');\n }\n }\n }, [product, history, loadingDiagnostic, successDiagnostic, successUpgrade]);\n\n const handleSignNow = () => {\n history.push('/sitelock');\n };\n\n const handleBuyNow = (selectedPlan) => {\n setNewPlanData(selectedPlan);\n setRequestedUpgrade(true);\n\n if (!sitelockUpgradeLoading) {\n sitelockAnalytics.newSitelockPage.gaHandleContractNow();\n }\n\n const requestPayload = {\n hosting_id: product.id,\n new_product_id: selectedPlan.pid,\n new_billing_cycle: selectedCycle,\n offer_contexts: ['sitelockfree_scan_upsell'],\n };\n\n if (!sitelockUpgradeLoading) {\n dispatch(securityActions.upgrade.request(requestPayload));\n setSelectedProduct(selectedPlan.plan);\n }\n };\n\n useEffect(() => {\n if (upgradeState && !upgradeState.loading && upgradeState.invoiceId) {\n dispatch(loadInvoices('Unpaid', false));\n }\n }, [dispatch, upgradeState]);\n\n const getDetailsSectionProps = () => {\n const defaultProps = {\n title: landingPageLocale.detailsSectionTitle,\n firstSectionTitle: landingPageLocale.detailsSectionFirstSectionTitle,\n firstSectionDescription: landingPageLocale.detailsSectionFirstSectionDescription,\n firstSectionButtonLabel: landingPageLocale.detailsSectionFirstSectionButtonLabel,\n secondSectionTitle: landingPageLocale.detailsSectionSecondSectionTitle,\n secondSectionDescription: landingPageLocale.detailsSectionSecondSectionDescription,\n secondSectionButtonLabel: landingPageLocale.detailsSectionSecondSectionButtonLabel,\n gaProtectMySite: sitelockAnalytics.gaProtectMySite,\n };\n\n return defaultProps;\n };\n\n const getDiscoverBenefitsProps = () => {\n const defaultProps = {\n title: landingPageLocale.discoveryTitle,\n benefits: landingPageLocale.benefits,\n ctaTitle: landingPageLocale.ctaTitle,\n ctaDescription: landingPageLocale.ctaDescription,\n buttonLabel: landingPageLocale.buttonLabel,\n gaWantMoreProtection: sitelockAnalytics.gaWantMoreProtection,\n };\n\n return defaultProps;\n };\n\n const getBannerProps = () => {\n const defaultProps = {\n title: landingPageLocale.bannerTitle,\n buttonLabel: landingPageLocale.bannerLabel,\n gaGetNowAnchor: sitelockAnalytics.gaGetNowAnchor,\n };\n\n return defaultProps;\n };\n\n const handleUpgradeSitelock = useCallback(() => {\n setRequestedUpgrade(false);\n setSuccessUpgrade(true);\n }, [setRequestedUpgrade, setSuccessUpgrade]);\n\n const groupPaymentModalProps = useCallback(() => ({\n invoice: invoiceData,\n displayModalPayment: displayInvoiceModal,\n setDisplayModalPayment: () => setRequestedUpgrade(false),\n originCalling: OriginCalling.SITELOCK_UPGRADE,\n handleUpgradeSitelock,\n }), [displayInvoiceModal, invoiceData, handleUpgradeSitelock]);\n\n const setInvoiceById = useCallback(() => {\n if (displayInvoiceModal) {\n const invoiceById = invoicesListState.Unpaid.find(invoice => invoice.id === upgradeState.invoiceId);\n if (invoiceById) {\n setInvoiceData(invoiceById);\n setDisplayPaymentModalV2(true);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [displayInvoiceModal]);\n\n const {\n paymentModal,\n } = usePaymentModal({\n caller: CALLER.INVOICES,\n invoiceData,\n onClose: () => setDisplayPaymentModalV2(false),\n });\n\n const mountButtonLabel = planName => (\n <>\n {((sitelockUpgradeLoading) && selectedProduct === planName)\n ? setSelectedCycle(cycle)} data-testid={`${cycle}Radio`}>\n \n );\n\n const getUpgradeModalProps = useCallback(() => {\n const defaultProps = {\n title: successModalLocale.title(newPlanData && newPlanData.plan),\n description: successModalLocale.description,\n ListItems: newPlanData && newPlanData.pid\n ? successModalLocale.listItems[SITELOCK_ID[(newPlanData.pid)]]\n : [],\n buttonLabel: successModalLocale.buttonLabel,\n };\n\n const handleRedirect = () => {\n dispatch(preChatActions.productByStatus.request({ withCancelled: true, withPending: true, waitToken: waitTokenToggle }));\n history.push(\n `${routesLocale.security}${routesLocale.productdetail}/${params.productType}/${params.productId}`,\n );\n };\n\n return {\n ...defaultProps,\n handleRedirect,\n };\n }, [newPlanData, params, history, routesLocale, successModalLocale, dispatch, waitTokenToggle]);\n\n if (loadingDiagnostic || !successDiagnostic || !product) {\n return (\n \n \n \n \n );\n }\n\n return (\n \n\n \n \n {upgradeSitelockLocale.tag} \n \n {upgradeSitelockLocale.title} \n \n \n {upgradeSitelockLocale.selectedDomain(product.domain)}\n \n \n {upgradeSitelockLocale.paymentCicleLabel}\n \n \n \n {mountCycleOptionLabel(CYCLE_TYPES.ANNUALLY)}\n {mountCycleOptionLabel(CYCLE_TYPES.SEMIANNUALLY)}\n \n \n {mountCycleOptionLabel(CYCLE_TYPES.QUARTERLY)}\n {mountCycleOptionLabel(CYCLE_TYPES.MONTHLY)}\n \n \n \n \n \n \n {upgradeSitelockLocale.cards.items.map(card => (\n \n {card.plan === SITELOCK_PLANS.PROFESSIONAL && (\n \n \n )}\n {card.title} \n \n {card.plan === SITELOCK_PLANS.FREE ? (\n <>\n {upgradeSitelockLocale.cards.currentPlanLabel} \n {upgradeSitelockLocale.cards.defaultOnHostPlanLabel} \n \n ) : (\n <>\n {upgradeSitelockLocale.cards.valueToPaidLabel} \n {formatCurrency(PRICES[card.plan][selectedCycle])} \n \n handleBuyNow(card)}\n disabled={(sitelockUpgradeLoading) && selectedProduct !== card.plan}\n size=\"large\"\n />\n \n \n )}\n \n \n {card.list.map(item => (\n \n \n \n {item} \n \n ))}\n \n \n ))}\n \n \n \n {upgradeSitelockLocale.wishOtherSitelock(handleSignNow)}\n \n \n \n \n \n\n \n\n\n );\n};\n\nexport default SiteLockUpgradeHandler;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n gap: 8px;\n margin: 0 24px;\n padding-bottom: 72px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 0px;\n }\n `};\n`;\n\nexport const Section = styled.section`\n ${({ noPadding, theme }) => css`\n background: ${theme.v2.colors.white.primary};\n padding: ${noPadding ? 0 : '0 24px'};\n `}\n`;\n\nexport const DomainsList = styled.ul`\n margin: 0;\n padding: 0;\n`;\n\nexport const LoadingWrapper = styled.div`\n margin: 24px 0;\n`;\n\nexport const EmptyStateWrapper = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin: 60px;\n`;\n\nexport const EmptyStateLabel = styled.span`\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 0;\n white-space: nowrap;\n\n media (max-width: ${theme.v2.breakpoints.md}) {\n font-size: ${theme.v2.font.sizes.sm};\n }\n `};\n`;\n\nexport const Filter = styled.div`\n`;\n\nexport const LoadMoreWrapper = styled.div`\n ${({ withoutBottom }) => css`\n align-items: center;\n display: flex;\n justify-content: center;\n margin: ${withoutBottom ? '20px 0px 0px 20px' : '20px 0'};\n width: 100%;\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.li`\n ${({ theme, firstItem }) => css`\n border-top: ${!firstItem && `1px solid ${theme.v2.colors.feedback.canceledPure}`};\n display: flex;\n list-style: none;\n margin: none;\n padding: 24px 0;\n\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n flex-direction: column;\n }\n `};\n`;\n\nexport const LeftContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n`;\n\nexport const FlexWrap = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 8px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n flex-direction: column;\n gap: 4px;\n }\n `};\n`;\n\nexport const ColumnWrap = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const DomainContainer = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n`;\n\nexport const DomainLabel = styled.a`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n cursor: pointer;\n font-weight: ${theme.v2.font.weights.medium};\n font-size: ${theme.v2.font.sizes.xs};\n margin: 0;\n text-decoration: none;\n `}\n`;\n\nexport const TagsWrapper = styled.div`\n display: flex;\n gap: 8px;\n`;\n\nexport const TagContainer = styled.div`\n div {\n height: fit-content;\n position: static;\n }\n`;\n\nexport const ButtonsContainer = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 16px;\n justify-content: end;\n margin-left: auto;\n margin-bottom: auto;\n min-width: 316px;\n\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n flex-direction: row-reverse;\n justify-content: start;\n margin-left: 0;\n margin-top: 16px;\n }\n `};\n`;\n\nexport const Alert = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n padding: 16px 24px 0;\n\n p {\n color: ${theme.v2.colors.neutral.lowMedium};\n }\n\n div {\n padding: 0;\n }\n `};\n`;\n\nexport const AlertLabel = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 0;\n margin-left: 8px;\n `};\n`;\n","import { domainsActions } from '@/redux/modules/domains';\nimport { useDispatch } from 'react-redux';\n\n\nconst useInvoice = () => {\n const dispatch = useDispatch();\n\n const generate = (domain, callBackFunction) => {\n const dataDomain = {\n id: domain.id,\n donotrenew: false,\n name: domain.domain,\n };\n dispatch(domainsActions.domains.generateNewInvoice.request(dataDomain, callBackFunction));\n };\n\n return { generate };\n};\n\nexport default useInvoice;\n","export const DOMAIN_STATUS = {\n PENDING: 'pending',\n EXPIRED: 'expired',\n OVERDUE_DATE: 'overDueDate',\n NEXT_DUE_DATE: 'nextDueDate',\n ACTIVE: 'active',\n CANCELLED: 'cancelled',\n PENDING_TRANSFER: 'pendingTransfer',\n REGISTER_ERROR: 'registerError',\n};\n\nexport const domainsChips = [\n {\n id: '0',\n value: 'all',\n checked: true,\n },\n {\n id: '1',\n value: 'billingPending',\n checked: false,\n },\n {\n id: '2',\n value: 'registerFail',\n checked: false,\n },\n];\n","import { useSelector } from 'react-redux';\n\nconst usePropagationStatus = (domain) => {\n const { propagationStatus } = useSelector(state => state.newDomains);\n\n const filteredDns = propagationStatus.find(dns => dns.domain === domain);\n\n return !!filteredDns && filteredDns.status;\n};\n\nexport default usePropagationStatus;\n","import React, { useState } from 'react';\nimport * as Styles from './DomainItem.styles';\nimport {\n Alert,\n Button, IconDomain, Tag, Tooltip,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale';\nimport { addDays, differenceInCalendarDays } from 'date-fns';\nimport { useHistory } from 'react-router';\nimport { useInvoice } from '@/hooks/domains/useInvoice';\nimport {\n useDispatch, useSelector,\n} from 'react-redux';\nimport { locale } from '@/utils/locale';\nimport {\n CREDIT_CARD, BRASPAG_PARC_1X, BRASPAG_PARC_2X, BRASPAG_PARC_3X, BRASPAG_PARC_4X, BRASPAG_PARC_5X,\n BRASPAG_PARC_6X, BRASPAG_PARC_7X, BRASPAG_PARC_8X, BRASPAG_PARC_9X, BRASPAG_PARC_10X,\n BRASPAG_PARC_11X, BRASPAG_PARC_12X, CREDIT_CARD_ES, LIST_BOLETO_METHODS, LIST_PAYPAL_METHODS,\n} from '@/config/billing/paymentMethods';\nimport { INVOICE_STATUS, INVOICE_TYPE, PROPAGATION_STATUS } from '@/enums/domains/domains.enum';\nimport { isBRServer, isMobile } from '@/utils/Validators/validation';\nimport { domainsActions } from '@/redux/modules';\nimport { domainsAnalytics } from '@/analytics';\nimport ModalReactivateAutomaticSubscription from '@/components/Modal/ModalReactivateAutomaticSubscription';\nimport { handleDomainRenewal } from '@/redux/actions/domains';\nimport { formatDate } from '@/utils/Formatters/formatDate';\nimport { GET_A_NEW_DOMAIN } from '@/config/urls/supportUrls';\nimport { DOMAIN_STATUS } from '../../DomainsListHandler.types';\nimport { usePropagationStatus } from '@/hooks/domains/usePropagationStatus';\nimport { useBillingStatus } from '@/hooks/domains/useBillingStatus';\n\nconst DomainItem = ({ domain, statusTag, firstItem }) => {\n const [modalReactivation, setModalReactivation] = useState(false);\n const [isLoadingAction, setLoadingAction] = useState(false);\n\n const { dnsWizard: dnsWizardAnalytics } = domainsAnalytics;\n\n const {\n loading: isLoadingGenerateNewInvoice,\n } = useSelector(state => state.newDomains.domains.generateNewInvoice);\n\n const history = useHistory();\n const { generate } = useInvoice();\n const dispatch = useDispatch();\n const propagationStatus = usePropagationStatus(domain.domain);\n const { getIsDueDate, getIsOverDue, getIsNextDueDate } = useBillingStatus();\n const { domains: domainsLocale } = useLocale();\n const domainLocale = domainsLocale.domainsListPage;\n\n const today = new Date();\n const nextDueDate = formatDate(domain.nextDueDate);\n const expiryDate = formatDate(domain.expiryDate);\n const dueDate = getIsDueDate(domain);\n const daysToCancel = differenceInCalendarDays(addDays(dueDate, 31), today);\n\n const productIsActive = domain.status === 'active';\n const productIsExpired = domain.status === 'expired';\n const isCancelled = domain.status === 'cancelled' && (domain.cancelReason == null || domain.cancelReason === '');\n const domainExpired = productIsExpired && domain.isGracePeriod;\n const isOverDue = getIsOverDue(domain);\n const isNextDueDate = getIsNextDueDate(domain);\n const hasReasonToCancel = domain.cancelReason != null && domain.cancelReason !== '';\n const valueDisabledRenovation = 1;\n const disabledAutoRenovation = domain.doNotRenew === valueDisabledRenovation && productIsActive;\n\n const disableManage = ['expired', 'pending', 'registerError', 'pendingTransfer'].includes(domain.status);\n const domainCharsLimit = isMobile ? 22 : 25;\n const showToolTip = domain && domain.domain.indexOf('.') > domainCharsLimit;\n const displayNewMessageImprovements = (disabledAutoRenovation\n || (domain.invoiceType === INVOICE_TYPE.RENEWAL && domain.invoiceStatus === INVOICE_STATUS.CANCELLED)\n || (domain.invoiceType === INVOICE_TYPE.REGISTRATION && (isNextDueDate || isOverDue || domainExpired))\n || (domain.invoiceId === 0));\n const displayStatusTag = !(['nextDueDate', 'overDueDate'].includes(statusTag));\n\n const propagationStatusText = domainLocale && domainLocale.propagationAlerts(propagationStatus);\n const hasNoRestrictions = propagationStatus\n && (propagationStatus !== PROPAGATION_STATUS.NOT_CONTRACTED)\n && (propagationStatus !== PROPAGATION_STATUS.NOT_CONFIGURED)\n && (propagationStatus !== PROPAGATION_STATUS.NOT_PROPAGATED);\n const validPropagationStatus = !!propagationStatus && !!propagationStatusText && hasNoRestrictions;\n\n const canManageDns = productIsActive && !isNextDueDate && !isOverDue && !disabledAutoRenovation && !domainExpired;\n\n const creditCardPaymentForms = [\n CREDIT_CARD_ES, CREDIT_CARD, BRASPAG_PARC_1X,\n BRASPAG_PARC_2X, BRASPAG_PARC_3X,\n BRASPAG_PARC_4X, BRASPAG_PARC_5X,\n BRASPAG_PARC_6X, BRASPAG_PARC_7X,\n BRASPAG_PARC_8X, BRASPAG_PARC_9X,\n BRASPAG_PARC_10X, BRASPAG_PARC_11X,\n BRASPAG_PARC_12X];\n\n const isCreditCard = () => creditCardPaymentForms.includes(domain.paymentMethod);\n const isBoleto = () => LIST_BOLETO_METHODS.includes(domain.paymentMethod);\n const isPayPal = () => LIST_PAYPAL_METHODS.includes(domain.paymentMethod);\n\n const typePayment = () => {\n if (domain.paymentMethod && domain.paymentMethod.includes('boleto')) {\n return isBRServer ? 'boleto' : 'payu_boleto';\n }\n return domain.paymentMethod;\n };\n\n const invoiceUrl = id => `${locale('routes.invoices')}${locale('routes.unpaid')}/${id}/${typePayment()}`;\n\n const brokeDomain = (domain) => {\n if (domain.indexOf('.') > domainCharsLimit) {\n const split = domain.split('.');\n const second = split[2] ? `.${split[2]}` : '';\n const dotDomain = `${split[0].substring(0, domainCharsLimit)}...[${split[1]}${second}]`;\n return dotDomain;\n }\n return domain;\n };\n\n const reloadListDomains = () => {\n dispatch(domainsActions.domains.request());\n };\n\n const redirectToInvoice = (idInvoice) => {\n history.push(invoiceUrl(idInvoice));\n };\n\n const redirectToGeneratedInvoice = () => {\n generate(domain, redirectToInvoice);\n };\n\n const handleManageDomain = () => {\n const url = `${locale('routes.domains')}${locale('routes.domaindetail')}/${domain.id}`;\n history.push(url);\n };\n\n const handleConfigureDomain = () => {\n const url = `${locale('routes.domains')}${locale('routes.dnsWizard')}/${domain.id}`;\n history.push(url);\n dnsWizardAnalytics.dnsWizardButtonClick();\n };\n\n const handleOpen = async () => {\n setModalReactivation(true);\n };\n\n const handleActivateSubscription = () => {\n setLoadingAction(true);\n\n const dataDomain = {\n id: domain.id,\n donotrenew: false,\n name: domain.domain,\n };\n\n dispatch(domainsActions.domains.activateRenewal.request(dataDomain, reloadListDomains)).then((response) => {\n dispatch(handleDomainRenewal(response.payload.domainData));\n setLoadingAction(false);\n });\n };\n\n const tagRules = {\n [DOMAIN_STATUS.PENDING]: {\n label: domainLocale.statusProductDomain.pending,\n variant: 'attention',\n },\n [DOMAIN_STATUS.ACTIVE]: {\n label: domainLocale.statusProductDomain.active,\n variant: 'active',\n },\n [DOMAIN_STATUS.CANCELLED]: {\n label: domainLocale.statusProductDomain.cancelled,\n variant: 'cancel',\n },\n [DOMAIN_STATUS.PENDING_TRANSFER]: {\n label: domainLocale.statusProductDomain.pendingTransfer,\n variant: 'pending',\n },\n [DOMAIN_STATUS.REGISTER_ERROR]: {\n label: domainLocale.statusProductDomain.registerError,\n variant: 'problem',\n },\n [DOMAIN_STATUS.EXPIRED]: {\n label: domainLocale.statusProductDomain.expired,\n variant: 'problem',\n },\n [DOMAIN_STATUS.NEXT_DUE_DATE]: {\n label: domainLocale.statusProductDomain.nextDueDate,\n variant: 'pending',\n },\n [DOMAIN_STATUS.OVERDUE_DATE]: {\n label: domainLocale.statusProductDomain.overDueDate,\n variant: 'problem',\n },\n };\n\n const mountTag = ({ label, variant = 'active' }) => (\n \n \n );\n\n const alertRules = {\n disabled_auto_renew: {\n label: domainLocale.alerts.disabled_auto_renew(nextDueDate, handleOpen),\n variant: 'danger',\n },\n pending_domain: {\n label: domainLocale.alerts.pending_domain,\n variant: 'warning',\n },\n next_due_invoice: {\n label: domainLocale.alerts.next_due_invoice(nextDueDate, invoiceUrl(domain.invoiceId)),\n variant: 'warning',\n },\n next_due_date_credit_card: {\n label: domainLocale.alerts.next_due_date_credit_card(nextDueDate),\n variant: 'warning',\n },\n next_due_date_paypal: {\n label: domainLocale.alerts.next_due_date_paypal(nextDueDate),\n variant: 'warning',\n },\n due_date_disabled_auto_renovation: {\n label: domainLocale.alerts.due_date_disabled_auto_renovation(nextDueDate, redirectToGeneratedInvoice, isLoadingGenerateNewInvoice),\n variant: 'warning',\n },\n due_date_invoice: {\n label: domainLocale.alerts.due_date_invoice(nextDueDate, daysToCancel, invoiceUrl(domain.invoiceId)),\n variant: 'danger',\n },\n overdue_disabled_auto_renew: {\n label: domainLocale.alerts.overdue_disabled_auto_renew(expiryDate, redirectToGeneratedInvoice, isLoadingGenerateNewInvoice),\n variant: 'danger',\n },\n expired_invoice: {\n label: domainLocale.alerts.expired_invoice(expiryDate, invoiceUrl(domain.invoiceId)),\n variant: 'danger',\n },\n expired_grace_period_overdue: {\n label: domainLocale.alerts.expired_grace_period_overdue(expiryDate),\n variant: 'danger',\n },\n expired_on_grace_period: {\n label: domainLocale.alerts.expired_on_grace_period(redirectToGeneratedInvoice),\n variant: 'danger',\n },\n domain_cancelled_by_tos: {\n label: domainLocale.alerts.domain_cancelled_by_tos,\n variant: 'danger',\n },\n cancelled_unrecoverable: {\n label: domainLocale.alerts.cancelled_unrecoverable(expiryDate, GET_A_NEW_DOMAIN),\n variant: 'danger',\n },\n cancelled_recoverable: {\n label: domainLocale.alerts.cancelled_recoverable(expiryDate, GET_A_NEW_DOMAIN),\n variant: 'danger',\n },\n };\n\n const getMessageWarningToNextDueDate = () => {\n if (!domain.paymentMethod) {\n return;\n }\n\n if (isBoleto()) {\n return alertRules.next_due_invoice;\n }\n if (isCreditCard()) {\n return alertRules.next_due_date_credit_card;\n }\n if (isPayPal()) {\n return alertRules.next_due_date_paypal;\n }\n\n if (displayNewMessageImprovements) {\n return alertRules.due_date_disabled_auto_renovation;\n }\n };\n\n const getMessageWarningDueDate = () => {\n if (!displayNewMessageImprovements) {\n return alertRules.due_date_invoice;\n }\n return alertRules.overdue_disabled_auto_renew;\n };\n\n const getMessageAutoRenovation = () => alertRules.disabled_auto_renew;\n\n const getMessageExpired = () => {\n const expiredOnGracePeriod = (domain.doNotRenew === valueDisabledRenovation || (domain.gracePeriod && !domain.isGracePeriod && (domain.invoiceType !== INVOICE_TYPE.RECOVERY)));\n\n if (!domain.gracePeriod) {\n return alertRules.expired_grace_period_overdue;\n }\n if (expiredOnGracePeriod) {\n return alertRules.expired_on_grace_period;\n }\n return alertRules.expired_invoice;\n };\n\n const getMessageCancelled = () => {\n if (hasReasonToCancel) {\n return alertRules.domain_cancelled_by_tos;\n }\n if (!hasReasonToCancel && domain.doNotRenew && !domain.isGracePeriod) {\n return alertRules.cancelled_unrecoverable;\n }\n return alertRules.cancelled_recoverable;\n };\n\n const mountAlert = ({ label, variant = 'info' }) => {\n const iconRules = {\n info: 'IconInfo',\n pending: 'IconClock',\n warning: 'IconDanger',\n danger: 'IconDanger',\n };\n\n return (\n \n \n );\n };\n\n return (\n \n setModalReactivation(false)}\n open={modalReactivation}\n handleActivateSubscription={handleActivateSubscription}\n domain=\"domain\"\n loading={isLoadingAction}\n title={domainLocale.modalDomainAutoRenovation.title}\n description={domainLocale.modalDomainAutoRenovation.description}\n confirmLabel={domainLocale.modalDomainAutoRenovation.confirmLabel}\n />\n \n \n \n \n {!showToolTip ? brokeDomain(domain.domain) : (\n \n {brokeDomain(domain.domain)}\n \n )}\n \n \n \n {displayStatusTag && mountTag(tagRules[statusTag])}\n {validPropagationStatus && mountTag({ label: propagationStatusText.labelTag, variant: 'pending' })}\n \n \n \n {isNextDueDate && !isOverDue && mountAlert({ ...getMessageWarningToNextDueDate() })}\n {isOverDue && mountAlert({ ...getMessageWarningDueDate() })}\n {productIsActive && disabledAutoRenovation && !isOverDue && !isNextDueDate && mountAlert({ ...getMessageAutoRenovation() })}\n {productIsExpired && mountAlert({ ...getMessageExpired() })}\n {(isCancelled || hasReasonToCancel) && mountAlert({ ...getMessageCancelled() })}\n {validPropagationStatus && mountAlert({ label: propagationStatusText.labelDomainsDetails, variant: 'info' })}\n \n \n \n {canManageDns && \n \n );\n};\n\nexport default DomainItem;\n","import BannerToEnableTitanTrial from '@/components/Email/BannerToEnableTitanTrial';\nimport ModalTitanTrialColorful from '@/components/Email/ModalTitanTrialColorful';\nimport { executeGADisplayBannerFromDomains, executeWithParams } from '@/utils/ThirdParties/tagManager';\nimport React, { useCallback, useState } from 'react';\n\nconst TitanTrialBanner = ({ domainWithoutEmail, essentialData }) => {\n const [isLoaded, setIsLoaded] = useState(false);\n const [enableTrialState, setEnableTrialState] = useState({\n modalIsOpen: false,\n isEnabledByURLParam: false,\n hideBanner: true,\n currentDomain: {\n id: null,\n domain: null,\n },\n });\n\n const domainWithoutEmailFormattedToOptions = domainWithoutEmail.map(item => ({ value: item.id, label: `@${item.domain}` }));\n\n const enableTrialByBannerGAEventsByAction = useCallback((action) => {\n executeWithParams(\n 'gaEvent',\n 'e-mail',\n 'Banner trial de Titan - aba de Domínios',\n action,\n );\n }, []);\n\n const handleCloseModal = useCallback(\n () => {\n enableTrialByBannerGAEventsByAction('Fechar modal');\n\n setEnableTrialState(previousEnableTrialState => ({\n ...previousEnableTrialState,\n modalIsOpen: false,\n currentDomain: { id: null, domain: null },\n }));\n }, [setEnableTrialState, enableTrialByBannerGAEventsByAction],\n );\n\n const handlerChangeBannerSelect = useCallback(({ value, label }) => {\n enableTrialByBannerGAEventsByAction('Selecionar domínio');\n\n setEnableTrialState(previousEnableTrialState => ({\n ...previousEnableTrialState,\n modalIsOpen: true,\n currentDomain: { id: value, domain: label },\n }));\n }, [setEnableTrialState, enableTrialByBannerGAEventsByAction]);\n\n const onBannerLoaded = useCallback(() => {\n if (!isLoaded) {\n executeGADisplayBannerFromDomains();\n setIsLoaded(true);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <>\n \n \n );\n\n const loadMoreButton = () => showLoadMoreButton && (\n \n \n );\n\n const mountEmptyState = label => (\n \n \n {label}\n \n \n );\n\n const requestNextPageWhenEmptyState = useCallback(() => {\n if (emptyList && domainFilter && domains.length < listTotal && !loadingDomains && !justUpdated) {\n setPage(page + 1);\n setJustUpdate(true);\n }\n }, [emptyList, page, domains.length, listTotal, domainFilter, loadingDomains, justUpdated]);\n\n useEffect(() => {\n requestNextPageWhenEmptyState();\n }, [requestNextPageWhenEmptyState]);\n\n return (\n \n \n \n \n \n \n {loadingDomains ? mountLoading : (\n <>\n {domains.length === 0 ? mountEmptyState(domainsListLocale.emptyState) : (\n <>\n {emptyList ? mountEmptyState(domainsListLocale.noFilterResult) : (\n \n {domainsListFiltered.length > 0 && domainsListFiltered.slice(0, domainsListFiltered.length).map((domain, index) => (\n \n )}\n \n )}\n \n )}\n \n \n );\n};\n\nexport default DomainsListHandler;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n padding: 0 40px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding: 0;\n }\n `}\n`;\n\nexport const SkeletonWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n justify-content: space-between;\n padding: 150px 80px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding: 20px;\n }\n `}\n`;\n\nexport const Colum = styled.div`\n`;\n\nexport const Skeleton = styled.div`\n ${({ gap }) => css`\n margin-bottom: ${gap}px;\n `}\n`;\n\nexport const FaqSection = styled.section`\n ${({ theme }) => css`\n background: ${theme.v2.colors.white.primary};\n margin: 16px 24px;\n width: 560px;\n \n a{\n color: ${theme.v2.colors.brand.primaryMedium};\n }\n\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n width: 50%;\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n width: auto;\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 10px 0;\n }\n\n `};\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n padding: 0 24px;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding: 0;\n }\n `}\n`;\n\nexport const Row = styled.div`\n ${({ theme, isTitle }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.neutral.highPure};\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n min-height: 80px;\n justify-content: space-between;\n padding: 23px 34px;\n width: 100%;\n\n margin-bottom: ${isTitle && '8px'};\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding: 23px 10px;\n }\n `}\n`;\n\nexport const Divider = styled.div`\n ${({ theme, lastRow }) => css`\n background-color: ${theme.v2.colors.feedback.canceledPure};\n border-left: 34px solid ${theme.v2.colors.neutral.highPure};\n border-right: 34px solid ${theme.v2.colors.neutral.highPure};\n height: ${!lastRow && '1px'};\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n border-left: 10px solid ${theme.v2.colors.neutral.highPure};\n border-right: 10px solid ${theme.v2.colors.neutral.highPure};\n }\n `}\n`;\n\nexport const TitleWrapper = styled.div`\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 30px;\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n margin: 0;\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n\nexport const Profiles = styled.div`\n`;\n\nexport const ListItem = styled.div`\n`;\n\nexport const Dropdown = styled.div`\n ${({ theme }) => css`\n display: none;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n display: block;\n }\n `}\n`;\n\nexport const ProfileActions = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 16px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n width: 100%;\n\n div:last-child{\n display: none;\n }\n }\n `}\n`;\n\nexport const ProfileLink = styled.a`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryMedium};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n gap: 8px;\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n word-break: break-all;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n`;\n\nexport const ModalButtonsWrapper = styled.div`\n display: flex;\n justify-content: center;\n gap: 24px;\n margin-top: 30px;\n`;\n\nexport const ModalContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 8px 16px 16px 16px;\n`;\n\nexport const ModalTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.menuPrimaryDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n margin-top: 0;\n margin-bottom: 3px;\n `}\n`;\n\nexport const ModalAlert = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n color: ${theme.v2.colors.brand.menuPrimaryDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n\n p {\n line-height: 19px;\n margin: 0;\n }\n `}\n`;\n\nexport const DomainLinkedWrapper = styled.div`\n ${({ theme, isMobileComponent }) => css`\n display: ${isMobileComponent ? 'none' : 'flex'};\n width: 100%;\n \n svg {\n fill: ${({ theme }) => theme.v2.colors.brand.menuPrimaryDark};\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n display: ${isMobileComponent ? 'flex' : 'none'};\n }\n `}\n`;\n\nexport const LinkText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0;\n `}\n`;\n\nexport const DomainLink = styled.a`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n word-break: break-all;\n `}\n`;\n\nexport const Banner = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.brand.menuPrimaryDark};\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n min-height: 80px;\n overflow: hidden;\n padding: 16px 280px 16px 30px;\n position: relative;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding: 16px 50px 16px 30px;\n }\n `}\n`;\n\nexport const Label = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background: ${theme.v2.colors.neutral.highPure};\n border-radius: 8px;\n box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.20);\n color: ${theme.v2.colors.brand.menuPrimaryDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n gap: 8px;\n height: 48px;\n line-height: 20.57px;\n margin-left: -42px;\n padding: 16px 24px;\n transform: rotate(-2.5deg);\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n font-size: ${theme.v2.font.sizes.xxs};\n margin-top: -20px;\n }\n `}\n`;\n\nexport const BannerTitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.highPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.bold};\n margin: 0;\n\n strong {\n color: ${theme.v2.colors.feedback.attentionPure};\n }\n `}\n`;\n\nexport const BannerDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.highPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n margin: 0;\n `}\n`;\n\nexport const BannerContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: 2px;\n`;\n\nexport const IconCloseWrapper = styled.div`\n position: absolute;\n right: 22px;\n top: 26px;\n`;\n\nexport const Rainbow = styled.div`\n background: linear-gradient(90deg, #1D5297 0%, #FFCF00 9.63%, #2E93EE 19.15%, #F67922 28.15%, #2E93EE 39.33%, #FFE885 52.38%, #F67922 63.48%, #2E93EE 73.53%, #1D5297 82.76%, #FFCF00 91.23%, #F67922 100%);\n bottom: 0;\n height: 4px;\n left: 0;\n position: absolute;\n width: 100%;\n`;\n\n\nexport const BannerButtonWrapper = styled.div`\n ${({ theme }) => css`\n position: absolute;\n right: 64px;\n top: 24px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n position: static;\n }\n `}\n`;\n","import { isBRServer } from '@/utils/Validators/validation';\n\nconst LINK_NA_BIO = {\n br: [\n {\n id: '01',\n link: 'https://suporte.hostgator.com.br/hc/pt-br/articles/24845439817371-O-que-%C3%A9-e-por-que-ter-um-link-na-bio?utm_source=portal&utm_medium=etapa-1&utm_campaign=O-que-e-por-que-ter-um-link-na-bio&utm_id=linknabio-br',\n question: 'O que é e por que ter um link na bio',\n },\n {\n id: '02',\n link: 'https://suporte.hostgator.com.br/hc/pt-br/articles/24845185786011-Como-criar-um-Link-na-Bio?utm_source=portal&utm_medium=etapa-1&utm_campaign=Como-criar-um-Link-na-Bio&utm_id=linknabio-br',\n question: 'Como criar um Link na Bio',\n },\n {\n id: '03',\n link: 'https://suporte.hostgator.com.br/hc/pt-br/articles/24845208436251-Como-adicionar-meu-Link-na-Bio-nas-redes-sociais?utm_source=portal&utm_medium=etapa-1&utm_campaign=Como-adicionar-meu-Link-na-Bio-nas-redes-sociais&utm_id=linknabio-br',\n question: 'Como adicionar meu Link na Bio nas redes sociais',\n },\n {\n id: '04',\n link: 'https://suporte.hostgator.com.br/hc/pt-br/articles/24845268238235-Como-editar-ou-excluir-meu-Link-na-Bio?utm_source=portal&utm_medium=etapa-1&utm_campaign=Como-editar-ou-excluir-meu-Link-na-Bio&utm_id=linknabio-br',\n question: 'Como editar ou excluir um Link na Bio',\n },\n ],\n es: [\n {\n id: '01',\n link: 'https://soporte.hostgator.mx/hc/es-419/articles/30546503233683-Qu%C3%A9-es-y-por-qu%C3%A9-tener-un-Enlace-en-la-Bio',\n question: 'Qué es y por qué tener un enlace en la biografía.',\n },\n {\n id: '02',\n link: 'https://soporte.hostgator.mx/hc/es-419/articles/30546564989459-C%C3%B3mo-crear-un-Enlace-en-la-Bio',\n question: 'Cómo crear un Enlace en la Bio.',\n },\n {\n id: '03',\n link: 'https://soporte.hostgator.mx/hc/es-419/articles/30546630956435-C%C3%B3mo-agregar-el-Enlace-en-la-Bio-en-las-redes-sociales-Instagram-Facebook-TikTok-YouTube-LinkedIn',\n question: 'Cómo agregar mi enlace de la bio en las redes sociales (Instagram, Facebook, TikTok, YouTube, LinkedIn).',\n },\n {\n id: '04',\n link: 'https://soporte.hostgator.mx/hc/es-419/articles/30546673338003-C%C3%B3mo-editar-o-eliminar-un-Enlace-en-la-Bio',\n question: 'Cómo editar o eliminar el enlace en la Bio.',\n },\n ],\n};\n\nconst CUSTOM_DOMAIN_LINKS = {\n br: 'https://suporte.hostgator.com.br/hc/pt-br/articles/31201728427539-Como-conectar-um-domínio-registrado-no-Link-na-Bio',\n es: 'https://soporte.hostgator.mx/hc/es-419/articles/31203235769491-Como-conectar-un-dominio-registrado-en-el-Enlace-en-la-Bio',\n};\n\nexport const FAQ_LINK_NA_BIO = isBRServer ? LINK_NA_BIO.br : LINK_NA_BIO.es;\nexport const CUSTOM_DOMAIN_TO_LINK_NA_BIO = isBRServer ? LINK_NA_BIO.br : CUSTOM_DOMAIN_LINKS.es;\n","import React, { useState } from 'react';\nimport * as Styles from './LinkNaBioList.styles';\nimport {\n Dropdown, Button, IconLink, IconDanger,\n Tooltip,\n IconArrowCurvedRight,\n IconButton,\n} from 'gatorcomponents';\nimport { Modal } from '@/pages/common';\nimport { copyTextToClipboard } from '@/utils/Application/copyTextToClipboard';\nimport { commonActions } from '@/redux/modules';\nimport { useDispatch } from 'react-redux';\nimport { LINK_NA_BIO_URL } from '@/config';\nimport { CUSTOM_DOMAIN_TO_LINK_NA_BIO } from '@/config/urls/linkNaBioUrls';\nimport withErrorBoundary from '@/utils/errorBoundary';\n\nconst LinkNaBioList = ({\n profiles = [],\n locale = {},\n createLinkNaBio = () => null,\n linkToCustomDomain = () => null,\n editLinkNaBio = () => null,\n deleteLinkNaBio = () => null,\n testId = 'link-na-bio-list',\n loading = false,\n goToDataAnalysis = () => null,\n canShowDataAnalysis = false,\n canShowCustomDomain = false,\n}) => {\n const [profileToDelete, setProfileToDelete] = useState(undefined);\n const [showBanner, setShowBanner] = useState(true);\n const dispatch = useDispatch();\n\n const canShowBanner = localStorage.getItem('linkNaBioBanner') !== 'closed';\n\n const handleShowDeleteModal = value => setProfileToDelete(value);\n\n const showCopyNotification = () => {\n dispatch(commonActions.notifications.set({\n label: locale.copied,\n type: 'success',\n }));\n };\n\n const handleCopy = (profile) => {\n copyTextToClipboard(`${LINK_NA_BIO_URL}/${profile.username}`);\n showCopyNotification();\n };\n\n const handleDelete = () => {\n deleteLinkNaBio(profileToDelete.id);\n };\n\n const dropdownItems = (profile) => {\n const items = [\n {\n id: `${profile.username}-edit`,\n label: locale.edit,\n onClick: () => editLinkNaBio(profile),\n },\n {\n id: `${profile.username}-delete`,\n label: locale.delete,\n onClick: () => handleShowDeleteModal(profile),\n },\n ];\n\n if (canShowCustomDomain) {\n items.unshift({\n id: `${profile.username}-customDomain`,\n label: locale.customDomain,\n onClick: () => linkToCustomDomain(profile),\n });\n }\n\n return items;\n };\n\n const closeBanner = () => {\n localStorage.setItem('linkNaBioBanner', 'closed');\n setShowBanner(false);\n };\n\n const openSupportLink = () => {\n window.open(CUSTOM_DOMAIN_TO_LINK_NA_BIO, '_blank');\n };\n\n return (\n \n {canShowBanner && showBanner && canShowCustomDomain && (\n \n \n \n \n \n {locale.bannerTitle}\n \n \n {locale.bannerDescription}\n \n \n \n \n \n \n \n )}\n \n \n \n {locale.myLinks}\n \n\n \n {profiles.length <= 4 && (\n createLinkNaBio()}\n variant=\"secondary\"\n />\n )}\n {profiles.length > 4 && (\n \n createLinkNaBio()}\n disabled\n />\n \n )}\n \n \n\n \n {locale.limit}\n \n \n\n \n {profiles.map((profile, index) => (\n \n \n \n \n \n\n {profile.domain && (\n \n \n {locale.domainConnectedTo}\n \n {profile.domain}\n \n \n \n )}\n\n \n {canShowDataAnalysis && (\n \n goToDataAnalysis(profile)}\n variant=\"secondary\"\n />\n \n )}\n \n handleCopy(profile)}\n testId=\"copy-link-button\"\n />\n \n \n {profile.domain && (\n \n \n {locale.domainConnectedTo}\n \n {profile.domain}\n \n \n \n )}\n \n \n ))}\n \n\n {profileToDelete && (\n \n \n \n {locale.delete}\n \n\n \n \n \n \n handleShowDeleteModal()}\n />\n \n\n \n \n \n\n \n \n )}\n \n );\n};\n\nexport default withErrorBoundary(LinkNaBioList, 'LinkNaBioList');\n","import { collect } from '@/analytics';\nimport { collectTrackData } from '@/utils/Tracker/tracker';\n\nconst EVENT = {\n NAME: 'gaEvent',\n CATEGORY: {\n LINK_NA_BIO: 'Link Na Bio',\n },\n ACTION: {\n MENU_ACCESS: 'Menu Acesso',\n EDIT: 'Editar',\n REMOVE: 'Remover',\n FORWARD: 'Avançar',\n ADD: 'Adicionar',\n COPY: 'Copiar',\n VIEW: 'Visualizar',\n UNAVAILABLE: 'Link indisponível',\n LINK: 'Link',\n LINK_NA_BIO: 'Link Na Bio',\n PUBLISH: 'Publicar',\n },\n LABEL: {\n STEP_1: 'Step 1',\n STEP_2: 'Step 2',\n STEP_3: 'Step 3',\n STEP_4: 'Step 4',\n LIST: 'Listagem Link Na Bio',\n },\n};\n\nconst listViewEventData = {\n ga: {\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LINK_NA_BIO,\n gaEventAction: EVENT.ACTION.MENU_ACCESS,\n gaEventLabel: EVENT.LABEL.LIST,\n },\n tracker: {\n campaign: EVENT.CATEGORY.LINK_NA_BIO,\n action: EVENT.ACTION.MENU_ACCESS,\n label: EVENT.LABEL.LIST,\n },\n};\n\nconst accessToStep1EventData = {\n ga: {\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LINK_NA_BIO,\n gaEventAction: EVENT.ACTION.MENU_ACCESS,\n gaEventLabel: EVENT.LABEL.STEP_1,\n },\n tracker: {\n campaign: EVENT.CATEGORY.LINK_NA_BIO,\n action: EVENT.ACTION.MENU_ACCESS,\n label: EVENT.LABEL.STEP_1,\n },\n};\n\nconst linkUnavailableEventData = {\n ga: {\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LINK_NA_BIO,\n gaEventAction: EVENT.ACTION.UNAVAILABLE,\n gaEventLabel: EVENT.LABEL.STEP_1,\n },\n tracker: {\n campaign: EVENT.CATEGORY.LINK_NA_BIO,\n action: EVENT.ACTION.UNAVAILABLE,\n label: EVENT.LABEL.STEP_1,\n },\n};\n\nconst accessToStep2EventData = {\n ga: {\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LINK_NA_BIO,\n gaEventAction: EVENT.ACTION.VIEW,\n gaEventLabel: EVENT.LABEL.STEP_2,\n },\n tracker: {\n campaign: EVENT.CATEGORY.LINK_NA_BIO,\n action: EVENT.ACTION.VIEW,\n label: EVENT.LABEL.STEP_2,\n },\n};\n\nconst addLinkStep2EventData = {\n ga: {\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LINK_NA_BIO,\n gaEventAction: `${EVENT.ACTION.ADD} ${EVENT.ACTION.LINK}`,\n gaEventLabel: EVENT.LABEL.STEP_2,\n },\n tracker: {\n campaign: EVENT.CATEGORY.LINK_NA_BIO,\n action: `${EVENT.ACTION.ADD} ${EVENT.ACTION.LINK}`,\n label: EVENT.LABEL.STEP_2,\n },\n};\n\nconst removeLinkStep2EventData = {\n ga: {\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LINK_NA_BIO,\n gaEventAction: `${EVENT.ACTION.REMOVE} ${EVENT.ACTION.LINK}`,\n gaEventLabel: EVENT.LABEL.STEP_2,\n },\n tracker: {\n campaign: EVENT.CATEGORY.LINK_NA_BIO,\n action: `${EVENT.ACTION.REMOVE} ${EVENT.ACTION.LINK}`,\n label: EVENT.LABEL.STEP_2,\n },\n};\n\nconst editLinkStep2EventData = {\n ga: {\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LINK_NA_BIO,\n gaEventAction: `${EVENT.ACTION.EDIT} ${EVENT.ACTION.LINK}`,\n gaEventLabel: EVENT.LABEL.STEP_2,\n },\n tracker: {\n campaign: EVENT.CATEGORY.LINK_NA_BIO,\n action: `${EVENT.ACTION.EDIT} ${EVENT.ACTION.LINK}`,\n label: EVENT.LABEL.STEP_2,\n },\n};\n\nconst accessToStep3EventData = {\n ga: {\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LINK_NA_BIO,\n gaEventAction: EVENT.ACTION.VIEW,\n gaEventLabel: EVENT.LABEL.STEP_3,\n },\n tracker: {\n campaign: EVENT.CATEGORY.LINK_NA_BIO,\n action: EVENT.ACTION.VIEW,\n label: EVENT.LABEL.STEP_3,\n },\n};\n\nconst publishLinkNaBioEventData = {\n ga: {\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LINK_NA_BIO,\n gaEventAction: EVENT.ACTION.PUBLISH,\n gaEventLabel: EVENT.LABEL.STEP_3,\n },\n tracker: {\n campaign: EVENT.CATEGORY.LINK_NA_BIO,\n action: EVENT.ACTION.PUBLISH,\n label: EVENT.LABEL.STEP_3,\n },\n};\n\nconst copyLinkNaBioEventData = {\n ga: {\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LINK_NA_BIO,\n gaEventAction: `${EVENT.ACTION.COPY} ${EVENT.ACTION.LINK}`,\n gaEventLabel: EVENT.LABEL.STEP_4,\n },\n tracker: {\n campaign: EVENT.CATEGORY.LINK_NA_BIO,\n action: `${EVENT.ACTION.COPY} ${EVENT.ACTION.LINK}`,\n label: EVENT.LABEL.STEP_4,\n },\n};\n\nconst viewLinkNaBioEventData = {\n ga: {\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LINK_NA_BIO,\n gaEventAction: `${EVENT.ACTION.VIEW} ${EVENT.ACTION.LINK_NA_BIO}`,\n gaEventLabel: EVENT.LABEL.STEP_4,\n },\n tracker: {\n campaign: EVENT.CATEGORY.LINK_NA_BIO,\n action: `${EVENT.ACTION.VIEW} ${EVENT.ACTION.LINK_NA_BIO}`,\n label: EVENT.LABEL.STEP_4,\n },\n};\n\nconst editLinkNaBioEventData = {\n ga: {\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LINK_NA_BIO,\n gaEventAction: `${EVENT.ACTION.EDIT} ${EVENT.ACTION.LINK_NA_BIO}`,\n gaEventLabel: EVENT.LABEL.LIST,\n },\n tracker: {\n campaign: EVENT.CATEGORY.LINK_NA_BIO,\n action: `${EVENT.ACTION.EDIT} ${EVENT.ACTION.LINK_NA_BIO}`,\n label: EVENT.LABEL.LIST,\n },\n};\n\nconst removeLinkNaBioEventData = {\n ga: {\n event: EVENT.NAME,\n gaEventCategory: EVENT.CATEGORY.LINK_NA_BIO,\n gaEventAction: `${EVENT.ACTION.REMOVE} ${EVENT.ACTION.LINK_NA_BIO}`,\n gaEventLabel: EVENT.LABEL.LIST,\n },\n tracker: {\n campaign: EVENT.CATEGORY.LINK_NA_BIO,\n action: `${EVENT.ACTION.REMOVE} ${EVENT.ACTION.LINK_NA_BIO}`,\n label: EVENT.LABEL.LIST,\n },\n};\n\nconst listView = () => {\n collect(listViewEventData.ga);\n collectTrackData(listViewEventData.tracker);\n};\n\nconst accessToStep1 = () => {\n collect(accessToStep1EventData.ga);\n collectTrackData(accessToStep1EventData.tracker);\n};\nconst linkUnavailable = () => {\n collect(linkUnavailableEventData.ga);\n collectTrackData(linkUnavailableEventData.tracker);\n};\n\nconst accessToStep2 = () => {\n collect(accessToStep2EventData.ga);\n collectTrackData(accessToStep2EventData.tracker);\n};\n\nconst addLinkStep2 = () => {\n collect(addLinkStep2EventData.ga);\n collectTrackData(addLinkStep2EventData.tracker);\n};\n\nconst removeLinkStep2 = () => {\n collect(removeLinkStep2EventData.ga);\n collectTrackData(removeLinkStep2EventData.tracker);\n};\n\nconst editLinkStep2 = () => {\n collect(editLinkStep2EventData.ga);\n collectTrackData(editLinkStep2EventData.tracker);\n};\n\nconst accessToStep3 = () => {\n collect(accessToStep3EventData.ga);\n collectTrackData(accessToStep3EventData.tracker);\n};\n\nconst publishLinkNaBio = () => {\n collect(publishLinkNaBioEventData.ga);\n collectTrackData(publishLinkNaBioEventData.tracker);\n};\n\nconst copyLinkNaBio = () => {\n collect(copyLinkNaBioEventData.ga);\n collectTrackData(copyLinkNaBioEventData.tracker);\n};\n\nconst viewLinkNaBio = () => {\n collect(viewLinkNaBioEventData.ga);\n collectTrackData(viewLinkNaBioEventData.tracker);\n};\n\nconst editLinkNaBio = () => {\n collect(editLinkNaBioEventData.ga);\n collectTrackData(editLinkNaBioEventData.tracker);\n};\n\nconst removeLinkNaBio = () => {\n collect(removeLinkNaBioEventData.ga);\n collectTrackData(removeLinkNaBioEventData.tracker);\n};\n\nconst analytics = {\n listView,\n accessToStep1,\n linkUnavailable,\n accessToStep2,\n addLinkStep2,\n removeLinkStep2,\n editLinkStep2,\n accessToStep3,\n publishLinkNaBio,\n copyLinkNaBio,\n viewLinkNaBio,\n editLinkNaBio,\n removeLinkNaBio,\n};\n\nexport default analytics;\n","import styled, { css } from 'styled-components';\n\n\nexport const ModalContent = styled.div`\n ${({ theme, contentNotCentered }) => css`\n align-items: ${contentNotCentered ? 'flex-start' : 'center'};\n display: flex;\n flex-direction: column;\n gap: ${!contentNotCentered && '12px'};\n padding: 8px 16px 16px 16px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n padding: 8px 4px 16px 4px;\n }\n `}\n`;\n\nexport const ModalIllustration = styled.img`\n ${({ step2 }) => css`\n height: 64px;\n margin-top: ${step2 ? '32px' : '80px'};\n width: 76.22px;\n `}\n`;\n\nexport const ModalButtonsWrapper = styled.div`\n ${({ theme, marginTop, marginBottom }) => css`\n display: flex;\n flex-wrap: wrap-reverse;\n justify-content: center;\n gap: 24px;\n margin-top: ${marginTop || '35'}px;\n margin-bottom: ${marginBottom || '0'}px;\n width: 100%;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-top: 80px;\n\n div {\n margin-bottom: 0px;\n }\n }\n `}\n`;\n\nexport const BackToListButtonWrapper = styled.div`\n display: flex;\n flex-wrap: wrap-reverse;\n justify-content: center;\n margin-bottom: 66px;\n margin-top: 20px;\n width: 100%;\n`;\n\nexport const ModalTitle = styled.h3`${({\n theme, step2, light, marginTop,\n}) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${light ? theme.v2.font.sizes.md : theme.v2.font.sizes.sm};\n font-weight: ${light ? theme.v2.font.weights.regular : theme.v2.font.weights.medium};\n margin-top: ${marginTop || 10}px;\n margin-bottom: ${light ? '6px' : '3px'};\n text-align: ${light ? 'start' : 'center'};\n max-width: ${step2 && '450px'};\n\n span {\n color: ${theme.v2.colors.brand.primaryDark};\n }\n `}\n`;\n\nexport const ModalDescription = styled.p`${({\n theme, light, maxWidth, marginBottom, marginTop,\n}) => css`\n color: ${light ? theme.v2.colors.neutral.lowPure : theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 18.9px;\n margin-bottom: ${`${marginBottom || 14}px`};\n margin-top: ${`${marginTop || 0}px`};\n max-width: ${maxWidth || '680'}px;\n text-align: ${light ? 'start' : 'center'};\n\n strong {\n color: ${light ? theme.v2.colors.brand.menuPrimaryMedium : theme.v2.colors.brand.menuPrimaryDark};\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n\nexport const SelectWrapper = styled.div`\n margin-top: 10px;\n max-width: 320px;\n width: 100%;\n`;\n\nexport const InputWrapper = styled.div`\n align-items: flex-end;\n display: flex;\n margin-top: 10px;\n max-width: 320px;\n width: 100%;\n`;\n\nexport const RadioCard = styled.div`\n ${({ theme, first }) => css`\n align-items: flex-start;\n border: 1px solid ${theme.v2.colors.neutral.highMedium};\n border-radius: 8px;\n cursor: pointer;\n display: flex;\n gap: 5px;\n margin-top: ${first ? '10px' : '4px'};\n padding: 24px 19px;\n max-width: 496px;\n\n `}\n`;\n\nexport const RadioTexts = styled.div`\n display: flex;\n flex-direction: column;\n gap: 5px;\n width: 100%;\n`;\n\nexport const RadioTitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 18.9px;\n margin: 0;\n\n span {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n\nexport const RadioDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 16.2px;\n margin: 0;\n margin-bottom: 3px;\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n\nexport const InputSuffix = styled.span`\n ${({ theme }) => css`\n border-bottom: 1px solid ${theme.v2.colors.neutral.highMedium};\n color: ${theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 18.9px;\n margin-left: -16px;\n max-width: 230px;\n overflow: hidden;\n padding-bottom: 8px;\n padding-right: 20px;\n text-overflow: ellipsis;\n top: 50%;\n\n @media (max-width: ${theme.v2.breakpoints.xs}) {\n width: 70px;\n }\n `}\n`;\n\n\nexport const Card = styled.div`\n ${({ theme, padding }) => css`\n align-items: flex-start;\n background: ${theme.v2.colors.brand.primaryUltralight};\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 5px;\n margin-bottom: 13px;\n padding: ${padding || '24px'};\n width: 100%;\n `}\n`;\n\nexport const SubdomainText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.menuPrimaryDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: 18.9px;\n margin-top: 0;\n word-break: break-all;\n `}\n`;\n\nexport const Info = styled.p`\n ${({ theme, extraDark }) => css`\n color: ${extraDark ? theme.v2.colors.brand.menuPrimaryDark : theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 16.2px;\n margin-bottom: 0;\n margin-top: 0;\n `}\n`;\n\nexport const InfoWrapper = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n margin-top: 8px;\n`;\n\nexport const IconCheckWrapper = styled.div`\n ${({ marginTop }) => css`\n margin-top: ${marginTop || 82}px;\n margin-bottom: -12px;\n `}\n`;\n\nexport const SuccessTitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: 32.4px;\n margin-top: 0;\n margin-bottom: 0;\n text-align: center;\n `}\n`;\n\nexport const SuccessDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 21.6px;\n margin-top: 0;\n margin-bottom: 0;\n max-width: 645px;\n text-align: center;\n\n strong {\n color: ${theme.v2.colors.neutral.lowDark};\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n\nexport const SuccessExternalDescription = styled.p`\n ${({ theme, smaller }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${smaller ? '18.9px' : '21.6px'};\n margin-top: 0;\n margin-bottom: 10px;\n max-width: ${smaller ? '600px' : '645px'};\n\n strong {\n color: ${theme.v2.colors.neutral.lowDark};\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n\nexport const NumberCircle = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background: ${theme.v2.colors.brand.menuPrimaryDark};\n border-radius: 50%;\n color: ${theme.v2.colors.neutral.highPure};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.bold};\n height: 24px;\n justify-content: center;\n min-width: 24px;\n width: 24px;\n `}\n`;\n\nexport const Step = styled.div`\n align-items: baseline;\n display: flex;\n gap: 16px;\n`;\n\nexport const SubStepList = styled.ul`\n margin-bottom:10px;\n margin-left: 23px;\n margin-top: 3px;\n`;\n\nexport const SubStep = styled.li`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 18.9px;\n margin-bottom: 8px;\n word-break: break-all;\n\n strong {\n font-weight: ${theme.v2.font.weights.bold};\n }\n `}\n`;\n\nexport const SubStepWrapper = styled.div`\n align-items: flex-start;\n display: flex;\n gap: 12px;\n`;\n\nexport const SuccessExternalButtonWrapper = styled.div`\n margin-bottom: 16px;\n margin-top: 36px;\n`;\n\nexport const ErrorAlert = styled.div`\n ${({ theme }) => css`\n background: ${theme.v2.colors.feedback.problemUltraLight};\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n margin-top: 10px;\n margin-bottom: 13px;\n padding: 32px;\n width: 100%;\n `}\n`;\n\nexport const ErrorMessage = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 18.9px;\n margin: 0;\n `}\n`;\n\nexport const ErrorMessageBold = styled.strong`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark}; \n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: 18.9px;\n `}\n`;\n\nexport const AlreadyConnectedTitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: 32.4px;\n margin-bottom: 0;\n margin-top: 0;\n text-align: center;\n `}\n`;\n\nexport const AlreadyConnectedDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 21.6px;\n margin-top: 0;\n margin-bottom: 0;\n max-width: 550px;\n text-align: center;\n\n\n strong {\n color: ${theme.v2.colors.brand.primaryDark};\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n\nexport const DeleteAlert = styled.div`\n display: flex;\n gap: 12px;\n margin-top: 40px;\n margin-bottom: 23px;\n width: 100%;\n`;\n\nexport const DeleteAlertText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 18.9px;\n margin: 0;\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n\nexport const IconWrapper = styled.div`\n`;\n\nexport const ModalAlert = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.menuPrimaryDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 18.9px;\n max-width: 535px;\n\n strong{ \n font-weight: ${theme.v2.font.weights.bold};\n }\n `}\n`;\n","export const steps = {\n DOMAIN_SELECT: 'DOMAIN_SELECT',\n INTERNAL_DOMAIN: 'INTERNAL_DOMAIN',\n INTERNAL_DOMAIN_VERIFY: 'INTERNAL_DOMAIN_VERIFY',\n INTERNAL_DOMAIN_DONE: 'INTERNAL_DOMAIN_DONE',\n EXTERNAL_DOMAIN_CONFIGURATION: 'EXTERNAL_DOMAIN_CONFIGURATION',\n EXTERNAL_DOMAIN_DONE: 'EXTERNAL_DOMAIN_DONE',\n DOMAIN_VERIFY_ERROR: 'DOMAIN_VERIFY_ERROR',\n DOMAIN_ALREADY_CONNECTED: 'DOMAIN_ALREADY_CONNECTED',\n REMOVE_DOMAIN: 'REMOVE_DOMAIN',\n};\n\nexport const connectionTypes = {\n subdomain: 'subdomain',\n mainDomain: 'mainDomain',\n};\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { Modal } from '@/pages/common';\nimport * as Styles from './LinkCustomDomainModal.styles';\nimport {\n Alert,\n Button, IconCheck, IconCopy, IconDanger, IconInfo, Input, Radio, Select, Skeleton,\n Tag,\n} from 'gatorcomponents';\nimport withErrorBoundary from '@/utils/errorBoundary';\nimport illustrationDomain from '../../media/illustration-domain.svg';\nimport { connectionTypes, steps } from './enums';\n\nconst initialDomainData = {\n selectedDomain: '',\n selectedDomainID: 0,\n customDomain: '',\n invalidDomain: false,\n connectionType: '',\n subdomain: '',\n type: '',\n nameServer: '',\n hostingId: '',\n};\n\nconst LinkCustomDomainModal = ({\n locale = {},\n handleModalDisplay = () => null,\n sites = [],\n sitesLoading = false,\n profile = {},\n updateLinkNaBio = () => null,\n verifyDomain = () => null,\n resetVerify = () => null,\n domainToLinkExists = undefined,\n loadingDomainExists = false,\n}) => {\n const [domainData, setDomainData] = useState(initialDomainData);\n const [activeStep, setActiveStep] = useState(steps.DOMAIN_SELECT);\n const isCustomDomain = domainData.selectedDomain === 'customDomain';\n\n const sitesListToSelect = sites.map(site => ({\n label: site.domain,\n value: site.domain_id,\n }));\n\n const handleInitialStep = useCallback(() => {\n if (profile.domain) {\n setActiveStep(steps.DOMAIN_ALREADY_CONNECTED);\n }\n }, [profile.domain]);\n\n useEffect(() => {\n handleInitialStep();\n }, [handleInitialStep]);\n\n const updateDomainData = (key, value, validate) => {\n const newDomainData = { ...domainData };\n const selectedDomainData = sites.find(site => site.domain_id === value);\n\n if (selectedDomainData) {\n newDomainData.selectedDomain = selectedDomainData.domain;\n newDomainData.type = selectedDomainData.type;\n newDomainData.connectionType = connectionTypes.mainDomain;\n newDomainData.selectedDomainID = value;\n newDomainData.nameServer = selectedDomainData.hosting_nameserver_1;\n newDomainData.hostingId = selectedDomainData.hosting_id;\n\n setDomainData(newDomainData);\n return;\n }\n\n if ((validate || domainData.invalidDomain) && key === 'customDomain') {\n const isDomainRegex = /^(https?:\\/\\/)?(www\\.)?([a-zA-Z0-9-]+\\.)*[a-zA-Z]{2,63}\\.[a-zA-Z]{2,6}(\\/.*)?$/g;\n\n newDomainData.invalidDomain = !isDomainRegex.test(value);\n setDomainData(newDomainData);\n return;\n }\n\n newDomainData[key] = value;\n setDomainData(newDomainData);\n };\n\n const handleStep = (step) => {\n setActiveStep(step);\n };\n\n const handleCloseModal = () => {\n handleModalDisplay();\n setDomainData(initialDomainData);\n setActiveStep(steps.DOMAIN_SELECT);\n resetVerify();\n };\n\n const updateProfile = (step) => {\n if (step === steps.EXTERNAL_DOMAIN_CONFIGURATION) {\n const domainToLink = isCustomDomain ? domainData.customDomain : domainData.selectedDomain;\n updateLinkNaBio({\n isExternalDomain: true,\n domain: domainToLink,\n nameServer: domainData.nameServer,\n hostingId: domainData.hostingId,\n domainId: domainData.selectedDomainID,\n });\n handleStep(steps.EXTERNAL_DOMAIN_DONE);\n }\n\n if (step === steps.INTERNAL_DOMAIN) {\n const domainToLink = domainData.subdomain ? `${domainData.subdomain}.${domainData.selectedDomain}` : domainData.selectedDomain;\n updateLinkNaBio({\n isExternalDomain: false,\n domain: domainToLink,\n nameServer: domainData.nameServer,\n hostingId: domainData.hostingId,\n domainId: domainData.selectedDomainID,\n });\n handleStep(steps.INTERNAL_DOMAIN_DONE);\n }\n\n if (step === steps.REMOVE_DOMAIN) {\n updateLinkNaBio({ domain: null, isRemovingDomain: true });\n handleCloseModal();\n }\n };\n\n const verifyDomainExists = () => {\n verifyDomain && verifyDomain(isCustomDomain ? domainData.customDomain : domainData.selectedDomain);\n };\n\n const selectDomainAgain = () => {\n resetVerify && resetVerify();\n setDomainData(initialDomainData);\n handleStep(steps.DOMAIN_SELECT);\n };\n\n const redirectAfterVerify = useCallback(() => {\n if (domainData.selectedDomain && typeof domainToLinkExists === 'boolean') {\n if (domainToLinkExists) {\n handleStep(domainData.type === 'internal' ? steps.INTERNAL_DOMAIN : steps.EXTERNAL_DOMAIN_CONFIGURATION);\n } else {\n handleStep(steps.DOMAIN_VERIFY_ERROR);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [domainToLinkExists, domainData.selectedDomain]);\n\n useEffect(() => {\n redirectAfterVerify();\n }, [redirectAfterVerify]);\n\n if (activeStep === steps.DOMAIN_SELECT) {\n return (\n \n \n \n {locale.title}\n \n \n {locale.description}\n \n\n \n {sitesLoading ? (\n updateDomainData('selectedDomain', value)}\n withScroll\n dropdownHeight=\"sm\"\n fixedOption={{ label: locale.otherDomain, value: 'customDomain' }}\n />\n )}\n \n\n {isCustomDomain && (\n \n updateDomainData('customDomain', event.currentTarget.value)}\n onBlur={({ value }) => updateDomainData('customDomain', value, true)}\n value={domainData.customDomain}\n placeholder=\"\"\n errorMessage={domainData.invalidDomain ? locale.invalidDomain : ''}\n testId=\"link-custom-domain-modal-external-domain-input\"\n />\n \n )}\n\n \n \n \n \n );\n }\n if (activeStep === steps.INTERNAL_DOMAIN) {\n return (\n \n \n \n {locale.howToConnectTitle(domainData && domainData.selectedDomain)}\n \n\n updateDomainData('connectionType', connectionTypes.subdomain)} data-testid=\"subdomainRadio\">\n \n \n {locale.subdomain}\n \n \n {locale.subdomainDescription}\n \n \n updateDomainData(connectionTypes.subdomain, event.currentTarget.value)}\n onBlur={({ value }) => updateDomainData(connectionTypes.subdomain, value, true)}\n maxLength={30}\n customMask={value => value && value.toLowerCase().replace(/[^a-z0-9]/gi, '')}\n size=\"sm\"\n testId=\"link-custom-domain-modal-subdomain-input\"\n />\n \n {`.${domainData && domainData.selectedDomain}`}\n \n \n )}\n \n\n \n\n updateDomainData('connectionType', connectionTypes.mainDomain)} data-testid=\"mainDomainRadio\">\n \n \n {locale.mainDomain(domainData && domainData.selectedDomain)}\n \n \n {locale.mainDomainDescription}\n \n \n \n\n \n handleStep(steps.INTERNAL_DOMAIN_VERIFY)}\n disabled={!domainData.connectionType || (domainData.connectionType === connectionTypes.subdomain && !domainData.subdomain)}\n />\n \n \n \n );\n }\n if (activeStep === steps.INTERNAL_DOMAIN_VERIFY) {\n return (\n \n \n \n {locale.verifyChanges}\n \n \n {locale.verifyChangesDescription}\n \n\n \n \n {locale.afterConfirmation}\n \n\n \n {locale.newDomainConnected}\n \n\n \n {`${domainData.subdomain ? `${domainData.subdomain}.${domainData.selectedDomain}` : domainData.selectedDomain}`}\n \n\n \n \n {locale.afterConfirmationInfo}\n \n \n \n\n \n handleStep(steps.INTERNAL_DOMAIN)}\n />\n updateProfile(steps.INTERNAL_DOMAIN)}\n />\n \n \n \n );\n }\n if (activeStep === steps.INTERNAL_DOMAIN_DONE) {\n return (\n \n \n \n \n \n {locale.domainConnectionSuccess}\n \n \n {locale.successDescription}\n \n \n \n \n \n );\n }\n if (activeStep === steps.EXTERNAL_DOMAIN_CONFIGURATION) {\n return (\n \n \n \n {locale.configureYourDomain}\n \n \n {locale.configureYourDomainDescription(isCustomDomain ? domainData.customDomain : domainData.selectedDomain)}\n \n\n \n \n {locale.configureStep4Attention}\n \n\n \n \n 1\n \n \n {locale.configureStep1}\n \n \n\n \n \n 2\n \n \n {locale.configureStep2}\n \n \n\n \n \n 3\n \n \n {locale.configureStep3}\n \n \n \n \n 4\n \n \n {locale.configureStep4}\n \n \n \n \n \n {locale.configureStep4Name(isCustomDomain ? domainData.customDomain : domainData.selectedDomain)}\n \n \n \n \n\n \n \n {locale.configureStep4TTL}\n \n \n \n \n\n \n \n {locale.configureStep4Value(`${profile.username}.olink.ai`)}\n \n \n \n \n \n\n \n \n {locale.configurationTip}\n \n \n\n \n\n \n updateProfile(steps.EXTERNAL_DOMAIN_CONFIGURATION)}\n />\n \n \n \n );\n }\n if (activeStep === steps.EXTERNAL_DOMAIN_DONE) {\n return (\n \n \n \n \n \n {locale.domainConnectionSuccess}\n \n \n {locale.externalDomainConnected}\n \n \n \n \n \n );\n }\n if (activeStep === steps.DOMAIN_VERIFY_ERROR) {\n return (\n \n \n \n {locale.verifyingDomain}\n \n \n {locale.verifyingDomainDescription}\n \n \n \n {locale.verificationNotPossible}\n \n \n {locale.verifyOtherDomain}\n \n \n\n \n \n \n \n );\n }\n if (activeStep === steps.DOMAIN_ALREADY_CONNECTED) {\n return (\n \n \n \n \n\n \n {locale.domainConnected}\n \n \n \n {locale.domainConnectedDescription(domainData.selectedDomain)}\n \n \n \n handleStep(steps.REMOVE_DOMAIN)}\n />\n \n \n \n );\n }\n if (activeStep === steps.REMOVE_DOMAIN) {\n return (\n \n \n \n {locale.removeDomainTitle}\n \n \n \n \n \n {locale.removeDomainDescription}\n \n \n \n updateProfile(steps.REMOVE_DOMAIN)}\n />\n \n \n \n );\n }\n};\n\nexport default withErrorBoundary(LinkCustomDomainModal, 'LinkCustomDomainModal');\n","import React, {\n useCallback, useEffect,\n useState,\n} from 'react';\nimport * as Styles from './LinkNaBioHandler.styles';\nimport useLocale from '@/hooks/useLocale';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { sitesActions, linkNaBioActions } from '@/redux/modules';\nimport { Skeleton } from 'gatorcomponents';\nimport { LinkNaBioList } from './components/LinkNaBioList';\nimport { useHistory } from 'react-router';\nimport FaqDefault from '@/components/FrequentlyQuestions/FaqDefault';\nimport { FAQ_LINK_NA_BIO } from '@/config/urls/linkNaBioUrls';\nimport { linkNaBioAnalytics } from '@/analytics/linkNaBio';\nimport withErrorBoundary from '@/utils/errorBoundary';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { CHARLIE_LINK_NA_BIO_CUSTOM_DOMAIN, CHARLIE_LINK_NA_BIO_DATA_ANALYSIS } from '@/config/GrowthBook/constants';\nimport { LinkCustomDomainModal } from './components/LinkCustomDomainModal';\n\nconst LinkNaBioHandler = () => {\n const [profileToLinkCustomDomain, setProfileToLinkCustomDomain] = useState(undefined);\n const { linkNaBio: linkNaBioLocale, routes: routesLocale } = useLocale();\n\n const {\n loading, profiles, shouldGetProfiles, domainToLinkExists,\n } = useSelector(state => state.linkNaBio);\n const dispatch = useDispatch();\n const history = useHistory();\n const { loadingSites: sitesLoading, list: sites, loading: loadingDomainExists } = useSelector(state => state.sites);\n const { domainsPropagation } = useSelector(state => state.preChat);\n const canShowCustomDomain = useFeatureIsOn(CHARLIE_LINK_NA_BIO_CUSTOM_DOMAIN);\n const canShowDataAnalysis = useFeatureIsOn(CHARLIE_LINK_NA_BIO_DATA_ANALYSIS);\n\n const allowedSitesToSelect = sites.filter(site => site.sub_status === 'active').flatMap(site => domainsPropagation.filter(propagation => site.domain === propagation.domain));\n\n const goToWizard = useCallback((profileId) => {\n profileId\n ? history.push(`${routesLocale.linkNaBio}/${routesLocale.wizard}/${profileId}`)\n : history.push(`${routesLocale.linkNaBio}/${routesLocale.wizard}`);\n }, [history, routesLocale]);\n\n const goToDataAnalysis = useCallback((profile) => {\n history.push(`${routesLocale.linkNaBio}/${routesLocale.dataAnalysis}/${profile.id}`);\n }, [history, routesLocale]);\n\n const onComponentMount = useCallback(() => {\n if (shouldGetProfiles) {\n dispatch(linkNaBioActions.profile.get.request());\n }\n\n if (!shouldGetProfiles && !profiles.length) {\n goToWizard();\n }\n }, [shouldGetProfiles, profiles, dispatch, goToWizard]);\n\n useEffect(() => {\n onComponentMount();\n }, [onComponentMount]);\n\n const onLoadList = useCallback(() => {\n if (profiles.length) {\n linkNaBioAnalytics.listView();\n }\n }, [profiles]);\n\n useEffect(() => {\n onLoadList();\n }, [onLoadList]);\n\n const getListProps = () => {\n const linkToCustomDomain = (profile) => {\n dispatch(sitesActions.sites.request());\n setProfileToLinkCustomDomain(profile);\n };\n\n const editLinkNaBio = (profile) => {\n goToWizard(profile.id);\n linkNaBioAnalytics.editLinkNaBio();\n };\n\n const deleteLinkNaBio = (profileId) => {\n dispatch(linkNaBioActions.profile.delete.request({ profileId }));\n linkNaBioAnalytics.removeLinkNaBio();\n };\n\n const defaultProps = {\n profiles,\n locale: linkNaBioLocale.list,\n createLinkNaBio: goToWizard,\n linkToCustomDomain,\n editLinkNaBio,\n deleteLinkNaBio,\n loading,\n goToDataAnalysis,\n canShowCustomDomain,\n canShowDataAnalysis,\n };\n\n return {\n ...defaultProps,\n };\n };\n\n const getFaqProps = useCallback(() => ({\n buttonLabel: linkNaBioLocale.faqButton,\n questions: FAQ_LINK_NA_BIO,\n }), [linkNaBioLocale]);\n\n const getCustomDomainModalProps = useCallback(() => {\n const updateLinkNaBio = ({\n domain, isRemovingDomain, isExternalDomain, nameServer, hostingId, domainId,\n }) => {\n const dataToSend = {\n domainToLink: domain,\n profileId: profileToLinkCustomDomain.id,\n isRemovingDomain,\n isExternalDomain,\n nameServer,\n hostingId,\n domainId,\n callback: () => dispatch(linkNaBioActions.profile.get.request()),\n };\n dispatch(linkNaBioActions.profile.update.request(dataToSend));\n };\n\n const closeCustomDomainModal = () => {\n setProfileToLinkCustomDomain(undefined);\n };\n\n const verifyDomain = (domain) => {\n dispatch(sitesActions.domainDns.request(domain));\n };\n\n const resetVerify = () => {\n dispatch(linkNaBioActions.domainVerify.reset());\n };\n\n return {\n updateLinkNaBio,\n handleModalDisplay: closeCustomDomainModal,\n locale: linkNaBioLocale.customDomainModal,\n sites: allowedSitesToSelect,\n sitesLoading,\n profile: profileToLinkCustomDomain,\n verifyDomain,\n resetVerify,\n loadingDomainExists,\n domainToLinkExists,\n };\n }, [linkNaBioLocale, dispatch, allowedSitesToSelect, sitesLoading, profileToLinkCustomDomain, loadingDomainExists, domainToLinkExists]);\n\n\n return (\n <>\n {shouldGetProfiles && (\n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n )}\n\n {!shouldGetProfiles\n && \n \n\n {profileToLinkCustomDomain && (\n \n \n \n {stepLocale.title}\n \n \n {stepLocale.description}\n \n\n \n \n \n \n \n \n \n \n\n \n {successMessage}\n \n\n \n \n\n {!onMobile && (\n \n \n {stepLocale.knowMore}\n \n {FAQ_LINK_NA_BIO.map(faq => (\n {faq.question} \n ))}\n\n \n )}\n \n\n \n );\n};\n\nexport default withErrorBoundary(LinkNaBioStep1, 'LinkNaBioStep1');\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.neutral.highPure};\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n min-height: 900px;\n padding: 52px;\n position: relative;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding: 24px;\n padding-bottom: 100px;\n }\n `}\n`;\n\nexport const Content = styled.div`\n display: flex;\n flex-direction: column;\n max-width: 500px;\n overflow: auto;\n`;\n\nexport const AddLinkButton = styled.div`\n margin-bottom: 48px;\n`;\n\nexport const SocialLinkButtonWrapper = styled.div`\n margin-bottom: 4px;\n`;\n\nexport const ButtonWrapper = styled.div`\n margin-bottom: 50px;\n`;\n\nexport const BackButton = styled.div`\n position: absolute;\n bottom: 30px;\n`;\n\nexport const ButtonRow = styled.div`\n display: flex;\n justify-content: space-between;\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.menuPrimaryDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 7px 0;\n `}\n`;\n\nexport const Subtitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n gap: 8px;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n margin-top: 25px;\n margin-bottom: 18px;\n `}\n`;\n\nexport const LinkTitleInput = styled.div`\n display: flex;\n align-items: flex-end;\n margin-top: -10px;\n margin-bottom: 20px;\n position: relative;\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.menuPrimaryDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin-top: -2px;\n margin-bottom: 8px;\n `}\n`;\n\nexport const ModalContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 8px 16px 16px 16px;\n`;\n\nexport const ModalButtonsWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-wrap: wrap-reverse;\n justify-content: center;\n gap: 24px;\n margin-top: 35px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-top: 80px;\n\n div {\n margin-bottom: 0px;\n }\n }\n `}\n`;\n\nexport const ErrorMessage = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin-top: -26px;\n margin-bottom: 30px;\n `}\n`;\n\nexport const ModalTitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n margin-top: 0;\n margin-bottom: 3px;\n `}\n`;\n\nexport const ModalDescription = styled.h4`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.brand.lowPure};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n gap: 10px;\n margin-top: 0;\n max-width: 500px;\n `}\n`;\n\nexport const ModalDeleteButtonsWrapper = styled(ModalButtonsWrapper)`\n ${({ theme }) => css`\n margin-top: 0;\n \n @media (max-width: ${theme.breakpoints.sm}) {\n margin-top: 80px;\n\n div {\n margin-bottom: 0px;\n }\n }\n `}\n`;\n\nexport const Snappy = styled.img`\n ${({ theme }) => css`\n position: absolute;\n bottom: 0;\n right: 0;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n height: 160px;\n }\n `}\n`;\n\nexport const EmojiButton = styled.button`\n ${({ theme }) => css`\n background: none;\n border: none;\n border-right: 1px solid ${theme.v2.colors.neutral.lowLight};\n cursor: pointer;\n display: flex;\n margin-right: 7px;\n margin-top: 5px;\n padding-right: 8px;\n `}\n`;\n\nexport const EmojiPicker = styled.div`\n position: absolute;\n z-index: 1;\n top: 66px;\n`;\n\nexport const SocialMediaList = styled.div`\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n margin-bottom: 18px;\n`;\n\nexport const SocialMediaDescription = styled.p`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: 18.9px;\n color: ${theme.v2.colors.brand.lowPure};\n margin: 3px 0;\n `}\n`;\n\nexport const SocialLink = styled.button`\n ${({ theme }) => css`\n align-items: center;\n background: none;\n border-radius: 25px;\n border: 1px solid ${theme.v2.colors.neutral.highMedium};\n cursor: pointer;\n display: flex;\n gap: 8px;\n height: 48px;\n justify-content: center;\n padding: 8px 16px 8px 8px;\n width: 164px;\n `}\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div` \n display: flex;\n flex-direction: column;\n gap: 16px;\n margin-bottom: 16px;\n`;\n\nexport const Card = styled.div`\n ${({ theme, isDragging }) => css`\n background-color: ${isDragging && theme.v2.colors.neutral.highLight};\n border-radius: 8px;\n border: 1px solid ${theme.v2.colors.neutral.highMedium};\n display: flex;\n gap: 8px;\n padding: 20px;\n max-width: 435px;\n min-height: 76px;\n `}\n`;\n\nexport const Details = styled.div`\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n gap: 4px;\n overflow: hidden;\n width: 100%;\n`;\n\nexport const Actions = styled.div`\n display: flex;\n gap: 16px;\n`;\n\nexport const Title = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n word-break: break-all;\n `}\n`;\n\nexport const Url = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 250px;\n `}\n`;\n\nexport const SocialMedia = styled.div`\n align-items: center;\n display: flex;\n flex-grow: 1;\n gap: 8px;\n`;\n","import styled from 'styled-components';\n\nexport const Svg = styled.svg`\n cursor: grab;\n min-width: 16px;\n width: 16px;\n`;\n","import React from 'react';\nimport * as Styles from './IconDrag.styles';\n\nconst IconDrag = ({\n testId = 'IconDrag',\n}) => (\n \n \n \n \n \n \n);\n\nexport default IconDrag;\n","import React, {\n useCallback, useEffect, useRef, useState,\n} from 'react';\nimport * as Styles from './DragAndDropList.styles';\nimport { IconButton, Skeleton, SocialMediaIcons } from 'gatorcomponents';\nimport { IconDrag } from '../IconDrag';\nimport { linkType } from '../../LinkNaBioWizardHandler.enum';\nimport withErrorBoundary from '@/utils/errorBoundary';\n\nconst DragAndDropList = ({\n testId = 'drag-and-drop',\n list = [],\n setList = () => null,\n editLink = () => null,\n deleteLink = () => null,\n linksLoading = false,\n model = 'LINKS',\n}) => {\n const draggingPos = useRef(null);\n const [items, setItems] = useState(list);\n\n const updateItems = useCallback(() => {\n setItems(list);\n }, [list]);\n\n useEffect(() => {\n updateItems();\n }, [updateItems]);\n\n const handleDragStart = (position) => {\n draggingPos.current = position;\n };\n\n const handleDragEnter = (position) => {\n const dragOverPos = position;\n const newItems = [...items];\n const draggingItem = newItems[draggingPos.current];\n if (!draggingItem) return;\n\n newItems.splice(draggingPos.current, 1);\n newItems.splice(dragOverPos, 0, draggingItem);\n\n const reorderedItems = newItems.map((item, index) => ({\n ...item,\n order: index,\n }));\n\n draggingPos.current = position;\n setItems(reorderedItems);\n };\n\n const handleDragFinish = () => {\n draggingPos.current = null;\n setList(items);\n };\n\n const editItem = (index) => {\n editLink && editLink(index);\n };\n\n const deleteItem = (index) => {\n deleteLink && deleteLink(index);\n };\n\n return (\n \n {linksLoading && items.map(item => (\n handleDragStart(index)}\n onDragEnter={() => handleDragEnter(index)}\n onDragOver={e => e.preventDefault()}\n onDragEnd={handleDragFinish}\n isDragging={draggingPos.current === index}\n >\n {draggingPos.current !== index && (\n <>\n \n {item.description} \n {item.link} \n \n )}\n {model === linkType.SOCIAL_MEDIA && (\n \n \n \n {item.social_icon.name}\n \n {item.value} \n \n \n )}\n \n deleteItem(index)} variant=\"white\" />\n editItem(index)} variant=\"white\" />\n \n \n )}\n \n ))}\n \n );\n};\n\nexport default withErrorBoundary(DragAndDropList, 'DragAndDropList');\n","import styled, { css } from 'styled-components';\nimport dots from '../../media/funny_dots.svg';\nimport { templates as templatesEnum } from '../../LinkNaBioWizardHandler.enum';\n\n// THIS IS A MVP SO THE COLORS ARE FROM LINK NA BIO PRODUCT, NOT FROM CLIENT AREA\nconst colorSchemes = {\n HOSTGATOR_DARK_BLUE: {\n primaryColor: '#1F2044',\n secondaryColor: '#FFFFFF',\n headerTextColor: '#FFFFFF',\n linkColor: '#FFFFFF',\n linkTextColor: '#1F2044',\n funny: {\n color: '#1F2044',\n backgroundColor: '#FFFFFF',\n borderColor: '#040A10',\n textColor: '#FFFFFF',\n },\n minimalist: {\n borderColor: '#FFFFFF3D',\n },\n },\n NEON: {\n primaryColor: '#14FFEC',\n secondaryColor: '#212121',\n headerTextColor: '#212121',\n linkColor: '#212121',\n linkTextColor: '#14FFEC',\n funny: {\n color: '#212121',\n backgroundColor: '#FFFFFF',\n borderColor: '#212121',\n textColor: '#212121',\n },\n minimalist: {\n borderColor: '#2121213D',\n },\n },\n PASTEL: {\n primaryColor: '#FFF8E0',\n secondaryColor: '#171717',\n headerTextColor: '#171717',\n linkColor: '#171717',\n linkTextColor: '#FFF8E0',\n funny: {\n color: '#171717',\n backgroundColor: '#FFFFFF',\n borderColor: '#171717',\n textColor: '#171717',\n },\n minimalist: {\n borderColor: '#1717173D',\n },\n },\n WARM: {\n primaryColor: '#EBDAFB',\n secondaryColor: '#FD5F37',\n headerTextColor: '#FD5F37',\n linkColor: '#FD5F37',\n linkTextColor: '#FFFFFF',\n funny: {\n color: '#040A10',\n backgroundColor: '#FFFFFF',\n borderColor: '##040A10',\n textColor: '#040A10',\n },\n minimalist: {\n borderColor: '#FD5F373D',\n },\n },\n HOSTGATOR_BLUE: {\n primaryColor: '#FFFFFF',\n secondaryColor: '#0070D1',\n headerTextColor: '#0070D1',\n linkColor: '#0070D1',\n linkTextColor: '#FFFFFF',\n funny: {\n color: '#0070D1',\n backgroundColor: '#FFFFFF',\n borderColor: '#0070D1',\n textColor: '#0070D1',\n },\n minimalist: {\n borderColor: '#0070D13D',\n },\n },\n SIMPLE: {\n primaryColor: '#FFFFFF',\n secondaryColor: '#1F2044',\n headerTextColor: '#1F2044',\n linkColor: '#1F2044',\n linkTextColor: '#FFFFFF',\n funny: {\n color: '#1F2044',\n backgroundColor: '#FFFFFF',\n borderColor: '#1F2044',\n textColor: '#1F2044',\n },\n minimalist: {\n borderColor: '#1F20443D',\n },\n },\n GRADIENT_ROSE: {\n isGradient: true,\n primaryColor: '#F44369',\n secondaryColor: '#3E3B92',\n headerTextColor: '#FFFFFF',\n linkColor: '#FFFFFF',\n linkTextColor: '#040A10',\n funny: {\n color: '#040A10',\n backgroundColor: '#FFFFFF',\n borderColor: '#040A10',\n textColor: '#FFFFFF',\n },\n minimalist: {\n borderColor: '#FFFFFF3D',\n iconFill: '#000000',\n },\n },\n GRADIENT_WARM: {\n isGradient: true,\n primaryColor: '#2E93EE',\n secondaryColor: '#F69E52',\n headerTextColor: '#FFFFFF',\n linkColor: '#FFFFFF',\n linkTextColor: '#040A10',\n funny: {\n color: '#040A10',\n backgroundColor: '#FFFFFF',\n borderColor: '#040A10',\n textColor: '#FFFFFF',\n },\n minimalist: {\n borderColor: '#FFFFFF3D',\n iconFill: '#000000',\n },\n },\n GRADIENT_DARK: {\n isGradient: true,\n primaryColor: '#0E1C26',\n secondaryColor: '#294861',\n headerTextColor: '#FFFFFF',\n linkColor: '#FFFFFF',\n linkTextColor: '#040A10',\n funny: {\n color: '#040A10',\n backgroundColor: '#FFFFFF',\n borderColor: '#040A10',\n textColor: '#FFFFFF',\n },\n minimalist: {\n borderColor: '#FFFFFF3D',\n iconFill: '#000000',\n icon: '#FFFFFF',\n },\n },\n};\n\nconst typography = {\n MINIMALIST: {\n titleSize: '24px',\n titleWeight: '700',\n titleLine: '30px',\n\n descriptionSize: '10px',\n descriptionWeight: '500',\n descriptionLine: '15px',\n\n linkSize: '18px',\n linkWeight: '500',\n linkLine: '26px',\n\n font: 'Poppins',\n },\n FUNNY: {\n titleSize: '18px',\n titleWeight: '800',\n titleLine: '21px',\n\n descriptionSize: '15px',\n descriptionWeight: '600',\n descriptionLine: '19px',\n\n linkSize: '12px',\n linkWeight: '700',\n linkLine: '18px',\n\n font: 'Raleway',\n },\n MODERN: {\n titleSize: '15px',\n titleWeight: '500',\n titleLine: '18px',\n\n descriptionSize: '10px',\n descriptionWeight: '400',\n descriptionLine: '15px',\n\n linkSize: '12px',\n linkWeight: '600',\n linkLine: '18px',\n\n font: 'Poppins',\n },\n FRIENDLY: {\n titleSize: '24px',\n titleWeight: '700',\n titleLine: '30px',\n\n descriptionSize: '12px',\n descriptionWeight: '500',\n descriptionLine: '15px',\n\n linkSize: '12px',\n linkWeight: '700',\n linkLine: '18px',\n\n font: 'Galano',\n },\n};\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: column;\n margin-right: 70px;\n position: relative;\n z-index: 1;\n \n @media (max-width: ${theme.breakpoints.sm}) {\n width: 100%;\n margin-right: 0;\n }\n `}\n`;\n\nexport const Card = styled.div`\n ${({ theme, variant, withDots }) => css`\n background: ${colorSchemes[variant].isGradient ? `linear-gradient(${colorSchemes[variant].primaryColor}, ${colorSchemes[variant].secondaryColor})` : colorSchemes[variant].primaryColor};\n background-image: ${colorSchemes[variant].isGradient ? `url(${withDots && dots}), linear-gradient(${colorSchemes[variant].primaryColor}, ${colorSchemes[variant].secondaryColor})` : `url(${withDots && dots})`};\n border-radius: 16px;\n border: 0.75px solid ${theme.v2.colors.neutral.highMedium};\n box-shadow: 0px 2.25px 4.49px 0px #00000033;\n display: flex;\n flex-direction: column;\n min-height: 480px;\n width: 264px;\n\n @media (max-width: ${theme.breakpoints.sm}) { \n margin-top: 46px;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n margin-bottom: 50px;\n`;\n\nexport const IconCloseWrapper = styled.div`\n position: absolute;\n top: 0px;\n right: 0px;\n`;\n\nexport const PreviewLabel = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin-top: 16px;\n margin-bottom: 50px;\n text-align: center;\n width: 215px;\n `}\n`;\n\nexport const Description = styled.h4`\n ${({ templateType }) => css`\n font-family: ${typography[templateType].font};\n font-size: ${typography[templateType].descriptionSize};\n font-weight: ${typography[templateType].descriptionWeight};\n margin-top: 4px;\n margin-bottom: 7px;\n opacity: 0.64;\n word-break: break-word;\n `}\n`;\n\nexport const Title = styled.h2`\n ${({ templateType }) => css`\n font-family: ${typography[templateType].font};\n font-size: ${typography[templateType].titleSize};\n font-weight: ${typography[templateType].titleWeight};\n margin: 0;\n word-break: break-word;\n `}\n`;\n\nexport const Header = styled.div`\n ${({ variant, templateType }) => {\n const templates = {\n MODERN: {\n alignItems: 'center',\n color: colorSchemes[variant].headerTextColor,\n justifyContent: 'flex-start',\n textAlign: 'center',\n },\n FRIENDLY: {\n alignItems: 'center',\n color: colorSchemes[variant].headerTextColor,\n justifyContent: 'flex-start',\n textAlign: 'center',\n },\n MINIMALIST: {\n alignItems: 'flex-start',\n color: colorSchemes[variant].headerTextColor,\n justifyContent: 'flex-start',\n },\n FUNNY: {\n alignItems: 'flex-start',\n color: colorSchemes[variant].funny.textColor,\n justifyContent: 'flex-start',\n },\n };\n\n return css`\n align-items: ${templates[templateType].alignItems};\n border-radius: 16px 16px 0 0;\n color: ${templates[templateType].color};\n display: flex;\n flex-direction: column;\n justify-content: ${templates[templateType].justifyContent};\n padding: 16px;\n padding-top: 42px;\n text-align: ${templates[templateType].textAlign};\n\n svg {\n fill: ${templates[templateType].color}\n }\n `;\n }}\n`;\n\nexport const Link = styled.a`\n ${({ variant, templateType }) => {\n const templates = {\n MODERN: {\n background: colorSchemes[variant].linkColor,\n color: colorSchemes[variant].linkTextColor,\n justifyContent: 'center',\n },\n FRIENDLY: {\n background: colorSchemes[variant].linkColor,\n borderRadius: '30px',\n color: colorSchemes[variant].linkTextColor,\n justifyContent: 'center',\n },\n MINIMALIST: {\n background: 'transparent',\n borderColor: colorSchemes[variant].minimalist.borderColor,\n borderStyle: 'solid',\n borderWidth: '0px 0px 1px 0px',\n color: colorSchemes[variant].isGradient ? colorSchemes[variant].linkColor : colorSchemes[variant].secondaryColor,\n justifyContent: 'space-between',\n },\n FUNNY: {\n background: colorSchemes[variant].funny.backgroundColor,\n borderColor: colorSchemes[variant].funny.borderColor,\n borderRadius: '12px',\n borderStyle: 'solid',\n borderWidth: '1px 6px 6px 1px',\n color: colorSchemes[variant].funny.color,\n hoverBorderWidth: '1px 2px 2px 1px',\n justifyContent: 'center',\n },\n };\n\n return css`\n \n align-items: center;\n background: ${templates[templateType].background};\n border-color: ${templates[templateType].borderColor};\n border-radius: ${templates[templateType].borderRadius};\n border-style: ${templates[templateType].borderStyle};\n border-width: ${templates[templateType].borderWidth};\n color: ${templates[templateType].color};\n display: flex;\n font-family: ${typography[templateType].font};\n font-size: ${typography[templateType].linkSize};\n font-weight: ${typography[templateType].linkWeight};\n min-height: 54px;\n justify-content: ${templates[templateType].justifyContent};\n margin-bottom: 12px;\n text-decoration: none;\n transition: border-width 0.2s linear;\n width: 230px; \n word-break: break-all;\n \n div {\n align-items: center;\n background-color: ${colorSchemes[variant].isGradient ? colorSchemes[variant].linkColor + 52 : colorSchemes[variant].secondaryColor + 52};\n display: flex;\n justify-content: center;\n\n svg {\n fill: ${colorSchemes[variant].isGradient ? colorSchemes[variant].linkColor : colorSchemes[variant].secondaryColor};\n }\n }\n\n &:last-child{\n border: ${templateType === templatesEnum.MINIMALIST && 0};\n }\n\n &:hover { \n border-width: ${templates[templateType].hoverBorderWidth};\n\n div {\n background-color: ${colorSchemes[variant].isGradient ? colorSchemes[variant].linkColor : colorSchemes[variant].secondaryColor};\n\n svg {\n fill: ${colorSchemes[variant].isGradient ? colorSchemes[variant].minimalist.iconFill : colorSchemes[variant].primaryColor};\n }\n }\n }\n `;\n }}\n`;\n\nexport const LinkMessage = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n text-align: center;\n margin-top: 90px;\n width: 165px;\n `}\n`;\n\nexport const Links = styled.div`\n ${({ withPadding }) => css`\n align-items: center;\n display: flex;\n flex: 1;\n flex-direction: column;\n height: 100%;\n justify-content: flex-start;\n padding: ${withPadding && '7px 16px 16px 16px'};\n `}\n`;\n\nexport const IconArrowWrapper = styled.div`\n border-radius: 8px;\n height: 32px;\n width: 32px;\n`;\n\nexport const SocialLinksWrapper = styled.div`\n display: flex;\n gap: 18px;\n`;\n\nexport const SocialLink = styled.a`\n &:hover {\n opacity: 0.7;\n }\n`;\n","import styled from 'styled-components';\n\nexport const Svg = styled.svg`\n width: 16px;\n`;\n","import React from 'react';\nimport * as Styles from './IconArrow.styles';\n\nconst IconArrow = ({\n testId = 'IconArrow',\n color = '#ffffff',\n}) => (\n \n \n \n \n \n \n);\n\nexport default IconArrow;\n","import React from 'react';\nimport * as Styles from './Preview.styles';\nimport { Button, IconButton, SocialMediaIcons } from 'gatorcomponents';\nimport { colorSchemes, templates } from '../../LinkNaBioWizardHandler.enum';\nimport { IconArrow } from '../IconArrow';\nimport withErrorBoundary from '@/utils/errorBoundary';\n\nconst Preview = ({\n testId = 'preview',\n handleShowPreview = () => null,\n stepLocale = {},\n title = '',\n description = '',\n links = [],\n variant = colorSchemes.SIMPLE,\n templateType = templates.FUNNY,\n allowMobile = false,\n onMobile = false,\n socialMedia = [],\n}) => {\n const renderSocialLinks = () => socialMedia.map(link => (\n \n \n {link.description}\n {templateType === templates.MINIMALIST && (\n \n \n )}\n \n ));\n\n return (\n \n {allowMobile && onMobile && (\n \n \n )}\n\n \n \n \n {title || stepLocale.title}\n \n \n {description || stepLocale.description}\n \n {!!socialMedia.length && (\n \n {renderSocialLinks()}\n \n )}\n \n \n {links.length ? renderLinks()\n : (\n \n {stepLocale.linksYouAdd}\n \n )\n }\n \n \n\n \n {stepLocale.preview}\n \n\n {allowMobile && onMobile && (\n \n \n )}\n \n );\n};\n\nexport default withErrorBoundary(Preview, 'Preview');\n","import styled from 'styled-components';\n\nexport const Svg = styled.svg`\n width: 16px;\n`;\n","import React from 'react';\nimport * as Styles from './IconEmoji.styles';\n\nconst IconEmoji = ({\n testId = 'IconEmoji',\n}) => (\n \n \n \n \n \n \n);\n\nexport default IconEmoji;\n","import styled, { css } from 'styled-components';\n\n\nexport const SocialMediaList = styled.div`\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n margin-bottom: 18px;\n`;\n\nexport const SocialMediaDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: 18.9px;\n margin: 3px 0;\n `}\n`;\n\nexport const SocialLink = styled.button`\n ${({ theme }) => css`\n align-items: center;\n background: none;\n border-radius: 25px;\n border: 1px solid ${theme.v2.colors.neutral.highMedium};\n cursor: pointer;\n display: flex;\n gap: 8px;\n height: 48px;\n justify-content: center;\n padding: 8px 16px 8px 8px;\n width: 164px;\n `}\n`;\n\nexport const ModalTitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n margin-top: 0;\n margin-bottom: 3px;\n `}\n`;\n\nexport const ModalDescription = styled.h4`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.brand.lowPure};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n gap: 10px;\n margin-top: 0;\n max-width: 500px;\n `}\n`;\n\nexport const ModalButtonsWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-wrap: wrap-reverse;\n justify-content: center;\n gap: 24px;\n margin-top: 35px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-top: 80px;\n\n div {\n margin-bottom: 0px;\n }\n }\n `}\n`;\n\nexport const ModalContent = styled.div`\n ${({ isWhatsapp }) => css`\n display: flex;\n flex-direction: column;\n gap: 12px;\n height: ${isWhatsapp && '350px'};\n padding: 8px 16px 16px 16px;\n `}\n`;\n\nexport const ModalDeleteButtonsWrapper = styled(ModalButtonsWrapper)`\n ${({ theme }) => css`\n margin-top: 0;\n \n @media (max-width: ${theme.breakpoints.sm}) {\n margin-top: 80px;\n\n div {\n margin-bottom: 0px;\n }\n }\n `}\n`;\n\nexport const ModalInputWrapper = styled.div`\n align-items: center;\n display: flex;\n gap: 16px;\n width: 331px;\n`;\n\nexport const SocialIconWrapper = styled.div`\n width: 44px;\n`;\n","import { Modal } from '@/pages/common';\nimport React from 'react';\nimport * as Styles from './SocialMediaModal.styles';\nimport {\n Button, IconDanger, Input, PhoneInput, SocialMediaIcons,\n} from 'gatorcomponents';\nimport { linkType, wizardStep2Actions } from '../../LinkNaBioWizardHandler.enum';\nimport withErrorBoundary from '@/utils/errorBoundary';\nimport { COUNTRY } from '@/config';\n\nconst SocialMediaModal = ({\n stepLocale = {},\n handleModalDisplay = () => null,\n availableSocialMedias = [],\n modalData = {},\n submitSocialMedia = () => null,\n updateModalData = () => null,\n handleKeyDown = () => null,\n linkAction = '',\n deleteSocialMedia = () => null,\n hasLinkError = false,\n validateLink = () => null,\n countryCode,\n}) => (\n <>\n {linkAction.action === wizardStep2Actions.ADD_SOCIAL_MEDIA_STEP1 && (\n \n \n \n {stepLocale.socialLinkModal.title}\n \n \n {stepLocale.socialLinkModal.description}\n \n\n \n {stepLocale.socialLinkModal.messageApps}\n \n\n \n {availableSocialMedias.map(socialMedia => socialMedia.category && socialMedia.category === 'MESSAGE' && (\n handleModalDisplay({ action: wizardStep2Actions.ADD_SOCIAL_MEDIA_STEP2, selectedSocialMedia: socialMedia })}\n >\n \n\n \n {stepLocale.socialLinkModal.socialMedia}\n \n\n \n {availableSocialMedias.map(socialMedia => socialMedia.category && socialMedia.category === 'SOCIAL' && (\n handleModalDisplay({ action: wizardStep2Actions.ADD_SOCIAL_MEDIA_STEP2, selectedSocialMedia: socialMedia })}\n >\n \n\n \n \n )}\n\n {((linkAction.action === wizardStep2Actions.ADD_SOCIAL_MEDIA_STEP2) || linkAction.action === wizardStep2Actions.EDIT_SOCIAL_MEDIA) && (\n \n \n \n {stepLocale.socialLinkModal.title}\n \n \n {stepLocale.socialLinkModal.insertLink}\n \n\n \n \n \n {modalData.name.toLowerCase() === 'whatsapp' ? (\n updateModalData(value, 'phoneNumber')}\n onChangeSelect={value => updateModalData(value, 'ddi')}\n selected={countryCode && countryCode.includes('+') ? countryCode : `+${countryCode}`}\n error={hasLinkError ? stepLocale.invalidLink : ''}\n brand={COUNTRY}\n renderFlags\n />\n ) : (\n updateModalData(event.currentTarget.value, 'link')}\n maxLength={modalData.link && modalData.link.startsWith('http') ? 255 : 245}\n onKeyDown={({ key }) => handleKeyDown({ key, type: linkType.SOCIAL_MEDIA })}\n errorMessage={hasLinkError ? stepLocale.invalidLink : ''}\n onBlur={validateLink}\n />\n )}\n \n \n \n \n \n )}\n\n {linkAction.action === wizardStep2Actions.DELETE_SOCIAL_MEDIA && (\n \n \n \n {stepLocale.deleteSocialLinkTitle}\n \n \n \n\n \n \n \n \n )}\n \n);\nexport default withErrorBoundary(SocialMediaModal, 'SocialMediaModal');\n","import styled, { css } from 'styled-components';\n\nexport const ModalButtonsWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-wrap: wrap-reverse;\n justify-content: center;\n gap: 24px;\n margin-top: 35px;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n margin-top: 80px;\n\n div {\n margin-bottom: 0px;\n }\n }\n `}\n`;\n\nexport const ModalDeleteButtonsWrapper = styled(ModalButtonsWrapper)`\n ${({ theme }) => css`\n margin-top: 0;\n \n @media (max-width: ${theme.breakpoints.sm}) {\n margin-top: 80px;\n\n div {\n margin-bottom: 0px;\n }\n }\n `}\n`;\n\nexport const ModalTitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.regular};\n margin-top: 0;\n margin-bottom: 3px;\n `}\n`;\n\nexport const ModalDescription = styled.h4`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.brand.lowPure};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n gap: 10px;\n margin-top: 0;\n max-width: 500px;\n `}\n`;\n\nexport const ModalContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 8px 16px 16px 16px;\n`;\n","import { Modal } from '@/pages/common';\nimport React from 'react';\nimport * as Styles from './LinkModal.styles';\nimport { Button, IconDanger, Input } from 'gatorcomponents';\nimport { linkType, wizardStep2Actions } from '../../LinkNaBioWizardHandler.enum';\nimport withErrorBoundary from '@/utils/errorBoundary';\n\nconst LinkModal = ({\n linkAction = '',\n stepLocale = {},\n handleModalDisplay = () => null,\n modalData = {},\n updateModalData = () => null,\n handleKeyDown = () => null,\n sanitizeLinkURL = () => null,\n validateLink = () => null,\n submitLink = () => null,\n deleteLink = () => null,\n hasLinkError = false,\n}) => (\n <>\n {(linkAction.action === wizardStep2Actions.ADD_LINK || linkAction.action === wizardStep2Actions.EDIT_LINK) && (\n \n \n \n {stepLocale.insertLink}\n \n\n updateModalData(event.currentTarget.value, 'description')}\n maxLength={100}\n onKeyDown={({ key }) => handleKeyDown({ key, type: linkType.LINK })}\n testId={stepLocale.linkTitle}\n />\n\n updateModalData(event.currentTarget.value, 'link')}\n maxLength={modalData.link && modalData.link.startsWith('http') ? 255 : 245}\n onKeyDown={({ key }) => handleKeyDown({ key, type: linkType.LINK })}\n testId={stepLocale.url}\n onBlur={validateLink}\n errorMessage={hasLinkError ? stepLocale.invalidLink : ''}\n customMask={sanitizeLinkURL}\n />\n\n \n \n \n \n )}\n\n {linkAction.action === wizardStep2Actions.DELETE_LINK && (\n \n \n \n {stepLocale.deleteModalTitle}\n \n \n \n\n\n \n \n \n \n )}\n \n);\n\nexport default withErrorBoundary(LinkModal, 'LinkModal');\n","import React, {\n useCallback, useEffect, useRef, useState,\n} from 'react';\nimport * as Styles from './LinkNaBioStep2.styles';\nimport {\n IconFilledFile, Input, Tooltip, IconFilledInfo, Button,\n} from 'gatorcomponents';\nimport { DragAndDropList } from '../DragAndDropList';\nimport { Preview } from '../Preview';\nimport snappyDesktop from '@/media/siteBuilder/snappy-desktop.svg';\nimport snappyMobile from '@/media/siteBuilder/snappy-mobile.svg';\nimport { linkType, wizardStep2Actions } from '../../LinkNaBioWizardHandler.enum';\nimport EmojiPicker, { EmojiStyle, SuggestionMode } from 'emoji-picker-react';\nimport { IconEmoji } from '../IconEmoji';\nimport { SocialMediaModal } from '../SocialMediaModal';\nimport { LinkModal } from '../LinkModal';\nimport withErrorBoundary from '@/utils/errorBoundary';\nimport { COUNTRY } from '@/config';\n\nconst LinkNaBioStep2 = ({\n testId = 'link-na-bio-step-2',\n handleNextStep = () => null,\n handleUpdateLink = () => null,\n handleDeleteLink = () => null,\n handleReorderLinks = () => null,\n handleAddLink = () => null,\n prevStep = () => null,\n stepLocale = {},\n stepData = {\n links: [],\n title: '',\n description: '',\n emoji: undefined,\n socialMediaLinks: [],\n },\n setStepData = () => null,\n isEditing = false,\n setFieldUpdate = () => null,\n previewData = {},\n linksLoading = false,\n socialMediaLoading = false,\n onMobile = false,\n sanitizeLinkURL = () => null,\n handleUpdateSocialMedia = () => null,\n handleDeleteSocialMedia = () => null,\n handleReorderSocialMedia = () => null,\n handleAddSocialMedia = () => null,\n availableSocialMedias = [],\n}) => {\n const modalDataInitialState = {\n description: '', link: '', ddi: '', phoneNumber: '',\n };\n const linkActionInitialState = { action: wizardStep2Actions.NONE, linkIndex: undefined, selectedSocialMedia: '' };\n\n const [modalData, setModalData] = useState(modalDataInitialState);\n const [linkAction, setLinkAction] = useState(linkActionInitialState);\n const [showPreview, setShowPreview] = useState(false);\n const [hasLinkError, setHasLinkError] = useState(false);\n const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);\n const [hasError, setHasError] = useState(false);\n\n const emojiPickerRef = useRef(null);\n const emojiIconRef = useRef(null);\n\n const defineInitialCountryOnSelect = useCallback(() => {\n switch (COUNTRY) {\n case 'co':\n return '+57';\n case 'mx':\n return '+52';\n case 'cl':\n return '+56';\n case 'br':\n default:\n return '+55';\n }\n }, []);\n\n const countryCode = modalData.ddi || defineInitialCountryOnSelect();\n\n const updateStepData = (name, value) => {\n const newStepData = { ...stepData };\n newStepData[name] = value;\n setStepData(newStepData);\n\n if (isEditing) {\n setFieldUpdate(true);\n }\n\n if (stepData.title && stepData.description && (stepData.links.length || stepData.socialMediaLinks.length)) {\n setHasError(false);\n }\n };\n\n const updateModalData = (value, name) => {\n let newValue = value;\n if (name === 'link') {\n setHasLinkError(false);\n }\n\n if (name === 'phoneNumber') {\n setHasLinkError(false);\n newValue = value;\n }\n if (name === 'ddi') {\n setHasLinkError(false);\n newValue = value;\n }\n\n const newLinkData = { ...modalData };\n newLinkData[name] = newValue;\n setModalData(newLinkData);\n\n if (stepData.title && stepData.description && (stepData.links.length || stepData.socialMediaLinks.length)) {\n setHasError(false);\n }\n };\n\n const handleModalDisplay = (actionData) => {\n if (actionData && actionData.action) {\n const { action, linkIndex, selectedSocialMedia } = actionData;\n\n if (action === wizardStep2Actions.EDIT_LINK) {\n const linkToEdit = { ...stepData.links[linkIndex] };\n setModalData(linkToEdit);\n }\n\n if (action === wizardStep2Actions.EDIT_SOCIAL_MEDIA) {\n const linkToEdit = { ...stepData.socialMediaLinks[linkIndex] };\n let newModalData = {};\n if (linkToEdit && linkToEdit.social_icon && linkToEdit.social_icon.name && linkToEdit.social_icon.name.toLowerCase() === 'whatsapp') {\n newModalData = {\n ...linkToEdit.social_icon, link: linkToEdit.value, id: linkToEdit.id, ddi: linkToEdit.formatted_value && String(linkToEdit.formatted_value.ddi), phoneNumber: linkToEdit.formatted_value && linkToEdit.formatted_value.number,\n };\n } else {\n newModalData = {\n ...linkToEdit.social_icon, link: linkToEdit.value, id: linkToEdit.id, ddi: '', phoneNumber: '',\n };\n }\n setModalData(newModalData);\n }\n\n if (action === wizardStep2Actions.ADD_SOCIAL_MEDIA_STEP2) {\n const newModalData = { ...selectedSocialMedia, link: '' };\n setModalData(newModalData);\n }\n\n setLinkAction({ action, linkIndex });\n } else {\n setLinkAction(linkActionInitialState);\n setModalData(modalDataInitialState);\n setHasLinkError(false);\n }\n };\n\n const handleShowPreview = () => {\n setShowPreview(!showPreview);\n };\n\n const validateLink = (validationModel) => {\n let hasError = false;\n\n if (validationModel === linkType.LINK) {\n const linkValidation = /[-a-zA-Z0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)/;\n hasError = !linkValidation.test(modalData.link);\n }\n\n if (validationModel === linkType.SOCIAL_MEDIA) {\n switch (modalData.name.toLowerCase()) {\n case 'whatsapp':\n hasError = false;\n break;\n case 'e-mail':\n case 'medium':\n hasError = !new RegExp(modalData.regex.replace('/', '').replace('/i', ''), 'i').test(modalData.link);\n break;\n default:\n hasError = !new RegExp(modalData.regex.replace('/', '').replace('+/i', '+'), 'i').test(modalData.link);\n break;\n }\n }\n\n setHasLinkError(hasError);\n if (stepData.title && stepData.description && !hasError) {\n setHasError(false);\n }\n\n return hasError;\n };\n\n const submitLink = async () => {\n const hasError = await validateLink(linkType.LINK);\n if (hasError) return;\n\n const linkData = { ...modalData };\n linkData.link = linkData.link && linkData.link.startsWith('http') ? linkData.link : `https://${linkData.link}`;\n\n const newLinks = [...stepData.links];\n const isEditing = linkAction.action === wizardStep2Actions.EDIT_LINK;\n const indexLinkIsEditing = linkAction.linkIndex;\n\n if (isEditing) {\n handleUpdateLink(linkData);\n newLinks[indexLinkIsEditing] = { id: newLinks[indexLinkIsEditing].id, ...linkData };\n } else {\n handleAddLink(linkData);\n newLinks.push({ ...linkData, id: new Date().getTime() });\n }\n\n updateStepData('links', newLinks);\n handleModalDisplay();\n };\n\n const reorderList = (newLinks) => {\n handleReorderLinks(newLinks);\n updateStepData('links', newLinks);\n };\n\n const deleteLink = () => {\n const { linkIndex } = linkAction;\n const newLinks = [...stepData.links];\n const [linkToDelete] = newLinks.splice(linkIndex, 1);\n handleDeleteLink(linkToDelete.id);\n updateStepData('links', newLinks);\n handleModalDisplay();\n };\n\n const submitSocialMedia = async () => {\n const hasError = await validateLink(linkType.SOCIAL_MEDIA);\n if (hasError) return;\n\n const isWhatsapp = modalData.name.toLowerCase() === 'whatsapp';\n const isEmail = modalData.name.toLowerCase() === 'e-mail';\n\n const socialMediaData = { ...modalData };\n if (isWhatsapp) {\n if (!socialMediaData.ddi) {\n socialMediaData.ddi = countryCode;\n }\n socialMediaData.link = socialMediaData.ddi + socialMediaData.phoneNumber.replace(/\\D/g, '');\n } else {\n socialMediaData.link = (socialMediaData.link && socialMediaData.link.startsWith('http')) || isEmail ? socialMediaData.link : `https://${socialMediaData.link}`;\n }\n\n const newSocialMediaLinks = [...stepData.socialMediaLinks];\n const isEditing = linkAction.action === wizardStep2Actions.EDIT_SOCIAL_MEDIA;\n const indexLinkIsEditing = linkAction.linkIndex;\n\n if (isEditing) {\n handleUpdateSocialMedia(socialMediaData);\n newSocialMediaLinks[indexLinkIsEditing] = {\n id: newSocialMediaLinks[indexLinkIsEditing].id,\n social_icon: { ...socialMediaData },\n value: socialMediaData.link,\n formatted_value: {\n ddi: socialMediaData.ddi,\n number: socialMediaData.phoneNumber,\n },\n };\n } else {\n handleAddSocialMedia(socialMediaData);\n newSocialMediaLinks.push({\n social_icon: { ...socialMediaData },\n value: socialMediaData.link,\n id: new Date().getTime(),\n formatted_value: {\n ddi: socialMediaData.ddi,\n number: socialMediaData.phoneNumber,\n },\n });\n }\n\n updateStepData('socialMediaLinks', newSocialMediaLinks);\n handleModalDisplay();\n };\n\n const deleteSocialMedia = () => {\n const { linkIndex } = linkAction;\n const newLinks = [...stepData.socialMediaLinks];\n const [linkToDelete] = newLinks.splice(linkIndex, 1);\n handleDeleteSocialMedia(linkToDelete.id);\n updateStepData('socialMediaLinks', newLinks);\n handleModalDisplay();\n };\n\n const reorderSocialMedia = (newLinks) => {\n handleReorderSocialMedia(newLinks);\n updateStepData('socialMediaLinks', newLinks);\n };\n\n const handleKeyDown = ({ key, type }) => {\n if (key && key === 'Enter') {\n if (modalData.link && type === linkType.SOCIAL_MEDIA) {\n submitSocialMedia();\n return;\n }\n if (modalData.description && modalData.link && type === linkType.LINK) {\n submitLink();\n }\n }\n };\n\n const handleShowEmojiPicker = () => {\n setEmojiPickerOpen(!emojiPickerOpen);\n };\n\n const handleCloseEmojiPicker = useCallback(() => {\n const handleClickOutside = (event) => {\n const emojiIconButtonClick = emojiPickerRef.current && emojiIconRef.current.contains(event.target);\n const emojiPickerClick = emojiPickerRef.current && emojiPickerRef.current.contains(event.target);\n\n if (!emojiIconButtonClick && !emojiPickerClick && emojiPickerOpen) {\n handleShowEmojiPicker();\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [emojiPickerRef, emojiPickerOpen]);\n\n useEffect(() => {\n handleCloseEmojiPicker();\n }, [handleCloseEmojiPicker]);\n\n\n const handleEmojiClick = (value) => {\n const { emoji } = value;\n updateStepData('emoji', emoji);\n handleShowEmojiPicker();\n };\n\n const emojiOnInput = () => (\n \n {!stepData.emoji && \n {(!onMobile || (onMobile && !showPreview)) && (\n \n \n {stepLocale.title}\n \n \n {stepLocale.description}\n \n\n \n {stepLocale.about}\n \n\n \n \n \n updateStepData('title', event.currentTarget.value)}\n maxLength={60}\n testId=\"link-title\"\n prefix={emojiOnInput()}\n errorMessage={hasError && !stepData.title ? stepLocale.fieldRequired : undefined}\n />\n \n\n updateStepData('description', event.currentTarget.value)}\n maxLength={150}\n testId=\"link-description\"\n errorMessage={hasError && !stepData.description ? stepLocale.fieldRequired : undefined}\n />\n\n \n {stepLocale.socialLinks}\n \n \n \n\n {!!stepData.socialMediaLinks.length && (\n handleModalDisplay({ action: wizardStep2Actions.DELETE_SOCIAL_MEDIA, linkIndex })}\n editLink={linkIndex => handleModalDisplay({ action: wizardStep2Actions.EDIT_SOCIAL_MEDIA, linkIndex })}\n linksLoading={socialMediaLoading}\n model={linkType.SOCIAL_MEDIA}\n />\n )}\n\n \n handleModalDisplay({ action: wizardStep2Actions.ADD_SOCIAL_MEDIA_STEP1 })}\n disabled={stepData.socialMediaLinks.length > 5}\n />\n \n\n \n {stepLocale.links}\n \n \n \n\n {!!stepData.links.length && (\n handleModalDisplay({ action: wizardStep2Actions.DELETE_LINK, linkIndex })}\n editLink={linkIndex => handleModalDisplay({ action: wizardStep2Actions.EDIT_LINK, linkIndex })}\n linksLoading={linksLoading}\n model={linkType.LINK}\n />\n )}\n\n \n handleModalDisplay({ action: wizardStep2Actions.ADD_LINK })}\n disabled={stepData.links.length > 14}\n />\n \n\n \n \n \n\n {onMobile && (\n \n \n )}\n \n\n \n {hasError && stepLocale.required}\n \n\n {!isEditing && (\n \n \n )\n }\n\n\n \n )}\n\n {(!onMobile || (onMobile && showPreview)) && (\n validateLink(linkType.LINK)}\n hasLinkError={hasLinkError}\n />\n\n validateLink(linkType.SOCIAL_MEDIA)}\n hasLinkError={hasLinkError}\n socialMediaLinks={stepData.socialMediaLinks}\n countryCode={countryCode}\n showNewWhatsappInput\n />\n\n \n );\n};\n\nexport default withErrorBoundary(LinkNaBioStep2, 'LinkNaBioStep2');\n","import styled, { css } from 'styled-components';\n\n// THIS IS A MVP SO THE COLORS ARE FROM LINK NA BIO PRODUCT, NOT FROM CLIENT AREA\nconst colorSchemes = {\n HOSTGATOR_DARK_BLUE: {\n primaryColor: '#1F2044',\n secondaryColor: '#FFFFFF',\n funny: {\n borderColor: '#1F2044',\n buttonColor: '#FFFFFF',\n headerColor: '#FFFFFF',\n },\n },\n NEON: {\n primaryColor: '#14FFEC',\n secondaryColor: '#212121',\n funny: {\n borderColor: '#212121',\n buttonColor: '#FFFFFF',\n headerColor: '#212121',\n },\n },\n PASTEL: {\n primaryColor: '#FFF8E0',\n secondaryColor: '#171717',\n funny: {\n borderColor: '#171717',\n buttonColor: '#FFFFFF',\n headerColor: '#171717',\n },\n },\n WARM: {\n primaryColor: '#EBDAFB',\n secondaryColor: '#FD5F37',\n funny: {\n borderColor: '#212121',\n buttonColor: '#FFFFFF',\n headerColor: '#212121',\n },\n },\n HOSTGATOR_BLUE: {\n primaryColor: '#FFFFFF',\n secondaryColor: '#0070D1',\n funny: {\n borderColor: '#0070D1',\n buttonColor: '#FFFFFF',\n headerColor: '#0070D1',\n },\n },\n SIMPLE: {\n primaryColor: '#FFFFFF',\n secondaryColor: '#1F2044',\n funny: {\n borderColor: '#1F2044',\n buttonColor: '#FFFFFF',\n headerColor: '#1F2044',\n },\n },\n GRADIENT_ROSE: {\n isGradient: true,\n primaryColor: '#F44369',\n secondaryColor: '#3E3B92',\n funny: {\n borderColor: '#212121',\n buttonColor: '#FFFFFF',\n headerColor: '#FFFFFF',\n },\n },\n GRADIENT_WARM: {\n isGradient: true,\n primaryColor: '#2E93EE',\n secondaryColor: '#F69E52',\n funny: {\n borderColor: '#212121',\n buttonColor: '#FFFFFF',\n headerColor: '#FFFFFF',\n },\n },\n GRADIENT_DARK: {\n isGradient: true,\n primaryColor: '#0E1C26',\n secondaryColor: '#294861',\n funny: {\n borderColor: '#212121',\n buttonColor: '#FFFFFF',\n headerColor: '#FFFFFF',\n },\n },\n fillColor: '#FFFFFF',\n};\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.neutral.highPure};\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n min-height: 900px;\n padding: 52px;\n position: relative;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding: 24px;\n padding-bottom: 100px;\n }\n `}\n`;\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n max-width: 500px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n width: 100%;\n }\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n margin-bottom: 50px;\n`;\n\nexport const BackButton = styled.div`\n position: absolute;\n bottom: 30px;\n`;\n\nexport const ButtonRow = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.menuPrimaryDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 7px 0 20px 0;\n `}\n`;\n\nexport const Subtitle = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.menuPrimaryDark};\n display: flex;\n gap: 8px;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n `}\n`;\n\nexport const Snappy = styled.img`\n ${({ theme }) => css`\n position: absolute;\n bottom: 0;\n right: 0;\n\n @media (max-width: ${theme.breakpoints.sm}) {\n height: 160px;\n }\n `}\n`;\n\nexport const ColorForm = styled.form`\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n margin-bottom: 2px;\n margin-top: 25px;\n width: 400px;\n`;\n\nexport const TemplateForm = styled.form`\n ${({ theme }) => css`\n display: flex;\n gap: 32px;\n margin-top: 4px;\n margin-bottom: 32px;\n padding-bottom: 16px;\n\n &::-webkit-scrollbar {\n height: 4px;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 25px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: ${theme.v2.colors.neutral.highMedium}; \n border-radius: 25px;\n }\n\n @media (max-width: ${theme.breakpoints.sm}) {\n overflow: auto;\n }\n `}\n`;\n\nexport const TemplateName = styled.form`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.menuPrimaryDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n margin-top: 15px;\n `}\n`;\n\nexport const Radio = styled.input``;\n\nexport const IconCheck = styled.div`\n ${({ theme, pill }) => css`\n align-items: center;\n background: ${theme.v2.colors.neutral.highPure};\n border-radius: 25px;\n display: flex;\n height: 32px;\n justify-content: center;\n left: ${pill ? '33%' : '36.5%'};\n position: absolute;\n top: ${pill ? '8%' : '45.5%'};\n width: 32px;\n z-index: 1;\n `}\n`;\n\nexport const ColorPill = styled.div`\n ${({ theme, variant, checked }) => css`\n background: ${colorSchemes[variant].isGradient ? `linear-gradient(180deg, ${colorSchemes[variant].primaryColor} 0%, ${colorSchemes[variant].secondaryColor} 100%)` : `linear-gradient(90deg, ${colorSchemes[variant].primaryColor} 50%, ${colorSchemes[variant].secondaryColor} 50%)`};\n \n border-color: ${theme.v2.colors.neutral.highMedium};\n border-radius: 25px;\n border-style: solid;\n border-width: 1px;\n cursor: pointer;\n height: 40px;\n opacity: ${checked ? 0.7 : 1};\n position: relative;\n width: 96px;\n\n &:hover {\n opacity: 0.7;\n }\n\n input {\n display: none;\n }\n `}\n`;\n\nexport const TemplateCard = styled.div`\n ${({ theme, variant, checked }) => css`\n background: ${colorSchemes[variant].isGradient ? `linear-gradient(${colorSchemes[variant].primaryColor}, ${colorSchemes[variant].secondaryColor})` : colorSchemes[variant].primaryColor}; \n border-color: ${theme.v2.colors.neutral.highMedium};\n border-radius: 18px;\n border-style: solid;\n border-width: 1px;\n cursor: pointer;\n height: 160px;\n opacity: ${checked ? 0.7 : 1};\n position: relative;\n width: 120px;\n\n &:hover {\n opacity: 0.7;\n }\n\n input {\n display: none;\n }\n `}\n`;\n\nexport const TemplateWrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nexport const TemplateHeader = styled.div`${({ template }) => {\n const templates = {\n MODERN: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n FRIENDLY: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n MINIMALIST: {\n alignItems: 'flex-start',\n justifyContent: 'flex-end',\n },\n FUNNY: {\n alignItems: 'flex-start',\n justifyContent: 'flex-end',\n },\n };\n\n return css`\n align-items: ${templates[template].alignItems};\n border-radius: 16px 16px 0 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n height: 56px;\n justify-content: ${templates[template].justifyContent};\n padding: 8px;\n width: 100%;\n `;\n}}`;\n\nexport const TemplateBody = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: 8px;\n justify-content: center;\n`;\n\nexport const TemplateRow = styled.div`\n${({ variant, size, templateType }) => {\n const isHeader = size !== 'row';\n\n const templates = {\n MODERN: {\n background: colorSchemes[variant].secondaryColor,\n gradientBackground: colorSchemes.fillColor,\n gradientBorder: 'transparent',\n },\n FRIENDLY: {\n background: colorSchemes[variant].secondaryColor,\n borderRadius: '16px',\n gradientBackground: colorSchemes.fillColor,\n gradientBorder: 'transparent',\n },\n MINIMALIST: {\n background: isHeader ? colorSchemes[variant].secondaryColor : 'transparent',\n borderColor: !isHeader && colorSchemes[variant].secondaryColor,\n borderStyle: !isHeader && 'solid',\n borderWidth: !isHeader && '0px 0px 2px 0px',\n gradientBackground: isHeader ? colorSchemes.fillColor : 'transparent',\n gradientBorder: colorSchemes.fillColor,\n },\n FUNNY: {\n background: isHeader ? colorSchemes[variant].funny.headerColor : colorSchemes[variant].funny.buttonColor,\n borderColor: colorSchemes[variant].funny.borderColor,\n borderRadius: '4px',\n borderStyle: !isHeader && 'solid',\n borderWidth: !isHeader && '1px 3px 3px 1px',\n gradientBackground: colorSchemes[variant].funny.buttonColor,\n gradientBorder: colorSchemes[variant].funny.borderColor,\n },\n };\n\n const widths = {\n title: '47px',\n description: '62px',\n row: '104px',\n };\n\n return css`\n background: ${colorSchemes[variant].isGradient ? templates[templateType].gradientBackground : templates[templateType].background};\n border-color: ${colorSchemes[variant].isGradient ? templates[templateType].gradientBorder : templates[templateType].borderColor};\n border-radius: ${isHeader ? '16px' : templates[templateType].borderRadius};\n border-style: ${templates[templateType].borderStyle};\n border-width: ${templates[templateType].borderWidth};\n height: ${isHeader ? '4px' : '24px'};\n width: ${widths[size]};\n `;\n }}\n`;\n","import React, { useState } from 'react';\nimport * as Styles from './LinkNaBioStep3.styles';\nimport { IconDashboard, Button, IconCheck } from 'gatorcomponents';\nimport { Preview } from '../Preview';\nimport snappyDesktop from '@/media/siteBuilder/snappy-desktop.svg';\nimport snappyMobile from '@/media/siteBuilder/snappy-mobile.svg';\nimport { colorSchemes, templates } from '../../LinkNaBioWizardHandler.enum';\nimport withErrorBoundary from '@/utils/errorBoundary';\n\nconst templateTypes = Object.values(templates);\nconst colorSchemeTypes = Object.values(colorSchemes);\n\nconst LinkNaBioStep3 = ({\n testId = 'link-na-bio-step-3',\n prevStep = () => null,\n stepLocale = {},\n previewData = {\n links: [],\n title: '',\n description: '',\n emoji: undefined,\n socialMediaLinks: [],\n },\n stepData = {\n colorScheme: colorSchemes.SIMPLE,\n template: templates.FUNNY,\n },\n setStepData = () => null,\n handleNextStep = () => null,\n linkNaBioLoading = false,\n isEditing = false,\n setFieldUpdate = () => null,\n onMobile = false,\n}) => {\n const [showPreview, setShowPreview] = useState(false);\n\n const updateStepData = (name, value) => {\n const newStepData = { ...stepData };\n newStepData[name] = value;\n setStepData(newStepData);\n\n if (isEditing) {\n setFieldUpdate(true);\n }\n };\n\n const handleShowPreview = () => {\n setShowPreview(!showPreview);\n };\n\n return (\n \n {(!onMobile || (onMobile && !showPreview)) && (\n \n \n {stepLocale.customize}\n \n\n \n {stepLocale.colorScheme}\n \n\n \n {colorSchemeTypes.map(colorScheme => (\n updateStepData('colorScheme', colorScheme)}\n defaultChecked={stepData.colorScheme === colorScheme}\n >\n {stepData.colorScheme === colorScheme && (\n \n \n )}\n \n\n\n \n {stepLocale.template}\n \n\n\n \n {templateTypes.map(templateType => (\n updateStepData('template', templateType)}\n >\n \n {stepData.template === templateType && (\n \n \n )}\n \n \n \n\n \n \n {stepLocale[templateType]}\n \n \n ))}\n \n\n \n \n \n\n {onMobile && (\n \n \n )}\n \n\n \n \n\n\n \n )}\n\n {(!onMobile || (onMobile && showPreview)) && (\n \n );\n};\n\nexport default withErrorBoundary(LinkNaBioStep3, 'LinkNaBioStep3');\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.neutral.highPure};\n display: flex;\n flex-wrap: wrap-reverse;\n justify-content: center;\n gap: 156px;\n padding: 80px;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding: 20px;\n gap: 52px\n }\n `}\n`;\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n max-width: 360px;\n padding-top: 90px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding-top: 0;\n }\n `}\n`;\n\nexport const Title = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.menuPrimaryDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.lg};\n font-weight: ${theme.v2.font.weights.medium};\n margin-bottom: 5px;\n margin-top: 0px;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n font-size: ${theme.v2.font.sizes.md};\n }\n `}\n`;\n\nexport const Description = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n margin-bottom: 33px;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const InputWrapper = styled.div`\n width: 300px;\n`;\n\nexport const ButtonsWrapper = styled.div`\n display: flex;\n gap: 16px;\n height: 48px;\n margin-top: 32px;\n`;\n\nexport const Img = styled.img`\n width: 30px;\n`;\nexport const Confetti = styled.img`\n left: -200px;\n position: absolute;\n top: 50px;\n width: 650px;\n`;\n\nexport const PreviewWrapper = styled.div`\n${({ theme }) => css`\n padding-top: 60px;\n position: relative;\n transform: rotate(8deg);\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding-top: 0;\n }\n `}\n`;\n\nexport const Faq = styled.div`\n ${({ theme }) => css`\n margin-bottom: 66px;\n margin-top: 46px;\n display: flex;\n flex-direction: column;\n width: 400px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n width: auto;\n }\n `}\n`;\n\nexport const FaqTitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n margin-bottom: 25px;\n `}\n`;\n\nexport const FaqLink = styled.a`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n text-decoration: underline;\n `}\n`;\n","import React from 'react';\nimport * as Styles from './LinkNaBioStep4.styles';\nimport { Input, Button } from 'gatorcomponents';\nimport { Preview } from '../Preview';\nimport partyImg from '../../media/party.svg';\nimport confetti from '../../media/lottie-confetti.gif';\nimport { copyTextToClipboard } from '@/utils/Application/copyTextToClipboard';\nimport { useDispatch } from 'react-redux';\nimport { commonActions } from '@/redux/modules';\nimport { FAQ_LINK_NA_BIO } from '@/config/urls/linkNaBioUrls';\nimport { linkNaBioAnalytics } from '@/analytics/linkNaBio';\nimport { LINK_NA_BIO_URL } from '@/config';\nimport withErrorBoundary from '@/utils/errorBoundary';\n\nconst LinkNaBioStep4 = ({\n previewData = {},\n stepLocale = {},\n testId = 'link-na-bio-step-4',\n link = '',\n onMobile,\n}) => {\n const dispatch = useDispatch();\n\n const showCopyNotification = () => {\n dispatch(commonActions.notifications.set({\n label: stepLocale.copied,\n type: 'success',\n }));\n };\n\n const handleCopy = () => {\n const linkToCopy = `${LINK_NA_BIO_URL}/${link}`;\n\n copyTextToClipboard(linkToCopy);\n showCopyNotification();\n linkNaBioAnalytics.copyLinkNaBio();\n };\n\n const handleOpenLink = () => {\n const linkToOpen = `${LINK_NA_BIO_URL}/${link}`;\n\n window.open(linkToOpen, '_blank');\n linkNaBioAnalytics.viewLinkNaBio();\n };\n\n const handleLinkToShow = () => {\n if (link.length > 20) {\n return `${stepLocale.linkPlaceholder + link.slice(0, 20)}...`;\n }\n\n return stepLocale.linkPlaceholder + link;\n };\n\n return (\n \n \n {stepLocale.title} \n {stepLocale.description} \n\n \n \n\n \n \n\n \n \n {stepLocale.doMore}\n \n {FAQ_LINK_NA_BIO[2].question} \n \n\n \n\n \n \n\n\n \n );\n};\n\n\nexport default withErrorBoundary(LinkNaBioStep4, 'LinkNaBioStep4');\n","import React, {\n useCallback, useContext, useEffect, useState,\n} from 'react';\nimport * as Styles from './LinkNaBioWizardHandler.styles';\nimport {\n LINK_AVAILABLE, LINK_NOT_AVAILABLE, colorSchemes, linkNaBioEnum, templates,\n} from './LinkNaBioWizardHandler.enum';\nimport { ThemeContext } from 'styled-components';\nimport useLocale from '@/hooks/useLocale';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { linkNaBioActions } from '@/redux/modules';\nimport { FeedbackStepper } from '@/pages/common';\nimport { LinkNaBioStep1 } from './components/LinkNaBioStep1';\nimport { LinkNaBioStep2 } from './components/LinkNaBioStep2';\nimport { LinkNaBioStep3 } from './components/LinkNaBioStep3';\nimport { LinkNaBioStep4 } from './components/LinkNaBioStep4';\nimport { useHistory, useParams } from 'react-router';\nimport { linkNaBioAnalytics } from '@/analytics/linkNaBio';\nimport { isMobile } from '@/utils/Validators/validation';\nimport withErrorBoundary from '@/utils/errorBoundary';\n\nconst LinkNaBioWizardHandler = ({\n testId = 'link-na-bio-wizard',\n}) => {\n const [activeStep, setActiveStep] = useState(linkNaBioEnum.steps.LINK_CHOOSE);\n const theme = useContext(ThemeContext);\n const { v2 } = theme;\n const [dataStep1, setDataStep1] = useState({\n link: '',\n checked: false,\n id: undefined,\n });\n const [dataStep2, setDataStep2] = useState({\n links: [],\n title: '',\n description: '',\n emoji: undefined,\n socialMediaLinks: [],\n });\n const [dataStep3, setDataStep3] = useState({\n colorScheme: colorSchemes.SIMPLE,\n template: templates.FUNNY,\n });\n const [fieldUpdate, setFieldUpdate] = useState(false);\n const [onMobile, setOnMobile] = useState(isMobile);\n\n const {\n loading, available, profiles, linksLoading, socialMediaLoading, socialMediaList,\n } = useSelector(state => state.linkNaBio);\n const dispatch = useDispatch();\n const { profileId } = useParams();\n const history = useHistory();\n\n const { linkNaBio: linkNaBioLocale, routes: routesLocale } = useLocale();\n\n window.addEventListener('resize', () => {\n const smallWidth = window.innerWidth < 700;\n setOnMobile(smallWidth);\n });\n\n const getSocialIcons = useCallback(() => {\n dispatch(linkNaBioActions.socialMedia.icons.request());\n }, [dispatch]);\n\n useEffect(() => {\n getSocialIcons();\n }, [getSocialIcons]);\n\n const setProfileDataToState = (profile) => {\n if (profile) {\n setDataStep1({\n checked: true,\n id: profile.id,\n link: profile.username,\n });\n\n setDataStep2({\n title: profile.title,\n description: profile.description,\n links: profile.links,\n socialMediaLinks: profile.icons,\n });\n\n setDataStep3({\n colorScheme: profile.color_scheme,\n template: profile.template,\n });\n }\n };\n\n const handleEditProfile = useCallback(() => {\n const selectedProfile = profiles.find(profile => profile.id === Number(profileId));\n\n if (selectedProfile && selectedProfile.id) {\n setActiveStep(linkNaBioEnum.steps.CONTENT);\n setProfileDataToState(selectedProfile);\n } else {\n history.push(routesLocale.linkNaBio);\n }\n }, [profileId, profiles, routesLocale, history]);\n\n useEffect(() => {\n if (profileId) {\n handleEditProfile();\n }\n }, [handleEditProfile, profileId]);\n\n\n const stepAnalytics = useCallback(() => {\n if (activeStep === linkNaBioEnum.steps.LINK_CHOOSE) {\n linkNaBioAnalytics.accessToStep1();\n }\n if (activeStep === linkNaBioEnum.steps.CONTENT) {\n linkNaBioAnalytics.accessToStep2();\n }\n if (activeStep === linkNaBioEnum.steps.TEMPLATE) {\n linkNaBioAnalytics.accessToStep3();\n }\n if (activeStep === linkNaBioEnum.steps.SHARE) {\n linkNaBioAnalytics.publishLinkNaBio();\n }\n }, [activeStep]);\n\n useEffect(() => {\n stepAnalytics();\n }, [stepAnalytics]);\n\n const availableErrorAnalytics = useCallback(() => {\n if (available === LINK_NOT_AVAILABLE && dataStep1.checked) {\n linkNaBioAnalytics.linkUnavailable();\n }\n }, [available, dataStep1.checked]);\n\n useEffect(() => {\n availableErrorAnalytics();\n }, [availableErrorAnalytics]);\n\n const steps = [\n {\n id: linkNaBioEnum.steps.LINK_CHOOSE,\n label: linkNaBioLocale.stepper.linkChoose,\n },\n {\n id: linkNaBioEnum.steps.CONTENT,\n label: linkNaBioLocale.stepper.content,\n },\n {\n id: linkNaBioEnum.steps.TEMPLATE,\n label: linkNaBioLocale.stepper.template,\n },\n {\n id: linkNaBioEnum.steps.SHARE,\n label: linkNaBioLocale.stepper.share,\n markAsDone: activeStep === linkNaBioEnum.steps.SHARE,\n },\n ];\n\n\n const nextStep = () => setActiveStep(activeStep + 1);\n const prevStep = () => setActiveStep(activeStep - 1);\n\n\n const getFeedbackStepperProps = () => {\n const defaultProps = {\n steps,\n activeStep,\n stepActiveColor: v2.colors.neutral.highPure,\n stepActiveBgColor: v2.colors.brand.primaryMedium,\n stepDoneBgColor: v2.colors.feedback.activeLight,\n stepDoneColor: v2.colors.neutral.highPure,\n testId: 'wizard',\n };\n\n return {\n ...defaultProps,\n };\n };\n\n const getStep1Props = () => {\n const sanitizeLink = (link) => {\n if (!link || typeof link !== 'string') {\n return '';\n }\n\n return link.toLowerCase().replace(/[^a-zA-Z0-9-_.]/g, '');\n };\n\n const setLinkValue = (linkValue) => {\n const newData = {\n ...dataStep1,\n link: linkValue,\n };\n\n if (dataStep1.checked) {\n newData.checked = false;\n }\n\n setDataStep1(newData);\n };\n\n const checkAvailability = () => {\n if (dataStep1.link) {\n const sanitizedLink = dataStep1.link;\n\n if (sanitizedLink) {\n dispatch(linkNaBioActions.profile.availability.request({ link: sanitizedLink }));\n }\n\n setDataStep1({ ...dataStep1, checked: true, link: sanitizedLink });\n }\n };\n\n const errorMessages = () => {\n if (available === LINK_NOT_AVAILABLE && dataStep1.checked) {\n return linkNaBioLocale.step1.error;\n }\n\n if (dataStep1.link) {\n const regex = /[^a-zA-Z0-9-_.]/;\n const hasError = regex.test(dataStep1.link);\n\n if (hasError) {\n return linkNaBioLocale.step1.error;\n }\n }\n\n return undefined;\n };\n\n const defaultProps = {\n checkAvailability,\n linkNaBioLoading: loading,\n errorMessage: errorMessages(),\n linkValue: dataStep1.link,\n nextStep,\n setLinkValue,\n stepLocale: linkNaBioLocale.step1,\n successMessage: available === LINK_AVAILABLE && dataStep1.checked ? linkNaBioLocale.step1.success : undefined,\n sanitizeLink,\n onMobile,\n };\n\n return {\n ...defaultProps,\n };\n };\n\n const getStep2Props = () => {\n const sanitizeLinkURL = (link) => {\n if (!link || typeof link !== 'string') {\n return '';\n }\n\n return link;\n };\n\n const updateLinkNaBio = () => {\n if (fieldUpdate) {\n const dataToSend = {\n title: dataStep2.emoji ? `${dataStep2.emoji} ${dataStep2.title}` : dataStep2.title,\n description: dataStep2.description,\n template: dataStep3.template,\n colorScheme: dataStep3.colorScheme,\n profileId,\n callback: () => null,\n };\n dispatch(linkNaBioActions.profile.update.request(dataToSend));\n }\n\n setFieldUpdate(false);\n nextStep();\n };\n\n const handleAddLink = (link) => {\n if (profileId) {\n dispatch(linkNaBioActions.link.add.request({ links: [link], profileId }));\n linkNaBioAnalytics.addLinkStep2();\n }\n };\n\n const handleUpdateLink = (link) => {\n if (profileId) {\n dispatch(linkNaBioActions.link.update.request({ link, profileId }));\n linkNaBioAnalytics.editLinkStep2();\n }\n };\n\n const handleDeleteLink = (linkId) => {\n if (profileId) {\n dispatch(linkNaBioActions.link.delete.request({ linkId, profileId }));\n linkNaBioAnalytics.removeLinkStep2();\n }\n };\n\n const handleReorderLinks = (links) => {\n if (profileId) {\n const assembledLinks = links.map(link => ({ ...link, sort: link.order + 1 }));\n\n dispatch(linkNaBioActions.link.sort.request({ links: assembledLinks, profileId }));\n }\n };\n\n const handleAddSocialMedia = (link) => {\n const dataToCreateSocialMedia = {\n value: link.link,\n profile_id: profileId,\n social_icon_id: link.id,\n };\n\n if (profileId) {\n dispatch(linkNaBioActions.socialMedia.add.request({ links: [dataToCreateSocialMedia], profileId }));\n linkNaBioAnalytics.addLinkStep2();\n }\n };\n\n const handleUpdateSocialMedia = (link) => {\n if (profileId) {\n dispatch(linkNaBioActions.socialMedia.update.request({ link, profileId }));\n linkNaBioAnalytics.editLinkStep2();\n }\n };\n\n const handleDeleteSocialMedia = (linkId) => {\n if (profileId) {\n dispatch(linkNaBioActions.socialMedia.delete.request({ linkId, profileId }));\n linkNaBioAnalytics.removeLinkStep2();\n }\n };\n\n const handleReorderSocialMedia = (links) => {\n if (profileId) {\n const assembledLinks = links.map(link => ({ ...link, sort: link.order + 1 }));\n\n dispatch(linkNaBioActions.socialMedia.sort.request({ links: assembledLinks, profileId }));\n }\n };\n\n const socialMediaAlreadyAdded = socialMedia => !dataStep2.socialMediaLinks.some(socialMediaLink => socialMedia.name === socialMediaLink.social_icon.name);\n const availableSocialMedias = socialMediaList.filter(socialMediaAlreadyAdded);\n\n const defaultProps = {\n handleNextStep: profileId ? updateLinkNaBio : nextStep,\n handleUpdateLink,\n handleDeleteLink,\n handleReorderLinks,\n handleAddLink,\n handleUpdateSocialMedia,\n handleDeleteSocialMedia,\n handleReorderSocialMedia,\n handleAddSocialMedia,\n prevStep,\n setStepData: setDataStep2,\n stepData: dataStep2,\n stepLocale: linkNaBioLocale.step2,\n isEditing: profileId,\n setFieldUpdate,\n previewData: { ...dataStep3 },\n linksLoading,\n socialMediaLoading,\n onMobile,\n sanitizeLinkURL,\n availableSocialMedias,\n };\n\n return {\n ...defaultProps,\n };\n };\n\n const getStep3Props = () => {\n const createLinkNaBio = () => {\n const assembledLinks = dataStep2.links.map((link) => {\n const assembledLink = { ...link };\n assembledLink.link = assembledLink.link && assembledLink.link.startsWith('http') ? assembledLink.link : `https://${assembledLink.link}`;\n delete assembledLink.id;\n return assembledLink;\n });\n\n const assembledSocialMediaLinks = dataStep2.socialMediaLinks.map((link) => {\n const assembledLink = { ...link };\n const isWhatsapp = assembledLink.social_icon && assembledLink.social_icon.name && assembledLink.social_icon.name.toLowerCase() === 'whatsapp';\n const isEmail = assembledLink.social_icon && assembledLink.social_icon.name && assembledLink.social_icon.name.toLowerCase() === 'e-mail';\n\n assembledLink.value = (assembledLink.value && assembledLink.value.startsWith('http')) || isEmail || isWhatsapp ? assembledLink.value : `https://${assembledLink.link}`;\n assembledLink.social_icon_id = link.social_icon.id;\n delete assembledLink.id;\n return assembledLink;\n });\n\n const dataToSend = {\n linkName: dataStep1.link,\n title: dataStep2.emoji ? dataStep2.emoji + dataStep2.title : dataStep2.title,\n description: dataStep2.description,\n links: assembledLinks,\n template: dataStep3.template,\n colorScheme: dataStep3.colorScheme,\n icons: assembledSocialMediaLinks,\n callback: nextStep,\n };\n\n dispatch(linkNaBioActions.profile.create.request(dataToSend));\n };\n\n const updateLinkNaBio = () => {\n if (fieldUpdate) {\n const dataToSend = {\n template: dataStep3.template,\n colorScheme: dataStep3.colorScheme,\n profileId,\n callback: nextStep,\n };\n dispatch(linkNaBioActions.profile.update.request(dataToSend));\n } else {\n nextStep();\n }\n\n setFieldUpdate(false);\n };\n\n const defaultProps = {\n prevStep,\n setStepData: setDataStep3,\n stepData: dataStep3,\n previewData: dataStep2,\n stepLocale: linkNaBioLocale.step3,\n handleNextStep: profileId ? updateLinkNaBio : createLinkNaBio,\n linkNaBioLoading: loading,\n isEditing: profileId,\n setFieldUpdate,\n onMobile,\n };\n\n return {\n ...defaultProps,\n };\n };\n\n const getStep4Props = () => {\n const defaultProps = {\n previewData: { ...dataStep2, ...dataStep3 },\n link: dataStep1.link,\n stepLocale: linkNaBioLocale.step4,\n onMobile,\n };\n\n return {\n ...defaultProps,\n };\n };\n\n return (\n\n \n \n \n\n {activeStep === linkNaBioEnum.steps.LINK_CHOOSE && (\n \n );\n};\n\nexport default withErrorBoundary(LinkNaBioWizardHandler, 'LinkNaBioWizardHandler');\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.neutral.highPure};\n margin: 0 24px;\n padding: 30px 24px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 0;\n }\n `}\n`;\n\nexport const Skeleton = styled.div`\n ${({ gap }) => css`\n margin-bottom: ${gap}px;\n `}\n`;\n\nexport const SkeletonRow = styled.div`\n ${({ gap }) => css`\n align-items: center;\n display: flex;\n gap: ${gap}px\n `}\n`;\n\nexport const FaqSection = styled.section`\n ${({ theme }) => css`\n background: ${theme.v2.colors.white.primary};\n margin: 16px 24px;\n width: 560px;\n \n a{\n color: ${theme.v2.colors.brand.primaryMedium};\n }\n\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n width: 50%;\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n width: auto;\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 10px 0;\n }\n `};\n`;\n\nexport const LinkNaBioUser = styled.h3`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.neutral.highPure};\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0 24px 6px;\n padding: 25px 24px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 0 0 6px;\n }\n `}\n`;\n\nexport const Title = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0;\n margin-top: 5px;\n margin-bottom: 28px;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin-top: 6px;\n margin-bottom: 24px;\n `}\n`;\n\nexport const TotalData = styled.div`\n ${({ theme }) => css`\n align-items: center;\n border-radius: 8px; \n border: 1px solid ${theme.v2.colors.neutral.highMedium};\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n justify-content: space-between;\n margin-bottom: 53px;\n max-width: 716px;\n padding: 23px 38px;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n align-items: start;\n flex-direction: column;\n gap: 30px;\n padding: 16px 24px;\n }\n `}\n`;\n\nexport const Circle = styled.div`\n ${({ variant, theme }) => {\n const backgroundVariant = {\n access: theme.v2.colors.brand.primaryMedium,\n clicks: theme.v2.colors.brand.primaryExtraDark,\n conversion: theme.v2.colors.feedback.activePure,\n };\n\n return css`\n border-radius: 50%;\n height: 16px;\n min-width: 16px;\n background-color: ${backgroundVariant[variant]};\n `;\n }}\n`;\n\nexport const Data = styled.div`\n ${({ theme }) => css`\n display: flex;\n align-items: center;\n gap: 8px;\n\n p {\n margin: 0\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n span {\n display: none;\n };\n }\n `}\n`;\n\nexport const VerticalDivider = styled.div`\n ${({ theme }) => css`\n border-left: 1px solid ${theme.v2.colors.neutral.highMedium};\n height: 32px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n display: none;\n }\n `}\n`;\n\nexport const PeriodFilter = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n flex-wrap: wrap;\n gap: 33px;\n justify-content: space-between;\n max-width: 716px;\n width: 100%;\n `}\n`;\n\nexport const FilterButtons = styled.div`\n display: flex;\n gap: 16px;\n\n button {\n padding: 0;\n }\n`;\n\nexport const ChartWrapper = styled.div`\n ${({ theme }) => css`\n margin-top: 30px;\n max-width: 716px;\n width: 100%;\n\n canvas {\n min-height: 220px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n margin-top: 20px;\n }\n `}\n`;\n\nexport const EmptyState = styled(Container)`\n align-items: center;\n justify-content: center;\n display: flex;\n flex-direction: column;\n min-height: 480px;\n`;\n\nexport const EmptyStateTitle = styled.h4`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: 21.6px;\n margin: 0;\n margin-top: 9px;\n text-align: center;\n `}\n`;\n\nexport const EmptyStateDescription = styled.p`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 18.9px;\n text-align: center;\n margin: 3px;\n max-width: 535px;\n `}\n`;\n","import styled from 'styled-components';\n\nexport const Svg = styled.svg`\n width: 46px;\n`;\n","import React from 'react';\nimport * as Styles from './IconGraph.styles';\n\nconst IconGraph = ({\n testId = 'IconGraph',\n}) => (\n \n \n {statisticsLocale.linkPlaceholder + profileSelected.username}\n \n\n {!statistics.data && loading && (\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n \n\n \n \n \n )}\n\n {statistics.data && (\n \n \n {statisticsLocale.consolidatedData}\n \n \n {statisticsLocale.totalData}\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n {statisticsLocale.dailyAccess}\n \n setNewStatisticPeriod(7)}\n variant={periodIntervalInDays === 7 ? 'tabActive' : 'tab'}\n />\n setNewStatisticPeriod(30)}\n variant={periodIntervalInDays === 30 ? 'tabActive' : 'tab'}\n />\n \n \n\n \n {statistics.data && loading && ( \n \n )}\n\n {!loading && (!statistics.data || !statistics.data.length) && (\n \n \n {statisticsLocale.emptyStateTitle}\n \n \n {statisticsLocale.emptyStateDescription}\n \n \n )}\n\n \n \n \n );\n};\n\nexport default withErrorBoundary(LinkNaBioStatistic, 'LinkNaBioStatistic');\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n padding: 0 40px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding: 0;\n }\n `}\n`;\n\nexport const ListWrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 16px;\n`;\n\nexport const CardWrapper = styled.div`\n ${({ theme }) => css`\n padding: 16px;\n background-color: ${theme.v2.colors.white.primary};\n display: flex;\n align-items: center;\n justify-content: space-between;\n `}\n`;\n\nexport const ButtonRow = styled.div`\n display: flex;\n justify-content: center;\n margin-top: 16px;\n`;\n\nexport const RefreshButtonRow = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n margin-top: 4px;\n`;\n\nexport const EmptyCard = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.white.primary};\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 32px;\n min-height: 500px;\n padding: 71px;\n `}\n`;\n\nexport const NoDomainText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm2};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0px;\n max-width: 451px;\n text-align: center;\n `}\n`;\n\nexport const FaqRow = styled.div`\n display: flex;\n flex-direction: row;\n margin-top: 32px;\n`;\n\nexport const SkeletonItem = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n background-color: ${theme.v2.colors.white.primary};\n border-radius: 8px;\n display: flex;\n flex-directino: row;\n gap: 110px;\n justify-content: space-between;\n padding: 24px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n flex-wrap: wrap;\n gap: 16px;\n }\n `}\n`;\n\nexport const SkeletonHeaderColumn = styled.div`\n display: flex;\n flex-direction: column;\n gap: 8px;\n max-width: 609px;\n width: 100%;\n\n & > :first-child {\n margin-bottom: 8px;\n }\n`;\n\nexport const SkeletonButton = styled.div`\n display: flex;\n flex-direction: row;\n gap: 16px;\n max-width: 100%;\n`;\n","import styled, { css, keyframes } from 'styled-components';\n\n\nexport const Header = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n border-radius: 8px;\n display: flex;\n flex-diretion: row;\n gap: 16px;\n justify-content: space-between;\n padding: 24px;\n\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryExtraDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm2};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const Column = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n min-width: 368px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n max-width: 100%;\n min-width: unset;\n width: 100%;\n }\n `}\n`;\n\nexport const PlanNameSeparator = styled.span`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n height: 1.5px;\n justify-content: center;\n width: 8px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n display: none;\n }\n `}\n`;\n\nexport const CloudFlareCdnExplanation = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowMedium};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n gap: 8px;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 8px 0px 0px;\n\n svg {\n flex: 0 0 24px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n align-items: flex-start;\n }\n `}\n`;\n\nexport const ExplanationWrapper = styled.div`\n ${({ theme }) => css`\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n `}\n`;\n\nexport const RightColumn = styled(Column)`\n justify-content: space-between;\n\n @media (max-width: ${({ theme }) => theme.v2.breakpoints.lg}) {\n flex-direction: row;\n align-items: end;\n };\n\n @media (max-width: ${({ theme }) => theme.v2.breakpoints.md}) {\n flex-direction: column;\n };\n`;\n\nexport const InputWrapper = styled.div`\n align-self: start;\n max-width: 368px;\n width: 100%;\n`;\n\nexport const HostingLabel = styled.p`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n color: ${theme.v2.colors.neutral.lowMedium};\n margin: 0px;\n `}\n`;\n\nexport const ChangePlanWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: 8px;\n justify-content: flex-start;\n margin: 16px 0px 0px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n margin: 0px;\n }\n `}\n`;\n\nexport const PlanNameRightBlock = styled.span`\n ${({ theme }) => css`\n display: flex;\n gap: 8px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n button {\n align-items: flex-end;\n padding: 0px;\n }\n }\n `}\n`;\n\nexport const PlanName = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowMedium};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n margin: 16px 0px 0px 32px;\n }\n `}\n`;\n\nexport const MainDomain = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n margin: 0px 0px 0px 32px;\n }\n `}\n`;\n\nexport const RefreshButtonContainer = styled.div`\n display: flex;\n justify-content: end;\n margin-top: 16px;\n`;\n\nconst loadingLoop = keyframes`\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n`;\n\nexport const IconRefreshContainer = styled.div`\n ${({ loading }) => css`\n align-items: center;\n display: flex;\n justify-content: center;\n\n ${loading && css`animation: ${loadingLoop} 0.5s linear infinite`};\n `};\n`;\n","import React from 'react';\nimport * as Styles from './CloudFlareHeader.styles';\nimport {\n Button, IconRefresh, IconSecurityCheck, TextField,\n Tooltip,\n} from 'gatorcomponents';\nimport PropTypes from 'prop-types';\nimport { cloudflareAnalytics } from '@/analytics/cloudflare';\n\nexport const CloudFlareHeader = ({\n hostingLabel = 'Hosting Label',\n changeCta = 'change cta',\n cloudflareCdnExplanation,\n searchPerDomainLabel = 'search per domain label',\n refreshStatusLabel,\n noOpenStatusLabel,\n waitRefreshTimeLimitLabel,\n handleRefreshStatus,\n setLastRefreshOnCookie,\n refreshTimeLimitHasEnded,\n hasOpenStatus,\n cloudflareStatusLoading,\n inputedFilter,\n setInputedFilter,\n currentPlan,\n currentDomain,\n handleChangePlan,\n sites,\n title = 'CDN - Desempenho de sites ',\n}) => {\n const handleClickChangePlan = () => {\n handleChangePlan && handleChangePlan();\n };\n\n const canRefresh = refreshTimeLimitHasEnded && !cloudflareStatusLoading && hasOpenStatus;\n const refreshTooltipLabel = !hasOpenStatus ? noOpenStatusLabel : waitRefreshTimeLimitLabel;\n\n const handleClickRefreshStatus = () => {\n const now = Date.now();\n setLastRefreshOnCookie && setLastRefreshOnCookie(now);\n handleRefreshStatus && handleRefreshStatus();\n cloudflareAnalytics.updateStatusCta();\n };\n\n const handleTypeOnFilter = (e) => {\n setInputedFilter && setInputedFilter(e.target.value);\n };\n\n const refreshButtonLabel = () => {\n const iconRefreshColor = canRefresh ? 'primaryMedium' : 'lowLight';\n\n return (\n <>\n {refreshStatusLabel}\n \n \n \n );\n };\n\n return (\n \n \n \n {title}\n \n\n \n \n {cloudflareCdnExplanation}\n \n \n\n \n \n {`${hostingLabel} ${currentPlan}`}\n \n\n \n \n {currentDomain}\n \n\n \n \n \n\n \n \n \n \n \n \n \n \n \n );\n};\n\nCloudFlareHeader.propTypes = {\n hostingLabel: PropTypes.string,\n changeCta: PropTypes.string,\n cloudflareCdnExplanation: PropTypes.object,\n searchPerDomainLabel: PropTypes.string,\n refreshStatusLabel: PropTypes.string,\n noOpenStatusLabel: PropTypes.string,\n waitRefreshTimeLimitLabel: PropTypes.string,\n handleRefreshStatus: PropTypes.func,\n setLastRefreshOnCookie: PropTypes.func,\n refreshTimeLimitHasEnded: PropTypes.bool,\n hasOpenStatus: PropTypes.bool,\n cloudflareStatusLoading: PropTypes.bool,\n inputedFilter: PropTypes.string,\n setInputedFilter: PropTypes.func,\n currentPlan: PropTypes.string,\n currentDomain: PropTypes.string,\n handleChangePlan: PropTypes.func,\n sites: PropTypes.array,\n title: PropTypes.string,\n};\n\nexport default CloudFlareHeader;\n","import styled, { css } from 'styled-components';\n\nexport const CardWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.white.primary};\n border-radius: 8px;\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n padding: 32px 24px;\n `}\n`;\n\nexport const DomainName = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryExtraDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n flex: 1 1 100%;\n order: 1;\n }\n `}\n`;\n\nexport const TagWrapper = styled.div`\n ${({ theme }) => css`\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n flex: 1 1 100%;\n order: 0;\n }\n `}\n`;\n\nexport const LeftColumn = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: 24px;\n margin-left: auto;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n flex: 1 1 100%;\n justify-content: space-between;\n margin: 0px;\n order: 3;\n }\n `}\n`;\n\nexport const ToggleWrapper = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowMedium};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n gap: 16px;\n height: 24px;\n line-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const ToggleText = styled.span`\n margin-top: -6px;\n`;\n\nexport const ItemDescription = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n order: 2;\n }\n `}\n`;\n\nexport const TooltipContentWrapper = styled.span`\n ${({ theme }) => css`\n align-items: flex-start;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n gap: 16px;\n line-height: ${theme.v2.font.lineHeight.text};\n max-width: 230px;\n\n strong {\n display: inline-flex;\n }\n `}\n`;\n\nexport const DisabledManagerTooltipContentWrapper = styled(TooltipContentWrapper)`\n align-items: flex-end;\n gap: 8px;\n`;\n\nexport const ActiveTooltipContentWrapper = styled(TooltipContentWrapper)`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xxs};\n max-width: 210px;\n\n svg {\n flex: 0 0 32px;\n }\n `}\n`;\n\nexport const Image = styled.img`\n transform: scaleX(-1);\n width: 44px;\n`;\n\nexport const ToggleLabel = styled.label`\n`;\n","export const STATUS = {\n ACTIVE: 'active',\n PENDING: 'pending',\n INACTIVE: 'inactive',\n NONEXISTENT: 'nonexistent',\n PENDING_DEACTIVATION: 'pendingDeactivation',\n ACTIVATION_POINTING_ERROR: 'activation_pointing_error',\n INACTIVATION_POINTING_ERROR: 'inactivation_pointing_error',\n DELAY: 'delay',\n INACTIVE_DELAY: 'inactive_delay',\n EXTERNAL_PROVIDER: 'external_provider',\n ERROR: 'error',\n};\n\nexport const ORIGIN = {\n INTERNAL: 'internal',\n EXTERNAL: 'external',\n};\n","import React, { useCallback } from 'react';\nimport * as Styles from './DomainItem.styles';\nimport {\n Button, Tag, Toggle, Tooltip, IconSpeed,\n} from 'gatorcomponents';\nimport { ORIGIN, STATUS } from '../../CloudFlareHandler.types';\nimport PropTypes from 'prop-types';\nimport { cloudflareAnalytics } from '@/analytics/cloudflare';\n\nexport const DomainItem = ({\n domain,\n status,\n origin,\n nameServerTooltipContent,\n activateCdn,\n manageLabel,\n messageOngoingActivation,\n messageOngoingExternalActivation,\n messageOngoingDeactivation,\n messageExternalDomain,\n statusLabel,\n pendingTooltip,\n cdnAlreadyActive,\n manageDomainCdn,\n onClickToggle,\n onVerifyExternalDomain,\n messageWithActivationError,\n messageWithDeactivationError,\n}) => {\n const isPendingDeactivation = [STATUS.PENDING_DEACTIVATION].includes(status);\n const isPendingActivation = [\n STATUS.PENDING,\n STATUS.EXTERNAL_PROVIDER,\n STATUS.ACTIVATION_POINTING_ERROR,\n ].includes(status);\n const isDelayed = [STATUS.DELAY].includes(status);\n const isInactive = [STATUS.NONEXISTENT, STATUS.INACTIVE, STATUS.INACTIVE_DELAY].includes(status);\n const hasError = [STATUS.ERROR, STATUS.INACTIVATION_POINTING_ERROR].includes(status);\n\n const toggleOff = isPendingDeactivation || isPendingActivation || hasError;\n\n const withTooltip = isPendingActivation || status === STATUS.ACTIVE;\n const canManageCDN = (!isPendingActivation && !isPendingDeactivation && !isInactive && (!hasError || status === STATUS.INACTIVATION_POINTING_ERROR) && !isDelayed);\n\n const hasMessageAndTag = isPendingDeactivation\n || isPendingActivation\n || isDelayed\n || hasError\n || (status === STATUS.NONEXISTENT && origin === ORIGIN.EXTERNAL);\n\n const handleVerifyDomain = () => {\n onVerifyExternalDomain && onVerifyExternalDomain();\n };\n\n const mountMessage = useCallback(() => {\n if (isDelayed || hasError) {\n if (status === STATUS.PENDING_DEACTIVATION) {\n return messageWithDeactivationError;\n }\n\n return messageWithActivationError;\n }\n\n if (isPendingDeactivation) {\n return messageOngoingDeactivation;\n }\n\n if (isPendingActivation && origin === ORIGIN.EXTERNAL) {\n return messageOngoingExternalActivation;\n }\n\n if (isPendingActivation) {\n return messageOngoingActivation;\n }\n\n if (status === STATUS.NONEXISTENT && origin === ORIGIN.EXTERNAL) {\n return messageExternalDomain;\n }\n\n return '';\n }, [\n isPendingActivation,\n isPendingDeactivation,\n messageExternalDomain,\n messageOngoingActivation,\n messageOngoingDeactivation,\n origin,\n status,\n hasError,\n isDelayed,\n messageWithActivationError,\n messageWithDeactivationError,\n messageOngoingExternalActivation,\n ]);\n\n const getTagVariant = useCallback(() => {\n if ([STATUS.PENDING, STATUS.ACTIVATION_POINTING_ERROR, STATUS.INACTIVATION_POINTING_ERROR].includes(status) && origin === ORIGIN.EXTERNAL) {\n return 'attention';\n }\n\n if (hasError || isDelayed) {\n return 'problem';\n }\n\n if (isPendingActivation || isPendingDeactivation) {\n return 'info';\n }\n\n if (status === STATUS.NONEXISTENT && origin === ORIGIN.EXTERNAL) {\n return 'pending';\n }\n }, [\n isPendingActivation,\n isPendingDeactivation,\n origin,\n status,\n hasError,\n isDelayed,\n ]);\n\n const getToggleCheckedStatus = useCallback(() => {\n if (isPendingDeactivation) {\n return true;\n }\n\n return status === STATUS.ACTIVE || isPendingActivation;\n }, [\n isPendingActivation,\n isPendingDeactivation,\n status,\n ]);\n\n const activeTooltipContent = () => (\n \n \n );\n\n const handleManageDomainCDN = () => {\n cloudflareAnalytics.manageCta();\n manageDomainCdn && manageDomainCdn();\n };\n\n const isInternalOrOngoinging = (\n origin === ORIGIN.INTERNAL\n || (\n origin === ORIGIN.EXTERNAL\n && ![STATUS.NONEXISTENT, STATUS.INACTIVE, STATUS.DELAY, STATUS.INACTIVE_DELAY].includes(status)\n )\n );\n\n const callGaTag = () => {\n if (origin === ORIGIN.INTERNAL && status === STATUS.ACTIVE) {\n cloudflareAnalytics.deactivateHgDomainToggle();\n }\n if (origin === ORIGIN.INTERNAL && status === STATUS.INACTIVE) {\n cloudflareAnalytics.activateHgDomainToggle();\n }\n if (origin === ORIGIN.EXTERNAL && status === STATUS.ACTIVE) {\n cloudflareAnalytics.deactivateExternalDomainToggle();\n }\n if (origin === ORIGIN.EXTERNAL && status === STATUS.INACTIVE) {\n cloudflareAnalytics.activateExternalDomainToggle();\n }\n };\n\n const handleClickToggle = (e) => {\n e.preventDefault();\n\n if (toggleOff) {\n return;\n }\n\n callGaTag();\n\n if (isInternalOrOngoinging) {\n onClickToggle && onClickToggle();\n return;\n }\n\n if (!isInternalOrOngoinging) {\n handleVerifyDomain && handleVerifyDomain();\n }\n };\n\n return (\n \n {nameServerTooltipContent ? (\n \n \n {domain}\n \n \n ) : (\n \n {domain}\n \n )}\n\n {hasMessageAndTag && (\n \n \n )}\n\n \n <>\n \n \n handleClickToggle(e)}>\n \n \n\n \n {activateCdn}\n \n \n\n\n \n\n {hasMessageAndTag && (\n \n {mountMessage()}\n \n )}\n \n );\n};\n\nDomainItem.propTypes = {\n domain: PropTypes.string.isRequired,\n status: PropTypes.string.isRequired,\n origin: PropTypes.string.isRequired,\n nameServerTooltipContent: PropTypes.object,\n activateCdn: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,\n manageLabel: PropTypes.string,\n messageOngoingActivation: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n messageOngoingDeactivation: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n messageExternalDomain: PropTypes.string.isRequired,\n statusLabel: PropTypes.object.isRequired,\n pendingTooltip: PropTypes.string,\n cdnAlreadyActive: PropTypes.object,\n manageDomainCdn: PropTypes.func.isRequired,\n onClickToggle: PropTypes.func,\n onVerifyExternalDomain: PropTypes.func,\n};\n\n\nexport default DomainItem;\n","import styled, { css } from 'styled-components';\n\n\nexport const NoDomainText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm2};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0px;\n `}\n`;\n\nexport const PlanWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-height: 620px;\n overflow-y: scroll;\n\n &::-webkit-scrollbar {\n width: 8px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${theme.v2.colors.neutral.highDark};\n border-radius: 25px;\n height: 30px;\n width: 8px;\n }\n `}\n`;\n\nexport const DomainsWrapper = styled.div`\n ${({ theme }) => css`\n border-radius: 8px;\n border: 1px solid ${theme.v2.colors.neutral.highMedium};\n display: flex;\n flex-direction: column;\n gap: 0px;\n max-height: 620px;\n overflow-y: auto;\n padding: 0px;\n\n &::-webkit-scrollbar {\n width: 8px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${theme.v2.colors.neutral.highDark};\n border-radius: 25px;\n height: 30px;\n width: 8px;\n }\n `}\n`;\n\n\nexport const DomainItem = styled.button`\n ${({ theme, isSelected }) => css`\n align-items: flex-start;\n background-color: ${isSelected ? `${theme.v2.colors.brand.primaryMedium} !important` : 'transparent'};\n border-bottom: 1px solid ${theme.v2.colors.neutral.highMedium};\n border-left: 0px;\n border-right: 0px;\n border-top: 0px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 8px;\n justify-content: flex-start;\n padding: 8px 24px;\n\n &:last-child {\n border-bottom: 0px;\n padding-bottom: 16px;\n }\n\n &:first-child {\n padding-top: 16px;\n }\n\n &:hover {\n background-color: ${theme.v2.colors.white.primary};\n span{\n color: ${theme.v2.colors.brand.primaryMedium};\n }\n }\n `}\n`;\n\nexport const Domain = styled.span`\n ${({ theme, isSelected }) => css`\n color: ${isSelected ? `${theme.v2.colors.white.primary} !important` : theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n min-width: 100%;\n text-align: left;\n `}\n`;\n\nexport const Plan = styled.span`\n ${({ theme, isSelected }) => css`\n color: ${isSelected ? `${theme.v2.colors.white.primary} !important` : theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n min-width: 100%;\n text-align: left;\n `}\n`;\n\nexport const Divider = styled.span`\n ${({ theme }) => css`\n height: 1px;\n background-color: ${theme.v2.colors.neutral.highMedium};\n width: calc(100% - 32px);\n margin: 0px auto;\n `}\n`;\n\nexport const PlanItem = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n background-color: transparent;\n border-radius: 8px;\n border: 1px solid ${theme.v2.colors.neutral.highMedium};\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 8px;\n padding: 26px;\n `}\n`;\n\nexport const Column = styled.div`\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nexport const PlanName = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n `}\n`;\n\nexport const MainDomainLabel = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowLight};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm2};\n font-weight: ${theme.v2.font.weights.regular};\n `}\n`;\n\nexport const MainDomainItem = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm2};\n font-weight: ${theme.v2.font.weights.regular};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ changePlanWithInput }) => css`\n align-items: center;\n display: flex;\n flex-direction: row;\n gap:24px;\n justify-content: ${changePlanWithInput ? 'flex-end' : 'center'};\n margin: ${changePlanWithInput ? '8px' : '32px 0px 0px'};\n `}\n`;\n\nexport const EmptyStateWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n border-radius: 8px;\n display: flex;\n flex-direction: row;\n gap: 8px;\n height: 180px;\n justify-content: center;\n margin: 0 48px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const EmptyStateMessage = styled.p`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n color: ${theme.v2.colors.neutral.lowLight};\n margin: 0;\n text-align: center;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `};\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './ChangePlanModal.styles';\nimport {\n Button, IconSearchFail, Modal,\n TextField,\n} from 'gatorcomponents';\n\nimport PropTypes from 'prop-types';\n\nexport const ChangePlanModal = ({\n sites,\n onClose,\n currentPlan,\n handleSetPlan,\n backCta = 'Voltar',\n continueCta = 'Continuar',\n title = 'Selecione um domínio',\n emptyMessage = 'Nenhum resultado encontrado para sua busca',\n searchPlaceholder = 'Buscar por domínio',\n}) => {\n const [inputedFilter, setInputedFilter] = useState('');\n const [selectedItem, setSelectedItem] = useState(currentPlan);\n\n const [filteredDomains, setFilteredDomains] = useState(sites);\n\n const filterCards = useCallback(() => {\n setFilteredDomains(sites.filter(item => item.domain.toLowerCase().includes(inputedFilter.toLowerCase())));\n }, [\n inputedFilter,\n sites,\n ]);\n\n useEffect(() => {\n filterCards();\n }, [filterCards]);\n\n const handleChangePlan = () => {\n handleSetPlan && handleSetPlan(selectedItem);\n onClose && onClose();\n };\n\n const handleSelect = (item) => {\n setSelectedItem(item);\n };\n\n return (\n \n\n setInputedFilter(e.target.value)}\n value={inputedFilter}\n traillingIcon=\"IconSearch\"\n />\n \n {!!(filteredDomains.length) && filteredDomains.map((item, index) => {\n const isSelected = item.hosting_id === selectedItem.hosting_id\n && item.domain === selectedItem.domain;\n\n return (\n \n handleSelect(item)}\n >\n \n {item.domain}\n \n\n \n {`Hospedagem: ${item.product_name}`}\n \n\n \n {(index < filteredDomains.length - 1 && !isSelected) && \n \n {emptyMessage}\n \n \n )}\n\n \n\n \n onClose()}\n />\n\n \n \n );\n};\n\nChangePlanModal.propTypes = {\n sites: PropTypes.arrayOf(PropTypes.shape({\n domain: PropTypes.string,\n hosting_id: PropTypes.string,\n product_name: PropTypes.string,\n })).isRequired,\n onClose: PropTypes.func.isRequired,\n currentPlan: PropTypes.shape({\n domain: PropTypes.string,\n hosting_id: PropTypes.string,\n product_name: PropTypes.string,\n }).isRequired,\n handleSetPlan: PropTypes.func.isRequired,\n backCta: PropTypes.string,\n continueCta: PropTypes.string,\n title: PropTypes.string,\n emptyMessage: PropTypes.string,\n};\n\nexport default ChangePlanModal;\n","import styled, { css } from 'styled-components';\n\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin:0px;\n `}\n`;\n\nexport const CardsWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.brand.primaryUltraLight};\n display: flex;\n flex-wrap: wrap;\n gap: 32px;\n justify-content: space-between;\n margin-top: 24px;\n padding: 16px 32px;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const Card = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n flex: 1 1 250px;\n`;\n\nexport const CardTitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryExtraDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm2};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 0px 0px;\n `}\n`;\n\nexport const CardDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px 0px 0px 0px;\n text-align: center;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n align-items: center;\n display: inline-flex;\n justify-content: center;\n margin: 0px;\n`;\n","import React from 'react';\nimport {\n Button, IconFeatured, Modal,\n} from 'gatorcomponents';\nimport * as Styles from './WhatIsCdnModal.styles';\n\nconst WhatIsCdnModal = ({\n onClose,\n title = 'title',\n description = 'description',\n items = [\n {\n icon: 'IconCdn',\n featureBackground: 'attentionPure',\n iconSecondaryColor: 'attentionUltraLight',\n title: 'title',\n description: 'description',\n },\n ],\n cta = 'Ok',\n}) => (\n \n {description} \n\n \n {items.map(item => (\n \n \n {item.title}\n \n\n \n {item.description}\n \n \n ))}\n \n\n \n \n\n \n);\nexport default WhatIsCdnModal;\n","import styled, { css } from 'styled-components';\n\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 100px 0px 0px;\n }\n `}\n`;\n\nexport const Title = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryExtraDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px 0px 0px;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 8px 0px 0px;\n max-width: 454px;\n text-align: center;\n `}\n`;\n\nexport const ActionsRow = styled.div`\n align-items: center;\n display: flex;\n gap: 24px;\n justify-content: center;\n margin: 32px 0px 0px;\n`;\n","import PropTypes from 'prop-types';\nimport {\n Button, IconAtencion, IconLoading, IconPreferences, IconSpeed, Modal,\n} from 'gatorcomponents';\nimport React from 'react';\nimport * as Styles from './ActivateDeactivateInternalDomainModal.styles';\nimport { ORIGIN, STATUS } from '../../CloudFlareHandler.types';\nimport { cloudflareAnalytics } from '@/analytics/cloudflare';\n\n\nexport const ActivateDeactivateInternalDomainModal = ({\n onClose,\n onContinueActivating,\n onContinueDeactivating,\n toActivateTitle,\n activatingTitle,\n toDeactivateTitle = 'Desativar o CDN',\n deactivatingTitle = 'Desativação do CDN em andamento',\n toActivateDescription,\n activatingDescription,\n deactivatingDescription = 'Ative o CDN e deixe seu site mais rápido e seguro. As mudanças podem levar até 24 horas.',\n toDeactivateDescription = 'Ative o CDN e deixe seu site mais rápido e seguro. As mudanças podem levar até 24 horas.',\n cancelCta = 'Cancelar',\n confirmationCta = 'Ok, entendi',\n continueActivationCta = 'Ativar o CDN',\n continueDeactivationCta = 'Desativar o CDN',\n currentStatus = STATUS.NONEXISTENT,\n origin,\n loadingActivation,\n lastActivation,\n failedRequestTitle = 'Ocorreu um erro na sua solicitação',\n domainWithProblemTitle = 'Domínio temporariamente indisponível',\n failedRequestDescription = 'Algo deu errado enquanto processavamos sua solicitação. Por favor, tente novamente.',\n domainWithProblemDescription = ' Não foi possível ativar a CDN por conta de problemas no seu domínio, por favor, entre em contato com o seu registrante e confirme se há alguma pendência.',\n}) => {\n const toActivate = [\n STATUS.NONEXISTENT,\n STATUS.INACTIVE,\n STATUS.DELAY,\n STATUS.ERROR,\n STATUS.INACTIVE_DELAY,\n STATUS.ACTIVATION_POINTING_ERROR,\n ].includes(currentStatus);\n const successActivation = lastActivation.status === 'success';\n const failedActivation = lastActivation.status === 'failure';\n const domainWithProblem = failedActivation && lastActivation.message === 'frozen domain';\n\n const callToggleGaTag = () => {\n if (origin === ORIGIN.INTERNAL && currentStatus === STATUS.INACTIVE) {\n cloudflareAnalytics.activateHgDomainToggle();\n return;\n }\n if (origin === ORIGIN.INTERNAL && currentStatus === STATUS.ACTIVE) {\n cloudflareAnalytics.deactivateHgDomainToggle();\n return;\n }\n if (origin === ORIGIN.EXTERNAL && currentStatus === STATUS.INACTIVE) {\n cloudflareAnalytics.activateExternalDomainToggle();\n return;\n }\n if (origin === ORIGIN.EXTERNAL && currentStatus === STATUS.ACTIVE) {\n cloudflareAnalytics.deactivateExternalDomainToggle();\n }\n };\n\n const handleCancel = () => {\n onClose && onClose();\n };\n\n const handleContinue = () => {\n callToggleGaTag();\n\n if (toActivate) {\n onContinueActivating && onContinueActivating();\n }\n\n if (!toActivate) {\n onContinueDeactivating && onContinueDeactivating();\n }\n };\n\n const getTitle = () => {\n if (failedActivation) {\n return domainWithProblem ? domainWithProblemTitle : failedRequestTitle;\n }\n\n if (successActivation) {\n return toActivate ? activatingTitle : deactivatingTitle;\n }\n\n return toActivate ? toActivateTitle : toDeactivateTitle;\n };\n\n const getIcon = () => {\n if (failedActivation) {\n return \n \n {getIcon()}\n\n \n {getTitle()}\n \n\n \n {getDescription()}\n \n\n \n {(successActivation || failedActivation) && (\n \n \n \n );\n};\n\nActivateDeactivateInternalDomainModal.propTypes = {\n onClose: PropTypes.func,\n onContinueActivating: PropTypes.func,\n onContinueDeactivating: PropTypes.func,\n toActivateTitle: PropTypes.string,\n activatingTitle: PropTypes.string,\n toDeactivateTitle: PropTypes.string,\n deactivatingTitle: PropTypes.string,\n toActivateDescription: PropTypes.string,\n activatingDescription: PropTypes.string,\n toDeactivateDescription: PropTypes.string,\n deactivatingDescription: PropTypes.string,\n cancelCta: PropTypes.string,\n confirmationCta: PropTypes.string,\n continueActivationCta: PropTypes.string,\n continueDeactivationCta: PropTypes.string,\n currentStatus: PropTypes.string,\n loadingActivation: PropTypes.bool,\n lastActivation: PropTypes.object,\n failedRequestTitle: PropTypes.string,\n failedRequestDescription: PropTypes.string,\n};\n\nexport default ActivateDeactivateInternalDomainModal;\n","import { isBRServer } from '@/utils/Validators/validation';\nimport {\n SUPPORT_ARTICLE_CHANGE_DNS_COLOMBIAHOSTING,\n SUPPORT_ARTICLE_CHANGE_DNS_GODADDY,\n SUPPORT_ARTICLE_CHANGE_DNS_KINGHOST,\n SUPPORT_ARTICLE_CHANGE_DNS_LOCAWEB,\n SUPPORT_ARTICLE_CHANGE_DNS_NEUBOX,\n SUPPORT_ARTICLE_CHANGE_DNS_OTHERS,\n SUPPORT_ARTICLE_CHANGE_DNS_REGISTROBR,\n SUPPORT_ARTICLE_CHANGE_DNS_UOLHOST,\n SUPPORT_ARTICLE_CHANGE_DNS_WEBEMPRESA,\n GODADDY_HOMEPAGE,\n KINGHOST_HOMEPAGE,\n LOCAWEB_HOMEPAGE,\n REGISTROBR_HOMEPAGE,\n UOLHOST_HOMEPAGE,\n WEBEMPRESA_HOMEPAGE,\n COLOMBIAHOSTING_HOMEPAGE,\n NEUBOX_HOMEPAGE,\n} from '@/config/urls/supportUrls';\n\nconst optionsBr = ['Registro.br', 'Godaddy', 'Locaweb', 'Uol Host', 'Kinghost', 'Outros'];\nconst optionsEs = ['Godaddy', 'Web Empresa', 'Colombia Hosting', 'Neubox', 'Otros'];\n\nexport const optionsList = isBRServer\n ? optionsBr.map((item, index) => ({ id: index, label: item, value: item }))\n : optionsEs.map((item, index) => ({ id: index, label: item, value: item }));\n\nexport const SELECT_MODAL_STEPS = {\n CHECKING_STATUS: 0,\n GET_DOMAIN_ORIGINAL_REGISTRATION: 1,\n HOW_TO_SETUP: 2,\n FINISH_SETUP_STEP: 3,\n DOMAIN_NOT_REGISTERED: 99,\n DOMAIN_WITH_PROBLEM: 100,\n};\n\nexport const PROVIDERS_LINKS = [\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_REGISTROBR, page: REGISTROBR_HOMEPAGE, name: 'Registro.br' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_GODADDY, page: GODADDY_HOMEPAGE, name: 'Godaddy' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_LOCAWEB, page: LOCAWEB_HOMEPAGE, name: 'Locaweb' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_UOLHOST, page: UOLHOST_HOMEPAGE, name: 'Uol Host' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_KINGHOST, page: KINGHOST_HOMEPAGE, name: 'Kinghost' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_WEBEMPRESA, page: WEBEMPRESA_HOMEPAGE, name: 'Web Empresa' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_COLOMBIAHOSTING, page: COLOMBIAHOSTING_HOMEPAGE, name: 'Colombia Hosting' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_NEUBOX, page: NEUBOX_HOMEPAGE, name: 'Neubox' },\n { tutorial: SUPPORT_ARTICLE_CHANGE_DNS_OTHERS, name: 'Others' },\n];\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n `}\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const Subtitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const SelectManualDnsLoadingMessageWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.brand.primaryLowLight};\n border-radius: 4px;\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 16px;\n justify-content: center;\n margin: 16px 0px 0px;\n padding: 16px 0px 32px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n height: 100%;\n }\n `}\n`;\n\nexport const SelectManualDnsLoadingMessage = styled.p`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.primaryUltralight};\n border-radius: 4px;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-wrap: wrap;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 16px;\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 28px;\n text-align: center;\n `}\n`;\n","import { IconLoading } from 'gatorcomponents';\nimport * as Styles from './CheckingStatusStep.styles';\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nexport const CheckingStatusStep = ({\n subtitle,\n description,\n}) => (\n \n \n {subtitle}\n \n\n \n \n {description}\n \n\n \n \n);\n\nCheckingStatusStep.propTypes = {\n subtitle: PropTypes.string.isRequired,\n description: PropTypes.string.isRequired,\n};\n\nexport default CheckingStatusStep;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-width: 100%;\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const Subtitle = styled.span`\n ${({ theme, usednsmodal }) => css`\n color: ${usednsmodal ? theme.v2.colors.neutral.lowDark : theme.v2.colors.neutral.lowPure};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${usednsmodal ? theme.v2.font.sizes.xs : theme.v2.font.sizes.xxs};\n gap: 16px;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n\n ${usednsmodal && css`\n max-width: 600px;\n `}\n `}\n`;\n\nexport const Circle = styled.span`\n ${({\n theme, hideOnMobile, displayOnMobile, hideOnDesktop,\n }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.brand.primaryExtraDark};\n border-radius: 100%;\n color: ${theme.v2.colors.white.primary};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.bold};\n height: 10px;\n justify-content: center;\n padding: 10px;\n width: 10px;\n\n ${hideOnMobile && css`\n @media(max-width: ${theme.v2.breakpoints.sm}) {\n display: none;\n }\n `}\n\n ${hideOnDesktop && css`\n @media (min-width: ${theme.v2.breakpoints.sm}) {\n display: none;\n }\n `}\n\n ${displayOnMobile && css`\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n display: inline-flex;\n }\n `}\n `}\n`;\n\nexport const ContentRow = styled.div`\n align-items: flex-start;\n display: flex;\n flex-direction: row;\n gap: 16px;\n justify-content: flex-start;\n max-width: 100%;\n width: 100%;\n`;\n\nexport const ContentColumn = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n gap: 16px;\n justify-content: flex-start;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin-top: 32px;\n }\n `};\n`;\n\nexport const ServersBlocks = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.neutral.highLight};\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 16px;\n `}\n`;\n\nexport const ServerLabel = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const ServerValue = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const MessageWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.brand.primaryUltralight};\n border-radius: 4px;\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 16px;\n justify-content: center;\n margin: 24px 0px 0px;\n padding: 16px 0px 32px;\n `}\n`;\n\nexport const AlertWrapper = styled.div`\n ${({ theme }) => css`\n margin: 16px 0px 0px;\n span {\n color: ${theme.v2.colors.brand.primaryMedium};\n }\n `}\n`;\n\nexport const InpuWrapper = styled.div`\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n gap: 16px;\n justify-content: flex-start;\n margin: 8px 0px 0px;\n max-width: 400px;\n position: relative;\n width: 100%;\n\n > div {\n width: 100% !important;\n }\n`;\n\nexport const HelpCenterWrapper = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 16px 0px 0px;\n `}\n`;\n\nexport const InputLabel = styled.label`\n ${({ theme, usednsmodal }) => css`\n color: ${usednsmodal ? theme.v2.colors.neutral.lowMedium : theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const GoToLinkWrapper = styled.div`\n margin: 8px 0px 0px;\n`;\n\nexport const ActionsRow = styled.div`\n ${({ theme, usednsmodalv2 }) => css`\n align-items: center;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 8px;\n justify-content: flex-end;\n margin: ${usednsmodalv2 ? '75px 0px 0px' : '32px 0px 0px'};\n width: 100%;\n\n ${usednsmodalv2 && css`\n align-self: flex-end;\n justify-content: center;\n\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n align-items: unset;\n flex-direction: column-reverse;\n justify-content: unset;\n margin: 24px 0px 0px;\n min-width: 100%;\n\n > span {\n display: flex;\n align-items: unset;\n justify-content: unset;\n min-width: 100%;\n\n button {\n min-width: 100%;\n }\n }\n }\n `}\n `}\n`;\n","import React from 'react';\nimport {\n Alert, Button, IconArrow, IconLoading, SelectField,\n Tooltip,\n} from 'gatorcomponents';\nimport * as Styles from './DomainOriginalDestinationStep.styles';\nimport PropTypes from 'prop-types';\n\nexport const DomainOriginalDestinationStep = ({\n subtitle,\n alertDescription,\n domain,\n inputLabel,\n optionsList,\n selectedManualDns,\n setSelectedManualDns,\n backLabel,\n continueLabel,\n onHowToSetupClick,\n onCancelClick,\n selectPlaceholder,\n loading,\n useDnsModalV2,\n disabledNextStepToolTip,\n}) => {\n const isOther = ['Outros', 'Otros'].includes(selectedManualDns);\n const handleGoNext = () => {\n onHowToSetupClick && onHowToSetupClick();\n };\n\n const handleCancel = () => {\n onCancelClick && onCancelClick();\n };\n\n return (\n \n \n \n \n 1 \n {subtitle}\n \n\n {!useDnsModalV2 && (\n \n \n )}\n\n \n {!useDnsModalV2 && (\n \n {inputLabel}\n \n )}\n setSelectedManualDns(label)}\n />\n \n\n \n \n \n \n\n \n \n );\n};\n\nDomainOriginalDestinationStep.propTypes = {\n subtitle: PropTypes.string.isRequired,\n alertDescription: PropTypes.func.isRequired,\n domain: PropTypes.string.isRequired,\n inputLabel: PropTypes.string.isRequired,\n optionsList: PropTypes.arrayOf(PropTypes.shape({\n label: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n })).isRequired,\n selectedManualDns: PropTypes.string,\n setSelectedManualDns: PropTypes.func.isRequired,\n backLabel: PropTypes.string.isRequired,\n continueLabel: PropTypes.string.isRequired,\n onHowToSetupClick: PropTypes.func.isRequired,\n selectPlaceholder: PropTypes.string.isRequired,\n useDnsModalV2: PropTypes.bool,\n disabledNextStepToolTip: PropTypes.string,\n onCancelClick: PropTypes.func,\n loading: PropTypes.bool,\n};\nexport default DomainOriginalDestinationStep;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: 24px;\n justify-content: center;\n`;\n\n\nexport const Subtitle = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n display: flex;\n gap: 8px;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n max-width: 600px;\n `}\n`;\n\nexport const AlertWrapper = styled.div`\n > div {\n align-items: center;\n padding: 0px;\n }\n`;\n\nexport const HelpCenterWrapper = styled.span`\n ${({ theme, useDnsModalV2 }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin: ${!useDnsModalV2 && '16px 0px 0px'};\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const Circle = styled.span`\n ${({\n theme, hideOnMobile, displayOnMobile, hideOnDesktop,\n }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.brand.primaryExtraDark};\n border-radius: 100%;\n color: ${theme.v2.colors.white.primary};\n display: inline-flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.bold};\n height: 10px;\n justify-content: center;\n padding: 10px;\n width: 10px;\n\n ${hideOnMobile && css`\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n display: none;\n }\n `}\n\n ${hideOnDesktop && css`\n @media (min-width: ${theme.v2.breakpoints.sm}) {\n display: none;\n }\n `}\n\n ${displayOnMobile && css`\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n display: inline-flex;\n }\n `}\n `}\n`;\n\nexport const ContentRow = styled.div`\n ${({ theme, useDnsModalV2 }) => css`\n align-items: flex-start;\n display: flex;\n flex-direction: row;\n gap: 16px;\n justify-content: flex-start;\n max-width: 100%;\n padding: 20px;\n width: 100%;\n\n ${useDnsModalV2 && css`\n border-radius: 8px;\n background: ${theme.v2.colors.brand.primaryUltraLight};\n `}\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin-top: 16px;\n }\n `};\n`;\n\nexport const ContentColumn = styled.div`\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n gap: 32px;\n justify-content: flex-start;\n`;\n\n\nexport const HowToBackground = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.brand.primaryLowLight};\n border-radius: 4px;\n display: flex;\n flex-direction: column;\n margin: 0px;\n padding: 32px;\n `}\n`;\n\nexport const HowToTitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.primaryExtraDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const Steps = styled.ol`\n ${() => css`\n display: flex;\n flex-direction: column;\n gap: 24px;\n margin: 16px 0px;\n padding: 0px;\n counter-reset: item;\n list-style: none;\n `}\n`;\n\nexport const StepItem = styled.li`\n ${({ theme }) => css`\n align-items: flex-start;\n counter-increment: item;\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n gap: 16px;\n justify-content: flex-start;\n max-width: calc(484px + 26px + 24px);\n\n &:before {\n align-items: center;\n background: ${theme.v2.colors.brand.primaryExtraDark};\n blex-basis: 24px;\n border-radius: 100%;\n color: ${theme.v2.colors.neutral.highPure};\n content: counter(item);\n display: flex;\n flex-shrink: 0;\n font-weight: ${theme.v2.font.weights.bold};\n height: 24px;\n justify-content: center;\n width: 24px;\n }\n `}\n`;\n\nexport const StepContainer = styled.div`\n display: flex;\n flex-direction: column;\n gap: 16px;\n`;\n\nexport const StepDescription = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.list};\n margin: 0px;\n `}\n`;\n\nexport const StepAlertWrapper = styled.div`\n display: flex;\n\n > div {\n padding: 0px;\n }\n`;\n\nexport const StepDnsBox = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.brand.primaryUltraLight};\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n padding: 16px;\n `}\n`;\n\nexport const StepDnsBoxRow = styled.div`\n display: flex;\n flex-direction: row;\n gap: 8px;\n`;\n\nexport const StepDnsRow = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.neutral.highPure};\n border-radius: 8px;\n display: flex;\n flex-direction: row;\n gap: 8px;\n padding: 16px;\n width: fit-content;\n `}\n`;\n\nexport const StepLabel = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.list};\n `}\n`;\n\nexport const StepValue = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.list};\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n display: block;\n padding: 0px 0px 0px 40px;\n`;\n\nexport const ActionsRow = styled.div`\n ${({ theme, usednsmodalv2 }) => css`\n align-items: center;\n align-self: flex-end;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 8px;\n justify-content: ${usednsmodalv2 ? 'center' : 'flex-end'};\n margin: ${!usednsmodalv2 && '32px 0px 0px'};\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding: 0px 20px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n align-items: unset;\n flex-direction: column-reverse;\n justify-content: unset;\n margin: ${!usednsmodalv2 && '24px 0px 0px'};\n min-width: 100%;\n\n > span {\n display: flex;\n align-items: unset;\n justify-content: unset;\n min-width: 100%;\n\n button {\n min-width: 100%;\n }\n }\n }\n `}\n`;\n\nexport const DnsContentRow = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n display: flex;\n flex-direction: row;\n flex-grow:1;\n gap: 16px;\n min-width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n flex-direction: column;\n min-width: auto;\n }\n `};\n`;\n\nexport const ChevronWrapper = styled.div`\n ${({ theme }) => css`\n align-self: center;\n display: flex;\n margin-top: 16px;\n justify-content: center;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n height: auto;\n margin-top: 0;\n width: 100%;\n }\n `};\n`;\n\nexport const DnsContentColumn = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n gap: 16px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n width: 100%;\n }\n `};\n`;\n\nexport const OriginalDnsContainer = styled.div`\n ${({ theme }) => css`\n background: ${theme.v2.colors.neutral.highLight};\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n height: 128px;\n justify-content: center;\n padding: 16px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n gap: 8px;\n height: auto;\n width: 100%;\n }\n `}\n`;\n\nexport const OriginalDnsLabel = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n display: ruby;\n font-weight: ${theme.v2.font.weights.regular};\n `};\n`;\n\nexport const OriginalDnsText = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0;\n `};\n`;\n\nexport const CheckboxLabel = styled.div`\n ${({ theme }) => css`\n cursor: pointer;\n display: flex;\n gap: 8px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n margin: 0px 20px;\n }\n `};\n`;\n","import React, { useState } from 'react';\nimport * as Styles from './HowToSetupStep.styles';\nimport {\n Alert, Button,\n IconArrow,\n IconButton,\n CopySnippet,\n IconChevron,\n Checkbox,\n} from 'gatorcomponents';\nimport PropTypes from 'prop-types';\nimport { PROVIDERS_LINKS } from '../../useDnsModal.types';\nimport { copyTextToClipboard } from '@/utils/Application/copyTextToClipboard';\nimport { useResize } from '@/hooks/useResize';\n\nexport const HowToSetupStep = ({\n useDnsModalV2,\n howToSectionTitle,\n showCopyNotification,\n selectedManualDns,\n onClickBack,\n onHowToSetupClick,\n serverLabel,\n goTo,\n continueLabel,\n backLabel,\n originalDnsLabel,\n newDnsLabel,\n domainHasConfiguredLabel,\n configureDomainText,\n configureDomainButton,\n steps = [\n {\n id: 'firstStep',\n description: 'Acesse o site do provedor onde seu domínio está registrado',\n },\n {\n id: 'secondStep',\n description: 'Localize os nomes de servidores (DNS) atuais no site da Godaddy',\n },\n {\n id: 'thirdStep',\n description: 'Substitua o nomes de servidores (DNS) que está no site da Godaddy pelo da CloudFlare. Basta copiar e colar os valores abaixo:',\n alert: 'Ao continuar suas configurações atuais do domínio serão alteradas',\n },\n ],\n cloudflareDns = {\n ns1: '',\n ns2: '',\n },\n originalDns = {\n ns1: '',\n ns2: '',\n },\n subtitle,\n helpLink,\n}) => {\n const [domainHasConfigured, setDomainHasConfigured] = useState(false);\n\n const windowRect = useResize();\n const { width } = windowRect;\n const mobile = width < 960;\n\n const isOther = ['Outros', 'Otros'].includes(selectedManualDns);\n\n const handleGoNext = () => {\n onHowToSetupClick && onHowToSetupClick();\n };\n\n const handleSetDomainConfigured = () => {\n setDomainHasConfigured(!domainHasConfigured);\n };\n\n const handleGoBack = () => {\n onClickBack && onClickBack();\n };\n\n const handleOpenLink = ({ label }) => {\n const url = PROVIDERS_LINKS.find(provider => provider.name === label).page;\n window.open(url, '_blank');\n };\n\n const handleCopy = (text) => {\n copyTextToClipboard(text);\n showCopyNotification();\n };\n\n return (\n \n \n \n {useDnsModalV2 && (\n <>\n \n 2 \n {subtitle}\n \n\n \n {originalDns.ns1 && originalDns.ns2 && (\n \n {originalDnsLabel}\n \n \n {serverLabel(0)}\n \n {originalDns.ns1}\n \n \n \n {serverLabel(1)}\n \n {originalDns.ns2}\n \n \n \n \n )}\n\n \n \n\n \n {newDnsLabel}\n \n \n\n {!isOther && (\n <>\n \n {configureDomainText}\n \n\n handleOpenLink({ label: selectedManualDns })}\n variant=\"secondary\"\n size=\"large\"\n />\n \n )}\n\n \n {helpLink}\n \n \n )}\n\n {!useDnsModalV2 && (\n \n \n {howToSectionTitle}\n \n\n \n {steps.map((step, index) => (\n \n \n \n {step.description}\n \n\n {index === 2 && (\n \n \n )}\n\n {index === 1 && (\n \n \n \n {serverLabel(0)}\n \n \n {cloudflareDns && cloudflareDns.ns1}\n \n \n\n \n \n {serverLabel(1)}\n \n \n {cloudflareDns && cloudflareDns.ns2}\n \n \n \n )}\n\n {index === 2 && (\n <>\n \n \n {serverLabel(0)}\n \n \n {cloudflareDns.ns1}\n \n\n handleCopy(cloudflareDns.ns1)}\n icon=\"IconCopy\"\n />\n \n\n \n \n {serverLabel(1)}\n \n \n {cloudflareDns.ns2}\n \n\n handleCopy(cloudflareDns.ns2)}\n icon=\"IconCopy\"\n />\n \n \n )}\n \n \n ))}\n \n\n \n handleOpenLink({ label: selectedManualDns })}\n testId=\"goToLinkButton\"\n />\n \n \n )}\n \n \n\n \n {domainHasConfiguredLabel} \n \n\n \n \n \n );\n};\n\nHowToSetupStep.propTypes = {\n howToSectionTitle: PropTypes.string,\n showCopyNotification: PropTypes.func,\n selectedManualDns: PropTypes.string,\n onClickBack: PropTypes.func,\n onHowToSetupClick: PropTypes.func,\n serverLabel: PropTypes.func,\n goTo: PropTypes.func,\n continueLabel: PropTypes.string,\n backLabel: PropTypes.string,\n domainHasConfiguredLabel: PropTypes.string,\n originalDnsLabel: PropTypes.string,\n newDnsLabel: PropTypes.string,\n configureDomainText: PropTypes.string,\n configureDomainButton: PropTypes.string,\n steps: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.string,\n description: PropTypes.string,\n alert: PropTypes.string,\n })),\n cloudflareDns: PropTypes.shape({\n ns1: PropTypes.string,\n ns2: PropTypes.string,\n }),\n originalDns: PropTypes.shape({\n ns1: PropTypes.string,\n ns2: PropTypes.string,\n }),\n subtitle: PropTypes.string,\n helpLink: PropTypes.node,\n useDnsModalV2: PropTypes.bool,\n};\n\nexport default HowToSetupStep;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n `}\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.brand.primaryExtraDark};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.medium};\n gap: 12px;\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const Subtitle = styled.p`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowMedium};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 8px 0px 0px;\n `}\n`;\n\nexport const Box = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.brand.primaryLowLight};\n display: flex;\n flex-direction: column;\n gap: 20px;\n justify-content: center;\n margin: 24px 0px 0px;\n padding: 16px 16px 32px;\n `}\n`;\n\nexport const BoxTitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const BoxDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const AlertWrapper = styled.div`\n max-width: 585px;\n\n > div {\n padding: 0px;\n }\n`;\n\nexport const ButtonsWrapper = styled.div`\n align-items: center;\n display: flex;\n gap: 16px;\n justify-content: center;\n margin: 24px 0px 0px;\n`;\n","import React from 'react';\nimport * as Styles from './FinishDomainSetupStep.styles';\nimport {\n Alert,\n Button,\n IconPreferences,\n} from 'gatorcomponents';\nimport PropTypes from 'prop-types';\n\nexport const FinishDomainSetupStep = ({\n title,\n subtitle,\n box,\n from = 'Godaddy',\n onGoBack,\n onClose,\n finishLabel,\n backLabel,\n}) => {\n const isOther = ['Outros', 'Otros'].includes(from);\n\n const handleBack = () => {\n onGoBack && onGoBack();\n };\n\n const handleClose = () => {\n onClose && onClose();\n };\n\n return (\n \n \n \n\n \n {subtitle}\n \n\n \n \n {box.title}\n \n\n \n {box.description({ from: isOther ? null : from })}\n \n\n \n \n\n\n \n\n \n \n \n );\n};\nFinishDomainSetupStep.propTypes = {\n title: PropTypes.string,\n subtitle: PropTypes.string,\n box: PropTypes.shape({\n title: PropTypes.string,\n description: PropTypes.func,\n alert: PropTypes.string,\n }),\n from: PropTypes.string,\n onGoBack: PropTypes.func,\n onClose: PropTypes.func,\n finishLabel: PropTypes.string,\n backLabel: PropTypes.string,\n};\n\nexport default FinishDomainSetupStep;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme, usednsmodalv2 }) => css`\n\n ${usednsmodalv2\n ? css`\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n `\n : css`\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n `\n}\n `}\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.brand.primaryExtraDark};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.medium};\n gap: 12px;\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n text-align: center;\n }\n `}\n`;\n\nexport const Subtitle = styled.p`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px 0px 0px;\n text-align: center;\n width: 540px;\n `}\n`;\n\nexport const ButtonsWrapper = styled.div`\n align-items: center;\n display: flex;\n gap: 16px;\n justify-content: center;\n margin: 40px 0px 0px;\n`;\n","import React from 'react';\nimport * as Styles from './DomainNotRegistered.styles';\nimport {\n Button,\n IconPreferences,\n} from 'gatorcomponents';\nimport PropTypes from 'prop-types';\n\nexport const DomainNotRegistered = ({\n title = 'title',\n description = 'description',\n redirectLabel = 'redirectLabel',\n goTo,\n useDnsModalV2,\n}) => {\n const handleRedirect = () => {\n goTo && goTo();\n };\n\n return (\n \n \n \n\n \n {description}\n \n\n\n \n \n \n );\n};\n\nDomainNotRegistered.propTypes = {\n title: PropTypes.string,\n description: PropTypes.string,\n redirectLabel: PropTypes.string,\n goTo: PropTypes.func,\n};\n\nexport default DomainNotRegistered;\n","import styled, { css } from 'styled-components';\n\nexport const ModalWrapper = styled.div`\n padding: 32px;\n`;\n\nexport const ModalTitle = styled.span`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 16px;\n justify-content: flex-start;\n\n svg {\n flex: 0 0 24px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 0px 20px;\n align-items: flex-start;\n gap: 8px;\n svg {\n margin-top: 4px;\n }\n }\n `}\n`;\n\nexport const ModalSubtitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 4px 0px 0px 0px;\n `}\n`;\n\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin: 100px 0px 0px;\n }\n `}\n`;\n\nexport const Title = styled.h4`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryExtraDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px 0px 0px;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 8px 0px 0px;\n max-width: 454px;\n text-align: center;\n `}\n`;\n\nexport const ActionsRow = styled.div`\n align-items: center;\n display: flex;\n gap: 24px;\n justify-content: center;\n margin: 32px 0px 0px;\n`;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.brand.primaryExtraDark};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.medium};\n gap: 16px;\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n max-width: 622px;\n text-align: center;\n `}\n`;\n\nexport const Subtitle = styled.p`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px 0px 0px;\n max-width: 622px;\n text-align: center;\n `}\n`;\n\nexport const Box = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.brand.primaryLowLight};\n display: flex;\n flex-direction: column;\n gap: 20px;\n justify-content: center;\n margin: 24px 0px 0px;\n padding: 16px 16px 32px;\n `}\n`;\n\nexport const BoxTitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const BoxDescription = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryExtraDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const AlertWrapper = styled.div`\n max-width: 585px;\n\n > div {\n padding: 0px;\n }\n`;\n\nexport const ButtonsWrapper = styled.div`\n align-items: center;\n display: flex;\n gap: 16px;\n justify-content: center;\n margin: 40px 0px 39px;\n`;\n","import React from 'react';\nimport * as Styles from './DisclaimerExternalDomain.styles';\nimport {\n Button,\n IconAtencion,\n IconLoading,\n} from 'gatorcomponents';\nimport PropTypes from 'prop-types';\nimport { useResize } from '@/hooks/useResize';\n\nexport const DisclaimerExternalDomain = ({\n title,\n subtitle,\n onClickCta,\n cta,\n loading,\n}) => {\n const { width } = useResize();\n const isMobile = width <= 600;\n\n const handleCta = () => {\n onClickCta && onClickCta();\n };\n\n return (\n \n \n \n\n \n {subtitle}\n \n\n \n \n \n );\n};\nDisclaimerExternalDomain.propTypes = {\n title: PropTypes.string.isRequired,\n subtitle: PropTypes.string.isRequired,\n onClickCta: PropTypes.func.isRequired,\n cta: PropTypes.string.isRequired,\n loading: PropTypes.bool,\n};\n\nexport default DisclaimerExternalDomain;\n","import React, {\n useCallback, useState,\n useEffect,\n} from 'react';\nimport { SELECT_MODAL_STEPS, optionsList } from './useDnsModal.types';\nimport useLocale from '@/hooks/useLocale';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { sitesActions } from '@/redux/modules/sites';\nimport { CheckingStatusStep } from './components/CheckingStatusStep';\nimport { DomainOriginalDestinationStep } from './components/DomainOriginalDestinationStep';\nimport { HowToSetupStep } from './components/HowToSetupStep';\nimport { FinishDomainSetupStep } from './components/FinishDomainSetupStep';\nimport { commonActions } from '@/redux/modules';\nimport {\n Button, IconAtencion, IconIlustratedGlobal, Modal,\n} from 'gatorcomponents';\nimport { CART_URL } from '@/config';\nimport { DomainNotRegistered } from './components/DomainNotRegistered';\nimport * as Styles from './useDnsModal.styles';\nimport { CHARLIE_EXTERNAL_DOMAIN_V2 } from '@/config/GrowthBook/constants';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { DisclaimerExternalDomain } from './components/DisclaimerExternalDomain';\nimport { useResize } from '@/hooks/useResize';\n\nexport const UseDnsModal = ({\n initialStep = SELECT_MODAL_STEPS.CHECKING_STATUS,\n onClose,\n domain = 'domainSample.com',\n handleActivateDomain,\n displayActivateErrorModal,\n cloudflare,\n sites,\n clearCloudFlareLastActivation,\n}) => {\n const failedActivation = cloudflare.lastActivation.status === 'failure';\n const domainWithProblem = failedActivation && cloudflare.lastActivation.message === 'frozen domain';\n const { useDnsModal: useDnsModalLocale } = useLocale();\n const { manualSelectDns: manualSelectDnsLocale } = useDnsModalLocale;\n\n const dispatch = useDispatch();\n const useDnsModalV2 = useFeatureIsOn(CHARLIE_EXTERNAL_DOMAIN_V2);\n const { loading: sitesLoading, domainDns } = useSelector(state => state.sites);\n const [selectManualDnsStep, setSelectManualDnsStep] = useState(initialStep);\n const [selectedManualDns, setSelectedManualDns] = useState(null);\n const [canProceed, setCanProceed] = useState(false);\n\n const windowRect = useResize();\n const { width } = windowRect;\n const mobile = width < 600;\n\n const onDomainNotRegistered = () => {\n setSelectManualDnsStep(SELECT_MODAL_STEPS.DOMAIN_NOT_REGISTERED);\n };\n\n const requestDomainDnsFromWhoIs = useCallback((domain) => {\n dispatch(sitesActions.domainDns.request(domain, onDomainNotRegistered));\n }, [dispatch]);\n\n const requestPlanDns = useCallback(planId => dispatch(sitesActions.planDns.request(planId)), [dispatch]);\n\n const setSelectManualDnsNextStep = useCallback(({ nextStep }) => {\n if (nextStep) {\n setSelectManualDnsStep(nextStep);\n }\n\n if (!nextStep) {\n setSelectManualDnsStep(+1);\n }\n }, []);\n\n const handleCloudflareLoaded = useCallback(() => {\n const getDnsSuccess = sites.loadingRedirect === false && sites.redirectStatus === 'success';\n\n if (cloudflare.lastActivation.cloudflare_ns1 && getDnsSuccess && selectedManualDns && canProceed) {\n setSelectManualDnsNextStep({ nextStep: SELECT_MODAL_STEPS.HOW_TO_SETUP });\n }\n }, [cloudflare, setSelectManualDnsNextStep, sites.loadingRedirect, sites.redirectStatus, selectedManualDns, canProceed]);\n\n useEffect(() => {\n handleCloudflareLoaded();\n }, [handleCloudflareLoaded]);\n\n const handleClose = useCallback(() => {\n onClose && onClose();\n setSelectManualDnsStep(SELECT_MODAL_STEPS.CHECKING_STATUS);\n setSelectedManualDns(null);\n setCanProceed(false);\n\n if (cloudflare.lastActivation.requestStatus === 'success' || cloudflare.lastActivation.status === 'success') {\n clearCloudFlareLastActivation && clearCloudFlareLastActivation();\n }\n }, [\n onClose,\n clearCloudFlareLastActivation,\n cloudflare.lastActivation.requestStatus,\n cloudflare.lastActivation.status,\n ]);\n\n const showCopyNotification = useCallback(() => {\n dispatch(commonActions.notifications.set({\n label: (\n \n Texto copiado com sucesso!\n
\n ),\n type: 'success',\n }));\n }, [dispatch]);\n\n const getCheckingStatusStepProps = useCallback(() => ({\n title: manualSelectDnsLocale.step.checkStatus.title,\n subtitle: manualSelectDnsLocale.step.checkStatus.subtitle,\n description: manualSelectDnsLocale.step.checkStatus.description,\n }), [manualSelectDnsLocale]);\n\n const handleDisplayActivateErrorModal = useCallback(() => {\n if (cloudflare.lastActivation && cloudflare.lastActivation.status === 'failure') {\n displayActivateErrorModal(cloudflare.lastActivation);\n setSelectManualDnsStep(SELECT_MODAL_STEPS.CHECKING_STATUS);\n setSelectedManualDns(null);\n onClose();\n }\n }, [cloudflare.lastActivation, onClose, displayActivateErrorModal]);\n\n useEffect(() => {\n handleDisplayActivateErrorModal();\n }, [handleDisplayActivateErrorModal]);\n\n const getDomainOriginalDestinationStepProps = useCallback(({ domain }) => {\n const handleContinue = () => {\n handleActivateDomain();\n setCanProceed(true);\n };\n\n return (\n {\n useDnsModalV2,\n subtitle: useDnsModalV2 ? manualSelectDnsLocale.step.domainOriginalRegistrationV2.subtitle : manualSelectDnsLocale.step.domainOriginalRegistration.subtitle,\n alertDescription: manualSelectDnsLocale.step.domainOriginalRegistration.alertDescription,\n domain,\n inputLabel: useDnsModalV2 ? manualSelectDnsLocale.step.domainOriginalRegistrationV2.inputLabel : manualSelectDnsLocale.step.domainOriginalRegistration.inputLabel,\n optionsList,\n selectedManualDns,\n setSelectedManualDns,\n backLabel: manualSelectDnsLocale.backLabel,\n continueLabel: manualSelectDnsLocale.continueLabel,\n onHowToSetupClick: handleContinue,\n onCancelClick: handleClose,\n selectPlaceholder: useDnsModalV2 ? manualSelectDnsLocale.step.domainOriginalRegistrationV2.selectPlaceholder : manualSelectDnsLocale.step.domainOriginalRegistration.selectPlaceholder,\n loading: cloudflare.loadingActivation,\n disabledNextStepToolTip: manualSelectDnsLocale.step.domainOriginalRegistrationV2.disabledNextStepToolTip,\n }\n );\n }, [\n manualSelectDnsLocale,\n selectedManualDns,\n handleClose,\n handleActivateDomain,\n cloudflare,\n useDnsModalV2,\n ]);\n\n const getDisclaimerExternalDomainProps = useCallback(({ domain }) => ({\n title: manualSelectDnsLocale.step.disclaimerExternalDomain.title,\n subtitle: manualSelectDnsLocale.step.disclaimerExternalDomain.subtitle({ domain }),\n onClickCta: () => requestDomainDnsFromWhoIs(domain),\n cta: manualSelectDnsLocale.step.disclaimerExternalDomain.cta,\n loading: sites.loading,\n }), [\n manualSelectDnsLocale,\n requestDomainDnsFromWhoIs,\n sites.loading,\n ]);\n\n const getHowToSetupProps = useCallback(() => ({\n useDnsModalV2,\n subtitle: manualSelectDnsLocale.step.howToSetupV2.subtitle,\n howToSectionTitle: manualSelectDnsLocale.step.howToSetup.howToSectionTitle,\n selectedManualDns,\n showCopyNotification,\n onClickBack: () => setSelectManualDnsNextStep({ nextStep: SELECT_MODAL_STEPS.GET_DOMAIN_ORIGINAL_REGISTRATION }),\n onHowToSetupClick: () => setSelectManualDnsNextStep({ nextStep: SELECT_MODAL_STEPS.FINISH_SETUP_STEP }),\n serverLabel: index => manualSelectDnsLocale.step.howToSetupV2.serverLabel(index),\n goTo: selectedManualDns => manualSelectDnsLocale.step.howToSetup.goTo(selectedManualDns),\n continueLabel: useDnsModalV2 ? manualSelectDnsLocale.continueLabel : manualSelectDnsLocale.step.howToSetup.alreadyMadeChanges,\n originalDnsLabel: manualSelectDnsLocale.step.howToSetupV2.originalDnsLabel,\n newDnsLabel: manualSelectDnsLocale.step.howToSetupV2.newDnsLabel,\n configureDomainText: manualSelectDnsLocale.step.howToSetupV2.configureDomainText,\n configureDomainButton: manualSelectDnsLocale.step.howToSetupV2.configureDomainButton,\n domainHasConfiguredLabel: manualSelectDnsLocale.step.howToSetupV2.domainHasConfiguredLabel,\n backLabel: manualSelectDnsLocale.backLabel,\n steps: manualSelectDnsLocale.step.howToSetup.steps({ from: selectedManualDns }),\n domainDns: {\n ns1: domainDns ? domainDns[0] : null,\n ns2: domainDns ? domainDns[1] : null,\n },\n cloudflareDns: {\n ns1: cloudflare.lastActivation.cloudflare_ns1,\n ns2: cloudflare.lastActivation.cloudflare_ns2,\n },\n originalDns: {\n ns1: cloudflare.lastActivation.original_ns1,\n ns2: cloudflare.lastActivation.original_ns2,\n },\n helpLink: manualSelectDnsLocale.helpLink,\n }), [\n manualSelectDnsLocale,\n domainDns,\n selectedManualDns,\n showCopyNotification,\n setSelectManualDnsNextStep,\n cloudflare,\n useDnsModalV2,\n ]);\n\n const getDomainNotRegistered = useCallback(({ domain }) => {\n const newDomain = domain.split('.');\n const goTo = () => {\n window.open(`${CART_URL}?pid=d&sld=${newDomain[0]}&tld=.${newDomain[1]}`, '_blank');\n };\n\n return {\n title: manualSelectDnsLocale.step.domainNotRegistered.title(domain),\n description: manualSelectDnsLocale.step.domainNotRegistered.description,\n redirectLabel: manualSelectDnsLocale.step.domainNotRegistered.redirectLabel,\n goTo,\n useDnsModalV2,\n };\n }, [\n manualSelectDnsLocale,\n useDnsModalV2,\n ]);\n\n const getFinishDomainSetupStep = useCallback(() => {\n const onGoBack = () => {\n setSelectManualDnsNextStep({ nextStep: SELECT_MODAL_STEPS.HOW_TO_SETUP });\n setCanProceed(false);\n };\n\n return {\n title: useDnsModalV2 ? manualSelectDnsLocale.step.finishDomainSetupV2.title : manualSelectDnsLocale.step.finishDomainSetup.title,\n subtitle: useDnsModalV2 ? manualSelectDnsLocale.step.finishDomainSetupV2.subtitle : manualSelectDnsLocale.step.finishDomainSetup.subtitle,\n box: useDnsModalV2 ? manualSelectDnsLocale.step.finishDomainSetupV2.box : manualSelectDnsLocale.step.finishDomainSetup.box,\n howToSectionTitle: useDnsModalV2 ? manualSelectDnsLocale.step.finishDomainSetupV2.howToSectionTitle : manualSelectDnsLocale.step.finishDomainSetup.howToSectionTitle,\n onGoBack,\n onClose: handleClose,\n from: selectedManualDns,\n finishLabel: manualSelectDnsLocale.finishLabel,\n backLabel: manualSelectDnsLocale.backLabel,\n };\n }, [\n handleClose,\n manualSelectDnsLocale,\n selectedManualDns,\n setSelectManualDnsNextStep,\n useDnsModalV2,\n ]);\n\n const domainWithProblemContent = () => (\n \n \n {manualSelectDnsLocale.step.activationError.domainWithProblemTitle}\n \n\n \n {manualSelectDnsLocale.step.activationError.domainWithProblemDescription}\n \n\n \n \n \n );\n\n const selectManualDnsModal = () => {\n const steps = {\n [SELECT_MODAL_STEPS.CHECKING_STATUS]: (\n useDnsModalV2\n ? (\n \n \n \n \n \n \n ) : manualSelectDnsLocale.step.domainOriginalRegistration.title}\n >\n\n \n \n \n \n ) : manualSelectDnsLocale.step.howToSetup.title}\n >\n\n \n \n \n {domainWithProblemContent()}\n \n ),\n };\n\n if (domainWithProblem) {\n return steps[SELECT_MODAL_STEPS.DOMAIN_WITH_PROBLEM];\n }\n\n return steps[selectManualDnsStep];\n };\n\n const useDnsModalData = {\n selectManualDnsModal,\n requestDomainDnsFromWhoIs,\n sitesLoading,\n selectManualDnsStep,\n setSelectManualDnsStep,\n setSelectManualDnsNextStep,\n requestPlanDns,\n domainDns,\n };\n\n return useDnsModalData;\n};\n\nexport default UseDnsModal;\n","import React, {\n useCallback, useEffect, useRef, useState,\n} from 'react';\nimport * as Styles from './CloudFlareHandler.styles';\nimport { useHistory, useParams } from 'react-router';\nimport useLocale from '@/hooks/useLocale';\nimport CloudFlareHeader from './components/CloudFlareHeader';\nimport DomainItem from './components/DomainItem';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { faqActions, sitesActions } from '@/redux/modules';\nimport {\n Button, Icon404File, IconLoading, IconSearchFail,\n Skeleton,\n} from 'gatorcomponents';\nimport { cloudflareActions } from '@/redux/modules/cloudflare';\nimport { ChangePlanModal } from './components/ChangePlanModal';\nimport { WhatIsCdnModal } from './components/WhatIsCdnModal';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport {\n CHARLIE_EXTERNAL_DOMAIN_V2,\n} from '@/config/GrowthBook/constants';\nimport { SUPPORT_DOMAINS_URL } from '@/config/urls/domainsUrls';\nimport FaqDefault from '@/components/FrequentlyQuestions/FaqDefault';\nimport { ORIGIN, STATUS } from './CloudFlareHandler.types';\nimport { getCookie, setCookie } from '@/utils/Application/cookies';\nimport ActivateDeactivateInternalDomainModal from './components/ActivateDeactivateInternalDomainModal';\nimport UseDnsModal from '@/hooks/dns/useDnsModal/';\nimport { SELECT_MODAL_STEPS } from '@/hooks/dns/useDnsModal/useDnsModal.types';\n\nlet filterTimeout = null;\nexport const CloudFlareHandler = () => {\n const { sites, cloudflare } = useSelector(state => state);\n const { list: listItems } = cloudflare;\n const { hostingId } = useParams();\n const dispatch = useDispatch();\n const { cloudflare: cloudflareLocale, routes: routesLocale } = useLocale();\n const [inputedFilter, setInputedFilter] = useState('');\n const [currentPlan, setCurrentPlan] = useState({ });\n const itemsPerPage = 10;\n const [page, setPage] = useState(1);\n const [changePlanModal, enableChangePlanModal] = useState(false);\n const [changePlanSelectedOption, setChangePlanSelectedOption] = useState(null);\n const faq = useSelector(state => state.newFaq);\n const [filteredItems, setFilteredItems] = useState(listItems);\n const [activateDeactivateInternalDomainModal, setActivateDeactivateInternalDomainModal] = useState({});\n const [activateExternalDomainModal, setActivateExternalDomainModal] = useState({});\n const [whatIsCdnModal, setWhatIsCndModal] = useState(false);\n const isolatedRequestDomainFunctionRef = useRef();\n\n const useDnsModalV2 = useFeatureIsOn(CHARLIE_EXTERNAL_DOMAIN_V2);\n\n const history = useHistory();\n\n const handleInternalDomainWithExternalProviderStatus = useCallback(() => {\n const { current: isolatedRequestDomain } = isolatedRequestDomainFunctionRef;\n\n if (activateDeactivateInternalDomainModal.domain && isolatedRequestDomain) {\n isolatedRequestDomain(activateDeactivateInternalDomainModal.domain);\n setActivateExternalDomainModal(activateDeactivateInternalDomainModal);\n setActivateDeactivateInternalDomainModal({});\n }\n }, [activateDeactivateInternalDomainModal, isolatedRequestDomainFunctionRef]);\n\n const verifyInternalDomainModalStatusChange = useCallback(() => {\n const domainItem = !!listItems.length && listItems.find(item => item.domain === activateExternalDomainModal.domain);\n const domainOriginHasChange = activateExternalDomainModal && domainItem && domainItem.domain_origin !== activateExternalDomainModal.domain_origin;\n\n if (domainOriginHasChange && cloudflare.activateCdnStatus === 'success') {\n setActivateExternalDomainModal(domainItem);\n }\n }, [activateExternalDomainModal, listItems, cloudflare.activateCdnStatus]);\n\n useEffect(() => {\n verifyInternalDomainModalStatusChange();\n }, [verifyInternalDomainModalStatusChange]);\n\n const handleActivateDomain = useCallback(() => {\n let skipRequest = activateExternalDomainModal;\n\n if (!!cloudflare.lastActivation.domain && (cloudflare.lastActivation.domain === skipRequest.domain)) {\n skipRequest = cloudflare.lastActivation;\n }\n\n dispatch(cloudflareActions.cdn.activateCdn({\n hostingId: currentPlan.hosting_id,\n domain: activateDeactivateInternalDomainModal.domain || activateExternalDomainModal.domain,\n domainOrigin: activateDeactivateInternalDomainModal.domain_origin || activateExternalDomainModal.domain_origin,\n skipRequest,\n handleInternalDomainWithExternalProviderStatus,\n }));\n }, [\n activateDeactivateInternalDomainModal.domain,\n activateDeactivateInternalDomainModal.domain_origin,\n currentPlan,\n activateExternalDomainModal,\n dispatch,\n handleInternalDomainWithExternalProviderStatus,\n cloudflare.lastActivation,\n ]);\n\n const clearCloudFlareLastActivation = useCallback(() => {\n dispatch(cloudflareActions.cdn.setActivatedDomain({}));\n }, [dispatch]);\n\n const clearDomainDnsStatus = useCallback(() => {\n dispatch(sitesActions.domainDns.resetStatus());\n }, [dispatch]);\n\n const handleDnsModalClose = () => {\n setActivateExternalDomainModal(false);\n };\n\n const {\n selectManualDnsModal,\n setSelectManualDnsStep,\n domainDns,\n requestDomainDnsFromWhoIs,\n } = UseDnsModal({\n domain: activateExternalDomainModal.domain,\n originalNs1: activateExternalDomainModal.original_ns1,\n originalNs2: activateExternalDomainModal.original_ns2,\n onClose: handleDnsModalClose,\n displayActivateErrorModal: setActivateDeactivateInternalDomainModal,\n handleActivateDomain,\n cloudflare,\n sites,\n clearCloudFlareLastActivation,\n lastActivation: cloudflare.lastActivation,\n });\n\n const executeRequestDomainDnsFromWhoIs = useCallback(() => {\n if (!useDnsModalV2 && requestDomainDnsFromWhoIs) {\n isolatedRequestDomainFunctionRef.current = requestDomainDnsFromWhoIs;\n }\n }, [useDnsModalV2, requestDomainDnsFromWhoIs]);\n\n useEffect(() => {\n executeRequestDomainDnsFromWhoIs();\n }, [executeRequestDomainDnsFromWhoIs]);\n\n const gotDomainDn = useCallback(() => {\n if (domainDns) {\n setSelectManualDnsStep(SELECT_MODAL_STEPS.GET_DOMAIN_ORIGINAL_REGISTRATION);\n }\n }, [domainDns, setSelectManualDnsStep]);\n\n useEffect(() => {\n gotDomainDn();\n }, [gotDomainDn]);\n\n const handleDeactivateDomain = useCallback(() => {\n dispatch(cloudflareActions.cdn.deactivateCdn({\n hostingId: currentPlan.hosting_id,\n domain: activateDeactivateInternalDomainModal.domain,\n domainOrigin: activateDeactivateInternalDomainModal.domain_origin,\n }));\n }, [\n activateDeactivateInternalDomainModal.domain,\n activateDeactivateInternalDomainModal.domain_origin,\n currentPlan,\n dispatch,\n ]);\n\n const requestSites = useCallback(() => {\n dispatch(sitesActions.sites.request());\n dispatch(faqActions.faq.request.faqCloudflare());\n }, [dispatch]);\n\n useEffect(() => {\n requestSites();\n }, [requestSites]);\n\n const filterCards = useCallback(() => {\n let newFilteredItems = listItems;\n\n if (inputedFilter) {\n newFilteredItems = [...listItems].filter(item => item.domain.toLowerCase().includes(inputedFilter.toLowerCase()));\n }\n\n setFilteredItems(newFilteredItems);\n }, [\n inputedFilter,\n listItems,\n ]);\n\n const handleFilter = useCallback(() => {\n clearTimeout(filterTimeout);\n filterTimeout = setTimeout(() => {\n filterCards();\n }, 1000);\n }, [filterCards]);\n\n useEffect(() => {\n handleFilter();\n }, [handleFilter]);\n\n const requestDomainsPerHostingId = useCallback(() => {\n if (currentPlan && currentPlan.hosting_id) {\n dispatch(\n cloudflareActions.domains.domainsRequest({ hostingId: currentPlan.hosting_id }),\n );\n }\n\n if (!hostingId && sites.list.length) {\n const site = sites.list.find(item => item.cloudflare_available && item.status.toLowerCase() === 'active');\n history.push(`${routesLocale.products}${routesLocale.cloudflare}/${site.hosting_id}`);\n }\n }, [\n currentPlan,\n dispatch,\n hostingId,\n sites.list,\n history,\n routesLocale,\n ]);\n\n useEffect(() => {\n requestDomainsPerHostingId();\n }, [requestDomainsPerHostingId]);\n\n const getUrlPlanData = useCallback(() => {\n if (sites.list.length && hostingId) {\n const site = sites.list.find(item => item.hosting_id === Number(hostingId));\n site && setCurrentPlan(site);\n }\n }, [sites, hostingId]);\n\n useEffect(() => {\n getUrlPlanData();\n }, [getUrlPlanData]);\n\n const getCloudFlareHeaderProps = useCallback(() => {\n const handleChangePlan = () => {\n enableChangePlanModal(true);\n };\n\n const verifyRefreshTimeLimit = () => {\n const lastRefresh = Number(getCookie('last-cloudflare-refresh'));\n const currentTimestamp = Date.now();\n\n const timeLimit = 60 * 60 * 1000;\n\n const timeDifferenceInHours = (currentTimestamp - lastRefresh) / timeLimit;\n\n if (!lastRefresh) {\n return true;\n }\n if (timeDifferenceInHours >= 1) {\n return true;\n }\n return false;\n };\n\n const setLastRefreshOnCookie = (timestamp) => {\n setCookie('last-cloudflare-refresh', timestamp);\n };\n\n const hasOpenStatus = listItems.find(item => (\n item.status === STATUS.PENDING_DEACTIVATION\n || item.status === STATUS.PENDING\n || item.status === STATUS.DELAY\n || (item.status === STATUS.NONEXISTENT && item.origin === ORIGIN.EXTERNAL)\n ));\n\n const handleWhatIsCdn = () => {\n setWhatIsCndModal(true);\n };\n\n return ({\n hostingLabel: cloudflareLocale.hostingLabel,\n changeCta: cloudflareLocale.change,\n cloudflareCdnExplanation: cloudflareLocale.cloudflareCdnExplanation({ handleWhatIsCdn }),\n searchPerDomainLabel: cloudflareLocale.searchPerDomain,\n refreshStatusLabel: cloudflareLocale.refreshStatus,\n noOpenStatusLabel: cloudflareLocale.noOpenStatus,\n waitRefreshTimeLimitLabel: cloudflareLocale.waitRefreshTimeLimit,\n cloudflareStatusLoading: cloudflare.loading,\n currentPlan: currentPlan.product_name || '',\n currentDomain: currentPlan.domain || '',\n inputedFilter,\n sites: sites.list.filter(item => item.cloudflare_available && item.status.toLowerCase() === 'active'),\n hasOpenStatus,\n refreshTimeLimitHasEnded: verifyRefreshTimeLimit(),\n handleRefreshStatus: requestDomainsPerHostingId,\n setLastRefreshOnCookie,\n setInputedFilter,\n handleChangePlan,\n });\n }, [\n cloudflareLocale,\n inputedFilter,\n setInputedFilter,\n requestDomainsPerHostingId,\n cloudflare.loading,\n currentPlan,\n listItems,\n sites,\n ]);\n\n const getChangePlanModal = useCallback(() => {\n const handleSetPlan = (plan) => {\n setCurrentPlan(plan);\n history.push(`${routesLocale.products}${routesLocale.cloudflare}/${plan.hosting_id}`);\n };\n\n return {\n sites: sites.list.filter(item => item.cloudflare_available && item.status.toLowerCase() === 'active'),\n onClose: () => enableChangePlanModal(false),\n currentPlan,\n handleSetPlan,\n backCta: cloudflareLocale.changePlanModal.back,\n changePlanSelectedOption,\n setChangePlanSelectedOption,\n continueCta: cloudflareLocale.changePlanModal.continue,\n title: cloudflareLocale.changePlanModal.title,\n searchPlaceholder: cloudflareLocale.changePlanModal.searchPlaceholder,\n };\n }, [\n sites.list,\n changePlanSelectedOption,\n setChangePlanSelectedOption,\n currentPlan,\n cloudflareLocale,\n history,\n routesLocale,\n ]);\n\n const getDomainItemProps = useCallback(({ item }) => {\n let nameServerTooltipContent = null;\n if (item.cloudflare_ns1 && item.cloudflare_ns2) {\n nameServerTooltipContent = cloudflareLocale.nameServerTooltip(item.cloudflare_ns1, item.cloudflare_ns2);\n }\n\n const handleVerifyDomain = () => {\n !useDnsModalV2 && requestDomainDnsFromWhoIs(item.domain);\n setActivateExternalDomainModal(item);\n };\n\n const manageDomainCdn = () => {\n if (item.cloudflare_internal_id) {\n history.push(`${routesLocale.products}${routesLocale.cloudflare}${routesLocale.domaindetail}/${item.cloudflare_internal_id}`);\n }\n };\n\n const handleSetActivateDeactivateInternalDomainModal = () => {\n setActivateDeactivateInternalDomainModal(item);\n };\n\n return {\n domain: item.domain,\n status: item.status,\n origin: item.domain_origin,\n activateCdn: cloudflareLocale.activateCdn,\n manageLabel: cloudflareLocale.manage,\n messageOngoingActivation: cloudflareLocale.ongoingActivation,\n messageOngoingExternalActivation: cloudflareLocale.ongoingExternalActivation,\n messageOngoingDeactivation: cloudflareLocale.ongoingDeactivation,\n messageExternalDomain: cloudflareLocale.externalDomain,\n nameServerTooltipContent,\n statusLabel: {\n nonexistentexternal: cloudflareLocale.status.nonexistentexternal,\n pendinginternal: cloudflareLocale.status.pendinginternal,\n pendingexternal: cloudflareLocale.status.pendingexternal,\n delayinternal: cloudflareLocale.status.delayinternal,\n delayexternal: cloudflareLocale.status.delayexternal,\n pendingdeactivationinternal: cloudflareLocale.status.pendingdeactivationinternal,\n pendingdeactivationexternal: cloudflareLocale.status.pendingdeactivationexternal,\n activationpointingerrorinternal: cloudflareLocale.status.activationpointingerrorinternal,\n activationpointingerrorexternal: cloudflareLocale.status.activationpointingerrorexternal,\n inactivationpointingerrorinternal: cloudflareLocale.status.inactivationpointingerrorinternal,\n inactivationpointingerrorexternal: cloudflareLocale.status.inactivationpointingerrorexternal,\n errorinternal: cloudflareLocale.status.error,\n errorexternal: cloudflareLocale.status.error,\n externalproviderinternal: cloudflareLocale.status.externalproviderinternal,\n },\n pendingTooltip: cloudflareLocale.pendingTooltip,\n cdnAlreadyActive: cloudflareLocale.cdnAlreadyActive,\n onClickToggle: handleSetActivateDeactivateInternalDomainModal,\n onVerifyExternalDomain: handleVerifyDomain,\n manageDomainCdn,\n messageWithActivationError: cloudflareLocale.messageWithActivationError,\n messageWithDeactivationError: cloudflareLocale.messageWithDeactivationError,\n };\n }, [\n cloudflareLocale,\n history,\n routesLocale,\n requestDomainDnsFromWhoIs,\n useDnsModalV2,\n ]);\n\n const getActivateDeactivateInternalDomainModalProps = useCallback(() => {\n const handleCloseModal = () => {\n clearDomainDnsStatus();\n clearCloudFlareLastActivation();\n setActivateDeactivateInternalDomainModal({});\n };\n\n return ({\n onClose: handleCloseModal,\n onContinueActivating: handleActivateDomain,\n onContinueDeactivating: handleDeactivateDomain,\n toActivateTitle: cloudflareLocale.activateDeactivateInternalModal.toActivateTitle,\n toDeactivateTitle: cloudflareLocale.activateDeactivateInternalModal.toDeactivateTitle,\n deactivatingTitle: cloudflareLocale.activateDeactivateInternalModal.deactivatingTitle,\n activatingTitle: cloudflareLocale.activateDeactivateInternalModal.activatingTitle,\n toActivateDescription: cloudflareLocale.activateDeactivateInternalModal.toActivateDescription,\n activatingDescription: cloudflareLocale.activateDeactivateInternalModal.activatingDescription,\n deactivatingDescription: cloudflareLocale.activateDeactivateInternalModal.deactivatingDescription,\n toDeactivateDescription: cloudflareLocale.activateDeactivateInternalModal.toDeactivateDescription,\n cancelCta: cloudflareLocale.activateDeactivateInternalModal.cancelCta,\n confirmationCta: cloudflareLocale.activateDeactivateInternalModal.confirmationCta,\n continueActivationCta: cloudflareLocale.activateDeactivateInternalModal.continueActivationCta,\n continueDeactivationCta: cloudflareLocale.activateDeactivateInternalModal.continueDeactivationCta,\n failedRequestDescription: cloudflareLocale.activateDeactivateInternalModal.failedRequestDescription,\n failedRequestTitle: cloudflareLocale.activateDeactivateInternalModal.failedRequestTitle,\n domainWithProblemTitle: cloudflareLocale.activateDeactivateInternalModal.domainWithProblemTitle,\n domainWithProblemDescription: cloudflareLocale.activateDeactivateInternalModal.domainWithProblemDescription,\n currentStatus: activateDeactivateInternalDomainModal.status,\n origin: activateDeactivateInternalDomainModal.domain_origin,\n domain: activateDeactivateInternalDomainModal.domain,\n loadingActivation: cloudflare.loadingActivation,\n lastActivation: cloudflare.lastActivation,\n });\n }, [\n activateDeactivateInternalDomainModal,\n cloudflare.loadingActivation,\n cloudflareLocale,\n handleActivateDomain,\n cloudflare.lastActivation,\n clearCloudFlareLastActivation,\n handleDeactivateDomain,\n clearDomainDnsStatus,\n ]);\n\n const getWhatIsCndModalProps = useCallback(() => ({\n onClose: () => setWhatIsCndModal(false),\n title: cloudflareLocale.whatIsCdnModal.title,\n description: cloudflareLocale.whatIsCdnModal.description,\n items: cloudflareLocale.whatIsCdnModal.items,\n cta: cloudflareLocale.whatIsCdnModal.cta,\n }), [cloudflareLocale]);\n\n if (\n sites.loadingSites\n || cloudflare.loading\n || (!listItems.length)\n ) {\n return (\n \n \n \n \n\n \n\n \n {Array.from(Array(10).keys()).map(item => (\n \n \n \n \n ))}\n \n \n );\n }\n\n return (\n <>\n {whatIsCdnModal && (\n setWhatIsCndModal(false)}\n />\n )}\n\n {activateExternalDomainModal && activateExternalDomainModal.domain && (\n selectManualDnsModal()\n )}\n\n {changePlanModal && (\n \n \n {!filteredItems.length && (\n \n {cloudflare.domainsError\n ? \n {cloudflare.domainsError\n ? cloudflareLocale.domainsError\n : cloudflareLocale.noDomains}\n \n\n {cloudflare.domainsError && (\n \n \n )}\n \n )}\n\n {filteredItems.slice(0, (itemsPerPage * page)).map(item => (\n \n\n {(filteredItems.length > (itemsPerPage * page)) && (\n \n setPage(page + 1)}\n />\n \n )}\n\n \n \n \n \n );\n};\n\nexport default CloudFlareHandler;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 0 40px 58px 40px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding: 0;\n }\n `}\n`;\n\nexport const ListWrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 16px;\n`;\n\nexport const TabsContainer = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 24px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n border-radius: 0;\n };\n `}\n`;\n\nexport const HeadContainer = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 24px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n border-radius: 0;\n };\n `}\n`;\n\nexport const DomainContainer = styled.div`\n display: flex;\n flex-direction: row;\n gap: 8px;\n\n @media (max-width: ${({ theme }) => theme.v2.breakpoints.sm}) {\n margin: 0;\n };\n`;\n\nexport const Text = styled.p`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.primaryExtraDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0;\n `}\n`;\n\nexport const DomainLabel = styled(Text)`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n `};\n`;\n\nexport const ChangeDomainWrapper = styled.div`\n display: flex;\n flex-direction: row;\n gap: 8px;\n\n @media (max-width: ${({ theme }) => theme.v2.breakpoints.sm}) {\n flex-direction: column;\n };\n`;\n\nexport const PlanName = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.brand.primaryExtraDark};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const FaqRow = styled.div`\n display: flex;\n flex-direction: row;\n margin-top: 68px;\n`;\n\nexport const FooterText = styled(Text)`\n color: ${({ theme }) => theme.v2.colors.neutral.lowLight};\n margin-left: auto;\n\n @media (max-width: ${({ theme }) => theme.v2.breakpoints.md}) {\n display: none;\n }\n`;\n\n\n// Skeleton\n\nexport const SkeletonItem = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n background-color: ${theme.v2.colors.white.primary};\n border-radius: 8px;\n display: flex;\n gap: 24px;\n flex-direction: column;\n justify-content: space-between;\n padding: 24px;\n position: relative;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n flex-wrap: wrap;\n gap: 16px;\n }\n `}\n`;\n\nexport const SkeletonText = styled.div`\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-left: 40px;\n width: calc(100% - 40px);\n`;\n\nexport const SkeletonHeaderColumn = styled.div`\n display: flex;\n flex-direction: column;\n gap: 8px;\n max-width: 609px;\n width: 100%;\n\n & > :first-child {\n margin-bottom: 8px;\n }\n`;\n\nexport const SkeletonButton = styled.div`\n display: flex;\n flex-direction: row;\n gap: 16px;\n max-width: 100%;\n margin-right: 24px;\n position: absolute;\n right: 0;\n\n @media (max-width: ${({ theme }) => theme.v2.breakpoints.sm}) {\n margin-top: 16px;\n position: relative;\n };\n`;\n","import styled, { css } from 'styled-components';\n\nexport const CardContainer = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n padding: 24px;\n position: relative;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n border-radius: 0;\n };\n `}\n`;\n\nexport const CardHeadContainer = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nexport const IconContainer = styled.div`\n min-width: fit-content;\n`;\n\nexport const CardTitle = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.brand.primaryExtraDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm2};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0;\n padding: 0 8px 0 16px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n font-size: ${theme.v2.font.sizes.xs};\n };\n `}\n`;\n\nexport const TooltipIconContainer = styled.div`\n display: inline-block;\n margin-left: 4px;\n position: relative;\n top: 2px;\n width: fit-content;\n`;\n\nexport const CardDescription = styled.p`\n ${({ theme, extraPadding }) => css`\n align-items: center;\n color: ${({ theme }) => theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px 157px 0 40px;\n\n @media (min-width: ${theme.v2.breakpoints.sm}) {\n margin-top: ${extraPadding && '28px'};\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n margin-right: 0;\n };\n `}\n`;\n\nexport const ToggleContainer = styled.div`\n align-items: center;\n display: flex;\n gap: 16px;\n margin-left: auto;\n`;\n\nexport const ToggleLabel = styled.label``;\n\nexport const ButtonContainer = styled.div`\n position: absolute;\n right: 0;\n margin-right: 24px;\n\n @media (max-width: ${({ theme }) => theme.v2.breakpoints.sm}) {\n position: relative;\n margin: 16px 0 0 40px;\n };\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './ManageCard.styles';\nimport {\n Button,\n IconSupport,\n Tooltip,\n Toggle,\n IconLoading,\n} from 'gatorcomponents';\nimport PropTypes from 'prop-types';\n\nexport const ManageCard = ({\n cardTitle = 'card title',\n testId = 'manage-card',\n cardDescription = 'card description',\n tooltipLabel,\n button,\n toggle,\n icon,\n readMoreButtonLabel,\n blockedUntil = 0,\n blockedTimeTooltip,\n someFeatureIsLoading,\n isMobile,\n}) => {\n const [readMore, setReadMore] = useState(false);\n const [blockedTime, setBlockedTime] = useState(0);\n\n const blockedToggle = !!blockedTime || (toggle && !!toggle.loading) || someFeatureIsLoading;\n\n const handleMarkToggle = () => {\n if (blockedToggle) return;\n toggle.onMark && toggle.onMark();\n };\n\n const setPreviousBlockedTime = useCallback(() => {\n const timestamp = blockedUntil;\n const currentTimestamp = Math.floor(Date.now() / 1000);\n\n if (timestamp > currentTimestamp) {\n setBlockedTime(timestamp - currentTimestamp);\n }\n }, [blockedUntil]);\n\n useEffect(() => {\n setPreviousBlockedTime();\n }, [setPreviousBlockedTime]);\n\n const updateBlockedTime = useCallback(() => {\n const secondsRemaining = blockedTime;\n\n if (secondsRemaining <= 0) return;\n\n const intervalId = setTimeout(() => {\n setBlockedTime(secondsRemaining - 1);\n }, 1000);\n\n return () => clearTimeout(intervalId);\n }, [blockedTime]);\n\n useEffect(() => {\n updateBlockedTime();\n }, [updateBlockedTime]);\n\n const mountCardDescription = () => {\n const needTruncateText = isMobile && cardDescription.length > 88 && readMore === false;\n\n if (needTruncateText) {\n return `${cardDescription.substring(0, 88)}...`;\n }\n return cardDescription;\n };\n\n return (\n \n \n \n {icon}\n \n \n {cardTitle}\n \n {!!tooltipLabel && (\n \n \n )}\n \n \n\n \n {toggle && !!toggle.loading && \n \n \n \n )}\n \n \n\n \n {`${mountCardDescription()} `}\n {isMobile && (\n setReadMore(!readMore)}\n />\n )}\n \n\n {!!button && (\n \n \n \n \n )}\n \n );\n};\n\nManageCard.propTypes = {\n cardTitle: PropTypes.string,\n testId: PropTypes.string,\n cardDescription: PropTypes.string,\n tooltipLabel: PropTypes.any,\n button: PropTypes.shape({\n buttonLabel: PropTypes.string,\n onClick: PropTypes.func,\n }),\n toggle: PropTypes.shape({\n checked: PropTypes.bool,\n onMark: PropTypes.func,\n loading: PropTypes.bool,\n }),\n icon: PropTypes.node,\n readMoreButtonLabel: PropTypes.func,\n blockedUntil: PropTypes.number,\n blockedTimeTooltip: PropTypes.func,\n someFeatureIsLoading: PropTypes.bool,\n isMobile: PropTypes.bool,\n};\n\nexport default ManageCard;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n gap: 16px;\n justify-content: center;\n text-align: center;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n height: 100%;\n margin-bottom: 52px;\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.extraDark};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0;\n `};\n`;\n\nexport const Message = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 0;\n `};\n`;\n\nexport const ButtonContainer = styled.div`\n width: fit-content;\n margin-top: 16px;\n`;\n","import { Button, Modal } from 'gatorcomponents';\nimport React from 'react';\nimport * as Styles from './CloudFlareGenericModal.styles';\nimport PropTypes from 'prop-types';\n\nexport const CloudFlareGenericModal = ({\n onClose,\n icon,\n testId = 'cloudflare-generic-modal',\n title = 'modal title',\n message = 'modal message',\n buttonLabel = 'button label',\n buttonAction,\n loading,\n}) => {\n const handleOnClose = () => {\n onClose && onClose();\n };\n\n const handleButtonAction = () => {\n buttonAction && buttonAction();\n };\n\n return (\n \n \n {icon && icon}\n {title && {title} }\n {message && {message} }\n \n \n \n \n );\n};\n\nCloudFlareGenericModal.propTypes = {\n onClose: PropTypes.func,\n icon: PropTypes.node,\n title: PropTypes.string,\n message: PropTypes.string,\n buttonLabel: PropTypes.string,\n buttonAction: PropTypes.func,\n loading: PropTypes.bool,\n};\n\nexport default CloudFlareGenericModal;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n gap: 24px;\n `};\n`;\n\nexport const Container = styled.div`\n ${({ theme, $error, $widthFull }) => css`\n align-items: flex-start;\n background-color: ${theme.v2.colors.neutral.highPure};\n border-radius: 8px;\n display: flex;\n flex-direction: row;\n gap: 16px;\n padding: 24px;\n\n ${$widthFull && css`\n width: 100%;\n `}\n\n ${$error && css`\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: 16px;\n justify-content: center;\n padding: 58px;\n\n > * {\n align-items: center;\n display: flex;\n justify-content: center;\n margin: 0px;\n max-width: 640px;\n text-align: center;\n width: 100%;\n }\n `}\n `}\n`;\n\nexport const Column = styled.div`\n display: flex;\n flex-direction: column;\n width: 100%;\n`;\n\nexport const SelectFieldContainer = styled.div`\n width: 60px;\n`;\n\nexport const HistoryWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 24px;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n gap: 0;\n }\n `};\n`;\n\nexport const CircleProgressBarWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 16px;\n justify-content: flex-start;\n\n @media screen (max-width: ${theme.v2.breakpoints.md}) {\n flex-direction: column;\n }\n `}\n`;\n\nexport const CircleProgressBarDescriptionWrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 15px;\n`;\n\nexport const DesktopIconWrapper = styled.span`\n ${({ theme }) => css`\n @media(max-width: ${theme.v2.breakpoints.lg}) {\n display: none;\n }\n\n @media(min-width: ${theme.v2.breakpoints.lg}) {\n display: block;\n }\n\n svg {\n flex: 0 0 24px\n }\n `}\n`;\n\nexport const MobileIconWrapper = styled.span`\n ${({ theme }) => css`\n @media(max-width: ${theme.v2.breakpoints.lg}) {\n display: block;\n }\n\n @media(min-width: ${theme.v2.breakpoints.lg}) {\n display: none;\n }\n\n svg {\n flex: 0 0 24px\n }\n `}\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryExtraDark};\n display: flex;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm2};\n font-weight: ${theme.v2.font.weights.medium};\n gap: 8px;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n\n @media(max-width: ${theme.v2.breakpoints.lg}) {\n font-size: ${theme.v2.font.sizes.xs};\n }\n `}\n`;\n\nexport const CircleProgressBarDescriptionTitle = styled(Title)`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.xs};\n `}\n`;\n\nexport const CircleProgressBarColorsList = styled.ul`\n align-items: center;\n display: inline-flex;\n flex-direction: row;\n gap: 40px;\n justify-content: center;\n margin: 0px;\n padding: 0px;\n`;\n\nexport const CircleProgressBarColorsListItem = styled.li`\n ${({ theme, $variant }) => {\n const variants = {\n good: theme.v2.colors.feedback.activePure,\n neutral: theme.v2.colors.feedback.attentionPure,\n bad: theme.v2.colors.feedback.problemPure,\n };\n\n\n return css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n gap: 8px;\n line-height: ${theme.v2.font.lineHeight.text};\n list-style-type: none;\n margin: 0px;\n\n &:before {\n background-color: ${variants[$variant]};\n border-radius: 100%;\n content: ' ';\n display: inline-block;\n height: 12px;\n margin: 0px 9px 0px 0px;\n width: 12px;\n }\n `;\n }}\n`;\n\nexport const AnalysisItemsContainer = styled.div`\n ${({ $listExpanded, $padding }) => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-height: ${$listExpanded ? '1000px' : '0px'};\n padding: ${$listExpanded && $padding ? '2px 2px 24px' : '0'};\n transition: 250ms ease-in-out;\n overflow: hidden;\n `};\n`;\n\nexport const AnalysisItemsWrapper = styled.div`\n ${({ theme }) => css`\n gap: 16px;\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n\n @media (max-width: ${theme.v2.breakpoints.lg}) {\n grid-template-columns: repeat(4, 1fr);\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n grid-template-columns: repeat(3, 1fr);\n margin-bottom: 0;\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n display: flex;\n flex-direction: column;\n }\n `}\n`;\n\nexport const AnalysisMobileToggle = styled.div`\n ${({ theme, $listExpanded }) => css`\n align-items: center;\n display: flex;\n justify-content: center;\n margin: ${$listExpanded ? '24px 0px 0px 0px' : '0px'};\n transition: 250ms ease-in-out;\n\n @media(min-width: ${theme.v2.breakpoints.lg}) {\n display: none;\n }`\n}\n`;\n\nexport const AnalysisItemsCard = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n border-radius: 8px;\n border: 1px solid ${theme.v2.colors.neutral.highMedium};\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n max-width: 253px;\n padding: 16px;\n\n @media(max-width: ${theme.v2.breakpoints.lg}) {\n max-width: 100%;\n width: 100%;\n }\n `}\n`;\n\nexport const AnalysisItemsCardTitle = styled(Title)`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: inline-block;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 8px;\n text-align: left;\n\n span{\n display: inline-block;\n svg {\n flex: 0 0 24px;\n margin-left: 4px;\n position: relative;\n top: 3px;\n }\n }\n `}\n`;\n\nexport const AnalysisItemsCardValue = styled.p`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm2};\n font-weight: ${theme.v2.font.weights.medium};\n gap: 8px;\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px 0px 0px 0px;\n width: 100%;\n\n @media(max-width: ${theme.v2.breakpoints.lg}) {\n font-size: ${theme.v2.font.sizes.xs};\n }\n `}\n`;\n\nexport const DotColor = styled.span`\n ${({ theme, $variant }) => {\n const variants = {\n good: theme.v2.colors.feedback.activePure,\n neutral: theme.v2.colors.feedback.attentionPure,\n bad: theme.v2.colors.feedback.problemPure,\n };\n\n return css`\n background-color: ${variants[$variant]};\n border-radius: 100%;\n content: ' ';\n display: inline-block;\n height: 12px;\n margin: 0px 9px 0px 0p;\n width: 12px;\n `;\n }}\n`;\n\nexport const FirstRow = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px 0px 0px 0px;\n\n @media(max-width: ${theme.v2.breakpoints.lg}) {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const SecondRow = styled(FirstRow)`\n margin: 16px 0px 0px 0px;\n`;\n\nexport const AlertWrapper = styled.div`\n ${({ padding }) => css`\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n justify-content: space-between;\n margin-top: 16px;\n padding-bottom: ${padding ? '24px' : '0'};\n\n > button {\n max-width: fit-content;\n }\n\n div {\n padding: 0px;\n align-items: center;\n }\n `};\n`;\n\nexport const ActionWrapper = styled.div`\n ${({ theme }) => css`\n margin: 24px 0px 0px 0px;\n\n @media(min-width: ${theme.v2.breakpoints.lg}) {\n max-width: 148px;\n }\n `}\n`;\n\nexport const ViewRow = styled.div`\n display: flex;\n flex-direction: row;\n gap: 16px;\n justify-content: flex-start;\n`;\n\nexport const TitleRow = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n`;\n\nexport const ListTitle = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin: 24px 0px 40px;\n`;\n\nexport const TestDate = styled.span`\n ${({ theme, $hideOnDesktop, $hideOnMobile }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n display: block;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0;\n\n ${$hideOnDesktop && css`\n @media(min-width: ${theme.v2.breakpoints.lg}) {\n display: none;\n hidden: true;\n }\n `}\n\n ${$hideOnMobile && css`\n @media(max-width: ${theme.v2.breakpoints.lg}) {\n display: none;\n hidden: true;\n }\n `}\n `}\n`;\n\nexport const PaginationWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n justify-content: space-between;\n position: relative;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n flex-direction: column;\n gap: 20px;\n };\n `};\n`;\n\nexport const PaginationEmptyItem = styled.div`\n ${({ theme }) => css`\n @media (max-width: ${theme.v2.breakpoints.md}) {\n display: none;\n }\n `};\n`;\n\nexport const PagesAmount = styled.div`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowMedium};\n display: flex;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 8px;\n right: 0;\n `};\n`;\n\nexport const SkeletonList = styled.div`\n display: flex;\n flex-direction: column;\n gap: 16px;\n`;\n\nexport const Table = styled.table`\n border-spacing: 16px;\n border-collapse: collapse;\n`;\n\nexport const TableHeader = styled.thead``;\n\nexport const TableBody = styled.tbody``;\n\nexport const TableRow = styled.tr`\n ${({ theme, $head }) => css`\n td:last-child {\n text-align: right;\n }\n\n ${$head && css`\n border-bottom: 1px solid ${theme.v2.colors.neutral.highMedium};\n `};\n `};\n`;\n\nexport const TableHead = styled.th`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-weight: ${theme.v2.font.weights.medium};\n padding: 16px 0;\n text-align: left;\n `};\n`;\n\nexport const TableCell = styled.td`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n padding: 28px 0;\n `};\n`;\n\nexport const PerformanceCell = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n`;\n\nexport const HistoryItemDetails = styled.td.attrs({ colSpan: 4 })`\n ${({ theme }) => css`\n border-bottom: 1px solid ${theme.v2.colors.neutral.highMedium};\n padding: 0;\n text-align: left;\n `};\n`;\n\nexport const MobileHistoryContainer = styled.div`\n display: flex;\n flex-direction: column;\n margin: 24px 0;\n`;\n\nexport const MobileHistoryItem = styled.div`\n ${({ theme, $firstItem }) => css`\n border-bottom: 1px solid ${theme.v2.colors.neutral.highMedium};\n border-top: ${$firstItem && `1px solid ${theme.v2.colors.neutral.highMedium}`};\n display: flex;\n flex-direction: column;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 8px;\n padding: 16px 0;\n `};\n`;\n\nexport const MobileItemText = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n gap: 8px;\n\n strong {\n font-weight: ${theme.v2.font.weights.medium};\n color: ${theme.v2.colors.neutral.lowPure};\n }\n `};\n`;\n\nexport const MobileHistoryItemDetails = styled.div`\n padding: 0;\n`;\n\nexport const DetailsButtonContainer = styled.div``;\n","import {\n Alert, Button, IconCdn, Skeleton, CircleProgressBar,\n IconSupport,\n Tooltip,\n ChipCheckbox,\n IconAtencion,\n Pagination,\n SelectField,\n IconChevron,\n} from 'gatorcomponents';\nimport React, { useState, useEffect, useCallback } from 'react';\nimport * as Styles from './FeatureSpeed.styles';\nimport PropTypes from 'prop-types';\nimport { formatDate } from '@/utils/Formatters/formatDate';\nimport { useResize } from '@/hooks/useResize';\n\nconst FeatureSpeed = ({\n title = 'title',\n firstRow = 'first row',\n secondRow = 'second row',\n stillHave = 'still have',\n dontHave = 'dont have',\n initTestLabel = 'init',\n listTitle = '',\n loadingLastAnalysis = true,\n loadingHistory = true,\n leftAmount,\n requestSpeedAnalysis,\n getSpeedHistory,\n history,\n lastAnalysis,\n resultTitle,\n resultAnalysisTitle,\n resultItems,\n reduTestLabel,\n testDate,\n insideList = false,\n showList,\n hideList,\n failedTitle,\n failedDescription,\n historyListTitle,\n itemsPerPageLabel,\n dateLabel,\n domainLabel,\n scoreLabel,\n showDetailsButtonLabel,\n getHistoryError = {\n title: 'Falha ao carregar os dados',\n description: 'Não foi possível carregar os dados solicitados. Por favor, aguarde e tente novamente em alguns minutos.',\n },\n getHistoryRequestStatus,\n resetRequestStatus,\n}) => {\n const [analysisView, setAnalysisView] = useState('desktopReport');\n const [listItemAnalysisView, setListItemAnalysisView] = useState('desktopReport');\n const [listExpanded, setListExpanded] = useState(true);\n const [itemsPerPage, setItemsPerPage] = useState(5);\n const [pageIndex, setPageIndex] = useState(0);\n const [historyItemOpen, setHistoryItemOpen] = useState(null);\n\n const itemsPerPageOptions = [\n {\n value: 5,\n label: '5',\n },\n {\n value: 10,\n label: '10',\n },\n {\n value: 50,\n label: '50',\n },\n ];\n\n const windowRect = useResize();\n const { width } = windowRect;\n const mobile = width < 960;\n\n const paginationStartsIn = 1;\n const currentPage = pageIndex + paginationStartsIn;\n const historyList = history && history.results;\n const paginationInfos = history && history.result_info;\n\n const pagesAmount = paginationInfos && Math.ceil(paginationInfos.total_count / itemsPerPage);\n\n const isFailedAnalysis = lastAnalysis && (lastAnalysis.desktopReport.state.toLowerCase() === 'failed' || lastAnalysis.mobileReport.state.toLowerCase() === 'failed');\n const isComplitedAnalysis = lastAnalysis && lastAnalysis.desktopReport.state.toLowerCase() === 'complete' && lastAnalysis.mobileReport.state.toLowerCase() === 'complete';\n const getHistoryListFailed = getHistoryRequestStatus === 'failure';\n const handleClick = () => {\n requestSpeedAnalysis && requestSpeedAnalysis();\n };\n\n const handleSetPage = (page) => {\n const newPage = page + paginationStartsIn;\n\n if (newPage !== currentPage) {\n getSpeedHistory({ currentPage: newPage, perPage: itemsPerPage, updateLastAnalysis: false });\n setPageIndex(page);\n }\n };\n\n const handleSetItemsPerPage = (updatedPerPage) => {\n if (updatedPerPage === itemsPerPage || loadingHistory) {\n return;\n }\n\n setItemsPerPage(updatedPerPage);\n setPageIndex(0);\n getSpeedHistory({ currentPage: 1, perPage: updatedPerPage, updateLastAnalysis: false });\n };\n\n const getAnalysisStatus = (number) => {\n if (number >= 90) {\n return 'good';\n }\n\n if (number >= 50) {\n return 'neutral';\n }\n\n return 'bad';\n };\n\n const getStatusVariant = (number) => {\n if (number >= 90) {\n return 'success';\n }\n\n if (number >= 50) {\n return 'attention';\n }\n\n return 'problem';\n };\n\n const shouldRenderResult = isComplitedAnalysis;\n\n const handleCurrentTestChip = (e) => {\n setAnalysisView(e.value);\n };\n\n const handleListItemChip = (e) => {\n setListItemAnalysisView(e.value);\n };\n const handleResetRequestStatus = useCallback(() => {\n resetRequestStatus();\n }, [resetRequestStatus]);\n\n useEffect(() => {\n handleResetRequestStatus();\n }, [handleResetRequestStatus]);\n\n if (loadingLastAnalysis || loadingHistory) {\n return (\n \n \n );\n }\n\n const showHistoryItemDetails = (id) => {\n if (id === historyItemOpen) {\n setHistoryItemOpen(null);\n return;\n }\n\n setHistoryItemOpen(id);\n };\n\n const showDetailsButtonIcon = ({ open = false }) => (\n \n {isHistoryItem && (\n \n \n )}\n\n \n {Object.keys(analysis[currentAnalysisView]).map((key) => {\n if (key === 'performanceScore' || key === 'state' || key === 'deviceType') return null;\n\n return (\n \n \n {resultItems[key]}\n \n \n \n\n \n \n \n );\n })}\n \n \n );\n };\n\n return (\n \n {!isComplitedAnalysis && (\n \n \n \n \n \n \n \n {title}\n \n \n {firstRow}\n \n\n \n {secondRow}\n \n\n \n {leftAmount && (\n 0 ? 'info' : 'warning'}\n withoutBackground\n description={leftAmount > 0 ? stillHave : dontHave}\n />\n )}\n \n\n \n \n \n \n )}\n\n {shouldRenderResult && (\n \n \n \n \n {resultTitle}\n \n\n \n {testDate(new Date(lastAnalysis.date))}\n \n \n\n \n 0 ? 'info' : 'warning'}\n withoutBackground\n description={leftAmount > 0 ? stillHave : dontHave}\n />\n\n \n {testDate(new Date(lastAnalysis.date))}\n \n \n\n \n \n\n {!insideList && (\n \n \n \n {resultAnalysisTitle[getAnalysisStatus(lastAnalysis[analysisView].performanceScore)]}\n \n\n \n 100-90 \n 89-50 \n 49-0 \n \n \n \n )}\n\n\n {!insideList && (\n \n \n {listTitle}\n \n \n )}\n\n {mountAnalysisDetails({ analysis: lastAnalysis, listExpanded })}\n\n \n setListExpanded(!listExpanded)}\n variant=\"secondary\"\n />\n \n\n \n \n )}\n\n {isFailedAnalysis && (\n \n \n {failedTitle}\n \n\n \n {failedDescription}\n \n \n )}\n\n {getHistoryListFailed && (\n \n \n {getHistoryError.title}\n \n\n \n {getHistoryError.description}\n \n \n )}\n\n {historyList && (\n \n \n \n {historyListTitle}\n \n\n {loadingHistory && (\n \n {Array.from({ length: 5 }).map(() => (\n \n )}\n\n {!mobile && !loadingHistory && (\n \n \n \n {dateLabel} \n {domainLabel} \n {scoreLabel} \n \n \n\n {historyList.map((item) => {\n const isLastAnalysis = lastAnalysis && lastAnalysis.id === item.id;\n\n if (isLastAnalysis) {\n return;\n }\n\n return (\n \n \n {formatDate(item.date)} \n {item.url} \n \n \n \n \n \n showHistoryItemDetails(item.id)}\n />\n \n \n \n \n {mountAnalysisDetails({\n analysis: item,\n listExpanded: item.id === historyItemOpen,\n isHistoryItem: true,\n })}\n \n \n \n );\n })}\n \n )}\n\n {mobile && !loadingHistory && (\n \n {historyList && historyList.map((item, index) => {\n const isLastAnalysis = lastAnalysis && lastAnalysis.id === item.id;\n\n if (isLastAnalysis) {\n return;\n }\n\n return (\n \n \n {`${dateLabel}: `} \n {formatDate(item.date)}\n \n \n {`${domainLabel}: `} \n {item.url}\n \n \n {`${scoreLabel}: `} \n \n \n \n \n showHistoryItemDetails(item.id)}\n />\n \n \n {mountAnalysisDetails({\n analysis: item,\n listExpanded: item.id === historyItemOpen,\n isHistoryItem: true,\n })}\n \n \n );\n })}\n \n )}\n\n \n \n {itemsPerPageLabel}\n \n handleSetItemsPerPage(Number(label))}\n />\n \n \n \n \n \n )}\n\n \n );\n};\n\nFeatureSpeed.propTypes = {\n title: PropTypes.string,\n firstRow: PropTypes.string,\n secondRow: PropTypes.string,\n stillHave: PropTypes.node,\n dontHave: PropTypes.node,\n initTestLabel: PropTypes.string,\n loadingLastAnalysis: PropTypes.bool,\n leftAmount: PropTypes.number,\n requestSpeedAnalysis: PropTypes.func,\n getHistoryRequestStatus: PropTypes.func,\n resetRequestStatus: PropTypes.func,\n getHistoryError: PropTypes.shape({\n title: PropTypes.string,\n description: PropTypes.string,\n }),\n};\n\nexport default FeatureSpeed;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.neutral.highPure};\n display: flex;\n flex-direction: column;\n gap: 24px;\n justify-content: center;\n padding: 110px;\n `}\n`;\n\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.brand.primaryExtraDark};\n display: flex;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.medium};\n justify-content: center;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px 0px 24px 0px;\n text-align: center;\n `}\n`;\n\nexport const ProgressBarWrapper = styled.div`\n display: block;\n max-width: 345px;\n width: 100%;\n`;\n","import { ProgressBar } from 'gatorcomponents';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './ProgressBarBlock.styles';\nimport { useFeatureValue } from '@growthbook/growthbook-react';\nimport { CHARLIE_CLOUDFLARE_TIMERS } from '@/config/GrowthBook/constants';\n\nconst ProgressBarBlock = ({\n texts,\n}) => {\n const { betweenProgressBarIteration } = useFeatureValue(CHARLIE_CLOUDFLARE_TIMERS) || { betweenProgressBarIteration: 5000 };\n const [progress, setProgress] = useState(0);\n const [textStep, setTextStep] = useState(0);\n\n const updateProgress = useCallback(() => {\n if (progress < 99) {\n setTimeout(() => {\n if ((texts.length - 1) > textStep) {\n setTextStep(textStep + 1);\n }\n setProgress(progress + 50);\n }, betweenProgressBarIteration);\n }\n }, [progress, textStep, texts, betweenProgressBarIteration]);\n\n useEffect(() => {\n updateProgress();\n }, [updateProgress]);\n\n useEffect(() => {\n setProgress(10);\n }, []);\n\n return (\n \n \n {texts[textStep]}\n \n\n \n \n \n );\n};\n\nexport default ProgressBarBlock;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 24px;\n`;\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n background-color: ${theme.v2.colors.neutral.highPure};\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 32px 24px;\n `}\n`;\n\nexport const TitleRow = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n`;\n\nexport const TitleSelectWrapper = styled.div`\n max-width: 241px;\n width: 100%;\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n align-items: center;\n color:${theme.v2.colors.brand.primaryExtraDark};\n display: flex;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.medium};\n gap: 16px;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0 0 24px 0;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n margin: 0;\n\n svg {\n display: none;\n }\n }\n `}\n`;\n\nexport const VisitsWrapper = styled(Wrapper)`\n margin-bottom: 64px;\n position: relative;\n width: 100%;\n`;\n\nexport const CardsContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n`;\n\nexport const Card = styled.div`\n ${({ theme }) => css`\n border: 1px solid ${theme.v2.colors.neutral.highMedium};\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n gap: 8px;\n padding: 24px;\n max-width: 272px;\n width: 100%;\n\n p {\n margin: 0;\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n max-width: 100%;\n }\n `};\n`;\n\nexport const CardTitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const CardSubtitle = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n `};\n`;\n\nexport const CardInfo = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n `};\n`;\n\nexport const ChartContainer = styled.div`\n width: 100%;\n height: 400px\n`;\n\nexport const MapWrapper = styled.div`\n ${({ theme }) => css`\n margin: 24px 0px 0px 0px;\n width: 100%;\n @media (max-width: ${theme.v2.breakpoints.md}) {\n display: none;\n }\n `}\n`;\n\nexport const ListWrapper = styled.ul`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n min-width: 100%;\n padding: 0px 24px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n padding: 0px;\n }\n `}\n`;\n\nexport const ListItem = styled.li`\n ${({ theme }) => css`\n align-items: center;\n border-bottom: 1px solid ${theme.v2.colors.neutral.highMedium};\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n justify-content: space-between;\n line-height: ${theme.v2.font.lineHeight.list};\n list-style-type: none;\n padding: 32px 0px;\n\n &:first-child{\n padding: 24px 0px 32px;\n }\n `}\n`;\n\nexport const ListTitle = styled(ListItem)`\n ${({ theme }) => css`\n font-size: ${theme.v2.font.sizes.sm2};\n font-weight: ${theme.v2.font.weights.medium};\n `}\n`;\n\nexport const CountryWrapper = styled.span`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n justify-content: flex-start;\n max-width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n max-width: unset;\n width: unset;\n }\n `}\n`;\n\nexport const AmountWrapper = styled.span`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n justify-content: flex-start;\n max-width: 162px;\n position: relative;\n width: 100%;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n max-width: unset;\n width: unset;\n }\n `}\n`;\n\nexport const PaginationWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: row;\n justify-content: center;\n margin: 24px 0px 0px;\n position: relative;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n flex-direction: column;\n gap: 16px;\n justify-content: center;\n margin: 32px 0px 0px;\n }\n `}\n`;\n\nexport const PerPagelLabel = styled.label`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowMedium};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n `}\n`;\n\nexport const SelectWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 8px;\n justify-content: center;\n position: absolute;\n right: 0px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n display: block;\n position: unset;\n width: 100%;\n }\n `}\n`;\n\nexport const VisitsEmptyWrapper = styled(Wrapper)`\n padding: 32px 0;\n position: relative;\n width: 100%;\n\n ${({ theme }) => css`\n @media(min-width: ${theme.v2.breakpoints.lg}) {\n padding: 98px 0;\n }\n `}\n`;\n\nexport const VisitsEmpty = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 10px;\n`;\n\nexport const TitleEmpty = styled.h2`\n ${({ theme }) => css`\n align-items: center;\n color:${theme.v2.colors.brand.primaryExtraDark};\n display: flex;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0;\n\n @media(min-width: ${theme.v2.breakpoints.lg}) {\n font-size: ${theme.v2.font.sizes.sm2};\n }\n `}\n`;\n\nexport const DescriptionEmpty = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n white-space: break-spaces;\n margin: 0;\n text-align: center;\n\n @media(min-width: ${theme.v2.breakpoints.lg}) {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n","import * as Styles from './FeatureVisitors.styles';\nimport React, {\n useCallback, useContext, useEffect, useState,\n} from 'react';\nimport {\n GetCountries, IconPeople, IconGlobe, Pagination, SelectField, Skeleton, WorldMap, Icon404File,\n IconAtencion,\n} from 'gatorcomponents';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport PropTypes from 'prop-types';\nimport { Chart } from 'react-chartjs-2';\nimport { formatHour, formatDate } from '@/utils/Formatters/formatDate';\nimport { ThemeContext } from 'styled-components';\nimport {\n format, parseISO,\n subDays, subHours,\n} from 'date-fns';\n\nconst FeatureVisitors = ({\n visitsOnSiteTitle = 'Visitas no site',\n totalOfAccess = 'Total de acessos',\n maxOfVisitants = 'Máximo de visitantes',\n minOfVisitants = 'Mínimo de visitantes',\n perDay = 'Por um dia',\n perHour = 'Por uma hora',\n uniqueVisitants = 'Visitantes únicos',\n regionsOfAccessTitle = 'title',\n countryTitle = 'Pais/Região',\n trafficTitle = 'Tráfego',\n perPageLabel = 'Itens por página',\n noDataTitle = 'Ainda não há dados para exibir',\n noDataDescription = 'Seu site ainda não possui dados de visitas para exibir.',\n errorStateTitle = 'Falha ao carregar os dados',\n errorStateDescription = 'Não foi possível carregar os dados solicitados. Por favor, aguarde e tente novamente em alguns minutos.',\n selectOptions = {},\n countryData = {},\n requestVisitors,\n resetVisitorsState,\n startTimeEndTime,\n requestStatus,\n uniqueVisitorsData = {\n total: 0,\n maximum: 0,\n minimum: 0,\n all_timeslot: [],\n },\n loading = false,\n}) => {\n const selectPeriodOptions = [\n {\n value: 1,\n label: selectOptions.last24hours,\n },\n {\n value: 7,\n label: selectOptions.last7Days,\n },\n {\n value: 30,\n label: selectOptions.last30Days,\n },\n ];\n\n const [page, setPage] = useState(0);\n const [itemsPerPage, setItemsPerPage] = useState(5);\n const [periodSelected, setPeriodSelected] = useState(selectPeriodOptions[1]);\n\n const getPreviousTime = (date) => {\n const subFunction = periodSelected.value === 1 ? subHours : subDays;\n const parsedDate = parseISO(date);\n const previousDate = subFunction(parsedDate, 1);\n\n return previousDate;\n };\n\n const formatTooltipDate = date => format(date, 'dd/MM/yyyy - HH:mm');\n\n const handleSetPeriodSelected = (e) => {\n setPeriodSelected(e);\n\n if (e.value !== periodSelected.value) {\n requestVisitors && requestVisitors({ days: e.value });\n }\n };\n\n const periodLabel = periodSelected.value === 1 ? perHour : perDay;\n\n const theme = useContext(ThemeContext);\n\n const countries = GetCountries({\n lang: isBRServer ? 'br' : 'es',\n });\n\n const getPageAmounts = useCallback(() => {\n if (countryData && countryData.all_requests_countries && countryData.all_requests_countries.length) {\n return Math.ceil(countryData.all_requests_countries.length / itemsPerPage);\n }\n\n return 0;\n }, [\n itemsPerPage,\n countryData,\n ]);\n\n const pageOptions = [{\n value: 5,\n label: '5',\n },\n {\n value: 10,\n label: '10',\n },\n {\n value: 50,\n label: '50',\n },\n ];\n\n const getCountryName = useCallback(({ id }) => countries.find(country => country.id.toLowerCase() === id.toLowerCase()).name, [countries]);\n\n const getCountryData = useCallback(() => countryData && countryData.top5_requests_countries && countryData.top5_requests_countries.map(data => ({\n id: data.key,\n value: data.requests,\n description: `${getCountryName({ id: data.key })} ${data.requests} visitas`,\n })), [\n countryData,\n getCountryName,\n ]);\n\n const initSlice = page === 0 ? 0 : page * itemsPerPage;\n const endSlice = page === 0 ? itemsPerPage : (initSlice + itemsPerPage);\n\n const mountCard = ({ title, subtitle, info }) => (\n \n {title} \n {subtitle} \n {info} \n \n );\n\n const handleChangePerPage = (e) => {\n setPage(0);\n setItemsPerPage(e.value);\n };\n\n useEffect(() => () => {\n resetVisitorsState && resetVisitorsState();\n }, [resetVisitorsState]);\n\n if (loading) {\n return (\n \n \n );\n }\n\n const chartUniqueVisitors = uniqueVisitorsData ? uniqueVisitorsData.all_timeslot.map(item => item.unique_visitors) : [];\n\n const formatTime = periodSelected.value === 1 ? formatHour : formatDate;\n const chartLabels = uniqueVisitorsData ? uniqueVisitorsData.all_timeslot.map(item => formatTime(item.timeslot)) : [];\n\n const chartData = {\n labels: chartLabels,\n datasets: [\n {\n label: uniqueVisitants,\n data: chartUniqueVisitors,\n backgroundColor: theme.v2.colors.brand.primaryMedium,\n borderColor: theme.v2.colors.brand.primaryMedium,\n tension: 0.3,\n fill: true,\n pointRadius: 0,\n pointHoverRadius: 7,\n },\n ],\n };\n\n const chartOptions = {\n maintainAspectRatio: false,\n scales: {\n x: {\n ticks: {\n font: {\n family: theme.v2.font.family.primary,\n size: 12,\n },\n },\n },\n y: {\n ticks: {\n font: {\n family: theme.v2.font.family.primary,\n size: 12,\n },\n },\n },\n },\n plugins: {\n legend: {\n display: false,\n },\n tooltip: {\n callbacks: {\n title: (tooltipItems) => {\n const index = tooltipItems[0].dataIndex;\n const currentTime = uniqueVisitorsData.all_timeslot[index].timeslot;\n const startTime = formatTooltipDate(getPreviousTime(currentTime));\n const endTime = formatTooltipDate(parseISO(currentTime));\n return startTimeEndTime(startTime, endTime);\n },\n },\n bodyFont: {\n family: theme.v2.font.family.primary,\n size: 12,\n weight: 500,\n },\n titleFont: {\n family: theme.v2.font.family.primary,\n size: 12,\n weight: 500,\n },\n usePointStyle: true,\n boxHeight: 9,\n },\n },\n interaction: {\n intersect: false,\n },\n };\n\n const displayErrorState = requestStatus === 'failure';\n\n if (displayErrorState) {\n return (\n \n \n \n \n { errorStateTitle } \n { errorStateDescription } \n \n \n \n \n );\n }\n\n const displayEmptyState = uniqueVisitorsData && uniqueVisitorsData.total === 0;\n\n if (displayEmptyState) {\n return (\n \n \n \n \n { noDataTitle } \n { noDataDescription } \n \n \n \n \n );\n }\n\n return (\n \n \n \n \n \n\n \n handleSetPeriodSelected(e)}\n positionAbsolute\n />\n \n\n {uniqueVisitorsData && (\n \n {mountCard({ title: totalOfAccess, subtitle: periodSelected.label, info: uniqueVisitorsData.total })}\n {mountCard({ title: maxOfVisitants, subtitle: periodLabel, info: uniqueVisitorsData.maximum })}\n {mountCard({ title: minOfVisitants, subtitle: periodLabel, info: uniqueVisitorsData.minimum })}\n \n )}\n\n \n \n \n\n \n \n\n \n \n\n \n \n {countryTitle} \n {trafficTitle} \n \n\n {countryData && countryData.all_requests_countries.slice(initSlice, endSlice).map((country) => {\n const countryName = getCountryName({ id: country.key });\n\n if (!countryName) {\n return;\n }\n\n return (\n \n {countryName} \n {country.requests} \n \n );\n })}\n\n \n \n \n {perPageLabel}\n \n\n \n \n \n \n \n );\n};\n\nFeatureVisitors.propTypes = {\n visitsOnSiteTitle: PropTypes.string,\n totalOfAccess: PropTypes.string,\n maxOfVisitants: PropTypes.string,\n minOfVisitants: PropTypes.string,\n perDay: PropTypes.string,\n perHour: PropTypes.string,\n selectOptions: PropTypes.object,\n requestVisitors: PropTypes.func,\n resetVisitorsState: PropTypes.func,\n requestStatus: PropTypes.string,\n uniqueVisitants: PropTypes.string,\n startTimeEndTime: PropTypes.func,\n regionsOfAccessTitle: PropTypes.string,\n countryData: PropTypes.object,\n uniqueVisitorsData: PropTypes.object,\n loading: PropTypes.bool,\n countryTitle: PropTypes.string,\n trafficTitle: PropTypes.string,\n perPageLabel: PropTypes.string,\n};\n\nexport default FeatureVisitors;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n gap: 24px;\n `};\n`;\n\nexport const ContentWrapper = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.neutral.highPure};\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 32px;\n padding: 24px;\n `}\n`;\n\nexport const Container = styled.div`\n ${({ theme, error }) => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n width: 100%;\n background-color: ${theme.v2.colors.neutral.highPure};\n\n\n ${error && css`\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: 16px;\n justify-content: center;\n padding: 58px;\n\n > * {\n align-items: center;\n display: flex;\n justify-content: center;\n margin: 0px;\n max-width: 640px;\n text-align: center;\n width: 100%;\n }\n `}\n `}\n`;\n\nexport const FirstRow = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px 0px 0px 0px;\n\n @media(max-width: ${theme.v2.breakpoints.lg}) {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryExtraDark};\n display: flex;\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0;\n\n @media(min-width: ${theme.v2.breakpoints.lg}) {\n font-size: ${theme.v2.font.sizes.sm};\n }\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n white-space: break-spaces;\n\n > svg{\n margin-right: 6px;\n }\n\n @media(min-width: ${theme.v2.breakpoints.lg}) {\n font-size: ${theme.v2.font.sizes.xs};\n }\n `}\n`;\n\nexport const BlockTextField = styled.div`\n width: 100%;\n\n ${({ theme }) => css`\n @media(min-width: ${theme.v2.breakpoints.lg}) {\n max-width: 550px;\n }\n `}\n`;\n\nexport const BlockTrafic = styled.div`\n display: flex;\n flex-direction: column;\n gap: 24px;\n\n ${({ theme }) => css`\n @media(min-width: ${theme.v2.breakpoints.lg}) {\n flex-direction: row;\n }\n `}\n`;\n\nexport const SelectFieldContainer = styled.div`\n ${({ theme }) => css`\n @media(min-width: ${theme.v2.breakpoints.lg}) {\n min-width: 400px;\n }\n `}\n`;\n\nexport const BlockRuleInputContainer = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 24px;\n\n ${({ theme }) => css`\n @media(min-width: ${theme.v2.breakpoints.lg}) {\n flex-direction: row;\n }\n `}\n`;\n\nexport const BlockRuleInput = styled.div`\n flex: 1;\n width: 100%;\n`;\n\nexport const ButtonContainer = styled.div`\n width: 100%;\n\n ${({ theme }) => css`\n @media(min-width: ${theme.v2.breakpoints.lg}) {\n max-width: 120px;\n }\n `}\n`;\n\n\nexport const Table = styled.table`\n border-spacing: 16px;\n border-collapse: collapse;\n`;\n\nexport const TableHeader = styled.thead``;\n\nexport const TableBody = styled.tbody``;\n\nexport const TableRow = styled.tr`\n ${({ theme, $lastRow }) => css`\n ${!$lastRow && css`\n border-bottom: 1px solid ${theme.v2.colors.neutral.highMedium};\n `};\n `};\n`;\n\nexport const TableHead = styled.th`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-weight: ${theme.v2.font.weights.medium};\n padding: 16px 0;\n text-align: left;\n `};\n`;\n\nexport const TableCell = styled.td`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n padding: 24px 0;\n `};\n`;\n\nexport const ActionsContainer = styled.div`\n display: flex;\n gap: 24px;\n`;\n\nexport const MobileList = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const MobileListItem = styled.div`\n ${({ theme }) => css`\n border-top: 1px solid ${theme.v2.colors.neutral.highMedium};\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 16px 0;\n position: relative;\n `};\n`;\n\nexport const MobileListInfo = styled.span`\n ${({ theme, $actions }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: column;\n font-weight: ${theme.v2.font.weights.medium};\n gap: 8px;\n line-height: ${theme.v2.font.lineHeight.text};\n width: fit-content;\n\n ${$actions && css`\n position: absolute;\n right: 0;\n `}\n `};\n`;\n\nexport const InfoText = styled.p`\n ${({ theme }) => css`\n font-weight: ${theme.v2.font.weights.regular};\n margin: 0;\n `};\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport {\n TextField, SelectField, GetCountries, GetContinents,\n} from 'gatorcomponents';\nimport { isBRServer } from '@/utils/Validators/validation';\nimport { RuleActionTypes } from '../../Security.types';\n\nconst SelectInput = ({\n placeholder,\n value,\n handleOnSelectChange,\n options,\n}) => (\n handleOnSelectChange(label)}\n options={options}\n withScroll\n positionAbsolute\n testId=\"cloudflare-rule-value__select\"\n />\n);\n\nconst TextFieldInput = ({\n label, ruleValue, handleOnTextChange, mask,\n}) => (\n handleOnTextChange(e.target.value)}\n inputHeight={60}\n mask={mask}\n testId=\"cloudflare-rule-value__textfield\"\n />\n);\n\nconst BlockRuleInput = ({\n selectedLockType,\n ruleValue,\n setRuleValue,\n locales,\n}) => {\n const [selectedOptionLabel, setSelectedOptionLabel] = useState('');\n\n const continents = GetContinents({\n lang: isBRServer ? 'br' : 'es',\n });\n\n const countries = GetCountries({\n lang: isBRServer ? 'br' : 'es',\n });\n\n const continentsOptions = continents.map(continent => ({\n value: continent.id,\n label: continent.name,\n }));\n\n const countriesOptions = countries.map(country => ({\n value: country.id,\n label: country.name,\n }));\n\n const handleOnTextChange = (value) => {\n setRuleValue && setRuleValue(value);\n };\n\n const handleOnSelectChange = (selectedOptionLabel) => {\n const getSelectedCountry = () => countriesOptions.find(country => country.label === selectedOptionLabel);\n const getSelectedContinent = () => continentsOptions.find(continent => continent.label === selectedOptionLabel);\n\n const selectedOption = selectedLockType === 'country' ? getSelectedCountry() : getSelectedContinent();\n setSelectedOptionLabel && setSelectedOptionLabel(selectedOptionLabel);\n setRuleValue && setRuleValue(selectedOption.value);\n };\n\n const getSelectCountryProps = () => ({\n placeholder: locales.ruleTypes[RuleActionTypes.COUNTRY].ruleValuePlaceholder,\n value: selectedOptionLabel,\n handleOnSelectChange,\n options: countriesOptions,\n });\n\n const getSelectContinentProps = () => ({\n placeholder: locales.ruleTypes[RuleActionTypes.CONTINENT].ruleValuePlaceholder,\n value: selectedOptionLabel,\n handleOnSelectChange,\n options: continentsOptions,\n });\n\n const getInputUrlProps = () => ({\n label: locales.ruleTypes[RuleActionTypes.URL].ruleValuePlaceholder,\n ruleValue,\n handleOnTextChange,\n });\n\n const getInputIpAddressProps = () => ({\n label: locales.ruleTypes[RuleActionTypes.SOURCE_IP_ADDRESS].ruleValuePlaceholder,\n ruleValue,\n handleOnTextChange,\n mask: 'ip',\n });\n\n const setInitialValue = useCallback(() => {\n if (ruleValue) {\n const getSelectedCountry = () => countriesOptions.find(country => country.value === ruleValue);\n const getSelectedContinent = () => continentsOptions.find(continent => continent.value === ruleValue);\n\n const selectedOption = selectedLockType === 'country' ? getSelectedCountry() : getSelectedContinent();\n return selectedOption && setSelectedOptionLabel(selectedOption.label);\n }\n setSelectedOptionLabel('');\n }, [selectedLockType, countriesOptions, continentsOptions, ruleValue]);\n\n useEffect(() => {\n setInitialValue();\n }, [setInitialValue]);\n\n const componentByRule = {\n [RuleActionTypes.COUNTRY]: \n \n );\n }\n\n return (\n \n \n \n {locales.rules.title} \n \n {locales.rules.description}\n \n\n \n handleFormChange('description', event.target.value)}\n disabled={rulesLeft === 0}\n testId=\"cloudflare-rule-name__textfield\"\n />\n \n\n \n\n \n {locales.traficBlock.title} \n \n \n\n {locales.traficBlock.description} \n \n \n handleFormChange('lockType', getSelectedOptionValue(rulesOptions, label))}\n positionAbsolute\n disabled={rulesLeft === 0}\n testId=\"cloudflare-rule-type__select\"\n />\n \n\n \n \n handleFormChange('value', value)}\n locales={locales.traficBlock}\n />\n \n {ruleForm.lockType && (\n \n \n )}\n \n\n \n \n \n {getListError && (\n \n \n {locales.getRulesError.title}\n \n\n \n {locales.getRulesError.description}\n \n \n )}\n {!getListError && (\n \n \n {locales.blockList.title} \n {!mobile && (\n \n \n \n {locales.blockList.order} \n {locales.blockList.name} \n {locales.blockList.action} \n {locales.blockList.toggleOn} \n \n \n\n {rules && rules.map((rule, index) => {\n const dropdownList = getActionsList(rule);\n\n return (\n \n \n {index + 1} \n {rule.description} \n {locales.traficBlock.ruleTypes[rule.lock_type].label} \n \n \n handleToggleRuleStatus(rule, checked)}\n testId={`toggle-rule-${rule.rule_id}`}\n />\n \n \n \n \n );\n })}\n \n )}\n {mobile && (\n \n {rules && rules.map((rule, index) => {\n const dropdownList = getActionsList(rule);\n\n return (\n \n \n {locales.blockList.order}\n \n {index + 1}\n \n \n \n {locales.blockList.name}\n \n {rule.description}\n \n \n \n {locales.blockList.action}\n \n {locales.traficBlock.ruleTypes[rule.lock_type].label}\n \n \n \n {locales.blockList.toggleOn}\n \n \n handleToggleRuleStatus(rule, checked)}\n testId={`toggle-rule-${rule.rule_id}`}\n />\n \n \n \n \n );\n })}\n \n )}\n \n \n )}\n \n );\n};\n\nexport default Security;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n gap: 16px;\n justify-content: center;\n text-align: center;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n height: 100%;\n margin-bottom: 52px;\n }\n `};\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.extraDark};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.medium};\n margin: 0;\n `};\n`;\n\nexport const Message = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin: 0;\n `};\n`;\n\nexport const ButtonContainer = styled.div`\n display: flex;\n gap: 24px;\n margin-top: 16px;\n`;\n","import React from 'react';\nimport { Button, Modal } from 'gatorcomponents';\nimport * as Styles from './CloudflareConfirmModal.styles';\n\nconst CloudflareConfirmModal = ({\n onClose,\n icon,\n testId = 'cloudflare-confirm-modal',\n title = 'modal title',\n message = '',\n primaryButtonLabel = 'primary button label',\n buttonAction,\n secondaryButtonLabel = ' secondary button label',\n loading,\n}) => {\n const handleOnClose = () => {\n onClose && onClose();\n };\n\n const handlePrimaryAction = () => {\n buttonAction && buttonAction();\n };\n\n return (\n \n \n {icon && icon}\n {title && {title} }\n {message && {message} }\n\n \n \n \n \n );\n};\n\nexport default CloudflareConfirmModal;\n","import React, {\n useCallback, useEffect, useState,\n} from 'react';\nimport * as Styles from './ManageCloudFlareHandler.styles';\nimport {\n Button, Skeleton, IconTrashBg, IconLive, IconSecurityCheck, IconDoneChecklist,\n IconAtencion,\n IconCheckBg,\n Tabs,\n} from 'gatorcomponents';\nimport ManageCard from './components/ManageCard';\nimport useLocale from '@/hooks/useLocale';\nimport FaqDefault from '@/components/FrequentlyQuestions/FaqDefault';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { SUPPORT_DOMAINS_URL } from '@/config/urls/domainsUrls';\nimport { useResize } from '@/hooks/useResize';\nimport { useFeatureIsOn, useFeatureValue } from '@growthbook/growthbook-react';\nimport {\n CHARLIE_CLOUDFLARE_FEATURES, CHARLIE_CLOUDFLARE_SECURITY_RULES, CHARLIE_CLOUDFLARE_SPEED_ANALYSIS, CHARLIE_CLOUDFLARE_VISITORS_ANALYSIS,\n} from '@/config/GrowthBook/constants';\nimport { useHistory, useParams } from 'react-router';\nimport {\n ERROR_MODAL_STATUS, FEATURES, SUCCESS_MODAL_STATUS, TABS,\n} from './ManageCloudFlareHandler.types';\nimport { cloudflareActions } from '@/redux/modules';\nimport CloudFlareGenericModal from '../CloudFlareGenericModal';\nimport { ChangePlanModal } from '../CloudFlareHandler/components/ChangePlanModal';\nimport { cloudflareAnalytics } from '@/analytics/cloudflare';\nimport { FeatureSpeed } from './components/FeatureSpeed';\nimport { ProgressBarBlock } from './components/ProgressBarBlock';\nimport { FeatureVisitors } from './components/FeatureVisitors';\nimport { Security } from './components/Security';\nimport { CloudflareConfirmModal } from '../CloudflareConfirmModal';\n\nexport const ManageCloudFlareHandler = () => {\n const [displayCleanCacheModal, setDisplayCleanCacheModal] = useState(false);\n const [displayErrorModal, setDisplayErrorModal] = useState(false);\n const [displaySuccessModal, setDisplaySuccessModal] = useState(false);\n const [errorModalStatus, setErrorModalStatus] = useState([ERROR_MODAL_STATUS.GENERIC]);\n const [successModalStatus, setSuccessModalStatus] = useState([SUCCESS_MODAL_STATUS.GENERIC]);\n const [changeDomainModal, setChangeDomainModal] = useState(false);\n const [blockingErrorModal, setBlockingErrorModal] = useState(false);\n const [deleteSuccessModal, setDeleteSuccessModal] = useState(false);\n const [currentDomain, setCurrentDomain] = useState(null);\n const [changePlanSelectedOption, setChangePlanSelectedOption] = useState(null);\n const withSpeedDetails = useFeatureIsOn(CHARLIE_CLOUDFLARE_SPEED_ANALYSIS);\n const withVisitorsDetails = useFeatureIsOn(CHARLIE_CLOUDFLARE_VISITORS_ANALYSIS);\n const withSecurityRules = useFeatureIsOn(CHARLIE_CLOUDFLARE_SECURITY_RULES);\n const [activeTab, setActiveTab] = useState(TABS.tools);\n const [deleteRuleConfirmModal, setDeleteRuleConfirmModal] = useState({\n show: false,\n buttonAction: null,\n });\n\n const history = useHistory();\n const dispatch = useDispatch();\n const { cloudflareInternalId } = useParams();\n\n const faq = useSelector(state => state.newFaq);\n const cloudflareState = useSelector(state => state.cloudflare);\n const activeDomainsList = cloudflareState.activeDomains.list;\n\n const { features: featuresState } = cloudflareState;\n const { status: togglesStatus } = featuresState;\n\n const purgeCache = togglesStatus && togglesStatus[FEATURES.PURGE_CACHE] && togglesStatus[FEATURES.PURGE_CACHE];\n const developerMode = togglesStatus && togglesStatus[FEATURES.DEV_MODE] && togglesStatus[FEATURES.DEV_MODE];\n const underAttackMode = togglesStatus && togglesStatus[FEATURES.UNDER_ATTACK_MODE] && togglesStatus[FEATURES.UNDER_ATTACK_MODE];\n const alwaysOnlineMode = togglesStatus && togglesStatus[FEATURES.ALWAYS_ONLINE] && togglesStatus[FEATURES.ALWAYS_ONLINE];\n\n const someFeatureIsLoading = (developerMode && developerMode.loading)\n || (underAttackMode && underAttackMode.loading)\n || (alwaysOnlineMode && alwaysOnlineMode.loading);\n\n const getCurrentDomain = useCallback(() => {\n const domainData = activeDomainsList.find(domain => domain.cloudflare_internal_id.toString() === cloudflareInternalId);\n setCurrentDomain(domainData);\n }, [activeDomainsList, cloudflareInternalId]);\n\n useEffect(() => {\n getCurrentDomain();\n }, [getCurrentDomain]);\n\n const cloudflareFeatures = useFeatureValue(CHARLIE_CLOUDFLARE_FEATURES);\n\n const { cloudflare: cloudflareLocale, routes: routesLocale } = useLocale();\n const manageCloudflareLocale = cloudflareLocale.manageCdnHandler;\n\n const windowRect = useResize();\n const { width } = windowRect;\n const isMobile = width < 600;\n\n const MAXIMUM_REGISTERED_RULES = 5;\n const rulesQty = cloudflareState.rules.list.length;\n const securityRulesLeft = MAXIMUM_REGISTERED_RULES - rulesQty;\n\n const updateFeatureStatus = (feature, featureStatus) => {\n const status = featureStatus === true ? 'off' : 'on';\n\n dispatch(cloudflareActions.features.update.request({\n cloudflareInternalId, feature, status,\n }));\n };\n\n const handleToggleDeveloperMode = () => {\n if (developerMode.status) cloudflareAnalytics.deactivateDevModeToggle();\n if (!developerMode.status) cloudflareAnalytics.activateDevModeToggle();\n\n updateFeatureStatus(FEATURES.DEV_MODE, developerMode.status);\n };\n\n const handleToggleUnderAttackMode = () => {\n if (underAttackMode.status) cloudflareAnalytics.deactivateUnderAttackToggle();\n if (!underAttackMode.status) cloudflareAnalytics.activateUnderAttackToggle();\n\n updateFeatureStatus(FEATURES.UNDER_ATTACK_MODE, underAttackMode.status);\n };\n\n const handleToggleAlwaysOnlineMode = () => {\n if (alwaysOnlineMode.status) cloudflareAnalytics.deactivateAlwaysOnlineToggle();\n if (!alwaysOnlineMode.status) cloudflareAnalytics.activateAlwaysOnlineToggle();\n\n updateFeatureStatus(FEATURES.ALWAYS_ONLINE, alwaysOnlineMode.status);\n };\n\n const handleClickChangeDomain = (domain) => {\n setChangeDomainModal(domain);\n };\n\n const handleCleanCache = () => {\n cloudflareAnalytics.cleanCacheCta();\n dispatch(cloudflareActions.purgeCache.request({ cloudflareInternalId }));\n setDisplayCleanCacheModal(true);\n };\n\n const cardsProps = {\n [FEATURES.PURGE_CACHE]: {\n ...manageCloudflareLocale.cdnCards[FEATURES.PURGE_CACHE],\n button: {\n ...manageCloudflareLocale.cdnCards[FEATURES.PURGE_CACHE].button,\n onClick: handleCleanCache,\n },\n icon: \n \n );\n\n if (cloudflareState.activeDomains.loading || featuresState.loading || !currentDomain || somethingHasFailed) {\n return (\n \n {displayErrorModal && \n \n \n \n\n {Array.from(Array(4).keys()).map(item => (\n \n \n \n\n \n \n \n ))}\n \n );\n }\n\n const containerRules = {\n [TABS.tools]: (\n <>\n {Object.keys(cardsProps).map(key => cardsProps[key].active && (\n {manageCloudflareLocale.footerLabel} \n\n {mountFaqDefault}\n \n ),\n [TABS.speed]: (\n <>\n \n {displayErrorModal && \n \n )}\n\n \n \n {manageCloudflareLocale.hostingLabel(currentDomain.product_name)}\n \n\n \n \n {manageCloudflareLocale.selectedDomainLabel}\n \n\n \n \n {currentDomain.domain}\n \n \n \n \n\n {containerRules[activeTab]}\n\n \n );\n};\n\nexport default ManageCloudFlareHandler;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n margin: 0;\n padding: 16px 0px;\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n background-color: ${theme.v2.colors.white.primary};\n margin: 0 24px;\n padding: 24px;\n }\n `}\n`;\n\nexport const Header = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n padding: 24px 16px;\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n padding: 0px 0px 24px;\n }\n `}\n`;\n\nexport const DomainName = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.regular};\n gap: 8px;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n\n > div {\n position: relative;\n width: fit-content;\n }\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n align-items: center;\n color: ${theme.v2.colors.neutral.lowDark};\n flex-direction: row;\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n }\n `}\n`;\n\nexport const SkeletonRow = styled.div`\n ${({ theme }) => css`\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n gap: 8px;\n \n @media(min-width:${theme.v2.breakpoints.sm}){\n align-items: center;\n flex-direction: row;\n }\n `}\n`;\n\nexport const AlertContainer = styled.div`\n ${({ theme, status }) => css`\n background-color: ${theme.v2.colors.white.primary};\n display: flex;\n flex-direction: container;\n flex-wrap: wrap;\n gap: 24px;\n margin: 0px;\n padding: 24px 16px;\n\n > div {\n padding: 0px;\n }\n\n > button {\n align-self: center;\n }\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n flex-direction: row;\n flex-wrap: nowrap;\n max-width: ${status === 'nextDueDate' ? '788px' : '616px'};\n padding: 0px 0px 24px;\n }\n\n `}\n`;\n\nexport const DataContainer = styled.div`\n ${({ theme, $loading }) => css`\n background-color: ${theme.v2.colors.white.primary};\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: ${$loading ? '16px' : '24px 32px'};\n margin: 8px 0px 0px;\n padding: 24px 16px;\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n align-items: flex-end;\n margin: 0px;\n padding: 0px 0px 24px;\n }\n `}\n`;\n\nexport const DataItem = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const DataTitle = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const DataValue = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const ManageMentContainer = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 24px 32px;\n margin: 8px 0px 0px;\n padding: 16px;\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n border-top: 1px solid ${theme.v2.colors.feedback.canceledPure};\n flex-direction: row;\n margin: 0px;\n padding: 24px 0px;\n }\n `}\n`;\n\nexport const ContainerColumn = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n flex: 1 0 0%;\n gap: 16px;\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n flex: 1 0 606px;\n }\n `}\n`;\n\nexport const Card = styled.div`\n ${({ theme }) => css`\n border-radius: 4px;\n border: 1px solid ${theme.v2.colors.feedback.canceledPure};\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 24px;\n position: relative;\n width: 100%;\n\n > button {\n width: fit-content;\n }\n `}\n`;\n\nexport const CardTitle = styled.h3`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n gap: 8px;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n position: relative;\n `}\n`;\n","export const STATUS = {\n nextDueDate: 'nextDueDate',\n overDueDate: 'overDueDate',\n active: 'active',\n inProgress: 'in_progress',\n};\n\nexport const DAYS = {\n toDue: 5,\n};\n","import styled, { css } from 'styled-components';\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n padding: 16px;\n `}\n`;\n\nexport const LoaderContainer = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n min-height: 224px;\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n margin: 0;\n `}\n`;\n\nexport const RegularLabel = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: column;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 20px;\n margin-top: 24px;\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n\n p {\n margin: 0;\n }\n `}\n`;\n\nexport const SelectWrapper = styled.div`\n ${({ theme }) => css`\n margin-top: 16px;\n padding: 0 30px;\n word-break: break-all;\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n padding: 0%;\n }\n `}\n`;\n\nexport const ButtonsWrapper = styled.div`\n ${({ column }) => css`\n align-items: center;\n display: flex;\n gap: 8px;\n flex-direction: ${column && 'column'};\n justify-content: center;\n margin-top: 32px;\n `}\n`;\n\nexport const AlertWrapper = styled.div`\n ${({ theme }) => css`\n margin-top: 20px;\n\n & > div {\n display: flex;\n align-items: center;\n }\n\n a {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n\n p {\n margin: 0;\n }\n\n p > p:last-of-type {\n margin-top: 20px;\n }\n\n ul {\n margin: 0;\n padding-left: 22px;\n }\n\n strong {\n font-weight: 700;\n }\n `}\n`;\n\nexport const IconWrapper = styled.div`\n ${({ theme, isError }) => css`\n background-color: ${isError ? theme.v2.colors.feedback.problemMedium : theme.v2.colors.feedback.activePure};\n border-radius: 50%;\n display: flex;\n padding: 4px;\n\n svg {\n fill: ${theme.v2.colors.white.primary};\n }\n `}\n`;\n\nexport const GeneratedKeyContainer = styled.div`\n ${({ theme }) => css`\n flex-grow: 1;\n font-family: ${theme.v2.font.family.primary};\n\n p {\n margin: 0;\n }\n\n span {\n display: block;\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.bold};\n word-break: break-all;\n }\n `}\n`;\n\nexport const CopyButtonContainer = styled.div`\n flex-shrink: 0;\n`;\n\nexport const ResultContainer = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n gap: 16px;\n margin-top: 42px;\n\n p {\n margin: 0 0 8px;\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n flex-direction:column;\n }\n `}\n`;\n\nexport const ErrorLabelContainer = styled.div`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: column;\n font-size: ${theme.v2.font.sizes.xxs};\n gap: 20px;\n\n p {\n margin: 0;\n }\n `}\n`;\n","import React, { useEffect, useState } from 'react';\nimport * as Styles from './ModalEppKey.styles';\nimport { Modal } from '@/pages/common';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport {\n Alert, Button, IconCheck, IconInfo, Select, CopyPasteButton,\n} from 'gatorcomponents';\nimport { ORDER_EPP_KEY_MODAL_STEP } from './ModalEppKey.enum';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { domainsActions, preChatActions } from '@/redux/modules';\nimport { Loader } from '@/pages/common/v1/Loader';\nimport { useHistory } from 'react-router';\nimport { domainsAnalytics } from '@/analytics';\n\nconst ModalEppKey = () => {\n const [modalStatus, setModalStatus] = useState(ORDER_EPP_KEY_MODAL_STEP.LOADING_KEY);\n const { eppKey } = useSelector(state => state.newDomains);\n const { triage } = useSelector(state => state.preChat);\n const { domains: domainsLocale, routes } = useLocale();\n const dispatch = useDispatch();\n const history = useHistory();\n const { eppKey: eppKeyAnalytics } = domainsAnalytics;\n\n const activeDomainsOptions = eppKey.activeDomainsList.map(domain => ({\n value: domain.id,\n label: domain.domain,\n }));\n\n useEffect(() => {\n dispatch(domainsActions.activeDomainList.get(setModalStatus));\n }, [dispatch]);\n\n const handleOnClose = (clickedButton = '') => {\n dispatch(domainsActions.modalEppKey.close());\n setModalStatus(ORDER_EPP_KEY_MODAL_STEP.SELECT_DOMAIN);\n\n if (clickedButton === 'cancel') {\n eppKeyAnalytics.eppKeySecondtModalCancelClick();\n }\n if (clickedButton === 'understood') {\n eppKeyAnalytics.eppKeyThirdModalOk();\n }\n if (clickedButton === 'backToDomains') {\n eppKeyAnalytics.eppKeyFourthModalReturn();\n }\n\n if (triage.onEppKeyFlow) {\n dispatch(preChatActions.preChat.setShowPreChat(true));\n dispatch(preChatActions.eppKeyGen.onFlow(false));\n }\n };\n\n const handleConfirmDomainClick = () => {\n setModalStatus(ORDER_EPP_KEY_MODAL_STEP.CONFIRM_ORDER);\n eppKeyAnalytics.eppKeyFirstModalButtonClick();\n };\n\n const handleGenerateEppKeyClick = () => {\n dispatch(domainsActions.modalEppKey.get(eppKey.domainId, setModalStatus));\n eppKeyAnalytics.eppKeySecondtModalButtonClick();\n };\n\n const handleOpenTicketClick = () => {\n dispatch(domainsActions.modalEppKey.redirect(true));\n eppKeyAnalytics.eppKeyFourthModalOpenTicket();\n history.push(`${routes.help}${routes.supportforms}`);\n };\n\n const handleDomainSelectionChange = (option) => {\n dispatch(domainsActions.modalEppKey.change(option.label, option.value));\n };\n\n return (\n \n \n {modalStatus === ORDER_EPP_KEY_MODAL_STEP.LOADING_KEY && (\n \n \n )}\n\n {modalStatus === ORDER_EPP_KEY_MODAL_STEP.SELECT_DOMAIN && (\n <>\n \n {domainsLocale.modalEppKey.defaultTitle}\n \n \n {domainsLocale.modalEppKey.orderEppKeyAdvice}\n \n \n \n \n \n \n )}\n\n {modalStatus === ORDER_EPP_KEY_MODAL_STEP.CONFIRM_ORDER && (\n <>\n \n {domainsLocale.modalEppKey.defaultTitle}\n \n \n {domainsLocale.modalEppKey.confirmOrderAdvice}\n \n \n \n \n handleOnClose('cancel')}\n testId=\"cancel-epp-key-generation-button\"\n />\n \n \n )}\n\n {modalStatus === ORDER_EPP_KEY_MODAL_STEP.KEY_SUCCESS && (\n <>\n \n {domainsLocale.modalEppKey.successTitle}\n \n \n \n \n \n {domainsLocale.modalEppKey.keyGenerated(eppKey.domainName, eppKey.keyGenerated)}\n \n \n \n \n \n \n \n handleOnClose('understood')}\n testId=\"understood-button\"\n />\n \n \n )}\n\n {modalStatus === ORDER_EPP_KEY_MODAL_STEP.KEY_FAILURE && (\n <>\n \n {domainsLocale.modalEppKey.failureTitle}\n \n \n \n \n \n {domainsLocale.modalEppKey.failureInfo(eppKey.domainName)}\n \n \n \n handleOnClose('backToDomains')}\n testId=\"back-to-domains-fail-generation-button\"\n />\n \n \n )}\n\n \n \n );\n};\n\nexport default ModalEppKey;\n","import styled, { css } from 'styled-components';\n\nexport const CardText = styled.p`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n gap: 8px;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const CardTitle = styled.h3`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n gap: 8px;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n position: relative;\n `}\n`;\n\nexport const ManageList = styled.ul`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n margin: 8px 0px 0px 0px;\n padding: 0px;\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n gap: 24px;\n }\n `}\n`;\n\nexport const ManageSkeletonList = styled.ul`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 32px;\n margin: 8px 0px 0px 0px;\n padding: 0px;\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n gap: 24px;\n }\n `}\n`;\n\nexport const ManageItemSkeleton = styled.li`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n list-style-type: none;\n padding: 0px;\n \n @media(min-width:${theme.v2.breakpoints.sm}){\n display: flex;\n flex-direction: row;\n gap: 32px;\n \n > div:first-child {\n flex: 1 1 320px\n }\n }\n `}\n`;\n\nexport const ManageItem = styled.li`\n list-style-type: none;\n`;\n\nexport const ManageItemTitle = styled(CardTitle)`\n ${({ theme }) => css`\n font-weight: ${theme.v2.font.weights.regular};\n `}\n`;\n\nexport const ButtonWrapperDesktop = styled.div`\n ${({ theme }) => css`\n margin-left: auto;\n display: none;\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n padding: 0px 0px 0px 32px;\n display: block;\n }\n `}\n`;\n\nexport const ButtonWrapperMobile = styled.div`\n ${({ theme }) => css`\n display: block;\n margin-left: auto;\n margin: 14px 0px 6px;\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n display: none;\n margin: 0px;\n padding: 0px 0px 0px 32px;\n }\n `}\n`;\n\nexport const ManageItemDescription = styled(CardText)`\n ${({ theme }) => css`\n font-weight: ${theme.v2.font.weights.regular};\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n padding: 0px 0px 0px 32px;\n }\n `}\n`;\n\nexport const ManageDivider = styled.div`\n ${({ theme }) => css`\n border-bottom: 1px solid ${theme.v2.colors.feedback.canceledPure}\n `}\n`;\n","import React from 'react';\nimport * as Styles from './ManageOptionCard.styles';\nimport {\n Button,\n IconKey,\n IconPerfil,\n IconSecurity,\n IconSuccessShield,\n Skeleton,\n} from 'gatorcomponents';\n\nconst ManageOptionCard = ({\n loading,\n hasProtect,\n hasContact,\n hasRegister,\n renderEppKey,\n manageDomainHandlerLocale,\n dnsWizardAnalytics,\n handleRedirectAction,\n}) => {\n const handleClickOption = ({\n href, eppKey, hasProtect, hasRegister,\n }) => {\n handleRedirectAction && handleRedirectAction({\n href, eppKey, hasProtect, hasRegister,\n });\n };\n\n const renderIcon = ({ option }) => {\n if (option.testId === 'protect') {\n return (\n \n );\n\n const optionItem = ({\n option, href, eppKey, hasProtect, hasRegister,\n }) => {\n if (option.testId === 'register') {\n dnsWizardAnalytics.dnsWizardManageScreenButtonClick();\n }\n\n return (\n \n \n {renderIcon({ option })}\n\n {option.title}\n\n \n handleClickOption({\n href, eppKey, hasProtect, hasRegister,\n })}\n testId={`${option.testId}-cta`}\n />\n \n \n\n \n {option.description}\n \n\n \n handleClickOption({\n href, eppKey, hasProtect, hasRegister,\n })}\n testId={`${option.testId}-cta`}\n />\n \n \n );\n };\n\n if (loading) {\n return (\n \n {LoadingElement()}\n {LoadingElement()}\n {LoadingElement()}\n {LoadingElement()}\n \n );\n }\n\n return (\n \n {(hasProtect) && (\n optionItem({ option: manageDomainHandlerLocale.cardOptions.manage.protect, href: hasProtect && hasProtect.link, hasProtect: true })\n )}\n\n \n );\n};\n\nexport default ManageOptionCard;\n","import styled, { css } from 'styled-components';\n\nexport const CardTitle = styled.h3`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n flex-direction: row;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n gap: 8px;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n position: relative;\n `}\n`;\n\nexport const TagWrapperDesktop = styled.div`\n ${({ theme }) => css`\n display: none;\n \n @media(min-width:${theme.v2.breakpoints.sm}){\n display: block;\n }\n `}\n`;\n\nexport const TagWrapperMobile = styled.div`\n ${({ theme }) => css`\n display: block;\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n display: none;\n }\n `}\n`;\n\nexport const DnsContent = styled.div`\n ${({ theme }) => css`\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n gap: 8px;\n margin: 0px;\n\n @media(min-width:${theme.v2.breakpoints.sm}){\n flex-direction: row;\n }\n `}\n`;\n\n\nexport const DnsSpan = styled.p`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.neutral.lowDark};\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n gap: 8px;\n `}\n`;\n\nexport const SlashSpan = styled.span`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.feedback.canceledMedium};\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n gap: 8px;\n `}\n`;\n\n\nexport const NoPaddingAlertWrapper = styled.div`\n > div {\n padding: 0px;\n }\n`;\n","import React from 'react';\nimport * as Styles from './DnsCard.styles';\nimport {\n Alert,\n Button,\n IconDomain, IconFilledInfo, Tag, Tooltip,\n} from 'gatorcomponents';\n\nconst DnsCard = ({\n manageDomainHandlerLocale,\n isInPropagation,\n propagationStatus,\n detailState,\n isPointedToReserved,\n redirectToDnsWizard,\n}) => {\n const handleRedirect = () => {\n redirectToDnsWizard && redirectToDnsWizard();\n };\n\n return (\n <>\n \n \n \n\n {isInPropagation && (\n \n \n )}\n \n\n {isInPropagation && (\n \n \n )}\n\n \n <>\n \n {detailState.nameservers && detailState.nameservers.length\n ? `${detailState.nameservers[0]} `\n : '- '\n }\n / \n \n \n {detailState.nameservers && detailState.nameservers.length\n ? `${detailState.nameservers[1]}`\n : '- '\n }\n \n \n \n\n {isInPropagation && (\n \n \n )}\n\n {isPointedToReserved && (\n \n \n\n \n \n {manageDomainHandlerLocale.cardOptions.mail.description}\n \n \n\n \n \n\n \n \n \n );\n};\n\nexport default EmailCard;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { useHistory, useParams } from 'react-router';\nimport * as Styles from './ManageDomainHandler.styles';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n Alert,\n Button,\n Link,\n Skeleton,\n Tag,\n} from 'gatorcomponents';\nimport useLocale from '@/hooks/useLocale';\nimport {\n format, parseISO,\n} from 'date-fns';\nimport { STATUS } from './ManageDomainHandler.types';\nimport { ModalEppKey } from '@/components/Domain/ModalEppKey';\nimport { domainsActions } from '@/redux/modules';\nimport { domainsAnalytics } from '@/analytics';\nimport { ManageOptionCard } from './components/ManageOptionCard';\nimport { DnsCard } from './components/DnsCard';\nimport { EmailCard } from './components/EmailCard';\nimport { useResize } from '@/hooks/useResize';\nimport { useBillingStatus } from '@/hooks/domains/useBillingStatus';\n\n\nconst { dnsWizard: dnsWizardAnalytics, eppKey: eppKeyAnalytics } = domainsAnalytics;\nexport const ManageDomainHandler = () => {\n const { id } = useParams();\n const dispatch = useDispatch();\n const { detail: detailState, eppKey: eppkeyState } = useSelector(state => state.newDomains);\n const diagnosticState = useSelector(state => state.preChat);\n const [requestedDomainDetails, setRequestedDomainDetails] = useState(false);\n const { domains: domainsLocale, routes: routesLocale } = useLocale();\n const { manageDomainHandler: manageDomainHandlerLocale } = domainsLocale;\n const history = useHistory();\n\n const [loading, setLoading] = useState(true);\n const [propagationStatus, setPropagationStatus] = useState(null);\n const [hasProtect, setHasProtect] = useState(null);\n const [hasContact, setHasContact] = useState(null);\n const [hasRegister, setHasRegister] = useState(null);\n const [renderEppKey, setRenderEppKey] = useState(false);\n const [domainStatus, setDomainStatus] = useState(null);\n const windowRect = useResize();\n const { width } = windowRect;\n const isMobile = width < 600;\n\n const { getIsNextDueDate, getIsOverDue } = useBillingStatus();\n\n const checkLoaders = useCallback(() => {\n setLoading(!!diagnosticState.loading || !!detailState.loading);\n }, [diagnosticState.loading, detailState.loading]);\n\n const checkPropagationStatus = useCallback(() => {\n if (diagnosticState && diagnosticState.domainsPropagation && diagnosticState.domainsPropagation.length) {\n setPropagationStatus(diagnosticState.domainsPropagation.find(item => item.domain === detailState.domain));\n }\n }, [detailState.domain, diagnosticState]);\n\n const checkActions = useCallback(() => {\n if (detailState && detailState.actions.length) {\n setHasProtect(detailState.actions.find(item => item.name === 'protectId'));\n setHasContact(detailState.actions.find(item => item.name === 'editContact'));\n setHasRegister(detailState.actions.find(item => item.name === 'registrationLock'));\n\n const domainStatusIsActive = detailState.status === 'active';\n const isDotBR = detailState.domain && detailState.domain.includes('.com.br');\n const isEnom = detailState.registrar && detailState.registrar.toLowerCase() === 'enom';\n const renderEppKey = !isDotBR && !isEnom && domainStatusIsActive;\n setRenderEppKey(renderEppKey);\n }\n }, [detailState]);\n\n const mountFinancialStatus = useCallback(() => {\n if (detailState) {\n if (detailState.status === 'active') {\n const isNextDueDate = getIsNextDueDate(detailState);\n const isOverDue = getIsOverDue(detailState);\n\n if (isNextDueDate && !isOverDue) {\n setDomainStatus('nextDueDate');\n }\n\n if (isNextDueDate && isOverDue) {\n setDomainStatus('overDueDate');\n }\n\n if (!isNextDueDate && !isOverDue) {\n setDomainStatus(detailState.status);\n }\n }\n\n if (detailState.status !== 'active') {\n setDomainStatus(detailState.status);\n }\n }\n }, [detailState, getIsNextDueDate, getIsOverDue]);\n\n const requestDomainDetailById = useCallback(() => {\n if (id && !requestedDomainDetails) {\n dispatch(domainsActions.domains.requestDetail(id));\n setRequestedDomainDetails(true);\n }\n }, [dispatch, id, requestedDomainDetails]);\n\n const isPointedToReserved = detailState.pointedToReserved;\n const isInPropagation = !detailState.pointedToReserved\n && propagationStatus\n && propagationStatus.status === STATUS.inProgress;\n\n useEffect(() => {\n checkLoaders();\n }, [checkLoaders]);\n\n useEffect(() => {\n checkPropagationStatus();\n }, [checkPropagationStatus]);\n\n useEffect(() => {\n checkActions();\n }, [checkActions]);\n\n useEffect(() => {\n requestDomainDetailById();\n }, [requestDomainDetailById]);\n\n useEffect(() => {\n mountFinancialStatus();\n }, [mountFinancialStatus]);\n\n const cardOptionSkeleton = () => (\n <>\n \n \n );\n }\n\n if (manage) {\n href = `${routesLocale.subscriptions}${routesLocale.manageSubscription}/${detailState.id}/domain`;\n\n return (\n \n \n );\n }\n\n return (\n \n <>\n \n {title}\n \n \n {value}\n \n \n \n );\n };\n\n const getTagVariant = (status) => {\n if (status === 'nextDueDate') {\n return 'attention';\n }\n\n if (status === 'overDueDate') {\n return 'problem';\n }\n\n return 'active';\n };\n\n const redirectToInvoices = () => {\n history.push(`${routesLocale.invoices}${routesLocale.unpaid}`);\n };\n\n const getDnsCardProps = useCallback(() => {\n const defaultProps = {\n manageDomainHandlerLocale,\n isInPropagation,\n propagationStatus,\n detailState,\n isPointedToReserved,\n };\n\n\n const redirectToDnsWizard = () => {\n history.push(`${routesLocale.domains}${routesLocale.dnsWizard}/${detailState.id}`);\n };\n\n return {\n ...defaultProps,\n redirectToDnsWizard,\n };\n }, [\n detailState,\n history,\n isInPropagation,\n isPointedToReserved,\n manageDomainHandlerLocale,\n routesLocale,\n propagationStatus,\n ]);\n\n const getEmailCardProps = useCallback(() => {\n const defaultProps = {\n manageDomainHandlerLocale,\n };\n\n\n const redirectToEmail = () => {\n history.push(`${routesLocale.emailsList}`);\n };\n\n return {\n ...defaultProps,\n redirectToEmail,\n };\n }, [\n history,\n manageDomainHandlerLocale,\n routesLocale,\n ]);\n\n const getManageOptionCardProps = useCallback(() => {\n const defaultProps = {\n loading,\n hasProtect,\n hasContact,\n hasRegister,\n renderEppKey,\n manageDomainHandlerLocale,\n dnsWizardAnalytics,\n };\n\n const handleRedirectAction = ({\n href, eppKey, hasProtect, hasRegister,\n }) => {\n if (eppKey) {\n eppKeyAnalytics.eppKeyButtonClick();\n dispatch(domainsActions.modalEppKey.open(detailState.domain, detailState.id));\n return null;\n }\n\n if (hasProtect) {\n window.open(`${href}${detailState.id}#tabAddons`, '_blank');\n return null;\n }\n\n if (hasRegister) {\n window.open(`${href}${detailState.id}#tabReglock`, '_blank');\n return null;\n }\n\n if (href && href.startsWith('/')) {\n history.push(href);\n } else {\n window.open(`${href}${detailState.id}`, '_blank');\n }\n };\n\n return {\n ...defaultProps,\n handleRedirectAction,\n };\n }, [\n hasProtect,\n hasContact,\n hasRegister,\n loading,\n manageDomainHandlerLocale,\n renderEppKey,\n detailState,\n dispatch,\n history,\n ]);\n\n return (\n \n {eppkeyState.modalIsOpen && \n {loading\n ? (\n \n \n )\n : (\n \n {detailState.domain}\n {(domainStatus && [STATUS.active, STATUS.nextDueDate, STATUS.overDueDate].includes(domainStatus)) && (\n \n )\n }\n \n\n \n {dataItem({\n title: manageDomainHandlerLocale.domainData.registerDate,\n value: detailState.registrationDate && format(parseISO(detailState.registrationDate), 'dd/MM/yyyy'),\n })}\n\n {dataItem({\n title: manageDomainHandlerLocale.domainData.nextDueDate,\n value: detailState.nextDueDate && format(parseISO(detailState.nextDueDate), 'dd/MM/yyyy'),\n })}\n\n {dataItem({\n title: manageDomainHandlerLocale.domainData.cycle,\n value: detailState.billingCycle,\n })}\n\n {dataItem({\n manage: true,\n })}\n \n\n {(domainStatus && [STATUS.nextDueDate, STATUS.overDueDate].includes(domainStatus)) && (\n \n \n )}\n\n \n \n \n {loading\n ? cardOptionSkeleton()\n : (\n \n\n \n {loading\n ? cardOptionSkeleton()\n : (\n \n \n\n \n \n \n {manageDomainHandlerLocale.cardOptions.manage.title}\n \n\n \n \n \n \n );\n};\n\nexport default ManageDomainHandler;\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.neutral.highPure};\n display: flex;\n flex-direction: column;\n font-family: ${theme.v2.font.family.primary};\n min-height: calc(100vh - 80px);\n margin: 0 23px 16px 23px;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n margin: 0;\n padding: 23px;\n }\n `}\n`;\n\nexport const PageTitle = styled.h2`\n ${({ theme }) => css`\n align-items: center;\n color: ${theme.v2.colors.brand.primaryExtraDark};\n display: flex;\n gap: 4px;\n font-size: ${theme.v2.font.sizes.sm};\n font-weight: ${theme.v2.font.weights.bold};\n margin-top: 80px;\n margin-bottom: 16px;\n `}\n`;\n\nexport const BetaTag = styled.span`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.brand.primaryLowLight};\n border-radius: 4px;\n color: ${theme.v2.colors.brand.primaryExtraDark};\n display: flex;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n height: 24px;\n justify-content: center;\n margin-left: 5px;\n padding: 0 8px;\n `}\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryExtraDark};\n font-size: 36px;\n font-weight: ${theme.v2.font.weights.medium};\n line-height: 130%;\n margin-bottom: 0;\n margin-top: 0;\n max-width: 735px;\n text-align: center;\n\n strong {\n font-weight: ${theme.v2.font.weights.bold};\n color: ${theme.v2.colors.brand.primaryMedium};\n }\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n font-size: ${theme.v2.font.sizes.md};\n }\n `}\n`;\n\nexport const Price = styled.p`\n ${({ theme, free }) => css`\n color: ${free ? theme.v2.colors.neutral.lowDark : theme.v2.colors.neutral.highPure};\n font-size: ${free ? theme.v2.font.sizes.md : theme.v2.font.sizes.xxs};\n font-weight: ${free ? theme.v2.font.weights.bold : theme.v2.font.weights.medium};\n line-height: 130%;\n margin: ${free ? '15px 0 0 0' : '26px 0 0 0'};\n\n strong {\n font-weight: ${theme.v2.font.weights.bold};\n font-size: ${theme.v2.font.sizes.md};\n };\n\n `}\n`;\n\nexport const YearlyPrice = styled.span`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.highPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n margin-top: 5px;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowPure};\n font-size: ${theme.v2.font.sizes.xs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 150%;\n margin-bottom: 24px;\n margin-top: 4px;\n max-width: 655px;\n text-align: center;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n font-size: ${theme.v2.font.sizes.xxs};\n }\n `}\n`;\n\nexport const ChoosePlan = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.brand.primaryExtraDark};\n margin-bottom: 32px;\n text-align: center;\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: 130%;\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n font-size: ${theme.v2.font.sizes.sm};\n }\n `}\n`;\n\nexport const PlanCards = styled.div`\n align-items: baseline;\n display: flex;\n flex-wrap: wrap-reverse;\n gap: 22px;\n justify-content: center;\n margin-bottom: 50px;\n width: 100%;\n`;\n\nexport const Card = styled.div`\n ${({ theme, free }) => css`\n align-items: flex-start;\n background: ${free ? theme.v2.colors.neutral.highPure : theme.v2.colors.brand.primaryExtraDark};\n border-radius: 16px;\n border: 1px solid ${theme.v2.colors.neutral.highMedium};\n display: flex;\n flex-direction: column;\n height: fit-content;\n padding: 32px;\n width: ${free ? '322px' : '382px'};\n\n @media (max-width: ${theme.v2.breakpoints.md}) {\n width: 380px;\n }\n `}\n`;\n\nexport const CardTitle = styled.h4`\n ${({ theme, free }) => css`\n color: ${free ? theme.v2.colors.neutral.lowDark : theme.v2.colors.neutral.highPure};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: 130%;\n margin: 0;\n `}\n`;\n\nexport const CardDescription = styled.p`\n ${({ theme, free }) => css`\n color: ${free ? theme.v2.colors.neutral.lowDark : theme.v2.colors.neutral.highPure};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: 150%;\n margin: 14px 0;\n `}\n`;\n\nexport const PlanSpec = styled.p`\n ${({ theme, free }) => css`\n color: ${free ? theme.v2.colors.neutral.lowDark : theme.v2.colors.neutral.highPure};\n display: flex;\n gap: 8px;\n align-items: center;\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: normal;\n margin: 0;\n margin-top: 16px;\n `}\n`;\n","import React from 'react';\nimport { Button, IconCircleCheck, IconWand } from 'gatorcomponents';\nimport * as Styles from './LogoBuilderHandler.styles';\nimport useLocale from '@/hooks/useLocale';\n\nconst LogoBuilderHandler = () => {\n const { logoBuilder: logoBuilderLocale } = useLocale();\n\n return (\n \n \n {logoBuilderLocale.beta} \n \n\n {logoBuilderLocale.title} \n\n {logoBuilderLocale.description} \n\n {logoBuilderLocale.choosePlan} \n\n \n \n \n {logoBuilderLocale.freePlan}\n \n \n {logoBuilderLocale.free}\n \n \n {logoBuilderLocale.freePlanDescription}\n \n \n \n ))}\n \n\n \n \n {logoBuilderLocale.paidPlan}\n \n \n {logoBuilderLocale.paidPlanPrice}\n \n \n {logoBuilderLocale.yearlyPrice}\n \n \n {logoBuilderLocale.paidPlanDescription}\n \n \n \n ))}\n \n \n \n );\n};\n\nexport default LogoBuilderHandler;\n","import { SitesHandler } from '@/pages/sites/SitesHandler';\nimport { WizardHandler } from '@/pages/sites/WizardHandler';\nimport SitesPlans from '@/pages/SitesPlans';\nimport EmailsPage from '@/pages/Emails/EmailsPage';\nimport TicketDetails from '@/pages/SupportPage/TicketDetails';\nimport ProductDetailPage from '@/pages/Products/ProductDetailPage';\nimport Dns from '@/pages/Dns';\nimport SupportForms from '@/components/SupportForms';\nimport CreateEmail from '@/pages/Emails/CreateEmail';\nimport SupportPage from '@/pages/SupportPage';\nimport CoursesPage from '@/pages/Courses/CoursesPage';\nimport AcademyPassCtaPage from '@/pages/Courses/AcademyPassCtaPage';\nimport AcademyPassTrialPage from '@/pages/academy/landing/AcademyPassTrialPage/AcademyPassTrialPage.jsx';\nimport MktPlace from '@/pages/MktPlace';\nimport SecurityPageWrapper from '@/pages/Security/SecurityPageWrapper';\nimport SecurityCta from '@/pages/Security/SecurityCta/SecurityCta';\nimport CodeGuardCta from '@/pages/Security/CodeGuardCta/CodeGuardCta';\nimport SitelockProductDetailsPageWrapper from '@/pages/Security/Sitelock/SitelockProductDetailsPageWrapper';\nimport CoursePageDetail from '@/pages/Courses/CourseDetailPage';\nimport RedirectToWHMPage from '@/pages/SSO/RedirectToWHMPage';\nimport RedirectToSiteBuilderPage from '@/pages/SSO/RedirectToSiteBuilderPage/index';\nimport Error404Page from '@/pages/Error404Page';\nimport CreditCardPage from '@/pages/CreditCard';\nimport TitanMail from '@/pages/Emails/TitanMail';\nimport TitanUpgrade from '@/pages/Emails/TitanUpgrade';\nimport TitanChangeCycle from '@/pages/Emails/TitanChangeCycle';\nimport EmailsList from '@/pages/Emails/EmailsList';\nimport TitanHirePlan from '@/pages/Emails/TitanHirePlan';\nimport {\n CancelSubscriptionPage,\n CancelSubscriptionRenewalPage,\n RetentionSubscriptionPage,\n RetentionBenefitPage,\n ManageSubscriptionPage,\n SubscriptionsPage,\n} from '@/pages/billing';\nimport { DnsWizardPage } from '@/pages/domains';\nimport TitanCreateEMail from '@/pages/Emails/TitanMail/TitanCreateEMail';\nimport MyDataWrapper from '@/pages/MyData/MyDataWrapper';\nimport { Redirect } from 'react-router';\nimport React from 'react';\nimport { AsaasHandler } from '@/pages/asaas';\nimport {\n BackupHandler,\n ProductsPage,\n} from '@/pages/Products';\nimport InvoicesPage from '@/pages/Invoices/InvoicesPage';\nimport { ChangePasswordV2 } from '@/pages/MyData/ChangePasswordV2';\nimport { AccountSecurity } from '@/pages/MyData/AccountSecurity';\nimport SitelockDetailsHandler from '@/pages/Security/Sitelock/SitelockDetailsHandler';\nimport SiteLockUpgradeHandler from '@/pages/Security/Sitelock/SiteLockUpgradeHandler';\nimport DomainsListHandler from '@/pages/Domains/DomainsListHandler';\nimport { LinkNaBioStatistic, LinkNaBioHandler, LinkNaBioWizardHandler } from '@/pages/linkNaBio';\nimport { RetentionOfferPage } from '@/pages/billing/subscriptions/RetentionOfferPage';\nimport { RetentionOfferDiscountInNextRenewPage } from '@/pages/billing/subscriptions';\nimport CloudFlareHandler from '@/pages/Products/CloudFlare/CloudFlareHandler';\nimport ManageCloudFlareHandler from '@/pages/Products/CloudFlare/ManageCloudFlareHandler';\nimport { ManageDomainHandler } from '@/pages/Domains/ManageDomainHandler';\nimport LogoBuilder from '@/pages/LogoBuilder';\n\nexport const routesV2 = (t, dynamicName, featureToggles) => ([\n {\n path: `${t('routes.products')}${t('routes.cloudflare')}/:hostingId?`,\n name: t('title.v2.cloudflare'),\n icon: '',\n Component: CloudFlareHandler,\n },\n {\n path: `${t('routes.products')}${t('routes.cloudflare')}${t('routes.domaindetail')}/:cloudflareInternalId?`,\n name: t('title.v2.cloudflare'),\n icon: '',\n Component: ManageCloudFlareHandler,\n },\n {\n path: `${t('routes.asaas')}`,\n name: t('title.v2.asaas'),\n icon: 'gatorIconAsaas',\n Component: AsaasHandler,\n },\n {\n path: `${t('routes.logoBuilder')}`,\n name: t('title.v2.logoBuilder'),\n icon: 'gatorIconSites',\n Component: featureToggles && featureToggles.enableLogoBuilder ? LogoBuilder : Error404Page,\n },\n {\n path: `${t('routes.linkNaBio')}`,\n name: t('title.v2.linkNaBio'),\n icon: 'gatorIconSites',\n Component: LinkNaBioHandler,\n },\n {\n path: `${t('routes.linkNaBio')}/${t('routes.wizard')}/:profileId?`,\n name: t('title.v2.linkNaBio'),\n icon: 'gatorIconSites',\n Component: LinkNaBioWizardHandler,\n },\n {\n path: `${t('routes.linkNaBio')}/${t('routes.dataAnalysis')}/:profileId?`,\n name: t('title.v2.dataAnalysis'),\n icon: 'gatorIconSites',\n Component: LinkNaBioStatistic,\n },\n {\n path: t('routes.sites'),\n name: t('title.v2.sites'),\n icon: 'gatorIconSites',\n Component: () => \n {themes.slice(0, onLoadMore).map((template) => {\n if (template) {\n return (\n
\n \n {template.name} \n
\n \n
onOpenPreview(template.id)}\n >\n {t('newsite.preview')}\n \n onSelectTemplate(template.id)}\n >\n {t('newsite.useTheme')}\n \n \n \n {inputLabel}\n \n \n {menuItemDefaultText} \n \n {filterOptions.map(item => (\n \n {item.name}\n \n ))}\n \n \n);\n\nSelectFieldCategories.propTypes = {\n filterOptions: PropTypes.array.isRequired,\n handleChangeSelectValue: PropTypes.func.isRequired,\n inputLabel: PropTypes.string.isRequired,\n labelWidth: PropTypes.number.isRequired,\n menuItemDefaultText: PropTypes.string.isRequired,\n selectValue: PropTypes.string.isRequired,\n};\n\nexport default withStyles(styles)(SelectFieldCategories);\n","const styles = theme => ({\n card: {\n '&:hover': {\n [theme.breakpoints.up('sm')]: {\n outline: `2px solid ${theme.palette.primary.main}`,\n borderColor: 'transparent',\n },\n },\n cursor: 'pointer',\n width: '212px',\n height: '220px',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n borderRadius: '2px',\n position: 'relative',\n margin: '0 7px',\n boxSizing: 'border-box',\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n maxWidth: '291px',\n flexDirection: 'row',\n justifyContent: 'flex-start',\n height: 'auto',\n minHeight: '95px',\n margin: '5px 0',\n },\n },\n tag: {\n position: 'absolute',\n top: -1,\n right: -2,\n },\n tagSeleted: {\n top: -2,\n right: -3,\n },\n title: {\n textTransform: 'uppercase',\n color: theme.color.tundora,\n margin: '40px 0 8px 0',\n fontWeight: 500,\n fontSize: '14px',\n padding: '0',\n userSelect: 'none',\n [theme.breakpoints.down('sm')]: {\n margin: '3px 0 8px 0px',\n },\n },\n subtitle: {\n color: theme.color.regentGray,\n fontSize: '12px',\n padding: '0',\n display: 'inline-block',\n userSelect: 'none',\n },\n imageSelected: {\n padding: 29,\n paddingBottom: 30,\n [theme.breakpoints.down('sm')]: {\n padding: 25,\n paddingRight: 26,\n },\n },\n imageNoSelected: {\n padding: 30,\n [theme.breakpoints.down('sm')]: {\n padding: 26,\n },\n },\n image: {\n objectFit: 'contain',\n height: '70px',\n [theme.breakpoints.down('sm')]: {\n margin: '0 14px 0 20px',\n height: '44px',\n },\n },\n wrapperDescription: {\n textAlign: 'center',\n padding: '0 10%',\n [theme.breakpoints.down('sm')]: {\n textAlign: 'left',\n paddingRight: 15,\n paddingLeft: 6,\n },\n },\n selected: {\n border: `2px solid ${theme.palette.primary.main}`,\n borderRadius: 0,\n },\n notSelected: {\n border: `1px solid ${theme.color.geyser}`,\n },\n subtitleTag: {\n [theme.breakpoints.down('sm')]: {\n paddingRight: 23,\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles } from '@material-ui/core';\n\nimport Recommended from '@/media/newsite/tag-recommended.png';\nimport styles from './styles';\n\n\nconst NewSiteCard = ({\n classes, option, type, onHandleSelect, dataId,\n}) => (\n (type !== undefined ? onHandleSelect(type, option.id) : onHandleSelect(option.id))}\n role=\"presentation\"\n data-id={dataId}\n >\n {option.tag && (\n \n {option.icon}\n
\n )}\n \n
{option.title}
\n
{option.subtitle} \n
\n \n \n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(CreatorAdvanced);\n","const styles = theme => ({\n icon: {\n fontSize: '70px',\n [theme.breakpoints.down('sm')]: {\n fontSize: '44px',\n },\n },\n st0: { fill: '#C5E0EF' },\n st1: { fill: '#2898CD' },\n st2: { fill: '#0070BB' },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles, SvgIcon } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nclass CreatorFast extends React.PureComponent {\n render() {\n const { classes, ...rest } = this.props;\n return (\n \n \n \n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(CreatorFast);\n","const styles = () => ({\n icon: {\n marginTop: '30px',\n fontSize: '200px',\n height: '44px',\n },\n a: { fill: '#4580c2', fillRule: 'evenodd' },\n b: { fill: '#2e578c', fillRule: 'evenodd' },\n c: { fill: '#fbce3b', fillRule: 'evenodd' },\n d: { fill: '#eca93e', fillRule: 'evenodd' },\n e: { fill: '#edb248', fillRule: 'evenodd' },\n f: { fill: '#f1f1f2' },\n g: { fill: '#f68b51', fillRule: 'evenodd' },\n k: { fill: '#f68b51' },\n h: { fill: '#f26a23', fillRule: 'evenodd' },\n i: { fill: '#c56428', fillRule: 'evenodd' },\n j: { fill: '#ebeef2', fillRule: 'evenodd' },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles, SvgIcon } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nclass LogoMarca extends React.PureComponent {\n render() {\n const { classes, ...rest } = this.props;\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(LogoMarca);\n","const styles = theme => ({\n icon: {\n fontSize: '70px',\n [theme.breakpoints.down('sm')]: {\n fontSize: '44px',\n },\n },\n st0: { fill: '#AEC911' },\n st1: { fill: '#FEDFC5' },\n st2: { fill: '#FFE49B' },\n st3: { fill: '#DF5D00' },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles, SvgIcon } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nclass NewSiteWebsiteBuilder extends React.PureComponent {\n render() {\n const { classes, ...rest } = this.props;\n return (\n \n \n );\n }\n}\n\nexport default withStyles(styles)(NewSiteWebsiteBuilder);\n","const styles = theme => ({\n icon: {\n fontSize: '70px',\n [theme.breakpoints.down('sm')]: {\n fontSize: '44px',\n },\n },\n st0: { fill: '#727272' },\n st1: { fill: '#A7C7D3' },\n st2: { fill: '#D1D1D1' },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles, SvgIcon } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nclass NewSiteWordpress extends React.PureComponent {\n render() {\n const { classes, ...rest } = this.props;\n return (\n \n \n );\n }\n}\n\nexport default withStyles(styles)(NewSiteWordpress);\n","const styles = theme => ({\n icon: {\n fontSize: '70px',\n [theme.breakpoints.down('sm')]: {\n fontSize: '44px',\n },\n },\n st0: { fill: '#C5E0EF' },\n st1: { fill: '#2898CD' },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles, SvgIcon } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nclass NewSiteManual extends React.PureComponent {\n render() {\n const { classes, ...rest } = this.props;\n return (\n \n \n );\n }\n}\n\nexport default withStyles(styles)(NewSiteManual);\n","import { isBRServer } from '@/utils/Validators/validation';\n\nconst SITEBUILDER_IDS_ES = [5, 6, 7, 50, 51, 52, 53, 54, 174, 213];\n\nconst SITEBUILDER_TRADICIONAL_IDS_BY_BRAND = {\n br: [5, 6, 7, 50, 51, 52, 53, 54, 335, 341],\n es: SITEBUILDER_IDS_ES,\n};\n\nexport const SITEBUILDER_TRADICIONAL_IDS = SITEBUILDER_TRADICIONAL_IDS_BY_BRAND[isBRServer ? 'br' : 'es'];\n","const styles = theme => ({\n main: {\n backgroundColor: theme.color.mystic,\n position: 'relative',\n padding: '46px 176px',\n [theme.breakpoints.up('lg')]: {\n padding: '46px 176px',\n },\n [theme.breakpoints.up('md')]: {\n padding: '46px 80px',\n },\n [theme.breakpoints.up('sm')]: {\n padding: '46px 0px',\n },\n [theme.breakpoints.down('xs')]: {\n padding: 0,\n height: '100vh',\n paddingLeft: 0,\n paddingRight: 0,\n },\n },\n card: {\n position: 'relative',\n borderRadius: '0',\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n [theme.breakpoints.down('xs')]: {\n padding: 0,\n boxShadow: 'none',\n },\n },\n content: {\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n flexgrow: 1,\n paddingTop: '20px',\n minHeight: 'calc(92vh - 92px)',\n borderLeft: '5px solid',\n borderColor: theme.color.indigo,\n '& .status-icon': {\n color: theme.color.indigo,\n },\n [theme.breakpoints.down('xs')]: {\n border: 'none',\n minHeight: '92vh',\n paddingBottom: 0,\n paddingLeft: 16,\n },\n },\n title: {\n zIndex: 2,\n userSelect: 'none',\n fontSize: '24px',\n fontWeight: '400',\n textAlign: 'center',\n color: theme.color.emperor,\n margin: '45px 0 15px 0',\n [theme.breakpoints.down('xs')]: {\n padding: '0 40px',\n marginBottom: '30px',\n },\n },\n description: {\n userSelect: 'none',\n fontSize: '14px',\n margin: 0,\n textAlign: 'center',\n color: theme.color.emperor,\n whiteSpace: 'nowrap',\n [theme.breakpoints.down('xs')]: {\n maxWidth: 291,\n marginBottom: '10px',\n whiteSpace: 'inherit',\n },\n },\n descriptionMT20: {\n marginTop: 20,\n },\n choice: {\n userSelect: 'none',\n fontSize: '14px',\n margin: '10px 0 0 0',\n textAlign: 'center',\n color: theme.color.emperor,\n [theme.breakpoints.down('xs')]: {\n padding: '0 20px',\n },\n },\n cardsWrapper: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n margin: '25px 0',\n marginBottom: 5,\n [theme.breakpoints.down('sm')]: {\n flexDirection: 'column',\n alignItems: 'center',\n marginBottom: 30,\n },\n },\n buttonWrapper: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n marginTop: 29,\n },\n linkWrapper: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n height: '100%',\n flexgrow: 1,\n padding: '120px 0 34px 0',\n '& > a': {\n color: theme.color.indigo,\n '&:focus': {\n color: theme.color.indigo,\n },\n '&:active': {\n color: theme.color.indigo,\n },\n },\n },\n contentWrapper: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n zIndex: 1,\n },\n selectWrapper: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n '& > div': {\n width: '343px',\n marginLeft: '15px',\n [theme.breakpoints.down('sm')]: {\n width: '291px',\n },\n },\n [theme.breakpoints.down('sm')]: {\n flexDirection: 'column',\n },\n },\n selectWrapperThemes: {\n marginTop: 20,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n '& > div': {\n maxWidth: 291,\n },\n },\n select: {\n minWidth: '343px',\n },\n buttonCreateSite: {\n [theme.breakpoints.down('sm')]: {\n marginTop: 0,\n },\n },\n loader: {\n paddingLeft: 0,\n paddingRight: 0,\n },\n buttonAfterThemes: {\n marginTop: 20,\n },\n});\n\nexport default styles;\n","import React, { Component, Fragment } from 'react';\nimport {\n Card, CardContent, withStyles, Fade,\n} from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport { connect } from 'react-redux';\nimport { Redirect } from 'react-router-dom';\nimport withWidth, { isWidthDown } from '@material-ui/core/withWidth';\nimport NewSiteThemeCards from '@/components/NewSite/NewSiteThemeCards';\nimport Loader from '@/components/Layout/Loader';\nimport SelectField from '@/components/Fields/SelectField';\nimport SelectFieldCategories from '@/components/Fields/SelectFieldCategories';\nimport NewSiteCard from '@/components/Cards/NewSiteCard';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport ActionButton from '@/components/Buttons/ActionButton';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport {\n loadOnboardingDomains, loadOnboardingThemes, filterThemesByCategory, cleanFilterThemesByCategories,\n selectTemplateTheme, loadSSOByDomainId, cleanSelectedTemplate, siteCreateDismiss, sendWebsiteBuilderTrace,\n} from '@/redux/actions/onboarding';\nimport CreatorAdvanced from '@/media/newsite/icons/CreatorAdvanced';\nimport CreatorFast from '@/media/newsite/icons/CreatorFast';\nimport { websiteBuilderDismiss } from '@/redux/actions/summary';\nimport { PORTAL_ONBOARDING_PROCCESS_URL } from '@/config/api';\nimport LogoMarca from '@/media/logo/LogoMarca';\nimport { COUNTRY } from '@/config';\nimport { PREVIEW_WEBSITEBUILDER_TEMPLATE } from '@/config/whmcsUrls';\nimport NewSiteWebsiteBuilder from '@/media/newsite/icons/NewSiteWebsiteBuilder';\nimport NewSiteWordpress from '@/media/newsite/icons/NewSiteWordpress';\nimport NewSiteManual from '@/media/newsite/icons/NewSiteManual';\nimport { updateSiteBuilderStatusOnMySitesPage } from '@/redux/actions/productGroups';\nimport { SITEBUILDER_TRADICIONAL_IDS } from '@/config/products/sitebuilder';\nimport styles from './styles';\n\n\nclass NewSitePage extends Component {\n constructor(props) {\n super(props);\n const { t } = this.props;\n this.themeCards = React.createRef();\n this.handleSubmit = this.handleSubmit.bind(this);\n\n this.state = {\n options: [\n {\n id: 1,\n icon: \n
\n \n \n
\n\n
{t('newsite.welcome')} \n\n
\n
{t('newsite.description')}
\n
\n
\n\n
\n {(showOptions && options.length > 1) ? (\n \n {t('newsite.siteModes.subtitle2')}
\n\n \n {options.map(option => (\n
\n \n ) : (\n
\n )}\n \n\n
\n {showModeOptions ? (\n \n\n {\n options.length === 1 ? (\n
\n {featureToggles.deprecatedTraditional ? description : t('newsite.siteModes.subtitle2')}\n
\n ) : (\n <>\n
\n {featureToggles.deprecatedTraditional ? title : t('newsite.siteModes.title')}\n \n
\n {featureToggles.deprecatedTraditional ? description : t('newsite.siteModes.subtitle')}\n
\n \n )\n }\n
\n {!loadingWebsiteBuilderFlux ? (\n modes.map(option => (\n
\n
\n )}\n \n\n
\n {showButtonCreate ? (\n \n ) : (\n
\n )}\n \n
\n {isShowThemeList ? (\n \n
{t('newsite.themes.title')} \n
\n )}\n \n {isShowThemeList && filteredThemes.length > 0 && (\n \n this.handleLoadMore()}>{t('btn.loadMore')} \n )}\n \n )}\n\n \n {selectedTemplateId !== -1 ? (\n \n \n {t('newsite.create')}\n \n
\n )}\n \n\n \n this.handleWebsiteBuilderDismiss()}\n to={`${t('routes.sitesPage')}`}\n >\n {t('persona.createLater')}\n \n
\n\n \n \n \n );\n }\n}\n\nconst mapStateToProps = state => ({\n domains: state.onboarding.products,\n filteredThemes: state.onboarding.filteredThemes,\n themes: state.onboarding.themes,\n loadingThemes: state.onboarding.loadingThemes,\n categories: state.onboarding.themes.categories,\n selectedTemplateId: state.onboarding.selectedTemplateId,\n sso: state.onboarding.sso,\n websiteBuilderTraditional: state.onboarding.webSitebuilderTraditional,\n persona: state.summary.persona,\n activateWebsitebuilderPerProduct: state.onboarding.activateWebsitebuilderPerProduct,\n loadingWebsiteBuilderFlux: state.onboarding.loading,\n featureToggles: state.featureToggles.toggles,\n});\n\nconst mapDispatchToProps = dispatch => ({\n onloadOnboardingDomains: () => dispatch(loadOnboardingDomains()),\n onloadOnboardingThemes: () => dispatch(loadOnboardingThemes()),\n onFilterThemesByCategories: categorieName => dispatch(filterThemesByCategory(categorieName)),\n onCleanFilterThemesByCategory: () => dispatch(cleanFilterThemesByCategories()),\n onSelectTemplateTheme: templateId => dispatch(selectTemplateTheme(templateId)),\n onLoadSSOByDomainId: domainId => dispatch(loadSSOByDomainId(domainId)),\n onCleanSelectedTemplate: () => dispatch(cleanSelectedTemplate()),\n onWebsiteBuilderDismiss: () => dispatch(websiteBuilderDismiss()),\n onSiteCreateDismiss: hostingid => dispatch(siteCreateDismiss(hostingid)),\n onSendWebsiteBuilderTrace: trace => dispatch(sendWebsiteBuilderTrace(trace)),\n onUpdateSiteBuilderStatusOnMySitesPage: (id, status) => dispatch(updateSiteBuilderStatusOnMySitesPage(id, status)),\n});\n\nexport default withWidth()(withI18n()(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(NewSitePage))));\n","const styles = theme => ({\n icon: {\n fontSize: '160px',\n position: 'absolute',\n top: '130px',\n left: '5px',\n [theme.breakpoints.only('xs')]: {\n top: '-10px',\n left: '-55px',\n },\n [theme.breakpoints.only('sm')]: {\n display: 'none',\n },\n [theme.breakpoints.only('md')]: {\n left: '5px',\n },\n },\n st0: { fill: '#C5E0EF' },\n st1: { fill: '#D1D1D1' },\n st2: { fill: '#FFE49B' },\n st3: { fill: '#69D998' },\n st4: { fill: '#FFB8D5' },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles, SvgIcon } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nclass FireBottomLeft extends React.PureComponent {\n render() {\n const { classes, className, ...rest } = this.props;\n return (\n \n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(FireBottomLeft);\n","const styles = theme => ({\n icon: {\n fontSize: '160px',\n position: 'absolute',\n top: '130px',\n right: '5px',\n [theme.breakpoints.only('xs')]: {\n top: '-10px',\n right: '-55px',\n },\n [theme.breakpoints.only('sm')]: {\n display: 'none',\n },\n [theme.breakpoints.only('md')]: {\n right: '5px',\n },\n },\n st0: { fill: '#C5E0EF' },\n st1: { fill: '#D1D1D1' },\n st2: { fill: '#FFE49B' },\n st3: { fill: '#69D998' },\n st4: { fill: '#FFB8D5' },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles, SvgIcon } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nclass FireBottomLeft extends React.PureComponent {\n render() {\n const { classes, className, ...rest } = this.props;\n return (\n \n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(FireBottomLeft);\n","const styles = theme => ({\n icon: {\n fontSize: '160px',\n position: 'absolute',\n top: '472px',\n left: '5px',\n [theme.breakpoints.down('xs')]: {\n display: 'none',\n },\n [theme.breakpoints.down('sm')]: {\n display: 'none',\n },\n },\n st0: { fill: '#C5E0EF' },\n st1: { fill: '#D1D1D1' },\n st2: { fill: '#FFE49B' },\n st3: { fill: '#69D998' },\n st4: { fill: '#FFB8D5' },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles, SvgIcon } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nclass FireBottomLeft extends React.PureComponent {\n render() {\n const { classes, className, ...rest } = this.props;\n return (\n \n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(FireBottomLeft);\n","const styles = theme => ({\n icon: {\n fontSize: '160px',\n position: 'absolute',\n top: '472px',\n right: 10,\n [theme.breakpoints.down('sm')]: {\n display: 'none',\n },\n [theme.breakpoints.down('xs')]: {\n display: 'none',\n },\n },\n st0: { fill: '#C5E0EF' },\n st1: { fill: '#D1D1D1' },\n st2: { fill: '#FFE49B' },\n st3: { fill: '#69D998' },\n st4: { fill: '#FFB8D5' },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles, SvgIcon } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nclass FireBottomLeft extends React.PureComponent {\n render() {\n const { classes, className, ...rest } = this.props;\n return (\n \n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(FireBottomLeft);\n","const styles = theme => ({\n icon: {\n fontSize: '70px',\n [theme.breakpoints.down('sm')]: {\n fontSize: '44px',\n },\n },\n st0: { fill: '#E9EDF1' },\n st1: { fill: '#C5E0EF' },\n st2: { fill: '#0070BB' },\n st3: { fill: '#FECBAA' },\n st4: { fill: '#FFAE85' },\n st5: { fill: '#727272' },\n st6: { fill: '#4C4C4C' },\n st7: { fill: '#2898CD' },\n st8: { fill: '#D1D1D1' },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles, SvgIcon } from '@material-ui/core';\n\nimport styles from './styles';\n\n\nclass FeedbackNewSite extends React.PureComponent {\n render() {\n const { classes, className, ...rest } = this.props;\n return (\n \n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(FeedbackNewSite);\n","const styles = theme => ({\n card: {\n border: `1px solid ${theme.color.regentGray}`,\n width: '212px',\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n flexDirection: 'column',\n borderRadius: '2px',\n position: 'relative',\n boxSizing: 'border-box',\n paddingTop: '5px',\n paddingBottom: '30px',\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n maxWidth: '291px',\n flexDirection: 'row',\n justifyContent: 'flex-start',\n height: 'auto',\n padding: 0,\n },\n },\n title: {\n textTransform: 'uppercase',\n color: theme.color.emperor,\n marginBottom: 10,\n marginTop: 0,\n fontWeight: 500,\n fontSize: '14px',\n padding: '0 20px',\n userSelect: 'none',\n [theme.breakpoints.down('sm')]: {\n padding: 0,\n },\n },\n subtitle: {\n color: theme.color.regentGray,\n fontSize: '12px',\n padding: '0',\n display: 'inline-block',\n userSelect: 'none',\n },\n link: {\n display: 'block',\n color: theme.color.indigo,\n fontSize: '14px',\n userSelect: 'none',\n '&:hover': {\n color: theme.color.indigo,\n },\n '&:focus': {\n color: theme.color.indigo,\n },\n '&:active': {\n color: theme.color.indigo,\n },\n },\n image: {\n padding: 30,\n objectFit: 'contain',\n height: '70px',\n [theme.breakpoints.down('sm')]: {\n height: '53px',\n padding: '30px 18px 30px 30px',\n },\n },\n wrapperDescription: {\n textAlign: 'center',\n padding: '0 10%',\n [theme.breakpoints.down('sm')]: {\n textAlign: 'left',\n paddingRight: 15,\n paddingLeft: 6,\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles } from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport FeedbackNewSite from '@/media/newsite/icons/FeedbackNewSite';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport styles from './styles';\n\n\nconst NewSiteFeedbackCard = ({\n classes,\n title,\n href,\n t,\n}) => (\n \n
\n
\n
{title}
\n
{t('newsite.feedbackLink')} \n
\n
{title} \n );\n }\n}\n\nexport default withStyles(styles)(NewSiteTitle);\n","const styles = theme => ({\n linkWrapper: {\n position: 'absolute',\n top: 20,\n right: 20,\n display: 'flex',\n height: '28px',\n '& > a': {\n color: theme.color.tundora,\n '&:hover': {\n color: theme.color.tundora,\n },\n '&:focus': {\n color: theme.color.tundora,\n },\n '&:active': {\n color: theme.color.tundora,\n },\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles } from '@material-ui/core';\nimport { Close } from '@material-ui/icons';\nimport LinkButton from '@/components/Buttons/LinkButton';\nimport styles from './styles';\n\n\nclass NewSiteCloseLink extends React.PureComponent {\n render() {\n const { classes, action } = this.props;\n return (\n \n action()} to=\"/\">\n \n
\n );\n }\n}\n\nexport default withStyles(styles)(NewSiteCloseLink);\n","import { isBRServer } from '@/utils/Validators/validation';\n\nconst SUPPORT_URLS_BY_BRAND = {\n br: {\n fast: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360020883234',\n advanced: 'https://suporte.hostgator.com.br/hc/pt-br/sections/115000138513-Criador-de-sites',\n wordpress: 'https://suporte.hostgator.com.br/hc/pt-br/articles/115001935813',\n cpanel: 'https://suporte.hostgator.com.br/hc/pt-br/articles/360005082713',\n },\n es: {\n fast: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360026789532',\n advanced: 'https://soporte-latam.hostgator.com/hc/es-419/sections/115000230292-Creador-de-Sitios',\n wordpress: 'https://soporte-latam.hostgator.com/hc/es-419/articles/217577968-Softaculous-C%C3%B3mo-instalar-WordPress-',\n cpanel: 'https://soporte-latam.hostgator.com/hc/es-419/articles/360014249751-Como-vaciar-la-papelera-del-gerenciador-de-archivos',\n },\n};\n\nexport const TUTORIALS_URLS = SUPPORT_URLS_BY_BRAND[isBRServer ? 'br' : 'es'];\n","const styles = theme => ({\n card: {\n position: 'relative',\n borderRadius: '0',\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n [theme.breakpoints.down('xs')]: {\n padding: 0,\n boxShadow: 'none',\n height: '100vh',\n },\n },\n contentWrapper: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n },\n title: {\n margin: '45px 0',\n },\n content: {\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n flexgrow: 1,\n padding: '20px',\n minHeight: 'calc(92vh - 92px)',\n borderLeft: '5px solid',\n borderColor: theme.color.indigo,\n '& .status-icon': {\n color: theme.color.indigo,\n },\n [theme.breakpoints.down('xs')]: {\n border: 'none',\n minHeight: '92vh',\n paddingBottom: 0,\n paddingLeft: 16,\n },\n },\n warningWrapper: {\n width: '291px',\n marginBottom: '30px',\n },\n fireTopRight: {\n [theme.breakpoints.down('sm')]: {\n display: 'none',\n },\n },\n fireTopLeft: {\n [theme.breakpoints.down('sm')]: {\n left: '-55px',\n top: '-10px',\n },\n },\n fireBottomLeft: {\n [theme.breakpoints.down('sm')]: {\n display: 'block',\n bottom: '-20px',\n left: '-55px',\n },\n },\n fireBottomRight: {\n [theme.breakpoints.down('sm')]: {\n display: 'block',\n bottom: '-20px',\n right: '-55px',\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withI18n } from 'react-i18next';\nimport { withStyles, Card, CardContent } from '@material-ui/core';\nimport { connect } from 'react-redux';\nimport FireTopLeft from '@/media/newsite/icons/FireTopLeft';\nimport FireTopRight from '@/media/newsite/icons/FireTopRight';\nimport FireBottomLeft from '@/media/newsite/icons/FireBottomLeft';\nimport FireBottomRight from '@/media/newsite/icons/FireBottomRight';\nimport NewSiteFeedbackCard from '@/components/NewSite/NewSiteFeedbackCard/index';\nimport NewSiteTitle from '@/components/NewSite/NewSiteTitle/index';\nimport NewSiteCloseLink from '@/components/NewSite/NewSiteCloseLink/index';\nimport LogoMarca from '@/media/logo/LogoMarca';\nimport { cleanFilterThemesByCategories, cleanWebsiteBuilderProduct } from '@/redux/actions/onboarding';\nimport { newSiteFluxDismiss } from '@/redux/actions/summary';\nimport { TUTORIALS_URLS } from '@/config/urls/tutorialsUrls';\nimport styles from './styles';\n\n\nclass NewSiteFeedback extends React.Component {\n handleWebsiteBuilderDismiss = () => {\n const { onNewSiteFluxDismiss, onCleanFilterThemesByCategory, onCleanWebsiteBuilderProduct } = this.props;\n onCleanWebsiteBuilderProduct();\n onNewSiteFluxDismiss();\n onCleanFilterThemesByCategory();\n }\n\n getMessageByCreationTool = () => {\n const { selectedTool, t } = this.props;\n let message = '';\n switch (selectedTool) {\n case 'fast':\n message = t('newsite.feedbackTitleCreator');\n break;\n case 'advanced':\n message = t('newsite.feedbackTitleCreator');\n break;\n case 'wordpress':\n message = t('newsite.feedbackTitleWordpress');\n break;\n case 'cpanel':\n message = t('newsite.feedbackTitleFile');\n break;\n default:\n message = '';\n break;\n }\n return message;\n }\n\n render() {\n const {\n classes,\n t,\n selectedTool,\n } = this.props;\n\n const link = selectedTool !== '' && TUTORIALS_URLS[selectedTool];\n const message = this.getMessageByCreationTool();\n\n return (\n \n \n \n
\n \n \n );\n }\n}\n\n\nconst mapStateToProps = state => ({\n selectedTool: state.onboarding.selectedTool,\n});\n\nconst mapDispatchToProps = dispatch => ({\n onNewSiteFluxDismiss: () => dispatch(newSiteFluxDismiss()),\n onCleanFilterThemesByCategory: () => dispatch(cleanFilterThemesByCategories()),\n onCleanWebsiteBuilderProduct: () => dispatch(cleanWebsiteBuilderProduct()),\n});\n\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withI18n()(withStyles(styles)(NewSiteFeedback)));\n","const styles = theme => ({\n main: {\n backgroundColor: theme.color.mystic,\n position: 'relative',\n padding: '46px 176px',\n [theme.breakpoints.down('xs')]: {\n padding: 0,\n height: '100vh',\n paddingLeft: 0,\n paddingRight: 0,\n },\n [theme.breakpoints.up('sm')]: {\n padding: '46px 0px',\n },\n [theme.breakpoints.up('md')]: {\n padding: '46px 80px',\n },\n [theme.breakpoints.up('lg')]: {\n padding: '46px 176px',\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport { withStyles } from '@material-ui/core';\nimport NewSiteFeedback from '@/components/NewSite/NewSiteFeedback/index';\nimport styles from './styles';\n\n\nconst FeedbackSite = ({ classes }) => (\n \n
\n);\n\nexport default withStyles(styles)(FeedbackSite);\n","import styled, { css } from 'styled-components';\n\nexport const ContainerWrapper = styled.div`\n display: flex;\n min-height: calc(100vh - 80px);\n padding: 40px;\n position: relative;\n`;\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n background-color: ${theme.v2.colors.white.primary};\n display: flex;\n flex-direction: column;\n max-width: 100%;\n min-height: fit-content;\n padding: 40px;\n position: relative;\n width: 100%;\n\n > div {\n width: 100%;\n }\n `}\n`;\n\nexport const CloseButtonWrapper = styled.div`\n display: block;\n height: 38px;\n height: fit-content: !important;\n position: absolute;\n right: 38px;\n width: fit-content !important;\n`;\n\nexport const LogoWrapper = styled.div`\n align-items: center;\n display: flex;\n height: 19px;\n justify-content: center;\n`;\n","import React from 'react';\n\nconst HgOrangeLogo = () => (\n \n \n);\n\nexport default HgOrangeLogo;\n","export const emailErrors = {\n DATA_IN_USE: 4,\n ALREADY_VALIDATED: 5,\n REQUEST_DISABLED: 6,\n};\n\nexport const EmailSteps = {\n VALIDATE_EMAIL: 'validate_email',\n CHANGE_EMAIL: 'change_email',\n SENT_EMAIL: 'sent_email',\n};\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n`;\n\nexport const BackButtonWrapper = styled.div`\n display: block;\n left: 38px;\n position: absolute;\n top: 38px;\n`;\n\nexport const RelativeIpunt = styled.div`\n display: flex;\n flex-direction: column;\n position: relative;\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 40px 0px 0px 0px;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 0px 0px;\n `}\n`;\n\nexport const Tip = styled.span`\n ${({ theme }) => css`\n align-items: flex-start;\n color: ${theme.v2.colors.neutral.lowPure};\n display: flex;\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxxs};\n font-weight: ${theme.v2.font.weights.regular};\n gap: 8px;\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0;\n position: absolute;\n right: -220px;\n width: 204px;\n\n svg {\n flex: 0 0 24px;\n margin: 4px 0px 0px 0px;\n }\n\n @media screen and (max-width: ${theme.v2.breakpoints.md}){\n align-items: center;\n margin: 0px;\n margin: 10px 0px 0px 0px;\n position: relative;\n right: unset;\n width: unset;\n\n svg {\n flex: 0 0 24px;\n margin: 0px;\n }\n }\n `}\n`;\n\nexport const Form = styled.form`\n display: flex;\n flex-direction: column;\n gap: 24px;\n margin: 32px 0px 67px 0px;\n max-width: 498px;\n width: 100%;\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ theme }) => css`\n align-items: center;\n display: flex;\n justify-content: center;\n margin: 8px 0px 0px 0px;\n width: 100%;\n\n @media screen and (max-width: ${theme.v2.breakpoints.md}){ \n flex-direction: column\n }\n `}\n`;\n\nexport const NoAccessTitle = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: auto 0px 0px 0px;\n `}\n`;\n\nexport const NoAccessDescription = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 8px 0px 0px 0px;\n `}\n`;\n\nexport const OpenFormButtonWrapper = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n margin: 24px 0px 40px 0px;\n`;\n","import styled, { css } from 'styled-components';\n\nexport const SendWrapper = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n width: 100%;\n`;\n\nexport const Title = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 0px;\n `}\n`;\n\nexport const DescriptionWrapper = styled.div`\n display: flex;\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px 0px 0px 0px;\n `}\n`;\n","import React from 'react';\nimport { Timer } from '@/pages/common/v1';\nimport * as Styles from './SendAgain.styles';\n\nconst SendAgain = ({\n emailVerifyLocale,\n countDownResend,\n setCountDownResend,\n}) => (\n \n {emailVerifyLocale.emailNotRecived} \n\n \n \n {emailVerifyLocale.resendText}\n \n setCountDownResend(0)}\n />\n \n \n \n \n);\n\nexport default SendAgain;\n","import React from 'react';\nimport * as Styles from './ChangeEmail.styles';\nimport {\n Button, IconButton, IconLoading, Input, IconIdea,\n} from 'gatorcomponents';\nimport { SendAgain } from '../SendAgain';\nimport { useResize } from '@/hooks/useResize';\n\nconst ChangeEmail = ({\n changeEmailLocale,\n email = 'sample@mail.com',\n changeEmailForm,\n setChangeEmailForm,\n validateFields,\n disabledSubmit,\n requestEmailChange,\n countDownResend,\n setCountDownResend,\n loadingChange,\n emailVerifyLocale,\n handleGoBack,\n openForm,\n changeFlow,\n}) => {\n const windowRect = useResize();\n const { width } = windowRect;\n const mobile = width < 450;\n\n const handleChangeInput = ({ value, field }) => {\n setChangeEmailForm({\n ...changeEmailForm,\n [field]: {\n value,\n error: '',\n },\n });\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n const hasErrors = validateFields();\n if (!hasErrors) {\n requestEmailChange();\n }\n };\n\n return (\n \n {!changeFlow && (\n \n \n )}\n\n \n {changeEmailLocale.title}\n \n\n \n {changeEmailLocale.description({ email })}\n \n\n \n \n handleChangeInput({ value: e.target.value, field: 'email' })}\n value={changeEmailForm.email.value}\n label={changeEmailLocale.form.mailLabel}\n errorMessage={changeEmailForm.email.error}\n onBlur={validateFields}\n testId=\"email\"\n />\n\n \n \n \n\n handleChangeInput({ value: e.target.value, field: 'checkEmail' })}\n value={changeEmailForm.checkEmail.value}\n label={changeEmailLocale.form.checkEmailLabel}\n errorMessage={changeEmailForm.checkEmail.error}\n onBlur={validateFields}\n testId=\"checkEmail\"\n />\n handleChangeInput({ value: e.target.value, field: 'password' })}\n placeholder={changeEmailLocale.form.passwordPlaceholder}\n value={changeEmailForm.password.value}\n label={changeEmailLocale.form.passwordLabel}\n errorMessage={changeEmailForm.password.error}\n onBlur={validateFields}\n testId=\"password\"\n />\n\n \n {countDownResend > 0\n ? (\n \n \n\n \n {changeEmailLocale.noAccessTitle}\n \n \n {changeEmailLocale.noAccessDescription}\n \n\n \n \n \n );\n};\n\nexport default ChangeEmail;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 40px 0px 0px 0px;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 0px 0px;\n `}\n`;\n\nexport const SendAgainWrapper = styled.div`\n display: flex;\n margin: 64px 0px 0px 0px;\n`;\n\nexport const TitleNotReceived = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 64px 0px 0px 0px;\n `}\n`;\n\nexport const DescriptionNotReceived = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px 0px 0px 0px;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 16px;\n margin: 24px 0px 0px 0px;\n\n @media screen and (max-width: ${theme.v2.breakpoints.md}){ \n flex-direction: column\n }\n `}\n`;\n","import React from 'react';\nimport * as Styles from './SentEmail.styles';\nimport { SendAgain } from '../SendAgain';\nimport { Button, IconLoading } from 'gatorcomponents';\n\nconst SentEmail = ({\n emailVerifyLocale,\n sentEmailLocale,\n clientInfo,\n countDownResend,\n setCountDownResend,\n handleResendEmail,\n loadingChange,\n openForm,\n}) => (\n \n \n {sentEmailLocale.title}\n \n\n \n {sentEmailLocale.description({ email: clientInfo.email })}\n \n\n {countDownResend > 0\n ? (\n \n \n )\n : (\n <>\n\n {emailVerifyLocale.emailNotRecived} \n \n {sentEmailLocale.tryResendDescription}\n \n\n \n \n \n )}\n \n);\n\nexport default SentEmail;\n","import styled, { css } from 'styled-components';\n\nexport const Wrapper = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n`;\n\nexport const Title = styled.h2`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight: ${theme.v2.font.weights.medium};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 40px 0px 0px 0px;\n `}\n`;\n\nexport const Description = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 24px 0px 0px 0px;\n `}\n`;\n\nexport const SendAgainWrapper = styled.div`\n display: flex;\n margin: 64px 0px 0px 0px;\n`;\n\nexport const TitleNotReceived = styled.h3`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.bold};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 64px 0px 0px 0px;\n `}\n`;\n\nexport const DescriptionNotReceived = styled.p`\n ${({ theme }) => css`\n color: ${theme.v2.colors.neutral.lowDark};\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight: ${theme.v2.font.weights.regular};\n line-height: ${theme.v2.font.lineHeight.text};\n margin: 16px 0px 0px 0px;\n `}\n`;\n\nexport const ButtonWrapper = styled.div`\n ${({ theme }) => css`\n display: flex;\n gap: 16px;\n margin: 24px 0px 0px 0px;\n\n @media screen and (max-width: ${theme.v2.breakpoints.md}){ \n flex-direction: column\n }\n `}\n`;\n","import React from 'react';\nimport * as Styles from './ValidateEmail.styles';\nimport { SendAgain } from '../SendAgain';\nimport { Button, IconLoading } from 'gatorcomponents';\n\nconst ValidateEmail = ({\n validateEmailLocale,\n blockedTime,\n emailVerifyLocale,\n clientInfo,\n countDownResend,\n setCountDownResend,\n handleResendEmail,\n loadingResend,\n handleChangeEmail,\n}) => {\n const sentEmailButtonLabel = blockedTime ? validateEmailLocale.resendIn(blockedTime) : validateEmailLocale.resendButtonLabel;\n const disableButton = blockedTime || loadingResend;\n\n return (\n \n \n {validateEmailLocale.title}\n \n\n \n {validateEmailLocale.description({ email: clientInfo.email })}\n \n\n {countDownResend > 0\n ? (\n \n \n )\n : (\n <>\n\n {emailVerifyLocale.emailNotRecived} \n \n {emailVerifyLocale.tryResendDescription}\n \n\n \n \n \n )}\n \n );\n};\n\nexport default ValidateEmail;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport * as Styles from './EmailVerify.styles';\nimport HgOrangeLogo from '@/media/logo/HgOrangeLogo/HgOrangeLogo';\nimport { EmailSteps, emailErrors } from './EmailVerify.types';\nimport { ChangeEmail } from './components/ChangeEmail';\nimport useLocale from '@/hooks/useLocale/useLocale';\nimport { FieldValidators } from '@/utils/FieldValidators';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { changeEmailVerify, emailChangeFlow, resendEmailVerify } from '@/redux/actions/emailVerify';\nimport {\n RECEIVE_CHANGE_EMAIL, ERROR_CHANGE_EMAIL, RECEIVE_RESEND_EMAIL, ERROR_RESEND_EMAIL,\n} from '@/redux/actions/actionsTypes';\nimport { commonActions, formsActions } from '@/redux/modules';\nimport { differenceInSeconds, format } from 'date-fns';\nimport { COUNTRY } from '@/config';\nimport { changeEmailTagManager, emailVerifyResendLinkTagManager, emailVerifySkipFlowTagManager } from '@/utils/ThirdParties/tagManager';\nimport { SentEmail } from './components/SentEmail';\nimport { ValidateEmail } from './components/ValidateEmail';\nimport { IconButton } from 'gatorcomponents';\nimport { emailFlowSkip } from '@/redux/actions/summary';\nimport { useHistory, useParams } from 'react-router';\n\nconst changeMailInitialState = {\n email: {\n value: '',\n error: '',\n },\n checkEmail: {\n value: '',\n error: '',\n },\n password: {\n value: '',\n error: '',\n },\n};\n\nconst EmailVerify = ({\n forceScreen = null,\n}) => {\n const [blockedUntil, setBlockedUntil] = useState(null);\n const [blockedTime, setBlockedTime] = useState(0);\n\n const params = useParams();\n const history = useHistory();\n const dispatch = useDispatch();\n const { changeFlow } = params;\n\n const {\n emailVerify: emailVerifyLocale,\n ticket: ticketsLocale,\n routes: routesLocale,\n } = useLocale();\n const {\n changeMail: changeEmailLocale,\n sentEmail: sentEmailLocale,\n validateEmail: validateEmailLocale,\n } = emailVerifyLocale;\n\n const clientInfo = useSelector(state => state.summary);\n const forceUrl = useSelector(state => state.emailVerify.forceUrl);\n const { loadingChange, loadingResend } = useSelector(state => state.emailVerify);\n const featureToggleEmailNumberFlowSkip = useSelector(state => state.featureToggles.toggles.portal.emailFlowSkip);\n\n const initialStep = () => {\n if (forceScreen) {\n return forceScreen;\n }\n\n return changeFlow\n ? EmailSteps.CHANGE_EMAIL\n : EmailSteps.VALIDATE_EMAIL;\n };\n\n const [currentStep, setCurrentStep] = useState(initialStep());\n const [changeEmailForm, setChangeEmailForm] = useState(changeMailInitialState);\n\n let emailValidationRequested = localStorage.getItem('emailValidationRequested');\n let emailValidationRequestedDiff = 0;\n\n if (emailValidationRequested) {\n emailValidationRequestedDiff = differenceInSeconds(new Date(emailValidationRequested), new Date());\n }\n if (emailValidationRequestedDiff <= 0) {\n emailValidationRequested = null;\n localStorage.removeItem('emailValidationRequested');\n }\n\n const [countDownResend, setCountDownResend] = useState(emailValidationRequested\n ? emailValidationRequestedDiff\n : 0);\n\n const closeEmailFlow = useCallback(() => {\n dispatch(emailFlowSkip(clientInfo.id));\n dispatch(emailChangeFlow(false));\n emailVerifySkipFlowTagManager();\n }, [dispatch, clientInfo]);\n\n const openForm = useCallback(() => {\n dispatch(formsActions.forceState.set({\n key: ticketsLocale.forms.names.withoutEmailAccess,\n params: {\n selectedProduct: ticketsLocale.forms.namewithoutEmailAccess,\n },\n }));\n closeEmailFlow();\n history.push(`${routesLocale.help}${routesLocale.supportforms}`);\n }, [dispatch, history, routesLocale, ticketsLocale, closeEmailFlow]);\n\n const requestEmailChange = useCallback(() => {\n dispatch(changeEmailVerify({\n clientId: clientInfo.id,\n clientEmailCurrent: clientInfo.email,\n clientNewEmail: changeEmailForm.email.value,\n password: changeEmailForm.password.value,\n })).then((response) => {\n let isPasswordError = false;\n let emailIsInUse = false;\n let isSameMail = false;\n const hasUnblockTime = false;\n const hasPendingAttempts = false;\n\n switch (response.type) {\n case RECEIVE_CHANGE_EMAIL:\n if (!hasPendingAttempts) {\n dispatch(commonActions.notifications.set({\n label: (\n `${emailVerifyLocale.feedback.changeSuccess}`\n ),\n type: 'success',\n }));\n }\n setCurrentStep(EmailSteps.SENT_EMAIL);\n changeEmailTagManager();\n break;\n case ERROR_CHANGE_EMAIL:\n if (response && response.info && response.info.response && response.info.response.data.internal_code === emailErrors.DATA_IN_USE) {\n isSameMail = true;\n dispatch(commonActions.notifications.set({\n label: (\n `${emailVerifyLocale.feedback.dataInUse}`\n ),\n type: 'error',\n }));\n }\n\n if (response && response.info && response.info.response.data.data === 'Password dont match') {\n isPasswordError = true;\n dispatch(commonActions.notifications.set({\n label: (\n `${emailVerifyLocale.feedback.password}`\n ),\n type: 'error',\n }));\n }\n\n if (response && response.info && response.info.response.data.data === 'Email already in use.') {\n emailIsInUse = true;\n dispatch(commonActions.notifications.set({\n label: (\n `${emailVerifyLocale.feedback.emailAlreadyRegistered}`\n ),\n type: 'error',\n }));\n }\n\n if (!isSameMail && !isPasswordError && !hasUnblockTime && !emailIsInUse) {\n dispatch(commonActions.notifications.set({\n label: (\n `${emailVerifyLocale.feedback.changeError}`\n ),\n type: 'error',\n }));\n }\n break;\n default: break;\n }\n });\n }, [changeEmailForm, clientInfo, dispatch, emailVerifyLocale]);\n\n const setPreviousBlockedTime = useCallback(() => {\n const timestamp = blockedUntil / 1000;\n const currentTimestamp = Math.floor(Date.now() / 1000);\n\n if (timestamp > currentTimestamp) {\n setBlockedTime(timestamp - currentTimestamp);\n }\n }, [blockedUntil]);\n\n useEffect(() => {\n setPreviousBlockedTime();\n }, [setPreviousBlockedTime]);\n\n const updateBlockedTime = useCallback(() => {\n const secondsRemaining = blockedTime;\n\n if (secondsRemaining <= 0) return;\n\n const intervalId = setTimeout(() => {\n setBlockedTime(secondsRemaining - 1);\n }, 1000);\n\n return () => clearTimeout(intervalId);\n }, [blockedTime]);\n\n useEffect(() => {\n updateBlockedTime();\n }, [updateBlockedTime]);\n\n const getValidateEmailProps = useCallback(() => {\n const handleResendEmail = () => {\n if (countDownResend <= 0) {\n dispatch(resendEmailVerify({\n clientId: clientInfo.id,\n clientEmail: clientInfo.email,\n })).then((response) => {\n switch (response.type) {\n case RECEIVE_RESEND_EMAIL:\n if (response.client.data && response.client.data.pending_attempts >= 0) {\n const attempts = response.client.data.pending_attempts;\n dispatch(commonActions.notifications.set({\n label: (\n \n {emailVerifyLocale.feedback.emailSendAttempts({ attempts, used: COUNTRY === 'br' ? 10 - attempts : 5 - attempts })}\n
\n ),\n type: 'success',\n }));\n } else {\n dispatch(commonActions.notifications.set({\n label: emailVerifyLocale.feedback.resendSuccess,\n type: 'success',\n }));\n }\n emailVerifyResendLinkTagManager();\n break;\n case ERROR_RESEND_EMAIL:\n if (response.client.data && response.client.data.disabled_til) {\n const disabledTil = new Date(response.client.data.disabled_til).getTime();\n setBlockedUntil(disabledTil);\n dispatch(commonActions.notifications.set({\n label: (\n \n {emailVerifyLocale.feedback.blockedUntil}\n
\n ),\n type: 'error',\n }));\n break;\n }\n if (response.client.data && response.client.data.unblock_time) {\n const unblock = new Date(response.client.data.unblock_time);\n dispatch(commonActions.notifications.set({\n label: (\n \n {emailVerifyLocale.feedback.noMoreAttempts({ hours: format(unblock, 'HH:mm'), date: format(unblock, 'dd/MM/yyyy') })}\n
\n ),\n type: 'error',\n }));\n break;\n }\n dispatch(commonActions.notifications.set({\n label: emailVerifyLocale.feedback.resendError,\n type: 'error',\n }));\n break;\n default: break;\n }\n });\n }\n };\n\n const handleChangeEmail = () => {\n setCurrentStep(EmailSteps.CHANGE_EMAIL);\n };\n\n return ({\n emailVerifyLocale,\n validateEmailLocale,\n blockedTime,\n clientInfo,\n countDownResend,\n setCountDownResend,\n handleResendEmail,\n loadingResend,\n handleChangeEmail,\n openForm,\n });\n }, [\n emailVerifyLocale,\n validateEmailLocale,\n clientInfo,\n countDownResend,\n setCountDownResend,\n dispatch,\n blockedTime,\n loadingResend,\n openForm,\n ]);\n\n const handleGoBack = useCallback(() => {\n if (history.length) {\n dispatch(emailChangeFlow(false, forceUrl));\n history.push(forceUrl);\n }\n\n setCurrentStep(EmailSteps.VALIDATE_EMAIL);\n }, [dispatch, forceUrl, history]);\n\n const getChangeEmailProps = useCallback(() => {\n const validateFields = () => {\n const newFormValue = { ...changeEmailForm };\n let hasErrors = false;\n\n const hasInvalidEmail = !FieldValidators.email(newFormValue.email.value);\n const emailsDoesntMatch = newFormValue.checkEmail.value.length && newFormValue.checkEmail.value !== newFormValue.email.value;\n const passwordTooShort = newFormValue.password.value.length && newFormValue.password.value.length < 6;\n\n if (hasInvalidEmail) {\n hasErrors = true;\n newFormValue.email.error = changeEmailLocale.form.errors.invalidEmail;\n }\n\n if (emailsDoesntMatch) {\n hasErrors = true;\n newFormValue.checkEmail.error = changeEmailLocale.form.errors.emailsDoesntMatch;\n }\n\n if (passwordTooShort) {\n hasErrors = true;\n newFormValue.password.error = changeEmailLocale.form.errors.passwordTooShort;\n }\n\n setChangeEmailForm(newFormValue);\n return (hasErrors);\n };\n\n const disabledSubmit = () => {\n let isDisabled = false;\n const { email, checkEmail, password } = changeEmailForm;\n\n if (!email.value.length || !checkEmail.value.length || password.value.length < 6) {\n isDisabled = true;\n }\n\n if (email.error || checkEmail.error || password.error) {\n isDisabled = true;\n }\n\n return isDisabled;\n };\n\n return ({\n changeEmailLocale,\n changeEmailForm,\n setChangeEmailForm,\n validateFields,\n email: clientInfo.email,\n disabledSubmit,\n requestEmailChange,\n countDownResend,\n setCountDownResend,\n loadingChange,\n emailVerifyLocale,\n handleGoBack,\n openForm,\n changeFlow,\n });\n }, [\n changeEmailLocale,\n changeEmailForm,\n clientInfo,\n countDownResend,\n loadingChange,\n emailVerifyLocale,\n requestEmailChange,\n openForm,\n changeFlow,\n handleGoBack,\n ]);\n\n const getSentEmailProps = useCallback(() => {\n const handleResendEmail = () => {\n if (countDownResend <= 0) {\n requestEmailChange();\n }\n };\n\n return {\n sentEmailLocale,\n clientInfo,\n countDownResend,\n emailVerifyLocale,\n setCountDownResend,\n handleResendEmail,\n loadingChange,\n openForm,\n };\n }, [sentEmailLocale, clientInfo, countDownResend, setCountDownResend, emailVerifyLocale, requestEmailChange, loadingChange, openForm]);\n\n const steps = {\n [EmailSteps.VALIDATE_EMAIL]: \n \n {(featureToggleEmailNumberFlowSkip || changeFlow) && (\n \n \n )}\n\n \n \n\n {steps[currentStep]}\n \n \n );\n};\n\nexport default EmailVerify;\n","const styles = theme => ({\n card: {\n position: 'relative',\n borderRadius: '0',\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n [theme.breakpoints.down('xs')]: {\n padding: 0,\n },\n },\n content: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n padding: '40px 48px 80px',\n minHeight: 'calc(92vh - 92px)',\n borderLeft: '5px solid',\n borderColor: theme.color.indigo,\n textAlign: 'center',\n boxSizing: 'border-box',\n '&:last-child': {\n paddingBottom: 80,\n },\n '& .status-icon': {\n color: theme.color.indigo,\n marginTop: 0,\n },\n '& p': {\n margin: '32px 0px 12px',\n },\n [theme.breakpoints.down('xs')]: {\n border: 'none',\n minHeight: '100vh',\n paddingBottom: 70,\n },\n },\n titleWrapper: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n },\n title: {\n zIndex: 2,\n userSelect: 'none',\n fontSize: '24px',\n fontWeight: '400',\n textAlign: 'center',\n color: theme.color.emperor,\n [theme.breakpoints.down('xs')]: {\n marginBottom: '30px',\n },\n },\n contentWrapper: {\n display: 'flex',\n flex: 2,\n flexDirection: 'column',\n [theme.breakpoints.down('xs')]: {\n minWidth: '100%',\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport {\n CardContent, Card, withStyles, Typography,\n} from '@material-ui/core';\n\nimport Logo from '@/media/logo/LogoMarca';\nimport styles from './styles';\n\n\nconst PhoneCard = ({\n classes,\n title,\n subtitle,\n children,\n}) => (\n <>\n \n \n \n
{title} \n {subtitle} \n \n \n {children}\n
\n \n \n \n);\n\nexport default withStyles(styles)(PhoneCard);\n","import styled, { css } from 'styled-components';\n\nexport const Container = styled.div`\n ${({ theme }) => css`\n display: flex;\n min-height: calc(100vh - 80px);\n padding: 40px;\n position: relative;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n padding: 0;\n }\n `}\n`;\n\nexport const Content = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.white.primary};\n display: flex;\n flex-direction: column;\n min-height: fit-content;\n padding: 40px 10px;\n width: 100%;\n `}\n`;\n\nexport const Title = styled.p`\n ${({ theme }) => css`\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.md};\n font-weight:${theme.v2.font.weights.medium};\n margin: 39px 0 0 0;\n padding: 0;\n text-align: center;\n `}\n`;\n\nexport const Subtitle = styled.p`\n ${({ theme, boldFont }) => css`\n font-family: ${theme.v2.font.family.primary};\n font-size: ${theme.v2.font.sizes.xxs};\n font-weight:${boldFont ? theme.v2.font.weights.medium : theme.v2.font.weights.regular};\n padding: 0;\n margin: 30px 0 0 0;\n text-align: center;\n `}\n`;\n\nexport const InputWrapper = styled.div`\n padding: 0;\n width: 320px;\n`;\n\nexport const Countdown = styled.div`\n display: flex;\n margin-top: -10px;\n gap: 5px;\n`;\n\nexport const ChangeNumberForm = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: 20px;\n margin-top: 26px;\n`;\n\nexport const ChangeNumber = styled.div`\n\n margin-top: 10px;\n`;\n\nexport const ValidationForm = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: 30px;\n margin-bottom: 115px;\n margin-top: 55px;\n`;\n\nexport const ButtonsWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n margin: 20px 0;\n`;\n\nexport const CloseButtonWrapper = styled.div`\n ${({ theme }) => css`\n position: absolute;\n right: 73px;\n top: 72px;\n\n @media (max-width: ${theme.v2.breakpoints.sm}) {\n right: 16px;\n top: 16px;\n }\n `}\n`;\n","import React from 'react';\nimport * as Styles from './PhoneCard.styles';\nimport Logo from '@/media/logo/HgOrangeLogo/HgOrangeLogo';\nimport useLocale from '@/hooks/useLocale';\nimport {\n Button, IconButton, Input, PhoneInput,\n} from 'gatorcomponents';\nimport { FORM_STEPS } from '../PhoneVerify';\nimport { Timer } from '@/pages/common/v1';\nimport { COUNTRY } from '@/config';\n\nconst PhoneCard = ({\n canSendForm,\n closePhoneFlow,\n countDownResend,\n featureToggleEmailNumberFlowSkip,\n handleChangePhoneNumber,\n handleSendPhoneCode,\n handleValidateCode,\n loadingChange,\n loadingValidate,\n phoneCardForm,\n setCountDownResend,\n setPhoneCardForm,\n updateField,\n values,\n waitingToResend,\n threatedPhoneNumber,\n renderFlags,\n countryCode,\n}) => {\n const { phoneValidation: phoneValidationLocale } = useLocale();\n\n const handleChangePhone = () => {\n handleChangePhoneNumber && handleChangePhoneNumber();\n };\n\n const handleGoBack = () => {\n setPhoneCardForm && setPhoneCardForm(FORM_STEPS.CHANGE_PHONE_NUMBER);\n };\n\n const updatePhoneField = (value, name) => {\n const dataToUpdateField = {\n target: {\n name,\n value,\n },\n };\n\n updateField(dataToUpdateField);\n };\n\n return (\n \n \n {(featureToggleEmailNumberFlowSkip) && (\n \n \n )}\n \n {phoneValidationLocale.updateNumber}\n \n\n {phoneCardForm === FORM_STEPS.CHANGE_PHONE_NUMBER && (\n <>\n \n {phoneValidationLocale.attention}\n \n\n \n \n updatePhoneField(value, 'changePhoneNumberInput')}\n onChangeSelect={value => updatePhoneField(value, 'countryCode')}\n selected={countryCode}\n error={values.changePhoneNumberInput.error}\n brand={COUNTRY}\n renderFlags={renderFlags}\n />\n \n\n \n \n\n \n 0 ? setCountDownResend(0)} /> : phoneValidationLocale.sendCode}\n onClick={handleChangePhone}\n size=\"large\"\n loading={loadingChange}\n disabled={loadingChange || canSendForm() || countDownResend >0}\n testId=\"submitButton\"\n />\n \n \n \n )}\n\n {phoneCardForm === FORM_STEPS.VERIFICATION_CODE && (\n <>\n \n {phoneValidationLocale.codeSended(threatedPhoneNumber)}\n \n\n \n \n \n\n \n\n \n {phoneValidationLocale.notReceive}\n \n\n {countDownResend > 0 && (\n \n \n {phoneValidationLocale.requestOtherCode}\n \n \n setCountDownResend(0)} />\n \n .\n \n )}\n\n \n \n \n )}\n \n \n );\n};\n\nexport default PhoneCard;\n","const styles = theme => ({\n form: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n },\n phoneChangeWrapper: {\n display: 'flex',\n margin: '0 auto',\n maxWidth: '360px',\n width: '100%',\n '& p': {\n margin: '8px 12px 0',\n },\n [theme.breakpoints.down('xs')]: {\n flexDirection: 'column',\n },\n },\n passwordInputDescriptionD: {\n marginTop: 20,\n },\n passwordWrapper: {\n display: 'flex',\n flexDirection: 'column',\n margin: '0 auto 24px',\n maxWidth: '360px',\n width: '100%',\n '& p': {\n margin: '8px 12px 0',\n },\n [theme.breakpoints.down('xs')]: {\n flexDirection: 'column',\n },\n },\n selectCountryCode: {\n minWidth: 122,\n marginRight: 10,\n height: 56,\n [theme.breakpoints.down('xs')]: {\n marginRight: 0,\n marginBottom: 15,\n },\n },\n\n formText: {\n color: theme.color.regentGray,\n },\n\n formInput: {\n margin: 0,\n },\n\n button: {\n marginLeft: 10,\n minWidth: 109,\n '&:disabled': {\n backgroundColor: 'transparent',\n boxShadow: 'transparent',\n color: theme.color.tundora,\n },\n },\n wrapperBoxLinks: {\n marginTop: 'auto',\n },\n});\n\nexport default styles;\n","import React, { useState } from 'react';\nimport {\n withStyles,\n CircularProgress,\n Select,\n OutlinedInput,\n MenuItem,\n Typography,\n} from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport MaskedInputTextField from '@/components/Fields/InputMasks/MaskedInputTextField';\nimport { cellphoneMask, cellphonePlaceholder } from '@/utils/Masks/inputMasks';\nimport OutlineButton from '@/components/Buttons/OutlineButton';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport { LATAM_COUNTRIES } from '@/config/application/operatingCountriesConfig';\nimport styles from './styles';\nimport PasswordField from '@/components/Fields/PasswordField';\nimport { Timer } from '@/pages/common/v1';\n\n\nconst ChangePhoneNumber = ({\n classes,\n t,\n handleChangePhoneNumber,\n phoneNumberCountry,\n handleCancel,\n loadingChange,\n updateField,\n values,\n phoneNumber,\n passwordDescription,\n passwordLabel,\n countriesCode,\n canSendForm,\n countDownResend,\n setCountDownResend,\n}) => {\n const [selectedCountryCode, setSelectedCountryCode] = useState(phoneNumberCountry);\n const latamCountries = LATAM_COUNTRIES.map(country => country.toLowerCase());\n\n let checkCountry = '';\n\n if (latamCountries.includes(selectedCountryCode.toLowerCase())) {\n checkCountry = selectedCountryCode;\n } else {\n checkCountry = 'other';\n }\n\n const handleSubmit = (e) => {\n e.preventDefault();\n handleChangePhoneNumber && handleChangePhoneNumber(e);\n };\n\n const handleSelectedCountry = (event) => {\n setSelectedCountryCode(event.target.value);\n updateField && updateField(event);\n };\n\n return (\n \n );\n};\n\nexport default withI18n()(withStyles(styles)(ChangePhoneNumber));\n","const styles = theme => ({\n\n formInput: {\n width: 245,\n },\n button: {\n marginLeft: 10,\n minWidth: 109,\n '&:disabled': {\n backgroundColor: 'transparent',\n boxShadow: 'transparent',\n color: theme.color.tundora,\n },\n },\n\n wrapperBoxLinks: {\n marginTop: 20,\n [theme.breakpoints.down('xs')]: {\n display: 'flex',\n justifyContent: 'space-evenly',\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport {\n withStyles,\n CircularProgress,\n TextField,\n} from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport styles from './styles';\n\nconst VerificationCode = ({\n classes,\n t,\n handleValidateCode,\n loadingValidate,\n codeNumberError,\n updateField,\n values,\n}) => (\n <>\n \n \n);\n\nexport default withI18n()(withStyles(styles)(VerificationCode));\n","const styles = theme => ({\n card: {\n position: 'relative',\n borderRadius: '0',\n boxShadow: `0px 2px 4px 0px ${theme.color.alto}`,\n [theme.breakpoints.down('xs')]: {\n padding: 0,\n },\n },\n cardContent: {\n minHeight: 'auto',\n width: 395,\n borderLeft: '5px solid',\n borderColor: theme.color.indigo,\n textAlign: 'start',\n [theme.breakpoints.down('xs')]: {\n width: '90%',\n },\n '&:last-child': {\n padding: '19px 27px',\n },\n },\n errorMessage: {\n fontSize: '12px',\n margin: '8px 8px 0px !important',\n color: theme.color.valencia,\n maxWidth: '425px',\n },\n\n loading: {\n marginRight: 5,\n },\n\n button: {\n marginLeft: 10,\n minWidth: 109,\n '&:disabled': {\n backgroundColor: 'transparent',\n boxShadow: 'transparent',\n color: theme.color.tundora,\n },\n },\n\n wrapperSendCodeBoxLinks: {\n marginTop: 20,\n [theme.breakpoints.down('xs')]: {\n display: 'flex',\n flexDirection: 'column-reverse',\n justifyContent: 'space-between',\n alignItems: 'center',\n height: 90,\n },\n },\n});\n\nexport default styles;\n","import React from 'react';\nimport {\n CardContent, Card, withStyles, CircularProgress,\n} from '@material-ui/core';\nimport { withI18n } from 'react-i18next';\nimport OutlineButton from '@/components/Buttons/OutlineButton';\nimport PrimaryButton from '@/components/Buttons/PrimaryButton';\nimport styles from './styles';\nimport { Timer } from '@/pages/common/v1';\n\nconst PhoneConfirmation = ({\n classes,\n t,\n loadingSend,\n setPhoneCardForm,\n handleSendPhoneCode,\n phoneNumber,\n loadingSummary,\n countDownResend,\n setCountDownResend,\n}) => {\n const sendCodeLabel = loadingSend ? t('phoneVerify.buttons.sendLoading') : t('phoneVerify.buttons.sendCode');\n return (\n <>\n \n \n {!loadingSummary\n ? (\n {phoneNumber} \n )\n : \n \n\n \n
setPhoneCardForm('changePhoneNumber')}\n disabled={loadingSend}\n >\n {t('phoneVerify.buttons.changePhoneNumber')}\n \n 0}\n >\n {countDownResend > 0\n && setCountDownResend(0)} />\n }\n\n {loadingSend && \n
\n ),\n verificationCode: (\n \n
\n
\n {showCountdown ? (\n <>\n
\n {locale('phoneVerify.codeNotRecived')}\n \n
\n {locale('phoneVerify.resendText')}\n \n \n \n \n ) : (\n
\n
{locale('phoneVerify.codeNotRecived')} \n
\n {locale('phoneVerify.buttons.changePhoneNumber')}\n \n 0}\n >\n {countDownResend > 0\n && setCountDownResend(0)} />\n }\n\n {(loadingSend || loadingSendToken) && \n )}\n
\n
\n
\n\n
\n setPhoneNumberAgreement(!phoneNumberAgreement)}\n />\n {locale('phoneVerify.phoneAgreement')}\n \n
0}\n threatedPhoneNumber={handleCoverPhoneNumber({ phoneNumber: newPhone || phoneNumber, phoneNumberCountry })}\n renderFlags={renderFlags}\n countryCode={countryCode}\n />\n );\n }\n\n return (\n \n
\n {phoneCardChild[phoneCardForm]}\n {featureTogglePhoneNumberFlowSkip && (\n closePhoneFlow()}\n >\n \n \n );\n }\n\n if (ssoRedirectSiteBuilder) {\n return (\n \n \n );\n }\n\n if ((bravoEnableEmailFlow && featureToggleEmailNumberFlow && !isTitanUrl && (!emailFlowSkip && !emailVerified)) || (emailChangeFlow)) {\n return (\n \n \n );\n }\n\n if ((bravoEnablePhoneFlow && featureTogglePhoneNumberFlow && !isTitanUrl && (!phoneNumberVerified && !phoneNumberFlowSkip)) || (phoneNumberChangeFlow)) {\n return (\n \n \n );\n }\n\n if (newSiteFlux) {\n return (\n \n \n );\n }\n\n if (forceUrl) {\n return (\n \n {routesV2(t, undefined, {\n renderAccountSecurity,\n enableLogoBuilder,\n }).map(({ path, Component }) => (\n {getBreadCrumbs(props, Component)} }\n />\n ))}\n \n );\n }\n\n return (\n \n {redirects(t).map(({ path, redirectPath }) => (\n {getBreadCrumbs(props, Component)} }\n />\n ))}\n\n {forceUrl && (\n \n );\n };\n\n if (isRootRoute && (products.loaded === false || products.loading)) {\n return \n \n);\n","import React from 'react';\nimport * as Styles from './styles';\nimport { SnappyAnimation } from './SnappyAnimation/SnappyAnimation';\nimport { withI18n } from 'react-i18next';\n\nconst LoaderPage = ({ t, progress = 0 }) => (\n \n \n \n \n \n\n {t('loaderPage.title')} \n \n);\n\n\nexport default withI18n()(LoaderPage);\n","import styled, { css } from 'styled-components';\n\nexport const Content = styled.div`\n ${({ theme, bannerImage }) => css`\n background-image: url(${bannerImage});\n background-size: cover;\n color: ${theme.v2.colors.neutral.lowPure};\n height: 444px;\n width: 800px;\n cursor: pointer;\n\n #tag {\n margin-left: 47px;\n margin-top: 23px;\n\n #dot {\n top: 35px;\n left: 67px;\n }\n }\n\n #close-button {\n position: relative;\n\n button {\n position: absolute;\n top: 30px;\n left: 962px;\n }\n }\n\n @media (max-width: ${theme.v2.breakpoints.sm}){\n background-image: url(${bannerImage});\n background-repeat: no-repeat;\n background-size: contain;\n height: 100%;\n width: auto;\n\n #tag {\n #dot {\n top: 29px;\n left: 61px;\n }\n }\n }\n `}\n`;\n\nexport const NotShowAgain = styled.div`\n ${({ theme }) => css`\n align-items: center;\n background-color: ${theme.v2.colors.white.primary};\n border-radius: 24px;\n display: flex;\n position: absolute;\n right: 45px;\n top: 15px;\n `}\n`;\n","import React, { useEffect, useState } from 'react';\nimport { Modal } from '@/pages/common/Modal';\nimport * as Styles from './PromotionBanner.styles';\nimport { Button } from 'gatorcomponents';\nimport bannerDesktop from './images/desktop-modal.png';\nimport useLocale from '@/hooks/useLocale';\nimport { useSelector } from 'react-redux';\nimport { useFeatureIsOn } from '@growthbook/growthbook-react';\nimport { PROMOTION_BANNER } from '@/config/GrowthBook/constants';\nimport { isBRServer } from '@/utils/Validators/validation';\n\nconst PromotionBanner = () => {\n const [showBanner, setShowBanner] = useState(false);\n const { videoClasses: videoClassesLocale } = useLocale();\n const { liveData, liveDataRequested } = useSelector(state => state.videoClassesReducer);\n const canShowPromotionBanner = useFeatureIsOn(PROMOTION_BANNER);\n const liveIsRunning = liveData && liveData.liveID;\n\n useEffect(() => {\n const notShowPromotionBanner = localStorage.getItem('notShowAIPromotionBanner');\n if (!notShowPromotionBanner && liveDataRequested && !liveIsRunning) {\n setShowBanner(true);\n }\n }, [liveIsRunning, liveDataRequested]);\n\n const onClose = () => {\n setShowBanner(false);\n };\n\n const notShowAgain = () => {\n setShowBanner(false);\n localStorage.setItem('notShowAIPromotionBanner', 'true');\n };\n\n const handleBannerClick = () => {\n window.open('https://bit.ly/3ZWEyBr', '_blank');\n };\n\n const canShowBanner = canShowPromotionBanner && showBanner && isBRServer && !liveIsRunning;\n\n return (\n <>\n {canShowBanner && (\n \n \n \n \n
\n {shouldShowMain ? (\n
\n ) : (\n
\n )}\n {!IS_PROD &&
}\n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default App;\n","import getManifestConfig from '@/config/application/pwa/getManifestConfig';\nimport { onLoadEventTagManager } from '@/utils/ThirdParties/tagManager';\n\n\nexport const initConfigs = (theme) => {\n // Manifest Dynamic\n const dynamicManifest = document.querySelector('#dynamic-manifest');\n if (dynamicManifest) {\n dynamicManifest.setAttribute('href', getManifestConfig());\n }\n\n // Background Color\n const root = document.getElementById('root');\n if (root) {\n root.style = `background-color: ${\n theme.color.mystic\n }`;\n }\n\n // Initializating dataLayer\n window.dataLayer = window.dataLayer || [];\n onLoadEventTagManager();\n};\n","import 'react-app-polyfill/ie9';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport './index.css';\nimport 'instantsearch.css/themes/reset.css';\nimport 'instantsearch.css/themes/algolia.css';\nimport App from './App';\n\n\nReactDOM.render(\n \n ,\n document.getElementById('root'),\n);\n","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAEtJREFUSEtjZKAxYKSx+QzD0AIvL6//yMG2bds2sC9JFYeZgRFEpBqES/0wtoDayZb+yXQ0kmH5ZuCS6WgqGvg4GPr5YOinoiHnAwDyR5AZjLjELAAAAABJRU5ErkJggg==\"","module.exports = __webpack_public_path__ + \"static/media/traktoHG.1b45a1ec.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon_titan.94f7b5e1.svg\";","module.exports = __webpack_public_path__ + \"static/media/snappy-with-shadow.35e5ef1c.svg\";","module.exports = __webpack_public_path__ + \"static/media/HostGator.44f42fe4.svg\";","module.exports = __webpack_public_path__ + \"static/media/snappy-desktop.c81ca006.svg\";","module.exports = __webpack_public_path__ + \"static/media/snappy-mobile.2222259f.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-hospedagem.c8eefdb6.svg\";","module.exports = __webpack_public_path__ + \"static/media/colorfulLine.24e44ffe.svg\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALoAAABaCAYAAAAPSkxzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABbuSURBVHgB7Z0JeFTl1cf/7+wzSSb7CoQEEgmEABKQNTa4oxS1qLSlUvWzssRSP6Xa1u/T1H5qrbhjAaul7eOu/WpbrbaVWgTCIgiKKGIEwhYCDSHbzGSW+/a8N4UQs8x2Z3LvML/nGebO5N5h5t7/Pfe855z3XIY4McekJ7ndYMAsxjCNXo6nxwh62Omhp4eDA8cYsIke2/UevPjPJewQYhyGODFD5XN8gteNO2lxFj2sQWz6Lue4b8Nitg4xSlzoMcDUZ/g4nRcP0tG8DKEj0fbPchfu33AbO4AYIy50DXPRz3myMxl30kH8CZTjMPfgmg1L2CbEEHGha5TKVbzEK+EVWhwD5XGRf3/9uoXsdcQIOsTRHNNW8Hkk8g2IjMgFFvLZX5y+il+LGCFu0TVGxUp+j8RxNx04EyINR5NPj6kbF7Dd0DhxoWsIEvljZGlvQzRh2NduwqTtN7Hj0DBx10UjTF/BH4y6yAUchbYOPA6NE7foGmD6Sr6YRP4UG0DDJAHX1Cxiv4dGiQtd5Uxdzs/X6bEWA0/ToQbk7a9mLmiQuOvCOZv2HE8a8zueAJUxeQUvIJG/CnWQmpeDamiUs9KiV1dz3d+yMFPHsJRenkcP23/+5CSf9E098NRaFaTDK1bwjzlQBvXgknwoqbmV1UFjnHUWnWLDk9bkoIZE/ia9rESXyAVWOvWv9TG8X/FL/pvyx3guBohpK/lPVSZygYUZBmBArABnlUUnC/k9Es8zQWzyBe/AReHUfkx7iCcxIzKZCSkU/x7MdcimrGMK/cnKOutLnJKERnp9RMfRzDw4IJkxlNbZCBVC37m5zYPi7Uu0FW48O4ROfnjFCvyYM9yPYGH40MkwedsCkqAfKlbxXC6hnOQ7lq6V4+ityfQYjODhUPGxYRJ+tq6K3QMNcVYIndyApYzjYYTOI+sXsaVffXP6L3kqWemJTCdXDV5EO/McejYjxqHfedSsQ8m7C1gzNELMC73iGT6H+xBucZLLJ6FsYxWrFS+mLeeXk7jn0d67hF5m4CyEro7f3LCQvQKNENNCn/osH6pz4wP6lZkIn9fIn/iQdtgSWh6wQaqK+Ctd5cKpf48qMSv0ympu8eRgK7kspYgTCRwGA0b883vamIYXs+FFXy5uj4s8otg8XlwFjRCTQqdB4jCKfnwfcSIKuQPzoBFi06Iz3E3/5iBOr5Sk+5Bvl6AAkyc+zTWxn2NO6JTRFLNubkKcHozK9OKRSxx45FIHJA5FoDDjddAABsQYFPa6C3G6kWjiqJrQgfMLunJeDe0KxSEYvkb/PgmVE1NRF+Gb0y/6EnFOM7PIjflj3bCbu0y408NwzWuJUAiXz4m0jbczJ1RMbFl0HVlzP5fkdCtHozP2E8LCit80rgOXFvWsXGjpUPT3WyQLRtHzNqiYmPHRy1fxZEi4ur91kujgP0w+6uAkRQZiqmVIsoQHL3T2KnLBcYeyJ7qB4RtQOTEjdJsHM/1lQEtpMJadIOHxmQ5MHuxFLHJOmoRlFzswLNXX5zpNLmUPu66zxkfVxE7URY9b/a0yPL3TklsNHHdNc2Jkhg+xxPgcr3zFEm5LfzgVPsfpf5s15VEeTK/HqBMTQq94jOfSzp7mb71hKV0ui0kP3FPpRF6SQnG2AWYGRVTum+GEQef/93iVP78tOh3yoWJiQug+E64PZL2x2d2PsJ0s351TnSR6bYv9cvLFl051gQ3kGNuMi6FiYkLoeh0u97eO8M2txp6CLqYs4dxSN7TKJcM9qDovuIn5+ggcdcblPuyqRfNCr3yaJ1KWr8LfeuNy+r5ezxnlRnGa9vz18ble3Dox+O4Thsgc9a9BxWg+jk4BtCvoku330PUndCNtfUt5B374dxu0Qm4ixx1TXN2s894jTfjVmzuwbU89XG4vzi3OwU0zx2JsUXa3bROMEXDVGArFgFStiSPNC53pcR4COG7CRekNN43Mjp10IM9qwoQ8E7YeUf8uybRxPHChAymWrh/++7W78cALG7qtt37nQWzZfQSLryzH9Zd0NRRItUYkj8D0CXJ3381QIdoXuoTZ3M8gLDuBkwXseXCf//tOrH77Y5xs67z8FxWNAAZdhoEd1fWPmQbO93zNiayErt/z+j8/w4Mv1vS6vtvjw+Ovb0Fhbgqmlw2R30uxIDL4MBYqFbqmfXRxqSSRF/lbrySjZ+D4IRLGY69tOS1yQW3t53A2fAo1I+pWzkwGHTzegode8t8Z48nffwDpPyWLicYIRZmYehNHmha6McH/IFQwPre72/Lejjq8SlawN9rrtoJL6iwRuGiYB1eVdI8QPf2HrZC4f+F+Sf77nsMn5GUbhVWNugiIncs1L6pE00InOU4JZL0RX8mAPvJK37fn8Tqb4Gk+DLWRlyThe+M7ur3X5nRj7UeB91Zas22//CwcM3tk3JfRUCnaDi9K/oUu/PMhZ8ymEZGJ+sa2frdpr98JtbFkkqtHav/DPUdlHzxQGpq6fvegSBS2MQwqepKrsq+NpoVOh32kv3XKsrv751s+q/e3CdyN+1Tlvswr60BZVk9Bf37wBILB1dH1GfnJEckb6HIMGAQVolmhyz0N4b++YkJed6G3ufxnQbnPgwxTG9RAfrKEb5f1/p3PtNCBcGbMPSsxMicyi9wNxMJCs0LX2f3vUOGLlmZ2P6AWUc3lB72OYeZII9TAj6b3nX/p8ARXhpie3JUQy49QMRsFdgqhQjQrdNqhQ/2tI8pw076SHBmR77+D3MSSPFQWDrzrciVFWIYm9/09slODmw43saSrwVhfCbRwYSrtvqBdi879d6mtKOg5w2Z8cTbS7f2XTt88a5ycYBID2YEilbKe88f072blZSQhUCwmg1wScAqRVY1EKQDlNfKgQrRr0fX+kxOlmT2tll6nw5JvTOxzmznnl+Dcok5BnJs7cLOQbj3PBYuhfyFOGTVIdrMC4YopRbDbugdEIjHxhKk0aaRZoTOO4f39vTBFogxi75f9WVOLsXTuZDooXSIxGnW4uuIc/OQ7XfM3yrIHpqJRVCUGMtUvNz0RU0r9t19Psplww2U9hzRF6RFxz4aUV3PVVcdpttaFLpHprB+DN47E0p+t+9aFpXLtx+ZPD8NHmcXpo4dgUGZ3V2BMVvQtupghdOO5gdfH33HdZOyoPUrJo94nQpuMetz73Qrkpfd0c6YO8eDlTxS/AXWuNQvbJ6/gl25axPZDJWjZR+93IvSUACzikCw7rqkcibkzRvUQuSDNypFui66fflGhF8NSAr+S5GfbseL2mbJ1/yopiWbcO78CM84t6HVbUeobkfo1cl/0HJunr+Q3QiVo2aKn9FWeK2LPSvmfoiBsw4HohBqFNZ87OvjZTqOGZuKZpVfg7c21+PCLenngWZKfibl0EtsT+k5U2mgwKq5aHzUoLwM6gbLo+Px6+gpe4vHg/s1LWAsGEE128ilfxW0UNWzv6++zR3iwoFyZ+76+uNOEF3ZGJ6s9Z6QbN53bgWiyeocZr3+quPvyVbZIRlxXc/PA3bZRkxbd6qNYbT+naCtp/PFNFjR3MLTSwy0xeea7l8ZePi5i8KxHk03xcXqyqHpaILdWru4TuaV2d3RsgYj3ixM02kwjPz0KQj9P78a2aSv4DzYsYi9gANCk0JkJGbwfTbxXF6qrMXAXODHVz0XDikMtncMmka4XkUP5QT4ARUXlk1C8b2Cdbo4Sk5wLKTIlJnN0+CL72+XgAfA8iX0Yif1niDKqdl0ql/EMrxUX07ccS190NNehhI55Kv1JmCDFumRqFTGQNIkrj0E8Q+5yINruiWSQaCoqEkJW2lM2gyS/HmTvnGklqiDPDL8/utGCNfu6jIPd0IjSxM0osO1Ckr6JTjAv3NxCJ4MN7VISjnXkY5+zFA307OPB20q6mL7v9WAe+e1Ruy2M6oQ+5mGekJyI+fTNrqeoX0D15nGCQ1wZ0m0SitMkEr+EJifDJ4cO44KMl3FB+qsoTthBu99/tIliNjjiGo6apivwadskrGu6Eh1SgCF0jjpyH6+qqWI7EAVUI/TK1TzF68JS2gFV6LyzcpwoMNSyGwuG/ghTU96SLXc4uCUL3j5+A16o/yHqXcP8rs/luTMQfvtyRJiBF7q4q/NK3Ey/+G76Mn4LteIoQ4rxOG7NvwOXZD4fkPUOBg834c8Nt2D1of/FSW9WIJusyv0Hql57jUUsFT2gQq9cRT64hNW0OAtxogJjEubmPIqF+T8O24L744Q7B/d+8TJ2tPrvbUSn2jpS+fxIZVNDEjrfjHQYkQ0fCuhlMoUF9PRNJfq0Fvq3jYaK9TiBL9kM9Lknpy3npTo9/sKh7uaUsUQ+uSn3Fs/DOQkfIlq4pAQsr1uGPzYs9L8yQ4PPg4s3fp8pPpcxYKHzj1FGIr6KBH0BOifB9lfYLa6FIjmwh/6Hl+HGFnYedp364+TlfLxBj7/TYhriRBzhmlyS8TxuK1iCRMNJRBvhuz+8byXeOf5dv+uSIBvJja1W2m/3K3S+DRVkse9DZ1vmUAPUbtrX6ylqv2zqRr5PJ2G9GPgjTsQxMA/+u3AxZmc9i4HEy41Y9EkNdrdPCHSTn5Lf/jOl/PY+hU4WfBg5Hg/QGtdBQV/+kKvYseLAQ7b3T1yNOJElx1yH+4qvw8jELVADXzrGoGrX+2j3JQe6yZsWHb7z7gLWjDDpVcB8B2aQBX6DFu2IEOsp5vpk3aMBhaHiBE+xbQeeGHUhkgzBdQqINM8eug+/pWhMEHxJA72Lwh2k9hA6344b6Gk1okCTJwurDj6At479F+Iox+ikDXh4xKwB8cf9ITKpV26rR7PX/9zd01ByiQZ9l25YzD5HiHQTOon82/QU9aKbl478EL888It+17Ho2pFr3ofhCTuRZTqEDNNhpBuPYpCllpaPwEp/NzC3HDIT/qDI0J30ZKLWMRZ1zhHY0z4eHzRfHHjmTqNcnrkatxdWwaxT720/X6m/nSIxjwS1DQm9WccwZ91CtgYhcFrofAv55Eb5XpEDkpUUrszKup8j21KHHFMd0k31yDDWy/UWQyxfUILjWNiJDS8lMjY0fR1/OnYztpy8DLHG9XkP4Jb8uxEs3GGAr9EC7jSQyRXlmxL06S6uS1X2hqSnaPOl4OtbG+TjESwSw5KahewpBIn8Q7goWtiBD2ixHGcJdc6ReHDvr7GrdTJigW/nPYxF+XcGvD536+D5PBW+A4mQ2vsIphl9kvGcZmYsaubM7FN0NtqPP39DNm4h8ov1i9hdwWzQKfSPMIdi5K/jLEOiuOkbDYvxzIH/CyYSoDquzXkCSwpuC2hdIXD3rjR4a1MQ6AWS2Twwlx+X9LkOxcT+zr/m4/7a3yJkGJ7LXYMFgYYfO4W+nWLcAdy+MFbZ6yyTLcwRDUaAAhY5idq7zw739gzwUIyz8GhKG7lpVJMi7sxJbyZmk/vCw4tcv3yoATfur2Z+p5MxipeXUCr/MwQAl3TweUS/YR0MZnX0JlSKRncuFu2qQX1HAbRCMJbc12CDdNIEZneDkQ/OHUZ4yLJLrUHlALmp/JhkHN7iv69fAFz/0afY7/TbJ7b/L8TwlpVhnr9YOymX3JYA8LoS0XxgPJrrJtCDng+Mg+SN+BSsqCEGv0+OmkERnYPQAt/KXRawyAX6bAeMI07CkOuAPsMFQ34rrBcfhC4lqLm1zPNxhp63KHPcRRg0XBjHFS4J71Q+xvsNoujoynEB/CB5zGg9Ugqfuys053XZ4WrORSyRY96PZSUzYdMP6IR1v8zL+zkWDQ184NknBgmmMcEllLhHB9eWLBGdCbu2d7hNsdqtyV4L3hYdlvtaQUxHLIQfXC05ZL17zoQ/U/ixQiGFMxfm/wRqZXbWM1gw5G7Fash19uDba0gnLPAeDf/YC8OiIJNZMl4tqOa93stDjEoK/H2Cu7X3XkGmBHWll5Xi6uyncX7aH6A2KlLfwA8KfiDXlCuCV4eOrQFNjOi5aW1y2IPSodbdUBSOywZn4Ynqat5jtC3e8PuFfZ7u3WcZRXSs6XUw2xsQq1TlL1VOUAowKnEz/qdoPkw6ZfrVyC7I2jz4QrTMvn9Z5URTOIhJ2IrDcMu72ehRTBNQnEmn7+otoTc6kTp8M2zpA9aLJirkWfZiZkYYcV4FEZbvoZLZNHZohRIIgbrWDJazoSFDGVRfmINSE4tYs6bq6av4tWe+EZDQTUnHTi/rze1guoFrpxxNvpkXXD1GJBhsqcXy0vORYjgGJeDtJPL3BkFSIHLC29VxV5BekfCbqSv46bvkBSR0WxqFoQydZ5/XkQLO1dubVHw3r9MOT3sqeJjhz0LrLrKmAaUYIoIoVnti1AUk8uNQAoksuPO9wX2n/IOEO8MLp3t4RMPTNj3DslMvAlIsI9fFPninnCSSJAPajxarUuw+txXN+8vRfHAcWg6X4cTeSXA2htdYYEJySMVyYZNn3qtoXN+7P4lEPihsv7obYQZ+Wr2piCSc49Jpy/nlYjlgtepNDiQP/RDJ+dthsLbC3ZYuOlVATcix/m4DZwYHCb2jJRuhMjqxBtFmRtqrWDV6EoZY9iBsROp/Two6tmTLpX/BwKxebpl+hBuGtvYqaWYOb7Auun1FGp0eN4rnoE9vg6VVfqgNyWfsM67vaMwPOUI0yPIlokWCvhnX5DyFm4cENQOnT7hbD/e2THgPhta9z1jUDH2eg9FDlA04PbXJ3cJvLDH4GPyZHHIVI9LQGSpnNYXQhfOtyrv9BgPT+eSwJ+c9/UaJrLxIeJ0aZ6gNkfyZmPw3VA1dimG2T6AE0gkzOjZRoq8tRH/cIHFDQZdBM5Y1Wjx77R66Kpz+QJ0pPIt+xOU3V6kEb4t/hNBFnFCVN1gKBhHztqQfgPNfve88YfFDEXq7FLFpszKliZtkC15OYwGlsp1yleKODDlWHiqGIa2cXJfTH0AWnRkKWuDd21nOzCxkWFLDMxxbmi9FJKG9ecwt4TmxbKC9+w69o3mhC0R0iJOgXU3+b2AVKPsdo6A0QtCVaa9jTs5yjLGvU64lHMW2Oz7IgvdA4Ldl7A0mOvSWNvXMLqaRsPf+Zzm5g4IUoX/vNm8KDruKEDE4nDQiufWDKnZUvBRCf4neXIIYISFzLzyONPg6uvx1Ye3FYDoUtrf4b6cWKOPt/8CklL/i61m/QpKhCUoiNZnhWpcH7gq/gtYwrFliNm8PoeszXKdHs4bC8Arf1jTORQRZ6+O4eWMVqz31hoGNxSa+XZ5GNxGxAEWCvho/NyY0hpTOd/oSsa7pKoSKTdeCsfb3cX7aHzE19c9IMypfMsHJint2p8LzaRqUuDAwi9dnLG0Sn9RD6MJ9kZ/NPugzwytF2HjyciiMsGRvUSrziU2LWI/6386oixfVtPQWYgDnCUqI+LqCSUzvRULGfoTCX47fEHC+QHQfEB0JypJqUGT7mAS+FsOsn0S0kaeYSCEPOFuUS7yYSk84Sci9h2kMnTfE0ec4ROgRoSLanNScVKSvrItO7nfoS72BVvz/hrtYn+FAWRFsIv5CVv1PtDgbGkVEVVwkcufJrjt0ixqdxJzPKDoQfOsHcTB+d7hrRr24IiToW5BqaJDT8jmW/cg2HkSW+SBKErYi17JPbv8WDeSJzRQb93ymjBU/hT7d1W4Y3pLQ5wqM9CL899HhFWO9VH9HuAnHv1KK/0X6Pn9ev5gF5AN2mT7hpzNMhwYbf7pbMuFqzqNkkQgheuRQoympAZbkhjBCikzOTCboW2HWOWSR6yLXvjtgfMetcG/OguRQts6EBpZe86Sjosqrv6ySZMhv07GE0K25U0rE345/B8FCWU6JMbyqk3Df+1Us6LqMfwOhLZsFPxSDhQAAAABJRU5ErkJggg==\"","import { ptBR, es } from 'date-fns/locale';\n\nconst CODE_LANG = {\n br: 'pt',\n mx: 'mx',\n cl: 'cl',\n co: 'co',\n ar: 'ar',\n pe: 'pe',\n ec: 'ec',\n do: 'do',\n uy: 'uy',\n cr: 'cr',\n bo: 'bo',\n py: 'py',\n sv: 'sv',\n pa: 'pa',\n};\n\nconst PAYPAL_LANG = {\n br: 'pt_BR',\n mx: 'es_ES',\n cl: 'es_ES',\n co: 'es_ES',\n ar: 'es_ES',\n pe: 'es_ES',\n ec: 'es_ES',\n do: 'es_ES',\n uy: 'es_ES',\n cr: 'es_ES',\n bo: 'es_ES',\n py: 'es_ES',\n sv: 'es_ES',\n pa: 'es_ES',\n};\n\nconst LOCALE_STRING = {\n br: 'pt-BR',\n mx: 'es-ES',\n cl: 'es-ES',\n co: 'es-ES',\n ar: 'es-ES',\n pe: 'es-ES',\n ec: 'es-ES',\n do: 'es-ES',\n uy: 'es-ES',\n cr: 'es_ES',\n bo: 'es_ES',\n py: 'es_ES',\n sv: 'es_ES',\n pa: 'es_ES',\n};\n\nconst DATEFNS_LANG = {\n br: ptBR,\n mx: es,\n cl: es,\n co: es,\n ar: es,\n pe: es,\n ec: es,\n do: es,\n uy: es,\n cr: es,\n bo: es,\n py: es,\n sv: es,\n pa: es,\n};\n\nexport const getLangByCountry = country => ({\n code: CODE_LANG[country] || CODE_LANG.br,\n paypal: PAYPAL_LANG[country] || PAYPAL_LANG.br,\n dateFns: DATEFNS_LANG[country] || DATEFNS_LANG.br,\n locale: LOCALE_STRING[country] || LOCALE_STRING.br,\n});\n","module.exports = __webpack_public_path__ + \"static/media/apseal.da6c3cfd.png\";","module.exports = __webpack_public_path__ + \"static/media/codeguard.8aaaab4f.svg\";","module.exports = __webpack_public_path__ + \"static/media/cobrefacilHG.6fbef3b8.svg\";","module.exports = __webpack_public_path__ + \"static/media/creditasHG.bf7cf016.svg\";","module.exports = __webpack_public_path__ + \"static/media/modal-deco.dd1ac31e.svg\";","module.exports = __webpack_public_path__ + \"static/media/starBackground.c182b2d9.svg\";","module.exports = __webpack_public_path__ + \"static/media/star.12770ae0.svg\";","module.exports = __webpack_public_path__ + \"static/media/barcode.822ce63d.png\";","module.exports = __webpack_public_path__ + \"static/media/Asaas-list-decoration.fbd50912.svg\";","module.exports = __webpack_public_path__ + \"static/media/asaas-logo.3f1da0de.svg\";","module.exports = __webpack_public_path__ + \"static/media/snappy-hero.60016e70.svg\";","module.exports = __webpack_public_path__ + \"static/media/sitelock.b5e3e7ac.svg\";","module.exports = __webpack_public_path__ + \"static/media/banner-snappy.7cbe2fe9.png\";","module.exports = __webpack_public_path__ + \"static/media/logoTitan.7506a422.svg\";","module.exports = __webpack_public_path__ + \"static/media/logoCpanel.db56b70a.svg\";","module.exports = __webpack_public_path__ + \"static/media/checked-background.d08d363d.svg\";","module.exports = __webpack_public_path__ + \"static/media/HalfSnappyLogo.747bba94.svg\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA2EAAAJhCAMAAAD/pUi5AAAC8VBMVEUABHUAcZkA+ccAqKsAJ4EYe+4AAHZ8P12jUlMAAGroXW0ABnYA58AAA3I3Hmz7eEEAAHAAAGEOZtUddN8NAlckjfwABHUAPogAAH3/a2wOULkCT4bYbm4ABHUAAHYAAnUABnYAAHwABHYAAnQABXcAA3YABXQAAXEAAGkAAGsAAHcAAGcAAGIAAHgAAG8AAGgAAH71dUIAAGQAAIEAAGNvOGAAAFAAAFsAAHkAAGYAAFb/cGsAAG0Agp4AAH8AAF8AiKAafvFGIHPeV20Arq0AMKAAPogAAID+Y20AyLX/g2kVdecAurEAI5V2MHEyGHS+XE8Asa7/iDcARIoADHj/eWrNYkwA/McA7cL/bGsqnv8AYZQoEnT/li0A/8oA478Ae5wHBnWXPXD/fWn/jTT/kjAAzrcBQLEAVZAATo4llP8ij/4AGnyfQHAA8sMA58IA27wAtrAAMoQAEXnHT2//kWf/lGZWLmT/fT4tov8A1LoAjaIAIX7TU27/mGUAxbUAnqgAdpwAAIUADn8XC3SlQ3D/aGz/dmv+gToAvrIvG2v/iWghDXQOCXSSSVgpmP8AR7oAK50AKJc+G3RRInPwYG1MKGaHRVnbakceiPwgiPIMcuYA/9sJZtkAk6RbJnNlKnJ+M3G2TG8bEW4lFm3/f2n/nGXSaEkehPgANagAapkCCnRuLnH3ZW3/jGebTlYObd0CU8YAwrQAmKYAGYwAOYYRDXJCIGfGYkwAWMsATcAAH5EAE4exRXC8Sm/jWm1gM2CwWFEA/9GPOnHBUW7ocUTvfD//nCoDX9GINXFqN1+7W1DjbkbtckNDF3RuNWEAAEP+eUD/gicAcv7fXG1yNGH/dTkAXO8AuMb/t2yFP1//r0T1eUC7RzD/lB8Ak/8AhrEAGK0EOqUAC55fH1f2dUL4dkH+VjMAffOZm9IAr8CTibi5l7AASJ0Az4+tdodiqH1PfXl7ZmfGiFioSE7/mUqiIkXCNkH/lTv/aQH/eQAyNm7GAAAAHXRSTlPy/v7+/v7y/v7y/vLy8v398vL6/Pn25fLy8vn5+XATV0cAACBmSURBVHja7N1XaBNxHMDxunHri6Lw+/1vJHeXuzOJl7Ntamzdde+qcdW9Z9277r23xr33wAUqbtwiIiLogy8iCIqK6KuJRi9qHDgu/5z3gUILeSr9/tf9k6ZUgBTb31KucKGCpSqWL55SMiWO4n0LViyeQrOiZRo1K/orr6tUomgKRUoXzy9VqlDp8qVLplAGKoS/bH+NQ9Lq54bmDNTdDviWp2+X+hLQDJs3aobwUzh/3gwEiih7hriHNyw4xeMnDNAlxS7sr2J4zVXgwoUNAZ1n4EvWKQzlSyM7UVWYf0NdVdL6ts9trUsOoIpd2N/GuXUhPzTkmOZxchDLKoURGbfsGERVYKDUrCsBr0k12k0eqIpUTWN2YX8f59InDA0NG64GvkjMGoURxE09Jg1CAjSJFMYDI6p7W7abolC1VLQL+wcY4pfCS8Xxoh47nFqhMAax+cwdwWWIFP0Nw6fCIoNb1rHwUlF10bNU/KIwgbCZmekC2P6UQ9SZ/FDBjh6/sR2zQGFEJhNHhV9B2QxmFAYcUVw1280ZTs9uLLYwQfaOXt1im69K4hrjRDdYgzO8VGwYGpqnSU74KOkLI4gbt486Q2Ta+jIKC2NEtc2R3OFuSJjYAejLwoj3fK8WN3u1YLNJghpzqJI7i6dm+PkjHFH8/dqHWrZR3dynwvolc2GInfbv2D9dpuuMI7awKC6QMSdfg0TB6bWNxr4sjD3XeevU7LmzW630sQlJjMtqumZAn4wsjgMriJzcd71woYY7uh3jtI4X8pK0MIYgjBjVaDPS2JdRWHQSE4dMUSBBsHawenCj8XuKLSzzZNupArCZCztX3epLxHZMYvsfrtd/19FUxRrTGHBulSkUKtj3w+kWJ+pzBvMi0Ox7hRHEi/NGbiEyTad0cQvjiN8zpUu+i4fEICQ4A7v3aDBfRgYiYgvztr2RCSA4fd1Wd76Rnu00vTG13lo11b1+7CEh1W2RxpwuvXDv0LjCmsftyeoY6qoB1b5TGOLyWZNK0LlA/LIwLqC2zh3ST0vYMzHcO/M2yjBx+wiCBODrwlp4IUxI95WZ3WsVmy2b3JharwgvSqmna3U4rKQGrNEYQxQlvB0blsflFQoNk+iewuIWRhA7NZhUvTalC0SjsOiaoV0NSeMZSBDCNKiNgHLzmTkXUSbxCosgbGa1VlWvp2eaO4/p9WqBm3OoqbvX1FrsyhAt0hivBbq2H9y+XbvxLoqe0/xqYYjHJx7I2UzfCf03hXFuvU2NoXOGJ+xSh1EYAOK+YINmBEn8wkBwetnRY3pez2QJmMIoDIDj09KW1Fq0OC3NYY0jD87tdxfum8cr1I8Z3xSG8oKzI3M2IVK6AYvyjy/k4fXAhsEtC2suDhLGKAwI4vKZs5ph0biFRYQbW9VrzFzTjjyMwj421qf/gFNp1igsTHR5XCLNs0C8whiCeGbkvO50z18R/poN07SOg4fW1yXCQcIYhUUba5YT7PTdwkCQfVVadN7J+MzZjhmFRTj4DO3q2CUq2ExhFLYPjZ+w2fZRI4Dy+SvCPXzckcntO2pKYvsyCvvcWJ1K3yuM5z8ceWyt2nkha9IlD6OwCId4p/JanQebibDTvGv46Xu5W4kd+zvRfMDxGSMNLFRT1PnEDwVGYREMyvfiFuYQ/ZIiEQYE1rfyyknWCaaILYzjMzIaH8qyCzMVgR4TkXxYIMpkxshGG+lfIH7kCGh+kYPE+3oOmxF3DnO4AjV7z+mnS04QiG9Bz9EsmMIoLHKgWG/RLsYDNlPhllHLZASCuG/7qIkkSfqiSGxhKNeuPqt2vMLEwOTcjuMHT54QuVInTF19PhPMYBTm8Hx4KJal0372ZjnYLefAPoK4LDhpfyfa3qOSDD4XxhB5+ooeM+KfJfpr5CqqytTtki/qIps9e5UXTBEtzCFa7GJHEmFwenBSToPgyJykWSDS5VNhBHHL9rPdZFIyTmFEaTJedXAuNa/34D3ZeGtMugwmiBbGkbS0xR0sdDkxuTCIm+oES2yyF4h/VBji5pzgMhnj3+ngpZY1FADO6dGeD3l596nLrJv2kVtTvJq6ZED/3RlZThr2rf8hhiCiPX/9LrK3wTKC8rJgTjNEgO8VVremAgACm33ifs8XD6aZdQ1FD9/8vTOtSIfDaoZF3iSWnAix+/pdhFTfWGVBiR5nooPUDwoTqviOX+78hj9dt8sGSTPlSV6AX3to8aJ1Dqvc+rX9h7D7rImzSiyIvs/n+4X5033OG51XL/Clu9S8obn9NL8JT/Mc6ulaa5am+u2+bEmL4OaztWWEqO/uw/gF55/cOhG5lMg5FaXGuGH9/J5/vzNyaFmqbm/AbMmMICIY4hamPHv8ttetbT6WQATD664pg8flqSacnvP2JQ6bpXz1HudIYQLLvnp4f6WPhc84URfzu+QHAvb0YrP9fmEnW/gEQfbNvf/wNeslEItzqwPbD5PsGcZm+/3CVrXyZmezB3u9G/bYL8BXnP5Abl+6PynJZqNObGFy+qPZK4vNnr1NjpzWf8OhNqlJ+Qe52Gy0iS1MYKu0mF22GMt64hTGOTVxSD97DrPZfrswENK9VVivU5C+LYxzqYUL1vXY+zCb7TcKMzidxq0pQ+TfxtTtMl5y22eJ79m7Y5WGoSgAw08iCdbahAaE4FIo6CBOLoJQwaWTWBBjcVSoHX0VR8H3E6XQCwUVjZgD3/cOPwn3cs+BHxSW2ixsO3tfffbyUHV+VBJ0zTcK2x5Xs4/1nf0toOXC8kG1e9TJFdQQwBeF5VldTCeLs47txoUoPi0s79Wjq6aZ7Xd9GDR01WZh6zfO2bC4OLmcFrUfRGixsGw4v692+mV1fHv+XNQdGPMIUa0LS4ymTXlQXT9NDsu65woMWi5sUM6b5ePN/M4BB/xBYfm4XC5OX6vS9wvaKiyVD4Z7o+Lf91hAeKvCNvUM9ILELwoDVhQGoSgMEgqDUBQGCYVBKAqDhMIgFIVBQmEQisIgoTAIRWGQUBiEojBIKAxCURgkFAahKAwSCoNQFAYJhUEoCuONfTqmAQAAYBjk3/XeWlgCHiAMgyuGQRgGVwyDMAyuGAZhGFwxDMIwuGIYhGFwxTAIw+CKYRCGwRXDIAyDK4ZBGAZXDIMwDK4YBmEYXDEMwjC4YhiEYXDFMAjD4IphEIbBFcMgDIMrhkEYBlcMgzAMrhgGYRhcMQzCMLhiGIRhcMUwCMPgimEQhsEVwyAMgyuGQRgGVwyDMAyuGAZhGFwxDMIwuGIYhGFwxTAIw+CKYRCGwRXDIAyDK4ZBGAZXDIMwDK4YBmHY2LmflijCOIDjtUkaRR4L4mnmmWmeHbf9585Gs7FOHqQl8BB7qEDWOtiSIARdDAtqO1VQx+rUJUHwIgRhxzqkYEkUBFIdg15Ab6BxRXhoE1edDQe+n8vMG/gy83uehweIFQoDNBQGxAqFARoKA2KFwgANhQGxQmGAhsKAWKEwQENhQKxQGKChMCBWKAzQUBgQKxQGaCgMiBUKAzQUBsQKhQEaCgNihcIADYUBsUJhgIbCgFihMEBDYUCsUBigoTAgVigM0FAYsHspR0pfaCgMiI6S8unSy8BXYh2FAREG9ni52l99/tjLrDdGYUBkMqnqx4ycXq71+BVnrTEKAyKTf7fg+Y70nlbHlgLZTIzCgKg4/sK3QAlh5PPd12498vzwncKAqDiZ/k9ShFTKy1yozQgvpSgMiLCwU1I0Kd972X9tzq9kFIUBURcWUtKbfPC5O1PZT2FA9IUJFY5j8/1jz45SGBBhYRpDBm+rvRQGdKYwoYxA9lAYEGlhOpXiLxHoXGGs1gNNFAbscn8VZtnZrG1RGNCRwpyce2fCPWkcpDCgA4UVzk1N1evjxQMUBkRemFUaHx2cmBhInO+iMCDywpL2jdnT5XLaHDpEYUDkheVG6m5SCKucPkJhQOSFnWwMu0b4tBzmMKAD37C9w312+GQ/DPj/hdlJWwDYeWHKaT2XaNmu7bqGJQDsrDAlg+6Wwuy+wcuvbqbLJAbsqDDle49uVVsKc69PvX5xachMJ00BYLuFHffEzOKb1jmsdPvqmeKdu4kBt2DTGLDNwlL+XK132mu9pyM3cDXnuMXxKzfGi64jAGy5sEJj5We1OlmRas8/CxOmUcg1EvWudJZxDNjafYlC+fLY9y9PZGAosUFhQpjJdHLf6D7FOAa0WdiPr3LtQlLr4uLvE5WUEmLDwkJWNt1VTzRy5RMCwGaM/PMP95u33zyp/RpYae4qb1xY0+o4lhjOJgWATcn5xcn7lfxkOIDZsw/72ihsdRwrTA2WBIBNqaC7drGndywcwMK1xPYKswtn6y8KAsDmjODwzPses5JS7RVmGqW+kfqQyV8i0BYlg3w+o4Roq7C1TbGRUpaVDmAr2irMyqY52AF0qDDTLibvjXI4EehAYY2cUcrtTdQ5YI8/7N0xSgNRFIZR1A24gRCZRMgQSSDYRBBTiL3YCBa2EUIM2CWCrsQF2Ir7s/1rmSkunLOHr7gX3n10X9jycH21eHh+XC/mHolB54W1d/vv++NVawCDPgobTo5eT94MYNBPYc1w0k4NYNBpYWk4Gg6Af3DNDXqWF0nPRi6SQvcmL7t21jTn0+WRwqBzo3b/ebOcXv7u/AwB3Wsm79uPp/Xt9nCqMOjeeLo5/HytNhcKgz6MZ4v5fDlr7BKhP7b1MEgKg1IUBkFhUIrCICgMSlEYBIVBKQqDoDAoRWEQFAalKAyCwqAUhUFQGJSiMAgKg1IUBkFhUIrCICgMSlEYBIVBKQqDoDAoRWEQFAalKAyCwqAUhUFQGJSiMAgKg1IUBkFhUIrCICgMSlEYBIVBKQqDoDAoRWEQFAalKAyCwqAUhUFQGJSiMAgKg1IUBkFhUIrCICgMSlEYBIVBKQqDoDAo5Y+9ewmNGojjOH4SPSkoHmemk2STNXVrbDAJadmgIissVSl6cLGHYpeFFW+C9eClq1VEba2v1iI+qqioVEF8VBHFJyqKiojiA3ydBE8evMkaxenupm2ygiz8PqfS+5f5z2SSRWEAAhQGUFNQGIAAhQHUFBQGIEBhADUFhQEIUBhATUFhAAIUBlBTUBiAAIUB1BQUBiBAYQA1BYUBCFAYQE1BYQACFAbwf6kJI2kkVDIhKAwgHNVo33l5Z3tKn1BjKAwgZGD7Op5e/tIxzJNsAo2hMIBQ+LG2/cmUsb6140aKMzIeFAYQinHiRJeusiTfmX06NcVVMjYUBhBGzHnzwigOi7rZPmXanWPmOEceKAwgjFhi7hP++0jRTNxsW+akYmM1hsIAQhY2jxPyp7FtndnJhsFIIBQGEKUwn8qTDzq2XjKDt2MoDCB6YUSNJfmU7J2LgdsxFAZQRWH+kUd/9mbQdgyFAUQoTKQ65tTOjnkGZ6QcCgOIVJiI/d6OOSophcIAqi6MqLGUMyXbv8Msu6yIwgCqLsw/ud/Rn53CS5cxFAYQvTBJitteXJL+bMeyj7hORkFhAJELUzS3kMsV3LhCipjBW4cNMgoKA4hcmOyN5OdPyt+fZWm/GlNTL+46MSJCYQBRC5PsD5ld3uy+kz0jjVZzsTHn0h1VJyIUBhC1ME1Ot1iybNun0iev1LuyQrqG73KsYQD/prA5LTM0jRBFtt1Fa3pybrxr3731nIyCwgCiFlbfklYain9IzLZ73z+/8Pbd6xQZDYUBVFlYkaJ5/OurVwvsBoWMgsIAqi9M5eb6Zz8+vXx/frYtSUSAwgCqLUx1zKEvbcNGwt2VX3PVqheXMRQGUF1hqm7ql9tOEFOvY7Z9fsM51RJGRRQGUE1hzSzJ92c7t/n36pVm69r8zIjnyhLxoTCAagqj5r5fX05U/X9JymxrUT5/yvUUvzEUBhC9sMGuoc9twzwpvN8sya43kpl/zfIvK6IwgIiFqfUfB5e9O1FX+lKYolnquQ0H414xMRQGEPF7iZyv/77V34CVUOqtCwP5QjExFAYQRsy5OzlZbMoxh+be+9Yl9CWQJM86d2CORggKAwjFuHyni+s8dfFhtr/vJW8mlSnx2QdyHiEoDCCURKKzc1ts26PWm0Nyy6DSQAIo7owrNiEoDCAUleuPWp+29g+ZjnAvsYwyywtYwxgBgGCqY1y8dDHpqCSoMP+x2PSZs8r3YXWMUorGAMbCEtwR7iWWU+JWYX7PtQpniYxt7l5CKQGAsQUXpmhu/P6GQc0ufx7G6NGmzU0rd+usjgBAhMKkmG339gz8uWJfUlhd054EPXr8KEZFgEiFKY1W30BPzrVjle4lstOLd1Omb1+54oyOUREgbGGKZhXSmSuNrqwQX+katngBJYTSIyu6l6IxgFCFSTHb7c0MLrdm/e2rYmGEUXr9+MJ2HaMiwHiFiQNiy0C+z2oU+6pcGKlj+qazq9dSihMPgAkVpjRby4sDor8BE5QX5qN0z5am7ZgUASZQmCK7jVcy6YI/IAqCCvNHxdvdDIMiwHiFSbJt5/IDwoAoCCyMsMTjLe1YxADKCN/89fvaNSkvnNALggtjlG5ecQTPxQCCaFq6z5KZ554amJSLu5pCygUWRunhLU17EBhAOeG3V1o8++qknpFGt6FyXwGFUX1V94pbuNkBMBbZPp+ZlF5zsMHSgvqqWBijbOPxdQx9AYxJ0exCb6//G5iByguj+q3Vi7fjSgfAeCQyx7bjkkQCld5L7H6s01XdWw7hDRaAyIILo3vXkXXH12EDBj/ZuWOUBqIoCsO1uIZxAhMZIYJ1xKzCUjGdtVq6J6uA6wvpTvqZ4sD37eHnvuLdyxqFDZf59fduPQzWKWxzN/57IEJYorAw+icFy3HNDa4oDKooDILCoIrCICgMqigMgsKgisIgKAyqKAyCwqCKwiAoDKooDILCoIrCICgMqigMgsKgisIgKAyqKAyCwqCKwiAoDKooDILCoIrCICgMqigMgsKgisIgKAyqKAyCwqCKwiAoDKooDILCoIrCICgMqigMgsKgisIgKAyqKAyCwqCKwiAoDKooDILCoIrCICgMqigMgsKgisIgKAyqKAyCwqCKwiAoDEqM0zAoDNaxnXf7p2mjMFjF/HL4fNvv7m8VBsubHk7Hw/H35/FGYbC8efv1+jyfPr7NMFjBfGbfjlWjiKIADKOJhWggEa1k2HVn1t2BYYUUM7gsLDZCsBWUPEBW3FSmWhH0FZJOJH1sgxYxPkQeSRCEY3+nuPB97/Azc8699+Tzz8WsOb68rzBIb/L64GVdjKfNY4VBkLSwYjgwh0GQuDDnYfCXwiAnCoNIYZAThUGkMMjJv8KGuwqDIGlhw3J/R2EQpCxsPN1/59YU9GBy8vFD02wf3b6lMEivrA+2hl/ebD3dUxj0oP509PZyu1l4vQJ9qOrJ8XQ6tq2Hfowms3LoPAz6pDD4j8IgKwqDQGGQFYVBoDDIisIgUBhkRWEQKAyyojAIFAZZURgECoOsKAwChUFWFAaBwiArCoNAYZAVhUGgMMiKwiBQGGRFYRAoDLKiMAgUBllRGAQKg6woDAKFQVYUBoHCICsKg0BhkBWFQaAwyIrCIEpf2F5ZFUCQtLDVvBuPCiBIWNiji+v2uc8YBCkL2z3ffKvaWmMQpCvsbvv7xeHVtJMYBMkKu1c189NXX08bwxgE6bb1o8HyZrUeLwqgh8KKanZztn5SF0D6wqpy3lxtVssC6KGw5fz7+/VZV5rDoIfCHl5fHP7quoHAIEhW2IPN+ayd2NVDkLCwOz/aZ/qCKOnN36bygwhB2sJ29MUf9u0Wt80gCsPoSnzH+NuCWUsi76CSUXmYbVgaYMNkASVm3YILGtJdVWqU6JXyJw270jloNPzRzB1peM3/MGhAYRAUBq0oDILCoBWFQVAYtKIwCAqDVhQGQWHQisIgKAxaURgEhUErCoOgMGhFYRAUBq0oDILCoBWFQVAYtKIwCAqDVhQGQWHQisIgKAxaURgEhUErCoOgMGhFYRAUBq0oDILCoBWFQVAYtKIwCAqDVhQGQWHQisIgKAxaURgEhUErCoOgMGhFYRAUBq0oDILCoBWFQVAYtKIwCAqDVhQGQWHQisJg0hirzygM5oz675PIFAYz1qN2+83meq5afURhMGPU7WF7c7M97Mcy1qt3KQxm1PfL46hlfT2e/n50VVQYTKjd4XGpMarODz/u7t+/KioMJtTt6VxPq7q/uzycl2gsKQxmprCvmzGe1/XndLzGOJYUBjOF/f42xsuz4rLaH7c/3xzHFAbTZ9iLqt2vy+bLG+OYwmC6sNyof+3d1e/TQADAcRwCITgPhLurrmtXutGNjY6hwd2G+3B3d3d3gru7Bwue4BpIICG8QPgHCE9sHLIf7DegHNDL7vsG4QX4fdbTbmN0YsHpGuRAlpgwFuvPhWFj3Q6MOIdg1t9mwlgsIsIAh2DXCRNj3w0VmTAWi4AwHIRN2k5cMV1Leo4xYSwWGWH49+G+WQcuNPn2HGPCWCxSwvDKPbxZf+QEDn7eHWPCMjaXzPsqAtoTFMsrcsBO5IXhkIbOjZjX7fPuGBOWqbnK8StXbatT0QVoTnLvHdfebSEB2Im8MBzUphecGN34yRgTlqnJ/KXu5ZvvBH6NZmMGV6/n2MEtdFUGtiIvDAdhjUo79neAEDBhmRq/qrlcZVuRjgv5KohaY8jKPSmkVss1p79uCMB25IUBBOHm+iOHI8iEZWgyf22hH/F1RjXvPqoOTysx0T2ni6noLZu1PqoEbE/HyAvDSx7o/Mj6dyATlpnJ5crf5YELVeEXdry/zU/pdEx0N6vsAYKqDx07cI/lsTkdIy8MB7UOsXnzIROWkcWFVeABAC7NL7TqeEqjczqGhQFB9prt2wyuras2iZEXhtOmH5jAhGVmWFgiV0X/ttE9VlE5HcPC4nGiqY5r3XAYgekYSWFAO19/bz4mLBPDwnAuvs7F7s1X+umbjmFhnxIUfdiQ1hsiJoHpGDlhcNO8ZamEQQgRcFICUk0VCYBFWhgmJlfhD3Ysv5W6oWKSMJCYjh0fPLC9JQrAbuSFNZ7XJIUw2GHLcgiBgxI9tY+2MN0yYP0FYXg61nX19QI+n7M+WX9LGBCQx2zfqbLX7t+BvDCkXYihH4XBBTPrVlrRQXOQMU/OgUM6H8mju2X2HCMv7Mt0bO7s5qPoOuSRLAxPx6qOHzRUBbYiLwxqm3YMSLHSAbttKbfgXN0VyxxjLJJnUO3QsHGT5tTWVUaMtDBJqRoOKRJAPn7V6FtdaTqr+L0wAel7O9d2iDCozZ8w4gpEKYTNuAyhBobHHnXVnDFocPepFxEN3XW09ZBhusIBFkFhkqX3OrTYCouSS/P7Zu+kaaD4nTBZ1Wu3PuoWgY3ICsMbziMO3NQgl0LYgG4w8Semr4jNcMaSh9qiHqcAwdD7z2ldTTVFZoygMNWdt9/6Xf12h6tKgstXY/becoCakoV9/vmo7FYcsNLx+dAUSPBJLQw/5WpUmrXJCUseWBj+jBrcpr3pZdMxcsJCxfsFguaZdruOBb2Sf9RsoAFqShLGiQFjQ+tmLXXFAav1SQd/sxeGId6Mzmzy/x9jWBheLfLsGTh2qG6wxxghYYqxtlZYUoLK+jHrRbFc9wI+QE9YGP7BsD79YKgO2HGG2oILXy+vpBOGL5NdqT/jvxPDwr58VClHO9U0TLZyT0ZYRKq+xARA8gaPPXy48MMLH0WDRCzs81aYjcENYWGpL2CmFwY4qHWI7oPAZuSF4eH2pIEtLDZQJCLMANVrBUA8PlJy5LO3r8MeCVATFiYY+rCGrcfZmaCTFwZh4+0jJ4Ck9yamEYaJlXu0xVHCAJDd+pROtd2ARUyYS/NrTV++mPq03XojqFBjTHQ37GKJgci4T4vMArARWWFQm992x0w8AcP9TBiC8Ep0vsOEAUEMbzjiEQGLjDA9sRXWY/TcqZHgsV3tFodCtBxQQ1azIWErfqz+uK464AYm0tCMEbFNWRfg0wuD2r5o2yYEgJEVximhyQ0tBFhkhLn9K5t3v1iHd3FC1fDuvv2WBHWJDmOR/oOHTGrT3sbVMPLCEIT7tk8c/p2vtMKgtqxtdLMDluuzChOQ5ZmcK48KWCSEud68Knm7x0G+iuyK/1ISw/rhdnmnBd1UDBUl7/jclW1cbyYvDL+NNL7yDjmQXHbC8DuCH8W2OGLLOYswWQ3U7jx4PE0Tcgf2RZjLmLqu7IOd3Ldj9VIkKK0bc8NTlYp/YMkwLRsTMOLCoJZ4o/amFFyyE4YgnBFbMV1DTth4ShKGIoHEwQ6Pl4r/f+cWF/Y4Lkz28fnfj56b9S0CkhU826/vNJ2OgaKNiAtLaDlwYEAqXymFzeimQdS4UqUaTjn6+1WYEAm03NBmSEt2OJHEm3CmlvPxo548ePdKdYEsCXIoeGitRwGsX/iGPg5B2Dg2YkJXmIpLSmH7VnS9XKngRkcMEJOFcYm3CnU+Ot5kB+z/PP5i95Na/tFXL/IPa+ng+ySPe+1SC7CyC56PoW8nn2LzhmfnK5UwBIdH225yjq+EsEmcwommWi3XkfE6u+xMpCrPu48enZ+vqOEd5ywJUnhav2NewMouuHFkYw19/qL0pK9b+aEkYcnETiAH+UrcXukZMdxm7zadW+gqOy5FJpk/MbeiT46AH4VJanDaouJV2YZj9iG4/0ATDUI4fcXESnfSrLenFAYQcpIvAIxhbdrrQ3sOzOmx2POLXBUrygAYPwiTlLDnxpj1ATYWTxecHh05YfmyCSPwN6RnGx3v/BW8vdv0HDRZCbCbYYT7UZggh8K9FvVrFFTZam26OIiG1z8wL3YOaWl90SEMAO/4PeMDBvtQJVhqYZIZbLRmUS96Dk79tzgIuy5fjiAEaaNFmGx4DDYBI1+yMLzb3DK+2+wO03P49x9m662HtAhjES21MEkMm6fH5J3GBogEY8IyvW/CJBOf+g1QcuqXlpiwzM4QsDApEgQNaLq5Qk1MWGZncNWXBvCR+jHrVIpuX1ITE5bZKd61ve4p+FoYVW8QoCYmLMML9RqzNHC2erszVcNsgEi+hLDSIAcrcytcrEypEqWKFy5ZtFAOFvlA6Y+FGtY7U0W2aAAAAABJRU5ErkJggg==\"","module.exports = __webpack_public_path__ + \"static/media/apseal@2x.40aa002c.png\";","module.exports = __webpack_public_path__ + \"static/media/illustration-domain.245dff89.svg\";","module.exports = __webpack_public_path__ + \"static/media/funny_dots.a35c3827.svg\";","module.exports = __webpack_public_path__ + \"static/media/blocksy_p.83a49576.png\";","module.exports = __webpack_public_path__ + \"static/media/blocksy.56215cdf.png\";","module.exports = __webpack_public_path__ + \"static/media/bravada_p.d6bda8f5.png\";","module.exports = __webpack_public_path__ + \"static/media/bravada.40bc799d.png\";","module.exports = __webpack_public_path__ + \"static/media/colibri_p.ed4eb53c.png\";","module.exports = __webpack_public_path__ + \"static/media/colibri.a9d7f379.png\";","module.exports = __webpack_public_path__ + \"static/media/hello_p.47b56740.png\";","module.exports = __webpack_public_path__ + \"static/media/hello.0953724a.png\";","module.exports = __webpack_public_path__ + \"static/media/hestia_p.3ea04b64.png\";","module.exports = __webpack_public_path__ + \"static/media/hestia.9656428f.png\";","module.exports = __webpack_public_path__ + \"static/media/rife_p.a2cc0885.png\";","module.exports = __webpack_public_path__ + \"static/media/rife.4a3b1680.png\";","module.exports = __webpack_public_path__ + \"static/media/ashe_p.5655ef95.png\";","module.exports = __webpack_public_path__ + \"static/media/ashe.bb0d9166.png\";","module.exports = __webpack_public_path__ + \"static/media/astra_p.dcf84d65.png\";","module.exports = __webpack_public_path__ + \"static/media/astra.c82aa5a3.png\";","module.exports = __webpack_public_path__ + \"static/media/envo_p.b489ff69.png\";","module.exports = __webpack_public_path__ + \"static/media/envo.b9a74ac4.png\";","module.exports = __webpack_public_path__ + \"static/media/shopmax_p.aa084c54.png\";","module.exports = __webpack_public_path__ + \"static/media/shopmax.a82e56a2.png\";","module.exports = __webpack_public_path__ + \"static/media/storefront_p.8681b2af.png\";","module.exports = __webpack_public_path__ + \"static/media/storefront.fdbf770e.png\";","module.exports = __webpack_public_path__ + \"static/media/supermarket_p.706b036c.png\";","module.exports = __webpack_public_path__ + \"static/media/supermarket.cf824bb6.png\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAABHNCSVQICAgIfAhkiAAACFdJREFUWEfFWQtclFUW/w8zw/AYYHiDDAoEgwiJRqyiyGORzUerYuujJTW2Im2p1TJYzVdLKlRqZqYWq2a6hIGBi5i7SEjqKiuyYgwq8lBAhvfA8Jg33Ts4iAjDTMp2fr//j/nuPfec/z3f/c4998LALxdrMnQ5gQOBH8F0Au59cx3k73kCIUEDwVGCtl/iimHgIGOi/ybBMgJ/e1d3WEybBVjbwcTWGVIzS405k+4OSJvrAXELJBdPo6mmijYX3yf6Gfkr19evvgSNiMENFHbOLmzTqJVwm7ccPZa2evkxlbSgOusIutP3oqVRpCCDEgm2EqhHMqAPwTBi5JCN6zi3cW98AFZoFHpHsjpMP3WmzDuOuwf+hpaa6mryuIKgQJe5kQhuIQqbfWLfA3dFAtQMGsjHF6NeNToPbYcwZTs1tpHgg+Gs6iKYYWJmvtAz+VuYBIQ8PqshLEiLzuF2wmJIu7sySPcfhnIyHMHvrJzHLvD4OANMd59RIac1qqooRWX8IrTX3z1B2l4Y7GwogskcrkX80wfPAXzBqJLrJ1kpRFlsOI0kfefrBzodTDCCdOZO3JsD48mj81qHm7H8agFK4ubQbsohT6s3kCCTNN7zi0t0MPnjmv9L5AY76Tq6A2WfbxaRdj6BivYPJLjVznPCevcjl0kaGenjHh3+DOK56qVANFfeoDmS5t1+Jmbkd8ek3VlMViCNsGHCqC5BY24W2Nb26JV1wz4sCsox7oYZua+tvnQGV99+gUaPbkvd2lBtcBL4JfIPXzLYKIdsa4VzPeAtEKCsTAiBlwDVNbUYv//fYHr4GmyPDqhdHgjR7TJNftQSrPFY8yHfZtEbBhusX78Unr0S5OfnQywWg8fj4dXXYpGelY0Jh36EwsbJYJutaZ+hcvdf75KB4yhBb4IbU8+1QsmmtYD+osxLx+3kNyEsFcLVla7rBzIzMhLFtc3w2p8LlbGJ/kaJJkshx6VQGzrGixJc5+o/ZZvjvrMGGZGXXMD1VbOQfeoU5sye/chYtVqN0NBQlEhU8Nn7PVRGNEnoLw2vh6Hm+pV1lOBu/svxbznFbtJ7tFFdBUpfDcO7b6/B5k10qQwtMrkcoSEhKFdy4PVpNlQG7OWiA++j9quPdlGCd8bH7xzLXRCrF0HjplrcjJuNiGlTkPZN6ohjJBIJpgYFodXCCfydWSPqaxU6T+zHjY/XVlGCskk7jhuzgjRZXKewGu+gPG4uAiYIcObMGZ26zS0S2NpwwWAw0NTUjLCwMLRZOhOSmXqVa4qLObi2drGcElTNPHrRSOwxUadDZZUQVWuiwDC2RnbWSUx/Rnee48/ZCh9XW2R9EgMzUw7u1tQgnJDstHGF2+5sUrrp3gysKopxdtkMtYZgxLGLRu3uwxNUCgtR9pf5sHTwBtNzLtI2RiNkhpfOCTlEbgGTWA/0HYuTu/6k0aWRDA8PRx3bCoI9p6Bmsoa1wasqQW70NA1BecCudDZjCjlbDCGKCzkoSXgRbv7PoccuELZcU1zPSCCvTvdysI98HyxGX+39W38vHPsoGkXXq/CP0//FgeS1MBnjBMGuLCjM+84xg0X1nxwUv9P3ikU+6/c4mj8f84hS1554lKV+DpfAl6DiPaXp305Sy8tRU0darvCbl4wWaU+/XuzcQGz48yz4LkxCp1QO8dUjMDM3guu2VLCG2HG6slJQlrxaRAnu48ckrHR67UG6YJPtqyJ+CXoqhLDwWwS1maPGkaM1F8XfvEN+MSCVyWBqwkF3jwxJh/MR8awXQgM9+glFv/sV8q5pTnMaobFcvTgYDjwu3vvie02buuI0OkQ/wSv5ODgBYQ9NWvRlImoPJe+jBDc4Bc1M5O/I1CjIigtwZyOJGJMH20kvkvPhg3WyaUUknvZ1wTqyyG9WN0J0dgve2nYCGQU/QU229/N/XwUvt77JBC7eiVoxPR4/LM89442cwhtgsmjtAnDahKi58i18lsXBbFVSv3L96t+jrvCHjZTgb9gso8uT88XoOrwNpSlJcPGdSaqR6Y8UXc48c9SLuzRGPB2tkPrhCkyO/gQsVt9hapJgDDJ3xKCuQYygV/bCSM+qjdF1D52lGWC5eUOwOQVqBz7+N8MKil4Eak2I7RycrGRyNSx9F0Bl5vzIzAc3jLO3ghXPDCXl5IA+QLhsNqQqFZRkqzNEWKQ+7b75T0julYIfMgdVeSfbyXielmAS25iTYB9Kjpa/UrHaP5n2O2i88jXUahV935q9mIoLQQ0/OJahNB05eoZExlBdZk896s5/QZcnLY/uDVwlB3mOnjGcidG/WgwpK1nJMYgbbh8kP1+hkxtIkGbMRn7AEo7SZryhE38i+qzWMtQWHZcSY3YEmq9x8He2lMVipToHr4SCrd/F0BNhRol0NaCpMAVKpXIpeUzT2h0qEWRaWjvP5wXEQM5gPyn/Ou0Y9yrQXnQQ7W2i74jiwoHKQxGkbQXmNq7BdgHLIMPokqTkWq5+ja7Wmh+J31CChy7PhkuldPv4gUQy2GbyEkiZVqMSSY6qHW3Faehoq6e3seEEysGOdOV62pfJZhvPc/RfCIW19xP7ummI2G230HAtHQqF4iR5nD9cBPTZjOgl45c8J2+2hVcEFCb2jxVNtrQJkvJciEW36E0rLRTp/fWwog9BOpgebj8lWMS184CV+1RSfukuWAd7ZIlvQVx1GZ3NlbSLfqX0rrtppNnqS1Brh7JaRfA6m80xs+b7QmliC66lA8wtHNCi4mj0bJkydEka0dneCLa0Ga11QvIqyZ0IcIBgH0H5SMS0/YYSHDjud+SB/uvhWQL69dHTufaOmFYKNOHmExQRXCD4F4HB19s/AwoKtWhJL2nUAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAABHNCSVQICAgIfAhkiAAAArxJREFUWEfVmUtoE1EUhv8JutCFGRsEycMqtFpJCrrRRfBBCiLVjRJ1r0IRmy66qit1IdaNYKbFha+1GHQjPgqKD7pQN4qpmrRga5NosdaMC11UEs8NM0Mqzdw7Yxxu7yIzzJxz5pt7cx73jAKXYz/C23bA170CkVAVSPoAPx0VZo5+qhVAp2PmF6aLz1G5dxeFl24eVTMoOjYiENqLtb3tUE8QjF9Uz4DWx1G+/ABfhvL4VhTVFQIMIrgyiRatDf6joobt5CagX89gLlVC6SfPHhfwJFoPbEL4JhlazjPm8P58DoUjw5i6Y6dnC5hC5612rEo6fLAj8XH8yGh4e6iRUiNA30XEHi+Df5ejp7kU/g39aT+yCVIn31o4FgUkuCdewZk4BuRuLqAXy9poohdb7gUzaDjEbZcr1RQ1cpyD9Y5jAbJQMoAN5f/grU7B5wfxUTVDkAXYh9i1ZsU5p0R/y7M4mUb2mBHgAZYhetFR4BluWRNBZH3MEnvz6r51HqbrAbrPG8VP7zE7M8kTwxA+hFnGqc1gH6Ln26AO8LSiW7qQ2NdjiWnnDlvnie4eRLd28Uzg2cgN1L9YI4UJlAfTGDtVA9QQL4vkVi8BCUxPYVRVWFWyB60vuK9OAl4CMp4RTG1XLmDdGSqZTv8roIi+Uxkq1c4qacSvkOJxEWW7GRTRdyFzVbmE+Hdab1VE2WtA8ouyQg5SMSthHqQdYEfnTgQjm3kmkH83isJklitnxMAqW2LiExteO0kNUnpA6ZdYeieRPsxIH6ilT3XSFwtLotwSLVhXB2hjUJctxl4/siI8u87u88bnYh5zX6d5YhhGLpTDbGlplPzsdaTfNDFIqbed5p9C6o27CSl168OAlLt55OVyu22/WXFK6gamSSl1C7g+5Dejif4QMxrLENxUYghwe9SNDHn1GeIPV+dzOE/7NGAAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAV8SURBVHgB7d3PbxRlHMfxzwwrLaTENUpiS8RFPRg9uIkevBhrolfBv4DyH0BMuVKujcRePUGvXlyiNy6YcPBi7EGNB5RFKyGRH2so0ELb9fnOdG273e3OzM73Ut6vZGHY7mny5plnnpmdRurlxumqDoyc1Hp7UlFUV7tdE9ARRc3QxIIiNTQ+O9/zIzve+fPzE6rsuxi2qgIGa4aKZroDi7d9ZHF6LkT1jYgK2dXU1iX9PT2z9c3NEct+EEXnBBQ3p4nZM7aRhrU4PaU4uihgWKtrn+nohUYa1q2zN2RDGjCsdrulJ0+P7UtGqyiaElCGKBpVJb4dh0PgcQGliibjMMuqCyhXPQ6nijUB5arFAhwQFlwQFlwQFlwQFlwQFlwQFlwQFlwQFlwQFlwQFlwQFlwQFlwQFlwQFlwQFlwQFlwQFlwQFlwQFlwQFlxUBOn2g7Anwv+xsRFplF1SBvai+e3O5nZ1VHr5UHiNCcURVrfWcvpq3pdqLxBYQcyx+lleDSPZP9IPf6XbyIWwBrGoLC4bwZAZYZlKht3QbBFXDoRlKhl3g8V1/Z4wGGGZSo7dsPgvI1cGhGXG9uf6eDJy3V4S+iMsU2RR9PpdzhZ3QVgm74hlVtfT5Qj0RFimekCFdBZTsQNhmeQ6YYFRyzBq9URYHS8dVCE2z2IivwNhdRQ9HBq7OwLbEFaH3dVgryKYa+1AWFsNcyfDnYfCJsLayu7DKnqjH/OsbQir25uHVYita3E4/B9hdRtmrrW0IqQIqxcbtSoFds2dR0KKsHqxedYbLyq3pSdCirD6sTNEu+c9D5tncWE6QVi7qVXzL0EwaiUIaxCbb+UZuZafCoSVjY1cWeNixEoQVlYWV3188AKqzbNAWLnY+pbFtdu8i7AShJWXjVg273r/ld6BcVaYIKyiugPrHCIZsRI8u2FYncCMXSvksk6CsMo0zHXGPYZDIVwQFlwQFlwQFlwQFlwQFlwQFlwQFlywQLphcv9r+jC8htFcu6/5xz8KhJWYOfSJzo19rDJMjryuU62v9azjUBgcH31bZTkx8pZAWIl6ZVxlqcZDPFxkDyEsuCAsuCAsuCAsuCAspetPKBdhBZcesahZNhZIg/NLV3Rz7Z7eCcsO/ZYL7P0TJa537XWEteFShksxPx0+Xeqa117GoTCH1vpjIRvCyoFV9ewIK4dqxFe7siIsuCAsuCAsuCAsuCAsuCAsuCAsuCAsuCAsuCAsuCAsuCAsuCAsuCAsuCAsuCAsuCCsHGr7Bv8GMG5fThFWRpMZn53FdxRThJXRyYPvZfpcc/WeQFiZTB14N3llcfXJHwJhDWSHwC+f/zTz5y+v/CrwhdW+7Bs5p8c+yPUIyYWnt5hjbSAspRHZHKr+XPot53plImxPKK+5h9eEFGEFdqjLOofqhycmb8ccSxo6KjPz4IqwibBKMLd0jdGqC2ENyQ6B9hgkbEdYQ7CoPrr7lVrtZWE7wirIlhYsKpYXeuOssACbU5158K3QH2EFdijL8oiiqyu/h6C+S0Yr7I6wgsvLv+hknyWH5up9NZZ/ViNcqvme64CZRbp1ti0ka1mvbtxvZSOYzZ1sZLrJHKoQwoILzgrhgrDggrDggrDggrDggrDggrDggrDggrDggrDggrDggrDggrDggrDggrDggrDggrDggrDggrDggrDggrDgIlakpoByLcRqa0FAuZqx4uiqgDJFasR6vDIfNlsCytHU+Ox8rGNzrXA4PCWgDJFm7K/0rPDIbCP8OSdgGO31GRutbHNzuWFi9kzyA6CI9TAwHfnifOef0Y4PLE5PhQn9ubBVEzBYS6trp3T0QmPrm1Hfj6eBHVcaWF3ApmZ4LSQrCnbyZ/P0Lv8Bn/lIiPox+Y4AAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAABHNCSVQICAgIfAhkiAAABd1JREFUWEfNmAtMU1cYx89tRShtEXlsUq4C01lAnVN8DJgIODedMQoOt8zFzLllY8FtIWQ+qjwERQeaDLMwDUOXPXyggA43BVpAsegEIcRaHtqyWcpjCrcPRGnp3bkNBSq9j7IqOwlpuPf7vv/vvL7znYuAcbYkf3TpvGleq1fzWNMBzo6DYXjwDxkKh8PffgDws5JufVudDpNktXVWjUfKEpCRb6QHB/3Kb0ZCuKdbPI4DN0ZOI0b91zBd7qG7Hd9VazQKpr6MAEMEwHW3jzAn3N1tK9PAVHbSXt2Jg91Nn9eoiFGmbrSAJVHhsUtZAyfhnE2mC2bPexjvcbayY0OWQvU7lR8lYHFIYEGYO/8de4Ttta3u0ebF1jd/QuZHBohgsYEVAxr+cnsF7bWHALp1da0RUgxrsOVrExDCVT4nOM3a2pbo6xrNLcYjWLhAWPC6h5vd0wp7aiDWFfwlUowL3ZolRg7CRVLBEdBWI/jHTJ+YEH+00I5pupStaL/4p1L9fSUAxqf9kgIEW7+Y4bvGZRKIsXqHAG3szZZomG7q6LSGAUNRlHNB6IPR9ZwIyMKBNL2lI/FbleoGnQDxfseUKSFJi2cfMeEgFA6Jdl1ta2QNhtUz8R0GhDv2GNyxpLvJEuxarz4/5pZ8XPmwaKHw1KF7nVlMRs6iZwaMng98SxI8VPozLwFgIs88NT3aPevqmzOY9NxRNmYa8WFWZsQr7B2mHmegv+AHBjtcx8SX9mqL199qtl5LjqKgiGMGNIqdMHi2TrHY6c8FAEPL8L/ETlJ7i2/6PgeeMRKIaLPTktTNYMxiH7gzFfSd9zM7fKNs35StUP86IYDi46zUiOnsFFviRhUXPCry7/U83+AxEXCEJjJQxv4BQVgfkQFclQ1mRn9p2sUUMHqfvpKpLaUdgjyR7OK+hRjLnTQw95HWduknTB/s/XnwF6aiEJA4Sf57QxAAARHEUO5kIkaSLOKaRAOvtBH0MVV0GCAUlFWl8ghAyh47vWGgrRlHwzsSsEWcif6vARVlGQG0Uxy73cD9rQ48mogpvndlvwACTtLCJcgnA0j/CW6SHydgk0CgpsJsLvKkjJ3PQlhbyACrGwcPRCWadj73EbTsYqpE3WjwACLd4t5LG0scnqhnRu6Y5bdydytFx3skIp4n6VF3+QkKUnULzf7qc02b1AUyhx518+JL07zRsGQyQBywj1aIOJ+NKRaIB9u1S0DVwLRRvri69r1ChxYLMB3dhwIoGaCyYv/XyvL9WWbAMlhuRcJy6+9BHkiBo9ZkdB/jp5N1FzenX3VIuRUWX7bNBQ3NoVrXtbkrPbWqmh4zYPgCIDi4T9CeqH0NmMgPFaCVPUhpSa/ay3TD2LLzmLU89NUtF6VUMRAcVIp386IIm+FTYnby8mNuwV60Jb9O/k9+c9qVcZX8Uz/cs2zBy9vLoK4zFWBb+b4NiopM8+Vt5BiDl6aQ7KUYfED/iQM31dwvbkrsOi2/znA02cLUsLQX3Q6LJvXPpXFBGiUi7nyLkdU5KzgStF7gHVzEUJS4AF/uOCcvUSvuHAV1wPC0n2/cnGhekNcqfrDXNvjOhXg/GVsDXB5uJJX4S3xgxT1JhsQmIPFQmBJxmh/kTR6BnN4I56Mf4HAFIbgzpCedRnZ/EOB2JMIrvvVk9SqvnqzPW/3+aAmblUpg/uZKnmvfM/0ugxinAteuBMB+PMvMg7BwqXgnP/zp/pN+PIKQFc8akoDhdH0KnPrCGhvyVyzruXsD1gXWjbLWEyZHnOEHexOfd59dw03Vdw/Wr8Ua2jBbIrTFqE/SqhjfRdxTxPp2NKVO/iCvOa2KMrXRApqhQlGO8M2ZOfwgr48dAskC0s4zMpHqbFMlXTxmgENROLM9ff3enZPAm/tCPMDxkZs9nYp5FwCg93pwSpv78Lj67O1SJi5DbkxNre3QuOAlpgD/t30WcVDEBIh1ShS9lg4T9xwjzDglj+TdMu3th63tSvlJW7mSTv1fyzwp37vv5lcAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAABHNCSVQICAgIfAhkiAAABxRJREFUWEe9mAlMFFcYx/8LCIsHCAuoeAAxGrm969VWYxUxWIka78QjaivWerXaIia12ljrEW1rQdFEoGprvao2itVC64UXeKIucrOAcl97z0zfzMDsrnuv6JfAzLz3ve/77fve+943I0KrhLj3em9T4IwFFKNeQpqc29rf1bWBUeApXUG5wvng8bKslDJFzS3Wt4j9Fx8wdUmIe8/kdwUDps2zzuN9qhRKaISGckXt0lNltw+KZkiGjY/1HXbZYTjibPKZeIhcnDgT5ZmPkbPrjKE50kXNaAIzRgEmgECw00KTi9QVTjfFqDrNoJCqNkK4VVvwkSgtOO6yiMF4RwH9PwzFuKQ4YfjN+DQUnM4SnplQFbRf1wIehMiEMAwD6e1CyNMkoAvFBhoMLboi+nVAHDvhDsvwb+ag36wx/Hji7EjIZzq4CAK31Xhm9J1VVVWhpqaGa1Lu6wGqwBDyjQBFTiLMffKz4C/30N/I2cmHl/GioE2tJDfmf7tGo0F+fr7uB6lEkG/uA6j45cLKGwH2nT4SI7bOF4xdnPkDah4Vc8/UyjrQE+QWIyOTydDU1GSgo/nXE+qz3u0DOO7ACvi/H8IZaymvxZnxm1pDDWjOylpzhGlGuVyOkpIS405KhJb1gW8O6OzWAbPv7xEM5ez+E7nJl7hnOlIFaovltVdcXAyFQmGSXr4pAIycD7PJEIevmCwMrLiWi+oHRUaGQpdNxMA1U4X2P0Z8CXUDH1I6ugXU8nqz4WXDyobXnCj3dwcldTcPOHrHIgTGDOUUnh7+B9nbTxrZijmfAM++Pbj28qu5yFi2T9Chx8tBraozC5CXlweKosz2K/b4gy51Mw/Yc2wYxiYu5xQ0zUocH7qWzDV36HDSyd8bsVe2CM9ZG9OQf0ov93nS0KZVmARgUwqbWiwJtwbJWmTF9C4m+Wz69e0QS7pwSulzdqL6fqFgM3L1xwj7JEp45nIfGaMvmhQC6GWYnGmahlQqtQhHy1yh2N1T0DGbZsKXRyPi8xhO8XHSRTzYe04YNP3qNoh9PLjnZ6kZuLfthJFTOoqswxWG67CiogINDQ0WAZUpfqAedrIOyAKwIKyo6ppxYtQG7t5vWD9MSF0tGEifTWb3gW529b1rv68CE6LmbahUKCw0rdc2hnrmDmVyd4MfYDFR6+e58zFb0JBficHrpyF4EX90K2uacHLMV+ZnxI2BdnM1B8nmPDb3mRPqhRjKRH7T6YtFwIDJQzBm12JOnw3xo8QLmPv4Jzi58OXi/T1n8WR/unlAtocszdqZlZANfWI6cZNlqv7LG5oMT5P9Vo+6OQ/3wqmDC5plNXiw5xxG71goALFhZ8NvTXKoEnK8auAyrBmirlpenYAzNR2gze5s8by2CjhoXSxClkzgbLL5ru1oe3lLissL91pjQzldjxKGlFsOilXAzr19MPXSZiPzWQlHkH/yhkF7t/518O3P79wGWWcU5UhwlyqyVNBYxbYKyFqIOvYFfAYG6YyRnHc0bCUYms99Ht3lGLkoF5KgRgOHL6WNOHqkFwrLdNWJVaLXFGwCDCM5MbI1J7Ljpcf+w51vf+dMdRBrMWVrFsQefDppE5qkFWVrWvkxdRTKX/J5016xCTB0KSkM1uoKg0vzdqMqmy80h86Rov+4MiO/qtJSUC0tXHvuCz+knh5sLxunbxOg/qkir6zD6XEJgrNZv2TC2cXwSKNIvlO9Vutt2DGJf4W0U6wDkvU2jZwo7r4kTxHJ3n6KVDhXuHv2+J2XzN4bumZDy4ZYX7YljUVDk+H7hi2sVgEjV01B2KeTOFvK6kac/CBeVxgQwLkHCSCjA9TW10NdSd5FXpP4XVGgafvn0Cygd0hvhJC1FzBJt3Yy45Igy3hk4HrU4icIHPFSaJM/f25U2VS86oK9KaNtmTAjHZOADCmL5j9PNFAuvpiNa2sOGRnw6t2E6IQ7XJQ1r15BU2uclA/8NhwFpY6lGpsA9dOKqWnwIwl67Iq7UBfnGXSzAU0hu5fdxY6KGUAGI76bB0VVI4rO3UFjoS6E5hwVOMsQQQoCN1ctnJwYKNUuuH4vAHKFq6Ns3Dirm8QW661fpmxRtVunXQAf0zI0M4ZpxW4SMwMcAhQ7U+jr2QhZcyfkqdTIp1+1F49tu9iSt3BJHSIkup16L68ch7W6l5z2JrVrBr3dVIgO0J27iupqsH/pjB9uQNLebPZvknAycxFkBllhyIt3HXkBZyWL8cYFdHtLgMFxuaSiDLbF+gCvegzx5b/lNZNPF+rWL1OZjA8y4GuLCbt1ROt8Zy4YJPE5bOvIqUHFEFPNaCwqEoYkMUGogP2FgC0+udN7Y5/Y9OCO/hNtGeBGdnBXl4cIUFSjDO64zXhx17clQnmR0Cd21YCO/uwHF/57hxmpZVogpa2fLO0F/D8lCxX6zDNbswAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAdCAYAAADGgB7AAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAa8SURBVHgB7Vd9bBzFFX+zH3frtc857Pg7ts/2+iMhkERNanJ26nOpEaEEgopLSqJSqFRQnRSoJSioUdOmtBRVfBkCSEQgAgJiEj4SZAQIG0c+JyTEYIwT42+Hu8N38dln+865vdsZ3jo+OEFC9iSQ+IOftJrZt+/N782bmfd2AH6kIEYVNz1TYVtRUN1UnLbU3uNxdpz0dW1tvmlo7Lts2A7gqPLbR8FWfQMJ+QfV3v03SXd09xnh48Ag0lMzHlmRu+5qq5ydtrZowwZZTNl9IRtqXbkTCqsaiJy2GBYrlaK1+FX2+LIUMADDEdv8fFm/NSlT4QgPFDSYDHmh4KLyoCSmRALB8YMjX4w27g9bJVpS8x/IqKgDX5/MBt8DSLooBXgTjsAAQn6IRrVS6a/HBy7EJ4BxfDI551XiBWOTfcl6a+LNW5bLpmlauvEqsOTY4NgzwNTgWSV0JgZC2EnzdGTMCJlhxzTedDunRdARdsWCSMUg7CEcqcgMR6a2W3+1ARjNZx88DSxypg2XwovrsVH3e0G/I0rhVvOOXtUIn+Gl1LH5+YpLGNBuSUiGCA3ft+fG3r+zplW5EWtxO5+UVsJcXaCOqx2BQ6E/5Rwa6I0+tOpRnMg23TYa4RXprg8HjXIlspRAGFMZTqUsYxXMaUGVNZlzKZ/SykXmStjpoxCdoAen9oWXg2xpHVWUWgLMz75iYgkFwfCp1CGHUk4hkWtoohtW5vyi8ahs+jeLzJVBwK1voMf8e898xhizcRZLpqQob2p+uu6sJTtlnj4+lAhXQrPQgafzBnTupfTkHLgku5oq3QdfrQmRQf7Oj+7Wv3vKy3dTxm4xr1kDIIojKQVdw8Ii7nGhsWtfIjwJRUzHm8f+ecR1etVrE0EPdLlbuUO2i6+7OS38Tuy7cvnO5kE540j46FEQ8vNtwamaPN8TM+2QIHhIEOKaTQfck8sckjjbYzb3Z82GJzmzKen68o1y/0juk4pZ5Pc+l/9zvs7b27Go64PSpCuvTBeKi1fe396+JxGehCImNewrxKYa19/UPXLtIBrvOKPNsVk1II96K7eWZaW+KAqcTIAUXGvfthv19s3s2gVcdnadb+nSnES4EnJM4Ikl1meUvfvCls/+hb3tnonawznSbatnwlE5GI5qQMkfZpvq9+Ne6wBKIdzZCbOatigBKuOOLb5lt8Ui8X80C2dNCAd3Wf68t/rjgYcnVufeeqk7MCd7AnPa74ed7SfeultyKcoVmF4adF1teBhMstzoLioqNMpn+FSW3PvG///yy/JGkSfw37dOwFRIhZxUCWrKM6HHHYAeV0DbPHb4o+0nDpSieupXhhwHqQ0NQFJTIfjyy07fyEjt8t4LZ3/DjqXf8Up/9qIkBfMVjAfOgL5iccNMUQ629bXcy2GUHkCdrHhbPi9vvqWnT4MWCpXmDw5+f0Vc1ZhnzB+KK+Ksj2hkJ3CECER+w//IVdNLUOpRlJYowDrC86mgab8mhFyvuVwxIy+YzX4jfIYdowJr4KPkACZXfZ+Mhnl6ndq06cQ39XIGBnzY7Nf7vvLytyMAFVgNlgNjXsJx/8jv7TXkWMJIvv31rGX1e02J2LjKyhYP22wS/IQfEN8qSXa7Y0tmps3t8YyE4HtE1VrH3zKz0o94PB56ru9r1zoaivJKgnkFhdcoim34XAl2tSiCoQtDImAMVkxMWM5bm9GRNVEasQqEpKt+k+m8p9Jur7mZMHIpI0zFI2/CyvJ+Z2fba1WVNXWMh6sJ44KY0pCIjoYj7IBJ4J7D1PEppXQaSWYIz1nxNGJVYllE5f7H8D88Gg2TqirHbSjDJEwiOD4eIjqJITypc0aBG+p0tjr1/jkdw2S9GYlNHZ2tdy6I9AEfRGczGONqnc7WG7+egKNRFLl7MCSTHR2tW8/KancxSl5BvffWr19vngnMPcuQPT9f+h1esNKch9saY+NWV9U8yzTi+2aqP0+tZLkUWFe8AFU/xdYGhB6L18Sbz3F8svHHORCnPs1xdH4vtbS0hNlChcEJLwFe64kflwHpnO8Q+CJ+XKG+vp53uXz3zH+bDy37GQPzbwiEH8aZl+G7lzC4mDCqiSFyf1QmD2Dk7kOufrRZgpFdoTH2FDq3CS4IFa9QIto7luLLOKdPlJE65ND/1WaSk79ewfmZOBwOXbAE90eS2508NDDQEtbldrs9kzEhixBp3Ol82xszqqq6xsJxwSKe1/xtbW2fL4xhxf5UrK+3sffLLnPYJAmmYu+VlZdjLVWzRJGdEgRh/r4SCvF8YWHaVHNz83wR/hI9hMDn4l0OjQAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAkCAYAAAAOwvOmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVDSURBVHgB7Vd9bBRFFH9vdq+9jx7d+yilWGNLEyxWA0Y0ESWi/EGIESWKRkNCIyrYKCIRpKlAIVyFBAEhRP8AFBODmigQ8QM0IVH/IaFBsVQqEg9FSjjuo+Wud+3uzvPtXQuHCt5dTxNjf5e92X3z5s1vfjtvZhZgBCP4HwChCKD9yz1JU6zSSRwsf2jtpzBMDJcU9u1rWaqiaEaQGiD/I74tdX21Y/a6IBSIgkkl97ROI6FvFEK5FYlYLjiBQtaTVSmpx0Da6Jr16hooAHmTiu5p1UoUY50AWiBYGf7FpEFrf9LVrWMF1NtV/SNFgbo0OYJgz4CysPKRNQfy6SNnUh0fzCkZ56h/TpGwggRoQBIMgt0uaWvC2a2xbN/Exy0LbQgvc/gaYj9AJa9XKiBHXNd5dAqe+fY1oJSGJI+RoPvKHgw8kU2oY1trmVW6Hgi8aVPK7tUlvGWNm3q7G82uL1bl2peas6NhgPz1GBjnTx0to0cnY2urtOzJT1aukgOm3zU78HzdWGNy377mJpS0DGc2B7n6yWjgtuNqIrxBosy1q9yVspCeJ/2JhEXoxPq73In3F30vpGwVCmlDPgqqc1idU73bH5+XNsTD+mDLnJGzUn9CEtzGd/tvhuoGUKsaLtt7zoL5c7vAVKwWCkThpBg8t8A80wF09oe0FPHDe8GBF9PZQ5SfOtnI6/VdDdLU06UKRlG2iKKQKlyTv0ZRSF0TmL94/wIp8c+ROq/7jhKIrZRnF1YHBHi431b6eq5tcs6+uvXtPVwsii6u0SAf9NnfGbWpc3M+TfJ+fZ7Nwcy24oCLAinImwgQ4i3hltuvF0Lew2paz2wVQcutfFNnBPLEsDI4GJhQ5UkMtKnCbJQSY4JAM1G08wa8eFTgx29guPD7/W7ryrZVV1c7nE7n2L9rG3vphtr4K3VH4i3jFkMxUeHxtPF1xeh8mq/R5/EkoEjHZgtjvN4Gb7l3/rV8Ls0pItGAKGr9mjbtUiXSCwJF1O90VlnPbrfbN9rlqswOoGlajVUOqawNYrDaGgxadUM2Q4gKVGDqYN0f/e3W/SUFKjy+Q1x8KEHeFI5Gm6p8vnqDaA2ns9eQ5lM2m20WmDTDCsY+7baSki2Gru9Ek86xz0QUcFoifM0Bp7PNwav8Z4jUxWf2JWzTkaBeN+SLqk0s5xA38iGxDYUoZTWmcmaUmUQHdFN/z263n81Sipyucvd2Vmu6x+MpHyBYZhrGTk6jc0KIMaFQaIsujSYOuIvd56YSqTulaXaFYpGnmVAnSdzGQRYYprmZQLbxerYyozb2XIhEZhpALYpNTAMhlnO+7rW7XDuY7PxQJDIjFA3fzUtsY2lpaTf3E7+8JCBUBoPBFN/sVgBmclbXRnp7P+dSV4i8rGRAFep6IiPTRoGv+KNhqt/rXc1P41EO/MYVlXxN5I4ncTvLDqakcDo84kD2a08mk5VS0pkhTZj9acMwvFfMKd6ijHQQMnfy1vCGJDqU8cZfpBCjCWmuIY2FrEa3ZY8xuE0Jd6abBi0J9fae5LNlFxM6zNcOKaUCVwESauFw+CRlplQNz7nxJKmCQ57OjHcQDqejgtkfSqVSPU6Hy2GTtl3xVDzmdDkRTV6DBBxht2aeB/0se5fTbnfzSC4CiVOg0GPOUvs8G5U+w58TS9nvYf4APE4CO5iAnkwlj7lKrEDYVxa58KXuck5x2l0TVKmuIDQ38ECnCFN9tq+/L5IRqEDwUhHgwsPqvKugcgfPyUnhaHgeFAHDWn/8Hs/9xCnOhLojkchBKP7RagT/PfwOWQ4p00R+2scAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAgCAYAAACVU7GwAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAQ2SURBVHgB7ZZrTFxFFMfPmZl7WbqAbCBFAwSphQopSC0KKOCSGo1RE020fvERq4mPmGo0JvaDBlK1WrWxiYk1xhgxjV8aqZo0NltYHouPAC1tY4qPpMSmsoVll0d5LPfeOZ7dsnwgtgGMdE34JffemZN5nJk5878HYI01rgJePylYRcRSGg3CoCo8Grwfko2ijsmSYl+ouagtVAX/Mbicxps6xgppbu6YEIYDqM8i4EnUzgVE+AtRTmjSM0JbWiA5BNKO9ZFK2soQMy4tzgfqMiNLmWdZTiW40R/xAtFdfPb1QLoMpcxAIBDsXWxEMT9wrCrnvzHYfo4A9v1c6/nwSuOvKIAHGjzt/GlP1MuPBt22MLOU4nldl2w8OaTwY9lOjiJRSYhvsqf5vLNZkCxUBSL+qq5wMyQLt3SFXqsKjO2BZGFLe+ixykDoBUgWyv2j1Te3jiSXvpX6h9NgNSnxhx4o6xrbsNhe2hbaVtYRqYd/wZJ+M4sp8o0+KUC0GESnWA7WJ+zFvnAtq9UxA6Gj+sfxFSv/ipxCimsiiyLpdHf6gtZpoLiKU1ylxASsNptZ1Wt+mM5dbC87MnRHRXekAta4AiWdI9dt9AWrt/aGr1lOv+v9Z12bO8OPJuoriqnL8Uhd9gUThQHTzrrl9DMwow41fFnmC8Zvc/z/Xdw69rSS+gMTMUMJ0TRp4VearA4DadaUskBK2N1X63ljU2v4WSVpr0JMNxQ2jl+0/FKpZslLMyUW8K1rGpmIfJ66LvOgIfB2U8Kg2525JTg62qSk2CkEDLgE5kSi9LgEOpBqCkeAc2LSkjUpktZz+yFzdupudcPh8/lAzqeC8BMh8E++Q2+xczNzhDns8n4EJyRA7q7whfqmAT4m29kPisZBm40uiTQHUMA51jZYZz6FiE8oI/1aAswlrR8mog1Dw6F7QcmdvPpdUokiTnl2SNSFiCJXcxqjXK730I4+z/vzOjj6nZTuP84ITHPl8WCgndmDx+sz3+bONidpOfGznbD3qNnoF7EyGXBbfK+VvIfQeJBLp0HMqwGl9gug4/GykHlE+tdTDVmHer3ZezkbzGfr1Gmv511lO58ljowdnjtZ73ml59a0oAD86ZLNONLe2GArW4ozQlMIZMqumwIRXh0oW+tzsZPVaeqjqDKGTcCL7Owhfp4DjT0onE5AdZ8GezKWxtnWRCrZrjQweHiiXn6/WN428qqpRMnULH3HO+Iu9Yfft5TYaia84iO4XIyJwQbPGFrR7UDo5iS2XDv6maijT8T7IXKYYKXWzsv93uwesGg7C2YBoNzB+vi7RWY3av31b315Q6jM79n2rbZgH6+5BaV6iCemFEP6BdFLHBo1nOj1gqZvhJYBbnt4wQvCX3h3WzTo0EKgL2ajb8QrhfQjqeyBOzNGYZX5R0mwlernIDtwNRxa43/P39TkpzYCt+ILAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAoCAYAAABjPNNTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFISURBVHgB7ZUxioNAFIZ/d23SBJJ0yRlSJm1yhNQp0yZ3WBdbT2BhI+gVtFxbQQs9gpZqp6W782CXsJBF4S1EeB8MzviP+DmDb7S+7w0Ab3he3l8wAUSSC5HkYhKS+l9hVVXU7lmtVtT+I3uEbDcXIsmFJmc3E1KCuBBJLqQEMSElaHT2CPlxuBBJLqQEcSGSXEz/xPlN13VwHIdODHVCXC4XzGazn7yuawRBgPP5DE5eDcM4fl2PQyanaUqit9sNZVlS830fh8MBpmnSnDiOoes6XNdFFEV0T/XzPMdms4Ft20iShPrz+XzIaz9GbbcS1DSN+t/X+2y/32O9XpO04nq90oecTifsdjtkWUa5elbNH8ooSSXRti2tWlEUNF4ul7AsC4vFgra+aRp4nkdjlSlhtaJhGGK73VKuBMdISjHnQiS5mITkJ/NDwV1chtdxAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAjCAYAAAD8BaggAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAdKSURBVHgBvVh7UFTXGf+du8sCu4u7LKggiyISQFFbTKO11iaBzMRXcVQQ9Y9ObZs20+mYmk5qTTO4mnTaTDvt1NpOJ01G09rQCk0jJdFojUmI4yNGozGA4SERUFhAFhb2fe/Nd86yG2ABwUB+M2fP67vn/O73OucuwwBUVY1jjDkxCmjeQvN3Qn3bQwdjtJYZM70sYIEKvRhkcGl0rNlWWtCJewQb2CyLqmeplNCmtaMQuu/Xm485PKq8jggUg6mLJYZEVWVRQwXholXrFagXNJD/aSvf8E7wcXUF1WdpfeWuhAY2XEzCV0cS+sXGynSTQfOExy3/mCS1mAhU1CpM2fv0wTVZMUZtNI28RPs04G6ERl5LZXs2Ve5gDM9R14gvgIRZRufytRk7H3g09aWx5EYkRNpatHPDa81mrfYVFViNyYObXnLXvvKCP40mICGSzINdrX1/TTREV08yGY5YBrb/tz84+Rztk01lNpWYwQIRGrIVnTZqo1zv+31KNqYQROTJff8p+APVPELNVHjtinBQRXG+6PexKSUjwPB8SWFFIzn4UU4kNDzEZCWFR4tIoBhfAsh0UVT+suuRIybeJ02tpWLWcgcmEh/9vui4pUf1/y70gMEUDaNZxx/EZCIgK+hq7ecEeHeWzhTzBLV5utlF5T1GHb6j6cDOd3Z3tjh/zqUeeDQNa76fAyKKqUC33YVDe86ip9PNu45ofWzG7pfzt1L7oESbqlQcnS29hXxWH6fD6u056O3ywGF3jbnwmYoGnCqtxUQRP0OPvOLMUNfscbseJw4HqPQLp7YV/u8hUmA6b1uSDJA0DKW/eR8elx87DuRBkiI15en343TpdejJrPlbswX5iydvwu+RkZtvRVKaKSz78dnbqL9sx4zUOCxamUKuEI3ElLjwvARpG1mqippVgpDM5G9JqkZMhqwUbYhCV1s/XL0+sQBH5d+uooPsv922HDXn2xAIKFiSNxuODjcO2c5RHdTo+eM3sH3fcsyZn4ALbzbhjRevDSH3nT3LhrwckVlwuaqtM3dlklVEmaRoFg/XgCVJD79XRr/DK/odLX24eOImmmvv0HgA9Vc6xHj6ouk49UqtILNyYwZWfy8nSOqNJmH2U4drRYBs270U85cloaWuG41XIi8DLdc686m6FQx7htzhAklzpom6qSZ44zh5uFrUiqwKMndu9yFGH0Wq16Pmwm3MSp+GvC1ZWLoqDdooCe2f9qLhow54PQE8WJSJzCUzkLN8lljjVmNPBKFLb92QyYdkKciHWYYLhGxsb3ai7pIdn3xgFw7PcbOmG93tLliSDXA7/Qj4FDJPoohKVeEmAHQxWrRc7xbyqfeZQ6YRdUxs5IVBhio4CEJ04OmGC6TlWKDRMiLUG46kjTtyEUO+df7YDXjdAcSRb7EBh3c6PKK+WtUKmXwrNSseGk3QAH093vAch5XmhkMTPDrCmdoXIaCVRFQ013ajrakXKRkmZHx1ulA7Nxt/2XjyM1NirHD66xfbhS+d+Hu10FRuXirm5CSItU7/+xO8uv+y0DQnOjvbEqkhxsQbSaRGIvX51XQw5uQkhtuPbJsv6m+uTxea44g16gTxVdsXkqlUVP23XqSK/G3ZSJ5rIvLJWPD1ZNxqcAjtGEw6bNqRixGhopdXWn6ltBVW1KhgIg9xJwxhIS14rrIRCyg65i4KkounPJW3JZucvCbsEwu/kSycmkdiYooBCcmf3+U2/+x+NH3cBZmOjJR5ZmFyoRF56E2W8nOdIBQkp16mobW8bb/pRGcrX9gIa2Y8ip5cgqz7Zw55eMX6eTBNj4U1wxwe4wmVl5GQNmC6wbh25taQvuSfdkYQ4z/PbDi6ihzwWGjSTJstXTUXyfTW4znPOPlQ8vT7ZLTWOUaV9ZEF6j/swIXjTeEx0nQD3Y0yeFtoSNs97f9KQl8z7Z3K+zzznvhHNSaCZavTSHMZgthrB67A0eka/8OMhe/Z4rx4u+llZWXOFqME9jDuEa31Dlx5t0WE+nSrEU3VXeN6jjJXD/nPT9+u/pcIrHCG8jPvfq0S+5g6oKV7AT/33qSwDyXQcUFlh2zlBfWhLg/7TbzxfNlmyufMhkmAy+kbr6jdLbn3DB7gidEwcNGmnuswfZG+iy8Bqjhh2E+CihhKiH/TCw+0lW326TXqVoqrRkw1JHX3vvJ1ZcOHQ9/2jN8cQ4O/2np0pi+gOUcTaZgKMPWFvWUFPxppKnSWrSBS6aHBX5aub/f6/Q9TGriESQSZiE5ZtnNv2bcfH01mzKxnKzpiVNTopxk0T034T4YIMup1LaTHSsrXVY0qw/8SwjjwTPGr8yVZ+xSF6HfZBL+LyA9aNar0R9Ur/9lWWTBmthw3oRCeLaqYK0NTrKhKIT34FQzKY8OW7qNvmdeZJL1ecmTN4cH+eRdCUff84fXDdRV6a6xmnsGsy6RvUGuv3dNOtzW7X+Or66iztr3wwdf8Y27MmH/YGL+1mT4DU8bvXImBlTAAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAjCAYAAAD8BaggAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAATBSURBVHgBrVhJUuNKEC2LIYDN9z/BV3OB7z4B6g3TBvUJMCcwnABzAtsnwL36WxNBMKza3v2lOQDR5gbuBWMw9HtFSlFOUm67ISPkkkpZmS+Hyiy55N5J6+vrcfh8dnY2cO+gkpuSACAplUopblcwViyel5eXPoYexg4Adt0UNBGgJEnKCwsLtSiKdvFYFmV9AKLi/vz8/JB8j4+PMd8/PT0lAnYFfANcBwDWnkTXbwGtrq6ms7Ozh1BAy1s3NzfNbrc7dBMQwylGbGGtmwRYISDxSgMCqwRye3tbnxSIBQwG1XFtQ1bz9PR0z00DiGAWFxe/AwwFfT0+Pu66DyDmH2QeAtQQBn6xDIyKwAAIc+HzR4GhXPeaU475RR0yNx4QGJsE8/z8/OW9W1jLhXcYtpjPBLW0tNTQfDPhA1xaxaJ9XF9PTk767oMoTVMa+J/xqrK8vPzz8vLy/2yiFIBhvvhQSR0h0aVlzmHsAOQOhT88PPxgHmAuu5zmR7gPzs/Pm5lsGPnD2TTEzv2U5VMeMgipiTspMJGLtYTguCta5Ot0OkMI38HVkqRPLH7cdzLZDD0M6FpoWE4Qut3seTZ4l4owXX2v4Jl2OIFE98o2NzdjDDWl4ELzk1iDCNqYp6E1JLivb95DzB16B3HeMyzYdgUE/o4xXbN42UIsL6HKM6xljAmfI1HKh17BojLrxxRKCvnBu6OmhkwBykA32MoBudf64K1FXhxpQZgr9BKM6RlzqbMN0Ll0EehM/D13DcM1MzPjd9bc3Fwbz7qCplYRI4nLNaBCA0KDs92M0A8wxNQRYQvHnLy/v/cgxIXaavY186iRuVzzF4VNlHuCEzohMOgoR2Aoy8thsKhpWFZoNehKTxSFTeoXaaDbEvIojqxFTNZpwgZaMQCZBsDwigA7st4T0IA3qKwjyqQ+hGSGTU6QsRVmK2zwfgYojELMHxzwBhGUeE8gmStqYVcLg+J9Y65Ko6CgbryzwkZv9sPGLa3J78KISYn7KwgcAWTVGLYGI2wsGS0rzDpsmTedtKGAL3GvXSKvQ8z2f5UiqyaV0XdSrSCrYVaYw7CJNy3ve6/lgNgCiFLHnDVJLaTSbaWgl7kfct7wq7CthPxiVIyhAuO/5YAyd+utbdUYFTYqaGfvrK7OsJEfjbgi4Wqr93UXlIAosJzuruoPP3ZpN0o84lazcGn3W2GW3ek9FfLLGYxOyHXkgKQFDMBwGEqDsL5Rk7Z0uDKyWo94fgtgjtTuoq5BeFzJATE8WLAjubQfzsNL30IFsitGwqX4dU2id5gn+XGFOiiHh70R8OGDfPYe8DCOBXk+WeceK1wBv249PudwVO0ImG3qoC7dPt60DrivTo9gQXttbW03AHqllB4VfZUUtJ42T4QbGxu7lE0d1KXXmr0MX5ZVDC30nUYQvvbIwsD9Fhk1qQcwDQBtEIzoeENjv+2xVesY9vmHAQFSmLwawrq/x62Vr9TvAcCBFNE9gGkWrYvGCaVLEZpPEDwMwJDGeod0d3fXF0M8YT1D/nkcGM/nJiR4q4qBlz9qyKGKVl9kPJjj6fMvjFnPIvWYwJN+kv/JH1b86Etwm4rSfwjEC3tNZHrC/290fX3dnvYfk18sfsGYdGIt3QAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAUlSURBVHgB7Vh9TNRlHP+AJyhc+HKHx4EnCAEqimi+oYWG1lYqtEhtblSuWm1ltRxIMSatZq0XTVqEVmtzsuFkFrhAxEQwXkJeRJQXAYEDhXg93o97gb7Pc/Cr424WHUP+uM92+z2/zz2/5/n8vs/37c5mlIAZDFvMcFgFWgqrQEthFWgppkzg6OgIeobqMaRtx1RiSgSqtd3IrHgdycXBSCkNwbBOZfR9TWsHjqXnontgCJPFlAisaUuGsus3sKKkJnE6vUEIK1FHU7PhGxmHT1NzYC8SYbKY/BNmYC9aCBsbEZcU6HkEjvZyzudUNSD63GU+Xu7mDAf72ZgspkSgjywMns7P0GgWRLb2Al95r00Yr3GX4//ArEB2VBdKqzGk0WLfplUCf7agHLdo08ULnPBG8HqB14+MIrWkHqztCFvvx7nmrl78UdcszHGXzOfcIidHnC+6DdWAmtbYQJbH5ATqaZdDZ9Jw4lKBYcIsW75pZFIGvkzLxXjz09Y7gJjntkGj0+Hg6V9xKqsIbK+qz9+DQuIE34ivKXh0wroR9Pzhs5ewM8AHKSVVnHO0t0P44wH4zwL71MMIPZ6IrIp6gfu9uhHeMomROIbShvvo6Buk+WeQV9PEOfZtQ0cXWckBMaHbEPtLFoZJpHiOHaJ3bwV7gwNBa1Hd0oEq+vQPa/BvMIriwtpm+LhIsdFLIXDeLhL4yKVoj4+Cr1zy95uRZQtqlVi9xAUB//Avf4Uc8x3n4u2nN0Gr03NurbsrokKCELU7CLJ5YqxcLOO8p/MCTErg9pVeSDgQAql4rsD5yp0xZ7YIErED/4zDbeE87FqzDPGvhEDmJOacnWgWZPMN4/KmVoyMWVy+QGy0aVNnD78yYzR0qJB24w7udffBHEx8UENvnVuj5GPmUwFkIYYyZauR069b6sqvw+SDeWPzfcja4z7fquoX5q5wXWS0R2OXCtJHHBCXWYDvLhfyNcK3rMbpN1/ARJgk6oI6JVSDaj5mviOhhSoocvd8k8SjdRzMsgzZlY3cdxnWerjxK/PV77OLhLmKhU7CmAVhR+8g99/M8lrs32zIElr9CMzBROD1uvvCuE+t4cKCPvmRylWnwDPhAe4uvDq8dPKcwNe1deL63WYERMcjvaxG4K/dUfIUc6G0CttoLd3ICHeHtIhwBI75+9blHvza3NXzYIFDWq3RfXLhbXT2D+LJFZ4CJxU7YvWH3yKr8i4FkVTgc0nIhiMnuUXXeboJ/E85JVC8+wVCjiXy6GfYQ6lrCeXGm81/8nu1ho45IRlN9CIPFLjRa7HRPVsk6a292B/oL3BOc+3w0fPByIh8GTv8PI3msxe5FvMadvp7G/GzKepZirn12UFIKMoXzTMETr/aYJDYn69gBwVp4KMKo+dszP3svNHYwo/UlSqGr6sUJy7mIy4jH71kGXa8dV+9zysCg4o6lB+uFvNOJZjEbvfz4rxWr0dSfjlKyGIelE5CH1sGD6khrbDI7SU/96cAbFX1IYdybfCKpRQ4jhOlmBfIwOjj6Xn4OOUqBqnkacZyGqsqye+8iOmC2XarvW+AfCmBzJ6F2LDtWDWWWBkOPbsF0wmTPNg7RA4ekwBlpwqx5GctlECLxxx7s7fCxEemXWBiXhkXxxB7/orA21LbcerVUEw3TI6YdSnmcHTvU/Bzk2G6YWLBiY0lq8MfUJE/vOsJPAyYjeKLN2t4y8WayX2bVpJoVzws2Fj/frMQVoGWwirQUlgFWooZL/AvgpL/4etjwmMAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAoCAYAAABjPNNTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJPSURBVHgB7ZdNaxNBGMf/u93EHpo6It6kGaGeBKkevbjSetCTX0DaHAWh8ZaTrd+gHgRv1bMo/QCxzVkPplC9iYNvUBAbUigl2ez02WSXpmGT7Oxuppf9QZaZ2Vn453mbZ4CMjAxljGEvOF+yJbCD5DQMOLeEqAnExMTkYRLWJhJgRdy3RVbdhQIG5Co9mT+15/hS+aeobiAGkdztwi39EttvoECR3/8BSN635Ln9Grm9AUU0uFsGomK7XYNIo06Pmj95dJU8BEV0JA7FlPMsGE/B2OTcZirfaxFJcVin4H/Rm0nuwlpT+T5qdodyUOHcgsXD3t350GHNlgl2ocP2KvP2t/9/6s8/XUGz3bVL+enD27tPbjZFsN85duqXNkQjdZEkcMUwEGqVmZwLT+T1i+0F2rNz43Ib7x/87d9yJomsaeseTmP3DFrcnZRMZFpkItMiUnabMJfn+OLdwfXH1fZCsdAK/eawld7/j1qCbCOkF/nyL9/9TRqFOmmIwZXZvMNmcnLkEVfIu0jKUJFCVGtFvihIHPfmHcjSb1rr33NYmV8fVszTZGTgkItLwThOY5AWI0V61pSQb3uzbmNQxjlgjt/QKQeNK6XOKlmTQzNjRXrtPt1X/DYLzMXUxGNwkEjFTIht7wJV88YUpytxuuskRK64p02rl0TQas3IIv0keulPu1dUaELp7KIkWqckEt6YLLu2f5TTUpKURPaSCMGlir3+WliGBpS7ACE+bsFPonffZ9nn/WlMmlitCl1RS0HtfLV3LodQRkbGOE4ABwqrW9ia3CwAAAAASUVORK5CYII=\"","module.exports = __webpack_public_path__ + \"static/media/simple_br.9960f550.svg\";","module.exports = __webpack_public_path__ + \"static/media/simple_es.ac31abb1.svg\";","module.exports = __webpack_public_path__ + \"static/media/send.f18e7b40.svg\";","module.exports = __webpack_public_path__ + \"static/media/stop.a608eb97.svg\";","module.exports = __webpack_public_path__ + \"static/media/decoline-large.70b0d4e7.svg\";","module.exports = __webpack_public_path__ + \"static/media/envelope.7ec263f2.svg\";","module.exports = __webpack_public_path__ + \"static/media/Snappy_Mail.e51ca3e5.svg\";","module.exports = __webpack_public_path__ + \"static/media/linha_colorida.db599c82.svg\";","module.exports = __webpack_public_path__ + \"static/media/linha_colorida_mobile.c6930825.svg\";","module.exports = __webpack_public_path__ + \"static/media/titan_dark.850ddfb5.svg\";","module.exports = __webpack_public_path__ + \"static/media/titan_light.3421fc62.svg\";","module.exports = __webpack_public_path__ + \"static/media/titan_dark_logo.35da4bce.svg\";","module.exports = __webpack_public_path__ + \"static/media/titan_light_logo.b59596bf.svg\";","module.exports = __webpack_public_path__ + \"static/media/decoline.bd7e6cd9.svg\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAAGCAYAAACclRsMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGMSURBVHgB7du/SwJhHMfxjyFmpUZDSCZNtTQYNlSDtmnU0OJf4D/Q0o+9uf+ioJZ0akhaFSmE1FatBgcrSzMVxeuu53FpKIjA4Xju84LjuFvv4e7N3fdsxi0MkFK6F3MwOnYQFUdXURBb0hNHe8QDot80yjm83+dAFAuUcbSdhYpamguXtU1k6usodebFsRv0U6SdwP7rAch89rynYN2pqD8Csq62zY2kO46iU0S7cw1ERFZV7c0gXQ8NYj3fDIL+ttFKgMwp2jpnuKtGf3HCYLhbjoz1lCuG7FiEsU5EliYDvfARRPotLN6sL4D+J9C7BpnTUu+G4a4a7YGf/qxCxnpmPIKriRhjnYgsTcZ6ph4ejMJwBIZUxnBXiIz2z0fesFQmY73sWMTJ5A5KYs+5dSKyIjmvnhahXmguI90IMdaH6Mnuh1ergMynap8V4a7jEKQE7W4KBn81Vtaz3Yfd6TOx93+f1EE0BDoMLiaSbGI1mPxBclyJI1XbQrXrAw1f3rGCaJ/hbkby2nwBbc+FDzULWi8AAAAASUVORK5CYII=\"","module.exports = __webpack_public_path__ + \"static/media/modal-decoline.7a86624b.svg\";","module.exports = __webpack_public_path__ + \"static/media/wordpress-sitebuildbuilder.0194a7e0.svg\";","module.exports = __webpack_public_path__ + \"static/media/noGiveup.5bf8c68c.svg\";","module.exports = __webpack_public_path__ + \"static/media/linha.5c1df482.svg\";","module.exports = __webpack_public_path__ + \"static/media/saversBellIcon.4646e90e.svg\";","module.exports = __webpack_public_path__ + \"static/media/bg-frame-desk.9f1da5db.svg\";","module.exports = __webpack_public_path__ + \"static/media/bg-frame-mob.2ab5ece9.svg\";","module.exports = __webpack_public_path__ + \"static/media/Snappy.ff6a2c39.svg\";","module.exports = __webpack_public_path__ + \"static/media/snappyRetention.a2b821cf.svg\";","module.exports = __webpack_public_path__ + \"static/media/ilustra_88px.b7e18611.svg\";","module.exports = __webpack_public_path__ + \"static/media/ilustra_48px.5eb37e20.svg\";","module.exports = __webpack_public_path__ + \"static/media/cronometer.75fc83f7.svg\";","module.exports = __webpack_public_path__ + \"static/media/circle-and-check-green.b6a30fd7.svg\";","module.exports = __webpack_public_path__ + \"static/media/QRCodeError.16ab8aa5.svg\";","module.exports = __webpack_public_path__ + \"static/media/icone-split-fatura.866e437c.svg\";","module.exports = __webpack_public_path__ + \"static/media/border.5904d9f0.svg\";","module.exports = __webpack_public_path__ + \"static/media/snappyGlass.e8459e63.svg\";","module.exports = __webpack_public_path__ + \"static/media/check_circle.6db96835.svg\";","module.exports = __webpack_public_path__ + \"static/media/unchecked_circle.cd22a95e.svg\";","module.exports = __webpack_public_path__ + \"static/media/lock.4ac84c52.svg\";","module.exports = __webpack_public_path__ + \"static/media/icons-steps.ab423288.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-email.98bf76b1.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-criador.62710efb.svg\";","module.exports = __webpack_public_path__ + \"static/media/color-line.e6b06ffc.svg\";","module.exports = __webpack_public_path__ + \"static/media/Assas-lp-details.b077d943.svg\";","module.exports = __webpack_public_path__ + \"static/media/Asaas-wizard-details.2fa6b146.svg\";","module.exports = __webpack_public_path__ + \"static/media/congrats.21470baf.svg\";","module.exports = __webpack_public_path__ + \"static/media/fail.13107f6a.svg\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAABlRJREFUSEu1ln9UTGkYx59bG52aSfpB+rkRJWtKSX41c6fSHnbjcEiJzc84xy7HLmupZu6MToWzHCSVlR8pJEspR1FzR2QnlaIfs2iQmSbSpKZENHfvHWobzWjDvn+9932f5/nc5/s873svAp8xPMFn1FIT/m4yxINNbWxsMKGQwRh/aCs0I+oBgc6Nrey1FW9xfDCxPhm8gob5hg3hFvyimGVaBldbBwOlbD8Z7AqoVYKZQH67u2Drplb/XV8EzObOFFi6mk8T8q6zntY0i3QF3WeK8931WFEsBaI1gW22tAXbHYzP4W1dSwPvtqT1jaPVIejMPAIIgOpMMac68+8d+gXKjO6fv4uFymu3+zqHGfJCVxhxTqI6wO3MEce63yJhegZ6mXShfNGAYMZ8Z1+VAcKsyhCrO1Xv91xM5cYMBH+6Z4/zfrrgAsMAnXfnjbBwgxL1A1eUBpOnb4bSCzFQU9NF2c2gD3X2GW4Q8peyKxNv6aoaEKxNWuRq2x0iNSYejsclhxlyIlYa8aKPdvKDjnVyz6rtl21bA2HbkiE1bjEcj8kYqOb/ubnYKXkbcPtpwYS/yfTlRhi23JAbTErsogHAsK8Aw94OBB2wq60snFBb09GoVCHJaGTYSiDyYicpN7LKiBe4zJCTrau2nw3mh0Y0PWkeZkEFkivq8nJidn8L/iZqlcIBM0oG7CU15wdZz+BkNNz4GBDzN0VBpULzH6sSiuvan+mUmhNiF+I2JiD9cqmzOh5lmLx5HXiGL/i+THI1tweCBVlj3EU2XLBUXkRQ8VxtcHyFBY/19RBOTyBuQUeATjCR4y1oaKGjWFqA2l45jA6nw0Nhze5EaFA8PJJbcmg1tY4tsuZwg2x4wpr28yi3dgHTwdDR13FIGOgB4FIiXvX6lZ1wpWW58PHrDWhK8wHBcouT6JihvlrBbAbduTBuvJgKfPiyN9y6Zwfl0ydDB90YfPKE6heRKySFOSWJftQ8cont2Oh06X1qTvCsJaQ8KvIeMCUfzd8pQBQhXDmzrxpawXicy34Ww+QnyvBttx5sTF0ACeHrYG76BRjZ0NjrL2+R4DmiRHav7GxaOBc1SWKmto0oetDehLHpK8k7TZ9bqDz8YQm0gtvPzieMjWW9tjjiBisf/Qj+WXn9StjQLMnOvZU4Ty07SlvIchz6A/tos9ZafzTjxW4Rv21fODGW4blHAyIS28OR/Cn9wNTCs5ZH67NECQlaN3Us9ss4e3nXI4IgHHznLAEa/YmG2ynhJBBUjuldI69z8Hz9Emy630D5gys8aoOUVp4tK0kpA3jzsRfRAHNCrANDPSKyxVWrwXxEBcxgq8usMY5e8YJbtfYwv6MVZr1UqvcU+vog1zeACV2vyI8IMolsJsDbZef4UtEOQYesUtsLaIDxnS5ZrIn0ucL8FGhtGQdO49PAlZHYz6+tyA46C+zhspEJXDc07v2oN7XURV8QJUVFWnsG+NEctqB0G3+hUhqO3juvu7mY35jZCXc51VOUFwoXEF75gwxIgLfPrzDS+mY/eNVjK9iXNVPjTwIhn5Ivb+lNhmPtFcgbNTUbV8p47Ht/YlqbC985LoY10XRbz+bzZ+5QLDigftQFf9JkCmmCSSBpfH9cSduy+1eDy+vyz/TEQWm2qMB5viD6acm4KKlIfdbVvdAzaTsVrKIPk2hI/1Q+FUTXqJ9IAMexmTDRY5/WfrlZ6wD55c4gax4GuWVJHmtXPXDiREKG32zwLiyCkigrrwk7Gm9V98s42D1y/Xr/efEzfdf3C/z82aT3mRMw3LwaJrgfBDOLux/a1WNpDYd4adI4agPbbOjL5bzK9J0NPoIboAHUyFi4sar2xYuxLvaOl8B9Smw/OFXzytIt6oajhrllBVhalcLDjrSsYvGjI/xTDRe1SvGRRQRbMoq5cc4s4bUr7xrP3Wsn2I/O0eoiubcQxHfXqiqlZXFnSqMTKpsL/73eBklG8J3jT5BHaFnfZnIaf5I8RkmaofSgmntCdpCfLjs0SIZWc4S4NIW6gNTjeRPZyYXx5IwgL5DbwPDYC+WP75zAK7qSsNN1xV8C2FtjQazLSdTNJLRnobnJDcpFkW3Hio/sravP2yNSiNq+JLAXPNsJhm5dTcrtbhIE3aoiflrDYW66LPX/gPWN+Q+FR3DRDgetigAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAABnCAYAAADBlOqLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABDWSURBVHgB7Z3PbxtJdsffq25Ksn4TiQcIsh5RR8veQMJYA+zJ1C1IDiNhZ+aWMZXT7uwiIydAboFk5A+wHezMzimmcsvOLKQBktncTOcyiGVD8owlXwKQ/hEsEmeX1E9bIrtq3yuyNZStH1XNlsiW+wNYpMl+7CrWY/16Vd/CxcXfprz2yiKAKjnb3sjIyGAJDLm38vQ22aWUh5OjPzyXM7W7v/x0WiHMoIKZdy6cu2Zqd+/bJ+Pg4i16unRp6NyYqR3nUbZ7txVIKG97Yz8aGSyY2lIe5+hhXEl5dfTiwA1Tu1oepxBU9p2ht6+a2oVRHlKKiXcv/mAJAiAqbTsZeuwHQEoIpE0N7z58NkwPabZDV10BCxTApH5ElbGxAxfGQacV0rX7GyET5bSiL4rT6raJjKnd4qM82eh70jeF42ABOUOaHvoV4JSNXRjlIcDLQECEK9qy9GXd4X/ONuRMDbUHSrjJdmXwjH/ljFJ4g/48UFLctLEjz9d29AmzNr8AUfbm/TxWhMya2o2cHywoBZy3x1gB49qBQalmq3lE49qB4fLQdpTWS0OD86Z21e9DzerycKRVWmNiYmJiYgKAcEopFovUMWtLg1BpFGKAerLD1OPvB8T+3YuUKinEAj0rKEl9EwnUDu/kksmkcc/+tHGqHEI7gUhkyAHeQzDvob8KjYJySslZ8Mrzb5pznAqHYEcQbtsnVJJTe2qARqEahP7OS2/nGjlGAd4AIu0Qx+YI+6Jm+nq6rIbXUSSyDlEsrqeF49yiHKTgpFBQkOhNJnt6cnBKERBBVtdfTAvXuX2izsDQ/QQ4t1fXN6fhlBK5GmJ1bZNqBcxAk0FU2d7urkk4ZUTGIar9hXYK3oBxDOMEWJKV7bHTNBJxdXStrTyNCCWbqByz8PDxFA3xLpe3K1etIojVqOUVqKjZS3/2ttF8PTptHOVsJWdghh23ndM18eobHGwSQk3b5JFppDxqEdZh2/KopxrtpCqYo3J3Hz7JmBoufJfnCZ/r9HQ80eHYtaku8vXkFHDd5PLV9a3riHbRxpOC5izGV9c3XssHOYP+biivc2DB3vIwj+hyefCSAr5nIiGsIqz1CJAiV3te8hwvZ2roVmAJQc/ygfTgDtjAs4L6Eb866tLi6gZnLnAGTwYxVUvnLsrPmwK7dQm75aEKnlM2bor2lAdgoLUQjO5DLC7m9RjeZjGGD9sGsfvmUT71o/OHV2vUb0gJp23x+OcYwkCVZGVnpH4CyySP+9GM8vBp6U4l/eqyQgirxTfNhL7MXG9Pp/FKrlakZechimsbmSg5A0P9iXRxfT0NEaZla4jVta182BNPv/n63+jf1/D8+f9BKjUIf/4XfwmXL6chTKJeS7SkQxTXNscF2vXOj+LXX/4KvvziV6+9/v4HH8KP3/8QwkSCNxbV6e1WbTIyECIHOQPDr/P7YeKAE9mp7ZarIfTIwm3PQ0gc5gz1hF1T0AxmMoozmK1XQziJNISEqTMwodcUIpGBCNKCTUY4M5KFQh4K+TycPXvW6PrOzk5YXl6Gx48LEAbUB0pDBGm5JoNCy0VKVkMTUQsLd2Fra0s7w9DQhSN//XzdP0xf0zabm5v6NbZrDFXq6+lKQsRwoYWoLoxtzBlebSbOnn1LF7b/3qv4zvCfd3J77BrvU2B/sfgilUyeKUCE0E3GvZX8+L1v89ZVNQdUbAJiPhzRu0923yzqrXJ1dDQUzdyvz8BzDv94bRoup8deK+CDnIEJo09R2tqcfj2PR9PM8hD39Qe4c+C6cwvfPU3bfAg67m0h8NbC8uMZsMBrr8wpsku0u7f2vOF4KQjIYR3I/ZziMGfwadQpdsoyk2hzF21smlEeeiN0rTz2NhlWDcjLUggtzt7mQWEqSK/m+fPnR44mfKdgJ9B9iwsXDnUGH37/PPUngvQpEi5VwKgCDz0Vorltx0syqJaHUtWop/X96I7inYtvZ+npBMXSx0bPm2/p54ialDiCqCZHLwzMgAUOuhNs52xXQpniXbj7X0bX+U7BDvT5Z58aD0kfFwoQhI6OtvkyelZ5rC8Pmw3NvDHZL4939WeYI9AZYzt32xvXLnVpyHxFTz21BFvH3kfO/0mBHrLQFJT+y8PM4+ZMwnkQJPzdzPKI5KrrV0kNDhpd5/cbzr71FnyU+WvjUcSl0VF4U2gth0BVgABw+35U4dZ3Ij//7BcHjjxehd/noWsgAuanmbRYDYGBO2CHzRvsN6I4bDjqw6/z5wYmdogG8UTgtYDMfk6RSqUOHF4e5hQNOwNTqTSUn2ZwOqeu734/dc39iy+/+Ff4zdf/fuD1/mzm5uYGbG1uQWdXp15A0xjRnLpuvfD32uY8BYbegwbh4NZ/kBMsLCyQc2wa2XBf5KPMJAwMpKBhlPqqr7erJbcOHEbrjTKUykEI8C/8j+mXb+oMDE9AheIMwKumVKChY7NpPYeQ5SyEhE2AKpQ+Qz0JJwcRpOUcglcZIWAOQsLEKUJ3BmoukmeiFeX00Q7Bmzv8zSE2BLVjDosCegChCnMc5hShOwPoRbZZfgwS6WSaWR6CI2peu1v02ty8TQb4xrI9sci2vOkXLLi/8uQ6Rdby95af3drv/WTPmVyYtQTDhf6Tn/5st4/A/YuPrkyG7gzUTS8ke3vnd/Oo5YbN4Y3QujzanUWbwq3KN1fLwzYEzvLNfnm44MhhXVEg9Cfa9e7qgsmHlBOJlNBywXqokgILFNT0HVAduP6BawnRgHDYfvB8A/87TqSUunaTCgaxOoZLW5hTwFKlUA/+MFXpcPn7yZnYlRNev18e9Gi7riSt/1J5uO62zHrtOMwh09ELdlK6CyvPrirwhj1rKV01qRRklBIzB13BtcTa+oschWTTEBEQMZvs6c7yc86bQq+E0rGanNpTHkPm0eewyqO193a+eJESFbnY6ETVyaBK0hUjUe1M+rR0tJO/XIrxR0P5DdW1qDsDEwlJodX1DaoCxSfQssibfT3dVh3rViUyGlNr61tzyj+7ooWgL3C+t6dzAk4JkVkg41W2WfGttaKHCEte95lTpUQXQVnCjSxgC+hGKDnb19udgVNGJJVsKUQ+Q0lv4g5r71pfT88MBKS6ISkxTvXzMKv40cRMP9ZpYdAQsMATXErKByB5gu7kFPqjK228/iItUN2iLzMFJwUVklQ4yXMkEACWY0bXmUZFE0e2ullKZaUnZ5PJ49WdiKxD+JxMbaH3VtyU3Z03kmi/zI9qhGF0269jCDOv+ugG6k8dlzp/5B2C0RNYZTlDuXkv3EmsxhxBp211Y0pU9TxD5njU+U+FQ/gUleqH9c1xBJGhNvkyBITa8DtKyXno7coGdgTqJ1CtMIchx2Pq4SGvV60tQutfYO3gUB11dLYrE9YHh1KHiNtVm11GWhKZRgp8ao3N4ais7OoImKOJoPmjZH+rzrGV5qOVFKrLlYpMJ1yHdRvqrlIlJWGVXlqiNp36ByoHPZ25eifQcsH6IFe4anpY7Qnrcu/qbYdRHi5L6dIvKs1v1A4ONQpwVWV3KfCELOMreRbReDxON58iuwGsdqyMHYLuM0WR0hRUZX8PPbuzVqicl/l7K09oQqsq4GFzQi+Hn72qXDDdXPFMZM7E7oRF2of5ft/+9/9c29mRwcqj1qRxeQilnPmaJO5SGc0nfhLlMg+NcvS0BGU4UqK4HlXbNkYRvVmwQ6eVDyu1+QU4216umkdVqDjSOKKra0sJfNhsCT2zrYesyw0nL9I+/Kd/1Pde9ZBbKEnP7oDc2mG1JS6PU9WHaDZabBXFLWgS1ORNJHu7GlrcGztESFR1udtP/pSfPWi97cFGOpmnYrNvKyDcjivNdQaG+mTCbSjqGtcQIWEqxXznTk5vCGJlmvNDQ7oAVpZX4McffKg3If/k45/v+97KyrKhDHNjtUTsECFg03fg/aW8rfCgDUSdnV37vmezOlwqOZnsrS7lsyVuMkLBTlvzsN1kNjvNDsJpIBocO0QIiAZmRY8DZb/qepeW0qmMIsXixnCQ+AnvOP+nX3x25HV/8/OPtWyBHdhf3NgYTnZ3Wy8oih2iURxMQQC4aeAO5lGwREEgpJ4cix3ixFEqBWjfN2cJZR5VHBsKAkV9Y4domGDh9q6uLvjbv/v7I6/7/JefBmgyGAzuEBzR85R6bKtvyKqr3IEpl+UNm4ND9SGn4GVs7XRkNrEzxccQWqeV8iilxNEf2mlq6kNnhUrbpvUoeHhpMugP3GRYUF8eri5UiuhxWHjhu6cF0xAvf4gS6hbnKpHQLxnPkHEIW4FIJdq1Uoyxdg87A4XyPuGh0TeP8jlTDUiOdlJAbQbpxhTqLVlFO/VBrAhuG6Zg320AvIjGvsnw9a2OD3MF3e/LQ1x2KXZe8LNTcSsF0w/haKfX7vJN+20PDqVapUAPKYqyPbCzcyitLDyqCh0vwTjDysMSOtXnKGTB1I6jnfdXnnF0NYUHyQWjeTrq4Sbjrz46OkL9L7P/rPWyrEHzfPrlAaiWXK4RFh/9dhBevixdslgcw18W2Y2UPa//3YvnrBzi0tC5Ma5hEmVzB2RGL/7gxsKjp0vuS2/JZiGPn8dqWget0sqyv1W7A8LtHvXkA/TEuMm4nE4feR1PYwdyCCEKppf65cHlGE9dh4CNcl5QhX07YZPgCnjxTGUIIDSmrxk6yvIs9jpihwgBT3m2K79e4zAxdluh9kYU8OImIwSqi2rb8ibNxp3cbX1Wx6+/+EKHuLkEOMT9/gcfwC8/+xR++vHP9n1vZXnZTP0GodDX3Wk8cnvdPCYUiqubM0I0c3uhT2PbDOMmIyzkzg2bsf+xwFsNXTcLDRA7REjwCiWpzJe+HwcseNaoik3sECFSXfEsrZbAh4e8GXSVVD1xHyJkTnjXVhWEJepIjkAIxDVEyOimo7LNw4GTmZsgZ5BdZwyGH2Zoh+ADQIPI8HLwh23BErbjg0qDyPDefZgfDpJWTmcjabWxYaf4/f9vT7zYKRfgGOFNyewM/l7URsuDn+uDXPkAUJa2tT04lIJbeba1lTYmu9t8UCk9ztnYLTx8NiWEu8iHo9o4EzsRp1On1SKPDMsF60NVLQ9H/d3m+syz/11L/X7tBRwLKK/293amv3eG4OXh55E3Cwsp1O4Xi07F/BfLB4fWDmK1lTauw6qGQKid/IvQ/7LD3BaVu3utwqr8rwnsdBQJrNmiXZ9A4AA//G51k4aCOKgamE6uR9cKKEf6urv3hPBZ2hgClsf3eYR+d3Ro4AbVEiUPWB7XXNqYDw4lu0l2KLcss2ABH+RakTuZirC0K8uZShuFm4XI2ZyHydFOP63vXhzImtpxRPXeypNJpdSwdVrRneQ88mbq2lAwrWWQlMwAouUyecUbcR8oxJlk7/5yRhyNbaA8RvzyiEcZTcDXrhCIafrFD/O6TKzVKIyS6jGvs0DEnFRyCXq65oMKl8TExMTExMTExMTExMTExMTExMTERI83Yuq6esipd1uBBCnFhI3oae0g1rSNAi6jJZERZhDUjaNkmF9Nq9deWeT4hbPtjZjuUPMP1uVth8qDMdM9ujqtK0+uK8ApzuMbsUBGJspppQ85xRSiZ7y2YfGRXneR1v8RdjpS5Axp/UhftI0dS02DjlpiqiY1bQQfrKv8g3VR2qW1drAuCnHljXAIUfYoiqtmWRLZJmrJEV2W/aVo51dKCquCpfvdZKlhJdG4dmBc0ZbldPI9Lw3ZHazLMsxsV7Y8yJXSeI3vKaW6+QcNKcPMt5mBKQAAAABJRU5ErkJggg==\"","module.exports = __webpack_public_path__ + \"static/media/asaas-stamp.da06293f.svg\";","module.exports = __webpack_public_path__ + \"static/media/features-background.61e2a328.svg\";","module.exports = __webpack_public_path__ + \"static/media/features-background-mobile.ec1e2392.svg\";","module.exports = __webpack_public_path__ + \"static/media/snappy.6ee7eb56.svg\";","module.exports = __webpack_public_path__ + \"static/media/arrow_left.0472ea34.svg\";","module.exports = __webpack_public_path__ + \"static/media/arrow_right.4b50940d.svg\";","module.exports = __webpack_public_path__ + \"static/media/hero-banner.f70c8353.png\";","module.exports = __webpack_public_path__ + \"static/media/wordpress.6e8c1d1f.svg\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPwAAAEQCAYAAACUWhkqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAlHSURBVHgB7d3bcRtHGgXgxlilrd0SuUYGDoEhiBmIEawUwWoj2N0MnIGcgZQBlAEdgjOACUDUDcCYA5hlSgRIXObS3fN9Dy5bUvnB5VM/1MKpMxhPP/yvCIP/BiB7g+ov4+ns5yIU/w5A1ga3f3M1mf0SBsW/ApCtwd1/mEw/jspQPg9Aloq7/7CYf7oIofw1AFkafP8D4/H4x+KHv13e/MxPAchK8f0PDIfD35eLwXkow28ByMpg20+Mxx9/Kn4oRy495GPw0E+uQv9keXnzy34MQPKKh35yOPz7b8tBeX7zkPd7AJJXPPYLhs+e/bosF68CkLxHA18Znp6+W5ZLoYfE7RT4yvD02S/LUP4/AMka7Pnrg7INpGvvwFeEHtJ0UOAryjaQnoMDXxF6SMvOj3abLBdfXyvbQDqOuvCVVdnmydPRzb/qLABROzrwFd+7hzTUEviK0EP8agt8ReghbrUGvjKezc6KcjDSsIP41B74yjr0xWUAonLUH8tts27YKdtAbBoJfGVVtlmG/wQgGo0FvjL85z9+1rCDeDTye/jvKdtAHFoJfMWcFXSvtcBXlG2gW60GvmLOCrrT6KPdJuasoDutX/iKOSvoRusXvmLOCrrRyYW/pWwD7eo08BVzVtCeTj7S32XOCtrTeeArq7JNWF4EoFFRBL4yPDl5r2EHzYom8BUNO2hWVIGvaNhBczp/pd9Gww7qF23gKxp2UK+oA1/RsIP6RB/4ytX0w6VlGzhedI92myznX8417OB4SVz4iu/dw/GSCXxF6OE4SQW+IvRwuOQCXzFnBYdJMvAVoYf9JfFKv8l6zqr0vXvYQ7IX/tZ4MntZDIo3AXhUshf+1qphp2wDO0n+wt9StoHHZRP4itDDw7IKfEXZBrbLLvCVyfT6bRnCiwB8I/lHu00W88+vlG3gviwvfMWcFdyX5YWvmLOC+7K98LeUbeAv2Qe+Ys4K1rL9SH+XOStY60XgK+asoEeBr5izou96FfiKOSv6rHeBr5izoq968Uq/jbINfdPrwFfMWdEnvQ98RcOOvhD4P02mH0dlKJ8HyFgvH+02Wcw/XWjYkTsX/g4NO3Lnwt+hYUfuXPgNNOzIlcBvoWFHjnyk30LDjhwJ/APWc1YLZRuyIfCPGJ6evtOwIxcCvwNzVuTCo90elG1IncDvSehJmcAfQNmGVAn8gYSeFHm0O9By8fW1sg2pceGPsCrbPHk6uvnPeBYgAQJ/JN+7JyUCXwOhJxUCXxOhJwUCX6PxbHZWlIORhh2xEviarUNfXAaIkD+Wq9m6YadsQ5wEvgHmrIiVwDfEnBUx8nv4hinbEBOBb4E5K2Ih8C1RtiEGAt8ic1Z0zaNdi8xZ0TUXvmXmrOiSC98yc1Z0yYXviLINXRD4Dpmzom0+0nfInBVtE/iOrco2YXkRoAUCH4Hhycl7DTvaIPCR0LCjDQIfEQ07muaVPkIadjRF4COlYUcTBD5iGnbUTeAjdzX9cGnZhrp4tIvccv7lXMOOurjwCfC9e+oi8IkQeuog8AkReo4l8IkxZ8UxBD5BQs+hvNInaD1nVfrePXtz4RM2nsxeFoPiTYAdufAJWzXslG3YgwufAWUbdiXwmRB6diHwGVG24TECn5nJ9PptGcKLABt4tMvMYv75lbIN27jwGTJnxTYufIbMWbGNC58xZRu+J/CZM2fFXT7SZ86cFXcJfA+Ys+KWwPeEOSsqAt8j5qwQ+J4xZ9VvXul7StmmnwS+x8xZ9Y/A95yGXb8IPGEy/TgqQ/k8kD2PdoTF/NOFhl0/uPCsaNj1gwvPioZdP7jwfEPDLm8Czz0advnykZ57NOzyJfBstJ6zWijbZEbg2Wp4evpOwy4vAs+DzFnlxaMdO1G2yYPAszOhT5/Asxdlm7QJPHsT+nR5tGNvy8XX18o2aXLhOciqbPPk6ejmf6GzQDIEnoP53n16BJ6jCH1aBJ6jCX06BJ5ajGezs6IcjDTs4ibw1GYd+uIyEC1/LEdt1g07ZZuYCTy1MmcVN4Gnduas4uX38DRG2SY+Ak+jzFnFReBpnLJNPASeVpizioNHO1phzioOLjytMWfVPRee1piz6p4LT+uUbboj8HTCnFU3fKSnE+asuiHwdGZVtgnLi0BrBJ5ODU9O3mvYtUfg6ZyGXXsEniho2LXDKz1R0bBrlsATHQ275gg8UdKwa4bAE62r6YdLyzb18mhHtJbzL+cadvVy4Yma793XS+CJntDXR+BJgtDXQ+BJhjmr4wk8SRH643ilJynrOavS9+4P5MKTpPFk9rIYFG8Ce3HhSdKqYadsszcXnqQp2+xH4Eme0O9O4MmCss1uBJ5sTKbXb8sQXgS28mhHNhbzz6+UbR7mwpMVc1YPc+HJijmrh7nwZEnZZjOBJ1vmrO7zkZ5smbO6T+DJmjmrbwk82TNn9ReBpxfMWa0JPL1hzsorPT3U57KNwNNLfZ2zEnh6q48NO4Gn1ybTj6MylM9DT3i0o9cW808XfWrYufD0Xp8adi48vdenhp0LD3/qQ8NO4OGO3Bt2PtLDHbk37AQevrOes1pkWbYReNhgeHr6LseGncDDFjnOWXm0g0fkVLYReNhBLqEXeNhRDmUbgYc9pB56j3awh+Xi6+uUyzYuPOxpVbZ58nR0E5+zkBiBhwOk+r17gYcDpRh6gYcjpBZ6gYcjjWezs6IcjFJo2Ak81GAd+uIyRM4fy0EN1g27+Ms2Ag81SWHOSuChRrHPWfk9PDQg1rKNwENDYpyzEnhoUGxlG4GHhsU0Z+XRDhoW05yVCw8tiGXOyoWHFsQyZ+XCQ4u6LtsIPLSsyzkrH+mhZV3OWQk8dGBVtgnLi9AygYeODE9O3rfdsBN46FDbDTuBh4612bDzSg+RaKNhJ/AQkaYbdgIPkWmyYSfwEKGr6YfLJpZtPNpBhJbzL+dNNOxceIhUE9+7F3iIWN2hF3iIXJ2hF3hIQF1zVgIPiagj9F7pIRHrOavyqO/du/CQmPFk9rIYFG/CAVx4SMyqYXdg2caFh0QdUrYReEjYvqEXeEjcPmUbgYcMTKbXb8sQXjz26zzaQQYW88+vdinbuPCQiV3mrFx4yMQuc1YuPGTmobKNwEOGts1Z+UgPGdo2ZyXwkKlNc1YCDxnrYs4K6Nj46vr11fS6DEA/VN+7/wMv9Z1j50o0BQAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALAAAAC+CAYAAACVvYUuAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAXmSURBVHgB7d3tcRNXFMbxu4uHTDImQR1QAiXEJVBBkgpCKkjSAR2ETpwORAl0IGTJkCH2Lj4SYoRYSftyX8659//7wGBL40/PnNm7c+a51WJ1+1ftqj8dYFAl/yxW61e1q393gDHV7j/Lm/VrV9W/OMCQav+Hm9WH69a1PzvAiHr/h/u7/144175xgBHV4S8Wi8XT+tF384dPnjlAufrwF7PZ7F1zX1251r11gHLVsQ8Wiw/P6kftNZMYmlWnPtyE+KKZP3ztqQMUqk99OJt9/7ap2quHg907ByhUn/vC7PLyTdO2fzhAoarvFxc361/rqv7HAYqcncA7sx8vXzeu/dsBivSewDss/0CTwQEWhBhajAqwYPkHGowOsCDESK33Ia5Lc///S5Z/kNKkCSw2yz8Xj68f/tRzB0Q2OcCCvQmk4iXAghAjBW8BFoQYsXkNsFis18/rtrpmgw0xeA+w2Ia4njsgsEmv0Y7ZbrA1vzkgsCABFpvln8axhomgggVYzH764RUbbAgpyDPwIZZ/EEqUAAvqqxBCtAALln/gW9QAC+qr4FPQQ1wX6qvgU/QJLKivgi/RJ7Cgvgq+JJnAOyz/YKqkARbUV2GKJI8Q+6ivwhTJAyw2yz+ueeGAgVQEWMyePPmXDTYMpSbAgvoqDJX8ENeF5R/0pTLAghCjD7UBFiz/4BzVARaEGKeoOsR1ob4Kp6ifwIL6KhxjIsCCvQl0MRNgQYhxyFSABSHGPnMBFtRXYcdkgAUhhlD/Gu0YLmCEMDuBd7iAsWxmJ/AOG2xlMz+Bd1j+KVM2ARaEuDxZBViw/FOW7AIsqK8qh/lDXBfqq8qR5QQW1FeVIcsJLKivKkO2E3iH5Z+8ZR9gQX1VvrJ9hNhHfVW+igiwoL4qT8UEWFBflZ+iAiy4gDEvxQVYcAFjPop4C3EMyz/2FR1gwQWMthUfYMEGm10E+LPl6nZO8489RR7iujR3H6/YYLOHCbyHvQl7CPABQmwLAe5AiO0gwEfQ/GMDAT6BEOvHW4gTqK/SjwncA/VVejGBe6C+Si8m8AAs/+hDgAcixLoQ4BFY/tGDAI9EiHXgEDcSFzDqwASegPqq9JjAE1BflR4T2AOWf9IhwJ5QX5UGjxCeUF+VBgH2iPqq+AiwZ9RXxUWAA6C+Kh4CHAj1VXHwFiIwln/CIsARUF8VDgGOhOWfMAhwRFzA6B+HuIi4gNE/JnBkbLD5xQSOjA02v5jAibDB5gcBTogNtul4hEiIDbbpCHBi1FdNwyOEEtRXjcMEVoL6qnGYwMqw/DMMAVaIEPdHgJVi+acfAqwYIT6PQ5xi1FedxwRWbrP8c/H4mltEuxFgA9ibOI4AG0GIuxFgQwjxtwiwMdxd9zUCbNA2xPXcgddoFm032KivEgTYKOqrtgiwYdRX8QychZKXfwhwJkqtryLAGSlx+YcAZ6a0+ioOcZkprb6KCZyhkuqrmMAZKqm+igmcsRKWfwhw5nKvr+IRInO511cR4ALkfAEjAS5ErhcwEuCC5FhfxSGuQDkt/xDgQuUSYgJcsByWfwhw4ayHmENc4azXVzGBYbq+igBjw+reBAHGFxZDTIDxFWshJsD4hqX6KgKMTlZCzGs0dLJyASMTGCdpv4CRCYyTtG+wMYHRi9blHwKM3jSGmABjEG3LPwQYg2mqr+IQh8E01VcxgTGKlvoqJjBG0VJfxQTGJKmXfwgwJktZX8UjBCZLWV9FgOFFqvoqAgxvUtRXEWB4FfsCRgIM72JewMhbCAQTY/mHACOo0BcwEmAEF3KDjQAjiuXqdh6i+YdDHKJo7j5ehdhgYwIjmhB7EwQYUfkOMQFGdD5DTICRhK/mHwKMZHyEmLcQSMZHfRUTGMlNqa9iAiO5KfVVTGCoMWb5hwBDlaEhJsBQZ8jyDwGGSn1DzCEOKvW9gJEJDLX61FcxgaFWn/oqJjDUO7X8Q4BhwrH6Kh4hYMKx+ioCDDO66qsIMExJUV8FeLdYvn+5XL1vHWCV7E18Amj8OZzPmWtGAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAACKFBMVEUAAAD569n67d/67d32v1b9xD763KPyz5z55MP65sf87dX56M/56tb47Nz47uT57d/7zGb5uzX6wEH+x0T2xWv60IT3zoL71Izxw3n3zortvHrvxo72z4zzyoj11aPuzaP32aj53bH337j459H43bj44sX24cvu1cL76Mb7xVf6z3j3vEr+xUD68Ob637T359j+yT7+xz77wDj0sTD4yWv3xF35wlv7ylr3uj3yrznvsEv1w2P0wGHyuVn5ynL2xnPus1/wwHn0xGz60YH60Hj3ynzyzJT20pTzzpf72Jr31Z753ar64Kz006Px1K754Lfx06zwzJj01KL75Lz74rP237/127z04cz43bT56M3248301673xWb67d324cfy1rHw4tn/xzX/02X/1Gj/0mD9yU3/02L/0lv+wjH/0V7/0Fr/0FT+y03/0Ez/zUX8xkT7wD//yj7+xzz/yjv/xTL+wC/7y2L9zln/0lf7yVf8y1P/0FD9yEr9xDn+yDf9uyz+0F79zFf/z1L/z0//zUj+y0b+yUX/z0P1uD3/xzn/yDj5vzj7ujD7ui35uCz5sSf0riL/0l3/zlf+zVP+ylD+zk7ys0b/yEX+y0P4vUP+x0L8wz/zsz/4vDz8wTr9wjf7vzb7vjDzriv+vin6tCnspin9tyj3riT2xGb+zVz5xlr6xFDxtUz/0Er/zED0szf/xC/6tyX2rCX7tSP3qCLzoyHuoxz0pxn4zjDPAAAAYXRSTlMADAkB9/erm2ZhQj4tJBYF/f349ujT0MfEw8G7uqWbmY+CcFNMPjUzLCspJycZExD8+ff39vb29vb28+/s7OLg4N/b1s7MurWop6aloqKelZSUjIt1bV9aUk9MQi8fGxgVuzLeKAAAAeVJREFUKM91zVVzGmEAheElQLEAcW3jbnV3d3fvwi4ssC5AcAIhOHFvXOouf69fyEUzs+S9febMgSBpT2e7Rv2is6ND/eBqeWllXWNbV1d7DwTS1R0sku87IjtwWL53D4ulCouKi+WH6vMAqS94LIhlZMxmsZj7SAyLDFtt5OLF54DuF+BGowExIwaTmWBTyZmJien5wQoNoBt2mxGYAYibwebQ94GAdcwrawC0o7fPsGGmIfck7J/HHQ5HEGe/3tskE5iYEGc4JqwkvdMUNTOXXr2bpRCCmJ1D5hCDraVpz+go6qESSxWArveGnU6CsNlIn5BJohYECVhH+pePA7r9IfaZ5Lgw8QUW1jM06nK58Aj7/RwgVUnKx/v97AADC5nfPwopD4pGvIO7AGmvfIpGZ8dpjovz/l/rCXzYag0xWdI336murq05TcOcT1hboV2OYBClZhXQRrtbW9/oGk4twD5+eelkWXnp+bLKm5osbXq9bBGGv61WPWpuetLUIoG21HZ5CoP5P1UtkCh9Y0kC5v+eeawXW3fNx1j85/gtnZjylHaGhKOXtGKSqAr63QNvd+bnIKV9W1LZJ4n41LWXOb6evlvwpk88lIhJmn/26P5jCq0UyjF7VqtQvgKSy7pfS/7LP+cPn/7hj9/hAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAACH1BMVEUAAAD569n56dT7wUX47uT77+L569z7ujH2v1b63KPyz5z55MP65sf47Nz569v/yT37wUD4w1z+x0T2xWv60IT3zoL71Izvvnf3zorvxo72z4zzyoj11aPuzaP32aj53bH337j35M346NH559D77tb75sX459L24cvu1cL5xWL34ML359j7zGb+xz78xD/9xDz7wDj0sTD4yWv7ylr9xED3uj3yrznvsEv1w2P0wGHyuVn5ynL2xnPus1/wwHn0xGz60YH60Hj3ynzyxn7tvHryzJT20pTzzpf72Jr31Z753ar64Kz006Px1K754Lfx06zwzJj01KL75Lz74rP237/127z43bT53rX33Lr016704cn3xWb7xlL96r/71ob67d3y1rH/02T/xzX/0V7/0Fr/02b+xzv/yDf/0Ez+wjL/0mH/0l/8yVb9yUv/zkX/yj7/yjv8wjr/xTL6ui7/1Gn7y2T9zln/z1P9zFP/0FD9yU79y03/y0b+yEX7vzf9uiv0rSP/0l3/0lr/0lb/z1b/0VT/z0//zUj8xkX+ykP6wD/1uD34vTj+wS/8vi/5sSf8tiX9zF39zFf+zlP+ylD+zk79x0nytUj8xUP/z0L+x0L8wkD4vT/zsz/6vz39xTj+vy76tyvzriv+vir6tCn4rSTxox72xGb5xlr6xFD/y03wsUj4vUb/y0L0szf9wjb/xC/qpCrupyj3qCL0pxmvmAXJAAAAYXRSTlMADC0nFgkG/verm2ZhJBr99/b26NPQx8XDu7qlm5mPgnBXUEhBPz41MygTEPv59/f39/b29vb28+/s7OLg4N/b1s7MwL66tainpqWiop6VlJSMi3VtX1JNS0I8Ly0sKh8YTqIJVAAAAd9JREFUKM9t0FVb40AUBuCUtrTbQnHbxWWRdXd3d9dOQqRprKGl7u44i/u6AT+QKXDB8zTf5XnnzJw5yM4odZ9liGSUbQ0arU6SCi6ePHJKUywhha1f3bPzZ55L3CkrMsdI4tedTxKkNTttX6Z2F0h2QUpKkVJr5liQuCExh67+O05kfz5Q5A/YUuEGpvULLYX5v7o5RQHTyvXOPNnXpE4D8G+15kXHq5evO2Xb1a4uhaL5nBsQpsWFs1XVlZerau/vzb3x9lFdXUP9+TjgiVR2KW60DFrt0WkNpOJbY4nE9Fic5wmTZ23Z7QhiWJjz7oFUVCHCWhpnOZDKrHiTUYZhXLOb9PAbTrI8HyF/g7nlzIzdarU6XHj2EqS7xkggQJKhEEukMioGNRhQbMi5eBrSLmOYpv1+nz/MUZ75mdHhYTsznly4tkn9+l69Xk8HIvjckihMRMcnBfH/4y3q7euD6LPFgEdwWCyWQQf+5wmkewOQcm0GzMZRgn0ARbERQd0M6en+H5BoHw2NxEXVpMs18ddbk9tG25VR1IAOjQTh6X6WomJBLORMX30DSdFYVnro8An10WMHD5SUUKKqtLz8eFmTEoHpkb/vaH8n7/7Y/ux2dWVtY+sHuby7B0E2AFA+namlsC/lAAAAAElFTkSuQmCC\"","module.exports = __webpack_public_path__ + \"static/media/desktop.7b8c5584.png\";","module.exports = __webpack_public_path__ + \"static/media/mobile.5f830768.png\";","module.exports = __webpack_public_path__ + \"static/media/icon1@2x.3f06eb5b.png\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAABHNCSVQICAgIfAhkiAAAEQxJREFUaEPtWnuQVNWZ/+6j7+33dM+DYR7A8HaG6BpQVyKhMIZExcpmUZJdt7LZiI+tzcPUVq1UnKyCMRKshJSWQSPLxriLRMaNQQUTQEBUXAwTBWHCYwZnhnlPz/T083b3fe3v3OkeZ5jumW4Y/kntrbp1u+/jnPM73/f9vsc5HP2FH9xfOD76f4CXImHTNDMTx67W70OHiFuxYkxr5qh/7Lf1n+O40fcvpfsx30yZBNOgMoD45mbi7Xbiq6uJ6+8nnuOI4/nBkf4MoxifkFlWRgZGZJ2NjWQuWWL9tgBPBdjLBpgGxmNAfGsrCTU1JAwNDdnsdp/fZqNlALYIzyohmHLIpxT/Xfgmint9EHQfrl0A+qGq0geKQkOpFGm46mhHzwC/HKCXBDCjgg0NDfyaNWv47u5umyxXiE4nMVC38DzdCSCfwwB9BejYINo9aBjc7wBwL4AmiotJxfca+jHQD5NswSpcMMCMKjY1NYl+f53o9ZKX49QZdruwmuf5ezGG0gJAZX0VffTpOvdsKqW+bhi2C5EIRSsqLLBMqgWpbkEAGbhDhw4JK1asEILBoN3lclWLongHVOhunJ9hanq54EZ9r+H3hzhfTKVS+yVJ6sTvFJMoU9181TYvgBmpNTY2CpWVlTYit7OszHENkxjOVejQO4XALm5qwDCMN3Rdf1ZRlHPhsFcBcTFpMpCW2k50TArwU5UkEYwnGUbU6fc7vmiz8d9HB9egcXmyTqbgeQJE9MdUSv9pMKi8P326O56Wpj4ZyAkBjqJ+MRAIyKbpcAHc/aLI348OKqZYJSebBx3j6cC5KRBQfstxrlh/f1Oqrq5OmwhkToCjwQ0ODtoNw+7y+ewPANyjk43kSj7HuCK6bj6RTCovQGVjfX2lybo6yglyIoCMMASmgoODis/jkaCWwkb8n34xgLcO/C/98pc7SVWZ/U/9ccMNV9M/P/B18vtHTL0NxFOvadqBWMwZgekkctlkVoDDbElgS5IDgbjX65VvArgfwLd9Fg2N+6bhlT9Qff1TVF5eYp1TdShKktraumjp0mvpxz9+kKaVFWeaNjDGo6mU8aNwOPFhWZkrjPGmMF5mk2NCvVwAhY6ODqmoqNolitoC+DiA476M1sGg448MwPvuu4vuuou9NjVHe3s3bd78Ak2bVnIxQNZBCuy6MxrVn8awWgYHKY7oR8U4ma8cOcYBxMww1RQRbjl53lHmdNruhN09jHueXMPOAFy3bi2tvefOqUGHVppb2i3N8Hrd2QCyfoaSSXW9oui7TFMJdnf7lYaGDdr69etH3McYgGliERAc2zku7pUk4WrY3hOYlcUTjTobwFhMIUVJEIuoCzngV6mkZDjCywMga/+oomjfjcfVDl13hsvLKYlPR1T1YoBMejaERm6iZInDYbsX0vtX3GNkk/PIBpCp1gu/3kVQo0LwUVGRm957d3veABmYVEr790RCfwVcEcB/5iOZqg7HrpneM9KDv3PwvMuHoHmG221/FS9Om2yE2QBu2bKDdvxmDxl6YQA9Xhf9/s3nCwEIKVJXJKKsRkbSYRiO0KlTlMgQzmiALIezQcSQXqpMkrhbZdn288nAsefZACK0InYWfnAkScNclo+KZtpPJo3vRCLqPkmSA319FNu+ndT16zljBODBg6ZYW0uyKCqQnlnpdMobRVG4JZ8BZgOITCDtFwuzQWgMOZ2OggFqmr47Fks+Ain2lJY6h9BAkjGqBTCtnow5XarqKJVlWuDxyNvRV175XDaAe/YcpsPvHCPTKAygw2mn9Y9+u2CATE3D4eS3mOANIz7g9/vjGL9mAVy/3uQffZSkaJQ88XiwwufzrJYk8ZHRNjqRJLMB3PiTrbR16yuXQDIeOv7RbwsGiA8SyaRWH48n9oqi2ePxeCIbNoBsWEs7d5rC8uVk93oVXzxO1UVF0kNQz9X5qGcuG4xG44TOmH7k24z1HnMTpaX+SwGoqqr+X4h+nkM1oFNVnUNIkhMAaHIQr3D+fNBVUuIoRjw5y+dzbADA5fmOLJsErYpSDh/I7Iydkx2FkAzaAqeZr0cisZ8nEmK7KNoHSkspDnBWiU8MhcjN88kyGOkcn096kue5q3MOoPOjMY8a9hyj+p/+D6174HZa+/XPW89OdyXofH+SUfiYQ+A5WlzjpGlecfi+E/Glf2bWrgoEaIBoDofD2kaQ9ycINPoHBnwxC2Bzc7NUXl7uUVW5nOe1eUVFjqcww7NyAvzFWHJt+Jiofj9H6z5v0trrhr/a+DbR1mMcGSMl0uH7DtGkLV8x6eY56dZrbyX6wr9dNkDgMHXdOBaJaI/ZbFyLYSR6Ozq80YwEpb6+PjCma7os8/M9HvvTkCBLaLMfeQA8esGk4z3cOAsUoS8r55k005dW0TTAjDqPVt0CJWgahvlxMJjYwPPGuUTC6I7FPBGOMeg3v0mSyxWD/+MqTNNY6PO5WPw5+3IAIp9Jq+fFtmaiCmyV/6zmf9W5iFzX3k7JZIquR963YP4si2jYUShATTM+hKv4CQCeTSaj3UiIw0yCPFIj2Y5KLcLQSkGQmA+sRwzKCraXLMGc36YfnOol2tZIdCLoJsNRQoIgkMtlp7vvXkVfWwO1LRwgbNA8gvzwGZDNWYfD6AwE3NkBut3Sg0hw//pKATzRbdJDf2BMSvTyI18k/aZvQ2oc7Xj5TXrppTfoSyuXUf3D91HL+QuTpUujh4ig23wrGk38JwOIIL9TUQAwo6JI+4vgSFBiZwmuba0siyuvBEDGqk8dIdrbTPTqPxC9FZ5HzzXaaFHdPLp37Z20f//79OsXX6M3Xv8FDQZDhQDUUHXbFY2mXmYqKoqurkCgNTJCMr290SIUV6fzvD4fJcGViEUfuBIA+7Aq8dgBogWof98yl2jdkXL6m79bTWfPtlqJ7c0330Dr1m2mdQ+tpbpFc/MGCFNLxePaFvjxw+CRZkYyFRUeS0WZtSMHjHhVlSuHSc4TBP7qoiKZlSmcWUHmwaK5JudMPwAeJPpqrUl+B0fPnJ1Fj2/6AeLWRjrV1Ez337eGvve9J2j16pW0atXyAgDS4NCQ8iRioVNY32hBst2LIvGIm4CjD7lV1V5mmtocAKwF0dwDSbJy/PjjMgAmUJPe/B7RuQGTfnYbR083VdHZ1HRyOGRag3qObuj02GPP0kvbn7RczCQli5GxqarxJzDoCyDH07DtT3Rd7j9/HpEM3mBSTIdqPEI1eRaS4VrY4AqQzdeyAtyxlmiwdeRRNkc/EYv+5gTRlqNE/4ga3arVd9Apx41UXFyEWMugLc/uoK7uAO1+fQu1tnXmDRC29xK+PwAbP4e4ux0lxYGTJ08qY4JtUWTpkVItCNwCgK5DFftBDHQ4ORt9HP0V0bH/vmSA7MNn3jdp2zGeli37LLnKKi3fd/z4aav2uW3b4yQj6c3XD7JiMNQT1TUO6ik2m6aKYDuEYLuCBdsj+aAMovFCauWIR+fCUK+y27nboDo34ZWxNZngBaJdCK9iMCgchUqQfRNOchR2z6b6I2WWu2C1mxtv/Cu6/bblVFNTZbWbD0AWoSmKui+Z1GHZfBPKMa3JJPVGo+7wvHmUGg3QNjREKBVSqarGauCX5mNWr3O75dsh0bHVbA2Fq6bdRH96GSADIwD//hqT7lg4kXKiTI4Ye3YxTw3n3BSe+QW651++BQfvoFgsQSc+PkN79rxDT6DIOzAwRO+820jPP99AVVXlucqGUGvzQjis7EKvJzmOPwNivACCzBSfhhPetBRZeC9jdRU5oVIFoCBxc5HdLi2z28WlmGVpzNCT4Ps2GFLTm9Sw/89U//skOVBK8UgTp0FVfpEe/qeltPWdIeqPcbTtP35EBw99QH6fl7p7+mnTpm107I87aR/84Q9/+BQNDYVp+fLrswJE7JlQlNRhSO89COG0qpotTqezG1XBEGpLiZGSRRogW2OXZDnilmVWSbPNhMNciBDqGhDOLZLEz8B7Yxc4daxFBNvoxPEm2nvkLGnQjZwH00PJSb6SElp16+do0+bt1H6hlxYvrqW9e49YtldVNY2OHPmITn68i5r+3EKvvQatwzEf8emXv3QTud2fei2QiQHmPAeAb8MtHIdAzsG02mVZDvT2UnRc0enTsiE5BCHhx+xUQE3nYlwLMDuLUSNdCgpmCw/jRKRqGqUUlCMnq4HyInGCSKjW0YPf30j79r1vsec3vvEV6uzspd2736ZQKEqfnN9LYEEE4GydEwQg8Jh5ydqqkVE4BNa9sL13oaInILkzsmx+YrM5u9rbA+GFC0sVvGcVf7MVfqWenqgHlbUSUZRmGoYOwjGvQpRzrdMp3gDQ9omtLL+n3/nu49TYeAqrUhuo9qrZqIIn6TmsUL344i5LghMdmPwYKmgfQHKNSG7PgTWbUWrsCIdTA6o6EKupqUmNK/ym1ZQBFljxF7rsCYXUSodDmgFGnQ/BzcXML3U4xFp8nE7H8wOT7a0DB4/S9dd9hjwe15jHr/7uLfrbr+auVjK7SyS0JtjdB5j4szjPC4LZqmlcP0r3zPZyl+4ztogrY1QHxyWL4TyniyJXA5UA6RBAikxd50CSzCAmL6xc+hxc/CUydjOWSKhnUD07AcaEvzNb8FI7xtIF5x7q6vLFJ1x8GSVFRiYS/KIHalosikYlKjooYXBz0PBs2OJCrDohZuXYiuRU7qzINR2MUIIglBZM+GkQTOuw5IRWjKEb5D8QCnXEq6urmWpOvHw2CqSIVSaZ4wIeQbCXICZHCYMDs/I1eGcmGp6DnHG2LAvT0GjWdcOpEB5UMgVwvVhgaUZZsB1ttvK82cZxQpum8d1wY4MuF0UKWgAdpaoiW5/H5gMPzwvFaLgCasLcBU4DIPkqnDNgl+zK1g+nTGVZEQkZegjqiGUxA4sqdAFc0Inbbdibg/9cjyxrA/G4M4ryICvAZt1xkXNAabdhlRSxeopNCHG3IIjFhqGi8iawghRAmpV4rxI2UAZpzoJtIkDgJlxqy0eqkJoGImkDOLb5pwcq2QPT6EB/XbqudcHn9dnt/GAaHCMVtjkg6w6oCWc8A5KtOiF9kLHLwo2opgiEU4ZBIDnmp6Pz9EY7QqpllmDRtBxg4WJ4kBQDy/rN3U26mmZV/SCxGLLyQahiNz4ZhEL04wqAJgBSF6TWiwkOmGYyhB1jTHITgmOTOalKMZANDYRNd1bAjfJizAWQUEeeMSx2D5pIks1pAApbNJGnc0V4D/vXCATF+xjbQuI2zLrIAOPKQd0sQExS+C6Fgm0MbYVwP4LnYdwfwquIJ40+fNML1ezHfUT2QlAQ1DCqZUp/fxn2yOSWXEZTJgU4inQsH8l2FhqGG37SBgfGA4iB0rQB1SUGFpEOj5SLgTTdGDzeMe2QtA2AGBExxmXtMLEytrMA4jciDzMOIAhweUjHDOLeANqFtHTsQuSC6DpUXOyIof8k0iBrY95EG4AKAph5mUkzvb1EDAZJ1rQYckXdbbNZEgUo3qfrahEIx4tXsZBquDAIkBTb7mUFBwImBAk2z5J1ADTYBp4kJKbAxmK4RsHOYSZNtDEEVQ2ZphjGPMREMakUFxcnsRlQx2bAcdtFctl2XhIc/XFGZRctIsHvJ+wRDcmoxoGEbE4AxWZXHlIzID2mmpwDdoMNDZwESdgw+BEJ4j1szSINzMwAJnC1QDJnDjuO4hqHa4hjDwyLK1PYCKgtWbLkym6nHAWUlTnY38xuKLZ4KqVSNhkEIwOIDLazY8+nDJASThtsUkCwwOzYUlE4aQaQ1TJVBhIMndS0BK62hCTp+K2lfD5fqqmJNNiatfs3TVYFrcf9H+gKQiVv5Fz7AAAAAElFTkSuQmCC\"","module.exports = __webpack_public_path__ + \"static/media/icon2@2x.7af338cd.png\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAABHNCSVQICAgIfAhkiAAADy1JREFUaEPdWnlsHNUd/s09s6fvIzaxQ5zghJAAcSiiQAJVQkRRoWqTCmihqEWUCopKKQWqiqRVS0vDpUI41EO0KkdSkJAgFBBHAEEgMdAmMUmwiRPsOD6ya+81O3e/tz7i2Lv2rr3kj4402tndecf3vt/9Hkf/5xd3MvB5nsdt3Ejc3XcPj4ZnwrPHcZz3ZY9fdIAMDCaduVtbW3lNW84tXjz8vaurKzNefX09A5a58Y63fPlyd/R7sUEXBeA4UHx7e7vg9/sFSZKEVEoSq6vDpYJA8zjOqeM4oYYB5Xk6atv2EccRD+k69dn2gGNZFU5tLdn4n4F1OY4twOwZnhXAEWA8JsR3dZFYX09By7JqPY9vlmVhLX6/BHftNGJ41HXd12zbe9Gy3P1E0tFolGLoaxzYmQOdEcDxwHp6eqRgMOjXtMBXsOproVYrIWYLAUouUL8sz6N9nue+iwV6JZ1O7ojF/HGwam3dSu66dYzVwoEWDHDDhg38ypUr+VWrVomDg4NqIFCySBTp+wCzGncDY7NAYBNfd7GAXVDl7aZp/9kwkruj0bDe2Un29u0bXYzPRDjvqyCAGJhva2sTKysrZU2r1DSNLoN+3Y/RSvIesbAXhyC2vzQMfouu9+v9/f3m4sWLbTCZN8i8AQKc0N5OYnk5gTWrURCEG3ievx7zFQubc8Fv29DRx3Td+YtlJTshNemdOxut9es5J5+e8gLIwHV2dkplZY0+RbGXw4DcglVcgwGkfAYpwjsO9PNV03QejkRSH9bWBhPo08IcpgU5LcBhcCSJYswXDIqNoZD2BDpfhs6/bOYmrosNkHvSafumSESHMRpKwZ+a04GcEuCWLVuEFStWgLkyH8+rNX6//A9YyrOLwMiMu8CC/ycaTV4lioGjkQilGhuJgcypkzkBMoPC9Asy78N1iiiKd0LnrpzxzIrY0HG8F8Hkr44dSx2aOzecRNc5DU9WgMzPIYQSGxoaVKxUWSAgXyMI3G1YqVAR5zmbrtK27T5g2+YTqqoeQ0c6biebn8wFUGht7VGam0NBUVTOlGXxXojmGejkhPc/7XdItzyC48KN+Ao3HskZ+cz8jkaZ3/Ew+o6LKGzyuxPbEoVUolWNMgWUSdNkcew+x6E7EBB8iNBwCN+z6uPklmCvrY2kQGAI0QlXUVIS+JEk8T+dCI4t/84uiza8kaTumJeJnIt9NZXx9NDXA1QfFrJ17TmO+3gqZT/kunJvOExMVJllPWEq2QAKvb0E0dRLRJE/PRRS/gr26rKNwBj6pMehzR/otKvbLjrIaQCyKfWkUs6N6bTZ6jiJQQQg+kSregJApnuMvVAoFoDOVVVV+W6FQ2fOPOfFRO1g1KFHduj0+udWUUnMAyA5jvN3gLwnFjP6db030dTUxER1jMWJAPmeHlJlWS/FTOvKy7WX8FmRa9abH30aSpnJa8iEy/0QIvtRD5jMQ145xUfKMhYr5L7yAQhSjkWj6cvQS5dlxaLV1dWMxTG3cQLAN998U1y2bJXftmNVmqZcHAgoj001gcZ5q0mSREIyQXAhmVcZtoThAXBulJ4Dpl2H1POvInnZauKE7DFDPgDZmKmUdVMq5b4Gg9jX0dGabGlpGROlMYBMPJGsyoFATUhVlTl+P38LctbrpgO4ZMkCuv6H36ZwSTDzqg2Zbetz6Lm9BvUns4P0koOUfucpYixqa39MQu0CwqpPGipfgJblPJVMGpsMw9cdj7cPjRfT8QAhnj2qopSUYayGUEi9B3p4wXQAL7ywhTZt+jlVVZaNvcpA7oML+d32FO0F2GyXeWAH6dv+RMKcBeT/5p3EScqMAYKcXYODxq347ISYRsaL6XiAwsDAgE+SgpXQoSWhkPwbnueWzgTgaJueuEt3v56kD7pYcn7i5dkmpd/bSubOF0haupp8qyfbsnwZBLDPEgnrF+m0t1sQlL6yMkqOWtMxgLt27ZLmz5/vR52kFo79HOjfXSOZeU6MTAezMTi+wZGYS/e+HadX/v0OGe//i9xEhMR5Z5K28hrybIv0VzaT072P1DU3kHz6KhRsjvu8AgAe1nX7167rve84ek84HE5g7hk9HM+g3N0dD/p8fJ0kySt9PvE2MDh3NgyOtn3/4w666spbiVP9xAUryDlygMRTl5M0v4WsQ/8l+8D7xPnCJJ99KfHa8WiwKsDR1ctU+tal51J5ee6cGgweTaedPxqG8QZY7K6pCbDIJuP0MwBHaixyIkGhdDo11+eTL1FV4ScAWF0MgM88+zLdddeDdNYll9HAnK/Q4af+QK6egN4hnWR2yDaGh2HWdByDPGanCBw99c976ayzFuWcClTqmK6bj4DFFxGIH66q8g/i5Yw/zABkdZZrr71b9vuTJTD3c1VVuljThJsBcE4xAO7Z205XXHEzVVSUULC0lDoOfE5eRQMpC88j59gXZO17lzhZI6n5fOJDlWNDVvg4unyRTNd852tUXZ3THTOC4OSdh9Np61WI6eFEwhd58smNJqvfjDLIyn6KqqYAkGtQFP6rYPFmrAArIs1KB0cbP/7EFnr++dfINC2a21BH5rnfo7Zei+IvbyY30k3qhd+F42d1q+NXATqIkM16CCL6juexWqsWQdnRYA4/K0BUyVoCAfUWgG0qFkDUVaij4wtKGybNPaWGehIeXXfzfdSzexcp560nBfo30eHnC3CYNXMT0qdWVQ12IhGOngBwooiKIncGsvefIdjOLfhAno8VzbVA9z/wJD2y+Wmac+5qip99FXkScqMJV74AkVV0AOA90L+9qqod6uuj6EQRZUzKvb2JMKKYU1zXWRQIiDcgDDt/Ogbr6qroggtayOebPMFcbZNJnZ6F4Vm6dCHdd98dtH2wgv72kUEJ88TIJ1+Atu3sgB98FEA/zWpkRiypHI/Hg7rO1yuKdJos0zc0Tb56KoAtK9ZP9feU/5UgtLv99h/QmtXnZd7btt+kx3bqdHiQpcPDV74Add16BiWMF6By+wTB3xUMUgzRGPzgiBVlnR139L5aQfAW8Ly3PBhU7oCi5izB79y5e8YAfT6NmpvnEdKxTB8svPsYmciD7+m0p3c4vMsToIlS6b2I3luh5wcEwelpbw8nWlomO/pMqOa6UpWiqKeCboRryo3QwwUzRlFgQ5ZAD6Q8unVbgnYDZD4AUSv9HPq3GQD3oDDWYds5QjVWRRsOtpVyjtPmwoIuEgR+LQpOl2OeJ7UGaiGb++1bSWo/5tDv1/hzlSwyxKdS5jZELy/Bp3/qeSqC7d6cwXYmXaqpaQrZdrLOdfmFEM+lALgOVpU9F8jH7F6PI6d877BF59SLVKpN3s8BIWRZXjv07znsX3wC9vabpnkkleofamxsZD4wo8oTM3rGlB/pfxXaz8NW1hKU6c9HZLMGjPpnN+XCW1tImgVg47MsLuaXQnj2hmFYbwuCuBvgDlZUBHtR7sye8LLhmZj29vZqoVCoxLLEessymZgu9fuVtaisNU9ckMKnXLQWnmky32dsw8J/Ake/L52mLkHQIJ6UHl94mlR0YmKqadUBVeXAIj9fkrhmnhfO0TTxYhic8qJNcRYdAVAcodlrYO9DnhfbUIzoQJjWl0wG401Nw0H2aPdZy4bYh9MEIVACMajjeRdWlBkcYQX08UKs2OTUexaTLbQppCydTNo7LMveASBtANtOpH2BIvDg3r2Uvugi7oTsOmvhl7GoqlV+RDUVPG83YIUWAlgzIpsW5IkteD6pVnV0EQDORkrUCsPyMeawF5nPAcuiQ7Js9Pf1hZIT2ZtkZMZ1JMBlKKIYYtlnDTprFEVhAWqQixRFXOHzSYuwesy0nSzTCmyeaxj2fiS2OzEPHFbgEbV4nbZNRy1raKi2tpZZzkkFoGk2X5arghDFMRC1Bh01Aig7XNAEg7MElvU0FKUChYrYTN5HhJJCKLbfMJw9GPMzxJvtSE4+FwSDndCIHjx4UMdZG7bDNKmMN+322dDQENyDWoqOal2XmweLfSqihlMhrqepqrgAPhKBwZdDJPN12EWKgjWAsvcB1EGEkB1sTxaLfQT5fqS/vz2FMiErT2TdI5xyZlu2eAKOb0gIwv2eJ5di5QDSQRLMYY+eB1iuQZb5+RBbGCOuqNvZDBv2HI4gFAMgrhPMH8TNPg/ZtgWxpAjbyt66dSv269fn3MqedunZFjayfVkQ4tilYiBN1Gm4ehRQWLZ/CrwnwPG1YHMeCsWlIFMAcNbvtH1PEFemZ4w0B6AGoW+dANbteU4P9O0wxjnEToM5DtcLgFHbDiSQ1M5uC3u80WEgw+E4gnE5DLGpgNvAiSYPu05OHSZVA0hVYLUSvhKWlw/hU0M1X4EtAuDhs2oTAbHYAmbewW2gTx2fMeR2Awj0B9CuD/0CnHsEUgNxFI+IotaPPqE1hP15MtF+2sNBea8yYxIdSuhdk2U54LpiGSZViUlVY5UBkK8CceXQ1VIGEPoexqcfvykMKJ5xD4sx2rBTTQaAmMyv4XsS31Hq82J4HoQhAUjqR9uj6LuP52WAdSI4JxDHPiDbzWU1z2nB5XQTuSwdO5Swbt06IRKJsKzDp+suAwJACsr9HspeHur3HHamvBJMFC6Gw+EFUiFqKlhk4EarumDNZVYvjd/YbhA2L7k4mAJILorgIoI2xxhQLBy+2zFEKikchkhD55ypdG7i3PNmcJy4Zg7fjbCp2rbsg6EJIDYMY1FDEFMGLASDhO1v8uHTh4kqcGNInMVMWgBwLt5j7IFFR8dzBiBj0HH4GNwQTjh5+O7EIZYpsMYWYpS1vE85FczgOJBsYdhkM2KLWx4YSGkwMhqI8SGGhdV1wB6vDbPnQhfZeyw3wLQhm2DWwv8GmIaIumBRSOFO2nZa9/vFlG370jhqaWC3yIYbyJw8zObncknb6O8FMzi+w5GKOM6vkYB6rqgoJEpSXDYMQYaRgeXlZFg8GWImAZBoWZnoB5cHBslGDgdd9MxUKm0JQthAe7O/P2ppWtpCZMJAMfM/I2BFAXgcrMdt2EDcypVv8dj35pFu4UBsPY/KPCu5CDwfF1DMGrWmbAfY0zS/MzQUc/3Y7jHNUtuyutxYLObgsJ27cWPmVOHoqeDpSJry/1kxmKNnboTZUdcw9okjYZnxGhvHCmdjR5kZreyeiRhOhfDLADhpvBHAk34vNphsQE8KwFnJ2Cwb/w/0s8KikbHdAgAAAABJRU5ErkJggg==\"","module.exports = __webpack_public_path__ + \"static/media/icon3@2x.ebafb9ae.png\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAABHNCSVQICAgIfAhkiAAAFItJREFUaEPdWnl4VNX5fucus2aSyUZICIQlSglqrYharOLyw62IrYpQlwesULVi60IRd0ArWFxKxVpFq6ggQkXbAi4oBRVrReTHFoQECIvZyDKT2edufc9NgkGTMKj4R8/znNyZ3Dv3nPd82/t95zjwP94c/+P4cNQAWpYl3n3w/UuWwDF69JfLye/gd6vtP/bV4XC0f//O1v07A9gBkA2svByS1wupb1846uogSdIBzt9hj9fYCOTkWJZp5lsFBTD5L5PPW2VlrZ/bQX8XgL81wA7ApMrKStnn88mqWihnZCRyVNV9EiH15ZzziDDAiYvuYY+ZphkEpGbea7QsaXsqhU3RKFo0rcaIRqPG/v2lxlln2WCtbwP0GwNsB7Z+PeQhQyA3NDSopunx5ua6T5Jl+TJObBh7AZ9zcoIyP7d3MaZQRaOt67wm2atNE++Zpv732trY5uLizBT/p/P9Bt8vnv1GQI8YYEeJVVVBycxscqpqjtPrNUYS2D2cyIDvwIA2G4YxKxaLvZNki0TyNKq6WAizTZpp2+oRASQ4SdhXVVWVGgj0dctyssDrVU6l+k3kwD9uk9J3gM9+hcb+vmFgnq4nP4tGXXU5ObakBVAhzXZb7Xa8tAG2gRNqpkYikQyPJ2MY7WsM+0Xsmd8Vqk7e00DVfVPT9IVNTfFPgUissLBQgDfSAZkWQIKTKyuhBAJw+nzxTFV1jVUUaSIHOVZI9CiCa381p2BtZuSZl0jgtVgMkWAQqdJSaIcD2e3k2uxNoq2pWVlwKQp6+v2YylF/yp7/PQA7ZAjOp559UTSqPanrrrrsbCSEyhKkcEKdtsMBtFUyFAp5vN6sUlXF3fx+Prv7+wbXYbwWquyKeFyblUqpVW0gu5RklwCFWrY7E4cjmeP3q1PoTMYdbXDhcAwulwqnU+1uDWO6bv5F16U58ThCjY2VidLS0k5BdgpQOJTy8nKlZ88ytyQlcjIynFfLsnQznUmPoyU5TdPw/gfrMe/Zv2Hun+5GXl72l0NZwmFyqq1EqL19oWnm7w0jtTwScTfX15cnlyxZok+bNu0Q7/o1gMLu1q9fr/Tp08clyxkBr9c53OWS7qeeH3O0wMViCaxd+xnmPrkQDY1BzH/+IZSW9mkdTg8xYNQCLn6XBAnqgNuyNhHk9JaW5L/z8rwtnHdqyJAhwiYPxsnOAAq7c4bDYZ+iuAe43crv+INLW5fwyBoXC8lkColECqRmttp5PC6QEBx8kbi/Zs06vPjSP7Bz134+n8S8Z2ZgyEllDARhoPktAmygSxsLKB2k2voGyzDMV0Kh2EPJpFVnGKFocXFxqqPTOWTSbbFOoVPxcckCPp/zCoaDu/iiI4pzoVAY5dt2YevWStTWHEA0noBlWrZt9cjPwcCB/XD88ceioCAXK1d+hOf++hqyMv3IzQ9g2T9X49LLRmDwoH7wSzvRx/sxSgYMgq//TZ0BFCBDmmbcSs/6r0DATW6LOLuwx9YMpX0p20KCfOAAaHfxLEWxCjMzvYuo9mlTL2FHH320AQsXrcC28l3QDR0+rwcq3a8Al0xqiERiEM8de2xfnHHmyThQ32SDvP76MbaJPfvca6iva4SQvlNJ4PgBBm65/ic44cybuwIont0YCunjdV2rE6q6ejWSJOqCCNg5m90WL14sDx06VM3NzaX0nHler/obOpYbeEvQs7TazIfn4fWl78JJMKcPOwkXXHA6+vfrzdQok5OXEIvFsXd/LVa99zHeeWetDeLii8/BoldXoHfvQgwk6PPPOx3h6rcxY/Yq+DMcmDpexfCzhkEp7lKCYm5mKqU/kkgY86h5TfX1ldEFC0q1adMcpg2w3bGUlJRQer4Ancpgn8/1Om+lFe+ESk6983F8+ukWnH32Kbjul5fZaigkFaf96ZpuS0eSZLjdTkpUQTVVlwNj1ar/4L5pcylpN6688qe4+AwJt9zFbJjtjnEKzh+mAP5TgcJuAYrHG0KhxBhqyA6n0wjm5+cLEmDYAOlapXHjxjmF9JiX5RPcFZzI9HTE1tQUwiOPPI9/LluNceMuwU03XQlZklBDABs2bMN/Ptlkf2YMRVbAbzuPE3/4A3sBwuEops/4M5Yvfx8ZGS7kZMmQrAgXw8TNYxSMGk5woqUHMJFMmlPCYe1tpzPZkJmZGeEvtXYJ0vYOeJisZjJw9goEPA/KsuO8wwFMJJJYsGAZFr6yHBdeeAYm334tolRD4RUXL34LVVVf2PEsJyfL9pzNwRY0NjTD5/Ni1Khz7Pur13yC007ui8KsOuys3IuA38RFp8sY9sMvPW2aAHV61FcjkcRjVJwaTQuFSMqTjlb1hDJgQNDncHhyqEqD/H7nn2mgbYGoa5ibNm3HjAf/ggAlM/vh2+GlQ3n77bV4Yf4btrTOGzEMg8sGIDc30AqwOYRtn+/CG2+8h42bdkBLaZh43UhcfZEDO8s/wPzX63D5uTLOPaVNcu1DpydBYdIbwuHk3fG4tV1VY427d++OO6ZNs6T774daWxvJdDqdPbxe6RKXS55KgP7uJBij61+4cBleeWUF7rxzIs45+1SsX78VDxBwca8C/OpXV2Dw4FLb3sTI8XiSC+DGjoo9VOm/4sO1GxCLxjF10hBcP3IvNmwN4u65Go4bIGH2rc5Dh04PoBinmo7m8Xg8sUJVrTq/3x8WEpRrampcWVlZAU1Tiwjw14x9VxKgqzuAe/bWYObMZ+gZE5gx/WaUlBTiuon3oqa6Hg8++Fv86MRBtt0tXvIWli5daTuXXr16op5hoXzbTky66SosePEFqFYzHrtNRW7AgYee07Bhu4kXZzhRkNvBeacPsEXXrZc5p+dSKas6P98XsgESiKe2NpHncqGYpPoWhodRBNgl2xUS2bjxc9xP73fuuT/GteN/jmoCGzf+ToygWk6fNonMxcJjj7+A+fP/jh4FTMUZA+tqG+hMvJj06zG45qcG1rz5Mqb8ScPka1SqqYyn/qbjuTd0PHGHimEndFDT9AHGSN2WRiKpp4hpX06Op0kAVJpp9yw/9GDWXBIIeKfQwZzDBzpY+aGyFAA//PAzquNTuOaaSzD68vPwFm3vnnvn4L77bsQVl19A57EODzzwFI477hhMmHA5niWJFs7H6VQw9YZSjBq6A82hOH5xVwojTpVw81gV7/3HwPRnCJjhYex5HdY3TYCcZZISXBEKRecqilFFrWwQAJnvIUPXUz0lSe+Xmem5mwBP48NdBnh6K7z77keY/ejzuPGGsRh18dl4/I8v0psuw5w/3oUzzxiCBbTPp59ezBA0Cdl0OI8+Nh852V5Kvhyjz2rBxEtlEQZxxR1JnHCMhCnjVGzcYWLKH1MYeaaMeyZ0sMM0AfJ9rFVZq1paYo+R++5SFH+9o6KiwlVQUECArkKW7AYwRNxFgEMJsEtyLYjz6tWfYNbDz9pB/Wc/O5cOZzken/MiZs28FRdecIYdF2fP/isuI6+ccN3l2LhhAyq2fISXF63GNRcZ+MUFChIpC2OnpnDa8RJuvVrFmk8NTKMEJ12hYPyobyRBU9eND8Jh/RHT1HaqqllHgJYrIyOS6XI5CdAozcpy3qYosqiQdSlBoaLr1m0hA3kCl/58BK6+aqTt9n990wx+vhi33zaewb0B9943hxnCPoygnerxGmzetBmZ7jBuvUpBWX8Jm3eauP6BFK4ZqeD6yxS88paBR1/S8PjtTpw99IjjoLAjnQBXRyIGVRQVlpWsEyrqikSQ6XBoRbxbyvzvRlWVh/PhrwSjQ+1w+44qTJv+JAp65OCOOyYwG8jA2CsnI5PXWTNvQ6+iHqilU5k5ax7+/7P1cMkR9C8yMeFSFT8aKEGRHZj0cBKbK0w8/FsnTjxWwqznNaz5zMDz01zoW/SNvGiSTubdcDj1nCQZFUwYag8CJBMvooqWMkUa73RK53fnRQXUUEsEzzyzBCvf/Tdm/+F2nMD059XFb1ItXyBlG4WJE0bD7eIkG1/H3o3zkdAsFOU54PdJ0HSL0tIx83kdlwyX8NAkF/bV0f7mpEjzgIUPfYUCp22DViyVMt6MROILJMnRCvBLFXUUkvGLBHeMy6X87HBxUKjpe8wKHvz90zZjmTz5Wia2SdsuV69eh8sv+z/8/BwJ+dYyOKW4TbZJoRCMWPgXbe3l5QYY9xkSnMhnDHxxuY5nXtNxC9X3Fxd8JUKlD7CFfPSNaDS5lBgqyGrqhQSdX3wR9iuKo5Dxr7/bLZ9D4nsdhZRxOC7ayPLCnDkv4UPmgPffeyOGDx+KOuZyT/9lPtZ+8BEC3jCGMjEvyHXYKnmg2cK/NxnYWwecPFjC3eMV5BDc+nITf1qkwedxYMYNTvSkpA9p6QOsYwx8Sdgh/clOUrZ6x9atW529evXysUJVwHSmH0V7gt/vvpXXgsMBFPc3b95h0zPBaH73u2sx/PRBqK9cijUr/4FVH7dgT40FjVVLlT6D0QVF+Q78+AQJI8+Q+VnC9j0GnlikY1+thdsZ8MU9VflGAC1W2iooPeaE0iZqzC7TjNtxkIG+2SdJ3jwmaCWm6Rjk86m/pB2elA5AoaoC5G2T/8C4ZmDC2IG48MQt8CkhHAhaqG+yEBFFBD7ndrEsl+2wJSRArNtqYO6rOlqiFsMCc7/TZHjcnUSn9CRoJJP6+7FYaglNbRtHrDLNmM1kRJnCo6qJXH4uZv+Bx6OOYB+TDkDxjAD5+ee7ccfku1BXH8RZQyybnQwpkxBgVm4XR/iHWoEQbbByn4klKw18ssUgaOA3ZDHDTyY4LkCnLQ2AnIMWiWgLmWSv4UifC6rGBCIoAEok225VzQqwdsJYmOJ+g2NwdrZ3Ch/qtvp6yGQaliBcNR9zaUtLVxlgLos+hUBP2p9QRQGkjtLcX2dh537LVtmTBkm45zoVA3ofpiqSBkDOJdzUlHiUK7lNkqwKZhPVVMwWG6AA0pouoYdpSv1ZqyljVj+SadPp7dvOXUrTIJLmFcCBhXy3zkhLae4xsfJjE1sqTduxNLW0/trvbQXcp5BbUj+RcepxXdLdI3UyJkv578fj+j859+2mqexSVWddZiYiBxPe3NygLzvbw51zrYR7cj9gglqWmem+imr1tWLkwdHb65aNf6cHYYH2K62pxUSQpc1ozLLVlCVRliUcttqSDqZrAYctWZA6NrL4+zIzmC1M0SroYPYahruR+4mxgyULHhRwa1pjgLZXRLMsZdgY6HarZzOeCCl+falFxTn4DgP5PwiO2+1Hs3WjojR/LR5PrUqlzLWUHp2Lsot2yJKFlyULJNsB2moaDiMjlUr1YFbRV5TqGTZ+xB3c85kA05o6NLFXkKggwFVkfzwycbSbZyCQfSETuK+HZhZ998Zi+jJKrZxgdzAr2qeq/nqhnpzWwaKTvR8hyobcj8immvZSFLUf06Iy8tJTyE+HUVVZL21rIs+xWJUzRWXue2gi95ZowKytdmycXziR0N8n//yEvmSHLFs7IxFHrap6mvPz7b3D1rKhaIsXWzIP5ghn4+duUn4qpfWRJOUYnmYRqjqMDGcwpfqVYsn3AK6LIcS2Bx3LZ6wUcFsb9JxypZAey54NyaQ/0rcvxB5Fa+FXtPbqWkmJXboP8HtPPtCPel3KwEmQyqm0xwFUhW6zjO8Bsgi7OoP6DvaPOXOmRfIOznUPs6E6y/K05OXZ+xOHlu5bpdhavlfVXB9Lh9n0Sr2YIpO+yaW8fYzHI59CkL07dTrfA7I2QdBNmHsTCW0dVXQHveZOkvjdrH7WuFyuJpKWWMe9+6/uLonvMj0qk2BkRCLNPTweZ5GmOfrTBilNlFKSJ7KuUsTv3VbdjgZeLjh31/Td7FspxUqKcifDWRVDzn4g1RgOZ0S2b0eqfeNFzKGz/UHu7kLp0QMuscskSWYeV6eYuPtQpfuzWtGPBOAYAu3P7ONLx3M0EHV4J4l0C3M9hgCDgdzaS9XczdtVNKFqXXdwoyMWzsvLS0yfDkNsurT/tNNoK1R19OjRCo9qeOLxYBa9aD5XrMgwHCUEVcKV6+10yv0YPkpIynOPpsoSjE4v2UBwu5kG7aE7ZTf2EcAeEpJqTUs2uN1in76x0336LumEIOHiEIIkZXucTov7hc5cVt8LaY/FzLVoh+AVhQwjvehle6uqJILUEdCT7kXOBRXpT0sspu3leNWcTw3H3s8x91KTqgmuhovd4HC4WxoaKuM8hNDpcZJuJ9RWFBaE28MDOH5uTeURJA/YoYj/68UrqwCOAoLNpSR7EyhLjxIP39lA29+dDuiD50YFMEotQXZCNmJ+QQ9+gGlYPd9Xzc/87iBYnedl5CaHI9ESDAYSDAliR7fTszKHAyju2ywnGAy6YzHTzyNcAXovArUEMAG2JxcinwPk8rlsAsxWVQePUirMMYUjshTek1pJuyWudnrFZgowbMJexM6QKNryOKXeTCk1816Qzzaw+k8wjjpKrZbXetaNGujNgx6PRzCVb3cQqD0+CpDiKFdOThM9scsbj5uswikEY9H+rHxOKI8YmDALYm5l8eonDi+7n2pECgIyJEFHLFWA5X2DBFmnpDQCSfAaYWdaIrqD9NxBcms2C4AERQdiNlJzGMD1oNcrt9TUJBnnmpJdqWVH5U9HfWwSwCPIEpmOffKppibMBVR9zLS4A2USlBkg0BymWjZASi6TE87gBAVIN0EISRKc/XsxpsjShM1oBErGIQKzQwCM8D1hOrOgLJtBFhuaBFDaeZDqGlYULcojlgk6FK2srEz8/rAnDtMC2L4ibbmjUFmlqQlOXY96aAte2h+PnEh+ejRKz/KT4mVwTRhCTC6C5REVOmqioHkEyLSe2klV1kUmwPsJ3o9T0lGqZ5QcmAA1StEM8//sGWGeGI2z1plQlJwU7a393OhhwXUaBw8XzoQ026Qgr19fo/bv71Z5Zoyaq3g4SQ81z0tJevmYh8VXfndQgiYPFck8EWwelCDfQSolpQg0yd8k6CHjvB/XdSXmdps8qmXFebAg4XRqyWg0O1VcbAM74pO//wUX+Aiavu+sqAAAAABJRU5ErkJggg==\"","module.exports = __webpack_public_path__ + \"static/media/icon4@2x.0d00af4d.png\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAABHNCSVQICAgIfAhkiAAAE01JREFUaEPtWnmQVdWd/u7y3n1r9+vl9UY3NM3SrAqCowhBjDEQNXFcMCkzNVQSJ85MJZOMk5hyiYKmXNDRiBgToylnoiax1WhcURFERAVaFKGl6W7obnrf377fO9+5vdB709D+k5pTdeu+d5dzz3d+v9/3W86R8HfepL9zfPh/gKcjYcMw+idOnM3fO3dCWrNmSG/GoH/it/lfkqTB10/n80PemTIJ9oHqByRXV0O22SAXFkJqb4csSZBkuWvge7qeyVdgeL3QOSLzKC+HsWyZ+dsEPBVgzxhgHzCZA5Jra6EUF0Pp6emx2GyeDIsFqwhsIe8VUDC5lE82/zv5TpDX2ijoNp6bCPRAIoG9kQh64nEkeU6xn1Q/8DMBeloA+1WwrKxMXr9+vdzc3GzRtHzV4YAAdbEs42oCuYAD9ExCx7rY7w5dl14iwLcINJqZiQTfT/I7Or8jJDtpFZ40wH5VrKioUDMyFqhpaUiTpESRzaZcJcvy9RxD9iRAjfoov9GWSkmPxeOJV3TdciIQQDA/3wQrpDop1Z0UQAFu586dypo1a5Tu7m6b0+ksVFX1cqrQdTwWCTU9U3CD3k/y9wEe/xuPx9+xWq2N/B0XEhWqe6pqe0oA+6VWXl6uFBQUWACXw+u1nyUkxuMyfjBtCoEN76pT1/VXU6nUY5FIpMrvT4uQuIQ0BUhTbcdrEwI8qZJQyXhWXQ86MjLsX7NY5J/yA2exc22ij0zB/SiJaF88nnqguzvyYV6eK9wnzdREIMcFOIj61Y6ODs0w7E6C+6Gqyj/kB/KnWCUnmocUx9PA476OjsiLkuQMtbdXxBcsWJAcD+SYAAeD6+rqsum6zenx2G4guDsmGsmXeZ/jCqRSxt2xWOQpqmyorS07tmABxgQ5HkBBGIpQwa6uiMfttlItlXv4P+9LA2AIk+KQ6GMmaHUknluTyeS7oZAjQNOJjmWTo/bUy5YgW0Lr6AinpaVpKwnuZn53ae8IprBFfECwAxDnqJ88rAIOuk/N1Xu2j+pKdY7x43hcv8vvjx7wep1+jjfO8QqbHBLqjQVQaWhosKanFzpVNTmXPo7gpLWERQadwtZcAVS+C7RXAT1NBEiQZBOkFwDuHMA7Gyi9GMgqpi4R+NAWJ7s+FwymtnBYNV1dCDP6SXCcwlcOtBEAOTNCNVWGWw5ZtnsdDsvVtLtbeM09ZdDCPcAXbxHcdqDj2NjdKpxP7xxg4Tpg7hrisA9/ticWS2yMRFIvG0aku7k5I1JWtim5cePGAfcxBGAfsSgMjm2SFE6zWpXFtL27OSvnTBm4JH11+V+AT18EYiIknahxiDbO7UX/AcxaRRUWtHCyCVWNRJI/DocTDamUw5+bixjvDqjqcIBCehaGRjSAWJbdbrme0ruR14b2OtGYxrt//EPg/cepkg2T6yWN3HbNg4wxvMPfS8XjyV9Go6nnyRU0ZggfKVS1N3btf7pfevR3dll2ehg0F7lctr/yQRrDFLUAk4edjwDHPzq9Dku/Cqy9ecS7NNumQCByFTOSBl23+w4fRrSfcAYDFDmchSKm9OJeq1Vap2mWh05vJGO8Vbcf2E4pBNtPv9sbXiLDOke8H4vpPwoEEm9brVpHWxtCzzyDxMaNkj4AcMcOQ50/H5qqRig9o8Dh0O5RVYUUNjUtHouj5ePXgN2PI8eWgE09TW/zzV8BM88bMahkMvVaKBS7nVJsyc52kMUQE4xqfqVPPQVzOhMJe7amYa7brT1DvzeZfG7UmWhqasPnh6pw6POjqDqwH3JbJUoygEVU/IU5EorSJzmBK74HnHvdqGrq98d4E9W6Hu7MyMgIc/xJE+DGjYZ8xx2wBoNwh8Pd+R6P+yqrVb19sI1OZhjd3X58cqACu3d/gqrqOtRUn4DdZkGhLQw12o16zm+Y+cAMTt8cZo9fmQ6cw8g2y3EKUr3gB8Dy74w2nGgslrw1HI6+papGi9vtDmzaRLIRTz73nKGsXg1bWlrEEw6jMD3dehPV86rJgBLP7tt3CG9sex979nyK5qZ2UM2Rk5OFyy9fgzUXnovCwEFgx8NoYsCysw54tRJopacI0nMU0BOcVwSso29fUTQO0HW39vrEkS2RSKT+GInEfstqQGMi4ehhkhxlT4ZEFlKOHet2ZmXZMxOJ5AyPx76JAFePBVBUi6jzPJKor2/Guzs+xiuvvoeW5nbz+qxZRVi2bCEuu3Q1Fi2aA4ulLwo5Rhex/b97w7K+9lmzgTeqgT0ngFpKVuGIckhzAui6WZQy1dlC56XyoE0B//QHIJMzMbIxZTReCQRCD0Wjar2q2jqzsxEmOLPEp/p8cMlyzEsjLfF4rJtlWVo8vI8YiaK9vQutbV0oLz9squCx4w1gyIQZ0/Mxd+5MrFq1FMuXLUJGxig5cDuR7KCbaGGINqz5ogb2M1r7oB44Qm8mwAqnLACuogovZ/SWl+dFzr//DzTNOhpAnZO7y+9P3pNK4XgoFGnv7PSETIDV1dXW3NxcdyKh5cpycnZ6uv1hztaMwb1EozG8886H+NsrO1BRUWPeKizKx4L5JVi8eC5BLURR0QSJhohiDv6Nkcyfh0hx+Ggb/SyztTDYaQYq6FHq+0LUeaUz8M3vXoe1a1fCbrcNeY04jFRK3x8IJO+0WKQaXY+2NjSkBfslaG1ra6PJO/M0TZ7jdtu2UIIioR1oNF7cd98TVMWd4Oxg2rQcrFx5Di6lGp61eA7tzd6rQhO1UBf1kWom4lBdlFdGb1GS0OdtBl47ysCH9lrbYzDR0HDllRfjjtv/DU6nY/iLhq4bn3d3RzfJsl4VjerNoZA7IAkG3bABVqczRP8n5RuGXurxOEX8OXNwD8LuamsbcfhwNfaXV2Dv3oPw+4PIzspA0fQ8nHvuYqy8YCmKi6dBUSaoPXUzTNv7dC/IQS3F4KrOZ2AP1VSoq2DbjqgMizMd7YEEzWAaHvr1LzCrpGi0yTSSSf0AXcW9BHg0Fgs2MyH2CwnKTI00Gyu1NOcCRbEKH3grY1BRsB3RaMmIRuPo6vIRbBWee34bPvqI7MgJyMvLxsyZhVShVWTN5fB6M8eWqgi0a/fB2PUoOjt7sKsW2EYTraGAGwMGSBg4rzQL39mwHmnTSnD/g0/By8l88om7xhI6bdDYw/xwK989arfrjR0drtEBulzWnzDBHRkujNL1B3sO4JZbHsLZZ8+Hz+enlJtMInK7HWTSRfjWty7CKqqyYNJ+NiVTQxz79x/CC2WvY9/ezxEIRZHhtqIkxwZvdgbeLm/CIw/eiAu/thrHjp3Az256gMSVjid/f+dYABl0G9uDwegfBEASX2MkQoD9Ksq0P52OhCV2keBafqBp6iUTmZO43w9ww4Z/xIZ/voKDaTDdxiefVKCyshbBUAiZmR58ZdUyrF69HArL3rve38/FmH2mFjgcNsybNxNLl8zHRV89z1S/srJtuPe+J/HIlptxIf1nxRc1+K+fb0amJx1P//G+sbQiyarby8Fg/C9CRVXV2dTRURsYIJnW1mA6i6t5spyaw5LgJXTSN0wW4Pe/dzI2CIXCOHq0jvZ6GFVV9aY6CzcjiMhKaS5YONu01/PPPwuldC8u10nSePbZ1wYAnn/+2fjTn1/H1q2Mnulj//riFpTQDEYwjGHEw+Hkb6gZu8gj1YJk8vPdpooK6mMOGEhLJKRcmuRsksTi9HRNlClGUNXwjvsleMUVF+PG/9ww6pwIG6s8WovqqjoR92LW7OmYVzoT2VTF0dqjj/4Jv3u8zJTgEkp28/1P4KWX3jXZ+9Gtt+Gyyy4cBSC6enoim+k9D3N9oyYSibaySDzgJujofa5EwuY1jGQJAc4n0XyfkhTl+HHbm9t2Y9Om39Avabj66ksYvVxoSma0JiIfUXIZiGyGPVRf34Q33txNFX0TzS2duPfun5oqes+9v8fzL7wFJrbYfO+N+Pa3vzGi+0RC/4QM+hTJ8QiV5HgqpbUfO8ZIhk8KKfaFajJDNW0Gk+H5tME1JJtrJwK4a9d+3Hrbw1zQM8wBTCvIwTlLF+CSr19Au5o3VtQx0C0XWPDZwUq8/dYeMzpqbGrlOxq6GLD/+sFfICsrHXfe9Rhj2kyqeh3tdRbu3/wz03YHN9res3T073ICWcGK1nMyOw8dOhQZEmyrqkiPIoWKIs0l6AWsYv+EnYyo9Azu+J3tH9HxboVmt+DSdaux58NPUVNzAoxlUViYa0p0ydJSzKFaulwiUZXAeBE1ZMYDnx7B66+9R1BtiEbiVN0irDjvbLy9fQ9aGdfe/8DPybYp0/5+/KPvYsfOvbTrWjxE4LNnnwy0RDGY6snqmkT1VKsNI8Fg28dgO18E2wP5oEaiSaPUchmPzqKhzrPZpG9Q9VbykXFrMlsffRbbqFrtHd30g9MwY0aByZANja3oaO82C7lukohwDcIGrVYLgsEwfV0KXkqmoCCXrsFDF9OMurpGM45dsWIJfnnbv+JVTsCWLU9j/TVr8fHHn1GyPjxw/00oKeklGhGhRSKJt2Ox1A7aH4PcRG0sxiQl6PLPno34YICWnh6wVIjsRCJUzFBtDleOlrtc2qWU6ITVbKE+z7+wDYcOVUMkucwpMZ1AGUCgkUCF8Q3YIAGKVshwTwQNxxmwi6hIBNMLya7rr/k6SklCool8UpDOkcrjCNNXXnvtWvzL9dcMqD593gm/P/IyHz0kSXIlifEECbK/+NSb8PbNhMhpNK6uMieMTCNQJivGQpvNuspmU1cIdp/IHoVE6pg+fUbVO3jwKFXwCwKIgWVouJx2Ov8+FQ2GTAkKnygIZ+nS+QzYS7Hk7FJT+sNJqLqmnkHBYXDScdWVl5jqLxpjz2gkEt9F6X1AIRxJJIwah8PRzKqgj7Wl6EDJog+gWGO3alrApWmikmaZTodZqijKWSSci61WWSRhp7TAKYD6fEEzdm1p7TTVTkgxEo6ZuwscZNwCSk+Ayc3JNtUtPd3FGHZsSxDSF/f7A3rOmU7mrCLA9+gWPuNcVdG06klQHa2tCI4oOp0sG8KuKNEMzk4+Z2wWJTeXs3MOa6QrSMFZJktMoolcUTh4wbC6njIBKizesiTC2bSaUjyNJgLrVtrebqroQUquUtOM4xaLo6m+vsNfWpodYZ9m8Xe0wq+1pSXoZmUtS1Wt0zkoEo4xj1HOEodD/QeCHsrPpzG6M32Fkx9iBW0vJVdOZakia1aTuBr8/nhnItEZKi4ujo8o/PapqQCsiOIvddnt8yUK7HZrERmVCwTSLNZJV9jt6ny+PGIl5EwHfarvC7uLRpMVtLu9nPijPI4pilGbTErtLN0L2xu7dN9vizwLRrVLUiyTzjNPVaViqgRJBwSpCnUtoSRFGDcpdT1VEGM8x4zdCEWjiUpWzw6SMenvDFFaqOdYzKWppiZPeNzFl0FSFIZhpV90U00zVVUvIHHQs0ol7HgmbbGUq06MWSVReDktI5okWEEo3SSUGk74EZF790pOqeUYWNjQOn2+hnBhYaFQzfGXzwaBVLnKpElSh1tRbFmMyVnCkMiscjGfmc6OS5gzztQ0JYedTu264SD0VMk4wbWSpKoZ1TDXR60sG3WSpNQlk3Iz3ViX04nApBZAB6mqKtbnufnALctKJjvOp5oId8FDJ0h5Go8i2qU4i/XDKVNZUURihu6jOnJZTOeiCk6QCxp5uY57c/hfatG0ZGc47AiyPCiWsEfdcTHmgIZuQgA3IYRdiqJm6nqClTdFFKQI0ijgcwW0AS+lOYO2yQBBOuOlNkotSSKpIzix+aeFKtlC02Ahx2hKpZJN9CxtNpvc1QdOkIqoXo26A2rcGe8HKVadgC6NuyxcjGrSSTheDoLJsZzHj/dttANTLSOLi6a5BEsXI5OkBFjx3bE/I2JTMTgRU1JiIWblXVTFZr7C6ozUzjMBGgSIJkqtlRPcYRgxFhKzheTGBSc6nlClBMiyMnDTnRlws7wYchIk1VEWDMvdgwaTZCOH46QtGlxpkMRyCvevgQQlewTbUuIWzroqAPMsUd1MQEJSfC/Ogm2Iffl4PcD7fl7v4aOMJ/U2vtNK1WzndVZIlW5FSfhZLYu0t3u5R2ZsyfWb8YQAB5GO6SPFzkJdd9FPWhhYygSiZ3IgVF0IsIx0ZKZcAqTh4uD5jGGjpC0EJIhIMK7oR4hVsJ0JkL8ZeRhhAmGpTRZl3m5e62S/lFaKuxAlpiSKLzPTHuL3Y0yDzI15E+1yOiUJDqZzIc2+7SVqdze0ZDLEXDHlYnAsJEpQsieVSqSTcNL4KFcYdCcHQZIS273M4EDhhDDBloVeEqAuNvDEKLEIbSzEc5Ds7BfSZB89VFWfYahcqkmGVDUWyczMjHEzYIqbAUdsFxnL7ZySBIeDFCq7cCGUjAxwj6hPYzWOJGRxECg3u8qUmk7pCdWU7LQbbmiQrJSEhYMfkCCf49YsJMnMAmCUZxOkcOa04yDPYbqGMPfAiLgyzo2AyWXLln252ykHARVlDvG3fzeUWDy1xuMWjQSjEYhGtrNxz6dGkFYeFtqkwmBB2LGponTSAqCoZSYESDJ0LJmM8myJWq0p/k7GPR5PvKICSdqaufu3j6wmtaf7/wBi7aIli8B8QwAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV0AAABACAYAAAC5t6RGAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF7tXQl4U8UWnrn3ZmkLBcpSaNOkIG4obigIKhZaQAUXVNSHCy644YrKKk8QFxRXUNz39xQ3FHeBLoj6BBdAEEVFSNIFylZo6ZLk3jvvn5smTdMkbaFEoTPfB7TJ3Jkz/5z558w5Zy6UiCIQEAgIBAQCcUOAxq0n0ZFAQCAgEBAIEEG6QgkEAgIBgUAcERCkG0ewRVcCAYGAQECQrtABgYBAQCAQRwQE6cYRbNGVQEAgIBAQpCt0QCAgEBAIxBEBQbpxBFt0JRAQCAgEBOkKHRAICAQEAnFEQJBuHMEWXQkEBAICAUG6QgcEAgIBgUAcERCkG0ewRVcCAYGAQECQrtABgYBAQCAQRwQE6cYRbNGVQEAgIBAQpCt0QCAgEBAIxBEBQbpxBFt0JRAQCAgEBOkKHRAICAQEAnFEQJBuHMEWXQkEBAICAUG6QgcEAgIBgUAcERCkG0ewRVcCAYGAQECQrtABgYBAQCAQRwQE6cYR7H9iVzPefdfcM7H7ZTWKb+HYMwbs/CfKKGQSCBxMCAjSPZhmcy/G8uqrBVZzlzaTvYQ9d9Xwvlv2ognxSGtC4My5FvLFrZ7WNOSWHmuzSTczMytT00ingCBe787fSkvXVIYLlp6e3VGStO6BzylV/3K7vylr6QE01l5q6tAupaWLtzZWj39vt2f3YkxL5D/LMtnudC51NuW5vanTtetpnbds+ZpbltrePN9SzwjSbSkkD/520kc+3VGi8lzGGNYJfbx4V+l8snSGevCPvGVH2GzStWdmv0oJvTJIpkTtD3JaHi4W6o1BvdcCn+uEXVLozHunZcVv2FqHDjntkpPZhYTQbEbI6ZQyr8uZFyT/sCcku33QkYTKYyglfEydQ7/H84X4/RXVq80vKSn4Ez/r+yK/PTPndkJYFmH0JMi1hhLtX8Bu1760ua/P7ivppqX1STSb2yarqmd3UdF31c2UR7LZhrUnxJOCbc7Y7IBLJWOmsqKiRRyXZuCdpWRmkk67dyvVZWW5uxuXo48pNdXSISHBLIXXxVi8RUWWckKWNkoonTtntUlKIm0a68/nk33FxXk76tfzy1xeXl21c+cK9Ne0AsOnfXW111xa6oER85Mv8FRKSr/k5OSExKbMhc3WP0FRLO0iyxVZjvSRzx0rUbaaEebCTKWi1qe6T/13iTV1I3nvIm/TpBe1DjrShUIewYjyW93UMmck0uVkIZs7XE8ZmQDC7RZNFbCrg3vJRsLIbLc774V9URlHZg5vq7awLw8G0sXmei8216FYiB+7nXmzmooPPwkpCr0agAzFM73wB4sYWFO6GVj/DsVcrKrslYZEFbkHnFIupBK9E3KsdxPtRuJcWhNLFpst+xhZoQ+jDki/fkEbFbDkfqeMLcKcfxqrHYcjexxkvryxcTMdcrnzrgqtB5l7QOY3Md4fKioqpjWFeLnemkzt/4s+EzSVTSoqylsTaNPhGHwmI9JUYLfW5codF0umwLyh7htOZ+6zUfUf7Lr5urSEtBdKqgKkq+v68ZIkj8DSuI5QkoT5f4MS/Sn3B+M2NoZD6PfVkzIGEipNZJTyk3Ozuag5ff0ddaHNO2WmPWl9uHBRaP/NHug/3dJtKulmZOaMh4nzIMCwNnFCvCCISW5n7pNNrN+g2sFGutx1Y03QirBeTCBMHzYROyz3Rv3C3CJrm9x2MZSyD0CSCGXfYPNbwQFjlPTDX6fiR1i57Os9FXvOa5yMepntjm7fUUpPQJsaYfKxbveidTFJx551Kk44H0J2GfVC6rIO+OxILgmKB3O+jDLPlS7X15sjtYfTyywsosnodzW+3xOtT0rY7y5X3tjQ7zMyso6WZGUtnq3SNW1wUVGBgUFsuQePopL0HxBeBWHaSLd76TeB+tD9rjpT3sPvAzAXo1yugg8itYV6JzMiL8PGssHtKjmOkF+jWqmVk7u/CDxGwcJ992zn6Dd+99i+3iNL7cve21zR5Zz2nc2y5WnM3/moU4mN5Z5i09ZnyHszGrV6K293dKMJ9Fc812DTawyDA+p7RnySph5pfaTwr4DcfxvpOhwDu2tEOQIaf0JAGG5dYK395nYXhC8YKSNjcHcsAvxhmaif6q9LscBr1gV8xSDScyXGbLACng6ZmK1Yvdfx3yWm+WpqPD/iSJkCa3gZPgp1J2yFofUtFv0faFuF9XsoLJBs/NuxTj62Udd85xUVLVvLPwPpJFksvuMolY7Dc71BExYicQuJrNV1uqqwcMlmHOOsVEni1hzYhSwMysXYSsj/mE5JJdVZldvtgjwbeIBCxqI4VNeVY/BAD8p0GfL4MPZ1Xq/+y+bN+W7UCbGYe1oyM23dfEzuJumSq6bGV26x0KOoInflfRU6cz+KpaT74F6gGY7sR2Dl3AZxtgCnVEj1CIjl3+gvqlsgNXVAF4s1MQ91euBPPiXeiS7XspCTCSHQjSMZNT8BohqMsS+SqHp5LDdMRsagYVSS34IMcAewBICzClb3YLQf1V9uD5IuWeF25Y0IxYhbk4qScgGV2DiQWz/o0+Jqol65LcKGEiBdlWrHFW8q+Lk5hBAgXeMZxj5zubTzYrk0OnU6pW1SkvV1yDMScm0PJ13eTEZm9iXYxV7D97+oPt/IkpJl3EUWLOnpWTZZUZZhHXXCvoLNJDciMQceqJrSI6hrO9XE6se3n5ZwitV9yAXPflZr1c6Q0kemngUiuRPP9MWcrcRY7tM05ZuST66vioZH1eSMiwlV3m4OXgdqXUnXR1gfdn0WkP9vIV0cya7BYeIWkM4REMQSEAaKokKhNmHnf7fQVTLTvwNnKRmZ0mVQpNvx+SEgH8N/hp+5JbQT9X/SVW06txLqW5KRpojtwir8l8TIA9wqCqmxQmX61GKX5VtCvqiNzPa02O0OHH/oQizmRG6NQKFAjHQqFHWVYVXo8iwcD89CO13q98Z8IKBvNM13m2ZSys1McsZWGOasIlp/tsdXmZhoHY82/4X63A8dig38pXQdLJhnYcG8wtuzOXJGy4RdBhm5e6Qb+rwfK+Qw/HxhwGXicubGnOO9JV1+NMYGsxCNd9WJPlEi0r2Yj2qvhw3DxgCfX6SSpTgc8j3wIUyFdfS+5iM3RXMfpKXl2BUTeRPk0I/p5BYczZ+P1qbdoTyOvm+GUtyG4+pQjH2EpmpZ0ImvouEei3QDz3AZTCb2POQdApfDk4WuvLvC22sp0jV0n0lXu91L/hNd5sFnG+4IQttGI13opZUx5Rmsr9GwPB8EblhHgYITgT3tXnw3Ae6Ad6qq9Ou3bVsa1TrnT4WSLv+9RpeJherLVUmZl2z+/V06gxhWbeez5nW1WuiZ+PEO6GMGY/qEog9vgpUcuVRPsV8Oa/uNet8qUHdJqftIxx6qNjNRwpRAiK+ZoQUJpl8bbn9Bmyu3Y6sOusljL1v+bZtO2DvMhO2Buz6KrExjI5NmO4MG1z6TLiZ2SIVCfwiXro1ORsOyeybweW0g7V1YRzdKlM5rdDSMPe5ybZ6Snp56pGKS+eJpx58xjo/8b1iE/PxnfEbYDwh2nWUyK9tit8t24dFHsTDvD9RDS5Vg7zFFrtwFtZ9B7KxgcMVup/zo1M7jUd4qLfVCA5ZyK07HxoF2KN/djeL3/VIdEvHjqv8z+NaIzs7DQgkeLSLLx5yEeQcQYoJ/UJrWODbapSDet+DqedJvaQZl2AhIuAUZLPuLdGstqlcx6vfcrtwrHI6cD6GzZ4Egb3a7cyMutloiXQQiPcTn1dJKSpZCw6MXtHkB2nwZfbwBa3cirN0Gflq7/dQOhFqBL9sNi7V7RubgG7BBzwX4C2B1j/ZPQ8PSFNLlTxnWZZuEDfixC9NrUsIzcFqIdNdAfdIwl9sYqzklSpaPbHfk/MixgywbgUl6JEuXy8zdN22S2/6CkXeE3/d4bGx/8M9ttoG9JdmUDx1pC307PvyEEQmncNINrQNgP6jRPLelbCreTN8jWtrZzyfKknolkaUnuF4UlZVeGS27IRLpmkbOIjTjWJBXrXdCx3buXknUPHj0PDH3BkMs6ZABRBk2kXifvwjE2aiHwz+U9unENHwakToBVrAJKysmvk/vJWyHM5ZqwhxKIsrwe4jE5eUeKsinLppN9I3fNXiuxUk3tmR133LS1X36ekWBH40aVpxROOnhH24ZdQVhIYodLNuwgM9H3Svw+bW1n27TGYHloZeCuHOgpHxnNeNPOcifL9DreT0oFbIXgj3U4BiVD2Kuwve8r9147taQ/n/VtcoTeeSdR3RlORHBDu7Ti1ywOP6E9TDX7sguQj/p/jGwIvTxPqNsmwR58fzhwfZ1MgZW3dkR5NoCC2oFHoYvlC82+h2Os5ysgtYtWt7F/W747EhgkFQnM6vGkeAUhTKeIRIk3UgS7y/SBSECU9IXFuUpxcUFPyML5Cgc8VcC5wIEss6LFMiyZQ7tJxN9qc7Yy7Aab46Gcd3nvcwOR8eO0fypvB5IbwbIZRqj+thCZ/5rDsdp3Rix/Ij141FVbSSXLVI/TSVdQkbJ9sydj3OdgXU42unMnx/aXkuQLvT8ObiS+EklB+O4mY8jXGZsJldRJr0EXXoJ+uWA3vSJRrr8WRgFl0LfESCj61QfG6Gqco0lQV8AXE7HOMZhHK82jn9DSzf8GZXKO1WdPn9H8TlrcvccwvtEdg75XtfIXSUf37gqWh+RSNd8+YtEW59HtF++9D8mK0TpP4bIh2cRz7xzsRxiJLPAWjVf/z6hie2J+v18on3dtJi3ecwrRN/8K1GX+u1D6cgcYj5rGqmZMwyDj57hqpx5N6EJycT3+QOGZUw79SDmy54lnudGEVJRWm/YfyvpSoz2xEKdCQIxLEmQ1f90jY3XdWkLMauJCpNfBpHB4qstWJyoD8Lxf2akcOn63YzJeeCqRFlWRsLoBClJ68vLy0oUpa3hw0tMUirqRs1KMVeDq6s1tySZmdmq3i6FWLog8Q8KXbkX8Po8FQdHHiwqekY0ZcEm8Qssu94229B+yEM+Do7iwYgYL4fvdC4XEYvjOhy1g9FgKPkdlZWqYfmFygVyWqKr7CqPR99tMlXoiql9LsbZv27oLB/YTJFlXyFj5qOpRHhAwxH4HsT1GHBUIpEucPoYfuWv+b4Na+/lWItrb9wL8EWeSCXlO7hb3kb7wcg9LO+3Ic95TNdgrRX8FN6v3Z5zBcbxOhbP+S5XPoJY+1YyMoakYaPimQ6FyAM/K5BXbaTmMfIY/Ox3YV6eiNRL00mX+0mNoOvj0KOHYMVPCW0vQLrAmscY6s61jO2Cn3d8sXMpD7BFLMFAGiFP4kT0FKyFtSCtdaq3LKuk5KegP5T7YXHa+wwbe2dN00ZKssT95gg41g+khXbCLfTEpAS+QZwBkp2OzTsJ7U/kc0apNjbSqSGSkLEs3aCuEqo+um2g98Udfaswt5N1TfkI/tyYp5iopLvmE6L9/HFQFNohg1gnfEWqH+yHMGWMgyzqcQJVP5tJTCNmEM/Tw+FmiJnAYvRhufVz4l04jTBY1EaRTUQ+7VqirYAXpzp65qH5hgVERUxd34BlVluk3sMJK14Dp2c9NzqmqaXdC/B1RtqCQCDcORPMDOCWLhbHpViUhtUH8toB63RkYWFeUGp+OQGLEg5nmlk7jtWYxFyQ2h0Bog5ONMORnNJlIK8PdR/5OtQ3GJYlsAV+UJ5L7OTPoo+JOO7zVCGj4PlPEHTBNkpYk0iXsLWofwxSng5TFHYDZEDApr5vOlR5ofDjYVUYGQ/Rshf4hROQPc4l1Ah+oXgREzoWMq8PtGWz5fSWFQYi45kCfrmB4VZY/NfUYUIqYSmBaPKfC5Uh1s/NJ11Yfo4ynpd9BMZ2LsgzP9A+rKtBII3PsZEVFLq0c8KDQpmw1jCXr0D4EfCLBwMLTZU1rB4CeTl3Q6fgo2RPuZ0a/K3+vFqeO5uYJG8A0VTALdE7slsikL3QMJAWLg82k9ugt09io5sXbqHXkS5xYz7qzrSUlcFAuDHS5hNoP5R0kRUzHrr5IPRpEsZ0LfAx/PYoFJ/fgnXxKMbzNnfl4JTF09hiki5/MCMj+yToOp8fBGIJnJ1st6ZKFxcVLYnq6w4fe1NIlz+zXOul35L6wm/UZJ3kq9aW/T6pc4jh03CGm0y66b2JBQRX8+BJMUnQdM5Mw2LVfngbFu97xPcJXAQlvzSqWqZR8BK260Z8IFC2fROc1hC7CX5kecCVRDnpEuL78mGilyDuz58zSL6hN6vlSZewqQhp8YsD9QqsjCwQwk2BDznpwtc2Gb8jRcUoKzRVv6CoKL84UMfwz0mWd6DgQ2o/W406I7Czz4LSYBH7/bqhBYqOTAP2afluemUgKT4W6UIRL5ZkWhc1ZWSzz0dOLinJdfNsBKtVn4xFfGJdHxTKSk4P/s7YhwiQTZdkM4+WH93YrO4N6eIEsAr+ydBAn9ENFvgfWJCH+vtkX2J6S4HVmIAMwOKbinIyommXA/xPNZd000GsCjUW8lc11VUXlZb+L3jbD+6ZFElJmg8Zh2JXHQwruCAUH1tmTha8XwXYbCfBRTO7MexifW9YubK+ENbfUTAlhoLcEAStK7CqEeQkk3VCbyx0LmmwCTXD0pXgSuHBp2mQ+/rwXO0A6eqaPgz5q0iB8hdF0TSXaweiK9HTscJJl2/kOFF/Dp5NwGbRh6ff+fNyO3yD/nug/xPQ/8amkq6hM3ZsGBJ5xNismT4Nm+RD+LjJtyAbJ11IxcjPSxLPWHhPhwd4ls5RcJsVaJr19l9vT+CZNhFLNNKFMUHYVu5Rg8TWZPhp+xNfwTyir4qeZEFT7MRyI4h5DmLasIZp937ENHQC8b6Ao74R/olRzElE6jWEyEefCb8uvJ6cUL5/i2jLEc+M6c5QiHToQCIfM4LQbkcA3USi/ryQaLlz0Fn9PlucdGGRNflGGrIGkCZC4RIwyh8IppyDm144lvmLzTY4XVYkHtDCWcIoq+GTPB658+aUlLbWxOQ2A2RGT8SQhoHweC6nUYxMBsbGc18r/z0W6Xbpkp2akMhTzYLPanh8eqErn+fsouk+pszMtnXBMCYj0k75cc7fFywrECncD5Ihoz+LgqwE0SzFRqPiWH8YFgiCb/6yl6Sr6lpVcugNr9rjYlldoC4S6SJB3ZUf9FcHZIj1bzNJF/7N7FdA9Fdg0HdEOrrzRQ68HgUe77pcKjaEultdDsfQ7oCLp4sx1VfWO/QIHUlGbJCnwVKbA1yfKnSW/Tf09pXDMQg+fBlnQFaAyy84S9ZPU/NbeYSvVKtEtUPDU86aSrrczy/JSXnAvT/o5SjoWJBYucwt4tOFe4FbujxTx54pP4CN5C5s/I/gRDUZp4c7QGJIzSOzYP0aQdbmkG6tIfElFPFUl1PFKanxW3ahcxGbdFkVZHs00eKdQ2YUlR3y0M7kpCR2J2WUu2Dmr9nZ4Woyg0a81ReVdBEA07fUUgKyEFjhaqI7G8Tp66mLfNp1RDn5cvhlkSnKSdbShpiG3Em8r19D9E0NLsvWVzWeMRGwbBPaE8nWm5gueoJ4XxpNWKkRf4xc4IYgGh+avz/u0zWdPZ2oIGt9dV1mqMERLe1eaB7pSjbsY7ODPl3C5jBNmo181i14F0FHs9U8FmOAz9dwTXAAn/F4vDPMZnNnWBGdiSLTIqcTx/ANHij7ZNS9G235r2AyMh9KyaPV9UgXc1CmUzZaZt6fkUqTUlFRXtS2XfuHQRxG0M3fDSnDX9wF8L6q7nKWlBBfenr77rgxdRGU9b6QejtR7xIQweK6z9h2+MmGwYJYydN1dCLztoPEF410Yc3+BDIYq6rSNkmi7eDlfg3P4QzlLziiP+rzeGbj/Qzbu2ZmOSxMvg9kdllQA+DTBRnV8+mir6vgyngtqqJE+KI5pMstMwTLoFG0Gyy7w0JPKYGmbbYhh8IN8i0wrUAwBTnNuUZOMy/82J+QpMzDXF0GEpmuaZWPRbs6bFygaNuGp2uNgs7cg2M9t9CCkRRYnwswN8Ph9x4S6qIK9GVsUm2sbwLTYUzXx7rd+fVSsZpCuv583XYTcBlhBubrfZw+YDrVLy1Lutzw8OOHXsogN8hXgg+WbVB92vDi4qW4iNI80jVSyIhxCeSMxoKqkfQmEumCZspxW+8LbKAPJz3kMoJlveZtbSOrykCsx7vw/Sn46J61t6YE3XjhbTfVvdCoLvMA2i2fImugPrlK8PGyyjLiWzAhZhPmmz4i3hcvhUOvLjvCfO18uBueIGzT95GftbQl5rFvEt87CB1sr7uEp5wxCUccM1E/DVKG8fzfSrpE09bxRQtS5WkvhiWPhcMnbTMmEQlvRu6s4Qf2kyU5HzcDHsDnnfA7T6QDz5AndF1dKElSFhbkdLTlf/kOY6/gOGv4N5Fag9Qpf4ZEbT7vJtRDMjlrq1Fyp+7VfjSZlCXoO+DqCID7BxTGCVJAoh7DRQx+lPf7UP19kPk1NdK11gQ9NH8FN9XYfOzui5G9MAT/not2cavJX0JJF3KVBPJn8RV/jm/pyK5AHjCV76dMexVyBsbPAymr0ABInTgwjqN54CzQLjbZYySFXRMaSNvfpOtwDOHXbGcHrLAgLmE/wBp+GDMFC43hBJHHTxDB4g/CyV8YY2H0MWyUwfS90Hpo4yF8zzMctvq8+qDQ3F9uAcNFtITnQuP5nGhygJhHQwZYyGRBVWXN1du3fxv0MzZGuriMg5xw6S4E6rhObVR9+sWRMiFamnT5WOAamc7dGSDbYvhxcdmH3AdLmONkuAWaY+m2JOnCVUNWmvuQHtqGs9O97q/o7O0Gnr3mlh2vEB1WOI9vsG3Im5zpq9I+iuXXbSnSlU+4EK6BYcT7RiDBqVYbTFZiuelj4nnh4phZCDxjAncPie8LqCn8slImXBPn3U+8TyEotivo+WygYsoZU4jUva+RvcDTy2jHTGJGypv3A9iC7vox5L+VdPkLb5CnOxVpVTPqkVnYkHguLhbLc1iwt0GpPwBZnh3IyY20wDh5wyoYXliYb1igCNhM1pmECxD+LInQwt0DUOAZ6Zk5J2PVw7dblxEQbfHWEvdKT822LP5GNRDCc1jw18WSKdBWPUvXMWQmxsWt84Zy6exyXDboCat5aixs0K4HfV8NsmmQp7t/SRcXGzIVroVWWEwNfOuh2NVe8+WBpRKe6REgi0AdHjDF+uXBHNz2Qw4zI/dVS+piuUbTTFZzNjYumApGPuoOfHd62JFecmRm82DrIHyHfOVgfnXE6QNBbQDeXUCap4WSZpB0KdmE/nCxgxcd6YcUt+HIyViJ2fgAZ08ExJh+CXzG3C3SoASvAevkVvQT9d0DwGI3Mh+CV3Z5Q+E+3dDG0a4bm20G+kduue8E5NQiyuMv8STd6qk9+KnlGO5q/cp6+qvTUmbdWmYxt994fYfytOdJQop310SJ6RP5m4og2pteqkxZf3Ny2It9GuIWiXSVnPFGnmu41RptXXKTRjlzClwIK4iOVLPwwrMQyK7NRFsb4/UZSR2JcvoNREo/GhYp3AXIt9WW/5fof9ULETQUQTYTeeB1RIb/GMYfVEcl2soFREf2RXj520mX+0xtjvZXyITehFnqHWq9cXLD7xt0pv9HpvrT3A/HLQ4E0l7Cd6eG1g0ZWDn04VnVu2tmqI8Q5P4yrMCL6+e34nhKkczvzL3EUF77kGwi6YgW04H+BRap8Dvu9P2amqrJgaAR3oyVIssqf+kIv2oa+hy/q88XS22wq76l263bYIfJTJ8GWde7duq3+Nm8qj01/05okzAW6jsWcvOXwNQrqLcKG9AckNDrhvxhlyP2J+kCz3H8UguwngtfY8zc4FrZ5nA3C/wB4+D7bfBCFZttUD/MK24lcv987WmldrTGbStCFsGF8VT4+wiQD3wKfLmLgc8fHqKO3NLI6zfh+x3Nfb/A7kVsAMZ1cP/c+7MXGvZtXCUuhZ78BStzmUS8OEHVEV74nIRkL0TnBnyD/n9E/0H3Ea8cm3Szx2A1Pwt9mgbjAzfu6ko8SRf9U88EW0+N0sq+tjWdZbxlTPcyOzUZNzHHYR564t+PVY3M+/X2lHqbSixAIt5Ii4nggfvlPpNuWtrADGqRg5cYmKf8z0gBEZ6JoMkmewAqE2Ou0GCGETST+TsLWF/Maxe4F/BKP/17n4+uwFGS+64CEVaKYEBnc4I2ANGtQfB1ImOAJmNR7MAzy3BpZYmm7VoXLgP36SUkJB1PZQ0WC/Vf09W1AiSJL+eZCgG5eMQdL2w6EX7Vi6Bg/f0uBVKDn5GuRpdjtbzGc3zDr0v635Kl94NbwH/xAfKjg3wPZb/iqlzQEtSq1RL4ZYMJhv7n5L4Y60DYu+0lXA3CKsfdY221/27/KDktrSxdNrMT8B6JgYxKCSDhHXjPbwHe57AeflQeBDSw4RgyE9wytYX6agrhI23W//7QVJ8uzxUlZtqReKWiprz5i4+TmHUb88hloXiHLh3u4zUlEZuiS4eC/Iw5AuFuVSX9T18lKYp0RZWn9WEO7ZJE9mDz4dZfI+HpPqb07sm9JJXuwUkoeDMwNfWYJLM5pbuuGC+8CRbqQ7iXaFW4WLEb88Yttpivl+SXMXAlNuwaeASC8ErVgZthgW/50R+5XIdLqrINcY2S0KcC8hUWVsAFVff6Rl6Hv7cEue1JeJf1pkjvsg7rnaecdddkvW1z3w0RPoqj5pYdy0kXAK3nLi9o/Vqmand7vWxFYyli4W1VTep+EfR/v7/q9Z9A1fv87oV/wiCEDC2HQFNJt+V6FC0dqAj0nLsjOVHCCZXR8+EGW4iNbN7q8R326n3QlRMzkPInf48tM41fIT1QMWlcbrbLq2ontt+Xt4w13omocSAhIEj3QJqtg0vW8olphyuy+XmcKEG83DF6cBUMaDPeojfWOqu4Xu7ZQTfQg2va9v9oBOnuf4xFD9ERYKOIvLlDmiXq/yKDkG+gAAABQklEQVRwQINX4qMv8Eyo+kWQ7gE9qS0hPKNvfPC/zhvXeHfOmDGo0f+epiV6FG0IBFozAoJ0W/Psi7ELBAQCcUdAkG7cIRcdCgQEAq0ZAUG6rXn2xdgFAgKBuCMgSDfukIsOBQICgdaMgCDd1jz7YuwCAYFA3BEQpBt3yEWHAgGBQGtGQJBua559MXaBgEAg7ggI0o075KJDgYBAoDUjIEi3Nc++GLtAQCAQdwQE6cYdctGhQEAg0JoREKTbmmdfjF0gIBCIOwKCdOMOuehQICAQaM0ICNJtzbMvxi4QEAjEHQFBunGHXHQoEBAItGYEBOm25tkXYxcICATijoAg3bhDLjoUCAgEWjMCgnRb8+yLsQsEBAJxR0CQbtwhFx0KBAQCrRkBQbqtefbF2AUCAoG4IyBIN+6Qiw4FAgKB1ozA/wG5eisxziAamwAAAABJRU5ErkJggg==\"","module.exports = __webpack_public_path__ + \"static/media/snappy-selo.501b6822.svg\";","module.exports = __webpack_public_path__ + \"static/media/logo.f34953e1.svg\";","module.exports = __webpack_public_path__ + \"static/media/peoples.379cba23.svg\";","module.exports = __webpack_public_path__ + \"static/media/certificate-trial.f6756aa2.svg\";","module.exports = __webpack_public_path__ + \"static/media/cut-scene.558958fe.svg\";","module.exports = __webpack_public_path__ + \"static/media/aspas-quote.7669c431.svg\";","module.exports = __webpack_public_path__ + \"static/media/linha-site.991e81e8.svg\";","module.exports = __webpack_public_path__ + \"static/media/selo.a96a4832.svg\";","module.exports = __webpack_public_path__ + \"static/media/snappyFooter.5addb04a.svg\";","module.exports = __webpack_public_path__ + \"static/media/gestaoTrafegoProfissionalGoogleAds.f8797155.png\";","module.exports = __webpack_public_path__ + \"static/media/linguagemJavascriptBasicoAvancado.21742bf5.png\";","module.exports = __webpack_public_path__ + \"static/media/redeDisplayYoutuber.f078bf87.png\";","module.exports = __webpack_public_path__ + \"static/media/introducaoAoWooCommerce.61c3ae5f.png\";","module.exports = __webpack_public_path__ + \"static/media/criandoMarcasGuiaVisualConceitoDesign.a73a0269.png\";","module.exports = __webpack_public_path__ + \"static/media/ecommerceVendasOnline.5c832716.png\";","module.exports = __webpack_public_path__ + \"static/media/tudoSobreCiracaoVideoParaSeuNegocio.b8f04a52.png\";","module.exports = __webpack_public_path__ + \"static/media/youtubeParaIniciantesComoCriarCrescerSeuCanal.23481713.png\";","module.exports = __webpack_public_path__ + \"static/media/afialiadoDeSucesso.8c90e66c.png\";","module.exports = __webpack_public_path__ + \"static/media/vendaMaisWhastappBusinessGoogleMeuNegocio.186d43ca.png\";","module.exports = __webpack_public_path__ + \"static/media/desenvolvimentoPluginsWordpress.b853b70e.png\";","module.exports = __webpack_public_path__ + \"static/media/introducaoLogicaPython.22f104ce.png\";","module.exports = __webpack_public_path__ + \"static/media/presencaOnlineMeis.41a7f25e.png\";","module.exports = __webpack_public_path__ + \"static/media/hostGator.9fedb5d0.svg\";","module.exports = __webpack_public_path__ + \"static/media/siteLock.b8140fba.svg\";","module.exports = __webpack_public_path__ + \"static/media/codeGuard.8619fe97.svg\";","module.exports = __webpack_public_path__ + \"static/media/jivoChat.3ddefe3d.svg\";","module.exports = __webpack_public_path__ + \"static/media/buildMyLogo.180d5a2e.svg\";","module.exports = __webpack_public_path__ + \"static/media/rdStation.2644d6e2.svg\";","module.exports = __webpack_public_path__ + \"static/media/cobreFacil.05394989.svg\";","module.exports = __webpack_public_path__ + \"static/media/trakto.9b6d94d5.svg\";","module.exports = __webpack_public_path__ + \"static/media/creditas.a9e5ddec.svg\";","module.exports = __webpack_public_path__ + \"static/media/asaas.3ebc0b2e.svg\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAAAWCAYAAAF27QR5AAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAhKADAAQAAAABAAAAFgAAAABGCNMyAAAP8UlEQVRoBeVae3zU1ZU/9zczIRASMQjIS2zKy5aZJISXxRWs7QoupVQFS+sD/WzZvpZ1Z0J51NZx7SqPzNT1022L1UW7dnVFeYmC7VoDCIiQQiaooUpRVF5CkJBAyCS/u99z79w785sMry7rP5588rvndc+9v/M7995z7x2ic0EwLM+lIqxCKJIkKf3y++NI9F9KNK+ERfvwf4XVYaQuLigUTtCQMeVU/3obsxx+ELcGA6yQ+Pm2Z1Z/97bXFb8uPkCVJE6oUojjqkzEQ1T/xn0kxCta/n98CtUDNsJdBFx+beX6g/HGiXRX12bd7cg6SsQmoPvHSFI31tEgXC7xGiJB3YsK2ZCcmD+uoUH26bp8yV0knPlKUcobVJmIX6pKfghqJ5IODR2dR1QauYbKZ49TQlMykYHLzfSwkhv+yHB/1JureLm+WKhynpIZG1wGwzPo6mixtVP6476KB5n+omyoe1GAjjYmlZKg99DVY7LfoyX7r/+P032f2NKT7jxU27np5z1PPb+gN2T/QnWx+5Su6QS7MRieCt6zxqXsGYXbMoK3F/9K5P4kU0dHBBvgDnA5dIwfPr8S/h8uXjrRrc//3Pb0q4dHUsGRp+pORXv20Z0ULao0D90BiQaGkD9QphoPRt41YlsKCR2A0TcvYBX+GuSiGOGgMt+NO2Hw8sgAg8stNFlupem2j+r7zi1R39MyM5BR87pTKPL3qv74aL6xQ6HKWRlaGI+RexWtYoLfJuCUUrucQq6837rK7xsvZ15TzYpq1DMyaWV6KBEtBGeO1SeB6YFewkAvQIkZgwKU5xtIre2pz8JDCaPBfAohDkO3J5vl4TWOkm6t6gDReryFHlY7Fq9nBfFLFHraYVIDG6qLZ4wOUY9A3aA6wLJEHMMuA5R+zKc4PHK4k4lYL9UhMNEzVDZQFx8PQ4jeFKyaRqFk0frBbQUbu7y2wnC9JTdAcqhlhiI7LJ4LSVQ9pLzEsmBYBbjf6gnxjMV5uALEutOiuteQVoR04LoFAo2dCTBk7TDE5z1XwPqc65SOoD+hQ8PPZPXT4XNnz9XhT6cn5EdHZqCtpao99XlTLZsOOs7tVFv1lOKGwifhvc5YtY4jrrrJbVSCCNuTqpEu/DRWjKLNimHspKWMrUBM3uRlgQqGeZXsqvhF/iLatOgExkmTivcOymDw4KtZvOeMzhRiDfr5NVs1FG5D//X4sEyN6FALRhoQ31jfRA3GyogOhtlBZZXjqd19VVUDLX+1/HEi391M+3+94aN2V/aFg5rpwT0F2rRvK016fkzaljgG2+nli5WMk4QznaT7tKonsFQm4v9MU6N5VN94WvHyRA+qiR1ReCg8GS+zSvOzHZFXTHULjimZse04txJ12kTuqQ8Vv9+V+bR2lrZbGg6TSzHmp1Yv00FZgS/wgqogxGq4XHecjRon5OXrFWzVtyZR3dItY1fs2KCcwJV4qnxgwE7/x+Oru7z23GhlxzyEWGzQjqV80PLYCQzvNI+0POMEZiTi6NcZwDiBxSpZQenSMJKt19saxgnMqI3HDT89UeUjC2xBNijlJCVMxL6uylD4t/gCdyhciKep5sEDjIt1Lb3kxHUHXm59+9D2w1El5scTo8qOLds9dMzJs05sVl0jiVgJlc/rQW2nD+soEZtp5+KxWPB0pJivm1XtvMnE4t8iJeyP9/iZjcKsymeZhbM0LzYZCm9Bx8bApX/AkPnbi23+Qu3poXGhtS6qfirZu6g2L9yY3+ZdlxRsouqo2gjR+GhXOt5cQW57I8ZROjEweV+b7wNMSn/h5uReyqcDxOM6gPXkEVFOn9huSClo+I+uVTRnR6XhW0mKEGbyH1sdIXTWaxk5EFXPCWJKW4NB/xfyiauszWCkgvxOV3KdI+S0SWqjW0nIDZhLXslhiSg0+w5MzJ/HFP8c+dsaYfNK1vNTW3s1I9TQ+Aie/6Twoyd+j1e8WuE87TBURLtQa2O1wvv1z6c6aGyhP8MJgxSPH6fofvAaxNXUXfFGPJq2HwzzxAVQ7512BCYlpVs654vkJncpXIhdcFYQ41nvX1Q9fri6nv5crCrw9xjeoYx4I6f0wGWL3J4nHYjgY8k4SegpSP4UTgNomofGMsWXlJGJWycg+8ckxpBs/JUq+YGZV/569VrauWoQ1a6ifZufOyBqp+8WDVNIHJ1STC9Oqbe6HgSJthA7PSx8Ppr6rC/tBJX7Bol3h7yJM8DOORcIOgnf7LFqwfBRhZdFsALBCRaQj2eBn4YW3Yb1mj2vgSu1Z0RrW+tKCMbCy3doBbFAlVJO4PJIS7JhwJObexP17k0/3P8O9W0ZBN0hWjfjKfz9KbFIr+UZbASENGcTim02Ce6pt1Jqh/BlL7dVzrSCsBMScZ3DBCu/hfD4HeoUq3rt8g1VmkgzxjJsObQs2mr4WGK+h/DCOAQIMUOVJL+ky9SzLjZPRqMO5o/3mdNj6eZCK/9FHzNMThTOk4Mtn5FcTtAKN1q9vEA3ixMVKdyhazN4QMUcL52ipMBwTkFisU7ODG3K4kJERiaIRw1lVg3eSyJ6xMP4QmpPiDH6JBrVTgpFntcV9HGMiEZdemH6AIzPVnx9tTnScv3EDq0QMaUzvExBLlyIvZadbJthcYNIH5ZYD5i5y8P0EGeagD9pHO7RI16+NWhHmP0syTzFFpj2GBxxuyqlvEmVwrlLleaxclpe1SdD6rq7nbZf4vp3zG0q2Wa2qU0PiY+N2llLSUfg0NlKR8qHkUQN0/piqea1P0nDK0MKV/siHBhcKAixQVVpp01UMecKbasSkSW1XTBMRLAMHzEFku5UWG1VerJiBmdoBgQNZLSitSj43JHQiJVHystvONldhZ7jp+uM2jlLQacxtqswFPcrXenW0cRHOiHJutvW5cMKPZ61c6zgPJFEbJzVbE2+r225eq5LCTIc4fyDVa6L65WEGXyEklkqAuy1p/eQCPQsHRjbmmLR74YHq32ChjT9TFQb3nmUegOUiPEqoeHD91oUwsufEC8btiozzyw8gnMQaikV2zxaQqw1tDDIZ6q06b19699jZbrBUp9hJGNkfIa9cKZF5jPoEhzURf6A5eIrnncXzvWUqPqjh8dEKPJ9ZBn/bvmcyxUX9cJWrcnyDBKKrIbu1wypSuG7BetOKiNBq7VUAAvzsVrNglwf0GVW0FnKU1jZ5osxdChTpPCKJQFq3a0zHSsUzyJn7wubYy1LI7kPB5Usx/63tPIb2Jrdm2UDpPMCfBO1/LLZg8h1H8Db3II2fZZvED4aFrgDc+UMw1KlOWRkgs+7pSyzckFvwBafx6VTTSukJvjjPrq06BG7RU7L0lj5j0ZgB/Yg+vXVNDMDEwLfV55AO/rUKSXyU5fCm+nkCThb5qfV3ceBfy5NAwviPkW2poOBhZK6UMMJTjS8HWdnum5WMIjHTDDI36zqRW7ri7QlbwBW4a4kkvspcPRN6rVMUPErI9Yle+ya3Tys8V1Z0LPF9U0TJG/OX+MeaPH7v00Tlv+Jmz4zyGno1wVCxjlAcO6lRK1voP8qSbKGhMAHwnl0omqv4pVFpmBDtpza28++7PI9gZTZ6aw1mxORNConXzNx3oBD1qONMZwn3OlJ7FgeTG2x29L785y2pPxyLr5DW6ONeNFveoR87Vga/omHJ5I28fDwce+LLO0Hlqe20+5jltbIPlwHzGRULnnhGpwBHCQ3rwIf7jI4K59cf8nGvflFzvxQiZh5jzPxB7cN3rWln7/FdQajRld830tayBlKbW4NvfiN72bZzkFii+2ImymvqECdR3AilevqwNTk3S9DKLIIwdAALDsYvoN9Vw8bDMHIEgTDCuhlBAO2/o7/y9DTd3l8Uu6ISqjoxJDtXxisIN6A6r6jnUAIrX3kMSGx9aiIDLW8UOQV+CtuaY1sV1fBxg7f1gunCv1ys/QUqXOIuqpVULC7USVx6f7UuQgcFf43fDh8nBTwNMjzQxp+QWVzr1Tk7tfRWOoIwMidwI2YNrX+O2v+0bBNOezp7ZuuXbnzKunKyzQPQbKi+xi6r6Te6JjSd6xsWsUS2WGza+Ro5xlsUa6i2thyqonijOY8QIhBeMdmvKPe95kqnNnzvXwilg7w8kpsfKUKbqOGZWQm2hxItYtete/JNwa1sRj4naH3Ulr3fDDsAjiAaxYet9p1C+uoE6HtLGiTUxWnNHI7+u8d9RygdfGRtGNhra3Fy3uiajbdXMg+fNvyU0g6qUxU8cjbl6GAmbrlcUxBE/HpZ2XwT1MggIYztmcsdFvXUPmcUujek6HLO9sI1S58k3lyZkWAdj0xlbYuqkW0J5k3a+Oe9W8ea85e71mEwUpD6Zd9NmoCY+SDaRs77frpdfUf0hcMr2OJ9fpCQUo+T+viqeaIJxAIE2jZtHYP36X+HpqJPF6PzwLOOeQdq3pnAiPfFv8Afsvqj6MHh8zuF06RBnfZZKp2KPk0SYj12fx0QPAIFs7feRTUD35kVnQ7d6vIrav6DQyutvqSvkhtyZ2WVghubTLu08SjNUm80HI6uL2UVk4L0MZ7d7+89+BZR7E42Llr3jv3qJOewPvT/wZz5+7mB0Q64r0N/nUUz3iOf7QJUmWEk0C+LeYBkQl9rsBsisQuE1pxGTw6WpTJsngofD0SysWW/v9CAv6nvKZxulZ/4jV1Iu4VaCpY+R3MKB2WX79HN1G1Cw7go6uFHr4hBD2P6ea/DEkFfb9JTR9xQlpoeQZRO5DCmwxpShzk3CIndGKnTqaGPw9Z21z+5r7DXp8bXS73FXc7+r1D477COAfDyHwaVs3ExYVWTPfI7GUnKq18EaXukNo1YECEwu+Rr9Mo2vHQx+oGvQJ3L8lkPWaVzrobsj+dbDyu7lDUNYL8EPwg/ouh8+lAzcJ9VBYei/njNTQIVzHIkepmIBjhfKEe3Ab0p1R/r5wphOeoUpnAmofECr9fygb+yUNBv9s97C3hU7Cg1zCPAIQUt+TcjkKEXwF9nQKiBNi7JX3++ya//9Su7OqKFuLjeyZ99Ut4u2M+H41tXiCGVkfFOdLnnJbOzpQ4LmXgWTIRu5H410SZSRcn2fqC/j+VHjs/Ee9CDmZLStVVAn7Iz+MxDv/FTH2qsDO+GTmDg2T2PrSbEYr40RrJLyDQr0HZcfBmdBK+zgH8U7zjp4Z4Jc5+NUK8TE3xltSf0VAbfh6buhrOpZ7Nk5MvK6x964dXH2sa0kcIUYwL48aGgs4H7vj25JrmqDiYrW9pdbU8N2RpRtrbD2AWO+zhZRMV83tTsjXfsjuJU7Rtsbcdvrpa3jTA6hjEJ13aEXvfkLYMVX4OzuaZBYGO8xVJe8mRb+G8YB0dbSmEf66wuowM7Py2vVIrDQ8mJ5CabSCT+EHWzgXvsVoH4DwtE/zuoQ59z5TzpYjEWYRA+0IEYPtdiBPw0R9p9Pxe+LXj5Znq/wuCZ9wo/doWHQAAAABJRU5ErkJggg==\"","module.exports = __webpack_public_path__ + \"static/media/SnappyLogo.d7a8f640.svg\";","module.exports = __webpack_public_path__ + \"static/media/colorful-border.cad7eef6.svg\";","module.exports = __webpack_public_path__ + \"static/media/bannerDesktop.ba550a39.png\";","module.exports = __webpack_public_path__ + \"static/media/bannerMobile.82801bde.png\";","module.exports = __webpack_public_path__ + \"static/media/protect.eea5ac85.png\";","module.exports = __webpack_public_path__ + \"static/media/security.7b5dfe95.png\";","module.exports = __webpack_public_path__ + \"static/media/problems.7822eb43.png\";","module.exports = __webpack_public_path__ + \"static/media/howprotect.27b58fb8.png\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANYAAAArCAYAAAAE73bpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABkLSURBVHgB7V0JmBTVtf5vdc/CvoMIIhpQwSgaUJOYBSMx+XBBBkSjedFsGJ87DHF7MaMmYFg1+oxLFkXNgsqiEbeICwmJSyQaHY2ggiK4sc4ww0x3133/31U1XdNTPdMDM0/E/r/vMF1Vt25VV91zzzn/Obcx2DkYSidKT8q+lP0pn6EMofSndPHbbKd8QFlDeZ2ylvIWZYN/zEUBBeyBMK1o25UyjPJ1yqGUQ+ApVQe0DvWUdyhvUF6lLKP8jbIRBRSwhyAfxZIyfYdSBs8iORFtZH2kLLJOWyjVlAQ8petM6UYZCM+aFUec/y7lKcpvKE+iYMkK2EPRkfIjygsUmyXrKXdTzqMcSelLieXZbyk8K/c1SjnlcXhKGe5/DWUuZW8UUMAnFNkWS3GTFOZcyj7+Pg32Fyn3U56g/JWSbDjj7kt7oFP9MKRiB8C4e9HWbMDEOXf4R0+GZ/Hk5sn1e4Xyvt9nAFmz4ygnUMb520IN5U7KDHixWQEFfGIQKJbcO1moS5FRqFrKg5Q5lGcQKMPvLuqObs6XYMwYylfg2oP5N+PeWfsQyuaM9bf+l/LfoevJxRNx8STlYcoKeEqT8o/3oHyX8kPKQf4+uZQz/L4+QAEFfAIgxSqi/IkiZSiBZyk0iH8Lj8lzcfc5PVDacQIc53hY9yj+7UMFikf22LxiNWoJLxaTNfwzZRFllb9frOIEysXwiBLh35SvwIvhCihgt4aUQ/GUBq+U6gHKZZRKVFQYjKg6HNY5A8ZORDrmsTFaJykP2gBSainQl3yRtVxCuZfyKOV2ygLKzynnUA6AR4YUFKuA3R5yAaVcIhXkpt0IxUGLpw7DiOpHYM1fqVSyGnIP8yUodhbdKWfCs1yi38fAs543UOrgKWJr0gMFFPCxQYolhZFiGQTKY810aGCb9P78YBUL2W3w3LsA9f52EvlDij4KXmwnuCjQ7wV8wqBBHNDcQbylzeJmjYOhBXHtBjjmNQ75l2Gclzj2V1NPP0DS+SjU8hrKLfAqNFSZ8VnKwb4op1WC5u/Nu1oGbeKDFlBAe0ODV4xcrb/d0fvjpKLHsH2fMdZ8pNyF6JBYibE31KF5bPJFWBHar+scBq+KQyzgvhHnpkL3GPO3U2gNlAro7NL62SFIWcZn5iMUOS+i9s2XMeme1vXVHlhQvh/vp6xh26m7C+Oufx/tD3kih1OGUnrDc7VVaqa85Xv49KAPvOKHAI9RXkIbQINW7lqVv901/a9ja5o6X7YacefLOHHWKuw6FDut8EXMofJbfSPaCKX+fSaRj0tZUeHg0KpjqURXwCSP5vfwLF/a7nGySFKfiga9j4VT/4Ii9xKcOO9dfFyImwNp6Wc3bCfjT8PL87UX5DFMo4iM6hhxXG+9kvIHyix4qY49GYMos0PbP0AbKZZiLClWUKfXM/2vNZuaNjVFSJoeaHvEEV0mtdX/29Fvk0BLL3p+eSeSLnfSqj5MRfoqMu5kFkw/tjkDydjrWFT+fewupEg81p6u7oXw8pGaoTvmaKP3IOUTE/t3eExsATuBQLE+9Lf7pf91IxOxJcxh7Y+2RxdEx1qBSyJLJgWRu7ojZy/3Xro/uth/8dPpaKKopsYjVky2xdMA+zUWT7sJCy7phj0XKhG7DtEKJTcwyhMYSXkeXu6wgFYiGICBhdov/a9xo90jg+Foe7xJ+Ta8+sNwhfsG/+/e8CyKlD3aFby/oiOcxM1sNgSZe61jvu1qxNwvwKXLVZ06CDZxKPefQY/w6cbJOObpSmwn7JmQpTo7a98/4U1AUh5ZJb1XxbsimsLkk1zDziig1QhcpcBieYoF83pka5t2E9oaIhFUh6jk9AB4uSyVVwUWK7CS7yAXK5iqnkzX7uuhPWvpuZ6B8dNXcH/4HCnrq1gxdxHeW38OlWwOe/yQbSZg3Mz1kX0/URHHxi2DECs6igRILyrqFv5dCXfda3kRIJYx3z01Q1HsjuS00BMxswEx5zmc9Iu30RrML++Lbu7BZF0PIBvrkJV9D05yJcZfp5KwXC6knueVyFgqtdMKgqmUbVltFTurKPomykJ4nsKPKUuz2ok57oMMk7wZGfIrgLyQQCHDoUY2dF+qJdUSJCX/VU/6D//ecvWhCbCr/7naPzbK70Pj9gk0fh4a48rDahKRR6YYVhPLW2hHBIoVEBKa8Utosd6AjQh7DI5C6/BNeA9OFnGtL7I82yPa6mGsg+ffz0NmMBzm/62MvIKslVv93YZHafhSHOc0nDTjH16JYQS+OEUDYS4WXsw+Y+tw8qyXI9stLj8KW6pvRjw+jAauxMvyOeIoXcQGvYKF5dNRNvuPyIXFFx+CxdXXoRhH8/7883mjqWQdFk67EzH7eIsZugUX90RJrJztzoHrdPd8DOv5GiZexxhxOff/BBNm/iPibBVU9wxt06rjAuQmgfQUFbzrmWvlwrKINoMp4eelSfB3WW2mUC73P0tZvoBMzBzgaMgN9yxmeLDJYoo4kQJd6u9b69+Pqm5ULneXv/9XlL0op/h9LKc8Hfp+A/1rjEbjcEPur+pgb0A7IVAs1evpoWowD8f7B76Mvqv0ILLiDtsfD1wxACf+PF8m7SR45UgBpFBSHua80i/wEXgUb1XWeTW+6GEdHrrHCNQcSrJleMMkZZ3rcVLkIGuKsnkP5zy2pPw0DuZboZmzqT3gfZlDqMR3YtHUzyPx9o9pveobtVg0lTOkuQfyApqcbzh52R9w/wloDkt+vDdc927ex+jI4zY9WMbAcT+He6dMxsS594WOalYvC21rwGqw55OslyVY1szx8Jq6KOLJCbUpRlOLeho8ZYwqQBD9/wt4XlTQR1HouAnt1/jaL3RMqyqC70fGNV2DOiTiGnpuejZHoJ0QPBS5WYE7eDjOPjtB92hl0+bGIFH3ZeSP7AeqWUhf+Hh4NYl6ec/Cq7KIit80G+lBa9BG06CJFB9OQ0FwknHU49hV3DdNNL1cpi6ZnVaTwht8rZtDLXldcyGKB1/Q6Pz7J3fkN/8NJfTSrXKDL9LyyQ3xJhKb/n7RkAvqWqUiRjfsM1oQan7L80gRm0dDZAxdTOc2KuKBoR4Go3F+UHWXu0OdpdwxTVhhpdLzeA5e2iVwr/vk0VfwfOX+PQRPkQSNM72/sFLpWWnFusZb4Abvg3ZCoFgaLM/7nw9J/2vto9Gn2Alo2+treYhcB1mkIKgO6O8R/mcRHGsiezCNZqytqCvatTzbgos70GXTS/FcUWtdkh9X0Cr1xPjZQ1DfWWvOZGkyKQlrL6NbmMnDJbqeyjloROY4/oYdqSEYP+cwlM0ZhcS2fXh8XrPVzFurR/P4yZkd5mcYuG0/jJ/1fbqf0/j3Gyiyh7OfIFbrwe5+EupBShu2LCvw8UPv+3o0mrDSqyjkssnVUwyvCp2l+XeZnjC0cFYuYpAD/AY8VzOAlFaejyZvhTPKX01FOyJQLGlzYPo9i5SSD2pqmpxhzAmNBlHbQVbnc/AedPBQjvP/SulrI88yJjTz2SRK62uwS3fhjGRaIZO/cewFmDBreoOrN6miHhNmP8hB/MOQYjCOsd/LnMMcWQZVdE9Pw7euW9OwZ9KtW/H+1ktgnN/nvA/Xhlxo8wKq3rs2/fH5yUUNste2//AWlPD17sO6E7Hoou7+SXKfwvm5XFUyetbLWxC5zL2x61AfYfpelkasZZhIUTw1ifIf5Idbsrb1nU8NbctoaAFtOC5UmKMUxB1oJ4T9Y60M1guSZu8Pdy3Nso1iB0sZH3wL+WFnEq+KwVb69xY8oKXIyXzZUHxmipGI71oS28j1Mt59W9VtFEcP/mTto2z278x5zhgsOCXmDWybcWstfk9iYV2T88++le52QxDeGOn0gRmV2eEeii79NuKdrlVNBHZ+5tEwdrPm8/6GBk84nhqIaPRCZulOLpE1yb8gOzeC3z0JIKWojmgnt/tPyA+vZm3rPsNhhcb1hhzn3oh2Qlix5EK95e8rS1PJxr078ixrzsXS85sroA2g85Wj0uyrinnRuFLW5ioM5CfrwYo+10uQBfpbztbWrg5tdKfzcxh2DRm/25j1OOHazZGtJt1UzecQmlVtP5T2ICnhZCW8Te6ZN5FmzJqSCYkt3fiEQnk1E/f7jBBT0jARpJs6g/xPepdhJm4sdh6avILn0NrqEH2/gPvsmnWsspnz8vk5BsVj2WyjaPvueV6jpbG40wgrlmKGe/3PnkVKOpyVIwJeg6FIFJ2BliGFkHKJ5r0CXo2aZmKxOVHslEqWAgsxMdTHeuREXDOS/3A5wCzdsCdGx5EPVFfYBE7G5bS2Y3QbHZM1tt1C2/XYsXcS9TF9h0x+y9jcFrTU1UBr2n+HVBKNC44r2f/D+YkTxFxibsPuzzHIMKxhaAD/Mkuy6XMF/IGLne2SF0X0Gd5XH/ou2SVp3ZEb+SSmowqz3azrNNdPuxUFZA9AxTciEhTrHISJs1/CommkxO2pTc50nV/g3mnLMbFVRbmaHTT7jUJ0HZ+qi0W/K/dSFrqn3BRx2cxXSW3TbTVf9C8xHptH/gB48mY0h1/S4g6smoOFU55F2dz5oVsMuXdUiuE1qgBvanUWTmXSGIc2zHcOZz/FX7dM3oh+XTdyf8BqKZd3ZeQ9JM0YRClW9Zc3oehZ5fu8WNbaJ0h8nI98YBrNwGIVv+p/1vNWca1inHDJmkijC7N6uTprW5Nj0G/gYgbvL8rFDA9mve9goH+Uda68kuWIxufRMmJ+X+H4Ud6OJuKA1DoWXkgSZZnGop3qRLNfqgbQQ/7ny/2LXhtRYyf0Zv5kepoWbh3kqk2J2K+ZRll/XUs/jSblUmxyX4s9WkeZ4GDmUo5pHhOnFWnlicKSi0dhUIlipHPpOt1CJclY3x1x0vXWf1G0gMX29iZ1hL+rKGUMdFUDXZ4ezGwnKHayTojVsqM4OZ1F5Wj8AhdOEWt4buT9TZqk7/JAw7ZjzmLsdlD6Oo2F32Xal/CHqb0a9jWGVmM/E9oWHS/rMwrR+SfFJ1oxfllon+LdP4e2NXDDVSManGELJaX6ZmhbFTTB+Fnj9xdAlR1RRQdiQyeiZUStKpcSLwpti3U+P6KdUhFXo50Qpa2iklViJNM/morzL2ypVmx0YpOWCu4dez5OnnMT8sNgeHFWlEvyFDyaVHkOJXgVX82kXIKWsGBBDMXP3cHBm+WeKm/EicIxz/LVJjm/KXbRr0vRFQ25aIYvP5kag4nzXkmXIC2u1s+unR7qiKykmYtkYgNi8W4ckufxWseGYpt/4sXOR9Jt9GKJhVMOoMIqdRDM3DW0fvP1szw8J8X7+Aw/K+ZsnEdxnCMwbqaX9lh00WBOxhqEnrtkGQMbJk5T5mnEEgm4RQPY539RzuJtkGa2tzAt8GtS8dkF1EqCPorGbpfcOSm/EvSavKRkKn9SCPBVZMaFLMxZ8KoUwrgN3hILQd9ZXoVob02yqvYIx3NSnlmhbTF+YWJC11eBsKrppaBipVVxEXbT1sAbM1uyzte1NellEyCq9tHzD36lWe6oKjA09jQxDIanVEOzztN3+g3aAFGKpYesJOtoeL/rx9lyGs2q1Uvu0qS1xQ64qR9xULZEXerFqhJhTMQxuRei1pVv0ENWwlUxn2aVauSDJd/rAttLyjUercN2PoXJOHl2hv1bcFkfFCfvZ18tuyMqoSou+gLGzmgcJC+e9nOefzlag7BieX2Uk0Kf2YicSCeajSxacdZ9bEaxOQJjZ70R0bNcLlnAfAinALIymtTmRhxT/aYC/5Z+B0UekMqZNje6U+9Hg05E/liD1imWrqH0x6/ROrSZYkW5A7rZoJJApSdfZzLyDc6M0yN70O9ixGI3cxBcmTPQ92Zm1XCNyXFctKtcFM2WQSV2BfJVKmHcb6tQn1Tl+lTeU21e51hayY5MiIeVSpg040POneM5nu9v4fxVqE8c2USphIFDKvhw9BxTOc7VEpg70Rzq18zzUxuh5TJGg7mxUlnzJmLmqBxKJSh2lQuem11tDBEfIpjm5jiuhL28g6pm+pAlkvJks6pyV+UNNDcRa1Jdgp1HUGwsRWmuLrL5OHwX0FzgphyLHt5r0KyzoCKJomr5rjmUg8lSS9/W1l+ICTcEeRu5BiqQVMlS/xzXUQwgayVzrUBW/r/YrJH+vtbjwan78kxm1kUOGFo9G67u3uRd09yF7s/dg2OezE2MKGpZUn4WXawzOcDlXnSmstXBdVchrtIiJnjHzaxq9l4Uz7mxn7GnQ9ifrHY1+3iBruflKI6XIOle6VXgMwZLJc/DxOvebNLH4in78DBdF6N4RMto5DLVss/V7PMulHSaj7FXbUPL0PuWwkyG95N3ihGDGFlxpVIXIjhEeuRT/qT7kaund9XL3ydXVNZRCe33WrgXWRX9OKtKj+S2qYJdY0xF2GIxgzhL5XYq9tUEI+urODCIJ8uQO/ktaEK5Ch4hp7hdk64mca0cFskxN9SXvKXH0AZoTrEUH8g1U/Cnh30mlv60A+q2q2Zv32bOW4rxs4/3P8u3Lm+mrRJ3igHky4uZk5mXlVJS8kW0BRR/YWVPdErGyMJtpyKo/8KP0nhQHCP3XpOL3PE9fSn+/xuaY/Q0ABWIKi6SS/g6Z8WrsOTSMXAT1GozOPKsxuxXx2b61wyr2UbKJTp6kr9ffn3bKJXgMWwfooAobEf0Ep4CdhFOC8dFYmjQS1nE1HwP465dTbdIscwm7Dw0O8rMyyIqwP8ff7+Sk20SPBZQwMeJlhRLUD3Vz+AxSgr2SK/PfRYx54v0+19B66FSGzFFIjPk517l34dcQSlxSz+pVsCnCqfEMHJkJk+mz6ODyhoeS4u/HyTPdMxrH4xtJ9M+bSC8/Zl2/r5T2vSXnvPNOsulU0mSrItcq9uhAPLBqT1R79B1swqG/V/RzfmfIiiukVtZ7n9WcCtyRP69iBLVE+5AAbs1Ouw9/Jeutcm6Da96Sf4lF/ZDMj6DBEyMaZe/dzjvkYOtY3sxd7iKYyHJyfdAjrLtjuv+04UZxyG8ifuWceD1ssZ20HHrYINF6k7HOuXkizqwqxt3rPv3U50GD9/LTeB6m4737Qukx55yrJnMYKOrtc5cOO5xjkVJLFV3Taqo+Fby2X/kdUdydO3Lc3raWGJyLFl0CGnuchurP8u4JYOYej2pNBa/ui6Z/JUDW2ldW0lW2+H99Kx5t7LNWMJ8LJagZLF+1fY8f1s/GfYIjp/TC907XcCkpdYfKf8SRQooIBbhoZ/dOhNeck5LVM7w+9WXETNUUKrdHJ33GtKHI2ZEzEmXCXlIFR1Dqr8Kxn2tqHLjM5xej0tZO8fWJ+4wMN+xpe7V5Dw7WSe51Dii583txpjuVLa9ePxMN2avpbLEY278dO5/jrPzX5i7Sy9dStaZERxQG0tiifN1DrN53+Y4W+jEsMAxqcOoVEcwLPmsGy8po4IOo8IpDTE0Zdxr4NodJlW0n2vsD3ne5lii6CBr3WEOzLfqXfdr7G9fXn+FG4uRP7AXpgyv24bIV7EEDXxZIOUmRMXKnVuOYyqmY+KsZejW6Riq1Xi/4iCA8jsq2xEtK2VSxl5xmzLeIkcuglduks9y8QI+ZqTipaczPX0rrUoV+vf3F4Kmq1kGcMAPSPXvdC4VpkvMcWbYePxI7ttc16PTW7XrK79d++7q9Rz8JdapX2Ng+9D6KE2xyXHN6dbaLszV9E6l7Du0YqW0POkFi8ZxVSu5buvbq9bUrqukhTS9rZPaYFO2tzVGtH4nJtVX8txTKY9TQbfwXnrz781U4qF0rTYa6L+cwtNuDIdRkfrwhn+vxD0VdtP29acuixkzxFjzWN26ytVoQ7RGsQKollCKojIZ1ZZpoV0lFexSlM1+gcnk8CpWKaKqz38Kb9m1lpDIr9XCOS2wuw0FfDIweDAHvDuBiiM3v19RrIe30jzuPMDBXcmcXl9sT22yLrZQOc6NW3c12zud1tceW7r38KepiKV0tzoUJ7ttdS36UblqOeCpg7FnaFH6UhF6OTHbh4N8hDVe/otWpYcUrkP/YReUDhh+AxWjB91FuZaf43W8Nkn3Lu7/Ez+Vuo6zjRYsSbt1em1R7Yi4ytdgq6z3H3zsT+nPa6uUiwpomcOqoFfrvpG0sT+ijbGzAZsSeap41qyhYlIlLVU1raoJJR5F4SrXpThKCbjR8JRQCTkpouKsT9NvhH/iUdqt3z4x6wyk9Tm7qGuf90zKrUtWf7QWk45mysSSyHI/KHl8zRKzZrNcrDHWOC87cGhh7JGMYG7sVl+8ri7u9KvpnnyyaIcdmnLsQ+xvH8ZWIx3HuY1J+JfSKxOseadDbYe7d+zYUFfco/fbtGjHUsM6otjOcVz7GhXoGCrc2pJ47L6Ua0pqN1Tel6j68Pni7n0HuPXmBUZ6yR1vv/oYtmxJFnXtfSTT+dfEupTeZxPJfo5x1sYStcutU/yicZz1yW0fvFbSrd9+nesTy2pqNu5cMUI7IrBaWtdjc4gUSuREFxRQQAGtgtYfKbn7JLwash3+ZxEd/VFAAZ8itMciLzEzR/h9qyZrtzOxBRTQ3vg/SQvgcg6NmqAAAAAASUVORK5CYII=\"","module.exports = __webpack_public_path__ + \"static/media/codeguard-logo.dc899db9.png\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATYAAAAyCAMAAADhhAc5AAACSVBMVEUAAADOiYcBDHIAC3IBDHL/cGsBDHL/cGv/cGsAC3L/cGsBDHIBDHIAC3IAC3H/b2r/cGoACXEACXIAC3IBDHIBDHIBDHL/cGsAC3L/cGv/b2oAC3L/cGpWjv//cGsAC3IW4b4BDHL/cGsAC3IAC3IACnEAC3H/cGoBDHIACnEBDHIBDHL/cGsAC3EAC3L/cGr/b2v/b2v/b2r/b2pWjv//cGv/cGv/cGv/cGv/cGv/cGsBDHIBDHIAC3EV4b7/cGr/cGv/cGsBDHL/cGsAC3FVjv//b2r/b2oBDHL/cGv/cGv/cGv/cGv/cGsAC3IBDHIBDHJWjv8W4b7/cGv/cGv/cGv/cGsAC3L/cGr/cGr/b2v/cGsBDHIBDHL/cGsADHIBC3L/cGv/cGv/cGv/cGsAC3FVjv9Wjv8W4b7/cGv/cGsBDHIBDHL/cGsW4b7/cGsAC3IAC3IV4b5Vjv8W4b4W4b5Wjv8BC3JWjv8AC3IAC3EV4b7/cGsV4b4U474W4b5Wjv9Wjv//cGv/cGv/cGsADHJWjv9Wjv8BC3JVjv8W4b5Wjv8BDHIW4b4BDHIV4b4V4b4ADHL/cGsV4b5Vjv8V4b7/cGoACnEU4r7pdH5Wjv9Wjv8W4b5Wjv9Wjv8V4b5Vjv/fgHZMx6sW4b5Wjv9Wjv9Wjv9Wjv8AC3EV4b5Vjv9Vjv//b2pVjv9Vjv8U4b6GhtTEep4W4b6egcAW4b4W4b4r17YBDHJEy67Fep3Be6H/cGsBDHIW4b5Wjv93iOJ3sZ5ijPWxloYEwrWVAAAAu3RSTlMAAbNR2237dP1tpJryWzQcJwYCMvek7VtL+0ckKP22OPd890YqGREP4wrQxZhsVzUTDAkC9/Lu6+fi3MG7HxoE0sKueRwbGAbf17KtYkoO1cykpIiFT0E8OjEj9OjXvYyCcGdULRYF5dTMoqGUkpF+Z2FXE/vgs51TQkAvJgcE8tvIx7idioN5dQ3KvaqemYFwb11LMiMeFA398+3DrYxhP/77tpiTb2g/ODcsJRkXEP756dW6srJuYzQpdN2eYwAACvdJREFUaN7tmvlXU0cUx+8DTCMGbUJYQgQMAcImBCg7lFX2rZVdFGSxbqAgdUFrrVa7a12q1rX7vu9tAl3+sua9mcesL0lbOaecw/enycy8Ce+TuXfuvQNQOvbhuWeO31BgVfVynKoxrb05TlMNhCM3mhwL/0FbfZo2wCPUK/eXA7pz6RispiL8qqK0HyfSr2kzhKPtaHLi/w3bx8nLmp55aR8QrWMLoQ+Wl5OfULklv/YO6V3HFkJPLS8/cePBsgbu/g7AWscWBrYd8Nlrmq3eeQm7uHVsYWGDfSfPIRd3UnNx69jCwhbQsUt3kYu7oX5axyZV80x9RxLBpumrp9Cpej9gqevYZBquDKxjPjilY8N654VkFIy8so5Npna00q4+D41NdXHPLKs6dzJ42mCdrnE2ZdqkYzar9V9gU7qnM25ZQ2DLns4gXypT4c2CgjPeYrbzcRk2xXNmYLJ/ygv/RCU+JHPl98kYG9aXl1AUd9zYxaVezM2ymPz2+N2H3NxLNB3dlBuV1ZrT4Fq0SrABhY3OlzJi4nJGLfb4qIaYTAAlcqOqU+rIRoItfbw6y2KJb612xSpA1BWtaibQqr12odwReKfSurykENi2HqkvM/vUuSmdRQBT0Zq8MIEaB5uBViPq3Qs+ord/17AR7TierIH7UG6psb1+SjnpNLQGaiRrTgkTW8YmE3ksPt9mzdVamxhsNVX0t35Cln7Mp8pRDMMVPqK64SDYbrabqaltW2EStbboDd8EUPI6UGcC+Gh9+ytnLyexi/tIBJeJXpHI5LLphjtuZ4eq0kVsopHa5izsY5czc0RsMfH8JBab72bnLh8tR1+hATZlsszHKK2/U8fWgtHvAST6Gw54gH2utLEIGO176e6yquN8EJdd5Rd0CA81CCPxg6Gx2caFx8ZbBWwXTfyk6mz2pfocPk4dtXJsnWZ+ZtmMjg32YucVaOoqOrDyPP9gW0ItMPrygebiPmZ7kfmwsieiIUSGlcUd8kg4ahJXNAnYUA+jCCuDzewT9KIiw5aUJs40r2Dz4tE+WFECGi1tJtiI2qeA1ecvBLC9wPa5/IJMc2RIVPytELst1UJWisoiVk6wGWo7wWagBAm25nJiZPUXDuBPGBuJMdqIy9qDeg4CwsbJkTcCtI49SOaxpVt0GpfdGZnOmAi7356PhgZN+N2r5tIznO5N+sw4JeiRoOTqKx7ebA18dF4cNcRmORQT69w8F2HXH+nmsaW1b+ga6ppo1/dThVfENoPHduWhfTIU7WCwdeGdt3KkTKHVSgo4bIT+RCEfwF1ijgrdDquduGNz1FXdCjG1ozZ83kZhg4sNii0Vr9jqBKya3QbYemPxlw5m4Z6jHLbKAmyVBZW4Z6+AzYMPjpIuwCre4KCxFWJPdgSw+rCnVAg2Xm39xThdQBWRc8eYoAxvoYZs0NWt4Jc1IWr5JKrYjScHxbYJtXdTYUxNjxRbdSZZOgeHIQqDrd5DQgZsWBWFPLYJTG0AiDoJNjKjDp+SW7AZJwHBJipFtdQdH6D621NfAa18bBzTkrsCNHQCiNx4dmYQ32a1I9puYB8UscU30fE29ghOGtuux4FoBO+gIT65qkftnUCrnsbWjFIBB96O+GitUAg2mdLyfrt0B+UJnwGrMWIbvHLQ66fTfTggOWWEjdhoro1bTMSWD5Kl82lsjUBrJ+7kdlstdlRbgFY/jQ2i0YdoZMJtZCE5NpI2aPb50T55YmnKlKShaNf0kISK4LkaBFsMDtSA0biIzd4NkqVdFDbHVqB1BscgHLZm1DyvsOWgEhpbF23gBTiyGxGwidz+XL4rq4H0Io8Coprwscl0ZqDOw0GwvSytbySK2HKBXdqClybYKtiIXSlF0T6HbZjQpFRcR2OrxZ80Kz2IjVoRsIn65vjnCojqQb4ZRDn9msbYv9yEWRpjc6GtNMiVCkRsEVyyMorzE4KtDVihdz/A+bYC4tpopRBs5FCYUfchMmrHMISB7Y/9188aOrAqY2yH2V5kua9zWYK420ynjLFtx+cohy0L/yIEW2VteNgwEVZ7GGyFyGbLa1cOhAtKGNjM7y0tvPEWCMpFwQKImvZjQrS6yelqtNu28/4eTRB3W09IIy3zsHaHjLSeNlJCsAMY1VYSbNSh0A/F9QhIAoSB7a+lgJ6f/Ro4vY72RjcIUuyIqFUSSLiMsJHmGH9iiznpLTYUEo8E8wDQGsIZEYetEG/NFvb8cLDYBswY7lZko+dbQmMz5/3y7JKq/fOcg7vo1xQDonolAchhND0ySLgb65ecwLYoSQAyx8yoxkvTAUg7Y6UX5AEIlCFfVQC0NvhYbEVok5UWPUaeDIEtZRjg9pvbNHCvnpYZz6hku7nEcDfdhDLJpiDYbBaJlcaEDHcjcectGpu5E4gScOcQj60dMwZKReUEG/N4AnKQJYWhsLVdQ9nVW09r4L57UuJR/IfI5rA68ZmAk6tE4tmqcK1SMcRGdmRrLFU9bg2VXMVmkeMVYeMSJiWp1Ci5mtSDY2JJLXk+Hpu3DNkyH67IoZUcKQIs5dN7KrdZLjhHiqjRd1RvVro8lXfm+skpaYxtkC9oKoOjBql8ziK20EgL7jmFsZGCLjoWPH1pPkKKxdZShvfmEd1fFXb4BGyQR5eGhoJiM0eP0M7sOdVS9xsUjk7kp6YuHm0IfM5K1YYW9cJR7tXNzvTIy/E6YVtQbLYcvSoU554GmD51yGJYOLJHXF1Mdb+ca9JLIjah3lbe0fdYX8dKzbvCI2CDnfrb1u0dqYWigsZKnwTbAFclNsZ2nqtTXlcPhh94FybKkkoyIkH2mhBlSreJmmz3/4MypT01ZJlyEkRs3nLj+VuE7J4c0XJsldfYM/n0jwuqkc5zRfEqQ27Watmr5UMIbDbJLxFvEbDFi1XlGAiFLU96lzCwS7SzOgHbJHH3RYbY0o6wweLXb2gnwsKsEsYVzChyb5m5EmqhL/xsJ4TH5noEbJEWntpGhcW2xyxcJRRLscE1YWbHhICtpdQnqaxwTg2lXMSrocBNlmJlnjDxVyFNOtIxbqj3EyWMC79sl4kFMm6t4rFZarSSLlGUWwEWW/+MmdsJRUb3pP3lnHvy9hNs/KFQ0WyA7d33ngRan+7XoD3/8GwY18uj+TYqNY2gRzbawrxeTqftuzUVoIHH1tMNGRGErsWVLdxiJkFSBbUT2s8EuV5uPmim+RbDkIhtyCHJ+s0E2h8L2yhsyumnEbRZ0slrcGzlnxkirexQzc+v90ZltfZUXXQzI4sxqlBU1xSjKZP+KVxV6oqWqLhEFUiqNkFzmU6t6bapTVfE7tbWnuqxxG7u8heXeZShnRfaysvK66I7aQDgSdBEV3+/aNxTGfBxjvL6vV4yA+1PJsEyfwGUKlbub35aWqKw3b6C8oN7pyGossP815nwlZ1R48wI9aBClhZ2G55R6CmEsNTSPDJy02M4HC25nodGhDJlCp6msJ19qGejZ2HNiGB7lPKmyZZt2WkOBB1dCtDYTr+qQdt25TlYQ1odbLjQdoDvH+kvaAHA2FAauqA5tTeehDWlVcHmwZlGp3SUYLt95Xlc9FBgbWlVsHXi2qc3KDZlHgUdz86vKftcNWy150meYYzt+vvYqd2GtafVwDbsIP/3IdfsEta2wPXBWtQqYCvOIyV1A80vIGqvzsPa1CpgO1Macs2zs5pTe7j2nNoqYSM1ubZiEEUS9/fvza6xoIPWZIqmAnh0ykNLCtHH31ctxkR4XyTuAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAAAVCAMAAACjd/aHAAAAk1BMVEUAAAD/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE3/jE3/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE3/jE7/jE7/jE7/jE7/jE7/jE3/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE7/jE74qJafAAAAMHRSTlMABObw+w3sQffdTa6otTzOMCUJlqDLbWDhGdTGvlUV9Ee5Nh4Q2Id5Z52PgHNRWSsHJ5uAAAAEGElEQVRIx72U2bqiMAyAW5EdpFAUWQWVxQXl/Z9umhQGOJ/n82omF9otyU82sgGhBIXexLouyTcJ/PLgNvP+YtmJMRi1/fI/K9CLHjku+SoDyARji7VifdU528owhH/R9FRsUYykv36kv2vbwfw3MPp+mGHe7mmYZbs/f1BQnWH4HzBBtR1Wkl7/BUzhx/Q7TG+gBa2yK02m6jXpM1bQX2Cus+3vMGpuH2HNywIv4le1ERXKX1eics88gXvP8yrGEtDfRAEEKd/AJouFAnseYX10zpQcvEQBSqGwt4Tt8gHvFKeLwbR/zttHwJrUUD7DXPhUB5oLGqVryO0pvKjVnJLj7rAFlikYkaZ53FIJyespeXVPmkVJRUS9aeOdYTNCWGYag7tLxNkIo+9Q9EzCFOkwy/5NfAV10UZVrGA8+HtOIadMle22qGntsoKJ7WGh75MdRMmsMb4SZjOKgTC0xcPE9ragH9InHN/zgwnbcpkm3YCjCzTV4a9YlONXPJ+Yw3aVphY5TTvFTwtVhJFikmElCMNMQGkpCXoFfDEHKsEnZGc7bV8sC/iN30chQ3NTZYF1d71KKOjgyQ4WBazCifFUCc1NdDbCbM3Uvn+CiQzx+wpAtwEXTw7VkvFOdscaBr2sYVJopfLRRVELVeyqC5gSHjhgm2KJNyNMc44J+QQDWfJ8groQGt7J4jWz2yFew/iY5J+RES94ldSmaRo/YQ4QmI6gbgVcEsaL59Z+5SivPcLcoU5lJbIa4ny9gVUUM1rBqCcIMYBbKYgJb25qO5P9gGkAviQoHMARRrN+nTOgkBWyLY4AQ1UW8f043fzV0Mvg7CH0gwvIDZvL0jCSmqZsf8I8wEQvvYVwiTB7/1eYaAsKWDMt1sw4Nc9cAc8jjIOHHSBq3WigB/bjOUTCK6UsmWFkNi3sIVjRDsJ4R5hK/RVmBya9SOxlQt8k8F+dKnBcwXajhGXgU6T5ovoehut5hQkcmegqwHDtxMlLkTDBDbIpTmIcWadIOMQ5Z+Towv0dhjZy2jkpThE7dqC92rffJ/AtlFDMhpIcNzop5Xwz0irT5MzyiYOlYukteEZPB3xT18bhgTZrJ8Oycq7fYAjThlk21tXGr3dCnPEdGW3LvghsOJzFaERh4LA0a2OYYNj0iLNk+TgnX2FIt1kM8ICUC38mVHaM+ZCFcwlX6Fzczw4nGJpN6gFOCymnhq5hNJAJJhRrs4Rh5hxlOLkOF7k7WlDst+wy9ySjBVrMnXA016d4nWLLH/leGMQRd+EK6u8L8uaegbeZTsXTBJ6MMDoIGYXBppCt0ze3e8QCSRmXYsB77sMqiJQ4bxz+0GPcFPo9PSqblEtd8N234a3bXc/CHqNosGyd8G5BD6t+/hC2zzGe7+QTkD/XdfpD3F3KTQAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfgAAABvCAMAAAA34iICAAABJlBMVEUAAAAgICAsLCwsLCwqKiotLS0sLCwoKCgsLCwtLS0tLS0tLS0tLS0sLCwtLS0rKyssLCwtLS0tLS0sLCwsLCwtLS0rKyv////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////z8/NmZma+vr4AAAD///////8AAAAAAADt7e0AAAAAAAC2trbFxcXMzMxhYWGjo6NGRkb09PTm5uaxsbFVVVX///8tLS3////4+PhZWVk3Nzfa2trJycmSkpJ8fHxGRkaioqIdmUulAAAAV3RSTlMAEMCAMKDQIEDw72BQ4N9wkLA/r2+PXxDx4p3Ul5BtQN+GLAzr505FPDIkFfa+qWFbOAfJw7J4cWZX2bAazaZSSfnz8eC2flAg8PDf09LNzMrGv6piJwXaq3OFAAATK0lEQVR42uxc+ZPURBTuM93p7lxzASssuIiwrAgIingfpVVWeWv5Ri1L//+/Qjtkp5nJdJKedCwo9qviJ3Y3yfve8b3XL0GRYeaEYnSB/wez2YxSygkhsIWckDmlZvb/MUHtZSt0gSmBZ4bSOclhLwhJYQNFliuBpocEiwxdYBLg2YrOyTbLFaXUSCnb9DIpaUkygHzJ0MQgYEHRBaJTvlgSBQ0yS7eUeNivmjIDItGU0GCRXdT4iITPZoZuKE8ILaRAwTAElmhC1FUnZegCkbCEBikpLeOHQ6YcTYYCLDTqAbNatAYnDZbUwsxm6ALnmC3mqo5yTmUEfcbSAk0EXN9n6UtZC7okJIE+5ITTmUCvNtiC1EWTFx69dHL9+ukZCkKpkBfxWzk2Wzgd6pDYMKcNZA1NLaqmGVGEvqoVgz2LdEINRsj+28HN0+N7l9cWl+9dO3565+bgjmsii4qaUbxhnHKiWp2HlgPSlpAFT2wX8soFPjY8B0irouFI7HB16dNrr613ceOrq++9+U6/wJuK+LnVIAIh22smz/Nt+0xxiA1S4K8S9XV+T7l+jp+tx//sqiXdg1vXe1M9oElgapbnues1S2rkOP/XqdIhrrIkhCzQSwm2zAHqSHdwaf6dkwdHt9bdeL3nAjCNrGfKxTinhkVKfRz0wJ9czc/V4cuXJcwyh6SUu4/UGPH214/XQ/D4Upd9Eohvl9n5hIG4ziMWOMghbscVALEysbJ9xUsFtlQZ17hNVWFD/fbbV9ZD8dpHXbxrFBPYLG09n25ihwcc+UgCkJybLoMEvTwQy5wUbH+yww+/vvfWOgQfnPl559FJTwk12gn62CAwgHYu3c8DoKkhFvMcFFmN/jOEG4/VTn/82ZE+POb3Z3uWA49LevZMg2I13YQ+7+aREYBKbDlKiqaFnFtvJ9k4X8cr6htV3H3/7TfWh+HRvrZOq0i8M0pshJcGuyhLJ5sOkG7xt3vwNPU6gCSQPdNhMj28qphC7xdDZw+ObqxH4KhtoznEqO94xVVD+gYlABg0DeZdN71QkJpWV6nRdBAEMj32WowWe1m/+aYdz4zEZ7supiBjox+7GTGI1mHsVMYuOoKKJQDVbrItp8z0mDraDxWSYsHbxrLy/fVH6xj4eNdRocQRRgxJuy4xAOBoGuiOEkLBhbtDPuEaiMyB4m0vg/CVRIlaePjevXU0nGw5KqRmNOtppfH+MzmCpoEGMB3hTvA+T8FoIiwhYS3fC0oYi7xN+8mTdy+vI+KtM0e7AuB4LOvceDrEyRo5xAG0v7pDgdrIJys6ImlPhqog4o3aveWPrHyPjDdRg5WNSDbigamXdQs+maAXiTdN4TnY6GujmCz5GJW2c3QSUOMx377ls6dXR8j33rOaVQ6QHh4EeJE41n1n8NPwvvCrUZbXqq4NoUA09z1f4InSvAMOaB1xAgluyffY+PBSk+Qt7fRgC0gOUHm8ZmJBL4jjdhda+dQkAXoeihBzcovJ3psxrtz0gm8mXF75fuPq00uIffHLlYPD/b6r7SnFI1J8VuC+I7nYIrpfjVLnbL5EL8FCokhgnkl3BSCGv3Agu+X7UZ2kcV4gdPfJ43U4rhwjC8FH0S7nkHLWx4+K3cg5WVLhDlEhPcZNsZsoxevnmWfiiQOySgXZyXGHfD9qDtZI1RSDO8dhuu/Rg/M9anDxGoxVApnu/+Xogt7JEuMtlU7WtQu82Wj7iJKTKU9CpwGZ/qcvP+8K1jvNj5VbJx6nTz4cRv4bV0+bdtHSrg/OswoqOazbSnF02jtlifD7Gk42NGiIKDm1V8XkwzM9+r6Lt3cvba7FWm3++5/c6mncj+5sFBk45kIhOAAXAy2Ssvi0d12eqS7euWMknuTU3sUOHVDnTrqYO3aPV+w/rXtw9QMf6x/ev1nTVgd7WoqDaR+sC1jUkxmXqQhDB/CO5u5/CgAoY9b38QH/lZ/2yw83z59XyIuzp23yrxw105pna2eJRtPTjnBsQS+oAnfGGso7d/+DrTScnncdcJXbHbyfuma0b6Xh0vUn195+fKX+tUfXPv3IrZ3ZYGdoRG0f3gWQuIKecXC0H8K7M9o83lIIVt4rYhUgIz72E3/HPcPgv3f37PnVrbqy6zGTspAt9jKqoF8RcLX9gPrOwakNE0/Y4QRS4TNAQDn5dMBkHWkowk94k3rXkYoREUcgkwGSJ6KgF8s6VVHROyvKsJcf9nwkFigOuN+FWIgB/DP5J+4PAgmfpo9I8a4lpYFL9CxmsGd6gKRImY/3jE1RgooOF0oC3Ov+gD0prFIctu1Zs87N2FF0KsNSIOg4lV0N6z1x4h3Bsq06TOOVIKb8QViEHAVc8W/L3HXPJ0MzPFQaj33CQGPNo0SVbT2HzhcTb2dutm7eRJwtdBR4odz/9eL9ruHL/fOiUg4li3pYn5Z35+4jgVcELLgcWGw9lllsTfWFijdboAB6ZKJ3Fd6PT266zcJeGJ6PZ91Vl8DuR44Xds17bkmBh7YQUPm2q/l2QaDxvvJAOnyCoHEB73DjITJD0pRojJZa1mOgDAwSPFbYGa7CmhANHkHPdrQGt4TEU/QihqL/7da6D7+q3vwxWyYwQs35Jo+hXzQrRrOechZQijydud7Z0dERX+eRHbmDhHj+cf9rTwlUPV/IgBpZKVFEpGFElgB8NOsmLMPsJQHPd9ZsWcxDI+IP6jKopek/V/2hI3+IFVfQlEWG4qIECJjUmkPbJbyaB7Lu4gvIXjUPdNdBNIoX8IXfAhxFDPhvAaTv9cQc4pR1f4usvKnX38cEzhsc68F+meJ94Z6xXaVdongBn3ktEOT5vftz3/wJpa+oNwneoIlAU7DczxdsiJME3wajI4SJAdhzyYV7UyCusHNVQ/ssEMT7g3Uf/oBk3zupDUjB0ITAunEvNaezHqlbhn7BSI3xW6GgnVml282KLOzcc6YhUx0/epeovwOg7W+d1ci4wWhyYFOeu1myXHncTAdFlfPchB7qt6Sd6CUBF+6TCDskvJKeh13mdu9m7J+uY3Gkt0w2NZihJHOhP6Z/dXKUFKK7WaGUznDHN1Jp60wnkXuUv4lmhRkHwD28zyil/aWx91XIL6DSdTCxjb1sTdQY/f/AsihJWlO2YLvWlQM/4pS4R+g9kbVQ1JvoM7SB8G2RxpvYycb+uot3s/nAlgnZtGvjS1ufMlgSBQGhPimEqfN0vmSB1p3RTckoWf9eJ5CSUlpmkHgSPcidzgASQvhqGmEn5tBACQ/vjcQg9D9UPQ3k6z28f/4nLJf2IV2ovxhffDdlBpCsNtatBpOeVrpXA2kF7mSuAr1f0avFbDZbUZLDFpScQNgtFGxQeHjH1svMuaOkakwv9zcAvDCh3kp91vbOuv2k21AfuJVPsSN5TzbJoYX0mdLVCSgWW9jhOTikzMN7Apkc+Emu6z28/wUbVPrF+yqjKFPIMQMA1kO6P1v162O+FWI2xumGh5QQWpCt6i5ccsd5T8IVteLo/TYZO9clCUAlcXtXpeG9wluyZ/fT7P9h2ZB4rZv33/9pujaAFyrWHUQFSgEUvu/HwgHjBrnNuzg/C9tk9SwBcD28TABSvS3nhu1aCQIN+KBPslaYAhjf3IZvlzsKSUM55QQsiEWTEv5t70xapoiBMJw96U56c0cEFQ8uBxVRQQ/iQVD0LAUigv//T0jSactMLzoaZ+I4z0n95JueflOVVKVSefpzR9/0wn93UioWAIbNrpag9svQSOh3jkPoC1yqcOsKNyb8D9yN5bDbwqcGwFqrzXIKxPwscT3mhQYAularku7VUgArXBipbODWaJLwMhTA31519NUY6DqoSKmImcHrKyh67IO1Fz1cxN91QU6NcAX+I95npRXslgCbKcxzsJVKo7HMxxoF2w416q7DmFLzMh85bWXicwgX+3p2hpIlnnnZrz5YdfTd9CoYKZTRHAyKLlvY17/PJalZAAJSL5qq9iLXyf5r4t/1Zm5BhMfkdPT3bGsc4opOAPQ7iz4c9aKClnn81AMAjm4efPGno+4vC//l+/O0IEmh+NaIElq8IWe2ft8bE1IxMtyetljOGjQb4jTDFwI9gbmFrZ18JYgeHQrdCF1Qd+xaiE9ameRWKNbzzghszbTNvUXdP393VALAkTLh3gY0wMXo3TPsIWDLCqyTTRDg6ebNViY7HzaL3zD/czl6J759VBMjOJ76EI5DJq47qunPv2aprxcd/Sew+DvLyNogaF7tBY6GHvIznf7z+6rktHBUdOUmM7F8FlvF2dhs5RY0A2TQG8YuB8zS7qztROJSHHhE9P+o+yYvlh19Pz1msVfxihpSGBdZ7qtSU50s6o6MWuzqjnbXxQhebGfhqnFLWK9X9jecjtMKW2h7ztNyj3HJMA2I/vfP0XzG9WNfpqfXV+I2CpaD0FwX1BlsRzsHPEzUqHuSYGNx6cHXzb0KawRjjFjtLgowuLiKwDgNt4WMSvd/bXgDU98t+wfFV59ATA9a3hXMPkBN3Ds6zCx3Tg/BLNe0A8+wUMmtFUQf4QDYxslfCgB28/BWwzV6F4mfzMjkiyo381NmXve1zfO57l8B2vjZzD9kKegpD4WoXlDUKIvwmgi2/gIhYhdqLKHRo9uo6GprcRPKh+3WjU8u8eAan43FZgHoi1B4ttiTa78tulsfwaOuUOLg6EG8GbVWTAGCO22xU1sehP8gLbfKe2FEziQN9h4dvVszd07Xz09e8Ko3nU4/S5FE+Cst5owS4W3yk23WMvY3tZMVeC7WR8/TS1hjwK+d7RkVZm1WaADmVVe8Rt0dQL9i7kx8/5SLdOH2zqYXs0HWo/CgeLs4Jk00BE724fr8bHTnf1nvv+LRDd7BAlUV3j2KRXIhGlxrb+XY1UK83W+e+LtUV92PCcdaXrlwgRJ/f/VltlIeUiXCb8R/FuJtV/vwarfv6FWu8aWDIkeFA8yDNpEUwOQdnJr+SpYYTNoaCZta9osTj8Ces1g4jihp9Zq3u0Rx22m9F48ge/Nst/kJ7fFzoQJyVAzALClHg8NL2jgeEBFW72knAFxUmaX0CeXz2dfxgXkkt2Z7kCGNJrmYz/EPidSoe9cfe47v4TutwYmY/Rh6a3JQHOfaRxg/XFfr5kfb5heH7A9NY5iaZOXJvefYmfTaVc1Rd0kcdOS46F5BpJYuPlhDkyPhh0UzSKhQVjt3P1QC038Y07ChMxr+Su78waPxKujHJDotGZepVQEJW22HarL6yxK3LfBE4kFpITIPAdpZuovXjSNZwJVFbu7cvX2DmA7nd+H/UJMiMH2zVGnaHyGzmBZZ6llf4ZmXzwP83SE+xG8wfYwoJ1UvJu2xqt7s8zbyRxrNjqpDOgo1y5NMntfw5aczo9qYIGlKKsMQAIn26iiJhljaNN8BTmZ4LTH6yiT83/O+tI8TJyZIbF3QdrwMmY5m0t5foltQ3bcAECg7NDa7oxHkL9HR2QkhWpWzSyPjgNTdABFOysEAkBGBsmfDwN/z9br7Hjr3ONJaUgjJBQ9OgoddKcjkAXRM66j81kJxry47XZKpLc3kbbqgtxBRly+QMuBQM9Zi66y8DH/N5IWOBYM7p4jKmOWD0GxnGFjZgOfipSJO+zjJGDfk72Cx+0pmzJQfTtNPuurJ8bG4HZoGnDqK38orRQzQvwatAKAWJDsirp9m5ZUcDDkmWFppklja4k+7IXp9d8Li93hAPis0tSuEVkd39qPuPNm2siTBcBX3bUuZ8nOjK5ztMusulg/xWVDHUx51Z5PE4W92sVNSFL+MKT83DiB/ilpQQijaVYo6UiUO6o6OiF6Ox0eXwCm/LmS9lxVb4RfPBHXRgy5KLLBK7JCg7rigdS0AFsGui3+abp8akpk+1Icu9+HGytDDg4UoPe6FT8/yf4qfFevCgn79Yp0GK2AOCequQgJ8vzwtin/ZFZTgKwjBou5gt0rNLh/a6FH3SsS7//asHscFX3uKk/4fQmtDJZY4LGMVQHuFHBoGAX6FwUhPf2Nm5AwCjJ9NnyC9irXh8qctxtoDp8d6SFGG/Caik000fd+q9AxaFeq+BrVDKHk8GBQSqu5PY5fJ9Ft56bzmC4mBpG3XtvYHjJHNbjlrBoSdCneV/N9t30g2dPTX28jL6kDi0yqr7IjppILo+c/z/h6YXvns2F8vgxAMYHYfdX71gclL/7nxz9g2fGjlXxZfW27NX9TEd0OHkZpdvnThbP2b4H5oEL+kAqjf7IY+NBBhF/mVs/n/mvinsSliLGcNTDDG+YXz0v+n4jfeVZ7CKtlYPihAGJOcOz8EZh0s6vafH+wZ0FaqECNdOYW3oU3HmYKUmk0AQAmNI4rBJ0e93z+Z1Cg1lvdMwTJl9oI7BpghOSX1PcZ0nLOdIdCcdV+KkaP6J+H5Eydgwigw5nSGdWaoiUGSkvwcH/93BNuP8bE7Mes/8zPE9xC5ZZK7tahPiPEHb9+SM6cDXhYZBgDj/MoFjI+Fj4zjOvn9B3Lm1KCmC9Y/Bwvq3rwhZ04UYXx4BClTp4N378iZEycGyMEHMNZRMvINlijY5GRrLvIAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV4AAAF1CAMAAACXnnLdAAAAZlBMVEVAgL/u7vb/0TcAAAD2bRvurT/2ilIuU4q2zuf3xjxTi8Hh5vL2uTu80OjF1Olunc05aqWLr9apwt9skKLXv1W6rmv4iCyXpILq6/XW4O/n6vT026vi5/P81Vvw59f42oH0s4hUjMWOD/VtAAAAInRSTlMcHBwAHBwcHAocGxscBhwcHBwcHBwcHBwXDBMcEBwcHBwR4hyMoAAAHSdJREFUeNrs2UuOrDAMQFFbNUG2HCsZOVEm7H+Tr/uppK4umk8IEEB1lnCxTALw+NjRJ++rT95r+eR9ddO8Iv2TyONOTpD3Ky286PsbFW6eV3qCN3SfwI3zynNw71q4bd6eYMw9+rbMKz1MoP5xfQ3zCsyg6w9wu7wCcP++zfL2BAtcfUG0yfuse//5bZRX4Nv957dNXiFYrItfuk5ELnhhbpC3rC5owC/MbGYp5Ry7C2VukreHEuTwDXPK8RKNW+TtoYwy/oUtxXjyST44r0jOPZTyOIrt1IN8ZF6JORk7hWIOJ7BZyt3jlA7KK11MjN+cQjl1OMvSCTfFEXmly4nxycMagXEeWz5b4d3zSkzGLwkI1qCAy7Cl7kSF980r0fA3D+sQFkin2cT75RXJCd8FgpUCluCTHCf2yivZGAdYYS11WMbSCQrvkvcZdyjAeh5LcfvA2+eVmBn/xgTrkcMVrGHhHfJKlxnHeKjhES8XeNu8kg3HOahCjP9daUlsmVcyTvJQJ+B6DQJvmle6hNMcQSUiUlXvQ3COsQznBoG3yivRcAZ72A6Rqg+uLHCD28Y2ebvEOMcpbItIfWAsYPtP8PZ5JTMuoLALGh1iDl6JSL3jZueI+rzRcAkm2IsGxzjgPMGTd9xkB9fnjYlxkQDjSKEOaeBh3B/kXwf4oG/v9Xk7w4V4qqBiIKhEvwI7mvxfd8AE1+eVhEtN99NNXnwU3MQZUF2DY1pFXkmMuMnwglad24Y7IND8/2bLj/3U542GBRzN5UX2BNXUjT9Lf9A9oz6vDOPW3If9zzOopmF0z/hD/mrU55XMWIaW5MVAUI90+SdNi/94ObvlVmEYCKOeC6g1lv/CBBje/zlPp7lwiolje032Ppnhq7KWVrj/UPXHmy/dhhjdA7EEuPHYMIfoj1cvVC1VgBfILKHIGLDg/nj1SsUqhuaBWA2PjBfAgbvizfgCEvQqQXbJ+MaDAYfoiLeVLpsCvEDoju+bYb443swIDObohrF1Mv4yKw4Yx7s20uV3vBwD0SW8b8Z7YBxvZpGG5+i+6gNXLewY6IFhvBNTq3zFE1/fPpjMMgMwCAiv3qldpub3er39CiWCWjQcr94IUFkzCtgvUL74jIHjnSC60nKYy3CdmKLQdT2OV68EyZWWk3jnnPDl9uApJ64xCByv3pkQsSmcpHyw4zhaJ9mP9Z/cgBQNx6sXwuRVWTUZOz5k3QXdmUrMKGcQhexwvBOhcmVHuRmjpLc9KJFMpwJ0aBhevTKBYlN0a8KPTwqSpJjoBo4z5gvwxfBuTKhElZxsEsZnBcays/RSESdDOGjAOF69ES5fdJCH8a88aA+p01Zf08jzxfHqhTrIFLWh9oA3JMaCDhHZ1qw6BMbxTgv1UNHzy3iQBZvf1AcarhFk+MJ4dR+6UtSF+vGoBxXul+6mJQ3wBfCiLUOtN0jsyhLzJekWL6iaK575BgLHuy7UR6oo3g4JXtcj2lH86u9MBNQvjLe4dnFvMJTF69HFxDleJqB+Ubw7TreYjsvjZQNME69dSqiY79Qb706dJP79TCEZvNhsYUSEX8zmnj7Ed7iMrjhVlF5ljjakfK21ow1yjtdRuXjC8fb3XW9UcfbqErwM74XsYz7x8Wsa8Ub/xfHqPrXLXhX/E4zMWAEkO4f4jXxL44v7wwCcaoAvHB7ziDegb+3YQzxEkowbFdqmPnjX6+Gm3nAa6USJAoo3pvMqOVE/4Q9Dd991DTOr2CSQhMrXJr8EMQ14cb5DShc33briTeJ069GXSv58m6QdiPJUzRfFO+F0nWkeWhNriDLNxRsPN3YYXlpAvHr5nOmm7ZGE47kW5TG8vgte2hG8OF0xwOtIcRH/mASg68jGvlt9KEf12gC8ekdN9xVdpVQIQf3oSCEp/hCC4+bTMrILbzdLLXh5bce7EaRzuCrc59uT5vkeWnIVrtxQhNR7SRrw4nyHHg2vnJZXuH2d6HsO9ZOTqfOckHYOJArGS6Tb8O7c+0QLc4R71O0e6lIr8nUrCn8yAXIDXnw8HtCGl/0p3O+vnG5z3Vwqqq6ZtmkTzSbj+2j7m8e7dC7d+y3SPdf3PTjnfyU/4jes2dTd/XEnE2AXvLRX49VLX9MN83/qzm63bRiKwYJRF5Fkd/OPrKSO573/U67pghFpYOlIVBaXlwO2YR9YiudY9qqokMEQvqIF3ulb9f52SvmJ7zJTeME3Fe+Z6QvJwQC5IfgVrR6QUaqlD9jsgIUOgZc+3lR68OKfbAJ9QaARfLcxd/2bFVdfcLOXKeVyWRheSD/a+PhVJ1t2eaMrubQXTwo/6Kvnb+l4+afz6pgHd+On1bgqSV6aqfxnPG06Xj5+VdHljfE6Da92PF8pNnbnAB0IvMz2xiN4xXwVL9mgbZI3Znw8KL6NQUaDG3HAEbrvHFCXjJc/3hTfxiBf5cip4jJXyHeTNfByOsnx8oUBnSxH2hv1EBlz7XWoDqXw2jYVLz/8X1rDXvz79eNbONvwKJNSIl7+QeWgq1x59XB9xIUpifdcEC8KA2FeZr7gRVwjIa6eKZYuhOR9bn2Qj85sO+Pxyj/Z4gUmbT6ldXUnTfAlpg9Gx4J4bWcUad6mfr2qXpZ7/xr1//QDnY1QS+OV77OHmHNfb/R74eoDP370NOL3lsaLyshlQw2yAMzWB/6D1SRfEq98mW1GqXXBd10y6sOeUsIeSuBFYcwsvQ2Y3hmYOt54GQrwsQBeaxSBF96N8yW2k8y88cDdg2KSATIu1bu/m6ap698rv/3lARMZ3DJ4xZ+MH5zoVIOuXJtleWY88BueM4E3sMSRL8uaWCrw7ZdXZ4nVGYMX5s2rZbre8O4GX5Wmp28h3tsn4I1Ew7wSy7Oi4pdoZwpvT+BFawi69+ntjPKvbR+P1wXwirIXcs/i2z+gnClm2wA58cGGeNhb/JrOFr+VqpiZDRqF0Qv7ztv+HcpSuyjxAxC/rhKebgxe2zN4twe29fG79cF79++1Az8Y0ZZ9ntd1uWpd5znO2B6onUPH4M3h6xShwE1N7SKIO/xMQcucb1/FvPUDOQFeOV/ted+OmxfjYePI74HWiIdbct/b0Xjl9YFvZ8aH16Oj90ZgdrmFj0G8/LvCLtrL6vqe77rJ1/GxEAb8+QoYZKLvKyzrr4xLfYq5LQ35sHvdiOlY5l+fb90oXJh4GK6xIPotgYQ4tvyD+P5HNl5U4LB/+fYweBlcBLH8dYVVNLrxt3Tk23TQrXT8eONX6wN+yKUeHsdKqu2AOLc0XjyPly8kr9EQeOBGx4P8kR+vZYuvPQXxkhFsXAivDu7VC7aHgaBL5sMxgJdPCL89FDuH/UMKXzfsj26Ab8vhhXojCl/gzdueaZdcyKr/oHkrfVm8UBcPPTjWa7BO9O+ucjcSv8cTgTf69NhtzhVedN+BP948RY237zuBNzol+y28DuCr1PWD9vsK3rB9WxYvZI3wCl/tx8ByHf6l3ytk6fKn2zmAlz7ftsLXy+7rkOMbztbHa4l2Mx6v7YXpcPPrdfp6cvS7St6LtmaLE40XejOydwbH2yKR4V//nGzAjfr0w43H22f5p97m65zODwhTPUb1pxrhaHGg8aI7iNMvbF/IjZt8/ZB9OV5/KN+79V9p2ebhzOJF882s9aCZ4l89DnnRq5tP9+UCbmrYV4D32BJ4Y0/nPWlfzM/pK54xjKcm8dZa9GTIntoCeG2X/60MXSf7FxFsEvHqGniIcLiz7yxd+yo+GKChyrUvFOKrR29EeAEHeMh0EK4lTwRe0N1QfvpCwae82nkj/5sbHq9uJHihM4nXAm5m+uoIXzdGn0DKHlXrOh8vpJPwHlsK71vHb1xfc/nCwncp7CN42W6mhXjtgcHbG25tBfvmFAho/GrhgciGsLRkroBObT7eTsXkiNMNcpIJ8Jaw3sDLeBd/io5MxdB7AC//kpCh0hdyWnpP4crYhU59lm4TuBEV7A6K/UYRMRpTAYyTzrkLYr+VmlwyNJj5ZHjtjX0V0ceIeKhL8AXh0XmvH4O30Vr2vAKX1envOfAPZV7jcgCcqSaAl39cIRmMFVEZiPIL+8oMzO+7yuOVDMaq1KEGGZ+xepi+qCDf8vadxf8/lpJPanKltIfpJaDJOU3HQ3n//hK/KaSoQ435UmczgWyIMKxH7QxKAgaa2GShiC/vkfELumG+U0VJ6+ZDJemu8teMFbFlIO8j6RehpmpfmuXvESqiMrB8mxepmmpHwh3qeDooInfp4W0S8611tRvBvATeeO7y8avlfKfdGBgjm6CaKYJuWKJK9QHuuyXwLHmJuwVeIhno6aKZXr6ZgVEbJHOxCnuXkvB4+1aAEQ0hnQ/Ay0zC/HJnSuJbs3j4aKDxYhLeHd9nAcaiV6T3Uwu8kit6u6hnn5qIjsZ7V6Yj8BLBS/JF/H4PA8O7UZ0jeK2COL7C+rD/I05yqqH5tsBLBC+3PYN/9w8Ys7BAR+Clg5f3b/2yd8ArgkEiC7zMPMGPb5iO9xzBM6wr0+EQwNupkhpGkX/36uBlBVyxTiG8RiWKX+9MeXwf3tKWtFjAYNFu4n1T6pvwfZluVpW7MO4f7u51OW0YCgKwQ2NAtmrCxS5gfHn/pyxxSbet7Uj2rgL0/Otkpp18sz0+EljC6DDCu42exzfcXnAFWoKXmMqo+Yz3BbC0B+P0PaKOp7WDV1t7sa/+IXdV7Viv9UJXem2+BC+ZX375xgMjqx1rWQM2FC96r76SnJjPlHOEbcuatnQ337Vrcniq/uALbOxyicYarI7g5edePr/w5YAdk1pTLt+rJYB53h3hSy6Q4avsw9hRLF+LzrcJ7Hs8gZfw1Q/AFk4UcdNUqOZjgdC+3nzLsAFOT+/PtshjN/2ZBgjUssYh3XiK1cvuZ51v2ABfwMtumvEPOL1vMbhXUBev8MV2QoBCep337D/bA+4X4ctAtR/478Bl5Q6wPr0AzrZEhqkGHAvi+zcdegN826YKFuAzeEcrzXY34ecagLsakCtvP0J+K3l+sa4Ar9N4kyh5fcZ/Grh96dVHeOHbhGoQR/B6EeuEk4P18LWFvPnW+CF8F/AV834Hr2eKNcIHE8fh81uM9Ab433y7BnF3Xt12Wr6weB0q3AqjHn6woX4fUBfgAZf68uoHttx0vtoG4eZti9dB37IK4evm1S/pMJl1L0OHbRClI7zwXQRowCfwTqyNYDIzcRy6AbdjnRdVwPdxeLf06IBTVAI2iLY3lY37VouqVPOuvxO8TOWdW2jfdjy8KNyoLva9zObd0cviBXxtsM+Ilr3NnJH43vpDVT4Gb0av2/DCeqAAgxetweWrHdDO83np0cz4+aKKgltXtK+j9ef9kmX9X/Ae/jlNKMwIUfdG3pH4Ir/NA/DyS7f8ZhbWt+yNvKPxRX/4H3j3H5wWJ7npO/Dyhovsun1lOxDHe/IecB5LuAAXZQ1dBy+uT25kvGuWl38lFr6xkQe4WLbtEo3B1/fpedEd3Kfs8jOwmxe+FevL82aJYEt98ChNJsC8L/Jb35N3J9nz7fmiQRDALG+L/Cp59eH1vwohvrtv8acv3m/lefmD6fnzCIy9O/DyH9+qkfPyN0LPvV/NxFN9TREkvmi/VX0XXtl3dxIz6msXRICJ+GJ8gC/HSz/V+IcbfFHGCzhEfHH9ViXg5fsuP/pifEBZpgPz8e18G56XXU7woy985wS4kPNieuDaw3ky7zZSf1edyC98ZbyoEocMULx8Z+D3deA7B9jE6uaLy/kalpe4vlE7m2H8nXybR6xJcI+Xe7pdwMt1Bn7lhvzOC7AtlPEF76JkeXldfjZDARYB9qpCzItD9xhe7uR//ffUTd/X+vkKAtzjpT6bP4GXyC69q+72NV8EPHTtbBOQN/x7bnvj8EWDCN+Cwdt0vNzsuwYvvxLmuy98/QKsT3CB1oCay5uCl9jf1Q4P8HUHWJ/gAq0BVTK87MUKfB08fe0XAEOX5z2u/T6IT8NkF93X6YsAh2sR4O1wUQ3Fy1+swHdfX18bDBi8MXQ53jN4iU0yfXzhO2cGBnBcTOcd+Acqmlc/NPB3XFjCF8DEoWgs7wW8/HJCfwaBiR3AYuECf/OX8WZKxjfHK/K+vmYicOFhO4iL3qvn1Y9kb96zL3yJEQLC9nPhAicc6XjTk5M33Up1R3kj4+eLWqDILlFYR7cpCd5vEfH6mo73x7CuhSfVIUD8XjfWa4FWz3t08u60uqtx3r337IsyzPVtuMDVVVVNrCrAG3wtvFp9NjxM1uVvwLwvb5aowztp9rUfLcDeFbia23rPDt6tWBe8rpUxdKd34EcJb3oBb3jdyKEb7fu6Bn+4X4DLF+bJNsq7i9ThnbKxY+Hm8o3DBrgm9svAG7rxIrw+GzsW/+vhe48OYfKU2NAZ5c02al3wuuNr+2AmvgtwnmwzYkkM3qCNF7pes5m5aj2E72EfRdtUy6tfT7yHl75711j3KkOve63NLN/TjfdBWsO1ckP5WhNEd2Z+16O8qV53JTn60OGrBTb5VXe27xG8obcaEF5n9yV9YyvDPWB0gu/UwQG8xExG62JpwfryCTbmcMjzHzCIZvXfyxhvqtdd6W7eNXFIYJP/2O/x+8/PbwreoK1hhfBS3QECHgG2KltUspu+JP4OXugm8uy+aS/eNbE+wYcrbfR5bSe1XvCGm8newKu79xwNmAcGrjtUSTa59fZ5t9LOAF3VvZrIr6pHGARX5puehnkzve5Kfq08AsxH2CC3Il+0XvCiNUj7LsJLPNwY39h+ImzQFPxqk3kvKoZ407vrojsIJghk2Aw/zDyawrzx9zzImyVy3RXxbV/eFxm25rexOVxpYTupdt77Of2LdFOlLsLLxJd/wqHyKEoS9lfcpp7fS+9fA719AF3EVxZg8HLlv7w4DvFmet0V9x6suyb5Ro6SjQ+XAd50o9d9E14pzzeIn9zda27bMBAE4Aj6YXkXIkXagh8x2t7/lG2BBoPYskhphxVtXqDp1+1w+RAjHF/N3Ov9xquxDl0cWtALGJNZ2fg9T/BGYeGadHFowU/gE6l+ouZmA3g9S9fGi30dvu9I4hW3mDdWo4sTeTowiTcRv+evrhe8zteji96BncDC8o2JJdsdrwYWLob5fTN+AR9o5RtTBxU9eEmr4TCYdbGy4AKDt3z8ni8PvJ7yD+oN0WBKB1yeKtw6YITkdg54I+GPc03jBoYuegd6BI8fvPG0fC/3vCqcVlsPhGjAlxbMhODz+qfbOfe8xnkN28xxsOtiYcwHHoXoG2ezAbzWzQbc0VSPaGCkAzuCjwdm+erMmgK8GnlNiiPoYmXBr+AYeLziZvoG8DohbnAcErqm3sG+k/bJvMYR9Vnxdi14vS0Ymn8D6Ut7YIdfwZ/M99i8mzqBv+Pl/hkazLWLj4z5wp/YACiTDlf0DeAl+eLIY/Pw/fK9A/75A7+pls+LbMCgdSg4sKskHf7q3vn++vH1n8wX4T3fF2/L/mPcRw3p8Nf1z3jozP7xNho9P3uRDRj0/SO/TToAFqyTcxuA+YdC0AUvuX6Vw3syTWVpXnsPETOKt+X3KIH6+lZ+0cI2j7eJQo7eG5cXQ9Rwlcp8YAzaJbxOqItiTGx83o9Ivwg4Lm++0uMn7yuHkMgGKq8EJV9jPe15Z5jozHj/ydzjdgOaXvAKfQ2jgRK+Rx4ueGlThJ9NXvAG2gYdt/eVkWaLccTPSD+t6CZ5nfCPnzjpsBgXt3jvlhhohVkThJ9PXvBq4O/fR0o65ODidnRe84afkLwgVmw3fOPl3UkXR53cJOe8ErB5gzSveU0nLw6DSCMo9brlPlG5i23xNE5gXyPRyzPexvFP/9WXfZUaX/ys4MXfmL0e7toJ3ibw77aFAnMbcgG2q3g10K/woXgfeEvEgyux7bCHrYk3iPFvmSxe8FK/gsfZmxT4bW6E5xo+GfNaXs8LXg304+lI4B3vcPGVsIk30E8prjO8TF/02yrU8N3j5Tgrr+PM3+m2AbyNo5evZ4QvdIFr47VPNPnFy/90BdNqJIbv3myLh9ADXfeM4p3iJcdDoO2qyxG6LF7+ZkNzm24binw2iHjwtdx2+MbLn9cU0TDD26hwm98oFfKOYtMNz4s3wduQtyad3/4m3yMv/fD9iuSd4YUvbXYLddzVIfKKZjdl4MUIJN9I6h2kLl6JTXZTBl5u/eLncB91XJSkZW/UiVtlSN4EL7F+vXLu6xzZvEch7qFjXuszeTUKLx4qbB0MvOKWRkORNyQxCVTYOhi+Xpm+jJ7PS10e+zpbh/W8YUIXxZvg5ftGSuuwr4UXwZvV8oKX7Yufx0l1c9taXu8m38xZzsv7Ql6dfxte6GbNa+At9ruJJTpfXesAXkPwIhryefnv+HoX3oQ3aKJryOXFCATf+joz8BqnNSwo1vGq3VfkLXjFTT5WtpoXn3ZsPg4V8MYpXUTDYl7cgd18HPab84bmeTR0bR4vaYJ7Q97J4L0iGgy8hgBm8R435g26qicDb9W+fF7GoxjQTfJem/kRN53ghM0r9vfgFMGb5r2cU74LAvjdeOPKaABvf9GEr5p9h2p4R3vwouPN4W37W5PyjWbfoZI9ndH8VpleEA05vG2P+KUHBHzr2HQYjS0ZdPtc3rZL+2ow+74ar7iZaQ26ad5U/OIBGpPv8FK8EpuZ4O3afN62R/tgm+H4viN32XayvcGJ1doS3sT0xtpj3w2vwxum399cyYvprWAHMeyGV+GdbskQvMt427a7NTnA8r/r98TlPTCahq5dzNt31yzfIMb6fQVer4SmAbzwTQ/njb71807qNjfU7lJetA/FZjj41s4rca5p6PrFvPAtX8A7+G4wtUlG7U7p6kJd8GJ0t4K+KN/ddrz7DN7p2sVaeDVv3100z1ejt/hux7uy4T2jdlfwwvcGX/oaDrzDVrxHww4vdBfzwhf5W6yAd/A17jnwecOsbteaeJEPJXvg4a9vnbzzun1v4UU+ZBewvBjvuOKa6fmC4DXxIh/KAu8yffmHQafFywlNJEM+L+o337eJ/m14vZvN3Z7D23bIX3YLAd7dUBvv7+buqLdNIAbg+CPk2MBwQWxRX/j+X3JLuuZPexy+m11aP0aJZP1kWYYDJ/ekHrp2XvpDcUSkanibL3iM5BIrL4VfDLrwmnwHaaQOWChfR95LEsozOnrt3my68Ka+t/LmIA3A3ryFuyH399HfP946z7Gmdjuldg281K/Oy6hVxdtYefVF/yhflDeKp06pXSde6re9dSW8fXgDE/HnXQzb6BPly5JLSPrMyQ+6Xrz4vpTxIiZVvGLgZWN6TSy5fGTInPyg68XLfMYFnMoLWUE05d+dDZv+04j5e0y9Urt+vNQvDVjhxRc0lbf5v0fMqFs7L3fwxrTtouvMi287Tp3Kiy/AXrz2wiWuMaP74YK42+ii4cmL7zqMvcaLbxEwX9MiXA4L98fr5EUwo+l/RUrOzL3KQObIi28YKOEcL2y6nJTzxtxW73+q+euLPeQ5TYU0JqXtOvPi294B78SdwgscdgbeZEmnstBbHd6WrC43dDql7frxUr/r64q0ceo7lRdfsfPOG12NVidejq4eQ8/9R0XXixfgt144DH+N+2cdd10/pryKX1POe33i6rQ6cTycvifarqLrykuDIEIYHhHevzdBwoKghffJ438Kjy5HxL9aZWTw5sV3zQhINmN5RPqDct74eQdtkgyHA21XOVZz4iUevmGfVyrvJcB78vvw83H7D78NjcHG+xNfhVevyaacd/6so4qdFNbVXVfn1YGbSl6B9+SToDQFkg0GXDsvvo68cvJJ0O74uKN7Ki/RAnzEW9wb5NxtA/MmSRF4wTXUromXAmZEwzTh9eoNixstrVfSyTG0Zl07L75rOOT9rr0h8nzbNhFD6TrzAvzOSyp4xdAb7LzPM226FLhmXTsvBZzlFYX3q6bea/zw4qLouvb4A0QmhcTL10GVAAAAAElFTkSuQmCC\"","module.exports = __webpack_public_path__ + \"static/media/proemailPremiumInverted.5845be5d.svg\";","module.exports = __webpack_public_path__ + \"static/media/proemailAccountTreeBlack.2a2c1abd.svg\";","module.exports = __webpack_public_path__ + \"static/media/bg_blue.72d00287.svg\";","module.exports = __webpack_public_path__ + \"static/media/snappy_mail_trial.accfbf48.svg\";","module.exports = __webpack_public_path__ + \"static/media/assetProEmailBanner.3cfe87e3.svg\";","module.exports = __webpack_public_path__ + \"static/media/mailTitan.3247154e.svg\";","module.exports = __webpack_public_path__ + \"static/media/mailCPanel.bb612d30.svg\";","// extracted by mini-css-extract-plugin\nmodule.exports = {\"bottomInfoWrapper\":\"styles_bottomInfoWrapper__3phxT\"};","module.exports = __webpack_public_path__ + \"static/media/proemailPremium.636a4211.svg\";","module.exports = __webpack_public_path__ + \"static/media/colorfulHorizontalLine.6ba263c5.svg\";","module.exports = __webpack_public_path__ + \"static/media/reserved.96961cc8.svg\";"],"sourceRoot":""}