@sikka/hawa 0.0.10 → 0.0.13

package/src/blocks/AuthForms/SignInForm.js

@@ -1,17 +1,14 @@
 import React from "react";
-import {
-  HawaTextField,
-  ActionButton,
-  HawaAlert,
-  HawaTypography,
-  HawaLogoButton
-} from "../../ui";
-import { Box } from "../../layout";
+import { HawaTextField, HawaLogoButton } from "../../elements";
 import { FormProvider, useForm } from "react-hook-form";
-
 import InputAdornment from "@mui/material/InputAdornment";
 import EmailIcon from "@mui/icons-material/MailOutline";
 import PasswordIcon from "@mui/icons-material/HttpsOutlined";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import Alert from "@mui/material/Alert";
+import AlertTitle from "@mui/material/AlertTitle";
 
 export const SignInForm = (props) => {
   const methods = useForm();
@@ -21,110 +18,109 @@ export const SignInForm = (props) => {
   } = 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>
+    <Container maxWidth="xs" variant="auth">
+      {props.error && (
+        <Alert severity="error">
+          {props.errorTitle && <AlertTitle>{props.errorTitle}</AlertTitle>}
+          {props.errorText}
+        </Alert>
+      )}
+      <FormProvider {...methods}>
+        <form onSubmit={handleSubmit(props.handleSignIn)}>
+          <HawaTextField
+            fullWidth
+            type="text"
+            name="email"
+            label={props.texts.emailLabel}
+            placeholder={props.texts.emailPlaceholder}
+            startAdornment={
+              <InputAdornment position="start">
+                <EmailIcon />
+              </InputAdornment>
+            }
+            rules={{
+              required: props.texts.emailRequired,
+              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: props.texts.emailInvalidText
               }
-              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}
-            />
+            }}
+            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}
-            />
-            <HawaTypography
-              style={{
-                cursor: "pointer",
-                marginTop: 5,
-                width: "max-content",
-                padding: 5
-              }}
-              onClick={() => console.log("res")}
-            >
-              Forgot password?
-            </HawaTypography>
-            <ActionButton
-              type="submit"
-              fullWidth
-              last={"true"}
-              text={"Sign In"}
-            />
-          </form>
-        </FormProvider>
-      </Box>
-      <HawaTypography
-        style={{
-          marginTop: 5,
-          // width: "max-content",
-          textAlign: "center",
-          padding: 5
-        }}
+          <HawaTextField
+            fullWidth
+            name="password"
+            placeholder={props.texts.passwordPlaceholder}
+            type="password"
+            label={props.texts.passwordLabel}
+            startAdornment={
+              <InputAdornment position="start">
+                <PasswordIcon />
+              </InputAdornment>
+            }
+            rules={{
+              required: props.texts.passwordRequired
+            }}
+            helperText={errors.password?.message}
+          />
+          <Typography
+            style={{
+              cursor: "pointer",
+              marginTop: 5,
+              width: "max-content",
+              fontSize: 15,
+              padding: 5
+            }}
+            onClick={props.handleForgotPassword}
+          >
+            {props.texts.forgotPasswordText}
+          </Typography>
+          <Button type="submit" fullWidth variant="last">
+            {props.texts.signInText}
+          </Button>
+        </form>
+      </FormProvider>
+      <Typography
+        variant="subtitle2"
+        style={{ marginTop: 5, textAlign: "center", padding: 5 }}
       >
-        New user?{" "}
+        {props.texts.newUserText}{" "}
         <span
-          onClick={() => console.log("res")}
+          onClick={props.handleRouteToSignUp}
           style={{
             cursor: "pointer",
             color: "blue",
             textAlign: "center"
           }}
         >
-          Sign up
+          {props.texts.signUpText}
         </span>
