![\"\"](\"/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'\n\ninterface DeliverablesTableTitleCellProps {\n ticket: Ticket | TicketTemplate | Skill\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}\ninterface BulkActionHeadersProps {\n table: Table\n \n
\n {!readOnly && (\n \n \n )}\n
\n \n
\n {!readOnly && (\n \n \n \n
\n {(isLoading || isFetchingNextPage || isRefetching) && (\n
\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, RowSelectionState, useReactTable } from '@tanstack/react-table'\nimport Button from 'components/core/button'\nimport Checkbox from 'lib/components/checkbox/checkbox'\nimport SearchInput from 'lib/components/search-input/search-input'\nimport { 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'\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
\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 [rowSelection, setRowSelection] = 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 | {flexRender(cell.column.columnDef.cell, cell.getContext())} | \n ))}\n \n ))}\n
\n \n \n Create and add to project\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 FolderOpenIcon,\n FoldersIcon,\n LinkIcon,\n NotepadTextIcon,\n PencilIcon,\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'\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 [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}
\nLast updated on {displayDate(project?.updatedAt)}
\n \n
\n )}\n Loading...
\n \n \n
\n
\n \n
\n \n
\n \n setOpen(false)} className=\"tw-mr-2\">\n \n
\n \n
\n ) : (\n \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 Last updated on {displayDate(project?.updatedAt)}
\n \n
\n )}\n Loading...
\n \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 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('add-deliverables')}\n />\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 Button from '../core/button'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { ReactElement } from 'react'\n\nexport default function TicketError(): ReactElement {\n return (\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 { Plus } from 'lucide-react'\nimport { LinkButton } from 'components/core/button'\n\nexport default function CreateButton() {\n return (\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
\n \n {badgeValues.text}\n \n
\n )\n }\n\n return null\n}\n\nconst statuses = {\n collaborator: {\n [AnnotationStatus.Approved]: { color: 'success', text: 'Reviewed' },\n [AnnotationStatus.Rejected]: { color: 'success', text: 'Reviewed' },\n [AnnotationStatus.Review]: { color: 'light', text: 'Pending' },\n },\n default: {\n [AnnotationStatus.Rejected]: { color: 'danger', text: 'Rejected' },\n },\n}\n","import { ChangeEvent, ReactElement, useEffect, useRef, useState } from 'react'\n\nimport { Annotation, AnnotationRecord } from 'lib/api/annotations/annotations'\nimport Textarea from 'lib/components/textarea/textarea'\nimport IconButton from 'lib/components/buttons/icon-button'\n\nimport { useAnnotationsContext } from '../providers/annotations-provider'\nimport { DetailTaskType } from '../types/detail-task'\nimport { AnnotoriousAnnotation } from 'lib/components/annotation/annotorious-openseadragon-types'\nimport { toast } from 'lib/components/toast/toast'\nimport { useFeatureFlagsContext } from 'lib/components/feature-flags/feature-flags-provider'\nimport WYSIWYGTextarea, { footerClassNames } from 'lib/components/wysiwyg/wysiwyg-textarea'\nimport { cn } from 'lib/util/cn'\n\ninterface EditAnnotationProps {\n annotation: Annotation\n disableEditMode: () => void\n}\n\nexport default function EditAnnotation({ annotation, disableEditMode }: EditAnnotationProps): ReactElement {\n const [value, setValue] = useState(annotation.body || '')\n const textareaRef = useRef(null)\n const { isFeatureFlagEnabled } = useFeatureFlagsContext()\n const { highlightedAnnotation, saveAnnotation, selectAnnotation, setHighlightedAnnotation, updateVideoAnnotation } =\n useAnnotationsContext()\n\n function hasMinimumLength() {\n return value.trim().length >= 3\n }\n\n async function save() {\n if (value.trim() === annotation.body) {\n disableEditMode()\n } else if (hasMinimumLength()) {\n try {\n if (annotation.type === DetailTaskType.VIDEO_ANNOTATION) {\n if ('comments' in annotation.data) {\n annotation.data.comments[0].body = value\n }\n updateVideoAnnotation(annotation.id, annotation.uuid, value)\n } else {\n await saveAnnotation(annotation as AnnotationRecord\n \n
\n )\n\n return (\n \n {isFeatureFlagEnabled('request_wysiwyg') ? (\n
\n )\n}\n","import { MouseEvent, useEffect, useMemo, useRef, useState } from 'react'\nimport { PenLine } from 'lucide-react'\n\nimport { displayDate } from 'lib/util/date'\nimport { AnnotationRecord, AnnotationStatus } from 'lib/api/annotations/annotations'\nimport IconButton from 'lib/components/buttons/icon-button'\nimport { IconFlyoutMenu } from 'lib/components/dropdown-icon-menu/icon-flyout-menu'\nimport CopyTextButton from 'lib/components/buttons/copy-text-button'\n\nimport { useAnnotationsContext } from '../providers/annotations-provider'\nimport { useMediaContext } from '../media/media-provider'\nimport ApproveRejectButtons from './approve-reject-buttons'\nimport AnnotationStatusBadge from './annotation-status-badge'\nimport { DetailTaskType } from '../types/detail-task'\nimport { AnnotoriousAnnotation } from 'lib/components/annotation/annotorious-openseadragon-types'\n\ninterface AnnotationDetailsProps {\n annotation: AnnotationRecord\n
\n \n
\n {pageNumber !== null && (\n \n
\n )}\n {annotationTime !== null && (\n pg.
\n {pageNumber}
\n \n
\n )}\n {annotationTime}
\n \n
\n \n \n Added by {annotationMeta.creatorName} {annotationMeta.createdAtDate}\n
\n {!isCollaboratorView && annotation.status === AnnotationStatus.Review && (\n \n {canEditAnnotation(annotation) ? (\n <>\n \n Copy \n \n
\n \n )\n}\n\nfunction formatAnnotationTime(totalSeconds: number) {\n const minutes = Math.floor(totalSeconds / 60)\n const seconds = Math.floor(totalSeconds % 60)\n const paddedSeconds = seconds.toString().padStart(2, '0')\n return `${minutes}:${paddedSeconds}`\n}\n","import { ReactElement, useState } from 'react'\n\nimport { AnnotationRecord } from 'lib/api/annotations/annotations'\n\nimport { useAnnotationsContext } from '../providers/annotations-provider'\nimport EditAnnotation from './edit-annotation'\nimport AnnotationDetails from './annotation-details'\nimport { AnnotoriousAnnotation } from 'lib/components/annotation/annotorious-openseadragon-types'\n\ninterface AnnotationListItemProps {\n annotation: AnnotationRecord\n {showCopyTooltip &&
\n \n ) : (\n Annotation Copied!
}\n \n
\n )\n}\n","import Button from 'components/core/button'\nimport { AnnotationRecord, AnnotationStatus } from 'lib/api/annotations/annotations'\nimport { VideoJSAnnotation } from 'lib/api/ticket-files/ticket-files'\nimport { AnnotoriousAnnotation } from 'lib/components/annotation/annotorious-openseadragon-types'\nimport { Check, X } from 'lucide-react'\nimport { MouseEvent } from 'react'\nimport { ApproveRejectVideoAnnotation, useAnnotationsContext } from '../providers/annotations-provider'\nimport { DetailTaskType } from '../types/detail-task'\n\ninterface ApproveRejectButtonsProps {\n annotation: AnnotationRecordAnnotations
\nUse the annotation tool to add directions to be reviewed by the request owner
\n {showAnnotationForm() &&\n {!!emptyImageSrc && 
}\n
\n )}\n {annotations.map((annotation) => (\n It looks like you haven't added any annotations
\nWant to add annotations? Use the pencil tool above
\n\n \n \n
\n )\n}\n","import { ChangeEvent, KeyboardEvent, ReactElement, useEffect, useRef, useState, MouseEvent } from 'react'\nimport { Send, X } from 'lucide-react'\n\nimport { TicketFile } from 'lib/api/ticket-files/ticket-files'\nimport Textarea from 'lib/components/textarea/textarea'\nimport IconButton from 'lib/components/buttons/icon-button'\n\nimport { useAnnotationsContext } from '../providers/annotations-provider'\nimport { useRequestContext } from 'components/pages/request/providers/request-provider'\nimport { useFeatureFlagsContext } from 'lib/components/feature-flags/feature-flags-provider'\nimport WYSIWYGTextarea, { footerClassNames } from 'lib/components/wysiwyg/wysiwyg-textarea'\nimport { cn } from 'lib/util/cn'\n\ninterface ImageAnnotationFormProps {\n ticketFile: TicketFile\n}\n\nexport default function ImageAnnotationForm({ ticketFile }: ImageAnnotationFormProps): ReactElement {\n const textAreaRef = useRef(null)\n const [showError, setShowError] = useState(false)\n const [currentEditAnnotationBodyText, setCurrentEditAnnotationBodyText] = useState('')\n const { showValidationErrors } = useRequestContext()\n const { addAnnotation, areAnnotationsValid, cancelAnnotation } = useAnnotationsContext()\n const { isFeatureFlagEnabled } = useFeatureFlagsContext()\n\n function onSendClick(event: MouseEvent) {\n event.stopPropagation()\n submit()\n }\n\n function onCancelClick(event: MouseEvent) {\n event.stopPropagation()\n\n cancelAnnotation()\n }\n\n function submit() {\n if (currentEditAnnotationBodyText.trim().length <= 3) {\n setShowError(true)\n return\n }\n\n addAnnotation(ticketFile, currentEditAnnotationBodyText)\n }\n\n function onTextAreaChange(event: ChangeEvent\n \n \n \n \n
\n )\n\n return (\n \n {isFeatureFlagEnabled('request_wysiwyg') ? (\n e.stopPropagation()}\n />\n {footer}\n \n )}\n
\n )\n}\n","import { TicketFile, VideoJSAnnotation } from 'lib/api/ticket-files/ticket-files'\nimport { AnnotationRecord } from 'lib/api/annotations/annotations'\nimport { DetailTaskType } from '../types/detail-task'\nimport { AnnotoriousAnnotation } from 'lib/components/annotation/annotorious-openseadragon-types'\nimport { PLACEHOLDERS_FOLDER } from 'lib/constants/file-formats'\n\nexport function getCurrentlyViewedFile(selectedFile: TicketFile, extractedPreviewIndex: number): TicketFile {\n if (selectedFile?.isExtractable) {\n return selectedFile?.extractedPages[extractedPreviewIndex]\n }\n return selectedFile\n}\n\nexport function getPageNumber(selectedFile: TicketFile, annotation: AnnotationRecord{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 { zipIsExtracting, 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 )\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 } = 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 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 {file?.user && file.user?.name && (\n {file.name}
\n {isFeatureFlagEnabled('stockpress') && (\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'\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\n {selectedFile.isExtractable && selectedFile.extractedPages.length !== 0 && (\n \n
\n \n
\n )}\n {!currentTicketFile && !extractedFilesPollingFailed && (\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 { ticket, editMode, deleteFile, isCollaboratorView, 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 { init as filestackInit } from 'filestack-js'\nimport { client } from 'filestack-react'\nimport { 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 isCollaboratorView?: boolean\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 isCollaboratorView?: boolean\n isMediaLoaded: boolean\n open: () => void\n retryExtractingPages: () => Promise\n \n Upload Files\n \n
\n )\n}\n","import { useState } from 'react'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport Button from 'components/core/button'\nimport { CurrentUser } from 'interfaces/app'\nimport { Drawer } from 'lib/components/drawer/drawer'\nimport SkillCategories from '../skills/skill-categories'\nimport SkillsProvider from '../skills/skills-provider'\nimport { LoadingScreen } from 'components/pages/requests/empty-screens'\nimport SearchSkillsByName from '../skills/search-skills-by-name'\nimport React from 'react'\nimport { createTicketAndRedirect } from 'lib/ticket/utils'\n\ninterface NewRequestButtonProps {\n user: CurrentUser\n type?: 'button' | 'link'\n text?: string\n children?: React.ReactNode\n}\n\nfunction OpenModalButton({\n setIsOpen,\n type,\n text,\n}: {\n setIsOpen: (isOpen: boolean) => void\n type: string\n text: string\n}) {\n const linkClassName = `\n tw-outline-none\n tw-border-none\n tw-bg-transparent\n tw-font-semibold\n tw-text-cornflower-500\n hover:tw-text-cornflower-700\n `\n\n function openModal() {\n setIsOpen(true)\n }\n\n if (type === 'link') {\n return (\n \n )\n }\n\n return (\n \n )\n}\n\nexport default function NewRequestButton({\n user,\n type = 'button',\n text = 'New Request',\n children,\n}: NewRequestButtonProps): JSX.Element {\n const [isOpen, setIsOpen] = useState setIsOpen(true)}>\n {children}\n
\n ) : (\n \n What are you looking to create?\n
\n