@canva/cli 1.19.0 → 1.20.0

package/templates/mls/src/pages/listing_details_page/listing_details_page.tsx

@@ -1,418 +0,0 @@
-import {
-  ArrowLeftIcon,
-  Box,
-  Button,
-  CheckIcon,
-  Column,
-  Columns,
-  CopyIcon,
-  Grid,
-  ImageCard,
-  Rows,
-  SegmentedControl,
-  Text,
-  TypographyCard,
-} from "@canva/app-ui-kit";
-import React, { useState } from "react";
-import { useIntl } from "react-intl";
-import { useLocation, useNavigate } from "react-router-dom";
-import type { Property } from "../../real_estate.type";
-import { useAddElement } from "../../util/use_add_element";
-import { useDragElement } from "../../util/use_drag_element";
-
-export const ListingDetailsPage = () => {
-  const navigate = useNavigate();
-  const listing = (useLocation().state as { listing: Property })?.listing;
-  const intl = useIntl();
-  const [selectedTab, setSelectedTab] = useState("images");
-  const [copyState, setCopyState] = useState<"idle" | "loading" | "complete">(
-    "idle",
-  );
-
-  const { addText, addImage } = useAddElement();
-
-  const { dragText, dragImage } = useDragElement();
-
-  if (!listing) {
-    navigate(-1);
-  }
-
-  const handleCopy = async (text: string) => {
-    setCopyState("loading");
-    try {
-      await Promise.all([
-        navigator.clipboard.writeText(text),
-        new Promise((resolve) => setTimeout(resolve, 500)),
-      ]);
-      setCopyState("complete");
-      setTimeout(() => setCopyState("idle"), 2000);
-    } catch (error) {
-      setCopyState("idle");
-      // eslint-disable-next-line no-console
-      console.error(
-        intl.formatMessage({
-          defaultMessage: "Failed to copy:",
-          description: "Console error message when copying fails",
-        }),
-        error,
-      );
-    }
-  };
-
-  return (
-    <Box paddingY="2u" height="full">
-      <Rows spacing="2u">
-        <Columns spacing="1u" alignY="center">
-          <Column width="content">
-            <Button
-              icon={ArrowLeftIcon}
-              size="small"
-              type="button"
-              variant="tertiary"
-              onClick={() => navigate(-1)}
-            />
-          </Column>
-          <Column>
-            <Text variant="bold">
-              {intl.formatMessage({
-                defaultMessage: "Property Details",
-                description: "Page title for property details page",
-              })}
-            </Text>
-          </Column>
-        </Columns>
-
-        <Rows spacing="2u">
-          <SegmentedControl
-            options={[
-              {
-                value: "images",
-                label: intl.formatMessage({
-                  defaultMessage: "Images",
-                  description: "Property images tab",
-                }),
-              },
-              {
-                value: "details",
-                label: intl.formatMessage({
-                  defaultMessage: "Details",
-                  description: "Property details tab",
-                }),
-              },
-              {
-                value: "agent",
-                label: intl.formatMessage({
-                  defaultMessage: "Agent",
-                  description: "Property's agent tab",
-                }),
-              },
-            ]}
-            value={selectedTab}
-            onChange={setSelectedTab}
-          />
-
-          {selectedTab === "images" && (
-            <Box>
-              <Rows spacing="2u">
-                {listing.listing_images && listing.listing_images.length > 0 ? (
-                  <Grid columns={2} spacing="2u">
-                    {listing.listing_images.map((image, index) => (
-                      <ImageCard
-                        key={index}
-                        selectable
-                        thumbnailUrl={image.url}
-                        alt={
-                          image.alt ||
-                          intl.formatMessage({
-                            defaultMessage: "Property image",
-                            description: "Alt text for property image",
-                          })
-                        }
-                        thumbnailHeight={150}
-                        thumbnailAspectRatio={4 / 3}
-                        onClick={async () => {
-                          await addImage(
-                            image.url,
-                            image.alt ||
-                              intl.formatMessage({
-                                defaultMessage: "Property image",
-                                description: "Alt text for property image",
-                              }),
-                          );
-                        }}
-                        onDragStart={(e) => {
-                          dragImage(
-                            e,
-                            image.url,
-                            image.alt ||
-                              intl.formatMessage({
-                                defaultMessage: "Property image",
-                                description: "Alt text for property image",
-                              }),
-                            image.width,
-                            image.height,
-                          );
-                        }}
-                      />
-                    ))}
-                  </Grid>
-                ) : (
-                  <Box>
-                    <Text>
-                      {intl.formatMessage({
-                        defaultMessage: "No images available",
-                        description:
-                          "Message shown when no images are available",
-                      })}
-                    </Text>
-                  </Box>
-                )}
-              </Rows>
-            </Box>
-          )}
-
-          {selectedTab === "details" && (
-            <Rows spacing="2u">
-              <Rows spacing="1u">
-                <Text variant="bold">
-                  {intl.formatMessage({
-                    defaultMessage: "Title",
-                    description: "Label for property title field",
-                  })}
-                </Text>
-                <TypographyCard
-                  ariaLabel={intl.formatMessage({
-                    defaultMessage: "Add property title to design",
-                    description:
-                      "Accessibility label for adding property title to design",
-                  })}
-                  onClick={() => addText(listing.title)}
-                  onDragStart={(e) => dragText(e, listing.title)}
-                >
-                  <Text>{listing.title}</Text>
-                </TypographyCard>
-              </Rows>
-
-              <Rows spacing="2u">
-                <Rows spacing="1u">
-                  <Text variant="bold">
-                    {intl.formatMessage({
-                      defaultMessage: "Description",
-                      description: "Label for property description field",
-                    })}
-                  </Text>
-                  <TypographyCard
-                    ariaLabel={intl.formatMessage({
-                      defaultMessage: "Add property description to design",
-                      description:
-                        "Accessibility label for adding property description to design",
-                    })}
-                    onClick={() => addText(listing.description)}
-                    onDragStart={(e) => dragText(e, listing.description)}
-                  >
-                    <Text>{listing.description}</Text>
-                  </TypographyCard>
-                </Rows>
-
-                <Columns spacing="1u" alignY="stretch">
-                  <Column>
-                    <Button
-                      variant="primary"
-                      stretch
-                      onClick={() => addText(listing.description)}
-                    >
-                      {intl.formatMessage({
-                        defaultMessage: "Add to design",
-                        description:
-                          "Button text for adding description to design",
-                      })}
-                    </Button>
-                  </Column>
-                  <Column width="content">
-                    <Button
-                      icon={copyState === "complete" ? CheckIcon : CopyIcon}
-                      variant="secondary"
-                      loading={copyState === "loading"}
-                      onClick={() => handleCopy(listing.description)}
-                    />
-                  </Column>
-                </Columns>
-              </Rows>
-
-              <Rows spacing="1u">
-                <Text variant="bold">
-                  {intl.formatMessage({
-                    defaultMessage: "Address",
-                    description: "Label for property address field",
-                  })}
-                </Text>
-                <TypographyCard
-                  ariaLabel={intl.formatMessage({
-                    defaultMessage: "Add property address to design",
-                    description:
-                      "Accessibility label for adding property address to design",
-                  })}
-                  onClick={() => addText(listing.address)}
-                  onDragStart={(e) => dragText(e, listing.address)}
-                >
-                  <Text>{listing.address}</Text>
-                </TypographyCard>
-              </Rows>
-
-              <Rows spacing="1u">
-                <Text variant="bold">
-                  {intl.formatMessage({
-                    defaultMessage: "Price",
-                    description: "Label for property price field",
-                  })}
-                </Text>
-                <TypographyCard
-                  ariaLabel={intl.formatMessage({
-                    defaultMessage: "Add listing price to design",
-                    description:
-                      "Accessibility label for adding listing price to design",
-                  })}
-                  onClick={() => addText(listing.price)}
-                  onDragStart={(e) => dragText(e, listing.price)}
-                >
-                  <Text>{listing.price}</Text>
-                </TypographyCard>
-              </Rows>
-            </Rows>
-          )}
-
-          {selectedTab === "agent" && listing.agent && (
-            <Box>
-              <Rows spacing="2u">
-                {listing.agent.headshots && (
-                  <Box>
-                    <Rows spacing="1u">
-                      <Text variant="bold">
-                        {intl.formatMessage({
-                          defaultMessage: "Headshots",
-                          description: "Label for agent headshots section",
-                        })}
-                      </Text>
-                      <Columns spacing="2u" alignY="stretch">
-                        {listing.agent.headshots.map((headshot, index) => (
-                          <Column key={index} width="1/2">
-                            <ImageCard
-                              selectable
-                              thumbnailUrl={headshot.url}
-                              alt={intl.formatMessage({
-                                defaultMessage: "Agent photo",
-                                description: "Alt text for agent photo",
-                              })}
-                              thumbnailHeight={150}
-                              onClick={async () => {
-                                await addImage(
-                                  headshot.url,
-                                  intl.formatMessage({
-                                    defaultMessage: "Agent photo",
-                                    description: "Alt text for agent photo",
-                                  }),
-                                );
-                              }}
-                              onDragStart={(e) => {
-                                dragImage(
-                                  e,
-                                  headshot.url,
-                                  intl.formatMessage({
-                                    defaultMessage: "Agent photo",
-                                    description: "Alt text for agent photo",
-                                  }),
-                                  headshot.width,
-                                  headshot.height,
-                                );
-                              }}
-                            />
-                          </Column>
-                        ))}
-                      </Columns>
-                    </Rows>
-                  </Box>
-                )}
-
-                <Rows spacing="2u">
-                  <Box>
-                    <Rows spacing="1u">
-                      <Text variant="bold">
-                        {intl.formatMessage({
-                          defaultMessage: "Name",
-                          description: "Label for agent name field",
-                        })}
-                      </Text>
-                      <TypographyCard
-                        ariaLabel={intl.formatMessage({
-                          defaultMessage: "Add agent name to design",
-                          description:
-                            "Accessibility label for adding agent name to design",
-                        })}
-                        onClick={() => addText(listing.agent?.name || "")}
-                        onDragStart={(e) =>
-                          dragText(e, listing.agent?.name || "")
-                        }
-                      >
-                        <Text>{listing.agent?.name}</Text>
-                      </TypographyCard>
-                    </Rows>
-                  </Box>
-
-                  <Box>
-                    <Rows spacing="1u">
-                      <Text variant="bold">
-                        {intl.formatMessage({
-                          defaultMessage: "Title",
-                          description: "Label for agent role title field",
-                        })}
-                      </Text>
-                      <TypographyCard
-                        ariaLabel={intl.formatMessage({
-                          defaultMessage: "Add agent title to design",
-                          description:
-                            "Accessibility label for adding agent title to design",
-                        })}
-                        onClick={() => addText(listing.agent?.roleTitle || "")}
-                        onDragStart={(e) =>
-                          dragText(e, listing.agent?.roleTitle || "")
-                        }
-                      >
-                        <Text>{listing.agent?.roleTitle}</Text>
-                      </TypographyCard>
-                    </Rows>
-                  </Box>
-
-                  <Box>
-                    <Rows spacing="0.5u">
-                      <Text variant="bold">
-                        {intl.formatMessage({
-                          defaultMessage: "Phone number",
-                          description: "Label for agent phone number field",
-                        })}
-                      </Text>
-                      <TypographyCard
-                        ariaLabel={intl.formatMessage({
-                          defaultMessage: "Add agent phone to design",
-                          description:
-                            "Accessibility label for adding agent phone to design",
-                        })}
-                        onClick={() =>
-                          addText(listing.agent?.phoneNumber || "")
-                        }
-                        onDragStart={(e) =>
-                          dragText(e, listing.agent?.phoneNumber || "")
-                        }
-                      >
-                        <Text>{listing.agent?.phoneNumber}</Text>
-                      </TypographyCard>
-                    </Rows>
-                  </Box>
-                </Rows>
-              </Rows>
-            </Box>
-          )}
-        </Rows>
-      </Rows>
-    </Box>
-  );
-};

