From aebfe1db13471ba7818e66ecad2b96c499cd5507 Mon Sep 17 00:00:00 2001 From: Joao Ramos Date: Wed, 10 Jan 2024 23:29:37 +0000 Subject: [PATCH] Added Pricing screen --- .env | 3 +- package.json | 3 ++ src/app/ar/price/page.tsx | 5 ++ src/app/price/page.tsx | 5 ++ src/templates/Price.tsx | 101 ++++++++++++++++++++++++++++++++++++++ yarn.lock | 15 ++++++ 6 files changed, 131 insertions(+), 1 deletion(-) create mode 100644 src/app/ar/price/page.tsx create mode 100644 src/app/price/page.tsx create mode 100644 src/templates/Price.tsx diff --git a/.env b/.env index 34b74ea..48b23cd 100644 --- a/.env +++ b/.env @@ -2,4 +2,5 @@ STRIPE_PRICING_TABLE=prctbl_1O0hFcFI67mXFum2kEqiD57r STRIPE_KEY=pk_test_51NzD5xFI67mXFum2XDMXiLu89SbCAMY5O0RnKjlU6XqyfboRVvFHI3f5OJHaxsrjjB7WqDYqN7Y3eF8mq3sF354F00l30L5GuJ STRIPE_SECRET=sk_test_51NzD5xFI67mXFum2Lzi2JtR8Th9zuA3CnoKKkAaOBiHmiHDQdGt7Pruj1Z89e4nF5eVNStL866twJLoVBUgfiaxZ00yqst8gkh -WEBHOOK_URL=http://localhost:3001/api/stripe \ No newline at end of file +WEBHOOK_URL=http://localhost:3001/api/stripe +NEXT_PUBLIC_APP_URL=http://localhost:3001 \ No newline at end of file diff --git a/package.json b/package.json index 69826da..01fabc1 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,8 @@ "@stripe/stripe-js": "^2.1.7", "axios": "^1.5.1", "clsx": "^2.0.0", + "currency-symbol-map": "^5.1.0", + "lodash": "^4.17.21", "moment": "^2.29.4", "next": "13.5.4", "react": "^18", @@ -24,6 +26,7 @@ "sharp": "^0.32.6" }, "devDependencies": { + "@types/lodash": "^4.14.202", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", diff --git a/src/app/ar/price/page.tsx b/src/app/ar/price/page.tsx new file mode 100644 index 0000000..9e42ebf --- /dev/null +++ b/src/app/ar/price/page.tsx @@ -0,0 +1,5 @@ +import Price from "@/templates/Price"; + +export default function Page() { + return ; +} diff --git a/src/app/price/page.tsx b/src/app/price/page.tsx new file mode 100644 index 0000000..8d0e1ba --- /dev/null +++ b/src/app/price/page.tsx @@ -0,0 +1,5 @@ +import Price from "@/templates/Price"; + +export default function Page() { + return ; +} diff --git a/src/templates/Price.tsx b/src/templates/Price.tsx new file mode 100644 index 0000000..48dbd9d --- /dev/null +++ b/src/templates/Price.tsx @@ -0,0 +1,101 @@ +"use client"; + +import React from "react"; +import Image from "next/image"; +import { capitalize } from "lodash"; +import getSymbolFromCurrency from "currency-symbol-map"; +import clsx from "clsx"; +import Navbar from "@/components/Navbar"; +import Link from "next/link"; +import Footer from "@/components/Footer"; + +type DurationUnit = "weeks" | "days" | "months" | "years"; + +interface Package { + id: string; + currency: string; + duration: number; + duration_unit: DurationUnit; + price: number; +} + +export default function Page({ language }: { language: "en" | "ar" }) { + const [payments, setPayments] = React.useState([]); + const getData = async () => { + // Fetch data from external API + const response = await fetch( + `${process.env.NEXT_PUBLIC_APP_URL}/api/packages`, + { + method: "GET", + } + ); + + if (response.status === 200) { + const payments = await response.json(); + // Pass data to the page via props + setPayments(payments); + return; + } + }; + + React.useEffect(() => { + getData(); + }, []); + return ( +
+ + +
+

Available Packages

+
+ {payments.map((p) => ( +
+
+ EnCoach's Logo + + EnCoach - {p.duration}{" "} + {capitalize( + p.duration === 1 + ? p.duration_unit.slice(0, p.duration_unit.length - 1) + : p.duration_unit + )} + +
+
+ + {p.price} + {getSymbolFromCurrency(p.currency)} + +
+
+ This includes: +
    +
  • - Train your abilities for the IELTS exam
    • +
  • - Gain insights into your weaknesses and strengths
    • +
  • - Allow yourself to correctly prepare for the exam
    • +
+
+
+ ))} +
+ + Join us + +
+
+ ); +} diff --git a/yarn.lock b/yarn.lock index 0e1860a..214e885 100644 --- a/yarn.lock +++ b/yarn.lock @@ -216,6 +216,11 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== +"@types/lodash@^4.14.202": + version "4.14.202" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8" + integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ== + "@types/node@^20": version "20.8.3" resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.3.tgz#c4ae2bb1cfab2999ed441a95c122bbbe1567a66d" @@ -682,6 +687,11 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== +currency-symbol-map@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/currency-symbol-map/-/currency-symbol-map-5.1.0.tgz#59531fbe977ba95e8d358e90e3c9e9053efb75ad" + integrity sha512-LO/lzYRw134LMDVnLyAf1dHE5tyO6axEFkR3TXjQIOmMkAM9YL6QsiUwuXzZAmFnuDJcs4hayOgyIYtViXFrLw== + damerau-levenshtein@^1.0.8: version "1.0.8" resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7" @@ -1769,6 +1779,11 @@ lodash.merge@^4.6.2: resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== +lodash@^4.17.21: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" + integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== + loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"