From 3bcafec5c4d0501276f52233b965f5a616965ab1 Mon Sep 17 00:00:00 2001 From: Daniel Campbell Date: Wed, 1 Nov 2023 10:41:36 -0700 Subject: [PATCH 1/3] feat(ui): add mqtt eol overlay and alert banner --- cypress/support/commands.ts | 4 +- .../ClickThroughAnnouncementHandler.tsx | 80 ++++++---- .../ClickThroughAnnouncementOverlay.tsx | 110 +++++-------- .../announcements/MqttEolAnnouncement.tsx | 151 ++++++++++++++++++ .../PaygPriceIncreaseAnnouncement.tsx | 85 ++++++++++ .../subscriptions/components/MqttEolAlert.tsx | 59 +++++++ .../components/SubscriptionsLanding.scss | 4 + .../components/SubscriptionsLanding.tsx | 2 + 8 files changed, 389 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..887fbc0c1d 100644 --- a/src/homepageExperience/ClickThroughAnnouncementHandler.tsx +++ b/src/homepageExperience/ClickThroughAnnouncementHandler.tsx @@ -8,6 +8,8 @@ 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 const ClickThroughAnnouncementHandler: FC = () => { const dispatch = useDispatch() @@ -15,48 +17,66 @@ 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]: 'display', + })) } } - const handleDismissAnnouncement = (): void => { - setAnnouncementState(prevState => ({ - ...prevState, - display: false, - })) + const handleDismissAnnouncement = (announcementID: string): void => { dismissOverlay() + event(`${announcementID}.dismissed`) + setTimeout(() => { + setAnnouncementState(prevState => ({ + ...prevState, + [announcementID]: 'dismissed', + })) + }, 1000) + } + + const handleDisplayAnnouncement = (announcementID: string): void => { + initAnnouncement(announcementID) + + if (announcementState[announcementID] === '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 mqttAnnouncementID = 'mqttEolClickThroughAnnouncement' + const isMqttAudience = isFlagEnabled('subscriptionsUI') + + // PAYG Pricing Increase Audience: Pay As You Go & Direct Signups + const priceIncreaseAnnouncementID = 'pricingClickThroughAnnouncement' const isPaygAccount = account.type === 'pay_as_you_go' const isDirectSignup = account.billingProvider === 'zuora' - const isTargetAudience = isPaygAccount && isDirectSignup - - if (isTargetAudience) { - setCurrentAnnouncement('payg-pricing-increase-announcement') + const isPriceIncreaseAudience = isPaygAccount && isDirectSignup - if (announcementState['display']) { - dispatch( - showOverlay( - 'click-through-announcement', - null, - handleDismissAnnouncement - ) - ) - } + // Sequentially display announcements in order of priority + if ( + isMqttAudience && + announcementState[mqttAnnouncementID] !== 'dismissed' + ) { + handleDisplayAnnouncement(mqttAnnouncementID) + } else if ( + isPriceIncreaseAudience && + announcementState[priceIncreaseAnnouncementID] !== 'dismissed' + ) { + handleDisplayAnnouncement(priceIncreaseAnnouncementID) } }, [announcementState]) diff --git a/src/me/components/ClickThroughAnnouncementOverlay.tsx b/src/me/components/ClickThroughAnnouncementOverlay.tsx index a2680d4f28..63892138fe 100644 --- a/src/me/components/ClickThroughAnnouncementOverlay.tsx +++ b/src/me/components/ClickThroughAnnouncementOverlay.tsx @@ -1,107 +1,69 @@ // 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' // 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 'pricingClickThroughAnnouncement': + return ( + + ) + case 'mqttEolClickThroughAnnouncement': + 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 - - . -

- - -