Feat/Cart and order data persistence on the server side

[marcin-slezak]

Background

Voucherify is a Promotion Engine which allows marketing teams to run digital promotions like coupons, gift cards, referrals, bundles and loyalty. As the headless commerce solution and Mach Alliance member, we want to integrate Composable UI with Voucherify to help our community better understand how to build promotion features efficiently in the composable commerce storefront.

I appreciate your effort to build and share the Composable UI accelerator. I really enjoy working on this application; it's flexible and well-designed. Still, I encountered a problem which I need to solve first before I will be able to continue building this integration (as a part of another future PR).

Problem

To show a little more advanced digital promotion scenarios in the storefront, we need functionality that allows users to add more than one product to the cart in Composable UI. Unfortunately, currently as the user :

• we see in the cart only one recently added product; adding the next cart item overwrites the existing product in the cart,
• cart reset to the default state (one Venture Daypack product) after refreshing the page in the browser,
• a new order is not built on the top of the current user cart.

The reason for this behaviour is an example commerce-generic service that manages the cart and orders data without any data persistence on the server side. Because of commerce-generic implementation simplification, this service can not keep consistent responses in a series of createCart, addCartItem, updateCartItem, and getCart requests.

Solution

We have prepared a Pull Request to Composable UI repository, where we have improved commerce-generic service by adding cart and order data file-based persistence, so it allows users to manage products in the cart more freely.

Summary of the changes:

• we have used the node-persist package, which provides a minimalistic API to persist data in JSON files and reduce code complexity,
• we use a folder path for temporary files defined by the OS as a location of JSON files with cart and order data,
• we have tested changes on both local development and for apps deployed on Vercel. Please remember that Vercel allows saving temporary files in the /tmp folder. From our experience, this lasts long enough (10+ minutes) to keep a nice user experience.
• we could not test changes on Netlify as currently, we are facing a bug in Netlify's next-runtime library: Link
• all changes are part of commerce-generic service, except:
  • a few checkout components as we need additionally to provide the cartId param to the createOrder request
  • composable-ui/src/utils/__mocks__/api.ts - we have added missing mocked data fixing test src/components/__tests__/home-page.test.tsx, which fails on main branch
• we have not changed the mocked available product data, so there are no other required changes, e.g. in the Algolia integration.

Here is a video that shows the difference in behaviour. On the left side, we have changes from this PR; on the right side application before changes:

Screen.Recording.2023-10-27.at.10.42.29.mov

[github-actions]

Lines	Statements	Branches	Functions
	43.54% (297/682)	23.11% (46/199)	23.23% (33/142)