@saasquatch/mint-components 1.15.0-40 → 1.15.0-41

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

@@ -37,18 +37,26 @@ function useTemplateChildren({ parent, callback }) {
 const WidgetVerificationController = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * @componentState { "title": "Not Verified", "slot": "not-verified", "props": { "isAuth": false } }
+     * @componentState { "title": "Verified", "slot": "verified", "props": { "isAuth": true } }
+     */
+    this.stateController = "{}";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
+    var _a;
     const [context, setContext] = index_module.In({
       namespace: keys.VERIFICATION_PARENT_NAMESPACE,
       initialValue: false,
     });
+    const props = JSON.parse(this.stateController);
+    const demoIsAuth = index_module.isDemo() && ((_a = props["sqm-widget-verification-controller"]) === null || _a === void 0 ? void 0 : _a.isAuth);
     const [container, setContainer] = stencilHooks_module.useState(undefined);
     const [slot, setSlot] = stencilHooks_module.useState(undefined);
     const updateTemplates = index_module.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) {
@@ -96,7 +104,7 @@ const WidgetVerificationController = class {
           target.style.height = "25px";
         });
       }
-    }, [container, slot, context]);
+    }, [container, slot, context, demoIsAuth]);
     stencilHooks_module.useEffect(() => {
       if (!container || !slot) {
         debug("DOM not ready:");
@@ -105,7 +113,7 @@ const WidgetVerificationController = class {
       // Run on first render
       updateTemplates();
       return useTemplateChildren({ parent: slot, callback: updateTemplates });
-    }, [slot, container, context]);
+    }, [slot, container, context, demoIsAuth]);
     return (index.h(index.Host, null, index.h("div", { ref: setSlot, style: { display: "contents" } }, index.h("slot", { name: "not-verified" }), index.h("slot", { name: "verified" })), index.h("div", { ref: setContainer }, index.h("slot", { name: "shown" }))));
   }
 };

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

@@ -5,7 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
 const index_module = require('./index.module-ee84433d.js');
+const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
+const parseStates = require('./parseStates-d1effc19.js');
 const extractProps = require('./extractProps-fd93ba62.js');
 const keys = require('./keys-cff24974.js');
 
@@ -163,6 +165,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 }, "dependencies": ["sqm-email-verification"] }
+     * @componentState { "title": "Code Step", "props": { "showCode": true }, "dependencies": ["sqm-code-verification"] }
+     */
+    this.stateController = "{}";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -171,20 +178,20 @@ const WidgetVerification = class {
     return extractProps.extractProps(props, prefix);
   }
   render() {
-    const { showCode, onVerification, loading } = index_module.isDemo()
-      ? useDemoWidgetVerificationInternal()
+    const props = index_module.isDemo()
+      ? useDemoWidgetVerificationInternal(this)
       : useWidgetVerification();
-    if (loading)
+    if (props.loading)
       return index.h("sl-spinner", null);
     const generalText = this.getStepTextProps("general_");
     return (index.h("div", null, index.h("h3", { style: { fontSize: "24px", margin: "0" } }, generalText.verifyEmailHeader), index.h("p", { style: {
         color: "var(--sl-color-neutral-500)",
         fontSize: "var(--sl-font-size-medium)",
         margin: "0",
-      } }, generalText.verifyEmailDescription), showCode ? (index.h("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_")))) : (index.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))))));
+      } }, generalText.verifyEmailDescription), props.showCode ? (index.h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps.extractProps(props, "sqm-code-verification_")))) : (index.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps.extractProps(props, "sqm-email-verification_"))))));
   }
 };
