Batch product listing (photos) basic flow

.gitignore

@@ -16,3 +16,4 @@ build
 .env.*.local
 npm-debug.log
 yarn-error.log
+.idea

craco.config.js

@@ -0,0 +1,25 @@
+const { InjectManifest } = require('workbox-webpack-plugin');
+
+module.exports = {
+  reactScriptsVersion: 'sharetribe-scripts',
+  webpack: {
+    configure: {
+      module: {
+        rules: [
+          {
+            test: /\.m?js$/,
+            resolve: {
+              fullySpecified: false,
+            },
+          },
+        ],
+      },
+    },
+    plugins: [
+      new InjectManifest({
+        swSrc: './src/sw.js',
+        swDest: 'sw.js',
+      }),
+    ],
+  },
+};

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
+    "@ant-design/icons": "^5.5.1",
     "@babel/runtime": "^7.17.9",
     "@google-cloud/secret-manager": "^5.6.0",
     "@loadable/component": "^5.16.4",
@@ -12,6 +13,23 @@
     "@sentry/browser": "^8.26.0",
     "@sentry/node": "^8.26.0",
     "@slack/web-api": "^7.2.0",
+    "@tanstack/react-table": "^8.20.5",
+    "@uppy/box": "^3.0.0",
+    "@uppy/core": "^4.1.0",
+    "@uppy/dashboard": "^4.0.2",
+    "@uppy/drag-drop": "^4.0.1",
+    "@uppy/dropbox": "^4.0.0",
+    "@uppy/file-input": "^4.0.0",
+    "@uppy/golden-retriever": "^4.0.0",
+    "@uppy/google-drive": "^4.0.0",
+    "@uppy/onedrive": "^4.0.0",
+    "@uppy/progress-bar": "^4.0.0",
+    "@uppy/react": "^4.0.1",
+    "@uppy/remote-sources": "^2.1.0",
+    "@uppy/store-redux": "^4.0.0",
+    "@uppy/thumbnail-generator": "^4.0.0",
+    "@uppy/transloadit": "^4.0.1",
+    "@uppy/url": "^4.0.0",
     "antd": "^5.21.6",
     "auth0": "^4.8.0",
     "autosize": "^5.0.1",
@@ -26,6 +44,7 @@
     "decimal.js": "^10.4.3",
     "dotenv": "^10.0.0",
     "dotenv-expand": "^5.1.0",
+    "exifr": "^7.1.3",
     "express": "^4.19.2",
     "express-enforces-ssl": "^1.1.0",
     "express-openid-connect": "^2.17.1",
@@ -44,8 +63,9 @@
     "prop-types": "^15.8.1",
     "query-string": "^7.1.1",
     "raf": "^3.4.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "18.2.0",
+    "react-dates": "^21.8.0",
+    "react-dom": "18.2.0",
     "react-fast-marquee": "^1.6.5",
     "react-final-form": "6.5.9",
     "react-final-form-arrays": "3.1.3",
@@ -55,6 +75,7 @@
     "react-moment-proptypes": "^1.8.1",
     "react-redux": "^7.2.8",
     "react-router-dom": "^5.3.2",
+    "react-select": "^5.8.1",
     "react-with-direction": "^1.4.0",
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.1",
@@ -69,10 +90,12 @@
     "sitemap": "^7.1.1",
     "smoothscroll-polyfill": "^0.4.0",
     "source-map-support": "^0.5.21",
