opinie, dodaj do koszyka, labelki

IdoSellAddOn/script.js

@@ -34,7 +34,7 @@ function idmObserveEachOncePM(elements, callback, options = {}) {
     {
       threshold: 0.1,
       ...options,
-    }
+    },
   );
 
   elements.forEach((el) => observer.observe(el));
@@ -45,7 +45,7 @@ idmObserveEachOncePM(
   document.querySelectorAll(".idm_picture__module"),
   (entry) => {
     idmPictureModuleProductsPM(entry.target);
-  }
+  },
 );
 
 // GRAPHQL QUERY
@@ -239,7 +239,7 @@ async function idmHandleAddToBasketPM(e) {
     Alertek.Error(
       idmPhotoModuleLiteralsPM[
         "Coś poszło nie tak podczas dodawania do koszyka. Spróbuj ponownie lub odśwież stronę"
-      ]
+      ],
     );
     buttonEl.innerHTML = `<span>${buttonEl.dataset.error}</span>`;
     buttonEl.classList.add("--error");
@@ -267,20 +267,10 @@ function idmMarkupAddToBasketPM(prodData) {
 
   return `<form class="add_to_basket" action="/basketchange.php" type="post">
     <input class="product__add_mode" type="hidden" value="1" name="mode">
-    <input class="product__add_id" type="hidden" value="${
+    <input class="product__add_id" type="hidden" value="${prodData.id}" name="mode">
-      prodData.id
+    <input class="product__add_size" type="hidden" value="${prodData.sizes?.[0]?.id || "uniw"}" name="mode">
-    }" name="mode">
+    <input class="product__add_number" type="hidden" value="${prodData.unit?.sellBy || 1}" name="mode">
-    <input class="product__add_size" type="hidden" value="${
+    <button class="btn --solid --medium add_to_basket__button" tabindex="0" data-success="${idmPhotoModuleLiteralsPM["Dodany"]}" data-error="${idmPhotoModuleLiteralsPM["Wystąpił błąd"]}" data-text="${idmPhotoModuleLiteralsPM["Do koszyka"]}">
-      prodData.sizes?.[0]?.id || "uniw"
-    }" name="mode">
-    <input class="product__add_number" type="hidden" value="${
-      prodData.unit?.sellBy || 1
-    }" name="mode">
-    <button class="btn --solid --medium add_to_basket__button" tabindex="0" data-success="${
-      idmPhotoModuleLiteralsPM["Dodany"]
-    }" data-error="${idmPhotoModuleLiteralsPM["Wystąpił błąd"]}" data-text="${
-    idmPhotoModuleLiteralsPM["Do koszyka"]
-  }">
         <span>${idmPhotoModuleLiteralsPM["Do koszyka"]}</span>
     </button>
   </form>`;
@@ -291,9 +281,7 @@ function idmMarkupPricePM({ prodData, addToBasket }) {
 
   let priceMarkup;
   if (!addToBasket)
-    priceMarkup = `<div class="product_prices"><span class="price --normal --main">${
+    priceMarkup = `<div class="product_prices"><span class="price --normal --main">${prodData.price?.price?.[app_shop.vars.priceType]?.formatted}</span></div>`;
-      prodData.price?.price?.[app_shop.vars.priceType]?.formatted
-    }</span></div>`;
   else {
     const currentSize = prodData?.sizes?.[0] || prodData;
 
@@ -313,9 +301,7 @@ function idmMarkupPricePM({ prodData, addToBasket }) {
     const maxPercent = currentSize?.price?.youSavePercent;
 
     priceMarkup = `
-    <div class="product_prices ${omnibusPrice ? `--omnibus` : ""} ${
+    <div class="product_prices ${omnibusPrice ? `--omnibus` : ""} ${isOmnibusHigher ? `--omnibus-higher` : ""} ${omnibusPrice === maxPrice ? "--omnibus-short" : ""}">
-      isOmnibusHigher ? `--omnibus-higher` : ""
-    } ${omnibusPrice === maxPrice ? "--omnibus-short" : ""}">
       <span class="price --normal --main">${price}</span>
       ${
         omnibusPrice && typeof omnibusPercent === "number"
@@ -382,7 +368,7 @@ async function idmPictureModuleProductsPM(containerEL) {
               opinions: isOpinions,
               addToBasket: isAddToBasket,
             })}`,
-          ""
+          "",
         )}}`,
       }),
     });
@@ -423,35 +409,19 @@ async function idmPictureModuleProductsPM(containerEL) {
       if (isOpinions) {
         opinionsHTML = `
           <div class="product_opinions__stars">
-            <i class="icon-star ${
+            <i class="icon-star ${prodData.opinion?.rating > 0.5 ? "--active" : ""}"></i>
-              prodData.opinion?.rating > 0.5 ? "--active" : ""
+            <i class="icon-star ${prodData.opinion?.rating > 1.5 ? "--active" : ""}"></i>
-            }"></i>
+            <i class="icon-star ${prodData.opinion?.rating > 2.5 ? "--active" : ""}"></i>
-            <i class="icon-star ${
+            <i class="icon-star ${prodData.opinion?.rating > 3.5 ? "--active" : ""}"></i>
-              prodData.opinion?.rating > 1.5 ? "--active" : ""
+            <i class="icon-star ${prodData.opinion?.rating > 4.5 ? "--active" : ""}"></i>
-            }"></i>
-            <i class="icon-star ${
-              prodData.opinion?.rating > 2.5 ? "--active" : ""
-            }"></i>
-            <i class="icon-star ${
-              prodData.opinion?.rating > 3.5 ? "--active" : ""
-            }"></i>
-            <i class="icon-star ${
-              prodData.opinion?.rating > 4.5 ? "--active" : ""
-            }"></i>
           </div>
