@saasquatch/mint-components 1.13.5-0 → 1.14.0-0

package/dist/esm/sqm-widget-verification-controller.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-91e7729f.js';
 import { b as browser, n as h, k as useState, f as useEffect } from './stencil-hooks.module-4bc38af4.js';
-import { I as In, u as useCallback } from './index.module-89a79f66.js';
+import { I as In, u as useCallback, i as isDemo } from './index.module-89a79f66.js';
 import { a as VERIFICATION_PARENT_NAMESPACE } from './keys-406491dc.js';
 
 const debug = browser("sq:widget-verification");
@@ -33,18 +33,26 @@ function useTemplateChildren({ parent, callback }) {
 const WidgetVerificationController = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /**
+     * @componentState { "title": "Not Verified", "slot": "not-verified", "props": { "isAuth": false } }
+     * @componentState { "title": "Verified", "slot": "verified", "props": { "isAuth": true } }
+     */
+    this.stateController = "{}";
     h(this);
   }
   disconnectedCallback() { }
   render() {
+    var _a;
     const [context, setContext] = In({
       namespace: VERIFICATION_PARENT_NAMESPACE,
       initialValue: false,
     });
+    const props = JSON.parse(this.stateController);
+    const demoIsAuth = isDemo() && ((_a = props["sqm-widget-verification-controller"]) === null || _a === void 0 ? void 0 : _a.isAuth);
     const [container, setContainer] = useState(undefined);
     const [slot, setSlot] = useState(undefined);
     const updateTemplates = useCallback(() => {
-      const isAuth = context;
+      const isAuth = demoIsAuth || context;
       const templates = slot.querySelectorAll(`template`);
       const template = Array.from(templates).find((t) => t.slot === (isAuth ? "verified" : "not-verified"));
       if (template) {
@@ -92,7 +100,7 @@ const WidgetVerificationController = class {
           target.style.height = "25px";
         });
       }
-    }, [container, slot, context]);
+    }, [container, slot, context, demoIsAuth]);
     useEffect(() => {
       if (!container || !slot) {
         debug("DOM not ready:");
@@ -101,7 +109,7 @@ const WidgetVerificationController = class {
       // Run on first render
       updateTemplates();
       return useTemplateChildren({ parent: slot, callback: updateTemplates });
-    }, [slot, container, context]);
+    }, [slot, container, context, demoIsAuth]);
     return (h$1(Host, null, h$1("div", { ref: setSlot, style: { display: "contents" } }, h$1("slot", { name: "not-verified" }), h$1("slot", { name: "verified" })), h$1("div", { ref: setContainer }, h$1("slot", { name: "shown" }))));
   }
 };

package/dist/esm/sqm-widget-verification.entry.js

@@ -1,7 +1,9 @@
 import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
 import { k as useState, f as useEffect, n as h } from './stencil-hooks.module-4bc38af4.js';
 import { d as dist, J, I as In, q as En, X as Xe, i as isDemo } from './index.module-89a79f66.js';
+import { c as cjs } from './cjs-bdfb4486.js';
 import { g as getProps } from './utils-334c1e34.js';
+import { p as parseStates } from './parseStates-ed75e224.js';
 import { e as extractProps } from './extractProps-ae1afbb3.js';
 import { S as SHOW_CODE_NAMESPACE, V as VERIFICATION_EMAIL_NAMESPACE, a as VERIFICATION_PARENT_NAMESPACE } from './keys-406491dc.js';
 
@@ -159,6 +161,11 @@ const WidgetVerification = class {
      * @uiGroup Code Verification Step
      */
     this.codeStep_networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
+    /**
+     * @componentState { "title": "Email Step", "props": { "showCode": false } }
+     * @componentState { "title": "Code Step", "props": { "showCode": true } }
+     */
+    this.stateController = "{}";
     h(this);
   }
   disconnectedCallback() { }
