@sikka/hawa 0.0.9 → 0.0.12

package/src/blocks/Payment/CreditCardForm.js

@@ -2,6 +2,7 @@ import React from "react";
 import { HawaTextField, ActionButton } from "../../ui";
 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 { 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 { 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/index.js

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

package/src/layout/Box.js

@@ -1,38 +1,41 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
+import React from "react";
 
 export const Box = (props) => {
-  const { hawaTheme, themeName } = useContext(ThemeProvider);
-  let boxStyle = {};
+  // let boxStyle = {};
 
-  let currentTheme = Object.keys(hawaTheme.layout).find(
-    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
-  );
-  if (currentTheme) {
-    boxStyle = {
-      display: "flex",
-      flexDirection: props.horizontal ? "row" : "column",
-      ...hawaTheme?.layout[currentTheme],
-      backgroundColor: props.noColor
-        ? "none"
-        : hawaTheme.layout[currentTheme].backgroundColor,
-      padding: props.noPadding ? 0 : hawaTheme?.layout[currentTheme].padding,
-      margin: props.noMargin ? 0 : hawaTheme?.layout[currentTheme].margin,
-      maxWidth: props.maxWidth
-    };
-  } else {
-    boxStyle = {
-      display: "flex",
-      flexDirection: props.horizontal ? "row" : "column",
-      color: "white",
-      marginTop: props.last ? 10 * 2 : 0,
-      backgroundColor: props.noColor ? "none" : "lightGrey",
-      padding: props.noPadding ? 0 : 10,
-      margin: props.noMargin ? 0 : 10,
-      maxWidth: props.maxWidth,
-      borderRadius: 0
-    };
-  }
+  // let currentTheme = Object.keys(hawaTheme.layout).find(
+  //   (tName) => tName.toLowerCase() === themeName?.toLowerCase()
+  // );
+  // if (currentTheme) {
+  //   boxStyle = {
+  //     display: "flex",
+  //     flexDirection: props.horizontal ? "row" : "column",
+  //     ...hawaTheme?.layout[currentTheme],
+  //     backgroundColor: props.noColor
+  //       ? "none"
+  //       : hawaTheme.layout[currentTheme].backgroundColor,
+  //     padding: props.noPadding ? 0 : hawaTheme?.layout[currentTheme].padding,
+  //     margin: props.noMargin ? 0 : hawaTheme?.layout[currentTheme].margin,
+  //     maxWidth: props.maxWidth
+  //   };
+  // } else {
+  //   boxStyle = {
+  //     display: "flex",
+  //     flexDirection: props.horizontal ? "row" : "column",
+  //     color: "white",
+  //     marginTop: props.last ? 10 * 2 : 0,
+  //     backgroundColor: props.noColor ? "none" : "lightGrey",
+  //     padding: props.noPadding ? 0 : 10,
+  //     margin: props.noMargin ? 0 : 10,
+  //     maxWidth: props.maxWidth,
+  //   };
+  // }
 
-  return <div style={boxStyle}>{props.children}</div>;
+  return (
+    <div
+    // style={boxStyle}
+    >
+      {props.children}
+    </div>
+  );
 };

package/src/stories/BlocksStories/Account/UserProfile.stories.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { UserProfileForm } from "../../../blocks/Account";
+
+export default {
+  title: "Blocks/Account/User Profile",
+  component: [UserProfile],
+  argTypes: {}
+};
+
+const ProfileTemplate = (args) => {
+  return <UserProfileForm {...args} />;
+};
+export const UserProfile = ProfileTemplate.bind({});
+UserProfile.args = {
+  viaGoogle: true,
+  viaGithub: true,
+  viaTwitter: true,
+  showError: false,
+  errorTitle: "Error",
+  errorText: "Something went wrong"
+};

package/src/stories/BlocksStories/Account/UserSettings.stories.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { UserSettingsForm } from "../../../blocks/Account";
+
+export default {
+  title: "Blocks/Account/User Settings",
+  component: UserSettingsForm,
+  argTypes: {
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    }
+  }
+};
+
+export const UserSettings = (args) => {
+  return <UserSettingsForm {...args} />;
+};
+UserSettings.args = {
+  theme: "primary",
+  title: "red"
+};

package/src/stories/BlocksStories/Auth/NewPassword.stories.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { NewPasswordForm } from "../../../blocks/AuthForms";
+
+export default {
+  title: "Blocks/Auth/New Password",
+  component: [NewPasswordForm],
+  argTypes: {
+  
+    showError: {
+      default: false,
+      control: "boolean",
+      description: "Display the error when auth fails",
+      table: { defaultValue: { summary: true } }
+    },
+    errorTitle: {
+      default: " ",
+      control: "text",
+      description: "The error text for the auth failure",
+      table: { defaultValue: { summary: "" } }
+    },
+    errorText: {
+      default: "Something went wrong",
+      control: "text",
+      description: "The error text for the auth failure",
+      table: { defaultValue: { summary: "Something went wrong" } }
+    }
+  }
+};
+
+const NewPasswordTemplate = (args) => {
+  return (
+    <NewPasswordForm
+      {...args}
+      texts={{
+        emailLabel: "Email",
+        emailPlaceholder: "Enter your email",
+        emailRequiredText: "Email is required",
+        passwordPlaceholder: "Enter password",
+        updatePassword: "Update Password",
+        passwordRequiredText: "Password is required",
+        passwordLabel: "Choose new password",
+        confirmPasswordPlaceholder: "Confirm password",
+        confirmPasswordLabel: "Confirm",
+        forgotPasswordText: "Forgot password?",
+        newUserText: "New user?",
+        signUpText: "Sign up",
+        signInText: "Sign in",
+        googleButtonLabel: "Sign in with Google",
+        githubButtonLabel: "Sign in with Github",
+        twitterButtonLabel: "Sign in with Twitter"
+      }}
+      error={args.showError}
+    />
+  );
+};
+export const NewPassword = NewPasswordTemplate.bind({});
+NewPassword.args = {
+  showError: false,
+  passwordChanged: false
+};

package/src/stories/BlocksStories/Auth/ResetPassword.stories.js

@@ -0,0 +1,59 @@
+import React from "react";
+import { ResetPasswordForm } from "../../../blocks/AuthForms";
+
+export default {
+  title: "Blocks/Auth/Reset Password",
+  component: [ResetPasswordForm],
+  argTypes: {
+   
+    showError: {
+      default: false,
+      control: "boolean",
+      description: "Display the error when auth fails",
+      table: { defaultValue: { summary: true } }
+    },
+    errorTitle: {
+      default: " ",
+      control: "text",
+      description: "The error text for the auth failure",
+      table: { defaultValue: { summary: "" } }
+    },
+    errorText: {
+      default: "Something went wrong",
+      control: "text",
+      description: "The error text for the auth failure",
+      table: { defaultValue: { summary: "Something went wrong" } }
+    }
+  }
+};
+
+const ResetPasswordTemplate = (args) => {
+  return (
+    <ResetPasswordForm
+      error={args.showError}
+      texts={{
+        emailLabel: "Email",
+        emailPlaceholder: "Enter your email",
+        emailRequiredText: "Email is required",
+        emailInvalidText: "Invalid email address",
+        passwordLabel: "Password",
+        resetPassword: "Reset Password",
+        passwordRequiredText: "Password is required",
+        forgotPasswordText: "Forgot password?",
+        newUserText: "New user?",
+        signUpText: "Sign up",
+        signInText: "Sign in",
+        googleButtonLabel: "Sign in with Google",
+        githubButtonLabel: "Sign in with Github",
+        twitterButtonLabel: "Sign in with Twitter"
+      }}
+      {...args}
+      handleResetPassword={() => console.log("resetting password")}
+    />
+  );
+};
+export const ResetPassword = ResetPasswordTemplate.bind({});
+ResetPassword.args = {
+  showError: false,
+  sent: false
+};

package/src/stories/BlocksStories/Auth/SignIn.stories.js

@@ -0,0 +1,89 @@
+import React from "react";
+import { SignInForm } from "../../../blocks/AuthForms";
+
+export default {
+  title: "Blocks/Auth/Sign In",
+  component: [SignInForm],
+  argTypes: {
+    viaGoogle: {
+      default: true,
+      control: "boolean",
+      description: "Display the sign in via Google button",
+      table: { defaultValue: { summary: true } }
+    },
+    viaTwitter: {
+      default: true,
+      control: "boolean",
+      description: "Display the sign in via Twitter button",
+      table: { defaultValue: { summary: true } }
+    },
+    viaGithub: {
+      default: true,
+      control: "boolean",
+      description: "Display the sign in via Github button",
+      table: { defaultValue: { summary: true } }
+    },
+    showError: {
+      default: false,
+      control: "boolean",
+      description: "Display the error when auth fails",
+      table: { defaultValue: { summary: true } }
+    },
+    errorTitle: {
+      default: " ",
+      control: "text",
+      description: "The error text for the auth failure",
+      table: { defaultValue: { summary: "" } }
+    },
+    errorText: {
+      default: "Something went wrong",
+      control: "text",
+      description: "The error text for the auth failure",
+      table: { defaultValue: { summary: "Something went wrong" } }
+    }
+  }
+};
+
+const SignInTemplate = (args) => {
+  return (
+    <SignInForm
+      {...args}
+      error={args.showError}
+      texts={{
+        emailLabel: "Email",
+        emailPlaceholder: "Enter your email",
+        emailRequiredText: "Email is required",
+        emailInvalidText: "Invalid email address",
+        passwordLabel: "Password",
+        passwordPlaceholder: "Enter password",
+        passwordRequiredText: "Password is required",
+        forgotPasswordText: "Forgot password?",
+        newUserText: "New user?",
+        signUpText: "Sign up",
+        signInText: "Sign in",
+        googleButtonLabel: "Sign in with Google",
+        githubButtonLabel: "Sign in with Github",
+        twitterButtonLabel: "Sign in with Twitter"
+      }}
+      handleSignIn={(e) => console.log("singing in via email", e)}
+      handleForgotPassword={() => console.log("user forgot password")}
+      handleGoogleSignIn={() => console.log("signing in via google")}
+      handleGithubSignIn={() => console.log("signing in via github")}
+      handleTwitterSignIn={() => console.log("signing in via Twitter")}
+      handleRouteToSignUp={() => console.log("switching to sign up")}
+      viaGoogle={args.viaGoogle}
+      viaGithub={args.viaGithub}
+      viaTwitter={args.viaTwitter}
+    />
+  );
+};
+
+export const SignIn = SignInTemplate.bind({});
+SignIn.args = {
+  viaGoogle: true,
+  viaGithub: true,
+  viaTwitter: true,
+  showError: false,
+  errorTitle: "Error",
+  errorText: "Something went wrong"
+};