\n {selectLabel &&\n \n }\n
\n}\n\nFormSelect.defaultProps = {\n isHalfWidth: false,\n hasInitialValue: false\n};\n\nFormSelect.propTypes = {\n dataArray: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n })).isRequired,\n isHalfWidth: PropTypes.bool,\n selectLabel: PropTypes.string,\n value: PropTypes.any,\n onChange: PropTypes.func,\n name: PropTypes.string,\n ariaLabel: PropTypes.string,\n hasInitialValue: PropTypes.bool\n}\n\nexport default FormSelect\n","import styled, { keyframes } from 'styled-components'\n\nexport const buttonColors = {\n light: {\n border: '#000000',\n text: '#000000',\n background: 'transparent'\n },\n dark: {\n border: '#000000',\n text: '#FFFFFF',\n background: '#000000'\n }\n}\n\nexport const oppositeColor = (variant) => variant === 'light' ? 'dark' : 'light'\n\nexport const ButtonWrapper = styled.a`\n display: block;\n background: ${({ variant }) => buttonColors[variant].background};\n padding: 10px 20px;\n outline: none;\n border: 2px solid ${({ variant }) => buttonColors[variant].border};\n cursor: pointer;\n font-size: 0.9rem;\n text-align: center;\n text-decoration: none;\n \n &:hover{\n background-color: ${({ variant, disabled }) => buttonColors[disabled ? variant : oppositeColor(variant)].background};\n border-color: ${({ variant, disabled }) => buttonColors[disabled ? variant :oppositeColor(variant)].border};\n }\n \n ${({ disabled }) => disabled && 'cursor: not-allowed;'}\n`\nexport const linkStyle = ` \n font-weight: bold;\n text-decoration: none;\n text-transform: uppercase;\n vertical-align: middle;\n`\n\nexport const ButtonLink = styled.span`\n color: ${({ variant }) => buttonColors[variant].text};\n \n ${ButtonWrapper}:hover & {\n color: ${({ variant, disabled }) => buttonColors[disabled ? variant : oppositeColor(variant)].text};\n }\n \n ${linkStyle}\n`\n\nconst loaderColors = {\n main: '#e2e2e2',\n second: '#545454',\n}\n\nconst spin = keyframes`\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n`\n\nexport const Loader = styled.span`\n border: 4px solid ${loaderColors.main};\n border-radius: 50%;\n border-top: 4px solid ${loaderColors.second};\n width: 9px;\n height: 9px;\n animation: ${spin} 2s linear infinite;\n display: inline-block;\n margin-left: 3%;\n vertical-align: middle;\n`\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport {\n ButtonLink,\n ButtonWrapper,\n Loader,\n} from './Button.styles'\n\nconst Button = ({\n disabled,\n onClick,\n url,\n variant,\n buttonText,\n isProcessing,\n buttonProcessingText,\n}) => \n \n
\n \n onChangeEvent(e)}\n type='checkbox'\n />\n \n \n \n \n\n {(error && errorMessage) &&\n
\n )\n};\n\nCheckboxInput.defaultProps = {\n checked: false,\n isBold: false,\n isSquared: false,\n isWhite: false,\n error: false,\n className: '',\n isRound: false\n};\n\nCheckboxInput.propTypes = {\n label: PropTypes.string,\n name: PropTypes.string.isRequired,\n checked: PropTypes.bool.isRequired,\n value: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool\n ]),\n isBold: PropTypes.bool,\n isSquared: PropTypes.bool,\n isWhite: PropTypes.bool,\n isSmall: PropTypes.bool,\n isRequired: PropTypes.bool,\n error: PropTypes.bool,\n errorMessage: PropTypes.string,\n onChange: PropTypes.func,\n className: PropTypes.string,\n isRound: PropTypes.bool,\n};\n\nexport default CheckboxInput\n","import styled from 'styled-components'\n\nconst colors = {\n darkGray: '#333333',\n}\n\nexport const RadioWrapper = styled.div`\n position: relative;\n display: flex;\n flex-direction:row;\n margin-bottom: 2%;\n \n @media(min-width: 768px){\n margin-bottom: 2%;\n }\n`\n\nexport const InputLabel = styled.label`\n text-transform: uppercase;\n font-size: 0.9rem;\n margin: 0.3% 0;\n`\n\nexport const Input = styled.input`\n background: none;\n color: ${colors.darkGray};\n font-size: 0.9rem;\n padding: 2%;\n border: 0;\n cursor: pointer;\n \n @media(min-width: 768px){\n margin-left: 0;\n }\n`\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { RadioWrapper, InputLabel, Input } from './RadioInput.styles'\n\nconst RadioInput = ({\n name,\n label,\n value,\n checked,\n onChange\n}) => (\n {errorMessage}
\n }\n\n
\n )\n};\n\nexport default RegisterProduct;\n","import React, {useCallback, useEffect, useRef, useState} from 'react';\nimport dynamic from 'next/dynamic';\nimport Modal from 'react-modal';\nimport {isObjectEmpty, toggleScroll,customJsonstringify} from '../../../../adapters/helpers/Utils';\nimport { WarrantyExtensionConstants } from '../../../../adapters/helpers/Constants';\nimport throttle from 'lodash/throttle';\nimport {\n removeProductFromDisplayedList, removeProductFromJanrainList \n} from './../../helpers/product.helpers';\nimport {getPostReplaceEntityObject} from '../../../../adapters/model/service/api/svc';\nimport {postWarrantyRegistrationUpdate} from '../../../../adapters/model/service/warrantyExtension/warrantyExtension.helpers';\nimport {\n deleteIsCreatingAccountFromLocalStorage, getJanrainCaptureProfileDataFromLocalStorage,\n} from '../../helpers/localstorage.helpers';\nimport {\n postReplaceEntityUpdate\n} from '../../../../adapters/model/service/api/svc';\nimport { optimizeImage } from '../../../../adapters/helpers/pagespeedHelper';\nconst MarkdownText = dynamic(() => import('../../../MarkdownText/MarkdownText'));\nconst Eyebrow = dynamic(() => import('../../../Eyebrow/Eyebrow'));\nconst Image = dynamic(() => import('../../../Image/Image'));\nconst Button = dynamic(() => import('../../../Button/Button'));\nconst Icon = dynamic(() => import('../../../Icon/Icon'));\nconst DotNav = dynamic(() => import('../../../DotNav/DotNav'));\nconst Label = dynamic(() => import('../../../Label/Label'));\nconst ResponsiveImage = dynamic(() => import('../../../ResponsiveImage/ResponsiveImage'));\nimport Link from 'next/link';\n\nconst ProductManagement = ({oralbProductList, profileProductManagementTab, commonLabels, customStyles, closeModalTimeoutMS, setOralbProductList, isGCSAPIDown}) => {\n const [currentPage, setCurrentPage] = useState(0);\n const [numCarouselPages, setNumCarouselPages] = useState(0);\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [lastScroll, setLastScroll] = useState(0);\n const [requestedProduct, setRequestedProduct] = useState({});\n const [currentProduct, setCurrentProduct] = useState({});\n const [isDeleting, setIsDeleting] = useState(false);\n const [isProgress, setIsProgress] = useState(false);\n const productCarouselRef = useRef(null);\n const dotNavRef = useRef(null);\n const viewWarrantyLink = profileProductManagementTab?.viewWarrantyLink?.fields;\n const registeredProductLimit = profileProductManagementTab?.registeredProductLimit;\n const dummyImage = profileProductManagementTab?.dummyImage;\n\n const janrainLabels = {\n title: profileProductManagementTab?.title,\n profileIntroText: profileProductManagementTab?.profileIntroText,\n productManagementText: profileProductManagementTab?.productManagementText,\n primaryButtonLabel: profileProductManagementTab?.primaryButtonLabel?.fields?.text,\n makePrimaryButtonLabel: profileProductManagementTab?.makePrimaryButtonLabel?.fields?.text,\n deleteLabel: profileProductManagementTab?.delete?.fields?.text,\n registeredOn: profileProductManagementTab?.registeredOn?.fields?.text,\n registerProductLinkGwe: profileProductManagementTab?.registerProductLinkGwe,\n tryTheAppTitle: profileProductManagementTab?.tryTheAppTitle,\n tryTheAppText: profileProductManagementTab?.tryTheAppText,\n downloadOnAppStore: profileProductManagementTab?.downloadOnAppStore,\n downloadOnPlayStore: profileProductManagementTab?.downloadOnPlayStore,\n productManagementModalTitle: profileProductManagementTab?.productManagementModalTitle?.fields?.text,\n deleteProductModalTitle: profileProductManagementTab?.deleteProductModalTitle?.fields?.text,\n productManagementModalSubtitle: profileProductManagementTab?.productManagementModalSubtitle?.fields?.text,\n productManagementModalConfirm: profileProductManagementTab?.productManagementModalConfirm?.fields?.text,\n registeredProductLimitLabel: profileProductManagementTab?.registeredProductLimitLabel?.fields?.text,\n gcsDownErrorMessage: profileProductManagementTab?.gcsDownErrorMessage?.fields?.text,\n previousLabel: profileProductManagementTab?.previousLabel?.fields?.text,\n nextLabel: profileProductManagementTab?.nextLabel?.fields?.text,\n ...commonLabels\n };\n\n const commonControlBtnIconProps = {\n name: 'thinChevronDown',\n size: 2.4\n };\n\n const updateNumCarouselPages = () => {\n if (window && productCarouselRef?.current) {\n const carousel = productCarouselRef.current;\n const children = carousel.children;\n let fullCarouselWidth = 0;\n\n for (let i = 0; i < children.length; i++) {\n const element = children[i];\n\n let elementWidth = element.offsetWidth;\n const style = getComputedStyle(element);\n elementWidth += parseInt(style.marginLeft, 10) + parseInt(style.marginRight, 10);\n\n fullCarouselWidth += elementWidth;\n }\n // This fixes an issue where the result of \"fullCarouselWidth / carousel.offsetWidth\" was a low decimal point\n // and created less carousel pages than expected\n if (oralbProductList?.length % 3 === 1) {\n setNumCarouselPages(Math.ceil(fullCarouselWidth / carousel.offsetWidth));\n } else {\n setNumCarouselPages(Math.round(fullCarouselWidth / carousel.offsetWidth));\n }\n }\n };\n\n useEffect(() => {\n const handleResize = throttle(updateNumCarouselPages, 100);\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n }\n });\n\n useEffect(() => {\n updateNumCarouselPages();\n }, []);\n\n useEffect(() => {\n if (!isObjectEmpty(oralbProductList)) {\n const product = oralbProductList.find(e => e.isPrimary);\n setCurrentProduct(product);\n }\n if (document.querySelector('.js-modal-container')) {\n Modal.setAppElement('.js-modal-container');\n }\n }, []);\n\n useEffect(() => {\n window.addEventListener('scroll', handleScroll);\n return () => {\n window.removeEventListener('scroll', handleScroll);\n }\n },\n [lastScroll]\n );\n\n useEffect(() => {\n toggleScroll(isModalOpen, lastScroll);\n }, [isModalOpen]);\n\n useEffect(() => {\n closeModal();\n updateNumCarouselPages();\n }, [oralbProductList]);\n\n const onScroll = useCallback(\n event => {\n if(!productCarouselRef.current) {\n return;\n }\n\n const currentRatio = event.target.scrollLeft / productCarouselRef.current.clientWidth;\n const min = Math.floor(currentRatio);\n\n let currentPosition = currentRatio < (min + 0.3) ? min : min + 1;\n currentPosition = Math.max(0, currentPosition);\n currentPosition = Math.min(oralbProductList.length, currentPosition);\n\n setCurrentPage(currentPosition);\n },\n [productCarouselRef.current],\n );\n\n const handleDotClick = useCallback(i => {\n if(productCarouselRef.current) {\n const nextY = productCarouselRef.current.clientWidth * i;\n if(productCarouselRef.current.scrollTo) {\n productCarouselRef.current.scrollTo({ left: nextY, behavior: 'smooth'});\n } else {\n productCarouselRef.current.scrollLeft = nextY;\n }\n }\n }, []);\n\n const handleClick = event => {\n if (dotNavRef?.current && productCarouselRef?.current) {\n let activePageIndex = parseInt(dotNavRef.current.querySelector('.ob-dot-nav__item--active .ob-dot-nav__button').dataset.index, 10);\n const clickedButton = event.currentTarget.dataset.controlButton;\n if (clickedButton === 'next' && activePageIndex + 1 < numCarouselPages) {\n activePageIndex = activePageIndex + 1;\n } else if (clickedButton === 'prev' && activePageIndex - 1 >= 0) {\n activePageIndex = activePageIndex - 1;\n }\n const nextY = productCarouselRef.current.clientWidth * activePageIndex;\n if (productCarouselRef.current.scrollTo) {\n productCarouselRef.current.scrollTo({ left: nextY, behavior: 'smooth'});\n } else {\n productCarouselRef.current.scrollLeft = nextY;\n }\n }\n };\n\n const handleScroll = useCallback(\n () => {\n if (!document.body.classList.contains('noScroll')) {\n setLastScroll(window.pageYOffset);\n }\n }\n );\n\n const closeModal = () => {\n setIsModalOpen(false);\n\n // Needed so the state only updates once the modal is closed and not during\n setTimeout(() => {\n setRequestedProduct({});\n setIsDeleting(false);\n }, closeModalTimeoutMS)\n };\n\n const openModal = event => {\n event.preventDefault();\n const product = JSON.parse(event.currentTarget.dataset.custom);\n setRequestedProduct(product);\n setIsModalOpen(true);\n };\n\n const deleteItem = () => {\n setIsProgress(true);\n const janrainProfileData = JSON.parse(getJanrainCaptureProfileDataFromLocalStorage());\n const newLocalStorageProductList = removeProductFromJanrainList(janrainProfileData.traitProductType, requestedProduct.id, requestedProduct.orderProductId);\n const newDisplayedProductList = removeProductFromDisplayedList(oralbProductList, requestedProduct.id, requestedProduct.orderProductId);\n // remove id from localStorage product. /entity.replace doesn't accept them. A new id will be generated.\n newLocalStorageProductList.forEach(product => {\n delete product.id;\n });\n\n let postObject = getPostReplaceEntityObject(janrainProfileData);\n postObject['traitProductType'] = newLocalStorageProductList;\n\n //remove primary product attributes\n if(requestedProduct?.isPrimary) {\n if(Array.isArray(newDisplayedProductList) && newDisplayedProductList.length > 0) {\n const oldestProductIndex = WarrantyExtensionConstants.janrinProfileOldestProductIndex;\n const oldestProduct = newDisplayedProductList[oldestProductIndex];\n const primaryProductSku = oldestProduct.productId;\n postObject['primaryProduct'] = primaryProductSku + '_' + oldestProduct.purchaseDate;\n const traitPrimaryBrushValue = {\n traitValue: null,\n productTypeCode : oldestProduct.typeCode\n }\n postObject['traitPrimaryBrush'] = traitPrimaryBrushValue;\n postWarrantyRegistrationUpdate(oldestProduct, janrainProfileData, true, false);\n newDisplayedProductList[oldestProductIndex].isPrimary = true;\n } else {\n postObject['primaryProduct'] = '';\n postObject['traitPrimaryBrush'] = {};\n }\n }\n\n const postReplaceSuccess = () => {\n setIsProgress(false);\n };\n // GCS post, callback janrain entity update on success\n postWarrantyRegistrationUpdate(requestedProduct, janrainProfileData, false, true, postReplaceEntityUpdate, function(){}, postObject, postReplaceSuccess);\n setOralbProductList(newDisplayedProductList);\n };\n\n const makePrimary = () => {\n setIsProgress(true);\n const janrainProfileData = JSON.parse(getJanrainCaptureProfileDataFromLocalStorage());\n let postObject = getPostReplaceEntityObject(janrainProfileData);\n\n const primaryProductSku = requestedProduct.productId;\n\n postObject['primaryProduct'] = primaryProductSku + '_' + requestedProduct.purchaseDate;\n const traitPrimaryBrushValue = {\n traitValue: null,\n productTypeCode : requestedProduct.typeCode\n }\n postObject['traitPrimaryBrush'] = traitPrimaryBrushValue;\n\n const postReplaceSuccess = () => {\n setIsProgress(false);\n };\n postWarrantyRegistrationUpdate(requestedProduct, janrainProfileData, true, false, postReplaceEntityUpdate, function(){}, postObject, postReplaceSuccess);\n // mark the previous primary product as non primary\n if(Array.isArray(oralbProductList)) {\n const primaryProducts = oralbProductList.filter((product) => product?.isPrimary);\n const previousPrimaryProduct = Array.isArray(primaryProducts) && primaryProducts.length > 0 && primaryProducts[0];\n previousPrimaryProduct && postWarrantyRegistrationUpdate(previousPrimaryProduct, janrainProfileData, false, false);\n }\n \n const newProductList = [];\n let primarySet = false;\n for (let i = 0; i < oralbProductList.length; i++) {\n const product = oralbProductList[i];\n if (!primarySet && product.productId === requestedProduct.productId &&\n product.orderProductId === requestedProduct.orderProductId &&\n product.id === requestedProduct.id) {\n product.isPrimary = true;\n primarySet = true;\n } else {\n product.isPrimary = false;\n }\n newProductList.push(product);\n }\n setOralbProductList(newProductList);\n };\n\n return (\n \n
\n {productSelected &&\n {janrainLabels.selectProductLabel}
\n- \n {currentProductList.map((productVariant, index) => (\n
\n
\n }\n { !productVariant.fields.hasWarranty &&\n \n
\n\n {janrainLabels.noProductWarrantyLabel}\n
\n }\n { productVariant.fields.hasWarranty &&\n\n \n
\n }\n\n \n ))}\n \n \n \n
\n }\n \n
\n \n
\n }\n \n ) : (\n noWarrantyError !== '' && \n
\n \n
\n {!isCreatingProfile && !isGCSDown &&\n {janrainLabels.gcsDownErrorMessage}
\n }\n{noWarrantyError}
\n )}\n\n {janrainLabels.title} \n \n
\n )\n};\n\nexport default ProductManagement;\n","export const inputs = {\n formName: 'editProfileForm',\n type: {\n text: 'text',\n email: 'email',\n radio: 'radio',\n date: 'date',\n hidden: 'hidden',\n phone: 'tel'\n },\n field: {\n firstName: 'firstName',\n lastName: 'lastName',\n emailAddress: 'emailAddress',\n phone: 'phone',\n addressPostalCode: 'addressPostalCode',\n dateOfBirth: 'dateOfBirth',\n addressCountry: 'addressCountry',\n birthdate: {\n dateselect_month: 'birthdate[dateselect_month]',\n dateselect_year: 'birthdate[dateselect_year]',\n dateselect_day: 'birthdate[dateselect_day]'\n },\n traitProductType: {\n traitValue: 'traitProductType_traitValue',\n imageUrl: 'traitProductType_imageUrl',\n registrationDate: 'traitProductType_registrationDate'\n },\n traitBenefitPreferences: 'traitBenefitPreferences',\n traitBrushHeadReminderOptInFlag: 'traitBrushHeadReminderOptInFlag'\n }\n}\n","import React, {useEffect, useState} from 'react';\nimport dynamic from 'next/dynamic';\nimport PropTypes from 'prop-types';\nimport {inputs} from '../../Janrain/janrainForms/ProfileForm/inputs';\nimport { getJanrainCaptureProfileDataFromLocalStorage } from '../../helpers/localstorage.helpers';\nimport { getPostReplaceEntityObject, postReplaceBenefitPreferences } from '../../../../adapters/model/service/api/svc';\nimport {FormBirthdate, FormSelect, SubmitButton} from '../index';\nimport {CountryCode, Constants} from '../../../../adapters/helpers/Constants';\nimport {setMonths, setYears} from '../../../../adapters/helpers/Utils';\nimport { CheckboxInput } from '../../components';\nimport Modal from 'react-modal';\nimport useJanrainGlobalState from '../../Janrain/janrainForms/useJanrainGlobalState';\nconst FormInput = dynamic(() => import('../FormInput/FormInput'));\nconst Button = dynamic(() => import('../../../Button/Button'));\n\nconst EditProfile = ({profileStore, errors, form, userData, profileEditTab, commonLabels, janrainErrors, formValidated, customStyles, closeModalTimeoutMS}) => {\n\n const [isFormProcessing, setFormProcessing] = useState(false);\n const [arrMonths, setArrMonths] = useState([]);\n const [arrYear, setArrYear] = useState([]);\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [isSubmitDisabled, setIsSubmitDisabled] = useState(false);\n const [areChangesSaved, setAreChangesSaved] = useState(false);\n const [arrCountries, setArrCountries] = useState([]);\n const [globalState, setGlobalState] = useJanrainGlobalState();\n \n const optStatus = userData?.optIns && userData?.optIns[Constants.optinIdx]?.optStatus;\n const [emailOptStatus, setEmailOptStatus] = useState(optStatus);\n\n const postalCodeValidationRegex = profileEditTab?.postalCodeValidationRegex?.fields?.pattern;\n const postalCodeSecondPattern = profileEditTab?.postalCodeValidationRegex?.fields?.secondPattern;\n const minimumAge = profileEditTab?.minimumAge || 18;\n\n const janrainLabels = {\n title: profileEditTab?.title,\n modalCancelButton: profileEditTab?.modalCancelButton?.fields?.text,\n allFieldsRequiredLabel: profileEditTab?.allFieldsRequiredLabel?.fields?.text,\n firstName: profileEditTab?.firstName?.fields?.text,\n lastName: profileEditTab?.lastName?.fields?.text,\n email: profileEditTab?.email?.fields?.text,\n dateOfBirth: profileEditTab?.dateOfBirth?.fields?.text,\n whyWeAskForDateOfBirth: profileEditTab?.whyWeAskForDateOfBirth,\n whyWeAskForDateOfBirthLegal: profileEditTab?.whyWeAskForDateOfBirthLegal,\n registerDateOfBirthPlaceholder: profileEditTab?.registerDateOfBirthPlaceholder?.fields?.text,\n dateValidationRegex: profileEditTab?.dateValidationRegex,\n monthSelectLabel: profileEditTab?.monthSelectLabel?.fields?.text,\n yearSelectLabel: profileEditTab?.yearSelectLabel?.fields?.text,\n postCode: profileEditTab?.postCode?.fields?.text,\n country: profileEditTab?.country?.fields?.text,\n changePasswordLink: profileEditTab?.changePasswordLink,\n emailDisclaimer: profileEditTab?.profileEmailAccountDisclaimer,\n ...commonLabels\n };\n\n const regExpPattern = (patternFormat) => {\n const pattern = new RegExp(patternFormat);\n return pattern;\n }\n\n const validPostalCode = function(input) {\n const pattern = regExpPattern(postalCodeValidationRegex);\n if(pattern.test(input)) {\n return true; \n } else {\n const secPattern = regExpPattern(postalCodeSecondPattern);\n return secPattern.test(input);\n }\n };\n\n // Is duplicated in register form, we try not to, but we need variable from the block context/scope\n const validAge = function(input) {\n let birthMonth = profileStore.form['birthdate[dateselect_month]'] - 1 || 0;\n const currentDate = new Date();\n const birthDate = new Date(input, birthMonth);\n // 31536000000 is the number of milisec in a year\n const age = (currentDate - birthDate) / 31536000000;\n return minimumAge <= age;\n };\n\n useEffect(() => {\n if (formValidated) {\n setIsSubmitDisabled(false);\n } else {\n setIsSubmitDisabled(true);\n }\n });\n\n useEffect (() => {\n profileStore.clear();\n profileStore.errorTexts = janrainErrors;\n profileStore.rehydrateForProfileForm(userData);\n setArrMonths(setMonths(janrainLabels.monthSelectLabel));\n setArrYear(setYears(janrainLabels.yearSelectLabel));\n if (document.querySelector('.js-modal-container')) {\n Modal.setAppElement('.js-modal-container');\n }\n\n profileStore.validation.addressPostalCode.push({\n error: 'postalCodeIsRequired',\n fn: validPostalCode\n });\n\n // dynamic minimumAge validation validation\n profileStore.validation['birthdate[dateselect_year]'].push({\n error: 'yearMustBeOldEnough',\n fn: validAge\n });\n\n const countries = profileEditTab?.countries;\n if (countries) {\n let newCountriesArr = [];\n for (let i = 0; i < countries.length; i++) {\n const country = countries[i].fields.text;\n const countryCode = CountryCode[country] || country;\n newCountriesArr.push({value: country, id: countryCode});\n }\n setArrCountries(newCountriesArr);\n }\n }, []);\n\n const handleEditProfileSendSuccess = () => {\n // updating the email opt status\n const janrainProfileData = JSON.parse(getJanrainCaptureProfileDataFromLocalStorage());\n const postObject = getPostReplaceEntityObject(janrainProfileData);\n if(postObject?.[Constants.optins]?.[Constants.optinIdx]){\n postObject[Constants.optins][Constants.optinIdx].optStatus = emailOptStatus;\n }\n postReplaceBenefitPreferences(postObject, handleFormSendSuccess, handleFormSendFailed);\n };\n\n useEffect(() => {\n if(isFormProcessing) {\n const formName = inputs.formName;\n\n let reminderFieldValues = {\n firstName: form.firstName,\n lastName: form.lastName,\n emailAddress: form.emailAddress,\n 'birthdate[dateselect_day]': form['birthdate[dateselect_day]'],\n 'birthdate[dateselect_month]': form['birthdate[dateselect_month]'],\n 'birthdate[dateselect_year]': form['birthdate[dateselect_year]'],\n addressPostalCode: form.addressPostalCode,\n addressCountry: form.addressCountry\n };\n\n globalState.givenName = form.firstName;\n setGlobalState(globalState);\n\n window.janrain.events.onCaptureSaveSuccess.addHandler(handleEditProfileSendSuccess);\n window.janrain.events.onCaptureSaveFailed.addHandler(handleFormSendFailed);\n window.janrain.capture.ui.postCaptureForm(formName, reminderFieldValues);\n }\n }, [isFormProcessing]);\n\n const handleFormSendFailed = () => {\n setFormProcessing(false);\n setAreChangesSaved(false);\n };\n\n const handleFormSendSuccess = () => {\n setFormProcessing(false);\n setAreChangesSaved(true);\n };\n\n const handleSubmit = () => {\n setFormProcessing(true);\n };\n\n const closeModal = () => {\n setIsModalOpen(false);\n };\n\n const openModal = event => {\n event.preventDefault();\n setAreChangesSaved(false);\n if (formValidated) {\n setIsModalOpen(true);\n }\n };\n\n return (\n \n
\n }\n {!isGCSAPIDown &&\n - \n {oralbProductList.map((product, index) => (\n
- \n \n\n\n {product?.imageUrl ?\n\n \n
:\n
}\n \n\n\n {product.isPrimary ?\n\n \n ))}\n
\n \n \n
\n }\n \n
\n \n {!isObjectEmpty(oralbProductList) && oralbProductList.length >= registeredProductLimit ? (\n <>\n \n {janrainLabels.registerProductLinkGwe?.fields?.title}\n \n {janrainLabels.registeredProductLimitLabel}\n \n ) : (\n \n {janrainLabels.registerProductLinkGwe?.fields?.title}\n \n )}\n
\n }\n\n {isGCSAPIDown &&\n {janrainLabels.gcsDownErrorMessage}
\n }\n\n\n {janrainLabels.tryTheAppTitle} \n
\n\n - \n
- \n \n
\n \n \n - \n \n
\n \n \n
\n
\n \n \n
\n \n {isDeleting ? (\n \n ) : (\n \n )}\n
\n { !isDeleting && currentProduct?.cmsProductInfo?.title &&\n\n
\n \n {janrainLabels.productManagementModalConfirm}\n \n \n {janrainLabels.modalCancelButton}\n \n
\n \n
\n )\n};\n\nexport default EditProfile;\n\nEditProfile.propTypes = {\n profileStore: PropTypes.object,\n errors: PropTypes.object,\n form: PropTypes.object,\n userData: PropTypes.object,\n profileEditTab: PropTypes.object,\n commonLabels: PropTypes.object,\n janrainErrors: PropTypes.object,\n formValidated: PropTypes.bool,\n customStyles: PropTypes.string,\n closeModalTimeoutMS: PropTypes.number\n};\n","import React, {useEffect, useState} from 'react';\nimport dynamic from 'next/dynamic';\nimport Modal from 'react-modal';\nimport { mediaQueryHOC } from '../../../../adapters/helpers/Hooks';\nimport {SubmitButton} from '../index';\nimport {inputs} from '../../Janrain/janrainForms/ProfileForm/inputs';\nimport {isObjectEmpty, getDateInNinetyDays, substractDays} from '../../../../adapters/helpers/Utils';\nimport {getPostReplaceEntityObject, postReplaceBenefitPreferences} from '../../../../adapters/model/service/api/svc';\nimport {isToday, recoverPreferencesFromUserData} from '../../helpers/setting.helpers';\nimport {getJanrainCaptureProfileDataFromLocalStorage} from '../../helpers/localstorage.helpers';\nimport PropTypes from 'prop-types';\nconst Label = dynamic(() => import('../../../Label/Label'));\nconst ToggleInput = dynamic(() => import('../ToggleInput/ToggleInput'));\nconst Eyebrow = dynamic(() => import('../../../Eyebrow/Eyebrow'));\nconst FormGoalsCheckboxes = dynamic(() => import('../FormGoalsCheckboxes/FormGoalsCheckboxes'));\nconst Button = dynamic(() => import('../../../Button/Button'));\n\nconst UpdateBenefitPreferences = ({profileBenefitPreferencesTab, commonLabels, userData, customStyles, isMedium, closeModalTimeoutMS}) => {\n\n const [oralbBenefitPreferenceList, setOralbBenefitPreferenceList] = useState([]);\n const [goalsJson, setGoalsJson] = useState({});\n const [isReminded, setIsReminded] = useState(userData?.traitBrushHeadReminderOptInFlag?.traitValue === 'Yes');\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [areChangesSaved, setAreChangesSaved] = useState(false);\n const [isFormProcessing, setFormProcessing] = useState(false);\n\n let traitBrushheadReminderDate = new Date();\n if(userData.traitBrushheadReminderDate?.traitDate) {\n let splitDate = userData.traitBrushheadReminderDate?.traitDate.split('-')\n traitBrushheadReminderDate = new Date(splitDate[0], splitDate[1] - 1, splitDate[2]);\n }\n const [brushheadReminderDateValue, setBrushheadReminderDateValue] = useState(traitBrushheadReminderDate);\n\n const locale = process.env.JANRAIN_CAPTURE_LOCALE;\n const threeMonthsFromNow = getDateInNinetyDays();\n\n const brushHeadReminderDates = profileBenefitPreferencesTab?.brushHeadAgeList;\n\n const [currentReminderDate, setCurrentReminderDate] = useState(getDateInNinetyDays(traitBrushheadReminderDate) || threeMonthsFromNow);\n\n const [daysSincePurchase, setDaysSincePurchase] = useState(null);\n\n const janrainLabels = {\n yourPreferenceTitle: profileBenefitPreferencesTab?.yourPreferenceTitle,\n yourPreferenceText: profileBenefitPreferencesTab?.yourPreferenceText,\n replaceBrushHeadTitle: profileBenefitPreferencesTab?.replaceBrushHeadTitle,\n replaceBrushHeadText: profileBenefitPreferencesTab?.replaceBrushHeadText,\n resetReminder: profileBenefitPreferencesTab?.resetReminder?.fields?.text,\n myBenefitPreferencesTitle: profileBenefitPreferencesTab?.myBenefitPreferencesTitle,\n myBenefitPreferencesSubtitle: profileBenefitPreferencesTab?.myBenefitPreferencesSubtitle,\n onLabel: profileBenefitPreferencesTab?.onLabel?.fields?.text,\n offLabel: profileBenefitPreferencesTab?.offLabel?.fields?.text,\n ...commonLabels\n };\n\n const resetReminder = (numDays) => {\n const daysSince = parseInt(numDays, 10);\n const newReminderDate = getDateInNinetyDays();\n setDaysSincePurchase(daysSince);\n newReminderDate.setDate(newReminderDate.getDate() - daysSince);\n setCurrentReminderDate(newReminderDate);\n\n // the value save in janrain is the date of purchase. They are adding the 90 days themselves for the reminder.\n // So we need to save the date of purchase and show date of purchase + 90 days.\n let reminderDateValue = substractDays(new Date(), daysSince);\n\n setBrushheadReminderDateValue(reminderDateValue);\n };\n\n const setGoalsData = data => {\n setGoalsJson(data);\n };\n\n useEffect(() => {\n assignCurrentBenefitPreferencesFromUserData();\n\n if (document.querySelector('.js-modal-container')) {\n Modal.setAppElement('.js-modal-container');\n }\n },[]);\n\n useEffect(() => {\n if(isFormProcessing) {\n window.janrain.events.onCaptureSaveSuccess.addHandler(handleFormSendSuccess);\n window.janrain.events.onCaptureSaveFailed.addHandler(handleFormSendFailed);\n }\n }, [isFormProcessing]);\n\n useEffect(() => {\n //reset reminder when turning reminder to true\n if(isToday(traitBrushheadReminderDate)) {\n resetReminder(0);\n }\n }, [isReminded]);\n\n const handleFormSendFailed = () => {\n setFormProcessing(false);\n setAreChangesSaved(false);\n };\n\n const handleFormSendSuccess = () => {\n setFormProcessing(false);\n setAreChangesSaved(true);\n };\n\n const assignCurrentBenefitPreferencesFromUserData = () => {\n let benefitList = recoverPreferencesFromUserData(userData);\n setOralbBenefitPreferenceList(benefitList);\n setGoalsData(benefitList);\n };\n\n const handleSubmit = () => {\n setFormProcessing(true);\n const janrainProfileData = JSON.parse(getJanrainCaptureProfileDataFromLocalStorage());\n let postObject = getPostReplaceEntityObject(janrainProfileData);\n // reminder Date\n const reminderValue = (isReminded) ? 'Yes' : null;\n let traitBrushHeadReminderOptInFlagValue = {\n traitValue: reminderValue\n }\n postObject['traitBrushHeadReminderOptInFlag'] = traitBrushHeadReminderOptInFlagValue;\n let reminderDate = brushheadReminderDateValue.toISOString().split('T')[0];\n if(!isReminded) {\n reminderDate = null;\n }\n let traitBrushheadReminderDateValue = {\n traitDate: reminderDate,\n traitValue: reminderDate\n }\n postObject['traitBrushheadReminderDate'] = traitBrushheadReminderDateValue;\n if (!isObjectEmpty(goalsJson)) {\n // BenefitPreferences\n let traitBenefitPreferencesValue = [];\n postObject['traitBenefitPreferences'] = [];\n goalsJson.forEach(goal => {\n let goalObject = {\n traitValue: goal,\n traitLastUpdated: new Date(),\n traitLastUpdatedClientId: process.env.JANRAIN_CAPTURE_CIENT_ID\n }\n traitBenefitPreferencesValue.push(goalObject);\n });\n postObject['traitBenefitPreferences'] = traitBenefitPreferencesValue;\n } else {\n postObject['traitBenefitPreferences'] = [];\n }\n postReplaceBenefitPreferences(postObject, handleFormSendSuccess, handleFormSendFailed);\n };\n\n const closeModal = () => {\n setIsModalOpen(false);\n };\n\n const openModal = event => {\n event.preventDefault();\n setAreChangesSaved(false);\n setIsModalOpen(true);\n };\n\n return (\n {janrainLabels.allFieldsRequiredLabel}
\n \n\n \n {janrainLabels.saveLabel}\n \n\n \n
\n )\n};\n\nUpdateBenefitPreferences.propTypes = {\n profileBenefitPreferencesTab: PropTypes.object,\n commonLabels: PropTypes.object,\n userData: PropTypes.object,\n customStyles: PropTypes.string,\n isMedium: PropTypes.bool,\n closeModalTimeoutMS: PropTypes.number\n};\n\nexport default mediaQueryHOC(UpdateBenefitPreferences);\n// This export is for unit testing (do not remove) :\nexport const UpdateBenefitPreferencesTest = UpdateBenefitPreferences;\n","import React, {useState} from 'react';\nimport {FormSelect} from '../index';\nimport PropTypes from 'prop-types';\n\nconst FormBirthdate = (\n {\n className,\n dateOfBirthLabel,\n whyWeAskForDateOfBirth,\n whyWeAskForDateOfBirthLegal,\n arrMonths,\n nameMonth,\n monthLabel,\n valueMonth,\n onChangeMonth,\n errorMonth,\n arrYear,\n nameYear,\n yearLabel,\n valueYear,\n onChangeYear,\n errorYear,\n }) => {\n const [islegalTextShowing, setIslegalTextShowing] = useState(false)\n return (\n \n {janrainLabels.yourPreferenceTitle} \n
\n {janrainLabels.yourPreferenceText}
\n\n \n \n }\n setIsReminded(e.target.checked)}\n checked={isReminded}\n name={inputs.field.traitBrushHeadReminderOptInFlag}\n activeLabel={janrainLabels.onLabel}\n inactiveLabel={janrainLabels.offLabel}\n className={'ob-preferences__toggle-input--mobile'}\n />\n }\n {isReminded &&\n
\n\n \n {janrainLabels.replaceBrushHeadTitle} \n {!isMedium &&\n setIsReminded(e.target.checked)}\n checked={isReminded}\n name={inputs.field.traitBrushHeadReminderOptInFlag}\n activeLabel={janrainLabels.onLabel}\n inactiveLabel={janrainLabels.offLabel}\n className={'ob-preferences__toggle-input--desktop'}\n />\n }\n
\n \n {profileBenefitPreferencesTab?.RemindYouToReplace?.fields?.text}\n
\n {locale !== '' && isReminded &&\n{janrainLabels.resetReminder}
\n {isMedium &&\n- \n {brushHeadReminderDates.map((date, index) => (\n
- \n
\n {janrainLabels.myBenefitPreferencesSubtitle} \n
\n\n {janrainLabels.myBenefitPreferencesTitle}
\n\n
\n \n \n
\n \n {janrainLabels.editModalSaveChangesTitle}\n
\n\n {!areChangesSaved ? (\n <>\n
\n {janrainLabels.editModalSuccess}
\n \n \n )}\n\n
\n )\n};\n\nFormBirthdate.propTypes = {\n className: PropTypes.string,\n dateOfBirthLabel: PropTypes.string,\n whyWeAskForDateOfBirth: PropTypes.string,\n whyWeAskForDateOfBirthLegal: PropTypes.string,\n arrMonths: PropTypes.object,\n nameMonth: PropTypes.string,\n monthLabel: PropTypes.string,\n valueMonth: PropTypes.string,\n onChangeMonth: PropTypes.func,\n errorMonth: PropTypes.string,\n arrYear: PropTypes.object,\n nameYear: PropTypes.string,\n yearLabel: PropTypes.string,\n valueYear: PropTypes.string,\n onChangeYear: PropTypes.func,\n errorYear: PropTypes.string\n}\n\nexport default FormBirthdate;\n","export { default as Button } from './Button/Button'\nexport { default as SubmitButton } from './SubmitButton/SubmitButton'\nexport { default as FormInput } from './FormInput/FormInput'\nexport { default as FormSelect } from './FormSelect/FormSelect'\nexport { default as CheckboxInput } from './CheckboxInput/CheckboxInput'\nexport { default as RadioInput } from './RadioInput/RadioInput'\nexport { default as RegisterProduct } from './RegisterProduct/RegisterProduct'\nexport { default as FormGoalsCheckboxes } from './FormGoalsCheckboxes/FormGoalsCheckboxes'\nexport { default as ProductManagement } from './ProductManagement/ProductManagement'\nexport { default as EditProfile } from './EditProfile/EditProfile'\nexport { default as UpdateBenefitPreferences } from './UpdateBenefitPreferences/UpdateBenefitPreferences'\nexport { default as FormBirthdate } from './FormBirthdate/FormBirthdate'\n","import {formatDateToStringValue, customJsonstringify } from '../../../adapters/helpers/Utils';\nimport { WarrantyExtensionConstants } from '../../../adapters/helpers/Constants';\n\nexport const recoverProductsFromUserData = (profileData, productCategoryList, warrantyExtensionTime, gCSUserproductList) => {\n let products = [];\n\n if(gCSUserproductList && Array.isArray(gCSUserproductList)) {\n gCSUserproductList.forEach(gCSProduct => {\n // continue if product is not deleted\n if(!gCSProduct.isDelete) {\n productCategoryList.forEach(productCategory => {\n const productOverviews = productCategory?.fields?.productOverviewList;\n if (productOverviews) {\n productOverviews.forEach(productOverview => {\n productOverview.fields.productVariants.forEach(contentfulProduct => {\n let contentfulGCSProductId = contentfulProduct?.fields?.gCSProductId;\n if (contentfulProduct?.fields?.janrainProductId) {\n contentfulGCSProductId = contentfulProduct?.fields?.janrainProductId;\n }\n\n let gCSProductId = gCSProduct?.productId;\n if (gCSProductId == contentfulGCSProductId) {\n let enhanceProductVariant = JSON.parse(customJsonstringify(contentfulProduct.fields));\n // Product identifier eanCode or sku. It seems that it's called ean code in GCS even if they are SKU\n enhanceProductVariant.productId = gCSProduct.eanCode;\n\n // Order unique identifier. Is not post anywhere, but gives us the hability to identity two different order with the same product.\n // We use this identifier for delete or make primary manipulation.\n enhanceProductVariant.id = gCSProduct.orderId;\n\n // unique database identifier in GCS database. Needed for product registration.\n enhanceProductVariant.gCSProductId = gCSProductId;\n\n enhanceProductVariant.imageUrl = gCSProduct.imageUrl;\n enhanceProductVariant.registrationDate = formatDateToStringValue(gCSProduct.registrationDate, 'YYYY-MM-DD', 'DD/MM/YYYY');\n\n let warrantyDateObject = new Date(gCSProduct.warrantyExtendedDate);\n let warrantyExpirationDate = new Date(warrantyDateObject.getFullYear(), warrantyDateObject.getMonth(), warrantyDateObject.getDate());\n\n enhanceProductVariant.purchaseDate = formatDateToStringValue(gCSProduct.purchaseDate, 'YYYY-MM-DD', 'DD/MM/YYYY');\n enhanceProductVariant.traitDate = formatDateToStringValue(gCSProduct.purchaseDate, 'YYYY-MM-DD', 'DD/MM/YYYY');\n enhanceProductVariant.warrantyExpirationDate = formatDateToStringValue(warrantyExpirationDate, 'YYYY-MM-DD', 'DD/MM/YYYY');\n enhanceProductVariant.warrantyExpirationDateInText = warrantyExpirationDate.toLocaleString(process.env.JANRAIN_CAPTURE_LOCALE, {\n month: 'long',\n year: 'numeric'\n });\n enhanceProductVariant.category = productCategory?.fields?.name;\n enhanceProductVariant.timeStamp = new Date().toUTCString();\n\n // display name\n enhanceProductVariant.title = getProductVariantName(contentfulProduct);\n\n enhanceProductVariant.isPrimary = gCSProduct?.isPrimary;\n\n products.push(enhanceProductVariant);\n }\n })\n })\n }\n });\n }\n });\n }\n return products;\n};\n\nexport const enhanceProducts = (gCSUserproductList) => {\n let products = [];\n\n if(gCSUserproductList && Array.isArray(gCSUserproductList)) {\n gCSUserproductList.forEach(gCSProduct => {\n // continue if product is not deleted\n if(!gCSProduct.isDelete) {\n let gCSProductId = gCSProduct?.productId;\n \n let enhanceProductVariant = {};\n // Product identifier eanCode or sku. It seems that it's called ean code in GCS even if they are SKU\n enhanceProductVariant.productId = gCSProduct.productCode;\n enhanceProductVariant.orderProductId = gCSProduct.orderProductId;\n enhanceProductVariant.typeCode = gCSProduct.typeCode;\n\n // Order unique identifier. Is not post anywhere, but gives us the hability to identity two different order with the same product.\n // We use this identifier for delete or make primary manipulation.\n enhanceProductVariant.id = gCSProduct.orderId;\n\n // unique database identifier in GCS database. Needed for product registration.\n enhanceProductVariant.gCSProductId = gCSProductId;\n\n enhanceProductVariant.imageUrl = gCSProduct.productGasImageUrl;\n enhanceProductVariant.mainAsset = gCSProduct.productGasImageUrl;\n enhanceProductVariant.registrationDate = formatDateToStringValue(gCSProduct.registrationDate, 'YYYY-MM-DD', 'DD/MM/YYYY');\n\n let warrantyDateObject = new Date(gCSProduct.warrantyExtendedDate);\n let warrantyExpirationDate = new Date(warrantyDateObject.getFullYear(), warrantyDateObject.getMonth(), warrantyDateObject.getDate());\n \n enhanceProductVariant.purchaseDate = formatDateToStringValue(gCSProduct.purchaseDate, 'YYYY-MM-DD', 'DD/MM/YYYY');\n enhanceProductVariant.traitDate = formatDateToStringValue(gCSProduct.purchaseDate, 'YYYY-MM-DD', 'DD/MM/YYYY');\n enhanceProductVariant.warrantyExpirationDate = formatDateToStringValue(warrantyExpirationDate, 'YYYY-MM-DD', 'DD/MM/YYYY');\n enhanceProductVariant.warrantyExpirationDateInText = warrantyExpirationDate.toLocaleString(process.env.JANRAIN_CAPTURE_LOCALE, {\n month: 'long',\n year: 'numeric'\n });\n enhanceProductVariant.timeStamp = new Date().toUTCString();\n\n // display name\n enhanceProductVariant.name = gCSProduct?.productName;\n enhanceProductVariant.title = gCSProduct?.productName;\n\n enhanceProductVariant.isPrimary = gCSProduct?.isPrimary;\n\n products.push(enhanceProductVariant);\n \n }\n });\n }\n return products;\n};\n\nexport const removeProductFromJanrainList = (products, productIdToRemove, orderProductId) => {\n const orderIdWithProductId = `${productIdToRemove}${WarrantyExtensionConstants.janrinProductIdDelimiter}${orderProductId}`\n return products.filter(product => {\n if(product && product.productId && product.productId.toString().indexOf(WarrantyExtensionConstants.janrinProductIdDelimiter) > -1) {\n return product.productId !== orderIdWithProductId;\n } else {\n return product.productId !== productIdToRemove;\n }\n });\n};\n\nexport const removeProductFromDisplayedList = (products, orderId, orderProductId) => {\n return products.filter(product => (product.id !== orderId || product.orderProductId !== orderProductId));\n};\n\nexport const getJanrainProductId = (sku) => {\n let janrainId = sku;\n return janrainId;\n};\n\nexport const getContenfulPrimaryProductCode = (product) => {\n let code = product?.productId + '_' + product?.purchaseDate;\n return code;\n};\n\nexport const getProductVariantName = (productVariant) => {\n let title = productVariant?.fields?.name;\n if(productVariant?.fields?.shortTitle) {\n title = productVariant?.fields?.shortTitle;\n }\n return title;\n};\n","export const recoverPreferencesFromUserData = (profileData) => {\n const profilePreferences = profileData?.traitBenefitPreferences;\n const userPreferences = [];\n if(profilePreferences) {\n profilePreferences.forEach(benefitPreference => {\n let value = benefitPreference?.traitValue;\n if(value) {\n // set to upper case to be sure we match existing user benefit preferences in prod\n userPreferences.push(value);\n }\n })\n }\n return userPreferences;\n};\n\nexport const isToday = (someDate) => {\n const today = new Date()\n return someDate.getDate() == today.getDate() &&\n someDate.getMonth() == today.getMonth() &&\n someDate.getFullYear() == today.getFullYear()\n}","import React, {Suspense} from 'react';\nimport ReactMarkdown from 'react-markdown';\nimport Block from '../../adapters/helpers/Block'\nimport PropTypes from 'prop-types';\nimport { MarkdownTextConstants } from '../../adapters/helpers/Constants'\nimport Loader from '../../adapters/helpers/Loader';\n\nexport function Markdown({ source, className }) {\n return (\n {dateOfBirthLabel}
\n\n
\n {errorMonth && errorYear && errorMonth === errorYear ? (\n \n {errorYear}\n
\n ) : (\n <>\n {errorMonth &&\n\n {errorMonth}\n
\n }\n {errorYear &&\n\n {errorYear}\n
\n }\n \n )}\n \n\n {whyWeAskForDateOfBirthLegal}\n
\n