shoplazza-cli 0.0.10 → 1.0.2

package/README.md

@@ -10,21 +10,18 @@
 
 Shoplazza CLI is a cross-platform command line tool that you can use to build Shoplazza themes.
 
-## Node Version
-
-use 14.18.2
-
 ## Features
 
 Shoplazza CLI accelerates your theme development process with the following features:
 
 - Safely preview, test, and share changes to themes using unpublish themes
 - Hot reload CSS and section changes, or automatically refresh a page on file change, when previewing a theme.
-- Initialize a new theme using LifeStyle as a starting point.
+- Initialize a new theme using Nova 2023 as a starting point.
 - Use workflow tools like Git to work with a team of theme developers.
 - Upload themes to your store.
 - Watch for local changes and upload them automatically to Shoplazza.
 - Work on Linux, macOS, and Windows.
+- Support customized Checkout page.
 
 ## Installation [shoplazza-cli](https://www.npmjs.com/package/shoplazza-themekit)
 
@@ -36,13 +33,80 @@ $ npm install shoplazza-cli -g
 
 Before you start using Shoplazza CLI to develop themes, make sure that you do the following tasks:
 
-- Install [Node.js](https://nodejs.org/en/) (14.14.0 or higher).
+- Install [Node.js](https://nodejs.org/en/) (20.18.0).
 - Install [Git](https://git-scm.com/downloads).
 - Make sure that you have a account with the Manage themes permission for the store that you want to work on, or you're the owner of the store.
 - Note the URL of the store that you want to work on.
 - Make sure that you're connected to the internet. Most Shoplazza CLI commands need an internet connection to run.
 
-## Getting started
+
+## Checkout Develop
+
+You  can use Shoplazza CLI  to develop checkout, customized checkout page as you want.
+
+### Feature
+
+- 支持本地开发和调试，支持热更新。
+- 支持预览，在推送到店铺之后，通过预览链接进入可以进行预览。
+- 支持部署extension，部署后所有用户都能看到变更。
+- 支持下线extension，下线之后extension将不在店铺中生效。
+
+### Get Started
+
+#### Step 1: 创建一个项目模板
+
+创建过程会要求你输入店铺地址和token，token可以在后台中应用->管理私有应用->创建应用 获得。创建过程还要求你输入一个extension名字，一个项目下支持存在多个extension，这是为了方便管理，它们互不影响。
+```
+shoplazza checkout create
+// 安装依赖
+npm i
+```
+
+#### Step2: 本地开发
+extension支持本地开发，支持在线上店铺Checkout页面插入本地的extension代码，这仅在你的浏览器生效。
+首先，先启动本地开发服务器：
+```
+shoplazza checkout dev
+```
+然后在checkout页面打开控制台切换为开发模式：
+```
+CheckoutAPI.extension.DEV_switchDevMode()
+```
+在checkout页面即可看到extension变更。
+
+#### Step3: 预览extension
+在完成本地开发之后，我们可以将extension推送到店铺进行预览。
+```
+shoplazza checkout push
+```
+访问预览url即可看到效果。
+#### Step4: 部署Extension
+在预览测试完成之后，可以在店铺发布extension，发布之后所有用户都可以看到。
+```
+shoplazza checkout deploy
+```
+或者对将已发布的extension下线：
+```
+shoplazza checkout undeploy
+
+```
+
+### Other command
+
+#### 查看已部署的extension
+```
+shoplazza checkout list
+
+// 查看所有
+shoplazza checkout list -a
+```
+
+#### 预览extension
+```
+shoplazza checkout preview
+```
+
+## Theme Develop
 
 ### Authenticate
 

package/bin/shoplazza

@@ -8,6 +8,8 @@ const pkg = require('../package.json');
 const report = require('../lib/report');
 require('../lib/tracing');
 
+const { makeCheckoutCommand } = require('../lib/checkout');
+
 const { generateExtension, deployExtension, publishExtension, buildExtension, retry } = require('../lib/app');
 
 Sentry.init({
@@ -29,6 +31,7 @@ updateNotifier({ pkg }).notify({
 program.usage('[command] [options]');
 
 program.command('version').description('Welcome to the Shoplazza CLI').action(require('../lib/commands/version'));
+program.description('Welcome to the Shoplazza CLI').option('-v --version').action(require('../lib/commands/version'));
 
 program
   .command('login')
@@ -122,6 +125,9 @@ app
   .option('-a, --app', 'Retry get and choose your app list.')
   .action(retry);
 
+// checkout cli
+makeCheckoutCommand(program);
+
 program.parse(process.argv);
 !program.args.length && program.help();
 

package/examples/checkout-extension/README.md

@@ -0,0 +1,19 @@
+# Chick Extension
+
+## Getting started
+
+
+## init git
+
+```
+cd `projectDir`
+git init
+```
+
+
+
+
+
+
+
+

package/examples/checkout-extension/extension.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  token: 'aadasd',
+  store: 'https://perry.stg.myshoplaza.com'
+};

package/examples/checkout-extension/extensions/add-shipping-desc/extension.json

@@ -0,0 +1,10 @@
+{
+  "version": "1.0",
+  "deleteTarget": [],
+  "placeholder": {},
+  "templateName": "checkout",
+  "themeName": "",
+  "extensionId": "",
+  "extensionName": "add-shipping-desc",
+  "extensionDescription": ""
+}

package/examples/checkout-extension/extensions/add-shipping-desc/src/index.js

@@ -0,0 +1,7 @@
+import { extend } from "@shoplazza/extension-ui";
+
+extend({
+  extensionPoint: "Checkout::ShippingLinesTitle::RenderAfter",
+  component: `<p class="mb-4">所有物流方式均受到保护。</p>`,
+});
+

package/examples/checkout-extension/extensions/ext-1/extension.json

@@ -0,0 +1,10 @@
+{
+  "version": "1.0",
+  "deleteTarget": [],
+  "placeholder": {},
+  "templateName": "checkout",
+  "themeName": "",
+  "extensionId": "",
+  "extensionName": "ext-1",
+  "extensionDescription": ""
+}

package/examples/checkout-extension/extensions/ext-1/src/content.html

@@ -0,0 +1,3 @@
+<div>
+  <h2>hello world</h2>
+</div>

package/examples/checkout-extension/extensions/ext-1/src/index.html

@@ -0,0 +1,5 @@
+<div>
+  import './style.html'
+  import './content.html'
+  import './script.html'
+</div>

package/examples/checkout-extension/extensions/ext-1/src/index.js

@@ -0,0 +1,11 @@
+import { extend } from '@shoplazza/extension-ui';
+import index from './index.html';
+
+function App() {
+  return index;
+}
+
+extend({
+  extensionPoint: 'Checkout::Navigate::RenderBefore',
+  component: App()
+});

package/examples/checkout-extension/extensions/ext-1/src/script.html

@@ -0,0 +1,3 @@
+<ljs-script layout="logic" type="application/javascript">
+ <!-- js代码 -->
+</ljs-script>

package/examples/checkout-extension/extensions/ext-1/src/style.html

@@ -0,0 +1,3 @@
+<style>
+
+</style>

package/examples/checkout-extension/extensions/rewrite-navigate/extension.json

@@ -0,0 +1,10 @@
+{
+  "version": "1.0",
+  "deleteTarget": ["navigate"],
+  "placeholder": {},
+  "templateName": "checkout",
+  "themeName": "",
+  "extensionId": "",
+  "extensionName": "rewrite-navigate",
+  "extensionDescription": ""
+}

package/examples/checkout-extension/extensions/rewrite-navigate/src/content.html

@@ -0,0 +1,38 @@
+<spz-render layout="container" manual id="navigate-render">
+  <template>
+    <div class="my-navigate-container">
+      <div
+        onclick="javascript:CheckoutAPI.step.stepNavToInformation()"
+        class="item ${data.currentStep === 'contact_information' ? 'active':''}"
+      >
+        第一页
+      </div>
+      <span>></span>
+      <div
+        onclick="javascript:CheckoutAPI.step.stepNavToShipping()"
+        class="item ${data.currentStep === 'shipping_method' ? 'active':''}"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M4.1248 14.1998C5.33983 14.1998 6.3248 13.2148 6.3248 11.9998C6.3248 10.7848 5.33983 9.7998 4.1248 9.7998C2.90978 9.7998 1.9248 10.7848 1.9248 11.9998C1.9248 13.2148 2.90978 14.1998 4.1248 14.1998ZM12.0998 14.1998C13.3148 14.1998 14.2998 13.2148 14.2998 11.9998C14.2998 10.7848 13.3148 9.7998 12.0998 9.7998C10.8848 9.7998 9.8998 10.7848 9.8998 11.9998C9.8998 13.2148 10.8848 14.1998 12.0998 14.1998Z"
+            fill="currentColor"
+          ></path>
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M0 11.2001V2.4001C0 1.95827 0.358172 1.6001 0.8 1.6001H7.00488C7.4467 1.6001 7.80488 1.95827 7.80488 2.4001V3.5751H7.8125V12.0001H7.18335C7.1861 11.9475 7.1875 11.8944 7.1875 11.8411C7.1875 10.1842 5.84435 8.84106 4.1875 8.84106C2.53065 8.84106 1.1875 10.1842 1.1875 11.8411C1.1875 11.8944 1.1889 11.9475 1.19165 12.0001H0.8C0.358172 12.0001 0 11.6419 0 11.2001ZM8.52496 12.0001H9.09168C9.08888 11.9475 9.08752 11.8944 9.08752 11.8411C9.08752 10.1842 10.4306 8.84106 12.0875 8.84106C13.7443 8.84106 15.0875 10.1842 15.0875 11.8411C15.0875 11.8944 15.0861 11.9475 15.0834 12.0001H15.2C15.6418 12.0001 16 11.6419 16 11.2001V8.11786C16 7.95962 15.953 7.80486 15.865 7.67326L13.3628 3.93047C13.2143 3.70841 12.9649 3.5751 12.6978 3.5751H8.52496V12.0001Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+        第二页
+      </div>
+      <span>></span>
+      <div
+        onclick="javascript:CheckoutAPI.step.stepNavToPayment()"
+        class="item ${data.currentStep === 'payment_method' ? 'active':''}"
+      >
+        第三页
+      </div>
+    </div>
+  </template>
+</spz-render>

package/examples/checkout-extension/extensions/rewrite-navigate/src/index.html

@@ -0,0 +1,5 @@
+<div>
+  import './style.html'
+  import './content.html'
+  import './script.html'
+</div>

package/examples/checkout-extension/extensions/rewrite-navigate/src/index.js

@@ -0,0 +1,12 @@
+import { extend } from '@shoplazza/extension-ui';
+import index from './index.html';
+
+function App() {
+  return index;
+}
+
+extend({
+  extensionPoint: 'Checkout::Navigate::RenderBefore',
+  component: App()
+});
+

package/examples/checkout-extension/extensions/rewrite-navigate/src/script.html

@@ -0,0 +1,26 @@
+
+
+<spz-script layout="logic" type="application/javascript">
+  (() => {
+    const render = () => {
+      const ele = document.getElementById('navigate-render');
+      console.log("ele:", ele);
+      if (ele) {
+        SPZ.whenApiDefined(ele).then((apis) => {
+          console.debug('apis:', apis);
+          apis.render(
+            {
+              currentStep: CheckoutAPI.step.getStep()
+            },
+            true
+          );
+        });
+      }
+    };
+
+    CheckoutAPI.step.onStepChange(() => {
+      render();
+    });
+    render();
+  })();
+</spz-script>

package/examples/checkout-extension/extensions/rewrite-navigate/src/style.html

@@ -0,0 +1,23 @@
+<style>
+  .my-navigate-container {
+    display: flex;
+    margin-top: 20px;
+  }
+  .item:first-child {
+    margin-left: 0;
+  }
+  .item {
+    display: flex;
+    align-items: center;
+    margin: 0 10px;
+    cursor: pointer;
+  }
+  .item svg {
+    margin-right: 5px;
+  }
+
+  .item.active {
+    color: red;
+  }
+
+</style>

package/examples/checkout-extension/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "checkout-extension",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {
+    "fs-extra": "11.1.1",
+    "@shoplazza/extension-ui": "2.0.8"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

package/lib/app/commands/deploy.js

@@ -129,7 +129,6 @@ const deployOss = async () => {
         spinner.succeed();
         return md5;
       }
-
       spinner.fail();
       console.log(chalk.red(e.message || e));
     }

package/lib/app/constants.js

@@ -1,7 +1,24 @@
-const constans = {
-  PARNTER_URL: 'https://partners.shoplazza.com',
-  LOGIN_BASE_URL: 'https://sso.shoplazza.com',
-  CLIENT_ID: '807525c9-dd77-4f4e-a738-d1e9d02c593d'
-};
+const mode = 'prod';
+let constans;
+
+if (mode === 'dev') {
+  constans = {
+    PARNTER_URL: 'https://partners.dev.shoplazza.com',
+    LOGIN_BASE_URL: 'https://sso.dev.shoplazza.com',
+    CLIENT_ID: 'b630b285-e098-4c51-a7a4-d0240c9fc209'
+  };
+} else if (mode === 'stg') {
+  constans = {
+    PARNTER_URL: 'https://partners.stg.shoplazza.com',
+    LOGIN_BASE_URL: 'https://sso.stg.shoplazza.com',
+    CLIENT_ID: 'b630b285-e098-4c51-a7a4-d0240c9fc209'
+  };
+} else if (mode === 'prod') {
+  constans = {
+    PARNTER_URL: 'https://partners.shoplazza.com',
+    LOGIN_BASE_URL: 'https://sso.shoplazza.com',
+    CLIENT_ID: '807525c9-dd77-4f4e-a738-d1e9d02c593d'
+  };
+}
 
 module.exports = constans;

package/lib/app/login.js

@@ -6,7 +6,6 @@ const { fork } = require('child_process');
 const path = require('path');
 
 const { set, PARTNER_KEYS, get, empty } = require('./db/partner');
-const { getClientId } = require('../utils');
 const { PARNTER_URL, LOGIN_BASE_URL, CLIENT_ID } = require('./constants');
 const { REDIRECT_URI } = require('../config');
 const log = require('../log');

package/lib/auth/index.js

@@ -24,6 +24,7 @@ exports.postAccessToken = async (code, store) => {
       }
     );
     empty();
+
     set({
       access_token: data.access_token,
       session_id: data.session_id
@@ -66,6 +67,7 @@ exports.postExchangeToken = async (storeDomain, options = {}) => {
           }
         }
       );
+
       set({
         store_domain: storeDomain.replace(/^https?:\/\//, ''),
         exchange_token: data.access_token
@@ -90,3 +92,43 @@ exports.postExchangeToken = async (storeDomain, options = {}) => {
     }
   });
 };
+
+exports.postStoreToken = async (storeDomain, options = {}) => {
+  return new Promise(async (resolve, reject) => {
+    try {
+      const { data } = await axios.post(
+        `${getAccountUrl(storeDomain)}/api/accounts/store/session`,
+        {
+          user_id: get('user_id'),
+          domain: storeDomain
+        },
+        {
+          headers: {
+            Cookie: `awesomev2=${get('session_id')}`
+          }
+        }
+      );
+
+      set({
+        store_session: data.encode_session_id
+      });
+      resolve();
+    } catch (err) {
+      reject(err);
+      Sentry.captureException(err);
+      empty();
+      if (!options.ignoreLogError) {
+        if (err?.response?.status === 401) {
+          log.error(chalk.red(`\n✗ You are not authorized to edit themes on ${storeDomain}.`));
+          log.info(
+            chalk.green(
+              'Check if your user is activated, has permission to edit themes at the store, and try to re-login.'
+            )
+          );
+        } else {
+          log.error(chalk.red(`\n✗ ${storeDomain} is not a valid store.`));
+        }
+      }
+    }
+  });
+};

package/lib/checkout/api.js

@@ -0,0 +1,169 @@
+const Axios = require('axios');
+const path = require('path');
+const fs = require('fs');
+const FormData = require('form-data');
+const loading = require('loading-cli');
+const { openAipVersion } = require('./config');
+const { isDebug } = require('./console');
+const { getProjectConfig } = require('./util');
+const chalk = require('chalk');
+
+const FILE_SIGN_URL = '/checkout_extensions/file/sign';
+const CREATE_URL = '/checkout_extensions/create';
+const COMMIT_URL = '/checkout_extensions/commit';
+const LIST_URL = '/checkout_extensions/list';
+const VERSION_LIST_URL = '/checkout_extensions/version/list';
+const DEPLOY_URL = '/checkout_extensions/deploy';
+const UNDEPLOY_URL = '/checkout_extensions/undeploy';
+const PREVIEW_URL = '/checkout_extensions/preview';
+
+let configJson = undefined;
+
+const request = new Axios.create();
+
+request.interceptors.request.use((config) => {
+  if (config.data instanceof FormData) {
+    Object.assign(config.headers, config.data.getHeaders());
+  }
+  if (!configJson) {
+    configJson = getProjectConfig();
+  }
+  config.headers['Access-Token'] = configJson.token;
+  if (!config.url.startsWith('http')) {
+    config.url = path.join(configJson.store, openAipVersion, config.url);
+  }
+
+  if (isDebug()) {
+    console.log(`\n==> ${config.method}: ${config.url}`);
+  }
+  return config;
+});
+
+const handleResponseError = (response)=>{
+  if (response.data?.status === 3 && response.data?.message === 'INVALID_ARGUMENT') {
+    throw `Invalid argument at ${response.config.url}`;
+  }else if(response.data?.status === 13 && response.data?.message === 'INTERNAL_ERROR'){
+    throw `Internal error at ${response.config.url}`;
+  }
+}
+
+request.interceptors.response.use(
+  (response) => {
+    if (isDebug()) {
+      console.log(`\n<== ${response.status}: ${response.config.url}`);
+    }
+    handleResponseError(response);
+    return response;
+  },
+  (error) => {
+    if (isDebug()) {
+      console.log(`\n<== error ${error.response.status}: ${error.response.config.url}`);
+    }
+    if (!error.response) {
+      throw chalk.red('Network error, please check your connection.');
+    }
+    if (error.response?.status == 403) {
+      return Promise.reject(new Error('Token permission failure'));
+    }
+    return Promise.reject(error);
+  }
+);
+
+async function upload(path, name) {
+  const form = new FormData();
+  await request(`${FILE_SIGN_URL}?key=${name}`)
+    .then((data) => {
+      return data.data;
+    })
+    .then((data) => {
+      const url = data.write_host;
+      form.append('policy', data.policy);
+      form.append('OSSAccessKeyId', data.access_id);
+      form.append('success_action_status', 200);
+      form.append('signature', data.sign);
+      form.append('x-oss-forbid-overwrite', 'true');
+      form.append('key', name);
+      form.append('file', fs.createReadStream(path));
+      return request.post(`https:${url}`, form, { headers: form.getHeaders() });
+    });
+  loading('succeed upload').succeed();
+}
+
+async function uploadDir(dirPath, files) {
+  await Promise.all(
+    files.map((file) => {
+      return upload(`${dirPath}/${file}`, `chick-extension/${file}`);
+    })
+  );
+}
+
+module.exports = {
+  upload,
+  uploadDir,
+  getExtensionList: async (params) => {
+    const load = loading('Fetch extension list').start();
+    try {
+      const res = await request(`${LIST_URL}`, {
+        params
+      });
+      load.succeed('Successfully fetched the extension list.');
+      return res;
+    } catch (error) {
+      load.fail('Failed to fetch the extension list.');
+      throw error;
+    }
+  },
+  getVersionList: async (params) => {
+    const load = loading('Fetch version list').start();
+    try {
+      const res = await request(`${VERSION_LIST_URL}`, {
+        params
+      });
+      load.succeed('Successfully fetched the version list.');
+      return res;
+    } catch (error) {
+      load.fail('Failed to fetch the version list.');
+      throw error;
+    }
+  },
+  pushExtension: async (data, isFirstPush = false) => {
+    data = {
+      extension: {
+        ...data
+      }
+    };
+    const res = await request({ url: isFirstPush ? CREATE_URL : COMMIT_URL, method: 'POST', data });
+    if (res.data?.status === 3 && res.data?.message === 'INVALID_VERSION') {
+      throw 'During repeated pushes, the version number must be greater than the previous version number.';
+    }
+    return res;
+  },
+  deployExtension: async (data) => {
+    data = {
+      extension: {
+        ...data
+      }
+    };
+    return request({ url: DEPLOY_URL, method: 'POST', data });
+  },
+  undeployExtension: async (data) => {
+    data = {
+      extension: {
+        ...data
+      }
+    };
+    return request({ url: UNDEPLOY_URL, method: 'POST', data });
+  },
+  previewExtension: async (data) => {
+    data = {
+      extension: {
+        ...data
+      }
+    };
+    const res = await request({ url: PREVIEW_URL, method: 'POST', data });
+    if (res.data?.status === 14 && res.data?.message === 'ITEM_UNAVAILABLE') {
+      throw 'Failed to generate a preview URL because your store currently has no available items.';
+    }
+    return res;
+  }
+};

package/lib/checkout/build/plugin/vite-plugin-add-extension-id.js

@@ -0,0 +1,25 @@
+const parseExtension = (str, name) => {
+  const data = str.split(/(?:import\s*(?:.*?)\s*from\s*(?:.*?)\s*;)/g);
+  const main = data[data.length - 1];
+  const id = JSON.stringify(name);
+  const importString = str.match(/(?:import\s*(?:.*?)\s*from\s*(?:.*?)\s*;)/g)?.join(' ') || '';
+  return `${importString}(function(){const __EXTENSION_ID__=${id};${main}})()`;
+};
+module.exports = {
+  vitePluginAddExtensionId: function () {
+    return {
+      name: 'vitePluginAddExtensionId',
+      enforce: 'pre',
+      apply: 'build',
+      transform: (code, _id) => {
+        if (/.*\/extensions\/.*\/src\/index\.js/.test(_id)) {
+          return parseExtension(code, _id.match(/extensions\/(\S*)\/src\/index\./)[1]);
+        }
+        return code;
+      },
+      buildEnd: () => {
+        console.log('end');
+      }
+    };
+  }
+};