@sikka/hawa 0.2.16-beta → 0.2.18-beta

package/src/blocks/Payment/CreditCardForm.tsx

@@ -1,169 +0,0 @@
-import React, { FC, useEffect, useState } from "react"
-import { HawaTextField } from "../../elements"
-import { Controller, useForm } from "react-hook-form"
-import { Card, CardContent, CardFooter } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type CreditCardFormTypes = {
-  handle: any
-  handlePayWithCreditCard: any
-}
-
-export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
-  const [cardNumber, setCardNumber] = useState("")
-  const [cardType, setCardType] = useState("")
-  const methods = useForm()
-  const {
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = methods
-
-  const getCardType = (card_bin) => {
-    const visa_regex = /^4[0-9]{0,15}$/m
-    const mastercard_regex = /^5$|^5[0-5][0-9]{0,16}$/m
-    const amex_regex = /^3$|^3[47][0-9]{0,13}$/m
-    const mada_regex =
-      /^(440647|440795|446404|457865|968208|457997|474491|636120|417633|468540|468541|468542|468543|968201|446393|409201|458456|484783|462220|455708|410621|455036|486094|486095|486096|504300|440533|489318|489319|445564|968211|410685|406996|432328|428671|428672|428673|968206|446672|543357|434107|407197|407395|412565|431361|604906|521076|529415|535825|543085|524130|554180|549760|968209|524514|529741|537767|535989|536023|513213|520058|558563|588982|589005|531095|530906|532013|968204|422817|422818|422819|428331|483010|483011|483012|589206|968207|419593|439954|530060|531196|420132)/
-    const meeza_regex =
-      /^507803[0-6][0-9]|507808[3-9][0-9]|507809[0-9][0-9]|507810[0-2][0-9]/
-    let card_type = "visa"
-    if (card_bin.replace(/[^\d]/g, "").match(mada_regex)) {
-      card_type = "mada"
-    } else if (card_bin.replace(/[^\d]/g, "").match(meeza_regex)) {
-      card_type = "meeza"
-    } else if (card_bin.replace(/[^\d]/g, "").match(visa_regex)) {
-      card_type = "visa"
-    } else if (card_bin.replace(/[^\d]/g, "").match(mastercard_regex)) {
-      card_type = "mastercard"
-    } else if (card_bin.replace(/[^\d]/g, "").match(amex_regex)) {
-      card_type = "amex"
-    }
-    return card_type
-  }
-  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 ")
-    }
-    console.log("card number is ", cardNumber.trimRight())
-    setCardNumber(cardNumber.trimRight())
-    // onUpdateState(name, cardNumber);
-  }
-  useEffect(() => {
-    let cardTypeSlug = getCardType(cardNumber)
-    setCardType(cardTypeSlug)
-  })
-  return (
-    <Card>
-      <form onSubmit={handleSubmit(props.handle)}>
-        <CardContent headless>
-          <div className="flex flex-row gap-4">
-            <Controller
-              control={control}
-              name="cardNumber"
-              render={({ field }) => (
-                <HawaTextField
-                  width="full"
-                  name="cardNumber"
-                  placeholder="1234 1234 1234 1234"
-                  type="number"
-                  onChange={onCardNumberChange}
-                  // onChange={(e) => setCardNumber(e.target.value)}
-                  label="Card Number"
-                  helpertext={errors.password?.message}
-                  iconInside={
-                    <img
-                      src={`https://sikka-images.s3.ap-southeast-1.amazonaws.com/payment-symbols/borderless/${cardType}.png`}
-                      alt=""
-                      className="h-8"
-                    />
-                  }
-                />
-              )}
-              rules={{
-                required: "Card Number is rquired",
-              }}
-            />
-            <div className="w-1/4">
-              <Controller
-                control={control}
-                name="cardCVC"
-                render={({ field }) => (
-                  <HawaTextField
-                    width="full"
-                    name="cardCVC"
-                    maxLength="3"
-                    autoComplete="cc-number"
-                    placeholder="CVC"
-                    type="number"
-                    label="CVC"
-                    helpertext={errors.password?.message}
-                  />
-                )}
-                rules={{
-                  required: "Password is rquired",
-                }}
-              />
-            </div>
-          </div>
-
-          <Controller
-            control={control}
-            name="cardExpiry"
-            render={({ field }) => (
-              <HawaTextField
-                width="full"
-                name="cardExpiry"
-                placeholder="MM / YY"
-                type="password"
-                label="Expiry Date"
-                helpertext={errors.password?.message}
-              />
-            )}
-            rules={{
-              required: "Password is rquired",
-            }}
-          />
-          <Controller
-            control={control}
-            name="cardName"
-            render={({ field }) => (
-              <HawaTextField
-                width="full"
-                name="cardName"
-                // placeholder="Enter password"
-                type="text"
-                label="Name on card"
-                helpertext={errors.password?.message}
-              />
-            )}
-            rules={{
-              required: "Card holder name is rquired",
-            }}
-          />
-        </CardContent>
-        <CardFooter>
-          <Button className="w-full" onClick={props.handlePayWithCreditCard}>
-            Pay with Credit Card
-          </Button>
-        </CardFooter>
-      </form>
-    </Card>
-  )
-}

