From bf89226ca1489090943a9dcd3ad193f0f6c67bfb Mon Sep 17 00:00:00 2001
From: Etienne Dusseault <etienne.dusseault@gmail.com>
Date: Wed, 29 Sep 2021 15:43:18 -0300
Subject: [PATCH] Add send-header to Storybook (#12084)

---
 .storybook/actions/sb-send-action.js          |  9 ++++
 .storybook/reducers/sb-history-reducer.js     |  9 ++++
 .storybook/reducers/sb-send-reducer.js        | 19 +++++++
 .storybook/test-data.js                       | 10 ++++
 .../send/send-header/send-header.stories.js   | 54 +++++++++++++++++++
 5 files changed, 101 insertions(+)
 create mode 100644 .storybook/actions/sb-send-action.js
 create mode 100644 .storybook/reducers/sb-history-reducer.js
 create mode 100644 .storybook/reducers/sb-send-reducer.js
 create mode 100644 ui/pages/send/send-header/send-header.stories.js

diff --git a/.storybook/actions/sb-send-action.js b/.storybook/actions/sb-send-action.js
new file mode 100644
index 000000000..c1e66e41c
--- /dev/null
+++ b/.storybook/actions/sb-send-action.js
@@ -0,0 +1,9 @@
+export const updateSendAsset = (type) => ({
+  type: 'send/updateSendAsset',
+  payload: type,
+});
+
+export const updateSendStage = (stage) => ({
+  type: 'send/updateSendStage',
+  payload: stage,
+});
diff --git a/.storybook/reducers/sb-history-reducer.js b/.storybook/reducers/sb-history-reducer.js
new file mode 100644
index 000000000..a3d282a27
--- /dev/null
+++ b/.storybook/reducers/sb-history-reducer.js
@@ -0,0 +1,9 @@
+import testData from '../test-data';
+
+const initialState = { ...testData.history };
+export default function historySBReducer(state = initialState, action) {
+  switch (action.type) {
+    default:
+      return state;
+  }
+}
diff --git a/.storybook/reducers/sb-send-reducer.js b/.storybook/reducers/sb-send-reducer.js
new file mode 100644
index 000000000..c53cd1bb7
--- /dev/null
+++ b/.storybook/reducers/sb-send-reducer.js
@@ -0,0 +1,19 @@
+import testData from '../test-data';
+
+const initialState = { ...testData.send };
+export default function sendSBReducer(state = initialState, action) {
+  switch (action.type) {
+    case 'send/updateSendStage':
+      return {
+        ...state,
+        stage: action.payload,
+      };
+    case 'send/updateSendAsset':
+      return {
+        ...state,
+        asset: { ...state.asset, type: action.payload },
+      };
+    default:
+      return state;
+  }
+}
diff --git a/.storybook/test-data.js b/.storybook/test-data.js
index 80608dadc..1aac5c8ba 100644
--- a/.storybook/test-data.js
+++ b/.storybook/test-data.js
@@ -379,6 +379,15 @@ const state = {
               value: '0x9c2686',
             },
           ],
+          [
+            {
+              note: 'txStateManager: setting status to confirmed',
+              op: 'replace',
+              path: '/status',
+              timestamp: 1629582721178,
+              value: 'confirmed',
+            },
+          ],
           [
             {
               note: 'txStateManager: setting status to confirmed',
@@ -1178,6 +1187,7 @@ const state = {
       balance: '0x0',
       details: null,
     },
+    stage: 'ADD_RECIPIENT',
     amount: '3782dace9d900000',
     gas: {
       price: null,
diff --git a/ui/pages/send/send-header/send-header.stories.js b/ui/pages/send/send-header/send-header.stories.js
new file mode 100644
index 000000000..034623bb3
--- /dev/null
+++ b/ui/pages/send/send-header/send-header.stories.js
@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import { combineReducers, createStore } from 'redux';
+import { Provider } from 'react-redux';
+
+import { select } from '@storybook/addon-knobs';
+import {
+  updateSendStage,
+  updateSendAsset,
+} from '../../../../.storybook/actions/sb-send-action';
+
+import sendSBReducer from '../../../../.storybook/reducers/sb-send-reducer';
+import historySBReducer from '../../../../.storybook/reducers/sb-history-reducer';
+
+import { ASSET_TYPES, SEND_STAGES } from '../../../ducks/send';
+import SendHeader from './send-header.component';
+
+export default {
+  title: 'SendHeader',
+  id: __filename,
+};
+
+export const SendHeaderComponent = () => {
+  const store = createStore(
+    combineReducers({ send: sendSBReducer, history: historySBReducer }),
+  );
+  const state = store.getState();
+  const { send } = state;
+  const asset =
+    select('Asset', [ASSET_TYPES.NATIVE, ASSET_TYPES.TOKEN]) || send.asset;
+
+  const stage =
+    select('Stage', [
+      SEND_STAGES.ADD_RECIPIENT,
+      SEND_STAGES.DRAFT,
+      SEND_STAGES.EDIT,
+      SEND_STAGES.INACTIVE,
+    ]) || send.stage;
+
+  useEffect(() => {
+    store.dispatch(updateSendAsset(asset));
+  }, [store, asset]);
+
+  useEffect(() => {
+    store.dispatch(updateSendStage(stage));
+  }, [store, stage]);
+
+  return (
+    <Provider store={store}>
+      <div style={{ width: 600 }}>
+        <SendHeader />
+      </div>
+    </Provider>
+  );
+};