Skip to content

Commit

Permalink
Merge pull request #75 from NextCafeteria/feature/more-customizations
Browse files Browse the repository at this point in the history 
Add customizations for currency
  • Loading branch information
@vietanhdev
vietanhdev committed Aug 20, 2023
2 parents bdf4aac + 88f86a9 commit 6240356
Show file tree
Hide file tree
Showing 21 changed files with 287 additions and 55 deletions.
36 changes: 31 additions & 5 deletions src/app/[lng]/cart/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ import XButton from "@/components/buttons/XButton";
import CartItemCard from "@/components/cart/CartItemCard";
import Payment from "@/components/cart/Payment";
import { toast } from "react-toastify";
import { useGetCommonSettings } from "@/lib/requests/settings";
import { formatPrice } from "@/lib/utils";

export default function Cart({ params: { lng } }) {
const router = useRouter();
const session = useSession();
Expand All @@ -19,6 +22,7 @@ export default function Cart({ params: { lng } }) {
return <></>;
}

const { data: commonSettings } = useGetCommonSettings();
const [hidePayment, setHidePayment] = useState(true);
const [cartData, setCartData] = useState(null);
const [storeId, setStoreId] = useState(null);
Expand Down Expand Up @@ -130,21 +134,37 @@ export default function Cart({ params: { lng } }) {
<div className="flex justify-between w-full pt-4">
<p className="text-sm font-bold mb-2">{t("Before Tax")}</p>
<p className="text-sm font-bold mb-2">
{cartData?.price?.toLocaleString("vi-VN")}đ
{cartData?.price &&
formatPrice(
cartData?.price,
commonSettings?.currencyPrefix,
commonSettings?.currencySuffix,
commonSettings?.currencyDecimal
)}
</p>
</div>
<div className="flex justify-between w-full">
<p className="text-sm font-bold mb-2">{t("Tax")}</p>
<p className="text-sm font-bold mb-2">
{cartData?.tax && cartData?.tax?.toLocaleString("vi-VN")}đ
{cartData?.tax &&
formatPrice(
cartData?.tax,
commonSettings?.currencyPrefix,
commonSettings?.currencySuffix,
commonSettings?.currencyDecimal
)}
</p>
</div>
<div className="flex justify-between w-full border-b-2 border-gray-800">
<p className="text-sm font-bold mb-2">{t("Total")}</p>
<p className="text-sm font-bold mb-2">
{cartData?.tax &&
cartData?.total?.toLocaleString("vi-VN")}
đ
formatPrice(
cartData?.total,
commonSettings?.currencyPrefix,
commonSettings?.currencySuffix,
commonSettings?.currencyDecimal
)}
</p>
</div>
</>
Expand All @@ -166,7 +186,13 @@ export default function Cart({ params: { lng } }) {
{t("Place Order!")}
</span>
<span className="text-2xl float-right">
{cartData?.total?.toLocaleString("vi-VN")}đ
{cartData?.total &&
formatPrice(
cartData?.total,
commonSettings?.currencyPrefix,
commonSettings?.currencySuffix,
commonSettings?.currencyDecimal
)}
</span>
</div>
)}
Expand Down
60 changes: 53 additions & 7 deletions src/app/[lng]/dashboard/settings/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
useGetCommonSettings,
UpdateCommonSettings,
} from "@/lib/requests/settings";
import { useEffect, useState } from "react";

