@sikka/hawa 0.0.12 → 0.0.15

package/src/blocks/AuthForms/SignUpForm.js

@@ -1,7 +1,7 @@
 import React from "react";
-import { HawaTextField, HawaLogoButton } from "../../ui";
+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,7 +16,8 @@ export const SignUpForm = (props) => {
   const methods = useForm();
   const {
     formState: { errors },
-    handleSubmit
+    handleSubmit,
+    control
   } = methods;
 
   return (
@@ -32,32 +33,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 +82,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,5 +1,5 @@
 import React, { useState } from "react";
-import { HawaTextField } from "../../ui";
+import { HawaTextField } from "../../elements";
 import { FormProvider, useForm } from "react-hook-form";
 import Container from "@mui/material/Container";
 import Button from "@mui/material/Button";

package/src/blocks/Payment/CreditCardForm.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { HawaTextField, ActionButton } from "../../ui";
+import { HawaTextField, ActionButton } from "../../elements";
 import { Box } from "../../layout";
 import { FormProvider, useForm } from "react-hook-form";
 import { Button, Container } from "@mui/material";

package/src/blocks/Payment/PayWithWallet.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { ActionButton } from "../../ui";
+import { ActionButton } from "../../elements";
 import { Box } from "../../layout";
 import { Button, Container, Typography } from "@mui/material";
 

package/src/blocks/Payment/SelectPayment.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { HawaTextField, HawaTypography, HawaLogoButton } from "../../ui";
+import { HawaTextField, HawaTypography, HawaLogoButton } from "../../elements";
 import { Container } from "@mui/material";
 
 export const SelectPayment = (props) => {

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/AdaptiveButton.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
+import PropTypes from "prop-types";
+import { StyledTooltip } from "./StyledTooltip";
+import { getTextColor } from "../util";
+
+export const AdaptiveButton = (props) => {
+  if (props.showText) {
+    return (
+      <Button variant="adaptive-dark" onClick={props.onClick}>
+        {props.icon}
+        <div style={{ width: 10 }} />
+        {props.buttonText}
+      </Button>
+    );
+  } else {
+    //icon only
+    return (
+      <Tooltip title={props.buttonText} placement="top">
+        <Button variant="adaptive-dark" onClick={props.onClick}>
+          {props.icon}
+        </Button>
+      </Tooltip>
+    );
+  }
+};
+
+AdaptiveButton.propTypes = {
+  buttonText: PropTypes.string,
+  showText: PropTypes.bool
+};

package/src/{ui → 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>
+  );
+};

package/src/elements/HawaPricingCard.js

@@ -0,0 +1,133 @@
+import React from "react";
+import Container from "@mui/material/Container";
+import { Button, Typography } from "@mui/material";
+import CheckIcon from "@mui/icons-material/CheckCircleOutlined";
+export const HawaPricingCard = (props) => {
+  let isArabic = props.lang === "ar";
+  let cycleTextsArabic = {
+    monthly: "شهرياً",
+    "3-months": "كل 3 أشهر",
+    "6-months": "كل 6 أشهر",
+    annually: "سنوياً"
+  };
+  let cycleTextsEnglish = {
+    monthly: "Monthly",
+    "3-months": "3 Months",
+    "6-months": "6 Months",
+    annually: "Annually"
+  };
+  let currencyMapping = {
+    usd: isArabic ? "دولار" : "$",
+    sar: isArabic ? "ريال" : "SAR"
+  };
+  let featuresMapping = isArabic ? props.features_ar : props.features;
+  return (
+    <Container
+      maxWidth="xs"
+      variant={props.selectedPlan ? "selected-plan-card" : "plan-card"}
+      style={{ direction: isArabic ? "rtl" : "ltr" }}
+    >
+      <Container variant="plan-header">
+        <Typography variant="h3" fontWeight={500}>
+          {isArabic ? props.title_ar : props.title}
+        </Typography>
+        <Typography variant="caption">
+          {isArabic ? props.subtitle_ar : props.subtitle}
+        </Typography>
+        <br />
+        <Typography
+          variant="h4"
+          fontWeight={500}
+          style={{ display: "flex", alignItems: "center" }}
+        >
+          {props.lang === "ar" ? (
+            <div
+              style={{
+                width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center"
+              }}
+            >
+              <div style={{ display: "flex", flexDirection: "row" }}>
+                {props.price}
+                <div style={{ width: 5 }} />
+                {/* <Typography>{props.currency?.toUpperCase()}</Typography> */}
+                <Typography>
+                  {currencyMapping[props.currency?.toLowerCase()]}
+                </Typography>
+              </div>
+              <Typography style={{ fontSize: 14, margin: 5 }}>
+                {isArabic
+                  ? cycleTextsArabic[props.cycleText]
+                  : cycleTextsEnglish[props.cycleText]}
+              </Typography>
+            </div>
+          ) : (
+            <div
+              style={{
+                width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center"
+              }}
+            >
+              <div style={{ display: "flex", flexDirection: "row" }}>
+                <Typography>
+                  {currencyMapping[props.currency?.toLowerCase()]}
+                </Typography>
+                {/* <Typography>{props.currency?.toUpperCase()}</Typography> */}
+                <div style={{ width: 5 }} />
+                {props.price}
+              </div>
+              <Typography style={{ fontSize: 14, margin: 5 }}>
+                {props.lang === "ar"
+                  ? cycleTextsArabic[props.cycleText]
+                  : cycleTextsEnglish[props.cycleText]}
+              </Typography>
+            </div>
+          )}
+        </Typography>
+      </Container>
+
+      <div
+        style={{ padding: 20, color: props.selectedPlan ? "white" : "black" }}
+      >
+        {featuresMapping?.map((feature) => {
+          return (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "flex-start",
+                marginTop: 10,
+                width: "100%"
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "flex-end",
+                  width: "10%"
+                }}
+              >
+                <CheckIcon fontSize="small" />
+              </div>
+              <div style={{ width: 10 }} />
+              <Typography variant="subtitle2">{feature}</Typography>
+            </div>
+          );
+        })}
+      </div>
+      <Button
+        onClick={props.selectPlan}
+        variant={props.selectedPlan ? "outlined" : "contained"}
+        style={{ margin: 20 }}
+      >
+        {props.buttonText}
+      </Button>
+    </Container>
+  );
+};

