[Log] IF-LGSP-LOG-109 / order completion details (history)

com.twin.app.shoptime/src/actions/logActions.js

@@ -123,6 +123,10 @@ export const getUrlByLogTpNo = (logTpNo) => {
     // IF-LGSP-LOG-104 / Order 취소/반품/교환 이력
     case LOG_TP_NO.ORDER_CHANGE:
       return URLS.LOG_ORDER_CHANGE;
+
+    // IF-LGSP-LOG-109 / 결제 완료 이력
+    case LOG_TP_NO.PAYMENT_COMPLETE:
+      return URLS.LOG_PAYMENT_COMPLETE;
     default:
       return;
   }

com.twin.app.shoptime/src/hooks/useLogService.js

@@ -1150,6 +1150,92 @@ export default function useLogService() {
     [dispatch, entryMenuRef, nowMenuRef]
   );
 
+  /**
+   * IF-LGSP-LOG-109 / 결제 완료 이력
+   *
+   * (M) cartTpSno 장바구니 구분 일련번호 ("사용자ID_상품ID_일련번호") ----------- productList?.mbrId + "_" + productList?.prdtId + "_" + productList?.prodSno
+   *
+   * (M) cpnSno 쿠폰 일련번호 ----------- String(productList?.prdtCoupon[0]?.cpnCdSeq)
+   *
+   * (M) cpnTtl 쿠폰 제목 ----------- productList?.prdtCoupon[0]?.cpnTpNm
+   *
+   * (M) dcAftrPrc 할인 후 가격 ----------- productList?.priceInfo.split('|')[3]
+   *
+   * (M) dcBefPrc 할인 전 가격 ----------- productList?.priceInfo.split('|')[0]
+   *
+   * (M) entryMenu 진입 메뉴 ----------- entryMenu.current
+   *
+   * (M) lgCatCd 카테고리 코드 ----------- productList?.catCd ?? ""
+   *
+   * (M) lgCatNm 카테고리 이름 ----------- productList?.catNm ?? ""
+   *
+   * (M) logTpNo 로그 타입 넘버 ----------- "901"
+   *
+   * (M) nowMenu 현재 메뉴 ----------- nowMenuRef.current
+   *
+   * (M) patncNm 파트너 이름 ----------- productList?.patncNm
+   *
+   * (M) patnrId 파트너 아이디 ----------- productList?.patnrId
+   *
+   * (M) prodId 상품 아이디 ----------- productList?.prdtId
+   *
+   * (M) prodNm 상품 이름 ----------- productList?.prdtNm
+   *
+   * (O) prodOptSno 상품 옵션 일련번호 ----------- String(productList?.prodSno) ?? ""
+   *
+   * (M) qty 수량 ----------- productList?.prodQty
+   *
+   * (M) usrNo 사용자 번호 ----------- productList?.mbrNo
+   */
+  const sendLogPaymentComplete = useCallback(
+    (params) => {
+      const {
+        cartTpSno,
+        cpnSno,
+        cpnTtl,
+        dcAftrPrc,
+        dcBefPrc,
+        // lgCatCd,
+        // lgCatNm,
+        patncNm,
+        patnrId,
+        prodId,
+        prodNm,
+        qty,
+        usrNo,
+      } = params;
+
+      if (
+        !cartTpSno ||
+        !cpnSno ||
+        !cpnTtl ||
+        !dcAftrPrc ||
+        !dcBefPrc ||
+        // !lgCatCd ||
+        // !lgCatNm ||
+        !patncNm ||
+        !patnrId ||
+        !prodId ||
+        !prodNm ||
+        !qty ||
+        !usrNo
+      ) {
+        console.error("sendLogPaymentComplete invalid params", params);
+        return;
+      }
+
+      const newParams = {
+        ...params,
+        entryMenu: entryMenuRef.current,
+        logTpNo: LOG_TP_NO.PAYMENT_COMPLETE,
+        nowMenu: nowMenuRef.current,
+      };
+
+      dispatch(postLog(newParams));
+    },
+    [dispatch, entryMenuRef, nowMenuRef]
+  );
+
   /**
    * IF-LGSP-LOG-110 / Featured Brands View 이력
    *
@@ -1227,6 +1313,7 @@ export default function useLogService() {
     sendLogLgAccountLogin,
     sendLogOrderBtnClick,
     sendLogOrderChange,
+    sendLogPaymentComplete,
     sendLogFeaturedBrands,
   };
 }

com.twin.app.shoptime/src/utils/Config.js

@@ -223,6 +223,8 @@ export const LOG_TP_NO = {
   ORDER_BTN_CLICK: "702",
 
   ORDER_CHANGE: "703",
+
+  PAYMENT_COMPLETE: "901",
 };
 
 // TV log update

com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx

@@ -69,6 +69,7 @@ export default function CheckOutPanel() {
   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
   const [resetScroll, setResetScroll] = useState(false);
   const [spotlightDisalbed, setSpotlightDisabled] = useState(false);
+  const [isOrderSuccessful, setIsOrderSuccessful] = useState(false);
 
   const isMounted = useRef(true);
 
@@ -80,14 +81,20 @@ export default function CheckOutPanel() {
   useEffect(() => {
     let nowMenu;
 
-    if (!placeOrderPopup || popupVisible) {
+    if (isOrderSuccessful) {
+      return;
+    }
+    //
+    else if (!placeOrderPopup || popupVisible) {
       nowMenu = Config.LOG_MENU.CHECKOUT;
-    } else if (placeOrderPopup) {
+    }
+    //
+    else if (placeOrderPopup) {
       nowMenu = Config.LOG_MENU.CHECKOUT_PIN_CODE;
     }
 
     sendLogGNB(nowMenu);
-  }, [placeOrderPopup, popupVisible, sendLogGNB]);
+  }, [isOrderSuccessful, placeOrderPopup, popupVisible, sendLogGNB]);
 
   useEffect(() => {
     isMounted.current = true;
@@ -376,7 +383,10 @@ export default function CheckOutPanel() {
         noAnimation={true}
         spotlightId="pinCodeFullPopup"
       >
-        <PinCodeInput setPlaceOrderPopup={setPlaceOrderPopup} />
+        <PinCodeInput
+          setPlaceOrderPopup={setPlaceOrderPopup}
+          setIsOrderSuccessful={setIsOrderSuccessful}
+        />
       </TFullPopup>
     </>
   );

com.twin.app.shoptime/src/views/CheckOutPanel/components/PinCodeInput.jsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import classNames from "classnames";
 import { useDispatch, useSelector } from "react-redux";
@@ -32,7 +38,10 @@ const PinCodeDigitsContainer = SpotlightContainerDecorator(
 
 const SpottableButton = Spottable("div");
 
-export default function PinCodeInput({ setPlaceOrderPopup }) {
+export default function PinCodeInput({
+  setPlaceOrderPopup,
+  setIsOrderSuccessful,
+}) {
   const dispatch = useDispatch();
 
   const { activePopup, popupVisible } = useSelector(
@@ -64,6 +73,30 @@ export default function PinCodeInput({ setPlaceOrderPopup }) {
 
   const { setupPinUrl } = getQRCodeUrl({ serverType, countryCode });
 
+  const logProductInfo = useMemo(() => {
+    if (productList) {
+      console.log("pyh productList", productList);
+      return {
+        cartTpSno: `${productList?.mbrId}_${productList?.prdtId}_${productList?.prodSno}`,
+        cpnSno: `${productList?.prdtCoupon[0]?.cpnCdSeq}`,
+        cpnTtl: productList?.prdtCoupon[0]?.cpnTpNm,
+        dcAftrPrc: productList?.priceInfo.split("|")[1],
+        dcBefPrc: productList?.priceInfo.split("|")[0],
+        lgCatCd: productList?.catCd ?? "",
+        lgCatNm: productList?.catNm ?? "",
+        patncNm: productList?.patncNm,
+        patnrId: productList?.patnrId,
+        prodId: productList?.prdtId,
+        prodNm: productList?.prdtNm,
+        prodOptSno: `${productList?.prodSno}` ?? "",
+        qty: productList?.prodQty,
+        usrNo: productList?.mbrNo,
+      };
+    }
+
+    return {};
+  }, [productList]);
+
   useEffect(() => {
     if (pinCodeDatas && pinCodeDatas.retCode !== 0 && okClicked) {
       if (!isMounted.current) return;
@@ -185,6 +218,7 @@ export default function PinCodeInput({ setPlaceOrderPopup }) {
               if (!isMounted.current) return;
 
               if (response.data.retCode === 0) {
+                setIsOrderSuccessful(true);
                 setPlaceOrderPopup(false);
                 dispatch(
                   pushPanel({
@@ -192,6 +226,7 @@ export default function PinCodeInput({ setPlaceOrderPopup }) {
                     panelInfo: {
                       orderInfo: response.data.data,
                       auctProdYn: auctProdYn,
+                      logProductInfo: logProductInfo,
                     },
                   })
                 );
@@ -225,6 +260,8 @@ export default function PinCodeInput({ setPlaceOrderPopup }) {
     isMounted,
     auctProdYn,
     dispatch,
+    logProductInfo,
+    setIsOrderSuccessful,
   ]);
 
   const handleClickSetPinCode = useCallback(() => {

com.twin.app.shoptime/src/views/ConfirmPanel/ConfirmPanel.jsx

@@ -14,7 +14,7 @@ import { myPageComponents } from "../MyPagePanel/MyPagePanel";
 import css from "./ConfirmPanel.module.less";
 
 export default function ConfirmPanel({ spotlightId }) {
-  const { sendLogGNB } = useLogService();
+  const { sendLogGNB, sendLogPaymentComplete } = useLogService();
   const dispatch = useDispatch();
 
   const panels = useSelector((state) => state.panels.panels);
@@ -49,10 +49,15 @@ export default function ConfirmPanel({ spotlightId }) {
     totDlvrAmt,
   } = panelInfo?.orderInfo || {};
   const auctProdYn = panelInfo?.auctProdYn || {};
+  const logProductInfo = panelInfo?.logProductInfo || {};
 
   useEffect(() => {
     sendLogGNB(Config.LOG_MENU.CHECKOUT_ORDER_COMPLETE);
-  }, [sendLogGNB]);
+
+    if (logProductInfo && Object.keys(logProductInfo).length > 0) {
+      sendLogPaymentComplete(logProductInfo);
+    }
+  }, [logProductInfo, sendLogGNB, sendLogPaymentComplete]);
 
   const handleCancel = useCallback((e) => {
     if (e && typeof e.preventDefault === "function") {