@commercetools-frontend/mc-scripts 21.0.1 → 21.3.0

package/build/bin/cli.js

@@ -19,6 +19,8 @@ const dotenvExpand = require('dotenv-expand');
 
 const spawn = require('react-dev-utils/crossSpawn');
 
+const pkg = require('../../package.json');
+
 const flags = mri(process.argv.slice(2), {
   alias: {
     help: ['h']
@@ -50,11 +52,18 @@ Commands:
 
   serve                       Serves previously built and compiled application from the "public" folder.
 
+  login                       Log in to your Merchant Center account through the CLI, using the cloud environment information from the Custom Application config file. An API token is generated and stored in a configuration file for the related cloud environment, and valid for 36 hours.
+
+  config:sync                 Synchronizes the local Custom Application config with the Merchant Center. A new Custom Application will be created if none existed, otherwise it will be updated.
+    --dry-run                 (optional) Executes the command but does not send any mutation request.
   `);
   process.exit(0);
 }
 
-const command = commands[0]; // Get the current directory where the CLI is executed from. Usually this is the application folder.
+const command = commands[0];
+console.log('');
+console.log(`mc-scripts: v${pkg.version}`);
+console.log(''); // Get the current directory where the CLI is executed from. Usually this is the application folder.
 
 const applicationDirectory = fs.realpathSync(process.cwd());
 
@@ -91,7 +100,7 @@ const applicationDirectory = fs.realpathSync(process.cwd());
           // Do this as the first thing so that any code reading it knows the right env.
           process.env.NODE_ENV = 'production'; // Get specific flag for this command.
 
-          const commandArgs = getArgsForCommand(['transformer']);
+          const commandArgs = getArgsForCommand(['transformer', 'print-security-headers']);
           proxyCommand(command, {
             commandArgs
           });
@@ -107,6 +116,26 @@ const applicationDirectory = fs.realpathSync(process.cwd());
           break;
         }
 
+      case 'login':
+        {
+          // Do this as the first thing so that any code reading it knows the right env.
+          process.env.NODE_ENV = 'production';
+          proxyCommand(command);
+          break;
+        }
+
+      case 'config:sync':
+        {
+          // Do this as the first thing so that any code reading it knows the right env.
+          process.env.NODE_ENV = 'production'; // Get specific flag for this command.
+
+          const commandArgs = getArgsForCommand(['dry-run']);
+          proxyCommand(command, {
+            commandArgs
+          });
+          break;
+        }
+
       default:
         console.log(`Unknown script "${command}".`);
         console.log('Perhaps you need to update mc-scripts?');
@@ -199,7 +228,7 @@ function loadDotEnvFiles(flags) {
     const dotenvFilePath = path.resolve(path.join(applicationDirectory, dotenvFile));
 
     if (fs.existsSync(dotenvFilePath)) {
-      dotenvExpand(dotenv.config({
+      dotenvExpand.expand(dotenv.config({
         path: dotenvFilePath
       }));
     }

package/build/commands/config:sync.js

@@ -0,0 +1,171 @@
+"use strict";
+
+const omit = require('lodash/omit');
+
+const prompts = require('prompts');
+
+const mri = require('mri');
+
+const chalk = require('chalk');
+
+const {
+  processConfig
+} = require('@commercetools-frontend/application-config');
+
+const CredentialsStorage = require('../utils/credentials-storage');
+
+const {
+  fetchCustomApplication,
+  updateCustomApplication,
+  createCustomApplication,
+  fetchUserOrganizations
+} = require('../utils/graphql-requests');
+
+const updateApplicationIdInCustomApplicationConfig = require('../utils/update-application-id-in-custom-application-config');
+
+const flags = mri(process.argv.slice(2), {
+  boolean: ['dry-run']
+});
+const credentialsStorage = new CredentialsStorage();
+
+const getMcUrlLink = (mcApiUrl, organizationId, applicationId) => {
+  const mcUrl = mcApiUrl.replace('mc-api', 'mc');
+  const customAppLink = `${mcUrl}/account/organizations/${organizationId}/custom-applications/owned/${applicationId}`;
+  return customAppLink;
+};
+
+const configSync = async () => {
+  const applicationConfig = processConfig();
+  const {
+    data: localCustomAppData
+  } = applicationConfig;
+  const {
+    mcApiUrl
+  } = applicationConfig.env;
+
+  if (!credentialsStorage.isSessionValid(mcApiUrl)) {
+    throw new Error(`You don't have a valid session for the ${mcApiUrl} environment. Please, run the "mc-scripts login" command to authenticate yourself.`);
+  }
+
+  const token = credentialsStorage.getToken(mcApiUrl);
+  const fetchedCustomApplication = await fetchCustomApplication({
+    mcApiUrl,
+    token,
+    entryPointUriPath: localCustomAppData.entryPointUriPath
+  });
+
+  if (!fetchedCustomApplication) {
+    const userOrganizations = await fetchUserOrganizations({
+      mcApiUrl,
+      token
+    });
+    let organizationId, organizationName;
+
+    if (userOrganizations.total === 0) {
+      throw new Error(`It seems you are not an admin of any Organization. Please make sure to be part of the Administrators team of the Organization you want the Custom Application to be configured to.`);
+    }
+
+    if (userOrganizations.total === 1) {
+      const [organization] = userOrganizations.results;
+      organizationId = organization.id;
+      organizationName = organization.name;
+    } else {
+      const organizationChoices = userOrganizations.results.map(organization => ({
+        title: organization.name,
+        value: organization.id
+      }));
+      const {
+        organizationId: selectedOrganizationId
+      } = await prompts({
+        type: 'select',
+        name: 'organizationId',
+        message: 'Select Organization',
+        choices: organizationChoices,
+        initial: 0
+      });
+
+      if (!selectedOrganizationId) {
+        throw new Error(`No Organization selected, aborting.`);
+      }
+
+      organizationId = selectedOrganizationId;
+      organizationName = organizationChoices.find(({
+        value
+      }) => value === organizationId).title;
+    }
+
+    const {
+      confirmation
+    } = await prompts({
+      type: 'text',
+      name: 'confirmation',
+      message: `You are about to create a new Custom Application in the "${organizationName}" organization for the ${mcApiUrl} environment. Are you sure you want to proceed?`,
+      initial: 'yes'
+    });
+
+    if (!confirmation || confirmation.toLowerCase().charAt(0) !== 'y') {
+      console.log(chalk.red('Aborted.'));
+      return;
+    }
+
+    const data = omit(localCustomAppData, ['id']);
+
+    if (flags['dry-run']) {
+      console.log(chalk.gray('DRY RUN mode'));
+      console.log(`A new Custom Application would be created for the Organization ${organizationName} with the following payload:`);
+      console.log(JSON.stringify(data));
+      return;
+    }
+
+    const createdCustomApplication = await createCustomApplication({
+      mcApiUrl,
+      token,
+      organizationId,
+      data
+    }); // update applicationID in the custom-application-config file
+
+    updateApplicationIdInCustomApplicationConfig(createdCustomApplication.id);
+    const customAppLink = getMcUrlLink(mcApiUrl, organizationId, createdCustomApplication.id);
+    console.log(chalk.green(`Custom Application created.\nThe "applicationId" in your local Custom Application config file has been updated with the application ID.\nYou can see the Custom Application data in the Merchant Center at ${customAppLink}.`));
+    return;
+  } // TODO: show diff (followup task)
+
+
+  const {
+    confirmation
+  } = await prompts({
+    type: 'text',
+    name: 'confirmation',
+    message: `You are about to update the Custom Application "${localCustomAppData.entryPointUriPath}" in the ${mcApiUrl} environment. Are you sure you want to proceed?`,
+    initial: 'yes'
+  });
+
+  if (!confirmation || confirmation.toLowerCase().charAt(0) !== 'y') {
+    console.log(chalk.red('Aborted.'));
+    return;
+  }
+
+  const data = omit(localCustomAppData, ['id']);
+
+  if (flags['dry-run']) {
+    console.log(chalk.gray('DRY RUN mode'));
+    console.log(`The Custom Application ${data.name} would be updated with the following payload:`);
+    console.log(JSON.stringify(data));
+    return;
+  }
+
+  await updateCustomApplication({
+    mcApiUrl,
+    token,
+    organizationId: fetchedCustomApplication.organizationId,
+    data: omit(localCustomAppData, ['id']),
+    applicationId: fetchedCustomApplication.application.id
+  });
+  const customAppLink = getMcUrlLink(mcApiUrl, fetchedCustomApplication.organizationId, fetchedCustomApplication.application.id);
+  console.log(chalk.green(`Custom Application updated.\nYou can see the Custom Application data in the Merchant Center at ${customAppLink}.`));
+};
+
+configSync().catch(error => {
+  console.log(chalk.red(error));
+  process.exit(1);
+});

package/build/commands/login.js

@@ -0,0 +1,60 @@
+"use strict";
+
+const prompts = require('prompts');
+
+const chalk = require('chalk');
+
+const {
+  processConfig
+} = require('@commercetools-frontend/application-config');
+
+const CredentialsStorage = require('../utils/credentials-storage');
+
+const {
+  getAuthToken
+} = require('../utils/auth');
+
+const credentialsStorage = new CredentialsStorage();
+
+const login = async () => {
+  const applicationConfig = processConfig();
+  const {
+    mcApiUrl
+  } = applicationConfig.env;
+
+  if (credentialsStorage.isSessionValid(mcApiUrl)) {
+    console.log(`You already have a valid session for the ${mcApiUrl} environment.\n`);
+    return;
+  }
+
+  const {
+    email
+  } = await prompts({
+    type: 'text',
+    name: 'email',
+    message: 'Email'
+  });
+  const {
+    password
+  } = await prompts({
+    type: 'invisible',
+    name: 'password',
+    message: 'Password (hidden)'
+  });
+
+  if (!email || !password) {
+    throw new Error(`Missing email or password values. Aborting.`);
+  }
+
+  const credentials = await getAuthToken(mcApiUrl, {
+    email,
+    password
+  });
+  credentialsStorage.setToken(mcApiUrl, credentials);
+  console.log(chalk.green(`Login successful for the ${mcApiUrl} environment.\n`));
+};
+
+login().catch(error => {
+  console.log(chalk.red(error));
+  process.exit(1);
+});

package/build/utils/auth.js

@@ -0,0 +1,34 @@
+"use strict";
+
+const fetch = require('node-fetch');
+
+const userAgent = require('./user-agent');
+
+const getAuthToken = async (mcApiUrl, payload) => {
+  const response = await fetch(`${mcApiUrl}/tokens/cli`, {
+    method: 'POST',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      'x-user-agent': userAgent
+    },
+    body: JSON.stringify(payload)
+  });
+
+  if (!response.ok) {
+    const text = await response.text();
+    let parsed;
+
+    try {
+      parsed = JSON.parse(text);
+    } catch (error) {}
+
+    const errorMessage = parsed ? parsed.message : text;
+    throw new Error(errorMessage);
+  }
+
+  const authToken = await response.json();
+  return authToken;
+};
+
+exports.getAuthToken = getAuthToken;

