@sikka/hawa 0.0.94 → 0.0.96

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

@@ -1,251 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,138 +0,0 @@
-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

@@ -1,148 +0,0 @@
-// 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 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

@@ -1,20 +0,0 @@
-import React from "react";
-import { HawaButton } from "../../elements";
-import { HawaContainer } from "../../layout";
-
-export const PayWithWallet = (props) => {
-  return (
-    <HawaContainer>
-      <div className="text-5xl font-extrabold text-center">
-        {props.walletBalance || "0"}
-        <div className="text-sm font-normal">{props.currency || "SAR"}</div>
-      </div>
-      <HawaButton
-        type="submit"
-        fullWidth
-        onClick={props.handlePayWithWallet}
-        text={"Pay Now"}
-      />
-    </HawaContainer>
-  );
-};