diff --git a/app/components/pricing/feature.tsx b/app/components/pricing/feature.tsx index 62089c4..bb93463 100644 --- a/app/components/pricing/feature.tsx +++ b/app/components/pricing/feature.tsx @@ -2,13 +2,13 @@ import { CheckIcon, Cross2Icon } from "@radix-ui/react-icons" import clsx from "clsx" -type Feature = { +export type FeatureType = { name: string isAvailable: boolean inProgress: boolean } -export const Feature = ({ name, isAvailable, inProgress }: Feature) => ( +export const Feature = ({ name, isAvailable, inProgress }: FeatureType) => (
  • { + const { plans, defaultCurrency } = useLoaderData() + const [interval, setInterval] = useState<"month" | "year">("month") + + return ( +
    +
    +
    +

    + Pricing Plans +

    +
    +

    + {/* TODO: add content here @keyur */} + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum + quisquam, iusto voluptatem dolore voluptas non laboriosam soluta quos + quod eos! Sapiente archit +

    +
    + setInterval(value === "0" ? "month" : "year")} + /> + +
    + {plans.map((plan) => { + const discount = plan.prices[0].amount * 12 - plan.prices[1].amount + const showDiscount = + interval === "year" && plan.prices[0].amount !== 0 + const planPrice = plan.prices.find( + (p) => p.currency === defaultCurrency && p.interval == interval + )?.amount as number + + return ( + + {showDiscount && discount > 0 && ( + + Save {getformattedCurrency(discount, defaultCurrency)} + + )} + {plan.name} + {plan.description} + + + {(plan.listOfFeatures as FeatureType[]).map( + (feature, index) => ( + + ) + )} + + + + + + + + ) + })} +
    +
    +
    + ) +} diff --git a/app/routes/_index/route.tsx b/app/routes/_index/route.tsx index 0078de0..c839318 100644 --- a/app/routes/_index/route.tsx +++ b/app/routes/_index/route.tsx @@ -5,7 +5,6 @@ import { } from "@remix-run/node" import { mergeMeta } from "@/lib/server/seo/seo-helpers" -import buildTags from "@/lib/server/seo/seo-utils" import Faqs from "./faq" import { FeatureSection } from "./feature-section" @@ -14,6 +13,10 @@ import FeaturesVariantB from "./features-variant-b" import Footer from "./footer" import { HeroSection } from "./hero-section" import { LogoCloud } from "./logo-cloud" +import { getAllPlans } from "@/models/plan" +import { getUserCurrencyFromRequest } from "@/utils/currency" +import { authenticator } from "@/services/auth.server" +import { Pricing } from "./pricing" const loginFeatures = [ "Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.", @@ -21,8 +24,33 @@ const loginFeatures = [ "Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.", ] -export const loader = ({}: LoaderFunctionArgs) => { - return json({ hostUrl: process.env.HOST_URL }) +export const loader = async ({ request }: LoaderFunctionArgs) => { + const user = await authenticator.isAuthenticated(request, { + successRedirect: "/dashboard", + }) + + let plans = await getAllPlans() + + const defaultCurrency = getUserCurrencyFromRequest(request) + + plans = plans + .map((plan) => { + return { + ...plan, + prices: plan.prices + .filter((price) => price.currency === defaultCurrency) + .map((price) => ({ + ...price, + amount: price.amount / 100, + })), + } + }) + .sort((a, b) => a.prices[0].amount - b.prices[0].amount) + + return { + plans, + defaultCurrency, + } } export const meta: MetaFunction = mergeMeta( @@ -46,6 +74,7 @@ export default function Index() { lightFeatureImage="/login-light.jpeg" /> +