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

[모바일 샌드 팝업] qvc일때 원형으로 짤리는부분 수정

Browse Source 
- qvc에서는 border-radius제거.
 - theme item일때 에러나는부분때문에 옵셔널체이닝 처리.
This commit is contained in:
junghoon86.park
2025-12-15 09:43:22 +09:00
parent 42f58bf10c
commit e97172fad5
2 changed files with 105 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx
View File

@@ -4,75 +4,75 @@ import React, {
useMemo,
useRef,
useState,
} from "react";
} from 'react';
import classNames from "classnames";
import classNames from 'classnames';
import {
AsYouTypeFormatter,
PhoneNumberFormat,
PhoneNumberUtil,
} from "google-libphonenumber";
import { useDispatch, useSelector } from "react-redux";
} from 'google-libphonenumber';
import { useDispatch, useSelector } from 'react-redux';
import { off, on } from "@enact/core/dispatcher";
import spotlight, { Spotlight } from "@enact/spotlight";
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
import { Spottable } from "@enact/spotlight/Spottable";
import { off, on } from '@enact/core/dispatcher';
import spotlight, { Spotlight } from '@enact/spotlight';
import { SpotlightContainerDecorator } from '@enact/spotlight/SpotlightContainerDecorator';
import { Spottable } from '@enact/spotlight/Spottable';
import defaultImage from "../../../assets/images/img-thumb-empty-144@3x.png";
import { types } from "../../actions/actionTypes";
import { clearSMS, sendSms } from "../../actions/appDataActions";
import defaultImage from '../../../assets/images/img-thumb-empty-144@3x.png';
import { types } from '../../actions/actionTypes';
import { clearSMS, sendSms } from '../../actions/appDataActions';
import {
changeLocalSettings,
setHidePopup,
setShowPopup,
} from "../../actions/commonActions";
} from '../../actions/commonActions';
import {
clearRegisterDeviceInfo,
getDeviceAdditionInfo,
registerDeviceInfo,
} from "../../actions/deviceActions";
} from '../../actions/deviceActions';
import {
clearCurationCoupon,
setEventIssueReq,
} from "../../actions/eventActions";
} from '../../actions/eventActions';
import {
sendLogShopByMobile,
sendLogTotalRecommend,
} from "../../actions/logActions";
} from '../../actions/logActions';
import {
ACTIVE_POPUP,
LOG_CONTEXT_NAME,
LOG_MESSAGE_ID,
LOG_TP_NO,
} from "../../utils/Config";
} from '../../utils/Config';
import {
$L,
decryptPhoneNumber,
encryptPhoneNumber,
formatLocalDateTime,
} from "../../utils/helperMethods";
import CustomImage from "../CustomImage/CustomImage";
import TButton from "../TButton/TButton";
import TPopUp from "../TPopUp/TPopUp";
import HistoryPhoneNumber from "./HistoryPhoneNumber/HistoryPhoneNumber";
import css from "./MobileSendPopUp.module.less";
import PhoneInputSection from "./PhoneInputSection";
import SMSNumKeyPad from "./SMSNumKeyPad";
} from '../../utils/helperMethods';
import CustomImage from '../CustomImage/CustomImage';
import TButton from '../TButton/TButton';
import TPopUp from '../TPopUp/TPopUp';
import HistoryPhoneNumber from './HistoryPhoneNumber/HistoryPhoneNumber';
import css from './MobileSendPopUp.module.less';
import PhoneInputSection from './PhoneInputSection';
import SMSNumKeyPad from './SMSNumKeyPad';
const SECRET_KEY = "fy7BTKuM9eeTQqEC9sF3Iw5qG43Aaip";
const SECRET_KEY = 'fy7BTKuM9eeTQqEC9sF3Iw5qG43Aaip';
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
{ enterTo: 'last-focused' },
'div'
);
const InputContainer = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
{ enterTo: 'last-focused' },
'div'
);
const SpottableComponent = Spottable("div");
const SpottableComponent = Spottable('div');
export default function MobileSendPopUp({
open,
@@ -116,39 +116,41 @@ export default function MobileSendPopUp({
const popupVisible = useSelector((state) => state.common.popup.popupVisible);
const nowMenu = useSelector((state) => state.common.menu.nowMenu);
const entryMenu = useSelector((state) => state.common.menu.entryMenu);
const partnerNm = useSelector((state) => state.main.productData?.patncNm);
const [inputDisabled, setInputDisabled] = useState(true);
const [mobileNumber, setMobileNumber] = useState("");
const [mobileNumber, setMobileNumber] = useState('');
const [recentSentNumber, setRecentSentNumber] = useState([]);
const [keyPadOff, setKeyPadOff] = useState(false);
const [smsRetCode, setSmsRetCode] = useState(undefined);
const agreeBtnClickedRef = useRef(false);
const deviceCountryCode = httpHeader["X-Device-Country"];
const deviceCountryCode = httpHeader['X-Device-Country'];
const mobileSendPopUpSpotlightId = useMemo(() => {
return !keyPadOff && recentSentNumber.length <= 0
? "keypad-number-1"
: "agreeAndSend";
? 'keypad-number-1'
: 'agreeAndSend';
}, [keyPadOff, recentSentNumber]);
const getMaxNum = useCallback((_deviceCountryCode) => {
if (_deviceCountryCode === "DE" || _deviceCountryCode === "GB") {
if (_deviceCountryCode === 'DE' || _deviceCountryCode === 'GB') {
return 11;
} else if (_deviceCountryCode === "KR") {
} else if (_deviceCountryCode === 'KR') {
return 12;
} else return 10;
}, []);
const MSG_SUCCESS_SENT = $L("Text Send to") + " " + mobileNumber;
const MSG_SEND_LINK = $L("Send a purchase link for this item via SMS");
const MSG_SUCCESS_SENT = $L('Text Send to') + ' ' + mobileNumber;
const MSG_SEND_LINK = $L('Send a purchase link for this item via SMS');
const handleClickSelect = (_phoneNumber) => {
setKeyPadOff((state) => !state);
setMobileNumber(_phoneNumber);
setTimeout(() => {
Spotlight.focus("keypad-number-1");
Spotlight.focus('keypad-number-1');
}, 0);
};
@@ -161,9 +163,9 @@ export default function MobileSendPopUp({
const getRawPhoneNumber = useCallback(
(key) => {
let rawPhoneNumber = `${mobileNumber}${key}`.replace(/\D/g, "");
let rawPhoneNumber = `${mobileNumber}${key}`.replace(/\D/g, '');
if (rawPhoneNumber.length === getMaxNum(deviceCountryCode)) {
Spotlight.focus("agreeAndSend");
Spotlight.focus('agreeAndSend');
}
// 테스트용: 12자리까지 허용
if (rawPhoneNumber.length > 12) {
@@ -182,11 +184,11 @@ export default function MobileSendPopUp({
numberProto,
PhoneNumberFormat.NATIONAL
);
if (deviceCountryCode === "RU" && rawPhoneNumber.startsWith("8")) {
if (deviceCountryCode === 'RU' && rawPhoneNumber.startsWith('8')) {
rawPhoneNumber = rawPhoneNumber.substring(1);
}
} else {
let formattedNumber = "";
let formattedNumber = '';
for (let i = 0; i < rawPhoneNumber.length; i++) {
formattedNumber = asYouTypeFormatter.inputDigit(
@@ -206,7 +208,7 @@ export default function MobileSendPopUp({
);
const getBackspaceRawNumber = useCallback(() => {
let rawPhoneNumber = mobileNumber.replace(/\D/g, "").slice(0, -1);
let rawPhoneNumber = mobileNumber.replace(/\D/g, '').slice(0, -1);
const phoneUtil = PhoneNumberUtil.getInstance();
const asYouTypeFormatter = new AsYouTypeFormatter(deviceCountryCode);
@@ -221,7 +223,7 @@ export default function MobileSendPopUp({
PhoneNumberFormat.NATIONAL
);
} else {
let formattedNumber = "";
let formattedNumber = '';
for (let i = 0; i < rawPhoneNumber.length; i++) {
formattedNumber = asYouTypeFormatter.inputDigit(
@@ -242,7 +244,7 @@ export default function MobileSendPopUp({
(ev) => {
if (ev && ev.key >= 0 && ev.key <= 9) {
getRawPhoneNumber(ev.key);
} else if (ev.key === "Backspace") {
} else if (ev.key === 'Backspace') {
getBackspaceRawNumber();
}
},
@@ -250,9 +252,9 @@ export default function MobileSendPopUp({
);
useEffect(() => {
on("keydown", handleKeydown);
on('keydown', handleKeydown);
return () => {
off("keydown", handleKeydown);
off('keydown', handleKeydown);
};
}, [handleKeydown]);
@@ -264,7 +266,7 @@ export default function MobileSendPopUp({
useEffect(() => {
const timer = setTimeout(() =>
setInputDisabled(mobileSendPopUpSpotlightId === "keypad-number-1")
setInputDisabled(mobileSendPopUpSpotlightId === 'keypad-number-1')
);
return () => clearTimeout(timer);
@@ -277,16 +279,16 @@ export default function MobileSendPopUp({
setMobileNumber(recentSentNumber[0]);
} else {
setKeyPadOff(false);
setMobileNumber("");
setMobileNumber('');
}
}
}, [recentSentNumber]);
const numKeypadClicked = useCallback(
(key) => {
if (key === "clear") {
setMobileNumber("");
} else if (key == "backspace") {
if (key === 'clear') {
setMobileNumber('');
} else if (key == 'backspace') {
getBackspaceRawNumber();
} else {
getRawPhoneNumber(key);
@@ -315,7 +317,7 @@ export default function MobileSendPopUp({
};
const handleAgreeSendClick = useCallback(() => {
let naturalNumber = mobileNumber.replace(/\D/g, "");
let naturalNumber = mobileNumber.replace(/\D/g, '');
// 테스트용: 길이 체크를 더 유연하게 (10자리 또는 11자리 허용)
if (
@@ -327,8 +329,8 @@ export default function MobileSendPopUp({
return;
}
if (deviceCountryCode === "KR") {
naturalNumber = "82" + naturalNumber;
if (deviceCountryCode === 'KR') {
naturalNumber = '82' + naturalNumber;
}
if (recentSentNumber && recentSentNumber.length > 0) {
@@ -394,22 +396,22 @@ export default function MobileSendPopUp({
};
// 호텔일 경우 날려야 하는 경우
if (smsTpCd === "APP00205") {
if (smsTpCd === 'APP00205') {
params = { ...params, hotelId, hotelNm, hotelDtlUrl, curationId };
}
if (smsTpCd === "APP00204") {
if (smsTpCd === 'APP00204') {
params = { ...params, curationId };
}
dispatch(sendSms(params));
}
// EVT00101 & APP00207(welcome) EVT00103 & APP00209 (welcome+Prizes) : smsTpCd 값을 받지 않음
if (evntTpCd === "EVT00101" || evntTpCd === "EVT00103") {
if (evntTpCd === 'EVT00101' || evntTpCd === 'EVT00103') {
dispatch(
registerDeviceInfo({
evntTpCd,
evntId,
evntApplcnFlag: "Y",
entryMenu: "TermsPop",
evntApplcnFlag: 'Y',
entryMenu: 'TermsPop',
mbphNo: naturalNumber,
})
);
@@ -434,7 +436,7 @@ export default function MobileSendPopUp({
onClose();
dispatch(setShowPopup(ACTIVE_POPUP.smsPopup));
setTimeout(() => Spotlight.focus("agreeAndSend"));
setTimeout(() => Spotlight.focus('agreeAndSend'));
},
[dispatch, smsRetCode]
);
@@ -450,7 +452,7 @@ export default function MobileSendPopUp({
curationCouponSuccess === 0
) {
const logParams = {
status: "send",
status: 'send',
nowMenu: nowMenu,
partner: patncNm ?? shopByMobileLogRef?.current?.patncNm,
productId: prdtId ?? shopByMobileLogRef?.current?.prdtId,
@@ -465,8 +467,8 @@ export default function MobileSendPopUp({
...shopByMobileLogRef.current,
locDt: formatLocalDateTime(new Date()),
logTpNo: LOG_TP_NO.SHOP_BY_MOBILE.AGREE_AND_SEND,
mbphNoFlag: "Y",
trmsAgrFlag: "Y",
mbphNoFlag: 'Y',
trmsAgrFlag: 'Y',
};
dispatch(sendLogShopByMobile(params));
@@ -497,24 +499,24 @@ export default function MobileSendPopUp({
}, [dispatch]);
const getSmsErrorMsg = useMemo(() => {
const SMS_ERROR_502 = $L("The event information has not been registered");
const SMS_ERROR_903 = $L("You have exceeded the daily text limit.");
const SMS_ERROR_502 = $L('The event information has not been registered');
const SMS_ERROR_903 = $L('You have exceeded the daily text limit.');
const SMS_ERROR_904 = $L(
"You have exceeded the text limit for this product."
'You have exceeded the text limit for this product.'
);
const SMS_ERROR_905 = $L(
"This number is currently blocked. To receive a message, please send UNSTOP to the number below. 07860 064195"
'This number is currently blocked. To receive a message, please send UNSTOP to the number below. 07860 064195'
);
const SMS_ERROR_906 = $L("Sorry. This item is sold out.");
const SMS_ERROR_600 = $L("This device had received first time coupon.");
const SMS_ERROR_601 = $L("There is no coupon.");
const SMS_ERROR_900 = $L("Failed to send text to {mobileNumber}").replace(
"{mobileNumber}",
const SMS_ERROR_906 = $L('Sorry. This item is sold out.');
const SMS_ERROR_600 = $L('This device had received first time coupon.');
const SMS_ERROR_601 = $L('There is no coupon.');
const SMS_ERROR_900 = $L('Failed to send text to {mobileNumber}').replace(
'{mobileNumber}',
mobileNumber
);
const SMS_ERROR_907 = $L(
"Only {length} digits is permitted. Please check again"
).replace("{length}", getMaxNum(deviceCountryCode));
'Only {length} digits is permitted. Please check again'
).replace('{length}', getMaxNum(deviceCountryCode));
switch (smsRetCode) {
case 502:
@@ -542,12 +544,12 @@ export default function MobileSendPopUp({
const getEvntErrorMsg = useMemo(() => {
if (curationCouponSuccess === 600) {
return $L("This device had received first time coupon.");
return $L('This device had received first time coupon.');
} else if (curationCouponSuccess === 601) {
return $L("There is no coupon.");
return $L('There is no coupon.');
} else {
return $L("Failed to sent text to {mobileNumber}").replace(
"{mobileNumber}",
return $L('Failed to sent text to {mobileNumber}').replace(
'{mobileNumber}',
mobileNumber
);
}
@@ -571,7 +573,7 @@ export default function MobileSendPopUp({
regDeviceInfoRetCode === undefined &&
curationCouponSuccess === undefined && (
<TPopUp
kind={"mobileSendPopup"}
kind={'mobileSendPopup'}
className={css.container}
open={open}
onClose={onClose}
@@ -602,7 +604,10 @@ export default function MobileSendPopUp({
<div className={css.headerTopRow}>
{brandLogo && (
<img
className={css.headerTopRow__brandLogo}
className={classNames(
css.headerTopRow__brandLogo,
partnerNm === 'QVC' && css.headerTopRow__brandLogo__qvc
)}
src={brandLogo}
alt="Brand"
/>
@@ -639,8 +644,8 @@ export default function MobileSendPopUp({
onClick={handleInputClick}
spotlightDisabled={inputDisabled}
>
{deviceCountryCode && deviceCountryCode === "RU" && (
<span className={css.rucInput}>{"+7 "}</span>
{deviceCountryCode && deviceCountryCode === 'RU' && (
<span className={css.rucInput}>{'+7 '}</span>
)}
<span>{mobileNumber}</span>
</SpottableComponent>
@@ -662,10 +667,10 @@ export default function MobileSendPopUp({
<span
dangerouslySetInnerHTML={{
__html: `${$L(
"By clicking Agree and Send button, I agree that LGE may collect and store my cell phone number to send text messages as I requested, for data analysis and for feature-enhancement purposes. By entering my cell phone number, I agree to receive messages from LGE with information on how to purchase the product I selected. Message and data rates may apply."
'By clicking Agree and Send button, I agree that LGE may collect and store my cell phone number to send text messages as I requested, for data analysis and for feature-enhancement purposes. By entering my cell phone number, I agree to receive messages from LGE with information on how to purchase the product I selected. Message and data rates may apply.'
)}`,
}}
className={deviceCountryCode === "RU" && css.instructionRu}
className={deviceCountryCode === 'RU' && css.instructionRu}
/>
)}
</div>
@@ -698,11 +703,11 @@ export default function MobileSendPopUp({
<Container className={css.container__btnContainer}>
<TButton
onClick={handleAgreeSendClick}
spotlightId={"agreeAndSend"}
spotlightId={'agreeAndSend'}
>
{$L("Agree and Send")}
{$L('Agree and Send')}
</TButton>
<TButton onClick={onClose}>{$L("Cancel")}</TButton>
<TButton onClick={onClose}>{$L('Cancel')}</TButton>
</Container>
</TPopUp>
)}
@@ -714,7 +719,7 @@ export default function MobileSendPopUp({
text={smsTpCd ? getSmsErrorMsg : getEvntErrorMsg}
onClick={_onClose}
hasButton
button1Text={$L("OK")}
button1Text={$L('OK')}
/>
)}
{(smsRetCode === 0 ||
@@ -727,7 +732,7 @@ export default function MobileSendPopUp({
text={MSG_SUCCESS_SENT}
onClick={onClose}
hasButton
button1Text={$L("OK")}
button1Text={$L('OK')}
/>
)}
</>

13
com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less
View File

@@ -1,5 +1,5 @@
@import "../../style/CommonStyle.module.less";
@import "../../style/utils.module.less";
@import '../../style/CommonStyle.module.less';
@import '../../style/utils.module.less';
/* 🆕 [NEW] Figma 디자인용 타이틀 헤드 스타일 */
.titleHead {
@@ -14,7 +14,7 @@
text-align: left; // center → left
color: black;
font-size: 32px;
font-family: "LG Smart UI";
font-family: 'LG Smart UI';
font-weight: 700;
line-height: 42px;
word-wrap: break-word;
@@ -32,12 +32,15 @@
height: 50px;
margin-right: 15px; // TV 호환: gap 대신 margin 사용
border-radius: 100%;
&.headerTopRow__brandLogo__qvc {
border-radius: 0;
}
}
.headerTopRow__productId {
color: #808080;
font-size: 24px;
font-family: "LG Smart UI";
font-family: 'LG Smart UI';
font-weight: 600;
line-height: 18px;
word-wrap: break-word;
@@ -57,7 +60,7 @@
top: 0;
z-index: 0;
content: "";
content: '';
}
display: flex;
> .container__header__productImg,