@sikka/hawa 0.1.7 → 0.1.8-beta

package/src/elements/HawaButton.tsx

@@ -1,241 +0,0 @@
-import React, { FC, ButtonHTMLAttributes, useState } from "react"
-import clsx from "clsx"
-import { HawaLoading } from "./HawaLoading"
-import { HawaTooltip } from "./HawaTooltip"
-
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "contained" | "outlined"
-  feedback?: string
-  tooltipDirection?: "rtl" | "ltr"
-  color?: "default" | "primary" | "secondary" | "light" | "dark"
-  width?: "full" | "normal" | "half"
-  size?: "xs" | "small" | "medium" | "large" | "noPadding" | "full" | "icon"
-  margins?: "none" | "1" | "2" | "3" | "4"
-  tooltip?: string
-  tooltipSize?: "normal" | "small" | "large"
-  tooltipPosition?:
-    | "left-top"
-    | "left-bottom"
-    | "right-top"
-    | "right-bottom"
-    | "top-right"
-    | "top-left"
-    | "bottom-right"
-    | "bottom-left"
-  startIcon?: any
-  endIcon?: any
-  isLoading?: boolean
-  badge?: any
-  edgeCorner?: any
-  disabled?: boolean
-}
-
-const disabledSyles = "cursor-default pointer-events-none"
-const disabledVariantSyles = {
-  contained: "text-gray-300 bg-gray-100",
-  outlined: "text-gray-300 border-gray-300",
-}
-const baseStyles =
-  "cursor-pointer  justify-center items-center text-center font-medium transition-all "
-const sizeStyles = {
-  icon: "h-10 w-10",
-  xs: "px-1.5 py-2 text-[9px] h-fit",
-  small: "text-xs px-2.5 py-1.5",
-  medium: "text-sm leading-4 px-3 py-2",
-  default: "h-10 px-4 py-2",
-  large: "text-sm px-4 py-2",
-  noPadding: "p-0",
-  full: "h-full max-h-full p-2",
-}
-const widthStyles = {
-  full: "w-full flex justify-center px-5 py-2.5 text-center inline-flex items-center",
-  half: "w-full text-center flex items-center justify-center h-full",
-  normal:
-    "w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-700 dark:hover:brightness-90 dark:focus:ring-buttonPrimary-500",
-}
-const containerWidthStyles = {
-  full: "w-full flex justify-center text-center inline-flex items-center",
-  half: "w-1/2",
-  normal: "w-fit",
-}
-const variantStyles = {
-  contained: "border-transparent",
-  // outlined: "bg-transparent border",
-  outlined:
-    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-}
-const colorStyles = {
-  contained: {
-    default:
-      "text-neutral-900 bg-buttonPrimary-500 hover:bg-buttonPrimary-700 bg-buttonPrimary-500 text-white",
-    primary:
-      "text-white bg-buttonPrimary-500 hover:bg-buttonPrimary-700 transition-all",
-    secondary:
-      "bg-buttonSecondary-500 hover:text-white hover:bg-buttonSecondary-700",
-    gray: "text-neutral-900 bg-gray-200 hover:bg-gray-300",
-    dark: "text-neutral-900 bg-gray-200 hover:bg-gray-300",
-  },
-  outlined: {
-    default:
-      "text-gray-600 border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-800 dark:text-white",
-    primary: "text-black hover:bg-gray-50  dark:text-white",
-    secondary:
-      " dark:text-white text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-700 hover:text-white",
-    gray: "border-gray-300 hover:bg-gray-200",
-    dark: "border-gray-900 hover:bg-gray-700",
-  },
-}
-
-export const HawaButton: FC<ButtonProps> = ({
-  className,
-  variant = "contained",
-  color = "default",
-  size = "default",
-  width = "normal",
-  disabled = false,
-  isLoading = false,
-  tooltip,
-  tooltipSize = "normal",
-  tooltipPosition = "top-left",
-  tooltipDirection = "ltr",
-  margins = "2",
-  children,
-  badge,
-  edgeCorner = false,
-  feedback,
-  ...props
-}) => {
-  const [isClicked, setIsClicked] = useState(false)
-  const [buttonText, setButtonText] = useState(children)
-
-  const handleClick = (event) => {
-    if (props.onClick) {
-      props.onClick(event)
-    }
-    if (feedback && !isClicked) {
-      setButtonText(feedback)
-      setIsClicked(true)
-      setTimeout(() => {
-        setButtonText(children)
-        setIsClicked(false)
-      }, 2000)
-    }
-  }
-
-  return (
-    <div
-      className={clsx(
-        "relative",
-        margins !== "none" ? `my-${margins}` : "m-0",
-        containerWidthStyles[width]
-      )}
-    >
-      {tooltip ? (
-        <HawaTooltip
-          direction={tooltipDirection}
-          position={tooltipPosition}
-          size={tooltipSize}
-          content={tooltip}
-        >
-          <button
-            className={
-              disabled
-                ? clsx(
-                    className,
-                    baseStyles,
-                    edgeCorner ? "rounded-inner" : "rounded",
-
-                    variantStyles[variant],
-                    sizeStyles[size],
-                    widthStyles[width],
-                    disabledSyles,
-                    disabledVariantSyles[variant]
-                  )
-                : clsx(
-                    className,
-                    baseStyles,
-                    edgeCorner ? "rounded-inner" : "rounded",
-
-                    variantStyles[variant],
-                    sizeStyles[size],
-                    colorStyles[variant][color],
-                    widthStyles[width]
-                  )
-            }
-            disabled={disabled}
-            onClick={props.onClick}
-            // onClick={handleClick}
-          >
-            {!isLoading ? children : <HawaLoading size="button" />}
-          </button>
-        </HawaTooltip>
-      ) : (
-        <button
-          className={
-            disabled
-              ? clsx(
-                  className,
-                  baseStyles,
-                  edgeCorner ? "rounded-inner" : "rounded",
-
-                  variantStyles[variant],
-                  sizeStyles[size],
-                  widthStyles[width],
-                  disabledSyles,
-                  disabledVariantSyles[variant]
-                )
-              : clsx(
-                  className,
-                  "overflow-x-clip",
-                  baseStyles,
-                  edgeCorner ? "rounded-inner" : "rounded",
-                  variantStyles[variant],
-                  sizeStyles[size],
-                  colorStyles[variant][color],
-                  widthStyles[width]
-                )
-          }
-          disabled={disabled}
-          // onClick={props.onClick}
-          onClick={handleClick}
-        >
-          {!isLoading ? (
-            <div
-              className={clsx(
-                " s flex flex-col-reverse items-start justify-center gap-4 transition-all",
-                isClicked && feedback
-                  ? " -translate-y-8 pb-1 pt-1"
-                  : "translate-y-0"
-              )}
-            >
-              {isClicked && feedback ? (
-                <div className="w-full  text-center">{buttonText}</div>
-              ) : null}
-              <div className="flex w-full select-none flex-row items-center justify-center gap-2 whitespace-nowrap">
-                {props.startIcon && props.startIcon}
-                {children}
-                {props.endIcon && props.endIcon}
-              </div>
-            </div>
-          ) : (
-            <HawaLoading design="dots-pulse" color={"bg-white"} size="button" />
-          )}
-        </button>
-      )}
-      {badge && (
-        <div
-          className={clsx(
-            typeof badge === "boolean"
-              ? "h-5 w-5"
-              : typeof badge === "string"
-              ? "h-5 w-7"
-              : "h-6 w-6",
-            "absolute -right-2 -top-2 inline-flex select-none  items-center justify-center rounded-full border-2 border-white bg-red-500 text-[9px] font-bold text-white dark:border-gray-900"
-          )}
-        >
-          {typeof badge === "number" && badge > 100 ? "+99" : badge}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/elements/HawaCardInput.tsx

@@ -1,318 +0,0 @@
-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 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 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 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 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 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/HawaCheckbox.tsx

@@ -1,54 +0,0 @@
-import React, { useEffect, useState, FC } from "react"
-import clsx from "clsx"
-
-type TCheckBoxTypes = {
-  centered?: boolean
-  label?: any
-  helperText?: any
-  id: string
-  onChange?: (e) => void
-  val?: boolean
-}
-
-export const HawaCheckbox: FC<TCheckBoxTypes> = (props) => {
-  const [isChecked, setVal] = useState(props.val)
-
-  useEffect(() => {
-    props.onChange(isChecked)
-  }, [isChecked])
-  return (
-    <div
-      className={clsx(
-        props.centered
-          ? "flex h-full items-center justify-center"
-          : "flex h-full items-start "
-      )}
-    >
-      <input
-        type="checkbox"
-        checked={isChecked}
-        onChange={(e) => setVal(e.target.checked)}
-        id={props.id}
-        aria-label={props.label}
-        className="mt-3 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
-      />
-      {(props.label || props.helperText) && (
-        <div
-          className=" flex cursor-pointer flex-col py-2"
-          onClick={(e) => setVal(!isChecked)}
-        >
-          {props.label && (
-            <label className="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">
-              {props.label}
-            </label>
-          )}
-          {props.helperText && (
-            <p className="mx-2 mt-1 text-xs text-red-600 dark:text-red-500">
-              {props.helperText}
-            </p>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/elements/HawaChip.tsx

@@ -1,59 +0,0 @@
-import React, { FC } from "react"
-import clsx from "clsx"
-
-type TChipTypes = {
-  /** The text inside the chip */
-  label: string
-  /** The small icon before the chip label  */
-  icon?: JSX.Element
-  /** The color of the chip, must be a tailwind color */
-  color?: string
-  /** The size of the chip */
-  size?: "small" | "normal" | "large"
-  /** Enable/Disable the dot before the label of the chip */
-  dot?: boolean
-  /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */
-  dotType?: "available" | "unavailable"
-}
-
-export const HawaChip: FC<TChipTypes> = ({
-  label,
-  size = "normal",
-  icon,
-  color,
-  dot,
-  dotType = "available",
-}) => {
-  let defaultStyles =
-    "flex flex-row w-fit gap-1 items-center rounded  px-2.5 py-0.5  font-bold text-blue-800 dark:bg-blue-200 dark:text-blue-800"
-  let sizeStyles = {
-    small: "h-full leading-4 px-1 py-0 text-[9px] gap-0.5 ",
-    normal: "h-fit text-xs",
-    large: "",
-  }
-
-  let dotStyles = {
-    small: "flex h-1 w-1 rounded-full",
-    normal: "flex h-2 w-2 rounded-full",
-    large: "flex h-3 w-3 rounded-full",
-  }
-  let dotTypeStyles = {
-    available: "bg-green-500",
-    unavailable: "bg-red-500",
-  }
-  return (
-    <span
-      className={clsx(
-        defaultStyles,
-        sizeStyles[size],
-        color ? `bg-${color}-100 text-${color}-500` : "bg-layoutPrimary-500"
-      )}
-    >
-      {dot && (
-        <span className={clsx(dotStyles[size], dotTypeStyles[dotType])}></span>
-      )}
-      {icon && icon}
-      {label}
-    </span>
-  )
-}