@sikka/hawa 0.0.4 → 0.0.7

package/src/blocks/Account/UserSettings.js

@@ -1,15 +1,15 @@
 import React from "react";
-import { StyledTextField, ActionButton } from "../../ui";
-import { Box } from '../../layout'
+import { HawaTextField, ActionButton } from "../../ui";
+import { Box } from "../../layout";
 
 export const UserSettings = (props) => {
-    return (
-        <Box maxWidth={400}>
-            <StyledTextField type="text" inputLabel="First Name" />
-            <StyledTextField type="text" inputLabel="Last Name" />
-            <StyledTextField type="email" inputLabel="Email" />
-            <StyledTextField type="password" inputLabel="Password" />
-            <ActionButton last text="Update Account" />
-        </Box>
-    );
+  return (
+    <Box maxWidth={400}>
+      <HawaTextField type="text" inputLabel="First Name" />
+      <HawaTextField type="text" inputLabel="Last Name" />
+      <HawaTextField type="email" inputLabel="Email" />
+      <HawaTextField type="password" inputLabel="Password" />
+      <ActionButton last text="Update Account" />
+    </Box>
+  );
 };

package/src/blocks/AuthForms/NewPasswordForm.js

@@ -1,17 +1,91 @@
-import React, { useContext } from "react";
+import React, { useState } from "react";
 import { Box } from "../../layout";
-import { ThemeProvider } from "../../themes/HawaProvider";
-import { StyledTextField, StyledInputLabel } from "../../ui";
+import { ActionButton, HawaTextField, HawaAlert } from "../../ui";
+import { FormProvider, useForm } from "react-hook-form";
+import InputAdornment from "@mui/material/InputAdornment";
+import PasswordIcon from "@mui/icons-material/HttpsOutlined";
+
 export const NewPasswordForm = (props) => {
-  const theme = useContext(ThemeProvider);
-  return (
-    <Box maxWidth={400} >
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmNewPassword, setConfirmNewPassword] = useState("");
+  const [error, setError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+  const [loading, setLoading] = useState(true);
 
-      <StyledInputLabel label="Password" />
-      <StyledTextField type="password" />
-      <StyledInputLabel label="Confirm Password" />
-      <StyledTextField type="password" />
-      {props.children}
+  const methods = useForm();
+  const {
+    formState: { errors },
+    handleSubmit,
+    getValues,
+    register,
+    watch,
+    reset,
+    setValue
+  } = methods;
+
+  const handleNewPassword = (e) => {
+    e.preventDefault();
+    console.log("submitting fom", e.target);
+    // setLoading(true);
+    // e.preventDefault();
+    // if (newPassword == "" || confirmNewPassword == "") {
+    //   setLoading(false);
+    //   return;
+    // }
+    // if (newPassword != confirmNewPassword) {
+    //   setError(true);
+    //   setLoading(false);
+    //   // setErrorMessage(t("password-no-match"));
+    //   return;
+    // }
+    // if (newPassword == confirmNewPassword) {
+    //   //mutation to reset password here
+    // }
+  };
+  return (
+    <Box maxWidth={400} noColor noMargin noPadding>
+      <Box noMargin>
+        {props.error && (
+          <HawaAlert text="This is a new password alert" severity="error" />
+        )}
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(props.handleNewPassword)}>
+            <HawaTextField
+              name="password"
+              type="password"
+              inputLabel="Choose new password"
+              placeholder="Enter password"
+              onChange={(e) => setNewPassword(e.target.value)}
+              value={newPassword}
+              startAdornment={
+                <InputAdornment position="start">
+                  <PasswordIcon />
+                </InputAdornment>
+              }
+              rules={{
+                required: "Password is rquired"
+              }}
+              helperText={errors.password?.message}
+            />
+            <HawaTextField
+              name="confirmPassword"
+              type="password"
+              placeholder="Confirm Password"
+              inputLabel="Confirm"
+              startAdornment={
+                <InputAdornment position="start">
+                  <PasswordIcon />
+                </InputAdornment>
+              }
+              rules={{
+                required: "Password is rquired"
+              }}
+              helperText={errors.confirmPassword?.message}
+            />
+            <ActionButton fullWidth type="submit" last text="Reset Password" />
+          </form>
+        </FormProvider>
+      </Box>
     </Box>
   );
 };

