feature/card stripe payment (#128)

* update proto, remove sonner * fix invoices, add handling of request * change name * fix hero errorrs * add simplified button, text sizes, change layout name * simplify layouts * simplify cart row and redesign it according the design * remove invoice page, move cryprto patment QR code to order page
jekabolt · Oct 20, 2024 · 531dd9a · 531dd9a
1 parent 35a1ccb
commit 531dd9a
Show file tree

Hide file tree

Showing 50 changed files with 806 additions and 870 deletions.
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@stripe/stripe-js": "^4.6.0",
     "@uidotdev/usehooks": "^2.4.1",
     "blurhash-base64": "^0.0.3",
+    "class-variance-authority": "^0.7.0",
     "clsx": "2.1.0",
     "next": "15.0.0-canary.6",
     "qrcode": "^1.5.3",
@@ -36,7 +37,6 @@
     "react-hook-form": "^7.52.0",
     "react-intersection-observer": "^9.13.0",
     "react-photo-view": "^1.2.4",
-    "sonner": "^1.5.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/[mdxPageSlug]/page.tsx b/src/app/[mdxPageSlug]/page.tsx
@@ -1,5 +1,5 @@
 import { notFound } from "next/navigation";
-import CoreLayout from "@/components/layouts/CoreLayout";
+import NavigationLayout from "@/components/layouts/NavigationLayout";
 import AboutMdx from "./about.mdx";
 import ContactsMdx from "./contacts.mdx";
 import ShippingMdx from "./shipping.mdx";
@@ -32,10 +32,10 @@ export default function Page({ params }: Props) {
   }
 
   return (
-    <CoreLayout>
+    <NavigationLayout>
       <div className="prose lg:prose-xl">
         <MdxComponent />
       </div>
-    </CoreLayout>
+    </NavigationLayout>
   );
 }
diff --git a/src/app/archive/page.tsx b/src/app/archive/page.tsx
@@ -1,4 +1,4 @@
-import CoreLayout from "@/components/layouts/CoreLayout";
+import NavigationLayout from "@/components/layouts/NavigationLayout";
 import { serviceClient } from "@/lib/api";
 
 import { FullscreenImagesCarousel } from "@/components/sections/FullscreenImagesCarousel";
@@ -15,7 +15,7 @@ export default async function Page() {
 
   return (
     <div className="blueTheme">
-      <CoreLayout>
+      <NavigationLayout>
         <div className="flex flex-col gap-14">
           {nonEmptyArchives?.map((a, i) => (
             <div key={a.archive?.id || i} className="text-textColor">
@@ -40,7 +40,7 @@ export default async function Page() {
             </div>
           ))}
         </div>
-      </CoreLayout>
+      </NavigationLayout>
     </div>
   );
 }
diff --git a/src/app/cart/checkout/page.tsx b/src/app/cart/checkout/page.tsx
@@ -5,7 +5,7 @@ import {
   common_OrderNew,
 } from "@/api/proto-http/frontend";
 import NewOrderForm from "@/components/forms/NewOrderForm";
-import CoreLayout from "@/components/layouts/CoreLayout";
+import NavigationLayout from "@/components/layouts/NavigationLayout";
 import { serviceClient } from "@/lib/api";
 import { getValidateOrderItemsInsertItems } from "@/lib/utils/cart";
 import { redirect } from "next/navigation";
@@ -21,42 +21,7 @@ export default async function CheckoutPage() {
     promoCode: undefined,
   });
 
-  async function submitNewOrder(newOrderData: common_OrderNew) {
-    "use server";
-
-    try {
-      const submitOrderResponse = await serviceClient.SubmitOrder({
-        order: newOrderData,
-      });
-
-      if (!submitOrderResponse?.orderUuid) {
-        console.log("no data to create order invoice");
-
-        return {
-          ok: false,
-        };
-      }
-
-      console.log({
-        ok: true,
-        order: submitOrderResponse,
-      });
-
-      clearCartProducts();
-
-      return {
-        ok: true,
-        order: submitOrderResponse,
-      };
-    } catch (error) {
-      console.error("Error submitting new order:", error);
-      return {
-        ok: false,
-      };
-    }
-  }
-
-  const updateCookieCart = async (validItems: common_OrderItem[]) => {
+  async function updateCookieCart(validItems: common_OrderItem[]) {
     "use server";
 
     clearCartProducts();
@@ -74,15 +39,11 @@ export default async function CheckoutPage() {
         });
       }
     }
