@sikka/hawa 0.1.1 → 0.1.3

package/src/blocks/Payment/CreditCardForm.tsx

@@ -1,7 +1,8 @@
 import React, { FC } from "react"
-import { HawaButton, HawaTextField } from "../../elements"
+import { HawaTextField } from "../../elements"
 import { Controller, useForm } from "react-hook-form"
-import { HawaContainer } from "../../layout"
+import { Card, CardContent, CardFooter } from "../../elements/Card"
+import { Button } from "../../elements/Button"
 
 type CreditCardFormTypes = {
   handle: any
@@ -17,28 +18,10 @@ export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
   } = methods
 
   return (
-    <HawaContainer>
-      {" "}
+    <Card>
       <form onSubmit={handleSubmit(props.handle)}>
-        <div className="flex flex-row gap-4">
-          <Controller
-            control={control}
-            name="cardName"
-            render={({ field }) => (
-              <HawaTextField
-                width="full"
-                name="password"
-                placeholder="Enter password"
-                type="tel"
-                label="Card Number"
-                helpertext={errors.password?.message}
-              />
-            )}
-            rules={{
-              required: "Password is rquired",
-            }}
-          />
-          <div className="w-1/4">
+        <CardContent headless>
+          <div className="flex flex-row gap-4">
             <Controller
               control={control}
               name="cardName"
@@ -46,11 +29,9 @@ export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
                 <HawaTextField
                   width="full"
                   name="password"
-                  maxLength="3"
-                  autoComplete="cc-number"
-                  placeholder=""
-                  type="password"
-                  label="CCV"
+                  placeholder="Enter password"
+                  type="tel"
+                  label="Card Number"
                   helpertext={errors.password?.message}
                 />
               )}
@@ -58,52 +39,69 @@ export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
                 required: "Password is rquired",
               }}
             />
+            <div className="w-1/4">
+              <Controller
+                control={control}
+                name="cardName"
+                render={({ field }) => (
+                  <HawaTextField
+                    width="full"
+                    name="password"
+                    maxLength="3"
+                    autoComplete="cc-number"
+                    placeholder=""
+                    type="password"
+                    label="CCV"
+                    helpertext={errors.password?.message}
+                  />
+                )}
+                rules={{
+                  required: "Password is rquired",
+                }}
+              />
+            </div>
           </div>
-        </div>
-        <Controller
-          control={control}
-          name="cardName"
-          render={({ field }) => (
-            <HawaTextField
-              width="full"
-              name="password"
-              placeholder="Enter password"
-              type="text"
-              label="Name On Card"
-              helpertext={errors.password?.message}
-            />
-          )}
-          rules={{
-            required: "Password is rquired",
-          }}
-        />
-        <Controller
-          control={control}
-          name="cardName"
-          render={({ field }) => (
-            <HawaTextField
-              width="full"
-              name="password"
-              placeholder="Enter password"
-              type="password"
-              label="Expiry Date"
-              helpertext={errors.password?.message}
-            />
-          )}
-          rules={{
-            required: "Password is rquired",
-          }}
-        />
-
-        <HawaButton
-          // type="submit"
-          width="full"
-          color="primary"
-          onClick={props.handlePayWithCreditCard}
-        >
-          Pay with Credit Card
-        </HawaButton>
+          <Controller
+            control={control}
+            name="cardName"
+            render={({ field }) => (
+              <HawaTextField
+                width="full"
+                name="password"
+                placeholder="Enter password"
+                type="text"
+                label="Name On Card"
+                helpertext={errors.password?.message}
+              />
+            )}
+            rules={{
+              required: "Password is rquired",
+            }}
+          />
+          <Controller
+            control={control}
+            name="cardName"
+            render={({ field }) => (
+              <HawaTextField
+                width="full"
+                name="password"
+                placeholder="Enter password"
+                type="password"
+                label="Expiry Date"
+                helpertext={errors.password?.message}
+              />
+            )}
+            rules={{
+              required: "Password is rquired",
+            }}
+          />
+        </CardContent>
+        <CardFooter>
+          <Button className="w-full" onClick={props.handlePayWithCreditCard}>
+            Pay with Credit Card
+          </Button>
+        </CardFooter>
       </form>
-    </HawaContainer>
+    </Card>
   )
 }

