@hhgtech/hhg-components
Version:
Hello Health Group common components
1,001 lines (959 loc) • 62.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var core = require('@mantine/core');
var index$2 = require('./index-3424862e.js');
require('@mantine/dates');
var index$7 = require('./index-ec32050c.js');
require('./index-0a047edc.js');
var index$c = require('./index-9301f298.js');
require('./index-4d838fd2.js');
var index$1 = require('./index-d4ad3f79.js');
var index$8 = require('./index-515469d0.js');
require('./index-04864074.js');
require('./index.styles-5f6a7ac0.js');
require('./translationsContext-4698cb34.js');
var hooks = require('@mantine/hooks');
var utils$1 = require('./utils-5e3a8440.js');
require('./index-a985d53b.js');
var utils = require('./utils-b5f30c40.js');
var form = require('@mantine/form');
var styled = require('@emotion/styled');
var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var index = require('./index-2b476eb9.js');
var yup = require('yup');
var index$3 = require('./index-2558f624.js');
var index$4 = require('./index-062abf94.js');
var Visible = require('./Visible-32f28857.js');
var index$5 = require('./index-e13a0e39.js');
var ReactDOM = require('react-dom');
var miscTheme = require('./miscTheme.js');
var index$6 = require('./index-6b44ec2b.js');
var logoIcon = require('./logoIcon-87e19fb4.js');
var index$9 = require('./index-c595771c.js');
var throttle = require('lodash/throttle');
var index$a = require('./index-c88c8189.js');
var index$b = require('./index-0cd89d0b.js');
var dateFns = require('date-fns');
var flattenChildren = require('react-keyed-flatten-children');
require('@hhgtech/icons/other');
require('@mantine/carousel');
require('./shared-201fc49c.js');
require('classnames');
require('uuid');
require('./useUniqueId-88b26792.js');
require('./constantsSite.js');
require('./Locale-eb0da538.js');
require('@emotion/react');
require('@hhgtech/icons/core');
require('date-fns/locale');
require('./constantsDomainLocales.js');
require('./constantsRiskScreener.js');
require('./constantsIsProduction.js');
require('dayjs');
require('@mantine/notifications');
require('./WhatsApp-6c6a3aee.js');
require('./Spinner-61b72591.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
var throttle__default = /*#__PURE__*/_interopDefault(throttle);
var flattenChildren__default = /*#__PURE__*/_interopDefault(flattenChildren);
// define shared context
const OnboardingContext = React.createContext({
currentStep: 0,
setCurrentStep: () => false,
setMaxStep: () => false,
nextStep: () => false,
prevStep: () => false,
isMarryBaby: false,
siteType: 'helloSites',
sharedData: {},
setSharedData: () => false,
});
const [FormProvider, useFormContext, useForm] = form.createFormContext();
const StyledDynamicForm = styled__default["default"](core.Box) `
.phone-input {
width: 100%;
margin-bottom: 32px;
${utils$1.MediaQueries.mbDown} {
margin-bottom: 16px;
}
.PhoneInput {
margin-bottom: 16px;
}
.PhoneInputCountry {
border-radius: 4px 0 0 4px;
}
.PhoneInputInput {
border-radius: 0 4px 4px 0;
}
}
`;
const DynamicForm = (_a) => {
var { inputOrder = ['phone'], withSimilac = false, customTerms = '', formContext } = _a, rest = tslib_es6.__rest(_a, ["inputOrder", "withSimilac", "customTerms", "formContext"]);
const { t } = index.useTranslations();
const form = formContext || useFormContext();
const Phone = (_a) => {
var { label, name = 'phone' } = _a, phoneProps = tslib_es6.__rest(_a, ["label", "name"]);
return (React__default["default"].createElement(core.Input.Wrapper, { className: withSimilac ? 'input-control' : 'phone-input', withAsterisk: true, label: label || withSimilac ? (React__default["default"].createElement(index$1.Text, { size: "s4", weight: "semiBold", as: "span" }, label || t('onboarding.similac.input.phone'))) : undefined },
React__default["default"].createElement(index$2.Phone, Object.assign({ defaultCountry: utils.MAPPED_LOCALE[process.env.UNIFY_LOCALE] || 'VN' }, form.getInputProps(name), phoneProps)),
React__default["default"].createElement(core.Input.Error, { size: "md" }, form.errors.phone)));
};
const FullName = (_a) => {
var { label, name = 'name' } = _a, rest = tslib_es6.__rest(_a, ["label", "name"]);
return (React__default["default"].createElement(index$2.Input, Object.assign({ label: React__default["default"].createElement(index$1.Text, { size: "s4", weight: "semiBold", as: "span" }, label || t('onboarding.formEmail.yourName')), withAsterisk: true }, form.getInputProps(name), rest)));
};
const Email = (_a) => {
var { label, name = 'email' } = _a, rest = tslib_es6.__rest(_a, ["label", "name"]);
return (React__default["default"].createElement(index$2.Input, Object.assign({ label: React__default["default"].createElement(index$1.Text, { size: "s4", weight: "semiBold", as: "span" }, label || t('onboarding.formEmail.yourEmail')), withAsterisk: true }, form.getInputProps(name), rest)));
};
const Dob = (_a) => {
var { label, name = 'dob' } = _a, rest = tslib_es6.__rest(_a, ["label", "name"]);
return (React__default["default"].createElement(index$3.DatePicker, Object.assign({ label: React__default["default"].createElement(index$1.Text, { size: "s4", weight: "semiBold", as: "span" }, label || t('onboarding.formEmail.yourBirthday')), placeholder: "DD/MM/YYYY" }, form.getInputProps(name), rest)));
};
const Gender = (_a) => {
var { label, name = 'gender' } = _a, radioProps = tslib_es6.__rest(_a, ["label", "name"]);
return (React__default["default"].createElement(index$2.Radio.Group, Object.assign({ className: "radio-group", label: React__default["default"].createElement(index$1.Text, { size: "s4", weight: "semiBold", as: "span" }, label || t('tools.selectGender')) }, form.getInputProps(name), radioProps),
React__default["default"].createElement(index$2.Radio, { value: "0", label: t('onboarding.formEmail.genderMale') }),
React__default["default"].createElement(index$2.Radio, { value: "1", label: t('onboarding.formEmail.genderFemale') })));
};
const Otp = ({ name = 'otp' }) => (React__default["default"].createElement("div", { className: "otp-input" },
React__default["default"].createElement(index$2.OTP, Object.assign({ enterKeyHint: undefined, nonce: undefined }, form.getInputProps(name))),
React__default["default"].createElement(core.Input.Error, null, form.errors.otp)));
const Password = ({ label, name = 'password' }) => (React__default["default"].createElement(index$2.Input.Password, Object.assign({ label: React__default["default"].createElement(index$1.Text, { size: "s4", weight: "semiBold", as: "span" }, label || t('onboarding.updatePassword.password')), withAsterisk: true, rightSection: React__default["default"].createElement(Visible.Visible, null) }, form.getInputProps(name))));
const Term = ({ name = 'term', className = '' }) => customTerms ? (React__default["default"].createElement("div", { style: { marginBottom: 16 }, className: className },
React__default["default"].createElement(index$2.Checkbox, Object.assign({ label: React__default["default"].createElement(index$1.Text, { size: "p4", as: "span", sx: {
a: {
color: '#2d87f3',
fontWeight: 'bold',
letterSpacing: 0,
},
} }, customTerms) }, form.getInputProps(name, { type: 'checkbox' }), { error: null })),
React__default["default"].createElement(core.Input.Error, { size: "md" }, form.getInputProps('term', { type: 'checkbox' }).error))) : null;
const Address = (_a) => {
var { label, className = '', name = 'address' } = _a, rest = tslib_es6.__rest(_a, ["label", "className", "name"]);
return (React__default["default"].createElement(index$4.AddressInput, Object.assign({ className: `${className} input-control`, label: React__default["default"].createElement(index$1.Text, { size: "s4", weight: "semiBold", as: "span" }, label || t('onboarding.similac.input.address')) }, form.getInputProps(name), rest)));
};
const ConfirmPassword = ({ label, name = 'confirmPassword', }) => (React__default["default"].createElement(index$2.Input.Password, Object.assign({ label: React__default["default"].createElement(index$1.Text, { size: "s4", weight: "semiBold", as: "span" }, label || t('onboarding.updatePassword.confirmPassword')), withAsterisk: true, rightSection: React__default["default"].createElement(Visible.Visible, null) }, form.getInputProps(name))));
const elements = {
phone: Phone,
full_name: FullName,
email: Email,
dob: Dob,
gender: Gender,
otp: Otp,
password: Password,
confirm_password: ConfirmPassword,
term: Term,
address: Address,
};
const content = inputOrder.map((part) => {
var _a;
const curProps = typeof part === 'string' ? { inputType: part } : part;
return (_a = elements[curProps.inputType]) === null || _a === void 0 ? void 0 : _a.call(elements, curProps);
});
return React__default["default"].createElement(StyledDynamicForm, Object.assign({}, rest), content);
};
const frisoOnboardingSchema = (t) => yup__namespace.object().shape({
phone: yup__namespace.string().required(t('onboarding.updatePhone.error')).default(''),
name: yup__namespace.string().required(t('onboarding.errorMessage.requiredName')),
email: yup__namespace
.string()
.required(t('onboarding.errorMessage.requiredEmail'))
.email(t('onboarding.errorMessage.invalidEmail'))
.default(''),
address: yup__namespace.mixed().required(t('onboarding.similac.address.error')),
term: yup__namespace.bool().oneOf([true], t('validation.error.requiredField')),
});
const FrisoOnboardingForm = (_a, ref) => {
var { inputOrder, onSubmit: _onSubmit, validateSchema, defaultValues, isActive, customTerms, customFormTexts } = _a, rest = tslib_es6.__rest(_a, ["inputOrder", "onSubmit", "validateSchema", "defaultValues", "isActive", "customTerms", "customFormTexts"]);
const { nextStep, setSharedData, sharedData } = React.useContext(OnboardingContext);
const { t } = index.useTranslations();
const form$1 = useForm({
initialValues: {
term: false,
phone: (sharedData === null || sharedData === void 0 ? void 0 : sharedData.phone) || (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.phone) || '',
email: (sharedData === null || sharedData === void 0 ? void 0 : sharedData.email) || (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.email) || '',
name: (sharedData === null || sharedData === void 0 ? void 0 : sharedData.name) || (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.name) || '',
},
validate: validateSchema || form.yupResolver(frisoOnboardingSchema(t)),
});
const onSubmit = (values) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
try {
yield (_onSubmit === null || _onSubmit === void 0 ? void 0 : _onSubmit(values));
setSharedData((d) => (Object.assign(Object.assign({}, d), { phone: values.phone, email: values.email, name: values.name })));
nextStep();
}
catch (err) {
console.error(err);
}
});
const onError = (fieldErrors) => {
console.log(fieldErrors);
};
const handleSubmitForm = () => { var _a; return (_a = form$1.onSubmit(onSubmit, onError)) === null || _a === void 0 ? void 0 : _a(); };
React.useImperativeHandle(ref, () => ({
submitForm: handleSubmitForm,
}));
return (React__default["default"].createElement(core.Box, Object.assign({ "data-active": isActive }, rest),
React__default["default"].createElement(core.Box, { sx: (theme) => ({
display: 'flex',
flexDirection: 'column',
gap: '16px',
[theme.fn.largerThan('md')]: {
gap: '24px',
},
}) },
React__default["default"].createElement(core.Box, { sx: { textAlign: 'center' } },
React__default["default"].createElement(index$5.Heading, { tag: "h4", as: "h2" }, customFormTexts === null || customFormTexts === void 0 ? void 0 : customFormTexts.heading),
React__default["default"].createElement(index$1.Text, { size: "p3" }, customFormTexts === null || customFormTexts === void 0 ? void 0 : customFormTexts.description)),
React__default["default"].createElement(FormProvider, { form: form$1 },
React__default["default"].createElement("form", { className: "friso-form", style: {
width: '100%',
}, onSubmit: form$1.onSubmit(onSubmit, onError) },
React__default["default"].createElement(core.Box, { sx: {
'.friso-form': {
display: 'flex',
flexWrap: 'wrap',
gap: '8px',
'.input-control': {
width: '100%',
marginBottom: 0,
},
'.phone-input': {
marginBottom: '0 !important',
'.PhoneInput': {
marginBottom: '0 !important',
},
},
},
} },
React__default["default"].createElement(DynamicForm, { inputOrder: inputOrder, customTerms: customTerms, className: "friso-form" })))))));
};
var FrisoOnboardingForm$1 = React.forwardRef(FrisoOnboardingForm);
const StyledOnboardingModal = styled__default["default"].div `
position: fixed;
inset: 0;
z-index: 1000;
background: white;
overflow-y: auto;
`;
const StyledContainer = styled__default["default"].div `
height: 100%;
${utils$1.MediaQueries.lgPcUp} {
display: table;
width: 100%;
height: calc(100% - 25px);
}
`;
const StyledContent = styled__default["default"].div `
padding: 16px;
${utils$1.MediaQueries.mbUp} {
padding: 48px 24px 24px;
}
&[data-similac='true'][data-has-banner='true'] {
${utils$1.MediaQueries.mbDown} {
background: white;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
margin-top: -1rem;
}
}
`;
const StyledBannerCol = styled__default["default"].div `
width: 640px;
padding: 16px 16px 0 16px;
display: none;
${utils$1.MediaQueries.mbUp} {
width: 640px;
display: table-cell;
}
`;
const StyledBannerInner = styled__default["default"].div `
background-color: ${miscTheme.theme.colors.primary50};
border-radius: 12px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
&[data-is-marry-baby='true'] {
background-color: ${miscTheme.theme.mbColors.tonePink};
}
`;
const StyledIntro = styled__default["default"].div `
margin-top: 40px;
padding: 24px 40px;
`;
const StyledBannerImgWrapper = styled__default["default"].div `
width: 100%;
display: block;
img {
width: 100%;
height: auto;
}
&.similac {
min-width: 1px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
${utils$1.MediaQueries.mbUp} {
position: sticky;
top: 0;
height: 100vh;
}
}
`;
const OnboardingModal = (_a) => {
var { children, withSimilac, banner, withPortal } = _a, rest = tslib_es6.__rest(_a, ["children", "withSimilac", "banner", "withPortal"]);
const { isMobile } = index$6.useScreenSize();
const { isMarryBaby } = React.useContext(OnboardingContext);
const { t } = index.useTranslations();
if (withPortal && typeof window === 'undefined')
return null;
const MainContent = (React__default["default"].createElement(StyledOnboardingModal, Object.assign({}, rest),
React__default["default"].createElement(StyledContainer, null,
React__default["default"].createElement(core.Grid, { sx: {
[utils$1.MediaQueries.mbDown]: {
margin: 0,
},
'.mantine-Grid-col': {
[utils$1.MediaQueries.mbDown]: {
padding: 0,
},
},
} },
React__default["default"].createElement(core.Grid.Col, { span: (typeof banner === 'object' || withSimilac) && !isMobile ? 6 : 12, order: withSimilac ? 2 : 1, orderMd: withSimilac ? 1 : 2, sx: {
zIndex: withSimilac ? 99 : undefined,
} },
React__default["default"].createElement(StyledContent, { "data-similac": withSimilac, "data-has-banner": typeof banner === 'object' }, children)),
banner && typeof banner === 'object' && !withSimilac && (React__default["default"].createElement(core.Grid.Col, { span: !isMobile ? 6 : 12, order: 1, orderMd: 2 },
React__default["default"].createElement(StyledBannerCol, null,
React__default["default"].createElement(StyledBannerInner, { "data-is-marry-baby": isMarryBaby },
React__default["default"].createElement(StyledIntro, null,
banner.heading && (React__default["default"].createElement(core.Title, { order: 1, mb: 24 }, banner.heading)),
banner.description && (React__default["default"].createElement(index$1.Text, { size: "p1", color: miscTheme.theme.colors.gray800 }, t('onboarding.welcomeScreen.content')))),
React__default["default"].createElement(StyledBannerImgWrapper, null, banner.imgSrc ? (React__default["default"].createElement("img", { src: banner.imgSrc, loading: "lazy" })) : banner.imgComponent ? (banner.imgComponent) : null))))),
banner &&
typeof banner === 'object' &&
withSimilac &&
(banner.imgSrc || banner.imgComponent) && (React__default["default"].createElement(core.Grid.Col, { span: 'auto', order: 1, orderMd: 2 },
React__default["default"].createElement(StyledBannerImgWrapper, { className: "similac" }, banner.imgSrc ? (React__default["default"].createElement("img", { src: banner.imgSrc, loading: "lazy" })) : banner.imgComponent ? (banner.imgComponent) : null)))))));
if (withPortal) {
return ReactDOM.createPortal(MainContent, utils$1.getPopupWrapperDom());
}
return MainContent;
};
const StyledFormInner$1 = styled__default["default"].div `
margin-top: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&.similac {
margin-top: 16px;
}
`;
const StyledOnboarding$1 = styled__default["default"](core.Container) `
&.hhg-comp-onboarding-container.hhg-comp-onboarding-container {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 100%;
max-width: 520px;
}
.header {
margin-bottom: 32px;
text-align: center;
${utils$1.MediaQueries.mbDown} {
margin-bottom: 16px;
}
}
.input-control {
width: 100%;
}
.radio-group,
.input-control {
margin-bottom: 16px;
}
.form {
width: 100%;
}
/* .form-error {
margin-top: 32px;
font-size: 14px;
}
.field-error {
margin-top: 10px;
font-size: 14px;
} */
.form-button {
width: 100%;
}
`;
const StyledThumb$1 = styled__default["default"].img `
margin-bottom: 38px;
`;
const Onboarding$1 = (_a) => {
var _b;
var { heading, description, children, className, imgSrc, hiddenLogo = false } = _a, rest = tslib_es6.__rest(_a, ["heading", "description", "children", "className", "imgSrc", "hiddenLogo"]);
const { isMarryBaby, siteType } = React.useContext(OnboardingContext);
return (React__default["default"].createElement(StyledOnboarding$1, Object.assign({}, rest, { className: `hhg-comp-onboarding-container ${className}`, size: "sm" }),
!hiddenLogo && (React__default["default"].createElement(logoIcon.LogoIcon, { type: isMarryBaby
? siteType
: (((_b = index$7.LOCALE_SPECS[process.env.UNIFY_LOCALE]) === null || _b === void 0 ? void 0 : _b.LOGO_TYPE) ||
'hellobacsi') })),
React__default["default"].createElement(StyledFormInner$1, { className: hiddenLogo ? 'similac' : '' },
imgSrc && React__default["default"].createElement(StyledThumb$1, { src: imgSrc, loading: "lazy" }),
(heading || description) && (React__default["default"].createElement("div", { className: "header" },
heading && React__default["default"].createElement(core.Title, { order: 3 }, heading),
description && (React__default["default"].createElement(index$1.Text, { size: "p3", mt: 8, color: miscTheme.theme.colors.gray600 }, description)))),
children)));
};
const StyledOnboardingForm$2 = styled__default["default"](Onboarding$1) `
.phone-input {
width: 100%;
margin-bottom: 32px;
${utils$1.MediaQueries.mbDown} {
margin-bottom: 16px;
}
.PhoneInput {
margin-bottom: 16px;
}
.PhoneInputCountry {
border-radius: 4px 0 0 4px;
}
.PhoneInputInput {
border-radius: 0 4px 4px 0;
}
}
&:not([data-active='true']) {
display: none !important;
}
`;
const onboardingSchema = (t) => yup__namespace.object().shape({
phone: yup__namespace.string().required(t('onboarding.updatePhone.error')).default(''),
});
const DefaultOnboardingForm = ({ onClose, onSubmit: _onSubmit, canSkip = true, customFormTexts, isActive, submitProps, submitLabel, skipProps, isWhatsApp, }) => {
const { t } = index.useTranslations();
const { sharedData, setSharedData, nextStep } = React.useContext(OnboardingContext);
const form$1 = useForm({
initialValues: {
phone: (sharedData === null || sharedData === void 0 ? void 0 : sharedData.phone) || '',
},
validate: form.yupResolver(onboardingSchema(t)),
});
const onSubmit = (values) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
try {
setSharedData((p) => (Object.assign(Object.assign({}, p), { phone: values.phone })));
const error = yield (_onSubmit === null || _onSubmit === void 0 ? void 0 : _onSubmit(values.phone));
!error && nextStep();
}
catch (err) {
console.error(err);
}
});
const onError = (fieldErrors) => {
console.log(fieldErrors);
};
return (React__default["default"].createElement(StyledOnboardingForm$2, { heading: (customFormTexts === null || customFormTexts === void 0 ? void 0 : customFormTexts.heading) || t('onboarding.updatePhone.heading'), description: (customFormTexts === null || customFormTexts === void 0 ? void 0 : customFormTexts.description) ||
(isWhatsApp
? t('onboarding.updateWhatsapp.description')
: t('onboarding.updatePhone.description')), "data-active": isActive },
React__default["default"].createElement(FormProvider, { form: form$1 },
React__default["default"].createElement("form", { onSubmit: form$1.onSubmit(onSubmit, onError) },
React__default["default"].createElement(DynamicForm, { inputOrder: ['phone'] }),
React__default["default"].createElement(index$8.Button, Object.assign({ variant: "primary", fullWidth: true, size: "lg" }, (isWhatsApp && {
leftIcon: React__default["default"].createElement(index$9.Icon.WhatsApp, { size: 18, useCurrentColor: true }),
}), submitProps, { type: "submit", "data-event-category": isWhatsApp ? 'OTP' : 'Sign Up', "data-event-action": isWhatsApp
? 'Whatsapp - Fill phone and continue Click'
: 'Update Phone Number', "data-event-label": typeof window !== 'undefined' ? window.location.href : '', className: "pointer-event-child-none" }), submitLabel ||
(isWhatsApp
? t('onboarding.updateWhatsapp.submitLabel')
: t('onboarding.button.continue'))),
canSkip && (React__default["default"].createElement(index$8.Button, Object.assign({ variant: "ghost", fullWidth: true, size: "lg" }, (isWhatsApp && {
dataEventCategory: 'OTP',
dataEventAction: 'Whatsapp - Skip fill phone Click',
dataEventLabel: typeof window !== 'undefined' ? window.location.href : '',
}), skipProps, { onClick: onClose, type: "button" }), t('onboarding.button.skip')))))));
};
const StyledOtpForm = styled__default["default"](Onboarding$1) `
.otp-input {
margin-bottom: 36px;
${utils$1.MediaQueries.mbDown} {
margin-bottom: 20px;
}
.otpContainer {
margin-bottom: 16px;
}
}
.resend {
display: flex;
gap: 6px;
margin-bottom: 32px;
${utils$1.MediaQueries.mbDown} {
margin-bottom: 16px;
}
a {
text-decoration: underline;
cursor: pointer;
}
}
.phone-description {
margin-left: 2px;
margin-top: 2px;
}
.otp-description-edit-icon {
cursor: pointer;
vertical-align: bottom;
/* height: 100%; */
margin-bottom: 3px;
margin-left: 3px;
}
`;
// export const StyledOtpForm = styled(Container)`
// &.hhg-comp-onboarding-container.hhg-comp-onboarding-container {
// display: flex;
// flex-direction: column;
// align-items: center;
// height: 100%;
// width: 100%;
// text-align: center;
// max-width: 520px;
// }
// .header {
// margin-top: 70px;
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: center;
// gap: 8px;
// margin-bottom: 32px;
// ${MediaQueries.mbDown} {
// margin-bottom: 16px;
// }
// }
// .otpContainer {
// margin-bottom: 36px;
// ${MediaQueries.mbDown} {
// margin-bottom: 20px;
// }
// }
// .resend {
// display: flex;
// gap: 6px;
// margin-bottom: 32px;
// ${MediaQueries.mbDown} {
// margin-bottom: 16px;
// }
// a {
// text-decoration: underline;
// cursor: pointer;
// }
// }
// `
const otpSchema = (t) => yup__namespace.object().shape({
otp: yup__namespace
.string()
.required(t('onboarding.otpForm.error'))
.length(6, t('onboarding.otpForm.error'))
.default(''),
});
const EmailOtpForm = ({ onSubmit: _onSubmit, email: emailProp, onResendCode, otpError, onClose, loading,
// onBack,
canSkip: canSkipInit, }) => {
const { sharedData: { email: emailContext, retryEmailCount }, setSharedData, prevStep, siteType, isMarryBaby, nextStep, } = React.useContext(OnboardingContext);
const email = emailProp || emailContext || '';
const [seconds, setSeconds] = React.useState(30);
const interval = hooks.useInterval(() => setSeconds((s) => s - 1), 1000);
const [canSkip, handlers] = hooks.useCounter(0, { min: 0, max: 3 });
const preventClickRef = React.useRef(true);
const { t } = index.useTranslations();
React.useEffect(() => {
interval.start();
return interval.stop;
}, []);
React.useEffect(() => {
if (seconds === 0) {
interval.stop();
preventClickRef.current = false;
}
}, [seconds]);
const form$1 = useForm({
initialValues: {
otp: '',
},
validate: form.yupResolver(otpSchema(t)),
});
React.useEffect(() => {
if (otpError)
form$1.setFieldError('otp', otpError);
}, [otpError]);
const onSubmit = (values) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
try {
handlers.increment();
const error = yield (_onSubmit === null || _onSubmit === void 0 ? void 0 : _onSubmit(values.otp));
!error && nextStep();
}
catch (err) {
console.error(err);
}
});
const onError = (fieldErrors) => {
console.log(fieldErrors);
};
const throttleResendCode = React.useMemo(() => {
return throttle__default["default"](() => {
if (preventClickRef.current)
return;
handlers.increment();
setSeconds(30);
onResendCode === null || onResendCode === void 0 ? void 0 : onResendCode(email);
interval.start();
preventClickRef.current = true;
}, 1000, { trailing: false });
}, [email, onResendCode, interval]);
const onBack = () => {
if (retryEmailCount >= 2)
return;
setSharedData((d) => (Object.assign(Object.assign({}, d), { retryEmailCount: d.retryEmailCount + 1 })));
prevStep();
};
const outOfEdit = retryEmailCount >= 2;
return (React__default["default"].createElement(StyledOtpForm, { heading: t('onboarding.otpForm.heading'), description: React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement("span", { dangerouslySetInnerHTML: {
__html: t('onboarding.otpForm.descriptionEmail', {
email: `<b style="color:${miscTheme.theme.colors.gray800}">${utils.hiddenEmailChar(email)}</b>`,
}),
} }),
!outOfEdit && (React__default["default"].createElement("svg", { onClick: onBack, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "otp-description-edit-icon" },
React__default["default"].createElement("path", { d: "M12.7812 1.33337C12.2987 1.33337 11.8162 1.51712 11.4479 1.88546L10.6667 2.66671L13.3333 5.33337L14.1146 4.55212C14.8506 3.81612 14.8506 2.62212 14.1146 1.88546C13.7463 1.51712 13.2638 1.33337 12.7812 1.33337ZM9.66667 3.66671L2 11.3334V14H4.66667L12.3333 6.33337L9.66667 3.66671Z", fill: "#ADB3BC" })))) },
React__default["default"].createElement(FormProvider, { form: form$1 },
React__default["default"].createElement("form", { onSubmit: form$1.onSubmit(onSubmit, onError) },
React__default["default"].createElement(DynamicForm, { inputOrder: ['otp'] }),
React__default["default"].createElement("div", { className: "resend" },
React__default["default"].createElement(index$a.Text, { size: "p4", color: miscTheme.theme.colors.gray400 }, t('onboarding.otpForm.notReceiveOTP')),
React__default["default"].createElement(index$a.Text, { as: "a", size: "p4", color: isMarryBaby ? miscTheme.theme.mbColors.pink : miscTheme.theme.colors.primaryBase, onClick: throttleResendCode }, seconds === 0
? t('onboarding.otpForm.resendCode')
: t('onboarding.otpForm.resendCodeWithSeconds', { seconds }))),
React__default["default"].createElement(index$b.Button, { theme: siteType, color: "primary", isBlock: true, size: "lg", type: "submit", isLoading: loading, disabled: loading, "data-event-category": "Sign Up", "data-event-action": "Confirm Phone Number", "data-event-label": typeof window !== 'undefined' ? window.location.href : '', className: "pointer-event-child-none" }, t('onboarding.button.continue')),
canSkipInit && canSkip >= 3 && (React__default["default"].createElement(index$b.Button, { theme: siteType, color: "ghost", isBlock: true, size: "lg", onClick: onClose, type: "button" }, t('onboarding.button.skip')))))));
};
const PhoneOtpForm = ({ onSubmit: _onSubmit, phone: phoneProp, onResendCode, otpError, onClose, loading,
// onBack,
canSkip: canSkipInit, isWhatsApp, }) => {
const { sharedData: { phone: phoneContext, retryPhoneCount }, setSharedData, prevStep, siteType, isMarryBaby, nextStep, } = React.useContext(OnboardingContext);
const phone = phoneProp || phoneContext || '';
const [seconds, setSeconds] = React.useState(30);
const interval = hooks.useInterval(() => setSeconds((s) => s - 1), 1000);
const [canSkip, handlers] = hooks.useCounter(0, { min: 0, max: 3 });
const preventClickRef = React.useRef(true);
const { t } = index.useTranslations();
React.useEffect(() => {
interval.start();
return interval.stop;
}, []);
React.useEffect(() => {
if (seconds === 0) {
interval.stop();
preventClickRef.current = false;
}
}, [seconds]);
const form$1 = useForm({
initialValues: {
otp: '',
},
validate: form.yupResolver(otpSchema(t)),
});
React.useEffect(() => {
if (otpError)
form$1.setFieldError('otp', otpError);
}, [otpError]);
const onSubmit = (values) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
try {
handlers.increment();
const error = yield (_onSubmit === null || _onSubmit === void 0 ? void 0 : _onSubmit(values.otp));
!error && nextStep();
}
catch (err) {
console.error(err);
}
});
const onError = (fieldErrors) => {
console.log(fieldErrors);
};
const throttleResendCode = React.useMemo(() => {
return throttle__default["default"](() => {
if (preventClickRef.current)
return;
handlers.increment();
setSeconds(30);
onResendCode === null || onResendCode === void 0 ? void 0 : onResendCode(phone);
interval.start();
preventClickRef.current = true;
}, 1000, { trailing: false });
}, [phone, onResendCode, interval]);
const onBack = () => {
if (retryPhoneCount >= 2)
return;
setSharedData((d) => (Object.assign(Object.assign({}, d), { retryPhoneCount: d.retryPhoneCount + 1 })));
prevStep();
};
const outOfEdit = retryPhoneCount >= 2;
const phoneEleStr = `<b style="color:${miscTheme.theme.colors.gray800}">${phone
.slice(0, -3)
.replace(/./g, 'x')
.concat(phone.slice(-3))}</b>`;
return (React__default["default"].createElement(StyledOtpForm, { heading: isWhatsApp ? (React__default["default"].createElement(core.Flex, { align: 'center', justify: 'center', gap: core.rem(8) },
React__default["default"].createElement("img", { style: { width: core.rem(24) }, loading: "lazy", src: index$c.CommonGAssets.getAssetPath('whatsapp.svg'), alt: "whatsapp" }),
React__default["default"].createElement("span", null, t('onboarding.otpWhatsapps.heading')))) : (t('onboarding.otpForm.heading')), description: React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement("span", { dangerouslySetInnerHTML: {
__html: t(isWhatsApp
? 'onboarding.otpWhatsapps.description'
: 'onboarding.otpForm.description', {
phone: phoneEleStr,
}),
} }),
!outOfEdit && (React__default["default"].createElement("svg", { onClick: onBack, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "otp-description-edit-icon" },
React__default["default"].createElement("path", { d: "M12.7812 1.33337C12.2987 1.33337 11.8162 1.51712 11.4479 1.88546L10.6667 2.66671L13.3333 5.33337L14.1146 4.55212C14.8506 3.81612 14.8506 2.62212 14.1146 1.88546C13.7463 1.51712 13.2638 1.33337 12.7812 1.33337ZM9.66667 3.66671L2 11.3334V14H4.66667L12.3333 6.33337L9.66667 3.66671Z", fill: "#ADB3BC" })))) },
React__default["default"].createElement(FormProvider, { form: form$1 },
React__default["default"].createElement("form", { onSubmit: form$1.onSubmit(onSubmit, onError) },
React__default["default"].createElement(DynamicForm, { inputOrder: ['otp'] }),
React__default["default"].createElement("div", { className: "resend" },
React__default["default"].createElement(index$1.Text, { size: "p4", color: miscTheme.theme.colors.gray400 }, t('onboarding.otpForm.notReceiveOTP')),
React__default["default"].createElement(index$1.Text, { as: "a", size: "p4", color: isMarryBaby ? miscTheme.theme.mbColors.pink : miscTheme.theme.colors.primaryBase, onClick: throttleResendCode }, seconds === 0
? t('onboarding.otpForm.resendCode')
: t('onboarding.otpForm.resendCodeWithSeconds', { seconds }))),
React__default["default"].createElement(index$b.Button, { theme: siteType, color: "primary", isBlock: true, size: "lg", type: "submit", isLoading: loading, disabled: loading, "data-event-category": isWhatsApp ? 'OTP' : 'Sign Up', "data-event-action": isWhatsApp
? 'Whatsapp - OTP verified Click'
: 'Confirm Phone Number', "data-event-label": typeof window !== 'undefined' ? window.location.href : '', className: "pointer-event-child-none" }, t('onboarding.button.continue')),
canSkipInit && canSkip >= 3 && (React__default["default"].createElement(index$b.Button, { theme: siteType, color: "ghost", isBlock: true, size: "lg", onClick: onClose, type: "button" }, t('onboarding.button.skip')))))));
};
const onboardingEmailSchema = (t) => yup__namespace.object().shape({
email: yup__namespace
.string()
.required(t('onboarding.errorMessage.requiredEmail'))
.email(t('onboarding.errorMessage.invalidEmail'))
.default(''),
name: yup__namespace.string().required(t('onboarding.errorMessage.requiredName')),
});
const StyledFormInner = styled__default["default"].div `
margin-top: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&.similac {
margin-top: 16px;
}
`;
const StyledOnboarding = styled__default["default"](core.Container) `
&.hhg-comp-onboarding-container.hhg-comp-onboarding-container {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 100%;
max-width: 520px;
}
.header {
margin-bottom: 32px;
text-align: center;
${utils$1.MediaQueries.mbDown} {
margin-bottom: 16px;
}
}
.input-control {
width: 100%;
}
.radio-group,
.input-control {
margin-bottom: 16px;
}
.form {
width: 100%;
}
/* .form-error {
margin-top: 32px;
font-size: 14px;
}
.field-error {
margin-top: 10px;
font-size: 14px;
} */
.form-button {
width: 100%;
}
`;
const StyledThumb = styled__default["default"].img `
margin-bottom: 38px;
`;
const OnboardingUI = (_a) => {
var _b;
var { heading, description, children, className, imgSrc, hiddenLogo = false } = _a, rest = tslib_es6.__rest(_a, ["heading", "description", "children", "className", "imgSrc", "hiddenLogo"]);
const { isMarryBaby, siteType } = React.useContext(OnboardingContext);
return (React__default["default"].createElement(StyledOnboarding, Object.assign({}, rest, { className: `hhg-comp-onboarding-container ${className}`, size: "sm" }),
!hiddenLogo && (React__default["default"].createElement(logoIcon.LogoIcon, { type: isMarryBaby
? siteType
: (((_b = index$7.LOCALE_SPECS[process.env.UNIFY_LOCALE]) === null || _b === void 0 ? void 0 : _b.LOGO_TYPE) ||
'hellobacsi') })),
React__default["default"].createElement(StyledFormInner, { className: hiddenLogo ? 'similac' : '' },
imgSrc && React__default["default"].createElement(StyledThumb, { src: imgSrc, loading: "lazy" }),
React__default["default"].createElement("div", { className: "header" },
React__default["default"].createElement(core.Title, { order: 3 }, heading),
React__default["default"].createElement(index$1.Text, { size: "p3", mt: 8, color: miscTheme.theme.colors.gray600 }, description)),
children)));
};
const PersonalInfoForm = ({ onClose, onSubmit, canSkip, loading, errorMessage, initialData, }) => {
const { t, locale } = index.useTranslations();
const { siteType, isMarryBaby, setSharedData, nextStep } = React.useContext(OnboardingContext);
const form$1 = useForm({
validate: form.yupResolver(onboardingEmailSchema(t)),
});
const onError = (fieldErrors) => {
console.log({ fieldErrors });
};
React.useEffect(() => {
form$1.setValues(Object.assign(Object.assign({ gender: '0' }, initialData), ((initialData === null || initialData === void 0 ? void 0 : initialData.birthday) && {
birthday: new Date(initialData.birthday),
})));
}, [initialData]);
React.useEffect(() => {
if (errorMessage)
form$1.setFieldError('email', errorMessage);
}, [errorMessage]);
return (React__default["default"].createElement(OnboardingUI, { heading: t('onboarding.formEmail.heading'), description: t('onboarding.formEmail.description', {
site: isMarryBaby
? 'Marry Baby'
: index$7.LOCALE_SPECS[locale].SITE_NAME_FORMATTED,
}) },
React__default["default"].createElement(FormProvider, { form: form$1 },
React__default["default"].createElement("form", { className: "form", onSubmit: form$1.onSubmit((values) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
setSharedData((d) => (Object.assign(Object.assign({}, d), values)));
const error = yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(Object.assign(Object.assign({}, values), { birthday: values.birthday && dateFns.format(values.birthday, 'yyyy-MM-dd') })));
!error && nextStep();
}), onError) },
React__default["default"].createElement(DynamicForm, { inputOrder: ['full_name', 'email', 'dob', 'gender'] }),
React__default["default"].createElement(index$b.Button, { color: "primary", isBlock: true, size: "lg", type: "submit", theme: siteType, isLoading: loading, disabled: loading }, t('onboarding.button.continue')),
canSkip && (React__default["default"].createElement(index$b.Button, { theme: siteType, color: "ghost", isBlock: true, size: "lg", onClick: onClose, type: "button" }, t('onboarding.button.skip')))))));
};
const OnboardingProvider = ({ children, siteType, setSharedData: _setSharedData, }) => {
const [currentStep, setCurrentStep] = React.useState(0);
const [maxStep, setMaxStep] = React.useState(0);
const [sharedData, setSharedData] = React.useState({});
const nextStep = () => currentStep + 1 <= maxStep && setCurrentStep(currentStep + 1);
const prevStep = () => currentStep - 1 >= 0 && setCurrentStep(currentStep - 1);
React.useEffect(() => {
_setSharedData === null || _setSharedData === void 0 ? void 0 : _setSharedData(sharedData);
}, [sharedData, _setSharedData]);
return (React__default["default"].createElement(OnboardingContext.Provider, { value: {
currentStep,
setCurrentStep,
setMaxStep,
nextStep,
prevStep,
siteType,
isMarryBaby: siteType === 'marryBaby',
sharedData,
setSharedData,
} }, children));
};
const ResultScreen = (_a) => {
var { onClose } = _a, rest = tslib_es6.__rest(_a, ["onClose"]);
const { t } = index.useTranslations();
const { siteType } = React.useContext(OnboardingContext);
return (React__default["default"].createElement(OnboardingUI, Object.assign({}, rest),
React__default["default"].createElement(index$b.Button, { theme: siteType, size: "lg", onClick: onClose, className: "form-button" }, t('onboarding.button.continue'))));
};
const StyledOnboardingForm$1 = styled__default["default"](Onboarding$1) `
.phone-input {
width: 100%;
margin-bottom: 32px;
${utils$1.MediaQueries.mbDown} {
margin-bottom: 16px;
}
.PhoneInput {
margin-bottom: 16px;
}
.PhoneInputCountry {
border-radius: 4px 0 0 4px;
}
.PhoneInputInput {
border-radius: 0 4px 4px 0;
}
}
&:not([data-active='true']) {
display: none !important;
}
`;
const similacOnboardingSchema = (t, optionalTerm) => yup__namespace.object().shape({
phone: yup__namespace.string().required(t('onboarding.updatePhone.error')).default(''),
name: yup__namespace.string().required(t('onboarding.errorMessage.requiredName')),
email: yup__namespace
.string()
.required(t('onboarding.errorMessage.requiredEmail'))
.email(t('onboarding.errorMessage.invalidEmail'))
.default(''),
address: yup__namespace.mixed().required(t('onboarding.similac.address.error')),
term: optionalTerm
? yup__namespace.bool()
: yup__namespace.bool().oneOf([true], t('validation.error.requiredField')),
});
const SimilacOnboardingForm = (_a) => {
var { onClose, onSubmit: _onSubmit, canSkip = true, customFormTexts, customTerms, defaultValues, isActive } = _a, rest = tslib_es6.__rest(_a, ["onClose", "onSubmit", "canSkip", "customFormTexts", "customTerms", "defaultValues", "isActive"]);
const { t } = index.useTranslations();
const { nextStep, setSharedData, sharedData } = React.useContext(OnboardingContext);
const { isMobile } = index$6.useScreenSize();
const form$1 = useForm({
initialValues: {
term: false,
phone: (sharedData === null || sharedData === void 0 ? void 0 : sharedData.phone) || (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.phone) || '',
email: (sharedData === null || sharedData === void 0 ? void 0 : sharedData.email) || (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.email) || '',
name: (sharedData === null || sharedData === void 0 ? void 0 : sharedData.name) || (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.name) || '',
},
validate: form.yupResolver(similacOnboardingSchema(t, !customTerms)),
});
const onSubmit = (values) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
try {
yield (_onSubmit === null || _onSubmit === void 0 ? void 0 : _onSubmit(values));
setSharedData((d) => (Object.assign(Object.assign({}, d), { phone: values.phone, email: values.email, name: values.name })));
nextStep();
}
catch (err) {
console.error(err);
}
});
const onError = (fieldErrors) => {
console.log(fieldErrors);
};
const inputOrder = (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.email)
? ['full_name', 'phone', 'address', 'term']
: ['full_name', 'email', 'phone', 'address', 'term'];
return (React__default["default"].createElement(StyledOnboardingForm$1, Object.assign({ heading: (customFormTexts === null || customFormTexts === void 0 ? void 0 : customFormTexts.heading) || t('onboarding.updatePhone.heading'), description: (customFormTexts === null || customFormTexts === void 0 ? void 0 : customFormTexts.description) || t('onboarding.updatePhone.description'), hiddenLogo: isMobile, "data-active": isActive }, rest),
React__default["default"].createElement(FormProvider, { form: form$1 },
React__default["default"].createElement("form", { style: {
width: '100%',
}, onSubmit: form$1.onSubmit(onSubmit, onError) },
React__default["default"].createElement(DynamicForm, { inputOrder: inputOrder, withSimilac: true, customTerms: customTerms }),
React__default["default"].createElement(index$8.Button, { fullWidth: true, size: "lg", type: "submit", "data-event-category": "Sign Up", "data-event-action": "Update Phone Number", "data-event-label": typeof window !== 'undefined' ? window.location.href : '', className: "pointer-event-child-none"