@sikka/hawa 0.0.50 → 0.0.52

package/src/blocks/Payment/Confirmation.js

@@ -1,73 +1,37 @@
 import React from "react";
 import { HawaButton, HawaTable } from "../../elements";
-import Container from "@mui/material/Container";
-import Typography from "@mui/material/Typography";
-import Divider from "@mui/material/Divider";
 import PropTypes from "prop-types";
 
 export const ConfirmationPage = (props) => {
   let isArabic = props.lang === "ar";
 
   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 }}
-        >
+    <div className="flex flex-col divide-gray-300 bg-blue-300 divide-y rounded-xl p-4">
+      <div className="text-3xl font-bold text-center py-5">
+        {props.confirmationTitle}
+      </div>
+      <div className="py-5">
+        <div className="text-center mb-2">
           {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>
+        </div>
+        <div className="text-center">{props.texts.yourOrderNumber}</div>
+        <div className="font-bold text-center">{props.orderNumber}</div>
+      </div>
 
-            <HawaTable
-              lang={props.lang}
-              columns={["Product", "Price"]}
-              rows={props.products}
-              end={["Total", props.total]}
-            />
-            <Divider variant="middle" />
-          </>
+      <div className="py-5">
+        <div className="text-xl font-semibold mb-3 text-center">
+          {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 py-5 justify-center items-center">
         <HawaButton fullWidth onClick={props.handlePrint}>
           {props.texts.print}
         </HawaButton>
@@ -77,23 +41,16 @@ export const ConfirmationPage = (props) => {
         <HawaButton fullWidth onClick={props.handleHome}>
           {props.texts.homePage}
         </HawaButton>
-        <Typography align="center" variant="body2" style={{ marginTop: 10 }}>
+        <div className="mt-5 mb-5 text-center text-sm">
           {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}>
+        </div>
+        <a
+          className="w-fit text-center cursor-pointer text-xs font-normal"
+          onClick={props.handleRefundPolicyLink}
+        >
           {props.texts.refundPolicy}
-        </Typography>
-      </a>
+        </a>
+      </div>
     </div>
   );
 };

package/src/blocks/Payment/CreditCardForm.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { HawaButton, HawaTextField } from "../../elements";
-import { Controller, FormProvider, useForm } from "react-hook-form";
-import Container from "@mui/material/Container";
+import { Controller, useForm } from "react-hook-form";
 
 export const CreditCardForm = (props) => {
   const methods = useForm();
@@ -12,7 +11,7 @@ export const CreditCardForm = (props) => {
   } = methods;
 
   return (
-    <Container maxWidth="xs">
+    <div className="flex flex-col bg-blue-300 rounded-xl p-4">
       <form onSubmit={handleSubmit(props.handle)}>
         <HawaTextField
           fullWidth
@@ -86,6 +85,6 @@ export const CreditCardForm = (props) => {
           {"Pay with Credit Card"}
         </HawaButton>
       </form>
-    </Container>
+    </div>
   );
 };

package/src/blocks/Payment/Form/CForm.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useState, useRef } from "react";
 import sha256 from "crypto-js/sha256";
-import CircularProgress from "@mui/material/CircularProgress";
 import useTranslation from "next-translate/useTranslation";
 import axios from "axios";
 import { HawaButton } from "../../../elements";
@@ -310,15 +309,15 @@ export default function CForm({
             fullWidth
             onClick={handlePayfortForm}
           >
-            {loading ? (
+            {/* {loading ? (
               <CircularProgress
                 variant="indeterminate"
                 style={{ color: "white", display: "none" }}
                 size={25}
               />
-            ) : (
+            ) : ( */}
               <span className="pay-new-btn-txt">{t("pay-now")}</span>
-            )}
+            {/* )} */}
           </HawaButton>
         </div>
       </div>

package/src/blocks/Payment/Form/PaymentMethod.js

@@ -1,6 +1,6 @@
 import useTranslation from "next-translate/useTranslation";
-import Chip from "@mui/material/Chip";
 import PropTypes from "prop-types";
+import { HawaChip } from "../../../elements";
 
 export const PaymentMethod = (props) => {
   const { t } = useTranslation("common");
@@ -106,14 +106,7 @@ const PaymentMethodButton = (props) => {
         }}
       >
         {props.methodLabel}
-        {props.chip ? (
-          <Chip
-            size="small"
-            color="primary"
-            label={props.chip}
-            style={{ marginRight: 10, marginLeft: 10 }}
-          />
-        ) : null}
+        {props.chip ? <HawaChip label="test" /> : null}x
       </div>
     </button>
   );

package/src/blocks/Payment/Gateway/Wallet.js

@@ -1,148 +1,148 @@
-import useTranslation from "next-translate/useTranslation";
-import Grid from "@mui/material/Grid";
-import Paper from "@mui/material/Paper";
-import CircularProgress from "@mui/material/CircularProgress";
-import { makeStyles } from "@mui/material/styles";
+// import useTranslation from "next-translate/useTranslation";
+// import Grid from "@mui/material/Grid";
+// import Paper from "@mui/material/Paper";
+// import CircularProgress from "@mui/material/CircularProgress";
+// import { makeStyles } from "@mui/material/styles";
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    flexGrow: 1
-  },
-  paper: {
-    padding: theme.spacing(2),
-    textAlign: "center",
-    color: theme.palette.text.secondary
-  }
-}));
+// const useStyles = makeStyles((theme) => ({
+//   root: {
+//     flexGrow: 1
+//   },
+//   paper: {
+//     padding: theme.spacing(2),
+//     textAlign: "center",
+//     color: theme.palette.text.secondary
+//   }
+// }));
 
