@sikka/hawa 0.0.2 → 0.0.5

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

@@ -0,0 +1,251 @@
+import axios from "axios";
+import qs from "qs";
+import { useRouter } from "next/router";
+import { useState, useEffect } from "react";
+import useTranslation from "next-translate/useTranslation";
+import Script from "next/script";
+
+const GooglePay = (props) => {
+  const transaction = props.currenttransactiongpay;
+  const router = useRouter();
+  console.log("transaction=", transaction);
+  const { t, lang } = useTranslation("common");
+  const [googlepayloaded, setGooglePayLoaded] = useState(false);
+  const [googlepay, setGooglePay] = useState(false);
+  const [braintreegatewayclient, setBraintreeGatewayClient] = useState(false);
+  const [braintreegatewaygooglepayment, setBraintreeGatewayGooglePayment] =
+    useState(false);
+  const [braintreegatewaydatacollector, setBraintreeGatewayDataCollector] =
+    useState(false);
+
+    let paymentsClient;
+
+  useEffect(() => {
+    if (
+      !googlepayloaded &&
+      googlepay &&
+      braintreegatewaydatacollector &&
+      braintreegatewayclient &&
+      braintreegatewaygooglepayment
+    ) {
+      console.log("okkkk");
+      onGooglePayLoaded();
+    }
+  }, [
+    googlepay,
+    braintreegatewayclient,
+    braintreegatewaygooglepayment,
+    braintreegatewaydatacollector,
+    googlepayloaded
+  ]);
+
+  /**
+   * Add a Google Pay purchase button alongside an existing checkout button
+   *
+   * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ButtonOptions|Button options}
+   * @see {@link https://developers.google.com/pay/api/web/guides/brand-guidelines|Google Pay brand guidelines}
+   */
+  const addGooglePayButton = (googlePaymentInstance, clientInstance) => {
+    //ok
+    const button = paymentsClient.createButton({
+      onClick: (event) =>
+        onGooglePaymentButtonClicked(
+          event,
+          googlePaymentInstance,
+          clientInstance
+        ),
+      buttonLocale: lang
+    });
+    document.getElementById("qawaim-googlepay").appendChild(button);
+  };
+
+  /**
+   * Show Google Pay payment sheet when Google Pay payment button is clicked
+   */
+  const onGooglePaymentButtonClicked = (
+    event,
+    googlePaymentInstance,
+    clientInstance
+  ) => {
+    let paymentDataRequest = googlePaymentInstance.createPaymentDataRequest({
+      merchantInfo: {
+        // @todo a merchant ID is available for a production environment after approval by Google
+        // See {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist|Integration checklist}
+        merchantId: `${process.env.NEXT_PUBLIC_QAWAIM_GOOGLE_MERCHANT_ID}`,
+        merchantName: `${process.env.NEXT_PUBLIC_QAWAIM_GOOGLEPAY_MERCHANT_NAME}`
+      },
+      transactionInfo: {
+        displayItems: [
+          {
+            label: "Subtotal",
+            type: "SUBTOTAL",
+            price: `${transaction.amount}`
+          }
+        ],
+        currencyCode: `${transaction.currency}`,
+        totalPriceStatus: "FINAL",
+        totalPrice: `${transaction.amount}`,
+        totalPriceLabel: "Total"
+      }
+    });
+
+    // We recommend collecting billing address information, at minimum
+    // billing postal code, and passing that billing postal code with all
+    // Google Pay card transactions as a best practice.
+    // See all available options at https://developers.google.com/pay/api/web/reference/object
+    let cardPaymentMethod = paymentDataRequest.allowedPaymentMethods[0];
+    cardPaymentMethod.parameters.billingAddressRequired = true;
+    cardPaymentMethod.parameters.billingAddressParameters = {
+      format: "FULL",
+      phoneNumberRequired: true
+    };
+
+    paymentsClient
+      .loadPaymentData(paymentDataRequest)
+      .then(function (paymentData) {
+        googlePaymentInstance.parseResponse(
+          paymentData,
+          function (err, result) {
+            if (err) {
+              console.log(err);
+              // Handle parsing error
+              router.push("/payment/error");
+            }
+
+            // Send result.nonce to your server
+            // result.type may be either "AndroidPayCard" or "PayPalAccount", and
+            // paymentData will contain the billingAddress for card payments
+            braintree.dataCollector.create(
+              {
+                client: clientInstance
+              },
+              async function (err, dataCollectorInstance) {
+                if (err) {
+                  // Handle error in creation of data collector
+                  return;
+                }
+                // At this point, you should access the dataCollectorInstance.deviceData value and provide it
+                // to your server, e.g. by injecting it into your form as a hidden input.
+                let deviceData = dataCollectorInstance.deviceData;
+                const data = {
+                  deviceDataClient: deviceData,
+                  nonce: result.nonce,
+                  billing_address: transaction.billing_address,
+                  amount: `${transaction.amount}`,
+                  currency: token.SelectedCurrency?.toUpperCase(),
+                  transaction_id: `${transaction._id}`
+                };
+                let checkoutgpay = await axios.post(
+                  `${process.env.NEXT_PUBLIC_QAWAIM_API_URL}/braintreegateway/googlepay`,
+                  qs.stringify(data)
+                );
+                if (checkoutgpay.data.ok === true) {
+                  router.push(`/confirmation/${transaction._id}`);
+                  //setCurrentTransaction(checkoutInfo.data.data.transaction);
+                  router.push(
+                    `/confirmation/${checkoutgpay.data.data.transaction._id}`
+                  );
+                } else {
+                  router.push("/payment/error");
+                }
+              }
+            );
+          }
+        );
+      })
+      .catch(function (err) {
+        console.log(err);
+        router.push("/payment/error");
+        // Handle errors
+      });
+  };
+
+  const onGooglePayLoaded = () => {
+    // Make sure to have https://pay.google.com/gp/p/js/pay.js loaded on your page
+    // You will need a button element on your page styled according to Google's brand guidelines
+    // https://developers.google.com/pay/api/web/guides/brand-guidelines
+    paymentsClient = new google.payments.api.PaymentsClient({
+      environment: process.env.NEXT_PUBLIC_QAWAIM_GOOGLEPAY_ENVIRONMENT // 'TEST' Or 'PRODUCTION'
+    });
+
+    setGooglePayLoaded(true);
+
+    braintree.client.create(
+      {
+        authorization: `${process.env.NEXT_PUBLIC_QAWAIM_BRAINTREE_TOKENIZATION_KEY}`
+      },
+      function (clientErr, clientInstance) {
+        console.log("clientErr=", clientErr);
+        console.log("clientInstance=", clientInstance);
+        braintree.googlePayment.create(
+          {
+            client: clientInstance,
+            googlePayVersion: 2,
+            googleMerchantId: `${process.env.NEXT_PUBLIC_QAWAIM_GOOGLE_MERCHANT_ID}` // Optional in sandbox; if set in sandbox, this value must be a valid production Google Merchant ID
+          },
+          function (googlePaymentErr, googlePaymentInstance) {
+            console.log("googlePaymentErr=", googlePaymentErr);
+            console.log("googlePaymentInstance=", googlePaymentInstance);
+            paymentsClient
+              .isReadyToPay({
+                // see https://developers.google.com/pay/api/web/reference/object#IsReadyToPayRequest
+                apiVersion: 2,
+                apiVersionMinor: 0,
+                allowedPaymentMethods:
+                  googlePaymentInstance.createPaymentDataRequest()
+                    .allowedPaymentMethods,
+                existingPaymentMethodRequired: true // Optional
+              })
+              .then(function (response) {
+                if (response.result) {
+                  addGooglePayButton(googlePaymentInstance, clientInstance);
+                }
+              })
+              .catch(function (err) {
+                console.log(err);
+                router.push("/payment/error");
+                // Handle errors
+              });
+          }
+        );
+
+        // Set up other Braintree components
+      }
+    );
+  };
+  return (
+    <>
+      <Script
+        id="googlepay"
+        src="https://pay.google.com/gp/p/js/pay.js"
+        onLoad={() => {
+          setGooglePay(true);
+        }}
+      />
+      <Script
+        id="braintreegateway-client"
+        src="https://js.braintreegateway.com/web/3.82.0/js/client.min.js"
+        onLoad={() => {
+          setBraintreeGatewayClient(true);
+        }}
+      />
+      <Script
+        id="braintreegateway-data-collector"
+        src="https://js.braintreegateway.com/web/3.82.0/js/data-collector.min.js"
+        onLoad={() => {
+          setBraintreeGatewayDataCollector(true);
+        }}
+      />
+      <Script
+        id="braintreegateway-google-payment"
+        src="https://js.braintreegateway.com/web/3.82.0/js/google-payment.min.js"
+        onLoad={() => {
+          setBraintreeGatewayGooglePayment(true);
+        }}
+      />
+      <div id="qawaim-googlepay"></div>
+    </>
+  );
+};
+
+export default GooglePay;

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