-      </HawaTypography>
-      {props.viaGoogle && (
-        <HawaLogoButton
-          logo="google"
-          buttonText={props.googleButtonLabel}
-          handleClick={props.handleGoogleSignIn}
-        />
-      )}
-      {props.viaGithub && (
-        <HawaLogoButton
-          logo="github"
-          buttonText={props.githubButtonLabel}
-          handleClick={props.handleGithubSignIn}
-        />
-      )}
-      {props.viaTwitter && (
-        <HawaLogoButton
-          logo="twitter"
-          buttonText={props.twitterButtonLabel}
-          handleClick={props.handleTwitterSignIn}
-        />
-      )}
-    </Box>
+      </Typography>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        {props.viaGoogle && (
+          <HawaLogoButton
+            logo="google"
+            buttonText={props.texts.googleButtonLabel}
+            onClick={props.handleGoogleSignIn}
+          />
+        )}
+        {props.viaGithub && (
+          <HawaLogoButton
+            logo="github"
+            buttonText={props.texts.githubButtonLabel}
+            onClick={props.handleGithubSignIn}
+          />
+        )}
+        {props.viaTwitter && (
+          <HawaLogoButton
+            logo="twitter"
+            buttonText={props.texts.twitterButtonLabel}
+            onClick={props.handleTwitterSignIn}
+          />
+        )}
+      </div>
+    </Container>
   );
 };

package/src/blocks/AuthForms/SignUpForm.js

@@ -1,142 +1,144 @@
 import React from "react";
-import { Box } from "../../layout";
-import {
-  HawaTextField,
-  ActionButton,
-  HawaAlert,
-  HawaTypography,
-  HawaLogoButton
-} from "../../ui";
+import { HawaTextField, HawaLogoButton } from "../../elements";
 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";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import Alert from "@mui/material/Alert";
