Problem with Astro Auth. with Google OAuth

I am making a web application with Astro and at the same time using astro auth for authentication. I use Google as a provider, but when I click on the signIn button:

VM4243:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'fetchStack')
at _0xa4a750.<computed>.<computed>.<computed> [as json] (eval at <anonymous> (index.astro:28:12766), <anonymous>:1:41898)
at async signIn (client.ts:64:15)

<Layout title="Home page">
  <div class="h-screen">
    <button id="login">Login</button>
    <button id="logout">Logout</button>
    <script>
      const { signIn, signOut } = await import("auth-astro/client");
      document.querySelector("#login").onclick = () => signIn("google");
      document.querySelector("#logout").onclick = () => signOut();
    </script>
  </div>
</Layout>

uncaught TypeError: Cannot read properties of undefined (reading ‘prototype’)

Recently when i was coding, i suddenly got an error for no reason. After looking for ways of solving it i put in some code and now, i got a whole new one. The front end works on vite and is writtten on javascript.

The first error

The second error

import { useState } from 'react'
import './App.css'
import { response } from 'express'

function App() {
  const [Password, SetPassword] = useState('')
  const [Username, SetUsername] = useState('')

  const onSubmit = () => {
  fetch('http://localhost:3000', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      Username: Username, // No need to wrap Username in an object
      Password: Password
    })
  })
  .then(response => {
    if (response.status == 200){
      alert('Matched!')
    }
  })
  .catch(error => {
    console.error(response)
    })
  }
  return (
    <>
      <div class='mainDiv  --centered'>

      <input class='UsernameBox --verticallycentered' placeholder='Username/Email/Phone' value={Username} onChange={(e) => SetUsername(e.target.value)}></input>
      

      <input class='PasswordBox --verticallycentered' placeholder='Password' value={Password} onChange={(e) => SetPassword(e.target.value)}></input>
      <h4 className='ErrorThingy'>Passwords can only contain Letters, numbers and symbols</h4>
      <button onClick={onSubmit} className='LoginBtn --centered'> Log in</button>
      </div>
    </>
  )
}

export default App

Laravel POST JavaScript call CSRF is not defined

I have the following function:

public function search(Request $request)

{
    return "Hello";
}

Route:

Route::post('/items/search', [ItemController::class, 'search'])->name('items.search');

JS:

try {
    fetch('localhost:8000/items/search', {
        headers: {
            "X-CSRF-TOKEN": {{ csrf_token() }}
        },
        method: 'POST',
        body: "TEST"
    })
    .then(response => response.text())
    .then(data => alert(data));
} catch (error) {
     alert(error);
     alert('Failed to search items.');
}

When I execute the JS code I get the following alert error:

ReferenceError: OvEdMjEpBD3OxCZYVO9pxkKZSdZvdjeDiid9gG65 is not defined

OvEdMjEpBD3OxCZYVO9pxkKZSdZvdjeDiid9gG65 being the CSRF token, could someone point me in the right direction on what I’m doing wrong?

Access to XMLHttpRequest at ‘….’ from origin ‘http://localhost:5173’ has been blocked by CORS policy

This might be a duplicate but I tried implementing a lot of solutions and it’s not working.

I’m encountering the error while integrating the Detect Language API into my application.
This is my code.

  const apiKey = String(import.meta.env.VITE_API_KEY);
  const detectlanguage = new DetectLanguage(apiKey);

  function fetchLanguages() {
    detectlanguage.languages().then(function(result) {
    console.log(JSON.stringify(result));
   });
  }

The error

Access to XMLHttpRequest at 'https://ws.detectlanguage.com/0.2/languages' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I tried deploying the code to github, considering it was because of local environment but still the error is there.

I have another call to detect language to the same API which is working right.

Code:

function detectLanguage() {
    detectlanguage.detect(text).then(function (result) {
      const lang = result[0]?.language;
      setDetectedLanguage(lang);
      fetchTranslation(lang);
    });
  }