-const Wallet = (props) => {
-  const { t } = useTranslation("common");
-  const classes = useStyles();
-  return (
-    <div className="block-pay-content" style={{ padding: 20 }}>
-      <div key="Payment">
-        <>
-          <Grid
-            container
-            spacing={3}
-            alignContent={"center"}
-            alignItems={"center"}
-            style={{ width: "100%", margin: 0 }}
-          >
-            <Grid item xs={4}>
-              <Paper
-                className={classes.paper}
-                style={{
-                  boxShadow: "none",
-                  fontWeight: "bold"
-                }}
-              >
-                {t("payment-made")} <br />
-                {props.amount} {t(props.SelectedCurrency)}
-              </Paper>
-            </Grid>
-            <Grid
-              item
-              style={{
-                padding: 0,
-                margin: "-5px"
-              }}
-            >
-              <Paper
-                className={classes.paper}
-                style={{
-                  backgroundColor: "transparent",
-                  boxShadow: "none",
-                  fontSize: "18px",
-                  fontWeight: "bold",
-                  padding: 0
-                }}
-              >
-                -
-              </Paper>
-            </Grid>
-            <Grid item xs={4}>
-              <Paper
-                className={classes.paper}
-                style={{
-                  boxShadow: "none",
-                  fontWeight: "bold"
-                }}
-              >
-                {t("amount-in-wallet")} <br />
-                {props.total_wallet.toFixed(2)} {t(props.SelectedCurrency)}
-              </Paper>
-            </Grid>
-            <Grid
-              item
-              style={{
-                padding: 0,
-                margin: "-5px"
-              }}
-            >
-              <Paper
-                className={classes.paper}
-                style={{
-                  backgroundColor: "transparent",
-                  boxShadow: "none",
-                  fontSize: "18px",
-                  fontWeight: "bold",
-                  padding: 0
-                }}
-              >
-                =
-              </Paper>
-            </Grid>
-            <Grid item xs={4}>
-              <Paper
-                className={classes.paper}
-                style={{
-                  boxShadow: "none",
-                  fontWeight: "bold"
-                }}
-              >
-                {t("left-amount-wallet")} <br />
-                {props.leftAmount.toFixed(2)} {t(props.SelectedCurrency)}
-              </Paper>
-            </Grid>
-            <Grid item xs={12}>
-              <Paper
-                className={classes.paper}
-                style={{
-                  boxShadow: "none",
-                  fontWeight: "bold"
-                }}
-              >
-                {t("remaining-amount")}: {props.remainingAmount.toFixed(2)}{" "}
-                {t(props.SelectedCurrency)}
-              </Paper>
-            </Grid>
-            {!props.leftAmount && (
-              <Grid item xs={12}>
-                <button
-                  variant="contained"
-                  color="primary"
-                  fullWidth
-                  type="submit"
-                  onClick={(e) => props.handleWalletPayNow(e)}
-                >
-                  {props.loading ? (
-                    <CircularProgress
-                      variant="indeterminate"
-                      style={{ color: "white" }}
-                      size={25}
-                    />
-                  ) : (
-                    t("pay-now")
-                  )}
-                </button>
-              </Grid>
-            )}
-          </Grid>
-        </>
-      </div>
-    </div>
-  );
-};
+// const Wallet = (props) => {
+//   const { t } = useTranslation("common");
+//   const classes = useStyles();
+//   return (
+//     <div className="block-pay-content" style={{ padding: 20 }}>
+//       <div key="Payment">
+//         <>
+//           <Grid
+//             container
+//             spacing={3}
+//             alignContent={"center"}
+//             alignItems={"center"}
+//             style={{ width: "100%", margin: 0 }}
+//           >
+//             <Grid item xs={4}>
+//               <Paper
+//                 className={classes.paper}
+//                 style={{
+//                   boxShadow: "none",
+//                   fontWeight: "bold"
+//                 }}
+//               >
+//                 {t("payment-made")} <br />
+//                 {props.amount} {t(props.SelectedCurrency)}
+//               </Paper>
+//             </Grid>
+//             <Grid
+//               item
+//               style={{
+//                 padding: 0,
+//                 margin: "-5px"
+//               }}
+//             >
+//               <Paper
+//                 className={classes.paper}
+//                 style={{
+//                   backgroundColor: "transparent",
+//                   boxShadow: "none",
+//                   fontSize: "18px",
+//                   fontWeight: "bold",
+//                   padding: 0
+//                 }}
+//               >
+//                 -
+//               </Paper>
+//             </Grid>
+//             <Grid item xs={4}>
+//               <Paper
+//                 className={classes.paper}
+//                 style={{
+//                   boxShadow: "none",
+//                   fontWeight: "bold"
+//                 }}
+//               >
+//                 {t("amount-in-wallet")} <br />
+//                 {props.total_wallet.toFixed(2)} {t(props.SelectedCurrency)}
+//               </Paper>
+//             </Grid>
+//             <Grid
+//               item
+//               style={{
+//                 padding: 0,
+//                 margin: "-5px"
+//               }}
+//             >
+//               <Paper
+//                 className={classes.paper}
+//                 style={{
+//                   backgroundColor: "transparent",
+//                   boxShadow: "none",
+//                   fontSize: "18px",
+//                   fontWeight: "bold",
+//                   padding: 0
+//                 }}
+//               >
+//                 =
+//               </Paper>
+//             </Grid>
+//             <Grid item xs={4}>
+//               <Paper
+//                 className={classes.paper}
+//                 style={{
+//                   boxShadow: "none",
+//                   fontWeight: "bold"
+//                 }}
+//               >
+//                 {t("left-amount-wallet")} <br />
+//                 {props.leftAmount.toFixed(2)} {t(props.SelectedCurrency)}
+//               </Paper>
+//             </Grid>
+//             <Grid item xs={12}>
+//               <Paper
+//                 className={classes.paper}
+//                 style={{
+//                   boxShadow: "none",
+//                   fontWeight: "bold"
+//                 }}
+//               >
+//                 {t("remaining-amount")}: {props.remainingAmount.toFixed(2)}{" "}
+//                 {t(props.SelectedCurrency)}
+//               </Paper>
+//             </Grid>
+//             {!props.leftAmount && (
+//               <Grid item xs={12}>
+//                 <button
+//                   variant="contained"
+//                   color="primary"
+//                   fullWidth
+//                   type="submit"
+//                   onClick={(e) => props.handleWalletPayNow(e)}
+//                 >
+//                   {props.loading ? (
+//                     <CircularProgress
+//                       variant="indeterminate"
+//                       style={{ color: "white" }}
+//                       size={25}
+//                     />
+//                   ) : (
+//                     t("pay-now")
+//                   )}
+//                 </button>
+//               </Grid>
+//             )}
+//           </Grid>
+//         </>
+//       </div>
+//     </div>
+//   );
+// };
 
