@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.
Files changed (30) 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 +93 -88
  10. package/src/blocks/Account/UserSettingsForm.tsx +7 -13
  11. package/src/blocks/AuthForms/AppLanding.tsx +71 -16
  12. package/src/blocks/AuthForms/CodeConfirmation.tsx +44 -43
  13. package/src/blocks/AuthForms/NewPasswordForm.tsx +65 -50
  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/Misc/EmptyState.tsx +27 -21
  18. package/src/blocks/Misc/LeadGenerator.tsx +27 -22
  19. package/src/blocks/Misc/NoPermission.tsx +25 -21
  20. package/src/blocks/Misc/NotFound.tsx +15 -13
  21. package/src/blocks/Misc/index.ts +0 -1
  22. package/src/blocks/Payment/CheckoutForm.tsx +193 -182
  23. package/src/blocks/Payment/CreditCardForm.tsx +70 -71
  24. package/src/blocks/Payment/SelectPayment.tsx +57 -52
  25. package/src/blocks/Referral/ReferralAccount.tsx +50 -47
  26. package/src/elements/HawaRadio.tsx +1 -1
  27. package/src/styles.css +24 -3
  28. package/es/blocks/Misc/Newsletter.d.ts +0 -12
  29. package/lib/blocks/Misc/Newsletter.d.ts +0 -12
  30. package/src/blocks/Misc/Newsletter.tsx +0 -50
package/src/blocks/AuthForms/ResetPasswordForm.tsx CHANGED
@@ -5,6 +5,7 @@ import {
5
5
  Card,
6
6
  CardContent,
7
7
  CardDescription,
8
+ CardFooter,
8
9
  CardHeader,
9
10
  CardTitle,
10
11
  } from "../../elements/Card"
@@ -36,54 +37,61 @@ export const ResetPasswordForm: FC<ResetPasswordType> = (props) => {
36
37
  } = methods
37
38
  return (
38
39
  <Card>
39
- <CardHeader>
40
- <CardTitle>Reset Password</CardTitle>
41
- <CardDescription>
42
- Enter your email to reset your account password
43
- </CardDescription>
44
- </CardHeader>
45
- <CardContent>
46
- {!props.sent ? (
40
+ {!props.sent ? (
41
+ <>
42
+ <CardHeader>
43
+ <CardTitle>Reset Password</CardTitle>
44
+ <CardDescription>
45
+ Enter your email to reset your account password
46
+ </CardDescription>
47
+ </CardHeader>
47
48
  <form onSubmit={handleSubmit(props.handleResetPassword)}>
48
- <Controller
49
- control={control}
50
- name="email"
51
- render={({ field }) => (
52
- <HawaTextField
53
- width="full"
54
- type="text"
55
- label={props.texts.emailLabel}
56
- helpertext={errors.email?.message}
57
- placeholder={props.texts.emailPlaceholder}
58
- {...field}
59
- value={field.value ?? ""}
60
- />
61
- )}
62
- rules={{
63
- required: props.texts.emailRequiredText,
64
- pattern: {
65
- value:
66
- /^(([^<>()[\]\\.,;:\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,}))$/,
67
- message: props.texts.emailInvalidText,
68
- },
69
- }}
70
- />
71
- <div className=" pb-2 text-left text-sm dark:text-gray-300">
72
- {props.texts.dontHaveAccount ?? "Don't have an account? "}
73
- <span
74
- onClick={props.handleRouteToSignUp}
75
- className="cursor-pointer text-blue-600 dark:text-blue-400"
76
- >
77
- {props.texts.signUpText ?? "Sign Up"}
78
- </span>
79
- </div>
80
-
81
- <Button className="w-full">{props.texts.resetPassword}</Button>
49
+ <CardContent>
50
+ <Controller
51
+ control={control}
52
+ name="email"
53
+ render={({ field }) => (
54
+ <HawaTextField
55
+ width="full"
56
+ type="text"
57
+ label={props.texts.emailLabel}
58
+ helpertext={errors.email?.message}
59
+ placeholder={props.texts.emailPlaceholder}
60
+ {...field}
61
+ value={field.value ?? ""}
62
+ />
63
+ )}
64
+ rules={{
65
+ required: props.texts.emailRequiredText,
66
+ pattern: {
67
+ value:
68
+ /^(([^<>()[\]\\.,;:\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,}))$/,
69
+ message: props.texts.emailInvalidText,
70
+ },
71
+ }}
72
+ />
73
+ <div className=" pb-2 text-left text-sm dark:text-gray-300">
74
+ {props.texts.dontHaveAccount ?? "Don't have an account? "}
75
+ <span
76
+ onClick={props.handleRouteToSignUp}
77
+ className="cursor-pointer text-blue-600 dark:text-blue-400"
78
+ >
79
+ {props.texts.signUpText ?? "Sign Up"}
80
+ </span>
81
+ </div>
82
+ </CardContent>
83
+ <CardFooter>
84
+ <Button type="submit" className="w-full">
85
+ {props.texts.resetPassword}
86
+ </Button>
87
+ </CardFooter>
82
88
  </form>
83
- ) : (
89
+ </>
90
+ ) : (
91
+ <CardContent headless>
84
92
  <div className="text-center">{props.texts.emailSentText}</div>
85
- )}
86
- </CardContent>
93
+ </CardContent>
94
+ )}
87
95
  </Card>
88
96
  )
