@revenuecat/purchases-ui-js
Version:
Web components for Paywalls. Powered by RevenueCat
60 lines (59 loc) • 2.38 kB
JavaScript
import { paywallWithFooter, paywallWithHeader } from "../../../stories/fixtures";
function footerStack(paywall) {
const footer = paywall.components_config.base.sticky_footer;
if (!footer) {
throw new Error("Fixture has no sticky footer");
}
return footer.stack;
}
function lastTextComponent(components) {
return components.findLast((component) => component.type === "text");
}
/** Duplicates the last text component so the content is tall enough to scroll. */
function appendScrollableContent(paywall, count) {
const components = paywall.components_config.base.stack.components;
const lastText = lastTextComponent(components);
if (!lastText) {
return;
}
for (let index = 0; index < count; index++) {
const copy = structuredClone(lastText);
copy.id = `scroll-filler-${index}`;
components.push(copy);
}
}
function setFooterBackground(paywall, hex) {
footerStack(paywall).background_color = {
light: { type: "hex", value: hex },
};
}
/** Translucent sticky footer over long scrollable content. */
export const paywallWithTransparentFooter = (() => {
const paywall = structuredClone(paywallWithFooter);
appendScrollableContent(paywall, 25);
setFooterBackground(paywall, "#057C5BAA");
return paywall;
})();
/** Small body that must center in the space above the footer, not the whole screen. */
export const paywallWithCenteredBodyAndFooter = (() => {
const paywall = structuredClone(paywallWithFooter);
const stack = paywall.components_config.base.stack;
const lastText = lastTextComponent(stack.components);
stack.components = lastText ? [lastText] : [];
stack.dimension.distribution = "center";
setFooterBackground(paywall, "#057C5BAA");
return paywall;
})();
/** Header and sticky footer together: the footer overlay must not affect the header. */
export const paywallWithHeaderAndFooter = (() => {
const paywall = structuredClone(paywallWithFooter);
appendScrollableContent(paywall, 15);
const headerDonor = structuredClone(paywallWithHeader);
paywall.components_config.base.header =
headerDonor.components_config.base.header;
paywall.components_localizations.en_US = {
...paywall.components_localizations.en_US,
...headerDonor.components_localizations.en_US,
};
return paywall;
})();