So I’m unable to understand why languages endpoint is not working.

Link to documentation.

What is Components, Context, and Hooks

I am working on a web app project. Inside Client -> Src there are 3 other folders ‘Components’, ‘Context’, and ‘Hooks’ and they each have code inside of them. Can someone explain to me WHAT these folders are and HOW they work ? I am curious to know how they work in a general web application

Cant get CORS to allow POST METHOD

Here is the server

const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const cors = require('cors')

const app = express();
const port = 3000;


const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '******',
  database: 'book_store'
});


connection.connect((err) => {
  if (err) throw err;
  console.log('Connected to MySQL database');
});


app.use(cors())
app.options('/users', ( res ) => {
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.sendStatus(200);
  });
app.use(bodyParser.json());



app.get('/books', ( res ) => {//get books db
  connection.query('SELECT * FROM books', (err, results) => {
    if (err) throw err;
    const result = res.json(results)
    console.log(result)
  });
});

app.get('/users', ( res ) => {//get users db
    connection.query('SELECT * FROM users', (err, results) => {
      if (err) throw err;
      const result = res.json(results)
      console.log(result)
    });
  });

app.options('/users', cors())

app.post('/users', (req, res) => {
    const { username, email, password, address, role } = req.body;
    console.log('request body', req.body)
    connection.query('INSERT INTO users (username, email, password, address, role) VALUES (?, ?, ?, ?, ?)', 
                     [username, email, password, address, role], 
                     (err, result) => {
      if (err) {
        console.error("Error inserting user:", err);
        res.status(500).json({ error: 'Error inserting user' });
      } else {
        console.log("User inserted successfully");
        res.status(200).json({ success: true });
      }
    })

  });

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

Here is the front end request

function addUser(username, email, password, address, role) {
    // Define the data to be sent in the request body
    const userData = {
      username: username,
      email: email,
      password: password,
      address: address,
      role: role
    };

  
    // Make a POST request to the server endpoint
    fetch('/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': '*/*'
      },
      body: JSON.stringify(userData) // Convert the data to JSON format
    })
    .then(response => {
      if (!response.ok) {
        throw new Error('Failed to add user');
      }
      return response.json(); // Parse the response JSON
    })
    .then(data => {
      console.log('User added successfully:', data);
      // Handle success if needed
    })
    .catch(error => {
      console.error('Error adding user:', error.message);
      // Handle error if needed
    });
  }


  addUser(username, email, password, address, role)

This are the headers i get

Request URL:
http://localhost:5500/users
Request Method:
POST
Status Code:
405 Method Not Allowed
Remote Address:
127.0.0.1:5500
Referrer Policy:
strict-origin-when-cross-origin
Access-Control-Allow-Credentials:
true
Access-Control-Allow-Origin:
http://localhost:5500
Allow:
GET, HEAD, OPTIONS
Connection:
keep-alive
Content-Length:
0
Date:
Wed, 24 Apr 2024 23:35:01 GMT
Keep-Alive:
timeout=5
Vary:
Origin
Accept:
/
Accept-Encoding:
gzip, deflate, br, zstd
Accept-Language:
es-US,es;q=0.9,es-419;q=0.8,en;q=0.7
Connection:
keep-alive
Content-Length:
91
Content-Type:
application/json
Cookie:
_ga=GA1.1.2077515680.1676588089; _ga_2JPB0HJG8R=GS1.1.1701138391.13.0.1701138391.0.0.0
Host:
localhost:5500
Origin:
http://localhost:5500
Referer:
http://localhost:5500/front/
Sec-Fetch-Dest:
empty
Sec-Fetch-Mode:
cors
Sec-Fetch-Site:
same-origin
User-Agent:
Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1

I keep getting error 405(Method not Allowed). Any advice?

Tried modificating cors headers, but still didnt work. Using postman to POST to server seems to work fine.

