-
Notifications
You must be signed in to change notification settings - Fork 43
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ui): Add click through announcement feature
- Loading branch information
Showing
7 changed files
with
291 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <Alert icon={IconFont.AlertTriangle} color={ComponentColor.Primary}> | ||
| <FlexBox margin={ComponentSize.Medium}> | ||
| <FlexBox.Child grow={1} shrink={0}> | ||
| Starting on <b>December 1, 2023</b> there will be an increase in to | ||
| your usage-based pricing. Please feel free to{' '} | ||
| <SafeBlankLink | ||
| href={`mailto:[email protected]? | ||
| &subject=PAYG%20price%20change%20inquiry | ||
| &body=User%20ID:%20${user.email}%0D%0AOrg%20ID:%20${org.id}%0D%0A%0D%0APlease%20describe%20your%20inquiry%20here.`} | ||
| onClick={handleContactUsClick} | ||
| > | ||
| contact us | ||
| </SafeBlankLink>{' '} | ||
| with questions or refer to our website for additional information. | ||
| </FlexBox.Child> | ||
| <FlexBox.Child grow={0} shrink={0}> | ||
| <SafeBlankLink | ||
| href="https://www.influxdata.com/influxdb-pricing" | ||
| onClick={handlePricingAnnouncementClick} | ||
| > | ||
| <div className="cf-button cf-button-xs cf-button-primary"> | ||
| <span className="cf-button-label">View Pricing Changes</span> | ||
| </div> | ||
| </SafeBlankLink> | ||
| </FlexBox.Child> | ||
| </FlexBox> | ||
| </Alert> | ||
| ) | ||
| } |
67 changes: 67 additions & 0 deletions
67
src/homepageExperience/ClickThroughAnnouncementHandler.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <Overlay visible={true}> | ||
| <Overlay.Container> | ||
| <Overlay.Header title="Notice: Your Plan Pricing is Changing" /> | ||
| <Overlay.Body> | ||
| <p> | ||
| Starting on <strong>December 1, 2023</strong> there will be an | ||
| increase in to your usage-based pricing. | ||
| </p> | ||
| <p> | ||
| 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{' '} | ||
| <strong>December 1, 2023</strong>: | ||
| </p> | ||
| <ul> | ||
| <li> | ||
| Data In will increase from $0.002 to $0.0025 per MB ingested | ||
| </li> | ||
| <li> | ||
| Query Count will increase from $0.01 to $0.012 per 100 executed | ||
| </li> | ||
| </ul> | ||
| <p> | ||
| 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%. | ||
| </p> | ||
| <p> | ||
| Please feel free to{' '} | ||
| <SafeBlankLink | ||
| href={`mailto:[email protected]? | ||
| &subject=PAYG%20price%20change%20inquiry | ||
| &body=User%20ID:%20${user.email}%0D%0AOrg%20ID:%20${org.id}%0D%0A%0D%0APlease%20describe%20your%20inquiry%20here.`} | ||
| onClick={handleContactUsClick} | ||
| > | ||
| contact us | ||
| </SafeBlankLink>{' '} | ||
| with questions or refer to our website for{' '} | ||
| <SafeBlankLink | ||
| href="https://www.influxdata.com/influxdb-pricing" | ||
| onClick={handlePricingAnnouncementClick} | ||
| > | ||
| additional information | ||
| </SafeBlankLink> | ||
| . | ||
| </p> | ||
| </Overlay.Body> | ||
| <Overlay.Footer> | ||
| <Button | ||
| text="Acknowledge" | ||
| color={ComponentColor.Primary} | ||
| onClick={handleAcknowledgeClick} | ||
| /> | ||
| </Overlay.Footer> | ||
| </Overlay.Container> | ||
| </Overlay> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters