This template is a Next.js project bootstrapped with create-next-app. It uses Wix Headless to leverage the Wix Bookings and Wix Pricing Plans business solutions for managing appointments.

To integrate the Wix Bookings and Wix Pricing Plans business solutions with the template, first create and set up a project on Wix:

Create a new Wix Headless project. For instructions on creating a Wix project, see Create a Wix Headless Project.

When prompted to add functionalities to your new project, select Bookings and Pricing Plans:

You can also add business solutions to your project later. See Add Apps to a Project.

See the Wix Bookings Essential Checklist for information on configuring the services and plans your business needs.

Note: You can add Wix Bookings functionality to your project for free, but you must upgrade to a Business Premium Plan to accept bookings.

There are 2 ways to authorize the template to access your Wix project:

• Option A: Quick start deployment.
• Option B: Create an OAuth client ID in the Wix dashboard.

Click the quick start deployment link below to automatically authorize your template and configure your project. You'll be prompted to log in to your Wix account and to authorize the platform to access your project.

Authentication credentials are automatically incorporated into the template, making it easy to get started coding and customizing.

(Don't forget to update this badge as described here )

For more information, see How to Deploy Next.js Sites to Netlify.

You can also view our live demo site. In order to view the full flow in the demo site, use the coupon code FREE to book appointments, and use the coupon code FREEPLAN to "purchase" a paid plan.

If you don't want to use quick-start deployment, begin by forking this repo to your git account.

Read Set Up Authorization in the Wix SDK documentation for instructions on how to manually create an OAuth app and generate a client ID in the Headless Settings menu of the project dashboard.

Note: The authorization redirect URI for this template is <YOUR-NEW-BASE-DOMAIN>/auth/callback.

After creating an OAuth app, store the Client ID securely.

Note: Do not push the client ID to your source control.

To set up environment variables for consuming Wix Headless APIs, follow these steps:

1. At the terminal, in the template's root folder, type cp .env.template .env.local.
2. In the new .env.local file, paste the client ID after NEXT_PUBLIC_WIX_CLIENT_ID=.

In your deployment environment, add an environment variable called NEXT_PUBLIC_WIX_CLIENT_ID containing the client ID.

Once you’ve authorized and configured your client, run the development server:

yarn
yarn dev

or

npm i
npm run dev

Open http://localhost:3000 with your browser to see the template home page.

You can start editing the homepage by modifying app/page.tsx. The page auto-updates as you edit the file.

Similarly, you can edit any other page on the pattern app/<route>/page.tsx. For more information, see Defining Routes in the Next.js documentation.

The template implements checkout by redirecting visitors to a Wix-managed page. You can configure your business's checkout in the eCommerce Settings menu in the Wix dashboard.

To enable online checkout for the template, follow these steps:

To enable the checkout page and accept payments using Wix business solutions, you need to upgrade to a Business Premium Plan.

To change the base URL for Wix-managed checkout pages, follow these steps in the :

1. In the project dashboard, click More Actions.
2. Click Rename Project.
3. Change the editable part of the URL in Site Address (URL) and click Save.

Alternatively, you can connect a custom domain.

To learn how to customize the template and add more functionality using Wix APIs, see the Wix JavaScript SDK reference documentation.

This template is written in Next.js 13 using Next.js app directory. To learn more about Next.js, see the following resources:

• Next.js documentation: Learn about Next.js features and APIs.
• Learn Next.js: An interactive Next.js tutorial.
• Next.js app directory: Information on the Next.js App Router Roadmap.

Additionally, this template uses the following libraries and features:

• React Server Components
• TypeScript
• TanStack Query ^v4
• Tailwind CSS
• Flowbite
• Wix client SDK

You can deploy this repository using any platform which supports Next.js Version 13 and the App Router Roadmap.

The repository only requires a single environment variable: NEXT_PUBLIC_WIX_CLIENT_ID, which should contain a client ID authorizing access to a Wix project's data.

To ensure this repo always uses the latest APIs from the Wix JavaScript SDK, the repo is preconfigured with Dependabot, GitHub's automated dependency management system. Due to the numerous pull requests generated by Dependabot, the repo also includes a preconfigured GitHub Action called "Combine PRs." This action can be executed manually to merge all of Dependabot's pull requests into a single PR, allowing for sanity checks to be performed only once. If the sanity check fails, each Dependabot PR can be inspected individually.

This repo is preconfigured with Playwright for both functional and UI (screenshots) testing. It contains GitHub actions (for PRs) for both Netlify: netlify-e2e.yml and Vercel: vercel-e2e.yml.

Feel free to delete the one you are not using.
Note: there is a # TODO: change to your site name in both YAML files, please change the site name to the actual site name in the relevant deployment platform