app store fixes (#2266)
* temporally hiding reviews and stars for apps, removed nuke my cal * fixed categories headline and back button * truncate description * updated huddle app * Delete truncate.ts Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
This commit is contained in:
Peer Richelsen
GitHub
parent
785b156f95
commit
552751ffcf
12 changed files with 48 additions and 176 deletions
|
|
@ -55,21 +55,6 @@ export default function App({
|
|||
}) {
|
||||
const { t } = useLocale();
|
||||
|
||||
/*const tabs = [
|
||||
{
|
||||
name: t("description"),
|
||||
href: "?description",
|
||||
},
|
||||
{
|
||||
name: t("features"),
|
||||
href: "?features",
|
||||
},
|
||||
{
|
||||
name: t("permissions"),
|
||||
href: "?permissions",
|
||||
},
|
||||
];*/
|
||||
|
||||
const priceInDollar = Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
|
|
@ -88,7 +73,7 @@ export default function App({
|
|||
</Link>
|
||||
<div className="flex items-center justify-between py-8">
|
||||
<div className="flex">
|
||||
<img className="h-16 w-16" src={logo} alt="" />
|
||||
<img className="h-16 w-16" src={logo} alt={name} />
|
||||
<header className="px-4 py-2">
|
||||
<h1 className="font-cal text-xl text-gray-900">{name}</h1>
|
||||
<h2 className="text-sm text-gray-500">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import type { App } from "@calcom/types/App";
|
||||
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
|
||||
import AppCard from "./AppCard";
|
||||
|
||||
export default function AllApps({ apps }: { apps: App[] }) {
|
||||
|
|
|
|||
|
|
@ -23,18 +23,17 @@ export default function AppCard(props: AppCardProps) {
|
|||
color="secondary"
|
||||
className="ml-auto flex self-start"
|
||||
onClick={() => {
|
||||
// TODO: Actually add the integration
|
||||
console.log("The magic is supposed to happen here");
|
||||
}}>
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
<h3 className="font-medium">{props.name}</h3>
|
||||
<div className="flex text-sm text-gray-800">
|
||||
{/* TODO: add reviews <div className="flex text-sm text-gray-800">
|
||||
<span>{props.rating} stars</span> <StarIcon className="ml-1 mt-0.5 h-4 w-4 text-yellow-600" />
|
||||
<span className="pl-1 text-gray-500">{props.reviews} reviews</span>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-500">{props.description}</p>
|
||||
</div> */}
|
||||
<p className="mt-2 truncate text-sm text-gray-500">{props.description}</p>
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { CreditCardIcon } from "@heroicons/react/outline";
|
||||
import Link from "next/link";
|
||||
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
|
||||
export default function AppStoreCategories(props: any) {
|
||||
const { t } = useLocale();
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { DefaultSeo } from "next-seo";
|
||||
import Head from "next/head";
|
||||
// import { ReactQueryDevtools } from "react-query/devtools";
|
||||
import superjson from "superjson";
|
||||
|
||||
|
|
@ -25,6 +26,9 @@ function MyApp(props: AppProps) {
|
|||
<AppProviders {...props}>
|
||||
<DefaultSeo {...seoConfig.defaultNextSeo} />
|
||||
<I18nLanguageHandler />
|
||||
<Head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
||||
</Head>
|
||||
<Component {...pageProps} err={err} />
|
||||
</AppProviders>
|
||||
</ContractsProvider>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ class MyDocument extends Document<Props> {
|
|||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
|
||||
<meta name="msapplication-TileColor" content="#ff0000" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
||||
</Head>
|
||||
<body className="bg-gray-100 dark:bg-neutral-900">
|
||||
<Main />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { ChevronLeftIcon } from "@heroicons/react/solid";
|
||||
import { InferGetStaticPropsType } from "next";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import { getAppRegistry } from "@calcom/app-store/_appRegistry";
|
||||
|
|
@ -14,35 +15,38 @@ export default function Apps({ appStore }: InferGetStaticPropsType<typeof getSta
|
|||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<Shell
|
||||
heading={router.query.category + " - " + t("app_store")}
|
||||
subtitle={t("app_store_description")}
|
||||
large>
|
||||
<div className="mb-8">
|
||||
<Button color="secondary" href="/apps">
|
||||
<ChevronLeftIcon className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mb-16">
|
||||
<h2 className="mb-2 text-lg font-semibold text-gray-900">All {router.query.category} apps</h2>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{appStore.map((app) => {
|
||||
return (
|
||||
app.category === router.query.category && (
|
||||
<AppCard
|
||||
key={app.name}
|
||||
slug={app.slug}
|
||||
name={app.name}
|
||||
description={app.description}
|
||||
logo={app.logo}
|
||||
rating={app.rating}
|
||||
/>
|
||||
)
|
||||
);
|
||||
})}
|
||||
<>
|
||||
<Shell large>
|
||||
<div className="-mx-8">
|
||||
<div className="mb-10 bg-gray-50 px-10 pb-2">
|
||||
<Link href="/apps">
|
||||
<a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
|
||||
<ChevronLeftIcon className="h-5 w-5" /> {t("browse_apps")}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Shell>
|
||||
<div className="mb-16">
|
||||
<h2 className="mb-2 text-lg font-semibold text-gray-900">All {router.query.category} apps</h2>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{appStore.map((app) => {
|
||||
return (
|
||||
app.category === router.query.category && (
|
||||
<AppCard
|
||||
key={app.name}
|
||||
slug={app.slug}
|
||||
name={app.name}
|
||||
description={app.description}
|
||||
logo={app.logo}
|
||||
rating={app.rating}
|
||||
/>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Shell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,118 +0,0 @@
|
|||
import showToast from "@calcom/lib/notification";
|
||||
|
||||
import App from "@components/App";
|
||||
|
||||
export default function NukeMyCal() {
|
||||
return (
|
||||
<App
|
||||
name="Wipe my Cal"
|
||||
type="wipemycal_other"
|
||||
logo="/apps/nuke-my-cal.svg"
|
||||
categories={["fun", "productivity"]}
|
||||
author="/peer"
|
||||
feeType="free" // "usage-based", "monthly", "one-time" or "free"
|
||||
price={0} // 0 = free. if type="usage-based" it's the price per booking
|
||||
commission={0} // only required for "usage-based" billing. % of commission for paid bookings
|
||||
website="https://cal.com"
|
||||
email="help@cal.com"
|
||||
tos="https://cal.com/terms"
|
||||
privacy="https://cal.com/privacy"
|
||||
body={
|
||||
<>
|
||||
<style jsx>
|
||||
{`
|
||||
.pushable {
|
||||
position: relative;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
outline-offset: 4px;
|
||||
transition: filter 250ms;
|
||||
}
|
||||
.shadow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
background: hsl(0deg 0% 0% / 0.25);
|
||||
will-change: transform;
|
||||
transform: translateY(2px);
|
||||
transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
|
||||
}
|
||||
.edge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(
|
||||
to left,
|
||||
hsl(340deg 100% 16%) 0%,
|
||||
hsl(340deg 100% 32%) 8%,
|
||||
hsl(340deg 100% 32%) 92%,
|
||||
hsl(340deg 100% 16%) 100%
|
||||
);
|
||||
}
|
||||
.front {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 12px 42px;
|
||||
border-radius: 12px;
|
||||
font-size: 1.25rem;
|
||||
color: white;
|
||||
background: hsl(345deg 100% 47%);
|
||||
will-change: transform;
|
||||
transform: translateY(-4px);
|
||||
transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
|
||||
}
|
||||
.pushable:hover {
|
||||
filter: brightness(110%);
|
||||
}
|
||||
.pushable:hover .front {
|
||||
transform: translateY(-6px);
|
||||
transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
|
||||
}
|
||||
.pushable:active .front {
|
||||
transform: translateY(-2px);
|
||||
transition: transform 34ms;
|
||||
}
|
||||
.pushable:hover .shadow {
|
||||
transform: translateY(4px);
|
||||
transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
|
||||
}
|
||||
.pushable:active .shadow {
|
||||
transform: translateY(1px);
|
||||
transition: transform 34ms;
|
||||
}
|
||||
.pushable:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<div>
|
||||
Have an emergency? Need to reschedule all of your upcoming calendar events? Just click{" "}
|
||||
<strong>Nuke my Cal</strong> and auto-reschedule the entire day. Give it a try!
|
||||
<br />
|
||||
<br />
|
||||
Demo: <br />
|
||||
<br />
|
||||
</div>
|
||||
<button
|
||||
onClick={() => (
|
||||
new Audio("/apps/nuke-my-cal.wav").play(),
|
||||
showToast("All of your calendar events for today have been rescheduled", "success")
|
||||
)}
|
||||
className="pushable">
|
||||
<span className="shadow"></span>
|
||||
<span className="edge"></span>
|
||||
<span className="front">Nuke my Cal</span>
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
"name": "@calcom/applecalendar",
|
||||
"version": "0.0.0",
|
||||
"main": "./index.ts",
|
||||
"description": "For personal and business calendars",
|
||||
"description": "Apple Calendar is a personal calendar app made by Apple Inc. that runs on both the macOS desktop operating system and the iOS mobile operating system.",
|
||||
"dependencies": {
|
||||
"@calcom/prisma": "*",
|
||||
"react-hook-form": "^7.20.4"
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ export const metadata = {
|
|||
imageSrc: "/apps/huddle.svg",
|
||||
variant: "conferencing",
|
||||
logo: "/apps/huddle.svg",
|
||||
publisher: "Cal.com",
|
||||
url: "https://huddle01.com/",
|
||||
publisher: "huddle01.com",
|
||||
url: "https://huddle01.com",
|
||||
verified: true,
|
||||
rating: 0, // TODO: placeholder for now, pull this from TrustPilot or G2
|
||||
reviews: 0, // TODO: placeholder for now, pull this from TrustPilot or G2
|
||||
|
|
@ -22,7 +22,7 @@ export const metadata = {
|
|||
title: "Huddle01",
|
||||
trending: true,
|
||||
isGlobal: true,
|
||||
email: "help@cal.com",
|
||||
email: "support@huddle01.com",
|
||||
locationType: "integrations:huddle01",
|
||||
key: { apikey: randomString(12) },
|
||||
} as App;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"name": "@calcom/huddle01video",
|
||||
"version": "0.0.0",
|
||||
"main": "./index.ts",
|
||||
"description": "Video conferencing",
|
||||
"description": "One-click Meetings in your Metaversical. Login with Web3, create token-gated spaces, use NFT avatars and decentralized storage.",
|
||||
"dependencies": {
|
||||
"@calcom/lib": "*"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"name": "@calcom/office365video",
|
||||
"version": "0.0.0",
|
||||
"main": "./index.ts",
|
||||
"description": "Use your Office 365 account to book video calls through MS Teams NOTE: MUST HAVE A WORK / SCHOOL ACCOUNT",
|
||||
"description": "Use your Office 365 account to book video calls through MS Teams. NOTE: MUST HAVE A WORK / SCHOOL ACCOUNT",
|
||||
"dependencies": {
|
||||
"@calcom/prisma": "*",
|
||||
"@calcom/lib": "*"
|
||||
|
|
|
|||
Loading…
Reference in a new issue