Category: javascript

I want to make it so my cursor is displayed as “move” when the user hovers over the background of my EChart (not only the series). I tried using CSS, but nothing changed:

#chart-container {
    cursor: move;
}

Code Link: here

So, on this given webpage I am doing just repeating data entry task. And I thought to use JavaScript to make things easier.

Panel I wanted to automate

When I wrote the code, it just doesn’t let me do anything. Like I can’t use any event triggers, not even any tedious functions. Even I can’t access the input fields until unless I go into developer tools and specifically select ‘about:srcdoc’ and only then it finds the elements it needs to.

I have never faced this issue. How can i solve this from client side to do what i was doing.

The code i was running is below:

  // Function to handle the onchange event
  function handleChange(event) {
      // Subtract 50,000 from txtListingPriceLow
document.querySelector('input[id="txtListingPriceLow"]').value = (
  (parseFloat(document.querySelector('input[id="txtListingPriceLow"]').value.replace(/[^0-9.-]/g, '')) - 50000)
).toFixed(2);
  }

  // Add event listener to the input element
  var inputElement = document.querySelector('input[id="txtListingPriceLow"]');
  if (inputElement) {
      inputElement.addEventListener('change', handleChange);
  } else {
      console.log('Input element not found');
  }

It throws the error like:

Blocked script execution in ‘about:srcdoc’ because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set.

I have a vertical menu where people can switch between pages. When I’m on the main screen the icons are:

However, when I click on the ‘soort’ page the icon of partijen changes to:

This is my first time working with html, so I have no idea where to look. The sidebar is in a shared view. The icons are from https://iconify.design/ but they don’t even have this design on their website.

This is the code for the sidebar:

@{
    TempData.Keep();
    string? currentPage = ViewContext.HttpContext.Request.Path;
    var userRole = ViewBag.RolId;
}

<!-- Menu -->
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">

  <div
    class='app-brand demo @((@ViewData["navbarFull"] != null && Convert.ToBoolean(@ViewData["navbarFull"])) ? "d-xl-none" : "")'>
    <a asp-controller="Dashboards" asp-action="Index" class="app-brand-link">
      <span class="app-brand-logo demo">
        <img src="~/img/illustrations/blaadje.png" alt="leaf" style="max-width:25px"/>

      </span>
      <span class="app-brand-text demo menu-text fw-bold ms-2">@TempData.Peek("appName")</span>
    </a>

    <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">
      <i class="bx bx-chevron-left bx-sm align-middle"></i>
    </a>
  </div>

  <div class="menu-inner-shadow"></div>

  @* ! Full version menu-items *@
  <ul class="menu-inner py-1">
    <!-- Dashboard -->
    <li class='menu-item@(currentPage == "/Dashboard/Index" ? " active" : "")'>
        <a asp-controller="Dashboard" asp-action="Index" class="menu-link">
            <i class="menu-icon tf-icons bx bx-home-circle"></i>
            <div>Dashboard</div>
        </a>
    </li>
    <!-- Partijen -->
    <li class='menu-item@(currentPage == "/Partij/Index" ? " active" : "")'>
        <a asp-controller="Partij" asp-action="Index" class="menu-link">
            <i class="menu-icon tf-icons bx bx-leaf"></i>
            <div>Partijen</div>
        </a>
    </li>
    <!-- Soorten-->
        <li class='menu-item@(currentPage == "/Soort/Index" ? " active" : "")'>
            <a asp-controller="Soort" asp-action="Index" class="menu-link">
                <i class=" menu-icon tf-icons bx bxs-color-fill"></i>
                <div>Soort</div>
            </a>
        </li>
  </ul>

</aside>

Edit: The inspect when being on the ‘Soort’ space shows this:

Can anyone give me a hint or a clue about where or how this went go wrong?

I want to flip the card every time the content of my box changes i.e after every second or minute or hour or day passes.

I have tried applying transform and rotate properties directly to boxes but it is not working as it causes my text within the box to rotate 180 degrees rather than flipping the card.

