Add SEO Footer to Help Dot #15115

grgia · 2023-02-14T01:36:37Z

Details

Adds the SEO footer to Help Dot.

Fixed Issues

https://github.com/Expensify/Expensify/issues/257971

Tests

Run the help site following this SO.

Essentially, from App folder, run:

  cd docs
  bundle install
  bundle exec jekyll serve

Verify that no errors appear in the JS console
Build Help Dot and ensure that footer looks correct at full, medium, small screen:

Ensure all links turn green on hover (except social icons, which remain white)
Ensure all links work

Offline tests

QA Steps

Same as Tests

PR Author Checklist

I linked the correct issue in the ### Fixed Issues section above
I wrote clear testing steps that cover the changes made in this PR
- I added steps for local testing in the Tests section
- I added steps for the expected offline behavior in the Offline steps section
- I added steps for Staging and/or Production testing in the QA steps section
- I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
- I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
I included screenshots or videos for tests on all platforms
I ran the tests on all platforms & verified they passed on:
- Android / native
- Android / Chrome
- iOS / native
- iOS / Safari
- MacOS / Chrome / Safari
- MacOS / Desktop
I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
I followed proper code patterns (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
  - If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is correct English and approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I followed the guidelines as stated in the Review Guidelines
I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
I verified that if a function's arguments changed that all usages have also been updated correctly
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

Screen.Recording.2023-02-15.at.12.58.04.PM.mov

Mobile Web - Chrome

Screen.Recording.2023-02-15.at.1.02.54.PM.mov

Mobile Web - Safari

Screen.Recording.2023-02-15.at.1.02.24.PM.mov

Desktop

N/A

iOS

N/A

Android

N/A

grgia · 2023-02-14T01:45:07Z

Everything is done based on Shawn's HTML, just need to add images/social icons.

Note that I added it to every page.

Screen.Recording.2023-02-13.at.5.43.11.PM.mov

grgia · 2023-02-14T04:55:37Z

Here's where I left off:

Screen.Recording.2023-02-13.at.8.48.11.PM.mov

shawnborton · 2023-02-14T12:15:24Z

Nice, this is feeling pretty good! For the links in the right column for the fine print, can we make those use the same color blue as our normal links?

shawnborton · 2023-02-14T12:16:03Z

Can you also share the mobile view of the footer with the content above it as well? Ideally we can make the mobile column width match the width of the content. So if the mobile content stretches full screen, we can get rid of the max-width: 500 constraint from the columns

grgia · 2023-02-14T17:18:47Z

Here's the mobile scroll with content:

Screen.Recording.2023-02-14.at.9.17.02.AM.mov

shawnborton · 2023-02-14T17:22:08Z

Okay cool, yeah I think we want the left edge of the footer content to match the left edge of the content above.

grgia · 2023-02-14T17:29:34Z

How does this look? (small, medium, large)

shawnborton · 2023-02-14T17:34:49Z

Looks great! For this one, I wonder if we don't need the fine print about logging in or the money transmission stuff? Given that on this page, you can't login. That's what we do on places like UseDot at least. Thoughts?

grgia · 2023-02-14T17:41:31Z

That's a good point, I agree. I'll just put the copyright then!

grgia · 2023-02-14T18:00:04Z

Here's an updated:

Screen.Recording.2023-02-14.at.9.44.12.AM.mov

My only note is that I don't know if there's a non-hacky way to color the SVGs in HTML without having them inline. So currently they are white

shawnborton · 2023-02-14T18:07:49Z

Good point. I found this tool that lets you use filters as a hacky method in case you wanna try that lol

:hover { filter: invert(67%) sepia(42%) saturate(3337%) hue-rotate(107deg) brightness(96%) contrast(98%); } could turn white to our green? https://codepen.io/sosuke/pen/Pjoqqp

grgia · 2023-02-14T18:17:31Z

Hmm the resulting color looks pretty different, what do you think?

shawnborton · 2023-02-14T18:18:30Z

hmm yeah, I definitely agree. I suppose we could play with that tool a bit more, or try a different method like inline or just no hover like you had it before (which I am cool with).

grgia · 2023-02-14T19:05:56Z

I tried out a few options but none of them stuck. I'm thinking leave as is (white) for now?

shawnborton · 2023-02-14T19:06:39Z

Yup, that works for me

MelvinBot · 2023-02-15T21:13:05Z

@arosiclair Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

arosiclair · 2023-02-16T17:57:38Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android / native
- Android / Chrome
- iOS / native
- iOS / Safari
- MacOS / Chrome / Safari
- MacOS / Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is correct English and approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

OSBotify · 2023-02-17T20:53:28Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

github-actions · 2023-02-17T21:21:54Z

Performance Comparison Report 📊

Significant Changes To Duration

There are no entries

Meaningless Changes To Duration

Show entries

Name	Duration
App start TTI	688.245 ms → 723.496 ms (+35.250 ms, +5.1%)
App start runJsBundle	188.813 ms → 200.844 ms (+12.031 ms, +6.4%)
Open Search Page TTI	611.324 ms → 619.423 ms (+8.099 ms, +1.3%)
App start regularAppStart	0.021 ms → 0.015 ms (-0.006 ms, -29.2%) 🟢
App start nativeLaunch	19.967 ms → 19.400 ms (-0.567 ms, -2.8%)

Show details

Name	Duration
App start TTI	Baseline Mean: 688.245 ms Stdev: 33.385 ms (4.9%) Runs: 621.9066770002246 642.3202120000497 645.6138439998031 648.4942769999616 651.6613400001079 657.9268470001407 659.3276680000126 659.9129490000196 664.4455659999512 668.2184469997883 670.3447219999507 672.545793000143 681.0358939999714 685.1117119998671 687.8589960001409 689.7688640002161 689.914429999888 691.0298799998127 691.352661000099 694.8924139998853 695.773380999919 709.9335909998044 710.0228530000895 712.9648239999078 713.2826040000655 716.780702999793 717.5366509999149 723.2704949998297 732.5342529998161 754.1907730000094 775.6302149998955 Current Mean: 723.496 ms Stdev: 24.740 ms (3.4%) Runs: 671.6790749998763 679.1870989999734 683.3238730002195 696.7532449997962 698.8505159998313 699.1371659999713 707.2581509999 712.3897739998065 713.4764290000312 714.3444309998304 714.8893439997919 715.8935400000773 716.3120200000703 719.9743619998917 720.8160500000231 722.1166920000687 722.397781000007 727.1503329998814 730.9172689998522 731.8118909997866 731.842310000211 731.9792220001109 733.4996650000103 740.7047810000367 754.8100629998371 758.4033459997736 760.1438969997689 761.3689199998043 763.7468050001189 769.6935000000522
App start runJsBundle	Baseline Mean: 188.813 ms Stdev: 22.814 ms (12.1%) Runs: 158 163 163 164 168 169 169 172 173 173 174 174 175 179 181 181 184 184 186 187 187 190 196 206 208 213 217 218 223 226 239 242 Current Mean: 200.844 ms Stdev: 23.242 ms (11.6%) Runs: 162 168 174 176 177 178 180 181 184 184 185 186 189 192 196 196 198 199 203 208 208 215 217 217 218 221 222 223 230 236 239 265
Open Search Page TTI	Baseline Mean: 611.324 ms Stdev: 17.310 ms (2.8%) Runs: 580.9700520001352 583.6325280000456 589.6623949999921 589.8783360002562 592.5389809999615 597.9793300000019 600.2037349999882 601.5028079999611 602.1611330001615 602.352782999631 603.0034179999493 604.0880539999343 604.1961670001037 604.9210609998554 605.5345459999517 605.6132000000216 610.6243090000935 610.809489000123 612.602864000015 613.0100920000114 615.6836350001395 615.9466969999485 617.4434419996105 618.3282469999976 619.5840659998357 619.8164880000986 623.3049319996499 633.9536950001493 638.6885179998353 643.3409830001183 648.9197999997996 652.0696620000526 Current Mean: 619.423 ms Stdev: 19.792 ms (3.2%) Runs: 577.5831710002385 583.3464770000428 598.70365400007 598.7882080003619 599.6450199997053 600.9704179996625 602.717326999642 603.6277669998817 603.8961190003902 604.2173270001076 605.4195969998837 608.3798019997776 610.4568690001033 610.6376139996573 612.4844979997724 614.4700939999893 617.2853999999352 622.8614910002798 623.4117439999245 623.8767899996601 626.6101480000652 627.7024739999324 631.3754879999906 632.2554940003902 633.6635739998892 635.6368009997532 639.0188810001127 640.813476999756 641.9627689998597 642.9807950002141 653.93802900007 654.4530440000817 657.7649340000935
App start regularAppStart	Baseline Mean: 0.021 ms Stdev: 0.002 ms (7.3%) Runs: 0.018025999888777733 0.01822899980470538 0.018635999877005816 0.01912399986758828 0.019204999785870314 0.0192050002515316 0.0194089999422431 0.01940999971702695 0.019612999632954597 0.019613000098615885 0.019896999932825565 0.01993800001218915 0.019979000091552734 0.02002000017091632 0.02022299962118268 0.020548000000417233 0.02075199969112873 0.02083300007507205 0.020995999686419964 0.0210359999909997 0.02119999984279275 0.021363000385463238 0.021525000222027302 0.021727999672293663 0.022013000212609768 0.02217700006440282 0.023233999963849783 0.023641000036150217 0.024170000106096268 Current Mean: 0.015 ms Stdev: 0.001 ms (5.0%) Runs: 0.01310200011357665 0.013346000108867884 0.013549999799579382 0.013549999799579382 0.013753000181168318 0.013753000181168318 0.013916000258177519 0.013996999710798264 0.014322999864816666 0.014364000409841537 0.014403999783098698 0.014404000248759985 0.014444999862462282 0.01444500032812357 0.014485000167042017 0.014485000167042017 0.014525999780744314 0.014811000321060419 0.014851999934762716 0.014891999773681164 0.014932999853044748 0.015176999848335981 0.015176999848335981 0.015339999925345182 0.015380000229924917 0.015461999922990799 0.015542999841272831 0.015705999918282032 0.015951000154018402
App start nativeLaunch	Baseline Mean: 19.967 ms Stdev: 2.183 ms (10.9%) Runs: 17 17 17 18 18 18 18 18 18 19 19 19 19 19 20 20 20 20 20 21 21 21 21 21 21 22 23 24 24 26 Current Mean: 19.400 ms Stdev: 1.873 ms (9.7%) Runs: 17 17 17 18 18 18 18 18 18 18 18 19 19 19 19 19 19 19 19 20 20 20 20 20 21 21 22 23 23 25

OSBotify · 2023-02-21T21:15:52Z

🚀 Deployed to staging by https://github.com/grgia in version: 1.2.75-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2023-02-22T22:58:21Z

🚀 Deployed to production by https://github.com/melvin-bot[bot] in version: 1.2.75-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

grgia added 2 commits February 13, 2023 17:31

Add footer to help site, (no images or social icons yet)

51b0e43

Use existing breakpoints

88d3305

grgia requested a review from shawnborton February 14, 2023 01:36

grgia self-assigned this Feb 14, 2023

Fix medium breakpoints

480d689

grgia added 4 commits February 13, 2023 17:57

Add icons for docs site, add bottom logo and update bottom padding

defd37e

add vertical logo

8ec2b53

Add social icons and fix margin of vertical logo

e6c67e1

Align logo against side

bbf0b15

Use existing color for supporting text, change legal links to blue

e1846f3

Remove unused variables, align footer with content

ab17ffe

Use only copyright as there is no login on this page

65da03e

grgia changed the title ~~[WIP] Add SEO Footer to Help Dot~~ Add SEO Footer to Help Dot Feb 15, 2023

grgia marked this pull request as ready for review February 15, 2023 21:12

grgia requested a review from a team as a code owner February 15, 2023 21:12

melvin-bot bot requested review from arosiclair and removed request for a team February 15, 2023 21:13

Merge branch 'main' into georgia-SEO-footer-help

d4aa064

arosiclair approved these changes Feb 16, 2023

View reviewed changes

roryabraham mentioned this pull request Feb 16, 2023

[HOLD for payment 2023-03-06] [Expensify Help] Impossible to reach bottom of TOC on longer helpsite pages #15198

Closed

grgia merged commit f4e43e8 into main Feb 17, 2023

grgia deleted the georgia-SEO-footer-help branch February 17, 2023 20:47

OSBotify mentioned this pull request Feb 21, 2023

Deploy Checklist: New Expensify 2023-02-21 #15329

Closed

19 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add SEO Footer to Help Dot #15115

Add SEO Footer to Help Dot #15115

grgia commented Feb 14, 2023 •

edited

Loading

grgia commented Feb 14, 2023

grgia commented Feb 14, 2023

shawnborton commented Feb 14, 2023

shawnborton commented Feb 14, 2023

grgia commented Feb 14, 2023

shawnborton commented Feb 14, 2023

grgia commented Feb 14, 2023

shawnborton commented Feb 14, 2023

grgia commented Feb 14, 2023

grgia commented Feb 14, 2023

shawnborton commented Feb 14, 2023

grgia commented Feb 14, 2023

shawnborton commented Feb 14, 2023

grgia commented Feb 14, 2023

shawnborton commented Feb 14, 2023

MelvinBot commented Feb 15, 2023

arosiclair commented Feb 16, 2023 •

edited

Loading

OSBotify commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

OSBotify commented Feb 21, 2023

OSBotify commented Feb 22, 2023

Add SEO Footer to Help Dot #15115

Add SEO Footer to Help Dot #15115

Conversation

grgia commented Feb 14, 2023 • edited Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

grgia commented Feb 14, 2023

grgia commented Feb 14, 2023

shawnborton commented Feb 14, 2023

shawnborton commented Feb 14, 2023

grgia commented Feb 14, 2023

shawnborton commented Feb 14, 2023

grgia commented Feb 14, 2023

shawnborton commented Feb 14, 2023

grgia commented Feb 14, 2023

grgia commented Feb 14, 2023

shawnborton commented Feb 14, 2023

grgia commented Feb 14, 2023

shawnborton commented Feb 14, 2023

grgia commented Feb 14, 2023

shawnborton commented Feb 14, 2023

MelvinBot commented Feb 15, 2023

arosiclair commented Feb 16, 2023 • edited Loading

Reviewer Checklist

Screenshots/Videos

OSBotify commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

Performance Comparison Report 📊

Significant Changes To Duration

Meaningless Changes To Duration

OSBotify commented Feb 21, 2023

OSBotify commented Feb 22, 2023

grgia commented Feb 14, 2023 •

edited

Loading

arosiclair commented Feb 16, 2023 •

edited

Loading