@sikka/hawa 0.0.104 → 0.0.106

package/lib/layout/HawaContainer.d.ts

@@ -2,6 +2,8 @@ import React from "react";
 type ContainerTypes = {
     maxWidth?: "full" | "small" | "normal";
     children: React.ReactNode;
+    variant?: "contained" | "outlined";
+    centered?: boolean;
 };
 export declare const HawaContainer: React.FunctionComponent<ContainerTypes>;
 export {};

package/package.json

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

package/src/blocks/Misc/EmptyState.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import { HawaButton } from "../../elements"
+import { HawaContainer } from "../../layout"
+import { FaCheck } from "react-icons/fa"
+type TEmptyState = {}
+
+export const EmptyState: React.FunctionComponent<TEmptyState> = (props) => {
+  return (
+    <HawaContainer variant="outlined" centered={true}>
+      <div className="flex h-20 w-20 flex-col items-center justify-center rounded-3xl bg-primary-400 text-6xl font-bold">
+        <FaCheck size={30} />
+      </div>
+      <div className="m-2 text-center text-xl font-bold">
+        You're all caught up
+      </div>
+      <div className="text-center">
+        If you're lost please contact us help@sikka.io{" "}
+      </div>
+      <HawaButton color="primary" width="full">
+        Action
+      </HawaButton>
+    </HawaContainer>
+  )
+}

package/src/blocks/Misc/NotFound.tsx

@@ -6,23 +6,26 @@ type NotFoundTypes = {}
 
 export const NotFound: React.FunctionComponent<NotFoundTypes> = (props) => {
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-      }}
-    >
-      <div className="text-6xl font-bold">404</div>
-      <div className="m-2 text-xl font-bold">Page Not Found</div>
-      <HawaContainer>
+    <HawaContainer variant="outlined">
+      <div
+        // style={{
+        //   display: "flex",
+        //   flexDirection: "column",
+        //   alignItems: "center",
+        // }}
+        className="flex flex-col items-center"
+      >
+        <div className="text-center text-6xl font-bold">404</div>
+        <div className="m-2 text-center text-xl font-bold">Page Not Found</div>
         <div className="text-center">
           If you're lost please contact us help@sikka.io{" "}
         </div>
+        {/* <div className="flex flex-col content-center items-stretch bg-red-200"> */}
         <HawaButton color="primary" width="full">
           Home
         </HawaButton>
-      </HawaContainer>
-    </div>
+        {/* </div> */}
+      </div>
+    </HawaContainer>
   )
 }

package/src/blocks/Misc/index.ts

@@ -1 +1,2 @@
-export * from "./NotFound";
+export * from "./NotFound"
+export * from "./EmptyState"

