-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Paid newsletter importer updates (#94703)
* reset importer on summary buttons click * show subscribers import button * update stripe step * fixesss * update copy * Only show done status * Remove is fetching * Update the progressBar * Improve the subscriber done state --------- Co-authored-by: Enej Bajgoric <[email protected]>
- Loading branch information
Showing
18 changed files
with
157 additions
and
131 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 11 additions & 33 deletions
44
client/my-sites/importer/newsletter/subscribers/start-import-button.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,58 +1,36 @@ | ||
| import { FormLabel } from '@automattic/components'; | ||
| import { useState } from '@wordpress/element'; | ||
| import { ChangeEvent } from 'react'; | ||
| import FormCheckbox from 'calypso/components/forms/form-checkbox'; | ||
| import { StepId } from 'calypso/data/paid-newsletter/use-paid-newsletter-query'; | ||
| import { useSubscriberImportMutation } from 'calypso/data/paid-newsletter/use-subscriber-import-mutation'; | ||
| import ImporterActionButton from '../../importer-action-buttons/action-button'; | ||
|
|
||
| type Props = { | ||
| step: string; | ||
| step: StepId; | ||
| engine: string; | ||
| siteId: number; | ||
| hasPaidSubscribers: boolean; | ||
| navigate?: () => void; | ||
| disabled?: boolean; | ||
| primary?: boolean; | ||
| label?: string; | ||
| }; | ||
|
|
||
| export default function StartImportButton( { | ||
| siteId, | ||
| hasPaidSubscribers, | ||
| step, | ||
| engine, | ||
| navigate = () => {}, | ||
| disabled, | ||
| primary = true, | ||
| label, | ||
| }: Props ) { | ||
| const [ isDisabled, setIsDisabled ] = useState( ! hasPaidSubscribers ); | ||
|
|
||
| const { enqueueSubscriberImport } = useSubscriberImportMutation(); | ||
|
|
||
| const importSubscribers = () => { | ||
| enqueueSubscriberImport( siteId, engine, step ); | ||
| navigate(); | ||
| }; | ||
|
|
||
| const onChange = ( { target: { checked } }: ChangeEvent< HTMLInputElement > ) => | ||
| setIsDisabled( checked ); | ||
|
|
||
| return ( | ||
| <> | ||
| { hasPaidSubscribers && ( | ||
| <> | ||
| <p> | ||
| <strong>To prevent any unexpected actions by your old provider</strong>, go to your | ||
| Stripe dashboard and click “Revoke access” for any service previously associated with | ||
| this subscription. | ||
| </p> | ||
|
|
||
| <p> | ||
| <FormLabel> | ||
| <FormCheckbox checked={ isDisabled } onChange={ onChange } /> | ||
| I’ve disconnected other providers from the Stripe account | ||
| </FormLabel> | ||
| </p> | ||
| </> | ||
| ) } | ||
| <ImporterActionButton primary disabled={ ! isDisabled } onClick={ importSubscribers }> | ||
| Import subscribers | ||
| </ImporterActionButton> | ||
| </> | ||
| <ImporterActionButton primary={ primary } disabled={ disabled } onClick={ importSubscribers }> | ||
| { label || 'Import subscribers' } | ||
| </ImporterActionButton> | ||
| ); | ||
| } |
16 changes: 14 additions & 2 deletions
16
client/my-sites/importer/newsletter/subscribers/step-done.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,17 @@ | ||
| import { Card } from '@automattic/components'; | ||
| import { Notice } from '@wordpress/components'; | ||
| import ImporterActionButton from '../../importer-action-buttons/action-button'; | ||
| import { SubscribersStepProps } from '../types'; | ||
|
|
||
| export default function StepDone() { | ||
| return <Card>DONE!</Card>; | ||
| export default function StepDone( { cardData, nextStepUrl }: SubscribersStepProps ) { | ||
| const subscribedCount = parseInt( cardData.meta?.subscribed_count || '0' ); | ||
| return ( | ||
| <Card> | ||
| <h2>Import your subscribers to WordPress.com</h2> | ||
| <Notice status="success" className="importer__notice" isDismissible={ false }> | ||
| Success! { subscribedCount } subscribers have been added! | ||
| </Notice> | ||
| <ImporterActionButton href={ nextStepUrl }>View Summary</ImporterActionButton> | ||
| </Card> | ||
| ); | ||
| } |
24 changes: 22 additions & 2 deletions
24
client/my-sites/importer/newsletter/subscribers/step-importing.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,25 @@ | ||
| import { Card } from '@automattic/components'; | ||
| import { ProgressBar } from '@wordpress/components'; | ||
| import { Icon, atSymbol } from '@wordpress/icons'; | ||
| import ImporterActionButton from '../../importer-action-buttons/action-button'; | ||
| import { SubscribersStepProps } from '../types'; | ||
|
|
||
| export default function StepAwaiting() { | ||
| return <Card>Awaiting!!</Card>; | ||
| export default function StepImporting( { nextStepUrl }: SubscribersStepProps ) { | ||
| return ( | ||
| <Card> | ||
| <div className="summary__content"> | ||
| <p> | ||
| <Icon icon={ atSymbol } /> <strong>We're importing your subscribers</strong> | ||
| </p> | ||
| </div> | ||
| <p> | ||
| This may take a few minutes. Feel free to leave this window – we'll let you know when it's | ||
| done. | ||
| </p> | ||
| <p> | ||
| <ProgressBar className="is-larger-progress-bar" /> | ||
| </p> | ||
| <ImporterActionButton href={ nextStepUrl }>View Summary</ImporterActionButton> | ||
| </Card> | ||
| ); | ||
| } |
Oops, something went wrong.