Moving styling of transfer bot back to component and
take summary string
This commit is contained in:
parent
e3979c19fb
commit
8c7658e090
@ -1,22 +1,110 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
summary: { type: String, default: "<p>Summary Should go here</p>" },
|
||||
summary: { type: String, default: "Summary not available" },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<iframe
|
||||
class="transferSummary"
|
||||
:srcdoc="summary"
|
||||
scrolling="no"
|
||||
onload="resizeIframe(this)"
|
||||
></iframe>
|
||||
<div class="transferSummaryContainer">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<svg
|
||||
id=" Layer_1"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 98 89"
|
||||
xml:space="preserve"
|
||||
width="22"
|
||||
height="22"
|
||||
fill="none"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
class="st0"
|
||||
d="M78.8,85H19.3c-3.1,0-5.7-2.5-5.7-5.7V33.7c0-3.1,2.5-5.7,5.7-5.7h59.5c3.1,0,5.7,2.5,5.7,5.7v45.6
|
||||
C84.5,82.5,81.9,85,78.8,85z"
|
||||
/>
|
||||
<g>
|
||||
<circle class="st1" cx="35.7" cy="51.9" r="6.7" />
|
||||
<circle class="st1" cx="62.1" cy="51.9" r="6.7" />
|
||||
</g>
|
||||
<circle class="st0" cx="49" cy="9.1" r="5.1" />
|
||||
<line class="st0" x1="49" y1="28" x2="49" y2="14.1" />
|
||||
<path
|
||||
class="st2"
|
||||
d="M37.9,74.8c0,0,3.8,0,11.1,0s11.1-2.5,11.1-2.5"
|
||||
/>
|
||||
<path
|
||||
class="st0"
|
||||
d="M70.5,64.4h-43c-3.4,0-6.2-2.8-6.2-6.2V45.6c0-3.4,2.8-6.2,6.2-6.2h43c3.4,0,6.2,2.8,6.2,6.2v12.7
|
||||
C76.7,61.7,73.9,64.4,70.5,64.4z"
|
||||
/>
|
||||
<path
|
||||
class="st0"
|
||||
d="M13.6,64.4h-2.7c-3.4,0-6.2-2.8-6.2-6.2V45.6c0-3.4,2.8-6.2,6.2-6.2h2.7"
|
||||
/>
|
||||
<path
|
||||
class="st0"
|
||||
d="M84.5,39.4h2.7c3.4,0,6.2,2.8,6.2,6.2v12.7c0,3.4-2.8,6.2-6.2,6.2h-2.7"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</td>
|
||||
<td style="font-weight: bold">Transfer Bot</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>{{ summary }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
iframe.transferSummary {
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.transferSummaryContainer {
|
||||
align-items: flex-start;
|
||||
border: 2px solid #45b408;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
font-family: OpenSans, Ariel, sans-serif;
|
||||
font-size: 11px;
|
||||
gap: 8px;
|
||||
margin: 8px;
|
||||
padding: 11px 16px 11px 12px;
|
||||
background: var(--button-emphasized-regular, #0c874b);
|
||||
}
|
||||
|
||||
.st0 {
|
||||
fill: none;
|
||||
stroke: white;
|
||||
stroke-width: 3;
|
||||
stroke-linejoin: round;
|
||||
stroke-miterlimit: 10;
|
||||
}
|
||||
|
||||
.st1 {
|
||||
fill: none;
|
||||
stroke: white;
|
||||
stroke-width: 2.6179;
|
||||
stroke-linejoin: round;
|
||||
stroke-miterlimit: 10;
|
||||
}
|
||||
|
||||
.st2 {
|
||||
fill: none;
|
||||
stroke: white;
|
||||
stroke-width: 3;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-miterlimit: 10;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin: 8px;
|
||||
enable-background: new 0 0 98 89;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,26 +1,5 @@
|
||||
<script setup>
|
||||
const transferSummaryHTML = `<div style="font-family: OpenSans, Ariel, sans-serif; font-size: 11px; color: white; display: flex;padding: 11px 16px 11px 12px;align-items: flex-start;gap: 8px;border-radius: 5px;background: var(--button-emphasized-regular, #0C874B);">
|
||||
<table>
|
||||
<tr>
|
||||
<td><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<g clip-path="url(#clip0_6923_87016)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 4.5C4.5 4.775 4.725 5 5 5C5.275 5 5.5 4.775 5.5 4.5C5.5 4.225 5.275 4 5 4C4.725 4 4.5 4.225 4.5 4.5ZM4.5 8.5C4.5 8.775 4.725 9 5 9C5.275 9 5.5 8.775 5.5 8.5C5.5 8.225 5.275 8 5 8C4.725 8 4.5 8.225 4.5 8.5ZM5 0C3.62 0 2.5 1.12 2.5 2.5C2.5 2.705 2.53 2.9 2.58 3.09C1.385 3.39 0.5 4.465 0.5 5.75C0.5 6.68 0.965 7.5 1.67 8C0.96 8.5 0.5 9.32 0.5 10.25C0.5 11.535 1.385 12.61 2.58 12.91C2.535 13.1 2.5 13.295 2.5 13.5C2.5 14.88 3.62 16 5 16C6.38 16 7.5 14.88 7.5 13.5V9H6.145C5.95 9.44 5.515 9.75 5 9.75C4.31 9.75 3.75 9.19 3.75 8.5C3.75 7.81 4.31 7.25 5 7.25C5.51 7.25 5.95 7.56 6.145 8H7.5V5H6.145C5.95 5.44 5.515 5.75 5 5.75C4.31 5.75 3.75 5.19 3.75 4.5C3.75 3.81 4.31 3.25 5 3.25C5.51 3.25 5.95 3.56 6.145 4H7.5V2.5C7.5 1.12 6.38 0 5 0ZM14.33 8C15.04 7.5 15.5 6.68 15.5 5.75C15.5 4.465 14.615 3.39 13.42 3.09C13.465 2.9 13.5 2.705 13.5 2.5C13.5 1.12 12.38 0 11 0C9.62 0 8.5 1.12 8.5 2.5V7H9.855C10.05 6.56 10.485 6.25 11 6.25C11.69 6.25 12.25 6.81 12.25 7.5C12.25 8.19 11.69 8.75 11 8.75C10.49 8.75 10.05 8.44 9.855 8H8.5V11H9.855C10.05 10.56 10.485 10.25 11 10.25C11.69 10.25 12.25 10.81 12.25 11.5C12.25 12.19 11.69 12.75 11 12.75C10.49 12.75 10.05 12.44 9.855 12H8.5V13.5C8.5 14.88 9.62 16 11 16C12.38 16 13.5 14.88 13.5 13.5C13.5 13.295 13.47 13.1 13.42 12.91C14.615 12.61 15.5 11.535 15.5 10.25C15.5 9.32 15.035 8.5 14.33 8ZM11.5 7.5C11.5 7.225 11.275 7 11 7C10.725 7 10.5 7.225 10.5 7.5C10.5 7.775 10.725 8 11 8C11.275 8 11.5 7.775 11.5 7.5ZM11.5 11.5C11.5 11.225 11.275 11 11 11C10.725 11 10.5 11.225 10.5 11.5C10.5 11.775 10.725 12 11 12C11.275 12 11.5 11.775 11.5 11.5Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_6923_87016">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg></td>
|
||||
<td style="font-weight: bold;">Da Vinci Summary</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Janice Jones from Acme.com authenticated using onetime passcode authentication. They successfully changed the quantity on latest order from 10 to 12.
|
||||
She wants to dicuss with someone to alter payment arrangements payment due date. Transferring to queue.</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>`;
|
||||
const transferSummaryHTML = `Janice Jones from Acme.com authenticated using onetime passcode authentication. They successfully changed the quantity on latest order from 10 to 12. She wants to dicuss with someone to alter payment arrangements payment due date. Transferring to queue.`;
|
||||
|
||||
const scriptElementName = "script";
|
||||
const integrationCardDoc = `<html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user