@saasquatch/mint-components 1.13.0-8 → 1.13.0

package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form-view.js

@@ -3,7 +3,7 @@ import { AuthButtonsContainer, AuthColumn, AuthWrapper, ErrorStyles, HostBlock,
 import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
 const style = {
-  Wrapper: { ...AuthWrapper, "max-width": "600px" },
+  Wrapper: AuthWrapper,
   Column: AuthColumn,
   HostBlock: HostBlock,
   ":host": {
@@ -31,7 +31,7 @@ sqm-portal-register {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalRegistrationFormView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
   const { states, refs, callbacks, content } = props;
   if (states.error) {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
@@ -46,7 +46,8 @@ export function PortalRegistrationFormView(props) {
         h("div", { part: "erroralert-text" }, states.registrationFormState.disabledMessage))) : (states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, props.states.error)))),
       content.formData,
-      !states.hideInputs && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: true, required: true, validationError: ({ value }) => {
+      !states.hideInputs && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading || ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.disabled) ||
+          states.emailDisabled, required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }
@@ -54,28 +55,28 @@ export function PortalRegistrationFormView(props) {
           if (!value.includes("@")) {
             return content.invalidEmailErrorMessage;
           }
-        } }, (((_c = (_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.initialData) === null || _c === void 0 ? void 0 : _c.email) ? {
-        value: (_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.email,
+        } }, (((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.initialData) === null || _d === void 0 ? void 0 : _d.email) ? {
+        value: (_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.initialData) === null || _f === void 0 ? void 0 : _f.email,
       }
-        : {}), (((_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.validationErrors) === null || _g === void 0 ? void 0 : _g.email) ? {
+        : {}), (((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.email) ? {
         class: sheet.classes.ErrorStyle,
-        helpText: ((_j = (_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.validationErrors) === null || _j === void 0 ? void 0 : _j.email) ||
+        helpText: ((_k = (_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.validationErrors) === null || _k === void 0 ? void 0 : _k.email) ||
           content.requiredFieldErrorMessage,
       }
         : [])))),
       !(states.hideInputs || states.hidePasswords) && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": !states.enablePasswordValidation, meetsRequirementsText: content.meetsRequirementsText, doesNotMeetRequirementsText: content.doesNotMeetRequirementsText, minErrorText: content.minErrorText, uppercaseErrorText: content.uppercaseErrorText, lowercaseErrorText: content.lowercaseErrorText, hasErrorText: content.hasErrorText })),
       content.passwordField,
       !(states.hideInputs || states.hidePasswords) &&
-        states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.disabled), required: true }, (((_m = (_l = states.registrationFormState) === null || _l === void 0 ? void 0 : _l.initialData) === null || _m === void 0 ? void 0 : _m.confirmPassword) ? {
-        value: (_p = (_o = states.registrationFormState) === null || _o === void 0 ? void 0 : _o.initialData) === null || _p === void 0 ? void 0 : _p.confirmPassword,
+        states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_l = states.registrationFormState) === null || _l === void 0 ? void 0 : _l.disabled), required: true }, (((_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.confirmPassword) ? {
+        value: (_q = (_p = states.registrationFormState) === null || _p === void 0 ? void 0 : _p.initialData) === null || _q === void 0 ? void 0 : _q.confirmPassword,
       }
-        : {}), (((_r = (_q = states.registrationFormState) === null || _q === void 0 ? void 0 : _q.validationErrors) === null || _r === void 0 ? void 0 : _r.confirmPassword) ? {
+        : {}), (((_s = (_r = states.registrationFormState) === null || _r === void 0 ? void 0 : _r.validationErrors) === null || _s === void 0 ? void 0 : _s.confirmPassword) ? {
         class: sheet.classes.ErrorStyle,
-        helpText: ((_t = (_s = states.registrationFormState) === null || _s === void 0 ? void 0 : _s.validationErrors) === null || _t === void 0 ? void 0 : _t.confirmPassword) || content.requiredFieldErrorMessage,
+        helpText: ((_u = (_t = states.registrationFormState) === null || _t === void 0 ? void 0 : _t.validationErrors) === null || _u === void 0 ? void 0 : _u.confirmPassword) || content.requiredFieldErrorMessage,
       }
         : [])))),
       content.terms,
       h("div", { class: sheet.classes.ButtonsContainer },
-        h("sl-button", { submit: true, loading: states.loading, disabled: (_u = states.registrationFormState) === null || _u === void 0 ? void 0 : _u.disabled, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
+        h("sl-button", { submit: true, loading: states.loading, disabled: (_v = states.registrationFormState) === null || _v === void 0 ? void 0 : _v.disabled, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
         content.secondaryButton))));
 }

