@sikka/hawa 0.0.3 → 0.0.6

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

@@ -0,0 +1,138 @@
+import { useEffect } from "react";
+import axios from "axios";
+import qs from "qs";
+import {
+    PayPalButtons,
+    usePayPalScriptReducer,
+    PayPalScriptProvider
+  } from "@paypal/react-paypal-js";
+
+// This values are the props in the UI
+const currency = "USD";
+const style = {
+  layout: "vertical",
+  color: "blue",
+  shape: "rect",
+  label: "paypal"
+};
+
+const Paypal = (props) => {
+  return (
+    <PayPalScriptProvider
+    deferLoading={true}
+    options={{
+      "client-id": `${process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID}`,
+      locale: lang === "ar" ? "ar_SA" : "en_US"
+    }}
+  >
+    <ButtonWrapper
+      currency={currency}
+      showSpinner={false}
+      amount={getFinalPricePaypal(
+        invoice.currency?.toLowerCase() == "sar"
+          ? invoice.invoice_discount
+          : invoice.invoice_discount_usd
+      )}
+      lang={lang}
+      invoiceObject={invoiceObject}
+      router={router}
+    />
+  </PayPalScriptProvider>
+  );
+};
+
+// Custom component to wrap the PayPalButtons and handle currency changes
+const ButtonWrapper = ({
+    amount,
+    currency,
+    showSpinner,
+    lang,
+    invoiceObject,
+    router
+  }) => {
+    // usePayPalScriptReducer can be use only inside children of PayPalScriptProviders
+    // This is the main reason to wrap the PayPalButtons in a new component
+    const [{ options, isPending }, dispatch] = usePayPalScriptReducer();
+    console.log("amount=", amount);
+    useEffect(() => {
+      dispatch({
+        type: "resetOptions",
+        value: {
+          ...options,
+          currency: currency
+        }
+      });
+    }, [currency, showSpinner]);
+  
+    return (
+      <div
+        style={{
+          padding: "10px",
+          marginTop: "10px",
+          fontSize: "17px",
+          width: "100%"
+        }}
+      >
+        {showSpinner && isPending && <div className="spinner" />}
+        <PayPalButtons
+          style={style}
+          disabled={false}
+          //forceReRender={[amount, currency, style]}
+          fundingSource={undefined}
+          createOrder={(data, actions) => {
+            console.log("lang=", amount);
+            return actions.order
+              .create({
+                purchase_units: [
+                  {
+                    amount: {
+                      currency_code: currency,
+                      value: amount
+                    },
+                    reference_id: invoiceObject._id
+                    /*items: [
+                      name: ,
+                      unit_amount: ,
+                      tax: ,
+                      quantity: ,
+                      description: ,
+                    ]*/
+                  }
+                ],
+                application_context: {
+                  locale: lang === "ar" ? "ar-SA" : "en-US"
+                }
+              })
+              .then((orderId) => {
+                // Your code here after create the order
+                return orderId;
+              });
+          }}
+          onApprove={async function (data, actions) {
+            return actions.order.capture().then(async function (details) {
+              console.log("data=", details);
+              details["language"] = lang;
+              let checkoutInfo = await axios.post(
+                `${process.env.NEXT_PUBLIC_SIKKA_API_URL}/paypal/payment/finalize`,
+                qs.stringify(details)
+              );
+              if (checkoutInfo.data?.ok === true) {
+                router.push({
+                  pathname: "/confirmation/" + checkoutInfo.data.transaction._id
+                });
+              } else {
+                router.push({
+                  pathname: "/payment/error/" + props.data.merchant_reference,
+                  query: {
+                    code: 74
+                  }
+                });
+              }
+            });
+          }}
+        />
+      </div>
+    );
+  };
+
+export default Paypal;

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

@@ -0,0 +1,149 @@
+import useTranslation from "next-translate/useTranslation";
+import Button from "@mui/material/Button";
+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 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;

package/src/blocks/Payment/PayWithWallet.js

@@ -0,0 +1,35 @@
+import React from "react";
+import {
+  HawaTextField,
+  ActionButton,
+  GoogleButton,
+  TwitterButton,
+  GithubButton,
+  VisaMasterButton,
+  MadaButton,
+  STCPayButton,
+  PayPalButton,
+  GooglePayButton,
+  ApplePayButton,
+  WalletButton
+} from "../../ui";
+import { Box } from "../../layout";
+import PropTypes from "prop-types";
+
+export const PayWithWallet = (props) => {
+  return (
+    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
+      <Box themeType={props.theme} noMargin>
+        <div>Wallet Balance</div>
+        {props.viaWallet && (
+          <WalletButton
+            themeType={props.theme}
+            outlined
+            buttonText={props.walletLabel}
+            handleClick={props.handleWallet}
+          />
+        )}
+      </Box>
+    </Box>
+  );
+};

