@sikka/hawa 0.1.7 → 0.1.8-beta

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -1,152 +0,0 @@
-import React, { useState, FC } from "react"
-import { HawaTabs } 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">
-        <HawaTabs
-          pill
-          defaultValue={currentCycle}
-          options={props.billingCycles}
-          onChangeTab={(e: any) => {
-            // setCurrentCycle(e.label)
-            props.onCycleChange(e)
-          }}
-        />
-        <HawaTabs
-          pill
-          defaultValue={currentCurrency}
-          options={props.currencies}
-          onChangeTab={(e: any) => {
-            // setCurrentCurrency(e.label)
-            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"
-                        stroke-width="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"
-      stroke-width="1.5"
-      stroke="currentColor"
-      className="default h-8 w-8 text-neutral-500"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="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
-        fill-rule="evenodd"
-        clip-rule="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>
-)

package/src/blocks/Pricing/PricingPlans.tsx

@@ -1,81 +0,0 @@
-import React, { FC } from "react"
-import { HawaPricingCard, HawaTabs } from "../../elements"
-
-type PricingPlansTypes = {
-  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 PricingPlans: FC<PricingPlansTypes> = (props) => {
-  return (
-    <div>
-      <div className="mb-2 flex w-full justify-between">
-        <HawaTabs
-          pill
-          defaultValue={props.currentCycle}
-          options={props.billingCycles}
-          onChangeTab={(e: any) => props.onCycleChange(e)}
-        />
-        <HawaTabs
-          pill
-          defaultValue={props.currentCurrency}
-          options={props.currencies}
-          onChangeTab={(e: any) => props.onCurrencyChange(e)}
-        />
-      </div>
-
-      <div className="flex flex-row justify-between">
-        {props.plans.map((plan: any, index) => {
-          return (
-            <HawaPricingCard
-              key={index}
-              onPlanClicked={() => props.onPlanClicked(plan)}
-              {...plan}
-              texts={{
-                ...plan.texts,
-                currencyText: props.currentCurrency,
-                cycleText: props.currentCycle,
-              }}
-            />
-          )
-        })}
-      </div>
-    </div>
-  )
-}

package/src/blocks/Pricing/index.ts

@@ -1,3 +0,0 @@
-export * from "./PricingPlans";
-export * from "./ComparingPlans";
-export * from "./HorizontalPricing";

package/src/blocks/Referral/ReferralAccount.tsx

@@ -1,68 +0,0 @@
-import React, { FC } from "react"
-
-import { Card, CardContent } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type ReferralAccount = {
-  referralLink: string
-  referralCode: string
-}
-
-export const ReferralAccount: FC<ReferralAccount> = ({
-  referralLink,
-  referralCode,
-}) => {
-  return (
-    <Card>
-      <CardContent headless>
-        <div className="my-2 mt-0">
-          <div className="mb-1">Referral Code</div>
-          <div className="flex flex-row items-center justify-between rounded border bg-background">
-            <span className="ml-3 font-bold">{referralCode}</span>
-            <Button
-              // tooltip="Copy"
-              // className="mr-1.5"
-              onClick={() => navigator.clipboard.writeText(referralCode)}
-            >
-              <span className="bg-red flex items-center justify-center">
-                <svg
-                  stroke="currentColor"
-                  fill="currentColor"
-                  stroke-width="0"
-                  viewBox="0 0 512 512"
-                  height="1em"
-                  width="1em"
-                >
-                  <path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z"></path>
-                </svg>{" "}
-              </span>
-            </Button>
-          </div>
-        </div>
-        <div className="my-2 mt-0">
-          <div className="mb-1">Referral Link</div>
-          <div className="flex flex-row items-center justify-between rounded border bg-background">
-            <span className="ml-3 font-bold">{referralLink}</span>
-            <Button
-              // className="mr-1.5"
-              onClick={() => navigator.clipboard.writeText(referralLink)}
-            >
-              <span className="bg-red flex items-center justify-center">
-                <svg
-                  stroke="currentColor"
-                  fill="currentColor"
-                  stroke-width="0"
-                  viewBox="0 0 512 512"
-                  height="1em"
-                  width="1em"
-                >
-                  <path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z"></path>
-                </svg>{" "}
-              </span>
-            </Button>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -1,149 +0,0 @@
-import React, { FC } from "react"
-import {
-  HawaAlert,
-  HawaChip,
-  HawaMenu,
-  HawaSelect,
-  HawaTextField,
-} from "../../elements"
-import { Controller, FormProvider, useForm } from "react-hook-form"
-import { Card, CardContent } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type TReferralSettlement = {
-  referralLink: string
-  referralCode: string
-  withdrawError?: string
-}
-
-export const ReferralSettlement: FC<TReferralSettlement> = ({
-  referralLink,
-  referralCode,
-  withdrawError,
-}) => {
-  const methods = useForm()
-  const {
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = methods
-  return (
-    <Card>
-      <CardContent headless>
-        <div>
-          <FormProvider {...methods}>
-            <HawaTextField label={"IBAN"} />
-            <HawaTextField label={"Holder Name"} />
-            <Controller
-              control={control}
-              name="bank"
-              render={({ field }) => (
-                <HawaSelect
-                  label="Bank"
-                  isCreatable={false}
-                  isMulti={false ?? false}
-                  isSearchable={false}
-                  isClearable={false ?? false}
-                  options={[
-                    { value: "snb", label: "Saudi National Bank" },
-                    { value: "bilad", label: "Al Bilad Bank" },
-                    { value: "rajihi", label: "Al Rajihi Bank" },
-                  ]}
-                  onInputChange={(e: any, o: any) => console.log("changing", e)}
-                  {...field}
-                  onChange={(e: any, o: any) => console.log("chooo", e)}
-                />
-              )}
-            />
-          </FormProvider>
-        </div>
-        <div>
-          <Button className="mt-6 w-full">Add Bank Account</Button>
-        </div>
-        {withdrawError && (
-          <div>
-            <HawaAlert
-              text={
-                "Sorry can't withdraw the money at the moment. Please try again in 2022/11/20"
-              }
-              severity="warning"
-            />
-          </div>
-        )}
-        <div className="mt-3">
-          <div className="mb-1">Settlement Accounts</div>
-          <div className="rounded">
-            <SettlementAccountCard
-              bank="Al Inma Bank"
-              iban="SA10228094028098329119"
-              accountHolder="Zakher Masri"
-              default
-            />
-            <SettlementAccountCard
-              bank="Al Rajihi Bank"
-              iban="SA10228094028098329119"
-              accountHolder="Zakher Masri"
-            />
-            <SettlementAccountCard
-              bank="Al Inma Bank"
-              iban="SA10228094028098329119"
-              accountHolder="Zakher Masri"
-            />
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-const SettlementAccountCard = (props) => {
-  return (
-    <div className="mb-3 flex flex-row items-center justify-between rounded border bg-background p-3">
-      <div className="flex flex-col justify-between">
-        <div className="text-xs">{props.bank}</div>
-        <div>{props.accountHolder}</div>
-        <div className="text-xs">{props.iban}</div>
-      </div>
-      <div className="flex flex-row items-center justify-center gap-2">
-        {props.default && (
-          <HawaChip
-            label="Default"
-            size="small"
-            // disabled
-            // variant="outlined"
-            // size="xs"
-            // margins="none"
-          />
-        )}
-
-        <HawaMenu
-          size="small"
-          menuItems={[
-            [
-              { label: "Set Default", disabled: props.default },
-              { label: "Edit" },
-              { label: "Delete" },
-            ],
-          ]}
-          // position={direction === "rtl" ? "right-bottom" : "left-bottom"}
-          // direction={direction}
-        >
-          <Button variant="outline" size="icon">
-            <svg
-              aria-label="Vertical Three Dots Menu Icon"
-              className="rotate-90"
-              stroke="currentColor"
-              fill="currentColor"
-              stroke-width="0"
-              viewBox="0 0 16 16"
-              height="1em"
-              width="1em"
-            >
-              <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path>
-            </svg>
-          </Button>
-        </HawaMenu>
-      </div>
-    </div>
-  )
-}

package/src/blocks/Referral/ReferralStats.tsx

@@ -1,87 +0,0 @@
-import React, { FC } from "react"
-import { HawaAlert } from "../../elements"
-import { Card, CardContent } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type TReferralStats = {
-  referralLink: string
-  referralCode: string
-  withdrawError?: string
-}
-
-export const ReferralStats: FC<TReferralStats> = ({
-  referralLink,
-  referralCode,
-  withdrawError,
-}) => {
-  return (
-    <Card>
-      <CardContent headless>
-        <div className="mb-1">Stats</div>
-        <div className="justi flex flex-row gap-1">
-          <NumberCard title="Clicks" number={22} />
-          <NumberCard title="Sign-ups" number={32} />
-          <NumberCard title="Commission" number={"213.22 SAR"} />
-        </div>
-
-        <Button className="mt-6 w-full">Withdraw Money</Button>
-        {withdrawError && (
-          <div>
-            <HawaAlert
-              text={
-                "Sorry can't withdraw the money at the moment. Please try again in 2022/11/20"
-              }
-              severity="warning"
-            />
-          </div>
-        )}
-        <div className="mt-3">
-          <div className="mb-1">Sign ups</div>
-          <div className="rounded">
-            <ReferralSignUpCard
-              date="2020/10/11 @ 9:45 pm"
-              email="zakher@sikka.io"
-              amount="3.4 SAR / Month"
-            />
-            <ReferralSignUpCard
-              date="2022/10/11 @ 9:45 pm"
-              email="zakher@sikka.io"
-              amount="3.4 SAR / Month"
-            />
-            <ReferralSignUpCard
-              date="2022/10/11 @ 9:45 pm"
-              email="zakher@sikka.io"
-              amount="3.4 SAR / Month"
-            />
-            <ReferralSignUpCard
-              date="2022/10/11 @ 9:45 pm"
-              email="zakher@sikka.io"
-              amount="3.4 SAR / Month"
-            />
-            <ReferralSignUpCard
-              date="2022/10/11 @ 9:45 pm"
-              email="zakher@sikka.io"
-              amount="3.4 SAR / Month"
-            />
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-const NumberCard = (props) => (
-  <div className="w-full rounded border bg-background p-2">
-    <div className="text-sm">{props.title}</div>
-    <div className="font-bold">{props.number}</div>
-  </div>
-)
-const ReferralSignUpCard = (props) => (
-  <div className="mb-3 rounded border-b bg-background p-2">
-    <div className="text-xs">{props.date}</div>
-    <div className="flex flex-row justify-between">
-      <div>{props.email}</div>
-      <div>{props.amount}</div>
-    </div>
-  </div>
-)

package/src/blocks/Referral/index.ts

@@ -1,3 +0,0 @@
-export * from "./ReferralAccount"
-export * from "./ReferralSettlement"
-export * from "./ReferralStats"