\n {actionName == \"new\" ? :\n \n }\n
\n )\n}\n\nCreateBrand.propTypes = {\n personas: PropTypes.array.isRequired,\n root_url: PropTypes.string.isRequired,\n brand: PropTypes.object,\n brandPersona: PropTypes.object,\n actionName: PropTypes.string.isRequired\n};\n\nexport default CreateBrand\n","import React, {useEffect, useState} from \"react\"\nimport {Popover, PopoverContent, PopoverTrigger} from \"../ui/popover\";\nimport {Info} from \"lucide-react\";\nimport {RadioGroup, RadioGroupItem} from \"../ui/radio-group\";\nimport {Label} from \"../ui/label\";\nimport {Tabs, TabsContent, TabsList, TabsTrigger} from \"../ui/tabs\";\nimport TextareaAutosize from \"react-textarea-autosize\";\nimport {Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue} from \"../ui/select\";\nimport PrimaryButton from \"../common/PrimaryButton\";\nimport {showJetToast} from \"../Toast\";\nimport ImageStyles from \"../short/ImageStyles\";\nimport imageStylesData from \"../short/image_styles.json\";\nimport {AudioSelection} from \"../common/AudioSelection\";\nimport audioStylesData from \"../short/audio_styles.json\";\nimport backgroundMusicData from \"../short/background_music.json\";\nimport {Slider} from \"../ui/slider\";\nimport TextStyles from \"../short/TextStyles\";\nimport textStylesData from \"../short/text_styles.json\";\nimport {Turbo} from '@hotwired/turbo-rails';\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger\n} from \"../ui/alert-dialog\";\nimport {DateValue} from \"react-aria\";\nimport {fromDate, getLocalTimeZone} from \"@internationalized/date\";\nimport TimeSlotSelector from \"../common/TimeSlotSelector\";\nimport moment from \"moment-timezone\";\nimport {LanguageSelection} from \"../common/LanguageSelection\";\n\nconst timeZones = moment.tz.names().map(tz => {\n const offset = moment.tz(tz).utcOffset();\n const hours = Math.floor(offset / 60);\n const minutes = Math.abs(offset % 60);\n const sign = offset >= 0 ? '+' : '-';\n const formattedOffset = `${sign}${String(Math.abs(hours)).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;\n\n return {\n value: tz,\n label: `${tz} (UTC${formattedOffset})`\n };\n});\n\nconst CreateShortAutomation = ({isPaidUser, scriptPrompts, brand, lastGenerationData, languages}) => {\n const [language, setLanguage] = useState(languages.find((language) => language.code === (brand.generation_data?.generation_prompts?.language || \"en\")));\n const [script, setScript] = useState(\"\");\n let previousScriptPrompt = brand.generation_data?.generation_prompts?.text_generation_prompt || \"\";\n const noPrompt = {prompt: \"None\", title: \"None\"}\n let previousSelectedPrompt = scriptPrompts.filter((prompt: {\n title: any;\n }) => prompt.title == brand?.generation_data?.generation_prompts?.prompt_title)?.[0];\n if (brand.generation_data?.generation_prompts?.prompt_title != \"None\") {\n previousScriptPrompt = \"\";\n }\n if (previousSelectedPrompt == null) {\n previousSelectedPrompt = noPrompt;\n }\n const [scriptPrompt, setScriptPrompt] = useState(previousScriptPrompt);\n const [myScriptPrompts, setMyScriptPrompts] = useState(scriptPrompts);\n const [selectedPrompt, setSelectedPrompt] = useState(previousSelectedPrompt);\n const [generatingScript, setGeneratingScript] = useState(false);\n const [textGenerationPrompt, setTextGenerationPrompt] = useState('');\n const [selectedBackgroundMusic, setSelectedBackgroundMusic] =\n useState(brand.generation_data?.music_settings || backgroundMusicData.find(music => music.name === \"Trending\"));\n const [selectedTextStyle, setSelectedTextStyle] = useState({...(brand.generation_data?.text_settings || lastGenerationData?.text_settings || textStylesData[0])});\n const [selectedImageStyle, setSelectedImageStyle] =\n useState(brand.generation_data?.image_settings || imageStylesData[0]);\n const [selectedAudioStyle, setSelectedAudioStyle] =\n useState(brand.generation_data?.voice_settings || audioStylesData[0]);\n const [audioStyles, setAudioStyles] = useState(audioStylesData);\n const [visibility, setVisibility] = useState(brand.visibility || \"public\");\n const [selectedDays, setSelectedDays] = useState(brand.auto_post_days || [0, 1, 2, 3, 4, 5, 6]);\n const [showConfirmationPopup, setShowConfirmationPopup] = useState(false);\n const [voicePlaybackRate, setVoicePlaybackRate] = useStateCreate your page
:Edit your page
}\nWhat best describes your page?
\n \n {personas.map((persona, index) => (\n handlePersonaSelection(persona)}/>\n ))}\n
\n \n \n\n setBrandTitle(e.target.value)}/>\n
\n \n \n \n
\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 unlisted \n \n \n \n
\n {actionName == \"new\" ?\n \n \n Make Prompt for video\n
\n To fully automate your Instagram, TikTok page or Youtube Channel there are
\n setLanguage(language)}\n />\n {language.code !== \"en\" && !isPaidUser ?
\n\n Step 1: Select or Create a prompt for your video
\n\n \n \n \n Select Language\n \n \n \n The language your video script will be\n in. \n \n
\n \n We suggest upgrading to our paid plans to get better results with languages other than English.\n
: null}\n \n \n \n Select Prompt \n Type Prompt \n \n \n \n \n \n \n \n
\n\n \n
\n {\n event.preventDefault();\n return false;\n }}>\n Choose to generate script from our prompts.\n setSelectedPrompt(myScriptPrompts.find(prompt => prompt.prompt === value) || noPrompt)}>\n \n \n \n \n Prompts \n {noPrompt.title} \n {myScriptPrompts.map((prompt, index) => (\n {prompt.title} \n ))}\n \n \n \n
\n \n \n
\n Step 2: Select visual settings for your video
\n\n Choose a visual style for your video\n
\n \n
\n \n \n
\n \n Choose a voice over\n
\n \n a.position - b.position)}\n placeholder={\"Select music\"}\n searchPlaceholder={\"Search music...\"}\n onAudioStyleSelected={handleBackMusicSelected}/>\n
\n \n Select Background music\n
\n \n
\n\n \n \n \n \n Playback speed for voice (1x-{VOICE_PLAYBACK_RATE_MAX}x) \n \n \n \n You can play the voiceover above\n after changing playback rate to get idea of speed of audio. \n \n
\n \n setVoicePlaybackRate(value[0])}/>\n
\n \n Caption Style\n
\n Step 3: Select your video frequency and time slot.
\nYou can select multiple time slots, one video will be generated per time slot you select. We will post on optimal time within that time slot.
\nWe recommend selecting one or two slot only. Posting daily for a longer duration (1-2 month) helps in getting more views on different platforms like Youtube/TikTok/SnapChat. If you select multiple slots, multiple videos will be posted daily and your credits will be consumed faster.
\n\n {/**/}\n {/* */}\n {/* */}\n {/*
*/}\n\n \n
\n\n\n Visibility \n For social platforms that support visibility of posts\n \n
\n \n setVisibility(value)}>\n \n \n \n \n Content Visibility on Social Platforms \n public \n private \n unlisted \n \n \n \n
\n handleAccountClick(instagram_business_account.id)}\n className=\"cursor-pointer flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow-md\">\n 
\n
\n );\n}\n\nexport default InstagramAccount;","import React, {useEffect, useState} from \"react\"\nimport PropTypes from \"prop-types\"\nimport InstagramAccount from \"./InstagramAccount\";\n\nconst InstagramCallback = (props) => {\n\n const [loading, setLoading] = useState(false);\n const [loadingText, setLoadingText] = useState('');\n const [accounts, setAccounts] = useState([]);\n\n const handleAccountClick = (accountId) => {\n setLoading(true);\n setLoadingText('Setting up your account...');\n fetch('/instagram/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({instagram_user_id: accountId})\n }).then(response => response.json()).then(data => {\n if (data.error) {\n } else {\n setLoadingText('Instagram account connected successfully! Redirecting...');\n window.location.href = '/';\n }\n }).catch((error) => {\n setLoadingText('Instagram account connection failed. Redirecting...');\n window.location.href = '/';\n });\n }\n\n useEffect(() => {\n console.log('InstagramCallback');\n const urlParams = new URLSearchParams(window.location.search);\n const code = urlParams.get('code');\n const error = urlParams.get('error');\n console.log('code', code);\n setLoading(true);\n if (code) {\n setLoading(true);\n fetch(`/pages/${props.brand.id}/instagram/page_selection`, {\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({\n code: code\n })\n }).then(response => response.json())\n .then(data => {\n setLoadingText('')\n setAccounts(data)\n }).finally(() => {\n setLoading(false);\n }).catch((error) => {\n setLoadingText('Instagram account connection failed. Redirecting...');\n window.location.href = '/';\n console.log('Instagram account connection failed. Redirecting..1.');\n });\n } else if (error) {\n setLoadingText('Instagram account connection failed. Redirecting...');\n console.log('Instagram account connection failed. Redirecting...');\n window.location.href = '/';\n }\n }, []);\n\n return (\n \n \n @{instagram_business_account.username}\n
\n {instagram_business_account.followers_count} followers
\n{name}
\nPage ID: {id}
\n\n
\n )\n}\n\nInstagramCallback.propTypes = {\n brand: PropTypes.object\n};\n\nexport default InstagramCallback\n","import React, {useEffect, useState} from \"react\"\nimport PropTypes from \"prop-types\"\nimport PrimaryButton from \"../common/PrimaryButton\";\nimport GhostButton from \"../common/GhostButton\";\n\nconst InstagramConnect = (props) => {\n\n return (\n Select Instagram Account
\n {loading ?\n \n Loading...\n
: null}\n {loadingText ? {loadingText}
: null}\n {accounts.length > 0 ? - \n {accounts.map(account => (\n
- \n
\n \n ))}\n
\n console.log('Skip for now')}/>\n \n
\n )\n}\n\nInstagramConnect.propTypes = {\n callback_url: PropTypes.string,\n brandId: PropTypes.number\n};\n\nexport default InstagramConnect\n","import React from \"react\"\nimport PropTypes from \"prop-types\"\n\nexport interface Persona {\n title: string\n description: string\n}\n\nconst PersonaItem = (props) => {\n return (\n Connect Instagram
\nYou can connect instagram and post content directly from JetSnaps to\n instagram.
\n \nWe will never post without your permission
\n \n \n
\n )\n}\n\nPersonaItem.propTypes = {\n persona: PropTypes.object.isRequired,\n selected: PropTypes.bool,\n onClick: PropTypes.func\n}\n\nexport default PersonaItem\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst YoutubeAccount = ({account, handleAccountClick, selected}) => {\n\n return (\n {props.persona.title}
\n{props.persona.description}
\n handleAccountClick(account.id)}\n className={`${selected ? \"border border-1\" : \"\"} cursor-pointer flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow-md`}>\n ![{account[\"snippet\"][\"title\"]}\n]({account[\"snippet\"][\"thumbnails\"][\"medium\"][\"url\"]})
\n
\n );\n}\n\nYoutubeAccount.propTypes = {\n account: PropTypes.object,\n handleAccountClick: PropTypes.func,\n selected: PropTypes.bool\n};\n\nexport default YoutubeAccount;","import React, {useEffect, useState} from \"react\"\nimport PropTypes from \"prop-types\"\nimport YoutubeAccount from \"./YoutubeAccount\";\nimport {Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue} from \"../ui/select\";\nimport {showJetToast} from \"../Toast\";\nimport PrimaryButton from \"../common/PrimaryButton\";\n\nconst YoutubeCallback = ({brand, accounts, categories}) => {\n\n const [loading, setLoading] = useState(false);\n const [loadingText, setLoadingText] = useState('');\n const [category, setCategory] = useState(null);\n const [selectedAccountId, setSelectedAccount] = useState(accounts[0]?.id);\n console.log(categories);\n\n const handleAccountClick = () => {\n if (!category) {\n showJetToast('Please select a category for the videos');\n return;\n }\n if (loading) return;\n setLoading(true);\n setLoadingText('Setting up your account...');\n fetch(`/pages/${brand.id}/youtube/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({channel_id: selectedAccountId, category: category})\n }).then(response => response.json()).then(data => {\n if (data.error) {\n } else {\n setLoadingText('Youtube account connected successfully! Redirecting...');\n window.location.href = '/';\n }\n }).catch((error) => {\n setLoadingText('Youtube account connection failed. Redirecting...');\n // window.location.href = '/';\n }).finally(() => {\n setLoading(false);\n });\n }\n\n return (\n \n {account[\"snippet\"][\"customUrl\"]}\n
\n {account[\"snippet\"][\"title\"]}
\nChannel ID: {account[\"id\"]}
\n\n setCategory(categories.find(category => category[\"id\"] === value))}>\n \n \n \n \n Category for Video \n {categories.map((category, index) => (\n {category[\"snippet\"][\"title\"]} \n ))}\n \n \n \n
\n )\n}\n\nYoutubeCallback.propTypes = {\n brand: PropTypes.object,\n accounts: PropTypes.array\n};\n\nexport default YoutubeCallback\n","\"use client\"\n\nimport * as React from \"react\"\nimport {useEffect, useRef} from \"react\"\nimport {Check, ChevronsUpDown, Pause, Play, Sparkles} 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\";\nimport {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from \"../ui/tooltip\";\nimport {showJetToast} from \"../Toast\";\n\n\nexport function AudioSelection({\n audioStyles,\n onAudioStyleSelected,\n selectedAudioStyle,\n searchPlaceholder,\n placeholder,\n isPaidUser,\n playbackRate = 1\n }) {\n const [open, setOpen] = React.useState(false)\n const audioRef = useRef(null);\n const [currentAudio, setCurrentAudio] = React.useState(null);\n\n useEffect(() => {\n if (audioRef.current) {\n audioRef.current.playbackRate = playbackRate;\n }\n }, [playbackRate]);\n\n const onOpenChange = (nextOpen) => {\n setOpen(nextOpen);\n if (!nextOpen) {\n pauseAudio();\n }\n }\n\n const pauseAudio = () => {\n try {\n if (audioRef.current) {\n audioRef.current.pause();\n setCurrentAudio(null);\n }\n } catch (error: any) {\n\n }\n }\n\n const handlePlayButtonClick = (item) => {\n try {\n if (item.audio == currentAudio?.audio) {\n if (audioRef.current) {\n audioRef.current.pause();\n }\n setCurrentAudio(null);\n return;\n }\n if (audioRef.current) {\n audioRef.current.pause();\n }\n const audio = new Audio(item.audio);\n audio.playbackRate = playbackRate;\n audio.play();\n setCurrentAudio(item);\n audioRef.current = audio;\n } catch (error: any) {\n }\n };\n\n return (\n Select Youtube Channel
\n {!accounts || accounts.length === 0 ?No Youtube channels found. Create one and retry connecting.
: null}\n {loading ? \n \n Loading...\n
: null}\n {loadingText ? {loadingText}
: null}\n {accounts.length > 0 ?\n - \n {accounts.map(account => (\n
- \n
setSelectedAccount(account.id)}/>\n \n ))}\n
\n Select Video Category\n
\n \n \n
\n \n
\n {audio.name}
\n \n {audio.paid && }\n {audio.audio ? {\n e.stopPropagation();\n handlePlayButtonClick(audio);\n }}>\n {currentAudio?.audio == audio.audio ?
: null}\n \n \n \n Upgrade plan to use this audio\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 ))}\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 if (props.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\n return (\n \n \n
\n !props.disabled && 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-primary text-textPrimary'}`}>\n {props.text}\n
\n )\n}\n\nPrimaryButton.propTypes = {\n text: PropTypes.string,\n onClick: PropTypes.func,\n isLoading: PropTypes.bool,\n disabled: PropTypes.bool,\n type: PropTypes.string\n};\nexport default PrimaryButton;","import React, { useState } from 'react';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from \"../ui/command\";\nimport { Check, ChevronsUpDown } from \"lucide-react\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/popover\";\nimport { Button } from \"../ui/button\";\nimport { cn } from \"../../lib/utils\";\n\ntype TimeSlot = { value: { start: number, end: number }; label: string };\ntype TimeZone = { value: string; label: string };\n\nconst timeSlots: TimeSlot[] = [\n { value: { start: 6, end: 9 }, label: '06:00 - 09:00' },\n { value: { start: 9, end: 12 }, label: '09:00 - 12:00' },\n { value: { start: 12, end: 15 }, label: '12:00 - 15:00' },\n { value: { start: 15, end: 18 }, label: '15:00 - 18:00' },\n { value: { start: 18, end: 21 }, label: '18:00 - 21:00' },\n];\n\nconst TimeSlotSelector = ({\n selectedTimeSlots,\n setSelectedTimeSlots,\n selectedTimeZone,\n setSelectedTimeZone,\n timeZones\n }) => {\n const [open, setOpen] = useState(false);\n\n const onOpenChange = (nextOpen) => {\n setOpen(nextOpen);\n };\n\n const toggleTimeSlot = (slot) => {\n if (selectedTimeSlots.some(selectedSlot => selectedSlot.start === slot.start && selectedSlot.end === slot.end)) {\n setSelectedTimeSlots(selectedTimeSlots.filter(selectedSlot => selectedSlot.start !== slot.start || selectedSlot.end !== slot.end));\n } else {\n setSelectedTimeSlots([...selectedTimeSlots, slot]);\n }\n };\n\n return (\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, { useState } from 'react';\nimport { CircleX } from 'lucide-react';\n\nfunction PersonaForm({ persona }) {\n const [errors, setErrors] = useState([]);\n const [prompts, setPrompts] = useState(persona.script_prompts || []);\n const [formData, setFormData] = useState({\n title: persona.title || '',\n description: persona.description || '',\n persona_identifier: persona.persona_identifier || '',\n brand_title_placeholder: persona.brand_title_placeholder || '',\n brand_description_placeholder: persona.brand_description_placeholder || ''\n });\n\n const handleSubmit = async (event) => {\n event.preventDefault();\n try {\n let url = persona.id ? `/personas/${persona.id}.json` : '/personas.json';\n let method = persona.id ? 'PATCH' : 'POST';\n const response = await fetch(url, {\n method: method,\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({ persona: { ...formData, script_prompts: prompts } })\n });\n if (!response.ok) {\n throw new Error('Failed to submit form');\n }\n // Redirect to persona page\n window.location.href = '/personas';\n } catch (error) {\n console.error('Error submitting form:', error);\n // Handle error state or display error message\n }\n };\n\n const handleAddPrompt = () => {\n setPrompts([...prompts, {}]);\n };\n\n const handlePromptChange = (index: number, value: string, key: string) => {\n const updatedPrompts = [...prompts];\n updatedPrompts[index][key] = value;\n setPrompts(updatedPrompts);\n };\n\n const handleRemovePrompt = (index) => {\n const updatedPrompts = [...prompts];\n updatedPrompts.splice(index, 1);\n setPrompts(updatedPrompts);\n };\n\n const handleChange = (event) => {\n const { name, value } = event.target;\n setFormData({\n ...formData,\n [name]: value\n });\n };\n\n return (\n {\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 {errors.length > 0 ? (\n
\n
\n ): null}\n\n {errors.length} {errors.length === 1 ? 'error' : 'errors'} prohibited this template from being saved:
\n- \n {errors.map((error, index) => (\n
- {error.full_message} \n ))}\n