beem-component 2.1.25 → 2.1.27

package/src/lib/components/ChatComponents/ChatBody/CallLog.js

@@ -1,238 +0,0 @@
-// // CallPill.jsx
-// import React from 'react';
-// import styled from 'styled-components';
-// import PhoneIcon from '@mui/icons-material/Phone';
-
-// export const CallPill = ({ message, icon: Icon = PhoneIcon }) => {
-//   if (!message) return null; // safety check
-//   const formatDuration = (seconds) => {
-//     const mins = Math.floor(seconds / 60);
-//     const secs = seconds % 60;
-
-//     const minsPart = mins ? `${mins} min${mins > 1 ? 's' : ''}` : '';
-//     const secsPart = secs ? `${secs}s` : '';
-
-//     return [minsPart, secsPart].filter(Boolean).join(' ');
-//   };
-
-//   console.log(message);
-//   console.log('SSSSS');
-//   const label = `${message.type} • ${message.status}`;
-//   const duration = formatDuration(message.talk_duration);
-//   console.log(`${label} • ${duration}`);
-//   return (
-//     <SessionTimelineWrapper>
-//       <Container>
-//         <IconWrapper>
-//           <Icon fontSize="small" />
-//         </IconWrapper>
-//         <Text>
-//           {label} • {duration}
-//         </Text>
-//       </Container>
-//     </SessionTimelineWrapper>
-//   );
-// };
-// const SessionTimelineWrapper = styled.div`
-//   display: flex;
-//   flex-direction: row;
-//   justify-content: center;
-//   align-items: center;
-//   text-align: center;
-//   margin-bottom: 0.5rem;
-//   margin-top: 0.5rem;
-// `;
-// const Container = styled.div`
-//   display: flex;
-//   flex-direction: row;
-//   justify-content: center;
-//   align-items: center;
-//   text-align: center;
-//   /* display: inline-flex;
-//   justify-content: center;
-//   align-items: center; */
-//   gap: 6px;
-//   background: #f4f5f7;
-//   border-radius: 999px;
-//   padding: 6px 14px;
-//   font-size: 14px;
-//   color: #4a4a4a;
-//   border: 1px solid #e2e2e2;
-//   max-width: fit-content;
-//   white-space: nowrap;
-
-//   @media (max-width: 480px) {
-//     font-size: 12px;
-//     padding: 5px 10px;
-//   }
-// `;
-
-// const IconWrapper = styled.div`
-//   display: flex;
-//   align-items: center;
-// `;
-
-// const Text = styled.span`
-//   display: inline-block;
-//   overflow: hidden;
-//   text-overflow: ellipsis;
-// `;
-
-// // import PhoneIcon from '@mui/icons-material/Phone';
-
-// // export default {
-// //   title: 'Components/CallPill',
-// //   component: CallPill,
-// //   argTypes: {
-// //     icon: { control: false },
-// //   },
-// // };
-
-// // const Template = (args) => <CallPill {...args} />;
-
-// // export const SampleNoAnswer = Template.bind({});
-// // SampleNoAnswer.args = {
-// //   call: {
-// //     call_id: '1764099020.52',
-// //     time_start: '2025-11-25 22:30:20',
-// //     call_from: '004',
-// //     call_to: '0782270052',
-// //     call_duration: 2,
-// //     talk_duration: 0,
-// //     src_trunk_name: '',
-// //     dst_trunk_name: 'drtest3cx',
-// //     pin_code: '',
-// //     status: 'NO ANSWER',
-// //     type: 'Outbound',
-// //     recording: '',
-// //     did_number: '',
-// //     did_name: '',
-// //     agent_ring_time: 0,
-// //     uid: '202511252230209719F',
-// //     call_note_id: '20251125223020-33142',
-// //     enb_call_note: 16,
-// //   },
-// //   icon: PhoneIcon,
-// // };
-
-// // export const SampleAnswered = Template.bind({});
-// // SampleAnswered.args = {
-// //   call: {
-// //     call_id: '1764099020.52',
-// //     time_start: '2025-11-25 22:30:20',
-// //     call_from: '004',
-// //     call_to: '0782270052',
-// //     call_duration: 2,
-// //     talk_duration: 7,
-// //     src_trunk_name: '',
-// //     dst_trunk_name: 'drtest3cx',
-// //     pin_code: '',
-// //     status: 'ANSWERED',
-// //     type: 'Outbound',
-// //     recording: '',
-// //     did_number: '',
-// //     did_name: '',
-// //     agent_ring_time: 0,
-// //     uid: '202511252230209719F',
-// //     call_note_id: '20251125223020-33142',
-// //     enb_call_note: 16,
-// //   },
-// //   icon: PhoneIcon,
-// // };
-
-import React from 'react';
-import {
-  Phone as PhoneIcon,
-  PhoneMissedOutlined as MissedCallIcon,
-} from '@mui/icons-material';
-import styled from 'styled-components';
-import { format } from 'date-fns';
-
-const SessionTimelineWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-`;
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-
-  padding: 6px 9px;
-  border-radius: 14px;
-  font-size: 0.875rem;
-  border: 0.5px solid
-    ${({ status }) => (status === 'NO ANSWER' ? '#FEE2E2' : '#e0e0e0')};
-  background-color: ${({ status }) =>
-    status === 'NO ANSWER' ? '#FEF2F2' : '#f0f0f0'};
-  color: ${({ status }) => (status === 'NO ANSWER' ? 'red' : '#6A7282')};
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-`;
-
-const IconWrapper = styled.span`
-  display: flex;
-
-  margin-right: 0.575rem;
-
-  svg {
-    color: ${({ color }) => color || 'inherit'};
-    font-size: ${({ size }) => size || '0.875rem'};
-
-    @media (min-width: 45.7143rem) {
-      font-size: calc(${({ size }) => size || '0.875rem'} * 1.15);
-    }
-
-    @media (min-width: 73.1429rem) {
-      font-size: calc(${({ size }) => size || '0.875rem'} * 1.3);
-    }
-  }
-`;
-
-const Text = styled.span`
-  font-size: inherit;
-  font-weight: 400;
-`;
-
-export const CallPill = ({ message }) => {
-  if (!message) return null;
-
-  const label =
-    message.status === 'NO ANSWER' ? 'Missed call' : 'Answered call';
-
-  const formatDuration = (seconds) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-
-    const minsPart = mins ? `${mins} min${mins > 1 ? 's' : ''}` : '';
-    const secsPart = secs ? `${secs}s` : '';
-
-    return [minsPart, secsPart].filter(Boolean).join(' ');
-  };
-
-  const formattedTime = format(
-    new Date(message.time_start),
-    'M/d/yyyy hh:mm a'
-  );
-
-  const Icon = message.status === 'NO ANSWER' ? MissedCallIcon : PhoneIcon;
-  const duration =
-    message.status === 'NO ANSWER'
-      ? formattedTime
-      : formatDuration(message.talk_duration);
-
-  return (
-    <SessionTimelineWrapper>
-      <Container status={message.status}>
-        <IconWrapper>
-          <Icon />
-        </IconWrapper>
-        <Text>
-          {label} • {duration}
-        </Text>
-      </Container>
-    </SessionTimelineWrapper>
-  );
-};