feat(storefront): ✨ added download invoice button

apps/admin/src/generated/graphql.ts

@@ -440,9 +440,11 @@ export type Query = {
 	allReviews?: Maybe<Array<ProductReview>>;
 	categories: Array<ProductCategory>;
 	categoriesSummary?: Maybe<Array<ProductCategoryWithProductCount>>;
+	emailInvoice: Scalars["Boolean"];
 	favourites: Array<Favourite>;
 	favouritesWithProduct: Array<Favourite>;
 	fetchCartItems?: Maybe<Array<Cart>>;
+	generate?: Maybe<Scalars["String"]>;
 	hello: Scalars["String"];
 	me?: Maybe<User>;
 	orderById?: Maybe<OrderDetail>;
@@ -464,6 +466,14 @@ export type QueryAllReviewsArgs = {
 	productId: Scalars["Int"];
 };
 
+export type QueryEmailInvoiceArgs = {
+	orderId: Scalars["String"];
+};
+
+export type QueryGenerateArgs = {
+	orderId: Scalars["String"];
+};
+
 export type QueryOrderByIdArgs = {
 	orderId: Scalars["String"];
 };

apps/admin/src/pages/_app.tsx

@@ -1,8 +1,8 @@
-import theme from "@/config/theme";
+import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
 import "@/styles/globals.css";
 import { ChakraProvider } from "@chakra-ui/react";
 import type { AppProps } from "next/app";
-import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
+import theme from "@/config/theme";
 
 const App = ({ Component, pageProps }: AppProps) => {
 	const client = new ApolloClient({

apps/api/src/constants.ts

@@ -4,7 +4,7 @@ export const FORGOT_PASSWORD_PREFIX = "forgot-password:";
 export const VERIFY_EMAIL_PREFIX = "verify-email:";
 export const COMPANY = {
 	name: "Hamropasal",
-	logo: `${process.env.CLIENT_URL}/logo.png`,
+	logo: `https://hamropasal.vercel.app/logo.png`,
 	address: "Tikathali, Mahalaxmi",
 	zip: "44708",
 	city: "Kathmandu",

apps/storefront/src/components/pages/account/order/OrderCard.tsx

@@ -22,7 +22,11 @@ import dayjs from "dayjs";
 import { useMemo } from "react";
 import { BiDownload } from "react-icons/bi";
 import { Link } from "@chakra-ui/next-js";
-import { OrderDetail, OrderItem } from "@/generated/graphql";
+import {
+	OrderDetail,
+	OrderItem,
+	useGenerateInvoiceLazyQuery,
+} from "@/generated/graphql";
 import {
 	OrderInfo,
 	colorFromStatus,
@@ -44,6 +48,9 @@ const OrderCard = ({ orderItem }: OrderCardProps) => {
 		(payment) => payment.status === "COMPLETED"
 	);
 
+	const [generateInvoice, { loading: invoiceLoading }] =
+		useGenerateInvoiceLazyQuery();
+
 	const subTotal = useMemo(
 		() =>
 			orderItem.orderitems?.reduce(
@@ -79,7 +86,22 @@ const OrderCard = ({ orderItem }: OrderCardProps) => {
 					<Button size="sm" as={Link} href={`/order/${orderItem.id}`}>
 						View Order
 					</Button>
-					<Button size="sm" leftIcon={<BiDownload />}>
+					<Button
+						size="sm"
+						leftIcon={<BiDownload />}
+						isLoading={invoiceLoading}
+						onClick={async () => {
+							const res = await generateInvoice({
+								variables: {
+									orderId: orderItem.id,
+								},
+							});
+							window.open(
+								`data:application/pdf;base64,${res.data?.generate}`,
+								"_blank"
+							);
+						}}
+					>
 						Download Invoice
 					</Button>
 				</HStack>

apps/storefront/src/generated/graphql.ts

@@ -440,9 +440,11 @@ export type Query = {
 	allReviews?: Maybe<Array<ProductReview>>;
 	categories: Array<ProductCategory>;
 	categoriesSummary?: Maybe<Array<ProductCategoryWithProductCount>>;
+	emailInvoice: Scalars["Boolean"];
 	favourites: Array<Favourite>;
 	favouritesWithProduct: Array<Favourite>;
 	fetchCartItems?: Maybe<Array<Cart>>;
+	generate?: Maybe<Scalars["String"]>;
 	hello: Scalars["String"];
 	me?: Maybe<User>;
 	orderById?: Maybe<OrderDetail>;
@@ -464,6 +466,14 @@ export type QueryAllReviewsArgs = {
 	productId: Scalars["Int"];
 };
 
+export type QueryEmailInvoiceArgs = {
+	orderId: Scalars["String"];
+};
+
+export type QueryGenerateArgs = {
+	orderId: Scalars["String"];
+};
+
 export type QueryOrderByIdArgs = {
 	orderId: Scalars["String"];
 };
@@ -1825,6 +1835,15 @@ export type FavouritesWithProductQuery = {
 	}>;
 };
 
+export type GenerateInvoiceQueryVariables = Exact<{
+	orderId: Scalars["String"];
+}>;
+
+export type GenerateInvoiceQuery = {
+	__typename?: "Query";
+	generate?: string | null;
+};
+
 export type OrderByIdQueryVariables = Exact<{
 	orderId: Scalars["String"];
 }>;
@@ -4230,6 +4249,62 @@ export type FavouritesWithProductQueryResult = Apollo.QueryResult<
 	FavouritesWithProductQuery,
 	FavouritesWithProductQueryVariables
 >;
+export const GenerateInvoiceDocument = gql`
+	query GenerateInvoice($orderId: String!) {
+		generate(orderId: $orderId)
+	}
+`;
+
+/**
+ * __useGenerateInvoiceQuery__
+ *
+ * To run a query within a React component, call `useGenerateInvoiceQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGenerateInvoiceQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGenerateInvoiceQuery({
+ *   variables: {
+ *      orderId: // value for 'orderId'
+ *   },
+ * });
+ */
+export function useGenerateInvoiceQuery(
+	baseOptions: Apollo.QueryHookOptions<
+		GenerateInvoiceQuery,
+		GenerateInvoiceQueryVariables
+	>
+) {
+	const options = { ...defaultOptions, ...baseOptions };
+	return Apollo.useQuery<GenerateInvoiceQuery, GenerateInvoiceQueryVariables>(
+		GenerateInvoiceDocument,
+		options
+	);
+}
+export function useGenerateInvoiceLazyQuery(
+	baseOptions?: Apollo.LazyQueryHookOptions<
+		GenerateInvoiceQuery,
+		GenerateInvoiceQueryVariables
+	>
+) {
+	const options = { ...defaultOptions, ...baseOptions };
+	return Apollo.useLazyQuery<
+		GenerateInvoiceQuery,
+		GenerateInvoiceQueryVariables
+	>(GenerateInvoiceDocument, options);
+}
+export type GenerateInvoiceQueryHookResult = ReturnType<
+	typeof useGenerateInvoiceQuery
+>;
+export type GenerateInvoiceLazyQueryHookResult = ReturnType<
+	typeof useGenerateInvoiceLazyQuery
+>;
+export type GenerateInvoiceQueryResult = Apollo.QueryResult<
+	GenerateInvoiceQuery,
+	GenerateInvoiceQueryVariables
+>;
 export const OrderByIdDocument = gql`
 	query OrderById($orderId: String!) {
 		orderById(orderId: $orderId) {

apps/storefront/src/graphql/query/invoice/generate.graphql

@@ -0,0 +1,3 @@
+query GenerateInvoice($orderId: String!) {
+	generate(orderId: $orderId)
+}