hero adjustments (#131)

jekabolt · Oct 5, 2024 · af61130 · af61130
1 parent 6e8bdc5
commit af61130
Show file tree

Hide file tree

Showing 7 changed files with 187 additions and 96 deletions.
diff --git a/proto b/proto
diff --git a/src/api/proto-http/common/index.ts b/src/api/proto-http/common/index.ts
@@ -528,25 +528,78 @@ export type CurrencyMap = {
   currencies: { [key: string]: CurrencyRate } | undefined;
 };
 
-export type HeroItemInsert = {
-  mediaId: number | undefined;
+export type HeroType =
+  | "HERO_TYPE_UNKNOWN"
+  | "HERO_TYPE_SINGLE_ADD"
+  | "HERO_TYPE_DOUBLE_ADD"
+  | "HERO_TYPE_MAIN_ADD"
+  | "HERO_TYPE_FEATURED_PRODUCTS";
+export type HeroFull = {
+  entities: HeroEntity[] | undefined;
+};
+
+export type HeroEntity = {
+  type: HeroType | undefined;
+  singleAdd: HeroSingleAdd | undefined;
+  doubleAdd: HeroDoubleAdd | undefined;
+  mainAdd: HeroMainAdd | undefined;
+  featuredProducts: HeroFeaturedProducts | undefined;
+};
+
+export type HeroSingleAdd = {
+  media: MediaFull | undefined;
   exploreLink: string | undefined;
   exploreText: string | undefined;
-  isMain: boolean | undefined;
 };
 
-export type HeroItem = {
-  media: MediaFull | undefined;
+export type HeroDoubleAdd = {
+  left: HeroSingleAdd | undefined;
+  right: HeroSingleAdd | undefined;
+};
+
+export type HeroMainAdd = {
+  singleAdd: HeroSingleAdd | undefined;
+};
+
+export type HeroFeaturedProducts = {
+  products: Product[] | undefined;
+  title: string | undefined;
+  exploreText: string | undefined;
+  exploreLink: string | undefined;
+};
+
+export type HeroFullInsert = {
+  entities: HeroEntityInsert[] | undefined;
+};
+
+export type HeroEntityInsert = {
+  type: HeroType | undefined;
+  singleAdd: HeroSingleAddInsert | undefined;
+  doubleAdd: HeroDoubleAddInsert | undefined;
+  mainAdd: HeroMainAddInsert | undefined;
+  featuredProducts: HeroFeaturedProductsInsert | undefined;
+};
+
+export type HeroSingleAddInsert = {
+  mediaId: number | undefined;
   exploreLink: string | undefined;
   exploreText: string | undefined;
-  isMain: boolean | undefined;
 };
 
-export type HeroFull = {
-  id: number | undefined;
-  createdAt: wellKnownTimestamp | undefined;
-  ads: HeroItem[] | undefined;
-  productsFeatured: Product[] | undefined;
+export type HeroDoubleAddInsert = {
+  left: HeroSingleAddInsert | undefined;
+  right: HeroSingleAddInsert | undefined;
+};
+
+export type HeroMainAddInsert = {
+  singleAdd: HeroSingleAddInsert | undefined;
+};
+
+export type HeroFeaturedProductsInsert = {
+  productIds: number[] | undefined;
+  title: string | undefined;
+  exploreText: string | undefined;
+  exploreLink: string | undefined;
 };
 
 // Subscriber represents the subscriber table

diff --git a/src/api/proto-http/frontend/index.ts b/src/api/proto-http/frontend/index.ts
@@ -12,22 +12,27 @@ export type GetHeroResponse = {
 };
 
 export type common_HeroFull = {
-  id: number | undefined;
-  createdAt: wellKnownTimestamp | undefined;
-  ads: common_HeroItem[] | undefined;
-  productsFeatured: common_Product[] | undefined;
+  entities: common_HeroEntity[] | undefined;
 };
 
-// Encoded using RFC 3339, where generated output will always be Z-normalized
-// and uses 0, 3, 6 or 9 fractional digits.
-// Offsets other than "Z" are also accepted.
-type wellKnownTimestamp = string;
+export type common_HeroEntity = {
+  type: common_HeroType | undefined;
+  singleAdd: common_HeroSingleAdd | undefined;
+  doubleAdd: common_HeroDoubleAdd | undefined;
+  mainAdd: common_HeroMainAdd | undefined;
+  featuredProducts: common_HeroFeaturedProducts | undefined;
+};
 
-export type common_HeroItem = {
+export type common_HeroType =
+  | "HERO_TYPE_UNKNOWN"
+  | "HERO_TYPE_SINGLE_ADD"
+  | "HERO_TYPE_DOUBLE_ADD"
+  | "HERO_TYPE_MAIN_ADD"
+  | "HERO_TYPE_FEATURED_PRODUCTS";
+export type common_HeroSingleAdd = {
   media: common_MediaFull | undefined;
   exploreLink: string | undefined;
   exploreText: string | undefined;
-  isMain: boolean | undefined;
 };
 
 export type common_MediaFull = {
@@ -39,6 +44,11 @@ export type common_MediaFull = {
   media: common_MediaItem | undefined;
 };
 
+// Encoded using RFC 3339, where generated output will always be Z-normalized
+// and uses 0, 3, 6 or 9 fractional digits.
+// Offsets other than "Z" are also accepted.
+type wellKnownTimestamp = string;
+
 export type common_MediaItem = {
   // Full-size media URL
   fullSize: common_MediaInfo | undefined;
@@ -59,6 +69,22 @@ export type common_MediaInfo = {
   height: number | undefined;
 };
 
+export type common_HeroDoubleAdd = {
+  left: common_HeroSingleAdd | undefined;
+  right: common_HeroSingleAdd | undefined;
+};
+
+export type common_HeroMainAdd = {
+  singleAdd: common_HeroSingleAdd | undefined;
+};
+
+export type common_HeroFeaturedProducts = {
+  products: common_Product[] | undefined;
+  title: string | undefined;
+  exploreText: string | undefined;
+  exploreLink: string | undefined;
+};
+
 export type common_Product = {
   id: number | undefined;
   createdAt: wellKnownTimestamp | undefined;
@@ -549,14 +575,6 @@ export type CancelOrderInvoiceRequest = {
 export type CancelOrderInvoiceResponse = {
 };
 
-export type CheckPaymentRequest = {
-  orderUuid: string | undefined;
-};
-
-export type CheckPaymentResponse = {
-  payment: common_Payment | undefined;
-};
-
 export type SubscribeNewsletterRequest = {
   email: string | undefined;
 };
@@ -632,8 +650,6 @@ export interface FrontendService {
   GetOrderInvoice(request: GetOrderInvoiceRequest): Promise<GetOrderInvoiceResponse>;
   // Cancel an invoice for the order
   CancelOrderInvoice(request: CancelOrderInvoiceRequest): Promise<CancelOrderInvoiceResponse>;
-  // CheckPayment checks the crypto payment if it has been received and updates the order status if it has been received
-  CheckPayment(request: CheckPaymentRequest): Promise<CheckPaymentResponse>;
   // Subscribe to the newsletter
   SubscribeNewsletter(request: SubscribeNewsletterRequest): Promise<SubscribeNewsletterResponse>;
   // Unsubscribe from the newsletter
@@ -879,26 +895,6 @@ export function createFrontendServiceClient(
         method: "CancelOrderInvoice",
       }) as Promise<CancelOrderInvoiceResponse>;
     },
-    CheckPayment(request) { // eslint-disable-line @typescript-eslint/no-unused-vars
-      if (!request.orderUuid) {
-        throw new Error("missing required field request.order_uuid");
-      }
-      const path = `api/frontend/order/check/${request.orderUuid}`; // eslint-disable-line quotes
-      const body = null;
-      const queryParams: string[] = [];
-      let uri = path;
-      if (queryParams.length > 0) {
-        uri += `?${queryParams.join("&")}`
-      }
-      return handler({
-        path: uri,
-        method: "GET",
-        body,
-      }, {
-        service: "FrontendService",
-        method: "CheckPayment",
-      }) as Promise<CheckPaymentResponse>;
-    },
     SubscribeNewsletter(request) { // eslint-disable-line @typescript-eslint/no-unused-vars
       const path = `api/frontend/newsletter/subscribe`; // eslint-disable-line quotes
       const body = JSON.stringify(request);

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,31 +1,38 @@
 import CoreLayout from "@/components/layouts/CoreLayout";
-import AdsSection from "@/components/sections/AdsSection";
-import HeroSection from "@/components/sections/HeroSection";
+import HeroAds from "@/components/sections/HeroSection/Ads";
+import HeroMain from "@/components/sections/HeroSection/Main";
 import ProductsSection from "@/components/sections/ProductsGridSection";
 import Button from "@/components/ui/Button";
 import { ButtonStyle } from "@/components/ui/Button/styles";
 import { serviceClient } from "@/lib/api";
 import Link from "next/link";
-import { notFound } from "next/navigation";
 
 export default async function Page() {
   const { hero } = await serviceClient.GetHero({});
 
-  if (!hero) return notFound();
-
-  const main = hero.ads?.find((x) => x.isMain);
-
-  const ads = hero.ads?.filter((x) => !x.isMain);
+  //if (!hero?.entities || hero?.entities?.length === 0) return notFound();
 
   return (
     <>
-      {main && <HeroSection {...main} />}
+      <HeroMain main={hero?.entities?.[0].mainAdd} />
       <CoreLayout>
-        <AdsSection ads={ads} />
+        {hero?.entities?.map((e) => {
+          switch (e.type) {
+            case "HERO_TYPE_SINGLE_ADD":
+              return <HeroAds singleAd={e.singleAdd}></HeroAds>;
+            case "HERO_TYPE_DOUBLE_ADD":
+              return <HeroAds doubleAd={e.doubleAdd}></HeroAds>;
+            case "HERO_TYPE_FEATURED_PRODUCTS":
+              return (
+                <ProductsSection products={e.featuredProducts?.products} />
+              );
+            default:
+              return null;
+          }
+        })}
         <Button asChild style={ButtonStyle.bigButton}>
           <Link href="/catalog">view all</Link>
         </Button>
-        <ProductsSection products={hero.productsFeatured} />
       </CoreLayout>
     </>
   );

diff --git a/src/components/sections/AdsSection.tsx b/src/components/sections/AdsSection.tsx
diff --git a/src/components/sections/HeroSection/Ads.tsx b/src/components/sections/HeroSection/Ads.tsx
@@ -0,0 +1,64 @@
+import {
+  common_HeroDoubleAdd,
+  common_HeroSingleAdd,
+} from "@/api/proto-http/frontend";
+import Image from "@/components/ui/Image";
+import { calculateAspectRatio } from "@/lib/utils";
+
+export default function AdsSection({
+  singleAd,
+  doubleAd,
+}: {
+  singleAd?: common_HeroSingleAdd;
+  doubleAd?: common_HeroDoubleAdd;
+}) {
+  return (
+    <>
+      {singleAd && (
+        <div key={singleAd.media?.id} className="h-[600px]">
+          <Image
+            src={singleAd.media?.media?.fullSize?.mediaUrl || ""}
+            alt="ad hero image"
+            aspectRatio={calculateAspectRatio(
+              singleAd.media?.media?.fullSize?.width,
+              singleAd.media?.media?.fullSize?.height,
+            )}
+            // blurHash={media.media?.blurhash}
+          />
+        </div>
+      )}
+      {doubleAd && (
+        <div className="grid grid-cols-2 gap-3">
+          <div
+            key={doubleAd.left?.media?.id}
+            className="relative col-span-1 h-[600px]"
+          >
+            <Image
+              src={doubleAd.left?.media?.media?.fullSize?.mediaUrl || ""}
+              alt="ad hero image"
+              aspectRatio={calculateAspectRatio(
+                doubleAd.left?.media?.media?.fullSize?.width,
+                doubleAd.left?.media?.media?.fullSize?.height,
+              )}
+              // blurHash={media.media?.blurhash}
+            />
+          </div>
+          <div
+            key={doubleAd.right?.media?.id}
+            className="relative col-span-1 h-[600px]"
+          >
+            <Image
+              src={doubleAd.right?.media?.media?.fullSize?.mediaUrl || ""}
+              alt="ad hero image"
+              aspectRatio={calculateAspectRatio(
+                doubleAd.right?.media?.media?.fullSize?.width,
+                doubleAd.right?.media?.media?.fullSize?.height,
+              )}
+              // blurHash={media.media?.blurhash}
+            />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/sections/HeroSection.tsx → src/components/sections/HeroSection/Main.tsx b/src/components/sections/HeroSection.tsx → src/components/sections/HeroSection/Main.tsx
@@ -1,15 +1,15 @@
-import { common_HeroItem } from "@/api/proto-http/frontend";
+import { common_HeroMainAdd } from "@/api/proto-http/frontend";
 import Image from "@/components/ui/Image";
 
-export default function Hero({ media }: common_HeroItem) {
-  if (!media) return null;
+export default function AdsSection({ main }: { main?: common_HeroMainAdd }) {
+  if (!main) return null;
 
   return (
     <div className="flex h-screen items-center justify-center bg-slate-50">
       <div className="h-[600px]">
         <Image
           fit="contain"
-          src={media.media?.fullSize?.mediaUrl!}
+          src={main.singleAdd?.media?.media?.fullSize?.mediaUrl!}
           alt="main hero image"
           aspectRatio="4/3"
           // blurHash={media.media?.blurhash}