Improved: Order detail page on the open tab (#283) #302

sanskar345 · 2023-09-27T13:46:16Z

Related Issues

Closes #283

Short Description and Why It's Useful

Order detail page enhancement for desktop and mobile view on the open tab.

Screenshots of Visual Changes before/after (If There Are Any)

In desktop -

Before -

After -

In mobile

Before -

After -

Order Rejected Item History Modal -

In desktop -

In mobile -

Report An Issue Modal -

In desktop -

In mobile -

Contribution and Currently Important Rules Acceptance

I read and followed contribution rules

…on the Left, Order Information on the Right, a 'Ready to Pickup' Button () and created component for order rejected item history (hotwax#283)

…x#283)

…nd removed unwanted imports (hotwax#283)

…ode to open order item rejection history modal (hotwax#283)

…odal UI and some code Improvement (hotwax#283)

…button (hotwax#283)

dt2patel

See comments @sanskar345

dt2patel · 2023-09-28T12:06:01Z

src/locales/es.json

@@ -47,6 +47,8 @@
  "Instance Url": "URL de la instancia",
  "In store": "En tienda",
  "Inventory": "Inventario",
+  "If you cannot fulfill this order, will be sent an email and the order item will be removed from your dashboard.": "If you cannot fulfill this order, { customerName } will be sent an email and the order item will be removed from your dashboard.",


I don't think this line is accurate @Dhiraj1405

dt2patel · 2023-09-28T12:08:13Z

src/theme/variables.css

@@ -76,6 +76,23 @@ http://ionicframework.com/docs/theming/ */
  --ion-color-light-tint: #f5f6f9;
 }

+.empty-state {


Why are these added here?

As sir, these styles need to be global as we can have multiple empty states in the app.

yes, but I mean why on this section of the file?

Sir, I thought these styles should be coded at last but before the media query, as the media query is written at last I think.

should I add thses at last??

Did you check where the other custom styles are? I would think they should be grouped together in some kind of sequence. Try that @sanskar345

Okay sir done.

dt2patel · 2023-09-28T12:11:11Z

src/components/OrderInfo.vue

@@ -0,0 +1,132 @@
+<template>
+  <section>
+    <ion-item color="light" lines="none">


Wrong component

Sir, any suggestion regarding this?

dt2patel · 2023-09-28T12:17:25Z

src/views/OrderDetail.vue

-          </ion-button>
-        </ion-item>
+      <main :class="{ 'desktop-only' : isDesktop }">
+        <OrderInfo v-if="!isDesktop" :orderId="$route.params.orderId" />


Is there a way to do this without using order info component twice?

Sir, previously I have tried this approach - 428740b

video of UI -

UI.changes.webm

…n order detail page and removed unnecessary entries in locale files (hotwax#283)

…reated states for the same (hotwax#283)

…of isPlatform of ionic instead used ion-hide class and removed the orderInfo component (hotwax#283)

dt2patel

See comments

dt2patel · 2023-10-04T12:33:28Z

src/views/OrderDetail.vue

+    grid-area: right;
+    /* Order Info section to stay fixed and not scrollable as there can be multiple order items which will increase the grid container size */
+    height: fit-content; 
+    position: sticky;


Doesn't need to be sticky. That will fix your height problem too. Try that to simplify the code

Screencast.from.04-10-23.06.58.07.PM.IST.webm

@dt2patel Sir added sticky because we want order Information to be fixed and the user can scroll through the order items.

Added height because it was taking max height of the grid container

Yes I understand that but it is better for user to scroll the entire page here instead of both elements having different behaviors.

dt2patel · 2023-10-04T12:35:44Z

src/views/OrderDetail.vue

+  }
+
+  aside {
+    grid-area: right;


Suggested change

grid-area: right;

grid-column: 2;

aside { grid-column: 2; grid-row: 1; }

I also have to use the grid-row. If I don't, it places the section (order items) in the second row first col.

For css:

aside { grid-column: 2; }

For css:

aside { grid-column: 2; grid-row: 1; }

dt2patel · 2023-10-04T12:36:12Z

src/views/OrderDetail.vue

+  main {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: 'left right';


Suggested change

grid-template-areas: 'left right';

dt2patel · 2023-10-04T12:36:55Z

src/views/OrderDetail.vue

+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: 'left right';
+    gap: var(--spacer-base);
+    margin: var(--spacer-lg) var(--spacer-lg) 0;


Suggested change

margin: var(--spacer-lg) var(--spacer-lg) 0;

dt2patel · 2023-10-04T12:37:39Z

src/views/OrderDetail.vue

+  section {
+    grid-area: left;
+  }


Suggested change

section {

grid-area: left;

}

… in settings page (hotwax#283)

…on history (hotwax#283)

src/store/modules/util/actions.ts

ymaheshwari1 · 2023-10-06T04:25:15Z

src/components/OrderItemRejHistoryModal.vue

+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list v-for="(history, index) in rejectionHistory" :key="index">


We need to define for loop on the ion-item instead of defining it on ion-list

ymaheshwari1 · 2023-10-06T05:18:22Z

src/store/modules/order/actions.ts

@@ -470,7 +473,7 @@ const actions: ActionTree<OrderState , RootState> ={
    return await dispatch("rejectOrderItems", payload).then((resp) => {
      const refreshPickupOrders = resp.find((response: any) => !(response.data._ERROR_MESSAGE_ || response.data._ERROR_MESSAGE_LIST_))
      if (refreshPickupOrders) {
-        showToast(translate('All items were canceled from the order') + ' ' + payload.orderId);
+        showToast(payload.part.items.length === 1 ? translate('Item has been rejected successfully') : translate('All items were canceled from the order') + ' ' + payload.orderId);


Suggested change

showToast(payload.part.items.length === 1 ? translate('Item has been rejected successfully') : translate('All items were canceled from the order') + ' ' + payload.orderId);

showToast(payload.part.items.length === 1 ? translate('Item has been rejected successfully') : translate('All items were rejected from the order') + ' ' + payload.orderId);

Also check on this condition.

ymaheshwari1 · 2023-10-06T05:35:06Z

src/store/modules/order/actions.ts

@@ -450,6 +450,9 @@ const actions: ActionTree<OrderState , RootState> ={
            }
          })
        }
+        // Mark current order as ready to handover


Update the comment that why we need readyToHandover property on order

ymaheshwari1 · 2023-10-06T05:49:42Z

src/components/ReportAnIssueModal.vue

+  alertController,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonTitle,
+  IonToolbar,
+  modalController,
+  IonRadio,
+  IonRadioGroup


Suggested change

alertController,

IonButton,

IonButtons,

IonContent,

IonFab,

IonFabButton,

IonHeader,

IonIcon,

IonItem,

IonLabel,

IonList,

IonListHeader,

IonTitle,

IonToolbar,

modalController,

IonRadio,

IonRadioGroup

IonButton,

IonButtons,

IonContent,

IonFab,

IonFabButton,

IonHeader,

IonIcon,

IonItem,

IonLabel,

IonList,

IonListHeader,

IonTitle,

IonToolbar,

IonRadio,

IonRadioGroup,

alertController,

modalController,

ymaheshwari1 · 2023-10-06T06:38:40Z

src/views/OrderDetail.vue

-          <ion-item lines="none">
+        <aside>
+          <ion-item v-if="order?.readyToHandover || order?.rejected" color="light" lines="none">
+            <ion-icon :icon="order?.readyToHandover ? checkmarkCircleOutline : order?.rejected ? closeCircleOutline : ''" :color="order?.readyToHandover ? 'success' : order?.rejected ? 'danger' : ''" slot="start" />


There is no need to have the extra check for order.rejected in icon ternary condition as this block will only be displayed when we have readyToHandover or rejected order.
Also, conditional chaining is also not required inside the ion-item.

ymaheshwari1 · 2023-10-06T06:38:58Z

src/views/OrderDetail.vue

+        <aside>
+          <ion-item v-if="order?.readyToHandover || order?.rejected" color="light" lines="none">
+            <ion-icon :icon="order?.readyToHandover ? checkmarkCircleOutline : order?.rejected ? closeCircleOutline : ''" :color="order?.readyToHandover ? 'success' : order?.rejected ? 'danger' : ''" slot="start" />
+            <ion-label class="ion-text-wrap">{{ order?.readyToHandover ? $t("Order is now ready to handover.") : order?.rejected ? $t("Order has been rejected.") : '' }}</ion-label>


Same as above comment.

ymaheshwari1 · 2023-10-06T06:40:02Z

src/views/OrderDetail.vue

-              <h2>{{ order.customer?.name }}</h2>
-              <p>{{ order.orderName ? order.orderName : order.orderId }}</p>
+              <p class="overline">{{ $t("Handling Instructions") }}</p>
+              <p>{{ order?.shippingInstructions }}</p>


Suggested change

<p>{{ order?.shippingInstructions }}</p>

<p>{{ order.shippingInstructions }}</p>

…twax#283)

sanskar345 · 2023-10-09T05:10:02Z

@dt2patel

New UI -

In Desktop:
UI desk.webm

In Mobile:
UI mob.webm

…wax#283

…ng getRejHistory action (hotwax#283)

…otwax#283)

sanskar345 added 7 commits September 20, 2023 18:59

Implemented: Mobile-Responsive Order Detail Page UI with Order Items …

428740b

…on the Left, Order Information on the Right, a 'Ready to Pickup' Button () and created component for order rejected item history (hotwax#283)

Implemented: Order Detail Page UI, inspired by Job Manager app (hotwa…

eb2a5fd

…x#283)

Implemented: alphabatical ordering of export components and imports a…

dda48c5

…nd removed unwanted imports (hotwax#283)

Implemented: option in setting to allow partial order rejection and c…

ba26058

…ode to open order item rejection history modal (hotwax#283)

Implemented: order item rejection history modal and report an issue m…

8b79775

…odal UI and some code Improvement (hotwax#283)

Fixed: error while refreshing order detail page (hotwax#283)

21869d8

Implemented: comment the code to display text below the reject order …

2c85db2

…button (hotwax#283)

sanskar345 requested a review from dt2patel September 27, 2023 13:46

dt2patel requested changes Sep 28, 2023

View reviewed changes

Implemented: logic for showing user the status of the current order i…

68dfd0a

…n order detail page and removed unnecessary entries in locale files (hotwax#283)

sanskar345 requested a review from dt2patel September 29, 2023 12:29

sanskar345 added 6 commits September 29, 2023 19:07

Implemented logic to reject single item in an order (hotwax#283)

2d531d3

Improved: logic to reject single item in an order (hotwax#283)

72c3cf7

Implemented: entries in locale files (hotwax#283)

df0ae34

Improved: code by removing the unwanted lines (hotwax#283)

4f59112

Implemented: logic to fetch orderItemHistory and reject reasons and c…

e997b7c

…reated states for the same (hotwax#283)

Improved: order detail page UI using css grid, removed the the usage …

53d6883

…of isPlatform of ionic instead used ion-hide class and removed the orderInfo component (hotwax#283)

dt2patel requested changes Oct 4, 2023

View reviewed changes

sanskar345 added 3 commits October 4, 2023 18:14

Implemented: entries in locale files for partial order rejection card…

b5b2ca3

… in settings page (hotwax#283)

Implemented: display order item rejection history (hotwax#283)

4c3b8d1

Improved: order detail page css - placing the grid item (hotwax#283)

11273ca

sanskar345 requested a review from dt2patel October 5, 2023 06:02

sanskar345 added 4 commits October 5, 2023 12:43

Implemented: logic to fetch products that exist in order item rejecti…

9826ba9

…on history (hotwax#283)

Improved: reject order alert heading and button label (hotwax#283)

228e81e

Implemented: show alert before rejecting a single item (hotwax#283)

a19a276

Improved: code and indentation (hotwax#283)

4b3e6e0

ymaheshwari1 requested changes Oct 6, 2023

View reviewed changes

sanskar345 added 3 commits October 6, 2023 16:46

Implemented: service to reject a single order item (hotwax#283)

b81152c

Improved: code and removed conditions that are unnecessary (hotwax#283)

3368b32

Improved: the placement of empty states css code in variables.css (ho…

4817eef

…twax#283)

sanskar345 added 3 commits October 11, 2023 10:52

Merge branch 'main' of https://github.com/hotwax/bopis into bopis/hot…

2d32058

…wax#283

Implemented: do not dispatch stock/addProducts action while dispatchi…

2f7a6cb

…ng getRejHistory action (hotwax#283)

Implemented: modal to select reject reason before rejecting an order (h…

a3f2c89

…otwax#283)

sanskar345 requested a review from ymaheshwari1 October 11, 2023 13:19

ymaheshwari1 mentioned this pull request Oct 18, 2023

Improved: UI for order details page(#283) #325

Merged

1 task

ravilodhi merged commit 315ffe0 into hotwax:main Nov 1, 2023
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improved: Order detail page on the open tab (#283) #302

Improved: Order detail page on the open tab (#283) #302

sanskar345 commented Sep 27, 2023

dt2patel left a comment

dt2patel Sep 28, 2023

dt2patel Sep 28, 2023

sanskar345 Sep 28, 2023

dt2patel Sep 28, 2023

sanskar345 Sep 29, 2023 •

edited

Loading

dt2patel Oct 6, 2023

sanskar345 Oct 9, 2023

dt2patel Sep 28, 2023

sanskar345 Sep 29, 2023

dt2patel Sep 28, 2023

sanskar345 Sep 28, 2023 •

edited

Loading

dt2patel left a comment

dt2patel Oct 4, 2023

sanskar345 Oct 4, 2023 •

edited

Loading

dt2patel Oct 6, 2023

sanskar345 Oct 6, 2023

dt2patel Oct 4, 2023

sanskar345 Oct 5, 2023

dt2patel Oct 4, 2023

dt2patel Oct 4, 2023

dt2patel Oct 4, 2023

ymaheshwari1 Oct 6, 2023

ymaheshwari1 Oct 6, 2023

ymaheshwari1 Oct 6, 2023

ymaheshwari1 Oct 6, 2023

ymaheshwari1 Oct 6, 2023

ymaheshwari1 Oct 6, 2023

ymaheshwari1 Oct 6, 2023

ymaheshwari1 Oct 6, 2023

sanskar345 commented Oct 9, 2023 •

edited

Loading

	showToast(payload.part.items.length === 1 ? translate('Item has been rejected successfully') : translate('All items were canceled from the order') + ' ' + payload.orderId);
	showToast(payload.part.items.length === 1 ? translate('Item has been rejected successfully') : translate('All items were rejected from the order') + ' ' + payload.orderId);

	<p>{{ order?.shippingInstructions }}</p>
	<p>{{ order.shippingInstructions }}</p>

Improved: Order detail page on the open tab (#283) #302

Improved: Order detail page on the open tab (#283) #302

Conversation

sanskar345 commented Sep 27, 2023

Related Issues

Short Description and Why It's Useful

Screenshots of Visual Changes before/after (If There Are Any)

In desktop -

In mobile

Order Rejected Item History Modal -

Report An Issue Modal -

Contribution and Currently Important Rules Acceptance

dt2patel left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sanskar345 Sep 29, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sanskar345 Sep 28, 2023 • edited Loading

Choose a reason for hiding this comment

dt2patel left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sanskar345 Oct 4, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sanskar345 commented Oct 9, 2023 • edited Loading

New UI -

sanskar345 Sep 29, 2023 •

edited

Loading

sanskar345 Sep 28, 2023 •

edited

Loading

sanskar345 Oct 4, 2023 •

edited

Loading

sanskar345 commented Oct 9, 2023 •

edited

Loading