We’re excited to announce that our customers can now purchase Amazon Business products directly in PerkUp! Our customers can now buy the products they love in just two simple steps.
It’s become clear that our customers love Amazon Business. In fact, Amazon Business accounts for over 30% of all our transactions to date, which begged the question:
How can we make it even easier for our customers to buy products they really want?
After giving it considerable thought, the answer was obvious. We needed to bring Amazon Business products directly into PerkUp, which is why we have partnered with Amazon Business. PerkUp customers in the US now have access to the entire Amazon Business catalogue along with Amazon Business Prime express shipping on qualified orders, directly in their PerkUp accounts!
We can’t wait to see how people start using this new feature. If you’re looking for a way to start sending your global team awesome spot rewards, we can help!
import { useEffect } from "react"
export default function CarouselFixer() {
useEffect(() => {
// Wait for CMS content to render
const init = () => {
// Find all horizontally scrollable containers inside CMS content
const contents = document.querySelectorAll(".framer-text, [class*='content'], [class*='Content']")
contents.forEach((content) => {
const scrollEls = content.querySelectorAll("ul, ol, div")
scrollEls.forEach((el) => {
const htmlEl = el as HTMLElement
const style = window.getComputedStyle(htmlEl)
// Target only elements that overflow horizontally (the carousel)
if (
style.overflowX === "scroll" ||
style.overflowX === "auto" ||
htmlEl.scrollWidth > htmlEl.clientWidth
) {
attachScrollBehavior(htmlEl)
}
})
})
}
const attachScrollBehavior = (el: HTMLElement) => {
// Prevent double-attaching
if (el.dataset.scrollFixed) return
el.dataset.scrollFixed = "true"
el.style.cursor = "grab"
el.style.userSelect = "none"
el.style.webkitOverflowScrolling = "touch"
el.style.scrollbarWidth = "none"
let startX = 0
let scrollStart = 0
let isDown = false
let dragged = false
const onMouseDown = (e: MouseEvent) => {
isDown = true
dragged = false
startX = e.clientX
scrollStart = el.scrollLeft
el.style.cursor = "grabbing"
}
const onMouseMove = (e: MouseEvent) => {
if (!isDown) return
const dx = e.clientX - startX
if (Math.abs(dx) > 5) dragged = true
el.scrollLeft = scrollStart - dx
}
const onMouseUp = () => {
isDown = false
el.style.cursor = "grab"
}
const onClickCapture = (e: MouseEvent) => {
if (dragged) {
e.preventDefault()
e.stopImmediatePropagation()
dragged = false
}
}
const onWheel = (e: WheelEvent) => {
if (Math.abs(e.deltaX) > 0) {
e.preventDefault()
el.scrollLeft += e.deltaX
}
}
el.addEventListener("mousedown", onMouseDown)
el.addEventListener("mousemove", onMouseMove)
el.addEventListener("mouseup", onMouseUp)
el.addEventListener("mouseleave", onMouseUp)
el.addEventListener("click", onClickCapture, true)
el.addEventListener("wheel", onWheel, { passive: false })
}
// Try immediately, then retry after delays to catch late CMS renders
init()
setTimeout(init, 500)
setTimeout(init, 1500)
}, [])
// Renders nothing — invisible helper
return null
}
More like this
From team swag to event kits, discover what’s trending across global companies