+import AlertTitle from "@mui/material/AlertTitle";
 
 export const SignUpForm = (props) => {
   const methods = useForm();
   const {
     formState: { errors },
-    handleSubmit,
-    getValues,
-    register,
-    watch,
-    reset,
-    setValue
+    handleSubmit
   } = methods;
 
   return (
-    <Box maxWidth={400} noColor noMargin noPadding>
-      <Box noMargin>
-        {props.error && (
+    <Container maxWidth="xs" variant="auth">
+      {props.error && (
+        <Alert severity="error">
+          {props.errorTitle && <AlertTitle>{props.errorTitle}</AlertTitle>}
+          {props.errorText}
+        </Alert>
+      )}
+      {/* {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}
-            />
+        )} */}
+      <FormProvider {...methods}>
+        <form onSubmit={handleSubmit(props.handleSignUp)}>
+          <HawaTextField
+            fullWidth
+            type="text"
+            label={props.texts.fullNameLabel}
+            name="fullName"
+            placeholder={props.texts.fullNamePlaceholder}
+            inputLabel={props.texts.fullNameLabel}
+            startAdornment={
+              <InputAdornment position="start">
+                <PersonIcon />
+              </InputAdornment>
+            }
+            helperText={errors.fullName?.message}
+          />
 
-            <HawaTextField
-              type="text"
-              inputLabel="Email"
-              placeholder="Enter your email"
-              name="email"
-              startAdornment={
-                <InputAdornment position="start">
-                  <EmailIcon />
-                </InputAdornment>
+          <HawaTextField
+            fullWidth
+            type="text"
+            label={props.texts.emailLabel}
+            placeholder={props.texts.emailPlaceholder}
+            name="email"
+            startAdornment={
+              <InputAdornment position="start">
+                <EmailIcon />
+              </InputAdornment>
+            }
+            rules={{
+              required: props.texts.emailRequiredText,
+              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: props.texts.emailInvalidText
               }
-              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>
+            }}
+            helperText={errors.email?.message}
+          />
+          <HawaTextField
+            fullWidth
+            name="password"
+            placeholder={props.texts.passwordPlaceholder}
+            type="password"
+            label={props.texts.passwordLabel}
+            startAdornment={
+              <InputAdornment position="start">
+                <PasswordIcon />
+              </InputAdornment>
+            }
+            rules={{
+              required: props.texts.passwordRequiredText,
+              minLength: {
+                value: 8,
+                message: props.texts.passwordTooShortText
               }
-              rules={{
-                required: "Password rquired",
-                minLength: {
-                  value: 8,
-                  message: "Password too short"
-                }
-              }}
-              helperText={errors.password?.message}
-            />
+            }}
+            helperText={errors.password?.message}
+          />
+
+          <Button fullWidth variant="last" type="submit">
+            {props.texts.signUpText}
+          </Button>
+        </form>
+      </FormProvider>
 
-            <ActionButton fullWidth type="submit" text="Sign Up" last />
-          </form>
-        </FormProvider>
-      </Box>
-      <HawaTypography
+      <Typography
+        variant="subtitle2"
         style={{
           marginTop: 5,
-          // width: "max-content",
           textAlign: "center",
           padding: 5
         }}
       >
         Existing user?{" "}
         <span
-          onClick={() => console.log("res")}
+          onClick={props.handleRouteToSignIn}
           style={{
             cursor: "pointer",
             color: "blue",
             textAlign: "center"
           }}
         >
-          Sign in
+          {props.texts.signInText}
         </span>
-      </HawaTypography>
-      {props.viaGoogle && (
-        <HawaLogoButton
-          logo="google"
-          buttonText={props.googleButtonLabel}
-          handleClick={props.handleGoogleSignIn}
-        />
-      )}
-      {props.viaGithub && (
-        <HawaLogoButton
-          logo="github"
-          buttonText={props.githubButtonLabel}
-          handleClick={props.handleGithubSignIn}
-        />
-      )}
-      {props.viaTwitter && (
-        <HawaLogoButton
-          logo="twitter"
-          buttonText={props.twitterButtonLabel}
-          handleClick={props.handleTwitterSignIn}
-        />
-      )}
-    </Box>
+      </Typography>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        {props.viaGoogle && (
+          <HawaLogoButton
+            logo="google"
+            buttonText={props.texts.googleButtonLabel}
+            onClick={props.handleGoogleSignUp}
+          />
+        )}
+        {props.viaGithub && (
+          <HawaLogoButton
+            logo="github"
+            buttonText={props.texts.githubButtonLabel}
+            onClick={props.handleGithubSignUp}
+          />
+        )}
+        {props.viaTwitter && (
+          <HawaLogoButton
+            logo="twitter"
+            buttonText={props.texts.twitterButtonLabel}
+            onClick={props.handleTwitterSignUp}
+          />
+        )}
+      </div>
+    </Container>
   );
 };
 

package/src/blocks/Payment/ChargeWalletForm.js

@@ -1,7 +1,9 @@
 import React, { useState } from "react";
-import { HawaTextField, ActionButton, HawaTypography } from "../../ui";
-import { Box } from "../../layout";
+import { HawaTextField } from "../../elements";
 import { FormProvider, useForm } from "react-hook-form";
+import Container from "@mui/material/Container";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
 
 export const ChargeWalletForm = (props) => {
   const [walletAmount, setWalletAmount] = useState(0);
@@ -12,42 +14,43 @@ export const ChargeWalletForm = (props) => {
   } = 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);
+    <Container maxWidth="xs">
+      <Typography align="center" variant="h1">
+        {Number(walletAmount).toLocaleString("en") || "0"}
+        <Typography>{props.currency || "SAR"}</Typography>
+      </Typography>
+      <FormProvider {...methods}>
+        <form
+          onChange={(e) => {
+            e.preventDefault();
+            setWalletAmount(methods.getValues().amount);
+          }}
+          style={{ marginTop: 10 }}
+          onSubmit={handleSubmit(props.handleChargeWallet)}
+        >
+          <HawaTextField
+            fullWidth
+            name="amount"
+            placeholder="Enter amount"
+            type="number"
+            value={walletAmount}
+            rules={{
+              required: "Password is rquired"
             }}
-            style={{ marginTop: 10 }}
-            onSubmit={handleSubmit(props.handleChargeWallet)}
+            helperText={errors.amount?.message}
+          />
+
+          <Button
+            type="submit"
+            fullWidth
+            variant="last"
+            onClick={props.handleSignIn}
           >
-            <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>
+            {/* {props.texts.signInText} */}
+            {"Charge Wallet"}
+          </Button>
+        </form>
+      </FormProvider>
+    </Container>
   );
 };