feat(hub): created payment status component (#13293)

ref: MANAGER-15058 Signed-off-by: Jacques Larique <[email protected]>
ovh · Oct 3, 2024 · 9c70aa5 · 9c70aa5
1 parent f310ab4
commit 9c70aa5
Show file tree

Hide file tree

Showing 25 changed files with 1,898 additions and 69 deletions.
diff --git a/packages/manager/apps/hub/package.json b/packages/manager/apps/hub/package.json
@@ -22,13 +22,13 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@ovh-ux/manager-config": "*",
-    "@ovh-ux/manager-core-api": "*",
-    "@ovh-ux/manager-core-utils": "*",
-    "@ovh-ux/manager-react-shell-client": "*",
-    "@ovh-ux/manager-tailwind-config": "*",
-    "@ovh-ux/request-tagger": "*",
-    "@ovhcloud/manager-components": "*",
+    "@ovh-ux/manager-config": "^7.3.3",
+    "@ovh-ux/manager-core-api": "^0.8.0",
+    "@ovh-ux/manager-models": "^1.14.13",
+    "@ovh-ux/manager-react-components": "^1.31.0",
+    "@ovh-ux/manager-react-shell-client": "^0.7.0",
+    "@ovh-ux/manager-tailwind-config": "^0.2.0",
+    "@ovh-ux/request-tagger": "^0.3.0",
     "@ovhcloud/ods-common-core": "17.2.1",
     "@ovhcloud/ods-common-theming": "17.2.1",
     "@ovhcloud/ods-components": "17.2.1",
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@cucumber/cucumber": "^10.3.1",
-    "@ovh-ux/manager-vite-config": "*",
+    "@ovh-ux/manager-vite-config": "^0.8.0",
     "@playwright/test": "^1.41.2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^14.1.2",

diff --git a/packages/manager/apps/hub/public/translations/billing/actions/Messages_fr_FR.json b/packages/manager/apps/hub/public/translations/billing/actions/Messages_fr_FR.json
@@ -0,0 +1,24 @@
+{
+  "billing_services_actions_menu_label": "Plus d'actions sur ce service",
+  "billing_autorenew_service_enable_autorenew": "Activer le paiement automatique",
+  "billing_services_actions_menu_pay_bill": "Régler ma facture",
+  "billing_services_actions_menu_manage_renew": "Configurer le renouvellement",
+  "billing_services_actions_menu_exchange_update_accounts": "Configurer le renouvellement des comptes",
+  "billing_services_actions_menu_anticipate_renew": "Anticiper le paiement",
+  "billing_services_actions_menu_resiliate": "Résilier",
+  "billing_services_actions_menu_resiliate_my_engagement": "Résilier mon engagement",
+  "billing_services_actions_menu_renew_label": "Renouveler le service : {{ serviceName }} (Nouvelle fenêtre)",
+  "billing_services_actions_menu_renew": "Renouveler le service",
+  "billing_services_actions_menu_exchange_update": "Modifier la facturation",
+  "billing_services_actions_menu_resiliate_EMAIL_DOMAIN": "Supprimer immédiatement le MX Plan",
+  "billing_services_actions_menu_resiliate_ENTERPRISE_CLOUD_DATABASE": "Supprimer immédiatement l'enterprise cloud databases",
+  "billing_services_actions_menu_resiliate_HOSTING_WEB": "Supprimer immédiatement l'hébergement",
+  "billing_services_actions_menu_resiliate_HOSTING_PRIVATE_DATABASE": "Supprimer mon hébergement SQL privé",
+  "billing_services_actions_menu_resiliate_WEBCOACH": "Supprimer mon WebCoach",
+  "billing_services_actions_menu_sms_credit": "Ajouter des crédits",
+  "billing_services_actions_menu_sms_renew": "Configurer la recharge automatique",
+  "billing_services_actions_menu_resiliate_cancel": "Annuler la résiliation du service",
+  "billing_services_actions_menu_see_dashboard": "Voir le détail du service",
+  "billing_services_actions_menu_commit": "Gérer mon engagement",
+  "billing_services_actions_menu_commit_cancel": "Annuler la demande d'engagement"
+}
diff --git a/packages/manager/apps/hub/public/translations/billing/status/Messages_fr_FR.json b/packages/manager/apps/hub/public/translations/billing/status/Messages_fr_FR.json
@@ -0,0 +1,12 @@
+{
+  "manager_billing_service_status": "Statut",
+  "manager_billing_service_status_auto": "Renouvellement automatique",
+  "manager_billing_service_status_automatic": "Renouvellement automatique",
+  "manager_billing_service_status_manual": "Renouvellement manuel",
+  "manager_billing_service_status_manualPayment": "Renouvellement manuel",
+  "manager_billing_service_status_pending_debt": "Facture à régler",
+  "manager_billing_service_status_delete_at_expiration": "Résiliation demandée",
+  "manager_billing_service_status_expired": "Résilié",
+  "manager_billing_service_status_billing_suspended": "Facturation reportée",
+  "manager_billing_service_status_forced_manual": "Renouvellement manuel forcé"
+}
diff --git a/packages/manager/apps/hub/public/translations/hub/error/Messages_fr_FR.json b/packages/manager/apps/hub/public/translations/hub/error/Messages_fr_FR.json
@@ -5,6 +5,7 @@
   "manager_error_page_action_reload_label": "Réessayer",
   "manager_error_page_action_home_label": "Retour à la page d'accueil",
   "manager_error_page_default": "Une erreur est survenue lors du chargement de la page.",
+  "ovh_manager_hub_payment_status_tile_error": "Impossible de récupérer les services",
   "manager_error_tile_title": "Oops …!",
   "manager_error_tile_action_reload_label": "Recharger"
 }
