release-20251028

.env.template

@@ -1,2 +1,2 @@
 REACT_APP_API_URL=https://dev.unguess.io/api
-REACT_APP_CROWD_WP_URL=https://dev.unguess.io
+REACT_APP_CROWD_WP_URL=https://dev.unguess.io

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@analytics/google-tag-manager": "^0.6.0",
+    "@analytics/hubspot": "^0.5.1",
     "@appquality/languages": "1.4.3",
     "@appquality/unguess-design-system": "4.0.50",
     "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
@@ -129,4 +130,4 @@
     "*.{tsx,ts,js,css,md}": "prettier --write"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
-}
+}

src/@types/analytics__hubspot/index.d.ts

@@ -0,0 +1,10 @@
+declare module '@analytics/hubspot' {
+  type AnalyticsPlugin = import('analytics').AnalyticsPlugin;
+
+  type HubspotConfig = {
+    portalId: string;
+  };
+
+  function hubspotPlugin(config: HubspotConfig): AnalyticsPlugin;
+  export default hubspotPlugin;
+}

src/analytics.ts

@@ -1,5 +1,6 @@
 import googleTagManager from '@analytics/google-tag-manager';
 import Analytics from 'analytics';
+import hubspotPlugin from '@analytics/hubspot';
 import userpilot from './common/analytics-plugins/userpilot';
 import { isDev } from './common/isDevEnvironment';
 
@@ -17,6 +18,9 @@ const analytics = Analytics({
       userpilot({
         token: 'NX-54e88e10',
       }),
+      hubspotPlugin({
+        portalId: isDev() ? '50612068' : '6087279',
+      }),
     ],
   }),
 });

src/hooks/usePlan.ts

@@ -98,7 +98,6 @@ const usePlan = (planId?: string) => {
       isFetching: isFetching || isCiFetching || isTemplateFetching,
       activeWorkspace,
       plan: undefined,
-      ...(hasCI ? { checkoutItem: ci } : {}),
       planComposedStatus,
     };
   }
@@ -107,10 +106,33 @@ const usePlan = (planId?: string) => {
     isLoading: isLoading || isCiLoading || isTemplateLoading,
     isFetching: isFetching || isCiFetching || isTemplateFetching,
     activeWorkspace,
-    plan: { ...plan, isPurchasable: hasCI },
-    ...(hasCI ? { checkoutItem: ci } : {}),
+    plan,
     planComposedStatus,
   };
 };
 
-export { usePlan };
+const usePlanIsDraft = (planId?: string) => {
+  const { planComposedStatus } = usePlan(planId);
+
+  const isDraft =
+    !!planComposedStatus &&
+    ['PurchasableDraft', 'UnquotedDraft', 'PrequotedDraft'].includes(
+      planComposedStatus
+    );
+
+  return isDraft;
+};
+
+const usePlanIsPurchasable = (planId?: string) => {
+  const { planComposedStatus } = usePlan(planId);
+
+  const isPurchasable =
+    !!planComposedStatus &&
+    ['PurchasableDraft', 'AwaitingPayment', 'PurchasedPlan', 'Paying'].includes(
+      planComposedStatus
+    );
+
+  return isPurchasable;
+};
+
+export { usePlan, usePlanIsDraft, usePlanIsPurchasable };

