@sikka/hawa 0.0.13 → 0.0.16

package/src/blocks/AuthForms/SignInForm.js

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import { HawaTextField, HawaLogoButton } from "../../elements";
-import { FormProvider, useForm } from "react-hook-form";
+import { Controller, 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";
@@ -14,74 +14,91 @@ export const SignInForm = (props) => {
   const methods = useForm();
   const {
     formState: { errors },
-    handleSubmit
+    handleSubmit,
+    register,
+    control
   } = methods;
 
   return (
-    <Container maxWidth="xs" variant="auth">
+    <Container
+      maxWidth="xs"
+      variant="auth"
+      style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
+    >
       {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
+      <form onSubmit={handleSubmit(props.handleSignIn)}>
+        <Controller
+          control={control}
+          name="email"
+          render={({ field }) => (
+            <HawaTextField
+              fullWidth
+              type="text"
+              value={field.value ?? ""}
+              label={props.texts.emailLabel}
+              helperText={errors.email?.message}
+              placeholder={props.texts.emailPlaceholder}
+              startAdornment={
+                <InputAdornment position="start">
+                  <EmailIcon />
+                </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>
+              {...field}
+            />
+          )}
+          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: 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>
+          }}
+        />
+
+        <Controller
+          control={control}
+          name="password"
+          render={({ field }) => (
+            <HawaTextField
+              fullWidth
+              type="password"
+              defaultValue={field.value ?? ""}
+              value={field.value ?? ""}
+              label={props.texts.passwordLabel}
+              placeholder={props.texts.passwordPlaceholder}
+              helperText={errors.password?.message}
+              startAdornment={
+                <InputAdornment position="start">
+                  <PasswordIcon />
+                </InputAdornment>
+              }
+              {...field}
+            />
+          )}
+          rules={{ required: props.texts.passwordRequiredText }}
+        />
+        <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>
       <Typography
         variant="subtitle2"
         style={{ marginTop: 5, textAlign: "center", padding: 5 }}

package/src/blocks/AuthForms/SignUpForm.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { HawaTextField, HawaLogoButton } from "../../elements";
 import PropTypes from "prop-types";
-import { FormProvider, useForm } from "react-hook-form";
+import { Controller, 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";
@@ -16,11 +16,16 @@ export const SignUpForm = (props) => {
   const methods = useForm();
   const {
     formState: { errors },
-    handleSubmit
+    handleSubmit,
+    control
   } = methods;
 
   return (
-    <Container maxWidth="xs" variant="auth">
+    <Container
+      maxWidth="xs"
+      variant="auth"
+      style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
+    >
       {props.error && (
         <Alert severity="error">
           {props.errorTitle && <AlertTitle>{props.errorTitle}</AlertTitle>}
@@ -32,32 +37,47 @@ export const SignUpForm = (props) => {
         )} */}
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(props.handleSignUp)}>
-          <HawaTextField
-            fullWidth
-            type="text"
-            label={props.texts.fullNameLabel}
+          <Controller
+            control={control}
             name="fullName"
-            placeholder={props.texts.fullNamePlaceholder}
-            inputLabel={props.texts.fullNameLabel}
-            startAdornment={
-              <InputAdornment position="start">
-                <PersonIcon />
-              </InputAdornment>
-            }
-            helperText={errors.fullName?.message}
+            render={({ field }) => (
+              <HawaTextField
+                fullWidth
+                type="text"
+                value={field.value ?? ""}
+                label={props.texts.fullNameLabel}
+                placeholder={props.texts.fullNamePlaceholder}
+                helperText={errors.fullName?.message}
+                startAdornment={
+                  <InputAdornment position="start">
+                    <PersonIcon />
+                  </InputAdornment>
+                }
+              />
+            )}
+            rules={{
+              required: props.texts.fullNameRequiredText
+            }}
           />
 
-          <HawaTextField
-            fullWidth
-            type="text"
-            label={props.texts.emailLabel}
-            placeholder={props.texts.emailPlaceholder}
+          <Controller
+            control={control}
             name="email"
-            startAdornment={
-              <InputAdornment position="start">
-                <EmailIcon />
-              </InputAdornment>
-            }
+            render={({ field }) => (
+              <HawaTextField
+                fullWidth
+                type="text"
+                value={field.value ?? ""}
+                label={props.texts.emailLabel}
+                helperText={errors.email?.message}
+                placeholder={props.texts.emailPlaceholder}
+                startAdornment={
+                  <InputAdornment position="start">
+                    <EmailIcon />
+                  </InputAdornment>
+                }
+              />
+            )}
             rules={{
               required: props.texts.emailRequiredText,
               pattern: {
@@ -66,27 +86,28 @@ export const SignUpForm = (props) => {
                 message: props.texts.emailInvalidText
               }
             }}
-            helperText={errors.email?.message}
           />
-          <HawaTextField
-            fullWidth
+          <Controller
+            control={control}
             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
-              }
-            }}
-            helperText={errors.password?.message}
+            render={({ field }) => (
+              <HawaTextField
+                fullWidth
+                type="password"
+                defaultValue={field.value ?? ""}
+                value={field.value ?? ""}
+                label={props.texts.passwordLabel}
+                placeholder={props.texts.passwordPlaceholder}
+                helperText={errors.password?.message}
+                startAdornment={
+                  <InputAdornment position="start">
+                    <PasswordIcon />
+                  </InputAdornment>
+                }
+                {...field}
+              />
+            )}
+            rules={{ required: props.texts.passwordRequiredText }}
           />
 
           <Button fullWidth variant="last" type="submit">

package/src/blocks/Payment/ChargeWalletForm.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { HawaTextField } from "../../elements";
-import { FormProvider, useForm } from "react-hook-form";
+import { Controller, FormProvider, useForm } from "react-hook-form";
 import Container from "@mui/material/Container";
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
@@ -10,34 +10,43 @@ export const ChargeWalletForm = (props) => {
   const methods = useForm();
   const {
     formState: { errors },
-    handleSubmit
+    handleSubmit,
+    control
   } = methods;
 
   return (
     <Container maxWidth="xs">
-      <Typography align="center" variant="h1">
+      <Typography align="center" variant="h2" fontWeight={500}>
         {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
+        <form onSubmit={handleSubmit(props.handleChargeWallet)}>
+          <Controller
+            control={control}
             name="amount"
-            placeholder="Enter amount"
-            type="number"
-            value={walletAmount}
-            rules={{
-              required: "Password is rquired"
-            }}
-            helperText={errors.amount?.message}
+            render={({ field }) => (
+              <HawaTextField
+                fullWidth
+                placeholder="Enter amount"
+                type="number"
+                value={field.value ?? ""}
+                // helperText={errors.amount?.message}
+                {...field}
+                inputProps={{
+                  inputMode: "numeric",
+                  min: "0",
+                  max: "9999999",
+                  step: "0.01"
+                }}
+                onChange={(e) => {
+                  // e.preventDefault();
+                  field.onChange(parseFloat(e.target.value));
+                  console.log("e", e.target.value);
+                  setWalletAmount(e.target.value);
+                }}
+              />
+            )}
           />
 
           <Button

package/src/blocks/Pricing/PricingPlans.js

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import Container from "@mui/material/Container";
+import { HawaPricingCard, HawaRadio } from "../../elements";
+
+export const PricingPlans = (props) => {
+  const [currentCurrency, setCurrentCurrency] = useState("sar");
+  const [currentCycle, setCurrentCycle] = useState("monthly");
+  return (
+    <Container style={{ width: "fit-content" }} variant="plain">
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          marginBottom: 10
+        }}
+      >
+        <HawaRadio
+          location="inPricing"
+          handleChange={(e) => setCurrentCycle(e)}
+          defaultValue="monthly"
+          options={[
+            { label: `Monthly`, value: `monthly` },
+            { label: `3 Months`, value: `3-months` },
+            { label: `6 Months`, value: `6-months` },
+            { label: `Annually`, value: `annually` }
+          ]}
+        />
+
+        <HawaRadio
+          location="inPricing"
+          handleChange={(e) => {
+            setCurrentCurrency(e);
+          }}
+          defaultValue="sar"
+          options={[
+            { label: `USD`, value: `usd` },
+            { label: `SAR`, value: `sar` }
+          ]}
+        />
+      </div>
+
+      <Container variant="pricing">
+        {props.plans.map((plan) => {
+          return (
+            <HawaPricingCard
+              lang={props.lang}
+              {...plan}
+              currency={currentCurrency}
+              cycleText={currentCycle}
+            />
+          );
+        })}
+      </Container>
+    </Container>
+  );
+};

package/src/elements/HawaAlert.js

@@ -27,7 +27,7 @@ export const HawaAlert = (props) => {
   // });
 
   return (
-    <Alert>
+    <Alert {...props}>
       {props.title && <AlertTitle>{props.title}</AlertTitle>}
       {props.text}
     </Alert>

package/src/elements/HawaAppBar.js

@@ -0,0 +1,139 @@
+import React from "react";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import Menu from "@mui/material/Menu";
+import MenuIcon from "@mui/icons-material/Menu";
+import Container from "@mui/material/Container";
+import Avatar from "@mui/material/Avatar";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
+import MenuItem from "@mui/material/MenuItem";
+
+const pages = ["Products", "Pricing", "Blog"];
+const settings = ["Profile", "Account", "Dashboard", "Logout"];
+
+export const HawaAppBar = (props) => {
+  const [anchorElNav, setAnchorElNav] = React.useState(null);
+  const [anchorElUser, setAnchorElUser] = React.useState(null);
+
+  const handleOpenNavMenu = (event) => {
+    setAnchorElNav(event.currentTarget);
+  };
+  const handleOpenUserMenu = (event) => {
+    setAnchorElUser(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
+  return (
+    <AppBar position="static">
+      <Container maxWidth="xl" variant="appbar">
+        <Toolbar disableGutters>
+          <Typography
+            variant="h6"
+            noWrap
+            component="div"
+            sx={{ mr: 2, display: { xs: "none", md: "flex" } }}
+          >
+            LOGO
+          </Typography>
+
+          <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
+            <IconButton
+              size="large"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={props.handleOpenSideMenu}
+              color="inherit"
+            >
+              <MenuIcon />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorElNav}
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "left"
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "left"
+              }}
+              open={Boolean(anchorElNav)}
+              onClose={handleCloseNavMenu}
+              sx={{
+                display: { xs: "block", md: "none" }
+              }}
+            >
+              {pages.map((page) => (
+                <MenuItem key={page} onClick={handleCloseNavMenu}>
+                  <Typography textAlign="center">{page}</Typography>
+                </MenuItem>
+              ))}
+            </Menu>
+          </Box>
+          <Typography
+            variant="h6"
+            noWrap
+            component="div"
+            sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}
+          >
+            LOGO
+          </Typography>
+          <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
+            {pages.map((page) => (
+              <Button
+                key={page}
+                onClick={handleCloseNavMenu}
+                sx={{ my: 2, color: "white", display: "block" }}
+              >
+                {page}
+              </Button>
+            ))}
+          </Box>
+
+          <Box sx={{ flexGrow: 0 }}>
+            <Tooltip title="Open settings">
+              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
+              </IconButton>
+            </Tooltip>
+            <Menu
+              sx={{ mt: "45px" }}
+              id="menu-appbar"
+              anchorEl={anchorElUser}
+              anchorOrigin={{
+                vertical: "top",
+                horizontal: "right"
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "right"
+              }}
+              open={Boolean(anchorElUser)}
+              onClose={handleCloseUserMenu}
+            >
+              {settings.map((setting) => (
+                <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                  <Typography textAlign="center">{setting}</Typography>
+                </MenuItem>
+              ))}
+            </Menu>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+};

package/src/elements/HawaListItem.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { ListItemButton, ListItemText } from "@mui/material";
+import InboxIcon from "@mui/icons-material/MoveToInbox";
+
+export const HawaListItem = (props) => {
+  return (
+    <ListItemButton
+      variant={props.selected && "clicked"}
+      key={props.text}
+      sx={{
+        minHeight: 48,
+        justifyContent: props.open ? "initial" : "center",
+        px: 2.5
+      }}
+    >
+      <InboxIcon />
+      <div style={{ width: 20 }} />
+      <ListItemText primary={props.text} sx={{ opacity: props.open ? 1 : 0 }} />
+    </ListItemButton>
+  );
+};