From 20c7bbcfeccd7108c969adc06df4f5d2bda376b7 Mon Sep 17 00:00:00 2001 From: Denys Dovhan Date: Thu, 14 Nov 2024 15:47:45 +0200 Subject: [PATCH 01/13] feat: implement free trials for dashboard pages --- .../template/package.json.ejs | 1 + .../dashboard/components/premium-feature.tsx | 35 ++++++++++++++++++ .../template/src/dashboard/hooks/instance.ts | 37 +++++++++++++++++++ .../template/src/dashboard/pages/page.tsx | 14 +++++-- 4 files changed, 83 insertions(+), 4 deletions(-) create mode 100644 custom-products-catalog/template/src/dashboard/components/premium-feature.tsx create mode 100644 custom-products-catalog/template/src/dashboard/hooks/instance.ts diff --git a/custom-products-catalog/template/package.json.ejs b/custom-products-catalog/template/package.json.ejs index abaaf04..03cccac 100644 --- a/custom-products-catalog/template/package.json.ejs +++ b/custom-products-catalog/template/package.json.ejs @@ -5,6 +5,7 @@ to: package.json "name": "<%= packageName %>", "version": "1.0.0", "dependencies": { + "@wix/app-management": "^1.0.44", "@wix/dashboard-react": "^1.0.4", "@wix/design-system": "^1.111.0", "@wix/essentials": "^0.1.4", diff --git a/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx b/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx new file mode 100644 index 0000000..42bada1 --- /dev/null +++ b/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { FloatingHelper } from '@wix/design-system' +import { useFreeTrialAvailable, useIsFreeApp, useNavigateToPricingPage } from '../hooks/instance'; + +interface PremiumFeatureProps { + children: React.ReactNode; +} + +export function PremiumFeature({ children }: PremiumFeatureProps) { + const isFreeApp = useIsFreeApp(); + const isFreeTrialAvailable = useFreeTrialAvailable(); + const navigateToPricingPage = useNavigateToPricingPage(); + + if (isFreeApp && isFreeTrialAvailable) { + return ( + + } + /> + ); + } + + return <>{children}; +} \ No newline at end of file diff --git a/custom-products-catalog/template/src/dashboard/hooks/instance.ts b/custom-products-catalog/template/src/dashboard/hooks/instance.ts new file mode 100644 index 0000000..ced5b08 --- /dev/null +++ b/custom-products-catalog/template/src/dashboard/hooks/instance.ts @@ -0,0 +1,37 @@ +import { useCallback, useEffect, useState } from 'react'; +import { appInstances } from '@wix/app-management'; + +// FIXME: Pass APPID when app is generated +// const PRICING_PAGE_URL = 'https://www.wix.com/apps/upgrade/APPIDHERE?appInstanceId=INSTANCEIDHERE' +const getPricingPage = (instanceId: string) => `https://www.wix.com/apps/upgrade/78bbdae3-082c-4cac-8c06-f2e36fd175df?appInstanceId=${instanceId}` + +export function useAppInstance() { + const [appInstance, setAppInstance] = useState(); + + useEffect(() => { + appInstances.getAppInstance() + .then((appInstance) => setAppInstance(appInstance.instance)) + }, [setAppInstance]); + + return appInstance; +} + +export function useIsFreeApp(): boolean { + const appInstance = useAppInstance(); + return appInstance?.isFree ?? true; +} + +export function useFreeTrialAvailable(): boolean { + const appInstance = useAppInstance(); + return appInstance?.freeTrialAvailable ?? false; +} + +export function useNavigateToPricingPage(): () => void { + const appInstance = useAppInstance(); + + return useCallback(() => { + if (appInstance?.instanceId) { + window.open(getPricingPage(appInstance?.instanceId), "_blank"); + } + }, [appInstance?.instanceId]); +} \ No newline at end of file diff --git a/custom-products-catalog/template/src/dashboard/pages/page.tsx b/custom-products-catalog/template/src/dashboard/pages/page.tsx index 5febe22..3b77453 100644 --- a/custom-products-catalog/template/src/dashboard/pages/page.tsx +++ b/custom-products-catalog/template/src/dashboard/pages/page.tsx @@ -9,7 +9,9 @@ import '@wix/design-system/styles.global.css'; import { products } from '@wix/stores'; import { withProviders } from '../withProviders'; import { useCreateProduct, useDeleteProducts } from '../hooks/stores'; +import { useIsFreeApp } from '../hooks/instance'; import { CreateProductModal } from '../components/create-product'; +import { PremiumFeature } from '../components/premium-feature'; import { CollectionPage } from '@wix/patterns/page'; import { useTableCollection, @@ -46,6 +48,7 @@ const productTypeToDisplayName: { [key in products.ProductType]: string | undefi function Products() { const [shown, setShown] = useState(false); + const isFreeApp = useIsFreeApp(); const tableState = useTableCollection({ queryName: 'products-catalog', @@ -160,10 +163,13 @@ function Products() { /> } primaryAction={ - setShown(!shown)} - /> + + setShown(!shown)} + /> + } /> From 3cf34dbf357bb73f64fe3800c042794278b7d4da Mon Sep 17 00:00:00 2001 From: Denys Dovhan Date: Thu, 14 Nov 2024 15:56:57 +0200 Subject: [PATCH 02/13] fix: substitute appId --- .../template/src/dashboard/hooks/instance.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/custom-products-catalog/template/src/dashboard/hooks/instance.ts b/custom-products-catalog/template/src/dashboard/hooks/instance.ts index ced5b08..8f220ba 100644 --- a/custom-products-catalog/template/src/dashboard/hooks/instance.ts +++ b/custom-products-catalog/template/src/dashboard/hooks/instance.ts @@ -1,9 +1,15 @@ import { useCallback, useEffect, useState } from 'react'; import { appInstances } from '@wix/app-management'; -// FIXME: Pass APPID when app is generated -// const PRICING_PAGE_URL = 'https://www.wix.com/apps/upgrade/APPIDHERE?appInstanceId=INSTANCEIDHERE' -const getPricingPage = (instanceId: string) => `https://www.wix.com/apps/upgrade/78bbdae3-082c-4cac-8c06-f2e36fd175df?appInstanceId=${instanceId}` +/* + This is the URL to the pricing page of the app. + This url looks like this: + https://www.wix.com/apps/upgrade/APPIDHERE?appInstanceId=INSTANCEIDHERE + + You can find more information about this here: + https://dev.wix.com/docs/build-apps/launch-your-app/pricing-and-billing/set-up-a-freemium-business-model#step-4--create-an-upgrade-entry-point-to-your-pricing-page +*/ +const getPricingPage = (instanceId: string) => `https://www.wix.com/apps/upgrade/<%= devCenter.appId %>?appInstanceId=${instanceId}` export function useAppInstance() { const [appInstance, setAppInstance] = useState(); From c54a6ac084142132d907e00b1cca4cc20f805843 Mon Sep 17 00:00:00 2001 From: Denys Dovhan Date: Thu, 14 Nov 2024 16:00:25 +0200 Subject: [PATCH 03/13] style: add trailing new lines --- .../template/src/dashboard/components/premium-feature.tsx | 2 +- .../template/src/dashboard/hooks/instance.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx b/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx index 42bada1..591f882 100644 --- a/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx +++ b/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx @@ -32,4 +32,4 @@ export function PremiumFeature({ children }: PremiumFeatureProps) { } return <>{children}; -} \ No newline at end of file +} diff --git a/custom-products-catalog/template/src/dashboard/hooks/instance.ts b/custom-products-catalog/template/src/dashboard/hooks/instance.ts index 8f220ba..6d6e0a7 100644 --- a/custom-products-catalog/template/src/dashboard/hooks/instance.ts +++ b/custom-products-catalog/template/src/dashboard/hooks/instance.ts @@ -40,4 +40,4 @@ export function useNavigateToPricingPage(): () => void { window.open(getPricingPage(appInstance?.instanceId), "_blank"); } }, [appInstance?.instanceId]); -} \ No newline at end of file +} From 4dda79f8e5a893087ad6c8e09b0f0edb56c0eefe Mon Sep 17 00:00:00 2001 From: Denys Dovhan Date: Fri, 15 Nov 2024 19:51:43 +0200 Subject: [PATCH 04/13] feat: add paywall for mixpanel analytics --- mixpanel-analytics/template/package.json.ejs | 1 + .../src/dashboard/components/Paywall.tsx | 31 ++++++++++++++++ .../template/src/dashboard/hooks/instance.ts | 37 +++++++++++++++++++ .../template/src/dashboard/pages/page.tsx | 2 + 4 files changed, 71 insertions(+) create mode 100644 mixpanel-analytics/template/src/dashboard/components/Paywall.tsx create mode 100644 mixpanel-analytics/template/src/dashboard/hooks/instance.ts diff --git a/mixpanel-analytics/template/package.json.ejs b/mixpanel-analytics/template/package.json.ejs index 1965509..9115a40 100644 --- a/mixpanel-analytics/template/package.json.ejs +++ b/mixpanel-analytics/template/package.json.ejs @@ -6,6 +6,7 @@ to: package.json "version": "1.0.0", "dependencies": { "@tanstack/react-query": "^4.36.1", + "@wix/app-management": "^1.0.44", "@wix/app-management": "^1.0.0", "@wix/design-system": "^1.111.0", "@wix/essentials": "^0.1.4", diff --git a/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx b/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx new file mode 100644 index 0000000..50ebf4e --- /dev/null +++ b/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Modal, AnnouncementModalLayout, Text } from '@wix/design-system'; +import { useFreeTrialAvailable, useIsFreeApp, useNavigateToPricingPage } from '../hooks/instance'; + +export default function Paywall() { + const isFreeApp = useIsFreeApp(); + const isFreeTrialAvailable = useFreeTrialAvailable(); + const navigateToPricingPage = useNavigateToPricingPage(); + + if (isFreeApp && isFreeTrialAvailable) { + return ( + + + + You need a premium subscription to access this feature. Start your free trial now. + + + + ); + } + + return null; +} \ No newline at end of file diff --git a/mixpanel-analytics/template/src/dashboard/hooks/instance.ts b/mixpanel-analytics/template/src/dashboard/hooks/instance.ts new file mode 100644 index 0000000..a5a8104 --- /dev/null +++ b/mixpanel-analytics/template/src/dashboard/hooks/instance.ts @@ -0,0 +1,37 @@ +import { useCallback, useEffect, useState } from 'react'; +import { appInstances } from '@wix/app-management'; + +// FIXME: Pass APPID when app is generated +// const PRICING_PAGE_URL = 'https://www.wix.com/apps/upgrade/APPIDHERE?appInstanceId=INSTANCEIDHERE' +const getPricingPage = (instanceId: string) => `https://www.wix.com/apps/upgrade/<%= devCenter.appId %>?appInstanceId=${instanceId}` + +export function useAppInstance() { + const [appInstance, setAppInstance] = useState(); + + useEffect(() => { + appInstances.getAppInstance() + .then((appInstance) => setAppInstance(appInstance.instance)) + }, [setAppInstance]); + + return appInstance; +} + +export function useIsFreeApp(): boolean { + const appInstance = useAppInstance(); + return appInstance?.isFree ?? true; +} + +export function useFreeTrialAvailable(): boolean { + const appInstance = useAppInstance(); + return appInstance?.freeTrialAvailable ?? false; +} + +export function useNavigateToPricingPage(): () => void { + const appInstance = useAppInstance(); + + return useCallback(() => { + if (appInstance?.instanceId) { + window.open(getPricingPage(appInstance?.instanceId), "_blank"); + } + }, [appInstance?.instanceId]); +} diff --git a/mixpanel-analytics/template/src/dashboard/pages/page.tsx b/mixpanel-analytics/template/src/dashboard/pages/page.tsx index d046e89..d675a4c 100644 --- a/mixpanel-analytics/template/src/dashboard/pages/page.tsx +++ b/mixpanel-analytics/template/src/dashboard/pages/page.tsx @@ -3,6 +3,7 @@ import { Page, Card, Box, Text, TextButton } from '@wix/design-system'; import '@wix/design-system/styles.global.css'; import { withProviders } from '../withProviders'; import ProjectToken from '../components/ProjectToken.js'; +import Paywall from '../components/Paywall.js'; function MixpanelAnalytics() { return ( @@ -31,6 +32,7 @@ function MixpanelAnalytics() { + ); From 90f3d4e6ccd2ac945494ba7deb1a22166ea2d82a Mon Sep 17 00:00:00 2001 From: Denys Dovhan Date: Fri, 15 Nov 2024 19:53:02 +0200 Subject: [PATCH 05/13] style: add trailing new line --- .../template/src/dashboard/components/Paywall.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx b/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx index 50ebf4e..818bd1c 100644 --- a/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx +++ b/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx @@ -28,4 +28,4 @@ export default function Paywall() { } return null; -} \ No newline at end of file +} From 0e3d781c01fee3617e96dd4214c57090958cb136 Mon Sep 17 00:00:00 2001 From: Denys Dovhan Date: Fri, 15 Nov 2024 19:53:50 +0200 Subject: [PATCH 06/13] docs: add comment about pricing page --- .../template/src/dashboard/hooks/instance.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/mixpanel-analytics/template/src/dashboard/hooks/instance.ts b/mixpanel-analytics/template/src/dashboard/hooks/instance.ts index a5a8104..6d6e0a7 100644 --- a/mixpanel-analytics/template/src/dashboard/hooks/instance.ts +++ b/mixpanel-analytics/template/src/dashboard/hooks/instance.ts @@ -1,8 +1,14 @@ import { useCallback, useEffect, useState } from 'react'; import { appInstances } from '@wix/app-management'; -// FIXME: Pass APPID when app is generated -// const PRICING_PAGE_URL = 'https://www.wix.com/apps/upgrade/APPIDHERE?appInstanceId=INSTANCEIDHERE' +/* + This is the URL to the pricing page of the app. + This url looks like this: + https://www.wix.com/apps/upgrade/APPIDHERE?appInstanceId=INSTANCEIDHERE + + You can find more information about this here: + https://dev.wix.com/docs/build-apps/launch-your-app/pricing-and-billing/set-up-a-freemium-business-model#step-4--create-an-upgrade-entry-point-to-your-pricing-page +*/ const getPricingPage = (instanceId: string) => `https://www.wix.com/apps/upgrade/<%= devCenter.appId %>?appInstanceId=${instanceId}` export function useAppInstance() { From 4dbab0a80e31535df36bdcc1482d122ca18e90cc Mon Sep 17 00:00:00 2001 From: Denys Dovhan Date: Tue, 19 Nov 2024 17:45:31 +0200 Subject: [PATCH 07/13] Apply review fixes --- .../dashboard/components/premium-feature.tsx | 6 ++--- .../hooks/{instance.ts => instance.tsx} | 26 ++++++++++++++----- .../template/src/dashboard/withProviders.tsx | 5 +++- 3 files changed, 26 insertions(+), 11 deletions(-) rename custom-products-catalog/template/src/dashboard/hooks/{instance.ts => instance.tsx} (60%) diff --git a/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx b/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx index 591f882..62e3f31 100644 --- a/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx +++ b/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx @@ -15,15 +15,15 @@ export function PremiumFeature({ children }: PremiumFeatureProps) { return ( } diff --git a/custom-products-catalog/template/src/dashboard/hooks/instance.ts b/custom-products-catalog/template/src/dashboard/hooks/instance.tsx similarity index 60% rename from custom-products-catalog/template/src/dashboard/hooks/instance.ts rename to custom-products-catalog/template/src/dashboard/hooks/instance.tsx index 6d6e0a7..f97cca8 100644 --- a/custom-products-catalog/template/src/dashboard/hooks/instance.ts +++ b/custom-products-catalog/template/src/dashboard/hooks/instance.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useState } from 'react'; +import React, { createContext, useContext, useCallback, useEffect, useState } from 'react'; import { appInstances } from '@wix/app-management'; /* @@ -11,15 +11,27 @@ import { appInstances } from '@wix/app-management'; */ const getPricingPage = (instanceId: string) => `https://www.wix.com/apps/upgrade/<%= devCenter.appId %>?appInstanceId=${instanceId}` -export function useAppInstance() { +const AppInstanceContext = createContext(undefined); + +export function AppInstanceProvider({ children }: { children: React.ReactNode }) { const [appInstance, setAppInstance] = useState(); useEffect(() => { - appInstances.getAppInstance() - .then((appInstance) => setAppInstance(appInstance.instance)) - }, [setAppInstance]); + if (!appInstance) { + appInstances.getAppInstance() + .then((appInstance) => setAppInstance(appInstance.instance)) + } + }, [appInstance, setAppInstance]); + + return ( + + {children} + + ) +} - return appInstance; +export function useAppInstance(): appInstances.AppInstance | undefined { + return useContext(AppInstanceContext); } export function useIsFreeApp(): boolean { @@ -37,7 +49,7 @@ export function useNavigateToPricingPage(): () => void { return useCallback(() => { if (appInstance?.instanceId) { - window.open(getPricingPage(appInstance?.instanceId), "_blank"); + window.open(getPricingPage(appInstance?.instanceId), '_blank'); } }, [appInstance?.instanceId]); } diff --git a/custom-products-catalog/template/src/dashboard/withProviders.tsx b/custom-products-catalog/template/src/dashboard/withProviders.tsx index cc6daa4..abbc243 100644 --- a/custom-products-catalog/template/src/dashboard/withProviders.tsx +++ b/custom-products-catalog/template/src/dashboard/withProviders.tsx @@ -3,6 +3,7 @@ import { WixDesignSystemProvider } from '@wix/design-system'; import { withDashboard } from '@wix/dashboard-react'; import { WixPatternsProvider } from '@wix/patterns/provider'; import { i18n } from '@wix/essentials'; +import { AppInstanceProvider } from './hooks/instance'; export function withProviders

