Colissimo Pickup Widget React Component Integration

ColissimoPickupWidget.js

import React, { Component } from 'react';

class ColissimoWidget extends Component {
  componentDidMount() {
    this.loadScript('https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.js', () => {
      this.loadScript('https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js', () => {
        this.loadScript('https://ws.colissimo.fr/widget-colissimo/js/jquery.plugin.colissimo.min.js', this.initializeWidget);
      });
    });
    this.loadStyle('https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css');
  }

  loadScript = (src, callback) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => {
      if (callback) callback();
    };
    document.body.appendChild(script);
  }

  loadStyle = (href, callback) => {
    const link = document.createElement('link');
    link.href = href;
    link.rel = 'stylesheet';
    link.onload = () => {
      if (callback) callback();
    };
    document.body.appendChild(link);
  }

  initializeWidget = () => {
    const url_serveur = 'https://ws.colissimo.fr';
    const token = 'eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJiNWE1NGIxMzg0Y2U3ZDc3MDA4NGIyMWMzODY0NDRiMyIsImlhdCI6MTY5OTkwODU1OSwic3ViIjoid2lkZ2V0IiwiaXNzIjoiMzIyMzczIiwiZXhwIjoxNjk5OTEwMzU5fQ.pYSWV3rmfnZIT6CIpeUXPUGIkSd4dHnrFX2TIdvTrh8';

    window.jQuery('#monIdDeWidgetColissimo').frameColissimoOpen({
      "URLColissimo": url_serveur,
      "callBackFrame": this.maMethodeDeCallBack,
      "ceCountry": "FR",
      "ceAddress": "1 rue de rivoli",
      "ceZipCode": "75001",
      "ceTown": "Paris",
      "token": token
    });
  }

  maMethodeDeCallBack (point) {
    console.log('call back frame', point);
    window.jQuery('#monIdDeWidgetColissimo').frameColissimoClose();
  }

  componentWillUnmount() {
    // Perform any cleanup if necessary
  }

  render() {
    return (
      <div id="monIdDeWidgetColissimo"></div>
    );
  }
}

export default ColissimoWidget;