.container {
  background-color: #211D2E;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#midsec {
  display: grid;
  position: absolute;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 3fr 1fr;
  top: 104px;
  width: 131vh;
  height: 52%;
  margin-left: auto;
  margin-right: auto;
  gap: 20px;
}

.container p {
  color: #FFFEFF;
  font-family: hat;
  font-weight: 700;
  font-size: xx-large;
  letter-spacing: 2px;
  position: relative;
  display: grid;
  grid-column-start: 2;
  grid-column-end: 4;
  align-items: center;
  justify-content: center;
}

.container span {
  font-family: hat;
  color: hsl(237, 18%, 59%);
}

#stars {
  margin-left: 5%;
  max-width: 73%;
}

#hills {
  max-width: 100%;
  height: 34vh;
  margin-top: 5%;
}

.top-box {
  width: 100%;
  display: grid;
  background-color: #34364F;
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  font-size: 21vh;
  color: #FA5D86 !important;
  letter-spacing: 3px;
}

.name {
  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 11px;
}

<div class="container">
  <img src="images/bg-stars.svg" alt="none" id="stars">
  <div id="midsec">
    <p>We're launching soon</p>
    <span class="name" style="grid-row: 3; grid-column: 1;">Days</span>
    <span class="name" style=" grid-row: 3; grid-column: 2;">Hours</span>
    <span class="name" style=" grid-row: 3; grid-column: 3;">Minutes</span>
    <span class="name" style=" grid-row: 3; grid-column: 4;">Seconds</span>
    <span class="top-box" id="days" style="grid-column: 1;"> </span>
    <span class="top-box" id="hours" style="grid-column: 2;"></span>
    <span class="top-box" id="mins" style="grid-column: 3;"></span>
    <span class="top-box" id="seconds" style="grid-column: 4;"></span>
  </div>
  <img src="images/pattern-hills.svg" alt="none" id="hills">
</div>

I need to make the button clickable to a link. I’m guessing I need to adjust the javascript itself ? or is there a simple method to make it so when I click the button it actually goes to a url ?

Below is the code i used in the CSS file and the actual code on the page.

Currently when I click the button, NOTHING happens… I have tried adding the normal to the front of the button but nothing happens… i’m guessing because the CSS and javascript are having the button “slide” so my best guess is i need to add something to the script or css ?

Here is a GIF of what happens
GIF of Button

