Query for reviews and users

* move custom inputs from description to own json object

* show custom inputs on success page

* fix type error

* add custom inputs to email and webhook

* add custom inputs to all emails

* add values for custom inputs when rescheduling

* add custom input everywhere description is shown

* fix bug with boolean value

* fix issues with null values

* disable custom inputs and add notes for organizer

* don't show custom input with empty string

* don't show custom inputs with empty string in calender event and email

* add link to booking details page

* redirect to success page to see booking details

* add functionality to cancel and reschedule booking

* fix bookings that require confirmation

* clean code

* fix infinite lopp in useEffect of success page

* show web conference details message when integration as location

* improve design of cancelling event

* clean code

* disable darkmode for organizer on booking details page

* fix dark mode for cancelling booking

* fix build error

* Fixes infinite loop

* Fixes infinite loop

* Fixes infinite loop

* Update all Yarn dependencies (2022-05-16) (#2769)

* Update all Yarn dependencies (2022-05-16)

* Upgrade dependencies

* Removes deprecated packages

* Upgrades deps

* Updates submodules

* Update yarn.lock

* Linting

* Linting

* Update website

* Build fixes

* TODO: fix this

* Module resolving

* Type fixes

* Intercom fixes on SSG

* Fixes infinite loop

* Upgrades to React 18

* Type fixes

* Locks node version to 14

* Upgrades daily-js

* Readds missing types

* Upgrades playwright

* Noop when intercom is not installed

* Update website

* Removed yarn.lock in favor of monorepo

Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
Co-authored-by: zomars <zomars@me.com>

* Create ci.yml

* Update ci.yml

* Reintroduces typescript-eslint

Buckle up!

* Type fixes

* Update ci.yml

* Update api

* Update admin

* Reusable inferSSRProps

* Linting

* Linting

* Prisma fixes

* Update ci.yml

* Cache testing

* Update e2e.yml

* Update DatePicker.tsx

* Update e2e.yml

* Revert "Linting"

This reverts commit adf817766e.

* Revert "Linting"

This reverts commit 1b59dacd64.

* Linting

* Update e2e.yml

* Ci updates

* Add team Id to hash url (#2803)

* Fix missing tabs - Embed (#2804)

* Fix missing tabs

* Fix Eslint error

* Fix Eslint errors

* Add import statement (#2812)

* Add import statement

* Update apps/docs/next.config.js

Co-authored-by: Omar López <zomars@me.com>

* Show success page if booking was deleted on calendar (#2808)

* Add exception to 410

* Fix type error

* Add GoogelCalError type

* only show invite link for app.cal.dev (#2807)

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: Omar López <zomars@me.com>

* fix: update eslint config to test .ts and .js separately (#2805)

* fix: update eslint config

* fix: update ts ignore

* fix: update eslint config

* Update TeamAvailabilityScreen.tsx

* Type fixes

* Update useIntercom.ts

Co-authored-by: Omar López <zomars@me.com>

* fix: sync api to latest commit (#2810)

Co-authored-by: Agusti Fernandez Pardo <git@agusti.me>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* Embed React improvements (#2782)

* Add off support. Add getApi export.

* Add publish command

* Add embed-snippet in prod deps

* Update README

* Update package.json

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
Co-authored-by: zomars <zomars@me.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* Consolidates test-results

* Type fixes

* Abstracts minimal booking select

* Type fixes

* Update listBookings.ts

* Update common.json

* Update bookingReminder.ts

* Consolidates isOutOfBounds

* Update webhookResponse-chromium.txt

* Update TableActions.tsx

* Type fixes

* Update BookingPage.tsx

* Update webhookResponse-chromium.txt

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
Co-authored-by: zomars <zomars@me.com>
Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Co-authored-by: iamkun <kunhello@outlook.com>
Co-authored-by: Agusti Fernandez Pardo <me@agusti.me>
Co-authored-by: Agusti Fernandez Pardo <git@agusti.me>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/admin

@@ -0,0 +1 @@
+Subproject commit e82b40a50e8128739b9572fb8774ce89eb7efe12

apps/web/components/App.tsx

@@ -5,16 +5,21 @@ import {
   FlagIcon,
   MailIcon,
   ShieldCheckIcon,
+  StarIcon,
 } from "@heroicons/react/outline";
+import { StarIcon as FilledStarIcon } from "@heroicons/react/solid";
 import { ChevronLeftIcon } from "@heroicons/react/solid";
 import Link from "next/link";
 import React, { useEffect, useState } from "react";
 
 import { InstallAppButton } from "@calcom/app-store/components";
+import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { App as AppType } from "@calcom/types/App";
 import { Button } from "@calcom/ui";
 
+import { trpc } from "@lib/trpc";
+
 import Shell from "@components/Shell";
 import Badge from "@components/ui/Badge";
 
@@ -34,6 +39,7 @@ export default function App({
   email,
   tos,
   privacy,
+  slug,
 }: {
   name: string;
   type: AppType["type"];
@@ -51,9 +57,22 @@ export default function App({
   email: string; // required
   tos?: string;
   privacy?: string;
+  slug: string;
 }) {
   const { t } = useLocale();
 
+  const [rating, setRating] = useState(0);
+  const [hover, setHover] = useState(0);
+  const [comment, setComment] = useState("");
+  const totalStars = 5;
+
+  const postMutation = trpc.useMutation("viewer.appReviews.post");
+
+  const onSubmitReview = async (slug: string, rating: number, comment: string) => {
+    console.log("This triggers");
+    postMutation.mutate({ slug, rating, comment });
+  };
+
   const priceInDollar = Intl.NumberFormat("en-US", {
     style: "currency",
     currency: "USD",
@@ -237,6 +256,35 @@ export default function App({
               </a>
             </div>
           </div>
+          <div>
+            <h3>Review</h3>
+            <div className="flex">
+              {[...new Array(totalStars)].map((arr, index) => {
+                return (
+                  <button
+                    type="button"
+                    key={index}
+                    onClick={() => setRating(index)}
+                    onMouseEnter={() => setHover(index)}
+                    onMouseLeave={() => setHover(rating)}>
+                    <FilledStarIcon
+                      className={classNames(
+                        "ml-1 mt-0.5 h-4 w-4",
+                        index <= (rating || hover) ? "text-yellow-600" : "text-yellow-200"
+                      )}
+                    />
+                  </button>
+                );
+              })}
+            </div>
+            <textarea
+              id="comment"
+              name="comment"
+              rows={3}
+              onChange={(event) => setComment(event.target.value)}
+              className="my-1 block rounded-sm border-gray-300 py-2 pb-2 shadow-sm sm:text-sm"></textarea>
+            <Button onClick={() => onSubmitReview(slug, rating, comment)}>{t("submit")}</Button>
+          </div>
         </div>
       </Shell>
     </>

apps/web/components/apps/AllApps.tsx

@@ -19,6 +19,7 @@ export default function AllApps({ apps }: { apps: App[] }) {
             logo={app.logo}
             rating={app.rating}
             reviews={app.reviews}
+            installs={app.installs}
           />
         ))}
       </div>

apps/web/components/apps/AppCard.tsx

@@ -1,3 +1,4 @@
+import { StarIcon } from "@heroicons/react/solid";
 import Link from "next/link";
 
 import Button from "@calcom/ui/Button";
@@ -10,9 +11,12 @@ interface AppCardProps {
   description: string;
   rating: number;
   reviews?: number;
+  installs?: number;
 }
 
 export default function AppCard(props: AppCardProps) {
+  console.log("🚀 ~ file: AppCard.tsx ~ line 16 ~ installs", props.installs);
+
   return (
     <Link href={"/apps/" + props.slug}>
       <a
@@ -33,10 +37,11 @@ export default function AppCard(props: AppCardProps) {
           </Button>
         </div>
         <h3 className="font-medium">{props.name}</h3>
-        {/* TODO: add reviews <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> */}
+          <span className="pl-1 text-gray-500">{props.installs} installs</span>
+        </div>
         <p className="mt-2 truncate text-sm text-gray-500">{props.description}</p>
       </a>
     </Link>

apps/web/components/apps/TrendingAppsSlider.tsx

@@ -30,6 +30,7 @@ const TrendingAppsSlider = <T extends App>({ items }: { items: T[] }) => {
           logo={app.logo}
           rating={app.rating}
           reviews={app.reviews}
+          installs={app.installs}
         />
       )}
     />

apps/web/pages/apps/[slug]/index.tsx

@@ -61,6 +61,7 @@ function SingleAppPage({ data, source }: inferSSRProps<typeof getStaticProps>) {
       docs={data.docsUrl}
       website={data.url}
       email={data.email}
+      slug={data.slug}
       //   tos="https://zoom.us/terms"
       //   privacy="https://zoom.us/privacy"
       body={<MDXRemote {...source} components={components} />}
@@ -83,7 +84,20 @@ export const getStaticProps = async (ctx: GetStaticPropsContext) => {
 
   const app = await prisma.app.findUnique({
     where: { slug: ctx.params.slug },
+    include: {
+      reviews: {
+        select: {
+          user: {
+            select: {
+              name: true,
+              avatar: true,
+            },
+          },
+        },
+      },
+    },
   });
+  console.log("🚀 ~ file: index.tsx ~ line 100 ~ getStaticProps ~ app", app.reviews);
 
   if (!app) return { notFound: true };
 

apps/web/pages/apps/index.tsx

@@ -25,15 +25,31 @@ export default function Apps({ appStore, categories }: InferGetStaticPropsType<t
 }
 
 export const getStaticProps = async () => {
-  const appStore = await getAppRegistry();
+  const appMetaData = await getAppRegistry();
 
-  const categoryQuery = await prisma.app.findMany({
+  const appsQuery = await prisma.app.findMany({
     select: {
+      slug: true,
       categories: true,
+      _count: {
+        select: {
+          credentials: true,
+        },
+      },
     },
   });
-  const categories = categoryQuery.reduce((c, app) => {
-    for (const category of app.categories) {
+  console.log("🚀 ~ file: index.tsx ~ line 40 ~ getStaticProps ~ appsQuery", appsQuery);
+
+  const appStore = appMetaData.map((app) => {
+    const installs = appsQuery.filter((query) => query.slug === app.slug);
+    console.log("🚀 ~ file: index.tsx ~ line 45 ~ appStore ~ installs", installs[0]._count.credentials);
+
+    return { ...app, installs: installs[0]._count.credentials };
+  });
+
+  const categoriesArray = appsQuery.map((app) => app.categories);
+  const categories = categoriesArray.reduce((c, app) => {
+    for (const category of app) {
       c[category] = c[category] ? c[category] + 1 : 1;
     }
     return c;

apps/web/server/routers/viewer.tsx

@@ -25,6 +25,7 @@ import {
 import slugify from "@lib/slugify";
 
 import { apiKeysRouter } from "@server/routers/viewer/apiKeys";
+import { appReviewsRouter } from "@server/routers/viewer/appReviews";
 import { availabilityRouter } from "@server/routers/viewer/availability";
 import { eventTypesRouter } from "@server/routers/viewer/eventTypes";
 import { TRPCError } from "@trpc/server";
@@ -928,4 +929,5 @@ export const viewerRouter = createRouter()
   .merge("availability.", availabilityRouter)
   .merge("teams.", viewerTeamsRouter)
   .merge("webhook.", webhookRouter)
-  .merge("apiKeys.", apiKeysRouter);
+  .merge("apiKeys.", apiKeysRouter)
+  .merge("appReviews.", appReviewsRouter);

apps/web/server/routers/viewer/appReviews.tsx

@@ -0,0 +1,32 @@
+import { PrismaAdapter } from "@next-auth/prisma-adapter";
+import dayjs from "dayjs";
+import { z } from "zod";
+
+import { createProtectedRouter } from "@server/createRouter";
+import { TRPCError } from "@trpc/server";
+
+export const appReviewsRouter = createProtectedRouter().mutation("post", {
+  input: z.object({
+    slug: z.string(),
+    rating: z.number(),
+    comment: z.string(),
+  }),
+  async resolve({ ctx, input }) {
+    const { slug, rating, comment } = input;
+    const { prisma, user } = ctx;
+
+    await prisma.appReview.create({
+      data: {
+        slug: slug,
+        date: dayjs().toISOString(),
+        user: {
+          connect: {
+            id: user.id,
+          },
+        },
+        rating: rating,
+        comment: comment,
+      },
+    });
+  },
+});

packages/prisma/schema.prisma

@@ -172,6 +172,7 @@ model User {
   apiKeys             ApiKey[]
   accounts            Account[]
   sessions            Session[]
+  reviews             AppReview[]
 
   Feedback Feedback[]
   @@map(name: "users")
@@ -477,6 +478,18 @@ model App {
   credentials Credential[]
   Webhook     Webhook[]
   ApiKey      ApiKey[]
+  reviews     AppReview[]
+}
+
+model AppReview {
+  id      Int      @id @default(autoincrement())
+  slug    String   @unique
+  app     App      @relation(fields: [slug], references: [slug], onDelete: Cascade)
+  userId  Int
+  user    User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  date    DateTime
+  rating  Int
+  comment String
 }
 
 model Feedback {

packages/types/App.d.ts

@@ -73,4 +73,6 @@ export interface App {
   price?: number;
   /** only required for "usage-based" billing. % of commission for paid bookings */
   commission?: number;
+  /** Query from db, count the number of credentials */
+  installs?: number;
 }