@sikka/hawa 0.0.94 → 0.0.96

package/src/blocks/Payment/ChargeWalletForm.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react"
+import { HawaButton, HawaTextField } from "../../elements"
+import { Controller, FormProvider, useForm } from "react-hook-form"
+import { HawaContainer } from "../../layout"
+
+type ChargeWalletTypes = {
+  currency: any
+  handleChargeWallet: any
+  texts: {
+    amountLabel: string
+    amountRequired: string
+    chargeWallet: string
+  }
+}
+export const ChargeWalletForm: React.FunctionComponent<ChargeWalletTypes> = (
+  props
+) => {
+  const [walletAmount, setWalletAmount] = useState(0)
+  const methods = useForm()
+  const {
+    formState: { errors },
+    handleSubmit,
+    control,
+  } = methods
+
+  return (
+    <HawaContainer>
+      {" "}
+      <div className="text-center text-5xl font-extrabold">
+        {Number(walletAmount).toLocaleString("en") || "0"}
+        <div className="text-sm font-normal">{props.currency || "SAR"}</div>
+      </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>
+    </HawaContainer>
+  )
+}

package/src/blocks/Payment/{CheckoutForm.js → CheckoutForm.tsx}

@@ -1,23 +1,49 @@
-import React from "react";
+import React from "react"
 import {
   HawaTextField,
   HawaTable,
   HawaSelect,
-  HawaButton
-} from "../../elements";
-import { Controller, FormProvider, useForm } from "react-hook-form";
-import PropTypes from "prop-types";
-import { HawaContainer } from "../../layout";
+  HawaButton,
+} from "../../elements"
+import { Controller, FormProvider, useForm } from "react-hook-form"
+import { HawaContainer } from "../../layout"
 
