@canva/cli 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canva/cli",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "The official Canva CLI.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",

package/templates/data_connector/src/api/data_sources/designs.tsx

@@ -13,7 +13,7 @@ import {
 import { SearchFilter } from "src/components/inputs/search_filter";
 import { SelectField } from "src/components/inputs/select_field";
 import { useAppContext } from "src/context";
-import { Paths } from "src/routes";
+import { Paths } from "src/paths";
 import { dateCell, numberCell, stringCell } from "src/utils";
 import type { CanvaItemResponse } from "../connect_client";
 import { DataAPIError, DataSourceHandler } from "../data_source";

package/templates/data_connector/src/api/data_sources/templates.tsx

@@ -18,7 +18,7 @@ import {
 import { SearchFilter } from "src/components/inputs/search_filter";
 import { SelectField } from "src/components/inputs/select_field";
 import { useAppContext } from "src/context";
-import { Paths } from "src/routes";
+import { Paths } from "src/paths";
 import { dateCell, stringCell } from "src/utils";
 import type { CanvaItemResponse } from "../connect_client";
 import { DataAPIError, DataSourceHandler } from "../data_source";

package/templates/data_connector/src/components/header.tsx

@@ -7,7 +7,7 @@ import {
   Title,
 } from "@canva/app-ui-kit";
 import { useNavigate } from "react-router-dom";
-import { Paths } from "src/routes";
+import { Paths } from "src/paths";
 
 export const Header = ({
   title,

package/templates/data_connector/src/context/use_app_context.ts

@@ -1,6 +1,6 @@
 import { useContext } from "react";
-import type { AppContextType } from ".";
-import { AppContext } from ".";
+import type { AppContextType } from "./app_context";
+import { AppContext } from "./app_context";
 
 /**
  * A custom React hook to access the application-wide state and methods provided by the ContextProvider using React Context.

package/templates/data_connector/src/entrypoint.tsx

@@ -8,7 +8,7 @@ import type {
 } from "./api";
 import { DATA_SOURCES } from "./api/data_sources";
 import { useAppContext } from "./context";
-import { Paths } from "./routes";
+import { Paths } from "./paths";
 import {
   isDataRefEmpty,
   isLaunchedWithError,

package/templates/data_connector/src/pages/error.tsx

@@ -1,7 +1,7 @@
 import { Button, Rows, Text } from "@canva/app-ui-kit";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router-dom";
-import { Paths } from "src/routes";
+import { Paths } from "src/paths";
 import * as styles from "styles/components.css";
 
 /**

package/templates/data_connector/src/pages/login.tsx

@@ -11,9 +11,9 @@ import { defineMessages, FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router-dom";
 import { scope } from "src/api";
 import { Header } from "src/components";
+import { Paths } from "src/paths";
 import * as styles from "styles/components.css";
 import { useAppContext } from "../context";
-import { Paths } from "../routes";
 
 export const Login = () => {
   const intl = useIntl();

package/templates/data_connector/src/paths.ts

@@ -0,0 +1,7 @@
+export enum Paths {
+  ENTRYPOINT = "/",
+  LOGIN = "/login",
+  DATA_SOURCE_SELECTION = "/data-source-selection",
+  DATA_SOURCE_CONFIG = "/data-source-config",
+  ERRORS = "/errors/:retry",
+}

package/templates/data_connector/src/routes/protected_route.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { Paths } from "src/paths";
 import { useAppContext } from "../context";
-import { Paths } from "../routes";
 
 interface ProtectedRouteProps {
   children: React.ReactNode;

package/templates/data_connector/src/routes/routes.tsx

@@ -1,16 +1,12 @@
 import { Entrypoint } from "src/entrypoint";
 import { Home } from "src/home";
-import { DataSourceConfig, ErrorPage, Login, SelectSource } from "src/pages";
+import { DataSourceConfig } from "src/pages/data_source_config";
+import { ErrorPage } from "src/pages/error";
+import { Login } from "src/pages/login";
+import { SelectSource } from "src/pages/select_source";
+import { Paths } from "src/paths";
 import { ProtectedRoute } from "./protected_route";
 
-export enum Paths {
-  ENTRYPOINT = "/",
-  LOGIN = "/login",
-  DATA_SOURCE_SELECTION = "/data-source-selection",
-  DATA_SOURCE_CONFIG = "/data-source-config",
-  ERRORS = "/errors/:retry",
-}
-
 export const routes = [
   {
     path: Paths.ENTRYPOINT,

package/templates/gen_ai/src/components/footer.tsx

@@ -1,11 +1,12 @@
 import { Button, Rows } from "@canva/app-ui-kit";
+import { getPlatformInfo } from "@canva/platform";
 import { useIntl } from "react-intl";
 import { useLocation, useNavigate } from "react-router-dom";
 import { purchaseCredits, queueImageGeneration } from "src/api";
 import { RemainingCredits } from "src/components";
 import { NUMBER_OF_IMAGES_TO_GENERATE } from "src/config";
 import { useAppContext } from "src/context";
-import { Paths } from "src/routes";
+import { Paths } from "src/paths";
 import { getObsceneWords } from "src/utils";
 import { FooterMessages as Messages } from "./footer.messages";
 
@@ -13,6 +14,7 @@ export const Footer = () => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
   const isRootRoute = pathname === Paths.HOME;
+  const platformInfo = getPlatformInfo();
   const {
     setAppError,
     promptInput,
@@ -84,8 +86,11 @@ export const Footer = () => {
   };
 
   const onPurchaseMoreCredits = async () => {
-    const { credits } = await purchaseCredits();
+    if (!platformInfo.canAcceptPayments) {
+      return;
+    }
 
+    const { credits } = await purchaseCredits();
     setRemainingCredits(credits);
   };
 
@@ -108,6 +113,12 @@ export const Footer = () => {
       onClick: onPurchaseMoreCredits,
       value: intl.formatMessage(Messages.purchaseMoreCredits),
       visible: !hasRemainingCredits,
+      disabled: !platformInfo.canAcceptPayments,
+      tooltip: intl.formatMessage({
+        defaultMessage: "Payment not available on this platform.",
+        description:
+          "Tooltip text when payment functionality is not available on the current platform. ",
+      }),
     },
     {
       variant: "secondary" as const,
@@ -124,7 +135,7 @@ export const Footer = () => {
   return (
     <Rows spacing="1u">
       {footerButtons.map(
-        ({ visible, variant, onClick, value }) =>
+        ({ visible, variant, onClick, value, disabled, tooltip }) =>
           visible && (
             <Button
               key={value}
@@ -132,6 +143,8 @@ export const Footer = () => {
               onClick={onClick}
               loading={loadingApp}
               stretch={true}
+              disabled={disabled}
+              tooltipLabel={tooltip}
             >
               {value}
             </Button>

package/templates/gen_ai/src/components/loading_results.tsx

@@ -12,7 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router-dom";
 import { cancelImageGenerationJob, getImageGenerationJobStatus } from "src/api";
 import { useAppContext } from "src/context";
-import { Paths } from "src/routes";
+import { Paths } from "src/paths";
 
 const INTERVAL_DURATION_IN_MS = 100;
 const TOTAL_PROGRESS_PERCENTAGE = 100;

package/templates/gen_ai/src/components/prompt_input.tsx

@@ -9,7 +9,7 @@ import { useState } from "react";
 import { useIntl } from "react-intl";
 import { useLocation } from "react-router-dom";
 import { useAppContext } from "src/context";
-import { Paths } from "src/routes";
+import { Paths } from "src/paths";
 import { PromptInputMessages as Messages } from "./prompt_input.messages";
 
 // @TODO: Adjust according to your specific requirements.

package/templates/gen_ai/src/components/remaining_credits.tsx

@@ -1,5 +1,5 @@
 import { Link, Rows, Text, TextPlaceholder } from "@canva/app-ui-kit";
-import { requestOpenExternalUrl } from "@canva/platform";
+import { getPlatformInfo, requestOpenExternalUrl } from "@canva/platform";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useAppContext } from "src/context";
 
@@ -8,6 +8,7 @@ const PURCHASE_URL = "https://example.com";
 
 export const RemainingCredits = (): JSX.Element | undefined => {
   const { remainingCredits, loadingApp } = useAppContext();
+  const platformInfo = getPlatformInfo();
 
   const RemainingCreditsText = () => {
     if (loadingApp) {
@@ -50,25 +51,32 @@ export const RemainingCredits = (): JSX.Element | undefined => {
     <Rows spacing="0">
       <RemainingCreditsText />
       <Text alignment="center" size="small">
-        <FormattedMessage
-          defaultMessage="Purchase more credits at <link>example.com</link>."
-          description="A message to prompt the user to purchase more credits. Do not translate <link>example.com</link>."
-          values={{
-            link: (chunks) => (
-              <Link
-                href={PURCHASE_URL}
-                requestOpenExternalUrl={() => openExternalUrl(PURCHASE_URL)}
-                title={intl.formatMessage({
-                  defaultMessage: "Example Co. website",
-                  description:
-                    "A title for a link to the website of Example Co.",
-                })}
-              >
-                {chunks}
-              </Link>
-            ),
-          }}
-        />
+        {platformInfo.canAcceptPayments ? (
+          <FormattedMessage
+            defaultMessage="Purchase more credits at <link>example.com</link>."
+            description="A message to prompt the user to purchase more credits. Do not translate <link>example.com</link>."
+            values={{
+              link: (chunks) => (
+                <Link
+                  href={PURCHASE_URL}
+                  requestOpenExternalUrl={() => openExternalUrl(PURCHASE_URL)}
+                  tooltipLabel={intl.formatMessage({
+                    defaultMessage: "Example Co. website",
+                    description:
+                      "A title for a link to the website of Example Co.",
+                  })}
+                >
+                  {chunks}
+                </Link>
+              ),
+            }}
+          />
+        ) : (
+          <FormattedMessage
+            defaultMessage="Open this app in a web browser to learn how to purchase more credits."
+            description="A message shown when platform doesn't allow external payment links"
+          />
+        )}
       </Text>
     </Rows>
   );

package/templates/gen_ai/src/components/report_box.tsx

@@ -34,7 +34,7 @@ export const ReportBox = (): JSX.Element => {
                   <Link
                     href={REPORT_URL}
                     requestOpenExternalUrl={() => openExternalUrl(REPORT_URL)}
-                    title={intl.formatMessage({
+                    tooltipLabel={intl.formatMessage({
                       defaultMessage: "Report content",
                       description:
                         "A title for a link to report AI generated content that is problematic",

package/templates/gen_ai/src/components/tests/remaining_credit.tests.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable formatjs/no-literal-string-in-jsx */
 import { TestAppI18nProvider } from "@canva/app-i18n-kit";
 import { TestAppUiProvider } from "@canva/app-ui-kit";
-import { requestOpenExternalUrl } from "@canva/platform";
+import { getPlatformInfo, requestOpenExternalUrl } from "@canva/platform";
 import type { RenderResult } from "@testing-library/react";
 import { fireEvent, render } from "@testing-library/react";
 import React from "react";
@@ -20,9 +20,13 @@ function renderInTestProvider(node: React.ReactNode): RenderResult {
 // For more information on testing with the Canva Apps SDK, see https://www.canva.dev/docs/apps/testing/
 describe("Remaining Credit Tests", () => {
   const mockRequestOpenExternalUrl = jest.mocked(requestOpenExternalUrl);
+  const mockGetPlatformInfo = jest.mocked(getPlatformInfo);
 
   beforeEach(() => {
     jest.resetAllMocks();
+    mockGetPlatformInfo.mockReturnValue({
+      canAcceptPayments: true,
+    });
   });
 
   it("should call requestOpenExternalUrl when the link is clicked", () => {

package/templates/gen_ai/src/context/use_app_context.ts

@@ -1,6 +1,6 @@
 import { useContext } from "react";
-import type { AppContextType } from ".";
-import { AppContext } from ".";
+import type { AppContextType } from "./app_context";
+import { AppContext } from "./app_context";
 
 /**
  * A custom React hook to access the application-wide state and methods provided by the ContextProvider using React Context.

package/templates/gen_ai/src/pages/error.tsx

@@ -2,7 +2,7 @@ import { Button, Rows, Text } from "@canva/app-ui-kit";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router-dom";
 import { useAppContext } from "src/context";
-import { Paths } from "src/routes";
+import { Paths } from "src/paths";
 import * as styles from "styles/components.css";
 
 /**

package/templates/gen_ai/src/paths.ts

@@ -0,0 +1,4 @@
+export enum Paths {
+  HOME = "/",
+  RESULTS = "/results",
+}

package/templates/gen_ai/src/routes/routes.tsx

@@ -1,10 +1,8 @@
 import { Home } from "src/home";
-import { ErrorPage, GeneratePage, ResultsPage } from "src/pages";
-
-export enum Paths {
-  HOME = "/",
-  RESULTS = "/results",
-}
+import { ErrorPage } from "src/pages/error";
+import { GeneratePage } from "src/pages/generate";
+import { ResultsPage } from "src/pages/results";
+import { Paths } from "src/paths";
 
 export const routes = [
   {