How to apply an event listener to multiple elements sharing ID, but only firing on the parent of the clicked element

I’m trying to develop an inspection form where a ‘corrective action’ prompt is fired when the ‘X’ radio is selected rather than the ‘checkmark’ radio.

I’ve used event listeners on both buttons to fire the prompt when necessary.

What I’m trying to accomplish is to use this function over multiple DIV’s rather than write specific event listeners for each section (this would result in a ton of code as I intend to have a lot of points on the inspection form). I’m hoping there is a way to share the ID’s for all the sections, and attach the event listeners to ALL IDs, but only fire the ‘corrective action’ prompt within the parent DIV the radio was selected. (I hope this makes sense).

note The inputs for the Registration Line share the same ID as the inputs in the Insurance Line

**<!--Registration Line-->**
<div class="accordion-body vehicleBody border border-light-subtle">
    <h3 id="registration" class="mx-3">Current / Valid Vehicle Registration
        <span>
        <input type="radio" class="btn-check reg" name="registration" id="success" autocomplete="off" >
        <label class="btn btn-outline-success rounded-circle" for="success"><i class="fa-solid fa-check"></i></label>
        <input  type="radio" class="btn-check" name="registration" id="danger" autocomplete="off" />
        <label class="btn btn-outline-danger rounded-circle ms-3" for="danger"><i class="fa-solid fa-x"></i></label>
        </span>
    </h3>
    <div class="ms-3" id="correctiveAction">
        <p class="text-center" style="font-weight: 400; padding: 10px; color: crimson; text-decoration: underline;">Corrective Action Required!</p>
        <div class="form-floating correctiveAction" >
            <textarea class="form-control" id="floatingTextarea2" style="height: 100px"></textarea>
            <label for="floatingTextarea2">Please determine appropriate corrective action.</label>
        </div>
        <div class="input-group mt-2 ">
            <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
            <span class="input-group-text infoHead" style="width:174px;">Responsible Person:</span>
            <input type="text" class="form-control" aria-label="employee name" aria-describedby="employee name">
        </div>
    </div>
</div>
<!--Insurance Line-->
<div class="accordion-body vehicleBody border border-light-subtle">
    <h3 id="insurance" class="mx-3">Current / Valid Insurance
        <span>
        <input type="radio" class="btn-check" name="insurance" id="success" autocomplete="off">
        <label class="btn btn-outline-success rounded-circle" for="success"><i class="fa-solid fa-check"></i></label>
        <input type="radio" class="btn-check" name="insurance" id="danger" autocomplete="off">
        <label class="btn btn-outline-danger rounded-circle ms-3" for="danger"><i class="fa-solid fa-x"></i></label>
        </span>
    </h3>
    <div class="ms-3" id="correctiveAction">
        <p class="text-center" style="font-weight: 400; padding: 10px; color: crimson; text-decoration: underline;">Corrective Action Required!</p>
        <div class="form-floating correctiveAction" >
            <textarea class="form-control" id="floatingTextarea2" style="height: 100px"></textarea>
            <label for="floatingTextarea2">Please determine appropriate corrective action.</label>
        </div>
        <div class="input-group mt-2 ">
            <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
            <span class="input-group-text infoHead" style="width:174px;">Responsible Person:</span>
            <input type="text" class="form-control" aria-label="employee name" aria-describedby="employee name">
        </div>
    </div>
</div> 

JS

const ca = document.getElementById("success");
const nc = document.getElementById("danger")
var ca1 = document.getElementById("correctiveAction");
nc.addEventListener("click", function(){
   ca1.style.display="block";
})
ca.addEventListener("click", function(){
    ca1.style.display="none"
})

I’ve attempted to find ways to target the input and to fire within the parent div only, but I’m not finding a way to do so.

Using the JS, I have included only fires the ‘corrective action’ on the Registration div even when the ‘X’ is clicked for the Insurance div.

Unable to access data element through the jquery dom

