Centralize marketing materials app text into a central object in React

[esteban-gs]

TBD

With all the call to actions we have now and the specialized verbiage on sign up forms, we should start adding a really simple place to put all our marketing text. This can include form input labels, button labels, form step labels, etc.

Criteria:

• Scope: Sign up forms, both user and org. We should have a central place to store all the text. This should be the simplest possible solution at this point,so maybe just an account javascript object.

[junsuparkswe]

@esteban-gs @marvinsjsu Where can I find the marketing text?

[marvinsjsu]

hi @junsupark94, I'm going to see if I can get more information on this but if I'm unable to find the details, would you be ok with grabbing one of the other tickets for now? Then maybe we can resume work on this when Esteban is back.

[marvinsjsu]

Adding here the link to Figma, in case this helps: https://www.figma.com/file/K7DT5jYcLKRc9epmNrO0N7/UX---Dev-Handoff?type=design&node-id=1-5&mode=design&t=PLp7QXOdQbif9N9T-0

User Sign-up:

Org Sign-up:

[marvinsjsu]

@junsupark94 I may not have the full context of this ticket, so please take this with a grain of salt, but I think the text is all the strings from headers, labels, and buttons that are being used on these two forms. I think the intent is to maybe have a constants file that has a JS object that we can store these strings in and essentially have one place to update the copy. Let me know, if this makes any sense (it may not). Thanks and I'm hoping this helps.

[junsuparkswe]

@marvinsjsu Thanks, I'll look into that, and if not, I'll pick up a different ticket.

[EtoKruto]

Create an global context for json text and an example for BannerSection as its the first page that comes up during testing but the rest of the text will be a large undertaking:

Template for changing text for particular page:

1. Add section and text following the current example in /providers/MarketingTextProvider.tsx
2. Add line import { useMarketingText } from './../providers/MarketingTextProvider';
3. Add line const { banner } = useMarketingText(); after the the function declaration. Use a deconstructor for a cleaner consumption.
4. Lastly, consume the text using the invocation of the section.subsection. Ex: {banner.mainHigh}