-          <span class="product_opinions__score">${
+          <span class="product_opinions__score">${prodData.opinion.rating} / 5.00 </span>
-            prodData.opinion.rating
-          } / 5.00 </span>
           <span class="product_opinions__count">${prodData.opinion.count}</span>
         `;
       }
       prodEl.innerHTML = `
         ${isLabels ? `<strong class="label_icons">${labelsHTML}</strong>` : ""}
-        ${
+        ${isOpinions ? `<div class="product_opinions">${opinionsHTML}</div>` : ""}
-          isOpinions
-            ? `<div class="product_opinions">${opinionsHTML}</div>`
-            : ""
-        }
         <a class="product_name" href="${prodData.link}">${prodData.name}</a>
         ${idmMarkupPricePM({ prodData, addToBasket: isAddToBasket })}
         ${isAddToBasket ? idmMarkupAddToBasketPM(prodData) : ""}
@@ -464,7 +434,7 @@ async function idmPictureModuleProductsPM(containerEL) {
     });
   } catch (err) {
     allProdEl?.forEach((prodEl) =>
-      prodEl.closest(".idm_picture__product")?.remove()
+      prodEl.closest(".idm_picture__product")?.remove(),
     );
     console.error(err);
   }

src/constants/photo.js

@@ -22,8 +22,3 @@ export const DEFAULT_POINT = {
   id: 0,
   direction: Object.keys(DIRECTIONS)[0],
 }; // Default point structure
-
-export const URL_RADIO_DATA = [
-  { value: "single", label: "Jedno Zdjęcie" },
-  { value: "rwd", label: "Trzy Zdjęcia (RWD)" },
-];

src/features/htmlBuilder/components/PreviewRWDTabs.jsx

@@ -1,40 +1,18 @@
-import styled from "@emotion/styled";
+import { Tab, Tabs } 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";
 
-const StyledPreviewTabsContainer = styled("div")({
-  display: "grid",
-  gridTemplateColumns: "repeat(3, 1fr)",
-  gap: "0.1rem",
-  // backgroundColor: "#060606",
-});
-
 function PreviewRWDTabs() {
   const currentPreviewMode = useSharedState((state) => state.previewMode);
-  const setPreviewMode = useSharedState((state) => state.setPreviewMode);
+  const setField = useSharedState((state) => state.setField);
 
   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)}
