\n
\n Inventory
\n\n
\n \n You have no products\n
\n\n You can start selling as soon as you add a product.\n
\n \n\n
\n );\n }\n\n const iconClass = \"w-8 h-8 lg:w-14 lg:h-14\"\n\n return (\n \n \n
\n \n \n
\n \n \n \n
\n \n \n
\n );\n};\n\nexport default FeedbackForm;\n","import React from \"react\"\nimport PropTypes from \"prop-types\"\n\nconst GhostButton = (props) => {\n\n if (props.isLoading) {\n return (\n \n
\n\n )\n }\n\n return (\n \n \n
\n props.onClick && props.onClick()}\n className={`rounded-lg font-bold py-3 text-center cursor-pointer px-5 block ${props.disabled ? 'bg-primaryLight text-white' : 'bg-white text-textCaption'}`}>\n {props.text}\n
\n )\n}\n\nGhostButton.propTypes = {\n text: PropTypes.string,\n onClick: PropTypes.func,\n isLoading: PropTypes.bool,\n disabled: PropTypes.bool\n};\nexport default GhostButton;","import React from \"react\"\nimport PropTypes from \"prop-types\"\nconst GrinIcon = ({ className }: {className?: string}) => (\n \n
\n );\n};\n\nexport default ImageUpload;\n","\"use client\"\n\nimport * as React from \"react\"\nimport {Check, ChevronsUpDown} from \"lucide-react\"\n\nimport {cn} from \"../../lib/utils\"\nimport {Button} from \"../ui/button\"\nimport {Popover, PopoverContent, PopoverTrigger} from \"../ui/popover\";\nimport {Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList} from \"../ui/command\";\n\n\nexport function LanguageSelection({\n languages,\n onLanguageSelected,\n selectedLanguage,\n }) {\n const [open, setOpen] = React.useState(false)\n\n\n const onOpenChange = (nextOpen) => {\n setOpen(nextOpen);\n }\n\n\n return (\n \n
\n )}\n\n {uploadError && Upload Progress: {uploadProgress}%
\n {uploadProgress === 100 &&Upload complete!
}\n{uploadError}
}\n\n
\n \n \n ))}\n {language.name}
\n \n
\n );\n};\n\nPlayer.propTypes = {\n src: PropTypes.string.isRequired,\n};\n\nexport default Player;\n","import React from \"react\"\nimport PropTypes from \"prop-types\"\n\nconst PrimaryButton = (props) => {\n\n const { className, isLoading, disabled, onClick, text } = props;\n\n if (isLoading) {\n return (\n \n \n
\n \n {currTime.min}:{currTime.sec < 10 ? `0${currTime.sec}` : currTime.sec}\n {\n if (sound) sound.seek(Number(e.target.value));\n }}\n />\n {time.min}:{time.sec < 10 ? `0${time.sec}` : time.sec}\n
\n \n
\n )\n }\n\n return (\n \n \n
\n \n
\n \n ))}\n \n
\n {range.paid && (\n {range.range}
\n Paid
\n )}\n \n {timeSlots.map((timeSlot, index) => (\n selectedSlot.start === timeSlot.value.start && selectedSlot.end === timeSlot.value.end) ? \"bg-primary text-white\" : \"bg-gray-200 text-gray-700\"} cursor-pointer`}\n onClick={() => toggleTimeSlot(timeSlot.value)}\n >\n {timeSlot.label}\n
\n ))}\n\n \n
\n \n ))}\n \n
\n {timeZone.label}
\n \n {[\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"].map((day, index) => {\n return (\n
\n )\n}\n\nWeekdayPicker.propTypes = {\n};\n\nexport default WeekdayPicker\n","import React, {useEffect, useState} from \"react\"\nimport PropTypes from \"prop-types\"\nimport {showJetToast} from \"../Toast\";\n\nconst AutomationCheckbox = ({automationEnabled, enablePageAutomationUrl}) => {\n const [isChecked, setChecked] = useState(automationEnabled || false);\n console.log(isChecked);\n\n const handleAutomationChange = async () => {\n try {\n const response = await fetch(enablePageAutomationUrl, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n // @ts-ignore\n 'X-CSRF-Token': document.querySelector('[name=\"csrf-token\"]').content\n },\n body: JSON.stringify({auto_post: !isChecked}),\n })\n const automationResponse = await response.json();\n if (automationResponse.error) {\n throw new Error(automationResponse.error);\n }\n showJetToast(\"Automation settings updated successfully\");\n } catch (error) {\n showJetToast(\"Failed to update automation settings\");\n }\n setChecked(!isChecked);\n\n }\n\n useEffect(() => {\n\n }, [isChecked]);\n\n return (\n \n )\n}\n\nAutomationCheckbox.propTypes = {\n automationEnabled: PropTypes.bool.isRequired,\n enableShortAutomationUrl: PropTypes.string.isRequired\n};\n\nexport default AutomationCheckbox\n","import React, {useEffect, useState} from \"react\"\nimport PropTypes from \"prop-types\"\nimport {Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue} from \"../ui/select\";\nimport PrimaryButton from \"../common/PrimaryButton\";\nimport {showJetToast} from \"../Toast\";\nimport { Turbo } from \"@hotwired/turbo-rails\";\nimport {Input} from \"../ui/input\";\nimport ImageUpload from \"../common/ImageUpload\";\nimport {Avatar, AvatarFallback, AvatarImage} from \"../ui/avatar\";\n\nconst CreatePage = ({actionName, page, root_url, imageUrlInitial}) => {\n const [pageTitle, setPageTitle] = useState {\n if (selectedDays.includes(index)) {\n setSelectedDays(selectedDays.filter((day) => day !== index));\n } else {\n setSelectedDays([...selectedDays, index]);\n }\n }}>\n {day}\n
\n )\n })}\n \n {actionName == \"new\" ? :\n \n }\n
\n )\n}\n\nCreatePage.propTypes = {};\n\nexport default CreatePage\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogDescription,\n DialogClose\n} from \"../ui/dialog\";\nimport {Button} from \"../ui/button\";\n\nconst DisabledForFreeUsersModal = ({open, setOpen}) => {\n return (\n \n );\n};\n\nDisabledForFreeUsersModal.propTypes = {\n open: PropTypes.bool,\n setOpen: PropTypes.func\n};\n\nexport default DisabledForFreeUsersModal;\n","import React, {useEffect, useState} from \"react\"\nimport PropTypes from \"prop-types\"\nimport PrimaryButton from \"../common/PrimaryButton\";\nimport {Turbo} from \"@hotwired/turbo-rails\";\nimport SocialPostCard from \"../social_posts/SocialPostCard\";\nimport {Skeleton} from \"../ui/skeleton\";\n\n\nconst Dashboard = ({page}) => {\n\n const [socialPosts, setSocialPosts] = useState([]);\n const [socialPostsLoading, setSocialPostsLoading] = useState(false);\n\n useEffect(() => {\n setSocialPostsLoading(true);\n fetch(`/pages/${page.id}/social_posts.json${window.location.search}`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content')\n }\n })\n .then(response => response.json())\n .then(data => {\n setSocialPosts(data);\n setSocialPostsLoading(false);\n });\n }, []);\n\n const onNewPostClick = () => {\n // window.location.href = `/pages/${page.id}/new_social_post_and_save`;\n Turbo.visit(`pages/${page.id}/new_social_post_and_save`);\n }\n\n return (\n Create your page
:\nEdit your page
}\n\n \n\n setPageTitle(e.target.value)}/>\n
\n \n \n \n
\n \n \n Signature Settings (Optional)\n
\n \n \n \n \n CN \n : null}\n \n\n \n
\n\n {/*Brand or Account name. This will be used in carousel posts.
\n Select Visibility for content on this page. This will be used for different social platforms that support setting visibility of content when posted.
*/}\n {/**/}\n {/* setVisibility(value)}>*/}\n {/* */}\n {/* */}\n {/* */}\n {/* */}\n {/* Content Visibility on Social Platforms */}\n {/* public */}\n {/* private */}\n {/* */}\n {/* */}\n {/* */}\n {/*
*/}\n {actionName == \"new\" ?\n \n
\n )\n}\n\nDashboard.propTypes = {\n page: PropTypes.object\n};\n\nexport default Dashboard\n","import React, {useEffect, useState} from \"react\"\nimport PropTypes from \"prop-types\"\nimport {\n Bell,\n CircleUser,\n Home,\n LineChart,\n Menu,\n Package,\n Package2,\n Search,\n ShoppingCart,\n Users,\n} from \"lucide-react\"\nimport {Button} from \"../ui/button\";\nimport {Badge} from \"../ui/badge\";\nimport {Sheet, SheetContent, SheetTrigger} from \"../ui/sheet\";\nimport {Card, CardTitle, CardContent, CardDescription} from \"../ui/card\";\nimport { CardHeader } from \"../ui/card\";\nimport {Input} from \"../ui/input\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger\n} from \"../ui/dropdown-menu\";\n\n\nfunction DashboardTemplate() {\n return (\n \n
\n\n {socialPostsLoading ?\n \n
:\n \n {socialPostsLoading && {\n const newPosts = [...socialPosts];\n newPosts[index] = data;\n setSocialPosts(newPosts);\n }}\n index={index}\n socialPost={socialPost}/>\n ))}\n
\n }\n Loading...
}\n {socialPosts.map((socialPost, index) => (\n \n
\n \n )\n}\n\nexport default DashboardTemplate;\n","import React, {useEffect, useState} from \"react\"\nimport PropTypes from \"prop-types\"\nimport {showJetToast} from \"../Toast\";\nimport PrimaryButton from \"../common/PrimaryButton\";\nimport LinkedinOrganization from \"./LinkedinOrganization\";\n\nconst LinkedInAccountSelection = ({linkedInData, page}) => {\n\n const [loading, setLoading] = useState(false);\n const [loadingText, setLoadingText] = useState('');\n const personalAccountOrganization = {\n id: linkedInData[\"sub\"],\n localizedName: linkedInData[\"name\"],\n picture: linkedInData[\"picture\"],\n type: 'personal'\n }\n const [selectedAccountId, setSelectedAccount] = useState(personalAccountOrganization.id);\n linkedInData[\"organizations\"][personalAccountOrganization.id] = personalAccountOrganization;\n\n const handleAccountClick = () => {\n if (loading) return;\n setLoading(true);\n console.log(selectedAccountId);\n setLoadingText('Setting up your account...');\n fetch(`/pages/${page.id}/linkedin/select_account`, {\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n // @ts-ignore\n \"X-CSRF-Token\": document.querySelector(\"meta[name='csrf-token']\").content\n },\n method: 'POST',\n body: JSON.stringify({account_id: selectedAccountId})\n }).then(response => response.json()).then(data => {\n if (data.error) {\n } else {\n setLoadingText('LinkedIn account connected successfully! Redirecting...');\n window.location.href = '/';\n }\n }).catch((error) => {\n setLoadingText('LinkedIn account connection failed. Redirecting...');\n // window.location.href = '/';\n }).finally(() => {\n setLoading(false);\n });\n }\n\n return (\n \n
\n \n
\n \n \n
\n \n \n
\n \n \n \n Upgrade to Pro \n \n Unlock all features and get unlimited access to our support\n team.\n \n \n \n \n \n \n
\n \n \n \n \n \n \n Toggle navigation menu\n \n \n \n \n \n \n \n \n \n \n \n My Account \n Settings \n Support \n Logout \n \n \n \n \n \n
\n \n \n \n \n Upgrade to Pro \n \n Unlock all features and get unlimited access to our\n support team.\n \n \n \n \n \n \n
\n \n \n
\n \n
\n )\n}\n\nLinkedInAccountSelection.propTypes = {\n brand: PropTypes.object,\n accounts: PropTypes.array\n};\n\nexport default LinkedInAccountSelection\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport {Avatar, AvatarFallback, AvatarImage} from \"../ui/avatar\";\n\nconst LinkedinOrganization = ({organization, handleAccountClick, selected}) => {\n\n function getAvatarName(input: string) {\n const words = input.split(\" \");\n\n if (words.length === 1) {\n return words[0].slice(0, 2).toUpperCase();\n } else {\n const firstLetter = words[0][0];\n const lastLetter = words[words.length - 1][0];\n return (firstLetter + lastLetter).toUpperCase();\n }\n }\n\n return (\n Select LinkedIn Account or Organization
\n {loading ?\n \n Loading...\n
: null}\n {loadingText ? {loadingText}
: null}\n {linkedInData[\"organizations\"] ?\n - \n {Object.keys(linkedInData[\"organizations\"]).map(organizationId => (\n
- \n
setSelectedAccount(linkedInData[\"organizations\"][organizationId].id)}/>\n \n ))}\n
\n \n
\n handleAccountClick(organization.id)}\n className={`${selected ? \"border border-1 border-primary\" : \"\"} cursor-pointer flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow-md`}>\n \n \n {getAvatarName(organization[\"localizedName\"])} \n \n
\n );\n}\n\nLinkedinOrganization.propTypes = {\n account: PropTypes.object,\n handleAccountClick: PropTypes.func,\n selected: PropTypes.bool\n};\n\nexport default LinkedinOrganization;","import React, {Dispatch, useEffect, useMemo, useState} from \"react\"\nimport PropTypes from \"prop-types\"\nimport {Tabs, TabsContent, TabsList, TabsTrigger} from \"../ui/tabs\";\nimport PostTemplateList from \"./PostTemplateList\";\nimport {useCarousel} from \"../../hooks/useCarousel\";\nimport {ThemeSettingsView} from \"./ThemeSettings\";\nimport {SignatureSettings} from \"./SignatureSettings\";\nimport {CarouselData, CarouselSlide, TemplateSettings, ThemeSettings} from \"../../types/carouselData\";\nimport {ScrollArea, ScrollBar} from \"../ui/scroll-area\";\nimport {TemplateOne} from \"../templates/TemplateOne\";\nimport {TemplateTwo} from \"../templates/TemplateTwo\";\nimport themesData from \"../../data/themes.json\";\nimport {showJetToast} from \"../Toast\";\nimport jsPDF from 'jspdf';\nimport {Button} from \"../ui/button\";\nimport {Loader2} from \"lucide-react\";\n\n\nconst CarouselGenerator = ({carouselData, setCarouselData, templates, onDownloadClick, isDownloading, page, isPaidUser}) => {\n const initialSlides = [\n {title: \"Slide 1\", description: \"Description 1\"},\n {title: \"Slide 2\", description: \"Description 2\"},\n ];\n\n // Local state initialized from carouselData\n const [name, setName] = useState(carouselData.name || \"\");\n const [image_url, setImageUrl] = useState(carouselData.image_url || \"\");\n const [social_handle, setSocialHandle] = useState(carouselData.social_handle || \"\");\n const [title, setTitle] = useState(carouselData.data?.title);\n const [call_to_action_text, setCallToActionText] = useState(carouselData.call_to_action_text);\n const [call_to_action_button_text, setCallToActionButtonText] = useState(carouselData.call_to_action_button_text);\n const [slides, setSlides] = useState(carouselData.data?.slides || initialSlides);\n const [theme_settings, setThemeSettings] = useState(carouselData.theme_settings || themesData[6]);\n const [isCarouselExporting, setIsCarouselExporting] = useState(false);\n const width = \"480x\";\n const height = \"600px\";\n\n useEffect(() => {\n // update only if values change\n if (carouselData.name === name && carouselData.image_url === image_url && carouselData.social_handle === social_handle &&\n carouselData.call_to_action_text === call_to_action_text && carouselData.call_to_action_button_text === call_to_action_button_text &&\n carouselData.data?.title === title && carouselData.data?.slides === slides && carouselData.theme_settings === theme_settings) {\n return;\n }\n setCarouselData({\n title,\n name,\n image_url,\n social_handle,\n call_to_action_text,\n call_to_action_button_text,\n theme_settings,\n data: {\n title,\n slides,\n },\n template_settings: templates[carouselData.template_settings.template_name]\n });\n }, [name, image_url, social_handle, call_to_action_text,\n call_to_action_button_text, slides, theme_settings, carouselData, setCarouselData, title]);\n\n const setTemplateSettings = (template) => {\n switch (template.template_name) {\n case \"Formal\":\n setThemeSettings(themesData[5]);\n break;\n case \"Android\":\n setThemeSettings(themesData[0]);\n break;\n case \"Modern\":\n setThemeSettings(themesData[6]);\n break;\n case \"Pink\":\n setThemeSettings(themesData[7]);\n break;\n default:\n setThemeSettings(themesData[5]);\n break;\n }\n\n setCarouselData({\n ...carouselData,\n template_settings: templates[template.template_name]\n });\n }\n\n const onAddClick = (index) => {\n const newSlides = [...slides];\n newSlides.splice(index + 1, 0, {title: \"Sample Title\", description: \"Sample Description\"});\n setSlides(newSlides);\n }\n\n const onDeleteClick = (index) => {\n if (slides.length === 1) {\n showJetToast(\"At least one slide is required\");\n return;\n }\n const newSlides = [...slides];\n newSlides.splice(index, 1);\n setSlides(newSlides);\n }\n\n const exportPdf = async () => {\n setIsCarouselExporting(true);\n\n const pdf = new jsPDF({\n orientation: 'portrait',\n unit: 'px',\n format: [480, 600],\n });\n\n const elements = document.querySelectorAll('.pdf-page');\n\n // remove all nodes with class icon\n elements.forEach((element) => {\n const icons = element.querySelectorAll('.icon');\n icons.forEach((icon) => {\n icon.remove();\n });\n });\n\n for (let i = 0; i < elements.length; i++) {\n if (i > 0) pdf.addPage();\n\n // @ts-ignore\n await pdf.html(elements[i], {\n width: 480,\n windowWidth: 480,\n x: 0,\n y: 480 * i,\n fontFaces: [\n {\n family: 'Poppins',\n src: [\n {\n url: 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap',\n format: 'woff2'\n }\n ]\n },\n {\n family: 'Roboto',\n src: [\n {\n url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap',\n format: 'woff2'\n }\n ]\n }\n ]\n });\n }\n\n // delete last page, hack to fix last blank page\n // @ts-ignore\n pdf.deletePage(pdf.internal.getNumberOfPages());\n const currentTime = new Date().toLocaleString();\n pdf.save(`carousel_${currentTime}.pdf`);\n\n setIsCarouselExporting(false);\n };\n\n const onTitleChange = (index, title) => {\n const newSlides = [...slides];\n newSlides[index].title = title;\n setSlides(newSlides);\n }\n\n const onCarouselTitleChange = (title: string) => {\n setTitle(title);\n }\n\n const onDescriptionChange = (index, description) => {\n const newSlides = [...slides];\n newSlides[index].description = description;\n setSlides(newSlides);\n }\n\n const onSignatureChange = (field) => (e) => {\n const value = e.target.value;\n switch (field) {\n case 'name':\n setName(value);\n break;\n case 'image_url':\n setImageUrl(value);\n break;\n case 'call_to_action_text':\n setCallToActionText(value);\n break;\n case 'call_to_action_button_text':\n setCallToActionButtonText(value);\n break;\n case 'social_handle':\n setSocialHandle(value);\n break\n default:\n break;\n }\n };\n\n\n if (!carouselData.data || !carouselData.data?.slides || !theme_settings) {\n return \n {organization[\"localizedName\"]}\n
\n ID: {organization[\"id\"]}
\nLoading...
;\n }\n\n return (\n \n \n \n Design \n Theme \n Signature \n \n\n \n {\n setTemplateSettings(templates[value])\n }\n }>\n \n {Object.keys(templates).map((template) => (\n \n {template}\n \n ))}\n \n \n \n\n \n \n \n\n \n \n \n \n
\n );\n};\n\nCarouselGenerator.propTypes = {};\n\nexport default CarouselGenerator\n","import React, {useEffect, useState} from \"react\"\nimport PropTypes from \"prop-types\"\nimport {Skeleton} from \"../ui/skeleton\";\n\nconst CarouselPlaceholder = ({carouselData}) => {\n return (\n Pro Tip: You can edit the content in carousel.
\n \n
\n\n \n {carouselData.template_settings.renderSlide({\n carouselData,\n index: -1,\n onDeleteClick,\n onAddClick,\n onCarouselTitleChange,\n onTitleChange,\n onDescriptionChange,\n isPaidUser: isPaidUser\n })}\n
\n {carouselData.data.slides?.map((slide, index) => (\n \n {carouselData.template_settings.renderSlide({\n carouselData,\n index,\n onDeleteClick,\n onAddClick,\n onCarouselTitleChange,\n onTitleChange,\n onDescriptionChange,\n isPaidUser: isPaidUser\n })}\n
\n ))}\n \n {carouselData.template_settings.renderSlide({\n carouselData,\n index: 999,\n onDeleteClick,\n onAddClick,\n onCarouselTitleChange,\n onTitleChange,\n onDescriptionChange,\n isPaidUser: isPaidUser\n })}\n
\n \n
\n \n :
\n }\n\n \n
\n Create Post
\n\n \n The language your LinkedIn post will be\n in. \n \n \n \n \n setLanguage(language)}\n />\n
\n \n \n \n Carousel \n \n {(generatePostLoading || polling) ?\n : null}\n {(!generatePostLoading && !polling && carouselData.data) ?\n : null}\n \n \n : <>}\n
\n\n \n setType(value)}>\n \n \n \n Create LinkedIn Post from \n Topic \n Link \n Text \n Youtube \n \n \n \n
\n Create a LinkedIn post from {type}
\n \n \n
\n\n {/**/}\n {/* */}\n {/* */}\n {/*
*/}\n \n
\n {generateCarousel ? \n \n \n Add carousel\n \n
\n \n \n setContent(e.target.value)}\n />\n {content && content.length > 3000 ?
\n \n
\n\n \n
\n {linkedinData?.['name'] || user.full_name || 'Sample Name'} • You
\n \n\n
\n \n 1m\n •\n \n
\n \n {content.length}/3000\n
: <>}\n\n \n\n\n \n
\n {socialPost.status == \"published\" ? \n \n \n
\n \n
\n\n \n \n \n \n \n \n \n \n \n Schedule for later? \n \n This will schedule the post to be published at the specified time. Are you\n sure\n you want to schedule the post?\n \n \n \n Cancel \n \n Schedule\n \n \n \n \n
\n \n \n \n \n \n \n \n \n Publish to LinkedIn \n \n This will post your post on LinkedIn. Post Now?\n \n \n \n Cancel \n \n \n \n \n \n
\n Publish Now
\n Schedule for Later
\n You can edit the post anytime before it is\n published.
\n \n setTypeValue(e.target.value)}\n className=\"overflow-x-scroll focus:border-transparent focus:ring-0 focus:outline-none shadow h-12\"\n type=\"text\" placeholder=\"Enter topic/keywords here. e.g. why most startups fail\" />\n
\n )\n } else if (type === \"Link\") {\n return (\n \n setTypeValue(e.target.value)}\n type=\"text\" placeholder=\"Paste link here. e.g. https://example.com\"/>\n setInputData({...inputData, additional_prompt: e.target.value})}\n className=\"overflow-x-scroll w-full lg:w-[80%] mt-4 focus:border-transparent focus:ring-0 focus:outline-none shadow h-12\"\n type=\"text\" placeholder=\"(Optional) Additional instructions to AI like focus on how it is similar to X\"/>\n
\n )\n } else if (type === \"Text\") {\n return (\n \n setTypeValue(e.target.value)}\n className={`h-64 overflow-scroll block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full`}\n />\n
\n )\n } else if (type === \"Youtube\") {\n return (\n \n setTypeValue(e.target.value)}\n className=\"overflow-x-scroll focus:border-transparent focus:ring-0 focus:outline-none shadow h-12\"\n type=\"text\" placeholder=\"Paste youtube link here. e.g. https://www.youtube.com/watch?v=example\"/>\n setInputData({...inputData, additional_prompt: e.target.value})}\n className=\"overflow-x-scroll w-full lg:w-[80%] mt-4 focus:border-transparent focus:ring-0 focus:outline-none shadow h-12\"\n type=\"text\" placeholder=\"(Optional) Additional instructions to AI like focus on how the video is good for X\"/>\n
\n )\n }\n\n return (\n \n
\n )\n}\n\nCreateSocialPostFromInput.propTypes = {\n};\n\nexport default CreateSocialPostFromInput\n","import React, {useState} from \"react\";\nimport PropTypes from \"prop-types\";\nimport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogDescription,\n DialogClose\n} from \"../ui/dialog\";\nimport {Button} from \"../ui/button\";\nimport {\n AlertDialog, AlertDialogAction, AlertDialogCancel,\n AlertDialogContent, AlertDialogDescription, AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger\n} from \"../ui/alert-dialog\";\n\nconst DeleteSocialPostModal = ({open, setOpen, onDeleteClick}) => {\n\n return (\n \n
\n );\n};\n\nexport default PostTemplateCard;\n","import React, {useEffect, useState} from \"react\"\nimport PropTypes from \"prop-types\"\nimport PostTemplateCard from \"./PostTemplateCard\";\n\nconst PostTemplateList = ({selectedPostTemplate, setSelectedPostTemplate, setContent, setShowTemplateSelectionModal}) => {\n\n const [templates, setTemplates] = useState([]);\n\n const fetchTemplates = async () => {\n try {\n const response = await fetch(\"/post_templates.json\",{\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n // @ts-ignore\n \"X-CSRF-Token\": document.querySelector('[name=\"csrf-token\"]').content\n }\n });\n const data = await response.json();\n setTemplates(data);\n } catch (error) {\n console.error(\"Error fetching templates\", error);\n }\n }\n\n useEffect(() => {\n fetchTemplates();\n }, []);\n\n return (\n setIsExpanded(!isExpanded)}>\n {text}\n
\n\n \n\n {templates.map((template) => (\n \n ))}\n
\n )\n}\n\nPostTemplateList.propTypes = {\n};\n\nexport default PostTemplateList\n","import React, {useState} from \"react\";\nimport PropTypes from \"prop-types\";\nimport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogDescription,\n DialogClose\n} from \"../ui/dialog\";\nimport {Button} from \"../ui/button\";\nimport {Tabs, TabsContent, TabsList, TabsTrigger} from \"../ui/tabs\";\nimport PostTemplateList from \"./PostTemplateList\";\n\nconst PostTemplateSelectionModal = ({open, setOpen, selectedPostTemplate, setSelectedPostTemplate, setContent}) => {\n\n const [selectedCategory, setSelectedCategory] = useState(null);\n\n return (\n \n );\n};\n\nPostTemplateSelectionModal.propTypes = {\n open: PropTypes.bool,\n setOpen: PropTypes.func\n};\n\nexport default PostTemplateSelectionModal;\n","import React from \"react\";\nimport {CarouselData} from \"../../types/carouselData\";\nimport {Input} from \"../ui/input\";\nimport { Turbo } from \"@hotwired/turbo-rails\";\n\ninterface SignatureSettingsProps {\n name: string;\n image_url: string;\n call_to_action_text: string;\n call_to_action_button_text: string;\n social_handle: string;\n onSignatureChange: (field: string) => (e: React.ChangeEvent\n
\n );\n};\n","import React, {useEffect, useRef, useState} from \"react\";\nimport PropTypes from \"prop-types\";\nimport {Edit, Trash2} from \"lucide-react\";\nimport {Button} from \"../ui/button\";\nimport {Turbo} from \"@hotwired/turbo-rails\";\nimport DeleteSocialPostModal from \"./DeleteSocialPostModal\";\nimport {showJetToast} from \"../Toast\";\nimport SocialPostStatus from \"./SocialPostStatus\";\nimport {formatLocalTime} from \"../../lib/utils\";\n\nconst SocialPostCard = ({socialPost, page, setSocialPost, index}) => {\n\n const [showDeleteModal, setShowDeleteModal] = useState(false);\n const intervalRef = useRef(null); // To store the interval ID\n const isFetchingRef = useRef(false); // Track if a fetch is in progress\n const retryCount = useRef(0); // Initialize the counter with useRef\n\n let border = \"border-dashed border-2 border-gray-400\"\n switch (socialPost.status) {\n case \"draft\":\n border = \"border-dashed border-2 border-gray-400\"\n break;\n case \"scheduled\":\n border = \"border-dashed border-2 border-amber-400\"\n break;\n case \"published\":\n border = \"border-2\"\n break;\n case \"deleted\":\n border = \"border-dashed border-2 border-red-400\"\n break;\n default:\n border = \"border-dashed border-2 border-gray-400\"\n }\n\n useEffect(() => {\n if (socialPost.status === \"publishing\") {\n startPolling();\n }\n\n return () => {\n clearInterval(intervalRef.current); // Clean up interval\n retryCount.current = 0; // Reset retry count\n };\n }, []);\n\n const fetchSocialPost = async () => {\n try {\n if (retryCount.current > 4) {\n clearInterval(intervalRef.current); // Stop polling if retry count is more than 5\n return;\n }\n if (isFetchingRef.current) return;\n\n isFetchingRef.current = true; // Mark fetching as true\n const response = await fetch(`/pages/${page.id}/social_posts/${socialPost.id}.json`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n // @ts-ignore\n 'X-CSRF-Token': document.querySelector('[name=\"csrf-token\"]').content,\n },\n });\n if (response.ok) {\n const data = await response.json();\n if (data.status !== \"publishing\") {\n clearInterval(intervalRef.current); // Stop polling if status is not publishing\n }\n if (data.last_updated_at != socialPost.last_updated_at) {\n clearInterval(intervalRef.current);\n }\n setSocialPost(data, index);\n return data;\n } else {\n console.error('Failed to fetch social post');\n }\n } catch (error: any) {\n console.error('Error:', error.message);\n } finally {\n isFetchingRef.current = false; // Mark fetching as false after completion\n retryCount.current += 1; // Increment the retry count\n }\n }\n\n const startPolling = () => {\n if (!intervalRef.current) { // Only start a new interval if one doesn't exist\n intervalRef.current = setInterval(() => {\n fetchSocialPost(); // Fetch data every 30 seconds\n }, 20000); // 20 seconds\n }\n };\n\n const onEditClick = () => {\n // window.location.href = `/pages/${page.id}/social_posts/${socialPost.id}/edit`;\n Turbo.visit(`pages/${page.id}/social_posts/${socialPost.id}/edit`);\n }\n\n const onDeleteClick = () => {\n setShowDeleteModal(true);\n }\n\n const deleteSocialPost = async () => {\n try {\n const response = await fetch(`/pages/${page.id}/social_posts/${socialPost.id}.json`, {\n method: 'DELETE',\n headers: {\n 'Content-Type': 'application/json',\n // @ts-ignore\n 'X-CSRF-Token': document.querySelector('[name=\"csrf-token\"]').content,\n },\n });\n if (response.ok) {\n Turbo.visit(\"/dashboard\");\n } else {\n showJetToast(\"Failed to delete post!\");\n }\n } catch (error: any) {\n console.error('Error:', error.message);\n showJetToast(\"Failed to delete post!\");\n } finally {\n setShowDeleteModal(false);\n }\n }\n\n return (\n \n Edit the signature settings for all future posts in page settings.\n
\n \n \n \n
\n );\n};\n\nSocialPostCard.propTypes = {\n socialPost: PropTypes.object.isRequired,\n};\n\nexport default SocialPostCard;\n","import React, {useEffect, useMemo, useState} from \"react\"\nimport PropTypes from \"prop-types\"\nimport {TemplateOne} from \"../templates/TemplateOne\";\nimport {TemplateTwo} from \"../templates/TemplateTwo\";\nimport themesData from \"../../data/themes.json\";\nimport {TemplateModern} from \"../templates/TemplateModern\";\nimport {TemplatePink} from \"../templates/TemplatePink\";\n\nconst SocialPostPdf = ({carouselDataOriginal, linkedinData, pageImageUrl, page, isPaidUser}) => {\n\n const templates = useMemo(() => ({\n Modern: {template_name: \"Modern\", renderSlide: TemplateModern},\n Android: {template_name: \"Android\", renderSlide: TemplateOne},\n Formal: {template_name: \"Formal\", renderSlide: TemplateTwo},\n Pink: {template_name: \"Pink\", renderSlide: TemplatePink},\n }), []);\n\n const getCarouselData = (newCarouselData: any) => {\n return {\n ...newCarouselData,\n name: newCarouselData?.name || page.signature_settings?.name || linkedinData?.[\"name\"],\n image_url: newCarouselData?.image_url || pageImageUrl || linkedinData?.[\"picture\"],\n call_to_action_text: newCarouselData?.call_to_action_text || page.signature_settings?.call_to_action_text || \"Liked the content?\",\n call_to_action_button_text: newCarouselData?.call_to_action_button_text || page.signature_settings?.call_to_action_button_text || \"Follow for more\",\n data: newCarouselData?.data || {\n title: \"Carousel Title\",\n slides: [\n {title: \"Slide 1\", description: \"Description 1\"},\n {title: \"Slide 2\", description: \"Description 2\"},\n ]\n },\n theme_settings: newCarouselData?.theme_settings || themesData[6],\n template_settings: templates[newCarouselData?.template_settings?.template_name || \"Modern\"],\n };\n };\n\n const [carouselData, setCarouselData] = useState(getCarouselData(carouselDataOriginal));\n\n const width = \"1200px\";\n const height = \"1500px\";\n\n const template_settings = templates[carouselData.template_settings?.template_name || \"Modern\"];\n\n return (\n \n {socialPost.status != \"deleted\" ? : null}\n \n {socialPost.status != \"deleted\" ?\n : null}\n
\n\n \n {socialPost.title}\n
\n\n onEditClick()}>{socialPost.content}
\n Created at: {formatLocalTime(socialPost.created_at)}
\n Last Updated: {formatLocalTime(socialPost.updated_at)}
\n {socialPost.status === \"scheduled\" ? (\n \n
\n ) : null}\n Scheduled\n at: {formatLocalTime(socialPost.scheduled_at)}
\n \n {template_settings.renderSlide({\n carouselData,\n index: -1,\n height,\n width,\n isPaidUser,\n })}\n {carouselData.data.slides?.map((slide, index) => (\n template_settings.renderSlide({\n carouselData,\n index,\n height,\n width,\n hideIcons: true,\n isPaidUser,\n })\n ))}\n {template_settings.renderSlide({\n carouselData,\n index: 999,\n height,\n width,\n isPaidUser,\n })}\n
\n )\n}\n\nSocialPostPdf.propTypes = {};\n\nexport default SocialPostPdf\n","import React, {useEffect, useState} from \"react\"\nimport PropTypes from \"prop-types\"\n\nconst SocialPostStatus = ({socialPost, shares}) => {\n\n let statusName = \"Draft\";\n switch (socialPost.status) {\n case \"scheduled\":\n statusName = \"Scheduled\";\n break;\n case \"published\":\n statusName = \"Published\";\n break;\n case \"publishing\":\n statusName = \"Publishing\";\n break;\n case \"deleted\":\n statusName = \"Deleted\";\n break;\n default:\n statusName = \"Draft\";\n }\n let statusStyle = \"bg-gray-400 text-white focus:ring-2 focus:outline-none font-medium rounded-lg text-sm px-3 py-1 text-center inline-flex items-center\";\n switch (socialPost.status) {\n case \"scheduled\":\n statusStyle = \"bg-amber-500 text-white focus:ring-2 focus:outline-none font-medium rounded-lg text-sm px-3 py-1 text-center inline-flex items-center\";\n break;\n case \"published\":\n statusStyle = \"bg-green-500 text-white focus:ring-2 focus:outline-none font-medium rounded-lg text-sm px-3 py-1 text-center inline-flex items-center\";\n break;\n case \"publishing\":\n statusStyle = \"bg-green-700 text-white focus:ring-2 focus:outline-none font-medium rounded-lg text-sm px-3 py-1 text-center inline-flex items-center\";\n break;\n case \"deleted\":\n statusStyle = \"bg-red-500 text-white focus:ring-2 focus:outline-none font-medium rounded-lg text-sm px-3 py-1 text-center inline-flex items-center\";\n break;\n default:\n statusStyle = \"bg-gray-400 text-white focus:ring-2 focus:outline-none font-medium rounded-lg text-sm px-3 py-1 text-center inline-flex items-center\";\n }\n\n return (\n \n \n {statusName}\n
\n {(socialPost?.shares || shares)?.map((share: any, index: number) => (\n share?.shared && (\n \n
\n\n Predefined Themes
\n\n {themesData.map((theme) => (\n onThemeChange(theme)}\n >\n
\n ))}\n \n
\n \n\n\n );\n};\n","import React, {useEffect} from \"react\";\nimport {CarouselData, CarouselSlide, ThemeSettings} from \"../../types/carouselData\";\nimport {CirclePlus, Trash2} from \"lucide-react\";\nimport {Button} from \"../ui/button\";\nimport {Avatar, AvatarFallback, AvatarImage} from \"../ui/avatar\";\nimport ContentEditable from \"../common/ContentEditable\";\nimport themesData from \"../../data/themes.json\";\nimport {TemplateProps} from \"./TemplateOne\";\n\n\nexport const TemplateModern: React.FC\n
\n\n\n \n \n \n onThemeChange({...theme, background_one_color: e.target.value})\n }\n />\n
\n\n \n \n \n onThemeChange({...theme, heading_one_color: e.target.value})\n }\n />\n
\n\n \n \n \n onThemeChange({...theme, background_content_color: e.target.value})\n }\n />\n
\n\n \n \n \n onThemeChange({...theme, heading_content_color: e.target.value})\n }\n />\n
\n\n \n \n \n onThemeChange({...theme, content_color: e.target.value})\n }\n />\n
\n \n
\n \n \n \n \n
\n \n
\n {carouselData.name}
{/* Name */}\n{carouselData.social_handle}
{/* Handle */}\n\n ![\"swipe]({\"/icons/swipe_hand.png\"})
\n ![\"swipe]({\"/icons/swipe_right.png\"})
\n
\n \n \n\n )\n }\n\n if (index == 999) {\n return (\n \n \n \n \n \n \n
\n {carouselData.name}
\n \n
\n {!isPaidUser ? {carouselData.call_to_action_text}
\n{carouselData.call_to_action_button_text}
\n\n Made with KolPost.com\n
: <>}\n \n )\n }\n\n return (\n \n
}\n onAddClick(index)}>\n
\n onDeleteClick(index)}>\n
\n \n \n \n
\n \n \n );\n};\n\n","import React, {useEffect} from \"react\";\nimport {CarouselData, CarouselSlide, ThemeSettings} from \"../../types/carouselData\";\nimport {CirclePlus, Trash2} from \"lucide-react\";\nimport {Button} from \"../ui/button\";\nimport {Avatar, AvatarFallback, AvatarImage} from \"../ui/avatar\";\nimport ContentEditable from \"../common/ContentEditable\";\nimport themesData from \"../../data/themes.json\";\n\n\nexport interface TemplateProps {\n templateName: string;\n carouselData: CarouselData;\n index: number;\n onDeleteClick: (index: number) => void;\n onAddClick: (index: number) => void;\n onCarouselTitleChange: (title: string) => void;\n onTitleChange: (index: number, title: string) => void;\n onDescriptionChange: (index: number, description: string) => void;\n height: string;\n width: string;\n hideIcons: boolean;\n isPaidUser: boolean;\n}\n\nexport const TemplateOne: React.FC\n \n \n
\n\n {/* Swipe button */}\n \n \n \n\n )\n }\n\n if (index == 999) {\n return (\n \n \n \n CN \n \n
\n \n
\n {carouselData.name}
{/* Name */}\n{carouselData.social_handle}
{/* Handle */}\n\n \n \n CN \n \n
\n {carouselData.name}
\n \n
\n {!isPaidUser ? {carouselData.call_to_action_text}
\n{carouselData.call_to_action_button_text}
\n\n Made with KolPost.com\n
: <>}\n \n )\n }\n\n return (\n \n
}\n onAddClick(index)}>\n
\n onDeleteClick(index)}>\n
\n \n
\n\n {/* Swipe button */}\n \n \n \n );\n};\n\n","import React, {useEffect} from \"react\";\nimport {CarouselData, CarouselSlide, ThemeSettings} from \"../../types/carouselData\";\nimport {CirclePlus, Trash2} from \"lucide-react\";\nimport {Button} from \"../ui/button\";\nimport {Avatar, AvatarFallback, AvatarImage} from \"../ui/avatar\";\nimport ContentEditable from \"../common/ContentEditable\";\nimport themesData from \"../../data/themes.json\";\nimport {TemplateProps} from \"./TemplateOne\";\n\n\nexport const TemplatePink: React.FC\n \n \n CN \n \n
\n \n
\n {carouselData.name}
{/* Name */}\n{carouselData.social_handle}
{/* Handle */}\n\n
\n \n \n \n \n
\n \n
\n {carouselData.name}
{/* Name */}\n\n ![\"swipe]({\"/icons/swipe_hand.png\"}\n)
\n
\n \n \n\n )\n }\n\n if (index == 999) {\n return (\n \n \n \n \n \n
\n {carouselData.name}
\n \n
\n {!isPaidUser ? {carouselData.call_to_action_text}
\n{carouselData.call_to_action_button_text}
\n\n Made with KolPost.com\n
: <>}\n \n )\n }\n\n return (\n \n
}\n onAddClick(index)}>\n
\n onDeleteClick(index)}>\n
\n \n \n
\n \n \n );\n};\n\n","import React from \"react\";\nimport {TemplateProps} from \"./TemplateOne\";\nimport themesData from \"../../data/themes.json\";\nimport {Avatar, AvatarFallback, AvatarImage} from \"../ui/avatar\";\nimport {Button} from \"../ui/button\";\nimport {CirclePlus, Trash2} from \"lucide-react\";\nimport ContentEditable from \"../common/ContentEditable\";\n\n\nexport const TemplateTwo: React.FC\n \n \n \n CN \n \n
\n {carouselData.name}
\n \n
\n {!isPaidUser ? {carouselData.call_to_action_text}
\n{carouselData.call_to_action_button_text}
\n\n Made with KolPost.com\n
: <>}\n \n )\n }\n\n return (\n \n
}\n onAddClick(index)}>\n
\n onDeleteClick(index)}>\n
\n {children}
\n \n))\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n","import * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"../../lib/utils\"\nimport {buttonVariants} from \"./button\";\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef\n
\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n React.ElementRef\n\t\t\t
\n\t);\n}\n\ninterface CalendarGridProps {\n\tstate: CalendarState;\n}\n\nfunction CalendarGrid({ state, ...props }: CalendarGridProps) {\n\tconst { locale } = useLocale();\n\tconst { gridProps, headerProps, weekDays } = useCalendarGrid(props, state);\n\n\t// Get the number of weeks in the month so we can render the proper number of rows.\n\tconst weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);\n\n\treturn (\n\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t{title}
\n\t\t\t\t| \n\t\t\t\t\t\t\t{day}\n\t\t\t\t\t\t | \n\t\t\t\t\t))}\n\t\t\t\t
|---|
| ))}\n\t\t\t\t\t |
\n
\n \n {Array.from({length: (props.max - props.min) / props.step + 1}).map((_, i) => (\n 0 && props.min + i * props.step === props.value[0],\n 'text-10': i > 0 && i < (props.max - props.min) / props.step\n })}\n role='presentation'\n >\n {props.min + i * props.step}\n \n ))}\n
}\n \n\n))\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport {Slider}\n","import * as React from \"react\"\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\n\nimport {cn} from \"../../lib/utils\"\n\nconst Switch = React.forwardRef<\n React.ElementRef\n
\n );\n}","\"use client\"\n\n\nimport React from \"react\";\nimport {\n TimePickerType,\n getArrowByType,\n getDateByType,\n setDateByType,\n} from \"./time-picker-utils\";\nimport {cn} from \"../../lib/utils\";\nimport {Input} from \"./input\";\n\nexport interface TimePickerInputProps\n extends React.InputHTMLAttributes\n \n minuteRef.current?.focus()}\n />\n
\n \n \n hourRef.current?.focus()}\n />\n
\n \n
\n