From 15a0b812a6bcc5e5ea9d02e23d4b499388176aac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <chyla1988@gmail.com>
Date: Mon, 13 Feb 2023 10:40:05 +0100
Subject: [PATCH] Fix show full date insted of date with toolip in orders 
 (#3149)

---
 src/components/Date/DateTime.tsx                 |  8 +++++---
 src/components/Timeline/TimelineEvent.tsx        |  8 ++++++--
 src/components/Timeline/TimelineEventHeader.tsx  |  9 ++++++---
 .../components/CustomerOrders/CustomerOrders.tsx |  2 +-
 .../OrderDetailsPage/OrderDetailsPage.tsx        |  2 +-
 .../components/OrderDraftList/OrderDraftList.tsx |  2 +-
 .../components/OrderDraftPage/OrderDraftPage.tsx |  2 +-
 .../OrderHistory/ExtendedTimelineEvent.tsx       |  9 ++++++++-
 .../OrderHistory/LinkedTimelineEvent.tsx         | 14 ++++++++++++--
 .../components/OrderHistory/OrderHistory.tsx     |  6 +++++-
 src/orders/components/OrderList/OrderList.tsx    | 16 ++++++----------
 vite.config.js                                   |  5 ++++-
 12 files changed, 56 insertions(+), 27 deletions(-)

diff --git a/src/components/Date/DateTime.tsx b/src/components/Date/DateTime.tsx
index 9cbd0e79a..fc9e08759 100644
--- a/src/components/Date/DateTime.tsx
+++ b/src/components/Date/DateTime.tsx
@@ -32,9 +32,11 @@ export const DateTime: React.FC<DateTimeProps> = ({ date, plain }) => {
                   getTitle(date, locale, tz)
                 ) : (
                   <Tooltip title={getTitle(date, locale, tz)}>
-                    <ReactMoment from={currentDate} locale={locale} tz={tz}>
-                      {date}
-                    </ReactMoment>
+                    <div>
+                      <ReactMoment from={currentDate} locale={locale} tz={tz}>
+                        {date}
+                      </ReactMoment>
+                    </div>
                   </Tooltip>
                 )
               }
