igloo-d2c-components 1.0.43 → 1.0.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/esm/index.js
CHANGED
|
@@ -947,7 +947,7 @@ const LogoContainer$2 = styled(Box)({
|
|
|
947
947
|
*/
|
|
948
948
|
const LogoImage$1 = styled('img')({
|
|
949
949
|
width: '126px',
|
|
950
|
-
height: '
|
|
950
|
+
height: '16px',
|
|
951
951
|
objectFit: 'contain',
|
|
952
952
|
});
|
|
953
953
|
/**
|
|
@@ -1793,7 +1793,7 @@ function Header$1({ logo, navigationLinks, languages, currentLocale, userToken,
|
|
|
1793
1793
|
}
|
|
1794
1794
|
|
|
1795
1795
|
const StyledAppBar = styled(AppBar$1)(({ theme }) => ({
|
|
1796
|
-
backgroundColor: '#
|
|
1796
|
+
backgroundColor: '#FFFFFF',
|
|
1797
1797
|
boxShadow: '0px 2px 20px 4px rgba(0, 0, 0, 0.14)',
|
|
1798
1798
|
zIndex: theme.zIndex.drawer + 1,
|
|
1799
1799
|
}));
|
|
@@ -1812,12 +1812,12 @@ const LogoContainer$1 = styled('div')(() => ({
|
|
|
1812
1812
|
display: 'flex',
|
|
1813
1813
|
alignItems: 'center',
|
|
1814
1814
|
cursor: 'pointer',
|
|
1815
|
-
height: '
|
|
1816
|
-
width: '
|
|
1815
|
+
height: '16px',
|
|
1816
|
+
width: '116px',
|
|
1817
1817
|
}));
|
|
1818
1818
|
const LogoImage = styled('img')(() => ({
|
|
1819
|
-
height: '
|
|
1820
|
-
width: '
|
|
1819
|
+
height: '16px',
|
|
1820
|
+
width: '116px',
|
|
1821
1821
|
objectFit: 'contain',
|
|
1822
1822
|
}));
|
|
1823
1823
|
const MenuIconButton = styled(IconButton)(() => ({
|
|
@@ -3745,19 +3745,8 @@ const FullWidthField$1 = styled(Box)({
|
|
|
3745
3745
|
gridColumn: '1 / -1',
|
|
3746
3746
|
},
|
|
3747
3747
|
});
|
|
3748
|
-
/**
|
|
3749
|
-
* Wrapper for consent checkboxes - 28px gap between them on desktop (per design)
|
|
3750
|
-
*/
|
|
3751
|
-
const ConsentCheckboxesWrapper = styled(Box)({
|
|
3752
|
-
display: 'flex',
|
|
3753
|
-
flexDirection: 'column',
|
|
3754
|
-
gap: '24px',
|
|
3755
|
-
marginTop: '12px',
|
|
3756
|
-
'@media (min-width: 900px)': {
|
|
3757
|
-
gap: '28px',
|
|
3758
|
-
},
|
|
3759
|
-
});
|
|
3760
3748
|
const CheckboxContainer$1 = styled(Box)({
|
|
3749
|
+
marginTop: '12px',
|
|
3761
3750
|
'& .MuiFormControlLabel-root': {
|
|
3762
3751
|
alignItems: 'center',
|
|
3763
3752
|
marginLeft: 0,
|
|
@@ -3789,23 +3778,21 @@ const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, form
|
|
|
3789
3778
|
color: '#5F5E62',
|
|
3790
3779
|
fontSize: '12px',
|
|
3791
3780
|
wordSpacing: '-5px',
|
|
3792
|
-
} }, { 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), renderField(fields.occupation), renderField(fields.industry), renderField(fields.crediting_bank_name), renderField(fields.crediting_bank_account_number), fields.annual_income && renderField(fields.annual_income), desktopGridLayout ? (jsx(FullWidthField$1, { children: jsxs(
|
|
3793
|
-
|
|
3794
|
-
|
|
3795
|
-
|
|
3796
|
-
|
|
3797
|
-
|
|
3798
|
-
|
|
3799
|
-
|
|
3800
|
-
|
|
3801
|
-
|
|
3802
|
-
|
|
3803
|
-
|
|
3804
|
-
|
|
3805
|
-
|
|
3806
|
-
|
|
3807
|
-
} }, { children: consents.bank_account_confirmation.error })))] }), jsx(CheckboxContainer$1, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsx(CheckboxLabel$1, { children: consents.marketing_consent.label ||
|
|
3808
|
-
defaultMarketingLabel }) }) })] }))] })) })));
|
|
3781
|
+
} }, { 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), renderField(fields.occupation), renderField(fields.industry), renderField(fields.crediting_bank_name), renderField(fields.crediting_bank_account_number), fields.annual_income && renderField(fields.annual_income), desktopGridLayout ? (jsx(FullWidthField$1, { children: jsxs(CheckboxContainer$1, { children: [jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
|
|
3782
|
+
defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsx(Typography, Object.assign({ sx: {
|
|
3783
|
+
color: 'error.main',
|
|
3784
|
+
fontSize: '12px',
|
|
3785
|
+
mt: 0.5,
|
|
3786
|
+
ml: 4,
|
|
3787
|
+
wordSpacing: '-5px',
|
|
3788
|
+
} }, { children: consents.bank_account_confirmation.error })))] }) })) : (jsxs(CheckboxContainer$1, { children: [jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
|
|
3789
|
+
defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsx(Typography, Object.assign({ sx: {
|
|
3790
|
+
color: 'error.main',
|
|
3791
|
+
fontSize: '12px',
|
|
3792
|
+
mt: 0.5,
|
|
3793
|
+
ml: 4,
|
|
3794
|
+
wordSpacing: '-5px',
|
|
3795
|
+
} }, { children: consents.bank_account_confirmation.error })))] })), desktopGridLayout ? (jsx(FullWidthField$1, { children: jsx(CheckboxContainer$1, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }) })) : (jsx(CheckboxContainer$1, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }))] })) })));
|
|
3809
3796
|
};
|
|
3810
3797
|
|
|
3811
3798
|
const FormContainer$2 = styled(Box)({
|
|
@@ -3891,17 +3878,15 @@ const ContactDetailsForm = ({ renderField, fields, isForChild = false, mailingFi
|
|
|
3891
3878
|
const content = (jsxs(Box, { children: [renderField(field), field.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
|
|
3892
3879
|
display: 'block',
|
|
3893
3880
|
mt: 0.5,
|
|
3894
|
-
ml: 2,
|
|
3895
3881
|
color: '#5F5E62',
|
|
3896
3882
|
fontSize: '12px',
|
|
3897
|
-
wordSpacing: '-5px',
|
|
3898
3883
|
} }, { children: field.helperText })))] }));
|
|
3899
3884
|
if (desktopGridLayout && fullWidth) {
|
|
3900
3885
|
return jsx(FullWidthField, { children: content });
|
|
3901
3886
|
}
|
|
3902
3887
|
return content;
|
|
3903
3888
|
};
|
|
3904
|
-
return (jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: desktopGridLayout ? (jsxs(FieldsGridContainer$1, { children: [isForChild && (jsx(FullWidthField, { children: jsx(SectionTitle$1, { children: "Policyowner contact details" }) })),
|
|
3889
|
+
return (jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: desktopGridLayout ? (jsxs(FieldsGridContainer$1, { children: [isForChild && (jsx(FullWidthField, { children: 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) && (jsxs(Fragment, { children: [jsx(FullWidthField, { children: jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsx(FullWidthField, { children: 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 && (jsxs(Fragment, { children: [jsx(FullWidthField, { children: jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsx(FullWidthField, { children: 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 && (jsxs(Fragment, { children: [jsx(FullWidthField, { children: jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsx(FullWidthField, { children: 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 && (jsx(FullWidthField, { children: jsx(CheckboxContainer, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_not_same_as_residential", sx: {
|
|
3905
3890
|
color: '#929094',
|
|
3906
3891
|
'&.Mui-checked': {
|
|
3907
3892
|
color: '#317abc',
|
|
@@ -3916,35 +3901,33 @@ const ContactDetailsForm = ({ renderField, fields, isForChild = false, mailingFi
|
|
|
3916
3901
|
fontSize: '12px',
|
|
3917
3902
|
color: '#5F5E62',
|
|
3918
3903
|
mt: 0.5,
|
|
3919
|
-
} }, { children: childContactHelperText }))] }) }) }) }))] })) : (jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [isForChild && (jsx(SectionTitle$1, { children: "Policyowner contact details" })),
|
|
3904
|
+
} }, { children: childContactHelperText }))] }) }) }) }))] })) : (jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [isForChild && (jsx(SectionTitle$1, { children: "Policyowner contact details" })), jsxs(Box, { children: [renderField(fields.phone_number), fields.phone_number.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
|
|
3905
|
+
display: 'block',
|
|
3906
|
+
mt: 0.5,
|
|
3907
|
+
ml: 2,
|
|
3908
|
+
color: '#5F5E62',
|
|
3909
|
+
fontSize: '12px',
|
|
3910
|
+
} }, { children: fields.phone_number.helperText })))] }), renderField(fields.email_address), ((mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && !isForChild) && (jsxs(Fragment, { children: [jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsx(SectionTitle$1, { children: "Residential address" })] })), jsxs(Box, { children: [renderField(fields.residential_address_line1), fields.residential_address_line1.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
|
|
3920
3911
|
display: 'block',
|
|
3921
3912
|
mt: 0.5,
|
|
3922
3913
|
color: '#5F5E62',
|
|
3923
3914
|
fontSize: '12px',
|
|
3924
|
-
ml: 2,
|
|
3925
|
-
wordSpacing: '-5px',
|
|
3926
3915
|
} }, { children: fields.residential_address_line1.helperText })))] }), jsxs(Box, { children: [renderField(fields.residential_address_line2), fields.residential_address_line2.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
|
|
3927
3916
|
display: 'block',
|
|
3928
3917
|
mt: 0.5,
|
|
3929
3918
|
color: '#5F5E62',
|
|
3930
3919
|
fontSize: '12px',
|
|
3931
|
-
|
|
3932
|
-
wordSpacing: '-5px',
|
|
3933
|
-
} }, { 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 && (jsxs(Fragment, { children: [jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsx(SectionTitle$1, { children: isForChild ? 'Policyowner mailing address' : 'Mailing address' }), isForChild && mailingFields.mailing_phone_number && (renderField(mailingFields.mailing_phone_number)), isForChild && mailingFields.mailing_email_address && (renderField(mailingFields.mailing_email_address)), jsxs(Box, { children: [renderField(mailingFields.mailing_address_line1), mailingFields.mailing_address_line1.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
|
|
3920
|
+
} }, { 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 && (jsxs(Fragment, { children: [jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsx(SectionTitle$1, { children: isForChild ? 'Policyowner mailing address' : 'Mailing address' }), isForChild && mailingFields.mailing_phone_number && (jsxs(Box, { children: [renderField(mailingFields.mailing_phone_number), mailingFields.mailing_phone_number.helperText && (jsx(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)), jsxs(Box, { children: [renderField(mailingFields.mailing_address_line1), mailingFields.mailing_address_line1.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
|
|
3934
3921
|
display: 'block',
|
|
3935
3922
|
mt: 0.5,
|
|
3936
3923
|
color: '#5F5E62',
|
|
3937
3924
|
fontSize: '12px',
|
|
3938
|
-
ml: 2,
|
|
3939
|
-
wordSpacing: '-5px',
|
|
3940
3925
|
} }, { children: mailingFields.mailing_address_line1.helperText })))] }), jsxs(Box, { children: [renderField(mailingFields.mailing_address_line2), mailingFields.mailing_address_line2.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
|
|
3941
3926
|
display: 'block',
|
|
3942
3927
|
mt: 0.5,
|
|
3943
3928
|
color: '#5F5E62',
|
|
3944
3929
|
fontSize: '12px',
|
|
3945
|
-
|
|
3946
|
-
wordSpacing: '-5px',
|
|
3947
|
-
} }, { 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 && (jsxs(Fragment, { children: [jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsx(SectionTitle$1, { children: "Child's contact details" }), renderField(childContactFields.child_phone_number), renderField(childContactFields.child_email_address), jsxs(Box, { children: [renderField(childContactFields.child_address_line1), childContactFields.child_address_line1.helperText && (jsx(Box, Object.assign({ component: "span", sx: { display: 'block', mt: 0.5, ml: 2, wordSpacing: '-5px', color: '#5F5E62', fontSize: '12px' } }, { children: childContactFields.child_address_line1.helperText })))] }), jsxs(Box, { children: [renderField(childContactFields.child_address_line2), childContactFields.child_address_line2.helperText && (jsx(Box, Object.assign({ component: "span", sx: { display: 'block', mt: 0.5, ml: 2, wordSpacing: '-5px', 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 && (jsx(CheckboxContainer, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_not_same_as_residential", sx: {
|
|
3930
|
+
} }, { 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 && (jsxs(Fragment, { children: [jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsx(SectionTitle$1, { children: "Child's contact details" }), jsxs(Box, { children: [renderField(childContactFields.child_phone_number), childContactFields.child_phone_number.helperText && (jsx(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), jsxs(Box, { children: [renderField(childContactFields.child_address_line1), childContactFields.child_address_line1.helperText && (jsx(Box, Object.assign({ component: "span", sx: { display: 'block', mt: 0.5, color: '#5F5E62', fontSize: '12px' } }, { children: childContactFields.child_address_line1.helperText })))] }), jsxs(Box, { children: [renderField(childContactFields.child_address_line2), childContactFields.child_address_line2.helperText && (jsx(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 && (jsx(CheckboxContainer, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_not_same_as_residential", sx: {
|
|
3948
3931
|
color: '#929094',
|
|
3949
3932
|
'&.Mui-checked': {
|
|
3950
3933
|
color: '#317abc',
|
|
@@ -3959,8 +3942,6 @@ const ContactDetailsForm = ({ renderField, fields, isForChild = false, mailingFi
|
|
|
3959
3942
|
fontSize: '12px',
|
|
3960
3943
|
color: '#5F5E62',
|
|
3961
3944
|
mt: 0.5,
|
|
3962
|
-
ml: 2,
|
|
3963
|
-
wordSpacing: '-5px',
|
|
3964
3945
|
} }, { children: childContactHelperText }))] }) }) }))] }))) })));
|
|
3965
3946
|
};
|
|
3966
3947
|
|