@sikka/hawa 0.0.25 → 0.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.25",
+  "version": "0.0.28",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/blocks/Account/UserProfileForm.js

@@ -77,7 +77,6 @@ export const UserProfileForm = (props) => {
                 value={field.value ?? ""}
                 label={props.texts.passwordLabel}
                 placeholder={props.texts.passwordPlaceholder}
-                // onChange={(e) => setNewPassword(e.target.value)}
                 helperText={errors.password?.message}
                 {...field}
               />
@@ -96,7 +95,6 @@ export const UserProfileForm = (props) => {
                 value={field.value ?? ""}
                 label={props.texts.confirmPasswordLabel}
                 placeholder={props.texts.confirmPasswordPlaceholder}
-                // onChange={(e) => setConfirmPassword(e.target.value)}
                 helperText={errors.confirmPassword?.message}
                 {...field}
               />
@@ -106,8 +104,8 @@ export const UserProfileForm = (props) => {
             }}
           />
           <Button type="submit" fullWidth variant="last">
-            update profile
-          </Button>{" "}
+            {props.texts.updateProfile}
+          </Button>
         </form>
       </FormProvider>
     </Container>

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,7 @@ export const NewPasswordForm = (props) => {
     </Container>
   );
 };
+NewPasswordForm.propTypes = {
+  texts: PropTypes.object,
+  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,8 @@ export const ResetPasswordForm = (props) => {
     </Container>
   );
 };
+ResetPasswordForm.propTypes = {
+  texts: PropTypes.object,
+  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,14 @@ export const SignInForm = (props) => {
     </Container>
   );
 };
+SignInForm.propTypes = {
+  texts: PropTypes.object,
+  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
@@ -166,9 +164,13 @@ export const SignUpForm = (props) => {
 };
 
 SignUpForm.propTypes = {
-  theme: PropTypes.oneOf(["secondary", "primary"])
-  // buttonLabel: PropTypes.string,
-  // danger: PropTypes.bool,
-  // disabled: PropTypes.bool,
-  // showText: PropTypes.bool
+  texts: PropTypes.object,
+  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,15 @@ 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.object,
+  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,12 @@ export const CheckoutForm = (props) => {
     </Container>
   );
 };
+
+CheckoutForm.propTypes = {
+  texts: PropTypes.object,
+  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,18 @@ export const ConfirmationPage = (props) => {
     </div>
   );
 };
+
+ConfirmationPage.propTypes = {
+  texts: PropTypes.object,
+  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

@@ -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,7 +78,7 @@ const PaymentMethodButton = (props) => {
         opacity: props.chip ? 0.7 : 1,
         padding: 20,
         width: "90%",
-        margin: 10,
+        margin: 10
       }}
       onClick={(e) => props.handlePaymentMethod(e, props.methodCode)}
     >
@@ -128,4 +129,8 @@ const PaymentMethodButton = (props) => {
   );
 };
 
-export default PaymentMethod;
+PaymentMethod.propTypes = {
+  texts: PropTypes.object,
+  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,8 @@ export const PricingPlans = (props) => {
     </Container>
   );
 };
+
+PricingPlans.propTypes = {
+  plans: PropTypes.array,
+  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/HawaAlert.js

@@ -1,12 +1,19 @@
 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 (
-    <Alert severity={props.severity} variant="inContainer">
+    <Alert severity={props.severity} icon={props.hideIcon}>
       {props.title && <AlertTitle>{props.title}</AlertTitle>}
       {props.text}
     </Alert>
   );
 };
+HawaAlert.propTypes = {
+  severity: PropTypes.string,
+  title: PropTypes.string,
+  text: PropTypes.string,
+  hideIcon: PropTypes.bool
+};

package/src/elements/HawaButton.js

@@ -1,47 +1,6 @@
 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/HawaCheckbox.js

@@ -1,7 +1,6 @@
 import React from "react";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