diff --git a/src/components/Timeline/TimelineEvent.tsx b/src/components/Timeline/TimelineEvent.tsx
index 6c434790d..b54cb5acd 100644
--- a/src/components/Timeline/TimelineEvent.tsx
+++ b/src/components/Timeline/TimelineEvent.tsx
@@ -48,7 +48,7 @@ const useStyles = makeStyles(
       "&> .MuiAccordionSummary-expandIcon": {
         padding: 0,
         position: "absolute",
-        right: theme.spacing(20),
+        right: theme.spacing(24),
       },
       margin: 0,
       minHeight: 0,
@@ -81,10 +81,12 @@ export interface TimelineEventProps {
   secondaryTitle?: string;
   title?: React.ReactNode;
   titleElements?: TitleElement[];
+  hasPlainDate?: boolean;
 }
 
 export const TimelineEvent: React.FC<TimelineEventProps> = props => {
-  const { children, date, secondaryTitle, title, titleElements } = props;
+  const { children, date, secondaryTitle, title, titleElements, hasPlainDate } =
+    props;
 
   const classes = useStyles(props);
 
@@ -98,6 +100,7 @@ export const TimelineEvent: React.FC<TimelineEventProps> = props => {
               title={title}
               date={date}
               titleElements={titleElements}
+              hasPlainDate={hasPlainDate}
             />
           </AccordionSummary>
           <AccordionDetails>
@@ -110,6 +113,7 @@ export const TimelineEvent: React.FC<TimelineEventProps> = props => {
           titleElements={titleElements}
           secondaryTitle={secondaryTitle}
           date={date}
+          hasPlainDate={hasPlainDate}
         />
       )}
     </div>
diff --git a/src/components/Timeline/TimelineEventHeader.tsx b/src/components/Timeline/TimelineEventHeader.tsx
index d19a8d661..93722e2cc 100644
--- a/src/components/Timeline/TimelineEventHeader.tsx
+++ b/src/components/Timeline/TimelineEventHeader.tsx
@@ -47,10 +47,13 @@ export interface TimelineEventHeaderProps {
   date: string;
   titleElements?: TitleElement[];
   secondaryTitle?: string;
+  hasPlainDate?: boolean;
 }
 
-export const TimelineEventHeader: React.FC<TimelineEventHeaderProps> = props => {
-  const { title, date, titleElements, secondaryTitle } = props;
+export const TimelineEventHeader: React.FC<
+  TimelineEventHeaderProps
+> = props => {
+  const { title, date, titleElements, secondaryTitle, hasPlainDate } = props;
   const navigate = useNavigator();
 
   const classes = useStyles(props);
@@ -79,7 +82,7 @@ export const TimelineEventHeader: React.FC<TimelineEventHeaderProps> = props =>
         </div>
       )}
       <Typography className={classes.date}>
-        <DateTime date={date} />
+        <DateTime date={date} plain={hasPlainDate} />
       </Typography>
       {secondaryTitle && (
         <Typography className={classes.secondaryTitle}>
diff --git a/src/customers/components/CustomerOrders/CustomerOrders.tsx b/src/customers/components/CustomerOrders/CustomerOrders.tsx
index a81bb99bd..d1413cd92 100644
--- a/src/customers/components/CustomerOrders/CustomerOrders.tsx
+++ b/src/customers/components/CustomerOrders/CustomerOrders.tsx
@@ -114,7 +114,7 @@ const CustomerOrders: React.FC<CustomerOrdersProps> = props => {
                 </TableCell>
                 <TableCell>
                   {maybe(() => order.created) ? (
-                    <DateTime date={order.created} />
+                    <DateTime date={order.created} plain />
                   ) : (
                     <Skeleton />
                   )}
diff --git a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
index 164ff1902..88e6be24c 100644
--- a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
+++ b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
@@ -238,7 +238,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
             <div className={classes.date}>
               {order && order.created ? (
                 <Typography variant="body2">
-                  <DateTime date={order.created} />
+                  <DateTime date={order.created} plain />
                 </Typography>
               ) : (
                 <Skeleton style={{ width: "10em" }} />
diff --git a/src/orders/components/OrderDraftList/OrderDraftList.tsx b/src/orders/components/OrderDraftList/OrderDraftList.tsx
index abcc6e42a..491a606cb 100644
--- a/src/orders/components/OrderDraftList/OrderDraftList.tsx
+++ b/src/orders/components/OrderDraftList/OrderDraftList.tsx
@@ -189,7 +189,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
                 </TableCell>
                 <TableCell className={classes.colDate}>
                   {maybe(() => order.created) ? (
-                    <DateTime date={order.created} />
+                    <DateTime date={order.created} plain />
                   ) : (
                     <Skeleton />
                   )}
diff --git a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
index ed45d3749..2274ba79d 100644
--- a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
+++ b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
@@ -109,7 +109,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
       <div className={classes.date}>
         {order && order.created ? (
           <Typography variant="body2">
-            <DateTime date={order.created} />
+            <DateTime date={order.created} plain />
           </Typography>
         ) : (
           <Skeleton style={{ width: "10em" }} />
diff --git a/src/orders/components/OrderHistory/ExtendedTimelineEvent.tsx b/src/orders/components/OrderHistory/ExtendedTimelineEvent.tsx
index 1e7c28674..89fe174da 100644
--- a/src/orders/components/OrderHistory/ExtendedTimelineEvent.tsx
+++ b/src/orders/components/OrderHistory/ExtendedTimelineEvent.tsx
@@ -142,11 +142,13 @@ export const messages = defineMessages({
 interface ExtendedTimelineEventProps {
   event: OrderEventFragment;
   orderCurrency: string;
+  hasPlainDate?: boolean;
 }
 
 const ExtendedTimelineEvent: React.FC<ExtendedTimelineEventProps> = ({
   event,
   orderCurrency,
+  hasPlainDate,
 }) => {
   const {
     id,
@@ -216,7 +218,12 @@ const ExtendedTimelineEvent: React.FC<ExtendedTimelineEventProps> = ({
   }
 
   return (
-    <TimelineEvent date={date} titleElements={selectTitleElements()} key={id}>
+    <TimelineEvent
+      date={date}
+      titleElements={selectTitleElements()}
+      key={id}
+      hasPlainDate={hasPlainDate}
+    >
       {lines && (
         <>
           <Label
diff --git a/src/orders/components/OrderHistory/LinkedTimelineEvent.tsx b/src/orders/components/OrderHistory/LinkedTimelineEvent.tsx
index 81b787d68..ff5671d4f 100644
--- a/src/orders/components/OrderHistory/LinkedTimelineEvent.tsx
+++ b/src/orders/components/OrderHistory/LinkedTimelineEvent.tsx
@@ -35,9 +35,13 @@ export const discountRemovedMessages = defineMessages({
 
 interface LinkedTimelineEventProps {
   event: OrderEventFragment;
+  hasPlainDate?: boolean;
 }
 
-const LinkedTimelineEvent: React.FC<LinkedTimelineEventProps> = ({ event }) => {
+const LinkedTimelineEvent: React.FC<LinkedTimelineEventProps> = ({
+  event,
+  hasPlainDate,
+}) => {
   const intl = useIntl();
 
   const getTitleElements = (): TitleElement[] => {
@@ -79,7 +83,13 @@ const LinkedTimelineEvent: React.FC<LinkedTimelineEventProps> = ({ event }) => {
     }
   };
 
-  return <TimelineEvent titleElements={getTitleElements()} date={event.date} />;
+  return (
+    <TimelineEvent
+      titleElements={getTitleElements()}
+      date={event.date}
+      hasPlainDate={hasPlainDate}
+    />
+  );
 };
 
 export default LinkedTimelineEvent;
diff --git a/src/orders/components/OrderHistory/OrderHistory.tsx b/src/orders/components/OrderHistory/OrderHistory.tsx
index a67023d33..4bc86a27b 100644
--- a/src/orders/components/OrderHistory/OrderHistory.tsx
+++ b/src/orders/components/OrderHistory/OrderHistory.tsx
@@ -99,17 +99,21 @@ const OrderHistory: React.FC<OrderHistoryProps> = props => {
                   <ExtendedTimelineEvent
                     event={event}
                     orderCurrency={orderCurrency}
+                    hasPlainDate={true}
                   />
                 );
               }
 
               if (isTimelineEventOfType("linked", type)) {
-                return <LinkedTimelineEvent event={event} key={id} />;
+                return (
+                  <LinkedTimelineEvent event={event} key={id} hasPlainDate />
+                );
               }
 
               return (
                 <TimelineEvent
                   {...getTimelineEventTitleProps(event)}
+                  hasPlainDate
                   key={id}
                   date={date}
                 />
diff --git a/src/orders/components/OrderList/OrderList.tsx b/src/orders/components/OrderList/OrderList.tsx
index 06a5fbb4d..6a674252a 100644
--- a/src/orders/components/OrderList/OrderList.tsx
+++ b/src/orders/components/OrderList/OrderList.tsx
@@ -55,7 +55,9 @@ const useStyles = makeStyles(
         ...overflowing,
       },
       colCustomer: overflowing,
-      colDate: {},
+      colDate: {
+        padding: theme.spacing(0, 3),
+      },
       colFulfillment: {},
       colNumber: {},
       colPayment: {},
@@ -77,14 +79,8 @@ interface OrderListProps extends ListProps, SortPage<OrderListUrlSortField> {
 const numberOfColumns = 6;
 
 export const OrderList: React.FC<OrderListProps> = props => {
-  const {
-    disabled,
-    settings,
-    orders,
-    onUpdateListSettings,
-    onSort,
-    sort,
-  } = props;
+  const { disabled, settings, orders, onUpdateListSettings, onSort, sort } =
+    props;
   const classes = useStyles(props);
 
   const intl = useIntl();
@@ -203,7 +199,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
               </TableCell>
               <TableCell className={classes.colDate}>
                 {maybe(() => order.created) ? (
-                  <DateTime date={order.created} />
+                  <DateTime date={order.created} plain />
                 ) : (
                   <Skeleton />
                 )}
diff --git a/vite.config.js b/vite.config.js
index 2ea1b95e6..eadfd0ea2 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -183,7 +183,10 @@ export default defineConfig(({ command, mode }) => {
           Vite resolves it by using jsnext:main https://github.com/moment/moment/blob/develop/package.json#L26.
           We enforce to use a different path, ignoring jsnext:main field.
         */
-        moment: path.resolve(__dirname, "./node_modules/moment/moment.js"),
+        moment: path.resolve(
+          __dirname,
+          "./node_modules/moment/min/moment-with-locales.js",
+        ),
       },
     },
     plugins,