Fix show full date insted of date with toolip in orders (#3149)

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)}>
+                    <div>
                       <ReactMoment from={currentDate} locale={locale} tz={tz}>
                         {date}
                       </ReactMoment>
+                    </div>
                   </Tooltip>
                 )
               }

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>

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}>

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 />
                   )}

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" }} />

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 />
                   )}

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" }} />

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

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;

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}
                 />

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 />
                 )}

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,