@saasquatch/mint-components 2.1.9-10 → 2.1.9-12

package/dist/cjs/{sqm-partner-info-modal-view-cd758f12.js → sqm-partner-info-modal-view-7bcb2262.js}

@@ -61,14 +61,11 @@ const style = {
     },
   },
 };
-function PartnerInfoModalView(props) {
+function PartnerInfoModalContentView(props) {
   var _a, _b;
   const { states, callbacks, text } = props;
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
-  console.log(states, "partner info modal states"); // TEMP
-  if (!states.open)
-    return index.h("div", null);
   const description = states.isExistingPartner ? (index.h("div", { class: sheet.classes.DescriptionContainer },
     index.h("p", null, text.descriptionExistingPartner),
     index.h("p", null, text.supportDescriptionExistingPartner))) : (index.h("p", null,
@@ -77,17 +74,7 @@ function PartnerInfoModalView(props) {
   const buttonLabel = states.isExistingPartner
     ? text.confirmButtonLabel
     : text.submitButtonLabel;
-  return (index.h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: false, label: states.isExistingPartner
-      ? text.modalHeaderExistingPartner
-      : text.modalHeader, "onSl-request-close": (e) => {
-      e.preventDefault();
-    }, "onSl-hide": (e) => {
-      var _a;
-      // Prevent closing when clicking outside the dialog but not dropdowns
-      if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
-        e.preventDefault();
-      }
-    } },
+  return [
     index.h("style", { type: "text/css" }, styleString),
     description,
     index.h("div", { class: sheet.classes.FormFields },
@@ -101,7 +88,27 @@ function PartnerInfoModalView(props) {
         index.h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCurrencyPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => { var _a; return callbacks.setCurrencySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value); } }), (_b = states.filteredCurrencies) === null || _b === void 0 ? void 0 :
         _b.map((c) => (index.h("sl-menu-item", { value: c.currencyCode }, c.currencyCode))))),
     states.error && index.h("p", { class: sheet.classes.ErrorMessage }, states.error),
-    index.h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit, style: { width: "100%" }, exportparts: "base: primarybutton-base" }, buttonLabel)));
+    index.h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit, style: { width: "100%" }, exportparts: "base: primarybutton-base" }, buttonLabel),
+  ];
+}
+function PartnerInfoModalView(props) {
+  const { states, text } = props;
+  const sheet = JSS.createStyleSheet(style);
+  console.log(states, "partner info modal states"); // TEMP
+  if (!states.open)
+    return index.h("div", null);
+  return (index.h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: false, label: states.isExistingPartner
+      ? text.modalHeaderExistingPartner
+      : text.modalHeader, "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(PartnerInfoModalContentView, Object.assign({}, props))));
 }
 
+exports.PartnerInfoModalContentView = PartnerInfoModalContentView;
 exports.PartnerInfoModalView = PartnerInfoModalView;

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -38,7 +38,7 @@ const sqmPortalContainerView = require('./sqm-portal-container-view-70a47420.js'
 const sqmUserInfoFormView = require('./sqm-user-info-form-view-923ff8d9.js');
 const data = require('./data-e83f8a41.js');
 const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-818d9e9a.js');
-const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-cd758f12.js');
+const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-7bcb2262.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>

package/dist/collection/components/sqm-partner-info-modal/sqm-partner-info-modal-view.js

@@ -58,14 +58,11 @@ const style = {
     },
   },
 };