I want to create variables $eventDuration and $employeeRate, however, for some reason I am getting an error in the console saying they are undefined.

Here is my script code:

<script>
            $(document).ready(function () {
                $('.submitChange').click(function (ev) {
                    ev.stopPropagation();
                    var cell = ev.target;
                    
                    $eventDuration = $(this).data('eventduration');
                    $employeeRate = $(this).data('employeerate');
                    $usertype = $(this).data('employeetype');
                    $cellId = $(cell).attr('id');
                    $eventId = $(cell).data('eventid');
                    $employeeId = $(cell).data('employeeid');
                    if ($cellId === 'green-cell') {
                        $action = 'remove';
                    } else {
                        $action = 'add';
                    }
                    $.ajax({
                        url: "includes/ajax_request.php",
                        method: "POST",
                        data: {
                            action: $action,
                            eventId: $eventId,
                            employeeId: $employeeId
                        },
                        success: function (response) {
                            if (response === 'removed') { // remove an employee
                                $(cell).removeAttr('id').attr('id', 'yellow-cell'); 
                                if($usertype === 'Server') { // remove server 
                                    $(".sum_servers").each(function(){
                                        if($(this).attr('data-eventid')==$eventId){
                                            $sumServer = parseInt($(this).text());
                                            $sumServer--;
                                            $(this).text($sumServer)
                                        }
                                    })
                                    $(".sum_staff").each(function(){ // add staff member
                                        if($(this).attr('data-eventid')==$eventId){
                                            $sumStaff = parseInt($(this).text());
                                            $sumStaff--;
                                            $(this).text($sumStaff)
                                        }
                                    })
                                } else { // remove preparer 
                                    $(".sum_preparers").each(function(){ 
                                        if($(this).attr('data-eventid')==$eventId){
                                            $sumPreparers = parseInt($(this).text());
                                            $sumPreparers--;
                                            $(this).text($sumPreparers)
                                        }
                                    })
                                    $(".sum_staff").each(function(){ 
                                        if($(this).attr('data-eventid')==$eventId){
                                            $sumStaff = parseInt($(this).text());
                                            $sumStaff--;
                                            $(this).text($sumStaff)
                                        }
                                    })
                                }
                                
                                $(".sum_rate").each(function(){
                                    if($(this).attr('data-eventid')==$eventId){
                                        $sumRate = parseFloat($(this).text().replace('$', ''));
                                        $sumRate = $sumRate - (eventDuration*employeeRate);
                                        $(this).text($sumRate)
                                    }
                                })
                            } else { // add an employee
                                $(cell).removeAttr('id').attr('id', 'green-cell');
                                if($usertype === 'Server') { // add server 
                                    $(".sum_servers").each(function(){
                                        if($(this).attr('data-eventid')==$eventId){
                                            $sumServer = parseInt($(this).text());
                                            $sumServer++;
                                            $(this).text($sumServer)
                                        }
                                    })
                                    
                                    $(".sum_staff").each(function(){
                                        if($(this).attr('data-eventid')==$eventId){
                                            $sumStaff = parseInt($(this).text());
                                            $sumStaff++;
                                            $(this).text($sumStaff)
                                        }
                                    })
                                } else { // add preparer 
                                    $(".sum_preparers").each(function(){
                                        if($(this).attr('data-eventid')==$eventId){
                                            $sumPreparers = parseInt($(this).text());
                                            $sumPreparers++;
                                            $(this).text($sumPreparers)
                                        }
                                    })
                                    $(".sum_staff").each(function(){
                                        if($(this).attr('data-eventid')==$eventId){
                                            $sumStaff = parseInt($(this).text());
                                            $sumStaff++;
                                            $(this).text($sumStaff)
                                        }
                                    })
                                }
                            }
                        }
                    })
                })
            });
</script>

Here is the cell data I am trying to access (class=”submitChange” at the bottom)