package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form.js

@@ -698,7 +698,7 @@ export class PortalRegistrationForm {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalRegistrationFormViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; hidePasswords?: boolean; registrationFormState?: RegistrationFormState; enablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel?: string; networkErrorMessage?: string; passwordMismatchErrorMessage?: string; invalidEmailErrorMessage?: string; formDisabledErrorMessage?: string; requiredFieldErrorMessage?: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; hidePasswords?: boolean; registrationFormState?: RegistrationFormState; enablePasswordValidation?: boolean; loginPath: string; emailDisabled?: boolean; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel?: string; networkErrorMessage?: string; passwordMismatchErrorMessage?: string; invalidEmailErrorMessage?: string; formDisabledErrorMessage?: string; requiredFieldErrorMessage?: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-referral-table/ReferralTable.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { GenericTableView } from "../../tables/GenericTableView";
-import { AvailableNoExpiry, PendingNoUnpend, Redeemed, Denied, PendingReview, PayoutSent, PayoutFailed, PendingNewTaxForm, PendingPartnerCreation, PendingTaxReview, PendingTaxSubmission, } from "./ReferralTableRewardsCell.stories";
+import { AvailableNoExpiry, PendingNoUnpend, Redeemed, Denied, PendingReview, PayoutSent, PayoutFailed, PendingNewTaxForm, PendingPartnerCreation, PendingTaxReview, PendingTaxSubmission, PayoutCancelled, } from "./ReferralTableRewardsCell.stories";
 import { DateCell, PendingReview as PendingReviewStatus, Pending as PendingStatus, Denied as DeniedStatus, Converted as ConvertedStatus, InProgress, } from "./ReferralTableCell.stories";
 import scenario from "./referral-table.feature";
 export default {
@@ -132,6 +132,12 @@ const simpleUserTableProps = {
         h(DateCell, null),
         h(PayoutFailed, null),
       ],
+      [
+        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
+        h(ConvertedStatus, null),
+        h(DateCell, null),
+        h(PayoutCancelled, null),
+      ],
       [
         h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
         h(ConvertedStatus, null),

package/dist/collection/components/sqm-referral-table/ReferralTableRewardsCell.stories.js

@@ -126,6 +126,9 @@ const deniedReward = {
 const payoutFailedReward = {
   statuses: ["PAYOUT_FAILED"],
 };
+const payoutCancelledReward = {
+  statuses: ["PAYOUT_CANCELLED"],
+};
 const pendingReviewReward = {
   statuses: ["PENDING_REVIEW"],
 };
@@ -205,8 +208,8 @@ function getMonths() {
 function getYears() {
   return DateTime.now().toMillis() + 200000000000;
 }
-const statusText = "{status, select, AVAILABLE {Available} PAYOUT_SENT {Payout Sent} CANCELLED {Cancelled} PAYOUT_FAILED {Payout Failed} PENDING {Pending} PENDING_REVIEW {Pending} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
-const statusLongText = "{status, select, AVAILABLE {Reward expiring on} PAYOUT_SENT {Reward approved for payout and was scheduled for payment based on your settings.} DENIED {Denied on} EXPIRED {Reward expired on} REDEEMED {Redeemed}  other {Not available} }";
+const statusText = "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
+const statusLongText = "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Reward approved for payout and was scheduled for payment based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }";
 export const PendingNoUnpend = () => {
   return (h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...pendingReward, ...nullScheduledFor }], statusText: statusText, statusLongText: statusLongText, fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}", deniedHelpText: "Contact support if you think this is a mistake." }));
 };
@@ -289,7 +292,7 @@ export const PayoutFailed = () => {
       },
     ], statusText: statusText, statusLongText: statusLongText, fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}", deniedHelpText: "Contact support if you think this is a mistake." }));
 };
