igloo-d2c-components 1.0.55-non-prod → 1.1.0
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/cjs/index.js +192 -136
- package/dist/esm/index.js +193 -137
- package/dist/types/components/BenefitsSummary/styled.d.ts +3 -3
- package/dist/types/components/BillingToggle/styled.d.ts +1 -1
- package/dist/types/components/CheckoutHeader/styled.d.ts +2 -2
- package/dist/types/components/CheckoutProgress/styled.d.ts +1 -1
- package/dist/types/components/ContactDetailsForm/styled.d.ts +2 -2
- package/dist/types/components/CoverageAmountSlider/styled.d.ts +5 -5
- package/dist/types/components/DesktopHeaderMenuBar/styled.d.ts +7 -7
- package/dist/types/components/FAQAccordion/styled.d.ts +5 -18
- package/dist/types/components/Footer/styled.d.ts +6 -6
- package/dist/types/components/Header/styled.d.ts +13 -13
- package/dist/types/components/HealthQuestionGroup/styled.d.ts +2 -2
- package/dist/types/components/InfoCallout/styled.d.ts +2 -2
- package/dist/types/components/NewHeader/styled.d.ts +3 -3
- package/dist/types/components/OptionButton/styled.d.ts +2 -2
- package/dist/types/components/PersonalInformationForm/styled.d.ts +1 -1
- package/dist/types/components/ProductCard/styled.d.ts +4 -4
- package/dist/types/components/ProductSelectionDrawer/styled.d.ts +9 -9
- package/dist/types/components/QuestionSection/styled.d.ts +2 -2
- package/dist/types/components/RecommendationsDrawer/styled.d.ts +6 -6
- package/dist/types/components/ToggleGroup/styled.d.ts +2 -2
- package/dist/types/context/TenantThemeContext.d.ts +2 -1
- package/package.json +15 -15
package/dist/cjs/index.js
CHANGED
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var React = require('react');
|
|
6
|
+
var styles = require('@mui/material/styles');
|
|
6
7
|
var material = require('@mui/material');
|
|
7
8
|
var ArrowDropDownIcon = require('@mui/icons-material/ArrowDropDown');
|
|
8
9
|
var CloseIcon = require('@mui/icons-material/Close');
|
|
9
10
|
var AppBar = require('@mui/material/AppBar');
|
|
10
|
-
var styles = require('@mui/material/styles');
|
|
11
11
|
var MenuIcon = require('@mui/icons-material/Menu');
|
|
12
12
|
var Container = require('@mui/material/Container');
|
|
13
13
|
var ArrowBackIcon = require('@mui/icons-material/ArrowBack');
|
|
@@ -663,6 +663,7 @@ const TenantThemeContext = React.createContext(undefined);
|
|
|
663
663
|
/**
|
|
664
664
|
* TenantThemeProvider
|
|
665
665
|
* Wraps components to provide tenant-specific theming
|
|
666
|
+
* Creates MUI theme from tenant configuration
|
|
666
667
|
*
|
|
667
668
|
* @example
|
|
668
669
|
* ```tsx
|
|
@@ -674,12 +675,72 @@ const TenantThemeContext = React.createContext(undefined);
|
|
|
674
675
|
* </TenantThemeProvider>
|
|
675
676
|
* ```
|
|
676
677
|
*/
|
|
677
|
-
function TenantThemeProvider({ children, tenantId, theme, }) {
|
|
678
|
+
function TenantThemeProvider({ children, tenantId, theme: tenantTheme, }) {
|
|
679
|
+
// Create MUI theme with tenant brand + defaults
|
|
680
|
+
const muiTheme = React.useMemo(() => styles.createTheme({
|
|
681
|
+
palette: {
|
|
682
|
+
// Tenant brand colors
|
|
683
|
+
primary: {
|
|
684
|
+
main: tenantTheme.palette.primary.main,
|
|
685
|
+
dark: tenantTheme.palette.primary.dark || tenantTheme.palette.primary.main,
|
|
686
|
+
light: tenantTheme.palette.primary.light || tenantTheme.palette.primary.main,
|
|
687
|
+
contrastText: '#fff',
|
|
688
|
+
},
|
|
689
|
+
secondary: {
|
|
690
|
+
main: tenantTheme.palette.secondary.main,
|
|
691
|
+
dark: tenantTheme.palette.secondary.dark || tenantTheme.palette.secondary.main,
|
|
692
|
+
light: tenantTheme.palette.secondary.light || tenantTheme.palette.secondary.main,
|
|
693
|
+
},
|
|
694
|
+
// MUI defaults for common patterns
|
|
695
|
+
background: {
|
|
696
|
+
default: '#ffffff',
|
|
697
|
+
paper: '#f9f9f9',
|
|
698
|
+
},
|
|
699
|
+
text: {
|
|
700
|
+
primary: '#13131B',
|
|
701
|
+
secondary: '#5F5E62',
|
|
702
|
+
},
|
|
703
|
+
divider: '#E1E2EB',
|
|
704
|
+
// Standard grey palette
|
|
705
|
+
grey: {
|
|
706
|
+
50: '#FAFAFA',
|
|
707
|
+
100: '#F5F5F5',
|
|
708
|
+
200: '#EEEEEE',
|
|
709
|
+
300: '#E0E0E0',
|
|
710
|
+
400: '#BDBDBD',
|
|
711
|
+
500: '#9E9E9E',
|
|
712
|
+
600: '#757575',
|
|
713
|
+
700: '#616161',
|
|
714
|
+
800: '#424242',
|
|
715
|
+
900: '#212121',
|
|
716
|
+
},
|
|
717
|
+
common: {
|
|
718
|
+
white: '#ffffff',
|
|
719
|
+
black: '#000000',
|
|
720
|
+
},
|
|
721
|
+
},
|
|
722
|
+
typography: {
|
|
723
|
+
fontFamily: tenantTheme.typography?.fontFamily || 'Roboto, sans-serif',
|
|
724
|
+
},
|
|
725
|
+
spacing: 8,
|
|
726
|
+
shape: {
|
|
727
|
+
borderRadius: 8,
|
|
728
|
+
},
|
|
729
|
+
breakpoints: {
|
|
730
|
+
values: {
|
|
731
|
+
xs: 0,
|
|
732
|
+
sm: 600,
|
|
733
|
+
md: 900,
|
|
734
|
+
lg: 1200,
|
|
735
|
+
xl: 1536,
|
|
736
|
+
},
|
|
737
|
+
},
|
|
738
|
+
}), [tenantTheme]);
|
|
678
739
|
const value = React.useMemo(() => ({
|
|
679
740
|
tenantId,
|
|
680
|
-
theme,
|
|
681
|
-
}), [tenantId,
|
|
682
|
-
return (jsxRuntime.jsx(TenantThemeContext.Provider, { value: value, children: children }));
|
|
741
|
+
theme: tenantTheme,
|
|
742
|
+
}), [tenantId, tenantTheme]);
|
|
743
|
+
return (jsxRuntime.jsx(styles.ThemeProvider, { theme: muiTheme, children: jsxRuntime.jsx(TenantThemeContext.Provider, { value: value, children: children }) }));
|
|
683
744
|
}
|
|
684
745
|
/**
|
|
685
746
|
* Hook to access tenant theme configuration
|
|
@@ -739,21 +800,20 @@ function useIsTenant(checkTenantId) {
|
|
|
739
800
|
* ```
|
|
740
801
|
*/
|
|
741
802
|
const Button = React__namespace.default.memo(function Button({ tenantColored = false, variant = 'contained', sx, color, ...props }) {
|
|
803
|
+
const theme = material.useTheme();
|
|
742
804
|
const tenantTheme = useTenantTheme();
|
|
743
|
-
const
|
|
744
|
-
const baseWordSpacingSx = { wordSpacing: '0px' };
|
|
745
|
-
const buttonSx = tenantColored && theme
|
|
805
|
+
const buttonSx = tenantColored && tenantTheme?.theme
|
|
746
806
|
? {
|
|
747
|
-
|
|
748
|
-
backgroundColor: theme.palette?.primary?.main,
|
|
749
|
-
color:
|
|
807
|
+
wordSpacing: 0,
|
|
808
|
+
backgroundColor: tenantTheme.theme.palette?.primary?.main,
|
|
809
|
+
color: theme.palette.common.white,
|
|
750
810
|
'&:hover': {
|
|
751
|
-
backgroundColor: theme.palette?.primary?.dark || theme.palette?.primary?.main,
|
|
811
|
+
backgroundColor: tenantTheme.theme.palette?.primary?.dark || tenantTheme.theme.palette?.primary?.main,
|
|
752
812
|
},
|
|
753
813
|
...sx,
|
|
754
814
|
}
|
|
755
815
|
: {
|
|
756
|
-
|
|
816
|
+
wordSpacing: 0,
|
|
757
817
|
...sx,
|
|
758
818
|
};
|
|
759
819
|
return (jsxRuntime.jsx(material.Button, { variant: variant, color: tenantColored ? undefined : color, sx: buttonSx, ...props }));
|
|
@@ -773,11 +833,11 @@ const Button = React__namespace.default.memo(function Button({ tenantColored = f
|
|
|
773
833
|
* ```
|
|
774
834
|
*/
|
|
775
835
|
const Card = React__namespace.default.memo(function Card({ title, headerAction, content, actions, tenantAccent = false, sx, children, ...props }) {
|
|
836
|
+
const theme = material.useTheme();
|
|
776
837
|
const tenantTheme = useTenantTheme();
|
|
777
|
-
const
|
|
778
|
-
const cardSx = tenantAccent && theme
|
|
838
|
+
const cardSx = tenantAccent && tenantTheme?.theme
|
|
779
839
|
? {
|
|
780
|
-
borderTop: `4px solid ${theme.palette?.primary?.main ||
|
|
840
|
+
borderTop: `4px solid ${tenantTheme.theme.palette?.primary?.main || theme.palette.primary.main}`,
|
|
781
841
|
...sx,
|
|
782
842
|
}
|
|
783
843
|
: sx;
|
|
@@ -798,18 +858,18 @@ const Card = React__namespace.default.memo(function Card({ title, headerAction,
|
|
|
798
858
|
* ```
|
|
799
859
|
*/
|
|
800
860
|
const Banner = React__namespace.default.memo(function Banner({ title, description, action, gradient = true, sx, ...props }) {
|
|
861
|
+
const theme = material.useTheme();
|
|
801
862
|
const tenantTheme = useTenantTheme();
|
|
802
|
-
const
|
|
803
|
-
const
|
|
804
|
-
const lightColor = theme?.palette?.primary?.light || primaryColor;
|
|
863
|
+
const primaryColor = tenantTheme?.theme?.palette?.primary?.main || theme.palette.primary.main;
|
|
864
|
+
const lightColor = tenantTheme?.theme?.palette?.primary?.light || theme.palette.primary.light;
|
|
805
865
|
const background = gradient
|
|
806
866
|
? `linear-gradient(135deg, ${primaryColor} 0%, ${lightColor} 100%)`
|
|
807
867
|
: primaryColor;
|
|
808
868
|
return (jsxRuntime.jsxs(material.Box, { sx: {
|
|
809
869
|
background,
|
|
810
|
-
color:
|
|
811
|
-
padding:
|
|
812
|
-
borderRadius:
|
|
870
|
+
color: theme.palette.common.white,
|
|
871
|
+
padding: theme.spacing(4),
|
|
872
|
+
borderRadius: `${theme.shape.borderRadius}px`,
|
|
813
873
|
textAlign: 'center',
|
|
814
874
|
...sx,
|
|
815
875
|
}, ...props, children: [jsxRuntime.jsx(material.Typography, { variant: "h4", component: "h2", gutterBottom: true, fontWeight: "bold", children: title }), description && (jsxRuntime.jsx(material.Typography, { variant: "body1", sx: { opacity: 0.95, mb: action ? 2 : 0 }, children: description })), action && jsxRuntime.jsx(material.Box, { sx: { mt: 2 }, children: action })] }));
|
|
@@ -2052,16 +2112,16 @@ function sanitizeUrl(url, fallback = '#') {
|
|
|
2052
2112
|
return fallback;
|
|
2053
2113
|
}
|
|
2054
2114
|
|
|
2055
|
-
const DivFooter = styles.styled('div')(() => ({
|
|
2056
|
-
backgroundColor:
|
|
2057
|
-
padding:
|
|
2058
|
-
'
|
|
2059
|
-
padding:
|
|
2115
|
+
const DivFooter = styles.styled('div')(({ theme }) => ({
|
|
2116
|
+
backgroundColor: theme.palette.grey[800],
|
|
2117
|
+
padding: theme.spacing(2.5, 2),
|
|
2118
|
+
[theme.breakpoints.up('md')]: {
|
|
2119
|
+
padding: theme.spacing(8.75, 0),
|
|
2060
2120
|
},
|
|
2061
2121
|
}));
|
|
2062
2122
|
const DivFooterConterResponsiveLayout = styles.styled('div')(({ theme }) => ({
|
|
2063
|
-
color:
|
|
2064
|
-
[theme.breakpoints.up(
|
|
2123
|
+
color: theme.palette.common.white,
|
|
2124
|
+
[theme.breakpoints.up('lg')]: {
|
|
2065
2125
|
minWidth: '1128px',
|
|
2066
2126
|
maxWidth: '1128px',
|
|
2067
2127
|
margin: '0 auto',
|
|
@@ -2071,68 +2131,64 @@ const FooterHiddenContent = styles.styled('div')(({ simplifiedLayout }) => simpl
|
|
|
2071
2131
|
const DivIglooIntro = styles.styled('div')(({ theme }) => ({
|
|
2072
2132
|
display: 'flex',
|
|
2073
2133
|
flexDirection: 'column',
|
|
2074
|
-
gap:
|
|
2075
|
-
color: theme
|
|
2076
|
-
'
|
|
2134
|
+
gap: theme.spacing(3),
|
|
2135
|
+
color: theme.palette.common.white,
|
|
2136
|
+
[theme.breakpoints.up('md')]: {
|
|
2077
2137
|
width: 320,
|
|
2078
2138
|
marginRight: 194,
|
|
2079
2139
|
},
|
|
2080
2140
|
}));
|
|
2081
|
-
const DivSocial = styles.styled('div')(() => ({
|
|
2141
|
+
const DivSocial = styles.styled('div')(({ theme }) => ({
|
|
2082
2142
|
display: 'flex',
|
|
2083
2143
|
alignItems: 'center',
|
|
2084
2144
|
margin: '0 auto',
|
|
2085
|
-
columnGap:
|
|
2145
|
+
columnGap: theme.spacing(4),
|
|
2086
2146
|
flexDirection: 'row',
|
|
2087
|
-
'
|
|
2147
|
+
[theme.breakpoints.up('md')]: {
|
|
2088
2148
|
margin: 'initial',
|
|
2089
2149
|
},
|
|
2090
2150
|
}));
|
|
2091
2151
|
const ButtonIcon = styles.styled(material.Button)(({ theme }) => ({
|
|
2092
|
-
color: theme.palette.common
|
|
2093
|
-
padding:
|
|
2094
|
-
minWidth: 'auto
|
|
2152
|
+
color: theme.palette.common.white,
|
|
2153
|
+
padding: 0,
|
|
2154
|
+
minWidth: 'auto',
|
|
2095
2155
|
}));
|
|
2096
|
-
const TypographyIntro = styles.styled(material.Typography)(() => ({
|
|
2156
|
+
const TypographyIntro = styles.styled(material.Typography)(({ theme }) => ({
|
|
2097
2157
|
textAlign: 'center',
|
|
2098
|
-
color:
|
|
2099
|
-
'
|
|
2158
|
+
color: theme.palette.common.white,
|
|
2159
|
+
[theme.breakpoints.up('md')]: {
|
|
2100
2160
|
textAlign: 'left',
|
|
2101
2161
|
},
|
|
2102
2162
|
}));
|
|
2103
|
-
const TypographyAddressFooter = styles.styled(material.Typography)(() => ({
|
|
2104
|
-
marginTop:
|
|
2163
|
+
const TypographyAddressFooter = styles.styled(material.Typography)(({ theme }) => ({
|
|
2164
|
+
marginTop: theme.spacing(2),
|
|
2105
2165
|
textAlign: 'center',
|
|
2106
|
-
color:
|
|
2107
|
-
'
|
|
2166
|
+
color: theme.palette.common.white,
|
|
2167
|
+
[theme.breakpoints.up('md')]: {
|
|
2108
2168
|
textAlign: 'left',
|
|
2109
2169
|
},
|
|
2110
2170
|
}));
|
|
2111
|
-
const DivLogos = styles.styled('div')(() => ({
|
|
2171
|
+
const DivLogos = styles.styled('div')(({ theme }) => ({
|
|
2112
2172
|
display: 'flex',
|
|
2113
2173
|
flexDirection: 'column',
|
|
2114
|
-
gap:
|
|
2174
|
+
gap: theme.spacing(2),
|
|
2115
2175
|
alignItems: 'center',
|
|
2116
|
-
marginTop:
|
|
2117
|
-
'
|
|
2176
|
+
marginTop: theme.spacing(2),
|
|
2177
|
+
[theme.breakpoints.up('md')]: {
|
|
2118
2178
|
width: '100%',
|
|
2119
2179
|
marginTop: 0,
|
|
2120
2180
|
gap: 'initial',
|
|
2121
2181
|
alignItems: 'baseline',
|
|
2122
2182
|
},
|
|
2123
2183
|
}));
|
|
2124
|
-
const DivFirstRow = styles.styled('div')(() => ({
|
|
2184
|
+
const DivFirstRow = styles.styled('div')(({ theme }) => ({
|
|
2125
2185
|
display: 'flex',
|
|
2126
2186
|
flexDirection: 'row',
|
|
2127
|
-
gap:
|
|
2187
|
+
gap: theme.spacing(2),
|
|
2128
2188
|
}));
|
|
2129
2189
|
const ButtonOjkLink = styles.styled(material.Button)(() => ({
|
|
2130
2190
|
display: 'flex',
|
|
2131
2191
|
justifyContent: 'flex-start',
|
|
2132
|
-
'@media (min-width: 769px)': {
|
|
2133
|
-
display: 'flex !important',
|
|
2134
|
-
justifyContent: 'flex-start !important ',
|
|
2135
|
-
},
|
|
2136
2192
|
}));
|
|
2137
2193
|
const ImageOjkLicense = styles.styled('img')(() => ({
|
|
2138
2194
|
alignSelf: 'flex-start',
|
|
@@ -2145,53 +2201,53 @@ const ButtonSolisoustamaLink = styles.styled(material.Button)(() => ({
|
|
|
2145
2201
|
const ImageSolisoustama = styles.styled('img')(() => ({
|
|
2146
2202
|
height: 'auto',
|
|
2147
2203
|
}));
|
|
2148
|
-
const DivLinks = styles.styled('div')(() => ({
|
|
2204
|
+
const DivLinks = styles.styled('div')(({ theme }) => ({
|
|
2149
2205
|
display: 'flex',
|
|
2150
2206
|
flex: 1,
|
|
2151
2207
|
alignItems: 'center',
|
|
2152
|
-
gap:
|
|
2208
|
+
gap: theme.spacing(2),
|
|
2153
2209
|
justifyContent: 'center',
|
|
2154
|
-
'
|
|
2210
|
+
[theme.breakpoints.up('md')]: {
|
|
2155
2211
|
flex: '1 1',
|
|
2156
2212
|
alignItems: 'normal',
|
|
2157
2213
|
},
|
|
2158
2214
|
}));
|
|
2159
|
-
const DivSection = styles.styled('div')(() => ({
|
|
2215
|
+
const DivSection = styles.styled('div')(({ theme }) => ({
|
|
2160
2216
|
display: 'flex',
|
|
2161
2217
|
flexDirection: 'column',
|
|
2162
|
-
gap:
|
|
2218
|
+
gap: theme.spacing(2),
|
|
2163
2219
|
flex: 1,
|
|
2164
2220
|
alignItems: 'flex-start',
|
|
2165
|
-
'
|
|
2166
|
-
gap:
|
|
2221
|
+
[theme.breakpoints.up('md')]: {
|
|
2222
|
+
gap: theme.spacing(3),
|
|
2167
2223
|
'&:not(:first-of-type)': {
|
|
2168
2224
|
marginLeft: 194,
|
|
2169
2225
|
},
|
|
2170
2226
|
},
|
|
2171
2227
|
}));
|
|
2172
|
-
const ButtonBottomLink = styles.styled(material.Button)(() => ({
|
|
2173
|
-
color:
|
|
2228
|
+
const ButtonBottomLink = styles.styled(material.Button)(({ theme }) => ({
|
|
2229
|
+
color: theme.palette.common.white,
|
|
2174
2230
|
textTransform: 'capitalize',
|
|
2175
|
-
'
|
|
2176
|
-
padding:
|
|
2177
|
-
textAlign: 'left
|
|
2178
|
-
minWidth: 'auto
|
|
2231
|
+
[theme.breakpoints.up('md')]: {
|
|
2232
|
+
padding: 0,
|
|
2233
|
+
textAlign: 'left',
|
|
2234
|
+
minWidth: 'auto',
|
|
2179
2235
|
},
|
|
2180
2236
|
}));
|
|
2181
|
-
const StyledDivider = styles.styled(material.Divider)(() => ({
|
|
2182
|
-
margin:
|
|
2183
|
-
borderColor: '#5F5E62
|
|
2237
|
+
const StyledDivider = styles.styled(material.Divider)(({ theme }) => ({
|
|
2238
|
+
margin: theme.spacing(3, 0, 2),
|
|
2239
|
+
borderColor: '#5F5E62',
|
|
2184
2240
|
}));
|
|
2185
2241
|
const DivBottom = styles.styled('div')(() => ({
|
|
2186
2242
|
display: 'flex',
|
|
2187
2243
|
justifyContent: 'space-between',
|
|
2188
2244
|
alignItems: 'center',
|
|
2189
2245
|
}));
|
|
2190
|
-
const DivSep = styles.styled('div')(() => ({
|
|
2246
|
+
const DivSep = styles.styled('div')(({ theme }) => ({
|
|
2191
2247
|
width: '1px',
|
|
2192
2248
|
height: 10,
|
|
2193
2249
|
borderRadius: '1px',
|
|
2194
|
-
backgroundColor:
|
|
2250
|
+
backgroundColor: theme.palette.common.white,
|
|
2195
2251
|
}));
|
|
2196
2252
|
const AnchorLink = styles.styled('a')(() => ({
|
|
2197
2253
|
color: 'inherit',
|
|
@@ -3921,28 +3977,28 @@ const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, form
|
|
|
3921
3977
|
const fieldsWrapperProps = desktopGridLayout
|
|
3922
3978
|
? {}
|
|
3923
3979
|
: { sx: { display: 'flex', flexDirection: 'column', gap: '24px' } };
|
|
3924
|
-
return (jsxRuntime.jsx(
|
|
3925
|
-
|
|
3926
|
-
|
|
3927
|
-
|
|
3928
|
-
|
|
3929
|
-
|
|
3930
|
-
|
|
3931
|
-
|
|
3980
|
+
return (jsxRuntime.jsx(material.Box, { ref: formRef, component: "form", onSubmit: onSubmit, children: jsxRuntime.jsx(Container, { sx: sx, children: jsxRuntime.jsxs(FieldsWrapper, { ...fieldsWrapperProps, children: [jsxRuntime.jsxs(material.Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsxRuntime.jsx(material.Typography, { variant: "caption", sx: {
|
|
3981
|
+
display: 'block',
|
|
3982
|
+
mt: 0.5,
|
|
3983
|
+
ml: 2,
|
|
3984
|
+
color: '#5F5E62',
|
|
3985
|
+
fontSize: '12px',
|
|
3986
|
+
wordSpacing: '0px',
|
|
3987
|
+
}, 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 ? (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 ||
|
|
3988
|
+
defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsxRuntime.jsx(material.Typography, { sx: {
|
|
3989
|
+
color: 'error.main',
|
|
3990
|
+
fontSize: '12px',
|
|
3991
|
+
mt: 0.5,
|
|
3992
|
+
ml: 4,
|
|
3993
|
+
wordSpacing: '0px',
|
|
3994
|
+
}, 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 ||
|
|
3932
3995
|
defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsxRuntime.jsx(material.Typography, { sx: {
|
|
3933
3996
|
color: 'error.main',
|
|
3934
3997
|
fontSize: '12px',
|
|
3935
3998
|
mt: 0.5,
|
|
3936
3999
|
ml: 4,
|
|
3937
4000
|
wordSpacing: '0px',
|
|
3938
|
-
}, children: consents.bank_account_confirmation.error }))] }) })) : (jsxRuntime.
|
|
3939
|
-
defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsxRuntime.jsx(material.Typography, { sx: {
|
|
3940
|
-
color: 'error.main',
|
|
3941
|
-
fontSize: '12px',
|
|
3942
|
-
mt: 0.5,
|
|
3943
|
-
ml: 4,
|
|
3944
|
-
wordSpacing: '0px',
|
|
3945
|
-
}, 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 }) }) }))] }) }));
|
|
4001
|
+
}, 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 }) }) }))] }) }) }));
|
|
3946
4002
|
};
|
|
3947
4003
|
|
|
3948
4004
|
const FormContainer$2 = styles.styled(material.Box)({
|
|
@@ -4036,12 +4092,53 @@ const ContactDetailsForm = ({ renderField, fields, isForChild = false, mailingFi
|
|
|
4036
4092
|
}
|
|
4037
4093
|
return content;
|
|
4038
4094
|
};
|
|
4039
|
-
return (jsxRuntime.jsx(
|
|
4095
|
+
return (jsxRuntime.jsx(material.Box, { ref: formRef, component: "form", onSubmit: onSubmit, children: jsxRuntime.jsx(Container, { sx: sx, children: desktopGridLayout ? (jsxRuntime.jsxs(FieldsGridContainer$1, { children: [isForChild && (jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(SectionTitle$1, { children: "Policyowner contact details" }) })), renderFieldWithHelperText(fields.phone_number, false), renderFieldWithLayout(fields.email_address, false), (mailingAddressSame?.checked && !isForChild) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.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?.checked && mailingFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.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?.checked && childContactFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.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 && (jsxRuntime.jsx(FullWidthField, { children: 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: {
|
|
4096
|
+
color: '#929094',
|
|
4097
|
+
'&.Mui-checked': {
|
|
4098
|
+
color: '#317abc',
|
|
4099
|
+
},
|
|
4100
|
+
} }), label: jsxRuntime.jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) }) })), childContactNotSame && (jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: childContactNotSame.checked, onChange: (e) => childContactNotSame.onChange(e.target.checked), name: "child_contact_not_same", sx: {
|
|
4101
|
+
color: '#929094',
|
|
4102
|
+
'&.Mui-checked': {
|
|
4103
|
+
color: '#317abc',
|
|
4104
|
+
},
|
|
4105
|
+
} }), label: jsxRuntime.jsxs(material.Box, { children: [jsxRuntime.jsx(CheckboxLabel, { children: childContactNotSame.label || defaultChildContactLabel }), jsxRuntime.jsx(material.Box, { component: "span", sx: {
|
|
4106
|
+
display: 'block',
|
|
4107
|
+
fontSize: '12px',
|
|
4108
|
+
color: '#5F5E62',
|
|
4109
|
+
mt: 0.5,
|
|
4110
|
+
}, children: childContactHelperText })] }) }) }) }))] })) : (jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [isForChild && (jsxRuntime.jsx(SectionTitle$1, { children: "Policyowner contact details" })), jsxRuntime.jsxs(material.Box, { children: [renderField(fields.phone_number), fields.phone_number.helperText && (jsxRuntime.jsx(material.Box, { component: "span", sx: {
|
|
4111
|
+
display: 'block',
|
|
4112
|
+
mt: 0.5,
|
|
4113
|
+
ml: 2,
|
|
4114
|
+
color: '#5F5E62',
|
|
4115
|
+
fontSize: '12px',
|
|
4116
|
+
}, children: fields.phone_number.helperText }))] }), renderField(fields.email_address), (mailingAddressSame?.checked && !isForChild) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [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, { component: "span", sx: {
|
|
4117
|
+
display: 'block',
|
|
4118
|
+
mt: 0.5,
|
|
4119
|
+
color: '#5F5E62',
|
|
4120
|
+
fontSize: '12px',
|
|
4121
|
+
}, 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, { component: "span", sx: {
|
|
4122
|
+
display: 'block',
|
|
4123
|
+
mt: 0.5,
|
|
4124
|
+
color: '#5F5E62',
|
|
4125
|
+
fontSize: '12px',
|
|
4126
|
+
}, children: fields.residential_address_line2.helperText }))] }), fields.country && renderField(fields.country), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), mailingAddressSame?.checked && mailingFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsxRuntime.jsx(SectionTitle$1, { children: isForChild ? 'Policyowner mailing address' : 'Mailing address' }), isForChild && mailingFields.mailing_phone_number && (jsxRuntime.jsxs(material.Box, { children: [renderField(mailingFields.mailing_phone_number), mailingFields.mailing_phone_number.helperText && (jsxRuntime.jsx(material.Box, { 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)), jsxRuntime.jsxs(material.Box, { children: [renderField(mailingFields.mailing_address_line1), mailingFields.mailing_address_line1.helperText && (jsxRuntime.jsx(material.Box, { component: "span", sx: {
|
|
4127
|
+
display: 'block',
|
|
4128
|
+
mt: 0.5,
|
|
4129
|
+
color: '#5F5E62',
|
|
4130
|
+
fontSize: '12px',
|
|
4131
|
+
}, 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, { component: "span", sx: {
|
|
4132
|
+
display: 'block',
|
|
4133
|
+
mt: 0.5,
|
|
4134
|
+
color: '#5F5E62',
|
|
4135
|
+
fontSize: '12px',
|
|
4136
|
+
}, 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?.checked && childContactFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsxRuntime.jsx(SectionTitle$1, { children: "Child's contact details" }), jsxRuntime.jsxs(material.Box, { children: [renderField(childContactFields.child_phone_number), childContactFields.child_phone_number.helperText && (jsxRuntime.jsx(material.Box, { 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), jsxRuntime.jsxs(material.Box, { children: [renderField(childContactFields.child_address_line1), childContactFields.child_address_line1.helperText && (jsxRuntime.jsx(material.Box, { component: "span", sx: { display: 'block', mt: 0.5, color: '#5F5E62', fontSize: '12px' }, children: childContactFields.child_address_line1.helperText }))] }), jsxRuntime.jsxs(material.Box, { children: [renderField(childContactFields.child_address_line2), childContactFields.child_address_line2.helperText && (jsxRuntime.jsx(material.Box, { 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 && (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: {
|
|
4040
4137
|
color: '#929094',
|
|
4041
4138
|
'&.Mui-checked': {
|
|
4042
4139
|
color: '#317abc',
|
|
4043
4140
|
},
|
|
4044
|
-
} }), label: jsxRuntime.jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) })
|
|
4141
|
+
} }), label: jsxRuntime.jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) })), childContactNotSame && (jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: childContactNotSame.checked, onChange: (e) => childContactNotSame.onChange(e.target.checked), name: "child_contact_not_same", sx: {
|
|
4045
4142
|
color: '#929094',
|
|
4046
4143
|
'&.Mui-checked': {
|
|
4047
4144
|
color: '#317abc',
|
|
@@ -4051,48 +4148,7 @@ const ContactDetailsForm = ({ renderField, fields, isForChild = false, mailingFi
|
|
|
4051
4148
|
fontSize: '12px',
|
|
4052
4149
|
color: '#5F5E62',
|
|
4053
4150
|
mt: 0.5,
|
|
4054
|
-
}, children: childContactHelperText })] }) }) })
|
|
4055
|
-
display: 'block',
|
|
4056
|
-
mt: 0.5,
|
|
4057
|
-
ml: 2,
|
|
4058
|
-
color: '#5F5E62',
|
|
4059
|
-
fontSize: '12px',
|
|
4060
|
-
}, children: fields.phone_number.helperText }))] }), renderField(fields.email_address), (mailingAddressSame?.checked && !isForChild) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [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, { component: "span", sx: {
|
|
4061
|
-
display: 'block',
|
|
4062
|
-
mt: 0.5,
|
|
4063
|
-
color: '#5F5E62',
|
|
4064
|
-
fontSize: '12px',
|
|
4065
|
-
}, 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, { component: "span", sx: {
|
|
4066
|
-
display: 'block',
|
|
4067
|
-
mt: 0.5,
|
|
4068
|
-
color: '#5F5E62',
|
|
4069
|
-
fontSize: '12px',
|
|
4070
|
-
}, children: fields.residential_address_line2.helperText }))] }), fields.country && renderField(fields.country), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), mailingAddressSame?.checked && mailingFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsxRuntime.jsx(SectionTitle$1, { children: isForChild ? 'Policyowner mailing address' : 'Mailing address' }), isForChild && mailingFields.mailing_phone_number && (jsxRuntime.jsxs(material.Box, { children: [renderField(mailingFields.mailing_phone_number), mailingFields.mailing_phone_number.helperText && (jsxRuntime.jsx(material.Box, { 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)), jsxRuntime.jsxs(material.Box, { children: [renderField(mailingFields.mailing_address_line1), mailingFields.mailing_address_line1.helperText && (jsxRuntime.jsx(material.Box, { component: "span", sx: {
|
|
4071
|
-
display: 'block',
|
|
4072
|
-
mt: 0.5,
|
|
4073
|
-
color: '#5F5E62',
|
|
4074
|
-
fontSize: '12px',
|
|
4075
|
-
}, 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, { component: "span", sx: {
|
|
4076
|
-
display: 'block',
|
|
4077
|
-
mt: 0.5,
|
|
4078
|
-
color: '#5F5E62',
|
|
4079
|
-
fontSize: '12px',
|
|
4080
|
-
}, 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?.checked && childContactFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsxRuntime.jsx(SectionTitle$1, { children: "Child's contact details" }), jsxRuntime.jsxs(material.Box, { children: [renderField(childContactFields.child_phone_number), childContactFields.child_phone_number.helperText && (jsxRuntime.jsx(material.Box, { 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), jsxRuntime.jsxs(material.Box, { children: [renderField(childContactFields.child_address_line1), childContactFields.child_address_line1.helperText && (jsxRuntime.jsx(material.Box, { component: "span", sx: { display: 'block', mt: 0.5, color: '#5F5E62', fontSize: '12px' }, children: childContactFields.child_address_line1.helperText }))] }), jsxRuntime.jsxs(material.Box, { children: [renderField(childContactFields.child_address_line2), childContactFields.child_address_line2.helperText && (jsxRuntime.jsx(material.Box, { 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 && (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: {
|
|
4081
|
-
color: '#929094',
|
|
4082
|
-
'&.Mui-checked': {
|
|
4083
|
-
color: '#317abc',
|
|
4084
|
-
},
|
|
4085
|
-
} }), label: jsxRuntime.jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) })), childContactNotSame && (jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: childContactNotSame.checked, onChange: (e) => childContactNotSame.onChange(e.target.checked), name: "child_contact_not_same", sx: {
|
|
4086
|
-
color: '#929094',
|
|
4087
|
-
'&.Mui-checked': {
|
|
4088
|
-
color: '#317abc',
|
|
4089
|
-
},
|
|
4090
|
-
} }), label: jsxRuntime.jsxs(material.Box, { children: [jsxRuntime.jsx(CheckboxLabel, { children: childContactNotSame.label || defaultChildContactLabel }), jsxRuntime.jsx(material.Box, { component: "span", sx: {
|
|
4091
|
-
display: 'block',
|
|
4092
|
-
fontSize: '12px',
|
|
4093
|
-
color: '#5F5E62',
|
|
4094
|
-
mt: 0.5,
|
|
4095
|
-
}, children: childContactHelperText })] }) }) }))] })) }));
|
|
4151
|
+
}, children: childContactHelperText })] }) }) }))] })) }) }));
|
|
4096
4152
|
};
|
|
4097
4153
|
|
|
4098
4154
|
const FormContainer$1 = styles.styled(material.Box)({
|
|
@@ -4125,7 +4181,7 @@ const MeasurementFieldsGrid = styles.styled(material.Box)({
|
|
|
4125
4181
|
|
|
4126
4182
|
const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, desktopGridLayout = false, OptionButtonComponent, }) => {
|
|
4127
4183
|
const Container = desktopGridLayout ? DesktopFormContainer$1 : FormContainer$1;
|
|
4128
|
-
return (jsxRuntime.jsx(
|
|
4184
|
+
return (jsxRuntime.jsx(material.Box, { ref: formRef, component: "form", onSubmit: onSubmit, children: jsxRuntime.jsx(Container, { sx: sx, children: jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [desktopGridLayout ? (jsxRuntime.jsxs(MeasurementFieldsGrid, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })), healthQuestions.map((question, index) => (jsxRuntime.jsx(HealthQuestionGroup, { question: question.question, questionNumber: question.questionNumber, value: question.value, onChange: question.onChange, error: question.error, labels: question.labels, OptionButtonComponent: OptionButtonComponent }, question.name || index)))] }) }) }));
|
|
4129
4185
|
};
|
|
4130
4186
|
|
|
4131
4187
|
const FormContainer = styles.styled(material.Box)({
|
|
@@ -4187,10 +4243,10 @@ const ChildInformationForm = ({ renderField, fields, consents, onSubmit, formRef
|
|
|
4187
4243
|
const renderAdditionalFields = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [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), fields.occupation && renderField(fields.occupation), fields.industry && renderField(fields.industry), fields.crediting_bank_name && renderField(fields.crediting_bank_name), fields.crediting_bank_account_number && renderField(fields.crediting_bank_account_number), fields.annual_income && renderField(fields.annual_income)] }));
|
|
4188
4244
|
// Desktop layout with 2-column grid
|
|
4189
4245
|
if (desktopGridLayout) {
|
|
4190
|
-
return (jsxRuntime.jsx(
|
|
4246
|
+
return (jsxRuntime.jsx(material.Box, { ref: formRef, component: "form", onSubmit: onSubmit, children: jsxRuntime.jsx(Container, { sx: sx, children: jsxRuntime.jsxs(FieldsGridContainer, { children: [renderHelperField(fields.full_name), fields.nric ? renderHelperField(fields.nric) : renderField(fields.date_of_birth), fields.nric && renderField(fields.date_of_birth), renderField(fields.gender), fields.salutation && renderField(fields.salutation), renderField(fields.nationality), renderAdditionalFields(), renderConsents()] }) }) }));
|
|
4191
4247
|
}
|
|
4192
4248
|
// Mobile layout - single column
|
|
4193
|
-
return (jsxRuntime.jsx(
|
|
4249
|
+
return (jsxRuntime.jsx(material.Box, { ref: formRef, component: "form", onSubmit: onSubmit, children: jsxRuntime.jsx(Container, { sx: sx, children: jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [renderHelperField(fields.full_name), fields.nric && renderHelperField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), fields.salutation && renderField(fields.salutation), renderField(fields.nationality), renderAdditionalFields(), renderConsents()] }) }) }));
|
|
4194
4250
|
};
|
|
4195
4251
|
|
|
4196
4252
|
/**
|