ts-glitter 22.4.7 → 22.5.0

package/lowcode/cms-plugin/shopping-information.ts

@@ -8,6 +8,13 @@ import { GlobalUser } from '../glitter-base/global/global-user.js';
 import { InformationModule, ViewModel } from './information/information-module.js';
 
 const html = String.raw;
+const css = String.raw;
+
+interface ReverseRule {
+  rule: string;
+  range: string;
+  enabled: boolean;
+}
 
 export class ShoppingInformation {
   static saveArray: (() => Promise<boolean>)[] = [];
@@ -20,6 +27,9 @@ export class ShoppingInformation {
       id: glitter.getUUID(),
       tableId: glitter.getUUID(),
       filterId: glitter.getUUID(),
+      webTypeId: glitter.getUUID(),
+      reverseId: glitter.getUUID(),
+      reverseEditId: glitter.getUUID(),
       type: 'basic',
       data: {
         ubn: '',
@@ -125,6 +135,15 @@ export class ShoppingInformation {
       bind: vm.id,
       dataList: [{ obj: vm, key: 'type' }],
       view: () => {
+        gvc.glitter.addMtScript(
+          [
+            {
+              src: `https://raw.githack.com/SortableJS/Sortable/master/Sortable.js`,
+            },
+          ],
+          () => {},
+          () => {}
+        );
         if (vm.mainLoading) {
           ApiUser.getPublicConfig('store-information', 'manager').then((response: any) => {
             const data = response.response.value;
@@ -155,7 +174,9 @@ export class ShoppingInformation {
 
         function createSection(title: string, description?: string) {
           return html`
-            <div class="d-flex" style="font-weight: 700;color: #393939; font-size: 16px;line-height: 1.4;gap: 6px;">${title}</div>
+            <div class="d-flex" style="font-weight: 700;color: #393939; font-size: 16px;line-height: 1.4;gap: 6px;">
+              ${title}
+            </div>
             ${description
               ? html` <div style="color: #8D8D8D; font-size: 14px; padding-right: 10px;">${description}</div>`
               : ''}
@@ -163,16 +184,17 @@ export class ShoppingInformation {
         }
 
         function createToggle(title: string, description: string, key: keyof typeof vm.data) {
-          const toggleHtml =  html` <div class="cursor_pointer form-check form-switch m-0 p-0" style="min-width: 50px;">
-              <input
-                class="form-check-input m-0"
-                type="checkbox"
-                onchange="${gvc.event(() => (vm.data[key] = !vm.data[key]))}"
-                ${vm.data[key] ? 'checked' : ''}
-              />
-            </div>`
+          const toggleHtml = html` <div class="cursor_pointer form-check form-switch m-0 p-0" style="min-width: 50px;">
+            <input
+              class="form-check-input m-0"
+              type="checkbox"
+              onchange="${gvc.event(() => (vm.data[key] = !vm.data[key]))}"
+              ${vm.data[key] ? 'checked' : ''}
+            />
+          </div>`;
           return createRow(
-            html`<div>${title}</div>${toggleHtml}`,
+            html` <div>${title}</div>
+              ${toggleHtml}`,
             description,
             ''
           );
@@ -243,6 +265,367 @@ export class ShoppingInformation {
           );
         }
 
+        function drawReserveSection() {
+          return gvc.bindView({
+            bind: vm.reverseId,
+            view: () => {
+              function drawQuest() {
+                return BgWidget.questionButton(
+                  gvc.event(() => {
+                    BgWidget.quesDialog({
+                      gvc: gvc,
+                      style: '',
+                      innerHTML(gvc: GVC): string {
+                        const hint =
+                          '若是商店的每日營業時間為 上午09:00~上午12:00 且星期一固定公休' +
+                          '作法：新增規則「幾點到幾點」指定時間、再設置「特定星期」指定星期一' +
+                          '切記公休的規則要再下方，才能覆蓋掉上面的規則';
+                        return html`
+                          <div class="d-flex flex-column text-white">
+                            <div>若是商店的每日營業時間為 上午09:00~上午12:00 且星期一固定公休，</div>
+                            <div>作法：新增規則「幾點到幾點」指定時間、再設置「特定星期」指定星期一</div>
+                            <div>切記公休的規則要再下方，才能覆蓋掉上面的規則</div>
+                            <img src="${img}" alt="hintImg" style="margin-top:8px;" />
+                          </div>
+                        `;
+                      },
+                    });
+                  })
+                );
+              }
+
+              function drawEdition() {
+                return gvc.bindView({
+                  bind: vm.reverseEditId,
+                  view: () => {
+                    gvc.addStyle(css`
+                      .range-input {
+                        padding: 0 18px;
+                        border-radius: 10px;
+                        border: 1px solid #ddd;
+                        background: #fff;
+                        height: 40px;
+                        gap: 10px;
+                      }
+
+                      .range-input-raw {
+                        display: flex;
+                        gap: 18px;
+                      }
+                    `);
+                    try {
+                      interface RangeViewType {
+                        [key: string]: (ruleIndex: number) => string;
+                      }
+
+                      const toggleHtml = (ruleIndex: number) => {
+                        let toggle = ruleData[ruleIndex].enabled
+                        return html`
+                          ${toggle?"開啟":"關閉"}
+                        <div
+                          class="cursor_pointer form-check form-switch m-0 p-0"
+                          style="min-width: 50px;"
+                        >
+                          <input
+                            class="form-check-input m-0"
+                            type="checkbox"
+                            onchange="${gvc.event(e => {
+                              ruleData[ruleIndex].enabled = !toggle;
+                              gvc.notifyDataChange(vm.reverseEditId);
+                            })}"
+                            ${toggle ? 'checked' : ''}
+                          />
+                        </div>`;
+                      };
+                      const rangeView: RangeViewType = {
+                        date: (ruleIndex: number) => {
+                          const dateInput = (dateString: string, index: number) => {
+                            const date = dateString.split(',');
+                            return html`
+                              <div class="d-flex range-input flex-fill">
+                                <input
+                                  class="border-0 w-100"
+                                  value="${date[index]}"
+                                  type="time"
+                                  onchange="${gvc.event(e => {
+                                    function isValidTimeRange(timeRange:string) {
+                                      const [start, end] = timeRange.split(',');
+
+                                      // 轉換時間為日期對象，並設置同一天的日期（例如，2023-01-01）
+                                      const startTime = new Date(`2023-01-01T${start}:00`);
+                                      const endTime = new Date(`2023-01-01T${end}:00`);
+
+                                      // 比較時間
+                                      return endTime > startTime;
+                                    }
+                                    date[index] = e.value;
+                                    ruleData[ruleIndex].range = isValidTimeRange(`${date[0]},${date[1]}`)?`${date[0]},${date[1]}`:`${date[1]},${date[0]}`;
+                                    gvc.notifyDataChange(vm.reverseEditId)
+                                  })}"
+                                />
+                              </div>
+                            `;
+                          };
+
+                          return html`
+                            <div class="h-100  d-flex range-input-raw">
+                              ${dateInput(ruleData[ruleIndex].range, 0)} ${dateInput(ruleData[ruleIndex].range, 1)}
+                            </div>
+                          `;
+                        },
+                        week: (ruleIndex: number) => {
+
+
+                          return BgWidget.select({
+                            callback(value: any): void {
+                              ruleData[ruleIndex].range = value
+                              console.log(vm.data);
+                            },
+                            default: ruleData[ruleIndex].range,
+                            gvc: gvc,
+                            options: [
+                              { key: "1", value: "禮拜一" },
+                              { key: "2", value: "禮拜二" },
+                              { key: "3", value: "禮拜三" },
+                              { key: "4", value: "禮拜四" },
+                              { key: "5", value: "禮拜五" },
+                              { key: "6", value: "禮拜六" },
+                              { key: "7", value: "禮拜日" }
+                            ]
+
+                          })
+                        },
+                        month: (ruleIndex: number) => {
+                          const monthInput = (monthString: string, index: number) => {
+                            const month = monthString.split(',');
+                            return html`
+                              <div class="d-flex range-input flex-fill">
+                                <input
+                                  class="border-0 w-100"
+                                  value="${month[index]}"
+                                  type="number"
+                                  onchange="${gvc.event(e => {
+                                    const numberValue = Number(e.value);
+                                    if (numberValue > 12 || numberValue < 1) {
+                                      dialog.infoMessage({
+                                        text: '請輸入正確的月份數字',
+                                        callback: () => {
+                                          e.value = month[index];
+                                        },
+                                      });
+                                    } else {
+                                      month[index] = e.value;
+                                      ruleData[ruleIndex].range = `${month[0]},${month[1]}`;
+                                    }
+                                  })}"
+                                />
+                                <div class="tx_gray_16 d-flex align-items-center">月</div>
+                              </div>
+                            `;
+                          };
+
+                          return html`
+                            <div class="h-100  d-flex range-input-raw">
+                              ${monthInput(ruleData[ruleIndex].range, 0)} ${monthInput(ruleData[ruleIndex].range, 1)}
+                            </div>
+                          `;
+                        },
+                      };
+                      return ruleData
+                        .map((rule, index: number) => {
+                          return html` <li
+                            class="w-100 mb-2 d-flex align-items-center "
+                            style="overflow: hidden;padding-bottom: 18px;height:58px;"
+                          >
+                            <div class="d-flex align-items-center pe-5 flex-shrink-0" style="width:33%">
+                              <i class="fa-sharp fa-solid fa-grip-dots-vertical me-3 dragItem cursor_move"></i>
+                              ${BgWidget.select({
+                                gvc: gvc,
+                                callback(value: any): void {
+                                  rule.rule = value;
+                                  const initData = {
+                                    month : ()=>{
+                                      return "1,12"
+                                    },
+                                    date:()=>{
+                                      return `00:00,23:59`
+                                    },
+                                    week:()=>{
+                                      return "1"
+                                    }
+                                  }
+                                  rule.range = initData[rule.rule as keyof typeof initData]();
+                                  gvc.notifyDataChange(vm.reverseEditId);
+                                },
+                                style: 'color:#393939',
+                                default: rule.rule ?? 'month',
+                                options: [
+                                  { key: 'month', value: '月份區間' },
+                                  { key: 'week', value: '特定星期' },
+                                  { key: 'date', value: '日期區間' },
+                                ],
+                              })}
+                            </div>
+                            <div class="h-100 pe-5" style="width:52%" >${rangeView[rule.rule ?? 'month'](index)}</div>
+                            <div class="d-flex flex-shrink-0 position-relative" style="width:15%;gap:6px;">${toggleHtml(index)}
+                              <i class="ms-auto fa-solid fa-xmark-large cursor_pointer" style="color:#B0B0B0" onclick="${gvc.event(()=>{
+                                ruleData.splice(index, 1);
+                                gvc.notifyDataChange(vm.reverseEditId);
+                              })}"></i>
+                            </div>
+                            
+                          </li>`;
+                        })
+                        .join('');
+                    } catch (e: any) {
+                      console.log(e);
+                      return e;
+                    }
+                  },
+                  divCreate: {
+                    elem: 'ul',
+                    option: [{ key: 'id', value: vm.reverseEditId }],
+                    class: 'd-flex flex-column m-0',
+                    style: 'padding-top:24px;',
+                  },
+                  onCreate: () => {
+                    let n = 0;
+                    const interval = setInterval(() => {
+                      n++;
+                      if ((gvc.glitter.window as any).Sortable) {
+                        try {
+                          function swapArr(arr: any, index1: number, index2: number) {
+                            const data = arr[index1];
+                            arr.splice(index1, 1);
+                            arr.splice(index2, 0, data);
+                          }
+
+                          let startIndex = 0;
+                          //@ts-ignore
+                          gvc.glitter.window.Sortable.create(gvc.glitter.document.getElementById(vm.reverseEditId), {
+                            group: gvc.glitter.getUUID(),
+                            animation: 100,
+                            handle: '.dragItem',
+                            onChange: function (evt: any) {},
+                            onStart: function (evt: any) {
+                              startIndex = evt.oldIndex;
+                            },
+                            onEnd: (evt: any) => {
+                              swapArr(ruleData, startIndex, evt.newIndex);
+                            },
+                          });
+                        } catch (e) {}
+                        clearInterval(interval);
+                      }
+                      if (n > 100) {
+                        clearInterval(interval);
+                      }
+                    }, 100);
+                  },
+                });
+              }
+
+              gvc.addStyle(css`
+                .quest-Dialog {
+                  padding: 10px;
+                  border-radius: 10px;
+                }
+              `);
+              let ruleData: ReverseRule[] = vm.data.ruleData??[];
+              const emptyData: ReverseRule = {
+                enabled: false,
+                range: '1,12',
+                rule: 'month',
+              };
+              const img =
+                'https://d3jnmi1tfjgtti.cloudfront.net/file/122538856/sizeoriginal_s*px$_sasas8s7sfscs5s0_messageImage_1748238444050.jpg';
+              const sectionText = {
+                first: {
+                  title: '營業/預約時段管理',
+                  subTitle: '管理商店的營業時段與公休日，活動預約時間將依此設定自動生成',
+                  quest: drawQuest(),
+                },
+                section: {
+                  rawTitle: [
+                    { key: 'rule', text: '規則', width: 'width:33%' },
+                    {
+                      key: 'range',
+                      text: '區間',
+                      width: 'flex-grow:1',
+                    },
+                    { key: 'enabled', text: '預約功能', width: 'width:15%' },
+                  ],
+                  data: ruleData,
+                },
+                third: {
+                  text: '※ 下方的規則優先覆蓋上方的規則',
+                  btn: BgWidget.save(
+                    gvc.event(() => {
+
+                      ruleData.push(structuredClone(emptyData));
+                      vm.data.ruleData = ruleData;
+                      gvc.notifyDataChange(vm.reverseEditId);
+                    }),
+                    '新增規則'
+                  ),
+                },
+              };
+              return BgWidget.mainCard(html`
+                <div class="d-flex flex-column" style="gap: 24px;">
+                  <!--                reverse first section-->
+                  <div class="d-flex flex-column">
+                    <div class="tx_700">${sectionText.first.title} ${sectionText.first.quest}</div>
+                    <div class="tx_gray_14">${sectionText.first.subTitle}</div>
+                  </div>
+                  <!--                reverse second section-->
+                  <div class="d-flex flex-column">
+                    <div class="d-flex">
+                      ${sectionText.section.rawTitle
+                        .map(rawTitle => {
+                          return html` <div class="d-flex tx_700" style="${rawTitle.width}">${rawTitle.text}</div> `;
+                        })
+                        .join('')}
+                    </div>
+                    <div class="d-flex flex-column" style="gap:33px;">${drawEdition()}</div>
+                  </div>
+                  <!--                reverse third section-->
+                  <div class="d-flex" style="padding: 12px 20px;background: #F7F7F7;">
+                    <div class="tx_700 d-flex align-items-center">${sectionText.third.text}</div>
+                    <div class="ms-auto">${sectionText.third.btn}</div>
+                  </div>
+                </div>
+              `);
+            },
+            divCreate: {},
+          });
+        }
+
+        function drawWebTypeSection() {
+          return gvc.bindView({
+            bind: vm.webTypeId,
+            view: () => {
+              const webTypeSection: Record<string, any> = {
+                reserve: drawReserveSection(),
+              };
+
+              return html`
+                <div class="d-flex flex-column">
+                  ${vm.data.web_type
+                    .map((web_type: string) => {
+                      if (webTypeSection[web_type]) {
+                        return webTypeSection[web_type];
+                      }
+                      return ``;
+                    })
+                    .filter((item: string) => item !== '')
+                    .join(BgWidget.mbContainer(24))}
+                  ${BgWidget.mbContainer(24)}
+                </div>
+              `;
+            },
+            divCreate: {},
+          });
+        }
 
         const typeMap: Record<string, () => string> = {
           basic: () => {
@@ -367,9 +750,11 @@ export class ShoppingInformation {
                               .shopnex.tw
                             </div>
                           </div>
-                          ${domainType==='custom' ? (()=>{
-                            return ``
-                          })():``}
+                          ${domainType === 'custom'
+                            ? (() => {
+                                return ``;
+                              })()
+                            : ``}
                           <div class="d-flex justify-content-end">${BgWidget.save(gvc.event(applyDomain), '申請')}</div>
                         </div>
                       `,
