@sikka/hawa 0.0.103 → 0.0.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.103",
+  "version": "0.0.104",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/blocks/AuthForms/AppLanding.tsx

@@ -11,10 +11,11 @@ type AppLandingTypes = {
     signUp: string
     lang: string
   }
+  size: "small" | "normal" | "full"
 }
 export const AppLanding: React.FunctionComponent<AppLandingTypes> = (props) => {
   return (
-    <HawaContainer>
+    <HawaContainer maxWidth={props.size}>
       {props.handleSignIn && (
         <HawaButton color="primary" width="full" onClick={props.handleSignIn}>
           {props.texts.signIn}

package/src/blocks/AuthForms/CodeConfirmation.tsx

@@ -7,7 +7,12 @@ type CodeConfirmationTypes = {
   showError: any
   errorTitle: any
   errorText: any
-  texts: any
+  texts: {
+    codeLabel: string
+    codePlaceholder: string
+    codeRequiredText: string
+    confirmText: string
+  }
   handleSignIn: any
 }
 export const CodeConfirmation: React.FunctionComponent<
@@ -21,7 +26,7 @@ export const CodeConfirmation: React.FunctionComponent<
   } = methods
 
   return (
-    <HawaContainer>
+    <HawaContainer maxWidth="small">
       {" "}
       {props.showError && (
         <HawaAlert

package/src/blocks/AuthForms/NewPasswordForm.tsx

@@ -6,11 +6,7 @@ import { HawaContainer } from "../../layout"
 type NewPasswordTypes = {
   handleNewPassword: any
   passwordChanged: any
-  errorText: any
   texts: {
-    emailLabel: string
-    emailPlaceholder: string
-    emailRequiredText: string
     passwordPlaceholder: string
     updatePassword: string
     passwordRequiredText: string
@@ -19,7 +15,6 @@ type NewPasswordTypes = {
     confirmPasswordLabel: string
     confirmPasswordRequiredText: string
     passwordMatchError: string
-    forgotPasswordText: string
     passwordChanged: string
   }
   handleSignIn: any
@@ -46,7 +41,7 @@ export const NewPasswordForm: React.FunctionComponent<NewPasswordTypes> = (
   }
 
   return (
-    <HawaContainer>
+    <HawaContainer maxWidth="small">
       {" "}
       {matchError && (
         <HawaAlert text={props.texts.passwordMatchError} severity="error" />

package/src/blocks/AuthForms/ResetPasswordForm.tsx

@@ -5,10 +5,7 @@ import { HawaContainer } from "../../layout"
 
 type ResetPasswordType = {
   handleResetPassword: any
-  passwordChanged: any
-  errorText: any
   sent: any
-  handleSignIn: any
   texts: {
     emailLabel: string
     emailPlaceholder: string
@@ -30,7 +27,7 @@ export const ResetPasswordForm: React.FunctionComponent<ResetPasswordType> = (
     control,
   } = methods
   return (
-    <HawaContainer>
+    <HawaContainer maxWidth="small">
       {" "}
       {!props.sent ? (
         <form onSubmit={handleSubmit(props.handleResetPassword)}>

package/src/blocks/AuthForms/SignInForm.tsx

@@ -57,7 +57,7 @@ export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {
   } = useForm()
 
   return (
-    <HawaContainer>
+    <HawaContainer maxWidth="small">
       <form onSubmit={handleSubmit(props.handleSignIn)}>
         {props.showError && (
           <HawaAlert

package/src/blocks/AuthForms/SignInPhone.tsx

@@ -27,7 +27,7 @@ export const SignInPhone: React.FunctionComponent<SignInPhoneTypes> = (
     console.log("submitting ", userPhone)
   }
   return (
-    <HawaContainer>
+    <HawaContainer maxWidth="small">
       <form
         onSubmit={handleSubmit(() => console.log("testing submit"))}
         // onSubmit={(e) => {

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -68,7 +68,7 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
   } = methods
 
   return (
-    <HawaContainer>
+    <HawaContainer maxWidth="small">
       <div>
         {props.showError && (
           <HawaAlert

package/src/blocks/Payment/CheckoutForm.tsx

@@ -7,6 +7,7 @@ import {
 } from "../../elements"
 import { Controller, FormProvider, useForm } from "react-hook-form"
 import { HawaContainer } from "../../layout"
+import countries from "../../countries"
 
 type CheckoutFormTypes = {
   lang: string
@@ -242,6 +243,14 @@ export const CheckoutForm: React.FunctionComponent<CheckoutFormTypes> = (
                     // displayEmpty
                     // disableUnderline
                     // validators={["required"]}
+                    options={countries}
+                    getOptionLabel={(countries) => countries.country_label}
+                    // options={[
+                    //   { label: "Saudi Arabia", value: "saudi_arabia" },
+                    //   { label: "Saudi Arabia", value: "saudi_arabia" },
+                    //   { label: "Saudi Arabia", value: "saudi_arabia" },
+                    //   { label: "Saudi Arabia", value: "saudi_arabia" },
+                    // ]}
                     {...field}
                     value={field.value ?? ""}
                   >

package/src/blocks/Referral/ReferralAccount.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+import { FaClone } from "react-icons/fa"
+import { HawaAlert, HawaButton, HawaTable, HawaTooltip } from "../../elements"
+import { HawaContainer } from "../../layout"
+
+type ReferralAccount = {
+  referralLink: string
+  referralCode: string
+}
+
+export const ReferralAccount: React.FunctionComponent<ReferralAccount> = ({
+  referralLink,
+  referralCode,
+}) => {
+  return (
+    <HawaContainer maxWidth="normal">
+      <div className="my-2 mt-0">
+        <div className="mb-1">Referral Code</div>
+        <div className="flex flex-row items-center justify-between rounded-lg bg-white">
+          <span className="ml-3 font-bold">{referralCode}</span>
+          <HawaButton
+            tooltip="Copy"
+            className="mr-1.5"
+            onClick={() => navigator.clipboard.writeText(referralCode)}
+          >
+            <span className="bg-red flex items-center justify-center">
+              <FaClone />
+            </span>
+          </HawaButton>
+        </div>
+      </div>
+      <div className="my-2 mt-0">
+        <div className="mb-1">Referral Link</div>
+        <div className="flex flex-row items-center justify-between rounded-lg bg-white">
+          <span className="ml-3 font-bold">{referralLink}</span>
+          <HawaButton
+            tooltip="Copy"
+            className="mr-1.5"
+            onClick={() => navigator.clipboard.writeText(referralLink)}
+          >
+            <span className="bg-red flex items-center justify-center">
+              <FaClone />
+            </span>
+          </HawaButton>
+        </div>
+      </div>
+    </HawaContainer>
+  )
+}

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -0,0 +1,110 @@
+import React from "react"
+import { FaTimes } from "react-icons/fa"
+import {
+  HawaAlert,
+  HawaButton,
+  HawaChip,
+  HawaSelect,
+  HawaTextField,
+} from "../../elements"
+import { HawaContainer } from "../../layout"
+import { Controller, FormProvider, useForm } from "react-hook-form"
+
+type TReferralSettlement = {
+  referralLink: string
+  referralCode: string
+  withdrawError?: string
+}
+
+export const ReferralSettlement: React.FunctionComponent<
+  TReferralSettlement
+> = ({ referralLink, referralCode, withdrawError }) => {
+  const methods = useForm()
+  const {
+    formState: { errors },
+    handleSubmit,
+    control,
+  } = methods
+  return (
+    <HawaContainer maxWidth="normal">
+      <div>
+        <FormProvider {...methods}>
+          <HawaTextField label={"IBAN"} />
+          <HawaTextField label={"Holder Name"} />
+          <Controller
+            control={control}
+            name="bank"
+            render={({ field }) => (
+              <HawaSelect
+                label="Bank"
+                isCreatable={false}
+                isMulti={false ?? false}
+                isSearchable={false}
+                isClearable={false ?? false}
+                options={[
+                  { value: "snb", label: "Saudi National Bank" },
+                  { value: "bilad", label: "Al Bilad Bank" },
+                  { value: "rajihi", label: "Al Rajihi Bank" },
+                ]}
+                onInputChange={(e: any, o: any) => console.log("changing", e)}
+                {...field}
+                onChange={(e: any, o: any) => console.log("chooo", e)}
+              />
+            )}
+          />
+        </FormProvider>
+      </div>
+      <div>
+        <HawaButton width="full">Add Bank Account</HawaButton>
+      </div>
+      {withdrawError && (
+        <div>
+          <HawaAlert
+            text={
+              "Sorry can't withdraw the money at the moment. Please try again in 2022/11/20"
+            }
+            severity="warning"
+          />
+        </div>
+      )}
+      <div className="mt-3">
+        <div className="mb-1">Settlement Accounts</div>
+        <div className="rounded-lg">
+          <SettlementAccountCard
+            bank="Al Inma Bank"
+            iban="SA10228094028098329119"
+            accountHolder="Zakher Masri"
+            default
+          />
+          <SettlementAccountCard
+            bank="Al Rajihi Bank"
+            iban="SA10228094028098329119"
+            accountHolder="Zakher Masri"
+          />
+          <SettlementAccountCard
+            bank="Al Inma Bank"
+            iban="SA10228094028098329119"
+            accountHolder="Zakher Masri"
+          />
+        </div>
+      </div>
+    </HawaContainer>
+  )
+}
+
+const SettlementAccountCard = (props) => (
+  <div className="mb-3 flex flex-row items-center justify-between rounded-lg border-b bg-white p-2">
+    <div className="flex flex-col justify-between">
+      <div className="text-xs">{props.bank}</div>
+      <div>{props.accountHolder}</div>
+      <div className="text-xs">{props.iban}</div>
+    </div>
+    <div className="flex flex-row items-center justify-center gap-1">
+      {props.default && <HawaChip size="normal" label="Default" />}
+      {!props.default && <HawaButton size="small">Make Default</HawaButton>}
+      <HawaButton tooltip="Delete">
+        <FaTimes />
+      </HawaButton>
+    </div>
+  </div>
+)

package/src/blocks/Referral/ReferralStats.tsx

@@ -0,0 +1,94 @@
+import React from "react"
+import { FaClone } from "react-icons/fa"
+import { HawaAlert, HawaButton } from "../../elements"
+import { HawaContainer } from "../../layout"
+
+type TReferralStats = {
+  referralLink: string
+  referralCode: string
+  withdrawError?: string
+}
+
+export const ReferralStats: React.FunctionComponent<TReferralStats> = ({
+  referralLink,
+  referralCode,
+  withdrawError,
+}) => {
+  return (
+    <HawaContainer maxWidth="normal">
+      <div className="mb-1">Stats</div>
+      <div className="justi flex flex-row gap-1">
+        <NumberCard title="Clicks" number={22} />
+        <NumberCard title="Sign-ups" number={32} />
+        <NumberCard title="Commission" number={"213.22 SAR"} />
+      </div>
+      <div>
+        <HawaButton width="full">Withdraw Money</HawaButton>
+      </div>
+      {withdrawError && (
+        <div>
+          <HawaAlert
+            text={
+              "Sorry can't withdraw the money at the moment. Please try again in 2022/11/20"
+            }
+            severity="warning"
+          />
+        </div>
+      )}
+      <div className="mt-3">
+        <div className="mb-1">Sign ups</div>
+        <div className="rounded-lg">
+          {/* <HawaTable
+            columns={["date", "email", "amount"]}
+            rows={[
+              ["2020/10/11 @ 9:45 pm", "sadsd", "dsodk"],
+              ["2020/10/11 @ 9:45 pm", "sadsd", "dsodk"],
+              ["2020/10/11 @ 9:45 pm", "sadsd", "dsodk"],
+            ]}
+          /> */}
+          <ReferralSignUpCard
+            date="2020/10/11 @ 9:45 pm"
+            email="zakher@sikka.io"
+            amount="3.4 SAR / Month"
+          />
+          <ReferralSignUpCard
+            date="2022/10/11 @ 9:45 pm"
+            email="zakher@sikka.io"
+            amount="3.4 SAR / Month"
+          />
+          <ReferralSignUpCard
+            date="2022/10/11 @ 9:45 pm"
+            email="zakher@sikka.io"
+            amount="3.4 SAR / Month"
+          />
+          <ReferralSignUpCard
+            date="2022/10/11 @ 9:45 pm"
+            email="zakher@sikka.io"
+            amount="3.4 SAR / Month"
+          />
+          <ReferralSignUpCard
+            date="2022/10/11 @ 9:45 pm"
+            email="zakher@sikka.io"
+            amount="3.4 SAR / Month"
+          />
+        </div>
+      </div>
+    </HawaContainer>
+  )
+}
+
+const NumberCard = (props) => (
+  <div className="w-full rounded-lg bg-white p-2">
+    <div className="text-sm">{props.title}</div>
+    <div className="font-bold">{props.number}</div>
+  </div>
+)
+const ReferralSignUpCard = (props) => (
+  <div className="mb-3 rounded-lg border-b bg-white p-2">
+    <div className="text-xs">{props.date}</div>
+    <div className="flex flex-row justify-between">
+      <div>{props.email}</div>
+      <div>{props.amount}</div>
+    </div>
+  </div>
+)

package/src/blocks/Referral/index.ts

@@ -0,0 +1,3 @@
+export * from "./ReferralAccount"
+export * from "./ReferralSettlement"
+export * from "./ReferralStats"

package/src/blocks/index.ts

@@ -1,4 +1,5 @@
-export * from "./Account";
-export * from "./AuthForms";
-export * from "./Payment";
-export * from "./Pricing";
+export * from "./Account"
+export * from "./AuthForms"
+export * from "./Payment"
+export * from "./Pricing"
+export * from "./Referral"

package/src/elements/HawaButton.tsx

@@ -35,7 +35,7 @@ const colorStyles = {
     primary:
       "text-white bg-primary-default hover:bg-primary-700 hover:text-white",
     secondary:
-      "text-neutral-900 bg-secondary-default hover:bg-secondary-700 hover:text-white",
+      "text-neutral-900 bg-secondary-default hover:text-white hover:bg-secondary-700",
   },
   outlined: {
     default: "text-gray-600 border-gray-600 hover:bg-gray-200",
@@ -64,25 +64,6 @@ export function HawaButton({
 }: ButtonProps) {
   const [isHovered, setIsHovered] = React.useState(false)
 
-  const buttonClass = disabled
-    ? clsx(
-        className,
-        baseStyles,
-        variantStyles[variant],
-        sizeStyles[size],
-        widthStyles[width],
-        disabledSyles,
-        disabledVariantSyles[variant]
-      )
-    : clsx(
-        className,
-        baseStyles,
-        variantStyles[variant],
-        sizeStyles[size],
-        colorStyles[variant][color],
-        widthStyles[width]
-      )
-
   return (
     <div className="relative my-2">
       <button
@@ -92,7 +73,26 @@ export function HawaButton({
         onMouseLeave={() => {
           setIsHovered(false)
         }}
-        className={buttonClass}
+        className={
+          disabled
+            ? clsx(
+                className,
+                baseStyles,
+                variantStyles[variant],
+                sizeStyles[size],
+                widthStyles[width],
+                disabledSyles,
+                disabledVariantSyles[variant]
+              )
+            : clsx(
+                className,
+                baseStyles,
+                variantStyles[variant],
+                sizeStyles[size],
+                colorStyles[variant][color],
+                widthStyles[width]
+              )
+        }
         disabled={disabled}
         {...props}
       >

package/src/elements/HawaChip.tsx

@@ -1,12 +1,23 @@
+import clsx from "clsx"
 import React from "react"
 
 type TChipTypes = {
   label: string
+  size: "small" | "normal" | "large"
 }
-export const HawaChip: React.FunctionComponent<TChipTypes> = (props) => {
-  return (
-    <span className="mr-2 h-fit rounded bg-blue-100 px-2.5 py-0.5 text-xs font-semibold text-blue-800 dark:bg-blue-200 dark:text-blue-800">
-      {props.label}
-    </span>
-  )
+export const HawaChip: React.FunctionComponent<TChipTypes> = ({
+  size = "normal",
+  label,
+}) => {
+  // small: "text-xs px-2.5 py-1.5",
+  // medium: "text-sm leading-4 px-3 py-2",
+  // large: "text-sm px-4 py-2",
+  let defaultStyles =
+    "rounded-lg bg-blue-200 px-2.5 py-0.5  font-bold text-blue-800 dark:bg-blue-200 dark:text-blue-800"
+  let sizeStyles = {
+    small: "h-fit text-xs",
+    normal: "h-full leading-4 px-3 py-2 text-xs ",
+    large: "",
+  }
+  return <span className={clsx(defaultStyles, sizeStyles[size])}>{label}</span>
 }

package/src/elements/HawaCopyrights.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react"
 
 type CopyRightsTypes = {
-  withLogo: boolean
-  lang: any
-  version: string
-  credits: string
-  logoURL: string
+  withLogo?: boolean
+  lang?: any
+  version?: string
+  credits?: string
+  logoURL?: string
 }
 
 export const HawaCopyrights: React.FunctionComponent<CopyRightsTypes> = (