@saasquatch/mint-components 1.12.0-8 → 1.12.0

package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.js

@@ -85,7 +85,6 @@ const style = {
   },
   PhoneInputsSection: {
     display: "flex",
-    alignItems: "flex-end",
     flexDirection: "column",
     gap: "4px",
     "& p": {
@@ -96,7 +95,6 @@ const style = {
   },
   PhoneInputsContainer: {
     display: "flex",
-    alignItems: "flex-end",
     gap: "4px",
     width: "100%",
     "& #phoneNumber": {
@@ -165,7 +163,12 @@ export const UserInfoFormView = (props) => {
         h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         h("strong", null, text.error.loadingErrorAlertHeader),
         h("br", null),
-        text.error.loadingErrorAlertDescription),
+        intl.formatMessage({
+          id: "loadingErrorAlertDescription",
+          defaultMessage: text.error.loadingErrorAlertDescription,
+        }, {
+          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        })),
       h("br", null))),
     states.loading ? (h(GeneralLoadingView, null)) : (h("div", null,
       h("div", { class: classes.TextContainer },
@@ -180,12 +183,22 @@ export const UserInfoFormView = (props) => {
         h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         h("strong", null, text.error.generalTitle),
         h("br", null),
-        text.error.generalDescription)),
+        intl.formatMessage({
+          id: "generalDescription",
+          defaultMessage: text.error.generalDescription,
+        }, {
+          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))),
       (states.isPartner || states.isUser) && (h("sl-alert", { type: "primary", open: true, class: sheet.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
         h("sl-icon", { slot: "icon", name: "info-circle" }),
         h("strong", null, text.isPartnerAlertHeader),
         h("br", null),
-        text.isPartnerAlertDescription)),
+        intl.formatMessage({
+          id: "isPartnerAlertDescription",
+          defaultMessage: text.isPartnerAlertDescription,
+        }, {
+          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))),
       h("div", null,
         h("div", { class: classes.InputContainer },
           h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
@@ -237,10 +250,11 @@ export const UserInfoFormView = (props) => {
                     h("div", { slot: "prefix" }, `${(_a = PHONE_EXTENSIONS[c.countryCode]) === null || _a === void 0 ? void 0 : _a.name} `), (_b = PHONE_EXTENSIONS[c.countryCode]) === null || _b === void 0 ? void 0 :
                     _b.dial_code));
                 })),
-              h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, validationError: ({ value }) => 
-                // Naive phone number validation
-                validateBillingField(/[a-zA-Z]+/, value) &&
-                  formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError), disabled: states.disabled || states.isPartner }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
+              h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, validationError: ({ value }) => {
+                  // Naive phone number validation
+                  validateBillingField(/[a-zA-Z]+/, value) &&
+                    formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError);
+                }, disabled: states.disabled || states.isPartner }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
                 class: classes.ErrorInput,
                 helpText: formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
               }

package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form.js

