# Service center rules with product dependency
```plantuml
actor "Front" as u
control Backend as hj
@startuml
note over u
query {
serviceCenterProducts {
serviceCenters {
id
name
title
operationType
street
zip
city
googlePlaceId
lat
lng
directions
wheelchairAccessible
openingHours
maxCapacity
}
products {
id
name
publicName
price
description
imageUrl
slug
vatRate
requireShipping
requireHousecall
requireDigital
createdAt
updatedAt
type
}
}
}
end note
u -> hj: calls for list of products available
u -> u: renders product list with prices \n(https://app.hjemmelegene.no/book/clinic)
note over u
query {
serviceCenterProducts(productSlugs: ["loc-ret-bp-pr"]) {
serviceCenters {
id
name
title
operationType
street
zip
city
googlePlaceId
lat
lng
directions
wheelchairAccessible
openingHours
maxCapacity
}
products {
id
name
publicName
price
description
imageUrl
slug
vatRate
requireShipping
requireHousecall
requireDigital
createdAt
updatedAt
type
}
}
}
end note
u -> hj: calls for service centers able to deliver particular service
u -> u: renders next step "Velg din klinikk" \n user picks service center
== ... and here begins a series of form-steps \n of a new appointment ending on its actual creation ==
note over u
mutation {
createAppointment(
serviceCenterId: 23
date: "2022-06-21"
hour: "13:20"
productSlugs: ["loc-tst-c19-pu"]
patientIds: [110]
mode: NORMAL
) {
id
date
hour
code
serviceCenter {
id
name
title
street
zip
city
lat
lng
directions
operationType
}
products {
id
name
publicName
price
description
imageUrl
slug
vatRate
requireShipping
requireHousecall
requireDigital
createdAt
updatedAt
type
}
}
}
end note
u -> hj: frontend creates appointment with graphql Mutation
@enduml
```