\n
\n \n \n Give your lesson a title\n \n
\n \n \n \n Provide an overview of this unit of work\n \n \n Learning overview\n \n \n
\n My lessons
\n{children}
\n)\n\nexport default injectSheet(styles)(Paper)\n","import { hover } from 'pobble-components/dist/jss-mixins'\n\nconst styles = ({ FONT_SIZES, COLORS, BREAKPOINTS }) => ({\n listItem: {\n textDecoration: 'none',\n padding: '0 0 0.5em',\n borderBottom: '0.25em solid transparent',\n '&:first-child': {\n marginLeft: '0'\n },\n [`@media (max-width: ${BREAKPOINTS.XS})`]: {\n marginLeft: '0'\n },\n ...hover({\n '& $link': {\n color: COLORS.BLUE.NORMAL\n }\n })\n },\n active: {\n borderBottomColor: COLORS.BLUE.NORMAL,\n '& $link': {\n color: COLORS.BLUE.NORMAL\n }\n },\n link: {\n fontSize: '1em',\n lineHeight: '1.2',\n cursor: 'pointer',\n color: COLORS.TEXT.LIGHT_GREY.NORMAL\n }\n})\n\nexport default styles\n","import React from 'react'\nimport injectSheet from 'react-jss'\nimport styles from './tab-link.styles'\nimport { NavLink } from 'react-router-dom'\nimport classNames from 'classnames'\n\nconst TabLink = ({\n classes,\n children,\n theme,\n className,\n linkClassName,\n ...props\n}) => (\n \n My lessons \n
\n)\n\nexport default injectSheet(styles)(TabNav)\n","import { createSelector } from 'reselect'\n\nconst getState = state => state.SharedPresentationsStore\n\nconst getFetchPresentationsRequest = state =>\n getState(state).fetchPresentationsRequest\n\nconst getRemovePresentationRequests = state =>\n getState(state).removePresentationRequests\n\nconst getRemovePresentationRequest = (state, id) =>\n getRemovePresentationRequests(state)[id] || {\n pending: false,\n requestError: null\n }\n\nconst getCounter = state => getState(state).counter\n\nconst getPresentations = state => getState(state).presentations\n\nconst getPresentationsResult = createSelector(\n [getPresentations],\n presentations => (!presentations ? [] : presentations.result)\n)\n\nconst getPresentationsMap = createSelector(\n [getPresentations],\n presentations => (!presentations ? {} : presentations.entities.presentations)\n)\n\nconst getPresentationsList = createSelector(\n [getPresentationsResult, getPresentationsMap],\n (result, presentationsMap) => result.map(id => presentationsMap[id])\n)\n\nconst getPresentation = (state, id) => getPresentationsMap(state)[id]\n\nexport {\n getPresentations,\n getPresentationsList,\n getFetchPresentationsRequest,\n getPresentation,\n getRemovePresentationRequest,\n getCounter\n}\n","import { connect } from 'react-redux'\nimport TabNav from './tab-nav'\nimport { getCounter } from '../../../../../stores/shared-presentations/shared-presentations.selectors'\n\nconst mapStateToProps = state => ({\n sharedCounter: getCounter(state)\n})\n\nexport default connect(\n mapStateToProps,\n null\n)(TabNav)\n","import React from 'react'\nimport styles from './context-menu.styles'\nimport injectSheet from 'react-jss'\nimport MoreButton from 'pobble-components/dist/more-button'\nimport DropMenu from 'pobble-components/dist/drop-menu'\nimport TrashIcon from 'react-icons/lib/fa/trash-o'\nimport CheckIcon from 'react-icons/lib/fa/check-circle-o'\nimport CircleIcon from 'react-icons/lib/fa/circle-o'\nimport { openConfirmationDialog } from 'pobble-components/dist/modal/confirmation-dialog'\nimport CopyIcon from 'react-icons/lib/fa/copy'\n\nconst ContextMenu = ({\n classes,\n onRemove,\n onCopy,\n onMarkAsSeen,\n onMarkAsUnseen,\n seen\n}) => (\n \n \n Shared with me\n \n {!!sharedCounter && (\n {sharedCounter}\n )}\n
\n \n \n \n
\n
\n)\n\nexport default injectSheet(styles)(SharedSkeleton)\n","export default {\n container: {\n opacity: '0',\n animation: '0.6s fadeIn ease-in forwards'\n },\n table: {\n '& th': {\n textAlign: 'left',\n '& span': {\n height: '16px'\n }\n },\n '& td span': {\n height: '16px'\n },\n '& tr:hover td': {\n backgroundColor: 'transparent'\n }\n },\n all: {\n width: '25px'\n },\n allCell: {\n width: '60px',\n textAlign: 'center !important'\n },\n receivedCell: {\n width: '115px'\n },\n received: {\n width: '66px'\n },\n fromCell: {\n width: '20%'\n },\n from: {\n width: '42px'\n },\n titleCell: {\n width: '20%'\n },\n title: {\n width: '38px'\n },\n loCell: {\n width: '40%'\n },\n lo: {\n width: '135px'\n },\n contextCell: {\n width: '60px'\n },\n center: {\n textAlign: 'center !important'\n },\n bulkAction: {\n display: 'block',\n height: '40px !important',\n width: '93px',\n borderRadius: '4px'\n },\n '@keyframes fadeIn': {\n from: { opacity: '0' },\n to: { opacity: '1' }\n }\n}\n","import React from 'react'\nimport styles from './warning-message.styles'\nimport injectSheet from 'react-jss'\n\nconst WarningMessage = ({ classes, children }) => (\n {children}\n)\n\nexport default injectSheet(styles)(WarningMessage)\n","export default ({ COLORS }) => ({\n warning: {\n color: COLORS.TEXT.MID_GREY.NORMAL\n }\n})\n","import React, { useEffect } from 'react'\nimport injectSheet from 'react-jss'\nimport styles from './shared.styles'\nimport SharedTable from './shared-table/shared-table.container'\nimport SharedSkeleton from './shared-skeleton/shared-skeleton'\nimport WarningMessage from '../../../../warning-message/warning-message'\n\nconst Shared = ({ onMount, noPresentations, pending }) => {\n useEffect(() => {\n onMount()\n }, []) // eslint-disable-line\n\n return noPresentations ? (\n \n \n
\n \n
\n \n \n
\n \n
\n )\n}\n\nexport default injectSheet(styles)(Controls)\n","import React, { useContext } from 'react'\n\nconst PresentModeContext = React.createContext(null)\n\nconst usePresentMode = () => {\n return useContext(PresentModeContext)\n}\n\nexport { PresentModeContext, usePresentMode }\n","export default {\n container: {\n position: 'fixed',\n height: '100%',\n width: '100%',\n opacity: '0',\n '@media print': {\n position: 'static',\n opacity: '1'\n }\n },\n test: {\n opacity: '1',\n position: 'static'\n },\n slideHolder: {\n '@media print': {\n position: 'relative',\n height: '100%',\n border: '1px solid #999',\n borderRadius: '10px',\n overflow: 'hidden'\n }\n },\n slideContainer: {\n '@media print': {\n boxSizing: 'border-box',\n '-webkit-print-color-adjust': 'exact',\n height: '100%',\n padding: '40px'\n }\n }\n}\n","import React, { useState, useRef } from 'react'\nimport { Presentation } from 'pobble-components/dist/presentation'\nimport { useReactToPrint } from 'react-to-print'\nimport styles from './use-presentation-print.styles'\nimport injectSheet from 'react-jss'\nimport classNames from 'classnames'\nimport { createPortal } from 'react-dom'\nimport posthog from 'posthog-js'\n\nconst usePresentationPrint = (data, { onAfterPrint, test } = {}) => {\n const [printInProgress, setPrintInProgress] = useState(false)\n const componentRef = useRef(null)\n const handlePrint = useReactToPrint({\n onAfterPrint: () => {\n posthog.capture('After presentation print')\n setPrintInProgress(false)\n onAfterPrint && onAfterPrint()\n },\n copyStyles: true,\n pageStyle:\n '@page { size: A4 landscape; margin: 0mm; } @media print { body { -webkit-print-color-adjust: exact; color-adjust: exact; } }\"',\n content: () => componentRef.current\n })\n const print = () => {\n setPrintInProgress(true)\n if (!test) {\n setTimeout(handlePrint, 3000)\n }\n }\n const PrintComponent = injectSheet(styles)(({ classes }) => {\n return !printInProgress\n ? null\n : createPortal(\n \n {\n e.preventDefault()\n fetchPresentations({\n scope: filter,\n page: 0,\n limit: 10,\n search_string: searchValue,\n initiator: 'FILTERS'\n })\n }}>\n {\n fetchPresentations({\n ...filters,\n search_string: '',\n initiator: 'FILTERS'\n })\n }}\n clearable\n value={searchValue}\n onChange={e => setSearchValue(e.target.value)}\n placeholder=\"Search\"\n />\n \n \n
\n \n
\n \n \n {\n const filter = e.target.value\n setFilter(e.target.value)\n fetchPresentations({\n scope: filter,\n page: 0,\n limit: 10,\n search_string: searchValue,\n initiator: 'FILTERS',\n order: orderDirection\n })\n }}>\n \n {canUseLessons && }\n \n \n \n
\n \n \n
\n \n {\n fetchPresentations({\n ...filters,\n scope: filter,\n page: 0,\n limit: 10,\n initiator: 'SORT',\n order_by: e.target.value\n })\n }}>\n \n \n \n {\n fetchPresentations({\n ...filters,\n page: 0,\n limit: 10,\n initiator: 'SORT',\n order: orderDirection === 'desc' ? 'asc' : 'desc'\n })\n }}\n tall\n secondary\n className={classes.sortDirection}>\n
\n \n \n 🌟\n {' '}\n Unlock Pobble Premium for your whole school!{' '}\n \n 🌟\n \n
\n\n The easiest and most effective way to improve writing standards across\n your school.\n
\n\n 
\n
\n - \n
- \n \n ⏰\n \n \n Save planning time: Provide every teacher with\n unlimited access to high-quality, ready-made writing lessons that\n can seamlessly enhance your existing English plans.\n \n \n
- \n \n ✅\n \n \n Curriculum-aligned: Pobble aligns with all\n curriculums and is simple to set up without requiring additional\n CPD for staff.\n \n \n
- \n \n 💡\n \n \n Inspire every student: Motivate every child to\n write with enthusiasm and confidence using differentiated\n activities designed for diverse learners.\n \n \n
- \n \n 💛\n \n \n Embed a school-wide love of writing: Make\n writing exciting for students while saving teachers hours of\n planning time.\n \n \n
\n
\n \n All this and more for only{' '}\n \n {!price ? '...' : `${price.currency}${price.schoolPrice}/year`}\n !
Ready to improve writing in your school? 🪄📝\n
\n \n
\n \n )\n})\n\nconst FreeTrial = injectSheet({\n pitch: {\n font: 'var(--body-)',\n margin: '4px 0'\n },\n list: {\n flex: '1',\n padding: '0',\n listStyle: 'none',\n textAlign: 'left',\n font: 'var(--body)',\n display: 'flex',\n flexDirection: 'column',\n gap: '16px',\n '& li': {\n display: 'flex',\n gap: '10px',\n fontWeight: 'bold',\n alignItems: 'center'\n },\n '& svg': {\n color: 'var(--green)',\n fontSize: '20px'\n }\n },\n body: {\n display: 'flex',\n alignItems: 'center',\n margin: '56px 0 48px',\n flexDirection: 'column-reverse',\n gap: '48px',\n '@media (min-width: 768px)': {\n flexDirection: 'row',\n gap: '16px'\n }\n },\n priceNote: {\n font: 'var(--body-)',\n color: 'var(--gray-)',\n margin: '16px auto 0',\n lineHeight: '24px'\n },\n edtech: {\n padding: '16px',\n borderTop: '1px solid var(--light-gray)',\n margin: '24px -32px -48px',\n '@media (min-width: 768px)': {\n margin: '24px -56px -48px'\n },\n '& img': {\n maxWidth: '200px',\n height: 'auto'\n }\n }\n})(({ classes, price, requestClose, id }) => {\n return (\n <>\n \n \n 🌟\n {' '}\n Unlock your ultimate writing experience with Pobble Premium!{' '}\n \n 🌟\n \n
\n\n Are you ready to elevate your teaching and inspire young writers like\n never before? Discover the power of Pobble Premium with your{' '}\n \n 7-day FREE trial!{' '}\n \n 🚀\n \n \n
\n\n \n
\n - \n
- \n \n 🗓️\n {' '}\n Full access to the Pobble 365 Calendar and differentiated\n activities.\n \n
- \n \n ✍️\n Select the difficulty of the writing activities\n \n
- \n \n 📝\n {' '}\n Topic and quick write lessons.\n \n
- \n \n 💡\n {' '}\n Plus, you can save, edit, and share unlimited writing content!\n \n
\n All this and more, for just{' '}\n {price && `${price.currency}${price.price}/month`}!
\n \n 🚀\n {' '}\n Don't miss out – try Pobble Premium now!{' '}\n \n 🚀\n \n
\n \n \n 🚀\n {' '}\n Don't miss out – try Pobble Premium now!{' '}\n \n 🚀\n \n
\n No payment needed now. Cancel anytime
\n \n After your 7-day trial, continue to enjoy Pobble Premium for just{' '}\n {price && `${price.currency}${price.price}/month`}, billed annually.\n \n
\n \n
\n \n )\n})\n\nconst HadTrialBefore = injectSheet({\n pitch: {\n font: 'var(--body-)',\n margin: '4px 0'\n },\n list: {\n flex: '1',\n padding: '0',\n listStyle: 'none',\n textAlign: 'left',\n font: 'var(--body)',\n display: 'flex',\n flexDirection: 'column',\n gap: '16px',\n '& li': {\n display: 'flex',\n gap: '10px',\n fontWeight: 'bold',\n alignItems: 'center'\n },\n '& svg': {\n color: 'var(--green)',\n fontSize: '20px'\n }\n },\n body: {\n display: 'flex',\n alignItems: 'center',\n margin: '56px 0 48px',\n flexDirection: 'column-reverse',\n gap: '48px',\n '@media (min-width: 768px)': {\n flexDirection: 'row',\n gap: '16px'\n }\n },\n priceNote: {\n font: 'var(--body-)',\n color: 'var(--gray-)',\n margin: '16px auto 0',\n lineHeight: '24px'\n }\n})(({ classes, price, requestClose, id }) => {\n return (\n <>\n \n \n 🌟\n {' '}\n Unlock your ultimate writing experience with Pobble Premium!{' '}\n \n 🌟\n \n
\n\n Are you ready to elevate your teaching and inspire young writers like\n never before? Discover the power of Pobble Premium\n
\n\n \n
\n - \n
- \n \n 🗓️\n {' '}\n Full access to the Pobble 365 Calendar and differentiated\n activities.\n \n
- \n \n 📝\n {' '}\n Topic and quick write lessons.\n \n
- \n \n 💡\n {' '}\n Plus, you can save, edit, and share unlimited writing content!\n \n
\n All this and more, for just{' '}\n {price && `${price.currency}${price.price}/month`}!
\n \n 🚀\n {' '}\n Don't miss out – upgrade now!{' '}\n \n 🚀\n \n
\n \n \n 🚀\n {' '}\n Don't miss out – upgrade now!{' '}\n \n 🚀\n \n
\n
\n {!isLoggedIn && (\n \n {isSchoolRepresentative ? (\n
\n \n Already have a subscription? Sign in\n
\n )}\n \n You have 10 free prints during your free-trial. After your free\n trial ends you will be able to print unlimited resources with a\n subscription.
\n \n {Cookies.get('freePrints') || 10} free prints left\n \n
\n )}\n \n \n {Cookies.get('freePrints') || 10} free prints left\n \n
\n
\n
\n )\n})\n\nexport const QRCodeModal = injectSheet({\n content: {\n padding: '80px',\n width: 'auto'\n }\n})(({ classes, isOpen, link, requestClose }) => {\n return (\n {children}
\n))\n\nconst formCellStyles = {\n container: {\n minWidth: '200px',\n marginLeft: '20px',\n '&:first-child': {\n marginLeft: '0'\n }\n }\n}\n\nconst FormCell = injectSheet(formCellStyles)(\n ({ classes, children, className }) => (\n {children}
\n )\n)\n\nconst thanksStyles = ({ COLORS }) => ({\n modalContent: {\n minWidth: '400px',\n padding: '0'\n },\n topBox: {\n background: '#fff',\n borderRadius: '8px 8px 0 0',\n textAlign: 'center',\n '& img': {\n marginTop: '10px',\n width: '50%'\n }\n },\n textBox: {\n fontSize: '14px',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n textAlign: 'center',\n padding: '20px 20px 25px',\n '& h2': {\n margin: '0 0 .5em',\n fontSize: '1.71em',\n lineHeight: '1.2'\n },\n '& p': {\n fontSize: '1em',\n margin: '0 0 1.2em'\n }\n }\n})\n\nconst Thanks = injectSheet(thanksStyles)(({ classes }) => {\n const { requestClose } = useContext(SendToPupilsContext)\n return (\n <>\n \n \n
\n \n
\n Thank you!
\nYour lesson has been sent to your class.
\n \n\n \n
\n )\n})\n\nconst ShareButton = injectSheet({\n button: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n gap: '8px',\n textAlign: 'center',\n color: 'var(--gray)',\n '& *': {\n pointerEvents: 'none'\n },\n '&:hover $icon': {\n background: '#e0e0e0',\n borderColor: '#e0e0e0'\n },\n '&:focus $icon': {\n borderColor: 'var(--gray)'\n },\n '&:active $icon': {\n borderColor: 'var(--gray--)'\n }\n },\n icon: {\n border: '1px solid #F2F2F2',\n width: '70px',\n height: '70px',\n background: '#F2F2F2',\n borderRadius: '70px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontSize: '20px'\n },\n title: {\n font: 'var(--body--)',\n fontWeight: 'bold'\n }\n})(({ classes, icon, children, onClick, className }) => {\n return (\n \n \n \n {\n onCopy && onCopy()\n navigator.clipboard.writeText(link).then(\n () => {\n setSuccess(true)\n },\n () => {\n toast.error(\n 'Something went wrong. Try to copy the link manually'\n )\n }\n )\n }}\n className={classNames(\n classes.button,\n 'metrics__copy-student-link'\n )}>\n {!success &&
\n \n
\n )\n }\n)\n\nexport const ShareModal = injectSheet({\n content: {\n padding: '0'\n }\n})(({ classes, isOpen, presentation, requestClose, userIsOwner, from }) => {\n const [printModalOpen, setPrintModalOpen] = useState(false)\n const [sendToStudentsOpen, setSendToStudentsOpen] = useState(false)\n const [shareModalOpen, setShareModalOpen] = useState(false)\n const [qrModal, setQrModal] = useState({ open: false, link: null })\n const { me } = useMe()\n\n return (\n <>\n Share
\n- \n
- \n
Classroom\n \n \n - \n
}>\n Full screen\n \n \n - \n
}>\n Print / PDF\n \n \n \n {presentation.p365 && (\n - \n
}>\n Writing pack\n \n \n )}\n - \n
}>\n QR Code\n \n \n {userIsOwner &&\n !!me.account.policy.can_see_actions && (\n <>\n - \n
}>\n Email
teacher\n \n \n - \n
}>\n My students\n \n \n \n )}\n
\n {\n posthog.capture('Share action', {\n action: 'Copy link',\n ...posthogActionData\n })\n }}\n />\n
\n {!userIsOwner && (\n \n {\n posthog.capture('Share action', {\n action: 'Edit lesson',\n ...posthogActionData\n })\n }}\n />\n
\n )}\n \n 
\n {children({ history, setCreateLessonOpened })}\n
\n )\n })\n)\n\nconst lessonStyles = ({ COLORS, FONT_SIZES }) => ({\n publicCell: {\n fontWeight: 'bold'\n },\n workIcon: {\n color: COLORS.PURPLE.NORMAL,\n fontSize: '1.3em',\n verticalAlign: 'middle',\n marginRight: '.3em',\n marginTop: '-.1em'\n },\n workIconDelivered: {\n color: COLORS.GREEN.NORMAL\n },\n workIconNoAccess: {\n color: COLORS.RED.FADED\n },\n holder: {\n display: 'flex',\n alignItems: 'center',\n textDecoration: 'none'\n },\n thumbnail: {\n width: '160px',\n borderRadius: '4px',\n overflow: 'hidden',\n marginRight: '16px',\n border: '1px solid #ececec',\n display: 'none',\n position: 'relative',\n '@media (min-width: 541px)': {\n display: 'block'\n },\n '& > *': {\n fontSize: '10px'\n }\n },\n statusLabel: {\n display: 'none',\n '@media (min-width: 541px)': {\n display: 'inline'\n }\n },\n title: {\n ...FONT_SIZES.BODY_LARGE.STYLE,\n color: COLORS.BLUE.NORMAL,\n fontWeight: 'bold',\n display: 'block'\n },\n info: {\n color: COLORS.TEXT.LIGHT_GREY.NORMAL,\n ...FONT_SIZES.HEADING_NANO.STYLE,\n display: 'flex',\n '& svg': {\n color: '#c1c1c1',\n marginRight: '4px',\n fontSize: '.8em',\n marginTop: '-.2em'\n },\n '& > span:not(:first-child)': {\n position: 'relative',\n paddingLeft: '8px',\n marginLeft: '8px',\n '&:after': {\n content: '\"\"',\n position: 'absolute',\n left: '0',\n top: '4px',\n width: '2px',\n height: '2px',\n background: 'currentColor',\n borderRadius: '100%'\n }\n }\n },\n crown: {\n color: '#000',\n position: 'absolute',\n right: '4px',\n top: '4px',\n zIndex: '100',\n fontSize: '8px',\n width: '18px',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background: '#fee966',\n borderRadius: '18px'\n },\n quickAction: {\n display: 'none',\n '@media (min-width: 768px)': {\n display: 'flex'\n }\n }\n})\n\nconst Lesson = injectSheet(lessonStyles)(\n ({ data, classes, pending, canSeePupils, first, ...props }) => {\n const dataMap = useMemo(\n () => {\n return {\n id: data.id,\n title: data.title,\n public: data.public,\n lessonLink: data.id,\n token: data.token,\n lastEdited: format(new Date(data.updated_at), 'DD-MM-YYYY'),\n premiumRestricted: data.policy.premium_restricted\n }\n },\n [data]\n )\n\n return (\n \n {dataMap.premiumRestricted && (\n \n
\n \n \n {dataMap.lastEdited}\n {dataMap.public && (\n \n
\n \n \n
\n You don't have any lessons yet
\n \n )}\nWe couldn't find any lessons
\n\n Try to change or clear filters\n
\n \n )}\n\n
\n \n
\n \n \n \n
\n \n )\n}\n\nexport default injectSheet(styles)(LessonsList)\n","import React, { useEffect, useState } from 'react'\nimport injectSheet from 'react-jss'\nimport { Link, useRouteMatch } from 'react-router-dom'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faCalendarDay } from '@fortawesome/pro-regular-svg-icons/faCalendarDay'\nimport { faCalendarAlt } from '@fortawesome/pro-regular-svg-icons/faCalendarAlt'\nimport { faStopwatch } from '@fortawesome/pro-regular-svg-icons/faStopwatch'\nimport { faStar } from '@fortawesome/pro-regular-svg-icons/faStar'\nimport { faHashtag } from '@fortawesome/pro-regular-svg-icons/faHashtag'\nimport { faSearch } from '@fortawesome/pro-regular-svg-icons/faSearch'\nimport classNames from 'classnames'\nimport { apiClient } from 'pobble-components/dist/api'\nimport { useSubscriptionDetails } from 'pobble-components/dist/subscriptions/utils'\nimport { useMe } from 'pobble-components/dist/pobble-user'\nimport posthog from 'posthog-js'\n\nconst SidebarItem = injectSheet({\n item: {\n position: 'relative',\n '& > *': {\n pointerEvents: 'none'\n },\n '@media (max-width: 1023px)': {\n color: '#8E909A',\n textDecoration: 'none',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n gap: '6px'\n },\n '@media (min-width: 1024px)': {\n font: 'var(--body)',\n fontWeight: 'bold',\n padding: '16px 24px',\n borderRadius: '8px',\n display: 'flex',\n color: '#ccc',\n alignItems: 'center',\n textDecoration: 'none',\n gap: '8px',\n '&:hover': {\n background: '#262626'\n }\n }\n },\n title: {\n '@media (max-width: 1023px)': {\n display: 'none'\n }\n },\n mobileTitle: {\n font: 'var(--body---)',\n '@media (min-width: 1024px)': {\n display: 'none'\n }\n },\n active: {\n '@media (max-width: 1023px)': {\n color: 'var(--light-gray)'\n },\n '@media (min-width: 1024px)': {\n background: '#191919 !important',\n color: '#fff'\n }\n },\n icon: {\n '@media (max-width: 1023px)': {\n fontSize: '20px'\n },\n '@media (min-width: 1024px)': {\n fontSize: '14px'\n }\n },\n subItem: {\n '@media (max-width: 1023px)': {\n display: 'none'\n },\n '@media (min-width: 1024px)': {\n font: 'var(--body--)',\n color: '#fff',\n background: '#191919',\n padding: '4px 16px',\n margin: '8px 0 8px 44px',\n display: 'inline-block',\n borderRadius: '8px',\n position: 'relative',\n '&:after': {\n content: '\"\"',\n position: 'absolute',\n width: '1px',\n height: '32px',\n background: '#ccc',\n left: '-14px',\n bottom: '10px'\n },\n '&:before': {\n content: '\"\"',\n position: 'absolute',\n height: '1px',\n width: '8px',\n background: '#ccc',\n left: '-14px',\n bottom: '10px'\n }\n }\n }\n})(\n ({\n classes,\n className,\n to,\n icon,\n children,\n active,\n mobileTitle,\n subItem\n }) => {\n return (\n \n
\n )\n})\n\nexport const PromptsLayout = injectSheet({\n container: {\n '@media (min-width: 1024px)': {\n flex: 1,\n minWidth: '0',\n display: 'flex'\n }\n },\n content: {\n '@media (max-width: 1023px)': {\n paddingBottom: '80px'\n },\n '@media (min-width: 1024px)': {\n flex: 1,\n minWidth: '0'\n }\n }\n})(({ classes, children }) => {\n return (\n \n
\n - \n
- \n
\n
\n )\n})\n","import React, { Fragment, useState, useMemo, useEffect } from 'react'\nimport injectSheet from 'react-jss'\nimport styles from './lessons.styles'\nimport { Switch, Route, useRouteMatch } from 'react-router-dom'\nimport LessonsList from '../lessons-list/lessons-list'\nimport LessonsContext from './lessons.context'\nimport PendingTeacherBar from 'pobble-components/dist/pending-teacher-bar'\nimport { PromptsLayout } from '../../prompts-layout'\n\nconst Lessons = ({ classes }) => {\n const match = useRouteMatch()\n const [createLessonOpened, setCreateLessonOpened] = useState(false)\n const value = useMemo(\n () => ({\n setCreateLessonOpened,\n createLessonOpened\n }),\n [setCreateLessonOpened, createLessonOpened]\n )\n\n useEffect(\n () => {\n setCreateLessonOpened(match.path === '/new' ? true : false)\n },\n [match.path]\n )\n\n return (\n {children}
\n \n You are previewing {title}\n
\n )}\n\n
\n)\n\nexport default injectSheet(styles)(PrevNextControls)\n","export default ({ FONT_SIZES }) => ({\n container: {\n ...FONT_SIZES.HEADING_MEDIUM.STYLE,\n display: 'flex',\n alignItems: 'center',\n width: '162px',\n justifyContent: 'space-between',\n userSelect: 'none',\n [`@media (max-width: 920px) and (orientation: landscape)`]: {\n width: '119px',\n background: '#fff',\n padding: '5px',\n borderRadius: '36px'\n }\n },\n icon: {\n cursor: 'pointer',\n [`@media (max-width: 920px) and (orientation: landscape)`]: {\n height: '36px',\n width: '36px'\n }\n }\n})\n","import React from 'react'\nimport { PresentationContext, PresentationStateContext } from './context'\n\nconst withPresentation = Component => props => (\n \n {note && (\n
\n \n Teaching notes: \n {note}\n
\n )}\n\n \n
\n)\n\nexport default injectSheet(styles)(TabletPortraitPlaceholder)\n","import React from 'react'\nimport injectSheet from 'react-jss'\nimport styles from './presentation-skeleton.styles'\nimport Bone from 'pobble-components/dist/bone'\n\nconst PresentationSkeleton = ({ classes }) => (\n Rotate me please
\n\n This tool is best viewed in landscape mode.
Please rotate your\n device.\n
\n {!activeSlideId &&
\n \n \n \n
\n )\n}\n\nexport default withWindowSize(injectSheet(styles)(PresentationPreview))\n","import React, { Fragment, useEffect } from 'react'\nimport injectSheet from 'react-jss'\nimport styles from './shared-preview.styles'\nimport Head from './head/head.container'\nimport PresentationPreview from '../../presentation-preview/presentation-preview'\n\nconst SharedPreview = ({\n classes,\n pending,\n presentation,\n onClose,\n onCopy,\n onMount\n}) => {\n useEffect(() => {\n onMount()\n }, []) // eslint-disable-line\n\n return (\n Sorry, we coulnd't find this lesson
\nIt may have been deleted or set to private
\n\n
\n \n )\n}\n\nexport default injectSheet(styles)(SharedPreview)\n","export default {\n previewHolder: {\n padding: '40px 0'\n }\n}\n","import { connect } from 'react-redux'\nimport SharedPreview from './shared-preview'\nimport {\n fetchSharedPresentation,\n copyPresentation\n} from '../../../stores/shared-presentation/shared-presentation.actions'\nimport { withRouter } from 'react-router-dom'\nimport { errorHandler } from 'pobble-components/dist/error-handler'\nimport {\n getFetchRequest,\n getSharedPresentation\n} from '../../../stores/shared-presentation/shared-presentation.selectors'\nimport { markAsSeen } from '../../../stores/shared-presentations/shared-presentations.actions'\n\nconst mapStateToProps = (state, { match }) => {\n const fetchRequest = getFetchRequest(state)\n const sharedPresentation = getSharedPresentation(state)\n return {\n pending:\n !sharedPresentation ||\n sharedPresentation.id !== match.params.id ||\n fetchRequest.pending,\n presentation: !sharedPresentation ? null : sharedPresentation.presentation\n }\n}\n\nconst mapDispatchToProps = (dispatch, { match, history }) => ({ dispatch })\n\nconst mergeProps = (stateProps, { dispatch }, ownProps) => ({\n ...stateProps,\n ...ownProps,\n onClose: () => ownProps.history.push('/shared'),\n onCopy: () =>\n dispatch(copyPresentation(stateProps.presentation.id))\n .then(() => ownProps.history.push('/'))\n .catch(errorHandler),\n onMount: () =>\n dispatch(fetchSharedPresentation(ownProps.match.params.id))\n .catch(errorHandler)\n .then(\n res =>\n !res.data.shared_presentation.seen &&\n dispatch(markAsSeen(ownProps.match.params.id)).catch(errorHandler)\n )\n})\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps,\n mergeProps\n )(SharedPreview)\n)\n","import { fullVHExceptHeader } from 'pobble-components/dist/jss-mixins'\n\nexport default {\n pending: {\n ...fullVHExceptHeader,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center'\n },\n notFound: {\n ...fullVHExceptHeader,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n textAlign: 'center',\n '& img': {\n maxWidth: '300px'\n },\n '& p': {\n margin: '0'\n }\n }\n}\n","import * as React from 'react'\nconst SvgComponent = props => (\n - \n {pending ? null : (\n
- \n
}\n tall>\n Share\n \n \n )}\n
\n {children}\n
\n )\n})\n\nexport default SubHeader\n","const setActiveSlideId = id => (dispatch, getState) =>\n dispatch({\n type: 'BUILDER:SET_ACTIVE_SLIDE',\n id\n })\n\nconst setPreviewDragging = isDragging => ({\n type: 'BUILDER:SET_PREVIEW_DRAGGING',\n isDragging\n})\n\nconst openEditDialog = id => ({\n type: 'BUILDER:OPEN_EDIT_DIALOG',\n id\n})\n\nconst openSettingsModal = () => ({\n type: 'BUILDER:OPEN_SETTINGS_MODAL'\n})\n\nconst closeSettingsModal = () => ({\n type: 'BUILDER:CLOSE_SETTINGS_MODAL'\n})\n\nconst openCreateSlideDialog = (slideType, slideParams) => ({\n type: 'BUILDER:OPEN_CREATE_SLIDE_DIALOG',\n slideType,\n slideParams\n})\n\nconst closeCreateSlideDialog = () => ({\n type: 'BUILDER:CLOSE_CREATE_SLIDE_DIALOG'\n})\n\nconst openEditSlideDialog = (slideType, slideId, slideParams) => ({\n type: 'BUILDER:OPEN_EDIT_SLIDE_DIALOG',\n slideType,\n slideId,\n slideParams\n})\n\nconst closeEditSlideDialog = () => ({\n type: 'BUILDER:CLOSE_EDIT_SLIDE_DIALOG'\n})\n\nexport {\n setActiveSlideId,\n setPreviewDragging,\n openEditDialog,\n openSettingsModal,\n closeSettingsModal,\n openCreateSlideDialog,\n closeCreateSlideDialog,\n openEditSlideDialog,\n closeEditSlideDialog\n}\n","import { createSelector } from 'reselect'\n\nconst getState = state => state.Lesson.Builder.Main\n\nconst getActiveSlideId = createSelector(\n [getState],\n state => state.activeSlideId\n)\n\nexport const getActiveSlide = createSelector([state => state], state => {\n const activeSlideId = state.Lesson.Builder.Main.activeSlideId\n const activeSlide =\n state.PresentationStore.slides.entities.slides[activeSlideId]\n return activeSlide\n})\n\nconst isDragging = createSelector([getState], state => state.isDragging)\n\nconst isSettingsModalOpened = state => getState(state).settingsModalOpened\n\nconst getCreateSlideDialog = state => getState(state).createSlideDialog\n\nconst getEditSlideDialog = state => getState(state).editSlideDialog\n\nexport {\n getState as getBuilderState,\n getActiveSlideId,\n isDragging,\n isSettingsModalOpened,\n getCreateSlideDialog,\n getEditSlideDialog\n}\n","import {\n apiUpdateSlide,\n apiCreateSlide,\n apiDeleteSlide,\n apiReorderSlides,\n apiUploadImage,\n apiRemoveImage,\n apiDuplicateSlide,\n apiUpdatePresentationProperties,\n apiGetPresentation\n} from '../../common/api/lesson'\nimport {\n getPresentation,\n getOrderedSlides,\n getSlidesMap\n} from './presentation.selectors'\nimport { getActiveSlideId } from '../../components/pages/lesson/builder/redux/builder.selectors'\nimport {\n BUILDER_ACTIVE_SLIDE_ID,\n LP_SHOW_LAST_SLIDE\n} from 'pobble-components/dist/cookies'\n\nconst fetchPresentation = id => ({\n requestPrefix: 'PRESENTATION:FETCH',\n params: {\n id,\n showLastSlide: LP_SHOW_LAST_SLIDE.pull(),\n activeSlideId: BUILDER_ACTIVE_SLIDE_ID.pull()\n },\n request: () =>\n apiGetPresentation(id, {\n include:\n 'presentation.audio,presentation.p365,presentation.policy,presentation.status,presentation.image,presentation.year_groups,presentation.recommended_until,presentation.category,presentation.year_group.order,presentation.details,presentation.slides,presentation.slide.type,presentation.slide.details,presentation.slide.private_note,presentation.names'\n })\n})\n\nexport const resetPresentation = () => ({\n type: 'PRESENTATION:RESET'\n})\n\nconst simulateSlideCreation = (() => {\n let id = 0\n let order = 100\n return slide => ({\n type: 'PRESENTATION:CREATE_SLIDE_REQUEST_SUCCESS',\n response: {\n data: {\n slide: {\n ...slide,\n id: id++,\n order: order++\n }\n }\n }\n })\n})()\n\nconst createSlide = (data, customRequest) => (dispatch, getState) => {\n const state = getState()\n\n const presentationId = getPresentation(getState()).id\n\n const slides = getSlidesMap(state)\n const activeSlideId = getActiveSlideId(state)\n\n const activeSlide = slides[activeSlideId]\n\n const order = activeSlide.order < 2 ? 2 : activeSlide.order + 1\n\n return dispatch({\n params: { presentationId, data, type: data ? data.type : null },\n requestPrefix: 'PRESENTATION:CREATE_SLIDE',\n request: customRequest\n ? customRequest({ order })\n : () =>\n apiCreateSlide(\n presentationId,\n {\n ...data,\n order\n },\n {\n include: 'slide.type,slide.details'\n }\n )\n })\n}\n\nconst immediateSlideUpdate = (id, data) => ({\n type: 'PRESENTATION:IMMEDIATE_UPDATE',\n id,\n data\n})\n\nconst restoreSlide = id => ({\n type: 'PRESENTATION:RESTORE_SLIDE',\n id\n})\n\nconst updateSlide = (id, type, data, params) => (dispatch, getState) => {\n const presentation = getPresentation(getState())\n\n /**\n * Asset presentation doesn't allow user to change title slide\n * Therefore we automatically update title slide whenever user\n * changes title of an asset slide\n */\n if (presentation.asset && ['Exemplar'].indexOf(type) !== -1) {\n apiUpdateSlide(presentation.slides[0].id, {\n title: data.title\n })\n }\n\n return dispatch({\n requestPrefix: 'PRESENTATION:UPDATE_SLIDE',\n params: { id, data, type, ...params },\n request: () => {\n return apiUpdateSlide(id, data, {\n include: 'slide.type,slide.details'\n })\n }\n })\n}\n\nconst directSlideUpdate = slide => ({\n type: 'PRESENTATION:UPDATE_SLIDE_DIRECT',\n slide\n})\n\nconst updatePresentationProperties = (id, data) => ({\n requestPrefix: 'PRESENTATION:UPDATE_PROPERTIES',\n params: { id, data },\n request: () =>\n apiUpdatePresentationProperties(id, data, {\n include:\n 'presentation.year_groups,presentation.year_group.order,presentation.details'\n })\n})\n\nconst uploadImage = (id, data) => ({\n requestPrefix: 'PRESENTATION:UPLOAD_IMAGE_TO_SLIDE',\n params: { id, data },\n request: () =>\n apiUploadImage(id, data).then(() =>\n apiUpdateSlide(\n id,\n { use_presentation_image: false },\n {\n include: 'slide.type,slide.details'\n }\n )\n )\n})\n\nconst removeImageImmediately = (id, params) => dispatch => {\n dispatch({ type: 'PRESENTATION:REMOVE_IMAGE_FROM_SLIDE', id, params })\n return dispatch(removeImage(id)).catch(e => {\n dispatch(restoreSlide(id))\n throw e\n })\n}\n\nconst removeImage = id => ({\n requestPrefix: 'PRESENTATION:REMOVE_IMAGE_FROM_SLIDE',\n params: { id },\n request: () => apiRemoveImage(id)\n})\n\nconst updateSlideImmediately = (id, type, data, testMode) => (\n dispatch,\n getState\n) => {\n dispatch(immediateSlideUpdate(id, data))\n return (\n !testMode &&\n dispatch(updateSlide(id, type, data, { immediateUpdate: true })).catch(\n e => {\n dispatch(restoreSlide(id))\n throw e\n }\n )\n )\n}\n\nconst duplicateSlide = id => ({\n requestPrefix: 'PRESENTATION:DUPLICATE_SLIDE',\n params: { id },\n request: () =>\n apiDuplicateSlide(id, {\n include:\n 'presentation.slides,presentation.slide.type,presentation.slide.details,presentation.slide.private_note'\n })\n})\n\nconst deleteSlide = id => (dispatch, getState) =>\n dispatch({\n requestPrefix: 'PRESENTATION:DELETE_SLIDE',\n params: { id, slides: getOrderedSlides(getState()) },\n request: () => apiDeleteSlide(id)\n })\n\nconst reorderSlidesRequest = (presentationId, slidesOrder) => ({\n requestPrefix: 'PRESENTATION:REORDER_SLIDES',\n params: { presentationId, slidesOrder },\n request: () => apiReorderSlides(presentationId, { slide_ids: slidesOrder })\n})\n\nconst reorderSlides = (presentationId, slidesOrder) => dispatch => {\n dispatch({ type: 'PRESENTATION:REORDER_SLIDES', slidesOrder })\n return dispatch(reorderSlidesRequest(presentationId, slidesOrder)).catch(\n e => {\n dispatch({ type: 'PRESENTATION:RESTORE_ALL_SLIDES' })\n throw e\n }\n )\n}\n\nconst updateNotes = (id, { privateNote, publicNote }) => ({\n requestPrefix: 'PRESENTATION:UPDATE_NOTES',\n params: { privateNote, publicNote },\n request: () =>\n apiUpdateSlide(\n id,\n { public_note: publicNote, private_note: privateNote },\n {\n include: 'slide.details,slide.private_note'\n }\n )\n})\n\nexport {\n fetchPresentation,\n updateSlide,\n createSlide,\n deleteSlide,\n updateSlideImmediately,\n reorderSlides,\n uploadImage,\n removeImageImmediately,\n updateNotes,\n duplicateSlide,\n updatePresentationProperties,\n directSlideUpdate,\n simulateSlideCreation\n}\n","import { Modal, ModalContent } from 'pobble-components/dist/modal'\nimport React from 'react'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faPlay } from '@fortawesome/pro-solid-svg-icons/faPlay'\nimport { faPenFancy } from '@fortawesome/pro-solid-svg-icons/faPenFancy'\nimport { faClipboardCheck } from '@fortawesome/pro-solid-svg-icons/faClipboardCheck'\nimport { faTh } from '@fortawesome/pro-solid-svg-icons/faTh'\nimport { faText } from '@fortawesome/pro-solid-svg-icons/faText'\nimport { faSquare } from '@fortawesome/pro-regular-svg-icons/faSquare'\nimport { faLink } from '@fortawesome/pro-solid-svg-icons/faLink'\nimport { faFileAlt } from '@fortawesome/pro-solid-svg-icons/faFileAlt'\nimport { faImage } from '@fortawesome/pro-solid-svg-icons/faImage'\nimport ButtonElement from 'pobble-components/dist/button-element'\nimport injectSheet from 'react-jss'\nimport pattern from './pattern.png'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { openCreateSlideDialog } from '../../redux/builder.actions'\nimport { getPresentation } from '../../../../../../stores/presentation/presentation.selectors'\nimport { createSlide } from '../../../../../../stores/presentation/presentation.actions'\n\nconst buttons = [\n {\n title: 'Work exemplar',\n icon: - \n {buttons.map(button => {\n return (\n
Select a slide type
\n\n {children}\n
\n )\n }\n)\nconst SortableComponent = SortableElement(props => )\n\nconst slidePreviewStyles = ({ COLORS, FONT_SIZES }) => ({\n container: {\n position: 'relative'\n },\n button: {\n width: '100%',\n borderRadius: '4px',\n marginBottom: '20px',\n overflow: 'hidden',\n border: '1px solid rgba(0, 0, 0, 0.16)',\n position: 'relative',\n '& > * > *': {\n pointerEvents: 'none'\n }\n },\n active: {\n borderColor: COLORS.BLUE.NORMAL\n },\n hidden: {\n '& > div': {\n opacity: '.4'\n }\n },\n iconHidden: {\n position: 'absolute',\n top: '50%',\n left: '50%',\n marginLeft: '-12px',\n marginTop: '-12px',\n color: COLORS.TEXT.LIGHT_GREY.NORMAL,\n fontSize: '24px',\n zIndex: '100'\n },\n order: {\n position: 'absolute',\n right: '100%',\n marginRight: '8px',\n ...FONT_SIZES.BODY_DEFAULT.STYLE,\n color: COLORS.TEXT.MID_GREY.NORMAL\n }\n})\n\nconst SlidePreview = injectSheet(slidePreviewStyles)(\n ({\n classes,\n active,\n id,\n setActiveSlide,\n hidden,\n children,\n order,\n ...props\n }) => {\n const dispatch = useDispatch()\n return (\n \n {order}\n dispatch(setActiveSlideId(id))}\n className={classNames(\n classes.button,\n `metrics__builder_slide_preview_${order}`,\n {\n [classes.active]: active,\n [classes.hidden]: hidden\n }\n )}\n {...props}>\n <>\n {hidden && (\n
\n )\n }\n)\n\nconst styles = ({ COLORS }) => ({\n container: {\n height: '100%',\n display: 'flex',\n flexDirection: 'column'\n },\n slide: {\n marginBottom: '20px'\n },\n draggedPreview: {\n transition: 'box-shadow 0.3s',\n boxShadow: '0 2px 5px 0 rgba(0, 0, 0, 0.1)'\n },\n disabledPreview: {\n opacity: '0.5'\n },\n newSlideButtonContainer: {\n padding: '0 20px 0 32px'\n },\n newSlideButtonHolder: {\n paddingBottom: '10px',\n borderBottom: '1px solid rgba(0, 0, 0, .1)'\n },\n slidePreviewList: {\n height: '100%',\n overflow: 'auto',\n position: 'relative',\n padding: '11px 20px 0 32px'\n }\n})\n\nconst SlidePreviewList = ({\n classes,\n slides,\n className,\n onSortEnd,\n onSortStart,\n isDragging,\n activeSlideId,\n presentation\n}) => {\n const container = useRef(null)\n\n const dispatch = useDispatch()\n\n const upToDatePresentation = useMemo(\n () => {\n return !presentation\n ? null\n : {\n ...presentation,\n slides: slides\n }\n },\n [presentation, slides]\n )\n\n const activeSlideIndex = useMemo(\n () => {\n for (let i = 0; i < slides.length; i++) {\n if (slides[i].id === activeSlideId) {\n return i\n }\n }\n },\n [activeSlideId, slides]\n )\n\n /**\n * Scroll to active preview to keep it visible\n */\n useEffect(\n () => {\n const selectedSlide = container.current.children[activeSlideIndex]\n if (selectedSlide.offsetTop - container.current.scrollTop < 0) {\n container.current.scrollTop = selectedSlide.offsetTop\n } else if (\n selectedSlide.offsetTop - container.current.scrollTop + 210 >\n container.current.offsetHeight\n ) {\n container.current.scrollTop =\n selectedSlide.offsetTop - container.current.offsetHeight + 225\n }\n },\n [slides, activeSlideId, activeSlideIndex, isDragging]\n )\n\n // Keyboard navigation\n useEffect(\n () => {\n const listener = e => {\n const element = e.target\n const key = e.key\n if (\n !element.getAttribute('contenteditable') &&\n element.tagName !== 'TEXTAREA' &&\n element.tagName !== 'INPUT'\n ) {\n switch (key) {\n case 'ArrowDown':\n case 'ArrowRight':\n if (activeSlideIndex < slides.length - 1) {\n dispatch(setActiveSlideId(slides[activeSlideIndex + 1].id))\n }\n break\n case 'ArrowUp':\n case 'ArrowLeft':\n if (activeSlideIndex > 0) {\n dispatch(setActiveSlideId(slides[activeSlideIndex - 1].id))\n }\n break\n default:\n break\n }\n }\n }\n document.addEventListener('keydown', listener)\n return () => document.removeEventListener('keydown', listener)\n },\n [slides, dispatch, activeSlideIndex]\n )\n\n return (\n \n \n \n {props => {\n return props.slides.map((slide, index) => {\n const slideData = slides[index]\n const preview = (\n \n {slide}\n \n )\n return index < 2 ? (\n \n {preview}\n \n )\n })\n }}\n \n \n
\n )\n}\n\nexport default injectSheet(styles)(SlidePreviewList)\n","import { connect } from 'react-redux'\nimport SlidePreviewList from './slide-preview-list.jsx'\nimport { setActiveSlideId, setPreviewDragging } from '../redux/builder.actions'\nimport { getActiveSlideId, isDragging } from '../redux/builder.selectors'\nimport {\n getOrderedSlides,\n getPresentation\n} from '../../../../../stores/presentation/presentation.selectors'\nimport { reorderSlides } from '../../../../../stores/presentation/presentation.actions'\nimport { arrayMove } from 'react-sortable-hoc'\nimport { errorHandler } from 'pobble-components/dist/error-handler'\n\nconst mapStateToProps = state => {\n return {\n presentation: getPresentation(state),\n activeSlideId: getActiveSlideId(state),\n isDragging: isDragging(state),\n slides: getOrderedSlides(state),\n presentationId: getPresentation(state).id\n }\n}\n\nconst mapDispatchToProps = dispatch => ({ dispatch })\n\nconst mergeProps = (stateProps, { dispatch }, ownProps) => ({\n ...ownProps,\n ...stateProps,\n setActiveSlideId: id => dispatch(setActiveSlideId(id)),\n onSortStart: () => dispatch(setPreviewDragging(true)),\n onSortEnd: ({ oldIndex, newIndex }) =>\n dispatch(\n reorderSlides(\n stateProps.presentationId,\n arrayMove(stateProps.slides, oldIndex, newIndex).map(slide => slide.id)\n )\n ).catch(errorHandler)\n})\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps,\n mergeProps\n)(SlidePreviewList)\n","const style = ({ COLORS }) => ({\n container: {\n display: 'flex',\n flexDirection: 'column',\n position: 'relative'\n },\n restrictOverlay: {\n position: 'absolute',\n left: '0',\n top: '0',\n width: '100%',\n height: '100%',\n zIndex: '5',\n cursor: 'pointer'\n },\n cell: {\n width: 'calc(50% - 10px)',\n marginLeft: '20px',\n '&:first-child': {\n marginLeft: '0'\n }\n },\n labelsContainer: {\n marginBottom: '15px',\n display: 'flex',\n width: '100%',\n alignItems: 'flex-end'\n },\n label: {\n cursor: 'pointer',\n color: COLORS.TEXT.DARK_GREY.NORMAL\n },\n textareasContainer: {\n display: 'flex',\n width: '100%'\n },\n notes: {\n width: '100%',\n height: '166px',\n resize: 'none'\n },\n publicNote: {\n backgroundColor: '#fff'\n },\n privateNote: {\n backgroundColor: '#FFF8CB'\n }\n})\n\nexport default style\n","import React, { useMemo } from 'react'\nimport injectSheet from 'react-jss'\nimport styles from './slide-footer.styles'\nimport classNames from 'classnames'\nimport debounce from 'lodash/debounce'\nimport { Formik } from 'formik'\nimport FormTextArea from 'pobble-components/dist/form-elements/form-text-area'\nimport { useSubscriptionPolicy } from 'pobble-components/dist/subscriptions'\n\nconst PUBLIC_LABEL =\n 'Add your notes to this slide (people can see this if you share the lesson)'\nconst PRIVATE_LABEL = 'Add private notes to this slide (only you can see these)'\n\nconst SlideFooter = ({\n classes,\n className,\n onSubmit,\n privateNote,\n publicNote\n}) => {\n const debounceChange = useMemo(\n () => debounce(submitForm => submitForm(), 500),\n []\n )\n const editSp = useSubscriptionPolicy(\n sp => sp.lesson_planning.edit_presentation\n )\n\n return (\n \n
\n \n
\n {preview}
\n ) : (\n \n onClick(id)}\n className={classes.holder}\n style={{ backgroundImage: `url(${image})` }}>\n
\n \n)\n\nexport default injectSheet(styles)(PreviewItem)\n","export default {\n container: {\n width: 'calc(33.333% - 12px)',\n margin: '6px'\n },\n holder: {\n position: 'relative',\n cursor: 'pointer',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n background: '#fff',\n borderRadius: '5px',\n border: '1px solid #ddd',\n width: '100%',\n paddingBottom: '56%',\n overflow: 'hidden',\n '&:hover': {\n '& $author': {\n opacity: '1'\n }\n }\n },\n author: {\n position: 'absolute',\n bottom: '0',\n left: '0',\n width: '100%',\n background: 'rgba(0, 0, 0, 0.6)',\n fontSize: '12px',\n color: '#fff',\n padding: '3px 5px',\n opacity: '0',\n transition: 'opacity 0.3s ease-in'\n },\n authorLink: {\n color: '#fff',\n textDecoration: 'none',\n display: 'block',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n '&:hover': {\n textDecoration: 'underline'\n }\n }\n}\n","import React from 'react'\nimport styles from './pending-area.styles'\nimport injectSheet from 'react-jss'\nimport Spinner from 'pobble-components/dist/spinner'\nimport classNames from 'classnames'\n\nconst PendingArea = ({ classes, className, spinnerParams, fadeIn }) => (\n \n e.stopPropagation()}\n className={classes.authorLink}\n href={`${userProfileUrl}?utm_source=pobble&utm_medium=referral`}\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n Photo by {author}\n \n
\n \n {pending &&
\n)\n\nexport default injectSheet(styles)(Preview)\n","export default ({ COLORS }) => ({\n container: {\n height: '232px',\n borderRadius: '8px',\n border: '1px solid #ddd',\n backgroundColor: '#f9f9f9',\n padding: '8px',\n overflow: 'auto',\n position: 'relative'\n },\n pendingArea: {\n zIndex: '100',\n backgroundColor: 'rgba(255, 255, 255, 0.5)',\n left: '1px',\n top: '1px',\n position: 'absolute',\n width: 'calc(100% - 2px)',\n height: 'calc(100% - 2px)',\n animation: '0.3s fadeIn ease-in'\n },\n notFound: {\n color: COLORS.TEXT.LIGHT_GREY.NORMAL,\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center'\n },\n previews: {\n height: '100%',\n overflow: 'auto',\n display: 'flex',\n flexWrap: 'wrap'\n },\n '@keyframes fadeIn': {\n from: { opacity: '0' },\n to: { opacity: '1' }\n }\n})\n","import React from 'react'\nimport injectSheet from 'react-jss'\nimport styles from './unsplash.styles'\nimport FormInput from 'pobble-components/dist/form-elements/form-input'\nimport FormLabel from 'pobble-components/dist/form-elements/form-label'\nimport Preview from './preview/preview'\nimport { useState } from 'react'\n\nconst Unsplash = ({\n classes,\n onSearchChange,\n defaultSearchValue,\n id,\n pending,\n previews,\n onUnsplashSelect\n}) => {\n const [value, setValue] = useState(defaultSearchValue)\n\n return (\n Nothing was found...
}\n {previews && (\n \n {previews.map((preview, index) => (\n
\n )}\n \n \n Search for an image\n \n {\n const value = e.target.value\n setValue(value)\n onSearchChange(value)\n }}\n />\n
\n )\n}\n\nexport default injectSheet(styles)(Unsplash)\n","export default ({ COLORS }) => ({\n searchInput: {\n margin: '0 0 20px'\n },\n unsplashMessage: {\n textAlign: 'right',\n color: '#555',\n fontSize: '12px',\n lineHeight: '1',\n margin: '0 0 5px',\n '& a': {\n color: COLORS.TEXT.DARK_GREY.NORMAL\n }\n }\n})\n","import React, { Component } from 'react'\nimport Unsplash from './unsplash'\nimport debounce from 'lodash/debounce'\nimport { apiUnsplashSearch } from '../../../common/api/lesson'\nimport { errorHandler } from 'pobble-components/dist/error-handler'\n\nclass UnsplashContainer extends Component {\n state = { previews: [], request: { pending: false, error: null } }\n componentDidMount() {\n const { defaultSearchValue } = this.props\n defaultSearchValue && this.onSearchChange(defaultSearchValue)\n }\n onSearchChange = value => {\n this.search(value)\n }\n search(value) {\n this.setState({ request: { pending: true, error: false } })\n apiUnsplashSearch({ search_term: value, per_page: 12, page: 1 })\n .then(res =>\n this.setState({\n previews: res.data,\n request: { pending: false, error: null }\n })\n )\n .catch(e => {\n this.setState({ request: { pending: false, error: e } })\n throw e\n })\n .catch(errorHandler)\n }\n render() {\n const { defaultSearchValue, onUnsplashSelect, pending } = this.props\n const { previews, request } = this.state\n return (\n \n Photos by{' '}\n
\n
\n )\n}\n\nexport default injectSheet(styles)(ImageSelector)\n","export default {\n uploadImageWrapper: {\n width: '100%'\n },\n uploadImage: {\n paddingBottom: '56%',\n background: '#f9f9f9',\n border: '1px solid #ddd',\n borderRadius: '5px',\n position: 'relative',\n cursor: 'pointer'\n },\n uploadIcon: {\n position: 'absolute',\n left: '50%',\n top: '50%',\n fontSize: '30px',\n margin: '-15px 0 0 -15px',\n color: '#c3c3c3'\n },\n optionsHolder: {\n marginTop: '20px',\n padding: '8px',\n display: 'flex'\n },\n option: {\n width: 'calc(33.333% - 12px)',\n margin: '6px'\n },\n mainImage: {\n display: 'block',\n backgroundColor: '#f9f9f9',\n width: '100%',\n paddingBottom: '56%',\n borderRadius: '5px',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n cursor: 'pointer'\n }\n}\n","import { connect } from 'react-redux'\nimport ImageSelector from './image-selector'\nimport { getPresentation } from '../../stores/presentation/presentation.selectors'\n\nconst mapStateToProps = state => ({\n presentation: getPresentation(state)\n})\n\nexport default connect(\n mapStateToProps,\n null\n)(ImageSelector)\n","import React from 'react'\nimport injectSheet from 'react-jss'\nimport styles from './image-dialog.styles'\nimport { Modal, ModalHeader, ModalContent } from 'pobble-components/dist/modal'\nimport ImageSelector from '../../../image-selector/image-selector.container'\n\nconst ImageDialog = ({\n classes,\n isOpen,\n onChange,\n onClose,\n onSubmit,\n title,\n updating,\n defaultSearchValue,\n onUnsplashSelect,\n pending,\n id,\n onFileSelect,\n onMainImageSelect,\n offerUseCoverImage\n}) => (\n \n
\n \n Upload your own image \n \n
\n {presentation.image &&\n onMainImageSelect && (\n \n
\n \n \n Use cover image \n
\n )}\n - \n {slideData.type === 'Blank' && (\n
- \n
\n Change line type\n \n \n )}\n {(slideData.type === 'Title' || slideData.type === 'Image') && (\n - \n
\n Change image\n \n \n )}\n {slideData.type !== 'Blank' && (\n - \n
\n Edit content\n \n \n )}\n {(slideData.type === 'Text' || slideData.type === 'Exercise') && (\n - \n
\n Change color\n \n \n )}\n {slideData.type === 'Image' && (\n - \n
\n Change layout\n \n \n )}\n {slideData.type !== 'Title' &&\n slideData.type !== 'LessonOverview' && (\n - \n
\n \n \n )}\n\n {slideData.type !== 'Title' && (\n - \n
\n \n \n )}\n {slideData.type !== 'Title' &&\n slideData.type !== 'LessonOverview' && (\n - \n
\n \n \n )}\n
\n
\n )\n }}\n \n )\n}\n\nexport default injectSheet(styles)(SlideConstructor)\n","import { connect } from 'react-redux'\nimport SlideConstructor from './slide-constructor.jsx'\nimport { getActiveSlideId } from '../redux/builder.selectors'\nimport {\n getSlide,\n getPresentation,\n getSlidesMap\n} from '../../../../../stores/presentation/presentation.selectors'\nimport { directSlideUpdate } from '../../../../../stores/presentation/presentation.actions.js'\n\nconst mapStateToProps = state => {\n const presentation = getPresentation(state)\n const slide = getSlide(state, getActiveSlideId(state))\n return {\n id: slide.id,\n fontSize: presentation.font_size,\n presentation,\n slides: getSlidesMap(state),\n activeSlideId: getActiveSlideId(state)\n }\n}\n\nconst mapDispatchToProps = dispatch => ({\n onSlideUpdate: slide => dispatch(directSlideUpdate(slide))\n})\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(SlideConstructor)\n","const styles = ({ FONT_SIZES, BREAKPOINTS }) => ({\n container: {\n display: 'flex',\n flexDirection: 'row',\n [`@media (max-width: ${BREAKPOINTS.MD}) and (orientation: portrait)`]: {\n flexDirection: 'column'\n }\n },\n cat: {\n display: 'block',\n height: '100%',\n flex: '0',\n [`@media (max-width: ${BREAKPOINTS.MD}) and (orientation: portrait)`]: {\n width: '100vw',\n height: '100vw'\n }\n },\n textBox: {\n fontSize: '16px',\n backgroundColor: '#fff',\n flex: '1',\n display: 'flex',\n flexDirection: 'column',\n textAlign: 'center',\n justifyContent: 'center',\n alignItems: 'center',\n [`@media (max-width: 320px) and (orientation: portrait)`]: {\n fontSize: '14px'\n }\n },\n title: {\n fontSize: '1.85em',\n lineHeight: '1.06',\n fontWeight: 'bold',\n margin: '0 0 0.66em'\n },\n desc: {\n fontSize: '1em',\n lineHeight: '1.25',\n margin: '0'\n }\n})\n\nexport default styles\n","import React from 'react'\nimport injectSheet from 'react-jss'\nimport styles from './small-screen-placeholder.styles'\nimport classNames from 'classnames'\nimport cat from './cat-squashed.gif'\n\nconst SmallScreenPlaceholder = ({ classes, className }) => (\n \n
\n \n
\n {!presentation.asset && (\n \n
\n {currentSlide}\n \n
\n )}\n \n
\n)\n\nexport default injectSheet(styles)(SmallScreenPlaceholder)\n","import React from 'react'\nimport injectSheet from 'react-jss'\nimport Bone from 'pobble-components/dist/bone/'\n\nconst styles = {\n container: {\n display: 'flex',\n margin: '20px 0 0'\n },\n sidebar: {\n width: '280px',\n height: '100%',\n padding: '0 20px 0 32px'\n },\n content: {\n flex: '1',\n height: 'calc(100vh - 140px)',\n display: 'flex',\n background: '#e3e3e3',\n padding: '20px',\n marginTop: '-20px'\n },\n slideHolder: {\n flex: '1'\n },\n slide: {\n width: '100%',\n height: '0',\n padding: '0 0 56%',\n borderRadius: '0',\n background: 'var(--light-gray-)'\n },\n slidePreview: {\n height: '0',\n width: '100%',\n padding: '0 0 56%',\n borderRadius: '4px',\n marginBottom: '20px',\n background: 'var(--light-gray--)'\n },\n button: {\n height: '40px',\n borderRadius: '4px',\n marginBottom: '20px',\n background: 'var(--light-gray--)'\n }\n}\n\nconst Skeleton = ({ classes }) => (\n \n
\n Too big for this screen!
\n\n Please use a tablet or laptop
to plan a lesson.\n
\n
\n)\n\nexport default injectSheet(styles)(Skeleton)\n","import React from 'react'\nimport styles from './label.styles'\nimport injectSheet from 'react-jss'\nimport classNames from 'classnames'\n\nconst Label = ({ classes, children, className }) => (\n {children}\n)\n\nexport default injectSheet(styles)(Label)\n","export default {\n label: {\n display: 'block',\n color: '#acacac',\n marginBottom: '3px'\n }\n}\n","const styles = ({ COLORS }) => ({\n valueStyles: {\n color: COLORS.TEXT.MID_GREY.NORMAL,\n left: '0',\n top: '0',\n width: 'calc(100% - 30px)',\n height: '100%',\n lineHeight: '40px',\n position: 'absolute',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n padding: '0 0 0 15px',\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n borderRight: '1px solid #ddd'\n },\n select: {\n position: 'relative',\n '& .Select-control': {\n overflow: 'hidden',\n height: '40px',\n lineHeight: '40px',\n border: '1px solid #DDD',\n borderRadius: '4px',\n backgroundColor: '#fff',\n position: 'relative',\n cursor: 'pointer'\n },\n '& .Select-input': {\n display: 'none'\n },\n '& .Select-placeholder': {\n extend: 'valueStyles'\n },\n '& .Select-arrow-zone': {\n position: 'absolute',\n right: '0',\n top: '0',\n width: '22px'\n },\n '& .Select-menu-outer': {\n maxHeight: '200px',\n position: 'absolute',\n top: '100%',\n width: '100%',\n zIndex: '1'\n },\n '& .Select-menu': {\n maxHeight: '200px',\n overflowY: 'auto',\n border: '1px solid #DDD',\n boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',\n backgroundColor: '#fff',\n borderRadius: '4px',\n overflow: 'hidden',\n marginTop: '4px',\n color: COLORS.TEXT.LIGHT_GREY.NORMAL\n },\n '& .Select-noresults': {\n padding: '5px 15px'\n },\n '& .Select-option.is-selected > span': {\n color: COLORS.BLUE.NORMAL\n }\n },\n value: {\n extend: 'valueStyles'\n },\n option: {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n cursor: 'pointer',\n padding: '5px 15px',\n '&:hover': {\n color: COLORS.BLUE.NORMAL\n }\n },\n oddOption: {\n backgroundColor: '#f9f9f9'\n },\n buttonIcon: {\n color: '#787878'\n }\n})\n\nexport default styles\n","import React, { Component, Fragment } from 'react'\nimport injectSheet from 'react-jss'\nimport styles from './form-select.styles.js'\nimport Select from 'react-select'\nimport AngleDownIcon from 'react-icons/lib/fa/angle-down'\nimport classNames from 'classnames'\n\nclass FormSelect extends Component {\n arrowRenderer() {\n const { classes } = this.props\n return \n
\n \n
\n \n
\n \n {!options && {\n const value = parseInt(e.target.value)\n let selected = yearGroups.filter(yearGroup => {\n return yearGroup.order === value\n })\n\n if (selected.length === yearGroups.length) {\n selected = []\n }\n\n onChange({\n selected,\n selectedIds: selected.map(selected => selected.id)\n })\n }}>\n {options.from.map(option => (\n \n {option.label}\n \n ))}\n \n )}\n {\n const value = parseInt(e.target.value)\n let selected = yearGroups.filter(yearGroup => {\n return yearGroup.order >= range.from && yearGroup.order <= value\n })\n\n if (selected.length === yearGroups.length) {\n selected = []\n }\n\n onChange({\n selected,\n selectedIds: selected.map(selected => selected.id)\n })\n }}>\n {options.to.map(option => (\n \n {option.label}\n \n ))}\n \n )}\n {\n onChange({\n selected: [],\n selectedIds: []\n })\n }}\n className={classNames(classes.clear, {\n [classes.hideClear]: !yearGroups || !selected.length\n })}>\n
\n )\n}\n\nexport default injectSheet(styles)(YearGroupsSelection)\n","import { apiGetYearGroups } from '../../common/api/year-groups'\n\nconst fetchYearGroups = () => ({\n requestPrefix: 'YEAR_GROUPS:FETCH',\n request: () =>\n apiGetYearGroups({\n include: 'year_group.names,year_group.order'\n })\n})\n\nexport { fetchYearGroups }\n","import React, { Fragment, useMemo, useState } from 'react'\nimport injectSheet from 'react-jss'\nimport {\n Modal,\n ModalHeader,\n ModalContent,\n ModalFooter\n} from 'pobble-components/dist/modal'\nimport Button from 'pobble-components/dist/button'\nimport AccessibilitySelect from '../../../../../presentation-wizard/components/accessibility-select/accessibility-select'\nimport { Formik } from 'formik'\nimport FormSelect from '../../../../../common/form-elements/form-select/form-select'\nimport Label from '../../../../../presentation-wizard/components/label/label'\nimport YearGroupSelection from '../../../../../year-groups-selection/year-groups-selection'\nimport FormRow from 'pobble-components/dist/form-elements/form-row'\nimport FormCheckbox from 'pobble-components/dist/form-elements/form-checkbox'\nimport { useSelector } from 'react-redux'\nimport { isSettingsModalOpened } from '../../redux/builder.selectors'\nimport {\n getPresentation,\n getUpdatePropertiesRequest\n} from '../../../../../../stores/presentation/presentation.selectors'\nimport { useDispatch } from 'react-redux'\nimport { closeSettingsModal } from '../../redux/builder.actions'\nimport { updatePresentationProperties } from '../../../../../../stores/presentation/presentation.actions'\nimport { errorHandler } from 'pobble-components/dist/error-handler'\n\nconst styles = {\n option: {\n '& > *': {\n padding: '10px 15px'\n }\n },\n gridCell: {\n display: 'grid',\n gridTemplateColumns: '1fr 1fr 1fr',\n gridGap: '16px'\n },\n ageRow: {\n display: 'flex',\n alignItems: 'flex-end'\n },\n showAge: {\n '& label': {\n display: 'flex',\n alignItems: 'center',\n marginBottom: '10px',\n '& > *:first-child': {\n marginRight: '8px'\n }\n }\n }\n}\n\nconst Settings = injectSheet(styles)(({ classes }) => {\n const dispatch = useDispatch()\n\n const presentation = useSelector(getPresentation)\n const yearGroupsSet = presentation.year_groups\n const accessibilityColor = presentation.accessibility_color\n const showAge = presentation.show_age\n const fontSize = presentation.font_size\n const updatingPropertiesRequest = useSelector(getUpdatePropertiesRequest)\n const pending = updatingPropertiesRequest.pending\n const allYearGroups = presentation.all_year_groups\n const fontType = presentation.font_type\n\n const yearGroupsSetIds = useMemo(\n () => (!yearGroupsSet ? null : yearGroupsSet.map(item => item.id)),\n [yearGroupsSet]\n )\n\n const [showAgeSelector, setShowAgeSelector] = useState(\n !allYearGroups && yearGroupsSetIds.length\n )\n\n return (\n to
\n {!options && \n
\n )\n }\n)\n\nexport default withRouter(injectSheet(styles)(Controls))\n","import React, { Fragment, useState } from 'react'\nimport injectSheet from 'react-jss'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faTools } from '@fortawesome/pro-solid-svg-icons/faTools'\nimport Button from 'pobble-components/dist/button'\nimport {\n Modal,\n ModalHeader,\n ModalContent,\n ModalFooter\n} from 'pobble-components/dist/modal'\nimport Controls from './controls/controls'\nimport { withMe } from 'pobble-components/dist/pobble-user'\n\nconst styles = ({ COLORS }) => ({\n button: {\n display: 'none',\n '@media (min-width: 768px)': {\n display: 'inline-flex'\n }\n }\n})\n\nconst PresentationControls = ({\n classes,\n me,\n meRequest,\n presentation,\n style,\n ...props\n}) => {\n const [modalOpen, setModalOpen] = useState(false)\n if (!me || !me.account.policy.can_set_presentation_recommended_until)\n return null\n return (\n \n \n {!recommended && `Put presentation in \"This week's lessons\" until:`}\n {!!recommended &&\n `This presentation is in \"This week's lessons\" until:`}\n \n {\n e.preventDefault()\n submitRecommended(recommendedUntil)\n }}\n className={classes.recommendedControlsRow}>\n setRecommendedUntil(e.currentTarget.value)}\n placeholder=\"YYYY-MM-DD\"\n />\n \n {!!recommended && (\n {\n setRecommendedUntil('')\n submitRecommended('')\n }}\n dangerSecondary\n tall\n className={classes.unsetRecommended}>\n Unset\n \n )}\n \n
\n \n Select a category \n changeCategory(e.currentTarget.value)}>\n \n {categories.map(({ value, label }) => (\n \n ))}\n \n
\n \n Set as Pobble 365 day \n {\n e.preventDefault()\n const day = e.target.day.value\n const month = e.target.month.value\n openConfirmationDialog({\n bodyText: `This will swap existing Pobble 365 presentation with this one.`,\n confirmText: 'Set as Pobble 365',\n action: () => {\n apiClient\n .put(`v3/presentations/${id}/set_to_public`)\n .then(() => {\n apiClient\n .put(`v3/admin/presentations/${id}/set_category`, {\n category: 'pobble365'\n })\n .then(() => {\n apiClient\n .put(\n `v3/admin/presentations/${id}/swap_for_p365_presentation`,\n {\n day,\n month\n }\n )\n .then(res => {\n history.push(\n `/prompt/${res.data.presentation.id}`\n )\n })\n })\n })\n }\n })\n }}\n className={classes.p365form}>\n
\n \n Set differentiated lessons \n {\n e.preventDefault()\n const easier = e.target.easier.value\n const harder = e.target.harder.value\n\n let easierReq = null\n let harderReq = null\n\n if (!easier) {\n easierReq = apiClient.put(\n `v3/admin/presentations/${id}/unset_easier_version`\n )\n } else {\n easierReq = apiClient\n .put(`v3/presentations/${easier}/set_to_public`)\n .then(() => {\n return apiClient.put(\n `v3/admin/presentations/${id}/set_easier_version`,\n {\n easier_version_id: easier\n }\n )\n })\n }\n\n if (!harder) {\n harderReq = apiClient.put(\n `v3/admin/presentations/${id}/unset_harder_version`\n )\n } else {\n harderReq = apiClient\n .put(`v3/presentations/${harder}/set_to_public`)\n .then(() => {\n return apiClient.put(\n `v3/admin/presentations/${id}/set_harder_version`,\n {\n harder_version_id: harder\n }\n )\n })\n }\n Promise.all([easierReq, harderReq])\n .then(() => {\n toast.success(\n `Updated sucessfully.\\nReload the page to see changes`\n )\n })\n .catch(() => toast.error('Something went wrong'))\n }}\n className={classes.p365form}>\n
\n \n \n Open easier\n \n )}\n
\n \n \n Open harder\n \n )}\n
\n \n \n \n
\n \n \n {\n apiClient\n .post(`/v3/presentations/${id}/create_presentation_copy`)\n .then(res => {\n window.open(`/lessons/lesson/${res.data.presentation.id}`)\n })\n }}\n tall\n secondary>\n Duplicate\n \n
\n \n
\n \n changeApprovedStatus(e.target.checked)}\n id=\"approve\"\n />\n \n Approved\n \n
\n \n changePublicStatus(e.target.checked)}\n id=\"public\"\n />\n \n Public\n \n
\n \n setPremium(e.target.checked)}\n id=\"flag\"\n />\n \n Premium\n \n
\n \n flagPresentation(e.target.checked)}\n id=\"flag\"\n />\n \n Flagged\n \n
\n \n setSponsored(e.target.checked)}\n id=\"sponsored\"\n />\n \n Sponsored\n \n
\n \n
\n \n \n One\n \n
\n \n \n Two\n \n
\n \n \n Three\n \n
\n \n \n Four\n \n
\n \n {bank.length > 1 && (\n <>\n Group {index + 1} \n \n {\n const bankCopy = [...bank]\n bankCopy[index].title = e.target.value\n setBank(bankCopy)\n }}\n value={bank[index].title}\n placeholder={titlePlaceholders[index]}\n name=\"title\"\n />\n \n \n )}\n \n {bank.length === 1 && Words: }\n {\n const bankCopy = [...bank]\n bankCopy[index].words = e.target.value\n setBank(bankCopy)\n }}\n placeholder=\"Type here, use commas to create new blocks\"\n />\n \n \n {\n const bankCopy = [...bank]\n bankCopy[index].color = value\n setBank(bankCopy)\n }}\n value={bank[index].color}\n options={colorsOptions}\n />\n \n
\n )\n })}\n \n {children}
\n \n )\n)\n\nconst ControlButton = injectSheet(controlButtonStyles)(\n ({ children, action, classes, active }) => (\n \n {controls} \n
\n \n \n \n What’s the website link?\n \n \n \n \n Give your link a title\n \n \n \n \n Description (optional)\n \n \n \n
\n \n Sorry, we couldn't process this url\n
\n )}\n\n {\n const removeEmptyLines = () => {\n let i = 0\n values.criteria.forEach(criteria => {\n if (!criteria.criterion) {\n arrayHelpers.remove(i--)\n }\n i++\n })\n }\n\n return (\n
\n \n {\n removeEmptyLines()\n result.forEach(item =>\n arrayHelpers.push({\n criterion: item.criteria || '',\n prompts: item.prompt || ''\n })\n )\n }}\n isOpen={openSuggested}\n requestClose={() => setOpenSuggested(false)}\n />\n
\n )\n }}\n />\n \n setOpenSuggested(true)}\n simple\n tall\n bleed\n icon={ setFieldValue('criteria', defaultCriteria)}\n className={classes.clearAllButton}\n tall\n tertiary\n bleed\n icon={
\n \n setDragging(true)}\n className={classes.criteriaList}\n onSortEnd={({ oldIndex, newIndex }) => {\n setDragging(false)\n arrayHelpers.move(oldIndex, newIndex)\n }}\n useDragHandle={true}\n helperClass={classes.sortHelper}>\n {values.criteria.map((criteria, index) => (\n arrayHelpers.remove(index)}\n formikProps={formikProps}\n isDragging={isDragging}\n first={index === 0}\n last={index === values.criteria.length - 1}\n criterion={criteria.criterion}\n prompts={criteria.prompts}\n key={index}\n index={index}\n id={index}\n />\n ))}\n \n \n arrayHelpers.push({ criterion: '', prompts: '' })\n }\n icon={
\n \n ${work.description || ''}
\n `,\n work: {\n id: work.id,\n title: 'title',\n media: work.media\n }\n }\n ]\n }}\n />\n
\n
\n ) : !works.length ? (\n Oops, we couldn't find any works
\n\n Reset filters\n
\n\n {works &&\n works.map(work => {\n const media = work.media[0]\n const img = media && media.thumb_url\n return (\n onSelect(work)}\n className={classes.work}\n key={work.id}>\n
\n )\n})\n\nconst Works = injectSheet({\n container: {\n '& header': {\n padding: '24px',\n background: '#fff',\n display: 'flex',\n position: 'sticky',\n zIndex: '20',\n top: '-40px',\n boxShadow: '0 0 4px rgb(0 0 0 / 10%)',\n borderRadius: '8px 8px 0 0'\n },\n '& main': {\n padding: '24px',\n background: 'var(--light-gray--)',\n minHeight: '100vh',\n borderRadius: '0 0 8px 8px'\n }\n },\n search: {\n display: 'flex',\n flex: '1',\n maxWidth: '600px',\n '& input': {\n borderRight: 'none',\n borderRadius: '4px 0 0 4px'\n },\n '& button': {\n borderRadius: '0 4px 4px 0'\n }\n },\n headerHolder: {\n maxWidth: '800px',\n margin: 'auto',\n display: 'flex',\n gap: '24px',\n flex: '1'\n },\n toggle: {\n display: 'flex',\n '& button': {\n minWidth: '100px',\n display: 'flex',\n justifyContent: 'center',\n color: 'var(--gray--)',\n borderColor: '#ccc',\n '&:hover': {\n background: 'hsl(224deg 33% 94%)',\n color: 'var(--dark-blue)'\n },\n '&:first-child': {\n borderRadius: '4px 0 0 4px',\n borderRight: 'none'\n },\n '&:last-child': {\n borderRadius: '0 4px 4px 0',\n borderLeft: 'none'\n }\n }\n },\n active: {\n background: 'hsl(225deg 59% 97%)',\n color: 'var(--dark-blue) !important',\n borderColor: 'var(--dark-blue--) !important',\n border: '1px solid var(--dark-blue) !important'\n },\n selectedAge: {\n '& select': {\n background: 'hsl(225deg 59% 97%)',\n borderColor: 'var(--dark-blue) !important',\n color: 'var(--dark-blue)'\n }\n },\n crown: {\n marginRight: '8px',\n color: 'var(--blue)'\n },\n loading: {\n height: '100%',\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n margin: '30vh 0'\n },\n spinner: {\n fontSize: '100px',\n color: '#ccc'\n },\n closeIcon: {\n color: `var(--gray)`,\n background: `var(--light-gray)`,\n width: '24px',\n height: '24px',\n borderRadius: '24px',\n position: 'absolute',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n right: '20px',\n top: '20px',\n '&:hover': {\n border: '1px solid var(--gray--)'\n },\n '&:focus, &:active': {\n background: 'var(--gray)',\n color: 'var(--light-gray)'\n }\n }\n})(({ classes, onSelect, requestClose }) => {\n const [upsell, setUpsell] = useState(false)\n const { hasAccessToTL } = useSubscriptionDetails()\n\n const [controls, setControls] = useState({\n search: '',\n filter: 'all',\n age: 'all-ages'\n })\n const request = useSelector(getCreateSlideRequest)\n\n const dispatch = useDispatch()\n\n useEffect(\n () => {\n window.scrollTo({ top: 0 })\n },\n [controls.filter, controls.age]\n )\n\n return request.pending ? (\n \n 
\n
\n \n \n )\n })}\n \n
\n ) : (\n \n \n {\n dispatch(closeCreateSlideDialog())\n }}>\n \n \n setUpsell(false)}\n isOpen={upsell}\n />\n \n
\n )\n})\n\nexport const SelectWorkModal = injectSheet({\n content: {\n maxWidth: '1200px',\n padding: '0'\n }\n})(({ onSelect, classes }) => {\n const [workPreview, setWorkPreview] = useState({ isOpen: false, work: null })\n\n const createSlideDialog = useSelector(getCreateSlideDialog)\n const modalOpened =\n createSlideDialog.opened && createSlideDialog.type === 'WorkExemplar'\n\n return (\n <>\n \n {\n setControls({ ...controls, age: e.target.value })\n }}\n value={controls.age}>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {\n e.preventDefault()\n setControls({ ...controls, search: e.target.search.value })\n }}\n className={classes.search}>\n
\n \n {\n if (!hasAccessToTL) return setUpsell(true)\n setControls({ ...controls, filter: 'exemplars' })\n }}\n className={`${\n controls.filter === 'exemplars' ? classes.active : ''\n } ${!hasAccessToTL ? 'metrics__exemplars--restricted' : ''}`}\n tall\n secondary>\n {!hasAccessToTL && setControls({ ...controls, filter: 'all' })}\n className={controls.filter === 'all' ? classes.active : ''}\n tall\n secondary>\n All work\n \n
\n This presentation doesn't exist or you don't have access to it
\n\n If you were given a link by your colleague
ask them to use \"Create\n public link\" option\n
\n \n {presentationFetched && (\n <>\n \n {presentationFetched && (\n \n
\n \n
\n \n )}\n \n {!presentation.asset && (\n \n
\n \n
\n )}\n {!!presentation.asset && (\n \n
\n )}\n \n {\n if (!turnToPresentationPending) {\n turnIntoPresentation()\n }\n }}\n className={classes.assetToPresentation}>\n \n {turnToPresentationPending && (\n
\n \n Create a full lesson presentation from this resource. Add\n extra resources and slide types in a few clicks!\n
\n\n
\n )\n})\n\nexport default PrintPreview\n","import dayjs from 'dayjs'\nimport dayOfYear from 'dayjs/plugin/dayOfYear'\nimport { useMemo } from 'react'\n\ndayjs.extend(dayOfYear)\n\nconst today = new Date()\nconst dayOfWeek = today.getDay()\nconst dayOfTheYear = dayjs(today).dayOfYear()\nlet weekStarts = dayOfTheYear - dayOfWeek\nlet weekEnds = dayOfTheYear - dayOfWeek + 7\nif (weekStarts < 0) weekStarts = 0\nif (weekEnds > 365) weekEnds = 365\n\nexport const YEAR = dayjs().year()\n\nexport const daysOfWeek = [\n 'Monday',\n 'Tuesday',\n 'Wednesday',\n 'Thursday',\n 'Friday',\n 'Saturday',\n 'Sunday'\n]\n\nexport const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December'\n]\n\nconst getNumberOfDaysInMonth = (year, month) => {\n return dayjs(`${year}-${month}-01`).daysInMonth()\n}\n\nexport const createDaysForPreviousMonth = (year, month, currentMonthDays) => {\n const firstDayOfTheMonthWeekday = getWeekday(currentMonthDays[0].dateString)\n const previousMonth = dayjs(`${year}-${month}-01`).subtract(1, 'month')\n\n const visibleNumberOfDaysFromPreviousMonth =\n firstDayOfTheMonthWeekday - 1 < 0 ? 0 : firstDayOfTheMonthWeekday - 1\n\n const previousMonthLastMondayDayOfMonth = dayjs(\n currentMonthDays[0].dateString\n )\n .subtract(visibleNumberOfDaysFromPreviousMonth, 'day')\n .date()\n\n return [...Array(visibleNumberOfDaysFromPreviousMonth)].map((_, index) => {\n return {\n dateString: dayjs(\n `${previousMonth.year()}-${previousMonth.month() +\n 1}-${previousMonthLastMondayDayOfMonth + index}`\n ).format('YYYY-MM-DD'),\n dayOfMonth: previousMonthLastMondayDayOfMonth + index,\n isCurrentMonth: false,\n isPreviousMonth: true\n }\n })\n}\n\nconst createDaysForCurrentMonth = (year, month) => {\n return [...Array(getNumberOfDaysInMonth(year, month))].map((_, index) => {\n const dayJS = dayjs(`${year}-${month}-${index + 1}`)\n const dayOfTheYear = dayJS.dayOfYear()\n return {\n dateString: dayJS.format('YYYY-MM-DD'),\n dayOfTheYear,\n dayOfMonth: index + 1,\n isCurrentMonth: true,\n isNextMonth: false,\n isPreviousMonth: false,\n currentWeek: dayOfTheYear > weekStarts && dayOfTheYear <= weekEnds\n }\n })\n}\n\nconst createDaysForNextMonth = (year, month, currentMonthDays) => {\n const lastDayOfTheMonthWeekday = getWeekday(\n `${year}-${month}-${currentMonthDays.length}`\n )\n const nextMonth = dayjs(`${year}-${month}-01`).add(1, 'month')\n const visibleNumberOfDaysFromNextMonth = 6 - lastDayOfTheMonthWeekday\n\n return [...Array(visibleNumberOfDaysFromNextMonth)].map((day, index) => {\n return {\n dateString: dayjs(\n `${nextMonth.year()}-${nextMonth.month() + 1}-${index + 1}`\n ).format('YYYY-MM-DD'),\n dayOfMonth: index + 1,\n isCurrentMonth: false,\n isNextMonth: true\n }\n })\n}\n\nexport const getWeekday = dateString => {\n return dayjs(dateString).day()\n}\n\nexport const useCalendarData = () => {\n return useMemo(() => {\n return months.map((_, index) => {\n const monthIndex = index + 1\n\n let currentMonthDays = createDaysForCurrentMonth(YEAR, monthIndex)\n\n let previousMonthDays = createDaysForPreviousMonth(\n YEAR,\n monthIndex,\n currentMonthDays\n )\n\n let nextMonthDays = createDaysForNextMonth(\n YEAR,\n monthIndex,\n currentMonthDays\n )\n return {\n title: months[index],\n days: [...previousMonthDays, ...currentMonthDays, ...nextMonthDays]\n }\n })\n }, [])\n}\n","import React from 'react'\nimport injectSheet from 'react-jss'\nimport { Presentation } from 'pobble-components/dist/presentation'\n\nexport const SlidesDeck = injectSheet({\n container: {\n display: 'flex',\n width: '200px',\n height: '112px',\n position: 'relative',\n '& *': {\n pointerEvents: 'none',\n userSelect: 'none'\n }\n },\n slide: {\n boxShadow: '0 4px 4px rgba(0, 0, 0, .25)',\n position: 'absolute',\n left: '0',\n top: '0',\n width: '100%',\n border: '2px solid #fff',\n borderRadius: '8px',\n overflow: 'hidden',\n textAlign: 'left',\n '&:nth-child(2)': {\n transform: 'translateX(-40px) rotate(-5deg) translateY(10px)'\n },\n '&:nth-child(3)': {\n transform: 'translateX(40px) rotate(5deg) translateY(10px)'\n },\n '&:nth-child(4)': {\n transform: 'translateX(-80px) rotate(-10deg) translateY(20px)',\n display: 'none',\n '@media (min-width: 768px)': {\n display: 'block'\n }\n },\n '&:nth-child(5)': {\n transform: 'translateX(80px) rotate(10deg) translateY(20px)',\n display: 'none',\n '@media (min-width: 768px)': {\n display: 'block'\n }\n },\n '&:nth-child(6)': {\n transform: 'translateX(-120px) rotate(-15deg) translateY(30px)',\n display: 'none',\n '@media (min-width: 768px)': {\n display: 'block'\n }\n },\n '&:nth-child(7)': {\n transform: 'translateX(120px) rotate(15deg) translateY(30px)',\n display: 'none',\n '@media (min-width: 768px)': {\n display: 'block'\n }\n }\n }\n})(({ classes, presentation }) => {\n return (\n \n \n {({ slides }) => {\n return slides.slice(2, 10).map((slide, i) => {\n return (\n \n
\n )\n})\n","import React, { useState } from 'react'\nimport injectSheet from 'react-jss'\nimport Button from 'pobble-components/dist/button'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faPencil } from '@fortawesome/pro-regular-svg-icons/faPencil'\nimport { apiClient } from 'pobble-components/dist/api'\nimport posthog from 'posthog-js'\nimport { useSubscriptionDetails } from 'pobble-components/dist/subscriptions/utils'\nimport { UpsellModal } from './upsell'\nimport { useHistory } from 'react-router-dom'\n\nexport const EditLesson = injectSheet({\n container: {\n display: 'flex',\n justifyContent: 'center',\n flexDirection: 'column',\n alignItems: 'center',\n color: 'var(--light-gray)',\n borderBottom: '1px solid #2C2D31',\n paddingBottom: '56px',\n font: 'var(--body)',\n maxWidth: '240px',\n margin: '0 auto',\n textAlign: 'center'\n },\n saved: {\n color: 'var(--light-gray)',\n margin: '10px 0',\n '& a': {\n color: 'var(--light-gray)',\n textDecoration: 'underline'\n }\n }\n})(({ classes, id }) => {\n const [pending, setPending] = useState(false)\n const [upsellModalOpen, setUpsellModalOpen] = useState(false)\n\n const { hasAccessToTL } = useSubscriptionDetails()\n\n const history = useHistory()\n\n return (\n <>\n \n
\n )\n })\n }}\n {slide}
\n \n {\n posthog.capture('click on bottom cta')\n if (!hasAccessToTL) {\n return setUpsellModalOpen(true)\n }\n setPending(true)\n apiClient\n .post(`/v3/presentations/${id}/create_presentation_copy`)\n .then(res => {\n history.push(`/lesson/${res.data.presentation.id}`, {\n fromPrompt: true\n })\n })\n }}\n className={classes.button}\n icon={
\n \n
\n )\n})\n\nexport const RateLessonCTA = injectSheet({\n container: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n color: '#fff',\n padding: '48px 0',\n gap: '24px',\n textAlign: 'center',\n font: 'var(--body)',\n '& p': {\n margin: '0'\n },\n '& header': {\n display: 'flex',\n flexDirection: 'column',\n gap: '8px'\n },\n '& form': {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n gap: '16px',\n '& section': {\n display: 'flex',\n flexDirection: 'column',\n gap: '4px'\n }\n }\n },\n feedback: {\n border: 'none',\n borderRadius: '8px',\n background: '#222',\n color: '#fff',\n padding: '16px',\n width: '280px',\n height: '100px',\n marginTop: '4px',\n display: 'block'\n },\n submit: {\n marginTop: '16px'\n },\n hint: {\n font: 'var(--body-)',\n color: 'var(--gray---)'\n },\n lastEntries: {\n display: 'flex',\n listStyle: 'none',\n width: '340px',\n margin: '0 auto',\n flexDirection: 'column',\n textAlign: 'left',\n marginTop: '32px',\n gap: '24px',\n '& p': {\n color: 'var(--gray---)'\n }\n },\n initial: {\n marginTop: '-16px'\n }\n})(({ classes, id }) => {\n const { me } = useMe()\n const [imageRating, setImageRating] = useState(null)\n const [activitiesRating, setActivitiesRating] = useState(null)\n const [feedback, setFeedback] = useState('')\n const [myRating, setMyRating] = useState('pending')\n const [communityRating, setCommunityRating] = useState('pending')\n const [submitting, setSubmitting] = useState(false)\n const isPobbler = !!me.account.pobbler_type\n const [latestEntries, setLatestEntries] = useState(null)\n\n useEffect(\n () => {\n apiClient\n .get(`v3/me/presentations/${id}/my_rating`)\n .then(res => setMyRating(res.data.rating))\n .catch(errorHandler)\n apiClient\n .get(`v3/presentations/${id}/rating`)\n .then(res => setCommunityRating(res.data.rating))\n .catch(errorHandler)\n },\n [id]\n )\n\n useEffect(\n () => {\n if (isPobbler) {\n apiClient\n .get(`v3/presentations/${id}/last_ratings`, {\n params: {\n number_of_ratings: 10\n }\n })\n .then(res => setLatestEntries(res.data.last_ratings))\n }\n },\n [id, isPobbler]\n )\n\n return myRating === 'pending' ||\n communityRating === 'pending' ? null : !!myRating || isPobbler ? (\n \n Community rating\n
\n {communityRating.number_of_ratings > 1 && (\n\n based on {communityRating?.number_of_ratings} reviews\n
\n )}\nImage
\nActivities
\n- \n {latestEntries.map((entry, index) => {\n return (\n
- \n
\n Image: {entry.image}, Activities: {entry.activities}\n
\n {entry.feedback}\n \n )\n })}\n
Do you like this lesson?
\n\n {\n setImageRating(parseInt(e.target.value))\n setActivitiesRating(parseInt(e.target.value))\n }}\n />\n
\n ) : (\n Rate the image
\nRate activities
\n- \n
- \n
\n )}\n Easier\n \n \n - \n
- \n
\n )}\n Harder\n \n \n
Get access to the Pobble Builder
\n\n Use the Pobble Builder to edit existing activites or add new activities\n such as work exemplar, word bank or{' '}\n grammar exercise.\n
\n \n )\n}\n\nconst SvgScrollArrow = props => (\n \n)\n\nconst SVGLeftArrow = props => (\n \n)\n\nconst SVGRightArrow = props => (\n \n)\n\nconst HeroHeader = injectSheet({\n heroHeader: {\n position: 'sticky',\n display: 'flex',\n top: '0',\n zIndex: '40',\n width: '100%',\n opacity: '0',\n pointerEvents: 'none',\n background:\n 'linear-gradient(to bottom, rgba(25, 25, 25, .8), rgba(25, 25, 25, .6), rgba(25, 25, 25, .4), rgba(25, 25, 25, 0))',\n '@media (min-width: 768px)': {\n height: '80px'\n }\n },\n scrolledPastHero: {\n background: '#191919',\n opacity: '1',\n pointerEvents: 'auto',\n boxShadow: '0 3px 5px rgb(0 0 0 / 50%)'\n }\n})(({ children, classes }) => {\n const [scrolledPastHero, setScrolledPastHero] = useState(false)\n\n useEffect(\n () => {\n const listener = () => {\n if (window.pageYOffset - window.innerHeight > 200) {\n if (!scrolledPastHero) setScrolledPastHero(true)\n } else {\n if (scrolledPastHero) {\n setScrolledPastHero(false)\n }\n }\n }\n window.addEventListener('scroll', listener)\n return () => {\n window.removeEventListener('scroll', listener)\n }\n },\n [scrolledPastHero]\n )\n\n return (\n\n setPrintModalOpen(false)}\n />\n {presentation && (\n setShowShareModal(false)}\n />\n )}\n \n )}\n setUpsellModalOpen(false)}\n />\n
\n )\n})\n\nexport const Prompt = injectSheet({\n container: {\n background: '#191919',\n position: 'relative'\n },\n heroSection: {\n position: 'relative',\n marginTop: '-140px',\n '@media (min-width: 768px)': {\n marginTop: '-80px'\n },\n '@media (max-width: 1023px)': {\n height: 'calc(100vh - 140px) !important'\n },\n '@supports (-webkit-touch-callout: none)': {\n height: 'calc(100vh - 220px) !important'\n }\n },\n heroImage: {\n width: '100%',\n height: '100%',\n objectFit: 'cover'\n },\n heroFooter: {\n color: '#fff',\n position: 'absolute',\n bottom: '0',\n width: '100%',\n background:\n 'linear-gradient(to top, rgba(25, 25, 25, 1), rgba(0, 0, 0, 0))',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n padding: '20px'\n },\n scroll: {\n backgroundColor: 'rgba(255, 255, 255, .1)',\n border: '2px solid rgba(255, 255, 255, .5)',\n borderRadius: '16px',\n height: '52px',\n width: '32px',\n display: 'flex',\n justifyContent: 'center',\n marginBottom: '24px',\n opacity: '0',\n transform: 'translateY(-4px)',\n animation: '.3s appear .2s ease-out forwards',\n '& svg': {\n fill: 'rgba(255, 255, 255, .5)',\n width: '14px',\n height: '14px',\n animation: 'scroll 3.9s infinite'\n },\n '&:hover': {\n borderColor: '#fff',\n '& svg': {\n fill: '#fff'\n }\n }\n },\n title: {\n margin: '0 0 16px',\n textAlign: 'center',\n font: 'var(--heading_)',\n opacity: '0',\n transform: 'translateY(8px)',\n animation: 'appear .3s ease-out forwards'\n },\n play: {\n opacity: 0,\n transform: 'translateY(8px)',\n animation: '.3s appear .2s ease-out forwards',\n marginBottom: '16px'\n },\n snippet: {\n margin: '-4px 0 16px',\n textAlign: 'center',\n color: 'var(--light-gray)',\n opacity: '0',\n font: 'var(--body)',\n transform: 'translateY(8px)',\n animation: '.3s appear .2s ease-out forwards'\n },\n activities: {\n padding: '0 20px 20px',\n maxWidth: '1200px',\n margin: '0 auto',\n '@media (min-width: 1024px)': {\n padding: '0 56px 56px'\n }\n },\n activitiesHeader: {\n display: 'flex',\n alignItems: 'center',\n flexDirection: 'column',\n padding: '8px 0 56px',\n gap: '24px',\n textAlign: 'center',\n color: '#fff',\n '& img': {\n margin: '32px 0',\n width: '260px',\n objectFit: 'cover',\n objectPosition: 'center'\n },\n '& h3': {\n margin: '0',\n font: 'var(--heading-)'\n }\n },\n slide: {\n marginBottom: '32px',\n position: 'relative',\n '@media (min-width: 1024px)': {\n marginBottom: '64px'\n }\n },\n slideHolder: {\n borderRadius: '8px',\n overflow: 'hidden'\n },\n editButton: {\n color: '#fff !important',\n font: 'var(--heading--)',\n marginBottom: '4px',\n '& > div': {\n height: '14px'\n }\n },\n main: {\n background: '#fff',\n color: 'var(--gray)',\n '&:hover': {\n background: '#fff',\n color: '#000'\n }\n },\n secondary: {\n background: 'none',\n color: 'var(--light-gray)',\n border: '1px solid var(--light-gray) !important',\n '&:hover': {\n background: 'none',\n color: 'var(--light-gray)'\n }\n },\n accentButton: {\n background: 'var(--yellow)',\n color: 'var(--gray)',\n '&:hover': {\n background: 'var(--yellow)',\n color: '#000'\n }\n },\n simpleButton: {\n background: 'none !important',\n color: 'rgba(255, 255, 255, .9)',\n border: 'none'\n },\n resources: {\n paddingRight: '0',\n '@media (min-width: 768px)': {\n paddingRight: '15px'\n }\n },\n explore: {\n display: 'flex',\n alignItems: 'center !important',\n font: 'var(--body-)',\n marginLeft: 'auto'\n },\n tagLine: {\n color: '#fff',\n marginRight: '4px',\n display: 'none',\n '@media (min-width: 769px)': {\n display: 'block'\n }\n },\n actionButtons: {\n display: 'flex',\n flexDirection: 'column',\n transform: 'translateY(-4px)',\n animation: '.5s appear .4s forwards',\n opacity: '0',\n '& button': {\n margin: '0 0 16px !important'\n },\n '@media (min-width: 768px)': {\n flexDirection: 'row',\n '& button': {\n margin: '0 16px 0 0 !important'\n }\n }\n },\n myPrompt: {\n background: 'none !important',\n color: '#fff',\n border: 'none',\n padding: '12px 15px',\n fontWeight: 'bold',\n marginLeft: '8px',\n '& svg': {\n marginRight: '6px',\n fontSize: '.8em'\n },\n '& a': {\n textDecoration: 'underline',\n color: '#fff'\n }\n },\n info: {\n margin: '8px 0',\n font: 'var(--body)',\n opacity: '0',\n transform: 'translateY(8px)',\n animation: '.3s appear .1s ease-out forwards',\n color: 'var(--yellow)',\n fontWeight: 'bold'\n },\n builder: {\n width: '100%',\n padding: '2% 10% 8%',\n background: 'rgba(255, 255, 255, .2)',\n borderRadius: '8px',\n border: '2px solid transparent',\n '& > *': {\n pointerEvents: 'none'\n },\n '&:hover': {\n borderColor: 'var(--blue)'\n },\n '&:focus': {\n borderColor: '#fff'\n },\n '&:active': {\n borderColor: '#fff'\n },\n '& img': {\n display: 'block',\n maxWidth: '100%'\n },\n '& > span': {\n fontSize: '24px',\n lineHeight: '1.2',\n display: 'block',\n textAlign: 'center',\n color: '#fff',\n fontWeight: 'bold',\n '@media (min-width: 768px)': {\n fontSize: '56px'\n }\n }\n },\n yellow: {\n color: 'var(--yellow)'\n },\n calendarButton: {\n '& span': {\n display: 'none',\n '@media (min-width: 1024px)': {\n display: 'inline'\n }\n }\n },\n headerHolder: {\n display: 'flex',\n width: '100%',\n maxWidth: '1200px',\n padding: '20px 20px',\n margin: '0 auto',\n '@media (min-width: 1024px)': {\n padding: '20px 56px'\n }\n },\n headerDifficulty: {\n display: 'none',\n '@media (min-width: 768px)': {\n display: 'block'\n }\n },\n actionsHolder: {\n marginLeft: 'auto'\n },\n separator: {\n width: '1px',\n height: '16px',\n background: '#fff',\n display: 'none',\n '@media (min-width: 1024px)': {\n display: 'block'\n }\n },\n saved: {\n animation: 'fadeFromYellow 1s ease-out'\n },\n restrictedFooter: {\n background:\n 'linear-gradient(to top, rgba(25, 25, 25, 1), rgba(25, 25, 25, 1), rgba(0, 0, 0, 0))'\n },\n restricted: {\n marginTop: '16px',\n paddingTop: '24px',\n padding: '8px 0',\n font: 'var(--body)',\n fontWeight: 'bold',\n '& p': {\n margin: '0'\n },\n '@media (min-width: 768px)': {\n borderTop: '1px solid rgba(255, 255, 255, .3)'\n }\n },\n restrictedPadding: {\n height: '20px'\n },\n restrictedHolder: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n gap: '16px',\n opacity: '0',\n transform: 'translateY(-4px)',\n animation: '.6s appear .3s ease-out forwards',\n textAlign: 'center',\n maxWidth: '230px',\n '@media (min-width: 768px)': {\n maxWidth: 'none'\n }\n },\n restrictedDate: {\n color: 'var(--yellow)'\n },\n restrictedActivitiesMessage: {\n font: 'var(--body--)',\n fontWeight: 'normal',\n margin: '32px 0 16px !important',\n textAlign: 'center'\n },\n mainDiffSelector: {\n display: 'flex',\n flexDirection: 'column',\n gap: '4px',\n marginTop: '8px',\n '& p': {\n font: 'var(--body-)'\n }\n },\n fixedHeader: {\n position: 'absolute',\n height: '80px',\n padding: '20px',\n zIndex: '10',\n width: '100%',\n display: 'flex',\n justifyContent: 'flex-end',\n background:\n 'linear-gradient(to bottom, rgba(25, 25, 25, 1), rgba(25, 25, 25, 0))',\n '& > div': {\n opacity: '0',\n transform: 'translateY(4px)',\n animation: '.3s appear .5s ease-out forwards'\n }\n },\n panelCTATest: {\n background: 'var(--yellow)',\n color: '#000',\n '&:hover': {\n background: 'var(--yellow-)',\n color: '#000'\n }\n },\n middleCTA: {\n '& > *': {\n border: 'none'\n }\n },\n '@keyframes appear': {\n to: {\n transform: 'translateY(0)',\n opacity: '1'\n }\n },\n '@keyframes fadeFromYellow': {\n from: {\n background: 'rgba(254, 228, 51, 1)'\n },\n to: {\n background: 'rgba(254, 228, 51, 0)'\n }\n },\n '@keyframes scroll': {\n '0%': {\n transform: 'translateY(-12px)',\n opacity: 0\n },\n '20%': {\n transform: 'translateY(8px)',\n opacity: 1\n },\n '80%': {\n transform: 'translateY(8px)',\n opacity: 1\n },\n '85%': {\n opacity: 1\n },\n '97%': {\n opacity: 0\n },\n to: {\n transform: 'translateY(44px)',\n opacity: 0\n }\n }\n})(({ classes }) => {\n const [presentation, setPresentation] = useState(null)\n const [todayPresentationId, setTodayPresentationId] = useState(null)\n const slidesContainerRef = useRef(null)\n const { id } = useParams()\n const [editUpsellOpen, setEditUpsellOpen] = useState(false)\n const [modalOpen, setModalOpen] = useState(false)\n const freePromptIds = useFreePrompts()\n\n const {\n difficultySelector,\n selectedPresentation,\n isDifferentiated\n } = useDifficultyLevels({\n presentation,\n includeString: DEFAULT_INCLUDE\n })\n\n const allDataLoaded = !!presentation && !!freePromptIds\n\n const { hasAccessToTL } = useSubscriptionDetails()\n const { me } = useMe()\n\n const studentWithoutSub =\n me.account.role_in_life === 'student' && !hasAccessToTL\n\n const restrictedPrompt =\n presentation &&\n !presentation.sponsored &&\n !hasAccessToTL &&\n !!freePromptIds &&\n !freePromptIds.has(presentation.id)\n\n const [yearGroups, setYearGroups] = useState(null)\n\n const date = useMemo(\n () => {\n if (presentation) {\n return `${months[presentation.p365_month - 1]} ${presentation.p365_day}`\n }\n },\n [presentation]\n )\n\n /**\n * Fetch yearGroups\n */\n useEffect(() => {\n apiClient\n .get('v3/year_groups', {\n params: {\n include: 'include=year_group.names,year_group.order'\n }\n })\n .then(res => {\n setYearGroups(res.data.year_groups)\n })\n }, [])\n\n const yearGroup = useMemo(\n () => {\n if (!yearGroups || !presentation) return null\n return yearGroups.filter(\n yg => yg.id === presentation.year_groups[0].id\n )[0]\n },\n [yearGroups, presentation]\n )\n\n /**\n * Show a toast message for users who got redirected\n * after buying a subscription\n */\n useEffect(\n () => {\n if (!!window.location.href.match(/id=.*&state=succeeded/)) {\n toast.success('Thanks for subscribing!')\n posthog.capture('subscribed', me.account.individual_subscription)\n\n /**\n * Keep it for 500ms for hotjar to capture the URL\n * so we can filter out recordings with users\n * who bought a sub\n */\n setTimeout(() => {\n window.history.replaceState &&\n window.history.replaceState(null, null, window.location.pathname)\n }, 500)\n }\n },\n [me.account.individual_subscription]\n )\n\n useEffect(\n () => {\n setPresentation(null)\n\n if (id) {\n apiClient\n .get(`/v3/presentations/${id}`, {\n params: { include: DEFAULT_INCLUDE }\n })\n .then(res => setPresentation(res.data.presentation))\n if (!todayPresentationId) {\n apiClient\n .get('/v3/p365/today', {\n params: {\n count: 1,\n from: 0\n }\n })\n .then(res => {\n setTodayPresentationId(res.data.presentations[0].id)\n })\n }\n } else {\n apiClient\n .get('/v3/p365/today', {\n params: {\n count: 1,\n from: 0,\n include: DEFAULT_INCLUDE\n }\n })\n .then(res => {\n const presentation = res.data.presentations[0]\n setPresentation(presentation)\n setTodayPresentationId(presentation.id)\n })\n }\n },\n [id] // eslint-disable-line\n )\n\n useEffect(\n () => {\n const handleScroll = () => {\n if (\n window.innerHeight + window.scrollY >=\n document.documentElement.scrollHeight\n ) {\n if (!restrictedPrompt) {\n posthog.capture('Scrolled to the bottom of the prompt (v2)', {\n lesson_category: presentation.category,\n lesson_id: presentation.id,\n lesson_title: presentation.title\n })\n }\n\n window.removeEventListener('scroll', handleScroll)\n }\n }\n\n window.addEventListener('scroll', handleScroll)\n return () => {\n window.removeEventListener('scroll', handleScroll)\n }\n },\n [presentation, restrictedPrompt]\n )\n\n return (\n \n \n \n {allDataLoaded &&\n !restrictedPrompt && (\n \n \n {({ scrolledPastHero }) => (\n \n {allDataLoaded &&\n !restrictedPrompt && (\n <>\n {scrolledPastHero && (\n <>\n
\n )}\n \n \n {difficultySelector}\n
\n \n
\n \n )}\n \n )}\n {date}
}\n {presentation.category === 'theme_based' &&\n yearGroup && (\n\n Age {yearGroup.from}-{yearGroup.to}\n
\n )}\n\n{selectedPresentation.title}
\n {!!presentation.p365 &&\n !!selectedPresentation.slides[3] &&\n !!selectedPresentation.slides[3].text && (\n\n {selectedPresentation.slides[3].text.slice(0, 64)}...\n
\n )}\n {restrictedPrompt && (\n\n
\n )}\n \n \n )}\n \n {presentation.p365_day && (\n {\n posthog.capture(\n 'triggers upsell modal from prompt',\n {\n lesson_category: presentation.category,\n lesson_id: presentation.id,\n lesson_title: presentation.title\n }\n )\n setModalOpen(true)\n }}>\n Access it now with a free trial\n \n )}\n
\n \n This lesson will be available for free on{' '}\n \n {date}\n \n
\n )}\n\n
\n {!studentWithoutSub && (\n \n Includes {presentation.slides.length - 4} writing\n activities\n
\n ) : (\n \n )}\n\n \n \n \n {({ slides }) => {\n const sliceFrom =\n presentation.category === 'quick_writes' ? 2 : 3\n return slides\n .slice(sliceFrom, slides.length)\n .map((slide, i) => {\n return (\n \n {i === 2 && (\n \n )\n })\n }}\n \n {me.account.role_in_life !== 'student' && (\n
\n )}\n Writing Activities for \"{presentation.title}\"
\n {isDifferentiated && (\n\n
\n )}\n Select difficulty level for writing activities
\n {difficultySelector}\n\n
\n )}\n \n
\n {slide}
\n Unlock unlimited writing inspiration!
\n\n
\n \n Your free plan only allows access to{` `}\n
{month.title}
\n\n {month.days.map(day => {\n const presentationDay =\n presentations &&\n day.isCurrentMonth &&\n presentations[monthIndex][day.dayOfMonth - 1]\n\n const presentation =\n presentationDay && presentationDay.presentation\n\n const isRestricted = false\n\n return (\n
\n \n )\n })}\n \n )\n },\n [\n activeMonth,\n classes,\n calendarData,\n match.params.id,\n history,\n presentations,\n todayId,\n showFreeTrial\n ]\n )\n\n return (\n \n {!day.isCurrentMonth && (\n \n )}\n {day.isCurrentMonth && (\n {\n if (isRestricted) {\n return setUpsellModalOpen(presentation.id)\n }\n window.scrollTo({ top: 0 })\n history.push(`/prompt/${presentation.id}`)\n }\n }\n className={`${classes.day} ${\n isRestricted\n ? `metrics__restricted--calendar ${\n showFreeTrial\n ? 'metrics__restricted--calendar--trial'\n : ''\n }`\n : ''\n } ${day.isCurrentMonth ? classes.monthDay : ''} ${\n presentation &&\n presentation.id === match.params.id\n ? classes.activeDay\n : ''\n } ${\n presentation && todayId === presentation.id\n ? classes.today\n : ''\n }`}>\n {day.isCurrentMonth && (\n <>\n {presentation && (\n
\n )\n })}\n Are you a teacher? Inspire your young writers!
\n\n Find a new exciting writing prompt like this, free, every day on Pobble\n
\n\n Save your copy, edit activities, share on Google Classroom and more!\n
\n {!token && (\n\n \n \n 
\n \n \n {!presentationReady && (\n
\n )\n})\n","import React, { useEffect, useState } from 'react'\nimport injectSheet from 'react-jss'\nimport Button from 'pobble-components/dist/button'\nimport { AUTH_REDIRECT } from 'pobble-components/dist/cookies'\nimport { URLS } from 'pobble-components/dist/setup'\nimport Buttonelement from 'pobble-components/dist/button-element'\nimport { useParams } from 'react-router-dom'\nimport classNames from 'classnames'\n\nconst styles = {\n overlay: {\n position: 'fixed',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n backgroundColor: 'rgba(0, 0, 0, 0.5)',\n transition: 'opacity 0.3s ease-out',\n zIndex: 999\n },\n popupDialog: {\n position: 'fixed',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n background: 'white',\n borderRadius: '8px',\n padding: '56px',\n zIndex: 1000,\n transition: 'opacity 0.5s ease-out',\n textAlign: 'center',\n maxWidth: '500px',\n width: 'calc(100vw - 24px)',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n gap: '24px',\n font: 'var(--body)',\n '& > *': {\n margin: '0'\n }\n },\n button: {\n marginTop: '16px'\n },\n login: {\n display: 'flex',\n flexDirection: 'column',\n font: 'var(--body-)',\n alignItems: 'center',\n '& button': {\n color: 'var(--gray-)',\n textDecoration: 'underline',\n '&:hover, &:focus': {\n textDecoration: 'none'\n }\n }\n }\n}\n\nconst PopupDialog = ({ classes }) => {\n const [opacity, setOpacity] = useState(0)\n\n const { id } = useParams()\n\n const checkScrollPosition = () => {\n let maxScroll = document.body.scrollHeight - window.innerHeight\n let currentScroll = window.pageYOffset\n let percentageScrolled = currentScroll / maxScroll\n setOpacity(percentageScrolled > 1 / 3 ? 1 : 0)\n }\n\n useEffect(() => {\n window.addEventListener('scroll', checkScrollPosition)\n return () => window.removeEventListener('scroll', checkScrollPosition)\n }, [])\n\n /**\n * Sets the signup redirect cookie to the copy route for a current lesson id\n *\n * The copy route copies this lesson and redirects the user\n * to a builder with the copied lesson\n *\n */\n const setSignupRedirect = () =>\n AUTH_REDIRECT.set(`${URLS.APP}/lessons/copy/${id}`)\n\n return (\n <>\n \n Inspiring young writers!
\n\n \n \n \n \n
\n )}\n {presentationReady && (\n \n \n {({ slides }) => {\n return slides.map((slide, i) => {\n return (\n <>\n
\n )}\n \n
\n {i === 3 && \n {slide}\n {i === 0 && (\n <>\n present(presentation.id)}\n className={classes.fullScreenButton}>\n
\n \n {\n setSignupRedirect()\n window.location.href = '/auth/sign-up?from=teacher-preview'\n }}\n className={classNames(classes.button, 'metrics__teacher-preview-cta')}\n tall\n darkBlue>\n Create your free account\n \n
\n \n )\n}\n\nexport default injectSheet(styles)(PopupDialog)\n","import React, { useEffect, useRef, useState } from 'react'\nimport injectSheet from 'react-jss'\nimport { apiClient } from 'pobble-components/dist/api'\nimport { useParams } from 'react-router-dom'\nimport { Presentation } from 'pobble-components/dist/presentation'\nimport logo from './logo.svg'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faExpandAlt } from '@fortawesome/pro-regular-svg-icons/faExpandAlt'\nimport ButtonElement from 'pobble-components/dist/button-element'\nimport { usePresentMode } from '../direct-present/present-mode'\nimport CtaModal from './cta-modal'\n\nexport const TeacherPreview = injectSheet({\n container: {\n minHeight: '100vh',\n background: '#191919',\n overflow: 'hidden',\n padding: '24px'\n },\n skeleton: {\n maxWidth: '960px',\n margin: '0 auto'\n },\n bone: {\n paddingBottom: '56%',\n background: '#1f1f1f',\n borderRadius: '8px',\n marginTop: '24px',\n '&:first-child': {\n marginTop: '0'\n }\n },\n header: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n color: 'var(--light-gray)',\n gap: '8px',\n marginBottom: '16px',\n '& p': {\n margin: '0',\n transform: 'translate(0, -8px)',\n opacity: '0',\n animation: '.8s appear .4s ease-out forwards'\n }\n },\n slidesContainer: {\n maxWidth: '960px',\n margin: '0 auto'\n },\n slide: {\n borderRadius: '8px',\n transform: 'translateZ(0)',\n background: '#1f1f1f',\n overflow: 'hidden',\n marginTop: '24px',\n position: 'relative',\n '&:first-child': {\n marginTop: '0'\n }\n },\n slideHolder: {\n opacity: '0',\n animation: 'appear .3s ease-out forwards'\n },\n logo: {\n display: 'block',\n width: '80px',\n margin: '0 auto',\n height: '46px',\n transform: 'translate(0, -8px)',\n opacity: '0',\n animation: 'appear .8s ease-out forwards',\n '& img': {\n width: '100%'\n }\n },\n fullScreenButton: {\n fontSize: '28px',\n position: 'absolute',\n right: '0',\n top: '0',\n padding: '16px',\n color: 'rgba(255, 255, 255, .7)',\n '& svg': {\n stroke: '#000',\n strokeWidth: '4px',\n strokeOpacity: '.5'\n }\n },\n '@keyframes appear': {\n to: {\n opacity: '1',\n transform: 'translate(0, 0)'\n }\n }\n})(({ classes }) => {\n const [presentation, setPresentation] = useState(null)\n const { id } = useParams()\n const slidesContainerRef = useRef(null)\n const [presentationReady, setReady] = useState(false)\n const { present } = usePresentMode()\n\n useEffect(\n () => {\n if (presentation) {\n document.title = `${presentation.title} - Pobble`\n }\n },\n [presentation]\n )\n\n /**\n * Preload the first image of the presentation\n * so that users don't see progressive image laoding\n */\n useEffect(\n () => {\n let timer = null\n let ready = false\n\n const setAsReady = () => {\n if (!ready) {\n setReady(true)\n ready = true\n }\n }\n\n if (presentation) {\n const image =\n !presentation.asset && presentation.image && presentation.image.url\n\n if (!image) {\n setAsReady()\n } else {\n const img = new Image()\n img.src = image\n img.onload = () => setAsReady()\n\n /**\n * 3 second fallback in cases when image doesn't load\n */\n timer = setTimeout(() => setAsReady(), 3000)\n }\n }\n\n return () => {\n clearTimeout(timer)\n }\n },\n [presentation]\n )\n\n useEffect(\n () => {\n setPresentation(null)\n apiClient\n .get(`/v3/presentations/${id}`, {\n params: {\n include:\n 'presentation.p365,presentation.account,presentation.category,presentation.status,presentation.image,presentation.year_groups,presentation.year_group.order,presentation.details,presentation.slides,presentation.slide.type,presentation.slide.details,presentation.names'\n }\n })\n .then(res => setPresentation(res.data.presentation))\n },\n [id]\n )\n\n return (\n <>\n Inspire your young writers!
\n\n Sign up for a Pobble account to access a new, exciting writing prompt\n like this, free, every day of the year\n
\n\n Save your copy, edit activities, share on Google classroom and more!\n
\n\n Already have an account?\n {\n setSignupRedirect()\n window.location.href = '/auth?from=teacher-preview'\n }}\n href=\"/auth\">\n Sign in\n \n
\n \n \n \n \n \n \n {!presentationReady && (\n
\n Inspiring young writers!
\n\n \n \n \n \n
\n )}\n {presentationReady && (\n \n \n {({ slides }) => {\n return slides.map((slide, i) => {\n return (\n <>\n
\n )}\n \n
\n \n )\n })\n }}\n \n \n {slide}\n {i === 0 && (\n <>\n present(presentation.id)}\n className={classes.fullScreenButton}>\n
\n \n {!firstPresentation && }\n {firstPresentation && (\n {\n window.scrollTo({ top: 0 })\n history.push(`/prompt/${firstPresentation.id}`)\n }}\n className={`${classes.presentation} ${classes.free}`}>\n \n
\n )}\n \n {!presentationsList &&\n [...new Array(30)].map((_, i) => (\n \n ))}\n {!!presentationsList &&\n presentationsList.map(({ keyword, presentation }, i) => {\n return !presentation ? (\n \n ) : (\n {\n window.scrollTo({ top: 0 })\n history.push(`/prompt/${presentation.id}`)\n }}\n className={`${classes.presentation} ${\n !hasAccessToTL ? 'metrics__restricted--topics' : ''\n }`}>\n \n
\n \n )\n },\n [\n classes,\n firstPresentation,\n presentationsList,\n hasAccessToTL,\n history,\n pending\n ]\n )\n\n return (\n \n {memoizedTopicsJSX} \n
\n \n
\n \n
\n \n Explore our differentiated topic lessons! Select your age group\n below.\n
\n\n
\n - \n {!yearGroups &&\n [...new Array(6)].map((_, i) => (\n
Unlock unlimited writing inspiration!
\n\n Your free plan only allows access to our 'Chocolate' themed lesson. With\n a Teaching and Learning subscription, you unlock\n unlimited access to all of Pobble’s inspiring content, including all\n topic lessons!\n
\n \n )\n})\n\nexport const Weekly = injectSheet({\n container: {\n background: '#191919',\n color: '#fff',\n minHeight: '100vh',\n padding: '0 0 120px'\n },\n main: {\n padding: '0 24px',\n overflow: 'hidden'\n },\n presentations: {\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fill,minmax(300px,1fr))',\n gap: '24px',\n maxWidth: '1200px',\n margin: '0 auto',\n padding: '0 0 24px'\n },\n presentationsUpcoming: {\n // Hide 3rd button on portrait tablets\n '@media (min-width: 767px) and (max-width: 1023px)': {\n '& > :nth-child(3)': {\n display: 'none'\n }\n }\n },\n highlight: {\n maxWidth: '560px',\n margin: '0 auto',\n padding: '0 0 48px',\n '& $presentation': {\n width: '100%',\n display: 'block',\n outline: '2px solid #fff',\n outlineOffset: '4px',\n position: 'relative'\n },\n '& $presentationTitle': {\n '@media (min-width: 1024px)': {\n font: 'var(--heading)'\n }\n }\n },\n presentation: {\n paddingBottom: '56.2%',\n background: '#242424',\n borderRadius: '8px',\n overflow: 'hidden',\n position: 'relative',\n '& *': {\n pointerEvents: 'none'\n },\n '&:focus, &:active': {\n outline: '2px solid #fff',\n outlineOffset: '2px'\n }\n },\n presentationHolder: {\n position: 'absolute',\n left: '0',\n top: '0',\n width: '100%',\n height: '100%',\n '& img': {\n width: '100%',\n height: '100%',\n objectFit: 'cover'\n }\n },\n presentationTitle: {\n font: 'var(--heading--)',\n background: 'linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0))',\n color: '#fff',\n textAlign: 'center',\n padding: '120px 12px 12px',\n position: 'absolute',\n bottom: '0',\n left: '0',\n width: '100%',\n opacity: '0',\n animation: 'appear .3s forwards',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center'\n },\n spinner: {\n fontSize: '20px',\n color: 'var(--yellow)',\n margin: '0 0 8px'\n },\n free: {\n '&:after': {\n content: '\"Free\"',\n position: 'absolute',\n right: '8px',\n top: '8px',\n color: 'var(--gray)',\n background: '#fff',\n font: 'var(--body-)',\n fontWeight: 'bold',\n padding: '4px 16px',\n borderRadius: '4px'\n }\n },\n crown: {\n position: 'absolute',\n right: '8px',\n top: '8px',\n width: '24px',\n height: '24px',\n borderRadius: '24px',\n fontSize: '10px',\n background: 'rgba(0, 0, 0, .3)',\n color: 'var(--yellow)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n featuredTitle: {\n textAlign: 'center',\n margin: '48px 0 24px',\n font: 'var(--heading-)',\n color: 'var(--yellow)',\n '@media (min-width: 768px)': {\n font: 'var(--heading_)'\n }\n },\n upcomingTitle: {\n textAlign: 'center',\n margin: '48px 0 24px',\n font: 'var(--heading-)',\n color: '#fff'\n },\n previousTitle: {\n textAlign: 'center',\n margin: '48px 0 24px',\n font: 'var(--heading-)',\n color: 'rgba(255, 255, 255, .7)'\n },\n '@keyframes appear': {\n to: {\n transform: 'translateY(0)',\n opacity: '1'\n }\n }\n})(({ classes }) => {\n const [featured, setFeatured] = useState(null)\n const [presentations, setPresentations] = useState(null)\n const [upsell, setUpsell] = useState(false)\n\n const { hasAccessToTL } = useSubscriptionDetails()\n\n const history = useHistory()\n\n /**\n * Fetch presentations for selected year group\n */\n useEffect(() => {\n Promise.all([\n apiClient\n .get('v3/presentations/search', {\n params: {\n recommended: true,\n from: 0,\n limit: 1\n }\n })\n .catch(errorHandler),\n apiClient\n .get('v3/presentations/search', {\n params: {\n categories: ['quick_writes'],\n from: 1,\n limit: 200\n }\n })\n .catch(errorHandler)\n ]).then(([res1, res2]) => {\n setFeatured(res1.data.presentations[0])\n setPresentations(res2.data.presentations)\n })\n }, [])\n\n const memoizedWeeklyJSX = useMemo(\n () => {\n return (\n <>\nFeatured this week
\n\n {!featured && }\n {featured && (\n {\n window.scrollTo({ top: 0 })\n history.push(`/prompt/${featured.id}`)\n }}\n className={`${classes.presentation} ${\n !hasAccessToTL ? classes.free : ''\n }`}>\n \n
\n \n {!presentations &&\n [...new Array(30)].map((_, i) => (\n \n ))}\n {!!presentations &&\n presentations.map((presentation, i) => {\n return !presentation ? (\n \n ) : (\n {\n window.scrollTo({ top: 0 })\n history.push(`/prompt/${presentation.id}`)\n }}\n className={`${classes.presentation} ${\n !hasAccessToTL ? 'metrics__restricted--quickwrites' : ''\n }`}>\n \n
\n \n )\n },\n [classes, featured, hasAccessToTL, presentations, history]\n )\n\n return (\n \n \n {memoizedWeeklyJSX}\n setUpsell(false)}\n />\n \n
\n \n
\n )}\n \n )\n }\n)\n\n/**\n * Work preview creates a fake presentation\n * that looks like the work asset.\n *\n * We are doing that because if user saves or uses this work\n * that's what backend will do. It will map the work data\n * to the presentation asset data.\n *\n * This way we ensure that visual end result is as close\n * to reality as possible\n *\n */\nconst WorkPreview = injectSheet({\n content: {\n background: 'var(--light-gray-)',\n overflow: 'hidden',\n maxWidth: '1100px',\n padding: '48px',\n borderRadius: '4px 4px 0 0'\n },\n presentation: {\n boxShadow: '0 0 0 1px rgb(0 0 0 / 16%)',\n borderRadius: '4px',\n overflow: 'hidden',\n '& a': {\n display: 'none !important'\n }\n }\n})(({ work, classes, requestClose }) => {\n return (\n <>\n \n ${work.description || ''}
\n `,\n work: {\n id: work.id,\n title: 'title',\n media: work.media\n }\n }\n ]\n }}\n />\n
\n
\n ) : !works.length ? (\n Oops, we couldn't find any works
\n\n Reset filters\n
\n\n {works &&\n works.map(work => {\n const media = work.media[0]\n const img = media && media.thumb_url\n return (\n onSelect(work)}\n className={classes.work}\n key={work.id}>\n
\n )\n})\n\nconst Works = injectSheet({\n container: {\n '& header': {\n padding: '24px',\n background: '#fff',\n display: 'flex',\n position: 'sticky',\n zIndex: '20',\n top: '0',\n boxShadow: '0 0 4px rgb(0 0 0 / 10%)'\n },\n '& main': {\n padding: '24px',\n background: 'var(--light-gray--)',\n minHeight: '100vh'\n }\n },\n search: {\n display: 'flex',\n flex: '1',\n maxWidth: '600px',\n '& input': {\n borderRight: 'none',\n borderRadius: '4px 0 0 4px'\n },\n '& button': {\n borderRadius: '0 4px 4px 0'\n }\n },\n headerHolder: {\n maxWidth: '800px',\n margin: 'auto',\n display: 'flex',\n gap: '24px',\n flex: '1'\n },\n toggle: {\n display: 'flex',\n '& button': {\n minWidth: '100px',\n display: 'flex',\n justifyContent: 'center',\n color: 'var(--gray--)',\n borderColor: '#ccc',\n '&:hover': {\n background: 'hsl(224deg 33% 94%)',\n color: 'var(--dark-blue)'\n },\n '&:first-child': {\n borderRadius: '4px 0 0 4px',\n borderRight: 'none'\n },\n '&:last-child': {\n borderRadius: '0 4px 4px 0',\n borderLeft: 'none'\n }\n }\n },\n active: {\n background: 'hsl(225deg 59% 97%)',\n color: 'var(--dark-blue) !important',\n borderColor: 'var(--dark-blue--) !important',\n border: '1px solid var(--dark-blue) !important'\n },\n selectedAge: {\n '& select': {\n background: 'hsl(225deg 59% 97%)',\n borderColor: 'var(--dark-blue) !important',\n color: 'var(--dark-blue)'\n }\n },\n crown: {\n marginRight: '8px',\n color: 'var(--blue)'\n }\n})(({ classes, onSelect }) => {\n const match = useRouteMatch()\n const history = useHistory()\n const [upsell, setUpsell] = useState(false)\n const { hasAccessToTL } = useSubscriptionDetails()\n\n useEffect(\n () => {\n window.scrollTo({ top: 0 })\n },\n [match.params.filter, match.params.age]\n )\n\n return (\n \n \n
\n \n \n )\n })}\n \n \n \n \n \n setUpsell(false)}\n isOpen={upsell}\n />\n
\n )\n})\n\nexport const WorksPage = injectSheet()(({ classes }) => {\n const [workModal, setWorkModal] = useState({ open: false, work: null })\n return (\n \n {\n history.push(`/works/${match.params.filter}/${e.target.value}`)\n }}\n value={match.params.age}>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {\n e.preventDefault()\n history.push(\n `/works/${match.params.filter}/${match.params.age}/${\n e.target.search.value\n }`\n )\n }}\n className={classes.search}>\n
\n \n {\n if (!hasAccessToTL) return setUpsell(true)\n history.push(\n `/works/exemplars/${match.params.age || 'all-ages'}`\n )\n }}\n className={`${\n match.params.filter === 'exemplars' ? classes.active : ''\n } ${!hasAccessToTL ? 'metrics__exemplars--restricted' : ''}`}\n tall\n secondary>\n {!hasAccessToTL && \n history.push(`/works/all/${match.params.age || 'all-ages'}`)\n }\n className={match.params.filter === 'all' ? classes.active : ''}\n tall\n secondary>\n All work\n \n
\n \n {\n setWorkModal({ open: true, work })\n }}\n />\n setWorkModal({ ...workModal, open: false })}\n />\n
\n )\n})\n","import React from 'react'\nimport injectSheet from 'react-jss'\nimport Button from 'pobble-components/dist/button'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faSearch } from '@fortawesome/pro-regular-svg-icons/faSearch'\nimport { faBan } from '@fortawesome/pro-regular-svg-icons/faBan'\nimport { faCrown } from '@fortawesome/pro-solid-svg-icons/faCrown'\nimport { Link, useHistory, useRouteMatch } from 'react-router-dom'\nimport { useState } from 'react'\nimport { useEffect } from 'react'\nimport { apiClient } from 'pobble-components/dist/api'\nimport ButtonElement from 'pobble-components/dist/button-element'\nimport { Image } from 'pobble-components/dist/image'\nimport { useSubscriptionDetails } from 'pobble-components/dist/subscriptions/utils'\nimport { PromptsLayout } from '../../../prompts-layout'\nimport useFreePrompts from '../../../../common/utils'\n\nconst SearchBox = injectSheet({\n container: {\n position: 'relative',\n width: '100%',\n '& svg': {\n position: 'absolute',\n left: '16px',\n top: '16px',\n color: 'var(--light-gray)'\n }\n },\n input: {\n display: 'block',\n width: '100%',\n font: 'var(--body)',\n height: '48px',\n background: 'var(--gray)',\n borderRadius: '24px',\n padding: '0 116px 0 40px',\n border: 'none',\n color: '#fff',\n '&:focus': {\n boxShadow: '0 0 0 4px #191919, 0 0 0 5px var(--gray)'\n },\n '&::-webkit-search-cancel-button': {\n filter: 'contrast(0%)'\n }\n },\n button: {\n position: 'absolute',\n right: '4px',\n top: '4px',\n height: '40px',\n borderRadius: '20px'\n }\n})(({ classes, onChange, defaultValue }) => {\n return (\n \n
\n )\n})\n\nconst Prompt = injectSheet({\n prompt: {\n overflow: 'hidden',\n position: 'relative',\n background: '#242424',\n borderRadius: '8px',\n paddingBottom: '56.2%',\n '& *': {\n pointerEvents: 'none'\n }\n },\n holder: {\n position: 'absolute',\n top: '0',\n left: '0',\n width: '100%',\n height: '100%'\n },\n img: {\n width: '100%',\n height: '100%',\n objectFit: 'cover'\n },\n footer: {\n position: 'absolute',\n bottom: '0',\n left: '0',\n width: '100%',\n textAlign: 'center',\n padding: '120px 12px 12px',\n background: 'linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0))',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n color: '#fff',\n font: 'var(--heading--)',\n opacity: '0',\n animation: 'appear .3s forwards',\n gap: '8px'\n },\n age: {\n display: 'block',\n background: 'rgba(255, 255, 255, .3)',\n color: '#fff',\n padding: '4px 8px',\n borderRadius: '4px',\n font: 'var(--body--)',\n fontWeight: 'bold',\n transform: 'translateY(-4px)',\n opacity: '0',\n animation: 'appear .6s ease-out forwards'\n },\n crown: {\n position: 'absolute',\n right: '8px',\n top: '8px',\n width: '24px',\n height: '24px',\n borderRadius: '24px',\n fontSize: '10px',\n background: 'rgba(0, 0, 0, .3)',\n color: 'var(--yellow)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n zIndex: '20'\n },\n '@keyframes appear': {\n to: {\n transform: 'translateY(0)',\n opacity: '1'\n }\n }\n})(({ presentation, classes, premium, onClick }) => {\n return (\n \n
\n )\n})\n\nexport const Search = injectSheet({\n container: {\n background: '#191919',\n color: '#fff',\n minHeight: '100vh',\n padding: '0 24px 48px'\n },\n header: {\n position: 'sticky',\n top: '0',\n zIndex: '50',\n background: '#191919'\n },\n search: {\n padding: '24px',\n maxWidth: '700px',\n display: 'flex',\n margin: '0 auto'\n },\n empty: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n textAlign: 'center',\n color: 'var(--light-gray)',\n font: 'var(--body)',\n height: 'calc(100vh - 300px)',\n '& svg': {\n fontSize: '56px',\n marginBottom: '24px',\n opacity: '.2'\n },\n '& h2': {\n margin: '0 0 16px'\n },\n '& p': {\n color: '#ccc',\n margin: '16px 0'\n },\n '& > div': {\n maxWidth: '420px'\n },\n '& ul': {\n listStyle: 'none',\n margin: '0',\n padding: '0',\n display: 'flex',\n justifyContent: 'center',\n gap: '12px'\n },\n '& a': {\n color: 'var(--blue)'\n }\n }\n})(({ classes }) => {\n const history = useHistory()\n const { params } = useRouteMatch()\n const freePromptIds = useFreePrompts()\n\n const { hasAccessToTL } = useSubscriptionDetails()\n\n return (\n \n {!presentations &&\n [...Array(12)].map((_, i) => (\n \n ))}\n {presentations &&\n presentations.map(presentation => (\n onClick(presentation)}\n premium={isPremium(presentation)}\n presentation={presentation}\n key={presentation.id}\n />\n ))}\n
\n \n \n {\n e.preventDefault()\n history.push(`/prompt/search/${e.target.search.value}`)\n }}\n className={classes.search}>\n {\n if (!e.target.value) history.push(`/prompt/search`)\n }}\n key={params.searchTerm}\n defaultValue={params.searchTerm}\n />\n \n \n {params.searchTerm && (\n {\n if (hasAccessToTL) return false\n if (!freePromptIds) return true\n return !freePromptIds.has(presentation.id)\n }}\n onClick={presentation => {\n window.scrollTo({ top: 0 })\n history.push(`/prompt/${presentation.id}`)\n }}\n searchTerm={params.searchTerm}\n emptyState={\n
\n \n
\n }\n />\n )}\n {!params.searchTerm && (\n \n
\n \n
\n Can't find what you want?
\n\n Check out Pobble 365,{' '}\n Weekly writes or our{' '}\n Topic lessons.\n
\n\n
\n )}\n \n \n What are
\n
\n \n
\n \n What are
you searching for?\n
\n \n Search for a specific topic
or try one of the keywords\n below\n
- \n
- \n Chocolate\n \n
- \n Water\n \n
- \n Commas\n \n
\n
\n \n \n \n
\n \n