Skip to content

Commit

Permalink
refactor: move customer info and order history to the side
Browse files Browse the repository at this point in the history
  • Loading branch information
@psanders
psanders committed Nov 25, 2023
1 parent bdb40ec commit b0675be
Show file tree
Hide file tree
Showing 8 changed files with 260 additions and 167 deletions.
2 changes: 1 addition & 1 deletion mods/apiserver/src/customers/getOrdersByCustomerId.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,6 @@ export async function getOrdersByCustomerId(
});
} catch (err) {
logger.warn("error getting customer by id", { err });
return null;
return [];
}
}
1 change: 1 addition & 0 deletions mods/frontoffice/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"@goodtok/common": "^0.1.2",
"@goodtok/sdk": "^0.1.4",
"@mui/icons-material": "^5.14.15",
"@mui/lab": "^5.0.0-alpha.153",
"@mui/material": "^5.14.15",
"formik": "^2.4.5",
"jwt-decode": "^4.0.0",
Expand Down
4 changes: 3 additions & 1 deletion mods/frontoffice/src/components/button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ type ButtonProps = {
variant?: "contained" | "outlined";
color?: "primary" | "secondary";
type?: "button" | "submit";
onClick?: () => void;
onClick?: (
event: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined
) => void;
disabled?: boolean;
sx?: any;
};
Expand Down
32 changes: 29 additions & 3 deletions mods/frontoffice/src/components/chat/ChatPage.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,22 +78,48 @@ export default meta;
type Story = StoryObj<typeof meta>;

/**
* Example of chat page with no active call and no orders.
* Example of chat page with no active call and with orders.
*/
export const ChatPageExample: Story = {
args: {
workspaceId: "1",
userName: "Jane Doe",
avatar: "https://mui.com/static/images/avatar/3.jpg",
isAuthenticated: true,
isActiveCall: false,
isAdmin: true,
isLocalCameraMuted: false,
isLocalMicrophoneMuted: false,
customerProfile: {
name: "Peters Doe",
email: "peters@example.com",
phone: "(785)317-9945",
birthday: "1980-01-01",
note: "This is a note"
note: "Here goes a short note about that the user can use to build rapport with the customer"
},
orders: []
orders: [
{
id: "1001",
name: "First item in the order",
total: 100,
imageUrl: "https://picsum.photos/200",
createdAt: "2021-10-01T00:00:00.000Z"
},
{
id: "1001",
name: "Second item in the order",
total: 200,
imageUrl: "https://picsum.photos/200",
createdAt: "2021-10-01T00:00:00.000Z"
},
{
id: "2001",
name: "And item on anther order",
total: 300,
imageUrl: "https://picsum.photos/200",
createdAt: "2021-10-01T00:00:00.000Z"
}
]
}
};

Expand Down
38 changes: 23 additions & 15 deletions mods/frontoffice/src/components/chat/ChatPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,25 +106,33 @@ export const ChatPage: React.FC<ChatPageProps> = ({
<StyledTitle sx={{ mb: 2 }}>Live Session</StyledTitle>

{!isActiveCall && (
<StartCall
onCustomerDequeue={onCustomerDequeue}
onStartCall={onStartCall}
/>
<Box sx={{ display: "flex", justifyContent: "center" }}>
<StartCall
onCustomerDequeue={onCustomerDequeue}
onStartCall={onStartCall}
/>
<Box>
<CustomerInfo profile={customerProfile} orders={orders} />
</Box>
</Box>
)}

{isActiveCall && (
<Video
isLocalCameraMuted={isLocalCameraMuted}
isLocalMicrophoneMuted={isLocalMicrophoneMuted}
onHangup={onHangup}
onMuteCamera={onMuteCamera}
onMuteMicrophone={onMuteMicrophone}
ref={videoRefs}
isOpen={true}
/>
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Video
isLocalCameraMuted={isLocalCameraMuted}
isLocalMicrophoneMuted={isLocalMicrophoneMuted}
onHangup={onHangup}
onMuteCamera={onMuteCamera}
onMuteMicrophone={onMuteMicrophone}
ref={videoRefs}
isOpen={true}
/>
<Box>
<CustomerInfo profile={customerProfile} orders={orders} />
</Box>
</Box>
)}

<CustomerInfo profile={customerProfile} orders={orders} />
</Box>
</Box>
);
Expand Down
184 changes: 87 additions & 97 deletions mods/frontoffice/src/components/chat/customer/CustomerInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,122 +16,112 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
Box,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow
} from "@mui/material";
import { Box, CardActions, CardContent, Typography } from "@mui/material";
import { Button } from "../../button/Button";
import { CustomerProfile, OrderItem } from "./types";
import { StyledTab, StyledTabs } from "./CustomerStyles";
import { StyledTitle } from "../ChatPageStyles";
import { StyledLink } from "./CustomerStyles";
import Timeline from "@mui/lab/Timeline";
import TimelineItem from "@mui/lab/TimelineItem";
import TimelineSeparator from "@mui/lab/TimelineSeparator";
import TimelineConnector from "@mui/lab/TimelineConnector";
import TimelineContent from "@mui/lab/TimelineContent";
import TimelineDot from "@mui/lab/TimelineDot";
import React from "react";
import moment from "moment";