+    "transloadit": "^3.0.2",
     "unified": "^9.2.2",
     "url": "^0.11.0"
   },
   "devDependencies": {
+    "@craco/craco": "^7.1.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -82,7 +105,9 @@
     "cross-env": "^7.0.3",
     "inquirer": "^8.2.4",
     "nodemon": "^3.1.4",
-    "prettier": "^1.18.2"
+    "prettier": "^1.18.2",
+    "workbox-precaching": "^7.1.0",
+    "workbox-webpack-plugin": "^7.1.0"
   },
   "resolutions": {
     "moment": "^2.30.1"
@@ -102,17 +127,19 @@
     "clean": "rm -rf build/*",
     "config": "node scripts/config.js",
     "config-check": "node scripts/config.js --check",
-    "dev-frontend": "sharetribe-scripts start",
+    "dev-frontend": "craco start",
     "dev-backend": "nodemon server/apiServer.js",
+    "dev-backend:debug": "nodemon --inspect server/apiServer.js",
     "dev": "yarn run config-check&&cross-env NODE_ENV=development REACT_APP_DEV_API_SERVER_PORT=3500 concurrently --kill-others \"yarn run dev-frontend\" \"yarn run dev-backend\"",
+    "dev:debug": "yarn run config-check&&cross-env NODE_ENV=development REACT_APP_DEV_API_SERVER_PORT=3500 concurrently --kill-others \"yarn run dev-frontend\" \"yarn run dev-backend:debug\"",
     "build": "yarn build-web&&yarn build-server",
-    "build-web": "sharetribe-scripts build",
+    "build-web": "craco build",
     "build-server": "sharetribe-scripts build-server",
     "format": "prettier --write '**/*.{js,css}'",
     "format-ci": "prettier --list-different '**/*.{js,css}'",
     "format-docs": "prettier --write '**/*.md'",
-    "test": "NODE_ICU_DATA=node_modules/full-icu sharetribe-scripts test",
-    "test-ci": "yarn run test-server --runInBand && sharetribe-scripts test --runInBand",
+    "test": "NODE_ICU_DATA=node_modules/full-icu craco test",
+    "test-ci": "yarn run test-server --runInBand && craco test --runInBand",
     "eject": "sharetribe-scripts eject",
     "start": "node --icu-data-dir=node_modules/full-icu server/index.js",
     "dev-server": "cross-env-shell NODE_ENV=development PORT=4000 REACT_APP_MARKETPLACE_ROOT_URL=http://localhost:4000 \"yarn run build&&nodemon --watch server server/index.js\"",

server/api-util/httpHelpers.js

@@ -0,0 +1,18 @@
+const https = require('node:https');
+
+const httpFileUrlToStream = url => {
+  return new Promise((resolve, reject) => {
+    https
+      .get(url, res => {
+        if (res.statusCode !== 200) {
+          reject(new Error(`Failed to get image. Status code: ${res.statusCode}`));
+        }
+        resolve(res); // `res` is the readable stream here
+      })
+      .on('error', reject);
+  });
+};
+
+module.exports = {
+  httpFileUrlToStream,
+};

server/api-util/httpHelpers.test.js

@@ -0,0 +1,46 @@
+const { httpFileUrlToStream } = require('./httpHelpers');
+const https = require('node:https');
+
+jest.mock('node:https');
+
+describe('httpFileUrlToStream', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should resolve with a stream if the request is successful (status code 200)', async () => {
+    const mockStream = { on: jest.fn((event, handler) => handler()), statusCode: 200 }; // Mock readable stream
+    https.get.mockImplementation((url, callback) => {
+      callback({ statusCode: 200, ...mockStream });
+      return { on: jest.fn() }; // Mock returned 'req' object from https.get
+    });
+
+    const result = await httpFileUrlToStream('https://example.com/image.jpg');
+    expect(result).toEqual(mockStream);
+  });
+
+  it('should reject with an error if the status code is not 200', async () => {
+    const mockStream = { on: jest.fn((event, handler) => handler()) };
+    https.get.mockImplementation((url, callback) => {
+      callback({ statusCode: 404, ...mockStream });
+      return { on: jest.fn() };
+    });
+
+    await expect(httpFileUrlToStream('https://example.com/image.jpg')).rejects.toThrow(
+      'Failed to get image. Status code: 404'
+    );
+  });
+
+  it('should reject if there is a network error', async () => {
+    const error = new Error('Network error');
+    https.get.mockImplementation(() => ({
+      on: jest.fn((event, handler) => {
+        if (event === 'error') handler(error);
+      }),
+    }));
+
+    await expect(httpFileUrlToStream('https://example.com/image.jpg')).rejects.toThrow(
+      'Network error'
+    );
+  });
+});

server/api-util/storageManagerHelper.js

@@ -0,0 +1,35 @@
+const axios = require('axios');
+
+const ASSET_UPLOAD_URL = '/assets/marketplace/original';
+
+class StorageManagerClient {
+  client = axios.create({
+    baseURL: `${process.env.STORAGE_MANAGER_URL}/api`,
+  });
+
+  constructor() {
+    this.client.interceptors.request.use(config => {
+      config.headers['x-api-key'] = process.env.STORAGE_MANAGER_API_KEY;
+      return config;
+    }, Promise.reject);
+  }
+
+  async uploadOriginalAsset(userId, listingId, imageUrl, metadata = {}) {
+    try {
+      const response = await this.client.post(ASSET_UPLOAD_URL, {
+        userId,
+        listingId,
+        tempSslUrl: imageUrl,
+        metadata,
+      });
+      return response.data;
+    } catch (error) {
+      console.error('Failed to upload original asset:', error);
+      throw error;
+    }
+  }
+}
+
+module.exports = {
+  StorageManagerClient,
+};

server/api/transloadit-params.js