import Skeleton from "react-loading-skeleton";
import { useRouter } from "next/navigation";
Expand Down Expand Up @@ -37,14 +36,14 @@ export default function ({ params: { lng, storeId } }) {
</div>
<div className="flex flex-col items-center justify-center w-full p-2 min-h-[100px] my-1 mx-0 rounded-md">
<div className="flex flex-col items-begin justify-center w-full relative">
<p className="text-xl">{t("Brand name")}</p>
<p className="text-md">{t("Brand name")}</p>
{commonSettings === null ? (
<Skeleton height={30} className="mb-2" />
) : (
<input
placeholder={t("Brand name")}
type="text"
className="w-full border-[1px] border-gray-600 rounded-md p-2 mb-2"
className="w-full border-[1px] border-gray-600 rounded-md p-2 mb-2 input"
value={commonSettings?.brandName}
onChange={(e) => {
let newCommonSettings = { ...commonSettings };
Expand All @@ -53,14 +52,14 @@ export default function ({ params: { lng, storeId } }) {
}}
/>
)}
<p className="text-xl">{t("Description")}</p>
<p className="text-md">{t("Description")}</p>
{commonSettings === null ? (
<Skeleton height={30} className="mb-2" />
) : (
<input
placeholder={t("Description")}
type="text"
className="w-full border-[1px] border-gray-600 rounded-md p-2 mb-2"
className="w-full border-[1px] border-gray-600 rounded-md p-2 mb-2 input"
value={commonSettings?.brandDescription}
onChange={(e) => {
let newCommonSettings = { ...commonSettings };
Expand All @@ -69,12 +68,12 @@ export default function ({ params: { lng, storeId } }) {
}}
/>
)}
<p className="text-xl">{t("Theme")}</p>
<p className="text-md">{t("Theme")}</p>
{commonSettings === null ? (
<Skeleton height={30} className="mb-2" />
) : (
<select
className="w-full border-[1px] border-gray-600 rounded-md p-2 mb-2"
className="w-full border-[1px] border-gray-600 rounded-md p-2 mb-2 input"
value={commonSettings?.theme}
onChange={(e) => {
let newCommonSettings = { ...commonSettings };
Expand Down Expand Up @@ -114,6 +113,53 @@ export default function ({ params: { lng, storeId } }) {
</option>
</select>
)}
<div className="flex w-full justify-between pb-3 pt-2 text-xl mb-2 mt-4">
{t("Currency Settings")}
</div>
{commonSettings === null ? (
<Skeleton height={30} className="mb-2" />
) : (
<div className="relative">
<div className="w-[100px]">{t("Prefix")} </div>
<input
placeholder={t("Currency Prefix")}
type="text"
className="w-full border-[1px] border-gray-600 rounded-md p-2 mb-2 input"
value={commonSettings?.currencyPrefix}
onChange={(e) => {
let newCommonSettings = { ...commonSettings };
newCommonSettings.currencyPrefix = e.target.value;
mutateSettings(newCommonSettings, { revalidate: false });
}}
/>
<div>{t("Suffix")} </div>
<input
placeholder={t("Currency Suffix")}
type="text"
className="w-full border-[1px] border-gray-600 rounded-md p-2 mb-2 input"
value={commonSettings?.currencySuffix}
onChange={(e) => {
let newCommonSettings = { ...commonSettings };
newCommonSettings.currencySuffix = e.target.value;
mutateSettings(newCommonSettings, { revalidate: false });
}}
/>
<div>{t("Decimal")} </div>
<input
placeholder={t("Currency Decimal")}
type="number"
min={0}
max={2}
className="w-full border-[1px] border-gray-600 rounded-md p-2 mb-2 input"
value={commonSettings?.currencyDecimal || 0}
onChange={(e) => {
let newCommonSettings = { ...commonSettings };
newCommonSettings.currencyDecimal = e.target.value;
mutateSettings(newCommonSettings, { revalidate: false });
}}
/>
</div>
)}
</div>
<div className="flex w-full mt-4">
<button
Expand Down
1 change: 0 additions & 1 deletion src/app/[lng]/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ const roboto = Roboto({
export default function RootLayout({ children, params: { lng } }) {
const pathname = usePathname();
const isDashboard = pathname.split("/")[2] === "dashboard";
const DEFAULT_THEME = "light";

const { data: commonSettings, error } = useGetCommonSettings();
if (error) {
Expand Down
34 changes: 29 additions & 5 deletions src/app/[lng]/order-details/[orderId]/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
"use client";
import { useEffect, useState } from "react";
import { useTranslation } from "@/app/i18n/client";
import { useRouter } from "next/navigation";
import { useGetOrder, CancelOrder } from "@/lib/requests/orders";
Expand All @@ -12,6 +11,8 @@ import { useSession } from "next-auth/react";
import BackButton from "@/components/buttons/BackButton";
import Rating from "@/components/Rating";
import Comment from "@/components/Comment";
import { useGetCommonSettings } from "@/lib/requests/settings";
import { formatPrice } from "@/lib/utils";

export default function ({ params: { lng, orderId } }) {
const router = useRouter();
Expand All @@ -20,6 +21,8 @@ export default function ({ params: { lng, orderId } }) {
router.push(`/${lng}/login`);
}

const { data: commonSettings } = useGetCommonSettings();

const { order: orderData, isLoading, error } = useGetOrder(orderId);
if (error) {
console.log(error);
Expand Down Expand Up @@ -98,7 +101,13 @@ export default function ({ params: { lng, orderId } }) {
<div className="flex justify-between w-full pb-1 pt-2">
<p className="text-sm font-bold">{t(name)}</p>
<p className="text-sm font-bold">
{quantity} x {price?.toLocaleString("vi-VN")}đ
{quantity} x{" "}
{formatPrice(
price,
commonSettings?.currencyPrefix,
commonSettings?.currencySuffix,
commonSettings?.currencyDecimal
)}
</p>
</div>
<img src={item.image} className="w-16 h-auto rounded-md mb-4" />
Expand Down Expand Up @@ -133,19 +142,34 @@ export default function ({ params: { lng, orderId } }) {
<div className="flex justify-between w-full pt-4">
<p className="text-sm font-bold mb-2">{t("Before Tax")}</p>
<p className="text-sm font-bold mb-2">
{price?.toLocaleString("vi-VN")}đ
{formatPrice(
price,
commonSettings?.currencyPrefix,
commonSettings?.currencySuffix,
commonSettings?.currencyDecimal
)}
</p>
</div>
<div className="flex justify-between w-full">
<p className="text-sm font-bold mb-2">{t("Tax")}</p>
<p className="text-sm font-bold mb-2">
{tax?.toLocaleString("vi-VN")}đ
{formatPrice(
tax,
commonSettings?.currencyPrefix,
commonSettings?.currencySuffix,
commonSettings?.currencyDecimal
)}
</p>
</div>
<div className="flex justify-between w-full border-b-2 border-gray-800">
<p className="text-sm font-bold mb-2">{t("Total")}</p>
<p className="text-sm font-bold mb-2">
{totalPrice?.toLocaleString("vi-VN")}đ
{formatPrice(
totalPrice,
commonSettings?.currencyPrefix,
commonSettings?.currencySuffix,
commonSettings?.currencyDecimal
)}
</p>
</div>
</>
Expand Down
13 changes: 11 additions & 2 deletions src/app/[lng]/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,17 @@ import dynamic from "next/dynamic";
import { useGetProducts } from "@/lib/requests/products";
import { useTranslation } from "@/app/i18n/client";
const Header = dynamic(() => import("@/components/Header"), { ssr: false });
import { useGetCommonSettings } from "@/lib/requests/settings";
import { formatPrice } from "@/lib/utils";

export default function Home({ params: { lng } }) {
const { products, error, isLoading } = useGetProducts();
if (error) {
console.log(error);
}

const { data: commonSettings } = useGetCommonSettings();

const productCss = `
@media screen and (min-width: 768px) {
.product {
Expand Down Expand Up @@ -55,15 +59,20 @@ export default function Home({ params: { lng } }) {
>
<div
key={key}
className="product md:w-[380px] clickable flex items-center justify-between w-full p-4 border-[1px] border-gray-600 min-h-[160px] my-1 mx-1 rounded-md"
className="product md:w-[380px] clickable flex items-center justify-between w-full p-4 border-[1px] bg-white border-gray-600 min-h-[160px] my-1 mx-1 rounded-md"
>
<div className="product-details flex flex-col items-begin justify-center w-fit relative">
<p className="text-xl font-bold mb-[1px]">
{t(product.name)}
</p>
<p className="text-sm font-bold">
{" "}
{product.price.toLocaleString("vi-VN")}đ
{formatPrice(
product.price,
commonSettings?.currencyPrefix,
commonSettings?.currencySuffix,
commonSettings?.currencyDecimal
)}
</p>
<p className="text-sm h-[2.25rem] mr-1 mt-[3px]">
{t(product.description)}
Expand Down
30 changes: 24 additions & 6 deletions src/app/[lng]/pick-item-options/[itemId]/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import { useTranslation } from "@/app/i18n/client";
import { useGetProduct } from "@/lib/requests/products";
import XButton from "@/components/buttons/XButton";
import { toast } from "react-toastify";
import { useGetCommonSettings } from "@/lib/requests/settings";
import { formatPrice } from "@/lib/utils";

export default function PickOptions({ params: { lng, itemId } }) {
const router = useRouter();
Expand All @@ -17,6 +19,8 @@ export default function PickOptions({ params: { lng, itemId } }) {
return <></>;
}

const { data: commonSettings } = useGetCommonSettings();

// If item id is not valid, redirect to home page
if (!itemId) {
router.push(`/${lng}`);
Expand Down Expand Up @@ -105,12 +109,18 @@ export default function PickOptions({ params: { lng, itemId } }) {
<XButton />
</div>
<div className="flex flex-col items-center justify-center w-full p-2 min-h-[100px] my-1 mx-0 rounded-md">
<div className="product-content flex items-center justify-between w-full p-4 border-[1px] border-gray-600 min-h-[160px] my-1 mx-1 rounded-md">
<div className="product-content flex items-center justify-between bg-white w-full p-4 border-[1px] border-gray-600 min-h-[160px] my-1 mx-1 rounded-md">
<div className="flex flex-col items-begin justify-center w-fit relative">
<p className="text-xl font-bold">{t(product?.name)}</p>
<p className="text-sm">{t(product?.description)}</p>
<p className="text-sm">
{t("Base price")}: {product?.price?.toLocaleString("vi-VN")}đ
{t("Base price")}:{" "}
{formatPrice(
product?.price,
commonSettings?.currencyPrefix,
commonSettings?.currencySuffix,
commonSettings?.currencyDecimal
)}
</p>
</div>
<div className="h-32 w-32 rounded-sm">
Expand Down Expand Up @@ -197,10 +207,13 @@ export default function PickOptions({ params: { lng, itemId } }) {
htmlFor={t(option.name)}
>
{t(option.name)} (
{Number(option.price)?.toLocaleString(
"vi-VN"
{formatPrice(
option.price,
commonSettings?.currencyPrefix,
commonSettings?.currencySuffix,
commonSettings?.currencyDecimal
)}
đ)
)
</label>
</div>
);
Expand Down Expand Up @@ -253,7 +266,12 @@ export default function PickOptions({ params: { lng, itemId } }) {
>
<span className="text-2xl">+ {t("Add to cart")}</span>
<span className="text-2xl float-right">
{totalPrice?.toLocaleString("vi-VN")}đ
{formatPrice(
totalPrice,
commonSettings?.currencyPrefix,
commonSettings?.currencySuffix,
commonSettings?.currencyDecimal
)}
</span>
</div>
</main>
Expand Down
Loading

0 comments on commit 6240356

Please sign in to comment.