@sikka/hawa 0.1.7 → 0.1.8-beta

package/src/blocks/Payment/CheckoutForm.tsx

@@ -1,265 +0,0 @@
-import React, { FC } from "react"
-import { HawaTextField, HawaTable, HawaSelect } from "../../elements"
-import { Controller, FormProvider, useForm } from "react-hook-form"
-import countries from "../../countries"
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type CheckoutFormTypes = {
-  lang: string
-  products: any
-  total: any
-  handlePayNow: any
-  countriesList: any
-  texts: {
-    orderDetails: string
-    billingAddress: string
-    payNow: string
-    emailLabel: string
-    emailRequiredText: string
-    emailInvalidText: string
-    firstNameLabel: string
-    required: string
-    lastNameLabel: string
-    streetAddressLabel: string
-    buildingNumberLabel: string
-    cityLabel: string
-    stateLabel: string
-    countryLabel: string
-    zipCodeLabel: string
-  }
-}
-
-export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
-  let isArabic = props.lang === "ar"
-  const methods = useForm()
-  const {
-    formState: { errors },
-    handleSubmit,
-    register,
-    control,
-  } = methods
-
-  let containerStyle = {
-    display: "flex",
-    padding: 0,
-    paddingRight: "0px !important",
-    paddingLeft: "0px !important",
-    flexDirection: {
-      xs: "column",
-      sm: "row",
-      md: "row",
-      lg: "row",
-      xl: "row",
-    },
-  }
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{props.texts.orderDetails}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div>
-          <div className="rounded border border-gray-300">
-            <HawaTable
-              pagination={false}
-              direction={isArabic ? "rtl" : "ltr"}
-              columns={[
-                { hidden: false, value: "Product" },
-                { hidden: true, value: "ID" },
-                { hidden: false, value: "Price" },
-              ]}
-              borders="inner"
-              rows={props.products}
-              bordersWidth="1"
-            />
-          </div>
-        </div>
-      </CardContent>
-      <CardHeader>
-        <CardTitle>{props.texts.billingAddress}</CardTitle>
-      </CardHeader>
-      <form onSubmit={handleSubmit(props.handlePayNow)}>
-        <CardContent>
-          <div>
-            <FormProvider {...methods}>
-              <div>
-                <Controller
-                  control={control}
-                  name="firstName"
-                  rules={{ required: props.texts?.required }}
-                  render={({ field }) => (
-                    <HawaTextField
-                      type="text"
-                      label={props.texts?.firstNameLabel + " *"}
-                      helpertext={errors.firstName?.message}
-                      {...field}
-                      value={field.value ?? ""}
-                    />
-                  )}
-                />
-                <div style={{ width: 20 }} />
-
-                <Controller
-                  control={control}
-                  name="lastName"
-                  rules={{ required: props.texts?.required }}
-                  render={({ field }) => (
-                    <HawaTextField
-                      width="full"
-                      type="text"
-                      label={props.texts?.lastNameLabel + " *"}
-                      helpertext={errors.lastName?.message}
-                      {...field}
-                      value={field.value ?? ""}
-                    />
-                  )}
-                />
-              </div>
-              <Controller
-                control={control}
-                name="email"
-                render={({ field }) => (
-                  <HawaTextField
-                    width="full"
-                    type="text"
-                    label={props.texts?.emailLabel + " *"}
-                    helpertext={errors.email?.message}
-                    {...field}
-                    value={field.value ?? ""}
-                  />
-                )}
-                rules={{
-                  required: props.texts?.emailRequiredText,
-                  pattern: {
-                    value:
-                      /^(([^<>()[\]\\.,;:\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,}))$/,
-                    message: props.texts?.emailInvalidText,
-                  },
-                }}
-              />
-              <div className="flex flex-col md:flex-row">
-                <Controller
-                  control={control}
-                  name="streetAddress"
-                  rules={{ required: props.texts?.required }}
-                  render={({ field }) => (
-                    <HawaTextField
-                      width="full"
-                      type="text"
-                      label={props.texts?.streetAddressLabel + " *"}
-                      helpertext={errors.streetAddress?.message}
-                      {...field}
-                      value={field.value ?? ""}
-                    />
-                  )}
-                />
-              </div>
-
-              <div className="flex flex-col md:flex-row">
-                <Controller
-                  control={control}
-                  name="province"
-                  rules={{ required: props.texts?.required }}
-                  render={({ field }) => (
-                    <HawaTextField
-                      width="full"
-                      type="text"
-                      label={props.texts?.stateLabel + " *"}
-                      helpertext={errors.province?.message}
-                      {...field}
-                      value={field.value ?? ""}
-                    />
-                  )}
-                />
-                <div style={{ width: 20 }} />
-
-                <Controller
-                  control={control}
-                  name="city"
-                  rules={{ required: props.texts?.required }}
-                  render={({ field }) => (
-                    <HawaTextField
-                      width="full"
-                      type="text"
-                      label={props.texts?.cityLabel + " *"}
-                      helpertext={errors.city?.message}
-                      {...field}
-                      value={field.value ?? ""}
-                    />
-                  )}
-                />
-              </div>
-              <div className="flex flex-col md:flex-row">
-                <Controller
-                  control={control}
-                  name="buildingNumber"
-                  rules={{ required: props.texts?.required }}
-                  render={({ field }) => (
-                    <HawaTextField
-                      width="full"
-                      type="text"
-                      label={props.texts?.buildingNumberLabel + " *"}
-                      helpertext={errors.buildingNumber?.message}
-                      {...field}
-                      value={field.value ?? ""}
-                    />
-                  )}
-                />
-                <div style={{ width: 20 }} />
-                <Controller
-                  control={control}
-                  name="zipCode"
-                  rules={{ required: props.texts?.required }}
-                  render={({ field }) => (
-                    <HawaTextField
-                      width="full"
-                      type="number"
-                      label={props.texts?.zipCodeLabel + " *"}
-                      helpertext={errors.zipCode?.message}
-                      {...field}
-                      value={field.value ?? ""}
-                    />
-                  )}
-                />
-                {/* <div style={{ width: 20 }} /> */}
-              </div>
-              <div className="mb-3">
-                <Controller
-                  control={control}
-                  name="country"
-                  rules={{ required: props.texts?.required }}
-                  render={({ field }) => (
-                    <HawaSelect
-                      native
-                      label={props.texts?.countryLabel + " *"}
-                      helperText={errors.country?.message}
-                      options={countries}
-                      getOptionLabel={(countries) => countries.country_label}
-                      onChange={(e) => field.onChange(e.country_label)}
-                      value={field.value ?? ""}
-                    >
-                      <option></option>
-                      {props.countriesList.map((country: any, i: any) => (
-                        <option key={i}>{country}</option>
-                      ))}
-                    </HawaSelect>
-                  )}
-                />
-              </div>
-            </FormProvider>
-          </div>
-        </CardContent>
-        <CardFooter>
-          <Button className="w-full">{props.texts.payNow}</Button>
-        </CardFooter>{" "}
-      </form>
-    </Card>
-  )
-}

