feat(greeting): Ability to create, edit and remove custom events

src/features/greeting/Greeting.jsx

@@ -5,7 +5,6 @@ import { nth, convertTimezone } from 'utils/date';
 import EventBus from 'utils/eventbus';
 
 import './greeting.scss';
-import events from './events.json';
 
 const isEventsEnabled = localStorage.getItem('events') !== 'false';
 export default class Greeting extends PureComponent {
@@ -34,7 +33,10 @@ export default class Greeting extends PureComponent {
     const month = time.getMonth();
     const date = time.getDate();
 
-    const event = events.find((e) => e.month - 1 === month && e.date === date);
+    // Parse the customEvents from localStorage
+    const customEvents = JSON.parse(localStorage.getItem('customEvents') || '[]');
+
+    const event = customEvents.find((e) => e.month - 1 === month && e.date === date);
     if (event) {
       message = variables.getMessage(event.id);
     }

src/features/greeting/options/GreetingOptions.jsx

@@ -77,6 +77,20 @@ const GreetingOptions = () => {
     setCustomEvents(defaultEvents);
   }
 
+  function updateEvent(index, updatedEvent) {
+    // Update the event in your state
+    setCustomEvents((prevEvents) => {
+      const newEvents = [...prevEvents];
+      newEvents[index] = updatedEvent;
+      return newEvents;
+    });
+
+    // Update the event in localStorage
+    const customEvents = JSON.parse(localStorage.getItem('customEvents') || '[]');
+    customEvents[index] = updatedEvent;
+    localStorage.setItem('customEvents', JSON.stringify(customEvents));
+  }
+
   const AdditionalOptions = () => {
     return (
       <Row final={true}>
@@ -158,7 +172,10 @@ const GreetingOptions = () => {
                   <TextareaAutosize
                     value={event.name}
                     placeholder="Event Name"
-                    onChange={(e) => this.message(e, true, index)}
+                    onChange={(e) => {
+                      const updatedEvent = { ...event, name: e.target.value };
+                      updateEvent(index, updatedEvent);
+                    }}
                     varient="outlined"
                     style={{ padding: '0' }}
                   />
@@ -168,11 +185,27 @@ const GreetingOptions = () => {
                 <div className="messageAction">
                   <div className="eventDateControl">
                     <label>Month</label>
-                    <input id="number" type="number" value={event.month} />
+                    <input
+                      id="month"
+                      type="number"
+                      value={event.month}
+                      onChange={(e) => {
+                        const updatedEvent = { ...event, month: parseInt(e.target.value, 10) };
+                        updateEvent(index, updatedEvent);
+                      }}
+                    />
                   </div>
                   <div className="eventDateControl">
                     <label>Day</label>
-                    <input id="number" type="number" value={event.date} />
+                    <input
+                      id="day"
+                      type="number"
+                      value={event.date}
+                      onChange={(e) => {
+                        const updatedEvent = { ...event, date: parseInt(e.target.value, 10) };
+                        updateEvent(index, updatedEvent);
+                      }}
+                    />
                   </div>
                   <Button
                     type="settings"

src/utils/data/default_settings.json

@@ -273,6 +273,6 @@
   },
   {
     "name": "customEvents",
-    "value": "[]"
+    "value": "[{\"id\":\"widgets.greeting.christmas\",\"name\":\"Merry Christmas\",\"month\":12,\"date\":25},{\"id\":\"widgets.greeting.newyear\",\"name\":\"Happy New Year\",\"month\":1,\"date\":1},{\"id\":\"widgets.greeting.halloween\",\"name\":\"Happy Halloween\",\"month\":10,\"date\":31},{\"id\":\"widgets.greeting.halloween\",\"name\":\"\",\"month\":10,\"date\":31}]"
   }
 ]