Rozbudowa RWD

2026-01-07 15:09:16 +01:00
parent df964a8088
commit e6a9465195
24 changed files with 728 additions and 311 deletions
--- a/IdoSellAddOn/script.js
+++ b/IdoSellAddOn/script.js
@@ -0,0 +1,178 @@
+function idmObserveEachOnce(elements, callback, options = {}) {
+  const observer = new IntersectionObserver(
+    (entries, obs) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return;
+
+        callback(entry);
+        obs.unobserve(entry.target);
+      });
+    },
+    {
+      threshold: 0.1,
+      ...options,
+    }
+  );
+
+  elements.forEach((el) => observer.observe(el));
+  return observer;
+}
+
+idmObserveEachOnce(
+  document.querySelectorAll(".idm_picture__module"),
+  (entry) => {
+    idmPictureModuleProducts(entry.target);
+  }
+);
+
+function idmGetSingleProdGraphQL(prodId) {
+  const IDM_PRICE_QUERY = (priceType) => `price {
+      rebateCodeActive
+      price {
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+      omnibusPrice {
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+      omnibusPriceDetails {
+        unit {
+          ${priceType} {
+            value
+            formatted
+          }
+        }
+        youSavePercent
+        omnibusPriceIsHigherThanSellingPrice
+        newPriceEffectiveUntil {
+          formatted
+        }
+      }
+      max {
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+      unit {
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+      unitConvertedPrice {
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+      youSavePercent
+      beforeRebate {
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+      beforeRebateDetails {
+        youSavePercent
+        unit {
+          ${priceType} {
+            value
+            formatted
+          }
+        }
+      }
+      advancePrice {
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+      suggested {
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+      rebateNumber {
+        number
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+    }`;
+
+  return `
+    prod${prodId}: product(productId: ${prodId}) {
+        product {
+            id
+            name
+            link
+            ${IDM_PRICE_QUERY(app_shop.vars.priceType)}
+        }
+    }`;
+}
+async function idmPictureModuleProducts(containerEL) {
+  try {
+    const allProdEl = containerEL.querySelectorAll(".product_info[data-id]");
+    const productsId = [];
+    allProdEl.forEach((prodEl) => {
+      if (prodEl.dataset?.id) productsId.push(prodEl.dataset?.id);
+    });
+
+    const res = await fetch("/graphql/v1/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        query: `{${productsId.reduce(
+          (acc, val, index) => acc + `${idmGetSingleProdGraphQL(val)}`,
+          ""
+        )}}`,
+      }),
+    });
+
+    const data = await res.json();
+    const products = Object.values(data?.data)?.map((prod) => prod.product);
+
+    allProdEl.forEach((prodEl) => {
+      const prodData = products.find((p) => p.id === +prodEl.dataset.id);
+      if (!prodData) return;
+
+      prodEl.classList.add("--mod-init");
+      prodEl.innerHTML = `
+        <a class="product_name" href="${prodData.link}">${prodData.name}</a>
+        <span class="product_price">${
+          prodData.price?.price?.[app_shop.vars.priceType]?.formatted
+        }</span>
+      `;
+    });
+
+    containerEL.querySelectorAll(".product_info:not(.--mod-init)");
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+document.body.addEventListener("click", (e) => {
+  if (app_shop.vars.view === 3 || app_shop.vars.view === 4) return;
+  const prodContainerEl = e.target.closest(".idm_picture__product");
+  if (!prodContainerEl) return;
+  if (prodContainerEl.classList.contains("--show"))
+    return prodContainerEl.classList.remove("--show");
+
+  const moduleContainer = prodContainerEl.closest(".idm_picture__module");
+  if (!moduleContainer) return;
+
+  moduleContainer
+    .querySelectorAll(".idm_picture__product.--show")
+    .forEach((prodConEl) => prodConEl.classList.remove("--show"));
+  prodContainerEl.classList.add("--show");
+});
--- a/IdoSellAddOn/style.html
+++ b/IdoSellAddOn/style.html
@@ -0,0 +1,208 @@
+<style>
+.idm_picture__module{
+  --photo-prod-box-bg: #fff;
+  --photo-prod-box-text: #111;
+  --photo-prod-point-shadow: rgba(255,255,255,.5);
+
+  --photo-prod-box-pad-top: 1rem;
+  --photo-prod-box-pad-left: 2rem;
+
+  --photo-prod-box-width: 30rem;
+  --photo-prod-point-size: 24px;
+  
+  --photo-prod-box-radius-br: 0px 20px 20px 20px;
+  --photo-prod-box-radius-bl: 20px 0px 20px 20px;
+  --photo-prod-box-radius-tl: 20px 20px 0px 20px;
+  --photo-prod-box-radius-tr: 20px 20px 20px 0px;
+  
+  
+  --photo-prod-point-desktop-top: 0%;
+  --photo-prod-point-desktop-left: 0%;
+  --photo-prod-point-tablet-top: 0%;
+  --photo-prod-point-tablet-left: 0%;
+  --photo-prod-point-mobile-top: 0%;
+  --photo-prod-point-mobile-left: 0%;
+  
+  
+  --photo-box-offset: 1rem;
+}
+
+.idm_picture__module{
+  position: relative;
+}
+.idm_picture__product{
+  position: absolute;
+  z-index: 10;
+}
+.idm_picture__img{
+  width: 100%;
+}
+.idm_picture__overlay{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+/* =========================
+PRODUCT POINT ( + )
+========================= */
+
+.idm_picture__product_point{
+  position: relative;
+  width: var(--photo-prod-point-size);
+  height: var(--photo-prod-point-size);
+  border-radius: 50%;
+
+  background: var(--photo-prod-box-bg);
+  color: var(--photo-prod-box-text);
+  border: none;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 1.6rem;
+  font-weight: 600;
+  line-height: 1;
+
+  z-index: 1;
+}
+
+/* Pulsating halo */
+.idm_picture__product_point::before{
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: var(--photo-prod-point-shadow);
+
+  animation: idmPulse 1.5s ease-in-out infinite;
+  z-index: -1;
+}
+
+/* Optional: stop pulse on hover */
+.idm_picture__product:hover .idm_picture__product_point:before{
+  animation-play-state: paused;
+}
+
+/* Focus accessibility */
+.idm_picture__product_point:focus-visible{
+  outline: 2px solid #000;
+  outline-offset: 4px;
+}
+
+/* =========================
+PULSE ANIMATION
+========================= */
+@keyframes idmPulse{
+  0%{
+    opacity: 1;
+    box-shadow: 0 0 0px 0px var(--photo-prod-point-shadow);
+  }
+  70%{
+    box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
+    opacity: 0.8;
+  }
+  100%{
+    box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
+    opacity: 0;
+  }
+}
+
+.product_info{
+  background: var(--photo-prod-box-bg);
+  /* display: flex; */
+  flex-direction: column;
+  padding: var(--photo-prod-box-pad-top) var(--photo-prod-box-pad-left);
+  gap: 0.5rem;
+  display: none;
+  max-width: var(--photo-prod-box-width);
+  position: absolute;
+  width: max-content;
+
+  box-shadow: 0px 0px 10px 1px #000;
+}
+.product_info::before{
+  content: "";
+  position: absolute;
+  display: block;
+  width: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
+  height: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
+  z-index: -1;
+}
+
+
+.product_info{
+  bottom: var(--photo-prod-box-dir-t, auto);
+  top: var(--photo-prod-box-dir-b, auto);
+  right: var(--photo-prod-box-dir-l, auto);
+  left: var(--photo-prod-box-dir-r, auto);
+  
+  border-radius: var(--photo-prod-box-radius);
+}
+.product_info::before{
+  top: var(--photo-prod-box-dir-t-before, auto);
+  bottom: var(--photo-prod-box-dir-b-before, auto);
+  right: var(--photo-prod-box-dir-r-before, auto);
+  left: var(--photo-prod-box-dir-l-before, auto);
+}
+
+.idm_picture__product .product_info .product_name{
+  font-size: 1.6rem;
+  color: var(--photo-prod-box-text);
+}
+.idm_picture__product .product_info .product_name:hover{
+  color: var(--primary-color, #000)!important;
+}
+
+.idm_picture__product .product_info .product_price{
+  font-size: 1.6rem;
+  color: var(--photo-prod-box-text);
+}
+
+@media(min-width: 979px){
+  .idm_picture__product:hover .product_info{
+    display: flex;
+    animation: idmShowUp 0.3s ease-in-out;
+    /* opacity: 1; */
+  }
+}
+@media(max-width: 978px){
+ .idm_picture__product.--show .product_info{
+    display: flex;
+    animation: idmShowUp 0.3s ease-in-out;
+    /* opacity: 1; */
+  }
+}
+
+@keyframes idmShowUp{
+  from{
+    opacity: 0;
+  }
+  to{
+    opacity: 1;
+  }
+}
+
+
+.idm_picture__product{
+  top: var(--photo-prod-point-mobile-top);
+  left: var(--photo-prod-point-mobile-left);
+  display: var(--photo-prod-point-mobile-display, block);
+}
+@media(min-width: 757px){
+  .idm_picture__product{
+    top: var(--photo-prod-point-tablet-top);
+    left: var(--photo-prod-point-tablet-left);
+    display: var(--photo-prod-point-tablet-display, block);
+  }
+}
+@media(min-width: 979px){
+  .idm_picture__product{
+    top: var(--photo-prod-point-desktop-top);
+    left: var(--photo-prod-point-desktop-left);
+    display: var(--photo-prod-point-desktop-display, block);
+  }
+}
+</style>
--- a/README.md
+++ b/README.md
@@ -35,3 +35,7 @@ xd przez shadow roota stylowanie komponentów z MUI nie działa w preview
 poprawić rerenderowanie szczególnie inputow

 problem rem em w shadow root
+
+
+
+Zmiana szerokości kod|preview
--- a/public/kotek-2.jpg
+++ b/public/kotek-2.jpg
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,9 @@
 import { Route, Routes } from "react-router-dom";
 import Home from "./pages/Home";
-import "./styles/index.css";
 import AppLayout from "./ui/AppLayout";
 import Instruction from "./pages/Instruction";
 import { Toaster } from "react-hot-toast";
+import { Alert } from "@mui/material";

 function App() {
  return (
--- a/src/constants/photo.js
+++ b/src/constants/photo.js
@@ -1,7 +1,4 @@
-import { BREAKPOINTS } from "./rwd";
-
 // Constants for PhotoModule
-
 // top-left, top-right, bottom-left, bottom-right
 export const DIRECTIONS = {
  "t-l": "Góra Lewo",
@@ -15,11 +12,11 @@ export const DEFAULT_POINT = {
  y: 0,

  positions: {
-    single: { x: 0, y: 0 },
+    single: { x: 0, y: 0, hide: false, direction: Object.keys(DIRECTIONS)[0] },
    // ...Object.BREAKPOINTS
-    desktop: { x: 0, y: 0 },
-    tablet: { x: 0, y: 0 },
-    mobile: { x: 0, y: 0 },
+    desktop: { x: 0, y: 0, hide: false, direction: Object.keys(DIRECTIONS)[0] },
+    tablet: { x: 0, y: 0, hide: false, direction: Object.keys(DIRECTIONS)[0] },
+    mobile: { x: 0, y: 0, hide: false, direction: Object.keys(DIRECTIONS)[0] },
  },

  id: 0,
--- a/src/features/htmlBuilder/components/CodeBox.jsx
+++ b/src/features/htmlBuilder/components/CodeBox.jsx
@@ -15,10 +15,10 @@ export default function CodeBox() {
    if (hiddenRef.current) {
      setCode(hiddenRef.current.innerHTML);
    }
-  }, [state.urls, state.urlRadioPoint, state.points, state.photoAlt]); // reactive slices
+  }, [state.urls, state.points, state.photoAlt, state.previewMode]); // reactive slices

  const copyCode = () => {
-    navigator.clipboard.writeText("code");
+    navigator.clipboard.writeText(code);
    toast.success("Skopiowano tekst!");
  };

@@ -31,13 +31,7 @@ export default function CodeBox() {
    <GenericBox variant="outer" title="Twój Kod" canCollapse={false}>
      {/* Hidden live component */}
      <div style={{ display: "none" }} ref={hiddenRef}>
-        <GeneratePreview
-          preview={false}
-          urls={state.urls}
-          urlRadioPoint={state.urlRadioPoint}
-          points={state.points}
-          photoAlt={state.photoAlt}
-        />
+        <GeneratePreview preview={false} />
      </div>

      <div style={{ display: "flex", gap: "1rem" }}>
@@ -47,7 +41,7 @@ export default function CodeBox() {
        <Button variant="contained" onClick={clearCode}>
          Wyczyść
        </Button>
-        <Button variant="contained">Wczytaj kod</Button>
+        {/* <Button variant="contained">Wczytaj kod</Button> */}
      </div>

      {/* Textarea showing the HTML */}
--- a/src/features/htmlBuilder/components/PreviewRWDTabs.jsx
+++ b/src/features/htmlBuilder/components/PreviewRWDTabs.jsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { Button } from "@mui/material";
+import { Button, Tab, Tabs } from "@mui/material";
 import { BREAKPOINTS } from "../../../constants/rwd";
 import { useSharedState } from "../../../store/useSharedState";
 import { capitalizeFirstLetter } from "../../../utils/capitalizeFirstLetter";
@@ -15,21 +15,43 @@ function PreviewRWDTabs() {
  const currentPreviewMode = useSharedState((state) => state.previewMode);
  const setPreviewMode = useSharedState((state) => state.setPreviewMode);

+  if (currentPreviewMode === "single") return null;
+
  return (
-    <StyledPreviewTabsContainer>
-      {currentPreviewMode === "single"
-        ? null
-        : Object.keys(BREAKPOINTS).map((key) => (
-            <Button
-              key={key}
-              variant="contained"
-              disabled={currentPreviewMode === key}
-              onClick={() => setPreviewMode(key)}
+    // <StyledPreviewTabsContainer>
+    //   {currentPreviewMode === "single"
+    //     ? null
+    //     : Object.keys(BREAKPOINTS).map((key) => (
+    //         <Button
+    //           key={key}
+    //           variant="contained"
+    //           disabled={currentPreviewMode === key}
+    //           onClick={() => setPreviewMode(key)}
+    //         >
+    //           {capitalizeFirstLetter(key)}
+    //         </Button>
+    //       ))}
+    // </StyledPreviewTabsContainer>
+    <Tabs
+      value={currentPreviewMode}
+      onChange={(_, newVal) => setPreviewMode(newVal)}
+      variant="fullWidth"
+      sx={(theme) => ({
+        backgroundColor: theme.palette.background.header,
+        // borderRadius: "16px 16px 0 0",
+      })}
    >
-              {capitalizeFirstLetter(key)}
-            </Button>
+      {Object.keys(BREAKPOINTS).map((key) => (
+        <Tab
+          key={key}
+          value={key}
+          label={capitalizeFirstLetter(key)}
+          sx={{
+            color: (theme) => theme.palette.secondary.light, // inactive color
+          }}
+        />
      ))}
-    </StyledPreviewTabsContainer>
+    </Tabs>
  );
 }

--- a/src/features/htmlBuilder/generated/GeneratePreview.jsx
+++ b/src/features/htmlBuilder/generated/GeneratePreview.jsx
@@ -5,13 +5,14 @@ import GeneratePreviewPoints from "./GeneratePreviewPoints";
 function GeneratePreview({ preview = true }) {
  const previewMode = useSharedState((state) => state.previewMode); //
  const urls = useSharedState((state) => state.urls);
+  const uniqueId = Math.ceil(Math.random() * 100000 + 1);

  if (preview && urls[previewMode] === "") return null;

  return (
-    <div className="idm_picture__module">
+    <div className="idm_picture__module" id={`idm-picture-module-${uniqueId}`}>
      {<GeneratePreviewImage preview={preview} urls={urls} />}
-      {<GeneratePreviewPoints preview={preview} />}
+      {<GeneratePreviewPoints preview={preview} uniqueId={uniqueId} />}
    </div>
  );
 }
--- a/src/features/htmlBuilder/generated/GeneratePreviewImage.jsx
+++ b/src/features/htmlBuilder/generated/GeneratePreviewImage.jsx
@@ -3,16 +3,15 @@ import { useSharedState } from "../../../store/useSharedState";
 function GeneratePreviewImage({ preview, urls }) {
  const imagePrefix =
    import.meta.env.MODE === "development"
-      ? import.meta.env.VITE_PUBLIC_URL
+      ? `${import.meta.env.VITE_PUBLIC_URL}/`
      : "";
  const previewMode = useSharedState((state) => state.previewMode);
-  const urlRadioPoint = useSharedState((state) => state.urlRadioPoint);
  const photoAlt = useSharedState((state) => state.photoAlt);

  if (preview)
    return (
      <img
-        src={`${imagePrefix}/${urls[previewMode]}`}
+        src={`${imagePrefix}${urls[previewMode]}`}
        alt={photoAlt || ""}
        className="idm_picture__img"
        loading="lazy"
@@ -21,18 +20,18 @@ function GeneratePreviewImage({ preview, urls }) {

  return (
    <>
-      {urlRadioPoint === "rwd" ? (
+      {previewMode !== "single" ? (
        <picture>
          <source
-            srcSet={`${imagePrefix}/${urls.desktop}`}
+            srcSet={`${imagePrefix}${urls.desktop}`}
            media="(min-width: 979px)"
          />
          <source
-            srcSet={`${imagePrefix}/${urls.tablet}`}
+            srcSet={`${imagePrefix}${urls.tablet}`}
            media="(min-width: 757px)"
          />
          <img
-            src={`${imagePrefix}/${urls.mobile}`}
+            src={`${imagePrefix}${urls.mobile}`}
            alt={photoAlt || ""}
            className="idm_picture__img"
            loading="lazy"
@@ -40,7 +39,7 @@ function GeneratePreviewImage({ preview, urls }) {
        </picture>
      ) : (
        <img
-          src={`${imagePrefix}/${urls.single}`}
+          src={`${imagePrefix}${urls.single}`}
          alt={photoAlt || ""}
          className="idm_picture__img"
          loading="lazy"
--- a/src/features/htmlBuilder/generated/GeneratePreviewPoints.jsx
+++ b/src/features/htmlBuilder/generated/GeneratePreviewPoints.jsx
@@ -2,7 +2,7 @@ import { useRef } from "react";
 import { useSharedState } from "../../../store/useSharedState";
 import GeneratePreviewSinglePoint from "./GeneratePreviewSinglePoint";

-function GeneratePreviewPoints({ preview }) {
+function GeneratePreviewPoints({ preview, uniqueId }) {
  const pointsLength = useSharedState((state) => state.points.length);
  const containerRef = useRef();

@@ -14,6 +14,7 @@ function GeneratePreviewPoints({ preview }) {
          index={index}
          preview={preview}
          containerRef={containerRef}
+          uniqueId={uniqueId}
        />
      ))}
    </div>
--- a/src/features/htmlBuilder/generated/GeneratePreviewSinglePoint.jsx
+++ b/src/features/htmlBuilder/generated/GeneratePreviewSinglePoint.jsx
@@ -1,49 +1,45 @@
+import { BREAKPOINTS } from "../../../constants/rwd";
+import { useDragMove } from "../../../hooks/useDragMove";
+import { usePrepareRWDStyle } from "../../../hooks/usePrepareRWDStyle";
 import { useSharedState } from "../../../store/useSharedState";
 // Problemy - unikalne id elementu pod SEO
-//

-function GeneratePreviewSinglePoint({ index, preview, containerRef }) {
-  const { positions, id, direction } = useSharedState(
-    (state) => state.points[index]
-  );
+function GeneratePreviewSinglePoint({
+  index,
+  preview,
+  containerRef,
+  uniqueId,
+}) {
+  const { positions, id } = useSharedState((state) => state.points[index]);
  const previewMode = useSharedState((state) => state.previewMode);

  const setSinglePointPosition = useSharedState(
    (state) => state.setSinglePointPosition
  ); // you need a setter in your store

-  const [directionY, directionX] = direction.split("-");
+  const onPointerDown = useDragMove({
+    ref: containerRef,
+    x: positions[previewMode].x,
+    y: positions[previewMode].y,
+    changeXFn: (newX) => setSinglePointPosition(index, previewMode, "x", newX),
+    changeYFn: (newY) => setSinglePointPosition(index, previewMode, "y", newY),
+  });

-  const onPointerDown = (e) => {
-    e.preventDefault();
-    const container = containerRef.current;
-    if (!container) return;
+  const prodBoxUniqueId = `prod-id-${id}-${uniqueId}`;

-    const rect = container.getBoundingClientRect();
-    const startX = e.clientX;
-    const startY = e.clientY;
-    const initialX = positions[previewMode].x;
-    const initialY = positions[previewMode].y;
+  const generatePointStyles = (mode) => {
+    const [dirY, dirX] = positions[mode].direction.split("-");
+    return `#${prodBoxUniqueId}{
+                --photo-prod-box-dir-${dirY}: calc(100% + var(--photo-box-offset));
+                --photo-prod-box-dir-${dirX}: calc(100% + var(--photo-box-offset));
  
