Skip to content

feat(checkout): CHECKOUT-9679 Handle Coupon Error #2726

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bc-peng merged 4 commits into from
Dec 10, 2025
Merged

feat(checkout): CHECKOUT-9679 Handle Coupon Error #2726

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fe19ebb
feat(checkout): CHECKOUT-9679 Handle Coupon Error
bc-peng Dec 9, 2025
d2e2997
Disable coupon form when calling API
bc-peng Dec 9, 2025
81b8d36
Remove timed auto-dismiss
bc-peng Dec 10, 2025
86148c2
Update experiment name
bc-peng Dec 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 25 additions & 8 deletions packages/core/src/app/coupon/components/CouponForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,26 +11,40 @@ import { useMultiCoupon } from '../useMultiCoupon';
import { AppliedCouponsOrGiftCertificates } from './AppliedCouponsOrGiftCertificates';

export const CouponForm: FunctionComponent = () => {
const [applyCouponError, setApplyCouponError] = useState<string | null>(null);
const [code, setCode] = useState<string>('');

const { themeV2 } = useThemeContext();
const { language } = useLocale();
const { applyCouponOrGiftCertificate } = useMultiCoupon();
const {
applyCouponOrGiftCertificate,
couponError,
setCouponError,
shouldDisableCouponForm,
} = useMultiCoupon();

const handleTextInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setCode(event.currentTarget.value.trim());
};

const clearErrorOnClick = () => {
if (couponError) {
setCouponError(null);
}
};

const submitForm = async () => {
if (!code) {
return;
}

try {
await applyCouponOrGiftCertificate(code);

setCode('');
} catch (error) {
// TODO: Handle different error types accordingly
// eslint-disable-next-line no-console
console.log(error);
if (error instanceof Error) {
setCouponError(error.message);
}
Comment on lines +45 to +47
Copy link
Contributor Author

@bc-peng bc-peng Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We just relay the error message from the API here.
If it is not a standard error, then it will escalate to the ErrorBoundries and go to Sentry eventually.

}
};