@@ -167,20 +174,20 @@ const WidgetVerification = class {
     return extractProps(props, prefix);
   }
   render() {
-    const { showCode, onVerification, loading } = isDemo()
-      ? useDemoWidgetVerificationInternal()
+    const props = isDemo()
+      ? useDemoWidgetVerificationInternal(this)
       : useWidgetVerification();
-    if (loading)
+    if (props.loading)
       return h$1("sl-spinner", null);
     const generalText = this.getStepTextProps("general_");
     return (h$1("div", null, h$1("h3", { style: { fontSize: "24px", margin: "0" } }, generalText.verifyEmailHeader), h$1("p", { style: {
         color: "var(--sl-color-neutral-500)",
         fontSize: "var(--sl-font-size-medium)",
         margin: "0",
-      } }, generalText.verifyEmailDescription), showCode ? (h$1("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_")))) : (h$1("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))))));
+      } }, generalText.verifyEmailDescription), props.showCode ? (h$1("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps(props, "sqm-code-verification_")))) : (h$1("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps(props, "sqm-email-verification_"))))));
   }
 };
-function useDemoWidgetVerificationInternal() {
+function useDemoWidgetVerificationInternal(props) {
   const [showCode, setShowCode] = In({
     namespace: SHOW_CODE_NAMESPACE,
     initialValue: false,
@@ -190,10 +197,14 @@ function useDemoWidgetVerificationInternal() {
     initialValue: undefined,
   });
   const setContext = En(VERIFICATION_PARENT_NAMESPACE);
+  const states = 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 { showCode, onVerification, loading: false };
+  return cjs({ showCode, onVerification, loading: false }, formatted || {}, { arrayMerge: (_, a) => a });
 }
 
 export { WidgetVerification as sqm_widget_verification };

package/dist/esm/utils-7c96856c.js

@@ -0,0 +1,97 @@
+import { h } from './index-91e7729f.js';
+import { i as intl } from './global-be1f9992.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+
+const style = {
+  Container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "24px",
+  },
+  HeaderContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+  },
+  TitleSkeleton: {
+    width: "45%",
+    height: "40px !important",
+  },
+  StepSkeleton: {
+    width: "15%",
+  },
+  HeaderSkeleton: {
+    width: "25%",
+    height: "30px !important",
+  },
+  InputSkeleton: {
+    width: "75%",
+  },
+  ButtonSkeleton: {
+    width: "80px",
+    height: "30px !important",
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const LoadingView = () => {
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" }, styleString),
+    h("sl-skeleton", { class: sheet.classes.TitleSkeleton }),
+    h("div", { class: sheet.classes.HeaderContainer },
+      h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+      h("sl-skeleton", { class: sheet.classes.HeaderSkeleton })),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.ButtonSkeleton })));
+};
+
+function validTaxDocument(requiredType) {
+  const validTypes = ["W9", "W8BENE", "W8BEN"];
+  if (validTypes.includes(requiredType))
+    return true;
+  return false;
+}
+const objectIsFull = (obj) => {
+  return !Object.keys(obj).find((k) => obj[k] == undefined);
+};
+const taxTypeToName = (taxType) => {
+  switch (taxType) {
+    case "W9":
+      return "W-9";
+    case "W8BEN":
+    case "W8BENE":
+      return "W-8";
+    default:
+      return "";
+  }
+};
+function validateBillingField(regex, value) {
+  const trimmed = value.trim();
+  const idx = trimmed.search(regex);
+  return idx > -1;
+}
+const formatErrorMessage = (fieldName, errorMessage) => {
+  return intl.formatMessage({
+    id: fieldName,
+    defaultMessage: errorMessage,
+  }, {
+    fieldName,
+  });
+};
+function getCountryObj({ countryCode, locale, }) {
+  // @ts-ignore DisplayNames not in Intl type
+  const displayName = new Intl.DisplayNames([locale], {
+    type: "region",
+  }).of(countryCode);
+  return {
+    countryCode,
+    displayName,
+  };
+}
+
+export { LoadingView as L, validateBillingField as a, formatErrorMessage as f, getCountryObj as g, objectIsFull as o, taxTypeToName as t, validTaxDocument as v };