@sikka/hawa 0.0.19 → 0.0.22

package/src/blocks/Payment/CheckoutForm.js

@@ -1,95 +1,242 @@
-import React from "react";
-import {
-  HawaTextField,
-  ActionButton,
-  HawaTypography,
-  HawaTable
-} from "../../elements";
-import { Box } from "../../layout";
-import { FormProvider, useForm } from "react-hook-form";
-import { Button, Container, Typography } from "@mui/material";
+import React, { useState } from "react";
+import { HawaTextField, HawaTable, HawaSelect } from "../../elements";
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import Button from "@mui/material/Button";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
 
 export const CheckoutForm = (props) => {
+  let isArabic = props.lang === "ar";
   const methods = useForm();
   const {
     formState: { errors },
-    handleSubmit
+    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 (
-    <Container maxWidth="xs">
+    <Container maxWidth="sm" style={{ direction: isArabic ? "rtl" : "ltr" }}>
       <Typography
         align="center"
-        variant="h4"
-        fontWeight={400}
+        variant="h5"
+        fontWeight={500}
         style={{ marginBottom: 10 }}
       >
-        Order Details
+        {props.texts.orderDetails}
       </Typography>
       <HawaTable
+        lang={props.lang}
         columns={["Product", "Price"]}
-        rows={[
-          ["Logo Design", "1,200 SAR"],
-          ["Website Design", "1,500 SAR"],
-          ["Website Development", "900 SAR"],
-          ["Hosting", "200 SAR"],
-          ["Social Media Management", "700 SAR"]
-        ]}
-        end={["Total", "5,330 SAR"]}
+        rows={props.products}
+        end={["Total", props.total]}
       />
+      <Divider variant="middle" />
+
       <Typography
         align="center"
-        variant="h4"
-        fontWeight={400}
-        style={{ marginTop: 10 }}
+        variant="h5"
+        fontWeight={500}
+        style={{ marginBottom: 10 }}
       >
-        Billing Address
+        {props.texts.billingAddress}
       </Typography>
+
       <FormProvider {...methods}>
-        <form onSubmit={handleSubmit(props.handle)}>
-          <HawaTextField
-            fullWidth
-            name="password"
-            placeholder="Enter password"
-            type="tel"
-            label="Card Number"
-            // variant="unscrollable"
-            // startAdornment={
-            //   <InputAdornment position="start">
-            //     <PasswordIcon />
-            //   </InputAdornment>
-            // }
-            rules={{
-              required: "Password is rquired"
-            }}
-            helperText={errors.password?.message}
-          />
+        <form onSubmit={handleSubmit(props.handlePayNow)}>
+          <Container sx={containerStyle}>
+            <Controller
+              control={control}
+              name="firstName"
+              rules={{ required: props.texts?.required }}
+              render={({ field }) => (
+                <HawaTextField
+                  inForm
+                  fullWidth
+                  type="text"
+                  value={field.value ?? ""}
+                  label={props.texts?.firstNameLabel + " *"}
+                  helperText={errors.firstName?.message}
+                  {...field}
+                />
+              )}
+            />
+            <div style={{ width: 20 }} />
 
-          <HawaTextField
-            fullWidth
-            name="password"
-            placeholder="Enter password"
-            type="password"
-            label="Name On Card"
-            // startAdornment={
-            //   <InputAdornment position="start">
-            //     <PasswordIcon />
-            //   </InputAdornment>
-            // }
+            <Controller
+              control={control}
+              name="lastName"
+              rules={{ required: props.texts?.required }}
+              render={({ field }) => (
+                <HawaTextField
+                  inForm
+                  fullWidth
+                  type="text"
+                  value={field.value ?? ""}
+                  label={props.texts?.lastNameLabel + " *"}
+                  helperText={errors.lastName?.message}
+                  {...field}
+                />
+              )}
+            />
+          </Container>
+          <Controller
+            control={control}
+            name="email"
+            render={({ field }) => (
+              <HawaTextField
+                inForm
+                fullWidth
+                type="text"
+                value={field.value ?? ""}
+                label={props.texts?.emailLabel + " *"}
+                helperText={errors.email?.message}
+                {...field}
+              />
+            )}
             rules={{
-              required: "Password is rquired"
+              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
+              }
             }}
-            helperText={errors.password?.message}
           />
 
-          <Button
-            type="submit"
-            fullWidth
-            variant="last"
-            onClick={props.handlePayWithCreditCard}
-          >
-            {/* {props.texts.signInText} */}
-            {"Pay with Credit Card"}
+          <Container sx={containerStyle}>
+            <Controller
+              control={control}
+              name="streetAddress"
+              rules={{ required: props.texts?.required }}
+              render={({ field }) => (
+                <HawaTextField
+                  inForm
+                  fullWidth
+                  type="text"
+                  value={field.value ?? ""}
+                  label={props.texts?.streetAddressLabel + " *"}
+                  helperText={errors.streetAddress?.message}
+                  {...field}
+                />
+              )}
+            />
+            <div style={{ width: 20 }} />
+
+            <Controller
+              control={control}
+              name="buildingNumber"
+              rules={{ required: props.texts?.required }}
+              render={({ field }) => (
+                <HawaTextField
+                  inForm
+                  fullWidth
+                  type="text"
+                  value={field.value ?? ""}
+                  label={props.texts?.buildingNumberLabel + " *"}
+                  helperText={errors.buildingNumber?.message}
+                  {...field}
+                />
+              )}
+            />
+          </Container>
+          <Container sx={containerStyle}>
+            <Controller
+              control={control}
+              name="province"
+              rules={{ required: props.texts?.required }}
+              render={({ field }) => (
+                <HawaTextField
+                  inForm
+                  fullWidth
+                  type="text"
+                  value={field.value ?? ""}
+                  label={props.texts?.stateLabel + " *"}
+                  helperText={errors.province?.message}
+                  {...field}
+                />
+              )}
+            />
+            <div style={{ width: 20 }} />
+
+            <Controller
+              control={control}
+              name="city"
+              rules={{ required: props.texts?.required }}
+              render={({ field }) => (
+                <HawaTextField
+                  inForm
+                  fullWidth
+                  type="text"
+                  value={field.value ?? ""}
+                  label={props.texts?.cityLabel + " *"}
+                  helperText={errors.city?.message}
+                  {...field}
+                />
+              )}
+            />
+          </Container>
+          <Container sx={containerStyle}>
+            <Controller
+              control={control}
+              name="zipCode"
+              rules={{ required: props.texts?.required }}
+              render={({ field }) => (
+                <HawaTextField
+                  inForm
+                  fullWidth
+                  type="number"
+                  variant="unscrollable"
+                  value={field.value ?? ""}
+                  label={props.texts?.zipCodeLabel + " *"}
+                  helperText={errors.zipCode?.message}
+                  {...field}
+                />
+              )}
+            />
+            <div style={{ width: 20 }} />
+
+            <Controller
+              control={control}
+              name="country"
+              rules={{ required: props.texts?.required }}
+              render={({ field }) => (
+                <HawaSelect
+                  fullWidth
+                  native
+                  label={props.texts?.countryLabel + " *"}
+                  variant="standard"
+                  value={field.value ?? ""}
+                  helperText={errors.country?.message}
+                  displayEmpty
+                  disableUnderline
+                  validators={["required"]}
+                  {...field}
+                >
+                  <option></option>
+                  {props.countriesList.map((country, i) => (
+                    <option key={i}>{country}</option>
+                  ))}
+                </HawaSelect>
+              )}
+            />
+          </Container>
+          <Button type="submit" fullWidth variant="last">
+            {props.texts.payNow}
           </Button>
         </form>
       </FormProvider>

package/src/blocks/Payment/Confirmation.js

@@ -0,0 +1,120 @@
+import React, { useState } from "react";
+import { HawaTextField, HawaTable, HawaSelect } from "../../elements";
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import Button from "@mui/material/Button";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
+
+export const ConfirmationPage = (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 (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center"
+      }}
+    >
+      <Container maxWidth="sm" style={{ direction: isArabic ? "rtl" : "ltr" }}>
+        <Typography
+          align="center"
+          variant="h3"
+          fontWeight={400}
+          style={{ marginBottom: 10 }}
+        >
+          {props.confirmationTitle}
+        </Typography>
+        <Divider variant="middle" />
+
+        <Typography
+          align="center"
+          variant="body1"
+          //   fontWeight={500}
+          style={{ marginBottom: 10 }}
+        >
+          {props.texts.successMessage} <strong>{props.userEmail}</strong>
+        </Typography>
+        <Typography align="center" variant="body1">
+          {props.texts.yourOrderNumber}
+        </Typography>
+        <Typography
+          align="center"
+          variant="body1"
+          fontWeight={700}
+          style={{ marginBottom: 10 }}
+        >
+          {props.orderNumber}
+        </Typography>
+        <Divider variant="middle" />
+        {props.products && (
+          <>
+            <Typography
+              align="center"
+              variant="h5"
+              fontWeight={500}
+              style={{ marginBottom: 10 }}
+            >
+              {props.texts.orderDetails}
+            </Typography>
+
+            <HawaTable
+              lang={props.lang}
+              columns={["Product", "Price"]}
+              rows={props.products}
+              end={["Total", props.total]}
+            />
+            <Divider variant="middle" />
+          </>
+        )}
+        <Button onClick={props.handlePrint} variant="contained">
+          {props.texts.print}
+        </Button>
+        <Button onClick={props.handleHistory} variant="last">
+          {props.texts.history}
+        </Button>
+        <Button onClick={props.handleHome} variant="last">
+          {props.texts.homePage}
+        </Button>
+        <Typography align="center" variant="body2" style={{ marginTop: 10 }}>
+          {props.texts.fasterPaymentNote}
+        </Typography>
+      </Container>
+      <a
+        style={{
+          marginTop: 10,
+          paddingTop: 10,
+          padding: 5,
+          cursor: "pointer"
+        }}
+        onClick={props.handleRefundPolicyLink}
+      >
+        <Typography align="center" variant="caption" fontWeight={500}>
+          {props.texts.refundPolicy}
+        </Typography>
+      </a>
+    </div>
+  );
+};

