@saasquatch/mint-components 1.15.0-43 → 1.15.0-44

package/dist/collection/components/sqm-portal-login/PortalLogin.stories.js

@@ -48,13 +48,18 @@ const loadingProps = {
     pageLabel: "Sign in to your account",
   },
 };
-export const Default = () => (h("sqm-portal-login", { demoData: { ...defaultProps } }));
-export const IsGoogle = () => (h(PortalLoginView, Object.assign({}, defaultProps, { content: {
+const googleProps = {
+  ...defaultProps,
+  content: {
     secondaryButton: (h("span", null,
       "Don't have an account?",
       " ",
       h("sl-button", { style: { width: "50px" }, size: "large", type: "text" }, "Register"))),
     googleButton: h("sl-button", null, "Sign in with Google"),
-  } })));
-export const LoginWithError = () => h(PortalLoginView, Object.assign({}, errorProps));
-export const LoginLoading = () => h(PortalLoginView, Object.assign({}, loadingProps));
+  },
+};
+export const Default = () => (h("sqm-portal-login", { demoData: { ...defaultProps } }));
+export const Text = () => h(PortalLoginView, Object.assign({}, defaultProps));
+export const IsGoogle = () => (h("sqm-portal-login", { demoData: { ...googleProps } }));
+export const LoginWithError = () => (h("sqm-portal-login", { demoData: { ...errorProps } }));
+export const LoginLoading = () => (h("sqm-portal-login", { demoData: { ...loadingProps } }));

package/dist/collection/components/sqm-portal-login/sqm-portal-login.js