@@ -578,84 +963,91 @@ export class ShoppingInformation {
                 ],
                 callback: (array: any) => {
                   vm.data.web_type = array;
+                  gvc.notifyDataChange('web_type');
                 },
                 type: 'multiple',
               })}
-            `)
-            return BgWidget.mainCard(html`
-              <div class="tx_700">商店類型</div>
-              <div class="tx_gray_14">系統將根據您勾選的項目，開放相對應的功能</div>
-              ${BgWidget.inlineCheckBox({
-              title: '',
-              gvc,
-              def: vm.data.web_type,
-              array: [
-                { title: '零售購物', value: 'shop' },
-                { title: '授課網站', value: 'teaching' },
-                { title: '預約系統', value: 'reserve' },
-                { title: '餐飲組合', value: 'kitchen' },
-                { title: '秤重交易', value: 'weighing' },
-              ],
-              callback: (array: any) => {
-                vm.data.web_type = array;
-              },
-              type: 'multiple',
-            })}
-            `) +
-              BgWidget.mbContainer(24)
-              +
-              BgWidget.mainCard(html`
-              <div class="d-flex flex-column " style="gap:18px;">
-                <div class="tx_700">商店功能</div>
-                ${createToggle('啟用 AI 選品', '透過 AI 選品功能，用戶可以使用自然語言描述找到所需商品', 'ai_search')}
-                ${GlobalUser.getPlan().id > 0
-                  ? createToggle(
-                      '啟用聊聊功能',
-                      '啟用聊聊功能，方便客戶直接於官網前台與您聯繫，並詢問商品詳細內容',
-                      'chat_toggle'
-                    )
-                  : ''}
-                ${createToggle(
-                  '啟用心願單功能',
-                  '方便客戶收藏並管理喜愛的商品清單，隨時查看心儀商品，提升購物體驗與轉換率',
-                  'wishlist'
-                )}
-                ${createToggle('啟用顧客評論功能', '顧客可以對您的商品進行評論', 'customer_comment')}
-                ${createToggle(
-                  '啟用 Cookie 聲明',
-                  '如需使用廣告追蹤行為，必須啟用 Cookie 聲明，才可發送廣告',
-                  'cookie_check'
-                )}
-                ${createToggle('顯示商品剩餘庫存', '啟用此功能，顧客會在商品頁面看到此商品剩餘的庫存數', 'stock_view')}
-                ${createToggle(
-                  '線上商店開放預購商品',
-                  '啟用此功能，顧客可以在線上商店的商品無庫存時，進行預購',
-                  'pre_order_status'
-                )}
-                ${createToggle(
-                  '商品卡片顯示區間價格',
-                  '啟用後，若商品有多個規格、不同價位，前台商品卡片將會使用價格區間來顯示，關閉則顯示該商品規格中最低價者',
-                  'interval_price_card'
-                )}
-                ${createToggle(
-                  '單獨顯示商品特價',
-                  '啟用此功能，會將含有特價的商品價格或區間，單獨使用紅字顯示，關閉則採用刪改線的方式呈現特價',
-                  'independent_special_price'
-                )}
-                ${createPickUpModeDialog(
-                  '取貨號碼',
-                  '針對特店取貨功能，開啟取貨號碼功能消費者需告知商家取貨號碼並前往特店取貨'
-                )}
-                ${createCheckoutModeDialog(
-                  '訂單結算模式',
-                  '設定訂單結算模式，可調整顧客累積消費金額、會員等級、數據分析的統計機制'
-                )}
-                ${createInvoiceModeDialog(
-                  '發票開立時機',
-                  '設定發票開立的時機，可在商家想要的時間點，開立並發送訂單發票'
-                )}
-              </div>
             `);
+            return (
+              BgWidget.mainCard(html`
+                <div class="tx_700">商店類型</div>
+                <div class="tx_gray_14">系統將根據您勾選的項目，開放相對應的功能</div>
+                ${BgWidget.inlineCheckBox({
+                  title: '',
+                  gvc,
+                  def: vm.data.web_type,
+                  array: [
+                    { title: '零售購物', value: 'shop' },
+                    { title: '授課網站', value: 'teaching' },
+                    { title: '預約系統', value: 'reserve' },
+                    { title: '餐飲組合', value: 'kitchen' },
+                    { title: '秤重交易', value: 'weighing' },
+                  ],
+                  callback: (array: any) => {
+                    vm.data.web_type = array;
+                  },
+                  type: 'multiple',
+                })}
+              `) +
+              BgWidget.mbContainer(24) +
+              drawWebTypeSection() +
+              BgWidget.mainCard(html`
+                <div class="d-flex flex-column " style="gap:18px;">
+                  <div class="tx_700">商店功能</div>
+                  ${createToggle('啟用 AI 選品', '透過 AI 選品功能，用戶可以使用自然語言描述找到所需商品', 'ai_search')}
+                  ${GlobalUser.getPlan().id > 0
+                    ? createToggle(
+                        '啟用聊聊功能',
+                        '啟用聊聊功能，方便客戶直接於官網前台與您聯繫，並詢問商品詳細內容',
+                        'chat_toggle'
+                      )
+                    : ''}
+                  ${createToggle(
+                    '啟用心願單功能',
+                    '方便客戶收藏並管理喜愛的商品清單，隨時查看心儀商品，提升購物體驗與轉換率',
+                    'wishlist'
+                  )}
+                  ${createToggle('啟用顧客評論功能', '顧客可以對您的商品進行評論', 'customer_comment')}
+                  ${createToggle(
+                    '啟用 Cookie 聲明',
+                    '如需使用廣告追蹤行為，必須啟用 Cookie 聲明，才可發送廣告',
+                    'cookie_check'
+                  )}
+                  ${createToggle(
+                    '顯示商品剩餘庫存',
+                    '啟用此功能，顧客會在商品頁面看到此商品剩餘的庫存數',
+                    'stock_view'
+                  )}
+                  ${createToggle(
+                    '線上商店開放預購商品',
+                    '啟用此功能，顧客可以在線上商店的商品無庫存時，進行預購',
+                    'pre_order_status'
+                  )}
+                  ${createToggle(
+                    '商品卡片顯示區間價格',
+                    '啟用後，若商品有多個規格、不同價位，前台商品卡片將會使用價格區間來顯示，關閉則顯示該商品規格中最低價者',
+                    'interval_price_card'
+                  )}
+                  ${createToggle(
+                    '單獨顯示商品特價',
+                    '啟用此功能，會將含有特價的商品價格或區間，單獨使用紅字顯示，關閉則採用刪改線的方式呈現特價',
+                    'independent_special_price'
+                  )}
+                  ${createPickUpModeDialog(
+                    '取貨號碼',
+                    '針對特店取貨功能，開啟取貨號碼功能消費者需告知商家取貨號碼並前往特店取貨'
+                  )}
+                  ${createCheckoutModeDialog(
+                    '訂單結算模式',
+                    '設定訂單結算模式，可調整顧客累積消費金額、會員等級、數據分析的統計機制'
+                  )}
+                  ${createInvoiceModeDialog(
+                    '發票開立時機',
+                    '設定發票開立的時機，可在商家想要的時間點，開立並發送訂單發票'
+                  )}
+                </div>
+              `)
+            );
           },
           global: () => {
             return BgWidget.mainCard(html`

