igloo-d2c-components 1.0.33 → 1.0.35

package/dist/cjs/index.js

@@ -6,6 +6,7 @@ var React = require('react');
 var material = require('@mui/material');
 var ArrowDropDownIcon = require('@mui/icons-material/ArrowDropDown');
 var CloseIcon = require('@mui/icons-material/Close');
+var LanguageIcon = require('@mui/icons-material/Language');
 var AppBar = require('@mui/material/AppBar');
 var styles = require('@mui/material/styles');
 var MenuIcon = require('@mui/icons-material/Menu');
@@ -1170,11 +1171,31 @@ function DesktopHeaderMenuBar({ logo, logoAlt = 'Logo', menuItems,
 // Legacy props (deprecated)
 showLoginButton, loginButtonText, onLoginClick, 
 // New CTA props
-showCtaButton = true, ctaButtonText = 'Purchase Now', onCtaClick, ctaScrollTargetId, onScrollToSection, onLogoClick, formatMessage = (descriptor) => descriptor.id, className, }) {
+showCtaButton = true, ctaButtonText = 'Purchase Now', onCtaClick, ctaScrollTargetId, onScrollToSection, onLogoClick, formatMessage = (descriptor) => descriptor.id, className, 
+// Language switcher props
+languages = [], currentLocale, onLanguageChange, }) {
     var _a;
     // Track which dropdown is currently open (for backward compatibility)
     const [openMenuKey, setOpenMenuKey] = React__namespace.useState(null);
     const [anchorEl, setAnchorEl] = React__namespace.useState(null);
+    // Language menu state
+    const [langAnchorEl, setLangAnchorEl] = React__namespace.useState(null);
+    const isLangMenuOpen = Boolean(langAnchorEl);
+    const handleLangMenuOpen = (event) => {
+        setLangAnchorEl(event.currentTarget);
+    };
+    const handleLangMenuClose = () => {
+        setLangAnchorEl(null);
+    };
+    const handleLangSelect = (locale, value) => {
+        onLanguageChange === null || onLanguageChange === void 0 ? void 0 : onLanguageChange(locale, value);
+        handleLangMenuClose();
+    };
+    // Derive current language label from locale
+    const currentLangLabel = React__namespace.useMemo(() => {
+        const match = languages.find((l) => l.locale === currentLocale);
+        return (match === null || match === void 0 ? void 0 : match.label) || 'English';
+    }, [languages, currentLocale]);
     // Determine which button props to use (support legacy props)
     const shouldShowCtaButton = (_a = showCtaButton !== null && showCtaButton !== void 0 ? showCtaButton : showLoginButton) !== null && _a !== void 0 ? _a : true;
     const ctaText = ctaButtonText || loginButtonText || 'Purchase Now';
@@ -1241,7 +1262,20 @@ showCtaButton = true, ctaButtonText = 'Purchase Now', onCtaClick, ctaScrollTarge
                                         horizontal: 'left',
                                     }, MenuListProps: {
                                         'aria-labelledby': `menu-button-${item.key}`,
-                                    } }, { children: item.subItems.map((subItem) => (jsxRuntime.jsxs(StyledMenuItem$1, Object.assign({ onClick: () => handleSubItemClick(item, subItem.key), "data-testid": `submenu-item-${subItem.key}` }, { children: [subItem.icon && (jsxRuntime.jsx(MenuItemIcon, { src: subItem.icon, alt: subItem.label })), formatMessage({ id: subItem.label })] }), subItem.key))) })))] }, item.key))), shouldShowCtaButton && (jsxRuntime.jsx(PurchaseButton, Object.assign({ onClick: handleCtaButtonClick, "data-testid": "header-cta-button" }, { children: formatMessage({ id: ctaText }) })))] })] }) })));
+                                    } }, { children: item.subItems.map((subItem) => (jsxRuntime.jsxs(StyledMenuItem$1, Object.assign({ onClick: () => handleSubItemClick(item, subItem.key), "data-testid": `submenu-item-${subItem.key}` }, { children: [subItem.icon && (jsxRuntime.jsx(MenuItemIcon, { src: subItem.icon, alt: subItem.label })), formatMessage({ id: subItem.label })] }), subItem.key))) })))] }, item.key))), languages.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItemButton, Object.assign({ onClick: handleLangMenuOpen, "aria-haspopup": "true", "aria-expanded": isLangMenuOpen, "data-testid": "language-switcher" }, { children: [jsxRuntime.jsx(LanguageIcon, { sx: { fontSize: '20px', mr: '4px' } }), jsxRuntime.jsx(MenuItemText, { children: currentLangLabel }), jsxRuntime.jsx(DropdownIcon, { sx: {
+                                                transform: isLangMenuOpen
+                                                    ? 'rotate(180deg)'
+                                                    : 'rotate(0deg)',
+                                                transition: 'transform 0.2s',
+                                            } })] })), jsxRuntime.jsx(StyledMenu$1, Object.assign({ id: "language-menu", anchorEl: langAnchorEl, open: isLangMenuOpen, onClose: handleLangMenuClose, anchorOrigin: {
+                                        vertical: 'bottom',
+                                        horizontal: 'left',
+                                    }, transformOrigin: {
+                                        vertical: 'top',
+                                        horizontal: 'left',
+                                    }, MenuListProps: {
+                                        'aria-labelledby': 'language-switcher',
+                                    } }, { children: languages.map((lang) => (jsxRuntime.jsx(StyledMenuItem$1, Object.assign({ onClick: () => handleLangSelect(lang.locale, lang.value), selected: lang.locale === currentLocale, "data-testid": `lang-${lang.locale}` }, { children: lang.label }), lang.value))) }))] })), shouldShowCtaButton && (jsxRuntime.jsx(PurchaseButton, Object.assign({ onClick: handleCtaButtonClick, "data-testid": "header-cta-button" }, { children: formatMessage({ id: ctaText }) })))] })] }) })));
 }
 
 const StyledAppBar$1 = styles.styled(AppBar)(({ theme, ispartnershippagemobileview, scrolled }) => {
@@ -1660,7 +1694,7 @@ function Header$1({ logo, navigationLinks, languages, currentLocale, userToken,
     // Render new desktop layout when enabled and on actual desktop viewport
     // Uses isActuallyDesktop to avoid SSR/prop issues with isMobile detection
     if (useNewDesktopLayout && isActuallyDesktop) {
-        return (jsxRuntime.jsx(DesktopHeaderMenuBar, { logo: logo, logoAlt: "Logo", menuItems: convertedDesktopMenuItems, showCtaButton: showCtaButton, ctaButtonText: ctaButtonText, onCtaClick: onCtaClick, ctaScrollTargetId: ctaScrollTargetId, onScrollToSection: onScrollToSection, onLogoClick: onLogoClick, formatMessage: formatMessage }));
+        return (jsxRuntime.jsx(DesktopHeaderMenuBar, { logo: logo, logoAlt: "Logo", menuItems: convertedDesktopMenuItems, showCtaButton: showCtaButton, ctaButtonText: ctaButtonText, onCtaClick: onCtaClick, ctaScrollTargetId: ctaScrollTargetId, onScrollToSection: onScrollToSection, onLogoClick: onLogoClick, formatMessage: formatMessage, languages: languages, currentLocale: currentLocale, onLanguageChange: onLanguageChange }));
     }
     return (jsxRuntime.jsx(StyledAppBar$1, Object.assign({ ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled }, { children: jsxRuntime.jsx(ResponsiveB2CLayout, { children: jsxRuntime.jsx(StyledContainer, Object.assign({ ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled, maxWidth: "xl" }, { children: jsxRuntime.jsxs(material.Toolbar, Object.assign({ disableGutters: true }, { children: [jsxRuntime.jsx("a", Object.assign({ href: host || '#', onClick: (e) => {
                                 e === null || e === void 0 ? void 0 : e.preventDefault();
@@ -2077,7 +2111,7 @@ function Footer({ simplifiedLayout = false, introText, addressText, socialLinks,
                                     }), index === navigationLinks.length - 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonBottomLink, Object.assign({ onClick: onPrivacyPolicyClick }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1" }, { children: jsxRuntime.jsx(AnchorLink, Object.assign({ href: `${host}/${currentLocale}/terms/privacypolicy`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: formatMessage({ id: 'Privacy Policy' }) })) })) })), jsxRuntime.jsx(ButtonBottomLink, Object.assign({ onClick: onTermsOfServiceClick }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1" }, { children: jsxRuntime.jsx(AnchorLink, Object.assign({ href: `${host}/${currentLocale}/terms/termsofservice`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: formatMessage({ id: 'Terms of Service' }) })) })) })), jsxRuntime.jsx(DivSocial, { children: socialLinks.map((social) => (jsxRuntime.jsx(ButtonIcon, Object.assign({ onClick: () => onSocialClick === null || onSocialClick === void 0 ? void 0 : onSocialClick(social.platform, social.url), "aria-label": social.ariaLabel || social.platform }, { children: jsxRuntime.jsx(AnchorLink, Object.assign({ href: social.url, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: jsxRuntime.jsx("img", { src: social.icon, alt: social.platform, height: isMobile ? '24' : '28', width: isMobile ? '24' : '28', loading: "lazy" }) })) }), social.platform))) })] }))] }, index))) }))] })), isMobile && jsxRuntime.jsx(StyledDivider, {}), isMobile && (jsxRuntime.jsx(DivBottom, { children: jsxRuntime.jsxs(DivLinks, { children: [jsxRuntime.jsx("div", Object.assign({ onClick: onPrivacyPolicyClick, style: { cursor: 'pointer' } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body2" }, { children: jsxRuntime.jsx(AnchorLink, Object.assign({ href: `${host}/${currentLocale}/terms/privacypolicy`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: formatMessage({ id: 'Privacy Policy' }) })) })) })), jsxRuntime.jsx(DivSep, {}), jsxRuntime.jsx("div", Object.assign({ onClick: onTermsOfServiceClick, style: { cursor: 'pointer' } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body2" }, { children: jsxRuntime.jsx(AnchorLink, Object.assign({ href: `${host}/${currentLocale}/terms/termsofservice`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: formatMessage({ id: 'Terms of Service' }) })) })) }))] }) }))] }) }));
 }
 
