@sikka/hawa 0.2.14-beta → 0.2.17-beta

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>
-)

package/src/blocks/Pricing/PricingPlans.tsx

@@ -1,81 +0,0 @@
-import React, { FC } from "react"
-import { HawaPricingCard, HawaRadio } 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">
-        <HawaRadio
-          design="tabs"
-          defaultValue={props.currentCycle}
-          options={props.billingCycles}
-          onChangeTab={(e: any) => props.onCycleChange(e)}
-        />
-        <HawaRadio
-          design="tabs"
-          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"
-                  strokeWidth="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"
-                  strokeWidth="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>
-  )
-}