Add restricted zones to pet appearance support UI

src/app/WardrobePage/support/Metadata.js

@@ -5,7 +5,7 @@ import { Box } from "@chakra-ui/react";
  * Metadata is a UI component for showing metadata about something, as labels
  * and their values.
  */
-function Metadata({ children, ...otherProps }) {
+function Metadata({ children, ...props }) {
   return (
     <Box
       as="dl"
@@ -13,24 +13,24 @@ function Metadata({ children, ...otherProps }) {
       gridTemplateColumns="max-content auto"
       gridRowGap="1"
       gridColumnGap="2"
-      {...otherProps}
+      {...props}
     >
       {children}
     </Box>
   );
 }
 
-function MetadataLabel({ children }) {
+function MetadataLabel({ children, ...props }) {
   return (
-    <Box as="dt" gridColumn="1" fontWeight="bold">
+    <Box as="dt" gridColumn="1" fontWeight="bold" {...props}>
       {children}
     </Box>
   );
 }
 
-function MetadataValue({ children }) {
+function MetadataValue({ children, ...props }) {
   return (
-    <Box as="dd" gridColumn="2">
+    <Box as="dd" gridColumn="2" {...props}>
       {children}
     </Box>
   );

src/app/WardrobePage/support/PosePickerSupport.js

@@ -11,6 +11,8 @@ import {
   Wrap,
   WrapItem,
   useDisclosure,
+  UnorderedList,
+  ListItem,
 } from "@chakra-ui/react";
 import {
   ArrowBackIcon,
@@ -55,6 +57,10 @@ function PosePickerSupport({
             imageUrl(size: SIZE_600)
             canvasMovieLibraryUrl
           }
+          restrictedZones {
+            id
+            label @client
+          }
 
           # For AppearanceLayerSupportModal to know the name
           species {
@@ -185,7 +191,7 @@ function PosePickerSupport({
               .map((layer) => [`${layer.zone.label} (${layer.zone.id})`, layer])
               .sort((a, b) => a[0].localeCompare(b[0]))
               .map(([text, layer]) => (
-                <WrapItem>
+                <WrapItem key={layer.id}>
                   <PetLayerSupportLink
                     outfitState={{ speciesId, colorId, pose }}
                     petAppearance={currentPetAppearance}
@@ -198,6 +204,23 @@ function PosePickerSupport({
               ))}
           </Wrap>
         </MetadataValue>
+        <MetadataLabel>Restricts:</MetadataLabel>
+        <MetadataValue maxHeight="64" overflowY="auto">
+          {currentPetAppearance.restrictedZones.length > 1 ? (
+            <UnorderedList>
+              {currentPetAppearance.restrictedZones
+                .map((zone) => `${zone.label} (${zone.id})`)
+                .sort((a, b) => a[0].localeCompare(b[0]))
+                .map((zoneText) => (
+                  <ListItem>{zoneText}</ListItem>
+                ))}
+            </UnorderedList>
+          ) : (
+            <Box fontStyle="italic" opacity="0.8">
+              None
+            </Box>
+          )}
+        </MetadataValue>
       </Metadata>
     </Box>
   );