package/src/blocks/Payment/PayWithWallet.tsx

@@ -1,24 +0,0 @@
-import React, { FC } from "react"
-import { Card, CardContent } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type PayWithWalletTypes = {
-  walletBalance: any
-  currency: any
-  handlePayWithWallet: any
-}
-export const PayWithWallet: FC<PayWithWalletTypes> = (props) => {
-  return (
-    <Card>
-      <CardContent headless>
-        <div className="text-center text-5xl font-extrabold">
-          {props.walletBalance || "0"}
-          <div className="text-sm font-normal">{props.currency || "SAR"}</div>
-        </div>
-        <Button className="mt-6 w-full" onClick={props.handlePayWithWallet}>
-          Pay Now
-        </Button>
-      </CardContent>
-    </Card>
-  )
-}

package/src/blocks/Payment/SelectPayment.tsx

@@ -1,187 +0,0 @@
-import React, { FC, useState } from "react"
-import { Button } from "../../elements"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../../elements/Card"
-import { cn } from "../../util"
-
-type SelectPaymentTypes = {
-  viaMada: boolean
-  viaWallet: boolean
-  viaSTCPay: boolean
-  viaPayPal: boolean
-  viaApplePay: boolean
-  viaCreditCard: boolean
-  viaGooglePay: boolean
-  madaLabel: string
-  stcPayLabel: string
-  paypalLabel: string
-  walletLabel: string
-  applePayLabel: string
-  visaMasterLabel: string
-  googlePayLabel: string
-  handleContinue: (string) => void
-}
-
-export const SelectPayment: FC<SelectPaymentTypes> = (props) => {
-  const [selectedMethod, setSelectedMethod] = useState("")
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Choose Payment Method</CardTitle>
-        <CardDescription>
-          And you'll be directed to the next step to complete the payment
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid grid-cols-2 gap-4">
-        <Button
-          className={cn(
-            "flex w-full flex-col gap-2 pt-6",
-            selectedMethod === "mada" && "outline outline-4 outline-primary"
-          )}
-          variant="outline"
-          size="heightless"
-          disabled={!props.viaMada}
-          onClick={() => setSelectedMethod("mada")}
-        >
-          <img
-            src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png"
-            className="h-6"
-          />
-          <span>{props.madaLabel}</span>
-        </Button>
-
-        <Button
-          className={cn(
-            "flex w-full flex-col gap-2",
-            selectedMethod === "apple-pay" &&
-              "outline outline-4 outline-primary"
-          )}
-          variant="outline"
-          size="heightless"
-          disabled={!props.viaApplePay}
-          onClick={() => setSelectedMethod("apple-pay")}
-        >
-          <img
-            src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png"
-            className="h-11"
-          />
-          <span>{props.applePayLabel}</span>
-        </Button>
-
-        <Button
-          className={cn(
-            "flex w-full flex-col gap-2",
-            selectedMethod === "visa-master" &&
-              "outline outline-4 outline-primary"
-          )}
-          variant="outline"
-          size="heightless"
-          disabled={!props.viaCreditCard}
-          onClick={() => setSelectedMethod("visa-master")}
-        >
-          <img
-            src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png"
-            className="h-6"
-          />
-          <span>{props.visaMasterLabel}</span>
-        </Button>
-
-        <Button
-          variant="outline"
-          size="heightless"
-          className={cn(
-            "flex w-full flex-col gap-2",
-            selectedMethod === "wallet" && "outline outline-4 outline-primary"
-          )}
-          disabled={!props.viaWallet}
-          onClick={() => setSelectedMethod("wallet")}
-        >
-          <svg
-            version="1.1"
-            fill="currentColor"
-            viewBox="0 0 223 223"
-            className="h-6 w-6"
-          >
-            <g>
-              <path
-                d="M223,94.5c0-6.075-4.925-11-11-11h-63c-6.075,0-11,4.925-11,11v33c0,6.075,4.925,11,11,11h63c6.075,0,11-4.925,11-11V94.5z
-                  M169.515,123.967c-7.082,0-12.823-5.741-12.823-12.823c0-7.082,5.741-12.823,12.823-12.823c7.082,0,12.823,5.741,12.823,12.823
-                  C182.338,118.225,176.597,123.967,169.515,123.967z"
-              />
-              <path
-                d="M123.509,68.5H205v-33c0-8.271-6.395-15-14.667-15h-175C7.062,20.5,0,27.229,0,35.5v152c0,8.271,7.062,15,15.333,15h175
-                  c8.271,0,14.667-6.729,14.667-15v-34h-81.342L123.509,68.5z"
-              />
-            </g>
-          </svg>
-          <span>{props.walletLabel}</span>
-        </Button>
-        <Button
-          variant="outline"
-          size="heightless"
-          className={cn(
-            "flex w-full flex-col gap-2",
-            selectedMethod === "stc-pay" && "outline outline-4 outline-primary"
-          )}
-          disabled={!props.viaSTCPay}
-          onClick={() => setSelectedMethod("stc-pay")}
-        >
-          <img
-            src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png"
-            className="h-6"
-          />
-          <span>{props.stcPayLabel}</span>
-        </Button>
-
-        <Button
-          variant="outline"
-          size="heightless"
-          className={cn(
-            "flex w-full flex-col gap-2",
-            selectedMethod === "google-pay" &&
-              "outline outline-4 outline-primary"
-          )}
-          disabled={!props.viaGooglePay}
-          onClick={() => setSelectedMethod("google-pay")}
-        >
-          <img
-            src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png"
-            className="h-6"
-          />
-          <span>{props.googlePayLabel}</span>
-        </Button>
-        <Button
-          variant="outline"
-          size="heightless"
-          className={cn(
-            "col-span-2 flex w-full flex-col gap-2",
-            selectedMethod === "paypal" && "outline outline-4 outline-primary"
-          )}
-          disabled={!props.viaPayPal}
-          onClick={() => setSelectedMethod("paypal")}
-        >
-          <img
-            src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png"
-            className="h-6"
-          />
-          <span>{props.paypalLabel}</span>
-        </Button>
-      </CardContent>
-      <CardFooter>
-        <Button
-          onClick={() => props.handleContinue(selectedMethod)}
-          className="w-full"
-          disabled={!selectedMethod}
-        >
-          Continue
-        </Button>
-      </CardFooter>
-    </Card>
-  )
-}