src/pages/Plan/Controls/ConfirmPlanButton.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { usePatchPlansByPidStatusMutation } from 'src/features/api';
-import { usePlan } from '../../../hooks/usePlan';
+import { usePlan, usePlanIsPurchasable } from '../../../hooks/usePlan';
 import { BuyButton } from '../summary/components/BuyButton';
 
 const ConfirmPlanButton = () => {
@@ -13,10 +13,11 @@ const ConfirmPlanButton = () => {
   const { planId } = useParams();
   const { plan, planComposedStatus } = usePlan(planId);
   const { t } = useTranslation();
+  const isPurchasable = usePlanIsPurchasable(planId);
 
   if (!plan) return null;
 
-  if (plan.isPurchasable) {
+  if (isPurchasable) {
     return <BuyButton />;
   }
 

src/pages/Plan/Controls/IconButtonMenu.tsx

@@ -9,8 +9,8 @@ import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { ReactComponent as SaveTemplateIcon } from 'src/assets/icons/template.svg';
 import { Divider } from 'src/common/components/divider';
+import { usePlan, usePlanIsDraft } from '../../../hooks/usePlan';
 import { usePlanContext } from '../context/planContext';
-import { usePlan } from '../../../hooks/usePlan';
 
 const OptionalTooltip = ({
   children,
@@ -36,7 +36,8 @@ const IconButtonMenu = () => {
 
   const { setIsSaveTemplateModalOpen, setIsDeleteModalOpen } = usePlanContext();
   const { planId } = useParams();
-  const { plan, planComposedStatus } = usePlan(planId);
+  const { planComposedStatus } = usePlan(planId);
+  const isDraft = usePlanIsDraft(planId);
 
   const handleMenuClick = (value?: string) => {
     if (value === 'delete') {
@@ -74,14 +75,14 @@ const IconButtonMenu = () => {
           </>
         )}
       <OptionalTooltip
-        show={plan?.status !== 'draft'}
+        show={!isDraft}
         content={t('__PLAN_DELETE_PLAN_TOOLTIP')}
       >
         <ButtonMenu.Item
           data-qa="delete-action-item"
           type="danger"
           value="delete"
-          isDisabled={plan?.status !== 'draft'}
+          isDisabled={!isDraft}
           icon={<TrashIcon />}
         >
           {t('__PLAN_DELETE_PLAN_CTA')}

src/pages/Plan/Controls/SaveConfigurationButton.tsx

@@ -7,8 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { useSubmit } from 'src/features/modules/useModuleConfiguration';
 import { useValidateForm } from 'src/features/planModules';
-import { getPlanStatus } from 'src/pages/Dashboard/hooks/getPlanStatus';
-import { usePlan } from '../../../hooks/usePlan';
+import { usePlan, usePlanIsDraft } from '../../../hooks/usePlan';
 
 const SaveConfigurationButton = () => {
   const { t } = useTranslation();
@@ -20,15 +19,10 @@ const SaveConfigurationButton = () => {
     useSubmit(planId || '');
 
   const { plan } = usePlan(planId);
+  const isDraft = usePlanIsDraft(planId);
 
   if (!plan) return null;
 
-  const { status } = getPlanStatus({
-    planStatus: plan.status,
-    quote: plan.quote,
-    t,
-  });
-
   const handleSaveConfiguration = async () => {
     validateForm();
     try {
@@ -65,7 +59,7 @@ const SaveConfigurationButton = () => {
     <Button
       type="button"
       size="small"
-      disabled={isSubmitting || status !== 'draft'}
+      disabled={isSubmitting || !isDraft}
       onClick={handleSaveConfiguration}
     >
       {t('__PLAN_SAVE_CONFIGURATION_CTA')}

src/pages/Plan/Controls/index.tsx

@@ -7,7 +7,7 @@ import { Pipe } from 'src/common/components/Pipe';
 import { useModule } from 'src/features/modules/useModule';
 import styled from 'styled-components';
 import { useSubmit } from '../../../features/modules/useModuleConfiguration';
-import { usePlan } from '../../../hooks/usePlan';
+import { usePlan, usePlanIsPurchasable } from '../../../hooks/usePlan';
 import { usePlanContext } from '../context/planContext';
 import { DateInThePastAlertModal } from '../modals/DateInThePastAlertModal';
 import { DeletePlanModal } from '../modals/DeletePlanModal';
@@ -37,6 +37,7 @@ export const Controls = () => {
   } = usePlanContext();
   const { planId } = useParams();
   const { plan, planComposedStatus } = usePlan(planId);
+  const isPurchasable = usePlanIsPurchasable(planId);
   const { value: titleValue } = useModule('title'); // to use the current changed title value (also if plan is not saved) in delete modal
   const { addToast } = useToast();
   const { handleSubmit } = useSubmit(planId || '');
@@ -108,7 +109,7 @@ export const Controls = () => {
 
       {isRequestQuotationModalOpen && (
         <SendRequestModal
-          isPurchasable={plan.isPurchasable}
+          isPurchasable={isPurchasable}
           onQuit={() => setRequestQuotationModalOpen(false)}
         />
       )}

src/pages/Plan/context/planContext.tsx

@@ -95,7 +95,6 @@ export const PlanProvider = ({ children }: { children: ReactNode }) => {
       }
     } catch (error) {
       setIsPaymentInProgress(false);
-      console.error(`Error while checkout process: ${error}`);
     }
   };
 

src/pages/Plan/modals/DateInThePastAlertModal.tsx

@@ -66,7 +66,7 @@ const DateInThePastAlertModal = ({ onQuit }: { onQuit: () => void }) => {
       .then(() => {
         navigate(window.location.pathname, { replace: true });
       })
-      .catch((err) => {
+      .catch(() => {
         addToast(
           ({ close }) => (
             <Notification

src/pages/Plan/modals/SaveAsTemplateModal/useApprovedQuote.tsx

@@ -3,12 +3,13 @@ import { usePlan } from '../../../../hooks/usePlan';
 
 const useApprovedQuote = () => {
   const { planId } = useParams();
-  const { plan } = usePlan(planId);
+  const { plan, planComposedStatus } = usePlan(planId);
 
   const hasApprovedQuote =
-    plan?.status === 'approved' && plan?.quote?.status === 'approved';
+    planComposedStatus &&
+    ['Accepted', 'PurchasedPlan'].includes(planComposedStatus);
 
-  return { hasApprovedQuote, quote: hasApprovedQuote ? plan.quote : undefined };
+  return { hasApprovedQuote, quote: plan?.quote };
 };
 
 export { useApprovedQuote };

src/pages/Plan/modules/Factory/modules/Literacy/Component.tsx

@@ -1,6 +1,5 @@
 import {
   AccordionNew,
-  Button,
   Checkbox,
   FormField,
   Hint,

src/pages/Plan/modules/Factory/modules/OutOfScope/Component.tsx

@@ -6,7 +6,6 @@ import {
   Label,
   SM,
   Span,
-  Textarea,
   Tooltip,
 } from '@appquality/unguess-design-system';
 import { useState } from 'react';

src/pages/Plan/modules/Factory/modules/TargetSize/Component.tsx

@@ -1,7 +1,6 @@
 import {
   AccordionNew,
   Alert,
-  Button,
   FormField,
   IconButton,
   Input,

src/pages/Plan/summary/components/BuyButton.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 
 import { useModule } from 'src/features/modules/useModule';
-import { getPlanStatus } from 'src/pages/Dashboard/hooks/getPlanStatus';
 import { usePlan } from '../../../../hooks/usePlan';
 import { usePlanContext } from '../../context/planContext';
 
@@ -21,18 +20,12 @@ const BuyButton = ({
   const { setDateInThePastAlertModalOpen, buyPlanAction } = usePlanContext();
   const { value } = useModule('dates');
   const { planId } = useParams();
-  const { plan } = usePlan(planId);
+  const { plan, planComposedStatus } = usePlan(planId);
 
   const { t } = useTranslation();
 
   if (!plan) return null;
 
-  const { status } = getPlanStatus({
-    planStatus: plan.status,
-    quote: plan.quote,
-    t,
-  });
-
   const checkIfDateIsValid = (dateString?: string) => {
     if (!dateString) {
       setDateInThePastAlertModalOpen(true);
@@ -65,7 +58,10 @@ const BuyButton = ({
       isAccent={isAccent}
       isPrimary={isPrimary}
       isStretched={isStretched}
-      disabled={status === 'approved'}
+      disabled={
+        planComposedStatus &&
+        ['AwaitingPayment', 'PurchasedPlan'].includes(planComposedStatus)
+      }
       onClick={handleBuyButtonClick}
     >
       {t('__PLAN_PAGE_BUY_BUTTON_LABEL')}

src/pages/Plan/summary/components/DetailsCard.tsx

@@ -19,7 +19,7 @@ import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
 import { usePlanStatusLabel } from 'src/hooks/usePlanStatusLabel';
 import { WidgetSpecialCard } from 'src/pages/Campaign/widgetCards/common/StyledSpecialCard';
 import styled from 'styled-components';
-import { usePlan } from '../../../../hooks/usePlan';
+import { usePlan, usePlanIsPurchasable } from '../../../../hooks/usePlan';
 import { GoToCampaignButton } from '../../Controls/GoToCampaignButton';
 import { BuyButton } from './BuyButton';
 import { CancelPlanButton } from './CancelPlanButton';
@@ -173,6 +173,7 @@ export const DetailsCard = () => {
   const label = usePlanStatusLabel({ planStatus: planComposedStatus });
   const { value } = useModule('dates');
   const [isSubmitted, setIsSubmitted] = useState(false);
+  const isPurchasable = usePlanIsPurchasable(planId);
 
   const [patchStatus] = usePatchPlansByPidStatusMutation();
 
@@ -187,7 +188,7 @@ export const DetailsCard = () => {
   };
 
   const getCta = () => {
-    if (!plan.isPurchasable) {
+    if (!isPurchasable) {
       return (
         <Cta
           isSubmitted={isSubmitted}

src/pages/Plan/summary/index.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { appTheme } from 'src/app/theme';
 import styled from 'styled-components';
-import { usePlan } from '../../../hooks/usePlan';
+import { usePlan, usePlanIsPurchasable } from '../../../hooks/usePlan';
 import { StickyCol } from '../common/StickyCol';
 import { TabTitle } from '../common/TabTitle';
 import { usePlanContext } from '../context/planContext';
@@ -26,6 +26,7 @@ const SummaryBody = () => {
   const { t } = useTranslation();
   const { planId } = useParams();
   const { plan, planComposedStatus } = usePlan(planId);
+  const isPurchasable = usePlanIsPurchasable(planId);
   const { setActiveTab, isPaymentInProgress } = usePlanContext();
 
   if (!plan) return null;
@@ -43,10 +44,7 @@ const SummaryBody = () => {
           <IntroductionCard />
           <ActivityInfo />
           {planComposedStatus !== 'Paying' && <ConfirmationCard />}
-          {planComposedStatus !== 'PurchasableDraft' &&
-            planComposedStatus !== 'AwaitingPayment' &&
-            planComposedStatus !== 'Paying' &&
-            planComposedStatus !== 'PurchasedPlan' && <SaveTemplateCard />}
+          {!isPurchasable && <SaveTemplateCard />}
           <GoToDashboardCard />
         </StyledDiv>
         <Button

src/pages/Plan/useSetDraftOnFailed.tsx

@@ -54,11 +54,7 @@ export const useSetDraftOnFailed = () => {
             { placement: 'top' }
           );
         })
-        .catch((err) => {
-          console.error(
-            'Error updating plan status after payment failure',
-            err
-          );
+        .catch(() => {
           navigate(notFoundRoute, { state: { from: location.pathname } });
         });
     };

tests/e2e/plan/modules/out_of_scope.spec.ts

@@ -1,15 +1,14 @@
-import draft from '../../../api/plans/pid/_get/200_draft_complete.json';
-import { expect, test } from '../../../fixtures/app';
+import { test } from '../../../fixtures/app';
 import { PlanPage } from '../../../fixtures/pages/Plan';
-import { OutOfScopeModule } from '../../../fixtures/pages/Plan/Module_out_of_scope';
+// import { OutOfScopeModule } from '../../../fixtures/pages/Plan/Module_out_of_scope';
 
 test.describe('The title module defines the Plan title.', () => {
   let planPage: PlanPage;
-  let module: OutOfScopeModule;
+  // let module: OutOfScopeModule;
 
   test.beforeEach(async ({ page }) => {
     planPage = new PlanPage(page);
-    module = new OutOfScopeModule(page);
+    // module = new OutOfScopeModule(page);
     await planPage.loggedIn();
     await planPage.mockPreferences();
     await planPage.mockWorkspace();