Getting a "Delivery Mode not set" for single page guest checkout - sap-commerce-cloud

Question

Im currently working in a project that uses the Spartacus 3.2.2 and SAP Commerce 2011 with B2C accelerator. The project doesn't follow the traditional shopping website but leverages the functionality of Spartacus and SAP Commerce for its own purposes. We have a single page guest checkout flow where the Delivery Address, Payment Details and Delivery Mode gets set with the cart when an angular component loads.
The context is that lets assume a user has a form where they enter some information like email, and some other details and click next. A cart gets generated with a sample product getting added to it and the email gets associated. The users get redirected to a page to review the information that they want to submit and this page is the single page guest checkout. When this page loads, the payment details, delivery address and delivery mode get set behind the scenes and the user will not notice anything. They click submit and they create an order behind the scenes, the frontend will show something else user when they land on the confirmation page.
The issue is that when the user submit the information after reviewing it, the order call fails and we get a "delivery mode not set" and it is INCONSISTENT.
Here is a sample code that we use for the single page guest checkout:
#Component({
selector: "review-details",
templateUrl: "./review-details.component.html",
host: { class: "template-component" },
})
export class ReviewDetailsComponent implements OnInit, OnDestroy, AfterViewInit {
hasSetAddress: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
hasSetDeliveryMode: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
hasSetPaymentDetails: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
subscriptions:any = [];
ngOnInit() {
// Just an example address. A proper valid dummy address and region is used for our project.
let address: Address = {
firstName: "No Name",
lastName: "No Name",
email: "NoName#noname.com",
line1: "XYZ Mason Street",
line2: "",
town: "yolotown",
postalCode: "12345",
country: { isocode: "US" },
defaultAddress: false,
region: {
countryIso: "US",
isocode: "US-CA",
isocodeShort: "CA",
name: "California",
},
titleCode: "",
};
let paymentDetails: PaymentDetails = {
cardNumber: "4111111111111111",
expiryMonth: "12",
expiryYear: "2025",
billingAddress: address,
cvn: "123",
accountHolderName: "No Name",
cardType: {
code: "visa",
name: "Visa",
},
defaultPayment: false,
saved: false,
};
}
this.subscriptions = this.subscriptions.concat(
{
key: 'setAddress',
value: this.checkoutDeliveryService.getDeliveryAddress().subscribe((addr: Address) => {
if (_isNil(addr) || (!_isNil(addr) && _isEmpty(addr))) {
this.checkoutDeliveryService.createAndSetAddress(address);
} else {
this.hasSetAddress.next(true);
}
})
},
{
key: 'setDeliveryModeStatus',
value: this.checkoutDeliveryService.getSupportedDeliveryModes().pipe(
withLatestFrom(
this.checkoutDeliveryService
.getSelectedDeliveryMode()
.pipe(map((deliveryMode: DeliveryMode) => deliveryMode && deliveryMode.code ? deliveryMode.code : null))
)
).subscribe(([deliveryModes, code]: [DeliveryMode[], string]) => {
if (_isNil(code)) {
if (!_isNil(deliveryModes) && !_isEmpty(deliveryModes)) {
code = this.checkoutConfigService.getPreferredDeliveryMode(deliveryModes);
if (code) {
this.checkoutDeliveryService.setDeliveryMode(code);
}
}
} else {
this.hasSetDeliveryMode.next(true);
}
})
},
{
key: 'setPaymentDetails',
value: this.checkoutPaymentService.getPaymentDetails().subscribe((paymentInfo: PaymentDetails) => {
if (_isNil(paymentInfo) || (!_isNil(paymentInfo) && _isEmpty(paymentInfo))) {
this.checkoutPaymentService.createPaymentDetails(paymentDetails);
} else {
this.checkoutPaymentService.paymentProcessSuccess();
this.hasSetPaymentDetails.next(true);
}
})
},
{
key: 'placeOrder',
value: this.checkoutService
.getOrderDetails()
.pipe(filter(order => Object.keys(order).length !== 0))
.subscribe(() => {
this.routingService.go({ cxRoute: 'orderConfirmation' });
})
}
)
}
So now the questions are:
how do we even find the root cause to this "delivery mode not set" when it is inconsistent? To give more context, the request calls for the payments, address and delivery mode are getting made correctly but when the final cart object gets returned after the requests are made, we don't have the delivery cost getting set sometimes.
Is there a way to optimize the code to rule out any race conditions that may happen? Considering that all the operations to add the payment details, address, and delivery mode are set asynchronously for the same cart.
Any help is appreciated and even optimization ideas are welcome.
Thank you
References:
Spartacus Checkout guide: https://sap.github.io/spartacus-docs/3.x/extending-checkout/#combining-checkout-steps

