fix: (CXSPA-9098)-Coupon Codes is used in Coupon Campaign URL

projects/assets/src/translations/en/myAccount.json

@@ -63,6 +63,13 @@
     "findProducts": "Find Products",
     "status": "Status:",
     "dialogTitle": "Coupon",
+    "claimCoupondialogTitle": "Add To Your Coupon List",
+    "claimCouponCode": {
+      "label": "Coupon Code",
+      "placeholder": "Enter the coupon code to claim a coupon"
+    },
+    "reset": "RESET",
+    "claim": "CLAIM",
     "claimCustomerCoupon": "You have successfully claimed this coupon.",
     "myCoupons": "My coupons",
     "startDateAsc": "Start Date (ascending)",

projects/core/src/occ/adapters/user/default-occ-user-config.ts

@@ -22,6 +22,7 @@ export const defaultOccUserConfig: OccConfig = {
         addressVerification: 'users/${userId}/addresses/verification',
         customerCoupons: 'users/${userId}/customercoupons',
         claimCoupon: 'users/${userId}/customercoupons/${couponCode}/claim',
+        claimCustomerCoupon: 'users/${userId}/customercoupons/claim',
         couponNotification:
           'users/${userId}/customercoupons/${couponCode}/notification',
         notificationPreference: 'users/${userId}/notificationpreferences',

projects/core/src/occ/adapters/user/occ-customer-coupon.adapter.spec.ts

@@ -235,4 +235,45 @@ describe('OccCustomerCouponAdapter', () => {
       mockReq.flush(customerCoupon2Customer);
     });
   });
+  describe('claim customer coupon with code in body', () => {
+    it('should claim a customer coupon with code in request body for a given user id', () => {
+      const customerCoupon: CustomerCoupon = {
+        couponId: couponCode,
+        name: 'coupon 1',
+        startDate: '',
+        endDate: '',
+        status: 'Effective',
+        description: '',
+        notificationOn: true,
+      };
+      const customerCoupon2Customer: CustomerCoupon2Customer = {
+        coupon: customerCoupon,
+        customer: {},
+      };
+
+      occCustomerCouponAdapter
+        .claimCustomerCouponWithCodeInBody(userId, couponCode)
+        .subscribe((result) => {
+          expect(result).toEqual(customerCoupon2Customer);
+        });
+
+      const mockReq = httpMock.expectOne((req) => {
+        return req.method === 'POST';
+      });
+
+      expect(occEnpointsService.buildUrl).toHaveBeenCalledWith(
+        'claimCustomerCoupon',
+        {
+          urlParams: {
+            userId: userId,
+          },
+        }
+      );
+
+      expect(mockReq.cancelled).toBeFalsy();
+      expect(mockReq.request.body).toEqual({ couponCode: couponCode });
+      expect(mockReq.request.responseType).toEqual('json');
+      mockReq.flush(customerCoupon2Customer);
+    });
+  });
 });

projects/core/src/occ/adapters/user/occ-customer-coupon.adapter.ts

@@ -78,6 +78,20 @@ export class OccCustomerCouponAdapter implements CustomerCouponAdapter {
 
     return this.http.post(url, { headers });
   }
