@sikka/hawa 0.0.10 → 0.0.13

package/src/blocks/Payment/CreditCardForm.js

@@ -1,7 +1,8 @@
 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";
 
 export const CreditCardForm = (props) => {
   const methods = useForm();
@@ -11,50 +12,54 @@ export const CreditCardForm = (props) => {
   } = 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}
-            />
+    <Container maxWidth="xs">
+      <FormProvider {...methods}>
+        <form onSubmit={handleSubmit(props.handle)}>
+          <HawaTextField
+            fullWidth
+            name="password"
+            placeholder="Enter password"
+            type="number"
+            label="Card Number"
+            // 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>
+          <HawaTextField
+            fullWidth
+            name="password"
+            placeholder="Enter password"
+            type="password"
+            label="Name On Card"
+            // startAdornment={
+            //   <InputAdornment position="start">
+            //     <PasswordIcon />
+            //   </InputAdornment>
+            // }
+            rules={{
+              required: "Password is rquired"
+            }}
+            helperText={errors.password?.message}
+          />
+
+          <Button
+            type="submit"
+            fullWidth
+            variant="last"
+            onClick={props.handlePayWithCreditCard}
+          >
+            {/* {props.texts.signInText} */}
+            {"Pay with Credit Card"}
+          </Button>
+        </form>
+      </FormProvider>
+    </Container>
   );
 };

package/src/blocks/Payment/PayWithWallet.js

@@ -1,14 +1,24 @@
 import React from "react";
-import { ActionButton } from "../../ui";
+import { ActionButton } from "../../elements";
 import { Box } from "../../layout";
+import { Button, Container, Typography } from "@mui/material";
 
 export const PayWithWallet = (props) => {
   return (
-    <Box maxWidth={400} noColor noMargin noPadding>
-      <Box noMargin>
-        <div>Wallet Balance</div>
-        <ActionButton text="Pay now" />
-      </Box>
-    </Box>
+    <Container maxWidth="xs">
+      <Typography align="center">Wallet Balance</Typography>
+      <Typography align="center" variant="h1">
+        {props.walletBalance || "0"}
+        <Typography>{props.currency || "SAR"}</Typography>
+      </Typography>
+      <Button
+        type="submit"
+        fullWidth
+        variant="last"
+        onClick={props.handlePayWithWallet}
+      >
+        {"Pay Now"}
+      </Button>
+    </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

@@ -1,64 +1,62 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Box } from "../../layout";
-import { HawaTextField, HawaTypography, HawaLogoButton } from "../../ui";
+import { HawaTextField, HawaTypography, HawaLogoButton } from "../../elements";
+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}
+          onClick={props.handleCreditCard}
+        />
+      )}
+      {props.viaMada && (
+        <HawaLogoButton
+          logo="mada"
+          buttonText={props.madaLabel}
+          onClick={props.handleMada}
+        />
+      )}
+      {props.viaSTCPay && (
+        <HawaLogoButton
+          logo="stcpay"
+          buttonText={props.stcPayLabel}
+          onClick={props.handleSTCPay}
+        />
+      )}
+      {props.viaPayPal && (
+        <HawaLogoButton
+          logo="paypal"
+          buttonText={props.paypalLabel}
+          onClick={props.handlePayPal}
+        />
+      )}
+      {props.viaGooglePay && (
+        <HawaLogoButton
+          logo="googlepay"
+          buttonText={props.googlePayLabel}
+          onClick={props.handleGooglePay}
+        />
+      )}
+      {props.viaApplePay && (
+        <HawaLogoButton
+          logo="applepay"
+          buttonText={props.applePayLabel}
+          onClick={props.handleApplePay}
+        />
+      )}
+    </Container>
   );
 };
 

package/src/blocks/Pricing/SignInForm.js