package/src/blocks/Payment/PaymentMethod.js

@@ -0,0 +1,132 @@
+import useTranslation from "next-translate/useTranslation";
+import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
+
+const PaymentMethod = (props) => {
+  const { t } = useTranslation("common");
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+  return (
+    <>
+      {props.wallet ? (
+        <PaymentMethodButton
+          imageURL={`/wallet.png`}
+          methodCode="wallet"
+          methodLabel={t("current-wallet")}
+          handlePaymentMethod={props.handlePaymentMethod}
+        />
+      ) : null}
+      {props.creditcard ? (
+        <PaymentMethodButton
+          imageURL={`/visa-master.png`}
+          methodCode="creditcard"
+          methodLabel={t("credit-card")}
+          handlePaymentMethod={props.handlePaymentMethod}
+        />
+      ) : null}
+      {props.mada ? (
+        <PaymentMethodButton
+          imageURL={`/mada.png`}
+          methodCode="mada"
+          methodLabel={t("mada")}
+          handlePaymentMethod={props.handlePaymentMethod}
+        />
+      ) : null}
+      {props.stcpay ? (
+        <PaymentMethodButton
+          methodCode="stcpay"
+          methodLabel={"STC Pay"}
+          chip={t("soon")}
+          handlePaymentMethod={props.handlePaymentMethod}
+        />
+      ) : null}
+      {props.paypal ? (
+        <PaymentMethodButton
+          methodCode="paypal"
+          methodLabel={t("paypal")}
+          handlePaymentMethod={props.handlePaymentMethod}
+        />
+      ) : null}
+      {isSafari && applepay && (
+        <PaymentMethodButton
+          methodCode="applepay"
+          methodLabel={t("applepay")}
+          handlePaymentMethod={props.handlePaymentMethod}
+        />
+      )}
+      {props.googlepay ? (
+        <PaymentMethodButton
+          methodCode="googlepay"
+          chip={t("soon")}
+          methodLabel={t("googlepay")}
+          handlePaymentMethod={props.handlePaymentMethod}
+        />
+      ) : null}
+    </>
+  );
+};
+
+const PaymentMethodButton = (props) => {
+  return (
+    <Button
+      disabled={props?.chip ? true : false}
+      fullWidth
+      variant="contained"
+      color="secondary"
+      style={{
+        backgroundColor: "white",
+        opacity: props.chip ? 0.7 : 1,
+        padding: 20,
+        width: "90%",
+        margin: 10,
+        borderRadius: "var(--borderR)"
+      }}
+      onClick={(e) => props.handlePaymentMethod(e, props.methodCode)}
+    >
+      {props.imageURL ? (
+        <div
+          style={{
+            // backgroundColor: "red",
+            width: "50%",
+            textAlign: "right",
+            paddingRight: 20
+          }}
+        >
+          <img
+            src={props.imageURL}
+            // src={`https://qawaim-images.s3-ap-southeast-1.amazonaws.com/payments/visa.png`}
+            // alt=""
+            // srcset=""
+            // height={"100%"}
+            // width={"30%"}
+            style={{
+              // height: "100%",
+              // aspectRatio: "6/4",
+              maxWidth: 70,
+              maxHeight: 70,
+              height: "auto"
+            }}
+          />
+        </div>
+      ) : null}
+      <div
+        style={{
+          // backgroundColor: "blue",
+          width: "50%",
+          textAlign: props.imageURL ? "left" : "center"
+        }}
+      >
+        {props.methodLabel}
+        {props.chip ? (
+          <Chip
+            size="small"
+            color="primary"
+            label={props.chip}
+            style={{ marginRight: 10, marginLeft: 10 }}
+          />
+        ) : null}
+      </div>
+    </Button>
+  );
+};
+
+export default PaymentMethod;

package/src/blocks/Payment/SelectPayment.js