package/src/elements/HawaAccordian.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx"
 import React from "react"
 
 type AccordionItemTypes = {
@@ -18,12 +19,17 @@ const AccordionItem: React.FunctionComponent<AccordionItemTypes> = (props) => {
     "p-5 font-light border border-b-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900"
   let accPaperRounded =
     "p-5 font-light border border-b-xl rounded-b-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900"
+
   return (
-    <div>
+    <div className="rounded-lg ">
       <h2 id={"accordion-collapse-heading-" + props.count}>
         <button
           type="button"
-          className={props.count === 0 ? roundedTop : noRounding}
+          className={clsx(
+            // props.count === 0 ? roundedTop : noRounding,
+            "flex w-full items-center justify-between border border-gray-200 bg-gray-100 p-5 text-left font-medium text-gray-900 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-800 dark:focus:ring-gray-800",
+            !collapse ? "rounded-t-lg" : "rounded-lg"
+          )}
           onClick={() => setCollapse(!collapse)}
           data-accordion-target={"#accordion-collapse-body-" + props.count}
           aria-expanded="true"
@@ -32,7 +38,7 @@ const AccordionItem: React.FunctionComponent<AccordionItemTypes> = (props) => {
           <span>{props.title}</span>
           <svg
             data-accordion-icon=""
-            className={`h-6 w-6 ${collapse ? "" : "rotate-180"}  shrink-0`}
+            className={`h-6 w-6 ${collapse ? "" : "rotate-180"}  shrink-0 transition-all`}
             fill="currentColor"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
@@ -47,14 +53,15 @@ const AccordionItem: React.FunctionComponent<AccordionItemTypes> = (props) => {
       </h2>
       <div
         id={"accordion-collapse-body-" + props.count}
-        className={`${collapse ? "hidden" : "block"}`}
+        className={clsx(
+          collapse ? "invisible hidden" : "visible",
+          "border-b-xl rounded-b-xl border border-gray-200 p-5 font-light dark:border-gray-700 dark:bg-gray-900"
+        )}
         aria-labelledby={"accordion-collapse-heading-" + props.count}
       >
-        <div className={props.count === -1 ? accPaperRounded : accPaper}>
-          <p className="mb-2 text-gray-500 dark:text-gray-400">
-            {props.content}
-          </p>
-        </div>
+        {/* <div className={props.count === -1 ? accPaperRounded : accPaper}> */}
+        <p className="mb-2 text-gray-500 dark:text-gray-400">{props.content}</p>
+        {/* </div> */}
       </div>
     </div>
   )
@@ -66,7 +73,11 @@ export const HawaAccordian: React.FunctionComponent<AccordionTypes> = (
   props
 ) => {
   return (
-    <div id="accordion-collapse" data-accordion="collapse">
+    <div
+      id="accordion-collapse"
+      data-accordion="collapse"
+      className="flex flex-col gap-3"
+    >
       {props.content.map((acc: any, i: any) => {
         return (
           <AccordionItem

package/src/elements/HawaButton.tsx

@@ -5,7 +5,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "contained" | "outlined"
   color?: "default" | "primary" | "secondary"
   width?: "full" | "normal" | "half"
-  size?: "small" | "medium" | "large"
+  size?: "small" | "medium" | "large" | "noPadding"
   tooltip?: string
   isLoading?: boolean
 }
@@ -16,6 +16,7 @@ const sizeStyles = {
   small: "text-xs px-2.5 py-1.5",
   medium: "text-sm leading-4 px-3 py-2",
   large: "text-sm px-4 py-2",
+  noPadding: "p-0",
 }
 
 const widthStyles = {

package/src/elements/HawaCardInput.tsx

@@ -0,0 +1,317 @@
+import React, { useState } from "react"
+import { HawaButton } from "./HawaButton"
+
+const CARDS = {
+  mada: "^(4(0(0861|1757|3024|6136|6996|7(197|395)|9201)|1(0621|0685|2565|7633|9593)|2(281(7|8|9)|0(132)|1(141)|6(897)|8(1|331|67(1|2|3)))|3(1361|2328|4107|9954)|4(0(533|647|795)|5564|6(393|404|672))|5(5(036|708)|7865|7997|8456)|6(2220|854(0|1|2|3))|7(4491)|8(301(0|1|2)|4783|609(4|5|6)|931(7|8|9))|93428)|5(0(4300|6968|8160)|13213|2(0058|1076|4(130|514)|9(415|741))|3(0060|0906|1095|1196|2013|5(825|989)|6023|7767|9931)|4(3(085|357)|9760)|5(4180|7606|8563|8848)|8(5265|8(8(4(5|6|7|8|9)|5(0|1))|98(2|3))|9(005|206)))|6(0(4906|5141)|36120)|9682(0(1|2|3|4|5|6|7|8|9)|1(0|1)))",
+  visa: "^4",
+  amex: "^(34|37)",
+  mastercard: "^5[1-5]",
+  discover: "^6011",
+  unionpay: "^62",
+  troy: "^9792",
+  diners: "^(30[0-5]|36)",
+}
+
+const currentYear = new Date().getFullYear()
+const monthsArr = Array.from({ length: 12 }, (x, i) => {
+  const month = i + 1
+  return month <= 9 ? "0" + month : month
+})
+const yearsArr = Array.from({ length: 9 }, (_x, i) => currentYear + i)
+
+export const HawaCardInput = ({
+  cardHolder,
+  cardMonth,
+  cardYear,
+  cardCvv,
+  rememberMe,
+  onUpdateState,
+  cardNumberRef,
+  cardHolderRef,
+  cardDateRef,
+  cardCvvRef,
+  rememberMeRef,
+  onCardInputFocus,
+  onCardInputBlur,
+  children,
+  handlePaymentPayfort,
+  selectedPaymentMethod,
+  isRegister,
+  accessCode,
+  shaRequestPassphrase,
+  transaction,
+  signature,
+  isCheckout,
+}) => {
+  //   const token = getToken()
+  //   const router = useRouter()
+  //   const formRegister = useRef()
+  //   const [loading, setLoading] = useState(false)
+  const [cardNumber, setCardNumber] = useState("")
+  const [expiryDate, setExpiryDate] = useState("")
+  const [binCardType, setBinCardType] = useState("")
+  //   const [tokenName, setTokenName] = useState("")
+  //   const [registeredCard, setRegisteredCard] = useState("")
+  const [registerSignature, setRegisterSignature] = useState("")
+  const [card, setCard] = useState("")
+  //   const [payfortForm, setPayfortForm] = useState("")
+  //   const classes = useStyles()
+  //   const [value, setValue] = React.useState("")
+  //   const [error, setError] = React.useState(false)
+  //   const [helperText, setHelperText] = React.useState("Choose wisely")
+
+  //   const { data: allCards, loading: loadingCards } = useQuery(getCards(), {
+  //     variables: { userId: token.User._id },
+  //   })
+
+  //   const { t, lang } = useTranslation("common")
+
+  const cardType = (cardNumber) => {
+    const number = cardNumber.replace(/\D/g, "")
+    let re
+    for (const [card, pattern] of Object.entries(CARDS)) {
+      re = new RegExp(pattern)
+      console.log("number=", number)
+      console.log("card=", card)
+      console.log("pattern=", pattern)
+      console.log("res=", re.test(number))
+      if (number.match(re) != null) {
+        return card
+      }
+    }
+
+    return "" // default type
+  }
+
+  // TODO: We can improve the regex check with a better approach like in the card component.
+  const onCardNumberChange = (event) => {
+    let { value, name } = event.target
+    let cardNumber = value
+    value = value.replace(/\D/g, "")
+    if (/^3[47]\d{0,13}$/.test(value)) {
+      cardNumber = value
+        .replace(/(\d{4})/, "$1 ")
+        .replace(/(\d{4}) (\d{6})/, "$1 $2 ")
+    } else if (/^3(?:0[0-5]|[68]\d)\d{0,11}$/.test(value)) {
+      // diner's club, 14 digits
+      cardNumber = value
+        .replace(/(\d{4})/, "$1 ")
+        .replace(/(\d{4}) (\d{6})/, "$1 $2 ")
+    } else if (/^\d{0,16}$/.test(value)) {
+      // regular cc number, 16 digits
+      cardNumber = value
+        .replace(/(\d{4})/, "$1 ")
+        .replace(/(\d{4}) (\d{4})/, "$1 $2 ")
+        .replace(/(\d{4}) (\d{4}) (\d{4})/, "$1 $2 $3 ")
+    }
+
+    setCardNumber(cardNumber.trimRight())
+    setBinCardType(cardType(cardNumber.trimRight()))
+    onUpdateState(name, cardNumber)
+  }
+  const handleFormChange = (event) => {
+    const { name, value } = event.target
+    if (name === "rememberMe") {
+      onUpdateState(name, !rememberMe)
+    } else {
+      onUpdateState(name, value)
+    }
+  }
+
+  return (
+    <div>
+      <div>
+        <div>{children}</div>
+        <div>
+          <div className="w-fit bg-red-200 p-2">
+            <label htmlFor="cardNumber" className="relative">
+              Card Number
+              <input
+                type="tel"
+                name="cardNumber"
+                className="mb-0 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+                autoComplete="off"
+                onChange={onCardNumberChange}
+                maxLength={19}
+                ref={cardNumberRef}
+                onFocus={(e) => onCardInputFocus(e, "cardNumber")}
+                onBlur={onCardInputBlur}
+                value={cardNumber}
+              />
+              {/* {binCardType && (
+                  <img className="bg-red-700" src={`/${binCardType}.png`} />
+                )} */}
+              <img
+                className="absolute right-2 top-1/2 translate-y-1/2 bg-red-700"
+                src={`../Assets/images/card-type/${binCardType}.png`}
+              />
+            </label>
+          </div>
+
+          <div className="flex w-fit flex-col bg-red-300 p-2">
+            <label htmlFor="cardName" className="card-input__label">
+              Card Holder{" "}
+            </label>
+            <input
+              type="text"
+              //   className="card-input__input"
+              className="mb-0 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+              autoComplete="off"
+              name="cardHolder"
+              onChange={handleFormChange}
+              ref={cardHolderRef}
+              onFocus={(e) => onCardInputFocus(e, "cardHolder")}
+              onBlur={onCardInputBlur}
+            />
+          </div>
+
+          <div className="flex w-fit flex-col bg-red-400 p-2">
+            <div className="flex flex-col">
+              <label htmlFor="cardMonth" className="card-input__label">
+                Expiration
+              </label>
+              <div className="flex flex-row gap-2">
+                <select
+                  className="rounded-lg p-2.5"
+                  value={cardMonth}
+                  name="cardMonth"
+                  onChange={handleFormChange}
+                  ref={cardDateRef}
+                  onFocus={(e) => onCardInputFocus(e, "cardDate")}
+                  onBlur={onCardInputBlur}
+                >
+                  <option value="" disabled>
+                    Month
+                  </option>
+
+                  {monthsArr.map((val, index) => (
+                    <option key={index} value={val}>
+                      {val}
+                    </option>
+                  ))}
+                </select>
+                <select
+                  name="cardYear"
+                  className="rounded-lg p-2.5"
+                  value={cardYear}
+                  onChange={handleFormChange}
+                  onFocus={(e) => onCardInputFocus(e, "cardDate")}
+                  onBlur={onCardInputBlur}
+                >
+                  <option value="" disabled>
+                    Year
+                  </option>
+
+                  {yearsArr.map((val, index) => (
+                    <option key={index} value={val}>
+                      {val}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+          </div>
+          <div className="flex w-fit flex-col bg-red-500 p-2">
+            <label htmlFor="cardCvv">CCV</label>
+            <input
+              type="tel"
+              className="mb-0 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+              maxLength={4}
+              autoComplete="off"
+              name="cardCvv"
+              onChange={handleFormChange}
+              //   onFocus={onCvvFocus}
+              //   onBlur={onCvvBlur}
+              ref={cardCvvRef}
+            />
+          </div>
+          {isCheckout && (
+            <div className="card-input">
+              <label htmlFor="rememberMe" className="card-input__label">
+                <input
+                  type="checkbox"
+                  autoComplete="off"
+                  name="rememberMe"
+                  checked={rememberMe}
+                  onChange={handleFormChange}
+                  ref={rememberMeRef}
+                />
+                Store Payment Details{" "}
+              </label>
+            </div>
+          )}
+          <div className="card-input" style={{ marginTop: "20px" }}>
+            <form
+              onSubmit={(e) => e.preventDefault()}
+              //   ref={(ref) => setPayfortForm(ref)}
+              id="formSendToAps"
+              action={`${process.env.NEXT_PUBLIC_QAWAIM_PAYFORT_ENVIRONMENT_URL}`}
+              method="POST"
+            >
+              <input type="hidden" name="access_code" value={accessCode} />
+              <input
+                type="hidden"
+                name="merchant_identifier"
+                value={`${process.env.NEXT_PUBLIC_QAWAIM_PAYFORT_MERCHANT_ID}`}
+              />
+              <input type="hidden" name="language" value={"en"} />
+              <input
+                type="hidden"
+                name="card_number"
+                value={cardNumber.replace(/\s/g, "")}
+              />
+              <input type="hidden" name="expiry_date" value={expiryDate} />
+              <input
+                type="hidden"
+                name="signature"
+                value={isCheckout ? signature : registerSignature}
+              />
+              <input type="hidden" name="card_holder_name" value={cardHolder} />
+              <input
+                type="hidden"
+                name="merchant_reference"
+                // value={isCheckout ? transaction?._id : card?._id}
+              />
+              <input
+                type="hidden"
+                name="service_command"
+                value={isCheckout ? "TOKENIZATION" : "CREATE_TOKEN"}
+              />
+              <input
+                type="hidden"
+                name="return_url"
+                // value={
+                //   isCheckout
+                //     ? `${process.env.NEXT_PUBLIC_QAWAIM_USER_PORTAL_URL}/aps_online/response`
+                //     : `${process.env.NEXT_PUBLIC_QAWAIM_USER_PORTAL_URL}/aps_online/register`
+                // }
+              />
+              {!isCheckout && (
+                <input
+                  type="hidden"
+                  name="currency"
+                  //   value={token.User.default_currency?.toUpperCase()}
+                />
+              )}
+              {isCheckout && (
+                <>
+                  <input
+                    type="hidden"
+                    name="card_security_code"
+                    value={cardCvv}
+                  />
+
+                  {/* {tokenName && (
+                    <input type="hidden" name="token_name" value={tokenName} />
+                  )} */}
+                </>
+              )}
+
+              <HawaButton>Pay</HawaButton>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/elements/HawaItemCard.tsx

@@ -40,8 +40,9 @@ export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
     horizontal: "flex flex-row w-full",
   }
   let imageStyles = {
-    vertical: "w-full rounded-tr-lg rounded-tl-lg",
-    horizontal: "h-40 w-fit rounded-tl-lg rounded-bl-lg",
+    vertical: "h-auto max-h-56 w-full rounded-t-lg object-cover",
+    horizontal:
+      "h-auto w-full rounded-l-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg",
   }
   let headerActionsButtonStyle =
     "inline-block rounded-lg p-1 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
@@ -73,6 +74,8 @@ export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
           src={"https://via.placeholder.com/50"}
           // className=" h-full w-full max-w-sm bg-red-500  bg-[url('https://via.placeholder.com/50')] bg-cover bg-no-repeat"
           className={clsx(imageStyles[orientation])}
+          // className="h-40 w-fit rounded-tl-lg rounded-bl-lg bg-[url('https://via.placeholder.com/50')] bg-cover bg-no-repeat          "
+          // className="h-auto w-full rounded-l-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
         />
       )}
       <div className="relative w-full  px-6 pt-6">

package/src/elements/HawaMenu.tsx

@@ -36,7 +36,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
   children,
 }) => {
   let defaultStyles =
-    "border-2 border-blue-400 border-opacity-20 ring-offset-1 absolute z-10 w-44 divide-y divide-gray-100 overflow-y-clip rounded-lg bg-white shadow transition-all dark:bg-gray-700"
+    "border-none ring-offset-1 absolute z-10 w-44 divide-y divide-gray-100 overflow-y-clip rounded-lg bg-gray-50 shadow-lg transition-all dark:bg-gray-700"
   let positionStyles = {
     "top-right": "top-30 right-0",
     "top-left": "top-30 left-0",
@@ -44,8 +44,8 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
     "bottom-left": "bottom-30 left-0",
   }
   let animationStyles = {
-    opened: "max-h-72 animate-expandDown",
-    closed: "max-h-0 opacity-0 animate-expandUp",
+    opened: "max-h-fit",
+    closed: "h-0 ",
   }
   return (
     <div className="relative w-fit " onClick={() => handleClose(!open)}>

package/src/elements/HawaRadio.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx"
 import React, { useState } from "react"
 
 type RadioTypes = {
@@ -8,15 +9,22 @@ type RadioTypes = {
 export const HawaRadio: React.FunctionComponent<RadioTypes> = (props) => {
   const [selectedOption, setSelectedOption] = useState(props.defaultValue)
   let activeTabStyle =
-    "inline-block py-2 px-4 text-white bg-blue-600 rounded-lg active"
+    "inline-block py-2 px-4  w-full text-white bg-blue-600 rounded-lg active"
   let inactiveTabStyle =
-    "inline-block py-2 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
+    "inline-block py-2 px-4 w-full bg-gray-100 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
 
   return (
     <div>
-      <ul className="flex w-fit flex-wrap rounded-lg bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400">
+      <ul
+        className={clsx(
+          props.options.length > 2
+            ? "flex-wrap xs:max-w-full xs:flex-nowrap"
+            : "",
+          "flex max-w-fit flex-row whitespace-nowrap rounded-lg bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400"
+        )}
+      >
         {props.options?.map((opt: any) => (
-          <li>
+          <li className="w-full">
             <button
               aria-current="page"
               onClick={() => {

package/src/elements/HawaSwitch.tsx

@@ -17,9 +17,11 @@ export const HawaSwitch: React.FunctionComponent<SwitchTypes> = (props) => {
         className="peer sr-only"
       />
       <div className="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"></div>
-      <span className="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">
-        {props.text}
-      </span>
+      {props.text && (
+        <span className="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+          {props.text}
+        </span>
+      )}
     </label>
   )
 }