@sanity/cli 6.0.0-alpha.4 → 6.0.0-alpha.6

package/templates/shopify-online-storefront/components/inputs/ProductHidden.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import {WarningOutlineIcon} from '@sanity/icons'
+import {type StringFieldProps, useFormValue} from 'sanity'
+import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
+
+import {productUrl} from '../../utils/shopifyUrls'
+
+type Store = {
+  id: number
+  status: string
+  isDeleted: boolean
+}
+
+export default function ProductHiddenInput(props: StringFieldProps) {
+  const store: Store = useFormValue(['store']) as Store
+
+  if (!store) {
+    return <></>
+  }
+
+  const shopifyProductUrl = productUrl(store?.id)
+  const isActive = store?.status === 'active'
+  const isDeleted = store?.isDeleted
+
+  let message
+  if (!isActive) {
+    message = (
+      <>
+        It does not have an <code>active</code> status in Shopify.
+      </>
+    )
+  }
+  if (isDeleted) {
+    message = 'It has been deleted from Shopify.'
+  }
+
+  return (
+    <Card padding={4} radius={2} shadow={1} tone="critical">
+      <Flex align="flex-start">
+        <Text size={2}>
+          <WarningOutlineIcon />
+        </Text>
+        <Box flex={1} marginLeft={3}>
+          <Box>
+            <Text size={2} weight="semibold">
+              This product is hidden
+            </Text>
+          </Box>
+          <Stack marginTop={4} space={2}>
+            <Text size={1}>{message}</Text>
+          </Stack>
+          {!isDeleted && shopifyProductUrl && (
+            <Box marginTop={4}>
+              <Text size={1}>
+                →{' '}
+                <a href={shopifyProductUrl} target="_blank" rel="noreferrer">
+                  View this product on Shopify
+                </a>
+              </Text>
+            </Box>
+          )}
+        </Box>
+      </Flex>
+    </Card>
+  )
+}

package/templates/shopify-online-storefront/components/inputs/ProductVariantHidden.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import {WarningOutlineIcon} from '@sanity/icons'
+import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
+
+export default function ProductVariantHiddenInput() {
+  return (
+    <Card padding={4} radius={2} shadow={1} tone="critical">
+      <Flex align="flex-start">
+        <Text size={2}>
+          <WarningOutlineIcon />
+        </Text>
+        <Box flex={1} marginLeft={3}>
+          <Box>
+            <Text size={2} weight="semibold">
+              This variant is hidden
+            </Text>
+          </Box>
+          <Stack marginTop={4} space={2}>
+            <Text size={1}>It has been deleted from Shopify</Text>
+          </Stack>
+        </Box>
+      </Flex>
+    </Card>
+  )
+}

package/templates/shopify-online-storefront/components/inputs/ProxyString.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import {LockIcon} from '@sanity/icons'
+import {Box, Text, TextInput, Tooltip} from '@sanity/ui'
+import {
+  type SanityDocument,
+  type StringInputProps,
+  type StringSchemaType,
+  useFormValue,
+} from 'sanity'
+import get from 'lodash.get'
+
+type Props = StringInputProps<StringSchemaType & {options?: {field?: string}}>
+
+const ProxyString = (props: Props) => {
+  const {schemaType} = props
+
+  const path = schemaType?.options?.field
+  const doc = useFormValue([]) as SanityDocument
+
+  const proxyValue = path ? (get(doc, path) as string) : ''
+
+  return (
+    <Tooltip
+      content={
+        <Box padding={2}>
+          <Text muted size={1}>
+            This value is set in Shopify (<code>{path}</code>)
+          </Text>
+        </Box>
+      }
+      portal
+    >
+      <TextInput iconRight={LockIcon} readOnly={true} value={proxyValue} />
+    </Tooltip>
+  )
+}
+
+export default ProxyString