@@ -0,0 +1,90 @@
+import { useState, useEffect, memo, useCallback, useRef } from "react";
+import CForm from "../Form/CForm";
+import Card from "../Form/Card";
+
+const initialState = {
+  cardNumber: "#### #### #### ####",
+  cardHolder: "FULL NAME",
+  cardMonth: "",
+  cardYear: "",
+  cardCvv: "",
+  isCardFlipped: false
+};
+
+const Payfort = (props) => {
+  const [state, setState] = useState(initialState);
+  const [currentFocusedElm, setCurrentFocusedElm] = useState(null);
+
+  const updateStateValues = useCallback(
+    (keyName, value) => {
+      setState({
+        ...state,
+        [keyName]: value || initialState[keyName]
+      });
+    },
+    [state]
+  );
+  // References for the Form Inputs used to focus corresponding inputs.
+  let formFieldsRefObj = {
+    cardNumber: useRef(),
+    cardHolder: useRef(),
+    cardDate: useRef(),
+    cardCvv: useRef()
+  };
+
+  let focusFormFieldByKey = useCallback((key) => {
+    formFieldsRefObj[key].current.focus();
+  });
+
+  // This are the references for the Card DIV elements.
+  let cardElementsRef = {
+    cardNumber: useRef(),
+    cardHolder: useRef(),
+    cardDate: useRef()
+  };
+
+  let onCardFormInputFocus = (_event, inputName) => {
+    const refByName = cardElementsRef[inputName];
+    setCurrentFocusedElm(refByName);
+  };
+
+  let onCardInputBlur = useCallback(() => {
+    setCurrentFocusedElm(null);
+  }, []);
+
+  return (
+    <CForm
+      cardNumber={state.cardNumber}
+      cardHolder={state.cardHolder}
+      cardMonth={state.cardMonth}
+      cardYear={state.cardYear}
+      cardCvv={state.cardCvv}
+      onUpdateState={updateStateValues}
+      cardNumberRef={formFieldsRefObj.cardNumber}
+      cardHolderRef={formFieldsRefObj.cardHolder}
+      cardDateRef={formFieldsRefObj.cardDate}
+      cardCvvRef={formFieldsRefObj.cardCvv}
+      onCardInputFocus={onCardFormInputFocus}
+      onCardInputBlur={onCardInputBlur}
+      handlePaymentPayfort={props.handlePaymentPayfort}
+      paymentMethod={props.paymentMethod}
+      register={props.register}
+    >
+      <Card
+        cardNumber={state.cardNumber}
+        cardHolder={state.cardHolder}
+        cardMonth={state.cardMonth}
+        cardYear={state.cardYear}
+        cardCvv={state.cardCvv}
+        isCardFlipped={state.isCardFlipped}
+        currentFocusedElm={currentFocusedElm}
+        onCardElementClick={focusFormFieldByKey}
+        cardNumberRef={cardElementsRef.cardNumber}
+        cardHolderRef={cardElementsRef.cardHolder}
+        cardDateRef={cardElementsRef.cardDate}
+      ></Card>
+    </CForm>
+  );
+};
+
+export default Payfort;

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;