From 6267b412facc362e3b168882e622657a4a265ee8 Mon Sep 17 00:00:00 2001
From: stCarolas <stcarolas@gmail.com>
Date: Thu, 16 May 2024 19:34:44 +0300
Subject: [PATCH] refactor custom properties

---
 .../ConfigurationPage/css/WidgetList.css      |  1 +
 .../ConfigurationPage/css/WidgetSettings.css  |  3 +-
 .../settings/BaseSettings.tsx                 |  7 --
 .../settings/DonatersTopListSettings.tsx      | 44 ---------
 .../DonatersTopListLayoutProperty.tsx         | 60 ++++++++++++
 .../DonationGoalProperty.module.css           |  5 +
 .../widgetproperties/DonationGoalProperty.tsx | 21 +++-
 .../ReelItemBackgroundProperty.module.css     | 16 ++++
 .../ReelItemBackgroundProperty.tsx            | 70 ++++++++++++++
 .../ReelItemListProperty.module.css           | 50 ++++++++++
 .../widgetproperties/ReelItemListProperty.tsx | 74 +++++++++++++++
 .../widgetsettings/AbstractWidgetSettings.tsx |  7 +-
 .../DonatersTopListWidgetSettings.tsx         | 19 +---
 .../DonationGoalWidgetSettings.module.css     |  4 -
 .../DonationGoalWidgetSettings.tsx            | 37 +-------
 .../widgetsettings/ReelWidgetSettings.tsx     | 26 ++---
 .../MediaWidget/PaymentPageConfig.ts          |  4 +-
 .../PaymentPageConfig.module.css              |  2 +
 .../PaymentPageConfigComponent.tsx            | 11 ++-
 src/components/Tabs/Tabs.module.css           |  1 +
 src/components/Tabs/Tabs.tsx                  | 47 +++++----
 src/pages/Reel/ReelWidgetSettings.tsx         | 95 +------------------
 22 files changed, 349 insertions(+), 255 deletions(-)
 create mode 100644 src/components/ConfigurationPage/widgetproperties/DonatersTopListLayoutProperty.tsx
 create mode 100644 src/components/ConfigurationPage/widgetproperties/ReelItemBackgroundProperty.module.css
 create mode 100644 src/components/ConfigurationPage/widgetproperties/ReelItemBackgroundProperty.tsx
 create mode 100644 src/components/ConfigurationPage/widgetproperties/ReelItemListProperty.module.css
 create mode 100644 src/components/ConfigurationPage/widgetproperties/ReelItemListProperty.tsx

diff --git a/src/components/ConfigurationPage/css/WidgetList.css b/src/components/ConfigurationPage/css/WidgetList.css
index ead3694..e185ab9 100644
--- a/src/components/ConfigurationPage/css/WidgetList.css
+++ b/src/components/ConfigurationPage/css/WidgetList.css
@@ -2,6 +2,7 @@
   margin-left: 300px;
   margin-right: 100px;
   padding-top: 20px;
+  padding-bottom: 50px;
   flex: 1 1 auto;
 }
 
