@sikka/hawa 0.0.3 → 0.0.6

package/src/blocks/AuthForms/SignInForm.js

@@ -1,19 +1,102 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../../themes/HawaProvider";
-import { StyledTextField, StyledInputLabel } from "../../ui";
-import { Box } from '../../layout'
-export const SignInForm = (props) => {
-  const theme = useContext(ThemeProvider);
-  return (
-    <Box maxWidth={400}>
+import React from "react";
+import {
+  HawaTextField,
+  ActionButton,
+  GoogleButton,
+  TwitterButton,
+  GithubButton,
+  HawaAlert
+} from "../../ui";
+import { Box } from "../../layout";
+import { FormProvider, useForm } from "react-hook-form";
+import { TextField } from "@mui/material";
 
-      <StyledInputLabel label="Email" />
-      <StyledTextField type="text" />
-      <StyledInputLabel label="Password" />
-      <StyledTextField type="text" />
+export const SignInForm = (props) => {
+  const methods = useForm();
+  const {
+    formState: { errors },
+    handleSubmit,
+    getValues,
+    register,
+    watch,
+    reset,
+    setValue
+  } = methods;
 
-      {props.children}
+  return (
+    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
+      <Box themeType={props.theme} noMargin>
+        {props.error && (
+          <HawaAlert
+            themeType={props.theme}
+            text="This is a sign in alert"
+            severity="error"
+          />
+        )}
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(props.handleSignIn)}>
+            <HawaTextField
+              type="text"
+              name="email"
+              inputLabel="Email"
+              placeholder="Email"
+              themeType={props.theme}
+              rules={{
+                required: "Email is required",
+                pattern: {
+                  value:
+                    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+                  message: "Invalid email address"
+                }
+              }}
+              helperText={errors.email?.message}
+            />
 
+            <HawaTextField
+              name="password"
+              placeholder="Password"
+              themeType={props.theme}
+              type="password"
+              inputLabel="Password"
+              rules={{
+                required: "Password is rquired"
+              }}
+              helperText={errors.password?.message}
+            />
+            <ActionButton
+              type="submit"
+              fullWidth
+              last={"true"}
+              text={"Sign In"}
+              themeType={props.theme}
+            />
+          </form>
+        </FormProvider>
+      </Box>
+      {props.viaGoogle && (
+        <GoogleButton
+          themeType={props.theme}
+          outlined
+          buttonText={props.googleButtonLabel}
+          handleClick={props.handleGoogleSignIn}
+        />
+      )}
+      {props.viaGithub && (
+        <GithubButton
+          outlined
+          themeType={props.theme}
+          buttonText={props.githubButtonLabel}
+          handleClick={props.handleGithubSignIn}
+        />
+      )}
+      {props.viaTwitter && (
+        <TwitterButton
+          outlined
+          themeType={props.theme}
+          buttonText={props.twitterButtonLabel}
+          handleClick={props.handleTwitterSignIn}
+        />
+      )}
     </Box>
   );
 };

package/src/blocks/AuthForms/SignUpForm.js

@@ -1,20 +1,120 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Box } from "../../layout";
-import { ThemeProvider } from "../../themes/HawaProvider";
-import { StyledTextField, StyledInputLabel } from "../../ui";
+import {
+  HawaTextField,
+  ActionButton,
+  GoogleButton,
+  GithubButton,
+  TwitterButton,
+  HawaAlert
+} from "../../ui";
+import PropTypes from "prop-types";
+import { FormProvider, useForm } from "react-hook-form";
 
 export const SignUpForm = (props) => {
-  const theme = useContext(ThemeProvider);
-  return (
-    <Box maxWidth={400}>
+  const methods = useForm();
+  const {
+    formState: { errors },
+    handleSubmit,
+    getValues,
+    register,
+    watch,
+    reset,
+    setValue
+  } = methods;
 
-      <StyledInputLabel label="Email" />
-      <StyledTextField type="text" />
-      <StyledInputLabel label="Password" />
-      <StyledTextField type="text" />
-      <StyledInputLabel label="Confirm Password" />
-      <StyledTextField type="text" />
-      {props.children}
+  return (
+    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
+      <Box themeType={props.theme} noMargin>
+        {props.error && (
+          <HawaAlert
+            themeType={props.theme}
+            text="This is a sign in alert"
+            severity="error"
+          />
+        )}
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(props.handleSignUp)}>
+            <HawaTextField
+              themeType={props.theme}
+              type="text"
+              inputLabel="Email"
+              placeholder="Email"
+              name="email"
+              rules={{
+                required: "Email is required",
+                pattern: {
+                  value:
+                    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+                  message: "Invalid email address"
+                }
+              }}
+              helperText={errors.email?.message}
+            />
+            <HawaTextField
+              name="password"
+              placeholder="Password"
+              themeType={props.theme}
+              type="password"
+              inputLabel="Password"
+              rules={{
+                required: "Password is rquired"
+              }}
+              helperText={errors.password?.message}
+            />
+            <HawaTextField
+              name="confirmPassword"
+              placeholder="Password"
+              themeType={props.theme}
+              type="password"
+              inputLabel="Confirm Password"
+              rules={{
+                required: "Password is rquired"
+              }}
+              helperText={errors.confirmPassword?.message}
+            />
+            <ActionButton
+              fullWidth
+              type="submit"
+              text="Sign Up"
+              last
+              themeType={props.theme}
+            />
+          </form>
+        </FormProvider>
+      </Box>
+      {props.viaGoogle && (
+        <GoogleButton
+          outlined
+          themeType={props.theme}
+          buttonText={props.googleButtonLabel}
+          handleClick={props.handleGoogleSignIn}
+        />
+      )}
+      {props.viaGithub && (
+        <GithubButton
+          outlined
+          themeType={props.theme}
+          buttonText={props.githubButtonLabel}
+          handleClick={props.handleGithubSignUp}
+        />
+      )}
+      {props.viaTwitter && (
+        <TwitterButton
+          outlined
+          themeType={props.theme}
+          buttonText={props.twitterButtonLabel}
+          handleClick={props.handleTwitterSignIn}
+        />
+      )}
     </Box>
   );
 };
