From 243e9f8d9c8828101c366ce6cd7869ee93fa0beb Mon Sep 17 00:00:00 2001
From: Flavien Bonvin <flavien.bonvin@proton.ch>
Date: Tue, 19 Nov 2024 18:16:35 +0000
Subject: [PATCH] Allow payment in the calendar web application

---
 .../app/components/eventModal/inputs/EventColorSelect.tsx  |  8 ++++++--
 .../components/upsell/modal/types/ZoomUpsellModal.tsx      |  9 ++++++++-
 packages/components/components/upsell/useUpsellConfig.ts   | 14 ++++++++++----
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/applications/calendar/src/app/components/eventModal/inputs/EventColorSelect.tsx b/applications/calendar/src/app/components/eventModal/inputs/EventColorSelect.tsx
index ee7b11a3ef..94ebf2a8c9 100644
--- a/applications/calendar/src/app/components/eventModal/inputs/EventColorSelect.tsx
+++ b/applications/calendar/src/app/components/eventModal/inputs/EventColorSelect.tsx
@@ -18,6 +18,7 @@ import {
 import useOneDollarConfig from '@proton/components/components/upsell/useOneDollarPromo';
 import { FeatureCode } from '@proton/features';
 import { APPS, APP_UPSELL_REF_PATH, CALENDAR_UPSELL_PATHS, UPSELL_COMPONENT } from '@proton/shared/lib/constants';
+import { getIsIframe } from '@proton/shared/lib/helpers/browser';
 import { getUpsellRef, useNewUpsellModalVariant } from '@proton/shared/lib/helpers/upsell';
 import type { EventModel } from '@proton/shared/lib/interfaces/calendar';
 import paintImg from '@proton/styles/assets/img/illustrations/new-upsells-img/paint.svg';
@@ -32,7 +33,9 @@ interface Props {
 const EventColorSelect = ({ model, setModel, isSmallViewport, isDrawerApp }: Props) => {
     const [user] = useUser();
     const hasPaidMail = user.hasPaidMail;
-    const { welcomeFlags: { isWelcomeFlow } } = useWelcomeFlags();
+    const {
+        welcomeFlags: { isWelcomeFlow },
+    } = useWelcomeFlags();
     const [upsellModalProps, setUpsellModal, renderUpsellModal] = useModalState();
     const color = useMemo(() => {
         // If free user, we always display the calendar color, otherwise we display the event color if set
@@ -73,8 +76,9 @@ const EventColorSelect = ({ model, setModel, isSmallViewport, isDrawerApp }: Pro
         feature: CALENDAR_UPSELL_PATHS.COLOR_PER_EVENT,
     });
 
+    const isIframe = getIsIframe();
     const oneDollarConfig = useOneDollarConfig();
-    const upsellConfig = useUpsellConfig({ upsellRef, ...oneDollarConfig });
+    const upsellConfig = useUpsellConfig({ upsellRef, preventInApp: isIframe, ...oneDollarConfig });
 
     const displayNewUpsellModalsVariant = useNewUpsellModalVariant();
 
diff --git a/packages/components/components/upsell/modal/types/ZoomUpsellModal.tsx b/packages/components/components/upsell/modal/types/ZoomUpsellModal.tsx
index e461cd7c53..dad2c2f35a 100644
--- a/packages/components/components/upsell/modal/types/ZoomUpsellModal.tsx
+++ b/packages/components/components/upsell/modal/types/ZoomUpsellModal.tsx
@@ -9,6 +9,7 @@ import {
     MAIL_UPSELL_PATHS,
     UPSELL_COMPONENT,
 } from '@proton/shared/lib/constants';
+import { getIsIframe } from '@proton/shared/lib/helpers/browser';
 import { getUpsellRef } from '@proton/shared/lib/helpers/upsell';
 import zoomUpsellSvg from '@proton/styles/assets/img/illustrations/upsell-zoom-header.svg';
 
@@ -24,8 +25,14 @@ const ZoomUpsellModal = ({ modalProps }: Props) => {
         component: UPSELL_COMPONENT.MODAL,
         feature: MAIL_UPSELL_PATHS.ZOOM_MEETING,
     });
+
+    const isIframe = getIsIframe();
     const oneDollarConfig = useOneDollarConfig();
-    const upsellConfig = useUpsellConfig({ upsellRef, ...oneDollarConfig });
+    const upsellConfig = useUpsellConfig({
+        upsellRef,
+        preventInApp: isIframe,
+        ...oneDollarConfig,
+    });
 
     return (
         <NewUpsellModal
diff --git a/packages/components/components/upsell/useUpsellConfig.ts b/packages/components/components/upsell/useUpsellConfig.ts
index bcef317c97..b0ed732c91 100644
--- a/packages/components/components/upsell/useUpsellConfig.ts
+++ b/packages/components/components/upsell/useUpsellConfig.ts
@@ -6,7 +6,7 @@ import { useHasInboxDesktopInAppPayments } from '@proton/components/containers/d
 import { useSubscriptionModal } from '@proton/components/containers/payments/subscription/SubscriptionModalProvider';
 import type { SUBSCRIPTION_STEPS } from '@proton/components/containers/payments/subscription/constants';
 import useConfig from '@proton/components/hooks/useConfig';
-import type { CYCLE } from '@proton/shared/lib/constants';
+import type { APP_NAMES, CYCLE } from '@proton/shared/lib/constants';
 import { APPS } from '@proton/shared/lib/constants';
 import { addUpsellPath, getUpgradePath } from '@proton/shared/lib/helpers/upsell';
 import { formatURLForAjaxRequest } from '@proton/shared/lib/helpers/url';
@@ -26,8 +26,14 @@ interface Props {
     submitText?: ReactNode;
     title?: ReactNode;
     footerText?: ReactNode;
+    /**
+     * Can be used to prevent the modal from being opened in the drawer
+     */
+    preventInApp?: boolean;
 }
 
+const appsWithInApp = new Set<APP_NAMES>([APPS.PROTONMAIL, APPS.PROTONACCOUNT, APPS.PROTONCALENDAR]);
+
 // Return config properties to inject in the subscription modal
 const useUpsellConfig = ({
     upsellRef,
@@ -39,6 +45,7 @@ const useUpsellConfig = ({
     footerText,
     title,
     onSubscribed,
+    preventInApp = false,
 }: Props): Partial<UpsellModalProps> & Required<Pick<UpsellModalProps, 'upgradePath'>> => {
     const [user] = useUser();
     const [subscription] = useSubscription();
@@ -47,10 +54,9 @@ const useUpsellConfig = ({
     const inboxUpsellFlowEnabled = useFlag('InboxUpsellFlow');
     const { APP_NAME } = useConfig();
     const hasInboxDesktopInAppPayments = useHasInboxDesktopInAppPayments();
-    const hasInAppPayments =
-        APP_NAME === APPS.PROTONACCOUNT || APP_NAME === APPS.PROTONMAIL || hasInboxDesktopInAppPayments;
+    const hasInAppPayments = appsWithInApp.has(APP_NAME) || hasInboxDesktopInAppPayments;
 
-    if (hasSubscriptionModal && hasInAppPayments && inboxUpsellFlowEnabled && upsellRef) {
+    if (hasSubscriptionModal && hasInAppPayments && inboxUpsellFlowEnabled && upsellRef && !preventInApp) {
         const subscriptionCallBackProps = getUpsellSubscriptionModalConfig({
             coupon,
             cycle,
-- 
2.11.4.GIT