+  claimCustomerCouponWithCodeInBody(
+    userId: string,
+    codeVal: string
+  ): Observable<CustomerCoupon2Customer> {
+    const url = this.occEndpoints.buildUrl('claimCustomerCoupon', {
+      urlParams: { userId },
+    });
+    const toClaim = {
+      couponCode: codeVal,
+    };
+    const headers = this.newHttpHeader();
+
+    return this.http.post(url, toClaim, { headers });
+  }
 
   claimCustomerCoupon(
     userId: string,

projects/core/src/occ/occ-models/occ-endpoints.model.ts

@@ -237,6 +237,12 @@ export interface OccEndpoints {
    * @member {string}
    */
   claimCoupon?: string | OccEndpoint;
+  /**
+   * Endpoint for claiming coupon with code in request body
+   *
+   * @member {string}
+   */
+  claimCustomerCoupon?: string | OccEndpoint;
   /**
    * Endpoint for coupons
    *

projects/core/src/user/connectors/customer-coupon/customer-coupon.adapter.ts

@@ -29,6 +29,11 @@ export abstract class CustomerCouponAdapter {
     couponCode: string
   ): Observable<{}>;
 
+  abstract claimCustomerCouponWithCodeInBody(
+    userId: string,
+    couponVal: string
+  ): Observable<CustomerCoupon2Customer>;
+
   abstract claimCustomerCoupon(
     userId: string,
     couponCode: string

projects/core/src/user/connectors/customer-coupon/customer-coupon.connector.spec.ts

@@ -21,6 +21,9 @@ class MockUserAdapter implements CustomerCouponAdapter {
   claimCustomerCoupon = createSpy('claimCustomerCoupon').and.callFake(
     (userId) => of(`claim-${userId}`)
   );
+  claimCustomerCouponWithCodeInBody = createSpy(
+    'claimCustomerCouponWithCodeInBody'
+  ).and.callFake((userId) => of(`claim-${userId}`));
   disclaimCustomerCoupon = createSpy('disclaimCustomerCoupon').and.callFake(
     (userId) => of(`disclaim-${userId}`)
   );
@@ -89,7 +92,7 @@ describe('CustomerCouponConnector', () => {
       .claimCustomerCoupon('userId', 'couponCode')
       .subscribe((res) => (result = res));
     expect(result).toEqual('claim-userId');
-    expect(adapter.claimCustomerCoupon).toHaveBeenCalledWith(
+    expect(adapter.claimCustomerCouponWithCodeInBody).toHaveBeenCalledWith(
       'userId',
       'couponCode'
     );

projects/core/src/user/connectors/customer-coupon/customer-coupon.connector.ts

@@ -43,7 +43,7 @@ export class CustomerCouponConnector {
     userId: string,
     couponCode: string
   ): Observable<CustomerCoupon2Customer> {
-    return this.adapter.claimCustomerCoupon(userId, couponCode);
+    return this.adapter.claimCustomerCouponWithCodeInBody(userId, couponCode);
   }
 
   disclaimCustomerCoupon(

projects/storefrontapp-e2e-cypress/cypress/e2e/regression/coupons/my-coupons.e2e-spec-flaky.cy.ts

@@ -34,6 +34,16 @@ viewportContext(['mobile', 'desktop'], () => {
     });
   });
 
+  describe('My coupons - claim coupons with code in body using authenticated user', () => {
+    beforeEach(() => {
+      cy.window().then((win) => {
+        win.sessionStorage.clear();
+      });
+      cy.requireLoggedIn();
+    });
+    myCoupons.testClaimCustomerCouponWithCodeInBody();
+  });
+
   describe('My coupons - Authenticated user', () => {
     beforeEach(() => {
       cy.window().then((win) => {

projects/storefrontapp-e2e-cypress/cypress/helpers/coupons/my-coupons.ts

@@ -70,6 +70,14 @@ export function verifyClaimCouponSuccess(couponCode: string) {
   });
 }
 
+export function verifClaimCouponSuccessWithCodeInBody(couponCode: string) {
+  claimCouponWithCodeInBody(couponCode);
+  cy.location('pathname').should('contain', myCouponsUrl);
+  cy.get('.cx-coupon-card').within(() => {
+    cy.get('.cx-coupon-card-id').should('contain', couponCode);
+  });
+}
+
 export function verifyClaimCouponFail(couponCode: string) {
   claimCoupon(couponCode);
   cy.location('pathname').should('contain', myCouponsUrl);
@@ -78,6 +86,14 @@ export function verifyClaimCouponFail(couponCode: string) {
   });
 }
 
+export function verifyClaimCouponFailWithCodeInBody(couponCode: string) {
+  claimCouponWithCodeInBody(couponCode);
+  cy.location('pathname').should('contain', myCouponsUrl);
+  cy.get('.cx-coupon-card').within(() => {
+    cy.get('.cx-coupon-card-id').should('not.contain', couponCode);
+  });
+}
+
 export function goMyCoupon() {
   cy.visit('/my-account/coupons');
   cy.get('.cx-coupon-card').should('have.length', 3);
@@ -115,6 +131,24 @@ export function claimCoupon(couponCode: string) {
   cy.wait(`@${getCoupons}`);
 }
 
+export function claimCouponWithCodeInBody(couponCode: string) {
+  const claimCoupon = waitForClaimCouponWithCodeInBody(couponCode);
+  const getCoupons = waitForGetCoupons();
+  const couponsPage = waitForPage(myCouponsUrl, 'getCouponsPage');
+  cy.visit(myCouponsUrl + '#' + couponCode);
+
+  verifyClaimDialog();
+  cy.wait(`@${claimCoupon}`);
+
+  cy.wait(`@${couponsPage}`);
+  cy.wait(`@${getCoupons}`);
+}
+
+export function verifyResetClaimCouponCode(couponCode: string) {
+  cy.visit(myCouponsUrl + '#' + couponCode);
+  verifyResetByClickButton(couponCode);
+}
+
 export function createStandardUser() {
   standardUser.registrationData.email = generateMail(randomString(), true);
   cy.requireLoggedIn(standardUser);
@@ -174,6 +208,24 @@ export function verifyReadMore() {
   cy.get('.cx-dialog-header span').click();
 }
 
+export function verifyClaimDialog() {
+  cy.get('cx-claim-dialog').should('exist');
+  cy.get('.cx-dialog-body .cx-dialog-row-submit-button .btn:first').click({
+    force: true,
+  });
+}
+
+export function verifyResetByClickButton(couponCode: string) {
+  cy.get('cx-claim-dialog').should('exist');
+  cy.get('.cx-dialog-body input').should('have.value', couponCode);
+  cy.get('[formcontrolname="couponCode"]').clear().type('resetTest');
+  cy.get('.cx-dialog-body input').should('have.value', 'resetTest');
+  cy.get('.cx-dialog-body .cx-dialog-row--reset-button .btn:first').click({
+    force: true,
+  });
+  cy.get('.cx-dialog-body input').should('have.value', couponCode);
+}
+
 export function verifyFindProduct(couponCode: string, productNumber: number) {
   const productSearchPage = waitForPage('search', 'getProductSearchPage');
 
@@ -214,6 +266,15 @@ export function waitForGetCoupons(): string {
   return `${aliasName}`;
 }
 
+export function waitForClaimCouponWithCodeInBody(couponCode: string): string {
+  const aliasName = `claimCouponInBody_${couponCode}`;
+  cy.intercept({
+    method: 'POST',
+    url: `${pageUrl}/users/current/customercoupons/claim*`,
+  }).as(aliasName);
+  return `${aliasName}`;
+}
+
 export function testClaimCustomerCoupon() {
   describe('Claim customer coupon', () => {
     it('should claim customer coupon successfully', () => {
@@ -227,3 +288,22 @@ export function testClaimCustomerCoupon() {
     });
   });
 }
+
+export function testClaimCustomerCouponWithCodeInBody() {
+  describe('Claim customer coupon with code in requestBody', () => {
+    it('should claim customer coupon successfully with code in requestBody', () => {
+      verifClaimCouponSuccessWithCodeInBody(validCouponCode);
+      cy.saveLocalStorage();
+    });
+
+    it('should not claim invalid customer coupon', () => {
+      cy.restoreLocalStorage();
+      verifyClaimCouponFailWithCodeInBody(invalidCouponCode);
+    });
+
+    it('should reset coupon code val after clicking reset button', () => {
+      cy.restoreLocalStorage();
+      verifyResetClaimCouponCode(validCouponCode);
+    });
+  });
+}

projects/storefrontlib/cms-components/myaccount/my-coupons/claim-dialog/claim-dialog.component.html

@@ -0,0 +1,102 @@
+<div
+  class="cx-coupon-dialog"
+  role="dialog"
+  [cxFocus]="focusConfig"
+  (esc)="close('Escape clicked')"
+  aria-labelledby="dialogTitle"
+>
+  <div class="cx-coupon-container">
+    <!-- Modal Header -->
+
+    <div class="cx-dialog-header modal-header">
+      <h3
+        *cxFeature="'a11yDialogsHeading'"
+        id="dialogTitle"
+        class="cx-dialog-title modal-title"
+      >
+        {{ 'myCoupons.claimCoupondialogTitle' | cxTranslate }}
+      </h3>
+      <div
+        *cxFeature="'!a11yDialogsHeading'"
+        id="dialogTitle"
+        class="cx-dialog-title modal-title"
+      >
+        {{ 'myCoupons.claimCoupondialogTitle' | cxTranslate }}
+      </div>
+      <button
+        type="button"
+        class="close"
+        title="{{ 'common.close' | cxTranslate }}"
+        [attr.aria-label]="'common.close' | cxTranslate"
+        (click)="close('Cross click')"
+      >
+        <span aria-hidden="true">
+          <cx-icon [type]="iconTypes.CLOSE"></cx-icon>
+        </span>
+      </button>
+    </div>
+    <!-- Modal Body -->
+    <div class="cx-dialog-body modal-body">
+      <form (ngSubmit)="onSubmit()" [formGroup]="form" class="cx-dialog-item">
+        <label>
+          <span class="label-content"
+            >{{ 'myCoupons.claimCouponCode.label' | cxTranslate }}
+            <ng-template [ngTemplateOutlet]="requiredAsterisk"></ng-template
+          ></span>
+          <input
+            required="true"
+            type="text"
+            name="couponCode"
+            formControlName="couponCode"
+            placeholder="{{
+              'myCoupons.claimCouponCode.placeholder' | cxTranslate
+            }}"
+            class="form-control"
+          />
+
+          <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
+          <cx-form-errors
+            *cxFeature="'formErrorsDescriptiveMessages'"
+            [translationParams]="{
+              label: 'myCoupons.claimCouponCode.label' | cxTranslate,
+            }"
+            [control]="form.get('couponCode')"
+          ></cx-form-errors>
+          <cx-form-errors
+            *cxFeature="'!formErrorsDescriptiveMessages'"
+            [control]="form.get('couponCode')"
+          ></cx-form-errors>
+        </label>
+        <div class="cx-dialog-row">
+          <div class="col-md-6 cx-dialog-row--reset-button">
+            <a
+              role="button"
+              class="btn btn-block btn-secondary"
+              (click)="cancelEdit()"
+            >
+              {{ 'myCoupons.reset' | cxTranslate }}
+            </a>
+          </div>
+          <div class="col-md-6 cx-dialog-row-submit-button">
+            <button
+              class="btn btn-block btn-primary"
+              [disabled]="form.disabled"
+            >
+              {{ 'myCoupons.claim' | cxTranslate }}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<ng-template #requiredAsterisk>
+  <abbr
+    *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
+    class="text-decoration-none"
+    title="{{ 'common.required' | cxTranslate }}"
+    >*</abbr
+  >
+</ng-template>