feat: add shopify piece

packages/frontend/src/app/modules/flow-builder/page/flow-builder/flow-right-sidebar/edit-step-sidebar/edit-step-accordion/input-forms/piece-input-forms/oauth2-connection-dialog/oauth2-connection-dialog.component.ts

@@ -180,6 +180,7 @@ export class OAuth2ConnectionDialogComponent implements OnInit {
     const connectionName = this.connectionToUpdate
       ? this.connectionToUpdate.name
       : this.settingsForm.controls.name.value;
+    const { tokenUrl } = this.getTokenAndUrl();
     const newConnection: UpsertOAuth2Request = {
       name: connectionName,
       appName: this.pieceName,
@@ -191,7 +192,7 @@ export class OAuth2ConnectionDialogComponent implements OnInit {
         client_secret: this.settingsForm.controls.client_secret.value,
         redirect_url: this.settingsForm.controls.redirect_url.getRawValue(),
         scope: this.pieceAuthConfig.scope!.join(' ') || '',
-        token_url: this.pieceAuthConfig.tokenUrl!,
+        token_url: tokenUrl,
         props: this.pieceAuthConfig.oAuthProps
           ? this.settingsForm.controls.props.value
           : undefined,
@@ -258,6 +259,18 @@ export class OAuth2ConnectionDialogComponent implements OnInit {
 
   getOAuth2Settings(): OAuth2PopupParams {
     const formValue = this.settingsForm.getRawValue();
+    const { authUrl } = this.getTokenAndUrl();
+    return {
+      auth_url: authUrl,
+      client_id: formValue.client_id,
+      extraParams: this.pieceAuthConfig.oAuthProps || {},
+      redirect_url: formValue.redirect_url,
+      pkce: this.pieceAuthConfig.pkce,
+      scope: this.pieceAuthConfig.scope!.join(' '),
+    };
+  }
+
+  getTokenAndUrl() {
     let authUrl = this.pieceAuthConfig.authUrl!;
     let tokenUrl = this.pieceAuthConfig.tokenUrl!;
     if (this.pieceAuthConfig.oAuthProps) {
@@ -273,12 +286,8 @@ export class OAuth2ConnectionDialogComponent implements OnInit {
       });
     }
     return {
-      auth_url: this.pieceAuthConfig.authUrl!,
-      client_id: formValue.client_id,
-      extraParams: this.pieceAuthConfig.oAuthProps || {},
-      redirect_url: formValue.redirect_url,
-      pkce: this.pieceAuthConfig.pkce,
-      scope: this.pieceAuthConfig.scope!.join(' '),
+      authUrl: authUrl,
+      tokenUrl: tokenUrl,
     };
   }
 }

packages/frontend/src/app/modules/flow-builder/service/action-meta.service.ts

@@ -3,6 +3,7 @@ import { FlowItemDetails } from '../page/flow-builder/flow-right-sidebar/step-ty
 import {
   ActionType,
   ApEdition,
+  ApEnvironment,
   compareSemVer,
   PieceMetadata,
   PieceMetadataSummary,
@@ -22,6 +23,7 @@ type TriggersMetadata = Record<string, TriggerBase>;
 type FilterUnSupportedPiecesParams = {
   piecesManifest: PieceMetadataSummary[];
   release: string;
+  environment: string;
 };
 
 @Injectable({
@@ -80,6 +82,9 @@ export class ActionMetaService {
     const { piecesManifest, release } = params;
 
     return piecesManifest.filter((piece) => {
+      if (params.environment === ApEnvironment.DEVELOPMENT) {
+        return true;
+      }
       const minRelease = piece.minimumSupportedRelease;
       const maxRelease = piece.maximumSupportedRelease;
       if (minRelease && compareSemVer(release, minRelease) === -1) {
@@ -125,6 +130,7 @@ export class ActionMetaService {
   getPiecesManifest(): Observable<PieceMetadataSummary[]> {
     return forkJoin({
       piecesManifest: this.piecesManifest$,
+      environment: this.flagsService.getEnvironment(),
       release: this.release$,
     }).pipe(map(this.filterUnSupportedPieces), shareReplay(1));
   }

packages/pieces/apps/src/index.ts

@@ -48,6 +48,7 @@ import { square } from '@activepieces/piece-square';
 import { delay } from '@activepieces/piece-delay';
 import { dataMapper } from '@activepieces/piece-data-mapper';
 import { schedule } from '@activepieces/piece-schedule';
+import { shopify } from '@activepieces/piece-shopify';
 
 export const pieces: Piece[] = [
     airtable,
@@ -98,7 +99,8 @@ export const pieces: Piece[] = [
     delay,
     dataMapper,
     intercom,
-    schedule
+    schedule,
+    shopify
 ].sort((a, b) => a.displayName > b.displayName ? 1 : -1);
 
 export const getPiece = (name: string): Piece | undefined => {

packages/pieces/shopify/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

packages/pieces/shopify/README.md

@@ -0,0 +1,7 @@
+# pieces-shopify
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running lint
+
+Run `nx lint pieces-shopify` to execute the lint via [ESLint](https://eslint.org/).

packages/pieces/shopify/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@activepieces/piece-shopify",
+  "version": "0.0.1"
+}

packages/pieces/shopify/project.json

@@ -0,0 +1,36 @@
+{
+    "name": "pieces-shopify",
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "packages/pieces/shopify/src",
+    "projectType": "library",
+    "targets": {
+        "build": {
+            "executor": "@nrwl/js:tsc",
+            "outputs": [
+                "{options.outputPath}"
+            ],
+            "options": {
+                "outputPath": "dist/packages/pieces/shopify",
+                "tsConfig": "packages/pieces/shopify/tsconfig.lib.json",
+                "packageJson": "packages/pieces/shopify/package.json",
+                "main": "packages/pieces/shopify/src/index.ts",
+                "assets": [
+                    "packages/pieces/shopify/*.md"
+                ],
+                "buildableProjectDepsInPackageJsonType": "dependencies"
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": [
+                "{options.outputFile}"
+            ],
+            "options": {
+                "lintFilePatterns": [
+                    "packages/pieces/shopify/**/*.ts"
+                ]
+            }
+        }
+    },
+    "tags": []
+}

packages/pieces/shopify/src/index.ts

@@ -0,0 +1,26 @@
+
+import { createPiece } from '@activepieces/framework';
+import packageJson from '../package.json';
+import { newCancelledOrder } from './lib/triggers/new-cancelled-order';
+import { newCustomer } from './lib/triggers/new-customer';
+import { newOrder } from './lib/triggers/new-order';
+import { newPaidOrder } from './lib/triggers/new-paid-order';
+
+export const shopify = createPiece({
+  name: 'shopify',
+  displayName: 'Shopify',
+  logoUrl: 'https://cdn.activepieces.com/pieces/shopify.png',
+  version: packageJson.version,
+  authors: [
+    "abuaboud"
+  ],
+  minimumSupportedRelease: '0.3.9',
+  actions: [
+  ],
+  triggers: [
+    newCustomer,
+    newOrder,
+    newPaidOrder,
+    newCancelledOrder
+  ],
+});

packages/pieces/shopify/src/lib/common/props.ts

@@ -0,0 +1,19 @@
+import { Property } from "@activepieces/framework";
+
+export const shopifyCommon = {
+    authentication: Property.OAuth2({
+        props: {
+            shop: Property.ShortText({
+                displayName: 'Shop Name',
+                description: 'Shop Name',
+                required: true
+            })
+        },
+        displayName: 'Authentication',
+        description: 'Authentication for the webhook',
+        required: true,
+        authUrl: "https://{shop}.myshopify.com/admin/oauth/authorize",
+        tokenUrl: "https://{shop}.myshopify.com/admin/oauth/access_token",
+        scope: ['read_orders', 'read_customers']
+    })
+}

packages/pieces/shopify/src/lib/common/register-webhook.ts

@@ -0,0 +1,71 @@
+import { httpClient, HttpMethod, createTrigger, Trigger } from "@activepieces/framework"
+import { TriggerStrategy } from "@activepieces/shared"
+import { shopifyCommon } from "./props";
+
+export const createShopifyWebhookTrigger = ({
+    name,
+    description,
+    displayName,
+    sampleData,
+    topic
+}: {
+    name: string,
+    description: string,
+    displayName: string,
+    topic: string,
+    sampleData: Record<string, unknown>
+}): Trigger =>
+    createTrigger({
+        name,
+        description,
+        displayName,
+        props: {
+            authentication: shopifyCommon.authentication
+        },
+        sampleData: sampleData,
+        type: TriggerStrategy.WEBHOOK,
+        async onEnable(context) {
+            const shopName = context.propsValue.authentication.props!['shop'];
+            const response = await httpClient.sendRequest<{
+                webhook: {
+                    id: string
+                }
+            }>({
+                method: HttpMethod.POST,
+                url: `https://${shopName}.myshopify.com/admin/api/2023-01/webhooks.json`,
+                headers: {
+                    "X-Shopify-Access-Token": context.propsValue.authentication.access_token
+                },
+                body: {
+                    webhook: {
+                        topic: topic,
+                        address: context.webhookUrl,
+                        format: "json"
+                    }
+                }
+            })
+            await context.store?.put(`shopify_webhook_id`, response.body.webhook.id)
+            console.log("webhook created", response.body.webhook.id);
+        },
+        async onDisable(context) {
+            const webhookId = await context.store.get<string>(`shopify_webhook_id`);
+            const shopName = context.propsValue.authentication.props!['shop'];
+            await httpClient.sendRequest<{
+                webhook: {
+                    id: string
+                }
+            }>({
+                method: HttpMethod.DELETE,
+                url: `https://${shopName}.myshopify.com/admin/api/2023-01/webhooks/${webhookId}.json`,
+                headers: {
+                    "X-Shopify-Access-Token": context.propsValue.authentication.access_token
+                }
+            })
+            await context.store?.put(`shopify_webhook_id`, null)
+        },
+        async run(context) {
+            console.debug("trigger running", context)
+            return [context.payload.body]
+        }
+    })
+