BannerAd.jsx
1 year ago
CodeAd.jsx
1 year ago
Congrats.jsx
1 year ago
GoogleAdsense.jsx
1 year ago
Step1.jsx
1 year ago
GoogleAdsense.jsx
210 lines
| 1 | /** |
| 2 | * External Dependencies |
| 3 | */ |
| 4 | import { wizard } from '@advancedAds/i18n'; |
| 5 | |
| 6 | /** |
| 7 | * Internal Dependencies |
| 8 | */ |
| 9 | import RadioList from '@components/inputs/RadioList'; |
| 10 | import CheckboxList from '@components/inputs/CheckboxList'; |
| 11 | import ErrorMessage from '@components/ErrorMessage'; |
| 12 | import { |
| 13 | authUrl, |
| 14 | hasAuthCode, |
| 15 | submitCode, |
| 16 | getAccountDetails, |
| 17 | getErrorMessage, |
| 18 | } from '../../utilities'; |
| 19 | import StepFooter from '../StepFooter'; |
| 20 | import Preloader from '../../components/Preloader'; |
| 21 | import SelectAccount from '../../components/SelectAccount'; |
| 22 | |
| 23 | export default function GoogleAdsense({ options, setOptions }) { |
| 24 | if (!options.adsenseData.account) { |
| 25 | if (options.adsenseData.phase) { |
| 26 | switch (options.adsenseData.phase) { |
| 27 | case 'error': |
| 28 | // Something went south, abort. |
| 29 | return <ErrorMessage message={options.adsenseData.error} />; |
| 30 | case 'select': |
| 31 | // Ask the user to choose one account from the network account. |
| 32 | return ( |
| 33 | <SelectAccount |
| 34 | accounts={options.adsenseData.accountsList} |
| 35 | tokenData={options.adsenseData.tokenData} |
| 36 | done={(response) => { |
| 37 | setOptions('adsenseData', { |
| 38 | account: response.account, |
| 39 | }); |
| 40 | }} |
| 41 | fail={(response) => { |
| 42 | let message = getErrorMessage(response); |
| 43 | if (!message) { |
| 44 | message = wizard.googleAd.errors.notSaved; |
| 45 | } |
| 46 | setOptions('adsenseData', { |
| 47 | phase: 'error', |
| 48 | error: message, |
| 49 | }); |
| 50 | }} |
| 51 | /> |
| 52 | ); |
| 53 | default: |
| 54 | } |
| 55 | } |
| 56 | |
| 57 | if (hasAuthCode()) { |
| 58 | // Submit the authorization code from Google's oAuth2 page. |
| 59 | submitCode() |
| 60 | .done(function (response) { |
| 61 | // Got the refresh token, get account info. |
| 62 | getAccountDetails(response.token_data) |
| 63 | .done(function (accDetails) { |
| 64 | if (accDetails.account) { |
| 65 | // Standard account. |
| 66 | setOptions('adsenseData', { |
| 67 | account: accDetails.account, |
| 68 | }); |
| 69 | } |
| 70 | if (accDetails.details) { |
| 71 | // Network account, show the list of child accounts to choose from. |
| 72 | setOptions('adsenseData', { |
| 73 | phase: 'select', |
| 74 | accountsList: accDetails.details, |
| 75 | tokenData: accDetails.token_data, |
| 76 | }); |
| 77 | } |
| 78 | }) |
| 79 | .fail(function (detailsRes) { |
| 80 | // Error while getting account details. |
| 81 | let message = getErrorMessage(detailsRes); |
| 82 | if (!message) { |
| 83 | message = wizard.googleAd.errors.notFetched; |
| 84 | } |
| 85 | setOptions('adsenseData', { |
| 86 | phase: 'error', |
| 87 | error: message, |
| 88 | }); |
| 89 | }); |
| 90 | }) |
| 91 | .fail(function (response) { |
| 92 | // Error while requesting the refresh (permanent) token. |
| 93 | let message = getErrorMessage(response); |
| 94 | if (!message) { |
| 95 | message = wizard.googleAd.errors.notAuthorized; |
| 96 | } |
| 97 | setOptions('adsenseData', { |
| 98 | phase: 'error', |
| 99 | error: message, |
| 100 | }); |
| 101 | }); |
| 102 | |
| 103 | return <Preloader />; |
| 104 | } |
| 105 | |
| 106 | return ( |
| 107 | <> |
| 108 | <h1 className="!mt-0">{wizard.googleAd.stepHeading}</h1> |
| 109 | <div className="mt-8 flex gap-x-8 justify-start items-center font-medium"> |
| 110 | <a |
| 111 | className="button button-hero !text-base !px-3 !py-4" |
| 112 | href={advancedAds.wizard.newAccountLink} |
| 113 | target="_blank" |
| 114 | rel="noopener noreferrer" |
| 115 | > |
| 116 | {wizard.googleAd.btnSignup} |
| 117 | </a> |
| 118 | <a |
| 119 | className="button-onboarding !text-base !px-3 !py-4" |
| 120 | href={authUrl()} |
| 121 | > |
| 122 | {wizard.googleAd.btnConnect} |
| 123 | </a> |
| 124 | </div> |
| 125 | <StepFooter |
| 126 | isEnabled={false} |
| 127 | enableText={wizard.googleAd.footerProcessText} |
| 128 | disableText={wizard.googleAd.footerDisableText} |
| 129 | /> |
| 130 | </> |
| 131 | ); |
| 132 | } |
| 133 | |
| 134 | const enableText = (() => { |
| 135 | switch (options.googleAdsPlacement) { |
| 136 | case 'auto_ads': |
| 137 | return wizard.googleAd.footerEnableText.autoAds; |
| 138 | case 'manual': |
| 139 | return wizard.googleAd.footerEnableText.manual; |
| 140 | default: |
| 141 | return wizard.googleAd.footerDisableText; |
| 142 | } |
| 143 | })(); |
| 144 | |
| 145 | return ( |
| 146 | <> |
| 147 | <h1 className="!mt-0 !text-gray-300"> |
| 148 | {wizard.googleAd.stepHeading} |
| 149 | </h1> |
| 150 | <div className="space-y-4"> |
| 151 | <p> |
| 152 | {wizard.googleAd.labelConnected}{' '} |
| 153 | {options.adsenseData.account.id} |
| 154 | <br /> |
| 155 | {wizard.googleAd.labelAccount}{' '} |
| 156 | {options.adsenseData.account.name} |
| 157 | </p> |
| 158 | <div> |
| 159 | <h2 |
| 160 | className={ |
| 161 | 'auto_ads' === options.googleAdsPlacement |
| 162 | ? '!text-gray-300' |
| 163 | : null |
| 164 | } |
| 165 | > |
| 166 | {wizard.googleAd.labelAdsPlacement} |
| 167 | </h2> |
| 168 | <RadioList |
| 169 | id="google_ads_placement" |
| 170 | options={wizard.googleAd.adsPlacement} |
| 171 | value={options.googleAdsPlacement} |
| 172 | onChange={(value) => |
| 173 | setOptions('googleAdsPlacement', value) |
| 174 | } |
| 175 | /> |
| 176 | </div> |
| 177 | {options.googleAdsPlacement && |
| 178 | 'auto_ads' === options.googleAdsPlacement && ( |
| 179 | <div> |
| 180 | <h2>{wizard.googleAd.labelAutoAds}</h2> |
| 181 | <CheckboxList |
| 182 | id="auto_ads" |
| 183 | options={wizard.googleAd.autoAdsOptions} |
| 184 | value={options.autoAdsOptions} |
| 185 | onChange={(value) => { |
| 186 | const newOptions = [ |
| 187 | ...options.autoAdsOptions, |
| 188 | ]; |
| 189 | const index = newOptions.indexOf(value); |
| 190 | if (index > -1) { |
| 191 | newOptions.splice(index, 1); |
| 192 | } else { |
| 193 | newOptions.push(value); |
| 194 | } |
| 195 | |
| 196 | setOptions('autoAdsOptions', newOptions); |
| 197 | }} |
| 198 | /> |
| 199 | </div> |
| 200 | )} |
| 201 | </div> |
| 202 | <StepFooter |
| 203 | isEnabled={options.googleAdsPlacement} |
| 204 | enableText={enableText} |
| 205 | disableText={wizard.googleAd.footerDisableText} |
| 206 | /> |
| 207 | </> |
| 208 | ); |
| 209 | } |
| 210 |