package/src/blocks/Payment/PayWithWallet.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from "react"
-import { HawaButton } from "../../elements"
-import { HawaContainer } from "../../layout"
+import { Card, CardContent } from "../../elements/Card"
+import { Button } from "../../elements/Button"
 
 type PayWithWalletTypes = {
   walletBalance: any
@@ -9,18 +9,16 @@ type PayWithWalletTypes = {
 }
 export const PayWithWallet: FC<PayWithWalletTypes> = (props) => {
   return (
-    <HawaContainer>
-      <div className="text-center text-5xl font-extrabold">
-        {props.walletBalance || "0"}
-        <div className="text-sm font-normal">{props.currency || "SAR"}</div>
-      </div>
-      <HawaButton
-        width="full"
-        color="primary"
-        onClick={props.handlePayWithWallet}
-      >
-        Pay Now
-      </HawaButton>
-    </HawaContainer>
+    <Card>
+      <CardContent headless>
+        <div className="text-center text-5xl font-extrabold">
+          {props.walletBalance || "0"}
+          <div className="text-sm font-normal">{props.currency || "SAR"}</div>
+        </div>
+        <Button className="mt-6 w-full" onClick={props.handlePayWithWallet}>
+          Pay Now
+        </Button>
+      </CardContent>
+    </Card>
   )
 }

package/src/blocks/Payment/SelectPayment.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from "react"
-import { HawaTypography, HawaLogoButton } from "../../elements"
-import { HawaContainer } from "../../layout"
+import { HawaLogoButton } from "../../elements"
+import { Card, CardContent, CardHeader, CardTitle } from "../../elements/Card"
 
 type SelectPaymentTypes = {
   viaMada: boolean
@@ -28,57 +28,61 @@ type SelectPaymentTypes = {
 
 export const SelectPayment: FC<SelectPaymentTypes> = (props) => {
   return (
-    <HawaContainer>
-      <HawaTypography>Choose Payment Method</HawaTypography>
-      {props.viaWallet && (
-        <HawaLogoButton
-          logo="wallet"
-          buttonText={props.walletLabel}
-          onClick={props.handleWallet}
-        />
-      )}
-      {props.viaCreditCard && (
-        <HawaLogoButton
-          logo="visa/master"
-          buttonText={props.visaMasterLabel}
-          onClick={props.handleCreditCard}
-        />
-      )}
-      {props.viaMada && (
-        <HawaLogoButton
-          logo="mada"
-          buttonText={props.madaLabel}
-          onClick={props.handleMada}
-        />
-      )}
-      {props.viaSTCPay && (
-        <HawaLogoButton
-          logo="stcpay"
-          buttonText={props.stcPayLabel}
-          onClick={props.handleSTCPay}
-        />
-      )}
-      {props.viaPayPal && (
-        <HawaLogoButton
-          logo="paypal"
-          buttonText={props.paypalLabel}
-          onClick={props.handlePayPal}
-        />
-      )}
-      {props.viaGooglePay && (
-        <HawaLogoButton
-          logo="googlepay"
-          buttonText={props.googlePayLabel}
-          onClick={props.handleGooglePay}
-        />
-      )}
-      {props.viaApplePay && (
-        <HawaLogoButton
-          logo="applepay"
-          buttonText={props.applePayLabel}
-          onClick={props.handleApplePay}
-        />
-      )}
-    </HawaContainer>
+    <Card>
+      <CardHeader>
+        <CardTitle>Choose Payment Method</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {props.viaWallet && (
+          <HawaLogoButton
+            logo="wallet"
+            buttonText={props.walletLabel}
+            onClick={props.handleWallet}
+          />
+        )}
+        {props.viaCreditCard && (
+          <HawaLogoButton
+            logo="visa/master"
+            buttonText={props.visaMasterLabel}
+            onClick={props.handleCreditCard}
+          />
+        )}
+        {props.viaMada && (
+          <HawaLogoButton
+            logo="mada"
+            buttonText={props.madaLabel}
+            onClick={props.handleMada}
+          />
+        )}
+        {props.viaSTCPay && (
+          <HawaLogoButton
+            logo="stcpay"
+            buttonText={props.stcPayLabel}
+            onClick={props.handleSTCPay}
+          />
+        )}
+        {props.viaPayPal && (
+          <HawaLogoButton
+            logo="paypal"
+            buttonText={props.paypalLabel}
+            onClick={props.handlePayPal}
+          />
+        )}
+        {props.viaGooglePay && (
+          <HawaLogoButton
+            logo="googlepay"
+            buttonText={props.googlePayLabel}
+            onClick={props.handleGooglePay}
+          />
+        )}
+        {props.viaApplePay && (
+          <HawaLogoButton
+            logo="applepay"
+            buttonText={props.applePayLabel}
+            onClick={props.handleApplePay}
+          />
+        )}
+      </CardContent>
+    </Card>
   )
 }

package/src/blocks/Referral/ReferralAccount.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from "react"
-import { HawaButton } from "../../elements"
-import { HawaContainer } from "../../layout"
+
+import { Card, CardContent } from "../../elements/Card"
+import { Button } from "../../elements/Button"
 
 type ReferralAccount = {
   referralLink: string
@@ -12,54 +13,56 @@ export const ReferralAccount: FC<ReferralAccount> = ({
   referralCode,
 }) => {
   return (
-    <HawaContainer>
-      <div className="my-2 mt-0">
-        <div className="mb-1">Referral Code</div>
-        <div className="flex flex-row items-center justify-between rounded border bg-background">
-          <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">
-              <svg
-                stroke="currentColor"
-                fill="currentColor"
-                stroke-width="0"
-                viewBox="0 0 512 512"
-                height="1em"
-                width="1em"
-              >
-                <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>
-              </svg>{" "}
-            </span>
-          </HawaButton>
+    <Card>
+      <CardContent headless>
+        <div className="my-2 mt-0">
+          <div className="mb-1">Referral Code</div>
+          <div className="flex flex-row items-center justify-between rounded border bg-background">
+            <span className="ml-3 font-bold">{referralCode}</span>
+            <Button
+              // tooltip="Copy"
+              // className="mr-1.5"
+              onClick={() => navigator.clipboard.writeText(referralCode)}
+            >
+              <span className="bg-red flex items-center justify-center">
+                <svg
+                  stroke="currentColor"
+                  fill="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 512 512"
+                  height="1em"
+                  width="1em"
+                >
+                  <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>
+                </svg>{" "}
+              </span>
+            </Button>
+          </div>
         </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 border bg-background">
-          <span className="ml-3 font-bold">{referralLink}</span>
-          <HawaButton
-            className="mr-1.5"
-            onClick={() => navigator.clipboard.writeText(referralLink)}
-          >
-            <span className="bg-red flex items-center justify-center">
-              <svg
-                stroke="currentColor"
-                fill="currentColor"
-                stroke-width="0"
-                viewBox="0 0 512 512"
-                height="1em"
-                width="1em"
-              >
-                <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>
-              </svg>{" "}
-            </span>
-          </HawaButton>
+        <div className="my-2 mt-0">
+          <div className="mb-1">Referral Link</div>
+          <div className="flex flex-row items-center justify-between rounded border bg-background">
+            <span className="ml-3 font-bold">{referralLink}</span>
+            <Button
+              // className="mr-1.5"
+              onClick={() => navigator.clipboard.writeText(referralLink)}
+            >
+              <span className="bg-red flex items-center justify-center">
+                <svg
+                  stroke="currentColor"
+                  fill="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 512 512"
+                  height="1em"
+                  width="1em"
+                >
+                  <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>
+                </svg>{" "}
+              </span>
+            </Button>
+          </div>
         </div>
-      </div>
-    </HawaContainer>
+      </CardContent>
+    </Card>
   )
 }

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -7,8 +7,8 @@ import {
   HawaSelect,
   HawaTextField,
 } from "../../elements"
-import { HawaContainer } from "../../layout"
 import { Controller, FormProvider, useForm } from "react-hook-form"
+import { Card, CardContent } from "../../elements/Card"
 
 type TReferralSettlement = {
   referralLink: string
@@ -28,69 +28,71 @@ export const ReferralSettlement: FC<TReferralSettlement> = ({
     control,
   } = methods
   return (
-    <HawaContainer>
-      <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 && (
+    <Card>
+      <CardContent headless>
+        <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>
-          <HawaAlert
-            text={
-              "Sorry can't withdraw the money at the moment. Please try again in 2022/11/20"
-            }
-            severity="warning"
-          />
+          <HawaButton width="full">Add Bank Account</HawaButton>
         </div>
-      )}
-      <div className="mt-3">
-        <div className="mb-1">Settlement Accounts</div>
-        <div className="rounded">
-          <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"
-          />
+        {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">
+            <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>
-      </div>
-    </HawaContainer>
+      </CardContent>
+    </Card>
   )
 }
 
@@ -121,7 +123,7 @@ const SettlementAccountCard = (props) => {
           // position={direction === "rtl" ? "right-bottom" : "left-bottom"}
           // direction={direction}
         >
-          <HawaButton variant="outlined"  >
+          <HawaButton variant="outlined">
             <svg
               aria-label="Vertical Three Dots Menu Icon"
               className="rotate-90"