igloo-d2c-components 1.0.14 → 1.0.15

package/dist/cjs/index.js

@@ -2102,7 +2102,7 @@ function BillingToggle({ value, onChange, formatMessage = (descriptor) => descri
     const toggleBgColor = getThemeColor(theme, 'ui.sliderBackground', '#f9f9f9');
     return (jsxRuntime.jsxs(ToggleContainer, Object.assign({ sx: {
             backgroundColor: toggleBgColor,
-        } }, { children: [jsxRuntime.jsx(ToggleButton, Object.assign({ active: value === 'monthly', onClick: () => onChange('monthly'), sx: {
+        } }, { children: [jsxRuntime.jsx(ToggleButton, Object.assign({ active: value === 'annually', onClick: () => onChange('monthly'), sx: {
                     backgroundColor: value === 'monthly' ? toggleActiveColor : 'transparent',
                     color: value === 'monthly'
                         ? toggleActiveTextColor
@@ -2638,7 +2638,7 @@ const HeaderContainer = styles.styled(material.Box)(({ sticky }) => (Object.assi
 const SectionHeader = styles.styled(material.Box)({
     padding: '0 16px 24px',
 });
-const SectionTitle$1 = styles.styled(material.Typography)({
+const SectionTitle$2 = styles.styled(material.Typography)({
     fontFamily: 'Montserrat',
     fontSize: '20px',
     fontWeight: 700,
@@ -2655,7 +2655,7 @@ const SectionDescription = styles.styled(material.Typography)({
 });
 
 const CheckoutHeader = ({ progress, product, sectionTitle, sectionDescription, sticky = true, progressBarTheme, sx, }) => {
-    return (jsxRuntime.jsxs(HeaderContainer, Object.assign({ sticky: sticky, sx: sx }, { children: [jsxRuntime.jsx(CheckoutProgress, Object.assign({}, progress, { progressBarTheme: progressBarTheme })), product && (jsxRuntime.jsx(material.Box, Object.assign({ sx: { padding: '0 16px 24px' } }, { children: jsxRuntime.jsx(ProductCard, Object.assign({}, product)) }))), jsxRuntime.jsxs(SectionHeader, { children: [jsxRuntime.jsx(SectionTitle$1, { children: sectionTitle }), jsxRuntime.jsx(SectionDescription, { children: sectionDescription })] })] })));
+    return (jsxRuntime.jsxs(HeaderContainer, Object.assign({ sticky: sticky, sx: sx }, { children: [jsxRuntime.jsx(CheckoutProgress, Object.assign({}, progress, { progressBarTheme: progressBarTheme })), product && (jsxRuntime.jsx(material.Box, Object.assign({ sx: { padding: '0 16px 24px' } }, { children: jsxRuntime.jsx(ProductCard, Object.assign({}, product)) }))), jsxRuntime.jsxs(SectionHeader, { children: [jsxRuntime.jsx(SectionTitle$2, { children: sectionTitle }), jsxRuntime.jsx(SectionDescription, { children: sectionDescription })] })] })));
 };
 
 const ButtonContainer = styles.styled(material.Box)(({ isFixed }) => ({
@@ -2807,9 +2807,16 @@ const CheckboxLabel = styles.styled(material.Typography)({
     color: '#5F5E62',
     lineHeight: '18px',
 });
+const SectionTitle$1 = styles.styled(material.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 (jsxRuntime.jsx(FormContainer$2, 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.phone_number), fields.phone_number.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
                                 display: 'block',
                                 mt: 0.5,
@@ -2817,7 +2824,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 && (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_same_as_residential" }), label: jsxRuntime.jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) }))] })) })));
+                            } }, { 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: {
+                                display: 'block',
+                                mt: 0.5,
+                                ml: 2,
+                                color: '#5F5E62',
+                                fontSize: '12px',
+                                fontFamily: 'Montserrat',
+                            } }, { children: fields.residential_address_line1.helperText })))] }), jsxRuntime.jsxs(material.Box, { children: [renderField(fields.residential_address_line2), fields.residential_address_line2.helperText && (jsxRuntime.jsx(material.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), 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: {
+                                        display: 'block',
+                                        mt: 0.5,
+                                        ml: 2,
+                                        color: '#5F5E62',
+                                        fontSize: '12px',
+                                        fontFamily: 'Montserrat',
+                                    } }, { children: mailingFields.mailing_address_line1.helperText })))] }), jsxRuntime.jsxs(material.Box, { children: [renderField(mailingFields.mailing_address_line2), mailingFields.mailing_address_line2.helperText && (jsxRuntime.jsx(material.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 && (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 }) }) }))] })) })));
 };
 
 const FormContainer$1 = styles.styled(material.Box)({