-export const CheckoutForm = (props) => {
-  let isArabic = props.lang === "ar";
-  const methods = useForm();
+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: React.FunctionComponent<CheckoutFormTypes> = (
+  props
+) => {
+  let isArabic = props.lang === "ar"
+  const methods = useForm()
   const {
     formState: { errors },
     handleSubmit,
     register,
-    control
-  } = methods;
+    control,
+  } = methods
 
   let containerStyle = {
     display: "flex",
@@ -29,14 +55,13 @@ export const CheckoutForm = (props) => {
       sm: "row",
       md: "row",
       lg: "row",
-      xl: "row"
-    }
-  };
+      xl: "row",
+    },
+  }
   return (
-    <HawaContainer withDividers>
-      {" "}
+    <HawaContainer maxWidth="full">
       <div>
-        <div className="text-xl text-center font-semibold mb-2">
+        <div className="mb-2 text-center text-xl font-semibold">
           {props.texts.orderDetails}
         </div>
         <HawaTable
@@ -47,7 +72,7 @@ export const CheckoutForm = (props) => {
         />
       </div>
       <div>
-        <div className="text-xl text-center font-semibold my-2">
+        <div className="my-2 text-center text-xl font-semibold">
           {props.texts.billingAddress}
         </div>
 
@@ -60,13 +85,11 @@ export const CheckoutForm = (props) => {
                 rules={{ required: props.texts?.required }}
                 render={({ field }) => (
                   <HawaTextField
-                    inForm
-                    fullWidth
                     type="text"
-                    value={field.value ?? ""}
                     label={props.texts?.firstNameLabel + " *"}
                     helperText={errors.firstName?.message}
                     {...field}
+                    value={field.value ?? ""}
                   />
                 )}
               />
@@ -78,13 +101,13 @@ export const CheckoutForm = (props) => {
                 rules={{ required: props.texts?.required }}
                 render={({ field }) => (
                   <HawaTextField
-                    inForm
-                    fullWidth
+                    // inForm
+                    width="full"
                     type="text"
-                    value={field.value ?? ""}
                     label={props.texts?.lastNameLabel + " *"}
                     helperText={errors.lastName?.message}
                     {...field}
+                    value={field.value ?? ""}
                   />
                 )}
               />
@@ -94,13 +117,13 @@ export const CheckoutForm = (props) => {
               name="email"
               render={({ field }) => (
                 <HawaTextField
-                  inForm
-                  fullWidth
+                  // inForm
+                  width="full"
                   type="text"
-                  value={field.value ?? ""}
                   label={props.texts?.emailLabel + " *"}
                   helperText={errors.email?.message}
                   {...field}
+                  value={field.value ?? ""}
                 />
               )}
               rules={{
@@ -108,24 +131,24 @@ export const CheckoutForm = (props) => {
                 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
-                }
+                  message: props.texts?.emailInvalidText,
+                },
               }}
             />
-            <div sx={containerStyle}>
+            <div className="flex flex-col md:flex-row">
               <Controller
                 control={control}
                 name="streetAddress"
                 rules={{ required: props.texts?.required }}
                 render={({ field }) => (
                   <HawaTextField
-                    inForm
-                    fullWidth
+                    // inForm
+                    width="full"
                     type="text"
-                    value={field.value ?? ""}
                     label={props.texts?.streetAddressLabel + " *"}
                     helperText={errors.streetAddress?.message}
                     {...field}
+                    value={field.value ?? ""}
                   />
                 )}
               />
@@ -137,31 +160,32 @@ export const CheckoutForm = (props) => {
                 rules={{ required: props.texts?.required }}
                 render={({ field }) => (
                   <HawaTextField
-                    inForm
-                    fullWidth
+                    // inForm
+                    width="full"
                     type="text"
-                    value={field.value ?? ""}
                     label={props.texts?.buildingNumberLabel + " *"}
                     helperText={errors.buildingNumber?.message}
                     {...field}
+                    value={field.value ?? ""}
                   />
                 )}
               />
             </div>
-            <div sx={containerStyle}>
+
+            <div className="flex flex-col md:flex-row">
               <Controller
                 control={control}
                 name="province"
                 rules={{ required: props.texts?.required }}
                 render={({ field }) => (
                   <HawaTextField
-                    inForm
-                    fullWidth
+                    // inForm
+                    width="full"
                     type="text"
-                    value={field.value ?? ""}
                     label={props.texts?.stateLabel + " *"}
                     helperText={errors.province?.message}
                     {...field}
+                    value={field.value ?? ""}
                   />
                 )}
               />
@@ -173,13 +197,13 @@ export const CheckoutForm = (props) => {
                 rules={{ required: props.texts?.required }}
                 render={({ field }) => (
                   <HawaTextField
-                    inForm
-                    fullWidth
+                    // inForm
+                    width="full"
                     type="text"
-                    value={field.value ?? ""}
                     label={props.texts?.cityLabel + " *"}
                     helperText={errors.city?.message}
                     {...field}
+                    value={field.value ?? ""}
                   />
                 )}
               />
@@ -191,14 +215,14 @@ export const CheckoutForm = (props) => {
                 rules={{ required: props.texts?.required }}
                 render={({ field }) => (
                   <HawaTextField
-                    inForm
-                    fullWidth
+                    // inForm
+                    width="full"
                     type="number"
-                    variant="unscrollable"
-                    value={field.value ?? ""}
+                    // variant="unscrollable"
                     label={props.texts?.zipCodeLabel + " *"}
                     helperText={errors.zipCode?.message}
                     {...field}
+                    value={field.value ?? ""}
                   />
                 )}
               />
@@ -213,51 +237,28 @@ export const CheckoutForm = (props) => {
                     fullWidth
                     native
                     label={props.texts?.countryLabel + " *"}
-                    variant="standard"
-                    value={field.value ?? ""}
+                    // variant="standard"
                     helperText={errors.country?.message}
-                    displayEmpty
-                    disableUnderline
-                    validators={["required"]}
+                    // displayEmpty
+                    // disableUnderline
+                    // validators={["required"]}
                     {...field}
+                    value={field.value ?? ""}
                   >
                     <option></option>
-                    {props.countriesList.map((country, i) => (
+                    {props.countriesList.map((country: any, i: any) => (
                       <option key={i}>{country}</option>
                     ))}
                   </HawaSelect>
                 )}
               />
             </div>
-            <HawaButton type="submit" fullWidth text={props.texts.payNow} />{" "}
+            <HawaButton color="primary" type="submit" width="full">
+              {props.texts.payNow}
+            </HawaButton>
           </form>
         </FormProvider>
       </div>
     </HawaContainer>
-  );
-};
-
-CheckoutForm.propTypes = {
-  texts: PropTypes.shape({
-    orderDetails: PropTypes.string,
-    billingAddress: PropTypes.string,
-    payNow: PropTypes.string,
-    emailLabel: PropTypes.string,
-    emailRequiredText: PropTypes.string,
-    emailInvalidText: PropTypes.string,
-    firstNameLabel: PropTypes.string,
-    required: PropTypes.string,
-    lastNameLabel: PropTypes.string,
-    streetAddressLabel: PropTypes.string,
-    buildingNumberLabel: PropTypes.string,
-    cityLabel: PropTypes.string,
-    stateLabel: PropTypes.string,
-    countryLabel: PropTypes.string,
-    zipCodeLabel: PropTypes.string
-  }),
-  lang: PropTypes.string,
-  countriesList: PropTypes.array,
-  products: PropTypes.array,
-  total: PropTypes.string,
-  handlePayNow: PropTypes.func
-};
+  )
+}

package/src/blocks/Payment/Confirmation.tsx

@@ -0,0 +1,96 @@
+import React 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
+    billingAddress: string
+    payNow: 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: React.FunctionComponent<
+  ConfirmationPageTypes
+> = (props) => {
+  let isArabic = props.lang === "ar"
+
+  return (
+    <HawaContainer>
+      {" "}
+      <div className="py-5 text-center text-3xl font-bold">
+        {props.confirmationTitle}
+      </div>
+      <div className="py-5">
+        <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
+            lang={props.lang}
+            columns={["Product", "Price"]}
+            rows={props.products}
+            // end={["Total", props.total]}
+          />
+        )}
+      </div>
+      <div className="flex flex-col 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="mt-5 mb-5 text-center text-sm">
+          {props.texts.fasterPaymentNote}
+        </div>
+        <a
+          className="w-fit cursor-pointer text-center text-xs font-normal"
+          onClick={props.handleRefundPolicyLink}
+        >
+          {props.texts.refundPolicy}
+        </a>
+      </div>
+    </HawaContainer>
+  )
+}

package/src/blocks/Payment/{CreditCardForm.js → CreditCardForm.tsx}

@@ -1,89 +1,104 @@
-import React from "react";
-import { HawaButton, HawaTextField } from "../../elements";
-import { Controller, useForm } from "react-hook-form";
-import { HawaContainer } from "../../layout";
+import React from "react"
+import { HawaButton, HawaTextField } from "../../elements"
+import { Controller, useForm } from "react-hook-form"
+import { HawaContainer } from "../../layout"
 
-export const CreditCardForm = (props) => {
-  const methods = useForm();
+type CreditCardFormTypes = {
+  handle: any
+  handlePayWithCreditCard: any
+}
+
+export const CreditCardForm: React.FunctionComponent<CreditCardFormTypes> = (
+  props
+) => {
+  const methods = useForm()
   const {
     formState: { errors },
     handleSubmit,
-    control
-  } = methods;
+    control,
+  } = methods
 
   return (
     <HawaContainer>
       {" "}
       <form onSubmit={handleSubmit(props.handle)}>
-        <HawaTextField
-          fullWidth
-          name="password"
-          placeholder="Enter password"
-          type="tel"
-          label="Card Number"
+        <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"
+            required: "Password is rquired",
           }}
-          helperText={errors.password?.message}
         />
         <Controller
           control={control}
           name="cardName"
           render={({ field }) => (
             <HawaTextField
-              fullWidth
+              width="full"
               name="password"
               placeholder="Enter password"
               type="password"
               label="Name On Card"
-              rules={{
-                required: "Password is rquired"
-              }}
               helperText={errors.password?.message}
             />
           )}
+          rules={{
+            required: "Password is rquired",
+          }}
         />
         <Controller
           control={control}
           name="cardName"
           render={({ field }) => (
             <HawaTextField
-              fullWidth
+              width="full"
               name="password"
               placeholder="Enter password"
               type="password"
               label="Expiry Date"
-              rules={{
-                required: "Password is rquired"
-              }}
               helperText={errors.password?.message}
             />
           )}
+          rules={{
+            required: "Password is rquired",
+          }}
         />
         <Controller
           control={control}
           name="cardName"
           render={({ field }) => (
             <HawaTextField
-              fullWidth
+              width="full"
               name="password"
               placeholder="Enter password"
               type="password"
               label="CCV"
-              rules={{
-                required: "Password is rquired"
-              }}
               helperText={errors.password?.message}
             />
           )}
+          rules={{
+            required: "Password is rquired",
+          }}
         />
         <HawaButton
           type="submit"
-          fullWidth
+          width="full"
+          color="primary"
           onClick={props.handlePayWithCreditCard}
-          text={"Pay with Credit Card"}
-        />{" "}
+        >
+          Pay with Credit Card
+        </HawaButton>
       </form>
     </HawaContainer>
-  );
-};
+  )
+}

package/src/blocks/Payment/PayWithWallet.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import { HawaButton } from "../../elements"
+import { HawaContainer } from "../../layout"
+
+type PayWithWalletTypes = {
+  walletBalance: any
+  currency: any
+  handlePayWithWallet: any
+}
+export const PayWithWallet: React.FunctionComponent<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
+        type="submit"
+        width="full"
+        color="primary"
+        onClick={props.handlePayWithWallet}
+      >
+        Pay Now
+      </HawaButton>
+    </HawaContainer>
+  )
+}