Feature add transcrption 4 widgets 957

src/components/molecules/card/AnyWayCard.tsx

@@ -37,7 +37,7 @@ interface IProps {
   information?: string;
   organizationData?: OrgLogoData;
   subtitle?: string;
-  BoxText?:string;
+  transcription?:string;
 }
 
 const getSizeFactor = (options: CardSizeOptions | undefined): number => (options?.size ? options.size : DEFAULTE_SIZE);
@@ -79,7 +79,7 @@ const AnyWayCard: FC<IProps> = ({
   information,
   organizationData,
   subtitle,
-  BoxText
+  transcription
 }) => {
   const [element, setElement] = useState({});
   const [isOpen, setOpen] = useState(false);
@@ -107,7 +107,7 @@ const AnyWayCard: FC<IProps> = ({
   switch(widgateOpen){
 
     case 'TextBox':
-      Widget = <TextBox isOpen={isOpen} onClose={handleCardEditorClose} widgetName={widgetName} text={BoxText} />
+      Widget = <TextBox isOpen={isOpen} onClose={handleCardEditorClose} widgetName={widgetName} text={transcription} />
       break 
     case 'CardEditor':
       Widget = <CardEditor isOpen={isOpen} onClose={handleCardEditorClose} widgetName={widgetName} text={title} />
@@ -130,12 +130,12 @@ const AnyWayCard: FC<IProps> = ({
           </Tooltip>
         </Box>
       )}
-       <AnyWayButton className={classes.button} disableRipple={true} onClick={() =>{handleCardEditorOpen('TextBox')}}>
-        <TitleIcon />
-      </AnyWayButton>
+     {transcription?(
+      <AnyWayButton className={classes.button} disableRipple={true} onClick={() =>{handleCardEditorOpen('TextBox')}}>
+      <TitleIcon />
+    </AnyWayButton>):null}  
     </>
   );
-
   const refFn = (element: HTMLDivElement) => {
     setElement(element);
     if (getCardRef) {

src/components/organisms/CardEditorDialog.tsx

@@ -8,6 +8,7 @@ import { MetaTag, ErrorBoundary, Typography, Button, Slider } from 'components/a
 import widgetToImage from 'services/to-image.service';
 import { useTranslation } from 'react-i18next';
 import { blueVioletColor } from 'style';
+
 import {initEditorBarOptions, barsWidgetsLabels, barsWidgetsTitle, NUM_OF_BARS} from 'utils/barChart.utils';
 
 interface IProps {

src/components/organisms/TextBox.tsx

@@ -1,12 +1,13 @@
-import React from 'react'
+import React, { useState } from 'react'
 import DialogWithHeader from '../molecules/DialogWithHeader';
 import { AnyWayButton } from 'components/atoms/AnyWayButton';
 import { Box, makeStyles} from '@material-ui/core'
+import CopyImageWhite from 'assets/copyImageWhite.jpeg';
+import CopyImageGrey from 'assets/copyImageGrey.jpeg';
 import { useTranslation } from 'react-i18next';
 import { Typography } from 'components/atoms';
 import { transparent } from 'style';
 
-
 interface IProps {
     isOpen: boolean;
     onClose: () => void;
@@ -15,9 +16,6 @@ interface IProps {
 }
 const TextBox: React.FC<IProps> = ({ isOpen,text,onClose}) => {
 
-    console.log('transaction ',text);
-
-
     const useStyles = makeStyles((theme) => ({
         text: {
             position: 'relative', // for meta tags
@@ -40,19 +38,33 @@ const TextBox: React.FC<IProps> = ({ isOpen,text,onClose}) => {
               backgroundColor: transparent,
             },
           },
-        img:{
-            height:'100px',
-            width:'100px'
-        }
-
 
+        copyImg:{
+            height:'70px',
+            width:'70px', 
+        },
+        copyMessage:{
+            color:'blue'
+        }
     }));
 
     const { t } = useTranslation();
+
+    const [copyToClickBoard,SetCopyToClickBoard] = useState(false)    
+    const [copyMessage,SetCopyMessage] = useState('')
+
     const onCloseInitValues = () => {
         onClose();
+        SetCopyMessage('')
+        SetCopyToClickBoard(false)
     }
 
+    const copyHandler = () =>{
+        navigator.clipboard.writeText(text?text:'')
+        SetCopyToClickBoard(true)
+        SetCopyMessage('הטקסט העותק ללוח')
+    }
+
     const classes = useStyles();
 
     return (
@@ -64,8 +76,13 @@ const TextBox: React.FC<IProps> = ({ isOpen,text,onClose}) => {
                     </Typography.Body1>
                 </Box>
                 <Box>
-                    <AnyWayButton onClick={() =>{navigator.clipboard.writeText(text?text:'asdsadasd')}} className={classes.button} >
-                        <img className={classes.img} src="https://play-lh.googleusercontent.com/pcns8ys8bh1GJaCc0K2vSMSqJ_1cjWWRECAoXYgFN5fDJxAM5ZBHWuJqFRnMR5NVRlJp" alt="" />
+                    <AnyWayButton onClick={copyHandler} className={classes.button}>
+                        <Box>
+                            <img className={classes.copyImg} src={copyToClickBoard?CopyImageGrey:CopyImageWhite} alt="" />
+                            <Box className={classes.copyMessage}>
+                            <Typography.Body2>{copyMessage}</Typography.Body2>
+                            </Box>
+                        </Box>
                     </AnyWayButton>
                 </Box>
             </Box>

src/components/organisms/WidgetsTemplate.tsx

@@ -40,7 +40,7 @@ const WidgetsTemplate: FC = () => {
         <AnyWayCard
           organizationData={organizationData}
           information={widget.meta.information}
-          BoxText = {widget.data?.text?.transcription}
+          transcription = {widget.data?.text?.transcription}
           widgetName={widget.name}
           title={widget.data?.text?.title}
           subtitle={widget.data?.text?.subtitle}