Port sqm-partner-info-modal early partner creation to 1.x

packages/mint-components/src/components/sqm-form-message/readme.md

@@ -22,6 +22,7 @@
  - [sqm-edit-profile](../sqm-edit-profile)
  - [sqm-instant-access-registration](../sqm-instant-access-registration)
  - [sqm-lead-form](../sqm-lead-form)
+ - [sqm-partner-info-modal](../sqm-partner-info-modal)
  - [sqm-portal-change-marketing](../sqm-portal-change-marketing)
  - [sqm-portal-change-password](../sqm-portal-change-password)
  - [sqm-portal-email-verification](../sqm-portal-email-verification)
@@ -45,6 +46,7 @@ graph TD;
   sqm-edit-profile --> sqm-form-message
   sqm-instant-access-registration --> sqm-form-message
   sqm-lead-form --> sqm-form-message
+  sqm-partner-info-modal --> sqm-form-message
   sqm-portal-change-marketing --> sqm-form-message
   sqm-portal-change-password --> sqm-form-message
   sqm-portal-email-verification --> sqm-form-message

packages/mint-components/src/components/sqm-leaderboard-rank/useLeaderboardRank.tsx

@@ -68,7 +68,7 @@ export function useLeaderboardRank(
 
   return {
     data: {
-      rank: fullRankText,
+      rank: fullRankText as string,
     },
   };
 }

packages/mint-components/src/components/sqm-partner-info-modal/ImpactConnectionStatus.feature

@@ -0,0 +1,30 @@
+@owner:andy @author:andy
+Feature: Partner Connection Status
+
+  Background:
+    Given user is on the Microsite or a widget that contains the cash form
+
+  Scenario: New participants with no publisher submits partner modal
+    Given a participant with no linked Impact publisher
+    When they submit the partner info modal with valid country, currency, and T&C consent
+    Then an Impact publisher is created for the participant
+    And impactConnection.connectionStatus resolves to "STARTED"
+
+  Scenario: New participants with an existing publisher submits partner modal
+    Given a participant whose email is already linked to an Impact publisher
+    When they submit the partner info modal with valid country, currency, and T&C consent
+    Then the existing Impact publisher is used and not updated
+    And impactConnection.connectionStatus resolves to "STARTED"
+
+  Scenario: User has not filled out User Info Form
+    Given the user has a publisher
+    And the publisher does not contain billing data
+    When they submit the user User Info Form with their billing information
+    Then impactConnection.connectionStatus resolves to "COMPLETED"
+
+  Scenario: User has pre-existing partner which completed user info form
+    Given the user has a publisher
+    And the publisher contains complete billing data
+    Then the user info form is skipped
+    And the data is unchanged
+    And impactConnection.connectionStatus resolves to "COMPLETED"

packages/mint-components/src/components/sqm-partner-info-modal/PartnerInfoModal.stories.tsx