-    //         >
-    //           {capitalizeFirstLetter(key)}
-    //         </Button>
-    //       ))}
-    // </StyledPreviewTabsContainer>
     <Tabs
       value={currentPreviewMode}
-      onChange={(_, newVal) => setPreviewMode(newVal)}
+      onChange={(_, newVal) => setField("previewMode", newVal)}
       variant="fullWidth"
       sx={(theme) => ({
         backgroundColor: theme.palette.background.header,

src/features/htmlBuilder/generated/GeneratePreview.jsx

@@ -7,10 +7,20 @@ function GeneratePreview({ preview = true }) {
   const urls = useSharedState((state) => state.urls);
   const uniqueId = Math.ceil(Math.random() * 100000 + 1);
 
+  const labels = useSharedState((state) => state.labels);
+  const opinions = useSharedState((state) => state.opinions);
+  const addToBasket = useSharedState((state) => state.addToBasket);
+
   if (preview && urls[previewMode] === "") return null;
 
   return (
-    <div className="idm_picture__module" id={`idm-picture-module-${uniqueId}`}>
+    <div
+      className="idm_picture__module"
+      id={`idm-picture-module-${uniqueId}`}
+      data-labels={labels && true}
+      data-opinions={opinions && true}
+      data-add-to-basket={addToBasket && true}
+    >
       {<GeneratePreviewImage preview={preview} urls={urls} />}
       {<GeneratePreviewPoints preview={preview} uniqueId={uniqueId} />}
     </div>

src/features/htmlBuilder/generated/GeneratePreviewSinglePoint.jsx

@@ -12,6 +12,9 @@ function GeneratePreviewSinglePoint({
   const { positions, id } = useSharedState((state) => state.points[index]);
   const previewMode = useSharedState((state) => state.previewMode);
   const product = useSharedState((state) => state.products[id]);
+  const labels = useSharedState((state) => state.labels);
+  const opinions = useSharedState((state) => state.opinions);
+  const addToBasket = useSharedState((state) => state.addToBasket);
 
   const setSinglePointPosition = useSharedState(
     (state) => state.setSinglePointPosition,
@@ -37,20 +40,45 @@ function GeneratePreviewSinglePoint({
     };
   };
 
+  // WARUNKI DLA STYLE/DATA ATRYBUTY
+  const mainContainerStyles = () => {
     if (preview)
-    return (
+      return {
-      <div
-        className="idm_picture__product"
-        style={{
         top: `${positions[previewMode].y}%`,
         left: `${positions[previewMode].x}%`,
         display: positions[previewMode].hide ? "none" : "block",
-        }}
+      };
-      >
+
+    if (previewMode === "single")
+      return { top: `${positions.single.y}%`, left: `${positions.single.x}%` };
+    else
+      return 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;
+      }, {});
+  };
+  const productInfoDataAttributes = () => {
+    if (preview || previewMode === "single")
+      return generatePointDataAttribbutes(previewMode);
+    else
+      return {
+        ...generatePointDataAttribbutes("mobile"),
+        ...generatePointDataAttribbutes("tablet"),
+        ...generatePointDataAttribbutes("desktop"),
+      };
+  };
+
+  return (
+    <div className="idm_picture__product" style={mainContainerStyles()}>
       <button
         className="idm_picture__product_point"
         aria-describedby={prodBoxUniqueId}
-          aria-label="Product Info"
+        tabIndex={-1}
+        aria-hidden="true"
         onPointerDown={onPointerDown}
       >
         +
@@ -59,56 +87,52 @@ function GeneratePreviewSinglePoint({
         className="product_info"
         id={prodBoxUniqueId}
         data-id={id}
-          {...generatePointDataAttribbutes(previewMode)}
+        {...productInfoDataAttributes()}
       >
+        {preview && (
+          <>
+            {labels && (
+              <strong class="label_icons">
+                <span class="label --new">Nowość</span>
+              </strong>
+            )}
+            {opinions && (
+              <div class="product_opinions">
+                <div class="product_opinions__stars">
+                  <i class="icon-star">*</i>
+                  <i class="icon-star">*</i>
+                  <i class="icon-star">*</i>
+                  <i class="icon-star">*</i>
+                  <i class="icon-star">*</i>
+                </div>
+                <span class="product_opinions__score">0 / 5.00 </span>
+                <span class="product_opinions__count">0</span>
+              </div>
+            )}
             <a className="product_name" href="#">
               {product ? product?.name : `Produkt ${index + 1}`}
             </a>
-          <span className="product_price">
+            <div class="product_prices">
+              <span class="price --normal --main">
                 {product
                   ? product?.price?.price?.gross?.formatted
-              : `Produkt ${index + 1}  zł`}
+                  : `${index + 1}  zł`}
               </span>
             </div>
-      </div>
+            {addToBasket && (
-    );
-
-  return (
-    <div
-      className="idm_picture__product"
-      style={
-        previewMode === "single"
-          ? { 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"
+                class="btn --solid --medium add_to_basket__button"
-        aria-describedby={prodBoxUniqueId}
+                tabindex="0"
-        tabIndex={-1}
+                data-success="Dodany"
-        aria-hidden="true"
+                data-error="Wystąpił błąd"
+                data-text="Do koszyka"
               >
-        +
+                <span>Do koszyka</span>
               </button>
-      <div
+            )}
-        className="product_info"
+          </>
-        id={prodBoxUniqueId}
+        )}
-        data-id={id}
+      </div>
-        {...(previewMode === "single"
-          ? generatePointDataAttribbutes(previewMode)
-          : {
-              ...generatePointDataAttribbutes("mobile"),
-              ...generatePointDataAttribbutes("tablet"),
-              ...generatePointDataAttribbutes("desktop"),
-            })}
-      ></div>
     </div>
   );
 }

src/features/htmlBuilder/generated/GenerateStyle.jsx

@@ -1,11 +1,12 @@
 function GenerateStyle() {
   return (
+    <>
       <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-point-shadow: rgba(255, 255, 255, 0.5);
 
     --photo-prod-box-pad-top: 1em;
     --photo-prod-box-pad-left: 2em;
@@ -35,7 +36,8 @@ function GenerateStyle() {
     position: absolute;
     z-index: 10;
   }
-.idm_picture__product:hover, .idm_picture__product.--show{
+  .idm_picture__product:hover,
+  .idm_picture__product.--show {
     z-index: 20;
   }
   .idm_picture__img {
@@ -313,7 +315,11 @@ PULSE ANIMATION
   }
 
   @media (min-width: 979px) {
-  :is(.idm_picture__product:hover, .idm_picture__product:has(.idm_picture__product_point:focus-within)) .product_info{
+    :is(
+        .idm_picture__product:hover,
+        .idm_picture__product:has(.idm_picture__product_point:focus-within)
+      )
+      .product_info {
       display: flex;
       animation: idmShowUp 0.3s ease-in-out;
     }
@@ -389,12 +395,66 @@ PULSE ANIMATION
     margin-top: 0;
   }
 
+    `}
+      </style>
+      <style>
+        {`
       
 .idm_picture__product_point{
   cursor: grab;
 }
+.idm_picture__product .product_info .product_prices{
+  font-size: 1.6em;
+  color: #000;
+}
+  .label_icons > *{
+  font-size: 1em;
+  color: #fff;
+  background: #0090f6;
+  font-weight: 600;
+  padding: 4px 6px;
+  border-radius: 5px;
+  }
+
+  [class^="icon-"], [class*=" icon-"]{
+    font-family: FontAwesome;
+  }
+    .icon-star:before {
+    content: "\f005" / "";
+}
+    .product_opinions{
+    font-size: 1.4em;
+    }
+
+    .btn{
+      background: none;
+      padding: 0;
+      border: 1px solid transparent;
+      display: inline-block;
+      text-decoration: none;
+      color: #E11D48;
+      width: 100%;
+      text-align: center;
+      cursor: pointer;
+      font-size: 1.2em;
+      padding: 0.9em 1em;
+      font-weight: normal;
+      transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+      border-radius: 5px;
+    }
+.btn.--solid {
+    background: #E11D48;
+    border: 1px solid #E11D48;
+    color: #fff;
+}
+.btn.--medium {
+    font-size: 1.4em;
+    padding: 1.25em 1.4em;
+}
+
       `}
       </style>
+    </>
   );
 }
 

src/features/photoModule/PhotoGenericOptions.jsx

@@ -1,35 +1,84 @@
-import { useState } from "react";
-import GenericBox from "../../ui/GenericBox";
-import { URL_RADIO_DATA } from "./../../constants/photo";
 import { useSharedState } from "../../store/useSharedState";
-import GenericRadioGroup from "./../../ui/GenericRadioGroup";
+import {
-import { Divider } from "@mui/material";
+  Alert,
+  Divider,
+  FormControlLabel,
+  FormGroup,
+  Switch,
+} from "@mui/material";
 
 function PhotoGenericOptions() {
-  const [urlPoint, setUrlPoint] = useState("single");
+  const setField = useSharedState((state) => state.setField);
-  const setPreviewMode = useSharedState((state) => state.setPreviewMode);
+  const toggleField = useSharedState((state) => state.toggleField);
 
-  const handleUrlRadioChange = (event) => {
+  const isRWD = useSharedState((state) => state.isRWD);
-    setUrlPoint(event.target.value);
+  const labels = useSharedState((state) => state.labels);
-    setPreviewMode(event.target.value === "rwd" ? "desktop" : "single");
+  const opinions = useSharedState((state) => state.opinions);
+  const addToBasket = useSharedState((state) => state.addToBasket);
+
+  const handleUrlRadioChange = (e) => {
+    toggleField("isRWD");
+    setField("previewMode", e.target.checked ? "desktop" : "single");
   };
 
   return (
-    <GenericBox variant="inner" title="Opcje">
+    // <GenericBox variant="inner" title="Opcje">
-      <GenericRadioGroup
+    <FormGroup sx={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+      {/* <GenericRadioGroup
         radioData={URL_RADIO_DATA}
-        value={urlPoint}
+        value={isRwd}
         onChange={handleUrlRadioChange}
         direction="row"
+      /> */}
+      <FormControlLabel
+        control={<Switch checked={isRWD} onChange={handleUrlRadioChange} />}
+        label="Czy wyświetlać inne zdjęcia dla innych szerokości ekranu (RWD)"
       />
-      <Divider />
+
-      Labelki
+      <Divider sx={{ borderColor: "#ccc" }} />
-      <Divider />
+
-      Opinie
+      <FormControlLabel
-      <Divider />
+        control={
-      Dodaj do koszyka
+          <Switch checked={labels} onChange={() => toggleField("labels")} />
-      <Divider />
+        }
-    </GenericBox>
+        label="Czy wyświetlać labele produktu (np Nowość, Promocja itp)"
+      />
+
+      <Divider sx={{ borderColor: "#ccc" }} />
+
+      <FormControlLabel
+        control={
+          <Switch checked={opinions} onChange={() => toggleField("opinions")} />
+        }
+        label="Czy wyświetlać dane o opinii o produkcie"
+      />
+
+      <Divider sx={{ borderColor: "#ccc" }} />
+
+      <FormControlLabel
+        control={
+          <Switch
+            checked={addToBasket}
+            onChange={() => toggleField("addToBasket")}
+          />
+        }
+        label="Czy wyświetlać przycisk dodania do koszyka na produkcie"
+      />
+
+      <Divider sx={{ borderColor: "#ccc" }} />
+
+      <Alert severity="warning">
+        Uwaga!
+        <br />
+        Wygląd boxa produktowego na podglądzie może się różnić od tego
+        wrzuconego na sklep. Aplikacja nie pobiera czcionek ani kolorów ze
+        sklepu!
+        <br />
+        Podgląd wyświetla tylko jeden testowy label i nie wyświetla danych
+        omnibusa.
+      </Alert>
+    </FormGroup>
+    // {/* </GenericBox> */}
   );
 }
 

src/features/photoModule/PhotoUrl.jsx

@@ -10,7 +10,7 @@ function PhotoUrl() {
   const setUrl = useSharedState((state) => state.setUrl);
 
   const photoAlt = useSharedState((state) => state.photoAlt);
-  const setPhotoAlt = useSharedState((state) => state.setPhotoAlt);
+  const setField = useSharedState((state) => state.setField);
 
   const handleChangeURL = ({ event, type }) => {
     event.preventDefault();
@@ -29,7 +29,7 @@ function PhotoUrl() {
       <Divider />
       <InputField
         name="Alt zdjęcia"
-        onChange={(e) => setPhotoAlt(e.target.value)}
+        onChange={(e) => setField("photoAlt", e.target.value)}
         value={photoAlt}
       />
     </GenericBox>

src/store/useSharedState.js

@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 import { DEFAULT_POINT } from "./../constants/photo";
 
 // export const createBox = () => ({});
@@ -7,27 +8,50 @@ const defaultState = {
   points: [{ ...DEFAULT_POINT }],
   photoAlt: "Zdjęcie pokazowe",
   previewMode: "single", // desktop, tablet, mobile
+
+  isRWD: false,
+  labels: false,
+  opinions: false,
+  addToBasket: false,
 };
 
-export const useSharedState = create((set, get) => ({
+export const useSharedState = create(
+  persist(
+    (set, get) => ({
       //DATA
       ...defaultState,
       products: {},
 
       //SETTERS/UPDATERS
+      setField: (key, value) =>
+        set(() => ({
+          [key]: value,
+        })),
+
+      toggleField: (key) =>
+        set((state) => ({
+          [key]: !state[key],
+        })),
+
+      // setPhotoAlt: (alt) => set({ photoAlt: alt }),
+      // setPreviewMode: (mode) => set({ previewMode: mode }),
+
+      /* =========
+    URLS
+    ========= */
       setUrl: (type, url) =>
         set((state) => ({ urls: { ...state.urls, [type]: url } })),
 
-  setPhotoAlt: (alt) => set({ photoAlt: alt }),
+      /* =========
-  setPoints: (points) => set({ points }),
+    POINTS
-  setPointsLength: (length) => set({ pointsLength: length }),
+    ========= */
-  setPreviewMode: (mode) => set({ previewMode: mode }),
 
+      setPoints: (points) => set({ points }),
       // Update a single point by ID
       setSinglePoint: (id, newData) =>
         set((state) => ({
           points: state.points.map((p, index) =>
-        index === id ? { ...p, ...newData } : p
+            index === id ? { ...p, ...newData } : p,
           ),
         })),
 
@@ -45,7 +69,7 @@ export const useSharedState = create((set, get) => ({
                     },
                   },
                 }
-          : p
+              : p,
           ),
         })),
 
@@ -61,8 +85,9 @@ export const useSharedState = create((set, get) => ({
           points: state.points.filter((p, index) => index !== id),
         })),
 
-  clearAll: () => set(() => ({ ...defaultState })),
+      /* =========
-
+     PRODUCTS
+     ========= */
       addProduct: (prod) =>
         set((state) => ({
           products: {
@@ -70,4 +95,22 @@ export const useSharedState = create((set, get) => ({
             [prod.id]: prod,
           },
         })),
-}));
+
+      /* =========
+    RESET
+    ========= */
+      clearAll: () => set(() => ({ ...defaultState })),
+    }),
+    {
+      name: "photo-generic-options",
+
+      partialize: (state) => ({
+        labels: state.labels,
+        opinions: state.opinions,
+        addToBasket: state.addToBasket,
+        previewMode: state.previewMode,
+        isRWD: state.isRWD,
+      }),
+    },
+  ),
+);