All files / src/features/Merchants/MerchantSidePanel SecondPanelOptions.tsx

15.15% Statements 15/99
6.17% Branches 5/81
7.69% Functions 1/13
15.46% Lines 15/97

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299                                    21x 59x                                             56x     54x               54x                                 54x                 54x                                               54x                                                     54x   54x                                                 54x   48x                   2x   2x                 2x                                                                                                                                                                                                                                            
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import AgreementAndSnapshot from "./AgreementAndSnapshot/AgreementAndSnapshot";
import GiveMerchantFile from "./GiveMerchantFile/GiveMerchantFile";
import { useMerchantSidePanelContext } from "./Provider/MerchantSidePanelProvider";
import UnderwritingTasksPanel from "./ApprovalFlowPanel/components/UnderwritingTasksPanel";
import GiveExportContent from "@shared/GiveExportModal/components/GiveExportContent";
import { exportType } from "@shared/GiveExportModal/const";
import GiveRiskProfile from "@features/GiveRiskProfile";
import { TTransaction } from "@features/TransactionPanel/types";
import CustomerPanelContent from "@features/MerchantPortal/Customer/Modals/CustomerPanelContent";
import FirstPanelContent from "./FirstPanelContent";
import { SidePanelContainerWrapper } from "@shared/SidePanel/SidePanelAtoms";
import TransactionPanelContent from "@features/TransactionPanel/components/Summary/TransactionPanelContent";
import { FilterPagesEnum } from "@shared/GiveFilter/constants";
import GiveFilterModalContent from "@shared/GiveFilter/components/GiveFilterModalContent";
import { TMerchantDoublePanelNew } from "./hooks/useMerchantSidePanel";
import GiveProviderAgreementPanel from "./AgreementAndSnapshot/ProviderAgreemetPanel/GiveProviderAgreementPanel";
 
