Fixed portal not passing all params in preview - Admin X (#17783)

refs https://github.com/TryGhost/Product/issues/3349

- Previously it detected members as being disabled altogether, which
wasn't the case.
- This resolves that by passing in a few extra required params to have
Portal loading properly

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at d3cccab</samp>

This pull request enhances the portal preview feature by adding new
parameters to the iframe URL for the portal settings and pricing tiers.
It also cleans up some code in `PortalFrame.tsx` for better readability
and type safety.
This commit is contained in:
Ronald Langeveld 2023-08-23 10:48:20 +02:00 committed by GitHub
parent 2159b4fb30
commit 359617462a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -19,55 +19,53 @@ function getPortalPreviewUrl({settings, tiers, siteData, selectedTab}: {
if (!siteData?.url) { if (!siteData?.url) {
return null; return null;
} }
let portalTiers = tiers.filter((t) => { let portalTiers = tiers.filter((t) => {
return t.visibility === 'public' && t.type === 'paid'; return t.visibility === 'public' && t.type === 'paid';
}).map(t => t.id); }).map(t => t.id);
const baseUrl = siteData.url.replace(/\/$/, ''); const baseUrl = siteData.url.replace(/\/$/, '');
const portalBase = '/#/portal/preview'; const portalBase = '/?v=modal-portal-settings#/portal/preview';
const settingsParam = new URLSearchParams(); const settingsParam = new URLSearchParams();
const signupButtonText = getSettingValue(settings, 'portal_button_signup_text') || ''; const signupButtonText = getSettingValue(settings, 'portal_button_signup_text') || '';
let buttonIcon = getSettingValue(settings, 'portal_button_icon') as string; let buttonIcon = getSettingValue(settings, 'portal_button_icon') as string || 'icon-1';
if (!buttonIcon) {
buttonIcon = 'icon-1';
}
const portalPlans: string[] = JSON.parse(getSettingValue(settings, 'portal_plans') as string); const portalPlans: string[] = JSON.parse(getSettingValue(settings, 'portal_plans') as string);
const isFreeChecked = portalPlans.includes('free'); const isFreeChecked = portalPlans.includes('free') ? 'true' : 'false';
const isMonthlyChecked = portalPlans.includes('monthly'); const isMonthlyChecked = portalPlans.includes('monthly') ? 'true' : 'false';
const isYearlyChecked = portalPlans.includes('yearly'); const isYearlyChecked = portalPlans.includes('yearly') ? 'true' : 'false';
const portalButton = getSettingValue(settings, 'portal_button') || false; const portalButton = getSettingValue(settings, 'portal_button') === true ? 'true' : 'false'; // Assuming a boolean
const portalName = getSettingValue(settings, 'portal_name'); const portalName = getSettingValue(settings, 'portal_name') as boolean;
const portalButtonStyle = getSettingValue(settings, 'portal_button_style') as string; const signupCheckboxRequired = getSettingValue(settings, 'portal_signup_checkbox_required') ? 'true' : 'false'; // Assuming a boolean
const signupCheckboxRequired = getSettingValue(settings, 'portal_signup_checkbox_required') as boolean; const portalSignupTermsHtml = getSettingValue(settings, 'portal_signup_terms_html') || '';
const portalSignupTermsHtml = getSettingValue(settings, 'portal_signup_terms_html') as string || ''; let page = selectedTab === 'account' ? 'accountHome' : 'signup';
let page = 'signup';
if (selectedTab === 'account') {
page = 'accountHome';
}
settingsParam.append('button', `${portalButton}`); settingsParam.append('button', portalButton);
settingsParam.append('name', `${portalName}`); settingsParam.append('name', portalName ? 'true' : 'false');
settingsParam.append('isFree', `${isFreeChecked}`); settingsParam.append('isFree', isFreeChecked);
settingsParam.append('isMonthly', `${isMonthlyChecked}`); settingsParam.append('isMonthly', isMonthlyChecked);
settingsParam.append('isYearly', `${isYearlyChecked}`); settingsParam.append('isYearly', isYearlyChecked);
settingsParam.append('page', page); settingsParam.append('page', page);
settingsParam.append('buttonIcon', encodeURIComponent(buttonIcon)); settingsParam.append('buttonIcon', encodeURIComponent(buttonIcon));
settingsParam.append('signupButtonText', encodeURIComponent(signupButtonText)); settingsParam.append('signupButtonText', encodeURIComponent(signupButtonText));
settingsParam.append('membersSignupAccess', 'true'); settingsParam.append('membersSignupAccess', 'all');
settingsParam.append('allowSelfSignup', 'true'); settingsParam.append('allowSelfSignup', 'true');
settingsParam.append('signupTermsHtml', portalSignupTermsHtml); settingsParam.append('signupTermsHtml', portalSignupTermsHtml.toString());
settingsParam.append('signupCheckboxRequired', `${signupCheckboxRequired}`); settingsParam.append('signupCheckboxRequired', signupCheckboxRequired);
if (portalTiers) { if (portalTiers && portalTiers.length) {
const portalTiersList = portalTiers.join(','); settingsParam.append('portalProducts', encodeURIComponent(portalTiers.join(','))); // assuming that it might be more than 1
settingsParam.append('portalProducts', encodeURIComponent(portalTiersList));
} }
settingsParam.append('accentColor', encodeURIComponent(`${getSettingValue(settings, 'accent_color')}`)); if (portalPlans && portalPlans.length) {
settingsParam.append('portalPrices', encodeURIComponent(portalPlans.join(',')));
}
if (getSettingValue(settings, 'portal_button_style')) { const accentColor = getSettingValue(settings, 'accent_color');
if (accentColor !== undefined && accentColor !== null) {
settingsParam.append('accentColor', encodeURIComponent(accentColor));
}
const portalButtonStyle = getSettingValue(settings, 'portal_button_style');
if (portalButtonStyle) {
settingsParam.append('buttonStyle', encodeURIComponent(portalButtonStyle)); settingsParam.append('buttonStyle', encodeURIComponent(portalButtonStyle));
} }