@saasquatch/mint-components 1.12.0-1 → 1.12.0-11

package/dist/cjs/sqm-big-stat_39.cjs.entry.js

@@ -19,8 +19,9 @@ const index$1 = require('./index-8c6255f5.js');
 const useRegistrationFormState = require('./useRegistrationFormState-f9ce55be.js');
 const utilities = require('./utilities-f7de6c04.js');
 const AsYouType = require('./AsYouType-6788393a.js');
-const ShadowViewAddon = require('./ShadowViewAddon-88821c64.js');
+const ShadowViewAddon = require('./ShadowViewAddon-040cffad.js');
 require('./sqm-portal-container-view-990a85a3.js');
+const usePayoutStatus = require('./usePayoutStatus-b9fb7399.js');
 
 const BigStat = class {
   constructor(hostRef) {
@@ -1727,6 +1728,7 @@ const style$2 = {
   PayoutButtonDescription: {
     color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-small)",
+    margin: "0",
   },
 };
 const sheet$2 = JSS.createStyleSheet(style$2);
@@ -1744,7 +1746,14 @@ function PayoutButtonScrollView(props) {
 const PayoutButtonScroll = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * @uiName Payout button text
+     */
     this.payoutButtonText = "Payouts & Tax Settings";
+    /**
+     * Description text under payout button
+     * @uiName Payout button description text
+     */
     this.payoutButtonDescription = "Check your payout settings to see when you’ll get paid out next";
     this.ignored = true;
     stencilHooks_module.h$1(this);
@@ -1776,12 +1785,53 @@ const style$3 = {
     margin: "0",
     marginBottom: "var(--sl-spacing-small)",
   },
+  ErrorAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+  WarningAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-yellow-100)",
+      borderTop: "none",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+  InfoAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-sky-100)",
+      borderTop: "none",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-blue-500)",
+    },
+  },
+  Dialog: {
+    "&::part(panel)": {
+      height: "600px",
+    },
+    "&::part(close-button)": {
+      marginBottom: "var(--sl-spacing-xx-large)",
+    },
+    "&::part(title)": {
+      display: "none",
+    },
+    "&::part(header)": {},
+    "&::part(body)": { padding: "0" },
+    "&::part(footer)": {},
+  },
 };
 const sheet$3 = JSS.createStyleSheet(style$3);
 const styleString$3 = sheet$3.toString();
 function PayoutStatusAlertView(props) {
-  var _a, _b, _c, _d;
-  const { text, states } = props;
+  var _a, _b, _c, _d, _e;
+  const { text, states, data, callbacks } = props;
   if (states.loading) {
     return index.h("sl-skeleton", { class: sheet$3.classes.SkeletonOne });
   }
@@ -1789,14 +1839,24 @@ function PayoutStatusAlertView(props) {
     return index.h("div", null);
   }
   function getAlert(status) {
+    if (states.error)
+      return {
+        header: text.errorHeader,
+        description: text.errorDescription,
+        buttonText: null,
+        alertType: "critical",
+        icon: "exclamation-triangle",
+        class: sheet$3.classes.ErrorAlertContainer,
+      };
     switch (status) {
       case "INFORMATION_REQUIRED":
         return {
           header: text.informationRequiredHeader,
           description: text.informationRequiredDescription,
-          buttonText: text.verificationRequiredButtonText,
+          buttonText: text.informationRequiredButtonText,
           alertType: "info",
-          icon: "exclamation-octagon",
+          icon: "info-circle",
+          class: sheet$3.classes.InfoAlertContainer,
         };
       case "VERIFICATION_NEEDED":
         return {
@@ -1804,7 +1864,8 @@ function PayoutStatusAlertView(props) {
           description: text.verificationRequiredDescription,
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
-          icon: "exclamation-octagon",
+          icon: "exclamation-triangle",
+          class: sheet$3.classes.WarningAlertContainer,
         };
       case "HOLD":
         return {
@@ -1812,7 +1873,8 @@ function PayoutStatusAlertView(props) {
           description: text.holdDescription,
           buttonText: null,
           alertType: "warning",
-          icon: "exclamation-octagon",
+          icon: "exclamation-triangle",
+          class: sheet$3.classes.WarningAlertContainer,
         };
       default:
         return;
@@ -1822,81 +1884,75 @@ function PayoutStatusAlertView(props) {
   function getButton(status) {
     switch (status) {
       case "INFORMATION_REQUIRED":
-        return (index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": "Payout and tax settings", "scroll-animation": "smooth" }));
+        return data.type === "SquatchJS2" ? (index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (index.h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText)) : (index.h("sl-button", { type: "default" }, text.informationRequiredButtonText));
       case "VERIFICATION_NEEDED":
-        return (index.h("sl-button", { type: "default", loading: states.loading }, text.verificationRequiredButtonText));
+        return (index.h("sl-button", { type: "default", loading: states.loading, 
+          //AL: TODO callback to open verification form
+          onClick: () => callbacks.onClick }, text.verificationRequiredButtonText));
       default:
         return;
     }
   }
   return (index.h("div", { part: "sqm-base" },
     index.h("style", { type: "text/css" }, styleString$3),
-    index.h("sqm-form-message", { style: { display: "flex", gap: "2px" }, exportparts: "base: alert-base, icon:alert-icon", type: (_a = getAlert(states.status)) === null || _a === void 0 ? void 0 : _a.alertType },
-      index.h("sl-icon", { slot: "icon", name: (_b = getAlert(states.status)) === null || _b === void 0 ? void 0 : _b.icon }),
-      index.h("strong", null, (_c = getAlert(states.status)) === null || _c === void 0 ? void 0 : _c.header),
-      index.h("p", { class: sheet$3.classes.AlertDescriptionText }, (_d = getAlert(states.status)) === null || _d === void 0 ? void 0 : _d.description),
-      getButton(states.status))));
-}
-
-const GET_USER_STATUS = index_module.dist.gql `
-  query getUserStatus {
-    user: viewer {
-      ... on User {
-        id
-        impactConnection {
-          connected
-          publisher {
-            id
-            payoutsAccount {
-              hold
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-function usePayoutStatus(props) {
-  const { loading, data, errors, refetch } = index_module.En(GET_USER_STATUS, {});
-  const [status, setStatus] = stencilHooks_module.useState(undefined);
-  stencilHooks_module.useEffect(() => {
-    if (!data)
-      return;
-    function getStatus(data) {
-      var _a, _b;
-      const account = (_b = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.payoutsAccount;
-      if (!account)
-        return "INFORMATION_REQUIRED";
-      if (account.hold)
-        return "HOLD";
-      // @ts-ignore, TODO: add check for account verification
-      if (!account.verified)
-        return "VERIFICATION_NEEDED";
-      return "DONE";
-    }
-    const s = getStatus(data);
-    setStatus(s);
-  }, [data]);
-  stencilHooks_module.useEffect(() => {
-    const cb = () => refetch();
-    window.addEventListener("sqm:tax-form-updated", cb);
-    return () => window.removeEventListener("sqm:tax-form-updated", cb);
-  }, []);
-  console.log({ data });
-  return { states: { loading, status }, text: props.getTextProps() };
+    index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: (_a = getAlert(states.status)) === null || _a === void 0 ? void 0 : _a.alertType, class: (_b = getAlert(states.status)) === null || _b === void 0 ? void 0 : _b.class, open: true },
+      index.h("sl-icon", { slot: "icon", name: (_c = getAlert(states.status)) === null || _c === void 0 ? void 0 : _c.icon }),
+      index.h("strong", null, (_d = getAlert(states.status)) === null || _d === void 0 ? void 0 : _d.header),
+      index.h("p", { class: sheet$3.classes.AlertDescriptionText }, (_e = getAlert(states.status)) === null || _e === void 0 ? void 0 : _e.description),
+      getButton(states.status)),
+    index.h("sl-dialog", { noDismiss: true, class: sheet$3.classes.Dialog, open: states.showVerifyIdentity, "onSl-hide": callbacks.onCancel },
+      index.h("iframe", { 
+        // AL: TODO replace iframe URL with verification url when available
+        scrolling: "yes", frameBorder: "0", width: "100%", height: "100%", src: "https://impacttech.complytaxforms.com/ServiceRedirect.aspx?Language=eng&Param1=UxBORV4bOIrqNb4gbpNmtvW3wjdZJyx4gPElIGMJNR8=&UUID=B576EA3E-80FD-4D85-AA59-653D23A7CCE8" }))));
 }
 
 const PayoutStatusAlert = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * @uiName Info required alert header
+     */
     this.informationRequiredHeader = "Payout and tax information required";
+    /**
+     * @uiName Info required alert description
+     */
     this.informationRequiredDescription = "Submit your banking details and tax documents to receive your rewards.";
+    /**
+     * @uiName Info required alert button text
+     */
     this.informationRequiredButtonText = "Payouts & Tax Settings";
+    /**
+     * @uiName Verification required alert header
+     */
     this.verificationRequiredHeader = "Verify your identity";
+    /**
+     * @uiName Verification required alert description
+     */
     this.verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
+    /**
+     * @uiName Verification required alert button text
+     */
     this.verificationRequiredButtonText = "Start Verification";
+    /**
+     * @uiName Payout on hold alert header
+     */
     this.holdHeader = "Your payouts and account are on hold";
+    /**
+     * @uiName Payout on hold alert description
+     */
     this.holdDescription = "Please check your inbox for an email from our referral provider, impact.com. It contains details on how to resolve this issue. If you need further assistance, feel free to reach out to {support email}.";
+    /**
+     * @uiName Cash & Payouts Terms and Conditions url
+     */
+    this.termsUrl = "https://terms.advocate.impact.com/PayoutTermsAndConditions.html";
+    /**
+     * @uiName Error header
+     */
+    this.errorHeader = "Could not determine payout status.";
+    /**
+     * @uiName Error description
+     */
+    this.errorDescription = "There was an error with determining your payout status.";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -1906,17 +1962,26 @@ const PayoutStatusAlert = class {
   render() {
     const props = index_module.isDemo()
       ? useDemoPayoutStatusAlert(this)
-      : usePayoutStatus(this);
+      : usePayoutStatus.usePayoutStatus(this);
+    console.log({ props });
     return index.h(PayoutStatusAlertView, Object.assign({}, props));
   }
 };
 function useDemoPayoutStatusAlert(props) {
   return cjs.cjs({
     states: {
+      error: false,
       status: "INFORMATION_REQUIRED",
       loading: false,
+      showVerifyIdentity: false,
     },
+    data: { type: "SquatchAdmin" },
     text: props.getTextProps(),
+    callbacks: {
+      onTermsClick: () => { },
+      onClick: () => console.log("show"),
+      onCancel: () => console.log("hide"),
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 

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

@@ -12,7 +12,7 @@ const JSS = require('./JSS-8503a151.js');
 const utils = require('./utils-6847bc06.js');
 const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
 const keys = require('./keys-cff24974.js');
-const useEmailVerification = require('./useEmailVerification-30a1c7f6.js');
+const useVerificationEmail = require('./useVerificationEmail-6aacdb71.js');
 
 const style = {
   Wrapper: {
@@ -96,7 +96,16 @@ function WidgetCodeVerificationView(props) {
     id: "resendCodeText",
     defaultMessage: text.resendCodeText,
   }, {
-    resendCodeLink: (index.h("a", { href: text.resendCodeLink, target: "_blank", style: { textDecoration: "none" } }, text.resendCodeLabel)),
+    resendCodeLink: (index.h("a", { href: "", style: { textDecoration: "none" }, onClick: (e) => {
+        e.preventDefault();
+        callbacks.resendEmail();
+      } }, text.resendCodeLabel)),
+  });
+  const codeResentSuccessfully = global.intl.formatMessage({
+    id: "codeResentSuccessfully",
+    defaultMessage: text.codeResentSuccessfullyText,
+  }, {
+    email: states.email,
   });
   const inputClass = states.verifyFailed
     ? sheet.classes.CodeInputError
@@ -107,11 +116,14 @@ function WidgetCodeVerificationView(props) {
       styleString),
     index.h("div", { class: sheet.classes.Wrapper },
       index.h("div", { class: sheet.classes.HeaderContainer },
-        index.h(sqmTextSpanView.TextSpanView, { type: "p" }, states.verifyFailed
-          ? text.reverifyCodeHeaderText
-          : text.verifyCodeHeaderText)),
-      states.codeResent && (index.h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
-        index.h("b", null, text.codeResentSuccessfullyText))),
+        index.h(sqmTextSpanView.TextSpanView, { type: "p" }, global.intl.formatMessage({
+          id: `emailHeaderText`,
+          defaultMessage: states.verifyFailed
+            ? text.reverifyCodeHeaderText
+            : text.verifyCodeHeaderText,
+        }, { email: states.email }))),
+      states.emailResent && (index.h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
+        index.h("b", null, codeResentSuccessfully))),
       index.h("div", { class: sheet.classes.InputsContainer },
         index.h("div", { ref: refs.codeWrapperRef, class: sheet.classes.CodeInputContainer },
           index.h("sl-input", { class: inputClass, name: "code" }),
@@ -121,45 +133,22 @@ 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, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
+        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(sqmTextSpanView.TextSpanView, { type: "p" },
-          index.h("a", { href: "/", style: { textDecoration: "none" } }, text.useDifferentEmailText))))));
+        index.h(sqmTextSpanView.TextSpanView, { type: "p" }, resendCodeText)))));
 }
 
-// TODO: Move to component-boilerplate
 const VerifyEmailWithCodeMutation = index_module.dist.gql `
-  mutation verifyUserEmail($user: UserIdInput!, $code: String!) {
-    verifyUserEmail(user: $user, code: $code) {
+  mutation submitImpactPublisherEmail2FACode(
+    $user: UserIdInput!
+    $code: String!
+  ) {
+    submitImpactPublisherEmail2FACode(user: $user, code: $code) {
       verifiedEmail
       accessKey
     }
   }
 `;
-function useCodeVerificationMutation() {
-  const user = index_module.K();
-  const [request, { loading, data, errors }] = index_module.xe(VerifyEmailWithCodeMutation);
-  const verifyUserWithCodeMutation = async (code) => {
-    try {
-      const result = await request({
-        user: {
-          id: user.id,
-          accountId: user.accountId,
-        },
-        code,
-      });
-      if (result instanceof Error || !result)
-        throw new Error();
-      return result;
-    }
-    catch (e) {
-      console.error("Failed to verify user", e);
-      return null;
-    }
-  };
-  return [verifyUserWithCodeMutation, { loading, data, errors }];
-}
 function useWidgetCodeVerification(props) {
   const host = stencilHooks_module.l();
   const [_, setShowCode] = index_module.Mn(keys.SHOW_CODE_NAMESPACE);
@@ -168,9 +157,8 @@ function useWidgetCodeVerification(props) {
   const [emailResent, setEmailResent] = stencilHooks_module.useState(false);
   const [codeRef, setCodeRef] = stencilHooks_module.useState(null);
   const [validationError, setValidationError] = stencilHooks_module.useState(false);
-  // TODO: Need to handle error states for these errors
-  const [verifyUser, { loading: verifyLoading, errors: verifyErrors }] = useCodeVerificationMutation();
-  const [request, { loading: resendLoading, data, errors: resendErrors }] = useEmailVerification.useVerificationEmailMutation();
+  const [emailError, setEmailError] = stencilHooks_module.useState(false);
+  const { initialized, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail.useVerificationEmail();
   stencilHooks_module.useEffect(() => {
     if (!codeRef)
       return;
@@ -186,7 +174,7 @@ function useWidgetCodeVerification(props) {
         }
       });
       element.addEventListener("input", (e) => {
-        const input = e.target.value;
+        const input = e.data;
         if (!input)
           return;
         if (idx === codeElements.length - 1) {
@@ -196,8 +184,10 @@ function useWidgetCodeVerification(props) {
         if (input.length > 1) {
           const rest = input.slice(1);
           e.target.value = input.slice(0, 1);
-          codeElements[idx + 1].value = rest;
-          codeElements[idx + 1].dispatchEvent(new Event("input"));
+          codeElements[idx + 1].dispatchEvent(new InputEvent("input", {
+            inputType: "insertFromPaste",
+            data: rest,
+          }));
         }
         codeElements[idx + 1].focus();
       });
@@ -208,14 +198,16 @@ function useWidgetCodeVerification(props) {
     setValidationError(false);
   };
   const resendEmail = async () => {
-    // TODO: Error checks, depends on what mutation is set up as
-    const result = await request();
-    if (emailSent) {
-      setEmailResent(true);
-      setTimeout(() => {
-        setEmailResent(false);
-      }, 500);
+    // UI should only allow this to be called if initialized, but checking just in case
+    if (!initialized)
+      return;
+    const result = await sendEmail();
+    if (!result) {
+      setEmailError(true);
+      return;
     }
+    if (emailSent)
+      setEmailResent(true);
     setEmailSent(true);
   };
   const submitCode = async () => {
@@ -229,16 +221,13 @@ function useWidgetCodeVerification(props) {
     codeElements.forEach((element) => {
       code = `${code}${element.value}`;
     });
+    // UI should only allow this to be called if initialized, but checking just in case
+    if (!initialized)
+      return;
     setValidationError(false);
-    // Only 123456 passes for a valid code rn
-    const res = await verifyUser(code);
-    if (res) {
-      const event = new CustomEvent(keys.VERIFICATION_EVENT_KEY, {
-        detail: { token: res.verifyUserEmail.accessKey },
-        composed: true,
-        bubbles: true,
-      });
-      host.dispatchEvent(event);
+    const res = await verifyEmail(code);
+    if (res === null || res === void 0 ? void 0 : res.success) {
+      props.onVerification(res.accessKey);
       reset();
     }
     else {
@@ -246,10 +235,15 @@ function useWidgetCodeVerification(props) {
     }
   };
   stencilHooks_module.useEffect(() => {
+    // Wait for mutations to be determined from user lookup
+    if (!initialized)
+      return;
     // email should already exist if user has completed email-verification
     if (!email)
       resendEmail();
-  }, []);
+    else
+      setEmailSent(true);
+  }, [initialized]);
   return {
     refs: {
       codeWrapperRef: setCodeRef,
@@ -257,7 +251,9 @@ function useWidgetCodeVerification(props) {
     states: {
       email,
       emailResent,
-      loading: verifyLoading || resendLoading,
+      resendError: sendErrors || verifyErrors,
+      initialiseLoading: !initialized,
+      loading: sendLoading || verifyLoading,
       verifyFailed: !!validationError,
     },
     callbacks: {
@@ -274,7 +270,7 @@ const WidgetCodeVerification = class {
     /**
      * @uiName Verify code widget header text
      */
-    this.verifyCodeHeaderText = "Enter the code sent to email@example.com from our referral provider, impact.com.";
+    this.verifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
     /**
      * @uiName Reverify code widget header text
      */
@@ -289,27 +285,16 @@ const WidgetCodeVerification = class {
      * @uiName Resend code label
      */
     this.resendCodeLabel = "Resend code";
-    /**
-     * The link that appears in the resend code link
-     * @uiName Resend code link
-     */
-    // AL: TODO connect route to resend verification code
-    this.resendCodeLink = "/resend-code";
     /**
      * Link text displayed under verify button
      * @uiName Resend code text
      */
     this.codeResentSuccessfullyText = "Another code has been sent to {email}";
-    /**
-     * Link text displayed under the verify button
-     * @uiName Use different email text
-     */
-    this.useDifferentEmailText = "Use a different email";
     /**
      * Error text displayed under verification input
      * @uiName Invalid code text
      */
-    this.invalidCodeText = " Please check your code and try again. If you’re still having trouble, try resending your code.";
+    this.invalidCodeText = "Please check your code and try again. If you’re still having trouble, try resending your code.";
     /**
      * @uiName Verify code button text
      */
@@ -333,17 +318,22 @@ const WidgetCodeVerification = class {
   }
 };
 function useDemoWidgetCodeVerification(props) {
+  const [emailResent, setEmailResent] = stencilHooks_module.useState(false);
+  const setVerifiedContext = index_module.Sn(keys.VERIFICATION_PARENT_NAMESPACE);
   return cjs.cjs({
     states: {
       loading: false,
-      email: "",
-      verifyFailed: false,
+      email: "test@example.com",
+      emailResent,
+      resendError: true,
+      verifyFailed: true,
     },
     refs: {
       codeWrapperRef: () => { },
     },
     callbacks: {
-      submitCode: async () => { },
+      resendEmail: async () => setEmailResent(true),
+      submitCode: async () => setVerifiedContext(true),
     },
     text: props.getTextProps(),
   }, props.demoData || {}, { arrayMerge: (_, a) => a });