package/src/blocks/AuthForms/ResetPasswordForm.js

@@ -1,14 +1,53 @@
-import React, { useContext } from "react";
+import React from "react";
+import { FormProvider, useForm } from "react-hook-form";
 import { Box } from "../../layout";
-import { ThemeProvider } from "../../themes/HawaProvider";
-import { StyledTextField, StyledInputLabel } from "../../ui";
+import { HawaTextField, ActionButton, HawaAlert } from "../../ui";
+import InputAdornment from "@mui/material/InputAdornment";
+import EmailIcon from "@mui/icons-material/MailOutline";
+
 export const ResetPasswordForm = (props) => {
-  const theme = useContext(ThemeProvider);
+  const methods = useForm();
+  const {
+    formState: { errors },
+    handleSubmit,
+    getValues,
+    register,
+    watch,
+    reset,
+    setValue
+  } = methods;
   return (
-    <Box maxWidth={400} >
-      <StyledInputLabel label="Email" />
-      <StyledTextField type="text" />
-      {props.children}
+    <Box maxWidth={400} noColor noMargin noPadding>
+      <Box noMargin>
+        {props.error && (
+          <HawaAlert text="This is a reset password alert" severity="error" />
+        )}
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(props.handleResetPassword)}>
+            <HawaTextField
+              type="text"
+              name="email"
+              inputLabel="Email"
+              placeholder="Enter your email"
+              startAdornment={
+                <InputAdornment position="start">
+                  <EmailIcon />
+                </InputAdornment>
+              }
+              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}
+            />
+            <ActionButton fullWidth last type="submit" text="Reset Password" />
+          </form>
+        </FormProvider>{" "}
+      </Box>
     </Box>
   );
 };

package/src/blocks/AuthForms/SignInForm.js

@@ -1,19 +1,97 @@
-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";
 
-      <StyledInputLabel label="Email" />
-      <StyledTextField type="text" />
-      <StyledInputLabel label="Password" />
-      <StyledTextField type="text" />
+import InputAdornment from "@mui/material/InputAdornment";
+import EmailIcon from "@mui/icons-material/MailOutline";
+import PasswordIcon from "@mui/icons-material/HttpsOutlined";
 
-      {props.children}
+export const SignInForm = (props) => {
+  const methods = useForm();
+  const {
+    formState: { errors },
+    handleSubmit
+  } = methods;
+
+  return (
+    <Box maxWidth={400} noColor noMargin noPadding>
+      <Box noMargin>
+        {props.error && (
+          <HawaAlert text="This is a sign in alert" severity="error" />
+        )}
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(props.handleSignIn)}>
+            <HawaTextField
+              type="text"
+              name="email"
+              inputLabel="Email"
+              placeholder="Enter your email"
+              startAdornment={
+                <InputAdornment position="start">
+                  <EmailIcon />
+                </InputAdornment>
+              }
+              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="Enter password"
+              type="password"
+              inputLabel="Password"
+              startAdornment={
+                <InputAdornment position="start">
+                  <PasswordIcon />
+                </InputAdornment>
+              }
+              rules={{
+                required: "Password is rquired"
+              }}
+              helperText={errors.password?.message}
+            />
+            <ActionButton
+              type="submit"
+              fullWidth
+              last={"true"}
+              text={"Sign In"}
+            />
+          </form>
+        </FormProvider>
+      </Box>
+      {props.viaGoogle && (
+        <GoogleButton
+          buttonText={props.googleButtonLabel}
+          handleClick={props.handleGoogleSignIn}
+        />
+      )}
+      {props.viaGithub && (
+        <GithubButton
+          buttonText={props.githubButtonLabel}
+          handleClick={props.handleGithubSignIn}
+        />
+      )}
+      {props.viaTwitter && (
+        <TwitterButton
+          buttonText={props.twitterButtonLabel}
+          handleClick={props.handleTwitterSignIn}
+        />
+      )}
     </Box>
   );
 };