CSS :

    button{
    background-color: #EC7C28;
  color:#F6F8FF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    font-size: 25px;
    height: 10px;
}
.slider{
    position: absolute;
    top: -2px;
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 30px;
    pointer-events: none;
    transition: 0.5s cubic-bezier(0.50 , -0.600 , 0.200 , 1.6);
   

HTML CODE:

<!-- custom button code -->
    <button type="button" class="button">
        <div class="slider">
            <span class="span1">Getting Started</span>
            <span class="span2">Developer Onboarding Course</span>
        </div>
    </button>
    <script>
        let button = document.querySelector(".button");
        let slider = document.querySelector(".slider");
        let span1 = document.querySelector(".span1");
        let span2 = document.querySelector(".span2");
        button.style.width = span1.clientWidth + "px";
        button.style.height = span1.clientHeight + "px";
        button.onmouseover = function() {
            slider.style.top = "-" + span1.clientHeight + "px";
        }
        button.onmouseout = function() {
            slider.style.top = "0px";
        }
    </script>
    <!-- end custom button code -->

I am using javascript and puppeteer to scrape info on a site that seems to be made in react. There is a dropdown that contains some options and the trigger is a button element containing a span text. When I trigger the dropdown, only some existing tags change some attributes, but nothing is added in the html code that might represent the actual dropdown options.

I tried react dev tools and I am able to see where the dropdown and the items are. I can see a hierarchy like this: Primitive.div > Select.Item > SelectItem > .... . Select.Item contains the text and numerical value of the option in the dropdown, while SelectItem contains a class name. I tried to search dropdown options by class name and I am able to see each option’s text, but when I try to implement a click event on the desired element it won’t work. Here is the code:

Here is the html code of the button trigger:

<button class="rt-reset rt-SelectTriggercustom-select-trigger" type="button" role="combobox" aria-controls="radix-:r0:" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed">
     <span class="rt-SelectTriggerInner">
        <span style="pointer-events: none;">Option0</span>
      </span>
</button>

Here is the code I am using to get the options that appear when clicking the button:

    await page.waitForSelector('.custom-select-trigger', { timeout: 60000 });
    
    await page.click('.custom-select-trigger');

    
    const desiredOption = 'Option1';
    const optionClicked = await page.evaluate((desiredOption) => {
        //rt-SelectItem is the class name of each dropdown option
        const options = Array.from(document.querySelectorAll('.rt-SelectItem'));
        const option = options.find(opt => opt.textContent.trim() === desiredOption);
        if (option) {
            const eventClick = new MouseEvent('click', { bubbles: true});
            option.dispatchEvent(eventClick);
            return `Option with text ${desiredOptionText} clicked.`;
        } else {
            return `Option with text ${desiredOptionText} not found.`;
        }
    }, desiredOptionText);

    console.log(optionClicked);

This code finds the desired option correctly and it returns “Option with text Option1 clicked” but it doesn’t actually click the option. What am I doing wrong?

I have two payloads on giving me success response and also give me label pdf url and in another payload i am getting internal server error

this is both payload :

success payload :

{
    "accountNumber": {
        "value": "ACCOUNT_NUMBER"
    },
    "labelResponseOptions": "URL_ONLY",
    "requestedShipment": {
        "blockInsightVisibility": false,
        "labelSpecification": {
            "imageType": "PDF",
            "labelStockType": "PAPER_85X11_TOP_HALF_LABEL"
        },
        "packagingType": "YOUR_PACKAGING",
        "pickupType": "DROPOFF_AT_FEDEX_LOCATION",
        "recipients": [
            {
                "address": {
                    "city": "DUBAI",
                    "countryCode": "AE",
                    "postalCode": "00000",
                    "stateOrProvinceCode": "DU",
                    "streetLines": [
                        "RECIPIENT STREET LINE 1",
                        "RECIPIENT STREET LINE 2"
                    ]
                },
                "contact": {
                    "companyName": "Recipient Company Name",
                    "personName": "RECIPIENT NAME",
                    "phoneNumber": 1234567890
                }
            }
        ],
        "requestedPackageLineItems": [
            {
                "declaredValue": {
                    "amount": 100,
                    "currency": "DHS"
                },
                "itemDescriptionForClearance": "Item description for clearance",
                "weight": {
                    "units": "KG",
                    "value": 10
                }
            }
        ],
        "serviceType": "STANDARD_OVERNIGHT",
        "shipDatestamp": "2024-03-07",
        "shipper": {
            "address": {
                "city": "SHARJAH",
                "countryCode": "AE",
                "postalCode": "00000",
                "stateOrProvinceCode": "SH",
                "streetLines": [
                    "SHIPPER STREET LINE 1"
                ]
            },
            "contact": {
                "companyName": "Shipper Company Name",
                "personName": "SHIPPER NAME",
                "phoneNumber": 1234567890
            }
        },
        "shippingChargesPayment": {
            "paymentType": "SENDER"
        }
    }
}

Error payload :

{
    "accountNumber": {
        "value": "ACCOUNT_NUMBER"
    },
    "labelResponseOptions": "URL_ONLY",
    "requestedShipment": {
        "blockInsightVisibility": false,
        "labelSpecification": {
            "imageType": "PDF",
            "labelStockType": "PAPER_85X11_TOP_HALF_LABEL"
        },
        "packagingType": "YOUR_PACKAGING",
        "pickupType": "DROPOFF_AT_FEDEX_LOCATION",
        "recipients": [
            {
                "address": {
                    "city": "SHARJAH",
                    "countryCode": "AE",
                    "postalCode": "00000",
                    "stateOrProvinceCode": "SH",
                    "streetLines": [
                        "street lines"
                    ]
                },
                "contact": {
                    "companyName": "company",
                    "personName": "recipient",
                    "phoneNumber": 1234567890
                }
            }
        ],
        "requestedPackageLineItems": [
            {
                "declaredValue": {
                    "amount": 100,
                    "currency": "DHS"
                },
                "itemDescriptionForClearance": "Camera",
                "weight": {
                    "units": "KG",
                    "value": 10
                }
            }
        ],
        "serviceType": "STANDARD_OVERNIGHT",
        "shipDatestamp": "2024-08-12",
        "shipper": {
            "address": {
                "city": "DUBAI",
                "countryCode": "AE",
                "postalCode": "00000",
                "stateOrProvinceCode": "DU",
                "streetLines": [
                    "street lines"
                ]
            },
            "contact": {
                "companyName": "company",
                "personName": "Shipper",
                "phoneNumber": 1234567890
            }
        },
        "shippingChargesPayment": {
            "paymentType": "SENDER"
        }
    }
}

this is endpoint /v1/shipments

my techstack is :

NextJS with Typescript in backend made using .net APIs.

(note: i use backend for calling fedex apis)

I have an array of objects

const Data = [
  {first_name: 'Ammy', city_name: 'LA', age: 22, designation: 'officer'},
  {first_name: 'Dave', city_name: 'Paris', age: 23, designation: 'engineer'},
  {first_name: 'Cindy', city_name: 'Tokyo', age: 32, designation: 'influencer'},
  {first_name: 'Barn', city_name: 'sydney', age: 34, designation: 'lawyer'},
  {first_name: 'Yolanda', city_name: 'Seoul', age: 32, designation: 'chef'},
  {first_name: 'Mike', city_name: 'London', age: 42, designation: 'bartender'},
  {first_name: 'Olivia', city_name: 'LA', age: 34, designation: 'officer'}
]

I also have an object containing filters

const Filters = {
  first_name: ['Ammy', 'Dave', 'Mike'],
  city_name: ['LA'],
  age: [22, 34]
}

I have to filter the data so that all the filters are applied and it should be an and condition. For the above Data and Filters only the row containing Ammy should be displayed. The challenging part is that the filters can have only one key or all keys. Filters can be just { first_name: ['Dave']}

I tried writing some code but it will not apply all the filters

const newData = []; 
Object.entries(Filters).map(([filter, Values]) => {
  const filteredData = Data.filter(item => {
    if (Values.find( value => value === item[filter])) {
      newData.push(item); 
    } 
  });  
}) 

I have a playwright test that opens up a signup page, fills up some fields, solves recaptcha (test mode) and then submits the form which redirects it to a success page.

The same test run fine in headed / UI mode but in case of headless, it gives error which doesn’t make sense. I have read that headless tests run faster than headed but I have tried adding wait and also increasing the timeout as well but that didn’t make any difference. Here is my test:

const formInputs = [{
  name: 'name',
  type: 'input',
  value: "Tester Doe"
}, {
  name: 'email',
  value: `test.${Date.now().toString(24)}@stakater.com`,
  type: "input"
}, {
  name: 'phone',
  type: 'input',
  value: "111111111"
}, {
  name: 'companyName',
  type: 'input',
  value: `Tester${Date.now().toString(24)}`
}, {
  name: 'number',
  type: "input",
  value: "4242424242424242",
  stripe: true
}, {
  name: 'expiry',
  type: 'input',
  value: "1250",
  stripe: true
}, {
  name: "cvc",
  type: 'input',
  value: "123",
  stripe: true
}, {
  name: "country",
  type: 'select',
  value: "Sweden",
  stripe: true
}]

test('should sign up user', async ({ page, context }) => {

    await page.goto(`${process.env.APP_BASE_URL}/#/signup`);

    // Wait for the Payment Element iframe to be available
    const stripeIframe = await page.waitForSelector("iframe");
    const stripeFrame = await stripeIframe.contentFrame();

    // fill input fields
    for (const input of formInputs) {
      if (input.stripe) {
        if (input.type === "select") {
          await stripeFrame.locator(`${input.type}[name="${input.name}"]`).selectOption(input.value)
        } else {
          await stripeFrame.locator(`${input.type}[name="${input.name}"]`).fill(input.value)
        }
      } else {
        await page.locator(`${input.type}[name="${input.name}"]`).fill(input.value);
      }
    }

    // Wait for the Recaptcha Element iframe to be available
    const recaptchaIframe = await page.waitForSelector("[title=reCAPTCHA]");
    const recaptchaFrame = await recaptchaIframe.contentFrame();

    // solve captcha
    expect(recaptchaFrame).toBeTruthy();

    console.log('reCAPTCHA iframe found');
    await recaptchaFrame.locator('#recaptcha-anchor').click();

    // await page.waitForLoadState('domcontentloaded');

    console.log('Clicked on reCAPTCHA checkbox');

    // Wait for the reCAPTCHA to be solved
    await expect(recaptchaFrame.locator('.recaptcha-checkbox-checked')).toBeVisible({ timeout: 10000 });

    console.log('reCAPTCHA solved');

    await page.locator('button[type="submit"]').click()
    // await page.waitForLoadState('networkidle'); // tried this but didn't work
    await expect(page.getByText(`Signup successful, an email confirmation have been sent to`)).toBeVisible({ timeout: 10000 })

 });

The error that comes in headless mode is below:

Error: Timed out 10000ms waiting for expect(locator).toBeVisible()

Locator: getByText('Signup successful, an email confirmation have been sent to')
Expected: visible
Received: <element(s) not found>
Call log:
  - expect.toBeVisible with timeout 10000ms
  - waiting for getByText('Signup successful, an email confirmation have been sent to')


  198 |     await page.locator('button[type="submit"]').click()
  199 |     // await page.waitForLoadState('networkidle');
> 200 |     await expect(page.getByText(`Signup successful, an email confirmation have been sent to`)).toBeVisible({ timeout: 10000 })
      |                                                                                                ^

Does anyone have any pointers as to what might be the issue?

import { items } from './store.js';

document.addEventListener("DOMContentLoaded", function() {

    const objects = [
        nuits,
        blanches,
        bleumarines,
        verts,
        roses,
        natures,
        vitragenoirs,
        oceans,
        carrotes,
        oranges
    ];

    objects.forEach((Object) => {
        Object.addEventListener('click', (event) => {
            event.stopPropagation();
            const id = Object.id;
            localStorage.setItem('selectedItem', id);
        });

        span.addEventListener('click', (event) => {
            window.open("store.html", "_top");
        })

    });
});

I have this code below:

setInterval(function(){
                $.ajax({
                    url: "{{ route('logout_checker')}}",
                    type: "GET",
                    success: function(data){
                        if( data == 0 ){
                            location.reload();
                        }
                    }
                });
            }, 1000);

My problem is that it will auto-close the datetime picker (https://nehakadam.github.io/DateTimePicker/)

the picker will pop up and then close so you can’t select anything.

is there a better way of handling the ajax request since I’m using that to check if there is still an active session and if there’s none it will reload the page so it will go to the login page.

If I remove the ajax request the datetime picker works normally. it’s only when the ajax request is present inside the setInterval that the problem occurs.

I’m working on a booking widget using react-day-picker in a React application. I need to disable dates that are already booked so users cannot select them. I’ve fetched the booked dates from my backend, but I’m having trouble disabling these dates in the calendar.

The DayPicker should disable already booked dates and past dates, but it’s not working as expected, since i can select all future dates

Error Message:
N/A

Environment:

React: 17.0.2
react-day-picker: 8.0.0
axios: 0.21.1

How can I ensure the calendar correctly disables unavailable dates and handles date selection accurately?

Here’s my current component:

import { useContext, useEffect, useState } from "react";
import { differenceInCalendarDays, isSameDay } from "date-fns";
import axios from "axios";
import { Navigate, useParams } from "react-router-dom";
import { UserContext } from "../UserContext";
import { DayPicker } from "react-day-picker";
import "react-day-picker/dist/style.css";

function BookingWidget({ place }) {
  const [checkIn, setCheckIn] = useState("");
  const [checkOut, setCheckOut] = useState("");
  const [numberGuests, setNumberGuests] = useState(1);
  const [name, setName] = useState("");
  const [mobile, setMobile] = useState("");
  const [redirect, setRedirect] = useState("");
  const { user } = useContext(UserContext);
  const { id } = useParams();
  const [alreadyBooked, setAlreadyBooked] = useState([]);

  useEffect(() => {
    if (user) {
      setName(user.name);
    }
    axios.get("/booking/" + id).then((response) => {
      const bookings = response.data;
      const bookedDates = [];
      for (let booking of bookings) {
        const start = new Date(booking.checkIn);
        const end = new Date(booking.checkOut);
        for (let date = start; date <= end; date.setDate(date.getDate() + 1)) {
          bookedDates.push(new Date(date));
        }
      }
      setAlreadyBooked(bookedDates);
    });
  }, [user, id]);

  let numberOfNights = 0;
  if (checkIn && checkOut) {
    numberOfNights = differenceInCalendarDays(
      new Date(checkOut),
      new Date(checkIn)
    );
  }

  async function bookThisPlace() {
    const response = await axios.post("/bookings", {
      checkIn,
      checkOut,
      numberGuests,
      name,
      mobile,
      price: numberOfNights * place.price,
      place: place._id,
    });
    const bookingId = response.data._id;
    setRedirect(`/account/bookings/${bookingId}`);
  }

  const isPastDay = (day) => {
    return day < new Date();
  };

  const isBookedDay = (day) => {
    return alreadyBooked.some(bookedDay => isSameDay(day, bookedDay));
  };

  const disabledDays = [
    { before: new Date() },  // Disable past days
    ...alreadyBooked.map(date => ({ date })) // Disable already booked days
  ];

  if (redirect) {
    return <Navigate to={redirect} />;
  }

  return (
    <div className="bg-white shadow p-4 rounded-2xl">
      <div className="text-2xl text-center mb-3">
        <b>Price: {place.price} €/night</b>
      </div>
      <div className="border mt-4 rounded-2xl">
        <div className="flex">
          <div className="py-3 px-4">
            <label>Check-in date: </label>
            <DayPicker
              mode="single"
              selected={checkIn ? new Date(checkIn) : undefined}
              onSelect={setCheckIn}
              disabled={disabledDays}
            />
          </div>
          <div className="py-3 px-4 border-l">
            <label>Check-out date: </label>
            <DayPicker
              mode="single"
              selected={checkOut ? new Date(checkOut) : undefined}
              onSelect={setCheckOut}
              disabled={disabledDays}
            />
          </div>
        </div>
        <div className="py-3 px-4 border-t">
          <label>Guests: </label>
          <input
            type="number"
            value={numberGuests}
            onChange={(ev) => setNumberGuests(ev.target.value)}
          />
        </div>
        {numberOfNights > 0 && (
          <div className="py-3 px-4 border-t">
            <label>Your name: </label>
            <input
              type="text"
              value={name}
              onChange={(ev) => setName(ev.target.value)}
            />
            <label>Phone: </label>
            <input
              type="tel"
              value={mobile}
              onChange={(ev) => setMobile(ev.target.value)}
            />
          </div>
        )}
      </div>

      <button onClick={bookThisPlace} className="primary rounded-2xl mt-4">
        Book now{" "}
        {numberOfNights > 0 && (
          <span>{numberOfNights * place.price} €</span>
        )}
      </button>
    </div>
  );
}

export default BookingWidget;

´´´

On wordpress with Sage 9 theme, enqueueing the script as follows

wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=' . $_ENV['GOOGLE_MAPS_API'] . '&loading=async&callback=initMap&libraries=marker,places&v=beta', [], null, true);

and creating a map like this

function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 34, lng: 150 },
        zoom: 8,
    });
}

