-
Notifications
You must be signed in to change notification settings - Fork 49
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
48e1613
commit 80c0bf4
Showing
11 changed files
with
401 additions
and
146 deletions.
There are no files selected for viewing
126 changes: 126 additions & 0 deletions
126
assets/wizards/advertising/components/onboarding/index.js
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 |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| /** | ||
| * WordPress dependencies. | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import apiFetch from '@wordpress/api-fetch'; | ||
| import { useEffect, useState, useRef, Fragment } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies. | ||
| */ | ||
| import { Card, ButtonCard, Notice, TextControl } from '../../../../components/src'; | ||
| import GoogleOAuth from '../../../connections/views/main/google'; | ||
| import { handleJSONFile } from '../utils'; | ||
|
|
||
| export default function AdsOnboarding( { onUpdate, onSuccess } ) { | ||
| const credentialsInputFile = useRef( null ); | ||
| const [ fileError, setFileError ] = useState( '' ); | ||
| const [ inFlight, setInFlight ] = useState( false ); | ||
| const [ networkCode, setNetworkCode ] = useState( '' ); | ||
| const [ isConnected, setIsConnected ] = useState( false ); | ||
| const [ useOAuth, setUseOAuth ] = useState( null ); | ||
|
|
||
| const updateGAMCredentials = credentials => { | ||
| setInFlight( true ); | ||
| apiFetch( { | ||
| path: '/newspack/v1/wizard/advertising/credentials', | ||
| method: 'post', | ||
| data: { credentials, onboarding: true }, | ||
| } ) | ||
| .then( () => { | ||
| setIsConnected( true ); | ||
| if ( typeof onSuccess === 'function' ) onSuccess(); | ||
| } ) | ||
| .finally( () => { | ||
| setInFlight( false ); | ||
| } ); | ||
| }; | ||
|
|
||
| const handleCredentialsFile = event => { | ||
| if ( event.target.files.length && event.target.files[ 0 ] ) { | ||
| handleJSONFile( event.target.files[ 0 ] ) | ||
| .then( credentials => updateGAMCredentials( credentials ) ) | ||
| .catch( err => setFileError( err ) ); | ||
| } | ||
| }; | ||
|
|
||
| useEffect( () => { | ||
| if ( typeof onUpdate === 'function' ) { | ||
| onUpdate( { networkCode } ); | ||
| } | ||
| }, [ networkCode ] ); | ||
|
|
||
| return ( | ||
| <Card noBorder> | ||
| <div className="ads-onboarding"> | ||
| { ( true === useOAuth || null === useOAuth ) && ( | ||
| <Fragment> | ||
| { useOAuth && ( | ||
| <p> | ||
| { __( | ||
| 'Authenticate with Google in order to connect your Google Ad Manager account:', | ||
| 'newspack' | ||
| ) } | ||
| </p> | ||
| ) } | ||
| <GoogleOAuth onInit={ err => setUseOAuth( ! err ) } onSuccess={ onSuccess } /> | ||
| </Fragment> | ||
| ) } | ||
| { false === useOAuth && ( | ||
| <Fragment> | ||
| { isConnected ? ( | ||
| <Notice isSuccess noticeText={ __( "We're all set here!", 'newspack' ) } /> | ||
| ) : ( | ||
| <Fragment> | ||
| <p> | ||
| { __( | ||
| 'Enter your Google Ad Manager network code and service account credentials for a full integration:', | ||
| 'newspack' | ||
| ) } | ||
| </p> | ||
| <TextControl | ||
| disabled={ inFlight } | ||
| isWide | ||
| name="network_code" | ||
| label={ __( 'Network code', 'newspack' ) } | ||
| value={ networkCode } | ||
| onChange={ setNetworkCode } | ||
| /> | ||
| <ButtonCard | ||
| disabled={ inFlight } | ||
| onClick={ () => credentialsInputFile.current.click() } | ||
| title={ __( 'Upload credentials', 'newspack' ) } | ||
| desc={ [ | ||
| __( | ||
| 'Upload your Service Account credentials file to connect your GAM account.', | ||
| 'newspack' | ||
| ), | ||
| fileError && <Notice noticeText={ fileError } isError />, | ||
| ] } | ||
| chevron | ||
| /> | ||
| <p> | ||
| <a | ||
| href="https://support.google.com/admanager/answer/6078734" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| { __( 'How to get a service account user for API access', 'newspack' ) } | ||
| </a> | ||
| . | ||
| </p> | ||
| <input | ||
| type="file" | ||
| accept=".json" | ||
| ref={ credentialsInputFile } | ||
| style={ { display: 'none' } } | ||
| onChange={ handleCredentialsFile } | ||
| /> | ||
| </Fragment> | ||
| ) } | ||
| </Fragment> | ||
| ) } | ||
| </div> | ||
| </Card> | ||
| ); | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| /** | ||
| * WordPress dependencies. | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Handle JSON from a file input. | ||
| * | ||
| * @param {File} file The file to extract JSON content. | ||
| * @return {Promise} which resolves into a JSON object or reject with message. | ||
| */ | ||
| export function handleJSONFile( file ) { | ||
| return new Promise( ( resolve, reject ) => { | ||
| const reader = new FileReader(); | ||
| reader.readAsText( file, 'UTF-8' ); | ||
| reader.onload = function ( ev ) { | ||
| let json; | ||
| try { | ||
| json = JSON.parse( ev.target.result ); | ||
| } catch ( error ) { | ||
| reject( __( 'Invalid JSON file', 'newspack' ) ); | ||
| } | ||
| resolve( json ); | ||
| }; | ||
| reader.onerror = function () { | ||
| reject( __( 'Unable to read file', 'newspack' ) ); | ||
| }; | ||
| } ); | ||
| } |
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
Oops, something went wrong.