optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add getQRCodeUrl, apply myInfo / checkout

Browse Source
This commit is contained in:
hyunwoo93.cha
2024-07-02 13:55:21 +09:00
parent 37bc2bf697
commit 11c9ce276a
10 changed files with 229 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
com.twin.app.shoptime/src/components/TFullPopup/TFullPopup.jsx
View File

@@ -1,10 +1,10 @@
import React, { useCallback } from 'react';
import React, { useCallback } from "react";
import classNames from 'classnames';
import classNames from "classnames";
import Popup from '@enact/sandstone/Popup';
import Popup from "@enact/sandstone/Popup";
import css from './TFullPopup.module.less';
import css from "./TFullPopup.module.less";
export default function TFullPopup({
noAnimation = false,
@@ -15,6 +15,7 @@ export default function TFullPopup({
position = "fullscreen",
scrimType = "translucent",
spotlightRestrict,
spotlightId,
className,
children,
}) {
@@ -32,6 +33,7 @@ export default function TFullPopup({
return (
<Popup
spotlightId={spotlightId}
noAnimation={noAnimation}
noAutoDismiss={noAutoDismiss}
onClose={_onClose}

33
com.twin.app.shoptime/src/utils/helperMethods.js
View File

@@ -330,3 +330,36 @@ export const getFormattingCardNo = (cardNumber) => {
.replace(/(.{4})/g, "$1-")
.slice(0, -1);
};
export const getQRCodeUrl = ({
serverType,
countryCode,
patnrId,
prdtId,
dirPurcSelYn = "Y",
prdtData,
}) => {
let baseUrl = "https://m.shoptime.lgappstv.com/";
if (serverType === "qt2") {
baseUrl = "https://qt3-m.shoptime.lgappstv.com/";
} else if (serverType === "qa") {
baseUrl = "https://qt-m.shoptime.lgappstv.com/";
} else if (serverType === "prd") {
baseUrl = "https://m.shoptime.lgappstv.com/";
}
const prdtDataStr = JSON.stringify(prdtData);
const prdtDataBase64 = btoa(prdtDataStr);
return {
detailUrl: `${baseUrl}detail.jsp?patnrId=${patnrId}&prdtId=${prdtId}&cntryCd=${countryCode}&idx=`,
checkoutUrl: `${baseUrl}checkout.jsp?patnrId=${patnrId}&dirPurcSelYn=${dirPurcSelYn}&prdtData=${prdtDataBase64}&cntryCd=${countryCode}`,
shippingAddressListUrl: `${baseUrl}address_list.jsp?from=shipping&cntryCd=${countryCode}`,
billingAddressListUrl: `${baseUrl}address_list.jsp?from=billing&cntryCd=${countryCode}`,
orderPageUrl: `${baseUrl}my_order.jsp?cntryCd=${countryCode}`,
homeUrl: `${baseUrl}home.jsp?cntryCd=${countryCode}`,
setupPinUrl: `${baseUrl}setup_pin.jsp?cntryCd=${countryCode}`,
cardListUrl: `${baseUrl}card_list.jsp?cntryCd=${countryCode}`,
};
};

40
com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
View File

@@ -45,10 +45,6 @@ export default function CheckOutPanel() {
const { userNumber } = useSelector(
(state) => state.common.appStatus.loginUserData
);
const checkoutPanelInfo = panels.find(
(panel) => panel.name === "checkoutpanel"
)?.panelInfo;
const productData = useSelector(
(state) => state.checkout?.checkoutData.productList
);
@@ -72,6 +68,7 @@ export default function CheckOutPanel() {
const [tabList, setTabList] = useState([]);
const [selectedTabIndex, setSelectedTabIndex] = useState(0);
const [resetScroll, setResetScroll] = useState(false);
const [spotlightDisalbed, setSpotlightDisabled] = useState(false);
const isMounted = useRef(true);
@@ -196,14 +193,17 @@ export default function CheckOutPanel() {
const toggleOrderSideBar = useCallback(() => {
setOrderSideBarOpen((prev) => !prev);
setTimeout(() => Spotlight.focus(), 0);
}, []);
const toggleOfferSideBar = useCallback(() => {
setOfferSideBarOpen((prev) => !prev);
setTimeout(() => Spotlight.focus(), 0);
}, []);
const onClosePopup = useCallback(() => {
setPlaceOrderPopup(false);
setTimeout(() => Spotlight.focus(), 0);
}, []);
const onCloseTermsPopup = useCallback(() => {
@@ -254,15 +254,38 @@ export default function CheckOutPanel() {
}
}, [resetScroll]);
useEffect(() => {
Spotlight.focus();
}, [popupVisible, orderSideBarOpen, offerSideBarOpen]);
const onCancelCheckoutPanel = useCallback(
(e) => {
if (orderSideBarOpen) {
setOrderSideBarOpen(false);
setTimeout(() => Spotlight.focus(), 0);
return;
}
if (offerSideBarOpen) {
setOfferSideBarOpen(false);
setTimeout(() => Spotlight.focus(), 0);
return;
}
if (!orderSideBarOpen && !offerSideBarOpen) {
dispatch(popPanel());
e.stopPropagation();
}
},
[orderSideBarOpen, offerSideBarOpen, dispatch]
);
return (
<>
<TPanel
isTabActivated={false}
spotlightDisabled={orderSideBarOpen || offerSideBarOpen}
spotlightDisabled={
orderSideBarOpen || offerSideBarOpen || placeOrderPopup
}
handleCancel={onCancelCheckoutPanel}
>
<TBody className={css.tbody} cbScrollTo={getScrollToBody}>
<THeader
@@ -351,6 +374,7 @@ export default function CheckOutPanel() {
className={css.pinCodePopup}
onClose={onClosePopup}
noAnimation={true}
spotlightId="pinCodeFullPopup"
>
<PinCodeInput setPlaceOrderPopup={setPlaceOrderPopup} />
</TFullPopup>

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

@@ -19,12 +19,16 @@ import TButton from "../../../components/TButton/TButton";
import TPopUp from "../../../components/TPopUp/TPopUp";
import TQRCode from "../../../components/TQRCode/TQRCode";
import * as Config from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import { $L, getQRCodeUrl } from "../../../utils/helperMethods";
import { sha256 } from "../../../utils/sha256";
import { SpotlightIds } from "../../../utils/SpotlightIds";
import css from "./PinCodeInput.module.less";
const PinCodeContainer = SpotlightContainerDecorator("div");
const PinCodeDigitsContainer = SpotlightContainerDecorator(
{ enterTo: null },
"div"
);
const SpottableButton = Spottable("div");
@@ -49,6 +53,10 @@ export default function PinCodeInput({ setPlaceOrderPopup }) {
const auctProdYn = useSelector(
(state) => state.checkout?.checkoutData?.productList?.[0].auctProdYn
);
const serverType = useSelector((state) => state.localSettings.serverType);
const countryCode = useSelector(
(state) => state.common.httpHeader.countryCode
);
const [pin, setPin] = useState(["", "", "", ""]);
const [errorMsg, setErrorMsg] = useState("");
@@ -56,6 +64,8 @@ export default function PinCodeInput({ setPlaceOrderPopup }) {
const isMounted = useRef(true);
const { setupPinUrl } = getQRCodeUrl({ serverType, countryCode });
useEffect(() => {
if (pinCodeDatas && pinCodeDatas.retCode !== 0 && okClicked) {
if (!isMounted.current) return;
@@ -220,12 +230,19 @@ export default function PinCodeInput({ setPlaceOrderPopup }) {
]);
const handleClickSetPinCode = useCallback(() => {
dispatch(setShowPopup(Config.ACTIVE_POPUP.qrPopup));
dispatch(setShowPopup(Config.ACTIVE_POPUP.qrPopup2));
}, [dispatch]);
const handleCancelPopup = useCallback(() => {
dispatch(setHidePopup());
Spotlight.focus(SpotlightIds.PINCODE_CONTAINER);
setTimeout(() => Spotlight.focus("initFocusDigit"), 10);
}, [dispatch]);
const handlePinCodeSetOkButton = useCallback(() => {
setPin(["", "", "", ""]);
dispatch(setHidePopup());
setTimeout(() => Spotlight.focus("initFocusDigit"), 10);
}, [dispatch]);
return (
@@ -254,6 +271,7 @@ export default function PinCodeInput({ setPlaceOrderPopup }) {
key={digit}
className={css.pinCodeDigit}
onClick={() => handleDigitClick(digit.toString())}
spotlightId={digit === 0 ? "initFocusDigit" : null}
>
{digit}
</SpottableButton>
@@ -285,7 +303,7 @@ export default function PinCodeInput({ setPlaceOrderPopup }) {
/>
)}
{activePopup === Config.ACTIVE_POPUP.qrPopup && (
{activePopup === Config.ACTIVE_POPUP.qrPopup2 && (
<TPopUp kind="qrPopup" open={popupVisible} onClose={handleCancelPopup}>
<div className={css.popupContainer}>
<div className={css.header}>
@@ -294,15 +312,18 @@ export default function PinCodeInput({ setPlaceOrderPopup }) {
<div className={css.qrcodeContainer}>
<div className={css.qrcode}>
<TQRCode text={"http://google.com"} width="360" height="360" />
<TQRCode text={setupPinUrl} 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={handleCancelPopup}>
{$L("CLOSE")}
<TButton
className={css.popupBtn}
onClick={handlePinCodeSetOkButton}
>
{$L("DONE")}
</TButton>
</div>
</div>

22
com.twin.app.shoptime/src/views/CheckOutPanel/container/FixedSideBar.jsx
View File

@@ -1,20 +1,18 @@
import React, { useCallback } from 'react';
import React, { useCallback } from "react";
import classNames from 'classnames';
import { useSelector } from 'react-redux';
import classNames from "classnames";
import { useSelector } from "react-redux";
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import noCouponImg from '../../../../assets/images/img-checkout-coupon@3x.png';
import TIconButton from '../../../components/TIconButton/TIconButton';
import TVirtualGridList
from '../../../components/TVirtualGridList/TVirtualGridList';
import { $L } from '../../../utils/helperMethods';
import noCouponImg from "../../../../assets/images/img-checkout-coupon@3x.png";
import TIconButton from "../../../components/TIconButton/TIconButton";
import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList";
import { $L } from "../../../utils/helperMethods";
import OffersPromotionItemCard, {
SIZES,
} from '../components/OffersPromotionItemCard';
import css from './FixedSideBar.module.less';
} from "../components/OffersPromotionItemCard";
import css from "./FixedSideBar.module.less";
const SideBarContainer = SpotlightContainerDecorator("div");

45
com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx
View File

@@ -6,6 +6,7 @@ import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import { getMyInfoCheckoutInfo } from "../../../actions/checkoutActions";
import { setHidePopup, setShowPopup } from "../../../actions/commonActions";
import { popPanel } from "../../../actions/panelActions";
import TButton from "../../../components/TButton/TButton";
@@ -14,7 +15,7 @@ import TQRCode from "../../../components/TQRCode/TQRCode";
import useScrollTo from "../../../hooks/useScrollTo";
import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
import * as Config from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import { $L, getQRCodeUrl } from "../../../utils/helperMethods";
import BillingAddressCard from "../components/BillingAddressCard";
import PaymentCard from "../components/PaymentCard";
import ShippingAddressCard from "../components/ShippingAddressCard";
@@ -52,19 +53,22 @@ export default function InformationContainer({
const totDcAmt = useSelector(
(state) => state.checkout?.checkoutTotalData?.orderTotalAmtInfo?.totDcAmt
);
const serverType = useSelector((state) => state.localSettings.serverType);
const countryCode = useSelector(
(state) => state.common.httpHeader.countryCode
);
const [tab, setTab] = useState(0);
const { getScrollTo } = useScrollTo();
const { scrollTopByDistance } = useScrollTopByDistance();
const { shippingAddressListUrl, billingAddressListUrl, cardListUrl } =
getQRCodeUrl({ serverType, countryCode });
const qrCodeUrls = useMemo(
() => ({
0: "https://qt3-m.shoptime.lgappstv.com/add_address.jsp?from=SHIPPING",
1: "https://qt3-m.shoptime.lgappstv.com/add_address.jsp?from=BILLING",
2: `https://qt3-m.shoptime.lgappstv.com/card_list.jsp?caller=checkout&mode=&selected=${cardInfo}&bilAddrSno=${bilAddrSno}`,
}),
[cardInfo, bilAddrSno]
() => [shippingAddressListUrl, billingAddressListUrl, cardListUrl],
[shippingAddressListUrl, billingAddressListUrl, cardListUrl]
);
const handleFocus = useCallback(() => {
@@ -93,9 +97,30 @@ export default function InformationContainer({
const handleCancel = useCallback(() => {
dispatch(setHidePopup());
dispatch(popPanel());
}, [dispatch]);
const handleDone = useCallback(() => {
dispatch(setHidePopup());
dispatch(
getMyInfoCheckoutInfo({
mbrNo: checkoutData.mbrNo,
dirPurcSelYn: "Y",
cartList: [
{
patnrId: checkoutData.productList?.[0].patnrId,
prdtId: checkoutData.productList?.[0].prdtId,
prodOptCdCval:
checkoutData.productList?.[0].prdtOpt.length > 0
? checkoutData.productList?.[0].prdtOpt?.[0].prodOptCdCval
: null,
prodQty: checkoutData.productList?.[0].prodQty,
},
],
})
),
[dispatch, checkoutData];
});
return (
<>
<Container className={css.container}>
@@ -187,8 +212,8 @@ export default function InformationContainer({
"If you want to add or edit your address and payment information, please scan the QR CODE."
)}
</h3>
<TButton className={css.popupBtn} onClick={handleCancel}>
{$L("CLOSE")}
<TButton className={css.popupBtn} onClick={handleDone}>
{$L("DONE")}
</TButton>
</div>
</div>

30
com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx
View File

@@ -1,20 +1,20 @@
import React, { useEffect } from 'react';
import React, { useEffect } from "react";
import Spotlight from '@enact/spotlight';
import Spotlight from "@enact/spotlight";
import TPanel from '../../components/TPanel/TPanel';
import useLogService from '../../hooks/useLogService';
import useScrollTo from '../../hooks/useScrollTo';
import { LOG_MENU } from '../../utils/Config';
import { SpotlightIds } from '../../utils/SpotlightIds';
import css from './MyPagePanel.module.less';
import Favorites from './MyPageSub/Favorites/Favorites';
import MyInfo from './MyPageSub/MyInfo/MyInfo';
import MyOrders from './MyPageSub/MyOrders/MyOrders';
import RecentlyViewed from './MyPageSub/RecentlyViewed/RecentlyViewed';
import Reminders from './MyPageSub/Reminders/Reminders';
import Support from './MyPageSub/Support/Support';
import TermsOfService from './MyPageSub/TermsOfService/TermsOfService';
import TPanel from "../../components/TPanel/TPanel";
import useLogService from "../../hooks/useLogService";
import useScrollTo from "../../hooks/useScrollTo";
import { LOG_MENU } from "../../utils/Config";
import { SpotlightIds } from "../../utils/SpotlightIds";
import css from "./MyPagePanel.module.less";
import Favorites from "./MyPageSub/Favorites/Favorites";
import MyInfo from "./MyPageSub/MyInfo/MyInfo";
import MyOrders from "./MyPageSub/MyOrders/MyOrders";
import RecentlyViewed from "./MyPageSub/RecentlyViewed/RecentlyViewed";
import Reminders from "./MyPageSub/Reminders/Reminders";
import Support from "./MyPageSub/Support/Support";
import TermsOfService from "./MyPageSub/TermsOfService/TermsOfService";
export default function MyPagePanel({ panelInfo, isOnTop, spotlightId }) {
const { sendLogGNB } = useLogService();

41
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.jsx
View File

@@ -34,7 +34,7 @@ import TQRCode from "../../../../components/TQRCode/TQRCode";
import useLogService from "../../../../hooks/useLogService";
import { getLoginUserData } from "../../../../lunaSend";
import * as Config from "../../../../utils/Config";
import { $L } from "../../../../utils/helperMethods";
import { $L, getQRCodeUrl } from "../../../../utils/helperMethods";
import css from "../MyInfo/MyInfo.module.less";
import BillingAddressTab from "./MyInfoTabContents/BillingAddressTab/BillingAddressTab";
import CouponTab from "./MyInfoTabContents/CouponTab/CouponTab";
@@ -91,17 +91,20 @@ export default function MyInfo({ title, cbScrollTo }) {
(state) => state.panels.panels[panels?.length - 1]
);
const cardInfo = useSelector((state) => state.card.cardData?.easyPmtSeq);
const serverType = useSelector((state) => state.localSettings.serverType);
const countryCode = useSelector(
(state) => state.common.httpHeader.countryCode
);
const [tab, setTab] = useState(Config.MYINFO_TABS.PAYMENT);
const [loginSuccess, setLoginSuccess] = useState(false);
const { shippingAddressListUrl, billingAddressListUrl, cardListUrl } =
getQRCodeUrl({ serverType, countryCode });
const qrCodeUrls = useMemo(
() => ({
0: `https://qt3-m.shoptime.lgappstv.com/card_list.jsp?caller=checkout&mode=&selected=${cardInfo}`,
1: "https://qt3-m.shoptime.lgappstv.com/add_address.jsp?from=BILLING",
2: "https://qt3-m.shoptime.lgappstv.com/add_address.jsp?from=SHIPPING",
}),
[cardInfo]
() => [cardListUrl, billingAddressListUrl, shippingAddressListUrl],
[shippingAddressListUrl, billingAddressListUrl, cardListUrl]
);
const SelectedComponent = myInfoTabContents[tab];
@@ -168,7 +171,25 @@ export default function MyInfo({ title, cbScrollTo }) {
const handleCancel = useCallback(() => {
dispatch(setHidePopup());
}, [dispatch]);
}, []);
const handleDone = useCallback(() => {
dispatch(setHidePopup());
switch (tab) {
case 0:
dispatch(getMyInfoCardSearch({ mbrNo: userNumber }));
break;
case 1:
dispatch(getMyInfoBillingSearch({ mbrNo: userNumber }));
break;
case 2:
dispatch(getMyInfoShippingSearch({ mbrNo: userNumber }));
break;
default:
break;
}
}, [dispatch, tab, userNumber]);
const handleLogout = useCallback(() => {
dispatch(setHidePopup());
@@ -338,10 +359,10 @@ export default function MyInfo({ title, cbScrollTo }) {
</h3>
<TButton
className={css.popupBtn}
onClick={handleCancel}
onClick={handleDone}
ariaLabel="Close"
>
{$L("CLOSE")}
{$L("DONE")}
</TButton>
</div>
</div>

13
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardStatus.jsx
View File

@@ -6,7 +6,10 @@ import defaultLogoImg from "../../../../../../assets/images/ic-tab-partners-defa
import defaultImageItem from "../../../../../../assets/images/img-thumb-empty-product@3x.png";
import { getMyinfoOrderCancelColumnsSearch } from "../../../../../actions/cancelActions";
import { setShowPopup } from "../../../../../actions/commonActions";
import { getMyinfoOrderDetailSearch } from "../../../../../actions/orderActions";
import {
getMyinfoOrderDetailSearch,
getMyinfoOrderShippingSearch,
} from "../../../../../actions/orderActions";
import { pushPanel, updatePanel } from "../../../../../actions/panelActions";
import CustomImage from "../../../../../components/CustomImage/CustomImage";
import TButton from "../../../../../components/TButton/TButton";
@@ -47,6 +50,7 @@ export default function OrderListCardStatus({
patnrId,
auctProdYn,
patncNm,
prodSno,
patncPhnNo,
} = orderProductInfo || {};
const dispatch = useDispatch();
@@ -117,6 +121,12 @@ export default function OrderListCardStatus({
);
}, [dispatch]);
const onClickTrackPackage = useCallback(() => {
dispatch(
getMyinfoOrderShippingSearch({ mbrNo, ordNo, patnrId, prdtId, prodSno })
);
}, [dispatch]);
return (
<>
<div className={css.itemListStatusContainer}>
@@ -184,6 +194,7 @@ export default function OrderListCardStatus({
_onClickBuyAgain,
onClickCancelItem,
onClickReturnExchange,
onClickTrackPackage,
})
)}
</div>

34
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/utils/orderStatus.js
View File

@@ -47,12 +47,15 @@ export const getStatusMessageAndClass = (shptmOrdStCd, shptmOrdStNm) => {
};
export const renderButtonsByStatus = (shptmOrdStCd, ordNo, onClickHandlers) => {
const { _onClickBuyAgain, onClickCancelItem, onClickReturnExchange } =
onClickHandlers;
const {
_onClickBuyAgain,
onClickCancelItem,
onClickReturnExchange,
onClickTrackPackage,
} = onClickHandlers;
switch (shptmOrdStCd) {
case "ORD00601":
case "ORD00602":
case "ORD00620":
return (
<>
@@ -73,6 +76,7 @@ export const renderButtonsByStatus = (shptmOrdStCd, ordNo, onClickHandlers) => {
</TButton>
</>
);
case "ORD00602":
case "ORD00603":
case "ORD00604":
return (
@@ -93,7 +97,11 @@ export const renderButtonsByStatus = (shptmOrdStCd, ordNo, onClickHandlers) => {
>
{$L("RETURN/EXCHANGE ITEM")}
</TButton>
<TButton size="small" className={css.actionButton}>
<TButton
size="small"
className={css.actionButton}
onClick={onClickTrackPackage}
>
{$L("TRACK PACKAGE")}
</TButton>
</>
@@ -126,7 +134,11 @@ export const renderButtonsByStatus = (shptmOrdStCd, ordNo, onClickHandlers) => {
>
{$L("BUY IT AGAIN")}
</TButton>
<TButton size="small" className={css.actionButton}>
<TButton
size="small"
className={css.actionButton}
onClick={onClickTrackPackage}
>
{$L("TRACK PACKAGE")}
</TButton>
</>
@@ -143,7 +155,11 @@ export const renderButtonsByStatus = (shptmOrdStCd, ordNo, onClickHandlers) => {
>
{$L("BUY IT AGAIN")}
</TButton>
<TButton size="small" className={css.actionButton}>
<TButton
size="small"
className={css.actionButton}
onClick={onClickTrackPackage}
>
{$L("TRACK PACKAGE")}
</TButton>
</>
@@ -167,7 +183,11 @@ export const renderButtonsByStatus = (shptmOrdStCd, ordNo, onClickHandlers) => {
>
{$L("RETURN/EXCHANGE ITEM")}
</TButton>
<TButton size="small" className={css.actionButton}>
<TButton
size="small"
className={css.actionButton}
onClick={onClickTrackPackage}
>
{$L("TRACK PACKAGE")}
</TButton>
</>