From 91e9f2661d48ab60cd7068ff0d591b5ba4c495f8 Mon Sep 17 00:00:00 2001 From: Daniel Campbell Date: Fri, 10 Nov 2023 12:18:11 -0800 Subject: [PATCH] feat(ui): add mqtt eol overlay and alert banner (#6835) * feat(ui): add mqtt eol overlay and alert banner * chore(ui): add enums * chore: replace strings with enums --- cypress/support/commands.ts | 4 +- .../ClickThroughAnnouncementHandler.tsx | 89 +++++++---- .../ClickThroughAnnouncementOverlay.tsx | 111 +++++-------- .../announcements/MqttEolAnnouncement.tsx | 151 ++++++++++++++++++ .../PaygPriceIncreaseAnnouncement.tsx | 85 ++++++++++ .../subscriptions/components/MqttEolAlert.tsx | 60 +++++++ .../components/SubscriptionsLanding.scss | 4 + .../components/SubscriptionsLanding.tsx | 2 + 8 files changed, 400 insertions(+), 106 deletions(-) create mode 100644 src/me/components/announcements/MqttEolAnnouncement.tsx create mode 100644 src/me/components/announcements/PaygPriceIncreaseAnnouncement.tsx create mode 100644 src/writeData/subscriptions/components/MqttEolAlert.tsx diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 5e53786362..145362a835 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -1535,8 +1535,8 @@ export const createTaskFromEmpty = ( export const disableClickThroughAnnouncement = () => { const announcementState = { - announcementID: 'payg-pricing-increase-announcement', - display: false, + mqttEolClickThroughAnnouncement: 'dismissed', + pricingClickThroughAnnouncement: 'dismissed', } window.localStorage.setItem( diff --git a/src/homepageExperience/ClickThroughAnnouncementHandler.tsx b/src/homepageExperience/ClickThroughAnnouncementHandler.tsx index 65070271fd..95b252f248 100644 --- a/src/homepageExperience/ClickThroughAnnouncementHandler.tsx +++ b/src/homepageExperience/ClickThroughAnnouncementHandler.tsx @@ -8,6 +8,18 @@ import {selectCurrentIdentity} from 'src/identity/selectors' // Utils import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays' +import {isFlagEnabled} from 'src/shared/utils/featureFlag' +import {event} from 'src/cloud/utils/reporting' + +export enum AnnouncementID { + MqttEol = 'mqttEolClickThroughAnnouncement', + PriceIncrease = 'pricingClickThroughAnnouncement', +} + +enum AnnouncementState { + Dismissed = 'dismissed', + Display = 'display', +} export const ClickThroughAnnouncementHandler: FC = () => { const dispatch = useDispatch() @@ -15,48 +27,65 @@ export const ClickThroughAnnouncementHandler: FC = () => { const [announcementState, setAnnouncementState] = useLocalStorageState( 'clickThroughAnnouncement', - { - announcementID: '', - display: true, - } + {} ) - const setCurrentAnnouncement = (announcementID: string): void => { - if (announcementState['announcementID'] !== announcementID) { - setAnnouncementState({ - announcementID: announcementID, - display: true, - }) + const initAnnouncement = (announcementID: string): void => { + if (!announcementState[announcementID]) { + setAnnouncementState(prevState => ({ + ...prevState, + [announcementID]: AnnouncementState.Display, + })) } } - const handleDismissAnnouncement = (): void => { - setAnnouncementState(prevState => ({ - ...prevState, - display: false, - })) + const handleDismissAnnouncement = (announcementID: string): void => { dismissOverlay() + event(`${announcementID}.dismissed`) + setTimeout(() => { + setAnnouncementState(prevState => ({ + ...prevState, + [announcementID]: AnnouncementState.Dismissed, + })) + }, 1000) + } + + const handleDisplayAnnouncement = (announcementID: string): void => { + initAnnouncement(announcementID) + + if (announcementState[announcementID] === AnnouncementState.Display) { + const overlayParams = { + announcementID, + } + dispatch( + showOverlay('click-through-announcement', overlayParams, () => + handleDismissAnnouncement(announcementID) + ) + ) + } } useEffect(() => { - // Current Announcement: PAYG Pricing Increase - // Audience: Pay As You Go & Direct Signups + // MQTT Audience: Cloud users with MQTT feature flag enabled + const isMqttAudience = isFlagEnabled('subscriptionsUI') + + // PAYG Pricing Increase Audience: Pay As You Go & Direct Signups const isPaygAccount = account.type === 'pay_as_you_go' const isDirectSignup = account.billingProvider === 'zuora' - const isTargetAudience = isPaygAccount && isDirectSignup + const isPriceIncreaseAudience = isPaygAccount && isDirectSignup - if (isTargetAudience) { - setCurrentAnnouncement('payg-pricing-increase-announcement') - - if (announcementState['display']) { - dispatch( - showOverlay( - 'click-through-announcement', - null, - handleDismissAnnouncement - ) - ) - } + // Sequentially display announcements in order of priority + if ( + isMqttAudience && + announcementState[AnnouncementID.MqttEol] !== AnnouncementState.Dismissed + ) { + handleDisplayAnnouncement(AnnouncementID.MqttEol) + } else if ( + isPriceIncreaseAudience && + announcementState[AnnouncementID.PriceIncrease] !== + AnnouncementState.Dismissed + ) { + handleDisplayAnnouncement(AnnouncementID.PriceIncrease) } }, [announcementState]) diff --git a/src/me/components/ClickThroughAnnouncementOverlay.tsx b/src/me/components/ClickThroughAnnouncementOverlay.tsx index a2680d4f28..e564a28791 100644 --- a/src/me/components/ClickThroughAnnouncementOverlay.tsx +++ b/src/me/components/ClickThroughAnnouncementOverlay.tsx @@ -1,107 +1,70 @@ // Libraries -import React, {useEffect} from 'react' +import React, {FC, useEffect} from 'react' import {useSelector} from 'react-redux' // Components -import {Overlay, Button, ComponentColor} from '@influxdata/clockface' -import {SafeBlankLink} from 'src/utils/SafeBlankLink' +import {Overlay} from '@influxdata/clockface' +import {PaygPriceIncreaseAnnouncement} from 'src/me/components/announcements/PaygPriceIncreaseAnnouncement' +import {MqttEolAnnouncement} from 'src/me/components/announcements/MqttEolAnnouncement' // Utils import {event} from 'src/cloud/utils/reporting' +import {AnnouncementID} from 'src/homepageExperience/ClickThroughAnnouncementHandler' // Selectors -import {selectCurrentOrg, selectUser} from 'src/identity/selectors' +import {getOverlayParams} from 'src/overlays/selectors' interface ClickThroughAnnouncementOverlayProps { onClose: () => void } -export const ClickThroughAnnouncementOverlay: React.FC< +export const ClickThroughAnnouncementOverlay: FC< ClickThroughAnnouncementOverlayProps > = ({onClose}) => { + const {announcementID} = useSelector(getOverlayParams) + useEffect(() => { - event(`pricingClickThroughAnnouncement.displayed`) + event(`${announcementID}.displayed`) }, []) - const org = useSelector(selectCurrentOrg) - const user = useSelector(selectUser) - - const encodedSubject = encodeURI('PAYG Pricing Increase') - const encodedBody = encodeURI(`User ID: ${user.email} -Org ID: ${org.id} - -Please describe your inquiry here.`) - - const handlePricingAnnouncementClick = () => { - event(`pricingClickThroughAnnouncement.details.clicked`) + const handleDetailsClick = () => { + event(`${announcementID}.details.clicked`) } const handleContactUsClick = () => { - event(`pricingClickThroughAnnouncement.contactUs.clicked`) + event(`${announcementID}.contactUs.clicked`) } const handleAcknowledgeClick = () => { - event(`pricingClickThroughAnnouncement.acknowledge.clicked`) + event(`${announcementID}.acknowledge.clicked`) onClose() } + const announcementContents = (): JSX.Element => { + switch (announcementID) { + case AnnouncementID.PriceIncrease: + return ( + + ) + case AnnouncementID.MqttEol: + return ( + + ) + default: + return null + } + } + return ( - - - -

- Starting on December 1, 2023 there will be an - increase in to your usage-based pricing. -

-

- Your monthly charges will continue to be based on your actual - consumption of the four billable usage vectors: Data In, Query - Count, Storage and Data Out. This is unchanged. However, unit - pricing for two of these vectors will be increased beginning{' '} - December 1, 2023: -

-
    -
  • - Data In will increase from $0.002 to $0.0025 per MB ingested -
    • -
  • - Query Count will increase from $0.01 to $0.012 per 100 executed -
    • -
-

- This increase to your total monthly charges will depend on the - specific distribution of your workload across the billable vectors. - Most customers will experience an increase between 14% - 24%. -

-

- Please feel free to{' '} - - contact us - {' '} - with questions or refer to our website for{' '} - - additional information - - . -

- - -