add label template to donation goal widget

OpenDonationAssistant · Jun 19, 2024 · 794df0f · 794df0f
1 parent 16da4f9
commit 794df0f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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":"Сумма",