@@ -0,0 +1,94 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Box } from "../../layout";
+import {
+  HawaTextField,
+  VisaMasterButton,
+  MadaButton,
+  STCPayButton,
+  PayPalButton,
+  GooglePayButton,
+  ApplePayButton,
+  WalletButton,
+  HawaTypography
+} from "../../ui";
+
+export const SelectPayment = (props) => {
+  return (
+    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
+      <Box themeType={props.theme} noMargin>
+        <HawaTypography themeType={props.theme} align="center">
+          Choose Payment
+        </HawaTypography>
+        {props.viaWallet && (
+          <WalletButton
+            outlined
+            themeType={props.theme}
+            buttonText={props.walletLabel}
+            onClick={props.handleWallet}
+          />
+        )}
+        {props.viaCreditCard && (
+          <VisaMasterButton
+            outlined
+            themeType={props.theme}
+            buttonText={props.visaMasterLabel}
+            handleClick={props.handleCreditCard}
+          />
+        )}
+        {props.viaMada && (
+          <MadaButton
+            outlined
+            themeType={props.theme}
+            buttonText={props.madaLabel}
+            handleClick={props.handleMada}
+          />
+        )}
+
+        {props.viaSTCPay && (
+          <STCPayButton
+            outlined
+            themeType={props.theme}
+            buttonText={props.stcPayLabel}
+            handleClick={props.handleSTCPay}
+          />
+        )}
+        {props.viaPayPal && (
+          <PayPalButton
+            outlined
+            themeType={props.theme}
+            buttonText={props.paypalLabel}
+            handleClick={props.handlePayPal}
+          />
+        )}
+        {props.viaGooglePay && (
+          <GooglePayButton
+            outlined
+            themeType={props.theme}
+            buttonText={props.googlePayLabel}
+            handleClick={props.handleGooglePay}
+          />
+        )}
+
+        {props.viaApplePay && (
+          <ApplePayButton
+            outlined
+            themeType={props.theme}
+            buttonText={props.applePayLabel}
+            handleClick={props.handleApplePay}
+          />
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+HawaTextField.propTypes = {
+  theme: PropTypes.oneOf(["secondary", "primary"]),
+  viaApplePay: PropTypes.bool,
+  viaGooglePay: PropTypes.bool,
+  viaSTCPay: PropTypes.bool,
+  viaCreditCard: PropTypes.bool,
+  viaPayPal: PropTypes.bool,
+  handleApplePay: PropTypes.func
+};

package/src/blocks/Payment/index.js

@@ -0,0 +1,18 @@
+// "use strict";
+
+// var _GooglePay = require("./Gateway/GooglePay");
+// var _Payfort = require("./Gateway/Payfort");
+// var _Paypal = require("./Gateway/Paypal");
+// var _Wallet = require("./Gateway/Wallet");
+// var _PaymentMethod = require("./PaymentMethod");
+
+// exports.GooglePay = _GooglePay.default;
+// exports.Payfort = _Payfort.default;
+// exports.Paypal = _Paypal.default;
+// exports.Wallet = _Wallet.default;
+// exports.PaymentMethod = _PaymentMethod.default;
+
+export * from "./SelectPayment";
+export * from "./CreditCardForm";
+export * from "./ChargeWalletForm";
+export * from "./PayWithWallet";

package/src/index.js

@@ -1 +1,4 @@
-export * from "./components/Hawa";
+export * from "./blocks/Account";
+export * from "./blocks/AuthForms";
+export * from "./blocks/Payment";
+//export * from "./components/Hawa";

package/src/layout/Box.js

@@ -3,23 +3,36 @@ import { ThemeProvider } from "../themes/HawaProvider";
 
 export const Box = (props) => {
   const theme = useContext(ThemeProvider);
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        // justifyContent: 'center',
-        // alignItems: 'center',
+  let boxStyle = {};
 
-        backgroundColor: theme.layoutColor,
-        color: theme.textColor,
-        padding: theme.paddings,
-        margin: theme.margins,
-        borderRadius: theme.borderRadius,
-        maxWidth: props.maxWidth
-      }}
-    >
-      {props.children}
-    </div>
+  let currentTheme = Object.keys(theme.actionButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
   );
+  if (currentTheme) {
+    boxStyle = {
+      display: "flex",
+      flexDirection: "column",
+      ...theme.layout[currentTheme],
+      backgroundColor: props.noColor
+        ? "none"
+        : theme.layout[currentTheme].backgroundColor,
+      padding: props.noPadding ? 0 : theme.layout[currentTheme].padding,
+      margin: props.noMargin ? 0 : theme.layout[currentTheme].margin,
+      maxWidth: props.maxWidth
+    };
+  } else {
+    boxStyle = {
+      display: "flex",
+      flexDirection: "column",
+      color: "white",
+      marginTop: props.last ? 10 * 2 : 0,
+      backgroundColor: props.noColor ? "none" : "lightGrey",
+      padding: props.noPadding ? 0 : 10,
+      margin: props.noMargin ? 0 : 10,
+      maxWidth: props.maxWidth,
+      borderRadius: 0
+    };
+  }
+
+  return <div style={boxStyle}>{props.children}</div>;
 };