checkout, detailPanel singleOption change logic

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

@@ -4,34 +4,44 @@ import { types } from "./actionTypes";
 import { changeAppStatus } from "./commonActions";
 
 // 회원 체크아웃 정보 조회 IF-LGSP-345
-export const getMyInfoCheckoutInfo = (props) => (dispatch, getState) => {
+export const getMyInfoCheckoutInfo =
-  const { mbrNo, dirPurcSelYn, cartList } = props;
+  (props, callback) => (dispatch, getState) => {
+    const { mbrNo, dirPurcSelYn, cartList } = props;
 
-  const onSuccess = (response) => {
+    dispatch(
-    console.log("getMyInfoCheckoutInfo onSuccess: ", response.data);
+      changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } })
+    );
 
-    dispatch({
+    const onSuccess = (response) => {
-      type: types.GET_CHECKOUT_INFO,
+      console.log("getMyInfoCheckoutInfo onSuccess: ", response.data);
-      payload: response.data.data,
+
-    });
+      dispatch({
+        type: types.GET_CHECKOUT_INFO,
+        payload: response.data.data,
+      });
+
+      if (callback) callback(response.data);
+
+      dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+    };
+
+    const onFail = (error) => {
+      console.error("getMyInfoCheckoutInfo OnFail: ", error);
+      dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+    };
+
+    TAxios(
+      dispatch,
+      getState,
+      "post",
+      URLS.GET_CHECKOUT_INFO,
+      {},
+      { mbrNo, dirPurcSelYn, cartList },
+      onSuccess,
+      onFail
+    );
   };
 
-  const onFail = (error) => {
-    console.error("getMyInfoCheckoutInfo OnFail: ", error);
-  };
-
-  TAxios(
-    dispatch,
-    getState,
-    "post",
-    URLS.GET_CHECKOUT_INFO,
-    {},
-    { mbrNo, dirPurcSelYn, cartList },
-    onSuccess,
-    onFail
-  );
-};
-
 // 회원 CheckOut 상품 주문 IF-LGSP-346
 export const insertMyInfoCheckoutOrder =
   (props, callback) => (dispatch, getState) => {
@@ -65,61 +75,6 @@ export const insertMyInfoCheckoutOrder =
     );
   };
 