package/templates/shopify-online-storefront/components/media/ShopifyDocumentStatus.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import {CloseIcon, ImageIcon, LinkRemovedIcon} from '@sanity/icons'
+import {forwardRef, useState} from 'react'
+
+type Props = {
+  isActive?: boolean
+  isDeleted: boolean
+  type: 'collection' | 'product' | 'productVariant'
+  url: string
+  title: string
+}
+
+const ShopifyDocumentStatus = forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const {isActive, isDeleted, title, type, url} = props
+
+  const [imageVisible, setImageVisible] = useState(true)
+
+  // Hide image on error / 404
+  const handleImageError = () => setImageVisible(false)
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        alignItems: 'center',
+        borderRadius: 'inherit',
+        display: 'flex',
+        height: '100%',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        width: '100%',
+      }}
+    >
+      {imageVisible && url ? (
+        <img
+          onError={handleImageError}
+          src={`${url}&width=400`}
+          style={{
+            height: '100%',
+            left: 0,
+            objectFit: 'contain',
+            position: 'absolute',
+            top: 0,
+            width: '100%',
+          }}
+          alt={`${title} preview`}
+        />
+      ) : (
+        <ImageIcon style={{position: 'absolute'}} />
+      )}
+
+      {/* Item has been deleted */}
+      {isDeleted ? (
+        <CloseIcon
+          style={{
+            background: 'rgba(255, 0, 0, 0.7)',
+            color: 'rgba(255, 255, 255, 0.85)',
+            height: '100%',
+            position: 'relative',
+            width: '100%',
+          }}
+        />
+      ) : (
+        <>
+          {/* Products only: item is no longer active */}
+          {type === 'product' && !isActive && (
+            <LinkRemovedIcon
+              style={{
+                background: 'rgba(0, 0, 0, 0.7)',
+                color: 'rgba(255, 255, 255, 0.85)',
+                height: '100%',
+                position: 'relative',
+                width: '100%',
+              }}
+            />
+          )}
+        </>
+      )}
+    </div>
+  )
+})
+
+export default ShopifyDocumentStatus

package/templates/shopify-online-storefront/constants.ts

@@ -0,0 +1,18 @@
+// Currency code (ISO 4217) to use when displaying prices in the studio
+// https://en.wikipedia.org/wiki/ISO_4217
+export const DEFAULT_CURRENCY_CODE = 'USD'
+
+// Document types which:
+// - cannot be created in the 'new document' menu
+// - cannot be duplicated, unpublished or deleted
+// - are from the Sanity Connect Shopify app - and can be linked to on Shopify
+export const SHOPIFY_DOCUMENT_TYPES = ['product', 'productVariant', 'collection']
+
+// API version to use when using the Sanity client within the studio
+// https://www.sanity.io/help/studio-client-specify-api-version
+export const SANITY_API_VERSION = '2023-02-07'
+
+// Your Shopify store ID.
+// This is your unique store URL (e.g. 'my-store-name.myshopify.com').
+// Set this to enable helper links in document status banners and shortcut links on products and collections.
+export const SHOPIFY_STORE_ID = '*.myshopify.com'

package/templates/shopify-online-storefront/plugins/shopifyDocumentActions/index.ts

@@ -0,0 +1,45 @@
+import {
+  definePlugin,
+  DocumentActionComponent,
+  DocumentActionsResolver,
+  NewDocumentOptionsResolver,
+} from 'sanity'
+import shopifyDelete from './shopifyDelete'
+import shopifyLink from './shopifyLink'
+
+import {SHOPIFY_DOCUMENT_TYPES} from '../../constants'
+
+export const resolveDocumentActions: DocumentActionsResolver = (prev, {schemaType}) => {
+  if (SHOPIFY_DOCUMENT_TYPES.includes(schemaType)) {
+    prev = prev.filter(
+      (previousAction: DocumentActionComponent) =>
+        previousAction.action === 'publish' ||
+        previousAction.action === 'unpublish' ||
+        previousAction.action === 'discardChanges',
+    )
+
+    return [
+      ...prev,
+      shopifyDelete as DocumentActionComponent,
+      shopifyLink as DocumentActionComponent,
+    ]
+  }
+
+  return prev
+}
+
+export const resolveNewDocumentOptions: NewDocumentOptionsResolver = (prev) => {
+  const options = prev.filter((previousOption) => {
+    return !SHOPIFY_DOCUMENT_TYPES.includes(previousOption.templateId)
+  })
+
+  return options
+}
+
+export const shopifyDocumentActions = definePlugin({
+  name: 'custom-document-actions',
+  document: {
+    actions: resolveDocumentActions,
+    newDocumentOptions: resolveNewDocumentOptions,
+  },
+})

