@sikka/hawa 0.2.14-beta → 0.2.17-beta

package/src/blocks/Payment/ChargeWalletForm.tsx

@@ -1,79 +0,0 @@
-import React, { useState, FC } from "react"
-import { Card, CardContent } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-import { Input } from "../../elements/Input"
-
-type ChargeWalletTypes = {
-  currency: any
-  handleChargeWallet: any
-  texts: {
-    amountLabel: string
-    amountRequired: string
-    chargeWallet: string
-  }
-}
-export const ChargeWalletForm: FC<ChargeWalletTypes> = (props) => {
-  const [walletAmount, setWalletAmount] = useState(0)
-
-  return (
-    <Card>
-      <CardContent headless>
-        <div className="p-4 text-center">
-          <div className=" text-5xl font-extrabold">
-            {Number(walletAmount).toLocaleString("en") || "0"}
-          </div>
-          <div className="text-sm font-normal">{props.currency || "SAR"}</div>
-        </div>
-        <div className="mb-2 flex w-full flex-col gap-4 text-center">
-          <div className="mb-2 flex w-full flex-row gap-4 text-center">
-            <Button variant="outline" className="h-full w-full">
-              10 SAR
-            </Button>
-            <Button variant="outline" className="h-full w-full">
-              50 SAR
-            </Button>
-            <Button variant="outline" className="h-full w-full">
-              100 SAR
-            </Button>
-          </div>
-
-          <Input placeholder="Custom Amount" type="number" name="amount" />
-        </div>
-        {/* <FormProvider {...methods}>
-        <form onSubmit={handleSubmit(props.handleChargeWallet)}>
-          <Controller
-            control={control}
-            name="amount"
-            render={({ field }) => (
-              <HawaTextField
-                width="full"
-                placeholder={props.texts.amountLabel}
-                type="number"
-                {...field}
-                value={field.value ?? ""}
-                inputProps={{
-                  inputMode: "numeric",
-                  min: "1",
-                  max: "9999999",
-                  step: "0.01",
-                }}
-                onChange={(e: any) => {
-                  field.onChange(parseFloat(e.target.value))
-                  setWalletAmount(e.target.value)
-                }}
-                helpertext={errors.amount?.message}
-              />
-            )}
-            rules={{
-              required: props.texts.amountRequired,
-            }}
-          />
-
-      
-          </form>
-        </FormProvider> */}
-        <Button className="mt-6 w-full">{props.texts.chargeWallet}</Button>
-      </CardContent>
-    </Card>
-  )
-}

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,169 +0,0 @@
-import React, { FC, useEffect, useState } 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 [cardNumber, setCardNumber] = useState("")
-  const [cardType, setCardType] = useState("")
-  const methods = useForm()
-  const {
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = methods
-
-  const getCardType = (card_bin) => {
-    const visa_regex = /^4[0-9]{0,15}$/m
-    const mastercard_regex = /^5$|^5[0-5][0-9]{0,16}$/m
-    const amex_regex = /^3$|^3[47][0-9]{0,13}$/m
-    const mada_regex =
-      /^(440647|440795|446404|457865|968208|457997|474491|636120|417633|468540|468541|468542|468543|968201|446393|409201|458456|484783|462220|455708|410621|455036|486094|486095|486096|504300|440533|489318|489319|445564|968211|410685|406996|432328|428671|428672|428673|968206|446672|543357|434107|407197|407395|412565|431361|604906|521076|529415|535825|543085|524130|554180|549760|968209|524514|529741|537767|535989|536023|513213|520058|558563|588982|589005|531095|530906|532013|968204|422817|422818|422819|428331|483010|483011|483012|589206|968207|419593|439954|530060|531196|420132)/
-    const meeza_regex =
-      /^507803[0-6][0-9]|507808[3-9][0-9]|507809[0-9][0-9]|507810[0-2][0-9]/
-    let card_type = "visa"
-    if (card_bin.replace(/[^\d]/g, "").match(mada_regex)) {
-      card_type = "mada"
-    } else if (card_bin.replace(/[^\d]/g, "").match(meeza_regex)) {
-      card_type = "meeza"
-    } else if (card_bin.replace(/[^\d]/g, "").match(visa_regex)) {
-      card_type = "visa"
-    } else if (card_bin.replace(/[^\d]/g, "").match(mastercard_regex)) {
-      card_type = "mastercard"
-    } else if (card_bin.replace(/[^\d]/g, "").match(amex_regex)) {
-      card_type = "amex"
-    }
-    return card_type
-  }
-  const onCardNumberChange = (event) => {
-    let { value, name } = event.target
-    let cardNumber = value
-    value = value.replace(/\D/g, "")
-    if (/^3[47]\d{0,13}$/.test(value)) {
-      cardNumber = value
-        .replace(/(\d{4})/, "$1 ")
-        .replace(/(\d{4}) (\d{6})/, "$1 $2 ")
-    } else if (/^3(?:0[0-5]|[68]\d)\d{0,11}$/.test(value)) {
-      // diner's club, 14 digits
-      cardNumber = value
-        .replace(/(\d{4})/, "$1 ")
-        .replace(/(\d{4}) (\d{6})/, "$1 $2 ")
-    } else if (/^\d{0,16}$/.test(value)) {
-      // regular cc number, 16 digits
-      cardNumber = value
-        .replace(/(\d{4})/, "$1 ")
-        .replace(/(\d{4}) (\d{4})/, "$1 $2 ")
-        .replace(/(\d{4}) (\d{4}) (\d{4})/, "$1 $2 $3 ")
-    }
-    console.log("card number is ", cardNumber.trimRight())
-    setCardNumber(cardNumber.trimRight())
-    // onUpdateState(name, cardNumber);
-  }
-  useEffect(() => {
-    let cardTypeSlug = getCardType(cardNumber)
-    setCardType(cardTypeSlug)
-  })
-  return (
-    <Card>
-      <form onSubmit={handleSubmit(props.handle)}>
-        <CardContent headless>
-          <div className="flex flex-row gap-4">
-            <Controller
-              control={control}
-              name="cardNumber"
-              render={({ field }) => (
-                <HawaTextField
-                  width="full"
-                  name="cardNumber"
-                  placeholder="1234 1234 1234 1234"
-                  type="number"
-                  onChange={onCardNumberChange}
-                  // onChange={(e) => setCardNumber(e.target.value)}
-                  label="Card Number"
-                  helpertext={errors.password?.message}
-                  iconInside={
-                    <img
-                      src={`https://sikka-images.s3.ap-southeast-1.amazonaws.com/payment-symbols/borderless/${cardType}.png`}
-                      alt=""
-                      className="h-8"
-                    />
-                  }
-                />
-              )}
-              rules={{
-                required: "Card Number is rquired",
-              }}
-            />
-            <div className="w-1/4">
-              <Controller
-                control={control}
-                name="cardCVC"
-                render={({ field }) => (
-                  <HawaTextField
-                    width="full"
-                    name="cardCVC"
-                    maxLength="3"
-                    autoComplete="cc-number"
-                    placeholder="CVC"
-                    type="number"
-                    label="CVC"
-                    helpertext={errors.password?.message}
-                  />
-                )}
-                rules={{
-                  required: "Password is rquired",
-                }}
-              />
-            </div>
-          </div>
-
-          <Controller
-            control={control}
-            name="cardExpiry"
-            render={({ field }) => (
-              <HawaTextField
-                width="full"
-                name="cardExpiry"
-                placeholder="MM / YY"
-                type="password"
-                label="Expiry Date"
-                helpertext={errors.password?.message}
-              />
-            )}
-            rules={{
-              required: "Password is rquired",
-            }}
-          />
-          <Controller
-            control={control}
-            name="cardName"
-            render={({ field }) => (
-              <HawaTextField
-                width="full"
-                name="cardName"
-                // placeholder="Enter password"
-                type="text"
-                label="Name on card"
-                helpertext={errors.password?.message}
-              />
-            )}
-            rules={{
-              required: "Card holder name 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>
-  )
-}