> ## Documentation Index
> Fetch the complete documentation index at: https://docs.compago.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Cómo reprogramar el próximo cobro
> Mueve la fecha del siguiente cobro de una suscripción.
export const SupportBox = () => ;
export const GuideImage = ({src, preview, alt, width, height, caption, variant = 'screen'}) => {
const [open, setOpen] = useState(false);
const [view, setView] = useState(null);
const opener = useRef(null);
const dialog = useRef(null);
const viewport = useRef(null);
const closeButton = useRef(null);
const fitScale = useRef(1);
const drag = useRef(null);
const long = height / width > 1.6;
const icon = (d, size = 18) => ;
const ZOOM_IN = 'M11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM21 21l-4.35-4.35M11 8v6M8 11h6';
const ZOOM_OUT = 'M11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM21 21l-4.35-4.35M8 11h6';
const FIT = 'M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2';
const DOWNLOAD = 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3';
const CLOSE = 'M18 6 6 18M6 6l12 12';
const clampView = next => {
const el = viewport.current;
if (!el) return next;
const w = width * next.scale;
const h = height * next.scale;
const keep = 96;
const x = w <= el.clientWidth ? (el.clientWidth - w) / 2 : Math.min(keep, Math.max(el.clientWidth - w - keep, next.x));
const y = h <= el.clientHeight ? (el.clientHeight - h) / 2 : Math.min(keep, Math.max(el.clientHeight - h - keep, next.y));
return {
scale: next.scale,
x,
y
};
};
const fit = () => {
const el = viewport.current;
if (!el) return;
const scale = long ? Math.min(1, el.clientWidth * 0.94 / width) : Math.min(1, el.clientWidth * 0.94 / width, el.clientHeight * 0.88 / height);
fitScale.current = scale;
setView(clampView({
scale,
x: (el.clientWidth - width * scale) / 2,
y: long ? 72 : (el.clientHeight - height * scale) / 2
}));
};
const zoomAt = (factor, cx, cy) => {
setView(current => {
const el = viewport.current;
if (!current || !el) return current;
const px = cx ?? el.clientWidth / 2;
const py = cy ?? el.clientHeight / 2;
const scale = Math.min(Math.max(fitScale.current * 0.5, current.scale * factor), Math.max(1.5, fitScale.current * 6));
const ratio = scale / current.scale;
return clampView({
scale,
x: px - (px - current.x) * ratio,
y: py - (py - current.y) * ratio
});
});
};
const panBy = (dx, dy) => setView(current => current && clampView({
...current,
x: current.x + dx,
y: current.y + dy
}));
const close = () => {
setOpen(false);
setView(null);
opener.current?.focus();
};
const show = event => {
opener.current = event.currentTarget;
setOpen(true);
};
const actions = useRef({});
actions.current = {
fit,
zoomAt,
panBy,
close
};
useEffect(() => {
const modal = dialog.current;
if (!open || !modal) return undefined;
if (!modal.open) modal.showModal();
const el = viewport.current;
actions.current.fit();
closeButton.current?.focus();
const onResize = () => actions.current.fit();
const onKey = event => {
const {zoomAt: zoom, panBy: pan} = actions.current;
if (event.key === '+' || event.key === '=') zoom(1.25); else if (event.key === '-' || event.key === '_') zoom(0.8); else if (event.key === '0') actions.current.fit(); else if (event.key === 'ArrowUp') pan(0, 120); else if (event.key === 'ArrowDown') pan(0, -120); else if (event.key === 'ArrowLeft') pan(120, 0); else if (event.key === 'ArrowRight') pan(-120, 0); else return;
event.preventDefault();
};
const onWheel = event => {
event.preventDefault();
const rect = el.getBoundingClientRect();
if (event.ctrlKey || event.metaKey) actions.current.zoomAt(Math.exp(-event.deltaY * 0.0022), event.clientX - rect.left, event.clientY - rect.top); else actions.current.panBy(-event.deltaX, -event.deltaY);
};
const root = document.documentElement;
const overflow = root.style.overflow;
root.style.overflow = 'hidden';
window.addEventListener('resize', onResize);
document.addEventListener('keydown', onKey);
el?.addEventListener('wheel', onWheel, {
passive: false
});
return () => {
root.style.overflow = overflow;
window.removeEventListener('resize', onResize);
document.removeEventListener('keydown', onKey);
el?.removeEventListener('wheel', onWheel);
if (modal.open) modal.close();
};
}, [open]);
const onPointerDown = event => {
if (event.button !== 0) return;
drag.current = {
x: event.clientX,
y: event.clientY,
travel: 0
};
event.currentTarget.setPointerCapture(event.pointerId);
};
const onPointerMove = event => {
const start = drag.current;
if (!start) return;
const dx = event.clientX - start.x;
const dy = event.clientY - start.y;
start.travel += Math.abs(dx) + Math.abs(dy);
start.x = event.clientX;
start.y = event.clientY;
panBy(dx, dy);
};
const onPointerUp = event => {
const start = drag.current;
drag.current = null;
if (!start || start.travel > 6 || !view) return;
const rect = viewport.current.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const inside = x >= view.x && x <= view.x + width * view.scale && y >= view.y && y <= view.y + height * view.scale;
if (!inside) close();
};
const onDoubleClick = event => {
const rect = viewport.current.getBoundingClientRect();
if (view && view.scale > fitScale.current * 1.4) fit(); else zoomAt(2.2, event.clientX - rect.left, event.clientY - rect.top);
};
const percent = view ? Math.round(view.scale / fitScale.current * 100) : 100;
const viewer = open && ;
if (variant === 'guide') {
return
{caption && {caption}}
{viewer}
;
}
return
{caption && {caption}}
{viewer}
;
};
export const GuideVideo = ({src, poster, title, duration, caption}) => {
const dialog = useRef(null);
const player = useRef(null);
const opener = useRef(null);
const resumeAt = useRef(0);
const pageOverflow = useRef('');
const icon = (d, size = 18, fill = false) => ;
const PLAY = 'M9 6.5 18.5 12 9 17.5z';
const MAXIMIZE = 'M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3';
const CLOSE = 'M18 6 6 18M6 6l12 12';
const open = event => {
const modal = dialog.current;
const video = player.current;
if (!modal || !video || modal.open) return;
opener.current = event.currentTarget;
pageOverflow.current = document.documentElement.style.overflow;
document.documentElement.style.overflow = 'hidden';
modal.showModal();
video.currentTime = resumeAt.current;
video.play().catch(() => {});
video.focus();
};
const onClose = () => {
const video = player.current;
if (video) {
resumeAt.current = video.ended ? 0 : video.currentTime;
video.pause();
}
document.documentElement.style.overflow = pageOverflow.current;
opener.current?.focus();
};
const close = () => {
if (dialog.current?.open) dialog.current.close();
};
const fullscreen = () => {
const video = player.current;
if (!video) return;
video.play().catch(() => {});
if (video.requestFullscreen) video.requestFullscreen().catch(() => {}); else if (video.webkitEnterFullscreen) video.webkitEnterFullscreen();
};
return
{caption && {caption}}
;
};
Si tu cliente te pide que le cobres otro día, por ejemplo cuando recibe su pago, mueve la fecha del próximo cobro. Desde esa fecha, los cobros siguientes se cuentan con el mismo periodo.
## Dónde está en la app
* En el menú de la izquierda, entra a **Suscripciones** y haz clic en la suscripción.
* Arriba a la derecha del detalle, haz clic en **⋮** (los tres puntos) y elige **Reprogramar próximo cobro**.
## Antes de empezar
* Pueden hacerlo todos los roles de un comercio: **Dueño**, **Administrador** y **Miembro**.
* La suscripción tiene que estar **Activa**, **Fallando** o **Pausada**.
* La nueva fecha tiene que ser a partir de mañana.
* Aquí solo cambias la fecha. Para cambiar el monto o el periodo, [edita la suscripción](/manual/suscripciones/editar-una-suscripcion).
## Paso a paso
En **Suscripciones**, abre la suscripción. Arriba a la derecha, haz clic en **⋮** (los tres puntos).
Se puede reprogramar el cobro de las suscripciones **Activa**, **Fallando** o **Pausada**.
En el menú, haz clic en **Reprogramar próximo cobro**.
En **Próximo cobro**, haz clic en el calendario y elige el nuevo día. Tiene que ser a partir de mañana.
También puedes escribir la fecha en el campo: día, mes y año.
La nueva fecha ya está en **Próximo cobro**, y el aviso te dice que desde ese día los cobros siguen con el mismo periodo. Haz clic en **Guardar**.
El **Próximo cargo** ya muestra la nueva fecha. Los cobros siguientes se cuentan a partir de ella, con el mismo periodo.
Para mover la fecha otra vez, repite estos pasos.
## Qué pasa después
* El siguiente cobro se hace en la nueva fecha, por el mismo monto y a la misma tarjeta.
* Los cobros que siguen se cuentan desde esa fecha. Por ejemplo, si la suscripción es mensual y la moviste al día 26, se cobra el 26 de cada mes.
* La fecha de inicio y los cobros que ya se hicieron no cambian.
## Preguntas frecuentes
Sí, a cualquier fecha a partir de mañana. No se puede elegir hoy ni una fecha pasada: en el calendario esos días aparecen en gris.
No. El cobro se hace por el mismo monto de siempre. Si también quieres cambiar el monto, te lo explicamos en [Editar una suscripción](/manual/suscripciones/editar-una-suscripcion).
No. Los cobros siguen cada semana, cada mes o cada año, como estaba. Para cambiar el periodo, [edita la suscripción](/manual/suscripciones/editar-una-suscripcion).
Sí. Mientras esté **Pausada** no se hace ningún cobro. Si la reanudas antes de la nueva fecha, el cobro se hace ese día. Te lo explicamos en [Pausar o reanudar](/manual/suscripciones/pausar-o-reanudar).
## Errores comunes
### No veo «Reprogramar próximo cobro» en el menú
La suscripción está **Cancelada** o **Completada**, y esas ya no tienen próximo cobro. Revisa su estado junto al título.
### «La nueva fecha debe ser a partir de mañana.»
Escribiste la fecha de hoy o una fecha pasada. Elige un día a partir de mañana y vuelve a hacer clic en **Guardar**.
### Hice clic en «Guardar» y no apareció «Próximo cobro reprogramado»
La fecha que elegiste es la misma que ya tenía, así que el diálogo solo se cierra. Elige otro día.
## Guía en una imagen
Todos los pasos en una sola imagen, para tenerla a mano o compartirla con tu equipo.
## Guías relacionadas
Tus suscripciones activas, pausadas o con cobros fallidos, y su detalle.
Cambia el monto, el periodo o el número de cobros.
Detén los cobros por un tiempo y retómalos cuando quieras.
Vuelve a intentar un cobro que la tarjeta de tu cliente rechazó.
## ¿Necesitas ayuda?