package/src/blocks/Payment/index.ts

@@ -1,6 +0,0 @@
-export * from "./SelectPayment"
-export * from "./CreditCardForm"
-export * from "./ChargeWalletForm"
-export * from "./PayWithWallet"
-export * from "./CheckoutForm"
-export * from "./Confirmation"

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -1,146 +0,0 @@
-import React, { useState, FC } from "react"
-import { HawaRadio } from "../../elements"
-import { Tooltip } from "../../elements/Tooltip"
-
-const CheckMark = () => (
-  <svg
-    className="h-5 w-5 text-green-500"
-    aria-hidden="true"
-    fill="currentColor"
-    viewBox="0 0 20 20"
-  >
-    <path
-      fillRule="evenodd"
-      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-      clipRule="evenodd"
-    ></path>
-  </svg>
-)
-
-const UncheckMark = () => (
-  <svg
-    className="h-5 w-5 text-red-500"
-    aria-hidden="true"
-    fill="currentColor"
-    viewBox="0 0 20 20"
-  >
-    <path
-      fillRule="evenodd"
-      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-      clipRule="evenodd"
-    ></path>
-  </svg>
-)
-
-type ComparingPlansTypes = {
-  plans: [
-    {
-      direction: "rtl" | "ltr"
-      features: [{ included: boolean; text: string; description?: string }]
-      price: number
-      texts: {
-        title: string
-        subtitle: string
-        buttonText: string
-        cycleText: string
-        currencyText: string
-      }
-      size: "small" | "medium" | "large"
-    }
-  ]
-  currencies: [
-    {
-      label: string
-      value: string
-    }
-  ]
-  billingCycles: [
-    {
-      label: string
-      value: string
-    }
-  ]
-  onCycleChange?: (e) => void
-  onCurrencyChange?: (e) => void
-  direction?: "rtl" | "ltr"
-}
-export const ComparingPlans: FC<ComparingPlansTypes> = (props) => {
-  const [currentCurrency, setCurrentCurrency] = useState("sar")
-  const [currentCycle, setCurrentCycle] = useState("month")
-
-  return (
-    <div id="detailed-pricing" className="w-full overflow-x-auto">
-      <div className="mb-2 flex w-full justify-between">
-        <HawaRadio
-          design="tabs"
-          defaultValue={currentCycle}
-          options={props.billingCycles}
-          onChangeTab={(e: any) => props.onCycleChange(e)}
-        />
-        <HawaRadio
-          design="tabs"
-          defaultValue={currentCurrency}
-          options={props.currencies}
-          onChangeTab={(e: any) => props.onCurrencyChange(e)}
-        />
-      </div>
-      <div className=" overflow-hidden rounded">
-        <div className="grid grid-cols-4 gap-x-2 border-b border-t border-gray-200 bg-gray-100 p-4 text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white">
-          <div className="flex items-center"></div>
-          {props.plans.map((plan: any) => (
-            <div>
-              <h5 className="text-md 0 font-bold text-gray-500 dark:text-gray-400">
-                {plan.texts.title}
-              </h5>
-
-              <div className=" flex items-baseline  text-gray-900 dark:text-white">
-                <>
-                  <span className="text-5xl font-extrabold tracking-tight">
-                    {plan.price}
-                  </span>
-                  <span className="mx-1 text-sm font-semibold">
-                    {plan.texts.currencyText}
-                  </span>
-                </>
-                <span className="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
-                  / {plan.texts.cycleText}
-                </span>
-              </div>
-              <h5 className="text-md  font-normal text-gray-500 dark:text-gray-400">
-                {plan.texts.subtitle}
-              </h5>
-            </div>
-          ))}
-        </div>
-        {props.plans?.map((plan) => {
-          return plan.features.map((feature) => {
-            return (
-              <div className="grid grid-cols-4 gap-x-16 border-b border-gray-200 px-4 py-5 text-sm text-gray-700 dark:border-gray-700">
-                <div className="  flex flex-row items-center gap-2  text-gray-500 dark:text-gray-400">
-                  {feature.text}
-                  {feature.description && (
-                    <Tooltip side="right" content={feature.description}>
-                      <svg
-                        stroke="currentColor"
-                        fill="currentColor"
-                        strokeWidth="0"
-                        viewBox="0 0 16 16"
-                        height="1em"
-                        width="1em"
-                      >
-                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
-                      </svg>
-                    </Tooltip>
-                  )}
-                </div>
-                <UncheckMark />
-                <CheckMark />
-                <UncheckMark />
-              </div>
-            )
-          })
-        })}
-      </div>
-    </div>
-  )
-}

