feat(admin-ui): Add shipping method test UI

Closes #133

admin-ui/src/app/common/generated-types.ts

@@ -2666,6 +2666,7 @@ export type Query = {
   shippingMethod?: Maybe<ShippingMethod>,
   shippingEligibilityCheckers: Array<ConfigurableOperation>,
   shippingCalculators: Array<ConfigurableOperation>,
+  testShippingMethod: TestShippingMethodResult,
   taxCategories: Array<TaxCategory>,
   taxCategory?: Maybe<TaxCategory>,
   taxRates: TaxRateList,
@@ -2834,6 +2835,11 @@ export type QueryShippingMethodArgs = {
 };
 
 
+export type QueryTestShippingMethodArgs = {
+  input: TestShippingMethodInput
+};
+
+
 export type QueryTaxCategoryArgs = {
   id: Scalars['ID']
 };
@@ -3050,6 +3056,12 @@ export type ShippingMethodSortParameter = {
   description?: Maybe<SortOrder>,
 };
 
+export type ShippingPrice = {
+  __typename?: 'ShippingPrice',
+  price: Scalars['Int'],
+  priceWithTax: Scalars['Int'],
+};
+
 /** The price value where the result has a single price */
 export type SinglePrice = {
   __typename?: 'SinglePrice',
@@ -3173,6 +3185,24 @@ export type TaxRateSortParameter = {
   value?: Maybe<SortOrder>,
 };
 
+export type TestShippingMethodInput = {
+  checker: ConfigurableOperationInput,
+  calculator: ConfigurableOperationInput,
+  shippingAddress: CreateAddressInput,
+  lines: Array<TestShippingMethodOrderLineInput>,
+};
+
+export type TestShippingMethodOrderLineInput = {
+  productVariantId: Scalars['ID'],
+  quantity: Scalars['Int'],
+};
+
+export type TestShippingMethodResult = {
+  __typename?: 'TestShippingMethodResult',
+  eligible: Scalars['Boolean'],
+  price?: Maybe<ShippingPrice>,
+};
+
 export type UiState = {
   __typename?: 'UiState',
   language: LanguageCode,
@@ -4178,6 +4208,21 @@ export type ReindexMutationVariables = {};
 
 export type ReindexMutation = ({ __typename?: 'Mutation' } & { reindex: ({ __typename?: 'JobInfo' } & JobInfoFragment) });
 
+export type SearchForTestOrderQueryVariables = {
+  term: Scalars['String'],
+  take: Scalars['Int']
+};
+
+
+export type SearchForTestOrderQuery = ({ __typename?: 'Query' } & { search: ({ __typename?: 'SearchResponse' } & { items: Array<({ __typename?: 'SearchResult' } & Pick<SearchResult, 'productVariantId' | 'productVariantName' | 'productPreview' | 'sku'> & { price: ({ __typename?: 'SinglePrice' } & Pick<SinglePrice, 'value'>), priceWithTax: ({ __typename?: 'SinglePrice' } & Pick<SinglePrice, 'value'>) })> }) });
+
+export type TestShippingMethodQueryVariables = {
+  input: TestShippingMethodInput
+};
+
+
+export type TestShippingMethodQuery = ({ __typename?: 'Query' } & { testShippingMethod: ({ __typename?: 'TestShippingMethodResult' } & Pick<TestShippingMethodResult, 'eligible'> & { price: Maybe<({ __typename?: 'ShippingPrice' } & Pick<ShippingPrice, 'price' | 'priceWithTax'>)> }) });
+
 export type ShippingMethodFragment = ({ __typename?: 'ShippingMethod' } & Pick<ShippingMethod, 'id' | 'createdAt' | 'updatedAt' | 'code' | 'description'> & { checker: ({ __typename?: 'ConfigurableOperation' } & ConfigurableOperationFragment), calculator: ({ __typename?: 'ConfigurableOperation' } & ConfigurableOperationFragment) });
 
 export type GetShippingMethodListQueryVariables = {
@@ -4212,6 +4257,10 @@ export type UpdateShippingMethodMutationVariables = {
 
 
 export type UpdateShippingMethodMutation = ({ __typename?: 'Mutation' } & { updateShippingMethod: ({ __typename?: 'ShippingMethod' } & ShippingMethodFragment) });
+type DiscriminateUnion<T, U> = T extends U ? T : never;
+
+type RequireField<T, TNames extends string> = T & { [P in TNames]: (T & { [name: string]: never })[P] };
+
 export namespace Administrator {
   export type Fragment = AdministratorFragment;
   export type User = AdministratorFragment['user'];
@@ -5109,6 +5158,24 @@ export namespace Reindex {
   export type Reindex = JobInfoFragment;
 }
 
+export namespace SearchForTestOrder {
+  export type Variables = SearchForTestOrderQueryVariables;
+  export type Query = SearchForTestOrderQuery;
+  export type Search = SearchForTestOrderQuery['search'];
+  export type Items = (NonNullable<SearchForTestOrderQuery['search']['items'][0]>);
+  export type Price = (NonNullable<SearchForTestOrderQuery['search']['items'][0]>)['price'];
+  export type SinglePriceInlineFragment = (DiscriminateUnion<RequireField<(NonNullable<SearchForTestOrderQuery['search']['items'][0]>)['price'], '__typename'>, { __typename: 'SinglePrice' }>);
+  export type PriceWithTax = (NonNullable<SearchForTestOrderQuery['search']['items'][0]>)['priceWithTax'];
+  export type _SinglePriceInlineFragment = (DiscriminateUnion<RequireField<(NonNullable<SearchForTestOrderQuery['search']['items'][0]>)['priceWithTax'], '__typename'>, { __typename: 'SinglePrice' }>);
+}
+
+export namespace TestShippingMethod {
+  export type Variables = TestShippingMethodQueryVariables;
+  export type Query = TestShippingMethodQuery;
+  export type TestShippingMethod = TestShippingMethodQuery['testShippingMethod'];
+  export type Price = (NonNullable<TestShippingMethodQuery['testShippingMethod']['price']>);
+}
+
 export namespace ShippingMethod {
   export type Fragment = ShippingMethodFragment;
   export type Checker = ConfigurableOperationFragment;

admin-ui/src/app/core/providers/local-storage/local-storage.service.ts

@@ -1,13 +1,16 @@
+import { Location } from '@angular/common';
 import { Injectable } from '@angular/core';
 
-export type LocalStorageKey = 'refreshToken' | 'authToken' | 'activeChannelToken';
+export type LocalStorageKey = 'activeChannelToken';
+export type LocalStorageLocationBasedKey = 'shippingTestOrder' | 'shippingTestAddress';
 const PREFIX = 'vnd_';
 
 /**
  * Wrapper around the browser's LocalStorage / SessionStorage object, for persisting data to the browser.
  */
 @Injectable()
 export class LocalStorageService {
+    constructor(private location: Location) {}
     /**
      * Set a key-value pair in the browser's LocalStorage
      */
@@ -16,6 +19,14 @@ export class LocalStorageService {
         localStorage.setItem(keyName, JSON.stringify(value));
     }
 
+    /**
+     * Set a key-value pair specific to the current location (url)
+     */
+    public setForCurrentLocation(key: LocalStorageLocationBasedKey, value: any) {
+        const compositeKey = this.getLocationBasedKey(key);
+        this.set(compositeKey as any, value);
+    }
+
     /**
      * Set a key-value pair in the browser's SessionStorage
      */
@@ -40,12 +51,25 @@ export class LocalStorageService {
         return result;
     }
 
+    /**
+     * Get the value of the given key for the current location (url)
+     */
+    public getForCurrentLocation(key: LocalStorageLocationBasedKey): any {
+        const compositeKey = this.getLocationBasedKey(key);
+        return this.get(compositeKey as any);
+    }
+
     public remove(key: LocalStorageKey): void {
         const keyName = this.keyName(key);
         sessionStorage.removeItem(keyName);
         localStorage.removeItem(keyName);
     }
 
+    private getLocationBasedKey(key: string) {
+        const path = this.location.path();
+        return key + path;
+    }
+
     private keyName(key: LocalStorageKey): string {
         return PREFIX + key;
     }

admin-ui/src/app/data/definitions/settings-definitions.ts

@@ -566,3 +566,38 @@ export const REINDEX = gql`
     }
     ${JOB_INFO_FRAGMENT}
 `;
+
+export const SEARCH_FOR_TEST_ORDER = gql`
+    query SearchForTestOrder($term: String!, $take: Int!) {
+        search(input: { groupByProduct: false, term: $term, take: $take }) {
+            items {
+                productVariantId
+                productVariantName
+                productPreview
+                price {
+                    ... on SinglePrice {
+                        value
+                    }
+                }
+                priceWithTax {
+                    ... on SinglePrice {
+                        value
+                    }
+                }
+                sku
+            }
+        }
+    }
+`;
+
+export const TEST_SHIPPING_METHOD = gql`
+    query TestShippingMethod($input: TestShippingMethodInput!) {
+        testShippingMethod(input: $input) {
+            eligible
+            price {
+                price
+                priceWithTax
+            }
+        }
+    }
+`;

admin-ui/src/app/data/providers/settings-data.service.ts

@@ -33,6 +33,9 @@ import {
     GetZones,
     JobState,
     RemoveMembersFromZone,
+    SearchForTestOrder,
+    TestShippingMethod,
+    TestShippingMethodInput,
     UpdateChannel,
     UpdateChannelInput,
     UpdateCountry,
@@ -73,6 +76,8 @@ import {
     GET_TAX_RATE_LIST,
     GET_ZONES,
     REMOVE_MEMBERS_FROM_ZONE,
+    SEARCH_FOR_TEST_ORDER,
+    TEST_SHIPPING_METHOD,
     UPDATE_CHANNEL,
     UPDATE_COUNTRY,
     UPDATE_GLOBAL_SETTINGS,
@@ -309,4 +314,23 @@ export class SettingsDataService {
             input: { state: JobState.RUNNING },
         });
     }
+
+    searchForTestOrder(term: string, take: number) {
+        return this.baseDataService.query<SearchForTestOrder.Query, SearchForTestOrder.Variables>(
+            SEARCH_FOR_TEST_ORDER,
+            {
+                take,
+                term,
+            },
+        );
+    }
+
+    testShippingMethod(input: TestShippingMethodInput) {
+        return this.baseDataService.query<TestShippingMethod.Query, TestShippingMethod.Variables>(
+            TEST_SHIPPING_METHOD,
+            {
+                input,
+            },
+        );
+    }
 }

admin-ui/src/app/settings/components/shipping-method-detail/shipping-method-detail.component.html

@@ -4,7 +4,7 @@
     <vdr-ab-right>
         <button
             class="btn btn-primary"
-            *ngIf="(isNew$ | async); else updateButton"
+            *ngIf="isNew$ | async; else updateButton"
             (click)="create()"
             [disabled]="detailForm.pristine || detailForm.invalid"
         >
@@ -89,3 +89,32 @@
         </div>
     </div>
 </form>
+<div class="testing-tool">
+    <clr-accordion>
+        <clr-accordion-panel>
+            <clr-accordion-title>{{ 'settings.test-shipping-method' | translate }}</clr-accordion-title>
+            <clr-accordion-content *clrIfExpanded>
+                <div class="clr-row">
+                    <div class="clr-col">
+                        <!--<label class="clr-control-label">{{ 'settings.test-order' | translate }}</label>-->
+                        <vdr-test-order-builder
+                            (orderLinesChange)="setTestOrderLines($event)"
+                        ></vdr-test-order-builder>
+                    </div>
+                    <div class="clr-col">
+                        <vdr-test-address-form
+                            (addressChange)="setTestAddress($event)"
+                        ></vdr-test-address-form>
+                        <vdr-shipping-method-test-result
+                            [currencyCode]="(activeChannel$ | async)?.currencyCode"
+                            [okToRun]="allTestDataPresent() && testDataUpdated && detailForm.valid"
+                            [testDataUpdated]="testDataUpdated"
+                            [testResult]="testResult$ | async"
+                            (runTest)="runTest()"
+                        ></vdr-shipping-method-test-result>
+                    </div>
+                </div>
+            </clr-accordion-content>
+        </clr-accordion-panel>
+    </clr-accordion>
+</div>

admin-ui/src/app/settings/components/shipping-method-detail/shipping-method-detail.component.scss

@@ -0,0 +1,9 @@
+@import "variables";
+
+.testing-tool {
+    margin-top: 48px;
+    h4 {
+        margin-bottom: 12px;
+    }
+    margin-bottom: 128px;
+}