igloo-d2c-components 1.0.12 → 1.0.14

package/dist/cjs/index.js

@@ -14,6 +14,7 @@ var ArrowBackIcon = require('@mui/icons-material/ArrowBack');
 var InfoIcon = require('@mui/icons-material/Info');
 var AddIcon = require('@mui/icons-material/Add');
 var RemoveIcon = require('@mui/icons-material/Remove');
+var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -1104,7 +1105,7 @@ function Header$1({ logo, alternateLogo, showAlternateLogo = false, navigationLi
                                             handleOpenNavMenu(e);
                                         }
                                     }, color: "inherit", sx: Object.assign({}, (isPartnershipPageMobileView &&
-                                        scrolled && { padding: '0px !important' })) }, { children: Boolean(anchorElNav) ? (jsxRuntime.jsx(StyledCloseIcon, {})) : isPartnershipPageMobileView && scrolled ? (jsxRuntime.jsx(StyledButton$1, Object.assign({ variant: "contained", onClick: onPartnershipCTAClick }, { children: jsxRuntime.jsx(TypographyBtnText, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Be Our Partner' }) })) }))) : isSeoPageView && scrolled && bannerData ? (jsxRuntime.jsx(StyledButtonBanner, Object.assign({ style: {
+                                        scrolled && { padding: '0px !important' })) }, { children: anchorElNav ? (jsxRuntime.jsx(StyledCloseIcon, {})) : isPartnershipPageMobileView && scrolled ? (jsxRuntime.jsx(StyledButton$1, Object.assign({ variant: "contained", onClick: onPartnershipCTAClick }, { children: jsxRuntime.jsx(TypographyBtnText, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Be Our Partner' }) })) }))) : isSeoPageView && scrolled && bannerData ? (jsxRuntime.jsx(StyledButtonBanner, Object.assign({ style: {
                                             background: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaBGColor,
                                         }, variant: "contained", onClick: onGetQuoteClick }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ style: {
                                                 color: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaTextColor,
@@ -2637,7 +2638,7 @@ const HeaderContainer = styles.styled(material.Box)(({ sticky }) => (Object.assi
 const SectionHeader = styles.styled(material.Box)({
     padding: '0 16px 24px',
 });
-const SectionTitle = styles.styled(material.Typography)({
+const SectionTitle$1 = styles.styled(material.Typography)({
     fontFamily: 'Montserrat',
     fontSize: '20px',
     fontWeight: 700,
@@ -2654,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, { 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$1, { children: sectionTitle }), jsxRuntime.jsx(SectionDescription, { children: sectionDescription })] })] })));
 };
 
 const ButtonContainer = styles.styled(material.Box)(({ isFixed }) => ({
@@ -2842,6 +2843,256 @@ const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, }) =
                             } }, { children: fields.full_name.helperText })))] }), renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.nationality)] })) })));
 };
 
