@sikka/hawa 0.0.27 → 0.0.30

package/src/blocks/AuthForms/NewPasswordForm.js

@@ -5,10 +5,9 @@ import InputAdornment from "@mui/material/InputAdornment";
 import PasswordIcon from "@mui/icons-material/HttpsOutlined";
 import Container from "@mui/material/Container";
 import Button from "@mui/material/Button";
+import PropTypes from "prop-types";
 
 export const NewPasswordForm = (props) => {
-  const [newPassword, setNewPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
   const [matchError, setMatchError] = useState(false);
   const methods = useForm();
   const {
@@ -48,7 +47,6 @@ export const NewPasswordForm = (props) => {
                   value={field.value ?? ""}
                   label={props.texts.passwordLabel}
                   placeholder={props.texts.passwordPlaceholder}
-                  // onChange={(e) => setNewPassword(e.target.value)}
                   helperText={errors.password?.message}
                   startAdornment={
                     <InputAdornment position="start">
@@ -72,7 +70,6 @@ export const NewPasswordForm = (props) => {
                   value={field.value ?? ""}
                   label={props.texts.confirmPasswordLabel}
                   placeholder={props.texts.confirmPasswordPlaceholder}
-                  // onChange={(e) => setConfirmPassword(e.target.value)}
                   helperText={errors.confirmPassword?.message}
                   startAdornment={
                     <InputAdornment position="start">
@@ -96,3 +93,24 @@ export const NewPasswordForm = (props) => {
     </Container>
   );
 };
+NewPasswordForm.propTypes = {
+  /**
+   *  An object of all the texts in the blocks
+   */
+  texts: PropTypes.shape({
+    emailLabel: PropTypes.string,
+    emailPlaceholder: PropTypes.string,
+    emailRequiredText: PropTypes.string,
+    passwordPlaceholder: PropTypes.string,
+    updatePassword: PropTypes.string,
+    passwordRequiredText: PropTypes.string,
+    passwordLabel: PropTypes.string,
+    confirmPasswordPlaceholder: PropTypes.string,
+    confirmPasswordLabel: PropTypes.string,
+    confirmPasswordRequiredText: PropTypes.string,
+    passwordMatchError: PropTypes.string,
+    forgotPasswordText: PropTypes.string,
+    passwordChanged: PropTypes.string
+  }),
+  handleNewPassword: PropTypes.func
+};

package/src/blocks/AuthForms/ResetPasswordForm.js

@@ -5,6 +5,7 @@ import InputAdornment from "@mui/material/InputAdornment";
 import EmailIcon from "@mui/icons-material/MailOutline";
 import Container from "@mui/material/Container";
 import Button from "@mui/material/Button";
+import PropTypes from "prop-types";
 
 export const ResetPasswordForm = (props) => {
   const methods = useForm();
@@ -58,3 +59,17 @@ export const ResetPasswordForm = (props) => {
     </Container>
   );
 };
+ResetPasswordForm.propTypes = {
+  /**
+   *  An object of all the texts in the blocks
+   */
+  texts: PropTypes.shape({
+    emailLabel: PropTypes.string,
+    emailPlaceholder: PropTypes.string,
+    emailRequiredText: PropTypes.string,
+    emailInvalidText: PropTypes.string,
+    resetPassword: PropTypes.string
+  }),
+  emailSentText: PropTypes.string,
+  handleResetPassword: PropTypes.func
+};

package/src/blocks/AuthForms/SignInForm.js

@@ -7,8 +7,7 @@ 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";
+import PropTypes from "prop-types";
 import Divider from "@mui/material/Divider";
 
 export const SignInForm = (props) => {
@@ -143,3 +142,32 @@ export const SignInForm = (props) => {
     </Container>
   );
 };
+SignInForm.propTypes = {
+  /**
+   *  An object of all the texts in the blocks
+   */
+  texts: PropTypes.shape({
+    emailLabel: PropTypes.string,
+    emailPlaceholder: PropTypes.string,
+    emailRequiredText: PropTypes.string,
+    emailInvalidText: PropTypes.string,
+    passwordLabel: PropTypes.string,
+    passwordPlaceholder: PropTypes.string,
+    passwordRequiredText: PropTypes.string,
+    forgotPasswordText: PropTypes.string,
+    newUserText: PropTypes.string,
+    signUpText: PropTypes.string,
+    signInText: PropTypes.string,
+    googleButtonLabel: PropTypes.string,
+    githubButtonLabel: PropTypes.string,
+    twitterButtonLabel: PropTypes.string
+  }),
+  viaGoogle: PropTypes.bool,
+  viaGithub: PropTypes.bool,
+  viaTwitter: PropTypes.bool,
+  handleSignIn: PropTypes.func,
+  handleRouteToSignUp: PropTypes.func,
+  handleGoogleSignIn: PropTypes.func,
+  handleGithubSignIn: PropTypes.func,
+  handleTwitterSignIn: PropTypes.func
+};

package/src/blocks/AuthForms/SignUpForm.js

@@ -33,9 +33,7 @@ export const SignUpForm = (props) => {
           {props.errorText}
         </Alert>
       )}
-      {/* {props.error && (
-          <HawaAlert text="This is a sign in alert" severity="error" />
-        )} */}
+
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(props.handleSignUp)}>
           <Controller
@@ -165,10 +163,57 @@ export const SignUpForm = (props) => {
   );
 };
 
+// fullNameLabel: "Full Name",
+// fullNamePlaceholder: "Fulan AlFulani",
+// fullNameRequiredText: "Full Name is required",
+// emailLabel: "Email",
+// emailPlaceholder: "Enter your email",
+// emailRequiredText: "Email is required",
+// emailInvalidText: "Invalid email address",
+// passwordLabel: "Password",
+// passwordPlaceholder: "Minimum 8 characters",
+// passwordRequiredText: "Password is required",
+// passwordTooShortText: "Password too short",
+// forgotPasswordText: "Forgot password?",
+// newUserText: "New user?",
+// signUpText: "Sign up",
+// signInText: "Sign in",
+// existingUserText: "Existing User?",
+// googleButtonLabel: "Sign in with Google",
+// githubButtonLabel: "Sign in with Github",
+// twitterButtonLabel: "Sign in with Twitter"
+
 SignUpForm.propTypes = {
-  theme: PropTypes.oneOf(["secondary", "primary"])
-  // buttonLabel: PropTypes.string,
-  // danger: PropTypes.bool,
-  // disabled: PropTypes.bool,
-  // showText: PropTypes.bool
+  /**
+   *  An object of all the texts in the blocks
+   */
+  texts: PropTypes.shape({
+    fullNameLabel: PropTypes.string,
+    fullNamePlaceholder: PropTypes.string,
+    fullNameRequiredText: PropTypes.string,
+    emailLabel: PropTypes.string,
+    emailPlaceholder: PropTypes.string,
+    emailRequiredText: PropTypes.string,
+    emailInvalidText: PropTypes.string,
+    passwordLabel: PropTypes.string,
+    passwordPlaceholder: PropTypes.string,
+    passwordRequiredText: PropTypes.string,
+    passwordTooShortText: PropTypes.string,
+    forgotPasswordText: PropTypes.string,
+    newUserText: PropTypes.string,
+    signUpText: PropTypes.string,
+    signInText: PropTypes.string,
+    existingUserText: PropTypes.string,
+    googleButtonLabel: PropTypes.string,
+    githubButtonLabel: PropTypes.string,
+    twitterButtonLabel: PropTypes.string
+  }),
+  viaGoogle: PropTypes.bool,
+  viaGithub: PropTypes.bool,
+  viaTwitter: PropTypes.bool,
+  handleSignUp: PropTypes.func,
+  handleRouteToSignIn: PropTypes.func,
+  handleGoogleSignUp: PropTypes.func,
+  handleGithubSignUp: PropTypes.func,
+  handleTwitterSignUp: PropTypes.func
 };

package/src/blocks/Payment/ChargeWalletForm.js

@@ -4,6 +4,7 @@ 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";
+import PropTypes from "prop-types";
 
 export const ChargeWalletForm = (props) => {
   const [walletAmount, setWalletAmount] = useState(0);
@@ -33,21 +34,18 @@ export const ChargeWalletForm = (props) => {
             render={({ field }) => (
               <HawaTextField
                 fullWidth
-                placeholder="Enter amount"
+                placeholder={props.texts.amountLabel}
                 type="number"
                 value={field.value ?? ""}
-                // helperText={errors.amount?.message}
                 {...field}
                 inputProps={{
                   inputMode: "numeric",
-                  min: "0",
+                  min: "1",
                   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);
                 }}
               />
@@ -60,11 +58,18 @@ export const ChargeWalletForm = (props) => {
             variant="last"
             onClick={props.handleSignIn}
           >
-            {/* {props.texts.signInText} */}
-            {"Charge Wallet"}
+            {props.texts.chargeWallet}
           </Button>
         </form>
       </FormProvider>
     </Container>
   );
 };
+
+ChargeWalletForm.propTypes = {
+  texts: PropTypes.shape({
+    amountLabel: PropTypes.string,
+    chargeWallet: PropTypes.string
+  }),
+  handleChargeWallet: PropTypes.func
+};

package/src/blocks/Payment/CheckoutForm.js

@@ -1,10 +1,11 @@
-import React, { useState } from "react";
+import React from "react";
 import { HawaTextField, HawaTable, HawaSelect } from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
 import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
+import PropTypes from "prop-types";
 
 export const CheckoutForm = (props) => {
   let isArabic = props.lang === "ar";
@@ -243,3 +244,28 @@ export const CheckoutForm = (props) => {
     </Container>
   );
 };
+
+CheckoutForm.propTypes = {
+  texts: PropTypes.shape({
+    orderDetails: PropTypes.string,
+    billingAddress: PropTypes.string,
+    payNow: PropTypes.string,
+    emailLabel: PropTypes.string,
+    emailRequiredText: PropTypes.string,
+    emailInvalidText: PropTypes.string,
+    firstNameLabel: PropTypes.string,
+    required: PropTypes.string,
+    lastNameLabel: PropTypes.string,
+    streetAddressLabel: PropTypes.string,
+    buildingNumberLabel: PropTypes.string,
+    cityLabel: PropTypes.string,
+    stateLabel: PropTypes.string,
+    countryLabel: PropTypes.string,
+    zipCodeLabel: PropTypes.string
+  }),
+  lang: PropTypes.string,
+  countriesList: PropTypes.array,
+  products: PropTypes.array,
+  total: PropTypes.string,
+  handlePayNow: PropTypes.func
+};

package/src/blocks/Payment/Confirmation.js

@@ -1,34 +1,14 @@
-import React, { useState } from "react";
-import { HawaTextField, HawaTable, HawaSelect } from "../../elements";
-import { Controller, FormProvider, useForm } from "react-hook-form";
+import React from "react";
+import { HawaTable } from "../../elements";
 import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
 import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
+import PropTypes from "prop-types";
 
 export const ConfirmationPage = (props) => {
   let isArabic = props.lang === "ar";
-  const methods = useForm();
-  const {
-    formState: { errors },
-    handleSubmit,
-    register,
-    control
-  } = methods;
 
-  let containerStyle = {
-    display: "flex",
-    padding: 0,
-    paddingRight: "0px !important",
-    paddingLeft: "0px !important",
-    flexDirection: {
-      xs: "column",
-      sm: "row",
-      md: "row",
-      lg: "row",
-      xl: "row"
-    }
-  };
   return (
     <div
       style={{
@@ -118,3 +98,41 @@ export const ConfirmationPage = (props) => {
     </div>
   );
 };
+
+ConfirmationPage.propTypes = {
+  texts: PropTypes.shape({
+    print: PropTypes.string,
+    history: PropTypes.string,
+    homePage: PropTypes.string,
+    successMessage: PropTypes.string,
+    orderDetails: PropTypes.string,
+    fasterPaymentNote: PropTypes.string,
+    billingAddress: PropTypes.string,
+    payNow: PropTypes.string,
+    yourOrderNumber: PropTypes.string,
+    emailLabel: PropTypes.string,
+    emailRequiredText: PropTypes.string,
+    emailInvalidText: PropTypes.string,
+    firstNameLabel: PropTypes.string,
+    required: PropTypes.string,
+    lastNameLabel: PropTypes.string,
+    streetAddressLabel: PropTypes.string,
+    buildingNumberLabel: PropTypes.string,
+    cityLabel: PropTypes.string,
+    stateLabel: PropTypes.string,
+    countryLabel: PropTypes.string,
+    zipCodeLabel: PropTypes.string,
+    refundPolicy: PropTypes.string
+  }),
+  products: PropTypes.array,
+  countriesList: PropTypes.array,
+  lang: PropTypes.string,
+  total: PropTypes.string,
+  userEmail: PropTypes.string,
+  orderNumber: PropTypes.string,
+  confirmationTitle: PropTypes.string,
+  handleHome: PropTypes.func,
+  handlePrint: PropTypes.func,
+  handleHistory: PropTypes.func,
+  handleRefundPolicyLink: PropTypes.func
+};

package/src/blocks/Payment/{PaymentMethod.js → Form/PaymentMethod.js}

@@ -1,8 +1,9 @@
 import useTranslation from "next-translate/useTranslation";
 import Button from "@mui/material/Button";
 import Chip from "@mui/material/Chip";
+import PropTypes from "prop-types";
 
-const PaymentMethod = (props) => {
+export const PaymentMethod = (props) => {
   const { t } = useTranslation("common");
   const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
   return (
@@ -77,14 +78,13 @@ const PaymentMethodButton = (props) => {
         opacity: props.chip ? 0.7 : 1,
         padding: 20,
         width: "90%",
-        margin: 10,
+        margin: 10
       }}
       onClick={(e) => props.handlePaymentMethod(e, props.methodCode)}
     >
       {props.imageURL ? (
         <div
           style={{
-            // backgroundColor: "red",
             width: "50%",
             textAlign: "right",
             paddingRight: 20
@@ -92,14 +92,7 @@ const PaymentMethodButton = (props) => {
         >
           <img
             src={props.imageURL}
-            // src={`https://qawaim-images.s3-ap-southeast-1.amazonaws.com/payments/visa.png`}
-            // alt=""
-            // srcset=""
-            // height={"100%"}
-            // width={"30%"}
             style={{
-              // height: "100%",
-              // aspectRatio: "6/4",
               maxWidth: 70,
               maxHeight: 70,
               height: "auto"
@@ -109,7 +102,6 @@ const PaymentMethodButton = (props) => {
       ) : null}
       <div
         style={{
-          // backgroundColor: "blue",
           width: "50%",
           textAlign: props.imageURL ? "left" : "center"
         }}
@@ -128,4 +120,7 @@ const PaymentMethodButton = (props) => {
   );
 };
 
-export default PaymentMethod;
+PaymentMethod.propTypes = {
+  wallet: PropTypes.bool,
+  handlePaymentMethod: PropTypes.func
+};

package/src/blocks/Payment/SelectPayment.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { HawaTextField, HawaTypography, HawaLogoButton } from "../../elements";
+import { HawaTypography, HawaLogoButton } from "../../elements";
 import Container from "@mui/material/Container";
 
 export const SelectPayment = (props) => {
@@ -60,12 +60,23 @@ export const SelectPayment = (props) => {
   );
 };
 
-HawaTextField.propTypes = {
-  theme: PropTypes.oneOf(["secondary", "primary"]),
-  viaApplePay: PropTypes.bool,
-  viaGooglePay: PropTypes.bool,
+SelectPayment.propTypes = {
+  viaMada: PropTypes.bool,
+  viaWallet: PropTypes.bool,
   viaSTCPay: PropTypes.bool,
-  viaCreditCard: PropTypes.bool,
   viaPayPal: PropTypes.bool,
-  handleApplePay: PropTypes.func
+  viaApplePay: PropTypes.bool,
+  viaCreditCard: PropTypes.bool,
+  madaLabel: PropTypes.string,
+  stcPayLabel: PropTypes.string,
+  paypalLabel: PropTypes.string,
+  walletLabel: PropTypes.string,
+  applePayLabel: PropTypes.string,
+  visaMasterLabel: PropTypes.string,
+  handleMada: PropTypes.func,
+  handleWallet: PropTypes.func,
+  handleSTCPay: PropTypes.func,
+  handlePayPal: PropTypes.func,
+  handleApplePay: PropTypes.func,
+  handleCreditCard: PropTypes.func
 };

package/src/blocks/Pricing/PricingPlans.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import Container from "@mui/material/Container";
 import { HawaPricingCard, HawaRadio } from "../../elements";
+import PropTypes from "prop-types";
 
 export const PricingPlans = (props) => {
   const [currentCurrency, setCurrentCurrency] = useState("sar");
@@ -55,3 +56,22 @@ export const PricingPlans = (props) => {
     </Container>
   );
 };
+
+PricingPlans.propTypes = {
+  plans: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string,
+      title_ar: PropTypes.string,
+      subtitle: PropTypes.string,
+      subtitle_ar: PropTypes.string,
+      price: PropTypes.number,
+      currency: PropTypes.string,
+      cycleText: PropTypes.string,
+      buttonText: PropTypes.string,
+      features: PropTypes.array,
+      features_ar: PropTypes.array,
+      selectedPlan: PropTypes.bool
+    })
+  ),
+  lang: PropTypes.string
+};

package/src/elements/ActionButton.js

@@ -1,38 +1,5 @@
 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

@@ -26,5 +26,6 @@ export const AdaptiveButton = (props) => {
 
 AdaptiveButton.propTypes = {
   buttonText: PropTypes.string,
+  onClick: PropTypes.func,
   showText: PropTypes.bool
 };

package/src/elements/HawaAccordian.js

@@ -0,0 +1,28 @@
+import React from "react";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+import Typography from "@mui/material/Typography";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import PropTypes from "prop-types";
+
+export const HawaAccordian = (props) => {
+  return (
+    <Accordion elevation={0}>
+      <AccordionSummary
+        expandIcon={<ExpandMore />}
+        aria-controls="panel1a-content"
+        id="panel1a-header"
+      >
+        <Typography>{props.title}</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography>{props.content} </Typography>
+      </AccordionDetails>
+    </Accordion>
+  );
+};
+HawaAccordian.propTypes = {
+  title: PropTypes.string,
+  content: PropTypes.string
+};

package/src/elements/HawaAlert.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Alert from "@mui/material/Alert";
 import AlertTitle from "@mui/material/AlertTitle";
+import PropTypes from "prop-types";
 
 export const HawaAlert = (props) => {
   return (
@@ -10,3 +11,18 @@ export const HawaAlert = (props) => {
     </Alert>
   );
 };
+HawaAlert.propTypes = {
+  /**
+   * The severity of the alert. This defines the color and icon used.
+   */
+  severity: PropTypes.oneOf(["error", "info", "success", "warning"]),
+  /**
+   * The title of the alert in bold. Can be left empty.
+   */
+  title: PropTypes.string,
+  /**
+   * The text of the alert.
+   */
+  text: PropTypes.string,
+  hideIcon: PropTypes.bool
+};

package/src/elements/HawaColorPicker.js

@@ -0,0 +1,61 @@
+import { useTheme } from "@mui/system";
+import React from "react";
+import styled from "@emotion/styled";
+import PropTypes from "prop-types";
+
+const ColorInput = styled.input`
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: none;
+  cursor: pointer;
+  height: 35px;
+  border-radius: ${(props) => props.borderRadius}px;
+  background-color: ${(props) => props.value};
+  &::-webkit-color-swatch {
+    border: none;
+  }
+  &::-moz-color-swatch {
+    border: none;
+  }
+`;
+const ColorText = styled.input`
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: none;
+  //   height: 30px;
+  padding: 10px;
+  border-radius: ${(props) => props.borderRadius}px;
+  &::-webkit-color-swatch {
+    border: none;
+  }
+  &::-moz-color-swatch {
+    border: none;
+  }
+`;
+export const HawaColorPicker = (props) => {
+  const theme = useTheme();
+  return (
+    <div style={{ display: "flex", flexDirection: "row" }}>
+      <ColorText
+        type={"text"}
+        value={props.color}
+        borderRadius={theme.allBorderRadius}
+        onChange={props.handleChange}
+      />
+      <div style={{ width: 10 }} />
+      <ColorInput
+        type={"color"}
+        value={props.color}
+        onChange={props.handleChange}
+        borderRadius={theme.allBorderRadius}
+      />
+    </div>
+  );
+};
+
+HawaColorPicker.propTypes = {
+  color: PropTypes.string,
+  handleChange: PropTypes.func
+};

package/src/elements/HawaItemCard.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Container from "@mui/material/Container";
-import Button from "@mui/material/Button";
+import PropTypes from "prop-types";
 
 export const HawaItemCard = (props) => {
   let isArabic = props.lang === "ar";
@@ -54,3 +54,7 @@ export const HawaItemCard = (props) => {
     </Container>
   );
 };
+HawaItemCard.propTypes = {
+  lang: PropTypes.string,
+  onCardClick: PropTypes.func,
+};