cal.pub0.org/packages/ui/v2/modules/tips/Tips.tsx

108 lines
3.5 KiB
TypeScript
Raw Normal View History

V2 Main (#3549) * Fix breadcrumb colors * HorizontalTabs * Team List Item WIP * Horizontal Tabs * Cards * Remove team list item WIP * Login Page * Add welcome back i118n * EventType page work * Update EventType Icons * WIP Availability * Horizontal Tab Work * Add build command for in root * Update build DIr/command * Add Edit Button + change buttons to v2 * Availablitiy page * Fix IPAD * Make mobile look a little nicer * WIP bookingshell * Remove list items from breaking build * Mian bulk of Booking Page. * Few updates to components * Fix chormatic feedback * Fix banner * Fix Empty Screen * Text area + embded window fixes * Semi fix avatar * Troubleshoot container + Active on count * Improve mobile * NITS * Fix padding on input * Fix icons * Starting to move event types settings to tabs * Begin migration to single page form * Single page tabs * Limits Page * Advanced tab * Add RHF to dependancies * Most of advanced tab * Solved RHF mismtach * Build fixes * RHF conditionals fixes * Improved legibility * Major refactor/organisation into optional V2 UI * Portal EditLocationModal * Fix dialoug form * Update imports * Auto Animate + custom inputs WIP * Custom Inputs * WIP Apps * Fixing stories imports * Stripe app * Remove duplicate dialog * Remove duplicate dialog * Fix embed URL * Fix app toggles + number of active apps * Fix container padding on disabledBorder prop * Removes strict * EventType Team page WIP * Fix embed * NIT * Add Darkmode gray color * V2 Shell WIP * Fix headings on shell V2 * Fix mobile layout with V2 shell * V2 create event type button * Checked Team Select * Hidden to happen on save - not on toggle * Team Attendee Select animation * Fix scheduling type and remove multi select label * Fix overflow on teams url * Even Type move order handles * Fix Embed TS errors * Fix TS errors * Fix Eslint errors * Fix TS errors for UI * Fix ESLINT error * added SidebarCard for promo to v2 and storybook (#3906) Co-authored-by: Julian Benegas <julianbenegas99@gmail.com> Co-authored-by: Alan <alannnc@gmail.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> * Tooltip Provider - Wrapper due to dep upgrade * public event type list darkmode * V2 Color changes to public booking * Remove unused component * Fix typecheck * Removed extra buttons on create ET dialog * ET edit page refactoring * Avoids form wrapping the whole Shell * Nitpicks Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Julian Benegas <julianbenegas99@gmail.com> Co-authored-by: Alan <alannnc@gmail.com>
2022-08-24 20:18:42 +00:00
import autoAnimate from "@formkit/auto-animate";
import { useEffect, useState, useRef } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { localStorage } from "@calcom/lib/webstorage";
import Card from "../../core/Card";
const tips = [
{
id: 1,
thumbnailUrl: "https://img.youtube.com/vi/60HJt8DOVNo/0.jpg",
mediaLink: "https://www.youtube.com/watch?v=60HJt8DOVNo",
title: "Dynamic booking links",
description: "Booking link that allows people to quickly schedule meetings.",
href: "https://cal.com/blog/cal-v-1-9",
},
{
id: 2,
thumbnailUrl: "https://img.youtube.com/vi/EAc46SPL6iA/0.jpg",
mediaLink: "https://youtu.be/EAc46SPL6iA",
title: "How to set up Teams",
description: "Learn how to use round-robin and collective events.",
href: "https://docs.cal.com/deep-dives/event-types",
},
{
id: 3,
thumbnailUrl: "https://img.youtube.com/vi/c7ZKFuLy1fg/0.jpg",
mediaLink: "https://youtu.be/c7ZKFuLy1fg",
title: "Routing Forms, Workflows",
description: "Ask screening questions of potential bookers to connect them with the right person",
href: "https://cal.com/blog/cal-v-1-8",
},
];
export default function Tips() {
const animationRef = useRef(null);
useEffect(() => {
animationRef.current && autoAnimate(animationRef.current, { duration: 250, easing: "ease-out" });
}, [animationRef]);
const { t } = useLocale();
const [list, setList] = useState<typeof tips>([]);
const handleRemoveItem = (id: number) => {
setList((currentItems) => {
const items = localStorage.getItem("removedTipsIds") || "";
const itemToRemoveIndex = currentItems.findIndex((item) => item.id === id);
localStorage.setItem(
"removedTipsIds",
`${currentItems[itemToRemoveIndex].id.toString()}${items.length > 0 ? `,${items.split(",")}` : ""}`
);
currentItems.splice(itemToRemoveIndex, 1);
return [...currentItems];
});
};
useEffect(() => {
const reversedTips = tips.slice(0).reverse();
const removedTipsString = localStorage.getItem("removedTipsIds") || "";
const removedTipsIds = removedTipsString.split(",").map((id) => parseInt(id, 10));
const filteredTips = reversedTips.filter((tip) => removedTipsIds.indexOf(tip.id) === -1);
setList(() => [...filteredTips]);
}, []);
const baseOriginalList = list.slice(0).reverse();
return (
<div
className="mb-4 hidden lg:grid"
ref={animationRef}
style={{
gridTemplateColumns: "1fr",
}}>
2022-10-14 19:38:05 +00:00
{list.map((tip) => {
V2 Main (#3549) * Fix breadcrumb colors * HorizontalTabs * Team List Item WIP * Horizontal Tabs * Cards * Remove team list item WIP * Login Page * Add welcome back i118n * EventType page work * Update EventType Icons * WIP Availability * Horizontal Tab Work * Add build command for in root * Update build DIr/command * Add Edit Button + change buttons to v2 * Availablitiy page * Fix IPAD * Make mobile look a little nicer * WIP bookingshell * Remove list items from breaking build * Mian bulk of Booking Page. * Few updates to components * Fix chormatic feedback * Fix banner * Fix Empty Screen * Text area + embded window fixes * Semi fix avatar * Troubleshoot container + Active on count * Improve mobile * NITS * Fix padding on input * Fix icons * Starting to move event types settings to tabs * Begin migration to single page form * Single page tabs * Limits Page * Advanced tab * Add RHF to dependancies * Most of advanced tab * Solved RHF mismtach * Build fixes * RHF conditionals fixes * Improved legibility * Major refactor/organisation into optional V2 UI * Portal EditLocationModal * Fix dialoug form * Update imports * Auto Animate + custom inputs WIP * Custom Inputs * WIP Apps * Fixing stories imports * Stripe app * Remove duplicate dialog * Remove duplicate dialog * Fix embed URL * Fix app toggles + number of active apps * Fix container padding on disabledBorder prop * Removes strict * EventType Team page WIP * Fix embed * NIT * Add Darkmode gray color * V2 Shell WIP * Fix headings on shell V2 * Fix mobile layout with V2 shell * V2 create event type button * Checked Team Select * Hidden to happen on save - not on toggle * Team Attendee Select animation * Fix scheduling type and remove multi select label * Fix overflow on teams url * Even Type move order handles * Fix Embed TS errors * Fix TS errors * Fix Eslint errors * Fix TS errors for UI * Fix ESLINT error * added SidebarCard for promo to v2 and storybook (#3906) Co-authored-by: Julian Benegas <julianbenegas99@gmail.com> Co-authored-by: Alan <alannnc@gmail.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> * Tooltip Provider - Wrapper due to dep upgrade * public event type list darkmode * V2 Color changes to public booking * Remove unused component * Fix typecheck * Removed extra buttons on create ET dialog * ET edit page refactoring * Avoids form wrapping the whole Shell * Nitpicks Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Julian Benegas <julianbenegas99@gmail.com> Co-authored-by: Alan <alannnc@gmail.com>
2022-08-24 20:18:42 +00:00
return (
<div
className="relative"
style={{
gridRowStart: 1,
gridColumnStart: 1,
}}
key={tip.id}>
<div
className="relative"
style={{
transform: `scale(${1 - baseOriginalList.indexOf(tip) / 20})`,
top: -baseOriginalList.indexOf(tip) * 10,
opacity: `${1 - baseOriginalList.indexOf(tip) / 7}`,
}}>
<Card
variant="SidebarCard"
thumbnailUrl={tip.thumbnailUrl}
mediaLink={tip.mediaLink}
title={tip.title}
description={tip.description}
learnMore={{ href: tip.href, text: t("learn_more") }}
actionButton={{ onClick: () => handleRemoveItem(tip.id), child: t("dismiss") }}
/>
</div>
</div>
);
})}
</div>
);
}