package/src/blocks/Payment/CreditCardForm.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { HawaTextField, ActionButton } from "../../elements";
-import { Box } from "../../layout";
+import { HawaTextField } from "../../elements";
 import { FormProvider, useForm } from "react-hook-form";
-import { Button, Container } from "@mui/material";
+import Button from "@mui/material/Button";
+import Container from "@mui/material/Container";
 
 export const CreditCardForm = (props) => {
   const methods = useForm();

package/src/blocks/Payment/PayWithWallet.js

@@ -1,7 +1,7 @@
 import React from "react";
-import { ActionButton } from "../../elements";
-import { Box } from "../../layout";
-import { Button, Container, Typography } from "@mui/material";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
+import Button from "@mui/material/Button";
 
 export const PayWithWallet = (props) => {
   return (

package/src/blocks/Payment/SelectPayment.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { HawaTextField, HawaTypography, HawaLogoButton } from "../../elements";
-import { Container } from "@mui/material";
+import Container from "@mui/material/Container";
 
 export const SelectPayment = (props) => {
   return (

package/src/blocks/Payment/index.js

@@ -17,3 +17,4 @@ export * from "./CreditCardForm";
 export * from "./ChargeWalletForm";
 export * from "./PayWithWallet";
 export * from "./CheckoutForm";
+export * from "./Confirmation";

package/src/elements/AdaptiveButton.js

@@ -2,8 +2,6 @@ import React, { useState } from "react";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 import PropTypes from "prop-types";
-import { StyledTooltip } from "./StyledTooltip";
-import { getTextColor } from "../util";
 
 export const AdaptiveButton = (props) => {
   if (props.showText) {

package/src/elements/HawaLogoButton.js

@@ -1,10 +1,9 @@
 import React from "react";
-// import { styled, darken } from "@mui/material/styles";
 import Button from "@mui/material/Button";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import TwitterIcon from "@mui/icons-material/Twitter";
 import WalletIcon from "@mui/icons-material/AccountBalanceWallet";
-import { Typography } from "@mui/material";
+import Typography from "@mui/material/Typography";
 
 export const HawaLogoButton = (props) => {
   let logoElement = "";

package/src/elements/HawaPopMenu.js

@@ -0,0 +1,10 @@
+import { MenuItem, Typography } from "@mui/material";
+
+export const HawaPopMenu = () => {
+  return (
+    <MenuItem key={setting.label} onClick={setting.action}>
+      {setting.icon && <setting.icon />}
+      <Typography textAlign="center">{setting.label}</Typography>
+    </MenuItem>
+  );
+};

package/src/elements/HawaPricingCard.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Container from "@mui/material/Container";
-import { Button, Typography } from "@mui/material";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
 import CheckIcon from "@mui/icons-material/CheckCircleOutlined";
 export const HawaPricingCard = (props) => {
   let isArabic = props.lang === "ar";

package/src/elements/HawaSelect.js

@@ -0,0 +1,26 @@
+import React from "react";
+import InputLabel from "@mui/material/InputLabel";
+import Select from "@mui/material/Select";
+import Typography from "@mui/material/Typography";
+
+export const HawaSelect = (props) => {
+  return (
+    <div style={{ width: "100%" }}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }}
+      >
+        <InputLabel>{props.label}</InputLabel>
+
+        {props.helperText && (
+          <Typography variant="validation">{props.helperText}</Typography>
+        )}
+      </div>
+      <Select {...props}>{props.children}</Select>
+    </div>
+  );
+};

package/src/elements/HawaSwitch.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Switch } from "@mui/material";
+import Switch from "@mui/material/Switch";
 
 export const HawaSwitch = (props) => {
   return <Switch {...props} />;

package/src/elements/HawaTable.js

@@ -7,15 +7,20 @@ import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 
 export const HawaTable = (props) => {
+  let isArabic = props.lang === "ar";
   return (
-    <TableContainer>
+    <TableContainer style={{ direction: isArabic ? "rtl" : "ltr" }}>
       <Table aria-label="a dense table">
         <TableHead>
           <TableRow>
             {props.columns.map((col, i) => (
               <TableCell
+                align={isArabic ? "right" : "left"}
+                key={i}
                 style={{ fontWeight: 700 }}
-                variant={i == 0 || "bordered"}
+                variant={
+                  i > 0 ? (isArabic ? "borderedRight" : "borderedLeft") : "body"
+                }
               >
                 {col}
               </TableCell>
@@ -28,10 +33,17 @@ export const HawaTable = (props) => {
             <TableRow key={j}>
               {singleRow.map((r, i) => (
                 <TableCell
+                  align={isArabic ? "right" : "left"}
                   key={i}
                   component="th"
                   scope="row"
-                  variant={i == 0 || "bordered"}
+                  variant={
+                    i > 0
+                      ? isArabic
+                        ? "borderedRight"
+                        : "borderedLeft"
+                      : "body"
+                  }
                 >
                   {r}
                 </TableCell>
@@ -43,11 +55,14 @@ export const HawaTable = (props) => {
           <TableRow>
             {props.end.map((e, k) => (
               <TableCell
-                style={{ fontWeight: 700 ,}}
+                align={isArabic ? "right" : "left"}
+                style={{ fontWeight: 700 }}
                 key={k}
                 component="th"
                 scope="row"
-                variant={k == 0 || "bordered"}
+                variant={
+                  k > 0 ? (isArabic ? "borderedRight" : "borderedLeft") : "body"
+                }
               >
                 {e}
               </TableCell>

package/src/elements/HawaTextField.js

@@ -1,11 +1,17 @@
 import React from "react";
 import Input from "@mui/material/Input";
 import InputLabel from "@mui/material/InputLabel";
-import { Typography } from "@mui/material";
+import Typography from "@mui/material/Typography";
 
 export const HawaTextField = (props) => {
   return (
-    <>
+    <div
+      style={
+        props.inForm && {
+          width: "100%"
+        }
+      }
+    >
       <div
         style={{
           display: "flex",
@@ -14,13 +20,13 @@ export const HawaTextField = (props) => {
           alignItems: "center"
         }}
       >
-        <InputLabel>{props.label}</InputLabel>
+        {props.label && <InputLabel>{props.label}</InputLabel>}
 
         {props.helperText && (
           <Typography variant="validation">{props.helperText}</Typography>
         )}
       </div>
       <Input disableUnderline {...props} />
-    </>
+    </div>
   );
 };

package/src/elements/HawaTypography.js

@@ -1,5 +1,4 @@
 import React from "react";
-// import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 
 export const HawaTypography = (props) => {

package/src/elements/index.js

@@ -1,13 +1,12 @@
 export * from "./AdaptiveButton";
 export * from "./ActionButton";
-export * from "./HawaListItem";
-export * from "./HawaAppBar";
 export * from "./HawaCheckbox";
 export * from "./HawaRadio";
 export * from "./HawaPricingCard";
 export * from "./HawaSettingsRow";
 export * from "./HawaLogoButton";
 export * from "./HawaButton";
+export * from "./HawaSelect";
 export * from "./HawaTextField";
 export * from "./HawaInputLabel";
 export * from "./HawaTypography";