Skip to content

Commit e4fca8c

Browse files
authored
Feature/improve signup page (#336)
* Add popover message for basic plan * Improve login helper text * Add improved login page gif
1 parent 83bdec4 commit e4fca8c

File tree

2 files changed

+40
-10
lines changed

2 files changed

+40
-10
lines changed

web/src/components/common/App.tsx

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ import {
1616
MenuList,
1717
MenuItem,
1818
Portal,
19+
Popover,
20+
PopoverTrigger,
21+
PopoverContent,
22+
PopoverBody,
23+
PopoverArrow,
1924

2025
} from '@chakra-ui/react'
2126
import logo from '../../assets/img/logo.svg'
@@ -323,11 +328,32 @@ const AppLoggedIn = forwardRef((_props, ref) => {
323328
const isEnterpriseCustomer = useSelector((state: RootState) => state.billing.isEnterpriseCustomer)
324329
const drMode = useSelector((state: RootState) => state.settings.drMode)
325330
return (
326-
<HStack aria-label='mx-mode'>
331+
<HStack aria-label='mx-mode' justifyContent="space-between" width="100%">
327332
{ !(subscribed || isEnterpriseCustomer) && <Link href={"https://minusx.ai/pricing/"} isExternal display={"flex"} fontSize="xs" color="minusxGreen.800" fontWeight={"bold"} alignItems={"center"} title="A taste of what's possible. Great if you're just exploring MinusX to get a feel for the product. Switch to pro for an advanced experience." ><BiSolidLockAlt /> Basic Plan</Link> }
328333
{ subscribed && <Link href={"https://minusx.ai/pricing/"} isExternal display={"flex"} fontSize="xs" color="minusxGreen.800" fontWeight={"bold"} alignItems={"center"}><BiSolidStar /> Pro Plan</Link> }
329334
{isEnterpriseCustomer && <Link href={"https://minusx.ai/pricing/"} isExternal display={"flex"} fontSize="xs" color="minusxGreen.800" fontWeight={"bold"} alignItems={"center"}><BiSolidRocket /> Enterprise Plan</Link> }
330335
{/* { analystMode && <Text fontSize="xs" color="minusxGreen.800" fontWeight={"bold"}>[Explorer Agent]</Text> } */}
336+
{ !(subscribed || isEnterpriseCustomer) && (
337+
<Popover placement="bottom-end">
338+
<PopoverTrigger>
339+
<Link fontSize="xs" color="blue.500" fontWeight="medium" cursor="pointer" _hover={{ textDecoration: 'underline' }}>
340+
Get Free Credits
341+
</Link>
342+
</PopoverTrigger>
343+
<PopoverContent maxW="280px" p={2}>
344+
<PopoverArrow />
345+
<PopoverBody>
346+
<Text fontSize="xs">
347+
If you enjoy using MinusX, leave us a{' '}
348+
<Link href="https://minusx.ai/chrome-extension" color="blue.500" isExternal textDecoration="underline">
349+
review
350+
</Link>
351+
{' '}and send us a screenshot at reviews@minusx.ai to get a free trial of MinusX Pro!
352+
</Text>
353+
</PopoverBody>
354+
</PopoverContent>
355+
</Popover>
356+
)}
331357
</HStack>
332358
)
333359
}

web/src/components/common/Auth.tsx

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useRef, useEffect } from 'react';
2-
import { Button, Input, Box, VStack, Image, CloseButton, HStack, Text, Progress } from '@chakra-ui/react';
2+
import { Button, Input, Box, VStack, Image, CloseButton, HStack, Text, Progress, Badge } from '@chakra-ui/react';
33
import { Select, CreatableSelect } from "chakra-react-select";
44
import { login } from '../../state/auth/reducer'
55
import { dispatch, logoutState, resetState } from '../../state/dispatch'
@@ -57,7 +57,7 @@ const FeatureHighlightBubble = ({items}: {items: HighlightItem[]}) => {
5757
};
5858

5959
return (
60-
isVisibile && <Box position="absolute"
60+
isVisibile && <Box position="relative"
6161
top={items[hintIdx].top} aria-label='login-highlights'
6262
>
6363
{
@@ -78,8 +78,8 @@ const FeatureHighlightBubble = ({items}: {items: HighlightItem[]}) => {
7878

7979
<VStack
8080
borderRadius="md"
81-
p={4}
82-
mr={4}
81+
p={2}
82+
mr={2}
8383
position="relative"
8484
alignItems="flex-start"
8585
bg={"minusxBW.200"}
@@ -177,7 +177,11 @@ const Auth = () => {
177177
const [otp, setOTP] = useState("");
178178
const [discoverySource, setDiscoverySource] = useState("");
179179
const isOTPMode = authJWT ? true : false
180-
const helperMessage = useAppStore((state) => state.helperMessage)?.split('---')[1] || "Welcome to MinusX! You can ask us anything related to your data, and our agents will take care of the rest!"
180+
// const helperMessage = useAppStore((state) => state.helperMessage)?.split('---')[1] || "Welcome to MinusX! You can ask us anything related to your data, and our agents will take care of the rest!"
181+
const helperMessage = `Login to start talking to your dashboards, writing complex queries in minutes, and asking deeper questions about your business.
182+
183+
184+
![img](https://minusx.ai/app_assets/tutorial.gif)`
181185
const isEmbedded = getParsedIframeInfo().isEmbedded as unknown === 'true'
182186

183187

@@ -286,13 +290,13 @@ const Auth = () => {
286290
{
287291
content: (
288292
<>
289-
<Box fontWeight="bold" color={'minusxGreen.600'}>Welcome to MinusX</Box>
293+
<Box fontWeight="bold" color={'minusxGreen.600'}>Welcome to MinusX AI</Box>
290294
<VStack>
291295
<Markdown content={helperMessage}/>
292296
</VStack>
293297
</>
294298
),
295-
top: "50%",
299+
top: "10%",
296300
arrow: false,
297301
duration: 200,
298302
},
@@ -308,7 +312,7 @@ const Auth = () => {
308312
</VStack>
309313
</>
310314
),
311-
top: "50%",
315+
top: "10%",
312316
arrow: false,
313317
duration: 50,
314318
},
@@ -323,7 +327,7 @@ const Auth = () => {
323327
</VStack>
324328
</>
325329
),
326-
top: "50%",
330+
top: "10%",
327331
arrow: true,
328332
duration: 50,
329333
}

0 commit comments

Comments
 (0)