From b3b7ecc77ab090fc817f9f5a27bb5dbadcf45c60 Mon Sep 17 00:00:00 2001
From: Cristian Felipe Cruz Buitron <cristiancruz0529@gmail.com>
Date: Mon, 14 Sep 2026 04:04:09 +0000
Subject: [PATCH] feat(ecommerce): version real del footer via APP_VERSION

El footer mostraba "v4.1" fijo -- inutil para distinguir a simple
vista si Staging y Produccion estan en la misma version. Ahora lee
process.env.APP_VERSION, que el propio CD (.gitea/workflows/build.yaml)
bumpea junto con el tag de la imagen en cada auto-deploy a Staging.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012Y4df3Z7odr9Cg8F2nw6uV
---
 .gitea/workflows/build.yaml                               | 7 +++++++
 .../ecommerce-staging/frontend/patches/deployment.yaml    | 3 +++
 workloads/ecommerce/components/layout/footer.tsx          | 8 +++++++-
 workloads/ecommerce/frontend/patches/deployment.yaml      | 6 ++++++
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/.gitea/workflows/build.yaml b/.gitea/workflows/build.yaml
index 9592416..9fee965 100644
--- a/.gitea/workflows/build.yaml
+++ b/.gitea/workflows/build.yaml
@@ -584,6 +584,13 @@ jobs:
 
           sed -i -E             "s|(image: ${IMAGE_NAME}:).*|\1${VERSION}|g"             "${MANIFEST_FILE}"
 
+          # El footer (workloads/ecommerce/components/layout/footer.tsx) lee
+          # process.env.APP_VERSION para mostrar la versión real desplegada
+          # -- este bump la mantiene igual al tag de la imagen de arriba.
+          # -0777 (slurp): el nombre y el valor están en líneas distintas del
+          # YAML, un sed de una sola línea no puede verlos juntos.
+          perl -0777 -pi -e "s/(- name: APP_VERSION\n\s*value: ).*/\${1}${VERSION}/"             "${MANIFEST_FILE}"
+
           git add "${MANIFEST_FILE}"
 
           if git diff --cached --quiet; then
diff --git a/workloads/ecommerce-staging/frontend/patches/deployment.yaml b/workloads/ecommerce-staging/frontend/patches/deployment.yaml
index 6a75a53..9d3db76 100644
--- a/workloads/ecommerce-staging/frontend/patches/deployment.yaml
+++ b/workloads/ecommerce-staging/frontend/patches/deployment.yaml
@@ -28,6 +28,9 @@ spec:
         - name: app
           image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.262
           env:
+            # Ver comentario en workloads/ecommerce/frontend/patches/deployment.yaml
+            - name: APP_VERSION
+              value: v1.0.262
             - name: HEADLESS_PROVIDER
               value: medusa
             # Backend COMPARTIDO con Producción a propósito (decisión del
diff --git a/workloads/ecommerce/components/layout/footer.tsx b/workloads/ecommerce/components/layout/footer.tsx
index a8e74d2..2f6dbec 100644
--- a/workloads/ecommerce/components/layout/footer.tsx
+++ b/workloads/ecommerce/components/layout/footer.tsx
@@ -1,6 +1,12 @@
 import Link from "next/link";
 import { Facebook, Instagram, MessageCircle } from "lucide-react";
 
