feat(admin-ui): Allow order shipping method to be modified

Relates to #978
vendure-ecommerce · Jan 26, 2024 · 7f34329 · 7f34329
1 parent 400d78a
commit 7f34329
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 7 deletions.
diff --git a/packages/admin-ui/src/lib/core/src/common/generated-types.ts b/packages/admin-ui/src/lib/core/src/common/generated-types.ts
@@ -2592,6 +2592,8 @@ export type ModifyOrderInput = {
    */
   refund?: InputMaybe<AdministratorRefundInput>;
   refunds?: InputMaybe<Array<AdministratorRefundInput>>;
+  /** Added in v2.2 */
+  shippingMethodIds?: InputMaybe<Array<Scalars['ID']['input']>>;
   surcharges?: InputMaybe<Array<SurchargeInput>>;
   updateBillingAddress?: InputMaybe<UpdateOrderAddressInput>;
   updateShippingAddress?: InputMaybe<UpdateOrderAddressInput>;
@@ -2602,7 +2604,7 @@ export type ModifyOrderOptions = {
   recalculateShipping?: InputMaybe<Scalars['Boolean']['input']>;
 };
 
-export type ModifyOrderResult = CouponCodeExpiredError | CouponCodeInvalidError | CouponCodeLimitError | InsufficientStockError | NegativeQuantityError | NoChangesSpecifiedError | Order | OrderLimitError | OrderModificationStateError | PaymentMethodMissingError | RefundPaymentIdMissingError;
+export type ModifyOrderResult = CouponCodeExpiredError | CouponCodeInvalidError | CouponCodeLimitError | IneligibleShippingMethodError | InsufficientStockError | NegativeQuantityError | NoChangesSpecifiedError | Order | OrderLimitError | OrderModificationStateError | PaymentMethodMissingError | RefundPaymentIdMissingError;
 
 export type MoveCollectionInput = {
   collectionId: Scalars['ID']['input'];
@@ -7404,7 +7406,7 @@ export type ModifyOrderMutationVariables = Exact<{
 }>;
 
 
-export type ModifyOrderMutation = { modifyOrder: { __typename?: 'CouponCodeExpiredError', errorCode: ErrorCode, message: string } | { __typename?: 'CouponCodeInvalidError', errorCode: ErrorCode, message: string } | { __typename?: 'CouponCodeLimitError', errorCode: ErrorCode, message: string } | { __typename?: 'InsufficientStockError', errorCode: ErrorCode, message: string } | { __typename?: 'NegativeQuantityError', errorCode: ErrorCode, message: string } | { __typename?: 'NoChangesSpecifiedError', errorCode: ErrorCode, message: string } | { __typename?: 'Order', id: string, createdAt: any, updatedAt: any, type: OrderType, code: string, state: string, nextStates: Array<string>, active: boolean, couponCodes: Array<string>, subTotal: number, subTotalWithTax: number, total: number, totalWithTax: number, currencyCode: CurrencyCode, shipping: number, shippingWithTax: number, aggregateOrder?: { __typename?: 'Order', id: string, code: string } | null, sellerOrders?: Array<{ __typename?: 'Order', id: string, code: string, channels: Array<{ __typename?: 'Channel', id: string, code: string }> }> | null, customer?: { __typename?: 'Customer', id: string, firstName: string, lastName: string } | null, lines: Array<{ __typename?: 'OrderLine', id: string, createdAt: any, updatedAt: any, unitPrice: number, unitPriceWithTax: number, proratedUnitPrice: number, proratedUnitPriceWithTax: number, quantity: number, orderPlacedQuantity: number, linePrice: number, lineTax: number, linePriceWithTax: number, discountedLinePrice: number, discountedLinePriceWithTax: number, featuredAsset?: { __typename?: 'Asset', preview: string } | null, productVariant: { __typename?: 'ProductVariant', id: string, name: string, sku: string, trackInventory: GlobalFlag, stockOnHand: number }, discounts: Array<{ __typename?: 'Discount', adjustmentSource: string, amount: number, amountWithTax: number, description: string, type: AdjustmentType }>, fulfillmentLines?: Array<{ __typename?: 'FulfillmentLine', fulfillmentId: string, quantity: number }> | null }>, surcharges: Array<{ __typename?: 'Surcharge', id: string, sku?: string | null, description: string, price: number, priceWithTax: number, taxRate: number }>, discounts: Array<{ __typename?: 'Discount', adjustmentSource: string, amount: number, amountWithTax: number, description: string, type: AdjustmentType }>, promotions: Array<{ __typename?: 'Promotion', id: string, couponCode?: string | null }>, shippingLines: Array<{ __typename?: 'ShippingLine', id: string, discountedPriceWithTax: number, shippingMethod: { __typename?: 'ShippingMethod', id: string, code: string, name: string, fulfillmentHandlerCode: string, description: string } }>, taxSummary: Array<{ __typename?: 'OrderTaxSummary', description: string, taxBase: number, taxRate: number, taxTotal: number }>, shippingAddress?: { __typename?: 'OrderAddress', fullName?: string | null, company?: string | null, streetLine1?: string | null, streetLine2?: string | null, city?: string | null, province?: string | null, postalCode?: string | null, country?: string | null, countryCode?: string | null, phoneNumber?: string | null } | null, billingAddress?: { __typename?: 'OrderAddress', fullName?: string | null, company?: string | null, streetLine1?: string | null, streetLine2?: string | null, city?: string | null, province?: string | null, postalCode?: string | null, country?: string | null, countryCode?: string | null, phoneNumber?: string | null } | null, payments?: Array<{ __typename?: 'Payment', id: string, createdAt: any, transactionId?: string | null, amount: number, method: string, state: string, nextStates: Array<string>, errorMessage?: string | null, metadata?: any | null, refunds: Array<{ __typename?: 'Refund', id: string, createdAt: any, state: string, items: number, adjustment: number, total: number, paymentId: string, reason?: string | null, transactionId?: string | null, method?: string | null, metadata?: any | null, lines: Array<{ __typename?: 'RefundLine', orderLineId: string, quantity: number }> }> }> | null, fulfillments?: Array<{ __typename?: 'Fulfillment', id: string, state: string, nextStates: Array<string>, createdAt: any, updatedAt: any, method: string, trackingCode?: string | null, lines: Array<{ __typename?: 'FulfillmentLine', orderLineId: string, quantity: number }> }> | null, modifications: Array<{ __typename?: 'OrderModification', id: string, createdAt: any, isSettled: boolean, priceChange: number, note: string, payment?: { __typename?: 'Payment', id: string, amount: number } | null, lines: Array<{ __typename?: 'OrderModificationLine', orderLineId: string, quantity: number }>, refund?: { __typename?: 'Refund', id: string, paymentId: string, total: number } | null, surcharges?: Array<{ __typename?: 'Surcharge', id: string }> | null }> } | { __typename?: 'OrderLimitError', errorCode: ErrorCode, message: string } | { __typename?: 'OrderModificationStateError', errorCode: ErrorCode, message: string } | { __typename?: 'PaymentMethodMissingError', errorCode: ErrorCode, message: string } | { __typename?: 'RefundPaymentIdMissingError', errorCode: ErrorCode, message: string } };
+export type ModifyOrderMutation = { modifyOrder: { __typename?: 'CouponCodeExpiredError', errorCode: ErrorCode, message: string } | { __typename?: 'CouponCodeInvalidError', errorCode: ErrorCode, message: string } | { __typename?: 'CouponCodeLimitError', errorCode: ErrorCode, message: string } | { __typename?: 'IneligibleShippingMethodError', errorCode: ErrorCode, message: string } | { __typename?: 'InsufficientStockError', errorCode: ErrorCode, message: string } | { __typename?: 'NegativeQuantityError', errorCode: ErrorCode, message: string } | { __typename?: 'NoChangesSpecifiedError', errorCode: ErrorCode, message: string } | { __typename?: 'Order', id: string, createdAt: any, updatedAt: any, type: OrderType, code: string, state: string, nextStates: Array<string>, active: boolean, couponCodes: Array<string>, subTotal: number, subTotalWithTax: number, total: number, totalWithTax: number, currencyCode: CurrencyCode, shipping: number, shippingWithTax: number, aggregateOrder?: { __typename?: 'Order', id: string, code: string } | null, sellerOrders?: Array<{ __typename?: 'Order', id: string, code: string, channels: Array<{ __typename?: 'Channel', id: string, code: string }> }> | null, customer?: { __typename?: 'Customer', id: string, firstName: string, lastName: string } | null, lines: Array<{ __typename?: 'OrderLine', id: string, createdAt: any, updatedAt: any, unitPrice: number, unitPriceWithTax: number, proratedUnitPrice: number, proratedUnitPriceWithTax: number, quantity: number, orderPlacedQuantity: number, linePrice: number, lineTax: number, linePriceWithTax: number, discountedLinePrice: number, discountedLinePriceWithTax: number, featuredAsset?: { __typename?: 'Asset', preview: string } | null, productVariant: { __typename?: 'ProductVariant', id: string, name: string, sku: string, trackInventory: GlobalFlag, stockOnHand: number }, discounts: Array<{ __typename?: 'Discount', adjustmentSource: string, amount: number, amountWithTax: number, description: string, type: AdjustmentType }>, fulfillmentLines?: Array<{ __typename?: 'FulfillmentLine', fulfillmentId: string, quantity: number }> | null }>, surcharges: Array<{ __typename?: 'Surcharge', id: string, sku?: string | null, description: string, price: number, priceWithTax: number, taxRate: number }>, discounts: Array<{ __typename?: 'Discount', adjustmentSource: string, amount: number, amountWithTax: number, description: string, type: AdjustmentType }>, promotions: Array<{ __typename?: 'Promotion', id: string, couponCode?: string | null }>, shippingLines: Array<{ __typename?: 'ShippingLine', id: string, discountedPriceWithTax: number, shippingMethod: { __typename?: 'ShippingMethod', id: string, code: string, name: string, fulfillmentHandlerCode: string, description: string } }>, taxSummary: Array<{ __typename?: 'OrderTaxSummary', description: string, taxBase: number, taxRate: number, taxTotal: number }>, shippingAddress?: { __typename?: 'OrderAddress', fullName?: string | null, company?: string | null, streetLine1?: string | null, streetLine2?: string | null, city?: string | null, province?: string | null, postalCode?: string | null, country?: string | null, countryCode?: string | null, phoneNumber?: string | null } | null, billingAddress?: { __typename?: 'OrderAddress', fullName?: string | null, company?: string | null, streetLine1?: string | null, streetLine2?: string | null, city?: string | null, province?: string | null, postalCode?: string | null, country?: string | null, countryCode?: string | null, phoneNumber?: string | null } | null, payments?: Array<{ __typename?: 'Payment', id: string, createdAt: any, transactionId?: string | null, amount: number, method: string, state: string, nextStates: Array<string>, errorMessage?: string | null, metadata?: any | null, refunds: Array<{ __typename?: 'Refund', id: string, createdAt: any, state: string, items: number, adjustment: number, total: number, paymentId: string, reason?: string | null, transactionId?: string | null, method?: string | null, metadata?: any | null, lines: Array<{ __typename?: 'RefundLine', orderLineId: string, quantity: number }> }> }> | null, fulfillments?: Array<{ __typename?: 'Fulfillment', id: string, state: string, nextStates: Array<string>, createdAt: any, updatedAt: any, method: string, trackingCode?: string | null, lines: Array<{ __typename?: 'FulfillmentLine', orderLineId: string, quantity: number }> }> | null, modifications: Array<{ __typename?: 'OrderModification', id: string, createdAt: any, isSettled: boolean, priceChange: number, note: string, payment?: { __typename?: 'Payment', id: string, amount: number } | null, lines: Array<{ __typename?: 'OrderModificationLine', orderLineId: string, quantity: number }>, refund?: { __typename?: 'Refund', id: string, paymentId: string, total: number } | null, surcharges?: Array<{ __typename?: 'Surcharge', id: string }> | null }> } | { __typename?: 'OrderLimitError', errorCode: ErrorCode, message: string } | { __typename?: 'OrderModificationStateError', errorCode: ErrorCode, message: string } | { __typename?: 'PaymentMethodMissingError', errorCode: ErrorCode, message: string } | { __typename?: 'RefundPaymentIdMissingError', errorCode: ErrorCode, message: string } };
 
 export type AddManualPaymentMutationVariables = Exact<{
   input: ManualPaymentInput;

diff --git a/packages/admin-ui/src/lib/core/src/common/introspection-result.ts b/packages/admin-ui/src/lib/core/src/common/introspection-result.ts
@@ -130,6 +130,7 @@
       "CouponCodeExpiredError",
       "CouponCodeInvalidError",
       "CouponCodeLimitError",
+      "IneligibleShippingMethodError",
       "InsufficientStockError",
       "NegativeQuantityError",
       "NoChangesSpecifiedError",

diff --git a/packages/admin-ui/src/lib/order/src/common/modify-order-types.ts b/packages/admin-ui/src/lib/order/src/common/modify-order-types.ts
@@ -12,6 +12,7 @@ export interface OrderSnapshot {
     currencyCode: CurrencyCode;
     couponCodes: string[];
     lines: OrderDetailFragment['lines'];
+    shippingLines: OrderDetailFragment['shippingLines'];
 }
 
 export type ProductSelectorItem = ProductSelectorSearchQuery['search']['items'][number];

diff --git a/packages/admin-ui/src/lib/order/src/components/order-editor/order-editor.component.html b/packages/admin-ui/src/lib/order/src/components/order-editor/order-editor.component.html
@@ -22,6 +22,7 @@
                 [shippingAddressForm]="shippingAddressForm"
                 [billingAddressForm]="billingAddressForm"
                 [couponCodesControl]="couponCodesControl"
+                [updatedShippingMethods]="updatedShippingMethods"
             ></vdr-order-modification-summary>
 
             <div *ngIf="!hasModifications()" class="no-modifications">
@@ -194,12 +195,12 @@
                 <vdr-dt2-column
                     *ngFor="let customField of orderLineCustomFields"
                     [id]="customField.name"
-                    [heading]="customField | customFieldLabel:(uiLanguage$ | async)"
+                    [heading]="customField | customFieldLabel : (uiLanguage$ | async)"
                     [hiddenByDefault]="true"
                 >
                     <ng-template let-line="item" let-index="index">
                         <vdr-custom-field-control
-                                [compact]="true"
+                            [compact]="true"
                             [entityName]="'OrderLine'"
                             [customField]="customField"
                             [customFieldsFormGroup]="orderLineCustomFieldsFormArray.at(index)"
@@ -255,6 +256,19 @@
                 </div>
             </div>
         </vdr-card>
+        <vdr-card [title]="'order.shipping' | translate">
+            <div *ngFor="let shippingLine of order.shippingLines" class="flex items-center">
+                <ng-container *ngIf="getShippingLineDetails(shippingLine) as details">
+                    <div>{{ details.name }}:</div>
+                    <div class="mx-1">
+                        {{ details.price | localeCurrency : order.currencyCode }}
+                    </div>
+                    <button class="button-small" (click)="setShippingMethod(shippingLine.id)">
+                        {{ 'order.set-shipping-method' | translate }}
+                    </button>
+                </ng-container>
+            </div>
+        </vdr-card>
         <vdr-card [title]="'order.add-surcharge' | translate">
             <form [formGroup]="surchargeForm" (submit)="addSurcharge(surchargeForm.value)">
                 <div class="form-grid">