[EP-2447] Preserve cart order after edit

src/app/cart/cart.component.js

@@ -46,8 +46,18 @@ class CartController {
     } else {
       this.loading = true
     }
+    // Remember the order of the existing items in the cart
+    const orderByCode = this.cartData?.items?.map(item => item.code) || []
     this.cartService.get()
       .subscribe(data => {
+        if (reload) {
+          // Sort the incoming cart to match the order of the previous cart, with new items at the top
+          // The code of recurring gifts have a suffix and look like 0123456_MON or 0123456_QUARTERLY.
+          // We will be able to maintain the order of items in the cart as long as the user doesn't
+          // change the frequency of a gift. The server prevents carts from containing multiple gifts
+          // with the same frequency and designation account, which would interfere with sorting.
+          data.items?.sort((item1, item2) => orderByCode.indexOf(item1.code) - orderByCode.indexOf(item2.code))
+        }
         this.cartData = data
         this.setLoadCartVars(reload)
       },
@@ -97,7 +107,6 @@ class CartController {
       .configureProduct(item.code, item.config, true, item.uri)
     modal && modal.result
       .then(() => {
-        pull(this.cartData.items, item)
         this.loadCart(true)
       }, angular.noop)
   }

src/app/cart/cart.component.spec.js

@@ -73,6 +73,23 @@ describe('cart', () => {
       expect(self.controller.updating).toEqual(false)
     })
 
+    it('should preserve the order', () => {
+      self.controller.cartService.get.mockReturnValue(Observable.of({ items: [{ code: '1' }, { code: '2' }, { code: '3' }] }))
+      self.controller.loadCart(true)
+
+      self.controller.cartService.get.mockReturnValue(Observable.of({ items: [{ code: '3' }, { code: '2' }, { code: '1' }, { code: '4' }] }))
+      self.controller.loadCart(true)
+
+      expect(self.controller.cartData).toEqual({ items: [{ code: '4' }, { code: '1' }, { code: '2' }, { code: '3' }] })
+    })
+
+    it('should handle empty data', () => {
+      self.controller.cartService.get.mockReturnValue(Observable.of({}))
+      self.controller.loadCart(true)
+
+      expect(self.controller.cartData).toEqual({})
+    })
+
     it('should handle an error loading cart data', () => {
       self.controller.cartData = 'previous data'
       self.controller.cartService.get.mockReturnValue(Observable.throw('error'))
@@ -178,7 +195,6 @@ describe('cart', () => {
 
       expect(self.controller.productModalService.configureProduct).toHaveBeenCalledWith('0123456', 'some config', true, 'uri1')
       expect(self.controller.loadCart).toHaveBeenCalledWith(true)
-      expect(self.controller.cartData.items).toEqual([{ uri: 'uri2' }])
     })
   })
 

src/app/cart/cart.tpl.html

@@ -39,7 +39,7 @@ <h3 class="panel-name" translate>Your Gift Cart</h3>
                   <tbody>
                   <tr class="giftsum-gift-row" ng-repeat="i in $ctrl.cartData.items">
                     <td class="td-gift">
-                      <img desig-src="{{i.designationNumber}}" class="giftsum-profile pull-left">
+                      <img desig-src="{{i.designationNumber}}" class="giftsum-profile pull-left" width="90" height="51">
                       <span class="giftsum-person giftsum-title"><a ng-href="/{{i.designationNumber}}">{{i.displayName}}</a></span>
                       <span class="giftsum-accountnum giftsum-detail">#{{i.designationNumber}}</span>
                     </td>

src/app/checkout/step-3/step-3.tpl.html

@@ -181,7 +181,7 @@
           </tr>
           <tr class="giftsum-gift-row" ng-repeat-end>
             <td class="td-gift">
-              <img desig-src="{{i.designationNumber}}" class="giftsum-profile pull-left">
+              <img desig-src="{{i.designationNumber}}" class="giftsum-profile pull-left" width="90" height="51">
               <span class="giftsum-person giftsum-title">{{i.displayName}}</span>
               <span class="giftsum-accountnum giftsum-detail">#{{i.designationNumber}}</span>
             </td>

src/assets/cru-scss/_cart.scss

@@ -23,7 +23,6 @@
       padding-bottom: 30px;
     }
     .giftsum-profile {
-      width: 90px;
       height: auto;
       margin-right: 15px;
     }

src/assets/scss/_cart.scss

@@ -54,7 +54,6 @@
       }
     }
     .giftsum-profile {
-      width: 90px;
       height: auto;
       margin-right: 15px;
       @include respond-to(extrasmall) {