package/build/utils/auth.spec.js

@@ -0,0 +1,61 @@
+"use strict";
+
+const {
+  rest
+} = require('msw');
+
+const {
+  setupServer
+} = require('msw/node');
+
+const {
+  getAuthToken
+} = require('./auth');
+
+const mockServer = setupServer();
+afterEach(() => {
+  mockServer.resetHandlers();
+});
+beforeAll(() => mockServer.listen({
+  onUnhandledRequest: 'error'
+}));
+afterAll(() => mockServer.close());
+const mcApiUrl = 'https://mc-api.europe-west1.gcp.commercetools.com';
+describe('when login details are correct', () => {
+  beforeEach(() => {
+    mockServer.use(rest.post(`${mcApiUrl}/tokens/cli`, (req, res, ctx) => {
+      return res(ctx.status(200), ctx.json({
+        token: 'hello-world',
+        expiresAt: Math.floor(Date.now() / 1000) + 60 * 60 * 36 // 1,5 days
+
+      }));
+    }));
+  });
+  it('should match returned credentials', async () => {
+    const sessionData = await getAuthToken(mcApiUrl, {
+      email: 'user@email.com',
+      password: 'secret'
+    });
+    expect(sessionData).toEqual({
+      token: 'hello-world',
+      expiresAt: expect.any(Number)
+    });
+    expect(sessionData.expiresAt).toBeGreaterThan(Math.floor(Date.now() / 1000));
+    expect(sessionData.expiresAt).toBeLessThanOrEqual(Math.floor(Date.now() / 1000) + 60 * 60 * 36);
+  });
+});
+describe('when login details are incorrect', () => {
+  beforeEach(() => {
+    mockServer.use(rest.post(`${mcApiUrl}/tokens/cli`, (req, res, ctx) => {
+      return res(ctx.status(400), ctx.json({
+        message: 'Invalid email or password'
+      }));
+    }));
+  });
+  it('should throw error', async () => {
+    await expect(async () => await getAuthToken(mcApiUrl, {
+      email: 'user@email.com',
+      password: 'secret'
+    })).rejects.toThrow('Invalid email or password');
+  });
+});

