Local development using Personalization components

Description

This guides provides instructions on how to have the personalization components running in local development in [me-ui](https://github.com/emartech/me-ui).

Steps

Clone the following personalization repositories and set them up as follows:

[personalization-components](https://github.com/emartech/personalization-components)
- ensure that the port configured in the [baseURL in vue.config.js](https://github.com/emartech/personalization-components/blob/7ccf8ef3dc08c3d08de6c175f747672cf0408105/vue.config.js#L4) is the same one used when serving the components with http-server dist and in the [index.pug of me-push-service](https://github.com/emartech/me-push-service/blob/main/server/processes/web/views/index.pug)

npm run build
http-server dist -p 8081

[personalization-editor-service](https://github.com/emartech/personalization-editor-service)
- there appears to be an issue with properly configuring the port, as 'config.port' is derived from 'process.env.PORT', which might not be set by default in the environment file. Even when added to the environment file, it seems that during the app’s startup, environment variables may not load correctly locally, rendering any addition ineffective. For a swift resolution, manually specify the port by entering it into 'app.listen(9222)' (see [index.js](https://github.com/emartech/personalization-editor-service/blob/b32f8f1541ea01d519aa118b265c0e64a7c342cf/server/processes/web/index.js#L10)).
- follow the instructions from the repository README.md.
- populate the MongoDB instance with some tokens. One easy-to-use tool is [MongoDB Compass](https://www.mongodb.com/products/tools/compass) Some examples can be seen below, but make sure to change the customer_id to the one from local SUITE.

The term "token" can refer to a use case with OID. The collections for Tokens (for storing tokens) and Use cases (for defining different use cases) should be already created. If not, please create them. If you only require a token without associating it with any specific use case, you can simply leave the 'use_cases' key as an empty array in the token document. However, if you need tokens with presets such as 'rds' or 'external_content', you will also have to create other collections.

token with contact:

{
   "_id":{
      "$oid":"5b055b3f92e1cb0004378741"
   },
   "updated_at":{
      "$date":{
         "$numberLong":"1527077695473"
      }
   },
   "created_at":{
      "$date":{
         "$numberLong":"1527077695473"
      }
   },
   "customer_id":{
      "$numberInt":"212479853"
   },
   "name":"DummyName",
   "source":"contact",
   "content":{
      "field":"1"
   },
   "code":"{{ contact.1 | default(\"Anonymus\") }}",
   "filters":{
      "fallback":"Anonymus",
      "modifier":"",
      "required":false
   },
   "use_cases":[
      {
         "$oid":"5b055aec92e1cb0004378740"
      }
   ],
   "__v":{
      "$numberInt":"0"
   }
}

usecase:

{
   "_id":{
      "$oid":"5b03cac5b5a188000473bff9"
   },
   "customer_id":{
      "$numberInt":"211194355"
   },
   "name":"alma",
   "description":"",
   "__v":{
      "$numberInt":"0"
   }
}

token with event:

{
   "_id":{
      "$oid":"5b17c392f7e9490004f0e8f6"
   },
   "updated_at":{
      "$date":{
         "$numberLong":"1671025447996"
      }
   },
   "created_at":{
      "$date":{
         "$numberLong":"1528284050504"
      }
   },
   "customer_id":{
      "$numberInt":"211194355"
   },
   "name":"test external",
   "code":"{{ event.cica }}",
   "filters":{
      "fallback":"",
      "modifier":"",
      "required":false
   },
   "content":{
      "event_id":"5b17c3869789bd00047924b9",
      "variable":"event.cica"
   },
   "source":"event",
   "use_cases":[

   ],
   "__v":{
      "$numberInt":"0"
   }
}

JWT Workaround

Additionally to get these Personalization components to display for the Push campaigns, @ejwalker had to:

Change the jwt property in https://github.com/emartech/personalization-editor-service/blob/master/server/config/index.js#L50 to:

  jwt: {
    noAuth: true
  }

2 Change the getClientToken() function in https://github.com/emartech/personalization-components/blob/master/src/services/handshake/handshake.js#L10 to return a valid token via a Promise.resolve since the this.uiKit.utils.getAuthenticationToken() method was failing:

  return Promise.resolve('valid_token_for_the_personalization-editor')