mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-27 15:22:56 +08:00
feat: all remove premium states
This commit is contained in:
AykutSarac
parent
62d1dc98ad
commit
52bb4ce4c3
@ -16,10 +16,6 @@ import useUser from "src/store/useUser";
|
||||
|
||||
export const AccountModal: React.FC<ModalProps> = ({ opened, onClose }) => {
|
||||
const user = useUser(state => state.user);
|
||||
const isPremium = useUser(state => state.premium);
|
||||
const isOrg = useUser(state => state.organization);
|
||||
const isOrgAdmin = useUser(state => state.orgAdmin);
|
||||
const premiumCancelled = useUser(state => state.premiumCancelled);
|
||||
const setVisible = useModal(state => state.setVisible);
|
||||
const logout = useUser(state => state.logout);
|
||||
|
||||
@ -48,12 +44,11 @@ export const AccountModal: React.FC<ModalProps> = ({ opened, onClose }) => {
|
||||
<Text fz="xs" c="dimmed">
|
||||
<Badge
|
||||
size="sm"
|
||||
variant={isPremium ? "gradient" : "dot"}
|
||||
color={premiumCancelled || !isPremium ? "dark" : "green"}
|
||||
variant="dot"
|
||||
color="dark"
|
||||
gradient={{ from: "#8800fe", to: "#ff00cc", deg: 35 }}
|
||||
>
|
||||
{isPremium ? "Premium" : "Free"}{" "}
|
||||
{premiumCancelled ? "(Cancelled)" : isOrg && "(Organization)"}
|
||||
Free
|
||||
</Badge>
|
||||
</Text>
|
||||
</Group>
|
||||
@ -63,28 +58,14 @@ export const AccountModal: React.FC<ModalProps> = ({ opened, onClose }) => {
|
||||
|
||||
<Divider py="xs" />
|
||||
<Group justify="right">
|
||||
{isPremium && !premiumCancelled ? (
|
||||
<Button
|
||||
variant="light"
|
||||
color="red"
|
||||
onClick={() => {
|
||||
setVisible("cancelPremium")(true);
|
||||
onClose();
|
||||
}}
|
||||
disabled={isOrg && !isOrgAdmin}
|
||||
>
|
||||
Cancel Subscription
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="gradient"
|
||||
gradient={{ from: "teal", to: "lime", deg: 105 }}
|
||||
leftSection={<IoRocketSharp />}
|
||||
onClick={() => setVisible("premium")(true)}
|
||||
>
|
||||
UPGRADE TO PREMIUM!
|
||||
Upgrade to Premium
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
color="red"
|
||||
onClick={() => {
|
||||
|
||||
@ -33,7 +33,6 @@ import { VscAdd, VscEdit, VscLock, VscUnlock } from "react-icons/vsc";
|
||||
import { FileFormat } from "src/enums/file.enum";
|
||||
import { documentSvc } from "src/services/document.service";
|
||||
import useFile, { File } from "src/store/useFile";
|
||||
import useUser from "src/store/useUser";
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
@ -86,9 +85,9 @@ const UpdateNameModal: React.FC<{
|
||||
);
|
||||
};
|
||||
|
||||
const TOTAL_QUOTA = 25;
|
||||
|
||||
export const CloudModal: React.FC<ModalProps> = ({ opened, onClose }) => {
|
||||
const totalQuota = useUser(state => (state.premium ? 200 : 25));
|
||||
const isPremium = useUser(state => state.premium);
|
||||
const getContents = useFile(state => state.getContents);
|
||||
const setHasChanges = useFile(state => state.setHasChanges);
|
||||
const getFormat = useFile(state => state.getFormat);
|
||||
@ -101,8 +100,8 @@ export const CloudModal: React.FC<ModalProps> = ({ opened, onClose }) => {
|
||||
|
||||
const isCreateDisabled = React.useMemo(() => {
|
||||
if (!data?.length) return false;
|
||||
return isPremium ? data.length >= 200 : data.length >= 25;
|
||||
}, [isPremium, data?.length]);
|
||||
return data.length >= TOTAL_QUOTA;
|
||||
}, [data?.length]);
|
||||
|
||||
const onCreate = async () => {
|
||||
try {
|
||||
@ -227,8 +226,8 @@ export const CloudModal: React.FC<ModalProps> = ({ opened, onClose }) => {
|
||||
thickness={6}
|
||||
sections={[
|
||||
{
|
||||
value: (data.length * 100) / totalQuota,
|
||||
color: data.length > totalQuota / 1.5 ? "red" : "blue",
|
||||
value: (data.length * 100) / TOTAL_QUOTA,
|
||||
color: data.length > TOTAL_QUOTA / 1.5 ? "red" : "blue",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -237,7 +236,7 @@ export const CloudModal: React.FC<ModalProps> = ({ opened, onClose }) => {
|
||||
Total Quota
|
||||
</Text>
|
||||
<Text fw={700} size="lg">
|
||||
{data.length} / {totalQuota}
|
||||
{data.length} / {TOTAL_QUOTA}
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
|
||||
@ -1,17 +1,15 @@
|
||||
import React from "react";
|
||||
import { Badge, Flex, Group, Indicator, Select, Text } from "@mantine/core";
|
||||
import { Flex, Group, Indicator, Select, Text } from "@mantine/core";
|
||||
import { useSessionStorage } from "@mantine/hooks";
|
||||
import toast from "react-hot-toast";
|
||||
import { AiOutlineFullscreen } from "react-icons/ai";
|
||||
import { AiFillGift } from "react-icons/ai";
|
||||
import { BsBoxArrowUpLeft } from "react-icons/bs";
|
||||
import { FiDownload } from "react-icons/fi";
|
||||
import { SearchInput } from "src/components/SearchInput";
|
||||
import { FileFormat } from "src/enums/file.enum";
|
||||
import { JSONCrackLogo } from "src/layout/JsonCrackLogo";
|
||||
import useFile from "src/store/useFile";
|
||||
import useModal from "src/store/useModal";
|
||||
import useUser from "src/store/useUser";
|
||||
import { AccountMenu } from "./AccountMenu";
|
||||
import { FileMenu } from "./FileMenu";
|
||||
import { Logo } from "./Logo";
|
||||
@ -35,7 +33,6 @@ export const Toolbar: React.FC<{ isWidget?: boolean }> = ({ isWidget = false })
|
||||
const setVisible = useModal(state => state.setVisible);
|
||||
const setFormat = useFile(state => state.setFormat);
|
||||
const format = useFile(state => state.format);
|
||||
const premium = useUser(state => state.premium);
|
||||
const [seenPremium, setSeenPremium] = useSessionStorage({
|
||||
key: "seenPremium",
|
||||
defaultValue: false,
|
||||
@ -78,7 +75,7 @@ export const Toolbar: React.FC<{ isWidget?: boolean }> = ({ isWidget = false })
|
||||
</Group>
|
||||
)}
|
||||
<Group gap="xs" justify="right" w="100%" style={{ flexWrap: "nowrap" }}>
|
||||
{!premium && !isWidget && (
|
||||
{!isWidget && (
|
||||
<Styles.StyledToolElement
|
||||
onClick={() => {
|
||||
setSeenPremium(true);
|
||||
@ -106,26 +103,6 @@ export const Toolbar: React.FC<{ isWidget?: boolean }> = ({ isWidget = false })
|
||||
</Styles.StyledToolElement>
|
||||
)}
|
||||
|
||||
{premium && !isWidget && (
|
||||
<a href="https://app.jsoncrack.com/sign-in">
|
||||
<Styles.StyledToolElement>
|
||||
<Text
|
||||
display="flex"
|
||||
c="teal"
|
||||
fz="xs"
|
||||
fw={600}
|
||||
style={{ textAlign: "center", gap: 8, alignItems: "center" }}
|
||||
>
|
||||
<BsBoxArrowUpLeft />
|
||||
Premium editor has moved!
|
||||
<Badge size="xs" variant="light" color="teal">
|
||||
New
|
||||
</Badge>
|
||||
</Text>
|
||||
</Styles.StyledToolElement>
|
||||
</a>
|
||||
)}
|
||||
|
||||
<SearchInput />
|
||||
{!isWidget && (
|
||||
<>
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import styled from "styled-components";
|
||||
import useUser from "src/store/useUser";
|
||||
import { JSONCrackLogo } from "../JsonCrackLogo";
|
||||
|
||||
const StyledNavbarWrapper = styled.div`
|
||||
@ -36,10 +34,6 @@ const Right = styled.div`
|
||||
`;
|
||||
|
||||
export const Navbar = () => {
|
||||
const hasSession = useUser(state => !!state.user);
|
||||
const premium = useUser(state => state.premium);
|
||||
const [opened, { toggle }] = useDisclosure();
|
||||
|
||||
return (
|
||||
<StyledNavbarWrapper className="navbar">
|
||||
<StyledNavbar>
|
||||
@ -100,7 +94,7 @@ export const Navbar = () => {
|
||||
<Button
|
||||
component={Link}
|
||||
prefetch={false}
|
||||
href={premium ? "https://app.jsoncrack.com/editor" : "/editor"}
|
||||
href="/editor"
|
||||
color="dark"
|
||||
visibleFrom="sm"
|
||||
radius="xl"
|
||||
|
||||
@ -30,7 +30,6 @@ const initialStates: ModalState = {
|
||||
};
|
||||
|
||||
const authModals: Modal[] = ["cloud", "account"];
|
||||
const premiumModals: Modal[] = [];
|
||||
|
||||
const useModal = create<ModalState & ModalActions>()(set => ({
|
||||
...initialStates,
|
||||
@ -39,8 +38,6 @@ const useModal = create<ModalState & ModalActions>()(set => ({
|
||||
|
||||
if (authModals.includes(modal) && !user.isAuthenticated) {
|
||||
return set({ login: true });
|
||||
} else if (premiumModals.includes(modal) && !user.premium) {
|
||||
return set({ premium: true });
|
||||
}
|
||||
|
||||
if (visible) gaEvent("modal", `open ${modal}`);
|
||||
|
||||
@ -12,19 +12,11 @@ interface UserActions {
|
||||
interface UserStates {
|
||||
user: User | null;
|
||||
isAuthenticated: boolean;
|
||||
premium: boolean;
|
||||
premiumCancelled: boolean;
|
||||
organization: boolean;
|
||||
orgAdmin: boolean;
|
||||
}
|
||||
|
||||
const initialStates: UserStates = {
|
||||
user: null,
|
||||
isAuthenticated: false,
|
||||
premium: false,
|
||||
premiumCancelled: false,
|
||||
organization: false,
|
||||
orgAdmin: false,
|
||||
};
|
||||
|
||||
const useUser = create<UserStates & UserActions>()(set => ({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user