package/build/utils/create-custom-application.settings.graphql

@@ -0,0 +1,8 @@
+mutation CreateCustomApplicationFromCli(
+  $organizationId: String!
+  $data: CustomApplicationDraftDataInput!
+) {
+  createCustomApplication(organizationId: $organizationId, data: $data) {
+    id
+  }
+}

package/build/utils/credentials-storage.js

@@ -0,0 +1,72 @@
+"use strict";
+
+const fs = require('fs');
+
+const path = require('path');
+
+const homedir = require('os').homedir();
+
+const credentialsFolderPath = path.join(homedir, `.commercetools`);
+const credentialsFilePath = path.join(credentialsFolderPath, 'mc-credentials.json');
+
+class CredentialsStorage {
+  static location = credentialsFilePath;
+
+  constructor() {
+    // Ensure the credentials file is present
+    if (!fs.existsSync(credentialsFilePath)) {
+      fs.mkdirSync(credentialsFolderPath, {
+        recursive: true
+      }); // Initialize with an empty object
+
+      this._writeCredentials({});
+    }
+  }
+
+  _writeCredentials(credentials) {
+    fs.writeFileSync(credentialsFilePath, JSON.stringify(credentials, null, 2), {
+      encoding: 'utf8'
+    });
+  }
+
+  _loadCredentials() {
+    const data = fs.readFileSync(credentialsFilePath, {
+      encoding: 'utf8'
+    });
+    return JSON.parse(data);
+  }
+
+  getToken(environmentKey) {
+    const allCredentials = this._loadCredentials();
+
+    if (!this.isSessionValid(environmentKey)) {
+      return null;
+    }
+
+    return allCredentials[environmentKey].token;
+  }
+
+  setToken(environmentKey, credentials) {
+    const allCredentials = this._loadCredentials();
+
+    allCredentials[environmentKey] = credentials;
+
+    this._writeCredentials(allCredentials);
+  }
+
+  isSessionValid(environmentKey) {
+    const allCredentials = this._loadCredentials();
+
+    const credentials = allCredentials[environmentKey];
+
+    if (!credentials) {
+      return false;
+    }
+
+    const now = Math.floor(Date.now() / 1000);
+    return now < credentials.expiresAt;
+  }
+
+}
+
+module.exports = CredentialsStorage;

