shalevshalit / dev-center-template-fullfilment-app Goto Github PK

This is a Next.js project bootstrapped with create-next-app. Aimed to provide an example Shipping Fulfillment App for Wix App Market.

The application requires the following environment variables to be set:

• WIX_APP_ID - The application ID in Wix Development Center (The application you created in Wix Development Center)
• WIX_APP_SECRET - The application secret in Wix Development Center, as described in the Ouath flow documentation
• WIX_APP_JWT_KEY - Your application webhooks public key, as described in the Webhooks documentation

For local development, these variables should be set in the .env.local file, which is not committed to source control. Also, they are all server side variables, your public key and secret should not be exposed to the client.
You can use .env.template as a template.
When deploying to production, these variables should be set as environment variables according to the hosting platform guidelines, for example:

• Netlify
• Vercel

By default, the applications uses npm, but you can use yarn or pnpm as well.
To install dependencies:

npm install
# or
yarn
# or
pnpm install

To run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open https://localhost:3000/dashboard with your browser to see the result.

In order to test an actual integration with the backend systems, use one of the following methods:

• Change the urls in the dev center to point to https://localhost:3000/
• Debug the application in the actual dashboard and copy the access token sent to provided to it by the dashboard sdk page and pass it as a query parameter accessToken
  • This will set it as an Authorization header in the requests to the backend systems.
  • See - middleware.ts for more details
• Use a tool/plugin (i.e. Chrome plugin or hosts file on MacOS) to proxy calls from your deployment server to your local server in your browser so opening the dashboard page in Wix business manager will actually route the calls to your local server.

Pre-integrated with Wix Design System and Wix Dashboard SDK

• Including SSR support
  • Server components are not yet supported by Wix Design System, but SSR is supported.
• Provides a simple dashboard page with navigations to relevant pages and a simple example of a shipping delivery form
• Integrates with Wix Data API to query last orders and present last 3 orders in the dashboard

Note: This example dashboard implementation does not include the actual persistence of the model to an actual DB

1. dashboard/page.tsx
   • The page uses the sample app model implementation in app-data.model.ts. It provides an array of shipping delivery methods, which can be extended to your needs
   • The dashboard page uses both the client side SDK implementation wix-sdk.client.ts and server side - wix-sdk.ssr.ts for SSR support.

• Wix Checkout Delivery method SPI is used to provide a custom delivery methods for Wix checkout

1. /api/shipping-rates/v1/getRates/(route.ts)

• Provides a simple implementation of a shipping delivery method, which can be extended to your needs.
• The provided implementation receives the ordered items, their weight and quantity, and returns a list of delivery methods with their price and estimated delivery time
  • If the calculation of the delivery method is by weight, the implementation checks the unit of the weight, and converts it from KG to LB or vice versa if needed.

• Oauth integration with Wix using Wix Apps OAuth API
• Exchange authorization code for access token
• Get App instance information using the access token using Get app instance API

1. /api/oauth/v1/authorize/(route.ts)
   • Implements the installation URL in Wix App Oauth flow, which defines some state and redirects to Wix App Oauth URL, including the redirect URL to the callback endpoint in the application.
     
2. /api/oauth/v1/signup/(route.ts)
   • Implements the redirect URL which received the authorization code and exchanges it for an access token and invokes Get app instance API using it.

• Webhooks support using Wix Apps Webhooks API
• Parse JWT token from Wix using app secret and verify signature
• Example "App Installed" and "App Removed" webhooks

1. /api/webhooks/v1/install/(route.ts)
   • Parse the JWT token from Wix using app secret and verify signature, allowing you to add your logic to handle the "App Installed" webhook
2. /api/webhooks/v1/uninstall/(route.ts)
   • Parse the JWT token from Wix using app secret and verify signature, allowing you to add your logic to handle the "App Installed" webhook

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

This template is written in Next.js 14 using Next.js app router. 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 router: Information on the Next.js App Router Roadmap.

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

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