-// 파트너사 배송비 및 LBP 관련 세금 정보 IF-LGSP-362
-export const getTaxInfos = (props) => (dispatch, getState) => {
-  const {
-    mbrNo,
-    bilAddrSno,
-    dlvrAddrSno,
-    reqCheckoutTaxInfoItemList,
-    patnrId,
-    prdtId,
-    prodQty,
-    prodPrc,
-    taxCd,
-    frgTaxCd,
-    dcAmt,
-    cpnSno,
-  } = props;
-
-  const onSuccess = (response) => {
-    console.log("getTaxInfos onSuccess: ", response.data);
-
-    dispatch({
-      type: types.GET_TAX_INFOS,
-      payload: response.data.data,
-    });
-  };
-
-  const onFail = (error) => {
-    console.error("getTaxInfos onFail: ", error);
-  };
-
-  TAxios(
-    dispatch,
-    getState,
-    "post",
-    URLS.GET_TAX_INFOS,
-    {},
-    {
-      mbrNo,
-      bilAddrSno,
-      dlvrAddrSno,
-      reqCheckoutTaxInfoItemList,
-      patnrId,
-      prdtId,
-      prodQty,
-      prodPrc,
-      taxCd,
-      frgTaxCd,
-      dcAmt,
-      cpnSno,
-    },
-    onSuccess,
-    onFail
-  );
-};
-
 export const getCheckoutTotalAmt = (params) => (dispatch, getState) => {
   const {
     mbrNo,

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

@@ -45,7 +45,6 @@ export default function CheckOutPanel() {
   const checkoutPanelInfo = panels.find(
     (panel) => panel.name === "checkoutpanel"
   )?.panelInfo;
-  const checkoutData = useSelector((state) => state.checkout?.checkoutData);
 
   const productData = useSelector(
     (state) => state.checkout?.checkoutData.productList
@@ -60,13 +59,11 @@ export default function CheckOutPanel() {
   const { popupVisible, activePopup } = useSelector(
     (state) => state.common.popup
   );
-  const { billingAddressList, shippingAddressList, cardInfo } =
+  const { currSign, currSignLoc } = productData?.[0] || {};
-    checkoutData || {};
 
   const [orderSideBarOpen, setOrderSideBarOpen] = useState(false);
   const [offerSideBarOpen, setOfferSideBarOpen] = useState(false);
   const [placeOrderPopup, setPlaceOrderPopup] = useState(false);
-  const [loading, setLoading] = useState(true);
   const [currentTerms, setCurrentTerms] = useState(null);
   const [tabList, setTabList] = useState([]);
   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
@@ -82,42 +79,17 @@ export default function CheckOutPanel() {
   useEffect(() => {
     isMounted.current = true;
 
-    dispatch(
-      changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } })
-    );
-
-    if (!loading) {
-      dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
-    }
-
     return () => {
       isMounted.current = false;
     };
-  }, [loading, dispatch]);
+  }, []);
 
   useEffect(() => {
     dispatch(getShoptimeTerms());
-
+  }, [dispatch]);
-    dispatch(
-      getMyInfoCheckoutInfo({
-        mbrNo: userNumber,
-        dirPurcSelYn: "Y",
-        cartList: [
-          {
-            patnrId: checkoutPanelInfo.cartList.patnrId,
-            prdtId: checkoutPanelInfo.cartList.prdtId,
-            prodOptCdCval: checkoutPanelInfo.cartList.prodOptCdCval,
-            prodQty: checkoutPanelInfo.cartList.prodQty,
-          },
-        ],
-      })
-    );
-  }, [dispatch, userNumber, checkoutPanelInfo]);
 
   useEffect(() => {
     if (infoForCheckoutData && productData) {
-      setLoading(false);
-
       const orderProductCoupontUse = Object.keys(selectedCoupons).map(
         (productId) => {
           const { cpnCdSeq, cpnSno, prdtId } = selectedCoupons[productId];
@@ -148,21 +120,8 @@ export default function CheckOutPanel() {
           })
         );
       }
-
-      if (!billingAddressList || !shippingAddressList || !cardInfo) {
-        dispatch(setShowPopup(Config.ACTIVE_POPUP.qrPopup2));
-      }
     }
-  }, [
+  }, [dispatch, infoForCheckoutData, productData, userNumber, selectedCoupons]);
-    dispatch,
-    infoForCheckoutData,
-    productData,
-    userNumber,
-    selectedCoupons,
-    billingAddressList,
-    shippingAddressList,
-    cardInfo,
-  ]);
 
   useEffect(() => {
     const newTabList = [];
@@ -218,11 +177,6 @@ export default function CheckOutPanel() {
     dispatch(setHidePopup());
   }, [dispatch]);
 
-  const onCloseQRPopup = useCallback(() => {
-    dispatch(setHidePopup());
-    dispatch(popPanel());
-  }, []);
-
   const handleTermsClick = useCallback(
     (termsID) => {
       if (empTermsData) {
@@ -284,6 +238,8 @@ export default function CheckOutPanel() {
               setPlaceOrderPopup={setPlaceOrderPopup}
               empTermsData={empTermsData}
               handleTermsClick={handleTermsClick}
+              currSign={currSign}
+              currSignLoc={currSignLoc}
             />
             <InformationContainer
               toggleOrderSideBar={toggleOrderSideBar}
@@ -340,33 +296,6 @@ export default function CheckOutPanel() {
         </TPopUp>
       )}
 
-      {activePopup === Config.ACTIVE_POPUP.qrPopup2 && (
-        <TPopUp kind="qrPopup" open={popupVisible} onClose={onCloseQRPopup}>
-          <div className={css.popupContainer}>
-            <div className={css.header}>
-              <h3>{$L("QR CODE")}</h3>
-            </div>
-            <div className={css.qrcodeContainer}>
-              <div className={css.qrcode}>
-                <TQRCode text="http://google.com" width="360" height="360" />
-              </div>
-              <h3>
-                {$L(
-                  "If you want to add or edit your address and payment information, please scan the QR CODE."
-                )}
-              </h3>
-              <TButton
-                className={css.popupBtn}
-                onClick={onCloseQRPopup}
-                spotlightId="checkoutCloseButton"
-              >
-                {$L("CLOSE")}
-              </TButton>
-            </div>
-          </div>
-        </TPopUp>
-      )}
-
       <TFullPopup
         open={placeOrderPopup}
         className={css.pinCodePopup}

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

@@ -1,80 +0,0 @@
-import React, { useState } from 'react';
-
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
-
-import TButton from '../../../components/TButton/TButton';
-import { $L } from '../../../utils/helperMethods';
-import css from './PinCode.module.less';
-
-const Container = SpotlightContainerDecorator(
-  { enterTo: "last-focused" },
-  "div"
-);
-const ContainerCode = SpotlightContainerDecorator(
-  { enterTo: "last-focused" },
-  "div"
-);
-const ContainerNum = SpotlightContainerDecorator(
-  { enterTo: "default-element" },
-  "div"
-);
-
-const SpottableDiv = Spottable("div");
-const SpottableBtn = Spottable("button");
-
-export default function PinCode() {
-  const [numOne, setNumOne] = useState(null);
-  const [numTwo, setNumTwo] = useState(null);
-  const [numThree, setNumThree] = useState(null);
-  const [numFour, setNumFour] = useState(null);
-  const _onClick = () => {};
-  const _onClose = () => {};
-  return (
-    <Container className={css.container}>
-      <div className={css.title}>Enter PIN CODE</div>
-      <ContainerCode className={css.pinCodeBox}>
-        <SpottableDiv className={css.pinCode} spotlightId={"code_One"}>
-          {numOne}
-        </SpottableDiv>
-        <SpottableDiv className={css.pinCode} spotlightId={"code_Two"}>
-          {numTwo}
-        </SpottableDiv>
-        <SpottableDiv className={css.pinCode} spotlightId={"code_Three"}>
-          {numThree}
-        </SpottableDiv>
-        <SpottableDiv className={css.pinCode} spotlightId={"code_Four"}>
-          {numFour}
-        </SpottableDiv>
-        <input type="hidden" name={"pinCode"} value />
-      </ContainerCode>
-
-      <div className={css.errorText}>
-        {/* The purchase cannot be processed with the registered payment
-        information. Please check your payment information again. */}
-      </div>
-      <ContainerNum className={css.pinCodeSelector}>
-        <SpottableBtn spotlightId={"PinCode_1"}>1</SpottableBtn>
-        <SpottableBtn spotlightId={"PinCode_2"}>2</SpottableBtn>
-        <SpottableBtn spotlightId={"PinCode_3"}>3</SpottableBtn>
-        <SpottableBtn spotlightId={"PinCode_4"}>4</SpottableBtn>
-        <SpottableBtn spotlightId={"PinCode_5"}>5</SpottableBtn>
-        <SpottableBtn spotlightId={"PinCode_6"}>6</SpottableBtn>
-        <SpottableBtn spotlightId={"PinCode_7"}>7</SpottableBtn>
-        <SpottableBtn spotlightId={"PinCode_8"}>8</SpottableBtn>
-        <SpottableBtn spotlightId={"PinCode_9"}>9</SpottableBtn>
-        <SpottableBtn spotlightId={"PinCode_0"}>0</SpottableBtn>
-        <SpottableBtn spotlightId={"PinCode_DelBtn"}></SpottableBtn>
-      </ContainerNum>
-      <div className={css.buttonContainer}>
-        <TButton spotlightId="tPopupBtn1" onClick={_onClick}>
-          {$L("Cancel")}
-        </TButton>
-        <TButton spotlightId="tPopupBtn2" onClick={_onClose}>
-          {$L("OK")}
-        </TButton>
-      </div>
-    </Container>
-  );
-}

com.twin.app.shoptime/src/views/CheckOutPanel/components/PinCode.module.less

@@ -1,106 +0,0 @@
-@import "../../../style/CommonStyle.module.less";
-@import "../../../style/utils.module.less";
-
-.container {
-  width: 1920px;
-  height: 1080px;
-  background-color: #000;
-  .title {
-    margin: 120px auto 0;
-    text-align: center;
-    font-size: 72px;
-    font-weight: 200;
-    color: #e6e6e6;
-    width: 1320px;
-    height: 84px;
-    line-height: 84px;
-  }
-  .pinCodeBox {
-    margin: 162px auto 0;
-    width: 534px;
-    height: 144px;
-    display: flex;
-    .pinCode {
-      width: 120px;
-      height: 144px;
-      border-radius: 6px;
-      background-color: #e6e6e6;
-      margin-right: 18px;
-      opacity: 0.15;
-      &:focus {
-        background-color: #fff;
-        opacity: 1;
-      }
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-  .errorText {
-    margin: 24px auto 60px;
-    height: 66px;
-    width: 1070px;
-    text-align: center;
-    display: flex;
-    font-size: 30px;
-    color: #fb5656;
-    align-items: center;
-  }
-  .pinCodeSelector {
-    width: 924px;
-    height: 84px;
-    margin: 0 auto;
-    display: flex;
-    > button {
-      width: 84px;
-      height: 84px;
-      line-height: 84px;
-      text-align: center;
-      color: #e6e6e6;
-      font-size: 42px;
-      font-weight: bold;
-      &:focus {
-        background: #fff;
-        color: #4c5059;
-        border-radius: 6px;
-        font-weight: bold;
-      }
-      &:last-child {
-        background: url("../../../../assets/images/icons/ic-delete-nor@3x.png");
-        background-size: contain;
-        &:focus {
-          background: url("../../../../assets/images/icons/ic-delete-foc@3x.png");
-          background-size: contain;
-        }
-      }
-    }
-  }
-  .buttonContainer {
-    display: flex;
-    justify-content: center;
-    margin-top: 168px;
-
-    > div {
-      width: 270px;
-      height: 72px;
-      line-height: 72px;
-      font-weight: 200;
-      margin: 0 10px;
-      background: @COLOR_GRAY09;
-      &:focus {
-        box-shadow: 0px 18px 28.2px 1.8px rgba(62, 59, 59, 0.4);
-        background-color: @PRIMARY_COLOR_RED;
-        color: @COLOR_WHITE;
-        transform: translateY(3%) translateX(-3%) scale(1.1);
-      }
-      &:last-child {
-        &:focus {
-          box-shadow: 0px 18px 28.2px 1.8px rgba(62, 59, 59, 0.4);
-          background-color: @PRIMARY_COLOR_RED;
-          color: @COLOR_WHITE;
-          transform: translateY(3%) translateX(3%) scale(1.1);
-        }
-      }
-    }
-  }
-}

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
@@ -19,23 +19,25 @@ export default function SummaryContainer({
   setPlaceOrderPopup,
   empTermsData,
   handleTermsClick,
+  currSign,
+  currSignLoc,
 }) {
   const dispatch = useDispatch();
 
   const priceTotalData = useSelector(
-    (state) => state.checkout?.checkoutTotalData?.orderTotalAmtInfo
+    (state) => state.checkout?.checkoutTotalData
   );
+  const productList = useSelector((state) => state.checkout?.checkoutData);
 
   const items = [
-    { name: "Items", value: priceTotalData?.totProdPrc || "-" },
+    { name: "Items", value: priceTotalData.totProdPrc || "-" },
-    { name: "Options Total", value: priceTotalData?.totOptPrc || "-" },
-    { name: "Shipping & Handling", value: priceTotalData?.totDlvrAmt || "-" },
-    { name: "TOTAL (before Tax)", value: priceTotalData?.totProdPrc || "-" },
-    { name: "Estimated Sales Tax", value: priceTotalData?.ordTotTaxAmt || "-" },
     {
       name: "Your Coupon Savings",
-      value: priceTotalData?.cpnAplyMaxDcAmt || "-",
+      value: priceTotalData.totDcAmt || "-",
     },
+    { name: "Shipping & Handling", value: priceTotalData.totDlvrAmt || "-" },
+    { name: "TOTAL (before Tax)", value: priceTotalData.totProdPrc || "-" },
+    { name: "Estimated Sales Tax", value: priceTotalData.ordTotTaxAmt || "-" },
   ];
 
   const handleClickOrder = useCallback(() => {
@@ -51,14 +53,26 @@ export default function SummaryContainer({
           {items.map((item, index) => (
             <div key={index} className={css.item}>
               <span className={css.summaryDesc}>{item.name}</span>
-              <span className={css.summaryCnt}>{item.value}</span>
+              <span className={css.summaryCnt}>
+                {currSign && currSignLoc
+                  ? currSignLoc === "L"
+                    ? `${currSign} ${item.value}`
+                    : `${item.value} ${currSign}`
+                  : " - "}
+              </span>
             </div>
           ))}
         </div>
       </div>
       <div className={css.total}>
         <div>Estimated Total</div>
-        <div className={css.price}>{priceTotalData?.ordPmtReqAmt || "-"}</div>
+        <div className={css.price}>
+          {currSign && currSignLoc
+            ? currSignLoc === "L"
+              ? `${currSign} ${priceTotalData?.ordPmtReqAmt || "-"}`
+              : `${priceTotalData?.ordPmtReqAmt || "-"} ${currSign}`
+            : " - "}
+        </div>
       </div>
       <div className={css.bottom}>
         <ul className={css.termsWrap}>

com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx

@@ -13,6 +13,7 @@ import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";
 
+import { getMyInfoCheckoutInfo } from "../../../actions/checkoutActions";
 import {
   launchMembershipApp,
   setHidePopup,
@@ -244,32 +245,95 @@ export default function SingleOption({
     }
   }, [activePopup, selectedBtnOptIdx, selectedOptionItemIndex]);
 
-  const handleLoginPopup = useCallback(() => {
+  // const handleLoginPopup = useCallback(() => {
-    if (hasOnClose || !loginUserData.userNumber) {
+  //   if (hasOnClose || !loginUserData.userNumber) {
-      return dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup));
+  //     return dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup));
-    }
+  //   }
 
-    dispatch(
+  //   dispatch(
-      pushPanel({
+  //     pushPanel({
-        name: Config.panel_names.CHECKOUT_PANEL,
+  //       name: Config.panel_names.CHECKOUT_PANEL,
-        panelInfo: {
+  //       panelInfo: {
-          cartList: {
+  //         cartList: {
-            patnrId: selectedPatnrId,
+  //           patnrId: selectedPatnrId,
-            prdtId: selectedPrdtId,
+  //           prdtId: selectedPrdtId,
-            prodOptCdCval: selectedOptions?.prodOptCdCval,
+  //           prodOptCdCval: selectedOptions?.prodOptCdCval,
-            prodQty: quantity,
+  //           prodQty: quantity,
-          },
+  //         },
-        },
+  //       },
-      })
+  //     })
+  //   );
+  // }, [
+  //   dispatch,
+  //   hasOnClose,
+  //   loginUserData.userNumber,
+  //   quantity,
+  //   selectedPatnrId,
+  //   selectedPrdtId,
+  //   selectedOptions,
+  // ]);
+
+  function checkOutValidate(response) {
+    if (response) {
+      if (response.retCode === 0) {
+        if (
+          response.data.cardInfo === null ||
+          response.data.billingAddressList === null ||
+          response.data.shippingAddressList === null
+        ) {
+          dispatch(setShowPopup(Config.ACTIVE_POPUP.qrPopup));
+        } else {
+          dispatch(
+            pushPanel({
+              name: Config.panel_names.CHECKOUT_PANEL,
+              panelInfo: {},
+            })
+          );
+        }
+      }
+    } else {
+      console.error("network error", response.retCode);
+    }
+  }
+
+  const handleClickBuyNow = useCallback(() => {
+    console.log(
+      "chw",
+      userNumber,
+      selectedPatnrId,
+      selectedPrdtId,
+      selectedOptions,
+      quantity
     );
+    if (userNumber && selectedPatnrId && selectedPrdtId && quantity) {
+      dispatch(
+        getMyInfoCheckoutInfo(
+          {
+            mbrNo: userNumber,
+            dirPurcSelYn: "Y",
+            cartList: [
+              {
+                patnrId: selectedPatnrId,
+                prdtId: selectedPrdtId,
+                prodOptCdCval: selectedOptions?.prodOptCdCval
+                  ? selectedOptions.prodOptCdCval
+                  : null,
+                prodQty: quantity,
+              },
+            ],
+          },
+          checkOutValidate
+        )
+      );
+    }
   }, [
     dispatch,
-    hasOnClose,
+    userNumber,
-    loginUserData.userNumber,
-    quantity,
     selectedPatnrId,
     selectedPrdtId,
     selectedOptions,
+    quantity,
+    checkOutValidate,
   ]);
 
   const handleCouponClick = useCallback(
@@ -605,7 +669,7 @@ export default function SingleOption({
       <Container className={css.bottomBtnLayer}>
         <TButton
           className={css.buyNowBtn}
-          onClick={handleLoginPopup}
+          onClick={handleClickBuyNow}
           spotlightId={"spotlightId_buynowBtn"}
         >
           {$L("BUY NOW")}