package/src/blocks/AuthForms/SignUpForm.js

@@ -1,20 +1,127 @@
-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";
+
+import PersonIcon from "@mui/icons-material/PermIdentityOutlined";
+import InputAdornment from "@mui/material/InputAdornment";
+import EmailIcon from "@mui/icons-material/MailOutline";
+import PasswordIcon from "@mui/icons-material/HttpsOutlined";
 
 export const SignUpForm = (props) => {
-  const theme = useContext(ThemeProvider);
+  const methods = useForm();
+  const {
+    formState: { errors },
+    handleSubmit,
+    getValues,
+    register,
+    watch,
+    reset,
+    setValue
+  } = methods;
+
   return (
-    <Box maxWidth={400}>
+    <Box maxWidth={400} noColor noMargin noPadding>
+      <Box noMargin>
+        {props.error && (
+          <HawaAlert text="This is a sign in alert" severity="error" />
+        )}
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(props.handleSignUp)}>
+            <HawaTextField
+              name="fullName"
+              placeholder="Fulan AlFulani"
+              type="text"
+              inputLabel="Full Name"
+              startAdornment={
+                <InputAdornment position="start">
+                  <PersonIcon />
+                </InputAdornment>
+              }
+              rules={{
+                required: "Full name rquired"
+              }}
+              helperText={errors.fullName?.message}
+            />
+
+            <HawaTextField
+              type="text"
+              inputLabel="Email"
+              placeholder="Enter your email"
+              name="email"
+              startAdornment={
+                <InputAdornment position="start">
+                  <EmailIcon />
+                </InputAdornment>
+              }
+              rules={{
+                required: "Email 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="Minimum 8 characters"
+              type="password"
+              inputLabel="Password"
+              startAdornment={
+                <InputAdornment position="start">
+                  <PasswordIcon />
+                </InputAdornment>
+              }
+              rules={{
+                required: "Password rquired",
+                minLength: {
+                  value: 8,
+                  message: "Password too short"
+                }
+              }}
+              helperText={errors.password?.message}
+            />
 
-      <StyledInputLabel label="Email" />
-      <StyledTextField type="text" />
-      <StyledInputLabel label="Password" />
-      <StyledTextField type="text" />
-      <StyledInputLabel label="Confirm Password" />
-      <StyledTextField type="text" />
-      {props.children}
+            <ActionButton fullWidth type="submit" text="Sign Up" last />
+          </form>
+        </FormProvider>
+      </Box>
+      {props.viaGoogle && (
+        <GoogleButton
+          buttonText={props.googleButtonLabel}
+          handleClick={props.handleGoogleSignIn}
+        />
+      )}
+      {props.viaGithub && (
+        <GithubButton
+          buttonText={props.githubButtonLabel}
+          handleClick={props.handleGithubSignUp}
+        />
+      )}
+      {props.viaTwitter && (
+        <TwitterButton
+          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,53 @@
+import React, { useState } from "react";
+import { HawaTextField, ActionButton, HawaTypography } from "../../ui";
+import { Box } from "../../layout";
+import { FormProvider, useForm } from "react-hook-form";
+
+export const ChargeWalletForm = (props) => {
+  const [walletAmount, setWalletAmount] = useState(0);
+  const methods = useForm();
+  const {
+    formState: { errors },
+    handleSubmit
+  } = methods;
+
+  return (
+    <Box maxWidth={400} noColor noMargin noPadding>
+      <Box noMargin>
+        <HawaTypography variant="h2" align="center">
+          {Number(walletAmount).toLocaleString("en")}{" "}
+          <span style={{ fontSize: 20, letterSpacing: 1 }}>
+            {props.currency}
+          </span>
+        </HawaTypography>
+        <FormProvider {...methods}>
+          <form
+            onChange={(e) => {
+              e.preventDefault();
+              setWalletAmount(methods.getValues().amount);
+            }}
+            style={{ marginTop: 10 }}
+            onSubmit={handleSubmit(props.handleChargeWallet)}
+          >
+            <HawaTextField
+              name="amount"
+              placeholder="Enter amount"
+              type="number"
+              value={walletAmount}
+              rules={{
+                required: "Password is rquired"
+              }}
+              helperText={errors.amount?.message}
+            />
+            <ActionButton
+              last
+              fullWidth
+              text={"Charge Wallet"} //move this to props
+              onClick={props.handleSignIn}
+            />
+          </form>
+        </FormProvider>
+      </Box>
+    </Box>
+  );
+};

package/src/blocks/Payment/CreditCardForm.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { HawaTextField, ActionButton } from "../../ui";
+import { Box } from "../../layout";
+import { FormProvider, useForm } from "react-hook-form";
+
+export const CreditCardForm = (props) => {
+  const methods = useForm();
+  const {
+    formState: { errors },
+    handleSubmit
+  } = methods;
+
+  return (
+    <Box maxWidth={400} noColor noMargin noPadding>
+      <Box noMargin>
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(props.handle)}>
+            <HawaTextField
+              name="password"
+              placeholder="Enter password"
+              type="password"
+              inputLabel="Password"
+              // startAdornment={
+              //   <InputAdornment position="start">
+              //     <PasswordIcon />
+              //   </InputAdornment>
+              // }
+              rules={{
+                required: "Password is rquired"
+              }}
+              helperText={errors.password?.message}
+            />
+
+            <HawaTextField
+              name="password"
+              placeholder="Enter password"
+              type="password"
+              inputLabel="Password"
+              // startAdornment={
+              //   <InputAdornment position="start">
+              //     <PasswordIcon />
+              //   </InputAdornment>
+              // }
+              rules={{
+                required: "Password is rquired"
+              }}
+              helperText={errors.password?.message}
+            />
+            <ActionButton
+              last
+              fullWidth
+              text={"Sign In"}
+              onClick={props.handleSignIn}
+            />
+          </form>
+        </FormProvider>
+      </Box>
+    </Box>
+  );
+};

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import sha256 from "crypto-js/sha256";
-import Button from "@material-ui/core/Button";
-import CircularProgress from "@material-ui/core/CircularProgress";
+import Button from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
 import useTranslation from "next-translate/useTranslation";
 import axios from "axios";
 
@@ -137,10 +137,8 @@ export default function CForm({
     onUpdateState("isCardFlipped", false);
   };
 
-  const handlePayfortForm = (e) => {
-    
-  };
-  
+  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() {
@@ -307,7 +305,12 @@ export default function CForm({
                 />
               )}
           </form>
-          <Button variant="contained" color="primary" fullWidth onClick={handlePayfortForm}>
+          <Button
+            variant="contained"
+            color="primary"
+            fullWidth
+            onClick={handlePayfortForm}
+          >
             {loading ? (
               <CircularProgress
                 variant="indeterminate"
@@ -323,4 +326,3 @@ export default function CForm({
     </div>
   );
 }
-

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

@@ -1,9 +1,9 @@
 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";
+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: {

package/src/blocks/Payment/PayWithWallet.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { ActionButton, WalletButton } from "../../ui";
+import { Box } from "../../layout";
+
+export const PayWithWallet = (props) => {
+  return (
+    <Box maxWidth={400} noColor noMargin noPadding>
+      <Box noMargin>
+        <div>Wallet Balance</div>
+        <ActionButton text="Pay now" />
+      </Box>
+    </Box>
+  );
+};

package/src/blocks/Payment/PaymentMethod.js

@@ -1,6 +1,6 @@
 import useTranslation from "next-translate/useTranslation";
-import Button from "@material-ui/core/Button";
-import Chip from "@material-ui/core/Chip";
+import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
 
 const PaymentMethod = (props) => {
   const { t } = useTranslation("common");