@sikka/hawa 0.1.1 → 0.1.3

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.
Files changed (36) hide show
  1. package/dist/styles.css +24 -3
  2. package/es/blocks/AuthForms/AppLanding.d.ts +1 -0
  3. package/es/blocks/Misc/index.d.ts +0 -1
  4. package/es/index.es.js +3 -3
  5. package/lib/blocks/AuthForms/AppLanding.d.ts +1 -0
  6. package/lib/blocks/Misc/index.d.ts +0 -1
  7. package/lib/index.js +3 -3
  8. package/package.json +1 -1
  9. package/src/blocks/Account/UserProfileForm.tsx +94 -90
  10. package/src/blocks/Account/UserSettingsForm.tsx +7 -14
  11. package/src/blocks/AuthForms/AppLanding.tsx +71 -17
  12. package/src/blocks/AuthForms/CodeConfirmation.tsx +44 -43
  13. package/src/blocks/AuthForms/NewPasswordForm.tsx +66 -51
  14. package/src/blocks/AuthForms/ResetPasswordForm.tsx +53 -45
  15. package/src/blocks/AuthForms/SignInForm.tsx +0 -2
  16. package/src/blocks/AuthForms/SignInPhone.tsx +30 -29
  17. package/src/blocks/AuthForms/SignUpForm.tsx +0 -1
  18. package/src/blocks/Misc/EmptyState.tsx +27 -23
  19. package/src/blocks/Misc/LeadGenerator.tsx +27 -24
  20. package/src/blocks/Misc/NoPermission.tsx +25 -22
  21. package/src/blocks/Misc/NotFound.tsx +15 -15
  22. package/src/blocks/Misc/index.ts +0 -1
  23. package/src/blocks/Payment/ChargeWalletForm.tsx +25 -24
  24. package/src/blocks/Payment/CheckoutForm.tsx +194 -189
  25. package/src/blocks/Payment/Confirmation.tsx +36 -34
  26. package/src/blocks/Payment/CreditCardForm.tsx +71 -73
  27. package/src/blocks/Payment/PayWithWallet.tsx +13 -15
  28. package/src/blocks/Payment/SelectPayment.tsx +58 -54
  29. package/src/blocks/Referral/ReferralAccount.tsx +52 -49
  30. package/src/blocks/Referral/ReferralSettlement.tsx +64 -62
  31. package/src/blocks/Referral/ReferralStats.tsx +53 -51
  32. package/src/elements/HawaRadio.tsx +1 -1
  33. package/src/styles.css +24 -3
  34. package/es/blocks/Misc/Newsletter.d.ts +0 -12
  35. package/lib/blocks/Misc/Newsletter.d.ts +0 -12
  36. package/src/blocks/Misc/Newsletter.tsx +0 -50
package/src/blocks/Payment/CheckoutForm.tsx CHANGED
@@ -1,13 +1,15 @@
1
1
  import React, { FC } from "react"
2
- import {
3
- HawaTextField,
4
- HawaTable,
5
- HawaSelect,
6
- HawaButton,
7
- } from "../../elements"
2
+ import { HawaTextField, HawaTable, HawaSelect } from "../../elements"
8
3
  import { Controller, FormProvider, useForm } from "react-hook-form"
9
- import { HawaContainer } from "../../layout"
10
4
  import countries from "../../countries"
5
+ import {
6
+ Card,
7
+ CardContent,
8
+ CardFooter,
9
+ CardHeader,
10
+ CardTitle,
11
+ } from "../../elements/Card"
12
+ import { Button } from "../../elements/Button"
11
13
 
12
14
  type CheckoutFormTypes = {
13
15
  lang: string
@@ -58,203 +60,206 @@ export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
58
60
  },
59
61
  }
