From 4a97bf67f693f818a6f8ee5015d59084b02a6293 Mon Sep 17 00:00:00 2001 From: "dev.daminik00" Date: Mon, 20 Oct 2025 00:22:59 +0200 Subject: [PATCH] add screen to funnel --- public/funnels/soulmate.json | 81 +++++++++++++++++++ .../templates/SpecialOffer/SpecialOffer.tsx | 11 ++- src/lib/funnel/bakedFunnels.ts | 81 +++++++++++++++++++ 3 files changed, 169 insertions(+), 4 deletions(-) diff --git a/public/funnels/soulmate.json b/public/funnels/soulmate.json index 6b46418..9ebc35b 100644 --- a/public/funnels/soulmate.json +++ b/public/funnels/soulmate.json @@ -2322,6 +2322,12 @@ "cornerRadius": "3xl", "showPrivacyTermsConsent": false }, + "navigation": { + "rules": [], + "defaultNextScreenId": "specialoffer", + "isEndScreen": true, + "onBackScreenId": "specialoffer" + }, "variants": [], "headerBlock": { "text": { @@ -2747,6 +2753,81 @@ ] } } + }, + { + "id": "specialoffer", + "template": "specialOffer", + "header": { + "showBackButton": false, + "show": true + }, + "title": { + "text": "Special Offer", + "show": false, + "font": "manrope", + "weight": "bold", + "size": "2xl", + "align": "left", + "color": "default" + }, + "bottomActionButton": { + "show": true, + "text": "GET {{trialPeriod}} TRIAL", + "cornerRadius": "3xl", + "showPrivacyTermsConsent": false + }, + "navigation": { + "rules": [], + "isEndScreen": true + }, + "variants": [], + "text": { + "title": { + "text": "Special Offer" + }, + "subtitle": { + "text": "SAVE {{discountPercent}}% OFF!" + }, + "description": { + "trialPrice": { + "text": "{{trialPrice}}" + }, + "text": { + "text": " instead of " + }, + "oldTrialPrice": { + "text": "~~{{oldTrialPrice}}~~" + } + } + }, + "advantages": { + "items": [ + { + "icon": { + "text": "🔥" + }, + "text": { + "text": " **{{trialPeriodHyphen}}** trial instead of ~~{{oldTrialPeriod}}~~" + } + }, + { + "icon": { + "text": "💝" + }, + "text": { + "text": " Get **{{discountPercent}}%** off your Soulmate Sketch" + } + }, + { + "icon": { + "text": "💌" + }, + "text": { + "text": " Includes the **“Finding the One”** Guide" + } + } + ] + } } ] } \ No newline at end of file diff --git a/src/components/funnel/templates/SpecialOffer/SpecialOffer.tsx b/src/components/funnel/templates/SpecialOffer/SpecialOffer.tsx index c158657..5e3fa29 100644 --- a/src/components/funnel/templates/SpecialOffer/SpecialOffer.tsx +++ b/src/components/funnel/templates/SpecialOffer/SpecialOffer.tsx @@ -51,6 +51,9 @@ export function SpecialOfferTemplate({ const trialPrice = variant?.trialPrice || 0; const price = variant?.price || 0; const oldPrice = variant?.price || 0; + const oldTrialPeriod = "DAY"; // TODO: from main product + const oldTrialInterval = 7; // TODO: from main product + const oldTrialPrice = 100; // TODO: from main product const billingPeriod = placement?.billingPeriod; const billingInterval = placement?.billingInterval || 1; const currency = placement?.currency || Currency.USD; @@ -61,7 +64,7 @@ export function SpecialOfferTemplate({ const trialPeriodText = formatPeriod(trialPeriod, trialInterval); const billingPeriodText = formatPeriod(billingPeriod, billingInterval); const trialPeriodHyphenText = formatPeriodHyphen(trialPeriod, trialInterval); - const oldTrialPeriodText = formatPeriod(trialPeriod, 7); + const oldTrialPeriodText = formatPeriod(oldTrialPeriod, oldTrialInterval); const handlePayClick = () => { if (isLoadingRedirect) { @@ -75,8 +78,8 @@ export function SpecialOfferTemplate({ }; const computeDiscountPercent = () => { - if (!oldPrice || !trialPrice || oldPrice <= 0) return undefined; - const ratio = 1 - trialPrice / oldPrice; + if (!oldTrialPrice || !trialPrice || oldTrialPrice <= 0) return undefined; + const ratio = 1 - trialPrice / oldTrialPrice; const percent = Math.max(0, Math.min(100, Math.round(ratio * 100))); return String(percent); }; @@ -86,7 +89,7 @@ export function SpecialOfferTemplate({ const values: Record = { trialPrice: formattedTrialPrice, billingPrice: formattedBillingPrice, - oldTrialPrice: getFormattedPrice(oldPrice || 0, currency), + oldTrialPrice: getFormattedPrice(oldTrialPrice, currency), discountPercent: computeDiscountPercent() ?? "", trialPeriod: trialPeriodText, billingPeriod: billingPeriodText, diff --git a/src/lib/funnel/bakedFunnels.ts b/src/lib/funnel/bakedFunnels.ts index 66ed7a4..2bcbf06 100644 --- a/src/lib/funnel/bakedFunnels.ts +++ b/src/lib/funnel/bakedFunnels.ts @@ -2330,6 +2330,12 @@ export const BAKED_FUNNELS: Record = { "cornerRadius": "3xl", "showPrivacyTermsConsent": false }, + "navigation": { + "rules": [], + "defaultNextScreenId": "specialoffer", + "isEndScreen": true, + "onBackScreenId": "specialoffer" + }, "variants": [], "headerBlock": { "text": { @@ -2755,6 +2761,81 @@ export const BAKED_FUNNELS: Record = { ] } } + }, + { + "id": "specialoffer", + "template": "specialOffer", + "header": { + "showBackButton": false, + "show": true + }, + "title": { + "text": "Special Offer", + "show": false, + "font": "manrope", + "weight": "bold", + "size": "2xl", + "align": "left", + "color": "default" + }, + "bottomActionButton": { + "show": true, + "text": "GET {{trialPeriod}} TRIAL", + "cornerRadius": "3xl", + "showPrivacyTermsConsent": false + }, + "navigation": { + "rules": [], + "isEndScreen": true + }, + "variants": [], + "text": { + "title": { + "text": "Special Offer" + }, + "subtitle": { + "text": "SAVE {{discountPercent}}% OFF!" + }, + "description": { + "trialPrice": { + "text": "{{trialPrice}}" + }, + "text": { + "text": " instead of " + }, + "oldTrialPrice": { + "text": "~~{{oldTrialPrice}}~~" + } + } + }, + "advantages": { + "items": [ + { + "icon": { + "text": "🔥" + }, + "text": { + "text": " **{{trialPeriodHyphen}}** trial instead of ~~{{oldTrialPeriod}}~~" + } + }, + { + "icon": { + "text": "💝" + }, + "text": { + "text": " Get **{{discountPercent}}%** off your Soulmate Sketch" + } + }, + { + "icon": { + "text": "💌" + }, + "text": { + "text": " Includes the **“Finding the One”** Guide" + } + } + ] + } } ] }