-  };
+  }
 
   return (
-    <CoreLayout hidePopupCart>
-      <NewOrderForm
-        submitNewOrder={submitNewOrder}
-        order={response}
-        updateCookieCart={updateCookieCart}
-      />
-    </CoreLayout>
+    <NavigationLayout>
+      <NewOrderForm order={response} updateCookieCart={updateCookieCart} />
+    </NavigationLayout>
   );
 }
diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
@@ -1,8 +1,7 @@
-import CoreLayout from "@/components/layouts/CoreLayout";
+import NavigationLayout from "@/components/layouts/NavigationLayout";
 import CartProductsList from "@/components/sections/Cart/CartProductsList";
 import TotalPrice from "@/components/sections/Cart/TotalPrice";
-import Button from "@/components/ui/Button";
-import { ButtonStyle } from "@/components/ui/Button/styles";
+import { Button } from "@/components/ui/Button";
 import { CartProductsSkeleton } from "@/components/ui/Skeleton";
 import { getCookieCart } from "@/lib/utils/cart";
 import Link from "next/link";
@@ -14,7 +13,7 @@ export default async function CartPage() {
   const cartItems = getCookieCart();
 
   return (
-    <CoreLayout hidePopupCart>
+    <NavigationLayout>
       <div className="relative flex gap-32">
         <div className="w-1/2">
           <div className="w-full">
@@ -33,13 +32,13 @@ export default async function CartPage() {
             {/* <TotalPrice /> */}
 
             {Object.keys(cartItems?.products || {}).length && (
-              <Button asChild style={ButtonStyle.simpleButton}>
+              <Button asChild size="lg" variant="main">
                 <Link href="/cart/checkout">checkout</Link>
               </Button>
             )}
           </div>
         </div>
       </div>
-    </CoreLayout>
+    </NavigationLayout>
   );
 }
diff --git a/src/app/catalog/page.tsx b/src/app/catalog/page.tsx
@@ -1,6 +1,6 @@
 import CatalogSection from "@/components/sections/CatalogSection";
 import Filters from "@/components/sections/Filters";
-import CoreLayout from "@/components/layouts/CoreLayout";
+import NavigationLayout from "@/components/layouts/NavigationLayout";
 import { CATALOG_LIMIT } from "@/constants";
 import { serviceClient } from "@/lib/api";
 import { getValidatedGetProductsPagedParams } from "@/lib/utils/queryFilters";
@@ -23,14 +23,14 @@ export default async function CatalogPage({ searchParams }: CatalogPageProps) {
   });
 
   return (
-    <CoreLayout>
+    <NavigationLayout>
       <div>
         <Filters />
         <CatalogSection
           total={response.total || 0}
           firstPageItems={response.products || []}
         />
       </div>
-    </CoreLayout>
+    </NavigationLayout>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -3,20 +3,41 @@
 @tailwind utilities;
 
 @layer base {
-  .lightTheme {
-    --background: #fff;
+  :root {
+    /* COLORS */
     --text: #000;
-    --button-text: #fff;
-    --highlight-text: #311eee;
+    --inactive: #cccccc;
+    --background: #fff;
+    --highlight: #311eee;
     --error: #ff0000;
+    --text-select: #75fb4c;
+    /* components-specific colors */
+    --button-text: #fff;
+    --visited-link: #501089;
+
+    /* TEXT */
+    --text-giant: 200px;
+    --text-giant-small: 110px;
+    --text-base: @apply text-base;
+    --text-small: @apply text-xs;
   }
 
   .blueTheme {
-    --background: #311eee;
     --text: #fff;
-    --button-text: #000;
-    --highlight-text: #fff;
+    --inactive: #cccccc;
+    --background: #311eee;
+    --highlight: #fff;
     --error: #ff0000;
+    --text-select: #75fb4c;
+    /* components-specific colors */
+    --button-text: #000;
+    --visited-link: #501089;
+
+    /* TEXT */
+    --text-giant: 200px;
+    --text-giant-small: 110px;
+    --text-base: @apply text-base;
+    --text-small: @apply text-xs;
   }
 
   /* * {