<tr>
                            <th scope='row'><?php echo $row['lastname'] . ", " . $row['firstname']; ?></th>
                            <td><?php echo $row['phone']; ?></td>
                            <td><?php echo $row['usertype']; ?></td>
                            <?php
                            foreach ($events_array as $event) { 
                                $event_date = $event['date'];
                                $employee_id = $row['id'];
                                
                                // Check if employee has a vacation day
                                $vacation_day = false;
                                foreach ($vacation_dates[$employee_id] as $vacation_date) {
                                    if ($vacation_date == $event_date) {
                                        $vacation_day = true;
                                        break; 
                                    }
                                }
                                
                                // Check if employee is working that day
                                $sql_check_worker = "SELECT * FROM Workers WHERE employee={$row['id']} AND event={$event['id']}";
                                $result_check_worker = $smeConn->query($sql_check_worker);
                                if ($result_check_worker->num_rows > 0) { // displays cell color if employee is working or not
                                    $serverSum++;
                                    $cellColorId = 'green-cell';
                                } else {
                                    $cellColorId = 'yellow-cell';
                                }
                                ?>
                                <?php if ($vacation_day) { 
                                    echo "<td class='vacation'></td>"; 
                                } else {
                                    echo "<td class='submitChange' id='$cellColorId' data-employeerate='{$row['rate']}' data-eventduration='{$event['duration']}' data-employeetype='{$row['usertype']}' data-eventid='{$event['id']}' data-employeeid='{$row['id']}'></td>";
                                }
                                ?>
                            <?php } ?>
                            <td><?php echo $serverSum; ?></td>
                        </tr>

The cell for total cost which I am attempting to update, if it’s relevant:

<!-- TOTAL COST FOR A COLUMN -->
                        <tr>
                            <th colspan="2">TOTAL COST</th>
                            <td class="black-cell">*BLACK*</td>
                            <?php 
                            foreach ($events_array as $event) {
                                $event_id = $event['id'];
                                $sql_total_cost = "SELECT SUM(rate * duration) AS total_cost FROM Workers 
                                                   INNER JOIN Employees ON Workers.employee = Employees.id 
                                                   INNER JOIN Events ON Workers.event = Events.id 
                                                   WHERE Workers.event = $event_id";
                                $result_total_cost = $smeConn->query($sql_total_cost);
                                $row_total_cost = $result_total_cost->fetch_assoc();
                                $total_cost = $row_total_cost['total_cost'];
                                ?>
                                <td class='sum_rate' data-eventId='<?php echo $event_id;?>'><?php echo '$' . round($total_cost, 2); ?></td>
                            <?php } ?>
                            <td class="black-cell">*BLACK*</td>
                        </tr>

I am confused because I am able to create the $usertype variable the exact same way. But why am I unable to create $employeeRate or $eventDuration?

Web workers to reduce third party javascript

I wanted to know if there are tools or plugins to reduce the use of third-party javascript on my website

A solution for third-party scripts to run separately from the main thread since when I want to optimize my site, lighthouse always suggests reducing the third-party js

I’ve been raking my brain on this for 20 mins

this discord bot is supposed to join the users voice channel and play music, everything works except for it not transmitting audio. from what I can gather the error is happening somewhere between it playing the audio file and it being transmitted. I’ve been trying to use chat-GPT but to no avail.

I’ve tried chat-GPT, stack overflow and reddit but couldn’t figure it out, stack overflow and reddit but couldn’t figure it out.

const { Client, GatewayIntentBits, SlashCommandBuilder, MessageEmbed } = require("discord.js");
const { joinVoiceChannel, createAudioPlayer, NoSubscriberBehavior, createAudioResource } = require('@discordjs/voice');
const { token } = require("./config.json");
const fs = require('fs');

const client = new Client({ intents: [GatewayIntentBits.Guilds, GatewayIntentBits.GuildMessages, GatewayIntentBits.GuildMessageReactions] });