-function useDemoWidgetVerificationInternal() {
+function useDemoWidgetVerificationInternal(props) {
   const [showCode, setShowCode] = index_module.In({
     namespace: keys.SHOW_CODE_NAMESPACE,
     initialValue: false,
@@ -194,10 +201,14 @@ function useDemoWidgetVerificationInternal() {
     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 { showCode, onVerification, loading: false };
+  return cjs.cjs({ showCode, onVerification, loading: false }, formatted || {}, { arrayMerge: (_, a) => a });
 }
 
 exports.sqm_widget_verification = WidgetVerification;

package/dist/cjs/{usePayoutStatus-4b5894ef.js → usePayoutStatus-feeac99b.js}

@@ -986,17 +986,20 @@ const GET_USER_STATUS = index_module.dist.gql `
   }
 `;
 function getStatus(data) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   const account = (_b = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.payoutsAccount;
   if (!((_d = (_c = data.user) === null || _c === void 0 ? void 0 : _c.impactConnection) === null || _d === void 0 ? void 0 : _d.connected) || !account)
     return "INFORMATION_REQUIRED";
-  if ((_e = account.holdReasons) === null || _e === void 0 ? void 0 : _e.includes("IDV_CHECK_REQUIRED"))
+  if (((_e = account.holdReasons) === null || _e === void 0 ? void 0 : _e.length) === 1 && ((_f = account.holdReasons) === null || _f === void 0 ? void 0 : _f.includes("NEW_PAYEE_REVIEW"))) {
+    return "DONE";
+  }
+  if ((_g = account.holdReasons) === null || _g === void 0 ? void 0 : _g.includes("IDV_CHECK_REQUIRED"))
     return "VERIFICATION:REQUIRED";
-  if ((_f = account.holdReasons) === null || _f === void 0 ? void 0 : _f.includes("IDV_CHECK_REQUIRED_INTERNAL"))
+  if ((_h = account.holdReasons) === null || _h === void 0 ? void 0 : _h.includes("IDV_CHECK_REQUIRED_INTERNAL"))
     return "VERIFICATION:INTERNAL";
-  if ((_g = account.holdReasons) === null || _g === void 0 ? void 0 : _g.includes("IDV_CHECK_REVIEW_INTERNAL"))
+  if ((_j = account.holdReasons) === null || _j === void 0 ? void 0 : _j.includes("IDV_CHECK_REVIEW_INTERNAL"))
     return "VERIFICATION:REVIEW";
-  if ((_h = account.holdReasons) === null || _h === void 0 ? void 0 : _h.includes("IDV_CHECK_FAILED_INTERNAL"))
+  if ((_k = account.holdReasons) === null || _k === void 0 ? void 0 : _k.includes("IDV_CHECK_FAILED_INTERNAL"))
     return "VERIFICATION:FAILED";
   if (account.hold)
     return "HOLD";

package/dist/cjs/utils-ce18d1bc.js

@@ -0,0 +1,105 @@
+'use strict';
+
+const index = require('./index-a29c60ef.js');
+const global = require('./global-d62c5561.js');
+const JSS = require('./JSS-8503a151.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 = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+const LoadingView = () => {
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("sl-skeleton", { class: sheet.classes.TitleSkeleton }),
+    index.h("div", { class: sheet.classes.HeaderContainer },
+      index.h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+      index.h("sl-skeleton", { class: sheet.classes.HeaderSkeleton })),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+    index.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 global.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,
+  };
+}
+
+exports.LoadingView = LoadingView;
+exports.formatErrorMessage = formatErrorMessage;
+exports.getCountryObj = getCountryObj;
+exports.objectIsFull = objectIsFull;
+exports.taxTypeToName = taxTypeToName;
+exports.validTaxDocument = validTaxDocument;
+exports.validateBillingField = validateBillingField;

package/dist/collection/collection-manifest.json

@@ -105,6 +105,7 @@
     "./components/sqm-share-code/sqm-share-code.js",
     "./components/sqm-share-link/sqm-share-link.js",
     "./components/sqm-stat-container/sqm-stat-container.js",
+    "./components/sqm-stencilbook/BrandSelector.js",
     "./components/sqm-stencilbook/sqm-stencilbook.js",
     "./components/sqm-tab/sqm-tab.js",
     "./components/sqm-table-cell/sqm-table-cell.js",

package/dist/collection/components/sqm-instant-access-registration/sqm-instant-access-registration.js

@@ -100,7 +100,7 @@ export class InstantAccessRegistration {
      * @uiGroup Card style
      * @uiType string
      */
-    this.backgroundColor = "#ffffff";
+    this.backgroundColor = "var(--sqm-portal-background)";
     /**
      * @undocumented
      * @uiType boolean
@@ -494,7 +494,7 @@ export class InstantAccessRegistration {
       },
       "attribute": "background-color",
       "reflect": false,
-      "defaultValue": "\"#ffffff\""
+      "defaultValue": "\"var(--sqm-portal-background)\""
     },
     "includeCookies": {
       "type": "boolean",

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step-view.js

@@ -10,9 +10,9 @@ export function ProgramExplainerStepView(props) {
       lineHeight: "var(--sl-line-height-dense)",
       borderRadius: props.borderRadius
         ? `${props.borderRadius}px`
-        : "var(--sl-border-radius-large)",
+        : "var(--sqm-border-radius-normal)",
       color: props.textColor || "var(--sqm-text)",
-      background: props.backgroundColor || "var(--sl-color-primary-50)",
+      background: props.backgroundColor || "var(--sqm-accent-color-background)",
       "@media (max-width: 499px)": {
         flexDirection: "row",
         width: "auto",
@@ -48,7 +48,7 @@ export function ProgramExplainerStepView(props) {
       objectFit: "cover",
       userSelect: "none",
       background: props.iconBackgroundColor || "var(--sl-color-white)",
-      color: props.iconColor || "var(--sl-color-primary-500)",
+      color: props.iconColor || "var(--sqm-accent-color-icon)",
       fontSize: "26px",
       textAlign: "center",
       lineHeight: "72px",

package/dist/collection/components/sqm-referral-card/sqm-referral-card-view.js

@@ -8,9 +8,9 @@ const vanillaStyle = `
 export function ReferralCardView(props) {
   const style = {
     Container: {
-      borderRadius: props.borderRadius || "var(--sl-border-radius-large)",
+      borderRadius: props.borderRadius || "var(--sqm-border-radius-normal)",
       color: props.textColor || "var(--sqm-text)",
-      background: props.backgroundColor || "var(--sl-color-neutral-0)",
+      background: props.backgroundColor || "var(--sqm-portal-background)",
       display: "flex",
       flexDirection: "column",
       rowGap: "var(--sl-spacing-large)",
@@ -36,7 +36,7 @@ export function ReferralCardView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const borderColor = props.borderColor || "var(--sl-color-neutral-300)";
+  const borderColor = props.borderColor || "var(--sqm-border-color)";
   return (h("div", { part: "sqm-base", class: sheet.classes.Container, style: {
       border: `${props.hideBorder ? "none" : "1px solid " + borderColor}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,

package/dist/collection/components/sqm-stencilbook/BrandSelector.js

@@ -0,0 +1,179 @@
+import { useState, withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host } from "@stencil/core";
+import * as Themes from "./Themes";
+export class SqmBrandSelector {
+  // State to keep track of the currently selected brand
+  // Array of brand objects, each containing a name and an image URL.
+  // Using placeholder images for now. In a real application, you would
+  // replace these with actual logo URLs or local assets.
+  constructor() {
+    this.brands = [
+      {
+        name: "Netflix",
+        logoUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803365/netflix_ftjbrr.png",
+      },
+      {
+        name: "Amazon",
+        logoUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803366/amazon_mc22fr.png",
+      },
+      {
+        name: "Spotify",
+        logoUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803510/spotify_j5qi1r.png",
+      },
+      {
+        name: "Google",
+        logoUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803168/pngimg.com_-_google_PNG19644_jvypwl.png",
+      },
+    ];
+    withHooks(this); // Initialize hooks for this component instance
+  }
+  disconnectedCallback() { }
+  // Handler function for when a brand logo is clicked
+  // private handleBrandClick = (brandName: string) => {
+  // };
+  render() {
+    const [selectedBrand, setSelectedBrand] = useState("Default");
+    const themes = Object.keys(Themes);
+    const theme = Themes[selectedBrand];
+    const handleBrandClick = (brandName) => {
+      setSelectedBrand(brandName);
+    };
+    return (h(Host, null,
+      h("style", null, `
+          @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+
+          :host {
+            display: block; /* Ensure the custom element itself is a block-level element */
+            font-family: 'Inter', sans-serif;
+          }
+
+          .card-container {
+            background-color: #fff !important; 
+            border-radius: 18px; 
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); 
+            width: 100%;
+            max-width: 500px;
+            overflow: hidden;
+            padding: 20px 10px;
+            position: absolute;
+            top: 0;
+            right: 0;
+            z-index: 999999;
+          }
+
+          .card-heading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-bottom: 10px;
+            color: black;
+            margin: 0;
+          }
+
+          .segmented-control-container {
+            display: flex;
+            background-color: #e5e7eb !important; 
+            border-radius: 9999px; 
+            padding: 0.25rem; 
+            margin-left: auto;
+            margin-right: auto;
+            max-width: 28rem;
+            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); 
+          }
+
+          .brand-segment {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            flex: 1;
+            padding 4px 8px
+            cursor: pointer;
+            transition: all 300ms ease-in-out;
+            border-radius: 9999px;
+            color: #4b5563; 
+            cursor: pointer;
+          }
+
+          .brand-segment:hover {
+            background-color: #f3f4f6 !important;
+          }
+
+          .brand-segment.active {
+            background-color: #fff !important;
+            color: #1f2937; 
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+          }
+
+          .brand-logo {
+            height: 40px;
+            width: 40px; 
+            object-fit: contain;
+          }
+
+          .brand-name {
+            font-size: 0.75rem; 
+            line-height: 1rem; 
+            font-weight: 600; 
+            color: #4b5563;
+          }
+
+          .brand-segment.active .brand-name {
+            color: #1f2937; 
+          }
+
+          .content-area {
+            padding: 2rem; 
+          }
+
+          .selected-text {
+            color: #4b5563; 
+            text-align: center;
+            font-size: 1.125rem; 
+            line-height: 1.75rem; 
+          }
+
+          .selected-brand-name {
+            font-weight: 700; /* font-bold */
+            color: #6d28d9; /* text-purple-700 */
+          }
+
+          .dynamic-content-box {
+            margin-top: 1.5rem; /* mt-6 */
+            padding: 1rem; /* p-4 */
+            background-color: #f9fafb; /* bg-gray-50 */
+            border-radius: 0.5rem; /* rounded-lg */
+            color: #374151; /* text-gray-700 */
+            font-size: 0.875rem; /* text-sm */
+            line-height: 1.25rem; /* text-sm */
+            font-style: italic;
+          }
+
+          /* Responsive adjustments for smaller screens if needed */
+          @media (max-width: 640px) {
+              .segmented-control-container {
+                  max-width: 100%; /* Allows it to take full width on small screens */
+                  padding: 0.15rem; /* Slightly less padding */
+              }
+              .brand-segment {
+                  padding-left: 0.5rem;
+                  padding-right: 0.5rem;
+              }
+              .brand-logo {
+                  height: 1.8rem; /* Slightly smaller on mobile */
+              }
+          }
+          `),
+      h("style", null, theme),
+      h("div", { class: "card-container" },
+        h("h2", { class: "card-heading" }, "Select Branding"),
+        h("div", { class: "segmented-control-container" }, this.brands.map((brand) => (
+        // Individual brand segment/pill
+        h("div", { key: brand.name, class: `brand-segment ${selectedBrand === brand.name ? "active" : ""}`, onClick: () => handleBrandClick(brand.name) },
+          h("img", { src: brand.logoUrl, alt: `${brand.name} Logo`, class: "brand-logo", onError: (e) => {
+              e.target.src =
+                "https://placehold.co/80x40/cccccc/000000?text=Logo";
+            } }))))))));
+  }
+  static get is() { return "sqm-brand-selector"; }
+}

package/dist/collection/components/sqm-stencilbook/Themes.js

@@ -9,36 +9,40 @@
  *  - Shoelace color generator: https://codepen.io/claviska/full/QWveRgL
  *
  */
-import { autoColorScaleCss } from "./AutoColor";
 //
 export const Default = `
  // No CSS
 `;
-export const Orangey = `
-:root{
-    ${autoColorScaleCss("orange")}
-}
-`;
 export const Netflix = `
 :root{
-    ${autoColorScaleCss("#e50914")}
-}
+    --sqm-portal-background: #101010 !important;
+      --sqm-text: white;
+
+          --sqm-accent-color-icon: #E50914;
+    }
 `;
-export const SaaSquatchCorporate = `
+export const Amazon = `
 :root{
-    ${autoColorScaleCss("#65bd60")}
-    --sl-font-sans: Arial;
+    --sqm-portal-background: #ffffff !important;
+    --sqm-text: #2f2f2f;
+    --sqm-border-color: #d5d9d9;
+
+    --sqm-accent-color-icon: #FF9900;
 }
 `;
-export const NYTimes = `
+export const Spotify = `
 :root{
-    ${autoColorScaleCss("black")}
-    --sl-font-sans: Georgia, 'Times New Roman', serif;
+    --sqm-portal-background: #121212 !important;
+      --sqm-text: white;
 }
 `;
-export const Klip = `
+export const Google = `
 :root{
-    ${autoColorScaleCss("#4225C4")};
-}
+    --sqm-portal-background: #ffffff !important;
+    --sqm-text: #212124;
+    --sqm-border-color: #E0E0E0;
 
+        --sqm-accent-color-icon: #4285F4;
+    
+}
 `;