Merge pull request #93 from iceljc/features/refine-chat-window

refine agent page

Author: Oceania2018

src/lib/common/LoadingToComplete.svelte

@@ -12,17 +12,22 @@
 </script>
 
 {#if isLoading}
-  <Loader size={spinnerSize} />
+    <Loader size={spinnerSize} />
 {/if}
 
+
 {#if isComplete}
-  <Alert color="success">
-    <div>{successText}</div>
-  </Alert>
+    <div class="alert-container">
+        <Alert class="success">
+            <div>{successText}</div>
+        </Alert>
+    </div>
 {/if}
 
 {#if isError}
-  <Alert color="danger">
-    <div>{errorText}</div>
-  </Alert>
-{/if}
+    <div class="alert-container">
+        <Alert class="error">
+            <div>{errorText}</div>
+        </Alert>
+    </div>
+{/if}

src/lib/helpers/types.js

@@ -172,7 +172,7 @@
  * @property {string} fieldType
  * @property {boolean} required
  * @property {string} redirectTo
- * @property {string?} [redirectToAgentName]
+ * @property {string?} [redirect_to_agent]
  */
 
 /**

src/lib/scss/app.scss

@@ -39,6 +39,7 @@ File: Main Css File
 @import "custom/components/print";
 @import "custom/components/loader";
 @import "custom/components/chat";
+@import "custom/components/alert";
 
 // Plugins
 @import "custom/plugins/custom-scrollbar";

src/lib/scss/custom/components/_alert.scss

@@ -0,0 +1,20 @@
+.alert-container {
+    position: fixed;
+    top: 10%;
+    left: 35%;
+    right: 35%;
+    z-index: 8888;
+
+    .alert {
+        color: white;
+        text-align: center;
+    }
+
+    .success {
+        background-color: rgba(52, 195, 143, 0.9) !important;
+    }
+    
+    .error {
+        background-color: rgba(244, 106, 106, 0.9) !important;
+    }
+}

src/routes/page/agent/[agentId]/agent-routing.svelte

@@ -28,10 +28,12 @@
                     <div class="table-responsive rule-body">
                         <Table>
                             <tbody>
+                                {#if !!rule.field}
                                 <tr>
                                     <th class="agent-prop-key">Field</th>
                                     <td>{rule.field}</td>
                                 </tr>
+                                {/if}
                                 {#if !!rule.description}
                                 <tr>
                                     <th class="agent-prop-key">Description</th>
@@ -52,7 +54,7 @@
                                 <tr>
                                     <th class="agent-prop-key">Redirect to Agent</th>
                                     <td style="cursor: pointer;" on:click={() => redirectToAgent(rule.redirectTo)}>
-                                        {rule.redirectToAgentName}
+                                        {rule.redirect_to_agent || ''}
                                     </td>
                                 </tr>
                                 {/if}