+/**
+ * FAQ Accordion Styled Components
+ * MUI styled components for the FAQ Accordion
+ */
+const FAQContainer = material.styled(material.Box)(({ theme }) => ({
+    padding: '50px 16px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    backgroundColor: '#ffffff',
+    [theme.breakpoints.up('md')]: {
+        padding: '64px 32px',
+        gap: '32px',
+    },
+}));
+const FAQTitle = material.styled(material.Typography)(({ theme }) => ({
+    fontWeight: 700,
+    fontSize: '20px',
+    lineHeight: '28px',
+    textAlign: 'center',
+    width: '100%',
+    margin: 0,
+    [theme.breakpoints.up('md')]: {
+        fontSize: '28px',
+        lineHeight: '36px',
+    },
+}));
+const StyledAccordion = material.styled(material.Accordion)(({ theme }) => ({
+    backgroundColor: 'transparent',
+    boxShadow: 'none',
+    borderRadius: 0,
+    '&:before': {
+        display: 'none',
+    },
+    '&:not(:last-child)': {
+        borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
+    },
+    '&.Mui-expanded': {
+        margin: 0,
+    },
+}));
+const StyledAccordionSummary = material.styled(material.AccordionSummary)(({ theme }) => ({
+    minHeight: '48px',
+    padding: '12px 0',
+    gap: '6px',
+    '&.Mui-expanded': {
+        minHeight: '48px',
+    },
+    '& .MuiAccordionSummary-content': {
+        margin: 0,
+        '&.Mui-expanded': {
+            margin: 0,
+        },
+    },
+    '& .MuiAccordionSummary-expandIconWrapper': {
+        transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+    },
+}));
+const FAQQuestion = material.styled(material.Typography)(({ theme }) => ({
+    fontWeight: 600,
+    fontSize: '14px',
+    lineHeight: '20px',
+    flex: 1,
+    [theme.breakpoints.up('md')]: {
+        fontSize: '15px',
+        lineHeight: '22px',
+    },
+}));
+const StyledAccordionDetails = material.styled(material.AccordionDetails)(({ theme }) => ({
+    fontWeight: 400,
+    fontSize: '14px',
+    lineHeight: '20px',
+    padding: '0 0 16px 0',
+    [theme.breakpoints.up('md')]: {
+        fontSize: '15px',
+        lineHeight: '22px',
+        padding: '0 0 20px 0',
+    },
+}));
+const FAQContentWrapper = material.styled(material.Box)({
+    width: '100%',
+});
+
+/**
+ * FAQAccordion - Displays a list of frequently asked questions in an accordion format
+ *
+ * @example
+ * ```tsx
+ * const faqs = [
+ *   { id: 'faq-1', question: 'What is this product?', answer: 'This is a great product.' },
+ *   { id: 'faq-2', question: 'How does it work?', answer: 'It works seamlessly.' },
+ * ]
+ *
+ * <FAQAccordion
+ *   faqs={faqs}
+ *   title="Frequently Asked Questions"
+ * />
+ * ```
+ */
+function FAQAccordion({ faqs, title = 'Frequently Asked Questions', formatMessage = (descriptor) => descriptor.defaultMessage || descriptor.id, backgroundColor, maxWidth = '1128px', className, defaultExpanded, onAccordionChange, }) {
+    const [expanded, setExpanded] = React.useState(defaultExpanded || false);
+    // Safely get theme, handle SSR case where it might be undefined
+    const tenantTheme = useTenantTheme();
+    const theme = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
+    // Get theme colors with SSR-safe fallbacks
+    const textColor = getThemeColor(theme, 'natural.dim', '#13131b');
+    const subtitleColor = getThemeColor(theme, 'natural.dark', '#5f5e62');
+    const bgColor = backgroundColor || getThemeColor(theme, 'natural.light', '#ffffff');
+    const handleChange = (panel) => (event, isExpanded) => {
+        setExpanded(isExpanded ? panel : false);
+        onAccordionChange === null || onAccordionChange === void 0 ? void 0 : onAccordionChange(panel, isExpanded);
+    };
+    const displayTitle = formatMessage({
+        id: title,
+        defaultMessage: title,
+    });
+    return (jsxRuntime.jsxs(FAQContainer, Object.assign({ className: className, sx: { backgroundColor: bgColor } }, { children: [jsxRuntime.jsx(FAQTitle, Object.assign({ sx: { color: textColor, maxWidth } }, { children: displayTitle })), jsxRuntime.jsx(FAQContentWrapper, Object.assign({ sx: { maxWidth } }, { children: faqs.map((faq) => (jsxRuntime.jsxs(StyledAccordion, Object.assign({ expanded: expanded === faq.id, onChange: handleChange(faq.id), disableGutters: true, elevation: 0 }, { children: [jsxRuntime.jsx(StyledAccordionSummary, Object.assign({ expandIcon: jsxRuntime.jsx(ExpandMoreIcon, { sx: { color: textColor } }), "aria-controls": `${faq.id}-content`, id: `${faq.id}-header` }, { children: jsxRuntime.jsx(FAQQuestion, Object.assign({ sx: { color: textColor } }, { children: faq.question })) })), jsxRuntime.jsx(StyledAccordionDetails, Object.assign({ sx: { color: subtitleColor } }, { children: faq.answer }))] }), faq.id))) }))] })));
+}
+
+/**
+ * Benefits Summary Styled Components
+ * MUI styled components for the Benefits Summary
+ */
+const SectionContainer = material.styled(material.Box)(({ theme }) => ({
+    padding: '50px 16px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '32px',
+    alignItems: 'center',
+    width: '100%',
+    backgroundColor: '#ffffff',
+    [theme.breakpoints.up('md')]: {
+        padding: '64px 32px',
+        gap: '40px',
+    },
+}));
+const SectionTitle = material.styled(material.Typography)(({ theme }) => ({
+    fontWeight: 700,
+    fontSize: '20px',
+    lineHeight: '28px',
+    textAlign: 'center',
+    width: '100%',
+    margin: 0,
+    [theme.breakpoints.up('md')]: {
+        fontSize: '28px',
+        lineHeight: '36px',
+    },
+}));
+const BenefitsList = material.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px',
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+        gap: '24px',
+    },
+}));
+const BenefitItemContainer = material.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    gap: '12px',
+    alignItems: 'flex-start',
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+        gap: '16px',
+    },
+}));
+const BenefitIcon = material.styled(material.Box)({
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+});
+const BenefitContent = material.styled(material.Box)({
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '6px',
+});
+const BenefitTitle = material.styled(material.Typography)(({ theme }) => ({
+    fontWeight: 600,
+    fontSize: '14px',
+    lineHeight: '20px',
+    margin: 0,
+    [theme.breakpoints.up('md')]: {
+        fontSize: '16px',
+        lineHeight: '22px',
+    },
+}));
+const BenefitDescription = material.styled(material.Typography)(({ theme }) => ({
+    fontWeight: 400,
+    fontSize: '14px',
+    lineHeight: '18px',
+    margin: 0,
+    [theme.breakpoints.up('md')]: {
+        fontSize: '15px',
+        lineHeight: '20px',
+    },
+}));
+
+/**
+ * BenefitsSummary - Displays a list of product benefits
+ *
+ * @example
+ * ```tsx
+ * const benefits = [
+ *   { id: 'benefit-1', icon: '/icons/health.svg', title: 'Death Benefit', description: '100% of Sum Assured' },
+ *   { id: 'benefit-2', icon: <HealthIcon />, title: 'TPD Coverage', description: 'Total & Permanent Disability' },
+ * ]
+ *
+ * <BenefitsSummary
+ *   benefits={benefits}
+ *   title="Benefits Summary"
+ * />
+ * ```
+ */
+function BenefitsSummary({ benefits, title = 'Benefits Summary', formatMessage = (descriptor) => descriptor.defaultMessage || descriptor.id, backgroundColor, maxWidth = '1128px', className, iconSize = 24, }) {
+    // Safely get theme, handle SSR case where it might be undefined
+    const tenantTheme = useTenantTheme();
+    const theme = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
+    // Get theme colors with SSR-safe fallbacks
+    const textColor = getThemeColor(theme, 'natural.dim', '#13131b');
+    const subtitleColor = getThemeColor(theme, 'natural.dark', '#5f5e62');
+    const bgColor = backgroundColor || getThemeColor(theme, 'natural.bright', '#ffffff');
+    const displayTitle = formatMessage({
+        id: title,
+        defaultMessage: title,
+    });
+    const renderIcon = (icon) => {
+        if (typeof icon === 'string') {
+            return (jsxRuntime.jsx("img", { src: icon, alt: "", style: {
+                    width: iconSize,
+                    height: iconSize,
+                    objectFit: 'contain',
+                } }));
+        }
+        return icon;
+    };
+    const renderDescription = (description) => {
+        const lines = description.split('\n');
+        return lines.map((line, index) => (jsxRuntime.jsxs(React__namespace.Fragment, { children: [line, index < lines.length - 1 && jsxRuntime.jsx("br", {})] }, index)));
+    };
+    return (jsxRuntime.jsxs(SectionContainer, Object.assign({ className: className, sx: { backgroundColor: bgColor } }, { children: [jsxRuntime.jsx(SectionTitle, Object.assign({ sx: { color: textColor, maxWidth } }, { children: displayTitle })), jsxRuntime.jsx(BenefitsList, Object.assign({ sx: { maxWidth } }, { children: benefits.map((benefit) => (jsxRuntime.jsxs(BenefitItemContainer, { children: [jsxRuntime.jsx(BenefitIcon, Object.assign({ sx: {
+                                width: iconSize,
+                                height: iconSize,
+                            } }, { children: renderIcon(benefit.icon) })), jsxRuntime.jsxs(BenefitContent, { children: [jsxRuntime.jsx(BenefitTitle, Object.assign({ sx: { color: textColor } }, { children: benefit.title })), jsxRuntime.jsx(BenefitDescription, Object.assign({ sx: { color: subtitleColor } }, { children: renderDescription(benefit.description) }))] })] }, benefit.id))) }))] })));
+}
+
 /**
  * Asset Management Utilities
  * Helper functions for managing tenant-specific assets
@@ -2957,6 +3208,7 @@ function getIconPath(iconName) {
 }
 
 exports.Banner = Banner;
+exports.BenefitsSummary = BenefitsSummary;
 exports.BillingToggle = BillingToggle;
 exports.Button = Button;
 exports.Card = Card;
@@ -2966,6 +3218,7 @@ exports.CheckoutProgress = CheckoutProgress;
 exports.ChildInformationForm = ChildInformationForm;
 exports.ContactDetailsForm = ContactDetailsForm;
 exports.CoverageAmountSlider = CoverageAmountSlider;
+exports.FAQAccordion = FAQAccordion;
 exports.Footer = Footer;
 exports.Header = Header$1;
 exports.HealthInformationForm = HealthInformationForm;