guillermodlpa

/**
 * A set of utilities to operate with money amounts with decimals
 *
 * A piece of advice: don't use this! Instead, just work with integer values ALWAYS.
 * Even doing the conversion to integer can cause issues (4.02 * 100 = 401.9999)
 * So it's better to just always work with integers in a JavaScript/TypeScript codebase.
 *
 * Cheers
 */

guillermodlpa

// From https://gist.github.com/stevendesu/2d52f7b5e1f1184af3b667c0b5e054b8

// To ensure cross-browser support even without a proper SubtleCrypto
// impelmentation (or without access to the impelmentation, as is the case with
// Chrome loaded over HTTP instead of HTTPS), this library can create SHA-256
// HMAC signatures using nothing but raw JavaScript

/* eslint-disable no-magic-numbers, id-length, no-param-reassign, new-cap */

// By giving internal functions names that we can mangle, future calls to

guillermodlpa

import { MutableRefObject, useEffect } from 'react';

const AUTO_PLAY_DELAY = 1500;
const PLAY_ERROR_NO_INTERACTION =
  "play() failed because the user didn't interact with the document first";

export default function useAutoplay(
  videoRef: MutableRefObject<HTMLVideoElement | HTMLAudioElement | undefined>,
  isActive: boolean,
) {

guillermodlpa

import useBreakpointValueWithDeviceType from '@/hooks/useBreakpointValueWithUADetection/useBreakpointValueWithDeviceType';
import { BoxProps } from '@chakra-ui/react';
import { useMemo } from 'react';

// Controlling Leftover Grid Items with Pseudo-selectors
// @see https://css-irl.info/controlling-leftover-grid-items/

function generateCenteredGridStyles(columnCount: number): BoxProps['sx'] {
  const itemStyles: Record<string, string | Record<string, string>> = {
    gridColumn: 'span 2',

guillermodlpa

type Components =
  | React.ElementType
  | [React.ElementType, { [key: string]: unknown }];

const Compose = ({
  components,
  children,
}: {
  components: Components[];
  children: JSX.Element;

guillermodlpa

export default function composeContextProviders(providers: React.ElementType[]) {
  return providers.reduce(
    (Prev, Curr) =>
      function ComposedProviderWrapper({ children }) {
        return (
          <Prev>
            <Curr>{children}</Curr>
          </Prev>
        );
      },

guillermodlpa

import { createContext, useContext, useState } from 'react';

class NoContextProviderError extends Error {
  constructor() {
    super('Context value was undefined');
  }
}

/**
 * Utility to create a context for a dialog, to reduce boilerplate

guillermodlpa

/**
 * Get the dimensions of an image file
 * Check the mime type before calling this function
 */
export default function getImageFileDimensions(
  imageFile: File,
): Promise<{ width: number; height: number }> {
  return new Promise((resolve, reject) => {
    if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
      reject(

guillermodlpa

import type { NextApiRequest, NextApiResponse } from 'next';

function replaceUrlsInHtmlPage(htmlPage: string, urls: string[], newUrl: string) {
  return urls.reduce((memo, url) => memo.replace(new RegExp(url, 'g'), newUrl), htmlPage);
}

/**
 * This endpoint is used as a fallback for any route that is not handled by Next.js.
 * This way, we can mix a marketing site hosted in WordPress and the app in the same domain
 */

guillermodlpa

/**
 * Inspired by https://codepen.io/oxleberry/pen/BOEBaB
 *
 * With added support for horizontal scrolling, scrolling the window, and linear easing
 *
 * native scrollTo or scrollIntoView conflict with each other if there are different horizontal and vertical scrolls happening
 */

// Easing equations, http://www.gizma.com/easing/
function easeOutCubic(t: number, b: number, c: number, d: number) {