Skip to content

Commit a1d4eb7

Browse files
dkoomiguelpeixeleogermanisemantic-release-botlaurelfulford
authored
feat: RAS setup UI and default Campaigns wizard (Automattic#2426)
* feat: start new RAS settings page (Automattic#2381) * feat(memberships): content gate page (Automattic#2366) * feat: start new RAS settings page * feat: remove setup_complete state and update copy and list of prereqs * chore: update copy of setup links * chore: copy update * chore: more copy updates * fix: Avoid falal error on Reader Revenue wizard (Automattic#2382) * chore: add TODO comment so we don’t forget to update the help URL * fix: use correct method for checking ESP configuration --------- Co-authored-by: Miguel Peixe <[email protected]> Co-authored-by: leogermani <[email protected]> * feat: update RAS settings layout to i3 designs (Automattic#2386) * feat: start new RAS settings page * feat: remove setup_complete state and update copy and list of prereqs * chore: update copy of setup links * chore: copy update * chore: more copy updates * chore: add TODO comment so we don’t forget to update the help URL * fix: use correct method for checking ESP configuration * feat: add expandable feature to ActionCard component * chore: add expandable ActionCard example to comopnents demo page * feat: update RAS settings page layout to i3 designs * feat: limit saved config to each fields with save button * feat: collapse cards when completing settings * fix: if settings link to another page, show "Configure" button label instead of "Save" * chore: remove TOOO statements for completed tasks * chore: update inline doc * chore: remove unnecessary inFlight param * fix: error in React in webpack production builds using functional components * fix: allow expandable cards to expand * chore: remove console.log * fix(amp): improved iframe polyfill and include vimeo Co-authored-by: Leo Germani <[email protected]> * chore(release): 1.111.1 [skip ci] ## [1.111.1](Automattic/newspack-plugin@v1.111.0...v1.111.1) (2023-04-03) ### Bug Fixes * **amp:** improved iframe polyfill and include vimeo ([592eba7](Automattic@592eba7)) * feat(reader-registration): add recaptcha panel in the editor (Automattic#2397) * feat: RAS default prompts wizard UI (Automattic#2399) * feat: start new RAS settings page * feat: remove setup_complete state and update copy and list of prereqs * chore: update copy of setup links * chore: copy update * chore: more copy updates * chore: add TODO comment so we don’t forget to update the help URL * fix: use correct method for checking ESP configuration * feat: add expandable feature to ActionCard component * chore: add expandable ActionCard example to comopnents demo page * feat: update RAS settings page layout to i3 designs * feat: limit saved config to each fields with save button * feat: collapse cards when completing settings * fix: if settings link to another page, show "Configure" button label instead of "Save" * chore: remove TOOO statements for completed tasks * chore: update inline doc * chore: remove unnecessary inFlight param * refactor: split Prerequisites checklist item into its own component * fix: missing props * feat: scaffold layout components and user input fields data for prompt wizard * fix: error in React in webpack production builds using functional components * fix: allow expandable cards to expand * chore: remove console.log * feat: fetch prompt config from server or Popups presets * chore: show loading state while prompts are being fetched * feat: save user inputs and populate prompt content * fix: add new components folder to engagement wizard * feat: complete prompt save functionality * feat: enable Continue button when all prompts are ready * refactor: forgot about the "every" method * feat: make RAS Campaign prerequisite card dynamic * chore: improve docblock for update_prompt() method * refactor: refactor Prerequisite component as TS * chore: remove console.logs * chore: add comment pointing to existing schema for prompt object * feat: update path of RAS prompt wizard to be a subroute of RAS route * feat: pre-populate input fields with default values * refactor: prompt.js as prompt.tsx * fix: add missing TS files * chore: remove more console.logs * fix: fixes for TS * refactor: move RAS prompt API endpoints to Newspack Campaigns * fix: error with Button prop * feat: scroll to top on view change * chore: remove unneeded middleware methods * chore: remove unneeded middleware methods * fix: typescript error Co-authored-by: Miguel Peixe <[email protected]> * fix: type errors --------- Co-authored-by: Miguel Peixe <[email protected]> * feat: add help info for preset prompts (Automattic#2415) * feat: add help info for preset prompts * style: tweak colors of recommendation list items * feat: 'completed' splash page (Automattic#2416) * feat: start building out completed splash screen * feat: adding second component for individual list items * feat: adding background border * feat: fix bolding and correct number border spacing * feat: switch from flexbox to grid * feat: renaming the steps list compontent * fix: wrong PromptType definition * fix: add tabbed navigation to RAS "complete" screen * fix: don’t collapse prompt card if saving to preview * fix: move link to Complete screen to prompt wizard "Continue" button * fix: section heading styles and add external link to help docs * style: update styles to i3 designs * feat: activation progress bar animation * feat: activate RAS defaults with user input on command * fix: only consider ESP setup if there are enabled lists * fix: allow RAS prereq options to be editable before RAS is enabled * fix: condition for preview request rendering * fix: reader revenue platform requirements * feat: make expandable card titles clickable --------- Co-authored-by: Derrick Koo <[email protected]> * feat: add handoff message for prerequisites (Automattic#2422) * feat: update UI of Newsletters wizard * feat: show handoff instructions and link back to RAS wizard in external wizard [ages * chore: clarify lock message for subscription lists * fix: also show handoff messages in Wizard component * fix: typo * chore: update message copy * fix: only show hand-off message if the prerequisite object has instructions property * chore: update copy throughout RAS UI * fix: re-add missing props from Complete view --------- Co-authored-by: Miguel Peixe <[email protected]> Co-authored-by: leogermani <[email protected]> Co-authored-by: matticbot <[email protected]> Co-authored-by: Laurel <[email protected]>
1 parent 75f8f36 commit a1d4eb7

File tree

34 files changed

+2184
-389
lines changed

34 files changed

+2184
-389
lines changed

‎assets/blocks/reader-registration/index.php‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ function register_block() {
2828
);
2929

3030
// No need to register block styles if Reader Activation is disabled.
31-
if ( ! Reader_Activation::is_enabled() ) {
31+
if ( ! Reader_Activation::is_enabled( false ) ) {
3232
return;
3333
}
3434

@@ -54,8 +54,8 @@ function register_block() {
5454
* Enqueue front-end scripts.
5555
*/
5656
function enqueue_scripts() {
57-
// No need to enqueue scripts if Reader Activation is disabled.
58-
if ( ! Reader_Activation::is_enabled() ) {
57+
// No need to enqueue scripts if Reader Activation is disabled and not a preview request.
58+
if ( ! Reader_Activation::allow_reg_block_render() ) {
5959
return;
6060
}
6161

@@ -99,8 +99,8 @@ function get_form_id() {
9999
* @param string $content Block content (inner blocks) – success state in this case.
100100
*/
101101
function render_block( $attrs, $content ) {
102-
// Render nothing if Reader Activation is disabled.
103-
if ( ! Reader_Activation::is_enabled() ) {
102+
// Render nothing if Reader Activation is disabled and not a preview request.
103+
if ( ! Reader_Activation::allow_reg_block_render() ) {
104104
return '';
105105
}
106106

@@ -152,7 +152,7 @@ function render_block( $attrs, $content ) {
152152
if (
153153
! \is_preview() &&
154154
! $is_admin_preview &&
155-
( ! method_exists( 'Newspack_Popups', 'is_preview_request' ) || ! \Newspack_Popups::is_preview_request() ) &&
155+
( ! method_exists( '\Newspack_Popups', 'is_preview_request' ) || ! \Newspack_Popups::is_preview_request() ) &&
156156
(
157157
\is_user_logged_in() ||
158158
( isset( $_GET['newspack_reader'] ) && absint( $_GET['newspack_reader'] ) )

‎assets/components/src/action-card/index.js‎

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88
import { Component } from '@wordpress/element';
99
import { ExternalLink, ToggleControl } from '@wordpress/components';
10-
import { Icon, check } from '@wordpress/icons';
10+
import { Icon, check, chevronDown, chevronUp } from '@wordpress/icons';
1111

1212
/**
1313
* Internal dependencies
@@ -21,12 +21,21 @@ import './style.scss';
2121
import classnames from 'classnames';
2222

2323
class ActionCard extends Component {
24-
backgroundImageStyles = url => {
25-
return url ? { backgroundImage: `url(${ url })` } : {};
24+
state = {
25+
expanded: false,
2626
};
2727

2828
/**
29-
* Render
29+
* When the collapse prop is updated to true, collapse the card if already expanded.
30+
*/
31+
componentDidUpdate( prevProps ) {
32+
if ( ! prevProps.collapse && this.props.collapse && this.state.expanded ) {
33+
this.setState( { expanded: false } );
34+
}
35+
}
36+
37+
/**
38+
* Render.
3039
*/
3140
render() {
3241
const {
@@ -60,19 +69,31 @@ class ActionCard extends Component {
6069
toggleChecked,
6170
toggleOnChange,
6271
hasGreyHeader,
72+
hasWhiteHeader,
6373
isPending,
74+
expandable = false,
6475
} = this.props;
76+
77+
const { expanded } = this.state;
78+
6579
const hasChildren = notification || children;
6680
const classes = classnames(
6781
'newspack-action-card',
6882
simple && 'newspack-card--is-clickable',
6983
hasGreyHeader && 'newspack-card--has-grey-header',
84+
hasWhiteHeader && 'newspack-card--has-white-header',
7085
hasChildren && 'newspack-card--has-children',
7186
indent && 'newspack-card--indent',
7287
isSmall && 'is-small',
7388
isMedium && 'is-medium',
89+
checkbox && 'has-checkbox',
90+
expandable && 'is-expandable',
91+
actionContent && 'has-action-content',
7492
className
7593
);
94+
const backgroundImageStyles = url => {
95+
return url ? { backgroundImage: `url(${ url })` } : {};
96+
};
7697
const titleProps =
7798
toggleOnChange && ! titleLink && ! disabled
7899
? { onClick: () => toggleOnChange( ! toggleChecked ), tabIndex: '0' }
@@ -95,7 +116,7 @@ class ActionCard extends Component {
95116
<a href={ imageLink }>
96117
<div
97118
className="newspack-action-card__image"
98-
style={ this.backgroundImageStyles( image ) }
119+
style={ backgroundImageStyles( image ) }
99120
/>
100121
</a>
101122
</div>
@@ -118,7 +139,13 @@ class ActionCard extends Component {
118139
<Grid columns={ 1 } gutter={ 8 } noMargin>
119140
<h2>
120141
<span className="newspack-action-card__title" { ...titleProps }>
121-
{ titleLink ? <a href={ titleLink }>{ title }</a> : title }
142+
{ titleLink && <a href={ titleLink }>{ title }</a> }
143+
{ ! titleLink && expandable && (
144+
<Button isLink onClick={ () => this.setState( { expanded: ! expanded } ) }>
145+
{ title }
146+
</Button>
147+
) }
148+
{ ! titleLink && ! expandable && title }
122149
</span>
123150
{ badges?.length &&
124151
badges.map( ( badgeText, i ) => (
@@ -135,7 +162,7 @@ class ActionCard extends Component {
135162
) }
136163
</Grid>
137164
</div>
138-
{ ( actionText || isDisplayingSecondaryAction || actionContent ) && (
165+
{ ! expandable && ( actionText || isDisplayingSecondaryAction || actionContent ) && (
139166
<div className="newspack-action-card__region newspack-action-card__region-right">
140167
{ /* eslint-disable no-nested-ternary */ }
141168
{ actionContent && actionContent }
@@ -176,6 +203,11 @@ class ActionCard extends Component {
176203
) }
177204
</div>
178205
) }
206+
{ expandable && (
207+
<Button onClick={ () => this.setState( { expanded: ! expanded } ) }>
208+
<Icon icon={ expanded ? chevronUp : chevronDown } height={ 24 } width={ 24 } />
209+
</Button>
210+
) }
179211
</div>
180212
{ notification && (
181213
<div className="newspack-action-card__notification newspack-action-card__region-children">
@@ -193,7 +225,9 @@ class ActionCard extends Component {
193225
) }
194226
</div>
195227
) }
196-
{ children && <div className="newspack-action-card__region-children">{ children }</div> }
228+
{ children && ( ( expandable && expanded ) || ! expandable ) && (
229+
<div className="newspack-action-card__region-children">{ children }</div>
230+
) }
197231
</Card>
198232
);
199233
}

‎assets/components/src/action-card/style.scss‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,24 @@
146146
}
147147
}
148148

149+
// Nested children
150+
151+
&.newspack-card--has-children {
152+
.newspack-action-card {
153+
&:first-child {
154+
margin-top: 32px;
155+
}
156+
157+
+ .newspack-action-card {
158+
margin-top: 16px !important;
159+
}
160+
161+
&:last-child {
162+
margin-bottom: 0;
163+
}
164+
}
165+
}
166+
149167
// Has grey header
150168

151169
&.newspack-card--has-grey-header {
@@ -155,6 +173,11 @@
155173
.newspack-action-card__region-top {
156174
border-bottom: 1px solid wp-colors.$gray-300;
157175
}
176+
177+
.is-small > .newspack-action-card__region-top {
178+
padding-bottom: 8px;
179+
padding-top: 8px;
180+
}
158181
}
159182

160183
.newspack-action-card__region-top {
@@ -168,6 +191,13 @@
168191
}
169192
}
170193

194+
&.newspack-card--has-white-header {
195+
.newspack-action-card__region-top {
196+
background-color: transparent;
197+
border: none !important;
198+
}
199+
}
200+
171201
// Indent
172202

173203
&.newspack-card--indent {
@@ -348,6 +378,12 @@
348378
margin-top: 0;
349379
}
350380
}
381+
382+
&.newspack-action-card__region-children {
383+
.newspack-notice {
384+
margin-top: 32px;
385+
}
386+
}
351387
}
352388

353389
// Image
@@ -393,6 +429,49 @@
393429
font-style: italic;
394430
}
395431

432+
// Expandable card children
433+
434+
&.is-expandable {
435+
.newspack-action-card__title .components-button.is-link {
436+
color: inherit;
437+
font-size: inherit;
438+
font-weight: inherit;
439+
text-decoration: inherit;
440+
}
441+
442+
.newspack-action-card__region-children {
443+
border-top: 1px solid wp-colors.$gray-100;
444+
padding-top: 24px;
445+
}
446+
447+
&.is-medium .newspack-action-card__region-children {
448+
padding-top: 32px;
449+
}
450+
451+
&.has-checkbox {
452+
.newspack-action-card__region-children {
453+
padding-left: 72px;
454+
}
455+
456+
&.is-small .newspack-action-card__region-children {
457+
padding-left: 64px;
458+
}
459+
460+
&.is-medium .newspack-action-card__region-children {
461+
padding-left: 56px;
462+
}
463+
}
464+
}
465+
466+
// Action content with multiple buttons
467+
&.has-action-content .newspack-action-card__region-right {
468+
flex-direction: row;
469+
470+
.components-button + .components-button {
471+
margin-left: 8px;
472+
}
473+
}
474+
396475
// Multiple Cards
397476

398477
& + & {

‎assets/components/src/consts.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export const NEWSPACK_SITE_URL = 'https://newspack.com';
22
export const NEWSPACK_SUPPORT_URL = `${ NEWSPACK_SITE_URL }/support`;
3+
export const HANDOFF_KEY = 'newspack_wizard_handoff_message';

‎assets/components/src/image-upload/index.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ class ImageUpload extends Component {
7575
const {
7676
buttonLabel,
7777
className,
78+
disabled,
7879
help,
7980
image,
8081
info,
@@ -104,17 +105,22 @@ class ImageUpload extends Component {
104105
alt={ __( 'Image preview', 'newspack' ) }
105106
/>
106107
<div className="newspack-image-upload__controls">
107-
<Button onClick={ this.openModal } isLink>
108+
<Button disabled={ disabled } onClick={ this.openModal } isLink>
108109
{ __( 'Replace', 'newspack' ) }
109110
</Button>
110111
<span className="sep" />
111-
<Button onClick={ () => onChange( null ) } isLink isDestructive>
112+
<Button
113+
disabled={ disabled }
114+
onClick={ () => onChange( null ) }
115+
isLink
116+
isDestructive
117+
>
112118
{ __( 'Remove', 'newspack' ) }
113119
</Button>
114120
</div>
115121
</>
116122
) : (
117-
<Button onClick={ this.openModal } isLink>
123+
<Button disabled={ disabled } onClick={ this.openModal } isLink>
118124
{ buttonLabel ? buttonLabel : __( 'Upload', 'newspack' ) }
119125
</Button>
120126
) }

‎assets/components/src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ export { default as SectionHeader } from './section-header';
3030
export { default as SelectControl } from './select-control';
3131
export { default as DateRangePicker } from './date-range-picker';
3232
export { default as Settings } from './settings';
33+
export { default as StepsList } from './steps-list';
34+
export { default as StepsListItem } from './steps-list-item';
3335
export { default as StyleCard } from './style-card';
3436
export { default as TabbedNavigation } from './tabbed-navigation';
3537
export { default as TextControl } from './text-control';

‎assets/components/src/notice/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ class Notice extends Component {
2828
className,
2929
debugMode,
3030
isError,
31+
isHandoff,
3132
isHelp,
3233
isSuccess,
3334
isWarning,
@@ -41,6 +42,7 @@ class Notice extends Component {
4142
className,
4243
debugMode && 'newspack-notice__is-debug',
4344
isError && 'newspack-notice__is-error',
45+
isHandoff && 'newspack-notice__is-handoff',
4446
isHelp && 'newspack-notice__is-help',
4547
isSuccess && 'newspack-notice__is-success',
4648
isWarning && 'newspack-notice__is-warning'

‎assets/components/src/notice/style.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,11 @@
4848
}
4949
}
5050

51+
&__is-handoff {
52+
background: color.adjust( wp-colors.$alert-yellow, $lightness: 30% );
53+
margin-top: 0;
54+
}
55+
5156
&__is-help {
5257
background: colors.$primary-050;
5358

‎assets/components/src/steps-list-item/index.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/**
2+
* Steps List Item
3+
*/
4+
5+
/**
6+
* WordPress dependencies.
7+
*/
8+
import { Component } from '@wordpress/element';
9+
10+
/**
11+
* Internal dependencies.
12+
*/
13+
import './style.scss';
14+
15+
/**
16+
* External dependencies.
17+
*/
18+
import classnames from 'classnames';
19+
20+
class StepsListItem extends Component {
21+
/**
22+
* Render
23+
*/
24+
render() {
25+
const { className, listItemCount, listItemText, style = {} } = this.props;
26+
const classes = classnames( 'steps-list-item', className );
27+
28+
return (
29+
<div className={ classes } style={ style }>
30+
<div className="steps-list-item__number">{ listItemCount }</div>
31+
<div
32+
className="steps-list-item__content"
33+
dangerouslySetInnerHTML={ { __html: listItemText } }
34+
/>
35+
</div>
36+
);
37+
}
38+
}
39+
40+
export default StepsListItem;

0 commit comments

Comments
 (0)