Add slack app (#120)
* add slack app * Update eslint * Remove gitignore
This commit is contained in:
Lukasz Ostrowski
GitHub
parent
4865d33d5d
commit
77538e49f7
75 changed files with 156847 additions and 6484 deletions
5
.changeset/afraid-cameras-learn.md
Normal file
5
.changeset/afraid-cameras-learn.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
"saleor-app-slack": major
|
||||||
|
---
|
||||||
|
|
||||||
|
Add slack into the workspace
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
{
|
{
|
||||||
|
"root": true,
|
||||||
"extends": ["saleor"]
|
"extends": ["saleor"]
|
||||||
}
|
}
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
{
|
{
|
||||||
|
"root": true,
|
||||||
"extends": ["saleor"]
|
"extends": ["saleor"]
|
||||||
}
|
}
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
{
|
{
|
||||||
|
"root": true,
|
||||||
"extends": ["saleor"]
|
"extends": ["saleor"]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,3 +1,4 @@
|
||||||
{
|
{
|
||||||
|
"root": true,
|
||||||
"extends": ["saleor"]
|
"extends": ["saleor"]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
2
apps/slack/.env.example
Normal file
2
apps/slack/.env.example
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
# Encryption key used by the EncryptedSettingsManager. Required by the production builds
|
||||||
|
SECRET_KEY=
|
||||||
4
apps/slack/.eslintrc
Normal file
4
apps/slack/.eslintrc
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"root": true,
|
||||||
|
"extends": ["saleor"]
|
||||||
|
}
|
||||||
20
apps/slack/.graphqlrc.yml
Normal file
20
apps/slack/.graphqlrc.yml
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
schema: graphql/schema.graphql
|
||||||
|
documents: [graphql/**/*.graphql, src/**/*.ts, src/**/*.tsx]
|
||||||
|
extensions:
|
||||||
|
codegen:
|
||||||
|
overwrite: true
|
||||||
|
generates:
|
||||||
|
generated/graphql.ts:
|
||||||
|
config:
|
||||||
|
dedupeFragments: true
|
||||||
|
plugins:
|
||||||
|
- typescript
|
||||||
|
- typescript-operations
|
||||||
|
- urql-introspection
|
||||||
|
- typescript-urql:
|
||||||
|
documentVariablePrefix: "Untyped"
|
||||||
|
fragmentVariablePrefix: "Untyped"
|
||||||
|
- typed-document-node
|
||||||
|
generated/schema.graphql:
|
||||||
|
plugins:
|
||||||
|
- schema-ast
|
||||||
92
apps/slack/README.md
Normal file
92
apps/slack/README.md
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
# Saleor App Slack
|
||||||
|
|
||||||
|
Saleor application to send Slack messages based on `order_created` events.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### What's included?
|
||||||
|
|
||||||
|
- Connection between Saleor and Slack using webhook
|
||||||
|
- Example `order_created` webhook that triggers Slack bot to send message
|
||||||
|
|
||||||
|
### The stack
|
||||||
|
|
||||||
|
Slack app is based on App Template - you can check it [here](https://github.com/saleor/saleor-app-template)
|
||||||
|
|
||||||
|
## How to use this project
|
||||||
|
|
||||||
|
### Select your APL
|
||||||
|
|
||||||
|
If you want to develop single tenant application - use already configured `FileAPL` for local development.
|
||||||
|
|
||||||
|
If you need to support multiple tenants application or you want to deploy your application - use `UpstashAPL`. Follow [How to configure Upstash](docs/upstash.md) for more info.
|
||||||
|
|
||||||
|
To read more about storing auth data, read the [APL documentation](https://github.com/saleor/saleor-app-sdk/blob/main/docs/apl.md)
|
||||||
|
|
||||||
|
### Saleor CLI for the win 🚀
|
||||||
|
|
||||||
|
[Saleor CLI](https://github.com/saleor/saleor-cli) is designed to save you from the repetitive chores around Saleor development, including creating Apps. It will take the burden of spawning new apps locally, connecting them with Saleor environments, and establishing a tunnel for local development in seconds.
|
||||||
|
|
||||||
|
[Full Saleor CLI reference](https://docs.saleor.io/docs/3.x/developer/cli)
|
||||||
|
|
||||||
|
If you don't have (free developer) Saleor Cloud account create one with the following command:
|
||||||
|
|
||||||
|
```
|
||||||
|
saleor register
|
||||||
|
```
|
||||||
|
|
||||||
|
Now you're ready to run this application in development mode:
|
||||||
|
|
||||||
|
```
|
||||||
|
pnpm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Having your app running, the final thing you want to establish is a tunnel with your Saleor environment. Go to your app's directory first and run:
|
||||||
|
|
||||||
|
```
|
||||||
|
saleor app tunnel
|
||||||
|
```
|
||||||
|
|
||||||
|
Your local application should be available now to the outside world (Saleor instance) for accepting all the events via webhooks.
|
||||||
|
|
||||||
|
A quick note: the next time you come back to your project, it is enough to launch your app in a standard way (and then launch your tunnel as described earlier):
|
||||||
|
|
||||||
|
```
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Local development without CLI
|
||||||
|
|
||||||
|
Add URL of your Saleor instance to the `.env` file:
|
||||||
|
|
||||||
|
```
|
||||||
|
NEXT_PUBLIC_SALEOR_HOST_URL=https://your-saleor-instance.com
|
||||||
|
```
|
||||||
|
|
||||||
|
Install dependencies `pnpm install`
|
||||||
|
|
||||||
|
Start local server `pnpm run dev`
|
||||||
|
|
||||||
|
Follow the guide [how install your app](https://docs.saleor.io/docs/3.x/developer/extending/apps/installing-apps#installation-using-graphql-api) and use tunneling tools like [localtunnel](https://github.com/localtunnel/localtunnel) or [ngrok](https://ngrok.com/) in order to expose your local server.
|
||||||
|
|
||||||
|
If you use [saleor-dashboard](https://github.com/saleor/saleor-dashboard) and your local server is exposed, you can install your app by following this link:
|
||||||
|
|
||||||
|
```
|
||||||
|
[YOUR_SALEOR_DASHBOARD_URL]/apps/install?manifestUrl=[YOUR_APPS_MANIFEST_URL]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Connecting your application to Slack
|
||||||
|
|
||||||
|
Read how to connect the app with the Slack [here](./docs/setup-slack-app.md)
|
||||||
|
|
||||||
|
### Generated schema and typings
|
||||||
|
|
||||||
|
Commands `build` and `dev` would generate schema and typed functions using Saleor's GraphQL endpoint. Commit `generated` folder to your repo as they are necessary for queries and keeping track of the schema changes.
|
||||||
|
|
||||||
|
[Learn more](https://www.graphql-code-generator.com/) about GraphQL code generation.
|
||||||
|
|
||||||
|
### Learn more about Saleor Apps
|
||||||
|
|
||||||
|
[Apps guide](https://docs.saleor.io/docs/3.x/developer/extending/apps/key-concepts)
|
||||||
|
|
||||||
|
[Configuring apps in dashboard](https://docs.saleor.io/docs/3.x/dashboard/apps)
|
||||||
BIN
apps/slack/docs/images/dashboard-config.jpg
Normal file
BIN
apps/slack/docs/images/dashboard-config.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
BIN
apps/slack/docs/images/install-slack.jpg
Normal file
BIN
apps/slack/docs/images/install-slack.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
BIN
apps/slack/docs/images/readme.jpg
Normal file
BIN
apps/slack/docs/images/readme.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
BIN
apps/slack/docs/images/slack-permissions.jpg
Normal file
BIN
apps/slack/docs/images/slack-permissions.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
apps/slack/docs/images/slack-webhook-copy.jpg
Normal file
BIN
apps/slack/docs/images/slack-webhook-copy.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
BIN
apps/slack/docs/images/slack-webook-channel.jpg
Normal file
BIN
apps/slack/docs/images/slack-webook-channel.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
apps/slack/docs/images/slack-workspace-button.jpg
Normal file
BIN
apps/slack/docs/images/slack-workspace-button.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
apps/slack/docs/images/slack-workspace.jpg
Normal file
BIN
apps/slack/docs/images/slack-workspace.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
apps/slack/docs/images/upstash.jpg
Normal file
BIN
apps/slack/docs/images/upstash.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
41
apps/slack/docs/setup-slack-app.md
Normal file
41
apps/slack/docs/setup-slack-app.md
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
# How to setup your Slack application
|
||||||
|
|
||||||
|
## Install Saleor App Slack
|
||||||
|
|
||||||
|
Use [readme](./../README.md) to get started
|
||||||
|
|
||||||
|
## Create new Slack application
|
||||||
|
|
||||||
|
Click `Install Slack application` link on main view of Saleor App Slack in your Saleor Dashboard
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Follow instructions in Slack - select your workspace
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
On the next modal review app & click `Create`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
It is time to install application in your workspace - follow Slack instructions
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
You will get redirected to new page where you can select channel that will receive Saleor messages. Select one and click `Allow`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
You should return to previous `Basic information` page. Find `Incoming Webhooks` page under `Features` section. Inside this page you will find `Webhook URLs for Your Workspace` where you can find `Webhook URL`. Click `Copy` button to copy URL to your clipboard.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Take this copied URL and paste it inside Saleor App configuration in Saleor Dashboard
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Right now you can create an order e.g using Saleor Dashboard to see message in your selected Slack channel
|
||||||
|
|
||||||
|
## Useful links
|
||||||
|
|
||||||
|
- [Block Kit Builder](https://app.slack.com/block-kit-builder). Visual tool that helps with building & previewing Slack messages.
|
||||||
17
apps/slack/docs/upstash.md
Normal file
17
apps/slack/docs/upstash.md
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
# How to configure Upstash
|
||||||
|
|
||||||
|
## Get credentials from Upstash
|
||||||
|
|
||||||
|
Create or login to [Upstash](https://upstash.com/). In your [console](https://console.upstash.com/) select Redis database. On `Details` page scroll down to `REST API` section and copy `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN`.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Create env file
|
||||||
|
|
||||||
|
Create `.env.local` file with Upstash APL env variables.
|
||||||
|
|
||||||
|
```
|
||||||
|
APL=upstash
|
||||||
|
UPSTASH_URL=<UPSTASH_REDIS_REST_URL>
|
||||||
|
UPSTASH_TOKEN=<UPSTASH_REDIS_REST_TOKEN>
|
||||||
|
```
|
||||||
5
apps/slack/env.d.ts
vendored
Normal file
5
apps/slack/env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
namespace NodeJS {
|
||||||
|
interface ProcessEnv {
|
||||||
|
APL: "file" | "vercel" | "upstash" | "saleor-cloud";
|
||||||
|
}
|
||||||
|
}
|
||||||
72884
apps/slack/generated/graphql.ts
Normal file
72884
apps/slack/generated/graphql.ts
Normal file
File diff suppressed because it is too large
Load diff
29164
apps/slack/generated/schema.graphql
Normal file
29164
apps/slack/generated/schema.graphql
Normal file
File diff suppressed because it is too large
Load diff
10
apps/slack/graphql/mutations/UpdateAppMetadata.graphql
Normal file
10
apps/slack/graphql/mutations/UpdateAppMetadata.graphql
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
mutation UpdateAppMetadata($id: ID!, $input: [MetadataInput!]!) {
|
||||||
|
updatePrivateMetadata(id: $id, input: $input) {
|
||||||
|
item {
|
||||||
|
privateMetadata {
|
||||||
|
key
|
||||||
|
value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
9
apps/slack/graphql/queries/FetchAppDetails.graphql
Normal file
9
apps/slack/graphql/queries/FetchAppDetails.graphql
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
query FetchAppDetails {
|
||||||
|
app {
|
||||||
|
id
|
||||||
|
privateMetadata {
|
||||||
|
key
|
||||||
|
value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
29077
apps/slack/graphql/schema.graphql
Normal file
29077
apps/slack/graphql/schema.graphql
Normal file
File diff suppressed because it is too large
Load diff
5
apps/slack/next-env.d.ts
vendored
Normal file
5
apps/slack/next-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
/// <reference types="next" />
|
||||||
|
/// <reference types="next/image-types/global" />
|
||||||
|
|
||||||
|
// NOTE: This file should not be edited
|
||||||
|
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||||
44
apps/slack/next.config.js
Normal file
44
apps/slack/next.config.js
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
// This file sets a custom webpack configuration to use your Next.js app
|
||||||
|
// with Sentry.
|
||||||
|
// https://nextjs.org/docs/api-reference/next.config.js/introduction
|
||||||
|
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
|
||||||
|
|
||||||
|
const { withSentryConfig } = require("@sentry/nextjs");
|
||||||
|
|
||||||
|
const isSentryPropertiesInEnvironment =
|
||||||
|
process.env.SENTRY_AUTH_TOKEN && process.env.SENTRY_PROJECT && process.env.SENTRY_ORG;
|
||||||
|
|
||||||
|
const moduleExports = {
|
||||||
|
eslint: {
|
||||||
|
ignoreDuringBuilds: false,
|
||||||
|
},
|
||||||
|
reactStrictMode: true,
|
||||||
|
|
||||||
|
sentry: {
|
||||||
|
disableServerWebpackPlugin: !isSentryPropertiesInEnvironment,
|
||||||
|
disableClientWebpackPlugin: !isSentryPropertiesInEnvironment,
|
||||||
|
// Use `hidden-source-map` rather than `source-map` as the Webpack `devtool`
|
||||||
|
// for client-side builds. (This will be the default starting in
|
||||||
|
// `@sentry/nextjs` version 8.0.0.) See
|
||||||
|
// https://webpack.js.org/configuration/devtool/ and
|
||||||
|
// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-hidden-source-map
|
||||||
|
// for more information.
|
||||||
|
hideSourceMaps: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const sentryWebpackPluginOptions = {
|
||||||
|
// Additional config options for the Sentry Webpack plugin. Keep in mind that
|
||||||
|
// the following options are set automatically, and overriding them is not
|
||||||
|
// recommended:
|
||||||
|
// release, url, org, project, authToken, configFile, stripPrefix,
|
||||||
|
// urlPrefix, include, ignore
|
||||||
|
|
||||||
|
silent: true, // Suppresses all logs
|
||||||
|
// For all available options, see:
|
||||||
|
// https://github.com/getsentry/sentry-webpack-plugin#options.
|
||||||
|
};
|
||||||
|
|
||||||
|
// Make sure adding Sentry options is the last code to run before exporting, to
|
||||||
|
// ensure that your source maps include changes from all other Webpack plugins
|
||||||
|
module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions);
|
||||||
61
apps/slack/package.json
Normal file
61
apps/slack/package.json
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
{
|
||||||
|
"name": "saleor-app-slack",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "pnpm generate && NODE_OPTIONS='--inspect' next dev",
|
||||||
|
"build": "pnpm generate && next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "pnpm generate && prettier --loglevel warn --write . && eslint --fix .",
|
||||||
|
"fetch-schema": "curl https://raw.githubusercontent.com/saleor/saleor/${npm_package_saleor_schemaVersion}/saleor/graphql/schema.graphql > graphql/schema.graphql",
|
||||||
|
"generate": "graphql-codegen"
|
||||||
|
},
|
||||||
|
"saleor": {
|
||||||
|
"schemaVersion": "3.10"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@material-ui/core": "^4.12.4",
|
||||||
|
"@material-ui/icons": "^4.11.3",
|
||||||
|
"@material-ui/lab": "4.0.0-alpha.61",
|
||||||
|
"@saleor/app-sdk": "0.27.1",
|
||||||
|
"@saleor/macaw-ui": "^0.7.2",
|
||||||
|
"@sentry/nextjs": "^7.30.0",
|
||||||
|
"@urql/exchange-auth": "^1.0.0",
|
||||||
|
"clsx": "^1.2.1",
|
||||||
|
"eslint-config-next": "13.1.4",
|
||||||
|
"graphql": "^16.5.0",
|
||||||
|
"graphql-tag": "^2.12.6",
|
||||||
|
"jose": "^4.11.2",
|
||||||
|
"next": "13.1.0",
|
||||||
|
"react": "18.2.0",
|
||||||
|
"react-dom": "18.2.0",
|
||||||
|
"react-helmet": "^6.1.0",
|
||||||
|
"urql": "^3.0.3",
|
||||||
|
"usehooks-ts": "^2.9.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@graphql-codegen/cli": "2.7.0",
|
||||||
|
"@graphql-codegen/introspection": "2.1.1",
|
||||||
|
"@graphql-codegen/typed-document-node": "^2.2.14",
|
||||||
|
"@graphql-codegen/typescript": "2.6.0",
|
||||||
|
"@graphql-codegen/typescript-operations": "2.4.3",
|
||||||
|
"@graphql-codegen/typescript-urql": "^3.5.13",
|
||||||
|
"@graphql-codegen/urql-introspection": "2.1.1",
|
||||||
|
"@graphql-typed-document-node/core": "^3.1.1",
|
||||||
|
"@types/node": "^18.7.16",
|
||||||
|
"@types/react": "^18.0.19",
|
||||||
|
"@types/react-dom": "^18.0.6",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^5.36.2",
|
||||||
|
"@typescript-eslint/parser": "^5.36.2",
|
||||||
|
"autoprefixer": "^10.4.7",
|
||||||
|
"clean-publish": "^4.0.1",
|
||||||
|
"postcss": "^8.4.14",
|
||||||
|
"pretty-quick": "^3.1.3",
|
||||||
|
"typescript": "4.8.3",
|
||||||
|
"eslint-config-saleor": "workspace:*"
|
||||||
|
},
|
||||||
|
"lint-staged": {
|
||||||
|
"*.{js,ts,tsx}": "eslint --cache --fix",
|
||||||
|
"*.{js,ts,tsx,css,md,json}": "prettier --write"
|
||||||
|
}
|
||||||
|
}
|
||||||
8984
apps/slack/pnpm-lock.yaml
Normal file
8984
apps/slack/pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load diff
BIN
apps/slack/public/favicon.ico
Normal file
BIN
apps/slack/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
4
apps/slack/public/vercel.svg
Normal file
4
apps/slack/public/vercel.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
17
apps/slack/sentry.client.config.js
Normal file
17
apps/slack/sentry.client.config.js
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
// This file configures the initialization of Sentry on the browser.
|
||||||
|
// The config you add here will be used whenever a page is visited.
|
||||||
|
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
|
||||||
|
|
||||||
|
import * as Sentry from "@sentry/nextjs";
|
||||||
|
|
||||||
|
const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
|
||||||
|
|
||||||
|
Sentry.init({
|
||||||
|
dsn: SENTRY_DSN,
|
||||||
|
// Adjust this value in production, or use tracesSampler for greater control
|
||||||
|
tracesSampleRate: 1.0,
|
||||||
|
// ...
|
||||||
|
// Note: if you want to override the automatic release value, do not set a
|
||||||
|
// `release` value here - use the environment variable `SENTRY_RELEASE`, so
|
||||||
|
// that it will also get attached to your source maps
|
||||||
|
});
|
||||||
17
apps/slack/sentry.edge.config.js
Normal file
17
apps/slack/sentry.edge.config.js
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
// This file configures the initialization of Sentry on the server.
|
||||||
|
// The config you add here will be used whenever middleware or an Edge route handles a request.
|
||||||
|
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
|
||||||
|
|
||||||
|
import * as Sentry from "@sentry/nextjs";
|
||||||
|
|
||||||
|
const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
|
||||||
|
|
||||||
|
Sentry.init({
|
||||||
|
dsn: SENTRY_DSN,
|
||||||
|
// Adjust this value in production, or use tracesSampler for greater control
|
||||||
|
tracesSampleRate: 1.0,
|
||||||
|
// ...
|
||||||
|
// Note: if you want to override the automatic release value, do not set a
|
||||||
|
// `release` value here - use the environment variable `SENTRY_RELEASE`, so
|
||||||
|
// that it will also get attached to your source maps
|
||||||
|
});
|
||||||
17
apps/slack/sentry.server.config.js
Normal file
17
apps/slack/sentry.server.config.js
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
// This file configures the initialization of Sentry on the server.
|
||||||
|
// The config you add here will be used whenever the server handles a request.
|
||||||
|
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
|
||||||
|
|
||||||
|
import * as Sentry from "@sentry/nextjs";
|
||||||
|
|
||||||
|
const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
|
||||||
|
|
||||||
|
Sentry.init({
|
||||||
|
dsn: SENTRY_DSN,
|
||||||
|
// Adjust this value in production, or use tracesSampler for greater control
|
||||||
|
tracesSampleRate: 1.0,
|
||||||
|
// ...
|
||||||
|
// Note: if you want to override the automatic release value, do not set a
|
||||||
|
// `release` value here - use the environment variable `SENTRY_RELEASE`, so
|
||||||
|
// that it will also get attached to your source maps
|
||||||
|
});
|
||||||
31
apps/slack/src/assets/saleor-logo-dark.svg
Normal file
31
apps/slack/src/assets/saleor-logo-dark.svg
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
<svg width="654" height="261" viewBox="0 0 654 261" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g filter="url(#filter0_d_229_18)">
|
||||||
|
<g filter="url(#filter1_d_229_18)">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M283.69 230.761H315.827V62.9351L283.69 95.0157V230.761ZM199.874 194.213C199.874 205.089 205.229 208.352 220.182 208.352C232.011 208.352 237.366 202.696 237.366 191.82V180.509H221.298C205.229 180.509 199.874 184.424 199.874 194.213ZM237.145 218.359C231.566 226.625 223.754 232.281 206.347 232.281C181.129 232.281 168.853 220.535 168.853 196.173C168.853 171.375 182.468 159.195 222.415 159.195H237.145V151.146C237.145 142.444 235.137 137.223 222.639 137.223C209.695 137.223 206.793 140.27 204.785 150.275L173.541 145.49C178.228 121.997 190.055 112.427 223.754 112.427C258.568 112.427 268.611 125.696 268.611 152.015V230.759H237.145V218.359ZM161.534 194.652C161.534 216.405 151.713 232.284 112.658 232.284C78.7365 232.284 65.1231 222.931 62.2222 199.656L93.0196 195.088C94.8048 206.616 99.0449 209.009 113.104 209.009C125.827 209.009 130.067 205.964 130.067 199.003C130.067 190.519 125.155 188.345 112.435 185.951C111.422 185.779 110.391 185.609 109.348 185.436C89.2411 182.106 64.242 177.966 64.4535 149.842C64.4535 127.004 76.9513 112.648 112.435 112.648C144.795 112.648 157.069 123.74 159.748 145.71L128.058 150.495C126.941 140.272 123.594 136.791 111.543 136.791C101.722 136.791 95.6969 139.403 95.6969 146.363C95.6969 155.717 102.615 157.021 117.791 159.631C137.654 162.894 161.534 167.897 161.534 194.652ZM359.912 153.968V159.84H396.737V153.968C396.737 142.656 392.272 136.782 378.658 136.782C364.599 136.782 359.912 143.745 359.912 153.968ZM427.756 197.692C425.525 215.094 415.705 232.497 378.658 232.497C341.612 232.497 328.668 212.267 328.668 188.122V156.799C328.668 132.002 341.389 112.424 378.658 112.424C416.374 112.424 427.756 131.783 427.756 160.932V181.814H359.911V191.384C359.911 201.39 363.26 209.003 378.658 209.003C393.834 209.003 395.843 203.565 397.182 193.124L427.756 197.692ZM489.816 232.5C526.639 232.5 541.814 213.576 541.814 188.125V156.803C541.814 130.918 526.639 112.427 489.816 112.427C452.991 112.427 438.263 130.918 438.263 156.803V188.125C438.263 213.576 452.768 232.5 489.816 232.5ZM489.809 207.263C476.864 207.263 470.393 200.52 470.393 189.644V156.146C470.393 145.053 476.864 138.31 489.809 138.31C502.753 138.31 509.671 145.053 509.671 156.146V189.644C509.671 200.52 502.753 207.263 489.809 207.263ZM585.219 145.079H602.443L633.841 113H584.479L553.082 145.079V229.534H585.219V145.079Z" fill="white"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M154.079 12.5L110.98 57.5905H217.449L260.548 12.5H154.079Z" fill="#036DFF"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M61.7342 27.8827C62.6047 27.0112 63.7859 26.5215 65.0176 26.5215H205.047C206.924 26.5215 208.616 27.6515 209.334 29.3849C210.053 31.1183 209.657 33.1139 208.331 34.4415L167.954 74.8675C167.083 75.739 165.902 76.2287 164.67 76.2287H24.6408C22.7643 76.2287 21.0725 75.0986 20.3539 73.3652C19.6353 71.6319 20.0313 69.6363 21.3573 68.3086L61.7342 27.8827ZM66.9415 35.8027L35.8346 66.9474H162.747L193.853 35.8027H66.9415Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_229_18" x="16" y="12.5" width="621.841" height="228" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="4"/>
|
||||||
|
<feGaussianBlur stdDeviation="2"/>
|
||||||
|
<feComposite in2="hardAlpha" operator="out"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_229_18"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_229_18" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="filter1_d_229_18" x="0" y="0.5" width="653.841" height="260" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="8"/>
|
||||||
|
<feGaussianBlur stdDeviation="10"/>
|
||||||
|
<feComposite in2="hardAlpha" operator="out"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_229_18"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_229_18" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.5 KiB |
15
apps/slack/src/assets/saleor-logo.svg
Normal file
15
apps/slack/src/assets/saleor-logo.svg
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<svg width="105" height="36" viewBox="0 0 105 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<mask id="mask0_15056_2587" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="1" width="105" height="35">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.30762H104.532V36H0V1.30762Z" fill="white"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_15056_2587)">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3961 35.965C23.8159 35.965 25.4302 33.3727 25.4302 29.8214C25.4302 25.4534 21.5048 24.6367 18.2399 24.1039C15.7453 23.6778 14.608 23.4649 14.608 21.9378C14.608 20.8016 15.5985 20.3752 17.2127 20.3752C19.1937 20.3752 19.7439 20.9435 19.9275 22.6124L25.1367 21.8312C24.6963 18.2445 22.6787 16.4336 17.3594 16.4336C11.5266 16.4336 9.47225 18.7773 9.47225 22.5059C9.43568 27.3356 13.9845 27.8328 17.3594 28.4009C19.4503 28.7917 20.2577 29.1466 20.2577 30.5317C20.2577 31.6681 19.5607 32.1652 17.4695 32.1652C15.1584 32.1652 14.4614 31.7746 14.1679 29.8925L9.10547 30.6383C9.58231 34.4381 11.8201 35.965 17.3961 35.965Z" fill="#28234A"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.1859 32.058C31.7278 32.058 30.8477 31.5254 30.8477 29.7497C30.8477 28.1516 31.7278 27.5125 34.3693 27.5125H37.0106V29.3591C37.0106 31.1346 36.1302 32.058 34.1859 32.058ZM31.9131 35.9646C34.7746 35.9646 36.0587 35.0412 36.9758 33.6917V35.716H42.1481V22.8605C42.1481 18.5637 40.4973 16.3975 34.7746 16.3975C29.2351 16.3975 27.291 17.9599 26.5205 21.7953L31.6564 22.5765C31.9865 20.943 32.4635 20.4457 34.5912 20.4457C36.6456 20.4457 36.9758 21.298 36.9758 22.7187V24.0327H34.5544C27.9879 24.0327 25.75 26.0212 25.75 30.0696C25.75 34.0468 27.7678 35.9646 31.9131 35.9646Z" fill="#28234A"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.4688 35.7162H48.7515V8.31738L43.4688 13.5548V35.7162Z" fill="#28234A"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M55.2111 24.1386V23.1799C55.2111 21.5109 55.9816 20.3742 58.2927 20.3742C60.5305 20.3742 61.2644 21.3333 61.2644 23.1799V24.1386H55.2111ZM58.2916 36.0001C64.3814 36.0001 65.9955 33.159 66.3623 30.3181L61.3366 29.5723C61.1164 31.2769 60.7862 32.1647 58.2916 32.1647C55.7605 32.1647 55.21 30.9218 55.21 29.2883V27.7259H66.3623V24.3167C66.3623 19.558 64.4913 16.3975 58.2916 16.3975C52.1653 16.3975 50.0742 19.5936 50.0742 23.642V28.7557C50.0742 32.6975 52.2019 36.0001 58.2916 36.0001Z" fill="#28234A"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M76.1539 36.0002C82.2068 36.0002 84.7013 32.9107 84.7013 28.7558V23.6421C84.7013 19.4163 82.2068 16.3975 76.1539 16.3975C70.1007 16.3975 67.6797 19.4163 67.6797 23.6421V28.7558C67.6797 32.9107 70.0641 36.0002 76.1539 36.0002ZM76.1526 31.8806C74.0247 31.8806 72.9609 30.7799 72.9609 29.0042V23.5354C72.9609 21.7244 74.0247 20.6235 76.1526 20.6235C78.2803 20.6235 79.4174 21.7244 79.4174 23.5354V29.0042C79.4174 30.7799 78.2803 31.8806 76.1526 31.8806Z" fill="#28234A"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M94.1376 21.8172H91.3062V35.605H86.0236V21.8172H86.0234L91.1846 16.5801H99.2987L94.1376 21.8172Z" fill="#28234A"/>
|
||||||
|
</g>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.8667 0L16.9141 7.2443H34.0895L41.0422 0H23.8667Z" fill="#8AC4EB"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.49792 2.99707L2.98438 9.49196H25.5738L32.0873 2.99707H9.49792Z" stroke="#28234A" stroke-width="1.2182" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.3 KiB |
34
apps/slack/src/components/AccessWarning/AccessWarning.tsx
Normal file
34
apps/slack/src/components/AccessWarning/AccessWarning.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
import { Typography } from "@material-ui/core";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
type WarningCause =
|
||||||
|
| "not_in_iframe"
|
||||||
|
| "missing_access_token"
|
||||||
|
| "invalid_access_token"
|
||||||
|
| "unknown_cause";
|
||||||
|
|
||||||
|
interface AccessWarningProps {
|
||||||
|
cause?: WarningCause;
|
||||||
|
}
|
||||||
|
|
||||||
|
const warnings: Record<WarningCause, string> = {
|
||||||
|
not_in_iframe: "The view can only be displayed in the iframe.",
|
||||||
|
missing_access_token: "App doesn't have an access token.",
|
||||||
|
invalid_access_token: "Access token is invalid.",
|
||||||
|
unknown_cause: "Something went wrong.",
|
||||||
|
};
|
||||||
|
|
||||||
|
function AccessWarning({ cause = "unknown_cause" }: AccessWarningProps) {
|
||||||
|
return (
|
||||||
|
<div suppressHydrationWarning>
|
||||||
|
<Typography variant="subtitle1">
|
||||||
|
App can't be accessed outside of the Saleor Dashboard
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="subtitle2" style={{ marginTop: "2rem" }}>
|
||||||
|
❌ {warnings[cause]}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AccessWarning;
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { makeStyles } from "@saleor/macaw-ui";
|
||||||
|
import { PropsWithChildren } from "react";
|
||||||
|
|
||||||
|
const useStyles = makeStyles({
|
||||||
|
root: {
|
||||||
|
display: "grid",
|
||||||
|
gridTemplateColumns: "280px auto 280px",
|
||||||
|
alignItems: "start",
|
||||||
|
gap: 32,
|
||||||
|
maxWidth: 1180,
|
||||||
|
margin: "0 auto",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
type Props = PropsWithChildren<{}>;
|
||||||
|
|
||||||
|
export const AppColumnsLayout = ({ children }: Props) => {
|
||||||
|
const styles = useStyles();
|
||||||
|
|
||||||
|
return <div className={styles.root}>{children}</div>;
|
||||||
|
};
|
||||||
28
apps/slack/src/components/AppIcon/AppIcon.tsx
Normal file
28
apps/slack/src/components/AppIcon/AppIcon.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { Typography } from "@material-ui/core";
|
||||||
|
import { makeStyles } from "@saleor/macaw-ui";
|
||||||
|
|
||||||
|
const useStyles = makeStyles({
|
||||||
|
appIconContainer: {
|
||||||
|
background: `rgb(95, 58, 199)`,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
borderRadius: "50%",
|
||||||
|
color: "#fff",
|
||||||
|
width: 50,
|
||||||
|
height: 50,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const AppIcon = () => {
|
||||||
|
const styles = useStyles();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.appIconContainer}>
|
||||||
|
<div>
|
||||||
|
<Typography variant="h2">S</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
import { AplReadyResult } from "@saleor/app-sdk/APL";
|
||||||
|
import { Alert } from "@saleor/macaw-ui";
|
||||||
|
|
||||||
|
const vercelInfo = (
|
||||||
|
<div>
|
||||||
|
<Alert variant="warning" title="Vercel detected">
|
||||||
|
<p>
|
||||||
|
App detected Vercel hosting. Check if Vercel is currently redeploying your app and try again
|
||||||
|
in few minutes
|
||||||
|
</p>
|
||||||
|
</Alert>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export function ConfigurationError({
|
||||||
|
isVercel,
|
||||||
|
appReady,
|
||||||
|
}: {
|
||||||
|
isVercel: boolean;
|
||||||
|
appReady: AplReadyResult;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>⚠️ Can't connect with the App API</h1>
|
||||||
|
{isVercel && vercelInfo}
|
||||||
|
{appReady.ready ? null : (
|
||||||
|
<div>
|
||||||
|
<p>Environment variables validation is incorrect</p>
|
||||||
|
<p>{appReady.error.message}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
You may see this error because:
|
||||||
|
<ul>
|
||||||
|
<li>Internet connection has been lost</li>
|
||||||
|
<li>Application installation process is still in progress.</li>
|
||||||
|
<li>
|
||||||
|
Application is misconfigured. If you would like to know more how auth configuration is
|
||||||
|
kept,{" "}
|
||||||
|
<a
|
||||||
|
href="https://github.com/saleor/saleor-app-sdk/blob/main/docs/apl.md"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
go to APL documentation
|
||||||
|
</a>
|
||||||
|
.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
20
apps/slack/src/components/LoadingPage/LoadingPage.tsx
Normal file
20
apps/slack/src/components/LoadingPage/LoadingPage.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { CircularProgress, Typography } from "@material-ui/core";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import { useStyles } from "./styles";
|
||||||
|
|
||||||
|
function LoadingPage() {
|
||||||
|
const classes = useStyles();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classes.loaderContainer}>
|
||||||
|
<CircularProgress size={100} />
|
||||||
|
|
||||||
|
<Typography variant="subtitle1" className={classes.message}>
|
||||||
|
Attempting connection to Saleor Dashboard
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LoadingPage;
|
||||||
14
apps/slack/src/components/LoadingPage/styles.ts
Normal file
14
apps/slack/src/components/LoadingPage/styles.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { makeStyles } from "@saleor/macaw-ui";
|
||||||
|
|
||||||
|
const useStyles = makeStyles((theme) => ({
|
||||||
|
loaderContainer: {
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
message: {
|
||||||
|
marginTop: theme.spacing(4),
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
export { useStyles };
|
||||||
52
apps/slack/src/components/MainBar/MainBar.tsx
Normal file
52
apps/slack/src/components/MainBar/MainBar.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
import { makeStyles } from "@saleor/macaw-ui";
|
||||||
|
import { ReactNode } from "react";
|
||||||
|
import { Paper, PaperProps } from "@material-ui/core";
|
||||||
|
|
||||||
|
import clsx from "clsx";
|
||||||
|
|
||||||
|
const useStyles = makeStyles((theme) => ({
|
||||||
|
root: {
|
||||||
|
height: 96,
|
||||||
|
padding: "0 32px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
},
|
||||||
|
leftColumn: {
|
||||||
|
marginRight: "auto",
|
||||||
|
},
|
||||||
|
rightColumn: {},
|
||||||
|
iconColumn: {
|
||||||
|
marginRight: 24,
|
||||||
|
},
|
||||||
|
appName: { fontSize: 24, margin: 0 },
|
||||||
|
appAuthor: {
|
||||||
|
fontSize: 12,
|
||||||
|
textTransform: "uppercase",
|
||||||
|
color: theme.palette.text.secondary,
|
||||||
|
fontWeight: 500,
|
||||||
|
margin: 0,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
name: string;
|
||||||
|
author: string;
|
||||||
|
rightColumnContent?: ReactNode;
|
||||||
|
icon?: ReactNode;
|
||||||
|
} & PaperProps;
|
||||||
|
|
||||||
|
export const MainBar = ({ name, author, rightColumnContent, className, icon }: Props) => {
|
||||||
|
const styles = useStyles();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Paper elevation={0} className={clsx(styles.root, className)}>
|
||||||
|
{icon && <div className={styles.iconColumn}>{icon}</div>}
|
||||||
|
<div className={styles.leftColumn}>
|
||||||
|
<h1 className={styles.appName}>{name}</h1>
|
||||||
|
<h1 className={styles.appAuthor}>{author}</h1>
|
||||||
|
</div>
|
||||||
|
<div className={styles.rightColumn}>{rightColumnContent}</div>
|
||||||
|
</Paper>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
import { GitHub, OfflineBoltOutlined } from "@material-ui/icons";
|
||||||
|
import { Button, makeStyles } from "@saleor/macaw-ui";
|
||||||
|
import { MainBar } from "../MainBar/MainBar";
|
||||||
|
import { useAppBridge, actions } from "@saleor/app-sdk/app-bridge";
|
||||||
|
import { AppIcon } from "../AppIcon/AppIcon";
|
||||||
|
|
||||||
|
const useStyles = makeStyles({
|
||||||
|
buttonsGrid: { display: "flex", gap: 10 },
|
||||||
|
topBar: {
|
||||||
|
marginBottom: 32,
|
||||||
|
},
|
||||||
|
indexActions: {
|
||||||
|
marginTop: 10,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const SlackAppMainBar = () => {
|
||||||
|
const { appBridge } = useAppBridge();
|
||||||
|
const styles = useStyles();
|
||||||
|
|
||||||
|
const openInNewTab = (url: string) => {
|
||||||
|
appBridge?.dispatch(
|
||||||
|
actions.Redirect({
|
||||||
|
to: url,
|
||||||
|
newContext: true,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MainBar
|
||||||
|
icon={<AppIcon />}
|
||||||
|
className={styles.topBar}
|
||||||
|
name="Saleor Slack"
|
||||||
|
author="By Saleor Commerce"
|
||||||
|
rightColumnContent={
|
||||||
|
<div className={styles.buttonsGrid}>
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
startIcon={<GitHub />}
|
||||||
|
onClick={() => {
|
||||||
|
openInNewTab("https://github.com/saleor/saleor-app-slack");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Repository
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
startIcon={<OfflineBoltOutlined />}
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => {
|
||||||
|
openInNewTab("https://github.com/saleor/apps/discussions");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Request a feature
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
38
apps/slack/src/hooks/theme-synchronizer.tsx
Normal file
38
apps/slack/src/hooks/theme-synchronizer.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
import { useAppBridge } from "@saleor/app-sdk/app-bridge";
|
||||||
|
import { useTheme } from "@saleor/macaw-ui";
|
||||||
|
import { memo, useEffect } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Macaw-ui stores its theme mode in memory and local storage. To synchronize App with Dashboard,
|
||||||
|
* Macaw must be informed about this change from AppBridge.
|
||||||
|
*
|
||||||
|
* If you are not using Macaw, you can remove this.
|
||||||
|
*/
|
||||||
|
function _ThemeSynchronizer() {
|
||||||
|
const { appBridgeState, appBridge } = useAppBridge();
|
||||||
|
const { setTheme, themeType } = useTheme();
|
||||||
|
|
||||||
|
// todo - replace this hook to appBridge.subscribe and react only only on initial theme event
|
||||||
|
// useEffect(() =>{
|
||||||
|
// appBridge?.subscribe('theme',console.log)
|
||||||
|
// },[appBridge])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!setTheme || !appBridgeState?.theme) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (themeType !== appBridgeState?.theme) {
|
||||||
|
setTheme(appBridgeState.theme);
|
||||||
|
/**
|
||||||
|
* Hack to fix macaw, which is going into infinite loop on light mode (probably de-sync local storage with react state)
|
||||||
|
* TODO Fix me when Macaw 2.0 is shipped
|
||||||
|
*/
|
||||||
|
window.localStorage.setItem("macaw-ui-theme", appBridgeState.theme);
|
||||||
|
}
|
||||||
|
}, [appBridgeState?.theme, setTheme, themeType]);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ThemeSynchronizer = memo(_ThemeSynchronizer);
|
||||||
64
apps/slack/src/hooks/useAppApi.ts
Normal file
64
apps/slack/src/hooks/useAppApi.ts
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
import { useAppBridge } from "@saleor/app-sdk/app-bridge";
|
||||||
|
import { SALEOR_API_URL_HEADER } from "@saleor/app-sdk/const";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
type Options = Record<string, string>;
|
||||||
|
|
||||||
|
interface UseFetchProps {
|
||||||
|
url: string;
|
||||||
|
options?: Options;
|
||||||
|
skip?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// This hook is meant to be used mainly for internal API calls
|
||||||
|
const useAppApi = <D>({ url, options, skip }: UseFetchProps) => {
|
||||||
|
const { appBridgeState } = useAppBridge();
|
||||||
|
|
||||||
|
const [data, setData] = useState<D>();
|
||||||
|
const [error, setError] = useState<unknown>();
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const fetchOptions: RequestInit = {
|
||||||
|
...options,
|
||||||
|
headers: [
|
||||||
|
[SALEOR_API_URL_HEADER, appBridgeState?.saleorApiUrl!],
|
||||||
|
["authorization-bearer", appBridgeState?.token!],
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchData = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
setError(undefined);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(url, fetchOptions);
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error(`Error status: ${res.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const json = await res.json();
|
||||||
|
setData(json);
|
||||||
|
} catch (e) {
|
||||||
|
setError(e as unknown);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (appBridgeState?.ready && !skip) {
|
||||||
|
fetchData();
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
setLoading(false);
|
||||||
|
setError(undefined);
|
||||||
|
setData(undefined);
|
||||||
|
};
|
||||||
|
}, [url, options, skip]);
|
||||||
|
|
||||||
|
return { data, error, loading };
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useAppApi;
|
||||||
48
apps/slack/src/lib/graphql.ts
Normal file
48
apps/slack/src/lib/graphql.ts
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
import { AuthConfig, authExchange } from "@urql/exchange-auth";
|
||||||
|
import {
|
||||||
|
cacheExchange,
|
||||||
|
createClient as urqlCreateClient,
|
||||||
|
dedupExchange,
|
||||||
|
fetchExchange,
|
||||||
|
} from "urql";
|
||||||
|
|
||||||
|
interface IAuthState {
|
||||||
|
token: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const createClient = (url: string, getAuth: AuthConfig<IAuthState>["getAuth"]) =>
|
||||||
|
urqlCreateClient({
|
||||||
|
url,
|
||||||
|
exchanges: [
|
||||||
|
dedupExchange,
|
||||||
|
cacheExchange,
|
||||||
|
authExchange<IAuthState>({
|
||||||
|
addAuthToOperation: ({ authState, operation }) => {
|
||||||
|
if (!authState || !authState?.token) {
|
||||||
|
return operation;
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchOptions =
|
||||||
|
typeof operation.context.fetchOptions === "function"
|
||||||
|
? operation.context.fetchOptions()
|
||||||
|
: operation.context.fetchOptions || {};
|
||||||
|
|
||||||
|
return {
|
||||||
|
...operation,
|
||||||
|
context: {
|
||||||
|
...operation.context,
|
||||||
|
fetchOptions: {
|
||||||
|
...fetchOptions,
|
||||||
|
headers: {
|
||||||
|
...fetchOptions.headers,
|
||||||
|
"Authorization-Bearer": authState.token,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
getAuth,
|
||||||
|
}),
|
||||||
|
fetchExchange,
|
||||||
|
],
|
||||||
|
});
|
||||||
7
apps/slack/src/lib/is-in-iframe.ts
Normal file
7
apps/slack/src/lib/is-in-iframe.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
export function isInIframe() {
|
||||||
|
try {
|
||||||
|
return window.self !== window.top;
|
||||||
|
} catch (e) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
61
apps/slack/src/lib/metadata.ts
Normal file
61
apps/slack/src/lib/metadata.ts
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
import { EncryptedMetadataManager, MetadataEntry } from "@saleor/app-sdk/settings-manager";
|
||||||
|
import { Client } from "urql";
|
||||||
|
|
||||||
|
import {
|
||||||
|
FetchAppDetailsDocument,
|
||||||
|
FetchAppDetailsQuery,
|
||||||
|
UpdateAppMetadataDocument,
|
||||||
|
} from "../../generated/graphql";
|
||||||
|
import { settingsManagerSecretKey } from "./saleor-app";
|
||||||
|
|
||||||
|
// Function is using urql graphql client to fetch all available metadata.
|
||||||
|
// Before returning query result, we are transforming response to list of objects with key and value fields
|
||||||
|
// which can be used by the manager.
|
||||||
|
// Result of this query is cached by the manager.
|
||||||
|
export async function fetchAllMetadata(client: Client): Promise<MetadataEntry[]> {
|
||||||
|
const { error, data } = await client
|
||||||
|
.query<FetchAppDetailsQuery>(FetchAppDetailsDocument, {})
|
||||||
|
.toPromise();
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
console.debug("Error during fetching the metadata: ", error);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return data?.app?.privateMetadata.map((md) => ({ key: md.key, value: md.value })) || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mutate function takes urql client and metadata entries, and construct mutation to the API.
|
||||||
|
// Before data are send, additional query for required App ID is made.
|
||||||
|
// The manager will use updated entries returned by this mutation to update it's cache.
|
||||||
|
export async function mutateMetadata(client: Client, appId: string, metadata: MetadataEntry[]) {
|
||||||
|
const { error: mutationError, data: mutationData } = await client
|
||||||
|
.mutation(UpdateAppMetadataDocument, {
|
||||||
|
id: appId,
|
||||||
|
input: metadata,
|
||||||
|
})
|
||||||
|
.toPromise();
|
||||||
|
|
||||||
|
if (mutationError) {
|
||||||
|
console.debug("Mutation error: ", mutationError);
|
||||||
|
throw new Error(`Mutation error: ${mutationError.message}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
mutationData?.updatePrivateMetadata?.item?.privateMetadata.map((md) => ({
|
||||||
|
key: md.key,
|
||||||
|
value: md.value,
|
||||||
|
})) || []
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const createSettingsManager = (client: Client, appId: string) =>
|
||||||
|
// EncryptedMetadataManager gives you interface to manipulate metadata and cache values in memory.
|
||||||
|
// We recommend it for production, because all values are encrypted.
|
||||||
|
// If your use case require plain text values, you can use MetadataManager.
|
||||||
|
new EncryptedMetadataManager({
|
||||||
|
// Secret key should be randomly created for production and set as environment variable
|
||||||
|
encryptionKey: settingsManagerSecretKey,
|
||||||
|
fetchMetadata: () => fetchAllMetadata(client),
|
||||||
|
mutateMetadata: (metadata) => mutateMetadata(client, appId, metadata),
|
||||||
|
});
|
||||||
8
apps/slack/src/lib/no-ssr-wrapper.tsx
Normal file
8
apps/slack/src/lib/no-ssr-wrapper.tsx
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
import React, { PropsWithChildren } from "react";
|
||||||
|
import dynamic from "next/dynamic";
|
||||||
|
|
||||||
|
const Wrapper = (props: PropsWithChildren<{}>) => <React.Fragment>{props.children}</React.Fragment>;
|
||||||
|
|
||||||
|
export const NoSSRWrapper = dynamic(() => Promise.resolve(Wrapper), {
|
||||||
|
ssr: false,
|
||||||
|
});
|
||||||
51
apps/slack/src/lib/saleor-app.ts
Normal file
51
apps/slack/src/lib/saleor-app.ts
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
import { APL, FileAPL, SaleorCloudAPL, UpstashAPL } from "@saleor/app-sdk/APL";
|
||||||
|
import { SaleorApp } from "@saleor/app-sdk/saleor-app";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* By default, auth data are stored in the `.auth-data.json` (FileAPL).
|
||||||
|
* For multi-tenant applications and deployments please use UpstashAPL.
|
||||||
|
*
|
||||||
|
* To read more about storing auth data, read the
|
||||||
|
* [APL documentation](https://github.com/saleor/saleor-app-sdk/blob/main/docs/apl.md)
|
||||||
|
*/
|
||||||
|
|
||||||
|
let apl: APL;
|
||||||
|
switch (process.env.APL) {
|
||||||
|
case "upstash":
|
||||||
|
// Require `UPSTASH_URL` and `UPSTASH_TOKEN` environment variables
|
||||||
|
apl = new UpstashAPL();
|
||||||
|
break;
|
||||||
|
case "saleor-cloud": {
|
||||||
|
if (!process.env.REST_APL_ENDPOINT || !process.env.REST_APL_TOKEN) {
|
||||||
|
throw new Error("Rest APL is not configured - missing env variables. Check saleor-app.ts");
|
||||||
|
}
|
||||||
|
|
||||||
|
apl = new SaleorCloudAPL({
|
||||||
|
resourceUrl: process.env.REST_APL_ENDPOINT as string,
|
||||||
|
token: process.env.REST_APL_TOKEN as string,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
apl = new FileAPL();
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Investigate why no-ssr-wrapper does not prevent this code from execution during the build time
|
||||||
|
// if (!process.env.SECRET_KEY && process.env.NODE_ENV === "production") {
|
||||||
|
// throw new Error(
|
||||||
|
// "For production deployment SECRET_KEY is mandatory to use EncryptedSettingsManager."
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
|
||||||
|
// Use placeholder value for the development
|
||||||
|
export const settingsManagerSecretKey = process.env.SECRET_KEY || "CHANGE_ME";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prohibit installation from Saleors other than specified by the regex.
|
||||||
|
* Regex source is ENV so if ENV is not set, all installations will be allowed.
|
||||||
|
*/
|
||||||
|
export const allowedUrlsPattern = process.env.ALLOWED_DOMAIN_PATTERN;
|
||||||
|
|
||||||
|
export const saleorApp = new SaleorApp({
|
||||||
|
apl,
|
||||||
|
});
|
||||||
52
apps/slack/src/lib/slack.ts
Normal file
52
apps/slack/src/lib/slack.ts
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
import { OrderCreatedWebhookPayloadFragment } from "../../generated/graphql";
|
||||||
|
|
||||||
|
export const sendSlackMessage = async (
|
||||||
|
to: string,
|
||||||
|
data: {
|
||||||
|
order: Exclude<OrderCreatedWebhookPayloadFragment["order"], undefined | null>;
|
||||||
|
saleorDomain: string;
|
||||||
|
}
|
||||||
|
) => {
|
||||||
|
const {
|
||||||
|
saleorDomain,
|
||||||
|
order: { id, number, user, shippingAddress, subtotal, shippingPrice, total },
|
||||||
|
} = data;
|
||||||
|
|
||||||
|
const response = await fetch(to, {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({
|
||||||
|
blocks: [
|
||||||
|
{
|
||||||
|
type: "section",
|
||||||
|
text: {
|
||||||
|
type: "mrkdwn",
|
||||||
|
text: `Order <https://${saleorDomain}/dashboard/orders/${id}|#${number}> has been created 🎉`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "section",
|
||||||
|
text: {
|
||||||
|
type: "mrkdwn",
|
||||||
|
text: `*Customer*\n${user?.firstName} ${user?.lastName}\n${user?.email}`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "section",
|
||||||
|
text: {
|
||||||
|
type: "mrkdwn",
|
||||||
|
text: `*Shipping Address*\n${shippingAddress?.streetAddress1}\n${shippingAddress?.postalCode} ${shippingAddress?.city}\n${shippingAddress?.country.country}`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "section",
|
||||||
|
text: {
|
||||||
|
type: "mrkdwn",
|
||||||
|
text: `*Subtotal*\n${subtotal.gross.amount} ${subtotal.gross.currency}\n*Shipping*\n${shippingPrice.gross.amount} ${shippingPrice.gross.currency}\n*Total*\n${total.gross.amount} ${total.gross.currency}`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
return response;
|
||||||
|
};
|
||||||
64
apps/slack/src/pages/_app.tsx
Normal file
64
apps/slack/src/pages/_app.tsx
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
import "../styles/globals.css";
|
||||||
|
|
||||||
|
import { Theme } from "@material-ui/core/styles";
|
||||||
|
import { AppBridge, AppBridgeProvider } from "@saleor/app-sdk/app-bridge";
|
||||||
|
import { RoutePropagator } from "@saleor/app-sdk/app-bridge/next";
|
||||||
|
import { ThemeProvider as MacawUIThemeProvider } from "@saleor/macaw-ui";
|
||||||
|
import React, { PropsWithChildren, useEffect } from "react";
|
||||||
|
|
||||||
|
import { AppLayoutProps } from "../../types";
|
||||||
|
import { ThemeSynchronizer } from "../hooks/theme-synchronizer";
|
||||||
|
import { NoSSRWrapper } from "../lib/no-ssr-wrapper";
|
||||||
|
|
||||||
|
const themeOverrides: Partial<Theme> = {
|
||||||
|
overrides: {
|
||||||
|
MuiTableCell: {
|
||||||
|
body: {
|
||||||
|
paddingBottom: 8,
|
||||||
|
paddingTop: 8,
|
||||||
|
},
|
||||||
|
root: {
|
||||||
|
height: 56,
|
||||||
|
paddingBottom: 4,
|
||||||
|
paddingTop: 4,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ensure instance is a singleton.
|
||||||
|
* TODO: This is React 18 issue, consider hiding this workaround inside app-sdk
|
||||||
|
*/
|
||||||
|
const appBridgeInstance =
|
||||||
|
typeof window !== "undefined" ? new AppBridge({ autoNotifyReady: false }) : undefined;
|
||||||
|
|
||||||
|
// That's a hack required by Macaw-UI incompatibility with React@18
|
||||||
|
const ThemeProvider = MacawUIThemeProvider as React.FC<
|
||||||
|
PropsWithChildren<{ overrides: Partial<Theme>; ssr: boolean; defaultTheme?: "light" | "dark" }>
|
||||||
|
>;
|
||||||
|
|
||||||
|
function SaleorApp({ Component, pageProps }: AppLayoutProps) {
|
||||||
|
const getLayout = Component.getLayout ?? ((page) => page);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const jssStyles = document.querySelector("#jss-server-side");
|
||||||
|
if (jssStyles) {
|
||||||
|
jssStyles?.parentElement?.removeChild(jssStyles);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NoSSRWrapper>
|
||||||
|
<AppBridgeProvider appBridgeInstance={appBridgeInstance}>
|
||||||
|
<ThemeProvider overrides={themeOverrides} ssr>
|
||||||
|
<ThemeSynchronizer />
|
||||||
|
<RoutePropagator />
|
||||||
|
{getLayout(<Component {...pageProps} />)}
|
||||||
|
</ThemeProvider>
|
||||||
|
</AppBridgeProvider>
|
||||||
|
</NoSSRWrapper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SaleorApp;
|
||||||
19
apps/slack/src/pages/_document.tsx
Normal file
19
apps/slack/src/pages/_document.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
import { Head, Html, Main, NextScript } from "next/document";
|
||||||
|
|
||||||
|
export default function Document() {
|
||||||
|
return (
|
||||||
|
<Html>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="crossorigin" />
|
||||||
|
<Head />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<body>
|
||||||
|
<Main />
|
||||||
|
<NextScript />
|
||||||
|
</body>
|
||||||
|
</Html>
|
||||||
|
);
|
||||||
|
}
|
||||||
39
apps/slack/src/pages/_error.js
Normal file
39
apps/slack/src/pages/_error.js
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
/**
|
||||||
|
* NOTE: This requires `@sentry/nextjs` version 7.3.0 or higher.
|
||||||
|
*
|
||||||
|
* NOTE: If using this with `next` version 12.2.0 or lower, uncomment the
|
||||||
|
* penultimate line in `CustomErrorComponent`.
|
||||||
|
*
|
||||||
|
* This page is loaded by Nextjs:
|
||||||
|
* - on the server, when data-fetching methods throw or reject
|
||||||
|
* - on the client, when `getInitialProps` throws or rejects
|
||||||
|
* - on the client, when a React lifecycle method throws or rejects, and it's
|
||||||
|
* caught by the built-in Nextjs error boundary
|
||||||
|
*
|
||||||
|
* See:
|
||||||
|
* - https://nextjs.org/docs/basic-features/data-fetching/overview
|
||||||
|
* - https://nextjs.org/docs/api-reference/data-fetching/get-initial-props
|
||||||
|
* - https://reactjs.org/docs/error-boundaries.html
|
||||||
|
*/
|
||||||
|
|
||||||
|
import * as Sentry from "@sentry/nextjs";
|
||||||
|
import NextErrorComponent from "next/error";
|
||||||
|
|
||||||
|
const CustomErrorComponent = (props) => {
|
||||||
|
// If you're using a Nextjs version prior to 12.2.1, uncomment this to
|
||||||
|
// compensate for https://github.com/vercel/next.js/issues/8592
|
||||||
|
// Sentry.captureUnderscoreErrorException(props);
|
||||||
|
|
||||||
|
return <NextErrorComponent statusCode={props.statusCode} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
CustomErrorComponent.getInitialProps = async (contextData) => {
|
||||||
|
// In case this is running in a serverless function, await this in order to give Sentry
|
||||||
|
// time to send the error before the lambda exits
|
||||||
|
await Sentry.captureUnderscoreErrorException(contextData);
|
||||||
|
|
||||||
|
// This will contain the status code of the response
|
||||||
|
return NextErrorComponent.getInitialProps(contextData);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CustomErrorComponent;
|
||||||
75
apps/slack/src/pages/_error.tsx
Normal file
75
apps/slack/src/pages/_error.tsx
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
import * as Sentry from "@sentry/nextjs";
|
||||||
|
import { NextPageContext } from "next";
|
||||||
|
import NextErrorComponent, { ErrorProps } from "next/error";
|
||||||
|
|
||||||
|
interface ErrorPageProps {
|
||||||
|
err: Error;
|
||||||
|
statusCode: number;
|
||||||
|
hasGetInitialPropsRun: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AppErrorProps extends ErrorProps {
|
||||||
|
err?: Error;
|
||||||
|
hasGetInitialPropsRun?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
function MyError({ statusCode, hasGetInitialPropsRun, err }: ErrorPageProps) {
|
||||||
|
if (!hasGetInitialPropsRun && err) {
|
||||||
|
// getInitialProps is not called when an exception is thrown
|
||||||
|
// at the top level of a module while it is being loaded.
|
||||||
|
// As a workaround, we pass err via _app.js so it can be captured
|
||||||
|
// Read more: https://github.com/vercel/next.js/issues/8592.
|
||||||
|
Sentry.captureException(err);
|
||||||
|
// Flushing is not required in this case as it only happens on the client
|
||||||
|
}
|
||||||
|
|
||||||
|
return <NextErrorComponent statusCode={statusCode} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
MyError.getInitialProps = async (context: NextPageContext) => {
|
||||||
|
const errorInitialProps: AppErrorProps = await NextErrorComponent.getInitialProps(context);
|
||||||
|
|
||||||
|
const { res, err, asPath } = context;
|
||||||
|
|
||||||
|
// Workaround for https://github.com/vercel/next.js/issues/8592, mark when
|
||||||
|
// getInitialProps has run
|
||||||
|
errorInitialProps.hasGetInitialPropsRun = true;
|
||||||
|
|
||||||
|
// Returning early because we don't want to log 404 errors to Sentry.
|
||||||
|
if (res?.statusCode === 404) {
|
||||||
|
return errorInitialProps;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Running on the server, the response object (`res`) is available.
|
||||||
|
//
|
||||||
|
// Next.js will pass an err on the server if a page's data fetching methods
|
||||||
|
// threw or returned a Promise that rejected
|
||||||
|
//
|
||||||
|
// Running on the client (browser), Next.js will provide an err if:
|
||||||
|
//
|
||||||
|
// - a page's `getInitialProps` threw or returned a Promise that rejected
|
||||||
|
// - an exception was thrown somewhere in the React lifecycle (render,
|
||||||
|
// componentDidMount, etc) that was caught by Next.js's React Error
|
||||||
|
// Boundary. Read more about what types of exceptions are caught by Error
|
||||||
|
// Boundaries: https://reactjs.org/docs/error-boundaries.html
|
||||||
|
|
||||||
|
if (err) {
|
||||||
|
Sentry.captureException(err);
|
||||||
|
|
||||||
|
// Flushing before returning is necessary if deploying to Vercel, see
|
||||||
|
// https://vercel.com/docs/platform/limits#streaming-responses
|
||||||
|
await Sentry.flush(2000);
|
||||||
|
|
||||||
|
return errorInitialProps;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If this point is reached, getInitialProps was called without any
|
||||||
|
// information about what the error might be. This is unexpected and may
|
||||||
|
// indicate a bug introduced in Next.js, so record it in Sentry
|
||||||
|
Sentry.captureException(new Error(`_error.js getInitialProps missing data at path: ${asPath}`));
|
||||||
|
await Sentry.flush(2000);
|
||||||
|
|
||||||
|
return errorInitialProps;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MyError;
|
||||||
57
apps/slack/src/pages/api/configuration.ts
Normal file
57
apps/slack/src/pages/api/configuration.ts
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
import { createProtectedHandler, ProtectedHandlerContext } from "@saleor/app-sdk/handlers/next";
|
||||||
|
import { NextApiRequest, NextApiResponse } from "next";
|
||||||
|
|
||||||
|
import { createClient } from "../../lib/graphql";
|
||||||
|
import { createSettingsManager } from "../../lib/metadata";
|
||||||
|
import { saleorApp } from "../../lib/saleor-app";
|
||||||
|
|
||||||
|
const WEBHOOK_URL = "WEBHOOK_URL";
|
||||||
|
|
||||||
|
interface PostRequestBody {
|
||||||
|
data: { key: string; value: string }[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const handler = async (
|
||||||
|
req: NextApiRequest,
|
||||||
|
res: NextApiResponse,
|
||||||
|
ctx: ProtectedHandlerContext
|
||||||
|
) => {
|
||||||
|
const {
|
||||||
|
authData: { token, saleorApiUrl, appId },
|
||||||
|
} = ctx;
|
||||||
|
|
||||||
|
const client = createClient(saleorApiUrl, async () => Promise.resolve({ token }));
|
||||||
|
|
||||||
|
const settings = createSettingsManager(client, appId);
|
||||||
|
|
||||||
|
switch (req.method!) {
|
||||||
|
case "GET":
|
||||||
|
res.status(200).json({
|
||||||
|
success: true,
|
||||||
|
data: [{ key: WEBHOOK_URL, value: await settings.get(WEBHOOK_URL) }],
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
case "POST": {
|
||||||
|
const reqBody = req.body as PostRequestBody;
|
||||||
|
const newWebhookUrl = (await reqBody.data?.find((entry) => entry.key === WEBHOOK_URL))?.value;
|
||||||
|
if (!newWebhookUrl) {
|
||||||
|
console.error("New value for the webhook URL has not been found");
|
||||||
|
res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
message: "Wrong request body",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await settings.set({ key: WEBHOOK_URL, value: newWebhookUrl });
|
||||||
|
res.status(200).json({
|
||||||
|
success: true,
|
||||||
|
data: [{ key: WEBHOOK_URL, value: await settings.get(WEBHOOK_URL) }],
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
res.status(405).end();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default createProtectedHandler(handler, saleorApp.apl, ["MANAGE_APPS", "MANAGE_ORDERS"]);
|
||||||
24
apps/slack/src/pages/api/manifest.ts
Normal file
24
apps/slack/src/pages/api/manifest.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { createManifestHandler } from "@saleor/app-sdk/handlers/next";
|
||||||
|
import { AppManifest } from "@saleor/app-sdk/types";
|
||||||
|
|
||||||
|
import packageJson from "../../../package.json";
|
||||||
|
import { orderCreatedWebhook } from "./webhooks/order-created";
|
||||||
|
|
||||||
|
const handler = createManifestHandler({
|
||||||
|
async manifestFactory(context) {
|
||||||
|
const manifest: AppManifest = {
|
||||||
|
name: packageJson.name,
|
||||||
|
tokenTargetUrl: `${context.appBaseUrl}/api/register`,
|
||||||
|
appUrl: context.appBaseUrl,
|
||||||
|
permissions: ["MANAGE_ORDERS"],
|
||||||
|
id: "saleor.app",
|
||||||
|
version: packageJson.version,
|
||||||
|
webhooks: [orderCreatedWebhook.getWebhookManifest(context.appBaseUrl)],
|
||||||
|
extensions: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
return manifest;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default handler;
|
||||||
26
apps/slack/src/pages/api/register.ts
Normal file
26
apps/slack/src/pages/api/register.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { createAppRegisterHandler } from "@saleor/app-sdk/handlers/next";
|
||||||
|
|
||||||
|
import { allowedUrlsPattern, saleorApp } from "../../lib/saleor-app";
|
||||||
|
|
||||||
|
const handler = createAppRegisterHandler({
|
||||||
|
apl: saleorApp.apl,
|
||||||
|
allowedSaleorUrls: [
|
||||||
|
(url) => {
|
||||||
|
if (allowedUrlsPattern) {
|
||||||
|
const regex = new RegExp(allowedUrlsPattern);
|
||||||
|
if (regex.test(url)) {
|
||||||
|
console.debug(`Registration from the URL ${url} has been accepted`);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
console.debug(
|
||||||
|
`Registration from the URL ${url} has been rejected, since it's not meet the regex pattern ${allowedUrlsPattern}`
|
||||||
|
);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
export default handler;
|
||||||
31
apps/slack/src/pages/api/slack-app-manifest.ts
Normal file
31
apps/slack/src/pages/api/slack-app-manifest.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
import { NextApiRequest, NextApiResponse } from "next";
|
||||||
|
|
||||||
|
export const handler = async (req: NextApiRequest, res: NextApiResponse) => {
|
||||||
|
const manifest = {
|
||||||
|
display_information: {
|
||||||
|
name: "Saleor",
|
||||||
|
description: "Receive notifications to your Slack channel",
|
||||||
|
background_color: "#231e49",
|
||||||
|
},
|
||||||
|
features: {
|
||||||
|
bot_user: {
|
||||||
|
display_name: "Saleor",
|
||||||
|
always_online: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
oauth_config: {
|
||||||
|
scopes: {
|
||||||
|
bot: ["incoming-webhook"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
settings: {
|
||||||
|
org_deploy_enabled: false,
|
||||||
|
socket_mode_enabled: false,
|
||||||
|
token_rotation_enabled: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return res.status(200).json(manifest);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default handler;
|
||||||
118
apps/slack/src/pages/api/webhooks/order-created.ts
Normal file
118
apps/slack/src/pages/api/webhooks/order-created.ts
Normal file
|
|
@ -0,0 +1,118 @@
|
||||||
|
import { NextWebhookApiHandler, SaleorAsyncWebhook } from "@saleor/app-sdk/handlers/next";
|
||||||
|
import { gql } from "urql";
|
||||||
|
|
||||||
|
import { OrderCreatedWebhookPayloadFragment } from "../../../../generated/graphql";
|
||||||
|
import { createClient } from "../../../lib/graphql";
|
||||||
|
import { createSettingsManager } from "../../../lib/metadata";
|
||||||
|
import { saleorApp } from "../../../lib/saleor-app";
|
||||||
|
import { sendSlackMessage } from "../../../lib/slack";
|
||||||
|
|
||||||
|
const OrderCreatedWebhookPayload = gql`
|
||||||
|
fragment OrderCreatedWebhookPayload on OrderCreated {
|
||||||
|
order {
|
||||||
|
id
|
||||||
|
number
|
||||||
|
user {
|
||||||
|
email
|
||||||
|
firstName
|
||||||
|
lastName
|
||||||
|
}
|
||||||
|
shippingAddress {
|
||||||
|
streetAddress1
|
||||||
|
city
|
||||||
|
postalCode
|
||||||
|
country {
|
||||||
|
country
|
||||||
|
}
|
||||||
|
}
|
||||||
|
subtotal {
|
||||||
|
gross {
|
||||||
|
amount
|
||||||
|
currency
|
||||||
|
}
|
||||||
|
}
|
||||||
|
shippingPrice {
|
||||||
|
gross {
|
||||||
|
amount
|
||||||
|
currency
|
||||||
|
}
|
||||||
|
}
|
||||||
|
total {
|
||||||
|
gross {
|
||||||
|
amount
|
||||||
|
currency
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const OrderCreatedGraphqlSubscription = gql`
|
||||||
|
${OrderCreatedWebhookPayload}
|
||||||
|
subscription OrderCreated {
|
||||||
|
event {
|
||||||
|
...OrderCreatedWebhookPayload
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const orderCreatedWebhook = new SaleorAsyncWebhook<OrderCreatedWebhookPayloadFragment>({
|
||||||
|
name: "Order Created in Saleor",
|
||||||
|
webhookPath: "api/webhooks/order-created",
|
||||||
|
asyncEvent: "ORDER_CREATED",
|
||||||
|
apl: saleorApp.apl,
|
||||||
|
subscriptionQueryAst: OrderCreatedGraphqlSubscription,
|
||||||
|
});
|
||||||
|
|
||||||
|
const handler: NextWebhookApiHandler<OrderCreatedWebhookPayloadFragment> = async (
|
||||||
|
req,
|
||||||
|
res,
|
||||||
|
context
|
||||||
|
) => {
|
||||||
|
const { payload, authData } = context;
|
||||||
|
|
||||||
|
const { saleorApiUrl, token, appId } = authData;
|
||||||
|
|
||||||
|
const client = createClient(saleorApiUrl, async () => Promise.resolve({ token }));
|
||||||
|
|
||||||
|
const settings = createSettingsManager(client, appId);
|
||||||
|
|
||||||
|
const webhookUrl = await settings.get("WEBHOOK_URL");
|
||||||
|
|
||||||
|
if (!webhookUrl) {
|
||||||
|
return res.status(400).send({
|
||||||
|
success: false,
|
||||||
|
message:
|
||||||
|
"The application has not been configured yet - Missing webhook URL configuration value",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!payload.order) {
|
||||||
|
return res.status(400).send({ success: false, message: "Order not found in request payload" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await sendSlackMessage(webhookUrl, {
|
||||||
|
saleorDomain: authData.domain,
|
||||||
|
order: payload.order,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.status !== 200) {
|
||||||
|
const errorMessage = await response.text();
|
||||||
|
console.error(`Slack API responded with code ${response.status}: ${errorMessage}`);
|
||||||
|
|
||||||
|
return res.status(500).send({
|
||||||
|
success: false,
|
||||||
|
message: `Slack API responded with status ${response.status}. Message: ${errorMessage}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return res.status(200).send({ success: true, message: "Slack message sent!" });
|
||||||
|
};
|
||||||
|
|
||||||
|
export default orderCreatedWebhook.createHandler(handler);
|
||||||
|
|
||||||
|
export const config = {
|
||||||
|
api: {
|
||||||
|
bodyParser: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
250
apps/slack/src/pages/configuration.tsx
Normal file
250
apps/slack/src/pages/configuration.tsx
Normal file
|
|
@ -0,0 +1,250 @@
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardHeader,
|
||||||
|
List,
|
||||||
|
ListItem,
|
||||||
|
TextField,
|
||||||
|
Typography,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
import Skeleton from "@material-ui/lab/Skeleton";
|
||||||
|
import { AplReadyResult, VercelAPL } from "@saleor/app-sdk/APL";
|
||||||
|
import { useAppBridge, withAuthorization } from "@saleor/app-sdk/app-bridge";
|
||||||
|
import { SALEOR_API_URL_HEADER, SALEOR_AUTHORIZATION_BEARER_HEADER } from "@saleor/app-sdk/const";
|
||||||
|
import { ConfirmButton, ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
|
||||||
|
import { GetServerSideProps } from "next";
|
||||||
|
import { ChangeEvent, ReactElement, SyntheticEvent, useEffect, useState } from "react";
|
||||||
|
|
||||||
|
import AccessWarning from "../components/AccessWarning/AccessWarning";
|
||||||
|
import { ConfigurationError } from "../components/ConfigurationError/ConfigurationError";
|
||||||
|
import useAppApi from "../hooks/useAppApi";
|
||||||
|
import { saleorApp } from "../lib/saleor-app";
|
||||||
|
import useDashboardNotifier from "../utils/useDashboardNotifier";
|
||||||
|
import { Link } from "@material-ui/core";
|
||||||
|
import { SlackAppMainBar } from "../components/SlackAppMainBar/SlackAppMainBar";
|
||||||
|
import { AppColumnsLayout } from "../components/AppColumnsLayout/AppColumnsLayout";
|
||||||
|
|
||||||
|
interface ConfigurationField {
|
||||||
|
key: string;
|
||||||
|
value: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const useStyles = makeStyles((theme) => ({
|
||||||
|
confirmButton: {
|
||||||
|
marginLeft: "auto",
|
||||||
|
},
|
||||||
|
fieldContainer: {
|
||||||
|
marginBottom: theme.spacing(2),
|
||||||
|
},
|
||||||
|
additionalInfo: {
|
||||||
|
marginBottom: theme.spacing(3),
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
type PageProps = {
|
||||||
|
isVercel: boolean;
|
||||||
|
appReady: AplReadyResult;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getServerSideProps: GetServerSideProps<PageProps> = async () => {
|
||||||
|
const isVercel = saleorApp.apl instanceof VercelAPL;
|
||||||
|
const isAppReady = await saleorApp.isReady();
|
||||||
|
|
||||||
|
return {
|
||||||
|
props: {
|
||||||
|
isVercel,
|
||||||
|
appReady: isAppReady,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
function Configuration({ isVercel, appReady }: PageProps) {
|
||||||
|
const classes = useStyles();
|
||||||
|
const { appBridgeState } = useAppBridge();
|
||||||
|
const [notify] = useDashboardNotifier();
|
||||||
|
const [configuration, setConfiguration] = useState<ConfigurationField[]>();
|
||||||
|
const [transitionState, setTransitionState] = useState<ConfirmButtonTransitionState>("default");
|
||||||
|
|
||||||
|
const { data: configurationData, error } = useAppApi<{ data: ConfigurationField[] }>({
|
||||||
|
url: "/api/configuration",
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (configurationData && !configuration) {
|
||||||
|
setConfiguration(configurationData.data);
|
||||||
|
}
|
||||||
|
}, [configurationData, configuration]);
|
||||||
|
|
||||||
|
const handleSubmit = (event: SyntheticEvent) => {
|
||||||
|
event.preventDefault();
|
||||||
|
setTransitionState("loading");
|
||||||
|
|
||||||
|
fetch("/api/configuration", {
|
||||||
|
method: "POST",
|
||||||
|
headers: [
|
||||||
|
["content-type", "application/json"],
|
||||||
|
[SALEOR_API_URL_HEADER, appBridgeState?.saleorApiUrl!],
|
||||||
|
[SALEOR_AUTHORIZATION_BEARER_HEADER, appBridgeState?.token!],
|
||||||
|
],
|
||||||
|
body: JSON.stringify({ data: configuration }),
|
||||||
|
})
|
||||||
|
.then(async (response) => {
|
||||||
|
setTransitionState(response.status === 200 ? "success" : "error");
|
||||||
|
await notify({
|
||||||
|
status: "success",
|
||||||
|
title: "Success",
|
||||||
|
text: "Configuration updated successfully",
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(async () => {
|
||||||
|
setTransitionState("error");
|
||||||
|
await notify({
|
||||||
|
status: "error",
|
||||||
|
title: "Configuration update failed",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onChange = (event: ChangeEvent) => {
|
||||||
|
const { name, value } = event.target as HTMLInputElement;
|
||||||
|
setConfiguration((prev) =>
|
||||||
|
prev!.map((prevField) => (prevField.key === name ? { ...prevField, value } : prevField))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
console.error("Can't establish connection with the App API: ", error);
|
||||||
|
return <ConfigurationError appReady={appReady} isVercel={isVercel} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (configuration === undefined) {
|
||||||
|
return <Skeleton />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
{configuration!.map(({ key, value }) => (
|
||||||
|
<div key={key} className={classes.fieldContainer}>
|
||||||
|
<TextField label={key} name={key} fullWidth onChange={onChange} value={value} />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<p className={classes.additionalInfo}>
|
||||||
|
This webhook will be called when new order is created and `order_created` event is
|
||||||
|
triggered.
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<ConfirmButton
|
||||||
|
type="submit"
|
||||||
|
variant="primary"
|
||||||
|
fullWidth
|
||||||
|
transitionState={transitionState}
|
||||||
|
labels={{
|
||||||
|
confirm: "Save",
|
||||||
|
error: "Error",
|
||||||
|
}}
|
||||||
|
className={classes.confirmButton}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Instructions() {
|
||||||
|
const { appBridge } = useAppBridge();
|
||||||
|
|
||||||
|
const { data } = useAppApi({
|
||||||
|
url: "/api/slack-app-manifest",
|
||||||
|
});
|
||||||
|
|
||||||
|
const slackUrl = new URL("https://api.slack.com/apps");
|
||||||
|
slackUrl.searchParams.append("new_app", "1");
|
||||||
|
slackUrl.searchParams.append("manifest_json", JSON.stringify(data));
|
||||||
|
|
||||||
|
const openExternalUrl = (to: string) => {
|
||||||
|
appBridge?.dispatch({
|
||||||
|
type: "redirect",
|
||||||
|
payload: {
|
||||||
|
newContext: true,
|
||||||
|
actionId: "redirect_from_slack_app",
|
||||||
|
to,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Typography>How to configure</Typography>
|
||||||
|
<List>
|
||||||
|
<ListItem>
|
||||||
|
<Link
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
openExternalUrl(slackUrl.href);
|
||||||
|
}}
|
||||||
|
href={slackUrl.href}
|
||||||
|
>
|
||||||
|
Install Slack application
|
||||||
|
</Link>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem>
|
||||||
|
Copy incoming Webhook URL from Slack app configuration and paste it below into
|
||||||
|
`WEBHOOK_URL` field
|
||||||
|
</ListItem>
|
||||||
|
<ListItem>Save configuration</ListItem>
|
||||||
|
</List>
|
||||||
|
<Typography>Useful links</Typography>
|
||||||
|
<List>
|
||||||
|
<ListItem>
|
||||||
|
<Link
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
openExternalUrl("https://github.com/saleor/saleor-app-slack");
|
||||||
|
}}
|
||||||
|
href="https://github.com/saleor/saleor-app-slack"
|
||||||
|
>
|
||||||
|
Visit repository & readme
|
||||||
|
</Link>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem>
|
||||||
|
<Link
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
openExternalUrl("https://api.slack.com/messaging/webhooks");
|
||||||
|
}}
|
||||||
|
href="https://api.slack.com/messaging/webhooks"
|
||||||
|
>
|
||||||
|
Read about Slack apps that use incoming webhooks
|
||||||
|
</Link>
|
||||||
|
</ListItem>
|
||||||
|
</List>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const ConfigurationWithAuth = withAuthorization({
|
||||||
|
notIframe: <AccessWarning cause="not_in_iframe" />,
|
||||||
|
unmounted: null,
|
||||||
|
noDashboardToken: <AccessWarning cause="missing_access_token" />,
|
||||||
|
dashboardTokenInvalid: <AccessWarning cause="invalid_access_token" />,
|
||||||
|
})(Configuration);
|
||||||
|
|
||||||
|
ConfigurationWithAuth.getLayout = (page: ReactElement) => (
|
||||||
|
<div>
|
||||||
|
<SlackAppMainBar />
|
||||||
|
<AppColumnsLayout>
|
||||||
|
<div />
|
||||||
|
<Card>
|
||||||
|
<CardHeader title="Configuration" />
|
||||||
|
<CardContent>{page}</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card style={{ marginBottom: 40 }}>
|
||||||
|
<CardHeader title="Instructions" />
|
||||||
|
<CardContent>
|
||||||
|
<Instructions />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</AppColumnsLayout>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default ConfigurationWithAuth;
|
||||||
141
apps/slack/src/pages/index.tsx
Normal file
141
apps/slack/src/pages/index.tsx
Normal file
|
|
@ -0,0 +1,141 @@
|
||||||
|
import { NextPage } from "next";
|
||||||
|
import { useAppBridge } from "@saleor/app-sdk/app-bridge";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
import React, { FormEventHandler, useEffect } from "react";
|
||||||
|
import { useIsMounted } from "usehooks-ts";
|
||||||
|
import Image from "next/image";
|
||||||
|
import SaleorLogoImage from "../assets/saleor-logo.svg";
|
||||||
|
import SaleorLogoImageDark from "../assets/saleor-logo-dark.svg";
|
||||||
|
import { InputAdornment, LinearProgress, TextField, Typography } from "@material-ui/core";
|
||||||
|
import { Button, makeStyles, useTheme } from "@saleor/macaw-ui";
|
||||||
|
import { isInIframe } from "../lib/is-in-iframe";
|
||||||
|
|
||||||
|
const useStyles = makeStyles({
|
||||||
|
root: {
|
||||||
|
maxWidth: 960,
|
||||||
|
margin: "50px auto",
|
||||||
|
},
|
||||||
|
headline: {
|
||||||
|
marginTop: 70,
|
||||||
|
lineHeight: 1.5,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
display: "grid",
|
||||||
|
gridTemplateColumns: "50% 50%",
|
||||||
|
gap: 116,
|
||||||
|
marginTop: 48,
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
marginTop: 24,
|
||||||
|
},
|
||||||
|
submitButton: {
|
||||||
|
marginTop: 12,
|
||||||
|
},
|
||||||
|
buttons: {
|
||||||
|
marginTop: 24,
|
||||||
|
"& > *": {
|
||||||
|
marginBottom: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const Input = () => {
|
||||||
|
return (
|
||||||
|
<TextField
|
||||||
|
label="Your Saleor URL"
|
||||||
|
fullWidth
|
||||||
|
name="saleor-url"
|
||||||
|
InputProps={{
|
||||||
|
endAdornment: <InputAdornment position="end">.saleor.cloud</InputAdornment>,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Common landing page in case of app being open outside the Dashboard.
|
||||||
|
* Allows quick installation with Saleor env input
|
||||||
|
*
|
||||||
|
* Can be safely removed
|
||||||
|
*/
|
||||||
|
const IndexPage: NextPage = () => {
|
||||||
|
const styles = useStyles();
|
||||||
|
const { appBridgeState } = useAppBridge();
|
||||||
|
const isMounted = useIsMounted();
|
||||||
|
const { replace } = useRouter();
|
||||||
|
const { themeType } = useTheme();
|
||||||
|
|
||||||
|
const onFormSubmit: FormEventHandler<HTMLFormElement> = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const appOrigin = window.location.origin;
|
||||||
|
const appManifestUrl = new URL("api/manifest", appOrigin);
|
||||||
|
const saleorUrlSlug = new FormData(e.currentTarget).get("saleor-url") as string;
|
||||||
|
const saleorUrl = new URL("https://" + saleorUrlSlug.replace("https://", "") + ".saleor.cloud");
|
||||||
|
|
||||||
|
const installationUrl = new URL(
|
||||||
|
`dashboard/apps/install?manifestUrl=${appManifestUrl}`,
|
||||||
|
saleorUrl
|
||||||
|
).href;
|
||||||
|
|
||||||
|
window.location.href = installationUrl;
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isMounted() && appBridgeState?.ready) {
|
||||||
|
replace("/configuration");
|
||||||
|
}
|
||||||
|
}, [isMounted, appBridgeState?.ready]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO Check also some timeout and show error if appBridge never handshakes
|
||||||
|
*/
|
||||||
|
if (isInIframe()) {
|
||||||
|
return <LinearProgress />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.root}>
|
||||||
|
<Image
|
||||||
|
alt="Saleor logo"
|
||||||
|
width={200}
|
||||||
|
src={themeType === "light" ? SaleorLogoImage : SaleorLogoImageDark}
|
||||||
|
/>
|
||||||
|
<Typography className={styles.headline} variant="h1">
|
||||||
|
The Slack App has to be <br />
|
||||||
|
launched in the Saleor Dashboard
|
||||||
|
</Typography>
|
||||||
|
<div className={styles.grid}>
|
||||||
|
<div>
|
||||||
|
<Typography variant="h3">
|
||||||
|
Provide you Saleor URL
|
||||||
|
<br /> to quickly install the app
|
||||||
|
</Typography>
|
||||||
|
<form onSubmit={onFormSubmit} className={styles.form}>
|
||||||
|
<Input />
|
||||||
|
<Button type="submit" className={styles.submitButton} fullWidth variant="primary">
|
||||||
|
{" "}
|
||||||
|
Submit and start installation
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Typography variant="h3">
|
||||||
|
Or check the instructions
|
||||||
|
<br /> and see how to install the app
|
||||||
|
</Typography>
|
||||||
|
<div className={styles.buttons}>
|
||||||
|
<Button variant="secondary" fullWidth>
|
||||||
|
Open repository
|
||||||
|
</Button>
|
||||||
|
<Button variant="secondary" fullWidth>
|
||||||
|
See Saleor Docs
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default IndexPage;
|
||||||
26
apps/slack/src/styles/globals.css
Normal file
26
apps/slack/src/styles/globals.css
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
body {
|
||||||
|
font-family: Inter, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
|
||||||
|
"Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||||
|
color: #111;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: #f6f8fa;
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 0.75rem;
|
||||||
|
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||||
|
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
code::before {
|
||||||
|
content: "$ ";
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
12
apps/slack/src/utils/useDashboardNotifier.ts
Normal file
12
apps/slack/src/utils/useDashboardNotifier.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { actions, NotificationPayload, useAppBridge } from "@saleor/app-sdk/app-bridge";
|
||||||
|
|
||||||
|
const useDashboardNotifier = () => {
|
||||||
|
const { appBridge, appBridgeState } = useAppBridge();
|
||||||
|
|
||||||
|
const notify = (payload: NotificationPayload) =>
|
||||||
|
appBridgeState?.ready && appBridge?.dispatch(actions.Notification(payload));
|
||||||
|
|
||||||
|
return [notify];
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useDashboardNotifier;
|
||||||
20
apps/slack/tsconfig.json
Normal file
20
apps/slack/tsconfig.json
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
17
apps/slack/types.ts
Normal file
17
apps/slack/types.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { NextPage } from "next";
|
||||||
|
import { AppProps as NextAppProps } from "next/app";
|
||||||
|
import { NextComponentType, NextPageContext } from "next/types";
|
||||||
|
import { ReactElement, ReactNode } from "react";
|
||||||
|
|
||||||
|
export type PageWithLayout = NextPage & {
|
||||||
|
getLayout?: (page: ReactElement) => ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type AppProps = {
|
||||||
|
pageProps: NextAppProps["pageProps"];
|
||||||
|
Component: NextComponentType<NextPageContext, any, {}> & { layoutProps: any };
|
||||||
|
};
|
||||||
|
|
||||||
|
export type AppLayoutProps = AppProps & {
|
||||||
|
Component: PageWithLayout;
|
||||||
|
};
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
"@changesets/cli": "^2.26.0",
|
"@changesets/cli": "^2.26.0",
|
||||||
"eslint-config-saleor": "workspace:*",
|
"eslint-config-saleor": "workspace:*",
|
||||||
"prettier": "^2.8.3",
|
"prettier": "^2.8.3",
|
||||||
"turbo": "^1.7.3",
|
"turbo": "^1.7.4",
|
||||||
"eslint": "^8.33.0"
|
"eslint": "^8.33.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,12 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
extends: ["next", "turbo", "prettier"],
|
extends: ["next", "turbo", "prettier"],
|
||||||
rules: {},
|
rules: {
|
||||||
// todo - check this, it was default in turbo
|
"@next/next/no-html-link-for-pages": "off",
|
||||||
// parserOptions: {
|
"react/jsx-key": "off",
|
||||||
// babelOptions: {
|
},
|
||||||
// presets: [require.resolve("next/babel")],
|
parserOptions: {
|
||||||
// },
|
babelOptions: {
|
||||||
// },
|
presets: [require.resolve("next/babel")],
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
@ -5,9 +5,11 @@
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"eslint-config-next": "^13.1.6",
|
"eslint-config-next": "^13.1.6",
|
||||||
"eslint-config-prettier": "^8.3.0",
|
"eslint-config-prettier": "^8.6.0",
|
||||||
"eslint-plugin-react": "7.28.0",
|
"eslint-plugin-react": "7.32.2",
|
||||||
"eslint-config-turbo": "^0.0.7"
|
"eslint-config-turbo": "^0.0.7",
|
||||||
|
"eslint": "^8.33.0",
|
||||||
|
"typescript": "^4.9.5"
|
||||||
},
|
},
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
|
|
|
||||||
864
pnpm-lock.yaml
864
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
17
turbo.json
17
turbo.json
|
|
@ -49,6 +49,23 @@
|
||||||
"SENTRY_AUTH_TOKEN"
|
"SENTRY_AUTH_TOKEN"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"build#saleor-app-slack": {
|
||||||
|
"env": [
|
||||||
|
"APL",
|
||||||
|
"APP_DEBUG",
|
||||||
|
"NODE_ENV",
|
||||||
|
"SECRET_KEY",
|
||||||
|
"ALLOWED_DOMAIN_PATTERN",
|
||||||
|
"REST_APL_ENDPOINT",
|
||||||
|
"REST_APL_TOKEN",
|
||||||
|
"NEXT_PUBLIC_SENTRY_DSN",
|
||||||
|
"SENTRY_DSN",
|
||||||
|
"NEXT_PUBLIC_SENTRY_DSN",
|
||||||
|
"SENTRY_ORG",
|
||||||
|
"SENTRY_PROJECT",
|
||||||
|
"SENTRY_AUTH_TOKEN"
|
||||||
|
]
|
||||||
|
},
|
||||||
"lint": {
|
"lint": {
|
||||||
"outputs": []
|
"outputs": []
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue