From 794df0fea7a56b97f93c0fb231ab8c00dd4743a5 Mon Sep 17 00:00:00 2001
From: stCarolas <stcarolas@gmail.com>
Date: Wed, 19 Jun 2024 23:36:36 +0300
Subject: [PATCH] add label template to donation goal widget

---
 .../DonationGoalWidgetSettings.tsx            |  9 ++++++++
 src/components/DonationGoal/DonationGoal.tsx  | 21 +++++++++++++++----
 src/i18n.js                                   |  2 ++
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.tsx b/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.tsx
index 954a14e..d95ca31 100644
--- a/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.tsx
+++ b/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.tsx
@@ -7,6 +7,7 @@ import { FontProperty } from "../widgetproperties/FontProperty";
 import { NumberProperty } from "../widgetproperties/NumberProperty";
 import { ColorProperty } from "../widgetproperties/ColorProperty";
 import { SingleChoiceProperty } from "../widgetproperties/SingleChoiceProperty";
+import { TextProperty } from "../widgetproperties/TextProperty";
 
 export class DonationGoalWidgetSettings extends AbstractWidgetSettings {
   constructor(widgetId: string, properties: WidgetProperty[]) {
@@ -99,6 +100,14 @@ export class DonationGoalWidgetSettings extends AbstractWidgetSettings {
           ["left", "center", "right"],
           "header",
         ),
+        new TextProperty(
+          widgetId,
+          "labelTemplate",
+          "predefined",
+          "<collected> / <required> <currency>",
+          "widget-donationgoal-label-template",
+          "header"
+        ),
         new DonationGoalProperty(widgetId),
       ],
       tabs,
diff --git a/src/components/DonationGoal/DonationGoal.tsx b/src/components/DonationGoal/DonationGoal.tsx
index c9ea0bb..a34d6fe 100644
--- a/src/components/DonationGoal/DonationGoal.tsx
+++ b/src/components/DonationGoal/DonationGoal.tsx
@@ -60,6 +60,11 @@ export default function DonationGoal({}) {
   const font = findSetting(settings, "titleFont", "Alice");
   const textColor = findSetting(settings, "titleColor", "black");
   const titleTextAlign = findSetting(settings, "titleTextAlign", "left");
+  const labelTemplate = findSetting(
+    settings,
+    "labelTemplate",
+    "<collected> / <required> <currency>",
+  );
   const textStyle = {
     fontSize: fontSize ? fontSize + "px" : "unset",
     fontFamily: font ? font : "unset",
@@ -78,7 +83,7 @@ export default function DonationGoal({}) {
   const filledFontSize = findSetting(settings, "filledFontSize", "24");
   const filledFont = findSetting(settings, "filledFont", "Russo One");
   let filledTextAlign = findSetting(settings, "filledTextAlign", "left");
-  switch(filledTextAlign){
+  switch (filledTextAlign) {
     case "left":
       filledTextAlign = "flex-start";
       break;
@@ -90,7 +95,7 @@ export default function DonationGoal({}) {
     fontSize: filledFontSize ? filledFontSize + "px" : "unset",
     fontFamily: filledFont ? filledFont : "unset",
     color: filledTextColor,
-    justifyContent: filledTextAlign
+    justifyContent: filledTextAlign,
   };
 
   return (
@@ -104,7 +109,7 @@ export default function DonationGoal({}) {
               {goal.briefDescription}
             </div>
             <div
-              style={ progressbarStyle }
+              style={progressbarStyle}
               className={`${classes.goalprogressbar}`}
             ></div>
             <div
@@ -118,7 +123,15 @@ export default function DonationGoal({}) {
               className={`${classes.goalfilled}`}
             ></div>
             <div style={filledTextStyle} className={`${classes.goalamount}`}>
-              {goal.accumulatedAmount.major} / {goal.requiredAmount.major} RUB
+              {labelTemplate
+                .replaceAll("<collected>", goal.accumulatedAmount.major)
+                .replaceAll("<required>", goal.requiredAmount.major)
+                .replaceAll("<currency>", "RUB")
+                .replaceAll(
+                  "<proportion>",
+                  (goal.accumulatedAmount.major / goal.requiredAmount.major) *
+                    100,
+                )}
             </div>
           </div>
         </>
diff --git a/src/i18n.js b/src/i18n.js
index 73e9303..1b28318 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -108,6 +108,7 @@ i18n
           "widget-donationgoal-background":"Background color",
           "widget-donationgoal-filled-color":"Filled part color",
           "widget-donationgoal-amount-alignment":"Amount alignment",
+          "widget-donationgoal-label-template":"Label template",
           "widget-goal-title":"Title",
           "widget-goal-description":"Description",
           "widget-goal-amount":"Amount",
@@ -236,6 +237,7 @@ i18n
           "widget-donationgoal-background":"Цвет фона полоски",
           "widget-donationgoal-filled-color":"Цвет заполненной части",
           "widget-donationgoal-amount-alignment":"Выравнивание суммы",
+          "widget-donationgoal-label-template":"Шаблон надписи",
           "widget-goal-title":"Название",
           "widget-goal-description":"Описание",
           "widget-goal-amount":"Сумма",