-export default Wallet;
+// export default Wallet;

package/src/blocks/Payment/PayWithWallet.js

@@ -1,23 +1,16 @@
 import React from "react";
-import Typography from "@mui/material/Typography";
-import Container from "@mui/material/Container";
 import { HawaButton } from "../../elements";
 
 export const PayWithWallet = (props) => {
   return (
-    <Container maxWidth="xs">
-      <Typography align="center">Wallet Balance</Typography>
-      <Typography align="center" variant="h1">
+    <div className="flex flex-col bg-blue-300 rounded-xl p-4">
+      <div className="text-5xl font-extrabold text-center">
         {props.walletBalance || "0"}
-        <Typography>{props.currency || "SAR"}</Typography>
-      </Typography>
-      <HawaButton
-        type="submit"
-        fullWidth
-        onClick={props.handlePayWithWallet}
-      >
+        <div className="text-sm font-normal">{props.currency || "SAR"}</div>
+      </div>
+      <HawaButton type="submit" fullWidth onClick={props.handlePayWithWallet}>
         {"Pay Now"}
       </HawaButton>
-    </Container>
+    </div>
   );
 };

package/src/blocks/Payment/SelectPayment.js

@@ -1,11 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { HawaTypography, HawaLogoButton } from "../../elements";
-import Container from "@mui/material/Container";
 
 export const SelectPayment = (props) => {
   return (
-    <Container maxWidth="xs">
+    <div className="flex flex-col bg-blue-300 rounded-xl p-4">
       <HawaTypography align="center">Choose Payment Method</HawaTypography>
       {props.viaWallet && (
         <HawaLogoButton
@@ -56,7 +55,7 @@ export const SelectPayment = (props) => {
           onClick={props.handleApplePay}
         />
       )}
-    </Container>
+    </div>
   );
 };
 

package/src/blocks/Pricing/PricingPlans.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import Container from "@mui/material/Container";
 import { HawaPricingCard, HawaPanelTabs } from "../../elements";
 import PropTypes from "prop-types";
 
@@ -7,7 +6,7 @@ export const PricingPlans = (props) => {
   const [currentCurrency, setCurrentCurrency] = useState("sar");
   const [currentCycle, setCurrentCycle] = useState("monthly");
   return (
-    <Container style={{ width: "fit-content" }} variant="plain">
+    <div>
       <div
         style={{
           display: "flex",
@@ -41,7 +40,7 @@ export const PricingPlans = (props) => {
         />
       </div>
 
-      <Container variant="pricing">
+      <div className="flex flex-row">
         {props.plans.map((plan) => {
           return (
             <HawaPricingCard
@@ -52,8 +51,8 @@ export const PricingPlans = (props) => {
             />
           );
         })}
-      </Container>
-    </Container>
+      </div>
+    </div>
   );
 };
 

package/src/elements/DraggableCard.js

@@ -1,36 +1,26 @@
-import { MoreVert } from "@mui/icons-material";
-import { Container, Stack } from "@mui/material";
 import React from "react";
 
 export const DraggableCard = (props) => {
   return (
-    <Stack
-      variant="card"
-      direction="row"
-      maxWidth={props.maxWidth}
-      style={{ paddingLeft: 5 }}
-    >
-      <div
-        style={{
-        //   backgroundColor: "blue",
-          display: "flex",
-          alignItems: "center",
-          //   paddingRight: 5,
-          borderRight: "1px solid grey",
-          marginRight: 20
-        }}
+    <div className="flex flex-row bg-blue-300 rounded-xl p-4">
+      <button
+        id="dropdownMenuIconButton"
+        data-dropdown-toggle="dropdownDots"
+        class="inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 bg-white rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none dark:text-white focus:ring-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+        type="button"
       >
-        <MoreVert />
-      </div>
+        <svg
+          class="w-6 h-6"
+          aria-hidden="true"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
+        </svg>
+      </button>
 
-      <div
-        style={{
-          //   backgroundColor: "red",
-          width: "100%"
-        }}
-      >
-        {props.children}
-      </div>
-    </Stack>
+      <div className="p-4">{props.children}</div>
+    </div>
   );
 };

package/src/elements/HawaCheckbox.js

@@ -1,6 +1,4 @@
 import React from "react";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Checkbox from "@mui/material/Checkbox";
 
 export const HawaCheckbox = (props) => {
   console.log("props : ", props);

package/src/elements/HawaItemCard.js

@@ -1,5 +1,4 @@
 import React from "react";
-import Container from "@mui/material/Container";
 import PropTypes from "prop-types";
 
 export const HawaItemCard = (props) => {