package/build/utils/credentials-storage.spec.js

@@ -0,0 +1,69 @@
+"use strict";
+
+const mock = require('mock-fs');
+
+const CredentialsStorage = require('./credentials-storage');
+
+afterEach(() => {
+  mock.restore();
+});
+const mcApiUrl = 'https://mc-api.europe-west1.gcp.commercetools.com';
+describe('when session is valid', () => {
+  let credentialsStorage;
+  beforeEach(() => {
+    mock({
+      [CredentialsStorage.location]: JSON.stringify({
+        [mcApiUrl]: {
+          token: 'hello-world',
+          expiresAt: Math.floor(Date.now() / 1000) + 60 * 60 * 36
+        }
+      })
+    });
+    credentialsStorage = new CredentialsStorage();
+  });
+  it('should load credentials and update token', () => {
+    expect(credentialsStorage.getToken(mcApiUrl)).toBe('hello-world');
+    expect(credentialsStorage.isSessionValid(mcApiUrl)).toBe(true);
+    const newSessionData = {
+      token: 'fizz-buzz',
+      expiresAt: Math.floor(Date.now() / 1000) + 60 * 60 * 36
+    };
+    credentialsStorage.setToken(mcApiUrl, newSessionData);
+    expect(credentialsStorage.getToken(mcApiUrl)).toBe('fizz-buzz');
+  });
+});
+describe('when session is expired', () => {
+  let credentialsStorage;
+  beforeEach(() => {
+    mock({
+      [CredentialsStorage.location]: JSON.stringify({
+        [mcApiUrl]: {
+          token: 'hello-world',
+          expiresAt: Math.floor(Date.now() / 1000) - 1
+        }
+      })
+    });
+    credentialsStorage = new CredentialsStorage();
+  });
+  it('should not load credentials', () => {
+    expect(credentialsStorage.isSessionValid(mcApiUrl)).toBe(false);
+    expect(credentialsStorage.getToken(mcApiUrl)).toBe(null);
+  });
+});
+describe('when credentials file is missing', () => {
+  let credentialsStorage;
+  beforeEach(() => {
+    mock({});
+    credentialsStorage = new CredentialsStorage();
+  });
+  it('should not load credentials and update token', () => {
+    expect(credentialsStorage.getToken(mcApiUrl)).toBe(null);
+    expect(credentialsStorage.isSessionValid(mcApiUrl)).toBe(false);
+    const newSessionData = {
+      token: 'fizz-buzz',
+      expiresAt: Math.floor(Date.now() / 1000) + 60 * 60 * 36
+    };
+    credentialsStorage.setToken(mcApiUrl, newSessionData);
+    expect(credentialsStorage.getToken(mcApiUrl)).toBe('fizz-buzz');
+  });
+});