(Component: React.FC

) { return withDashboard(function DashboardProviders(props: P) { @@ -10,7 +11,9 @@ export function withProviders

(Component: React.FC

) { return ( - + + + ); From 249829b4a16f3bb5f43933ff77f5179a2451f685 Mon Sep 17 00:00:00 2001 From: Denys Dovhan Date: Tue, 19 Nov 2024 18:11:31 +0200 Subject: [PATCH 08/13] Apply review fixes --- .../hooks/{instance.ts => instance.tsx} | 26 ++++++++++++++----- .../template/src/dashboard/withProviders.tsx | 5 +++- 2 files changed, 23 insertions(+), 8 deletions(-) rename mixpanel-analytics/template/src/dashboard/hooks/{instance.ts => instance.tsx} (60%) diff --git a/mixpanel-analytics/template/src/dashboard/hooks/instance.ts b/mixpanel-analytics/template/src/dashboard/hooks/instance.tsx similarity index 60% rename from mixpanel-analytics/template/src/dashboard/hooks/instance.ts rename to mixpanel-analytics/template/src/dashboard/hooks/instance.tsx index 6d6e0a7..f97cca8 100644 --- a/mixpanel-analytics/template/src/dashboard/hooks/instance.ts +++ b/mixpanel-analytics/template/src/dashboard/hooks/instance.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useState } from 'react'; +import React, { createContext, useContext, useCallback, useEffect, useState } from 'react'; import { appInstances } from '@wix/app-management'; /* @@ -11,15 +11,27 @@ import { appInstances } from '@wix/app-management'; */ const getPricingPage = (instanceId: string) => `https://www.wix.com/apps/upgrade/<%= devCenter.appId %>?appInstanceId=${instanceId}` -export function useAppInstance() { +const AppInstanceContext = createContext(undefined); + +export function AppInstanceProvider({ children }: { children: React.ReactNode }) { const [appInstance, setAppInstance] = useState(); useEffect(() => { - appInstances.getAppInstance() - .then((appInstance) => setAppInstance(appInstance.instance)) - }, [setAppInstance]); + if (!appInstance) { + appInstances.getAppInstance() + .then((appInstance) => setAppInstance(appInstance.instance)) + } + }, [appInstance, setAppInstance]); + + return ( + + {children} + + ) +} - return appInstance; +export function useAppInstance(): appInstances.AppInstance | undefined { + return useContext(AppInstanceContext); } export function useIsFreeApp(): boolean { @@ -37,7 +49,7 @@ export function useNavigateToPricingPage(): () => void { return useCallback(() => { if (appInstance?.instanceId) { - window.open(getPricingPage(appInstance?.instanceId), "_blank"); + window.open(getPricingPage(appInstance?.instanceId), '_blank'); } }, [appInstance?.instanceId]); } diff --git a/mixpanel-analytics/template/src/dashboard/withProviders.tsx b/mixpanel-analytics/template/src/dashboard/withProviders.tsx index 28522b3..3e71809 100644 --- a/mixpanel-analytics/template/src/dashboard/withProviders.tsx +++ b/mixpanel-analytics/template/src/dashboard/withProviders.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { QueryClientProvider, QueryClient } from '@tanstack/react-query'; import { WixDesignSystemProvider } from '@wix/design-system'; import { i18n } from '@wix/essentials'; +import { AppInstanceProvider } from './hooks/instance'; const queryClient = new QueryClient(); @@ -11,7 +12,9 @@ export function withProviders

(Component: React.FC

) { return ( - + + + ); From 35609c3716dbf9e26630bf1fbb4f769aa73c7ea0 Mon Sep 17 00:00:00 2001 From: Denys Dovhan Date: Wed, 20 Nov 2024 15:22:30 +0200 Subject: [PATCH 09/13] refactor: useIsFreeApp -> useIsFree- --- .../template/src/dashboard/components/Paywall.tsx | 6 +++--- .../template/src/dashboard/hooks/instance.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx b/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx index 818bd1c..0284d55 100644 --- a/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx +++ b/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx @@ -1,13 +1,13 @@ import React from 'react'; import { Modal, AnnouncementModalLayout, Text } from '@wix/design-system'; -import { useFreeTrialAvailable, useIsFreeApp, useNavigateToPricingPage } from '../hooks/instance'; +import { useFreeTrialAvailable, useIsFree, useNavigateToPricingPage } from '../hooks/instance'; export default function Paywall() { - const isFreeApp = useIsFreeApp(); + const isFree = useIsFree(); const isFreeTrialAvailable = useFreeTrialAvailable(); const navigateToPricingPage = useNavigateToPricingPage(); - if (isFreeApp && isFreeTrialAvailable) { + if (isFree && isFreeTrialAvailable) { return ( Date: Wed, 20 Nov 2024 15:27:01 +0200 Subject: [PATCH 10/13] refactor: useIsFreeApp -> useIsFree --- .../template/src/dashboard/components/premium-feature.tsx | 6 +++--- .../template/src/dashboard/hooks/instance.tsx | 2 +- .../template/src/dashboard/pages/page.tsx | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx b/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx index 62e3f31..41a5078 100644 --- a/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx +++ b/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx @@ -1,17 +1,17 @@ import React from 'react'; import { FloatingHelper } from '@wix/design-system' -import { useFreeTrialAvailable, useIsFreeApp, useNavigateToPricingPage } from '../hooks/instance'; +import { useFreeTrialAvailable, useIsFree, useNavigateToPricingPage } from '../hooks/instance'; interface PremiumFeatureProps { children: React.ReactNode; } export function PremiumFeature({ children }: PremiumFeatureProps) { - const isFreeApp = useIsFreeApp(); + const isFree = useIsFree(); const isFreeTrialAvailable = useFreeTrialAvailable(); const navigateToPricingPage = useNavigateToPricingPage(); - if (isFreeApp && isFreeTrialAvailable) { + if (isFree && isFreeTrialAvailable) { return ( ({ queryName: 'products-catalog', @@ -165,7 +165,7 @@ function Products() { primaryAction={ setShown(!shown)} /> From e8536fe57c9b539d2595dec641dfc1ca55c61955 Mon Sep 17 00:00:00 2001 From: Denys Dovhan Date: Wed, 20 Nov 2024 15:49:28 +0200 Subject: [PATCH 11/13] style: fix indentation for premium feature --- .../dashboard/components/premium-feature.tsx | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx b/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx index 41a5078..11f6647 100644 --- a/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx +++ b/custom-products-catalog/template/src/dashboard/components/premium-feature.tsx @@ -3,33 +3,33 @@ import { FloatingHelper } from '@wix/design-system' import { useFreeTrialAvailable, useIsFree, useNavigateToPricingPage } from '../hooks/instance'; interface PremiumFeatureProps { - children: React.ReactNode; + children: React.ReactNode; } export function PremiumFeature({ children }: PremiumFeatureProps) { - const isFree = useIsFree(); - const isFreeTrialAvailable = useFreeTrialAvailable(); - const navigateToPricingPage = useNavigateToPricingPage(); + const isFree = useIsFree(); + const isFreeTrialAvailable = useFreeTrialAvailable(); + const navigateToPricingPage = useNavigateToPricingPage(); - if (isFree && isFreeTrialAvailable) { - return ( - - } - /> - ); - } + if (isFree && isFreeTrialAvailable) { + return ( + + } + /> + ); + } - return <>{children}; + return <>{children}; } From 28a7ea0d703e75d88dd198f95b16aef1906b1721 Mon Sep 17 00:00:00 2001 From: Denys Dovhan Date: Wed, 20 Nov 2024 16:07:22 +0200 Subject: [PATCH 12/13] refactor: Handle when trial is not available --- .../src/dashboard/components/Paywall.tsx | 31 +++++++++++++------ 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx b/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx index 0284d55..1092c6a 100644 --- a/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx +++ b/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Modal, AnnouncementModalLayout, Text } from '@wix/design-system'; +import { Modal, AnnouncementModalLayout, Text, AnnouncementModalLayoutProps } from '@wix/design-system'; import { useFreeTrialAvailable, useIsFree, useNavigateToPricingPage } from '../hooks/instance'; export default function Paywall() { @@ -7,20 +7,31 @@ export default function Paywall() { const isFreeTrialAvailable = useFreeTrialAvailable(); const navigateToPricingPage = useNavigateToPricingPage(); - if (isFree && isFreeTrialAvailable) { + const freeTrialModal: AnnouncementModalLayoutProps = { + title: 'Start your free trial', + primaryButtonText: 'Start Free Trial', + primaryButtonOnClick: navigateToPricingPage, + linkText: 'See all plans', + linkOnClick: navigateToPricingPage, + onCloseButtonClick: navigateToPricingPage, + }; + + const planRequiredModal: AnnouncementModalLayoutProps = { + title: 'You need a premium subscription', + primaryButtonText: 'Select your plan', + primaryButtonOnClick: navigateToPricingPage, + onCloseButtonClick: navigateToPricingPage, + }; + + if (isFree) { return ( - You need a premium subscription to access this feature. Start your free trial now. + You need a premium subscription to access this page. @@ -28,4 +39,4 @@ export default function Paywall() { } return null; -} +} \ No newline at end of file From 37c04d16b7ca7f0273b10395d5a8f88089b5ef1f Mon Sep 17 00:00:00 2001 From: Denys Dovhan Date: Wed, 20 Nov 2024 16:08:28 +0200 Subject: [PATCH 13/13] style: add tailing new line --- .../template/src/dashboard/components/Paywall.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx b/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx index 1092c6a..1c4ec49 100644 --- a/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx +++ b/mixpanel-analytics/template/src/dashboard/components/Paywall.tsx @@ -39,4 +39,4 @@ export default function Paywall() { } return null; -} \ No newline at end of file +}