-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* stache * more plan logic * adding contact grid plan guarding support --------- Co-authored-by: Nick Grato <[email protected]>
- Loading branch information
Showing
19 changed files
with
449 additions
and
63 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
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
59 changes: 59 additions & 0 deletions
59
client/components/modules/plans/plan-cards/BusinessPlanCard.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,59 @@ | ||
| import { useCallback } from 'react'; | ||
| import { Button } from '@mozilla/lilypad-ui'; | ||
| import { BUSINESS_COPY } from '../plan.const'; | ||
| import BasePlanCard, { Price } from './BasePlanCard'; | ||
| import { getPricePageData } from 'util/utilities'; | ||
| import { useSelector } from 'react-redux'; | ||
| import { selectRegion } from 'store/regionSlice'; | ||
| import { BillingPeriodE, PlansE } from 'types/General'; | ||
| import styles from './BasePlanCard.module.scss'; | ||
|
|
||
| type BusinessPlanCardPropsT = { | ||
| billingPeriod: BillingPeriodE; | ||
| }; | ||
|
|
||
| const BusinessPlanCard = ({ billingPeriod }: BusinessPlanCardPropsT) => { | ||
| const { regionCode } = useSelector(selectRegion); | ||
| const { planPrice, planUrl, taxDescription, currencySymbol } = | ||
| getPricePageData(regionCode, PlansE.BUSINESS, billingPeriod); | ||
|
|
||
| /** | ||
| * Handle routing user to correct payment plan | ||
| */ | ||
| const handleSubscribeClick = useCallback(() => { | ||
| window.open(planUrl); | ||
| }, [planUrl]); | ||
|
|
||
| return ( | ||
| <BasePlanCard | ||
| plan={PlansE.BUSINESS} | ||
| title="Professional" | ||
| color="rainbow" | ||
| price={ | ||
| <Price | ||
| price={`${currencySymbol}${planPrice}`} | ||
| billingPeriod={`per ${ | ||
| billingPeriod === BillingPeriodE.YEARLY ? 'year' : 'month' | ||
| }`} | ||
| /> | ||
| } | ||
| infoCopyList={BUSINESS_COPY} | ||
| showDisclaimer={false} | ||
| additionalContent={ | ||
| <div className="flex-align-center my-20"> | ||
| <span className={styles.circle}></span> | ||
| <span>Always on — no pausing</span> | ||
| </div> | ||
| } | ||
| confirmButton={ | ||
| <Button | ||
| label="Subscribe to hubs" | ||
| text="Get Started" | ||
| onClick={handleSubscribeClick} | ||
| /> | ||
| } | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default BusinessPlanCard; |
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 |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| export { default as PersonalPlanCard } from './PersonalPlanCard'; | ||
| export { default as StarterPlanCard } from './StarterPlanCard'; | ||
| export { default as ProfessionalPlanCard } from './ProfessionalPlanCard'; | ||
| export { default as BusinessPlanCard } from './BusinessPlanCard'; |
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
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 |
|---|---|---|
| @@ -1,19 +1,61 @@ | ||
| import { useState, useEffect, useMemo } from 'react'; | ||
| import ExpansionPanel from '@Shared/ExpansionPanel/ExpansionPanel'; | ||
| import SupportLink from '@Shared/SupportLink/SupportLink'; | ||
| import styles from './SupportGrid.module.scss'; | ||
| import { useIsStarter } from 'hooks/usePlans'; | ||
| import { useIsProfessionalUp } from 'hooks/usePlans'; | ||
| import { PlansE } from 'types/General'; | ||
| import mailCircle from 'public/mail_circle.png'; | ||
| import messageCircle from 'public/message_circle.png'; | ||
| import questionCircle from 'public/question_circle.png'; | ||
| import BookMeeting from '../BookMeeting/BookMeeting'; | ||
| import { selectAccount } from 'store/accountSlice'; | ||
| import { useSelector } from 'react-redux'; | ||
|
|
||
| type PlanContactInfoT = { | ||
| email: string; | ||
| calendar: string; | ||
| }; | ||
|
|
||
| type ContactDataT = { | ||
| [key in PlansE]: PlanContactInfoT; | ||
| }; | ||
|
|
||
| const SupportGrid = () => { | ||
| const isStarter = useIsStarter(); | ||
| const account = useSelector(selectAccount); | ||
| const isProfessionalUp = useIsProfessionalUp(); | ||
| const [contactData, setContactData] = useState<PlanContactInfoT>({ | ||
| email: '', | ||
| calendar: '', | ||
| }); | ||
|
|
||
| const contactsData: ContactDataT = useMemo(() => { | ||
| const defualtContactData: PlanContactInfoT = { | ||
| email: 'mailto:[email protected]', | ||
| calendar: '', | ||
| }; | ||
| return { | ||
| business: { | ||
| email: 'mailto:[email protected]', | ||
| calendar: 'https://calendly.com/mhmorran/hubs-subscription-support', | ||
| }, | ||
| professional: { | ||
| email: 'mailto:[email protected]', | ||
| calendar: 'https://calendly.com/mhmorran/hubs-subscription-support', | ||
| }, | ||
| personal: defualtContactData, | ||
| starter: defualtContactData, | ||
| standard: defualtContactData, | ||
| }; | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| setContactData(contactsData[account.planName as PlansE]); | ||
| }, [contactsData, account]); | ||
|
|
||
| return ( | ||
| <ExpansionPanel title="Support" expanded={true}> | ||
| <section> | ||
| {!isStarter && <BookMeeting />} | ||
|
|
||
| {isProfessionalUp && <BookMeeting href={contactData.calendar} />} | ||
| <div className={styles.support_links}> | ||
| <SupportLink | ||
| title="Message Us" | ||
|
|
@@ -27,7 +69,7 @@ const SupportGrid = () => { | |
| image={mailCircle} | ||
| // Firefox does not honor "_bank" on "mailtos" | ||
| onClick={() => { | ||
| window.open('mailto:[email protected]'); | ||
| window.open(contactData.email); | ||
| }} | ||
| body="Contact us via email with your questions." | ||
| /> | ||
|
|
||
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 |
|---|---|---|
|
|
@@ -8,6 +8,7 @@ import { | |
| PersonalPlanCard, | ||
| StarterPlanCard, | ||
| ProfessionalPlanCard, | ||
| BusinessPlanCard, | ||
| } from '@Modules/plans/plan-cards'; | ||
| import { BillingPeriodE } from 'types/General'; | ||
|
|
||
|
|
@@ -25,18 +26,27 @@ const Subscribe = () => { | |
|
|
||
| <main> | ||
| <div className={styles.wrapper}> | ||
| <div className={styles.header}> | ||
| <h1>Choose your plan</h1> | ||
| </div> | ||
| <div> | ||
| <div className={styles.header}> | ||
| <h1>Choose your plan</h1> | ||
| </div> | ||
|
|
||
| <div className={styles.cards}> | ||
| <StarterPlanCard /> | ||
| <PersonalPlanCard billingPeriod={billingPeriod} /> | ||
| <ProfessionalPlanCard billingPeriod={billingPeriod} /> | ||
| <ContactCard | ||
| email="[email protected]" | ||
| subject="Subscription inquiries" | ||
| /> | ||
| <div className="flex-justify-center flex-wrap"> | ||
| <div className="flex-justify-center flex-wrap"> | ||
| <StarterPlanCard /> | ||
| <PersonalPlanCard billingPeriod={billingPeriod} /> | ||
| </div> | ||
| <div className="flex-justify-center flex-wrap"> | ||
| <ProfessionalPlanCard billingPeriod={billingPeriod} /> | ||
| <BusinessPlanCard billingPeriod={billingPeriod} /> | ||
| </div> | ||
| </div> | ||
| <div className="flex"> | ||
| <ContactCard | ||
| email="[email protected]" | ||
| subject="Subscription inquiries" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </main> | ||
|
|
||
Oops, something went wrong.