|
|
@@ -25,7 +25,7 @@ const ProductDetailView: React.FC = () => {
|
|
|
const dispatch = useAppDispatch();
|
|
|
const { t } = useTranslation();
|
|
|
// let area = location.state as Area;
|
|
|
- const areas = getWithExpiry<Area[] | []>("areas");
|
|
|
+ const areas = getWithExpiry<Area[]>("areas");
|
|
|
const { id } = useParams<{ id: string }>();
|
|
|
const loading = useAppSelector((state) => state.loading);
|
|
|
const [selectedDays, setSelectedDays] = useState<number>(null);
|
|
|
@@ -111,6 +111,10 @@ const ProductDetailView: React.FC = () => {
|
|
|
},
|
|
|
});
|
|
|
|
|
|
+ const convertPackageToSelectedProduct = (packg: Package) => {
|
|
|
+ return packg.title;
|
|
|
+ };
|
|
|
+
|
|
|
const options = useMemo(() => {
|
|
|
console.log("Calculating options from loadPackage");
|
|
|
|
|
|
@@ -119,20 +123,20 @@ const ProductDetailView: React.FC = () => {
|
|
|
|
|
|
packages.forEach((p) => {
|
|
|
daysSet.add(p.dayDuration);
|
|
|
- dataSet.add(p.amountData.toString());
|
|
|
+ dataSet.add(convertPackageToSelectedProduct(p));
|
|
|
});
|
|
|
|
|
|
const daysArray = Array.from(daysSet).sort((a, b) => a - b);
|
|
|
|
|
|
- const dataArray = Array.from(dataSet).sort((a, b) => {
|
|
|
- if (a === "Unlimited") return 1;
|
|
|
- if (b === "Unlimited") return -1;
|
|
|
- return parseInt(a) - parseInt(b);
|
|
|
- });
|
|
|
+ // const dataArray = Array.from(dataSet).sort((a, b) => {
|
|
|
+ // if (a === "Unlimited") return 1;
|
|
|
+ // if (b === "Unlimited") return -1;
|
|
|
+ // return parseInt(a) - parseInt(b);
|
|
|
+ // });
|
|
|
|
|
|
return {
|
|
|
daysArray,
|
|
|
- dataArray,
|
|
|
+ dataArray: Array.from(dataSet),
|
|
|
};
|
|
|
}, [packages]);
|
|
|
|
|
|
@@ -154,20 +158,20 @@ const ProductDetailView: React.FC = () => {
|
|
|
const dataSet = new Set<string>();
|
|
|
packages.forEach((p) => {
|
|
|
if (p.dayDuration === day) {
|
|
|
- dataSet.add(p.amountData.toString());
|
|
|
+ dataSet.add(convertPackageToSelectedProduct(p));
|
|
|
}
|
|
|
});
|
|
|
setSelectedDays(day);
|
|
|
setSelectedData(
|
|
|
- dataSet.has(selectedData) ? selectedData : Array.from(dataSet)[0]
|
|
|
+ dataSet.has(selectedData) ? selectedData : Array.from(dataSet)[0],
|
|
|
);
|
|
|
setDataActiveOptions(Array.from(dataSet));
|
|
|
setSelectedPackage(
|
|
|
packages.find(
|
|
|
(p) =>
|
|
|
p.dayDuration === selectedDays &&
|
|
|
- p.amountData.toString() === selectedData
|
|
|
- )
|
|
|
+ convertPackageToSelectedProduct(p) === selectedData,
|
|
|
+ ),
|
|
|
);
|
|
|
};
|
|
|
|
|
|
@@ -175,21 +179,21 @@ const ProductDetailView: React.FC = () => {
|
|
|
// filter day options based on selected data if needed
|
|
|
const daysSet = new Set<number>();
|
|
|
packages.forEach((p) => {
|
|
|
- if (p.amountData.toString() === data) {
|
|
|
+ if (convertPackageToSelectedProduct(p) === data) {
|
|
|
daysSet.add(p.dayDuration);
|
|
|
}
|
|
|
});
|
|
|
setSelectedData(data);
|
|
|
setSelectedDays(
|
|
|
- daysSet.has(selectedDays) ? selectedDays : Array.from(daysSet)[0]
|
|
|
+ daysSet.has(selectedDays) ? selectedDays : Array.from(daysSet)[0],
|
|
|
);
|
|
|
setDaysActiveOptions(Array.from(daysSet));
|
|
|
setSelectedPackage(
|
|
|
packages.find(
|
|
|
(p) =>
|
|
|
p.dayDuration === selectedDays &&
|
|
|
- p.amountData.toString() === selectedData
|
|
|
- )
|
|
|
+ convertPackageToSelectedProduct(p) === selectedData,
|
|
|
+ ),
|
|
|
);
|
|
|
};
|
|
|
|
|
|
@@ -200,7 +204,7 @@ const ProductDetailView: React.FC = () => {
|
|
|
let selectedPackageTmp = packages.find(
|
|
|
(p) =>
|
|
|
p.dayDuration === selectedDays &&
|
|
|
- p.amountData.toString() === selectedData
|
|
|
+ convertPackageToSelectedProduct(p) === selectedData,
|
|
|
);
|
|
|
if (!selectedPackageTmp) {
|
|
|
// console.log(
|
|
|
@@ -218,7 +222,7 @@ const ProductDetailView: React.FC = () => {
|
|
|
}
|
|
|
console.log(
|
|
|
"Selected package: ",
|
|
|
- selectedPackageTmp + " quantity " + quantityToUse
|
|
|
+ selectedPackageTmp + " quantity " + quantityToUse,
|
|
|
);
|
|
|
setPrices({
|
|
|
original: quantityToUse * selectedPackageTmp.displayPrice,
|
|
|
@@ -241,7 +245,7 @@ const ProductDetailView: React.FC = () => {
|
|
|
const selectedPackage = packages.find(
|
|
|
(p) =>
|
|
|
p.dayDuration === selectedDays &&
|
|
|
- p.amountData.toString() === selectedData
|
|
|
+ convertPackageToSelectedProduct(p) === selectedData,
|
|
|
);
|
|
|
if (!selectedPackage) {
|
|
|
alert("Please select a valid package");
|
|
|
@@ -272,7 +276,7 @@ const ProductDetailView: React.FC = () => {
|
|
|
title: "Checkout Error",
|
|
|
message: res.message || "Failed to proceed to checkout.",
|
|
|
buttonText: "Close",
|
|
|
- })
|
|
|
+ }),
|
|
|
);
|
|
|
}
|
|
|
};
|
|
|
@@ -368,8 +372,8 @@ const ProductDetailView: React.FC = () => {
|
|
|
selectedDays === day
|
|
|
? "border-[#EE0434] text-white bg-[#EE0434] shadow-md"
|
|
|
: daysActiveOptions.includes(day)
|
|
|
- ? "border-[#ffffff] text-black bg-[#ffffff] shadow-md"
|
|
|
- : "border-slate-100 text-slate-300"
|
|
|
+ ? "border-[#ffffff] text-black bg-[#ffffff] shadow-md"
|
|
|
+ : "border-slate-100 text-slate-300"
|
|
|
}`}
|
|
|
>
|
|
|
{day}
|
|
|
@@ -394,11 +398,11 @@ const ProductDetailView: React.FC = () => {
|
|
|
selectedData === data
|
|
|
? "border-[#EE0434] text-white bg-[#EE0434] shadow-md"
|
|
|
: dataActiveOptions.includes(data)
|
|
|
- ? "border-[#ffffff] text-black bg-[#ffffff] shadow-md"
|
|
|
- : "border-slate-100 text-slate-300"
|
|
|
+ ? "border-[#ffffff] text-black bg-[#ffffff] shadow-md"
|
|
|
+ : "border-slate-100 text-slate-300"
|
|
|
}`}
|
|
|
>
|
|
|
- {data === "0" ? "Unlimited" : data + " GB"}
|
|
|
+ {data === "0" ? "Unlimited" : data}
|
|
|
</button>
|
|
|
))}
|
|
|
</div>
|
trunghieubui