claim-your-gift and fixes

Telefonica · Nov 29, 2024 · 3e3d296 · 3e3d296
1 parent 9910f6c
commit 3e3d296
Show file tree

Hide file tree

Showing 27 changed files with 1,203 additions and 259 deletions.
diff --git a/src/App.js b/src/App.js
@@ -20,6 +20,7 @@ import SkinTool from "./pages/skin-tool";
 import ComingSoon from "./pages/advent-calendar-2024/pages/coming-soon";
 import ProgressView from "./pages/advent-calendar-2024/pages/progress-view";
 import ProductStatus from "./pages/mistica-product-status/index";
+import ClaimYourGift from "./pages/advent-calendar-2024/pages/claim-your-gift";
 
 export const SchemeContext = createContext();
 
@@ -81,6 +82,10 @@ const App = () => {
       path: `/advent-calendar-2024/progress-view`,
       element: <ProgressView />,
     },
+    {
+      path: `/advent-calendar-2024/claim-your-gift`,
+      element: <ClaimYourGift />,
+    },
     {
       path: `/skin2json`,
       element: <Skin2Json />,

diff --git a/src/pages/advent-calendar-2024/assets/decorations/decoration-snake.jsx b/src/pages/advent-calendar-2024/assets/decorations/decoration-snake.jsx
@@ -1,24 +1,25 @@
 import { skinVars } from "@telefonica/mistica";
 import Lottie from "lottie-react";
+import { useLayoutEffect, useMemo } from "react";
 
 const DecorationSnake = ({ width = 300, color = skinVars.colors.brand }) => {
-  // Define los estilos CSS dinámicos
-  const styles = `
-    .snake-animation path {
-      fill: ${color};
-      stroke: ${color};
-    }
-  `;
+  useLayoutEffect(() => {
+    const styles = `
+      .snake-animation path {
+        fill: ${color};
+        stroke: ${color};
+      }
+    `;
 
-  // Inserta los estilos en el documento
-  if (typeof document !== "undefined") {
-    const styleTag = document.createElement("style");
-    styleTag.textContent = styles;
-    document.head.appendChild(styleTag);
-  }
+    if (typeof document !== "undefined") {
+      const styleTag = document.createElement("style");
+      styleTag.textContent = styles;
+      document.head.appendChild(styleTag);
+    }
+  }, [color]);
 
-  return (
-    <div style={{ width: width }}>
+  const lottieElement = useMemo(
+    () => (
       <Lottie
         className="snake-animation" // Clase para aplicar estilos
         animationData={{
@@ -201,8 +202,11 @@ const DecorationSnake = ({ width = 300, color = skinVars.colors.brand }) => {
           markers: [],
         }}
       />
-    </div>
+    ),
+    []
   );
+
+  return <div style={{ width: width }}>{lottieElement}</div>;
 };
 
 export default DecorationSnake;
diff --git a/src/pages/advent-calendar-2024/assets/fonts/telefonica_sans_demibold_base64.jsx b/src/pages/advent-calendar-2024/assets/fonts/telefonica_sans_demibold_base64.jsx
diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-02.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-02.jsx
@@ -1,11 +1,10 @@
 import React from "react";
 
-const Illustration02 = ({ disabled = false }) => {
+const Illustration02 = ({ disabled = false, size = "240" }) => {
   if (disabled) {
     return (
       <svg
-        width="240"
-        height="240"
+        width={size}
         viewBox="0 0 240 240"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -74,8 +73,7 @@ const Illustration02 = ({ disabled = false }) => {
 
   return (
     <svg
-      width="240"
-      height="240"
+      width={size}
       viewBox="0 0 240 240"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-03.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-03.jsx
@@ -1,11 +1,10 @@
 import React from "react";
 
-const Illustration03 = ({ disabled = false }) => {
+const Illustration03 = ({ disabled = false, size = "240" }) => {
   if (disabled) {
     return (
       <svg
-        width="240"
-        height="240"
+        width={size}
         viewBox="0 0 240 240"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -58,8 +57,7 @@ const Illustration03 = ({ disabled = false }) => {
 
   return (
     <svg
-      width="240"
-      height="240"
+      width={size}
       viewBox="0 0 240 240"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-04.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-04.jsx
@@ -1,11 +1,10 @@
 import React from "react";
 
-const Illustration04 = ({ disabled = false }) => {
+const Illustration04 = ({ disabled = false, size = "240" }) => {
   if (disabled) {
     return (
       <svg
-        width="240"
-        height="240"
+        width={size}
         viewBox="0 0 240 240"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -30,8 +29,7 @@ const Illustration04 = ({ disabled = false }) => {
 
   return (
     <svg
-      width="240"
-      height="240"
+      width={size}
       viewBox="0 0 240 240"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-05.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-05.jsx
@@ -1,11 +1,10 @@
 import React from "react";
 
-const Illustration05 = ({ disabled = false }) => {
+const Illustration05 = ({ disabled = false, size = "240" }) => {
   if (disabled) {
     return (
       <svg
-        width="240"
-        height="240"
+        width={size}
         viewBox="0 0 240 240"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -68,8 +67,7 @@ const Illustration05 = ({ disabled = false }) => {
 
   return (
     <svg
-      width="240"
-      height="240"
+      width={size}
       viewBox="0 0 240 240"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-06.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-06.jsx
@@ -1,11 +1,10 @@
 import React from "react";
 
-const Illustration06 = ({ disabled = false }) => {
+const Illustration06 = ({ disabled = false, size = "240" }) => {
   if (disabled) {
     return (
       <svg
-        width="240"
-        height="240"
+        width={size}
         viewBox="0 0 240 240"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -38,8 +37,7 @@ const Illustration06 = ({ disabled = false }) => {
 
   return (
     <svg
-      width="240"
-      height="240"
+      width={size}
       viewBox="0 0 240 240"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-09.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-09.jsx
@@ -1,11 +1,10 @@
 import React from "react";
 
-const Illustration09 = ({ disabled = false }) => {
+const Illustration09 = ({ disabled = false, size = "240" }) => {
   if (disabled) {
     return (
       <svg
-        width="240"
-        height="240"
+        width={size}
         viewBox="0 0 240 240"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -23,8 +22,7 @@ const Illustration09 = ({ disabled = false }) => {
 
   return (
     <svg
-      width="240"
-      height="240"
+      width={size}
       viewBox="0 0 240 240"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-10.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-10.jsx
@@ -1,11 +1,10 @@
 import React from "react";
 
-const Illustration10 = ({ disabled = false }) => {
+const Illustration10 = ({ disabled = false, size = "240" }) => {
   if (disabled) {
     return (
       <svg
-        width="240"
-        height="240"
+        width={size}
         viewBox="0 0 240 240"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -48,8 +47,7 @@ const Illustration10 = ({ disabled = false }) => {
 
   return (
     <svg
-      width="240"
-      height="240"
+      width={size}
       viewBox="0 0 240 240"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-11.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-11.jsx
@@ -1,11 +1,10 @@
 import React from "react";
 
-const Illustration11 = ({ disabled = false }) => {
+const Illustration11 = ({ disabled = false, size = "240" }) => {
   if (disabled) {
     return (
       <svg
-        width="240"
-        height="240"
+        width={size}
         viewBox="0 0 240 240"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -37,8 +36,7 @@ const Illustration11 = ({ disabled = false }) => {
 
   return (
     <svg
-      width="240"
-      height="240"
+      width={size}
       viewBox="0 0 240 240"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-12.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-12.jsx
@@ -1,11 +1,10 @@
 import React from "react";
 
-const Illustration12 = ({ disabled = false }) => {
+const Illustration12 = ({ disabled = false, size = "240" }) => {
   if (disabled) {
     return (
       <svg
-        width="240"
-        height="240"
+        width={size}
         viewBox="0 0 240 240"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -26,8 +25,7 @@ const Illustration12 = ({ disabled = false }) => {
 
   return (
     <svg
-      width="240"
-      height="240"
+      width={size}
       viewBox="0 0 240 240"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-13.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-13.jsx
@@ -1,11 +1,10 @@
 import React from "react";
 
-const Illustration13 = ({ disabled = false }) => {
+const Illustration13 = ({ disabled = false, size = "240" }) => {
   if (disabled) {
     return (
       <svg
-        width="240"
-        height="240"
+        width={size}
         viewBox="0 0 240 240"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -54,8 +53,7 @@ const Illustration13 = ({ disabled = false }) => {
 
   return (
     <svg
-      width="240"
-      height="240"
+      width={size}
       viewBox="0 0 240 240"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-16.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-16.jsx
@@ -1,11 +1,10 @@
 import React from "react";
 
-const Illustration16 = ({ disabled = false }) => {
+const Illustration16 = ({ disabled = false, size = "240" }) => {
   if (disabled) {
     return (
       <svg
-        width="240"
-        height="240"
+        width={size}
         viewBox="0 0 240 240"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -42,8 +41,7 @@ const Illustration16 = ({ disabled = false }) => {
 
   return (
     <svg
-      width="240"
-      height="240"
+      width={size}
       viewBox="0 0 240 240"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-17.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-17.jsx
@@ -1,11 +1,10 @@
 import React from "react";
 
-const Illustration17 = ({ disabled = false }) => {
+const Illustration17 = ({ disabled = false, size = "240" }) => {
   if (disabled) {
     return (
       <svg
-        width="240"
-        height="240"
+        width={size}
         viewBox="0 0 240 240"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -62,8 +61,7 @@ const Illustration17 = ({ disabled = false }) => {
 
   return (
     <svg
-      width="240"
-      height="240"
+      width={size}
       viewBox="0 0 240 240"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-18.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-18.jsx
@@ -1,11 +1,10 @@
 import React from "react";
 
-const Illustration18 = ({ disabled = false }) => {
+const Illustration18 = ({ disabled = false, size = "240" }) => {
   if (disabled) {
     return (
       <svg
-        width="240"
-        height="240"
+        width={size}
         viewBox="0 0 240 240"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -56,8 +55,7 @@ const Illustration18 = ({ disabled = false }) => {
 
   return (
     <svg
-      width="240"
-      height="240"
+      width={size}
       viewBox="0 0 240 240"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"