@@ -88,7 +88,7 @@ export class TaxForm {
      * @uiName Participant is a partner alert description
      * @uiWidget textArea
      */
-    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact Support or sign up for this referral program with a different email.";
+    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact our {supportLink} or sign up for this referral program with a different email.";
     /**
      * Part of the alert displayed at the top of the page.
      * @uiName Form submission error message title
@@ -100,7 +100,7 @@ export class TaxForm {
      * @uiName Form submission error message description
      * @uiWidget textArea
      */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
+    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Edit the property called terms and conditions text to change what's displayed for {termsAndConditionsLink}.
      * @uiName Terms and conditions checkbox
@@ -116,7 +116,7 @@ export class TaxForm {
      * The link that appears in the terms and conditions checkbox
      * @uiName Terms and conditions link
      */
-    this.termsAndConditionsLink = "/payout-terms-and-conditions";
+    this.termsAndConditionsLink = "https://terms.advocate.impact.com/PayoutTermsAndConditions.html";
     /**
      * Placeholder text displayed in the country search dropdown
      * @uiName Country field placeholder text
@@ -153,12 +153,16 @@ export class TaxForm {
      * @uiName Page load error message description
      * @uiWidget textArea
      */
-    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact Support.";
+    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Displayed at the top of the page on all set up steps.
      * @uiName Page description
      */
     this.taxAndPayoutsDescription = "Submit your tax documents and add your banking information to receive your rewards.";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -572,7 +576,7 @@ export class TaxForm {
       },
       "attribute": "is-partner-alert-description",
       "reflect": false,
-      "defaultValue": "\"If you don\u2019t recognize this referral program provider or believe this is a mistake, please contact Support or sign up for this referral program with a different email.\""
+      "defaultValue": "\"If you don\u2019t recognize this referral program provider or believe this is a mistake, please contact our {supportLink} or sign up for this referral program with a different email.\""
     },
     "generalErrorTitle": {
       "type": "string",
@@ -620,7 +624,7 @@ export class TaxForm {
       },
       "attribute": "general-error-description",
       "reflect": false,
-      "defaultValue": "\"Please review your information and try again. If this problem continues, contact Support.\""
+      "defaultValue": "\"Please review your information and try again. If this problem continues, contact our {supportLink}.\""
     },
     "allowBankingCollection": {
       "type": "string",
@@ -686,7 +690,7 @@ export class TaxForm {
       },
       "attribute": "terms-and-conditions-link",
       "reflect": false,
-      "defaultValue": "\"/payout-terms-and-conditions\""
+      "defaultValue": "\"https://terms.advocate.impact.com/PayoutTermsAndConditions.html\""
     },
     "searchForCountryText": {
       "type": "string",
@@ -839,7 +843,7 @@ export class TaxForm {
       },
       "attribute": "loading-error-alert-description",
       "reflect": false,
-      "defaultValue": "\"Please refresh the page and try again. If this problem continues, contact Support.\""
+      "defaultValue": "\"Please refresh the page and try again. If this problem continues, contact our {supportLink}.\""
     },
     "taxAndPayoutsDescription": {
       "type": "string",
@@ -862,6 +866,27 @@ export class TaxForm {
       "reflect": false,
       "defaultValue": "\"Submit your tax documents and add your banking information to receive your rewards.\""
     },
+    "supportLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Support link text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "support-link",
+      "reflect": false,
+      "defaultValue": "\"support team\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/tax-and-cash/sqm-user-info-form/useUserInfoForm.js

@@ -142,6 +142,8 @@ export function useUserInfoForm(props) {
     const { allowBankingCollection, ...userData } = formData;
     setUserFormContext({
       ...userFormContext,
+      firstName: userData.firstName,
+      lastName: userData.lastName,
       phoneNumberCountryCode: userData.phoneNumberCountryCode,
       phoneNumber: userData.phoneNumber,
       countryCode: userData.countryCode,

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

@@ -0,0 +1,64 @@
+import { useMutation, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { createVeriffFrame, MESSAGES } from "@veriff/incontext-sdk";
+import { gql } from "graphql-request";
+const CREATE_IMPACT_VERIFICATION_SESSION = gql `
+  mutation createImpactVerificationSession($user: UserIdInput!) {
+    createImpactPublisherIdentityVerificationSession(user: $user) {
+      sessionUrl
+    }
+  }
+`;
+const REFRESH_USER_STATUS = gql `
+  mutation refreshImpactPublisherFinanceStatus($user: UserIdInput!) {
+    refreshImpactPublisherFinanceStatus(user: $user) {
+      id
+    }
+  }
+`;
+export const VERIFF_COMPLETE_EVENT_KEY = "sqm:veriff-updated";
+export function useVeriffApp() {
+  const { id, accountId } = useUserIdentity();
+  const [createImpactVerificationSessionMutation, { loading, errors }] = useMutation(CREATE_IMPACT_VERIFICATION_SESSION);
+  const [refreshImpactPublisherFinanceStatus, { loading: refreshLoading, errors: refreshErrors },] = useMutation(REFRESH_USER_STATUS);
+  const refresh = async () => {
+    try {
+      const res = await refreshImpactPublisherFinanceStatus({
+        user: { id, accountId },
+      });
+      if (!res || res.message)
+        throw new Error();
+      window.dispatchEvent(new Event(VERIFF_COMPLETE_EVENT_KEY));
+    }
+    catch (e) {
+      console.error("Failed to initialise Veriff:", e);
+    }
+  };
+  const render = async () => {
+    try {
+      const res = await createImpactVerificationSessionMutation({
+        user: { id, accountId },
+      });
+      if (!res || res.message)
+        throw new Error();
+      const sessionUrl = res.createImpactPublisherIdentityVerificationSession.sessionUrl;
+      createVeriffFrame({
+        url: sessionUrl,
+        onEvent: (msg) => {
+          switch (msg) {
+            case MESSAGES.FINISHED:
+            case MESSAGES.CANCELED:
+              refresh();
+          }
+        },
+      });
+    }
+    catch (e) {
+      console.error("Failed to initialise Veriff:", e);
+    }
+  };
+  return {
+    render,
+    loading: loading || refreshLoading,
+    errors: errors || refreshErrors,
+  };
+}

package/dist/collection/components/views/copy-text-view.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
+import { createStyleSheet } from "../../styling/JSS";
 const style = {
   HostBlock: HostBlock,
   inputStyle: {
@@ -13,6 +13,14 @@ const style = {
       border: "2px solid red",
     },
   },
+  ContainerDiv: {
+    display: "flex",
+    alignItems: "flex-start",
+    flexDirection: "column",
+    justifyContent: "center",
+    gap: "var(--sl-spacing-x-small)",
+    width: "100%",
+  },
   containerStyle: {
     display: "flex",
     alignItems: "center",
@@ -23,6 +31,10 @@ const style = {
     margin: "0",
     color: "var(--sl-color-danger-500)",
   },
+  notificationTextStyle: {
+    margin: "0",
+    color: "var(--sl-color-neutral-500)",
+  },
 };
 const vanillaStyle = `
   :host{
@@ -59,7 +71,7 @@ export function CopyTextView(props) {
       ? "top"
       : "top-end";
   const copyButton = (h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (h("sl-icon-button", { exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (h("sl-button", { exportparts: "base: copy-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
-  return (h("div", null,
+  return (h("div", { class: sheet.classes.ContainerDiv },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle,
@@ -72,5 +84,8 @@ export function CopyTextView(props) {
         buttonStyle === "icon" && copyButton,
         error && (h("p", { slot: "help-text", class: sheet.classes.errorTextStyle }, props.errorText))),
       (buttonStyle === "button-outside" || buttonStyle === "button-below") &&
-        copyButton)));
+        copyButton),
+    props.isCopied &&
+      props.showNotificationText &&
+      props.notificationText && (h("p", { part: "sqm-notification-text", class: sheet.classes.notificationTextStyle }, props.notificationText))));
 }

package/dist/collection/stories/Widget.stories.js

@@ -3,6 +3,7 @@ import { h } from "@stencil/core";
 import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
 import referralWidget from "../templates/ReferralWidget.html";
 import monoWidget from "../templates/MonoWidget.html";
+import promoCodeReferralWidget from "../templates/PromoCodeReferralWidget.html";
 import loyaltyWidget from "../templates/LoyaltyWidget.html";
 import instantAccessReferrerShareWidget from "../templates/InstantAccessReferrerShareWidget.html";
 import instantAccessFriendCouponWidget from "../templates/InstantAccessFriendCouponWidget.html";
@@ -42,6 +43,10 @@ export const Loyalty = createHookStory(() => {
   const { states, callbacks } = useTemplate(loyaltyWidget);
   return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: loyaltyWidget }));
 });
+export const PromoCodeReferralWidget = createHookStory(() => {
+  const { states, callbacks } = useTemplate(promoCodeReferralWidget);
+  return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: referralWidget }));
+});
 export const InstantAccessReferrerShareWidget = createHookStory(() => {
   const { states, callbacks } = useTemplate(instantAccessReferrerShareWidget);
   return h(TemplateView, { states: states, callbacks: callbacks });

package/dist/esm/{GenericTableView-d59d8ab4.js → GenericTableView-706f5b56.js}

@@ -1,6 +1,6 @@
-import { h } from './index-17b4da69.js';
-import { g as gap } from './mixins-f60a614c.js';
+import { h } from './index-014ddfa3.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { g as gap } from './mixins-f60a614c.js';
 
 function GenericTableView(props) {
   const { states, data, callbacks, elements } = props;