-// import PropTypes from "prop-types";
 
 export const HawaCheckbox = (props) => {
   console.log("props : ", props);

package/src/elements/HawaInputLabel.js

@@ -1,30 +1,8 @@
 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}
-    >
+    <InputLabel>
       <div style={{ fontSize: 15 }}>{props.label}</div>
     </InputLabel>
   );

package/src/elements/HawaItemCard.js

@@ -1,15 +1,11 @@
 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";
   const handleParentClick = (e) => {
     e.stopPropagation();
-    // let dValue = e.currentTarget;
-    // console.log("d value ", dValue);
-    console.log("clicking parent");
-
     props.onCardClick();
   };
   return (
@@ -58,3 +54,7 @@ export const HawaItemCard = (props) => {
     </Container>
   );
 };
+HawaItemCard.propTypes = {
+  lang: PropTypes.string,
+  onCardClick: PropTypes.func,
+};

package/src/elements/HawaLogoButton.js

@@ -4,8 +4,10 @@ import GitHubIcon from "@mui/icons-material/GitHub";
 import TwitterIcon from "@mui/icons-material/Twitter";
 import WalletIcon from "@mui/icons-material/AccountBalanceWallet";
 import Typography from "@mui/material/Typography";
+import PropTypes from "prop-types";
 
 export const HawaLogoButton = (props) => {
+  let isArabic = props.lang === "ar";
   let logoElement = "";
   switch (props.logo?.toLowerCase()) {
     case "google":
@@ -79,7 +81,11 @@ export const HawaLogoButton = (props) => {
       break;
   }
   return (
-    <Button {...props} variant="withLogo">
+    <Button
+      style={{ direction: isArabic ? "rtl" : "ltr" }}
+      {...props}
+      variant="withLogo"
+    >
       {logoElement}
       <div style={{ width: 10 }} />
       <Typography
@@ -97,3 +103,9 @@ export const HawaLogoButton = (props) => {
     </Button>
   );
 };
+
+HawaLogoButton.propTypes = {
+  lang: PropTypes.string,
+  logo: PropTypes.string,
+  buttonText: PropTypes.string
+};

package/src/elements/HawaPopMenu.js

@@ -1,4 +1,5 @@
 import { MenuItem, Menu, Typography, useTheme } from "@mui/material";
+import PropTypes from "prop-types";
 
 export const HawaPopMenu = (props) => {
   const theme = useTheme();
@@ -37,3 +38,8 @@ export const HawaPopMenu = (props) => {
     </Menu>
   );
 };
+
+HawaPopMenu.propTypes = {
+  handleClose: PropTypes.func,
+  menuItems: PropTypes.array
+};

package/src/elements/HawaPricingCard.js

@@ -3,6 +3,8 @@ import Container from "@mui/material/Container";
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import CheckIcon from "@mui/icons-material/CheckCircleOutlined";
+import PropTypes from "prop-types";
+
 export const HawaPricingCard = (props) => {
   let isArabic = props.lang === "ar";
   let cycleTextsArabic = {
@@ -132,3 +134,15 @@ export const HawaPricingCard = (props) => {
     </Container>
   );
 };
+
+HawaPricingCard.propTypes = {
+  lang: PropTypes.string,
+  buttonText: PropTypes.string,
+  selectedPlan: PropTypes.string,
+  title: PropTypes.string,
+  title_ar: PropTypes.string,
+  subtitle: PropTypes.string,
+  subtitle_ar: PropTypes.string,
+  features: PropTypes.array,
+  features_ar: PropTypes.array
+};

package/src/elements/HawaRadio.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
+import PropTypes from "prop-types";
 
 export const HawaRadio = (props) => {
   const [value, setValue] = useState(props.defaultValue);
@@ -28,3 +29,9 @@ export const HawaRadio = (props) => {
     </Container>
   );
 };
+HawaRadio.propTypes = {
+  lang: PropTypes.string,
+  options: PropTypes.array,
+  defaultValue: PropTypes.string,
+  location: PropTypes.string
+};