diff --git a/src/components/ConfigurationPage/css/WidgetSettings.css b/src/components/ConfigurationPage/css/WidgetSettings.css
index 12eb4f9..d3f33d0 100644
--- a/src/components/ConfigurationPage/css/WidgetSettings.css
+++ b/src/components/ConfigurationPage/css/WidgetSettings.css
@@ -1,9 +1,9 @@
-/* @import url("https://fonts.googleapis.com/css2?family=Amatic+SC&family=Protest+Strike&display=swap"); */
 @import url("https://fonts.googleapis.com/css2?family=Martian+Mono:wght@100..800&display=swap");
 
 .configuration-container {
   height: 100%;
   display: flex;
+  flex-direction: column;
 }
 
 .widget-settings {
@@ -12,7 +12,6 @@
   padding-left: 15px;
   padding-right: 15px;
   padding-bottom: 20px;
-  margin-bottom: 5px;
 }
 
 .widget-settings-item {
diff --git a/src/components/ConfigurationPage/settings/BaseSettings.tsx b/src/components/ConfigurationPage/settings/BaseSettings.tsx
index 5a6e817..4477b12 100644
--- a/src/components/ConfigurationPage/settings/BaseSettings.tsx
+++ b/src/components/ConfigurationPage/settings/BaseSettings.tsx
@@ -1,24 +1,17 @@
 import { useContext } from "react";
 import { WidgetsContext } from "../WidgetsContext";
 import { log } from "../../../logging";
-import { WidgetProperty } from "../widgetproperties/WidgetProperty";
 
 export default function BaseSettings({
   id,
-  propertyFilter,
 }: {
   id: string;
-  customHandler?: Function;
-  propertyFilter?: (prop: WidgetProperty) => boolean;
 }) {
   const { config, updateConfig } = useContext(WidgetsContext);
   log.debug(
     { settings: config.get(id) },
     "creating layout for widget settings",
   );
-  log.debug({ properties: config.get(id)?.properties }, "use properties");
-
-  const filter = (prop) => (propertyFilter ? propertyFilter(prop) : true);
 
   return config.get(id)?.markup(updateConfig);
 }
diff --git a/src/components/ConfigurationPage/settings/DonatersTopListSettings.tsx b/src/components/ConfigurationPage/settings/DonatersTopListSettings.tsx
index c58afb6..c43a7a3 100644
--- a/src/components/ConfigurationPage/settings/DonatersTopListSettings.tsx
+++ b/src/components/ConfigurationPage/settings/DonatersTopListSettings.tsx
@@ -13,51 +13,7 @@ export default function DonatersTopListSettings({ id }: { id: string }) {
         .get(id)
         ?.properties
         ?.map((prop) => {
-          if (prop.name === "type" || prop.name === "period") {
-            return prop.markup(updateConfig);
-          }
           if (prop.name === "layout") {
-            return (
-              <div key={prop.name} className="widget-settings-item">
-                <label className="widget-settings-name">
-                  {prop.displayName}
-                </label>
-                <div className="widget-settings-radiocontainer">
-                  <label className="widget-settings-radiobutton">
-                    <input
-                      title="vertical"
-                      type="radio"
-                      value="vertical"
-                      checked={prop.value === "vertical"}
-                      onChange={(e) =>
-                        updateConfig(id, prop.name, e.target.value)
-                      }
-                    />
-                    <img
-                      title="vertical"
-                      src={`/icons/vertical.jpg`}
-                      onClick={() => updateConfig(id, prop.name, "vertical")}
-                    />
-                  </label>
-                  <label className="widget-settings-radiobutton">
-                    <input
-                      title="horizontal"
-                      type="radio"
-                      value="horizontal"
-                      checked={prop.value === "horizontal"}
-                      onChange={(e) =>
-                        updateConfig(id, prop.name, e.target.value)
-                      }
-                    />
-                    <img
-                      title="horizontal"
-                      src={`/icons/horizontal.jpg`}
-                      onClick={() => updateConfig(id, prop.name, "horizontal")}
-                    />
-                  </label>
-                </div>
-              </div>
-            );
           }
         })}
     </>
diff --git a/src/components/ConfigurationPage/widgetproperties/DonatersTopListLayoutProperty.tsx b/src/components/ConfigurationPage/widgetproperties/DonatersTopListLayoutProperty.tsx
new file mode 100644
index 0000000..6963349
--- /dev/null
+++ b/src/components/ConfigurationPage/widgetproperties/DonatersTopListLayoutProperty.tsx
@@ -0,0 +1,60 @@
+import { ReactNode } from "react";
+import { DefaultWidgetProperty } from "./WidgetProperty";
+
+export class DonatersTopListLayoutProperty extends DefaultWidgetProperty {
+  constructor(widgetId: string, value: string) {
+    super(widgetId, "layout", "predefined", value, "Компоновка", "content");
+  }
+
+  copy(): DonatersTopListLayoutProperty {
+    return new DonatersTopListLayoutProperty(this.widgetId, this.value);
+  }
+
+  markup(updateConfig: Function): ReactNode {
+    return (
+      <>
+        <div key={this.name} className="widget-settings-item">
+          <label className="widget-settings-name">{this.displayName}</label>
+          <div className="widget-settings-radiocontainer">
+            <label className="widget-settings-radiobutton">
+              <input
+                title="vertical"
+                type="radio"
+                value="vertical"
+                checked={this.value === "vertical"}
+                onChange={(e) =>
+                  updateConfig(this.widgetId, this.name, e.target.value)
+                }
+              />
+              <img
+                title="vertical"
+                src={`/icons/vertical.jpg`}
+                onClick={() =>
+                  updateConfig(this.widgetId, this.name, "vertical")
+                }
+              />
+            </label>
+            <label className="widget-settings-radiobutton">
+              <input
+                title="horizontal"
+                type="radio"
+                value="horizontal"
+                checked={this.value === "horizontal"}
+                onChange={(e) =>
+                  updateConfig(this.widgetId, this.name, e.target.value)
+                }
+              />
+              <img
+                title="horizontal"
+                src={`/icons/horizontal.jpg`}
+                onClick={() =>
+                  updateConfig(this.widgetId, this.name, "horizontal")
+                }
+              />
+            </label>
+          </div>
+        </div>
+      </>
+    );
+  }
+}
diff --git a/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.module.css b/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.module.css
index 950a81c..8790a58 100644
--- a/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.module.css
+++ b/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.module.css
@@ -3,3 +3,8 @@
   position: relative;
   padding: 10px;
 }
