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

[vercel]

Someone is attempting to deploy a commit to the Composable Development Team on Vercel.

A member of the Team first needs to authorize it.

[dannytlake]

hello @marcin-slezak, thank you for your contribution to Composable UI! We'll review this and let you know if we have any questions before merging.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
composable-ui-docs-public	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 14, 2023 8:15pm
composable-ui-public	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 14, 2023 8:15pm

[dannytlake]

@marcin-slezak I was able to successfully deploy on Netlify, see deployment https://composable-ui-voucherify.netlify.app/

Can you please try setting the PNPM_FLAGS environment variable on your Netlify deploy to see if it resolves the issue (you'll need to manually trigger a redeploy after setting it)?

PNPM_FLAGS = --shamefully-hoist

This variable gets set automatically through our 1 click deploy to Netlify link, however maybe we need to update the docs to surface this when doing a manual deploy to Netlify from a forked repository. Please let me know if this resolves the Netlify issue.

[netlify]

‼️ Deploy request for composable-ui-storefront rejected.

Name	Link
🔨 Latest commit	d1cadf3

[marcin-slezak]

@dannytlake Thank you for your suggestion about PNPM_FLAGS! I successfully deployed on Netlify using your advice (https://calm-otter-6d91de.netlify.app/). I can confirm that storage-mock works the same way as on Vercel. I also applied the suggested changes.