Answer 1

please refer to this SAP note for an explanation on multiple updates to checkout information using OCC API calls:
https://launchpad.support.sap.com/#/notes/2998330.
Summary: to perform various updates for checkout at the same time, you need to use a single API call. The SAP note provides an example extension you can use for this scenario.
Best regards,
Jerry

Answer 2

Here is the answer to my own question, thanks to the SAP Support and the Spartacus Development teams for helping me with this.
In addition to Jerry's answer which is more of a permanent and straight forward solution which would need to be done on both frontend and backend, here is another solution which only requires us to make changes on the frontend only.
The code can be changed in the following manner to make the calls sequentially load the details on the cart.
#Component({
selector: "review-details",
templateUrl: "./review-details.component.html",
host: { class: "template-component" },
})
export class ReviewDetailsComponent implements OnInit, OnDestroy, AfterViewInit {
hasSetAddress: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
hasSetDeliveryMode: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
hasSetPaymentDetails: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
subscriptions: any = [];
// Just an example address. A proper valid dummy address and region is used for our project.
private address: Address = {
firstName: "No Name",
lastName: "No Name",
email: "NoName#noname.com",
line1: "XYZ Mason Street",
line2: "",
town: "yolotown",
postalCode: "12345",
country: { isocode: "US" },
defaultAddress: false,
region: {
countryIso: "US",
isocode: "US-CA",
isocodeShort: "CA",
name: "California",
},
titleCode: "",
}
private paymentDetails: PaymentDetails = {
cardNumber: "4111111111111111",
expiryMonth: "12",
expiryYear: "2025",
billingAddress: address,
cvn: "123",
accountHolderName: "No Name",
cardType: {
code: "visa",
name: "Visa",
},
defaultPayment: false,
saved: false,
}
private address$: Observable<Address> = this.checkoutDeliveryService.getDeliveryAddress().pipe(
tap((addr: Address) => {
if (_isNil(addr) || (!_isNil(addr) && _isEmpty(addr))) {
this.checkoutDeliveryService.createAndSetAddress(this.address);
}
}),
filter((addr) => (!_isNil(addr) && !_isEmpty(addr)))
);
private deliveryMode$: Observable<string> = this.checkoutDeliveryService.getSupportedDeliveryModes().pipe(
filter((deliveryModes: DeliveryMode[]) => deliveryModes?.length !== 0),
withLatestFrom(
this.checkoutDeliveryService.getSelectedDeliveryMode()
.pipe(map((selectedDeliveryMode: DeliveryMode) => selectedDeliveryMode?.code))
),
map(([deliveryModes, code]: [DeliveryMode[], string]) => {
return code
? code
: this.checkoutConfigService.getPreferredDeliveryMode(deliveryModes);
}),
tap((code) => {
if (code) {
this.checkoutDeliveryService.setDeliveryMode(code);
}
}),
filter((code) => !!code)
);
private payment$: Observable<PaymentDetails> = this.checkoutPaymentService.getPaymentDetails().pipe(
tap((paymentInfo: PaymentDetails) => {
if (_isNil(paymentInfo) || (!_isNil(paymentInfo) && _isEmpty(paymentInfo))) {
this.checkoutPaymentService.createPaymentDetails(this.paymentDetails);
}
}),
filter((paymentInfo) => (!_isNil(paymentInfo) && !_isEmpty(paymentInfo)))
);
private setCartDetails$: Observable<boolean> = this.address$.pipe(
take(1),
map((_) => this.deliveryMode$.pipe(take(1))),
concatAll(),
map((_) => this.payment$.pipe(take(1))),
concatAll(),
map((_) => {
this.checkoutPaymentService.paymentProcessSuccess();
this.hasSetAddress.next(true);
this.hasSetDeliveryMode.next(true);
this.hasSetPaymentDetails.next(true);
return true;
}));
ngOnInit() {
this.subscriptions = this.subscriptions.concat(
{
key: "setCartDetails",
value: this.setCartDetails$.subscribe((status: boolean) => console.log(status))
},
{
key: 'placeOrder',
value: this.checkoutService
.getOrderDetails()
.pipe(filter(order => Object.keys(order).length !== 0))
.subscribe(() => {
this.routingService.go({ cxRoute: 'orderConfirmation' });
})
}
)
}
}