Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GH-1777 and GH-1776 Plus Promo modals #458

Merged
merged 26 commits into from Oct 16, 2019
Merged

Conversation

@wlycdgr
Copy link
Member

@wlycdgr wlycdgr commented Oct 9, 2019

Implements the UI and business logic for the on-install Plus Promo modals described in GH-1776, GH-1777, and GH-1773. Provides a framework and a stub for the upgrade version of the modal described in GH-1813. Does not implement the metrics pings - that has been factored out to GH-1775 and will be a separate PR.

The main parts of the code are:

  • a new shared component called PlusPromoModal that renders the initial and upgrade versions of the promo modal inside the Modal shared component
  • the accompanying scss
  • a new background class called PromoModals that manages modal-related state and answers questions like "is it time to display another promo?". It will be modified and extended to handle the Insights promo modal alongside the Plus ones. It is effectively a namespace for some static methods that query and set conf properties.

The Hub version of the modal is rendered in HomeViewContainer; the panel version is rendered in Panel. The components send messages to the main background script, which delegates their handling to PromoModals. PanelData queries PromoModals to set the properties it sends to Panel which determine whether the modal is rendered.

To faciliate testing, when debug is set in manifest, the modals should display every ~20 seconds instead of every 30 days.

P.S. The number of changed files is large because I snuck in some localization cleanup. A lot of it is test snapshots updated to match the new i18n token names.

P.P.S. Price localization will be implemented by calling Number.toLocaleString() on the string "$2", as per discussion with Jose. This will require some design updates from John to make sure the modals look good in every locale, as there's significant variation in how '$2' is localized (see GH-1777 for details). Forgot to mention. There's a discussion about how to handle price localization for the "$2 per month" line in the modal. One suggestion is to try to infer location from IP. Another is to use USD $2 everywhere. Another option would be to use the most likely currency icon and amount combination for each locale.

  • Have you followed the guidelines in CONTRIBUTING.md?
  • Have you checked to ensure there aren't other open Pull Requests for the same update/change?
  • Have you added an explanation of what your changes do?
  • Does your submission pass tests?
  • Did you lint your code prior to submission?
wlycdgr added 24 commits Sep 16, 2019
…essages. Add check icon to plus promo modal. Modify plus promo modal css.
…rendering in panel. Implement display context CSS adjustments.
… Begin to implement conditional panel display logic
…ed business logic and state management
…dismisses promo panel. Send record of promo interaction to background
…ional rendering logic to account for upgrade version of modal
…ion and add debug code
@wlycdgr wlycdgr requested review from Eden12345, zarembsky and ghostery/ghostery as code owners Oct 9, 2019
@wlycdgr wlycdgr requested review from jsignanini and christophertino Oct 9, 2019
…sPromoModal component and into Panel to simplify
@christophertino christophertino added this to the 8.4.4 milestone Oct 16, 2019
@wlycdgr
Copy link
Member Author

@wlycdgr wlycdgr commented Oct 16, 2019

@christophertino I've removed the console statement - should be ready to merge.

@wlycdgr wlycdgr merged commit b3856d2 into release/8.4.5 Oct 16, 2019
2 checks passed
2 checks passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
@christophertino christophertino deleted the GH-1777/plus-intro-hub-promo branch Oct 16, 2019
benstrumeyer added a commit that referenced this pull request Oct 18, 2019
* Show plus promo modal on first view of Home view of each Hub session

* Stub out intro hub plus promo modal layout and implement its buttons

* Remove some unnecessary plus promo modal related CSS

* Continue adding styling for plus promo modal

* Continue styling plus promo modal

* Refactor plus promo modal CSS to improve alignment of elements

* Continue CSS work for plus promo modal

* Implement recommended gold banner in plus promo modal

* Update and tweak plus promo modal design

* Fix path bug in i18n-checker tool. Consolidate redundant entries in messages. Add check icon to plus promo modal. Modify plus promo modal css.

* Additional consolidation of redundant and unused entries in messages

* Factor plus promo modal rendering out to shared component. Implement rendering in panel. Implement display context CSS adjustments.

* Move Plus Promo modal rendering to a PlusPromoModal shared component. Begin to implement conditional panel display logic

* Create ModalPromos background class responsible for modal promo related business logic and state management

* Add local state to Panel to make sure component rerenders after user dismisses promo panel. Send record of promo interaction to background

* Make PromoModals code more robust

* Factor PlusPromoModal rendering out to helper in Panel. Extend conditional rendering logic to account for upgrade version of modal

* Mark PromoModals methods as static. Refine PlusPromoModal implementation and add debug code

* Add logic to hide plus promo modal from Insights subscribers. Cleanup and comments.

* Clean up. Finish string localization in PlusPromoModal