@@ -0,0 +1,126 @@
+import React from "react";
+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();
+  const {
+    formState: { errors },
+    handleSubmit
+  } = methods;
+
+  return (
+    <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
+              }
+            }}
+            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.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 }}
+      >
+        {props.texts.newUserText}{" "}
+        <span
+          onClick={props.handleRouteToSignUp}
+          style={{
+            cursor: "pointer",
+            color: "blue",
+            textAlign: "center"
+          }}
+        >
+          {props.texts.signUpText}
+        </span>
+      </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/elements/ActionButton.js

@@ -0,0 +1,38 @@
+import Button from "@mui/material/Button";
+// import { styled, darken } from "@mui/material/styles";
+
+export const ActionButton = (props) => {
+  // const currentTheme = Object.keys(hawaTheme.actionButton).find(
+  //   (tName) => tName.toLowerCase() === themeName?.toLowerCase()
+  // );
+  // let actionButtonStyle = {};
+
+  // if (currentTheme) {
+  //   actionButtonStyle = {
+  //     ...hawaTheme.actionButton[currentTheme],
+  //     margin: props.last ? 0 : hawaTheme.actionButton[currentTheme].margin,
+  //     marginTop: props.last
+  //       ? hawaTheme.actionButton[currentTheme].margin * 2
+  //       : 0,
+  //     "&:hover": {
+  //       backgroundColor: darken(
+  //         hawaTheme.actionButton[currentTheme]?.backgroundColor,
+  //         0.1
+  //       )
+  //     }
+  //   };
+  // } else {
+  //   actionButtonStyle = {
+  //     backgroundColor: "black",
+  //     color: "white",
+  //     padding: 10,
+  //     marginTop: props.last ? 10 * 2 : 0,
+  //     borderRadius: 0
+  //   };
+  // }
+
+  // const StyledButton = styled(Button)(({ theme }) => {
+  //   return { ...actionButtonStyle };
+  // });
+  return <Button {...props}>{props.text}</Button>;
+};

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/elements/HawaAlert.js

@@ -0,0 +1,35 @@
+import React from "react";
+// import { styled } from "@mui/material/styles";
+
+import Alert from "@mui/material/Alert";
+import AlertTitle from "@mui/material/AlertTitle";
+
+export const HawaAlert = (props) => {
+  // const currentTheme = Object.keys(hawaTheme.alerts).find(
+  //   (tName) => tName.toLowerCase() === themeName?.toLowerCase()
+  // );
+  // let alertStyle = {};
+
+  // if (currentTheme) {
+  //   alertStyle = {
+  //     ...hawaTheme.alerts[currentTheme]
+  //   };
+  // } else {
+  //   alertStyle = {
+  //     marginBottom: 10
+  //   };
+  // }
+
+  // const StyledAlert = styled(Alert)(({ theme }) => {
+  //   return {
+  //     ...alertStyle
+  //   };
+  // });
+
+  return (
+    <Alert>
+      {props.title && <AlertTitle>{props.title}</AlertTitle>}
+      {props.text}
+    </Alert>
+  );
+};

package/src/elements/HawaButton.js