@@ -0,0 +1,210 @@
+import { h } from "@stencil/core";
+import {
+  PartnerInfoModalView,
+  PartnerInfoModalViewProps,
+} from "./sqm-partner-info-modal-view";
+
+export default {
+  title: "Components/Partner Info Modal",
+};
+
+const demoCountries = [
+  { countryCode: "US", displayName: "United States" },
+  { countryCode: "CA", displayName: "Canada" },
+  { countryCode: "GB", displayName: "United Kingdom" },
+  { countryCode: "AU", displayName: "Australia" },
+  { countryCode: "DE", displayName: "Germany" },
+  { countryCode: "FR", displayName: "France" },
+  { countryCode: "JP", displayName: "Japan" },
+];
+
+const demoCurrencies = [
+  { currencyCode: "USD", displayName: "US Dollar" },
+  { currencyCode: "CAD", displayName: "Canadian Dollar" },
+  { currencyCode: "GBP", displayName: "British Pound" },
+  { currencyCode: "EUR", displayName: "Euro" },
+  { currencyCode: "AUD", displayName: "Australian Dollar" },
+];
+
+const noopCallbacks = {
+  onCountryChange: (e: any) => console.log("Country changed:", e),
+  onCurrencyChange: (e: any) => console.log("Currency changed:", e),
+  onCheckboxChange: (e: any) => console.log("Checkbox changed:", e),
+  setCountrySearch: (v: string) => console.log("Country search:", v),
+  setCurrencySearch: (v: string) => console.log("Currency search:", v),
+  onSubmit: () => console.log("Submit"),
+  onClose: () => console.log("Close"),
+};
+
+const defaultText = {
+  modalHeader: "Let's get you ready for rewards",
+  modalHeaderExistingPartner: "We found an existing account",
+  descriptionNewPartner:
+    "Confirm your country and currency now to get your future rewards faster.",
+  descriptionExistingPartner:
+    "We noticed you are already an Impact.com partner, please confirm your information.",
+  supportDescriptionExistingPartner:
+    "If this is a mistake, please contact Support or sign up for this referral program with a different email.",
+  supportLink: "Support",
+  countryLabel: "Country",
+  currencyLabel: "Currency",
+  submitButtonLabel: "Submit",
+  confirmButtonLabel: "Confirm",
+  searchCountryPlaceholder: "Search for a country",
+  searchCurrencyPlaceholder: "Search for a currency",
+  bankingCollectionText: "",
+  allowBankingCollection:
+    "I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information",
+  termsAndConditionsLabel: "terms and conditions",
+  termsAndConditionsLink:
+    "https://terms.advocate.impact.com/PayoutTermsAndConditions.html",
+};
+
+const defaultProps: PartnerInfoModalViewProps = {
+  states: {
+    open: true,
+    loading: false,
+    submitting: false,
+    isExistingPartner: false,
+    countryCode: "",
+    currency: "",
+    error: "",
+    success: false,
+    filteredCountries: demoCountries,
+    filteredCurrencies: demoCurrencies,
+    allowBankingCollection: false,
+    disabled: false,
+  },
+  callbacks: noopCallbacks,
+  text: defaultText,
+};
+
+export const NewPartnerEmpty = () => {
+  return <PartnerInfoModalView {...defaultProps} />;
+};
+
+export const NewPartnerPrefilled = () => {
+  const props: PartnerInfoModalViewProps = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      countryCode: "US",
+      currency: "",
+    },
+  };
+  return <PartnerInfoModalView {...props} />;
+};
+
+export const NewPartnerFullySelected = () => {
+  const props: PartnerInfoModalViewProps = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      countryCode: "US",
+      currency: "USD",
+    },
+  };
+  return <PartnerInfoModalView {...props} />;
+};
+
+export const ExistingPartnerConfirm = () => {
+  const props: PartnerInfoModalViewProps = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      isExistingPartner: true,
+      countryCode: "CA",
+      currency: "CAD",
+    },
+  };
+  return <PartnerInfoModalView {...props} />;
+};
+
+export const ExistingPartnerEmpty = () => {
+  const props: PartnerInfoModalViewProps = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      isExistingPartner: true,
+      countryCode: "",
+      currency: "",
+    },
+  };
+  return <PartnerInfoModalView {...props} />;
+};
+
+export const Submitting = () => {
+  const props: PartnerInfoModalViewProps = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      countryCode: "GB",
+      currency: "GBP",
+      submitting: true,
+    },
+  };
+  return <PartnerInfoModalView {...props} />;
+};
+
+export const WithError = () => {
+  const props: PartnerInfoModalViewProps = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      countryCode: "US",
+      currency: "USD",
+      error:
+        "An error occurred while creating your partner account. Please try again.",
+    },
+  };
+  return <PartnerInfoModalView {...props} />;
+};
+
+export const ValidationError = () => {
+  const props: PartnerInfoModalViewProps = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      countryCode: "",
+      currency: "",
+      error: "Please select both a country and currency.",
+    },
+  };
+  return <PartnerInfoModalView {...props} />;
+};
+
+export const Closed = () => {
+  const props: PartnerInfoModalViewProps = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      open: false,
+    },
+  };
+  return <PartnerInfoModalView {...props} />;
+};
+
+export const SQMComponentExistingPartner = () => {
+  return (
+    <sqm-partner-info-modal
+      support-link="Support"
+      support-description-existing-partner="If this is a mistake, please contact {supportLink} or sign up for this referral program with a different email."
+      allow-banking-collection="I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information"
+      terms-and-conditions-label="terms and conditions"
+      terms-and-conditions-link="https://terms.advocate.impact.com/PayoutTermsAndConditions.html"
+      demoData={{
+        states: { open: true, isExistingPartner: true } as any,
+      }}
+    ></sqm-partner-info-modal>
+  );
+};
+
+export const SQMComponentNewPartner = () => {
+  return (
+    <sqm-partner-info-modal
+      demoData={{
+        states: { open: true, isExistingPartner: false } as any,
+      }}
+    ></sqm-partner-info-modal>
+  );
+};