@sikka/hawa 0.0.18 → 0.0.21

package/src/blocks/Payment/Confirmation.js

@@ -0,0 +1,117 @@
+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" />
+
+        <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();
@@ -19,8 +19,9 @@ export const CreditCardForm = (props) => {
             fullWidth
             name="password"
             placeholder="Enter password"
-            type="number"
+            type="tel"
             label="Card Number"
+            // variant="unscrollable"
             // startAdornment={
             //   <InputAdornment position="start">
             //     <PasswordIcon />

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

@@ -16,3 +16,5 @@ export * from "./SelectPayment";
 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/HawaListItem.js

@@ -1,5 +1,6 @@
 import React from "react";
-import { ListItemButton, ListItemText } from "@mui/material";
+import ListItemText from "@mui/material/ListItemButton";
+import ListItemButton from "@mui/material/ListItemText";
 import InboxIcon from "@mui/icons-material/MoveToInbox";
 
 export const HawaListItem = (props) => {

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/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,25 +7,43 @@ 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 variant={i == 0 || "bordered"}>{col}</TableCell>
+              <TableCell
+                align={isArabic ? "right" : "left"}
+                key={i}
+                style={{ fontWeight: 700 }}
+                variant={
+                  i > 0 ? (isArabic ? "borderedRight" : "borderedLeft") : "body"
+                }
+              >
+                {col}
+              </TableCell>
             ))}
           </TableRow>
         </TableHead>
+
         <TableBody>
           {props.rows.map((singleRow, j) => (
             <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>
@@ -33,6 +51,24 @@ export const HawaTable = (props) => {
             </TableRow>
           ))}
         </TableBody>
+        {props.end && (
+          <TableRow>
+            {props.end.map((e, k) => (
+              <TableCell
+                align={isArabic ? "right" : "left"}
+                style={{ fontWeight: 700 }}
+                key={k}
+                component="th"
+                scope="row"
+                variant={
+                  k > 0 ? (isArabic ? "borderedRight" : "borderedLeft") : "body"
+                }
+              >
+                {e}
+              </TableCell>
+            ))}
+          </TableRow>
+        )}
       </Table>
     </TableContainer>
   );

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

@@ -8,6 +8,7 @@ export * from "./HawaPricingCard";
 export * from "./HawaSettingsRow";
 export * from "./HawaLogoButton";
 export * from "./HawaButton";
+export * from "./HawaSelect";
 export * from "./HawaTextField";
 export * from "./HawaInputLabel";
 export * from "./HawaTypography";

package/src/layout/HawaDialog.js

@@ -1,11 +1,9 @@
 import CloseIcon from "@mui/icons-material/Close";
-import {
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton
-} from "@mui/material";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import IconButton from "@mui/material/IconButton";
 import React, { useState } from "react";
 
 const BootstrapDialogTitle = (props) => {