mythic-insight/calcom
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

app store fixes (#2266)

Browse source 
* 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 2022-03-24 17:51:37 +01:00 committed by GitHub
parent 785b156f95
commit 552751ffcf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 48 additions and 176 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
apps/web/components/App.tsx
View file

@ -55,21 +55,6 @@ export default function App({
}) { }) {
const { t } = useLocale(); 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", { const priceInDollar = Intl.NumberFormat("en-US", {
style: "currency", style: "currency",
currency: "USD", currency: "USD",
@ -88,7 +73,7 @@ export default function App({
</Link> </Link>
<div className="flex items-center justify-between py-8"> <div className="flex items-center justify-between py-8">
<div className="flex"> <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"> <header className="px-4 py-2">
<h1 className="font-cal text-xl text-gray-900">{name}</h1> <h1 className="font-cal text-xl text-gray-900">{name}</h1>
<h2 className="text-sm text-gray-500"> <h2 className="text-sm text-gray-500">

3
apps/web/components/apps/AllApps.tsx
View file

@ -1,7 +1,6 @@
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { App } from "@calcom/types/App"; import type { App } from "@calcom/types/App";
import { useLocale } from "@lib/hooks/useLocale";
import AppCard from "./AppCard"; import AppCard from "./AppCard";
export default function AllApps({ apps }: { apps: App[] }) { export default function AllApps({ apps }: { apps: App[] }) {

7
apps/web/components/apps/AppCard.tsx
View file

@ -23,18 +23,17 @@ export default function AppCard(props: AppCardProps) {
color="secondary" color="secondary"
className="ml-auto flex self-start" className="ml-auto flex self-start"
onClick={() => { onClick={() => {
// TODO: Actually add the integration
console.log("The magic is supposed to happen here"); console.log("The magic is supposed to happen here");
}}> }}>
Add Add
</Button> </Button>
</div> </div>
<h3 className="font-medium">{props.name}</h3> <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>{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> <span className="pl-1 text-gray-500">{props.reviews} reviews</span>
</div> </div> */}
<p className="mt-2 text-sm text-gray-500">{props.description}</p> <p className="mt-2 truncate text-sm text-gray-500">{props.description}</p>
</a> </a>
</Link> </Link>
); );

2
apps/web/components/apps/Categories.tsx
View file

@ -1,7 +1,7 @@
import { CreditCardIcon } from "@heroicons/react/outline"; import { CreditCardIcon } from "@heroicons/react/outline";
import Link from "next/link"; import Link from "next/link";
import { useLocale } from "@lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
export default function AppStoreCategories(props: any) { export default function AppStoreCategories(props: any) {
const { t } = useLocale(); const { t } = useLocale();

4
apps/web/pages/_app.tsx
View file

@ -1,4 +1,5 @@
import { DefaultSeo } from "next-seo"; import { DefaultSeo } from "next-seo";
import Head from "next/head";
// import { ReactQueryDevtools } from "react-query/devtools"; // import { ReactQueryDevtools } from "react-query/devtools";
import superjson from "superjson"; import superjson from "superjson";
@ -25,6 +26,9 @@ function MyApp(props: AppProps) {
<AppProviders {...props}> <AppProviders {...props}>
<DefaultSeo {...seoConfig.defaultNextSeo} /> <DefaultSeo {...seoConfig.defaultNextSeo} />
<I18nLanguageHandler /> <I18nLanguageHandler />
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</Head>
<Component {...pageProps} err={err} /> <Component {...pageProps} err={err} />
</AppProviders> </AppProviders>
</ContractsProvider> </ContractsProvider>

1
apps/web/pages/_document.tsx
View file

@ -22,7 +22,6 @@ class MyDocument extends Document<Props> {
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" /> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
<meta name="msapplication-TileColor" content="#ff0000" /> <meta name="msapplication-TileColor" content="#ff0000" />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</Head> </Head>
<body className="bg-gray-100 dark:bg-neutral-900"> <body className="bg-gray-100 dark:bg-neutral-900">
<Main /> <Main />

20
apps/web/pages/apps/categories/[category].tsx
View file

@ -1,5 +1,6 @@
import { ChevronLeftIcon } from "@heroicons/react/solid"; import { ChevronLeftIcon } from "@heroicons/react/solid";
import { InferGetStaticPropsType } from "next"; import { InferGetStaticPropsType } from "next";
import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { getAppRegistry } from "@calcom/app-store/_appRegistry"; import { getAppRegistry } from "@calcom/app-store/_appRegistry";
@ -14,14 +15,16 @@ export default function Apps({ appStore }: InferGetStaticPropsType<typeof getSta
const router = useRouter(); const router = useRouter();
return ( return (
<Shell <>
heading={router.query.category + " - " + t("app_store")} <Shell large>
subtitle={t("app_store_description")} <div className="-mx-8">
large> <div className="mb-10 bg-gray-50 px-10 pb-2">
<div className="mb-8"> <Link href="/apps">
<Button color="secondary" 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" /> <ChevronLeftIcon className="h-5 w-5" /> {t("browse_apps")}
</Button> </a>
</Link>
</div>
</div> </div>
<div className="mb-16"> <div className="mb-16">
<h2 className="mb-2 text-lg font-semibold text-gray-900">All {router.query.category} apps</h2> <h2 className="mb-2 text-lg font-semibold text-gray-900">All {router.query.category} apps</h2>
@ -43,6 +46,7 @@ export default function Apps({ appStore }: InferGetStaticPropsType<typeof getSta
</div> </div>
</div> </div>
</Shell> </Shell>
</>
); );
} }

118
apps/web/pages/apps/nuke-my-cal.tsx
View file

@ -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>
</>
}
/>
);
}

2
packages/app-store/applecalendar/package.json
View file

@ -4,7 +4,7 @@
"name": "@calcom/applecalendar", "name": "@calcom/applecalendar",
"version": "0.0.0", "version": "0.0.0",
"main": "./index.ts", "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": { "dependencies": {
"@calcom/prisma": "*", "@calcom/prisma": "*",
"react-hook-form": "^7.20.4" "react-hook-form": "^7.20.4"

6
packages/app-store/huddle01video/index.ts
View file

@ -11,8 +11,8 @@ export const metadata = {
imageSrc: "/apps/huddle.svg", imageSrc: "/apps/huddle.svg",
variant: "conferencing", variant: "conferencing",
logo: "/apps/huddle.svg", logo: "/apps/huddle.svg",
publisher: "Cal.com", publisher: "huddle01.com",
url: "https://huddle01.com/", url: "https://huddle01.com",
verified: true, verified: true,
rating: 0, // TODO: placeholder for now, pull this from TrustPilot or G2 rating: 0, // TODO: placeholder for now, pull this from TrustPilot or G2
reviews: 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", title: "Huddle01",
trending: true, trending: true,
isGlobal: true, isGlobal: true,
email: "help@cal.com", email: "support@huddle01.com",
locationType: "integrations:huddle01", locationType: "integrations:huddle01",
key: { apikey: randomString(12) }, key: { apikey: randomString(12) },
} as App; } as App;

2
packages/app-store/huddle01video/package.json
View file

@ -3,7 +3,7 @@
"name": "@calcom/huddle01video", "name": "@calcom/huddle01video",
"version": "0.0.0", "version": "0.0.0",
"main": "./index.ts", "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": { "dependencies": {
"@calcom/lib": "*" "@calcom/lib": "*"
}, },

2
packages/app-store/office365video/package.json
View file

@ -3,7 +3,7 @@
"name": "@calcom/office365video", "name": "@calcom/office365video",
"version": "0.0.0", "version": "0.0.0",
"main": "./index.ts", "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": { "dependencies": {
"@calcom/prisma": "*", "@calcom/prisma": "*",
"@calcom/lib": "*" "@calcom/lib": "*"