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!
- 65% off on your personalized plan
+ {(getText("discount.1") as string).replace("-", "")} off on your
+ personalized plan

-
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;