-    const onPointerMove = (moveEvent) => {
-      const deltaX = ((moveEvent.clientX - startX) / rect.width) * 100;
-      const deltaY = ((moveEvent.clientY - startY) / rect.height) * 100;
+                --photo-prod-box-dir-${dirY}-before: 0;
+                --photo-prod-box-dir-${dirX}-before: 0;
  
-      // clamp between 0% and 100%
-      const newX = Math.min(100, Math.max(0, initialX + deltaX));
-      const newY = Math.min(100, Math.max(0, initialY + deltaY));
-
-      setSinglePointPosition(index, previewMode, "x", newX);
-      setSinglePointPosition(index, previewMode, "y", newY);
-    };
-
-    const onPointerUp = () => {
-      window.removeEventListener("pointermove", onPointerMove);
-      window.removeEventListener("pointerup", onPointerUp);
-    };
-
-    window.addEventListener("pointermove", onPointerMove);
-    window.addEventListener("pointerup", onPointerUp);
+                --photo-prod-box-radius: var(--photo-prod-box-radius-${
+                  dirY + dirX
+                });
+              }`;
  };

  if (preview)
@@ -51,35 +47,27 @@ function GeneratePreviewSinglePoint({ index, preview, containerRef }) {
      <div
        className="idm_picture__product"
        style={{
-          top: `${positions[previewMode].x}%`,
-          left: `${positions[previewMode].y}%`,
+          top: `${positions[previewMode].y}%`,
+          left: `${positions[previewMode].x}%`,
+          display: positions[previewMode].hide ? "none" : "block",
        }}
      >
        <button
          className="idm_picture__product_point"
-          //   aria-describedby="prod_id_199974"
+          aria-describedby={prodBoxUniqueId}
          aria-label="Product Info"
          tabIndex="-1"
          onPointerDown={onPointerDown}
        >
          +
        </button>
-        <div
-          className="product_info"
-          //   id="prod_id_199974"
-          data-id={id}
-          data-direction-x={directionX}
-          data-direction-y={directionY}
-        >
-          {preview && (
-            <>
+        <div className="product_info" id={prodBoxUniqueId} data-id={id}>
          <a className="product_name" href="#">
            Produkt {index + 1}
          </a>
          <span className="product_price">XX,XX zł</span>
-            </>
-          )}
        </div>
+        <style>{generatePointStyles(previewMode)}</style>
      </div>
    );

@@ -88,42 +76,37 @@ function GeneratePreviewSinglePoint({ index, preview, containerRef }) {
      className="idm_picture__product"
      style={
        previewMode === "single"
-          ? { top: positions.single.y, left: positions.single.y }
-          : {
-              "--photo-prod-point-desktop-top": `${positions.desktop.y}%`,
-              "--photo-prod-point-desktop-left": `${positions.desktop.x}%`,
-              "--photo-prod-point-tablet-top": `${positions.tablet.y}%`,
-              "--photo-prod-point-tablet-left": `${positions.tablet.x}%`,
-              "--photo-prod-point-mobile-top": `${positions.mobile.y}%`,
-              "--photo-prod-point-mobile-left": `${positions.mobile.x}%`,
-            }
+          ? { top: `${positions.single.y}%`, left: `${positions.single.x}%` }
+          : Object.keys(BREAKPOINTS).reduce((acc, key) => {
+              acc[`--photo-prod-point-${key}-top`] = `${positions[key].y}%`;
+              acc[`--photo-prod-point-${key}-left`] = `${positions[key].x}%`;
+              acc[`--photo-prod-point-${key}-display`] = positions[key].hide
+                ? "none"
+                : "block";
+              return acc;
+            }, {})
      }
    >
      <button
        className="idm_picture__product_point"
-        //   aria-describedby="prod_id_199974"
+        aria-describedby={prodBoxUniqueId}
        aria-label="Product Info"
        tabIndex="-1"
-        onPointerDown={onPointerDown}
      >
        +
      </button>
-      <div
-        className="product_info"
-        //   id="prod_id_199974"
-        data-id={id}
-        data-direction-x={directionX}
-        data-direction-y={directionY}
-      >
-        {preview && (
-          <>
-            <a className="product_name" href="#">
-              Produkt {index + 1}
-            </a>
-            <span className="product_price">XX,XX zł</span>
-          </>
+      <div className="product_info" id={prodBoxUniqueId} data-id={id}></div>
+      <style>
+        {previewMode === "single" ? (
+          <style>{generatePointStyles("single")}</style>
+        ) : (
+          usePrepareRWDStyle({
+            desktopStyle: generatePointStyles("desktop"),
+            mobileStyle: generatePointStyles("mobile"),
+            tabletStyle: generatePointStyles("tablet"),
+          })
        )}
-      </div>
+      </style>
    </div>
  );
 }
--- a/src/features/htmlBuilder/generated/GenerateStyle.jsx
+++ b/src/features/htmlBuilder/generated/GenerateStyle.jsx
@@ -13,7 +13,6 @@ function GenerateStyle() {
  --photo-prod-box-width: 30em;
  --photo-prod-point-size: 24px;
  
-  --photo-prod-box-radius: 20px;
  --photo-prod-box-radius-br: 0px 20px 20px 20px;
  --photo-prod-box-radius-bl: 20px 0px 20px 20px;
  --photo-prod-box-radius-tl: 20px 20px 0px 20px;
@@ -29,11 +28,6 @@ function GenerateStyle() {
  
  
  --photo-box-offset: 1em;
-  // --photo-box-offset-t: calc(-1 * var(--photo-box-offset));
-  // --photo-box-offset-b: calc(var(--photo-prod-point-size) + var(--photo-box-offset));
-  
-  // --photo-box-offset-l: calc(var(--photo-prod-point-size) + var(--photo-box-offset));
-  // --photo-box-offset-r: calc(-1 * var(--photo-box-offset));
 }

 .idm_picture__module{
@@ -129,6 +123,8 @@ PULSE ANIMATION
  max-width: var(--photo-prod-box-width);
  position: absolute;
  width: max-content;
+
+  box-shadow: 0px 0px 10px 1px #000;
 }
 .product_info::before{
  content: "";
@@ -136,62 +132,52 @@ PULSE ANIMATION
  display: block;
  width: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
  height: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
-}
-.product_info[data-direction-y="t"]{
-  bottom: calc(100% + var(--photo-box-offset));
-}
-.product_info[data-direction-y="b"]{
-  top: calc(100% + var(--photo-box-offset));
-}
-.product_info[data-direction-x="l"]{
-  right: calc(100% + var(--photo-box-offset));
-}
-.product_info[data-direction-x="r"]{
-  left: calc(100% + var(--photo-box-offset));
+  z-index: -1;
 }


-.product_info[data-direction-y="t"]::before{
-  top: 0;
+.product_info{
+  bottom: var(--photo-prod-box-dir-t, auto);
+  top: var(--photo-prod-box-dir-b, auto);
+  right: var(--photo-prod-box-dir-l, auto);
+  left: var(--photo-prod-box-dir-r, auto);
+  
+  border-radius: var(--photo-prod-box-radius);
 }
-.product_info[data-direction-y="b"]::before{
-  bottom: 0;
-}
-.product_info[data-direction-x="l"]::before{
-  left: 0;
-}
-.product_info[data-direction-x="r"]::before{
-  right: 0;
+.product_info::before{
+  top: var(--photo-prod-box-dir-t-before, auto);
+  bottom: var(--photo-prod-box-dir-b-before, auto);
+  right: var(--photo-prod-box-dir-r-before, auto);
+  left: var(--photo-prod-box-dir-l-before, auto);
 }

-.product_info[data-direction-y="t"][data-direction-x="l"]{
-  border-radius: var(--photo-prod-box-radius-tl);
+.idm_picture__product .product_info .product_name{
+  font-size: 1.6em;
+  color: var(--photo-prod-box-text);
 }
-.product_info[data-direction-y="t"][data-direction-x="r"]{
-  border-radius: var(--photo-prod-box-radius-tr);
-}
-.product_info[data-direction-y="b"][data-direction-x="l"]{
-  border-radius: var(--photo-prod-box-radius-bl);
-}
-.product_info[data-direction-y="b"][data-direction-x="r"]{
-  border-radius: var(--photo-prod-box-radius-br);
+.idm_picture__product .product_info .product_name:hover{
+  color: var(--primary-color, #000)!important;
 }

-.product_name{
-  font-size: 1.6em;
-  color: var(--photo-prod-box-text);
-}
-
-.product_price{
+.idm_picture__product .product_info .product_price{
  font-size: 1.6em;
  color: var(--photo-prod-box-text);
 }

+@media(min-width: 979px){
  .idm_picture__product:hover .product_info{
    display: flex;
    animation: idmShowUp 0.3s ease-in-out;
    /* opacity: 1; */
  }
+}
+@media(max-width: 978px){
+ .idm_picture__product.--show .product_info{
+    display: flex;
+    animation: idmShowUp 0.3s ease-in-out;
+    /* opacity: 1; */
+  }
+}

@keyframes idmShowUp{
  from{
@@ -206,23 +192,24 @@ PULSE ANIMATION
 .idm_picture__product{
  top: var(--photo-prod-point-mobile-top);
  left: var(--photo-prod-point-mobile-left);
+  display: var(--photo-prod-point-mobile-display, block);
 }
@media(min-width: 757px){
  .idm_picture__product{
    top: var(--photo-prod-point-tablet-top);
    left: var(--photo-prod-point-tablet-left);
+    display: var(--photo-prod-point-tablet-display, block);
  }
 }
@media(min-width: 979px){
  .idm_picture__product{
    top: var(--photo-prod-point-desktop-top);
    left: var(--photo-prod-point-desktop-left);
+    display: var(--photo-prod-point-desktop-display, block);
  }
 }


-
-
 .idm_picture__product_point{
        cursor: grab;
 }
--- a/src/features/htmlBuilder/generated/useRecoverCode.js
+++ b/src/features/htmlBuilder/generated/useRecoverCode.js
@@ -1,5 +0,0 @@
-import { useSharedState } from "../../../store/useSharedState";
-
-export default function useRecoverCode(code) {
-  const state = useSharedState();
-}
--- a/src/features/photoModule/PhotoPointCheckbox.jsx
+++ b/src/features/photoModule/PhotoPointCheckbox.jsx
@@ -0,0 +1,29 @@
+import { Checkbox, FormControl, FormControlLabel } from "@mui/material";
+import { useSharedState } from "../../store/useSharedState";
+
+function PhotoPointCheckbox({ index }) {
+  const setSinglePointPosition = useSharedState(
+    (state) => state.setSinglePointPosition
+  );
+  const previewMode = useSharedState((state) => state.previewMode);
+  const hide = useSharedState(
+    (state) => state.points[index].positions[previewMode].hide
+  );
+
+  if (previewMode === "single") return null;
+
+  const handleChange = () => {
+    setSinglePointPosition(index, previewMode, "hide", !hide);
+  };
+
+  return (
+    <FormControl>
+      <FormControlLabel
+        control={<Checkbox onChange={handleChange} checked={hide} />}
+        label="Schowaj punkt dla tego widoku"
+      />
+    </FormControl>
+  );
+}
+
+export default PhotoPointCheckbox;
--- a/src/features/photoModule/PhotoPointDirection.jsx
+++ b/src/features/photoModule/PhotoPointDirection.jsx
@@ -0,0 +1,35 @@
+import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
+import { DIRECTIONS } from "../../constants/photo";
+import { useSharedState } from "../../store/useSharedState";
+
+export default function PhotoPointDirection({ index }) {
+  const setSinglePointPosition = useSharedState(
+    (state) => state.setSinglePointPosition
+  );
+  const previewMode = useSharedState((state) => state.previewMode);
+  const direction = useSharedState(
+    (state) => state.points[index].positions[previewMode].direction
+  );
+
+  const handleChange = (value) => {
+    setSinglePointPosition(index, previewMode, "direction", value);
+  };
+
+  return (
+    <FormControl fullWidth variant="outlined">
+      <InputLabel id="direction-label">Kierunek</InputLabel>
+      <Select
+        labelId="direction-label"
+        value={direction}
+        label="Kierunek"
+        onChange={(e) => handleChange(e.target.value)}
+      >
+        {Object.keys(DIRECTIONS).map((dir) => (
+          <MenuItem key={dir} value={dir}>
+            {DIRECTIONS[dir]}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}
--- a/src/features/photoModule/PhotoPointPosition.jsx
+++ b/src/features/photoModule/PhotoPointPosition.jsx
@@ -1,5 +1,4 @@
 import styled from "@emotion/styled";
-import { BREAKPOINTS } from "../../constants/rwd";
 import { useSharedState } from "../../store/useSharedState";
 import InputField from "../../ui/InputField";
 import { capitalizeFirstLetter } from "../../utils/capitalizeFirstLetter";
@@ -15,8 +14,14 @@ function PhotoPointPosition({ index }) {
  const setSinglePointPosition = useSharedState(
    (state) => state.setSinglePointPosition
  );
-  const urlRadioPoint = useSharedState((state) => state.urlRadioPoint);
-  const positions = useSharedState((state) => state.points[index].positions);
+  const previewMode = useSharedState((state) => state.previewMode);
+
+  const posX = useSharedState(
+    (state) => state.points[index].positions[previewMode].x
+  );
+  const posY = useSharedState(
+    (state) => state.points[index].positions[previewMode].y
+  );

  const handleChangeNumber = ({
    e,
@@ -35,18 +40,22 @@ function PhotoPointPosition({ index }) {

  return (
    <div style={{ display: "flex", gap: "1.5rem", flexDirection: "column" }}>
-      {urlRadioPoint === "single" ? (
      <StyledPointsContainer>
-          <span>Położenie:</span>
+        <span>
+          {previewMode === "single"
+            ? "Położenie"
+            : capitalizeFirstLetter(previewMode)}
+          :
+        </span>
        <InputField
          id={`point-${index}-x`}
          type="number"
          name="lewo-prawo"
-            value={positions.single.x}
+          value={posX}
          onChange={(e) =>
            handleChangeNumber({
              e,
-                brName: "single",
+              brName: previewMode,
              positionName: "x",
              min: 0,
              max: 100,
@@ -57,11 +66,11 @@ function PhotoPointPosition({ index }) {
          id={`point-${index}-y`}
          type="number"
          name="góra-dół"
-            value={positions.single.y}
+          value={posY}
          onChange={(e) =>
            handleChangeNumber({
              e,
-                brName: "single",
+              brName: previewMode,
              positionName: "y",
              min: 0,
              max: 100,
@@ -69,45 +78,6 @@ function PhotoPointPosition({ index }) {
          }
        />
      </StyledPointsContainer>
-      ) : (
-        <>
-          {Object.keys(BREAKPOINTS).map((brPoint) => (
-            <StyledPointsContainer key={brPoint}>
-              <span>{capitalizeFirstLetter(brPoint)}:</span>
-              <InputField
-                id={`point-${index}-x`}
-                type="number"
-                name="lewo-prawo"
-                value={positions[brPoint].x}
-                onChange={(e) =>
-                  handleChangeNumber({
-                    e,
-                    brName: brPoint,
-                    positionName: "x",
-                    min: 0,
-                    max: 100,
-                  })
-                }
-              />
-              <InputField
-                id={`point-${index}-y`}
-                type="number"
-                name="góra-dół"
-                value={positions[brPoint].y}
-                onChange={(e) =>
-                  handleChangeNumber({
-                    e,
-                    brName: brPoint,
-                    positionName: "y",
-                    min: 0,
-                    max: 100,
-                  })
-                }
-              />
-            </StyledPointsContainer>
-          ))}
-        </>
-      )}
    </div>
  );
 }
--- a/src/features/photoModule/PhotoSinglePoint.jsx
+++ b/src/features/photoModule/PhotoSinglePoint.jsx
@@ -1,14 +1,13 @@
-import { MenuItem, Select, FormControl, InputLabel } from "@mui/material";
 import InputField from "../../ui/InputField";
-import { DIRECTIONS } from "./../../constants/photo";
 import GenericBox from "../../ui/GenericBox";
 import { useSharedState } from "../../store/useSharedState";
 import PhotoPointPosition from "./PhotoPointPosition";
+import PhotoPointCheckbox from "./PhotoPointCheckbox";
+import PhotoPointDirection from "./PhotoPointDirection";

 function PhotoSinglePoint({ index }) {
  const setSinglePoint = useSharedState((state) => state.setSinglePoint);
  const removeSinglePoint = useSharedState((state) => state.removeSinglePoint);
-  const direction = useSharedState((state) => state.points[index].direction);
  const id = useSharedState((state) => state.points[index].id);

  return (
@@ -25,21 +24,8 @@ function PhotoSinglePoint({ index }) {
        onChange={(e) => setSinglePoint(index, { id: e.target.value })}
      />
      <PhotoPointPosition index={index} />
-      <FormControl fullWidth variant="outlined">
-        <InputLabel id="direction-label">Kierunek</InputLabel>
-        <Select
-          labelId="direction-label"
-          value={direction}
-          label="Kierunek"
-          onChange={(e) => setSinglePoint(index, { direction: e.target.value })}
-        >
-          {Object.keys(DIRECTIONS).map((dir) => (
-            <MenuItem key={dir} value={dir}>
-              {DIRECTIONS[dir]}
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
+      <PhotoPointDirection index={index} />
+      <PhotoPointCheckbox index={index} />
    </GenericBox>
  );
 }
--- a/src/features/photoModule/PhotoUrl.jsx
+++ b/src/features/photoModule/PhotoUrl.jsx
@@ -4,24 +4,22 @@ import GenericBox from "../../ui/GenericBox";
 import GenericRadioGroup from "../../ui/GenericRadioGroup";
 import InputField from "../../ui/InputField";
 import { URL_RADIO_DATA } from "./../../constants/photo";
+import { useState } from "react";

 function PhotoUrl() {
-  const urlRadioPoint = useSharedState((state) => state.urlRadioPoint);
-  const setUrlRadioPoint = useSharedState((state) => state.setUrlRadioPoint);
+  const previewMode = useSharedState((state) => state.previewMode);
+  const setPreviewMode = useSharedState((state) => state.setPreviewMode);

-  const urlSingle = useSharedState((state) => state.urls.single);
-  const urlDesktop = useSharedState((state) => state.urls.desktop);
-  const urlTablet = useSharedState((state) => state.urls.tablet);
-  const urlMobile = useSharedState((state) => state.urls.mobile);
+  const [urlPoint, setUrlPoint] = useState("single");
+
+  const url = useSharedState((state) => state.urls[previewMode]);
  const setUrl = useSharedState((state) => state.setUrl);

  const photoAlt = useSharedState((state) => state.photoAlt);
  const setPhotoAlt = useSharedState((state) => state.setPhotoAlt);

-  const setPreviewMode = useSharedState((state) => state.setPreviewMode);
-
  const handleUrlRadioChange = (event) => {
-    setUrlRadioPoint(event.target.value);
+    setUrlPoint(event.target.value);
    setPreviewMode(event.target.value === "rwd" ? "desktop" : "single");
  };
  const handleChangeURL = ({ event, type }) => {
@@ -33,35 +31,17 @@ function PhotoUrl() {
    <GenericBox variant="inner" title="Zdjęcie">
      <GenericRadioGroup
        radioData={URL_RADIO_DATA}
-        value={urlRadioPoint}
+        value={urlPoint}
        onChange={handleUrlRadioChange}
        direction="row"
      />
-      {urlRadioPoint === "rwd" ? (
-        <>
      <InputField
-            name="URL zdjęcia desktop"
-            onChange={(e) => handleChangeURL({ event: e, type: "desktop" })}
-            value={urlDesktop}
+        name={`URL zdjęcia ${
+          previewMode === "single" ? "" : `na ${previewMode}`
+        }`}
+        onChange={(e) => handleChangeURL({ event: e, type: previewMode })}
+        value={url}
      />
-          <InputField
-            name="URL zdjęcia tablet"
-            onChange={(e) => handleChangeURL({ event: e, type: "tablet" })}
-            value={urlTablet}
-          />
-          <InputField
-            name="URL zdjęcia mobile"
-            onChange={(e) => handleChangeURL({ event: e, type: "mobile" })}
-            value={urlMobile}
-          />
-        </>
-      ) : (
-        <InputField
-          name="URL zdjęcia"
-          onChange={(e) => handleChangeURL({ event: e, type: "single" })}
-          value={urlSingle}
-        />
-      )}
      <Divider />
      <InputField
        name="Alt zdjęcia"
--- a/src/hooks/useDragMove.js
+++ b/src/hooks/useDragMove.js
@@ -0,0 +1,34 @@
+// onPointerDown
+export function useDragMove({ ref, x, y, changeXFn, changeYFn }) {
+  return function (e) {
+    e.preventDefault();
+    const container = ref.current;
+    if (!container) return;
+
+    const rect = container.getBoundingClientRect();
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const initialX = x;
+    const initialY = y;
+
+    const onPointerMove = (moveEvent) => {
+      const deltaX = ((moveEvent.clientX - startX) / rect.width) * 100;
+      const deltaY = ((moveEvent.clientY - startY) / rect.height) * 100;
+
+      // clamp between 0% and 100%
+      const newX = Math.min(100, Math.max(0, initialX + deltaX));
+      const newY = Math.min(100, Math.max(0, initialY + deltaY));
+
+      changeXFn(newX);
+      changeYFn(newY);
+    };
+
+    const onPointerUp = () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+  };
+}
--- a/src/hooks/usePrepareRWDStyle.js
+++ b/src/hooks/usePrepareRWDStyle.js
@@ -0,0 +1,17 @@
+import { BREAKPOINTS } from "../constants/rwd";
+
+export function usePrepareRWDStyle({ mobileStyle, desktopStyle, tabletStyle }) {
+  return `
+    @media(max-width: ${BREAKPOINTS.tablet - 1}px){
+        ${mobileStyle}
+    }
+    @media(min-width: ${BREAKPOINTS.tablet}px) and (max-width: ${
+    BREAKPOINTS.desktop - 1
+  }px){
+        ${tabletStyle}
+    }
+    @media(min-width: ${BREAKPOINTS.desktop}px){
+        ${desktopStyle}
+    }
+  `;
+}
--- a/src/pages/Instruction.jsx
+++ b/src/pages/Instruction.jsx
@@ -1,7 +1,7 @@
 function Instruction() {
    return (
        <div>
-            Tu jest instrukcja
+            Tu miała być instrukcja
        </div>
    )
 }
--- a/src/store/useSharedState.js
+++ b/src/store/useSharedState.js
@@ -1,10 +1,9 @@
 import { create } from "zustand";
-import { DEFAULT_POINT, URL_RADIO_DATA } from "./../constants/photo";
+import { DEFAULT_POINT } from "./../constants/photo";

 // export const createBox = () => ({});
 const defaultState = {
  urls: { desktop: "", tablet: "", mobile: "", single: "" },
-  urlRadioPoint: URL_RADIO_DATA[0].value,
  points: [{ ...DEFAULT_POINT }],
  photoAlt: "Zdjęcie pokazowe",
  previewMode: "single", // desktop, tablet, mobile
@@ -19,7 +18,6 @@ export const useSharedState = create((set, get) => ({
    set((state) => ({ urls: { ...state.urls, [type]: url } })),

  setPhotoAlt: (alt) => set({ photoAlt: alt }),
-  setUrlRadioPoint: (value) => set({ urlRadioPoint: value }),
  setPoints: (points) => set({ points }),
  setPointsLength: (length) => set({ pointsLength: length }),
  setPreviewMode: (mode) => set({ previewMode: mode }),
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1 +0,0 @@
-