package/templates/shopify-online-storefront/plugins/shopifyDocumentActions/shopifyDelete.tsx

@@ -0,0 +1,144 @@
+import React, {useState} from 'react'
+import {TrashIcon} from '@sanity/icons'
+import {Stack, Text, useToast} from '@sanity/ui'
+import {
+  type DocumentActionDescription,
+  type DocumentActionConfirmDialogProps,
+  useClient,
+} from 'sanity'
+import {useRouter} from 'sanity/router'
+import type {ShopifyDocument, ShopifyDocumentActionProps} from './types'
+import {SANITY_API_VERSION} from '../../constants'
+
+export default (props: ShopifyDocumentActionProps): DocumentActionDescription | undefined => {
+  const {
+    draft,
+    type,
+    published,
+  }: {
+    draft: ShopifyDocument
+    published: ShopifyDocument
+    type: string
+  } = props
+
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  const router = useRouter()
+  const toast = useToast()
+  const client = useClient({apiVersion: SANITY_API_VERSION})
+
+  let dialog: DocumentActionConfirmDialogProps | null = null
+
+  if (type === 'product') {
+    dialog = {
+      message: (
+        <Stack space={4}>
+          <Text>Delete the current product and all associated variants in your dataset.</Text>
+          <Text weight="medium">No content on Shopify will be deleted.</Text>
+        </Stack>
+      ),
+      onCancel: () => setDialogOpen(false),
+      onConfirm: async () => {
+        const productId = published?.store?.id
+
+        // Find product variant documents with matching Shopify Product ID
+        let productVariantIds: string[] = []
+        if (productId) {
+          productVariantIds = await client.fetch(
+            `*[
+                _type == "productVariant"
+                && store.productId == $productId
+              ]._id`,
+            {productId},
+          )
+        }
+
+        // Delete current document (including draft)
+        const transaction = client.transaction()
+        if (published?._id) {
+          transaction.delete(published._id)
+        }
+        if (draft?._id) {
+          transaction.delete(draft._id)
+        }
+
+        // Delete all product variants with matching IDs
+        productVariantIds?.forEach((documentId) => {
+          if (documentId) {
+            transaction.delete(documentId)
+            transaction.delete(`drafts.${documentId}`)
+          }
+        })
+
+        try {
+          await transaction.commit()
+          // Navigate back to products root
+          router.navigateUrl({path: '/structure/products'})
+        } catch (err) {
+          let message = 'Unknown Error'
+          if (err instanceof Error) message = err.message
+
+          toast.push({
+            status: 'error',
+            title: message,
+          })
+        } finally {
+          setDialogOpen(false)
+        }
+      },
+      type: 'confirm',
+    }
+  }
+
+  if (type === 'collection') {
+    dialog = {
+      message: (
+        <Stack space={4}>
+          <Text>Delete the current collection in your dataset.</Text>
+          <Text weight="medium">No content on Shopify will be deleted.</Text>
+        </Stack>
+      ),
+      onCancel: () => setDialogOpen(false),
+      onConfirm: async () => {
+        // Delete current document (including draft)
+        const transaction = client.transaction()
+        if (published?._id) {
+          transaction.delete(published._id)
+        }
+        if (draft?._id) {
+          transaction.delete(draft._id)
+        }
+
+        try {
+          await transaction.commit()
+          // Navigate back to collections root
+          router.navigateUrl({path: '/structure/collections'})
+        } catch (err) {
+          let message = 'Unknown Error'
+          if (err instanceof Error) message = err.message
+
+          toast.push({
+            status: 'error',
+            title: message,
+          })
+        } finally {
+          setDialogOpen(false)
+        }
+      },
+      type: 'confirm',
+    }
+  }
+
+  if (!dialog) {
+    return
+  }
+
+  return {
+    tone: 'critical',
+    dialog: dialogOpen && dialog,
+    icon: TrashIcon,
+    label: 'Delete',
+    onHandle: () => setDialogOpen(true),
+    shortcut: 'Ctrl+Alt+D',
+  }
+}

