From 6fbc1c3a2132449545e2290104acdef2cc264d4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=9A=D0=B0=D1=82=D0=B0?= =?UTF-8?q?=D0=B5=D0=B2?= Date: Sun, 24 Mar 2024 21:01:16 +0000 Subject: [PATCH] Revert "fix: remove double image key and update filter of subscription plans" --- src/api/api.ts | 6 +- src/api/resources/SinglePayment.ts | 82 +++++++ src/api/resources/index.ts | 1 + src/components/App/index.tsx | 30 ++- src/components/BirthdayPage/index.tsx | 97 +++++--- .../methods/Stripe/CheckoutForm.tsx | 10 +- src/components/PaymentPage/results/index.tsx | 13 +- .../PaymentForm/index.tsx | 36 +++ .../PaymentForm/styles.module.css | 44 ++++ .../ResultPayment/FailPaymentPage/index.tsx | 34 +++ .../FailPaymentPage/styles.module.css | 38 ++++ .../SuccessPaymentPage/index.tsx | 23 ++ .../SuccessPaymentPage/styles.module.css | 25 ++ .../pages/PaymentWithEmailPage/index.tsx | 213 ++++++++++++++++++ .../PaymentWithEmailPage/styles.module.css | 61 +++++ .../components/PaymentModal/index.tsx | 3 + src/routes.ts | 32 ++- 17 files changed, 690 insertions(+), 58 deletions(-) create mode 100644 src/api/resources/SinglePayment.ts create mode 100644 src/components/pages/PaymentWithEmailPage/PaymentForm/index.tsx create mode 100644 src/components/pages/PaymentWithEmailPage/PaymentForm/styles.module.css create mode 100644 src/components/pages/PaymentWithEmailPage/ResultPayment/FailPaymentPage/index.tsx create mode 100644 src/components/pages/PaymentWithEmailPage/ResultPayment/FailPaymentPage/styles.module.css create mode 100644 src/components/pages/PaymentWithEmailPage/ResultPayment/SuccessPaymentPage/index.tsx create mode 100644 src/components/pages/PaymentWithEmailPage/ResultPayment/SuccessPaymentPage/styles.module.css create mode 100644 src/components/pages/PaymentWithEmailPage/index.tsx create mode 100644 src/components/pages/PaymentWithEmailPage/styles.module.css diff --git a/src/api/api.ts b/src/api/api.ts index abba855..38c559b 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -23,7 +23,8 @@ import { GoogleAuth, SubscriptionPlans, AppleAuth, - AIRequestsV2 + AIRequestsV2, + SinglePayment } from './resources' const api = { @@ -55,6 +56,9 @@ const api = { getZodiacs: createMethod(Zodiacs.createRequest), AIRequestsV2: createMethod(AIRequestsV2.createRequest), getAIRequestsV2: createMethod(AIRequestsV2.createRequestGet), + + getSinglePaymentProducts: createMethod(SinglePayment.createRequestGet), + createSinglePayment: createMethod(SinglePayment.createRequestPost), } export type ApiContextValue = typeof api diff --git a/src/api/resources/SinglePayment.ts b/src/api/resources/SinglePayment.ts new file mode 100644 index 0000000..93fd625 --- /dev/null +++ b/src/api/resources/SinglePayment.ts @@ -0,0 +1,82 @@ +import routes from "@/routes"; +import { getAuthHeaders } from "../utils"; + +interface Payload { + token: string; +} + +export interface PayloadGet extends Payload { + id: string; +} + +export interface PayloadPost extends Payload { + data: { + user: { + id: string; + email: string; + name: string; + sign: string; + age: number; + }; + partner: { + sign: string | null; + age: number | null; + }; + paymentInfo: { + productId: string; + }; + return_url: string; + }; +} + +export interface ResponseGet { + key: string; + productId: string; + amount: number; + currency: string; +} + +export interface ResponsePost { + paymentIntent: { + status: string; + data: { + client_secret: string; + paymentIntentId: string; + return_url?: string; + public_key: string; + product: { + id: string; + name: string; + description: null | string; + price: { + id: string; + unit_amount: number; + currency: string; + }; + }; + }; + }; +} + +export interface ResponsePostExistPaymentData { + payment: { + status: string; + invoiceId: string; + }; +} + +export const createRequestPost = ({ data, token }: PayloadPost): Request => { + const url = new URL(routes.server.dApiPaymentCheckout()); + const body = JSON.stringify(data); + return new Request(url, { + method: "POST", + headers: getAuthHeaders(token), + body, + }); +}; + +export const createRequestGet = ({ id, token }: PayloadGet): Request => { + id; + const url = new URL(routes.server.dApiTestPaymentProducts()); + return new Request(url, { method: "GET", headers: getAuthHeaders(token) }); +}; diff --git a/src/api/resources/index.ts b/src/api/resources/index.ts index bdd0dcf..bc355c7 100644 --- a/src/api/resources/index.ts +++ b/src/api/resources/index.ts @@ -22,3 +22,4 @@ export * as GoogleAuth from "./GoogleAuth"; export * as SubscriptionPlans from "./SubscriptionPlans"; export * as AppleAuth from "./AppleAuth"; export * as AIRequestsV2 from "./AIRequestsV2"; +export * as SinglePayment from "./SinglePayment"; diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index decbb9a..97356c3 100755 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -104,6 +104,9 @@ import AddReportPage from "../pages/AdditionalPurchases/pages/AddReport"; import UnlimitedReadingsPage from "../pages/AdditionalPurchases/pages/UnlimitedReadings"; import AddConsultationPage from "../pages/AdditionalPurchases/pages/AddConsultation"; import StepsManager from "@/components/palmistry/steps-manager/steps-manager"; +import PaymentWithEmailPage from "../pages/PaymentWithEmailPage"; +import SuccessPaymentPage from "../pages/PaymentWithEmailPage/ResultPayment/SuccessPaymentPage"; +import FailPaymentPage from "../pages/PaymentWithEmailPage/ResultPayment/FailPaymentPage"; const isProduction = import.meta.env.MODE === "production"; @@ -216,6 +219,13 @@ function App(): JSX.Element { return ( }> + {/* Email - Pay - Email */} + } /> + } /> + } /> + } /> + {/* Email - Pay - Email */} + {/* Test Routes Start */} } /> }> @@ -331,8 +341,14 @@ function App(): JSX.Element { {/* Additional Purchases */} }> } /> - } /> - } /> + } + /> + } + /> {/* Additional Purchases End */} @@ -472,15 +488,9 @@ function App(): JSX.Element { - } - /> + } /> - } - /> + } /> } /> diff --git a/src/components/BirthdayPage/index.tsx b/src/components/BirthdayPage/index.tsx index 60278b6..fabfee9 100644 --- a/src/components/BirthdayPage/index.tsx +++ b/src/components/BirthdayPage/index.tsx @@ -1,54 +1,83 @@ -import { useState } from 'react' -import { useNavigate } from 'react-router-dom' -import { useTranslation } from 'react-i18next' -import { useDispatch, useSelector } from 'react-redux' -import { actions, selectors } from '@/store' -import { DatePicker } from '../DateTimePicker' -import MainButton from '../MainButton' -import Policy from '../Policy' -import Purposes from '../Purposes' -import Title from '../Title' -import routes from '@/routes' -import './styles.css' +import { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { useTranslation } from "react-i18next"; +import { useDispatch, useSelector } from "react-redux"; +import { actions, selectors } from "@/store"; +import { DatePicker } from "../DateTimePicker"; +import MainButton from "../MainButton"; +import Policy from "../Policy"; +import Purposes from "../Purposes"; +import Title from "../Title"; +import routes from "@/routes"; +import "./styles.css"; function BirthdayPage(): JSX.Element { - const { t } = useTranslation() - const dispatch = useDispatch() - const navigate = useNavigate() - const birthdate = useSelector(selectors.selectBirthdate) - const [isDisabled, setIsDisabled] = useState(true) - const handleNext = () => navigate(routes.client.didYouKnow()) + const { t } = useTranslation(); + const dispatch = useDispatch(); + const navigate = useNavigate(); + const birthdate = useSelector(selectors.selectBirthdate); + const [isDisabled, setIsDisabled] = useState(true); + const nextRoute = window.location.href.includes("/epe/") + ? routes.client.epePayment() + : routes.client.didYouKnow(); + const handleNext = () => navigate(nextRoute); const handleValid = (birthdate: string) => { - dispatch(actions.form.addDate(birthdate)) - setIsDisabled(birthdate === '') - } + dispatch(actions.form.addDate(birthdate)); + setIsDisabled(birthdate === ""); + }; return ( -
- {t('lets_start')} - {t('date_of_birth')} +
+ + {t("lets_start")} + + {t("date_of_birth")} setIsDisabled(true)} - inputClassName='date-picker-input' + inputClassName="date-picker-input" /> - {t('next')} + {t("next")} -
- ) + ); } -export default BirthdayPage +export default BirthdayPage; diff --git a/src/components/PaymentPage/methods/Stripe/CheckoutForm.tsx b/src/components/PaymentPage/methods/Stripe/CheckoutForm.tsx index 59340d1..556ea57 100644 --- a/src/components/PaymentPage/methods/Stripe/CheckoutForm.tsx +++ b/src/components/PaymentPage/methods/Stripe/CheckoutForm.tsx @@ -15,11 +15,13 @@ import styles from "./styles.module.css"; interface ICheckoutFormProps { children?: JSX.Element | null; subscriptionReceiptId?: string; + returnUrl?: string; } export default function CheckoutForm({ children, subscriptionReceiptId, + returnUrl, }: ICheckoutFormProps) { const stripe = useStripe(); const elements = useElements(); @@ -43,7 +45,9 @@ export default function CheckoutForm({ const { error } = await stripe.confirmPayment({ elements, confirmParams: { - return_url: `https://${window.location.host}/payment/result/${subscriptionReceiptId}/`, + return_url: returnUrl + ? returnUrl + : `https://${window.location.host}/payment/result/${subscriptionReceiptId}/`, }, }); if (error) { @@ -75,9 +79,7 @@ export default function CheckoutForm({ className={styles.button} > Secure - - {isProcessing ? "Processing..." : "Start"} - + {isProcessing ? "Processing..." : "Start"} {!!message.length && ( diff --git a/src/components/PaymentPage/results/index.tsx b/src/components/PaymentPage/results/index.tsx index e0b3421..df19607 100644 --- a/src/components/PaymentPage/results/index.tsx +++ b/src/components/PaymentPage/results/index.tsx @@ -16,6 +16,7 @@ function PaymentResultPage(): JSX.Element { const dispatch = useDispatch(); const [searchParams] = useSearchParams(); const status = searchParams.get("redirect_status"); + const type = searchParams.get("type"); // const { id } = useParams(); // const requestTimeOutRef = useRef<NodeJS.Timeout>(); const [isLoading] = useState(true); @@ -89,9 +90,17 @@ function PaymentResultPage(): JSX.Element { useEffect(() => { if (status === "succeeded") { dispatch(actions.status.update("subscribed")); - return navigate(routes.client.paymentSuccess()); + let successPaymentRoute = routes.client.paymentSuccess(); + if (type === "epe") { + successPaymentRoute = routes.client.epeSuccessPayment(); + } + return navigate(successPaymentRoute); } - return navigate(routes.client.paymentFail()); + let failPaymentRoute = routes.client.paymentFail(); + if (type === "epe") { + failPaymentRoute = routes.client.epeFailPayment(); + } + return navigate(failPaymentRoute); }, [navigate, status, dispatch]); return <div className={styles.page}>{isLoading && <Loader />}</div>; diff --git a/src/components/pages/PaymentWithEmailPage/PaymentForm/index.tsx b/src/components/pages/PaymentWithEmailPage/PaymentForm/index.tsx new file mode 100644 index 0000000..bb6a583 --- /dev/null +++ b/src/components/pages/PaymentWithEmailPage/PaymentForm/index.tsx @@ -0,0 +1,36 @@ +import { Elements } from "@stripe/react-stripe-js"; +import styles from "./styles.module.css"; +import CheckoutForm from "@/components/PaymentPage/methods/Stripe/CheckoutForm"; +import { useEffect, useState } from "react"; +import { Stripe, loadStripe } from "@stripe/stripe-js"; +import SecurityPayments from "../../TrialPayment/components/SecurityPayments"; + +interface IPaymentFormProps { + stripePublicKey: string; + clientSecret: string; + returnUrl: string; +} + +function PaymentForm({ stripePublicKey, clientSecret, returnUrl }: IPaymentFormProps) { + const [stripePromise, setStripePromise] = + useState<Promise<Stripe | null> | null>(null); + + useEffect(() => { + setStripePromise(loadStripe(stripePublicKey)); + }, [stripePublicKey]); + return ( + <div className={styles["payment-modal"]}> + <div className={styles["payment-method-container"]}> + {stripePromise && clientSecret && ( + <Elements stripe={stripePromise} options={{ clientSecret }}> + <CheckoutForm returnUrl={returnUrl} /> + </Elements> + )} + </div> + <SecurityPayments /> + <p className={styles.address}>500 N RAINBOW BLVD LAS VEGAS, NV 89107</p> + </div> + ); +} + +export default PaymentForm; diff --git a/src/components/pages/PaymentWithEmailPage/PaymentForm/styles.module.css b/src/components/pages/PaymentWithEmailPage/PaymentForm/styles.module.css new file mode 100644 index 0000000..ac07530 --- /dev/null +++ b/src/components/pages/PaymentWithEmailPage/PaymentForm/styles.module.css @@ -0,0 +1,44 @@ +.payment-modal { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 250px; + gap: 25px; + color: #2f2e37; +} + +.title { + font-weight: 700; + font-size: 20px; + line-height: 20px; + text-align: center; + margin: 0; +} + +.sub-plan-description { + font-size: 12px; + text-align: center; + line-height: 150%; +} + +.payment-method-container { + width: 100%; +} + +.address { + margin-bottom: 24px; +} + +.payment-method { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 16px; +} + +.address { + color: gray; + font-size: 10px; +} diff --git a/src/components/pages/PaymentWithEmailPage/ResultPayment/FailPaymentPage/index.tsx b/src/components/pages/PaymentWithEmailPage/ResultPayment/FailPaymentPage/index.tsx new file mode 100644 index 0000000..0bb67d7 --- /dev/null +++ b/src/components/pages/PaymentWithEmailPage/ResultPayment/FailPaymentPage/index.tsx @@ -0,0 +1,34 @@ +import { useNavigate } from "react-router-dom"; +import { useTranslation } from "react-i18next"; +import routes from "@/routes"; +import styles from "./styles.module.css"; +import Title from "@/components/Title"; +import MainButton from "@/components/MainButton"; + +function FailPaymentPage(): JSX.Element { + const { t } = useTranslation(); + const navigate = useNavigate(); + const handleNext = () => navigate(routes.client.epePayment()); + + return ( + <section className={`${styles.page} page`}> + <img + src="/ExclamationIcon.png" + alt="Exclamation Icon" + style={{ minHeight: "180px" }} + /> + <div className={styles.text}> + <Title variant="h1">{t("auweb.pay_bad.title")} +

{t("auweb.pay_bad.text1")}

+ +
+

{t("auweb.pay_bad.text2")}

+ + {t("auweb.pay_bad.button")} + +
+
+ ); +} + +export default FailPaymentPage; diff --git a/src/components/pages/PaymentWithEmailPage/ResultPayment/FailPaymentPage/styles.module.css b/src/components/pages/PaymentWithEmailPage/ResultPayment/FailPaymentPage/styles.module.css new file mode 100644 index 0000000..fa479f4 --- /dev/null +++ b/src/components/pages/PaymentWithEmailPage/ResultPayment/FailPaymentPage/styles.module.css @@ -0,0 +1,38 @@ +.page { + position: relative; + height: calc(100vh - 50px); + /* max-height: -webkit-fill-available; */ + overflow-y: scroll; + justify-content: center; + gap: 80px; +} + +.text { + display: flex; + flex-direction: column; +} + +.list { + font-weight: 500; + white-space: pre-wrap; + text-align: left; +} + +.description { + font-weight: 500; + text-align: center; +} + +.button { + width: 100%; + max-width: 260px; + border-radius: 50px; + background-color: #fe2b57; +} + +.bottom { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; +} diff --git a/src/components/pages/PaymentWithEmailPage/ResultPayment/SuccessPaymentPage/index.tsx b/src/components/pages/PaymentWithEmailPage/ResultPayment/SuccessPaymentPage/index.tsx new file mode 100644 index 0000000..219efb1 --- /dev/null +++ b/src/components/pages/PaymentWithEmailPage/ResultPayment/SuccessPaymentPage/index.tsx @@ -0,0 +1,23 @@ +import { useTranslation } from "react-i18next"; +import styles from "./styles.module.css"; +import Title from "@/components/Title"; + +function SuccessPaymentPage(): JSX.Element { + const { t } = useTranslation(); + + return ( +
+ Success Icon +
+ The information has been sent to your e-mail +

{t("auweb.pay_good.text1")}

+
+
+ ); +} + +export default SuccessPaymentPage; diff --git a/src/components/pages/PaymentWithEmailPage/ResultPayment/SuccessPaymentPage/styles.module.css b/src/components/pages/PaymentWithEmailPage/ResultPayment/SuccessPaymentPage/styles.module.css new file mode 100644 index 0000000..88e4c06 --- /dev/null +++ b/src/components/pages/PaymentWithEmailPage/ResultPayment/SuccessPaymentPage/styles.module.css @@ -0,0 +1,25 @@ +.page { + position: relative; + flex: auto; + height: calc(100vh - 50px); + max-height: -webkit-fill-available; + justify-content: center; + gap: 80px; +} + +.text { + display: flex; + flex-direction: column; +} + +.text > p { + text-align: center; + font-weight: 500; +} + +.button { + width: 100%; + max-width: 260px; + border-radius: 50px; + background-color: #fe2b57; +} diff --git a/src/components/pages/PaymentWithEmailPage/index.tsx b/src/components/pages/PaymentWithEmailPage/index.tsx new file mode 100644 index 0000000..7638b76 --- /dev/null +++ b/src/components/pages/PaymentWithEmailPage/index.tsx @@ -0,0 +1,213 @@ +import EmailInput from "@/components/EmailEnterPage/EmailInput"; +import styles from "./styles.module.css"; +import { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { actions, selectors } from "@/store"; +import { useDispatch, useSelector } from "react-redux"; +import MainButton from "@/components/MainButton"; +import Loader, { LoaderColor } from "@/components/Loader"; +import { useAuth } from "@/auth"; +import { ApiError, extractErrorMessage, useApi } from "@/api"; +import { getClientTimezone } from "@/locales"; +import ErrorText from "@/components/ErrorText"; +import Title from "@/components/Title"; +import NameInput from "@/components/EmailEnterPage/NameInput"; +import { getZodiacSignByDate } from "@/services/zodiac-sign"; +import { + ResponsePost, + ResponsePostExistPaymentData, +} from "@/api/resources/SinglePayment"; +import { useNavigate } from "react-router-dom"; +import routes from "@/routes"; +import PaymentForm from "./PaymentForm"; + +function PaymentWithEmailPage() { + const { t, i18n } = useTranslation(); + const { signUp } = useAuth(); + const api = useApi(); + const navigate = useNavigate(); + const timezone = getClientTimezone(); + const dispatch = useDispatch(); + const birthday = useSelector(selectors.selectBirthday); + const locale = i18n.language; + const [email, setEmail] = useState(""); + const [name, setName] = useState(""); + const [isValidEmail, setIsValidEmail] = useState(false); + const [isValidName, setIsValidName] = useState(true); + const [isDisabled, setIsDisabled] = useState(true); + const [isLoading, setIsLoading] = useState(false); + const [isAuth, setIsAuth] = useState(false); + const [apiError, setApiError] = useState(null); + const [error, setError] = useState(false); + const [paymentIntent, setPaymentIntent] = useState< + ResponsePost | ResponsePostExistPaymentData | null + >(null); + const returnUrl = `${window.location.protocol}//${window.location.host}/payment/result/?type=epe`; + + useEffect(() => { + if (isValidName && isValidEmail) { + setIsDisabled(false); + } else { + setIsDisabled(true); + } + }, [isValidEmail, email, isValidName, name]); + + const handleValidEmail = (email: string) => { + dispatch(actions.form.addEmail(email)); + setEmail(email); + setIsValidEmail(true); + }; + + const handleValidName = (name: string) => { + setName(name); + setIsValidName(true); + }; + + const authorization = async () => { + try { + setIsLoading(true); + const auth = await api.auth({ email, timezone, locale }); + const { + auth: { token, user }, + } = auth; + signUp(token, user); + const payload = { + user: { + profile_attributes: { + birthday, + full_name: name, + }, + }, + token, + }; + const updatedUser = await api.updateUser(payload).catch((error) => { + console.log("Error: ", error); + }); + + if (updatedUser?.user) { + dispatch(actions.user.update(updatedUser.user)); + } + if (name) { + dispatch( + actions.user.update({ + username: name, + }) + ); + } + dispatch(actions.status.update("registred")); + setIsAuth(true); + const userUpdated = await api.getUser({ token }); + return { user: userUpdated?.user, token }; + } catch (error) { + console.error(error); + if (error instanceof ApiError) { + setApiError(error as ApiError); + } else { + setError(true); + } + } + }; + + const handleClick = async () => { + const authData = await authorization(); + if (!authData) { + return; + } + const { user, token } = authData; + console.log(token); + + const productsSinglePayment = await api.getSinglePaymentProducts({ + id: "1", + token, + }); + const { productId } = productsSinglePayment[0]; + const createSinglePayment = await api.createSinglePayment({ + token, + data: { + user: { + id: `${user?.id}`, + email, + name, + sign: user?.profile?.sign?.sign || getZodiacSignByDate(birthday), + age: user?.profile?.age?.years || 1, + }, + partner: { + sign: "partner_cancer", + age: 26, + }, + paymentInfo: { + productId, + }, + return_url: returnUrl, + }, + }); + setPaymentIntent(createSinglePayment); + setIsLoading(false); + if ("payment" in createSinglePayment) { + if (createSinglePayment.payment.status === "paid") + return navigate(routes.client.epeSuccessPayment()); + return navigate(routes.client.epeFailPayment()); + } + }; + + return ( +
+ {paymentIntent && "paymentIntent" in paymentIntent && ( + + )} + {!paymentIntent && ( + <> + setIsValidName(true)} + /> + setIsValidEmail(false)} + /> + + + {isLoading && } + {!isLoading && + !(!apiError && !error && !isLoading && isAuth) && + t("_continue")} + {!apiError && !error && !isLoading && isAuth && ( + Success Icon + )} + + + )} + {(error || apiError) && ( + + Something went wrong + + )} + {apiError && ( + + )} +
+ ); +} + +export default PaymentWithEmailPage; diff --git a/src/components/pages/PaymentWithEmailPage/styles.module.css b/src/components/pages/PaymentWithEmailPage/styles.module.css new file mode 100644 index 0000000..27971fd --- /dev/null +++ b/src/components/pages/PaymentWithEmailPage/styles.module.css @@ -0,0 +1,61 @@ +.page { + /* position: relative; */ + position: static; + height: fit-content; + min-height: calc(100dvh - 103px); + /* max-height: -webkit-fill-available; */ + display: flex; + justify-items: center; + justify-content: center; + align-items: center; + /* gap: 16px; */ +} + +.button { + border-radius: 12px; + margin-top: 0; + box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px; + height: 50px; + min-height: 0; + background: linear-gradient( + 165.54deg, + rgb(20, 19, 51) -33.39%, + rgb(32, 34, 97) 15.89%, + rgb(84, 60, 151) 55.84%, + rgb(105, 57, 162) 74.96% + ); + font-size: 18px; + line-height: 21px; +} + +.payment-loader { + display: flex; + justify-content: center; + align-items: center; +} + +.cross { + position: absolute; + top: -36px; + right: 28px; + width: 22px; + height: 22px; + cursor: pointer; + z-index: 9; +} + +.title { + font-size: 27px; + font-weight: 700; + margin: 0; +} + +.email { + font-size: 17px; + font-weight: 500; + margin: 0; +} + +.success-icon { + height: 100%; +} diff --git a/src/components/pages/TrialPayment/components/PaymentModal/index.tsx b/src/components/pages/TrialPayment/components/PaymentModal/index.tsx index 472ade4..1473ca0 100644 --- a/src/components/pages/TrialPayment/components/PaymentModal/index.tsx +++ b/src/components/pages/TrialPayment/components/PaymentModal/index.tsx @@ -22,6 +22,9 @@ import PayPalButton from "./components/PayPalButton"; interface IPaymentModalProps { activeSubscriptionPlan?: ISubscriptionPlan; + stripePublicKey?: string; + singlePayClientSecret?: string; + defaultPaymentMethod?: EPaymentMethod; } function PaymentModal({ activeSubscriptionPlan }: IPaymentModalProps) { diff --git a/src/routes.ts b/src/routes.ts index c760aff..1db9fa2 100755 --- a/src/routes.ts +++ b/src/routes.ts @@ -4,6 +4,7 @@ const host = ""; export const apiHost = "https://api-web.aura.wit.life"; const siteHost = "https://aura.wit.life"; const prefix = "api/v1"; +const dApiHost = "https://dev.api.witapps.us"; const routes = { client: { @@ -14,17 +15,22 @@ const routes = { palmistryBirthdate: () => [host, "palmistry", "birthdate"].join("/"), palmistryPalmsHold: () => [host, "palmistry", "palms-hold"].join("/"), palmistryWish: () => [host, "palmistry", "wish"].join("/"), - palmistryRelationship: () => [host, "palmistry", "relationship-status"].join("/"), - palmistryResonatedElement: () => [host, "palmistry", "resonated-element"].join("/"), - palmistryColorYouLike: () => [host, "palmistry", "color-you-like"].join("/"), + palmistryRelationship: () => + [host, "palmistry", "relationship-status"].join("/"), + palmistryResonatedElement: () => + [host, "palmistry", "resonated-element"].join("/"), + palmistryColorYouLike: () => + [host, "palmistry", "color-you-like"].join("/"), palmistryDecisions: () => [host, "palmistry", "decisions"].join("/"), palmistryGuidancePlan: () => [host, "palmistry", "guidance-plan"].join("/"), - palmistryPersonalStatement: () => [host, "palmistry", "personal-statement"].join("/"), + palmistryPersonalStatement: () => + [host, "palmistry", "personal-statement"].join("/"), palmistryScanInfo: () => [host, "palmistry", "scan-info"].join("/"), palmistryUpload: () => [host, "palmistry", "upload"].join("/"), palmistryScanPhoto: () => [host, "palmistry", "scan-photo"].join("/"), palmistryEmail: () => [host, "palmistry", "email"].join("/"), - palmistrySubscriptionPlan: () => [host, "palmistry", "subscription-plan"].join("/"), + palmistrySubscriptionPlan: () => + [host, "palmistry", "subscription-plan"].join("/"), palmistryPaywall: () => [host, "palmistry", "paywall"].join("/"), palmistryPayment: () => [host, "palmistry", "payment"].join("/"), palmistryDiscount: () => [host, "palmistry", "discount"].join("/"), @@ -108,6 +114,12 @@ const routes = { unlimitedReadings: () => [host, "unlimited-readings"].join("/"), addConsultation: () => [host, "add-consultation"].join("/"), + // Email - Pay - Email + epeBirthdate: () => [host, "epe", "birthdate"].join("/"), + epePayment: () => [host, "epe", "payment"].join("/"), + epeSuccessPayment: () => [host, "epe", "success-payment"].join("/"), + epeFailPayment: () => [host, "epe", "fail-payment"].join("/"), + notFound: () => [host, "404"].join("/"), }, server: { @@ -164,6 +176,10 @@ const routes = { ), getAiRequestsV2: (id: string) => [apiHost, "api/v2", "ai", "requests", `${id}.json`].join("/"), + + dApiTestPaymentProducts: () => + [dApiHost, "payment", "test", "products"].join("/"), + dApiPaymentCheckout: () => [dApiHost, "payment", "checkout"].join("/"), }, }; @@ -266,6 +282,7 @@ export const withoutFooterRoutes = [ routes.client.addReport(), routes.client.unlimitedReadings(), routes.client.addConsultation(), + routes.client.epeSuccessPayment(), ]; export const withoutFooterPartOfRoutes = [routes.client.questionnaire()]; @@ -334,14 +351,15 @@ export const withoutHeaderRoutes = [ routes.client.email("marketing-landing"), routes.client.email("marketing-trial-payment"), routes.client.tryApp(), + routes.client.epeSuccessPayment(), ]; export const hasNoHeader = (path: string) => { let result = true; withoutHeaderRoutes.forEach((route) => { if ( - !path.includes("palmistry") && path.includes(route) || - path.includes("palmistry") && path === route + (!path.includes("palmistry") && path.includes(route)) || + (path.includes("palmistry") && path === route) ) { result = false; }