+
+SignUpForm.propTypes = {
+  theme: PropTypes.oneOf(["secondary", "primary"])
+  // buttonLabel: PropTypes.string,
+  // danger: PropTypes.bool,
+  // disabled: PropTypes.bool,
+  // showText: PropTypes.bool
+};

package/src/blocks/Payment/ChargeWalletForm.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import { HawaTextField, ActionButton, HawaTypography } from "../../ui";
+import { Box } from "../../layout";
+
+export const ChargeWalletForm = (props) => {
+  const [walletAmount, setWalletAmount] = useState(0);
+  return (
+    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
+      <Box themeType={props.theme} noMargin>
+        <HawaTypography variant="h2" align="center" themeType={props.theme}>
+          {walletAmount.toLocaleString("en")}{" "}
+          <span style={{ fontSize: 20, letterSpacing: 1 }}>
+            {props.currency}
+          </span>
+        </HawaTypography>
+        <HawaTypography themeType={props.theme}></HawaTypography>
+        <HawaTextField
+          themeType={props.theme}
+          type="number"
+          inputLabel="Amount" //move this to props
+          onChange={(e) => setWalletAmount(e.target.value)}
+        />
+        <ActionButton
+          last
+          text={"Charge Wallet"} //move this to props
+          themeType={props.theme}
+          onClick={props.handleSignIn}
+        />
+      </Box>
+    </Box>
+  );
+};

package/src/blocks/Payment/CreditCardForm.js

@@ -0,0 +1,31 @@
+import React from "react";
+import {
+  HawaTextField,
+  ActionButton,
+  GoogleButton,
+  TwitterButton,
+  GithubButton
+} from "../../ui";
+import { Box } from "../../layout";
+
+export const CreditCardForm = (props) => {
+  return (
+    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
+      <Box themeType={props.theme} noMargin>
+        <HawaTextField themeType={props.theme} type="text" inputLabel="Email" />
+
+        <HawaTextField
+          themeType={props.theme}
+          type="text"
+          inputLabel="Password"
+        />
+        <ActionButton
+          last
+          text={"Sign In"}
+          themeType={props.theme}
+          onClick={props.handleSignIn}
+        />
+      </Box>
+    </Box>
+  );
+};

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

@@ -0,0 +1,328 @@
+import React, { useEffect, useState, useRef } from "react";
+import sha256 from "crypto-js/sha256";
+import Button from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
+import useTranslation from "next-translate/useTranslation";
+import axios from "axios";
+
+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 class 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>
+          <Button
+            variant="contained"
+            color="primary"
+            fullWidth
+            onClick={handlePayfortForm}
+          >
+            {loading ? (
+              <CircularProgress
+                variant="indeterminate"
+                style={{ color: "white", display: "none" }}
+                size={25}
+              />
+            ) : (
+              <span className="pay-new-btn-txt">{t("pay-now")}</span>
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}