-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d007458
commit 44f1195
Showing
18 changed files
with
2,015 additions
and
581 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
119 changes: 119 additions & 0 deletions
119
src/editor/components/modals/PaymentModal/PaymentModal.component.jsx
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,119 @@ | ||
| import { httpsCallable } from 'firebase/functions'; | ||
| import React from 'react'; | ||
| import styles from './PaymentModal.module.scss'; | ||
|
|
||
| import { loadStripe } from '@stripe/stripe-js'; | ||
| import PaymentPlaceholderImg from '../../../../../ui_assets/payment-placeholder.png'; | ||
| import { useAuthContext } from '../../../contexts/index.js'; | ||
| import { CheckMark32Icon } from '../../../icons/icons.jsx'; | ||
| import { Button } from '../../components/index.js'; | ||
| import Modal from '../Modal.jsx'; | ||
| import { functions } from '../../../services/firebase.js'; | ||
|
|
||
| let stripePromise; | ||
| const getStripe = () => { | ||
| if (!stripePromise) { | ||
| stripePromise = loadStripe( | ||
| 'pk_test_51PAsDFP2BZd7kkhq6uIm5LRHQQCR2qBppnVwMA1vAokzkgjlngXgAgfaz1jexz1IbqoE2WjEQSWxjTpdeDNeJZSP00PqhX34fp' | ||
| ); | ||
| } | ||
|
|
||
| return stripePromise; | ||
| }; | ||
|
|
||
| const PaymentModal = ({ isOpen, onClose }) => { | ||
| const { currentUser } = useAuthContext(); | ||
|
|
||
| return ( | ||
| <Modal | ||
| className={styles.modalWrapper} | ||
| isOpen={isOpen} | ||
| onClose={onClose} | ||
| extraCloseKeyCode={72} | ||
| > | ||
| <div className={styles.paymentDetails}> | ||
| <h3>Unlock Geospatial Features with 3DStreet Pro</h3> | ||
| <h2> | ||
| Create with geospatial maps and share your vision in augmented reality | ||
| with 3DStreet Pro. | ||
| </h2> | ||
| <ul> | ||
| <li> | ||
| <CheckMark32Icon /> All features in Free | ||
| </li> | ||
| <li> | ||
| <CheckMark32Icon /> | ||
| Google Maps 3D Tiles | ||
| </li> | ||
| <li> | ||
| <CheckMark32Icon /> | ||
| Augmented Reality (QR Anchor) | ||
| </li> | ||
| <li> | ||
| <CheckMark32Icon /> | ||
| Custom SVG Paths | ||
| </li> | ||
| <li> | ||
| <CheckMark32Icon /> | ||
| Mapbox Layers | ||
| </li> | ||
| </ul> | ||
| <Button className={styles.learnMoreBtn} variant="ghost"> | ||
| Learn more | ||
| </Button> | ||
| </div> | ||
| <div className={styles.rightCol}> | ||
| {currentUser ? ( | ||
| <> | ||
| <img | ||
| className={styles.paymentPlaceholder} | ||
| src={PaymentPlaceholderImg} | ||
| /> | ||
| {currentUser.isPremium ? ( | ||
| <CheckMark32Icon /> | ||
| ) : ( | ||
| <Button | ||
| onClick={async () => { | ||
| try { | ||
| const { | ||
| data: { id } | ||
| } = await httpsCallable( | ||
| functions, | ||
| 'createStripeSession' | ||
| )({ | ||
| line_items: [ | ||
| { price: 'price_1PAsLrP2BZd7kkhqoVPaJOT3', quantity: 1 } | ||
| ], | ||
| mode: 'subscription', | ||
| success_url: `${location.origin}/#/modal/payment`, | ||
| cancel_url: `${location.origin}/#/modal/payment`, | ||
| metadata: { | ||
| userId: currentUser.uid | ||
| } | ||
| }); | ||
|
|
||
| const stripe = await getStripe(); | ||
| await stripe.redirectToCheckout({ sessionId: id }); | ||
| } catch (error) { | ||
| console.log(error); | ||
| } | ||
| }} | ||
| className={styles.checkoutWithBtn} | ||
| variant="filled" | ||
| > | ||
| Checkout with Stripe | ||
| </Button> | ||
| )} | ||
| </> | ||
| ) : ( | ||
| <div className={styles.unAuth}> | ||
| <p>To upgrade you have to sign in:</p> | ||
| <Button variant="filled">Sign in to 3DStreet Cloud</Button> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
| export { PaymentModal }; |
84 changes: 84 additions & 0 deletions
84
src/editor/components/modals/PaymentModal/PaymentModal.module.scss
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,84 @@ | ||
| @use '../../../style/variables.scss'; | ||
|
|
||
| .modalWrapper { | ||
| & > div { | ||
| display: flex; | ||
| row-gap: 64px; | ||
| } | ||
|
|
||
| .paymentDetails { | ||
| display: flex; | ||
| flex-direction: column; | ||
| max-width: 460px; | ||
|
|
||
| ul { | ||
| list-style-type: none; | ||
| margin-top: 32px; | ||
| } | ||
|
|
||
| li { | ||
| display: flex; | ||
| align-items: center; | ||
| column-gap: 16px; | ||
|
|
||
| svg { | ||
| width: 24px; | ||
| height: 24px; | ||
|
|
||
| & { | ||
| stroke: #0eaf00; | ||
| fill: #0eaf00; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .learnMoreBtn { | ||
| padding: 0 !important; | ||
| margin-top: 40px; | ||
| } | ||
| } | ||
|
|
||
| .rightCol { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| position: relative; | ||
| width: 380px; | ||
| height: 350px; | ||
|
|
||
| & > svg { | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
|
|
||
| * { | ||
| stroke: #0eaf00; | ||
| fill: #0eaf00; | ||
| } | ||
| } | ||
|
|
||
| .checkoutWithBtn { | ||
| position: absolute; | ||
| } | ||
|
|
||
| .paymentPlaceholder { | ||
| width: 100%; | ||
| height: 100%; | ||
| border-radius: 12px; | ||
| opacity: 0.3; | ||
| } | ||
|
|
||
| .unAuth { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| row-gap: 16px; | ||
|
|
||
| & > p { | ||
| font-size: 24px !important; | ||
| font-weight: 500; | ||
| } | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.