GH-1777 and GH-1776 Plus Promo modals #458
Merged
Conversation
…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
…sPromoModal component and into Panel to simplify
|
@christophertino I've removed the console statement - should be ready to merge. |
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
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:
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.