reactour
reactour copied to clipboard
Published
20 hours ago •
elrumordelaluz
elrumordelaluz
Popover hidden on smaller devices -Next App Router
Description
On smaller devices, specifically, if a device has a width below roughly 360px or below, the popover becomes hidden if it's not small enough.
I'm using the new App Router in NextJS for added context.
Device Info
- Device: I-Phone 5/SE IOS 10.3.1
Screenshot of Issue
Code for Tour Provider
"use client";
// Next Imports
import { useRouter } from "next/navigation";
// React
import React, { useState } from "react";
// MUI hook
import { useMediaQuery } from "@mui/material";
// React Tour
import { TourProvider } from "@reactour/tour";
// Auth
import { useSession } from "next-auth/react";
// Context
import { useUserAppTourContext } from "../../contexts/userAppTourContext";
export default function UserAppTour({ children, mobileOpen, setMobileOpen }) {
// React Tour config
const [step, setStep] = useState(0);
// Test if the device is a mobile
const isMobile = useMediaQuery("(max-width:1280px)");
// Tour Steps
const reactTourSteps = [
// Step 0 -/
{
selector: isMobile
? "[data-tour='home_page_mobile_link']"
: "[data-tour='home_page_link']",
content: "Click the home button to return to the home page.",
},
// Step 1
{
selector: "[data-tour='enter_reg_banner']",
content:
"Search for your vehicle by clicking ENTER REG. You will then be directed to enter the vehicle's registration number.",
},
// Step 2 - /vrm
{
selector: "[data-tour='vehicle_registration_input']",
content:
"Enter your vehicle registration in the ENTER REG input. After entering your registration, either press enter on your keyboard or click the submit button.",
},
// Step 3 - /
{
selector: "[data-tour='search_box']",
content:
"Once your vehicle has been selected, you can search for a part by using the search bar.",
styles: isMobile
? {
popover: (base) => ({
...base,
"--reactour-accent": "#ef5a3d",
borderRadius: borderRadius,
marginRight: "2rem",
}),
maskArea: (base) => ({ ...base, rx: borderRadius }),
}
: {
popover: (base) => ({
...base,
"--reactour-accent": "#ef5a3d",
borderRadius: borderRadius,
marginRight: "2rem",
}),
maskArea: (base) => ({ ...base, rx: borderRadius }),
},
},
// Step 4
{
selector: "[data-tour='service_kit_banner']",
content:
"Click the service kit banner to quickly generate a service kit for your selected vehicle.",
},
// Step 5
{
selector: "[data-tour='brake_kit_banner']",
content:
"Click the brake kit banner to quickly generate a brake kit for your selected vehicle.",
},
// Step 6
{
selector: "[data-tour='popular_categories_section']",
content:
"You can also select a part by using our FEATURED part section. If you want to view all of our categories, click the ALL CATEGORIES button.",
},
// Step 7 - /parts/Air%2520Filter
{
selector: "[data-tour='part_item_selection']",
content:
"We offer a range of prices for different brands or parts. Choose whichever brand you prefer.",
},
// Step 8
{
selector: "[data-tour='part_filter_button']",
content:
"Click the filter button to open up a menu where you can filter the parts by brand or quality.",
},
// Step 9
{
selector: "[data-tour='part_basket_button']",
content:
"Once you've selected your part, click the ADD TO BASKET button to add it to your basket.",
},
// Step 10 - /
{
selector: "[data-tour='vrm_page_link']",
content:
"Click the vehicle button to view your vehicle history or find a new vehicle.",
},
// Step 11 - /
{
selector: isMobile
? "[data-tour='order_page_mobile_link']"
: "[data-tour='order_page_link']",
content:
"Click the orders button to view your previous orders. You can search by document number or date range for all orders/credits.",
},
// Step 12
{
selector: isMobile
? "[data-tour='basket_page_mobile_link']"
: "[data-tour='basket_page_link']",
content:
"Click the basket button to view your basket. Here you can amend items already added to the basket or search new items.",
},
// Step 13
{
selector: "[data-tour='feedback_page_link']",
content:
"Click the feedback button to view the feedback page. Here you can let us know your thoughts on the app experience.",
},
// Step 14
{
selector: "[data-tour='account_page_link']",
content:
"Click the account button to view your account page. Here you can view your account details and change your password etc.",
},
// Step 15
{
selector: "[data-tour='settings_page_link']",
content:
"Click the settings button to view the settings page. Here you can change various app settings like, whether to view line codes and toggle VAT on or off.",
},
// Step 16
{
selector: "[data-tour='sign_out_link']",
content: "Click the sign out button to sign out of the app.",
},
];
// Context
const { turnUserAppIntroOff } = useUserAppTourContext();
// Set up router
const router = useRouter();
// Set up translation state
const [translateX, setTranslateX] = useState(false);
const [translateY, setTranslateY] = useState(false);
const setCurrentStep = (step) => {
// You need to add route changes before and after route changes
// This is to allow users to go back and forth between pages
switch (step) {
case 0:
router.push("/");
turnUserAppIntroOff();
break;
case 1:
router.push("/");
break;
case 2:
router.push("/vrm");
break;
case 3:
router.push("/");
break;
case 4:
break;
case 6:
router.push("/");
break;
case 7:
router.push("/parts/Air%2520Filter");
break;
case 9:
router.push("/parts/Air%2520Filter");
break;
case 10:
if (isMobile) {
router.push("/vrm");
setMobileOpen(!mobileOpen);
}
router.push("/");
break;
default:
break;
}
setStep(step);
};
// Return a fragment if there is no current user
const { data: session } = useSession();
const isLoggedIn = session?.user;
const appTourEnabled = session?.user?.hasUserTourEnabled;
// TODO: add appTourEnabled check back
if (!isLoggedIn) {
return <>{children}</>;
}
// Styling
const borderRadius = 10;
return (
<TourProvider
className="w-72 sm:w-full ml-8 my-4"
currentStep={step}
showDots={false}
disableDotsNavigation
scrollSmooth
setCurrentStep={setCurrentStep}
steps={reactTourSteps}
styles={{
popover: (base) => ({
...base,
"--reactour-accent": "#ef5a3d",
borderRadius: borderRadius,
marginRight: "2rem",
transform: "translate(0px, 59px)",
}),
maskArea: (base) => ({ ...base, rx: borderRadius }),
}}>
{children}
</TourProvider>
);
}
What I've Tried
I've tried changing the translation in both the TourProvider and the Current Step (This being the ideal for what I want to acheive). But the translation is not changing.
How do I stop the popover from going outside of the screen? If that's not possible, how do I affect the translation of the popover?
Hi @GeorgeDMFincher, thanks for open the Issue.
Mind creating a minimal reproduction in a sandbox with the code you are sharing in order to allow to play arounf? Thanks!
@elrumordelaluz try this link for code sandbox.
Also, link to a repo that will demonstrate the behavior at 320 px width if you'd prefer to fork that and work from there 👍
Start the tour up by clicking the button at the top of the page.
I know this isn't a recreation of the original, but it's from my company's source code, but I believe this is enough to demonstrate the issue.
Also this is my personal GitHub account.
