From 4a9d79cb58599d1bf970a78337f01d7a5ba56659 Mon Sep 17 00:00:00 2001 From: Daniel Campbell Date: Wed, 18 Oct 2023 15:25:53 -0700 Subject: [PATCH 01/11] feat(ui): Add click through announcement feature --- .../components/PayAsYouGo/PayAsYouGo.tsx | 74 +++++++------ .../components/PayAsYouGo/PricingAlert.tsx | 66 ++++++++++++ .../ClickThroughAnnouncementHandler.tsx | 67 ++++++++++++ .../containers/HomepageContainer.tsx | 8 +- .../ClickThroughAnnouncementOverlay.tsx | 101 ++++++++++++++++++ src/overlays/components/OverlayController.tsx | 6 ++ src/overlays/reducers/overlays.ts | 1 + 7 files changed, 291 insertions(+), 32 deletions(-) create mode 100644 src/billing/components/PayAsYouGo/PricingAlert.tsx create mode 100644 src/homepageExperience/ClickThroughAnnouncementHandler.tsx create mode 100644 src/me/components/ClickThroughAnnouncementOverlay.tsx diff --git a/src/billing/components/PayAsYouGo/PayAsYouGo.tsx b/src/billing/components/PayAsYouGo/PayAsYouGo.tsx index 8335c4748c..ea8645b371 100644 --- a/src/billing/components/PayAsYouGo/PayAsYouGo.tsx +++ b/src/billing/components/PayAsYouGo/PayAsYouGo.tsx @@ -1,4 +1,8 @@ +// Libraries import React, {FC} from 'react' +import {useSelector} from 'react-redux' + +// Components import { AlignItems, ComponentSize, @@ -7,8 +11,6 @@ import { Panel, ResourceList, } from '@influxdata/clockface' - -// Components import PlanTypePanel from 'src/billing/components/PayAsYouGo/PlanTypePanel' import PaymentPanel from 'src/billing/components/PaymentInfo/PaymentPanel' import BillingContactInfo from 'src/billing/components/BillingContactInfo' @@ -17,35 +19,45 @@ import CancellationPanel from 'src/billing/components/PayAsYouGo/CancellationPan import NotificationPanel from 'src/billing/components/PayAsYouGo/NotificationPanel' import InvoiceLoadingWrapper from 'src/billing/components/AssetLoading/InvoiceWrapper' import BillingInfoWrapper from 'src/billing/components/AssetLoading/BillingInfoWrapper' +import {PricingAlert} from 'src/billing/components/PayAsYouGo/PricingAlert' + +// Utils +import {selectCurrentIdentity} from 'src/identity/selectors' + +const BillingPayAsYouGo: FC = () => { + const {account} = useSelector(selectCurrentIdentity) + const directSignup = account.billingProvider === 'zuora' -const BillingPayAsYouGo: FC = () => ( - - - <> - - - -

Past Invoices