package/lowcode/cms-plugin/shopping-product-setting.js

@@ -645,7 +645,7 @@ export class ShoppingProductSetting {
                                 const language_data = postMD.language_data[ShoppingProductSetting.select_language];
                                 imageLibrary.selectImageFromArray(language_data.preview_image, {
                                     gvc: gvc,
-                                    title: html ` <div class="d-flex flex-column" >圖片庫</div>`,
+                                    title: html ` <div class="d-flex flex-column">圖片庫</div>`,
                                     getSelect: imageUrl => {
                                         variant[`preview_image_${ShoppingProductSetting.select_language}`] = imageUrl;
                                         gvc.notifyDataChange(id);
@@ -1382,7 +1382,7 @@ export class ShoppingProductSetting {
                 </div>
                 <div class="flex-fill"></div>
                 <div class="d-flex align-items-center justify-content-end w-100 mt-2">
-                  <div class="me-2 ">
+                  <div class="me-2">
                     ${LanguageBackend.switchBtn({
                                 gvc: gvc,
                                 language: vm.language,

package/lowcode/cms-plugin/shopping-product-setting.ts

@@ -741,7 +741,7 @@ export class ShoppingProductSetting {
                                   ];
                                   imageLibrary.selectImageFromArray(language_data.preview_image, {
                                     gvc: gvc,
-                                    title: html` <div class="d-flex flex-column" >圖片庫</div>`,
+                                    title: html` <div class="d-flex flex-column">圖片庫</div>`,
                                     getSelect: imageUrl => {
                                       variant[`preview_image_${ShoppingProductSetting.select_language}`] = imageUrl;
                                       gvc.notifyDataChange(id);
@@ -1643,7 +1643,7 @@ export class ShoppingProductSetting {
                 </div>
                 <div class="flex-fill"></div>
                 <div class="d-flex align-items-center justify-content-end w-100 mt-2">
-                  <div class="me-2 ">
+                  <div class="me-2">
                     ${LanguageBackend.switchBtn({
                       gvc: gvc,
                       language: vm.language,