package/templates/shopify-online-storefront/plugins/shopifyDocumentActions/shopifyLink.ts

@@ -0,0 +1,39 @@
+import {EarthGlobeIcon} from '@sanity/icons'
+import {type DocumentActionDescription} from 'sanity'
+import {collectionUrl, productUrl, productVariantUrl} from '../../utils/shopifyUrls'
+import type {ShopifyDocument, ShopifyDocumentActionProps} from './types'
+
+export default (props: ShopifyDocumentActionProps): DocumentActionDescription | undefined => {
+  const {published, type}: {published: ShopifyDocument; type: string} = props
+
+  if (!published || published?.store?.isDeleted) {
+    return
+  }
+
+  let url: string | null = null
+
+  if (type === 'collection') {
+    url = collectionUrl(published?.store?.id)
+  }
+  if (type === 'product') {
+    url = productUrl(published?.store?.id)
+  }
+  if (type === 'productVariant') {
+    url = productVariantUrl(published?.store?.productId, published?.store?.id)
+  }
+
+  if (!url) {
+    return
+  }
+
+  if (published && !published?.store?.isDeleted) {
+    return {
+      label: 'Edit in Shopify',
+      icon: EarthGlobeIcon,
+      onHandle: () => {
+        url ? window.open(url) : void 'No URL'
+      },
+      shortcut: 'Ctrl+Alt+E',
+    }
+  }
+}

package/templates/shopify-online-storefront/plugins/shopifyDocumentActions/types.ts

@@ -0,0 +1,14 @@
+import {type DocumentActionProps, type SanityDocument} from 'sanity'
+
+export type ShopifyDocument = SanityDocument & {
+  store: {
+    id: number
+    productId: number
+    isDeleted: boolean
+  }
+}
+
+export interface ShopifyDocumentActionProps extends DocumentActionProps {
+  published: ShopifyDocument
+  draft: ShopifyDocument
+}

package/templates/shopify-online-storefront/schemaTypes/blocks/blockContent.ts

@@ -0,0 +1,32 @@
+import {defineField, defineArrayMember} from 'sanity'
+
+/**
+ * This is the schema definition for the rich text fields used for
+ * for this blog studio. When you import it in schemas.js it can be
+ * reused in other parts of the studio with:
+ *  {
+ *    name: 'someName',
+ *    title: 'Some title',
+ *    type: 'blockContent'
+ *  }
+ */
+export default defineField({
+  title: 'Block Content',
+  name: 'blockContent',
+  type: 'array',
+  of: [
+    defineArrayMember({
+      title: 'Block',
+      type: 'block',
+    }),
+    // You can add additional types here. Note that you can't use
+    // primitive types such as 'string' and 'number' in the same array
+    // as a block type.
+    defineArrayMember({
+      type: 'callout',
+    }),
+    defineArrayMember({
+      type: 'accordion',
+    }),
+  ],
+})

package/templates/shopify-online-storefront/schemaTypes/documents/collection.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import {defineField, defineType} from 'sanity'
+import {PackageIcon} from '@sanity/icons'
+import pluralize from 'pluralize-esm'
+import CollectionHiddenInput from '../../components/inputs/CollectionHidden'
+import ShopifyIcon from '../../components/icons/Shopify'
+import ShopifyDocumentStatus from '../../components/media/ShopifyDocumentStatus'
+
+const GROUPS = [
+  {
+    name: 'theme',
+    title: 'Theme',
+  },
+  {
+    default: true,
+    name: 'editorial',
+    title: 'Editorial',
+  },
+  {
+    name: 'shopifySync',
+    title: 'Shopify sync',
+    icon: ShopifyIcon,
+  },
+  {
+    name: 'seo',
+    title: 'SEO',
+  },
+]
+
+export default defineType({
+  name: 'collection',
+  title: 'Collection',
+  type: 'document',
+  icon: PackageIcon,
+  groups: GROUPS,
+  fields: [
+    // Product hidden status
+    defineField({
+      name: 'hidden',
+      type: 'string',
+      components: {
+        field: CollectionHiddenInput,
+      },
+      hidden: ({parent}) => {
+        const isDeleted = parent?.store?.isDeleted
+        return !isDeleted
+      },
+    }),
+    // Shopify collection
+    defineField({
+      name: 'store',
+      title: 'Shopify',
+      type: 'shopifyCollection',
+      description: 'Collection data from Shopify (read-only)',
+      group: 'shopifySync',
+    }),
+  ],
+  preview: {
+    select: {
+      imageUrl: 'store.imageUrl',
+      isDeleted: 'store.isDeleted',
+      rules: 'store.rules',
+      title: 'store.title',
+    },
+    prepare(selection) {
+      const {imageUrl, isDeleted, rules, title} = selection
+      const ruleCount = rules?.length || 0
+
+      return {
+        media: (
+          <ShopifyDocumentStatus
+            isDeleted={isDeleted}
+            type="collection"
+            url={imageUrl}
+            title={title}
+          />
+        ),
+        subtitle: ruleCount > 0 ? `Automated (${pluralize('rule', ruleCount, true)})` : 'Manual',
+        title,
+      }
+    },
+  },
+})

