Merge pull request #66 from farabi-deriv/setup-env-variable-for-build…

…-and-deploy-staging

farabi/setup-env-variable-for-build-and-deploy-staging

.github/workflows/build-and-deploy-staging.yml

@@ -37,6 +37,10 @@ jobs:
 
             - name: Build staging
               run: npm run build
+              env:
+                  R2_PROJECT_NAME: ${{ vars.R2_PROJECT_NAME }}
+                  TRANSLATION_CDN_URL: ${{ vars.TRANSLATION_CDN_URL }}
+                  CROWDIN_BRANCH_NAME: staging
 
             - name: Run tests for Eslint
               run: npm run test:lint

.github/workflows/build-and-deploy-test.yml

@@ -76,6 +76,10 @@ jobs:
 
             - name: Build staging
               run: npm run build
+              env:
+                  R2_PROJECT_NAME: ${{ vars.R2_PROJECT_NAME }}
+                  TRANSLATION_CDN_URL: ${{ vars.TRANSLATION_CDN_URL }}
+                  CROWDIN_BRANCH_NAME: staging
 
             - name: Run tests for Eslint
               run: npm run test:lint

src/app/App.tsx

@@ -10,7 +10,8 @@ import AppContent from './app-content';
 
 const queryClient = new QueryClient();
 
-const i18nInstance = initializeI18n({ cdnUrl: 'https://cdn.example.com' });
+const { TRANSLATION_CDN_URL, R2_PROJECT_NAME, CROWDIN_BRANCH_NAME } = process.env;
+const i18nInstance = initializeI18n({ cdnUrl: `${TRANSLATION_CDN_URL}/${R2_PROJECT_NAME}/${CROWDIN_BRANCH_NAME}` });
 
 function App() {
     return (

src/pages/dashboard/constants.ts

@@ -1,12 +1,12 @@
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 
 export type TSidebarItem = {
     label: string;
     content: { data: string; faq_id?: string }[];
     link: boolean;
 };
 
-export const SIDEBAR_INTRO: TSidebarItem[] = [
+export const SIDEBAR_INTRO = (): TSidebarItem[] => [
     {
         label: localize('Welcome to Deriv Bot!'),
         content: [

src/pages/dashboard/info-panel.tsx

@@ -40,7 +40,7 @@ const InfoPanel = observer(() => {
                 <LegacyClose1pxIcon height='18px' width='18px' />
             </div>
 
-            {SIDEBAR_INTRO.map(sidebar_item => {
+            {SIDEBAR_INTRO().map(sidebar_item => {
                 const { label, content, link } = sidebar_item;
                 return (
                     <div key={`${label}-${content}`}>