package/build/utils/fetch-custom-application.settings.graphql

@@ -0,0 +1,35 @@
+query FetchCustomApplicationFromCli($entryPointUriPath: String!) {
+  organizationExtensionForCustomApplication(
+    entryPointUriPath: $entryPointUriPath
+  ) {
+    organizationId
+    application {
+      id
+      entryPointUriPath
+      name
+      description
+      url
+      icon
+      permissions {
+        name
+        oAuthScopes
+      }
+      mainMenuLink {
+        defaultLabel
+        labelAllLocales {
+          locale
+          value
+        }
+      }
+      submenuLinks {
+        uriPath
+        defaultLabel
+        permissions
+        labelAllLocales {
+          locale
+          value
+        }
+      }
+    }
+  }
+}

package/build/utils/fetch-user-organizations.core.graphql

@@ -0,0 +1,9 @@
+query FetchMyOrganizationsFromCli {
+  myOrganizations {
+    total
+    results {
+      id
+      name
+    }
+  }
+}

package/build/utils/graphql-requests.js

@@ -0,0 +1,105 @@
+"use strict";
+
+const {
+  GraphQLClient
+} = require('graphql-request');
+
+const {
+  GRAPHQL_TARGETS
+} = require('@commercetools-frontend/constants');
+
+const userAgent = require('./user-agent');
+
+const requireGraphqlHelper = require('./require-graphql');
+
+const requireGraphql = requireGraphqlHelper(__dirname);
+const FetchCustomApplicationFromCli = requireGraphql('./fetch-custom-application.settings.graphql');
+const UpdateCustomApplicationFromCli = requireGraphql('./update-custom-application.settings.graphql');
+const CreateCustomApplicationFromCli = requireGraphql('./create-custom-application.settings.graphql');
+const FetchMyOrganizationsFromCli = requireGraphql('./fetch-user-organizations.core.graphql');
+
+const graphQLClient = (uri, token, target = GRAPHQL_TARGETS.SETTINGS_SERVICE) => new GraphQLClient(`${uri}/graphql`, {
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+    'x-graphql-target': target,
+    'x-mc-cli-access-token': token,
+    'x-user-agent': userAgent
+  }
+});
+
+const fetchCustomApplication = async ({
+  mcApiUrl,
+  token,
+  entryPointUriPath
+}) => {
+  const variables = {
+    entryPointUriPath
+  };
+
+  try {
+    const customAppData = await graphQLClient(mcApiUrl, token).request(FetchCustomApplicationFromCli, variables);
+    return customAppData.organizationExtensionForCustomApplication;
+  } catch (error) {
+    throw new Error(error.response.message);
+  }
+};
+
+const updateCustomApplication = async ({
+  mcApiUrl,
+  token,
+  applicationId,
+  organizationId,
+  data
+}) => {
+  const variables = {
+    organizationId,
+    applicationId,
+    data
+  };
+
+  try {
+    const updatedCustomAppsData = await graphQLClient(mcApiUrl, token).request(UpdateCustomApplicationFromCli, variables);
+    return updatedCustomAppsData.updateCustomApplication;
+  } catch (error) {
+    throw new Error(error.response.message);
+  }
+};
+
+const createCustomApplication = async ({
+  mcApiUrl,
+  token,
+  organizationId,
+  data
+}) => {
+  const variables = {
+    organizationId,
+    data
+  };
+
+  try {
+    const createdCustomAppData = await graphQLClient(mcApiUrl, token).request(CreateCustomApplicationFromCli, variables);
+    return createdCustomAppData.createCustomApplication;
+  } catch (error) {
+    throw new Error(error.response.message);
+  }
+};
+
+const fetchUserOrganizations = async ({
+  mcApiUrl,
+  token
+}) => {
+  try {
+    const userOrganizations = await graphQLClient(mcApiUrl, token, GRAPHQL_TARGETS.ADMINISTRATION_SERVICE).request(FetchMyOrganizationsFromCli);
+    return userOrganizations.myOrganizations;
+  } catch (error) {
+    throw new Error(error.response.message);
+  }
+};
+
+module.exports = {
+  fetchCustomApplication,
+  updateCustomApplication,
+  createCustomApplication,
+  fetchUserOrganizations
+};

