feat/decouple back button (#211)

* Core: decouple Back Button * Core: decouple Back Button * Core: decouple Back Button * Core: decouple Back Button * Core: decouple Back Button
player-ui · Nov 8, 2023 · b3e436d · b3e436d
1 parent a07482d
commit b3e436d
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 2 deletions.
diff --git a/plugins/reference-assets/core/src/assets/action/__tests__/transform.test.ts b/plugins/reference-assets/core/src/assets/action/__tests__/transform.test.ts
@@ -64,4 +64,54 @@ describe('action transform', () => {
     await (ref.player.getState() as InProgressState).flowResult;
     expect(ref.player.getState().status).toBe('completed');
   });
+
+  it('prev button transitions', async () => {
+    const ref = runTransform('action', actionTransform, {
+      id: 'test-flow',
+      views: [
+        {
+          type: 'action',
+          id: 'view-1',
+          value: 'Prev',
+        },
+        {
+          type: 'action',
+          id: 'view-2',
+          value: 'Prev',
+        },
+      ],
+      navigation: {
+        BEGIN: 'FLOW_1',
+        FLOW_1: {
+          startState: 'view_1',
+          view_1: {
+            state_type: 'VIEW',
+            ref: 'view-1',
+            transitions: {
+              '*': 'view_2',
+            },
+          },
+          view_2: {
+            state_type: 'VIEW',
+            ref: 'view-2',
+            transitions: {
+              '*': 'end',
+            },
+          },
+          end: {
+            state_type: 'END',
+            outcome: 'done',
+          },
+        },
+      },
+    });
+    expect(ref?.current?.metaData?.role).toBe('back');
+    expect(ref.current?.id).toBe('view-1');
+    ref.current?.run();
+    expect(ref.current?.id).toBe('view-2');
+    ref.current?.run();
+
+    await (ref.player.getState() as InProgressState).flowResult;
+    expect(ref.player.getState().status).toBe('completed');
+  });
 });
diff --git a/plugins/reference-assets/core/src/assets/action/transform.ts b/plugins/reference-assets/core/src/assets/action/transform.ts
@@ -6,6 +6,9 @@ import type {
 import { compose, composeBefore } from '@player-ui/asset-transform-plugin';
 import type { ActionAsset, TransformedAction } from './types';
 
+/**
+ * Function to find prev button
+ */
 export function isBackAction(action: ActionAsset): boolean {
   return action.value === 'Prev';
 }
@@ -32,6 +35,28 @@ const transform: TransformFunction<ActionAsset, TransformedAction> = (
   };
 };
 
+/**
+ * De couples back button from the back icon
+ */
+const backIconTransform: TransformFunction<ActionAsset, ActionAsset> = (
+  action
+) => {
+  /** For previous versions of player, the back button would already have the back icon.
+   *  This ensures that the old functionality does not break and back button is still visible when they update the player.
+   */
+  if (isBackAction(action) && action?.metaData?.role === undefined) {
+    return {
+      ...action,
+      metaData: {
+        ...action?.metaData,
+        role: 'back',
+      },
+    };
+  }
+
+  return action;
+};
+
 /**
  * Appends `exp` to the plugins.stringResolver.propertiesToSkip array or creates it if it doesn't exist
  *
@@ -61,5 +86,6 @@ export const expPropTransform: BeforeTransformFunction<Asset> = (asset) => {
 
 export const actionTransform = compose(
   transform,
+  backIconTransform,
   composeBefore(expPropTransform)
 );
diff --git a/plugins/reference-assets/core/src/assets/action/types.ts b/plugins/reference-assets/core/src/assets/action/types.ts
@@ -27,6 +27,9 @@ export interface ActionAsset<AnyTextAsset extends Asset = Asset>
 
     /** Force transition to the next view without checking for validation */
     skipValidation?: boolean;
+
+    /** string value to decide for the left anchor sign */
+    role?: string;
   };
 }
 

diff --git a/plugins/reference-assets/mocks/action/action-navigation.json b/plugins/reference-assets/mocks/action/action-navigation.json
@@ -21,8 +21,28 @@
               "asset": {
                 "id": "action-prev-id",
                 "type": "text",
-                "value": "Go Back"
+                "value": "Go Back Without Icon"
+              }
+            },
+            "metaData": {
+              "role": ""
+          }
+          }
+        },
+        {
+          "asset": {
+            "id": "action-prev-without-icon",
+            "type": "action",
+            "value": "Prev",
+            "label": {
+              "asset": {
+                "id": "action-prev-id-without-icon",
+                "type": "text",
+                "value": "Go Back With Role"
               }
+            },
+              "metaData": {
+                "role": "back"
             }
           }
         },

diff --git a/plugins/reference-assets/react/src/assets/action/Action.tsx b/plugins/reference-assets/react/src/assets/action/Action.tsx
@@ -19,7 +19,7 @@ export const Action = (props: TransformedAction) => {
         variant={isBackAction(props) ? 'ghost' : 'solid'}
         {...buttonProps}
       >
-        {isBackAction(props) && <ChevronLeftIcon />}
+        {props?.metaData?.role === 'back' && <ChevronLeftIcon />}
         {label && (
           <Text>
             <ReactAsset {...label} />