From 0db6103b69c6ecd052febd55fbbea731bb8f0246 Mon Sep 17 00:00:00 2001 From: Anoop M D Date: Fri, 5 Jan 2024 03:17:55 +0530 Subject: [PATCH] feat: golden edition modal --- .../Sidebar/GoldenEdition/StyledWrapper.js | 20 ++ .../components/Sidebar/GoldenEdition/index.js | 177 ++++++++++++++++++ .../bruno-app/src/components/Sidebar/index.js | 13 +- packages/bruno-electron/src/index.js | 2 +- 4 files changed, 209 insertions(+), 3 deletions(-) create mode 100644 packages/bruno-app/src/components/Sidebar/GoldenEdition/StyledWrapper.js create mode 100644 packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js diff --git a/packages/bruno-app/src/components/Sidebar/GoldenEdition/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/GoldenEdition/StyledWrapper.js new file mode 100644 index 00000000..0d62440d --- /dev/null +++ b/packages/bruno-app/src/components/Sidebar/GoldenEdition/StyledWrapper.js @@ -0,0 +1,20 @@ +import styled from 'styled-components'; + +const StyledWrapper = styled.div` + color: ${(props) => props.theme.text}; + .collection-options { + svg { + position: relative; + top: -1px; + } + + .label { + cursor: pointer; + &:hover { + text-decoration: underline; + } + } + } +`; + +export default StyledWrapper; diff --git a/packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js b/packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js new file mode 100644 index 00000000..a473ae80 --- /dev/null +++ b/packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js @@ -0,0 +1,177 @@ +import React, { useState, useEffect } from 'react'; +import Modal from 'components/Modal/index'; +import { PostHog } from 'posthog-node'; +import { uuid } from 'utils/common'; +import { IconHeart, IconUser, IconUsers } from '@tabler/icons'; +import platformLib from 'platform'; +import StyledWrapper from './StyledWrapper'; + +let posthogClient = null; +const posthogApiKey = 'phc_7gtqSrrdZRohiozPMLIacjzgHbUlhalW1Bu16uYijMR'; +const getPosthogClient = () => { + if (posthogClient) { + return posthogClient; + } + + posthogClient = new PostHog(posthogApiKey); + return posthogClient; +}; +const getAnonymousTrackingId = () => { + let id = localStorage.getItem('bruno.anonymousTrackingId'); + + if (!id || !id.length || id.length !== 21) { + id = uuid(); + localStorage.setItem('bruno.anonymousTrackingId', id); + } + + return id; +}; + +const HeartIcon = () => { + return ( + + + + ); +}; + +const CheckIcon = () => { + return ( + + + + ); +}; + +const GoldenEdition = ({ onClose }) => { + useEffect(() => { + const anonymousId = getAnonymousTrackingId(); + const client = getPosthogClient(); + client.capture({ + distinctId: anonymousId, + event: 'golden-edition-modal-opened', + properties: { + os: platformLib.os.family + } + }); + }, []); + + const goldenEditionBuyClick = () => { + const anonymousId = getAnonymousTrackingId(); + const client = getPosthogClient(); + client.capture({ + distinctId: anonymousId, + event: 'golden-edition-buy-clicked', + properties: { + os: platformLib.os.family + } + }); + }; + + const goldenEditon = [ + 'Inbuilt Bru File Explorer', + 'Visual Git (Like Gitlens for Vscode)', + 'GRPC, Websocket, SocketIO, MQTT', + 'Intergration with Secret Managers', + 'Load Data from File for Collection Run', + 'Developer Tools', + 'OpenAPI Designer', + 'Performance/Load Testing', + 'Inbuilt Terminal', + 'Custom Themes' + ]; + + const [pricingOption, setPricingOption] = useState('individuals'); + + const handlePricingOptionChange = (option) => { + setPricingOption(option); + }; + + return ( + + +
+
+

Golden Edition

+ { + goldenEditionBuyClick(); + window.open('https://www.usebruno.com/pricing', '_blank'); + }} + target="_blank" + className="flex text-white bg-yellow-600 hover:bg-yellow-700 font-medium rounded-lg text-sm px-4 py-2 text-center cursor-pointer" + > + {' '} + {pricingOption === 'individuals' ? 'Buy' : 'Subscribe'} + +
+ {pricingOption === 'individuals' ? ( +
+
+ $19 +
+

One Time Payment

+

perpetual license for 2 devices, with 2 years of updates

+
+ ) : ( +
+
+ $2 +
+

/user/month

+
+ )} +
+
handlePricingOptionChange('individuals')} + > + Individuals +
+
handlePricingOptionChange('organizations')} + > + Organizations +
+
+
    +
  • + + Support Bruno's Development +
    • + {goldenEditon.map((item, index) => ( +
  • + + {item} +
    • + ))} +
+
+ + + ); +}; + +export default GoldenEdition; diff --git a/packages/bruno-app/src/components/Sidebar/index.js b/packages/bruno-app/src/components/Sidebar/index.js index 462c22a9..1fce1845 100644 --- a/packages/bruno-app/src/components/Sidebar/index.js +++ b/packages/bruno-app/src/components/Sidebar/index.js @@ -4,19 +4,21 @@ import StyledWrapper from './StyledWrapper'; import GitHubButton from 'react-github-btn'; import Preferences from 'components/Preferences'; import Cookies from 'components/Cookies'; +import GoldenEdition from './GoldenEdition'; import { useState, useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; -import { IconSettings, IconCookie } from '@tabler/icons'; +import { IconSettings, IconCookie, IconHeart } from '@tabler/icons'; import { updateLeftSidebarWidth, updateIsDragging, showPreferences } from 'providers/ReduxStore/slices/app'; import { useTheme } from 'providers/Theme'; -const MIN_LEFT_SIDEBAR_WIDTH = 222; +const MIN_LEFT_SIDEBAR_WIDTH = 221; const MAX_LEFT_SIDEBAR_WIDTH = 600; const Sidebar = () => { const leftSidebarWidth = useSelector((state) => state.app.leftSidebarWidth); const preferencesOpen = useSelector((state) => state.app.showPreferences); + const [goldenEditonOpen, setGoldenEditonOpen] = useState(false); const [asideWidth, setAsideWidth] = useState(leftSidebarWidth); const [cookiesOpen, setCookiesOpen] = useState(false); @@ -79,6 +81,7 @@ const Sidebar = () => { return (