Skip to content

fix(outdial): fix outdial module ui and add sections for each widget #443

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: ccwidgets
Choose a base branch
from
Draft

fix(outdial): fix outdial module ui and add sections for each widget #443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 18 additions & 25 deletions packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,32 +19,25 @@ const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> =
};

return (
<div className="out-dial-call-box">
<section className="out-dial-call-section-box">
<fieldset className="out-dial-call-fieldset">
<legend className="out-dial-call-legend-box">Outdial Call</legend>
<div className="keypad">
<input
onChange={updateOutboundNumber}
id="outBoundDialNumber"
placeholder="Enter number to dial"
value={destination}
/>
<div className="keys">
{['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'].map((key) => (
<div key={key} className="key" onClick={() => handelKeyPress(key)}>
{key}
</div>
))}
</div>
<button className="out-dial-call-btn" onClick={() => startOutdial(destination)}>
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.11-.27c1.12.45 2.33.69 3.58.69a1 1 0 011 1v3.5a1 1 0 01-1 1C10.29 21 3 13.71 3 4.5a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.24 2.46.69 3.58a1 1 0 01-.27 1.11l-2.2 2.2z" />
</svg>
</button>
<div className="keypad">
<input
onChange={updateOutboundNumber}
id="outBoundDialNumber"
placeholder="Enter number to dial"
value={destination}
/>
<div className="keys">
{['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'].map((key) => (
<div key={key} className="key" onClick={() => handelKeyPress(key)}>
{key}
</div>
</fieldset>
</section>
))}
</div>
<button className="out-dial-call-btn" onClick={() => startOutdial(destination)}>
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.11-.27c1.12.45 2.33.69 3.58.69a1 1 0 011 1v3.5a1 1 0 01-1 1C10.29 21 3 13.71 3 4.5a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.24 2.46.69 3.58a1 1 0 01-.27 1.11l-2.2 2.2z" />
</svg>
</button>
</div>
);
};
Expand Down
82 changes: 61 additions & 21 deletions widgets-samples/cc/samples-cc-react-app/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,22 +187,22 @@ function App() {
<h1>Contact Center widgets in a react app</h1>
<div className="accessTokenTheme">
<input
type="text"
placeholder="Enter your access token"
value={accessToken}
onChange={(e) => setAccessToken(e.target.value)}
type="text"
placeholder="Enter your access token"
value={accessToken}
onChange={(e) => setAccessToken(e.target.value)}
/>
<Checkbox
checked={currentTheme === 'DARK'}
aria-label="theme checkbox"
id="theme-checkbox"
value={currentTheme}
label="Dark Theme"
// @ts-expect-error: TODO: https://github.com/momentum-design/momentum-design/pull/1118
onchange={() => {
setCurrentTheme(currentTheme === 'DARK' ? 'LIGHT' : 'DARK');
store.setCurrentTheme(currentTheme === 'DARK' ? 'LIGHT' : 'DARK');
}}
checked={currentTheme === 'DARK'}
aria-label="theme checkbox"
id="theme-checkbox"
value={currentTheme}
label="Dark Theme"
// @ts-expect-error: TODO: https://github.com/momentum-design/momentum-design/pull/1118
onchange={() => {
setCurrentTheme(currentTheme === 'DARK' ? 'LIGHT' : 'DARK');
store.setCurrentTheme(currentTheme === 'DARK' ? 'LIGHT' : 'DARK');
}}
/>
</div>
<div className="box">
Expand Down Expand Up @@ -299,9 +299,18 @@ function App() {
</div>
{isSdkReady && (
<>
<div className="station-login">
{selectedWidgets.stationLogin && <StationLogin onLogin={onLogin} onLogout={onLogout} />}
</div>
{selectedWidgets.stationLogin && (
<div className="box">
<section className="section-box">
<fieldset className="fieldset">
<legend className="legend-box">Station Login</legend>
<div className="station-login">
<StationLogin onLogin={onLogin} onLogout={onLogout} />
</div>
</fieldset>
</section>
</div>
)}
{(store.isAgentLoggedIn || isLoggedIn) && (
<>
{selectedWidgets.userState && (
Expand Down Expand Up @@ -329,16 +338,47 @@ function App() {
<section className="section-box">
<fieldset className="fieldset">
<legend className="legend-box">Call Control CAD</legend>
<CallControlCAD onHoldResume={onHoldResume} onEnd={onEnd} onWrapUp={onWrapUp} callControlClassName={"call-control-outer"} callControlConsultClassName={"call-control-consult-outer"} />
<CallControlCAD onHoldResume={onHoldResume} onEnd={onEnd} onWrapUp={onWrapUp} />
</fieldset>
</section>
</div>
)}
{selectedWidgets.incomingTask && <IncomingTask onAccepted={onAccepted} onDeclined={onDeclined} />}

{selectedWidgets.incomingTask && (
<>
<div className="box">
<section className="section-box">
<fieldset className="fieldset">
<legend className="legend-box">Incoming Tasks</legend>
<IncomingTask onAccepted={onAccepted} onDeclined={onDeclined} />
</fieldset>
</section>
</div>
</>
)}

{selectedWidgets.taskList && (
<TaskList onTaskAccepted={onTaskAccepted} onTaskDeclined={onTaskDeclined} />
<div className="box">
<section className="section-box">
<fieldset className="fieldset">
<legend className="legend-box">Task List</legend>
<TaskList onTaskAccepted={onTaskAccepted} onTaskDeclined={onTaskDeclined} />
</fieldset>
</section>
</div>
)}

{selectedWidgets.outdialCall && (
<div className="box">
<section className="section-box">
<fieldset className="fieldset">
<legend className="legend-box">Outdial</legend>
<OutdialCall />
<TaskList onTaskAccepted={onTaskAccepted} onTaskDeclined={onTaskDeclined} />
</fieldset>
</section>
</div>
)}
{selectedWidgets.outdialCall && <OutdialCall />}
</>
)}
</>
Expand Down