igloo-d2c-components 1.0.14 → 1.0.15

package/dist/esm/index.js

@@ -2082,7 +2082,7 @@ function BillingToggle({ value, onChange, formatMessage = (descriptor) => descri
     const toggleBgColor = getThemeColor(theme, 'ui.sliderBackground', '#f9f9f9');
     return (jsxs(ToggleContainer, Object.assign({ sx: {
             backgroundColor: toggleBgColor,
-        } }, { children: [jsx(ToggleButton, Object.assign({ active: value === 'monthly', onClick: () => onChange('monthly'), sx: {
+        } }, { children: [jsx(ToggleButton, Object.assign({ active: value === 'annually', onClick: () => onChange('monthly'), sx: {
                     backgroundColor: value === 'monthly' ? toggleActiveColor : 'transparent',
                     color: value === 'monthly'
                         ? toggleActiveTextColor
@@ -2618,7 +2618,7 @@ const HeaderContainer = styled(Box)(({ sticky }) => (Object.assign(Object.assign
 const SectionHeader = styled(Box)({
     padding: '0 16px 24px',
 });
-const SectionTitle$1 = styled(Typography)({
+const SectionTitle$2 = styled(Typography)({
     fontFamily: 'Montserrat',
     fontSize: '20px',
     fontWeight: 700,
@@ -2635,7 +2635,7 @@ const SectionDescription = styled(Typography)({
 });
 
 const CheckoutHeader = ({ progress, product, sectionTitle, sectionDescription, sticky = true, progressBarTheme, sx, }) => {
-    return (jsxs(HeaderContainer, Object.assign({ sticky: sticky, sx: sx }, { children: [jsx(CheckoutProgress, Object.assign({}, progress, { progressBarTheme: progressBarTheme })), product && (jsx(Box, Object.assign({ sx: { padding: '0 16px 24px' } }, { children: jsx(ProductCard, Object.assign({}, product)) }))), jsxs(SectionHeader, { children: [jsx(SectionTitle$1, { children: sectionTitle }), jsx(SectionDescription, { children: sectionDescription })] })] })));
+    return (jsxs(HeaderContainer, Object.assign({ sticky: sticky, sx: sx }, { children: [jsx(CheckoutProgress, Object.assign({}, progress, { progressBarTheme: progressBarTheme })), product && (jsx(Box, Object.assign({ sx: { padding: '0 16px 24px' } }, { children: jsx(ProductCard, Object.assign({}, product)) }))), jsxs(SectionHeader, { children: [jsx(SectionTitle$2, { children: sectionTitle }), jsx(SectionDescription, { children: sectionDescription })] })] })));
 };
 
 const ButtonContainer = styled(Box)(({ isFixed }) => ({
@@ -2787,9 +2787,16 @@ const CheckboxLabel = styled(Typography)({
     color: '#5F5E62',
     lineHeight: '18px',
 });
+const SectionTitle$1 = styled(Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '16px',
+    fontWeight: 600,
+    color: '#13131B',
+    lineHeight: '24px',
+});
 
-const ContactDetailsForm = ({ renderField, fields, mailingAddressSame, onSubmit, formRef, sx, }) => {
-    const defaultMailingLabel = 'My mailing address is the same as residential';
+const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddressSame, onSubmit, formRef, sx, }) => {
+    const defaultMailingLabel = 'My mailing address is not the same as residential';
     return (jsx(FormContainer$2, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxs(Box, { children: [renderField(fields.phone_number), fields.phone_number.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
                                 display: 'block',
                                 mt: 0.5,
@@ -2797,7 +2804,40 @@ const ContactDetailsForm = ({ renderField, fields, mailingAddressSame, onSubmit,
                                 color: '#5F5E62',
                                 fontSize: '12px',
                                 fontFamily: 'Montserrat',
-                            } }, { children: fields.phone_number.helperText })))] }), renderField(fields.email_address), renderField(fields.residential_address), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), mailingAddressSame && (jsx(CheckboxContainer, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_same_as_residential" }), label: jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) }))] })) })));
+                            } }, { children: fields.phone_number.helperText })))] }), renderField(fields.email_address), 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: {
+                                display: 'block',
+                                mt: 0.5,
+                                ml: 2,
+                                color: '#5F5E62',
+                                fontSize: '12px',
+                                fontFamily: 'Montserrat',
+                            } }, { 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: {
+                                display: 'block',
+                                mt: 0.5,
+                                ml: 2,
+                                color: '#5F5E62',
+                                fontSize: '12px',
+                                fontFamily: 'Montserrat',
+                            } }, { children: fields.residential_address_line2.helperText })))] }), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), (mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && mailingFields && (jsxs(Fragment, { children: [jsx(SectionTitle$1, { children: "Mailing address" }), jsxs(Box, { children: [renderField(mailingFields.mailing_address_line1), mailingFields.mailing_address_line1.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
+                                        display: 'block',
+                                        mt: 0.5,
+                                        ml: 2,
+                                        color: '#5F5E62',
+                                        fontSize: '12px',
+                                        fontFamily: 'Montserrat',
+                                    } }, { 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: {
+                                        display: 'block',
+                                        mt: 0.5,
+                                        ml: 2,
+                                        color: '#5F5E62',
+                                        fontSize: '12px',
+                                        fontFamily: 'Montserrat',
+                                    } }, { children: mailingFields.mailing_address_line2.helperText })))] }), renderField(mailingFields.mailing_postal_code), renderField(mailingFields.mailing_city), renderField(mailingFields.mailing_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: {
+                                color: '#929094',
+                                '&.Mui-checked': {
+                                    color: '#317abc',
+                                },
+                            } }), label: jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) }))] })) })));
 };
 
 const FormContainer$1 = styled(Box)({