type CustomerInfoProps = {
profile: CustomerProfile;
orders: OrderItem[];
};

type OrderHistoryProps = {
orders: OrderItem[];
};

const OrderHistory: React.FC<OrderHistoryProps> = ({ orders }) => {
return (
<Timeline position="alternate">
{orders.map((order) => (
<TimelineItem>
<TimelineSeparator>
<TimelineDot />
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>
<Typography variant="body2" color="text.secondary">
{order.name} - ${order.total}
</Typography>
<img src={order.imageUrl} alt={order.title} width={50} />
</TimelineContent>
</TimelineItem>
))}
</Timeline>
);
};

export const CustomerInfo: React.FC<CustomerInfoProps> = ({
profile,
orders,
...props
}) => {
const [value, setValue] = React.useState(0);
const [showOrders, setShowOrders] = React.useState(false);

const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setValue(newValue);
const handleToggle = () => {
setShowOrders(!showOrders);
};

return (
<Box {...props}>
<StyledTabs
sx={{ mt: 3 }}
onChange={handleChange}
value={value}
aria-label="basic tabs example"
>
<StyledTab label="Customer Info" />
<StyledTab label="Order History" />
</StyledTabs>
{value === 0 && (
<TableContainer component={Paper}>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Fullname</TableCell>
<TableCell>Email Address</TableCell>
<TableCell>Phone Number</TableCell>
{/* <TableCell>Birthday</TableCell> */}
<TableCell>Note</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow
key={profile?.email}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
<Box sx={{ backgroundColor: "white", width: 300, ml: 2, p: 1 }}>
{!showOrders ? (
<>
<CardContent>
<Typography
sx={{ fontSize: 14 }}
color="text.secondary"
gutterBottom
>
Birthday {profile.birthday}
</Typography>
<Typography variant="h5" component="div">
{profile.name}
</Typography>
<Typography sx={{ mb: 1.5 }} color="text.secondary">
{profile.email}
<br />
{profile.phone}
</Typography>
<Typography variant="body2">
{profile.note}
<br />
</Typography>
</CardContent>
<CardActions>
<Button
color="secondary"
variant="outlined"
onClick={handleToggle}
>
<TableCell
component="th"
scope="row"
sx={{ verticalAlign: "top" }}
>
{profile?.name}
</TableCell>
<TableCell sx={{ verticalAlign: "top" }}>
{profile?.email}
</TableCell>
<TableCell sx={{ verticalAlign: "top" }}>
{profile?.phone}
</TableCell>
{/* <TableCell>{profile?.birthday}</TableCell> */}
<TableCell sx={{ verticalAlign: "top" }}>
<Box sx={{ maxWidth: 400 }}>{profile?.note}</Box>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
)}
{value === 1 && (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Date Purchased</TableCell>
<TableCell>Item ID</TableCell>
<TableCell>Item Name</TableCell>
<TableCell>Price</TableCell>
<TableCell align="center">Photo of Item</TableCell>
</TableRow>
</TableHead>
<TableBody>
{orders.map((row) => (
<TableRow
key={row.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell component="th" scope="row">
{moment(row.createdAt).format("MM/YYYY")}
</TableCell>
<TableCell>{row.id}</TableCell>
<TableCell>{row.name}</TableCell>
<TableCell>${row.total}</TableCell>
<TableCell align="center">
{row.imageUrl && (
<img src={row.imageUrl} style={{ width: 40 }} />
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
Order history
</Button>
</CardActions>
</>
) : (
<Box sx={{ height: 538 }}>
<StyledLink href="#" onClick={handleToggle}>
Back
</StyledLink>
<StyledTitle>Order history</StyledTitle>
{orders.length === 0 && (
<Typography variant="body2">
No orders yet
<br />
</Typography>
)}
{orders.length > 0 && <OrderHistory orders={orders} />}
</Box>
)}
</Box>
</Box>
);
};
40 changes: 17 additions & 23 deletions mods/frontoffice/src/components/chat/customer/CustomerStyles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,30 +16,24 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Tab, Tabs } from "@mui/material";
import { styled } from "@mui/material/styles";
import "@fontsource/poppins/500.css";
import "@fontsource/poppins/400.css";
import Link from "@mui/material/Link";

export const StyledTab = styled(Tab)({
color: "#000000",
fontFamily: "Poppins",
fontSize: 14,
fontStyle: "normal",
fontWeight: 400,
lineHeight: "28px",
letterSpacing: "0.5px",

textTransform: "none",
"&.Mui-selected": {
color: "#000000",
fontWeight: 500,
textTransform: "none"
}
});
import "@fontsource/open-sans/600.css";

export const StyledTabs = styled(Tabs)({
"& .MuiTabs-indicator": {
backgroundColor: "orange"
}
export const StyledLink = styled(Link)({
color: "var(--tertiary-dark, #27150C)",
textAlign: "center",
fontFeatureSettings: "'clig' off, 'liga' off",
fontFamily: "open sans",
fontSize: "14px",
fontStyle: "normal",
fontWeight: 600,
lineHeight: "24px",
letterSpacing: "-0.176px",
textDecoration: "underline",
"&:hover": {
textDecorationLine: "underline"
},
cursor: "pointer"
});
Loading

0 comments on commit b0675be

Please sign in to comment.