\n {this.props.list.map((el, i, _) => (\n \n {this.props.getChild(el, i)}\n
\n ))}\n \n )\n }\n\n getChild(el, i) {\n return this.props.getChild(el, i)\n }\n\n onChange(list) {\n return this.props.onChange(list)\n }\n\n componentDidMount() {\n dragula([document.getElementById(this.id)], {\n ...(this.props.events || {}),\n accepts: (el, target, source, sibling) => {\n // drop to existent item\n return sibling?.dataset?.index !== undefined && target.contains(el)\n },\n }).on('drop', this.dragulaOnDrop())\n }\n\n dragulaOnDrop() {\n let component = this\n return (el, target, source, sibling) => {\n let currIndex = parseInt(el.dataset.index)\n let dest = parseInt(sibling?.dataset?.index)\n\n if (dest > currIndex) {\n dest = dest - 1\n }\n const l = component.props.list\n component.onChange(array_move(l, currIndex, dest))\n }\n }\n}\n","import React, { useState } from 'react'\nimport { Icon } from '@guillotinaweb/react-gmi'\n\nimport './accordion-card.css'\n\n/**\n * This component is to dropdown content inside a card:\n *\n * ***************\n * * Title v *\n * ***************\n *\n * And on click to the caret icon:\n *\n * ***************\n * * Title ^ * -> props.title\n * ***************\n * * Some *\n * * Content * -> props.children\n * ***************\n *\n */\nexport function AccordionCard({\n children,\n className = '',\n defaultCollapsed = true,\n renderCollapsed = true,\n onToggle,\n title,\n ...props\n}) {\n const [collapsed, setCollapsed] = useState(defaultCollapsed)\n const toggle = () => setCollapsed((v) => !v)\n const iconPosition = collapsed ? 'down' : 'up'\n\n return (\n \n \n {title}\n {\n if (onToggle) onToggle(!collapsed)\n toggle()\n }}\n className=\"collapse\"\n >\n \n {/* We want to render the children always (even when is collapsed) because otherwise\n form validation doesn't work */}\n {(!collapsed || renderCollapsed) && (\n
\n )\n}\n","import React, { useRef } from 'react'\nimport { Input } from 'antd'\n\nexport function ProductName({\n lang,\n label,\n field = 'nombre',\n setNames,\n names,\n required,\n maxLength,\n}) {\n const ref = useRef()\n return (\n \n {children}\n
\n )}\n {label}
\n )}\n \n \n Town\n
\nAddress:
\n setAddress(e.target.value)} />\n Postal code:
\n setCp(e.target.value)} />\n Town:
\n setLocality(e.target.value)} />\n Province:
\n Country:
\n \n\n
Display map:
\n\n \n Paste here a{' '}\n \n Google Map\n {' '}\n Link (with the absolute URL, from https://www.google.com/maps/@...)\n \n Map image:
\n\n \n \n
\n )\n}\n\nfunction ImageSection({ prod, referencia }) {\n const ctx = useTraversal()\n const [uploading, setUploading] = useState({})\n const [error, setError] = useState('')\n const valid_types = ['anv800', 'rev800', 'art800', 'o4', 'o5']\n const isUploading = Object.keys(uploading).length > 0\n\n const [imgPaths, setImgPaths] = useState(prod[imgBehavior]?.images || {})\n\n async function uploadImage(file, referencia, imgType) {\n const res = await ctx.client.rest.request(\n `${ctx.path}@upload-image/${referencia}/${imgType}`,\n {\n method: 'POST',\n body: file.data,\n }\n )\n if (res.status >= 300) {\n setUploading(({ ...state }) => {\n delete state[imgType]\n return state\n })\n setError(\n (error) => error + `Error ${res.status} uploading image ${imgType}`\n )\n } else {\n const body = await res.json()\n setImgPaths((imgPaths) => ({\n ...imgPaths,\n [`${referencia}_${imgType}`]: {\n path: body.path,\n },\n }))\n setUploading(({ ...state }) => {\n delete state[imgType]\n return state\n })\n }\n }\n\n async function onChange(files) {\n setError('')\n const firstBatch = []\n const secondBatch = []\n\n // 1. Validate filename and extension\n for (const i in files) {\n const f = files[i]\n const [filename, ext] = f.filename.split('.')\n let imgType = filename.split('_')\n imgType = imgType[imgType.length - 1]\n\n if (!valid_types.includes(imgType)) {\n setError(\n `Invalid image type \"${imgType}\". Must be one of these: ${valid_types}`\n )\n return\n }\n\n const expectedExt = ['o4', 'o5', 'art800'].includes(imgType)\n ? 'jpg'\n : 'png'\n\n if (expectedExt !== ext) {\n setError(\n `Expected \"${expectedExt}\" extension for img ${imgType}, got \"${ext}\"`\n )\n return\n }\n\n if (['o4', 'o5'].includes(imgType)) {\n secondBatch.push([f, referencia, imgType])\n } else {\n firstBatch.push([f, referencia, imgType])\n }\n }\n\n // 2. if the validation passed, now we upload the images\n // We upload images in two batched to prevent API conflicts\n await Promise.all(\n firstBatch.map(([f, ref, imgType]) => {\n setUploading((state) => ({ ...state, [imgType]: true }))\n return uploadImage(f, ref, imgType)\n })\n )\n\n await Promise.all(\n secondBatch.map(([f, ref, imgType]) => {\n setUploading((state) => ({ ...state, [imgType]: true }))\n return uploadImage(f, ref, imgType)\n })\n )\n }\n\n return (\n Images
\n\n \n {anyada} - {ref}\n \n }\n >\n
\n )\n })}\n \n \n
\n \n
\n \n {error &&
\n
\n \n )\n}\n\nfunction ImagePreview({ prod, referencia, imgType, path, uploading }) {\n const prod_type = prod.tipo.substring(1, 3)\n const folder = ['o4', 'o5'].includes(imgType) ? 'proriginal' : 'prfmtgrande'\n const extension = ['o4', 'o5', 'art800'].includes(imgType) ? 'jpg' : 'png'\n\n return (\n Use the following button to upload multiple images at once:
\n\n
\n IMPORTANT: Make sure each file name ends with one of these\n identifiers:
\n anv800.png, rev800.png, art800.jpg, o4.jpg{' '}\n or o5.jpg\n
\n {uploading && (\n
\n )\n}\n\nexport function MultiFileUpload({ label, onChange, ...props }) {\n const changed = async (event) => {\n const files = Array.from(event.target.files)\n await onChange(await Promise.all(files.map((f) => lightFileReader(f))))\n }\n\n return (\n \n {\n e.currentTarget.src =\n prod_type === 'pk' ? fallbackPackImg : fallbackProdImg\n }}\n src={\n path\n ? `${cdn}${path}`\n : `${cdn}${folder}/${prod_type}/${referencia}_${imgType}.${extension}`\n }\n />\n
\n \n {imgType}.{extension}\n \n \n \n
\n )\n}\n","import React from 'react'\nimport { Table, Collapse } from 'antd'\nimport { getDomainFromShop } from '../../../../utils'\n\nconst statusColors = {\n new_product: '#6c6f00',\n selling: '#2e7d32',\n notavailable: '#d32f2f',\n descatalogued: '#707070',\n invalid: '#707070',\n discontinued: '#707070',\n}\n\nexport default function Options({ product }) {\n const options = Object.values(product.opciones || {})\n const optionsByRef = groupBy(options, 'referencia')\n const refs = unify(\n options.sort((a, b) => b.anyada - a.anyada).map((a) => a.referencia)\n )\n\n function getHeader(ref) {\n const [first] = optionsByRef[ref]\n return (\n <>\n {first.anyada && (\n \n Year: \n {first.anyada}{' '}\n \n )}\n {first.capacidad && (\n \n Capacity: \n {first.capacidad}{' '}\n \n )}\n {(first.anyada || first.capacidad) && ' - '}\n {ref}\n \n )\n }\n\n return (\n {h1}
\n \n \n\n \n setReview((o) => ({\n ...o,\n [lang]: {\n ...langReview,\n reviewed: e.target.value,\n date: new Date().toISOString(),\n author: localStorage.getItem('email'),\n },\n }))\n }\n disabled={!superAdmin}\n value={langReview.reviewed ?? false}\n optionType=\"button\"\n >\n Reviewed \n No reviewed \n \n \n {\n setReview((o) => ({\n ...o,\n [lang]: {\n ...langReview,\n description,\n date: new Date().toISOString(),\n author: localStorage.getItem('email'),\n },\n }))\n }}\n />\n \n
\n )\n }}\n \n
\n )\n }\n\n return (\n <>\n {dataToRender.length === 0 && (\n <>\n \n \n More {rest.length} URLs - we do not have this option to\n compare with our price.\n \n \n `${record.url}-///-${record.anyada}-${record.capacity}`\n }\n size=\"small\"\n />\n
\n )}\n {onUpdatePage && (\n Price comparator
\n\n \n {optionCountries.map((c) => (\n {ALL_COUNTRIES[c]} \n ))}\n \n \n {updating ? 'Deleting...' : 'Delete selected'}\n \n \n {updating ? 'Updating...' : 'Update selected'}\n \n showDrawer(true)}\n >\n + Add URL\n \n
\n \n \n \n
\n \n {pack['tipo'] === '/pk' && (\n {pack.nombre}
\n \n\n
\n )}\n \n {pack.pack_descatalogado\n ? 'Make the pack available'\n : 'Descatalogue the pack when the products in the pack are in a selling condition.'}\n
\n \n\n null}>\n {(lang) => (\n \n \n )}\n \n
\n
\n
\n setDiscount(v)}\n placeholder=\"Write the discount in %\"\n value={discount}\n />\n {somePresent && (\n
\n \n updateProductState({ ...o, cantidad })\n }\n min={1}\n />\n ),\n },\n {\n title: 'Product',\n key: 'ref',\n className: 'drag-visible',\n width: 500,\n dataIndex: 'ref',\n render: (v, o) => (\n {\n setDiscount(0)\n updateProductState({ ...o, regalo })\n }}\n />\n ),\n },\n ]}\n rowSelection={{\n selectedRowKeys,\n onChange: setSelectedRowKeys,\n }}\n components={{\n body: {\n wrapper: (props) => (\n {\n if (oldIndex !== newIndex) {\n const newProds = arrayMove(\n products,\n oldIndex,\n newIndex\n ).map((p, index) => ({ ...p, index }))\n\n setProducts(newProds)\n }\n }}\n {...props}\n />\n ),\n row: ({ className, style, ...restProps }) => {\n const index = products.findIndex(\n (x) => x.index === restProps['data-row-key']\n )\n return \n {selectedRowKeys.length > 0 && (\n {\n setProducts((ps) =>\n ps.filter((p) => !selectedRowKeys.includes(p.index))\n )\n setSelectedRowKeys([])\n }}\n >\n Remove selected\n \n )}\n \n setProducts((p) => [\n ...p,\n { cantidad: 1, regalo: false, index: p.length },\n ])\n }\n >\n Add new product\n \n
\n Pack name
\n\n
Description
\n\n
Labels
\n\n
Discount in % (optional)
\n\n Disable the products that are gifts in order to add a discount to\n the pack.\n
\n )}\n \n
Pack Products
\n\n
Pack Image
\n\n \n {generating ? 'Generating...' : 'Generate image'}\n \n
\n \n {\n e.currentTarget.src = fallbackImg\n e.currentTarget.style.display = 'block'\n }}\n src={\n img\n ? `${cdn}${img}`\n : `${cdn}prfmtgrande/pk/${pack.referencia_pack}_anv800.png`\n }\n />\n
\n Venta privada
\n\n \n {\n cache.current[value] = pnames\n }}\n productTypes={['!/pk', '!/co/pk']}\n defaultProductInfo={cache.current[value]}\n disabledIds={new Set(products.filter((p) => !p.add).map((p) => p.ref))}\n products={filteredProducts}\n type={type}\n onChange={(refs, prods) => {\n let ref = refs[refs.length - 1]\n\n if (type === 'group') ref += `#${capacity}`\n\n updateProductState({\n ...column,\n ref,\n nombre: prods.find((p) => p.ref === ref)?.nombre,\n })\n }}\n />\n {type === 'group' && (\n {\n setCapacity(newCapacity)\n updateProductState({\n ...column,\n ref: column.ref.replace(`#${capacity}`, `#${newCapacity}`),\n })\n }}\n >\n {Object.keys(BOTTLE_CAPACITY_LITERS).map((c) => (\n {getCapacityText(c)} \n ))}\n \n )}\n
\n )\n}\n\nfunction headersForImageEndpoinds(ctx, file) {\n const key = `last-mod-date:${ctx.path}`\n const headers = ctx.client.rest.getHeaders()\n\n headers['last-mod-date'] = sessionStorage.getItem(key)\n\n if (file) {\n headers['Content-Type'] = file['content-type']\n }\n\n // As just after the requests we do a ctx.refresh,\n // we clean up the last-mod-date to take the value\n // from the refresh response.\n sessionStorage.removeItem(key)\n\n return headers\n}\n","import React, { lazy, useState, Suspense, useEffect } from 'react'\nimport createStore from 'teaful'\nimport { Affix, Menu, Button, Dropdown } from 'antd'\nimport { ContextToolbar } from '@guillotinaweb/react-gmi'\nimport { PanelPermissions } from '@guillotinaweb/react-gmi'\nimport { useTraversal, useLocation } from '@guillotinaweb/react-gmi'\n\nimport {\n FileImageOutlined,\n MoreOutlined,\n VideoCameraOutlined,\n DownOutlined,\n EyeOutlined,\n} from '@ant-design/icons'\n\nimport ProductOptions from './partials/options'\nimport useSaveProduct from './useSaveProduct'\nimport { AuditLogTab } from '../../../common/auditlog'\nimport { ContentReviewTab } from '../../../components/content-review-tab'\nimport { PriceComparatorTab } from '../../../components/price-comparator-tab'\nimport { PackEditor } from './pack_editor'\nimport { SEOTab } from '../../../components/seo-tab'\nimport { SITES, SITES_INFO } from '../../../consts'\nimport { TabsPanelWithLock } from '../../../components/tab-panel-with-lock'\nimport { getDomain, getProductMask } from '../../../utils'\n\nimport './styles.css'\n\nexport const { useStore, getStore } = createStore({})\n\nconst QUERY_PARAM = 'menu'\nconst loadComponent = (key) =>\n lazy(() =>\n import(`./partials/${key}`).catch(() => ({ default: () => 'No content' }))\n )\n\nfunction ProductEditor() {\n const [location, setLocation] = useLocation()\n const defaultItem = location.get('tab') === 'Images' ? 'images' : 'details'\n const item = location.get(QUERY_PARAM) || defaultItem\n const ctx = useTraversal()\n const product = ctx.state.context\n const [Comp, setComp] = useState()\n const [key, setKey] = useState(item)\n const [saving, save] = useSaveProduct()\n\n // Initialize\n useStore.region(product.region)\n useStore.tags_by_category(product.tags_by_category)\n useStore.otras_props(product.otras_props)\n useStore.new_otras_props(product.new_otras_props)\n\n function onClick(e) {\n setLocation({ [QUERY_PARAM]: e.key })\n setComp(loadComponent(e.key))\n setKey(e.key)\n }\n\n function onSave() {\n const [store] = getStore()\n save(store)\n }\n\n useEffect(() => {\n const [, setStore] = getStore()\n setStore({})\n setComp(loadComponent(item))\n }, [])\n\n const menu = (\n \n )\n\n return (\n \n \n \n
\n \n {product.nombre}
\n\n \n \n \n \n
\n \n \n \n \n\n \n \n\n \n \n \n
\n \n )\n}\n\nfunction Complements() {\n const ctx = useTraversal()\n const complement = ctx.state.context\n const ref = complement.opciones?.[0]?.referencia\n return (\n \n {Comp && (\n
\n \n For now use the{' '}\n {ref ? (\n \n old backoffice page\n \n ) : (\n 'old backoffice page'\n )}{' '}\n for complements.\n
\n )\n}\n\nexport function ProductView(props) {\n const isPack = props.state.path.startsWith('/packs')\n const isComplement = props.state.path.startsWith('/complementos')\n const ctx = useTraversal()\n const Options = () => \n Percentages:\n
\n \n {value.map((grape, index) => (\n `${grape.id}: ${value}%`}\n style={{ margin: 10, width: 400 }}\n max={100}\n value={grape.otros_datos.porcentaje}\n onChange={(porcentaje) =>\n onEditPercentage(\n value.map((g, i) =>\n i === index ? { ...g, otros_datos: { porcentaje } } : g\n )\n )\n }\n onInput={(txt) => {\n const porcentaje = parseInt(\n txt.split(':')[1].replace('%', '').trim(),\n 10\n )\n onEditPercentage(\n value.map((g, i) =>\n i === index ? { ...g, otros_datos: { porcentaje } } : g\n )\n )\n }}\n />\n ))}\n
\n \n )}\n \n )\n}\n","import React from 'react'\nimport { Loading } from '@guillotinaweb/react-gmi'\nimport { FileUpload } from '@guillotinaweb/react-gmi'\nimport { message, Input } from 'antd'\n\nimport { I18NField } from '../components/i18nfield'\nimport { getMediaUrl } from '../consts'\n\nexport function BaseField({ label, help, children, ...props }) {\n return (\n \n
\n )\n}\n\nexport function Field({\n label,\n value,\n onChange,\n placeholder,\n readonly = false,\n disabled = false,\n type = 'text',\n className = [],\n help = '',\n ...rest\n}) {\n return (\n \n \n
\n \n
\n \n
\n \n {children}\n
\n {help && {help}
}\n{labelTxt}
\n )}\n {field && (\n \n
\n )\n}\n\nexport function I18NRichText({\n langs = LANGS,\n onChange,\n vals = {},\n label,\n id = '',\n modifyContent = true,\n editorProps = {},\n}) {\n const initial = toDict(LANGS)\n\n const [values, setValues] = useSetState({ ...initial, ...vals })\n const [current, setCurrent] = React.useState(langs[0])\n const ref = React.useRef()\n\n const changeValue = (lang) => (ev) => {\n setValues({ [lang]: ev })\n }\n\n React.useEffect(() => {\n if (ref.current) {\n if (onChange) onChange(values)\n } else {\n ref.current = true\n }\n }, [values])\n\n return (\n {label}
\n \n
\n \n
\n {modifyContent && - \n {langs.map((item) => (\n
\n {label &&
\n \n )\n}\n","import React from 'react'\nimport { RestClient } from '@guillotinaweb/react-gmi'\nimport {\n getProductName,\n getShopCountryHeaders,\n getStoreFromCountry,\n getTotalStock,\n} from '../utils'\n\nexport const ErpClientContext = React.createContext(null)\n\nexport class ErpClient {\n constructor(url, auth) {\n url = url || '/db/erp'\n this.url = url\n this.rest = new RestClient(url, auth)\n }\n\n async getImportedInvoice(template) {\n const res = await this.rest.post('/orders/@imported_invoice_data', {\n template,\n })\n\n if (res.status >= 300) {\n throw new Error(await res.text())\n }\n\n return res.json()\n }\n\n async getImportedInvoiceV2(template) {\n const res = await this.rest.post('/orders/@imported_invoice_data_v2', {\n template,\n })\n\n if (res.status >= 300) {\n throw new Error(await res.text())\n }\n\n return res.json()\n }\n\n async getAllPaymentCommissionCompanies() {\n const res = await this.rest.get(\n '/orders/@get_all_payment_commission_companies'\n )\n\n if (res.status >= 300) {\n throw new Error(await res.text())\n }\n\n return res.json()\n }\n\n async getImportedInvoiceEurotax() {\n const res = await this.rest.get('/orders/@get_all_invoices_eurotax')\n\n if (res.status >= 300) {\n throw new Error(await res.text())\n }\n\n return res.json()\n }\n\n async getImportedInvoiceWarehouseCost() {\n const res = await this.rest.get('/orders/@get-worker-cost')\n\n if (res.status >= 300) {\n throw new Error(await res.text())\n }\n\n return res.json()\n }\n\n async getProvidersMarketplace() {\n const res = await this.fetch('/@proveedores-marketplace')\n\n if (res.status >= 300) {\n throw new Error(await res.text())\n }\n\n return res.json()\n }\n\n async getProductsWithMatch() {\n const res = await this.fetch('/@get-products-with-match')\n\n if (res.status >= 300) {\n throw new Error(await res.text())\n }\n\n return res.json()\n }\n\n async editMatchs(data) {\n const res = await this.rest.post('/@edit-product-with-match', {\n data,\n })\n if (res.status >= 300) {\n throw new Error(await res.text())\n }\n\n return res.json()\n }\n\n async deleteMatch(data) {\n const res = await this.rest.post('/@delete-product-match', {\n data,\n })\n if (res.status >= 300) {\n throw new Error(await res.text())\n }\n\n return res.json()\n }\n\n async getTotalOpinions() {\n const res = await this.fetch(`/opinions/@total`)\n\n if (res.status >= 300) {\n throw new Error(await res.text())\n }\n\n return res.json()\n }\n\n async deletePriceComparator(data) {\n const res = await this.rest.delete('/@price-comparator', {\n data,\n })\n return await res.json()\n }\n\n async upsertPriceComparator(data, country) {\n const res = await this.rest.patch('/@price-comparator', {\n data,\n country,\n })\n if (res.status >= 300) {\n throw new Error(await res.text())\n }\n return await res.json()\n }\n\n async getPriceComparator(group, country = 'es', page = 0) {\n let params = {\n groups: [group],\n serializer: 'summary-all-opts',\n opciones: {\n estado: ['selling'],\n },\n }\n\n // Load top 25 ranking products (with pagination)\n if (!group) {\n const size = 25\n params = {\n size,\n cursor: page * size,\n serializer: 'summary-all-opts',\n sort_by: [\n {\n field: 'opciones.in_stock',\n order: 'asc',\n },\n {\n field: 'ranking',\n order: 'asc',\n },\n ],\n tipo: '/vi',\n opciones: {\n estado: ['selling'],\n },\n }\n }\n\n const { search } = await fetch(`/db/guillotina/@search-product`, {\n method: 'POST',\n headers: this.getHeaders({ country, shop: getStoreFromCountry(country) }),\n body: JSON.stringify(params),\n }).then((r) => r.json())\n\n const prods = await this.rest\n .post('/@price-comparator', { country, groups: search.map((p) => p.id) })\n .then((r) => r.json())\n\n const competence = prods.reduce((acc, c) => {\n if (!acc[c.product_group]) acc[c.product_group] = [c]\n else acc[c.product_group].push(c)\n return acc\n }, {})\n let result = []\n let withoutOption = []\n\n for (let prod of search) {\n const options = prod.opciones || []\n const comp = competence[prod.id] || [null]\n\n for (let prodCompetence of comp) {\n let [option] = options\n\n if (prodCompetence) {\n option = options.filter(\n (o) =>\n o.anyada === prodCompetence.anyada &&\n o.capacidad === prodCompetence.capacity\n )[0]\n }\n\n if (!option) {\n withoutOption.push(prodCompetence)\n continue\n }\n\n result.push({\n product_group: prod.id,\n delivery_country: country,\n ...(prodCompetence || {}),\n id_producto: option.referencia,\n our_price: option.precio_sin_impuestos,\n our_name: getProductName(\n prod.nombre,\n option.anyada,\n option.capacidad\n ),\n our_offer_price: option.oferta?.precio_oferta,\n our_taxes: option.impuestos,\n path: prod.path,\n })\n }\n }\n\n return [result, withoutOption]\n }\n\n async getOpinions(status = 'pend', page = 0, pageSize = 10) {\n const res = await this.fetch(\n `/opinions/@list?status=${status}&page=${page}&page_size=${pageSize}`\n )\n\n if (res.status >= 300) {\n throw new Error(await res.text())\n }\n\n return res.json()\n }\n\n async editOpinion(id, opinion, titulo, nombre_usuario, nota, estado, shop) {\n const path = `/opinions/${shop[0].toUpperCase()}${id}/`\n const body = JSON.stringify({\n opinion,\n titulo,\n nombre_usuario,\n nota,\n estado,\n })\n const res = await this.fetch(path, { method: 'PATCH', body })\n\n if (res.status >= 300) {\n throw new Error(await res.text())\n }\n\n return true\n }\n\n async createOffers(offers) {\n const path = '/offers/'\n const body = JSON.stringify(offers)\n const res = await this.fetch(path, { method: 'POST', body })\n\n if (res.status >= 300) {\n throw new Error(await res.text())\n }\n\n return true\n }\n\n async getFreeShippingRates() {\n const path = '/promos_trg/@search'\n const method = 'POST'\n const response = await this.fetch(path, { method })\n\n return response\n }\n\n async createFreeShippingRate(freeShippingRate) {\n const path = '/promos_trg/'\n const method = 'POST'\n const body = JSON.stringify(freeShippingRate)\n const res = await this.fetch(path, { method, body })\n\n if (res.status >= 300) {\n throw new Error(await res.text())\n }\n\n return true\n }\n\n async deleteFreeShippingRate(id) {\n const path = `/promos_trg/${id}`\n const method = 'DELETE'\n const response = await this.fetch(path, { method })\n\n return response\n }\n\n async publishOpinion(id, shop) {\n const path = `/opinions/${shop[0].toUpperCase()}${id}/@publish`\n const res = await this.fetch(path, { method: 'POST' })\n\n if (res.status >= 300) {\n throw new Error(await res.text())\n }\n\n return true\n }\n\n async refuseOpinion(id, shop) {\n const path = `/opinions/${shop[0].toUpperCase()}${id}/@refuse`\n const res = await this.fetch(path, { method: 'POST' })\n\n if (res.status >= 300) {\n throw new Error(await res.text())\n }\n\n return true\n }\n\n async getAnalytics(since, to, interval = 'month') {\n const res = await this.rest.post('/analytics/@billing', {\n since,\n to,\n interval,\n })\n return await res.json()\n }\n\n async fetch(path, { method = 'GET', body } = {}) {\n let data = { method, body }\n data.headers = this.getHeaders() || {}\n return await fetch(`${this.url}${path}`, data)\n }\n\n async get(path, shop = 'vinissimus') {\n let data = {}\n data.headers = this.getHeaders() || {}\n data.headers['x-shop'] = shop\n return await fetch(`${this.url}${path}`, data)\n }\n\n getHeaders(info) {\n const token = localStorage.getItem('token')\n if (!token) {\n return {}\n }\n return {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n Authorization: 'Bearer ' + token,\n ...getShopCountryHeaders(info),\n }\n }\n\n async request(path, method, body, headers) {\n let data = {}\n body = body || {}\n data.method = method\n data.body = JSON.stringify(body)\n data.headers = headers || this.getHeaders()\n return await fetch(`${this.url}${path}`, data)\n }\n\n async fetchOrder(id) {\n const token = localStorage.getItem('token')\n if (!token) return {}\n\n const res = await this.fetch(`/orders/${id}/@full`, {\n headers: this.getHeaders(),\n })\n\n if (!res.ok) return null\n\n const order = await res.json()\n const info = { shop: order.shop, country: order.foto_direccion.id_pais }\n\n // Add new unitary prices to each line\n const prods = await fetch('/db/guillotina/@prod-by-referencia', {\n method: 'POST',\n headers: this.getHeaders(info),\n body: JSON.stringify({\n referencias: order.lines.map((line) => line.id_producto),\n opciones: {\n estado: ['selling', 'notavailable'],\n },\n }),\n }).then((res) => res.json())\n\n order.lines = order.lines.map((l) => {\n const option = prods[l.id_producto]?.opciones?.[0] || {}\n const stock = getTotalStock(option)\n\n return {\n ...l,\n new_taxes: option.impuestos ?? l.tipo_iva,\n new_price: option.precio_sin_impuestos ?? l.base_imponible,\n old_price: l.base_imponible,\n old_taxes: l.tipo_iva,\n stock: Math.max(stock, l.cantidad),\n option,\n }\n })\n\n return order\n }\n\n async getProductsOutCatalog() {\n const response = await this.fetch('/@ids-products-out-catalog', {\n method: 'GET',\n headers: this.getHeaders(),\n })\n\n return response.json()\n }\n\n getAnalytics() {\n return this.fetch('/analytics/@product-traffic-and-performance', {\n headers: this.getHeaders(),\n }).then((r) => r.json())\n }\n\n /**\n * Update Order Products\n *\n * @param {object} order\n * @param {object} data\n * @example data = {\n * \"product_lines\": [\n * {\"id_producto\": \"p1\", \"cantidad\": 333},\n * {\"id_producto\": \"p3\", \"cantidad\": 3},\n * ],\n * \"check_last_bottles\": true,\n * \"change_price\": false,\n * \"forced\": true,\n * }\n * @returns Promise\n */\n async updateOrderProducts(order, data) {\n const shop = order.shop\n const id = `${shop[0].toUpperCase()}${order.id_pedido}`\n return this.fetch(`/orders/${id}/@update-products`, {\n method: 'POST',\n headers: this.getHeaders({\n shop,\n country: order.foto_direccion.id_pais,\n }),\n body: JSON.stringify(data),\n })\n }\n}\n","import React, { useEffect, useRef, useState } from 'react'\nimport { Select, Spin, Tag } from 'antd'\nimport { EyeOutlined, SortAscendingOutlined } from '@ant-design/icons'\n\nimport { getCapacityText, arrayMove, getShopCountryHeaders } from '../utils'\nimport { isProd } from '../consts'\n\nimport './product-selector.css'\n\n/**\n * This component is to render a searcher with product suggestions,\n * and select some products with this tool.\n */\nexport function ProductSelector({\n defaultProductInfo,\n disabled,\n disabledIds = new Set([]),\n onChange,\n onChangeProductInfo = () => {},\n onSearch,\n placeholder = 'Search products to add',\n prodSugggestions,\n productTypes,\n width = '100%',\n style = {},\n closable = true,\n products = [],\n state,\n type = 'group',\n}) {\n const DEBOUNCE_TIME = 320\n const debounceTimeout = useRef()\n const [productInfo, setProductInfo] = useState({})\n const [suggestions, setSuggestions] = useState([])\n const [loading, setLoading] = useState(false)\n const subdomain = isProd() ? 'www' : 'stage'\n\n function getProdId(product) {\n return type === 'refs' ? product.ref : product.id\n }\n\n function getName(pid) {\n return productInfo[pid]?.name ? `${productInfo[pid].name} (${pid})` : pid\n }\n\n function onSearchProduct(text) {\n setLoading(true)\n if (onSearch) return onSearch(text)\n\n clearTimeout(debounceTimeout.current)\n debounceTimeout.current = setTimeout(() => {\n fetchProductSuggestions({ text, type, productTypes, state })\n .then(setSuggestions)\n .then(() => setLoading(false))\n }, DEBOUNCE_TIME)\n }\n\n useEffect(() => {\n if (!Array.isArray(prodSugggestions)) return\n setSuggestions(prodSugggestions)\n setLoading(false)\n }, [prodSugggestions])\n\n useEffect(() => {\n if (type !== 'refs') return\n if (defaultProductInfo) return setProductInfo(defaultProductInfo)\n\n // ⚠️ This prevents doing an expensive open search\n if (!products || products.length === 0) return\n\n fetch(`/db/guillotina/@search-product`, {\n method: 'POST',\n headers,\n body: JSON.stringify({\n referencias: products,\n serializer: 'summary-all-opts',\n }),\n })\n .then((r) => r.json())\n .then(({ search }) => {\n const pinfo = search.reduce((o, c, index) => {\n const op =\n c.opciones.find((p) => p.referencia === products[index]) || {}\n const vintage = op.anyada ? ` ${op.anyada}` : ''\n const capacity = op.capacidad\n ? ` ${getCapacityText(op.capacidad)}`\n : ''\n\n o[op.referencia] = {\n name: c.nombre + vintage + capacity,\n url: `${c.id}/#${op.id}`,\n }\n\n return o\n }, {})\n setProductInfo(pinfo)\n onChangeProductInfo(pinfo)\n })\n .catch((e) => console.error(e))\n return () => clearTimeout(debounceTimeout.current)\n }, [])\n\n function renderTag(object) {\n const { value, label, onClose } = object\n\n return (\n {label}
}\n \n changeValue(current)(content)}\n height=\"200px\"\n {...editorProps}\n />\n )}\n {!modifyContent && (\n
\n )}\n \n
\n {modifyContent && (\n - \n {langs.map((item) => (\n
\n \n {diffText.split('\\n').map((l) => {\n if (l.startsWith('+'))\n return (\n {l + '\\n'}\n )\n else if (l.startsWith('-'))\n return (\n {l + '\\n'}\n )\n else return l + '\\n'\n })}\n \n
\n )\n}\n\nfunction AuditLogTab() {\n const Ctx = useTraversal()\n const { client } = Ctx\n const [url] = useLocation()\n const path = urljoin(client.rest.url, url.get('path'))\n\n const [logs, setLogs] = useState([])\n const [searchAfter, setSearchAfter] = useState(null)\n const [nextSearchAfter, setNextSearchAfter] = useState(null)\n\n const [isLoadingMore, setIsLoadingMore] = useState(true)\n const [selectedRow, setSelectedRow] = useState(null)\n\n useEffect(() => {\n async function load() {\n setIsLoadingMore(true)\n const [resp, data] = await loadAuditlog(client, path, searchAfter)\n if (resp.status === 200) {\n setLogs([...logs, ...data.logs])\n setNextSearchAfter(data.search_after)\n } else {\n Ctx.flash(`${resp.status} - ${JSON.stringify(data)}`, 'danger')\n }\n setIsLoadingMore(false)\n }\n load()\n }, [client, path, searchAfter])\n\n const atTheEnd = logs.length > 0 && searchAfter === nextSearchAfter\n\n const getPrevDoc = (i, arr, fallback) => {\n return i + 1 < arr.length ? arr[i + 1] : fallback\n }\n\n const getDetailedDiff = (doc, i, arr) => {\n const oldDoc = getPrevDoc(i, arr, doc).payload\n const newDoc = doc.payload\n return diffString(oldDoc, newDoc, { color: false })\n }\n\n const getDiffKeys = (doc, i, arr) => {\n const oldDoc = getPrevDoc(i, arr, doc).payload\n const newDoc = doc.payload\n return Object.keys(diff(oldDoc, newDoc) || {}).join(', ')\n }\n\n return (\n \n \n
\n \n \n \n \n \n \n Date \n User \n Action \n Payload \n \n \n \n {logs.map((doc, i, arr) => (\n \n {formatDateWithSeconds(doc.date)} \n {doc.user} \n {doc.action} \n \n \n setSelectedRow(selectedRow === doc.date ? null : doc.date)\n }\n diffText={\n selectedRow === doc.date\n ? getDetailedDiff(doc, i, arr)\n : getDiffKeys(doc, i, arr)\n }\n />\n \n \n ))}\n \n \n {isLoadingMore && !atTheEnd && setSearchAfter(nextSearchAfter)}\n >\n {atTheEnd ? 'No more logs to load' : 'Load more'}\n \n )}\n
\n )\n}\n\nexport { AuditLogTab }\n","var map = {\n\t\"./company\": [\n\t\t421,\n\t\t1\n\t],\n\t\"./company.js\": [\n\t\t421,\n\t\t1\n\t],\n\t\"./contact\": [\n\t\t422,\n\t\t2\n\t],\n\t\"./contact.js\": [\n\t\t422,\n\t\t2\n\t],\n\t\"./details\": [\n\t\t423,\n\t\t3\n\t],\n\t\"./details.js\": [\n\t\t423,\n\t\t3\n\t],\n\t\"./elaboration\": [\n\t\t424,\n\t\t4\n\t],\n\t\"./elaboration.js\": [\n\t\t424,\n\t\t4\n\t],\n\t\"./location\": [\n\t\t234\n\t],\n\t\"./location.js\": [\n\t\t234\n\t],\n\t\"./origins\": [\n\t\t425,\n\t\t5\n\t],\n\t\"./origins.js\": [\n\t\t425,\n\t\t5\n\t],\n\t\"./team\": [\n\t\t426,\n\t\t6\n\t],\n\t\"./team.js\": [\n\t\t426,\n\t\t6\n\t],\n\t\"./territory\": [\n\t\t427,\n\t\t7\n\t],\n\t\"./territory.js\": [\n\t\t427,\n\t\t7\n\t],\n\t\"./wines\": [\n\t\t428,\n\t\t8\n\t],\n\t\"./wines.js\": [\n\t\t428,\n\t\t8\n\t]\n};\nfunction webpackAsyncContext(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\treturn Promise.resolve().then(function() {\n\t\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\t\te.code = 'MODULE_NOT_FOUND';\n\t\t\tthrow e;\n\t\t});\n\t}\n\n\tvar ids = map[req], id = ids[0];\n\treturn Promise.all(ids.slice(1).map(__webpack_require__.e)).then(function() {\n\t\treturn __webpack_require__(id);\n\t});\n}\nwebpackAsyncContext.keys = function webpackAsyncContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackAsyncContext.id = 721;\nmodule.exports = webpackAsyncContext;","var map = {\n\t\"./a_que_sabe\": [\n\t\t429,\n\t\t9\n\t],\n\t\"./a_que_sabe.js\": [\n\t\t429,\n\t\t9\n\t],\n\t\"./como_beber\": [\n\t\t430,\n\t\t10\n\t],\n\t\"./como_beber.js\": [\n\t\t430,\n\t\t10\n\t],\n\t\"./description\": [\n\t\t431,\n\t\t11\n\t],\n\t\"./description.js\": [\n\t\t431,\n\t\t11\n\t],\n\t\"./details\": [\n\t\t432,\n\t\t12\n\t],\n\t\"./details.js\": [\n\t\t432,\n\t\t12\n\t],\n\t\"./elaboration\": [\n\t\t433,\n\t\t13\n\t],\n\t\"./elaboration.js\": [\n\t\t433,\n\t\t13\n\t],\n\t\"./experts_rating\": [\n\t\t434,\n\t\t14\n\t],\n\t\"./experts_rating.js\": [\n\t\t434,\n\t\t14\n\t],\n\t\"./images\": [\n\t\t235\n\t],\n\t\"./images.js\": [\n\t\t235\n\t],\n\t\"./maridajes\": [\n\t\t435,\n\t\t15\n\t],\n\t\"./maridajes.js\": [\n\t\t435,\n\t\t15\n\t],\n\t\"./options\": [\n\t\t236\n\t],\n\t\"./options.js\": [\n\t\t236\n\t],\n\t\"./score\": [\n\t\t436,\n\t\t0\n\t],\n\t\"./score.js\": [\n\t\t436,\n\t\t0\n\t],\n\t\"./video\": [\n\t\t437,\n\t\t16\n\t],\n\t\"./video.js\": [\n\t\t437,\n\t\t16\n\t],\n\t\"./vineyard\": [\n\t\t438,\n\t\t17\n\t],\n\t\"./vineyard.js\": [\n\t\t438,\n\t\t17\n\t]\n};\nfunction webpackAsyncContext(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\treturn Promise.resolve().then(function() {\n\t\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\t\te.code = 'MODULE_NOT_FOUND';\n\t\t\tthrow e;\n\t\t});\n\t}\n\n\tvar ids = map[req], id = ids[0];\n\treturn Promise.all(ids.slice(1).map(__webpack_require__.e)).then(function() {\n\t\treturn __webpack_require__(id);\n\t});\n}\nwebpackAsyncContext.keys = function webpackAsyncContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackAsyncContext.id = 747;\nmodule.exports = webpackAsyncContext;","import React from 'react'\nimport { Menu } from 'antd'\nimport { useLocation } from 'wouter'\nimport {\n BarChartOutlined,\n DatabaseOutlined,\n FolderOutlined,\n LogoutOutlined,\n PlusOutlined,\n RobotOutlined,\n EuroCircleOutlined,\n SwitcherOutlined,\n} from '@ant-design/icons'\nimport { Divider } from 'antd'\nimport { Affix } from 'antd'\n\nconst findCurrent = (items) => {\n const url = new URL(window.location.href)\n const path = url.pathname + url.search\n let found = ['Content', 0]\n for (let i = 0; i < items.length; i++) {\n if (path.startsWith(items[i].subpath)) {\n found[0] = items[i].name\n for (let k = 0; k < items[i].items.length; k++) {\n let curr = items[i].items[k]\n if (path.startsWith(curr.path)) {\n found[1] = k\n break\n }\n }\n break\n }\n }\n return found\n}\n\nexport function MainMenu({ auth }) {\n const [, setLocation] = useLocation()\n\n const clickMenu = (ev) => {\n if (ev.item?.props?.href) {\n setLocation(ev.item.props.href)\n }\n if (ev.key === 'Logout') {\n return auth.logout()\n }\n }\n\n const menus = [\n {\n name: 'Catalogue',\n subpath: '/-admin/?',\n items: [\n { title: 'Products', path: '/-admin/?path=/bodegas/' },\n { title: 'Promos', path: '/-admin/?path=/promos/' },\n { title: 'Home', path: '/-admin/?path=/home/' },\n { title: 'Landings', path: '/-admin/?path=/landings/' },\n { title: 'Packs', path: '/-admin/?path=/packs/' },\n { title: 'Grappes & Tags', path: '/-admin/?path=/tags/' },\n { title: 'Regions', path: '/-admin/?path=/zonas/' },\n { title: 'Opinions', path: '/-admin/opinions' },\n { title: 'Offers', path: '/-admin/offers' },\n { title: 'Free Shipping Rates', path: '/-admin/promos_trg' },\n { title: 'Newsletter', path: '/-admin/?path=/newsletters/' },\n { title: 'Users', path: '/-admin/users' },\n ],\n Icon: FolderOutlined,\n },\n {\n name: 'Market Place',\n subpath: '/-admin/market-place',\n items: [\n {\n title: 'Match products',\n path: '/-admin/market-place/match-products',\n },\n { title: 'Edit matchs', path: '/-admin/market-place/edit-matchs' },\n ],\n Icon: SwitcherOutlined,\n },\n {\n name: 'Orders',\n subpath: '/-admin/orders/',\n items: [\n { title: 'Delays & Notifications', path: '/-admin/orders/delays' },\n { title: 'Group Orders', path: '/-admin/orders/preparation-group' },\n {\n title: 'Multi order invoice',\n path: '/-admin/orders/multi-order-invoice',\n },\n ],\n Icon: DatabaseOutlined,\n },\n {\n name: 'Invoices',\n subpath: '/-admin/invoices/',\n items: [\n {\n title: 'Import shipping invoices',\n path: '/-admin/invoices/import-shipping-invoices',\n },\n {\n title: 'Import commissions collections',\n path: '/-admin/invoices/import-commissions-collections-v2',\n },\n {\n title: 'Import invoice Eurotax',\n path: '/-admin/invoices/import-invoice-eurotax',\n },\n {\n title: 'Import cost warehouse',\n path: '/-admin/invoices/import-cost-warehouse',\n },\n ],\n Icon: EuroCircleOutlined,\n },\n {\n name: 'Content AI',\n subpath: '/-admin/content_ai/',\n items: [\n {\n title: 'Content generated for AI',\n path: '/-admin/content_ai/content_generated',\n },\n ],\n Icon: RobotOutlined,\n },\n {\n name: 'Create product content',\n path: '/-admin/product/create-content',\n Icon: PlusOutlined,\n },\n {\n name: 'Analytics',\n path: '/-admin/analytics',\n Icon: BarChartOutlined,\n },\n {\n name: 'Backoffice',\n path: '/administracion/',\n Icon: RobotOutlined,\n },\n {\n name: 'Logout',\n Icon: LogoutOutlined,\n },\n ]\n\n const [sub, key] = findCurrent(menus)\n\n return (\n \n {auth.isLogged && (\n \n {isMenuOpened && {\n setMenuOpened(!!!isMenuOpened)\n }}\n >
\n \n )}\n\n {children}
\n \n \n {SITES.map((site) => (\n \n {site}\n \n ))}\n
\n \n )\n}\n\nconst subdomain = isProd() ? 'www' : 'stage'\n\nexport function CustomPreview({\n label = 'Preview',\n preview = (v) => v,\n children,\n disabled,\n moreItems = null,\n openAllOption = true,\n domains,\n onBeforeClick = () => {},\n ...props\n}) {\n const [prevs, setPrevs] = useState([])\n\n useEffect(() => {\n async function loadPreviews() {\n setPrevs([])\n setPrevs(\n domains ||\n (await Promise.all(\n [\n `https://${subdomain}.vinissimus.com/es/`,\n `https://${subdomain}.vinissimus.com/en/`,\n `https://${subdomain}.vinissimus.fr/fr/`,\n `https://${subdomain}.vinissimus.co.uk/en/`,\n `https://${subdomain}.hispavinus.de/de/`,\n `https://${subdomain}.italvinus.it/it/`,\n ].map(async (label) => {\n const res = preview(label)\n const url = res.then ? await res : res\n const [firstpart, query] = url.split('=')\n\n return {\n label,\n url: `${firstpart}=${encodeURIComponent(query)}`,\n }\n })\n ))\n )\n }\n loadPreviews()\n }, [preview])\n\n return (\n setEmailModal(true)}>Send a test email
\n \n }\n {...props}\n />\n Send a test email
\n \ndraft
\n verified
\n scheduled
\n all status
\n \n Status
\n \n {status && {status}
}\n \n )\n}\n\nexport function getNLColumnHeadings([icon, , name]) {\n const status = {\n label: \n
\n )\n }\n\n return this.props.children\n }\n}\n","import React from 'react'\nimport { classnames } from '@guillotinaweb/react-gmi'\n\nexport const ErrorZone = ({ children, id, className }) => {\n return (\n Something went wrong.
\n {errorMsg && (\n \n {errorMsg}\n
\n )}\n {errorStack &&{errorStack}
}\n\n \n this.onUpdate(e.target.value)}\n id={this.id}\n required={this.props.required || false}\n />\n
\n )\n }\n}\n\nexport function genYears() {\n const start = 2006\n const current = new Date().getFullYear()\n return Array(current - start + 1)\n .fill()\n .map((_, i) => start + i)\n}\n","import React, { useState } from 'react'\nimport addHours from 'date-fns/addHours'\nimport endOfTomorrow from 'date-fns/endOfTomorrow'\nimport startOfToday from 'date-fns/startOfToday'\n\nimport { DatePicker } from '../../common/date'\nimport { ErrorZone } from '../../components/error_zone'\nimport { Form, Button, Input, stringToSlug } from '@guillotinaweb/react-gmi'\nimport { defaultHomeSections } from '../../consts'\nimport { formatStartEnd } from '../../utils'\n\nconst today = addHours(startOfToday(), 2)\nconst tomorrow = addHours(endOfTomorrow(), 2)\n\nexport function HomeForm({ onSubmit }) {\n const [name, setName] = useState('')\n const [error, setError] = useState('')\n const [start, setStart] = useState(today.toISOString())\n const [end, setEnd] = useState(tomorrow.toISOString())\n const [loading, setLoading] = useState(false)\n\n async function submit() {\n const [date_start, date_end] = formatStartEnd(start, end)\n const optional = name\n ? {\n id: stringToSlug(name),\n home_name: name,\n }\n : {}\n\n if (new Date(date_start) >= new Date(date_end)) {\n setError('The end date must be greater than the start date.')\n return\n }\n\n setError('')\n setLoading(true)\n await onSubmit({\n ...optional,\n '@type': 'Home',\n date_start,\n date_end,\n sections: defaultHomeSections,\n })\n setLoading(false)\n }\n\n return (\n \n )\n}\n","import React, { useState } from 'react'\nimport { Input, Form, stringToSlug, Button } from '@guillotinaweb/react-gmi'\nimport { setLangs } from '../../consts'\nimport { useLocation } from 'wouter'\n\nfunction fixSlugs(slugs) {\n return Object.entries(slugs).reduce((newSlugs, [lang, slug]) => {\n newSlugs[lang] = slug\n if (slug.startsWith('/')) {\n if (lang && !slug.startsWith(`/${lang}/`))\n newSlugs[lang] = slug.replace('/', `/${lang}/`)\n if (!newSlugs[lang].endsWith('/')) newSlugs[lang] += '/'\n newSlugs[lang] = newSlugs[lang].split('/').map(stringToSlug).join('/')\n } else {\n newSlugs[lang] = stringToSlug(newSlugs[lang])\n }\n return newSlugs\n }, {})\n}\n\nexport function LandingForm({ onSubmit }) {\n const [loading, setLoading] = useState(false)\n const [slug, setSlug] = useState(setLangs(''))\n const setSlugByLang = (lang) => (v) =>\n setSlug((n) => ({\n ...n,\n [lang]: v.startsWith('/')\n ? v.split('/').map(stringToSlug).join('/')\n : stringToSlug(v),\n }))\n const inputs = Object.keys(slug)\n const [, navigate] = useLocation()\n\n async function submit() {\n setLoading(true)\n const fixedSlugs = fixSlugs(slug)\n const id = stringToSlug(fixedSlugs.es).replace(/(^-|-$)/g, '')\n\n await onSubmit({\n '@type': 'Landing',\n template: 'landing',\n description: setLangs(''),\n id,\n products: [],\n for_langs: [],\n slug: fixedSlugs,\n title: slug,\n })\n setLoading(false)\n navigate(`/?path=/landings/${id}/`)\n }\n\n return (\n \n )\n}\n","import React, { useState } from 'react'\nimport addHours from 'date-fns/addHours'\nimport endOfTomorrow from 'date-fns/endOfTomorrow'\nimport { useLocation } from 'wouter'\nimport * as dayjs from 'dayjs'\n\nimport { DatePicker } from '../../common/date'\nimport { Form, Button, Input, stringToSlug } from '@guillotinaweb/react-gmi'\nimport { setLangs, LANGS, SELLING_COUNTRIES } from '../../consts'\nimport { toISOStringWithTimezone } from '../../utils'\nimport { Switch } from 'antd'\nimport { ProductSelector } from '../../components/product-selector'\nimport { getProductMask } from '../../utils'\n\nconst tomorrow = addHours(endOfTomorrow(), 2)\n\nexport function NewsletterForm({ onSubmit }) {\n const [id, setId] = useState('')\n const [campaign, setCampaign] = useState('')\n const [date, setDate] = useState(tomorrow.toISOString())\n const [loading, setLoading] = useState(false)\n const [productDisplay, setProductDisplay] = useState(false)\n const [product, setProduct] = useState()\n const [, navigate] = useLocation()\n const dateString = dayjs(date).format('D_MM_YY_')\n\n async function submit() {\n setLoading(true)\n\n await onSubmit({\n '@type': 'Newsletter',\n id: dateString + id,\n subject: setLangs(''),\n title: campaign,\n contenido:\n product?.length > 0 && productDisplay\n ? await buildProductContent(product[0])\n : [],\n schedule_at: date,\n sendto: {\n langs: LANGS,\n countries: SELLING_COUNTRIES,\n },\n })\n setLoading(false)\n navigate(`/?path=/newsletters/${dateString + id}/`)\n }\n\n return (\n \n )\n}\n\nfunction weekday(lang) {\n const formatter = Intl.DateTimeFormat(lang, {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n })\n return formatter.format(new Date())\n}\n\nasync function buildProductContent(product_id) {\n const prod = await getProduct(product_id)\n const option = prod.opciones[0]\n const data = { id: prod.id, type: prod.tipo }\n\n let content = [\n {\n id_tipo: 'h1',\n es: prod.lema?.es || '',\n fr: prod.lema?.fr || '',\n de: prod.lema?.de || '',\n it: prod.lema?.it || '',\n en: prod.lema?.en || '',\n },\n {\n id_tipo: 'bd',\n product_kind: 'full',\n referencia: option.referencia,\n bg_color_img: '#e9edeb',\n bg_color_product: '#e9edeb',\n alt: setLangs(''),\n image_src: setLangs(''),\n product_side: 'left',\n },\n {\n id_tipo: 'h2',\n es: '',\n fr: '',\n de: '',\n it: '',\n en: '',\n },\n {\n id_tipo: 'p',\n es: prod.description?.es || '',\n fr: prod.description?.fr || '',\n de: prod.description?.de || '',\n it: prod.description?.it || '',\n en: prod.description?.en || '',\n },\n {\n id_tipo: 'h2',\n es: prod.otras_props?.a_que_sabe?.es ? '¿A qué sabe este vino?' : '',\n fr: prod.otras_props?.a_que_sabe?.fr\n ? 'Quel est le goût de ce vin ?'\n : '',\n de: prod.otras_props?.a_que_sabe?.de ? 'Wie schmeckt dieser Wein?' : '',\n it: prod.otras_props?.a_que_sabe?.it ? 'Che sapore ha questo vino?' : '',\n en: prod.otras_props?.a_que_sabe?.en\n ? 'What does this wine taste like?'\n : '',\n },\n {\n id_tipo: 'p',\n es: prod.otras_props?.a_que_sabe?.es || '',\n fr: prod.otras_props?.a_que_sabe?.fr || '',\n de: prod.otras_props?.a_que_sabe?.de || '',\n it: prod.otras_props?.a_que_sabe?.it || '',\n en: prod.otras_props?.a_que_sabe?.en || '',\n },\n {\n id_tipo: 'h2',\n es: '',\n fr: '',\n de: '',\n it: '',\n en: '',\n },\n {\n id_tipo: 'tri_down',\n text: {\n es: '¡Solo hoy en oferta!',\n fr: \"En promotion aujourd'hui seulement !\",\n de: 'Nur heute im Angebot!',\n it: 'Solo oggi in offerta!',\n en: 'On offer today only!',\n },\n path: {\n es: getProductMask(data, 'es'),\n fr: getProductMask(data, 'fr'),\n de: getProductMask(data, 'de'),\n it: getProductMask(data, 'it'),\n en: getProductMask(data, 'en'),\n },\n btn_text: {\n es: 'COMPRAR',\n fr: 'ACHETER',\n de: 'KAUFEN',\n it: 'ACQUISTA',\n en: 'BUY',\n },\n },\n {\n id_tipo: 'w',\n es: `Oferta válida solo hoy, ${weekday(\n 'es'\n )}, o hasta agotar existencias.`,\n fr: `Offre valable uniquement aujourd'hui, ${weekday(\n 'fr'\n )}, ou jusqu'à épuisement des stocks.`,\n de: `Angebot gültig nur heute, ${weekday(\n 'de'\n )} oder solange der Vorrat reicht.`,\n it: `Offerta valida solo oggi, ${weekday(\n 'it'\n )}, o ad esaurimento scorte.`,\n en: `Offer valid only today, ${weekday('en')}, or while stocks last.`,\n },\n ]\n return content\n}\n\nasync function getProduct(group) {\n const resp = await fetch(`/db/guillotina/@product?id=${group}`)\n const prod = await resp.json()\n return prod.product\n}\n","import React, { useState } from 'react'\nimport { Input, Form, stringToSlug, Button } from '@guillotinaweb/react-gmi'\nimport { LANGS, setLangs } from '../../consts'\nimport { useLocation } from 'wouter'\n\nexport function PackForm({ onSubmit }) {\n const [loading, setLoading] = useState(false)\n const [, navigate] = useLocation()\n const [id, setId] = useState('')\n const [ref, setRef] = useState('')\n const [name, setName] = useState(setLangs(''))\n\n async function submit() {\n setLoading(true)\n\n const state = {\n '@type': 'Producto',\n id,\n nombre: name.es,\n tipo: '/pk',\n referencia_pack: ref,\n nombres: LANGS.reduce(\n (o, lang) => ({\n ...o,\n [lang]: {\n nombre: name[lang],\n },\n }),\n {}\n ),\n }\n\n await onSubmit(state)\n setLoading(false)\n navigate(`/?path=/packs/${id}/`)\n }\n\n return (\n \n )\n}\n","import React, { useEffect, useState } from 'react'\nimport { Select } from 'antd'\nimport { getLang } from '../utils'\n\nexport function CellarSelector({ value, onChange }) {\n const [items, setItems] = useState()\n\n useEffect(() => {\n init()\n }, [])\n async function init() {\n const res = await searchCellars()\n setItems(res)\n }\n\n if (!items) return null\n\n return (\n \n
\n \n
\n {buttonLabel && (\n {title}
\n\n {displayBackBtn && (\n <>\n \n \n \n )}\n \n
\n )}\n \n
\n )\n}\n\nconst DOMAINS = {\n fr: 'vinissimus.fr',\n vinissimus: 'vinissimus.com',\n italvinus: 'italvinus.it',\n}\n\nexport function ProductOpciones({ product }) {\n const gotoProd = (prod) => (ev) => {\n console.log(prod)\n const domain = getHost(DOMAINS[prod.tienda])\n window.open(\n `https://${domain}/administracion/contenidos/edicion_producto.html?id_producto=${prod.referencia}`\n )\n }\n\n const opciones = Object.keys(product.opciones)\n .map((opcion) => product.opciones[opcion])\n .sort((a, b) => (a.anyada > b.anyada ? -1 : 1))\n\n return (\n \n \n {props.tipo}\n \n
\n
\n )\n}\n\nconst ESTADOS = {\n selling: 'tag is-success',\n notavaliable: 'tag is-danger',\n new_product: 'tag is-light',\n invalid: 'tag is-warning',\n}\n\nconst getEstado = (estado) => {\n return (\n \n {estado.toUpperCase()}\n \n )\n}\n\nconst OFERTAS = {\n o: 'Oferta',\n}\n\nexport function OfertaViewer({ oferta }) {\n if (!oferta) return null\n return (\n \n \n \n
\n
\n | Ref | \nEstado | \nUltimas | \nPrecio | \nP.IVA | \nProv | \nCap. | \nAño | \nO | \n
|---|---|---|---|---|---|---|---|---|
| \n \n {opcion.tienda} / {opcion.referencia}\n \n | \n{getEstado(opcion.estado)} | \n{opcion.ultimas_unidades} | \n{opcion.precio_sin_impuestos} € | \n{opcion.precio} € | \n{opcion.proveedor} | \n{opcion.capacidad} | \n{opcion.anyada} | \n\n | \n
\n
Opciones
\n\n
\n {isUva && (\n\n
\n \n )}\n
\n
\n \n
\n )\n}\n\nexport function RelatedProducts({ Ctx }) {\n const [opened, setOpened] = React.useState(false)\n const [loading, setLoading] = React.useState(true)\n const [products, setProducts] = React.useState([])\n\n React.useEffect(() => {\n ;(async () => {\n if (opened === false) return\n setLoading(true)\n const result = await Ctx.client.esQuery(\n getTagQuery(Ctx.context['@name'], Ctx.context.parent['@name'])\n )\n const data = await result.json()\n setProducts(data.member)\n setLoading(false)\n })()\n }, [opened])\n\n return (\n \n {isUva && (\n
\n
\n
Imágenes
\n\n {isUva ? (\n \n
\n\n {(lang) => (\n \n \n ) : (\n \n \n )}\n
\n Imágen de la uva
\n\n
Infografia
\n\n \n
\n
\n \n )\n}\n\nconst getTagQuery = (id, category) => ({\n query: {\n bool: {\n filter: [\n { term: { type_name: 'Producto' } },\n {\n nested: {\n path: 'tags',\n query: {\n bool: {\n filter: [\n { term: { 'tags.id': `${id}` } },\n { term: { 'tags.category': category } },\n ],\n },\n },\n },\n },\n ],\n },\n },\n _source: ['id', 'path', 'nombre', 'tipo', 'title'],\n size: 200,\n})\n\nconst props = {\n Buttons: null,\n Panels: \n
\n Productos
\n\n {!opened && (\n
\n {opened && (\n \n {loading &&
\n )}\n \n
\n {loading && }\n {!loading && (\n \n
\n \n
\n \n
\n | \n | \n {columns.map((i) => (\n \n {i.label}\n | \n ))}\n\n |
|---|---|---|
| \n Anything here!\n | \n
\n
\n JSON inválido
}\n \n )\n}\n","import React, { useState } from 'react'\nimport { Button, useTraversal } from '@guillotinaweb/react-gmi'\nimport { message } from 'antd'\nimport { JSONEditor } from './json_editor'\n\nexport function QueryProducts({ title, query, onChange }) {\n const Ctx = useTraversal()\n const [jsonError, setJsonError] = useState(false)\n const [queryResults, setQueryResults] = useState()\n\n async function test_query() {\n const q = { ...query }\n // transform i18n fields\n for (let field in q)\n if (field.startsWith('%') && field.endsWith('%'))\n q[field.substring(1, field.length - 1)] = q[field]['es']\n const [status, json] = await Ctx.client.getProducts(q, 'es')\n if (status === 200) setQueryResults(json)\n else message.error('error: ' + JSON.stringify(json))\n }\n\n return (\n <>\n {title && }\n \n {queryResults &&\n queryResults.search.map((p) => `${p.opciones[0].id} - ${p.nombre}\\n`)}\n \n \n )\n}\n","import { EditOutlined } from '@ant-design/icons'\nimport { Switch } from 'antd'\nimport React, { useState } from 'react'\nimport { ProductSelector } from './product-selector'\nimport { QueryProducts } from './query-products'\n\nexport default function ProductSelectorOrQuery({ id, query = {}, setQuery }) {\n const [editQuery, setEditQuery] = useState(\n () => Object.keys(query).length !== 1 || !Array.isArray(query.groups)\n )\n\n function changeMode() {\n setEditQuery((v) => !v)\n }\n\n return (\n \n \n \n
\n {editQuery ? (\n \n {id} {title && ` - Title: ${title[lang]}`}{' '}\n {custom.query?.groups && `- Products: ${custom.query.groups.length}`}\n {sectionLangs}\n
\n )\n }\n\n return (\n \n {id}\n {sectionLangs}\n
\n )\n}\n","import {\n Checkbox,\n FileUpload,\n Input,\n Select,\n useTraversal,\n} from '@guillotinaweb/react-gmi'\nimport { Switch, Tabs, message } from 'antd'\nimport React, { memo, useState } from 'react'\nimport { I18NField } from '../../../components/i18nfield'\nimport { ProductSelector } from '../../../components/product-selector'\nimport { buttonThemes, frontThemes, getCdnUrl, setLangs } from '../../../consts'\n\nconst Empty = () => null\n\nexport const ImageForm = memo(({ selected, edit, langs, id }) => {\n const Ctx = useTraversal()\n const [uploading, setUploading] = useState(false)\n const [images, setImages] = useState(setLangs([]))\n\n function onUploadBanner(lang) {\n return async (file) => {\n setUploading(true)\n const filename = `home/${Ctx.state.context['@name']}`\n const res = await Ctx.client.upload(Ctx.path, file, filename)\n\n if (res.status >= 300) {\n message.error('Error uploading the image')\n setUploading(false)\n return\n }\n\n const { path } = await res.json()\n const src = `/${path}`\n const image = selected.image || {}\n const isFirstImage = !Object.values(image).find((v) => {\n return v\n })\n\n edit('image', isFirstImage ? setLangs(src) : { ...image, [lang]: src })\n setUploading(false)\n }\n }\n\n function onUploadBannerMultipleImage(lang) {\n return async (file) => {\n setUploading(true)\n const filename = `home/${Ctx.state.context['@name']}`\n const res = await Ctx.client.upload(Ctx.path, file, filename)\n\n if (res.status >= 300) {\n message.error('Error uploading the image')\n setUploading(false)\n return\n }\n\n const { path } = await res.json()\n const src = `/${path}`\n const foldersLanguage = setLangs(src)\n const allImages = { ...selected.images } || images\n if (lang === langs[0]) {\n Object.keys(allImages).map(\n (locale) =>\n (allImages[locale] = [\n ...allImages[locale],\n foldersLanguage[locale],\n ])\n )\n } else {\n allImages[lang] = [...allImages[lang], foldersLanguage[lang]]\n }\n setImages(allImages)\n edit('images', allImages)\n setUploading(false)\n }\n }\n\n const onChangeMultipleLinks = (value, lang, imageSrc) => {\n const allLinks = { ...(selected.buttonLink || setLangs([])) }\n const allImages = { ...selected.images }\n const imagesList = allImages[lang]\n const index = imagesList.indexOf(imageSrc)\n\n allLinks[lang][index] = value\n\n edit('buttonLink', allLinks)\n }\n\n return (\n \n {\n const images = selected.images\n images[lang].splice(index, 1)\n edit('images', images)\n }}\n className=\"button-delete-image\"\n >\n X\n \n }${image}`})
\n
\n )\n })\n )}\n \n \n \n {\n onChangeMultipleLinks(v, lang, imageSrc)\n }}\n />\n
\n )\n })\n )}\n \n \n ({\n label: k,\n value: k,\n }))}\n value={selected.filter ? selected.filter : 'no filter'}\n onChange={(e) => {\n const v = e.target.value\n edit('filter', v === 'no filter' ? undefined : v)\n }}\n />\n {selected.id === 'image' && (\n <>\n \n edit('imageRepeat', v)}\n />\n \n )}\n\n \n edit('imageCover', v)}\n />\n {selected.id === 'image' && (\n <>\n \n edit('removePadding', v)}\n />\n \n )}\n
\n {selected.id === 'image' && (\n \n \n ({\n label: k,\n value: k,\n }))}\n value={selected.widthSize}\n onChange={(e) => edit('widthSize', e.target.value)}\n />\n\n \n edit('height', parseFloat(v))}\n />\n
\n )}\n \n \n {label ? `${label}: ` : ''}\n {color}\n
\n \n )\n }\n\n return (\n\n {label && }\n
\n )\n}\n","import React, { memo, useState } from 'react'\nimport { message } from 'antd'\nimport { FileUpload, useTraversal } from '@guillotinaweb/react-gmi'\n\nimport { ColorPicker } from '../../../components/color_picker'\nimport { I18NField } from '../../../components/i18nfield'\nimport { ProductSelector } from '../../../components/product-selector'\nimport { getCdnUrl, setLangs } from '../../../consts'\nimport { Fragment } from 'react'\n\nconst Empty = () => null\n\nexport const ProductBannerForm = memo(({ selected, edit, langs }) => {\n const Ctx = useTraversal()\n const [uploading, setUploading] = useState(false)\n\n function onUploadBanner(lang) {\n return async (file) => {\n setUploading(true)\n const filename = `home/${Ctx.state.context['@name']}`\n const res = await Ctx.client.upload(Ctx.path, file, filename)\n\n if (res.status >= 300) {\n message.error('Error uploading the image')\n setUploading(false)\n return\n }\n\n const { path } = await res.json()\n const src = `/${path}`\n const image = selected.image || {}\n const isFirstImage = !Object.values(image).find((v) => v)\n\n edit('image', isFirstImage ? setLangs(src) : { ...image, [lang]: src })\n setUploading(false)\n }\n }\n\n return (\n \n
\n {error && (\n \n
\n
\n The color {value} is not correct\n
\n )}\n {suggested && (\n \n
\n )}\n Suggested colors
\n {extraColors.map(renderColor)}\n {extraColors?.length > 0 && (\nMore suggestions:
\n )}\n {COLORS.map(renderColor)}\n \n {direction === 'up' ?
\n )\n}\n\nexport default Arrow\n","import { Input, Select, useTraversal } from '@guillotinaweb/react-gmi'\nimport { Switch, Tabs, message } from 'antd'\nimport React, { memo, useState } from 'react'\nimport { I18NField } from '../../../components/i18nfield'\nimport { ProductSelector } from '../../../components/product-selector'\nimport { frontThemes, getCdnUrl, setLangs } from '../../../consts'\nimport { MultiFileUpload } from '../product/partials/images'\nimport Arrow from './Arrow'\n\nconst Empty = () => null\n\nconst ImageWithArrows = ({\n imageUrl,\n moveUp,\n moveDown,\n isFirst,\n isLast,\n selected,\n lang,\n index,\n edit,\n}) => {\n const arrowStyle = {\n position: 'absolute',\n top: '50%',\n transform: 'translateY(-50%)',\n zIndex: 1,\n backgroundColor: 'black',\n color: 'white',\n borderRadius: '50%',\n padding: '5px',\n cursor: 'pointer',\n }\n\n const arrowUpStyle = {\n ...arrowStyle,\n left: '10px', // Ajustar la posición lateral de la flecha hacia la izquierda\n }\n\n const arrowDownStyle = {\n ...arrowStyle,\n right: '10px', // Ajustar la posición lateral de la flecha hacia la derecha\n }\n\n return (\n \n moveImageUp(index, lang)}\n moveDown={() => moveImageDown(index, lang)}\n isFirst={isFirst}\n isLast={isLast}\n selected={selected}\n lang={lang}\n index={index}\n edit={edit}\n />\n
\n )\n })}\n \n \n {\n const images = selected.images\n images[lang].splice(index, 1)\n edit('images', images)\n }}\n className=\"button-delete-image\"\n >\n X\n \n
\n )\n })}\n \n \n \n {\n onChangeMultipleLinks(v, lang, value)\n }}\n />\n
\n )\n })}\n \n \n ({\n label: k,\n value: k,\n }))}\n value={selected.filter ? selected.filter : 'no filter'}\n onChange={(e) => {\n const v = e.target.value\n edit('filter', v === 'no filter' ? undefined : v)\n }}\n />\n {selected.id === 'image' && (\n <>\n \n edit('imageRepeat', v)}\n />\n \n )}\n\n \n edit('imageCover', v)}\n />\n {selected.id === 'image' && (\n <>\n \n edit('removePadding', v)}\n />\n \n )}\n
\n {selected.id === 'image' && (\n \n \n ({\n label: k,\n value: k,\n }))}\n value={selected.widthSize}\n onChange={(e) => edit('widthSize', e.target.value)}\n />\n\n \n edit('height', parseFloat(v))}\n />\n
\n )}\n \n \n setStart(e.target.value)}\n />\n setEnd(e.target.value)}\n />\n \n {homeSectionsToAdd.map((s) => (\n Section \"{s.id}\" \n ))}\n \n }\n >\n \n \n \n
\n \n (\n setEditIndx(index)}\n id={section.id}\n />\n )}\n />\n
\n Reset
\n Are you sure to remove the latest changes?\n\n \n \n \n
\n \n \n
\n )\n }\n\n return (\n <>\n Remove {(selected.title || {}).es}
\nAre you sure?
\n\n {\n remove()\n setToogleRemove(false)\n }}\n >\n Yes\n \n \n
\n Edit {(selected.title || {}).es}
\n\n edit('hidden', !v)}\n />\n {homeSectionsToAdd.some((s) => s.id === selected.id) && (\n setToogleRemove(true)}\n >\n Remove section\n \n )}\n
\n {!selected.hidden && (\n <>\n \n \n \n
\n \n )\n}\n\nexport function HomeView(props) {\n const ctx = useTraversal()\n const calculated = ctx.filterTabs(\n {\n Data: TemplateData,\n Permissions: PanelPermissions,\n AuditLog: AuditLogTab,\n },\n {\n Data: 'guillotina.ViewContent',\n Sections: 'guillotina.ModifyContent',\n }\n )\n\n return (\n \n Preview:\n
\n )\n}\n","import { useState } from 'react'\nimport { useTraversal } from '@guillotinaweb/react-gmi'\n\nexport function usePatchLanding() {\n const [loading, setLoading] = useState(false)\n const Ctx = useTraversal()\n\n async function patch(data) {\n setLoading(true)\n const newContext = { ...Ctx.context, ...data }\n const flashOk = ['Landing updated', 'success']\n const flashKo = ['Error updating the landing', 'danger']\n const { status } = await Ctx.client.patch(Ctx.path, {\n description: newContext.description,\n for_langs: newContext.forLangs,\n image_src: newContext.image_src,\n sections: newContext.sections,\n slug: newContext.slug,\n template: newContext.template,\n title: newContext.title,\n labels: newContext.labels,\n post_author: newContext.postAuthor,\n publish_date: newContext.publishDate,\n searchable: newContext.searchable,\n })\n Ctx.flash(...(status === 204 ? flashOk : flashKo))\n Ctx.refresh({ transparent: true })\n setLoading(false)\n }\n\n return [loading, patch]\n}\n","import React, { useState } from 'react'\nimport {\n Form,\n Textarea,\n Input,\n Checkbox,\n Button,\n Select,\n useTraversal,\n} from '@guillotinaweb/react-gmi'\nimport { I18NField } from '../../../components/i18nfield'\nimport { SelectTaxonomy } from '../../../components/select-taxonomy'\nimport { DatePicker } from '../../../common/date'\nimport { ImageEditor } from '../../../common/field'\nimport { PreviewWebsites } from './Preview'\nimport { usePatchLanding } from './usePatchLanding'\n\nconst Empty = () => null\n\nexport function Data({ state }) {\n return (\n <>\n \n \n \n
\n There aren't sections yet.
\n )}\n \n
\n saveLanding({ sections })}\n className=\"is-primary\"\n >\n SAVE AND PUBLISH\n \n
\n \n )}\n \n \n \n + Add new Section\n \n \n Undo\n \n \n Reset\n \n
\n \n
\n
\n }\n className=\"template-section\"\n >\n {title}
\n \n copy(data)} title=\"Copy\">\n
\n \n \n \n onChange({\n ...data,\n template: e.target.value,\n products: data.products || {\n type: 'group',\n value: [],\n },\n title: data.title || emptyLangs,\n description: data.description || emptyLangs,\n slug: data.slug || emptyLangs,\n alt: data.alt || emptyLangs,\n })\n }\n value={data.template || ''}\n options={templates}\n />\n {['carousels', 'html', 'product-list', 'blog-product-list'].includes(\n data.template\n ) && (\n <>\n \n handleInputChange('title', e)}\n />\n \n handleInputChange('text', value)}\n />\n \n )}\n {\n // TEXT (html) + IMAGE (both optional)\n data.template === 'text-image' && (\n <>\n \n handleInputChange('text', value)}\n />\n \n )\n }\n
\n\n {(() => {\n // BLOG PRODUCT LIST\n if (data.template === 'blog-product-list') {\n const type = data.query?.referencias ? 'referencias' : 'groups'\n const typeSelector = data.query?.referencias ? 'refs' : 'group'\n const defaultQuery = {\n opciones: { estado: ['selling', 'notavailable'] },\n serializer: 'full',\n }\n\n return (\n \n \n \n onChange({\n ...data,\n query: {\n ...defaultQuery,\n [e.target.value]: [],\n },\n type: e.target.value,\n })\n }\n value={type}\n options={productTypes}\n />\n \n \n onChange({\n ...data,\n query: {\n ...defaultQuery,\n [type]: products,\n },\n })\n }\n />\n
\n )\n }\n })()}\n {\n // CAROUSELS DATA\n data.template === 'carousels' && (\n \n \n \n onChange({\n ...data,\n image_src: setMultiLangContent(path, lang, data.image_src),\n })\n )}\n label={uploading ? 'Uploading...' : 'Upload an image'}\n />\n \n \n onChange({\n ...data,\n products: {\n ...data.products,\n type: e.target.value,\n value: null,\n },\n })\n }\n value={data.products.type || ''}\n options={carrouselTypes}\n />\n {(data.products.type === 'group' ||\n data.products.type === 'refs') && (\n <>\n \n \n onChange({\n ...data,\n products: { ...data.products, value: products },\n })\n }\n />\n \n )}\n {data.products.type === 'query' && (\n \n onChange({\n ...data,\n products: { ...data.products, value },\n })\n }\n />\n )}\n
\n )\n }\n\n {\n // PRODUCT LIST\n data.template === 'product-list' && (\n \n min-width: 150px; max-height: 330px (vert) or proportional to\n height: 330px.\n
\n {data.image_src && (\n\n onChange({ ...data, query })}\n />\n
\n )\n }\n\n {\n // JUST HTML\n data.template === 'just-html' && (\n \n {\n onChange({\n ...data,\n html: {\n ...(data.html || {}),\n [lang]: value,\n },\n })\n }}\n />\n \n \n onChange({ ...data, image_src: setLangs(path) })\n )}\n label={uploading ? 'Uploading...' : 'Upload an image'}\n />\n handleInputChange('alt', e)}\n />\n
\n )\n }\n\n {\n // Text + Image\n data.template === 'text-image' && (\n max-width: 300px; max-height: 200px
\n {data.image_src && (\n\n \n \n onChange({\n ...data,\n img_src: setMultiLangContent(path, lang, data.img_src),\n })\n )}\n label={uploading ? 'Uploading...' : 'Upload an image'}\n />\n \n {\n onChange({\n ...data,\n img_caption: {\n ...(data.img_caption || {}),\n [lang]: value,\n },\n })\n }}\n />\n \n \n onChange({ ...data, img_position: e.target.value })\n }\n value={data.img_position || 'left'}\n options={[\n { value: 'left', text: 'Left' },\n { value: 'top', text: 'Top' },\n { value: 'bottom', text: 'Bottom' },\n { value: 'right', text: 'Right' },\n ]}\n />\n handleInputChange('img_alt', e)}\n />\n handleInputChange('img_link', e)}\n />\n
\n )\n }\n\n {\n // EMAIL SIGNUP FORM - Versión simplificada\n data.template === 'email-signup' && (\n \n Free size. (Left and Right position, max size recommended:\n 400x400. For Top and Bottom position and big images, max-width\n recommended: 1200px)\n
\n {data.img_src && (\n\n
\n )\n }\n \n )\n}\n","import React, { useState } from 'react'\nimport { Button } from 'antd'\nimport { useTraversal, Textarea } from '@guillotinaweb/react-gmi'\n\nimport { I18NField } from './i18nfield'\nimport { setLangs } from '../consts'\n\nconst seoField = 'api.behaviors.submenu.ISubmenuBehavior'\nconst example = `[\n {\"selector\": \"link\", \"value\": \"/\", \"label\": \"Vinissimus\" }\n]`\n\nexport function SubmenuTab() {\n const Ctx = useTraversal()\n const submenu = Ctx.state.context[seoField].submenu || {}\n const [saving, setSaving] = useState(false)\n const [menu, setMenu] = useState(submenu || setLangs(''))\n const [jsonError, setJsonError] = useState(false)\n\n const h1 =\n typeof Ctx.state.context.title === 'string'\n ? Ctx.state.context.title\n : Ctx.state.context['@name']\n\n async function save() {\n if (jsonError) {\n alert('invalid json')\n return\n }\n setSaving(true)\n const flashOk = ['SEO fields saved', 'success']\n const flashKo = ['Error saving the SEO fields', 'danger']\n const { status } = await Ctx.client.patch(Ctx.path, {\n [seoField]: { submenu: menu },\n })\n Ctx.flash(...(status === 204 ? flashOk : flashKo))\n setSaving(false)\n }\n\n return (\n <>\n \n Este componente utilizará el formulario de registro predefinido\n del frontend.\n
\n{h1}
\n \n \n\n {\n let err = null\n let val = undefined\n try {\n val = JSON.parse(v)\n setJsonError(false)\n } catch (e) {\n err = 'invalid'\n val = v\n setJsonError(true)\n }\n setMenu((o) => ({ ...o, [lang]: val }))\n }}\n rows={15}\n style={{\n fontFamily: 'Menlo, Consolas, Courier New',\n fontSize: '12px',\n }}\n error={jsonError}\n />\n
\n )}\n Lang {lang}
\n\n{example}\n \n )\n}\n","import React, { useState, useEffect } from 'react'\nimport AceEditor from 'react-ace'\nimport { ContextToolbar } from '@guillotinaweb/react-gmi'\nimport { useTraversal } from '@guillotinaweb/react-gmi'\nimport { PanelPermissions } from '@guillotinaweb/react-gmi'\nimport { Loading } from '@guillotinaweb/react-gmi'\nimport { TabsPanelWithLock } from '../../components/tab-panel-with-lock'\nimport { AuditLogTab } from '../../common/auditlog'\n\nfunction MenuEditor(props) {\n const Ctx = useTraversal()\n const [fetching, setFetching] = useState(true)\n const [menu, setMenu] = useState(null)\n\n const canModifyContent = Ctx.hasPerm('guillotina.ModifyContent')\n\n useEffect(() => {\n async function load() {\n setFetching(true)\n const r = await Ctx.client.rest.get(Ctx.path)\n const data = await r.json()\n const keys = ['html']\n setMenu(keys.reduce((acc, k) => ({ ...acc, [k]: data[k] }), {}))\n setFetching(false)\n }\n load()\n }, [Ctx.path])\n\n async function save(ev) {\n ev.preventDefault()\n\n const r = await Ctx.client.upsert(Ctx.path, {\n '@type': 'Menu',\n ...menu,\n })\n\n if (r.status >= 200 && r.status < 300)\n Ctx.flash('Guardado satisfactoriamente', 'success')\n else {\n const resp = await r.json()\n const error =\n resp.type === 'DeserializationError'\n ? JSON.stringify(resp.deserialization_errors)\n : resp\n Ctx.flash('Error al gaurdar:\\n' + JSON.stringify(error), 'danger', 15)\n }\n }\n\n if (fetching) return \n {\n setState(initialState)\n }}\n >\n
\n \n \n\n
\n \n \n )\n}\n\nasync function loadProductImage(ref) {\n const res = await fetch(\n `/db/guillotina/@product?id=${ref}&lang=es&bodega_extras=1`\n ).then((r) => r.json())\n const path =\n res.product.images?.[`${ref}_anv800`]?.path ||\n `/prfmtgrande/vi/${ref}_anv800.png`\n return getCdnUrl() + path\n}\n\nfunction getZoomProps(zoomImg, zoomImgPosition) {\n const defaultWidth = 24\n const zoomWidth = defaultWidth + zoomImg + '%'\n const zoomHeight = (zoomWidth * 100) / defaultWidth + '%'\n const zoomTop = -zoomImg * zoomImgPosition\n\n return { zoomWidth, zoomHeight, zoomTop }\n}\n","export async function newsletterTranslator(context, payload) {\n const subject = payload.subject?.['es'] ?? null\n const contenido = payload.contenido ?? null\n if (subject) {\n payload.subject = await context.client.translate(subject, 'subject')\n }\n if (contenido) {\n for (let i = 0; i < contenido.length; i++) {\n console.log(contenido[i])\n const val = contenido[i]\n if (\n val['id_tipo'] === 'h1' ||\n val['id_tipo'] === 'p' ||\n val['id_tipo'] === 'h2' ||\n val['id_tipo'] === 'w'\n ) {\n const translated = await context.client.translate(\n val['es'],\n val['id_tipo']\n )\n Object.keys(val).forEach((key) => {\n if (translated[key]) {\n val[key] = translated[key]\n }\n })\n }\n // if (val['id_tipo'] === 'btn_primary') {\n // const translated = await context.client.translate(\n // val['btn_text']['es'],\n // val['id_tipo']\n // )\n // Object.keys(val['btn_text']).forEach((key) => {\n // if (translated[key]) {\n // val['btn_text'][key] = translated[key]\n // }\n // })\n // }\n }\n }\n\n return payload\n}\n","import React, { useState, useEffect, useRef } from 'react'\nimport uuid from 'uuid'\nimport {\n Affix,\n Dropdown,\n Menu,\n Empty,\n Radio,\n message,\n Space,\n Checkbox,\n} from 'antd'\nimport { QuillEditor } from '../../../components/QuillEditor'\nimport {\n Button,\n FileUpload,\n Icon,\n Input,\n Textarea,\n useTraversal,\n} from '@guillotinaweb/react-gmi'\nimport {\n SyncOutlined,\n CheckCircleTwoTone,\n SaveOutlined,\n} from '@ant-design/icons'\n\nimport { AccordionCard } from '../../../components/accordion-card'\nimport * as dayjs from 'dayjs'\nimport { DnD } from '../../../common/dnd'\nimport { Field, BaseField } from '../../../common/field'\nimport { I18NField } from '../../../components/i18nfield'\nimport { ProductSelector } from '../../../components/product-selector'\nimport {\n allowToMoveOnlyInAccordionHeader,\n encodeAbsoluteLink,\n useClipboard,\n} from '../../../utils'\nimport { getCdnUrl, isProd, setLangs, SHOPS } from '../../../consts'\nimport { ColorPicker } from '../../../components/color_picker'\nimport NLPreview from './Preview'\nimport { GenerateProductImageWithTriangle } from '../../../components/generate-product-image-with-triangle'\nimport { newsletterTranslator } from '../../../components/deeplTranslatorComponent'\n\nconst prefix = isProd() ? 'www' : 'stage'\n\nconst PRODUCT_ROW_NUM = 2\n\nconst btnTypesArray = [\n 'btn',\n 'btn_arrow',\n 'btn_primary',\n 'btn_primary_arrow',\n 'tri_up',\n 'tri_down',\n]\nconst buttonTypes = new Set(btnTypesArray)\nconst disabledStatuses = new Set(['scheduled', 'verified'])\n\nconst contentNames = {\n b_multi_img: 'Banner',\n bd: 'Product banner',\n f: `Row of ${PRODUCT_ROW_NUM} products`,\n h1: 'Title',\n h2: 'Subtitle',\n p: 'Text block',\n w: 'Conditions',\n btn: 'Button',\n html: 'Html',\n}\n\nfunction getContentBrief(content, { lang, limit = 80 } = {}) {\n let contentBrief =\n content.btn_text?.[lang] ||\n content[lang] ||\n content.content?.join(' - ') ||\n ''\n\n if (contentBrief.length > limit) {\n contentBrief = contentBrief.slice(0, limit - 3) + '...'\n }\n\n return contentBrief\n}\n\nfunction NLProducts({\n sectionKey,\n content,\n limit,\n id,\n update,\n colors = [['Background color', 'bg_color']],\n}) {\n const bdValue = content.referencia ? [content.referencia] : []\n const value =\n id === 'bd' ? bdValue : content.content.filter((c) => c && c !== '0')\n\n return (\n <>\n \n
\n \n {ballContentTxt}\n {ballFooterTxt && (\n
\n {imageSrc && (\n {ballFooterTxt}
\n )}\n \n You must add another product, this section is for {limit} products\n
\n )}\n {colors.map(([label, field], index) => (\n \n {id === 'bd' && (\n \n \n )}\n updateLink(encodeAbsoluteLink(link))}\n />\n )}\n \n {img}\n \n {id === 'bd' && (\n <>\n \n \n update({ ...content, product_kind: e.target.value })\n }\n value={content.product_kind}\n optionType=\"button\"\n />\n \n \n \n update({ ...content, product_side: e.target.value })\n }\n value={content.product_side}\n optionType=\"button\"\n />\n \n \n )}\n
\n )\n }\n // Old banner (Can be removed in the future)\n case 'b':\n return (\n \n \n update({ ...content, bg_color_img: color })\n }\n onUpload={onUploadBanner}\n />\n
\n This banner is deprecated, please replace it to a new banner
\n )\n case 'tri_up':\n case 'tri_down':\n case 'btn':\n case 'btn_arrow':\n case 'btn_primary':\n case 'btn_primary_arrow':\n return (\n \n \n update({ ...content, id_tipo: e.target.value })}\n >\n {btnTypesArray.map((type) => (\n \n {type}\n \n ))}\n \n \n \n update({\n ...content,\n text: { ...content.text, [lang]: v },\n })\n }\n />\n )}\n \n update({\n ...content,\n btn_text: { ...content.btn_text, [lang]: v },\n })\n }\n />\n
\n )\n default: {\n console.log('Mising newsletter section', content.id_tipo)\n return null\n }\n }\n}\n\nlet timeout\n\nexport function Content() {\n const [lang, setLang] = useState('es')\n const [saving, setSaving] = useState(false)\n const [dirty, setDirty] = useState(false)\n const [verifying, setVerifying] = useState(false)\n const [clipboard, setClipboard] = useClipboard('copy-nl')\n const Ctx = useTraversal()\n const firstRender = useRef(true)\n const initialState = useRef({\n ...Ctx.state.context,\n initial_banner: transformOldInitialBannersToNew(\n Ctx.state.context.initial_banner\n ),\n contenido: Ctx.state.context.contenido.map((s) => ({\n ...s,\n id: s.id || uuid(),\n })),\n })\n const [ctx, setCtx] = useState(initialState.current)\n const [lastSave, setLastSave] = useState(ctx.modification_date)\n const updateContent = update('contenido')\n const lastContentLength = useRef()\n const disabled = disabledStatuses.has(ctx.status)\n const [loading, setLoading] = useState(false)\n\n // Scroll to bottom after add a new section\n useEffect(() => {\n if (lastContentLength.current < ctx.contenido.length) {\n window.scroll({\n top: document.body.scrollHeight,\n behavior: 'smooth',\n })\n }\n lastContentLength.current = ctx.contenido.length\n }, [ctx.contenido.length])\n\n function update(field, lang) {\n return (e) =>\n setCtx((s) => {\n const value = e.target?.value !== undefined ? e.target.value : e\n const v = lang ? { ...s[field], [lang]: value } : value\n return { ...s, [field]: v }\n })\n }\n\n function copy(el) {\n sessionStorage.setItem('copy-nl', JSON.stringify(el))\n setClipboard(el)\n message.success('Copied!')\n }\n\n function paste() {\n const newSection = { ...clipboard, id: uuid() }\n updateContent([...ctx.contenido, newSection])\n sessionStorage.removeItem('copy-nl')\n setClipboard(null)\n }\n\n async function verify() {\n const verify = ctx.status !== 'verified'\n const err = () => {\n message.error('There is an error updating the status of the newsletter')\n setVerifying(false)\n }\n\n setVerifying(true)\n if (dirty) await saveDraft()\n const res = await Ctx.client.verifyNLToggle(ctx.id, verify).catch(err)\n\n if (res.status >= 300) return err()\n\n setVerifying(false)\n message.success(\n 'Content verified successfully. This newsletter is ready for send.'\n )\n Ctx.refresh()\n }\n\n async function saveDraft() {\n clearTimeout(timeout)\n setSaving(true)\n\n const { status } = await Ctx.client.patch(Ctx.path, {\n ...ctx,\n status: undefined,\n })\n if (status === 204) {\n setLastSave(new Date().toISOString())\n message.success('Newsletter saved successfully')\n } else {\n const err = document.querySelector('.error-message')\n const errSuffix = err ? ` ${err.textContent}` : ''\n message.error('Error saving the newsletter.' + errSuffix)\n }\n setSaving(false)\n setDirty(false)\n }\n\n // Save changes automatically\n useEffect(() => {\n if (firstRender.current) {\n firstRender.current = false\n return\n }\n\n if (!Ctx.hasPerm('guillotina.ModifyContent') || disabled) {\n return\n }\n\n setDirty(true)\n // 1 minute like Wordpress autosave\n timeout = setTimeout(saveDraft, 60 * 1000)\n return () => clearTimeout(timeout)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [ctx])\n\n function updateDiscount(shop) {\n return (e) =>\n setCtx((s) => {\n const value = e.target.value\n if (s.active_shipping_discount === null) {\n s.active_shipping_discount = {}\n }\n s.active_shipping_discount[shop] = [value]\n return { ...s }\n })\n }\n function updateInitialBanner(shop) {\n return (e) =>\n setCtx((s) => {\n const value = e.target.value\n const checked = e.target.checked\n\n if (!s.initial_banner) s.initial_banner = {}\n\n if (!Array.isArray(s.initial_banner[shop])) {\n s.initial_banner[shop] = []\n }\n\n if (checked) {\n s.initial_banner[shop].push(value)\n } else {\n s.initial_banner[shop] = s.initial_banner[shop].filter((v) => {\n return v !== value\n })\n }\n return { ...s }\n })\n }\n\n async function translateTexts() {\n setLoading(true)\n const data = await newsletterTranslator(Ctx, ctx)\n console.log(data)\n setCtx(data)\n await saveDraft()\n setLoading(false)\n message.success('Translations updated')\n }\n\n return (\n \n setCtx((c) => ({ ...c, title }))}\n />\n \n \n
\n\n \n {SHOPS.map((shop) => (\n \n {shop} \n \n \n No Discount \n {/* TR100 */}\n DTP \n {/* \n Discounted Products\n */}\n \n \n \n ))}\n \n \n {SHOPS.map((shop) => (\n \n {shop} \n \n \n DTP\n \n \n Discounted Products\n \n \n \n ))}\n \n \n
\n {ctx.contenido.length === 0 && {\n const id = content.id_tipo\n const key = `${id}-${index}`\n\n let label = contentNames[id]\n ? `${contentNames[id] || ''} (${id})`\n : id\n\n if (buttonTypes.has(id)) label = `Button (${id})`\n\n return (\n \n
\n }\n >\n \n {saving ? (\n
\n \n null}\n />\n
\n \n setCtx(initialState.current)}\n className=\"is-outlined\"\n >\n \n \n \n Reset\n \n \n {\n updateContent([\n ...ctx.contenido,\n {\n ...setLangs(''),\n alt: setLangs(''),\n btn_text: setLangs(''),\n content: [],\n id: uuid(),\n id_tipo: key,\n image_src: setLangs(''),\n link: setLangs(''),\n path: '',\n product_kind: 'full',\n product_side: 'right',\n referencia: '',\n template: setLangs(''),\n text: setLangs(''),\n },\n ])\n }}\n >\n {Object.entries(contentNames).map(([key, name]) => (\n Section \"{name}\" \n ))}\n \n }\n >\n \n \n \n {ctx.status === 'draft' ? (\n <>\n Verify content\n \n \n \n \n ) : (\n <>\n Back to draft\n \n \n \n \n )}\n \n \n {saving ?
\n \n \n
\n ) : null}\n \n
\n {ctx.contenido.length === 0 &&
\n {label}: \n {getContentBrief(content, { lang })}\n
\n \n copy(content)} title=\"Copy\">\n \n updateContent(\n ctx.contenido.filter((c, i) => i !== index)\n )\n }\n title=\"Delete\"\n >\n
\n \n \n \n\n \n {status}\n \n\n
\n\n
\n )\n}\n\nfunction SendToEmails({ isActive, count, setCount, state, scheduled }) {\n const Ctx = useTraversal()\n\n const uploadEmails = (emails) => {\n setCount({ ...count, loading: true })\n Ctx.client.rest\n .request(\n Ctx.path + '/@sendto-emails',\n {\n method: 'POST',\n body: emails,\n },\n Ctx.client.rest.getHeaders()\n )\n .then((r) => {\n if (r.status !== 200) throw new Error('Error saving the newsletter')\n return Ctx.client\n .countNewsletter(state.id)\n .then((r) => setCount({ ...r, loading: false }))\n })\n .catch(() => ({}))\n }\n\n return (\n <>\n \n {saving ? (\n
\n \n \n {btnLabel}\n \n\n {sendtoSource !== undefined && count.loading === true &&
\n \n Total audience: \n {printVal(count.total)} (source: {count.source})\n
\n {scheduled && (\n \n \n No rendered:\n {printVal(progress.norendered)}\n \n \n No sent:\n {printVal(progress.nosent)}\n \n \n Pending:\n {printVal(progress.pending)}\n \n \n Rendered:\n {printVal(progress.rendered)}\n \n \n Sent:\n {printVal(progress.sent)}\n \n
\n )}\n\n \n {\n setState((s) => ({\n ...s,\n schedule_at_b: v ? s.schedule_at : null,\n finish_at_b: v ? s.finish_at_b : null,\n }))\n setDisplayB(v)\n }}\n />\n
\n {displayB && \n\n
\n \n Audience emails\n \n
\n\n \n
\n \n \n Audience conditions\n \n\n \n {!isActive && (\n \n
\n\n \n setPreferences('langs', [])}\n >\n Unselect all\n \n setPreferences('langs', LANGS)}\n >\n Select all\n \n
\n \n setPreferences('countries', [])}\n >\n Unselect all\n \n setPreferences('countries', SELLING_COUNTRIES)}\n >\n Select all\n \n
\n \n \n Advanced audience conditions\n \n
*/}\n\n \n setPreferences('colectivos_id', [])}\n >\n Unselect all\n \n \n setPreferences('colectivos_id', Object.keys(colectivos))\n }\n >\n Select all\n \n
\n \n \n \n \n Save all\n \n
\n )\n\n if (promos.length === 0) {\n return (\n <>\n {controls}\n \n There aren't promos on {Ctx.state.context.title} yet\n
\n \n )\n }\n\n return (\n <>\n {controls}\n \n {promos.map((promo) => (\n \n
\n }\n defaultCollapsed={!promo.isNew}\n >\n \n {promo.text.es || '...'}\n
\n {`${promo.date_start} - ${promo.date_end}`}
\n\n copy(promo)} title=\"Copy\">\n
\n \n \n {(lang) => (\n <>\n \n \n update(promo, { ...promo.text, [lang]: v }, 'text')\n }\n />\n \n \n update(promo, { ...promo.link, [lang]: v }, 'link')\n }\n />\n \n
\n \n ))}\n \n \n )\n}\n\nconst tabs = {\n Content: Promos,\n Permissions: PanelPermissions,\n AuditLog: AuditLogTab,\n}\n\nconst tabsPermissions = {\n Content: 'guillotina.ViewContent',\n Permissions: 'guillotina.SeePermissions',\n AuditLog: 'vinissimus.ViewLogs',\n}\n\nexport function PromosView(props) {\n const ctx = useTraversal()\n const calculated = ctx.filterTabs(tabs, tabsPermissions)\n\n return (\n \n update(promo, e.target.value, 'date_start')}\n />\n {\n let value = null\n\n if (e.target.value) {\n const date = new Date(Date.parse(e.target.value))\n const zoneDate = utcToZonedTime(date, 'Europe/Madrid')\n\n zoneDate.setHours(23, 59, 59)\n value = zoneDate.toISOString()\n }\n\n update(promo, value, 'date_end')\n }}\n />\n update(promo, v, 'display_countdown')}\n />\n update(promo, e.target.value, 'bg_color')}\n value={promo.bg_color}\n />\n
\n \n ES - https://www.vinissimus.com\n /es/promocion/ --> \"/es/promocion/\"\n
\n EN - https://www.vinissimus.com\n /en/promotion/ and
\n https://www.vinissimus.co.uk\n /en/promotion/ ——> \"/en/promotion/\"\n
\n FR - https://www.vinissimus.fr\n /fr/promotion/ ——> \"/fr/promotion/\"\n
\n DE - https://www.hispavinus.de\n /de/aktion/\n {' '}\n ——> \"/de/aktion/\"
\n IT - https://www.italvinus.it\n /it/promozione/ ——> \"/it/promozione/\"\n
\n
\n ⚠ Keep the \"/\" at the beginning of link.\n It does that the link works in any site page (not only on\n home page).\n
\n \n )}\n\n
\n {title}
\n \n\n {\n setSelected(\n e.selected && e.node.pos !== '0-0' ? e.node : null\n )\n window.scrollTo({ top: 0, behavior: 'smooth' })\n }}\n treeData={loadData(lang)}\n />\n
\n \n
\n
\n null}>\n {(l) => (\n {\n const [cursor, newChildren] = getItemCursor()\n cursor.name[l] = value\n setSelected({ ...selected, original: cursor })\n setChildren(newChildren)\n }}\n />\n )}\n \n {ctx.state.context['@name'] === 'categoria_productos' && (\n <>\n null}>\n {(l) => (\n {\n const [cursor, newChildren] = getItemCursor()\n if (!cursor.url) cursor.url = setLangs('')\n cursor.url[l] = value\n setSelected({ ...selected, original: cursor })\n setChildren(newChildren)\n }}\n />\n )}\n \n \n )}\n \n )}\n
\n \n \n \n {selected?.original?.name?.[lang] || Select some child}\n {selected ? (\n {` ${selected.key}`}\n ) : (\n ''\n )}\n \n showDrawer(true)}\n >\n Add child\n \n
\n {selected && (\n <>\n \n
Id
\n\n
Name
\nURL
\n\n {props.label ? : ''}\n
\n )\n }\n}\n","import React, { Component } from 'react'\n\nimport { TabsPanelWithLock } from '../../components/tab-panel-with-lock'\nimport { ContextToolbar } from '@guillotinaweb/react-gmi'\nimport { useTraversal, TraversalContext } from '@guillotinaweb/react-gmi'\nimport { PanelPermissions } from '@guillotinaweb/react-gmi'\nimport { PanelItems } from '@guillotinaweb/react-gmi'\nimport { Select } from '@guillotinaweb/react-gmi'\nimport { Loading } from '@guillotinaweb/react-gmi'\nimport { Input } from '@guillotinaweb/react-gmi'\n\nimport { QuillEditor } from '../../components/QuillEditor'\n\nimport { AuditLogTab } from '../../common/auditlog'\nimport { DnD } from '../../common/dnd'\nimport { Field, BaseField, ImageEditor } from '../../common/field'\nimport { I18NField } from '../../components/i18nfield'\nimport { SEOTab } from '../../components/seo-tab'\nimport { SubmenuTab } from '../../components/submenu-tab'\nimport { Suggester } from '../../common/text_suggester'\nimport { getOrSet } from '../../utils'\n\nimport './zonas_editor.css'\n\nconst Empty = () => null\n\nconst TIPO_ZONA = {\n pais: 'Pais',\n supraregion: 'Supraregion',\n subdivision: 'Subdivision',\n ao: \"Appellation d'origine contrôlée\",\n ce: 'Región para cervezas',\n cg: 'Denominazione di Origine Controllata e Garantita',\n de: 'Región para destilados',\n dc: 'Denominación de Origen Calificada',\n do: 'Denominación de Origen',\n it: 'Indicazione Geografica Tipica',\n oc: 'Denominazione di Origine Controllata',\n vp: 'Vino de Pago',\n vt: 'Vinos de la tierra',\n va: 'Vino da Tavola',\n}\n\nconst CONSEJO_REGULADOR = [\n ['Dirección', 'direccion'],\n ['Código postal', 'codigo_postal'],\n ['Localidad', 'localidad'],\n ['Telefono', 'telefono'],\n ['Email', 'email'],\n ['Web', 'web'],\n ['Año de fundación', 'anyo_fundacion'],\n ['# Elaboradores', 'num_elaboradores'],\n ['Superfície', 'superficie'],\n]\n\nconst CALIFICACIONES = {\n 5: 'E-Excelente',\n 4: 'MB-Muy Buena',\n 3: 'B-Buena',\n 2: 'N-Normal',\n 1: 'M-Mediana',\n}\n\nconst IMAGES_KEYS = [\n ['Background', 'img_bg', 600],\n ['Mapa país', 'img_pais', 600],\n ['Mapa región', 'img_region', 600],\n ['Logo DO', 'img_logo', 150],\n]\n\nconst GUILLOTINA_KEYS = [\n '@id',\n '@name',\n '@static_behaviors',\n '@type',\n '@uid',\n 'creation_date',\n 'is_folderish',\n 'items',\n 'length',\n 'modification_date',\n 'parent',\n 'title',\n 'type_name',\n 'uuid',\n '__behaviors__',\n]\n\nclass ZonaEditor extends Component {\n constructor(props) {\n super(props)\n\n this.state = {\n zona: null,\n cachedBodegas: {},\n newClasificacionAnyadaPunt: Object.keys(CALIFICACIONES).sort()[0],\n }\n\n // ref\n this.newClasificacionAnyada = null\n\n this.save = this.save.bind(this)\n this.handleChange = this.handleChange.bind(this)\n this.handleEditorChange = this.handleEditorChange.bind(this)\n }\n\n render() {\n let zona = this.state.zona\n\n if (zona === null) return \n {\n this.setState({\n zona: {\n ...zona,\n bodegas_emblematicas: zona.bodegas_emblematicas.filter(\n (_, index) => index !== i\n ),\n },\n })\n }}\n style={{ float: 'right' }}\n >\n \n \n \n \n
\n )}\n />\n\n \n \n {\n this.setState({ zona: { ...zona, tipo: e.target.value } })\n }}\n options={Object.keys(TIPO_ZONA).map((id) => ({\n value: id,\n text: TIPO_ZONA[id],\n }))}\n />\n \n\n \n \n {(lang) => (\n \n this.setState({\n zona: {\n ...zona,\n nombre: {\n ...zona.nombre,\n [lang]: nombre,\n },\n },\n })\n }\n />\n )}\n \n \n\n \n \n {(lang) => (\n \n \n\n
\n\n
\n\n {\n update(await this.suggestBodega(text))\n }}\n render={(item, currentValue) => item.nombre}\n onSelect={(item) => {\n if (zona.bodegas_emblematicas.indexOf(item.id) > -1) {\n alert('La bodega ya existe')\n return\n }\n this.setState({\n zona: {\n ...zona,\n bodegas_emblematicas: [item.id, ...zona.bodegas_emblematicas],\n },\n })\n }}\n />\n {\n this.setState({\n zona: {\n ...zona,\n bodegas_emblematicas: l,\n },\n })\n }}\n getChild={(el, i) => (\n \n \n {i + 1}\n
\n {(this.state.cachedBodegas[el] || {}).nombre || el}\n \n\n
Consejo regulador:
\n {CONSEJO_REGULADOR.map(([name, field]) => (\n\n\n
Bodegas emblematicas
\n\n\n
Calificaciones añada:
\n\n| {k} | \n\n {CALIFICACIONES[zona.clasificaciones_anyada[k]]}\n | \n\n | \n
\n\n
\n {IMAGES_KEYS.map(([name, field, maxWidth]) => (\n \n \n ))}\n
\n \n )\n }\n\n async save() {\n const ignoreKeys = (data) =>\n Object.keys(data).reduce(\n (acc, k) =>\n GUILLOTINA_KEYS.indexOf(k) >= 0 || k.startsWith('img_')\n ? acc\n : { ...acc, [k]: data[k] },\n {}\n )\n\n const zona = this.state.zona\n const r = await this.context.client.upsert(this.context.path, {\n id: zona['@name'],\n ...ignoreKeys(zona),\n })\n if (r.status !== 204)\n return {\n ok: false,\n err: 'Error al guardar:\\n' + JSON.stringify(await r.json()),\n }\n return { ok: true }\n }\n\n handleChange(field) {\n return (text) => {\n const zona = { ...this.state.zona }\n\n const field_list = field.split('.')\n const obj = field_list\n .slice(0, -1)\n .reduce((o, i) => getOrSet(o, i, {}), zona)\n const [key] = field_list.slice(-1)\n obj[key] = text\n this.setState({ zona })\n }\n }\n\n handleEditorChange(lang) {\n return (text) => {\n let z = this.state.zona\n if (z.comentario === null || z.comentario[lang] !== text) {\n this.setState({\n zona: {\n ...z,\n comentario: {\n ...z.comentario,\n [lang]: text,\n },\n },\n })\n }\n }\n }\n\n async getBodegas(ids) {\n let bodegas = {}\n let from = 0\n let page = 25\n let moreResults = true\n\n while (moreResults) {\n let query = {\n size: page,\n from: from,\n query: {\n bool: {\n should: ids.map((id) => ({ match: { id: id } })),\n must: [{ match: { type_name: 'Bodega' } }],\n minimum_should_match: 1,\n },\n },\n }\n\n const r = await this.context.client.esQuery(query)\n const body = await r.json()\n for (let b of body.member)\n bodegas[b.id] = {\n id: b.id,\n nombre: b.nombre,\n }\n\n moreResults = Object.keys(bodegas).length < body.items_count || false\n if (moreResults) from += page\n }\n\n return bodegas\n }\n\n async suggestBodega(name) {\n let query = {\n query: {\n bool: {\n must: [\n { match_phrase_prefix: { nombre: name } },\n { match: { type_name: 'Bodega' } },\n ],\n },\n },\n }\n\n let r = await this.context.client.esQuery(query)\n let body = await r.json()\n\n // Add suggestion results to the cache\n let cachedBodegas = this.state.cachedBodegas\n for (let b of body.member)\n cachedBodegas[b.id] = {\n id: b.id,\n nombre: b.nombre,\n }\n this.setState({ cachedBodegas })\n\n return body.member\n }\n\n async componentDidMount() {\n const r = await this.context.client.rest.get(this.context.path)\n let body = await r.json()\n let status = r.status\n if (status === 200) this.setState({ zona: body })\n else this.context.flash(body)\n\n if (body.bodegas_emblematicas.length === 0) return\n\n let bodegas = await this.getBodegas(body.bodegas_emblematicas)\n this.setState({\n cachedBodegas: bodegas,\n })\n }\n}\n\nZonaEditor.contextType = TraversalContext\n\nconst tabs = {\n Items: PanelItems,\n Edit: ZonaEditor,\n Permissions: PanelPermissions,\n AuditLog: AuditLogTab,\n SEO: SEOTab,\n Submenu: SubmenuTab,\n}\n\nconst tabsPermissions = {\n Edit: 'guillotina.ViewContent',\n Items: 'guillotina.ViewContent',\n Permissions: 'guillotina.SeePermissions',\n SEO: 'guillotina.ModifyContent',\n Submenu: 'guillotina.ModifyContent',\n}\n\nexport function ZonaGeoView(props) {\n const ctx = useTraversal()\n const calculated = ctx.filterTabs(tabs, tabsPermissions)\n return (\n \n
\n \n
\n \n \n navigate({ pais: ev.target.value })}\n />\n {pais && (\n
\n \n {!zonas && \n setMoveModal(false)}\n onMove={(ev) => handlerRegion(region.region, region.path)}\n />\n )}\n\n {copyModal && (\n setCopyModal(false)}\n />\n )}\n \n )}\n\n {loadingRegion ? (\n
\n \n
\n\n {moveModal && (\n \n
\n {region.path}
\n\n {canModify && (\n setCopyModal(true)}\n >\n Copiar contenido a otra Región\n \n )}\n\n {canModify && (\n setMoveModal(true)}\n >\n Mover Productos\n \n )}\n\n \n navigate({ path: `${region.path}/`, tab: 'Items' })\n }\n >\n Editar Región\n \n\n {canDelete && (\n \n Ctx.doAction('removeItems', {\n items: [{ '@id': region.path }],\n })\n }\n >\n Eliminar\n \n )}\n
\n \n
\n {productos.search.map((product) => (\n
\n )\n )}\n Productos: {productos.items_count}
\n\n {productos.search.map((product) => (\n
\n
\n ))}\n {/* \n
{JSON.stringify(productos, null, 2)} */}\n Mover los productos de:
\n \nCopiar contenido de:
\n \n- \n {selectItems(filter, items).map((item) => (\n
\n
\n \n
\n\n \n
\n Analytics
\n\n {loading &&
}\n
\n )\n}\n\nfunction Funnel() {\n return (\n {error.message}
}\n {data && \n Under construction\n
\n )\n}\n\nfunction PriceComparator() {\n const [urls, setUrls] = useState()\n const [rest, setRest] = useState()\n const [page, setPage] = useState(0)\n const [prod, setProd] = useState()\n const [loading, setLoading] = useState(true)\n const [country, setCountry] = useState('es')\n const erp = useContext(ErpClientContext)\n\n async function updateAll() {\n if (\n window.confirm('Are you sure you want to update all URLs of this page?')\n ) {\n setLoading(true)\n message.loading(\n 'Parsing URLs, be patient, it may take several minutes.',\n 0\n )\n try {\n const data = urls\n .filter((item) => item.url)\n .map((item) => ({\n group: item.product_group,\n url: item.url,\n }))\n const { ok, ko } = await erp.upsertPriceComparator(data, country)\n await init()\n message.destroy()\n message.success(`${ok.length} URLs updated successfully`)\n\n if (ko.length) {\n message.warning(\n ko\n .map(\n (a) =>\n `${ko.length} URLs with an error. Error (${a[1]}) updating this URL: ${a[0]}`\n )\n .join(', \\n')\n )\n }\n } catch (e) {\n message.destroy()\n message.error(`There was an error updating the data: ${e.message}`)\n } finally {\n setLoading(false)\n }\n }\n }\n\n async function addURL(group = prod) {\n const url = window.prompt(`Add competence URL of ${group}:`)\n\n if (!url) return\n\n message.loading('Parsing URL', 0)\n setLoading(true)\n\n try {\n const { ok, ko } = await erp.upsertPriceComparator(\n [{ url, group }],\n country\n )\n message.destroy()\n if (ok.length) {\n message.success(`${ok.length} URL added successfully`)\n await init()\n } else\n message.error(\n `There was an error adding the URL: ${JSON.stringify(ko)}`\n )\n } catch (e) {\n message.destroy()\n message.error(`There was an error adding the URL: ${e.message}`)\n } finally {\n setLoading(false)\n }\n }\n\n useEffect(() => {\n init()\n }, [country, page, prod])\n async function init() {\n setLoading(true)\n const [res, rest] = await erp.getPriceComparator(prod, country, page)\n setUrls(res)\n setRest(rest)\n setLoading(false)\n }\n\n return (\n \n \n \n
\n \n {loading ? (\n \n setProd(prods[prods.length - 1])}\n width={350}\n placeholder={\n <>\n \n {COUNTRIES.map((c) => (\n {ALL_COUNTRIES[c]} \n ))}\n \n\n \n
\n Example
\n}\n\nexport function Customers() {\n return (\nEdit Discount
\n{status.message}
\n )}\n \n \n )\n}\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useState, useContext, useEffect, useRef } from 'react'\nimport moment from 'moment'\nimport {\n Form,\n Input,\n Button,\n Divider,\n Drawer,\n Select,\n DatePicker,\n Row,\n Col,\n Table,\n Tag,\n Empty,\n} from 'antd'\nimport { PromoTag } from './promo'\nimport { ArrowRightOutlined, PlusOutlined } from '@ant-design/icons'\nimport { ErpClientContext } from '../../services/erp'\nimport * as dayjs from 'dayjs'\nimport { message } from 'antd'\nimport { OffersContext, isExpired } from './context'\nimport { OffersForm } from './form'\nimport 'antd/dist/antd.css'\n\nconst initial = {\n q: undefined,\n date: moment(),\n id_tipo: undefined,\n p: 1,\n}\n\nexport function Offers() {\n const erpService = useContext(ErpClientContext)\n const offersCtx = useContext(OffersContext)\n const [form] = Form.useForm()\n const lastSearch = useRef()\n const [loading, setLoading] = useState(true)\n const [formState, setFormState] = useState(initial)\n const [data, setData] = useState(undefined)\n const [drawer, showDrawer] = useState(false)\n\n offersCtx.onUpdate = (data) => {\n setFormState({ ...formState, refresh: Math.random() })\n }\n\n async function onSearch(params) {\n const date = params.date || formState.date\n const last = lastSearch.current || {}\n const data = {\n ...formState,\n ...params,\n date: date ? date.milliseconds(0).toISOString() : undefined,\n }\n\n if (\n (last.q === data.q || !data.q) &&\n last.date === data.date &&\n last.tipo === data.tipo\n ) {\n return\n }\n\n lastSearch.current = data\n\n setLoading(true)\n const resp = await erpService.fetch('/offers/@search', {\n method: 'POST',\n body: JSON.stringify(data),\n })\n if (resp.status === 200) {\n const d = await resp.json()\n setData(d)\n } else {\n setData()\n }\n setLoading(false)\n }\n\n useEffect(() => {\n onSearch({})\n }, [])\n\n return (\n \n
\n Offers
\n\n {loading && record.id}\n pagination={{\n current: data.page,\n pageSize: data.per_page,\n total: data.items,\n position: ['topLeft', 'bottomRight'],\n showSizeChanger: false,\n }}\n onChange={(pagination, filters, sorter) => {\n setFormState({ ...formState, p: pagination.current })\n }}\n size=\"small\"\n />\n )}\n
\n \n )\n}\n\nconst renderDate = (val) => dayjs(val).format('DD/MM/YYYY HH:mm')\nconst tipos = {\n o: 'Offer',\n p: 'Promotion',\n e: 'Special Price',\n}\n\nconst renderPromo = (text, record) => {\n return Loading...
}\n {!loading && !data && {status.message}
\n )}\n \n \n )\n}\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport {\n ArrowRightOutlined,\n DeleteOutlined,\n PlusOutlined,\n} from '@ant-design/icons'\nimport {\n Button,\n Divider,\n Drawer,\n Empty,\n Form,\n message,\n Modal,\n Table,\n Tag,\n} from 'antd'\nimport 'antd/dist/antd.css'\nimport * as dayjs from 'dayjs'\nimport React, { useContext, useEffect, useState } from 'react'\nimport { ALL_COUNTRIES, FREE_SHIPPING_RATES } from '../../consts'\nimport { ErpClientContext } from '../../services/erp'\nimport { CreateFreeShippingRatesForm } from './createFreeShippingRatesForm'\n\nexport function FreeShippingRatesPage() {\n const erpService = useContext(ErpClientContext)\n const [loading, setLoading] = useState(false)\n const [data, setData] = useState(undefined)\n const [drawer, showDrawer] = useState(false)\n const [form] = Form.useForm()\n\n useEffect(() => {\n fetchFreeShippingRates()\n }, [])\n\n const fetchFreeShippingRates = async () => {\n setLoading(true)\n const response = await erpService.getFreeShippingRates()\n if (response.status === 200) {\n const data = await response.json()\n setData(data)\n } else {\n const error = await response.text()\n message.error(`Failed getting data: ${error}.`, 5)\n }\n setLoading(false)\n }\n\n const renderCountry = (pais) => ALL_COUNTRIES[pais]\n\n const renderShippingRate = (tarifa) => FREE_SHIPPING_RATES[tarifa]\n\n const renderDates = (record) => {\n const colors = {\n expired: ['#bbb', '#bbb'],\n current: ['#2db7f5', '#108ee9'],\n }\n const status = dayjs(record.hasta) < new Date() ? 'expired' : 'current'\n const renderDate = (val) => dayjs(val).format('DD/MM/YYYY HH:mm')\n\n return (\n <>\n {`Are you sure you want to delete the record #${record.id}?`}
\n \n \n )\n }\n\n const tableColumns = [\n {\n title: 'ID',\n dataIndex: 'id',\n },\n {\n title: 'Dates',\n key: 'desde',\n render: renderDates,\n },\n {\n title: 'Country',\n dataIndex: 'pais',\n render: renderCountry,\n },\n {\n title: 'Shipping tariff type',\n dataIndex: 'tarifa',\n render: renderShippingRate,\n },\n {\n title: 'Minimum sum of products',\n dataIndex: 'cart_amount',\n },\n {\n title: 'Minimum product price',\n dataIndex: 'min_precio_uni',\n },\n {\n title: 'Actions',\n key: 'actions',\n render: renderRowActions,\n },\n ]\n\n return (\n\n
\n\n Free Shipping Rates
\nLoading...
}\n {!loading && !data &&\n \n
\n \n \n {Object.keys(statusTabs).map((statusTab) => (\n \n \n ))}\n \n \n
\n
\n )\n}\n","import Papa from 'papaparse'\n\nexport default function csvToJSON(csv) {\n const { data } = Papa.parse(csv)\n const headings = data[0]\n const res = []\n\n for (let i = 1; i < data.length; i += 1) {\n const row = data[i]\n let hasContent = false\n\n const rowObj = headings.reduce((o, heading, headingIndx) => {\n const content = row[headingIndx] || ''\n o[heading] = content\n hasContent = hasContent || content.length > 0\n return o\n }, {})\n\n if (hasContent) res.push(rowObj)\n }\n\n return res\n}\n","import Dragger from 'antd/lib/upload/Dragger'\nimport React, { useState } from 'react'\nimport csvToJSON from '../../../common/csv-to-json'\nimport { useLocation } from 'wouter'\nimport { Button, Table, message, InputNumber, Switch, Input } from 'antd'\nimport { InboxOutlined } from '@ant-design/icons'\nimport { Loading } from '@guillotinaweb/react-gmi'\nimport { useMutation, useQuery } from 'urql'\nimport { ContentLayout } from '../../../common/content-layout'\nimport { CreateOrderInvoice } from './graphql'\nimport { ProductSelector } from '../../../components/product-selector'\n\nimport './styles.css'\n\nconst SearchProductQuery = `\n query($search: String) {\n pedido_search_producto(query: $search) {\n precio\n id_producto\n disponibilidad\n nombre\n visibilidad\n }\n }\n`\n\nconst mandatoryAddressColumns = [\n 'linea1',\n 'codigo_postal',\n 'telefono',\n 'destinatario',\n 'id_provincia',\n 'id_pais',\n 'ciudad',\n]\nconst supportedAddressColumns = [...mandatoryAddressColumns, 'linea2', 'linea3']\n\nexport function AddOrder({ id }) {\n const [, createOrderMutation] = useMutation(CreateOrderInvoice)\n const [, setLocation] = useLocation()\n\n // Product state\n const [lines, setLines] = useState([{ add: true }])\n const [product, setProduct] = useState()\n const [quantity, setQuantity] = useState(1)\n const [price, setPrice] = useState()\n const [discount, setDiscount] = useState(0)\n const productLines = lines.filter((l) => !l.add)\n const [productSearch, setProductSearch] = useState('')\n const [suggestions] = useQuery({\n query: SearchProductQuery,\n variables: { search: productSearch },\n pause: productSearch.length === 0,\n })\n\n // Order satte\n const [gift, setGift] = useState(false)\n const [presentMessage, setPresentMessage] = useState('')\n\n // Address state\n const [CSVs, setCSVs] = useState({})\n const [reading, setReading] = useState(false)\n const address = Object.values(CSVs).flat()\n\n function add() {\n const row = { product, quantity, price, discount }\n if (Object.values(row).some((v) => v === undefined))\n return message.error('You should fill all fields')\n setLines((l) => [row, ...l])\n setProduct()\n setQuantity(1)\n setPrice()\n setDiscount(0)\n message.success('Product added')\n }\n\n function remove(i) {\n setLines((l) => l.filter((v, index) => index !== i))\n }\n\n async function createOrder() {\n const products = productLines.map((l) => ({\n id_producto: l.product.ref,\n quantity: l.quantity,\n price: l.price - (l.price * l.discount) / 100,\n }))\n const query = { id, products, address, gift_paper: gift }\n\n if (products.length === 0) {\n message.error('You forgot to add products')\n return\n }\n if (address.length === 0) {\n message.error('You forgot to add addresses')\n return\n }\n if (presentMessage) query.present_message = presentMessage\n\n const res = await createOrderMutation(query)\n if (res.error) return message.error(res.error.message)\n message.success('Order confirmed correctly')\n setLocation(`/orders/multi-order-invoice/${id}?refresh=1`)\n }\n\n function onLoadCSV({ file }) {\n if (CSVs[file.uid] || file.status !== 'done') return\n setReading(true)\n const reader = new FileReader()\n\n reader.addEventListener('load', async (e) => {\n const data = csvToJSON(e.target.result)\n const [columns] = data\n\n if (mandatoryAddressColumns.some((k) => !columns[k])) {\n message.error(\n `You are missing some mandatory address column: ${mandatoryAddressColumns.join(\n ', '\n )}`\n )\n setReading(false)\n return\n }\n\n // Ignore columns that don't match with supported columns\n const cleanData = data.map((o) =>\n supportedAddressColumns.reduce((t, c) => {\n t[c] = o[c]\n return t\n }, {})\n )\n\n await setCSVs((c) => ({ ...c, [file.uid]: cleanData }))\n setReading(false)\n })\n reader.readAsText(file.originFileObj)\n }\n\n return (\n \n \n o.add ? (\n ({\n id: p.id_producto,\n ref: p.id_producto,\n nombre: p.nombre,\n option: { precio: p.precio },\n })\n )}\n onSearch={setProductSearch}\n disabledIds={\n new Set(productLines.map((l) => l.product.ref))\n }\n products={product ? [product.ref] : []}\n type=\"refs\"\n onChange={(prods, suggestions) => {\n const productId = prods[prods.length - 1]\n const prod = suggestions.find((p) => p.ref === productId)\n if (!prod) return\n const price = prod.option.precio\n setProduct(prod)\n if (price) setPrice(price)\n }}\n />\n ) : (\n `${v.nombre} (${v.ref})`\n ),\n },\n {\n title: 'Price (€)',\n dataIndex: 'price',\n width: 30,\n suffix: '€',\n key: 'price',\n render: (v, o) =>\n o.add ? (\n
\n '#'} // Don't upload to anywhere\n name=\"file\"\n accept=\".csv\"\n onRemove={(file) => setCSVs((c) => ({ ...c, [file.uid]: [] }))}\n onChange={onLoadCSV}\n >\n
\n {address.length > 0 && (\n record.linea1}\n size=\"small\"\n />\n )}\n
\n setPresentMessage(e.target.value)}\n />\n
\n \n )\n}\n","export const ViewInvoiceQuery = `\n query ($id: Int!) {\n invoice_multiorder(id_multi_order: $id) {\n id_usuario\n status\n id_factura\n id_datos_fac\n pedidos {\n id_pedido\n id_estado_pd\n cod_pedido\n lines {\n cantidad\n nombre\n }\n foto_direccion {\n linea1\n linea2\n linea3\n }\n }\n }\n }\n`\n\nexport const ViewUserQuery = `\n query ($id: Int!) {\n user(id_usuario: $id) {\n email,\n datos_fac {\n id_datos_fac,\n nombre,\n linea1,\n linea2,\n linea3\n }\n }\n }\n`\n\nexport const RemoveOrderMutation = `\n mutation($id: Int!, $orderIds: [Int!]) {\n invoice_multiorder_update(\n input: { \n id: $id,\n remove_orders: $orderIds,\n }\n ) {\n status\n }\n }\n`\n\nexport const SetInvoicedMutation = `\n mutation($id: Int!) {\n invoice_multiorder_set_invoiced(\n id_multiorder: $id\n ) {\n status\n }\n }\n`\n\nexport const SelectBillingAddressMutation = `\n mutation($id: Int!, $id_fac: Int!) {\n invoice_multiorder_update(\n input: {\n id: $id,\n id_datos_fac: $id_fac\n }\n ) {\n status\n }\n }\n`\n\nexport const HibernateMutation = `\n mutation($orderIds: [Int!], $date: Datetime) {\n batch_pedido_hibernate(\n pedidos: $orderIds\n date: $date\n ) {\n status,\n errors\n }\n }\n`\n\nexport const ConfirmOrdersMutation = `\n mutation($orderIds: [Int!]) {\n batch_pedido_confirm_payment(\n pedidos: $orderIds\n ) {\n status, errors\n }\n }\n`\n\nexport const CancelOrdersMutation = `\n mutation($orderIds: [Int!]) {\n batch_pedido_cancel(\n pedidos: $orderIds\n ) {\n status, errors\n }\n }\n`\n\nexport const CommentOrdersMutation = `\n mutation($orderIds: [Int!], $comment: String!, $type: PedidoTipoObservaciones) {\n batch_pedido_addcomment(\n pedidos: $orderIds\n comment: $comment\n tipo: $type\n ) {\n status, errors\n }\n }\n`\n\nexport const CreateAddressMutation = `\n mutation(\n $userId: Int!, \n $nombre: String!, \n $doc_id: String!, \n $linea1: String!, \n $linea2: String, \n $linea3: String, \n $codigo_postal: String!, \n $ciudad: String!, \n $telefono: String!, \n $id_pais: String!\n ) {\n user_add_datos_fac(\n input: { \n id_usuario: $userId,\n nombre: $nombre,\n doc_id: $doc_id,\n linea1: $linea1,\n linea2: $linea2,\n linea3: $linea3,\n codigo_postal: $codigo_postal,\n ciudad: $ciudad,\n telefono: $telefono,\n id_pais: $id_pais,\n }\n ) {\n id_datos_fac\n }\n }\n`\n\nexport const ListInvoicesQuery = `\n query($user: Int, $page: Int) {\n invoice_multiorder_search(id_usuario: $user, page: $page) {\n data {\n id,\n id_factura,\n id_usuario,\n email,\n nombre,\n status,\n id_pedidos\n }\n amount,\n current_page\n }\n }\n`\n\nexport const CreateInvoiceMutation = `\n mutation($id_usuario: Int!) {\n invoice_multiorder_create(\n input: { id_usuario: $id_usuario }\n ) {\n status\n }\n }\n`\n\nexport const CreateOrderInvoice = `\n mutation(\n $id: Int!, $tipo_descuento: OrderDiscountType, $descuento: Float,\n $gift_paper:Boolean, $present_message:String, $observaciones: String,\n $products: [input_pedido_linea!]!, $address: [input_foto_direccion!]!\n ) {\n invoice_multiorder_batch_create_orders(input: {\n id: $id,\n order: {\n tipo_descuento: $tipo_descuento,\n descuento: $descuento,\n gift_paper: $gift_paper,\n present_message: $present_message,\n observaciones: $observaciones,\n },\n products: $products,\n address: $address,\n }\n ) {\n status\n }\n }\n`\n","import React, { useState, useEffect } from 'react'\nimport { Button, Input } from 'antd'\n\nimport 'antd/dist/antd.css'\n\nexport const getHost = () => {\n let host = new URL(window.location.href)\n if (host.hostname.startsWith('localhost')) {\n return 'stage'\n }\n return host.hostname.split('.')[0]\n}\n\nconst DOMAINS = {\n vinissimus: 'vinissimus.com',\n fr: 'vinissimus.fr',\n italvinus: 'italvinus.it',\n de: 'hispavinus.de',\n uk: 'vinissimus.co.uk',\n}\n\nexport const linkOrder = (provider, id_pedido) => {\n const [shop] = provider\n const host = getHost()\n return `https://${host}.${DOMAINS[shop]}/administracion/pedidos/detalle_pedido.html?id_pedido=${id_pedido}`\n}\n\nexport const linkBackoffice = (shop, link) => {\n const host = getHost()\n return `https://${host}.${DOMAINS[shop]}${link}`\n}\n\nexport function EditableField({\n label,\n defaultValue,\n onSave,\n editable = true,\n prefix,\n className,\n disabled: dis = true,\n onClick,\n children,\n}) {\n const [value, setValue] = useState(defaultValue)\n const [disabled, setDisabled] = useState(dis)\n const disabledStyles = {\n backgroundColor: 'transparent',\n color: 'rgb(74, 74, 74)',\n border: '1px dashed rgb(217, 217, 217)',\n }\n const styles = { maxWidth: 300, ...(disabled ? disabledStyles : {}) }\n\n useEffect(() => setDisabled(dis), [dis])\n\n function click(e) {\n if (onClick) onClick(e)\n if (disabled) return setDisabled(false)\n if (onSave) onSave(value)\n setDisabled(true)\n }\n\n return (\n Products
\n\n
Shipping address
\n\n
\n Click or drag .csv file to this area\n
\n \n {reading &&\n {address.length > 0 && (\n
\n
Additional order data
\n \n\n {label ? `${label}:` : ''}\n
\n {children ? (\n children(disabled, setValue, styles)\n ) : (\n \n
\n\n {!data && \n
\n \n Delayed Orders ({data && Object.keys(data).length})\n
\n\n setSite(e.target.value)}\n options={SITES}\n value={site}\n />\n
\n | Product | \nFecha Pedido | \nFecha Recepción | \nProv | \nQty. Pedido | \nDisponible | \n\n |
|---|---|---|---|---|---|---|
| \n | \n {data[ped][0].precio_total}€ | \n\n | \n ||||
\n | \n | \n |
| Pedido | \nid_producto | \ndsp | \nres | \nstock real | \nqty.order | \nstock_agg | \n
|---|---|---|---|---|---|---|
| \n \n {item.cod_pedido}\n \n | \n{item.id_producto} | \n{item.dsp} | \n{item.res} | \n{item.stock_real} | \n{item.cantidad_pedido} | \n{item.stock_agg} | \n
\n
\n \n
\n Group Orders
\n\n {selected.length > 0 && (\n mergeOrders(selected, provider, doLoad)}\n style={{ marginRight: '10px' }}\n loading={loading}\n >\n Merge Orders\n \n )}\n {empresas.length > 0 && (\n {\n setProvider(e.target.value.split(','))\n }}\n options={getEmpresas(empresas)}\n value={provider}\n />\n )}\n
\n {JSON.stringify(order, null, 2)}{v}
\n },\n },\n ]}\n rowKey={(record) => record.id}\n onRow={({ id }) => ({\n onClick: () => setLocation(`/orders/multi-order-invoice/${id}`),\n })}\n pagination={{\n current: page + 1,\n pageSize: 100,\n total: res?.data?.invoice_multiorder_search?.amount,\n position: ['topLeft', 'bottomRight'],\n showSizeChanger: false,\n onChange: (page) => setPage(page - 1),\n }}\n size=\"small\"\n />\n \n {responseJson.pack_products.map((product) => (\n
\n ),\n onOk() {\n window.location.href = `/administracion/pedidos/detalle_pedido.html?id_pedido=${order.id_pedido}`\n },\n width: '35%',\n })\n } else {\n window.location.href = `/administracion/pedidos/detalle_pedido.html?id_pedido=${order.id_pedido}`\n }\n }\n\n return (\n {product}
\n ))}\n\n
\n Edit order #{id}
\n\n \n
\n \n \n setForced(e.target.value)}\n value={forced}\n >\n \n \n Voluntary: The customer has requested a modification\n or an unpublished product, etc.\n \n \n Forced: It has been impossible to find any of the\n products requested by the customer, and the customer has\n accepted a change or reduced the order.\n \n \n \n
\n \n Is this a voluntary or forced product change?\n
\n\n {\n const change = e.target.value\n const prefix = change ? 'new_' : 'old_'\n setChangePrice(change)\n setOrder((o) => ({\n ...o,\n lines: o.lines.map((l) => ({\n ...l,\n base_imponible: l[`${prefix}price`],\n tipo_iva: l[`${prefix}taxes`],\n })),\n }))\n }}\n value={changePrice}\n >\n \n \n Keep original prices\n \n \n Update to current prices\n \n \n \n
\n\n \n Do you want to keep the prices at the time of the order,\n or do you want to update the prices?\n
\n\n
\n\n \n Add products by id out of catalogue (Boxes, Joker...)\n
\n\n {newID && (\n \n {originalOrder.lines[index]?.id_producto}\n
\n )}\n \n \n Save\n \n
\n \n )\n })()}\n \n )\n}\n\nfunction getPriceLine(line, oldLine = line) {\n const price = line.base_imponible\n const oldPrice = oldLine.base_imponible\n const oldPriceLine =\n (oldPrice + oldPrice * oldLine.tipo_iva) * oldLine.cantidad\n\n let offer = getOfferPrice(line.cantidad, line.option)\n\n if (offer) offer = offer + offer * line.tipo_iva\n\n const priceLine =\n line.base_imponible === line.new_price && offer\n ? offer\n : (price + price * line.tipo_iva) * line.cantidad\n\n return { oldPriceLine, priceLine, offer }\n}\n","import React, { useContext, useEffect, useState } from 'react'\nimport { ErpClientContext } from '../services/erp'\nimport { message, Button } from 'antd'\nimport { sleep } from '@guillotinaweb/react-gmi'\n\nexport default function CheckPaymentMultiOrder(props) {\n const erpService = useContext(ErpClientContext)\n const id_multifactura = props.id_multifactura\n const id_factura = props.id_factura\n const [statusPayment, setStatusPayment] = useState(false)\n\n async function confirmPayment(id, id_factura) {\n const res = await erpService.fetch('/orders/@confirm-payment-multiorder', {\n method: 'POST',\n body: JSON.stringify({\n id_multifactura: id,\n id_factura: id_factura,\n }),\n })\n\n if (res.status === 200) {\n message.success('Invoice collected!')\n await sleep(2000)\n window.location.reload(false)\n } else {\n message.error(res.error.message)\n }\n }\n\n useEffect(() => {\n ;(async () => {\n const res = await erpService.fetch('/orders/@check-payment-multiorder', {\n method: 'POST',\n body: JSON.stringify({\n id_factura: id_factura,\n }),\n })\n\n if (res.status === 200) {\n const response = await res.json()\n setStatusPayment(response)\n }\n })()\n })\n\n return (\n <>\n Confirm multiorder payment
\n {statusPayment && (\nInvoice already collected!
\n )}\nAre you sure you want to {verb} the selected orders?
\n {content}\n \n }\n onConfirm={onAction}\n okText={`Yes, ${verb}`}\n disabled={!selectedRows?.length}\n cancelText=\"No\"\n >\n {text}\n \n ),\n onSelect: () =>\n !selectedRows?.length &&\n message.error(`You must select which orders you want to ${verb}`),\n }\n }\n\n async function action({ promise, dataName, verb }) {\n try {\n const res = await promise\n const error = res.error?.message || res.data?.[dataName]?.errors\n if (error) return message.error(JSON.stringify(error))\n message.success(`Selected orders have been successfully ${verb}`)\n reset({ requestPolicy: 'network-only' })\n } catch (e) {\n message.error(e.message)\n }\n }\n\n async function onSetInvoiced() {\n if (!editable) {\n window.open(\n `/administracion/facturas/detalle_factura.html?id_factura=${invoice.id_factura}`,\n '_blank'\n )\n return\n }\n\n try {\n const res = await setInvoiced({ id })\n if (res.error) return message.error(res.error.message)\n if (res.data.invoice_multiorder_set_invoiced?.status === 'KO') {\n return message.error('The invoice could not be marked as invoiced')\n }\n message.success(`#${id} invoiced!`)\n setLocation('/orders/multi-order-invoice?refresh=1')\n } catch (e) {\n message.error(e.message)\n }\n }\n\n async function selectAddress(id_fac) {\n setSelecting(true)\n const res = await selectBillingAddress({ id, id_fac })\n if (res.error) return message.error(res.error.message)\n message.success('The selected billing address has been saved correctly')\n reset({ requestPolicy: 'network-only' })\n }\n\n useEffect(() => {\n if (!resInvoice.fetching) setSelecting(false)\n }, [resInvoice.fetching])\n\n return (\n \n {d.nombre &&
\n {d.nombre}
}\n {d.linea1 && {d.linea1}
}\n {d.linea2 && {d.linea2}
}\n {d.linea3 && {d.linea3}
}\n Orders
\n\n Enter the date:{' '}\n c && c < endOfYesterday()}\n onChange={(e) => {\n if (!e) return setHibernateDate(null)\n const date = toISOStringWithTimezone(\n startOfDay(e.toDate())\n )\n setHibernateDate(date)\n }}\n />\n
\n ),\n onAction: () => {\n if (!hibernateDate)\n return message.error('You must enter the hibernation date')\n action({\n promise: hibernate({\n date: new Date(hibernateDate),\n orderIds: selectedRows,\n }),\n dataName: 'batch_pedido_hibernate',\n verb: 'hibernated',\n })\n },\n }),\n getTableAction({\n verb: 'confirm',\n text: 'Confirm payment',\n onAction: () =>\n action({\n promise: confirmOrder({ orderIds: selectedRows }),\n dataName: 'batch_pedido_confirm_payment',\n verb: 'confirmed',\n }),\n }),\n getTableAction({\n verb: 'cancel',\n text: 'Cancel',\n onAction: () =>\n action({\n promise: cancelOrder({ orderIds: selectedRows }),\n dataName: 'batch_pedido_cancel',\n verb: 'canceled',\n }),\n }),\n getTableAction({\n verb: 'comment',\n text: 'Add comment',\n content: (\n \n \n \n General\n \n \n Preparation\n \n \n Delivery\n \n \n setComment(e.target.value)}\n placeholder=\"Write here the comment\"\n />\n
\n ),\n onAction: () =>\n action({\n promise: commentOrder({\n orderIds: selectedRows,\n type: observationType,\n comment,\n }),\n dataName: 'batch_pedido_addcomment',\n verb: 'commented',\n }),\n }),\n ],\n getCheckboxProps: (record) => ({\n disabled: !editable,\n name: record.name,\n }),\n }}\n dataSource={invoice.pedidos?.slice()?.reverse()}\n columns={[\n {\n title: 'Cod pedido',\n dataIndex: 'cod_pedido',\n key: 'cod_pedido',\n render: (v, r) => (\n Type of observation:
\n Comment:
\n {v.linea1}
\n {v.linea2}
\n {v.linea3}
\n \n ),\n },\n {\n title: 'Products',\n dataIndex: 'lines',\n key: 'lines',\n render: (v, r) =>\n v.map((line) => (\n \n {line.nombre} x{line.cantidad}\n
\n )),\n },\n {\n title: 'Status',\n dataIndex: 'id_estado_pd',\n key: 'id_estado_pd',\n },\n ]}\n rowKey={(record) => record.id_pedido}\n size=\"small\"\n />\n \n \n \n \n \n \n \n {(params) => \n \n \n \n {(params) => \n \n {(params) => \n \n
\n )\n}\n","import React from 'react'\nimport { Route, Switch } from 'wouter'\n\nimport { CreateProductContent } from './create-content'\n\nexport function ProductGroup() {\n return (\n \n \n \n \n \n
\n )\n}\n","import React, { useState } from 'react'\nimport { Loading } from '@guillotinaweb/react-gmi'\nimport { useMutation, useQuery } from 'urql'\nimport { Input, Form, Button, Alert, message, Switch } from 'antd'\n\nimport { ContentLayout, Error } from '../../common/content-layout'\nimport { UserSelector } from '../../components/user-selector'\n\nimport './styles.css'\n\nconst UserQuery = `\n query ($userId: Int) {\n user(id_usuario: $userId) {\n id\n email\n nombre\n idioma\n country\n observaciones\n subscription {\n unsubscribed\n }\n }\n }\n`\n\nconst UserMutation = `\n mutation ($input: inputUpdateUser) {\n user_update(input: $input) {\n status\n }\n }\n`\n\nexport function Users() {\n const countryWarn = 'Country length should be 2'\n const langWarn = 'Language length should be 2'\n const [loading, setLoading] = useState(false)\n const [, save] = useMutation(UserMutation)\n const [userId, setUserId] = useState()\n const [res] = useQuery({\n query: UserQuery,\n variables: { userId },\n pause: !userId,\n })\n\n const newsletter = !res.data?.user?.subscription?.unsubscribed\n\n return (\n \n
\n )}\n {res.fetching && \n
\n \n ) : null\n ) : null}\n {title}
\n\n
\n \n \n )\n}\n","import React from 'react'\nimport ImportInvoices from '../../components/import_invoices'\n\nexport default function ImportShippingInvoices() {\n const desplegableCompany = [\n {\n label: 'DHL UK Transporte',\n value: 'duk',\n },\n {\n label: 'DPD classic',\n value: 'dpc',\n },\n {\n label: 'Seur',\n value: 'seu',\n },\n {\n label: 'BRT',\n value: 'brt',\n },\n {\n label: 'UPS',\n value: 'eup',\n },\n {\n label: 'GLS Consolidado DE',\n value: 'glc',\n },\n {\n label: 'Fedex',\n value: 'fed',\n },\n {\n label: 'Fedex integrado',\n value: 'fd1',\n },\n {\n label: 'TNT Italia Integrado',\n value: 'tit',\n },\n ]\n const templateImport = 'shipping'\n\n const data = {\n companies: desplegableCompany,\n template: templateImport,\n labelTemplate: 'Select the shipping company',\n title: 'Import shipping invoices',\n }\n return (\n <>\n \n
\n {importInvoice ? (\n Import invoice Eurotax
\n\n \n \n {\n setState({\n ...state,\n invoiceNumber: e.target.value,\n })\n }}\n />\n \n
\n \n \n {\n setState({\n ...state,\n invoiceDate: `${\n date._d.getMonth() + 1\n }/${date._d.getFullYear()}`,\n })\n }}\n picker=\"month\"\n />\n
\n \n \n {state.amountCountries.map((countrie, index) => (\n {\n const updatedAmountCountries = [...state.amountCountries]\n updatedAmountCountries[index] = {\n [Object.keys(countrie)]: parseFloat(e.target.value),\n }\n setState({\n ...state,\n amountCountries: updatedAmountCountries,\n })\n }}\n rules={[{ required: true, message: 'Please enter an amount' }]}\n >\n
\n \n \n {\n setImportInvoice(true)\n }}\n >\n Import Invoice\n \n {facturaDesglosada ? (\n window.location.reload(false)}\n >\n Reset\n \n ) : null}\n \n
\n )}\n {importInvoice ? null : (\n \n {facturaDesglosada ? (\n
\n )}\n \n )\n}\n","import React, { useContext, useEffect, useState } from 'react'\nimport { ErpClientContext } from '../../services/erp'\nimport { Form, Table, Input, Button, Space, DatePicker, message } from 'antd'\nimport { sleep } from '@guillotinaweb/react-gmi'\n\nfunction formatCurrency(value) {\n return Intl.NumberFormat('es-ES', {\n style: 'currency',\n currency: 'EUR',\n }).format(value)\n}\n\nconst initial = {\n monthlyCost: 0,\n date: '',\n}\n\nexport default function ImportCostWarehouse() {\n const erpService = useContext(ErpClientContext)\n const [columnsTable, setColumnsTable] = useState(null)\n const [data, setData] = useState(null)\n const [state, setState] = useState(initial)\n const [stateImportCost, setStateImportCost] = useState(false)\n const [loading, setLoading] = useState(false)\n const [dataCostes, setDataCostes] = useState(null)\n\n useEffect(() => {\n init()\n }, [])\n async function init() {\n const res = await erpService.getImportedInvoiceWarehouseCost()\n\n const columnsAlignRight = [\n 'coste_botella',\n 'coste_total',\n 'coste_total_calculado',\n ]\n console.log(res)\n if (res.status_code === 200 && res.data[0]) {\n setDataCostes(res.data)\n setColumnsTable(\n Object.keys(res.data[0]).map((column) => ({\n title: column.replace(/_/g, ' ').toUpperCase(),\n dataIndex: column,\n columnKey: column,\n sorter:\n column === 'fecha_factura'\n ? (a, b) => new Date(a.fecha_factura) - new Date(b.fecha_factura)\n : column === 'fecha_registro'\n ? (a, b) =>\n new Date(a.fecha_registro) - new Date(b.fecha_registro)\n : null,\n // filters: column,\n onFilter: column,\n filterSearch: true,\n align: columnsAlignRight.includes(column) ? 'right' : null,\n }))\n )\n\n const dataColumnsImportedInvoices = res.data.map((dataRes) => {\n return {\n id_coste: dataRes.id_coste,\n fecha_factura: dataRes.fecha_factura,\n fecha_registro: dataRes.fecha_registro,\n numero_botellas: dataRes.numero_botellas,\n numero_pedidos: dataRes.numero_pedidos,\n coste_botella: formatCurrency(dataRes.coste_botella),\n coste_total: formatCurrency(dataRes.coste_total),\n coste_total_calculado: formatCurrency(dataRes.coste_total_calculado),\n }\n })\n\n setData(dataColumnsImportedInvoices)\n }\n }\n\n async function getDataCostWarehouse() {\n if (state.monthlyCost === 0 || state.invoiceDate === '') {\n message.error('Invoice cost and date are required.')\n return\n }\n\n setLoading(true)\n\n console.log(state)\n\n const res = await erpService.fetch('/orders/@import-worker-cost-order', {\n method: 'POST',\n body: JSON.stringify({\n date: state.date,\n cost: state.monthlyCost,\n }),\n })\n\n const response = await res.json()\n\n if (res.status === 200) {\n message.success('Import order preparation cost correct!')\n await sleep(2000)\n window.location.reload(false)\n } else {\n message.error(response)\n }\n\n setLoading(false)\n }\n\n async function recalculateCostsPrepOrders() {\n if (!dataCostes) {\n message.error('No data to recalculate')\n return\n }\n\n setLoading(true)\n\n const res = await erpService.fetch(\n '/orders/@recalculate-order-preparation-costs',\n {\n method: 'POST',\n body: JSON.stringify(dataCostes),\n }\n )\n\n const response = await res.json()\n\n if (res.status === 200) {\n message.success(\n 'Recalculated costs for orders in preparations successfully!'\n )\n await sleep(2000)\n window.location.reload(false)\n } else {\n message.error(`Error ${res.status}: ${response}`)\n }\n\n setLoading(false)\n }\n return (\n \n \n
\n ) : null}\n \n
\n \n
\n \n
\n\n {stateImportCost ? (\n \n Import order picking costs warehouse\n
\n\n \n \n \n \n window.location.reload(false)}\n >\n Reset\n \n \n \n \n
\n \n ) : (\n \n \n \n {\n setState({\n ...state,\n monthlyCost: e.target.value,\n })\n }}\n rules={[\n { required: true, message: 'Please input invoice number!' },\n ]}\n defaultValue={state.monthlyCost}\n >\n \n
\n \n \n {\n setState({\n ...state,\n date: `${date._d.getMonth() + 1}/${date._d.getFullYear()}`,\n })\n }}\n picker=\"month\"\n />\n
\n \n \n {\n setStateImportCost(true)\n }}\n >\n Import cost\n \n \n \n
\n )}\n \n )\n}\n","import React, { useEffect, useContext, useState } from 'react'\nimport { ErpClientContext } from '../../services/erp'\nimport {\n Form,\n Select,\n Input,\n message,\n DatePicker,\n Space,\n Button,\n Table,\n} from 'antd'\nimport { sleep } from '@guillotinaweb/react-gmi'\n\nconst initial = {\n company: '',\n comision_fija: 0,\n codigo_factura: '',\n fecha_factura: '',\n}\n\nfunction formatCurrency(value) {\n return Intl.NumberFormat('es-ES', {\n style: 'currency',\n currency: 'EUR',\n }).format(value)\n}\n\nexport default function ImportCommissionsCollectionsV2() {\n const erpService = useContext(ErpClientContext)\n const [companies, setCompanies] = useState([])\n const [companieSelected, setCompanieSelected] = useState(null)\n const [state, setState] = useState(initial)\n const [inputFile, setInputFile] = useState(null)\n const [loading, setLoading] = useState(false)\n const [columnsTable, setColumnsTable] = useState(null)\n const [optionsColumns, setOptionsColumns] = useState([])\n const [dataTable, setDataTable] = useState([])\n const [lecturaFichero, setLecturaFichero] = useState(false)\n const [comisionPedido, setComisionPedido] = useState(null)\n const [comisionExtra, setComisionExtra] = useState(null)\n const [data, setData] = useState(null)\n\n const { Option } = Select\n\n useEffect(() => {\n init()\n }, [])\n async function init() {\n const resCompanies = await erpService.getAllPaymentCommissionCompanies()\n setCompanies(resCompanies)\n\n const res = await erpService.getImportedInvoiceV2('commissions')\n\n const filterColumn = () =>\n companies.map((val) => ({\n text: val.label,\n value: val.label,\n }))\n\n const columnsAlignRight = [\n 'total_value_of_matched_costs',\n 'total_value_of_not_matched_costs',\n ]\n\n setColumnsTable(\n Object.keys(res[0]).map((column) => ({\n title: column.replace(/_/g, ' ').toUpperCase(),\n dataIndex: column,\n columnKey: column,\n sorter:\n column === 'invoice_date'\n ? (a, b) => new Date(a.invoice_date) - new Date(b.invoice_date)\n : null,\n filters: column === 'id_company' ? filterColumn() : null,\n onFilter: (value, record) =>\n record.id_pasarela_company.startsWith(value),\n filterSearch: true,\n align: columnsAlignRight.includes(column) ? 'right' : null,\n }))\n )\n const dataColumnsImportedInvoices = res.map((dataRes) => {\n return {\n invoice_date: dataRes.invoice_date,\n invoice_number: dataRes.invoice_number,\n name_company: dataRes.name_company,\n total_value_of_matched_costs: formatCurrency(\n dataRes.total_value_of_matched_costs\n ),\n total_value_of_not_matched_costs: formatCurrency(\n dataRes.total_value_of_not_matched_costs\n ),\n }\n })\n setDataTable(dataColumnsImportedInvoices)\n }\n\n function handleFileChange(e) {\n if (e.target.files.length) {\n setInputFile(e.target.files[0])\n }\n }\n\n async function uploadFile() {\n setLoading(true)\n if (\n state.company === '' ||\n state.codigo_factura === '' ||\n state.fecha_factura === '' ||\n !inputFile\n ) {\n message.error('Revisa los campos!')\n await sleep(2000)\n window.location.reload(false)\n }\n const formData = new FormData()\n formData.append('file', inputFile)\n\n const queryString = new URLSearchParams({\n company: state.company,\n }).toString()\n const url = `/orders/@upload_invoice_v2?${queryString}`\n\n const res = await erpService.fetch(url, {\n method: 'POST',\n body: formData,\n params: JSON.stringify({\n company: state.company,\n }),\n })\n\n console.log(res)\n\n const response = await res.json()\n if (res.status === 200) {\n setColumnsTable(\n Object.keys(response['data'][0]).map((column) => ({\n title: column,\n dataIndex: column,\n key: column,\n width: '120px',\n }))\n )\n\n // setOptionsColumns(\n // Object.keys(response['data'][0]).map((column) => ({\n // value: column,\n // label: column,\n // }))\n // )\n\n const resData = response.data.map((responseValue) => ({\n line: responseValue.line,\n pedido: responseValue.pedido,\n comision: formatCurrency(responseValue.comision),\n descripcion: responseValue.descripcion,\n }))\n\n setData(response.data)\n setDataTable(resData)\n setLecturaFichero(true)\n setLoading(false)\n setComisionPedido(response.comision_pedido)\n setComisionExtra(response.comision_extra)\n } else {\n setLoading(false)\n message.error(`Ops algo salio mal: ${response}`)\n }\n\n // const response = await res.json()\n\n // setColumnsTable(\n // Object.keys(response['data'][0]).map((column) => ({\n // title: column,\n // dataIndex: column,\n // key: column,\n // width: '120px',\n // }))\n // )\n\n // // setOptionsColumns(\n // // Object.keys(response['data'][0]).map((column) => ({\n // // value: column,\n // // label: column,\n // // }))\n // // )\n\n // const resData = response.data.map((responseValue) => ({\n // line: responseValue.line,\n // pedido: responseValue.pedido,\n // comision: formatCurrency(responseValue.comision),\n // descripcion: responseValue.descripcion\n // }))\n\n // setData(response.data)\n // setDataTable(resData)\n // setLecturaFichero(true)\n // setLoading(false)\n // setComisionPedido(response.comision_pedido)\n // setComisionExtra(response.comision_extra)\n }\n\n async function confirmData() {\n setLoading(true)\n\n const res = await erpService.fetch(\n '/orders/@confirm_commissions_collections',\n {\n method: 'POST',\n body: JSON.stringify({\n company: state.company,\n data: data,\n fecha_factura: state.fecha_factura,\n codigo_factura: state.codigo_factura,\n comision_fija: state.comision_fija,\n }),\n }\n )\n\n if (res.status === 200) {\n message.success('Datos registrados correctamente!')\n await sleep(2000)\n window.location.reload(false)\n } else {\n const messageError = await res.json()\n message.error(`Oops! ${JSON.stringify(messageError)}`)\n }\n\n setLoading(false)\n }\n\n return (\n \n
\n \n
\n \n )\n}\n","import React from 'react'\nimport { Route, Switch } from 'wouter'\n\nimport ImportShippingInvoices from './import_shipping_invoices'\nimport ImportCommissionsCollectionsInvoices from './import_commissions_collections_invoices'\nimport ImportInvoiceEurotax from './import_invoice_eurotax'\nimport ImportCostWarehouse from './import_cost_warehouse'\nimport ImportCommissionsCollectionsV2 from './import_commissions_collections_v2'\n\nexport function InvoicesGroup() {\n return (\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n )\n}\n","import React, { useEffect, useState } from 'react'\nimport { Table, Checkbox, Button, message, Radio } from 'antd'\nimport { useLocation } from 'wouter'\n\nexport default function ContentGenerated() {\n const [data, setData] = useState([])\n const [columnsTable, setColumnsTable] = useState([])\n const [checkedList, setCheckedList] = useState(null)\n const [options, setOptions] = useState([])\n const [loading, setLoading] = useState(false)\n const [newCampaign, setNewCampaign] = useState(false)\n const [location, setLocation] = useLocation()\n const [contentData, setContentData] = useState({})\n const [forceImport, setForceImport] = useState(false)\n\n useEffect(() => {\n init()\n }, [])\n async function init() {\n const res = await fetch(\n `/db/guillotina/@get-content-generated`\n ).then((res) => res.json())\n\n const columns = Object.keys(res[0])\n const reorderedColumns = [\n 'feed_generated',\n ...columns.filter((col) => col !== 'feed_generated'),\n ]\n\n setColumnsTable([\n ...reorderedColumns.map((column) => ({\n title: column.replace(/_/g, ' ').toUpperCase(),\n dataIndex: column,\n columnKey: column,\n width: 100,\n render:\n column === 'promoted_products'\n ? (text) => text.join(' ')\n : column === 'feed_generated'\n ? (value, record) => (\n \n
\n \n \n
\n \n \n
\n \n \n
\n \n
\n \n \n
\n \n Forzar importación:\n setForceImport(e.target.value)}\n >\n No \n Sí \n \n
\n \n
\n \n )\n}\n","import React, { useState, useEffect } from 'react'\nimport {\n Form,\n Input,\n Select,\n Button,\n DatePicker,\n Checkbox,\n InputNumber,\n message,\n} from 'antd'\nimport moment from 'moment'\nimport { ProductSelector } from '../../components/product-selector'\nimport { sleep } from '@guillotinaweb/react-gmi'\nimport { useLocation, useRoute } from 'wouter'\nimport startOfToday from 'date-fns/startOfToday'\n\nconst { TextArea } = Input\n\n// Función auxiliar para formatear el campaign_name\nfunction formatCampaignName(name) {\n return name.trim().replace(/\\s+/g, '_')\n}\n\n// Función para extraer el nombre de la campaña sin la fecha\nfunction extractCampaignName(fullName) {\n // Busca el patrón de fecha DD_MM_YY_ al inicio del nombre\n const datePattern = /^\\d{2}_\\d{2}_\\d{2}_/\n return fullName.replace(datePattern, '')\n}\n\nexport default function AddNewContent() {\n const [showFeatureOptions, setShowFeatureOptions] = useState(false)\n const handleFeatureBadgeChange = (e) => {\n setShowFeatureOptions(e.target.checked)\n }\n const [showSelectProduct, setSelectProducts] = useState(true)\n const handleCampanaSinProductos = (e) => {\n if (e.target.checked === true) {\n setSelectProducts(false)\n } else {\n setSelectProducts(true)\n }\n }\n const [idsProducts, setIdsProducts] = useState([])\n const [loading, setLoading] = useState(false)\n const [location, setLocation] = useLocation()\n const [, params] = useRoute('/content_ai/edit_content/:id')\n const id = params?.id\n const isEditMode = !!id\n const [form] = Form.useForm()\n const [campaignType, setCampaignType] = useState('')\n useEffect(() => {\n if (isEditMode) {\n loadContentData()\n }\n }, [id])\n\n async function loadContentData() {\n try {\n setLoading(true)\n const contentData = JSON.parse(sessionStorage.getItem('editContent'))\n\n if (!contentData) {\n throw new Error('No se encontraron los datos de la campaña')\n }\n\n // Extraer el nombre de la campaña sin la fecha\n const cleanCampaignName = extractCampaignName(contentData.campaign_name)\n\n const dates = [\n moment(contentData.start_date),\n moment(contentData.end_date),\n ]\n\n if (contentData.promoted_products) {\n let products = contentData.promoted_products\n if (typeof products === 'string') {\n products = products.split(' ').filter((p) => p !== '')\n }\n setIdsProducts([...products, ''])\n }\n\n setCampaignType(contentData.type)\n\n setShowFeatureOptions(contentData.feature_badge)\n\n const hasSinProductos =\n !contentData.promoted_products ||\n contentData.promoted_products.length === 0 ||\n contentData.promoted_products[0] === ''\n setSelectProducts(!hasSinProductos)\n\n form.setFieldsValue({\n campaign_name: cleanCampaignName.replace(/_/g, ' '),\n title: contentData.title,\n type: contentData.type,\n description: contentData.description,\n topic: contentData.topic,\n date: dates,\n promotion_topic: contentData.promotion_topic,\n marketing_text: contentData.marketing_text,\n feature_badge: contentData.feature_badge,\n feature_value: contentData.feature_value,\n feature_text: contentData.feature_text,\n landing_page_url: contentData.landing_page_url,\n sin_productos: hasSinProductos,\n oferta_producto: contentData.oferta_producto,\n })\n } catch (error) {\n message.error('Error al cargar los datos de la campaña: ' + error.message)\n setLocation('/content_ai/content_generated')\n } finally {\n setLoading(false)\n }\n }\n\n function addNewProduct(productKey, index) {\n setIdsProducts((prevIdsProducts) => {\n const newIdsProducts = [...prevIdsProducts]\n if (productKey && productKey[0]) {\n newIdsProducts[index] = productKey[0]\n } else {\n newIdsProducts.splice(index, 1)\n }\n if (\n newIdsProducts.length === 0 ||\n newIdsProducts[newIdsProducts.length - 1] !== ''\n ) {\n newIdsProducts.push('')\n }\n console.log('Updated products:', newIdsProducts)\n return newIdsProducts\n })\n }\n\n async function onFinish(values) {\n setLoading(true)\n try {\n // Formateamos el campaign_name (solo espacios a guiones bajos)\n values.campaign_name = formatCampaignName(values.campaign_name)\n\n if (\n !values.sin_productos &&\n (!idsProducts ||\n idsProducts.length === 0 ||\n (idsProducts.length === 1 && idsProducts[0] === ''))\n ) {\n throw new Error('No hay productos seleccionados')\n }\n\n if (values.date && values.date.length === 2) {\n values.date = [\n moment(values.date[0]).format('YYYY-MM-DDTHH:mm:ss'),\n moment(values.date[1]).format('YYYY-MM-DDTHH:mm:ss'),\n ]\n }\n\n if (values.sin_productos) {\n values['promoted_products'] = ['']\n } else {\n values['promoted_products'] = idsProducts.filter((id) => id !== '')\n }\n\n console.log('Valores a enviar:', values)\n console.log('Products:', values.promoted_products)\n\n const endpoint = isEditMode\n ? `/db/guillotina/@update-content/${id}`\n : `/db/guillotina/@new-content`\n\n const res = await fetch(endpoint, {\n method: isEditMode ? 'PATCH' : 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(values),\n })\n\n if (res.status === 200) {\n message.success(\n isEditMode ? 'Contenido actualizado' : 'Contenido creado'\n )\n if (isEditMode) {\n sessionStorage.removeItem('editContent')\n }\n await sleep(2000)\n setLocation('/content_ai/content_generated')\n } else {\n const response = await res.json()\n throw new Error(response)\n }\n } catch (error) {\n message.error(`Hubo un error: ${error.message}`)\n } finally {\n setLoading(false)\n }\n }\n\n return (\n \n \n
\n \n {checkedList ? (\n {\n columnsHidden(value)\n }}\n />\n ) : null}\n
\n \n \n \n {\n const invalidChars = e.target.value.match(/[^a-zA-Z0-9\\s]/g)\n if (invalidChars) {\n message.warning(\n `Caracter no permitido: \"${invalidChars.join(\n ', '\n )}\" - Solo se permiten letras (sin ñ), números y espacios`\n )\n }\n const value = e.target.value.replace(/[^a-zA-Z0-9\\s]/g, '')\n form.setFieldsValue({ campaign_name: value })\n }}\n />\n \n \n \n \n \n setCampaignType(value)}\n />\n \n {campaignType === 'product' ? (\n \n \n \n \n \n \n \n ({\n validator(rule, value) {\n if (\n !value ||\n new Date(value[0].toISOString()).getTime() >=\n startOfToday().getTime()\n ) {\n return Promise.resolve()\n }\n return Promise.reject(`The offer shouldn't be expired`)\n },\n }),\n ]}\n >\n \n \n \n \n \n {idsProducts.map((productKey, index) => (\n addNewProduct(product, index)}\n />\n ))}\n {idsProducts.length === 0 ||\n idsProducts[idsProducts.length - 1] !== '' ? (\n \n addNewProduct(product, idsProducts.length)\n }\n />\n ) : null}\n \n ) : null}\n \n \n \n \n \n \n \n \n \n \n )}\n \n \n \n \n \n setLocation('/content_ai/content_generated')}\n >\n Cancelar\n \n \n \n
\n \n )\n}\n","import React from 'react'\nimport { Route, Switch } from 'wouter'\n\nimport ContentGenerated from './content_ai'\nimport AddNewContent from './add_content'\n\nexport function ContentAiGroup() {\n return (\n \n \n
\n \n \n \n
\n )\n}\n","import React, { useEffect, useContext, useState } from 'react'\nimport { ErpClientContext } from '../../services/erp'\nimport { Select, message, Input, Form, Button, Pagination } from 'antd'\nimport { CloseOutlined } from '@ant-design/icons'\nimport './index.css'\nimport { sleep } from '@guillotinaweb/react-gmi'\n\nconst { Option } = Select\n\nfunction orderListByKey(data, key, order) {\n const compareValues = (key, order = 'asc') => (elemA, elemB) => {\n if (!elemA.hasOwnProperty(key) || !elemB.hasOwnProperty(key)) return 0\n const comparison = elemA[key].localeCompare(elemB[key])\n return order === 'desc' ? comparison * -1 : comparison\n }\n return data.sort(compareValues(key, order))\n}\n\nexport default function MatchProducts() {\n const erpService = useContext(ErpClientContext)\n const [proveedores, setProveedores] = useState([])\n const [columnsTable, setColumnsTable] = useState([])\n const [totalProductos, setTotalProductos] = useState(0)\n const [loading, setLoading] = useState(false)\n const [proveedorSelected, setPorveedorSelected] = useState()\n const [botellas, setBotellas] = useState([])\n const [opcionBotella, setOpcionBotella] = useState({})\n const [form] = Form.useForm()\n\n // Estado para la paginación\n const [currentPage, setCurrentPage] = useState(1)\n const [productsPerPage, setProductsPerPage] = useState(10)\n\n // Estado para los valores del formulario\n const [formValues, setFormValues] = useState({})\n\n // Estado para la búsqueda\n const [searchTerm, setSearchTerm] = useState('')\n const [filteredProducts, setFilteredProducts] = useState([])\n\n useEffect(() => {\n init()\n }, [])\n\n useEffect(() => {\n if (columnsTable) {\n const filtered = columnsTable.filter((product) =>\n product.nombre.toLowerCase().includes(searchTerm.toLowerCase())\n )\n setFilteredProducts(filtered)\n }\n }, [searchTerm, columnsTable])\n\n async function init() {\n const res = await erpService.getProvidersMarketplace()\n setProveedores(res)\n }\n\n async function getProductsProviderMarketplace(value) {\n if (value) {\n const res = await erpService.fetch('/@products-proveedores-marketplace', {\n method: 'POST',\n body: JSON.stringify({ id_proveedor: value }),\n })\n\n const response = await res.json()\n\n if (res.status >= 300) {\n message.error(\n `Failure to obtain products from supplier: ${JSON.stringify(\n response\n )}`\n )\n } else {\n console.log(response)\n setTotalProductos(response.total_productos)\n setColumnsTable(response.productos)\n setFilteredProducts(response.productos) // Inicializar productos filtrados\n setBotellas(response.botellas)\n setPorveedorSelected(value)\n setCurrentPage(1) // Resetear la página actual al obtener nuevos productos\n setFormValues({}) // Resetear los valores del formulario\n }\n }\n }\n\n async function onFinish(values) {\n if (values) {\n const allValues = { ...formValues, ...values }\n console.log(allValues)\n setLoading(true)\n const res = await erpService.fetch('/@match-products-marketplace', {\n method: 'POST',\n body: JSON.stringify({\n id_proveedor: proveedorSelected,\n productos: allValues,\n botellas: opcionBotella,\n }),\n })\n\n if (res.status >= 300) {\n const messageError = await res.json()\n message.error(`Matching error: ${JSON.stringify(messageError.message)}`)\n } else {\n message.success('Successfully completed match!')\n await sleep(500)\n setOpcionBotella({})\n await getProductsProviderMarketplace(proveedorSelected)\n form.resetFields()\n setFormValues({})\n }\n\n setLoading(false)\n }\n }\n\n function setBottleProduct(value, product) {\n setOpcionBotella({ ...opcionBotella, [product]: value[0] })\n }\n\n // Guardar los valores del formulario al cambiar de página\n const handleValuesChange = (changedValues, allValues) => {\n setFormValues({ ...formValues, ...allValues })\n }\n\n // Calcular los productos para la página actual\n const indexOfLastProduct = currentPage * productsPerPage\n const indexOfFirstProduct = indexOfLastProduct - productsPerPage\n const currentProducts = filteredProducts.slice(\n indexOfFirstProduct,\n indexOfLastProduct\n )\n\n // Cambiar de página\n const handleChangePage = (page) => {\n setCurrentPage(page)\n form.setFieldsValue(formValues)\n }\n\n // Cambiar cantidad de productos por página\n const handleChangeProductsPerPage = (value) => {\n setProductsPerPage(value)\n setCurrentPage(1) // Resetear a la primera página cuando se cambia la cantidad por página\n }\n\n // Limpiar búsqueda\n const clearSearch = () => {\n setSearchTerm('')\n setFilteredProducts(columnsTable)\n }\n\n return (\n \n
\n Check marketplace products
\n\n {columnsTable.length > 0 ? (\n
\n \n \n setSearchTerm(e.target.value)}\n style={{ width: '100%' }}\n />\n {searchTerm && (\n \n (e.currentTarget.style.backgroundColor = '#bdbdbd')\n }\n onMouseLeave={(e) =>\n (e.currentTarget.style.backgroundColor = '#e0e0e0')\n }\n >\n
\n )}\n \n \n
\n \n ) : null}\n \n \n )\n}\n","import React, { useEffect, useContext, useState } from 'react'\nimport { ErpClientContext } from '../../services/erp'\nimport { message } from 'antd'\nimport './index.css'\n\nexport default function EditMatchs() {\n const erpService = useContext(ErpClientContext)\n const [products, setProducts] = useState([])\n const [loading, setLoading] = useState({})\n const [currentPage, setCurrentPage] = useState(1)\n const [searchTerm, setSearchTerm] = useState('')\n const [filteredProducts, setFilteredProducts] = useState([])\n const [itemsPerPage, setItemsPerPage] = useState(10)\n const pageSizeOptions = [10, 20, 30, 40, 50]\n const [selectedProvider, setSelectedProvider] = useState('all')\n const [providers, setProviders] = useState([])\n const [isModalOpen, setIsModalOpen] = useState(false)\n const [editingProduct, setEditingProduct] = useState(null)\n const [editForm, setEditForm] = useState({\n id_producto: '',\n excluir_venta: false,\n })\n\n useEffect(() => {\n init()\n }, [])\n\n useEffect(() => {\n // Extraer proveedores únicos de los productos\n if (products.length > 0) {\n const uniqueProviders = [...new Set(products.map((p) => p.id_proveedor))]\n setProviders(uniqueProviders)\n }\n }, [products])\n\n useEffect(() => {\n const filtered = products.filter((product) => {\n const matchesSearch = Object.values(product).some((value) =>\n String(value).toLowerCase().includes(searchTerm.toLowerCase())\n )\n const matchesProvider =\n selectedProvider === 'all' || product.id_proveedor === selectedProvider\n return matchesSearch && matchesProvider\n })\n setFilteredProducts(filtered)\n setCurrentPage(1)\n }, [searchTerm, selectedProvider, products])\n\n async function init() {\n const res = await erpService.getProductsWithMatch()\n console.log(res)\n setProducts(res)\n setFilteredProducts(res)\n }\n\n async function handleDeleteMatch(product) {\n setLoading({ ...loading, [`delete-${product.id_producto}`]: true })\n try {\n await erpService.deleteMatch({\n id_proveedor: product.id_proveedor,\n id_producto_proveedor: product.id_producto_proveedor,\n id_producto: product.id_producto,\n })\n\n message.success('Match eliminado correctamente')\n await init() // Recargar datos\n } catch (error) {\n message.error(`Error al eliminar match: ${error.message}`)\n console.error('Error al eliminar match:', error)\n }\n setLoading({ ...loading, [`delete-${product.id_producto}`]: false })\n }\n\n const handleEditClick = (product) => {\n setEditingProduct(product)\n setEditForm({\n id_producto: product.id_producto,\n excluir_venta: Boolean(product.excluir_venta),\n })\n setIsModalOpen(true)\n }\n\n const handleModalClose = () => {\n setIsModalOpen(false)\n setEditingProduct(null)\n setEditForm({ id_producto: '', excluir_venta: false })\n }\n\n async function handleEditSubmit(e) {\n e.preventDefault()\n if (!editingProduct) return\n\n setLoading({ ...loading, [`edit-${editingProduct.id_producto}`]: true })\n try {\n await erpService.editMatchs({\n id_proveedor: editingProduct.id_proveedor,\n id_producto_proveedor: editingProduct.id_producto_proveedor,\n id_producto_old: editingProduct.id_producto,\n id_producto_new: editForm.id_producto,\n excluir_venta: editForm.excluir_venta,\n })\n\n message.success('Match actualizado correctamente')\n await init() // Recargar datos\n handleModalClose()\n } catch (error) {\n message.error(`Error al editar match: ${error.message}`)\n console.error('Error al editar match:', error)\n }\n setLoading({ ...loading, [`edit-${editingProduct.id_producto}`]: false })\n }\n\n const indexOfLastItem = currentPage * itemsPerPage\n const indexOfFirstItem = indexOfLastItem - itemsPerPage\n const currentItems = filteredProducts.slice(indexOfFirstItem, indexOfLastItem)\n const totalPages = Math.ceil(filteredProducts.length / itemsPerPage)\n\n const handlePageSizeChange = (event) => {\n const newSize = parseInt(event.target.value)\n setItemsPerPage(newSize)\n setCurrentPage(1)\n }\n\n const renderPageNumbers = () => {\n const pageNumbers = []\n const maxVisiblePages = 5\n let startPage = Math.max(1, currentPage - 2)\n let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1)\n\n if (endPage - startPage < maxVisiblePages - 1) {\n startPage = Math.max(1, endPage - maxVisiblePages + 1)\n }\n\n for (let i = startPage; i <= endPage; i++) {\n pageNumbers.push(\n \n
\n \n {proveedorSelected === 'vnl' ? (\n \n \n Match\n \n window.location.reload(false)}\n style={{\n marginLeft: 2,\n }}\n >\n Reset\n \n \n
\n {currentProducts.map((val, index) => (\n Familia producto
\n ) : null}\n Nombre producto
\n {proveedorSelected === 'vnl' ? (\n Añada producto
\n ) : null}\n {proveedorSelected === 'cab' ? (\n GRUPO producto Vinissimus
\n ) : (\n Id producto Vinissimus
\n )}\n \n {proveedorSelected === 'vnl' ? (\n
\n ))}\n {val.familia_producto}
\n ) : null}\n {val.nombre}
\n {proveedorSelected === 'vnl' ? (\n {val.anyada}
\n ) : null}\n \n \n \n
\n {botellas ? (\n \n \n {\n setBottleProduct(value, Object.keys(val))\n }}\n >\n {botellas.map((optionCol, index) => (\n \n {Object.keys(optionCol)}\n \n ))}\n \n \n
\n ) : null}\n \n \n \n \n \n \n \n
\n \n \n
\n\n Productos con Match
\n\n \n \n handleEditClick(product)}\n disabled={loading[`edit-${product.id_producto}`]}\n style={{\n ...buttonStyle,\n backgroundColor: '#1890ff',\n color: 'white',\n }}\n >\n {loading[`edit-${product.id_producto}`]\n ? 'Editando...'\n : 'Editar'}\n \n handleDeleteMatch(product)}\n disabled={loading[`delete-${product.id_producto}`]}\n style={{\n ...buttonStyle,\n backgroundColor: '#ff4d4f',\n color: 'white',\n }}\n >\n {loading[`delete-${product.id_producto}`]\n ? 'Eliminando...'\n : 'Eliminar'}\n \n
\n \n ))}\n \n\n \n
\n\n {currentItems.map((product) => (\n ID Proveedor
\n ID Producto
\n ID Producto Proveedor
\n Nombre
\n Añada
\n Capacidad
\n Familia Producto
\n Fecha Registro
\n Graduación
\n PVP Proveedor
\n Stock
\n Surtido
\n Excluir Venta
\n Acciones
\n {product.id_proveedor}
\n {product.id_producto}
\n {product.id_producto_proveedor}
\n {product.name}
\n {product.anyada || '-'}
\n {product.capacidad || '-'}
\n {product.familia_producto || '-'}
\n \n {new Date(product.fecha_registro).toLocaleString('es-ES', {\n year: 'numeric',\n month: '2-digit',\n day: '2-digit',\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n })}\n
\n {product.graduacion || '-'}
\n {product.pvp_proveedor || '-'}
\n {product.stock}
\n {product.surtido || '-'}
\n \n {product.excluir_venta ? 'SI' : 'NO'}\n
\n \n \n {pageSizeOptions.map((size) => (\n \n ))}\n \n
\n\n \n Mostrando {indexOfFirstItem + 1} -{' '}\n {Math.min(indexOfLastItem, filteredProducts.length)} de{' '}\n {filteredProducts.length} resultados\n
\n\n {/* Modal */}\n {isModalOpen && (\n Editar Producto
\n \n \n \n )}\n \n )\n}\n","import React from 'react'\nimport { Route, Switch } from 'wouter'\n\nimport MatchProducts from './match_products'\nimport EditMatchs from './edit_matchs'\n\nexport function MarketPlaceGroup() {\n return (\n\n \n \n \n \n \n \n
\n )\n}\n","import React from 'react'\nimport { Layout } from './common/layout'\nimport { Login } from './components/login'\nimport { AuthToken } from './services/auth'\nimport { Loading } from '@guillotinaweb/react-gmi'\nimport { Guillo } from './guillotina/guillotina'\nimport GuilloCfg from './guillotina/config'\n\nimport { AnalyticsPage } from './pages/analytics'\nimport { Customers } from './pages/customers'\nimport { ErpClientContext, ErpClient } from './services/erp'\nimport { Offers } from './pages/offers'\nimport { FreeShippingRatesPage } from './pages/free-shipping-rates'\nimport { OpinionsGroup } from './pages/opinions'\nimport { OrdersGroup } from './pages/orders'\nimport { ProductGroup } from './pages/product'\nimport { Router, Route, Switch } from 'wouter'\nimport { Users } from './pages/users'\nimport { InvoicesGroup } from './pages/invoices'\nimport { ContentAiGroup } from './pages/content_ai'\nimport { MarketPlaceGroup } from './pages/market_place'\n\nimport '@guillotinaweb/react-gmi/dist/css/style.css'\nimport './scss/styles.sass'\n\nfunction App() {\n const auth = new AuthToken(GuilloCfg.url)\n const erpClient = new ErpClient(null, auth)\n const isLogged = auth.isLogged\n\n React.useEffect(() => {\n ;(async () => {\n await auth.ensureLogin()\n })()\n }, [isLogged])\n\n return (\n \n
\n )}\n {isLogged === undefined && \n
\n