package/build/utils/graphql-requests.spec.js

@@ -0,0 +1,159 @@
+"use strict";
+
+const {
+  graphql
+} = require('msw');
+
+const {
+  setupServer
+} = require('msw/node');
+
+const {
+  createCustomApplication,
+  updateCustomApplication,
+  fetchCustomApplication,
+  fetchUserOrganizations
+} = require('./graphql-requests');
+
+const mockServer = setupServer();
+afterEach(() => {
+  mockServer.resetHandlers();
+});
+beforeAll(() => mockServer.listen({
+  onUnhandledRequest: 'bypass'
+}));
+afterAll(() => mockServer.close());
+const mcApiUrl = 'https://mc-api.europe-west1.gcp.commercetools.com';
+describe('fetch custom application data', () => {
+  beforeEach(() => {
+    mockServer.use(graphql.query('FetchCustomApplicationFromCli', (req, res, ctx) => {
+      return res(ctx.data({
+        organizationExtensionForCustomApplication: {
+          id: 'test-id',
+          organizationId: 'org-id',
+          application: {
+            url: 'https://test.com',
+            name: 'Test name',
+            description: 'Test description',
+            entryPointUriPath: 'test-custom-app',
+            icon: '<svg><path fill="#000000"></path></svg>',
+            submenuLinks: [],
+            mainMenuLink: [],
+            permissions: [{
+              oAuthScopes: ['view_products', 'view_customers'],
+              name: 'viewTestCustomApp'
+            }, {
+              oAuthScopes: [],
+              name: 'manageTestCustomApp'
+            }]
+          }
+        }
+      }));
+    }));
+  });
+  it('should match returned data', async () => {
+    const organizationExtensionForCustomApplication = await fetchCustomApplication({
+      entryPointUriPath: 'test-custom-app',
+      mcApiUrl,
+      token: 'test-token'
+    });
+    expect(organizationExtensionForCustomApplication.application.entryPointUriPath).toEqual('test-custom-app');
+    expect(organizationExtensionForCustomApplication.id).toEqual('test-id');
+    expect(organizationExtensionForCustomApplication.organizationId).toEqual('org-id');
+  });
+});
+describe('register custom application', () => {
+  beforeEach(() => {
+    mockServer.use(graphql.mutation('CreateCustomApplicationFromCli', (req, res, ctx) => {
+      return res(ctx.data({
+        createCustomApplication: {
+          id: 'new-test-id',
+          application: {
+            url: 'https://test.com',
+            name: 'New Test name',
+            description: 'Test description',
+            entryPointUriPath: 'new-test-custom-app',
+            icon: '<svg><path fill="#000000"></path></svg>',
+            submenuLinks: [],
+            mainMenuLink: [],
+            permissions: [{
+              oAuthScopes: ['view_products', 'view_customers'],
+              name: 'viewNewTestCustomApp'
+            }, {
+              oAuthScopes: [],
+              name: 'manageNewTestCustomApp'
+            }]
+          }
+        }
+      }));
+    }));
+  });
+  it('should match returned data', async () => {
+    const createdCustomAppsData = await createCustomApplication({
+      entryPointUriPath: 'new-test-custom-app',
+      mcApiUrl,
+      token: 'new-test-token'
+    });
+    expect(createdCustomAppsData.application.entryPointUriPath).toEqual('new-test-custom-app');
+    expect(createdCustomAppsData.id).toEqual('new-test-id');
+  });
+});
+describe('update custom application', () => {
+  beforeEach(() => {
+    mockServer.use(graphql.mutation('UpdateCustomApplicationFromCli', (req, res, ctx) => {
+      return res(ctx.data({
+        updateCustomApplication: {
+          id: 'test-id',
+          application: {
+            url: 'https://test.com',
+            name: 'Updated Test name',
+            description: 'Updated Test description',
+            entryPointUriPath: 'updated-test-custom-app',
+            icon: '<svg><path fill="#000000"></path></svg>',
+            submenuLinks: [],
+            mainMenuLink: [],
+            permissions: [{
+              oAuthScopes: ['view_products', 'view_customers'],
+              name: 'viewNewTestCustomApp'
+            }, {
+              oAuthScopes: [],
+              name: 'manageNewTestCustomApp'
+            }]
+          }
+        }
+      }));
+    }));
+  });
+  it('should match returned data', async () => {
+    const updatedCustomAppsData = await updateCustomApplication({
+      entryPointUriPath: 'updated-test-custom-app',
+      mcApiUrl,
+      token: 'test-token'
+    });
+    expect(updatedCustomAppsData.application.name).toEqual('Updated Test name');
+    expect(updatedCustomAppsData.application.description).toEqual('Updated Test description');
+  });
+});
+describe('fetch user organizations', () => {
+  beforeEach(() => {
+    mockServer.use(graphql.query('FetchMyOrganizationsFromCli', (req, res, ctx) => {
+      return res(ctx.data({
+        myOrganizations: {
+          total: 1,
+          results: [{
+            id: 'test-organization-id',
+            name: 'test-organization-name'
+          }]
+        }
+      }));
+    }));
+  });
+  it('should match returned data', async () => {
+    const data = await fetchUserOrganizations({
+      mcApiUrl,
+      token: 'test-token'
+    });
+    expect(data.results[0].id).toEqual('test-organization-id');
+    expect(data.results[0].name).toEqual('test-organization-name');
+  });
+});

