@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
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { FC } from "react"
|
|
2
2
|
import { HawaTypography, HawaLogoButton } from "../../elements"
|
|
3
3
|
import { HawaContainer } from "../../layout"
|
|
4
|
+
import { Card, CardContent, CardHeader, CardTitle } from "../../elements/Card"
|
|
4
5
|
|
|
5
6
|
type SelectPaymentTypes = {
|
|
6
7
|
viaMada: boolean
|
|
@@ -28,57 +29,61 @@ type SelectPaymentTypes = {
|
|
|
28
29
|
|
|
29
30
|
export const SelectPayment: FC<SelectPaymentTypes> = (props) => {
|
|
30
31
|
return (
|
|
31
|
-
<
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
32
|
+
<Card>
|
|
33
|
+
<CardHeader>
|
|
34
|
+
<CardTitle>Choose Payment Method</CardTitle>
|
|
35
|
+
</CardHeader>
|
|
36
|
+
<CardContent>
|
|
37
|
+
{props.viaWallet && (
|
|
38
|
+
<HawaLogoButton
|
|
39
|
+
logo="wallet"
|
|
40
|
+
buttonText={props.walletLabel}
|
|
41
|
+
onClick={props.handleWallet}
|
|
42
|
+
/>
|
|
43
|
+
)}
|
|
44
|
+
{props.viaCreditCard && (
|
|
45
|
+
<HawaLogoButton
|
|
46
|
+
logo="visa/master"
|
|
47
|
+
buttonText={props.visaMasterLabel}
|
|
48
|
+
onClick={props.handleCreditCard}
|
|
49
|
+
/>
|
|
50
|
+
)}
|
|
51
|
+
{props.viaMada && (
|
|
52
|
+
<HawaLogoButton
|
|
53
|
+
logo="mada"
|
|
54
|
+
buttonText={props.madaLabel}
|
|
55
|
+
onClick={props.handleMada}
|
|
56
|
+
/>
|
|
57
|
+
)}
|
|
58
|
+
{props.viaSTCPay && (
|
|
59
|
+
<HawaLogoButton
|
|
60
|
+
logo="stcpay"
|
|
61
|
+
buttonText={props.stcPayLabel}
|
|
62
|
+
onClick={props.handleSTCPay}
|
|
63
|
+
/>
|
|
64
|
+
)}
|
|
65
|
+
{props.viaPayPal && (
|
|
66
|
+
<HawaLogoButton
|
|
67
|
+
logo="paypal"
|
|
68
|
+
buttonText={props.paypalLabel}
|
|
69
|
+
onClick={props.handlePayPal}
|
|
70
|
+
/>
|
|
71
|
+
)}
|
|
72
|
+
{props.viaGooglePay && (
|
|
73
|
+
<HawaLogoButton
|
|
74
|
+
logo="googlepay"
|
|
75
|
+
buttonText={props.googlePayLabel}
|
|
76
|
+
onClick={props.handleGooglePay}
|
|
77
|
+
/>
|
|
78
|
+
)}
|
|
79
|
+
{props.viaApplePay && (
|
|
80
|
+
<HawaLogoButton
|
|
81
|
+
logo="applepay"
|
|
82
|
+
buttonText={props.applePayLabel}
|
|
83
|
+
onClick={props.handleApplePay}
|
|
84
|
+
/>
|
|
85
|
+
)}
|
|
86
|
+
</CardContent>
|
|
87
|
+
</Card>
|
|
83
88
|
)
|
|
84
89
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { FC } from "react"
|
|
2
2
|
import { HawaButton } from "../../elements"
|
|
3
3
|
import { HawaContainer } from "../../layout"
|
|
4
|
+
import { Card, CardContent } from "../../elements/Card"
|
|
4
5
|
|
|
5
6
|
type ReferralAccount = {
|
|
6
7
|
referralLink: string
|
|
@@ -12,54 +13,56 @@ export const ReferralAccount: FC<ReferralAccount> = ({
|
|
|
12
13
|
referralCode,
|
|
13
14
|
}) => {
|
|
14
15
|
return (
|
|
15
|
-
<
|
|
16
|
-
<
|
|
17
|
-
<div className="
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
16
|
+
<Card>
|
|
17
|
+
<CardContent headless>
|
|
18
|
+
<div className="my-2 mt-0">
|
|
19
|
+
<div className="mb-1">Referral Code</div>
|
|
20
|
+
<div className="flex flex-row items-center justify-between rounded border bg-background">
|
|
21
|
+
<span className="ml-3 font-bold">{referralCode}</span>
|
|
22
|
+
<HawaButton
|
|
23
|
+
tooltip="Copy"
|
|
24
|
+
className="mr-1.5"
|
|
25
|
+
onClick={() => navigator.clipboard.writeText(referralCode)}
|
|
26
|
+
>
|
|
27
|
+
<span className="bg-red flex items-center justify-center">
|
|
28
|
+
<svg
|
|
29
|
+
stroke="currentColor"
|
|
30
|
+
fill="currentColor"
|
|
31
|
+
stroke-width="0"
|
|
32
|
+
viewBox="0 0 512 512"
|
|
33
|
+
height="1em"
|
|
34
|
+
width="1em"
|
|
35
|
+
>
|
|
36
|
+
<path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z"></path>
|
|
37
|
+
</svg>{" "}
|
|
38
|
+
</span>
|
|
39
|
+
</HawaButton>
|
|
40
|
+
</div>
|
|
38
41
|
</div>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
</
|
|
59
|
-
</
|
|
60
|
-
</
|
|
42
|
+
<div className="my-2 mt-0">
|
|
43
|
+
<div className="mb-1">Referral Link</div>
|
|
44
|
+
<div className="flex flex-row items-center justify-between rounded border bg-background">
|
|
45
|
+
<span className="ml-3 font-bold">{referralLink}</span>
|
|
46
|
+
<HawaButton
|
|
47
|
+
className="mr-1.5"
|
|
48
|
+
onClick={() => navigator.clipboard.writeText(referralLink)}
|
|
49
|
+
>
|
|
50
|
+
<span className="bg-red flex items-center justify-center">
|
|
51
|
+
<svg
|
|
52
|
+
stroke="currentColor"
|
|
53
|
+
fill="currentColor"
|
|
54
|
+
stroke-width="0"
|
|
55
|
+
viewBox="0 0 512 512"
|
|
56
|
+
height="1em"
|
|
57
|
+
width="1em"
|
|
58
|
+
>
|
|
59
|
+
<path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z"></path>
|
|
60
|
+
</svg>{" "}
|
|
61
|
+
</span>
|
|
62
|
+
</HawaButton>
|
|
63
|
+
</div>
|
|
61
64
|
</div>
|
|
62
|
-
</
|
|
63
|
-
</
|
|
65
|
+
</CardContent>
|
|
66
|
+
</Card>
|
|
64
67
|
)
|
|
65
68
|
}
|
|
@@ -22,7 +22,7 @@ export const HawaRadio: FC<RadioTypes> = ({
|
|
|
22
22
|
}) => {
|
|
23
23
|
const [selectedOption, setSelectedOption] = useState(props.defaultValue)
|
|
24
24
|
let activeTabStyle =
|
|
25
|
-
"inline-block py-2 px-4 w-full text-white bg-
|
|
25
|
+
"inline-block py-2 px-4 w-full text-white bg-primary rounded active"
|
|
26
26
|
let inactiveTabStyle =
|
|
27
27
|
"inline-block py-2 px-4 w-full bg-gray-100 rounded hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
|
|
28
28
|
let orientationStyle = {
|
package/src/styles.css
CHANGED
|
@@ -1059,6 +1059,9 @@ video {
|
|
|
1059
1059
|
.h-96 {
|
|
1060
1060
|
height: 24rem;
|
|
1061
1061
|
}
|
|
1062
|
+
.h-\[1\.2rem\] {
|
|
1063
|
+
height: 1.2rem;
|
|
1064
|
+
}
|
|
1062
1065
|
.h-\[150px\] {
|
|
1063
1066
|
height: 150px;
|
|
1064
1067
|
}
|
|
@@ -1188,6 +1191,9 @@ video {
|
|
|
1188
1191
|
.w-9 {
|
|
1189
1192
|
width: 2.25rem;
|
|
1190
1193
|
}
|
|
1194
|
+
.w-\[1\.2rem\] {
|
|
1195
|
+
width: 1.2rem;
|
|
1196
|
+
}
|
|
1191
1197
|
.w-\[12px\] {
|
|
1192
1198
|
width: 12px;
|
|
1193
1199
|
}
|
|
@@ -1338,6 +1344,11 @@ video {
|
|
|
1338
1344
|
--tw-rotate: 90deg;
|
|
1339
1345
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1340
1346
|
}
|
|
1347
|
+
.scale-100 {
|
|
1348
|
+
--tw-scale-x: 1;
|
|
1349
|
+
--tw-scale-y: 1;
|
|
1350
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1351
|
+
}
|
|
1341
1352
|
.transform {
|
|
1342
1353
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1343
1354
|
}
|
|
@@ -1819,9 +1830,6 @@ video {
|
|
|
1819
1830
|
--tw-bg-opacity: 1;
|
|
1820
1831
|
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
|
|
1821
1832
|
}
|
|
1822
|
-
.bg-buttonPrimary-300 {
|
|
1823
|
-
background-color: hsl(var(--button-primary-300));
|
|
1824
|
-
}
|
|
1825
1833
|
.bg-buttonPrimary-500 {
|
|
1826
1834
|
background-color: hsl(var(--button-primary-500));
|
|
1827
1835
|
}
|
|
@@ -3123,6 +3131,19 @@ body {
|
|
|
3123
3131
|
:is([dir="rtl"] .rtl\:pr-\[5px\]) {
|
|
3124
3132
|
padding-right: 5px;
|
|
3125
3133
|
}
|
|
3134
|
+
:is(.dark .dark\:-rotate-90) {
|
|
3135
|
+
--tw-rotate: -90deg;
|
|
3136
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
3137
|
+
}
|
|
3138
|
+
:is(.dark .dark\:rotate-0) {
|
|
3139
|
+
--tw-rotate: 0deg;
|
|
3140
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
3141
|
+
}
|
|
3142
|
+
:is(.dark .dark\:scale-100) {
|
|
3143
|
+
--tw-scale-x: 1;
|
|
3144
|
+
--tw-scale-y: 1;
|
|
3145
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
3146
|
+
}
|
|
3126
3147
|
:is(.dark .dark\:border-blue-500) {
|
|
3127
3148
|
--tw-border-opacity: 1;
|
|
3128
3149
|
border-color: rgb(59 130 246 / var(--tw-border-opacity));
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { FC } from "react";
|
|
2
|
-
type TNewsletter = {
|
|
3
|
-
variant?: "outlined" | "contained" | "neobrutalism";
|
|
4
|
-
texts: {
|
|
5
|
-
wantToStayUpdated: string;
|
|
6
|
-
subscribeToNewsletter: string;
|
|
7
|
-
submit: string;
|
|
8
|
-
};
|
|
9
|
-
handleNewsletterSub: (e: string) => void;
|
|
10
|
-
};
|
|
11
|
-
export declare const Newsletter: FC<TNewsletter>;
|
|
12
|
-
export {};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { FC } from "react";
|
|
2
|
-
type TNewsletter = {
|
|
3
|
-
variant?: "outlined" | "contained" | "neobrutalism";
|
|
4
|
-
texts: {
|
|
5
|
-
wantToStayUpdated: string;
|
|
6
|
-
subscribeToNewsletter: string;
|
|
7
|
-
submit: string;
|
|
8
|
-
};
|
|
9
|
-
handleNewsletterSub: (e: string) => void;
|
|
10
|
-
};
|
|
11
|
-
export declare const Newsletter: FC<TNewsletter>;
|
|
12
|
-
export {};
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import React, { FC } from "react"
|
|
2
|
-
import { HawaButton, HawaTextField } from "../../elements"
|
|
3
|
-
import { HawaContainer } from "../../layout"
|
|
4
|
-
|
|
5
|
-
type TNewsletter = {
|
|
6
|
-
variant?: "outlined" | "contained" | "neobrutalism"
|
|
7
|
-
texts: {
|
|
8
|
-
wantToStayUpdated: string
|
|
9
|
-
subscribeToNewsletter: string
|
|
10
|
-
submit: string
|
|
11
|
-
}
|
|
12
|
-
handleNewsletterSub: (e: string) => void
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export const Newsletter: FC<TNewsletter> = ({
|
|
16
|
-
variant = "contained",
|
|
17
|
-
texts,
|
|
18
|
-
handleNewsletterSub,
|
|
19
|
-
}) => {
|
|
20
|
-
return (
|
|
21
|
-
<HawaContainer variant={variant} centered={true}>
|
|
22
|
-
<div className="p-4 pt-0">
|
|
23
|
-
<h1 className="font-bold">
|
|
24
|
-
{texts?.wantToStayUpdated ?? "Want to stay updated?"}
|
|
25
|
-
</h1>
|
|
26
|
-
<span>
|
|
27
|
-
{texts?.subscribeToNewsletter ?? "Subscribe to our newsletter"}
|
|
28
|
-
</span>
|
|
29
|
-
</div>
|
|
30
|
-
<form
|
|
31
|
-
className="flex flex-row gap-2"
|
|
32
|
-
onSubmit={(e) => {
|
|
33
|
-
e.preventDefault()
|
|
34
|
-
handleNewsletterSub(e.target[0].value)
|
|
35
|
-
}}
|
|
36
|
-
>
|
|
37
|
-
<HawaTextField
|
|
38
|
-
width="full"
|
|
39
|
-
type="email"
|
|
40
|
-
name="email"
|
|
41
|
-
placeholder={"example@sikka.io"}
|
|
42
|
-
margin="none"
|
|
43
|
-
/>
|
|
44
|
-
<HawaButton margins="none">
|
|
45
|
-
{texts?.submit ?? "Submit"}
|
|
46
|
-
</HawaButton>
|
|
47
|
-
</form>
|
|
48
|
-
</HawaContainer>
|
|
49
|
-
)
|
|
50
|
-
}
|