+
+.button {
+  width: unset!important;
+  margin-bottom: 10px;
+}
diff --git a/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.tsx b/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.tsx
index 13a41a9..dd33f41 100644
--- a/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.tsx
+++ b/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.tsx
@@ -32,7 +32,7 @@ export class DonationGoalProperty extends DefaultWidgetProperty {
         },
       ],
       "Цель",
-      undefined,
+      "goals",
     );
   }
 
@@ -52,6 +52,19 @@ export class DonationGoalProperty extends DefaultWidgetProperty {
     updateConfig(this.widgetId, "goal", this.value);
   }
 
+  addGoal(updateConfig: Function) {
+    log.debug({ settings: this }, "adding goal to");
+    (this.value as Goal[]).push({
+      id: uuidv7(),
+      briefDescription: "Название",
+      fullDescription: "Полное описание",
+      requiredAmount: { major: 100, currency: "RUB" },
+      accumulatedAmount: { major: 0, currency: "RUB" },
+    });
+    updateConfig(this.widgetId, "goal", this.value);
+    log.debug({ settings: this }, "updated goals");
+  }
+
   copy(): DonationGoalProperty {
     return new DonationGoalProperty(this.widgetId, this.value);
   }
@@ -59,6 +72,12 @@ export class DonationGoalProperty extends DefaultWidgetProperty {
   markup(updateConfig: Function): ReactNode {
     return (
       <>
+        <button
+          className={`widget-button ${classes.button}`}
+          onClick={() => this.addGoal(updateConfig)}
+        >
+          Добавить цель
+        </button>
         {this.value.map((goal: Goal, index: number) => (
           <div key={index} className={`${classes.goalcontainer}`}>
             <div style={{ fontStyle: "italic", fontWeight: "900"}}>Цель:</div>
diff --git a/src/components/ConfigurationPage/widgetproperties/ReelItemBackgroundProperty.module.css b/src/components/ConfigurationPage/widgetproperties/ReelItemBackgroundProperty.module.css
new file mode 100644
index 0000000..97c54bc
--- /dev/null
+++ b/src/components/ConfigurationPage/widgetproperties/ReelItemBackgroundProperty.module.css
@@ -0,0 +1,16 @@
+.itembackcontainer{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.itembacklabel{
+  flex: 0 0 auto;
+  font-family: "Martian Mono", monospace;
+}
+
+.itembackuploadbutton{
+  flex:  0 0 auto;
+}
diff --git a/src/components/ConfigurationPage/widgetproperties/ReelItemBackgroundProperty.tsx b/src/components/ConfigurationPage/widgetproperties/ReelItemBackgroundProperty.tsx
new file mode 100644
index 0000000..5e21940
--- /dev/null
+++ b/src/components/ConfigurationPage/widgetproperties/ReelItemBackgroundProperty.tsx
@@ -0,0 +1,70 @@
+import { ChangeEvent, ReactNode } from "react";
+import { DefaultWidgetProperty } from "./WidgetProperty";
+import axios from "axios";
+import classes from "./ReelItemBackgroundProperty.module.css";
+
+export class ReelItemBackgroundProperty extends DefaultWidgetProperty {
+  constructor(widgetId: string, value: string) {
+    super(
+      widgetId,
+      "backgroundImage",
+      "predefined",
+      value,
+      "Фон карточек",
+      "prizes",
+    );
+  }
+
+  uploadFile(file: File) {
+    return axios.put(
+      `${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${file.name}`,
+      { file: file },
+      {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      },
+    );
+  }
+
+  handleBackgroundImageChange(
+    e: ChangeEvent<HTMLInputElement>,
+    updateConfig: Function,
+  ) {
+    if (e.target.files) {
+      const file = e.target.files[0];
+      this.uploadFile(file).then((ignore) => {
+        updateConfig(this.widgetId, "backgroundImage", file.name);
+      });
+    }
+  }
+
+  copy(): ReelItemBackgroundProperty {
+    return new ReelItemBackgroundProperty(this.widgetId, this.value);
+  }
+
+  markup(updateConfig: Function): ReactNode {
+    return (
+      <>
+        <div className={`${classes.itembackcontainer}`}>
+          <div className={`${classes.itembacklabel}`}>Фон карточек</div>
+          <label className={`upload-button ${classes.itembackuploadbutton}`}>
+            <input
+              type="file"
+              onChange={(e) =>
+                this.handleBackgroundImageChange(e, updateConfig)
+              }
+            />
+            Загрузить изображение
+          </label>
+        </div>
+        {this.value && (
+          <img
+            className={`${classes.backgroundimage}`}
+            src={`${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${this.value}`}
+          />
+        )}
+      </>
+    );
+  }
+}
diff --git a/src/components/ConfigurationPage/widgetproperties/ReelItemListProperty.module.css b/src/components/ConfigurationPage/widgetproperties/ReelItemListProperty.module.css
new file mode 100644
index 0000000..230a22d
--- /dev/null
+++ b/src/components/ConfigurationPage/widgetproperties/ReelItemListProperty.module.css
@@ -0,0 +1,50 @@
+.testbutton {
+  width: 150px;
+  margin-bottom: 10px;
+}
+
+.optionscontainer {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  padding-bottom: 20px;
+}
+
+.itembackcontainer{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.itembacklabel{
+  flex: 0 0 auto;
+  font-family: "Martian Mono", monospace;
+}
+
+.itembackuploadbutton{
+  flex:  0 0 auto;
+}
+
+.backgroundimage{
+  border: 1px solid #674afd;
+  margin-top: 5px;
+}
+
+.addbuttoncontainer {
+  width: 60%;
+  text-align: center;
+  padding-top: 20px;
+}
+
+.option {
+  width: 60%;
+  display: flex;
+  align-items: center;
+}
+
+.option .widget-settings-value {
+  width: unset;
+}
diff --git a/src/components/ConfigurationPage/widgetproperties/ReelItemListProperty.tsx b/src/components/ConfigurationPage/widgetproperties/ReelItemListProperty.tsx
new file mode 100644
index 0000000..08e89f9
--- /dev/null
+++ b/src/components/ConfigurationPage/widgetproperties/ReelItemListProperty.tsx
@@ -0,0 +1,74 @@
+import { ReactNode } from "react";
+import { DefaultWidgetProperty } from "./WidgetProperty";
+import classes from "./ReelItemListProperty.module.css";
+
+export class ReelItemListProperty extends DefaultWidgetProperty {
+  constructor(widgetId: string, value: string[]) {
+    super(widgetId, "optionList", "predefined", value, "Призы", "prizes");
+  }
+
+  addOption(updateConfig: Function) {
+    this.value.push("");
+    updateConfig(this.widgetId, "optionList", this.value);
+  }
+
+  updateOption(index: number, value: string, updateConfig: Function) {
+    const updated = this.value.toSpliced(index, 1, value);
+    updateConfig(this.widgetId, "optionList", updated);
+  }
+
+  removeOption(index: number, updateConfig: Function) {
+    const updated = this.value.toSpliced(index, 1);
+    updateConfig(this.widgetId, "optionList", updated);
+  }
+
+  copy(){
+    return new ReelItemListProperty(this.widgetId, this.value);
+  }
+
+  markup(updateConfig: Function): ReactNode {
+    console.log(this.value);
+    return (
+      <div className="widget-settings-item">
+        <label className="widget-settings-name">Призы</label>
+        <div className={classes.optionscontainer}>
+          {this.value &&
+            this.value.map((option, number) => (
+              <>
+                <div className={classes.option}>
+                  <textarea
+                    key={number}
+                    value={option}
+                    className="widget-settings-value"
+                    style={{ width: "100%" }}
+                    onChange={(e) =>
+                      this.updateOption(number, e.target.value, updateConfig)
+                    }
+                  />
+                  <button
+                    className="widget-button"
+                    onClick={() => {
+                      this.removeOption(number, updateConfig);
+                    }}
+                  >
+                    <span className="material-symbols-sharp">delete</span>
+                  </button>
+                </div>
+              </>
+            ))}
+          <div className={classes.addbuttoncontainer}>
+            <button
+              className="widget-button"
+              style={{ width: "100%" }}
+              onClick={() => {
+                this.addOption(updateConfig);
+              }}
+            >
+              Добавить
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/ConfigurationPage/widgetsettings/AbstractWidgetSettings.tsx b/src/components/ConfigurationPage/widgetsettings/AbstractWidgetSettings.tsx
index 332ddcd..6dd322a 100644
--- a/src/components/ConfigurationPage/widgetsettings/AbstractWidgetSettings.tsx
+++ b/src/components/ConfigurationPage/widgetsettings/AbstractWidgetSettings.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import { log } from "../../../logging";
 import { WidgetProperty } from "../widgetproperties/WidgetProperty";
+import Tabs from "../../Tabs/Tabs";
 
 export class AbstractWidgetSettings {
   private _properties: WidgetProperty[];
@@ -32,13 +33,11 @@ export class AbstractWidgetSettings {
     return updated;
   }
 
-  markup(updateConfig: Function): ReactNode {
+  markup(): ReactNode {
     log.debug("running markup in AbstractWidgetSettings");
     return (
       <>
-        {this._properties
-          ?.filter((prop) => prop.type !== "custom")
-          .map((prop) => prop.markup(updateConfig))}
+        <Tabs tabs={this._tabDescriptions} properties={this._properties}/>
       </>
     );
   }
diff --git a/src/components/ConfigurationPage/widgetsettings/DonatersTopListWidgetSettings.tsx b/src/components/ConfigurationPage/widgetsettings/DonatersTopListWidgetSettings.tsx
index fa02638..0c7e996 100644
--- a/src/components/ConfigurationPage/widgetsettings/DonatersTopListWidgetSettings.tsx
+++ b/src/components/ConfigurationPage/widgetsettings/DonatersTopListWidgetSettings.tsx
@@ -1,12 +1,10 @@
 import { ColorProperty } from "../widgetproperties/ColorProperty";
+import { DonatersTopListLayoutProperty } from "../widgetproperties/DonatersTopListLayoutProperty";
 import { FontProperty } from "../widgetproperties/FontProperty";
 import { NumberProperty } from "../widgetproperties/NumberProperty";
 import { SingleChoiceProperty } from "../widgetproperties/SingleChoiceProperty";
 import { TextProperty } from "../widgetproperties/TextProperty";
-import {
-  DefaultWidgetProperty,
-  WidgetProperty,
-} from "../widgetproperties/WidgetProperty";
+import { WidgetProperty } from "../widgetproperties/WidgetProperty";
 import { AbstractWidgetSettings } from "./AbstractWidgetSettings";
 
 export class DonatersTopListWidgetSettings extends AbstractWidgetSettings {
@@ -22,7 +20,7 @@ export class DonatersTopListWidgetSettings extends AbstractWidgetSettings {
         new SingleChoiceProperty(
           widgetId,
           "type",
-          "custom",
+          "predefined",
           "All",
           "Тип виджета",
           ["All", "Top", "Last"],
@@ -31,7 +29,7 @@ export class DonatersTopListWidgetSettings extends AbstractWidgetSettings {
         new SingleChoiceProperty(
           widgetId,
           "period",
-          "custom",
+          "predefined",
           "month",
           "Период",
           ["month", "day"],
@@ -133,14 +131,7 @@ export class DonatersTopListWidgetSettings extends AbstractWidgetSettings {
           "Прозрачность списка",
           "list",
         ),
-        new DefaultWidgetProperty(
-          widgetId,
-          "layout",
-          "custom",
-          "Компоновка",
-          "vertical",
-          "content",
-        ),
+        new DonatersTopListLayoutProperty(widgetId, "vertical"),
       ],
       tabs,
     );
diff --git a/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.module.css b/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.module.css
index d26d181..e69de29 100644
--- a/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.module.css
+++ b/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.module.css
@@ -1,4 +0,0 @@
-.button {
-  width: unset!important;
-  margin-bottom: 10px;
-}
diff --git a/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.tsx b/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.tsx
index f631f0e..90629d5 100644
--- a/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.tsx
+++ b/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.tsx
@@ -1,13 +1,8 @@
-import { ReactNode } from "react";
 import {
   DonationGoalProperty,
-  Goal,
 } from "../widgetproperties/DonationGoalProperty";
 import { WidgetProperty } from "../widgetproperties/WidgetProperty";
 import { AbstractWidgetSettings } from "./AbstractWidgetSettings";
-import classes from "./DonationGoalWidgetSettings.module.css";
-import { log } from "../../../logging";
-import { uuidv7 } from "uuidv7";
 import { FontProperty } from "../widgetproperties/FontProperty";
 import { NumberProperty } from "../widgetproperties/NumberProperty";
 import { ColorProperty } from "../widgetproperties/ColorProperty";
@@ -15,6 +10,8 @@ import { ColorProperty } from "../widgetproperties/ColorProperty";
 export class DonationGoalWidgetSettings extends AbstractWidgetSettings {
   constructor(widgetId: string, properties: WidgetProperty[]) {
     const tabs = new Map();
+    tabs.set("header", "Вид виджета");
+    tabs.set("goals", "Цели");
     super(
       widgetId,
       properties,
@@ -93,34 +90,4 @@ export class DonationGoalWidgetSettings extends AbstractWidgetSettings {
     return new DonationGoalWidgetSettings(this.widgetId, this.properties);
   }
 
-  addGoal(updateConfig: Function) {
-    log.debug({ settings: this }, "adding goal to");
-    const goal =
-      this.properties.find((it) => it.name == "goal") ??
-      new DonationGoalProperty(this.widgetId);
-    log.debug({ goal: goal }, "updating goal");
-    (goal.value as Goal[]).push({
-      id: uuidv7(),
-      briefDescription: "Название",
-      fullDescription: "Полное описание",
-      requiredAmount: { major: 100, currency: "RUB" },
-      accumulatedAmount: { major: 0, currency: "RUB" },
-    });
-    updateConfig(this.widgetId, "goal", goal.value);
-    log.debug({ settings: this }, "updated goal widget settings");
-  }
-
-  markup(updateConfig: Function): ReactNode {
-    return (
-      <>
-        <button
-          className={`widget-button ${classes.button}`}
-          onClick={() => this.addGoal(updateConfig)}
-        >
-          Добавить цель
-        </button>
-        {super.markup(updateConfig)}
-      </>
-    );
-  }
 }
diff --git a/src/components/ConfigurationPage/widgetsettings/ReelWidgetSettings.tsx b/src/components/ConfigurationPage/widgetsettings/ReelWidgetSettings.tsx
index 63925da..7b8ceb8 100644
--- a/src/components/ConfigurationPage/widgetsettings/ReelWidgetSettings.tsx
+++ b/src/components/ConfigurationPage/widgetsettings/ReelWidgetSettings.tsx
@@ -1,6 +1,8 @@
 import { ColorProperty } from "../widgetproperties/ColorProperty";
 import { FontProperty } from "../widgetproperties/FontProperty";
 import { NumberProperty } from "../widgetproperties/NumberProperty";
+import { ReelItemBackgroundProperty } from "../widgetproperties/ReelItemBackgroundProperty";
+import { ReelItemListProperty } from "../widgetproperties/ReelItemListProperty";
 import {
   DefaultWidgetProperty,
   WidgetProperty,
@@ -73,29 +75,13 @@ export class ReelWidgetSettings extends AbstractWidgetSettings {
           "Требуемая сумма",
           "general",
         ),
-        new DefaultWidgetProperty(
-          widgetId,
-          "optionList",
-          "custom",
-          ["Ничего", "Выигрыш"],
-          "Призы",
-          "prizes",
-        ),
-        new DefaultWidgetProperty(
+        new ReelItemListProperty(
           widgetId,
-          "backgroundImage",
-          "custom",
-          "",
-          "Фон карточек",
-          "prizes",
+          ["Ничего", "Выигрыш"]
         ),
-        new DefaultWidgetProperty(
+        new ReelItemBackgroundProperty(
           widgetId,
-          "winnerBackgroundImage",
-          "custom",
-          "",
-          "Фон выигрыша",
-          "prizes",
+          ""
         ),
       ],
       tabs,
diff --git a/src/components/MediaWidget/PaymentPageConfig.ts b/src/components/MediaWidget/PaymentPageConfig.ts
index cb2bafa..d3d91e4 100644
--- a/src/components/MediaWidget/PaymentPageConfig.ts
+++ b/src/components/MediaWidget/PaymentPageConfig.ts
@@ -13,9 +13,11 @@ export class PaymentPageConfig {
   requestCost = 100;
   private _minimalAmount: Number = 40;
   private _goals: Goal[] = [];
+  private _recipientId: string = "";
 
   constructor(recipientId: string) {
     log.debug("Loading PaymentPageConfig");
+    this._recipientId = recipientId;
     axios
       .get(`${process.env.REACT_APP_CONFIG_API_ENDPOINT}/config/paymentpage?ownerId=${recipientId}`)
       .then((data) => data.data)
@@ -121,7 +123,7 @@ export class PaymentPageConfig {
 
   async reloadConfig(): Promise<void> {
     const data = await axios.get(
-      `${process.env.REACT_APP_CONFIG_API_ENDPOINT}/config/paymentpage`,
+      `${process.env.REACT_APP_CONFIG_API_ENDPOINT}/config/paymentpage?ownerId=${this._recipientId}`,
     );
     this.config = data.data;
     this.requestsEnabled = this.config.value["media.requests.enabled"] ?? true;
diff --git a/src/components/PaymentPageConfig/PaymentPageConfig.module.css b/src/components/PaymentPageConfig/PaymentPageConfig.module.css
index bb14193..1ab8b2a 100644
--- a/src/components/PaymentPageConfig/PaymentPageConfig.module.css
+++ b/src/components/PaymentPageConfig/PaymentPageConfig.module.css
@@ -5,6 +5,7 @@
 	padding-top: 50px;
 	padding-left: 20px;
 	padding-right: 20px;
+  padding-bottom: 50px;
   flex: 1 0 auto;
   margin-top: 10px;
 }
@@ -12,6 +13,7 @@
 .paymentpage {
   height: 100%;
   display: flex;
+  flex-direction: column;
 }
 
 .widgetsettingsitem {
diff --git a/src/components/PaymentPageConfig/PaymentPageConfigComponent.tsx b/src/components/PaymentPageConfig/PaymentPageConfigComponent.tsx
index d7e46da..7442a75 100644
--- a/src/components/PaymentPageConfig/PaymentPageConfigComponent.tsx
+++ b/src/components/PaymentPageConfig/PaymentPageConfigComponent.tsx
@@ -57,7 +57,6 @@ export default function PaymentPageConfigComponent({}: {}) {
   const handleBackUpload = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
       const file = e.target.files[0];
-      console.log(file);
       uploadFile(file, `back-${recipientId}.jpg`).then(() => navigate(0));
     }
   };
@@ -195,7 +194,9 @@ export default function PaymentPageConfigComponent({}: {}) {
             className={classes.widgetsettingsvalue}
             onChange={(e) => {
               if (paymentPageConfig.current) {
-                paymentPageConfig.current.minimalAmount = Number(e.target.value);
+                paymentPageConfig.current.minimalAmount = Number(
+                  e.target.value,
+                );
               }
               if (!hasChanges) {
                 setHasChanges(true);
@@ -208,10 +209,10 @@ export default function PaymentPageConfigComponent({}: {}) {
             Реквесты музыки/видео
           </div>
           <select
-            value={isRequestsEnabled ? "enabled" : "disabled"}
+            value={ isRequestsEnabled ? "enabled" : "disabled" }
             className="widget-settings-value select"
-            style={{ width: "120px" }}
-            onChange={handleTogglingRequests}
+            style={{ width: "120px", backgroundColor: "#0c122e" }}
+            onChange={ handleTogglingRequests }
           >
             <option key="enabled">enabled</option>
             <option key="disabled">disabled</option>
diff --git a/src/components/Tabs/Tabs.module.css b/src/components/Tabs/Tabs.module.css
index 3564337..b083837 100644
--- a/src/components/Tabs/Tabs.module.css
+++ b/src/components/Tabs/Tabs.module.css
@@ -1,5 +1,6 @@
 .settingstabs {
   display:flex;
+  margin-bottom: 10px;
 }
 
 .setttingstabitem{
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 33dca64..a9c52e9 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -1,53 +1,52 @@
 import React, { useContext, useEffect, useState } from "react";
-import { WidgetsContext } from "../ConfigurationPage/WidgetsContext";
 import classes from "./Tabs.module.css";
 import { log } from "../../logging";
+import { WidgetProperty } from "../ConfigurationPage/widgetproperties/WidgetProperty";
+import { WidgetsContext } from "../ConfigurationPage/WidgetsContext";
 
 export default function Tabs({
-  widgetId,
-  onChange,
+  tabs,
+  properties,
 }: {
-  widgetId: string;
-  onChange: (tab: string) => void;
+  tabs: Map<string, string>;
+  properties: WidgetProperty[];
 }) {
-  const { config } = useContext(WidgetsContext);
+  const { updateConfig } = useContext(WidgetsContext);
   const [tab, setTab] = useState<string>("");
 
   useEffect(() => {
-    if (tab){
+    if (tab) {
       return;
     }
-    const settings = config.get(widgetId);
-    log.debug({ settings: settings }, "trying to find first tab");
-    if (!settings) {
-      return;
-    }
-    const firstTab = settings.tabDescriptions.keys().next();
+    const firstTab = tabs.keys().next();
     if (firstTab) {
       log.debug({ tab: firstTab.value }, "settings first tab");
-      onChange(firstTab.value);
       setTab(firstTab.value);
     }
-  }, [config]);
+    return () => setTab("");
+  }, [tabs]);
 
-  const tabs = () => {
-    const settings = config.get(widgetId);
-    if (!settings) {
-      return <></>;
-    }
-    return [...settings.tabDescriptions.keys()].map((key) => (
+  const tabsMarkup = () => {
+    return [...tabs.keys()].map((key) => (
       <div
         key={key}
         className={`settings-tab-item ${tab === key ? "active" : ""}`}
         onClick={() => {
           setTab(key);
-          onChange(key);
         }}
       >
-        {settings.tabDescriptions.get(key)}
+        {tabs.get(key)}
       </div>
     ));
   };
 
-  return <div className={`${classes.settingstabs}`}>{tabs()}</div>;
+  return (
+    <>
+      <div className={`${classes.settingstabs}`}>{tabsMarkup()}</div>
+      {properties
+        ?.filter((prop) => prop.type !== "custom")
+        ?.filter((prop) => prop.tab === tab)
+        .map((prop) => prop.markup(updateConfig))}
+    </>
+  );
 }
diff --git a/src/pages/Reel/ReelWidgetSettings.tsx b/src/pages/Reel/ReelWidgetSettings.tsx
index dbf9bbb..6c1248a 100644
--- a/src/pages/Reel/ReelWidgetSettings.tsx
+++ b/src/pages/Reel/ReelWidgetSettings.tsx
@@ -5,7 +5,6 @@ import { log } from "../../logging";
 import classes from "./ReelWidgetSettings.module.css";
 import { useLoaderData } from "react-router";
 import { publish } from "../../socket";
-import Tabs from "../../components/Tabs/Tabs";
 import axios from "axios";
 import { WidgetData } from "../../types/WidgetData";
 
@@ -39,41 +38,10 @@ export default function ReelWidgetSettings({
     });
   }, [config]);
 
-  function updateOption(index: number, value: string) {
-    const updated = optionList.toSpliced(index, 1, value);
-    updateConfig(id, "optionList", updated);
-  }
-
-  function removeOption(index: number) {
-    const updated = optionList.toSpliced(index, 1);
-    updateConfig(id, "optionList", updated);
-  }
-
   function getRndInteger(min: number, max: number): number {
     return Math.floor(Math.random() * (max - min)) + min;
   }
 
-  function uploadFile(file) {
-    return axios.put(
-      `${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${file.name}`,
-      { file: file },
-      {
-        headers: {
-          "Content-Type": "multipart/form-data",
-        },
-      },
-    );
-  }
-
-  const handleBackgroundImageChange = (e: ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) {
-      const file = e.target.files[0];
-      uploadFile(file).then((ignore) => {
-        updateConfig(id, "backgroundImage", file.name);
-      });
-    }
-  };
-
   function runReel() {
     const choosenIndex = getRndInteger(0, optionList.length - 1);
     publish(conf.topic.reel, {
@@ -91,68 +59,7 @@ export default function ReelWidgetSettings({
       >
         Крутануть
       </button>
-      <BaseSettings
-        id={id}
-        onChange={onChange}
-        propertyFilter={(prop) => true}
-      />
-      {(
-        <>
-          <div className="widget-settings-item">
-            <label className="widget-settings-name">Призы</label>
-            <div className={classes.optionscontainer}>
-              {optionList &&
-                optionList.map((option, number) => (
-                  <>
-                    <div className={classes.option}>
-                      <textarea
-                        key={number}
-                        value={option}
-                        className="widget-settings-value"
-                        style={{ width: "100%" }}
-                        onChange={(e) => updateOption(number, e.target.value)}
-                      />
-                      <button
-                        className="widget-button"
-                        onClick={() => {
-                          removeOption(number);
-                        }}
-                      >
-                        <span className="material-symbols-sharp">delete</span>
-                      </button>
-                    </div>
-                  </>
-                ))}
-              <div className={classes.addbuttoncontainer}>
-                <button
-                  className="widget-button"
-                  style={{ width: "100%" }}
-                  onClick={() => {
-                    setOptionList((oldList) => {
-                      oldList.push("");
-                      return structuredClone(oldList);
-                    });
-                  }}
-                >
-                  Добавить
-                </button>
-              </div>
-            </div>
-          </div>
-          <div className={`${classes.itembackcontainer}`}>
-            <div className={`${classes.itembacklabel}`}>Фон карточек</div>
-            <label className={`upload-button ${classes.itembackuploadbutton}`}>
-              <input type="file" onChange={handleBackgroundImageChange} />
-              Загрузить изображение
-            </label>
-          </div>
-          {backgroundImage && (
-            <img className={`${classes.backgroundimage}`}
-              src={`${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${backgroundImage}`}
-            />
-          )}
-        </>
-      )}
+      <BaseSettings id={id}/>
     </>
   );
 }