@saasquatch/mint-components 2.2.0 → 2.3.0-2

package/dist/cjs/{sqm-big-stat_46.cjs.entry.js → sqm-big-stat_47.cjs.entry.js}

@@ -29,9 +29,12 @@ const utilities = require('./utilities-fcdb9504.js');
 const ErrorView = require('./ErrorView-ee7b0f36.js');
 const ShadowViewAddon = require('./ShadowViewAddon-3b477e58.js');
 require('./sqm-portal-container-view-757f921b.js');
-const data = require('./data-8c8a08f6.js');
-const extractProps = require('./extractProps-e9c55ba8.js');
-const usePayoutStatus = require('./usePayoutStatus-0192fccd.js');
+const utils$1 = require('./utils-a3b3d05b.js');
+const data = require('./data-89ac73dd.js');
+const keys = require('./keys-5a2c9ed2.js');
+require('./eventKeys-7af4df4d.js');
+const useIndirectTaxForm = require('./useIndirectTaxForm-c3c1ec56.js');
+const parseStates = require('./parseStates-d1effc19.js');
 
 /**
  *
@@ -3386,12 +3389,12 @@ const PayoutStatusAlert = class {
   render() {
     const props = index_module.isDemo()
       ? useDemoPayoutStatusAlert(this)
-      : usePayoutStatus.usePayoutStatus(this);
+      : useIndirectTaxForm.usePayoutStatus(this);
     return index.h(PayoutStatusAlertView, Object.assign({}, props));
   }
 };
 function useDemoPayoutStatusAlert(props) {
-  const states = extractProps.parseStates(props.stateController);
+  const states = parseStates.parseStates(props.stateController);
   const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-payout-status-alert"
     ? { ...prev, ...states[key] }
     : { ...prev, [`${key}_stateController`]: states[key] }, {});
@@ -5775,7 +5778,7 @@ function EmptySlot$1() {
   return (index.h("slot", { name: "empty" }, index.h("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png", emptyStateHeader: "Redeem rewards", emptyStateText: "Use your points to redeem rewards once they become available" })));
 }
 function useRewardExchangeListDemo(props) {
-  const states = extractProps.parseStates(props.stateController);
+  const states = parseStates.parseStates(props.stateController);
   const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-reward-exchange-list"
     ? { ...prev, ...states[key] }
     : { ...prev, [`${key}_stateController`]: states[key] }, {});
@@ -6635,12 +6638,39 @@ function useTaskCardDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+/**
+ * Util function for getting just the props with a certain prefix.
+ * @param props Text props on stencil component
+ * @param prefix Prefix denoting which group the text prop belongs to
+ * @returns A new object with all keys with the prefix provided. The prefix is removed from each key.
+ */
+function extractProps(props, prefix) {
+  const keys = Object.keys(props).filter((k) => k.startsWith(prefix));
+  const formattedProps = keys.reduce((prev, k) => {
+    const key = k.replace(prefix, "");
+    return {
+      ...prev,
+      [key]: props[k],
+    };
+  }, {});
+  return formattedProps;
+}
+
 function getCurrentStep(user) {
   var _a, _b;
   if (!((_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.connected) || !((_b = user.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher)) {
     return "/1";
   }
-  const { requiredTaxDocumentType, currentTaxDocument, withdrawalSettings, brandedSignup, payoutsAccount, } = user.impactConnection.publisher;
+  const { requiredTaxDocumentType, currentTaxDocument, withdrawalSettings, brandedSignup, payoutsAccount, billingAddress, billingCity, billingCountryCode, billingPostalCode, billingState, phoneNumber, phoneNumberCountryCode, } = user.impactConnection.publisher;
+  const hasBillingInfo = billingAddress &&
+    billingCity &&
+    billingCountryCode &&
+    billingPostalCode &&
+    phoneNumberCountryCode &&
+    phoneNumber;
+  if (!hasBillingInfo) {
+    return "/1";
+  }
   // If they do have a required document, look at current document
   if (requiredTaxDocumentType && !currentTaxDocument) {
     // Specific to custom CASH setting,
@@ -6658,6 +6688,7 @@ function useTaxAndCash() {
   const host = index_module._();
   const user = index_module.J();
   const locale = index_module.L();
+  const [completeImpactPartner, { loading: completeLoading }] = index_module.$e(useIndirectTaxForm.COMPLETE_PARTNER);
   // State for current step of form
   const [step, setStep] = index_module.In({
     namespace: data.TAX_CONTEXT_NAMESPACE,
@@ -6749,7 +6780,7 @@ function useTaxAndCash() {
   const availableCountries = domContextHooks_module.useMemo(() => new Set(paymentOptions === null || paymentOptions === void 0 ? void 0 : paymentOptions.map((option) => option.countryCode).filter((value) => value)), [paymentOptions]);
   const _topCountries = ["CA", "GB", "US"];
   const sortedCountries = domContextHooks_module.useMemo(() => Array.from(availableCountries)
-    .map((countryCode) => data.getCountryObj({ countryCode, locale: intlLocale }))
+    .map((countryCode) => utils$1.getCountryObj({ countryCode, locale: intlLocale }))
     .sort(sortByName)
     .reduce((prev, countryObj) => {
     if (_topCountries.includes(countryObj.countryCode))
@@ -6765,16 +6796,54 @@ function useTaxAndCash() {
       setCurrenciesContext(supportedCurrencies);
   }, [supportedCurrencies]);
   domContextHooks_module.useEffect(() => {
+    var _a;
     if (errors) {
       setStep("/error");
       return;
     }
     if (!host || !user)
       return;
+    async function completeConnection(user) {
+      var _a, _b, _c, _d, _e, _f;
+      const publisher = (_a = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher;
+      const hasBillingInfo = publisher.billingAddress &&
+        publisher.billingCity &&
+        publisher.billingCountryCode &&
+        publisher.billingPostalCode &&
+        publisher.phoneNumberCountryCode &&
+        publisher.phoneNumber;
+      if (hasBillingInfo &&
+        ((_b = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _b === void 0 ? void 0 : _b.connectionStatus) === "STARTED") {
+        const vars = {
+          user: {
+            id: (_c = data$1 === null || data$1 === void 0 ? void 0 : data$1.user) === null || _c === void 0 ? void 0 : _c.id,
+            accountId: (_d = data$1 === null || data$1 === void 0 ? void 0 : data$1.user) === null || _d === void 0 ? void 0 : _d.accountId,
+          },
+          firstName: (_e = data$1 === null || data$1 === void 0 ? void 0 : data$1.user) === null || _e === void 0 ? void 0 : _e.firstName,
+          lastName: (_f = data$1 === null || data$1 === void 0 ? void 0 : data$1.user) === null || _f === void 0 ? void 0 : _f.lastName,
+          countryCode: publisher.billingCountryCode,
+          currency: publisher.currency,
+          address: publisher.billingAddress,
+          city: publisher.billingCity,
+          state: publisher.billingState,
+          postalCode: publisher.billingPostalCode,
+          phoneNumber: publisher.phoneNumber,
+          phoneNumberCountryCode: publisher.phoneNumberCountryCode,
+        };
+        await completeImpactPartner({
+          vars,
+        });
+      }
+    }
     if (data$1) {
       const user = data$1 === null || data$1 === void 0 ? void 0 : data$1.user;
       if (!user || step !== "/loading")
         return;
+      if (((_a = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) &&
+        (user === null || user === void 0 ? void 0 : user.impactConnection.connectionStatus) === "STARTED") {
+        completeConnection(user);
+        refetch();
+      }
       const currentStep = getCurrentStep(user);
       setStep(currentStep);
     }
@@ -6869,11 +6938,6 @@ const TaxAndCashMonolith = class {
      * @uiGroup Step 1 Properties
      */
     this.step1_currency = "Currency";
-    /**
-     * @uiName Currency field help text
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_currencyHelpText = "Choose your preferred payout currency";
     /**
      * Edit the property called terms and conditions text to change what's displayed for {termsAndConditionsLink}.
      * @uiName Terms and conditions checkbox
@@ -7284,12 +7348,22 @@ const TaxAndCashMonolith = class {
      * @uiGroup Step 4 Properties
      */
     this.step4_branchCodeLabel = "Branch code";
+    /**
+     * @uiName Branch name field label
+     * @uiGroup Step 4 Properties
+     */
+    this.step4_branchNameLabel = "Branch name";
     /**
      * Label text for the classification input field
      * @uiName Classification field label
      * @uiGroup Step 4 Properties
      */
     this.step4_classificationLabel = "Classification";
+    /**
+     * @uiName Classification code field label
+     * @uiGroup Step 4 Properties
+     */
+    this.step4_classificationCodeLabel = "KBE code";
     /**
      * @uiName Taxpayer ID field label
      * @uiGroup Step 4 Properties
@@ -7910,7 +7984,7 @@ const TaxAndCashMonolith = class {
   getGeneralStepTextProps(prefix) {
     const props = utils.getProps(this);
     return {
-      ...extractProps.extractProps(props, prefix),
+      ...extractProps(props, prefix),
       generalErrorTitle: props.generalErrorTitle,
       generalErrorDescription: props.generalErrorDescription,
       fieldRequiredError: props.fieldRequiredError,
@@ -7960,7 +8034,7 @@ const TaxAndCashMonolith = class {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, this.supportLink)),
           }) }));
     }
-    return index.h(data.LoadingView, null);
+    return index.h(utils$1.LoadingView, null);
   }
 };
 function useDemoTaxAndCash(props) {
@@ -7968,7 +8042,7 @@ function useDemoTaxAndCash(props) {
     namespace: data.TAX_CONTEXT_NAMESPACE,
     initialValue: "/1",
   });
-  const states = extractProps.parseStates(props.stateController);
+  const states = parseStates.parseStates(props.stateController);
   const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-tax-and-cash"
     ? { ...prev, ...states[key] }
     : { ...prev, [`${key}_stateController`]: states[key] }, {});
@@ -8244,6 +8318,365 @@ function useUserNameDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+const USER_LOOKUP = index_module.dist.gql `
+  query checkUserVerification {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        emailVerified
+        managedIdentity {
+          email
+          emailVerified
+        }
+        impactConnection {
+          connected
+        }
+      }
+    }
+  }
+`;
+function useWidgetVerification() {
+  const [showCode] = index_module.In({
+    namespace: keys.SHOW_CODE_NAMESPACE,
+    initialValue: false,
+  });
+  index_module.In({
+    namespace: keys.VERIFICATION_EMAIL_NAMESPACE,
+    initialValue: undefined,
+  });
+  const setContext = index_module.En(keys.VERIFICATION_PARENT_NAMESPACE);
+  const [loading, setLoading] = domContextHooks_module.useState(true);
+  const [showPartnerModal, setShowPartnerModal] = index_module.In({
+    namespace: keys.SHOW_PARTNER_MODAL_NAMESPACE,
+    initialValue: false,
+  });
+  const [partnerCreated, setPartnerCreated] = index_module.In({
+    namespace: keys.PARTNER_CREATED_NAMESPACE,
+    initialValue: false,
+  });
+  const [fetch] = index_module.Xe(USER_LOOKUP);
+  domContextHooks_module.useEffect(() => {
+    const checkUser = async () => {
+      var _a, _b, _c, _d, _e;
+      try {
+        const res = await fetch({});
+        if (!res || res instanceof Error)
+          throw new Error();
+        // Flow changed to send email -> verify code -> show early partner creation modal
+        const emailVerified = ((_a = res === null || res === void 0 ? void 0 : res.viewer) === null || _a === void 0 ? void 0 : _a.emailVerified) || ((_c = (_b = res === null || res === void 0 ? void 0 : res.viewer) === null || _b === void 0 ? void 0 : _b.managedIdentity) === null || _c === void 0 ? void 0 : _c.emailVerified);
+        const isConnected = (_e = (_d = res === null || res === void 0 ? void 0 : res.viewer) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.connected;
+        if (isConnected) {
+          // Partner already created, show widget content
+          setContext(true);
+        }
+        else if (emailVerified) {
+          // Email verified but no partner yet, show partner modal
+          setShowPartnerModal(true);
+        }
+      }
+      catch (e) {
+        console.error("Could not fetch user information:", e);
+      }
+      finally {
+        setLoading(false);
+      }
+    };
+    checkUser();
+  }, []);
+  const onVerification = () => {
+    setShowPartnerModal(true);
+  };
+  const onPartnerModalComplete = () => {
+    setShowPartnerModal(false);
+    setPartnerCreated(false);
+    setContext(true);
+  };
+  domContextHooks_module.useEffect(() => {
+    if (partnerCreated)
+      onPartnerModalComplete();
+  }, [partnerCreated]);
+  return {
+    showCode,
+    showPartnerModal,
+    onVerification,
+    onPartnerModalComplete,
+    loading,
+  };
+}
+
+const style$3 = {
+  Dialog: {
+    "&::part(panel)": {
+      maxWidth: "480px",
+    },
+    "&::part(body)": {
+      padding: "0 var(--sl-spacing-x-large)",
+      fontSize: "var(--sl-font-size-small)",
+      overflow: "visible",
+    },
+    "&::part(footer)": {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-small)",
+    },
+    "&::part(overlay)": {
+      background: "rgba(0, 0, 0, 0.5)",
+    },
+  },
+  DialogTitle: {
+    fontSize: "var(--sl-font-size-x-large)",
+    fontWeight: "600",
+    padding: "var(--sl-spacing-x-large) 0 0 0",
+    margin: "0",
+  },
+};
+const sheet$3 = JSS.createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
+const WidgetVerification = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    // ! Any updated must be reflected in sqm-widget-verification-internal AND sqm-email-verification AND sqm-code-verification AND sqm-partner-info-modal
+    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                    GENERAL PROPS
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+    /**
+     * @uiName General widget header text with partner creation
+     * @uiGroup General Text
+     */
+    this.general_widgetHeaderWithPartnerCreation = "Let's get you ready for rewards";
+    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                    EMAIL STEP PROPS
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+    /**
+     * @uiName Verify email widget header text
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_verifyEmailHeaderText = "Start by verifying your email. We’ll send you a code through our referral provider, impact.com.";
+    /**
+     * @uiName Send code to email alert header
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_sendCodeErrorHeader = "There was an error sending your code.";
+    /**
+     * @uiName Send code to email alert description
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_sendCodeErrorDescription = "Please try again. If this problem continues, contact our program support team.";
+    /**
+     * @uiName Email input label
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_emailLabel = "Email";
+    /**
+     * @uiName Send code button text
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_sendCodeText = "Send code";
+    /**
+     * @uiName Send code button text
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_emailValidationErrorText = "Please enter a valid email";
+    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                    CODE STEP PROPS
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+    /**
+     * @uiName Verify code widget header text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_verifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
+    /**
+     * @uiName Reverify code widget header text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_reverifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
+    /**
+     * Text displayed under verify button
+     * @uiName Resend code text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_resendCodeText = "Didn't receive your code? {resendCodeLink}";
+    /**
+     * The link that appears in the resend code link
+     * @uiName Resend code label
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_resendCodeLabel = "Resend code";
+    /**
+     * Link text displayed under verify button
+     * @uiName Resend code text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_codeResentSuccessfullyText = "Another code has been sent to {email}";
+    /**
+     * Error text displayed under verification input
+     * @uiName Invalid code text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_invalidCodeText = "Please check your code and try again. If you’re still having trouble, try resending your code.";
+    /**
+     * @uiName Verify code button text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_verifyText = "Verify";
+    /**
+     * Displayed when the email verification fails due to a network error. The participant can try refreshing the page.
+     * @uiName Network error message
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
+    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                    PARTNER CREATION STEP PROPS
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+    /**
+     * @uiName New partner header
+     * @uiGroup Partner Creation Step
+     * @uiWidget textArea
+     */
+    this.createPartnerStep_modalHeader = "Let's get you ready for rewards";
+    /**
+     * @uiName Existing partner header
+     * @uiGroup Partner Creation Step
+     * @uiWidget textArea
+     */
+    this.createPartnerStep_modalHeaderExistingPartner = "We found an existing account";
+    /**
+     * @uiName New partner description
+     * @uiGroup Partner Creation Step
+     * @uiWidget textArea
+     */
+    this.createPartnerStep_descriptionNewPartner = "Confirm your country and currency now to get your future rewards faster.";
+    /**
+     * @uiName Existing partner description
+     * @uiGroup Partner Creation Step
+     * @uiWidget textArea
+     */
+    this.createPartnerStep_descriptionExistingPartner = "We found an account with this email on our referral program provider, impact.com. Please confirm your country and currency now to get your future rewards faster.";
+    /**
+     * @uiName Existing partner support description
+     * @uiGroup Partner Creation Step
+     * @uiWidget textArea
+     */
+    this.createPartnerStep_supportDescriptionExistingPartner = "If this is a mistake, please contact Support or sign up for this referral program with a different email.";
+    /**
+     * @uiName Country label
+     * @uiGroup Partner Creation Step
+     */
+    this.createPartnerStep_countryLabel = "Country";
+    /**
+     * @uiName Currency label
+     * @uiGroup Partner Creation Step
+     */
+    this.createPartnerStep_currencyLabel = "Currency";
+    /**
+     * @uiName Submit button label
+     * @uiGroup Partner Creation Step
+     */
+    this.createPartnerStep_submitButtonLabel = "Submit";
+    /**
+     * @uiName Confirm button label
+     * @uiGroup Partner Creation Step
+     */
+    this.createPartnerStep_confirmButtonLabel = "Confirm";
+    /**
+     * @uiName Search country placeholder
+     * @uiGroup Partner Creation Step
+     */
+    this.createPartnerStep_searchCountryPlaceholder = "Search for a country";
+    /**
+     * @uiName Search currency placeholder
+     * @uiGroup Partner Creation Step
+     */
+    this.createPartnerStep_searchCurrencyPlaceholder = "Search for a currency";
+    /**
+     * @uiName Network error text
+     * @uiGroup Partner Creation Step
+     * @uiWidget textArea
+     */
+    this.createPartnerStep_networkErrorText = "An error occurred. Please try again.";
+    /**
+     * @uiName Missing fields error text
+     * @uiGroup Partner Creation Step
+     * @uiWidget textArea
+     */
+    this.createPartnerStep_missingFieldsErrorText = "Please select both a country and currency.";
+    /**
+     * @undocumented
+     * @componentState { "title": "Step 1: Enter email", "props": { "showCode": false }, "dependencies": ["sqm-email-verification"], "uiGroup": "Email Verification Step" }
+     * @componentState { "title": "Step 2: Enter code", "props": { "showCode": true }, "dependencies": ["sqm-code-verification"], "uiGroup": "Code Verification Step" }
+     * @componentState { "title": "Step 3: Create Partner", "props": { "showPartnerModal": true }, "dependencies": ["sqm-partner-info-modal"], "uiGroup": "Partner Creation Step" }
+     */
+    this.stateController = "{}";
+    domContextHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  getStepTextProps(prefix) {
+    const props = utils.getProps(this);
+    return extractProps(props, prefix);
+  }
+  render() {
+    var _a;
+    const props = index_module.isDemo()
+      ? useDemoWidgetVerificationInternal(this)
+      : useWidgetVerification();
+    if (props.loading)
+      return index.h("sl-spinner", null);
+    // for handling state previews in content editor
+    const partnerState = typeof props["sqm-partner-info-modal_stateController"] === "string"
+      ? parseStates.parseStates(props["sqm-partner-info-modal_stateController"])
+      : props["sqm-partner-info-modal_stateController"];
+    if (props.showPartnerModal && ((_a = partnerState === null || partnerState === void 0 ? void 0 : partnerState.states) === null || _a === void 0 ? void 0 : _a.open) === false) {
+      return index.h("div", null);
+    }
+    const partnerText = this.getStepTextProps("createPartnerStep_");
+    const dialogLabel = this.general_widgetHeaderWithPartnerCreation;
+    const renderStepContent = () => {
+      if (props.showPartnerModal) {
+        return (index.h("sqm-partner-info-modal", Object.assign({ inModal: true }, partnerText, { stateController: props["sqm-partner-info-modal_stateController"] || "{}" })));
+      }
+      if (props.showCode) {
+        return (index.h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps(props, "sqm-code-verification_"))));
+      }
+      return (index.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps(props, "sqm-email-verification_"))));
+    };
+    return (index.h("div", null, index.h("style", { type: "text/css" }, styleString$3), index.h("sl-dialog", { class: sheet$3.classes.Dialog, noHeader: true, open: true, label: dialogLabel, "onSl-request-close": (e) => {
+        e.preventDefault();
+      }, "onSl-hide": (e) => {
+        var _a;
+        if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
+          e.preventDefault();
+        }
+      } }, index.h("h2", { class: sheet$3.classes.DialogTitle }, dialogLabel), renderStepContent())));
+  }
+};
+function useDemoWidgetVerificationInternal(props) {
+  const [showCode, setShowCode] = index_module.In({
+    namespace: keys.SHOW_CODE_NAMESPACE,
+    initialValue: false,
+  });
+  const [email, setEmail] = index_module.In({
+    namespace: keys.VERIFICATION_EMAIL_NAMESPACE,
+    initialValue: undefined,
+  });
+  const setContext = index_module.En(keys.VERIFICATION_PARENT_NAMESPACE);
+  const states = parseStates.parseStates(props.stateController);
+  const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-widget-verification"
+    ? { ...prev, ...states[key] }
+    : { ...prev, [`${key}_stateController`]: states[key] }, {});
+  const onVerification = () => {
+    setContext(true);
+  };
+  return cjs.cjs({
+    showCode,
+    showPartnerModal: false,
+    onVerification,
+    onPartnerModalComplete: () => { },
+    loading: false,
+  }, formatted || {}, { arrayMerge: (_, a) => a });
+}
+
 exports.sqm_big_stat = BigStat;
 exports.sqm_brand = BrandComponent;
 exports.sqm_brand_selector = SqmBrandSelector;
@@ -8290,3 +8723,4 @@ exports.sqm_timeline = Timeline;
 exports.sqm_timeline_entry = TimelineReward;
 exports.sqm_user_attribute = UserAttribute;
 exports.sqm_user_name = UserName;
+exports.sqm_widget_verification = WidgetVerification;

package/dist/cjs/sqm-code-verification.cjs.entry.js

@@ -11,7 +11,7 @@ const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-4761d472.js');
 const sqmTextSpanView = require('./sqm-text-span-view-b9e10f5d.js');
-const keys = require('./keys-cff24974.js');
+const keys = require('./keys-5a2c9ed2.js');
 const useVerificationEmail = require('./useVerificationEmail-5d19aa99.js');
 
 const style = {
@@ -65,7 +65,6 @@ const style = {
   },
   ContinueButton: {
     width: "100%",
-    maxWidth: "100px",
   },
   FooterContainer: {
     display: "flex",
@@ -143,9 +142,9 @@ function WidgetCodeVerificationView(props) {
           index.h("sl-input", { class: inputClass, name: "code" }),
           index.h("sl-input", { class: inputClass, name: "code" })),
         states.verifyFailed && (index.h("p", { class: sheet.classes.ErrorText }, text.invalidCodeText)),
-        index.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)),
-      index.h("div", { class: sheet.classes.FooterContainer },
-        index.h(sqmTextSpanView.TextSpanView, { type: "p" }, resendCodeText)))));
+        index.h("div", { class: sheet.classes.FooterContainer },
+          index.h(sqmTextSpanView.TextSpanView, { type: "p" }, resendCodeText)),
+        index.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)))));
 }
 
 const VerifyEmailWithCodeMutation = index_module.dist.gql `