fix(station-logout): implement-station-logout-with-sample-toggles (#461)

Author: akulakum

widgets-samples/cc/samples-cc-react-app/src/App.scss

@@ -106,4 +106,8 @@ iframe {
 .table-border{
   border: 1px solid silver;
   padding: '8px';
+}
+
+.stationLogoutButtonClass{
+  margin-top: 0.313rem;
 }

widgets-samples/cc/samples-cc-react-app/src/App.tsx

@@ -9,6 +9,7 @@ import {
   store,
   OutdialCall,
 } from '@webex/cc-widgets';
+import {StationLogoutSuccess} from '@webex/plugin-cc';
 import Webex from 'webex/contact-center';
 import {ThemeProvider, IconProvider, Icon, Button, Checkbox, Text, Select, Option} from '@momentum-design/components/dist/react';
 import {PopoverNext} from '@momentum-ui/react-collaboration';
@@ -310,6 +311,16 @@ function App() {
     console.log('onStateChange invoked', status);
   };
 
+    const stationLogout = () => {
+    store.cc.stationLogout({logoutReason: 'User requested logout'})
+      .then((res: StationLogoutSuccess) => {
+        console.log('Agent logged out successfully', res.data.type);
+      })
+      .catch((error: Error) => {
+        console.log('Agent logout failed', error);
+      });
+  };
+
   return (
     <div className="app mds-typography">
       <ThemeProvider
@@ -409,7 +420,7 @@ function App() {
               <div className="box" style={{ flex: 1 }}>
                 <section className="section-box">
                   <fieldset className="fieldset">
-                    <legend className="legend-box">&nbsp;Sample App Toggles&nbsp;</legend>
+                    <legend className="legend-box">&nbsp;Sample App Toggles and Operations&nbsp;</legend>
                     <Checkbox
                       checked={currentTheme === 'DARK'}
                       aria-label="theme checkbox"
@@ -432,6 +443,11 @@ function App() {
                         setShowAgentProfile(!showAgentProfile);
                       }}
                     />
+                    {store.isAgentLoggedIn && (
+                      <Button id="logoutAgent" onClick={stationLogout} color="positive" className='stationLogoutButtonClass'>
+                        Station Logout
+                      </Button>
+                    )}
                   </fieldset>
                 </section>
                 <br/>