@sikka/hawa 0.0.29 → 0.0.32

package/src/blocks/AuthForms/ResetPasswordForm.js

@@ -53,14 +53,27 @@ export const ResetPasswordForm = (props) => {
         </form>
       ) : (
         <HawaTypography style={{ textAlign: "center", margin: 5 }}>
-          {props.emailSentText}
+          {props.texts.emailSentText}
         </HawaTypography>
       )}
     </Container>
   );
 };
 ResetPasswordForm.propTypes = {
-  texts: PropTypes.object,
-  emailSentText: PropTypes.string,
+  /**
+   *  An object of all the texts in the blocks
+   */
+  texts: PropTypes.shape({
+    emailLabel: PropTypes.string,
+    emailPlaceholder: PropTypes.string,
+    emailRequiredText: PropTypes.string,
+    emailInvalidText: PropTypes.string,
+    emailSentText: PropTypes.string,
+    resetPassword: PropTypes.string
+  }),
+  /**
+   * a boolean to replace the form with a success message
+   */
+  sent: PropTypes.bool,
   handleResetPassword: PropTypes.func
 };

package/src/blocks/AuthForms/SignInForm.js

@@ -143,7 +143,25 @@ export const SignInForm = (props) => {
   );
 };
 SignInForm.propTypes = {
-  texts: PropTypes.object,
+  /**
+   *  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,

package/src/blocks/AuthForms/SignUpForm.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { HawaTextField, HawaLogoButton } from "../../elements";
+import { HawaTextField, HawaLogoButton, HawaAlert } from "../../elements";
 import PropTypes from "prop-types";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import PersonIcon from "@mui/icons-material/PermIdentityOutlined";
@@ -10,8 +10,6 @@ import Container from "@mui/material/Container";
 import Divider from "@mui/material/Divider";
 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 SignUpForm = (props) => {
   const methods = useForm();
@@ -27,11 +25,12 @@ export const SignUpForm = (props) => {
       variant="auth"
       style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
     >
-      {props.error && (
-        <Alert severity="error" variant="inContainer">
-          {props.errorTitle && <AlertTitle>{props.errorTitle}</AlertTitle>}
-          {props.errorText}
-        </Alert>
+      {props.showError && (
+        <HawaAlert
+          title={props.errorTitle}
+          text={props.errorText}
+          severity="error"
+        />
       )}
 
       <FormProvider {...methods}>
@@ -164,7 +163,30 @@ export const SignUpForm = (props) => {
 };
 
 SignUpForm.propTypes = {
-  texts: PropTypes.object,
+  /**
+   *  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,

package/src/blocks/Payment/ChargeWalletForm.js

@@ -48,16 +48,15 @@ export const ChargeWalletForm = (props) => {
                   field.onChange(parseFloat(e.target.value));
                   setWalletAmount(e.target.value);
                 }}
+                helperText={errors.amount?.message}
               />
             )}
+            rules={{
+              required: props.texts.amountRequired
+            }}
           />
 
-          <Button
-            type="submit"
-            fullWidth
-            variant="last"
-            onClick={props.handleSignIn}
-          >
+          <Button type="submit" fullWidth variant="last">
             {props.texts.chargeWallet}
           </Button>
         </form>
@@ -67,6 +66,20 @@ export const ChargeWalletForm = (props) => {
 };
 
 ChargeWalletForm.propTypes = {
-  texts: PropTypes.object,
-  handleChargeWallet: PropTypes.func
+  /**
+   * The texts object for all the texts in the block
+   */
+  texts: PropTypes.shape({
+    amountLabel: PropTypes.string,
+    chargeWallet: PropTypes.string,
+    amountRequired: PropTypes.string
+  }),
+  /**
+   * Function called when charge wallet button is clicked
+   */
+  handleChargeWallet: PropTypes.func,
+  /**
+   * The currency text under the amount
+   */
+  currency: PropTypes.string
 };

package/src/blocks/Payment/CheckoutForm.js

