From 08d2039ce3b981c22c5491e3fe955722e47f3e90 Mon Sep 17 00:00:00 2001
From: Jan Jakes <jan.jakes@automattic.com>
Date: Thu, 20 Apr 2023 07:45:38 +0200
Subject: [PATCH] Render datetime values

[MAILPOET-5000]
---
 .../editor/components/filters/value.tsx       | 49 ++++++++++++++++++-
 .../js/src/automation/editor/store/types.ts   |  9 +++-
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/mailpoet/assets/js/src/automation/editor/components/filters/value.tsx b/mailpoet/assets/js/src/automation/editor/components/filters/value.tsx
index 17e22d412d..ce9e3c211e 100644
--- a/mailpoet/assets/js/src/automation/editor/components/filters/value.tsx
+++ b/mailpoet/assets/js/src/automation/editor/components/filters/value.tsx
@@ -1,9 +1,14 @@
 import { __ } from '@wordpress/i18n';
 import { select } from '@wordpress/data';
+import { getSettings, dateI18n } from '@wordpress/date';
 import { Filter } from '../automation/types';
 import { storeName } from '../../store';
 
-const getValue = ({ field_key, args }: Filter): string | undefined => {
+const getValue = ({
+  field_key,
+  args,
+  condition,
+}: Filter): string | undefined => {
   const field = select(storeName).getRegistry().fields[field_key];
   switch (field?.type) {
     case 'boolean':
@@ -18,6 +23,48 @@ const getValue = ({ field_key, args }: Filter): string | undefined => {
         : args.value.toString();
     case 'string':
       return args.value as string;
+    case 'datetime': {
+      if (args.value === undefined) {
+        return undefined;
+      }
+
+      const settings = getSettings();
+
+      // in-the-last/not-in-the-last
+      if (
+        ['in-the-last', 'not-in-the-last'].includes(condition) &&
+        typeof args.value === 'object' &&
+        'number' in args.value &&
+        'unit' in args.value
+      ) {
+        return `${args.value.number as number} ${
+          {
+            days: __('days', 'mailpoet'),
+            weeks: __('weeks', 'mailpoet'),
+            months: __('months', 'mailpoet'),
+          }[args.value.unit as string] ?? __('unknown unit', 'mailpoet')
+        }`;
+      }
+
+      // on-the-days-of-the-week
+      if (condition === 'on-the-days-of-the-week') {
+        return (Array.isArray(args.value) ? args.value : [])
+          .map(
+            (day: number) =>
+              (settings.l10n.weekdays[day] as string) ??
+              __('unknown day', 'mailpoet'),
+          )
+          .join(', ');
+      }
+
+      const isDate = condition === 'on' || condition === 'not-on';
+
+      return dateI18n(
+        isDate ? settings.formats.date : settings.formats.datetime,
+        args.value as string,
+        settings.timezone.string,
+      );
+    }
     case 'enum':
     case 'enum_array': {
       const options = (field.args.options ?? []) as {
diff --git a/mailpoet/assets/js/src/automation/editor/store/types.ts b/mailpoet/assets/js/src/automation/editor/store/types.ts
index e48bd15a79..a363f76573 100644
--- a/mailpoet/assets/js/src/automation/editor/store/types.ts
+++ b/mailpoet/assets/js/src/automation/editor/store/types.ts
@@ -36,7 +36,14 @@ export type Registry = {
     string,
     {
       key: string;
-      type: 'boolean' | 'number' | 'integer' | 'string' | 'enum' | 'enum_array';
+      type:
+        | 'boolean'
+        | 'number'
+        | 'integer'
+        | 'string'
+        | 'datetime'
+        | 'enum'
+        | 'enum_array';
       name: string;
       args: Record<string, unknown>;
     }