@sikka/hawa 0.0.95 → 0.0.97

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

@@ -1,316 +0,0 @@
-import React, { useEffect, useState, useRef } from "react";
-import sha256 from "crypto-js/sha256";
-import useTranslation from "next-translate/useTranslation";
-import axios from "axios";
-import { HawaButton } from "../../../elements";
-
-const currentYear = new Date().getFullYear();
-const monthsArr = Array.from({ length: 12 }, (x, i) => {
-  const month = i + 1;
-  return month <= 9 ? "0" + month : month;
-});
-const yearsArr = Array.from({ length: 9 }, (_x, i) => currentYear + i);
-
-export default function CForm({
-  cardHolder,
-  cardMonth,
-  cardYear,
-  cardCvv,
-  onUpdateState,
-  cardNumberRef,
-  cardHolderRef,
-  cardDateRef,
-  cardCvvRef,
-  onCardInputFocus,
-  onCardInputBlur,
-  children,
-  selectedPaymentMethod,
-  transaction
-}) {
-  const payfortFormref = useRef();
-  const [loading, setLoading] = useState(false);
-  const [cardNumber, setCardNumber] = useState("");
-  const [accessCode, setAccessCode] = useState("");
-  const [merchantIdentifier, setMerchantIdentifier] = useState("");
-  const [shaRequestPassphrase, setSHARequestPassphrase] = useState("");
-  const [expiryDate, setExpiryDate] = useState("");
-  const [signature, setSignature] = useState("");
-  const [ip, setIP] = useState("");
-  const { t, lang } = useTranslation("common");
-
-  const handleFormChange = (event) => {
-    const { name, value } = event.target;
-
-    onUpdateState(name, value);
-  };
-
-  const getData = async () => {
-    const res = await axios.get("https://geolocation-db.com/json/");
-    console.log(res.data);
-    setIP(res.data.IPv4);
-  };
-
-  const generateSignature = () => {
-    // Calculate request signature
-    let shaString = "";
-
-    // array request
-    let arrData = {
-      access_code: process.env.NEXT_PUBLIC_QAWAIM_SOFTWARE_PAYFOR_ACCESS_TOKEN,
-      language: lang,
-      merchant_identifier:
-        process.env.NEXT_PUBLIC_QAWAIM_SOFTWARE_PAYFOR_MERCHANT_ID,
-      merchant_reference: "",
-      return_url: `${process.env.NEXT_PUBLIC_QAWAIM_USER_PORTAL_URL}/aps_online/response`,
-      service_command: "TOKENIZATION"
-    };
-
-    if (
-      transaction &&
-      transaction?.getTransactionByIDInvoice?.transaction_payment_token
-    ) {
-      arrData.token_name =
-        transaction?.getTransactionByIDInvoice?.transaction_payment_token;
-    }
-
-    console.log("arrData=", arrData);
-
-    shaString = `${process.env.NEXT_PUBLIC_QAWAIM_SOFTWARE_PAYFOR_SHA_REQUEST_PHRASE}${shaString}`;
-    for (const [key, value] of Object.entries(arrData)) {
-      shaString = `${shaString}${key}=${value}`;
-    }
-    shaString = `${shaString}${process.env.NEXT_PUBLIC_QAWAIM_SOFTWARE_PAYFOR_SHA_REQUEST_PHRASE}`;
-
-    console.log("shaString=", shaString);
-
-    // your request signature
-    let signature = sha256(shaString);
-
-    console.log("signature=", signature);
-    setSignature(signature);
-  };
-  useEffect(() => {
-    if (selectedPaymentMethod && selectedPaymentMethod !== "APPLEPAY") {
-      getData();
-      generateSignature();
-    }
-  }, [selectedPaymentMethod, accessCode, shaRequestPassphrase]);
-
-  useEffect(() => {
-    if (cardMonth && cardYear) {
-      setExpiryDate(`${cardYear.substring(2)}${cardMonth}`);
-    }
-  }, [cardMonth, cardYear]);
-
-  // TODO: We can improve the regex check with a better approach like in the card component.
-  const onCardNumberChange = (event) => {
-    let { value, name } = event.target;
-    let cardNumber = value;
-    value = value.replace(/\D/g, "");
-    if (/^3[47]\d{0,13}$/.test(value)) {
-      cardNumber = value
-        .replace(/(\d{4})/, "$1 ")
-        .replace(/(\d{4}) (\d{6})/, "$1 $2 ");
-    } else if (/^3(?:0[0-5]|[68]\d)\d{0,11}$/.test(value)) {
-      // diner's club, 14 digits
-      cardNumber = value
-        .replace(/(\d{4})/, "$1 ")
-        .replace(/(\d{4}) (\d{6})/, "$1 $2 ");
-    } else if (/^\d{0,16}$/.test(value)) {
-      // regular cc number, 16 digits
-      cardNumber = value
-        .replace(/(\d{4})/, "$1 ")
-        .replace(/(\d{4}) (\d{4})/, "$1 $2 ")
-        .replace(/(\d{4}) (\d{4}) (\d{4})/, "$1 $2 $3 ");
-    }
-
-    setCardNumber(cardNumber.trimRight());
-    onUpdateState(name, cardNumber);
-  };
-
-  const onCvvFocus = (event) => {
-    onUpdateState("isCardFlipped", true);
-  };
-
-  const onCvvBlur = (event) => {
-    onUpdateState("isCardFlipped", false);
-  };
-
-  const handlePayfortForm = (e) => {};
-
-  // NOTE: Currently the cursor on the card number field gets reset if we remove a number, the code bellow was used
-  // in className components, need to transform this to work with functional components.
-  // getSnapshotBeforeUpdate() {
-  //     return this.props.cardNumberRef.current.selectionStart;
-  // }
-
-  // const componentDidUpdate = function (prevProps, prevState, cursorIdx) {
-  //     const node = cardNumberRef.current;
-  //     const { cardNumber: cardNum } = state;
-  //     const { cardNumber: prevCardNum } = prevState;
-  //     if (
-  //         cardNum.length > prevCardNum.length &&
-  //         cardNum[cursorIdx - 1] === ' '
-  //     ) {
-  //         cursorIdx += 1;
-  //     } else if (prevCardNum[cursorIdx - 1] === ' ') {
-  //         cursorIdx -= 1;
-  //     }
-  //     node.selectionStart = node.selectionEnd = cursorIdx;
-  // };
-
-  return (
-    <div className="card-form">
-      <div className="card-list">{children}</div>
-      <div className="card-form__inner">
-        <div className="card-input">
-          <label htmlFor="cardNumber" className="card-input__label">
-            {t("cardNumber")}
-          </label>
-          <input
-            type="tel"
-            name="cardNumber"
-            className="card-input__input"
-            autoComplete="off"
-            onChange={onCardNumberChange}
-            maxLength="19"
-            ref={cardNumberRef}
-            onFocus={(e) => onCardInputFocus(e, "cardNumber")}
-            onBlur={onCardInputBlur}
-            value={cardNumber}
-          />
-        </div>
-
-        <div className="card-input">
-          <label htmlFor="cardName" className="card-input__label">
-            {t("cardHolder")}
-          </label>
-          <input
-            type="text"
-            className="card-input__input"
-            autoComplete="off"
-            name="cardHolder"
-            onChange={handleFormChange}
-            ref={cardHolderRef}
-            onFocus={(e) => onCardInputFocus(e, "cardHolder")}
-            onBlur={onCardInputBlur}
-          />
-        </div>
-
-        <div className="card-form__row">
-          <div className="card-form__col">
-            <div className="card-form__group">
-              <label htmlFor="cardMonth" className="card-input__label">
-                {t("cardExpiration")}
-              </label>
-              <select
-                className="card-input__input -select"
-                value={cardMonth}
-                name="cardMonth"
-                onChange={handleFormChange}
-                ref={cardDateRef}
-                onFocus={(e) => onCardInputFocus(e, "cardDate")}
-                onBlur={onCardInputBlur}
-              >
-                <option value="" disabled>
-                  {t("cardMonth")}
-                </option>
-
-                {monthsArr.map((val, index) => (
-                  <option key={index} value={val}>
-                    {val}
-                  </option>
-                ))}
-              </select>
-              <select
-                name="cardYear"
-                className="card-input__input -select"
-                value={cardYear}
-                onChange={handleFormChange}
-                onFocus={(e) => onCardInputFocus(e, "cardDate")}
-                onBlur={onCardInputBlur}
-              >
-                <option value="" disabled>
-                  {t("cardYear")}
-                </option>
-
-                {yearsArr.map((val, index) => (
-                  <option key={index} value={val}>
-                    {val}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
-          <div className="card-form__col -cvv">
-            <div className="card-input">
-              <label htmlFor="cardCvv" className="card-input__label">
-                {t("cvv")}
-              </label>
-              <input
-                type="tel"
-                className="card-input__input"
-                maxLength="4"
-                autoComplete="off"
-                name="cardCvv"
-                onChange={handleFormChange}
-                onFocus={onCvvFocus}
-                onBlur={onCvvBlur}
-                ref={cardCvvRef}
-              />
-            </div>
-          </div>
-        </div>
-        <div className="card-input" style={{ marginTop: "20px" }}>
-          <form
-            ref={payfortFormref}
-            action={`${process.env.NEXT_PUBLIC_QAWAIM_SOFTWARE_PAYFOR_ENVIRONMENT_URL}`}
-            method="POST"
-          >
-            <input type="hidden" name="access_code" value={`${accessCode}`} />
-            <input type="hidden" name="card_holder_name" value={cardHolder} />
-            <input
-              type="hidden"
-              name="card_number"
-              value={cardNumber.replace(/\s/g, "")}
-            />
-            <input type="hidden" name="card_security_code" value={cardCvv} />
-            <input type="hidden" name="expiry_date" value={expiryDate} />
-            <input type="hidden" name="language" value={lang} />
-            <input
-              type="hidden"
-              name="merchant_identifier"
-              value={`${merchantIdentifier}`}
-            />
-            <input type="hidden" name="merchant_reference" value={""} />
-            <input type="hidden" name="remember_me" value="NO" />
-            <input
-              type="hidden"
-              name="return_url"
-              value={`${process.env.NEXT_PUBLIC_QAWAIM_USER_PORTAL_URL}/aps_online/register`}
-            />
-            <input type="hidden" name="service_command" value="TOKENIZATION" />
-            <input type="hidden" name="signature" value={signature} />
-            {transaction &&
-              transaction?.getTransactionByIDInvoice
-                ?.transaction_payment_token && (
-                <input
-                  type="hidden"
-                  name="token_name"
-                  value={
-                    transaction?.getTransactionByIDInvoice
-                      ?.transaction_payment_token
-                  }
-                />
-              )}
-          </form>
-          <HawaButton
-            fullWidth
-            onClick={handlePayfortForm}
-            text={<span className="pay-new-btn-txt">{t("pay-now")}</span>}
-          />{" "}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,242 +0,0 @@
-import React, { useState, useEffect, useCallback, useMemo } from "react";
-import {
-  CSSTransition,
-  TransitionGroup,
-  SwitchTransition
-} from "react-transition-group";
-
-const CARDS = {
-  visa: "^4",
-  amex: "^(34|37)",
-  mastercard: "^5[1-5]",
-  discover: "^6011",
-  unionpay: "^62",
-  troy: "^9792",
-  diners: "^(30[0-5]|36)"
-};
-
-const cardBackgroundName = () => {
-  let random = Math.floor(Math.random() * 25 + 1);
-  return `${random}.jpeg`;
-};
-
-const BACKGROUND_IMG = cardBackgroundName();
-
-const Card = ({
-  cardHolder,
-  cardNumber,
-  cardMonth,
-  cardYear,
-  cardCvv,
-  isCardFlipped,
-  currentFocusedElm,
-  onCardElementClick,
-  cardNumberRef,
-  cardHolderRef,
-  cardDateRef
-}) => {
-  const [style, setStyle] = useState(null);
-
-  const cardType = (cardNumber) => {
-    const number = cardNumber;
-    let re;
-    for (const [card, pattern] of Object.entries(CARDS)) {
-      re = new RegExp(pattern);
-      if (number.match(re) != null) {
-        return card;
-      }
-    }
-
-    return "visa"; // default type
-  };
-
-  const useCardType = useMemo(() => {
-    return cardType(cardNumber);
-  }, [cardNumber]);
-
-  const outlineElementStyle = (element) => {
-    return element
-      ? {
-          width: `${element.offsetWidth}px`,
-          height: `${element.offsetHeight}px`,
-          transform: `translateX(${element.offsetLeft}px) translateY(${element.offsetTop}px)`
-        }
-      : null;
-  };
-
-  useEffect(() => {
-    if (currentFocusedElm) {
-      const style = outlineElementStyle(currentFocusedElm.current);
-      setStyle(style);
-    }
-  }, [currentFocusedElm]);
-
-  const maskCardNumber = (cardNumber) => {
-    let cardNumberArr = cardNumber.split("");
-    cardNumberArr.forEach((val, index) => {
-      if (index > 4 && index < 14) {
-        if (cardNumberArr[index] !== " ") {
-          cardNumberArr[index] = "*";
-        }
-      }
-    });
-
-    return cardNumberArr;
-  };
-
-  return (
-    <div className={"card-item " + (isCardFlipped ? "-active" : "")}>
-      <div className="card-item__side -front">
-        <div
-          className={`card-item__focus ${currentFocusedElm ? `-active` : ``}`}
-          style={style}
-        />
-        <div className="card-item__cover">
-          <img
-            alt=""
-            src={`/card-background/${BACKGROUND_IMG}`}
-            className="card-item__bg"
-          />
-        </div>
-
-        <div className="card-item__wrapper">
-          <div className="card-item__top">
-            <img src={"/chip.png"} alt="" className="card-item__chip" />
-            <div className="card-item__type">
-              <img
-                alt={useCardType}
-                src={`/card-type/${useCardType}.png`}
-                className="card-item__typeImg"
-              />
-            </div>
-          </div>
-
-          <label
-            className="card-item__number"
-            ref={cardNumberRef}
-            onClick={() => onCardElementClick("cardNumber")}
-          >
-            <TransitionGroup className="slide-fade-up" component="div">
-              {cardNumber ? (
-                maskCardNumber(cardNumber).map((val, index) => (
-                  <CSSTransition
-                    classNames="slide-fade-up"
-                    timeout={250}
-                    key={index}
-                  >
-                    <div className="card-item__numberItem">{val}</div>
-                  </CSSTransition>
-                ))
-              ) : (
-                <CSSTransition classNames="slide-fade-up" timeout={250}>
-                  <div className="card-item__numberItem">#</div>
-                </CSSTransition>
-              )}
-            </TransitionGroup>
-          </label>
-          <div className="card-item__content">
-            <label
-              className="card-item__info"
-              onClick={() => onCardElementClick("cardHolder")}
-              ref={cardHolderRef}
-            >
-              <div className="card-item__holder">Card Holder</div>
-              <div className="card-item__name">
-                <TransitionGroup component="div" className="slide-fade-up">
-                  {cardHolder === "FULL NAME" ? (
-                    <CSSTransition classNames="slide-fade-up" timeout={250}>
-                      <div>FULL NAME</div>
-                    </CSSTransition>
-                  ) : (
-                    cardHolder.split("").map((val, index) => (
-                      <CSSTransition
-                        timeout={250}
-                        classNames="slide-fade-right"
-                        key={index}
-                      >
-                        <span className="card-item__nameItem">{val}</span>
-                      </CSSTransition>
-                    ))
-                  )}
-                </TransitionGroup>
-              </div>
-            </label>
-            <div
-              className="card-item__date"
-              onClick={() => onCardElementClick("cardDate")}
-              ref={cardDateRef}
-            >
-              <label className="card-item__dateTitle">Expires</label>
-              <label className="card-item__dateItem">
-                <SwitchTransition in-out>
-                  <CSSTransition
-                    classNames="slide-fade-up"
-                    timeout={200}
-                    key={cardMonth}
-                  >
-                    <span>{!cardMonth ? "MM" : cardMonth} </span>
-                  </CSSTransition>
-                </SwitchTransition>
-              </label>
-              /
-              <label htmlFor="cardYear" className="card-item__dateItem">
-                <SwitchTransition out-in>
-                  <CSSTransition
-                    classNames="slide-fade-up"
-                    timeout={250}
-                    key={cardYear}
-                  >
-                    <span>
-                      {!cardYear ? "YY" : cardYear.toString().substr(-2)}
-                    </span>
-                  </CSSTransition>
-                </SwitchTransition>
-              </label>
-            </div>
-            <div
-              className="card-item__date"
-              onClick={() => onCardElementClick("cardDate")}
-              ref={cardDateRef}
-            ></div>
-          </div>
-        </div>
-      </div>
-
-      <div className="card-item__side -back">
-        <div className="card-item__cover">
-          <img
-            alt=""
-            src={`/card-background/${BACKGROUND_IMG}`}
-            className="card-item__bg"
-          />
-        </div>
-        <div className="card-item__band" />
-        <div className="card-item__cvv">
-          <div className="card-item__cvvTitle">CVV</div>
-          <div className="card-item__cvvBand">
-            <TransitionGroup>
-              {cardCvv.split("").map((val, index) => (
-                <CSSTransition
-                  classNames="zoom-in-out"
-                  key={index}
-                  timeout={250}
-                >
-                  <span>*</span>
-                </CSSTransition>
-              ))}
-            </TransitionGroup>
-          </div>
-          <div className="card-item__type">
-            <img
-              alt="card-type"
-              src={"/card-type/visa.png"}
-              className="card-item__typeImg"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Card;

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

@@ -1,118 +0,0 @@
-import useTranslation from "next-translate/useTranslation";
-import PropTypes from "prop-types";
-import { HawaChip } from "../../../elements";
-
-export 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
-      }}
-      onClick={(e) => props.handlePaymentMethod(e, props.methodCode)}
-    >
-      {props.imageURL ? (
-        <div
-          style={{
-            width: "50%",
-            textAlign: "right",
-            paddingRight: 20
-          }}
-        >
-          <img
-            src={props.imageURL}
-            style={{
-              maxWidth: 70,
-              maxHeight: 70,
-              height: "auto"
-            }}
-          />
-        </div>
-      ) : null}
-      <div
-        style={{
-          width: "50%",
-          textAlign: props.imageURL ? "left" : "center"
-        }}
-      >
-        {props.methodLabel}
-        {props.chip ? <HawaChip label="test" /> : null}x
-      </div>
-    </button>
-  );
-};
-
-PaymentMethod.propTypes = {
-  wallet: PropTypes.bool,
-  handlePaymentMethod: PropTypes.func
-};