60
62
  return (
61
- <HawaContainer>
62
- <div>
63
- <div className="mb-2 text-center text-xl font-semibold dark:text-white">
64
- {props.texts.orderDetails}
65
- </div>
66
- <div className="rounded border border-gray-300">
67
- <HawaTable
68
- pagination={false}
69
- direction={isArabic ? "rtl" : "ltr"}
70
- columns={[
71
- { hidden: false, value: "Product" },
72
- { hidden: true, value: "ID" },
73
- { hidden: false, value: "Price" },
74
- ]}
75
- borders="inner"
76
- rows={props.products}
77
- bordersWidth="1"
78
- />
79
- </div>
80
- </div>
81
- <div>
82
- <div className="my-2 text-center text-xl font-semibold dark:text-white">
83
- {props.texts.billingAddress}
63
+ <Card>
64
+ <CardHeader>
65
+ <CardTitle>{props.texts.orderDetails}</CardTitle>
66
+ </CardHeader>
67
+ <CardContent>
68
+ <div>
69
+ <div className="rounded border border-gray-300">
70
+ <HawaTable
71
+ pagination={false}
72
+ direction={isArabic ? "rtl" : "ltr"}
73
+ columns={[
74
+ { hidden: false, value: "Product" },
75
+ { hidden: true, value: "ID" },
76
+ { hidden: false, value: "Price" },
77
+ ]}
78
+ borders="inner"
79
+ rows={props.products}
80
+ bordersWidth="1"
81
+ />
82
+ </div>
84
83
  </div>
84
+ </CardContent>
85
+ <CardHeader>
86
+ <CardTitle>{props.texts.billingAddress}</CardTitle>
87
+ </CardHeader>
88
+ <form onSubmit={handleSubmit(props.handlePayNow)}>
89
+ <CardContent>
90
+ <div>
91
+ <FormProvider {...methods}>
92
+ <div>
93
+ <Controller
94
+ control={control}
95
+ name="firstName"
96
+ rules={{ required: props.texts?.required }}
97
+ render={({ field }) => (
98
+ <HawaTextField
99
+ type="text"
100
+ label={props.texts?.firstNameLabel + " *"}
101
+ helpertext={errors.firstName?.message}
102
+ {...field}
103
+ value={field.value ?? ""}
104
+ />
105
+ )}
106
+ />
107
+ <div style={{ width: 20 }} />
85
108
 
86
- <FormProvider {...methods}>
87
- <form onSubmit={handleSubmit(props.handlePayNow)}>
88
- <div>
89
- <Controller
90
- control={control}
91
- name="firstName"
92
- rules={{ required: props.texts?.required }}
93
- render={({ field }) => (
94
- <HawaTextField
95
- type="text"
96
- label={props.texts?.firstNameLabel + " *"}
97
- helpertext={errors.firstName?.message}
98
- {...field}
99
- value={field.value ?? ""}
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 ?? ""}
109
+ <Controller
110
+ control={control}
111
+ name="lastName"
112
+ rules={{ required: props.texts?.required }}
113
+ render={({ field }) => (
114
+ <HawaTextField
115
+ width="full"
116
+ type="text"
117
+ label={props.texts?.lastNameLabel + " *"}
118
+ helpertext={errors.lastName?.message}
119
+ {...field}
120
+ value={field.value ?? ""}
121
+ />
122
+ )}
132
123
  />
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">
124
+ </div>
144
125
  <Controller
145
126
  control={control}
146
- name="streetAddress"
147
- rules={{ required: props.texts?.required }}
127
+ name="email"
148
128
  render={({ field }) => (
149
129
  <HawaTextField
150
130
  width="full"
151
131
  type="text"
152
- label={props.texts?.streetAddressLabel + " *"}
153
- helpertext={errors.streetAddress?.message}
132
+ label={props.texts?.emailLabel + " *"}
133
+ helpertext={errors.email?.message}
154
134
  {...field}
155
135
  value={field.value ?? ""}
156
136
  />
157
137
  )}
138
+ rules={{
139
+ required: props.texts?.emailRequiredText,
140
+ pattern: {
141
+ value:
142
+ /^(([^<>()[\]\\.,;:\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,}))$/,
143
+ message: props.texts?.emailInvalidText,
144
+ },
145
+ }}
158
146
  />
159
- </div>
147
+ <div className="flex flex-col md:flex-row">
148
+ <Controller
149
+ control={control}
150
+ name="streetAddress"
151
+ rules={{ required: props.texts?.required }}
152
+ render={({ field }) => (
153
+ <HawaTextField
154
+ width="full"
155
+ type="text"
156
+ label={props.texts?.streetAddressLabel + " *"}
157
+ helpertext={errors.streetAddress?.message}
158
+ {...field}
159
+ value={field.value ?? ""}
160
+ />
161
+ )}
162
+ />
163
+ </div>
160
164
 
161
- <div className="flex flex-col md:flex-row">
162
- <Controller
163
- control={control}
164
- name="province"
165
- rules={{ required: props.texts?.required }}
166
- render={({ field }) => (
167
- <HawaTextField
168
- width="full"
169
- type="text"
170
- label={props.texts?.stateLabel + " *"}
171
- helpertext={errors.province?.message}
172
- {...field}
173
- value={field.value ?? ""}
174
- />
175
- )}
176
- />
177
- <div style={{ width: 20 }} />
165
+ <div className="flex flex-col md:flex-row">
166
+ <Controller
167
+ control={control}
168
+ name="province"
169
+ rules={{ required: props.texts?.required }}
170
+ render={({ field }) => (
171
+ <HawaTextField
172
+ width="full"
173
+ type="text"
174
+ label={props.texts?.stateLabel + " *"}
175
+ helpertext={errors.province?.message}
176
+ {...field}
177
+ value={field.value ?? ""}
178
+ />
179
+ )}
180
+ />
181
+ <div style={{ width: 20 }} />
178
182
 
179
- <Controller
180
- control={control}
181
- name="city"
182
- rules={{ required: props.texts?.required }}
183
- render={({ field }) => (
184
- <HawaTextField
185
- width="full"
186
- type="text"
187
- label={props.texts?.cityLabel + " *"}
188
- helpertext={errors.city?.message}
189
- {...field}
190
- value={field.value ?? ""}
191
- />
192
- )}
193
- />
194
- </div>
195
- <div className="flex flex-col md:flex-row">
196
- <Controller
197
- control={control}
198
- name="buildingNumber"
199
- rules={{ required: props.texts?.required }}
200
- render={({ field }) => (
201
- <HawaTextField
202
- width="full"
203
- type="text"
204
- label={props.texts?.buildingNumberLabel + " *"}
205
- helpertext={errors.buildingNumber?.message}
206
- {...field}
207
- value={field.value ?? ""}
208
- />
209
- )}
210
- />
211
- <div style={{ width: 20 }} />
212
- <Controller
213
- control={control}
214
- name="zipCode"
215
- rules={{ required: props.texts?.required }}
216
- render={({ field }) => (
217
- <HawaTextField
218
- width="full"
219
- type="number"
220
- label={props.texts?.zipCodeLabel + " *"}
221
- helpertext={errors.zipCode?.message}
222
- {...field}
223
- value={field.value ?? ""}
224
- />
225
- )}
226
- />
227
- {/* <div style={{ width: 20 }} /> */}
228
- </div>
229
- <div className="mb-3">
230
- <Controller
231
- control={control}
232
- name="country"
233
- rules={{ required: props.texts?.required }}
234
- render={({ field }) => (
235
- <HawaSelect
236
- native
237
- label={props.texts?.countryLabel + " *"}
238
- helperText={errors.country?.message}
239
- options={countries}
240
- getOptionLabel={(countries) => countries.country_label}
241
- onChange={(e) => field.onChange(e.country_label)}
242
- value={field.value ?? ""}
243
- >
244
- <option></option>
245
- {props.countriesList.map((country: any, i: any) => (
246
- <option key={i}>{country}</option>
247
- ))}
248
- </HawaSelect>
249
- )}
250
- />
251
- </div>
252
- <HawaButton color="primary" width="full">
253
- {props.texts.payNow}
254
- </HawaButton>
255
- </form>
256
- </FormProvider>
257
- </div>
258
- </HawaContainer>
183
+ <Controller
184
+ control={control}
185
+ name="city"
186
+ rules={{ required: props.texts?.required }}
187
+ render={({ field }) => (
188
+ <HawaTextField
189
+ width="full"
190
+ type="text"
191
+ label={props.texts?.cityLabel + " *"}
192
+ helpertext={errors.city?.message}
193
+ {...field}
194
+ value={field.value ?? ""}
195
+ />
196
+ )}
197
+ />
198
+ </div>
199
+ <div className="flex flex-col md:flex-row">
200
+ <Controller
201
+ control={control}
202
+ name="buildingNumber"
203
+ rules={{ required: props.texts?.required }}
204
+ render={({ field }) => (
205
+ <HawaTextField
206
+ width="full"
207
+ type="text"
208
+ label={props.texts?.buildingNumberLabel + " *"}
209
+ helpertext={errors.buildingNumber?.message}
210
+ {...field}
211
+ value={field.value ?? ""}
212
+ />
213
+ )}
214
+ />
215
+ <div style={{ width: 20 }} />
216
+ <Controller
217
+ control={control}
218
+ name="zipCode"
219
+ rules={{ required: props.texts?.required }}
220
+ render={({ field }) => (
221
+ <HawaTextField
222
+ width="full"
223
+ type="number"
224
+ label={props.texts?.zipCodeLabel + " *"}
225
+ helpertext={errors.zipCode?.message}
226
+ {...field}
227
+ value={field.value ?? ""}
228
+ />
229
+ )}
230
+ />
231
+ {/* <div style={{ width: 20 }} /> */}
232
+ </div>
233
+ <div className="mb-3">
234
+ <Controller
235
+ control={control}
236
+ name="country"
237
+ rules={{ required: props.texts?.required }}
238
+ render={({ field }) => (
239
+ <HawaSelect
240
+ native
241
+ label={props.texts?.countryLabel + " *"}
242
+ helperText={errors.country?.message}
243
+ options={countries}
244
+ getOptionLabel={(countries) => countries.country_label}
245
+ onChange={(e) => field.onChange(e.country_label)}
246
+ value={field.value ?? ""}
247
+ >
248
+ <option></option>
249
+ {props.countriesList.map((country: any, i: any) => (
250
+ <option key={i}>{country}</option>
251
+ ))}
252
+ </HawaSelect>
253
+ )}
254
+ />
255
+ </div>
256
+ </FormProvider>
257
+ </div>
258
+ </CardContent>
259
+ <CardFooter>
260
+ <Button className="w-full">{props.texts.payNow}</Button>
261
+ </CardFooter>{" "}
262
+ </form>
263
+ </Card>
259
264
  )
260
265
  }