+// APP_VERSION la actualiza el propio CI (.gitea/workflows/build.yaml) al
+// mismo tiempo que el tag de la imagen -- antes decia "v4.1" fijo,
+// inutil para distinguir a simple vista si Staging y Produccion estan
+// en la misma version o no.
+const appVersion = process.env.APP_VERSION || "dev";
+
 // Las 4 paginas de "Ayuda" ya tienen contenido real (app/envios,
 // app/cambios, app/preguntas-frecuentes, app/contacto).
 const HELP_LINKS = [
@@ -28,7 +34,7 @@ const SHOP_LINKS = [
 ];
 
 export function Footer() {
-  return <footer className="bg-ari-marino text-white"><div className="mx-auto grid max-w-7xl gap-10 px-4 py-14 sm:grid-cols-2 lg:grid-cols-4"><div><div className="flex flex-col items-start gap-3"><img src="/images/brand/logo-ari.svg" alt="ARI shopping" className="h-11 w-auto" width={200} height={64} />{/* eslint-disable-line @next/next/no-img-element -- vector propio, next/image no optimiza SVG sin habilitar dangerouslyAllowSVG */}<p className="text-xs text-white/60">Tesoros para cada aventura.</p></div><div className="mt-5 flex gap-3">{SOCIAL_LINKS.map(({ label, href, Icon }) => <a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label} className="text-white/80 transition hover:text-ari-coral-claro"><Icon /></a>)}</div></div><FooterColumn title="Compra" links={SHOP_LINKS} /><FooterColumn title="Ayuda" links={HELP_LINKS} /><div><h3 className="font-black">Newsletter</h3><p className="mt-3 text-sm leading-6 text-white/60">Recibe lanzamientos y promociones especiales.</p><div className="mt-4 flex rounded-full bg-white p-1"><input className="min-w-0 flex-1 bg-transparent px-4 text-sm text-slate-950 outline-none" placeholder="Tu correo" /><button className="rounded-full bg-ari-coral px-4 text-sm font-black text-white">Unirme</button></div></div></div><div className="border-t border-white/10 py-5 text-center text-xs text-white/50">© 2026 ARI Shopping · Frontend headless v4.1 · GitOps</div></footer>;
+  return <footer className="bg-ari-marino text-white"><div className="mx-auto grid max-w-7xl gap-10 px-4 py-14 sm:grid-cols-2 lg:grid-cols-4"><div><div className="flex flex-col items-start gap-3"><img src="/images/brand/logo-ari.svg" alt="ARI shopping" className="h-11 w-auto" width={200} height={64} />{/* eslint-disable-line @next/next/no-img-element -- vector propio, next/image no optimiza SVG sin habilitar dangerouslyAllowSVG */}<p className="text-xs text-white/60">Tesoros para cada aventura.</p></div><div className="mt-5 flex gap-3">{SOCIAL_LINKS.map(({ label, href, Icon }) => <a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label} className="text-white/80 transition hover:text-ari-coral-claro"><Icon /></a>)}</div></div><FooterColumn title="Compra" links={SHOP_LINKS} /><FooterColumn title="Ayuda" links={HELP_LINKS} /><div><h3 className="font-black">Newsletter</h3><p className="mt-3 text-sm leading-6 text-white/60">Recibe lanzamientos y promociones especiales.</p><div className="mt-4 flex rounded-full bg-white p-1"><input className="min-w-0 flex-1 bg-transparent px-4 text-sm text-slate-950 outline-none" placeholder="Tu correo" /><button className="rounded-full bg-ari-coral px-4 text-sm font-black text-white">Unirme</button></div></div></div><div className="border-t border-white/10 py-5 text-center text-xs text-white/50">© 2026 ARI Shopping · Frontend headless {appVersion} · GitOps</div></footer>;
 }
 
 function FooterColumn({ title, links }: { title: string; links: { label: string; href: string }[] }) {
diff --git a/workloads/ecommerce/frontend/patches/deployment.yaml b/workloads/ecommerce/frontend/patches/deployment.yaml
index 4c54af3..60b05bb 100644
--- a/workloads/ecommerce/frontend/patches/deployment.yaml
+++ b/workloads/ecommerce/frontend/patches/deployment.yaml
@@ -27,6 +27,12 @@ spec:
         - name: app
           image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.260
           env:
+            # La actualiza el mismo paso del CD (.gitea/workflows/build.yaml)
+            # que bumpea el tag de la imagen -- el footer la lee
+            # (process.env.APP_VERSION) para mostrar la versión real
+            # desplegada en vez de un "v4.1" fijo.
+            - name: APP_VERSION
+              value: v1.0.260
             - name: HEADLESS_PROVIDER
               value: medusa
             - name: MEDUSA_BACKEND_URL