diff --git a/src/components/PaymentModal/index.tsx b/src/components/PaymentModal/index.tsx index ed11d8b..fe120cd 100644 --- a/src/components/PaymentModal/index.tsx +++ b/src/components/PaymentModal/index.tsx @@ -149,7 +149,10 @@ function PaymentModal({ <>

You will be charged only{" "} - ${getPrice(_activeProduct)} for your 3-day trial. + + ${getPrice(_activeProduct)} for your{" "} + {_activeProduct.trialDuration}-day trial. +

We`ll email you a reminder before your trial period diff --git a/src/components/pages/ABDesign/v1/pages/AdditionalDiscount/index.tsx b/src/components/pages/ABDesign/v1/pages/AdditionalDiscount/index.tsx index 1ae6a77..3010dab 100644 --- a/src/components/pages/ABDesign/v1/pages/AdditionalDiscount/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/AdditionalDiscount/index.tsx @@ -3,9 +3,33 @@ import styles from "./styles.module.css"; import MainButton from "@/components/MainButton"; import { useNavigate } from "react-router-dom"; import routes from "@/routes"; +import { usePaywall } from "@/hooks/paywall/usePaywall"; +import { EPlacementKeys } from "@/api/resources/Paywall"; +import { actions, selectors } from "@/store"; +import { useDispatch, useSelector } from "react-redux"; +import { useEffect } from "react"; function AdditionalDiscount() { const navigate = useNavigate(); + const dispatch = useDispatch(); + const activeProduct = useSelector(selectors.selectActiveProduct); + const { products, getText } = usePaywall({ + placementKey: EPlacementKeys["aura.placement.secret.discount"], + }); + + useEffect(() => { + if (!products.length) return; + const _activeProduct = products.find( + (p) => p.trialPrice === activeProduct?.trialPrice + ); + if (!_activeProduct) { + dispatch(actions.payment.update({ activeProduct: products[0] })); + } + if (_activeProduct) { + dispatch(actions.payment.update({ activeProduct: _activeProduct })); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [dispatch, products]); const handleNext = () => { navigate(routes.client.trialPaymentWithDiscountV1()); @@ -14,21 +38,25 @@ function AdditionalDiscount() { return (

- Save 65% off! + Save {(getText("discount.1") as string).replace("-", "")} off! Friends
Fire

- 65% off on your personalized plan + {(getText("discount.1") as string).replace("-", "")} off on your + personalized plan

Present -

7-day trial

+

+ {activeProduct?.trialDuration}-day trial +

- $9 instead of $19 + ${(activeProduct?.price || 0) / 100} instead of $ + {Number(getText("full.price")) / 100}

Get secret discount! diff --git a/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx index e8e6412..20fc605 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx @@ -21,6 +21,7 @@ function TrialChoicePage() { const dispatch = useDispatch(); const navigate = useNavigate(); const selectedPrice = useSelector(selectors.selectSelectedPrice); + const activeProduct = useSelector(selectors.selectActiveProduct); const homeConfig = useSelector(selectors.selectHome); const email = useSelector(selectors.selectEmail); const [isDisabled, setIsDisabled] = useState(true); @@ -30,6 +31,7 @@ function TrialChoicePage() { const { products, isLoading, getText } = usePaywall({ placementKey: EPlacementKeys["aura.placement.redesign.main"], }); + const { videoUrl } = useSelector(selectors.selectPersonalVideo); useEffect(() => { @@ -103,6 +105,10 @@ function TrialChoicePage() {

{getText("text.2", { color: "#1C38EA", + replacement: { + target: "${trialDuration}", + replacement: activeProduct?.trialDuration.toString() || "3", + }, })}

diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentTable/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentTable/index.tsx index 1001329..8859b89 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentTable/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentTable/index.tsx @@ -4,11 +4,13 @@ import CustomButton from "../CustomButton"; import GuardPayments from "../GuardPayments"; import { useState } from "react"; import FullScreenModal from "@/components/FullScreenModal"; -import { IPaywallProduct } from "@/api/resources/Paywall"; +import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall"; +import { usePaywall } from "@/hooks/paywall/usePaywall"; interface IPaymentTableProps { product: IPaywallProduct; gender: string; + placementKey: EPlacementKeys; buttonClick: () => void; } @@ -16,7 +18,15 @@ const getPrice = (product: IPaywallProduct) => { return (product.trialPrice || 0) / 100; }; -function PaymentTable({ gender, product, buttonClick }: IPaymentTableProps) { +function PaymentTable({ + gender, + product, + placementKey, + buttonClick, +}: IPaymentTableProps) { + const { getText } = usePaywall({ + placementKey, + }); const [isOpenPrivacyModal, setIsOpenPrivacyModal] = useState(false); const handleSubscriptionPolicyClick = (event: React.MouseEvent) => { event.preventDefault(); @@ -63,8 +73,10 @@ function PaymentTable({ gender, product, buttonClick }: IPaymentTableProps) {

Your cost per 2 weeks after trial

- $65 - ${product.trialPrice / 100} + + ${Number(getText("full.price")) / 100} + + ${product.price / 100}
@@ -75,10 +87,11 @@ function PaymentTable({ gender, product, buttonClick }: IPaymentTableProps) {

You are enrolling in 2 weeks subscription. By continuing you agree that - if you don't cancel prior to the end of the 3-day trial for the $ - {getPrice(product)} you will automatically be charged $19 every 2 weeks - until you cancel in settings. Learn more about cancellation and refund - policy in{" "} + if you don't cancel prior to the end of the {product.trialDuration}-day + trial for the ${getPrice(product)} you will automatically be charged $ + {product.price / 100}{" "} + every 2 weeks until you cancel in settings. Learn more about + cancellation and refund policy in{" "} Subscription policy

diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx index 7220270..d20a3a8 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx @@ -163,6 +163,7 @@ function TrialPaymentPage() { gender={gender} product={activeProduct} buttonClick={openStripeModal} + placementKey={EPlacementKeys["aura.placement.redesign.main"]} />
); diff --git a/src/components/pages/ABDesign/v1/pages/TrialPaymentWithDiscount/PaymentDiscountTable/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPaymentWithDiscount/PaymentDiscountTable/index.tsx index 1499982..cd57286 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialPaymentWithDiscount/PaymentDiscountTable/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialPaymentWithDiscount/PaymentDiscountTable/index.tsx @@ -2,7 +2,8 @@ import Title from "@/components/Title"; import styles from "./styles.module.css"; import { useSelector } from "react-redux"; import { selectors } from "@/store"; -import { IPaywallProduct } from "@/api/resources/Paywall"; +import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall"; +import { usePaywall } from "@/hooks/paywall/usePaywall"; const getPrice = (product: IPaywallProduct | null) => { if (!product) { @@ -12,6 +13,9 @@ const getPrice = (product: IPaywallProduct | null) => { }; function PaymentDiscountTable() { + const { getText } = usePaywall({ + placementKey: EPlacementKeys["aura.placement.secret.discount"], + }); const activeProduct = useSelector(selectors.selectActiveProduct); return ( @@ -30,14 +34,16 @@ function PaymentDiscountTable() {

Secret discount applied!

- -30% - -50% + {getText("discount.0")} + {getText("discount.1")}

Your cost per 14 days after trial:

- $19 + + ${Number(getText("full.price")) / 100} + ${(activeProduct?.price || 0) / 100}
diff --git a/src/components/pages/ABDesign/v1/pages/TrialPaymentWithDiscount/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPaymentWithDiscount/index.tsx index a0c51b9..cbc9cf2 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialPaymentWithDiscount/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialPaymentWithDiscount/index.tsx @@ -3,39 +3,20 @@ import styles from "./styles.module.css"; import MainButton from "@/components/MainButton"; import PaymentDiscountTable from "./PaymentDiscountTable"; import Modal from "@/components/Modal"; -import { useEffect, useState } from "react"; -import { actions, selectors } from "@/store"; -import { useDispatch, useSelector } from "react-redux"; -import { usePaywall } from "@/hooks/paywall/usePaywall"; +import { useState } from "react"; +import { selectors } from "@/store"; +import { useSelector } from "react-redux"; import { EPlacementKeys } from "@/api/resources/Paywall"; import PaymentModal from "@/components/PaymentModal"; function TrialPaymentWithDiscount() { - const dispatch = useDispatch(); - const { products } = usePaywall({ - placementKey: EPlacementKeys["aura.placement.secret.discount"], - }); - const productFromStore = useSelector(selectors.selectActiveProduct); const [isOpenPaymentModal, setIsOpenPaymentModal] = useState(false); + const activeProduct = useSelector(selectors.selectActiveProduct); const handleClose = () => { setIsOpenPaymentModal(false); }; - useEffect(() => { - if (!products.length) return; - const activeProduct = products.find( - (p) => p.trialPrice === productFromStore?.trialPrice - ); - if (!activeProduct) { - dispatch(actions.payment.update({ activeProduct: products[0] })); - } - if (activeProduct) { - dispatch(actions.payment.update({ activeProduct })); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [dispatch, products]); - return (
@@ -56,14 +37,14 @@ function TrialPaymentWithDiscount() { className={styles.button} onClick={() => setIsOpenPaymentModal(true)} > - Start your 3-day trial + Start your {activeProduct?.trialDuration}-day trial

- By continuing you agree that if you don't cancel prior to the end of the - 3-days trial, you will automatically be charged $ - {(productFromStore?.price || 0) / 100} for the introductory period of 14 - days thereafter the standard rate of $ - {(productFromStore?.price || 0) / 100} every 14 days until you cancel in + By continuing you agree that if you don't cancel prior to the end of the{" "} + {activeProduct?.trialDuration}-days trial, you will automatically be + charged ${(activeProduct?.price || 0) / 100} for the introductory + period of 14 days thereafter the standard rate of $ + {(activeProduct?.price || 0) / 100} every 14 days until you cancel in settings. Learn more about cancellation and refund policy in Subscription terms.

diff --git a/src/components/pages/EmailLetters/MarketingTrialPayment/index.tsx b/src/components/pages/EmailLetters/MarketingTrialPayment/index.tsx index c8561a1..38097d2 100644 --- a/src/components/pages/EmailLetters/MarketingTrialPayment/index.tsx +++ b/src/components/pages/EmailLetters/MarketingTrialPayment/index.tsx @@ -7,14 +7,15 @@ import PaymentModal from "@/components/PaymentModal"; import { useEffect, useState } from "react"; import { usePaywall } from "@/hooks/paywall/usePaywall"; import { EPlacementKeys } from "@/api/resources/Paywall"; -import { useDispatch } from "react-redux"; -import { actions } from "@/store"; +import { useDispatch, useSelector } from "react-redux"; +import { actions, selectors } from "@/store"; function MarketingTrialPayment() { const dispatch = useDispatch(); const [isOpenPaymentModal, setIsOpenPaymentModal] = useState(false); + const activeProduct = useSelector(selectors.selectActiveProduct); - const { products } = usePaywall({ + const { products, getText } = usePaywall({ placementKey: EPlacementKeys["aura.placement.email.marketing"], }); @@ -48,7 +49,7 @@ function MarketingTrialPayment() {
Special Offer
- Start your 7-day trial + Start your {activeProduct?.trialDuration}-day trial

No pressure. Cancel anytime

@@ -67,16 +68,16 @@ function MarketingTrialPayment() { Your cost per 2 weeks after trial

- $29 - $19 + ${Number(getText("full.price")) / 100} + ${(activeProduct?.price || 0) / 100}

-

Save $10 every period

+

{getText("text.save")}

You will be charged only{" "} - ${(products[0]?.trialPrice / 100).toFixed(2) || 0} for your 7-day + ${(products[0]?.trialPrice / 100).toFixed(2) || 0} for your {activeProduct?.trialDuration}-day trial. {" "} Subscription renews automatically until cancelled. You{" "} @@ -87,8 +88,8 @@ function MarketingTrialPayment() {

Get access

- By continuing you agree that if you don't cancel prior to the end of - the 3-days trial, you will automatically be charged $19 every 2 + By continuing you agree that if you don`t cancel prior to the end of + the {activeProduct?.trialDuration}-days trial, you will automatically be charged ${(activeProduct?.price || 0) / 100} every 2 weeks until you cancel in settings. Learn more about cancellation and refund policy in Subscription terms

diff --git a/src/components/palmistry/payment-screen/payment-screen.tsx b/src/components/palmistry/payment-screen/payment-screen.tsx index 13be936..e0e4cca 100644 --- a/src/components/palmistry/payment-screen/payment-screen.tsx +++ b/src/components/palmistry/payment-screen/payment-screen.tsx @@ -125,7 +125,7 @@ export default function PaymentScreen() {
-

Start your 7-day trial

+

Start your {activeProductFromStore?.trialDuration}-day trial

Total today @@ -163,7 +163,7 @@ export default function PaymentScreen() {
You will be charged only{" "} - ${getFormattedPrice(trialPrice)} for your 7-day trial. + ${getFormattedPrice(trialPrice)} for your {activeProductFromStore?.trialDuration}-day trial. diff --git a/src/hooks/paywall/usePaywall.tsx b/src/hooks/paywall/usePaywall.tsx index 6bf739b..cd4e4ed 100644 --- a/src/hooks/paywall/usePaywall.tsx +++ b/src/hooks/paywall/usePaywall.tsx @@ -83,14 +83,12 @@ export function usePaywall({ placementKey }: IUsePaywallProps) { }, [getPaywallByPlacementKey, placementKey, isMustUpdate]); const getText = useCallback( - ( - key: string, - { + (key: string, options?: IGetTextProps) => { + const { replacementSelector = "span", color = "inherit", replacement, - }: IGetTextProps - ) => { + } = options || {}; const property = properties.find((property) => property.key === key); if (!property) return ""; const text = property.value;