@@ -0,0 +1,34 @@
+const Transloadit = require('transloadit');
+const moment = require('moment');
+
+module.exports = (req, res) => {
+  const { userId } = req.body;
+
+  const authKey = process.env.TRANSLOADIT_AUTH_KEY;
+  const transloadit = new Transloadit({
+    authKey,
+    authSecret: process.env.TRANSLOADIT_AUTH_SECRET,
+  });
+
+  const expires = moment
+    .utc()
+    .add(1, 'hour')
+    .format('YYYY/MM/DD HH:mm:ss Z');
+
+  const params = {
+    auth: {
+      key: authKey,
+      expires,
+    },
+    template_id: process.env.TRANSLOADIT_UPLOAD_LISTING_ASSETS_TEMPLATE_ID,
+    fields: {
+      userId,
+    },
+  };
+
+  const signature = transloadit.calcSignature(params);
+  res
+    .status(200)
+    .send(signature)
+    .end();
+};

server/apiRouter.js

@@ -17,6 +17,7 @@ const { verifySlackRequestMiddleware, slackInteractivity } = require('./api/slac
 const transitionPrivileged = require('./api/transition-privileged');
 const createUserWithIdp = require('./api/auth/createUserWithIdp');
 const { authenticateAuth0, authenticateAuth0Callback } = require('./api/auth/auth0');
+const transloaditParams = require('./api/transloadit-params');
 
 const router = express.Router();
 
@@ -58,6 +59,7 @@ router.get('/login-as', loginAs);
 router.post('/transaction-line-items', transactionLineItems);
 router.post('/initiate-privileged', initiatePrivileged);
 router.post('/transition-privileged', transitionPrivileged);
+router.post('/transloadit-params', transloaditParams);
 
 // Create user with identity provider (e.g. Facebook or Google)
 // This endpoint is called to create a new user after user has confirmed

server/scripts/events/index.js

@@ -1,12 +1,14 @@
 const notifyProfileListingUpdated = require('./notifyProfileListingUpdated');
 const notifyUserCreated = require('./notifyUserCreated');
 const notifyUserUpdated = require('./notifyUserUpdated');
+const notifyProductListingCreated = require('./notifyProductListingCreated');
 
 async function loadEventScripts() {
   console.warn("\nLoading event's scripts..");
   notifyProfileListingUpdated();
   notifyUserCreated();
   notifyUserUpdated();
+  notifyProductListingCreated();
   console.warn("Loading event's scripts DONE\n");
 }
 

server/scripts/events/notifyProductListingCreated.js

@@ -0,0 +1,52 @@
+const { generateScript, integrationSdkInit } = require('../../api-util/scriptManager');
+const { StorageManagerClient } = require('../../api-util/storageManagerHelper');
+const { httpFileUrlToStream } = require('../../api-util/httpHelpers');
+
+const SCRIPT_NAME = 'notifyProductListingCreated';
+const EVENT_TYPES = 'listing/created';
+const RESOURCE_TYPE = 'listing';
+
+const processEvent = async (integrationSdk, event, storageManagerClient) => {
+  const { resourceType, eventType, resourceId, resource } = event.attributes;
+  if (resourceType !== RESOURCE_TYPE || eventType !== EVENT_TYPES) return;
+
+  const { attributes: listing, relationships } = resource;
+  const userId = relationships?.author?.data?.id?.uuid;
+  const listingId = resourceId?.uuid;
+  const imageUrl = listing?.privateData?.transloaditSslUrl;
+
+  if (!imageUrl || !userId || !listingId) return;
+
+  try {
+    const originalAssetData = await storageManagerClient.uploadOriginalAsset(
+      userId,
+      listingId,
+      imageUrl
+    );
+    const imageStream = await httpFileUrlToStream(imageUrl);
+    const { data: sdkImage } = await integrationSdk.images.upload({ image: imageStream });
+
+    await integrationSdk.listings.update(
+      {
+        id: listingId,
+        privateData: { originalAssetUrl: originalAssetData.source, transloaditSslUrl: null },
+        images: [sdkImage.data.id],
+      },
+      { expand: true, include: ['images'] }
+    );
+  } catch (error) {
+    console.error('Error processing event:', error);
+  }
+};
+
+function script() {
+  const integrationSdk = integrationSdkInit();
+  const storageManagerClient = new StorageManagerClient();
+
+  const queryEvents = args => integrationSdk.events.query({ ...args, eventTypes: EVENT_TYPES });
+  const analyzeEvent = event => processEvent(integrationSdk, event, storageManagerClient);
+
+  generateScript(SCRIPT_NAME, queryEvents, analyzeEvent);
+}
+
+module.exports = script;