Skip to content

Commit f22478d

Browse files
aline-doleronaline-doleron
committed
LPS-178343 Create buttons and forms of Payment methods on Modal
1 parent a5973bb commit f22478d

22 files changed

Lines changed: 1214 additions & 161 deletions

File tree

‎workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/Routes.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {GetAppModal} from './components/GetAppModal/GetAppModal';
12
import {AppCreationFlow} from './pages/AppCreationFlow/AppCreationFlow';
23
import GetAppPage from './pages/GetAppPage/GetAppPage';
34
import {PublishedAppsDashboardPage} from './pages/PublishedAppsDashboardPage/PublishedAppsDashboardPage';
@@ -6,6 +7,7 @@ import {PurchasedAppsDashboardPage} from './pages/PurchasedAppsDashboardPage/Pur
67
interface AppRoutesProps {
78
route: string;
89
}
10+
911
export default function AppRoutes({route}: AppRoutesProps) {
1012
if (route === 'create-app') {
1113
return <AppCreationFlow />;
@@ -16,6 +18,9 @@ export default function AppRoutes({route}: AppRoutesProps) {
1618
else if (route === 'purchased-apps') {
1719
return <PurchasedAppsDashboardPage />;
1820
}
21+
else if (route === 'open-modal') {
22+
return <GetAppModal handleClose={() => {}} />;
23+
}
1924

2025
return <PublishedAppsDashboardPage />;
2126
}

‎workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/assets/images/timeline.png‎

185 Bytes
Loading

‎workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/components/CardButton/CardButton.scss‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.card {
2+
&-button-icon {
3+
height: 16px;
4+
width: 16px;
5+
filter: invert(21%) sepia(91%) saturate(3572%) hue-rotate(220deg)
6+
brightness(100%) contrast(101%);
7+
}
8+
9+
&-button {
10+
align-items: flex-start;
11+
border: 1px solid #c9c9cf;
12+
border-radius: 8px;
13+
box-sizing: border-box;
14+
cursor: pointer;
15+
display: flex;
16+
height: 76px;
17+
padding: 17px 12px;
18+
width: 173.33px;
19+
20+
&--selected {
21+
background-color: #e6edfb;
22+
border: 1px solid #004ad7;
23+
24+
.card-button-text {
25+
color: #0b5fff;
26+
}
27+
}
28+
29+
&--disabled {
30+
cursor: not-allowed;
31+
opacity: 0.5;
32+
}
33+
}
34+
35+
&-button-description {
36+
color: #54555f;
37+
font-size: 13px;
38+
}
39+
40+
&-button-text {
41+
font-size: 16px;
42+
font-weight: 600;
43+
}
44+
45+
&-button-title {
46+
font-size: 16px;
47+
padding-left: 8px;
48+
}
49+
}

‎workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/components/CardButton/CardButton.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import ClayIcon from '@clayui/icon';
2+
import classNames from 'classnames';
3+
import {MouseEvent} from 'react';
4+
5+
import arrowLeft from '../../assets/icons/guide-icon.svg';
6+
7+
import './CardButton.scss';
8+
9+
export function CardButton({
10+
description,
11+
disabled,
12+
icon,
13+
onClick,
14+
selected,
15+
title,
16+
}: {
17+
description: string;
18+
disabled: boolean;
19+
icon: string;
20+
onClick: (event: MouseEvent) => void;
21+
title: string;
22+
selected: boolean;
23+
}) {
24+
return (
25+
<div
26+
className={classNames('card-button', {
27+
'card-button--selected': selected,
28+
'card-button--disabled': disabled,
29+
})}
30+
onClick={onClick}
31+
>
32+
<img alt="trial" className="card-button-icon" src={arrowLeft} />
33+
34+
<div className="card-button-info">
35+
<div className="card-button-title">
36+
<div className="card-button-text">{title}</div>
37+
38+
<div className="card-button-description">{description}</div>
39+
</div>
40+
</div>
41+
</div>
42+
);
43+
}

‎workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/components/GetAppModal/BillingAddress.tsx‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
import ClayIcon from '@clayui/icon';
2+
3+
import {Input} from '../../components/Input/Input';
4+
import {Section} from '../../components/Section/Section';
5+
import {RadioCard} from '../RadioCard/RadioCard';
6+
7+
export function BillingAddress({
8+
addresses,
9+
billingAddress,
10+
phoneNumber,
11+
selectedAddress,
12+
setBillingAddress,
13+
setSelectedAddress,
14+
setShowNewAddressButton,
15+
showNewAddressButton,
16+
}: {
17+
addresses: PostalAddressResponse[];
18+
billingAddress: BillingAddress;
19+
phoneNumber: string;
20+
selectedAddress: string;
21+
showNewAddressButton: boolean;
22+
setBillingAddress: (value: BillingAddress) => void;
23+
setSelectedAddress: (value: string) => void;
24+
setShowNewAddressButton: (value: boolean) => void;
25+
}) {
26+
function getPostalAddressDescription(address: PostalAddressResponse) {
27+
const description = `${address.streetAddressLine1}, ${
28+
address.streetAddressLine2 ? address.streetAddressLine2 + ',' : ''
29+
} ${address.addressLocality}, ${address.addressRegion}, ${
30+
address.addressCountry
31+
} ${address.postalCode} `;
32+
33+
return {
34+
description,
35+
title: address.name,
36+
};
37+
}
38+
39+
return (
40+
<Section className="get-app-modal-section" label="Billing Address">
41+
<div className="get-app-modal-section-card-addresses">
42+
{addresses.map((address) => {
43+
const {description, title} =
44+
getPostalAddressDescription(address);
45+
46+
return (
47+
<RadioCard
48+
description={description}
49+
onChange={() => {
50+
setSelectedAddress(address.streetAddressLine1);
51+
52+
const postalAddress = addresses.find(
53+
(address) => address.name === title
54+
);
55+
56+
const billingAddress: BillingAddress = {
57+
city: postalAddress?.addressLocality,
58+
country: postalAddress?.addressCountry,
59+
countryISOCode: 'US',
60+
name: postalAddress?.name,
61+
phoneNumber,
62+
region: postalAddress?.addressRegion,
63+
street1: postalAddress?.streetAddressLine1,
64+
street2: postalAddress?.streetAddressLine2,
65+
zip: postalAddress?.postalCode,
66+
};
67+
68+
setShowNewAddressButton(false);
69+
70+
setBillingAddress(billingAddress);
71+
}}
72+
selected={
73+
selectedAddress === address.streetAddressLine1
74+
}
75+
title={title}
76+
/>
77+
);
78+
})}
79+
</div>
80+
81+
{showNewAddressButton ? (
82+
<>
83+
<button
84+
className="get-app-modal-body-card-new-address"
85+
onClick={() => setShowNewAddressButton(false)}
86+
>
87+
<ClayIcon symbol="plus" />
88+
89+
<span>New Address</span>
90+
</button>
91+
</>
92+
) : (
93+
<div className="get-app-modal-body-card-container">
94+
<div className="get-app-modal-body-card-header">
95+
<span className="get-app-modal-body-card-header-left-content">
96+
New Address
97+
</span>
98+
99+
<button
100+
onClick={() => {
101+
setShowNewAddressButton(true);
102+
setSelectedAddress('');
103+
104+
const billingAddress: BillingAddress = {
105+
city: '',
106+
country: '',
107+
countryISOCode: 'US',
108+
name: '',
109+
phoneNumber: '',
110+
region: '',
111+
street1: '',
112+
street2: '',
113+
zip: '',
114+
};
115+
116+
setBillingAddress(billingAddress);
117+
}}
118+
>
119+
Cancel
120+
</button>
121+
</div>
122+
123+
<div className="get-app-modal-body-container">
124+
<Input
125+
label="Full Name"
126+
onChange={({target}) => {
127+
setBillingAddress({
128+
...billingAddress,
129+
name: target.value,
130+
});
131+
}}
132+
required
133+
value={billingAddress?.name}
134+
/>
135+
136+
<Input
137+
label="Address"
138+
onChange={({target}) => {
139+
setBillingAddress({
140+
...billingAddress,
141+
street1: target.value,
142+
});
143+
}}
144+
required
145+
value={billingAddress?.street1}
146+
/>
147+
148+
<Input
149+
onChange={({target}) => {
150+
setBillingAddress({
151+
...billingAddress,
152+
street2: target.value,
153+
});
154+
}}
155+
value={billingAddress?.street2}
156+
/>
157+
158+
<div className="get-app-modal-double-input">
159+
<Input
160+
label="City"
161+
onChange={({target}) => {
162+
setBillingAddress({
163+
...billingAddress,
164+
city: target.value,
165+
});
166+
}}
167+
required
168+
value={billingAddress?.city}
169+
/>
170+
171+
<Input
172+
label="State"
173+
onChange={({target}) => {
174+
setBillingAddress({
175+
...billingAddress,
176+
region: target.value,
177+
});
178+
}}
179+
required
180+
value={billingAddress?.region}
181+
/>
182+
</div>
183+
184+
<div className="get-app-modal-double-input">
185+
<Input
186+
label="Zip/Area Code"
187+
onChange={({target}) => {
188+
setBillingAddress({
189+
...billingAddress,
190+
zip: target.value,
191+
});
192+
}}
193+
required
194+
value={billingAddress?.zip}
195+
/>
196+
197+
<Input
198+
label="Country"
199+
onChange={({target}) => {
200+
setBillingAddress({
201+
...billingAddress,
202+
country: target.value,
203+
});
204+
}}
205+
required
206+
value={billingAddress?.country}
207+
/>
208+
</div>
209+
210+
<Input
211+
label="Phone"
212+
onChange={({target}) => {
213+
setBillingAddress({
214+
...billingAddress,
215+
phoneNumber: target.value,
216+
});
217+
}}
218+
required
219+
value={billingAddress?.phoneNumber}
220+
/>
221+
</div>
222+
</div>
223+
)}
224+
</Section>
225+
);
226+
}

0 commit comments

Comments
 (0)