From 6f50246a1dfc84ad084d1c67c3dfb799c9e2822d Mon Sep 17 00:00:00 2001
From: Emir Demirbag <17883910+edemirbag@users.noreply.github.com>
Date: Wed, 15 May 2024 13:33:39 +0100
Subject: [PATCH] [ASL-4413] HBA upload functionality in PPL transfer journeys
 (#327)

* - Provide a flexible mechanism for key-based lookup with fallback options in support of content updates related to ASL-4413
- Include tests to validate that the snippet component can correctly handle fallbacks when attempting to retrieve templates

* Update index.jsx - undo commit (throw error instead of return)
---
 package.json               |  2 +-
 src/snippet/index.jsx      | 16 +++++++++++++++-
 src/snippet/index.spec.jsx | 12 ++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 94533e1b..4523e2c8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/asl-components",
-  "version": "13.4.1",
+  "version": "13.5.0",
   "description": "React components for ASL layouts and elements",
   "main": "src/index.jsx",
   "styles": "styles/index.scss",
diff --git a/src/snippet/index.jsx b/src/snippet/index.jsx
index 27fc7849..1aa8c9ce 100644
--- a/src/snippet/index.jsx
+++ b/src/snippet/index.jsx
@@ -4,10 +4,24 @@ import { connect } from 'react-redux';
 import Markdown from '../markdown';
 import { render } from 'mustache';
 
+function getTemplate(content, primary, fallback) {
+    const keysToTry = [primary, ...(Array.isArray(fallback) ? fallback : [fallback])];
+
+    for (let key of keysToTry) {
+        const template = get(content, key);
+        if (template != undefined) {
+            return template;
+        }
+    }
+
+    return undefined;
+}
+
 export const Snippet = ({ content, children, optional, fallback, ...props }) => {
-    const str = get(content, children, get(content, fallback));
+    const str = getTemplate(content, children, fallback);
     if (str === undefined && optional) {
         return null;
+
     }
     if (str === undefined) {
         throw new Error(`Failed to lookup content snippet: ${children}`);
diff --git a/src/snippet/index.spec.jsx b/src/snippet/index.spec.jsx
index 10fe9312..04d2ff18 100644
--- a/src/snippet/index.spec.jsx
+++ b/src/snippet/index.spec.jsx
@@ -42,4 +42,16 @@ two`
     expect(wrapper.html()).toEqual(paragraphs);
   });
 
+  test('can accept single fallback', () => {
+    const wrapper = render(<div><Snippet content={content} fallback={'paragraphs'}>non.existent</Snippet></div>);
+    expect(wrapper.find('p').length).toEqual(2);
+    expect(wrapper.html()).toEqual(paragraphs);
+  });
+
+  test('can accept multiple fallbacks', () => {
+    const wrapper = render(<div><Snippet content={content} fallback={['non.existent.2', 'paragraphs', 'list']}>non.existent</Snippet></div>);
+    expect(wrapper.find('p').length).toEqual(2);
+    expect(wrapper.html()).toEqual(paragraphs);
+  });
+
 });