fixed Cannot delete Carrier, show message that there is link to LCR (#533)

* fixed Cannot delete Carrier, show message that there is link to LCR

* wip

src/containers/internal/views/carriers/delete.tsx

@@ -2,11 +2,11 @@ import React, { useEffect, useState } from "react";
 import { P } from "@jambonz/ui-kit";
 
 import { Modal, ModalClose } from "src/components";
-import { getFetch } from "src/api";
+import { getFetch, getLcrRoutes, getLcrs } from "src/api";
 import { API_PHONE_NUMBERS } from "src/api/constants";
 import { formatPhoneNumber, hasLength } from "src/utils";
 
-import type { Carrier, PhoneNumber } from "src/api/types";
+import type { Carrier, Lcr, PhoneNumber } from "src/api/types";
 
 type DeleteProps = {
   carrier: Carrier;
@@ -20,28 +20,63 @@ export const DeleteCarrier = ({
   handleSubmit,
 }: DeleteProps) => {
   const [phoneNumbers, setPhoneNumbers] = useState<PhoneNumber[]>();
+  const [lcrs, setLcrs] = useState<Lcr[]>();
 
   useEffect(() => {
     let ignore = false;
 
-    getFetch<PhoneNumber[]>(API_PHONE_NUMBERS).then(({ json }) => {
+    Promise.all([
+      getFetch<PhoneNumber[]>(API_PHONE_NUMBERS),
+      new Promise<Lcr[]>((resolve, reject) => {
+        getLcrs()
+          .then(({ json }) => {
+            Promise.all(
+              json.map((lcr: Lcr) =>
+                getLcrRoutes(lcr.lcr_sid!)
+                  .then(({ json }) => {
+                    if (
+                      json.some((route) =>
+                        route.lcr_carrier_set_entries?.some(
+                          (entry) =>
+                            entry.voip_carrier_sid === carrier.voip_carrier_sid,
+                        ),
+                      )
+                    ) {
+                      return lcr;
+                    }
+                  })
+                  .catch((error) => reject(error)),
+              ),
+            )
+              .then((lcrs) => {
+                resolve(lcrs as Lcr[]);
+              })
+              .catch((error) => reject(error));
+          })
+          .catch((error) => reject(error));
+      }),
+    ]).then(([numbers, fetchedLcrs]) => {
       if (!ignore) {
         setPhoneNumbers(
-          json.filter(
+          numbers.json.filter(
             (phone) => phone.voip_carrier_sid === carrier.voip_carrier_sid,
           ),
         );
+
+        setLcrs(fetchedLcrs);
       }
     });
 
     return function cleanup() {
       ignore = true;
     };
-  }, []);
+  }, [carrier.voip_carrier_sid]);
+
+  const hasBlockingDependencies = hasLength(phoneNumbers) || hasLength(lcrs);
 
   return (
     <>
-      {phoneNumbers && !hasLength(phoneNumbers) && (
+      {phoneNumbers && lcrs && !hasBlockingDependencies && (
         <Modal handleCancel={handleCancel} handleSubmit={handleSubmit}>
           <P>
             Are you sure you want to delete carrier{" "}
@@ -49,24 +84,49 @@ export const DeleteCarrier = ({
           </P>
         </Modal>
       )}
-      {hasLength(phoneNumbers) && (
+      {hasBlockingDependencies && (
         <ModalClose handleClose={handleCancel}>
           <P>
             In order to delete the carrier it cannot be in use by any{" "}
-            <span>Phone Numbers ({phoneNumbers.length})</span>.
+            {hasLength(phoneNumbers) && (
+              <span>Phone Numbers ({phoneNumbers.length})</span>
+            )}
+            {hasLength(phoneNumbers) && hasLength(lcrs) && " or "}
+            {hasLength(lcrs) && (
+              <span>Outbound call Routings ({lcrs.length})</span>
+            )}
+            .
           </P>
-          <ul className="m">
+
-            <li>
+          {hasLength(phoneNumbers) && (
-              <strong>Phone Numbers:</strong>
+            <ul className="m">
-            </li>
+              <li>
-            {phoneNumbers.map((phone) => {
+                <strong>Phone Numbers:</strong>
-              return (
+              </li>
-                <li className="txt--teal" key={phone.phone_number_sid}>
+              {phoneNumbers.map((phone) => {
-                  {formatPhoneNumber(phone.number)}
+                return (
-                </li>
+                  <li className="txt--teal" key={phone.phone_number_sid}>
-              );
+                    {formatPhoneNumber(phone.number)}
-            })}
+                  </li>
-          </ul>
+                );
+              })}
+            </ul>
+          )}
+
+          {hasLength(lcrs) && (
+            <ul className="m">
+              <li>
+                <strong>Outbound Call Routing:</strong>
+              </li>
+              {lcrs.map((lcr) => {
+                return (
+                  <li className="txt--teal" key={lcr.lcr_sid}>
+                    {lcr.name || "Default route"}
+                  </li>
+                );
+              })}
+            </ul>
+          )}
         </ModalClose>
       )}
     </>

src/containers/internal/views/least-cost-routing/form.tsx

@@ -82,7 +82,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
     setLocation();
     if (currentServiceProvider) {
       setApiUrl(
-        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers`,
+        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers${accountSid ? `?account_sid=${accountSid}` : ""}`,
       );
     }
   }, [user, currentServiceProvider, accountSid]);
@@ -92,16 +92,8 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
       setAccountSid(user?.account_sid);
     }
 
-    const carriersFiltered = carriers
+    const ret = carriers
-      ? carriers.filter((carrier) =>
+      ? carriers.map((c: Carrier, i) => {
-          accountSid
-            ? carrier.account_sid === accountSid
-            : carrier.account_sid === null,
-        )
-      : [];
-
-    const ret = carriersFiltered
-      ? carriersFiltered.map((c: Carrier, i) => {
           if (i === 0) {
             setDefaultCarrier(c.voip_carrier_sid);
           }
@@ -123,11 +115,16 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
     return ret;
   }, [accountSid, carriers]);
 
-  if (lcrDataMap && lcrDataMap.data && lcrDataMap.data !== previouseLcr) {
+  useEffect(() => {
-    setLcrName(lcrDataMap.data.name || "");
+    if (lcrDataMap && lcrDataMap.data && lcrDataMap.data !== previouseLcr) {
-    setIsActive(lcrDataMap.data.is_active);
+      setLcrName(lcrDataMap.data.name || "");
-    setPreviousLcr(lcrDataMap.data);
+      setIsActive(lcrDataMap.data.is_active);
-  }
+      setPreviousLcr(lcrDataMap.data);
+      if (lcrDataMap.data.account_sid) {
+        setAccountSid(lcrDataMap.data.account_sid);
+      }
+    }
+  }, [lcrDataMap?.data, previouseLcr]);
 
   useMemo(() => {
     let default_lcr_route_sid = "";