{ children }
+
+ { flash && (
+
+ { flash.message }
+
+ ) }
+
+ { hasAlerts &&
+ subscriber.alerts.map( alert => (
+ setModal( { kind: 'guided', alert } ),
+ variant: 'link',
+ },
+ ] }
+ >
+ { `${ alert.title }. ${ alert.message }` }
+
+ ) ) }
+
+ { ( subscriber.notes || [] ).length > 0 && (
+
+ { subscriber.notes.map( note => (
+
+
+
+
+
+
+
+
+ ) ) }
+
+ ) }
+
+
+
+ { subscriber.subscriptions.length === 0 ? (
+
+
+ ) : (
+ subscriber.subscriptions.map( sub => {
+ const isActive = sub.status === 'active';
+ return (
+
+
+
+ { isActive ? (
+ <>
+
+
+
+ ) : (
+
+ ) }
+
+
+
+ );
+ } )
+ ) }
+
+
+
+
+
+
+ { NEWSLETTERS.map( newsletter => {
+ const isSubscribed = ( subscriber.newsletters || [] ).includes( newsletter.id );
+ return (
+
+
+ { newsletter.name }
+ { newsletter.description }
+
+ {
+ const nextList = isSubscribed
+ ? ( subscriber.newsletters || [] ).filter( i => i !== newsletter.id )
+ : [ ...( subscriber.newsletters || [] ), newsletter.id ];
+ setSubscriber( prev => ( { ...prev, newsletters: nextList } ) );
+ setSnackbar( {
+ message: isSubscribed
+ ? sprintf( __( 'Unsubscribed from %s.', 'newspack-plugin' ), newsletter.name )
+ : sprintf( __( 'Subscribed to %s.', 'newspack-plugin' ), newsletter.name ),
+ } );
+ } }
+ __nextHasNoMarginBottom
+ />
+
+ );
+ } ) }
+
+
+
+
+
+
+ { subscriber.paymentMethods.length === 0 ? (
+
+
+
+
+
+
+
+ ) : (
+ <>
+ { subscriber.paymentMethods.map( pm => (
+
+
+ { CARD_ICONS[ pm.type ] && (
+ 
+ ) }
+
+ { pm.isDefault &&
+
+
+ { ! pm.isDefault && (
+ <>
+
+
+
+ ) }
+
+
+
+ ) ) }
+
+
+
+
+ ) }
+
+
+
+ setModal( { kind: 'payment' } ) }
+ />
+ ) }
+
+ );
+}
diff --git a/src/wizards/subscribersDemo/screens/SubscriberList.jsx b/src/wizards/subscribersDemo/screens/SubscriberList.jsx
new file mode 100644
index 0000000000..b944ada202
--- /dev/null
+++ b/src/wizards/subscribersDemo/screens/SubscriberList.jsx
@@ -0,0 +1,170 @@
+/* eslint-disable @wordpress/i18n-translator-comments, no-bitwise */
+/**
+ * L0 — Subscriber list (DataViews, full-width).
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { useMemo, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { filterSortAndPaginate } from '@wordpress/dataviews';
+import { dateI18n, getSettings } from '@wordpress/date';
+import { __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+
+const fmtDate = date => ( date ? dateI18n( getSettings().formats.date, date ) : '' );
+
+/**
+ * Internal dependencies.
+ */
+import { Badge, DataViews, Router } from '../../../../packages/components/src';
+import './style.scss';
+import { SUBSCRIBERS, DIGITAL_PLANS, PRINT_PLANS, ALL_TAGS, NEWSLETTERS } from '../data/mock-subscribers';
+
+const { useHistory } = Router;
+
+const STATUS_LABELS = {
+ active: __( 'Active', 'newspack-plugin' ),
+ lapsed: __( 'Lapsed', 'newspack-plugin' ),
+ cancelled: __( 'Cancelled', 'newspack-plugin' ),
+};
+
+const STATUS_BADGE_LEVEL = {
+ active: 'success',
+ lapsed: 'warning',
+ cancelled: 'error',
+};
+
+const ALL_PLAN_NAMES = [ ...DIGITAL_PLANS, ...PRINT_PLANS ].map( p => p.name );
+
+const DEFAULT_VIEW = {
+ type: 'table',
+ page: 1,
+ perPage: 20,
+ sort: { field: 'lastPayment', direction: 'desc' },
+ search: '',
+ fields: [ 'status', 'plans', 'lastPayment', 'memberSince' ],
+ filters: [],
+ layout: {},
+ titleField: 'name',
+};
+
+export default function SubscriberList() {
+ const history = useHistory();
+ const [ view, setView ] = useState( DEFAULT_VIEW );
+
+ const openProfile = id => history.push( `/profile/${ id }` );
+
+ const fields = useMemo(
+ () => [
+ {
+ id: 'name',
+ label: __( 'Subscriber', 'newspack-plugin' ),
+ enableGlobalSearch: true,
+ getValue: ( { item } ) => `${ item.name } ${ item.email }`,
+ render: ( { item } ) => (
+ { note.text }
+ { __( 'No subscriptions on file.', 'newspack-plugin' ) }
+ +{ sub.plan }
+
+ { sub.access } · { sub.cadence } · ${ sub.amount.toFixed( 2 ) }
+ { isActive && sub.nextBillingDate && (
+ <>
+
+ { sprintf( __( 'Next billing %s', 'newspack-plugin' ), fmtDate( sub.nextBillingDate ) ) } + + ) } +
+ + { sprintf( __( 'Next billing %s', 'newspack-plugin' ), fmtDate( sub.nextBillingDate ) ) } + + ) } +
{ __( 'No payment method on file.', 'newspack-plugin' ) }
+ + { pm.type } ···· { pm.last4 } +
+{ sprintf( __( 'Expires %s', 'newspack-plugin' ), pm.expiry ) }
+
+
+
+
+
+
+ { modal?.kind === 'refund' && | { __( 'Date', 'newspack-plugin' ) } | +{ __( 'Type', 'newspack-plugin' ) } | +{ __( 'Amount', 'newspack-plugin' ) } | +
|---|---|---|
| { fmtDate( o.date ) } | +{ o.type } | +${ o.amount.toFixed( 2 ) } | +
+ setSnackbar( null ) }>{ snackbar.message }
+
+ ) }
+
+ { modal?.kind === 'note' &&
+
+ ),
+ },
+ {
+ id: 'status',
+ label: __( 'Status', 'newspack-plugin' ),
+ elements: Object.entries( STATUS_LABELS ).map( ( [ value, label ] ) => ( { value, label } ) ),
+ filterBy: { operators: [ 'isAny' ] },
+ getValue: ( { item } ) => item.status,
+ render: ( { item } ) => { item.name }
+ { item.email }
+
+ { item.subscriptions.map( s => (
+
+ ),
+ enableSorting: false,
+ },
+ {
+ id: 'lastPayment',
+ label: __( 'Last payment', 'newspack-plugin' ),
+ getValue: ( { item } ) => item.lastPayment,
+ render: ( { item } ) => { fmtDate( item.lastPayment ) },
+ },
+ {
+ id: 'memberSince',
+ label: __( 'Member since', 'newspack-plugin' ),
+ getValue: ( { item } ) => item.memberSince,
+ render: ( { item } ) => { fmtDate( item.memberSince ) },
+ },
+ {
+ id: 'tags',
+ label: __( 'Tags', 'newspack-plugin' ),
+ elements: ALL_TAGS.map( t => ( { value: t, label: t } ) ),
+ filterBy: { operators: [ 'isAny' ] },
+ getValue: ( { item } ) => item.tags || [],
+ render: ( { item } ) => (
+ { s.plan }
+ ) ) }
+
+ { ( item.newsletters || [] )
+ .map( id => NEWSLETTERS.find( n => n.id === id )?.name )
+ .filter( Boolean )
+ .join( ', ' ) }
+
+ ),
+ enableSorting: false,
+ },
+ ],
+ []
+ );
+
+ const actions = useMemo(
+ () => [
+ {
+ id: 'view-profile',
+ label: __( 'View profile', 'newspack-plugin' ),
+ isPrimary: true,
+ callback: items => openProfile( items[ 0 ].id ),
+ },
+ ],
+ []
+ );
+
+ const { data: processedData, paginationInfo } = useMemo( () => filterSortAndPaginate( SUBSCRIBERS, view, fields ), [ view, fields ] );
+
+ return (
+