From 594b27016a014406a41ac7e79cf5c499c6234b5f Mon Sep 17 00:00:00 2001 From: Marcin Drwiega Date: Wed, 8 Apr 2020 19:39:49 +0200 Subject: [PATCH 01/10] implemented user order details --- .../api-client/src/fragments/index.ts | 23 +++ .../__tests__/getters/orderHelpers.spec.ts | 139 ++++++++++++++++- .../composables/src/getters/orderGetters.ts | 49 +++++- packages/core/theme-module/index.js | 2 +- .../theme-module/theme/pages/MyAccount.vue | 54 ++++--- .../theme/pages/MyAccount/OrderDetails.vue | 140 ++++++++++++++++++ .../theme/pages/MyAccount/OrderHistory.vue | 4 +- 7 files changed, 377 insertions(+), 34 deletions(-) create mode 100644 packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue diff --git a/packages/commercetools/api-client/src/fragments/index.ts b/packages/commercetools/api-client/src/fragments/index.ts index 48e151c11..726c4afd7 100644 --- a/packages/commercetools/api-client/src/fragments/index.ts +++ b/packages/commercetools/api-client/src/fragments/index.ts @@ -133,6 +133,7 @@ export const CartFragment = ` export const OrderFragment = ` ${LineItemFragment} + ${AddressFragment} fragment DefaultOrder on Order { lineItems { @@ -141,7 +142,29 @@ export const OrderFragment = ` totalPrice { centAmount } + billingAddress { + ...DefaultAddress + } + shippingAddress { + ...DefaultAddress + } + orderNumber orderState + taxedPrice { + totalNet { + centAmount + } + totalGross { + centAmount + } + taxPortions { + rate + amount { + centAmount + } + name + } + } id version createdAt diff --git a/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts b/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts index b5acf0cfe..552f96501 100644 --- a/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts +++ b/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts @@ -1,20 +1,63 @@ import { getOrderDate, getOrderId, + getOrderNumber, getOrderStatus, - getOrderPrice + getOrderPrice, + getOrderItems, + getOrderNetValue, + getOrderGrossValue, + getOrderTaxValue, + getOrderTaxRate, + getOrderBillingAddress, + getOrderShippingAddress, + getOrderBillingAddressValues, + getOrderShippingAddressValues } from './../../src/getters/orderGetters'; import { OrderState, Order } from './../../src/types/GraphQL'; -const order: Order = { +const generatePrice = (centAmount: number) => ({ + centAmount, + currencyCode: 'USD' +}); + +const order: Order = Object.freeze({ createdAt: 123456789, id: '645ygdf', + orderNumber: 'abcdef', orderState: OrderState.Complete, - totalPrice: { - centAmount: 12345, - currencyCode: 'USD' - } -} as any; + totalPrice: generatePrice(12345), + taxedPrice: { + totalNet: generatePrice(1111), + totalGross: generatePrice(2222), + taxPortions: [ + { + amount: generatePrice(3333), + rate: 0.15 + } + ] + }, + billingAddress: { + id: '1234', + firstName: 'Vue', + lastName: 'Developer', + __typename: 'Address' + }, + shippingAddress: { + id: '5678', + firstName: 'Java', + lastName: 'Script', + __typename: 'Address' + }, + lineItems: [ + { + id: 'product-1' + }, + { + id: 'product-2' + } + ] +}) as any; describe('[commercetools-getters] order getters', () => { it('returns default values', () => { @@ -28,10 +71,19 @@ describe('[commercetools-getters] order getters', () => { expect(getOrderDate(order)).toEqual(123456789); }); - it('returns order number', () => { + it('returns order id', () => { expect(getOrderId(order)).toEqual('645ygdf'); }); + it('returns order number', () => { + const orderWithoutNumber = { + id: 'just-id' + } as Order; + + expect(getOrderNumber(order)).toEqual('abcdef'); + expect(getOrderNumber(orderWithoutNumber)).toEqual('just-id'); + }); + it('returns status', () => { expect(getOrderStatus(order)).toEqual(OrderState.Complete); }); @@ -39,4 +91,75 @@ describe('[commercetools-getters] order getters', () => { it('returns total gross', () => { expect(getOrderPrice(order)).toEqual(123.45); }); + + it('returns net value', () => { + expect(getOrderNetValue(order)).toEqual(11.11); + }); + + it('returns gross value', () => { + expect(getOrderGrossValue(order)).toEqual(22.22); + }); + + it('returns tax value', () => { + expect(getOrderTaxValue(order)).toEqual(33.33); + }); + + it('returns tax rate', () => { + expect(getOrderTaxRate(order)).toEqual(15); + }); + + it('returns billing address', () => { + const orderWithoutAddress = {} as Order; + const address = getOrderBillingAddress(order); + + expect(Object.keys(address)).toHaveLength(4); + expect(address.id).toEqual('1234'); + expect(address.firstName).toEqual('Vue'); + expect(address.lastName).toEqual('Developer'); + expect(address.__typename).toEqual('Address'); + expect(getOrderBillingAddress(orderWithoutAddress)).toBeNull(); + }); + + it('returns shipping address', () => { + const orderWithoutAddress = {} as Order; + const address = getOrderShippingAddress(order); + + expect(Object.keys(address)).toHaveLength(4); + expect(address.id).toEqual('5678'); + expect(address.firstName).toEqual('Java'); + expect(address.lastName).toEqual('Script'); + expect(address.__typename).toEqual('Address'); + expect(getOrderShippingAddress(orderWithoutAddress)).toBeNull(); + }); + + it('returns transformed billing address values', () => { + const values = getOrderBillingAddressValues(order); + + expect(Array.isArray(values)).toBeTruthy(); + expect(values).toHaveLength(2); + expect(values[0].property).toEqual('First Name'); + expect(values[1].property).toEqual('Last Name'); + expect(values[0].value).toEqual('Vue'); + expect(values[1].value).toEqual('Developer'); + }); + + it('returns transformed shipping address values', () => { + const values = getOrderShippingAddressValues(order); + + expect(Array.isArray(values)).toBeTruthy(); + expect(values).toHaveLength(2); + expect(values[0].property).toEqual('First Name'); + expect(values[1].property).toEqual('Last Name'); + expect(values[0].value).toEqual('Java'); + expect(values[1].value).toEqual('Script'); + }); + + it('returns line items', () => { + const items = getOrderItems(order); + + expect(Array.isArray(items)).toBeTruthy(); + expect(items).toHaveLength(2); + expect(items[0].id).toEqual('product-1'); + expect(items[1].id).toEqual('product-2'); + }); }); diff --git a/packages/commercetools/composables/src/getters/orderGetters.ts b/packages/commercetools/composables/src/getters/orderGetters.ts index 9c5e1d7c2..3fd4c5b26 100644 --- a/packages/commercetools/composables/src/getters/orderGetters.ts +++ b/packages/commercetools/composables/src/getters/orderGetters.ts @@ -1,10 +1,12 @@ import { UserOrderGetters, AgnosticOrderStatus } from '@vue-storefront/interfaces'; -import { Order, OrderState } from './../types/GraphQL'; +import { Order, OrderState, LineItem, Money, Address } from './../types/GraphQL'; export const getOrderDate = (order: Order): string => order?.createdAt || ''; export const getOrderId = (order: Order): string => order?.id || ''; +export const getOrderNumber = (order: Order): string => order?.orderNumber || getOrderId(order); + const orderStatusMap = { [OrderState.Open]: AgnosticOrderStatus.Open, [OrderState.Confirmed]: AgnosticOrderStatus.Confirmed, @@ -12,15 +14,56 @@ const orderStatusMap = { [OrderState.Cancelled]: AgnosticOrderStatus.Cancelled }; +const getPrice = (money: Money): number | null => money && money.centAmount ? money.centAmount / 100 : null; + export const getOrderStatus = (order: Order): AgnosticOrderStatus | '' => order?.orderState ? orderStatusMap[order.orderState] : ''; -export const getOrderPrice = (order: Order): number | null => order ? order.totalPrice.centAmount / 100 : null; +export const getOrderItems = (order: Order): LineItem[] => order?.lineItems || []; + +export const getOrderPrice = (order: Order): number | null => getPrice(order?.totalPrice); + +export const getOrderNetValue = (order: Order): number | null => getPrice(order?.taxedPrice?.totalNet); + +export const getOrderGrossValue = (order: Order): number | null => getPrice(order?.taxedPrice?.totalGross); + +export const getOrderTaxValue = (order: Order): number | null => getPrice(order?.taxedPrice?.taxPortions[0]?.amount); + +export const getOrderTaxRate = (order: Order): number => (order?.taxedPrice?.taxPortions[0]?.rate || 0) * 100; + +export const getOrderBillingAddress = (order: Order): Address | null => order?.billingAddress || null; + +export const getOrderShippingAddress = (order: Order): Address | null => order?.shippingAddress || null; + +type KeyValueAddress = { property: string; value: string }[]; + +const transformAddressToArray = (address: Address | object): KeyValueAddress => Object.entries(address) + .filter(([property, value]) => value !== null && !['id', '__typename'].includes(property)) + .map(([property, value]) => ({ + property: (property || '') + .replace(/([A-Z])/g, ' $1') + .replace(/^./, (str) => str.toUpperCase()), + value + })); + +export const getOrderBillingAddressValues = (order: Order): KeyValueAddress => transformAddressToArray(getOrderBillingAddress(order) || {}); + +export const getOrderShippingAddressValues = (order: Order): KeyValueAddress => transformAddressToArray(getOrderShippingAddress(order) || {}); const orderGetters: UserOrderGetters = { getDate: getOrderDate, getId: getOrderId, + getNumber: getOrderNumber, getStatus: getOrderStatus, - getPrice: getOrderPrice + getPrice: getOrderPrice, + getItems: getOrderItems, + getNetValue: getOrderNetValue, + getGrossValue: getOrderGrossValue, + getTaxValue: getOrderTaxValue, + getTaxRate: getOrderTaxRate, + getBillingAddress: getOrderBillingAddress, + getShippingAddress: getOrderShippingAddress, + getBillingAddressValues: getOrderBillingAddressValues, + getShippingAddressValues: getOrderShippingAddressValues }; export default orderGetters; diff --git a/packages/core/theme-module/index.js b/packages/core/theme-module/index.js index b08237d77..8162a78f6 100644 --- a/packages/core/theme-module/index.js +++ b/packages/core/theme-module/index.js @@ -90,7 +90,7 @@ module.exports = function DefaultThemeModule(moduleOptions) { }); routes.push({ name: 'my-account', - path: '/my-account/:pageName?', + path: '/my-account/:pageName?/:id?', component: resolve(projectLocalThemeDir, 'pages/MyAccount.vue') }); routes.push({ diff --git a/packages/core/theme-module/theme/pages/MyAccount.vue b/packages/core/theme-module/theme/pages/MyAccount.vue index 45ed6ca73..3a5b78d0f 100644 --- a/packages/core/theme-module/theme/pages/MyAccount.vue +++ b/packages/core/theme-module/theme/pages/MyAccount.vue @@ -37,6 +37,10 @@ + + +

Not found

+ @@ -44,11 +48,13 @@ diff --git a/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue b/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue new file mode 100644 index 000000000..10ddccbba --- /dev/null +++ b/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue @@ -0,0 +1,140 @@ + + + + + + + diff --git a/packages/core/theme-module/theme/pages/MyAccount/OrderHistory.vue b/packages/core/theme-module/theme/pages/MyAccount/OrderHistory.vue index dbe2146f5..d67358b2a 100644 --- a/packages/core/theme-module/theme/pages/MyAccount/OrderHistory.vue +++ b/packages/core/theme-module/theme/pages/MyAccount/OrderHistory.vue @@ -30,7 +30,9 @@ Download - VIEW + + VIEW + From e23ee1c8f07158c1700771449bcafc4d279743e6 Mon Sep 17 00:00:00 2001 From: Marcin Drwiega Date: Thu, 9 Apr 2020 09:51:50 +0200 Subject: [PATCH 02/10] Fixes according to the code review --- .../theme/pages/MyAccount/OrderDetails.vue | 89 ++++++++++--------- 1 file changed, 47 insertions(+), 42 deletions(-) diff --git a/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue b/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue index 10ddccbba..85b33afef 100644 --- a/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue +++ b/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue @@ -1,53 +1,58 @@ From ec56976a42459641e7000d33b88cee34c1923321 Mon Sep 17 00:00:00 2001 From: Marcin Drwiega Date: Thu, 9 Apr 2020 10:36:28 +0200 Subject: [PATCH 03/10] taxes as array + increased test coverage --- .../__tests__/getters/orderHelpers.spec.ts | 45 ++++++++++++++++--- .../composables/src/getters/orderGetters.ts | 16 ++++--- .../theme/pages/MyAccount/OrderDetails.vue | 11 +++-- 3 files changed, 58 insertions(+), 14 deletions(-) diff --git a/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts b/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts index 552f96501..d9348e082 100644 --- a/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts +++ b/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts @@ -7,6 +7,8 @@ import { getOrderItems, getOrderNetValue, getOrderGrossValue, + getOrderTaxes, + getOrderTaxName, getOrderTaxValue, getOrderTaxRate, getOrderBillingAddress, @@ -32,8 +34,14 @@ const order: Order = Object.freeze({ totalGross: generatePrice(2222), taxPortions: [ { + name: '15% incl.', amount: generatePrice(3333), rate: 0.15 + }, + { + name: '25% incl.', + amount: generatePrice(4444), + rate: 0.25 } ] }, @@ -82,6 +90,7 @@ describe('[commercetools-getters] order getters', () => { expect(getOrderNumber(order)).toEqual('abcdef'); expect(getOrderNumber(orderWithoutNumber)).toEqual('just-id'); + expect(getOrderNumber(null as any)).toEqual(''); }); it('returns status', () => { @@ -94,22 +103,44 @@ describe('[commercetools-getters] order getters', () => { it('returns net value', () => { expect(getOrderNetValue(order)).toEqual(11.11); + expect(getOrderNetValue(null as any)).toBeNull(); }); it('returns gross value', () => { expect(getOrderGrossValue(order)).toEqual(22.22); + expect(getOrderGrossValue(null as any)).toBeNull(); + }); + + it('returns taxes', () => { + expect(getOrderTaxes(order)).toHaveLength(2); + expect(getOrderTaxes(null as any)).toHaveLength(0); + }); + + it('returns taxes names', () => { + const taxes = getOrderTaxes(order); + + expect(getOrderTaxName(taxes[0])).toEqual('15% incl.'); + expect(getOrderTaxName(taxes[1])).toEqual('25% incl.'); + expect(getOrderTaxName({} as any)).toEqual(''); }); it('returns tax value', () => { - expect(getOrderTaxValue(order)).toEqual(33.33); + const taxes = getOrderTaxes(order); + + expect(getOrderTaxValue(taxes[0])).toEqual(33.33); + expect(getOrderTaxValue(taxes[1])).toEqual(44.44); + expect(getOrderTaxValue({} as any)).toBe(null); }); it('returns tax rate', () => { - expect(getOrderTaxRate(order)).toEqual(15); + const taxes = getOrderTaxes(order); + + expect(getOrderTaxRate(taxes[0])).toEqual(15); + expect(getOrderTaxRate(taxes[1])).toEqual(25); + expect(getOrderTaxRate({} as any)).toEqual(0); }); it('returns billing address', () => { - const orderWithoutAddress = {} as Order; const address = getOrderBillingAddress(order); expect(Object.keys(address)).toHaveLength(4); @@ -117,11 +148,10 @@ describe('[commercetools-getters] order getters', () => { expect(address.firstName).toEqual('Vue'); expect(address.lastName).toEqual('Developer'); expect(address.__typename).toEqual('Address'); - expect(getOrderBillingAddress(orderWithoutAddress)).toBeNull(); + expect(getOrderBillingAddress(null as any)).toBeNull(); }); it('returns shipping address', () => { - const orderWithoutAddress = {} as Order; const address = getOrderShippingAddress(order); expect(Object.keys(address)).toHaveLength(4); @@ -129,7 +159,7 @@ describe('[commercetools-getters] order getters', () => { expect(address.firstName).toEqual('Java'); expect(address.lastName).toEqual('Script'); expect(address.__typename).toEqual('Address'); - expect(getOrderShippingAddress(orderWithoutAddress)).toBeNull(); + expect(getOrderShippingAddress(null as any)).toBeNull(); }); it('returns transformed billing address values', () => { @@ -141,6 +171,7 @@ describe('[commercetools-getters] order getters', () => { expect(values[1].property).toEqual('Last Name'); expect(values[0].value).toEqual('Vue'); expect(values[1].value).toEqual('Developer'); + expect(getOrderBillingAddressValues({} as any)).toHaveLength(0); }); it('returns transformed shipping address values', () => { @@ -152,6 +183,7 @@ describe('[commercetools-getters] order getters', () => { expect(values[1].property).toEqual('Last Name'); expect(values[0].value).toEqual('Java'); expect(values[1].value).toEqual('Script'); + expect(getOrderShippingAddressValues({} as any)).toHaveLength(0); }); it('returns line items', () => { @@ -161,5 +193,6 @@ describe('[commercetools-getters] order getters', () => { expect(items).toHaveLength(2); expect(items[0].id).toEqual('product-1'); expect(items[1].id).toEqual('product-2'); + expect(getOrderItems(null as any)).toHaveLength(0); }); }); diff --git a/packages/commercetools/composables/src/getters/orderGetters.ts b/packages/commercetools/composables/src/getters/orderGetters.ts index 3fd4c5b26..5d8931fdc 100644 --- a/packages/commercetools/composables/src/getters/orderGetters.ts +++ b/packages/commercetools/composables/src/getters/orderGetters.ts @@ -1,5 +1,5 @@ import { UserOrderGetters, AgnosticOrderStatus } from '@vue-storefront/interfaces'; -import { Order, OrderState, LineItem, Money, Address } from './../types/GraphQL'; +import { Order, OrderState, LineItem, Money, Address, TaxPortion } from './../types/GraphQL'; export const getOrderDate = (order: Order): string => order?.createdAt || ''; @@ -14,7 +14,7 @@ const orderStatusMap = { [OrderState.Cancelled]: AgnosticOrderStatus.Cancelled }; -const getPrice = (money: Money): number | null => money && money.centAmount ? money.centAmount / 100 : null; +const getPrice = (money: Money): number | null => money?.centAmount ? money.centAmount / 100 : null; export const getOrderStatus = (order: Order): AgnosticOrderStatus | '' => order?.orderState ? orderStatusMap[order.orderState] : ''; @@ -26,9 +26,13 @@ export const getOrderNetValue = (order: Order): number | null => getPrice(order? export const getOrderGrossValue = (order: Order): number | null => getPrice(order?.taxedPrice?.totalGross); -export const getOrderTaxValue = (order: Order): number | null => getPrice(order?.taxedPrice?.taxPortions[0]?.amount); +export const getOrderTaxes = (order: Order): TaxPortion[] => order?.taxedPrice?.taxPortions || []; -export const getOrderTaxRate = (order: Order): number => (order?.taxedPrice?.taxPortions[0]?.rate || 0) * 100; +export const getOrderTaxName = (taxPortion: TaxPortion): string => taxPortion.name || ''; + +export const getOrderTaxValue = (taxPortion: TaxPortion): number | null => getPrice(taxPortion.amount); + +export const getOrderTaxRate = (taxPortion: TaxPortion): number => (taxPortion.rate || 0) * 100; export const getOrderBillingAddress = (order: Order): Address | null => order?.billingAddress || null; @@ -39,7 +43,7 @@ type KeyValueAddress = { property: string; value: string }[]; const transformAddressToArray = (address: Address | object): KeyValueAddress => Object.entries(address) .filter(([property, value]) => value !== null && !['id', '__typename'].includes(property)) .map(([property, value]) => ({ - property: (property || '') + property: String(property) .replace(/([A-Z])/g, ' $1') .replace(/^./, (str) => str.toUpperCase()), value @@ -58,6 +62,8 @@ const orderGetters: UserOrderGetters = { getItems: getOrderItems, getNetValue: getOrderNetValue, getGrossValue: getOrderGrossValue, + getTaxes: getOrderTaxes, + getTaxName: getOrderTaxName, getTaxValue: getOrderTaxValue, getTaxRate: getOrderTaxRate, getBillingAddress: getOrderBillingAddress, diff --git a/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue b/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue index 85b33afef..e76c4a74c 100644 --- a/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue +++ b/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue @@ -26,9 +26,10 @@ Gross value ${{orderGetters.getGrossValue(order)}} -
- Tax included - ${{orderGetters.getTaxValue(order)}} ({{orderGetters.getTaxRate(order)}}%) +

Taxes included

+
+ {{orderGetters.getTaxName(tax)}} + ${{orderGetters.getTaxValue(tax)}} ({{orderGetters.getTaxRate(tax)}}%)
@@ -96,6 +97,10 @@ export default { } &__summary { + &__tax-title { + font-weight: 500; + } + &__item { display: flex; flex-direction: row; From b0278bab0c2475edfd2d6fab8ef700b03099583d Mon Sep 17 00:00:00 2001 From: Marcin Drwiega Date: Thu, 9 Apr 2020 12:59:08 +0200 Subject: [PATCH 04/10] changes according to CR --- .../__tests__/getters/orderHelpers.spec.ts | 93 +------------------ .../composables/src/getters/orderGetters.ts | 49 +++------- .../theme/pages/MyAccount/OrderDetails.vue | 55 +++++------ 3 files changed, 42 insertions(+), 155 deletions(-) diff --git a/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts b/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts index d9348e082..6d7df763d 100644 --- a/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts +++ b/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts @@ -5,16 +5,8 @@ import { getOrderStatus, getOrderPrice, getOrderItems, - getOrderNetValue, - getOrderGrossValue, - getOrderTaxes, - getOrderTaxName, - getOrderTaxValue, - getOrderTaxRate, getOrderBillingAddress, - getOrderShippingAddress, - getOrderBillingAddressValues, - getOrderShippingAddressValues + getOrderShippingAddress } from './../../src/getters/orderGetters'; import { OrderState, Order } from './../../src/types/GraphQL'; @@ -101,89 +93,14 @@ describe('[commercetools-getters] order getters', () => { expect(getOrderPrice(order)).toEqual(123.45); }); - it('returns net value', () => { - expect(getOrderNetValue(order)).toEqual(11.11); - expect(getOrderNetValue(null as any)).toBeNull(); - }); - - it('returns gross value', () => { - expect(getOrderGrossValue(order)).toEqual(22.22); - expect(getOrderGrossValue(null as any)).toBeNull(); - }); - - it('returns taxes', () => { - expect(getOrderTaxes(order)).toHaveLength(2); - expect(getOrderTaxes(null as any)).toHaveLength(0); - }); - - it('returns taxes names', () => { - const taxes = getOrderTaxes(order); - - expect(getOrderTaxName(taxes[0])).toEqual('15% incl.'); - expect(getOrderTaxName(taxes[1])).toEqual('25% incl.'); - expect(getOrderTaxName({} as any)).toEqual(''); - }); - - it('returns tax value', () => { - const taxes = getOrderTaxes(order); - - expect(getOrderTaxValue(taxes[0])).toEqual(33.33); - expect(getOrderTaxValue(taxes[1])).toEqual(44.44); - expect(getOrderTaxValue({} as any)).toBe(null); - }); - - it('returns tax rate', () => { - const taxes = getOrderTaxes(order); - - expect(getOrderTaxRate(taxes[0])).toEqual(15); - expect(getOrderTaxRate(taxes[1])).toEqual(25); - expect(getOrderTaxRate({} as any)).toEqual(0); - }); - it('returns billing address', () => { - const address = getOrderBillingAddress(order); - - expect(Object.keys(address)).toHaveLength(4); - expect(address.id).toEqual('1234'); - expect(address.firstName).toEqual('Vue'); - expect(address.lastName).toEqual('Developer'); - expect(address.__typename).toEqual('Address'); - expect(getOrderBillingAddress(null as any)).toBeNull(); + expect(typeof getOrderBillingAddress(order)).toEqual('string'); + expect(typeof getOrderBillingAddress(null as any)).toEqual('string'); }); it('returns shipping address', () => { - const address = getOrderShippingAddress(order); - - expect(Object.keys(address)).toHaveLength(4); - expect(address.id).toEqual('5678'); - expect(address.firstName).toEqual('Java'); - expect(address.lastName).toEqual('Script'); - expect(address.__typename).toEqual('Address'); - expect(getOrderShippingAddress(null as any)).toBeNull(); - }); - - it('returns transformed billing address values', () => { - const values = getOrderBillingAddressValues(order); - - expect(Array.isArray(values)).toBeTruthy(); - expect(values).toHaveLength(2); - expect(values[0].property).toEqual('First Name'); - expect(values[1].property).toEqual('Last Name'); - expect(values[0].value).toEqual('Vue'); - expect(values[1].value).toEqual('Developer'); - expect(getOrderBillingAddressValues({} as any)).toHaveLength(0); - }); - - it('returns transformed shipping address values', () => { - const values = getOrderShippingAddressValues(order); - - expect(Array.isArray(values)).toBeTruthy(); - expect(values).toHaveLength(2); - expect(values[0].property).toEqual('First Name'); - expect(values[1].property).toEqual('Last Name'); - expect(values[0].value).toEqual('Java'); - expect(values[1].value).toEqual('Script'); - expect(getOrderShippingAddressValues({} as any)).toHaveLength(0); + expect(typeof getOrderShippingAddress(order)).toEqual('string'); + expect(typeof getOrderShippingAddress(null as any)).toEqual('string'); }); it('returns line items', () => { diff --git a/packages/commercetools/composables/src/getters/orderGetters.ts b/packages/commercetools/composables/src/getters/orderGetters.ts index 5d8931fdc..31532f991 100644 --- a/packages/commercetools/composables/src/getters/orderGetters.ts +++ b/packages/commercetools/composables/src/getters/orderGetters.ts @@ -1,5 +1,5 @@ import { UserOrderGetters, AgnosticOrderStatus } from '@vue-storefront/interfaces'; -import { Order, OrderState, LineItem, Money, Address, TaxPortion } from './../types/GraphQL'; +import { Order, OrderState, LineItem, Money, Address } from './../types/GraphQL'; export const getOrderDate = (order: Order): string => order?.createdAt || ''; @@ -22,36 +22,19 @@ export const getOrderItems = (order: Order): LineItem[] => order?.lineItems || [ export const getOrderPrice = (order: Order): number | null => getPrice(order?.totalPrice); -export const getOrderNetValue = (order: Order): number | null => getPrice(order?.taxedPrice?.totalNet); - -export const getOrderGrossValue = (order: Order): number | null => getPrice(order?.taxedPrice?.totalGross); - -export const getOrderTaxes = (order: Order): TaxPortion[] => order?.taxedPrice?.taxPortions || []; - -export const getOrderTaxName = (taxPortion: TaxPortion): string => taxPortion.name || ''; - -export const getOrderTaxValue = (taxPortion: TaxPortion): number | null => getPrice(taxPortion.amount); - -export const getOrderTaxRate = (taxPortion: TaxPortion): number => (taxPortion.rate || 0) * 100; - -export const getOrderBillingAddress = (order: Order): Address | null => order?.billingAddress || null; - -export const getOrderShippingAddress = (order: Order): Address | null => order?.shippingAddress || null; - -type KeyValueAddress = { property: string; value: string }[]; - -const transformAddressToArray = (address: Address | object): KeyValueAddress => Object.entries(address) +const transformAddressToString = (address: Address | object): string => Object.entries(address) .filter(([property, value]) => value !== null && !['id', '__typename'].includes(property)) - .map(([property, value]) => ({ - property: String(property) - .replace(/([A-Z])/g, ' $1') - .replace(/^./, (str) => str.toUpperCase()), - value - })); + .map(([property, value]) => ( + '
' + + `${property.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase())}` + + `${value}` + + '
' + )) + .join(''); -export const getOrderBillingAddressValues = (order: Order): KeyValueAddress => transformAddressToArray(getOrderBillingAddress(order) || {}); +export const getOrderBillingAddress = (order: Order): string => transformAddressToString(order?.billingAddress || {}); -export const getOrderShippingAddressValues = (order: Order): KeyValueAddress => transformAddressToArray(getOrderShippingAddress(order) || {}); +export const getOrderShippingAddress = (order: Order): string => transformAddressToString(order?.shippingAddress || {}); const orderGetters: UserOrderGetters = { getDate: getOrderDate, @@ -60,16 +43,8 @@ const orderGetters: UserOrderGetters = { getStatus: getOrderStatus, getPrice: getOrderPrice, getItems: getOrderItems, - getNetValue: getOrderNetValue, - getGrossValue: getOrderGrossValue, - getTaxes: getOrderTaxes, - getTaxName: getOrderTaxName, - getTaxValue: getOrderTaxValue, - getTaxRate: getOrderTaxRate, getBillingAddress: getOrderBillingAddress, - getShippingAddress: getOrderShippingAddress, - getBillingAddressValues: getOrderBillingAddressValues, - getShippingAddressValues: getOrderShippingAddressValues + getShippingAddress: getOrderShippingAddress }; export default orderGetters; diff --git a/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue b/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue index e76c4a74c..cc71a9ad7 100644 --- a/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue +++ b/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue @@ -19,17 +19,8 @@

Summary

- Net value - ${{orderGetters.getNetValue(order)}} -
-
- Gross value - ${{orderGetters.getGrossValue(order)}} -
-

Taxes included

-
- {{orderGetters.getTaxName(tax)}} - ${{orderGetters.getTaxValue(tax)}} ({{orderGetters.getTaxRate(tax)}}%) + Total price + ${{orderGetters.getPrice(order)}}
@@ -37,17 +28,11 @@

Billing Address

-
- {{address.property}} - {{address.value}} -
+

Shipping Address

-
- {{address.property}} - {{address.value}} -
+
@@ -111,17 +96,6 @@ export default { } } - @include for-desktop { - &__addresses { - display: flex; - justify-content: space-between; - - &__item { - flex: 1; - } - } - } - &__addresses__item { &__title { font-weight: 500; @@ -136,6 +110,8 @@ export default { From 24ff35b3d4e829e0914cbec8fea8d754a7f6d5ec Mon Sep 17 00:00:00 2001 From: Marcin Drwiega Date: Thu, 9 Apr 2020 13:05:03 +0200 Subject: [PATCH 05/10] simplified string --- .../commercetools/composables/src/getters/orderGetters.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/commercetools/composables/src/getters/orderGetters.ts b/packages/commercetools/composables/src/getters/orderGetters.ts index 31532f991..b1f65c274 100644 --- a/packages/commercetools/composables/src/getters/orderGetters.ts +++ b/packages/commercetools/composables/src/getters/orderGetters.ts @@ -25,10 +25,7 @@ export const getOrderPrice = (order: Order): number | null => getPrice(order?.to const transformAddressToString = (address: Address | object): string => Object.entries(address) .filter(([property, value]) => value !== null && !['id', '__typename'].includes(property)) .map(([property, value]) => ( - '
' + - `${property.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase())}` + - `${value}` + - '
' + `${property.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase())}: ${value}` )) .join(''); From d35dd842d4f82bc9a4881c21b6534f24c30a5754 Mon Sep 17 00:00:00 2001 From: Marcin Drwiega Date: Thu, 9 Apr 2020 13:05:46 +0200 Subject: [PATCH 06/10] added coma separator --- packages/commercetools/composables/src/getters/orderGetters.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/commercetools/composables/src/getters/orderGetters.ts b/packages/commercetools/composables/src/getters/orderGetters.ts index b1f65c274..ef945d08e 100644 --- a/packages/commercetools/composables/src/getters/orderGetters.ts +++ b/packages/commercetools/composables/src/getters/orderGetters.ts @@ -27,7 +27,7 @@ const transformAddressToString = (address: Address | object): string => Object.e .map(([property, value]) => ( `${property.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase())}: ${value}` )) - .join(''); + .join(', '); export const getOrderBillingAddress = (order: Order): string => transformAddressToString(order?.billingAddress || {}); From fc0cd8dc0c3df1d0dd0237a2a9c2cb8c94c2d320 Mon Sep 17 00:00:00 2001 From: Marcin Drwiega Date: Thu, 9 Apr 2020 13:10:58 +0200 Subject: [PATCH 07/10] simplified transformation --- .../composables/src/getters/orderGetters.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/commercetools/composables/src/getters/orderGetters.ts b/packages/commercetools/composables/src/getters/orderGetters.ts index ef945d08e..5c1477ad4 100644 --- a/packages/commercetools/composables/src/getters/orderGetters.ts +++ b/packages/commercetools/composables/src/getters/orderGetters.ts @@ -22,16 +22,13 @@ export const getOrderItems = (order: Order): LineItem[] => order?.lineItems || [ export const getOrderPrice = (order: Order): number | null => getPrice(order?.totalPrice); -const transformAddressToString = (address: Address | object): string => Object.entries(address) - .filter(([property, value]) => value !== null && !['id', '__typename'].includes(property)) - .map(([property, value]) => ( - `${property.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase())}: ${value}` - )) - .join(', '); +const transformAddressToString = (address: Address): string => ( + `${address.country}, ${address.postalCode}, ${address.city}, ${address.streetName}, ${address.streetNumber}` +); -export const getOrderBillingAddress = (order: Order): string => transformAddressToString(order?.billingAddress || {}); +export const getOrderBillingAddress = (order: Order): string => transformAddressToString(order?.billingAddress || {} as Address); -export const getOrderShippingAddress = (order: Order): string => transformAddressToString(order?.shippingAddress || {}); +export const getOrderShippingAddress = (order: Order): string => transformAddressToString(order?.shippingAddress || {} as Address); const orderGetters: UserOrderGetters = { getDate: getOrderDate, From 0a8032f0d7198fe15f2525d0f8308b94f7e0c4f4 Mon Sep 17 00:00:00 2001 From: Marcin Drwiega Date: Thu, 9 Apr 2020 16:29:20 +0200 Subject: [PATCH 08/10] template changes. added onSSR --- .../__tests__/getters/orderHelpers.spec.ts | 12 ++++++------ .../composables/src/getters/orderGetters.ts | 10 ++++++---- packages/core/interfaces/src/index.ts | 7 +++++-- .../theme/pages/MyAccount/OrderDetails.vue | 15 +++++++-------- 4 files changed, 24 insertions(+), 20 deletions(-) diff --git a/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts b/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts index 6d7df763d..8f3a76abb 100644 --- a/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts +++ b/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts @@ -63,8 +63,12 @@ describe('[commercetools-getters] order getters', () => { it('returns default values', () => { expect(getOrderDate(null)).toBe(''); expect(getOrderId(null)).toBe(''); + expect(getOrderNumber(null as any)).toEqual(''); expect(getOrderStatus(null)).toBe(''); - expect(getOrderPrice(null)).toBe(null); + expect(typeof getOrderPrice(null)).toBe('object'); + expect(typeof getOrderBillingAddress(null as any)).toEqual('string'); + expect(typeof getOrderShippingAddress(null as any)).toEqual('string'); + expect(getOrderItems(null as any)).toHaveLength(0); }); it('returns date', () => { @@ -82,7 +86,6 @@ describe('[commercetools-getters] order getters', () => { expect(getOrderNumber(order)).toEqual('abcdef'); expect(getOrderNumber(orderWithoutNumber)).toEqual('just-id'); - expect(getOrderNumber(null as any)).toEqual(''); }); it('returns status', () => { @@ -90,17 +93,15 @@ describe('[commercetools-getters] order getters', () => { }); it('returns total gross', () => { - expect(getOrderPrice(order)).toEqual(123.45); + expect(getOrderPrice(order).regular).toEqual(123.45); }); it('returns billing address', () => { expect(typeof getOrderBillingAddress(order)).toEqual('string'); - expect(typeof getOrderBillingAddress(null as any)).toEqual('string'); }); it('returns shipping address', () => { expect(typeof getOrderShippingAddress(order)).toEqual('string'); - expect(typeof getOrderShippingAddress(null as any)).toEqual('string'); }); it('returns line items', () => { @@ -110,6 +111,5 @@ describe('[commercetools-getters] order getters', () => { expect(items).toHaveLength(2); expect(items[0].id).toEqual('product-1'); expect(items[1].id).toEqual('product-2'); - expect(getOrderItems(null as any)).toHaveLength(0); }); }); diff --git a/packages/commercetools/composables/src/getters/orderGetters.ts b/packages/commercetools/composables/src/getters/orderGetters.ts index 5c1477ad4..03bfde193 100644 --- a/packages/commercetools/composables/src/getters/orderGetters.ts +++ b/packages/commercetools/composables/src/getters/orderGetters.ts @@ -1,4 +1,4 @@ -import { UserOrderGetters, AgnosticOrderStatus } from '@vue-storefront/interfaces'; +import { UserOrderGetters, AgnosticOrderStatus, AgnosticPrice } from '@vue-storefront/interfaces'; import { Order, OrderState, LineItem, Money, Address } from './../types/GraphQL'; export const getOrderDate = (order: Order): string => order?.createdAt || ''; @@ -14,13 +14,15 @@ const orderStatusMap = { [OrderState.Cancelled]: AgnosticOrderStatus.Cancelled }; -const getPrice = (money: Money): number | null => money?.centAmount ? money.centAmount / 100 : null; +const getPrice = (money: Money): AgnosticPrice => ({ + regular: money?.centAmount ? money.centAmount / 100 : 0 +}); export const getOrderStatus = (order: Order): AgnosticOrderStatus | '' => order?.orderState ? orderStatusMap[order.orderState] : ''; export const getOrderItems = (order: Order): LineItem[] => order?.lineItems || []; -export const getOrderPrice = (order: Order): number | null => getPrice(order?.totalPrice); +export const getOrderPrice = (order: Order): AgnosticPrice => getPrice(order?.totalPrice); const transformAddressToString = (address: Address): string => ( `${address.country}, ${address.postalCode}, ${address.city}, ${address.streetName}, ${address.streetNumber}` @@ -30,7 +32,7 @@ export const getOrderBillingAddress = (order: Order): string => transformAddress export const getOrderShippingAddress = (order: Order): string => transformAddressToString(order?.shippingAddress || {} as Address); -const orderGetters: UserOrderGetters = { +const orderGetters: UserOrderGetters = { getDate: getOrderDate, getId: getOrderId, getNumber: getOrderNumber, diff --git a/packages/core/interfaces/src/index.ts b/packages/core/interfaces/src/index.ts index 4b64b1faa..e28dfe79d 100644 --- a/packages/core/interfaces/src/index.ts +++ b/packages/core/interfaces/src/index.ts @@ -207,11 +207,14 @@ export interface CheckoutGetters { [getterName: string]: (element: any, options?: any) => unknown; } -export interface UserOrderGetters { +export interface UserOrderGetters { getDate: (order: ORDER) => string; getId: (order: ORDER) => string; getStatus: (order: ORDER) => string; - getPrice: (order: ORDER) => number; + getPrice: (order: ORDER) => AgnosticPrice; + getItems: (order: ORDER) => ORDER_ITEM[]; + getBillingAddress: (address: ORDER) => string; + getShippingAddress: (address: ORDER) => string; [getterName: string]: (element: any, options?: any) => unknown; } diff --git a/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue b/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue index cc71a9ad7..0d5aee56c 100644 --- a/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue +++ b/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue @@ -1,6 +1,5 @@