[Log] IF-LGSP-LOG-005 (GNB), added logic for popup display

Detail Note:

1. GroupProduct.jsx
2. SingleProduct.jsx
3. HotelProduct.jsx
4. ShowProduct.jsx
5. ThemeProduct.jsx
6. UnableProduct.jsx
7. OnSalePanel.jsx
This commit is contained in:
younghoon100.park
2024-06-18 20:10:46 +09:00
parent 0eddcd6c2a
commit fc7f6e37f1
9 changed files with 117 additions and 39 deletions

View File

@@ -123,7 +123,7 @@ export const postLog = (params) => (dispatch, getState) => {
const onSuccess = (response) => {
// console.log(
// `%c Log ---------- postLog onSuccess logTpNo ${logTpNo} ----------`,
// `%c log ---------- postLog onSuccess logTpNo ${logTpNo} ----------`,
// "background: steelblue; color: white",
// JSON.parse(response.config.data)
// );

View File

@@ -151,8 +151,6 @@ export const LOG_TP_NO = {
GNB: "300",
HOME: {},
TOP_CONTENTS: "310",
PRODUCT: {
@@ -216,7 +214,7 @@ export const LOG_MENU = {
SYSTEM_ALERT: "System Alert",
UNKNOWN: "Unknown",
POP_UP: "Pop Up", // 미작업
POP_UP: "Pop Up", // completed
TERMS_CONDITIONS: "Terms & Conditions", // completed
HOME_TOP: "Home/Top", // completed
@@ -241,7 +239,7 @@ export const LOG_MENU = {
CATEGORY_POPULAR_SHOWS: "Category/Popular Shows", // completed
CATEGORY_BEST_SELLER: "Category/Best Sellers", // completed
FEATURED_BRANDS_QUICK_MENU: "Featured Brands/Quick Menu", // completed
FEATURED_BRANDS_QUICK_MENU: "Featured Brands/Quick Menu", // pyh todo, 문의, completed
FEATURED_BRANDS_LIVE_CHANNELS: "Featured Brands/Live Channels", // completed
FEATURED_BRANDS_UPCOMING: "Featured Brands/Upcoming", // completed
FEATURED_BRANDS_TODAYS_DEALS: 'Featured Brands/Today"s Deals', // completed
@@ -269,11 +267,11 @@ export const LOG_MENU = {
DETAIL_PAGE_TRAVEL_THEME_DETAIL: "Detail Page/Travel Theme Detail", // completed
DETAIL_PAGE_GROUP_DETAIL: "Detail Page/Group Detail", // completed
FULL: "Full",
FULL_SHOP_NOW: "Full/Shop Now",
FULL_YOU_MAY_LIKE: "Full/You May Like",
FULL_LIVE_CHANNELS: "Full/Live Channels",
FULL_FEATURED_SHOWS: "Full/Featured Shows",
FULL: "Full", // pyh todo, 문의, completed
FULL_SHOP_NOW: "Full/Shop Now", // completed
FULL_YOU_MAY_LIKE: "Full/You May Like", // completed
FULL_LIVE_CHANNELS: "Full/Live Channels", // completed
FULL_FEATURED_SHOWS: "Full/Featured Shows", // completed
CHECKOUT_PIN_CODE: "Checkout/PIN Code",
CHECKOUT_ORDER_COMPLETE: "Checkout/Order Complete",

View File

@@ -33,6 +33,8 @@ export default function GroupProduct({
sendLogShopByMobile,
} = useLogService();
const popupVisible = useSelector((state) => state.common.popup.popupVisible);
const productData = useSelector((state) => state.main.productData);
const isProductSoldOut = useMemo(() => {
@@ -44,8 +46,12 @@ export default function GroupProduct({
}, [productData]);
useEffect(() => {
sendLogGNB(LOG_MENU.DETAIL_PAGE_GROUP_DETAIL);
if (!popupVisible) {
sendLogGNB(LOG_MENU.DETAIL_PAGE_GROUP_DETAIL);
}
}, [popupVisible, sendLogGNB]);
useEffect(() => {
if (productData) {
const params = {
befPrice: productData?.priceInfo?.split("|")[0],
@@ -69,7 +75,7 @@ export default function GroupProduct({
return () => sendLogProductDetail(params);
}
}, [productData, sendLogGNB, sendLogProductDetail]);
}, [productData, sendLogProductDetail]);
const handleIndicatorOptions = useCallback(() => {
if (productData) {

View File

@@ -33,6 +33,8 @@ export default function SingleProduct({
sendLogShopByMobile,
} = useLogService();
const popupVisible = useSelector((state) => state.common.popup.popupVisible);
const productData = useSelector((state) => state.main.productData);
const isProductSoldOut = useMemo(() => {
@@ -44,8 +46,12 @@ export default function SingleProduct({
}, [productData]);
useEffect(() => {
sendLogGNB(LOG_MENU.DETAIL_PAGE_BILLING_PRODUCT_DETAIL);
if (!popupVisible) {
sendLogGNB(LOG_MENU.DETAIL_PAGE_BILLING_PRODUCT_DETAIL);
}
}, [popupVisible, sendLogGNB]);
useEffect(() => {
if (productData) {
const params = {
befPrice: productData?.priceInfo?.split("|")[0],
@@ -69,7 +75,7 @@ export default function SingleProduct({
return () => sendLogProductDetail(params);
}
}, [productData, sendLogGNB, sendLogProductDetail]);
}, [productData, sendLogProductDetail]);
const handleIndicatorOptions = useCallback(() => {
if (productData) {

View File

@@ -42,6 +42,8 @@ export default function HotelOption({
const dispatch = useDispatch();
const popupVisible = useSelector((state) => state.common.popup.popupVisible);
const hotelInfos = useSelector(
(state) => state.home.themeCurationHotelDetailData
);
@@ -69,24 +71,10 @@ export default function HotelOption({
}, [hotelData, hotelInfos, selectedIndex]);
useEffect(() => {
sendLogGNB(Config.LOG_MENU.DETAIL_PAGE_TRAVEL_THEME_DETAIL);
if (hotelData) {
const { hotelInfo } = hotelData;
const params = {
curationId: hotelInfo?.curationId ?? "",
curationNm: hotelInfo?.curationNm ?? "",
inDt: formatGMTString(new Date()),
linkTpCd: "",
logTpNo: Config.LOG_TP_NO.DETAIL.TRAVEL_DETAIL,
patncNm: hotelInfo?.patncNm ?? "",
patnrId: hotelInfo?.patnrId ?? "",
};
return () => sendLogDetail(params);
if (!popupVisible) {
sendLogGNB(Config.LOG_MENU.DETAIL_PAGE_TRAVEL_THEME_DETAIL);
}
}, [hotelData, sendLogDetail, sendLogGNB]);
}, [popupVisible, sendLogGNB]);
useEffect(() => {
if (selectedHotelInfo) {
@@ -116,6 +104,24 @@ export default function HotelOption({
return () => clearTimeout(timerRef.current);
}, [selectedHotelInfo, sendLogProductDetail]);
useEffect(() => {
if (hotelData) {
const { hotelInfo } = hotelData;
const params = {
curationId: hotelInfo?.curationId ?? "",
curationNm: hotelInfo?.curationNm ?? "",
inDt: formatGMTString(new Date()),
linkTpCd: "",
logTpNo: Config.LOG_TP_NO.DETAIL.TRAVEL_DETAIL,
patncNm: hotelInfo?.patncNm ?? "",
patnrId: hotelInfo?.patnrId ?? "",
};
return () => sendLogDetail(params);
}
}, [hotelData, sendLogDetail]);
useEffect(() => {
let label = "";
let rating = hotelInfos[selectedIndex]?.hotelDetailInfo.revwGrd;

View File

@@ -19,15 +19,23 @@ const Container = SpotlightContainerDecorator(
);
export default function ShowOption({
isOnTop,
// panelInfo,
panelInfo,
launchedFromPlayer,
selectedIndex,
selectedCurationId,
selectedCurationNm,
// selectedPatnrId,
setSelectedIndex,
shopByMobileLogRef,
}) {
const { sendLogDetail, sendLogGNB, sendLogProductDetail } = useLogService();
const {
sendLogDetail,
sendLogGNB,
sendLogProductDetail,
sendLogShopByMobile,
} = useLogService();
const popupVisible = useSelector((state) => state.common.popup.popupVisible);
const productInfo = useSelector(
(state) => state.home.themeCurationDetailInfoData
@@ -56,8 +64,12 @@ export default function ShowOption({
}, [productData, productInfo, selectedIndex]);
useEffect(() => {
sendLogGNB(LOG_MENU.DETAIL_PAGE_TRAVEL_THEME_DETAIL);
if (!popupVisible) {
sendLogGNB(LOG_MENU.DETAIL_PAGE_TRAVEL_THEME_DETAIL);
}
}, [popupVisible, sendLogGNB]);
useEffect(() => {
if (productData) {
const themeInfo = productData?.themeInfo[0];
@@ -75,7 +87,7 @@ export default function ShowOption({
return () => sendLogDetail(params);
}
}, [sendLogDetail, sendLogGNB, productData]);
}, [productData, sendLogDetail]);
useEffect(() => {
if (showProductInfo) {
@@ -131,6 +143,44 @@ export default function ShowOption({
}
}, [productData, sendLogDetail]);
const handleMobileSendPopupOpen = useCallback(() => {
if (productData) {
const params = {
befPrice: productData?.priceInfo?.split("|")[0],
curationId: productData?.curationId ?? "",
curationNm: productData?.curationNm ?? "",
evntId: "",
evntNm: "",
lastPrice: productData?.priceInfo?.split("|")[1],
lgCatCd: productData?.catCd ?? "",
lgCatNm: productData?.catNm ?? "",
liveFlag: panelInfo?.liveFlag ?? "N",
logTpNo: LOG_TP_NO.SHOP_BY_MOBILE.SHOP_BY_MOBILE,
mbphNoFlag: "N",
patncNm: productData?.patncNm,
patnrId: productData?.patnrId,
prdtId: productData?.prdtId,
prdtNm: productData?.prdtNm,
revwGrd: productData?.rewd ?? "",
rewdAplyFlag: productData?.priceInfo?.split("|")[2],
shopByMobileFlag: "Y",
shopTpNm: "product",
showId: productData?.showId ?? "",
showNm: productData?.showNm ?? "",
trmsAgrFlag: "N",
tsvFlag: productData?.todaySpclFlag ?? "",
};
sendLogShopByMobile(params);
shopByMobileLogRef.current = params;
}
}, [
panelInfo?.liveFlag,
productData,
sendLogShopByMobile,
shopByMobileLogRef,
]);
return (
<>
{productInfo && (
@@ -149,6 +199,7 @@ export default function ShowOption({
/>
<IndicatorOptions
handleIndicatorOptions={handleIndicatorOptions}
handleMobileSendPopupOpen={handleMobileSendPopupOpen}
isCall
isFullOption={productInfo[selectedIndex]?.pmtSuptYn === "Y"}
isDescription={!productInfo[selectedIndex]?.pmtSuptYn === "Y"}

View File

@@ -29,6 +29,7 @@ export default function ThemeProduct({
selectedCurationNm={selectedCurationNm}
selectedPatnrId={selectedPatnrId}
setSelectedIndex={setSelectedIndex}
shopByMobileLogRef={shopByMobileLogRef}
/>
)}
{themeType === "hotel" && (

View File

@@ -33,6 +33,8 @@ export default function UnableProduct({
sendLogShopByMobile,
} = useLogService();
const popupVisible = useSelector((state) => state.common.popup.popupVisible);
const productData = useSelector((state) => state.main.productData);
const isProductSoldOut = useMemo(() => {
@@ -44,8 +46,12 @@ export default function UnableProduct({
}, [productData]);
useEffect(() => {
sendLogGNB(LOG_MENU.DETAIL_PAGE_PRODUCT_DETAIL);
if (!popupVisible) {
sendLogGNB(LOG_MENU.DETAIL_PAGE_PRODUCT_DETAIL);
}
}, [popupVisible, sendLogGNB]);
useEffect(() => {
if (productData) {
const params = {
befPrice: productData?.priceInfo?.split("|")[0],
@@ -69,7 +75,7 @@ export default function UnableProduct({
return () => sendLogProductDetail(params);
}
}, [productData, sendLogGNB, sendLogProductDetail]);
}, [productData, sendLogProductDetail]);
const handleIndicatorOptions = useCallback(() => {
if (productData) {

View File

@@ -29,6 +29,8 @@ export default function OnSalePanel({ panelInfo, spotlightId }) {
const dispatch = useDispatch();
const popupVisible = useSelector((state) => state.common.popup.popupVisible);
const categoryInfos = useSelector(
(state) => state.onSale.onSaleData.data.categoryInfos
);
@@ -70,8 +72,10 @@ export default function OnSalePanel({ panelInfo, spotlightId }) {
// }, [panelInfo]);
useEffect(() => {
sendLogGNB(LOG_MENU.ON_SALE);
}, [sendLogGNB]);
if (!popupVisible) {
sendLogGNB(LOG_MENU.ON_SALE);
}
}, [popupVisible, sendLogGNB]);
useEffect(() => {
if (!panelInfo?.noResetFlag) {