%# Generated Block Templates - Auto-generated file, do not edit manually %>
<%# Generated: 2026-10-09 09:25:38 UTC %>
<%# Environment: prod %>
<%# Total Blocks: 127 %>
<% screen.content?.forEach(function(item, contentItemIndex) { %>
<% if (typeof overrideContentItemIndex != "undefined") { contentItemIndex = overrideContentItemIndex } %>
<% if (item.hidden) { return } %>
<% if (item['show-condition']) {
let showCondition = evaluateFunction(item['show-condition'], user_properties);
if (!showCondition) {
return;
}
} %>
<% if (item['visible'] == 'false' || item['visible'] == 'hide') {
return;
} %>
<%# === Core Components === %>
<% if (item.type == 'button') { %>
<%# Block Type: button %>
<%# Styled Component: .type-button %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
type="<%- item.button_type || 'button' %>" data-screen-next="<%- item['data-screen-next'] %>" <%- item.attributes || '' %>>
<%- __(item.content) %>
<% if (item.icon) { %><%- item.icon %> <% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'button-inline') { %>
<%# Block Type: button-inline %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
type="<%- item.button_type || 'button' %>" <%- item.attributes || '' %>>
<%- __(item.content) %>
<% if (item.icon) { %><%- __(item.icon) %> <% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'button-link') { %>
<%# Block Type: button-link %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'sub-title') { %>
<%# Block Type: sub-title %>
<%# Styled Component: .type-sub-title %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%- __(item.content) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'sub-title-gray') { %>
<%# Block Type: sub-title-gray %>
<%# Styled Component: .type-sub-title-gray %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%- __(item.content) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'title') { %>
<%# Block Type: title %>
<%# Styled Component: .type-title %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%- __(item.content) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<%# === Form Components === %>
<% if (item.type == 'billerix-form') { %>
<%# Block Type: billerix-form %>
<%# Styled Component: .type-billerix-form %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'date') { %>
<%# Block Type: date %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'date-format') { %>
<%# Block Type: date-format %>
<%
var dateFormat = item.date_format || 'DD-MM-YYYY';
var dateOrder = [];
if (dateFormat.toUpperCase().indexOf('DD') < dateFormat.toUpperCase().indexOf('MM') &&
dateFormat.toUpperCase().indexOf('MM') < dateFormat.toUpperCase().indexOf('YYYY')) {
dateOrder = ['day', 'month', 'year']; // DD-MM-YYYY
} else if (dateFormat.toUpperCase().indexOf('MM') < dateFormat.toUpperCase().indexOf('DD') &&
dateFormat.toUpperCase().indexOf('DD') < dateFormat.toUpperCase().indexOf('YYYY')) {
dateOrder = ['month', 'day', 'year']; // MM-DD-YYYY
} else {
dateOrder = ['day', 'month', 'year']; // default
}
// Parse item.value if provided
var defaultDay = null;
var defaultMonth = null;
var defaultYear = null;
if (item.value) {
// Try to parse the value as a date
var parsedDate = null;
// Try different separators and formats
var separators = ['-', '.', '/', ' '];
var parts = null;
for (var i = 0; i < separators.length; i++) {
if (item.value.indexOf(separators[i]) > -1) {
parts = item.value.split(separators[i]);
break;
}
}
if (parts && parts.length === 3) {
var p1 = parseInt(parts[0]);
var p2 = parseInt(parts[1]);
var p3 = parseInt(parts[2]);
if (!isNaN(p1) && !isNaN(p2) && !isNaN(p3)) {
// Determine format based on values and current format
if (p3 > 31 || p3.toString().length === 4) {
// Year is last
if (p1 > 12) {
defaultYear = p3; defaultMonth = p2; defaultDay = p1; // DD-MM-YYYY
} else if (p2 > 12) {
defaultYear = p3; defaultMonth = p1; defaultDay = p2; // MM-DD-YYYY
} else {
// Use current format preference
if (dateFormat === 'MM-DD-YYYY') {
defaultYear = p3; defaultMonth = p1; defaultDay = p2;
} else {
defaultYear = p3; defaultMonth = p2; defaultDay = p1; // default DD-MM-YYYY
}
}
} else {
// All values are ambiguous (≤31), use current format
if (dateFormat === 'MM-DD-YYYY') {
defaultYear = p3; defaultMonth = p1; defaultDay = p2;
} else {
defaultYear = p3; defaultMonth = p2; defaultDay = p1; // default DD-MM-YYYY
}
}
}
}
// If parsing failed, try as ISO date
if (defaultDay === null) {
var isoDate = new Date(item.value);
if (!isNaN(isoDate.getTime())) {
defaultDay = isoDate.getDate();
defaultMonth = isoDate.getMonth() + 1;
defaultYear = isoDate.getFullYear();
}
}
}
// If no value provided or parsing failed, don't set any default date
// Leave defaultDay, defaultMonth, defaultYear as null
var minDate = null;
var maxDate = null;
var minYear = null;
var maxYear = null;
if (item.min_date) {
var minParts = __(item.min_date).split('-');
if (minParts.length === 3) {
var minDay = parseInt(minParts[0]);
var minMonth = parseInt(minParts[1]);
var minYearParsed = parseInt(minParts[2]);
minDate = new Date(minYearParsed, minMonth - 1, minDay);
minYear = minYearParsed;
}
}
if (item.max_date) {
var maxParts = __(item.max_date).split('-');
if (maxParts.length === 3) {
var maxDay = parseInt(maxParts[0]);
var maxMonth = parseInt(maxParts[1]);
var maxYearParsed = parseInt(maxParts[2]);
maxDate = new Date(maxYearParsed, maxMonth - 1, maxDay);
maxYear = maxYearParsed;
}
}
// If no min/max specified, use defaults (100 years ago to 1 year ahead)
if (!minYear) {
var currentDate = new Date();
minYear = currentDate.getFullYear() - 100;
}
if (!maxYear) {
var currentDate = new Date();
maxYear = currentDate.getFullYear() + 1;
}
%>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'email') { %>
<%# Block Type: email %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>" data-email-container>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'fastspring-form') { %>
<%# Block Type: fastspring-form %>
<% if (getParams('edit_mode') && ['fastspring'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to FastSpring to use this block
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'hubs-form') { %>
<%# Block Type: hubs-form %>
<%
let hubxFormOptions = '{}';
if (item['form-options']) {
try {
hubxFormOptions = JSON.stringify(item['form-options']);
} catch (e) { /* Do nothing, keep default empty JSON */ }
}
%>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'hubx-form') { %>
<%# Block Type: hubx-form %>
<%# Styled Component: .type-hubx-form %>
<%
let hubxFormOptions = '{}';
if (item['form-options']) {
try {
hubxFormOptions = JSON.stringify(item['form-options']);
} catch (e) { /* Do nothing, keep default empty JSON */ }
}
%>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'number') { %>
<%# Block Type: number %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'paddle-form') { %>
<%# Block Type: paddle-form %>
<%# Styled Component: .type-paddle-form %>
<% if (getParams('edit_mode') && ['paddle'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to Paddle to use this block
<% } %>
' <%- item.attributes || '' %> >
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'password') { %>
<%# Block Type: password %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'paypal-card-form') { %>
<%# Block Type: paypal-card-form %>
<%# Styled Component: .type-paypal-card-form %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'popup-email') { %>
<%# Block Type: popup-email %>
<%# Styled Component: .type-popup-email %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'primer-form') { %>
<%# Block Type: primer-form %>
<%# Styled Component: .type-primer-form %>
<% if (getParams('edit_mode') && ['primer', 'hubx'].indexOf(window?.paywall?.payment_system) == -1) { %>
Change 'Main Payment system' in Paywall Settings to Primer to use this block
<% } %>
<% const isComponentsForm = (item.checkoutVersion || 1) >= 2 || (typeof window !== 'undefined' && !!window.usesPrimerCheckoutComponents); %>
<% if (isComponentsForm) { %>
<% } else { %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'solidgate-form') { %>
<%# Block Type: solidgate-form %>
<%# Styled Component: .type-solidgate-form %>
<%
let solidgateFormOptions = '{}';
const solidgateFormStyles = (typeof item.formStyles === 'string') ? item.formStyles : JSON.stringify(item.formStyles != null ? item.formStyles : {});
const solidgateFormParams = (typeof item.formParams === 'string') ? item.formParams : JSON.stringify(item.formParams != null ? item.formParams : {});
if (item['form-options']) {
try {
solidgateFormOptions = JSON.stringify(item['form-options']);
} catch (e) { /* Do nothing, keep default empty JSON */ }
}
%>
' data-form-styles='<%- escapeHtmlForAttribute(solidgateFormStyles) %>' data-form-params='<%- escapeHtmlForAttribute(solidgateFormParams) %>'>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'stripe-embedded-form') { %>
<%# Block Type: stripe-embedded-form %>
<% if (getParams('edit_mode') && ['stripe'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to Stripe to use this block
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'stripe-form') { %>
<%# Block Type: stripe-form %>
<%# Styled Component: .type-stripe-form %>
<% if (getParams('edit_mode') && ['stripe'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to Stripe to use this block
<% } %>
<%
// Extract form appearance variables with defaults
let formAppearance = {};
try {
formAppearance = typeof item['form-appearance'] === 'string' ? JSON.parse(item['form-appearance']) : (item['form-appearance'] || {});
} catch (e) {
formAppearance = {};
}
const variables = formAppearance.variables || {};
const borderRadius = variables.borderRadius || '4px';
const colorBackground = variables.colorBackground || '#ffffff';
const colorDanger = variables.colorDanger || '#df1b41';
const colorPrimary = variables.colorPrimary || '#0570de';
const colorPrimaryText = variables.colorPrimaryText || '#FF0000';
const colorText = variables.colorText || '#30313d';
const fontFamily = variables.fontFamily || 'Ideal Sans, system-ui, sans-serif';
const spacingUnit = variables.spacingUnit || '2px';
%>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'text') { %>
<%# Block Type: text %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<% if (String(item.label || '').trim()) { %>
<%- item.label %> <% } %>
<% if (item.isTextarea) { %>
<% } else { %>
required<% } %>
value="<%- __(item.value || ((window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id]) ? window.user_properties[item.name || screen.id] : '')) %>"
<%= item.isAutofocus === "false" ? '' : 'data-autofocus' %>
<%- item.attributes || '' %>
data-callback="<%- JSON.stringify({callback: item.callback || ''}).replace(/"/g, '"') %>"
>
<% } %>
<%- __('Please type the answer') %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'time-format') { %>
<%# Block Type: time-format %>
<%
// Parse item.value if provided (expects format like "02:30 PM")
var defaultHour = null;
var defaultMinute = null;
var defaultPeriod = null;
if (item.value) {
var timeParts = item.value.trim().split(/[\s:]+/);
if (timeParts.length >= 2) {
var h = parseInt(timeParts[0]);
var m = parseInt(timeParts[1]);
if (!isNaN(h) && !isNaN(m)) {
// Check if 12-hour format with AM/PM
if (timeParts.length >= 3 && (timeParts[2].toUpperCase() === 'AM' || timeParts[2].toUpperCase() === 'PM')) {
defaultHour = h;
defaultMinute = m;
defaultPeriod = timeParts[2].toUpperCase();
} else {
// Convert 24h to 12h if no AM/PM provided
if (h >= 12) {
defaultPeriod = 'PM';
defaultHour = h > 12 ? h - 12 : 12;
} else {
defaultPeriod = 'AM';
defaultHour = h === 0 ? 12 : h;
}
defaultMinute = m;
}
}
}
}
%>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'time-input') { %>
<%# Block Type: time-input %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'truegate-form') { %>
<%# Block Type: truegate-form %>
<% if (getParams('edit_mode') && ['truegate'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to Truegate to use this block
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'upgate-form') { %>
<%# Block Type: upgate-form %>
<% if (getParams('edit_mode') && ['upgate'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to UpGate to use this block
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'zotlo-form') { %>
<%# Block Type: zotlo-form %>
<% if (getParams('edit_mode') && ['zotlo'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to Zotlo to use this block
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<%# === Payment Components === %>
<% if (item.type == 'button-after-pay') { %>
<%# Block Type: button-after-pay %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'cancel-subscription-button') { %>
<%# Block Type: cancel-subscription-button %>
<%# Styled Component: .type-cancel-subscription-button %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%- __(item.content) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'checkout-summary') { %>
<%# Block Type: checkout-summary %>
<%# Styled Component: .type-checkout-summary %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%-__(item.original_price_text || 'Original price')%>
<%-__(item.discount_text || ' % OFF')%>
<%-__(item.total_text || 'Total:')%>
<%-__('No payment now')%>
<%-item.content%>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'express-checkout') { %>
<%# Block Type: express-checkout %>
<%# Styled Component: .type-express-checkout %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (getParams('edit_mode') && ['stripe'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to Stripe to use this block
<% } %>
<%
let optionsJson = '{}';
if (item.options) {
try {
optionsJson = JSON.stringify(item.options);
} catch (e) { /* Do nothing, keep default empty JSON */ }
}
%>
' data-oncancel="<%- item.oncancel || '' %>" data-oncancel-url="<%-item.oncancel_url || ''%>"
data-apple-pay-product-info="<%-item['apple_pay_product_info']%>"
data-request-shipping="<%-item.request_shipping || ''%>"
data-phone-number-required="<%-item.phoneNumberRequired || ''%>"
data-billing-address-required="<%-item.billingAddressRequired || ''%>"
data-payment-failed-actions='<%- escapeHtmlForAttribute(JSON.stringify(item["payment_failed_actions"]) || "") %>'
>
<%- item.content %>
<% if (item['Fallback Button Text']) { %>
<%- TemplateManager.renderTemplate('screen-content', {
screen: {
content: [
{
"type": "pay-button",
"content": item['Fallback Button Text'],
"attrs": "data-express-fallback-btn",
//"style": "display: none",
"pay_button_onclick": item.pay_button_onclick,
'icon': " "
}
]
},
overrideContentItemIndex: contentItemIndex
}) %>
<% } %>
<% if (item['Other payment methods Button Text']) { %>
<%- TemplateManager.renderTemplate('screen-content', {
screen: {
content: [
{
"type": "pay-button",
"content": item['Other payment methods Button Text'],
"attrs": "data-express-other-payments-btn",
"class": "button-inverted",
"style": "display: none",
"pay_button_onclick": item.pay_button_onclick,
'icon': " "
}
]
},
overrideContentItemIndex: contentItemIndex
}
) %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'google-pay-button') { %>
<%# Block Type: google-pay-button %>
<% if (getParams('edit_mode') && ['stripe'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to Stripe to use this block
<% } %>
<%
let prOptions = '{}';
if (item.options) {
try {
prOptions = JSON.stringify(item.options);
} catch (e) { /* Do nothing */ }
}
%>
data-payment-request-button
data-wallet-type="googlepay"
data-wallet-styling="<%-item.addGooglePayStyling%>"
data-wallet-text="<%-item.addGooglePayText%>"
data-payment-method-type="google-pay-button"
data-not-available-behavior="<%-item.googlePayNotAvailableBehavior || 'hide_button'%>"
data-pay-button-onclick="<%- item.pay_button_onclick || ''%>"
data-options='<%- prOptions.replace(/'/g, "\\'") %>'
data-request-shipping="<%-item.request_shipping || ''%>"
data-phone-number-required="<%-item.phoneNumberRequired || ''%>"
data-request-payer-email="<%-typeof item.requestPayerEmail !== 'undefined' ? item.requestPayerEmail : 'auto'%>"
data-request-payer-name="<%-typeof item.requestPayerName !== 'undefined' ? item.requestPayerName : ''%>"
data-oncancel="<%-item.oncancel || ''%>"
data-oncancel-url="<%-item.oncancel_url || ''%>"
data-payment-failed-actions='<%- escapeHtmlForAttribute(JSON.stringify(item["payment_failed_actions"]) || "") %>'
>
<%- item.content || '' %>
Google Pay is not available for this browser/device right now. This placeholder is visible only in edit mode.
<% if (item['Other payment methods Button Text']) { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
{
"type": "pay-button",
"content": item['Other payment methods Button Text'],
"attrs": "data-payment-request-other-payments-btn",
"class": "button-inverted",
"style": "display: none",
"pay_button_onclick": item.pay_button_onclick,
'icon': " "
}
]
}}) %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'one-click-pay-button') { %>
<%# Block Type: one-click-pay-button %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
data-success-message="<%- escapeHtmlForAttribute(item.success_message || '') %>"
data-success-message-type="<%-item.success_message_type || ''%>"
data-show-loading-overlay="<%-item.show_loading_overlay || ''%>"
data-success-message-seconds="<%-item.success_message_seconds || ''%>"
data-upsell-failed-action="<%-item.upsell_failed_action || ''%>"
data-upsell-failed-popup-id="<%-item.upsell_failed_popup_id || ''%>"
data-upsell-failed-js-callback="<%-item.upsell_failed_js_callback || ''%>"
data-upsell-failed-redirect-url="<%-item.upsell_failed_redirect_url || ''%>"
>
<%- __(item.label) %>
<% if (item.icon) { %><%- item.icon %> <% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'pay-button') { %>
<%# Block Type: pay-button %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
data-popup="#popup-plan"
<% } else if (item.pay_button_onclick == 'payment-form') { %>
data-scroll-to="#payment-form"
<% } else if (item.pay_button_onclick == 'redirect_price_url') { %>
data-redirect-price-url
<% } else if (item.pay_button_onclick.startsWith('scroll-to-index|')) { %>
data-scroll-to="[data-block-area-index='<%-item.pay_button_onclick.split('|')[1]%>']"
<% } else { %>
data-popup="#<%-item.pay_button_onclick%>"
<% } %>
type="button" <%- item.attrs || '' %> style="<%-__(item.style)%>" <%- item.attributes || '' %> >
<%- __(item.content) %>
<% if (item.icon && item.icon !== ' ') { %> <%- item.icon %> <% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'payment-accordion') { %>
<%# Block Type: payment-accordion %>
<%# Styled Component: .type-payment-accordion %>
<% const displayMode = item.display_mode || 'accordion'; %>
<% function renderPaymentAccordionOptionContent(option) { %>
<% if (option.type == "card") { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
mergeObjects({
"type": "stripe-form"
}, option['stripe-form'])
]
}}) %>
<% } else if (option.type == "paypal") { %>
<% } else if (option.type == "applepay") { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
mergeObjects({
"type": "express-checkout"
}, option['express-checkout'])
]
}}) %>
<% } else if (option.type == "paypal-express") {%>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
mergeObjects({
"type": "express-checkout"
}, option['express-checkout'])
]
}}) %>
<% } else if (option.type == "stripe-payment-request-button") { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
mergeObjects({
"type": "stripe-payment-request-button"
}, option['stripe-payment-request-button'])
]
}}) %>
<% } else if (option.type == "google-pay-button" || option.type == "google-pay") { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
mergeObjects({
"type": "google-pay-button"
}, option['google-pay-button'] || option['google-pay'] || {})
]
}}) %>
<% } else if (option.type == "hybrid-wallet-button") { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
mergeObjects({
"type": "hybrid-wallet-button"
}, option['hybrid-wallet-button'] || {})
]
}}) %>
<% } else if (option.type == "primer-adaptive-wallets-button") { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
mergeObjects({
"type": "primer-adaptive-wallets-button"
}, option['primer-adaptive-wallets-button'] || {})
]
}}) %>
<% } %>
<% } %>
<% if (getParams('edit_mode') && ['stripe'].indexOf(window?.paywall?.payment_system) == -1) { %>
Change 'Main Payment system' in Paywall Settings to Stripe to use this block
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'payment-terms') { %>
<%# Block Type: payment-terms %>
<%# Styled Component: .type-payment-terms %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%- __(item.content) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'paypal-button') { %>
<%# Block Type: paypal-button %>
<%# Styled Component: .type-paypal-button %>
<% if (getParams('edit_mode') && ['stripe'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to Stripe and add PayPal prices to use this block
<% } %>
<%
const paypalButtonOptions = Object.assign({}, item.options || {});
if (item.paypalButtonLabel) {
paypalButtonOptions.style = Object.assign({}, paypalButtonOptions.style || {}, {
label: item.paypalButtonLabel
});
}
%>
data-options='<%- JSON.stringify(paypalButtonOptions) %>' data-only-paypal='<%-item.onlyPaypal%>'>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'paywall-selector') { %>
<%# Block Type: paywall-selector %>
<%# Styled Component: .type-paywall-selector %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
{
type: "options",
name: "paywall_slug",
class: "", // Removed trial-selector from here as it's on the parent now
columns: item.options.length,
options: item.options.map((el, index) => {
el.onclick = '_nothing';
el.value = el.paywall_slug || '/';
el.selected = (index == item.selected_index) || (typeof item.selected_index == 'undefined' && index == item.options.length -1);
return el;
})
}
]
}}) %>
<% if (item.content) { %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'powered-stripe') { %>
<%# Block Type: powered-stripe %>
<%# Styled Component: .type-powered-stripe %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'prices-list') { %>
<%# Block Type: prices-list %>
<%# Styled Component: .type-prices-list %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'primer-apple-pay-button') { %>
<%# Block Type: primer-apple-pay-button %>
<%# Styled Component: .type-primer-apple-pay-button %>
<% if (getParams('edit_mode') && ['primer', 'hubx'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to Primer to use this block
<% } %>
<%
let prOptions = '{}';
if (item.options) {
try {
prOptions = JSON.stringify(item.options);
} catch (e) { /* Do nothing */ }
}
%>
<%# Native Apple Pay button. iOS Safari only launches Apple Pay from a real
tap on the genuine, visible apple-pay-button, so we render it directly
instead of forwarding taps from a custom button. %>
<%# Fallback custom button: used only in edit-mode preview or when the wallet
is unavailable and the block is configured to keep showing a button. %>
data-primer-wallet-button
data-primer-method="APPLE_PAY"
data-payment-method-type="primer-apple-pay-button"
data-not-available-behavior="<%-item.applePayNotAvailableBehavior || 'hide_button'%>"
data-pay-button-onclick="<%- item.pay_button_onclick || ''%>"
data-options='<%- prOptions.replace(/'/g, "\\'") %>'
data-oncancel="<%-item.oncancel || ''%>"
data-oncancel-url="<%-item.oncancel_url || ''%>"
data-payment-failed-actions='<%- escapeHtmlForAttribute(JSON.stringify(item["payment_failed_actions"]) || "") %>'
>
<%- item.content || 'Continue with ' %>
Apple Pay is not available for this browser/device right now. This placeholder is visible only in edit mode.
<% if (item['Other payment methods Button Text']) { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
{
"type": "pay-button",
"content": item['Other payment methods Button Text'],
"attrs": "data-primer-other-payments-btn",
"class": "button-inverted",
"style": "display: none",
"pay_button_onclick": item.pay_button_onclick,
'icon': " "
}
]
}}) %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'primer-google-pay-button') { %>
<%# Block Type: primer-google-pay-button %>
<%# Styled Component: .type-primer-google-pay-button %>
<% if (getParams('edit_mode') && ['primer', 'hubx'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to Primer to use this block
<% } %>
<%
let prOptions = '{}';
if (item.options) {
try {
prOptions = JSON.stringify(item.options);
} catch (e) { /* Do nothing */ }
}
%>
<%# Native Google Pay button rendered directly (see Apple Pay note). %>
data-primer-wallet-button
data-primer-method="GOOGLE_PAY"
data-payment-method-type="primer-google-pay-button"
data-not-available-behavior="<%-item.googlePayNotAvailableBehavior || 'hide_button'%>"
data-pay-button-onclick="<%- item.pay_button_onclick || ''%>"
data-options='<%- prOptions.replace(/'/g, "\\'") %>'
data-oncancel="<%-item.oncancel || ''%>"
data-oncancel-url="<%-item.oncancel_url || ''%>"
data-payment-failed-actions='<%- escapeHtmlForAttribute(JSON.stringify(item["payment_failed_actions"]) || "") %>'
>
<%- item.content || 'Continue with ' %>
Google Pay is not available for this browser/device right now. This placeholder is visible only in edit mode.
<% if (item['Other payment methods Button Text']) { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
{
"type": "pay-button",
"content": item['Other payment methods Button Text'],
"attrs": "data-primer-other-payments-btn",
"class": "button-inverted",
"style": "display: none",
"pay_button_onclick": item.pay_button_onclick,
'icon': " "
}
]
}}) %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'primer-payment-accordion') { %>
<%# Block Type: primer-payment-accordion %>
<%# Styled Component: .type-primer-payment-accordion %>
<% const displayMode = item.display_mode || 'accordion'; %>
<% function renderPrimerPaymentAccordionOptionContent(option) { %>
<% if (option.type == "primer-form") { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
mergeObjects({
"type": "primer-form"
}, option['primer-form'] || {})
]
}}) %>
<% } else if (option.type == "primer-apple-pay-button") { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
mergeObjects({
"type": "primer-apple-pay-button"
}, option['primer-apple-pay-button'] || {})
]
}}) %>
<% } else if (option.type == "primer-google-pay-button") { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
mergeObjects({
"type": "primer-google-pay-button"
}, option['primer-google-pay-button'] || {})
]
}}) %>
<% } else if (option.type == "primer-paypal-button") { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
mergeObjects({
"type": "primer-paypal-button"
}, option['primer-paypal-button'] || {})
]
}}) %>
<% } else if (option.type == "primer-adaptive-wallets-button") { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
mergeObjects({
"type": "primer-adaptive-wallets-button"
}, option['primer-adaptive-wallets-button'] || {})
]
}}) %>
<% } %>
<% } %>
<% if (getParams('edit_mode') && ['primer', 'hubx'].indexOf(window?.paywall?.payment_system) == -1) { %>
Change 'Main Payment system' in Paywall Settings to Primer to use this block
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'primer-paypal-button') { %>
<%# Block Type: primer-paypal-button %>
<%# Styled Component: .type-primer-paypal-button %>
<% if (getParams('edit_mode') && ['primer', 'hubx'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to Primer to use this block
<% } %>
data-primer-wallet-button
data-primer-method="PAYPAL"
data-payment-method-type="primer-paypal-button"
data-not-available-behavior="<%-item.paypalNotAvailableBehavior || 'hide_button'%>"
data-pay-button-onclick="<%- item.pay_button_onclick || ''%>"
data-use-custom-button="<%- item.useCustomButton ? 'true' : 'false' %>"
data-payment-failed-actions='<%- escapeHtmlForAttribute(JSON.stringify(item["payment_failed_actions"]) || "") %>'
>
<%- item.content || 'Pay with PayPal' %>
PayPal is not available for this browser/device right now. This placeholder is visible only in edit mode.
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'safe-checkout-banners') { %>
<%# Block Type: safe-checkout-banners %>
<%# Styled Component: .type-safe-checkout-banners %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%- __('Guaranteed safe checkout') %>
<%- __('All transactions are secure and encrypted') %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'solidgate-apple-pay-button') { %>
<%# Block Type: solidgate-apple-pay-button %>
<%# Styled Component: .type-solidgate-apple-pay-button %>
<% if (getParams('edit_mode') && ['solidgate'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to Solidgate to use this block
<% } %>
<%# Solidgate SDK mounts the Apple Pay button into this container. %>
<% if (getParams('edit_mode')) { %>
Apple Pay button mounts here via Solidgate SDK (#apple-pay-container)
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'solidgate-google-pay-button') { %>
<%# Block Type: solidgate-google-pay-button %>
<%# Styled Component: .type-solidgate-google-pay-button %>
<% if (getParams('edit_mode') && ['solidgate'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to Solidgate to use this block
<% } %>
<%# Solidgate SDK mounts the Google Pay button into this container. %>
<% if (getParams('edit_mode')) { %>
Google Pay button mounts here via Solidgate SDK (#google-pay-container)
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'solidgate-payment-accordion') { %>
<%# Block Type: solidgate-payment-accordion %>
<%# Styled Component: .type-solidgate-payment-accordion %>
<% const displayMode = item.display_mode || 'accordion'; %>
<% function renderSolidgatePaymentAccordionOptionContent(option) { %>
<% if (option.type == "solidgate-form") { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
mergeObjects({
"type": "solidgate-form"
}, option['solidgate-form'] || {})
]
}}) %>
<% } else if (option.type == "solidgate-apple-pay-button") { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
mergeObjects({
"type": "solidgate-apple-pay-button"
}, option['solidgate-apple-pay-button'] || {})
]
}}) %>
<% } else if (option.type == "solidgate-google-pay-button") { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
mergeObjects({
"type": "solidgate-google-pay-button"
}, option['solidgate-google-pay-button'] || {})
]
}}) %>
<% } %>
<% } %>
<% if (getParams('edit_mode') && ['solidgate'].indexOf(window?.paywall?.payment_system) == -1) { %>
Change 'Main Payment system' in Paywall Settings to Solidgate to use this block
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'stripe-address-element') { %>
<%# Block Type: stripe-address-element %>
<%# Styled Component: .type-stripe-address-element %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (getParams('edit_mode') && ['stripe'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to Stripe to use this block
<% } %>
<%
// Extract address element options with defaults
let addressOptions = {};
try {
addressOptions = typeof item['address-element-options'] === 'string' ? JSON.parse(item['address-element-options']) : (item['address-element-options'] || {});
} catch (e) {
addressOptions = {};
}
// Extract address element appearance variables with defaults
let addressAppearance = {};
try {
addressAppearance = typeof item['address-element-appearance'] === 'string' ? JSON.parse(item['address-element-appearance']) : (item['address-element-appearance'] || {});
} catch (e) {
addressAppearance = {};
}
%>
>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'stripe-payment-request-button') { %>
<%# Block Type: stripe-payment-request-button %>
<% if (getParams('edit_mode') && ['stripe'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to Stripe to use this block
<% } %>
<%
let prOptions = '{}';
if (item.options) {
try {
prOptions = JSON.stringify(item.options);
} catch (e) { /* Do nothing */ }
}
%>
data-payment-request-button
data-wallet-type="applepay"
data-wallet-styling="<%-item.addApplePayStyling%>"
data-wallet-text="<%-item.addApplePayText%>"
data-payment-method-type="stripe-payment-request-button"
data-not-available-behavior="<%-item.applePayNotAvailableBehavior || ''%>"
data-pay-button-onclick="<%- item.pay_button_onclick || ''%>"
data-options='<%- prOptions.replace(/'/g, "\\'") %>'
data-applepay-styling="<%-item.addApplePayStyling%>"
data-request-shipping="<%-item.request_shipping || ''%>"
data-phone-number-required="<%-item.phoneNumberRequired || ''%>"
data-request-payer-email="<%-typeof item.requestPayerEmail !== 'undefined' ? item.requestPayerEmail : 'auto'%>"
data-request-payer-name="<%-typeof item.requestPayerName !== 'undefined' ? item.requestPayerName : ''%>"
data-oncancel="<%-item.oncancel || ''%>"
data-oncancel-url="<%-item.oncancel_url || ''%>"
data-applepay-text="<%-item.addApplePayText%>"
data-payment-failed-actions='<%- escapeHtmlForAttribute(JSON.stringify(item["payment_failed_actions"]) || "") %>'
>
<%- __(item.content || 'Confirm purchase') %>
Apple Pay is not available for this browser/device right now. This placeholder is visible only in edit mode.
<% if (item['Other payment methods Button Text']) { %>
<%- TemplateManager.renderTemplate('screen-content', {overrideContentItemIndex: contentItemIndex, screen: {
content: [
{
"type": "pay-button",
"content": item['Other payment methods Button Text'],
"attrs": "data-payment-request-other-payments-btn",
"class": "button-inverted",
"style": "display: none",
"pay_button_onclick": item.pay_button_onclick,
'icon': " "
}
]
}}) %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'subscriptions-list') { %>
<%# Block Type: subscriptions-list %>
<%# Styled Component: .type-subscriptions-list %>
>
<% if (window.subscriptions && window.subscriptions.length > 0) { %>
<%
// First show active subscriptions (excluding those scheduled for cancellation)
const activeSubscriptions = window.subscriptions.filter(sub =>
['active', 'trialing', 'past_due'].includes(sub.status) &&
sub.price?.period_interval > 0 &&
!sub.cancel_at_period_end
);
const purchases = window.subscriptions.filter(sub =>
['active', 'trialing', 'past_due'].includes(sub.status) &&
sub.price?.period_interval === 0 &&
!sub.cancel_at_period_end
);
const canceledSubscriptions = window.subscriptions.filter(sub =>
sub.status === 'canceled' || sub.cancel_at_period_end
);
%>
<% if (activeSubscriptions.length > 0) { %>
<%-__('Active Subscriptions')%>
<% activeSubscriptions.forEach(function(subscription) { %>
Subscription #<%= subscription.id %>
<%= subscription.price?.price_option_text %>
<%= subscription.payment_system_label %>
<%-__('Next charge:')%> <%= new Date(subscription.next_charge_date).toLocaleDateString() %>
<%-__('Created at:')%> <%= new Date(subscription.created_at).toLocaleDateString() %>
<% }); %>
<% } %>
<% if (purchases.length > 0) { %>
<%-__('Purchases')%>
<% purchases.forEach(function(subscription) { %>
Purchase #<%= subscription.id %>
<%= subscription.price?.price_option_text %>
<%= subscription.payment_system_label %>
<%-__('Created at:')%> <%= new Date(subscription.created_at).toLocaleDateString() %>
<% }); %>
<% } %>
<% if (canceledSubscriptions.length > 0) { %>
<%-__('Canceled Subscriptions')%>
<% canceledSubscriptions.forEach(function(subscription) { %>
Subscription #<%= subscription.id %>
<%= subscription.price?.price_option_text %>
<%= subscription.payment_system_label %>
<% if (subscription.cancel_at_period_end && new Date(subscription.next_charge_date) > new Date()) { %>
<%-__('Will be canceled at')%> <%= new Date(subscription.next_charge_date).toLocaleDateString() %>
<% } else { %>
<%-__('Status:')%> <%-__('Canceled')%>
<% } %>
<% }); %>
<% } %>
<% } else { %>
<%-__('No active subscriptions found')%>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'update-subscription-button') { %>
<%# Block Type: update-subscription-button %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
data-success-action="<%-item.success_action || 'next_screen'%>"
data-success-action-url="<%-item.success_action_url || ''%>"
data-success-message="<%- escapeHtmlForAttribute(item.success_message || '') %>"
data-success-message-type="<%-__(item.success_message_type || '')%>"
data-success-message-seconds="<%-__(item.success_message_seconds || '')%>"
data-update-failed-action="<%-item.upsell_failed_action || ''%>"
data-update-failed-popup-id="<%-item.upsell_failed_popup_id || ''%>"
data-update-failed-js-callback="<%-item.upsell_failed_js_callback || ''%>"
data-update-failed-redirect-url="<%-item.upsell_failed_redirect_url || ''%>"
>
<%- __(item.label) %>
<% if (item.icon) { %><%- __(item.icon) %> <% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<%# === Layout Components === %>
<% if (item.type == 'border-block') { %>
<%# Block Type: border-block %>
<%# Styled Component: .type-border-block %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%- TemplateManager.renderTemplate('screen-content', {
screen: item,
prices: window?.paywall_products?.product_info?.product_data?.prices,
product_info: window?.paywall_products?.product_info,
overrideContentItemIndex: contentItemIndex
}) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'columns') { %>
<%# Block Type: columns %>
<%# Styled Component: .type-columns %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%// The content rendered below is expected to be one or more .type-columns__item elements %>
<%- TemplateManager.renderTemplate('screen-content', {
screen: item,
prices: window?.paywall_products?.product_info?.product_data?.prices ?? [],
product_info: window?.paywall_products?.product_info
}) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'preview-steps') { %>
<%# Block Type: preview-steps %>
<%# Styled Component: .type-preview-steps %>
>
<% item.steps.forEach(function(step, index) { %>
<%- __(step.title) %>
<%- __(step.button) %>
<% }) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'redirect-url') { %>
<%# Block Type: redirect-url %>
<%# Styled Component: .type-redirect-url %>
<% if (getParams('edit_mode') == 1) { %>
Redirect to <%-__(item.url)%>
<% } else { %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<%# === Interactive Components === %>
<% if (item.type == 'diagram') { %>
<%# Block Type: diagram %>
<%# Styled Component: .type-diagram %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%
var additionalScaleMaxX = 10;
var additionalScaleMaxY = 10;
var axisX = Array.isArray(item.axis_x) ? item.axis_x : [];
var axisY = Array.isArray(item.axis_y) ? item.axis_y : [];
var lineList = Array.isArray(item.lines) ? item.lines : [];
var diagramPlotGridHorizontalOnly = item.horizontal_lines_only === true || item.horizontal_lines_only === 'true'
|| item.plot_grid === 'horizontal';
var isDiagramPreview = typeof getParams === 'function' && (getParams('edit_mode') == 1 || getParams('edit_mode') === '1' || getParams('edit_mode') === true);
var hideAuxMarkup = item.hide_aux_markup === true || item.hide_aux_markup === 'true';
var showRuler = isDiagramPreview && item.show_aux_ruler !== false && item.show_aux_ruler !== 'false' && !hideAuxMarkup;
var plotW;
var plotH;
var x0;
var y0;
var vbW;
var vbH;
var yRulerX0 = 14;
var yRulerX1 = 22;
var yRulerNumX = 12;
var axisYLabelPad = 6;
if (showRuler) {
plotW = 250;
plotH = 128;
x0 = 60;
y0 = 144;
vbH = 202;
axisYLabelPad = 8;
} else {
plotW = 276;
plotH = 132;
x0 = 40;
y0 = 148;
vbH = 180;
axisYLabelPad = 8;
}
var hasAxisY = axisY.length > 0;
var hasAxisX = axisX.length > 0;
if (!hasAxisY) {
if (showRuler) {
x0 = 34;
} else {
x0 = 12;
}
axisYLabelPad = 4;
}
if (!hasAxisX && !showRuler) {
vbH = y0 + 14;
}
var plotBleed = 10;
vbW = Math.ceil(x0 + plotW + plotBleed);
var xRulerSpineY = y0 + (hasAxisX ? 34 : 12);
var xRulerTickY1 = y0 + (hasAxisX ? 42 : 20);
var xRulerNumY = y0 + (hasAxisX ? 52 : 30);
if (showRuler) {
vbH = Math.ceil(xRulerNumY + 10);
}
var labelTopPad = 24;
function diagramLabel(cell) {
if (cell == null) return '';
if (typeof cell === 'object' && cell.label != null) return String(cell.label);
return String(cell || '');
}
function diagramNum(v) {
var n = parseFloat(v);
return isNaN(n) ? 0 : n;
}
function diagramPointLabelPaddingFromItem(it) {
var defX = 6;
var defY = 3;
var cv = it && it.css_variables;
if (!cv || typeof cv !== 'object') {
return { padLeft: defX, padRight: defX, padTop: defY, padBottom: defY };
}
var raw = cv['--type-diagram-point-label-bg-padding'];
if (raw == null || String(raw).trim() === '') {
return { padLeft: defX, padRight: defX, padTop: defY, padBottom: defY };
}
var nums = String(raw).match(/[\d.]+/g);
if (!nums || !nums.length) {
return { padLeft: defX, padRight: defX, padTop: defY, padBottom: defY };
}
var a = nums.map(function (x) { return parseFloat(x, 10); });
if (a.some(function (n) { return isNaN(n); })) {
return { padLeft: defX, padRight: defX, padTop: defY, padBottom: defY };
}
if (a.length === 1) {
return { padLeft: a[0], padRight: a[0], padTop: a[0], padBottom: a[0] };
}
if (a.length === 2) {
return { padLeft: a[1], padRight: a[1], padTop: a[0], padBottom: a[0] };
}
if (a.length === 3) {
return { padLeft: a[1], padRight: a[1], padTop: a[0], padBottom: a[2] };
}
return { padLeft: a[3], padRight: a[1], padTop: a[0], padBottom: a[2] };
}
function diagramPointLabelBgRadiusFromItem(it) {
var def = 3;
var cv = it && it.css_variables;
if (!cv || typeof cv !== 'object') {
return def;
}
var raw = cv['--type-diagram-point-label-bg-border-radius'];
if (raw == null || String(raw).trim() === '') {
return def;
}
var m = String(raw).match(/[\d.]+/);
if (!m) {
return def;
}
var n = parseFloat(m[0], 10);
if (isNaN(n) || n < 0) {
return def;
}
return n;
}
function diagramPxX(raw) {
var x = Math.max(0, Math.min(additionalScaleMaxX, diagramNum(raw)));
return x0 + (x / additionalScaleMaxX) * plotW;
}
function diagramPyY(raw) {
var y = Math.max(0, Math.min(additionalScaleMaxY, diagramNum(raw)));
return y0 - (y / additionalScaleMaxY) * plotH;
}
function diagramAxisXTick(i) {
var n = axisX.length;
if (n <= 0) return 0;
if (n === 1) return additionalScaleMaxX / 2;
return (i / (n - 1)) * additionalScaleMaxX;
}
function diagramAxisYTick(j) {
var n = axisY.length;
if (n <= 0) return 0;
if (n === 1) return additionalScaleMaxY / 2;
return (j / (n - 1)) * additionalScaleMaxY;
}
var xTickEnd = Math.min(200, Math.max(0, Math.floor(Number(additionalScaleMaxX) + 1e-9)));
var yTickEnd = Math.min(200, Math.max(0, Math.floor(Number(additionalScaleMaxY) + 1e-9)));
var gridDivisions = 10;
function diagramLineColorStops(line) {
var raw = line && line.color;
var arr = [];
if (Array.isArray(raw)) {
raw.forEach(function (c) {
var t = c != null ? String(c).trim() : '';
if (t) arr.push(t);
});
} else if (raw != null && String(raw).trim() !== '') {
arr.push(String(raw).trim());
}
if (!arr.length) {
arr.push('#3B82F6');
}
return arr;
}
function diagramLinePixelPoints(pts) {
var out = [];
if (!Array.isArray(pts)) {
return out;
}
pts.forEach(function (p) {
if (!p) {
return;
}
out.push({ x: diagramPxX(p.x), y: diagramPyY(p.y) });
});
return out;
}
function diagramLinePathSmoothD(pts) {
var pv = diagramLinePixelPoints(pts);
var n = pv.length;
if (n < 2) {
return '';
}
if (n === 2) {
return 'M ' + pv[0].x + ',' + pv[0].y + ' L ' + pv[1].x + ',' + pv[1].y;
}
var d = 'M ' + pv[0].x + ',' + pv[0].y;
for (var i = 0; i < n - 1; i++) {
var p0 = pv[Math.max(0, i - 1)];
var p1 = pv[i];
var p2 = pv[i + 1];
var p3 = pv[Math.min(n - 1, i + 2)];
var c1x = p1.x + (p2.x - p0.x) / 6;
var c1y = p1.y + (p2.y - p0.y) / 6;
var c2x = p2.x - (p3.x - p1.x) / 6;
var c2y = p2.y - (p3.y - p1.y) / 6;
d += ' C ' + c1x + ',' + c1y + ' ' + c2x + ',' + c2y + ' ' + p2.x + ',' + p2.y;
}
return d;
}
function diagramLinePathFlatD(pts) {
var pv = diagramLinePixelPoints(pts);
if (pv.length < 2) {
return '';
}
var d = 'M ' + pv[0].x + ',' + pv[0].y;
for (var k = 1; k < pv.length; k++) {
d += ' L ' + pv[k].x + ',' + pv[k].y;
}
return d;
}
function diagramLineStrokePathD(line, pts) {
if (line && (line.smooth === false || line.smooth === 'false')) {
return diagramLinePathFlatD(pts);
}
return diagramLinePathSmoothD(pts);
}
function diagramLineAreaClosedPathD(line, pts) {
var open = diagramLineStrokePathD(line, pts);
if (!open) {
return '';
}
var pv = diagramLinePixelPoints(pts);
if (pv.length < 2) {
return '';
}
var first = pv[0];
var last = pv[pv.length - 1];
return open + ' L ' + last.x + ',' + y0 + ' L ' + first.x + ',' + y0 + ' Z';
}
var diagramBlockIx = typeof contentItemIndex !== 'undefined' ? contentItemIndex : 0;
var diagramAreaFillGx = x0 + plotW / 2;
%>
<% lineList.forEach(function(line, lineIx) {
if (!line || typeof line !== 'object') { return; }
var ptsG = Array.isArray(line.points) ? line.points : [];
var stopsG = diagramLineColorStops(line);
var areaFillOff = line.area_fill === false || line.area_fill === 'false';
if (ptsG.length >= 2 && !areaFillOff) {
var cArea = stopsG[0];
var areaFillGradId = 'diagram-area-fill-' + diagramBlockIx + '-' + lineIx;
%>
<% }
if (stopsG.length < 2 || ptsG.length < 2) { return; }
var p0g = ptsG[0];
var pLg = ptsG[ptsG.length - 1];
if (!p0g || !pLg) { return; }
var ggx1 = diagramPxX(p0g.x);
var ggy1 = diagramPyY(p0g.y);
var ggx2 = diagramPxX(pLg.x);
var ggy2 = diagramPyY(pLg.y);
var gradId = 'diagram-grad-' + diagramBlockIx + '-' + lineIx;
%>
<% stopsG.forEach(function(col, si) {
var pct = stopsG.length <= 1 ? 0 : (100 * si / (stopsG.length - 1));
%>
<% }); %>
<% }); %>
<% for (var gi = 0; gi <= gridDivisions; gi++) { %>
<% var gy = y0 - (gi / gridDivisions) * plotH; %>
<% } %>
<% if (!diagramPlotGridHorizontalOnly) {
for (var gix = 0; gix <= gridDivisions; gix++) {
var gx = x0 + (gix / gridDivisions) * plotW;
%>
<% }
} %>
<% lineList.forEach(function(line, lineIx) {
if (!line || typeof line !== 'object') { return; }
var pts = Array.isArray(line.points) ? line.points : [];
var stops = diagramLineColorStops(line);
var solidFill = stops[0];
var areaFillOffDraw = line.area_fill === false || line.area_fill === 'false';
var lineAnimateOn = !(line.line_animate === false || line.line_animate === 'false');
var hasArea = pts.length >= 2 && !areaFillOffDraw;
var layerClasses = 'type-diagram__line-layer';
if (lineAnimateOn && pts.length >= 2) {
layerClasses += ' type-diagram__line-layer--animate';
layerClasses += hasArea ? ' type-diagram__line-layer--with-area' : ' type-diagram__line-layer--no-area';
}
var layerStyle = (lineAnimateOn && pts.length >= 2) ? '--diagram-line-ix: ' + lineIx + ';' : '';
var strokeDraw = solidFill;
if (stops.length >= 2 && pts.length >= 2) {
strokeDraw = 'url(#diagram-grad-' + diagramBlockIx + '-' + lineIx + ')';
}
%>
style="<%- layerStyle %>"<% } %>>
<% if (hasArea) {
var areaPathD = diagramLineAreaClosedPathD(line, pts);
var areaFillId = 'diagram-area-fill-' + diagramBlockIx + '-' + lineIx;
var areaClass = 'type-diagram__area';
if (lineAnimateOn) {
areaClass += ' type-diagram__area--animate';
}
%>
<% }
if (pts.length >= 2) {
var pathD = diagramLineStrokePathD(line, pts);
var linePathClass = 'type-diagram__line';
if (lineAnimateOn) {
linePathClass += ' type-diagram__line-draw';
}
%>
pathLength="1"<% } %> />
<% }
pts.forEach(function(p) {
if (!p) { return; }
var cx = diagramPxX(p.x);
var cy = diagramPyY(p.y);
var pl = diagramLabel({ label: p.label });
var diagramPointMarkerVisible = !(p.show_point === false || p.show_point === 'false');
%>
<% if (diagramPointMarkerVisible) {
var pointClass = 'type-diagram__point';
if (lineAnimateOn) {
pointClass += ' type-diagram__point--after-line';
}
%>
<% } %>
<% if (pl.length) {
var dlabel = String(__(pl));
var plPad = diagramPointLabelPaddingFromItem(item);
var plCharW = 6;
var plLineH = 14;
var plLabelH = plLineH + plPad.padTop + plPad.padBottom;
var plLabelW = Math.max(28, dlabel.length * plCharW + plPad.padLeft + plPad.padRight);
var plLabelBelow = p.label_position === 'below';
var plOffsetY = 18;
var plCx = cx;
var plCy = plLabelBelow ? (cy + plOffsetY) : (cy - plOffsetY);
var plRraw = diagramPointLabelBgRadiusFromItem(item);
var plRx = Math.min(plRraw, plLabelW / 2, plLabelH / 2);
var plBx = plCx - plLabelW / 2;
var plotL = x0;
var plotR = x0 + plotW;
plBx = Math.max(plotL, Math.min(plBx, plotR - plLabelW));
plCx = plBx + plLabelW / 2;
var plBy = plCy - plLabelH / 2;
var plTailHalf = 3;
var plTailTipX = cx;
var plTailBaseY;
var plTailTipY;
if (plLabelBelow) {
plTailBaseY = plBy + 2;
plTailTipY = Math.max(plTailBaseY - 9, cy - 6);
if (plTailTipY >= plTailBaseY) {
plTailTipY = plTailBaseY - 5;
}
} else {
plTailBaseY = plBy + plLabelH - 2;
plTailTipY = Math.min(plTailBaseY + 9, cy - 6);
if (plTailTipY <= plTailBaseY) {
plTailTipY = plTailBaseY + 5;
}
}
var tailBaseCenter = Math.max(plBx + plTailHalf + 0.5, Math.min(plTailTipX, plBx + plLabelW - plTailHalf - 0.5));
var plTailPts = (tailBaseCenter - plTailHalf) + ',' + plTailBaseY + ' ' + (tailBaseCenter + plTailHalf) + ',' + plTailBaseY + ' ' + plTailTipX + ',' + plTailTipY;
var labelGroupClass = 'type-diagram__point-label-group';
if (lineAnimateOn) {
labelGroupClass += ' type-diagram__point-label-group--after-line';
}
%>
<%= dlabel %>
<% }
});
%>
<% }); %>
<% if (showRuler) { %>
<% for (var ryv = 0; ryv <= yTickEnd; ryv++) { %>
<% var rpy = diagramPyY(ryv); %>
<%= String(ryv) %>
<% } %>
<% } %>
<% axisY.forEach(function(cell, j) { %>
<% var yTick = diagramAxisYTick(j); %>
<% var ty = diagramPyY(yTick); %>
<%= __(diagramLabel(cell)) %>
<% }); %>
<% axisX.forEach(function(cell, i) { %>
<% var nX = axisX.length; %>
<% var xTick = diagramAxisXTick(i); %>
<% var tx = diagramPxX(xTick); %>
<% if (nX > 1 && i === 0) { %>
<%= __(diagramLabel(cell)) %>
<% } else if (nX > 1 && i === nX - 1) { %>
<%= __(diagramLabel(cell)) %>
<% } else { %>
<%= __(diagramLabel(cell)) %>
<% } %>
<% }); %>
<% if (showRuler) { %>
<% for (var rv = 0; rv <= xTickEnd; rv++) { %>
<% var rx = diagramPxX(rv); %>
<%= String(rv) %>
<% } %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'graph') { %>
<%# Block Type: graph %>
<%# Styled Component: .type-graph %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%-contentItemIndex%>">
<% if (item.lines_count == '1' || item.lines_count == '2_wavy') { %>
<% if (item.axis_y.length) { %>
<% } %>
<%- __(item.zero_point) %>
<%- __(item.line_1_text) %>
<%- __(item.line_2_text) %>
<% if (item.line_1_point) { %>
<%- __(item.line_1_point) %>
<% } %>
<% if (item.wavy_line) { %>
<% } %>
<% if (item.line_1_colors.length == 1) { %>
<% } %>
<% if (item.line_1_colors.length > 1) { %>
<% } %>
<% if (item.line_1_point.length) { %>
<% } %>
<% if (item.graph_direction == "up" && item.line_1_background) { %>
<% } %>
<% if (item.graph_direction != "up" && item.line_1_background) { %>
<% } %>
<% if (item.wavy_line && item.wavy_background) { %>
<% } %>
<% item.axis_y.forEach(function(option) { %>
<%- __(option.content || option) %>
<% }) %>
<% item.axis_x.forEach(function(option) { %>
<%- __(option.content || option) %>
<% }) %>
<% } %>
<% if (item.lines_count == '2') { %>
<% if (item.axis_y.length) { %>
<% } %>
<%- __(item.zero_point) %>
<%- item.line_1_text %>
<%- item.line_2_text %>
<% if (item.line_1_point) { %>
<%- __(item.line_1_point) %>
<% } %>
<% if (item.line_2_point) { %>
<%- __(item.line_2_point) %>
<% } %>
<% if (item.line_1_colors.length == 1) { %>
<% } %>
<% if (item.line_2_colors.length == 1) { %>
<% } %>
<% if (item.line_1_colors.length > 1) { %>
<% } %>
<% if (item.line_2_colors.length > 1) { %>
<% } %>
<% if (item.line_1_point.length) { %>
<% } %>
<% if (item.line_2_point.length) { %>
<% } %>
<% if (item.graph_direction == "up") { %>
<% if (item.line_1_background) { %>
<% } %>
<% if (item.line_2_background) { %>
<% } %>
<% } %>
<% if (item.graph_direction != "up") { %>
<% if (item.line_1_background) { %>
<% } %>
<% if (item.line_2_background) { %>
<% } %>
<% } %>
<% item.axis_y.forEach(function(option) { %>
<%- __(option.content || option) %>
<% }) %>
<% item.axis_x.forEach(function(option) { %>
<%- __(option.content || option) %>
<% }) %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'graph-new') { %>
<%# Block Type: graph-new %>
<%# Styled Component: .type-graph-new %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% function topDownLength(str) {
str = str.split(' ');
return str.filter(line => line === "top_down").length;
}
%>
<% function downTopLength(str) {
str = str.split(' ');
return str.filter(line => line === "down_top").length;
}
%>
<% function topWavyLength(str) {
str = str.split(' ');
return str.filter(line => line === "top_wavy").length;
}
%>
<% if (item.axis_y.length) { %>
<% } %>
<% if (item.top_zero_point && item.top_zero_point.length) { %>
<%- __(item.top_zero_point) %>
<% } %>
<% if (item.down_zero_point && item.down_zero_point.length) { %>
<%- __(item.down_zero_point) %>
<% } %>
<% if (item.down_line_1_point && item.down_line_1_point.length && downTopLength(item.set_lines) >= 1) { %>
<%- __(item.down_line_1_point) %>
<% } %>
<% if (item.top_line_1_point && item.top_line_1_point.length && topDownLength(item.set_lines) >= 1) { %>
<%- __(item.top_line_1_point) %>
<% } %>
<% if (item.top_line_2_point && item.top_line_2_point.length && topDownLength(item.set_lines) === 2) { %>
<%- __(item.top_line_2_point) %>
<% } %>
<% if (item.down_line_2_point && item.down_line_2_point.length && downTopLength(item.set_lines) === 2) { %>
<%- __(item.down_line_2_point) %>
<% } %>
<% if (item.top_wavy_background) { %>
<% } %>
<% if (item.top_down_2_background) { %>
<% } %>
<% if (item.top_down_1_background) { %>
<% } %>
<% if (item.down_top_2_background) { %>
<% } %>
<% if (item.down_top_1_background) { %>
<% } %>
<% if (topWavyLength(item.set_lines)) { %>
<% } %>
<% if (topDownLength(item.set_lines) >= 1) { %>
<% } %>
<% if (topDownLength(item.set_lines) === 2) { %>
<% } %>
<% if (downTopLength(item.set_lines) >= 1) { %>
<% } %>
<% if (downTopLength(item.set_lines) === 2) { %>
<% } %>
<% if (topDownLength(item.set_lines)) { %>
<% } %>
<% if (downTopLength(item.set_lines)) { %>
<% } %>
<% item.axis_x.forEach(function(option) { %>
<%- __(option.content || option) %>
<% }) %>
<% item.axis_y.forEach(function(option) { %>
<%- __(option.content || option) %>
<% }) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'options') { %>
<%# Block Type: options %>
<%# Styled Component: .type-options %>
>
<% item.options.forEach(function(option, index) { %>
<% }) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'options-audio') { %>
<%# Block Type: options-audio %>
<%# Styled Component: .type-options-audio %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> <%- item.attributes || '' %>>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'options-evaluation') { %>
<%# Block Type: options-evaluation %>
<%# Styled Component: .type-options-evaluation %>
>
>
<% if (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id]) {
var savedValue = window.user_properties[item.name || screen.id];
for (var i = 0; i < item.options.length; i++) {
var opt = item.options[i];
var optValue = opt.value || opt.content || (typeof opt == 'object' ? i : opt);
if (String(optValue) === String(savedValue)) {
savedValue = opt.content || opt.value || savedValue;
break;
}
}
%><%- savedValue %><% } else { %>·<% } %>
<%- __(item.text_left) %>
<%- __(item.text_right) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'options-image-horizontal') { %>
<%# Block Type: options-image-horizontal %>
<%# Styled Component: .type-options-image-horizontal %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'options-images') { %>
<%# Block Type: options-images %>
<%# Styled Component: .type-options-images %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'options-images-small') { %>
<%# Block Type: options-images-small %>
<%# Styled Component: .type-options-images-small %>
<% var cssClass = item.class || ''; %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'options-multiple') { %>
<%# Block Type: options-multiple %>
>
<% item.options.forEach(function(option, index){ %>
<% }) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'options-multiple-images') { %>
<%# Block Type: options-multiple-images %>
<%# Styled Component: .type-options-multiple-images %>
>
<% item.options.forEach(function(option, index) { %>
checked="checked"<% }%>>
<% if (option.image) { %>
<% } %>
<%- __(option.content || option) %>
<% if (option.badgeText) { %>
<%- __(option.badgeText) %>
<% } %>
<% }) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'options-vertical') { %>
<%# Block Type: options-vertical %>
<%# Styled Component: .type-options-vertical %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'paragraph') { %>
<%# Block Type: paragraph %>
<%# Styled Component: .type-paragraph %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%- __(item.content) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'progress-bar-cards') { %>
<%# Block Type: progress-bar-cards %>
<%# Styled Component: .type-progress-bar-cards %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
<% item.options.forEach(function(option, index) { %>
<%- option.title %>
0%
<%- __(option.text) %>
<% }) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'progress-bars') { %>
<%# Block Type: progress-bars %>
<%# Styled Component: .type-progress-bars %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<% if (item.checkmark_content) { %>
<%- item.checkmark_content %>
<% } %>
<% item.options.forEach(function(option, index) { %>
data-percent="<%- option.percent%>"<% } %>>
<% if (item.list_icon && item.list_icon[index]) { %>
<% } %>
<%- __(option.content || option) %>
style="display: none"<%}%>>
style="background: linear-gradient(90deg, <%- item.color_gradient %>)"<% } %>>
0%
<% }) %>
<% if (item.questions_popups ) { %>
<% item.questions_popups.forEach(function(option) { %>
<% }) %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'progress-circle') { %>
<%# Block Type: progress-circle %>
<%# Styled Component: .type-progress-circle %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (item.text) { %>
<%- __(item.text) %>
<% } %>
style="display: none" <% } %>>
0%
<% if (item.questions_popups ) { %>
<% item.questions_popups.forEach(function(option) { %>
<% }) %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'range-4-variants') { %>
<%# Block Type: range-4-variants %>
<%# Styled Component: .type-range-4-variants %>
<%- __(item.textLeft) %>
or
<%- __(item.textRight) %>
<%- __(item.variant1) %>
<%- __(item.variant2) %>
<%- __(item.variant3) %>
<%- __(item.variant4) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'range-slider') { %>
<%# Block Type: range-slider %>
<%# Styled Component: .type-range-slider %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'slider-results') { %>
<%# Block Type: slider-results %>
<%# Styled Component: .type-slider-results %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% item.content.forEach(function(option, index) { %>
<% if (!item.hide_header) { %>
<% } %>
<% if (option.image) {%>
<% } %>
<% if (option.name || option.text || option.title) { %>
<% if (option.name || option.title) { %>
<%- __(option.title || option.name)%>
<% } %>
<% if (option.text) { %>
<% } %>
<% } %>
<% }) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'text-range-slider') { %>
<%# Block Type: text-range-slider %>
<%# Styled Component: .type-text-range-slider %>
<%- item.title %>
<%- item.options[item.start_option]?.content %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<%# === Content Components === %>
<% if (item.type == 'auto-swiper-reviews') { %>
<%# Block Type: auto-swiper-reviews %>
<%# Styled Component: .type-auto-swiper-reviews %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<% item.options.forEach(function(option, index) { %>
<% if (option.image) {%>
<% } %>
<% if (option.title) { %>
<%- __(option.title) %>
<% } %>
<%- __(option.content || option.review) %>
<% if (option.name) {%>
<%- __(option.name) %>
<% } %>
<% }) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'faq-question') { %>
<%# Block Type: faq-question %>
<%# Styled Component: .type-faq-question %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'image') { %>
<%# Block Type: image %>
<%# Styled Component: .type-image %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'review') { %>
<%# Block Type: review %>
<%# Styled Component: .type-review %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<% if (item.title) {%>
<% if (item.image) {%>
<% } %>
<%- __(item.title) %>
<% } %>
<% var rating = parseFloat(item.star_rating) || 5; var fullStars = Math.floor(rating); var hasHalfStar = (rating % 1) >= 0.5; var emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0); %>
<% for(var i = 0; i < fullStars; i++) { %>
<% } %>
<% if(hasHalfStar) { %>
<% } %>
<% for(var i = 0; i < emptyStars; i++) { %>
<% } %>
<%- __(item.content || item.review) %>
<%- __(item.name) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'review-card') { %>
<%# Block Type: review-card %>
<%# Styled Component: .type-review-card %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<% if (item.image) { %>
<% } %>
<% if (item.name) { %>
<%- __(item.name) %>
<% } %>
<% if (item.content) { %>
<%- __(item.content) %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'review-fb') { %>
<%# Block Type: review-fb %>
<%# Styled Component: .type-review-fb %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%-__(item.name)%>
recommends
<%- __(item.app_name || window.app_name) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'twitter-review') { %>
<%# Block Type: twitter-review %>
<%# Styled Component: .type-twitter-review %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<%# === Utility Components === %>
<% if (item.type == 'answer-hint') { %>
<%# Block Type: answer-hint %>
<%# Styled Component: .type-answer-hint %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '" style="display:none;"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%- __(item.content) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'audio') { %>
<%# Block Type: audio %>
<%# Styled Component: .type-audio %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%- __(item.content) %>
<% if (item.show_time === true || item.show_time === 'true') { %>
0:00
0:00
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'auto-swiper') { %>
<%# Block Type: auto-swiper %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<% item.options.forEach(function(option, index) { %>
<% if (option.image) {%>
<% } %>
<% if (option.content) {%>
<%- __(option.content) %>
<% } %>
<% }) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'background-draggable') { %>
<%# Block Type: background-draggable %>
<%# Styled Component: .type-background-draggable %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'before-after-animated') { %>
<%# Block Type: before-after-animated %>
<%# Styled Component: .type-before-after-animated %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%- __(item.content.before_text) %>
<%- __(item.content.after_text) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'block-back-time-counter') { %>
<%# Block Type: block-back-time-counter %>
<%# Styled Component: .type-block-back-time-counter %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%- __(item.content) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'city') { %>
<%# Block Type: city %>
<%# Styled Component: .type-city %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (String(item.label || '').trim()) { %>
<%- item.label %> <% } %>
required<% } %>
value="<%- item.value || ((window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id]) ? window.user_properties[item.name || screen.id] : '') %>"
<% if (item.required == 'true') { %>data-requires-valid-selection="true" data-valid-selected="<%- item.value || (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id]) ? 'true' : 'false' %>"<% } %>
<%= item.isAutofocus === "false" ? '' : 'data-autofocus' %>
autocomplete="off"
<%- item.attributes || '' %>
>
<%- __('Please type the answer') %>
<% if (item.provider === 'google') { %>
<%# Legacy opt-in: paid Google Places Autocomplete. Default is the local /geo/cities search. %>
<% } else { %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'container') { %>
<%# Block Type: container %>
<%# Styled Component: .type-container %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%// Render nested blocks inside container %>
<% if (item.content && Array.isArray(item.content)) { %>
<% item.content.forEach(function(nestedItem, nestedIndex) { %>
<% if (nestedItem.hidden) { return } %>
<% if (nestedItem['show-condition']) {
let showCondition = evaluateFunction(nestedItem['show-condition'], user_properties);
if (!showCondition) {
return;
}
} %>
<% if (nestedItem['visible'] == 'false' || nestedItem['visible'] == 'hide') {
return;
} %>
<%
// Keep parent screen (id, etc.); nested blocks need screen.id for input names.
let tempScreen = Object.assign({}, screen, { content: [nestedItem] });
%>
<%- TemplateManager.renderTemplate('screen-content', {
screen: tempScreen,
overrideContentItemIndex: contentItemIndex + "." + nestedIndex,
prices: window?.paywall_products?.product_info?.product_data?.prices ?? [],
product_info: window?.paywall_products?.product_info
}) %>
<% }) %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'country') { %>
<%# Block Type: country %>
<%# Select autocomplete field template with unified structure %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<%
let countriesList = [{"code":"AF","name":"Afghanistan","flag":"🇦🇫"},{"code":"AL","name":"Albania","flag":"🇦🇱"},{"code":"DZ","name":"Algeria","flag":"🇩🇿"},{"code":"AS","name":"American Samoa","flag":"🇦🇸"},{"code":"AD","name":"Andorra","flag":"🇦🇩"},{"code":"AO","name":"Angola","flag":"🇦🇴"},{"code":"AI","name":"Anguilla","flag":"🇦🇮"},{"code":"AG","name":"Antigua and Barbuda","flag":"🇦🇬"},{"code":"AR","name":"Argentina","flag":"🇦🇷"},{"code":"AM","name":"Armenia","flag":"🇦🇲"},{"code":"AW","name":"Aruba","flag":"🇦🇼"},{"code":"AU","name":"Australia","flag":"🇦🇺"},{"code":"AT","name":"Austria","flag":"🇦🇹"},{"code":"AZ","name":"Azerbaijan","flag":"🇦🇿"},{"code":"BS","name":"Bahamas","flag":"🇧🇸"},{"code":"BH","name":"Bahrain","flag":"🇧🇭"},{"code":"BD","name":"Bangladesh","flag":"🇧🇩"},{"code":"BB","name":"Barbados","flag":"🇧🇧"},{"code":"BY","name":"Belarus","flag":"🇧🇾"},{"code":"BE","name":"Belgium","flag":"🇧🇪"},{"code":"BZ","name":"Belize","flag":"🇧🇿"},{"code":"BJ","name":"Benin","flag":"🇧🇯"},{"code":"BM","name":"Bermuda Islands","flag":"🇧🇲"},{"code":"BT","name":"Bhutan","flag":"🇧🇹"},{"code":"BO","name":"Bolivia","flag":"🇧🇴"},{"code":"BQ","name":"Bonaire, Sint Eustatius and Saba","flag":"🇧🇶"},{"code":"BA","name":"Bosnia and Herzegovina","flag":"🇧🇦"},{"code":"BW","name":"Botswana","flag":"🇧🇼"},{"code":"BR","name":"Brazil","flag":"🇧🇷"},{"code":"IO","name":"British Indian Ocean Territory","flag":"🇮🇴"},{"code":"VG","name":"British Virgin Islands","flag":"🇻🇬"},{"code":"BN","name":"Brunei","flag":"🇧🇳"},{"code":"BG","name":"Bulgaria","flag":"🇧🇬"},{"code":"BF","name":"Burkina Faso","flag":"🇧🇫"},{"code":"BI","name":"Burundi","flag":"🇧🇮"},{"code":"CV","name":"Cabo Verde","flag":"🇨🇻"},{"code":"KH","name":"Cambodia","flag":"🇰🇭"},{"code":"CM","name":"Cameroon","flag":"🇨🇲"},{"code":"CA","name":"Canada","flag":"🇨🇦"},{"code":"CF","name":"CAR","flag":"🇨🇫"},{"code":"KY","name":"Cayman Islands","flag":"🇰🇾"},{"code":"TD","name":"Chad","flag":"🇹🇩"},{"code":"CL","name":"Chile","flag":"🇨🇱"},{"code":"TW","name":"China","flag":"🇹🇼"},{"code":"CX","name":"Christmas Island","flag":"🇨🇽"},{"code":"CO","name":"Colombia","flag":"🇨🇴"},{"code":"KM","name":"Comoros","flag":"🇰🇲"},{"code":"CK","name":"Cook Islands","flag":"🇨🇰"},{"code":"CR","name":"Costa Rica","flag":"🇨🇷"},{"code":"CI","name":"Côte d'Ivoire","flag":"🇨🇮"},{"code":"HR","name":"Croatia","flag":"🇭🇷"},{"code":"CU","name":"Cuba","flag":"🇨🇺"},{"code":"CW","name":"Curaçao","flag":"🇨🇼"},{"code":"CY","name":"Cyprus","flag":"🇨🇾"},{"code":"CZ","name":"Czech Republic","flag":"🇨🇿"},{"code":"CD","name":"Democratic Republic of the Congo","flag":"🇨🇩"},{"code":"DK","name":"Denmark","flag":"🇩🇰"},{"code":"DJ","name":"Djibouti","flag":"🇩🇯"},{"code":"DM","name":"Dominica","flag":"🇩🇲"},{"code":"DO","name":"Dominican Republic","flag":"🇩🇴"},{"code":"KP","name":"DPRK","flag":"🇰🇵"},{"code":"TL","name":"East Timor","flag":"🇹🇱"},{"code":"EC","name":"Ecuador","flag":"🇪🇨"},{"code":"EG","name":"Egypt","flag":"🇪🇬"},{"code":"SV","name":"El Salvador","flag":"🇸🇻"},{"code":"GQ","name":"Equatorial Guinea","flag":"🇬🇶"},{"code":"ER","name":"Eritrea","flag":"🇪🇷"},{"code":"EE","name":"Estonia","flag":"🇪🇪"},{"code":"SZ","name":"Eswatini","flag":"🇸🇿"},{"code":"ET","name":"Ethiopia","flag":"🇪🇹"},{"code":"FK","name":"Falkland Islands","flag":"🇫🇰"},{"code":"FJ","name":"Fiji","flag":"🇫🇯"},{"code":"FI","name":"Finland","flag":"🇫🇮"},{"code":"FR","name":"France","flag":"🇫🇷"},{"code":"PF","name":"French Polynesia","flag":"🇵🇫"},{"code":"TF","name":"French Southern and Antarctic Lands","flag":"🇹🇫"},{"code":"GA","name":"Gabon","flag":"🇬🇦"},{"code":"GM","name":"Gambia","flag":"🇬🇲"},{"code":"GE","name":"Georgia","flag":"🇬🇪"},{"code":"DE","name":"Germany","flag":"🇩🇪"},{"code":"GH","name":"Ghana","flag":"🇬🇭"},{"code":"GI","name":"Gibraltar","flag":"🇬🇮"},{"code":"GR","name":"Greece","flag":"🇬🇷"},{"code":"GL","name":"Greenland","flag":"🇬🇱"},{"code":"GD","name":"Grenada","flag":"🇬🇩"},{"code":"GP","name":"Guadeloupe","flag":"🇬🇵"},{"code":"GU","name":"Guam","flag":"🇬🇺"},{"code":"GT","name":"Guatemala","flag":"🇬🇹"},{"code":"GG","name":"Guernsey","flag":"🇬🇬"},{"code":"GN","name":"Guinea","flag":"🇬🇳"},{"code":"GW","name":"Guinea-Bissau","flag":"🇬🇼"},{"code":"GF","name":"Guyana","flag":"🇬🇫"},{"code":"GY","name":"Guyana","flag":"🇬🇾"},{"code":"HT","name":"Haiti","flag":"🇭🇹"},{"code":"HN","name":"Honduras","flag":"🇭🇳"},{"code":"HK","name":"Hong Kong","flag":"🇭🇰"},{"code":"HU","name":"Hungary","flag":"🇭🇺"},{"code":"IS","name":"Iceland","flag":"🇮🇸"},{"code":"IN","name":"India","flag":"🇮🇳"},{"code":"ID","name":"Indonesia","flag":"🇮🇩"},{"code":"IR","name":"Iran","flag":"🇮🇷"},{"code":"IQ","name":"Iraq","flag":"🇮🇶"},{"code":"IE","name":"Ireland","flag":"🇮🇪"},{"code":"IL","name":"Israel","flag":"🇮🇱"},{"code":"IT","name":"Italy","flag":"🇮🇹"},{"code":"JM","name":"Jamaica","flag":"🇯🇲"},{"code":"JP","name":"Japan","flag":"🇯🇵"},{"code":"JE","name":"Jersey","flag":"🇯🇪"},{"code":"JO","name":"Jordan","flag":"🇯🇴"},{"code":"KZ","name":"Kazakhstan","flag":"🇰🇿"},{"code":"KE","name":"Kenya","flag":"🇰🇪"},{"code":"KI","name":"Kiribati","flag":"🇰🇮"},{"code":"KW","name":"Kuwait","flag":"🇰🇼"},{"code":"KG","name":"Kyrgyzstan","flag":"🇰🇬"},{"code":"LA","name":"Laos","flag":"🇱🇦"},{"code":"LV","name":"Latvia","flag":"🇱🇻"},{"code":"LB","name":"Lebanon","flag":"🇱🇧"},{"code":"LS","name":"Lesotho","flag":"🇱🇸"},{"code":"LR","name":"Liberia","flag":"🇱🇷"},{"code":"LY","name":"Libya","flag":"🇱🇾"},{"code":"LI","name":"Liechtenstein","flag":"🇱🇮"},{"code":"LT","name":"Lithuania","flag":"🇱🇹"},{"code":"LU","name":"Luxembourg","flag":"🇱🇺"},{"code":"MO","name":"Macau, Aomen","flag":"🇲🇴"},{"code":"MG","name":"Madagascar","flag":"🇲🇬"},{"code":"MW","name":"Malawi","flag":"🇲🇼"},{"code":"MY","name":"Malaysia","flag":"🇲🇾"},{"code":"MV","name":"Maldives","flag":"🇲🇻"},{"code":"ML","name":"Mali","flag":"🇲🇱"},{"code":"MT","name":"Malta","flag":"🇲🇹"},{"code":"MH","name":"Marshall Islands","flag":"🇲🇭"},{"code":"MQ","name":"Martinique","flag":"🇲🇶"},{"code":"MR","name":"Mauritania","flag":"🇲🇷"},{"code":"MU","name":"Mauritius","flag":"🇲🇺"},{"code":"YT","name":"Mayotte","flag":"🇾🇹"},{"code":"MX","name":"Mexico","flag":"🇲🇽"},{"code":"FM","name":"Micronesia","flag":"🇫🇲"},{"code":"MD","name":"Moldova","flag":"🇲🇩"},{"code":"MC","name":"Monaco","flag":"🇲🇨"},{"code":"MN","name":"Mongolia","flag":"🇲🇳"},{"code":"ME","name":"Montenegro","flag":"🇲🇪"},{"code":"MS","name":"Montserrat","flag":"🇲🇸"},{"code":"MA","name":"Morocco","flag":"🇲🇦"},{"code":"MZ","name":"Mozambique","flag":"🇲🇿"},{"code":"MM","name":"Myanmar","flag":"🇲🇲"},{"code":"NA","name":"Namibia","flag":"🇳🇦"},{"code":"NR","name":"Nauru","flag":"🇳🇷"},{"code":"NP","name":"Nepal","flag":"🇳🇵"},{"code":"NL","name":"Netherlands","flag":"🇳🇱"},{"code":"NC","name":"New Caledonia","flag":"🇳🇨"},{"code":"NZ","name":"New Zealand","flag":"🇳🇿"},{"code":"NI","name":"Nicaragua","flag":"🇳🇮"},{"code":"NE","name":"Niger","flag":"🇳🇪"},{"code":"NG","name":"Nigeria","flag":"🇳🇬"},{"code":"NU","name":"Niue","flag":"🇳🇺"},{"code":"NF","name":"Norfolk Island","flag":"🇳🇫"},{"code":"MK","name":"North Macedonia","flag":"🇲🇰"},{"code":"MP","name":"Northern Mariana Islands","flag":"🇲🇵"},{"code":"NO","name":"Norway","flag":"🇳🇴"},{"code":"OM","name":"Oman","flag":"🇴🇲"},{"code":"PK","name":"Pakistan","flag":"🇵🇰"},{"code":"PW","name":"Palau","flag":"🇵🇼"},{"code":"PA","name":"Panama","flag":"🇵🇦"},{"code":"PG","name":"Papua New Guinea","flag":"🇵🇬"},{"code":"PY","name":"Paraguay","flag":"🇵🇾"},{"code":"PE","name":"Peru","flag":"🇵🇪"},{"code":"PH","name":"Philippines","flag":"🇵🇭"},{"code":"PN","name":"Pitcairn Islands","flag":"🇵🇳"},{"code":"PL","name":"Poland","flag":"🇵🇱"},{"code":"PT","name":"Portugal","flag":"🇵🇹"},{"code":"PR","name":"Puerto Rico","flag":"🇵🇷"},{"code":"QA","name":"Qatar","flag":"🇶🇦"},{"code":"CG","name":"Republic of the Congo","flag":"🇨🇬"},{"code":"KR","name":"Republic of Korea","flag":"🇰🇷"},{"code":"RE","name":"Réunion","flag":"🇷🇪"},{"code":"RO","name":"Romania","flag":"🇷🇴"},{"code":"RU","name":"Russia","flag":"🇷🇺"},{"code":"RW","name":"Rwanda","flag":"🇷🇼"},{"code":"BL","name":"Saint Barthélemy","flag":"🇧🇱"},{"code":"SH","name":"Saint Helena, Ascension and Tristan da Cunha","flag":"🇸🇭"},{"code":"KN","name":"Saint Kitts and Nevis","flag":"🇰🇳"},{"code":"LC","name":"Saint Lucia","flag":"🇱🇨"},{"code":"MF","name":"Saint Martin","flag":"🇲🇫"},{"code":"PM","name":"Saint Pierre and Miquelon","flag":"🇵🇲"},{"code":"VC","name":"Saint Vincent and the Grenadines","flag":"🇻🇨"},{"code":"WS","name":"Samoa","flag":"🇼🇸"},{"code":"SM","name":"San Marino","flag":"🇸🇲"},{"code":"ST","name":"São Tomé and Príncipe","flag":"🇸🇹"},{"code":"SA","name":"Saudi Arabia","flag":"🇸🇦"},{"code":"SN","name":"Senegal","flag":"🇸🇳"},{"code":"RS","name":"Serbia","flag":"🇷🇸"},{"code":"SC","name":"Seychelles","flag":"🇸🇨"},{"code":"SL","name":"Sierra Leone","flag":"🇸🇱"},{"code":"SG","name":"Singapore","flag":"🇸🇬"},{"code":"SX","name":"Sint Maarten","flag":"🇸🇽"},{"code":"SK","name":"Slovakia","flag":"🇸🇰"},{"code":"SI","name":"Slovenia","flag":"🇸🇮"},{"code":"SB","name":"Solomon Islands","flag":"🇸🇧"},{"code":"SO","name":"Somalia","flag":"🇸🇴"},{"code":"ZA","name":"South Africa","flag":"🇿🇦"},{"code":"SS","name":"South Sudan","flag":"🇸🇸"},{"code":"ES","name":"Spain","flag":"🇪🇸"},{"code":"LK","name":"Sri Lanka","flag":"🇱🇰"},{"code":"SD","name":"Sudan","flag":"🇸🇩"},{"code":"SR","name":"Suriname","flag":"🇸🇷"},{"code":"SJ","name":"Svalbard","flag":"🇸🇯"},{"code":"SE","name":"Sweden","flag":"🇸🇪"},{"code":"CH","name":"Switzerland","flag":"🇨🇭"},{"code":"SY","name":"Syria","flag":"🇸🇾"},{"code":"TJ","name":"Tajikistan","flag":"🇹🇯"},{"code":"TZ","name":"Tanzania","flag":"🇹🇿"},{"code":"TH","name":"Thailand","flag":"🇹🇭"},{"code":"TG","name":"Togo","flag":"🇹🇬"},{"code":"TK","name":"Tokelau","flag":"🇹🇰"},{"code":"TO","name":"Tonga","flag":"🇹🇴"},{"code":"TT","name":"Trinidad and Tobago","flag":"🇹🇹"},{"code":"TN","name":"Tunisia","flag":"🇹🇳"},{"code":"TR","name":"Turkey","flag":"🇹🇷"},{"code":"TM","name":"Turkmenistan","flag":"🇹🇲"},{"code":"TC","name":"Turks and Caicos","flag":"🇹🇨"},{"code":"TV","name":"Tuvalu","flag":"🇹🇻"},{"code":"AE","name":"UAE","flag":"🇦🇪"},{"code":"UG","name":"Uganda","flag":"🇺🇬"},{"code":"UA","name":"Ukraine","flag":"🇺🇦"},{"code":"GB","name":"United Kingdom","flag":"🇬🇧"},{"code":"US","name":"United States of America","flag":"🇺🇸"},{"code":"UY","name":"Uruguay","flag":"🇺🇾"},{"code":"UZ","name":"Uzbekistan","flag":"🇺🇿"},{"code":"VU","name":"Vanuatu","flag":"🇻🇺"},{"code":"VA","name":"Vatican","flag":"🇻🇦"},{"code":"VE","name":"Venezuela","flag":"🇻🇪"},{"code":"VN","name":"Vietnam","flag":"🇻🇳"},{"code":"VI","name":"Virgin Islands (U.S.)","flag":"🇻🇮"},{"code":"WF","name":"Wallis and Futuna","flag":"🇼🇫"},{"code":"YE","name":"Yemen","flag":"🇾🇪"},{"code":"ZM","name":"Zambia","flag":"🇿🇲"},{"code":"ZW","name":"Zimbabwe","flag":"🇿🇼"}];
// Get default value from locales.country_code or item.value
// const defaultValue = (typeof locales !== 'undefined' && locales.country_code) ? locales.country_code : (__(item.value || ''));
const defaultValue = __(item.value) ? __(item.value) : (window?.locales?.country_code ?? '');
let placeholderText = __(item.placeholder || 'Select country');
// If there's a default value, try to find matching country text
if (defaultValue) {
const matchingCountry = countriesList.find(country =>
country.code === defaultValue.toUpperCase() ||
country.name.toLowerCase() === defaultValue.toLowerCase()
);
if (matchingCountry) {
placeholderText = `${matchingCountry.flag} ${matchingCountry.name}`;
}
} else {
// If no default value, use first country as placeholder
const firstCountry = countriesList[0];
if (firstCountry) {
placeholderText = `${firstCountry.flag} ${firstCountry.name}`;
}
}
%>
/>
<% countriesList.forEach(function(country) { %>
<%- country.flag %> <%- country.name %>
<% }) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'customers-joined') { %>
<%# Block Type: customers-joined %>
<%# Styled Component: .type-customers-joined %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%- item.title %>
<% item.customers.forEach(function(option) { %>
<%- __(option) %>
<% }) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'download-app-banners') { %>
<%# Block Type: download-app-banners %>
<%# Styled Component: .type-download-app-banners %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<% var dabMode = item.download_app_mode || ''; var dabPlatform = detectPlatform(); var dabShowAllStores = (dabMode == 'show_all' || dabMode == 'show_all_no_qr'); var dabShowAppStore = dabShowAllStores || dabPlatform == 'iOS' || dabPlatform == 'iPad'; var dabShowGooglePlay = dabShowAllStores || dabPlatform == 'Android'; var dabShowQr = (dabMode == 'show_all') || (!dabMode && dabPlatform != 'iOS' && dabPlatform != 'iPad' && dabPlatform != 'Android'); %>
<% if (dabShowAppStore) { %>
<% } %>
<% if (dabShowGooglePlay) { %>
<% } %>
<% if (dabShowQr) { %>
<%-__(item.qr_code_text)%>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'duration') { %>
<%# Block Type: duration %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'file-upload') { %>
<%# Block Type: file-upload %>
<%# Styled Component: .type-file-upload %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'height') { %>
<%# Block Type: height %>
<%
// Determine default unit system - imperial if not specified
var isMetric = false;
if (window.user_properties && window.user_properties.user_units_system) {
isMetric = window.user_properties.user_units_system === 'metric';
} else if (item.default_user_units_system === 'auto') {
var imperialCountries = ["US", "LR", "MM", "GB", "CA", "BS", "BZ", "KY"];
isMetric = imperialCountries.indexOf(window.locales?.country_code) === -1;
} else {
isMetric = item.default_user_units_system === 'metric';
}
// Default to imperial (ft) if no system specified
var showImperial = !isMetric;
// Determine tab text style
var tabTextStyle = item.tab_text_style || 'short';
var imperialTabText = tabTextStyle === 'full' ? 'Imperial' : 'ft';
var metricTabText = tabTextStyle === 'full' ? 'Metric' : 'cm';
%>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'height-scroller') { %>
<%# Block Type: height-scroller %>
<%# Styled Component: .type-height-scroller %>
<%
var defaultUnitSystem = (item.default_user_units_system === 'imperial') ? 'imperial' : 'metric';
var unitLabelCm = (item.unit_label_metric != null && item.unit_label_metric !== '') ? item.unit_label_metric : __('cm');
var unitLabelFt = (item.unit_label_imperial != null && item.unit_label_imperial !== '') ? item.unit_label_imperial : __('ft');
%>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'html') { %>
<%# Block Type: html %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>" <%- item.attributes || '' %> >
<%- __(item.content) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'hybrid-wallet-button') { %>
<%# Block Type: hybrid-wallet-button %>
<%# Styled Component: .type-hybrid-wallet-button %>
<% if (getParams('edit_mode') && ['stripe'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to Stripe to use this block
<% } %>
<%
let prOptions = '{}';
if (item.options) {
try {
prOptions = JSON.stringify(item.options);
} catch (e) { /* Do nothing */ }
}
%>
data-payment-request-button
data-wallet-type="hybrid"
data-payment-method-type="hybrid-wallet-button"
data-not-available-behavior="<%-item.walletNotAvailableBehavior || 'show_default_button'%>"
data-pay-button-onclick="<%- item.pay_button_onclick || ''%>"
data-options='<%- prOptions.replace(/'/g, "\\'") %>'
data-apple-pay-label="<%- item.applePayLabel || '' %>"
data-google-pay-label="<%- item.googlePayLabel || '' %>"
data-apple-pay-logo="<%- item.applePayLogo || '/img/paywall/applepay-white.svg' %>"
data-google-pay-logo="<%- item.googlePayLogo || '/img/paywall/google-pay-white.svg' %>"
data-other-payment-methods-text="<%- item.otherPaymentMethodsText || '' %>"
data-card-pay-label="<%- item.cardPayLabel || '' %>"
data-card-pay-logo="<%- item.cardPayLogo || '' %>"
data-request-shipping="<%-item.request_shipping || ''%>"
data-phone-number-required="<%-item.phoneNumberRequired || ''%>"
data-request-payer-email="<%-typeof item.requestPayerEmail !== 'undefined' ? item.requestPayerEmail : 'auto'%>"
data-request-payer-name="<%-typeof item.requestPayerName !== 'undefined' ? item.requestPayerName : ''%>"
data-oncancel="<%-item.oncancel || ''%>"
data-oncancel-url="<%-item.oncancel_url || ''%>"
data-payment-failed-actions='<%- escapeHtmlForAttribute(JSON.stringify(item["payment_failed_actions"]) || "") %>'
>
<%- item.content || 'Continue' %>
Apple Pay / Google Pay is not available for this browser/device right now. This placeholder is visible only in edit mode.
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'js-script') { %>
<%# Block Type: js-script %>
<% if (getParams('edit_mode') == 1) { %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
JS Code
(executes after <%- item.timeout || 100 %>ms)
<% if (item.content && item.content.length > 0) { %>
<%- item.content.substring(0, 200) %><% if (item.content.length > 200) { %>...<% } %>
<% } %>
<% } else { %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'liking') { %>
<%# Block Type: liking %>
<%# Styled Component: .type-liking %>
<% if (item.reverse == "none") item.options.reverse(); %>
<% item.options.forEach(function(option, index) { %>
<% if (option.image) {%>
<%- __(item.text_left) %>
<%- __(item.text_right) %>
<% } %>
<% }) %>
<% if (item.visible_btns != "none") { %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'list') { %>
<%# Block Type: list %>
<%# Styled Component: .type-list %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<% (item.content || []).forEach(function(listItem) { %>
<% if (item.marker) { %>
<%- __(item.marker) %>
<%- __(listItem) %>
<% } else { %>
<%- __(listItem) %>
<% } %>
<% }) %>
<%
if (item.duration) {
setTimeout(function(){
let els = $('[data-block-area-index="' + contentItemIndex + '"] li.type-list__item');
els.css('opacity', '0');
els.each(function (index, el) {
setTimeout(function(){
$(el).animate({opacity: 1}, item.duration)
}, item.duration * index)
})
}, 50)
}
%>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'lottie') { %>
<%# Block Type: lottie %>
<%# Styled Component: .type-lottie %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'number-scroller') { %>
<%# Block Type: number-scroller %>
<%# Styled Component: .type-number-scroller %>
<%
var labelText = (item.label_text != null && item.label_text !== '') ? item.label_text : '';
%>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'personalization-block') { %>
<%# Block Type: personalization-block %>
<%# Styled Component: .type-personalization-block %>
>
<% item.blocks.forEach(function(option) { %>
<%- __(option.text) %>
<%- __(option.option) %>
<% }) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'primer-adaptive-wallets-button') { %>
<%# Block Type: primer-adaptive-wallets-button %>
<%# Styled Component: .type-primer-adaptive-wallets-button %>
<% if (getParams('edit_mode') && ['primer', 'hubx'].indexOf(window?.paywall?.payment_system) === -1) { %>
Change 'Main Payment system' in Paywall Settings to Primer to use this block
<% } %>
<%
let prOptions = '{}';
if (item.options) {
try {
prOptions = JSON.stringify(item.options);
} catch (e) { /* Do nothing */ }
}
%>
'
data-payment-failed-actions='<%- escapeHtmlForAttribute(JSON.stringify(item["payment_failed_actions"]) || "") %>'>
<%# Native wallet buttons. JS shows Apple Pay if available, else Google
Pay; both stay real, visible, tappable so iOS launches the sheet. %>
<%# Fallback button shown when no wallet is available, and as the
loading-state button before Primer resolves wallet availability. %>
<% if (!item.pay_button_onclick) { %>
data-popup="#popup-plan"
<% } else if (item.pay_button_onclick == 'payment-form') { %>
data-scroll-to="[data-primer-block='card-form']"
<% } else if (item.pay_button_onclick == 'redirect_price_url') { %>
data-redirect-price-url
<% } else if (item.pay_button_onclick.startsWith('scroll-to-index|')) { %>
data-scroll-to="[data-block-area-index='<%-item.pay_button_onclick.split('|')[1]%>']"
<% } else { %>
data-popup="#<%-item.pay_button_onclick%>"
<% } %>
data-primer-adaptive-wallet-button
data-payment-method-type="primer-adaptive-wallets-button"
>
<%- item.content || 'Continue' %>
Apple Pay / Google Pay is not available for this browser/device right now. This placeholder is visible only in edit mode.
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'promo-ticket') { %>
<%# Block Type: promo-ticket %>
<%# Styled Component: .type-promo-ticket %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'required-checkbox') { %>
<%# Block Type: required-checkbox %>
>
<%- (__(item.default) === "true") ? ' checked' : '' %>>
<%- __(item.content || 'I agree to the terms and conditions') %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'sale-timer') { %>
<%# Block Type: sale-timer %>
<%# Styled Component: .type-sale-timer %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%-__(item.applied_discount_text || 'Applied limited discount')%>
<%- item.sale_old %> <%- item.sale %>
<%- item.user_old %>
<%- __(item.user) %>
<%-__(item.applicable_for_text || 'Applicable for')%>
<%-__('minutes')%>
<%-__('seconds')%>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'scratch-discount') { %>
<%# Block Type: scratch-discount %>
<%# Styled Component: .type-scratch-discount %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%- __(item.reveal_text || '') %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'send-download-link') { %>
<%# Block Type: send-download-link %>
<%# Styled Component: .type-send-download-link %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'signature') { %>
<%# Block Type: signature %>
<%# Styled Component: .type-signature %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
Clear
required<% } %>
data-signature-value
/>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'sort-select') { %>
<%# Block Type: sort-select %>
<%# Styled Component: .type-sort-select %>
<% var sortSelectField = getSortSelectFieldName(item, screen, contentItemIndex); %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'spin-wheel') { %>
<%# Block Type: spin-wheel %>
<%# Styled Component: .type-spin-wheel %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
<%- __(item.segment_1 || '') %>
<%- __(item.segment_2 || '') %>
<%- __(item.segment_3 || '') %>
<%- __(item.segment_4 || '') %>
<%- __(item.segment_5 || '') %>
<%- __(item.segment_6 || '') %>
<%- __(item.button_text || 'Spin') %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'spinner') { %>
<%# Block Type: spinner %>
<%# Styled Component: .type-spinner %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'summary') { %>
<%# Block Type: summary %>
<%# Styled Component: .type-summary %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>" style="<%- item.style || ''%>" <%- item.attributes || '' %>>
<% if (item.result) { %>
<%-__(item.result)%>
<% } %>
<%-__(item.content)%>
<% if (item.label) { %>
<%-__(item.label)%>
<% } %>
<%if (item.levels_t) {%>
<% item.levels_t.forEach(function(option, index) { %>
<%- __(option.value) %>
<% }) %><% }%>
<%if (item.levels) {%>
<% item.levels.forEach(function(option, index) { %>
<%- __(option.value) %>
<% }) %><% }%>
<%if (item.desc) {%>
<%-__(item.desc)%>
<% } else {%>
<%}%>
<% item.options.forEach(function(option, index) { %>
<%-__(option.title)%>
<%-__(option.desc)%>
<% }) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'time-select') { %>
<%# Block Type: time-select %>
<%- item.label %>
<%-__('Please type the answer')%>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'timer-sticky') { %>
<%# Block Type: timer-sticky %>
<%# Styled Component: .type-timer-sticky %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
>
data-popup="#popup-plan"
<% } else if (item.pay_button_onclick == 'payment-form') { %>
data-scroll-to="#payment-form"
<% } else if (item.pay_button_onclick == 'redirect_price_url') { %>
data-redirect-price-url
<% } else if (item.pay_button_onclick.startsWith('scroll-to-index|')) { %>
data-scroll-to="[data-block-area-index='<%-item.pay_button_onclick.split('|')[1]%>']"
<% } else { %>
data-popup="#<%-item.pay_button_onclick%>"
<% } %>
><%-__(item['Button text']) %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'toggle') { %>
<%# Block Type: toggle %>
<%# Styled Component: .type-toggle %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'tos-check') { %>
<%# Block Type: tos-check %>
<%# Styled Component: .type-tos-check %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'translations') { %>
<%# Block Type: translations %>
<% if (item.language_list_type === 'single_choice') { %>
<%
// Sort translations by English name
let sortedTranslations = window.translationsVariants ? [...window.translationsVariants].sort(function(a, b) {
return (a.display_name_en || '').localeCompare(b.display_name_en || '');
}) : [];
// Prepare options array compatible with options.ejs
let translationOptions = sortedTranslations.map(function(translation) {
return {
content: ` ${translation.emoji} ${translation.display_name} (${translation.display_name_en})`,
value: translation.language_code,
selected: translation.is_current
};
});
// Render using the options template
const optionsBlock = {
type: "options",
name: "user_selected_language",
options: translationOptions,
answers_alignment: item.answers_alignment,
columns: item.columns
};
%>
<%- TemplateManager.renderTemplate('screen-content', {
overrideContentItemIndex: contentItemIndex,
screen: {
content: [optionsBlock]
}
}) %>
<% } else { %>
<%# Select autocomplete mode (default) %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'video') { %>
<%# Block Type: video %>
<%# Styled Component: .type-video %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
data-video-index="<%- contentItemIndex %>" data-on-video-end="<%- item.on_video_end || '' %>" data-click-to-play-pause="<%- item.click_to_play_pause || '' %>">
<% if (item.show_controls === 'true' || item.show_controls === true) { %>
<% } %>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'voice-record') { %>
<%# Block Type: voice-record %>
<%# Styled Component: .type-voice-record %>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
"
<%- item.attributes || '' %>
>
<%- __(item.idle_text || 'Tap to start recording') %>
00:00
<% if (String(item.allow_upload) !== 'false') { %>
<% } %>
<% if (item.loader_svg) { %>
<%- item.loader_svg %>
<% } else { %>
<% } %>
<%- __(item.recorded_title || 'My voice') %>
00:00
00:00
required<% } %>
data-voice-record-value
/>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'weight') { %>
<%# Block Type: weight %>
<%
// Determine default unit system - imperial if not specified
var isMetric = false;
if (typeof user_properties !== 'undefined' && user_properties && user_properties.user_units_system) {
isMetric = user_properties.user_units_system === 'metric';
} else if (item.default_user_units_system === 'auto') {
var imperialCountries = ["US", "LR", "MM", "GB", "CA", "BS", "BZ", "KY"];
isMetric = imperialCountries.indexOf(window.locales?.country_code) === -1;
} else {
isMetric = item.default_user_units_system === 'metric';
}
// Default to imperial (lbs) if no system specified
var showImperial = !isMetric;
// Determine tab text style
var tabTextStyle = item.tab_text_style || 'short';
var imperialTabText = tabTextStyle === 'full' ? 'Imperial' : 'lbs';
var metricTabText = tabTextStyle === 'full' ? 'Metric' : 'kg';
%>
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% if (item.type == 'weight-scroller') { %>
<%# Block Type: weight-scroller %>
<%# Styled Component: .type-weight-scroller %>
<%
var defaultUnitSystem = (item.default_user_units_system === 'imperial') ? 'imperial' : 'metric';
var unitLabelKg = (item.unit_label_metric != null && item.unit_label_metric !== '') ? item.unit_label_metric : __('kg');
var unitLabelLbs = (item.unit_label_imperial != null && item.unit_label_imperial !== '') ? item.unit_label_imperial : __('lbs');
%>
= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
<% if (Object.keys(item.css_variables || {}).length > 0) { %>
<% } %>
<% } %>
<% })
%>