@@ -0,0 +1,47 @@
+import React from "react";
+// import { ThemeProvider } from "../themes/HawaProvider";
+// import { styled, darken } from "@mui/material/styles";
+import Button from "@mui/material/Button";
+
+export const HawaButton = (props) => {
+  // let buttonStyle = {};
+  // let currentTheme = Object.keys(hawaTheme.actionButton).find(
+  //   (tName) => tName.toLowerCase() === themeName?.toLowerCase()
+  // );
+  // if (currentTheme) {
+  //   buttonStyle = {
+  //     ...hawaTheme.actionButton[currentTheme],
+  //     //   marginTop: theme.actionButton[currentTheme].margin,
+  //     border: props.outlined ? "2px solid black" : "none",
+  //     //   borderRadius: theme.actionButton[currentTheme].borderRadius,
+  //     backgroundColor: "white",
+  //     //   height: 50,
+  //     "&:hover": {
+  //       backgroundColor: darken("#ffffff", 0.1)
+  //     }
+  //   };
+  // } else {
+  //   // Default theme
+  //   buttonStyle = {
+  //     cursor: "pointer",
+  //     display: "flex",
+  //     flexDirection: "row",
+  //     alignItems: "center",
+  //     justifyContent: "center",
+  //     marginTop: hawaTheme.actionButton[currentTheme]?.margin,
+  //     border: props.outlined ? "2px solid black" : "none",
+  //     borderRadius: 0,
+  //     //backgroundColor: "white",
+  //     backgroundColor: "red",
+  //     "&:hover": {
+  //       backgroundColor: darken("#ffffff", 0.1)
+  //     }
+  //   };
+  // }
+  // const StyledButton = styled(Button)(({ theme }) => {
+  //   return {
+  //     ...buttonStyle
+  //   };
+  // });
+  return <Button {...props}>{props.children}</Button>;
+};

package/src/elements/HawaCard.js

@@ -0,0 +1,77 @@
+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 HawaCard = (props) => {
+  return (
+    <Container maxWidth="xs" variant="price-card">
+      <Container variant="price-header">
+        <Typography variant="h3" fontWeight={500}>
+          {props.title}
+        </Typography>
+        <Typography variant="caption">{props.subtitle}</Typography>
+        <br />
+        <Typography variant="h5" fontWeight={500}>
+          {props.price} {props.currency} /{" "}
+          <span style={{ fontSize: 14 }}>{props.cycleText}</span>
+        </Typography>
+        {/* <div style={{ width: 5 }} /> */}
+        {/* <Typography variant="caption">{props.currency}</Typography> */}
+      </Container>
+      {/* <div style={{ marginBottom: 20, width: "100%" }}>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            // justifyContent: "center",
+            // backgroundColor: "red",
+
+            width: "100%"
+          }}
+        >
+          <Typography variant="h2" fontWeight={500}>
+            {props.price}
+          </Typography>
+          <div style={{ width: 5 }} />
+          <Typography variant="caption">{props.currency}</Typography>
+        </div>
+        <Typography>{props.cycleText}</Typography>
+      </div> */}
+      <div style={{ padding: 20 }}>
+        {props.features?.map((feature) => {
+          return (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "flex-start",
+                marginTop: 10,
+                width: "100%"
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  // alignItems: "flex-end",
+                  justifyContent: "flex-end",
+                  // backgroundColor: "red",
+                  width: "10%"
+                }}
+              >
+                <CheckIcon fontSize="small" />
+              </div>
+              <div style={{ width: 10 }} />
+              <Typography variant="subtitle2">{feature}</Typography>
+            </div>
+          );
+        })}
+      </div>
+      <Button variant="contained" style={{ margin: 20 }}>
+        Select Plan
+      </Button>
+    </Container>
+  );
+};

package/src/elements/HawaInputLabel.js

@@ -0,0 +1,31 @@
+import InputLabel from "@mui/material/InputLabel";
+
+export const HawaInputLabel = (props) => {
+  // let labelStyle = {};
+
+  // let currentTheme = Object.keys(hawaTheme.actionButton).find(
+  //   (tName) => tName.toLowerCase() === themeName?.toLowerCase()
+  // );
+  // if (currentTheme) {
+  //   labelStyle = {
+  //     margin: 15,
+  //     marginRight: 5,
+  //     marginLeft: 5,
+  //     color: hawaTheme?.layout[currentTheme].color
+  //   };
+  // } else {
+  //   labelStyle = {
+  //     margin: 15,
+  //     marginRight: 0,
+  //     marginLeft: 0,
+  //     color: "black"
+  //   };
+  // }
+  return (
+    <InputLabel
+    //  style={labelStyle}
+    >
+      <div style={{ fontSize: 15 }}>{props.label}</div>
+    </InputLabel>
+  );
+};