@saasquatch/mint-components 2.1.10-57 → 2.2.0-0

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

@@ -7,6 +7,35 @@ import { getProps } from "../../utils/utils";
 import { extractProps } from "../tax-and-cash/sqm-tax-and-cash/extractProps";
 import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE, VERIFICATION_PARENT_NAMESPACE, } from "./keys";
 import { useWidgetVerification } from "./useWidgetVerification";
+import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  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 = createStyleSheet(style);
+const styleString = sheet.toString();
 /**
  * @uiName Widget Verification Flow
  * @exampleGroup Widget Verification
@@ -14,10 +43,15 @@ import { useWidgetVerification } from "./useWidgetVerification";
  */
 export class WidgetVerification {
   constructor() {
-    // ! Any updated must be reflected in sqm-widget-verification-internal AND sqm-email-verification AND sqm-code-verification
+    // ! 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";
     /**
      * @uiName General verify widget header text
      * @uiGroup General Text
@@ -62,7 +96,7 @@ export class WidgetVerification {
      */
     this.emailStep_emailValidationErrorText = "Please enter a valid email";
     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-                    EMAIL STEP PROPS
+                    CODE STEP PROPS
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
     /**
      * @uiName Verify code widget header text
@@ -109,10 +143,86 @@ export class WidgetVerification {
      * @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 = "{}";
     withHooks(this);
@@ -123,24 +233,71 @@ export class WidgetVerification {
     return extractProps(props, prefix);
   }
   render() {
+    var _a;
     const props = isDemo()
       ? useDemoWidgetVerificationInternal(this)
       : useWidgetVerification();
     if (props.loading)
       return h("sl-spinner", null);
-    const generalText = this.getStepTextProps("general_");
+    // for handling state previews in content editor
+    const partnerState = typeof props["sqm-partner-info-modal_stateController"] === "string"
+      ? 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 h("div", null);
+    }
+    // const generalText = this.getStepTextProps("general_");
+    const partnerText = this.getStepTextProps("createPartnerStep_");
+    const dialogLabel = this.general_widgetHeaderWithPartnerCreation;
+    const renderStepContent = () => {
+      if (props.showPartnerModal) {
+        return (h("sqm-partner-info-modal", Object.assign({ inModal: true }, partnerText, { stateController: props["sqm-partner-info-modal_stateController"] || "{}" })));
+      }
+      if (props.showCode) {
+        return (h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps(props, "sqm-code-verification_"))));
+      }
+      return (h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps(props, "sqm-email-verification_"))));
+    };
     return (h("div", null,
-      h("h3", { style: { fontSize: "24px", margin: "0" } }, generalText.verifyEmailHeader),
-      h("p", { style: {
-          color: "var(--sl-color-neutral-500)",
-          fontSize: "var(--sl-font-size-medium)",
-          margin: "0",
-        } }, generalText.verifyEmailDescription),
-      props.showCode ? (h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps(props, "sqm-code-verification_")))) : (h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps(props, "sqm-email-verification_"))))));
+      h("style", { type: "text/css" }, styleString),
+      h("sl-dialog", { class: sheet.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();
+          }
+        } },
+        h("h2", { class: sheet.classes.DialogTitle }, dialogLabel),
+        renderStepContent())));
   }
   static get is() { return "sqm-widget-verification"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
+    "general_widgetHeaderWithPartnerCreation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "General widget header text with partner creation",
+            "name": "uiName"
+          }, {
+            "text": "General Text",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "general_widget-header-with-partner-creation",
+      "reflect": false,
+      "defaultValue": "\"Let's get you ready for rewards\""
+    },
     "general_verifyEmailHeader": {
       "type": "string",
       "mutable": false,
@@ -525,6 +682,339 @@ export class WidgetVerification {
       "reflect": false,
       "defaultValue": "\"An error occurred while verifying your email. Please refresh the page and try again.\""
     },
+    "createPartnerStep_modalHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "New partner header",
+            "name": "uiName"
+          }, {
+            "text": "Partner Creation Step",
+            "name": "uiGroup"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "create-partner-step_modal-header",
+      "reflect": false,
+      "defaultValue": "\"Let's get you ready for rewards\""
+    },
+    "createPartnerStep_modalHeaderExistingPartner": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Existing partner header",
+            "name": "uiName"
+          }, {
+            "text": "Partner Creation Step",
+            "name": "uiGroup"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "create-partner-step_modal-header-existing-partner",
+      "reflect": false,
+      "defaultValue": "\"We found an existing account\""
+    },
+    "createPartnerStep_descriptionNewPartner": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "New partner description",
+            "name": "uiName"
+          }, {
+            "text": "Partner Creation Step",
+            "name": "uiGroup"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "create-partner-step_description-new-partner",
+      "reflect": false,
+      "defaultValue": "\"Confirm your country and currency now to get your future rewards faster.\""
+    },
+    "createPartnerStep_descriptionExistingPartner": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Existing partner description",
+            "name": "uiName"
+          }, {
+            "text": "Partner Creation Step",
+            "name": "uiGroup"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "create-partner-step_description-existing-partner",
+      "reflect": false,
+      "defaultValue": "\"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.\""
+    },
+    "createPartnerStep_supportDescriptionExistingPartner": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Existing partner support description",
+            "name": "uiName"
+          }, {
+            "text": "Partner Creation Step",
+            "name": "uiGroup"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "create-partner-step_support-description-existing-partner",
+      "reflect": false,
+      "defaultValue": "\"If this is a mistake, please contact Support or sign up for this referral program with a different email.\""
+    },
+    "createPartnerStep_countryLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Country label",
+            "name": "uiName"
+          }, {
+            "text": "Partner Creation Step",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "create-partner-step_country-label",
+      "reflect": false,
+      "defaultValue": "\"Country\""
+    },
+    "createPartnerStep_currencyLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Currency label",
+            "name": "uiName"
+          }, {
+            "text": "Partner Creation Step",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "create-partner-step_currency-label",
+      "reflect": false,
+      "defaultValue": "\"Currency\""
+    },
+    "createPartnerStep_submitButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Submit button label",
+            "name": "uiName"
+          }, {
+            "text": "Partner Creation Step",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "create-partner-step_submit-button-label",
+      "reflect": false,
+      "defaultValue": "\"Submit\""
+    },
+    "createPartnerStep_confirmButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Confirm button label",
+            "name": "uiName"
+          }, {
+            "text": "Partner Creation Step",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "create-partner-step_confirm-button-label",
+      "reflect": false,
+      "defaultValue": "\"Confirm\""
+    },
+    "createPartnerStep_searchCountryPlaceholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Search country placeholder",
+            "name": "uiName"
+          }, {
+            "text": "Partner Creation Step",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "create-partner-step_search-country-placeholder",
+      "reflect": false,
+      "defaultValue": "\"Search for a country\""
+    },
+    "createPartnerStep_searchCurrencyPlaceholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Search currency placeholder",
+            "name": "uiName"
+          }, {
+            "text": "Partner Creation Step",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "create-partner-step_search-currency-placeholder",
+      "reflect": false,
+      "defaultValue": "\"Search for a currency\""
+    },
+    "createPartnerStep_networkErrorText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Network error text",
+            "name": "uiName"
+          }, {
+            "text": "Partner Creation Step",
+            "name": "uiGroup"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "create-partner-step_network-error-text",
+      "reflect": false,
+      "defaultValue": "\"An error occurred. Please try again.\""
+    },
+    "createPartnerStep_missingFieldsErrorText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Missing fields error text",
+            "name": "uiName"
+          }, {
+            "text": "Partner Creation Step",
+            "name": "uiGroup"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "create-partner-step_missing-fields-error-text",
+      "reflect": false,
+      "defaultValue": "\"Please select both a country and currency.\""
+    },
     "stateController": {
       "type": "string",
       "mutable": false,
@@ -545,6 +1035,9 @@ export class WidgetVerification {
           }, {
             "text": "{ \"title\": \"Step 2: Enter code\", \"props\": { \"showCode\": true }, \"dependencies\": [\"sqm-code-verification\"], \"uiGroup\": \"Code Verification Step\" }",
             "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Step 3: Create Partner\", \"props\": { \"showPartnerModal\": true }, \"dependencies\": [\"sqm-partner-info-modal\"], \"uiGroup\": \"Partner Creation Step\" }",
+            "name": "componentState"
           }],
         "text": ""
       },
@@ -571,5 +1064,11 @@ function useDemoWidgetVerificationInternal(props) {
   const onVerification = () => {
     setContext(true);
   };
-  return deepmerge({ showCode, onVerification, loading: false }, formatted || {}, { arrayMerge: (_, a) => a });
+  return deepmerge({
+    showCode,
+    showPartnerModal: false,
+    onVerification,
+    onPartnerModalComplete: () => { },
+    loading: false,
+  }, formatted || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -15,6 +15,9 @@ const USER_LOOKUP = gql `
           email
           emailVerified
         }
+        impactConnection {
+          connected
+        }
       }
     }
   }
@@ -31,18 +34,26 @@ export function useWidgetVerification() {
   });
   const setContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
   const [loading, setLoading] = useState(true);
+  const [showPartnerModal, setShowPartnerModal] = useState(false);
   const [fetch] = useLazyQuery(USER_LOOKUP);
   useEffect(() => {
     const checkUser = async () => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d, _e;
       try {
         const res = await fetch({});
         if (!res || res instanceof Error)
           throw new Error();
-        if ((_a = res === null || res === void 0 ? void 0 : res.viewer) === null || _a === void 0 ? void 0 : _a.emailVerified)
-          setContext(true);
-        else if ((_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)
+        // 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);
@@ -54,7 +65,11 @@ export function useWidgetVerification() {
     checkUser();
   }, []);
   const onVerification = () => {
+    setShowPartnerModal(true);
+  };
+  const onPartnerModalComplete = () => {
+    setShowPartnerModal(false);
     setContext(true);
   };
-  return { showCode, onVerification, loading };
+  return { showCode, showPartnerModal, onVerification, onPartnerModalComplete, loading };
 }

package/dist/collection/components/tax-and-cash/data.js

@@ -38,6 +38,7 @@ export const GET_USER = gql `
         }
         impactConnection {
           connected
+          connectionStatus
           user {
             firstName
             lastName