igloo-d2c-components 1.0.31 → 1.0.33

package/dist/cjs/index.js

@@ -2252,6 +2252,85 @@ const StyledDrawer = material.styled(material.Drawer)(() => ({
         maxHeight: '90vh',
     },
 }));
+// Desktop Dialog styles
+const StyledDialog = material.styled(material.Dialog)(() => ({
+    '& .MuiDialog-paper': {
+        borderRadius: '0px',
+        maxHeight: '90vh',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        maxWidth: '900px',
+    },
+}));
+const DialogHeader = material.styled(material.Box)(() => ({
+    position: 'sticky',
+    top: 0,
+    backgroundColor: '#fff',
+    zIndex: 1,
+    padding: '24px 24px 0',
+}));
+const DialogHeaderTitle = material.styled(material.Typography)(() => ({
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '24px',
+    fontWeight: 600,
+    lineHeight: '32px',
+    color: '#13131b',
+    marginBottom: '8px',
+    paddingRight: '32px',
+    wordSpacing: '0px',
+}));
+const DialogHeaderSubtitle = material.styled(material.Typography)(() => ({
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '14px',
+    fontWeight: 400,
+    lineHeight: '20px',
+    color: '#5f5e62',
+    wordSpacing: '-5px',
+}));
+const DialogContent = material.styled(material.Box)(() => ({
+    flex: 1,
+    overflowY: 'auto',
+    padding: '24px',
+}));
+const DialogProductsGrid = material.styled(material.Box)(() => ({
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gap: '16px',
+}));
+const DialogProductCard = material.styled(material.Box)(() => ({
+    border: '1px solid #E0E0E0',
+    borderRadius: '0px',
+    padding: '16px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: '16px',
+}));
+const DialogProductLogo = material.styled(material.Box)(() => ({
+    height: '32px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+const DialogProductName = material.styled(material.Typography)(() => ({
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '16px',
+    fontWeight: 600,
+    lineHeight: '24px',
+    color: '#13131b',
+    textAlign: 'center',
+    wordSpacing: '0px',
+}));
+const DialogProductType = material.styled(material.Typography)(() => ({
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '14px',
+    fontWeight: 400,
+    lineHeight: '20px',
+    color: '#5f5e62',
+    textAlign: 'center',
+    wordSpacing: '-5px',
+}));
 const DrawerContent = material.styled(material.Box)({
     display: 'flex',
     flexDirection: 'column',
@@ -2349,20 +2428,40 @@ const ViewPlansButton = material.styled(material.Button)({
     borderRadius: '8px',
     height: '36px',
     textTransform: 'none',
-    fontFamily: 'Montserrat, sans-serif',
     fontSize: '14px',
     fontWeight: 500,
     lineHeight: '18px',
     wordSpacing: '-5px',
 });
 
-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', }) {
+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', }) {
     var _a, _b, _c, _d, _e, _f;
     const tenantTheme = useTenantTheme();
     // Get primary color from tenant theme, fallback to default
-    const primaryColor = ((_c = (_b = (_a = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) || '#317abc';
-    const primaryDark = ((_f = (_e = (_d = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme) === null || _d === void 0 ? void 0 : _d.palette) === null || _e === void 0 ? void 0 : _e.primary) === null || _f === void 0 ? void 0 : _f.dark) || '#2869a8';
-    const primaryDarker = '#1f5489'; // Active state
+    const primaryColor = ((_c = (_b = (_a = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) || '#0090DA';
+    const primaryDark = ((_f = (_e = (_d = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme) === null || _d === void 0 ? void 0 : _d.palette) === null || _e === void 0 ? void 0 : _e.primary) === null || _f === void 0 ? void 0 : _f.dark) || '#007bb8';
+    const primaryDarker = '#006699'; // Active state
+    // Desktop Dialog variant
+    if (variant === 'dialog') {
+        return (jsxRuntime.jsxs(StyledDialog, Object.assign({ open: open, onClose: onClose, maxWidth: "md", fullWidth: true }, { children: [jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: onClose, sx: {
+                                position: 'absolute',
+                                right: 16,
+                                top: 16,
+                            } }, { children: jsxRuntime.jsx(CloseIcon, {}) })), jsxRuntime.jsx(DialogHeaderTitle, { children: title }), jsxRuntime.jsx(DialogHeaderSubtitle, { children: subtitle })] }), jsxRuntime.jsx(DialogContent, { children: jsxRuntime.jsx(DialogProductsGrid, { children: products.map((product) => (jsxRuntime.jsxs(DialogProductCard, { children: [jsxRuntime.jsx(DialogProductLogo, { children: jsxRuntime.jsx("img", { src: product.logo, alt: product.name, style: {
+                                            width: '88px',
+                                            height: '32px',
+                                            objectFit: 'cover',
+                                        } }) }), jsxRuntime.jsxs(material.Box, Object.assign({ sx: { textAlign: 'center' } }, { children: [jsxRuntime.jsx(DialogProductName, { children: product.name }), jsxRuntime.jsx(DialogProductType, { children: product.type })] })), jsxRuntime.jsx(ViewPlansButton, Object.assign({ variant: "contained", fullWidth: true, onClick: () => onProductSelect(product.id), sx: {
+                                        backgroundColor: primaryColor,
+                                        '&:hover': {
+                                            backgroundColor: primaryDark,
+                                        },
+                                        '&:active': {
+                                            backgroundColor: primaryDarker,
+                                        },
+                                    } }, { children: viewPlansButtonText }))] }, product.id))) }) })] })));
+    }
+    // Mobile Drawer variant (default)
     return (jsxRuntime.jsx(StyledDrawer, Object.assign({ anchor: "bottom", open: open, onClose: onClose }, { children: jsxRuntime.jsxs(DrawerContent, { children: [jsxRuntime.jsx(DrawerHeader, { children: jsxRuntime.jsx(CloseButtonContainer, { children: jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: onClose, sx: { padding: 0 } }, { children: jsxRuntime.jsx(CloseIcon, { sx: { fontSize: 24, color: '#13131b' } }) })) }) }), jsxRuntime.jsxs(Header, { children: [jsxRuntime.jsx(HeaderTitle, { children: title }), jsxRuntime.jsx(HeaderSubtitle, { children: subtitle })] }), jsxRuntime.jsx(ProductsContainer, { children: jsxRuntime.jsx(ProductsGrid, { children: products.map((product) => (jsxRuntime.jsxs(ProductCard$1, { children: [jsxRuntime.jsxs(ProductInfo$1, { children: [jsxRuntime.jsx(ProductLogo, { children: jsxRuntime.jsx("img", { src: product.logo, alt: product.name, style: {
                                                     width: '88px',
                                                     height: '32px',
@@ -3278,7 +3377,6 @@ const ProductCardContainer = styles.styled(material.Box)(({ theme, showIndicator
 const LogoContainer = styles.styled(material.Box)({
     width: '45px',
     height: '40px',
-    border: '1.25px solid rgba(0, 0, 0, 0.1)',
     borderRadius: '10px',
     display: 'flex',
     alignItems: 'center',
@@ -3391,7 +3489,7 @@ const StyledButton = styles.styled('button')(({ isDisabled, desktopWidth }) => (
     fontSize: '14px',
     fontWeight: 500,
     lineHeight: '18px',
-    wordSpacing: '-5px',
+    wordSpacing: '0px',
     cursor: isDisabled ? 'not-allowed' : 'pointer',
     transition: 'all 0.2s ease',
     '&:hover': {
@@ -3461,6 +3559,7 @@ const HealthQuestionGroup = ({ question, questionNumber, value, onChange, error,
                     color: 'error.main',
                     fontSize: '12px',
                     mt: 0.5,
+                    wordSpacing: '-5px',
                 } }, { children: error })))] })));
 };
 
@@ -3534,18 +3633,21 @@ const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, form
                                 ml: 2,
                                 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 ||
                                         defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
                                     color: 'error.main',
                                     fontSize: '12px',
                                     mt: 0.5,
                                     ml: 4,
+                                    wordSpacing: '-5px',
                                 } }, { children: consents.bank_account_confirmation.error })))] }) })) : (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',
                                 mt: 0.5,
                                 ml: 4,
+                                wordSpacing: '-5px',
                             } }, { children: consents.bank_account_confirmation.error })))] })), desktopGridLayout ? (jsxRuntime.jsx(FullWidthField$1, { children: jsxRuntime.jsx(CheckboxContainer$1, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }) })) : (jsxRuntime.jsx(CheckboxContainer$1, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }))] })) })));
 };
 
@@ -3759,6 +3861,7 @@ const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, desk
                                     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)] }) })));
     }
     // Mobile layout - single column
@@ -3768,6 +3871,7 @@ const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, desk
                                 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)] })) })));
 };