@@ -87,7 +87,7 @@ export class PortalLogin {
       googleButton: null,
       secondaryButton: (h("slot", { name: "secondaryButton" },
         h("style", null, styleString),
-        h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.registerPath) }, this.registerLabel))),
+        h("sl-button", { exportparts: "base: secondarybutton-base", type: "text", disabled: states.loading, onClick: () => navigation.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,

package/dist/collection/components/sqm-portal-register/sqm-portal-register.js

@@ -10,7 +10,7 @@ import { usePortalRegister } from "./usePortalRegister";
  */
 export class PortalRegister {
   constructor() {
-    this.ignored = true;
+    this.ignored = false;
     /**
      * Redirect participants to this page from their verification email
      *
@@ -151,7 +151,6 @@ export class PortalRegister {
     return (h(PortalRegisterView, { states: states, callbacks: callbacks, content: content, refs: refs }));
   }
   static get is() { return "sqm-portal-register"; }
-  static get encapsulation() { return "shadow"; }
   static get properties() { return {
     "nextPage": {
       "type": "string",

package/dist/collection/components/sqm-portal-registration-form/PortalRegistrationForm.stories.js

@@ -3,6 +3,7 @@ import { PortalRegistrationFormView, } from "./sqm-portal-registration-form-view
 export default {
   title: "Components/Microsite Portal Register",
 };
+// TODO: Figure out if we can delete this component and it's stories since we have a duplicate
 const defaultProps = {
   states: {
     error: "",

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

@@ -54,12 +54,6 @@ export class ReferralCard {
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingLeft = "large";
-    /**
-     * @uiName Background color
-     * @uiWidget color
-     * @uiType string
-     */
-    this.backgroundColor = "#ffffff";
     /**
      * @uiName Limit width
      * @uiType boolean
@@ -267,7 +261,7 @@ export class ReferralCard {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "text": "Background color",
@@ -282,8 +276,7 @@ export class ReferralCard {
         "text": ""
       },
       "attribute": "background-color",
-      "reflect": false,
-      "defaultValue": "\"#ffffff\""
+      "reflect": false
     },
     "borderColor": {
       "type": "string",

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-rewards-cell.js

@@ -60,7 +60,7 @@ export class ReferralTableRewardsCell {
           textAlign: "center",
           maxWidth: "170px",
           whiteSpace: "pre-line",
-          background: "var(--sqm-informative-color-background)",
+          background: "var(--sqm-informative-color-icon)",
           color: "var(--sqm-informative-color-text)",
         },
       },
@@ -70,7 +70,7 @@ export class ReferralTableRewardsCell {
           textAlign: "center",
           maxWidth: "170px",
           whiteSpace: "pre-line",
-          background: "var(--sqm-danger-color-background)",
+          background: "var(--sqm-danger-color-icon)",
           color: "var(--sqm-danger-color-text)",
         },
       },
@@ -80,7 +80,7 @@ export class ReferralTableRewardsCell {
           textAlign: "center",
           maxWidth: "170px",
           whiteSpace: "pre-line",
-          background: "var(--sqm-warning-color-background)",
+          background: "var(--sqm-warning-color-icon)",
           color: "var(--sqm-warning-color-text)",
         },
       },
@@ -90,7 +90,7 @@ export class ReferralTableRewardsCell {
           textAlign: "center",
           maxWidth: "170px",
           whiteSpace: "pre-line",
-          background: "var(--sqm-success-color-background)",
+          background: "var(--sqm-success-color-icon)",
           color: "var(--sqm-success-color-text)",
         },
       },

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-status-cell.js

@@ -13,7 +13,7 @@ const style = {
       textAlign: "center",
       maxWidth: "170px",
       whiteSpace: "pre-line",
-      background: "var(--sqm-informative-color-background)",
+      background: "var(--sqm-informative-color-icon)",
       color: "var(--sqm-informative-color-text)",
     },
   },
@@ -24,7 +24,7 @@ const style = {
       textAlign: "center",
       maxWidth: "170px",
       whiteSpace: "pre-line",
-      background: "var(--sqm-danger-color-background)",
+      background: "var(--sqm-danger-color-icon)",
       color: "var(--sqm-danger-color-text)",
     },
   },
@@ -35,7 +35,7 @@ const style = {
       textAlign: "center",
       maxWidth: "170px",
       whiteSpace: "pre-line",
-      background: "var(--sqm-warning-color-background)",
+      background: "var(--sqm-warning-color-icon)",
       color: "var(--sqm-warning-color-text)",
     },
   },
@@ -46,7 +46,7 @@ const style = {
       textAlign: "center",
       maxWidth: "170px",
       whiteSpace: "pre-line",
-      background: "var(--sqm-success-color-background)",
+      background: "var(--sqm-success-color-icon)",
       color: "var(--sqm-success-color-text)",
     },
   },

package/dist/collection/components/sqm-referred-registration/sqm-referred-registration.js

@@ -9,7 +9,7 @@ import { EmailRegistrationView, } from "../views/email-registration-view";
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqb-program-section","sqb-conditional-section"]
  * @compatibility Built for instant access
  * @exampleGroup Instant Access
- * @example Instant Access Friend Registration - <sqm-referred-registration></sqm-referred-registration>
+ * @example Friend Registration - <sqm-referred-registration></sqm-referred-registration>
  * @slots [{"name":"top","title":"Top Content"},{"name":"bottom","title":"Bottom Content"}]
  */
 export class ReferredRegistration {

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.js

@@ -495,7 +495,7 @@ export function RewardExchangeView(props) {
             ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (h("div", null, input)),
             h("div", { class: "space" }))),
         h("div", { class: sheet.classes.Button },
-          h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
+          h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "secondary", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
           h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
   function confirmation() {

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-status-cell.js

@@ -18,7 +18,7 @@ const style = {
       fontSize: "var(--sl-font-size-small)",
       textAlign: "center",
       whiteSpace: "pre-line",
-      background: "var(--sqm-informative-color-background)",
+      background: "var(--sqm-informative-color-icon)",
       color: "var(--sqm-informative-color-text)",
     },
   },
@@ -28,7 +28,7 @@ const style = {
       fontSize: "var(--sl-font-size-small)",
       textAlign: "center",
       whiteSpace: "pre-line",
-      background: "var(--sqm-danger-color-background)",
+      background: "var(--sqm-danger-color-icon)",
       color: "var(--sqm-danger-color-text)",
     },
   },
@@ -38,7 +38,7 @@ const style = {
       fontSize: "var(--sl-font-size-small)",
       textAlign: "center",
       whiteSpace: "pre-line",
-      background: "var(--sqm-warning-color-background)",
+      background: "var(--sqm-warning-color-icon)",
       color: "var(--sqm-warning-color-text)",
     },
   },
@@ -48,7 +48,7 @@ const style = {
       fontSize: "var(--sl-font-size-small)",
       textAlign: "center",
       whiteSpace: "pre-line",
-      background: "var(--sqm-success-color-background)",
+      background: "var(--sqm-success-color-icon)",
       color: "var(--sqm-success-color-text)",
     },
   },
@@ -201,21 +201,8 @@ export class RewardTableStatusCell {
       : rewardStatus === "DENIED"
         ? this.deniedText
         : null;
-    const getBadgeCSSClass = (badgeType) => {
-      console.log("badgeType", badgeType);
-      // switch (badgeType) {
-      //   case "primary":
-      //     return sheet.classes.RedeemBadge;
-      //   case "danger":
-      //     return sheet.classes.DangerBadge;
-      //   case "success":
-      //     return sheet.classes.SuccessBadge;
-      //   case "warning":
-      //   case "info":
-      //     return sheet.classes.WarningBadge;
-      //   default:
-      //     return sheet.classes.WarningBadge;
-      // }
+    // AL: badgeType arg? TODO
+    const getBadgeCSSClass = (rewardStatus) => {
       switch (rewardStatus) {
         case "AVAILABLE":
           return sheet.classes.SuccessBadge;
@@ -232,13 +219,7 @@ export class RewardTableStatusCell {
     const badgeCSSClass = getBadgeCSSClass(badgeType);
     return (h("div", { style: { display: "contents" } },
       h("style", { type: "text/css" }, styleString),
-      h("sl-badge", { type: badgeType, pill: true, 
-        // class={
-        //   rewardStatus === "REDEEMED" || rewardStatus === "PAYOUT_APPROVED"
-        //     ? sheet.classes.RedeemBadge
-        //     : sheet.classes.Badge
-        // }
-        class: badgeCSSClass }, statusText),
+      h("sl-badge", { type: badgeType, pill: true, class: badgeCSSClass }, statusText),
       h("p", { class: sheet.classes.Date }, fraudStatusText ||
         pendingReasons ||
         this.getPayoutStatusText(rewardStatus) ||

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-note-column.js

@@ -2,10 +2,10 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Method, Prop } from "@stencil/core";
 import { useRequestRerender } from "../../../tables/re-render";
 /**
- * @uiName Reward Table Customer Note Column
+ * @uiName Rewards Table Customer Note Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Customer Note Column - <sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column>
+ * @example Customer Note Column - <sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column>
  */
 export class RewardTableCustomerNoteColumn {
   constructor() {

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.js

@@ -2,10 +2,10 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Method, Prop } from "@stencil/core";
 import { useRequestRerender } from "../../../tables/re-render";
 /**
- * @uiName Reward Table Source Column
+ * @uiName Rewards Table Source Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Source Column - <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-rext="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column>
+ * @example Source Column - <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-rext="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column>
  */
 export class RewardTableUserColumn {
   constructor() {

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.js

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Reward Table Status Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Status Column - <sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is current being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward approved for payout and was scheduled for payment based on your settings." ></sqm-rewards-table-status-column>
+ * @example Status Column - <sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is current being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward approved for payout and was scheduled for payment based on your settings." ></sqm-rewards-table-status-column>
  */
 export class RewardTableStatusColumn {
   constructor() {

package/dist/collection/components/sqm-share-button/sqm-share-button.js

@@ -15,12 +15,12 @@ import deepmerge from "deepmerge";
  * @example Facebook Share Button - <sqm-share-button medium="facebook">Share on Facebook</sqm-share-button>
  * @example X Share Button - <sqm-share-button medium="twitter">Share via X</sqm-share-button>
  * @example Email Share Button - <sqm-share-button medium="email">Share via Email</sqm-share-button>
- * @example Web Share Sheet Share Button - <sqm-share-button medium="direct">Share</sqm-share-button>
+ * @example Mobile Share Sheet Button - <sqm-share-button medium="direct">Share</sqm-share-button>
  * @example LinkedIn Share Button - <sqm-share-button medium="linkedin">Share on LinkedIn</sqm-share-button>
  * @example SMS Share Button - <sqm-share-button medium="sms">Text a friend</sqm-share-button>
- * @example Facebook Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
+ * @example Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
  * @example WhatsApp Share Button - <sqm-share-button medium="whatsapp">Share via WhatsApp</sqm-share-button>
- * @example Line Messenger Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
+ * @example LINE Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
  * @example Pinterest Share Button - <sqm-share-button medium="pinterest">Share on Pinterest</sqm-share-button>
  */
 export class ShareButton {

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

@@ -1,12 +1,10 @@
-import { useState, withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Host } from "@stencil/core";
+import { Component, State, h, Host } from "@stencil/core";
 import * as Themes from "./Themes";
+const LOCAL_STORAGE_BRAND_KEY = "localStorageBrandKey";
+const LOCAL_STORAGE_BRAND_CONFIG_KEY = "localStorageBrandConfigKey";
 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.selectedBrand = "Netflix";
     this.brands = [
       {
         name: "Netflix",
@@ -25,19 +23,37 @@ export class SqmBrandSelector {
         logoUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803168/pngimg.com_-_google_PNG19644_jvypwl.png",
       },
     ];
-    withHooks(this); // Initialize hooks for this component instance
+    const storedBrand = localStorage.getItem(LOCAL_STORAGE_BRAND_KEY);
+    const initialBrandName = storedBrand;
+    this.selectedBrand = initialBrandName;
+    // Initialize window.SquatchBrandingConfig based on the loaded brand
+    const initialConfig = Themes[initialBrandName] || Themes.Netflix;
+    window.SquatchBrandingConfig = initialConfig;
+    const event = new CustomEvent("brandingConfigUpdated", {
+      detail: window.SquatchBrandingConfig,
+    });
+    window.dispatchEvent(event);
+  }
+  componentDidLoad() {
+    const storedBrand = localStorage.getItem(LOCAL_STORAGE_BRAND_KEY);
+    const initialBrandName = storedBrand;
+    this.selectedBrand = initialBrandName;
   }
   disconnectedCallback() { }
-  // Handler function for when a brand logo is clicked
-  // private handleBrandClick = (brandName: string) => {
-  // };
+  updateBrand(brandName) {
+    this.selectedBrand = brandName;
+    const configToSet = Themes[brandName] || Themes.Netflix;
+    const brandConfigString = JSON.stringify(configToSet);
+    localStorage.setItem(LOCAL_STORAGE_BRAND_KEY, brandName);
+    localStorage.setItem(LOCAL_STORAGE_BRAND_CONFIG_KEY, brandConfigString);
+    window.SquatchBrandingConfig = configToSet;
+    window.location.reload();
+    const event = new CustomEvent("brandingConfigUpdated", {
+      detail: window.SquatchBrandingConfig,
+    });
+    window.dispatchEvent(event);
+  }
   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');
@@ -52,13 +68,15 @@ export class SqmBrandSelector {
             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;
+            max-width: 350px;
             overflow: hidden;
-            padding: 20px 10px;
-            position: absolute;
-            top: 0;
+            padding: 10px;
+            position: fixed;
+            bottom: 0;
             right: 0;
             z-index: 999999;
+            border: 1px solid #ccc;
+            margin: 10px;
           }
 
           .card-heading {
@@ -68,6 +86,7 @@ export class SqmBrandSelector {
             padding-bottom: 10px;
             color: black;
             margin: 0;
+            font-size: 16px;
           }
 
           .segmented-control-container {
@@ -87,7 +106,7 @@ export class SqmBrandSelector {
             align-items: center;
             justify-content: center;
             flex: 1;
-            padding 4px 8px
+            padding: 0px 8px; 
             cursor: pointer;
             transition: all 300ms ease-in-out;
             border-radius: 9999px;
@@ -164,16 +183,16 @@ export class SqmBrandSelector {
               }
           }
           `),
-      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("div", { class: "segmented-control-container" }, this.brands.map((brand) => (h("div", { key: brand.name, class: `brand-segment ${this.selectedBrand === brand.name ? "active" : ""}`, onClick: () => this.updateBrand(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"; }
+  static get states() { return {
+    "selectedBrand": {}
+  }; }
 }