package/templates/shopify-online-storefront/schemaTypes/documents/product.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import {TagIcon} from '@sanity/icons'
+import {defineField, defineType} from 'sanity'
+import pluralize from 'pluralize-esm'
+import ShopifyIcon from '../../components/icons/Shopify'
+import ProductHiddenInput from '../../components/inputs/ProductHidden'
+import ShopifyDocumentStatus from '../../components/media/ShopifyDocumentStatus'
+import {getPriceRange} from '../../utils/getPriceRange'
+
+const GROUPS = [
+  {
+    name: 'editorial',
+    title: 'Editorial',
+    default: true,
+  },
+  {
+    name: 'shopifySync',
+    title: 'Shopify sync',
+    icon: ShopifyIcon,
+  },
+]
+
+export default defineType({
+  name: 'product',
+  title: 'Product',
+  type: 'document',
+  icon: TagIcon,
+  groups: GROUPS,
+  fields: [
+    defineField({
+      name: 'hidden',
+      type: 'string',
+      components: {
+        field: ProductHiddenInput,
+      },
+      group: GROUPS.map((group) => group.name),
+      hidden: ({parent}) => {
+        const isActive = parent?.store?.status === 'active'
+        const isDeleted = parent?.store?.isDeleted
+        return !parent?.store || (isActive && !isDeleted) || (isActive && !isDeleted)
+      },
+    }),
+    defineField({
+      name: 'body',
+      type: 'blockContent',
+      group: 'editorial',
+    }),
+    defineField({
+      name: 'store',
+      title: 'Shopify',
+      type: 'shopifyProduct',
+      description: 'Product data from Shopify (read-only)',
+      group: 'shopifySync',
+    }),
+  ],
+  preview: {
+    select: {
+      isDeleted: 'store.isDeleted',
+      options: 'store.options',
+      previewImageUrl: 'store.previewImageUrl',
+      priceRange: 'store.priceRange',
+      status: 'store.status',
+      title: 'store.title',
+      variants: 'store.variants',
+      sanityTitle: 'title',
+    },
+    prepare(selection) {
+      const {isDeleted, options, previewImageUrl, priceRange, status, title, variants} = selection
+
+      const optionCount = options?.length
+      const variantCount = variants?.length
+
+      const description = [
+        variantCount ? pluralize('variant', variantCount, true) : 'No variants',
+        optionCount ? pluralize('option', optionCount, true) : 'No options',
+      ]
+
+      let subtitle = getPriceRange(priceRange)
+      if (status !== 'active') {
+        subtitle = '(Unavailable in Shopify)'
+      }
+      if (isDeleted) {
+        subtitle = '(Deleted from Shopify)'
+      }
+
+      return {
+        description: description.join(' / '),
+        subtitle,
+        title,
+        media: (
+          <ShopifyDocumentStatus
+            isActive={status === 'active'}
+            isDeleted={isDeleted}
+            type="product"
+            url={previewImageUrl}
+            title={title}
+          />
+        ),
+      }
+    },
+  },
+})