Skip to content
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

Changed local host to hosted URL #37

Closed
wants to merge 9 commits into from
Closed

Changed local host to hosted URL #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3e6c60b
Changed local host to hosted
3milyfz Nov 30, 2023
ec99390
Setup EmailJS for email transcript
lucieyang1 Nov 25, 2023
4bbf541
connected email transcript to backend
lucieyang1 Nov 26, 2023
04acb52
Created descriptive error message
lucieyang1 Nov 27, 2023
7dade9f
update package.json and package-lock.json with emailjs
lucieyang1 Nov 27, 2023
68db6bf
updated endpoints, added date parameter
lucieyang1 Nov 28, 2023
8018d4c
changed alerts to mui alerts
lucieyang1 Nov 30, 2023
db82887
fixed endsession link
lucieyang1 Nov 30, 2023
ce715cd
Changed local host to hosted
3milyfz Nov 30, 2023
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
23,451 changes: 17,048 additions & 6,403 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.14.19",
"@emailjs/browser": "^3.11.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.14.19",
Expand Down
147 changes: 147 additions & 0 deletions src/components/EndSession.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
import React, {useRef, useEffect } from "react";
import styled from 'styled-components';
import emailjs from '@emailjs/browser';
import axios from 'axios';

const Container = styled.div`
background-image: linear-gradient(to bottom right, #0a8e3d, #9fdb3f);
background-size: contain;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
`;

const Logo = styled.img`
height: 270px;
width: 550px;
`;

const CodeContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding: 30px 0px 30px 30px;
height: 200px;
width: 850px;
background-color: #f8f8f8b2;
border-radius: 50px;
box-shadow: 0px 4px 10px #00000040;
`;

const Text = styled.h3`
height: 25px;
width: 724px;
color: #000000;
font-size: 40px;
font-weight: 400;
line-height: normal;
text-align: center;
position: relative;
margin-bottom: 30px;
`;

const InputSection = styled.div`
height: 70px;
width: 724px;
display: flex;
flex-direction: row;