package/src/blocks/Pricing/HorizontalPricing.tsx

@@ -1,148 +0,0 @@
-import React, { FC, useState } from "react"
-import { HawaRadio } from "../../elements"
-import clsx from "clsx"
-
-type HorizontalPricingTypes = {
-  plans: [
-    {
-      direction: "rtl" | "ltr"
-      features: [{ included: boolean; text: string }]
-      price: number
-      texts: {
-        title: string
-        subtitle: string
-        buttonText: string
-        cycleText: string
-        currencyText: string
-      }
-      size: "small" | "medium" | "large"
-    }
-  ]
-  currencies: [
-    {
-      label: string
-      value: string
-    }
-  ]
-  billingCycles: [
-    {
-      label: string
-      value: string
-    }
-  ]
-  onPlanClicked?: (e) => void
-  currentCycle: {
-    label: string
-    value: string
-  }
-  currentCurrency: {
-    label: string
-    value: string
-  }
-  onCycleChange?: (e) => void
-  onCurrencyChange?: (e) => void
-  direction?: "rtl" | "ltr"
-}
-export const HorizontalPricing: FC<HorizontalPricingTypes> = (props) => {
-  const [selectedCard, setSelectedCard] = useState(null)
-  let data = [
-    { title: "basic", price: "$49", cycle: "/mo" },
-    { title: "business", price: "$99", cycle: "/mo" },
-    { title: "enterprise", price: "$149", cycle: "/mo" },
-  ]
-  return (
-    <div className="z-10 w-full max-w-screen-sm">
-      <div className="max-w-2xl ">
-        <div className="flex flex-row justify-between">
-          <HawaRadio
-            design="tabs"
-            options={props.currencies}
-            defaultValue={props.currentCurrency}
-          />
-          <HawaRadio
-            design="tabs"
-            options={props.billingCycles}
-            defaultValue={props.currentCycle}
-          />
-        </div>
-        {data.map((d) => (
-          <label
-            htmlFor={d.title}
-            className=""
-            onClick={() => setSelectedCard(d.title)}
-          >
-            <input
-              type="radio"
-              name="radio"
-              id={d.title}
-              className="peer appearance-none"
-            />
-            <div
-              className={clsx(
-                selectedCard === d.title ? "peer-checked:border-blue-500" : "",
-                "peer flex cursor-pointer items-center justify-between  rounded-xl border bg-background px-5   py-4 shadow dark:text-white  peer-checked:[&_.active]:block peer-checked:[&_.default]:hidden"
-              )}
-            >
-              <div className="peer flex items-center gap-4">
-                <CheckIcons />
-                <CardText
-                  title="Enterprise"
-                  subtitle="For startups and new businesses"
-                />
-              </div>
-
-              <CardPrice amount={d.price} cycle={d.cycle} />
-            </div>
-          </label>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-const CheckIcons = () => (
-  <>
-    <svg
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      stroke="currentColor"
-      className="default h-8 w-8 text-neutral-500"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-      />
-    </svg>
-    <svg
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      className="active hidden h-8 w-8 text-blue-500"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
-      />
-    </svg>
-  </>
-)
-const CardText = (props) => (
-  <div className="peer flex flex-col items-start ">
-    <h2 className="font-medium text-neutral-700 dark:text-gray-100 sm:text-xl">
-      {props.title}
-    </h2>
-    <p className="text-sm text-neutral-500 dark:text-gray-300">
-      {props.subtitle}{" "}
-    </p>
-  </div>
-)
-const CardPrice = (props) => (
-  <h2 className="peer text-xl font-semibold text-neutral-900 dark:text-white sm:text-2xl">
-    {props.amount}
-    <span className="text-base font-medium text-neutral-400">
-      {props.cycle}
-    </span>
-  </h2>
-)