-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: update verbiage and look of advertiser agreement page (#1103)
* feat: update verbiage and look of advertiser agreement page * fix: add info on localization
- Loading branch information
1 parent
6ceda3d
commit 8da2e8e
Showing
14 changed files
with
375 additions
and
280 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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -60,6 +60,7 @@ module.exports = { | |
"transform", | ||
"format", | ||
"name", | ||
"padding", | ||
], | ||
}, | ||
], | ||
|
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 |
---|---|---|
|
@@ -5,7 +5,7 @@ | |
|
||
Brave Ads Manager is a key component of the ads infrastructure. From the ads manager, advertisers are able to define unique ad campaigns and creatives. Additionally, advertisers can review delivery and engagement metrics on their ad campaigns. | ||
|
||
### Tech Stack & Philosophy | ||
## Tech Stack & Philosophy | ||
|
||
`ads-manager` is built with [TypeScript](https://www.typescriptlang.org/) and [React.js](https://reactjs.org/). | ||
|
||
|
@@ -17,7 +17,7 @@ Our application bundle is created with [webpack](https://webpack.js.org/) and st | |
|
||
This bundle is then served to users as a static asset by [AWS CloudFront CDN](https://aws.amazon.com/cloudfront/). | ||
|
||
### Local Development | ||
## Local Development | ||
|
||
- Create a `.env.local` file, or update `.env` file provided | ||
- Set `BACKEND_URL=<>` to the endpoint you wish to pull data from. | ||
|
@@ -26,8 +26,40 @@ This bundle is then served to users as a static asset by [AWS CloudFront CDN](ht | |
We are using HTTPS in developer mode so that cookie based authentication works properly. | ||
You may need to proceed through a certificate warning in order to develop locally. | ||
|
||
#### Generating GraphQL Types: | ||
### Generating GraphQL Types: | ||
|
||
``` | ||
> npm run codegen | ||
``` | ||
|
||
## Localization | ||
After changing text, o adding new translated text you need to run: | ||
``` | ||
❯ npm run extract | ||
``` | ||
|
||
THe output should look something like: | ||
``` | ||
> [email protected] extract | ||
> lingui extract | ||
✔ | ||
Catalog statistics for src/locales/{locale}: | ||
┌──────────┬─────────────┬─────────┐ | ||
│ Language │ Total count │ Missing │ | ||
├──────────┼─────────────┼─────────┤ | ||
│ en │ 488 │ 0 │ | ||
│ es │ 491 │ 491 │ | ||
│ pt │ 491 │ 491 │ | ||
└──────────┴─────────────┴─────────┘ | ||
(use "npm run extract" to update catalogs with new messages) | ||
``` | ||
|
||
This extracts all new messages, and gives a brief glimpse of what you have translated so far. | ||
Once translations are complete, they should be added to the `msgstr` portion of their respective language. | ||
|
||
To add more locales, edit the `locales` array in `lingui.config.js` and run `npm run extract` again. | ||
Make sure you also update `i18n.ts` with the new locale. | ||
|
||
|
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,81 +1,78 @@ | ||
import Typography from "@mui/material/Typography"; | ||
import { Link, Stack } from "@mui/material"; | ||
import { Box, Link, Stack } from "@mui/material"; | ||
import { FormikCheckbox } from "form/FormikHelpers"; | ||
import { msg, Trans } from "@lingui/macro"; | ||
import { useLingui } from "@lingui/react"; | ||
import { LearnMoreButton } from "components/Button/LearnMoreButton"; | ||
|
||
export function AdvertiserAgreed(props: { requiresPaymentAgree: boolean }) { | ||
const { _ } = useLingui(); | ||
|
||
return ( | ||
<> | ||
<Stack mb={2} spacing={0.5}> | ||
<Typography sx={{ fontWeight: 600 }}> | ||
<Trans>Reporting</Trans> | ||
</Typography> | ||
<Typography> | ||
<Trans> | ||
Brave’s products are made to uphold user privacy. By default, the | ||
Brave browser blocks third-party tracking (scripts, tags, pixels, | ||
etc.) including those used by Google Analytics. This means that most | ||
standard website reporting won’t be compatible with Brave Ads. To | ||
ensure advertisers have visibility into performance of campaigns, | ||
we’ve detailed other effective privacy-first options for measurement | ||
in our{" "} | ||
<Link href="https://brave.com/brave-ads/reporting/" target="_blank"> | ||
reporting guide | ||
</Link> | ||
</Trans> | ||
. | ||
</Typography> | ||
<Box alignSelf="center" mt={5}> | ||
<Stack spacing={0.5} direction="row" alignItems="center"> | ||
<FormikCheckbox | ||
name="tracking" | ||
label={_( | ||
msg`I understand that Brave Ads will not be compatible with Google Analytics and similar solutions that rely on third-party trackers`, | ||
msg`I understand that first-party analytics are necessary for independent reporting.`, | ||
)} | ||
showErrorMessage={false} | ||
/> | ||
<LearnMoreButton | ||
variant="body2" | ||
helpSection="/campaign-performance/reporting/" | ||
/> | ||
</Stack> | ||
{props.requiresPaymentAgree && ( | ||
<Stack mb={2} spacing={0.5}> | ||
<Typography sx={{ fontWeight: 600 }}> | ||
<Trans>Payment</Trans> | ||
</Typography> | ||
<Typography> | ||
<Trans> | ||
To launch a campaign with Brave, you are required to prepay the | ||
full amount you intend to spend. Any remaining funds from your | ||
budget will be credited back to your original payment method upon | ||
request. | ||
</Trans> | ||
</Typography> | ||
<Stack spacing={0.5} direction="row" alignItems="center"> | ||
<FormikCheckbox | ||
name="payment" | ||
label={_( | ||
msg`I understand that pre-payment is required to launch my campaigns`, | ||
msg`I understand that payment is required before ad campaigns can be launched.`, | ||
)} | ||
showErrorMessage={false} | ||
/> | ||
<LearnMoreButton | ||
variant="body2" | ||
helpSection="/account-management/billing" | ||
/> | ||
</Stack> | ||
)} | ||
|
||
<Stack mb={2} spacing={0.5}> | ||
<Typography sx={{ fontWeight: 600 }}> | ||
<Trans>Terms & Conditions</Trans> | ||
</Typography> | ||
<Typography> | ||
<Trans> | ||
By continuing, you acknowledge and agree to our{" "} | ||
<Link href="https://brave.com/privacy/advertiser" target="_blank"> | ||
Privacy Policy | ||
</Link>{" "} | ||
and platform{" "} | ||
<Link href="https://brave.com/brave-ads/terms/" target="_blank"> | ||
Terms and Conditions | ||
</Link> | ||
</Trans> | ||
. | ||
</Typography> | ||
<FormikCheckbox name="terms" label={_(msg`I agree`)} /> | ||
<Stack spacing={0.5}> | ||
<FormikCheckbox | ||
name="language" | ||
label={_( | ||
msg`I understand that I can only run ad campaigns in English, Spanish, and Portuguese.`, | ||
)} | ||
showErrorMessage={false} | ||
/> | ||
</Stack> | ||
|
||
<Stack spacing={0.5}> | ||
<FormikCheckbox | ||
name="terms" | ||
showErrorMessage={false} | ||
label={ | ||
<Trans> | ||
I have reviewed and agree to the{" "} | ||
<Link | ||
href="https://brave.com/advertiser-privacy/" | ||
target="_blank" | ||
> | ||
Advertiser Privacy Policy | ||
</Link>{" "} | ||
and platform{" "} | ||
<Link | ||
href="https://basicattentiontoken.org/advertiser-terms-of-service/" | ||
target="_blank" | ||
> | ||
Terms of Service | ||
</Link>{" "} | ||
applicable to Brave Ads. | ||
</Trans> | ||
} | ||
/> | ||
</Stack> | ||
</> | ||
</Box> | ||
); | ||
} |
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.