Merge pull request #1433 from AppQuality/UN-1803-Modifica-Copy-Status

update plan status handling and localization, add usePlanStatusLabel hook

Author: iacopolea

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@analytics/google-tag-manager": "^0.6.0",
     "@appquality/languages": "1.4.3",
-    "@appquality/unguess-design-system": "4.0.49",
+    "@appquality/unguess-design-system": "4.0.50--canary.549.a1152e0.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
     "@atlaskit/pragmatic-drag-and-drop-flourish": "^2.0.3",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",

src/pages/Plan/hooks/usePlan.ts renamed to src/hooks/usePlan.ts

@@ -6,19 +6,7 @@ import {
   useGetCampaignsByCidQuery,
 } from 'src/features/api';
 import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
-
-export type PlanComposedStatusType =
-  | 'UnquotedDraft'
-  | 'PrequotedDraft'
-  | 'PurchasableDraft'
-  | 'Submitted'
-  | 'OpsCheck'
-  | 'AwaitingApproval'
-  | 'Accepted'
-  | 'RunningPlan'
-  | 'AwaitingPayment'
-  | 'Paying'
-  | 'PurchasedPlan';
+import { PlanComposedStatusType } from 'src/types';
 
 const usePlan = (planId?: string) => {
   const { activeWorkspace } = useActiveWorkspace();
@@ -119,7 +107,7 @@ const usePlan = (planId?: string) => {
       default:
         throw new Error(`Unknown plan status for plan: ${plan.id}`);
     }
-  }, [plan, ci]);
+  }, [plan, ci, planCampaign, planTemplate]);
 
   if (!plan) {
     return {

src/hooks/usePlanStatusLabel.ts

@@ -0,0 +1,28 @@
+import { useTranslation } from 'react-i18next';
+import { PlanComposedStatusType } from 'src/types';
+
+export const usePlanStatusLabel = ({
+  planStatus,
+}: {
+  planStatus?: PlanComposedStatusType;
+}): string => {
+  const { t } = useTranslation();
+  if (!planStatus) {
+    return '';
+  }
+  const statusMap: Record<PlanComposedStatusType, string> = {
+    UnquotedDraft: t('___PLAN_STATUS_UNQUOTED_DRAFT'),
+    PrequotedDraft: t('___PLAN_STATUS_PREQUOTED_DRAFT'),
+    PurchasableDraft: t('___PLAN_STATUS_PURCHASABLE_DRAFT'),
+    Submitted: t('___PLAN_STATUS_SUBMITTED'),
+    OpsCheck: t('___PLAN_STATUS_OPS_CHECK'),
+    AwaitingApproval: t('___PLAN_STATUS_AWAITING_APPROVAL'),
+    Accepted: t('___PLAN_STATUS_ACCEPTED'),
+    RunningPlan: t('___PLAN_STATUS_RUNNING_PLAN'),
+    AwaitingPayment: t('___PLAN_STATUS_AWAITING_PAYMENT'),
+    Paying: t('___PLAN_STATUS_PAYING'),
+    PurchasedPlan: t('___PLAN_STATUS_PURCHASED_PLAN'),
+  };
+
+  return statusMap[`${planStatus}`];
+};

src/locales/en/translation.json

@@ -1,4 +1,15 @@
 {
+  "___PLAN_STATUS_ACCEPTED": "Accepted",
+  "___PLAN_STATUS_AWAITING_APPROVAL": "Waiting for you",
+  "___PLAN_STATUS_AWAITING_PAYMENT": "Waiting for you",
+  "___PLAN_STATUS_OPS_CHECK": "Under review",
+  "___PLAN_STATUS_PAYING": "Ongoing Payment",
+  "___PLAN_STATUS_PREQUOTED_DRAFT": "Draft",
+  "___PLAN_STATUS_PURCHASABLE_DRAFT": "Draft",
+  "___PLAN_STATUS_PURCHASED_PLAN": "Accepted",
+  "___PLAN_STATUS_RUNNING_PLAN": "Running",
+  "___PLAN_STATUS_SUBMITTED": "Under review",
+  "___PLAN_STATUS_UNQUOTED_DRAFT": "Draft",
   "__404_PAGE_BUTTON": "Back to home",
   "__404_PAGE_DESCRIPTION": "Let’s find a better place for you to go.",
   "__404_PAGE_SUB_TITLE MAX:80": "This page could have been removed or it’s unavailable.",
@@ -1367,6 +1378,9 @@
   "_CAMPAIGN_WIDGET_UX_USER_ANALYSIS_DESCRIPTION_HEADER": "There are observations on",
   "_CAMPAIGN_WIDGET_UX_USER_ANALYSIS_HEADER": "Analyzed User Contributions",
   "_PAGE_PROFILE_HEADER_TEXT": "Manage your profile anytime: check and update your personal information whenever you need.",
+  "_PLAN_CARD_LABEL_CONFIRM": "Confirm & Launch",
+  "_PLAN_CARD_LABEL_FINALIZE": "Finalize Activity",
+  "_PLAN_CARD_LABEL_LOOK": "Take a look",
   "_PLAN_PAGE_MODULE_LANGUAGE_DESCRIPTION": "You’ll receive feedback in the language you’re selecting",
   "_PLAN_PAGE_MODULE_LANGUAGE_SUBTITLE": "Select participants' preferred language",
   "_PROJECT_PAGE_PLANS_GROUP_SEE_ALL": "View more",

src/locales/it/translation.json

@@ -1,4 +1,15 @@
 {
+  "___PLAN_STATUS_ACCEPTED": "",
+  "___PLAN_STATUS_AWAITING_APPROVAL": "",
+  "___PLAN_STATUS_AWAITING_PAYMENT": "",
+  "___PLAN_STATUS_OPS_CHECK": "",
+  "___PLAN_STATUS_PAYING": "",
+  "___PLAN_STATUS_PREQUOTED_DRAFT": "",
+  "___PLAN_STATUS_PURCHASABLE_DRAFT": "",
+  "___PLAN_STATUS_PURCHASED_PLAN": "",
+  "___PLAN_STATUS_RUNNING_PLAN": "",
+  "___PLAN_STATUS_SUBMITTED": "",
+  "___PLAN_STATUS_UNQUOTED_DRAFT": "",
   "__404_PAGE_BUTTON": "Torna alla dashboard",
   "__404_PAGE_DESCRIPTION": "La direzione giusta ora è solo una.",
   "__404_PAGE_SUB_TITLE MAX:80": "L'abbiamo cercata ovunque ma non è disponibile.",
@@ -1409,6 +1420,9 @@
   "_CAMPAIGN_WIDGET_UX_USER_ANALYSIS_DESCRIPTION_HEADER": "Hai aggiunto osservazioni su",
   "_CAMPAIGN_WIDGET_UX_USER_ANALYSIS_HEADER": "Contributi utente analizzati",
   "_PAGE_PROFILE_HEADER_TEXT": "",
+  "_PLAN_CARD_LABEL_CONFIRM": "",
+  "_PLAN_CARD_LABEL_FINALIZE": "",
+  "_PLAN_CARD_LABEL_LOOK": "",
   "_PLAN_PAGE_MODULE_LANGUAGE_DESCRIPTION": "",
   "_PLAN_PAGE_MODULE_LANGUAGE_SUBTITLE": "",
   "_PROJECT_PAGE_PLANS_GROUP_SEE_ALL": "Vedi tutti",

src/pages/Dashboard/PlanCard.tsx

@@ -0,0 +1,50 @@
+import { PlanCard as UGPlanCard } from '@appquality/unguess-design-system';
+import { get } from 'http';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { GetWorkspacesByWidPlansApiResponse } from 'src/features/api';
+import { usePlan } from 'src/hooks/usePlan';
+import { usePlanStatusLabel } from 'src/hooks/usePlanStatusLabel';
+import { PlanComposedStatusType } from 'src/types';
+
+export const PlanCard = ({
+  plan,
+}: {
+  plan: GetWorkspacesByWidPlansApiResponse[number];
+}) => {
+  const { planComposedStatus } = usePlan(plan.id.toString());
+  const { t } = useTranslation();
+  const statusLabel = usePlanStatusLabel({ planStatus: planComposedStatus });
+  const navigate = useNavigate();
+  const navigateToPlan = () => {
+    navigate(`/plans/${plan.id}`);
+  };
+
+  const getPlanLabel = (planStatus?: PlanComposedStatusType) => {
+    switch (planStatus) {
+      case 'PurchasableDraft':
+      case 'UnquotedDraft':
+      case 'PrequotedDraft':
+        return t('_PLAN_CARD_LABEL_FINALIZE');
+      case 'Submitted':
+      case 'OpsCheck':
+      case 'Paying':
+        return t('_PLAN_CARD_LABEL_LOOK');
+      case 'AwaitingPayment':
+      case 'AwaitingApproval':
+        return t('_PLAN_CARD_LABEL_CONFIRM');
+      default:
+        return '';
+    }
+  };
+  return (
+    <UGPlanCard
+      status={planComposedStatus}
+      i18n={{ statusLabel, planLabel: getPlanLabel(planComposedStatus) }}
+      onClick={navigateToPlan}
+    >
+      <UGPlanCard.ProjectLabel>{plan.project.title}</UGPlanCard.ProjectLabel>
+      <UGPlanCard.Title>{plan.title}</UGPlanCard.Title>
+    </UGPlanCard>
+  );
+};

src/pages/Dashboard/SuggestedCampaigns.tsx

@@ -1,7 +1,6 @@
 import {
   Col,
   Paragraph,
-  PlanCard,
   Row,
   Separator,
 } from '@appquality/unguess-design-system';
@@ -11,8 +10,8 @@ import { ScrollingGrid } from 'src/common/components/ScrollingGrid';
 import { SectionTitle } from 'src/common/components/SectionTitle';
 import { CampaignItem } from './CampaignItem';
 import { CardRowLoading } from './CardRowLoading';
-import { getPlanStatus } from './hooks/getPlanStatus';
 import { useCampaignsAndPlans } from './hooks/useCampaignsAndPlans';
+import { PlanCard } from './PlanCard';
 
 const MAX_SUGGESTED_ITEMS = 5;
 
@@ -48,30 +47,7 @@ export const SuggestedCampaigns = () => {
               key={`suggested_plan_${plan.id}`}
               data-qa={`tracked-activity-${i}`}
             >
-              <PlanCard
-                status={
-                  getPlanStatus({
-                    planStatus: plan.status,
-                    quote: plan.quote,
-                    t,
-                  }).status
-                }
-                i18n={{
-                  statusLabel: getPlanStatus({
-                    planStatus: plan.status,
-                    quote: plan.quote,
-                    t,
-                  }).statusLabel,
-                }}
-                onClick={() => {
-                  window.location.href = `/plans/${plan.id}`;
-                }}
-              >
-                <PlanCard.ProjectLabel>
-                  {plan.project.title}
-                </PlanCard.ProjectLabel>
-                <PlanCard.Title>{plan.title}</PlanCard.Title>
-              </PlanCard>
+              <PlanCard plan={plan} />
             </ScrollingGrid.Item>
           ))}
 

src/pages/Dashboard/project-items/Plans.tsx

@@ -1,10 +1,4 @@
-import {
-  Button,
-  Col,
-  PlanCard,
-  Row,
-  Separator,
-} from '@appquality/unguess-design-system';
+import { Button, Col, Row, Separator } from '@appquality/unguess-design-system';
 import { ReactComponent as ChevronDownStroke } from '@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg';
 import { ReactComponent as ChevronUpStroke } from '@zendeskgarden/svg-icons/src/16/chevron-up-stroke.svg';
 import { useState } from 'react';
@@ -13,8 +7,8 @@ import { appTheme } from 'src/app/theme';
 import { SectionTitle } from 'src/common/components/SectionTitle';
 import { styled } from 'styled-components';
 import { CardRowLoading } from '../CardRowLoading';
-import { getPlanStatus } from '../hooks/getPlanStatus';
 import { useProjectPlans } from '../hooks/useProjectPlans';
+import { PlanCard } from '../PlanCard';
 
 const PREVIEW_ITEMS_MAX_SIZE = 3;
 
@@ -65,27 +59,7 @@ export const Plans = ({ projectId }: { projectId: number }) => {
             key={`project_plan_${plan.id}`}
             data-qa={`setup-activity-${i}`}
           >
-            <PlanCard
-              status={
-                getPlanStatus({ planStatus: plan.status, quote: plan.quote, t })
-                  .status
-              }
-              i18n={{
-                statusLabel: getPlanStatus({
-                  planStatus: plan.status,
-                  quote: plan.quote,
-                  t,
-                }).statusLabel,
-              }}
-              onClick={() => {
-                window.location.href = `/plans/${plan.id}`;
-              }}
-            >
-              <PlanCard.ProjectLabel>
-                {plan.project.title}
-              </PlanCard.ProjectLabel>
-              <PlanCard.Title>{plan.title}</PlanCard.Title>
-            </PlanCard>
+            <PlanCard plan={plan} />
           </Col>
         ))}
       </Row>

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 } from '../../../hooks/usePlan';
 import { BuyButton } from '../summary/components/BuyButton';
 
 const ConfirmPlanButton = () => {

src/pages/Plan/Controls/GoToCampaignButton.tsx

@@ -2,7 +2,7 @@ import { Button } from '@appquality/unguess-design-system';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
-import { usePlan } from '../hooks/usePlan';
+import { usePlan } from '../../../hooks/usePlan';
 
 const GoToCampaignButton = () => {
   const { t } = useTranslation();