Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: updated order details totals section styling #988

Merged
merged 2 commits into from
May 13, 2022
Merged

refactor: updated order details totals section styling #988

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1bb118c
feat: updated order details totals section styling
May 13, 2022
cf90a82
refactor: revert the previous logic for the order number
May 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/api-client/src/api/customerOrders/customerOrders.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export default gql`
orders(currentPage: $currentPage, filter: $filter, pageSize: $pageSize) {
items {
order_number
number
id
order_date
grand_total
Expand Down
4 changes: 4 additions & 0 deletions packages/theme/lang/de.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export default {
"Add to compare": "Hinzufügen zum vergleichen",
"Add to Wishlist": "Zur Wunschliste hinzufügen",
"Additional Information": "Zusätzliche Information",
"All Orders": "Alle Bestellungen",
"Allow order notifications": "Bestellbenachrichtigungen zulassen",
"Apply": "Übernehmen",
"Attention!": "Attention!",
Expand Down Expand Up @@ -34,6 +35,7 @@ export default {
"Create an account": "Konto erstellen",
"Customer Reviews": "Kundenbewertungen",
"Customer service": "Kundendienst",
"Date": "Datum",
"Default Billing Address": "Standard-Rechnungsadresse",
"Default Shipping Address": "Standardlieferadresse",
"Delete": "Löschen",
Expand Down Expand Up @@ -98,6 +100,7 @@ export default {
"No account": "Sie haben noch keinen Account?",
"or": "oder",
"or fill the details below": "oder füllen Sie die Details unten",
"Order ID": "Bestellung ID",
"Order No.": "Bestellnummer",
"Order summary": "Bestellübersicht",
"Other products you might like": "Andere Produkte, die Ihnen gefallen könnten",
Expand Down Expand Up @@ -164,6 +167,7 @@ export default {
"Sort: Price from high to low": "Preis von hoch bis niedrig",
"Sort: Price from low to high": "Preis von niedrig bis hoch",
"Start shopping": "Einkaufen starten",
"Status": "Status",
"Subscribe": "Abonnieren",
"Subscribe to newsletter": "Anmeldung zum Newsletter",
"subscribeToNewsletterModalContent": "Wenn Sie sich für den Newsletter angemeldet haben, erhalten Sie spezielle Angebote und Nachrichten von VSF per E-Mail. Wir werden Ihre E-Mail zu keinem Zeitpunkt an Dritte verkaufen oder weitergeben. Bitte beachten Sie unsere {0}.",
Expand Down
4 changes: 4 additions & 0 deletions packages/theme/lang/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export default {
"Add to compare": "Add to compare",
"Add to Wishlist": "Add to Wishlist",
"Additional Information": "Additional Information",
"All Orders": "All Orders",
"Allow order notifications": "Allow order notifications",
"Apply": "Apply",
"Attention!": "Attention!",
Expand All @@ -32,6 +33,7 @@ export default {
"Create an account": "Create an account",
"Customer Reviews": "Customer Reviews",
"Customer service": "Customer service",
"Date": "Date",
"Default Billing Address": "Default Billing Address",
"Default Shipping Address": "Default Shipping Address",
"Delete": "Delete",
Expand Down Expand Up @@ -95,6 +97,7 @@ export default {
"No account": "Don't have an account yet?",
"or": "or",
"or fill the details below": "or fill the details below",
"Order ID": "Order ID",
"Order No.": "Order No.",
"Order summary": "Order summary",
"Other products you might like": "Other products you might like",
Expand Down Expand Up @@ -159,6 +162,7 @@ export default {
"Sort: Price from high to low": "Price from high to low",
"Sort: Price from low to high": "Price from low to high",
"Start shopping": "Start shopping",
"Status": "Status",
"Subscribe": "Subscribe",
"Subscribe to newsletter": "Subscribe to newsletter",
"subscribeToNewsletterModalContent": "After signing up for the newsletter, you will receive special offers and messages from VSF via email. We will not sell or distribute your email to any third party at any time. Please see our {0}.",
Expand Down
6 changes: 3 additions & 3 deletions packages/theme/modules/checkout/getters/orderGetters.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { AgnosticPagination } from '~/composables/types';
import { CustomerOrder, OrderItemInterface } from '~/modules/GraphQL/types';

export const getDate = (order: CustomerOrder): string => new Date(order?.order_date).toLocaleDateString() || '';
export const getDate = (order: CustomerOrder): string => new Date(order?.order_date?.replace(/ /g, 'T')).toLocaleDateString() || '';

export const getId = (order: CustomerOrder): string => String(Number.parseInt(order?.number, 10) || '');
export const getId = (order: CustomerOrder): string => order?.number || '';

export const getStatus = (order: CustomerOrder): string => order?.status || 'Failed';

export const getPrice = (order: CustomerOrder): number | null => order?.total?.grand_total?.value || 0;
export const getPrice = (order: CustomerOrder): number | null => order?.total?.base_grand_total?.value || 0;

export const getItems = (order: CustomerOrder): OrderItemInterface[] => order?.items || [];

Expand Down
4 changes: 2 additions & 2 deletions packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderHistory.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
v-for="order in orders"
:key="order.order_number"
>
<SfTableData>{{ order.order_number }}</SfTableData>
<SfTableData>{{ orderGetters.getId(order) }}</SfTableData>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, revert that. We are trying to get rid of getters whenever it is possible to reduce the bundle size, especially if getter does not introduce any intermediate logic but is a pure object prop accessor like in this case.

<SfTableData>{{ orderGetters.getDate(order) }}</SfTableData>
<SfTableData>{{ $fc(orderGetters.getPrice(order)) }}</SfTableData>
<SfTableData>
Expand All @@ -52,7 +52,7 @@
<SfTableData class="orders__view orders__element--right">
<SfLink
data-cy="order-history-btn_view"
:link="localeRoute({ name: 'customer-single-order', params: { orderId: order.order_number } })"
:link="localeRoute({ name: 'customer-single-order', params: { orderId: orderGetters.getId(order) } })"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here, as in comment above.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bartoszherba Thank you for the info. Reverted these changes to the previous state

>
{{ $t('View details') }}
</SfLink>
Expand Down
114 changes: 76 additions & 38 deletions packages/theme/modules/customer/pages/MyAccount/OrderHistory/SingleOrder.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,8 @@
class="sf-button--text all-orders"
@click="$router.push(ordersRoute)"
>
All Orders
{{ $t('All Orders') }}
</SfButton>
<div class="highlighted highlighted--total">
<SfProperty
v-for="property in currentOrder.properties"
:key="property.name"
:name="$t(property.name)"
:value="property.value"
class="sf-property--full-width property"
/>
</div>
<SfTable class="products">
<SfTableHeading>
<SfTableHeader class="products__name">
Expand All @@ -42,6 +33,15 @@
<SfTableData>{{ item.quantity }}</SfTableData>
<SfTableData>{{ $fc(item.price) }}</SfTableData>
</SfTableRow>
<SfTableRow
v-for="property in currentOrder.properties"
:key="property.name"
class="order-summary"
>
<SfTableData class="order-summary__spacer" />
<SfTableData>{{ property.name }}</SfTableData>
<SfTableData>{{ property.value }}</SfTableData>
</SfTableRow>
</SfTable>
</div>
</SfTab>
Expand All @@ -53,19 +53,18 @@ import {
SfTabs,
SfTable,
SfButton,
SfProperty,
SfLoader,
} from '@storefront-ui/vue';
import {
computed, defineComponent, useAsync, useContext,
} from '@nuxtjs/composition-api';
import { useUserOrder } from '~/modules/customer/composables/useUserOrder';
import { orderGetters } from '~/getters';

export default defineComponent({
name: 'SingleOrder',
components: {
SfButton,
SfProperty,
SfTable,
SfTabs,
SfLoader,
Expand All @@ -85,10 +84,22 @@ export default defineComponent({

return {
properties: [
{ name: 'Order ID', value: props.orderId },
{ name: 'Date', value: new Date(order?.order_date).toLocaleDateString() ?? '' },
{ name: 'Status', value: order?.status },
{ name: 'Price', value: context.$fc(order?.total?.grand_total?.value ?? 0) },
{
name: context.i18n.t('Order ID'),
value: orderGetters.getId(order),
},
{
name: context.i18n.t('Date'),
value: orderGetters.getDate(order),
},
{
name: context.i18n.t('Status'),
value: orderGetters.getStatus(order),
},
{
name: context.i18n.t('Price'),
value: context.$fc(orderGetters.getPrice(order)),
},
],
items: order.items?.map(({
product_sku, product_name, quantity_ordered = 0, product_sale_price = { value: 0 },
Expand Down Expand Up @@ -131,41 +142,68 @@ export default defineComponent({
}
}
}

.products {
--table-column-flex: 1;

th, td {
order: 0;

&:not(:first-child) {
--table-column-text-align: right;
}
}

&__name {
margin-right: var(--spacer-sm);
--table-column-text-align: left;

@include for-desktop {
--table-column-flex: 2;
}
}
}

.highlighted {
box-sizing: border-box;
width: 100%;
.order-summary {
position: relative;
display: block;
background-color: var(--c-light);
padding: var(--spacer-sm);
--property-value-font-size: var(--font-size--base);
--property-name-font-size: var(--font-size--base);
&:last-child {
margin-bottom: 0;
}
::v-deep .sf-property__name {
white-space: nowrap;
pointer-events: none;

@include for-mobile {
&:before,
&:after {
content: "";
position: absolute;
display: block;
background-color: var(--c-light);
top: 0;
height: 100%;
width: var(--spacer-sm);
}

&:before {
left: calc(-1 * var(--spacer-sm));
}

&:after {
right: calc(-1 * var(--spacer-sm));
}
}
::v-deep .sf-property__value {
text-align: right;

::v-deep tr {
--table-row-padding: var(--spacer-xs) var(--spacer-sm);
}
&--total {
margin-bottom: var(--spacer-sm);

&:last-of-type {
td {
--table-data-font-weight: var(--font-weight--semibold);
}
}
@include for-desktop {
padding: var(--spacer-xl);
--property-name-font-size: var(--font-size--lg);
--property-name-font-weight: var(--font-weight--medium);
--property-value-font-size: var(--font-size--lg);
--property-value-font-weight: var(--font-weight--semibold);

&__spacer {
@include for-desktop {
--table-column-flex: 2;
}
}
}

Expand Down