From 7a4e2fce5cc69f3c80d868a56698e68661139bc1 Mon Sep 17 00:00:00 2001 From: Igor Zinovyev Date: Fri, 30 Aug 2024 20:36:18 +0300 Subject: [PATCH 01/13] Added the skeleton packages for the Odie-based Jetpackcom support UI app. --- apps/jetpackme-support/README.md | 1 + apps/jetpackme-support/index.js | 29 +++++++ apps/jetpackme-support/package.json | 58 +++++++++++++ apps/jetpackme-support/webpack.config.js | 100 +++++++++++++++++++++++ yarn.lock | 53 +++++++++++- 5 files changed, 240 insertions(+), 1 deletion(-) create mode 100644 apps/jetpackme-support/README.md create mode 100644 apps/jetpackme-support/index.js create mode 100644 apps/jetpackme-support/package.json create mode 100644 apps/jetpackme-support/webpack.config.js diff --git a/apps/jetpackme-support/README.md b/apps/jetpackme-support/README.md new file mode 100644 index 0000000000000..e071150a594ae --- /dev/null +++ b/apps/jetpackme-support/README.md @@ -0,0 +1 @@ +### The Odie bot interface for Jetpack.com diff --git a/apps/jetpackme-support/index.js b/apps/jetpackme-support/index.js new file mode 100644 index 0000000000000..24356b4bd8113 --- /dev/null +++ b/apps/jetpackme-support/index.js @@ -0,0 +1,29 @@ +import OdieAssistantProvider, { + OdieAssistant, + EllipsisMenu, + useOdieAssistantContext, +} from '@automattic/odie-client'; + +const OdieBot = () => { + const { clearChat } = useOdieAssistantContext(); + return ( + +
+ + clearChat() } + onKeyPress={ () => clearChat() } + className="menu-item-class" + > + Start a New Chat + + +
+ + + ); +}; + +window.JetpackSupportBot = OdieBot(); diff --git a/apps/jetpackme-support/package.json b/apps/jetpackme-support/package.json new file mode 100644 index 0000000000000..178d6bddf6e4f --- /dev/null +++ b/apps/jetpackme-support/package.json @@ -0,0 +1,58 @@ +{ + "name": "@automattic/jetpackme-support", + "version": "1.0.0", + "description": "A Jetpack.com Odie bot interface application.", + "homepage": "https://github.com/Automattic/wp-calypso", + "license": "GPL-2.0-or-later", + "author": "Automattic Inc.", + "sideEffects": [ + "*.css", + "*.scss", + "./config.js" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/Automattic/wp-calypso.git", + "directory": "apps/help-center" + }, + "publishConfig": { + "access": "public" + }, + "bugs": "https://github.com/Automattic/wp-calypso/issues", + "types": "dist/types", + "scripts": { + "clean": "rm -rf dist", + "teamcity:build-app": "yarn run build", + "build": "NODE_ENV=production yarn dev", + "build:app": "calypso-build", + "dev": "yarn run calypso-apps-builder --localPath dist --remotePath /home/wpcom/public_html/widgets.wp.com/help-center", + "prepack": "yarn run clean && yarn run build", + "watch": "tsc --build ./tsconfig.json --watch", + "translate": "rm -rf dist/strings && wp-babel-makepot './dist/*.{js,jsx,ts,tsx}' --ignore '**/node_modules/**,**/test/**,**/*.d.ts' --base './dist' --dir './dist/strings' --output './dist/help-center.pot' && build-app-languages --stringsFilePath='./dist/help-center.pot' --outputPath='./dist/languages' --outputFormat='JS'" + }, + "dependencies": { + "@automattic/components": "workspace:^", + "@automattic/i18n-utils": "workspace:^", + "@automattic/odie-client": "workspace:^", + "@wordpress/components": "^28.2.0", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@automattic/calypso-apps-builder": "workspace:^", + "@automattic/calypso-build": "workspace:^", + "@automattic/calypso-typescript-config": "workspace:^", + "@automattic/wp-babel-makepot": "workspace:^", + "@wordpress/dependency-extraction-webpack-plugin": "5.9.0", + "@wordpress/readable-js-assets-webpack-plugin": "3.0.0", + "autoprefixer": "^10.4.20", + "copy-webpack-plugin": "^10.2.4", + "typescript": "^5.3.3", + "webpack": "^5.91.0" + }, + "peerDependencies": { + "@wordpress/data": "^10.2.0", + "postcss": "*" + }, + "private": true +} diff --git a/apps/jetpackme-support/webpack.config.js b/apps/jetpackme-support/webpack.config.js new file mode 100644 index 0000000000000..99c393cb88a2a --- /dev/null +++ b/apps/jetpackme-support/webpack.config.js @@ -0,0 +1,100 @@ +const path = require( 'path' ); +const FileConfig = require( '@automattic/calypso-build/webpack/file-loader' ); +const SassConfig = require( '@automattic/calypso-build/webpack/sass' ); +const TranspileConfig = require( '@automattic/calypso-build/webpack/transpile' ); +const { shouldTranspileDependency } = require( '@automattic/calypso-build/webpack/util' ); +const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config.js' ); +const ReadableJsAssetsWebpackPlugin = require( '@wordpress/readable-js-assets-webpack-plugin' ); +const autoprefixerPlugin = require( 'autoprefixer' ); +const webpack = require( 'webpack' ); +const cacheIdentifier = require( '../../build-tools/babel/babel-loader-cache-identifier' ); +const GenerateChunksMapPlugin = require( '../../build-tools/webpack/generate-chunks-map-plugin' ); +const isDevelopment = process.env.NODE_ENV !== 'production'; +const extraPath = 'fallback'; +const cachePath = path.resolve( '.cache', extraPath ); + +/* Arguments to this function replicate webpack's so this config can be used on the command line, + * with individual options overridden by command line args. + * @see {@link https://webpack.js.org/configuration/configuration-types/#exporting-a-function} + * @see {@link https://webpack.js.org/api/cli/} + * @param {Object} env environment options + * @param {string} env.source plugin slugs, comma separated list + * @param {Object} argv options map + * @param {string} argv.entry entry path + * @returns {Object} webpack config + */ +function getWebpackConfig( env = { source: '' }, argv = {} ) { + env.WP = true; + const outputPath = path.join( __dirname, 'dist' ); + + const webpackConfig = getBaseWebpackConfig( env, argv ); + + return { + ...webpackConfig, + mode: isDevelopment ? 'development' : 'production', + entry: { + 'jetpackme-support': path.join( __dirname, 'index.js' ), + }, + output: { + ...webpackConfig.output, + path: outputPath, + filename: '[name].min.js', // dynamic filename + library: 'jetpackme-support', + }, + optimization: { + ...webpackConfig.optimization, + // disable module concatenation so that instances of `__()` are not renamed + concatenateModules: false, + }, + module: { + rules: [ + TranspileConfig.loader( { + workerCount: 2, + configFile: path.resolve( '../../babel.config.js' ), + cacheDirectory: path.resolve( cachePath, 'babel-client' ), + cacheIdentifier, + cacheCompression: false, + exclude: /node_modules\//, + } ), + TranspileConfig.loader( { + workerCount: 2, + presets: [ require.resolve( '@automattic/calypso-babel-config/presets/dependencies' ) ], + cacheDirectory: path.resolve( cachePath, 'babel-client' ), + cacheIdentifier, + cacheCompression: false, + include: shouldTranspileDependency, + } ), + SassConfig.loader( { + includePaths: [ __dirname ], + postCssOptions: { + // Do not use postcss.config.js. This ensure we have the final say on how PostCSS is used in calypso. + // This is required because Calypso imports `@automattic/notifications` and that package defines its + // own `postcss.config.js` that they use for their webpack bundling process. + config: false, + plugins: [ autoprefixerPlugin() ], + }, + prelude: `@use '${ require.resolve( + 'calypso/assets/stylesheets/shared/_utils.scss' + ) }' as *;`, + } ), + FileConfig.loader(), + ], + }, + plugins: [ + new webpack.DefinePlugin( { + 'process.env.NODE_DEBUG': JSON.stringify( process.env.NODE_DEBUG || false ), + } ), + new GenerateChunksMapPlugin( { + output: path.resolve( './dist/chunks-map.json' ), + } ), + ...SassConfig.plugins( { + filename: '[name].min.css', + chunkFilename: '[contenthash].css', + minify: ! isDevelopment, + } ), + new ReadableJsAssetsWebpackPlugin(), + ], + }; +} + +module.exports = getWebpackConfig; diff --git a/yarn.lock b/yarn.lock index 6338854bbe8aa..ea368482aaeb8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1236,6 +1236,32 @@ __metadata: languageName: unknown linkType: soft +"@automattic/jetpackme-support@workspace:apps/jetpackme-support": + version: 0.0.0-use.local + resolution: "@automattic/jetpackme-support@workspace:apps/jetpackme-support" + dependencies: + "@automattic/calypso-apps-builder": "workspace:^" + "@automattic/calypso-build": "workspace:^" + "@automattic/calypso-typescript-config": "workspace:^" + "@automattic/components": "workspace:^" + "@automattic/i18n-utils": "workspace:^" + "@automattic/odie-client": "workspace:^" + "@automattic/wp-babel-makepot": "workspace:^" + "@wordpress/components": "npm:^28.2.0" + "@wordpress/dependency-extraction-webpack-plugin": "npm:5.9.0" + "@wordpress/readable-js-assets-webpack-plugin": "npm:3.0.0" + autoprefixer: "npm:^10.4.20" + copy-webpack-plugin: "npm:^10.2.4" + react: "npm:^18.2.0" + react-dom: "npm:^18.2.0" + typescript: "npm:^5.3.3" + webpack: "npm:^5.91.0" + peerDependencies: + "@wordpress/data": ^10.2.0 + postcss: "*" + languageName: unknown + linkType: soft + "@automattic/js-utils@workspace:^, @automattic/js-utils@workspace:packages/js-utils": version: 0.0.0-use.local resolution: "@automattic/js-utils@workspace:packages/js-utils" @@ -11623,6 +11649,24 @@ __metadata: languageName: node linkType: hard +"autoprefixer@npm:^10.4.20": + version: 10.4.20 + resolution: "autoprefixer@npm:10.4.20" + dependencies: + browserslist: "npm:^4.23.3" + caniuse-lite: "npm:^1.0.30001646" + fraction.js: "npm:^4.3.7" + normalize-range: "npm:^0.1.2" + picocolors: "npm:^1.0.1" + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.1.0 + bin: + autoprefixer: bin/autoprefixer + checksum: e1f00978a26e7c5b54ab12036d8c13833fad7222828fc90914771b1263f51b28c7ddb5803049de4e77696cbd02bb25cfc3634e80533025bb26c26aacdf938940 + languageName: node + linkType: hard + "autosize@npm:^4.0.2, autosize@npm:^4.0.4": version: 4.0.4 resolution: "autosize@npm:4.0.4" @@ -12255,7 +12299,7 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.0.0, browserslist@npm:^4.12.0, browserslist@npm:^4.16.0, browserslist@npm:^4.16.3, browserslist@npm:^4.16.6, browserslist@npm:^4.21.10, browserslist@npm:^4.23.0, browserslist@npm:^4.23.1, browserslist@npm:^4.8.2": +"browserslist@npm:^4.0.0, browserslist@npm:^4.12.0, browserslist@npm:^4.16.0, browserslist@npm:^4.16.3, browserslist@npm:^4.16.6, browserslist@npm:^4.21.10, browserslist@npm:^4.23.0, browserslist@npm:^4.23.1, browserslist@npm:^4.23.3, browserslist@npm:^4.8.2": version: 4.23.3 resolution: "browserslist@npm:4.23.3" dependencies: @@ -18394,6 +18438,13 @@ __metadata: languageName: node linkType: hard +"fraction.js@npm:^4.3.7": + version: 4.3.7 + resolution: "fraction.js@npm:4.3.7" + checksum: df291391beea9ab4c263487ffd9d17fed162dbb736982dee1379b2a8cc94e4e24e46ed508c6d278aded9080ba51872f1bc5f3a5fd8d7c74e5f105b508ac28711 + languageName: node + linkType: hard + "fragment-cache@npm:^0.2.1": version: 0.2.1 resolution: "fragment-cache@npm:0.2.1" From 5cd9c6007426bad7dd795c2525f3856705e91a3c Mon Sep 17 00:00:00 2001 From: Brad Jorsch Date: Mon, 2 Sep 2024 19:41:46 +0300 Subject: [PATCH 02/13] Removed unnecessary overrides from Webpack config. --- apps/jetpackme-support/webpack.config.js | 57 +----------------------- 1 file changed, 1 insertion(+), 56 deletions(-) diff --git a/apps/jetpackme-support/webpack.config.js b/apps/jetpackme-support/webpack.config.js index 99c393cb88a2a..d383cad813428 100644 --- a/apps/jetpackme-support/webpack.config.js +++ b/apps/jetpackme-support/webpack.config.js @@ -1,17 +1,7 @@ const path = require( 'path' ); -const FileConfig = require( '@automattic/calypso-build/webpack/file-loader' ); -const SassConfig = require( '@automattic/calypso-build/webpack/sass' ); -const TranspileConfig = require( '@automattic/calypso-build/webpack/transpile' ); -const { shouldTranspileDependency } = require( '@automattic/calypso-build/webpack/util' ); const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config.js' ); const ReadableJsAssetsWebpackPlugin = require( '@wordpress/readable-js-assets-webpack-plugin' ); -const autoprefixerPlugin = require( 'autoprefixer' ); -const webpack = require( 'webpack' ); -const cacheIdentifier = require( '../../build-tools/babel/babel-loader-cache-identifier' ); const GenerateChunksMapPlugin = require( '../../build-tools/webpack/generate-chunks-map-plugin' ); -const isDevelopment = process.env.NODE_ENV !== 'production'; -const extraPath = 'fallback'; -const cachePath = path.resolve( '.cache', extraPath ); /* Arguments to this function replicate webpack's so this config can be used on the command line, * with individual options overridden by command line args. @@ -25,73 +15,28 @@ const cachePath = path.resolve( '.cache', extraPath ); */ function getWebpackConfig( env = { source: '' }, argv = {} ) { env.WP = true; - const outputPath = path.join( __dirname, 'dist' ); const webpackConfig = getBaseWebpackConfig( env, argv ); return { ...webpackConfig, - mode: isDevelopment ? 'development' : 'production', entry: { 'jetpackme-support': path.join( __dirname, 'index.js' ), }, output: { ...webpackConfig.output, - path: outputPath, filename: '[name].min.js', // dynamic filename - library: 'jetpackme-support', }, optimization: { ...webpackConfig.optimization, // disable module concatenation so that instances of `__()` are not renamed concatenateModules: false, }, - module: { - rules: [ - TranspileConfig.loader( { - workerCount: 2, - configFile: path.resolve( '../../babel.config.js' ), - cacheDirectory: path.resolve( cachePath, 'babel-client' ), - cacheIdentifier, - cacheCompression: false, - exclude: /node_modules\//, - } ), - TranspileConfig.loader( { - workerCount: 2, - presets: [ require.resolve( '@automattic/calypso-babel-config/presets/dependencies' ) ], - cacheDirectory: path.resolve( cachePath, 'babel-client' ), - cacheIdentifier, - cacheCompression: false, - include: shouldTranspileDependency, - } ), - SassConfig.loader( { - includePaths: [ __dirname ], - postCssOptions: { - // Do not use postcss.config.js. This ensure we have the final say on how PostCSS is used in calypso. - // This is required because Calypso imports `@automattic/notifications` and that package defines its - // own `postcss.config.js` that they use for their webpack bundling process. - config: false, - plugins: [ autoprefixerPlugin() ], - }, - prelude: `@use '${ require.resolve( - 'calypso/assets/stylesheets/shared/_utils.scss' - ) }' as *;`, - } ), - FileConfig.loader(), - ], - }, plugins: [ - new webpack.DefinePlugin( { - 'process.env.NODE_DEBUG': JSON.stringify( process.env.NODE_DEBUG || false ), - } ), + ...webpackConfig.plugins, new GenerateChunksMapPlugin( { output: path.resolve( './dist/chunks-map.json' ), } ), - ...SassConfig.plugins( { - filename: '[name].min.css', - chunkFilename: '[contenthash].css', - minify: ! isDevelopment, - } ), new ReadableJsAssetsWebpackPlugin(), ], }; From e6efc44ac101a438203cad75e348d77fbfdfc687 Mon Sep 17 00:00:00 2001 From: Igor Zinovyev Date: Wed, 11 Sep 2024 16:24:40 +0300 Subject: [PATCH 03/13] Moved the index file to the src folder. --- apps/jetpackme-support/{ => src}/index.js | 0 apps/jetpackme-support/webpack.config.js | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename apps/jetpackme-support/{ => src}/index.js (100%) diff --git a/apps/jetpackme-support/index.js b/apps/jetpackme-support/src/index.js similarity index 100% rename from apps/jetpackme-support/index.js rename to apps/jetpackme-support/src/index.js diff --git a/apps/jetpackme-support/webpack.config.js b/apps/jetpackme-support/webpack.config.js index d383cad813428..0bd888f02d393 100644 --- a/apps/jetpackme-support/webpack.config.js +++ b/apps/jetpackme-support/webpack.config.js @@ -21,7 +21,7 @@ function getWebpackConfig( env = { source: '' }, argv = {} ) { return { ...webpackConfig, entry: { - 'jetpackme-support': path.join( __dirname, 'index.js' ), + 'jetpackme-support': path.join( __dirname, 'src/index.js' ), }, output: { ...webpackConfig.output, From f93a4099ed5bb84f06d09e1351bdefa05f88dd9e Mon Sep 17 00:00:00 2001 From: Kuba Birecki Date: Fri, 20 Sep 2024 14:15:10 +0200 Subject: [PATCH 04/13] Update webpack config and add example page --- apps/jetpackme-support/examples/prompt.html | 9 +++++++++ apps/jetpackme-support/webpack.config.js | 6 +++--- 2 files changed, 12 insertions(+), 3 deletions(-) create mode 100644 apps/jetpackme-support/examples/prompt.html diff --git a/apps/jetpackme-support/examples/prompt.html b/apps/jetpackme-support/examples/prompt.html new file mode 100644 index 0000000000000..6a5b76c51e13f --- /dev/null +++ b/apps/jetpackme-support/examples/prompt.html @@ -0,0 +1,9 @@ + + + + Support Prompt Test Page + + + + + diff --git a/apps/jetpackme-support/webpack.config.js b/apps/jetpackme-support/webpack.config.js index 0bd888f02d393..2a4aa56c8630b 100644 --- a/apps/jetpackme-support/webpack.config.js +++ b/apps/jetpackme-support/webpack.config.js @@ -3,6 +3,8 @@ const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config. const ReadableJsAssetsWebpackPlugin = require( '@wordpress/readable-js-assets-webpack-plugin' ); const GenerateChunksMapPlugin = require( '../../build-tools/webpack/generate-chunks-map-plugin' ); +const isDevelopment = process.env.NODE_ENV !== 'production'; + /* Arguments to this function replicate webpack's so this config can be used on the command line, * with individual options overridden by command line args. * @see {@link https://webpack.js.org/configuration/configuration-types/#exporting-a-function} @@ -14,9 +16,7 @@ const GenerateChunksMapPlugin = require( '../../build-tools/webpack/generate-chu * @returns {Object} webpack config */ function getWebpackConfig( env = { source: '' }, argv = {} ) { - env.WP = true; - - const webpackConfig = getBaseWebpackConfig( env, argv ); + const webpackConfig = getBaseWebpackConfig( { ...env, WP: ! isDevelopment }, argv ); return { ...webpackConfig, From 48d3fbf5cd8ca2f99515797a1874d3796a558652 Mon Sep 17 00:00:00 2001 From: Kuba Birecki Date: Fri, 20 Sep 2024 14:19:55 +0200 Subject: [PATCH 05/13] Update the entry point to be able to correctly render the prompt on the page --- apps/jetpackme-support/package.json | 3 +- apps/jetpackme-support/src/index.js | 37 +++++-------------- .../src/support-prompt/index.js | 32 ++++++++++++++++ 3 files changed, 44 insertions(+), 28 deletions(-) create mode 100644 apps/jetpackme-support/src/support-prompt/index.js diff --git a/apps/jetpackme-support/package.json b/apps/jetpackme-support/package.json index 178d6bddf6e4f..3e42358d32278 100644 --- a/apps/jetpackme-support/package.json +++ b/apps/jetpackme-support/package.json @@ -34,7 +34,8 @@ "@automattic/components": "workspace:^", "@automattic/i18n-utils": "workspace:^", "@automattic/odie-client": "workspace:^", - "@wordpress/components": "^28.2.0", + "@wordpress/components": "^28.7.0", + "@wordpress/element": "^6.7.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/apps/jetpackme-support/src/index.js b/apps/jetpackme-support/src/index.js index 24356b4bd8113..8768aa55984ca 100644 --- a/apps/jetpackme-support/src/index.js +++ b/apps/jetpackme-support/src/index.js @@ -1,29 +1,12 @@ -import OdieAssistantProvider, { - OdieAssistant, - EllipsisMenu, - useOdieAssistantContext, -} from '@automattic/odie-client'; +/** + * WordPress dependencies + */ +import { render } from '@wordpress/element'; +/** + * Internal dependencies + */ +import SupportPrompt from './support-prompt'; -const OdieBot = () => { - const { clearChat } = useOdieAssistantContext(); - return ( - -
- - clearChat() } - onKeyPress={ () => clearChat() } - className="menu-item-class" - > - Start a New Chat - - -
- - - ); +window.renderSupportPrompt = ( elementId ) => { + render( , document.getElementById( elementId ) ); }; - -window.JetpackSupportBot = OdieBot(); diff --git a/apps/jetpackme-support/src/support-prompt/index.js b/apps/jetpackme-support/src/support-prompt/index.js new file mode 100644 index 0000000000000..4405bb39e7bfd --- /dev/null +++ b/apps/jetpackme-support/src/support-prompt/index.js @@ -0,0 +1,32 @@ +/** + * Internal dependencies + */ +import OdieAssistantProvider, { + OdieAssistant, + EllipsisMenu, + useOdieAssistantContext, +} from '@automattic/odie-client'; + +const SupportPrompt = () => { + const { clearChat } = useOdieAssistantContext(); + return ( + +
+ + clearChat() } + onKeyPress={ () => clearChat() } + className="menu-item-class" + > + Start a New Chat + + +
+ + + ); +}; + +export default SupportPrompt; From 115b8c0c91cb5396691cdb1d2a4425a087189210 Mon Sep 17 00:00:00 2001 From: Kuba Birecki Date: Fri, 20 Sep 2024 15:09:35 +0200 Subject: [PATCH 06/13] Update yarn.lock --- yarn.lock | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index 4c45d9da3d6f3..bab36e44ac4e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1247,8 +1247,9 @@ __metadata: "@automattic/i18n-utils": "workspace:^" "@automattic/odie-client": "workspace:^" "@automattic/wp-babel-makepot": "workspace:^" - "@wordpress/components": "npm:^28.2.0" + "@wordpress/components": "npm:^28.7.0" "@wordpress/dependency-extraction-webpack-plugin": "npm:5.9.0" + "@wordpress/element": "npm:^6.7.0" "@wordpress/readable-js-assets-webpack-plugin": "npm:3.0.0" autoprefixer: "npm:^10.4.20" copy-webpack-plugin: "npm:^10.2.4" @@ -34442,7 +34443,7 @@ __metadata: languageName: node linkType: hard -"webpack@npm:5, webpack@npm:^5.63.0, webpack@npm:^5.94.0": +"webpack@npm:5, webpack@npm:^5.63.0, webpack@npm:^5.91.0, webpack@npm:^5.94.0": version: 5.94.0 resolution: "webpack@npm:5.94.0" dependencies: From 2e5e5eff86f562fc80f37c4129c65dd90ffc0ad2 Mon Sep 17 00:00:00 2001 From: Kuba Birecki Date: Mon, 23 Sep 2024 17:00:56 +0200 Subject: [PATCH 07/13] Add jetpack.com to supported sites in wpcom-proxy-request --- packages/wpcom-proxy-request/src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/wpcom-proxy-request/src/index.js b/packages/wpcom-proxy-request/src/index.js index 896d6ec4a8283..48358ab8add4e 100644 --- a/packages/wpcom-proxy-request/src/index.js +++ b/packages/wpcom-proxy-request/src/index.js @@ -505,6 +505,7 @@ function reject( xhr, err, headers ) { // taken from wpcom-proxy-request (rest-proxy/provider-v2.0.js) const wpcomAllowedOrigins = [ 'https://wordpress.com', + 'https://jetpack.com', // Odie bot on contact-support page. 'https://cloud.jetpack.com', 'https://agencies.automattic.com', 'http://wpcalypso.wordpress.com', // for running docker on dev instances From 2ad11ae15bc90fa5a0838d4d74fff9b5a644f1e1 Mon Sep 17 00:00:00 2001 From: Kuba Birecki Date: Mon, 23 Sep 2024 17:04:33 +0200 Subject: [PATCH 08/13] Update DependencyExtractionPlugin configuration in webpack.config.js --- apps/jetpackme-support/webpack.config.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/apps/jetpackme-support/webpack.config.js b/apps/jetpackme-support/webpack.config.js index 2a4aa56c8630b..da6c0b33180a4 100644 --- a/apps/jetpackme-support/webpack.config.js +++ b/apps/jetpackme-support/webpack.config.js @@ -1,10 +1,10 @@ const path = require( 'path' ); const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config.js' ); +const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' ); const ReadableJsAssetsWebpackPlugin = require( '@wordpress/readable-js-assets-webpack-plugin' ); +const webpack = require( 'webpack' ); const GenerateChunksMapPlugin = require( '../../build-tools/webpack/generate-chunks-map-plugin' ); -const isDevelopment = process.env.NODE_ENV !== 'production'; - /* Arguments to this function replicate webpack's so this config can be used on the command line, * with individual options overridden by command line args. * @see {@link https://webpack.js.org/configuration/configuration-types/#exporting-a-function} @@ -16,7 +16,7 @@ const isDevelopment = process.env.NODE_ENV !== 'production'; * @returns {Object} webpack config */ function getWebpackConfig( env = { source: '' }, argv = {} ) { - const webpackConfig = getBaseWebpackConfig( { ...env, WP: ! isDevelopment }, argv ); + const webpackConfig = getBaseWebpackConfig( { ...env, WP: true }, argv ); return { ...webpackConfig, @@ -33,7 +33,16 @@ function getWebpackConfig( env = { source: '' }, argv = {} ) { concatenateModules: false, }, plugins: [ - ...webpackConfig.plugins, + ...webpackConfig.plugins.filter( + ( plugin ) => plugin.constructor.name !== 'DependencyExtractionWebpackPlugin' + ), + new webpack.DefinePlugin( { + __i18n_text_domain__: JSON.stringify( 'default' ), + } ), + new DependencyExtractionWebpackPlugin( { + injectPolyfill: true, + outputFormat: 'json', + } ), new GenerateChunksMapPlugin( { output: path.resolve( './dist/chunks-map.json' ), } ), From 276c51353bfb87064a7ae5d570539e5fdc6f0052 Mon Sep 17 00:00:00 2001 From: Kuba Birecki Date: Mon, 23 Sep 2024 17:04:56 +0200 Subject: [PATCH 09/13] Fix package.json slugs --- apps/jetpackme-support/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/jetpackme-support/package.json b/apps/jetpackme-support/package.json index 3e42358d32278..b6edeb8edda98 100644 --- a/apps/jetpackme-support/package.json +++ b/apps/jetpackme-support/package.json @@ -13,7 +13,7 @@ "repository": { "type": "git", "url": "git+https://github.com/Automattic/wp-calypso.git", - "directory": "apps/help-center" + "directory": "apps/jetpackme-support" }, "publishConfig": { "access": "public" @@ -25,10 +25,10 @@ "teamcity:build-app": "yarn run build", "build": "NODE_ENV=production yarn dev", "build:app": "calypso-build", - "dev": "yarn run calypso-apps-builder --localPath dist --remotePath /home/wpcom/public_html/widgets.wp.com/help-center", + "dev": "yarn run calypso-apps-builder --localPath dist --remotePath /home/wpcom/public_html/widgets.wp.com/jetpackme-support", "prepack": "yarn run clean && yarn run build", "watch": "tsc --build ./tsconfig.json --watch", - "translate": "rm -rf dist/strings && wp-babel-makepot './dist/*.{js,jsx,ts,tsx}' --ignore '**/node_modules/**,**/test/**,**/*.d.ts' --base './dist' --dir './dist/strings' --output './dist/help-center.pot' && build-app-languages --stringsFilePath='./dist/help-center.pot' --outputPath='./dist/languages' --outputFormat='JS'" + "translate": "rm -rf dist/strings && wp-babel-makepot './dist/*.{js,jsx,ts,tsx}' --ignore '**/node_modules/**,**/test/**,**/*.d.ts' --base './dist' --dir './dist/strings' --output './dist/jetpackme-support.pot' && build-app-languages --stringsFilePath='./dist/jetpackme-support.pot' --outputPath='./dist/languages' --outputFormat='JS'" }, "dependencies": { "@automattic/components": "workspace:^", From 484ebde8cc74ab7d60405275aeebbf3b33247554 Mon Sep 17 00:00:00 2001 From: Kuba Birecki Date: Mon, 23 Sep 2024 17:07:22 +0200 Subject: [PATCH 10/13] Wrap the widget in QueryClientProvider --- apps/jetpackme-support/package.json | 1 + apps/jetpackme-support/src/index.js | 13 ++++++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/apps/jetpackme-support/package.json b/apps/jetpackme-support/package.json index b6edeb8edda98..41ccb2df3c7b3 100644 --- a/apps/jetpackme-support/package.json +++ b/apps/jetpackme-support/package.json @@ -34,6 +34,7 @@ "@automattic/components": "workspace:^", "@automattic/i18n-utils": "workspace:^", "@automattic/odie-client": "workspace:^", + "@tanstack/react-query": "^5.15.5", "@wordpress/components": "^28.7.0", "@wordpress/element": "^6.7.0", "react": "^18.2.0", diff --git a/apps/jetpackme-support/src/index.js b/apps/jetpackme-support/src/index.js index 8768aa55984ca..80e0325f46943 100644 --- a/apps/jetpackme-support/src/index.js +++ b/apps/jetpackme-support/src/index.js @@ -1,3 +1,7 @@ +/** + * External dependencies + */ +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; /** * WordPress dependencies */ @@ -8,5 +12,12 @@ import { render } from '@wordpress/element'; import SupportPrompt from './support-prompt'; window.renderSupportPrompt = ( elementId ) => { - render( , document.getElementById( elementId ) ); + const queryClient = new QueryClient(); + + render( + + + , + document.getElementById( elementId ) + ); }; From 7db0bb38fb1afcbb69643950336efcfe1d25c013 Mon Sep 17 00:00:00 2001 From: Kuba Birecki Date: Mon, 23 Sep 2024 17:07:44 +0200 Subject: [PATCH 11/13] Update README.md --- apps/jetpackme-support/README.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/apps/jetpackme-support/README.md b/apps/jetpackme-support/README.md index e071150a594ae..281c66f9c5a3e 100644 --- a/apps/jetpackme-support/README.md +++ b/apps/jetpackme-support/README.md @@ -1 +1,18 @@ -### The Odie bot interface for Jetpack.com +# Odie Support Widget for Jetpack.com + +This is the support chat interface available over at https://jetpack.com/contact-support. + +## Building + +### Production + +```bash +cd apps/jetpackme-support +yarn build +``` + +### Development + +``` +yarn dev +``` From 2ae1e6606a72a2fc010f12855f33a19e449da0f0 Mon Sep 17 00:00:00 2001 From: Kuba Birecki Date: Tue, 24 Sep 2024 19:52:36 +0200 Subject: [PATCH 12/13] Remove examples directory --- apps/jetpackme-support/examples/prompt.html | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 apps/jetpackme-support/examples/prompt.html diff --git a/apps/jetpackme-support/examples/prompt.html b/apps/jetpackme-support/examples/prompt.html deleted file mode 100644 index 6a5b76c51e13f..0000000000000 --- a/apps/jetpackme-support/examples/prompt.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - Support Prompt Test Page - - - - - From 66fc61f90b039fe8a6bc25df3b032e5769a78498 Mon Sep 17 00:00:00 2001 From: Kuba Birecki Date: Mon, 30 Sep 2024 18:02:04 +0200 Subject: [PATCH 13/13] Update yarn.lock --- yarn.lock | 34 +++++----------------------------- 1 file changed, 5 insertions(+), 29 deletions(-) diff --git a/yarn.lock b/yarn.lock index a7a55791617e7..3a8d1a73df33e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1247,6 +1247,7 @@ __metadata: "@automattic/i18n-utils": "workspace:^" "@automattic/odie-client": "workspace:^" "@automattic/wp-babel-makepot": "workspace:^" + "@tanstack/react-query": "npm:^5.15.5" "@wordpress/components": "npm:^28.7.0" "@wordpress/dependency-extraction-webpack-plugin": "npm:5.9.0" "@wordpress/element": "npm:^6.7.0" @@ -11966,25 +11967,7 @@ __metadata: languageName: node linkType: hard -"autoprefixer@npm:^10.2.5": - version: 10.2.5 - resolution: "autoprefixer@npm:10.2.5" - dependencies: - browserslist: "npm:^4.16.3" - caniuse-lite: "npm:^1.0.30001196" - colorette: "npm:^1.2.2" - fraction.js: "npm:^4.0.13" - normalize-range: "npm:^0.1.2" - postcss-value-parser: "npm:^4.1.0" - peerDependencies: - postcss: ^8.1.0 - bin: - autoprefixer: bin/autoprefixer - checksum: 77eea8d366a70abbb99cdda2fdd1c515891e077d2d2fa80505cc0fd38d2813db8237590c971f09b62ab5f37f479b35992edfcd09d4399ba8a0285853cbabc345 - languageName: node - linkType: hard - -"autoprefixer@npm:^10.4.20": +"autoprefixer@npm:^10.2.5, autoprefixer@npm:^10.4.20": version: 10.4.20 resolution: "autoprefixer@npm:10.4.20" dependencies: @@ -12634,7 +12617,7 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.0.0, browserslist@npm:^4.12.0, browserslist@npm:^4.16.0, browserslist@npm:^4.16.3, browserslist@npm:^4.16.6, browserslist@npm:^4.21.10, browserslist@npm:^4.23.0, browserslist@npm:^4.23.1, browserslist@npm:^4.23.3, browserslist@npm:^4.8.2": +"browserslist@npm:^4.0.0, browserslist@npm:^4.12.0, browserslist@npm:^4.16.0, browserslist@npm:^4.16.6, browserslist@npm:^4.21.10, browserslist@npm:^4.23.0, browserslist@npm:^4.23.1, browserslist@npm:^4.23.3, browserslist@npm:^4.8.2": version: 4.23.3 resolution: "browserslist@npm:4.23.3" dependencies: @@ -13347,7 +13330,7 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001196, caniuse-lite@npm:^1.0.30001646": +"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001646": version: 1.0.30001651 resolution: "caniuse-lite@npm:1.0.30001651" checksum: 7821278952a6dbd17358e5d08083d258f092e2a530f5bc1840657cb140fbbc5ec44293bc888258c44a18a9570cde149ed05819ac8320b9710cf22f699891e6ad @@ -14056,7 +14039,7 @@ __metadata: languageName: node linkType: hard -"colorette@npm:^1.2.1, colorette@npm:^1.2.2": +"colorette@npm:^1.2.1": version: 1.4.0 resolution: "colorette@npm:1.4.0" checksum: 4955c8f7daafca8ae7081d672e4bd89d553bd5782b5846d5a7e05effe93c2f15f7e9c0cb46f341b59f579a39fcf436241ff79594899d75d5f3460c03d607fe9e @@ -18789,13 +18772,6 @@ __metadata: languageName: node linkType: hard -"fraction.js@npm:^4.0.13": - version: 4.1.0 - resolution: "fraction.js@npm:4.1.0" - checksum: db0e43d60dbe9211673dd88a0ba7984a1b3b34dcefa2619e12c73e9d58106fc172f13b6e6f10af5c17f2ef6439a02fe848218ec9498d4ced7cccb7ecce42e776 - languageName: node - linkType: hard - "fraction.js@npm:^4.3.7": version: 4.3.7 resolution: "fraction.js@npm:4.3.7"