![\"\"](\"/images/avatars/designer_photo_placeholder_125px.jpg\")
\n )\n}\n","import { cn } from 'lib/util/cn'\nimport { MouseEvent, ReactNode, useEffect, useState, JSX, HtmlHTMLAttributes, forwardRef } from 'react'\nimport { XIcon } from 'lucide-react'\nimport { HTMLAttributes } from 'react'\n\nexport type ButtonColor = keyof typeof classNames.colors\ntype ButtonRole = 'primary' | 'secondary' | 'destructive'\n\nexport type ButtonSize = 'normal' | 'cut'\n\nexport interface ButtonProps extends HtmlHTMLAttributes\n \n
\n )\n}\n","import { IconName } from '@fortawesome/fontawesome-common-types'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { ReactElement } from 'react'\n\nconst placeholders = {\n fileImageLight: 'file-image',\n filePowerpointLight: 'file-powerpoint',\n fileVideoLight: 'file-video',\n}\n\n// Added a string type since the BE sometimes returns a string for the file name\n// See usage in thumb-rate-request-modal.tsx\nexport type Placeholder = keyof typeof placeholders | string\ninterface QueueTypePlaceholderProps {\n fileName: Placeholder\n className?: string\n color?: string\n}\n\nexport default function QueueTypePlaceholder({ fileName, className, color }: QueueTypePlaceholderProps): ReactElement {\n const iconName = (placeholders[fileName] || 'file-image') as IconName\n return \n onChange(e.target.value)}\n />\n
\n )\n}\n","import { StylesConfig } from 'react-select'\n\ntype OptionType = {\n label: string\n value: string\n}\ntype isMulti = false\n\nexport const selectStyles: StylesConfig\n
\n \n \n {value}\n \n
\n )\n}\n","import styles from './text-input.module.scss'\nimport { HTMLAttributes, useEffect, useRef } from 'react'\n\nexport interface TextInputProps extends Omit\n {label && (\n \n )}\n
\n )\n}\n","import { Thumbnail } from 'interfaces/ticket'\nimport { RatingsSteps, SetStepType, TicketFeedbackValues } from 'interfaces/ticket_feedback'\nimport { updateTicketFeedback } from 'lib/api/ticket-feedbacks/ticket-feedbacks'\nimport Modal from 'lib/components/modals/modal'\nimport Textarea from 'lib/components/textarea/textarea'\nimport { toast } from 'lib/components/toast/toast'\nimport { snakeCaseKeys } from 'lib/object/utils'\nimport { ThumbsDown, ThumbsUp } from 'lucide-react'\nimport { useTicketFeedbackContext } from 'providers/ticket-feedback-provider'\nimport { ChangeEvent, ReactElement, useState } from 'react'\nimport Button from './button'\nimport QueueTypePlaceholder from './queue-type-placeholder'\n\nconst classNames = {\n thumbsDownButton: 'tw-mt-4 tw-ml-4',\n thumbsIcon: 'tw-mr-2',\n thumbsUpButton: 'tw-mt-4',\n ticketImage: 'tw-max-h-56 tw-max-w-96',\n ticketTitle: 'tw-mt-4',\n}\n\nfunction Image({ thumbnail }: { thumbnail: Thumbnail }) {\n if (thumbnail.placeholder) return \n
\n {subject}
\n \n handleSave(TicketFeedbackValues.ThumbsUp)}\n >\n \n handleSave(TicketFeedbackValues.ThumbsDown)}\n >\n \n
\n \n )\n}\n\nfunction Feedback() {\n const { feedbackId, ratingModalTicket: ticket, setStep, thumbRating, shuffledReasons } = useTicketFeedbackContext()\n const reasons = ticket.feedbackReasons\n const [feedback, setFeedback] = useState('')\n const [selectedReasons, setSelectedReasons] = useState\n
\n \n Select one or more areas that {thumbRating === TicketFeedbackValues.ThumbsUp ? 'met' : \"didn't meet\"} your\n expectations\n
\n \n {shuffledReasons.map((index) => (\n handleSelectReason(index)}\n className={selectedReasons.includes(index) ? classNames.selectedReason : classNames.reason}\n >\n {reasons[index]}\n
\n ))}\n \n
\n \n \n
\n \n If you need more support, please reach out to us on{' '}\n \n help@designpickle.com\n \n .\n
\n \n \n )\n}\n\nexport default function ThumbRateRequestModal({\n onModalClose,\n}: {\n onModalClose?: (value?: boolean) => void\n}): ReactElement {\n const { setStep, showTicketRatingModal, step, toggleFeedbackModalVisibility } = useTicketFeedbackContext()\n\n const classNames = {\n modalHeader: 'tw-text-center tw-font-semibold tw-pr-12',\n modalBody: 'tw-flex tw-justify-center tw-items-center tw-flex-col tw-mt-4 tw-h-96',\n }\n\n function handleModalClose() {\n toggleFeedbackModalVisibility(false)\n if (onModalClose) {\n onModalClose()\n }\n }\n\n if (step === RatingsSteps.ThankYou) {\n handleModalClose()\n toast.success('Thank you for your feedback!')\n }\n\n function Step() {\n if (step === RatingsSteps.Rate) {\n return \n Did this request meet your expectations?\n
\n \n
\n \n
\n )\n}\n\nexport function getInitialFilters(emptyFilters: AdminFilters): AdminFilters {\n const windowUrl = window.location.search\n const params = new URLSearchParams(windowUrl)\n const filters = { ...emptyFilters }\n\n Object.keys(emptyFilters).forEach((filterKey) => {\n if (params.has(filterKey)) {\n const value = params.get(filterKey)\n if (value === 'true' || value === 'false') {\n filters[filterKey] = value === 'true'\n } else {\n filters[filterKey] = value\n }\n }\n })\n\n return filters as AdminFilters\n}\n\ninterface SearchTitleFilterProps {\n value: string\n updateValue: (string) => void\n onClick?: () => void\n placeholder: string\n}\n\nexport const SearchTitleFilter = ({\n value,\n updateValue,\n placeholder,\n onClick,\n}: SearchTitleFilterProps): JSX.Element => {\n return (\n \n
\n \n \n
\n {!hasOnlyFalsyValues(props.filters) && (\n \n Clear\n
\n )}\n \n \n
\n {props.downloadCSV && props.downloadCSV()}\n \n updateValue(e.target.value)}\n />\n \n
\n )\n}\n","import Dropdown from 'lib/components/dropdown/dropdown'\nimport Brands from '../pages/request/brands/brands'\nimport { Brand } from 'interfaces/brand'\nimport BrandsProvider from '../pages/request/brands/brands-provider'\n\ninterface BrandsPopoverProps {\n onChange: (brand: Brand) => void\n brand: Brand\n companyId: number\n}\n\nexport default function BrandsPopover({ onChange, brand, companyId }: BrandsPopoverProps): JSX.Element {\n const title = brand ? brand.name : 'Select Brand'\n\n return (\n \n \n \n
\n \n
\n )\n}\n","import { ReactElement, ReactNode } from 'react'\n\nimport { CompanyTag } from 'lib/api/company-tags/company-tags'\nimport Badge from 'lib/components/badge/badge'\nimport { SearchTicketCompanyTag } from 'interfaces/ticket'\n\ninterface CompanyTaggingPopoverTitleProps {\n selectedTags: Array\n 1} label={''} onChange={bulkAllToggle} />\n
\n\n {children}
\n \n {totalSelected} Tickets Selected\n
\n \n {emptyTagTitleElement}\n
\n )\n }\n\n const numberOfCharacters = selectedTags.reduce((acc, tag) => acc + tag.name.length, 0)\n\n if (numberOfCharacters < maxCharacters) {\n return (\n \n
\n )\n }\n\n const truncatedTags = []\n let truncatedTagsLength = 0\n\n for (const tag of selectedTags) {\n if (tag.name.length + truncatedTagsLength < maxCharacters) {\n truncatedTags.push(tag)\n truncatedTagsLength += tag.name.length\n } else {\n const truncationLength = maxCharacters + 5 - truncatedTagsLength\n truncatedTags.push({ ...tag, name: `${tag.name.slice(0, truncationLength)}...` })\n break\n }\n }\n\n const numberOfRemainingTags = selectedTags.length - truncatedTags.length\n return (\n \n {selectedTags.map((tag) => (\n \n {tag.name}\n \n ))}\n
\n )\n}\n","import { HTMLAttributes, MouseEvent } from 'react'\nimport Dropdown, { defaultClassNames } from 'lib/components/dropdown/dropdown'\nimport { cn } from 'lib/util/cn'\n\nimport { useCompanyTaggingContext } from 'providers/company-tagging-provider'\nimport CompanyTags from './company-tags'\nimport CompanyTaggingPopoverTitle from './company-tagging-popover-title'\nimport { Pencil, X } from 'lucide-react'\n\ninterface CompanyTaggingPopoverProps {\n size?: 'xs' | 'full'\n}\n\nexport default function CompanyTaggingPopover({ size = 'xs' }: CompanyTaggingPopoverProps) {\n const { selectedTags } = useCompanyTaggingContext()\n\n const classNames = {\n ...defaultClassNames,\n popover: 'tw-width-full',\n }\n\n return (\n \n Select tag(s)} />}\n label={size === 'full' ? null : 'Tags'}\n openByDefault={false}\n size={size}\n render={(close) =>
\n )\n}\n\ninterface SelectBoxCompanyTaggingPopoverProps {\n disabled?: boolean\n buttonClassName?: HTMLAttributes\n \n {selectedTags?.length > 0 ? selectedTags?.map((tag) => tag.name).join(', ') : 'Tags'}\n \n \n
\n ) : (\n 'Tags'\n )}\n \n )\n\n return (\n \n \n + Add tag(s)\n
\n }\n />\n \n \n {selectedTags.map((tag) => (\n \n {tag.name}\n {\n removeTag(tag)\n }}\n className={`${classNames.xButton.base} ${classNames.xButton.tagColor[tagColor]}`}\n data-testid=\"tag-input-remove-tag\"\n >\n
\n ))}\n \n {showCreateTagButton() &&
\n )\n}\n\nfunction NoTags() {\n return (\n \n handleTagSelectBox(tag)}\n isChecked={isTagSelected(tag)}\n label={tag.name}\n id={`tag-checkbox-${tag.id}`}\n indeterminate={isTagIndeterminate(tag)}\n />\n {tag.meta.permissions.update && (\n ) => handleEditTagClick(e, tag)}\n size=\"xs\"\n data-testid={`tag-edit-button-${tag.id}`}\n className=\"tw-mr-2\"\n >\n
\n ))}\n \n ![\"No](\"/images/states/not-found.svg\")
\n
\n )\n}\n\nfunction CreateTagButton() {\n const { searchTerm, createAndSelectCompanyTag } = useCompanyTaggingContext()\n\n async function handleClick() {\n if (!searchTerm || searchTerm.includes(' ')) return\n await createAndSelectCompanyTag(searchTerm)\n }\n\n return (\n \n Oops, no tags were found!
\nCreate a new tag by typing in the box above
\n\n {showTitle &&
\n )\n}\n","import { useCompanyTaggingContext } from 'providers/company-tagging-provider'\n\ninterface TagCountProps {\n tagId: number\n}\n\nexport default function TagCount({ tagId }: TagCountProps) {\n const { tagCount } = useCompanyTaggingContext()\n\n if (tagCount > 0) {\n return (\n <>\n {tagCount} request(s){' '}\n using the tag\n \n )\n } else {\n return <>{tagCount} requests using the tag\n }\n}\n","import { ChangeEvent, useEffect, useRef, useState } from 'react'\nimport { Trash } from 'lucide-react'\n\nimport { CompanyTag } from 'lib/api/company-tags/company-tags'\nimport TextInput from 'lib/components/text-input/text-input'\n\nimport Button from 'components/core/button'\nimport { useCompanyTaggingContext, ViewStates } from 'providers/company-tagging-provider'\nimport { errorMessage } from './input-validation'\nimport TagCount from 'components/elements/company-tagging/tag-count'\nimport { cn } from 'lib/util/cn'\nimport { toast } from 'lib/components/toast/toast'\n\ninterface EditTagProps {\n tag: CompanyTag\n}\n\nexport default function EditCompanyTag({ tag }: EditTagProps) {\n const [newName, setNewName] = useState(tag?.name)\n const nameInputRef = useRef(null)\n const { updateCompanyTag, setCurrentView } = useCompanyTaggingContext()\n\n const errorMessageText = errorMessage(newName)\n\n async function handleSave() {\n try {\n await updateCompanyTag(tag, newName)\n } catch (error) {\n toast.error('Error updating tag')\n console.error('Error updating tag', error)\n }\n }\n\n useEffect(() => {\n if (open && nameInputRef.current) {\n nameInputRef.current.focus()\n }\n })\n\n return (\n <>\n Tags
}\n {warningMessage &&{warningMessage}
}\n\n
\n {errorMessageText}
}\n\n ) => setNewName(event.target.value)}\n placeholder=\"Tag name\"\n ref={nameInputRef}\n />\n {errorMessageText && {errorMessageText}}\n
\n \n
\n )\n}\n","import { useEffect, useRef } from 'react'\nimport { ArrowLeft, X } from 'lucide-react'\n\nimport IconButton from 'lib/components/buttons/icon-button'\n\nimport { useCompanyTaggingContext, ViewStates } from 'providers/company-tagging-provider'\nimport CompanyTaggingTypeahead from './company-tagging-typeahead'\nimport EditTag from './edit-company-tag'\nimport { DeleteCompanyTag } from './delete-company-tag'\n\ninterface CompanyTagsProps {\n handleXClick: () => void\n showTitle?: boolean\n}\n\nexport default function CompanyTags({ handleXClick, showTitle = true }: CompanyTagsProps) {\n const { currentView, setCurrentView } = useCompanyTaggingContext()\n const containerRef = useRefAre you sure you want to delete the tag '{tag.name}'?
\n\n \n \n
\n \n {currentView.viewState === ViewStates.Search &&
\n )\n}\n","import { Fragment, ReactNode, useRef } from 'react'\nimport { Dialog, Transition } from '@headlessui/react'\n\ninterface ConfirmationModalProps {\n afterEnter?: () => void\n afterLeave?: () => void\n cancelAction: (event) => void | Promise\n \n \n \n \n
\n )}\n\n {currentView.viewState === ViewStates.Edit && currentView.tag && {currentView.viewState} Tag
\n\n \n \n
\n \n \n \n \n
\n \n
\n \n \n \n
\n \n \n {title}\n \n
\n \n
\n \n {message}\n
\n \n \n {confirmBtnText}\n \n \n {cancelBtnText}\n \n
\n \n
\n )\n }\n\n return (\n <>\n {!hideMoveToTop && isStatusOnDeck(status) && ticketAbility?.can('moveToTop') && (\n \n
\n )\n }\n\n return (\n <>\n {haveFiles(ticketFilesCount) && downloadableFiles?.length > 0 && (\n {children}
\n\n return (\n \n {children} \n
\n )\n }\n\n return (\n \n
\n \n )\n}\n","import { JSX } from 'react'\nimport ReactPaginate from 'react-paginate'\n\ninterface Props {\n forcePage?: number\n pageCount: number\n onPageChange: (selectedItem: { selected }) => void\n}\n\nexport default function Pagination(props: Props): JSX.Element {\n return (\n \n {icon}\n {title}\n
\n\n \"\n nextLinkClassName=\"tw-border-t-2 tw-border-transparent tw-pt-4 tw-pl-1 tw-inline-flex tw-items-center tw-text-sm tw-font-medium tw-text-peppercorn hover:tw-text-gherkin hover:tw-border-gherkin tw-pt-3\"\n onPageChange={props.onPageChange}\n pageClassName=\"tw-hidden md:tw--mt-px md:tw-flex\"\n pageCount={props.pageCount}\n pageLinkClassName=\"tw-border-t-2 tw-border-transparent tw-inline-flex tw-items-center tw-text-sm tw-font-semibold tw-text-peppercorn hover:tw-text-gherkin hover:tw-border-gherkin tw-justify-center tw-px-3 tw-pt-3\"\n pageRangeDisplayed={2}\n previousClassName=\"tw--mt-px tw-w-0 tw-flex-1 tw-flex tw-justify-start\"\n previousLabel=\"< Previous\"\n previousLinkClassName=\"tw-border-t-2 tw-border-transparent tw-pt-4 tw-pl-1 tw-inline-flex tw-items-center tw-text-sm tw-font-medium tw-text-peppercorn hover:tw-text-gherkin hover:tw-border-gherkin tw-pt-3\"\n />\n
\n )\n}\n","import QueueTypePlaceholder from 'components/core/queue-type-placeholder'\nimport { TicketTemplate } from 'interfaces/ticket_template'\nimport { Skill } from 'interfaces/skill'\nimport { Ticket } from 'interfaces/ticket'\nimport { SkillWithCategoryFields } from 'interfaces/project-template'\n\ninterface DeliverablesTableTitleCellProps {\n ticket: Ticket | TicketTemplate | Skill | SkillWithCategoryFields\n isAdmin?: boolean\n}\n\nconst DeliverablesTableTitleCell = ({ ticket, isAdmin }: DeliverablesTableTitleCellProps) => {\n const url = isAdmin ? `/admin/tickets/${ticket.id}` : `/tickets/${ticket.id}`\n\n if ('skill' in ticket || 'skillCategoryName' in ticket) {\n const skill = 'skill' in ticket ? ticket.skill : ticket\n\n return (\n \n
\n )\n }\n\n return (\n \n 
\n
\n \n
\n {skill.name}
\n {skill.skillCategoryName}
\n \n {ticket?.thumbnail?.placeholder ? (\n \n
\n )\n}\n\nexport default DeliverablesTableTitleCell\n","import { Ticket } from 'interfaces/ticket'\nimport { IconFlyoutMenu } from 'lib/components/dropdown-icon-menu/icon-flyout-menu'\nimport ActiveTabMenu from '../dropdown/menus/active-tab-menu'\nimport DraftTabMenu from '../dropdown/menus/draft-tab-menu'\nimport ArchivedTabMenu from '../dropdown/menus/archived-tab-menu'\nimport { isStatusDraft, isStatusArchived, isStatusCanceled } from 'lib/ticket/utils'\nimport { useConfirmationModalContext } from 'providers/confirmation-modal-provider'\nimport { useCallback } from 'react'\n\nconst ProjectDeliverablesFlyoutMenu = ({ ticket, onChange }: { ticket: Ticket; onChange: () => void }) => {\n const {\n id,\n subject,\n filesDownloadUrl,\n friendlyStatusName,\n user,\n ticketFilesCount,\n url,\n skillName,\n requestId,\n currentVersion,\n } = ticket\n\n const { menuButtonActionWithCallbacks } = useConfirmationModalContext()\n\n const menuButtonAction = menuButtonActionWithCallbacks(onChange)\n\n const ticketName = subject || `Untitled ${skillName}`\n\n const getActiveTab = useCallback(() => {\n if (isStatusDraft(friendlyStatusName)) {\n return (\n \n
\n )\n\n const TableContent = () => (\n <>\n \n
\n \n You don't have any requests in this project.\n
\n \n Great design starts with a plan. Build your project by adding new or existing requests, keeping all your\n deliverables organized and aligned with your creative goals.\n
\n \n \n \n
\n \n \n \n
\n {(isLoading || isFetchingNextPage || isRefetching) && (\n
\n \n )\n\n useEffect(() => {\n if (error) {\n toast.error('Failed to fetch project requests')\n console.error('Failed to fetch project requests', error)\n }\n }, [error])\n\n useEffect(() => {\n if (inView && !isFetchingNextPage) {\n fetchNextPage()\n }\n }, [fetchNextPage, inView, isFetchingNextPage])\n\n return (\n \n
\n )\n}\ninterface BulkActionHeadersProps {\n table: Table\n \n
\n {!readOnly && (\n \n \n )}\n
\n {tableData.length === 0 && !isLoading ? \n
\n {!readOnly && (\n \n 0}\n onClick={() => table.toggleAllRowsSelected()}\n indeterminate={Object.keys(rowSelection).length < table.getRowCount()}\n />\n {\n handleRemoveDeliverablesClick(Object.keys(rowSelection).map((key) => tickets?.[key]))\n }}\n size=\"cut\"\n color=\"outlineCherry\"\n disabled={Object.keys(rowSelection).length === 0}\n className=\"tw-flex tw-items-center tw-gap-2 tw-p-2\"\n >\n
\n \n
\n )\n}\n\nexport default AddDeliverablesTable\n","import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'\nimport Button from 'components/core/button'\nimport SearchInput from 'lib/components/search-input/search-input'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { SubscriptionTypeIcon } from '../deliverable-type'\nimport { SubscriptionType } from 'interfaces/project-template'\nimport { useMutation, useQuery } from '@tanstack/react-query'\nimport { request } from 'lib/api/fetch-api'\nimport { Skeleton } from 'lib/components/skeleton/skeleton'\nimport { toast } from 'sonner'\nimport { SkillCategorySkill } from 'lib/api/skills/skills'\nimport { cn } from 'lib/util/cn'\nimport QuantitySelector from 'lib/components/quantity-selector/quantity-selector'\n\nconst CreateDeliverablesTableTitleCell = ({ skill }: { skill: SkillCategorySkill }) => (\n \n \n
\n \n
\n \n
\n \n \n \n
\n {(isLoading || isFetchingNextPage) && (\n
\n | {flexRender(cell.column.columnDef.cell, cell.getContext())} | \n ))}\n \n ))}\n
\n
\n \n {Object.keys(rowSelection).length} additional request{Object.keys(rowSelection).length !== 1 && 's'} selected\n
\n\n \n \n
\n \n \n
\n)\n\ninterface CreateDeliverablesTableProps {\n onFinished: () => void\n onCancel: () => void\n projectId: number\n}\n\nconst CreateDeliverablesTable = ({ onFinished, onCancel, projectId }: CreateDeliverablesTableProps) => {\n const [searchValue, setSearchValue] = useState('')\n const [selectedRows, setSelectedRows] = useState\n
\n {skill.name}
\n {skill.skillCategoryName}
\n \n
\n )\n}\n\nexport default CreateDeliverablesTable\n","import { LinkLikeButton } from 'components/core/button'\nimport { useState } from 'react'\n\nexport default function ExpandableText({ text }: { text: string }) {\n const [isExpanded, setIsExpanded] = useState(false)\n\n return (\n {tableData.length} requests found
\n\n \n \n
\n {isLoading &&
\n | \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n | \n ))}\n \n ))}\n
\n
\n \n {selectedRows.length} request{selectedRows.length !== 1 && 's'} selected\n
\n\n \n \n
\n \n setIsExpanded(!isExpanded)}>\n {isExpanded ? 'Show less' : 'Show more'}\n \n \n )}\n
\n )\n}\n","import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'\nimport GrowingTextInput from 'components/core/text-input/growing-text-input'\nimport { Brand } from 'interfaces/brand'\nimport { request, requestQuery } from 'lib/api/fetch-api'\nimport CopyTextButton from 'lib/components/buttons/copy-text-button'\nimport IconButton from 'lib/components/buttons/icon-button'\nimport { Drawer } from 'lib/components/drawer/drawer'\nimport { displayDate } from 'lib/util/date'\nimport {\n ArrowLeftIcon,\n ArrowRightToLineIcon,\n CheckIcon,\n CopyIcon,\n FolderOpenIcon,\n FoldersIcon,\n LinkIcon,\n LoaderCircleIcon,\n NotepadTextIcon,\n PencilIcon,\n Trash2Icon,\n TrashIcon,\n XIcon,\n} from 'lucide-react'\nimport { useUserContext } from 'providers/user-provider'\nimport { ChangeEvent, useEffect, useState } from 'react'\nimport BrandsPopover from '../brands-popover'\nimport { toast } from 'lib/components/toast/toast'\nimport { LoadingScreen } from 'components/pages/requests/empty-screens'\nimport CompanyTaggingProvider, { ChangeTagAction } from 'providers/company-tagging-provider'\nimport CompanyTaggingPopover from '../company-tagging/company-tagging-popover'\nimport { CompanyTag } from 'lib/api/company-tags/company-tags'\nimport { useAllCompanyTagsContext } from 'providers/all-company-tags-provider'\nimport ProjectDeliverablesTable from './project-deliverables-table'\nimport { Project } from 'interfaces/project'\nimport AddDeliverablesTable from './add-deliverables-table'\nimport { Ticket } from 'interfaces/ticket'\nimport Button from 'components/core/button'\nimport Textarea from 'lib/components/textarea/textarea'\nimport CreateDeliverablesTable from './create-deliverables-table'\nimport Tooltip from 'lib/components/tooltip/tooltip'\nimport ExpandableText from 'lib/components/expandable-text/expandable-text'\nimport Link from 'lib/components/link/link'\nimport { Partner } from 'interfaces/partner'\nimport { IconFlyoutMenu } from 'lib/components/dropdown-icon-menu/icon-flyout-menu'\nimport { PATHS } from 'lib/constants/paths'\nimport Banner from 'lib/components/banner/banner'\nimport { updateParams } from 'lib/util/url'\ntype DrawerState = 'details' | 'add-deliverables' | 'remove-deliverables' | 'read-only' | 'create-deliverables'\nexport interface ProjectDrawerProps {\n isOpen: boolean\n setOpen: (open: boolean) => void\n projectId?: number\n onUpdate?: () => void\n project?: Project\n readOnly?: boolean\n}\n\nexport default function ProjectDrawer({\n isOpen,\n setOpen,\n projectId,\n onUpdate,\n project: passedProject,\n readOnly,\n}: ProjectDrawerProps) {\n const params = new URLSearchParams(window.location.search)\n const [drawerState, setDrawerState] = useState{text.length > 200 && !isExpanded ? `${text.substring(0, 200)}...` : text}
\n {text.length > 200 && (\n \n\n setOpen(false)} className=\"tw-mr-2\">\n \n
\n \n \n \n
\n ) : (\n {project?.name}
\n\n
\n Last updated on {displayDate(project?.updatedAt)}
\n {project?.projectTemplate?.partner && (\n <>\n \n
\n )}\n Loading...
\n \n \n
\n
\n \n
\n \n
\n )\n }\n\n if (showDeleteProject) {\n return Loading...
\n Delete "{project.name}" project
\n }\n\n return (\n <>\n\n
\n \n )\n }\n\n const ProjectDrawerBody = () => {\n if (isLoading) {\n return \n setProjectName(e.target.value)}\n onBlur={saveProjectName}\n name=\"project-name\"\n className=\"tw-w-full\"\n extraWidth={50}\n hasError={showProjectNameError}\n />\n {showProjectNameError &&
\n Project name required
}\n \n
\n Last updated on {displayDate(project?.updatedAt)}
\n {project?.projectTemplate?.partner && (\n <>\n \n
\n )\n }\n\n return (\n <>\n {window.location.search.includes('duplicate=true') && (\n \n
\n \n
\n Delete project?
\n\n
\n Are you sure you want to delete the project "{project.name}"?
\n\n The project will be deleted, but it's requests will remain available in the request queue.\n
\n\n {\n setSelectedBrand(brand)\n updateProjectMutation.mutate({ brand })\n }}\n brand={selectedBrand}\n companyId={user?.companyId}\n />\n \n \n
\n \n \n
\n {editDescription ? (\n
\n \n
\n {editDescription ? (\n \n
\n ) : (\n \n \n \n \n \n
\n \n setEditDescription(true)}\n dataTestid=\"edit-description\"\n >\n
\n )}\n {description}
\n\n
\n \n setOpen(false)} className=\"tw-mr-2\">\n \n {projectDrawerHeader()}\n
\n {!isLoading && !showDeleteProject && (\n \n \n \n \n setShowDeleteProject(true)}\n >\n \n
\n )}\n \n setDrawerState('details')}\n className=\"tw-mr-2\"\n data-testid=\"BackButton\"\n >\n
\n Add Requests to "{trimmedProjectName}"
\n\n setDrawerState('create-deliverables')}\n />\n
\n \n setDrawerState('details')}\n className=\"tw-mr-2\"\n data-testid=\"BackButton\"\n >\n
\n Remove Request(s) from Project?
\n\n Are you sure you want to remove {deliverableText()} from the{' '}\n "{project.name}"?\n
\n\n This will leave the requests as standalone requests without any project association.\n
\n\n ![\"Remove](\"/images/pickle_remove_deliverables_warning.png\")
\n
\n \n \n \n \n
\n \n setDrawerState('details')}\n className=\"tw-mr-2\"\n data-testid=\"BackButton\"\n >\n
\n Create Requests for "{project.name}"
\n\n setDrawerState('details')}\n />\n
\n \n 
\n {partner?.label}\n \n {partner?.name}\n \n \n Learn More\n \n
\n )\n}\n","import { Partner } from 'interfaces/partner'\nimport Link from 'lib/components/link/link'\n\ninterface ProjectsPartnerPreviewProps {\n partner: Partner\n}\n\nexport default function ProjectsPartnerPreview({ partner }: ProjectsPartnerPreviewProps) {\n return (\n \n
\n )\n}\n","import { useQuery } from '@tanstack/react-query'\nimport { LoadingScreen } from 'components/pages/requests/empty-screens'\nimport { Project } from 'interfaces/project'\nimport { requestQuery } from 'lib/api/fetch-api'\nimport { MenuItem } from 'lib/components/menu-item/menu-item'\nimport { Popover, PopoverContent, PopoverTrigger } from 'lib/components/popover/popover'\nimport SearchInput from 'lib/components/search-input/search-input'\nimport Tooltip from 'lib/components/tooltip/tooltip'\nimport { cn } from 'lib/util/cn'\nimport { Pencil, PlusIcon } from 'lucide-react'\nimport { ReactNode, useState } from 'react'\n\ninterface ProjectsPopoverProps {\n isOpen: boolean\n onSelectProject: (project: Project) => void\n project: Project\n setIsOpen: (isOpen: boolean) => void\n children?: ReactNode\n}\n\nexport default function ProjectsPopover({\n isOpen,\n onSelectProject,\n project,\n setIsOpen,\n children,\n}: ProjectsPopoverProps) {\n const [search, setSearch] = useState('')\n const { data, isLoading } = useQuery({\n queryKey: ['projects'],\n queryFn: requestQuery({\n endpoint: 'getProjects',\n }),\n })\n\n const projects = data?.data\n\n const filteredProjects = projects?.filter((p) => p.name.toLowerCase().includes(search.toLowerCase()))\n\n const handleSelectProject = (clickedProject: Project) => {\n onSelectProject(clickedProject.id === project?.id ? null : clickedProject)\n }\n\n return (\n \n 
\n
\n \n
\n \n {partner.label}{' '}\n \n {partner.name}\n \n
\n {partner.header}
\n{partner.body}
\n \n {partner.linkText}\n \n {children ||
\n Projects
\n\n {children}\n
\n )\n\n if (project?.name) {\n const trimmedProjectName = project?.name?.length > 40 ? `${project?.name?.substring(0, 40)}...` : project?.name\n\n return (\n {trimmedProjectName}
\n \n
\n \n \n {sortedProjects.map((p) => (\n onSelectProject(p)}\n className=\"tw-w-full tw-border-none tw-bg-transparent tw-text-left tw-outline-none\"\n >\n
\n )\n}\n\ninterface TooltipWrapperProps {\n children: ReactNode\n showTooltip: boolean\n text: string\n direction?: 'up' | 'down'\n}\n\nconst TooltipWrapper = ({ children, showTooltip, text, direction = 'down' }: TooltipWrapperProps) => {\n if (showTooltip) {\n return (\n {children}
\n}\n","import DeliverablesTableTitleCell from './deliverables-table-title-cell'\nimport { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'\nimport { PlusIcon, TicketIcon } from 'lucide-react'\nimport { cn } from 'lib/util/cn'\nimport { ProjectTemplate, SkillWithCategoryFields } from 'interfaces/project-template'\nimport { SubscriptionTypeIcon } from '../deliverable-type'\nimport { LinkLikeButton } from 'components/core/button'\nimport { Dispatch, SetStateAction, useCallback, useEffect, useMemo } from 'react'\nimport Badge from 'lib/components/badge/badge'\nimport SearchInput from 'lib/components/search-input/search-input'\nimport { useInfiniteQuery } from '@tanstack/react-query'\nimport { request } from 'lib/api/fetch-api'\nimport { Skill } from 'interfaces/skill'\nimport { toast } from 'sonner'\nimport { Skeleton } from 'lib/components/skeleton/skeleton'\nimport { useInView } from 'react-intersection-observer'\nimport { debounce, sortBy, uniqBy } from 'lodash'\nimport QuantitySelector from 'lib/components/quantity-selector/quantity-selector'\n\ninterface TemplateRequestsTableProps {\n template?: ProjectTemplate\n selectedRows?: (Skill | SkillWithCategoryFields)[]\n setSelectedRows?: Dispatch\n
\n )\n}\n\nexport default TemplateRequestsTable\n","import Button from '../core/button'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { ReactElement } from 'react'\n\nexport default function TicketError(): ReactElement {\n return (\n \n {!template &&
\n Select request(s) to add to this template*
}\n\n {!isBlankTemplate && (\n
\n Requests ({data?.pages[0].meta.total ?? 0})
}\n\n {template && (\n <>\n \n
\n {!template?.blankTemplate && ((isCustomer && !template?.partner) || !isCustomer) && (\n \n
\n \n
\n {!template?.blankTemplate && ((isCustomer && !template?.partner) || !isCustomer) && (\n \n \n \n
\n {!template && isFetching &&
\n | \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n | \n ))}\n \n ))}\n
\n ![\"Ticket](\"/images/states/none-exist.svg\")
\n {\n evt.stopPropagation()\n window.location.reload()\n }}\n >\n
\n )\n}\n","import Avatar from 'components/core/avatar'\nimport Tooltip from 'lib/components/tooltip/tooltip'\n\ninterface UserAvatarProps {\n priorityModeEnabled?: boolean\n avatar?: string\n name?: string\n isDesigner?: boolean\n}\n\nexport default function UserAvatar({ name, avatar, priorityModeEnabled, isDesigner }: UserAvatarProps) {\n return (\n \n Sorry, the options didn't load.
\n \n You can retry or head back to your queue.\n
\n \n
\n )\n}\n","import { ReactElement, ReactNode } from 'react'\nimport { AppSettings } from 'interfaces/app'\nimport AdminUserProvider, { AdminUser } from 'providers/admin-user-provider'\n\ninterface AdminAppProps {\n children: ReactNode\n settings: AppSettings\n user: AdminUser\n}\n\nexport default function AdminApp({ children, settings, user }: AdminAppProps): ReactElement {\n return (\n \n
\n \n
\n \n {name ? (\n name\n ) : priorityModeEnabled && isDesigner ? (\n \n To be assigned\n \n ) : (\n 'To be assigned'\n )}\n
\n \n
\n )\n }\n\n return (\n \n
\n )\n }\n\n return \n
\n \n setParams({ ...params, name: e.target.value })}\n className={classNames.input}\n />\n setParams({ ...params, startTime: date.toISOString() })}\n showTimeSelect\n showTimeSelectOnly\n timeIntervals={30}\n timeCaption=\"Time\"\n dateFormat=\"HH:mm\"\n timeFormat=\"HH:mm\"\n />\n
\n Name
\nStart Time
\n\n setParams({ ...params, endTime: date.toISOString() })}\n showTimeSelect\n showTimeSelectOnly\n timeIntervals={30}\n timeCaption=\"Time\"\n dateFormat=\"HH:mm\"\n timeFormat=\"HH:mm\"\n />\n
\n End Time
\n\n \n
\n \n )\n}\n","import { Switch } from '@headlessui/react'\nimport { cn } from 'lib/util/cn'\n\nconst classNames = {\n switchGroup: 'tw-flex tw-items-center',\n switchLabel: 'tw-mr-1 tw-mb-0 tw-text-black tw-uppercase',\n switchToggle: {\n disabled:\n 'tw-pointer-events-none tw-inline-block tw-transform tw-rounded-full tw-bg-white tw-shadow-lg tw-ring-0 tw-transition tw-duration-200 tw-ease-in-out tw--translate-x-1',\n enabled:\n 'tw-pointer-events-none tw-inline-block tw-transform tw-rounded-full tw-bg-white tw-shadow-lg tw-ring-0 tw-transition tw-duration-200 tw-ease-in-out tw-translate-x-4',\n },\n switchWrapper: 'tw-flex tw-justify-between tw-mt-4 tw-max-w-md tw-grid tw-grid-cols-3 tw-gap-4',\n}\n\ninterface SourceSwitchProps {\n source: string\n setSource: (value: string) => void\n}\n\nexport default function SourceSwitch({ source, setSource }: SourceSwitchProps) {\n return (\n \n \n \n
\n )\n}\n","import React from 'react'\nimport ActionLinkItem from 'components/elements/dropdown/items/action-link-item'\n\ninterface CancellationsOverflowMenuProps {\n setShowEdit(boolean): void\n}\n\nexport default function CancellationsOverflowMenu({ setShowEdit }: CancellationsOverflowMenuProps): JSX.Element {\n return (\n <>\n \n Source \n setSource(value.toString())}\n className={cn(\n source === 'true' ? 'tw-bg-gherkin-500' : 'tw-bg-neutral-200',\n 'tw-relative tw-inline-flex tw-h-[18px] tw-w-[38px] tw-flex-shrink-0 tw-cursor-pointer tw-rounded-full tw-border-none tw-p-0.5 tw-transition-colors tw-duration-200 tw-ease-in-out',\n )}\n >\n {source}\n
\n \n \n \n
\n \n \n \n
\n '\n\n if (matches?.length === 0) return { __html: body.replaceAll('\\n', brTag) }\n\n // This adds the body to the front of the array,\n // converts the regex matches to string, and replaces the match with html\n const results = [body]\n .concat(...matches.map((match) => match[0]))\n .reduce((accumulator, url) =>\n accumulator.replace(url, `${url}`),\n )\n\n return { __html: results.replaceAll('\\n', brTag) }\n }, [body])\n\n return \n}\n","import Button from 'components/core/button'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { SupportingDocumentation } from 'interfaces/supporting-documentation'\nimport SupportingDocumentationText from './supporting-documentation-text'\nimport { ChangeEvent } from 'react'\nimport { faPlus } from '@fortawesome/free-solid-svg-icons'\n\ninterface EditableSupportingDocumentationProps {\n supportingDocumentation?: SupportingDocumentation\n editMode: boolean\n setEditMode: (editMode: boolean) => void\n newSupportingDocumentationBody: string\n setNewSupportingDocumentationBody: (body: string) => void\n}\n\nconst classNames = {\n td: 'tw-py-2 tw-mx-3',\n textarea:\n 'mr-3 px-2 py-1 tw-resize shadow-sm focus:ring-gherkin focus-visible:ring-gherkin block w-full sm:text-sm border-gray-300 rounded-md',\n}\n\nexport default function EditableSupportingDocumentation({\n supportingDocumentation,\n editMode,\n newSupportingDocumentationBody,\n setNewSupportingDocumentationBody,\n setEditMode,\n}: EditableSupportingDocumentationProps): JSX.Element {\n const handleChange = (e: ChangeEvent
\n
\n)\n","import React from 'react'\nimport { StatusLog } from 'interfaces/status-log'\nimport { ConvertDateToAmerican, statusBadge } from './table/column-elements'\n\ninterface StatusLogProps {\n latestStatusLog: StatusLog\n}\n\nconst LatestStatusLog = ({ latestStatusLog }: StatusLogProps): JSX.Element => {\n const { predictedLabelFrom, predictedLabelTo, userEmail, updatedAt } = latestStatusLog\n\n return (\n \n {predictedLabelFrom || predictedLabelTo ? (\n
\n )}\n \n
\n ) : null}\n Status:
\n\n from {statusBadge[predictedLabelFrom]?.label || 'Not Applicable'}\n to {statusBadge[predictedLabelTo]?.label}\n
\n\n
\n User:
\n{userEmail}
\n\n
\n Last Update Date:
\n{ConvertDateToAmerican(updatedAt)}
\n\n
\n \n
\n
\n \n Overridden
\n )}\n \n \n setFilters({\n ...filters,\n companyNameCont: e.target.value,\n })\n }\n />\n \n
\n )\n}\n\ninterface CompanyStatusFilterProps {\n companyStatusOptions: string[]\n filters: ScaleFilters | ProFilters\n setFilters: Dispatch{label}
\n [{dpu.picklePlan.name}]\n
({dpu.company.email})\n
Assigned
\n ) : (\n \n )}\n \n \n \n
\n
\n )\n}\n","import { ReactElement } from 'react'\nimport { AppSettings, CurrentUser } from 'interfaces/app'\nimport UserProvider from 'providers/user-provider'\nimport { generateTailwindPalette, setColorVars } from 'lib/util/color'\nimport { Toaster } from 'lib/components/toast/toast'\n\ninterface AppProps {\n allowCollaborators?: boolean\n children: ReactElement\n settings: AppSettings\n user: CurrentUser\n}\n\nexport default function App({ allowCollaborators = false, children, settings, user }: AppProps): ReactElement {\n // `customBranding` is only passed when it's a collaborator page\n if (settings.customBranding?.primaryColor) {\n const customPalette = generateTailwindPalette(settings.customBranding.primaryColor)\n setColorVars('cornflower', customPalette)\n }\n\n return (\n <>\n | Company | \n\n \n \n {props.headerOne} \n {props.headerTwo} \n | \n \n |
|---|
\n
\n )}\n {modalState === ModalState.Error && (\n <>\n \n
\n \n Your generative results are brining...\n
\n\n You can click the “X” button on the top right to minimize this window. Your Edit Assist imagery\n generation will run in the background while you continue with your request.\n
\n\n
\n \n )}\n {(modalState === ModalState.Accepted || modalState === ModalState.Results) && (\n <>\n Oh no!
\n\n Looks like something failed, click "Retry" to load again!\n
\nYour prompt
\n\n \n\n
\n {modalState === ModalState.Accepted && (\n <>\n \n
\n )}\n {modalState === ModalState.Results && (\n \n
\n )}\n \n \n
\n \n
\n Below are your results
\nSelect image(s) to add to your request to further customize your inspirations.
\n \n )}\n {modalState === ModalState.Results && (\n <>\nAdd results to your request or generate more
\n\n Select image(s) to help your designer understand your vision (or start over as many times as{' '}\n {`you'd `}\n like)!{' '}\n
\n \n )}\n\n {images.map((image, index) => (\n toggleImage(image)}\n isSelected={selection.includes(image)}\n >\n \n 
\n \n \n ))}\n
\n \n This content was created with the help of advanced AI technology which is constantly improving. Please\n check for accuracy.\n
\n\n\n
\n \n
\n )}\n\n {modalState === ModalState.Error && (\n \n \n
\n )}\n\n {modalState === ModalState.Progress && (\n \n \n
\n )}\n\n {modalState === ModalState.Results && (\n \n \n {selection.length} of {images.length} items selected\n \n
\n )}\n \n \n \n
\n \n Immediately generate images to visualize your ideas for your designer.{' '}\n
{brand.name}
\n \n {colors.map((brandColor) => (\n
\n \n )\n}\n\nexport default function Brands({ onSelect, companyId, brand }: BrandsProps): JSX.Element {\n // The ref is used to call onSelect on dismissal of the dropdown\n const selectedBrandRef = useRef(brand)\n const [search, setSearch] = useState('')\n\n const { getBrandsByCompany, isLoading } = useBrandsContext()\n const [brandsByCompany, setBrandsByCompany] = useState([])\n // State is still needed for the rerender cycle to be called\n const [selectedBrand, setSelectedBrand] = useState(brand)\n const classNames = {\n noBrandsContainer: `tw-flex tw-flex-col tw-items-center`,\n noBrandsText: `tw-text-sm tw-text-neutral-800`,\n }\n\n useEffect(() => {\n let isAbandoned\n getBrandsByCompany(companyId).then((response) => {\n if (!isAbandoned) {\n setBrandsByCompany(response)\n }\n })\n return () => {\n isAbandoned = true\n }\n }, [companyId, getBrandsByCompany])\n\n function handleSelectBrand(brand: Brand) {\n if (selectedBrand?.id === brand?.id) {\n selectedBrandRef.current = null\n setSelectedBrand(null)\n } else {\n selectedBrandRef.current = brand\n setSelectedBrand(brand)\n }\n }\n\n useEffect(() => {\n // Gets called when dropdown is dismissed\n return function () {\n if (selectedBrandRef.current !== brand) {\n onSelect(selectedBrandRef.current)\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n useEffect(() => {\n if (brand) {\n selectedBrandRef.current = brand\n setSelectedBrand(brand)\n }\n }, [brand])\n\n if (isLoading) {\n return \n 
\n
\n )\n }\n\n return (\n <>\n You don't currently have any brands.
\n Get started by creating a brand profile.
\n Brand Profile
\n\n
\n \n )\n}\n\nexport function MultiBrands({ onSelect, companyId, brands }: MultiBrandsProps): JSX.Element {\n // The ref is used to call onSelect on dismissal of the dropdown\n const selectedBrandsRef = useRef([])\n const { getBrandsByCompany, isLoading } = useBrandsContext()\n const [brandsByCompany, setBrandsByCompany] = useState([])\n // State is still needed for the rerender cycle to be called\n const [selectedBrands, setSelectedBrands] = useState(brands)\n const classNames = {\n noBrandsContainer: `tw-flex tw-flex-col tw-items-center`,\n noBrandsText: `tw-text-sm tw-text-neutral-800`,\n }\n\n useEffect(() => {\n let isAbandoned\n getBrandsByCompany(companyId).then((response) => {\n if (!isAbandoned) {\n setBrandsByCompany(response)\n }\n })\n return () => {\n isAbandoned = true\n }\n }, [companyId, getBrandsByCompany])\n\n function handleSelectBrand(brand: Brand) {\n if (selectedBrands.find((b) => b.id === brand.id)) {\n const updatedValues = selectedBrands.filter((b) => b.id !== brand.id)\n\n selectedBrandsRef.current = updatedValues\n setSelectedBrands(updatedValues)\n } else {\n const updatedValues = [...selectedBrands, brand]\n\n selectedBrandsRef.current = updatedValues\n setSelectedBrands(updatedValues)\n }\n }\n\n useEffect(() => {\n // Gets called when dropdown is dismissed\n return function () {\n if (selectedBrandsRef.current !== selectedBrands) {\n onSelect(selectedBrandsRef.current)\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n useEffect(() => {\n if (brands) {\n selectedBrandsRef.current = brands\n setSelectedBrands(brands)\n }\n }, [brands])\n\n if (isLoading) {\n return There are no brands matching your search.
\n )}\n \n \n
\n )\n }\n\n return (\n <>\n You don't currently have any brands.
\n Get started by creating a brand profile.
\n Brand Profiles
\n\n {brandsByCompany?.map((b) => (\n
\n \n )\n}\n","import { Dispatch, ReactElement, SetStateAction, useEffect, useMemo, useState } from 'react'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\nimport Button from 'components/core/button'\n\nimport { BetaBadge } from 'lib/components/badge/badge'\nimport ExternalLink from 'lib/components/links/external-link'\nimport Modal from 'lib/components/modals/modal'\nimport { GenAiDSImage, GenAiRequest, GenAiRequestTypes, getGenAiRequest } from 'lib/api/gen-ai/gen-ai-requests'\nimport Textarea from 'lib/components/textarea/textarea'\nimport { Card } from 'lib/components/card/card'\nimport CopyTextButton from 'lib/components/buttons/copy-text-button'\nimport { AnimatedLoadingScreen } from '../../../requests/empty-screens'\nimport { useMediaContext } from '../../media/media-provider'\nimport { TicketFile } from 'lib/api/ticket-files/ticket-files'\n\ninterface ModalProps {\n open: boolean\n requestId: number\n setOpen: Dispatch\n
\n \n )}\n {modalState === ModalState.Results && (\n <>\n \n Use our AI tools to generate visual inspiration for your design request.{' '}\n
Your prompt
\n\n\n {request.requestType === GenAiRequestTypes.IMG2IMG && request.request.original_image && (\n
\n \n
\n Below are your results
\nSelect image(s) to add to your request to further customize your inspirations.
\n\n {images.map((image, index) => (\n toggleImage(image)}\n isSelected={selection.includes(image)}\n disabled={originalSelection.includes(image)}\n >\n \n \n \n \n ))}\n
\n \n This content was created with the help of advanced AI technology which is constantly improving. Please\n check for accuracy.\n
\n \n )}\n\n \n {selection.length + originalSelection.length} of {images.length} items selected\n \n
\n )}\n \n \n
\n \n handleButtonClick(e, Tools.Move)}\n size=\"lg\"\n />\n\n {!readOnly && (\n \n handleButtonClick(e, Tools.Annotate)}\n size=\"lg\"\n dataTestid=\"pen-line-button\"\n >\n \n )}\n\n {user.genAiInpainting && !readOnly && !isExtractable && genAiResultType === null && (\n handleButtonClick(e, Tools.Paint)}\n size=\"lg\"\n />\n )}\n
\n \n \n \n \n \n \n zoomTo(event.target.value)}\n disabled={selectedTool === Tools.Paint}\n >\n {isZoomPreset(currentZoom[1]) ? null : }\n {zoomPresets.map((zoom) => (\n \n ))}\n \n \n
\n \n \n )\n}\n\nfunction createAnnotorious(\n openSeadragonInstance: OpenSeadragon.Viewer,\n readOnly: boolean,\n user: AnnotationUser,\n): AnnotoriousInstance {\n const annotoriousConfig = {\n fragmentUnit: 'percent',\n widgets: [],\n disableEditor: true,\n }\n\n const anno = Annotorious(openSeadragonInstance, annotoriousConfig)\n const displayName = user.isDPAdmin ? `${user.fullName} (DP)` : user.fullName\n anno.readOnly = readOnly\n anno.setAuthInfo({\n displayName,\n id: user.id,\n })\n return anno\n}\n\nfunction createOpenSeadragon(url: string): OpenSeadragon.Viewer {\n return OpenSeadragon({\n id: 'openSeadragonViewer',\n showFullPageControl: false,\n showHomeControl: false,\n showNavigationControl: false,\n tileSources: {\n type: 'image',\n url,\n },\n })\n}\n\nfunction findAnnotationRecord(\n annotationRecords: AnnotationRecord\n {canEditAnnotation() && (\n
\n )\n}\n","import { useMemo } from 'react'\nimport { LinkButton } from 'components/core/button'\nimport AnnotatedMediaViewer from './annotated-media-viewer'\nimport VideoJsPlayer from './video-js-player'\nimport { useMediaContext } from './media-provider'\nimport { useS3PreviewImage } from 'lib/hooks/useS3PreviewImage'\nimport { PLACEHOLDERS_FOLDER } from 'lib/constants/file-formats'\nimport { cn } from 'lib/util/cn'\n\nexport default function MediaViewer() {\n const { selectedFile, currentTicketFile } = useMediaContext()\n\n const previewUrl = useS3PreviewImage(selectedFile)\n const hasImagePreview = previewUrl && !previewUrl.includes(PLACEHOLDERS_FOLDER)\n const showImageAnnotationViewer = useMemo(() => {\n if (selectedFile.isExtractable) {\n return selectedFile.extractedPages?.length > 0\n }\n return hasImagePreview\n }, [selectedFile.isExtractable, selectedFile.extractedPages, hasImagePreview])\n\n const parentTicketFileId = useMemo(() => {\n return currentTicketFile?.id === selectedFile.id ? undefined : selectedFile.id\n }, [currentTicketFile?.id, selectedFile.id])\n\n if (selectedFile.isVideo) {\n return \n switchTool(selectedTool, Tool.Annotate)}\n selected={selectedTool === Tool.Annotate}\n size=\"lg\"\n >\n
\n )}\n \n \n 
\n {selectedFile.externalLink && (\n
\n )\n}\n","import { getFileExtension } from 'lib/util/file/file'\n\nconst FileType = ({ fileName, className, size = 24 }: { fileName: string; className?: string; size?: number }) => {\n return (\n \n
\n {title}
\n {body}\n\n \n Open {externalLinkFormatType()} Link\n \n
\n )}\n \n 
\n {!isPlaceholder && (\n
\n )\n}\n\nexport default FileThumbnail\n","import Modal from 'lib/components/modals/modal'\nimport Button from 'components/core/button'\nimport { CustomerState, TicketFile } from 'lib/api/ticket-files/ticket-files'\nimport { cn } from 'lib/util/cn'\nimport { DownloadIcon, ExternalLinkIcon, InfoIcon } from 'lucide-react'\nimport { useEffect, useState } from 'react'\nimport { useMutation, useQuery } from '@tanstack/react-query'\nimport { request, requestQuery } from 'lib/api/fetch-api'\nimport { useUserContext } from 'providers/user-provider'\n\nimport { useCreateFileExport } from 'lib/hooks/useCreateFileExport'\nimport { downloadFile, getFileExtension } from 'lib/util/file/file'\nimport Tooltip from 'lib/components/tooltip/tooltip'\nimport { PATHS } from 'lib/constants/paths'\nimport { fileExportSuccessToast } from 'lib/hooks/useFileExports'\n\nimport { useFeatureFlagsContext } from 'lib/components/feature-flags/feature-flags-provider'\nimport { MenuItem } from 'lib/components/menu-item/menu-item'\nimport { useMediaContext } from './media-provider'\n\nimport Link from 'lib/components/link/link'\nimport Checkbox from 'lib/components/checkbox/checkbox'\nimport { AUTO_SHOW_FILE_EXPORT_MODAL_KEY } from './state-button'\nimport FileThumbnail from 'lib/components/file-thumbnail'\nimport { toast } from 'lib/components/toast/toast'\n\ntype FileDownloadModalProps = {\n fileExportModalMode: FileExportModalMode\n setFileExportModalMode: (open: FileExportModalMode) => void\n currentTicketFile: TicketFile\n}\n\nexport enum FileExportModalMode {\n DOWNLOAD = 'download',\n EXPORT = 'export',\n NONE = null,\n}\n\ninterface FileFormatProps {\n formats: string[]\n selectedFormats: string[]\n handleFormatClick: (format: string) => void\n}\n\nconst AdditionalFormats = ({ formats, selectedFormats, handleFormatClick }: FileFormatProps) => {\n return (\n \n {formats?.map((format) => (\n handleFormatClick(format)}\n selected={selectedFormats.includes(format)}\n key={format}\n />\n ))}\n
\n )\n}\n\nconst FileFormat = ({\n extension,\n selected,\n onClick,\n}: {\n extension: string\n selected: boolean\n onClick?: () => void\n}) => {\n return (\n 
.{extension}\n \n )\n}\n\nconst CurrentAsset = () => {\n const { previewUrl, currentTicketFile, isPlaceholder } = useMediaContext()\n\n return (\n \n
\n )\n}\n\nconst DownloadScreen = ({\n currentTicketFile,\n setFileExportModalMode,\n}: {\n currentTicketFile: TicketFile\n setFileExportModalMode: (open: FileExportModalMode) => void\n}) => {\n const { user } = useUserContext()\n\n const { data: fileExportFormats, isLoading } = useQuery({\n queryKey: ['file-export-formats', currentTicketFile?.id],\n queryFn: requestQuery({ endpoint: 'getFileExportsFormats', query: { ticket_file_id: currentTicketFile?.id } }),\n })\n\n const currentFormat = getFileExtension(currentTicketFile?.name)\n const preSelectedFormats =\n fileExportFormats?.data.filter((format) => user?.preferredFormats?.includes(format) && format !== currentFormat) ||\n []\n preSelectedFormats.push(currentFormat)\n\n const additionalFormats = fileExportFormats?.data?.filter((format) => format !== currentFormat)\n\n const [selectedFormats, setSelectedFormats] = useStateCurrent asset
\n \n
\n \n
\n
\n \n Need a different format?\n \n Available formats depend on the file you've selected. Preferred formats are automatically chosen,\n but you can update these anytime in your{' '}\n \n profile settings\n \n .\n \n }\n >\n
\n Choose your format(s) to convert and download.
\n {additionalFormats?.length > 0 ? (\n <>\n \n No additional formats are available for conversion, but you can still download the file as is.\n
\n )}\n \n
\n \n {selectedFormats?.length} formats selected\n
\n \n \n// \n// 
\n// \n//
\n// )\n// }\n\nconst ExportScreen = () => {\n const { setFileExportModalMode, selectedFile, refreshTicketFile } = useMediaContext()\n\n const [autoShow, setAutoShow] = useState(localStorage.getItem(AUTO_SHOW_FILE_EXPORT_MODAL_KEY) !== 'true')\n\n const approved = selectedFile?.customerState === CustomerState.Approved\n\n const { mutate: exportToStockPress } = useMutation({\n mutationFn: () => request({ endpoint: 'exportAssets', body: { ticket_file_ids: [selectedFile.id] } }),\n onSuccess: () => {\n setFileExportModalMode(null)\n refreshTicketFile(selectedFile.id)\n toast.success(\n 'Your file has been exported to Stockpress. It may take a few minutes to appear in your Stockpress account.',\n )\n },\n onError: (err) => {\n toast.error('There was an error exporting to Stockpress, please try again')\n console.error(err)\n },\n })\n\n return (\n <>\n \n// Stockpress
\n// \n
\n )}\n \n
\n\n \n 
\n
\n \n \n
\n Stockpress
\n Simple Digital Asset Management for teams of all sizes
\n \n See how our partners at Stockpress help manage assets\n \n \n
\n \n \n )\n}\n\nconst FileDownloadModal = ({\n fileExportModalMode,\n setFileExportModalMode,\n currentTicketFile,\n}: FileDownloadModalProps) => {\n const { isFeatureFlagEnabled } = useFeatureFlagsContext()\n\n return (\n 1 asset selected
\n \n \n
\n \n setFileExportModalMode(FileExportModalMode.DOWNLOAD)}\n cmp=\"div\"\n />\n {\n return (\n \n New\n
\n )\n },\n }}\n onClick={() => setFileExportModalMode(FileExportModalMode.EXPORT)}\n selected={fileExportModalMode === FileExportModalMode.EXPORT}\n />\n \n {fileExportModalMode === FileExportModalMode.DOWNLOAD ? (\n
\n \n ) : (\n \n setIsOpen(false)}>\n \n
\n \n
\n \n \n Stockpress\n \n )}\n {isFeatureFlagEnabled('stockpress') && (\n
\n {file?.user && file.user?.name && (\n {file.name}
\n {file?.exported && (\n\n
\n )}\n \n Created on {displayDate(file.createdAt)}
\n )}\n \n 
\n
\n \n {fileHasMetaData && (\n
\n \n {file.colorspace && (\n <>\n
\n )}\n \n \n
\n {zipFile && (\n Tags
\n\n
\n )}\n Source
\n \n\n {genAiResultType === GenAiResultTypes.CreateAssist && (\n setShowPromptModal(false)}\n requestId={selectedFile.imageableId}\n />\n )}\n {genAiResultType === GenAiResultTypes.EditAssist && (\n setShowPromptModal(false)}\n requestId={selectedFile.imageableId}\n />\n )}\n \n \n {selectedFile?.preview && (\n \n
\n )}\n \n \n )\n}\n","import { ReactElement, useEffect, useMemo, useRef, useState, MouseEvent } from 'react'\n\nimport { PenLine, TrashIcon, UserPlus } from 'lucide-react'\nimport ConfirmationModal from 'components/elements/confirmation-modal'\nimport { GenAiRequestTypes } from 'lib/api/gen-ai/gen-ai-requests'\nimport { CustomerState, TicketFile } from 'lib/api/ticket-files/ticket-files'\nimport { EditMode } from 'lib/api/tickets/tickets'\nimport IconButton from 'lib/components/buttons/icon-button'\nimport { Card } from 'lib/components/card/card'\nimport { useMediaContext } from './media-provider'\nimport { useAnnotationsContext } from '../providers/annotations-provider'\nimport { toast } from 'lib/components/toast/toast'\nimport { useS3PreviewImage } from 'lib/hooks/useS3PreviewImage'\nimport { cn } from 'lib/util/cn'\nimport { useThreeResizableContext } from 'lib/components/resizable/resizable'\nimport { isPlaceholder } from 'lib/util/file/file'\nimport ApprovedBadge from 'lib/components/approved-badge'\nimport { useIsCollaboratorView } from 'providers/is-collaborator-view-provider'\n\ninterface MediaItemPlaceholderProps {\n file: TicketFile\n}\n\ninterface MediaItemProps {\n file: TicketFile\n openMiddlePanel?: () => void\n}\n\nconst classNames = {\n previewOverlayContainer: `tw-absolute\n tw-flex\n tw-justify-center\n tw-items-center\n tw-w-full\n tw-h-full\n tw-bg-opacity-40\n tw-bg-black\n tw-z-10`,\n\n img: 'tw-w-full tw-h-full tw-object-cover tw-aspect-square',\n imgName: 'tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-text-neutral-600',\n\n mediaItemContainer: 'tw-flex tw-flex-row tw-flex-wrap tw-gap-4 tw-px-4 tw-items-start tw-py-6',\n removeButtonAbsoluteContainer: 'tw-absolute tw--top-4 tw--right-4 tw-z-10',\n badge: 'tw-bg-cornflower-500 tw-text-white tw-rounded-md tw-px-2 tw-flex tw-items-center tw-gap-2 ',\n}\n\nfunction PreviewOverlay() {\n return (\n \n \n Stockpress\n \n )}\n
\n\n {selectedFile.isExtractable && selectedFile.extractedPages.length !== 0 && (\n \n
\n \n
\n )}\n {!currentTicketFile && extractedFilesPollingFailed && (\n \n ![\"Pickle](\"/images/states/error-hole.png\")
\n
\n )}\n {currentTicketFile && (\n \n Uh oh! We couldn’t load all your pages
\n\n It seems there was an issue processing your attachment. Please try again. If the issue persists, feel\n free to reach out to our Customer Support team at{' '}\n help@designpickle.com for assistance.\n
\n \n\n
\n )\n}\n\nfunction MediaItem({ file, openMiddlePanel }: MediaItemProps): ReactElement {\n const [isModalVisible, setIsModalVisible] = useState(false)\n const containerRef = useRef(null)\n const isCollaboratorView = useIsCollaboratorView()\n const { ticket, editMode, deleteFile, selectedFile, selectFileById } = useMediaContext()\n const { cancelAnnotation } = useAnnotationsContext()\n\n const isSelected = useMemo(() => {\n return file.id === selectedFile?.id\n }, [selectedFile?.id, file.id])\n\n const removeModalMessage = useMemo(() => {\n if (file.stockAsset?.requestType === GenAiRequestTypes.Inpainting) {\n return 'Are you sure you want to delete this generated image?'\n }\n return `Are you sure you want to delete ${file.name}?`\n }, [file.name, file.stockAsset?.requestType])\n\n const isUploadedByCollaborator = file?.user?.collaborator === true\n\n useEffect(() => {\n if (isSelected) {\n containerRef?.current?.scrollIntoView({ behavior: 'smooth', block: 'center' })\n }\n }, [isSelected])\n\n function handleRemoveClick(e: MouseEvent) {\n e.stopPropagation()\n setIsModalVisible(true)\n }\n\n function handleCancelClick(e: MouseEvent) {\n e.stopPropagation()\n setIsModalVisible(false)\n }\n\n async function handleDelete(e: MouseEvent) {\n e.stopPropagation()\n deleteFile(file)\n setIsModalVisible(false)\n toast.success('The file has been deleted')\n }\n\n function isMediaDeletable() {\n const isCurrentVersion = file.ticketVersion === ticket.currentVersion\n const isNotUploadedByCreative = !file.uploadedByCreative\n const isNotInProgress = editMode !== EditMode.processing\n const isNotComplete = editMode !== EditMode.complete\n\n return !isCollaboratorView && isCurrentVersion && isNotUploadedByCreative && isNotInProgress && isNotComplete\n }\n\n const annotationsCount = useMemo(() => {\n if (file.isExtractable) {\n return file.extractedPages.reduce((acc, pdf) => acc + pdf.annotations.length, 0)\n } else {\n return file.annotations?.length || 0\n }\n }, [file.isExtractable, file.extractedPages, file.annotations?.length])\n\n function handleSelectFile() {\n cancelAnnotation()\n\n selectFileById(file.id, null)\n openMiddlePanel?.()\n }\n\n const previewUrl = useS3PreviewImage(file)\n\n const isApproved = file.customerState === CustomerState.Approved\n\n return (\n PREVIEW
\n\n
\n )}\n {isUploadedByCollaborator && (\n \n
\n )}\n \n {isApproved && \n
\n )}\n \n \n \n
\n \n {file?.preview &&
\n \n
\n )}\n\n {previewFiles.length > 0 && (\n \n Delivered Assets\n
\n\n\n {creativeFiles.map((file) => (\n
\n \n
\n )}\n\n {clientFiles.length > 0 && (\n \n Preview Assets\n
\n\n {previewFiles.map((file) => (\n
\n \n
\n )}\n \n ) : (\n \n Added Assets\n
\n\n {clientFiles.map((file) => (\n
\n \n {visibleFiles.map((file) => (\n
\n )}\n \n )\n}\n","import { Annotation, AnnotationRecord, VideoAnnotationData } from 'lib/api/annotations/annotations'\nimport {\n bulkCreateTicketFiles,\n createTicketFile,\n deleteTicketFile,\n getTicketFile,\n getTicketFiles,\n retryExtractPages,\n TicketFile,\n TicketFilePayload,\n VideoJSAnnotation,\n} from 'lib/api/ticket-files/ticket-files'\nimport { DesignRequest, EditMode } from 'lib/api/tickets/tickets'\nimport { useFeatureFlagsContext } from 'lib/components/feature-flags/feature-flags-provider'\nimport { FileUploaderResult, ModalFileUploader } from 'lib/components/file-uploader/file-uploader'\nimport { toast } from 'lib/components/toast/toast'\nimport { getFileExtension, getPreviewUrl, getShareLinkUrl, isPlaceholder } from 'lib/util/file/file'\nimport { useUserContext } from 'providers/user-provider'\nimport {\n createContext,\n Dispatch,\n ReactElement,\n ReactNode,\n SetStateAction,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react'\nimport { FileExportModalMode } from './file-download-modal'\nimport { useS3PreviewImage } from 'lib/hooks/useS3PreviewImage'\nimport { GenAiResultTypes, getGenAiResultType } from 'lib/api/gen-ai/gen-ai-requests'\n\ninterface ContextProps {\n editMode: EditMode\n children: ReactNode\n fetchAndSetTicket?: () => void\n showRevisions?: boolean\n useToken?: boolean\n ticket: DesignRequest\n fromSources?: string[]\n}\n\nexport interface MediaContextValue {\n addFiles: (imageableId: number, files: TicketFile[]) => void\n addStockAssets: (newFiles: TicketFile[]) => void\n deleteFile: (file: TicketFile) => void\n editMode: EditMode\n extractedFilesPollingFailed: boolean\n extractedPreviewIndex: number\n fetchAndSetTicket: () => void\n files: TicketFile[]\n filters: MediaFilters\n getFileById: (id: number, parentId?: number) => TicketFile\n getFilePageNumber: (parentId: number, childId: number) => number\n getParentFileName: (parentId: number) => string\n isMediaLoaded: boolean\n open: () => void\n retryExtractingPages: () => Promise\n \n Upload Files\n \n
\n )\n}\n","import {\n createContext,\n Dispatch,\n ReactElement,\n ReactNode,\n SetStateAction,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react'\n\nimport {\n Annotation,\n AnnotationRecord,\n AnnotationStatus,\n updateVideoAnnotation as apiUpdateVideoAnnotation,\n createAnnotation,\n createVideoAnnotation,\n deleteAnnotation,\n updateAnnotation,\n VideoAnnotationData,\n} from 'lib/api/annotations/annotations'\nimport {\n TicketFile,\n VideoJSAnnotation,\n VideoJSAnnotationLocation,\n VideoJSAnnotationObject,\n} from 'lib/api/ticket-files/ticket-files'\nimport { DesignRequestStatus, EditMode } from 'lib/api/tickets/tickets'\nimport { AnnotoriousAnnotation, AnnotoriousInstance } from 'lib/components/annotation/annotorious-openseadragon-types'\n\nimport { useDirectionsContext } from 'components/pages/request/providers/timeline-directions-provider'\nimport { updateDetailTaskStatus } from 'lib/api/detail-tasks/detail-tasks-api'\nimport { useFeatureFlagsContext } from 'lib/components/feature-flags/feature-flags-provider'\nimport VideoPlayer from 'lib/components/video/video-player'\nimport { useUserContext } from 'providers/user-provider'\nimport { getAnnotations } from '../annotations/utils'\nimport { useMediaContext } from '../media/media-provider'\nimport { DetailTaskType } from '../types/detail-task'\nimport { useAdaptiveRequestContext } from 'hooks/use-adaptive-request-context'\nimport { useIsCollaboratorView } from 'providers/is-collaborator-view-provider'\nexport interface ApproveRejectVideoAnnotation {\n body: string\n createdAt: string\n createdBy: string\n detailTaskId: number\n data: VideoJSAnnotation\n id: number\n status: string\n time: number\n type: string\n uuid: string\n}\n\ninterface AnnotationCommand {\n execute: (msg: string) => void\n}\n\ninterface AnnotationsContextProps {\n children: ReactNode\n}\n\nexport type AnnotationsContextValue = {\n addAnnotation: (ticketFile: TicketFile, bodyText: string) => void\n annotationsInEditMode: number\n currentVersionAnnotations: () => Annotation[]\n areAnnotationsValid: () => boolean\n cancelAnnotation: () => void\n canEditAnnotation: (\n annotation?: AnnotationRecord