Expand All @@ -40,7 +54,9 @@ export const CouponForm: FunctionComponent = () => {
<TextInput
additionalClassName="form-input optimizedCheckout-form-input coupon-input"
aria-label={language.translate('redeemable.code_label')}
disabled={shouldDisableCouponForm}
onChange={handleTextInputChange}
onClick={clearErrorOnClick}
placeholder={language.translate('redeemable.coupon_placeholder')}
testId="redeemableEntry-input"
themeV2={themeV2}
Expand All @@ -50,6 +66,7 @@ export const CouponForm: FunctionComponent = () => {
className={classNames('coupon-button', {
'body-bold': themeV2,
})}
disabled={shouldDisableCouponForm}
id="applyRedeemableButton"
onClick={submitForm}
testId="redeemableEntry-submit"
Expand All @@ -59,11 +76,11 @@ export const CouponForm: FunctionComponent = () => {
</Button>
</div>
<div className="applied-coupons-list">
{Boolean(applyCouponError) &&
{Boolean(couponError) &&
<ul className="applied-coupon-error-message" role="alert">
<IconError />
<span>{applyCouponError}</span>
<span onClick={() => setApplyCouponError(null)}><IconRemoveCoupon /></span>
<span>{couponError}</span>
<span onClick={() => setCouponError(null)}><IconRemoveCoupon /></span>
</ul>
}
<AppliedCouponsOrGiftCertificates />
Expand Down
81 changes: 81 additions & 0 deletions packages/core/src/app/coupon/useMultiCoupon.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ describe('useMultiCoupon', () => {
getCoupons: jest.fn(),
getGiftCertificates: jest.fn(),
},
statuses: {
isSubmittingOrder: jest.fn(),
isPending: jest.fn(),
},
};

beforeEach(() => {
Expand All @@ -39,6 +43,8 @@ describe('useMultiCoupon', () => {
checkoutState.data.getConfig.mockReturnValue(getStoreConfig());
checkoutState.data.getCoupons.mockReturnValue([]);
checkoutState.data.getGiftCertificates.mockReturnValue([]);
checkoutState.statuses.isSubmittingOrder.mockReturnValue(false);
checkoutState.statuses.isPending.mockReturnValue(false);
});

afterEach(() => {
Expand All @@ -51,8 +57,11 @@ describe('useMultiCoupon', () => {
expect(result.current.appliedCoupons).toEqual([]);
expect(result.current.appliedGiftCertificates).toEqual([]);
expect(result.current.applyCouponOrGiftCertificate).toBeInstanceOf(Function);
expect(result.current.couponError).toBe(null);
expect(result.current.removeCoupon).toBeInstanceOf(Function);
expect(result.current.removeGiftCertificate).toBeInstanceOf(Function);
expect(result.current.setCouponError).toBeInstanceOf(Function);
expect(result.current.shouldDisableCouponForm).toBe(false);
expect(result.current.isCouponCodeCollapsed).toBe(true);
});

Expand Down Expand Up @@ -243,5 +252,77 @@ describe('useMultiCoupon', () => {
expect(removeGiftCertificate).toHaveBeenCalledTimes(1);
});
});

describe('couponError', () => {
it('initializes with null error', () => {
const { result } = renderHook(() => useMultiCoupon());

expect(result.current.couponError).toBe(null);
});

it('sets error when setCouponError is called', () => {
const { result } = renderHook(() => useMultiCoupon());

act(() => {
result.current.setCouponError('Test error message');
});

expect(result.current.couponError).toBe('Test error message');
});

it('clears error when setCouponError is called with null', () => {
const { result } = renderHook(() => useMultiCoupon());

act(() => {
result.current.setCouponError('Test error message');
});

expect(result.current.couponError).toBe('Test error message');

act(() => {
result.current.setCouponError(null);
});

expect(result.current.couponError).toBe(null);
});
});

describe('shouldDisableCouponForm', () => {
it('returns false when order is not being submitted and not pending', () => {
checkoutState.statuses.isSubmittingOrder.mockReturnValue(false);
checkoutState.statuses.isPending.mockReturnValue(false);

const { result } = renderHook(() => useMultiCoupon());

expect(result.current.shouldDisableCouponForm).toBe(false);
});

it('returns true when order is being submitted', () => {
checkoutState.statuses.isSubmittingOrder.mockReturnValue(true);
checkoutState.statuses.isPending.mockReturnValue(false);

const { result } = renderHook(() => useMultiCoupon());

expect(result.current.shouldDisableCouponForm).toBe(true);
});

it('returns true when order is pending', () => {
checkoutState.statuses.isSubmittingOrder.mockReturnValue(false);
checkoutState.statuses.isPending.mockReturnValue(true);

const { result } = renderHook(() => useMultiCoupon());

expect(result.current.shouldDisableCouponForm).toBe(true);
});

it('returns true when both submitting and pending', () => {
checkoutState.statuses.isSubmittingOrder.mockReturnValue(true);
checkoutState.statuses.isPending.mockReturnValue(true);

const { result } = renderHook(() => useMultiCoupon());

expect(result.current.shouldDisableCouponForm).toBe(true);
});
});
});

23 changes: 19 additions & 4 deletions packages/core/src/app/coupon/useMultiCoupon.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { useState } from 'react';

import { useCheckout } from '@bigcommerce/checkout/contexts';

import { EMPTY_ARRAY } from '../common/utility';
Expand All @@ -6,14 +8,24 @@ interface UseMultiCouponValues {
appliedCoupons: Array<{ code: string }>;
appliedGiftCertificates: Array<{ code: string }>;
applyCouponOrGiftCertificate: (code: string) => Promise<void>;
couponError: string | null;
isCouponCodeCollapsed: boolean;
removeCoupon: (code: string) => Promise<void>;
removeGiftCertificate: (giftCertificateCode: string) => Promise<void>;
isCouponCodeCollapsed: boolean;
setCouponError: (error: string | null) => void;
shouldDisableCouponForm: boolean;
}

export const useMultiCoupon = (): UseMultiCouponValues => {
const [couponError, setCouponError] = useState<string | null>(null);

const { checkoutState, checkoutService } = useCheckout();
const config = checkoutState.data.getConfig();
const {
data: { getConfig },
statuses: { isSubmittingOrder, isPending }
} = checkoutState;
const config = getConfig();
const shouldDisableCouponForm = isSubmittingOrder() || isPending();

if (!config) {
throw new Error('Checkout configuration is not available');
Expand Down Expand Up @@ -57,8 +69,11 @@ export const useMultiCoupon = (): UseMultiCouponValues => {
appliedCoupons,
appliedGiftCertificates,
applyCouponOrGiftCertificate,
removeGiftCertificate,
removeCoupon,
couponError,
isCouponCodeCollapsed: config.checkoutSettings.isCouponCodeCollapsed,
removeCoupon,
removeGiftCertificate,
setCouponError,
shouldDisableCouponForm,
};
};
2 changes: 1 addition & 1 deletion packages/core/src/app/order/OrderSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const OrderSummary: FunctionComponent<OrderSummaryProps & OrderSummarySubtotalsP
const { checkoutSettings } = checkoutState.data.getConfig() ?? {};

// TODO: When removing the experiment, rename `NewOrderSummarySubtotals` to `OrderSummarySubtotals`.
const isMultiCouponEnabled = isExperimentEnabled(checkoutSettings, 'PROJECT-7321-5991.multi-coupon-cart-checkout', false);
const isMultiCouponEnabled = isExperimentEnabled(checkoutSettings, 'CHECKOUT-9674.multi_coupon_cart_checkout', false);

const nonBundledLineItems = useMemo(() => removeBundledItems(lineItems), [lineItems]);
const displayInclusiveTax = isTaxIncluded && taxes && taxes.length > 0;
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/app/order/OrderSummaryModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const OrderSummaryModal: FunctionComponent<
}) => {
const { checkoutState } = useCheckout();
const { checkoutSettings } = checkoutState.data.getConfig() ?? {};
const isMultiCouponEnabled = isExperimentEnabled(checkoutSettings, 'PROJECT-7321-5991.multi-coupon-cart-checkout', false);
const isMultiCouponEnabled = isExperimentEnabled(checkoutSettings, 'CHECKOUT-9674.multi_coupon_cart_checkout', false);

const displayInclusiveTax = isTaxIncluded && taxes && taxes.length > 0;

Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/app/payment/PaymentForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ const PaymentForm: FunctionComponent<

const { checkoutState } = useCheckout();
const { checkoutSettings } = checkoutState.data.getConfig() ?? {};
const isMultiCouponEnabled = isExperimentEnabled(checkoutSettings, 'PROJECT-7321-5991.multi-coupon-cart-checkout', false);
const isMultiCouponEnabled = isExperimentEnabled(checkoutSettings, 'CHECKOUT-9674.multi_coupon_cart_checkout', false);

if (shouldExecuteSpamCheck) {
return (
Expand Down
1 change: 0 additions & 1 deletion packages/core/src/scss/components/checkout/coupon/_coupon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@
justify-content: space-between;
padding: spacing('quarter');
width: 100%;
margin-bottom: spacing('half');
gap: spacing('half');
word-break: auto-phrase;

Expand Down