- - - - - - - - - - - - - - - - -) + return ( + + + <> + {directSignup && } + + + +

Past Invoices

+ + + + + + + + + + + + + + + + + ) +} export default BillingPayAsYouGo diff --git a/src/billing/components/PayAsYouGo/PricingAlert.tsx b/src/billing/components/PayAsYouGo/PricingAlert.tsx new file mode 100644 index 0000000000..27af376565 --- /dev/null +++ b/src/billing/components/PayAsYouGo/PricingAlert.tsx @@ -0,0 +1,66 @@ +// Libraries +import React, {useEffect} from 'react' +import {useSelector} from 'react-redux' + +// Components +import { + Alert, + FlexBox, + IconFont, + ComponentColor, + ComponentSize, +} from '@influxdata/clockface' +import {SafeBlankLink} from 'src/utils/SafeBlankLink' + +// Utils +import {event} from 'src/cloud/utils/reporting' + +// Selectors +import {selectCurrentOrg, selectUser} from 'src/identity/selectors' + +export const PricingAlert: React.FC = () => { + useEffect(() => { + event(`pricingAnnouncementBanner.displayed`) + }, []) + + const org = useSelector(selectCurrentOrg) + const user = useSelector(selectUser) + + const handleContactUsClick = () => { + event(`pricingAnnouncementBanner.contactUs.clicked`) + } + + const handlePricingAnnouncementClick = () => { + event(`pricingAnnouncementBanner.details.clicked`) + } + + return ( + + + + Starting on December 1, 2023 there will be an increase in to + your usage-based pricing. Please feel free to{' '} + + contact us + {' '} + with questions or refer to our website for additional information. + + + +
+ View Pricing Changes +
+ + + + + ) +} diff --git a/src/homepageExperience/ClickThroughAnnouncementHandler.tsx b/src/homepageExperience/ClickThroughAnnouncementHandler.tsx new file mode 100644 index 0000000000..87776fb81e --- /dev/null +++ b/src/homepageExperience/ClickThroughAnnouncementHandler.tsx @@ -0,0 +1,67 @@ +// Libraries +import {FC, useEffect} from 'react' +import {useSelector, useDispatch} from 'react-redux' +import {useLocalStorageState} from 'use-local-storage-state' + +// Selectors +import {selectCurrentIdentity} from 'src/identity/selectors' + +// Utils +import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays' + +// Constants +import {CLOUD} from 'src/shared/constants' + +export const ClickThroughAnnouncementHandler: FC = () => { + const dispatch = useDispatch() + const {account} = useSelector(selectCurrentIdentity) + + const [announcementState, setAnnouncementState] = useLocalStorageState( + 'clickThroughAnnouncement', + { + announcementID: '', + display: true, + } + ) + + const setCurrentAnnouncement = (announcementID: string): void => { + if (announcementState['announcementID'] !== announcementID) { + setAnnouncementState({ + announcementID: announcementID, + display: true, + }) + } + } + + const handleDismissAnnouncement = (): void => { + setAnnouncementState(prevState => ({ + ...prevState, + display: false, + })) + dismissOverlay() + } + + useEffect(() => { + // Current Announcement: PAYG Pricing Increase + // Audience: Cloud, Pay As You Go, Direct Signups + const paygAccount = account.type === 'pay_as_you_go' + const directSignup = account.billingProvider === 'zuora' + const audience = CLOUD && paygAccount && directSignup + + if (audience) { + setCurrentAnnouncement('payg-pricing-increase-announcement') + + if (announcementState['display']) { + dispatch( + showOverlay( + 'click-through-announcement', + null, + handleDismissAnnouncement + ) + ) + } + } + }, [announcementState]) + + return null +} diff --git a/src/homepageExperience/containers/HomepageContainer.tsx b/src/homepageExperience/containers/HomepageContainer.tsx index 3ad7b07363..43fad61db1 100644 --- a/src/homepageExperience/containers/HomepageContainer.tsx +++ b/src/homepageExperience/containers/HomepageContainer.tsx @@ -5,6 +5,7 @@ import {useSelector} from 'react-redux' // Components import {HomepageContents} from 'src/homepageExperience/containers/HomepageContents' import {HomepageContentsTSM} from 'src/homepageExperience/containers/HomepageContentsTSM' +import {ClickThroughAnnouncementHandler} from 'src/homepageExperience/ClickThroughAnnouncementHandler' // Utils import {isOrgIOx} from 'src/organizations/selectors' @@ -16,5 +17,10 @@ export const HomepageContainer: FC = () => { ) - return <>{homepageContents} + return ( + <> + {homepageContents} + + + ) } diff --git a/src/me/components/ClickThroughAnnouncementOverlay.tsx b/src/me/components/ClickThroughAnnouncementOverlay.tsx new file mode 100644 index 0000000000..ce67d29e28 --- /dev/null +++ b/src/me/components/ClickThroughAnnouncementOverlay.tsx @@ -0,0 +1,101 @@ +// Libraries +import React, {useEffect} from 'react' +import {useSelector} from 'react-redux' + +// Components +import {Overlay, Button, ComponentColor} from '@influxdata/clockface' +import {SafeBlankLink} from 'src/utils/SafeBlankLink' + +// Utils +import {event} from 'src/cloud/utils/reporting' + +// Selectors +import {selectCurrentOrg, selectUser} from 'src/identity/selectors' + +interface ClickThroughAnnouncementOverlayProps { + onClose: () => void +} + +export const ClickThroughAnnouncementOverlay: React.FC< + ClickThroughAnnouncementOverlayProps +> = ({onClose}) => { + useEffect(() => { + event(`pricingClickThroughAnnouncement.displayed`) + }, []) + + const org = useSelector(selectCurrentOrg) + const user = useSelector(selectUser) + + const handlePricingAnnouncementClick = () => { + event(`pricingClickThroughAnnouncement.details.clicked`) + } + + const handleContactUsClick = () => { + event(`pricingClickThroughAnnouncement.contactUs.clicked`) + } + + const handleAcknowledgeClick = () => { + event(`pricingClickThroughAnnouncement.acknowledge.clicked`) + onClose() + } + + 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 + + . +

+ + +