@sikka/hawa 0.0.95 → 0.0.97

package/src/blocks/Payment/{SelectPayment.js → SelectPayment.tsx}

@@ -1,13 +1,38 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { HawaTypography, HawaLogoButton } from "../../elements";
-import { HawaContainer } from "../../layout";
+import React from "react"
+import { HawaTypography, HawaLogoButton } from "../../elements"
+import { HawaContainer } from "../../layout"
 
-export const SelectPayment = (props) => {
+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
+  handleMada: any
+  handleWallet: any
+  handleSTCPay: any
+  handlePayPal: any
+  handleApplePay: any
+  handleCreditCard: any
+  handleGooglePay: any
+}
+
+export const SelectPayment: React.FunctionComponent<SelectPaymentTypes> = (
+  props
+) => {
   return (
     <HawaContainer>
       {/* // <div className="flex flex-col w-1/3 bg-blue-300 rounded-xl p-4"> */}
-      <HawaTypography align="center">Choose Payment Method</HawaTypography>
+      <HawaTypography>Choose Payment Method</HawaTypography>
       {props.viaWallet && (
         <HawaLogoButton
           logo="wallet"
@@ -58,26 +83,5 @@ export const SelectPayment = (props) => {
         />
       )}
     </HawaContainer>
-  );
-};
-
-SelectPayment.propTypes = {
-  viaMada: PropTypes.bool,
-  viaWallet: PropTypes.bool,
-  viaSTCPay: PropTypes.bool,
-  viaPayPal: PropTypes.bool,
-  viaApplePay: PropTypes.bool,
-  viaCreditCard: PropTypes.bool,
-  madaLabel: PropTypes.string,
-  stcPayLabel: PropTypes.string,
-  paypalLabel: PropTypes.string,
-  walletLabel: PropTypes.string,
-  applePayLabel: PropTypes.string,
-  visaMasterLabel: PropTypes.string,
-  handleMada: PropTypes.func,
-  handleWallet: PropTypes.func,
-  handleSTCPay: PropTypes.func,
-  handlePayPal: PropTypes.func,
-  handleApplePay: PropTypes.func,
-  handleCreditCard: PropTypes.func
-};
+  )
+}

package/src/blocks/Pricing/{ComparingPlans.js → ComparingPlans.tsx}

@@ -1,10 +1,9 @@
-import React, { useState } from "react";
-import { HawaPricingCard, HawaPanelTabs, HawaTabs } from "../../elements";
-import PropTypes from "prop-types";
+import React, { useState } from "react"
+import { HawaPricingCard, HawaPanelTabs, HawaTabs } from "../../elements"
 
 const CheckMark = () => (
   <svg
-    className="w-5 h-5 text-green-500"
+    className="h-5 w-5 text-green-500"
     aria-hidden="true"
     fill="currentColor"
     viewBox="0 0 20 20"
@@ -16,11 +15,11 @@ const CheckMark = () => (
       clip-rule="evenodd"
     ></path>
   </svg>
-);
+)
 
 const UncheckMark = () => (
   <svg
-    className="w-5 h-5 text-red-500"
+    className="h-5 w-5 text-red-500"
     aria-hidden="true"
     fill="currentColor"
     viewBox="0 0 20 20"
@@ -32,37 +31,58 @@ const UncheckMark = () => (
       clip-rule="evenodd"
     ></path>
   </svg>
-);
+)
 
-export const ComparingPlans = (props) => {
-  const [currentCurrency, setCurrentCurrency] = useState("sar");
-  const [currentCycle, setCurrentCycle] = useState("monthly");
+type ComparingPlansTypes = {
+  plans: any
+  // plans: PropTypes.arrayOf(
+  //   PropTypes.shape({
+  //     title: PropTypes.string,
+  //     title_ar: PropTypes.string,
+  //     subtitle: PropTypes.string,
+  //     subtitle_ar: PropTypes.string,
+  //     price: PropTypes.number,
+  //     currency: PropTypes.string,
+  //     cycleText: PropTypes.string,
+  //     buttonText: PropTypes.string,
+  //     features: PropTypes.array,
+  //     features_ar: PropTypes.array,
+  //     selectedPlan: PropTypes.bool,
+  //   })
+  // ),
+  lang: any
+}
+export const ComparingPlans: React.FunctionComponent<ComparingPlansTypes> = (
+  props
+) => {
+  const [currentCurrency, setCurrentCurrency] = useState("sar")
+  const [currentCycle, setCurrentCycle] = useState("monthly")
   let cycleOptions = [
     { label: `Monthly`, value: `monthly` },
     { label: `3 Months`, value: `3-months` },
     { label: `6 Months`, value: `6-months` },
-    { label: `Annually`, value: `annually` }
-  ];
+    { label: `Annually`, value: `annually` },
+  ]
   let currencyOptions = [
     { label: `USD`, value: `usd` },
-    { label: `SAR`, value: `sar` }
-  ];
+    { label: `SAR`, value: `sar` },
+  ]
   let activeTabStyle =
-    "inline-block py-3 px-4 text-white bg-blue-600 rounded-lg active";
+    "inline-block py-3 px-4 text-white bg-blue-600 rounded-lg active"
   let inactiveTabStyle =
