How to use @shopgate/engage - 10 common examples

export const buildShowScheduledParams = () => {
  if (!isBeta()) {
    return {};
  }

  let cachedTime = null;
  let { effectivityDates: { showScheduled } = {} } = getThemeSettings('product') || {};

  if (showScheduled === ALWAYS) {
    showScheduled = 'P1Y';
  } else if (showScheduled === NEVER) {
    showScheduled = 'PT0S';
    cachedTime = 60000; // 1 minute min effective precision
  }

  return {
    cachedTime,
    params: {

{/* This feature is currently in BETA testing.
          It should only be used for approved BETA Client Projects */}
          {isBeta() &&  }
        
        
      
    
    
  
);

return true;
    }

    const filteredValues = Object.keys(characteristics).filter(key => !!characteristics[key]);
    const selected = !!((filteredValues.length === variants.characteristics.length) && variantId);

    if (!selected) {
      const firstUnselected = this.findUnselectedCharacteristic();

      if (firstUnselected) {
        const ref = this.refsStore[firstUnselected.id];

        // Focus the item for screen readers and broadcast a related live message.
        ref.current.focus();
        const option = ref.current.innerText;
        broadcastLiveMessage('product.pick_option_first', {
          params: { option },
        });

        ref.current.scrollIntoView({ behavior: 'smooth' });
        this.setState({ highlight: firstUnselected.id });
      }
    }

    return selected;
  }

const engageWillLeave =
      prevProps.app.isVisible === true && this.props.app.isVisible === false;

    if (routeDidEnter || engageDidEnter) {
      // Sync the colors of the app bar when the route with the bar came visible.
      this.updateStatusBar();
    }

    if (engageWillLeave) {
      // Reset the status bar when Engage goes into the background.
      this.props.resetStatusBar();
    }

    if (prevProps.title !== this.props.title) {
      const { __ } = this.context.i18n();
      router.update(this.props.route.id, { title: __(this.props.title) });
    }
  }

const engageWillLeave =
      prevProps.app.isVisible === true && this.props.app.isVisible === false;

    if (routeDidEnter || engageDidEnter) {
      // Sync the colors of the app bar when the route with the bar came visible.
      this.updateStatusBar();
    }

    if (engageWillLeave) {
      // Reset the status bar when Engage goes into the background.
      this.props.resetStatusBar();
    }

    if (prevProps.title !== this.props.title) {
      const { __ } = this.context.i18n();
      router.update(this.props.route.id, { title: __(this.props.title) });
    }
  }

}

    if (this.props.setFocus && target) {
      // Set the focus to the first focusable element for screen readers.
      const focusable = target.querySelector('button:not([aria-hidden="true"]), [tabindex]:not([tabindex="-1"])');

      if (focusable) {
        focusable.focus();
      }
    }

    if (this.props.route.visible) {
      this.updateStatusBar();
      if (this.props.title) {
        const { __ } = this.context.i18n();
        router.update(this.props.route.id, { title: __(this.props.title) });
      }
    }
  }

const Translate = ({
  string,
  children,
  params,
  className,
  role,
  ...rest
}) => {
  if (typeof string !== 'string' || string.length === 0) {
    return string;
  }

  if (!i18n.ready) {
    return <span role="{role}">{string}</span>;
  }

  // When the input string is malformed, rather return the original string then raising an error.
  let formatted = string;

  try {
    // First replace every occurrence of a translation key with a separator.
    const separator = '__%S%__';
    const childrenArray = React.Children.toArray(children);

    const values = childrenArray.reduce((obj, child) =&gt; (child.props &amp;&amp; child.props.forKey ? {
      ...obj,
      [child.props.forKey]: separator,
    } : obj), { ...params });

export const enableRedirectHandler = () => {
  if (!isBeta()) {
    return;
  }

  /** Effectivity dates */
  const { effectivityDates: { accessExpired } = {} } = getThemeSettings('product') || {};
  if (accessExpired) {
    return;
  }

  const getProductEffectivityDates = makeGetProductEffectivityDates();

  redirects.set(ITEM_PATTERN, ({ action, getState }) => {
    const { params: { pathname }, route: { state: { productId } } } = action;

    const effectivityDates = getProductEffectivityDates(getState(), { productId });
    if (effectivityDates) {
      // Forbid redirect if endDate is expired
      if (effectivityDates.endDate
        && isAfter(new Date(), new Date(effectivityDates.endDate))) {
        return null;
      }

export const buildShowScheduledParams = () => {
  if (!isBeta()) {
    return {};
  }

  let cachedTime = null;
  let { effectivityDates: { showScheduled } = {} } = getThemeSettings('product') || {};

  if (showScheduled === ALWAYS) {
    showScheduled = 'P1Y';
  } else if (showScheduled === NEVER) {
    showScheduled = 'PT0S';
    cachedTime = 60000; // 1 minute min effective precision
  }

  return {
    cachedTime,
    params: {
      showScheduled,
    },
  };
};

if (!hasSupport) {
        return resolve(null);
      }

      const { params: { pathname } } = action;

      dispatch(grantCameraPermissions())
        .then((granted) => {
          resolve(granted ? pathname : null);
        });

      return true;
    }));

    // set formats for product images
    productImageFormats.set(PRODUCT_SLIDER_IMAGE_COLLECTION_KEY, PRODUCT_SLIDER_IMAGE_FORMATS);
    productImageFormats.set(GALLERY_SLIDER_IMAGE_COLLECTION_KEY, GALLERY_SLIDER_IMAGE_FORMATS);

    onWillPop(NavDrawer.close);

    /**
     * This feature is currently in BETA testing.
     * It should only be used for approved BETA Client Projects
     */
    enableRedirectHandler();

    /**
     * This feature is currently in BETA testing.
     * It should only be used for approved BETA Client Projects
     */
    setDefaultProductFetchParams();
  });