package/build/utils/require-graphql.js

@@ -0,0 +1,15 @@
+"use strict";
+
+const path = require('path');
+
+const {
+  readFileSync
+} = require('fs'); // At the moment there is no proper way of loading `.graphql` files
+// in nodejs. This workaround basically uses `readFileSync` to read the file
+// content as a string.
+// https://github.com/apollographql/graphql-tools/issues/273
+
+
+const requireGraphql = folderPath => filePath => readFileSync(path.join(folderPath, filePath), 'utf-8');
+
+module.exports = requireGraphql;

package/build/utils/update-application-id-in-custom-application-config.js

@@ -0,0 +1,60 @@
+"use strict";
+
+const fs = require('fs');
+
+const rcfile = require('rcfile');
+
+const prettier = require('prettier');
+
+const babel = require('@babel/core');
+
+const {
+  getConfigPath
+} = require('@commercetools-frontend/application-config');
+
+function updateApplicationIdInCustomApplicationConfig(applicationId) {
+  const filePath = getConfigPath();
+
+  if (filePath.endsWith('.json')) {
+    const customApplicationConfig = require(filePath);
+
+    customApplicationConfig.env.production.applicationId = applicationId;
+    const prettierConfig = rcfile('prettier');
+    const formattedData = prettier.format(JSON.stringify(customApplicationConfig), { ...prettierConfig,
+      parser: 'json'
+    });
+    fs.writeFileSync(filePath, formattedData, {
+      encoding: 'utf8'
+    });
+    return;
+  }
+
+  const result = babel.transformFileSync(filePath, {
+    plugins: [function replaceCustomApplicationConfig() {
+      return {
+        visitor: {
+          Identifier(nodePath) {
+            if (nodePath.isIdentifier({
+              name: 'applicationId'
+            })) {
+              if (nodePath.findParent(parentPath => parentPath.get('key').isIdentifier({
+                name: 'env'
+              }))) {
+                nodePath.parent.value = babel.types.stringLiteral(applicationId);
+              }
+            }
+          }
+
+        }
+      };
+    }],
+    retainLines: true
+  });
+  const prettierConfig = rcfile('prettier');
+  const formattedData = prettier.format(result.code, prettierConfig);
+  fs.writeFileSync(filePath, formattedData, {
+    encoding: 'utf8'
+  });
+}
+
+module.exports = updateApplicationIdInCustomApplicationConfig;

package/build/utils/update-custom-application.settings.graphql

@@ -0,0 +1,13 @@
+mutation UpdateCustomApplicationFromCli(
+  $organizationId: String!
+  $data: CustomApplicationDraftDataInput!
+  $applicationId: ID!
+) {
+  updateCustomApplication(
+    organizationId: $organizationId
+    data: $data
+    applicationId: $applicationId
+  ) {
+    id
+  }
+}

package/build/utils/user-agent.js