const SecondPanelOptions = () => {
  const { isMobileView } = useCustomThemeV2();
  const {
    secondPanelContent,
    setSecondPanelContent,
    setContentHistory,
    handleCloseAll,
    contentHistory,
    isSinglePanelSize,
    data,
    isProvider,
    transactionRiskProfile,
    handlers: { handleOpenTransactionRiskProfile },
    setFirstPanelContent,
    setOpenTransaction,
    openCustomer,
    id,
    transactionCounts,
    openTransaction,
    firstPanelContent,
    secondPanelContentHistory,
    setOpenCustomer,
    handleSetProviderID,
    setSecondPanelContentHistory,
  } = useMerchantSidePanelContext();
 
  // Helper function to restore first panel from contentHistory
  const restoreFirstPanelFromHistory = () => {
    setFirstPanelContent(
      contentHistory === "default" ? "" : contentHistory || "",
    );
    setContentHistory("");
  };
 
  // Helper function to restore from secondPanelContentHistory
  const restoreFromHistory = (clearFirstPanel = false) => {
    if (secondPanelContentHistory) {
      setSecondPanelContent(secondPanelContentHistory);
      setSecondPanelContentHistory("");
      // Restore first panel content if we have history
      if (contentHistory) {
        restoreFirstPanelFromHistory();
      } else if (clearFirstPanel) {
        // If no contentHistory, clear firstPanelContent (e.g., provider/merchant goes back to second panel)
        setFirstPanelContent("");
      }
      return true;
    }
    return false;
  };
 
  // Helper function to save current second panel content to history
  const saveToHistory = (fallbackContent?: TMerchantDoublePanelNew) => {
    if (secondPanelContent) {
      setSecondPanelContentHistory(secondPanelContent);
    } else if (fallbackContent) {
      setSecondPanelContentHistory(fallbackContent);
    }
  };
 
  // Helper function to navigate to a second panel, optionally saving current state to history
  const navigateToSecondPanel = (
    content: TMerchantDoublePanelNew,
    options?: {
      saveHistory?: boolean;
      fallbackHistory?: TMerchantDoublePanelNew;
      setFirstPanel?: string;
      setContentHistory?: string;
    },
  ) => {
    // Save history first (before changing secondPanelContent)
    if (options?.saveHistory) {
      saveToHistory(options.fallbackHistory);
    }
    // Set first panel and content history if needed
    if (options?.setFirstPanel !== undefined) {
      setFirstPanelContent(options.setFirstPanel);
    }
    if (options?.setContentHistory !== undefined) {
      setContentHistory(options.setContentHistory);
    }
    // Finally, navigate to the new second panel
    setSecondPanelContent(content);
  };
 
  const handleOpenTransaction = (transaction: TTransaction) => {
    // If we're in a second panel (e.g., risk profile), move transaction to first panel
    // and save current second panel to history
    if (secondPanelContent) {
      // Save current second panel to history so we can restore it later
      saveToHistory();
      // Set transaction in first panel
      setFirstPanelContent("transaction");
      setContentHistory("default");
      // In single panel mode, clear second panel so first panel is visible
      if (isSinglePanelSize) {
        setSecondPanelContent("");
      }
    } else {
      // No second panel open, so open transaction in second panel
      navigateToSecondPanel("transaction", {
        saveHistory: true,
        fallbackHistory: "transaction",
        setFirstPanel: "transaction",
        setContentHistory: "default",
      });
    }
    const isNewTransaction =
      !!transaction && transaction.id !== openTransaction?.id;
    isNewTransaction && setOpenTransaction(transaction);
  };
 
  const isFirstPanelHidden = contentHistory !== "" && firstPanelContent === "";
 
  const handleClose = () => {
    // If we have history, restore it
    if (restoreFromHistory(true)) {
      return;
    }
    // If no history but we're in mobile/single panel mode with contentHistory, close all
    if ((!isMobileView || isSinglePanelSize) && contentHistory !== "") {
      handleCloseAll();
      return;
    }
    // If mobile view we need to close the second panel
    if (isMobileView) {
      setSecondPanelContent("");
      return;
    }
    // If both first and second panels are empty/cleared, close the entire panel
    if (!firstPanelContent) {
      handleCloseAll();
      return;
    }
 
    // Otherwise, just clear second panel
    setSecondPanelContent("");
  };
 
  switch (secondPanelContent) {
    case "merchantFile":
      return <GiveMerchantFile handleClosePanel={handleClose} />;
    case "agreement":
      return isProvider ? (
        <GiveProviderAgreementPanel
        handleClose={handleClose}
        />
      ) : (
        <AgreementAndSnapshot handleClose={handleClose} />
      );
    case "underwriting":
      return <UnderwritingTasksPanel handleClose={handleClose} data={data} />;
    case "riskExport":
      return (
        <GiveExportContent
          handleClose={handleClose}
          fieldTypes={exportType.RISK_TRANSACTIONS}
          merchantID={id}
          counts={transactionCounts}
        />
      );
    case "riskFilter":
      return (
        <GiveFilterModalContent
          handleClose={handleClose}
          filterPage={FilterPagesEnum.MERCHANT_RISK_PANEL}
        />
      );
    case "transactionRiskProfile":
      return (
        <GiveRiskProfile
          data={transactionRiskProfile}
          onClose={() => {
            // If transaction is in first panel, move it to second panel
            if (openTransaction && firstPanelContent === "transaction") {
              // Clear first panel
              setFirstPanelContent("");
              setContentHistory("");
              // Ensure transaction data is set
              setOpenTransaction(openTransaction);
              // Clear the risk profile state (this sets secondPanelContent to "")
              handleOpenTransactionRiskProfile(null);
              // Override: set second panel to transaction (React batches updates, last one wins)
              setSecondPanelContent("transaction");
              setSecondPanelContentHistory("");
            } else {
              // Clear the risk profile
              handleOpenTransactionRiskProfile(null);
              // Try to restore from history
              if (!restoreFromHistory()) {
                // If no history to restore, just clear second panel
                setSecondPanelContent("");
                if (isFirstPanelHidden) handleCloseAll();
              }
            }
          }}
          openMainPanel={handleOpenTransaction}
        />
      );
    case "customer":
      return (
        <CustomerPanelContent
          onClose={() => {
            // Always go back to transactionRiskProfile if it exists in history, otherwise transaction
            if (secondPanelContentHistory === "transactionRiskProfile") {
              navigateToSecondPanel("transactionRiskProfile");
            } else if (secondPanelContentHistory === "transaction") {
              navigateToSecondPanel("transaction");
            } else {
              setSecondPanelContent("transactionRiskProfile");
            }
          }}
          data={openCustomer}
          merchantID={openCustomer ? openCustomer.merchAccID : id}
        />
      );
    case "provider":
    case "merchant":
      return (
        <SidePanelContainerWrapper>
          <FirstPanelContent />
        </SidePanelContainerWrapper>
      );
    case "transaction": {
      if (openTransaction) {
        return (
          <TransactionPanelContent
            data={openTransaction}
            handleCustomer={(open, customerData) => {
              if (open) {
                setOpenCustomer(customerData);
                handleOpenTransaction(openTransaction);
                // Save current second panel content as history before opening customer
                // If we already have history (e.g., from risk profile), keep it
                // Otherwise, save "transactionRiskProfile" as the expected previous state
                if (!secondPanelContentHistory) {
                  saveToHistory("transactionRiskProfile");
                }
                setSecondPanelContent("customer");
              } else {
                // If closing customer, restore from history
                if (!restoreFromHistory()) {
                  setSecondPanelContent("");
                }
              }
            }}
            handleSidePanelOpen={() => {
              handleOpenTransaction(openTransaction);
              // Save transaction as history before opening risk profile
              navigateToSecondPanel("transactionRiskProfile", {
                saveHistory: true,
                fallbackHistory: "transaction",
              });
            }}
            onClose={() => {
              // If we have history, restore it
              if (!restoreFromHistory()) {
                setSecondPanelContent("");
              }
            }}
            handleOpenMerchant={(type, id) => {
              handleOpenTransaction(openTransaction);
              if (type === "provider") handleSetProviderID(Number(id));
              // Save transaction as history before opening merchant/provider
              navigateToSecondPanel(type, {
                saveHistory: true,
                fallbackHistory: "transaction",
              });
            }}
          />
        );
      }
      return <></>;
    }
    default:
      return <></>;
  }
};
 
export default SecondPanelOptions;