-    "inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white";
+    "inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
   return (
-    <div id="detailed-pricing" className="overflow-x-auto w-full">
-      <div className="overflow-hidden min-w-max">
-        <div className="grid grid-cols-4 gap-x-16 p-4 text-sm font-medium text-gray-900 bg-gray-100 border-t border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 dark:text-white">
+    <div id="detailed-pricing" className="w-full overflow-x-auto">
+      <div className="min-w-max overflow-hidden">
+        <div className="grid grid-cols-4 gap-x-16 border-t border-b 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) => (
+          {props.plans.map((plan: any) => (
             <div>{plan.title}</div>
           ))}
         </div>
-        {props.plans.map((plan) => {
+        {props.plans.map(() => {
           return (
-            <div className="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
+            <div className="grid grid-cols-4 gap-x-16 border-b border-gray-200 py-5 px-4 text-sm text-gray-700 dark:border-gray-700">
               <div className="text-gray-500 dark:text-gray-400">
                 Basic components (
                 <a href="#" className="text-blue-600 hover:underline">
@@ -74,9 +94,9 @@ export const ComparingPlans = (props) => {
               <CheckMark />
               <CheckMark />
             </div>
-          );
+          )
         })}
-        <div className="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
+        <div className="grid grid-cols-4 gap-x-16 border-b border-gray-200 py-5 px-4 text-sm text-gray-700 dark:border-gray-700">
           <div className="text-gray-500 dark:text-gray-400">
             Application UI (
             <a href="#" className="text-blue-600 hover:underline">
@@ -88,7 +108,7 @@ export const ComparingPlans = (props) => {
           <CheckMark />
           <UncheckMark />
         </div>
-        <div className="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
+        <div className="grid grid-cols-4 gap-x-16 border-b border-gray-200 py-5 px-4 text-sm text-gray-700 dark:border-gray-700">
           <div className="text-gray-500 dark:text-gray-400">
             Marketing UI pre-order
           </div>
@@ -96,12 +116,12 @@ export const ComparingPlans = (props) => {
           <CheckMark />
           <UncheckMark />
         </div>
-        <div className="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
+        <div className="grid grid-cols-4 gap-x-16 border-b border-gray-200 py-5 px-4 text-sm text-gray-700 dark:border-gray-700">
           <div className="text-gray-500 dark:text-gray-400"></div>
           <div>
             <a
               href="#"
-              className="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900"
+              className="block w-full rounded-lg bg-blue-600 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
             >
               Buy now
             </a>
@@ -109,7 +129,7 @@ export const ComparingPlans = (props) => {
           <div>
             <a
               href="#"
-              className="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900"
+              className="block w-full rounded-lg bg-blue-600 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
             >
               Buy now
             </a>
@@ -117,7 +137,7 @@ export const ComparingPlans = (props) => {
           <div>
             <a
               href="#"
-              className="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900"
+              className="block w-full rounded-lg bg-blue-600 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
             >
               Buy now
             </a>
@@ -125,27 +145,5 @@ export const ComparingPlans = (props) => {
         </div>
       </div>
     </div>
-  );
-};
-
-ComparingPlans.propTypes = {
-  /**
-   * An array of the pricing plans
-   */
-  plans: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string,
-      title_ar: PropTypes.string,
-      subtitle: PropTypes.string,
-      subtitle_ar: PropTypes.string,
-      price: PropTypes.number,
-      currency: PropTypes.string,
-      cycleText: PropTypes.string,
-      buttonText: PropTypes.string,
-      features: PropTypes.array,
-      features_ar: PropTypes.array,
-      selectedPlan: PropTypes.bool
-    })
-  ),
-  lang: PropTypes.string
-};
+  )
+}

package/src/blocks/Pricing/PricingPlans.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from "react"
+import { HawaPricingCard, HawaTabs } from "../../elements"
+
+type PricingPlansTypes = {
+  plans: any
+  // plans: PropTypes.arrayOf(
+  //   PropTypes.shape({
+  //     title: PropTypes.string,
+  //     title_ar: PropTypes.string,
+  //     subtitle: PropTypes.string,
+  //     subtitle_ar: PropTypes.string,
+  //     price: PropTypes.number,
+  //     currency: PropTypes.string,
+  //     cycleText: PropTypes.string,
+  //     buttonText: PropTypes.string,
+  //     features: PropTypes.array,
+  //     features_ar: PropTypes.array,
+  //     selectedPlan: PropTypes.bool,
+  //   })
+  // ),
+  lang: any
+}
+export const PricingPlans: React.FunctionComponent<PricingPlansTypes> = (
+  props
+) => {
+  const [currentCurrency, setCurrentCurrency] = useState("sar")
+  const [currentCycle, setCurrentCycle] = useState("monthly")
+  let cycleOptions = [
+    { label: `Monthly`, value: `monthly` },
+    { label: `3 Months`, value: `3-months` },
+    { label: `6 Months`, value: `6-months` },
+    { label: `Annually`, value: `annually` },
+  ]
+  let currencyOptions = [
+    { label: `USD`, value: `usd` },
+    { label: `SAR`, value: `sar` },
+  ]
+  let activeTabStyle =
+    "inline-block py-3 px-4 text-white bg-blue-600 rounded-lg active"
+  let inactiveTabStyle =
+    "inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
+  return (
+    <div>
+      <div className="mb-2 flex w-full justify-between">
+        <HawaTabs
+          defaultValue={currentCycle}
+          options={cycleOptions}
+          onChangeTab={(e: any) => setCurrentCycle(e)}
+        />
+        <HawaTabs
+          defaultValue={currentCurrency}
+          options={currencyOptions}
+          onChangeTab={(e: any) => setCurrentCurrency(e)}
+        />
+      </div>
+
+      <div className="flex flex-row justify-between">
+        {props.plans.map((plan: any) => {
+          return (
+            <HawaPricingCard
+              size="large"
+              lang={props.lang}
+              {...plan}
+              currency={currentCurrency}
+              cycleText={currentCycle}
+            />
+          )
+        })}
+      </div>
+    </div>
+  )
+}