ghost 5.121.0 → 5.123.0

package/core/server/services/koenig/render-partials/email-button.js

@@ -1,34 +1,60 @@
 const clsx = require('clsx');
+const {textColorForBackgroundColor} = require('@tryghost/color-utils');
 const {html} = require('../render-utils/tagged-template-fns.js');
+const stylex = require('../render-utils/stylex.js');
 
 /**
- * @param {Object} options
- * @param {string} [options.alignment]
- * @param {string} [options.color='accent']
- * @param {string} [options.text='']
- * @param {string} [options.textColor]
- * @param {string} [options.url='']
- * @param {string} [options.buttonWidth='']
+ * @typedef {Object} EmailButtonOptions
+ * @property {string} [url=''] - The URL the button links to
+ * @property {string} [text=''] - The text displayed on the button
+ * @property {string} [alignment] - The alignment of the button
+ * @property {string} [buttonWidth=''] - The width of the button
+ * @property {string} [color=''] - The color of the button, no color defaults to newsletter button color setting
+ * @property {'fill'|'outline'} [style='fill'] - The style of the button
+ */
+
+const defaultOptions = {
+    url: '',
+    text: '',
+    alignment: '',
+    buttonWidth: '',
+    color: '',
+    style: /** @type {'fill'|'outline'} */ ('fill')
+};
+
+/**
+ * @param {EmailButtonOptions} buttonOptions
+ * @returns {EmailButtonOptions}
+ */
+function _getOptions(buttonOptions = {}) {
+    // merge with defaults
+    // but we don't want undefined values to override default values
+    return {
+        ...defaultOptions,
+        ...Object.fromEntries(
+            Object.entries(buttonOptions).filter(([, value]) => value !== undefined)
+        )
+    };
+}
+
+/**
+ * @param {EmailButtonOptions} buttonOptions
  * @returns {string}
  */
