@sikka/hawa 0.0.23 → 0.0.26

package/src/blocks/Payment/CreditCardForm.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { HawaTextField } from "../../elements";
-import { FormProvider, useForm } from "react-hook-form";
+import { Controller, FormProvider, useForm } from "react-hook-form";
 import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
 
@@ -8,59 +8,109 @@ export const CreditCardForm = (props) => {
   const methods = useForm();
   const {
     formState: { errors },
-    handleSubmit
+    handleSubmit,
+    control
   } = methods;
 
   return (
     <Container maxWidth="xs">
-      <FormProvider {...methods}>
-        <form onSubmit={handleSubmit(props.handle)}>
-          <HawaTextField
-            fullWidth
-            name="password"
-            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}
-          />
+      <form onSubmit={handleSubmit(props.handle)}>
+        <HawaTextField
+          fullWidth
+          name="password"
+          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}
+        />
 
-          <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}
-          />
+       
+        <Controller
+          control={control}
+          name="cardName"
+          render={({ field }) => (
+            <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}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="cardName"
+          render={({ field }) => (
+            <HawaTextField
+              fullWidth
+              name="password"
+              placeholder="Enter password"
+              type="password"
+              label="Expiry Date"
+              // startAdornment={
+              //   <InputAdornment position="start">
+              //     <PasswordIcon />
+              //   </InputAdornment>
+              // }
+              rules={{
+                required: "Password is rquired"
+              }}
+              helperText={errors.password?.message}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="cardName"
+          render={({ field }) => (
+            <HawaTextField
+              fullWidth
+              name="password"
+              placeholder="Enter password"
+              type="password"
+              label="CCV"
+              // 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>
+        <Button
+          type="submit"
+          fullWidth
+          variant="last"
+          onClick={props.handlePayWithCreditCard}
+        >
+          {/* {props.texts.signInText} */}
+          {"Pay with Credit Card"}
+        </Button>
+      </form>
     </Container>
   );
 };

package/src/elements/HawaAlert.js

@@ -4,7 +4,7 @@ import AlertTitle from "@mui/material/AlertTitle";
 
 export const HawaAlert = (props) => {
   return (
-    <Alert severity={props.severity}>
+    <Alert severity={props.severity} icon={props.hideIcon}>
       {props.title && <AlertTitle>{props.title}</AlertTitle>}
       {props.text}
     </Alert>

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

@@ -0,0 +1,56 @@
+import React from "react";
+import Container from "@mui/material/Container";
+import Button from "@mui/material/Button";
+
+export const HawaItemCard = (props) => {
+  let isArabic = props.lang === "ar";
+  const handleParentClick = (e) => {
+    e.stopPropagation();
+    props.onCardClick();
+  };
+  return (
+    <Container
+      onClick={handleParentClick}
+      maxWidth="xs"
+      variant="card-container"
+      dataValue="parent"
+      //   variant={props.selectedPlan ? "selected-plan-card" : "plan-card"}
+      style={{ direction: isArabic ? "rtl" : "ltr" }}
+    >
+      {props.header && (
+        <Container style={{ zIndex: 20 }} variant="card-header">
+          {props.headerActions && (
+            <div
+              style={{
+                margin: 0,
+                marginRight: -20,
+                marginLeft: -20,
+                marginBottom: -20,
+                // backgroundColor: "red",
+                display: "flex",
+                paddingTop: 5,
+                paddingLeft: 5,
+                paddingRight: 5,
+                justifyContent: "flex-end"
+              }}
+            >
+              {props.headerActions}
+            </div>
+          )}
+          {props.header}
+        </Container>
+      )}
+      {props.content && (
+        <Container style={{ zIndex: 20 }} variant="card-content">
+          {props.content}
+        </Container>
+      )}
+
+      {props.actions && (
+        <Container style={{ zIndex: 20 }} variant="card-actions">
+          {props.actions}
+        </Container>
+      )}
+    </Container>
+  );
+};

package/src/elements/TabPanel.js

@@ -8,7 +8,6 @@ const useStyles = makeStyles((theme) => ({
   },
   panel: {
     backgroundColor: "var(--lightGrey)",
-    // borderRadius: "var(--borderR)",
     height: "100%",
     width: "100%",
     padding: 10

package/src/elements/index.js

@@ -1,7 +1,9 @@
 export * from "./AdaptiveButton";
 export * from "./ActionButton";
+export * from "./OfflineBanner";
 export * from "./HawaCheckbox";
 export * from "./HawaRadio";
+export * from "./HawaItemCard";
 export * from "./HawaPricingCard";
 export * from "./HawaSettingsRow";
 export * from "./HawaLogoButton";
@@ -12,4 +14,3 @@ export * from "./HawaInputLabel";
 export * from "./HawaTypography";
 export * from "./HawaAlert";
 export * from "./HawaTable";
-export * from "./OfflineBanner";

package/src/index.js

@@ -1,3 +1,5 @@
 export * from "./blocks/Account";
 export * from "./blocks/AuthForms";
 export * from "./blocks/Payment";
+export * from "./elements";
+export * from "./layout";

package/src/layout/Box.js

@@ -1,41 +1,5 @@
 import React from "react";
 
 export const Box = (props) => {
-  // 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,
-  //   };
-  // }
-
-  return (
-    <div
-    // style={boxStyle}
-    >
-      {props.children}
-    </div>
-  );
+  return <div>{props.children}</div>;
 };