package/src/blocks/Payment/Confirmation.tsx

@@ -1,96 +0,0 @@
-import React, { FC } from "react"
-import { Card, CardContent } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type ConfirmationPageTypes = {
-  texts: {
-    print: string
-    history: string
-    homePage: string
-    successMessage: string
-    orderDetails: string
-    fasterPaymentNote: string
-    yourOrderNumber: string
-    emailLabel: string
-    emailRequiredText: string
-    emailInvalidText: string
-    firstNameLabel: string
-    required: string
-    lastNameLabel: string
-    streetAddressLabel: string
-    buildingNumberLabel: string
-    cityLabel: string
-    stateLabel: string
-    countryLabel: string
-    zipCodeLabel: string
-    refundPolicy: string
-  }
-  products: any
-  countriesList: any
-  lang: string
-  total: string
-  userEmail: string
-  orderNumber: string
-  confirmationTitle: string
-  handleHome: any
-  handlePrint: any
-  handleHistory: any
-  handleRefundPolicyLink: any
-}
-
-export const ConfirmationPage: FC<ConfirmationPageTypes> = (props) => {
-  let isArabic = props.lang === "ar"
-
-  return (
-    <Card>
-      <CardContent headless>
-        {" "}
-        <div className="py-5 text-center text-3xl font-bold dark:text-white">
-          {props.confirmationTitle}
-        </div>
-        <div className="py-5 dark:text-white">
-          <div className="mb-2 text-center">
-            {props.texts.successMessage} <strong>{props.userEmail}</strong>
-          </div>
-          <div className="text-center">{props.texts.yourOrderNumber}</div>
-          <div className="text-center font-bold">{props.orderNumber}</div>
-        </div>
-        {/* <div className="py-5">
-        <div className="mb-3 text-center text-xl font-semibold">
-          {props.texts.orderDetails}
-        </div>
-        {props.products && (
-          <HawaTable
-            direction={isArabic ? "rtl" : "ltr"}
-            columns={[
-              { hidden: false, value: "Product" },
-              { hidden: false, value: "Price" },
-            ]}
-            rows={props.products}
-          />
-        )}
-      </div> */}
-        <div className="flex flex-col items-center justify-center gap-4 py-5 pt-0">
-          <Button className="w-full" onClick={props.handlePrint}>
-            {props.texts.print}
-          </Button>
-          <Button className="w-full" onClick={props.handleHistory}>
-            {props.texts.history}
-          </Button>
-          <Button className="w-full" onClick={props.handleHome}>
-            {props.texts.homePage}
-          </Button>
-          <div className=" text-center text-sm dark:text-white">
-            {props.texts.fasterPaymentNote}
-          </div>
-          <a
-            className="clickable-link text-xs"
-            onClick={props.handleRefundPolicyLink}
-          >
-            {props.texts.refundPolicy}
-          </a>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}

package/src/blocks/Payment/CreditCardForm.tsx

@@ -1,107 +0,0 @@
-import React, { FC } from "react"
-import { HawaTextField } from "../../elements"
-import { Controller, useForm } from "react-hook-form"
-import { Card, CardContent, CardFooter } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type CreditCardFormTypes = {
-  handle: any
-  handlePayWithCreditCard: any
-}
-
-export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
-  const methods = useForm()
-  const {
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = methods
-
-  return (
-    <Card>
-      <form onSubmit={handleSubmit(props.handle)}>
-        <CardContent headless>
-          <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">
-              <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>
-          <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>
-    </Card>
-  )
-}

package/src/blocks/Payment/PayWithWallet.tsx

@@ -1,24 +0,0 @@
-import React, { FC } from "react"
-import { Card, CardContent } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type PayWithWalletTypes = {
-  walletBalance: any
-  currency: any
-  handlePayWithWallet: any
-}
-export const PayWithWallet: FC<PayWithWalletTypes> = (props) => {
-  return (
-    <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,88 +0,0 @@
-import React, { FC } from "react"
-import { HawaLogoButton } from "../../elements"
-import { Card, CardContent, CardHeader, CardTitle } from "../../elements/Card"
-
-type SelectPaymentTypes = {
-  viaMada: boolean
-  viaWallet: boolean
-  viaSTCPay: boolean
-  viaPayPal: boolean
-  viaApplePay: boolean
-  viaCreditCard: boolean
-  viaGooglePay: boolean
-  madaLabel: string
-  stcPayLabel: string
-  paypalLabel: string
-  walletLabel: string
-  applePayLabel: string
-  visaMasterLabel: string
-  googlePayLabel: string
-  handleMada: any
-  handleWallet: any
-  handleSTCPay: any
-  handlePayPal: any
-  handleApplePay: any
-  handleCreditCard: any
-  handleGooglePay: any
-}
-
-export const SelectPayment: FC<SelectPaymentTypes> = (props) => {
-  return (
-    <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/Payment/index.ts

@@ -1,6 +0,0 @@
-export * from "./SelectPayment"
-export * from "./CreditCardForm"
-export * from "./ChargeWalletForm"
-export * from "./PayWithWallet"
-export * from "./CheckoutForm"
-export * from "./Confirmation"