@sikka/hawa 0.0.1 → 0.0.4

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 "@material-ui/core/Button";
+import Grid from "@material-ui/core/Grid";
+import Paper from "@material-ui/core/Paper";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import { makeStyles } from "@material-ui/core/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/PaymentMethod.js

@@ -0,0 +1,132 @@
+import useTranslation from "next-translate/useTranslation";
+import Button from "@material-ui/core/Button";
+import Chip from "@material-ui/core/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/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var _GooglePay = require('./Payment/Gateway/GooglePay');
+var _Payfort = require('./Payment/Gateway/Payfort');
+var _Paypal = require('./Payment/Gateway/Paypal');
+var _Wallet = require('./Payment/Gateway/Wallet');
+var _PaymentMethod = require('./Payment/PaymentMethod');
+
+exports.GooglePay = _GooglePay.default;
+exports.Payfort = _Payfort.default;
+exports.Paypal = _Paypal.default;
+exports.Wallet = _Wallet.default;
+exports.PaymentMethod = _PaymentMethod.default;

package/src/index.js

@@ -1 +1,2 @@
-export * from "./components/Hawa";
+export * from "./blocks";
+//export * from "./components/Hawa";

package/src/layout/Box.js

@@ -0,0 +1,25 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+
+export const Box = (props) => {
+  const theme = useContext(ThemeProvider);
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        // justifyContent: 'center',
+        // alignItems: 'center',
+
+        backgroundColor: theme.layoutColor,
+        color: theme.textColor,
+        padding: theme.paddings,
+        margin: theme.margins,
+        borderRadius: theme.borderRadius,
+        maxWidth: props.maxWidth
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};

package/src/layout/index.js

@@ -0,0 +1 @@
+export * from "./Box";

package/src/stories/ActionButton.stories.js

@@ -0,0 +1,49 @@
+import React from "react";
+
+import { defaultTheme, HawaProvider } from "../themes/HawaProvider";
+import { ActionButton } from "../ui";
+
+const Template = (args) => {
+  const theme = {
+    borderRadius: 10,
+    primaryColor: "green",
+    secondaryColor: "red",
+    // margins: "10px",
+    paperColors: "#c6c6c6",
+    paddings: 10,
+    margins: 10
+  };
+  return (
+    <HawaProvider theme={{ ...defaultTheme, ...args.theme }}>
+      <ActionButton secondary={args.secondary} text='here' />
+    </HawaProvider>
+  );
+};
+//types:
+//error (red)
+//warning (red)
+//notice (blue)
+
+export default {
+  title: "UI/ActionButton",
+  component: ActionButton
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  showText: true,
+  buttonLabel: "test",
+  borderRadius: 5,
+  textColor: "#000000",
+  buttonColor: "#f9f9f9"
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  secondary: true,
+  showText: true,
+  buttonLabel: "test",
+  borderRadius: 5,
+  textColor: "#000000",
+  buttonColor: "#f9f9f9",
+};

package/src/stories/AdaptiveButton.stories.js

@@ -1,84 +1,80 @@
-import React from "react";
-import AdaptiveButton from "../components/Hawa/AdaptiveButton/AdaptiveButton";
-import CastIcon from "@material-ui/icons/Cast";
-import { HawaProvider } from "../components/Hawa/HawaProvider";
-
-const Template = (args) => {
-  const theme = {
-    borderRadius: 20,
-    primaryColor: "green",
-    secondaryColor: "red",
-    // margins: "10px",
-    paddings: 10
-  };
-  return (
-    <HawaProvider theme={theme}>
-      <AdaptiveButton {...args} />{" "}
-    </HawaProvider>
-  );
-};
-export default {
-  title: "Components/AdaptiveButton",
-  component: AdaptiveButton,
-  argsTypes: {
-    buttonLabel: { control: "text" },
-    borderRadius: { control: "number" },
-    buttonColor: { control: "color" },
-    padding: { control: "number" },
-    hintTitle: { control: "text" },
-    hintContent: { control: "text" }
-  },
-  args: {
-    // type: "text",
-    // buttonLabel: "Test"
-    // borderRadius: 15,
-    hintTitle: "test",
-    hintContent: "more test",
-    buttonColor: "#f9f9f9"
-  }
-};
-
-export const Light = Template.bind({});
-Light.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  icon: <CastIcon />,
-  textColor: "#000000",
-
-  buttonColor: "#f9f9f9"
-
-  // placeholder: "Example ...",
-  // defaultValue: "This is default value",
-  // inputLabel: "Text Field",
-  // padding: 10
-};
-
-export const Dark = Template.bind({});
-Dark.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  buttonColor: "#878787",
-  textColor: "#ffffff",
-  icon: <CastIcon />
-
-  // placeholder: "Exemple ...",
-  // defaultValue: "This is default value",
-  // inputLabel: "Text Field",
-  // padding: 10
-};
-export const Danger = Template.bind({});
-Danger.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  buttonColor: "#c0c0c0",
-  danger: true,
-  icon: <CastIcon />
-
-  // placeholder: "Exemple ...",
-  // defaultValue: "This is default value",
-  // inputLabel: "Text Field",
-  // padding: 10
-};
+import React from "react";
+import CastIcon from "@material-ui/icons/Cast";
+import { HawaProvider } from "../themes/HawaProvider";
+import { AdaptiveButton } from "../ui";
+
+const Template = (args) => {
+  const theme = {
+    borderRadius: 10,
+    primaryColor: "#004fff",
+    secondaryColor: "red",
+    // margins: "10px",
+    paddings: 10
+  };
+  return (
+    <HawaProvider theme={theme}>
+      <AdaptiveButton {...args} />
+    </HawaProvider>
+  );
+};
+export default {
+  title: "UI/AdaptiveButton",
+  component: AdaptiveButton,
+  argsTypes: {
+    buttonLabel: { control: "text" },
+    borderRadius: { control: "number" },
+    buttonColor: { control: "color" },
+    padding: { control: "number" },
+    hintTitle: { control: "text" },
+    hintContent: { control: "text" }
+  },
+  args: {
+    // type: "text",
+    // buttonLabel: "Test"
+    // borderRadius: 15,
+    hintTitle: "test",
+    hintContent: "more test",
+    buttonColor: "#f9f9f9"
+  }
+};
+
+export const Light = Template.bind({});
+Light.args = {
+  showText: true,
+  buttonLabel: "test",
+  borderRadius: 5,
+  icon: <CastIcon />,
+  textColor: "#000000",
+  buttonColor: "#f9f9f9"
+  // placeholder: "Example ...",
+  // defaultValue: "This is default value",
+  // inputLabel: "Text Field",
+  // padding: 10
+};
+
+export const Dark = Template.bind({});
+Dark.args = {
+  showText: true,
+  buttonLabel: "test",
+  borderRadius: 5,
+  buttonColor: "#878787",
+  textColor: "#ffffff",
+  icon: <CastIcon />
+  // placeholder: "Exemple ...",
+  // defaultValue: "This is default value",
+  // inputLabel: "Text Field",
+  // padding: 10
+};
+export const Danger = Template.bind({});
+Danger.args = {
+  showText: true,
+  buttonLabel: "test",
+  borderRadius: 5,
+  buttonColor: "#c0c0c0",
+  danger: true,
+  icon: <CastIcon />
+  // placeholder: "Exemple ...",
+  // defaultValue: "This is default value",
+  // inputLabel: "Text Field",
+  // padding: 10
+};