feature/IO-3103-Ant5-Notifications

client/src/components/payment-expanded-row/payment-expanded-row.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { Button, Descriptions, InputNumber, Modal, notification, Space } from "antd";
+import { Button, Descriptions, InputNumber, Modal, Space } from "antd";
 import axios from "axios";
 import dayjs from "../../utils/day";
 import React, { useState } from "react";
@@ -12,10 +12,11 @@ import {
 import { INSERT_NEW_PAYMENT } from "../../graphql/payments.queries";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const { confirm } = Modal;
 
-const openNotificationWithIcon = (type, t) => {
+const openNotificationWithIcon = (type, t, notification) => {
   notification[type]({
     message: t("job_payments.notifications.error.title"),
     description: t("job_payments.notifications.error.description")
@@ -27,6 +28,7 @@ const PaymentExpandedRowComponent = ({ record, bodyshop }) => {
   const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
   const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
   const { t } = useTranslation();
+  const notification = useNotification();
 
   const { loading, error, data } = useQuery(QUERY_PAYMENT_RESPONSE_BY_PAYMENT_ID, {
     variables: {
@@ -97,7 +99,7 @@ const PaymentExpandedRowComponent = ({ record, bodyshop }) => {
         });
 
         if (refundResponse.data.status < 0) {
-          openNotificationWithIcon("error", t);
+          openNotificationWithIcon("error", t, notification);
           return;
         }
 
@@ -119,11 +121,7 @@ const PaymentExpandedRowComponent = ({ record, bodyshop }) => {
 
   return (
     <div>
-      <Descriptions
-        title={t("job_payments.titles.descriptions")}
-        contentStyle={{ fontWeight: "600" }}
-        column={4}
-      >
+      <Descriptions title={t("job_payments.titles.descriptions")} contentStyle={{ fontWeight: "600" }} column={4}>
         <Descriptions.Item label={t("job_payments.titles.hint")}>
           {payment_response?.response?.methodhint}
         </Descriptions.Item>