From ad11c733cccf1ed7a8e6d9ce403e9b2bbd6ce854 Mon Sep 17 00:00:00 2001
From: stCarolas <stcarolas@gmail.com>
Date: Tue, 25 Jun 2024 16:19:12 +0300
Subject: [PATCH] add update to new font for donationgoal

---
 .../widgetproperties/AnimatedFontProperty.tsx | 10 ++-
 .../DonationGoalWidgetSettings.tsx            | 70 ++++---------------
 src/components/DonationGoal/DonationGoal.tsx  | 45 ++++++------
 3 files changed, 45 insertions(+), 80 deletions(-)

diff --git a/src/components/ConfigurationPage/widgetproperties/AnimatedFontProperty.tsx b/src/components/ConfigurationPage/widgetproperties/AnimatedFontProperty.tsx
index 5d425f0..69e6b8e 100644
--- a/src/components/ConfigurationPage/widgetproperties/AnimatedFontProperty.tsx
+++ b/src/components/ConfigurationPage/widgetproperties/AnimatedFontProperty.tsx
@@ -31,11 +31,14 @@ const animations = [
 ];
 
 export class AnimatedFontProperty extends DefaultWidgetProperty {
+  private _label: string;
+
   constructor(params: {
     widgetId: string;
     name: string;
     value?: any;
-    tab?: string | undefined;
+    tab?: string;
+    label?: string;
   }) {
     super(
       params.widgetId,
@@ -58,6 +61,8 @@ export class AnimatedFontProperty extends DefaultWidgetProperty {
       "",
       params.tab,
     );
+    this._label = params.label ??  "widget-font-label";
+    console.log(this._label);
   }
 
   copy() {
@@ -66,6 +71,7 @@ export class AnimatedFontProperty extends DefaultWidgetProperty {
       name: this.name,
       value: this.value,
       tab: this.tab,
+      label: this._label
     });
   }
 
@@ -115,7 +121,7 @@ export class AnimatedFontProperty extends DefaultWidgetProperty {
         {this.createFontImport()}
         <div className="widget-settings-item">
           <label className="widget-settings-name">
-            {t("widget-font-label")}
+            {t(this._label)}
           </label>
           <button
             className={`${classes.button} oda-btn-default`}
diff --git a/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.tsx b/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.tsx
index d95ca31..3b8da1f 100644
--- a/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.tsx
+++ b/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.tsx
@@ -1,13 +1,10 @@
-import {
-  DonationGoalProperty,
-} from "../widgetproperties/DonationGoalProperty";
+import { DonationGoalProperty } from "../widgetproperties/DonationGoalProperty";
 import { WidgetProperty } from "../widgetproperties/WidgetProperty";
 import { AbstractWidgetSettings } from "./AbstractWidgetSettings";
-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";
+import { AnimatedFontProperty } from "../widgetproperties/AnimatedFontProperty";
 
 export class DonationGoalWidgetSettings extends AbstractWidgetSettings {
   constructor(widgetId: string, properties: WidgetProperty[]) {
@@ -18,30 +15,12 @@ export class DonationGoalWidgetSettings extends AbstractWidgetSettings {
       widgetId,
       properties,
       [
-        new FontProperty(
-          widgetId,
-          "titleFont",
-          "fontselect",
-          "Alice",
-          "widget-donationgoal-title-font-family",
-          "header",
-        ),
-        new NumberProperty(
-          widgetId,
-          "titleFontSize",
-          "number",
-          "24",
-          "widget-donationgoal-title-font-size",
-          "header",
-        ),
-        new ColorProperty(
-          widgetId,
-          "titleColor",
-          "color",
-          "#000000",
-          "widget-donationgoal-title-color",
-          "header",
-        ),
+        new AnimatedFontProperty({
+          widgetId: widgetId,
+          name: "descriptionFont",
+          tab: "header",
+          label: "widget-donationgoal-title-font-family"
+        }),
         new SingleChoiceProperty(
           widgetId,
           "titleTextAlign",
@@ -51,30 +30,12 @@ export class DonationGoalWidgetSettings extends AbstractWidgetSettings {
           ["left", "center", "right"],
           "header",
         ),
-        new FontProperty(
-          widgetId,
-          "filledFont",
-          "fontselect",
-          "Russo One",
-          "widget-donationgoal-amount-font-family",
-          "header",
-        ),
-        new NumberProperty(
-          widgetId,
-          "filledFontSize",
-          "number",
-          "24",
-          "widget-donationgoal-amount-font-size",
-          "header",
-        ),
-        new ColorProperty(
-          widgetId,
-          "filledTextColor",
-          "color",
-          "#ffffff",
-          "widget-donationgoal-amount-color",
-          "header",
-        ),
+        new AnimatedFontProperty({
+          widgetId: widgetId,
+          name: "amountFont",
+          tab: "header",
+          label: "widget-donationgoal-amount-font-family"
+        }),
         new ColorProperty(
           widgetId,
           "backgroundColor",
@@ -106,7 +67,7 @@ export class DonationGoalWidgetSettings extends AbstractWidgetSettings {
           "predefined",
           "<collected> / <required> <currency>",
           "widget-donationgoal-label-template",
-          "header"
+          "header",
         ),
         new DonationGoalProperty(widgetId),
       ],
@@ -117,5 +78,4 @@ export class DonationGoalWidgetSettings extends AbstractWidgetSettings {
   copy() {
     return new DonationGoalWidgetSettings(this.widgetId, this.properties);
   }
-
 }
diff --git a/src/components/DonationGoal/DonationGoal.tsx b/src/components/DonationGoal/DonationGoal.tsx
index 23e09b8..fa62744 100644
--- a/src/components/DonationGoal/DonationGoal.tsx
+++ b/src/components/DonationGoal/DonationGoal.tsx
@@ -13,6 +13,8 @@ import { findSetting } from "../utils";
 import { PaymentPageConfig } from "../MediaWidget/PaymentPageConfig";
 import { Goal } from "../ConfigurationPage/widgetproperties/DonationGoalProperty";
 import FontImport from "../FontImport/FontImport";
+import { produce } from "immer";
+import { AnimatedFontProperty } from "../ConfigurationPage/widgetproperties/AnimatedFontProperty";
 
 export default function DonationGoal({}) {
   const { recipientId, settings, conf, widgetId } =
@@ -56,22 +58,25 @@ export default function DonationGoal({}) {
       );
   }, [recipientId]);
 
-  const fontSize = findSetting(settings, "titleFontSize", "24");
-  const font = findSetting(settings, "titleFont", "Alice");
-  const textColor = findSetting(settings, "titleColor", "black");
+  const titleFont = new AnimatedFontProperty({
+    widgetId: widgetId,
+    name: "descriptionFont",
+    value: findSetting(settings, "descriptionFont", null)
+  });
+  const amountFont = new AnimatedFontProperty({
+    widgetId: widgetId,
+    name: "amountFont",
+    value: findSetting(settings, "amountFont", null)
+  });
   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",
-    fontWeight: 600,
-    textAlign: titleTextAlign,
-    color: textColor,
-  };
+  const textStyle = produce(titleFont.calcStyle(),(draft) => {
+    draft.textAlign = titleTextAlign;
+  });
 
   const backgroundColor = findSetting(settings, "backgroundColor", "lightgray");
   const progressbarStyle = {
@@ -79,9 +84,6 @@ export default function DonationGoal({}) {
   };
 
   const filledColor = findSetting(settings, "filledColor", "green");
-  const filledTextColor = findSetting(settings, "filledTextColor", "white");
-  const filledFontSize = findSetting(settings, "filledFontSize", "24");
-  const filledFont = findSetting(settings, "filledFont", "Russo One");
   let filledTextAlign = findSetting(settings, "filledTextAlign", "left");
   switch (filledTextAlign) {
     case "left":
@@ -91,21 +93,18 @@ export default function DonationGoal({}) {
       filledTextAlign = "flex-end";
       break;
   }
-  const filledTextStyle = {
-    fontSize: filledFontSize ? filledFontSize + "px" : "unset",
-    fontFamily: filledFont ? filledFont : "unset",
-    color: filledTextColor,
-    justifyContent: filledTextAlign,
-  };
+  const filledTextStyle = produce(amountFont.calcStyle(),(draft) => {
+    draft.justifyContent = filledTextAlign;
+  });
 
   return (
     <>
-      <FontImport font={font} />
-      <FontImport font={filledFont} />
+      {amountFont.createFontImport()}
+      {titleFont.createFontImport()}
       {goals.map((goal) => (
         <>
           <div className={`${classes.goalitem}`}>
-            <div style={textStyle} className={`${classes.goaldescription}`}>
+            <div style={textStyle} className={`${classes.goaldescription} ${titleFont.calcClassName()}`}>
               {goal.briefDescription}
             </div>
             <div
@@ -122,7 +121,7 @@ export default function DonationGoal({}) {
               }}
               className={`${classes.goalfilled}`}
             ></div>
-            <div style={filledTextStyle} className={`${classes.goalamount}`}>
+            <div style={filledTextStyle} className={`${classes.goalamount} ${amountFont.calcClassName()}`}>
               {labelTemplate
                 .replaceAll("<collected>", goal.accumulatedAmount.major)
                 .replaceAll("<required>", goal.requiredAmount.major)