diff --git a/packages/manager/apps/hub/public/translations/hub/payment-status/Messages_fr_FR.json b/packages/manager/apps/hub/public/translations/hub/payment-status/Messages_fr_FR.json
@@ -0,0 +1,9 @@
+{
+  "ovh_manager_hub_payment_status_tile_title": "Derniers statuts de paiement des services",
+  "ovh_manager_hub_payment_status_tile_see_all": "Voir tout",
+  "ovh_manager_hub_payment_status_tile_now": "Immédiatement",
+  "ovh_manager_hub_payment_status_tile_before": "avant le {{ date }}",
+  "ovh_manager_hub_payment_status_tile_renew": "depuis le {{ date }}",
+  "ovh_manager_hub_payment_status_tile_error": "Impossible de récupérer les services",
+  "ovh_manager_hub_payment_status_tile_no_services": "Aucun service"
+}
diff --git a/packages/manager/apps/hub/src/_mock_/billingServices.ts b/packages/manager/apps/hub/src/_mock_/billingServices.ts
@@ -0,0 +1,150 @@
+import {
+  HubBillingServices,
+  BillingService,
+} from '@/billing/types/billingServices.type';
+
+const serviceResiliated = new BillingService({
+  canDeleteAtExpiration: false,
+  contactAdmin: 'adminNic1',
+  contactBilling: 'billingNic1',
+  domain: 'serviceResiliated',
+  expiration: '2024-10-01T07:37:24Z',
+  id: 333333,
+  renew: {
+    automatic: true,
+    deleteAtExpiration: false,
+    forced: false,
+    manualPayment: false,
+    period: 12,
+  },
+  renewalType: 'automaticV2016',
+  serviceId: 'serviceResiliated',
+  serviceType: 'HOSTING_WEB',
+  status: 'TERMINATED',
+  url:
+    'https://www.ovh.com/manager/#/web/configuration/hosting/serviceResiliated',
+});
+const serviceWithManualRenewNotResiliatedWithoutDebt = new BillingService({
+  canDeleteAtExpiration: false,
+  contactAdmin: 'adminNic2',
+  contactBilling: 'billingNic2',
+  domain: 'serviceWithManualRenewNotResiliatedWithoutDebt',
+  expiration: '2024-10-06T16:38:41Z',
+  id: 444444,
+  renew: {
+    automatic: false,
+    deleteAtExpiration: false,
+    forced: false,
+    manualPayment: true,
+    period: null,
+  },
+  renewalType: 'manual',
+  serviceId: 'serviceWithManualRenewNotResiliatedWithoutDebt',
+  serviceType: 'DOMAIN',
+  status: 'ACTIVE',
+  url:
+    'https://www.ovh.com/manager/#/web/configuration/domain/serviceWithManualRenewNotResiliatedWithoutDebt/information',
+});
+const serviceOneShotWithoutResiliation = new BillingService({
+  canDeleteAtExpiration: false,
+  contactAdmin: 'adminNic3',
+  contactBilling: 'billingNic3',
+  domain: 'serviceOneShotWithoutResiliation',
+  expiration: '2024-11-19T04:28:17Z',
+  id: 555555,
+  renew: {
+    automatic: false,
+    deleteAtExpiration: false,
+    forced: false,
+    manualPayment: false,
+    period: 12,
+  },
+  renewalType: 'oneShot',
+  serviceId: 'serviceOneShotWithoutResiliation',
+  serviceType: 'DEDICATED_SERVER',
+  status: 'ACTIVE',
+  url:
+    'https://www.ovh.com/manager/#/dedicated/server/serviceOneShotWithoutResiliation',
+});
+const serviceWithoutUrlAndSuspendedBilling = new BillingService({
+  canDeleteAtExpiration: false,
+  contactAdmin: 'adminNic4',
+  contactBilling: 'billingNic4',
+  domain: 'serviceWithoutUrlAndSuspendedBilling',
+  expiration: '2024-11-19T14:49:20Z',
+  id: 666666,
+  renew: {
+    automatic: false,
+    deleteAtExpiration: false,
+    forced: false,
+    manualPayment: true,
+    period: 12,
+  },
+  renewalType: 'automaticV2016',
+  serviceId: 'serviceWithoutUrlAndSuspendedBilling',
+  serviceType: 'DEDICATED_CLOUD',
+  status: 'BILLING_SUSPENDED',
+  url: null,
+});
+const serviceInDebt = new BillingService({
+  canDeleteAtExpiration: false,
+  contactAdmin: 'adminNic3',
+  contactBilling: 'billingNic3',
+  domain: 'serviceOneShotWithoutResiliation',
+  expiration: '2024-11-19T04:28:17Z',
+  id: 777777,
+  renew: {
+    automatic: false,
+    deleteAtExpiration: false,
+    forced: false,
+    manualPayment: false,
+    period: 12,
+  },
+  renewalType: 'oneShot',
+  serviceId: 'serviceOneShotWithoutResiliation',
+  serviceType: 'DEDICATED_SERVER',
+  status: 'PENDING_DEBT',
+  url:
+    'https://www.ovh.com/manager/#/dedicated/server/serviceOneShotWithoutResiliation',
+});
+const serviceWithAutomaticRenewNotResiliated = new BillingService({
+  canDeleteAtExpiration: false,
+  contactAdmin: 'adminNic1',
+  contactBilling: 'billingNic1',
+  domain: 'serviceWithAutomaticRenewNotResiliated',
+  expiration: '2024-10-01T07:37:24Z',
+  id: 888888,
+  renew: {
+    automatic: true,
+    deleteAtExpiration: false,
+    forced: false,
+    manualPayment: false,
+    period: 12,
+  },
+  renewalType: 'automaticV2016',
+  serviceId: 'serviceWithAutomaticRenewNotResiliated',
+  serviceType: 'HOSTING_WEB',
+  status: 'ACTIVE',
+  url:
+    'https://www.ovh.com/manager/#/web/configuration/hosting/serviceWithAutomaticRenewNotResiliated',
+});
+
+export const NoServices: HubBillingServices = {
+  services: [],
+  count: 0,
+};
+
+export const TwoServices: HubBillingServices = {
+  services: [serviceInDebt, serviceWithAutomaticRenewNotResiliated],
+  count: 2,
+};
+
+export const FourServices: HubBillingServices = {
+  services: [
+    serviceResiliated,
+    serviceWithManualRenewNotResiliatedWithoutDebt,
+    serviceOneShotWithoutResiliation,
+    serviceWithoutUrlAndSuspendedBilling,
+  ],
+  count: 4,
+};
diff --git a/packages/manager/apps/hub/src/billing.constants.ts b/packages/manager/apps/hub/src/billing.constants.ts
@@ -0,0 +1,41 @@
+export const SERVICE_TYPE = {
+  EMAIL_DOMAIN: 'EMAIL_DOMAIN',
+  ENTERPRISE_CLOUD_DATABASE: 'ENTERPRISE_CLOUD_DATABASE',
+  EXCHANGE: 'EMAIL_EXCHANGE',
+  HOSTING_PRIVATE_DATABASE: 'HOSTING_PRIVATE_DATABASE',
+  HOSTING_WEB: 'HOSTING_WEB',
+  OVH_CLOUD_CONNECT: 'OVH_CLOUD_CONNECT',
+  PACK_XDSL: 'PACK_XDSL',
+  SMS: 'SMS',
+  TELEPHONY: 'TELEPHONY',
+  WEBCOACH: 'WEBCOACH',
+  ALL_DOM: 'ALL_DOM',
+  OKMS: 'OKMS_RESOURCE',
+  VRACK_SERVICES: 'VRACK_SERVICES_RESOURCE',
+};
+
+export const RENEW_URL: Record<string, string> = {
+  default: '/cgi-bin/order/renew.cgi?domainChooser=',
+  AU: 'https://ca.ovh.com/au/cgi-bin/order/renew.cgi?domainChooser=',
+  CA: 'https://ca.ovh.com/fr/cgi-bin/order/renew.cgi?domainChooser=',
+  CZ: 'https://www.ovh.cz/cgi-bin/order/renew.cgi?domainChooser=',
+  DE: 'https://www.ovh.de/cgi-bin/order/renew.cgi?domainChooser=',
+  EN: 'https://www.ovh.co.uk/cgi-bin/order/renew.cgi?domainChooser=',
+  ES: 'https://www.ovh.es/cgi-bin/order/renew.cgi?domainChooser=',
+  FI: 'https://www.ovh-hosting.fi/cgi-bin/order/renew.cgi?domainChooser=',
+  FR: 'https://eu.ovh.com/fr/cgi-bin/order/renew.cgi?domainChooser=',
+  GB: 'https://www.ovh.co.uk/cgi-bin/order/renew.cgi?domainChooser=',
+  IE: 'https://www.ovh.ie/cgi-bin/order/renew.cgi?domainChooser=',
+  IT: 'https://www.ovh.it/cgi-bin/order/renew.cgi?domainChooser=',
+  LT: 'https://www.ovh.lt/cgi-bin/order/renew.cgi?domainChooser=',
+  MA: 'https://www.ovh.com/ma/cgi-bin/order/renew.cgi?domainChooser=',
+  NL: 'https://www.ovh.nl/cgi-bin/order/renew.cgi?domainChooser=',
+  PL: 'https://www.ovh.pl/cgi-bin/order/renew.cgi?domainChooser=',
+  PT: 'https://www.ovh.pt/cgi-bin/order/renew.cgi?domainChooser=',
+  QC: 'https://ca.ovh.com/fr/cgi-bin/order/renew.cgi?domainChooser=',
+  RU: 'https://www.ovh.co.uk/cgi-bin/order/renew.cgi?domainChooser=',
+  SG: 'https://ca.ovh.com/sg/cgi-bin/order/renew.cgi?domainChooser=',
+  SN: 'https://www.ovh.sn/cgi-bin/order/renew.cgi?domainChooser=',
+  TN: 'https://www.ovh.com/tn/cgi-bin/order/renew.cgi?domainChooser=',
+  WE: 'https://ca.ovh.com/fr/cgi-bin/order/renew.cgi?domainChooser=',
+};
diff --git a/packages/manager/apps/hub/src/billing/components/billing-status/BillingStatus.component.tsx b/packages/manager/apps/hub/src/billing/components/billing-status/BillingStatus.component.tsx
@@ -0,0 +1,72 @@
+import { useTranslation } from 'react-i18next';
+import { ODS_CHIP_SIZE } from '@ovhcloud/ods-components';
+import { OsdsChip, OsdsText } from '@ovhcloud/ods-components/react';
+import {
+  ODS_THEME_COLOR_INTENT,
+  ODS_THEME_TYPOGRAPHY_LEVEL,
+  ODS_THEME_TYPOGRAPHY_SIZE,
+} from '@ovhcloud/ods-common-theming';
+import { BADGE_INTENT_BY_STATUS } from '@/billing/components/billing-status/BillingStatus.constants';
+import { BillingService } from '@/billing/types/billingServices.type';
+
+type BillingStatusProps = {
+  service: BillingService;
+};
+
+export default function BillingStatus({ service }: BillingStatusProps) {
+  const { t } = useTranslation('billing/status');
+  const shouldHideAutoRenewStatus =
+    service.isOneShot() || ['SMS'].includes(service.serviceType);
+  return (
+    <div className="mb-5" data-testid="billing_status">
+      {service.hasDebt() && (
+        <OsdsChip
+          size={ODS_CHIP_SIZE.sm}
+          color={ODS_THEME_COLOR_INTENT.error}
+          inline
+        >
+          <OsdsText
+            color={ODS_THEME_COLOR_INTENT.text}
+            size={ODS_THEME_TYPOGRAPHY_SIZE._200}
+            level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
+          >
+            {t('manager_billing_service_status_pending_debt')}
+          </OsdsText>
+        </OsdsChip>
+      )}
+      {shouldHideAutoRenewStatus && !service.isResiliated() && <span>-</span>}
+      {shouldHideAutoRenewStatus && service.isResiliated() && (
+        <OsdsChip
+          size={ODS_CHIP_SIZE.sm}
+          color={ODS_THEME_COLOR_INTENT.error}
+          inline
+        >
+          <OsdsText
+            color={ODS_THEME_COLOR_INTENT.text}
+            size={ODS_THEME_TYPOGRAPHY_SIZE._200}
+            level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
+          >
+            {t('manager_billing_service_status_expired')}
+          </OsdsText>
+        </OsdsChip>
+      )}
+      {!service.hasDebt() && !shouldHideAutoRenewStatus && (
+        <OsdsChip
+          size={ODS_CHIP_SIZE.sm}
+          color={
+            ODS_THEME_COLOR_INTENT[BADGE_INTENT_BY_STATUS[service.getRenew()]]
+          }
+          inline
+        >
+          <OsdsText
+            color={ODS_THEME_COLOR_INTENT.text}
+            size={ODS_THEME_TYPOGRAPHY_SIZE._200}
+            level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
+          >
+            {t(`manager_billing_service_status_${service.getRenew()}`)}
+          </OsdsText>
+        </OsdsChip>
+      )}
+    </div>
+  );
+}
diff --git a/packages/manager/apps/hub/src/billing/components/billing-status/BillingStatus.constants.ts b/packages/manager/apps/hub/src/billing/components/billing-status/BillingStatus.constants.ts
@@ -0,0 +1,15 @@
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+
+export const BADGE_INTENT_BY_STATUS: Record<
+  string,
+  keyof typeof ODS_THEME_COLOR_INTENT
+> = {
+  auto: 'success',
+  automatic: 'success',
+  billing_suspended: 'info',
+  delete_at_expiration: 'error',
+  expired: 'error',
+  forced_manual: 'info',
+  manual: 'warning',
+  manualPayment: 'warning',
+};