client.once("ready", () => {
    console.log("Bot active.");

    const ping = new SlashCommandBuilder()
        .setName('ping')
        .setDescription('Replies with pong!');

    const hello = new SlashCommandBuilder()
        .setName('hello')
        .setDescription('Says hello!')
        .addUserOption(option =>
            option
                .setName('user')
                .setDescription('The user to say hi to')
                .setRequired(false)
        );

    const echo = new SlashCommandBuilder()
        .setName('echo')
        .setDescription("Echo's a message")
        .addStringOption(option =>
            option
                .setName('text')
                .setDescription('The text to repeat')
                .setRequired(true)
        );

    const mata = new SlashCommandBuilder()
        .setName('mata')
        .setDescription('Green, ma-ta is here!');

    const eddy = new SlashCommandBuilder()
        .setName('eddy')
        .setDescription('Original reggae music!')
        .addStringOption(option =>
            option
                .setName('local_audio')
                .setDescription('Provide the name of the local audio file')
                .setRequired(true)
        );

    const disconnect = new SlashCommandBuilder()
        .setName('disconnect')
        .setDescription('Disconnects the bot from the voice channel');

    const commands = [ping, hello, echo, mata, eddy, disconnect];

    commands.forEach(command => client.guilds.cache.forEach(guild => guild.commands.create(command)));


});

client.on('interactionCreate', async interaction => {
    console.log("Interaction received.");
    
    if (!interaction.isCommand()) {
        console.log("Not a command interaction.");
        return;
    }

    const { commandName, options, member, guild } = interaction;
    console.log("Command name:", commandName);

    if (commandName === 'ping') {
        console.log("Ping command executed.");
        await interaction.reply("Pong!");
    } else if (commandName === 'hello') {
        console.log("Hello command executed.");
        let user = options.getUser('user') || member.user;
        await interaction.reply(`Hello ${user.username}!`);
    } else if (commandName === 'echo') {
        console.log("Echo command executed.");
        const text = options.getString('text');
        await interaction.reply(text);
    } else if (commandName === 'mata') {
        console.log("Mata command executed.");
        const embed = new MessageEmbed()
            .setColor('#00FF00')
            .setTitle('This is mata!')
            .setDescription('She is very ugly!')
            .setImage('https://scottbarrykaufman.com/wp-content/uploads/2011/08/pig-ugly-woman-fat-face.jpg');

        await interaction.reply({ embeds:  });
    } else if (commandName === 'eddy') {
        console.log("Eddy command executed.");

        const voiceChannel = member.voice.channel;
        if (!voiceChannel) {
            await interaction.reply("You need to be in a voice channel to use this command.");
            return;
        }

        const connection = joinVoiceChannel({
            channelId: voiceChannel.id,
            guildId: guild.id,
            adapterCreator: guild.voiceAdapterCreator,
        });

        connection.on('stateChange', (state) => {
            console.log(`Connection state changed to ${state.status}`);
        });

        connection.on('error', (error) => {
            console.error('Connection error:', error);
        });

        const localAudioFile = options.getString('local_audio');
        const filePath = `./audio/Gorillaz.mp3`;

        console.log("File path:", filePath);

        if (!fs.existsSync(filePath)) {
            console.log("File does not exist.");
            await interaction.reply("The specified local audio file does not exist.");
            return;
        }

        const audioPlayer = createAudioPlayer({
            behaviors: {
                noSubscriber: NoSubscriberBehavior.Pause,
            },
        });

        const stream = fs.createReadStream(filePath);
        const resource = createAudioResource(stream);
        audioPlayer.play(resource);

        connection.subscribe(audioPlayer);

        console.log("Audio playback started.");
        await interaction.reply("Now playing audio in your voice channel!");
    } else if (commandName === 'disconnect') {
        console.log("Disconnect command executed.");
        const voiceChannel = member.voice.channel;

        if (!voiceChannel) {
            await interaction.reply("The bot is not in a voice channel.");
            return;
        }

        const connection = joinVoiceChannel({
            channelId: voiceChannel.id,
            guildId: guild.id,
            adapterCreator: guild.voiceAdapterCreator,
        });

        connection.on('stateChange', (state) => {
            console.log(`Connection state changed to ${state.status}`);
        });

        connection.on('error', (error) => {
            console.error('Connection error:', error);
        });

        if (connection) {
            connection.destroy();
            console.log("Disconnected from the voice channel.");
        }
    }
});

