Skip to content

Commit

Permalink
allow text input
Browse files Browse the repository at this point in the history
  • Loading branch information
@cychiuak
cychiuak committed Oct 28, 2024
1 parent 18f4554 commit 3eaa8d8
Show file tree
Hide file tree
Showing 2 changed files with 162 additions and 117 deletions.
21 changes: 21 additions & 0 deletions src/pages/couponDetail/couponDetail.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -748,4 +748,25 @@
}
.QRCodeExpiryTime{
align-self: center;
}
.QRCodeText{
align-self: center;
width:100%;
/* overflow:auto; */
overflow-wrap: break-word;
text-align: center;
}
.QRCodeTextDescription{
align-self: center;
}
.copyTextButton{
padding: 10px 15px;
background-color: #007bff;
color: 'white';
border: 'none';
border-radius: 5px;
cursor: 'pointer';
font-size: 16px;
width:30%;
align-self: center;
}
258 changes: 141 additions & 117 deletions src/pages/couponDetail/couponDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,45 +69,55 @@ const CouponDetail: React.FunctionComponent<ICouponsProps> = (props) => {
const [couponUser, setCouponUser] = React.useState(useSelector(selectCouponUserEmail));
//alert message
const [open, setOpen] = React.useState<boolean>(false);
const [startFetching,setStartFetching] = React.useState<boolean>(false);
const [severity, setSeverity] = React.useState<AlertColor>("success")
const [alertMessage, setAlertMessage] = React.useState<String>("QRcode generated")
const [expiredDate, setExpiredDate] = React.useState<String>()
const [startFetching, setStartFetching] = React.useState<boolean>(false);
const [severity, setSeverity] = React.useState<AlertColor>("success");
const [alertMessage, setAlertMessage] = React.useState<String>("QRcode generated");
const [expiredDate, setExpiredDate] = React.useState<String>();
const [quantityPerUser, setQuantityPerUser] = React.useState<String>();
//useContext - userProvider
const { isLoggedIn, email, token, logoutCouponUser, loginCouponUser } = useUser();

//testing
const [qrCode, setQRCode] = React.useState<string>("");
const [qrCodeText, setQRCodeText] = React.useState<string>("");
const [switcher, setSwitcher] = React.useState<boolean>(true);
//for the function that check the number of use to

//for the function that check the number of use to
// useEffect(() => {
// console.log("hasRendered.current is",hasRendered.current)
// if (hasRendered.current === true) {
// return;
// }
// console.log("ran the useEffect");
// hasRendered.current = true
// socket.on('chat message', (data: { userEmail:string;sender: string; message: string }) => {
// console.log("chat message:",data.sender,data.message )
// console.log("the user email is",data.userEmail);
// console.log("email is ",email)
// if(email === data.userEmail){
// setStartFetching(false)
// alert("the coupon is burned")
// navigate('/coupons')
// }
// alert("the coupon is burned")
// navigate('/coupons')
// console.log("hasRendered.current is",hasRendered.current)
// if (hasRendered.current === true) {
// return;
// }
// console.log("ran the useEffect");
// hasRendered.current = true
// socket.on('chat message', (data: { userEmail:string;sender: string; message: string }) => {
// console.log("chat message:",data.sender,data.message )
// console.log("the user email is",data.userEmail);
// console.log("email is ",email)
// if(email === data.userEmail){
// setStartFetching(false)
// alert("the coupon is burned")
// navigate('/coupons')
// }
// alert("the coupon is burned")
// navigate('/coupons')
// });
// return () => {
// socket.off('chat message');
// };
// }, [socket]);


//click the button to use the coupon
const copyText = () => {
navigator.clipboard
.writeText(qrCodeText)
.then(() => {
alert("Text copied to clipboard!");
})
.catch((err) => {
console.error("Error copying text: ", err);
});
};
const DataFetcher = () => {
refreshCouponCode(coupon_id)
.then(async (res) => {
Expand All @@ -134,6 +144,7 @@ const CouponDetail: React.FunctionComponent<ICouponsProps> = (props) => {
}
numberOfUse.current = res.data.number_of_use ;
setQRCode(QrCode);
setQRCodeText(res.data.coupon_code);
setTimeLeft(couponExpiryTime);
setSeverity("success");
setAlertMessage("QRcode generated");
Expand Down Expand Up @@ -175,21 +186,21 @@ const CouponDetail: React.FunctionComponent<ICouponsProps> = (props) => {
}
const handleClick = async() => {
console.log("couponsUser: ", couponUser);
console.log("email is ",email);
console.log("token is ",token)
console.log("email is ", email);
console.log("token is ", token);

//no user information, send out the error message
if((email === undefined || email === null || email === "") && (token === undefined || token === null || token === "")){
//no user information, send out the error message
if ((email === undefined || email === null || email === "") && (token === undefined || token === null || token === "")) {
setSeverity("error");
setAlertMessage("no user information");
setOpen(true);
console.log(params.couponCode)
}else{
//find user information, use the api to record the use of coupon
//api function
setStartFetching(true);
console.log("params.couponCode is ",params.couponCode)
DataFetcher();
console.log(params.couponCode);
} else {
//find user information, use the api to record the use of coupon
//api function
setStartFetching(true);
console.log("params.couponCode is ", params.couponCode);
DataFetcher();
}
};

Expand Down Expand Up @@ -239,97 +250,96 @@ const CouponDetail: React.FunctionComponent<ICouponsProps> = (props) => {
// display as 0/3 as text
//joe 21/10
//refetch the detail if 503 example
// const fetchCouponDetail = async (urlParams, retries = 5, delay = 2000) => {
// try {
// const response = await postCouponDetail(urlParams)
// const fetchCouponDetail = async (urlParams, retries = 5, delay = 2000) => {
// try {
// const response = await postCouponDetail(urlParams)

// // Check if the response is OK
// if (response.ok) {
// const result = await response.json();
// setData(result);
// setError(null); // Clear any previous errors
// return;
// }
// // Check if the response is OK
// if (response.ok) {
// const result = await response.json();
// setData(result);
// setError(null); // Clear any previous errors
// return;
// }

// // If we receive a 503 status, we will retry
// if (response.status === 503 && retries > 0) {
// console.log(`Received 503. Retrying... (${retries} retries left)`);
// await new Promise(res => setTimeout(res, delay)); // Wait for the specified delay
// return fetchData(url, retries - 1, delay); // Retry the fetch
// }
// // If we receive a 503 status, we will retry
// if (response.status === 503 && retries > 0) {
// console.log(`Received 503. Retrying... (${retries} retries left)`);
// await new Promise(res => setTimeout(res, delay)); // Wait for the specified delay
// return fetchData(url, retries - 1, delay); // Retry the fetch
// }

// // Handle other errors
// throw new Error(`Fetch failed with status: ${response.status}`);
// } catch (err) {
// setError(err.message);
// } finally {
// setLoading(false);
// }
// };
// // Handle other errors
// throw new Error(`Fetch failed with status: ${response.status}`);
// } catch (err) {
// setError(err.message);
// } finally {
// setLoading(false);
// }
// };
//joe 20/9
//fetch the coupon detail by its coupon code
useEffect(() => {
console.log("UseContext-user data in CouponDetail:", email, token)
console.log("Coupon Code:", params.couponCode)
if(params.couponCode){
postCouponDetail(params.couponCode)
.then(async (res) => {
console.log(res);
if ("data" in res) {
const couponList = res.data;
if (couponList.length === 0){
console.log("404 not found")
navigate("/404")
}
console.log("couponList is ",couponList);
setCouponName(couponList[0].c_name);
setCouponCode(couponList[0].coupon_code);
setCouponDescription(couponList[0].c_description);
setCoupon_id(couponList[0].coupon_id);
setExpiredDate(couponList[0].expired_date);
setQuantityPerUser(couponList[0].quantity_per_user);
}
if (res&&res.error?.status == "FETCH_ERROR") {
console.log("refetch the request")
const promiseResult = await new Promise(res => setTimeout(() => {
res(true);
}, 1500));
console.log("over 2s", promiseResult)
if(params.couponCode && promiseResult){
postCouponDetail(params.couponCode)
console.log("UseContext-user data in CouponDetail:", email, token);
console.log("Coupon Code:", params.couponCode);
if (params.couponCode) {
postCouponDetail(params.couponCode)
.then(async (res) => {
console.log(res);
if ("data" in res) {
const couponList = res.data;
if (couponList.length === 0){
console.log("404 not found")
navigate("/404")
}
console.log("couponList is ",couponList);
if (couponList.length === 0) {
console.log("404 not found");
navigate("/404");
}
console.log("couponList is ", couponList);
setCouponName(couponList[0].c_name);
setCouponCode(couponList[0].coupon_code);
setCouponDescription(couponList[0].c_description);
setCoupon_id(couponList[0].coupon_id);
setExpiredDate(couponList[0].expired_date);
setQuantityPerUser(couponList[0].quantity_per_user);
}
if (res && res.error?.status == "FETCH_ERROR") {
console.log("refetch the request");
const promiseResult = await new Promise((res) =>
setTimeout(() => {
res(true);
}, 1500)
);
console.log("over 2s", promiseResult);
if (params.couponCode && promiseResult) {
postCouponDetail(params.couponCode)
.then(async (res) => {
console.log(res);
if ("data" in res) {
const couponList = res.data;
if (couponList.length === 0) {
console.log("404 not found");
navigate("/404");
}
console.log("couponList is ", couponList);
setCouponName(couponList[0].c_name);
setCouponCode(couponList[0].coupon_code);
setCouponDescription(couponList[0].c_description);
setCoupon_id(couponList[0].coupon_id);
setExpiredDate(couponList[0].expired_date);
setQuantityPerUser(couponList[0].quantity_per_user);
}
})
.catch((err) => {
console.log(err);
});
}
}
})
.catch((err) => {
console.log(err);

});
}
}
})
.catch((err) => {
console.log(err);

});

}else{
console.log("404 not found")
navigate("/coupons")
}
} else {
console.log("404 not found");
navigate("/coupons");
}
}, []);
useEffect(() => {
console.log(email);
Expand All @@ -339,9 +349,18 @@ const CouponDetail: React.FunctionComponent<ICouponsProps> = (props) => {
}, [token]);
const content: JSX.Element = (
<div className="screen">
<div className="mission-body-container">
<div className="mission-body">
<ShortTitleBar title={title} aiCoach={true} setting={true} customiseBackButton={true} customiseBackButtonLink="/coupons" isCouponSystem={true} isFilteringButton={false} isLoginButton={true}/>
<div className="mission-body-container">
<div className="mission-body">
<ShortTitleBar
title={title}
aiCoach={true}
setting={true}
customiseBackButton={true}
customiseBackButtonLink="/coupons"
isCouponSystem={true}
isFilteringButton={false}
isLoginButton={true}
/>
<img className="couponDetailImage" src={`${process.env.PUBLIC_URL}/img/coupons/demo_coupons.jpg`} alt="Photo" />
<div></div>

Expand All @@ -358,7 +377,13 @@ const CouponDetail: React.FunctionComponent<ICouponsProps> = (props) => {
使用優惠
</Button>
{qrCode && isGetCouponsByUser && <img className="QRCode" src={qrCode} alt="QR Code" />}
{qrCode && isGetCouponsByUser && <p className="QRCodeExpiryTime">{couponCode}</p>}
{qrCodeText && isGetCouponsByUser && <p className="QRCodeTextDescription">Your coupon code:</p>}
{qrCodeText && isGetCouponsByUser && <p className="QRCodeText">{qrCodeText}</p>}
{qrCodeText && isGetCouponsByUser && (
<button onClick={copyText} className="copyTextButton">
Copy Text
</button>
)}
{qrCode && isGetCouponsByUser && <p className="QRCodeExpiryTime">expires in: {timeLeft}s</p>}
{/* {isGetCouponsByUser && open && <QRCodeSVG size={256} style={{
height: "80%",
Expand All @@ -371,14 +396,13 @@ const CouponDetail: React.FunctionComponent<ICouponsProps> = (props) => {
</div>
<div className="containerCouponsTermsAndPolicies">
<div className="couponsTermsAndPolicies">
<h2>條款與細則</h2>
<p>使用範圍-此優惠券僅適用於指定商品或服務，詳情請參閱產品頁面。</p>
<p>有效期限-優惠券自發行日起有效，截止日期為{expiredDate}。逾期無效。</p>
<p>使用限制-每位顧客僅限使用{quantityPerUser}次。</p>
<p>兌換方式-在結帳時請願出示QR代碼以享受折扣。</p>
<p>使用範圍-此優惠券僅適用於指定商品或服務，詳情請參閱產品頁面。</p>
<p>其他條款-我們保留修改或取消優惠券的權利，恕不另行通知。
如有任何爭議，我們保留最終解釋權。</p>
<h2>條款與細則</h2>
<p>使用範圍-此優惠券僅適用於指定商品或服務，詳情請參閱產品頁面。</p>
<p>有效期限-優惠券自發行日起有效，截止日期為{expiredDate}。逾期無效。</p>
<p>使用限制-每位顧客僅限使用{quantityPerUser}次。</p>
<p>兌換方式-在結帳時請願出示QR代碼以享受折扣。</p>
<p>使用範圍-此優惠券僅適用於指定商品或服務，詳情請參閱產品頁面。</p>
<p>其他條款-我們保留修改或取消優惠券的權利，恕不另行通知。 如有任何爭議，我們保留最終解釋權。</p>
</div>
</div>
</div>
Expand Down

0 comments on commit 3eaa8d8

Please sign in to comment.