@saasquatch/mint-components 1.11.1-0 → 1.12.0-0

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

@@ -21,21 +21,6 @@ const sharebutton = (slot) => {
       h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
       h("sqm-share-button", { medium: "twitter" }, "Post about us on X"))));
 };
-const shareButtonsWithPromoCodes = (slot) => {
-  return (h("sqm-portal-container", { gap: "large", slot: slot },
-    h("sqm-text", null, "Choose how you want to share:"),
-    h("sqm-text", null,
-      h("sub", null, "Share with your friends:"),
-      h("sqm-share-code", null),
-      h("sqm-share-link", null)),
-    h("sqm-portal-container", { gap: "x-small" },
-      h("sqm-share-button", { medium: "email" }, "Share via email"),
-      h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
-      h("sqm-share-button", { medium: "twitter" }, "Post about us on X"),
-      h("sqm-portal-container", { gap: "x-small" },
-        h("span", { style: { textAlign: "center", color: "var(--sl-color-gray-500)" } }, "You have copied this code before"),
-        h("sqm-pagination", null)))));
-};
 const timeline = (slot, count) => {
   return (h("sqm-timeline", { slot: slot, icon: "circle" },
     count > 0 && (h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" })),
@@ -58,11 +43,6 @@ export const TimelineAndShareButtons = () => {
     timeline("left", 3),
     sharebutton("right")));
 };
-export const OneTimeUsePromoCodes = () => {
-  return (h("sqm-referral-card", null,
-    timeline("left", 4),
-    shareButtonsWithPromoCodes("right")));
-};
 export const StartAlignment = () => {
   return (h("sqm-referral-card", { "vertical-alignment": "start" },
     timeline("left", 4),

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

@@ -1,7 +1,6 @@
-import { useEngagementMedium, useUserIdentity, useQuery, useParentValue, } from "@saasquatch/component-boilerplate";
+import { useEngagementMedium, useUserIdentity, useQuery, } from "@saasquatch/component-boilerplate";
 import { gql } from "graphql-request";
 import { useProgramId, getEnvironmentSDK, } from "@saasquatch/component-boilerplate";
-import { REFERRAL_CODES_NAMESPACE, } from "../sqm-referral-codes/useReferralCodes";
 const MessageLinkQuery = gql `
   query (
     $programId: ID
@@ -39,22 +38,26 @@ function NativeShare(props, directLink, undefinedErrorText, unsupportedPlatformT
     alert(unsupportedPlatformText);
   }
 }
-function FacebookShare(directLink, messageLink, errorText) {
-  if (messageLink === "undefined" || directLink === "undefined") {
+function FacebookShare(directLink, res, errorText) {
+  var _a, _b;
+  if (((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.messageLink) === "undefined" ||
+    directLink === "undefined") {
     return alert(errorText);
   }
   if (typeof SquatchAndroid.shareOnFacebook !== "undefined") {
-    return SquatchAndroid.shareOnFacebook(directLink, messageLink);
+    return SquatchAndroid.shareOnFacebook(directLink, res.data.viewer.messageLink);
   }
   else {
-    return GenericShare(messageLink, errorText);
+    return GenericShare(res, errorText);
   }
 }
-function GenericShare(messageLink, errorText) {
-  return messageLink ? window.open(messageLink) : alert(errorText);
+function GenericShare(res, errorText) {
+  var _a, _b;
+  return ((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.messageLink) ? window.open(res.data.viewer.messageLink)
+    : alert(errorText);
 }
 export function useShareButton(props) {
-  var _a, _b, _c;
+  var _a, _b;
   const { sharetitle, sharetext, medium } = props;
   const programId = props.programId ? props.programId : useProgramId();
   const user = useUserIdentity();
@@ -63,25 +66,23 @@ export function useShareButton(props) {
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
-  const data = useParentValue(REFERRAL_CODES_NAMESPACE);
   // only queries if a programId is available
-  const res = useQuery(MessageLinkQuery, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId || (data === null || data === void 0 ? void 0 : data[medium]) !== undefined);
-  const directLink = ((_a = data === null || data === void 0 ? void 0 : data[medium]) === null || _a === void 0 ? void 0 : _a.shareLink) || ((_c = (_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.viewer) === null || _c === void 0 ? void 0 : _c.shareLink);
+  const res = useQuery(MessageLinkQuery, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const directLink = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink;
   const environment = getEnvironmentSDK();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
     window.orientation === undefined) ||
     (medium.toLocaleUpperCase() === "DIRECT" && !window.navigator.share);
   function onClick() {
-    var _a, _b, _c, _d, _e, _f;
     if (medium.toLocaleUpperCase() === "FACEBOOK" &&
       environment.type === "SquatchAndroid") {
-      FacebookShare(directLink, ((_a = data === null || data === void 0 ? void 0 : data[medium]) === null || _a === void 0 ? void 0 : _a.messageLink) || ((_c = (_b = res.data) === null || _b === void 0 ? void 0 : _b.viewer) === null || _c === void 0 ? void 0 : _c.messageLink), props.errorText);
+      FacebookShare(directLink, res, props.errorText);
     }
     else if (medium.toLocaleUpperCase() === "DIRECT") {
       NativeShare({ sharetitle, sharetext }, directLink, props.errorText, props.unsupportedPlatformText);
     }
     else {
-      GenericShare(((_d = data === null || data === void 0 ? void 0 : data[medium]) === null || _d === void 0 ? void 0 : _d.messageLink) || ((_f = (_e = res.data) === null || _e === void 0 ? void 0 : _e.viewer) === null || _f === void 0 ? void 0 : _f.messageLink), props.errorText);
+      GenericShare(res, props.errorText);
     }
   }
   return { ...props, loading: res.loading, onClick, hide };

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

@@ -210,7 +210,7 @@ export class ShareCode {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; inputPlaceholderText?: string; dateAvailable?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -210,7 +210,7 @@ export class ShareLink {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; inputPlaceholderText?: string; dateAvailable?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-share-link/useShareLink.js

@@ -1,7 +1,6 @@
-import { useEngagementMedium, useMutation, useParentValue, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEngagementMedium, useMutation, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
-import { REFERRAL_CODES_NAMESPACE, } from "../sqm-referral-codes/useReferralCodes";
 const MessageLinkQuery = gql `
   query ($programId: ID, $engagementMedium: UserEngagementMedium!) {
     user: viewer {
@@ -25,10 +24,9 @@ export function useShareLink(props) {
   const { programId = useProgramId() } = props;
   const user = useUserIdentity();
   const engagementMedium = useEngagementMedium();
-  const contextData = useParentValue(REFERRAL_CODES_NAMESPACE);
-  const { data } = useQuery(MessageLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
+  const { data } = useQuery(MessageLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt));
   const [sendLoadEvent] = useMutation(WIDGET_ENGAGEMENT_EVENT);
-  const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) || ((_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink))) !== null && _b !== void 0 ? _b : 
+  const copyString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
   const [open, setOpen] = useState(false);

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

@@ -3,7 +3,6 @@ import { useStencilbook } from "@saasquatch/stencilbook";
 import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import * as ShareButton from "../sqm-share-button/ShareButton.stories";
 import * as EmptyState from "../sqm-empty/EmptyState.stories";
-import * as Pagination from "../sqm-pagination/Pagination.stories";
 import * as ShareLink from "../sqm-share-link/ShareLink.stories";
 import * as BigStat from "../sqm-big-stat/BigStat.stories";
 import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories";
@@ -70,7 +69,6 @@ import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
 import * as Scroll from "../sqm-scroll/Scroll.stories";
 import * as Tabs from "../sqm-tabs/Tabs.stories";
 import * as ShareCode from "../sqm-share-code/ShareCode.stories";
-import * as ReferralCode from "../sqm-referral-code/ReferralCode.stories";
 import * as EmailRegistration from "../views/EmailRegistration.stories";
 import * as CouponCode from "../sqm-coupon-code/CouponCode.stories";
 import * as LogoutCurrentUser from "../sqm-logout-current-user/LogoutCurrentUser.stories";
@@ -85,7 +83,10 @@ import * as BankingInfoForm from "../tax-and-cash/BankingForm.stories";
 import * as InvoiceTable from "../sqm-invoice-table/InvoiceTable.stories";
 import * as InvoiceTableCells from "../sqm-invoice-table/InvoiceTableCell.stories";
 import * as UseInvoiceTableCells from "../sqm-invoice-table/UseInvoiceTable.stories";
-import * as ReferralCodes from "../sqm-referral-codes/ReferralCodes.stories";
+import * as WidgetEmailVerification from "../sqm-widget-verification/sqm-email-verification/WidgetEmailVerification.stories";
+import * as WidgetCodeVerification from "../sqm-widget-verification/sqm-code-verification/WidgetCodeVerification.stories";
+import * as PayoutButtonScroll from "../sqm-payout-button-scroll/PayoutButtonScroll.stories";
+import * as PayoutStatusAlert from "../tax-and-cash/sqm-payout-status-alert/PayoutStatusAlert.stories";
 import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -96,7 +97,6 @@ const stories = [
   InvoiceTableCells,
   UseInvoiceTableCells,
   ShareButton,
-  Pagination,
   ShareLink,
   BigStat,
   Leaderboard,
@@ -165,8 +165,6 @@ const stories = [
   Tabs,
   ShareCode,
   CouponCode,
-  ReferralCode,
-  ReferralCodes,
   LogoutCurrentUser,
   LinkButton,
   EmailRegistration,
@@ -177,6 +175,10 @@ const stories = [
   TaxFormSlots,
   PayoutDetailsCard,
   BankingInfoForm,
+  WidgetEmailVerification,
+  WidgetCodeVerification,
+  PayoutButtonScroll,
+  PayoutStatusAlert,
 ];
 /**
  * For internal documentation

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

@@ -0,0 +1,4 @@
+export const SHOW_CODE_NAMESPACE = "sq:code-verification";
+export const VERIFICATION_EMAIL_NAMESPACE = "sq:verification-email";
+export const VERIFICATION_PARENT_NAMESPACE = "sq:verification-context";
+export const VERIFICATION_EVENT_KEY = "sq:code-verified";

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/WidgetCodeVerification.stories.js

@@ -0,0 +1,29 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Widget Code Verification",
+};
+const defaultProps = {
+  email: "testemail@example.com",
+  loading: false,
+  verifyFailed: false,
+  codeResent: false,
+};
+export const Default = () => (h("sqm-code-verification", { demoData: { states: defaultProps } }));
+export const Loading = () => (h("sqm-code-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      loading: true,
+    },
+  } }));
+export const CodeResent = () => (h("sqm-code-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      codeResent: true,
+    },
+  } }));
+export const VerificationFailed = () => (h("sqm-code-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      verifyFailed: true,
+    },
+  } }));

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

@@ -0,0 +1,118 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../../styling/JSS";
+import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+import { ErrorStyles } from "../../../global/mixins";
+import { intl } from "../../../global/global";
+const style = {
+  Wrapper: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-medium)",
+    maxWidth: "515px",
+  },
+  HeaderContainer: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  InputsContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+    position: "relative",
+    flexDirection: "column",
+  },
+  CodeInputContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+  },
+  CodeInput: {
+    maxWidth: "40px",
+    "&::part(input)": {
+      margin: "0",
+      padding: "0 var(--sl-input-spacing-small)",
+      fontSize: "var(--sl-font-size-large)",
+    },
+  },
+  CodeInputError: {
+    ...ErrorStyles,
+    maxWidth: "40px",
+    "&::part(input)": {
+      margin: "0",
+      padding: "0 var(--sl-input-spacing-small)",
+      fontSize: "var(--sl-font-size-large)",
+    },
+  },
+  ErrorText: {
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-font-size-small)",
+    margin: "0",
+  },
+  ContinueButton: {
+    width: "100%",
+    maxWidth: "100px",
+  },
+  FooterContainer: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  SkeletonOne: {
+    width: "50%",
+    height: "16px",
+  },
+  SkeletonTwo: {
+    width: "30%",
+    height: "34px",
+  },
+  SkeletonThree: {
+    width: "15%",
+    height: "24px",
+  },
+};
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+
+
+`;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function WidgetCodeVerificationView(props) {
+  const { states, refs, callbacks, text } = props;
+  const resendCodeText = intl.formatMessage({
+    id: "resendCodeText",
+    defaultMessage: text.resendCodeText,
+  }, {
+    resendCodeLink: (h("a", { href: text.resendCodeLink, target: "_blank", style: { textDecoration: "none" } }, text.resendCodeLabel)),
+  });
+  const inputClass = states.verifyFailed
+    ? sheet.classes.CodeInputError
+    : sheet.classes.CodeInput;
+  return (h("div", { part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h("div", { class: sheet.classes.Wrapper },
+      h("div", { class: sheet.classes.HeaderContainer },
+        h(TextSpanView, { type: "p" }, states.verifyFailed
+          ? text.reverifyCodeHeaderText
+          : text.verifyCodeHeaderText)),
+      states.codeResent && (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
+        h("b", null, text.codeResentSuccessfullyText))),
+      h("div", { class: sheet.classes.InputsContainer },
+        h("div", { ref: refs.codeWrapperRef, class: sheet.classes.CodeInputContainer },
+          h("sl-input", { class: inputClass, name: "code" }),
+          h("sl-input", { class: inputClass, name: "code" }),
+          h("sl-input", { class: inputClass, name: "code" }),
+          h("sl-input", { class: inputClass, name: "code" }),
+          h("sl-input", { class: inputClass, name: "code" }),
+          h("sl-input", { class: inputClass, name: "code" })),
+        states.verifyFailed && (h("p", { class: sheet.classes.ErrorText }, text.invalidCodeText)),
+        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
+      h("div", { class: sheet.classes.FooterContainer },
+        h(TextSpanView, { type: "p" }, resendCodeText),
+        h(TextSpanView, { type: "p" },
+          h("a", { href: "/", style: { textDecoration: "none" } }, text.useDifferentEmailText))))));
+}