client.login(token);

WordPress Woocommerce update shipping via ajax PHP

I’ve recently moved part of the checkout form (wc_cart_totals_shipping_html()) from form-shipping.php to form-billing.php in my WooCommerce setup. Previously, I was using jQuery(‘body’).trigger(‘update_checkout’); in form-shipping.php to dynamically update shipping methods, but it’s not working in form-billing.php anymore.

Can someone guide me on how to trigger the update of shipping methods (wc_cart_totals_shipping_html()) dynamically in form-billing.php using jQuery or AJAX? I want the shipping section to update based on changes in billing details (e.g., country selection).

<?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>
        <?php do_action( 'woocommerce_review_order_before_shipping' ); ?>
        <?php wc_cart_totals_shipping_html(); ?>
        <?php do_action( 'woocommerce_review_order_after_shipping' ); ?>
    </div>
<?php endif; ?>

I recently moved part of the WooCommerce checkout form related to shipping (wc_cart_totals_shipping_html()) from form-shipping.php to form-billing.php within my theme’s WooCommerce templates. Previously, I was using jQuery(‘body’).trigger(‘update_checkout’); successfully in form-shipping.php to dynamically update shipping methods based on user actions

play.google badge url adds 18 cookies?

Im adding a button with the google play badge image that I have generated using their own tool. But when I do so it adds 18 different cookies. I can’t figure out why.
When I run Lighthouse it complains about the use of 3rd party cookies.
When I remove below code and refresh the page all of the below 18 cookies go away.

Is there any way of using the badge image without it adds all the cookies?

Button code:

<Button
    className="h-fit w-[208px] bg-transparent p-0 shadow-none"
    onPress={() => handleOnStoreClick('google')}>
      <Image
        className="h-auto w-full"
        width={208}
        height={80.48}
        loading="lazy"
        alt="Get it on Google Play"
        src={`https://play.google.com/intl/en_us/badges/static/images/badges/${i18n.resolvedLanguage?.toString().slice(0, 2).toLocaleLowerCase() || 'en'}_badge_web_generic.png`}/>
</Button>

enter image description here
enter image description here

Why does let MyNamespace = MyNamespace || {}; result in an uncaught reference error in javascript? [duplicate]

I’m trying to define a namespace in javscript and I’m following this tutorial: https://www.geeksforgeeks.org/namespacing-in-javascript/

The first line is:

let MyApp = MyApp || {};

I thought MyApp || {} was to prevent accidental redeclaration of MyApp. But instead this just creates an error. Uncaught ReferenceError: MyApp is not defined.

Why doesn’t this work?

Stripe Address Element Add Asterisks To Required

I’m using the AddressElement from Stripe in React/Next.

How can I customize the label for the input?

For example, if I want a * to show up for if it’s required, how would I do that?

I tried looking at the Appearance API and tried setting some rules, but there’s no content available for their CSS rules.

MongoNetworkError: failed to connect to server [localhost:27017] on first connect [MongoNetworkError: connection 27 to localhost:27017 timed out]

I’m trying to create some documents using mongoose’s insertMany, but it fails when connecting to Mongo host.

My code is below:

const { current, last } = getDates();
const currentData = await getProofsOfDeliveryData(current);
const lastData = await getProofsOfDeliveryData(last);
const data = [...currentData, ...lastData];
await ProofOfDeliveryProd.deleteMany();
await ProofOfDeliveryProd.insertMany(data);

I expect to insert about 12k documents