@brizy/cms-ui

Build env vars

• APP_ORIGIN - You don't need it, is something internal
• APP_PROJECT_TYPE - There are 2 environment types: cloud | shopify
• APP_SHOPIFY_SUBSCRIPTION_TYPE - There are 4 subscription types: free | silver | gold | platinum.
• APP_GRAPHQL_ENDPOINT - Link to CMS api graphql endpoint, example https://your-server.local/graphql
• APP_TRANSLATION_ENDPOINT - Link to Translation api graphql endpoint, example https://your-server.local/graphql
• APP_TRANSLATION_TOKEN - Translation api token, in case authorization type is by token
• APP_APPOINTMENTS_ENDPOINT - Link to Appointments api graphql endpoint, example https://your-server.local/graphql
• APP_NOTIFICATIONS_ENDPOINT - Link to Notifications api graphql endpoint, example https://your-server.local/graphql
• APP_SHOPIFY_ENDPOINT - Link to shopify api graphql endpoint, example https://your-server.local/graphql
• APP_SQUARE_ENDPOINT - Link to square api endpoint, example https://your-server.local
• APP_MEDIA_ENDPOINT - Base URL to get media images, example http://www.brizysites.com/media
• APP_AIRTABLE_ENDPOINT - Link to airtable api endpoint, example https://your-server.local/graphql
• APP_PROJECT_AUTHORIZATION - cookies | token. Default token
• APP_USER_SUBSCRIPTION - free | pro. Specify user subscription type.
• APP_USER_TOKEN - Required if you want to use Apps.
• APP_NOTIFICATIONS_TOKEN - Required for Notifications.
• APP_PROTECTED_PAGE_PASSWORD - Optional protected page password.
• APP_PROJECT_TOKEN - Required only if APP_PROJECT_AUTHORIZATION is set to token. Bearer Token, example NTliYTVkYTA2NzdjMTkyNWYxNjhmZTIxMjk0MjdmOWE2MWMxOGRjNTRkMDdmMWY3N2RmZTZlODA1YWY3YzY4Mg.
• APP_PROJECT_ID - Project Id example /data/4240838
• APP_SHOP_URL - Link to shop,example https://site.com
• APP_WHITE_LABEL_BRANDING_NAME - White label branding name`
• APP_WHITE_LABEL_ABOUT_US_LINK - White label about us link`
• APP_WHITE_LABEL_SUPPORT_LINK - White label support link`
• APP_WHITE_LABEL_UPDATE_TO_PRO_LINK - White label update to pro link`
• APP_TAXES_INFO_LINK = Taxes info link
• APP_SHOP_TOKEN - Bearer Token for shop,example NTliYTVkYTA2NzdjMTkyNWYxNjhmZTIxMjk0MjdmOWE2MWMxOGRjNTRkMDdmMWY3N2RmZTZlODA1YWY3YzY4Mg
• APP_APPOINTMENTS_TOKEN - Bearer Token for appointments,example NTliYTVkYTA2NzdjMTkyNWYxNjhmZTIxMjk0MjdmOWE2MWMxOGRjNTRkMDdmMWY3N2RmZTZlODA1YWY3YzY4Mg
• APP_TRANSLATION_TOKEN - Bearer Token for translations,example NTliYTVkYTA2NzdjMTkyNWYxNjhmZTIxMjk0MjdmOWE2MWMxOGRjNTRkMDdmMWY3N2RmZTZlODA1YWY3YzY4Mg
• APP_SHOPIFY_TOKEN - Bearer Token for shopify,example NTliYTVkYTA2NzdjMTkyNWYxNjhmZTIxMjk0MjdmOWE2MWMxOGRjNTRkMDdmMWY3N2RmZTZlODA1YWY3YzY4Mg
• APP_SQUARE_TOKEN - Bearer Token for square,example NTliYTVkYTA2NzdjMTkyNWYxNjhmZTIxMjk0MjdmOWE2MWMxOGRjNTRkMDdmMWY3N2RmZTZlODA1YWY3YzY4Mg
• APP_PROJECT_SETTINGS_URL - Link to project settings, example https://site.com URL format: https://site.com/[project id]/settings
• APP_PREVIEW_URL - Root URL for collections items preview. example https://site.com
• APP_DOMAIN_URL - Root URL for collections items domain. example https://site.com URL format: http://site.com/[project id]/preview/[collection item slug]
• APP_SHOP_DEFAULT_CHANNEL - Default Channel Code`
• APP_TAXES_MAIN_CATEGORY_ID - Main TaxCategory Id`
• APP_SUPPORT_LINK_CUSTOM_CSS - Custom Css article support link, example https://site.com
• APP_SUPPORT_LINK_CODE_INJECT - Code Inject article support link, example https://site.com
• APP_SUPPORT_LINK_WEBHOOKS - Webhooks article support link, example https://site.com
• APP_SUPPORT_REDIRECTS - Redirects article support link, example https://site.com
• APP_SUPPORT_ACF - ACF article support link, example https://site.com
• APP_SUPPORT_USERS - Users article support link, example https://site.com
• APP_SUPPORT_ORDERS - Orders article support link, example https://site.com
• APP_SUPPORT_DISCOUNTS - Discounts article support link, example https://site.com
• APP_SHOP_CUSTOMERS_SLUG - Reference Collection Type Slug, there will be no example. Just create a CollectionType and use it for the reference
• APP_SHOP_CATEGORIES_SLUG - Reference Collection Type Slug, there will be no example. Just create a CollectionType and use it for the reference
• APP_SHOP_PRODUCTS_SLUG - Reference Collection Type Slug, there will be no example. Just create a CollectionType and use it for the reference
• APP_CUSTOMER_EDITOR_URL - Editor URL for Customers`
• APP_MODULES_SHOP_DISABLED - Disable Shop module
• APP_MODULES_USERS_DISABLED - Disable Users module
• APP_ACTIVE_ITEM_ID - Active item Id example /data/4240838
• APP_ACTIVE_ITEM_TYPE - collectionItem | customer | ecwidProduct | ecwidCategory. Specify active item type.
• APP_SITE_URL - Site url, example https://site.com
• APP_BUILDER_VERSION - Builder version is used for shopify project type
• APP_ECWID_DAYS_LEFT - Is used in ecwid shop module, example 30
• APP_ECWID_SUBSCRIPTION_TYPE - Is used in ecwid shop module, There are 2 types: free | pro
• APP_LOCALE - Specify app display language code. E.g.: en, fr
• APP_IS_AVAILABLE_PREVIEW_BADGE - Specify if is available "made with" badge: true | false
• APP_CLONE_LINK - Specify clone link without id: http://clone-link.com
• APP_CLONE_API - Link to Clone Link api endpoint, example https://your-server.local
• APP_CLONE_TOKEN - Token for Clone API,example NTliYTVkYTA2NzdjMTkyNWYxNjhmZTIxMjk0MjdmOWE2MWMxOGRjNTRkMDdmMWY3N2RmZTZlODA1YWY3YzY4Mg

Update GraphQL schema

env APP_GRAPHQL_ENDPOINT=http://HOST/api/graphql \
    APP_PROJECT_SETTINGS_URL=http://HOST/project-settings \
    APP_PREVIEW_URL=http://HOST/item-preview npm run graphql:schema:update

Deploy Kubernetes

Same steps as here.

Run with docker

• Switch on the desired branch
• Build the image: docker build -f dockerfiles/env.Dockerfile -t myimage .
• Start:

docker run --detach -p [DESIRED PORT]:80 \
           --env APP_PROJECT_TYPE=[cloud | shopify] \
           --env APP_SHOPIFY_SUBSCRIPTION_TYPE=[free | silver | gold | platinum] \
           --env APP_ACTIVE_ITEM_ID=[ITEM ID] \
           --env APP_ACTIVE_ITEM_TYPE=[collectionItem | customer | ecwidProduct | ecwidCategory] \
           --env APP_GRAPHQL_ENDPOINT=[GRPHQL ENDPOINT URL] \
           --env APP_PROJECT_AUTHORIZATION=token \
           --env APP_PROJECT_TOKEN=[ACCESS TOKEN] \
           --env APP_USER_SUBSCRIPTION=[free | pro] \
           --env APP_USER_TOKEN=[ACCESS TOKEN] \
           --env APP_PROJECT_ID=[PROJECT ID] \
           --env APP_IS_AVAILABLE_PREVIEW_BADGE=[true | false] \
           myimage

Demo:

docker run --detach -p 9000:80 \
           --env APP_PROJECT_TYPE=cloud \
           --env APP_PROJECT_ID=/data/4240838 \
           --env APP_SHOPIFY_SUBSCRIPTION_TYPE=silver \
           --env APP_ACTIVE_ITEM_ID=/collection_items/1153 \
           --env APP_ACTIVE_ITEM_TYPE=collectionItem \
           --env APP_GRAPHQL_ENDPOINT=http://api.office.brizy.org/graphql \
           --env APP_PROJECT_AUTHORIZATION=token \
           --env APP_PROJECT_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIzOGd4ZTNuY2ZneXM4czg0Y2N3NDh3bzBrc293NDRnMCIsImp0aSI6ImFhOTA4NjU3YzkxYzMxYTIzZjY0NjgwZWQyOTBiNjVkNjAyNjk2M2RmNmFmZTg3MWJjMjU5YzE1MWE0ODM3YjNjMTk3MGUxODUxYmM0YjM4IiwiaWF0IjoxNjA2MTM5NjMyLCJuYmYiOjE2MDYxMzk2MzIsImV4cCI6MTYzNzY3NTYzMiwic3ViIjoiMTU4MDY1Iiwic2NvcGVzIjpbInByb2plY3QiXX0.KdJBOPM-vK3mjAmoMtiqmT21EsYd69jtqIejvJuISVjlIF7AArEQ3Vzlr6zH7LxHY0aqjo_oWg9eAP0FWrH1x7n52IthVLnhW1ws2FVh3cf6EReYLGIet5mnw0-2w_EfedNul9_HJaXxVcdT_Y8WufC0ioQQUeTxoCycHLzPKgo \
           --env APP_USER_SUBSCRIPTION=free \
           --env APP_USER_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiI0dXk4MG13bHZoOGc0bzRrdzBzd2tvczRjczRzYzQ4ayIsImp0aSI6IjI4ZTlhZjQ1YTJhYmYyMGNiZDQxMzAxZDk4Y2JlNTY0NmVkZTVmZGZlYzM2OGUzYmM5ZmMyMmM1YzczYTA3YWU1MmY2MGRkNDM0YTAyMTc4IiwiaWF0IjoiMTYxNTI3ODc2OC4xOTY1OTkiLCJuYmYiOiIxNjE1Mjc4NzY4LjE5NjYwNCIsImV4cCI6IjE2NDY4MTQ3NjcuNjYzNTU3Iiwic3ViIjoiMTU4MDY1Iiwic2NvcGVzIjpbInVzZXIiXX0.VahSEDONaN0rMVBaW3eb8DKlJzTrqAKRoSU8y4EuD5a_mA2LShR-kgkJrOn-a7u30oIhLAWH6AXQZDaD33Gvfc2pNOR0ke2YXULW6pBKZC-WOAxwgc07bSq0YLdAvop0uSN3mYHts5oP8ZSBY5HPQlFYWe0LxTr4b3c3TKzHNlc \
           --env APP_WHITE_LABEL_BRANDING_NAME=Brizy \
           --env APP_WHITE_LABEL_ABOUT_US_LINK=http://brizy.io \
           --env APP_WHITE_LABEL_UPDATE_TO_PRO_LINK=https://site.com \
           --env APP_WHITE_LABEL_SUPPORT_LINK=https://site.com \
           --env APP_TAXES_INFO_LINK=https://site.com \
           --env APP_MEDIA_ENDPOINT=http://www.brizysites.com/media \
           --env APP_PREVIEW_URL=http://test.com/preview \
           --env APP_DOMAIN_URL=http://test.com/domain \
           --env APP_PROJECT_SETTINGS_URL=http://brizy.io \
           --env APP_SHOP_URL=http://sylius.office.brizy.org/ \
           --env APP_SHOP_DEFAULT_CHANNEL=FASHION_WEB \
           --env APP_TAXES_MAIN_CATEGORY_ID=/api/v2/admin/tax-categories/other \
           --env APP_SHOP_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE2MjY4NTE3NzEsImV4cCI6MTYyNjk1MTc3MCwicm9sZXMiOlsiUk9MRV9BRE1JTklTVFJBVElPTl9BQ0NFU1MiLCJST0xFX0FQSV9BQ0NFU1MiXSwidXNlcm5hbWUiOiJhcGkifQ.vzYfwTkJa9ZgBiHHSWfeTUXdpGasD6yugmPUL7Hk3eoxn0DqoqyKD9fvdDVd5NtbWhK2254zFlcKplw4nK3pma1-DTIcW66EqMbO7ySB1fpnxPZuWwETce3ihpJ3OEEzt0xVxyFM0hwneituMI6dcR0c_Ks2D69BR2wIGmjwL0njqX-3vv4hpQVgu3grRJMVVVAbUoUHabOaupklyTPybuoI8A0rAKJ5QOhhr3TJf3MEscubCd5i-riVJg0rOevlI-6eI69QxKojOA16jzN8SErpsHViEOsX8EJJQr9MG2T-l91CoFX9yTwlzf76Bg6J4jcPVHg55pdvAq5nipYnsQ \
           --env APP_PROTECTED_PAGE_PASSWORD="pass" \
           --env APP_IS_AVAILABLE_PREVIEW_BADGE=true \
           myimage

Github deployment

There are moments when you need the deployment of your PR on github to have some specific environment variables, with other values then the default provided or secrets.

For this yu need to create a .sh file with your branch name in .github/workflows/ci_cd/env, and there specify the variables your want to overwrite.

E.g.

Let's say that your branch name is 3456-shopify-gold-subscription Create a file .github/workflows/ci_cd/env/3456-shopify-gold-subscription.sh. Add content:

#!/usr/bin/env bash

APP_PROJECT_TYPE=shopify
APP_SHOPIFY_SUBSCRIPTION_TYPE=gold

New version

1. New fixes branch

New version usually is created from current fixes-* branch. First of all you need to switch to the current version tag. Let's say current version in package.json file is 0.7.7. That means that current fixes branch name is fixes-0.7.8(because fixes branch name is the name of the next version), also means that you need to switch to v0.7.7 tag (this is the start of the current version).

git checkout v0.7.7

From here you need to create next fixes branch, it's name is next version from current fixes branch, so it will be fixes-0.7.9.

# Create branch
git checkout -b fixes-0.7.9

# And push it on the server
git push --set-upstream origin fixes-0.7.9

We create next fixes branch from latest tag, just because we need after that to merge current fixes branch in to new fixes branch. This will change the base of all open PRs attached to current fixes branch, to new fixes branch, so ou'll not have to do this manually. Note: As you will see next, this merge should be done from github interface, not from local computer terminal.

2. Release new version

Now we need to create new version from current fixes branch.

# Switch to current fixes branch:
git checkout fixes-0.7.8

# make sure you have the latest changes
git pull

# Update new localization.
# Make sure this command will run properly and will end with code `0`. Otherwise resolve the problem then continue.
# More info about how to resolve problems check out on Localization section in this document
npm run i18n

# If there are new strings, commit the updated localization files
git add .
git commit -m "Updated localization"

# Create new version using `npm version` command, https://docs.npmjs.com/cli/v8/commands/npm-version
# This command will increase the version in `package.json`&`package-lock.json` files, will commit the changes in git, also will create new git tag with new version.
npm version patch

# Push new version on github
git push origin fixes-0.7.8
git push --tags

3. Push new docker image on DockerHUB

1. Create new image

docker build -f dockerfiles/iframe.Dockerfile -t brizy/cms-ui:[VERSION TAG NAME] .

In our example case

docker build -f dockerfiles/iframe.Dockerfile -t brizy/cms-ui:v0.7.8 .

Wait until the build finishes. Also make sure it finishes with code 0

2. Push image on docker hub

docker push brizy/cms-ui:v0.7.8

Merge current fixes branch in next fixes branch

1. Go on github, and create a pull request from current fixes branch (in out case from fixes-0.7.8).

2. Set the base to new the new fixes branch

3. Merge pull request in new fixes branch and delete merged branch

Create new milestone

1. Go to github milestones page, (https://github.com/bagrinsergiu/brizy-cms-ui/milestones)
2. Create new milestone (click New milestone button)
3. Set it's title in ucrent format 0. Fixes-[VERISON NUMBER WITHOUT PATCH NUMBER]-[DAY.MONTH]. In our example it will be 0. Fixes-0.7-30.06
4. In Due date (optional) filed set the next monday
5. In Description field set this text

Branch: `[NEW FIXES BRANCH]`
From Tag: `[CURRENT TAG]`
Next Tag: `[NEXT TAG]`

In our example

Branch: `fixes-0.7.9`
From Tag: `v0.7.8`
Next Tag: `v0.7.9`

6. Click Create milestone

7. Open old milestone for current version

8. Check all open issues

9. Click on Milestone button

10. Pick new created milestone. This way you'll transfer all issues from current milestone to the new one.

11. Got back to milestones and close the all milestone

13. Announce in #cms-ui Discord channel about new release, with such message

@everyone 
`fixes-0.7.8` released
New fixes branch: `fixes-0.7.9`
New Fixes Milestone: `1. Fixes-0.7-30.06`

Localization

Localization allows to translate static strings from project in different languages, depending on locale code.

Localization usage

In this project the locale code is in Conext.locale parameter. It can be passed via post message by editor (usually in production), in locale property, or by environment variable: APP_LOCALE

In order to make strings translatable, we need to use the t function.

For rect components we use useTranslation hook.

import { useTranslation } from "~/locale/useTranslation";

function MyComponent() {
  const { t } = useTranslation();
  
  return <div>{t("Hello World!!!")}</div>
}

In case we need t function outside of a React component, we need to pass the t function as parameter. In case that function is called from a react component, sure we will take the t functin from useTranslation hook and pass it. In cas the function is called from an observable middleware or reducer, then usually middlewares and reducers get this function as dependecy. See already implemented observables. Note: We are trying to make all string translable from components. So make sure to avoid translating from reducers or middlewares.

Interpolation

If you want to fill the static string with some dynamic content, then you need to do proper interpolation:

import { useTranslation } from "~/locale/useTranslation";

function MyComponent({ firstName, lastName }) {
  const { t } = useTranslation();
  
  return <div>{t("Hello {{firstName}} {{lastName}}! How are you?", {firstName, lastName})}</div>
}

Generate translatable strings

All translatable strings are saved in /locales/default.json. In case new strings are added, we need to mae sure that they ar added in this file too. They should not be added in default.json manually, there is a special command for this npm run i18n.

Whenever you add new translatable strings, before you commit your changes run npm run i18n. Make sure the command did run properly and end with code 0. If something goes wrong, it will give an error. Unfortunately the error message is not descriptive at all. So you have to find the error by your self. Scroll in terminal logs generated by npm run i18n

Usually the log line look something like this:

[read]    /home/h/www/brizy-cms-ui/src/utils/sideBarTab.ts

But when something wrong happens it will look like this:

[error]    /home/h/www/brizy-cms-ui/src/utils/sideBarTab.ts
[warning]    /home/h/www/brizy-cms-ui/src/utils/sideBarTab.ts

Open the file and find out wat's wrong with t function usage. The common mistake is to use t string templates that have variables. You need to fix this by using proper interpolation. (Check out Interpolation section).