@sikka/hawa 0.1.1 → 0.1.2-next

package/src/blocks/Payment/ChargeWalletForm.tsx

@@ -1,82 +0,0 @@
-import React, { useState, FC } from "react"
-import { HawaButton } from "../../elements"
-import { HawaContainer } from "../../layout"
-
-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 (
-    <HawaContainer>
-      <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-row gap-4 text-center">
-        <HawaButton variant="outlined" margins="none" className="h-full">
-          10 SAR
-        </HawaButton>
-        <HawaButton variant="outlined" margins="none" className="h-full">
-          100 SAR
-        </HawaButton>
-
-        <input
-          placeholder="Custom"
-          className="h-auto w-full rounded bg-gray-100 p-4"
-        />
-      </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,
-            }}
-          />
-
-          <HawaButton
-            color="primary"
-            // type="submit"
-            width="full"
-          >
-            {props.texts.chargeWallet}
-          </HawaButton>
-          </form>
-        </FormProvider> */}
-      <HawaButton color="primary" width="full">
-        {props.texts.chargeWallet}
-      </HawaButton>
-    </HawaContainer>
-  )
-}

package/src/blocks/Payment/CheckoutForm.tsx

@@ -1,260 +0,0 @@
-import React, { FC } from "react"
-import {
-  HawaTextField,
-  HawaTable,
-  HawaSelect,
-  HawaButton,
-} from "../../elements"
-import { Controller, FormProvider, useForm } from "react-hook-form"
-import { HawaContainer } from "../../layout"
-import countries from "../../countries"
-
-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 (
-    <HawaContainer>
-      <div>
-        <div className="mb-2 text-center text-xl font-semibold dark:text-white">
-          {props.texts.orderDetails}
-        </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>
-      <div>
-        <div className="my-2 text-center text-xl font-semibold dark:text-white">
-          {props.texts.billingAddress}
-        </div>
-
-        <FormProvider {...methods}>
-          <form onSubmit={handleSubmit(props.handlePayNow)}>
-            <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>
-            <HawaButton color="primary" width="full">
-              {props.texts.payNow}
-            </HawaButton>
-          </form>
-        </FormProvider>
-      </div>
-    </HawaContainer>
-  )
-}

package/src/blocks/Payment/Confirmation.tsx

@@ -1,94 +0,0 @@
-import React, { FC } from "react"
-import { HawaButton, HawaTable } from "../../elements"
-import { HawaContainer } from "../../layout"
-
-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 (
-    <HawaContainer>
-      {" "}
-      <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 py-5 pt-0">
-        <HawaButton color="primary" width="full" onClick={props.handlePrint}>
-          {props.texts.print}
-        </HawaButton>
-        <HawaButton color="primary" width="full" onClick={props.handleHistory}>
-          {props.texts.history}
-        </HawaButton>
-        <HawaButton color="primary" width="full" onClick={props.handleHome}>
-          {props.texts.homePage}
-        </HawaButton>
-        <div className="mb-5 mt-5 text-center text-sm dark:text-white">
-          {props.texts.fasterPaymentNote}
-        </div>
-        <a
-          className="w-fit cursor-pointer text-center  text-xs font-normal dark:text-white"
-          onClick={props.handleRefundPolicyLink}
-        >
-          {props.texts.refundPolicy}
-        </a>
-      </div>
-    </HawaContainer>
-  )
-}

package/src/blocks/Payment/CreditCardForm.tsx

@@ -1,109 +0,0 @@
-import React, { FC } from "react"
-import { HawaButton, HawaTextField } from "../../elements"
-import { Controller, useForm } from "react-hook-form"
-import { HawaContainer } from "../../layout"
-
-type CreditCardFormTypes = {
-  handle: any
-  handlePayWithCreditCard: any
-}
-
-export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
-  const methods = useForm()
-  const {
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = methods
-
-  return (
-    <HawaContainer>
-      {" "}
-      <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">
-            <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",
-          }}
-        />
-
-        <HawaButton
-          // type="submit"
-          width="full"
-          color="primary"
-          onClick={props.handlePayWithCreditCard}
-        >
-          Pay with Credit Card
-        </HawaButton>
-      </form>
-    </HawaContainer>
-  )
-}

package/src/blocks/Payment/PayWithWallet.tsx

@@ -1,26 +0,0 @@
-import React, { FC } from "react"
-import { HawaButton } from "../../elements"
-import { HawaContainer } from "../../layout"
-
-type PayWithWalletTypes = {
-  walletBalance: any
-  currency: any
-  handlePayWithWallet: any
-}
-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>
-  )
-}

package/src/blocks/Payment/SelectPayment.tsx

@@ -1,84 +0,0 @@
-import React, { FC } from "react"
-import { HawaTypography, HawaLogoButton } from "../../elements"
-import { HawaContainer } from "../../layout"
-
-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 (
-    <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>
-  )
-}

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"