@hhgtech/hhg-components 1.24.20 → 1.24.22

package/build/index.styled-06c1ebf7.js

@@ -0,0 +1,166 @@
+"use strict";var e=require("./tslib.es6-cb690bef.js"),t=require("react"),r=require("@mantine/form");require("./index.styled-f24c36f7.js");var n=require("./index-0a61907b.js");require("./gAssets.js"),require("./index.styled-9bb1672d.js");var a=require("./index-0bac5baf.js"),i=require("./utils-f8ce6afc.js"),o=require("./theme-60cc7a9c.js"),s=require("@mantine/core");require("./index.styled-4c059ef2.js");var d=require("./useTranslations-5f6083e4.js");require("./index-ad2d49c8.js"),require("lodash/debounce"),require("./isProduction-f84dd7e2.js");var l=require("./index-e27e8676.js"),u=require("./Onboarding-b479219e.js"),p=require("./index-7f8104ae.js");require("dayjs"),require("./screenSizeContext-ca33c753.js");var c=require("styled-components");require("./index.styled-4eecded5.js");var m=require("./index-5f535a5f.js");require("./index-af0d8341.js"),require("@mantine/hooks");var g=require("./Visible-767ce2ab.js"),b=require("yup");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function h(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("./translationsContext-66459815.js"),require("string-format");var x=f(t),E=f(c),L=h(b);const y=t.createContext({}),[O,w,C]=r.createFormContext(),P=E.default.div`
+  margin-top: 70px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`,v=E.default(s.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;
+    ${i.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%;
+  }
+`,j=E.default.img`
+  margin-bottom: 38px;
+`,q=r=>{var n,{heading:i,description:d,children:u,className:c,imgSrc:m}=r,g=e.__rest(r,["heading","description","children","className","imgSrc"]);const{isMarryBaby:b,siteType:f}=t.useContext(y);return x.default.createElement(v,Object.assign({},g,{className:`hhg-comp-onboarding-container ${c}`,size:"sm"}),x.default.createElement(a.LogoIcon,{type:b?f:(null===(n=l.LOCALE_SPECS[process.env.UNIFY_LOCALE])||void 0===n?void 0:n.LOGO_TYPE)||"hellobacsi"}),x.default.createElement(P,null,m&&x.default.createElement(j,{src:m,loading:"lazy"}),x.default.createElement("div",{className:"header"},x.default.createElement(s.Title,{order:3},i),x.default.createElement(p.Text,{size:"p3",mt:8,color:o.theme.colors.gray600},d)),u))},A=E.default.div`
+  .phone-input {
+    width: 100%;
+    margin-bottom: 32px;
+    ${i.MediaQueries.mbDown} {
+      margin-bottom: 16px;
+    }
+    .PhoneInput {
+      margin-bottom: 16px;
+    }
+    .PhoneInputCountry {
+      border-radius: 4px 0 0 4px;
+    }
+    .PhoneInputInput {
+      border-radius: 0 4px 4px 0;
+    }
+  }
+`,M={[u.LOCALE.Vietnam]:"VN",[u.LOCALE.Cambodia]:"KH",[u.LOCALE.Indonesia]:"ID",[u.LOCALE.Malaysia]:"MY",[u.LOCALE.PhilippinesEnglish]:"PH",[u.LOCALE.PhilippinesTagalog]:"PH",[u.LOCALE.Taiwan]:"TW",[u.LOCALE.Thailand]:"TH",[u.LOCALE.Myanmar]:"MM"},I=({inputOrder:e=["phone"]})=>{const{t:t}=d.useTranslations(),r=w(),n=x.default.createElement("div",{className:"phone-input"},x.default.createElement(p.Phone,Object.assign({defaultCountry:M[process.env.UNIFY_LOCALE]||"VN"},r.getInputProps("phone"))),x.default.createElement(s.Input.Error,null,r.errors.phone)),a=x.default.createElement(m.Input,Object.assign({label:x.default.createElement(p.Text,{size:"s4",weight:"semiBold"},t("onboarding.formEmail.yourName")),withAsterisk:!0},r.getInputProps("name"))),i=x.default.createElement(m.Input,Object.assign({label:x.default.createElement(p.Text,{size:"s4",weight:"semiBold",span:!0},t("onboarding.formEmail.yourEmail")),withAsterisk:!0},r.getInputProps("email"))),o=x.default.createElement(p.DatePicker,Object.assign({label:x.default.createElement(p.Text,{size:"s4",weight:"semiBold",span:!0},t("onboarding.formEmail.yourBirthday")),placeholder:"DD/MM/YYYY"},r.getInputProps("dob"))),l=x.default.createElement(p.Radio.Group,Object.assign({className:"radio-group",label:x.default.createElement(p.Text,{size:"s4",weight:"semiBold",span:!0},t("bmi.selectGender"))},r.getInputProps("gender")),x.default.createElement(p.Radio,{value:"0",label:t("onboarding.formEmail.genderMale")}),x.default.createElement(p.Radio,{value:"1",label:t("onboarding.formEmail.genderFemale")})),u=x.default.createElement("div",{className:"otp-input"},x.default.createElement(p.OTP,Object.assign({enterKeyHint:void 0,nonce:void 0},r.getInputProps("otp"))),x.default.createElement(s.Input.Error,null,r.errors.otp)),c=x.default.createElement(m.Input.Password,Object.assign({label:x.default.createElement(p.Text,{size:"s4",weight:"semiBold",span:!0},t("onboarding.updatePassword.password")),withAsterisk:!0,rightSection:x.default.createElement(g.Visible,null)},r.getInputProps("password"))),b=x.default.createElement(m.Input.Password,Object.assign({label:x.default.createElement(p.Text,{size:"s4",weight:"semiBold",span:!0},t("onboarding.updatePassword.confirmPassword")),withAsterisk:!0,rightSection:x.default.createElement(g.Visible,null)},r.getInputProps("confirmPassword"))),f=e.map((e=>{switch(e){case"phone":return n;case"full_name":return a;case"email":return i;case"dob":return o;case"gender":return l;case"otp":return u;case"password":return c;case"confirm_password":return b;default:return null}}));return x.default.createElement(A,null,f)},T=e=>L.object().shape({phone:L.string().required(e("onboarding.updatePhone.error")).default("")}),S=E.default(q)`
+  .phone-input {
+    width: 100%;
+    margin-bottom: 32px;
+    ${i.MediaQueries.mbDown} {
+      margin-bottom: 16px;
+    }
+    .PhoneInput {
+      margin-bottom: 16px;
+    }
+    .PhoneInputCountry {
+      border-radius: 4px 0 0 4px;
+    }
+    .PhoneInputInput {
+      border-radius: 0 4px 4px 0;
+    }
+  }
+`,k={[u.LOCALE.Vietnam]:"VN",[u.LOCALE.Cambodia]:"KH",[u.LOCALE.Indonesia]:"ID",[u.LOCALE.Malaysia]:"MY",[u.LOCALE.PhilippinesEnglish]:"PH",[u.LOCALE.PhilippinesTagalog]:"PH",[u.LOCALE.Taiwan]:"TW",[u.LOCALE.Thailand]:"TH",[u.LOCALE.Myanmar]:"MM"};u.LOCALE.Vietnam,u.LOCALE.Cambodia,u.LOCALE.Indonesia,u.LOCALE.Malaysia,u.LOCALE.PhilippinesEnglish,u.LOCALE.PhilippinesTagalog,u.LOCALE.Taiwan,u.LOCALE.Thailand,u.LOCALE.Myanmar;const N=E.default(q)`
+  .otp-input {
+    margin-bottom: 36px;
+    ${i.MediaQueries.mbDown} {
+      margin-bottom: 20px;
+    }
+    .otpContainer {
+      margin-bottom: 16px;
+    }
+  }
+  .resend {
+    display: flex;
+    gap: 6px;
+    margin-bottom: 32px;
+    ${i.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;
+  }
+`,z=E.default.div`
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: white;
+  overflow-y: auto;
+`,B=E.default.div`
+  height: 100%;
+  ${i.MediaQueries.lgPcUp} {
+    display: table;
+    width: 100%;
+    height: calc(100% - 25px);
+  }
+`,D=E.default.div`
+  padding: 48px 24px 24px;
+
+  ${i.MediaQueries.lgPcUp} {
+    display: table-cell;
+
+    &[data-has-banner='true'] {
+      width: calc(100% - 640px);
+    }
+  }
+`,_=E.default.div`
+  width: 640px;
+  padding: 16px 16px 0 16px;
+  display: none;
+
+  ${i.MediaQueries.lgPcUp} {
+    width: 640px;
+    display: table-cell;
+  }
+`,F=E.default.div`
+  background-color: ${o.theme.colors.primary50};
+  border-radius: 12px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  &[data-is-marry-baby='true'] {
+    background-color: ${o.theme.mbColors.tonePink};
+  }
+`,$=E.default.div`
+  margin-top: 40px;
+  padding: 24px 40px;
+`,V=E.default.img`
+  width: 100%;
+  display: block;
+`;exports.DynamicForm=I,exports.FormProvider=O,exports.MAPPED_LOCALE=k,exports.Onboarding=q,exports.OnboardingContext=y,exports.OnboardingForm=({onClose:t,onSubmit:a,canSkip:i=!0,customFormTexts:o})=>{const{t:s}=d.useTranslations(),l=C({initialValues:{phone:""},validate:r.yupResolver(T(s))});return x.default.createElement(S,{heading:(null==o?void 0:o.heading)||s("onboarding.updatePhone.heading"),description:(null==o?void 0:o.description)||s("onboarding.updatePhone.description")},x.default.createElement(O,{form:l},x.default.createElement("form",{onSubmit:l.onSubmit((t=>e.__awaiter(void 0,void 0,void 0,(function*(){a(t.phone)}))),(e=>{console.log(e)}))},x.default.createElement(I,{inputOrder:["phone"]}),x.default.createElement(n.Button,{color:"primary",isBlock:!0,size:"lg",type:"submit","data-event-category":"Sign Up","data-event-action":"Update Phone Number","data-event-label":"undefined"!=typeof window?window.location.href:"",className:"pointer-event-child-none"},s("onboarding.button.continue")),i&&x.default.createElement(n.Button,{color:"ghost",isBlock:!0,size:"lg",onClick:t,type:"button"},s("onboarding.button.skip")))))},exports.StyledBannerCol=_,exports.StyledBannerImg=V,exports.StyledBannerInner=F,exports.StyledContainer=B,exports.StyledContent=D,exports.StyledIntro=$,exports.StyledOnboardingModal=z,exports.StyledOtpForm=N,exports.hiddenEmailChar=(e="")=>{const t=e.indexOf("@"),r=e.substring(0,t),n=r.length>3?3:r.length;return e.replace(e.substring(n,t),e.slice(n,t).replace(/./g,"x"))},exports.onboardingEmailSchema=e=>L.object().shape({email:L.string().required(e("onboarding.errorMessage.requiredEmail")).email(e("onboarding.errorMessage.invalidEmail")).default(""),name:L.string().required(e("onboarding.errorMessage.requiredName"))}),exports.onboardingUpdatePasswordSchema=e=>L.object().shape({password:L.string().required(e("onboarding.errorMessage.requiredPassword")).min(8,e("onboarding.errorMessage.minLength",{length:8})).matches(/.*[A-Z].*/,e("onboarding.errorMessage.passWithPattern")).default(""),confirmPassword:L.string().required(e("onboarding.errorMessage.requiredConfirmPassword")).oneOf([L.ref("password"),null],e("onboarding.errorMessage.passNotMatch")).default("")}),exports.otpSchema=e=>L.object().shape({otp:L.string().required(e("onboarding.otpForm.error")).length(6,e("onboarding.otpForm.error")).default("")}),exports.useForm=C;

package/build/index.styled-09127648.js

@@ -0,0 +1,45 @@
+"use strict";var e=require("./tslib.es6-cb690bef.js"),t=require("react"),a=require("./Onboarding-b479219e.js"),n=require("./gAssets.js"),r=require("./theme-60cc7a9c.js"),l=require("./index-3c3ac2c7.js"),i=require("styled-components"),o=require("./index-af0d8341.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=s(t),d=s(i);const u=d.default.div`
+  display: inline-flex;
+  overflow: hidden;
+  width: ${e=>e.size}px;
+  height: ${e=>e.size}px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+
+  border: 1px solid #e4e8ec;
+  background-color: ${e=>e.backgroundColor||r.theme.colors.white};
+  border-radius: ${e=>e.borderRadius||"50%"};
+  & > * {
+    width: ${e=>e.iconSize}px;
+    height: ${e=>e.iconSize}px;
+  }
+`,p=d.default.div`
+  display: inline-block;
+  height: 108px;
+  background-color: ${e=>e.theme.colors.white};
+  border-radius: 60px;
+  cursor: pointer;
+  &.selected-week-pill {
+    background-color: ${e=>e.theme.colors.pink100};
+  }
+
+  & > div:first-child {
+    margin: 4px 4px 0;
+  }
+
+  & > p {
+    margin-top: 8px;
+    text-align: center;
+  }
+
+  & > * {
+    pointer-events: none;
+  }
+`,g=[a.LOCALE.Myanmar,a.LOCALE.Taiwan],x=d.default((a=>{var{icon:i,name:o,className:s,locale:d="en-PH",dataEventCategory:x,dataEventAction:b,dataEventLabel:m,onSelect:h}=a,f=e.__rest(a,["icon","name","className","locale","dataEventCategory","dataEventAction","dataEventLabel","onSelect"]);const v=t.useMemo((()=>null==s?void 0:s.includes("selected-week-pill")),[s]);return c.default.createElement(p,Object.assign({onClick:h,className:s?"week-pill".concat(" non-pointer-event-child ",s):"week-pill non-pointer-event-child","data-event-category":x,"data-event-action":b,"data-event-label":m},f),c.default.createElement(u,{size:64,iconSize:40,backgroundColor:r.theme.colors.white},c.default.createElement("img",{src:i||n.CommonGAssets.getAssetPath("week_default.png"),alt:""})),v?c.default.createElement(l.Text,Object.assign({type:"semiBold",size:"n1",color:r.theme.colors.gray800},g.includes(d)&&{style:{fontSize:"10px"}}),o):c.default.createElement(l.Text,Object.assign({size:"n1",color:r.theme.colors.gray600},g.includes(d)&&{style:{fontSize:"10px"}}),o))}))`
+  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.08);
+`,b=d.default(o.CentralCarousel.Slide)``,m=d.default(o.CentralCarousel)`
+  .centerred-pill-wrapper {
+    padding: 16px 0;
+  }
+`;exports.StyledCarousel=m,exports.StyledPill=x,exports.StyledSlide=b;

package/build/{index.styled-9fc33324.js → index.styled-4c059ef2.js}

@@ -1,4 +1,4 @@
-"use strict";var t=require("./tslib.es6-8242200f.js"),e=require("react"),i=require("styled-components");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var p=n(e),a=n(i);const o=a.default((e=>{var{type:i}=e,n=t.__rest(e,["type"]);return p.default.createElement(i,n)}))`
+"use strict";var t=require("./tslib.es6-cb690bef.js"),e=require("react"),i=require("styled-components");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var p=n(e),a=n(i);const o=a.default((e=>{var{type:i}=e,n=t.__rest(e,["type"]);return p.default.createElement(i,n)}))`
   color: var(--text-color, ${t=>t.theme.mbColors.dark});
   font-family: Krub;
   font-weight: 600;

package/build/{index.styled-c06cdfa4.js → index.styled-4eecded5.js}

@@ -1,4 +1,4 @@
-"use strict";var e=require("@mantine/core"),t=require("./theme-0a3c7889.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const i=n(require("styled-components")).default(e.Modal)`
+"use strict";var e=require("@mantine/core"),t=require("./theme-60cc7a9c.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const i=n(require("styled-components")).default(e.Modal)`
   .mantine-Modal-modal {
     padding: 0;
   }

package/build/{index.styled-5b825227.js → index.styled-51ec177c.js}

@@ -1,4 +1,4 @@
-"use strict";var e=require("./utils-bed11293.js"),t=require("styled-components"),i=require("./theme-0a3c7889.js"),o=require("./index.styled-a497113d.js"),a=require("react"),r=require("./useTranslations-caa7e3b4.js"),l=require("./gAssets.js"),n=require("./tslib.es6-8242200f.js"),s=require("./index-0a8cef6f.js"),d=require("./cookieHelper-403dcaba.js"),p=require("slugify"),u=require("string-format"),c=require("./routing-6c30b15d.js"),m=require("dayjs"),g=require("dayjs/plugin/relativeTime");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=h(t),f=h(a),b=h(p),y=h(u),_=h(m),v=h(g);const w=x.default.div`
+"use strict";var e=require("./utils-f8ce6afc.js"),t=require("styled-components"),i=require("./theme-60cc7a9c.js"),o=require("./index.styled-f24c36f7.js"),a=require("react"),r=require("./useTranslations-5f6083e4.js"),l=require("./gAssets.js"),n=require("./tslib.es6-cb690bef.js"),s=require("./index-e27e8676.js"),d=require("./cookieHelper-338c2be0.js"),p=require("slugify"),u=require("string-format"),c=require("./routing-28dbb192.js"),m=require("dayjs"),g=require("dayjs/plugin/relativeTime");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=h(t),f=h(a),b=h(p),y=h(u),_=h(m),v=h(g);const w=x.default.div`
   position: fixed;
   left: 50%;