@sikka/hawa 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styles.css +24 -3
- package/es/blocks/AuthForms/AppLanding.d.ts +1 -0
- package/es/blocks/Misc/index.d.ts +0 -1
- package/es/index.es.js +3 -3
- package/lib/blocks/AuthForms/AppLanding.d.ts +1 -0
- package/lib/blocks/Misc/index.d.ts +0 -1
- package/lib/index.js +3 -3
- package/package.json +1 -1
- package/src/blocks/Account/UserProfileForm.tsx +93 -88
- package/src/blocks/Account/UserSettingsForm.tsx +7 -13
- package/src/blocks/AuthForms/AppLanding.tsx +71 -16
- package/src/blocks/AuthForms/CodeConfirmation.tsx +44 -43
- package/src/blocks/AuthForms/NewPasswordForm.tsx +65 -50
- package/src/blocks/AuthForms/ResetPasswordForm.tsx +53 -45
- package/src/blocks/AuthForms/SignInForm.tsx +0 -2
- package/src/blocks/AuthForms/SignInPhone.tsx +30 -29
- package/src/blocks/Misc/EmptyState.tsx +27 -21
- package/src/blocks/Misc/LeadGenerator.tsx +27 -22
- package/src/blocks/Misc/NoPermission.tsx +25 -21
- package/src/blocks/Misc/NotFound.tsx +15 -13
- package/src/blocks/Misc/index.ts +0 -1
- package/src/blocks/Payment/CheckoutForm.tsx +193 -182
- package/src/blocks/Payment/CreditCardForm.tsx +70 -71
- package/src/blocks/Payment/SelectPayment.tsx +57 -52
- package/src/blocks/Referral/ReferralAccount.tsx +50 -47
- package/src/elements/HawaRadio.tsx +1 -1
- package/src/styles.css +24 -3
- package/es/blocks/Misc/Newsletter.d.ts +0 -12
- package/lib/blocks/Misc/Newsletter.d.ts +0 -12
- package/src/blocks/Misc/Newsletter.tsx +0 -50
|
@@ -8,6 +8,14 @@ import {
|
|
|
8
8
|
import { Controller, FormProvider, useForm } from "react-hook-form"
|
|
9
9
|
import { HawaContainer } from "../../layout"
|
|
10
10
|
import countries from "../../countries"
|
|
11
|
+
import {
|
|
12
|
+
Card,
|
|
13
|
+
CardContent,
|
|
14
|
+
CardFooter,
|
|
15
|
+
CardHeader,
|
|
16
|
+
CardTitle,
|
|
17
|
+
} from "../../elements/Card"
|
|
18
|
+
import { Button } from "../../elements/Button"
|
|
11
19
|
|
|
12
20
|
type CheckoutFormTypes = {
|
|
13
21
|
lang: string
|
|
@@ -58,203 +66,206 @@ export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
|
|
|
58
66
|
},
|
|
59
67
|
}
|
|
60
68
|
return (
|
|
61
|
-
<
|
|
62
|
-
<
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
<div
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
{
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
<div>
|
|
82
|
-
<div className="my-2 text-center text-xl font-semibold dark:text-white">
|
|
83
|
-
{props.texts.billingAddress}
|
|
69
|
+
<Card>
|
|
70
|
+
<CardHeader>
|
|
71
|
+
<CardTitle>{props.texts.orderDetails}</CardTitle>
|
|
72
|
+
</CardHeader>
|
|
73
|
+
<CardContent>
|
|
74
|
+
<div>
|
|
75
|
+
<div className="rounded border border-gray-300">
|
|
76
|
+
<HawaTable
|
|
77
|
+
pagination={false}
|
|
78
|
+
direction={isArabic ? "rtl" : "ltr"}
|
|
79
|
+
columns={[
|
|
80
|
+
{ hidden: false, value: "Product" },
|
|
81
|
+
{ hidden: true, value: "ID" },
|
|
82
|
+
{ hidden: false, value: "Price" },
|
|
83
|
+
]}
|
|
84
|
+
borders="inner"
|
|
85
|
+
rows={props.products}
|
|
86
|
+
bordersWidth="1"
|
|
87
|
+
/>
|
|
88
|
+
</div>
|
|
84
89
|
</div>
|
|
90
|
+
</CardContent>
|
|
91
|
+
<CardHeader>
|
|
92
|
+
<CardTitle>{props.texts.billingAddress}</CardTitle>
|
|
93
|
+
</CardHeader>
|
|
94
|
+
<form onSubmit={handleSubmit(props.handlePayNow)}>
|
|
95
|
+
<CardContent>
|
|
96
|
+
<div>
|
|
97
|
+
<FormProvider {...methods}>
|
|
98
|
+
<div>
|
|
99
|
+
<Controller
|
|
100
|
+
control={control}
|
|
101
|
+
name="firstName"
|
|
102
|
+
rules={{ required: props.texts?.required }}
|
|
103
|
+
render={({ field }) => (
|
|
104
|
+
<HawaTextField
|
|
105
|
+
type="text"
|
|
106
|
+
label={props.texts?.firstNameLabel + " *"}
|
|
107
|
+
helpertext={errors.firstName?.message}
|
|
108
|
+
{...field}
|
|
109
|
+
value={field.value ?? ""}
|
|
110
|
+
/>
|
|
111
|
+
)}
|
|
112
|
+
/>
|
|
113
|
+
<div style={{ width: 20 }} />
|
|
85
114
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
/>
|
|
101
|
-
)}
|
|
102
|
-
/>
|
|
103
|
-
<div style={{ width: 20 }} />
|
|
104
|
-
|
|
105
|
-
<Controller
|
|
106
|
-
control={control}
|
|
107
|
-
name="lastName"
|
|
108
|
-
rules={{ required: props.texts?.required }}
|
|
109
|
-
render={({ field }) => (
|
|
110
|
-
<HawaTextField
|
|
111
|
-
width="full"
|
|
112
|
-
type="text"
|
|
113
|
-
label={props.texts?.lastNameLabel + " *"}
|
|
114
|
-
helpertext={errors.lastName?.message}
|
|
115
|
-
{...field}
|
|
116
|
-
value={field.value ?? ""}
|
|
117
|
-
/>
|
|
118
|
-
)}
|
|
119
|
-
/>
|
|
120
|
-
</div>
|
|
121
|
-
<Controller
|
|
122
|
-
control={control}
|
|
123
|
-
name="email"
|
|
124
|
-
render={({ field }) => (
|
|
125
|
-
<HawaTextField
|
|
126
|
-
width="full"
|
|
127
|
-
type="text"
|
|
128
|
-
label={props.texts?.emailLabel + " *"}
|
|
129
|
-
helpertext={errors.email?.message}
|
|
130
|
-
{...field}
|
|
131
|
-
value={field.value ?? ""}
|
|
115
|
+
<Controller
|
|
116
|
+
control={control}
|
|
117
|
+
name="lastName"
|
|
118
|
+
rules={{ required: props.texts?.required }}
|
|
119
|
+
render={({ field }) => (
|
|
120
|
+
<HawaTextField
|
|
121
|
+
width="full"
|
|
122
|
+
type="text"
|
|
123
|
+
label={props.texts?.lastNameLabel + " *"}
|
|
124
|
+
helpertext={errors.lastName?.message}
|
|
125
|
+
{...field}
|
|
126
|
+
value={field.value ?? ""}
|
|
127
|
+
/>
|
|
128
|
+
)}
|
|
132
129
|
/>
|
|
133
|
-
|
|
134
|
-
rules={{
|
|
135
|
-
required: props.texts?.emailRequiredText,
|
|
136
|
-
pattern: {
|
|
137
|
-
value:
|
|
138
|
-
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
|
|
139
|
-
message: props.texts?.emailInvalidText,
|
|
140
|
-
},
|
|
141
|
-
}}
|
|
142
|
-
/>
|
|
143
|
-
<div className="flex flex-col md:flex-row">
|
|
130
|
+
</div>
|
|
144
131
|
<Controller
|
|
145
132
|
control={control}
|
|
146
|
-
name="
|
|
147
|
-
rules={{ required: props.texts?.required }}
|
|
133
|
+
name="email"
|
|
148
134
|
render={({ field }) => (
|
|
149
135
|
<HawaTextField
|
|
150
136
|
width="full"
|
|
151
137
|
type="text"
|
|
152
|
-
label={props.texts?.
|
|
153
|
-
helpertext={errors.
|
|
138
|
+
label={props.texts?.emailLabel + " *"}
|
|
139
|
+
helpertext={errors.email?.message}
|
|
154
140
|
{...field}
|
|
155
141
|
value={field.value ?? ""}
|
|
156
142
|
/>
|
|
157
143
|
)}
|
|
144
|
+
rules={{
|
|
145
|
+
required: props.texts?.emailRequiredText,
|
|
146
|
+
pattern: {
|
|
147
|
+
value:
|
|
148
|
+
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
|
|
149
|
+
message: props.texts?.emailInvalidText,
|
|
150
|
+
},
|
|
151
|
+
}}
|
|
158
152
|
/>
|
|
159
|
-
|
|
153
|
+
<div className="flex flex-col md:flex-row">
|
|
154
|
+
<Controller
|
|
155
|
+
control={control}
|
|
156
|
+
name="streetAddress"
|
|
157
|
+
rules={{ required: props.texts?.required }}
|
|
158
|
+
render={({ field }) => (
|
|
159
|
+
<HawaTextField
|
|
160
|
+
width="full"
|
|
161
|
+
type="text"
|
|
162
|
+
label={props.texts?.streetAddressLabel + " *"}
|
|
163
|
+
helpertext={errors.streetAddress?.message}
|
|
164
|
+
{...field}
|
|
165
|
+
value={field.value ?? ""}
|
|
166
|
+
/>
|
|
167
|
+
)}
|
|
168
|
+
/>
|
|
169
|
+
</div>
|
|
160
170
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
171
|
+
<div className="flex flex-col md:flex-row">
|
|
172
|
+
<Controller
|
|
173
|
+
control={control}
|
|
174
|
+
name="province"
|
|
175
|
+
rules={{ required: props.texts?.required }}
|
|
176
|
+
render={({ field }) => (
|
|
177
|
+
<HawaTextField
|
|
178
|
+
width="full"
|
|
179
|
+
type="text"
|
|
180
|
+
label={props.texts?.stateLabel + " *"}
|
|
181
|
+
helpertext={errors.province?.message}
|
|
182
|
+
{...field}
|
|
183
|
+
value={field.value ?? ""}
|
|
184
|
+
/>
|
|
185
|
+
)}
|
|
186
|
+
/>
|
|
187
|
+
<div style={{ width: 20 }} />
|
|
178
188
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
189
|
+
<Controller
|
|
190
|
+
control={control}
|
|
191
|
+
name="city"
|
|
192
|
+
rules={{ required: props.texts?.required }}
|
|
193
|
+
render={({ field }) => (
|
|
194
|
+
<HawaTextField
|
|
195
|
+
width="full"
|
|
196
|
+
type="text"
|
|
197
|
+
label={props.texts?.cityLabel + " *"}
|
|
198
|
+
helpertext={errors.city?.message}
|
|
199
|
+
{...field}
|
|
200
|
+
value={field.value ?? ""}
|
|
201
|
+
/>
|
|
202
|
+
)}
|
|
203
|
+
/>
|
|
204
|
+
</div>
|
|
205
|
+
<div className="flex flex-col md:flex-row">
|
|
206
|
+
<Controller
|
|
207
|
+
control={control}
|
|
208
|
+
name="buildingNumber"
|
|
209
|
+
rules={{ required: props.texts?.required }}
|
|
210
|
+
render={({ field }) => (
|
|
211
|
+
<HawaTextField
|
|
212
|
+
width="full"
|
|
213
|
+
type="text"
|
|
214
|
+
label={props.texts?.buildingNumberLabel + " *"}
|
|
215
|
+
helpertext={errors.buildingNumber?.message}
|
|
216
|
+
{...field}
|
|
217
|
+
value={field.value ?? ""}
|
|
218
|
+
/>
|
|
219
|
+
)}
|
|
220
|
+
/>
|
|
221
|
+
<div style={{ width: 20 }} />
|
|
222
|
+
<Controller
|
|
223
|
+
control={control}
|
|
224
|
+
name="zipCode"
|
|
225
|
+
rules={{ required: props.texts?.required }}
|
|
226
|
+
render={({ field }) => (
|
|
227
|
+
<HawaTextField
|
|
228
|
+
width="full"
|
|
229
|
+
type="number"
|
|
230
|
+
label={props.texts?.zipCodeLabel + " *"}
|
|
231
|
+
helpertext={errors.zipCode?.message}
|
|
232
|
+
{...field}
|
|
233
|
+
value={field.value ?? ""}
|
|
234
|
+
/>
|
|
235
|
+
)}
|
|
236
|
+
/>
|
|
237
|
+
{/* <div style={{ width: 20 }} /> */}
|
|
238
|
+
</div>
|
|
239
|
+
<div className="mb-3">
|
|
240
|
+
<Controller
|
|
241
|
+
control={control}
|
|
242
|
+
name="country"
|
|
243
|
+
rules={{ required: props.texts?.required }}
|
|
244
|
+
render={({ field }) => (
|
|
245
|
+
<HawaSelect
|
|
246
|
+
native
|
|
247
|
+
label={props.texts?.countryLabel + " *"}
|
|
248
|
+
helperText={errors.country?.message}
|
|
249
|
+
options={countries}
|
|
250
|
+
getOptionLabel={(countries) => countries.country_label}
|
|
251
|
+
onChange={(e) => field.onChange(e.country_label)}
|
|
252
|
+
value={field.value ?? ""}
|
|
253
|
+
>
|
|
254
|
+
<option></option>
|
|
255
|
+
{props.countriesList.map((country: any, i: any) => (
|
|
256
|
+
<option key={i}>{country}</option>
|
|
257
|
+
))}
|
|
258
|
+
</HawaSelect>
|
|
259
|
+
)}
|
|
260
|
+
/>
|
|
261
|
+
</div>
|
|
262
|
+
</FormProvider>
|
|
263
|
+
</div>
|
|
264
|
+
</CardContent>
|
|
265
|
+
<CardFooter>
|
|
266
|
+
<Button className="w-full">{props.texts.payNow}</Button>
|
|
267
|
+
</CardFooter>{" "}
|
|
268
|
+
</form>
|
|
269
|
+
</Card>
|
|
259
270
|
)
|
|
260
271
|
}
|
|
@@ -2,6 +2,8 @@ import React, { FC } from "react"
|
|
|
2
2
|
import { HawaButton, HawaTextField } from "../../elements"
|
|
3
3
|
import { Controller, useForm } from "react-hook-form"
|
|
4
4
|
import { HawaContainer } from "../../layout"
|
|
5
|
+
import { Card, CardContent, CardFooter } from "../../elements/Card"
|
|
6
|
+
import { Button } from "../../elements/Button"
|
|
5
7
|
|
|
6
8
|
type CreditCardFormTypes = {
|
|
7
9
|
handle: any
|
|
@@ -17,28 +19,10 @@ export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
|
|
|
17
19
|
} = methods
|
|
18
20
|
|
|
19
21
|
return (
|
|
20
|
-
<
|
|
21
|
-
{" "}
|
|
22
|
+
<Card>
|
|
22
23
|
<form onSubmit={handleSubmit(props.handle)}>
|
|
23
|
-
<
|
|
24
|
-
<
|
|
25
|
-
control={control}
|
|
26
|
-
name="cardName"
|
|
27
|
-
render={({ field }) => (
|
|
28
|
-
<HawaTextField
|
|
29
|
-
width="full"
|
|
30
|
-
name="password"
|
|
31
|
-
placeholder="Enter password"
|
|
32
|
-
type="tel"
|
|
33
|
-
label="Card Number"
|
|
34
|
-
helpertext={errors.password?.message}
|
|
35
|
-
/>
|
|
36
|
-
)}
|
|
37
|
-
rules={{
|
|
38
|
-
required: "Password is rquired",
|
|
39
|
-
}}
|
|
40
|
-
/>
|
|
41
|
-
<div className="w-1/4">
|
|
24
|
+
<CardContent headless>
|
|
25
|
+
<div className="flex flex-row gap-4">
|
|
42
26
|
<Controller
|
|
43
27
|
control={control}
|
|
44
28
|
name="cardName"
|
|
@@ -46,11 +30,9 @@ export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
|
|
|
46
30
|
<HawaTextField
|
|
47
31
|
width="full"
|
|
48
32
|
name="password"
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
type="password"
|
|
53
|
-
label="CCV"
|
|
33
|
+
placeholder="Enter password"
|
|
34
|
+
type="tel"
|
|
35
|
+
label="Card Number"
|
|
54
36
|
helpertext={errors.password?.message}
|
|
55
37
|
/>
|
|
56
38
|
)}
|
|
@@ -58,52 +40,69 @@ export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
|
|
|
58
40
|
required: "Password is rquired",
|
|
59
41
|
}}
|
|
60
42
|
/>
|
|
43
|
+
<div className="w-1/4">
|
|
44
|
+
<Controller
|
|
45
|
+
control={control}
|
|
46
|
+
name="cardName"
|
|
47
|
+
render={({ field }) => (
|
|
48
|
+
<HawaTextField
|
|
49
|
+
width="full"
|
|
50
|
+
name="password"
|
|
51
|
+
maxLength="3"
|
|
52
|
+
autoComplete="cc-number"
|
|
53
|
+
placeholder=""
|
|
54
|
+
type="password"
|
|
55
|
+
label="CCV"
|
|
56
|
+
helpertext={errors.password?.message}
|
|
57
|
+
/>
|
|
58
|
+
)}
|
|
59
|
+
rules={{
|
|
60
|
+
required: "Password is rquired",
|
|
61
|
+
}}
|
|
62
|
+
/>
|
|
63
|
+
</div>
|
|
61
64
|
</div>
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
onClick={props.handlePayWithCreditCard}
|
|
103
|
-
>
|
|
104
|
-
Pay with Credit Card
|
|
105
|
-
</HawaButton>
|
|
65
|
+
<Controller
|
|
66
|
+
control={control}
|
|
67
|
+
name="cardName"
|
|
68
|
+
render={({ field }) => (
|
|
69
|
+
<HawaTextField
|
|
70
|
+
width="full"
|
|
71
|
+
name="password"
|
|
72
|
+
placeholder="Enter password"
|
|
73
|
+
type="text"
|
|
74
|
+
label="Name On Card"
|
|
75
|
+
helpertext={errors.password?.message}
|
|
76
|
+
/>
|
|
77
|
+
)}
|
|
78
|
+
rules={{
|
|
79
|
+
required: "Password is rquired",
|
|
80
|
+
}}
|
|
81
|
+
/>
|
|
82
|
+
<Controller
|
|
83
|
+
control={control}
|
|
84
|
+
name="cardName"
|
|
85
|
+
render={({ field }) => (
|
|
86
|
+
<HawaTextField
|
|
87
|
+
width="full"
|
|
88
|
+
name="password"
|
|
89
|
+
placeholder="Enter password"
|
|
90
|
+
type="password"
|
|
91
|
+
label="Expiry Date"
|
|
92
|
+
helpertext={errors.password?.message}
|
|
93
|
+
/>
|
|
94
|
+
)}
|
|
95
|
+
rules={{
|
|
96
|
+
required: "Password is rquired",
|
|
97
|
+
}}
|
|
98
|
+
/>
|
|
99
|
+
</CardContent>
|
|
100
|
+
<CardFooter>
|
|
101
|
+
<Button className="w-full" onClick={props.handlePayWithCreditCard}>
|
|
102
|
+
Pay with Credit Card
|
|
103
|
+
</Button>
|
|
104
|
+
</CardFooter>
|
|
106
105
|
</form>
|
|
107
|
-
</
|
|
106
|
+
</Card>
|
|
108
107
|
)
|
|
109
108
|
}
|