gofnnp/w-funnel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add screen to funnel

Browse Source
This commit is contained in:
dev.daminik00 2025-10-20 00:22:59 +02:00
parent e8662ada7e
commit 4a97bf67f6
3 changed files with 169 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
public/funnels/soulmate.json
View File

@ -2322,6 +2322,12 @@
"cornerRadius": "3xl", "cornerRadius": "3xl",
"showPrivacyTermsConsent": false "showPrivacyTermsConsent": false
}, },
"navigation": {
"rules": [],
"defaultNextScreenId": "specialoffer",
"isEndScreen": true,
"onBackScreenId": "specialoffer"
},
"variants": [], "variants": [],
"headerBlock": { "headerBlock": {
"text": { "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"
}
}
]
}
} }
] ]
} }

11
src/components/funnel/templates/SpecialOffer/SpecialOffer.tsx
View File

@ -51,6 +51,9 @@ export function SpecialOfferTemplate({
const trialPrice = variant?.trialPrice || 0; const trialPrice = variant?.trialPrice || 0;
const price = variant?.price || 0; const price = variant?.price || 0;
const oldPrice = 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 billingPeriod = placement?.billingPeriod;
const billingInterval = placement?.billingInterval || 1; const billingInterval = placement?.billingInterval || 1;
const currency = placement?.currency || Currency.USD; const currency = placement?.currency || Currency.USD;
@ -61,7 +64,7 @@ export function SpecialOfferTemplate({
const trialPeriodText = formatPeriod(trialPeriod, trialInterval); const trialPeriodText = formatPeriod(trialPeriod, trialInterval);
const billingPeriodText = formatPeriod(billingPeriod, billingInterval); const billingPeriodText = formatPeriod(billingPeriod, billingInterval);
const trialPeriodHyphenText = formatPeriodHyphen(trialPeriod, trialInterval); const trialPeriodHyphenText = formatPeriodHyphen(trialPeriod, trialInterval);
const oldTrialPeriodText = formatPeriod(trialPeriod, 7); const oldTrialPeriodText = formatPeriod(oldTrialPeriod, oldTrialInterval);
const handlePayClick = () => { const handlePayClick = () => {
if (isLoadingRedirect) { if (isLoadingRedirect) {
@ -75,8 +78,8 @@ export function SpecialOfferTemplate({
}; };
const computeDiscountPercent = () => { const computeDiscountPercent = () => {
if (!oldPrice || !trialPrice || oldPrice <= 0) return undefined; if (!oldTrialPrice || !trialPrice || oldTrialPrice <= 0) return undefined;
const ratio = 1 - trialPrice / oldPrice; const ratio = 1 - trialPrice / oldTrialPrice;
const percent = Math.max(0, Math.min(100, Math.round(ratio * 100))); const percent = Math.max(0, Math.min(100, Math.round(ratio * 100)));
return String(percent); return String(percent);
}; };
@ -86,7 +89,7 @@ export function SpecialOfferTemplate({
const values: Record<string, string> = { const values: Record<string, string> = {
trialPrice: formattedTrialPrice, trialPrice: formattedTrialPrice,
billingPrice: formattedBillingPrice, billingPrice: formattedBillingPrice,
oldTrialPrice: getFormattedPrice(oldPrice || 0, currency), oldTrialPrice: getFormattedPrice(oldTrialPrice, currency),
discountPercent: computeDiscountPercent() ?? "", discountPercent: computeDiscountPercent() ?? "",
trialPeriod: trialPeriodText, trialPeriod: trialPeriodText,
billingPeriod: billingPeriodText, billingPeriod: billingPeriodText,

81
src/lib/funnel/bakedFunnels.ts
View File

@ -2330,6 +2330,12 @@ export const BAKED_FUNNELS: Record<string, FunnelDefinition> = {
"cornerRadius": "3xl", "cornerRadius": "3xl",
"showPrivacyTermsConsent": false "showPrivacyTermsConsent": false
}, },
"navigation": {
"rules": [],
"defaultNextScreenId": "specialoffer",
"isEndScreen": true,
"onBackScreenId": "specialoffer"
},
"variants": [], "variants": [],
"headerBlock": { "headerBlock": {
"text": { "text": {
@ -2755,6 +2761,81 @@ export const BAKED_FUNNELS: Record<string, FunnelDefinition> = {
] ]
} }
} }
},
{
"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"
}
}
]
}
} }
] ]
} }