.. _replace-strings:

How to replace strings in Angular frontend
==========================================

.. warning::

    The reseller functionality in Fleio will be deprecated and removed from Fleio in the following months. We recommend that you do not use this feature any more.

With 2021.05 release we have added the possibility to replace strings from Fleio, with your custom ones. In order to do that
we will have to define a new language called "en-replace" which will contain the custom strings, besides the default ones.

First of all, you will have to get the default translations from our public repository: https://github.com/fleio/fleio-i18n

If you check the ``fleio-i18n/translations/ngfrontend/src/assets/locale/`` location, you will see that there are multiple
templates that can be used to get the String ID and the String:

* template-enduser.json
* template-reseller.json
* template-staff.json
* template.json

If you inspect the ``template-enduser.json`` you will see that the translations format will be:

.. code-block:: bash

    {
      "locale": "en-US",
      "translations": {
        "STRING ID": "STRING"
      }
    }

.. warning::

  You should create and edit the following files as ``fleio`` user. This ensures that no file permission issue later
  occurs. If you want to know more about file permissions in a docker deployment, see :ref:`docker_file_permissions`.

  You should switch to ``fleio`` user before continuing:

  .. code-block:: bash

    sudo -i -u fleio

As an example, we will change the ``SIGN IN`` text with ``SIGN IN - CHANGED STRING``.
First, you will have to create a new json file called ``messages.en-replace.json`` in the ``/home/fleio/compose/custom`` directory.
If the custom directory does not exist, please create it.

Now, if you inspect the ``template.json`` file, you will see that the ``SIGN IN`` string has ``5207635742003539443`` ID.
In the ``messages.en-replace.json`` file we will have to add the following:

.. code-block:: bash

    {
      "locale": "en-US",
      "translations": {
        "5207635742003539443": "SIGN IN - CHANGED STRING"
      }
    }


The next step would be to create the ``Dockerfile``, in the ``/home/fleio/compose/custom`` directory.

.. code-block:: bash

    touch /home/fleio/compose/custom/Dockerfile

Insert the following code in the ``/home/fleio/compose/custom/Dockerfile`` file. This will ensure that on each recreate / upgrade, the
fleio_frontend_1 image will contain the changed strings.

.. code-block:: bash

    ARG FLEIO_DOCKER_HUB
    ARG FLEIO_RELEASE_SUFFIX

    FROM ${FLEIO_DOCKER_HUB}/fleio_frontend${FLEIO_RELEASE_SUFFIX}

    # we're defining the Fleio installation path in one place and we're using it below
    ENV INSTALL_PATH="/var/webapps/fleio"

    COPY messages.en-replace.json "$INSTALL_PATH/frontend/enduser/assets/locale/messages.en-replace.json"

If you want to change strings for ``staff`` or ``reseller panel``, you will have to change the path where you're copying the
``messages.en-replace.json`` file to:

* staff: ``$INSTALL_PATH/frontend/staff/assets/locale/messages.en-replace.json``
* reseller: ``$INSTALL_PATH/frontend/reseller/assets/locale/messages.en-replace.json`` # only if enabled

We will also have to add the following code to the ``/home/fleio/compose/docker-compose.override.yml`` file:

.. code-block:: bash

    # Add here your docker-compose customizations
    # docker-compose.override.yml is not overwritten by Fleio
    # (while docker-compose.yml may be OVERWRITTEN on Fleio upgrades)

    version: "3.7"

    services:
      frontend:
        build:
          context: ./custom/
          dockerfile: Dockerfile
          args:
            - FLEIO_DOCKER_HUB
            - FLEIO_RELEASE_SUFFIX
        image: fleio_frontend_custom

Now we will build and apply the customizations:

.. code-block:: bash

    # make sure you're in the directory where docker-compose files are
    cd /home/fleio/compose

    # build your image
    docker-compose build

    # apply your changes to the running frontend
    docker-compose up -d

After we have re-build the frotend image, we will have to change the default language to ``en-replace`` for the panels that we have
added the changed strings (in our case the enduser.config.json):

.. code-block:: bash

    fleio edit enduser.config.json
    fleio edit staff.config.json
    fleio edit reseller.config.json # only if reseller is enabled

Now if you access the enduser Angular panel you should see that the ``SIGN IN`` button text has changed.