@@ -0,0 +1,15 @@
+"use strict";
+
+const createHttpUserAgent = require('@commercetools/http-user-agent');
+
+const pkgJson = require('../../package.json');
+
+const userAgent = createHttpUserAgent({
+  name: 'cli-login',
+  libraryName: 'mc-scripts',
+  libraryVersion: pkgJson.version,
+  contactUrl: 'https://git.io/fjuyC',
+  // points to the appkit repo issues
+  contactEmail: 'support@commercetools.com'
+});
+module.exports = userAgent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/mc-scripts",
-  "version": "21.0.1",
+  "version": "21.3.0",
   "description": "Configuration and scripts for developing a MC application",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -22,58 +22,67 @@
     "development": ["last 2 firefox versions", "last 2 chrome versions"]
   },
   "scripts": {
-    "build": "rimraf build && babel src --out-dir build",
+    "build": "rimraf build && babel src --out-dir build && ../../scripts/copy-graphql-files.mjs src build",
     "build:bundles:watch": "yarn build -w"
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
-    "@babel/runtime-corejs3": "^7.16.8",
-    "@commercetools-frontend/application-config": "21.0.1",
+    "@babel/core": "^7.17.8",
+    "@babel/runtime": "^7.17.8",
+    "@babel/runtime-corejs3": "^7.17.8",
+    "@commercetools-frontend/application-config": "21.3.0",
     "@commercetools-frontend/assets": "21.0.0",
-    "@commercetools-frontend/babel-preset-mc-app": "21.0.0",
+    "@commercetools-frontend/babel-preset-mc-app": "21.3.0",
+    "@commercetools-frontend/constants": "21.3.0",
     "@commercetools-frontend/mc-dev-authentication": "21.0.0",
-    "@commercetools-frontend/mc-html-template": "21.0.1",
+    "@commercetools-frontend/mc-html-template": "21.3.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
-    "@svgr/webpack": "6.2.0",
-    "autoprefixer": "^10.4.2",
-    "babel-loader": "8.2.3",
-    "browserslist": "^4.19.1",
-    "core-js": "^3.20.3",
-    "css-loader": "6.5.1",
+    "@svgr/webpack": "6.2.1",
+    "autoprefixer": "^10.4.4",
+    "babel-loader": "8.2.4",
+    "browserslist": "^4.20.2",
+    "chalk": "4.1.2",
+    "core-js": "^3.21.1",
+    "css-loader": "6.7.1",
     "css-minimizer-webpack-plugin": "3.4.1",
-    "dotenv": "10.0.0",
-    "dotenv-expand": "5.1.0",
-    "fs-extra": "10.0.0",
+    "dotenv": "16.0.0",
+    "dotenv-expand": "8.0.3",
+    "fs-extra": "10.0.1",
+    "graphql-request": "^4.1.0",
     "graphql-tag": "^2.12.6",
     "html-webpack-plugin": "5.5.0",
     "json-loader": "0.5.7",
-    "mini-css-extract-plugin": "2.5.3",
+    "mini-css-extract-plugin": "2.6.0",
     "moment-locales-webpack-plugin": "1.2.0",
     "mri": "1.2.0",
-    "postcss": "8.4.6",
+    "postcss": "8.4.12",
     "postcss-custom-media": "8.0.0",
     "postcss-custom-properties": "12.1.4",
-    "postcss-import": "14.0.2",
+    "postcss-import": "14.1.0",
     "postcss-loader": "6.2.1",
     "postcss-reporter": "7.0.5",
+    "prettier": "2.6.1",
+    "prompts": "^2.4.2",
     "querystring-es3": "^0.2.1",
+    "rcfile": "1.0.3",
     "react-dev-utils": "12.0.0",
-    "react-refresh": "0.11.0",
+    "react-refresh": "0.12.0",
     "serve-handler": "6.1.3",
     "shelljs": "0.8.5",
     "style-loader": "3.3.1",
     "svg-url-loader": "7.1.1",
-    "terser-webpack-plugin": "5.3.0",
+    "terser-webpack-plugin": "5.3.1",
     "thread-loader": "3.0.4",
     "url": "^0.11.0",
-    "webpack": "5.66.0",
+    "webpack": "5.70.0",
     "webpack-bundle-analyzer": "4.5.0",
-    "webpack-dev-server": "4.7.3",
+    "webpack-dev-server": "4.7.4",
     "webpackbar": "5.0.2"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.16.10",
+    "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
+    "mock-fs": "^5.1.2",
+    "msw": "0.39.2",
     "rimraf": "3.0.2"
   },
   "engines": {