package/src/{ui → elements}/HawaRadio.js

@@ -5,7 +5,7 @@ import Container from "@mui/material/Container";
 export const HawaRadio = (props) => {
   const [value, setValue] = useState(props.defaultValue);
   return (
-    <Container variant="selection">
+    <Container variant={props.location || "panelTabs"}>
       {props.options.map((singleOption, i) => {
         return (
           <Button

package/src/elements/HawaSettingsRow.js

@@ -0,0 +1,27 @@
+import React from "react";
+
+import PropTypes from "prop-types";
+import Checkbox from "@mui/material/Checkbox";
+import { HawaTypography } from "./HawaTypography";
+import Container from "@mui/material/Container";
+import { HawaTextField } from "./HawaTextField";
+import { HawaRadio } from "./HawaRadio";
+import { HawaSwitch } from "./HawaSwitch";
+export const HawaSettingsRow = (props) => {
+  return (
+    <Container variant="settingsRow">
+      <HawaTypography>{props.settingsLabel}</HawaTypography>
+      {props.settingsType === "checkbox" && <Checkbox {...props} />}
+      {props.settingsType === "text" && <HawaTextField {...props} />}
+      {props.settingsType === "radio" && (
+        <HawaRadio location="inSettings" {...props} />
+      )}
+      {props.settingsType === "boolean" && <HawaSwitch {...props} />}
+    </Container>
+  );
+};
+
+HawaSettingsRow.propTypes = {
+  type: PropTypes.oneOf(["text", "number", "password"]),
+  helperText: PropTypes.string
+};

package/src/elements/HawaSwitch.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { Switch } from "@mui/material";
+
+export const HawaSwitch = (props) => {
+  return <Switch {...props} />;
+};

package/src/elements/HawaTextField.js

@@ -0,0 +1,26 @@
+import React from "react";
+import Input from "@mui/material/Input";
+import InputLabel from "@mui/material/InputLabel";
+import { Typography } from "@mui/material";
+
+export const HawaTextField = (props) => {
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }}
+      >
+        <InputLabel>{props.label}</InputLabel>
+
+        {props.helperText && (
+          <Typography variant="validation">{props.helperText}</Typography>
+        )}
+      </div>
+      <Input disableUnderline {...props} />
+    </>
+  );
+};