-export const PayoutCancelled = () => {
+export const PayoutDenied = () => {
   return (h("sqm-referral-table-rewards-cell", { rewards: [
       {
         ...cashPayoutSentReward,
@@ -299,6 +302,16 @@ export const PayoutCancelled = () => {
       },
     ], statusText: statusText, statusLongText: statusLongText, fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}", deniedHelpText: "Contact support if you think this is a mistake." }));
 };
+export const PayoutCancelled = () => {
+  return (h("sqm-referral-table-rewards-cell", { rewards: [
+      {
+        ...cashPayoutSentReward,
+        ...payoutCancelledReward,
+        datePayoutRetried: getDays(),
+        dateGiven: null,
+      },
+    ], statusText: statusText, statusLongText: statusLongText, fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}", deniedHelpText: "Contact support if you think this is a mistake." }));
+};
 export const PendingReview = () => {
   return (h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...pendingReviewReward }], statusText: statusText, statusLongText: statusLongText, fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}", deniedHelpText: "Contact support if you think this is a mistake." }));
 };

package/dist/collection/components/sqm-rewards-table/RewardsTableCell.stories.js

@@ -261,24 +261,16 @@ export const StatusCellExpired = () => {
 const pending = {
   statuses: ["PENDING"],
 };
-// const pendingTaxReview = {
-//   statuses: ["PENDING_TAX_REVIEW"],
-// };
-// const pendingNewTaxForm = {
-//   statuses: ["PENDING_NEW_TAX_FORM"],
-// };
-// const pendingTaxSubmission = {
-//   statuses: ["PENDING_TAX_SUBMISSION"],
-// };
-// const pendingPartnerCreation = {
-//   statuses: ["PENDING_PARTNER_CREATION"],
-// };
 const payoutSent = {
   statuses: ["PAYOUT_SENT"],
 };
 const payoutFailed = {
   statuses: ["PAYOUT_FAILED"],
 };
+const payoutCancelled = {
+  statuses: ["PAYOUT_CANCELLED"],
+  dateCancelled: 1355612521321,
+};
 const us_tax = {
   pendingReasons: ["US_TAX"],
 };
@@ -340,6 +332,9 @@ export const StatusCellPayoutSent = () => {
 export const StatusCellPayoutFailed = () => {
   return (h("sqm-rewards-table-status-cell", { statusText: "Payout Failed", reward: { ...rewardsData, ...payoutFailed } }));
 };
+export const StatusCellPayoutCancelled = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Payout Cancelled", reward: { ...rewardsData, ...payoutCancelled } }));
+};
 export const StatusCellPendingWithLongText = () => {
   return (h("div", { style: { width: "200px" } },
     h("sqm-rewards-table-status-cell", { statusText: "Pending for 300,000,000 months and some change", reward: { ...rewardsData, ...pending } })));

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -85,6 +85,10 @@ import * as BankingInfoForm from "../tax-and-cash/BankingForm.stories";
 import * as InvoiceTable from "../sqm-invoice-table/InvoiceTable.stories";
 import * as InvoiceTableCells from "../sqm-invoice-table/InvoiceTableCell.stories";
 import * as UseInvoiceTableCells from "../sqm-invoice-table/UseInvoiceTable.stories";
+import * as WidgetEmailVerification from "../sqm-widget-verification/sqm-email-verification/WidgetEmailVerification.stories";
+import * as WidgetCodeVerification from "../sqm-widget-verification/sqm-code-verification/WidgetCodeVerification.stories";
+import * as PayoutButtonScroll from "../sqm-payout-button-scroll/PayoutButtonScroll.stories";
+import * as PayoutStatusAlert from "../tax-and-cash/sqm-payout-status-alert/PayoutStatusAlert.stories";
 import * as ReferralCodes from "../sqm-referral-codes/ReferralCodes.stories";
 import * as BaseRegistrationForm from "../sqm-base-registration/BaseRegistrationForm.stories";
 import * as PortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories";
@@ -183,6 +187,10 @@ const stories = [
   BaseRegistrationForm,
   PortalRegistrationForm,
   PortalGoogleRegistrationFormStories,
+  WidgetEmailVerification,
+  WidgetCodeVerification,
+  PayoutButtonScroll,
+  PayoutStatusAlert,
 ];
 /**
  * For internal documentation

package/dist/collection/components/sqm-text/sqm-text.js

@@ -28,7 +28,7 @@ const vanillaStyle = `
 
   sqm-text h4 {
     font-size: var(--sl-font-size-large);
-    font-weight: var(--sl-font-weight-semibold);
+    font-weight: var(--sl-font-weight-bold);
     color: var(--sl-color-neutral-800);
     margin: 0;
   }

package/dist/collection/components/sqm-widget-verification/keys.js

@@ -0,0 +1,4 @@
+export const SHOW_CODE_NAMESPACE = "sq:code-verification";
+export const VERIFICATION_EMAIL_NAMESPACE = "sq:verification-email";
+export const VERIFICATION_PARENT_NAMESPACE = "sq:verification-context";
+export const VERIFICATION_EVENT_KEY = "sq:code-verified";

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/WidgetCodeVerification.stories.js

@@ -0,0 +1,36 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Widget Code Verification",
+};
+const defaultProps = {
+  initialiseLoading: false,
+  email: "testemail@example.com",
+  loading: false,
+  verifyFailed: false,
+  emailResent: false,
+};
+export const Default = () => (h("sqm-code-verification", { demoData: { states: defaultProps } }));
+export const InitialLoading = () => (h("sqm-code-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      initialiseLoading: true,
+    },
+  } }));
+export const Loading = () => (h("sqm-code-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      loading: true,
+    },
+  } }));
+export const CodeResent = () => (h("sqm-code-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      emailResent: true,
+    },
+  } }));
+export const VerificationFailed = () => (h("sqm-code-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      verifyFailed: true,
+    },
+  } }));

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification-view.js

@@ -0,0 +1,128 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../../styling/JSS";
+import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+import { ErrorStyles } from "../../../global/mixins";
+import { intl } from "../../../global/global";
+const style = {
+  Wrapper: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-medium)",
+    maxWidth: "550px",
+  },
+  HeaderContainer: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  InputsContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+    position: "relative",
+    flexDirection: "column",
+  },
+  CodeInputContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+  },
+  CodeInput: {
+    maxWidth: "40px",
+    "&::part(input)": {
+      margin: "0",
+      padding: "0 var(--sl-input-spacing-small)",
+      fontSize: "var(--sl-font-size-large)",
+    },
+  },
+  CodeInputError: {
+    ...ErrorStyles,
+    maxWidth: "40px",
+    "&::part(input)": {
+      margin: "0",
+      padding: "0 var(--sl-input-spacing-small)",
+      fontSize: "var(--sl-font-size-large)",
+    },
+  },
+  ErrorText: {
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-font-size-small)",
+    margin: "0",
+  },
+  ContinueButton: {
+    width: "100%",
+    maxWidth: "100px",
+  },
+  FooterContainer: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  SkeletonOne: {
+    width: "50%",
+    height: "16px",
+  },
+  SkeletonTwo: {
+    width: "30%",
+    height: "34px",
+  },
+  SkeletonThree: {
+    width: "15%",
+    height: "24px",
+  },
+};
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+
+
+`;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function WidgetCodeVerificationView(props) {
+  const { states, refs, callbacks, text } = props;
+  const resendCodeText = intl.formatMessage({
+    id: "resendCodeText",
+    defaultMessage: text.resendCodeText,
+  }, {
+    resendCodeLink: (h("a", { href: "", style: { textDecoration: "none" }, onClick: (e) => {
+        e.preventDefault();
+        callbacks.resendEmail();
+      } }, text.resendCodeLabel)),
+  });
+  const codeResentSuccessfully = intl.formatMessage({
+    id: "codeResentSuccessfully",
+    defaultMessage: text.codeResentSuccessfullyText,
+  }, {
+    email: states.email,
+  });
+  const inputClass = states.verifyFailed
+    ? sheet.classes.CodeInputError
+    : sheet.classes.CodeInput;
+  return (h("div", { part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h("div", { class: sheet.classes.Wrapper },
+      h("div", { class: sheet.classes.HeaderContainer },
+        h(TextSpanView, { type: "p" }, intl.formatMessage({
+          id: `emailHeaderText`,
+          defaultMessage: states.verifyFailed
+            ? text.reverifyCodeHeaderText
+            : text.verifyCodeHeaderText,
+        }, { email: states.email }))),
+      states.emailResent && (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
+        h("b", null, codeResentSuccessfully))),
+      h("div", { class: sheet.classes.InputsContainer },
+        h("div", { ref: refs.codeWrapperRef, class: sheet.classes.CodeInputContainer },
+          h("sl-input", { class: inputClass, name: "code" }),
+          h("sl-input", { class: inputClass, name: "code" }),
+          h("sl-input", { class: inputClass, name: "code" }),
+          h("sl-input", { class: inputClass, name: "code" }),
+          h("sl-input", { class: inputClass, name: "code" }),
+          h("sl-input", { class: inputClass, name: "code" })),
+        states.verifyFailed && (h("p", { class: sheet.classes.ErrorText }, text.invalidCodeText)),
+        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, disabled: states.loading || states.initialiseLoading, loading: states.loading || states.initialiseLoading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
+      h("div", { class: sheet.classes.FooterContainer },
+        h(TextSpanView, { type: "p" }, resendCodeText)))));
+}