Implement components

1. first implement your headless compoenents
2. implement your componeents / ui components / pages, add them under src/componenets/pricing-plans and src/componenets/ui/pricing-plans. use your headless compoenents to implement your components
3. headless / ui (shadcn) guidelines: https://github.com/wix-incubator/headless-components/blob/main/docs/api/API.md

Notes: Make sure your headless sdk packages (i.e. @wix/stores) are part of picasso main template package.json here: https://github.com/wix-private/picasso/blob/master/packages/picasso-template-image/main/package.json, otherwise PR or ask the picasso team to add them. Make sure it is a version that includes your headless components.

Test build of zip files to be used by plugin module:

• build of this package should use something like node scripts/build-zip.js - it should only compress compoentns/<pricing-plans> and components/ui/<pricing-plans> folders.
  • Do not zip folders which do not include your vertical name.
• Verify that a zip file is created successfully in dist/statics/
• Verify that the zip is exported properly in index.js as zipPath
• Note that the files and plugin packages are published to the public npm registry so bump the files' package version manually as the bump strategy is manual.
• merge to master and make sure a new package is published (public npm registry)
• use this package in vibe-pricing-plans-plugin and use the zip file from there to be used during the "install" step and copy the files over to the picasso template in runtime
  • In Falcon the dependency is resolved from the workspace but do this in order to verify it would work in Picasso too

Testing over Wix Vibe main template:

1. npm run reset-template (re-run this to reset it)

brings and resets the main Wix Wibe template for you to test your components over

1. npm run bootstrap

This will initialize your dev site for your module:

• Create a site
• Create a headless component
• Create a dev center component and install on the site
• Create a wix.config.json (which you can commit and push, preferably add other team member as collaboratoes so they can access it too)
• Create a .env.local file connected to your new site and app (this should not be pushed to Git)
  • In CI CD flow use fire console in order to generate an API key you can use in order to perform login with npx wix login --api-key <API KEY YOU GOT> command
• The site will serve as the site you use in order to view the business information you see when running locally

1. npm run template-dev

Start the dev server allowing you to start coding, the repo is equipped with a set of cursor rules allowing you to develop the headless component easier, you can adjust them to your liking

1. npm run template-check && npm run template-build - to make sure there all your components play nicely over the Wix Vibe template

Testing your instructions with LLM (WIP):

1. open as an individual cursor project
2. ask agent: integrate all page components in src/components/pricing-plans to the main router. implement homepage.