Implement components for widget UI in React storybook.

[dreampulse]

Zusammenfassung:

Alles ist umgesetzt Es fehlt der Slider.

Nächste Schritte -> was benötigst du von der Engine

• [x] Image Animation Component
• [x] Anforderungen an die API
• [x] Integration der API

[jannikkeye]

I am currently working with a hypothetical data structure (API Response) such as this:

{
  "title": "arbitrary-object-title",
  "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",
  "materials": [
    {
      "id": "arbitrary-id-1",
      "title": "arbitrary-material-title-1",
      "imageSrc": "arbitrary-material-image-source-1",
      "price": 10
    },
    {
      "id": "arbitrary-id-2",
      "title": "arbitrary-material-title-2",
      "imageSrc": "arbitrary-material-image-source-2",
      "price": 20
    },
    {
      "id": "arbitrary-id-3",
      "title": "arbitrary-material-title-3",
      "imageSrc": "arbitrary-material-image-source-3",
      "price": 30
    },
    {
      "id": "arbitrary-id-4",
      "title": "arbitrary-material-title-4",
      "imageSrc": "arbitrary-material-image-source-4",
      "price": 40
    }
  ]
}

The price field for every material should be the base price of the object with each material.

Questions:

• How should the final price calculation work (client or server)?
• Is there data missing in my proposed data structure that is crucial for price calculation and checkout?
• The shipping address provided by PayPal will be used for calculating the final price?
  • Where and when does this happen?
• [x] Where do I get the VAT value?
  • I found the necessary functions in the printing engine.

Edit: I just implemented the image slider and pushed.

[dreampulse]

Open questions:

• [x] How do we deal with currencies?
• [ ] How do we create the widget (initial data structure)
• [ ] Checkout paypal url?

[jannikkeye]

Widget Data Structure

For calculating the shipping cost and final cost of the product for sale via the widget there needs to be some form of predefined information inside the initial data structure concerning the different providers and shipping methods:

For Exapmple :

{
  "title": "arbitrary-object-title",
  "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",
  "materials": [
    {
      "id": "arbitrary-id-1",
      "title": "arbitrary-material-title-1",
      "imageSrc": "arbitrary-material-image-source-1",
      "price": 10,
      "provider": "Immaterialize",
      "shippingPrice": 6.50
    },
    ...
  ]
}

Or:

{
  "title": "arbitrary-object-title",
  "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",
  "materials": [
    {
      "id": "arbitrary-id-1",
      "title": "arbitrary-material-title-1",
      "imageSrc": "arbitrary-material-image-source-1",
      "price": 10,
      "provider": "Immaterialize",
      "shippingMethod": "slowest/fastest"
    },
    ...
  ]
}

Another way would be to use a specific shipping method for each country/provider i.e. the slowest/fastest. The way the shipping method is currently selected by the user via dropdown based on the country determined won't work in the current state of the widget. Either there needs to be another step in the checkout process of the widget where the user can select the desired method, or we somehow predefine the shipping info like above.

Currency

As you know the widget currently defaults to $ as currency. Maybe once the location of the user has been detected there will be a request to the engine which will handle the currency conversion?

[jannikkeye]

Outdated but left for documentation

Currency

As for currency handling I found that the engine already has the necessary setup and just needs to expose an api endpoint for currency conversion. Here is a sample JSON-Schema of the request body and response:

Request:

{
"title": "Currency Conversion Request",
"type": "object",
"properties": {
"value": {
"type": "number"
},
"from": {
"description": "Currency to convert from.",
"type": "string"
},
"to": {
"description": "Currency to convert to.",
"type": "number"
}
},
"required": ["value", "from", "to"]
}

Response:

{
"title": "Currency Conversion Response",
"type": "object",
"properties": {
"value": {
"type": "number"
},
"currency": {
"type": "string"
}
},
"required": ["value", "currency"]
}

This would also result in an updated widget data request structure:

{
  "title": "arbitrary-object-title",
  "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",
  "materials": [
    {
      "id": "arbitrary-id-1",
      "title": "arbitrary-material-title-1",
      "imageSrc": "arbitrary-material-image-source-1",
      "price": {
           "value": 10,
           "currency": "USD"
      },
      "provider": "Immaterialize",
      "shippingPrice": {
           "value": 10,
           "currency": "USD"
       },
   }
  ]
}

[jannikkeye]

Current state:

• [x] UI implemented
• [x] price checking and calculating implemented
• [x] initial data structure set (missing handling for shipping methods)
• [x] paypal checkout implemented