Merge pull request #27 from deco-sites/jonasjesus/deco-5282-device-visibility

feat(sections): per-device visibility gate (DECO-5282)

Author: JonasJesus42

src/components/ui/DeviceVisible.tsx

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+import { useDevice } from "@decocms/start/sdk/useDevice";
+
+export type DeviceVisibility = "all" | "mobile-only" | "desktop-only";
+
+export interface VisibilityConfig {
+  /**
+   * @title Exibir em
+   * @description Em quais dispositivos esta seção aparece. Útil para mostrar
+   * conteúdo diferente no celular e no computador.
+   * @default "all"
+   */
+  visibility?: DeviceVisibility;
+}
+
+export function isVisibleOnDevice(
+  device: string,
+  visibility: DeviceVisibility = "all",
+): boolean {
+  if (visibility === "all") return true;
+  const isDesktop = device === "desktop";
+  return visibility === "desktop-only" ? isDesktop : !isDesktop;
+}
+
+/**
+ * Server-side device gate. Renders children only on the configured device(s).
+ *
+ * Safe for SSR + caching: device is resolved server-side via `useDevice`
+ * (from the request user-agent) and the edge cache is segmented by device
+ * (see `buildSegment` in worker-entry), so the gated-out markup is never sent
+ * to — nor cached for — the wrong device, and there's no hydration mismatch.
+ */
+export default function DeviceVisible(
+  { visibility = "all", children }: VisibilityConfig & { children: ReactNode },
+) {
+  const device = useDevice();
+  if (!isVisibleOnDevice(device, visibility)) return null;
+  return <>{children}</>;
+}

src/sections/Images/Banner.tsx

@@ -1,9 +1,12 @@
 import { type HTMLWidget, type ImageWidget } from "~/types/widgets";
 import { Picture, Source } from "~/components/ui/Picture";
 import Section from "../../components/ui/Section";
+import DeviceVisible, {
+  type VisibilityConfig,
+} from "../../components/ui/DeviceVisible";
 import { clx } from "~/sdk/clx";
 
-export interface Props {
+export interface Props extends VisibilityConfig {
   title: string;
   description?: HTMLWidget;
 
@@ -18,9 +21,10 @@ export interface Props {
   };
 }
 
-function Banner({ title, description, images, cta }: Props) {
+function Banner({ title, description, images, cta, visibility }: Props) {
   return (
-    <Section.Container>
+    <DeviceVisible visibility={visibility}>
+      <Section.Container>
       <div className="relative bg-base-200 mx-5 sm:mx-0">
         <Picture>
           <Source
@@ -66,7 +70,8 @@ function Banner({ title, description, images, cta }: Props) {
           </div>
         </div>
       </div>
-    </Section.Container>
+      </Section.Container>
+    </DeviceVisible>
   );
 }
 

src/sections/Product/ProductShelf.tsx

@@ -6,11 +6,16 @@ import Section, {
 } from "../../components/ui/Section";
 import { useOffer } from "@decocms/apps/commerce/sdk/useOffer";
 import { useSendEvent } from "../../sdk/useSendEvent";
+import DeviceVisible, {
+  type VisibilityConfig,
+} from "../../components/ui/DeviceVisible";
 import { type LoadingFallbackProps } from "~/types/deco";
-export interface Props extends SectionHeaderProps {
+export interface Props extends SectionHeaderProps, VisibilityConfig {
   products: Product[] | null;
 }
-export default function ProductShelf({ products, title, cta }: Props) {
+export default function ProductShelf(
+  { products, title, cta, visibility }: Props,
+) {
   if (!products || products.length === 0) {
     return null;
   }
@@ -31,11 +36,13 @@ export default function ProductShelf({ products, title, cta }: Props) {
     },
   });
   return (
-    <Section.Container {...viewItemListEvent}>
-      <Section.Header title={title} cta={cta} />
+    <DeviceVisible visibility={visibility}>
+      <Section.Container {...viewItemListEvent}>
+        <Section.Header title={title} cta={cta} />
 
-      <ProductSlider products={products} itemListName={title} />
-    </Section.Container>
+        <ProductSlider products={products} itemListName={title} />
+      </Section.Container>
+    </DeviceVisible>
   );
 }
 export const LoadingFallback = (