@sikka/hawa 0.0.8 → 0.0.11

package/src/blocks/AuthForms/SignInForm.js

@@ -1,17 +1,12 @@
 import React from "react";
-import {
-  HawaTextField,
-  ActionButton,
-  HawaAlert,
-  HawaTypography,
-  HawaLogoButton
-} from "../../ui";
-import { Box } from "../../layout";
+import { HawaTextField, HawaTypography, HawaLogoButton } from "../../ui";
 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 Button from "@mui/material/Button";
+import Alert from "@mui/material/Alert";
 
 export const SignInForm = (props) => {
   const methods = useForm();
@@ -21,69 +16,69 @@ 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>
+          <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}
+          />
+          <HawaTypography
+            style={{
+              cursor: "pointer",
+              marginTop: 5,
+              width: "max-content",
+              padding: 5
+            }}
+            onClick={props.handleForgotPassword}
+          >
+            {props.texts.forgotPasswordText}
+          </HawaTypography>
+          <Button type="submit" fullWidth variant="last">
+            {props.texts.signInText}
+          </Button>
+        </form>
+      </FormProvider>
       <HawaTypography
         style={{
           marginTop: 5,
@@ -92,39 +87,41 @@ export const SignInForm = (props) => {
           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>
+      <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,143 @@
 import React from "react";
-import { Box } from "../../layout";
-import {
-  HawaTextField,
-  ActionButton,
-  HawaAlert,
-  HawaTypography,
-  HawaLogoButton
-} from "../../ui";
+import { HawaTextField, HawaLogoButton } 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";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import Alert from "@mui/material/Alert";
 
 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/PaymentMethod.js

@@ -78,7 +78,6 @@ const PaymentMethodButton = (props) => {
         padding: 20,
         width: "90%",
         margin: 10,
-        borderRadius: "var(--borderR)"
       }}
       onClick={(e) => props.handlePaymentMethod(e, props.methodCode)}
     >

package/src/blocks/Payment/SelectPayment.js

@@ -2,63 +2,62 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Box } from "../../layout";
 import { HawaTextField, HawaTypography, HawaLogoButton } from "../../ui";
+import { Container } from "@mui/material";
 
 export const SelectPayment = (props) => {
   return (
-    <Box maxWidth={400} noColor noMargin noPadding>
-      <Box noMargin>
-        <HawaTypography align="center">Choose Payment Method</HawaTypography>
-        {props.viaWallet && (
-          <HawaLogoButton
-            logo="wallet"
-            buttonText={props.walletLabel}
-            onClick={props.handleWallet}
-          />
-        )}
-        {props.viaCreditCard && (
-          <HawaLogoButton
-            logo="visa/master"
-            buttonText={props.visaMasterLabel}
-            handleClick={props.handleCreditCard}
-          />
-        )}
-        {props.viaMada && (
-          <HawaLogoButton
-            logo="mada"
-            buttonText={props.madaLabel}
-            handleClick={props.handleMada}
-          />
-        )}
-        {props.viaSTCPay && (
-          <HawaLogoButton
-            logo="stcpay"
-            buttonText={props.stcPayLabel}
-            handleClick={props.handleSTCPay}
-          />
-        )}
-        {props.viaPayPal && (
-          <HawaLogoButton
-            logo="paypal"
-            buttonText={props.paypalLabel}
-            handleClick={props.handlePayPal}
-          />
-        )}
-        {props.viaGooglePay && (
-          <HawaLogoButton
-            logo="googlepay"
-            buttonText={props.googlePayLabel}
-            handleClick={props.handleGooglePay}
-          />
-        )}
-        {props.viaApplePay && (
-          <HawaLogoButton
-            logo="applepay"
-            buttonText={props.applePayLabel}
-            handleClick={props.handleApplePay}
-          />
-        )}
-      </Box>
-    </Box>
+    <Container maxWidth="xs" >
+      <HawaTypography align="center">Choose Payment Method</HawaTypography>
+      {props.viaWallet && (
+        <HawaLogoButton
+          logo="wallet"
+          buttonText={props.walletLabel}
+          onClick={props.handleWallet}
+        />
+      )}
+      {props.viaCreditCard && (
+        <HawaLogoButton
+          logo="visa/master"
+          buttonText={props.visaMasterLabel}
+          handleClick={props.handleCreditCard}
+        />
+      )}
+      {props.viaMada && (
+        <HawaLogoButton
+          logo="mada"
+          buttonText={props.madaLabel}
+          handleClick={props.handleMada}
+        />
+      )}
+      {props.viaSTCPay && (
+        <HawaLogoButton
+          logo="stcpay"
+          buttonText={props.stcPayLabel}
+          handleClick={props.handleSTCPay}
+        />
+      )}
+      {props.viaPayPal && (
+        <HawaLogoButton
+          logo="paypal"
+          buttonText={props.paypalLabel}
+          handleClick={props.handlePayPal}
+        />
+      )}
+      {props.viaGooglePay && (
+        <HawaLogoButton
+          logo="googlepay"
+          buttonText={props.googlePayLabel}
+          handleClick={props.handleGooglePay}
+        />
+      )}
+      {props.viaApplePay && (
+        <HawaLogoButton
+          logo="applepay"
+          buttonText={props.applePayLabel}
+          handleClick={props.handleApplePay}
+        />
+      )}
+    </Container>
   );
 };
 

package/src/index.js

@@ -1,4 +1,3 @@
 export * from "./blocks/Account";
 export * from "./blocks/AuthForms";
 export * from "./blocks/Payment";
-//export * from "./components/Hawa";