89
97
  }
package/src/blocks/AuthForms/SignInForm.tsx CHANGED
@@ -3,11 +3,9 @@ import {
3
3
  HawaTextField,
4
4
  HawaLogoButton,
5
5
  HawaAlert,
6
- HawaButton,
7
6
  HawaPhoneInput,
8
7
  } from "../../elements"
9
8
  import { Controller, useForm } from "react-hook-form"
10
- import { HawaContainer } from "../../layout"
11
9
  import { Button } from "../../elements/Button"
12
10
  import { FaGithub, FaGoogle } from "react-icons/fa"
13
11
  import { Card, CardContent, CardFooter, CardHeader } from "../../elements/Card"
package/src/blocks/AuthForms/SignInPhone.tsx CHANGED
@@ -1,7 +1,8 @@
1
1
  import React, { useState, FC } from "react"
2
2
  import { Controller, useForm } from "react-hook-form"
3
- import { HawaButton, HawaPhoneInput } from "../../elements"
4
- import { HawaContainer } from "../../layout"
3
+ import { HawaPhoneInput } from "../../elements"
4
+ import { Card, CardContent } from "../../elements/Card"
5
+ import { Button } from "../../elements/Button"
5
6
 
6
7
  type SignInPhoneTypes = {
7
8
  value: any
@@ -24,33 +25,33 @@ export const SignInPhone: FC<SignInPhoneTypes> = (props) => {
24
25
 
25
26
  const [userPhone, setUserPhone] = useState("")
26
27
  return (
27
- <HawaContainer>
28
- <form
29
- onSubmit={(e) => {
30
- e.preventDefault()
31
- props.handleSignIn(userPhone)
32
- }}
33
- >
34
- <Controller
35
- control={control}
36
- name="phone"
37
- render={({ field }) => (
38
- <HawaPhoneInput
39
- country={props.country ?? ""}
40
- label={props.label ?? ""}
41
- handleChange={(e: any) => setUserPhone(e.target.value)}
42
- {...field}
43
- />
44
- )}
45
- rules={{
46
- required: props.phoneRequiredText,
28
+ <Card>
29
+ <CardContent headless>
30
+ <form
31
+ onSubmit={(e) => {
32
+ e.preventDefault()
33
+ props.handleSignIn(userPhone)
47
34
  }}
48
- />
49
- <div className="mt-2"></div>
50
- <HawaButton color="primary" width="full">
51
- {props.SignInButtonText}
52
- </HawaButton>
53
- </form>
54
- </HawaContainer>
35
+ >
36
+ <Controller
37
+ control={control}
38
+ name="phone"
39
+ render={({ field }) => (
40
+ <HawaPhoneInput
41
+ country={props.country ?? ""}
42
+ label={props.label ?? ""}
43
+ handleChange={(e: any) => setUserPhone(e.target.value)}
44
+ {...field}
45
+ />
46
+ )}
47
+ rules={{
48
+ required: props.phoneRequiredText,
49
+ }}
50
+ />
51
+ <div className="mt-2"></div>
52
+ <Button className="w-full">{props.SignInButtonText}</Button>
53
+ </form>
54
+ </CardContent>
55
+ </Card>
55
56
  )
56
57
  }
package/src/blocks/Misc/EmptyState.tsx CHANGED
@@ -1,6 +1,8 @@
1
1
  import React, { FC } from "react"
2
2
  import { HawaButton } from "../../elements"
3
3
  import { HawaContainer } from "../../layout"
4
+ import { Card, CardContent, CardFooter } from "../../elements/Card"
5
+ import { Button } from "../../elements/Button"
4
6
 
5
7
  type TEmptyState = {
6
8
  variant?: "outlined" | "contained" | "neobrutalism"
@@ -17,27 +19,31 @@ export const EmptyState: FC<TEmptyState> = ({
17
19
  onActionClick,
18
20
  }) => {
19
21
  return (
20
- <HawaContainer variant={variant} centered={true} maxWidth="small">
21
- <div className="flex flex-col items-center justify-center text-center dark:text-white">
22
- <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-buttonPrimary-300 text-6xl font-bold">
23
- <svg
24
- stroke="currentColor"
25
- fill="white"
26
- stroke-width="0"
27
- viewBox="0 0 512 512"
28
- height="0.35em"
29
- width="0.35em"
30
- >
31
- <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
32
- </svg>{" "}
22
+ <Card>
23
+ <CardContent headless>
24
+ <div className="flex flex-col items-center justify-center text-center ">
25
+ <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-primary text-6xl font-bold text-primary-foreground">
26
+ <svg
27
+ stroke="currentColor"
28
+ fill="currentColor"
29
+ stroke-width="0"
30
+ viewBox="0 0 512 512"
31
+ height="0.35em"
32
+ width="0.35em"
33
+ >
34
+ <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
35
+ </svg>
36
+ </div>
37
+ <div className="m-2 text-xl font-bold">
38
+ {texts?.youreCaughtUp ?? "You're all caught up"}
39
+ </div>
33
40
  </div>
34
- <div className="m-2 text-xl font-bold">
35
- {texts?.youreCaughtUp ?? "You're all caught up"}
36
- </div>
37
- </div>
38
- <HawaButton color="primary" width="half" onClick={() => onActionClick()}>
39
- {texts?.actionText ?? "Go Home"}
40
- </HawaButton>
41
- </HawaContainer>
41
+ </CardContent>
42
+ <CardFooter>
43
+ <Button className="w-full" onClick={() => onActionClick()}>
44
+ {texts?.actionText ?? "Go Home"}
45
+ </Button>
46
+ </CardFooter>
47
+ </Card>
42
48
  )
43
49
  }
package/src/blocks/Misc/LeadGenerator.tsx CHANGED
@@ -1,6 +1,15 @@
1
1
  import React, { FC } from "react"
2
2
  import { HawaButton, HawaTextField } from "../../elements"
3
3
  import { HawaContainer } from "../../layout"
4
+ import { Input } from "../../elements/Input"
5
+ import { Button } from "../../elements/Button"
6
+ import {
7
+ Card,
8
+ CardContent,
9
+ CardDescription,
10
+ CardHeader,
11
+ CardTitle,
12
+ } from "../../elements/Card"
4
13
 
5
14
  type TLeadGenerator = {
6
15
  variant?: "outlined" | "contained" | "neobrutalism"
@@ -18,27 +27,23 @@ export const LeadGenerator: FC<TLeadGenerator> = ({
18
27
  handleNewsletterSub,
19
28
  }) => {
20
29
  return (
21
- <HawaContainer variant={variant}>
22
- <div className="mb-4 p-0 pt-0">
23
- <h1 className="font-bold">{texts?.title}</h1>
24
- <span>{texts?.subtitle}</span>
25
- </div>
26
- <form
27
- className="flex flex-row gap-2"
28
- onSubmit={(e) => {
29
- e.preventDefault()
30
- handleNewsletterSub(e.target[0].value)
31
- }}
32
- >
33
- <HawaTextField
34
- width="full"
35
- type="email"
36
- name="email"
37
- placeholder={"example@sikka.io"}
38
- margin="none"
39
- />
40
- <HawaButton margins="none">{texts?.submit ?? "Submit"}</HawaButton>
41
- </form>
42
- </HawaContainer>
30
+ <Card>
31
+ <CardHeader>
32
+ <CardTitle>{texts?.title}</CardTitle>
33
+ <CardDescription>{texts?.subtitle}</CardDescription>
34
+ </CardHeader>
35
+ <CardContent>
36
+ <form
37
+ className="flex flex-row gap-2"
38
+ onSubmit={(e) => {
39
+ e.preventDefault()
40
+ handleNewsletterSub(e.target[0].value)
41
+ }}
42
+ >
43
+ <Input type="email" name="email" placeholder="example@sikka.io" />
44
+ <Button>{texts?.submit ?? "Submit"}</Button>
45
+ </form>
46
+ </CardContent>
47
+ </Card>
43
48
  )
44
49
  }
package/src/blocks/Misc/NoPermission.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { FC } from "react"
2
2
  import { HawaContainer } from "../../layout"
3
+ import { Card, CardContent } from "../../elements/Card"
3
4
 
4
5
  type TNoPermission = {
5
6
  variant?: "outlined" | "contained" | "neobrutalism"
@@ -14,27 +15,30 @@ export const NoPermission: FC<TNoPermission> = ({
14
15
  texts,
15
16
  }) => {
16
17
  return (
17
- <HawaContainer variant={variant} centered={true}>
18
- <div className="flex flex-col items-center justify-center text-center dark:text-white">
19
- <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-buttonPrimary-300 text-6xl font-bold">
20
- <svg
21
- stroke="currentColor"
22
- fill="white"
23
- stroke-width="0"
24
- viewBox="0 0 448 512"
25
- height="0.35em"
26
- width="0.35em"
27
- >
28
- <path d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
29
- </svg> </div>
30
- <div className="m-2 text-xl font-bold">
31
- {texts?.title ?? "You don't have permission"}
18
+ <Card>
19
+ <CardContent headless>
20
+ <div className="flex flex-col items-center justify-center text-center">
21
+ <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-primary text-6xl font-bold text-primary-foreground">
22
+ <svg
23
+ stroke="currentColor"
24
+ fill="currentColor"
25
+ stroke-width="0"
26
+ viewBox="0 0 448 512"
27
+ height="0.35em"
28
+ width="0.35em"
29
+ >
30
+ <path d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
31
+ </svg>{" "}
32
+ </div>
33
+ <div className="m-2 text-xl font-bold">
34
+ {texts?.title ?? "You don't have permission"}
35
+ </div>
36
+ <div>
37
+ {texts?.subtitle ??
38
+ "If you think this is a problem please contact your administrator or our customer support"}
39
+ </div>
32
40
  </div>
33
- <div>
34
- {texts?.subtitle ??
35
- "If you think this is a problem please contact your administrator or our customer support"}
36
- </div>
37
- </div>
38
- </HawaContainer>
41
+ </CardContent>
42
+ </Card>
39
43
  )
40
44
  }
package/src/blocks/Misc/NotFound.tsx CHANGED
@@ -1,6 +1,8 @@
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"
5
+ import { Button } from "../../elements/Button"
4
6
 
5
7
  type NotFoundTypes = {
6
8
  variant?: "outlined" | "contained" | "neobrutalism"
@@ -16,19 +18,19 @@ export const NotFound: FC<NotFoundTypes> = ({
16
18
  texts,
17
19
  }) => {
18
20
  return (
19
- <HawaContainer variant={variant}>
20
- <div className="flex flex-col items-center dark:text-white">
21
- <div className="text-center text-6xl font-bold ">404</div>
22
- <div className="m-2 text-center text-xl font-bold ">
23
- {texts?.pageNotFound ?? "Page Not Found"}
21
+ <Card>
22
+ <CardContent headless>
23
+ <div className="flex flex-col items-center dark:text-white">
24
+ <div className="text-center text-6xl font-bold ">404</div>
25
+ <div className="m-2 text-center text-xl font-bold ">
26
+ {texts?.pageNotFound ?? "Page Not Found"}
27
+ </div>
28
+ <div className="mb-4 text-center">
29
+ {texts?.ifLost ?? "If you're lost please contact us help@sikka.io"}
30
+ </div>
31
+ <Button className="w-full">{texts?.home ?? "Home"}</Button>
24
32
  </div>
25
- <div className="text-center mb-4">
26
- {texts?.ifLost ?? "If you're lost please contact us help@sikka.io"}
27
- </div>
28
- <HawaButton color="primary" width="full" margins="none">
29
- {texts?.home ?? "Home"}
30
- </HawaButton>
31
- </div>
32
- </HawaContainer>
33
+ </CardContent>
34
+ </Card>
33
35
  )
34
36
  }
package/src/blocks/Misc/index.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  export * from "./NotFound"
2
2
  export * from "./EmptyState"
3
- export * from "./Newsletter"
4
3
  export * from "./Testimonial"
5
4
  export * from "./LeadGenerator"
6
5
  export * from "./NoPermission"