Merge pull request #8 from joaoD3V/feat/FlashOffer-text-editor

Feat/flash offer text editor
joaoD3V · Nov 4, 2023 · 3b23b65 · 3b23b65
2 parents 74537a2 + 941b675
commit 3b23b65
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 19 deletions.
diff --git a/.release.json b/.release.json
diff --git a/islands/Nudge/FlashOffer.tsx b/islands/Nudge/FlashOffer.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "preact/hooks";
 
 import Nudge, { NudgeBaseProps } from "$store/islands/Nudge/Nudge.tsx";
+import NudgeImage from "./NudgeImage.tsx";
 
 export interface Props {
   /**
@@ -9,6 +10,18 @@ export interface Props {
    */
   expiresAt: string;
 
+  /**
+   * @default Algum valor
+   */
+  linkToSpecificOffer?: string;
+
+  textLink?: string;
+
+  /**
+   * @title Product image URL
+   */
+  imageURL?: string;
+
   nudge?: Partial<Omit<NudgeBaseProps, "isFlashOffer">>;
 }
 
@@ -26,6 +39,9 @@ function Countdown({ time }: CountdownProps) {
 
 function FlashOffer({
   expiresAt,
+  linkToSpecificOffer,
+  textLink,
+  imageURL,
   nudge,
 }: Props) {
   const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
@@ -97,26 +113,45 @@ function FlashOffer({
 
   return (
     <Nudge {...nudgeProps}>
-      <div className="flex items-center justify-center gap-1 w-full">
-        {Number(timeLeft.days) > 0 && (
-          <div className="flex flex-col items-center justify-center gap-0.5">
-            <span className="text-xs">D</span>
-            <Countdown time={Number(timeLeft.days)} />
+      <div className="flex flex-col gap-3 justify-center items-center w-full">
+
+        <div className="flex gap-3 items-center">
+          <div className="flex items-center justify-center gap-1 w-full">
+            {Number(timeLeft.days) > 0 && (
+              <div className="flex flex-col items-center justify-center gap-0.5">
+                <span className="text-xs">D</span>
+                <Countdown time={Number(timeLeft.days)} />
+              </div>
+            )}
+            <div className="flex flex-col items-center justify-center gap-0.5">
+              <span className="text-xs">H</span>
+              <Countdown time={Number(timeLeft.hours)} />
+            </div>
+
+            <div className="flex flex-col items-center justify-center gap-0.5">
+              <span className="text-xs">Min.</span>
+              <Countdown time={Number(timeLeft.minutes)} />
+            </div>
+            <div className="flex flex-col items-center justify-center gap-0.5">
+              <span className="text-xs">Seg.</span>
+              <Countdown time={Number(timeLeft.seconds)} />
+            </div>
           </div>
-        )}
-        <div className="flex flex-col items-center justify-center gap-0.5">
-          <span className="text-xs">H</span>
-          <Countdown time={Number(timeLeft.hours)} />
-        </div>
-
-        <div className="flex flex-col items-center justify-center gap-0.5">
-          <span className="text-xs">Min.</span>
-          <Countdown time={Number(timeLeft.minutes)} />
-        </div>
-        <div className="flex flex-col items-center justify-center gap-0.5">
-          <span className="text-xs">Seg.</span>
-          <Countdown time={Number(timeLeft.seconds)} />
+          {imageURL && <NudgeImage imageURL={imageURL} />}
         </div>
+
+
+        {linkToSpecificOffer && (
+            <a
+              href={linkToSpecificOffer}
+              target="_blank"
+              className={`btn w-full btn-sm uppercase text-${[
+                nudgeProps.badge.accentColor,
+              ]}-800 bg-${[nudgeProps.badge.accentColor]}-200`}
+            >
+              {textLink || "COMPRE AGORA"}
+            </a>
+        )}
       </div>
     </Nudge>
   );