Add translations support to start and publish commands

src/cli/run/validate.ts

@@ -6,7 +6,7 @@ import { Command } from 'commander';
 
 import validateSchema from '../../services/schema/schemaValidator/validateSchema';
 import validateQueryParamsBuilder from '../../services/query/queryParamsBuilderValidator/validateQueryParamsBuilder';
-import validateTranslation from '../../services/translation/validate';
+import validateTranslation from '../../services/translation/translationValidator/validateTranslation';
 
 const helperText = `
 Usage:

src/server/index.ts

@@ -16,6 +16,7 @@ import generateQueryParams from '../services/query/generateQueryParams';
 import validateQueryParamsBuilder from '../services/query/queryParamsBuilderValidator/validateQueryParamsBuilder';
 import renderWidget from '../services/widgetRenderer/widgetRenderer';
 import generateConfig from '../services/widgetConfig/generateConfig';
+import validateTranslation from '../services/translation/translationValidator/validateTranslation';
 
 const BUILDER_ADDRESS = `${host}:${port}`;
 
@@ -62,6 +63,14 @@ function setupFileWatcher({ directory, sockets, options }: Watcher) {
 
             break;
 
+        case WidgetFileType.TRANSLATION:
+            validateTranslation(directory);
+
+            liveReload({
+                directory, sockets, fileEvent, filePath, options,
+            });
+            break;
+
         case WidgetFileType.META:
             // We are not currently handling this file type
             break;

src/services/api/widget.ts

@@ -22,6 +22,7 @@ export interface WidgetPreviewRenderRequest {
     storefront_api_query: string;
     storefront_api_query_params: object;
     channel_id: number;
+    schema_translations?: string;
 }
 
 export function getWidget(data: WidgetPreviewRenderRequest): Promise<string> {

src/services/translation/translationLoader/translationLoader.test.ts

@@ -1,8 +1,6 @@
 import fs from 'fs';
 
-import { messages } from '../../../messages';
-
-import translationLoader, { handleSchemaLoader } from './translationLoader';
+import translationLoader, { handleSchemaLoader, translationDefaultPayload } from './translationLoader';
 
 const schemaData = fs.readFileSync('src/services/__fixtures__/schema_translations.json', 'utf8').toString();
 
@@ -33,7 +31,7 @@ describe('Schema Loader', () => {
         it('should return with no data', () => {
             const result = translationLoader('dummyPath');
 
-            expect(result).rejects.toEqual(messages.invalidTranslationSchema());
+            expect(result).resolves.toEqual(translationDefaultPayload);
         });
     });
 });

src/services/translation/translationLoader/translationLoader.ts

@@ -3,25 +3,32 @@ import * as fs from 'fs';
 import WidgetFileType, { FileLoaderResponse } from '../../../types';
 import { messages } from '../../../messages';
 
-export function handleSchemaLoader(error: Error | null, schemaData: string): FileLoaderResponse {
-    const payload = {
-        type: WidgetFileType.TRANSLATION,
-        data: '',
-    };
+export const translationDefaultPayload = {
+    type: WidgetFileType.TRANSLATION,
+    data: '{}',
+};
 
+export function handleSchemaLoader(error: Error | null, schemaData: string): FileLoaderResponse {
     if (schemaData && !error) {
-        payload.data = schemaData;
+        return {
+            ...translationDefaultPayload,
+            data: schemaData,
+        }
     }
 
-    return payload;
+    return translationDefaultPayload;
 }
 
 export default function translationLoader(widgetDir: string): Promise<FileLoaderResponse> {
     return new Promise((resolve, reject) => {
         fs.readFile(
             `${widgetDir}/${WidgetFileType.TRANSLATION}`,
             'utf8',
-            (error: Error, schemaData: string) => {
+            (error: NodeJS.ErrnoException, schemaData: string) => {
+                if (error && error.code === 'ENOENT') {
+                    resolve(translationDefaultPayload);
+                }
+
                 const schemaResults = handleSchemaLoader(error, schemaData);
 
                 if (!schemaResults.data) {

src/services/translation/validate.ts → src/services/translation/translationValidator/validateTranslation.ts

@@ -1,8 +1,8 @@
-import { FileLoaderResponse } from '../../types';
-import { log } from '../../messages';
+import { FileLoaderResponse } from '../../../types';
+import { log } from '../../../messages';
 
-import TranslationValidator from './translationValidator/translationValidator';
-import translationLoader from './translationLoader/translationLoader';
+import TranslationValidator from './translationValidator';
+import translationLoader from '../translationLoader/translationLoader';
 
 export default function validateTranslation(directory: string) {
     return translationLoader(directory)

src/services/widgetRenderer/widgetRenderer.test.ts

@@ -5,6 +5,7 @@ import WidgetFileType, { FileLoaderResponse } from '../../types';
 import { generateRenderPayloadFromFileLoaderResults } from './widgetRenderer';
 
 const configurationData = fs.readFileSync('src/services/__fixtures__/config.json', 'utf8').toString();
+const translationsData = fs.readFileSync('src/services/__fixtures__/schema_translations.json', 'utf8').toString();
 const htmlData = fs.readFileSync('src/services/__fixtures__/widget.html', 'utf8').toString();
 const query = fs.readFileSync('src/services/__fixtures__/query.graphql', 'utf8').toString();
 const queryParams = fs.readFileSync('src/services/__fixtures__/queryParams.json', 'utf8').toString();
@@ -26,6 +27,10 @@ const fileLoaderResponseData: FileLoaderResponse[] = [
         type: WidgetFileType.QUERY_PARAMS,
         data: queryParams,
     },
+    {
+        type: WidgetFileType.TRANSLATION,
+        data: translationsData,
+    },
 ];
 
 describe('Widget Renderer', () => {
@@ -38,6 +43,7 @@ describe('Widget Renderer', () => {
             widget_uuid,
             storefront_api_query,
             storefront_api_query_params,
+            schema_translations,
         } = generateRenderPayloadFromFileLoaderResults(fileLoaderResponseData);
 
 
@@ -47,5 +53,6 @@ describe('Widget Renderer', () => {
         expect(storefront_api_query_params).toEqual(JSON.parse(queryParams));
         expect(placement_uuid).not.toBeNull();
         expect(widget_uuid).not.toBeNull();
+        expect(schema_translations).toEqual(JSON.parse(translationsData));
     });
 });

src/services/widgetRenderer/widgetRenderer.ts

@@ -6,6 +6,7 @@ import widgetTemplateLoader from '../widgetTemplate/widgetTemplateLoader/widgetT
 import widgetConfigLoader from '../widgetConfig/widgetConfigLoader/widgetConfigLoader';
 import queryLoader from '../query/queryLoader/queryLoader';
 import queryParamsLoader from '../query/queryParamsLoader/queryParamsLoader';
+import translationsLoader from '../translation/translationLoader/translationLoader';
 
 const channelId = process.env.WIDGET_BUILDER_CHANNEL_ID ? parseInt(process.env.WIDGET_BUILDER_CHANNEL_ID, 10) : 1;
 
@@ -17,6 +18,7 @@ const getInitialRenderingPayload = (): WidgetPreviewRenderRequest => ({
     storefront_api_query: '',
     storefront_api_query_params: {},
     channel_id: channelId,
+    schema_translations: '',
 });
 
 export function generateRenderPayloadFromFileLoaderResults(results: FileLoaderResponse[]): WidgetPreviewRenderRequest {
@@ -40,6 +42,10 @@ export function generateRenderPayloadFromFileLoaderResults(results: FileLoaderRe
                 return { ...acc, storefront_api_query_params: JSON.parse(data) };
             }
 
+            if (type === WidgetFileType.TRANSLATION) {
+                return { ...acc, schema_translations: JSON.parse(data) };
+            }
+
             return acc;
         }, getInitialRenderingPayload(),
     );
@@ -51,6 +57,7 @@ export default function renderWidget(widgetDir: string): Promise<string> {
         widgetConfigLoader(widgetDir),
         queryLoader(widgetDir),
         queryParamsLoader(widgetDir),
+        translationsLoader(widgetDir),
     ]).then(
         (results: FileLoaderResponse[]) => getWidget(
             generateRenderPayloadFromFileLoaderResults(results),

src/services/widgetTemplate/publish.ts

@@ -6,6 +6,7 @@ import WidgetFileType, { FileLoaderResponse } from '../../types';
 import schemaLoader from '../schema/schemaLoader/schemaLoader';
 
 import widgetTemplateLoader from './widgetTemplateLoader/widgetTemplateLoader';
+import translationsLoader from '../translation/translationLoader/translationLoader';
 import track from './track';
 
 interface CreateWidgetTemplateReq {
@@ -14,6 +15,7 @@ interface CreateWidgetTemplateReq {
     template: string;
     storefront_api_query: string;
     channel_id: number;
+    schema_translations?: string;
 }
 
 const widgetTemplatePayload = (widgetName: string): CreateWidgetTemplateReq => ({
@@ -22,6 +24,7 @@ const widgetTemplatePayload = (widgetName: string): CreateWidgetTemplateReq => (
     template: '',
     storefront_api_query: '',
     channel_id: 1,
+    schema_translations: ''
 });
 
 const publishWidgetTemplate = async (widgetName: string, widgetTemplateDir: string) => {
@@ -30,6 +33,7 @@ const publishWidgetTemplate = async (widgetName: string, widgetTemplateDir: stri
     try {
         const widgetConfiguration = await Promise.all([
             widgetTemplateLoader(widgetTemplateDir),
+            translationsLoader(widgetTemplateDir),
             schemaLoader(widgetTemplateDir),
             queryLoader(widgetTemplateDir),
             queryParamsLoader(widgetTemplateDir),
@@ -49,6 +53,10 @@ const publishWidgetTemplate = async (widgetName: string, widgetTemplateDir: stri
                     return { ...acc, storefront_api_query: data };
                 }
 
+                if (type === WidgetFileType.TRANSLATION) {
+                    return { ...acc, schema_translations: data };
+                }
+
                 return acc;
             }, widgetTemplatePayload(widgetName),
         ));