@@ -246,7 +246,23 @@ export const CheckoutForm = (props) => {
 };
 
 CheckoutForm.propTypes = {
-  texts: PropTypes.object,
+  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,

package/src/blocks/Payment/Confirmation.js

@@ -100,7 +100,33 @@ export const ConfirmationPage = (props) => {
 };
 
 ConfirmationPage.propTypes = {
-  texts: PropTypes.object,
+  /**
+   * The texts object for all the texts in the block
+   */
+  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,

package/src/blocks/Payment/CreditCardForm.js

@@ -21,19 +21,12 @@ export const CreditCardForm = (props) => {
           placeholder="Enter password"
           type="tel"
           label="Card Number"
-          // variant="unscrollable"
-          // startAdornment={
-          //   <InputAdornment position="start">
-          //     <PasswordIcon />
-          //   </InputAdornment>
-          // }
           rules={{
             required: "Password is rquired"
           }}
           helperText={errors.password?.message}
         />
 
-       
         <Controller
           control={control}
           name="cardName"
@@ -44,11 +37,6 @@ export const CreditCardForm = (props) => {
               placeholder="Enter password"
               type="password"
               label="Name On Card"
-              // startAdornment={
-              //   <InputAdornment position="start">
-              //     <PasswordIcon />
-              //   </InputAdornment>
-              // }
               rules={{
                 required: "Password is rquired"
               }}
@@ -66,11 +54,6 @@ export const CreditCardForm = (props) => {
               placeholder="Enter password"
               type="password"
               label="Expiry Date"
-              // startAdornment={
-              //   <InputAdornment position="start">
-              //     <PasswordIcon />
-              //   </InputAdornment>
-              // }
               rules={{
                 required: "Password is rquired"
               }}
@@ -88,11 +71,6 @@ export const CreditCardForm = (props) => {
               placeholder="Enter password"
               type="password"
               label="CCV"
-              // startAdornment={
-              //   <InputAdornment position="start">
-              //     <PasswordIcon />
-              //   </InputAdornment>
-              // }
               rules={{
                 required: "Password is rquired"
               }}
@@ -107,7 +85,6 @@ export const CreditCardForm = (props) => {
           variant="last"
           onClick={props.handlePayWithCreditCard}
         >
-          {/* {props.texts.signInText} */}
           {"Pay with Credit Card"}
         </Button>
       </form>

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

@@ -85,7 +85,6 @@ const PaymentMethodButton = (props) => {
       {props.imageURL ? (
         <div
           style={{
-            // backgroundColor: "red",
             width: "50%",
             textAlign: "right",
             paddingRight: 20
@@ -93,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"
@@ -110,7 +102,6 @@ const PaymentMethodButton = (props) => {
       ) : null}
       <div
         style={{
-          // backgroundColor: "blue",
           width: "50%",
           textAlign: props.imageURL ? "left" : "center"
         }}
@@ -130,7 +121,6 @@ const PaymentMethodButton = (props) => {
 };
 
 PaymentMethod.propTypes = {
-  texts: PropTypes.object,
   wallet: PropTypes.bool,
   handlePaymentMethod: PropTypes.func
 };

package/src/blocks/Pricing/PricingPlans.js

@@ -58,6 +58,23 @@ export const PricingPlans = (props) => {
 };
 
 PricingPlans.propTypes = {
-  plans: PropTypes.array,
+  /**
+   * An array of the pricing plans
+   */
+  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/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

@@ -12,8 +12,17 @@ export const HawaAlert = (props) => {
   );
 };
 HawaAlert.propTypes = {
-  severity: PropTypes.string,
+  /**
+   * 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

@@ -20,6 +20,7 @@ const ColorInput = styled.input`
   }
 `;
 const ColorText = styled.input`
+  max-width: 70px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;

package/src/elements/HawaLogoButton.js

@@ -106,6 +106,23 @@ export const HawaLogoButton = (props) => {
 
 HawaLogoButton.propTypes = {
   lang: PropTypes.string,
-  logo: PropTypes.string,
+  /**
+   * The logo/icon of the button
+   */
+  logo: PropTypes.oneOf([
+    "google",
+    "github",
+    "twitter",
+    "wallet",
+    "googlepay",
+    "applepay",
+    "stcpay",
+    "visa/master",
+    "paypal",
+    "mada"
+  ]),
+  /**
+   * The text next to the logo in the button
+   */
   buttonText: PropTypes.string
 };

package/src/elements/HawaPopMenu.js

@@ -41,5 +41,11 @@ export const HawaPopMenu = (props) => {
 
 HawaPopMenu.propTypes = {
   handleClose: PropTypes.func,
-  menuItems: PropTypes.array
+  menuItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.element,
+      label: PropTypes.string,
+      action: PropTypes.func
+    })
+  )
 };

package/src/elements/HawaPricingCard.js

@@ -4,6 +4,7 @@ import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import CheckIcon from "@mui/icons-material/CheckCircleOutlined";
 import PropTypes from "prop-types";
+import Chip from "@mui/material/Chip";
 
 export const HawaPricingCard = (props) => {
   let isArabic = props.lang === "ar";
@@ -24,6 +25,7 @@ export const HawaPricingCard = (props) => {
     sar: isArabic ? "ريال" : "SAR"
   };
   let featuresMapping = isArabic ? props.features_ar : props.features;
+  let chipSpacing = isArabic ? { left: 10 } : { right: 10 };
   return (
     <Container
       maxWidth="xs"
@@ -31,6 +33,19 @@ export const HawaPricingCard = (props) => {
       style={{ direction: isArabic ? "rtl" : "ltr" }}
     >
       <Container variant="plan-header">
+        {props.discount && (
+          <Chip
+            label={props.discount}
+            variant="standard"
+            style={{
+              maxWidth: "fit-content",
+              position: "absolute",
+              bottom: 10,
+              ...chipSpacing
+            }}
+            color="success"
+          />
+        )}
         <Typography variant="h3" fontWeight={500}>
           {isArabic ? props.title_ar : props.title}
         </Typography>
@@ -144,5 +159,7 @@ HawaPricingCard.propTypes = {
   subtitle: PropTypes.string,
   subtitle_ar: PropTypes.string,
   features: PropTypes.array,
-  features_ar: PropTypes.array
+  features_ar: PropTypes.array,
+  currency: PropTypes.oneOf(["sar", "usd"]),
+  cycleText: PropTypes.oneOf(["monthly", "3-months", "6-months", "annually"])
 };

package/src/elements/HawaRadio.js

@@ -31,7 +31,12 @@ export const HawaRadio = (props) => {
 };
 HawaRadio.propTypes = {
   lang: PropTypes.string,
-  options: PropTypes.array,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.string
+    })
+  ),
   defaultValue: PropTypes.string,
   handleChange: PropTypes.func,
   location: PropTypes.string

package/src/elements/HawaRange.js

@@ -0,0 +1,31 @@
+import React from "react";
+import Slider from "@mui/material/Slider";
+import Stack from "@mui/material/Stack";
+import PropTypes from "prop-types";
+
+export const HawaRange = (props) => {
+  return (
+    <Stack spacing={2} direction="row" alignItems="center" style={props.style}>
+      {props.startElement}
+      <Slider
+        size="small"
+        aria-label="Volume"
+        value={props.value}
+        onChange={props.handleChange}
+      />
+      {props.endElement}
+    </Stack>
+  );
+};
+HawaRange.propTypes = {
+  /**
+   * The element at the side where the range value is 0
+   * Can be an icon
+   */
+  startElement: PropTypes.element,
+  /**
+   * The element at the side where the range value is 100
+   */
+  endElement: PropTypes.element,
+  handleChange: PropTypes.func
+};

package/src/elements/HawaSearchBar.js

@@ -0,0 +1,17 @@
+import { Search } from "@mui/icons-material";
+import { InputAdornment } from "@mui/material";
+import React from "react";
+import { HawaTextField } from "./HawaTextField";
+
+export const HawaSearchBar = (props) => {
+  return (
+    <HawaTextField
+      endAdornment={
+        <InputAdornment position="start">
+          <Search />
+        </InputAdornment>
+      }
+      {...props}
+    />
+  );
+};

package/src/elements/HawaSettingsRow.js

@@ -7,6 +7,7 @@ import { HawaTextField } from "./HawaTextField";
 import { HawaRadio } from "./HawaRadio";
 import { HawaSwitch } from "./HawaSwitch";
 import { HawaColorPicker } from "./HawaColorPicker";
+import { HawaRange } from "./HawaRange";
 
 export const HawaSettingsRow = (props) => {
   return (
@@ -14,16 +15,23 @@ export const HawaSettingsRow = (props) => {
       <HawaTypography>{props.settingsLabel}</HawaTypography>
       {props.settingsType === "checkbox" && <Checkbox {...props} />}
       {props.settingsType === "text" && <HawaTextField {...props} />}
+      {props.settingsType === "boolean" && <HawaSwitch {...props} />}
+      {props.settingsType === "range" && <HawaRange {...props} />}
+      {props.settingsType === "color" && <HawaColorPicker {...props} />}
       {props.settingsType === "radio" && (
         <HawaRadio location="inSettings" {...props} />
       )}
-      {props.settingsType === "boolean" && <HawaSwitch {...props} />}
-      {props.settingsType === "color" && <HawaColorPicker {...props} />}
     </Container>
   );
 };
 
 HawaSettingsRow.propTypes = {
-  type: PropTypes.oneOf(["checkbox", "text", "radio", "boolean", "color"]),
-  helperText: PropTypes.string
+  settingsLabel: PropTypes.string,
+  settingsType: PropTypes.oneOf([
+    "checkbox",
+    "text",
+    "radio",
+    "boolean",
+    "color"
+  ])
 };

package/src/elements/{OfflineBanner.js → HawaSnackbar.js}

@@ -3,15 +3,10 @@ import Snackbar from "@mui/material/Snackbar";
 import AlertTitle from "@mui/material/AlertTitle";
 import Alert from "@mui/material/Alert";
 
-export const OfflineBanner = (props) => {
+export const HawaSnackbar = (props) => {
   return (
-    <Snackbar
-      variant="danger"
-      // style={{ outline: "1px solid red" }}
-      open={props.open}
-      onClose={props.handleClose}
-    >
-      <Alert icon={false} severity={"error"} variant="offline">
+    <Snackbar open={props.open} onClose={props.handleClose}>
+      <Alert icon={false} severity={props.severity}>
         {props.title && <AlertTitle>{props.title}</AlertTitle>}
         {props.text}
       </Alert>