From 21150a21c4056895982e5a1853d62db6d2f163f6 Mon Sep 17 00:00:00 2001 From: AykutSarac Date: Tue, 23 May 2023 15:35:03 +0300 Subject: [PATCH] update payment flow --- .env.development | 3 +- .env.production | 3 +- src/components/CarbonAds/index.tsx | 2 +- src/components/Graph/PremiumView.tsx | 3 +- src/components/Graph/index.tsx | 2 +- src/constants/data.ts | 3 +- src/containers/Editor/BottomBar.tsx | 2 +- src/containers/Editor/LiveEditor/Tools.tsx | 2 +- src/containers/Modals/AccountModal/index.tsx | 9 ++--- src/containers/Modals/CloudModal/index.tsx | 2 +- src/containers/Modals/NodeModal/index.tsx | 2 +- src/containers/Modals/PremiumModal/index.tsx | 3 +- src/layout/Navbar/index.tsx | 5 ++- src/store/useUser.ts | 41 +++++++------------- 14 files changed, 37 insertions(+), 45 deletions(-) diff --git a/.env.development b/.env.development index ced98e3..80f5cf4 100644 --- a/.env.development +++ b/.env.development @@ -1,3 +1,4 @@ NEXT_PUBLIC_BASE_URL=http://localhost:3000 NEXT_PUBLIC_ALTOGIC_ENV_URL=https://jsoncrack.c5-na.altogic.com -NEXT_PUBLIC_ALTOGIC_CLIENT_KEY=f1e92022789f4ccf91273a345ab2bdf8 \ No newline at end of file +NEXT_PUBLIC_ALTOGIC_CLIENT_KEY=f1e92022789f4ccf91273a345ab2bdf8 +NEXT_PUBLIC_PAYMENT_URL=https://herowand.lemonsqueezy.com/checkout/buy/ce30521f-c7cc-44f3-9435-995d3260ba22 \ No newline at end of file diff --git a/.env.production b/.env.production index 4ddc3e1..e22c2a8 100644 --- a/.env.production +++ b/.env.production @@ -1,3 +1,4 @@ NEXT_PUBLIC_BASE_URL=https://jsoncrack.com NEXT_PUBLIC_ALTOGIC_ENV_URL=https://jsoncrack.c5-na.altogic.com -NEXT_PUBLIC_ALTOGIC_CLIENT_KEY=f1e92022789f4ccf91273a345ab2bdf8 \ No newline at end of file +NEXT_PUBLIC_ALTOGIC_CLIENT_KEY=f1e92022789f4ccf91273a345ab2bdf8 +NEXT_PUBLIC_PAYMENT_URL=https://herowand.lemonsqueezy.com/checkout/buy/ce30521f-c7cc-44f3-9435-995d3260ba22 \ No newline at end of file diff --git a/src/components/CarbonAds/index.tsx b/src/components/CarbonAds/index.tsx index fe50f62..5df011c 100644 --- a/src/components/CarbonAds/index.tsx +++ b/src/components/CarbonAds/index.tsx @@ -3,7 +3,7 @@ import useUser from "src/store/useUser"; export const CarbonAds = () => { const ref = React.useRef(null!); - const premium = useUser(state => state.isPremium()); + const premium = useUser(state => state.premium); React.useEffect(() => { if (!premium) { diff --git a/src/components/Graph/PremiumView.tsx b/src/components/Graph/PremiumView.tsx index 8485473..1bc5d78 100644 --- a/src/components/Graph/PremiumView.tsx +++ b/src/components/Graph/PremiumView.tsx @@ -2,6 +2,7 @@ import React from "react"; import styled from "styled-components"; import { Badge, Button, Image, List, ThemeIcon, Title } from "@mantine/core"; import { BsCheck } from "react-icons/bs"; +import { paymentURL } from "src/constants/data"; const StyledPremiumView = styled.div` position: relative; @@ -185,7 +186,7 @@ export const PremiumView = () => ( component="a" variant="gradient" gradient={{ from: "blue", to: "teal" }} - href="https://www.patreon.com/join/herowand/checkout?rid=8549056" + href={paymentURL} target="_blank" > UPGRADE TO PREMIUM $5.00 diff --git a/src/components/Graph/index.tsx b/src/components/Graph/index.tsx index 0da0df0..81de5e4 100644 --- a/src/components/Graph/index.tsx +++ b/src/components/Graph/index.tsx @@ -59,7 +59,7 @@ const StyledEditorWrapper = styled.div<{ widget: boolean }>` export const Graph = ({ isWidget = false }: GraphProps) => { const { validateHiddenNodes } = useToggleHide(); - const isPremium = useUser(state => state.isPremium()); + const isPremium = useUser(state => state.premium); const setLoading = useGraph(state => state.setLoading); const setZoomPanPinch = useGraph(state => state.setZoomPanPinch); const centerView = useGraph(state => state.centerView); diff --git a/src/constants/data.ts b/src/constants/data.ts index 22734a5..d2a2e71 100644 --- a/src/constants/data.ts +++ b/src/constants/data.ts @@ -1,4 +1,5 @@ -export const baseURL = process.env.NEXT_PUBLIC_BASE_URL; +export const baseURL = process.env.NEXT_PUBLIC_BASE_URL as string; +export const paymentURL = process.env.NEXT_PUBLIC_PAYMENT_URL as string; // Example taken from https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json const sampleJson = Object.freeze({ diff --git a/src/containers/Editor/BottomBar.tsx b/src/containers/Editor/BottomBar.tsx index 5dddb08..351e508 100644 --- a/src/containers/Editor/BottomBar.tsx +++ b/src/containers/Editor/BottomBar.tsx @@ -84,7 +84,7 @@ export const BottomBar = () => { const { query } = useRouter(); const data = useFile(state => state.fileData); const user = useUser(state => state.user); - const premium = useUser(state => state.isPremium()); + const premium = useUser(state => state.premium); const lightmode = useStored(state => state.lightmode); const hasChanges = useFile(state => state.hasChanges); const hasErrors = useFile(state => state.hasError); diff --git a/src/containers/Editor/LiveEditor/Tools.tsx b/src/containers/Editor/LiveEditor/Tools.tsx index ac26fb1..e5268da 100644 --- a/src/containers/Editor/LiveEditor/Tools.tsx +++ b/src/containers/Editor/LiveEditor/Tools.tsx @@ -103,7 +103,7 @@ export const Tools: React.FC<{ isWidget?: boolean }> = ({ isWidget = false }) => const expandGraph = useGraph(state => state.expandGraph); const collapseGraph = useGraph(state => state.collapseGraph); const lightmode = useStored(state => state.lightmode); - const premium = useUser(state => state.isPremium()); + const premium = useUser(state => state.premium); const CoreKey = navigator.userAgent.indexOf("Mac OS X") ? "⌘" : "CTRL"; diff --git a/src/containers/Modals/AccountModal/index.tsx b/src/containers/Modals/AccountModal/index.tsx index 9c709da..c0dc071 100644 --- a/src/containers/Modals/AccountModal/index.tsx +++ b/src/containers/Modals/AccountModal/index.tsx @@ -2,6 +2,7 @@ import React from "react"; import styled from "styled-components"; import { Modal, Group, Button, Badge, Avatar, Grid, Divider, ModalProps } from "@mantine/core"; import { IoRocketSharp } from "react-icons/io5"; +import { paymentURL } from "src/constants/data"; import useModal from "src/store/useModal"; import useUser from "src/store/useUser"; @@ -45,7 +46,7 @@ const StyledContainer = styled.div` export const AccountModal: React.FC = ({ opened, onClose }) => { const setVisible = useModal(state => state.setVisible); const user = useUser(state => state.user); - const isPremium = useUser(state => state.isPremium()); + const isPremium = useUser(state => state.premium); const logout = useUser(state => state.logout); return ( @@ -93,11 +94,7 @@ export const AccountModal: React.FC = ({ opened, onClose }) => { {isPremium ? ( - ) : ( diff --git a/src/containers/Modals/CloudModal/index.tsx b/src/containers/Modals/CloudModal/index.tsx index 983402b..969148f 100644 --- a/src/containers/Modals/CloudModal/index.tsx +++ b/src/containers/Modals/CloudModal/index.tsx @@ -165,7 +165,7 @@ const GraphCard: React.FC<{ data: File; refetch: () => void; active: boolean }> const CreateCard: React.FC<{ reachedLimit: boolean }> = ({ reachedLimit }) => { const { replace } = useRouter(); - const isPremium = useUser(state => state.isPremium()); + const isPremium = useUser(state => state.premium); const getContents = useFile(state => state.getContents); const setHasChanges = useFile(state => state.setHasChanges); const setVisible = useModal(state => state.setVisible); diff --git a/src/containers/Modals/NodeModal/index.tsx b/src/containers/Modals/NodeModal/index.tsx index ae6174e..7f31c5d 100644 --- a/src/containers/Modals/NodeModal/index.tsx +++ b/src/containers/Modals/NodeModal/index.tsx @@ -47,7 +47,7 @@ const CodeBlock: React.FC<{ children: any; [key: string]: any }> = ({ }; export const NodeModal: React.FC = ({ opened, onClose }) => { - const isPremium = useUser(state => state.isPremium()); + const isPremium = useUser(state => state.premium); const editContents = useFile(state => state.editContents); const setVisible = useModal(state => state.setVisible); const lightmode = useStored(state => (state.lightmode ? "light" : "vs-dark")); diff --git a/src/containers/Modals/PremiumModal/index.tsx b/src/containers/Modals/PremiumModal/index.tsx index 6c78064..0655f04 100644 --- a/src/containers/Modals/PremiumModal/index.tsx +++ b/src/containers/Modals/PremiumModal/index.tsx @@ -13,6 +13,7 @@ import { Badge, } from "@mantine/core"; import { BsCheck } from "react-icons/bs"; +import { paymentURL } from "src/constants/data"; export const PremiumModal: React.FC = ({ opened, onClose }) => { return ( @@ -52,7 +53,7 @@ export const PremiumModal: React.FC = ({ opened, onClose }) => {