On refreshing the page I get this error in console

Uncaught (in promise) InvalidValueError

without any additional hint.

Landing on the page I can load the map.
I cannot trace back to the problem.

How can I debug this?

I’m working on setting up the server now. I want to make it possible to edit my form. With the usual functionality, everything works fine, when you just need to add an address, POSTs are sent and the data is updated. But when it comes to changing the data that I previously passed to initialData, problems begin. onSubmit simply refuses to compile, although I checked the arrival of data 100 times and initialData passes all the data for initialization.

const AddPointMap = ({ isOpen, onClose, onSubmitAddress, center, type, typeOfButton, initialData }) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [loadError, setLoadError] = useState(null);
  const [marker, setMarker] = useState(null);
  const [capacityValue, setCapacityValue] = useState('');

  const loader = new Loader({
    apiKey: GOOGLE_MAPS_API_KEY ?? '',
    version: 'weekly',
    libraries,
    id: 'google-map-script',
  });

  const { register, handleSubmit, setValue, control, formState: { errors }, reset } = useForm();
  const [selectedValue, setSelectedValue] = useState(null);

  useEffect(() => {
    if (initialData) {
      console.log('Initial Data:', initialData);
      setValue('name', initialData.Name || '');
      setValue('comment', initialData.Comment || '');
      setValue('primaryFirstName', initialData.PrimaryFirstName || '');
      setValue('primaryLastName', initialData.PrimaryLastName || '');
      setValue('primaryPhonNumber', initialData.PrimaryPhonNumber || '');
      setValue('capacity', initialData.Capacity || '');
      setMarker({
        lat: initialData.Lat || 0,
        long: initialData.Long || 0,
      });
      setCapacityValue(initialData.Capacity || '');
    } else {
      reset({
        name: '',
        capacity: '',
        comment: '',
        primaryFirstName: '',
        primaryLastName: '',
        primaryPhonNumber: '',
        select: '',
      });
      setMarker(null);
      setCapacityValue('');
    }
  }, [isOpen, initialData, reset, setValue, control]);
  
  
  const onSubmit = async (data) => {
    console.log(data);
    const completeData = {
      name: data.name,
      lat: marker?.lat || 0,
      long: marker?.long || 0,
      capacity: data.capacity,
      comment: data.comment,
      primaryFirstName: data.primaryFirstName,
      primaryLastName: data.primaryLastName,
      primaryPhonNumber: data.primaryPhonNumber,
      type: type === 'Oil' ? '1' : '2'
    };
  
    let result;
    if (initialData) {
      result = await updateCompanyLocation(initialData.Id, completeData); // Обновление адреса
    } else {
      console.log(completeData);
      result = await createCompanyLocation(completeData); // Создание нового адреса
    }
  
    if (result.success) {
      onSubmitAddress(result.data);
    } else {
      console.error(result.message);
    }
  
    onClose();
    reset();
    setMarker(null);
    setValue("primaryPhonNumber", "");
    setValue('capacity', '');
  };
  

  useEffect(() => {
    loader
      .load()
      .then(() => setIsLoaded(true))
      .catch((error) => setLoadError(error));
  }, [loader]);

  const handleMapClick = useCallback((event) => {
    const lat = event.latLng.lat();
    const long = event.latLng.lng();
    setMarker({ lat, long });
  }, []);

  const onCancel = () => {
    onClose();
    reset();
    setMarker(null);
    setSelectedValue(null);
  };

  if (loadError) {
    return <div>Error loading Google Maps</div>;
  }

  if (!isLoaded) {
    return <div>Loading Google Maps...</div>;
  }

  return (
    <>
      <Modal
        isOpen={isOpen}
        onRequestClose={onClose}
        contentLabel="Add Operational Address"
        ariaHideApp={false}
        style={{ 
          overlay: { backgroundColor: 'rgba(31, 34, 41, 0.8)' }, 
          content: { borderRadius: '10px' }  
        }}
      >
        <div className={styles.title}>
          <h2>{type} {type === "Oil" ? 'Container Location' : 'Location'}</h2>    
          <button onClick={onClose}><IoClose size={34}/></button>
        </div>
        <GoogleMap
          id="google-map"
          mapContainerStyle={containerStyle}
          center={center}
          zoom={16}
          onClick={handleMapClick}
        >
          {marker && (
            <OverlayView
              position={{ lat: marker.lat, lng: marker.long }}
              mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
            >
              <FaMapMarkerAlt size={24} />
            </OverlayView>
          )}
        </GoogleMap>
      <form className={styles.dialogForm} onSubmit={handleSubmit(onSubmit)}>
        <label className={styles.smallText}>{type} Location Name:</label>
          <input 
            className={`${styles.formInput} ${errors.name && styles.inputError}`} 
            placeholder="Enter name" 
            {...register("name", { required: true })}
          />
          <label className={styles.smallText}>Location coordinates:</label>
          { marker && (
            <div className={styles.selectAdress}>
              {marker.lat}, {marker.long}
            </div>
          )}
          {!marker && (
            <>
              <input 
                className={`${styles.formInput} ${errors.selectAdress && styles.inputError}`} 
                type="text" 
                placeholder="Put a point on the map" 
                disabled={true}
                {...register("selectAdress", { required: true })}
              />
            </>
          )}
          <label className={styles.smallText}>{type === 'Oil' ? 'Coocking Oil' : 'Grease Trap'} Capacity:</label>
          <div className={errors.capacity && styles.inputError}>
            <Controller
              name="capacity"
              control={control}
              rules={{ required: true }}
              render={({ field }) => (
                <CustomSelector
                  options={options}
                  select={type === 'Oil' ? 'Oil Capacity' : 'Trap Capacity'}
                  selectValue={(value) => {
                    setSelectedValue(value);
                    field.onChange(value);
                  }}
                  initialValue={capacityValue}
                />
              )}
            />
          </div>
          <label className={styles.smallText}>{type === 'Oil' ? 'Oil' : 'Trap'} Location Comments:</label>
          <textarea 
            className={`${styles.textareaInput} ${errors.comment && styles.inputError}`} 
            placeholder="Enter text" 
            rows="6" 
            {...register("comment", { required: true })} 
          />
          <label className={styles.smallText}>Primary contact person:</label>
          <div className={styles.personInput}>
            <input 
              className={`${styles.formInput} ${errors.primaryFirstName && styles.inputError}`} 
              type="text" 
              placeholder="First Name" 
              {...register("primaryFirstName", { required: true })} 
            />
            <input 
              className={`${styles.formInput} ${errors.primaryLastName && styles.inputError}`} 
              type="text" 
              placeholder="Last Name" 
              {...register("primaryLastName", { required: true })} 
            />
          </div>
          
          <label className={styles.smallText}>Contact number:</label>
          <Controller
            name="primaryPhonNumber"
            control={control}
            rules={{ required: true }}
            render={({ field }) => (
              <PhoneInput
                {...field}
                className={errors.primaryPhonNumber ? styles.numberInputError : styles.numberInput}
                defaultCountry="US"
                placeholder="Enter phone number"
                onChange={(value) => {
                  console.log('Phone Number Changed:', value);
                  field.onChange(value);
                }}
                limitMaxLength={10}
              />
            )}
          />
          
          <div className={styles.submitButtons}>
            <button className={styles.cancel} type='button' onClick={onCancel}>Cancel</button>
            <button type="submit">Add {typeOfButton} <GoPlusCircle size={24} /></button>
          </div>
        </form>
      </Modal>
    </>
  );
};