-const StyledDrawer$1 = styles.styled(material.Drawer)(() => ({
+const StyledDrawer$1 = styles.styled(material.Drawer)(({ theme }) => ({
     zIndex: '1300 !important',
     '& .MuiDrawer-root': {
         zIndex: 1300,
@@ -2087,17 +2121,26 @@ const StyledDrawer$1 = styles.styled(material.Drawer)(() => ({
         boxSizing: 'border-box',
         overflow: 'hidden',
         zIndex: 1300,
+        [theme.breakpoints.up('md')]: {
+            maxWidth: '680px',
+            margin: '0 auto',
+            borderRadius: '16px',
+        },
     },
     '& .MuiBackdrop-root': {
         zIndex: 1299,
     },
 }));
-const DrawerHeader$1 = styles.styled(material.Box)(() => ({
+const DrawerHeader$1 = styles.styled(material.Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'flex-end',
-    padding: '16px',
-    minHeight: '56px',
+    justifyContent: 'flex-start',
+    padding: '16px 24px',
+    minHeight: '64px',
+    [theme.breakpoints.down('md')]: {
+        padding: '16px',
+        minHeight: '56px',
+    },
 }));
 const DrawerContent$1 = styles.styled(material.Box)(() => ({
     flex: 1,
@@ -2176,6 +2219,15 @@ const SecondaryButton = styles.styled(material.Button)(() => ({
     lineHeight: '18px',
     wordSpacing: '-5px',
 }));
+const BackArrowButton = styles.styled(material.IconButton)(() => ({
+    padding: 0,
+    width: '32px',
+    height: '32px',
+    color: '#13131B',
+    '& .MuiSvgIcon-root': {
+        fontSize: '24px',
+    },
+}));
 
 /**
  * RecommendationsDrawer - Mobile drawer for recommendations and forms
@@ -2231,7 +2283,7 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
             },
         }, sx: {
             zIndex: 1300,
-        } }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', height: '100%' } }, { children: [jsxRuntime.jsx(DrawerHeader$1, { children: jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: handleBackOrClose, sx: { padding: 0 }, "aria-label": showBackButton ? 'back' : 'close' }, { children: showBackButton ? jsxRuntime.jsx(ArrowBackIcon, {}) : jsxRuntime.jsx(CloseIcon, {}) })) }), (title || subtitle || headerIcon) && (jsxRuntime.jsxs(HeaderSection, { children: [headerIcon && (jsxRuntime.jsx(CategoryIcon, { children: jsxRuntime.jsx("img", { src: headerIcon, alt: "Category icon", width: 32, height: 32 }) })), title && (jsxRuntime.jsx(TitleText, Object.assign({ variant: "h5" }, { children: formatMessage({ id: title }) }))), subtitle && (jsxRuntime.jsx(SubtitleText, Object.assign({ variant: "body2" }, { children: formatMessage({ id: subtitle }) })))] })), jsxRuntime.jsx(DrawerContent$1, { children: children }), showFooter && (jsxRuntime.jsx(DrawerFooter, { children: customFooter ? (customFooter) : (jsxRuntime.jsxs(FooterButtons, { children: [primaryButtonText && (jsxRuntime.jsx(PrimaryButton, Object.assign({ variant: "contained", fullWidth: true, onClick: onPrimaryAction, disabled: primaryButtonDisabled, sx: {
+        } }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', height: '100%' } }, { children: [jsxRuntime.jsx(DrawerHeader$1, { children: jsxRuntime.jsx(BackArrowButton, Object.assign({ onClick: handleBackOrClose, "aria-label": showBackButton ? 'back' : 'close' }, { children: showBackButton ? jsxRuntime.jsx(ArrowBackIcon, {}) : jsxRuntime.jsx(CloseIcon, {}) })) }), (title || subtitle || headerIcon) && (jsxRuntime.jsxs(HeaderSection, { children: [headerIcon && (jsxRuntime.jsx(CategoryIcon, { children: jsxRuntime.jsx("img", { src: headerIcon, alt: "Category icon", width: 32, height: 32 }) })), title && (jsxRuntime.jsx(TitleText, Object.assign({ variant: "h5" }, { children: formatMessage({ id: title }) }))), subtitle && (jsxRuntime.jsx(SubtitleText, Object.assign({ variant: "body2" }, { children: formatMessage({ id: subtitle }) })))] })), jsxRuntime.jsx(DrawerContent$1, { children: children }), showFooter && (jsxRuntime.jsx(DrawerFooter, { children: customFooter ? (customFooter) : (jsxRuntime.jsxs(FooterButtons, { children: [primaryButtonText && (jsxRuntime.jsx(PrimaryButton, Object.assign({ variant: "contained", fullWidth: true, onClick: onPrimaryAction, disabled: primaryButtonDisabled, sx: {
                                     backgroundColor: primaryColor,
                                     '&:hover': {
                                         backgroundColor: primaryColor,
@@ -2385,7 +2437,7 @@ const ProductCard$1 = material.styled(material.Box)({
     flexDirection: 'column',
     gap: '16px',
     backgroundColor: '#ffffff',
-    borderRadius: '12px',
+    borderRadius: '0',
     boxShadow: '0px 2px 10px 0px rgba(0, 0, 0, 0.12)',
     padding: '16px 12px 12px',
     height: '168px',
@@ -2431,7 +2483,7 @@ const ViewPlansButton = material.styled(material.Button)({
     fontSize: '14px',
     fontWeight: 500,
     lineHeight: '18px',
-    wordSpacing: '-5px',
+    wordSpacing: '0px',
 });
 
 function ProductSelectionDrawer({ open, onClose, products, onProductSelect, title = 'Select your product', subtitle = 'Pick the product that suits your protection goals to view available plans', viewPlansButtonText = 'View plans', variant = 'drawer', }) {
@@ -2477,13 +2529,16 @@ function ProductSelectionDrawer({ open, onClose, products, onProductSelect, titl
                                     } }, { children: viewPlansButtonText }))] }, product.id))) }) })] }) })));
 }
 
-const QuestionContainer$1 = styles.styled(material.Box)(() => ({
+const QuestionContainer$1 = styles.styled(material.Box)(({ theme }) => ({
     backgroundColor: '#FFFFFF',
-    padding: '12px 16px',
+    padding: '12px 0px',
     display: 'flex',
     flexDirection: 'column',
     gap: '16px',
     width: '100%',
+    [theme.breakpoints.down('md')]: {
+        padding: '8px 12px',
+    },
 }));
 const QuestionHeader = styles.styled(material.Box)(() => ({
     display: 'flex',
@@ -2897,16 +2952,16 @@ function BillingToggle({ value, onChange, formatMessage = (descriptor) => descri
                         ? toggleActiveTextColor
                         : toggleInactiveTextColor,
                 } }, { children: jsxRuntime.jsx(ToggleText, { children: formatMessage({
-                        id: 'Billed monthly',
-                        defaultMessage: 'Billed monthly',
+                        id: 'Billed Monthly',
+                        defaultMessage: 'Billed Monthly',
                     }) }) })), jsxRuntime.jsx(ToggleButton, Object.assign({ active: value === 'annually', onClick: () => onChange('annually'), sx: {
                     backgroundColor: value === 'annually' ? toggleActiveColor : 'transparent',
                     color: value === 'annually'
                         ? toggleActiveTextColor
                         : toggleInactiveTextColor,
                 } }, { children: jsxRuntime.jsx(ToggleText, { children: formatMessage({
-                        id: 'Billed annually',
-                        defaultMessage: 'Billed annually',
+                        id: 'Billed Annually',
+                        defaultMessage: 'Billed Annually',
                     }) }) }))] })));
 }
 
@@ -3463,19 +3518,17 @@ const ButtonContainer = styles.styled(material.Box)(({ isFixed, desktopRightAlig
     padding: '16px',
     boxShadow: isFixed ? '0px 2px 10px 0px rgba(0, 0, 0, 0.12)' : 'none',
     zIndex: 999,
-    // Desktop styles for right-aligned button
-    '@media (min-width: 900px)': desktopRightAligned
-        ? {
-            display: 'flex',
-            justifyContent: 'flex-end',
-            maxWidth: '938px',
-            margin: '0 auto',
-            padding: '24px 0',
-            backgroundColor: 'transparent',
-            boxShadow: 'none',
-            position: 'relative',
-        }
-        : {},
+    // Desktop styles for button alignment
+    '@media (min-width: 900px)': {
+        display: 'flex',
+        justifyContent: desktopRightAligned ? 'flex-end' : 'center',
+        maxWidth: '938px',
+        margin: '0 auto',
+        padding: '24px 0',
+        backgroundColor: 'transparent',
+        boxShadow: 'none',
+        position: 'relative',
+    },
 }));
 const StyledButton = styles.styled('button')(({ isDisabled, desktopWidth }) => ({
     width: '100%',
@@ -3507,7 +3560,7 @@ const StyledButton = styles.styled('button')(({ isDisabled, desktopWidth }) => (
 }));
 
 const CheckoutFormButton = ({ text = 'Next', disabled = false, onClick, fixed = true, type = 'button', sx, loading = false, desktopRightAligned = false, desktopWidth = '180px', }) => {
-    return (jsxRuntime.jsx(ButtonContainer, Object.assign({ isFixed: fixed, desktopRightAligned: desktopRightAligned, sx: sx }, { children: jsxRuntime.jsx(StyledButton, Object.assign({ type: type, disabled: disabled || loading, isDisabled: disabled || loading, desktopWidth: desktopRightAligned ? desktopWidth : undefined, onClick: onClick }, { children: loading ? 'Processing...' : text })) })));
+    return (jsxRuntime.jsx(ButtonContainer, Object.assign({ isFixed: fixed, desktopRightAligned: desktopRightAligned, sx: sx }, { children: jsxRuntime.jsx(StyledButton, Object.assign({ type: type, disabled: disabled || loading, isDisabled: disabled || loading, desktopWidth: desktopWidth, onClick: onClick }, { children: loading ? 'Processing...' : text })) })));
 };
 
 const QuestionContainer = styles.styled(material.Box)({
@@ -3634,7 +3687,7 @@ const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, form
                                 color: '#5F5E62',
                                 fontSize: '12px',
                                 wordSpacing: '-5px',
-                            } }, { children: fields.full_name.helperText })))] }), renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.salutation), renderField(fields.nationality), renderField(fields.occupation), renderField(fields.industry), renderField(fields.crediting_bank_name), renderField(fields.crediting_bank_account_number), desktopGridLayout ? (jsxRuntime.jsx(FullWidthField$1, { children: jsxRuntime.jsxs(CheckboxContainer$1, { children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
+                            } }, { children: fields.full_name.helperText })))] }), renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.salutation), renderField(fields.nationality), fields.place_of_birth && renderField(fields.place_of_birth), fields.marital_status && renderField(fields.marital_status), fields.race && renderField(fields.race), fields.religion && renderField(fields.religion), fields.annual_income && renderField(fields.annual_income), renderField(fields.occupation), renderField(fields.industry), renderField(fields.crediting_bank_name), renderField(fields.crediting_bank_account_number), desktopGridLayout ? (jsxRuntime.jsx(FullWidthField$1, { children: jsxRuntime.jsxs(CheckboxContainer$1, { children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
                                         defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
                                     color: 'error.main',
                                     fontSize: '12px',
@@ -3692,7 +3745,7 @@ const FullWidthField = styles.styled(material.Box)({
 const CheckboxContainer = styles.styled(material.Box)({
     marginTop: '12px',
     '& .MuiFormControlLabel-root': {
-        alignItems: 'flex-start',
+        alignItems: 'center',
         marginLeft: 0,
         '@media (min-width: 900px)': {
             alignItems: 'center',
@@ -3717,8 +3770,10 @@ const SectionTitle$1 = styles.styled(material.Typography)({
     wordSpacing: '-5px',
 });
 
-const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddressSame, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
+const ContactDetailsForm = ({ renderField, fields, isForChild = false, mailingFields, mailingAddressSame, childContactFields, childContactNotSame, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
     const defaultMailingLabel = 'My mailing address is not the same as residential';
+    const defaultChildContactLabel = 'My child contact details is not the same as residential';
+    const childContactHelperText = 'Tick this box if the child has a different address, phone number, or email';
     const Container = desktopGridLayout ? DesktopFormContainer$2 : FormContainer$2;
     // Helper to render field with or without full width wrapper
     const renderFieldWithLayout = (field, fullWidth = false) => {
@@ -3740,18 +3795,28 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
         }
         return content;
     };
-    return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: desktopGridLayout ? (jsxRuntime.jsxs(FieldsGridContainer$1, { children: [renderFieldWithHelperText(fields.phone_number, false), renderFieldWithLayout(fields.email_address, false), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(SectionTitle$1, { children: "Residential address" }) }), renderFieldWithHelperText(fields.residential_address_line1, false), renderFieldWithHelperText(fields.residential_address_line2, false), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), (mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && mailingFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(SectionTitle$1, { children: "Mailing address" }) }), renderFieldWithHelperText(mailingFields.mailing_address_line1, false), renderFieldWithHelperText(mailingFields.mailing_address_line2, false), renderField(mailingFields.mailing_postal_code), renderField(mailingFields.mailing_city), renderField(mailingFields.mailing_state)] })), mailingAddressSame && (jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_not_same_as_residential", sx: {
+    return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: desktopGridLayout ? (jsxRuntime.jsxs(FieldsGridContainer$1, { children: [isForChild && (jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(SectionTitle$1, { children: "Policyowner contact details" }) })), renderFieldWithHelperText(fields.phone_number, false), renderFieldWithLayout(fields.email_address, false), ((mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && !isForChild) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(SectionTitle$1, { children: "Residential address" }) })] })), renderFieldWithHelperText(fields.residential_address_line1, false), renderFieldWithHelperText(fields.residential_address_line2, false), fields.country && renderField(fields.country), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), (mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && mailingFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(SectionTitle$1, { children: isForChild ? 'Policyowner mailing address' : 'Mailing address' }) }), isForChild && mailingFields.mailing_phone_number && (renderFieldWithHelperText(mailingFields.mailing_phone_number, false)), isForChild && mailingFields.mailing_email_address && (renderFieldWithLayout(mailingFields.mailing_email_address, false)), renderFieldWithHelperText(mailingFields.mailing_address_line1, false), renderFieldWithHelperText(mailingFields.mailing_address_line2, false), mailingFields.mailing_country && renderField(mailingFields.mailing_country), renderField(mailingFields.mailing_postal_code), renderField(mailingFields.mailing_city), renderField(mailingFields.mailing_state)] })), (childContactNotSame === null || childContactNotSame === void 0 ? void 0 : childContactNotSame.checked) && childContactFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(SectionTitle$1, { children: "Child's contact details" }) }), renderFieldWithHelperText(childContactFields.child_phone_number, false), renderFieldWithLayout(childContactFields.child_email_address, false), renderFieldWithHelperText(childContactFields.child_address_line1, false), renderFieldWithHelperText(childContactFields.child_address_line2, false), renderField(childContactFields.child_postal_code), childContactFields.child_country && renderField(childContactFields.child_country), renderField(childContactFields.child_city), renderField(childContactFields.child_state)] })), mailingAddressSame && (jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_not_same_as_residential", sx: {
                                     color: '#929094',
                                     '&.Mui-checked': {
                                         color: '#317abc',
                                     },
-                                } }), label: jsxRuntime.jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) }) }))] })) : (jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxRuntime.jsxs(material.Box, { children: [renderField(fields.phone_number), fields.phone_number.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
+                                } }), label: jsxRuntime.jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) }) })), childContactNotSame && (jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: childContactNotSame.checked, onChange: (e) => childContactNotSame.onChange(e.target.checked), name: "child_contact_not_same", sx: {
+                                    color: '#929094',
+                                    '&.Mui-checked': {
+                                        color: '#317abc',
+                                    },
+                                } }), label: jsxRuntime.jsxs(material.Box, { children: [jsxRuntime.jsx(CheckboxLabel, { children: childContactNotSame.label || defaultChildContactLabel }), jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
+                                            display: 'block',
+                                            fontSize: '12px',
+                                            color: '#5F5E62',
+                                            mt: 0.5,
+                                        } }, { children: childContactHelperText }))] }) }) }) }))] })) : (jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [isForChild && (jsxRuntime.jsx(SectionTitle$1, { children: "Policyowner contact details" })), jsxRuntime.jsxs(material.Box, { children: [renderField(fields.phone_number), fields.phone_number.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
                                 display: 'block',
                                 mt: 0.5,
                                 ml: 2,
                                 color: '#5F5E62',
                                 fontSize: '12px',
-                            } }, { children: fields.phone_number.helperText })))] }), renderField(fields.email_address), jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsxRuntime.jsx(SectionTitle$1, { children: "Residential address" }), jsxRuntime.jsxs(material.Box, { children: [renderField(fields.residential_address_line1), fields.residential_address_line1.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
+                            } }, { children: fields.phone_number.helperText })))] }), renderField(fields.email_address), ((mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && !isForChild) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsxRuntime.jsx(SectionTitle$1, { children: "Residential address" })] })), jsxRuntime.jsxs(material.Box, { children: [renderField(fields.residential_address_line1), fields.residential_address_line1.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
                                 display: 'block',
                                 mt: 0.5,
                                 color: '#5F5E62',
@@ -3761,7 +3826,7 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
                                 mt: 0.5,
                                 color: '#5F5E62',
                                 fontSize: '12px',
-                            } }, { children: fields.residential_address_line2.helperText })))] }), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), (mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && mailingFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SectionTitle$1, { children: "Mailing address" }), jsxRuntime.jsxs(material.Box, { children: [renderField(mailingFields.mailing_address_line1), mailingFields.mailing_address_line1.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
+                            } }, { children: fields.residential_address_line2.helperText })))] }), fields.country && renderField(fields.country), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), (mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && mailingFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsxRuntime.jsx(SectionTitle$1, { children: isForChild ? 'Policyowner mailing address' : 'Mailing address' }), isForChild && mailingFields.mailing_phone_number && (jsxRuntime.jsxs(material.Box, { children: [renderField(mailingFields.mailing_phone_number), mailingFields.mailing_phone_number.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: { display: 'block', mt: 0.5, ml: 2, color: '#5F5E62', fontSize: '12px' } }, { children: mailingFields.mailing_phone_number.helperText })))] })), isForChild && mailingFields.mailing_email_address && (renderField(mailingFields.mailing_email_address)), jsxRuntime.jsxs(material.Box, { children: [renderField(mailingFields.mailing_address_line1), mailingFields.mailing_address_line1.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
                                         display: 'block',
                                         mt: 0.5,
                                         color: '#5F5E62',
@@ -3771,12 +3836,22 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
                                         mt: 0.5,
                                         color: '#5F5E62',
                                         fontSize: '12px',
-                                    } }, { children: mailingFields.mailing_address_line2.helperText })))] }), renderField(mailingFields.mailing_postal_code), renderField(mailingFields.mailing_city), renderField(mailingFields.mailing_state)] })), mailingAddressSame && (jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_not_same_as_residential", sx: {
+                                    } }, { children: mailingFields.mailing_address_line2.helperText })))] }), mailingFields.mailing_country && renderField(mailingFields.mailing_country), renderField(mailingFields.mailing_postal_code), renderField(mailingFields.mailing_city), renderField(mailingFields.mailing_state)] })), (childContactNotSame === null || childContactNotSame === void 0 ? void 0 : childContactNotSame.checked) && childContactFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsxRuntime.jsx(SectionTitle$1, { children: "Child's contact details" }), jsxRuntime.jsxs(material.Box, { children: [renderField(childContactFields.child_phone_number), childContactFields.child_phone_number.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: { display: 'block', mt: 0.5, ml: 2, color: '#5F5E62', fontSize: '12px' } }, { children: childContactFields.child_phone_number.helperText })))] }), renderField(childContactFields.child_email_address), jsxRuntime.jsxs(material.Box, { children: [renderField(childContactFields.child_address_line1), childContactFields.child_address_line1.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: { display: 'block', mt: 0.5, color: '#5F5E62', fontSize: '12px' } }, { children: childContactFields.child_address_line1.helperText })))] }), jsxRuntime.jsxs(material.Box, { children: [renderField(childContactFields.child_address_line2), childContactFields.child_address_line2.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: { display: 'block', mt: 0.5, color: '#5F5E62', fontSize: '12px' } }, { children: childContactFields.child_address_line2.helperText })))] }), renderField(childContactFields.child_postal_code), childContactFields.child_country && renderField(childContactFields.child_country), renderField(childContactFields.child_city), renderField(childContactFields.child_state)] })), mailingAddressSame && (jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_not_same_as_residential", sx: {
                                 color: '#929094',
                                 '&.Mui-checked': {
                                     color: '#317abc',
                                 },
-                            } }), label: jsxRuntime.jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) }))] }))) })));
+                            } }), label: jsxRuntime.jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) })), childContactNotSame && (jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: childContactNotSame.checked, onChange: (e) => childContactNotSame.onChange(e.target.checked), name: "child_contact_not_same", sx: {
+                                color: '#929094',
+                                '&.Mui-checked': {
+                                    color: '#317abc',
+                                },
+                            } }), label: jsxRuntime.jsxs(material.Box, { children: [jsxRuntime.jsx(CheckboxLabel, { children: childContactNotSame.label || defaultChildContactLabel }), jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
+                                        display: 'block',
+                                        fontSize: '12px',
+                                        color: '#5F5E62',
+                                        mt: 0.5,
+                                    } }, { children: childContactHelperText }))] }) }) }))] }))) })));
 };
 
 const FormContainer$1 = styles.styled(material.Box)({
@@ -3851,28 +3926,30 @@ styles.styled(material.Box)({
     },
 });
 
-const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
+const ChildInformationForm = ({ renderField, fields, consents, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
     const Container = desktopGridLayout ? DesktopFormContainer : FormContainer;
+    const defaultBankConfirmationLabel = "I confirm this bank account is my child's and consent to AmMetLife crediting payouts to it";
+    const defaultMarketingLabel = "I/We consent to AmMetLife Insurance Berhad using my child's personal data for marketing and communication via digital platforms such as email, WhatsApp, and mobile";
+    const renderHelperField = (field) => (jsxRuntime.jsxs(material.Box, { children: [renderField(field), field.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
+                    display: 'block',
+                    mt: 0.5,
+                    ml: 2,
+                    color: '#5F5E62',
+                    fontSize: '12px',
+                    wordSpacing: '-5px',
+                } }, { children: field.helperText })))] }));
+    const renderConsents = () => {
+        if (!consents)
+            return null;
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [consents.bank_account_confirmation && (jsxRuntime.jsxs(material.Box, Object.assign({ sx: desktopGridLayout ? { gridColumn: '1 / -1' } : undefined }, { children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => { var _a; return (_a = consents.bank_account_confirmation) === null || _a === void 0 ? void 0 : _a.onChange(e.target.checked); }, name: "bank_account_confirmation" }), label: jsxRuntime.jsx(material.Typography, Object.assign({ sx: { fontSize: '14px', color: '#5f5e62', lineHeight: '18px' } }, { children: consents.bank_account_confirmation.label || defaultBankConfirmationLabel })), sx: { alignItems: 'flex-start', m: 0, '& .MuiCheckbox-root': { pt: '2px' } } }), consents.bank_account_confirmation.error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: { color: 'error.main', fontSize: '12px', mt: 0.5, ml: 4 } }, { children: consents.bank_account_confirmation.error })))] }))), consents.marketing_consent && (jsxRuntime.jsx(material.Box, Object.assign({ sx: desktopGridLayout ? { gridColumn: '1 / -1' } : undefined }, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => { var _a; return (_a = consents.marketing_consent) === null || _a === void 0 ? void 0 : _a.onChange(e.target.checked); }, name: "marketing_consent" }), label: jsxRuntime.jsx(material.Typography, Object.assign({ sx: { fontSize: '14px', color: '#5f5e62', lineHeight: '18px' } }, { children: consents.marketing_consent.label || defaultMarketingLabel })), sx: { alignItems: 'flex-start', m: 0, '& .MuiCheckbox-root': { pt: '2px' } } }) })))] }));
+    };
+    const renderAdditionalFields = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [fields.place_of_birth && renderField(fields.place_of_birth), fields.marital_status && renderField(fields.marital_status), fields.race && renderField(fields.race), fields.religion && renderField(fields.religion), fields.occupation && renderField(fields.occupation), fields.industry && renderField(fields.industry), fields.crediting_bank_name && renderField(fields.crediting_bank_name), fields.crediting_bank_account_number && renderField(fields.crediting_bank_account_number), fields.annual_income && renderField(fields.annual_income)] }));
     // Desktop layout with 2-column grid
     if (desktopGridLayout) {
-        return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(FieldsGridContainer, { children: [jsxRuntime.jsxs(material.Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
-                                    display: 'block',
-                                    mt: 0.5,
-                                    ml: 2,
-                                    color: '#5F5E62',
-                                    fontSize: '12px',
-                                    wordSpacing: '-5px',
-                                } }, { children: fields.full_name.helperText })))] }), fields.nric ? renderField(fields.nric) : renderField(fields.date_of_birth), fields.nric && renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.nationality)] }) })));
+        return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(FieldsGridContainer, { children: [renderHelperField(fields.full_name), fields.nric ? renderHelperField(fields.nric) : renderField(fields.date_of_birth), fields.nric && renderField(fields.date_of_birth), renderField(fields.gender), fields.salutation && renderField(fields.salutation), renderField(fields.nationality), renderAdditionalFields(), renderConsents()] }) })));
     }
     // Mobile layout - single column
-    return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxRuntime.jsxs(material.Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
-                                display: 'block',
-                                mt: 0.5,
-                                ml: 2,
-                                color: '#5F5E62',
-                                fontSize: '12px',
-                                wordSpacing: '-5px',
-                            } }, { children: fields.full_name.helperText })))] }), fields.nric && renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.nationality)] })) })));
+    return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [renderHelperField(fields.full_name), fields.nric && renderHelperField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), fields.salutation && renderField(fields.salutation), renderField(fields.nationality), renderAdditionalFields(), renderConsents()] })) })));
 };
 
 /**
@@ -3897,7 +3974,7 @@ const FAQTitle = material.styled(material.Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '20px',
     lineHeight: '28px',
-    wordSpacing: '0px',
+    wordSpacing: '-5px',
     textAlign: 'center',
     width: '100%',
     margin: 0,
@@ -3946,7 +4023,7 @@ const FAQQuestion = material.styled(material.Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '14px',
     lineHeight: '20px',
-    wordSpacing: '0px',
+    wordSpacing: '-5px',
     flex: 1,
     [theme.breakpoints.up('md')]: {
         fontSize: '18px',