import { __ } from "@wordpress/i18n"; import { ButtonGroup, InputControl, SelectControl, SPRangeControl, ToggleControl, SortableItem, Divider, SelectDropdown, PresetPicker, } from "@testimonial/components"; import { ARROW_ICON_OPTIONS, cardContentLabels, SWIPER_PAGINATION_DOTS_OPTIONS, RATING_ICON_STYLES, RatingIcon, textAlignmentOptions, } from "@testimonial/constants"; import { restrictToVerticalAxis } from "@dnd-kit/modifiers"; import { DndContext, PointerSensor, useSensor, useSensors } from "@dnd-kit/core"; import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"; import { componentSectionHeader, getModulesSettings, inArray, useDeviceType } from "@testimonial/controls"; import { carouselTemplateIcons } from "../carousel/icon"; import { cardDesignIcons } from "./Icons"; import { applyCardDesign } from "./cardDesign"; import { ProFeaturesBox, TestimonialContentProNote, ReviewerDetailsProNote } from "../../components/proControls"; // Card-content slots that are Pro-only in the free plugin. They stay in the // `cardContents` list (data preserved) but render as a locked Pro toggle row. const PRO_CARD_CONTENTS = ["company_info", "location", "date", "social_profiles", "custom_fields"]; // Layouts Tabs export const LayoutsGeneralTab = ({ attributes, setAttributes }) => { const { blockName, cardDesign, carouselStyle, slidingEffect, columns, columnGap, rowGap, enableNavigationArrow, enablePaginationDots, enableSEOSchemaMarkup, // Marquee-only. marqueeDisplayStyle, marqueeRows, fadeSliderEdges, enableAjaxPagination, } = attributes; const isMarquee = blockName === "marquee"; const isSlider = blockName === "slider"; // Slider exposes every sliding effect directly (no carousel-style preset). const sliderSlidingEffects = [ { label: "Slide", value: "slide" }, { label: "Flip", value: "flip" }, { label: "Cube", value: "cube" }, { label: "Spring (Pro)", value: "creative", disabled: true }, { label: "Fade (Pro)", value: "fade", disabled: true }, { label: "Ken Burns (Pro)", value: "ken-burns", disabled: true }, ]; const carouselSlidingEffects = [{ label: "Slide", value: "slide" }]; if ("default" === carouselStyle) { carouselSlidingEffects.push( { label: "Cube", value: "cube" }, { label: "Flip", value: "flip" }, { label: "Spring (Pro)", value: "creative", disabled: true }, { label: "Fade (Pro)", value: "fade", disabled: true } ); } const onChangeCardDesign = (newDesign) => applyCardDesign(newDesign, attributes, setAttributes); let proFeatureList = [ __("AI generated review summary 🔥", "testimonial-free"), __("Instant result with Ajax search", "testimonial-free"), __("Filter by groups, specific items", "testimonial-free"), __("Filter based on star rating", "testimonial-free"), __("Shuffle testimonials with random order", "testimonial-free"), __("Drag & drop to arrange testimonials your way", "testimonial-free"), ]; if ("carousel" === blockName) { proFeatureList = [ __("3 dynamic carousel styles", "testimonial-free"), __("10+ premium card designs", "testimonial-free"), __("3+ smooth sliding effects", "testimonial-free"), __("Vertical layout for flexible display", "testimonial-free"), __("Partial slide view for a modern look", "testimonial-free"), ...proFeatureList, ]; } else if ("slider" === blockName) { proFeatureList = [ __("10+ premium card designs", "testimonial-free"), __("3+ smooth sliding effects", "testimonial-free"), __("Vertical layout for flexible display", "testimonial-free"), ...proFeatureList, ]; } else { proFeatureList = [__("10+ premium card designs", "testimonial-free"), ...proFeatureList]; } return ( <> {"carousel" === blockName && ( { setAttributes({ carouselStyle: value, slidingEffect: "slide", }); }} /> )} {"carousel" === blockName && ( <> {carouselStyle === "default" && ( )} )} {isSlider && ( )} {isMarquee && ( )} {!isSlider && ( <> )} {isMarquee && ( )} {inArray(["grid", "masonry", "marquee", "bento-grid"], blockName) && ( )} {isMarquee && ( )} {inArray(["carousel", "slider"], blockName) && ( <> )} {inArray(["grid", "bento-grid", "polaroid-grid", "masonry"], blockName) && ( )} {/* child blocks — Pro-only features (locked in the free plugin). */} {!isSlider && ( <> )} {"carousel" === blockName && getModulesSettings("seo_schema_markup") && ( )} ); }; export const SliderSettingsGeneralTab = ({ attributes, setAttributes }) => { const { blockName, sliderAutoPlay, carouselAutoplayDelay, carouselSpeed, slideToScroll, carouselDirection, pauseOnHover, infiniteLoop, tabAndKeyNavigation, mouseWheelControl, freeScrollMode, reverseMultiRowDirection, marqueeDisplayStyle, } = attributes; if (blockName === "marquee") { return ( <> ); } return ( <> {sliderAutoPlay && ( )} {sliderAutoPlay && ( <> )} ); }; // Query Builder Tabs // Free plugin exposes only "Latest" ordering. Groups / Specific / Star-Rating // filtering, random order and drag-and-drop ordering are Pro-only (shown as // locked options that link to the upgrade page). export const QueryBuilderGeneralTab = ({ attributes, setAttributes }) => { const { limit, orderBy, order } = attributes; return ( <> ); }; // Card Design Tabs export const CardDesignGeneralTab = ({ attributes, setAttributes }) => { const { cardContents, cardAlignment, cardHoverEffect, cardHoverTransition } = attributes; // drag and drop functions. const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 5 }, }) ); const handleDragEnd = (event) => { const { active, over } = event; if (active && over && active.id !== over.id) { const oldIndex = cardContents.findIndex((i) => active.id === i.id); const newIndex = cardContents.findIndex((i) => over.id === i.id); setAttributes({ cardContents: arrayMove(cardContents, oldIndex, newIndex), }); } }; return ( <> {/* card contents */}
{cardContents?.map(({ id, name, is_active }, index) => ( { const updated = cardContents?.map((i) => { if (i.id === id) { return { ...i, is_active: newVal }; } return i; }); setAttributes({ cardContents: updated }); }} /> ))} {PRO_CARD_CONTENTS?.map((name) => ( ))}
{cardHoverEffect !== "none" && ( )} ); }; // Testimonial Content Tabs export const TestimonialContentGeneralTab = ({ attributes, setAttributes }) => { const { titleTag, titleLength, excerptLength, stripAllHTMLTags } = attributes; return ( <> {componentSectionHeader(__("Testimonial Title", "testimonial-free"))} {componentSectionHeader(__("Testimonial Text", "testimonial-free"))} ); }; // Star Rating Tabs export const StarRatingGeneralTab = ({ attributes, setAttributes }) => { const { ratingIconSet, ratingIconSize, ratingIconGap } = attributes; return ( <>
{__("Select Rating Icon Style", "testimonial-free")}
{RATING_ICON_STYLES.map((style) => { const isSelected = ratingIconSet?.active === style.active && ratingIconSet?.inactive === style.inactive; const isPro = style?.isPro ?? false; return ( ); })}
); }; // Reviewer Image Tabs export const ReviewerImageGeneralTab = ({ attributes, setAttributes }) => { const { imageResolution, aspectRatio, aspectRatioCustom, imageWidth, imageHeight, load2xInRetinaDisplay, reviewerFallbackImages, } = attributes; const isOriginalRatio = aspectRatio === "original"; return ( <> {aspectRatio === "custom" && ( )} {isOriginalRatio && ( )} ); }; // Reviewer Details Tabs export const ReviewerDetailsGeneralTab = ({ attributes, setAttributes }) => { const { nameHtmlTag } = attributes; return ( <> ); }; // Motion Effects Tabs export const MotionEffectsGeneralTab = () => { return ( <> ); }; export const NavigationArrowGeneralTab = ({ attributes, setAttributes }) => { const { navIconVisibleOnHover, navIconSize, navIconGap, navIconPosition, navIconName, navOffsetX, navOffsetY } = attributes; const deviceType = useDeviceType(); const onChangeNavPosition = (newVal) => { const x = "vertical_center" === newVal ? { value: -22, unit: "px" } : { value: 0, unit: "px" }; const y = "vertical_center" === newVal ? { value: 50, unit: "%" } : { value: -12, unit: "%" }; const updatedAttr = { navIconPosition: newVal, navOffsetX: { ...navOffsetX, device: { ...navOffsetX.device, [deviceType]: x?.value, }, unit: { ...navOffsetX.unit, [deviceType]: x?.unit, }, }, navOffsetY: { ...navOffsetY, device: { ...navOffsetY.device, [deviceType]: y?.value, }, unit: { ...navOffsetY.unit, [deviceType]: y?.unit, }, }, }; setAttributes(updatedAttr); }; return ( <>
Arrow Style
{ARROW_ICON_OPTIONS?.map(({ icon, value, isPro }, index) => ( { if (!isPro) { setAttributes({ navIconName: value }); } }} > {icon} ))}
{navIconPosition !== "vertical_center" && ( )} ); }; export const PaginationDotsGeneralTab = ({ attributes, setAttributes }) => { const { paginationStyle, paginationDotsWidth, paginationDotsHeight, paginationDotsSpaceBetween } = attributes; const device = useDeviceType(); const paginationSize = { stepper: { width: 30, height: 8, }, }; const paginationDotChangeHandler = (newValue) => { const height = paginationSize[newValue]?.height || 12; const width = paginationSize[newValue]?.width || 12; setAttributes({ paginationStyle: newValue, paginationDotsWidth: { ...paginationDotsWidth, device: { ...paginationDotsWidth.device, [device]: width, }, }, paginationDotsHeight: { ...paginationDotsHeight, device: { ...paginationDotsHeight.device, [device]: height, }, }, }); }; return ( <> ); };