[release] Karrio 2024.2

apps/api/karrio/server/VERSION

@@ -1 +1 @@
-2024.2.rc5
+2024.2.rc7

apps/dashboard/src/modules/Orders/create_label.tsx

@@ -27,6 +27,7 @@ import { useLabelDataMutation } from '@karrio/hooks/label-data';
 import { InputField } from '@karrio/ui/components/input-field';
 import { useNotifier } from '@karrio/ui/components/notifier';
 import { DashboardLayout } from '@/layouts/dashboard-layout';
+import { useAPIMetadata } from '@karrio/hooks/api-metadata';
 import { useLoader } from '@karrio/ui/components/loader';
 import { ModalProvider } from '@karrio/ui/modals/modal';
 import { Spinner } from '@karrio/ui/components/spinner';
@@ -52,6 +53,7 @@ export default function CreateShipmentPage(pageProps: any) {
     const loader = useLoader();
     const notifier = useNotifier();
     const { basePath } = useAppMode();
+    const { references } = useAPIMetadata();
     const { carrierOptions } = useConnections();
     const { addUrlParam, ...router } = useLocation();
     const { query: templates } = useDefaultTemplates();
@@ -545,8 +547,9 @@ export default function CreateShipmentPage(pageProps: any) {
 
               </div>
 
+
               {/* CARRIER OPTIONS SECTION */}
-              {carrierOptions.length > 0 && <div className='mb-4 px-3'>
+              {Object.keys(carrierOptions).length > 0 && <div className='card mb-4 px-3 mx-2'>
 
                 <Disclosure>
                   {({ open }) => (
@@ -558,32 +561,45 @@ export default function CreateShipmentPage(pageProps: any) {
                           {open ? <i className="fas fa-chevron-up"></i> : <i className="fas fa-chevron-down"></i>}
                         </span>
                       </Disclosure.Button>
-                      <Disclosure.Panel className="card is-flat columns is-multiline m-0 px-2">
-
-                        {(carrierOptions.includes("dpdhl_packstation")) && <>
-                          {/* dpdhl packstation */}
-                          <CheckBoxField name="Packstation"
-                            fieldClass="column mb-0 is-12 px-1 py-2"
-                            defaultChecked={!isNoneOrEmpty(shipment.options?.dpdhl_packstation)}
-                            onChange={e => onChange({ options: { ...shipment.options, dpdhl_packstation: e.target.checked === true ? "" : null } })}
-                          >
-                            <span>Packstation</span>
-                          </CheckBoxField>
-
-                          <div className="column is-multiline m-0 p-0" style={{
-                            display: `${isNone(shipment.options?.dpdhl_packstation) ? 'none' : 'block'}`
-                          }}>
+                      <Disclosure.Panel className="is-flat m-0 px-0" style={{ maxHeight: '40vh' }}>
+
+                        {Object.entries(carrierOptions).map(([carrier, options]) => <React.Fragment key={carrier}>
+
+                          <label className="label is-capitalized" style={{ fontSize: '0.8em' }}>{references!.carriers[carrier]}</label>
+                          <hr className='my-1' style={{ height: '1px' }} />
+
+                          <div className="columns is-multiline m-0 p-0">
+
+                            {options.map((option, index) => <React.Fragment key={option}>
+
+                              {references!.options[carrier][option]?.type === 'boolean' && <>
+                                <CheckBoxField name={option}
+                                  fieldClass="column mb-0 is-6 pl-0 pr-2 py-4"
+                                  defaultChecked={shipment.options?.[option]}
+                                  onChange={e => onChange({ options: { ...shipment.options, [option]: e.target.checked || null } })}
+                                >
+                                  <span>{formatRef(option)}</span>
+                                </CheckBoxField>
+                              </>}
+
+                              {references!.options[carrier][option]?.type === 'string' && <>
+                                <InputField name={option}
+                                  label={formatRef(option)}
+                                  placeholder={formatRef(option)}
+                                  className="is-small"
+                                  fieldClass="column mb-0 is-6 pl-0 pr-2 py-1"
+                                  defaultValue={shipment.options[option]}
+                                  onChange={e => onChange({ options: { ...shipment.options, [option]: e.target.value } })}
+                                />
+                              </>}
+
+                            </React.Fragment>)}
 
-                            <InputField name="dpdhl_packstation"
-                              // label="Packstation"
-                              className="is-small"
-                              fieldClass="column mb-0 is-6 px-1 py-2"
-                              value={shipment.options?.dpdhl_packstation}
-                              required={!isNone(shipment.options?.dpdhl_packstation)}
-                              onChange={e => onChange({ options: { ...shipment.options, dpdhl_packstation: e.target.value } })}
-                            />
                           </div>
-                        </>}
+
+                          <div className='p-2'></div>
+
+                        </React.Fragment>)}
 
                       </Disclosure.Panel>
                     </div>

apps/dashboard/src/modules/Shipments/create_label.tsx

@@ -26,6 +26,7 @@ import { useLabelDataMutation } from '@karrio/hooks/label-data';
 import { InputField } from '@karrio/ui/components/input-field';
 import { DashboardLayout } from '@/layouts/dashboard-layout';
 import { useNotifier } from '@karrio/ui/components/notifier';
+import { useAPIMetadata } from '@karrio/hooks/api-metadata';
 import { ModalProvider } from '@karrio/ui/modals/modal';
 import { Spinner } from '@karrio/ui/components/spinner';
 import { bundleContexts } from '@karrio/hooks/utils';
@@ -48,6 +49,7 @@ export default function CreateLabelPage(pageProps: any) {
   const Component: React.FC = () => {
     const notifier = useNotifier();
     const { basePath } = useAppMode();
+    const { references } = useAPIMetadata();
     const { carrierOptions } = useConnections();
     const { addUrlParam, ...router } = useLocation();
     const { query: templates } = useDefaultTemplates();
@@ -477,12 +479,9 @@ export default function CreateLabelPage(pageProps: any) {
                     defaultValue={shipment.options?.insurance}
                     required={!isNone(shipment.options?.insurance)}
                     onChange={e => onChange({ options: { ...shipment.options, insurance: parseFloat(e.target.value) } })}
-                  >
-                    <span className="icon is-small is-left">
-                      <i className="fas fa-dollar-sign"></i>
-                    </span>
-                    <span className="icon is-small is-right">{shipment.options?.currency}</span>
-                  </InputField>
+                    addonLeft={<span className="icon is-small is-left"><i className="fas fa-dollar-sign"></i></span>}
+                    addonRight={<span className="icon is-small is-right">{shipment.options?.currency}</span>}
+                  />
 
                 </div>
 
@@ -510,12 +509,9 @@ export default function CreateLabelPage(pageProps: any) {
                     defaultValue={shipment.options?.cash_on_delivery}
                     required={!isNone(shipment.options?.cash_on_delivery)}
                     onChange={e => onChange({ options: { ...shipment.options, cash_on_delivery: parseFloat(e.target.value) } })}
-                  >
-                    <span className="icon is-small is-left">
-                      <i className="fas fa-dollar-sign"></i>
-                    </span>
-                    <span className="icon is-small is-right">{shipment.options?.currency}</span>
-                  </InputField>
+                    addonLeft={<span className="icon is-small is-left"><i className="fas fa-dollar-sign"></i></span>}
+                    addonRight={<span className="icon is-small is-right">{shipment.options?.currency}</span>}
+                  />
 
                 </div>
 
@@ -580,7 +576,7 @@ export default function CreateLabelPage(pageProps: any) {
               </div>
 
               {/* CARRIER OPTIONS SECTION */}
-              {carrierOptions.length > 0 && <div className='mb-4 px-3'>
+              {Object.keys(carrierOptions).length > 0 && <div className='card mb-4 px-3 mx-2'>
 
                 <Disclosure>
                   {({ open }) => (
@@ -592,32 +588,45 @@ export default function CreateLabelPage(pageProps: any) {
                           {open ? <i className="fas fa-chevron-up"></i> : <i className="fas fa-chevron-down"></i>}
                         </span>
                       </Disclosure.Button>
-                      <Disclosure.Panel className="card is-flat columns is-multiline m-0 px-2">
-
-                        {(carrierOptions.includes("dpdhl_packstation")) && <>
-                          {/* dpdhl packstation */}
-                          <CheckBoxField name="Packstation"
-                            fieldClass="column mb-0 is-12 px-1 py-2"
-                            defaultChecked={!isNoneOrEmpty(shipment.options?.dpdhl_packstation)}
-                            onChange={e => onChange({ options: { ...shipment.options, dpdhl_packstation: e.target.checked === true ? "" : null } })}
-                          >
-                            <span>Packstation</span>
-                          </CheckBoxField>
-
-                          <div className="column is-multiline m-0 p-0" style={{
-                            display: `${isNone(shipment.options?.dpdhl_packstation) ? 'none' : 'block'}`
-                          }}>
+                      <Disclosure.Panel className="is-flat m-0 px-0" style={{ maxHeight: '40vh' }}>
+
+                        {Object.entries(carrierOptions).map(([carrier, options]) => <React.Fragment key={carrier}>
+
+                          <label className="label is-capitalized" style={{ fontSize: '0.8em' }}>{references!.carriers[carrier]}</label>
+                          <hr className='my-1' style={{ height: '1px' }} />
+
+                          <div className="columns is-multiline m-0 p-0">
+
+                            {options.map((option, index) => <React.Fragment key={option}>
+
+                              {references!.options[carrier][option]?.type === 'boolean' && <>
+                                <CheckBoxField name={option}
+                                  fieldClass="column mb-0 is-6 pl-0 pr-2 py-4"
+                                  defaultChecked={shipment.options?.[option]}
+                                  onChange={e => onChange({ options: { ...shipment.options, [option]: e.target.checked || null } })}
+                                >
+                                  <span>{formatRef(option)}</span>
+                                </CheckBoxField>
+                              </>}
+
+                              {references!.options[carrier][option]?.type === 'string' && <>
+                                <InputField name={option}
+                                  label={formatRef(option)}
+                                  placeholder={formatRef(option)}
+                                  className="is-small"
+                                  fieldClass="column mb-0 is-6 pl-0 pr-2 py-1"
+                                  defaultValue={shipment.options[option]}
+                                  onChange={e => onChange({ options: { ...shipment.options, [option]: e.target.value } })}
+                                />
+                              </>}
+
+                            </React.Fragment>)}
 
-                            <InputField name="dpdhl_packstation"
-                              // label="Packstation"
-                              className="is-small"
-                              fieldClass="column mb-0 is-6 px-1 py-2"
-                              value={shipment.options?.dpdhl_packstation}
-                              required={!isNone(shipment.options?.dpdhl_packstation)}
-                              onChange={e => onChange({ options: { ...shipment.options, dpdhl_packstation: e.target.value } })}
-                            />
                           </div>
-                        </>}
+
+                          <div className='p-2'></div>
+
+                        </React.Fragment>)}
 
                       </Disclosure.Panel>
                     </div>

apps/www/docs/carriers/sdk/extension.mdx

@@ -38,7 +38,7 @@ The package naming convention for extensions is `karrio.[carrier_name]`
 
 #### 1. Create a karrio extension package
 
-Once you have [karrio installed for development](/contributing/development) on your machine,
+Once you have [karrio installed for development](/product/resources/development) on your machine,
 You can run the following command to scafold a karrio extension for you carrier.
 
 ```terminal

apps/www/docs/index.mdx

@@ -17,7 +17,7 @@ import CardGrid from "@site/src/components/CardGrid";
         "group rounded-lg border border-slate-200 hover:border-indigo-700 p-10 mt-10 hover:shadow no-underline"
       }
       style={{ color: "var(--ifm-font-color-base)" }}
-      href="/quick-start"
+      href="/product/quick-start"
     >
       <div className="flex justify-between mb-2">
         <div
@@ -75,8 +75,8 @@ import CardGrid from "@site/src/components/CardGrid";
 
 [**Carrier Integration** Integrate and diversify your network of carriers.](/carriers)
 
-[**Managment API** Manage your organizations programmatically.](/management)
+[**Managment API** Manage your organizations programmatically.](/reference/management)
 
-[**Self-Hosting** Learn how to deploy karrio on your own infrastructure.](/guides/self-hosting)
+[**Self-Hosting** Learn how to deploy karrio on your own infrastructure.](/product/self-hosting)
 
 </CardGrid>

apps/www/docs/product/orders.mdx

@@ -64,7 +64,7 @@ _Optionally_
 - **order_date (`optional`):** the date the order was created in your system.
 - **source (`optional`):** the source of the order. (e.g. Shopify, Magento, etc.)
 
-Check out the [order API reference](/api#tag/Orders/operation/&&&&create) for more details.
+Check out the [order API reference](/reference/openapi/#tag/Orders/operation/&&&&create) for more details.
 
 Considering the following shopify order sample:
 

apps/www/docs/contributing/guidlines.mdx → apps/www/docs/product/resources/contributing.mdx

@@ -1,6 +1,6 @@
 ---
-id: guidlines
-title: Guidelines
+id: contributing
+title: Contributing
 ---
 
 ## How to contribute

apps/www/docs/contributing/development.mdx → apps/www/docs/product/resources/development.mdx

@@ -318,4 +318,4 @@ We won't be able to assist with your Docker installation.
 Make sure you've read the warning about Windows 10 Home.
 Windows versions before Windows 10 are not officially supported.
 
-If you encounter other problems, see [Support](/support).
+If you encounter other problems, see [Support](/product/resources/support).

apps/www/docs/product/resources/faq.mdx

@@ -0,0 +1,29 @@
+---
+id: faq
+title: FAQs
+description: 'Most frequently asked questions regarding Karrio'
+hide_table_of_contents: true
+---
+
+*If you don't find an answer below or if you have a different question, please email us at
+[hello@karrio.io](mailto:hello@karrio.io).*
+
+## How can I integrate a custom carrier?
+
+karrio server uses the carrier extensions detected by the karrio SDK to establish carrier connections.
+To write your own carrier integration, you need to create a carrier extension using the
+[karrio SDK framework](/carriers/sdk/extension).
+
+## How can I spin up a sandbox for development?
+
+See [Local Developement](/product/local-development) guide for a simple docker compose setup without having to fork the entire repository.
+
+## How to set up the environment variables?
+
+See [Configuration](/product/self-hosting/environment) guide for full details on Karrio's deployment environment setup.
+
+## No active carrier connection found to process the request
+
+This error occurs when the karrio server is unable to find an active carrier connection to process the request.
+If you have carrier accounts configured, make sure that the carrier accounts are active and that you requests are being sent
+to the right environment. 

apps/www/docs/self-hosting.mdx → apps/www/docs/product/self-hosting.mdx

@@ -1,7 +1,7 @@
 ---
 id: self-hosting
 title: Overview
-slug: /guides/self-hosting
+slug: /product/self-hosting
 ---
 
 There are several ways you can use karrio :
@@ -10,11 +10,11 @@ There are several ways you can use karrio :
 
   You don't need to deploy anything. We will manage and scale your infrastructure.
 
-- ### [Karrio Open-Source](/self-hosting/oss)
+- ### [Karrio Open-Source](/product/self-hosting/oss)
 
   You're a large company with the need to self-host or an engineer looking to use the open-source version.
 
-- ### [Karrio Enterprise](/self-hosting/enterprise)
+- ### [Karrio Enterprise](/product/self-hosting/enterprise)
 
   Karrio Enterprise is built for large companies with significant data isolation requirements.
   It requires a contract, which includes Unlimited shipments each month, and dedicated support.
@@ -1064,7 +1064,7 @@ Karrio offer the possibility to store the shipping data related to your
 shipping operations in a **database**. The karrio GraphQL API allows you
 to access, query and visualize that data.
 
-> Learn more about Karrio GraphQL [here](/management).
+> Learn more about Karrio GraphQL [here](/reference/management).
 
 ### Carrier Extensions