feat: support plus unavailable

packages/shared/src/components/plus/PlusDesktop.tsx

@@ -4,9 +4,11 @@ import { useRouter } from 'next/router';
 import { usePaymentContext } from '../../contexts/PaymentContext';
 
 import { PlusInfo } from './PlusInfo';
+import { PlusUnavailable } from './PlusUnavailable';
 
 export const PlusDesktop = (): ReactElement => {
-  const { openCheckout, paddle, productOptions } = usePaymentContext();
+  const { openCheckout, paddle, productOptions, isPlusAvailable } =
+    usePaymentContext();
   const {
     query: { selectedPlan },
   } = useRouter();
@@ -52,7 +54,9 @@ export const PlusDesktop = (): ReactElement => {
       <div
         ref={ref}
         className="checkout-container min-h-40 w-[28.5rem] rounded-16 border border-border-subtlest-tertiary bg-background-default p-5"
-      />
+      >
+        {!isPlusAvailable && <PlusUnavailable className="h-[35rem]" />}
+      </div>
     </div>
   );
 };

packages/shared/src/components/plus/PlusUnavailable.tsx

@@ -0,0 +1,36 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import { IconSize } from '../Icon';
+import { SourceIcon } from '../icons';
+import {
+  TypographyType,
+  TypographyColor,
+  Typography,
+} from '../typography/Typography';
+
+export type PlusUnavailableProps = {
+  className?: string;
+};
+
+export const PlusUnavailable = ({
+  className,
+}: PlusUnavailableProps): ReactElement => {
+  return (
+    <div
+      className={classNames(
+        'flex flex-1 flex-col items-center justify-center gap-4 text-center',
+        className,
+      )}
+    >
+      <SourceIcon size={IconSize.XXXLarge} />
+      <Typography
+        type={TypographyType.Callout}
+        bold
+        color={TypographyColor.Primary}
+      >
+        Unfortunately, this service is not available in your region.
+      </Typography>
+    </div>
+  );
+};

packages/shared/src/contexts/PaymentContext.tsx

@@ -16,7 +16,7 @@ import {
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import { useAuthContext } from './AuthContext';
-import { plusSuccessUrl } from '../lib/constants';
+import { invalidPlusRegions, plusSuccessUrl } from '../lib/constants';
 import { LogEvent } from '../lib/log';
 import { usePlusSubscription } from '../hooks';
 import { logPixelPayment } from '../components/Pixels';
@@ -38,9 +38,10 @@ export interface PaymentContextData {
   paddle?: Paddle | undefined;
   productOptions?: ProductOption[];
   earlyAdopterPlanId?: string | null;
+  isPlusAvailable: boolean;
 }
 
-const PaymentContext = React.createContext<PaymentContextData>({});
+const PaymentContext = React.createContext<PaymentContextData>(undefined);
 export default PaymentContext;
 
 export type PaymentContextProviderProps = {
@@ -58,6 +59,14 @@ export const PaymentContextProvider = ({
   const logRef = useRef<typeof logSubscriptionEvent>();
   logRef.current = logSubscriptionEvent;
 
+  const isPlusAvailable = useMemo(() => {
+    if (!geo?.region) {
+      return false;
+    }
+
+    return !invalidPlusRegions.includes(geo.region);
+  }, [geo?.region]);
+
   // Download and initialize Paddle instance from CDN
   useEffect(() => {
     const existingPaddleInstance = getPaddleInstance();
@@ -120,6 +129,10 @@ export const PaymentContextProvider = ({
 
   const openCheckout = useCallback(
     ({ priceId }: { priceId: string }) => {
+      if (!isPlusAvailable) {
+        return;
+      }
+
       paddle?.Checkout.open({
         items: [{ priceId, quantity: 1 }],
         customer: {
@@ -139,7 +152,7 @@ export const PaymentContextProvider = ({
         },
       });
     },
-    [paddle, user],
+    [paddle, user, isPlusAvailable],
   );
 
   const getPrices = useCallback(async () => {
@@ -194,8 +207,9 @@ export const PaymentContextProvider = ({
       paddle,
       productOptions,
       earlyAdopterPlanId,
+      isPlusAvailable,
     }),
-    [earlyAdopterPlanId, openCheckout, paddle, productOptions],
+    [earlyAdopterPlanId, openCheckout, paddle, productOptions, isPlusAvailable],
   );
 
   return (

packages/shared/src/lib/constants.ts

@@ -127,3 +127,15 @@ export const feedRangeFilters: RadioItemProps[] = [
 ];
 
 export const customFeedsPlusDate = new Date('2024-12-11');
+
+export const invalidPlusRegions = [
+  'CU',
+  'IR',
+  'MM',
+  'SD',
+  'SY',
+  'KP',
+  'BY',
+  'ZW',
+  'RU',
+];

packages/shared/src/lib/featureManagement.ts

@@ -34,8 +34,8 @@ const feature = {
   onboardingChecklist: new Feature('onboarding_checklist', true),
   showCodeSnippets: new Feature('show_code_snippets', false),
   pricingIds: new Feature('pricing_ids', {
-    pri_01jbsccbdbcwyhdy8hy3c2etyn: PlusPriceType.Monthly,
-    pri_01jbscda57910yvwjtyapnrrzc: PlusPriceType.Yearly,
+    pri_01jcdp5ef4yhv00p43hr2knrdg: PlusPriceType.Monthly,
+    pri_01jcdn6enr5ap3ekkddc6fv6tq: PlusPriceType.Yearly,
   }),
 };
 

packages/webapp/pages/plus/payment.tsx

@@ -6,11 +6,13 @@ import { useRouter } from 'next/router';
 import { useViewSize, ViewSize } from '@dailydotdev/shared/src/hooks';
 import { webappUrl } from '@dailydotdev/shared/src/lib/constants';
 import { NextSeo } from 'next-seo';
+import { PlusUnavailable } from '@dailydotdev/shared/src/components/plus/PlusUnavailable';
+
 import { getPlusLayout } from '../../components/layouts/PlusLayout/PlusLayout';
 
 const PlusPaymentPage = (): ReactElement => {
   const isLaptop = useViewSize(ViewSize.Laptop);
-  const { openCheckout } = usePaymentContext();
+  const { openCheckout, isPlusAvailable } = usePaymentContext();
   const router = useRouter();
   const { pid } = router.query;
 
@@ -36,7 +38,9 @@ const PlusPaymentPage = (): ReactElement => {
             openCheckout({ priceId: pid as string });
           }}
           className="checkout-container h-full w-full bg-background-default p-5"
-        />
+        >
+          {!isPlusAvailable && <PlusUnavailable className="h-full" />}
+        </div>
       </div>
     </>
   );