* Pull non-shared upgrade version of plus promo modal out of shared PlusPromoModal component and into Panel to simplify

* Remove debug console statement
wlycdgr added a commit that referenced this pull request Oct 24, 2019
* Created modal UI

* Change feature language. Add exit button.

* Add insights modal that will appear if a user clicks 3x per day for 3 days. Users subscribed to insights will not be shown promos.

* Refactor insights modal into a component. Reshow modal after prompted to log in on summary page.

* Clean up insights modal code

* Show plus promo modal on first view of Home view of each Hub session

* Stub out intro hub plus promo modal layout and implement its buttons

* Remove some unnecessary plus promo modal related CSS

* Continue adding styling for plus promo modal

* Continue styling plus promo modal

* Refactor plus promo modal CSS to improve alignment of elements

* Continue CSS work for plus promo modal

* Implement recommended gold banner in plus promo modal

* Update and tweak plus promo modal design

* Fix path bug in i18n-checker tool. Consolidate redundant entries in messages. Add check icon to plus promo modal. Modify plus promo modal css.

* Additional consolidation of redundant and unused entries in messages

* Factor plus promo modal rendering out to shared component. Implement rendering in panel. Implement display context CSS adjustments.

* Move Plus Promo modal rendering to a PlusPromoModal shared component. Begin to implement conditional panel display logic

* Create ModalPromos background class responsible for modal promo related business logic and state management

* Add local state to Panel to make sure component rerenders after user dismisses promo panel. Send record of promo interaction to background

* Make PromoModals code more robust

* Factor PlusPromoModal rendering out to helper in Panel. Extend conditional rendering logic to account for upgrade version of modal

* Mark PromoModals methods as static. Refine PlusPromoModal implementation and add debug code

* Add logic to hide plus promo modal from Insights subscribers. Cleanup and comments.

* Clean up. Finish string localization in PlusPromoModal

* Plug in insights modal into promo modal class

