-
+
{description}
+ {states.shouldDisplayNameFields && (
+
+
+
+
+ )}
and lastName=
+ When the partner-info modal opens
+ Then the "First name" input is rendered and enabled
+ And the "Last name" input is rendered and enabled
+ And the "First name" input is prefilled with
+ And the "Last name" input is prefilled with
+
+ Examples:
+ | firstName | lastName |
+ | | Doe |
+ | Jane | |
+ | | |
+
+ @motivating
+ Scenario: Name inputs are required to submit when they are shown
+ Given the partner-info modal is open with the "First name" and "Last name" inputs rendered
+ And the "Country", "Currency", and "Tax and banking" fields are all valid
+ When either the "First name" or "Last name" input is empty
+ Then the primary button is disabled
+ When both inputs have a non-empty value
+ Then the primary button becomes enabled
+
@minutia
Scenario: Submit button is disabled
Given the partner-info modal is open
- When any one of (country, currency, allowBankingCollection) is missing
+ When any one of (country, currency, allowBankingCollection, firstName, lastName) is missing
Then the submit button is disabled
@motivating
Scenario: Submitting the modal starts the Impact connection and closes the modal
- Given the user has selected country "US", currency "USD", and checked the T&C checkbox
+ Given the participant's user record has a non-empty `firstName` and `lastName`
+ And the user has selected country "US", currency "USD", and checked the T&C checkbox
When they click the primary button
Then the modal calls the `startImpactConnection` mutation with
| user.id | the participant id |
@@ -103,6 +135,23 @@ Feature: Partner Info Modal — country, currency, and T&C collection
And on success `impactConnection.connectionStatus` changes from "NOT_STARTED" to "STARTED"
And the modal closes
+ @motivating
+ Scenario: Submitting the modal sends the entered firstName and lastName when the name inputs are shown
+ Given the participant's user record is missing `firstName` and/or `lastName`
+ And the "First name" input value is "Jane"
+ And the "Last name" input value is "Doe"
+ And the user has selected country "US", currency "USD", and checked the T&C checkbox
+ When they click the primary button
+ Then the modal calls the `startImpactConnection` mutation with
+ | user.id | the participant id |
+ | user.accountId | the participant accountId |
+ | firstName | "Jane" |
+ | lastName | "Doe" |
+ | countryCode | "US" |
+ | currency | "USD" |
+ And on success `impactConnection.connectionStatus` changes from "NOT_STARTED" to "STARTED"
+ And the modal closes
+
@motivating
Scenario: Existing-partner submission attaches the participant to the linked publisher
Given the participant is linked to an existing publisher with country "CA" and currency "CAD"
@@ -130,6 +179,7 @@ Feature: Partner Info Modal — country, currency, and T&C collection
Given the partner-info modal is open
When the user clicks the primary button and the mutation is in flight
Then the "Country", "Currency", and "Tax and banking" inputs are all disabled
+ And the "First name" and "Last name" inputs are disabled when they are rendered
And the primary button shows a loading spinner
@minutia
diff --git a/packages/mint-components/src/components/sqm-partner-info-modal/usePartnerInfoModal.tsx b/packages/mint-components/src/components/sqm-partner-info-modal/usePartnerInfoModal.tsx
index f6ba8572e..7132d4f6a 100644
--- a/packages/mint-components/src/components/sqm-partner-info-modal/usePartnerInfoModal.tsx
+++ b/packages/mint-components/src/components/sqm-partner-info-modal/usePartnerInfoModal.tsx
@@ -102,7 +102,7 @@ export type CountriesQuery = {
};
export function usePartnerInfoModal(
- props: PartnerInfoModal,
+ props: PartnerInfoModal
): PartnerInfoModalViewProps {
const locale = useLocale();
@@ -118,29 +118,32 @@ export function usePartnerInfoModal(
const { data: currenciesData, loading: currenciesLoading } = useQuery(
GET_CURRENCIES,
- { variables: { locale } },
+ { variables: { locale } }
);
const { data: countriesData, loading: countriesLoading } = useQuery(
GET_COUNTRIES,
- {},
+ {}
);
+ const [shouldDisplayNameFields, setShouldDisplayNameFields] = useState(false);
+ const [firstName, setFirstName] = useState(user?.firstName ?? "");
+ const [lastName, setLastName] = useState(user?.lastName ?? "");
+
// No pre-filled country, use locale to determine countryCode instead
const [countryCode, setCountryCode] = useState(
- user?.impactConnection?.publisher?.countryCode ||
- locale.replace(/^.*_/, ""),
+ user?.impactConnection?.publisher?.countryCode || locale.replace(/^.*_/, "")
);
const [currency, setCurrency] = useState(
- user?.impactConnection?.publisher?.currency || "",
+ user?.impactConnection?.publisher?.currency || ""
);
const { data: financeNetworkData } = useQuery(
GET_FINANCE_NETWORK_SETTINGS,
{
variables: { filter: countryCode ? { countryCode_eq: countryCode } : {} },
- },
+ }
);
const [startImpactConnection, { loading: connectLoading }] =
@@ -171,14 +174,14 @@ export function usePartnerInfoModal(
(agg, settings) => {
if (countryCode && settings.countryCode !== countryCode) return agg;
const c = currenciesData?.currencies?.data?.find(
- (cur) => cur.currencyCode === settings.currency,
+ (cur) => cur.currencyCode === settings.currency
);
if (!c) return agg;
if (agg.find((cur) => cur.currencyCode === settings.currency))
return agg;
return [...agg, c];
},
- [],
+ []
);
return allValidCurrencies || [];
}, [financeNetworkData, currenciesData, countryCode, isExistingPartner]);
@@ -186,27 +189,34 @@ export function usePartnerInfoModal(
const currencies = useMemo(
() =>
[..._currencies].sort((a, b) =>
- a.displayName.localeCompare(b.displayName),
+ a.displayName.localeCompare(b.displayName)
),
- [_currencies],
+ [_currencies]
);
const [countrySearch, setCountrySearch] = useState("");
const [currencySearch, setCurrencySearch] = useState("");
const [filteredCountries, setFilteredCountries] = useState(countries || []);
const [filteredCurrencies, setFilteredCurrencies] = useState(
- currencies || [],
+ currencies || []
);
const [error, setError] = useState("");
const [success, setSuccess] = useState(false);
-
+ const [initialized, setInitialized] = useState(false);
+
useEffect(() => {
- const publisher = user?.impactConnection?.publisher;
- if (!userData || !publisher) return;
- setCountryCode(publisher.countryCode);
- setCurrency(publisher.currency);
- }, [userData, user]);
+ if (initialized || !user) return;
+ setShouldDisplayNameFields(!user.firstName || !user.lastName);
+ setFirstName(user.firstName || "");
+ setLastName(user.lastName || "");
+ const publisher = user.impactConnection?.publisher;
+ if (publisher) {
+ setCountryCode(publisher.countryCode);
+ setCurrency(publisher.currency);
+ }
+ setInitialized(true);
+ }, [user, initialized]);
useEffect(() => {
if (!countries?.length) return;
@@ -215,8 +225,8 @@ export function usePartnerInfoModal(
} else {
setFilteredCountries(
countries.filter((c) =>
- c.displayName.toLowerCase().includes(countrySearch.toLowerCase()),
- ) || [],
+ c.displayName.toLowerCase().includes(countrySearch.toLowerCase())
+ ) || []
);
}
}, [countrySearch, countries]);
@@ -228,14 +238,24 @@ export function usePartnerInfoModal(
} else {
setFilteredCurrencies(
currencies.filter((c) =>
- c.currencyCode.toLowerCase().includes(currencySearch.toLowerCase()),
- ) || [],
+ c.currencyCode.toLowerCase().includes(currencySearch.toLowerCase())
+ ) || []
);
}
}, [currencySearch, currencies]);
const impactConnection = user?.impactConnection;
+ function onFirstNameChange(e: any) {
+ const value = e.target.value;
+ setFirstName(value);
+ }
+
+ function onLastNameChange(e: any) {
+ const value = e.target.value;
+ setLastName(value);
+ }
+
function onCountryChange(e: any) {
const value = e.detail?.item?.__value;
if (!value) return;
@@ -257,7 +277,12 @@ export function usePartnerInfoModal(
}
async function onSubmit() {
- if (!allowBankingCollection || !countryCode || !currency) {
+ if (
+ !allowBankingCollection ||
+ !countryCode ||
+ !currency ||
+ (shouldDisplayNameFields && (!firstName || !lastName))
+ ) {
setError(props.missingFieldsErrorText);
return;
}
@@ -274,8 +299,8 @@ export function usePartnerInfoModal(
id: user.id,
accountId: user.accountId,
},
- firstName: user.firstName,
- lastName: user.lastName,
+ firstName,
+ lastName,
countryCode,
currency,
};
@@ -297,7 +322,7 @@ export function usePartnerInfoModal(
setError(validationMsg || props.networkErrorText);
console.error(
"Failed to create Impact connection:",
- connectionResult?.validationErrors,
+ connectionResult?.validationErrors
);
return;
}
@@ -323,7 +348,10 @@ export function usePartnerInfoModal(
open: showModal,
loading: userLoading || countriesLoading || currenciesLoading,
submitting: connectLoading,
+ shouldDisplayNameFields,
isExistingPartner,
+ firstName,
+ lastName,
countryCode,
currency,
error,
@@ -334,6 +362,8 @@ export function usePartnerInfoModal(
disabled: userLoading || connectLoading,
},
callbacks: {
+ onFirstNameChange,
+ onLastNameChange,
onCountryChange,
onCurrencyChange,
onCheckboxChange,