-function renderEmailButton({
-    alignment = '',
-    color = 'accent',
-    text = '',
-    url = '',
-    buttonWidth = ''
-} = {}) {
-    const buttonClasses = clsx(
-        'btn',
-        color === 'accent' && 'btn-accent'
-    );
+function renderEmailButton(buttonOptions = {}) {
+    const options = _getOptions(buttonOptions);
+    const {url, text, alignment, buttonWidth} = options;
+
+    const buttonClasses = _getButtonClasses(options);
+    const buttonStyle = _getButtonStyle(options);
+    const linkStyle = _getLinkStyle(options);
 
     return html`
         <table class="${buttonClasses}" border="0" cellspacing="0" cellpadding="0"${alignment ? ` align="${alignment}"` : ''}>
             <tbody>
                 <tr>
-                    <td align="center"${buttonWidth ? ` width="${buttonWidth}"` : ''}>
-                        <a href="${url}">${text}</a>
+                    <td align="center"${buttonWidth ? ` width="${buttonWidth}"` : ''}${buttonStyle ? ` style="${buttonStyle}"` : ''}>
+                        <a href="${url}"${linkStyle ? ` style="${linkStyle}"` : ''}>${text}</a>
                     </td>
                 </tr>
             </tbody>
@@ -36,6 +62,86 @@ function renderEmailButton({
     `;
 }
 
+/**
+ * @param {EmailButtonOptions} options
+ * @returns {boolean}
+ */
+function _isColoredFill({color, style}) {
+    return color && color !== 'accent' && color !== 'transparent' && style === 'fill';
+}
+
+/**
+ * @param {EmailButtonOptions} options
+ * @returns {boolean}
+ */
+function _isColoredOutline({color, style}) {
+    return color && color !== 'accent' && style === 'outline';
+}
+
+/**
+ * @param {EmailButtonOptions} options
+ * @returns {string}
+ */
+function _getTextColor({color, style}) {
+    if (_isColoredFill({color, style})) {
+        return textColorForBackgroundColor(color).hex();
+    }
+
+    return '';
+}
+
+/**
+ * @param {EmailButtonOptions} options
+ * @returns {string}
+ */
+function _getButtonClasses({color}) {
+    return clsx(
+        'btn',
+        color === 'accent' && 'btn-accent'
+    );
+}
+
+/**
+ * @param {EmailButtonOptions} options
+ * @returns {string}
+ */
+function _getButtonStyle({color, style}) {
+    return stylex(
+        _isColoredFill({color, style}) && {
+            backgroundColor: color
+        },
+        _isColoredOutline({color, style}) && {
+            border: `1px solid ${color}`,
+            backgroundColor: 'transparent',
+            color: `${color} !important`
+        }
+    );
+}
+
+/**
+ * @param {EmailButtonOptions} options
+ * @returns {string}
+ */
+function _getLinkStyle({color, style}) {
+    const textColor = _getTextColor({color, style});
+
+    return stylex(
+        _isColoredFill({color, style}) && textColor && {
+            color: `${textColor} !important`
+        },
+        _isColoredOutline({color, style}) && {
+            color: `${color} !important`
+        }
+    );
+}
+
 module.exports = {
-    renderEmailButton
+    renderEmailButton,
+    _getOptions,
+    _isColoredFill,
+    _isColoredOutline,
+    _getTextColor,
+    _getButtonClasses,
+    _getButtonStyle,
+    _getLinkStyle
 };

package/core/server/services/koenig/render-utils/stylex.js

@@ -0,0 +1,104 @@
+/**
+ * Converts a camelCase string to kebab-case
+ * @param {string} str - The string to convert
+ * @returns {string} The kebab-case string
+ */
+function toKebabCase(str) {
+    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+/**
+ * Formats a CSS value, adding units where necessary
+ * @param {string} key - The CSS property name
+ * @param {*} value - The value to format
+ * @returns {string} The formatted CSS value
+ */
+function formatValue(key, value) {
+    if (value === null || value === undefined || value === '') {
+        return '';
+    }
+
+    // Properties that should get px units for numeric values
+    const needsPx = /^(width|height|top|right|bottom|left|margin|padding|fontSize|borderRadius|marginTop|marginRight|marginBottom|marginLeft|paddingTop|paddingRight|paddingBottom|paddingLeft|borderTopWidth|borderRightWidth|borderBottomWidth|borderLeftWidth)$/;
+
+    // Properties that should never get px units
+    const noPx = /^(lineHeight|opacity|zIndex|flexGrow|flexShrink|order)$/;
+
+    if (typeof value === 'number') {
+        if (needsPx.test(key)) {
+            return `${value}px`;
+        }
+        if (!noPx.test(key)) {
+            return `${value}px`;
+        }
+    }
+
+    return String(value);
+}
+
+/**
+ * Parses a CSS string into an object of style properties
+ * @param {string} cssString - The CSS string to parse
+ * @returns {Object} Object containing style properties
+ */
+function parseCssString(cssString) {
+    if (typeof cssString !== 'string') {
+        return {};
+    }
+
+    const styles = {};
+    const declarations = cssString.split(';').filter(Boolean);
+
+    declarations.forEach((declaration) => {
+        const [property, value] = declaration.split(':').map(part => part.trim());
+        if (property && value) {
+            // Convert kebab-case to camelCase for consistency
+            const camelCaseProperty = property.replace(/-([a-z])/g, g => g[1].toUpperCase());
+            styles[camelCaseProperty] = value;
+        }
+    });
+
+    return styles;
+}
+
+/**
+ * Combines multiple style objects and CSS strings into a single CSS string
+ * @param {...(Object|string)} styles - Style objects or CSS strings to combine
+ * @returns {string} Combined CSS string
+ */
+function stylex(...styles) {
+    const mergedStyles = {};
+
+    // Process each style argument
+    styles.forEach((style) => {
+        if (!style) {
+            return;
+        }
+
+        if (typeof style === 'string') {
+            // Handle CSS strings
+            const parsedStyles = parseCssString(style);
+            Object.assign(mergedStyles, parsedStyles);
+        } else if (typeof style === 'object') {
+            // Handle style objects
+            Object.entries(style).forEach(([key, value]) => {
+                if (value !== null && value !== false) {
+                    mergedStyles[key] = value;
+                }
+            });
+        }
+    });
+
+    // Convert to CSS string with spaces after semicolons
+    const styleString = Object.entries(mergedStyles)
+        .map(([key, value]) => {
+            const formattedValue = formatValue(key, value);
+            return formattedValue ? `${toKebabCase(key)}: ${formattedValue}` : '';
+        })
+        .filter(Boolean)
+        .join('; ');
+
+    return styleString ? styleString + ';' : '';
+}
+
+module.exports = stylex;

package/core/server/services/stats/MembersStatsService.js

@@ -65,7 +65,7 @@ class MembersStatsService {
             ) as free_delta`))
             .where('created_at', '>=', formattedStartDate)
             .groupByRaw('DATE(created_at)');
-        return rows;
+        return /** @type {MemberStatusDelta[]} */ (/** @type {unknown} */ (rows));
     }
 
     /**
@@ -79,14 +79,138 @@ class MembersStatsService {
 
         // Fetch current total amounts and start counting from there
         const totals = await this.getCount();
-        let {paid, free, comped} = totals;
 
-        // Get today in UTC (default timezone)
-        const today = moment().format('YYYY-MM-DD');
+        // Get today in UTC (consistent with frontend)
+        const today = moment.utc().format('YYYY-MM-DD');
+
+        // When startDate is provided, always return complete range
+        if (options.startDate) {
+            return this._generateCompleteRange(rows, totals, options.startDate, today);
+        }
+        
+        // Use original sparse logic only for default case (no startDate)
+        return this._generateSparseRange(rows, totals, today);
+    }
+
+    /**
+     * Generate complete date range with forward-filling for frontend
+     * @param {Array} rows - Event data from database
+     * @param {Object} totals - Current member totals
+     * @param {string|Date} startDate - Start date for range
+     * @param {string} today - Today's date in YYYY-MM-DD format
+     * @returns {Object} Complete date range data
+     */
+    _generateCompleteRange(rows, totals, startDate, today) {
+        const startDateMoment = moment.utc(startDate).startOf('day');
+        const endDateMoment = moment.utc(today).startOf('day');
+        
+        // Create a map of events by date for fast lookup
+        const eventsMap = new Map();
+        rows.forEach((row) => {
+            const date = moment(row.date).format('YYYY-MM-DD');
+            eventsMap.set(date, row);
+        });
+
+        // Sort rows chronologically to calculate historical totals
+        rows.sort((a, b) => moment(a.date).valueOf() - moment(b.date).valueOf());
+
+        // Work backwards from current totals to build historical data for event dates
+        let runningPaid = totals.paid;
+        let runningFree = totals.free;
+        let runningComped = totals.comped;
 
+        const historicalTotalsMap = new Map();
+        
+        // Calculate totals for each event date by working backwards
+        for (let i = rows.length - 1; i >= 0; i -= 1) {
+            const row = rows[i];
+            const date = moment(row.date).format('YYYY-MM-DD');
+            
+            if (date > today) {
+                continue; // Skip future dates
+            }
+
+            // Store the totals for this date
+            historicalTotalsMap.set(date, {
+                paid: Math.max(0, runningPaid),
+                free: Math.max(0, runningFree),
+                comped: Math.max(0, runningComped),
+                paid_subscribed: row.paid_subscribed,
+                paid_canceled: row.paid_canceled
+            });
+
+            // Update running totals for previous days
+            runningPaid -= row.paid_subscribed - row.paid_canceled;
+            runningFree -= row.free_delta;
+            runningComped -= row.comped_delta;
+        }
+
+        // Generate complete date range from day before startDate to today (includes baseline)
+        const results = [];
+        const currentDate = moment(startDateMoment).subtract(1, 'day');
+        
+        // Track the last known values for forward-filling
+        let lastKnownTotals = {
+            paid: Math.max(0, runningPaid), // Historical baseline before all events
+            free: Math.max(0, runningFree),
+            comped: Math.max(0, runningComped)
+        };
+
+        while (currentDate.isSameOrBefore(endDateMoment)) {
+            const dateStr = currentDate.format('YYYY-MM-DD');
+            
+            if (historicalTotalsMap.has(dateStr)) {
+                // Use actual event data and update our last known totals
+                const eventData = historicalTotalsMap.get(dateStr);
+                lastKnownTotals = {
+                    paid: eventData.paid,
+                    free: eventData.free,
+                    comped: eventData.comped
+                };
+                results.push({
+                    date: dateStr,
+                    paid: eventData.paid,
+                    free: eventData.free,
+                    comped: eventData.comped,
+                    paid_subscribed: eventData.paid_subscribed,
+                    paid_canceled: eventData.paid_canceled
+                });
+            } else {
+                // Forward-fill with last known totals (no events on this day)
+                results.push({
+                    date: dateStr,
+                    paid: lastKnownTotals.paid,
+                    free: lastKnownTotals.free,
+                    comped: lastKnownTotals.comped,
+                    paid_subscribed: 0,
+                    paid_canceled: 0
+                });
+            }
+            
+            currentDate.add(1, 'day');
+        }
+
+        return {
+            data: results,
+            meta: {
+                totals
+            }
+        };
+    }
+
+    /**
+     * Generate sparse date range (original behavior for backward compatibility)
+     * @param {Array} rows - Event data from database
+     * @param {Object} totals - Current member totals
+     * @param {string} today - Today's date in YYYY-MM-DD format
+     * @returns {Object} Sparse date range data
+     */
+    _generateSparseRange(rows, totals, today) {
+        let {paid, free, comped} = totals;
         const cumulativeResults = [];
 
-        rows.sort((a, b) => new Date(a.date) - new Date(b.date));
+        rows.sort((a, b) => moment(a.date).valueOf() - moment(b.date).valueOf());
+        
         // Loop in reverse order (needed to have correct sorted result)
         for (let i = rows.length - 1; i >= 0; i -= 1) {
             const row = rows[i];