export default React.memo(AddPointMap);

I checked console.log() and tried to wrap handleSubmit in other functions in which to call onSubmit

In Woocommerce admin order list on the preview page i’m trying to add after “note” my “track & trace”.

I’m looking for documentation where wc-order-preview-note is registered to add it after but I don’t seem to be able to find it.

How it looks like now

How it should look like

It has to check on the detail page what is fild in on “track & trace”

<?php
// Weergave van het Track & Trace veld in WooCommerce Admin Order Details
add_action('woocommerce_admin_order_data_after_order_details', function ($order) {
    woocommerce_wp_text_input(array(
        'id' => '_track_trace_field',
        'label' => __('Track & Trace:', 'text-domain'),
        'placeholder' => __('Voer trackingnummer in', 'text-domain'),
        'description' => __('Voer het trackingnummer voor de bestelling in.', 'text-domain'),
        'value' => get_post_meta($order->get_id(), '_track_trace_field', true),
        'desc_tip' => true,
    ));
}, 10, 1);

// Opslaan van het Track & Trace veld
add_action('woocommerce_process_shop_order_meta', function ($post_id, $post) {
    if (!empty($_POST['_track_trace_field'])) {
        update_post_meta($post_id, '_track_trace_field', sanitize_text_field($_POST['_track_trace_field']));
    }
}, 10, 2);
?>