* GH-1777 and GH-1776 Plus Promo modals (#458)

* Show plus promo modal on first view of Home view of each Hub session

* Stub out intro hub plus promo modal layout and implement its buttons

* Remove some unnecessary plus promo modal related CSS

* Continue adding styling for plus promo modal

* Continue styling plus promo modal

* Refactor plus promo modal CSS to improve alignment of elements

* Continue CSS work for plus promo modal

* Implement recommended gold banner in plus promo modal

* Update and tweak plus promo modal design

* Fix path bug in i18n-checker tool. Consolidate redundant entries in messages. Add check icon to plus promo modal. Modify plus promo modal css.

* Additional consolidation of redundant and unused entries in messages

* Factor plus promo modal rendering out to shared component. Implement rendering in panel. Implement display context CSS adjustments.

* Move Plus Promo modal rendering to a PlusPromoModal shared component. Begin to implement conditional panel display logic

* Create ModalPromos background class responsible for modal promo related business logic and state management

* Add local state to Panel to make sure component rerenders after user dismisses promo panel. Send record of promo interaction to background

* Make PromoModals code more robust

* Factor PlusPromoModal rendering out to helper in Panel. Extend conditional rendering logic to account for upgrade version of modal

* Mark PromoModals methods as static. Refine PlusPromoModal implementation and add debug code

* Add logic to hide plus promo modal from Insights subscribers. Cleanup and comments.

* Clean up. Finish string localization in PlusPromoModal

* Pull non-shared upgrade version of plus promo modal out of shared PlusPromoModal component and into Panel to simplify

* Remove debug console statement

* Consolidate insights promo with plus promo

* GH-1814/promo toggle (#453)

* Add language and toggle for notify_promotions

* Change label name

* User can opt out of promotions

* Remove empty SCSS class

* Add newlines

* Add hover effects

* Refactor insights promo to use redux. Remove summary component code. Remove redundant scss rules.

* Refactor hasEngagedFrequently to update in recordEngaged

* Refactor recordEngaged

* Fix recordEngaged bug

* Fix font paths

* Remove unused font asset
christophertino added a commit that referenced this pull request Oct 28, 2019
* Show plus promo modal on first view of Home view of each Hub session

* Stub out intro hub plus promo modal layout and implement its buttons

* Remove some unnecessary plus promo modal related CSS

* Continue adding styling for plus promo modal

* Continue styling plus promo modal

* Refactor plus promo modal CSS to improve alignment of elements

* Continue CSS work for plus promo modal

* Implement recommended gold banner in plus promo modal

* Update and tweak plus promo modal design

* Fix path bug in i18n-checker tool. Consolidate redundant entries in messages. Add check icon to plus promo modal. Modify plus promo modal css.

* Additional consolidation of redundant and unused entries in messages

* Factor plus promo modal rendering out to shared component. Implement rendering in panel. Implement display context CSS adjustments.

* Move Plus Promo modal rendering to a PlusPromoModal shared component. Begin to implement conditional panel display logic

* Create ModalPromos background class responsible for modal promo related business logic and state management

* Add local state to Panel to make sure component rerenders after user dismisses promo panel. Send record of promo interaction to background

* Make PromoModals code more robust

* Factor PlusPromoModal rendering out to helper in Panel. Extend conditional rendering logic to account for upgrade version of modal

* Mark PromoModals methods as static. Refine PlusPromoModal implementation and add debug code

* Add logic to hide plus promo modal from Insights subscribers. Cleanup and comments.

* Clean up. Finish string localization in PlusPromoModal

* Pull non-shared upgrade version of plus promo modal out of shared PlusPromoModal component and into Panel to simplify

* Remove debug console statement
christophertino added a commit that referenced this pull request Oct 28, 2019
* Created modal UI

* Change feature language. Add exit button.

* Add insights modal that will appear if a user clicks 3x per day for 3 days. Users subscribed to insights will not be shown promos.

* Refactor insights modal into a component. Reshow modal after prompted to log in on summary page.

* Clean up insights modal code

* Show plus promo modal on first view of Home view of each Hub session

* Stub out intro hub plus promo modal layout and implement its buttons

* Remove some unnecessary plus promo modal related CSS

* Continue adding styling for plus promo modal

* Continue styling plus promo modal

* Refactor plus promo modal CSS to improve alignment of elements

* Continue CSS work for plus promo modal

* Implement recommended gold banner in plus promo modal

* Update and tweak plus promo modal design

* Fix path bug in i18n-checker tool. Consolidate redundant entries in messages. Add check icon to plus promo modal. Modify plus promo modal css.

* Additional consolidation of redundant and unused entries in messages

* Factor plus promo modal rendering out to shared component. Implement rendering in panel. Implement display context CSS adjustments.

* Move Plus Promo modal rendering to a PlusPromoModal shared component. Begin to implement conditional panel display logic

* Create ModalPromos background class responsible for modal promo related business logic and state management

* Add local state to Panel to make sure component rerenders after user dismisses promo panel. Send record of promo interaction to background

* Make PromoModals code more robust

* Factor PlusPromoModal rendering out to helper in Panel. Extend conditional rendering logic to account for upgrade version of modal

* Mark PromoModals methods as static. Refine PlusPromoModal implementation and add debug code

* Add logic to hide plus promo modal from Insights subscribers. Cleanup and comments.

* Clean up. Finish string localization in PlusPromoModal

* Plug in insights modal into promo modal class

* GH-1777 and GH-1776 Plus Promo modals (#458)

* Show plus promo modal on first view of Home view of each Hub session

* Stub out intro hub plus promo modal layout and implement its buttons

* Remove some unnecessary plus promo modal related CSS

* Continue adding styling for plus promo modal

* Continue styling plus promo modal

* Refactor plus promo modal CSS to improve alignment of elements

* Continue CSS work for plus promo modal

* Implement recommended gold banner in plus promo modal

* Update and tweak plus promo modal design

* Fix path bug in i18n-checker tool. Consolidate redundant entries in messages. Add check icon to plus promo modal. Modify plus promo modal css.

* Additional consolidation of redundant and unused entries in messages

* Factor plus promo modal rendering out to shared component. Implement rendering in panel. Implement display context CSS adjustments.

* Move Plus Promo modal rendering to a PlusPromoModal shared component. Begin to implement conditional panel display logic

* Create ModalPromos background class responsible for modal promo related business logic and state management

* Add local state to Panel to make sure component rerenders after user dismisses promo panel. Send record of promo interaction to background

* Make PromoModals code more robust

* Factor PlusPromoModal rendering out to helper in Panel. Extend conditional rendering logic to account for upgrade version of modal

* Mark PromoModals methods as static. Refine PlusPromoModal implementation and add debug code

* Add logic to hide plus promo modal from Insights subscribers. Cleanup and comments.

* Clean up. Finish string localization in PlusPromoModal

* Pull non-shared upgrade version of plus promo modal out of shared PlusPromoModal component and into Panel to simplify

* Remove debug console statement

* Consolidate insights promo with plus promo

* GH-1814/promo toggle (#453)

* Add language and toggle for notify_promotions

* Change label name

* User can opt out of promotions

* Remove empty SCSS class

* Add newlines

* Add hover effects

* Refactor insights promo to use redux. Remove summary component code. Remove redundant scss rules.

* Refactor hasEngagedFrequently to update in recordEngaged

* Refactor recordEngaged

* Fix recordEngaged bug

* Fix font paths

* Remove unused font asset
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants