@akinon/projectzero 1.32.0 → 1.33.0

package/app-template/src/app/[commerce]/[locale]/[currency]/account/orders/page.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useGetOrdersQuery } from '@akinon/next/data/client/account';
+import { LoaderSpinner, Pagination, Select } from '@theme/components';
+import { ContentHeader } from '@theme/views/account/content-header';
+import { Order } from '@theme/views/account/order';
+import { useLocalization, useRouter } from '@akinon/next/hooks';
+import { Trans } from '@akinon/next/components/trans';
+
+const AccountOrders = () => {
+  const { t } = useLocalization();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+  const [selectedDateRange, setSelectedDateRange] = useState(
+    searchParams.toString()
+  );
+
+  const dateOptions = [
+    {
+      label: t('account.my_orders.order.choose_date'),
+      value: ''
+    },
+    ...Array.from({ length: 5 }, (_, index) => {
+      const year = new Date().getFullYear() - index;
+      const startDate = `${year}-01-01`;
+      const endDate = `${year + 1}-01-01`;
+
+      return {
+        label: `${year}`,
+        value: `created_date__gte=${startDate}&created_date__lte=${endDate}`
+      };
+    })
+  ];
+
+  const {
+    data: orders,
+    isLoading,
+    isFetching
+  } = useGetOrdersQuery({
+    page: Number(searchParams.get('page')),
+    limit: Number(searchParams.get('limit')),
+    createdDate: searchParams.get('created_date__gte'),
+    endDate: searchParams.get('created_date__lte')
+  });
+
+  const contentHeaderOrders = useMemo(
+    () =>
+      orders?.results.map((item) => ({ label: item.number, value: item.id })),
+    [orders]
+  );
+
+  const handleChange = async (e) => {
+    const newValue = e.target.value;
+
+    setSelectedDateRange(newValue);
+    router.push(pathname + '?' + newValue);
+  };
+
+  useEffect(() => {
+    const newSearchParams = new URLSearchParams(searchParams);
+
+    const paramsToKeep = ['created_date__gte', 'created_date__lte'];
+
+    newSearchParams.forEach((_value: string, key: string) => {
+      if (!paramsToKeep.includes(key)) {
+        newSearchParams.delete(key);
+      }
+    });
+
+    setSelectedDateRange(newSearchParams.toString());
+  }, [searchParams]);
+
+  if (isLoading || isFetching) {
+    return <LoaderSpinner />;
+  }
+
+  return (
+    <div className="flex-1">
+      <ContentHeader orders={contentHeaderOrders} />
+      <div className="w-full flex items-center justify-between mb-4 md:mb-2">
+        <div className="flex items-center gap-4">
+          <span className="text-sm">
+            <Trans
+              i18nKey="account.my_orders.order.count"
+              components={{
+                Orders: (
+                  <b>
+                    {orders?.count} {t('account.my_orders.order.orders')}
+                  </b>
+                )
+              }}
+            />
+          </span>
+          <Select
+            className="w-32"
+            onChange={(e) => handleChange(e)}
+            options={dateOptions}
+            value={selectedDateRange}
+          />
+        </div>
+        <div className="hidden text-xs text-right md:block">
+          <Pagination
+            total={orders.count}
+            containerClassName="flex flex-wrap justify-end mb-0 mt-0"
+            numberOfPages={Math.ceil(orders.count / 12)}
+            currentPage={Number(searchParams.get('page')) || 1}
+          />
+        </div>
+      </div>
+      {orders?.results.length > 0 ? (
+        <>
+          {orders.results.map((item, index) => (
+            <Order key={index} {...item} />
+          ))}
+
+          <div className="text-xs text-right my-4">
+            <Pagination
+              total={orders.count}
+              containerClassName="flex flex-wrap mt-8 mb-4 justify-end"
+              numberOfPages={Math.ceil(orders.count / 12)}
+              currentPage={Number(searchParams.get('page')) || 1}
+            />
+          </div>
+        </>
+      ) : (
+        <p className="text-lg text-center md:text-2xl">
+          {t('account.my_orders.order.order_not_found')}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default AccountOrders;

package/app-template/src/app/[commerce]/[locale]/[currency]/account/page.tsx

@@ -0,0 +1,226 @@
+'use client';
+
+import { ContentHeader } from '@theme/views/account/content-header';
+import {
+  Accordion,
+  TabPanel,
+  Tabs,
+  Skeleton,
+  SkeletonWrapper,
+  Link
+} from '@theme/components';
+import { Image } from '@akinon/next/components/image';
+import { Trans } from '@akinon/next/components/trans';
+import { useGetOrdersQuery } from '@akinon/next/data/client/account';
+import { ROUTES } from '@theme/routes';
+import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
+import { useGetAddressesQuery } from '@akinon/next/data/client/address';
+import { useLocalization } from '@akinon/next/hooks';
+
+export default function Page() {
+  const { t } = useLocalization();
+
+  const {
+    data: address,
+    isLoading: addressLoading,
+    isSuccess: addressSuccess
+  } = useGetAddressesQuery();
+  const {
+    data: orders,
+    isLoading: orderLoading,
+    isSuccess: orderSuccess
+  } = useGetOrdersQuery({});
+  const {
+    data: faq,
+    isLoading: faqLoading,
+    isSuccess: faqSuccess
+  } = useGetWidgetQuery('faq');
+  const {
+    data: discovery,
+    isLoading: discoveryLoading,
+    isSuccess: discoverySuccess
+  } = useGetWidgetQuery('account-discovery');
+
+  const filteredData = orders?.results?.map((item) => {
+    return { label: item.number, value: item.id };
+  });
+
+  const defaultAddress = address?.results?.find(
+    (address) => address.primary === true
+  );
+
+  return (
+    <div className="hidden lg:block">
+      <div className="bg-gray-150">
+        {orderLoading && (
+          <SkeletonWrapper className="w-full px-6 mb-12 h-28 items-center justify-center !flex-row xl:h-[5.5rem]">
+            <Skeleton className="w-[11.375rem] h-16 mr-4 xl:w-[16rem] xl:h-10" />
+            <Skeleton className="w-56 h-10 mr-4" />
+            <Skeleton className="w-[12.75rem] h-10 xl:w-56" />
+          </SkeletonWrapper>
+        )}
+        {orderSuccess && <ContentHeader orders={filteredData} />}
+      </div>
+
+      <div className="grid gap-7 grid-cols-6 ">
+        <div className="border border-gray-200 pt-8 pb-6 px-8 text-center flex flex-col justify-between col-span-2">
+          <h2 className="text-3xl xl:w-44 xl:mx-auto after:content-[''] after:w-16 after:h-[1px] after:bg-gray-300 after:block after:my-5 after:mx-auto">
+            {t('account.base.widgets.address_book.title')}
+          </h2>
+          {addressLoading && (
+            <SkeletonWrapper className="items-center justify-center">
+              <Skeleton className="w-56 h-4" />
+            </SkeletonWrapper>
+          )}
+          {addressSuccess && (
+            <div className="text-xs">
+              {defaultAddress ? (
+                <p className="break-words">
+                  {defaultAddress.line} / {defaultAddress.city.name}
+                </p>
+              ) : (
+                <p>{t('account.base.widgets.address_book.content_first')}</p>
+              )}
+            </div>
+          )}
+          <p className="mt-10 text-xs">
+            <Trans
+              i18nKey="account.base.widgets.address_book.content_second"
+              components={{
+                Link: (
+                  <Link href={ROUTES.ACCOUNT_ADDRESS} className="underline">
+                    {t('account.base.widgets.address_book.link_title')}
+                  </Link>
+                )
+              }}
+            />
+          </p>
+        </div>
+
+        <div className="border border-gray-200 pt-8 pb-6 px-8 text-center col-span-2">
+          <h2 className="text-3xl xl:w-44 xl:mx-auto after:content-[''] after:w-16 after:h-[1px] after:bg-gray-300 after:block after:my-5 after:mx-auto">
+            {t('account.base.widgets.gift_card.title')}
+          </h2>
+          <p className="text-xs">
+            <Trans
+              i18nKey="account.base.widgets.gift_card.content"
+              components={{
+                Link: (
+                  <Link href={ROUTES.ACCOUNT_COUPONS} className="underline">
+                    {t('account.base.widgets.gift_card.link_title')}
+                  </Link>
+                )
+              }}
+            />
+          </p>
+        </div>
+
+        <div className="border border-gray-200 pt-8 pb-6 px-8 text-center flex flex-col justify-between col-span-2">
+          <h2 className="text-3xl xl:w-44 xl:mx-auto after:content-[''] after:w-16 after:h-[1px] after:bg-gray-300 after:block after:mb-5 after:mt-14 after:mx-auto">
+            {t('account.base.widgets.contact_us.title')}
+          </h2>
+          <p className="border-b border-gray-200 pb-4 text-xs">
+            <Trans
+              i18nKey="account.base.widgets.contact_us.content"
+              components={{
+                Link: (
+                  <Link href={ROUTES.ACCOUNT_CONTACT} className="underline">
+                    {t('account.base.widgets.contact_us.link_title')}
+                  </Link>
+                )
+              }}
+            />
+          </p>
+          <p className="pt-3">
+            <Link href="tel:+902123270050" className="text-2xl">
+              +90 212 327 00 50
+            </Link>
+          </p>
+        </div>
+
+        <div className="border border-gray-200 pt-8 pb-6 px-8 col-span-4">
+          <h2 className="text-3xl w-44">
+            {t('account.base.widgets.faq.title')}
+          </h2>
+          <p className="my-4 text-xs">
+            {t('account.base.widgets.faq.content')}
+          </p>
+          {faqLoading && (
+            <SkeletonWrapper className="gap-4">
+              <Skeleton className="w-full h-9" />
+              <Skeleton className="w-full h-[8.375rem]" />
+            </SkeletonWrapper>
+          )}
+          {faqSuccess && (
+            <Tabs>
+              {faq?.attributes?.faq_categories
+                ?.filter((item) => item.value.is_top_five === 'yes')
+                .map((item, index) => (
+                  <TabPanel key={index} title={item.value.category}>
+                    <div key={index}>
+                      <div className="text-lg font-medium text-black-700 mb-4">
+                        {item.value.category}
+                      </div>
+                      {faq?.attributes?.faq_contents
+                        ?.filter((item) => item.value.is_top_five === 'yes')
+                        .map((faq, index) => {
+                          if (faq.value.category == item.value.category_id) {
+                            return (
+                              <Accordion title={faq.value.title} key={index}>
+                                <div
+                                  dangerouslySetInnerHTML={{
+                                    __html: faq.value.content
+                                  }}
+                                />
+                              </Accordion>
+                            );
+                          }
+                        })}
+                    </div>
+                  </TabPanel>
+                ))}
+            </Tabs>
+          )}
+        </div>
+
+        <div className="col-span-2">
+          {discoveryLoading && (
+            <SkeletonWrapper>
+              <Skeleton className="w-full h-[11.875rem] mb-1 xl:h-[14.75rem]" />
+              <Skeleton className="w-48 h-4 mb-1" />
+              <Skeleton className="w-24 h-4" />
+            </SkeletonWrapper>
+          )}
+
+          {discoverySuccess && (
+            <div>
+              {discovery?.attributes?.account_discovery?.kwargs?.value?.image
+                ?.url && (
+                <Image
+                  src={
+                    discovery?.attributes?.account_discovery?.kwargs?.value
+                      ?.image?.url
+                  }
+                  alt={discovery?.attributes?.account_discovery?.value?.text}
+                  aspectRatio={432 / 304}
+                  sizes="(min-width: 1170px) 320px,
+                            (min-width: 1370px) 432px"
+                  fill
+                />
+              )}
+              <p>{discovery?.attributes?.account_discovery?.value?.text}</p>
+              {discovery?.attributes?.account_discovery.value?.url && (
+                <Link
+                  href={discovery?.attributes?.account_discovery?.value?.url}
+                  className="text-xs underline"
+                >
+                  {discovery?.attributes?.account_discovery?.value?.url_text}
+                </Link>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}