Skip to content

Commit 2fdaf6e

Browse files
AndiLuoAndiLuo
committed
Add sqm-partner-info-modal
1 parent 9e55279 commit 2fdaf6e

File tree

5 files changed

+691
-0
lines changed

5 files changed

+691
-0
lines changed

‎packages/mint-components/src/components.d.ts‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import { NavigationMenuViewProps } from "./components/sqm-navigation-menu/sqm-na
3434
import { NavigationSidebarViewProps } from "./components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
3535
import { NavigationSidebarItemViewProps } from "./components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
3636
import { UsePagination } from "./components/sqm-pagination/usePagination";
37+
import { PartnerInfoModalViewProps } from "./components/sqm-partner-info-modal/sqm-partner-info-modal-view";
3738
import { PasswordFieldViewDemoProps } from "./components/sqm-password-field/usePasswordField";
3839
import { PayoutButtonScrollViewProps } from "./components/sqm-payout-button-scroll/sqm-payout-button-scroll-view";
3940
import { PayoutStatusAlertViewProps } from "./components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view";
@@ -2190,6 +2191,65 @@ export namespace Components {
21902191
*/
21912192
"paginationText": string;
21922193
}
2194+
interface SqmPartnerInfoModal {
2195+
/**
2196+
* @uiName Confirm button label
2197+
*/
2198+
"confirmButtonLabel": string;
2199+
/**
2200+
* @uiName Country label
2201+
*/
2202+
"countryLabel": string;
2203+
/**
2204+
* @uiName Currency label
2205+
*/
2206+
"currencyLabel": string;
2207+
/**
2208+
* @undocumented
2209+
* @uiType object
2210+
*/
2211+
"demoData"?: DemoData<PartnerInfoModalViewProps>;
2212+
/**
2213+
* Description for existing partner confirmation
2214+
* @uiName Existing partner description
2215+
* @uiWidget textArea
2216+
*/
2217+
"descriptionExistingPartner": string;
2218+
/**
2219+
* Description for new partner setup
2220+
* @uiName New partner description
2221+
* @uiWidget textArea
2222+
*/
2223+
"descriptionNewPartner": string;
2224+
/**
2225+
* @uiName Missing fields error text
2226+
* @uiWidget textArea
2227+
*/
2228+
"missingFieldsErrorText": string;
2229+
/**
2230+
* Header text when user has no existing partner
2231+
* @uiName New partner header
2232+
* @uiWidget textArea
2233+
*/
2234+
"modalBrandHeader": string;
2235+
/**
2236+
* @uiName Network error text
2237+
* @uiWidget textArea
2238+
*/
2239+
"networkErrorText": string;
2240+
/**
2241+
* @uiName Search country placeholder
2242+
*/
2243+
"searchCountryPlaceholder": string;
2244+
/**
2245+
* @uiName Search currency placeholder
2246+
*/
2247+
"searchCurrencyPlaceholder": string;
2248+
/**
2249+
* @uiName Submit button label
2250+
*/
2251+
"submitButtonLabel": string;
2252+
}
21932253
interface SqmPasswordField {
21942254
/**
21952255
* @undocumented
@@ -7377,6 +7437,12 @@ declare global {
73777437
prototype: HTMLSqmPaginationElement;
73787438
new (): HTMLSqmPaginationElement;
73797439
};
7440+
interface HTMLSqmPartnerInfoModalElement extends Components.SqmPartnerInfoModal, HTMLStencilElement {
7441+
}
7442+
var HTMLSqmPartnerInfoModalElement: {
7443+
prototype: HTMLSqmPartnerInfoModalElement;
7444+
new (): HTMLSqmPartnerInfoModalElement;
7445+
};
73807446
interface HTMLSqmPasswordFieldElement extends Components.SqmPasswordField, HTMLStencilElement {
73817447
}
73827448
var HTMLSqmPasswordFieldElement: {
@@ -7901,6 +7967,7 @@ declare global {
79017967
"sqm-navigation-sidebar": HTMLSqmNavigationSidebarElement;
79027968
"sqm-navigation-sidebar-item": HTMLSqmNavigationSidebarItemElement;
79037969
"sqm-pagination": HTMLSqmPaginationElement;
7970+
"sqm-partner-info-modal": HTMLSqmPartnerInfoModalElement;
79047971
"sqm-password-field": HTMLSqmPasswordFieldElement;
79057972
"sqm-payout-button-scroll": HTMLSqmPayoutButtonScrollElement;
79067973
"sqm-payout-details-card": HTMLSqmPayoutDetailsCardElement;
@@ -10107,6 +10174,65 @@ declare namespace LocalJSX {
1010710174
*/
1010810175
"paginationText"?: string;
1010910176
}
10177+
interface SqmPartnerInfoModal {
10178+
/**
10179+
* @uiName Confirm button label
10180+
*/
10181+
"confirmButtonLabel"?: string;
10182+
/**
10183+
* @uiName Country label
10184+
*/
10185+
"countryLabel"?: string;
10186+
/**
10187+
* @uiName Currency label
10188+
*/
10189+
"currencyLabel"?: string;
10190+
/**
10191+
* @undocumented
10192+
* @uiType object
10193+
*/
10194+
"demoData"?: DemoData<PartnerInfoModalViewProps>;
10195+
/**
10196+
* Description for existing partner confirmation
10197+
* @uiName Existing partner description
10198+
* @uiWidget textArea
10199+
*/
10200+
"descriptionExistingPartner"?: string;
10201+
/**
10202+
* Description for new partner setup
10203+
* @uiName New partner description
10204+
* @uiWidget textArea
10205+
*/
10206+
"descriptionNewPartner"?: string;
10207+
/**
10208+
* @uiName Missing fields error text
10209+
* @uiWidget textArea
10210+
*/
10211+
"missingFieldsErrorText"?: string;
10212+
/**
10213+
* Header text when user has no existing partner
10214+
* @uiName New partner header
10215+
* @uiWidget textArea
10216+
*/
10217+
"modalBrandHeader"?: string;
10218+
/**
10219+
* @uiName Network error text
10220+
* @uiWidget textArea
10221+
*/
10222+
"networkErrorText"?: string;
10223+
/**
10224+
* @uiName Search country placeholder
10225+
*/
10226+
"searchCountryPlaceholder"?: string;
10227+
/**
10228+
* @uiName Search currency placeholder
10229+
*/
10230+
"searchCurrencyPlaceholder"?: string;
10231+
/**
10232+
* @uiName Submit button label
10233+
*/
10234+
"submitButtonLabel"?: string;
10235+
}
1011010236
interface SqmPasswordField {
1011110237
/**
1011210238
* @undocumented
@@ -15023,6 +15149,7 @@ declare namespace LocalJSX {
1502315149
"sqm-navigation-sidebar": SqmNavigationSidebar;
1502415150
"sqm-navigation-sidebar-item": SqmNavigationSidebarItem;
1502515151
"sqm-pagination": SqmPagination;
15152+
"sqm-partner-info-modal": SqmPartnerInfoModal;
1502615153
"sqm-password-field": SqmPasswordField;
1502715154
"sqm-payout-button-scroll": SqmPayoutButtonScroll;
1502815155
"sqm-payout-details-card": SqmPayoutDetailsCard;
@@ -15157,6 +15284,7 @@ declare module "@stencil/core" {
1515715284
"sqm-navigation-sidebar": LocalJSX.SqmNavigationSidebar & JSXBase.HTMLAttributes<HTMLSqmNavigationSidebarElement>;
1515815285
"sqm-navigation-sidebar-item": LocalJSX.SqmNavigationSidebarItem & JSXBase.HTMLAttributes<HTMLSqmNavigationSidebarItemElement>;
1515915286
"sqm-pagination": LocalJSX.SqmPagination & JSXBase.HTMLAttributes<HTMLSqmPaginationElement>;
15287+
"sqm-partner-info-modal": LocalJSX.SqmPartnerInfoModal & JSXBase.HTMLAttributes<HTMLSqmPartnerInfoModalElement>;
1516015288
"sqm-password-field": LocalJSX.SqmPasswordField & JSXBase.HTMLAttributes<HTMLSqmPasswordFieldElement>;
1516115289
"sqm-payout-button-scroll": LocalJSX.SqmPayoutButtonScroll & JSXBase.HTMLAttributes<HTMLSqmPayoutButtonScrollElement>;
1516215290
"sqm-payout-details-card": LocalJSX.SqmPayoutDetailsCard & JSXBase.HTMLAttributes<HTMLSqmPayoutDetailsCardElement>;

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

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
import { h } from "@stencil/core";
2+
import {
3+
PartnerInfoModalView,
4+
PartnerInfoModalViewProps,
5+
} from "./sqm-partner-info-modal-view";
6+
7+
export default {
8+
title: "Components/Partner Info Modal",
9+
};
10+
11+
const demoCountries = [
12+
{ countryCode: "US", displayName: "United States" },
13+
{ countryCode: "CA", displayName: "Canada" },
14+
{ countryCode: "GB", displayName: "United Kingdom" },
15+
{ countryCode: "AU", displayName: "Australia" },
16+
{ countryCode: "DE", displayName: "Germany" },
17+
{ countryCode: "FR", displayName: "France" },
18+
{ countryCode: "JP", displayName: "Japan" },
19+
];
20+
21+
const demoCurrencies = [
22+
{ currencyCode: "USD", displayName: "US Dollar" },
23+
{ currencyCode: "CAD", displayName: "Canadian Dollar" },
24+
{ currencyCode: "GBP", displayName: "British Pound" },
25+
{ currencyCode: "EUR", displayName: "Euro" },
26+
{ currencyCode: "AUD", displayName: "Australian Dollar" },
27+
];
28+
29+
const noopCallbacks = {
30+
onCountryChange: (e: any) => console.log("Country changed:", e),
31+
onCurrencyChange: (e: any) => console.log("Currency changed:", e),
32+
onCountrySearch: (v: string) => console.log("Country search:", v),
33+
onCurrencySearch: (v: string) => console.log("Currency search:", v),
34+
onSubmit: () => console.log("Submit"),
35+
onClose: () => console.log("Close"),
36+
};
37+
38+
const defaultText = {
39+
modalBrandHeader: "Welcome to {brandName} Program!",
40+
descriptionNewPartner:
41+
"We just need a bit more information about you before you start earning cash!",
42+
descriptionExistingPartner:
43+
"We noticed you are already an Impact.com partner, please confirm your information.",
44+
countryLabel: "Country",
45+
currencyLabel: "Currency",
46+
submitButtonLabel: "Submit",
47+
confirmButtonLabel: "Confirm",
48+
searchCountryPlaceholder: "Search for a country",
49+
searchCurrencyPlaceholder: "Search for a currency",
50+
};
51+
52+
const defaultProps: PartnerInfoModalViewProps = {
53+
states: {
54+
open: true,
55+
loading: false,
56+
submitting: false,
57+
isExistingPartner: false,
58+
countryCode: "",
59+
currency: "",
60+
error: "",
61+
success: false,
62+
brandName: "Test Brand",
63+
filteredCountries: demoCountries,
64+
filteredCurrencies: demoCurrencies,
65+
},
66+
callbacks: noopCallbacks,
67+
text: defaultText,
68+
};
69+
70+
export const NewPartnerEmpty = () => {
71+
return <PartnerInfoModalView {...defaultProps} />;
72+
};
73+
74+
export const NewPartnerPrefilled = () => {
75+
const props: PartnerInfoModalViewProps = {
76+
...defaultProps,
77+
states: {
78+
...defaultProps.states,
79+
countryCode: "US",
80+
currency: "",
81+
},
82+
};
83+
return <PartnerInfoModalView {...props} />;
84+
};
85+
86+
export const NewPartnerFullySelected = () => {
87+
const props: PartnerInfoModalViewProps = {
88+
...defaultProps,
89+
states: {
90+
...defaultProps.states,
91+
countryCode: "US",
92+
currency: "USD",
93+
},
94+
};
95+
return <PartnerInfoModalView {...props} />;
96+
};
97+
98+
export const ExistingPartnerConfirm = () => {
99+
const props: PartnerInfoModalViewProps = {
100+
...defaultProps,
101+
states: {
102+
...defaultProps.states,
103+
isExistingPartner: true,
104+
countryCode: "CA",
105+
currency: "CAD",
106+
},
107+
};
108+
return <PartnerInfoModalView {...props} />;
109+
};
110+
111+
export const Submitting = () => {
112+
const props: PartnerInfoModalViewProps = {
113+
...defaultProps,
114+
states: {
115+
...defaultProps.states,
116+
countryCode: "GB",
117+
currency: "GBP",
118+
submitting: true,
119+
},
120+
};
121+
return <PartnerInfoModalView {...props} />;
122+
};
123+
124+
export const WithError = () => {
125+
const props: PartnerInfoModalViewProps = {
126+
...defaultProps,
127+
states: {
128+
...defaultProps.states,
129+
countryCode: "US",
130+
currency: "USD",
131+
error:
132+
"An error occurred while creating your partner account. Please try again.",
133+
},
134+
};
135+
return <PartnerInfoModalView {...props} />;
136+
};
137+
138+
export const ValidationError = () => {
139+
const props: PartnerInfoModalViewProps = {
140+
...defaultProps,
141+
states: {
142+
...defaultProps.states,
143+
countryCode: "",
144+
currency: "",
145+
error: "Please select both a country and currency.",
146+
},
147+
};
148+
return <PartnerInfoModalView {...props} />;
149+
};
150+
151+
export const Closed = () => {
152+
const props: PartnerInfoModalViewProps = {
153+
...defaultProps,
154+
states: {
155+
...defaultProps.states,
156+
open: false,
157+
},
158+
};
159+
return <PartnerInfoModalView {...props} />;
160+
};
161+
162+
export const FullStackDemo = () => {
163+
return (
164+
<sqm-partner-info-modal
165+
brand-name="Acme"
166+
header-new-partner="Welcome to {brandName} Program!"
167+
description-new-partner="We just need a bit more information about you before you start earning cash!"
168+
submit-button-label="Submit"
169+
></sqm-partner-info-modal>
170+
);
171+
};

0 commit comments

Comments
 (0)