package/templates/mls/src/pages/loading_page/loading_page.tsx

@@ -1,152 +0,0 @@
-import {
-  Box,
-  Column,
-  Columns,
-  Placeholder,
-  Rows,
-  Text,
-  Title,
-  tokens,
-} from "@canva/app-ui-kit";
-import { useQueries } from "@tanstack/react-query";
-import React, { useEffect } from "react";
-import { useIntl } from "react-intl";
-import { useLocation, useNavigate } from "react-router-dom";
-import { fetchAgents, fetchListings } from "../../adapter";
-import { Breadcrumb } from "../../components/breadcrumb/breadcrumb";
-import type { Office } from "../../real_estate.type";
-
-export const LoadingPage = () => {
-  const navigate = useNavigate();
-  const office = (useLocation().state as { office: Office })?.office;
-  const intl = useIntl();
-
-  const results = useQueries({
-    queries: [
-      {
-        queryKey: ["agents-loading", office?.id],
-        queryFn: async () => fetchAgents(office),
-        enabled: !!office,
-      },
-      {
-        queryKey: ["listings-loading", office],
-        queryFn: async () => fetchListings(office),
-        enabled: !!office,
-      },
-    ],
-  });
-
-  const isLoading = results.some((result) => result.isLoading);
-  const isError = results.every((result) => result.isError);
-  const isEmpty =
-    !isLoading &&
-    !isError &&
-    results[0].data?.agents.length === 0 &&
-    results[1].data?.listings.length === 0;
-
-  useEffect(() => {
-    if (!isLoading && !isError && !isEmpty && office) {
-      const hasListings = results[1].data?.listings?.length;
-
-      // Navigate to list page with appropriate tab based on available data
-      const defaultTab = hasListings ? "listings" : "agents";
-      navigate(`/list/${defaultTab}`, { replace: true, state: { office } });
-    }
-  }, [results, isLoading, isError, isEmpty, office, navigate]);
-
-  if (isLoading) {
-    return (
-      <Box height="full" paddingY="2u" display="flex" flexDirection="column">
-        <Breadcrumb />
-        <Box height="full" width="full" paddingTop="2u">
-          <Rows spacing="2u">
-            <Columns spacing="1u" alignY="stretch">
-              <Column width="1/2">
-                <div style={{ height: tokens.space400 }}>
-                  <Placeholder shape="rectangle" />
-                </div>
-              </Column>
-              <Column width="1/2">
-                <div style={{ height: tokens.space400 }}>
-                  <Placeholder shape="rectangle" />
-                </div>
-              </Column>
-            </Columns>
-            <div style={{ width: "100%", height: tokens.space400 }}>
-              <Placeholder shape="rectangle" />
-            </div>
-          </Rows>
-        </Box>
-      </Box>
-    );
-  }
-
-  if (isError) {
-    return (
-      <Box height="full" paddingY="2u" display="flex" flexDirection="column">
-        <Breadcrumb />
-        <Box
-          height="full"
-          width="full"
-          paddingX="2u"
-          justifyContent="center"
-          alignItems="center"
-          display="flex"
-          flexDirection="column"
-        >
-          <Rows spacing="2u" align="center">
-            <Title alignment="center">
-              {intl.formatMessage({
-                defaultMessage: "Something went wrong",
-                description: "Title shown when there's an error loading data",
-              })}
-            </Title>
-            <Text alignment="center">
-              {intl.formatMessage({
-                defaultMessage: "Unable to load data. Please try again.",
-                description: "Error message shown when data fails to load",
-              })}
-            </Text>
-          </Rows>
-        </Box>
-      </Box>
-    );
-  }
-
-  if (isEmpty) {
-    return (
-      <Box height="full" paddingY="2u" display="flex" flexDirection="column">
-        <Breadcrumb />
-        <Box
-          height="full"
-          width="full"
-          justifyContent="center"
-          alignItems="center"
-          display="flex"
-          flexDirection="column"
-          paddingX="2u"
-        >
-          <Rows spacing="2u" align="center">
-            <Title alignment="center">
-              {intl.formatMessage({
-                defaultMessage: "Nothing here yet",
-                description:
-                  "Title shown when there are no agents or listings to display",
-              })}
-            </Title>
-            <Text alignment="center">
-              {intl.formatMessage({
-                defaultMessage:
-                  "There are no agents or listings here. Try choosing another office.",
-                description:
-                  "Helper text shown when there are no agents or listings to display",
-              })}
-            </Text>
-          </Rows>
-        </Box>
-      </Box>
-    );
-  }
-
-  return null;
-};