@media (max-width: 768px) {
/* Add styles for smaller screens here */
/* For example, reduce the width or change the flex-direction */
width: 90%;
flex-direction: column;
align-items: center;
gap: 16px;
}
`;

const Input = styled.input`
border-radius: 30px 0px 0px 30px;
border: 0px solid;
width: 80%;
height: 50px;
padding: 8px 24px;
line-height: 20px;
font-size: x-large;
font-family: 'League Spartan', sans-serif;
::placeholder {
color: #5e5e5ec4;
font-size: 18px;
}
`;

const Button = styled.button`
height: 50px;
width: 50%;
font-family: 'League Spartan', sans-serif;
background-color: #0b9f43;
border-radius: 0px 30px 30px 0px;
position: relative;
color: white;
font-size: x-large;
border: 0px solid;
cursor: pointer;
&:hover {
background-color: #076a2d;
}
`;

function EndSession() {
const emailRef = useRef();
const sessionCode = sessionStorage.getItem("sessionCode");

useEffect(() => emailjs.init("OScF2lHq5ESl_o9lU"), []);
const sendEmail = async (e) => {
e.preventDefault();
const serviceId = "service_2ndgu8t";
const templateId = "template_feo851p";

let transcriptUrl = 'https://connect.greenplant-1b2a73a7.eastus.azurecontainerapps.io/email/transcript/' + sessionCode
let dateUrl = 'https://connect.greenplant-1b2a73a7.eastus.azurecontainerapps.io/email/date/' + sessionCode

try {
const response = await axios.get(transcriptUrl);
console.log(response);

if (!response || !response.data) {
throw new Error('Invalid response from the server');
}

const transcript = response.data;
console.log('Transcript:', transcript);

const dateResponse = await axios.get(dateUrl);
const date = dateResponse.data;

await emailjs.send(serviceId, templateId, {
recipient: emailRef.current.value,
message: transcript,
date: date
});
// Clear the input after the email is successfully sent
emailRef.current.value = "";
alert("Email successfully sent. Check inbox.");
} catch (error) {
alert("Oops! Something went wrong while trying to send the email. Please make sure there are messages in the conversation before sending.");
console.error('Error fetching transcript or sending email:', error.message);
}
};
return(
<Container>
<Logo src="./img/callhubLogo-cropped.svg" alt="Callhub Logo" />
<CodeContainer>
<Text>Your session has now ended.</Text>
<InputSection>
<Input placeholder="Email Address" ref={emailRef} />
<Button onClick={sendEmail}>Get Email Transcript</Button>
</InputSection>
</CodeContainer>
</Container>
);
}

export default EndSession;
176 changes: 88 additions & 88 deletions src/components/end-session-component/EndSession-styles.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,88 @@
import styled from 'styled-components'

export const Container = styled.div`
background-image: linear-gradient(to bottom right, #0a8e3d, #9fdb3f);
background-size: contain;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
`;

export const Logo = styled.img`
height: 270px;
width: 550px;
`;

export const CodeContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding: 30px 0px 30px 30px;
height: 200px;
width: 850px;
background-color: #f8f8f8b2;
border-radius: 50px;
box-shadow: 0px 4px 10px #00000040;
`;

export const Text = styled.h3`
height: 25px;
width: 724px;
color: #000000;
font-size: 40px;
font-weight: 400;
line-height: normal;
text-align: center;
position: relative;
margin-bottom: 30px;
`;

export const InputSection = styled.div`
height: 70px;
width: 724px;
display: flex;
flex-direction: row;

@media (max-width: 768px) {
/* Add styles for smaller screens here */
/* For example, reduce the width or change the flex-direction */
width: 90%;
flex-direction: column;
align-items: center;
gap: 16px;
}
`;

export const Input = styled.input`
border-radius: 30px 0px 0px 30px;
border: 0px solid;
width: 80%;
height: 50px;
padding: 8px 24px;
line-height: 20px;
font-size: x-large;
font-family: 'League Spartan', sans-serif;
::placeholder {
color: #5e5e5ec4;
font-size: 18px;
}
`;

export const Button = styled.button`
height: 50px;
width: 50%;
font-family: 'League Spartan', sans-serif;
background-color: #0b9f43;
border-radius: 0px 30px 30px 0px;
position: relative;
color: white;
font-size: x-large;
border: 0px solid;
cursor: pointer;
&:hover {
background-color: #076a2d;
}
`;
import styled from 'styled-components'
export const Container = styled.div`
background-image: linear-gradient(to bottom right, #0a8e3d, #9fdb3f);
background-size: contain;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
`;
export const Logo = styled.img`
height: 270px;
width: 550px;
`;
export const CodeContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding: 30px 0px 30px 30px;
height: 200px;
width: 850px;
background-color: #f8f8f8b2;
border-radius: 50px;
box-shadow: 0px 4px 10px #00000040;
`;
export const Text = styled.h3`
height: 25px;
width: 724px;
color: #000000;
font-size: 40px;
font-weight: 400;
line-height: normal;
text-align: center;
position: relative;
margin-bottom: 30px;
`;
export const InputSection = styled.div`
height: 70px;
width: 724px;
display: flex;
flex-direction: row;
@media (max-width: 768px) {
/* Add styles for smaller screens here */
/* For example, reduce the width or change the flex-direction */
width: 90%;
flex-direction: column;
align-items: center;
gap: 16px;
}
`;
export const Input = styled.input`
border-radius: 30px 0px 0px 30px;
border: 0px solid;
width: 80%;
height: 50px;
padding: 8px 24px;
line-height: 20px;
font-size: x-large;
font-family: 'League Spartan', sans-serif;
::placeholder {
color: #5e5e5ec4;
font-size: 18px;
}
`;
export const Button = styled.button`
height: 50px;
width: 50%;
font-family: 'League Spartan', sans-serif;
background-color: #0b9f43;
border-radius: 0px 30px 30px 0px;
position: relative;
color: white;
font-size: x-large;
border: 0px solid;
cursor: pointer;
&:hover {
background-color: #076a2d;
}
`;
Loading