package/src/blocks/Payment/Confirmation.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { FC } from "react"
2
- import { HawaButton, HawaTable } from "../../elements"
3
- import { HawaContainer } from "../../layout"
2
+ import { Card, CardContent } from "../../elements/Card"
3
+ import { Button } from "../../elements/Button"
4
4
 
5
5
  type ConfirmationPageTypes = {
6
6
  texts: {
@@ -42,19 +42,20 @@ export const ConfirmationPage: FC<ConfirmationPageTypes> = (props) => {
42
42
  let isArabic = props.lang === "ar"
43
43
 
44
44
  return (
45
- <HawaContainer>
46
- {" "}
47
- <div className="py-5 text-center text-3xl font-bold dark:text-white">
48
- {props.confirmationTitle}
49
- </div>
50
- <div className="py-5 dark:text-white">
51
- <div className="mb-2 text-center">
52
- {props.texts.successMessage} <strong>{props.userEmail}</strong>
45
+ <Card>
46
+ <CardContent headless>
47
+ {" "}
48
+ <div className="py-5 text-center text-3xl font-bold dark:text-white">
49
+ {props.confirmationTitle}
53
50
  </div>
54
- <div className="text-center">{props.texts.yourOrderNumber}</div>
55
- <div className="text-center font-bold">{props.orderNumber}</div>
56
- </div>
57
- {/* <div className="py-5">
51
+ <div className="py-5 dark:text-white">
52
+ <div className="mb-2 text-center">
53
+ {props.texts.successMessage} <strong>{props.userEmail}</strong>
54
+ </div>
55
+ <div className="text-center">{props.texts.yourOrderNumber}</div>
56
+ <div className="text-center font-bold">{props.orderNumber}</div>
57
+ </div>
58
+ {/* <div className="py-5">
58
59
  <div className="mb-3 text-center text-xl font-semibold">
59
60
  {props.texts.orderDetails}
60
61
  </div>
@@ -69,26 +70,27 @@ export const ConfirmationPage: FC<ConfirmationPageTypes> = (props) => {
69
70
  />
70
71
  )}
71
72
  </div> */}
72
- <div className="flex flex-col items-center justify-center py-5 pt-0">
73
- <HawaButton color="primary" width="full" onClick={props.handlePrint}>
74
- {props.texts.print}
75
- </HawaButton>
76
- <HawaButton color="primary" width="full" onClick={props.handleHistory}>
77
- {props.texts.history}
78
- </HawaButton>
79
- <HawaButton color="primary" width="full" onClick={props.handleHome}>
80
- {props.texts.homePage}
81
- </HawaButton>
82
- <div className="mb-5 mt-5 text-center text-sm dark:text-white">
83
- {props.texts.fasterPaymentNote}
73
+ <div className="flex flex-col items-center justify-center gap-4 py-5 pt-0">
74
+ <Button className="w-full" onClick={props.handlePrint}>
75
+ {props.texts.print}
76
+ </Button>
77
+ <Button className="w-full" onClick={props.handleHistory}>
78
+ {props.texts.history}
79
+ </Button>
80
+ <Button className="w-full" onClick={props.handleHome}>
81
+ {props.texts.homePage}
82
+ </Button>
83
+ <div className=" text-center text-sm dark:text-white">
84
+ {props.texts.fasterPaymentNote}
85
+ </div>
86
+ <a
87
+ className="w-fit cursor-pointer text-center text-xs font-normal dark:text-white"
88
+ onClick={props.handleRefundPolicyLink}
89
+ >
90
+ {props.texts.refundPolicy}
91
+ </a>
84
92
  </div>
85
- <a
86
- className="w-fit cursor-pointer text-center text-xs font-normal dark:text-white"
87
- onClick={props.handleRefundPolicyLink}
88
- >
89
- {props.texts.refundPolicy}
90
- </a>
91
- </div>
92
- </HawaContainer>
93
+ </CardContent>
94
+ </Card>
93
95
  )
94
96
  }