-export function PartnerInfoModalView(props) {
+export function PartnerInfoModalContentView(props) {
   var _a, _b;
   const { states, callbacks, text } = props;
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  console.log(states, "partner info modal states"); // TEMP
-  if (!states.open)
-    return h("div", null);
   const description = states.isExistingPartner ? (h("div", { class: sheet.classes.DescriptionContainer },
     h("p", null, text.descriptionExistingPartner),
     h("p", null, text.supportDescriptionExistingPartner))) : (h("p", null,
@@ -74,17 +71,7 @@ export function PartnerInfoModalView(props) {
   const buttonLabel = states.isExistingPartner
     ? text.confirmButtonLabel
     : text.submitButtonLabel;
-  return (h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: false, label: states.isExistingPartner
-      ? text.modalHeaderExistingPartner
-      : text.modalHeader, "onSl-request-close": (e) => {
-      e.preventDefault();
-    }, "onSl-hide": (e) => {
-      var _a;
-      // Prevent closing when clicking outside the dialog but not dropdowns
-      if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
-        e.preventDefault();
-      }
-    } },
+  return [
     h("style", { type: "text/css" }, styleString),
     description,
     h("div", { class: sheet.classes.FormFields },
@@ -98,5 +85,24 @@ export function PartnerInfoModalView(props) {
         h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCurrencyPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => { var _a; return callbacks.setCurrencySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value); } }), (_b = states.filteredCurrencies) === null || _b === void 0 ? void 0 :
         _b.map((c) => (h("sl-menu-item", { value: c.currencyCode }, c.currencyCode))))),
     states.error && h("p", { class: sheet.classes.ErrorMessage }, states.error),
-    h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit, style: { width: "100%" }, exportparts: "base: primarybutton-base" }, buttonLabel)));
+    h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit, style: { width: "100%" }, exportparts: "base: primarybutton-base" }, buttonLabel),
+  ];
+}
+export function PartnerInfoModalView(props) {
+  const { states, text } = props;
+  const sheet = createStyleSheet(style);
+  console.log(states, "partner info modal states"); // TEMP
+  if (!states.open)
+    return h("div", null);
+  return (h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: false, label: states.isExistingPartner
+      ? text.modalHeaderExistingPartner
+      : text.modalHeader, "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(PartnerInfoModalContentView, Object.assign({}, props))));
 }

package/dist/collection/components/sqm-partner-info-modal/sqm-partner-info-modal.js

@@ -4,7 +4,7 @@ import { Component, Prop, h } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { parseStates } from "../../utils/parseStates";
 import { getProps } from "../../utils/utils";
-import { PartnerInfoModalView, } from "./sqm-partner-info-modal-view";
+import { PartnerInfoModalContentView, PartnerInfoModalView, } from "./sqm-partner-info-modal-view";
 import { usePartnerInfoModal, } from "./usePartnerInfoModal";
 /**
  * @uiName Partner Info Modal
@@ -89,6 +89,11 @@ export class PartnerInfoModal {
      * @uiWidget textArea
      */
     this.missingFieldsErrorText = "Please select both a country and currency.";
+    /**
+     * Used to render in another modal.
+     * @undocumented
+     */
+    this.inModal = false;
     /**
      * @undocumented
      * @componentState { "title": "New partner", "props": { "states": { "open": true, "isExistingPartner": false } } }
@@ -103,10 +108,12 @@ export class PartnerInfoModal {
     return getProps(this);
   }
   render() {
-    // AL: TODO add usePartnerInfoModal
     const props = isDemo()
       ? useDemoPartnerInfoModal(this)
       : usePartnerInfoModal(this);
+    if (this.inModal) {
+      return h(PartnerInfoModalContentView, Object.assign({}, props));
+    }
     return h(PartnerInfoModalView, Object.assign({}, props));
   }
   static get is() { return "sqm-partner-info-modal"; }
@@ -427,6 +434,27 @@ export class PartnerInfoModal {
       "reflect": false,
       "defaultValue": "\"Please select both a country and currency.\""
     },
+    "inModal": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }],
+        "text": "Used to render in another modal."
+      },
+      "attribute": "in-modal",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "stateController": {
       "type": "string",
       "mutable": false,

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

@@ -19,6 +19,11 @@ export class WidgetVerification {
     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                     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
@@ -235,40 +240,56 @@ export class WidgetVerification {
     };
     const sheet = createStyleSheet(style);
     const styleString = sheet.toString();
-    const generalText = this.getStepTextProps("general_");
-    // AL: should probably include this in the jsx and wrap the entire flow in dialog
-    if (props.showPartnerModal) {
-      return (h("sqm-partner-info-modal", Object.assign({}, this.getStepTextProps("createPartnerStep_"))));
-    }
+    // 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)));
+      }
+      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("style", { type: "text/css" }, styleString),
-      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("sl-dialog", { class: sheet.classes.Dialog, noHeader: false, open: props.showCode, label: "Let's get your started for rewards", "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("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps(props, "sqm-code-verification_"))))) : props.showPartnerModal ? (h("sqm-partner-info-modal", Object.assign({}, this.getStepTextProps("createPartnerStep_")))) : (h("sl-dialog", { class: sheet.classes.Dialog, noHeader: false, open: !props.showCode, label: "Let's get your started for rewards", "onSl-request-close": (e) => {
+      h("sl-dialog", { class: sheet.classes.Dialog, noHeader: false, 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("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps(props, "sqm-email-verification_")))))));
+        } }, 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,